@charset "UTF-8";

/* pc에만 적용되는 옵션 */
@media all and (min-width:801px) {
    .pc_hidden {display: none!important;}
}
/* 모바일에만 적용되는 옵션 */
@media all and (max-width:800px) {
    .mobile_hidden {display: none!important;}
}


/* 전체 공통 옵션 */

.nanumsquare {font-family: "NanumSquare", "Noto Sans KR", "돋움", sans-serif!important;}
.notoKR {font-family: "Noto Sans KR", "돋움", sans-serif;}
#wrap {position: relative; padding-top: 110px;}


/* 헤더 - PC기준 */

#header {width: 100%; height: 110px; position: fixed; background-color: #ffffff; z-index: 9999; overflow: hidden;transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease;}
.header_container {width: 100%; height: 110px; position: relative; border-bottom: 1px solid #eeeeee;}
.header_wrap {width: 1200px;height: 110px;position: relative;margin: 0 auto;}
.header_wrap:after {content: ""; display: block; clear: both;}
.header_logo {width: 200px;height: 100%;float: left;padding: 15px 0 0 44px;}
.main_nav_wrap {width: 1000px;height: 110px;float: left;padding-left: 113px;}

.main_nav {display: block; width: 100%; height: 110px;}
.main_nav>li {display: block; height: 100%; float: left; position: relative;}
.main_nav>li>a {display: block;width: auto;height: 100%;font-size: 17px;padding: 49px 52px 0;position: relative; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease;}
.main_nav>li>a:hover {color: #333333;}
.main_nav li span.line {display: block;width: 0;height: 5px;background: #34c2b9;left: 25%;bottom: -2px;z-index: 10000;position: absolute;transition: all 0.2s ease;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-o-transition: all 0.2s ease;}
.main_nav>li:hover span.line {width: 50%;}

.main_nav .sub_nav {display: block;width: 100%;height: 278px;background-color: #ffffff;text-align: center;position: absolute;top: 110px;left: 0;padding: 20px 0; transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease;}
.main_nav li:hover .sub_nav {background: #f9f9f9;}
.main_nav .sub_nav li {display: block; width: 100%; height: auto;}
.main_nav .sub_nav li a {display: block;width: 100%;height: auto;font-size: 15px;padding: 6px 25px;}
.main_nav .sub_nav li a:hover {color: #34c2b9; font-weight: 600;}

#header.on {height: 388px; border-bottom: 1px solid #eeeeee;}

/* header 모바일 설정 & all nav */

@media all and (max-width:800px) {
    #header {width: 100%; height: 80px; position: relative; overflow: visible;}
    .header_container {width: 100%; height: 100%; position: relative;}
    .header_wrap {width: 100%; height: 100%; position: relative;}
    .header_logo {width: 30%; height: 100%; padding: 11px 0 0 20px;}
    .header_logo a img {height: 55px;}
    
    
    .all_nav {position: fixed;width: 100%;height: 100%; display: none; z-index: 19999;}
    .all_nav.on {display: block;}
    .all_nav .dimBg {width: 100%;height: 100%;background: #000000; display: none; opacity: 0.3;}
    .all_nav .dimBg.on {opacity: 0.3;}
    .all_nav:after {content: ""; display: block; clear: both;}
    .all_nav_trg {display: block; width: 40px; height: 40px; border: 1px solid #999999; position: absolute; right: 20px; top: 20px; cursor: pointer; }
    
    .all_nav_trg span.one {display: block;width: 22px;height: 2px;background: #333333;position: absolute;top: 12px;left: 8px;}
    .all_nav_trg span.two {display: block;width: 22px;height: 2px;background: #333333;position: absolute;top: 19px;left: 8px;}
    .all_nav_trg span.three {display: block;width: 22px;height: 2px;background: #333333;position: absolute;top: 26px;left: 8px;}
    
    .all_nav_wrap {display: block;position: absolute;z-index: 20000;background: #ffffff;width: 300px;height: 100vh;top: 0;right: -500px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
    .all_nav_wrap.on { right: 0;}
    .all_main_nav {display: block;width: 100%;height: calc(100vh - 100px);overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */}
    .all_main_nav::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera */}
    .all_main_nav li {display: block; width: 100%; height: auto;}
    .all_main_nav li a {display: block;width: 100%;height: auto;padding: 13px 20px;font-size: 16px;border-bottom: 1px solid #eeeeee;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
    .all_main_nav li.subOn>a {/* border-bottom: 2px solid #03347b; */background: #03347b;color: #ffffff;}
    .all_sub_nav {width: 100%; height: auto; background: #f4f4f4; display: block; overflow: hidden; display: none;}
    .all_sub_nav li {display: block; width: 100%; height: auto;}
    .all_sub_nav li a {display: block;width: 100%;height: auto;font-size: 14px;padding: 7px 20px;border-bottom: 1px solid #dddddd;}
    
    .all_logoBox {width: 100%; height: auto; border-bottom: 1px solid #dddddd; padding: 10px; }
    .all_logoBox:after {content: ""; display: block; clear: both;}
    .all_logoBox .logo {float: left;}
    .all_logoBox .logo img {width: 89px;}
    .all_nav_close {width: 40px;height: 40px;float: right; cursor: pointer;position: relative;margin-top: 5px;}
    .all_nav_close span.one {width: 35px;height: 2px;transform: rotate(45deg);background: #555555;position: absolute;top: 18px;left: 2px;display: block;}
    .all_nav_close span.two {width: 35px;height: 2px;transform: rotate(-45deg);background: #555555;position: absolute;top: 18px;left: 2px;display: block;}
    
    
    #wrap {padding-top: 0;position: relative;z-index: 1;}
}

/* footer */

footer#footer {width: 100%;height: auto;padding: 50px 0;background: #29303b;}
.footer_wrap {width: 1200px; height: auto; margin: 0 auto;}
.footer_wrap:after {content: ""; display: block; clear: both;}
.footer_logoBox {width: 220px; height: auto; float: left;}
.footer_cont {width: 980px; height: auto; float: left; color: #94989d;}
.footer_cont .link span a{color: #ffffff; font-size: 15px; padding: 0 20px; font-weight: 300; position: relative;}
.footer_cont .link span:nth-child(1) a {padding-left: 0;}
.footer_cont .link span:nth-child(1) a:after {display: none;}
.footer_cont .link span:nth-child(2) a {font-weight: 500;}
.footer_cont .link {margin-bottom: 17px;}
.footer_cont .link span a:after {content: "";display: block;width: 1px;height: 15px;position: absolute;top: 4px;left: -1px;background: rgba(255,255,255,0.5);}
.footer_cont address span {padding: 0 10px;font-size: 15px;line-height: 26px;}
.footer_cont address span:nth-child(1), .footer_cont address span:nth-child(6), .footer_cont address span:nth-child(8) {padding-left: 0;}
.footer_cont address {margin-bottom: 17px;}
.footer_cont .copyright p {color: #94989d; font-size: 15px;}

.customer_slide {width: 100%; height: auto; padding: 30px 0; background: #f0f0f0;}
.customer_slide .sc_wrap {width: 1300px; height: auto; margin: 0 auto; overflow: hidden; padding: 0 50px;}


/* pc/pad min-width 설정*/

@media all and (min-width:801px) {
    footer#footer {min-width: 1200px;}
}


/* footer 모바일 설정 */

@media all and (max-width:800px) {
    footer#footer {width: 100%; padding: 30px 20px;}
    .footer_wrap {width: 100%;}
    .footer_logoBox {width: 100%; float: none; text-align: center; margin-bottom: 20px;}
    .footer_logoBox a {margin: 0 auto;}
    .footer_logobox a img {width: 110px;}
    .footer_cont {width: 100%; float: none; text-align: center;}
    .footer_cont:after {content: ""; display: block; clear: both;}
    .footer_cont .link {margin-bottom: 20px;}
    .footer_cont .link:after {content: ""; display: block; clear: both;}
    .footer_cont .link span a {padding: 10px; font-size: 15px; display: block; width: calc(50% - 5px); margin: 0 auto; border: 1px solid #dddddd; float: left;}
    .footer_cont .link span.mr a {margin-right: 10px;}
    .footer_cont .link span a:after {display: none;}
    .footer_cont address span {font-size: 13px;}
    .footer_cont .copyright p {font-size: 14px;}
}


/* footer 사이트맵 팝업 */

/* 팝업 작동 */
.pop-layer .pop-container, .pop-layer2 .pop-container2, .pop-layer3 .pop-container3, .pop-layer4 .pop-container4 {  padding: 20px 25px; width: auto; height: auto; max-height: 700px;}
.pop-conts, .pop-conts2, .pop-conts3, .pop-conts4 {width: auto; height: auto; max-height: 660px; overflow: auto;}

.pop-layer .btn-r, .pop-layer2 .btn-r2, .pop-layer3 .btn-r3, .pop-layer4 .btn-r4 {position: absolute; width: 50px; height: 49px; top: -60px; right: -60px;}

.pop-layer, .pop-layer2, .pop-layer3, .pop-layer4 {  display: none; position: absolute; top: 50%; left: 50%; width: auto; height: auto; background-color: #fff; border: 1px solid #333333; z-index: 10;  }

.dim-layer, .dim-layer2, .dim-layer3, .dim-layer4 {  display: none; position: fixed; _position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;  }

.dim-layer .dimBg, .dim-layer2 .dimBg2, .dim-layer3 .dimBg3, .dim-layer4 .dimBg4 {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50);  }

.dim-layer .pop-layer, .dim-layer2 .pop-layer2, .dim-layer3 .pop-layer3, .dim-layer4 .pop-layer4 {  display: block;  }

/* 팝업 내용 */

a.btn-layerClose {display: block; width: 100%; height: 100%; background: url(../img/btn_close.png)no-repeat center center; }

.siteMap {width: auto; height: auto; position: relative;}
.siteMap .line {width: 100%;height: auto;padding: 10px;border-bottom: 1px solid #dddddd;}
.siteMap .line>a {display: block;padding: 10px 0;color: #03347b;float: left;font-size: 20px;font-weight: 800;margin-right: 0;min-width: 180px;font-family: "NanumSquare", "Noto Sans KR", sans-serif;}
.siteMap .line>a:hover {color: #34c2b9;}
.siteMap .line .subMenu {display: inline-block; padding-right: 20px;}
.siteMap .line .subMenu li {display: block;float: left;padding: 10px 16px;}
.siteMap .line .subMenu li a {font-size: 17px;}
.siteMap .line .subMenu li a:hover {text-decoration: underline;}