@CHARSET "utf-8";

/********** common **********/
.forMobile {display:initial;}
.forPc {display:none;}

/********** layout **********/
#header	{position:fixed; height:48px; padding:0 16px;}
#header:after {content:""; clear:both; position:absolute; left:0; right:0; top:49px; height:1px; z-index:20; background:#fff; opacity:.2; filter:alpha(opacity=20);}
#header .logo	{position:absolute; left:16px; top:10px; z-index:-1; height:26px; padding-top:0; text-align:left;}
#header .logo a, #header.on .logo a {width:100px; padding-top:26px; margin:0; background-image:url(/images/layout/logo_m2.png); background-size:100%;}
#wrapper.scroll #header .logo a{background-image:url(/images/layout/logo_m.png);}
#header .util,
#header .foot {display:none;}
#header .cate {display:block; position:absolute; right:16px; top:16px; z-index:10; width:20px; height:16px;}
#header .cate a {overflow:hidden; display:block; height:0; padding-top:15px;}
#header .cate a:before, #header .cate a:after, #header .cate span:before {content:""; position:absolute; left:50%; top:0; width:20px; height:2px; margin-left:-10px; background:#164b71; -webkit-transition:all 0.15s ease-in-out; -moz-transition:all 0.15s ease-in-out; -o-transition:all 0.15s ease-in-out; transition:all 0.15s ease-in-out;}
#header .cate a:after {top:7px;}
#header .cate a span:before {top:14px;}
#header .cate.on a:before, #header.on .cate a:before {top:7px; width:22px; margin-left:-11px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg);}
#header .cate.on a:after, #header.on .cate a:after {top:7px; width:22px; margin-left:-11px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg);}
#header .cate.on a span:before, #header.on .cate span:before {width:0; margin-left:0;}
#header.on .cate a:before, #header.on .cate a:after, #header.on .cate span:before	{ background:#fff; }

#header .member, #header .utilMobile {display:none;}

#gnb	{display:none; clear:both; padding-top:0; margin:0;background:#fff;}
#gnb:after {display:none;}
#gnb >ul {width:100%;}

#gnb >ul li	{ display:block;padding:0;}
#gnb >ul li p a	{ color:#222;font-family:'notob';font-weight:bold; }
#gnb >ul li p a:after	{ display:inline-block;content:'';position:absolute;right:16px;top:50%;width:16px;height:9px;margin-top:-5px;background:url(/images/layout/ico_arrow3.png) no-repeat 0 0;background-size:100%;overflow:hidden; }
#gnb >ul li p.focus a:after	{ transform:rotate(180deg) }
#gnb >ul >li p	{ position:relative;margin:0;padding:0; }
#gnb >ul >li p a	{ display:block;height:48px;padding:0 16px;line-height:48px; }
#gnb >ul >li ul	{ padding:20px 40px 20px 16px; }
#gnb >ul >li li	{ max-width:100%;margin:0;line-height:2.2em; }
#gnb >ul >li ul,
#header.on #gnb >ul >li ul	{ display:none;background:#f7f7f7; }
#header.on #gnb >ul >li ul >li	{ border:none; }
#header.on #gnb >ul >li ul >li a	{ display:block;color:#444 !important; }
#header.on #gnb >ul >li p a {text-align:left;}
#header.on #gnb >ul >li.on	{ background:none; }
#header.on #gnb >ul >li.on ul	{ display:block; }
#header.on #gnb >ul >li.on p a:after	{ transform:rotate(180deg) }
#header.on #gnb >ul >li ul >li.on a	{ color:#164b71 !important;font-weight:bold;font-family:'notob'; }

#header.on	{ left:0%;height:100%;padding:0;z-index:113;background:none !important; }
#header.on .logo {background:none;}
#header.on .headerArea	{ float:right;width:85%;height:100%;background:#fff;overflow:auto; }
#header.on:before {content:""; position:absolute; left:0; top:0; bottom:0; width:15%; background:rgba(0,0,0,.4);}
#header.on:after {background:none;}
/*#header.on .logo	{ background:#164b71; }
#header.on .logo a	{ width:120px; margin:0 auto;background-image:url(/images/layout/logo_m2.png); background-size: 100%; }*/
/* #header.on .cate	{ right:0;left:20px;z-index:200;display:block !important; } */
/*#header.on .util	{ display:block;position:static;left:0;right:0;top:0;width:100%;padding:30px 0;text-align:center; }
#header.on .util li	{ width:70px; margin:0 6px;}
#header.on .util li a>img	{ width:100%; }
#header.on .util li a>img.onlyPc	{ display:none; }
#header.on .util li a>img.onlyMobile	{ display:block; }
#header.on .util li.qna {float:none; width:100%; padding:0; margin:-30px 0 20px; text-align:left; line-height:55px; background:#f7f7f7;}
#header.on .util li.qna:after {display:none;}
#header.on .util li.qna a {display:block; padding-left:17px; color:#444;}
#header.on .util li.qna a:before {content:""; position:absolute; left:initial; right:30px; top:50%; width:17px; height:18px; margin-top:-9px; background:url(/images/layout/ico_qna_m.png) no-repeat 0 0; background-size:100%;}*/
#header.on #gnb	{ display:block !important;margin-top:0 !important; }

#header.on .member {display:block; padding-left:16px; height:35px; padding-top:13px; background:#164b71;}
#header.on .member li {font-weight:500; color:#fff;}
#header.on .member li a {color:#fff;}
#header.on .utilMobile {display:block;}
#header.on .utilMobile .qna {margin:12px 0 30px 17px; font-size:12px; font-weight:500;}
#header.on .utilMobile .qna a {color:#666;}
#header.on .utilMobile .sns {padding-top:20px; border-top:8px solid #f9f9f9; text-align:center;}
#header.on .utilMobile .sns .text {font-size:12px; font-weight:500;}
#header.on .utilMobile .sns .text em {color:#164b71;}
#header.on .utilMobile .sns ul {margin-top:12px;}
#header.on .utilMobile .sns ul li {display:inline-block; padding:0 12px; font-size:10px;}
#header.on .utilMobile .sns ul li img {display:block; width:34px; margin:0 auto 5px;}
#header.on .utilMobile .sns ul li a {color:#666;}
#header.on .utilMobile .kakao {margin:60px 16px 0;}
#header.on .utilMobile .logout {margin:60px 0 20px; text-align:center; font-size:12px; font-weight:500;}
#header.on .utilMobile .logout a {position:relative; color:#666;}
#header.on .utilMobile .logout a:after {content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:#b3b3b3;}

#wrapper	{ min-width:320px;  }
#wrapper.typeB #header,
#wrapper.snbFix #header,
#wrapper.scroll #header	{ background:#fff; }
#wrapper.gnbFix #header .logo,
#wrapper.onSnb #header .logo	{ opacity:1;filter:alpha(opacity=100); }
#wrapper.typeB #header .logo a, #wrapper.snbFix #header .logo a {width:100px; background-image:url(/images/layout/logo_m.png);}

.snbFix #snb .nav {top:48px !important; height:50px !important;}
.snbFix #snb .nav li {padding-top:0 !important;}
.snbFix #snb .cate {margin-bottom:50px;}


#footer {padding-top:25px; padding-bottom:25px; text-align:center;}
#footer .fl {width:100%;}
#footer .logo {position:static;}
#footer .logo img {width:73px;}
#footer .wrap .navArea {margin:15px 0; width:100%;text-align:center;}
#footer .wrap .navArea .nav	{ float:none !important;display:block !important; }
#footer .wrap .navArea .nav, #footer .wrap .navArea .nav li {float:none; display:inline-block; font-size:.9rem;box-sizing:border-box;}
#footer .wrap .navArea .nav2 li:first-child	{ padding:0; margin:10px 0 0; }
#footer .wrap .navArea .nav2 li:first-child:before	{ background:none; }
#footer .wrap .navArea .nav li +li {padding-left:12px; margin-left:8px;}
#footer .wrap .navArea .global {float:none; width:195px; margin:0 auto;padding:15px 0 0; text-align:left;}
#footer .wrap .ccm {position:static; text-align:center;}
#footer address {margin-left:0; font-size:.7rem; word-break:keep-all;}
#footer .copy {margin-left:0; margin-top:5px; font-size:.7rem;}
#footer .family {display:none;}
.floatingBtn {right:9px; padding-bottom:10px;}
.floatingBtn img {width:130px;}

@media all and (max-width: 499px) {
    .popLayer {left:0; top:0; right:0; bottom:0; min-width:initial; height:initial !important; margin:0 !important;}
    #popWrapper {width:100%;}
}