@charset "utf-8";

.layout{position:relative;width:100%;max-width:1240px;margin:0 auto;}
.layout:after {display:block;visibility:hidden;clear:both;content:"";}

.top_link {overflow: hidden;position:relative;height: 48px;background: #004b27;background-size:cover;}
.top_link:before {display:block;position:absolute;top: 0;right: 0;left:50%;width: auto;height:100%;margin-left: 510px;background: #00381d;content:'';}
.top_link .top_list1 {float:left;}
.top_link .top_list1:after {display:block;visibility:hidden;clear:both;content:"";}
.top_link .top_list1 li {display:inline-block;position: relative;overflow:hidden;float:left;}
.top_link .top_list1 li:after {display: block;position:absolute;right:0;top: 50%;content:'';width:1px;height:12px;margin-top: -4px;background:rgba(255,255,255,.3);}
.top_link .top_list1 li:last-child:after {display:none;}
.top_link .top_list1 li a {display:block;width:100%;height:100%;line-height: 46px;padding: 0 20px;text-align:center;color:#fff;font-size: 14px;vertical-align: top;}
.top_link .top_list1 li:first-child a {padding-left:0;}
.top_link .top_list1 li a.ov {background:#fff; color:#242424; }
.top_link .top_list1 li a:hover,
.top_link .top_list1 li a:focus{font-weight:700;}
.top_link .top_list2 {float:right;}
.top_link .top_list2:after {display:block;visibility:hidden;clear:both;content:"";}
.top_link .top_list2 li {float:left;height: 100%;}
.top_link .top_list2 li a {display:block;width:100%;color:#fff;font-size:14px;line-height: 46px;}
.top_link .top_list2 li a:hover,
.top_link .top_list2 li a:focus {font-weight:700;}
.top_link .top_list2 li a span {display:inline-block;width:27px; height:27px; margin-right:5px;background:url(/clean/img/common/home.png)no-repeat;vertical-align:middle;}


#top_layout{display:block;position: relative;width:100%;height: 90px;text-align:center;z-index: 12;}
#top_layout.on {z-index:9999;}
#top_layout .top_wrap {position:relative;width:100%;max-width:1240px;margin:0 auto;}
#top_layout .top_wrap .logo_wrap {position:absolute;z-index: 3;left: 0;top: 32.5px;}
#top_layout .top_wrap .logo_wrap a {display:block;width: 395px;height: 30px;}
#top_layout .top_wrap .logo_wrap a span {display:block; width:100%; height:100%;background:url(/clean/img/common/logo_sub.png)no-repeat; font-size:0;}
#top_layout .top_wrap .utile_wrap {position:absolute;right:0;top:0;z-index: 3;height: 90px;}
#top_layout .top_wrap .utile_wrap li.pc {width:30px;height: 100%;}
#top_layout .top_wrap .utile_wrap li.pc a {display:block;width:100%;height:100%;background: url(/clean/img/common/menu.jpg)no-repeat center;font-size:0;}
#top_layout .top_wrap .utile_wrap li.mo {display:none;}
#top_layout .top_wrap .utile_wrap li.mo button {}




#top_layout.on + .gnb_bg {display: block;}
#top_layout + .gnb_bg{display: none;position: fixed;top:90px;left: 0;z-index: 9998;width: 100%;height: 100%;background: #000;opacity: 0.5;content:'';transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;}

#gnb_layout{display: block !important;overflow:hidden;position:absolute;top: 0;left: 0;width: 100%;height: 90px;min-height: 90px;transition:all 0.3s ease-out;-webkit-transition:all 0.3s ease-out;-o-transition:all 0.3s ease-out;-moz-transition:all 0.3s ease-out;}
#gnb_layout:after{top:90px}
#gnb_layout.open{}
#gnb_layout.open:after{position: absolute;top: 0;bottom: 0;right:0;width: 100%;height:auto;border-top:1px solid #ddd;background: #fff;content:"";}
#gnb_layout.open:before{display:block;position:absolute;top: 0;right: 50%;z-index: 1;width:100%;height:100%;margin-right: 350px;background: #fff;content:'';}
#gnb {position: absolute;top:0px;left: 0;width: 100%;height:90px;min-height: 90px;border-bottom: 1px solid #ddd;z-index:2;background: #fff;}
#gnb_layout.action{position:relative;background-color:#fff;}
#gnb_layout .layout{position:relative;max-width: 1240px;height: 100%;padding: 0 30px 0 366px;}
#gnb_layout .depth1_ul{display:inline-block;float: none;height:100%;z-index:14;}
#gnb_layout .depth1_ul:after {display: block; content: ''; clear: both;}
#gnb_layout .depth1_ul>li{display:inline-block;float:left;height:100%;margin: 0;vertical-align:top;}
#gnb_layout .depth1_ul>li>a{position:relative;display:block;height:100%;padding: 0 20px;font-size: 18px;color: #2a2a2a;letter-spacing:0;transition: all .3s;text-align:center;font-weight: 700;}
#gnb_layout .depth1_ul>li>a:before {display: none;position:absolute;left: -2px;top: 50%;content:'';width: 4px;height: 4px;margin-top: -2px;background: #d5d5d5;}
#gnb_layout .depth1_ul>li:first-child>a:before {display:none;}
#gnb_layout .depth1_ul>li>a:after {display:block;position:absolute; left:50%; bottom:0;width:0; height:5px;content:'';transition: all 0.3s ease;-webkit-transition: all 0.3s ease;}
#gnb_layout .depth1_ul>li>a.current:after {left:0; width:100%; background:#2f4869; }
#gnb_layout .depth1_ul>li>a.current + .item{opacity: 1;display: block}
#gnb_layout .depth1_ul>li>a span{display: inline-block;position: relative;height: 100%;line-height: 90px;vertical-align: middle;}
#gnb_layout .depth1_ul>li>a.current span:before {display:block;position:absolute;left:50%;bottom:8px;margin-left: -6px;border-right: 6px solid transparent;border-left: 6px solid transparent;border-bottom: 6px solid #2f4869;content:'';}
#gnb_layout .depth1_ul > li .item{display: none;position:absolute;top: 90px;left: 0;z-index: 100;width: 100%;min-height: 260px;margin: 35px 0 50px;padding-left: 270px;text-align: left;}
#gnb_layout .depth1_ul > li .item .gnb-title {position:absolute;top:0;left: 0;height:100%;width: 270px;padding: 0;text-align: left;}
#gnb_layout .depth1_ul > li .item .gnb-title:after {display: block;position: absolute;right: 0;bottom: 0;content:"";width:153px;height:216px;background: url(/clean/img/common/gnb_bg.png)no-repeat 95% 100%;}
#gnb_layout .depth1_ul> .n3 .item .gnb-title:after{background-position: 0 0}
#gnb_layout .depth1_ul> .n6 .item .gnb-title:after{background-position: -153px 0;}
#gnb_layout .depth1_ul> .n2 .item .gnb-title:after{background-position: -306px 0;}
#gnb_layout .depth1_ul> .n5 .item .gnb-title:after{background-position: -459px 0;}
#gnb_layout .depth1_ul> .n4 .item .gnb-title:after{background-position: -612px 0;}
#gnb_layout .depth1_ul> .n1 .item .gnb-title:after{background-position: -765px 0;}

#gnb_layout .depth1_ul > li .item .gnb-title strong{display:block;position:relative; margin:0 0 30px; font-size:25px; font-weight:700; color:#333;}
#gnb_layout .depth1_ul > li .item .gnb-title strong:after {display:block;position:absolute;left:0;bottom:-14px;width:30px; height:2px; background:#333; content:'';}
#gnb_layout .depth1_ul > li .item .gnb-title p{display:block;width:100%;padding:0; margin:0; font-size:14px;color: #666666;line-height:1.5;}

#gnb_layout .depth1_ul > li .item .gnb-depth {position:relative;height:100%;min-height: 243px;margin: 0 0 0 18px;}
#gnb_layout .depth1_ul > li .item .depth2_ul{float:left;position: relative;top: 0;height: 100%;min-height: 243px;width: 100%;text-align:  left;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li{display: block;float: left;position:relative;width: 25%;padding: 0 0 0 25px;margin: 0 0 20px;text-align: left;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a{display:block;position: relative;min-height: 45px;margin: 0 0 10px;border: 1px solid #ddd;color: #555555;font-size: 15px;line-height: 1.3;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on {border:1px solid #2f4869; color:#2f4869;font-weight:700;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:after {display:block;position:absolute;top: 50%;right: 15px;width: 6px;height: 6px; margin-top:-5px; border: solid #7f7f7f;border-width:0 1px 1px 0;content:'';transform: rotate(45deg);-webkit-transform: rotate(45deg);}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a > span {display:block; padding: 12px 24px 12px 15px; border:2px solid transparent;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on > span {border:2px solid #2f4869; }
#gnb_layout .depth3_ul {display: block;}
#gnb_layout .depth3_ul > li {position:relative;padding: 0 20px 0 25px;}
#gnb_layout .depth3_ul > li a {display:block;width:100%;margin: 5px 0;font-size: 14px;color: #353535;}
#gnb_layout .depth3_ul > li a:after{display:block;position:absolute;top:11px;left: 15px;width:3px;height:3px;background: #afafb0;content:'';}
#gnb_layout .depth3_ul > li a > span {display:inline-block;position:relative;}
#gnb_layout .depth3_ul > li a:hover,
#gnb_layout .depth3_ul > li a:focus {color:#2f4869;}
#gnb_layout .depth3_ul > li a:hover span:before,
#gnb_layout .depth3_ul > li a:focus span:before {display:inline-block; position:absolute; left:0; bottom:0; width:100%; height:1px;background:#2f4869; content:''; }
#gnb_layout .depth3_ul > li a:hover:after,
#gnb_layout .depth3_ul > li a:focus:after {background:#2f4869;}

/*.modal-open #body_layout {position: relative;z-index: -1;}
.modal-open #top_layout .top_wrap #logo{z-index:-1;display: none;}
.modal-open .mo_depth1 {z-index:-1;display:none;}*/

/* target="_blank" 아이콘 추가 */
#gnb_layout .depth1_ul>li>a[target="_blank"] span:after {display:inline-block;width:14px;height:14px;margin:-2px 0 0 5px;background:url(/template/A/images/link_icon.png) no-repeat;border: 0;transform: none;content:'';vertical-align:middle;}
#gnb_layout .depth1_ul > li .depth2_ul > li > a[target="_blank"] span:after {display:none;}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a[target="_blank"]:hover:after,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a[target="_blank"]:focus:after,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a[target="_blank"]:after,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a.on[target="_blank"]:after {left:auto;top: 50%;right:13px;width:14px;height:14px;margin-top: -7px;border: none;background:#fff url(/template/A/images/link_icon.png)no-repeat;transform: rotate(0);-webkit-transform: rotate(0);}
#gnb_layout .depth3_ul > li > a[target="_blank"] span:after {display:inline-block; width:14px; height:14px;margin-left:5px; background:url(/template/A/images/link_icon.png)no-repeat; content:'';}
#gnb_layout .depth3_ul > li a[target="_blank"]:hover span:after,
#gnb_layout .depth3_ul > li a[target="_blank"]:focus span:after {position: static;}

@media screen and (max-width:1279px){
    .layout {max-width:100%;padding: 0 20px;}
    .top_link:before {left:auto;right: 0;width: 110px;margin:0;}

    #top_layout {height:75px}
    #top_layout .top_wrap {max-width:100%; padding:0 20px;}
    #top_layout .top_wrap .logo_wrap {left:20px;top: 25.5px;}
    #top_layout .top_wrap .logo_wrap a {display:block;width: 299px;height:35px;}
    #top_layout .top_wrap .logo_wrap a span {background-size: 100%;}
    #top_layout .top_wrap .utile_wrap {right: 20px;height: 75px;}

    #gnb_layout{display: none !important;}
    #top_layout {border-bottom:1px solid #ddd;}
    #top_layout .top_wrap .utile_wrap li.pc {display:none;}  
    #top_layout .top_wrap .utile_wrap li.mo {display: block;width:30px;height: 75px;}
    #top_layout .top_wrap .utile_wrap li.mo button {display:block;width:100%;height:100%;background: url(/clean/img/common/menu.jpg)no-repeat center;font-size:0;}

    #top_layout.on + .gnb_bg {display:none;}

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

@media screen and (max-width: 767px){
    .layout {max-width:100%;padding: 0 15px;}

    #top_layout .top_wrap .utile_wrap {right:15px;}
    #top_layout .top_wrap .logo_wrap {left:15px;}
}

@media screen and (max-width:580px){
    .top_link .top_list1 { display: none;}
    #top_layout .top_wrap .logo_wrap {top: 31px;}
    #top_layout .top_wrap .logo_wrap a {display:block;width: 230px;height: 27px;}
}


/* mobile menu */

#mobile-menu {overflow: visible;z-index: 999;}
#mobile-menu .modal-dialog {position: relative;top:0;right:0;z-index: 99999;float:right;width: 300px;height: 100%;margin: 0;border-radius: 0;-webkit-transform: translate(25%,0);transform: translate(25%,0);}
#mobile-menu.in .modal-dialog,
#mobile-menu.show .modal-dialog {-webkit-transform:translate(0,0);transform: translate(0,0);}
#mobile-menu .modal-dialog .mo_top_untill {}
#mobile-menu .modal-dialog .mo_top_untill ul {padding:10px 0;background:#fff;}
#mobile-menu .modal-dialog .mo_top_untill ul:after {display:block; clear:both; visibility:hidden; content:'';}
#mobile-menu .modal-dialog .mo_top_untill ul li {display:inline-block; float:left; position:relative; width:33.33%;}
#mobile-menu .modal-dialog .mo_top_untill ul li:after {display:block; position:absolute; top:3px; bottom:3px; content:''; width:1px; height:auto; background:#d3d3d3;}
#mobile-menu .modal-dialog .mo_top_untill ul li:first-child:after {display:none;}
#mobile-menu .modal-dialog .mo_top_untill ul li a {display:block; font-size:13px; color:#232323;}
#mobile-menu .modal-dialog .modal-content {position: relative;width:100%;height:100%;/* padding:95px 0 0; */border-radius: 0;}
#mobile-menu .modal-dialog .modal-content .modal-body {position: static;height:100%;padding: 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul {overflow-y: scroll;overflow-x: hidden;position: absolute;top: 0;width: 100%;height: calc(100% - 40px);background: #454a50;text-align:left;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li {position:relative;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a {display:block;/* min-height: 55px; */padding: 13px 45px 13px 25px;border-bottom: 1px solid rgba(255,255,255,.2);background: #454a50;color:#fff;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a:after {display:block;position:absolute;right: 20px;top: 19px;width: 12px;height: 12px;border-width:1px;border-style: solid;border-color: #fff;border-width: 1px 1px 0 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);content:'';}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a.ov {background: #2f4869;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a.ov:after {border-width:0 1px 1px 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a span {display:block;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > .item .gnb-title {display: none;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul {}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li {}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a {display:block;position:relative;/* min-height: 55px; */padding: 13px 45px 13px 25px;border-bottom:1px solid #cbcbcb;background:#fff;color:#222;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a:before,
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a:after {content: '';position: absolute;top: 0;bottom: 0;margin: auto;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a:before {right:20px; width: 20px;height: 1px;background: #b2b2b2;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a:after {right:29px; width: 1px;height: 20px;background: #b2b2b2;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.ov:after {display:none;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a.ov {color: #2f4869;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a span {display:block;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul {display:none;padding: 10px 0;background: #eceeef;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li {position:relative;margin: 8px 0;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li:after {display:block;position:absolute;left: 35px;top:12px;width:3px;height:3px;border-radius: 50%;background: #9e9f9f;content:'';}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a {display:block;padding-left: 45px;}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a span {display:block;font-size:15px;color: #000;}
#mobile-menu .mobile-close {display: none;position:absolute;top: 0;left:-53px;}
#mobile-menu .mobile-close span {display:block; position:relative; width:53px; height:53px; font-size:0;}
#mobile-menu .mobile-close span:before,
#mobile-menu .mobile-close span:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; transform:rotate(45deg);-webkit-transform:rotate(45deg);}
#mobile-menu .mobile-close span:before {width: calc(100%/2);height: 1px;background: #fff;}
#mobile-menu .mobile-close span:after {width: 1px;height: calc(100%/2);background: #fff;}
.modal-backdrop.in{opacity: .8;z-index: 9;}