@charset "UTF-8";

html { min-height:100%; position:relative; }
html[lang="ko"] * { font-family:'Noto Sans Korean'; }
html[lang="en"] * { font-family:'Roboto'; }

body { height:100%; color:#333; background-color:#272727; overflow-x:hidden; }

a { color:#000; }

div#mqMask { display:none; }

div#mqLayout { width:100%; background-color:#fff; }

header#mqHeader { width:100%; display:none; }
header#mqHeader > h1 { width:169px; height:32px; background-repeat:no-repeat; }
header#mqHeader > h1 > a { height:100%; display:block; }
header#mqHeader > nav > ul > li > a { font-weight:bold; display:block; background-repeat:no-repeat; }
header#mqHeader > nav > ul > li > ul { display:none; }
header#mqHeader > nav > ul > li > ul > li > a { display:block; }

nav#mqNaviSlide { width:100%; background-color:#323232; position:relative; z-index:101; }
nav#mqNaviSlide > div > dl { line-height:1.6; }
nav#mqNaviSlide > div > dl > dt { color:#fff; font-size:1.4em; font-weight:bold; }
nav#mqNaviSlide > div > dl > dd { color:#bbb; font-size:1.1em; }
nav#mqNaviSlide > div > dl > dd > a { color:#bbb; }
nav#mqNaviSlide > div > dl > dd > a:focus,
nav#mqNaviSlide > div > dl > dd > a:hover { color:#ddd; }

footer#mqFooter { width:100%; background-color:#272727; position:relative; z-index:101; }
footer#mqFooter > div.top { padding-top:50px; padding-bottom:40px; color:#999; overflow:hidden; }
footer#mqFooter > div.top > dl { font-size:1.1em; }
footer#mqFooter > div.top > dl > dd:not(:last-of-type) { margin-bottom:6px; }
footer#mqFooter > div.top > dl > dd > a { color:#bbb; }
footer#mqFooter > div.bottom { border-top:1px solid #383838; padding-top:30px; padding-bottom:60px; overflow:hidden; }
footer#mqFooter > div.bottom > ul > li { color:#999; }
footer#mqFooter > div.bottom > ul > li > a { color:#999; }
footer#mqFooter > div.bottom > ul > li > a:focus,
footer#mqFooter > div.bottom > ul > li > a:hover { color:#fff; }
footer#mqFooter > div.bottom > ul > li > a#hrefLanguage { color:#fff; }
footer#mqFooter > div.bottom > p { color:#999; }

aside#mqLanguage { width:100%; height:100%; position:fixed; top:0; left:0; background-color:rgba(0, 0, 0, .9); z-index:106; display:none; }
aside#mqLanguage > div { height:100%; display:-ms-flexbox; display:flex; align-items:center; justify-content:center; }
aside#mqLanguage > div > dl > dt { color:#fff; font-weight:bold; font-size:1.4em; padding-bottom:10px; }
aside#mqLanguage > div > dl > dd { margin-top:15px; }
aside#mqLanguage > div > dl > dd > a { display:block; padding-top:2px; padding-bottom:2px; min-height:20px; color:#dadada; font-size:1.2em; padding-left:38px; background-position:left center; background-repeat:no-repeat; }
aside#mqLanguage > div > dl > dd.ko > a { background-image:url('/res/img/common/foot/img_flag_ko.png'); }
aside#mqLanguage > div > dl > dd.en > a { background-image:url('/res/img/common/foot/img_flag_en.png'); }
aside#mqLanguage > div > dl > dd > a:focus,
aside#mqLanguage > div > dl > dd > a:hover { color:#ff0; font-weight:bold; text-decoration:none; }
aside#mqLanguage > div > p { position:absolute; top:0; right:0; }

p#alertOlderBrowser { width:100%; background-color:#5f5f5f; padding-top:10px; padding-bottom:10px; color:#fff; font-size:1.4em; font-weight:bold; text-align:center; opacity:.8; position:fixed; left:0; bottom:0; z-index:222; display:none; }

p#mqTop { position:fixed; right:20px; bottom:20px; opacity:.6; z-index:103; }

*.anchor { position:absolute; visibility:hidden; }

/* Mobile */
@media screen and (min-width:1px) and (max-width:639px) {
	div#mqLayout { height:100%; min-width:300px; position:relative; }

	footer#mqFooter > div { padding-left:20px; padding-right:20px; text-align:center; }
	footer#mqFooter > div.top > dl { margin-top:20px; }
	footer#mqFooter dl.sns dd { display:inline-block; margin-left:4px; margin-right:4px; }
	footer#mqFooter > div.bottom > ul { overflow:hidden; }
	footer#mqFooter > div.bottom > ul > li:not(:first-of-type) { margin-top:15px; }
	footer#mqFooter > div.bottom > p { margin-top:30px; }
}

/* Mobile & Tablet */
@media screen and (min-width:1px) and (max-width:1019px) {
	div#mqMask { width:100%; height:100%; position:fixed; background-image:url('/res/img/common/navi/img_bg_mask.png'); z-index:104; }

	header#mqHeader h1 { background-image:url('/res/img/common/img-logo-white.svg'); position:absolute; top:20px; left:20px; z-index:102; }
	header#mqHeader > nav > ul { width:200px; height:100%; background-color:#fff; position:fixed; top:0; right:-200px; z-index:105; }
	header#mqHeader > nav > ul > li:first-of-type { margin-top:73px; border-top:1px solid #00B051; }
	header#mqHeader > nav > ul > li > a { padding:18px 18px 18px 50px; font-size:1.3em; color:#444; background-position:18px center; }
	header#mqHeader > nav > ul > li > a:focus,
	header#mqHeader > nav > ul > li > a:hover { background-color:#ddd; }
	header#mqHeader > nav > ul > li > a.enter { background-color:#00B051; color:#fff; }
	/*header#mqHeader > nav > ul > li.support > a { background-image:url('/res/img/common/navi/img_bg_navi_support_off.png'); }
	header#mqHeader > nav > ul > li.support > a.enter { background-image:url('/res/img/common/navi/img_bg_navi_support_on.png'); }*/
	header#mqHeader > nav > ul > li > ul { background-color:#f0f0f0; }
	header#mqHeader > nav > ul > li > ul > li:not(:first-of-type) { border-top:1px dashed #fff; }
	header#mqHeader > nav > ul > li > ul > li > a { padding:12px 18px; }
	header#mqHeader > nav > ul > li > ul > li > a:focus,
	header#mqHeader > nav > ul > li > ul > li > a:hover { background-color:#d2ffa6; }
	header#mqHeader > nav > p { position:fixed; top:20px; right:20px; z-index:106; }
	header#mqHeader > nav > p > a { width:33px; height:33px; display:block; background:url('/res/img/common/navi/img_button_navi_all.png') no-repeat; }
	header#mqHeader > nav > p > a.enter { background-position:0 -33px; }

	nav#mqNaviSlide { padding-top:40px; padding-bottom:40px; }
	nav#mqNaviSlide > div { text-align:center; padding-left:20px; padding-right:20px; }
	nav#mqNaviSlide > div > dl:not(:first-of-type) { margin-top:20px; padding-top:20px; border-top:1px dashed #444; }
}

/* Tablet */
@media screen and (min-width:640px) and (max-width:1019px) {
	div#mqLayout { min-width:620px; }

	footer#mqFooter > div { padding-left:20px; padding-right:20px; }
	footer#mqFooter > div.top > *:not(.sns) { margin-right:30px; }

	#mqFooter div.top dl.sns { min-width:32px; max-width:32px; }
}

/* Tablet & Desktop */
@media screen and (min-width:640px) {
	footer#mqFooter > div.top { display:flex; }
	footer#mqFooter > div.top > h2 { min-width:108px; max-width:108px;}
	footer#mqFooter > div.top > dl:nth-of-type(1) { min-width:185px; max-width:185px; }
	footer#mqFooter > div.top > dl:nth-of-type(2) { width:100%; }
	footer#mqFooter > div.bottom > ul > li { float:left; }
	footer#mqFooter > div.bottom > ul > li:not(:first-of-type) { margin-left:40px; }
	footer#mqFooter > div.bottom > p { float:right; }

	*.anchor { margin-top:-68px; }
}

/* Desktop */
@media screen and (min-width:1020px) {
	div#mqLayout { min-width:1000px; }

	header#mqHeader { position:fixed; top:0; left:0; z-index:103; }
	header#mqHeader > h1 { float:left; margin-top:28px; margin-left:25px; background-image:url('/res/img/common/img-logo-white.svg'); }
	header#mqHeader > nav { float:right; position:relative; padding-left:10px; }
	header#mqHeader > nav > ul > li { float:left; position:relative; }
	header#mqHeader > nav > ul > li > a { color:#fff; text-shadow:#444 1px 1px; font-size:1.5em; padding:32px 22px; }
	header#mqHeader > nav > ul > li > a.enter { background-color:#23af50; text-shadow:none; }
	header#mqHeader > nav > ul > li > ul { min-width:160px; font-size:1.3em; background-color:#eee; position:absolute; right:0; }
	header#mqHeader > nav > ul > li > ul > li > a { padding:14px 25px 14px 20px; white-space:nowrap; border-left:4px solid #333; background-color:#333; color:#ddd; }
	header#mqHeader > nav > ul > li > ul > li > a:focus,
	header#mqHeader > nav > ul > li > ul > li > a:hover { color:#fff; background-color:#444; border-color:#23af50; }
	header#mqHeader > nav > p { display:none; }

	header#mqHeader.layered { /*background-color:#fff;*/ background-color:rgba(255, 255, 255, .85); border-bottom:1px solid #dadada; }
	header#mqHeader.layered > h1 { margin-top:18px; margin-left:20px; background-image:url('/res/img/common/img-logo.svg'); }
	header#mqHeader.layered > nav > ul > li > a { padding-top:22px; padding-bottom:22px; color:#444; text-shadow:none; }
	header#mqHeader.layered > nav > ul > li > a.enter { color:#fff; }
	header#mqHeader.layered > nav > ul > li > ul { border-top:1px solid #dadada; }

	nav#mqNaviSlide { padding-top:40px; padding-bottom:40px; }
	nav#mqNaviSlide > div { width:1000px; margin-left:auto; margin-right:auto; overflow:hidden; }
	nav#mqNaviSlide > div > dl { float:left; text-shadow:0 1px 0 #0f0f0f; }
	nav#mqNaviSlide > div > dl:not(:first-of-type) { margin-left:100px; }

	footer#mqFooter > div { width:1000px; margin-left:auto; margin-right:auto; }
	footer#mqFooter > div.top > *:not(.sns) { margin-right:40px; }

	#mqFooter dl.sns { min-width:70px; max-width:70px; display:-ms-flexbox; display:flex; -ms-flex-pack:justify; justify-content:space-between; }
}