@charset "utf-8";

/*공통css*/
.wrap{width:1200px; margin:0 auto; position:relative;}
.wrap:after{content:""; display:block; clear:both;}


/*S:header*/

#head{width:100%; margin-left:-7px; position:fixed; z-index:2; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.33); }
#head:after{content:""; display:block; clear:both;}

#h-logo{position:absolute; top:12px; left:-83px; z-index:3; }
#s-logo{display:none; position:absolute; top:7px; left:-82px; z-index:3; }


#lnb-warp{position:relative;}
#lnb-warp:after{content:""; display:block; clear:both;}

/*head-menu*/
#lnb{font-size:1.4em; letter-spacing:-0.2px; margin-left:510px; width:90%; padding-top:24px;  padding-bottom:24px; }
#lnb:after{content:""; display:block; clear:both;}
#lnb li{width:15%; float:left; line-height:62px; text-align:center; position:relative;}

/*depth_menu*/
ul.mm>li a{display:block; transform:skew(-0.001deg);}
ul#lnb li ul.depth{background:#fff; display:none; width:100%; position:absolute; z-index:9999; top:80px; left:0; padding:8% 5%; box-sizing:border-box; box-shadow:5px 7px 6px rgba(88, 88, 88, 0.32);}
ul#lnb li ul.depth li{line-height:36px;  font-size:14px; font-weight:400; float:none; width:100%;}
ul#lnb li ul.depth li:last-child{border:none;}
ul#lnb li ul.depth li::after{background:none;}

ul#lnb li ul.depth li a{color:#333; display:block; padding-bottom:5px; transform:skew(-0.001deg);}
ul#lnb li ul.depth li a:hover{background:#1162a1; color:#fff;}
ul li .fix-color{color:#333;}
ul li:hover .fix-color{color:#fff; font-weight:400; background:#1162a1;}

/*all-menu*/
.all-menu-wrap{position:fixed; width:1200px; display:block; z-index:9999;}
#all-menu{position:absolute; top:45px; /*right:300px;*/right:-50px; z-index:9999;}
.hamburger .line{width:30px; height: 3px; background-color:#666; display: block; margin:5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.hamburger:hover{cursor: pointer;}
#ham.is-active{-webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; -webkit-transform: rotate(45deg); 
-ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
#ham.is-active .line:nth-child(2){width:0px;}
#ham.is-active .line:nth-child(1), #ham.is-active .line:nth-child(3){ -webkit-transition-delay: 0.3s;-o-transition-delay: 0.3s; transition-delay: 0.3s;}
#ham.is-active .line:nth-child(1){-webkit-transform:translateY(13px); -ms-transform:translateY(13px); -o-transform:translateY(13px); transform:translateY(13px); background-color:#fff;}
#ham.is-active .line:nth-child(3){-webkit-transform:translateY(-3px) rotate(90deg); -ms-transform:translateY(-3px) rotate(90deg); -o-transform:translateY(-3px) rotate(90deg); transform:translateY(-3px) rotate(90deg); background-color:#fff;}

.menu-hide{width:100%; right:-100%; height:100%; /*position:fixed;*/ position:absolute; z-index:999; top:0px; transition:all .6s ease-in-out;}
.menu-hide nav .menu-all{margin:220px auto 0 auto;}
.menu-hide nav .menu-all li{width:22%; float:left; text-align:left; transition:all .5s ease;}
.menu-hide nav .menu-all li:first-child, .menu-hide nav .menu-all li:nth-child(2){margin-right:5%;}
.menu-hide nav .menu-all li:nth-child(3), .menu-hide nav .menu-all li:nth-child(4), .menu-hide nav .menu-all li:nth-child(5){margin-left:5%;}

.menu-hide nav .menu-all li a{color:#fff; display:block; font-size:20px; }
.menu-hide nav .menu-all li a:hover{color:#fff; transition:all .5s ease;}
.menu-hide.show{right:0px; background-color:rgba(0, 0, 0, 0.9); transition: all .6s ease-in-out;}

.all-depth{display:block;}
.menu-hide nav .menu-all li .all-depth{padding:17px 0 !important; height:auto !important;}
.menu-hide nav .menu-all li .all-depth li{border-bottom:none; width:100%; float:none; margin:0 !important;}
.menu-hide nav .menu-all li .all-depth li a{font-size:18px; font-weight:400; color:#c7c7c7; line-height:40px; position:relative;}
.menu-hide nav .menu-all li .all-depth li a:after{content:""; display:block; border-bottom:solid 3px #a9cef3; transform:scaleX(0); transition:transform 250ms ease-in-out;}
.menu-hide nav .menu-all li .all-depth li a:hover:after{transform:scaleX(1); transform-origin:0% 50%;}

.menu-hide nav .menu-all li:hover .fix-color{color:#a9cef3;}
.menu-hide nav .menu-all li .all-depth li a:hover{background-color:unset; color:#a9cef3;}

/*E:header*/

/*S:footer*/
footer{width:100%; /*height:100%;*/ background-color:#272727;}
footer address{overflow:hidden; position:relative;}
footer address ul{margin:5% 0 5% 8%; padding-left:15%; position:relative;}
footer address ul:after{content:''; display:block; background:url("../images/common/f-logo.png")no-repeat; width:260px; height:80px; position:absolute; top:-15px; left:-8%;}
footer address ul li{display:inline-block; color:#e7e7e7; font-size:14px; font-weight:400; margin-right:3px; line-height:160%;}
footer address ul li a{color:#e7e7e7;}
footer address ul li:nth-child(7){display:block;}
footer address ul li:last-child{color:#acacac; font-size:13px; margin-left:3px;}

.back-top{position:absolute; top:0; right:0; z-index:2;}
.back-top a{display: block;}

/*E:footer*/


/*S:max-width:1780*/
@media all and (max-width:1780px) {
#h-logo{position:absolute; top:7px; left:-20px; z-index:3; }

}

/*S:max-width:1580*/
@media all and (max-width:1580px) {
#h-logo{position:absolute; top:7px; left:0px; z-index:3; }
#all-menu{position:absolute; top:45px; /*right:300px;*/right:-10px; z-index:9999;}
#lnb{font-size:17px; letter-spacing:-0.2px; margin-left:450px; width:80%; padding-top:24px;  padding-bottom:24px; }

}

/*S:max-width:1280*/
@media all and (max-width:1280px) {
#h-logo{position:absolute; top:7px; left:20px; z-index:9999; position:fixed;}
#all-menu{position:absolute; top:45px; /*right:300px;*/right:10px; z-index:9999;}
#lnb{font-size:17px; letter-spacing:-0.2px; margin-left:300px; width:80%; padding-top:24px;  padding-bottom:24px; }
}


/*media*/

/*S:max-width:1024*/
@media all and (max-width:1024px) {
.wrap{width:100%;}

/*S:header*/
#head{z-index:initial; position:relative;}
#h-logo{left:15px;z-index:9999; position:fixed;}
#h-logo img{width:200px;}
#lnb-warp{display:none;}

/*all_menu*/
#all-menu{display:none;}
.menu-hide{display:none;}

/*footer*/
footer address ul{padding-left:30%;}
footer address ul:after{left:0;}


}
/*E:max-width:1024*/

/*S:max-width:800*/
@media all and (max-width:800px){
/*header*/
#h-logo{display:none; margin-left:5px; margin-top:1%;}
#h-logo img{display:none; width:100%;}

#s-logo{display:block;left:10px; margin-top:2%;z-index:9999; position:fixed;}
#s-logo img{width:100%;}

/*footer*/
footer address ul:after{width:100%; height:75px; left:-2%; background-size:contain;}

}
/*E:max-width:800*/

/*S:max-width:650*/
@media all and (max-width:650px){

/*header*/
#h-logo{width:18%; margin-left:5px; margin-top:1%; }
#s-logo{left:5px; margin-top:2.5%;z-index:9999; position:fixed;}
#s-logo img{width:100%;}

/*footer*/
footer address ul{padding-left:0; margin:5% 0; padding:12% 0 5% 0; text-align:center;}
footer address ul li{display:block;}
footer address ul:after{height:65px; left:32%;}

}
/*E:max-width:650*/


/*S:max-width:430*/
@media all and (max-width:430px){
footer address ul{padding-left:0; margin:5% 0; padding:12% 0 0% 0; text-align:center;}
footer address ul:after{height:55px; left:32%;}
#s-logo img{width:90%;}
}

/*S:max-width:375*/
@media all and (max-width:375px){
/*header*/
#h-logo{width:24%;}
#s-logo{left:5px; margin-top:2%;z-index:9999; position:fixed;}
#s-logo img{width:84%;}

/*footer*/
footer address ul{padding-left:0; margin:5% 0; padding:13% 0 10% 0; text-align:center;}
footer address ul li{display:block;}
footer address ul:after{height:52px; left:30%;}


}
/*E:max-width:375*/

/*S:max-width:320*/
@media all and (max-width:320px){
/*header*/
#h-logo{width:26%;}



.back-top{width:14%;}
.back-top a img{width:100%;}


}
/*E:max-width:320*/