@CHARSET "utf-8";

/********** common **********/

/********** layout **********/
#header	{position:fixed;padding:0 15px;}
#header:after {content:""; clear:both; position:absolute; left:0; right:0; top:62px; height:1px; z-index:20; background:#fff; opacity:.2; filter:alpha(opacity=20);}
#header .logo	{height:47px; padding-top:13px; text-align:left;}
#header .logo a {width:150px; padding-top:47px; 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:15px; top:22px; 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:26px; margin-left:-13px; -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:26px; margin-left:-13px; -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; }
#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;border-bottom:1px solid #ddd }
#gnb >ul li p a	{ color:#222;font-family:'notob';font-weight:bold; }
#gnb >ul li p:after	{ display:inline-block;content:'';position:absolute;right:30px;top:50%;width:22px;height:23px;margin-top:-7px;background:url(/images/layout/ico_arrow.png) no-repeat 0 0;background-size:100%;overflow:hidden; }
#gnb >ul li p.focus:after	{ background-image:url(/images/layout/ico_arrow2.png); }
#gnb >ul >li p	{ position:relative;margin:0;padding:0; }
#gnb >ul >li p a	{ display:block;height:60px;padding:0 17px;line-height:60px; }
#gnb >ul >li ul	{ padding:20px 50px; }
#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.on	{ background:none; }
#header.on #gnb >ul >li.on ul	{ display:block; }
#header.on #gnb >ul >li.on p:after	{ background-image:url(/images/layout/ico_arrow2.png); } 
#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 .headerArea	{ float:right;width:85%;height:100%;background:#fff;overflow:auto; }
#header.on:before {background:none;}
#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; }

#wrapper	{ min-width:320px;  }
#wrapper.snbFix #header,
#wrapper.scroll #header	{ background:#fff; }
#wrapper.gnbFix #header .logo,
#wrapper.onSnb #header .logo	{ opacity:1;filter:alpha(opacity=100); }

#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;}