@charset "utf-8";
html, body {height:100%;}
* {-webkit-text-size-adjust:none;}
body {font-family:'Noto Sans KR', sans-serif;}
blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, select, td, textarea, th, ul {margin:0; padding:0;}
article, aside, #footer, #header, hgroup, #main, nav, section {margin:0; padding:0; display:block;}
dl, li, menu, ol, ul {list-style:none;}
em, address {font-style:normal;}
a {text-decoration:none; border:none; color:#1a1a1a;}
fieldset {margin:0; padding:0; border:none;}
legend {display:none;}
button {font-family:inherit; vertical-align:top; cursor:pointer; white-space:nowrap; text-decoration:none; background:transparent; outline:none; border:none;}
button span {visibility:hidden; font-size:0; line-height:0;}
input, textarea {font-family:inherit; border:none; border-radius:0; -webkit-appearance:none;}
img {border:none;}
.hide {visibility:hidden; position:absolute; width:0; height:0; font-size:0; line-height:0;}
.cboth {clear:both; width:0; height:0; font-size:0; line-height:0;}

body {display:flex; font-size:16px;}
#wrap {display:flex; flex:auto; flex-direction:column;}
#header {flex:0 0 121px; position:relative;}
#header:before {content:''; position:absolute; top:0; left:0; right:0; height:4px; background:#f54141; font-size:0; line-height:0;}
#header:after {content:''; position:absolute; left:30px; right:30px; bottom:0; height:1px; background:#d8d8d8; font-size:0; line-height:0;}
#header .logo {position:absolute; top:4px; left:0; right:0; bottom:1px; background:url(//nmenu.mt.co.kr/common/logo_mt188x40.png) no-repeat center center; font-size:0; line-height:0;}
#footer {display:flex; flex:0 0 110px; justify-content:center; align-items:center; background:#5e5e5e;}
#footer .copyright {font-size:1rem; font-weight:100; letter-spacing:-0.2px; text-align:center; color:#fff; opacity:0.5;}
#container {flex:auto; display:flex; justify-content:center; align-items:center;}
#container .content {display:flex; flex-direction:column; flex:0 1 1024px; max-width:1024px; height:100%;}
#container .content .item_display {display:flex; flex-direction:column; flex:auto; justify-content:center; align-items:center;}
#container .content .item_display .item {font-size:1.875rem; letter-spacing:-0.2px; text-align:center;}
#container .content .item_display .item .name {color:#333;}
#container .content .item_display .item .price {color:#999;}
#container .content .item_display .item .price.up {color:#f54141;}
#container .content .item_display .item .price.dn {color:#0072ff;}
#container .content .item_display .item .price.st {color:#999;}
#container .content .item_display .progress {display:flex; margin-top:65px; width:100%; justify-content:center; align-items:center;}
#container .content .item_display .progress .bar {display:flex; width:507px; height:10px;}
#container .content .item_display .progress .bar .outbox {display:flex; overflow:hidden; width:100%; background:#ffcdcd; border-radius:5px;}
#container .content .item_display .progress .bar .innerbox {display:flex; height:100%; background:#f54141; font-size:0; line-height:0; border-radius:5px;}
#container .content .item_display .progress .ctr {display:flex; margin-left:10px; height:32px;}
#container .content .item_display .progress .ctr button {width:32px; height:32px; background-repeat:no-repeat; background-position:center center; background-size:32px auto;}
#container .content .item_display .progress .ctr button + button {margin-left:6px;}
#container .content .item_display .progress .ctr .pause {background-image:url(//nmenu.mt.co.kr/common/etc/btn_pgbStop_off.png);}
#container .content .item_display .progress .ctr .pause:hover,
#container .content .item_display .progress .ctr .pause:focus,
#container .content .item_display .progress .ctr .pause.on {background-image:url(//nmenu.mt.co.kr/common/etc/btn_pgbStop_on.png);}
#container .content .item_display .progress .ctr .move {background-image:url(//nmenu.mt.co.kr/common/etc/btn_pgbStart_off.png);}
#container .content .item_display .progress .ctr .move:hover,
#container .content .item_display .progress .ctr .move:focus,
#container .content .item_display .progress .ctr .move.on {background-image:url(//nmenu.mt.co.kr/common/etc/btn_pgbStart_on.png);}
#container .content .item_display .cmt {margin-top:26px; font-size:1.125rem; font-weight:300; line-height:28px; letter-spacing:-0.2px; color:#666;}
#container .content .item_display .cmt span:nth-child(2):before {content:'\00a0'}
#container .content .info {padding:74px 0 73px; border-top:1px solid #d8d8d8;}
#container .content .info h3 {font-size:1.25rem; letter-spacing:-0.2px; color:#5e5e5e;}
#container .content .info ul {margin-top:19px; font-size:1rem; line-height:28px; letter-spacing:-0.2px; color:#333;}
#container .content .info ul li {position:relative; padding-left:8px;}
#container .content .info ul li:before {content:'-'; position:absolute; left:0; font-weight:bold; color:#000;}
/*** 1024px 이하 ***/
@media only screen and (max-width:1024px) {
	#header:after {left:15px; right:15px;}
	#container {align-items:flex-start; padding:0 15px;}
}
/*** 640px 이하 ***/
@media only screen and (max-width:640px) {
	#container .content .item_display {flex:auto; padding:74px 0;}
	#container .content .item_display .item {display:flex; flex-direction:column;}
	#container .content .item_display .progress {flex-direction:column;}
	#container .content .item_display .progress .bar {width:calc(100% - 30px);}
	#container .content .item_display .progress .ctr {margin-top:15px;}
	#container .content .item_display .cmt {display:flex; flex-direction:column; justify-content:center; align-items:center;}
	#container .content .item_display .cmt span:nth-child(2):before {content:'';}
}
/*** 500px 이하 ***/
@media only screen and (max-width:500px) {
	#header {flex:0 0 80px;}
	#header .logo {background-size:auto 20px;}
	#footer {flex:0 0 50px;}
	#footer .copyright {font-size:0.8125rem;}
	#container .content {height:auto;}
	#container .content .item_display {padding:29px 0 30px;}
	#container .content .item_display .item {font-size:20px; line-height:30px;}
	#container .content .item_display .cmt {font-size:0.9375rem; line-height:22px;}
	#container .content .item_display .progress {margin-top:18px;}
	#container .content .info {padding:25px 0;}
	#container .content .info h3 {font-size:1.125rem;}
	#container .content .info ul {margin-top:7px; font-size:0.75rem; line-height:20px;}
}
/*** 320px 이하 ***/
@media only screen and (max-width:320px) {
	/**/
}