@charset "utf-8";

#wrap{ position:relative; min-width:980px; min-height:100%; overflow:hidden;}

/* 상단(로고 및 메뉴) */
.area_header { position:absolute; top:0; left:0; z-index:20; width:200px; height:100%; background:#0a1748; }
.area_header .header{ width: 100%; }
.area_header header { position:relative; margin:0 auto;}
.area_header header  h1 a{display:block;  width:100%; height:110px; line-height:140px; text-align:center;}/*200316 추가*/

/* ie8 미디어쿼리 핵 */
@media \0screen {
.box_search_0 input { line-height:28px}
}

/* 웹네비게이션 */
#webNavi {display:block; /* 메뉴위치 탑 */}
#gnb {position:relative; padding-top:30px;}
#gnb li {position:relative;  text-align:center;}
#gnb li a {display:inline-block; width:100%; font-family:'NotoM'; letter-spacing:-1px; color:#fff; font-size:16px; line-height:50px; vertical-align:middle;}
#gnb li a:hover, #gnb li a:focus, #gnb li.on a {color:#ffdb84;}

/* 세로메뉴 */
#gnb li ul.box {position:absolute; top:43px; left:50%; width:140px; padding:12px 12px; margin-left:-84px; background-color:#fff; border:2px solid #0a1748;}
#gnb li ul.box li {padding:0; margin:0; float:none;}
#gnb li ul.box li a {display:block; padding:3px; margin:0; letter-spacing:0; font-family:'Dotum'; font-size:12px; color:#666; background:none;}
#gnb li ul.box li a:hover, #gnb li ul.box li a:focus {color:#006bb6; text-decoration:underline;}

/* mobile layout */
#tablet {display:none; width:100%}
#tabletHeader {width:100%; height:68px; margin:0 auto; position:fixed; top:0; left:0; z-index:20; background:#0a1748;}
#tabletLogo a {position:absolute; right:-17px; top:15px;}/*200316추가*/
#tablet .Txt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-family:'NotoM';color:#fff;font-size:20px;}/*200316추가*/
#tabletGnb #menuOpen {position:fixed; left:2.5%; top:22px; z-index:21}
#tabletGnb #menuOpen img {width:24px; height:23px;}

/* mobile navi */
#mNavi{position:absolute; left:-250px; top:0; width:250px; height:100%; z-index:9999; background-color:#ededed}
#mNavi #mtitle{width:100%; height:50px; background:#ededed;}
#mNavi #mtitle a {z-index:10000; font-size:0; line-height:0; text-indent:-9999em; display:inline-block; width:26px; height:23px; position:absolute; left:18px; top:14px; background:url(../../../images/template/071/common/btn_close.png) no-repeat; background-size:100% auto;}

#mNavi #mgnb .snb { width:100%;padding:5px 0; }
#mNavi #mgnb .snb, #mNavi #mgnb .snb ul li {background-color:#f9a825}
#mNavi #mgnb .snb li { float:left; width:30%; border-bottom:0; }
#mNavi #mgnb .snb li a { display:inline-block; font-family:"NotoR"; height:26px; line-height:26px; text-align:left; font-size:12px; color:#fff; vertical-align:middle}
#mNavi #mgnb .snb li a:hover, #mNavi #mgnb .snb li a:focus, #mNavi #mgnb .snb li a:active{color:#14266b}

#mNavi #mgnb ul{width:100%; overflow:hidden}
#mNavi #mgnb ul li{background-color:#14266b; position:relative}
#mNavi #mgnb ul li a{display:block; padding:0 0 0 20px; height:42px; line-height:42px; font-size:16px; font-family:"NotoM"; color:#fff}
#mNavi #mgnb ul li a:hover, #mNavi #mgnb ul li a:focus, #mNavi #mgnb ul li a:active{color:#f9a825}

#mNavi #mgnb ul li ul{display:none; background-color:#3d4b7d; padding:10px 0;}
#mNavi #mgnb ul li ul li{border-bottom:0; background-color:#3d4b7d;}
#mNavi #mgnb ul li ul li a{display:block; padding:0 0 0 20px; height:28px; line-height:28px; font-size:14px; font-family:"NotoR"; color:#fff}
#mNavi #mgnb ul li ul li a:hover, #mNavi #mgnb ul li ul li a:focus, #mNavi #mgnb ul li ul li a:active{color:#f9a825}

#mNavi #mgnb ul li ul li ul{ display:none; background-color:#351d5f; padding:4px 0;}
#mNavi #mgnb ul li ul li ul li{border-bottom:0; background-color:#351d5f}
#mNavi #mgnb ul li ul li ul li a{display:block; padding:0 0 0 30px; height:22px; line-height:22px; font-size:12px; font-family:"NotoR"; color:#fff}
#mNavi #mgnb ul li ul li ul li a:hover, #mNavi #mgnb ul li ul li ul li a:focus, #mNavi #mgnb ul li ul li ul li a:active{color:#f9a825}

#mNavi #mgnb ul li ul li.row > a:before,
#mNavi #mgnb ul li ul li.row > a:after {display:block; position:absolute; background-color:#fff; content:'';}
#mNavi #mgnb ul li ul li.row > a:before {width:9px; height:1px; right:18px; top:14px;}
#mNavi #mgnb ul li ul li.row > a:after {width:1px; height:9px; right:22px; top:10px;}
#mNavi #mgnb ul li ul li.on > a:after { display:none}


/********** media query mobile *************/
@media screen and (max-width:1200px){
	
	#wrap{min-width:320px; overflow:visible; height:100%}
	.area_header{ display:none}	
	#wrap, .area_footer, .box_footer, .footer_link li { width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	#web {display:none;}
	#tablet, .tabletlogo {display:block;}
	
	.box_mot_1{overflow:hidden; width:100%}
	.box_mot_1.on{position:fixed; top:0}
	.box_mot_1.on2{ position:relative; top:92px}
	
	
	
}



