@charset "UTF-8";

div#slideBackground { width:100%; height:100%; min-height:100px; background-image:url('/res/img/sub/visual/v_buy.jpg'); background-position:center bottom; background-size:cover; position:fixed; top:0; left:0; }

/* 제품 주문 및 결제 */
section#mqOrder > header { background-image:url('/res/img/sub/visual/v_order.jpg'); background-position:center center; background-size:cover; }
section#mqOrder > div > p:nth-of-type(1) { background-color:#0a0; padding:12px 20px; color:#fff; font-size:1.4em; }
section#mqOrder > div > p.discountsoho { margin-top:10px; padding:10px; text-align:center; background-color:#ffc; border:1px dashed #ddc; color:#444; }
section#mqOrder > div > div.order { padding:20px 10px; border-bottom:1px dashed #ddd; overflow:hidden; }
section#mqOrder > div > div.order > dl { float:left; }
section#mqOrder > div > div.order > dl.product { line-height:1.6; }
section#mqOrder > div > div.order > dl.product > dt { font-size:2em; }
section#mqOrder > div > div.order > dl.product > dd { font-size:1.2em; }
section#mqOrder > div > div.order > dl.info { margin-top:4px; line-height:1.4; float:right; color:#444; }
section#mqOrder > div > div.order > dl.info > * { text-align:right; }
section#mqOrder > div > div.order > dl.info > dt { text-align:right; font-size:1.1em; color:#080; font-weight:bold; margin-bottom:2px; }
section#mqOrder > div > div.order > dl.info > dd.cost { font-size:2.2em; }
section#mqOrder > div > div.order > dl.info > dd.discount { font-size:1.2em; }
section#mqOrder > div > form { margin-top:20px; }
section#mqOrder > div > p.totalcost { padding:15px 10px; font-size:1.4em; text-align:right; }
section#mqOrder > div > p.totalcost > span { font-size:1.8em; vertical-align:middle; padding-left:10px; color:#e66; }

div#mqDeposit > h3.tt2 { border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:20px; }
div#mqDeposit > p.comment { margin-top:10px; padding:15px 10px; font-size:1.2em; border-top:1px solid #dadada; border-left:1px solid #dadada; border-right:1px solid #dadada; }
div#mqDeposit > p.comment span { line-height:1.6; }
div#mqDeposit > ul { margin-bottom:30px; padding:25px 10px; text-align:center; background-color:#ffc; border:1px solid #ddc; color:#444; font-size:1.6em; }
div#mqDeposit > div > dl { margin-top:12px; font-size:1.2em; }
div#mqDeposit > div > dl > dt { width:140px; font-weight:bold; padding-top:7px; padding-bottom:7px; }
div#mqDeposit > div > dl > dd { padding-top:7px; padding-bottom:7px; }
div#mqDeposit > p { text-align:center; }
div#mqDeposit > p.button > a { display:inline-block; font-weight:bold; background-color:#888; color:#fff; border:none; vertical-align:middle; }
div#mqDeposit > p.button > a:focus,
div#mqDeposit > p.button > a:hover { background-color:#322 !important; }

form#formOrder > h3 { border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:20px; }
form#formOrder > div > dl { margin-top:12px; position:relative; }
form#formOrder > div > dl > dt { font-size:1.2em; font-weight:bold; padding-top:7px; padding-bottom:7px; }
form#formOrder > div > dl > dd > input[type="file"] { width:100%; padding:3px; background-color:#fcfcfc; border:1px solid #aaa; }
form#formOrder > div > dl > dd > input[type="text"] { width:100%; padding:7px; }
form#formOrder > div > dl.pay > dd { padding-top:7px; font-size:1.2em; }
form#formOrder > div > dl.pay > dd > input[type="radio"]:not(:first-of-type) { margin-left:15px; }
form#formOrder > div > dl.pay > dd.txt { font-size:1.1em; }
form#formOrder > dl { margin-top:30px; }
form#formOrder > dl > dt { margin-bottom:8px; font-size:1.4em; font-weight:bold; }
form#formOrder > dl > dd { height:150px; background-color:#fafafa; border:1px solid #dadada; text-align:justify; overflow-y:auto; }
form#formOrder > dl > dd > div { padding:15px; font-size:1.1em; line-height:1.4; }
form#formOrder > p.chk_terms { text-align:center; margin-top:3px; padding:10px; font-size:1.1em; font-weight:bold; }
form#formOrder > p.button { text-align:center; }
form#formOrder > p.button > input[type="submit"] { font-weight:bold; background-color:#0077b3; color:#fff; border:none; }
form#formOrder > p.button > input[type="submit"]:focus,
form#formOrder > p.button > input[type="submit"]:hover { background-color:#322; }

form#formBuy > h3 { border-bottom:1px solid #ccc; padding-bottom:10px; margin-bottom:20px; }
form#formBuy > div > dl { margin-top:12px; font-size:1.2em; }
form#formBuy > div > dl > dt { width:140px; font-weight:bold; padding-top:7px; padding-bottom:7px; }
form#formBuy > div > dl > dd { padding-top:7px; padding-bottom:7px; }
form#formBuy > p { text-align:center; }
form#formBuy > p.alert { color:#f00; margin-top:30px; }
form#formBuy > p.button > * { vertical-align:middle; }
form#formBuy > p.button > input[type="submit"] { font-weight:bold; background-color:#00b31e; color:#fff; border:none; margin-right:10px; }
form#formBuy > p.button > a { font-weight:bold; background-color:#888; color:#fff; border:none; }
form#formBuy > p.button > *:focus,
form#formBuy > p.button > *:hover { background-color:#322 !important; }

section#mqBuyComplete { display:flex; flex-direction:column; background-image:url('/res/img/sub/visual/v_buy_complete.jpg'); background-position:center center; background-size:cover; }
section#mqBuyComplete > div { min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
section#mqBuyComplete > div > h2 { text-shadow:#000 1px 1px; text-align:center; font-weight:bold; font-size:5em; color:#fff; }
section#mqBuyComplete > div > p { margin-top:50px; text-shadow:#000 1px 1px; text-align:center; font-size:1.8em; color:#fff; }
section#mqBuyComplete > div > dl { margin-top:50px; text-align:center; opacity:.9; }
section#mqBuyComplete > div > dl > dd { background-color:#fff; font-size:1.6em; }
section#mqBuyComplete > div > dl > dd:first-of-type { padding-top:20px; padding-bottom:10px; }
section#mqBuyComplete > div > dl > dd:last-of-type { padding-bottom:20px; }

/*** Mobile ***/
@media screen and (min-width:1px) and (max-width:639px) {
	section#mqOrder > div { margin:20px; }
	section#mqOrder > div > div.order > dl:first-of-type { width:60%; }
	section#mqOrder > div > div.order > dl:last-of-type { width:40%; }

	form#formOrder > p.button { margin-top:20px; }
	form#formOrder > p > input[type="submit"] { padding:8px 20px; font-size:1.2em; }

	form#formBuy > p.alert { margin-top:20px; }
	form#formBuy > p.button { margin-top:20px; }
	form#formBuy > p.button > a,
	form#formBuy > p.button > input[type="submit"] { padding:8px 20px; font-size:1.2em; }
}

/*** Tablet **/
@media screen and (min-width:640px) and (max-width:1019px) {
	section#mqOrder > div { margin:20px; }
	section#mqOrder > div > div.order > dl:first-of-type { width:80%; }
	section#mqOrder > div > div.order > dl:last-of-type { width:20%; }

	form#formOrder > div > dl > dt { width:50%; }
	form#formOrder > div > dl > dd { width:50%; }
	form#formOrder > div > dl.pay > dt { width:25%; }
	form#formOrder > div > dl.pay > dd { width:75%; }
	form#formOrder > div > dl.pay > dd.txt { margin-left:25%; }
	form#formOrder > p.button { margin-top:30px; }
	form#formOrder > p > input[type="submit"] { padding:10px 25px; font-size:1.5em; }

	form#formBuy > div > dl > dt { width:50%; }
	form#formBuy > div > dl > dd { width:50%; }
	form#formBuy > p.alert { margin-top:30px; font-size:1.1em; }
	form#formBuy > p.button { margin-top:20px; }
	form#formBuy > p.button > a,
	form#formBuy > p.button > input[type="submit"] { padding:10px 25px; font-size:1.5em; }
}

/*** Tablet & Desktop ***/
@media screen and (min-width:640px) {
	section#mqBuy > div > div { overflow:hidden; }

	section#mqOrder > div > form > div > dl { overflow:hidden; }
	section#mqOrder > div > div.order > dl:first-of-type { min-height:92px; background:url('/res/img/sub/img_buy_appcheck.png') left top no-repeat; }
	section#mqOrder > div > form > div > dl > * { float:left; }
	section#mqOrder > div > div.order > dl:first-of-type > * { margin-left:100px; }
	section#mqOrder > div > div.order > dl.product > dd { margin-top:5px; }
	section#mqOrder > div > div.order > dl.info > dd { margin-top:2px; }

	div#mqDeposit > ul { text-align:center; }
	div#mqDeposit > ul > li { display:inline-block; }
	div#mqDeposit > ul > li:not(:first-of-type) { margin-left:40px; }
	div#mqDeposit > div { overflow:hidden; }
	div#mqDeposit > div > dl { width:48%; float:left; }
	div#mqDeposit > div > dl:nth-of-type(2n+1) { margin-right:4%; }

	form#formOrder > div { overflow:hidden; }
	form#formOrder > div > dl { width:48%; float:left; }
	form#formOrder > div > dl.pay { width:96%; }
	form#formOrder > div > dl:nth-of-type(2n+1) { margin-right:4%; }

	form#formBuy > div { overflow:hidden; }
	form#formBuy > div > dl { width:48%; float:left; }
	form#formBuy > div > dl:nth-of-type(2n+1) { margin-right:4%; }
}

/*** Desktop ***/
@media screen and (min-width:1020px) {
	section#mqOrder > div { width:1000px; margin-left:auto; margin-right:auto; margin-top:50px; margin-bottom:50px; }

	section#mqBuyComplete > div { width:1000px; margin-left:auto; margin-right:auto; }

	div#mqDeposit > h3 { font-size:1.6em; }
	div#mqDeposit > div > dl > dt { width:160px; }
	div#mqDeposit > div > dl > dd { width:250px; }
	div#mqDeposit > p.button { margin-top:40px; }
	div#mqDeposit > p.button > a { padding:12px 35px; font-size:1.8em; }

	form#formOrder > h3 { font-size:1.6em; }
	form#formOrder > div > dl > dt { width:160px; }
	form#formOrder > div > dl > dd { width:250px; }
	form#formOrder > div > dl.pay > dd { width:660px; }
	form#formOrder > div > dl.pay > dd.txt { margin-left:160px; }
	form#formOrder > p.button { margin-top:40px; }
	form#formOrder > p > input[type="submit"] { padding:12px 35px; font-size:1.8em; }

	form#formBuy > h3 { font-size:1.6em; }
	form#formBuy > div > dl > dt { width:160px; }
	form#formBuy > div > dl > dd { width:250px; }
	form#formBuy > p.alert { margin-top:40px; font-size:1.1em; }
	form#formBuy > p.button { margin-top:20px; }
	form#formBuy > p.button > a,
	form#formBuy > p.button > input[type="submit"] { padding:12px 35px; font-size:1.8em; }
}