@charset "UTF-8";

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{margin:0; padding:0; border:0; font-size:100%; font-family:"dotum,gulim,arial"; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1; background:#fff;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}
table {border-collapse:collapse; border-spacing:0;}

/* Layout */
@media screen and (min-width:0px) and (max-width:430px) {
	html {height:100% !important;}
	body {height:100% !important;}
	.mainC {height:100% !important;}
}
@media screen and (min-width:431px) and (max-width:480px) {
	html {min-height:700px !important;}
	body {min-height:700px !important;}
	.mainC {min-height:700px !important;}
}
@media screen and (min-width:481px) and (max-width:550px) {
	html {height:800px !important;}
	body {height:800px !important;}
	.mainC {min-height:800px !important;}
}
@media screen and (min-width:551px) and (max-width:630px) {
	html {height:900px !important;}
	body {height:900px !important;}
	.mainC {min-height:900px !important;}
}
@media screen and (min-width:631px) and (max-width:700px) {
	html {height:1000px !important;}
	body {height:1000px !important;}
	.mainC {min-height:1000px !important;}
}
@media screen and (min-width:701px) and (max-width:765px) {
	html {height:1100px !important;}
	body {height:1100px !important;}
	.mainC {min-height:1100px !important;}
}
@media screen and (min-width:766px) and (max-width:830px) {
	html {height:1200px !important;}
	body {height:1200px !important;}
	.mainC {min-height:1200px !important;}
}
@media screen and (min-width:831px) and (max-width:970px) {
	html {height:1400px !important;}
	body {height:1400px !important;}
	.mainC {min-height:1400px !important;}
}
@media screen and (min-width:971px) and (max-width:1110px) {
	html {height:1600px !important;}
	body {height:1600px !important;}
	.mainC {min-height:1600px !important;}
}
@media screen and (min-width:1111px) and (max-width:1320px) {
	html {height:1900px !important;}
	body {height:1900px !important;}
	.mainC {min-height:1900px !important;}
}
@media screen and (min-width:1320px) and (max-width:1600px) {
	html {height:2300px !important;}
	body {height:2300px !important;}
	.mainC {min-height:2300px !important;}
}
@media screen and (min-width:1601px) and (max-width:1820px) {
	html {height:2600px !important;}
	body {height:2600px !important;}
	.mainC {min-height:2600px !important;}
}
@media screen and (min-width:1821px) and (max-width:3000px) {
	html {height:3100px !important;}
	body {height:3100px !important;}
	.mainC {min-height:3100px !important;}
}


body.hide {overflow:hidden; height:100%; position:relative;}


.mainC {position:relative;}
.mainC * {box-sizing:border-box;}
.mainC img {max-width:100%;}
.mainC a {text-decoration:none;}


#header {height:50px; line-height:50px; position:absolute; top:0; right:0; left:0;}
#header .header-L {position:absolute; top:7px; left:0;}
#header .header-L .btnService {display:inline-block; width:34px; height:28px; background:url(/answer/img/ico_dots_navy.png) no-repeat 50% 50%; background-size:3px auto;}
#header .header-R {position:absolute; top:7px; right:22px; width:27%; border-bottom:1px solid #ccc;}


#contents {background-color:#e8ebf0; letter-spacing:-1px;}
#contents .contBox {text-align:center;}
#contents .contBox > img {width:100%;}
#contents .contBox ul {display:block; width:100%; clear:both; overflow:hidden;}
#contents .contBox ul > li {float:left; text-align:center; background-color:#36344a; height:42px; line-height:44px; font-size:1.08rem; color:#fefeff; cursor:pointer;}
#contents .contBox ul > li.on > span {display:inline-block; height:100%; font-weight:bold; color:#fff; border-bottom:3px solid #fff;}
#contents .detailBox {padding:0.8em;}
#contents .detailBox > .box {background-color:#fff; box-shadow:1px 2px 3px #bebebe; margin-bottom:0.9em; padding:0 0.4em 0.5em;}
#contents .detailBox > .box .tit {height:54px; line-height:56px; font-size:1.18rem; font-weight:bold; color:#16191e; padding-left:0.4em;}
#contents .detailBox > .box .tit > img {width:100%;}
#contents .detailBox > .box > ul {display:block; width:100%; clear:both; overflow:hidden; border-left:1px solid #dcd8d9;}
#contents .detailBox > .box > ul:nth-child(2) {border-top:1px solid #dcd8d9;}
#contents .detailBox > .box > ul > li {float:left; border-right:1px solid #dcd8d9; border-bottom:1px solid #dcd8d9; background:url(/answer/img/ico_arrow_right_gray.png) no-repeat 88% 50%; background-size:5px auto;}
#contents .detailBox > .box > ul > li > a {display:block; font-size:0.98rem; color:#000; padding:1em 0 0.9em; font-size:0.9em;}
#contents .detailBox > .box > ul > li > a.on {font-weight:bold; color:#de0031; background:url(/answer/img/ico_arrow_right_pink.png) no-repeat 88% 50%; background-size:5px auto;}
#contents .detailBox > .box > ul > li > a:active {font-weight:bold; color:#de0031; background:url(/answer/img/ico_arrow_right_pink.png) no-repeat 88% 50%; background-size:5px auto;}
#contents ul.col1 li {width:100%; text-align:center; background:url(/answer/img/ico_arrow_right_gray.png) no-repeat 65% 50% !important; background-size:5px auto !important;}
#contents ul.col1 li > a.on {background:url(/answer/img/ico_arrow_right_pink.png) no-repeat 65% 50% !important; background-size:5px auto !important;}
#contents ul.col1 li > a:active {background:url(/answer/img/ico_arrow_right_pink.png) no-repeat 65% 50% !important; background-size:5px auto !important;}
#contents ul.col2 li {width:50%; padding-left:0.7em;}
#contents ul.col3 li {width:33.3%; padding-left:0.7em;}
#contents ul.col3.mainBtn li {padding-left:0;}
#contents ul.col3 li > a {font-size:0.86rem !important;}
#contents ul.col4 li {width:25%; padding-left:0.7em;}


#footer {background-color:#e8ebf0; text-align:center; padding:0.8em 0 1.4em;}
#footer img {width:55%;}


.event_banner {background-color:#e8ebf0; padding:0 0 0.2em;}
.event_banner > a {display:inline-block;}
.event_banner img {max-width:100%; box-shadow:1px 2px 3px #bebebe;}


#layer {position:absolute; top:30%; right:0; bottom:0; left:0; z-index:10; letter-spacing:-0.8px;}
#layer .gradeLayer {position:absolute; top:0; right:0; bottom:0; left:0; z-index:30; padding:0 3em;}
#layer .gradeLayer > p {height:48px; line-height:50px; font-size:1.15rem; font-weight:bold; color:#16191e; background-color:#fff; position:relative; padding-left:1em;}
#layer .gradeLayer > p > span {font-size:1.07rem;}
#layer .gradeLayer > div {background-color:#fff; padding:0 0.5em 0.5em;}
#layer .gradeLayer > div > ul {border-top:1px solid #dad8d9; border-left:1px solid #dad8d9;}
#layer .gradeLayer > div > ul > li {border-right:1px solid #dad8d9; border-bottom:1px solid #dad8d9; padding:0.9em 0 0.8em 1.4em; background:url(/answer/img/ico_arrow_right_gray.png) no-repeat 85% 50%; background-size:6px auto;}
#layer .gradeLayer > div > ul > li > a {display:block; font-size:1.05rem; color:#333;}
#layer .gradeLayer .btnClose {width:18px; height:100%; position:absolute; top:0; right:12px; background:url(/answer/img/ico_close_gray2.png) no-repeat 50% 50%; background-size:18px auto; cursor:pointer;}


/*
#service .quickTit {margin-bottom:1em;}
#service .quickCont > p {margin-bottom:1em;}
#service .quickCont > p:last-child {margin-bottom:0;}
#service .btnClose {width:25px; height:30px; position:absolute; top:17px; right:5%; background:url(/answer/img/ico_close_gray.png) no-repeat 50% 50%; background-size:25px auto; z-index:20;}
*/

input.gray {width:72%; height:36px; line-height:36px; font-size:0.9rem; color:#222; border:1px solid #9a9a9c; outline-style:none; padding:0 0.5em;}
input.p-gray::-webkit-input-placeholder {color:#b1b1b3 !important;}
input.p-gray:-moz-placeholder {color:#b1b1b3 !important;}
input.p-gray::-moz-placeholder {color:#b1b1b3 !important;}
input.p-gray:-ms-input-placeholder {color:#b1b1b3 !important;}


select.gray {width:100%; height:30px; line-height:32px; font-size:0.92rem; color:#222; border:none; padding:0 0.2em; outline-style:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url(/answer/img/ico_arrow_open_black.png) transparent no-repeat right 55%; background-size:14px auto; letter-spacing:-0.1px;}
select.gray option {font-size:0.9rem; color:#222;}
select.grayB {width:42%; height:36px; line-height:36px; font-size:0.9rem; font-weight:bold; color:#222; border:1px solid #9a9a9c; padding:0 0.6em; outline-style:none;}


.full-bg {display:block; position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0, 0, 0, 0.8); z-index:20;}

/* 서비스 일시 중단 안내 */
.popup-type1 {display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;align-items:center;justify-content:center;flex-direction:column;background:rgba(0, 0, 0, 0.5)}
.popup-type1.on {display: flex;}
.popup-type1 .popup-inner {position:relative;display:flex;flex-direction:column;margin:24px auto;padding:0 0 24px 0;transform:translate3d(0, 0, 0);max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);background:#fff;overflow:hidden;z-index:999; border-radius: 20px;}

.popup-notice-stop {margin:0;padding:35px 35px 11px 35px;height:100%;word-break:break-all;overflow-y:auto}
.popup-notice-stop > .title {margin-bottom: 20px; font-size: 20px; line-height: 34px; font-weight: 700; letter-spacing: -2px; color: #111; text-align: center;}
.popup-notice-stop > .title > span {display: block; font-size: 24px; font-weight: inherit; color: inherit; letter-spacing: inherit;}
.popup-notice-stop > .title > span > em {font-style: normal; color: #EC2F2F;}
.popup-notice-stop > .text {font-size: 14px; line-height: 24px; color: #333; font-weight: 500; letter-spacing: -1px;}
.popup-logo {margin:20px auto 0; width: 100px; height: 50px; background: url(https://answer.mdonga.com/images/common/logo_donga.png) no-repeat center; background-size: 100% auto;}