/* request sample music form */
#requestSample { max-width: 960px; overflow:auto;  }
#requestSample > form > div {line-height: 30px; border: 1px solid gray; border-radius: 4px; padding: 10px 6px 10px 10px; margin-bottom: 20px; background-color: #ffffff; font-size: 14px}
#requestSample > form > div span {font-size: 16px}
#requestSample > form > .contentsTitle { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 20px;}
#requestSampleForm {background-color: #cccccc}
#requestSample > form > .contentBody { line-height: 30px; overflow: auto; text-align: center; font-size: 14px; word-break: keep-all; }
#requestSample > form > div > input[type="text"] {margin-top: 10px; border-top: none; border-left: none; border-right: none;  border-bottom: 1px solid gray; font-size: 16px; text-align: center; min-width: 220px; color: #0080c0} 
#requestSample > form > div > input[type="text"]::placeholder {color: #c0c0c0; font-style: italic}
#requestSample > form > div:last-child {border: none; background-color: rgba(0,0,0,0.0)}

/* request subscribe music form */
#requestSubscribe {max-width: 960px; margin: 0 auto; text-align: center;}
#requestSubscribe > article {line-height: 30px; border: 1px solid gray; border-radius: 4px; padding: 10px; margin-bottom: 20px; background-color: #ffffff; font-size: 14px}
#requestSubscribe article div, span {font-size: 14px}
#requestSubscribe > article[id="buttons"] {border: none; background-color: rgba(0, 0, 0, 0.0); padding: 10px; margin-bottom: 20px;}
#requestSubscribe .inputText {margin-top: 10px; border-top: none; border-left: none; border-right: none;  border-bottom: 1px solid gray; font-size: 16px; text-align: center; min-width: 220px; color: #0080c0} 
#requestSubscribe .inputText::placeholder {color: #c0c0c0; font-style: italic}
#requestSubscribe .selectOneMonth {padding-right: 46px}
#requestSubscribe .selectThreeMonth {padding-left: 22px}
#requestSubscribe #season1 {margin-right: 45px}
#requestSubscribe #season2 {margin-right: 14px}

/* request gift music form */
#requestGift {max-width: 960px; margin: 0 auto; text-align: center;}
#requestGift > article{line-height: 30px; border: 1px solid gray; border-radius: 4px; padding: 10px; margin-bottom: 20px; background-color: #ffffff; font-size: 14px}
#requestGift article div, span {font-size: 14px}
#requestGift > article[id="buttons"] {border: none; background-color: rgba(0, 0, 0, 0.0); padding: 10px; margin-bottom: 20px;}
#requestGift .inputText {margin-top: 10px; border-top: none; border-left: none; border-right: none;  border-bottom: 1px solid gray; font-size: 16px; text-align: center; min-width: 220px; color: #0080c0} 
#requestGift .inputText::placeholder {color: #c0c0c0; font-style: italic}
#requestGift .selectOneMonth {padding-right: 28px}
#requestGift .selectThreeMonth {padding-left: 8px}
#requestGift #season1 {margin-right: 65px}


/* login form */
#loginform {width: 500px;}
#loginform * { font-size: 14px}
#loginform section { background-color: #ffffff; padding: 10px}
#loginform input[type="text"], input[type="password"] { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid gray; width: 260px }
#loginform section > div:nth-child(1) { border-top: none; border-left: none; border-right: none; border-bottom: 1px solid gray; overflow: auto }
#loginform section > div:nth-child(1) > div { float: left; font-size: 20px; font-style: italic; margin: 5px 0 }
#loginform section > div:nth-child(1) > div:nth-child(2) {float: right; font-size: 16px;}
#loginform section > div:nth-child(2) {overflow: auto; clear: both;  width: 400px; margin: 10px auto; line-height: 30px}
#loginform section > div:nth-child(2) > div:nth-child(1) { clear: both }
#loginform section > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) {float: left; width: 100px; text-align: center}
#loginform section > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) {float: left;}
#loginform section > div:nth-child(2) > div:nth-child(2) { clear: both }
#loginform section > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {float: left; width: 100px; text-align: center}
#loginform section > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) {float: left;}

#contentsWrap {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.5); display: none;}
#articleBox {vertical-align: middle; padding: 15px; border: 1px; border-radius: 4px; background-color: #cccccc; border-color: #b1ccfe; display: inline-block}
#blank {display: inline-block; width: 0; height: 100%; vertical-align: middle}

@media (max-width: 805px) {
	#requestGift .selectOneMonth {padding-right: 0px}
	#requestGift .selectThreeMonth {padding-left: 0px}
	#requestGift #season1 {margin-right: 0px}
	#requestGift #season2 {margin-right: 0px}

	#requestSubscribe .selectOneMonth {padding-right: 0px}
	#requestSubscribe .selectThreeMonth {padding-left: 0px}
	#requestSubscribe #season1 {margin-right: 0px}
	#requestSubscribe #season2 {margin-right: 0px}
	.selectArea { padding: 0; text-align: center}
	.selectArea > span:first-child {display: block; text-align: center}
	.selectArea > span:nth-child(2) {display: none;}
}


@media (max-width: 414px) {
	#articleBox {width: 376px}
	#requestSample { width: 376px;}
	#requestSample #emailaddress {width: 310px}

	#requestSubscribe {width: 376px}
	#requestSubscribe #orderName {width: 310px}
	#requestSubscribe #orderEmailaddress {width: 310px}
	#requestSubscribe #orderRealName {width: 310px}


	#requestGift {width: 376px}
	#requestGift #orderName {width: 310px}
	#requestGift #orderEmailaddress {width: 310px}
	#requestGift #receiverName {width: 310px}
	#requestGift #receiverEmailaddress {width: 310px}
	#requestGift #orderRealName {width: 310px}
}


@media (max-width: 411px) {
	#articleBox {width: 370px}
	#requestSample { width: 370px;}
	#requestSubscribe {width: 370px}
	#requestGift {width: 370px}
}


@media (max-width: 375px) {
	#articleBox {width: 337px}
	#requestSample { width: 337px;}
	#requestSample #emailaddress {width: 280px}

	#requestSubscribe {width: 337px}
	#requestSubscribe #orderName {width: 280px}
	#requestSubscribe #orderEmailaddress {width: 280px}
	#requestSubscribe #orderRealName {width: 280px}


	#requestGift {width: 337px}
	#requestGift #orderName {width: 280px}
	#requestGift #orderEmailaddress {width: 280px}
	#requestGift #receiverName {width: 280px}
	#requestGift #receiverEmailaddress {width: 280px}
	#requestGift #orderRealName {width: 280px}

}

@media (max-width: 360px) {
	#articleBox {width: 322px}
	#requestSample { width: 322px;}
	#requestSample #emailaddress {width: 270px}

	#requestSubscribe {width: 322px}
	#requestSubscribe #orderName {width: 270px}
	#requestSubscribe #orderEmailaddress {width: 270px}
	#requestSubscribe #orderRealName {width: 270px}


	#requestGift {width: 322px}
	#requestGift #orderName {width: 270px}
	#requestGift #orderEmailaddress {width: 270px}
	#requestGift #receiverName {width: 270px}
	#requestGift #receiverEmailaddress {width: 270px}
	#requestGift #orderRealName {width: 270px}

}

@media (max-width: 320px) {
	#articleBox {width: 282px}
	#requestSample { width: 282px;}
	#requestSample #emailaddress {width: 230px}
	

	#requestSubscribe {width: 282px}
	#requestSubscribe #orderName {width: 230px}
	#requestSubscribe #orderEmailaddress {width: 230px}
	#requestSubscribe #orderRealName {width: 230px}


	#requestGift {width: 282px}
	#requestGift #orderName {width: 230px}
	#requestGift #orderEmailaddress {width: 230px}
	#requestGift #receiverName {width: 230px}
	#requestGift #receiverEmailaddress {width: 230px}
	#requestGift #orderRealName {width: 230px}

}