/* 넓이 1400px 맞춤 */
.clearfix:after {content: " ";visibility: hidden;display: block;height: 0;clear: both;}
#logo {float: left; padding: 0px 0;}
#logo a { display:block}
#logo img { width:300px;}
.logo img { width:300px;}

@media screen and (max-width:960px) {
}


#tnb {float:right;border-bottom: 0;background: #fff; margin-top:20px;}
#tnb li {float:left; display:inline-block; padding: 0 10px;     border-left: 1px solid #ddd;}
#tnb li:first-child { margin-left:0; border-left:0} 

#header #top{max-width:1400px; margin:0 auto; height:120px; box-sizing:border-box; padding-top:0px; background:#ffffff; padding:0px 20px;}
#header .gubun { border-bottom:1px solid tomato;height:1px;}
#header .gnb_large {max-width:1400px; margin:0 auto; padding:0 30px 0 30px; }
.gnb_wrap{position:relative;border-top:1px solid #ddd;border-bottom:1px solid #ddd;height:68px; background-color:#fff}
.gnb_wrap .gnb_large>li {float:left;padding:13px 40px;position:relative;background-image:url(../img/line.gif);background-repeat:no-repeat;background-position:0px 30px; }
.gnb_wrap .gnb_large>li:first-child { background-image:none}

.gnb_wrap .gnb_sub {position:absolute;left:0px;top:67px;width:280px;display:none;background:rgba(0,0,0,0.9);opacity:1;z-index:100;padding:10px 10px 20px 20px}
.gnb_wrap .gnb_sub li a { color:#fff; font-size:16px; font-weight:400; letter-spacing:0}
.gnb_wrap .gnb_sub li .depth3 { font-size:14px; }
.gnb_wrap .gnb_sub li a:hover { color:#ffd800;}



.gnb_wrap a {line-height:40px;font-size:17px; text-decoration:none; color:#333; font-weight:500; }






.gnb_wrap .gnb_large #tm_a0 a:hover { color:#cc0000;}
.gnb_wrap .gnb_large #tm_a0 a {line-height:20px;font-size:19px; text-decoration:none; color:#333; font-weight:700; display:block;text-align:center; }





.gnb_wrap a:hover {color: #2776c0}
.gnb_wrap li.on > a {color: #cc0000}
.gnb_wrap .line {position:absolute;left: 0px; top:65px;width: 0px;height:2px; overflow: hidden; background-color:#cc0000; z-index:1000;} /* javascript로 control */
.gnb_wrap .all {display:none; position:absolute; width:100%; z-index:20; background-color:#fff; top:67px; border-bottom:1px solid #ddd;}
.gnb_wrap .all>ul {list-style:none;margin:0;padding:0; width:1080px; margin:0 auto}
.gnb_wrap .all>ul>li:nth-child(6n+1){ padding-left:0; margin:0}
.gnb_wrap .all>ul>li {float:left; padding:16px; border-right:1px solid #ccc; width:180px; height:300px; box-sizing:border-box;}
.gnb_wrap .all>ul>li>a {color:#2a3b53;  font-weight:600}
.gnb_wrap .all>ul>li>ul{list-style:none;margin:0;padding:0;}
.gnb_wrap .all>ul>li>ul>li a {padding:0; font-size:16px; color:#555; font-weight:400}
.gnb_wrap .menu {cursor:pointer;text-indent:-9999px; position:absolute;top:25px;left:50%;width:25px;height:20px; background-image:url(../img/cate_more.gif); margin-left:580px; border:0;}
.gnb_wrap .menu.on {background-image:url(../img/cate_close.gif);}
.gnb_wrap #text_size {position:absolute;top:20px; right:50%; margin-right:-590px;float: right;}


#m-hd {display:none; height:75px; width:100%; position:fixed; top:0px; border-bottom:1px solid rgba(255, 255, 255, .3); z-index:2000;}
#m-hd .logo {position:absolute; left:10px; top:20px; display:inline-block; width:100px; height:40px; background-size:100% }
#m-hd .m-menu { width: 300px; background-color:#fff; position:absolute; z-index:10; right:-300px; top:0px; padding-top:50px; transition:right 0.5s;-webkit-transition: right 0.5s; overflow:auto;}
#m-hd .m-menu.on { right:0px;}
#m-hd .m-block {position:fixed; left:0; top:0; z-index:9; width:100%; height:100vh; background-color:#000; opacity:0.5; display:none;}
#m-hd .m-block.on {display:block;}
#m-hd .m-nav .logo_top { padding-top:50px}
#m-hd .m-nav > li {border-bottom:1px solid #f4f1f1; position:relative; }
#m-hd .m-nav > li .btn-down { position:absolute; right:20px; top:10px; font-size: 15px; width:30px; height:30px; line-height:30px; display:inline-block; text-align:center;  cursor:pointer; transform:rotate(-90deg);transition:transform 0.5s;-webkit-transition: transform 0.5s; overflow:auto;}
#m-hd .m-nav > li .btn-down.on {transform:rotate(90deg)}
#m-hd .m-nav > li > a { display:block; font-size:16px; padding:15px 10px 15px 35px;}
#m-hd .btn-menu { width: 40px; height:40px; line-height:40px; border:0; background-color:transparent; color:#fff; font-weight:bold; position:absolute; right:10px; top:17px; font-size:20px; z-index:9999}
#m-hd .btn-menu.on { color:#333}
#m-hd .m-sub-nav {display:none;}
#m-hd .m-sub-nav > li { border-top:1px solid #fff;  line-height:35px; }
#m-hd .m-sub-nav > li > a  {display:block; font-size:13px; padding:6px; background-color:#ddd; padding-left:38px}
.btn-menu{position:fixed;z-index:2000;right:5px;top:20px;width:40px;height:40px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer;display:block;}
.btn-menu .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background-color:#333;-webkit-transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;transition:all .7s ease-out}
.btn-menu.on .navicon-line{background-color:#333;}
.btn-menu .nl1 {top: 11px;right: 10px; width:30px;}
.btn-menu .nl2 {top: 19px;right: 10px; width:24px;}
.btn-menu .nl3 {top: 27px;right: 10px; width:30px;}
.btn-menu.on>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#000;}
.btn-menu.on>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)}
body.scrolled .btn-menu .navicon-line {background-color: #666;}
body.scrolled .btn-menu.on >div{background-color:#666;}
.sub_navI_warp { display:none}

@media screen and (max-width:1400px) {
.gnb_wrap .gnb_large>li {float:left;padding:13px 25px;position:relative;background-image:url(../img/line.gif);background-repeat:no-repeat;background-position:0px 30px; }

.gnb_wrap a {line-height:40px;font-size:17px; text-decoration:none; color:#333; font-weight:500;}
}

@media screen and (max-width:1100px) {
	.gnb_wrap { display:none}
    #logo{display:none}
	#header #top { height:75px}
	#header #tnb { display:none}
	/*#hd {display:none;}*/
	#m-hd {display:block; background-color:#fff; z-index:9999}
	#m-hd .logo { background-repeat:no-repeat}
	#m-hd .logo img { max-width:200px; }
	.scrolled #m-hd { background-color:#fff; border-bottom:1px solid #ddd;}
	.scrolled #m-hd .logo { background-image:url(../img/logo-color.png); background-repeat:no-repeat}


}


@media screen and (max-width:640px) {
   .sub_navI_warp { display:block; width:90%; height:62px; margin:auto; top:-32px;  clear:both; background-attachment:scroll; position:relative; background-color:#000; z-index:3}
   .sub_navI_warp .all-wrap{transition:all .3s ease;}
   .sub_navI_warp .all-wrap .loca-wrap{width:100%;margin:0 auto;height:62px}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area { float: none;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area i { display:none}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul {width: 100%; float:left; padding:0; margin:0}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li { position:relative; float:left; width: 50%; height:62px; border-left: 1px solid #666;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li:first-child { border: 0;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button {width: 100%; height:62px; border: 0; position:relative; text-align:left; padding-left:1px; background-color: transparent;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button {background-image:url(../img/loca_arrow_off.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;-webkit-transition:background .3s ease;
   -moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button.active{background-image:url(../img/loca_arrow_on.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li button span {padding-left: 19px;background-color: transparent; color:#fff; font-size:14px}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li div { overflow: hidden; height: 0; position: relative;}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li div ul{display:block;position:absolute;width:100%;left:0;border-top:1px solid #6c9bdb; padding:0}
   .sub_navI_warp .all-wrap .loca-wrap .loca-area > ul > li div ul li a{ border-bottom:1px solid #3583f0; background:#166ce3;height:46px;color:#fff;line-height:46px;display:block;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;padding-left:19px;box-sizing:border-box}

}