@charset "utf-8";

/*필요시 해당사이트별로 갖다쓸것*/
/*Montserrat*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
/*{font-family: 'Montserrat', sans-serif;}*/

/*Titlllium Web*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');
/*{font-family: 'Titillium Web', sans-serif;}*/

/*헤더************************************************************/
/*구조*/
header{position:fixed;top:0;left:0;z-index:1;width:100%;}
header .gnb{display:flex;justify-content:flex-end;align-items:center;max-width:1700px;margin: 0 auto;height:48px;}
header .head_container{border-top:1px solid rgba(255,255,255,0.2);border-bottom:1px solid rgba(255,255,255,0.2);}
header .head_wrap{display:flex;justify-content:flex-end;align-items:center;max-width:1700px;margin: 0 auto;position:relative;}

/*UNB*/
header .gnb .wrap{display:flex;align-items:center;}
header .gnb .wrap ._fnctWrap{width:auto;}
#_globalUl{display:flex;}
#_globalUl > li{display:flex;justify-content:space-between;align-items:center;position:relative;}
#_globalUl > li::after{content:"";display:inline-block;width:1px;height:10px;background:rgba(255,255,255,0.8);}
#_globalUl > li > a,
#_globalUl > li > button{font-size:13px;color:#FFF;padding:0 20px;}
.gnbAdd{display:flex;align-items:center;}
.gnbAdd a{display:block;font-size:13px;color:#FFF;padding-left:10px;}
.gnbAdd a:first-child{padding:0 20px;}

/*바로가기*/
.departList{height:100%;position:relative;}
.departList .openList{height:100%;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#FFF;width:450px;background:rgba(0,0,0,0.3);padding:0 20px;}
.departList .openList::after{content:"";display:block;width:0;height:0;border-top:7px solid #FFF;border-bottom:0;border-right:7px solid transparent;border-left:7px solid  transparent;}
.departList .openList.active{background:rgba(8,55,110,0.9);color:#FFF !important;}
.departList .openList.active::after{transform:rotate(180deg);}
.departList ul.gup_1{display:none;position:absolute;top:48px;right:0;width:100%;min-height:265px;background:rgba(8,55,110,0.9);padding:20px;z-index:1;}
.departList ul.gup_1 > li{padding:3px 0;}
.departList ul.gup_1 > li > a{display:inline-block;color:#FFF;font-size:14px;border-bottom:1px solid transparent;padding:3px 0;}
.departList .gup_2{display:none;position:absolute;top:0;right:0;width:50%;height:100%;background:rgba(77,112,153,0.9);}
.departList .gup_2 ul{padding:20px;}
.departList .gup_2 li{padding:3px 0;}
.departList .gup_2 a{display:inline-block;color:#FFF;font-size:14px;border-bottom:1px solid transparent;padding:3px 0;position:relative;}
.departList .gup_2 a::before{content:"";display:block;width:0;height:0;border-top:10px solid transparent;border-bottom:0;border-right:5px solid transparent;border-left:5px solid  transparent;transform:rotate(-90deg);position:absolute;left:-25px;top:calc(50% - 5px);}

.departList ul.gup_1 > li.active .gup_2{display:block;}
.departList ul.gup_1 > li:hover > a,
.departList .gup_2 a:hover{border-bottom-color:rgba(255,255,255,0.5);}
.departList .gup_2 a:hover::before{border-top-color:#FFF;}

.departList .gup_2 li:first-child a{color:#DDD;font-family:'S-CoreDream-5Medium';font-size:16px;}
.departList ul.gup_1 > li > a.on{border-bottom-color:rgba(255,255,255,0.5);}
.departList .gup_2 a.on{border-bottom-color:rgba(255,255,255,0.5);}
.departList .gup_2 a.on::before{border-top-color:#FFF;}

.head_logo{}
.head_navi{width:calc(100% - 550px);}
.head_util{width:200px;}

/*로고*/
.head_logo{display:flex;align-items:center;position:absolute;left:0;width:266px;}
.head_logo a{}
.head_logo a img{}
.head_logo a img.logo_w{}
.head_logo a img.logo_b{display:none;}

/*내비*/
.head_navi .nav{display:none;justify-content:center;align-items:center;}
.head_navi .nav a{display:block;}
.head_navi .nav a span{display:block;font-size:20px;font-family:'S-CoreDream-5Medium';color:#191919;padding:11px 29px;background:transparent;border-radius:30px;}
.head_navi .nav a::after{content:"";display:block;margin:4px auto 0 auto;width:0;height:0;border-top:10px solid #ff8400;border-bottom:0;border-right:10px solid transparent;border-left:10px solid  transparent;transform:scale(0);}
.head_navi .nav a:hover span,
.head_navi .nav a.active span{color:#FFF;background:#ff8400;}
.head_navi .nav a:hover::after,
.head_navi .nav a.active::after{transform:scale(1);}

/*유틸*/
.head_util{display:flex;justify-content:flex-end;align-items:center;}
.head_util a{display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;height:88px;margin-left:1px;}
.head_util a span{padding:5px 0;font-size:12px;font-family:'S-CoreDream-5Medium';color:#FFF;}
.head_util a.a_1{background:rgba(0,97,205,0.5);}
.head_util a.a_2{background:rgba(0,24,51,0.8);}

/*스크롤시*/
.fix header{background:#FFF;}
.fix .head_logo a img.logo_w{display:none;}
.fix .head_logo a img.logo_b{display:block;}
.fix .head_navi .nav{display:flex;}

@media all and (max-width:1700px){
  header .head_wrap{padding-left:15px;}
  .head_logo{left:15px;}
}
@media all and (max-width:1280px){
  header .gnb .wrap{display:none;}
  .departList{width:100%;}
  .departList .openList{width:100%;}
  header .head_wrap{padding:0 0 0 10px;}
  header .head_container{border-top:0;border-bottom:0;}
}
@media all and (max-width:768px){
  .head_logo{width:200px;}
  .head_util a{width:70px;height:70px;}
}
@media all and (max-width:380px){
  .head_logo{width:160px;}
  .head_util a{width:50px;height:50px;}
  .head_util a img{max-width:20px;}
  .head_util a span{display:none;}
}




/*풋터************************************************************/
footer{background:#262626;}
footer .footer_container{max-width:1700px;margin:0 auto;padding:30px 0;position:relative;}
footer .fnb{border:3px solid #686868;padding:25px;}
footer .fnb ul{display:flex;justify-content:space-between;align-items:center;}
footer .fnb ul li{}
footer .fnb ul li a{color:#8e8e8e;font-size:16px;font-family:'Noto DemiLight';}
footer .fnb ul li a.a_1{color:#069edb;font-family:'Noto Medium';}

.footer_wrap{display:flex;align-items:center;margin-top:25px;}

.foot_logo{width:250px;}
.foot_address{width:calc(100% - 590px);}
.wrap_site_link{width:420px;position:absolute;right:0;top:145px;}

.foot_address address{font-family:'Noto DemiLight';color:#b1b1b1;font-size:16px;}
.foot_address address a,
.foot_address address span{font-family: 'Titillium Web', sans-serif;color:#FFF;}
.foot_address address span{padding-left:20px;}
.foot_address p{font-family: 'Titillium Web', sans-serif;color:#8e8e8e;font-size:12px;margin-top:5px;}

.wrap_site_link{display:flex;justify-content:flex-end;}
.wrap_site_link > div{display:flex;justify-content:space-between;align-items:center;margin-left:30px;position:relative;}
.wrap_site_link > div > a{font-family:'Noto Medium';color:#FFF;font-size:16px;display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #FFF;min-width:200px;}
.wrap_site_link > div > a:after{content:"";display:block;width:12px;height:7px;background:url(../../images/common/footer_arr.png) no-repeat center;}
.wrap_site_link > div > a.active:after{transform:rotate(180deg);}
.wrap_site_link > div ul{display:none;background:#333;padding:15px;position:absolute;bottom:-90px;left:0;width:calc(100% - 20px);height:240px;overflow-y:auto;overflow-x:hidden;border:2px solid #0067d4;z-index:1;}
.wrap_site_link > div ul.active{display:block;}
.wrap_site_link > div ul li{}
.wrap_site_link > div ul li a{display:block;padding:5px 0;font-family:'Noto Regular';color:#FFF;font-size:14px;border-bottom:1px solid #222;border-top:1px solid #444;}
.wrap_site_link > div ul li:first-child a,
.wrap_site_link > div ul li:last-child a{border:0;}

.footer_wrap_2{display:flex;flex-direction:row-reverse;align-items:center;margin-top:25px;}
.foot_sns{margin-left:30px;}
.foot_sns a{margin-left:3px;}
@media all and (max-width:1700px) {
  footer .footer_container{padding:30px 15px;}
  .foot_address address span{display:block;padding-left:0;}
  .wrap_site_link{right:15px;}
}
@media all and (max-width:1280px) {
  footer .fnb ul{flex-wrap:wrap;justify-content:flex-start;}
  footer .fnb ul li{width:20%;text-align:center;}
  footer .fnb ul li a{display:block;padding:5px;}
  .foot_address address span{display:inline;padding-left:20px;}
  .footer_wrap{flex-wrap:wrap;}
  .foot_logo,
  .foot_address{width:100%;text-align:center;}
  .foot_logo{margin-bottom:20px;}
  .wrap_site_link{width:100%;position:relative;right:auto;top:auto;justify-content:space-between;margin-bottom:20px;}
  .wrap_site_link > div{width:48%;margin:0 1%;}
  .wrap_site_link > div > a{min-width:100%;}
  .wrap_site_link > div ul{bottom:auto;top:25px;width:100%;}
  .footer_wrap_2{justify-content:center;}
}
@media all and (max-width:768px) {
  footer .fnb{padding:15px 10px;}
  footer .fnb ul li{width:33.33333%;}
  footer .fnb ul li a{font-size:14px;}
  .foot_address address span{display:block;padding-left:0;}
  .wrap_site_link{flex-wrap:wrap;}
  .wrap_site_link > div{width:100%;margin:0 0 15px 0;}
  .footer_wrap_2{flex-direction:row;flex-wrap:wrap;}
  .foot_sns{margin-bottom:20px;margin-left:0;width:100%;text-align:center;}
}
@media all and (max-width:480px) {
  footer .fnb ul li{width:50%;}
}


/*고탑***********************************************************/
.goTop a{display:block;text-indent:-9999px;color:#FFF;text-align:center;background:#888 url(/sites/style_guide/images/common/arrow_5_w.png) no-repeat center;transform:rotate(-90deg);width:50px;height:50px;border-radius:100%;position:fixed;bottom:20px;right:20px;filter:alpha(opacity=50);opacity:0.5;}
@media all and (max-width:768px) {
  .goTop a{width:35px;height:35px;}
}



/*스크롤시주메뉴************************************************************/
.fix header .head_container{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
@media all and (max-width:1280px) {
  .fix header .head_container{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
}
@media all and (max-height:768px) {
  .fix header .head_container{border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;}
}
