/* header  active:메뉴펼침*/
.header{width:100%;margin:0 auto;padding:0;box-sizing:border-box;position:fixed; top:0; left:0; z-index:9; height:100px; text-align:center;  transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden;border-bottom:0.5px solid rgba(255,255,255,0.2);}
.header.on{background:#fff; box-shadow:2px 2px 30px rgba(0,0,0,0.1);box-sizing:border-box}
.header.active{border-bottom:none;}
.header_in{width:100%;max-width:1600px;margin:0 auto;position:relative;}
.header .logo{display: block; width:160px; height:60px;background-image:url(../img/common/h_logo_w.png);background-repeat:no-repeat; position:absolute; left:50px; top:10px;background-size:100%;}   
.header.on .logo{background-image:url(../img/common/h_logo.png);}
.header.on .nav:after{display:none;}
.header.on .nav > li > h2{color:#333;}  

/*헤더오픈시 헤더배경*/
.header:before{content:''; width:100%; height:100px; background:#fff; position:absolute; top:0; right:0; z-index:-1; opacity:0; transition:all ease .6s;-webkit-transition:all ease .6s; -o-transition:all ease .6s; -moz-transition:all ease .6s; -ms-transition:all ease .6s;}

/*헤더오픈시 헤더배경 불투명처리*/
.header.active:before{opacity:1;}

/*헤더오픈*/
.header.active{height:300px;}

/*헤더메뉴펼칠때 애니메이션효과*/
.header:after{opacity:0; transition:all ease .6s;-webkit-transition:all ease .6s; -o-transition:all ease .6s; -moz-transition:all ease .6s; -ms-transition:all ease .6s;}

/*헤더 네비게이션*/
.nav{display:inline-block;}
.nav.hide{display:none;} 

/*1차메뉴*/
.nav h2{font-weight:300; cursor:pointer;}
.nav > li{float:left;} 
.nav > li>h2{color:#fff; font-size:16.5px; padding:0 35px; line-height:100px;}
.nav > li >a:hover{color:#014099;}
/*2차메뉴오픈시 1차메뉴 변화*/

.nav > li h2{position:relative; }
.nav > li:hover h2:after{content:''; width:6px; height:6px; background:#f40000;border-radius:50%; position:absolute; left:50%; top:25px; margin-left:-3px;}

.nav h3{font-weight:400;}
.nav > li>h3{color:#000; font-size:18px; font-weight:500;}  
.nav > li h3 a{ transition:all ease .3s;-webkit-transition:all ease .3s; -o-transition:all ease .3s; -moz-transition:all ease .3s; -ms-transition:all ease .3s;}
.nav > li h3 a:hover{color:#014099;}
.nav > li > a{color:#666; font-size:16px;} 

/*2차메뉴*/
.nav > li > ul{padding:0; overflow:hidden; width:100%; position:absolute; top:100px; left:0; text-align:center;padding:20px; }
.nav > li > ul > li{font-size:14px; vertical-align:top;height:200px;display:inline-block; padding-right:30px;text-align:left; opacity:0; transition:all ease .6s;-webkit-transition:all ease .6s; -o-transition:all ease .6s; -moz-transition:all ease .6s; -ms-transition:all ease .6s;}
.nav > li > ul > li > h3{margin:0 0 5px;display:inline-block;font-weight:400;color:#000;}
.nav > li > ul > li > a{line-height:2.2em;padding:5px 0; transition:all ease .3s;-webkit-transition:all ease .3s; -o-transition:all ease .3s; -moz-transition:all ease .3s; -ms-transition:all ease .3s; color:#111;display:inline-block;margin:0 35px;}
.nav > li > ul > li > a:hover{color:#014099;}
.nav > li.open ul > li{ opacity:1;}

/*3차메뉴*/
.nav > li > ul > li > ul{padding-top:5px;}
.nav > li > ul > li > ul>li>a{line-height:1.6em;padding-left:0px;font-size:15px;color:#777;}
.nav > li > ul > li > ul>li>a:hover{color:#014099;opacity:0.8}

/*사이트맵열기버튼*/
.mhead_btn {position:absolute; top:0;right:30px; width:100px; height:100px; cursor:pointer;}
.mhead_btn .bar {position: absolute;/*left:50%;*/top:37px; width:40px;height:2px; border:0; background:#fff; transition:opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0.3s, 0.3s, 0s}
.header.on .mhead_btn .bar{background:#000;}
.mhead_btn .bar:nth-child(1) {top:37px; transform:rotate(0) translatex(-50%)}
.mhead_btn .bar:nth-child(2) {top:48px; transform:translatex(-50%); opacity:1}
.mhead_btn .bar:nth-child(3) {top:59px; transform:rotate(0) translatex(-50%)} 

/*사이트맵 닫기버튼*/
.mhead_btn.close{ /*right:67px;*/ }
.mhead_btn.close .bar {background:#000;transition:background 1s, opacity 0.3s, top 0.3s, transform 0.5s; transition-delay:0s, 0s, 0s, 0.3s; }
.mhead_btn.close .bar:nth-child(1) { top:50px;background:#000; transform:translatex(-50%) rotate(-45deg);transform-origin:center}
.mhead_btn.close .bar:nth-child(2) {opacity:0}
.mhead_btn.close .bar:nth-child(3) { top:50px;background:#000; transform:translatex(-50%) rotate(45deg);transform-origin:center}


/*사이트맵pc기준*/
#sitemap{display:none;position:fixed; top:99px; right:0%; width:100%;height:calc(100%); background:#fff; padding:100px 20px; z-index:10;transition:all ease .5s; -webkit-transition:all ease .5s; -o-transition:all ease .5s; -moz-transition:all ease .5s; -ms-transition:all ease .5s; overflow: hidden; overflow-y:auto;opacity:0;}
#sitemap.open{/*right:0;*/opacity:1;display:block;}
#sitemap.close{opacity:0}
#sitemap > ul{max-width:1280px; overflow:hidden; margin:0 auto;}
#sitemap > ul > li{float:left; width:33.33%; padding:0 10px;}
#sitemap > ul > li h2{font-size:35px; color:#333;}
#sitemap > ul > li h2 a{position:relative;transition: all 2s}
#sitemap > ul > li h2 a:hover::after ,#sitemap > ul > li.mopen:hover h2 a:after{content:''; width:6px; height:6px; background:#f40000;border-radius:50%; position:absolute; right:-15px; top:0px;transition:all 0.2s }
}

#sitemap > ul > li h3{font-size:18px; color:#333; font-weight:500; margin:0 0 10px;}

/*2차메뉴*/
#sitemap > ul > li > ul > li{margin:10px 0;}
#sitemap > ul > li > ul > li>ul{height:auto}
#sitemap > ul > li > ul > li > h3 > a {
    display: block;
    padding: 12px 0;
}

/*3차메뉴*/
#sitemap > ul > li > ul > li >ul>li> a{display:block;color:#999; font-size:16px;  padding:7px 0; display:block;}
#sitemap > ul > li h3 > a:hover, #sitemap > ul > li > ul > li>ul>li> a:hover{color:#014099;}
#sitemap > ul > li > ul > li>ul{padding:0px 10px 10px 10px;}

@media all and (max-width:1023px){
    .header, .header:before, .header.on{height:80px;}
    .header .logo{top:3px;}
	.nav{display:none;} 

	.mhead_btn { width:80px; height:80px;}
	.mhead_btn .bar {position: absolute;top:25px;}
	.mhead_btn .bar:nth-child(1) {top:28px;}
	.mhead_btn .bar:nth-child(2) {top:39px;}
	.mhead_btn .bar:nth-child(3) {top:51px;} 

	.mhead_btn.close .bar {top:40px;}
	.mhead_btn.close .bar:nth-child(1) {top:40px;}
	.mhead_btn.close .bar:nth-child(3) {top:40px; }

    /*사이트맵 펼칠시 뒤의 배경*/
	#sitemap{  background:rgba(0,0,0,0.5);top:80px;}
    /*사이트맵 세로나열*/
	#sitemap > ul > li{width:100%; float:none;}

    /*1차메뉴제목*/
	#sitemap > ul > li h2{color:#014099;font-size:23px}
    #sitemap > ul > li>h2> a{display:block;margin:0 0 35px;}
	#sitemap > ul > li.mopen h2 a:after{display:none;}
	#sitemap > ul > li.mopen h2 a:hover, #sitemap > ul > li h2:hover{opacity:0.8}
    #sitemap > ul > li.mopen>h2> a{margin:0 0 10px;}
     /*2차메뉴*/
    #sitemap > ul > li > ul {margin-bottom:35px;padding-left:10px;} 
	#sitemap > ul > li > ul > li{ height:auto; overflow:hidden; margin:0; border-bottom: 1px solid #ddd;}
     /*3차메뉴열림*/
	#sitemap > ul > li > ul > li.mopen{height:auto;}
	#sitemap > ul > li h3{margin:0;}
	#sitemap > ul > li > ul > li > h3 > a{display:block; background: #fff;font-size:16px;padding:12px 0;}
    /*사이트맵bg*/
	#sitemap > ul{max-width:400px;padding:20px; background:#fff; position:absolute; right:0; top:0; width:100%;height:100vh} 
	.wr{width:100%; padding:0 20px;} 
}
@media all and (max-width:767px){
	.header .logo{width:140px; background-size:100%;top:5px}

}
@media all and (max-width:479px){
	.header .logo{width:120px; background-size:100%; left:20px;}
	
	.header, .header.on{height:70px;}
	.header .nav:after{display:none;}
	.header .nav > li > h2{color:#333;}  
    
    /*pc메뉴펼침 없앰*/
	.header:before{display:none;}
    /*사이트맵*/
    .mhead_btn{top:23px;right:15px;}
	.mhead_btn {width:60px; height:60px;top:0;}
	.mhead_btn .bar {position: absolute;left:50%;top:19px;}
	.mhead_btn .bar:nth-child(1) {top:19px;}
	.mhead_btn .bar:nth-child(2) {top:30px;}
	.mhead_btn .bar:nth-child(3) {top:41px;} 

	.mhead_btn.close .bar {top:25px; }
	.mhead_btn.close .bar:nth-child(1) {top:30px;}
	.mhead_btn.close .bar:nth-child(3) {top:30px;}

    #sitemap{top:70px; height: calc(100% - 70px);}
    #sitemap > ul > li{padding:0;}
    /*1차메뉴*/
	#sitemap > ul > li h2{font-size:20px;}
    /*2차메뉴*/
	#sitemap > ul > li h3{font-size:17px;}
     /*3차메뉴*/
	#sitemap > ul > li > ul > li > a{font-size:15px;}
}

/*lnb*/
/*.lnb_wrap{height:70px;border-bottom:1px solid #ddd}
.lnb_wrap .lnb_a{display:flex;justify-content: flex-start;width:100%;margin:0 auto;max-width:1500px;}
.lnb_wrap .lnb_a #navi{display:flex;justify-content: space-between;width:100%;}
.lnb_wrap .lnb_a #navi>li{width:50%;height:70px;text-align: left;text-indent:15px;line-height: 70px;letter-spacing: -1px;position:relative;}
.lnb_wrap .lnb_a #navi>li>a{border-left:1px solid #ddd;display:block;height:70px;width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#000;text-align:center;font-size:17.5px;}
.lnb_wrap .lnb_a #navi>li>a>p{padding-right:30px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#000}
.lnb_wrap .lnb_a #navi>li>ul{position:absolute;left:-1px; top:70px; z-index:90; width:100%;padding-top:10px;padding-bottom:10px;display:block;background-color:#fff;border:1px solid #ddd;box-sizing: content-box;display:none;}
.lnb_wrap .lnb_a #navi>li>ul>li{line-height:2.2em;font-weight:200;text-align:left;font-size:14px;}
.lnb_wrap .lnb_a #navi>li>ul>li>a{color:#131313;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;height:100%;}
.lnb_wrap .lnb_a #navi>li>ul>li>a:hover{color:#055ea2;text-decoration:underline;}

@media all and (min-width:768px){
    .lnb_wrap .lnb_a #navi{display:flex;justify-content: flex-start;}
    .lnb_wrap .lnb_a #navi>li{width:260px;}
    .lnb_wrap .lnb_a #navi>li>a{display:block;height:60px;font-size:16px;}
	.lnb_wrap .lnb_a #navi>li>ul>li{font-size:15px;}
    
     
}
@media all and (min-width:1024px){
    .lnb_wrap{margin:0 auto;padding-left:30px;padding-right:30px;}
	.lnb_wrap .lnb_a #navi>li{width:280px;}
	.lnb_wrap .lnb_a #navi>li>a{width:100%;}
	.lnb_wrap .lnb_a #navi>li>ul>li{font-size:16px;}
   
}
*/


/*탭*/
.tab_st1_wrap{width:100%;text-align: center;border-bottom:1px solid #ddd;width:100%}
.tab_st1{display:flex;justify-content: center;max-width:1440px;margin:0 auto;flex-wrap:wrap;}
/*.tab_st1 li a{padding:20px 90px;display:block;line-height:1.6em;font-size:17.5px;letter-spacing: -0.01em;color:#000;}*/
.tab_st1 li{width:25%;}
.tab_st1 li a{height:70px;line-height:70px;display:inline-block;width:100%;font-size:17px;letter-spacing: -0.01em;color:#000;position:relative;}

.tab_st1 li.on a{background-color:#014099;color:#fff;}

@media all and (max-width:1023px){
    .tab_st1 li{width:50%;border:1px solid #ddd;}
	.tab_st1 li.on{border:none;}
    .tab_st1 li a{font-size:14.5px;height:50px;line-height:50px;}
}


/*FOOTER*/
footer{background-color:#222;}
.footer_in{max-width:1600px;padding:42px 30px 30px 40px;display:flex;margin:0 auto;}
.flogo{margin-right:100px;background-image:url(../img/common/h_logo_w.png);background-repeat: no-repeat;font-size:0;height:60px;width:200px;}
.footer_in ul li{display: inline-block;font-size:13.5px;font-weight:300;padding:10px 15px;position:relative;color:#fff;}
.footer_in ul li:last-child{display:block;}
.footer_in ul li:after{content: "";display: block;background-color:#fff;width:1px;height:15px;position:absolute;top:12px;right:0;}
.footer_in ul li:last-child:after, .footer_in ul li:nth-child(3):after{display: none}

@media all and (max-width:1023px) {
    .footer_in{padding:30px;}
    .flogo{display: none;}
    .footer_in ul li{padding:5px 15px;font-size:13.5px;}
	.footer_in ul li:last-child{display:inline-block;}
    .footer_in ul li:after{top:7px;height:11.5px}
}
/*top버튼*/
.quick-menu{opacity:0;position:fixed; right:15px; bottom:100px; z-index:100;visibility:hidden;transition:all ease .6s;transition:opacity 0.6s,color 0.6s,background 0.6s;}
.quick-menu.on{opacity:1;visibility:visible;}
.quick-menu.on a{display:block;width:62px;height:62px;line-height: 62px;border-radius:50%;font-size:11.5px;font-weight:600;letter-spacing:-0.5px;text-align:center;color:#111;position:absolute;z-index:400;right:33px;box-shadow:2px 2px 12px rgba(159, 158, 158,0.3)}
.quick-menu.on .go-to-bbs{bottom:20px;background-color:#f40000;background-image:url(../img/main/go-to-bbs.png);background-repeat:no-repeat;background-position:center;font-size:0;}
.quick-menu.on .back-to-top{bottom:-50px;background-color:rgba(0, 0, 0,0.9);color:#fff;}

@media all and (max-width:600px) {
	.back-to-top {right:0px; bottom:0;}
    .quick-menu{right:0px;}
    .quick-menu.on a{right:15px;}
}

/*서브페이지 sub_visual*/
.sub_top{position:relative;box-sizing:border-box;}
#sub_visual{position:relative;overflow:hidden;width:100%;height:330px; animation-duration: 3s;}

#sub_visual h2{max-width:1360px;padding-left:30px;padding-right:30px;margin:0 auto;letter-spacing:-1px; color:#fff;font-size:20px;font-weight:500;text-align:center;margin-bottom:5px;}
#sub_visual p{max-width:1360px;margin:0 auto;color:#fff;font-size:14px;font-weight:400;text-align: center;padding-left:30px;padding-right:30px;}

#sub_visual .visual-img-con{position:absolute; top:0px;left:0px;width:100%;height:100%;background-size:cover !important;background-color:#000;background-repeat:no-repeat;background-size:50%;background-image:url(../img/svisual/svisual_service.jpg);background-position:center center;
-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1);-webkit-transition:transform 5000ms  ease-in-out ;transition:transform 5000ms ease-in-out ;
animation-duration: 3s;animation-fill-mode: both;animation-iteration-count: 1;animation-timing-function: ease;-webkit-animation-duration: 3s;-webkit-animation-fill-mode: both;-webkit-animation-iteration-count: 1;-webkit-animation-timing-function: ease;animation-delay: 0.4s; -webkit-animation-delay: 0.4s;animation-name:zoom;-webkit-animation-name:zoom}

@keyframes zoom {
	0% {transform:scale(1.1);}
	100% {transform:scale(1);}
}
@-webkit-keyframes zoom {
	0% {transform:scale(1.1);}
	100% {transform:scale(1);}
}

#sub_visual .visual-img-con.company{background-image:url(../img/svisual/svisual_company1.jpg);}


#sub_visual .visual-txt-con{position:relative; z-index:1; text-align:center; display:table; width:100%; height:100%; letter-spacing:-0.5px; color:#fff;}

.table-cell-layout {display: table-cell;width: 100%;height: 100%;vertical-align: middle;padding-top:60px;}
#sub_visual .visual-txt-container{position:relative; width:100%; }
#sub_visual .visual-txt-container .visual-txt{font-weight:500; font-size:44px; letter-spacing:-0px; color:#fff; line-height:1.8;opacity:0;filter:Alpha(opacity=0);-webkit-transform: translateY(-30px);transform: translateY(-30px);-webkit-transition:opacity 1.0s, transform 1.0s;transition:opacity 1.0s, transform 1.0s;}
#sub_visual .visual-txt-container p{font-size:15px}

@media all and (min-width:768px){
    #sub_visual .visual-txt-container .visual-txt{font-size:55px}
	#sub_visual h2{font-size:24px;}
    #sub_visual .visual-txt-container p{font-size:17px;}
	#sub_visual .visual-txt-container .visual-txt{font-size:50px}
}
@media all and (min-width:1024px){
   #sub_visual{height:500px;}
   #sub_visual .visual-txt-container .visual-txt{font-size:78px;letter-spacing: 1.5px}
   #sub_visual .visual-txt-container p{font-size:17px;}
}
@media all and (max-width:479px){
    #sub_visual{height:290px;}
}
/* 상단효과 active */
#sub_visual.active .visual-img-con{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}
#sub_visual.active .visual-txt{
	opacity:1.0;filter:Alpha(opacity=100);
    -webkit-transform: translateY(0px); 
     transform: translateY(0px);
}