:root { --main-color: #004098;}
.eng{font-family: "Play", sans-serif;}
/* *{    word-break: break-word !important;} */
#header{  height: 80px; position: fixed; width: 100%; z-index: 9999;}
.head_wrap{max-width: 1855px; width: 95%; margin: 0 auto; display: flex; justify-content: center; height: 100%; align-items: center;  position: relative;}
.head_wrap .logo{ width: 140px; position: absolute;left: 0; }
.head_wrap .logo a{display: block; width: 100%; height: 100%;}
.head_wrap .logo a img{}
.head_wrap .logo a img.white{}
.head_wrap .logo a img.color{display: none;}
.head_wrap .main_right{width: 15%;  display: flex; position: absolute; right: 0; height: 100%; justify-content: end; align-items: center;}
/*언어*/
/* .head_wrap .main_right .lang{display: flex; width: 70%; align-items: center;}
.head_wrap .main_right .lang li{width:calc(100% / 2 - 20px); margin: 0 10px; position: relative;}
.head_wrap .main_right .lang li.active span{color:var(--main-color) ;}
.head_wrap .main_right .lang li.active::after{content: ""; background-color: #fff; width: 1px; height: 11px; position: absolute; right:-8px; top: 6px;}
.head_wrap .main_right .lang li a{display: block; }
.head_wrap .main_right .lang li a span{ font-size: 15px; color: #fff; display: inline-block;transform: translateY(1px); }
.head_wrap .main_right .lang li .white{}
.head_wrap .main_right .lang li .color{display: none;}
.head_wrap .main_right .lang li.active a span{transform: translateY(3px); display: inline-block; color: #fff;} */
 
/*로그인*/
.head_login_btn{margin-right: 20px;  }
.head_login_btn a{padding: 10px 20px; border: 1px solid #fff;border-radius: 15px; display: flex; width: 120px; align-items: center; justify-content: space-between;}
.head_login_btn a span{font-size: 16px; color: #fff;}
.head_login_btn a i{font-size: 16px; color: #fff;}


/*언어*/
.head_wrap .lang{width: 80px; height: 80px; margin-right: 20px; }
.head_wrap  .lang{ text-align: center; }
.head_wrap .lang .lang_btn{background-color: transparent; border: none; position: relative; height: 100%; width: 100%; display: flex; align-items: center;}
.head_wrap  .lang .lang_btn img{ }
.head_wrap  .lang .lang_btn img.color{display: none;}
.head_wrap  .lang .lang_btn span{ margin-left: 10px; font-size: 16px; color: #fff;}
.head_wrap  .lang .lang_btn i{font-size: 16px; color: #fff;}
.head_wrap .lang .lang_list{ text-align: center; background-color: var(--main-color); display: none;  width: 80px;}
.head_wrap  .lang .lang_list li{line-height: 30px; height: 30px; font-size: 16px;}
.head_wrap  .lang .lang_list li a{display: block; color: #fff;}


/*전체메뉴*/
.head_wrap .main_right .all_menu_wrap{width: 30px; }
.head_wrap .main_right .all_menu_wrap .all_menu_btn button{width: 100%; border: none; background: none;}
.head_wrap .main_right .all_menu_wrap .all_menu_btn span{background-color: #fff; width: 100%; height: 2px; position: relative; display: block;}
.head_wrap .main_right .all_menu_wrap .all_menu_btn span::before{content: ""; width: 80%; height: 2px; background-color: #fff; position: absolute; top: -8px; left: 0; }
.head_wrap .main_right .all_menu_wrap .all_menu_btn span::after{content: ""; width: 45%; height: 2px; background-color: #fff; position: absolute; bottom: -8px; left: 0; }

.all_menu_list.active{opacity: 1;width: 100%; height: 100vh; z-index: 9999; transition: all 0.2s ease-in-out; top: 0;}

.all_menu_list{position: fixed; width: 0; height: 0; z-index:1; 
    background: url(../../img/site_map.jpg) no-repeat;
    background-position: center;
	background-size: cover;
    transition: all 0.2s ease-in-out;
     opacity: 0; top: 0; right: 0; }

     .close_btn{width: 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; z-index: 9999; top: 40px; right: 10px; text-align: center;}
     .close_btn button{width: 50%; border: none; background: none;}
     .close_btn span{border: 1px solid #fff; display: block; margin: 5px 0; width: 70%;}
     .close_btn span:nth-child(1){transform: rotate(45deg) translate(5px, 5px)}
     .close_btn span:nth-child(2){transform: rotate(-45deg);}
/*sitemap*/
.site_map{display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; justify-content: center; position: relative;}

.site_map_menu ul{max-width: 1540px; margin:100px auto 0; width: 90%; display: flex;}
.site_map_menu >ul> li.gnb-1dep{width:calc(100% / 5); text-align: center; overflow: hidden;}
.site_map_menu >ul> li.gnb-1dep> a{display: block; padding: 10px; color: rgba(255,255,255,1); line-height: 1.4; font-size: 30px; transition: all .3s; border-bottom: 1px solid rgba(255,255,255,0.3);}

.site_map_menu >ul .gnb-1dep:hover >a{border-bottom: 1px solid rgba(255,255,255,1);}
.site_map_menu ul li:hover p{border-bottom: 1px solid rgba(255,255,255,1);}
.site_map_menu ul li .gnb-2dep li a:hover{color: rgba(255,255,255,1); }

.site_map_menu ul li .gnb-2dep{display: block; }
.site_map_menu ul li .gnb-2dep{flex-direction: column; justify-content: center; margin: 30px auto 0;}
.site_map_menu ul li .gnb-2dep li{width: 100%;}
.site_map_menu ul li .gnb-2dep li a{    display: block; width: 100%; height: 100%;padding: 10px;color: rgba(255, 255, 255, 0.7);line-height: 1.4;font-size: 18px;transition: all .3s;}
.site_map_menu ul li .gnb-2dep li a span{}




/*header_on */
#header.on .logo a img.white{display: none;}
#header.on .logo a img.color{display: block;}
#header.on .lang .white{display: none;}
#header.on .lang .color{display: inline-block;}
#header.on .gnb .main_menu .gnb-1dep> a{color: #111;}
#header.on .main_right .lang li a span{color: #111; }
#header.on .main_right .all_menu_wrap .all_menu_btn span,
#header.on .main_right .all_menu_wrap .all_menu_btn span::before, #header.on .main_right .all_menu_wrap .all_menu_btn span::after{background-color: #111;}
#header.on .head_wrap .main_right .lang li.active::after{background-color: #111;}
#header.on .head_wrap .main_right .lang li.active span{color:var(--main-color) ;}
#header.on .lang .lang_btn span{color: #111;}
#header.on .lang .lang_btn i{color: #111;}
#header.on .head_login_btn{}
#header.on .head_login_btn a{border: 1px solid #111;}
#header.on .head_login_btn a span{color: #111; }
#header.on .head_login_btn a i{color: #111;}

#header.sub{background-color: #fff; border-bottom: 1px solid #ccc;}
/*header_active 헤더호버시*/
#header.active{background-color: #fff; border-bottom: 1px solid #ccc;}
#header.active .logo a img.white{display: none;}
#header.active .logo a img.color{display: block;}
#header.active .lang .white{display: none;}
#header.active .lang .color{display: inline-block;}
#header.active .gnb .main_menu .gnb-1dep> a{color: #111;}
#header.active .main_right .lang li a span{color: #111; }
#header.active .main_right .all_menu_wrap .all_menu_btn span,
#header.active .main_right .all_menu_wrap .all_menu_btn span::before, #header.active .main_right .all_menu_wrap .all_menu_btn span::after{background-color: #111;}
#header.active .head_wrap .main_right .lang li.active::after{background-color: #111;}
#header.active .head_wrap .main_right .lang li.active span{color:var(--main-color) ;}
#header.active .lang .lang_btn span{color: #111;}
#header.active .lang .lang_btn i{color: #111;}
#header.active .head_login_btn{}
#header.active .head_login_btn a{border: 1px solid #111;}
#header.active .head_login_btn a span{color: #111; }
#header.active .head_login_btn a i{color: #111;}


/*메인비주얼3번 addClass*/
#header.white .logo a img.white{display: none;}
#header.white .logo a img.color{display: block;}
#header.white .lang .white{display: none;}
#header.white .lang .color{display: inline-block;}
#header.white .gnb .main_menu .gnb-1dep> a{color: #111;}
#header.white .main_right .lang li.active a span{color: var(--main-color); }
#header.white .main_right .lang li a span{color: #111;}
#header.white .main_right .all_menu_wrap .all_menu_btn span,
#header.white .main_right .all_menu_wrap .all_menu_btn span::before, #header.white .main_right .all_menu_wrap .all_menu_btn span::after{background-color: #111;}
#header.white .head_wrap .main_right .lang li.white::after{background-color: #111;}
#header.white .head_wrap .main_right .lang li.white span{color:var(--main-color) ;}
#header.white .head_wrap .main_right .lang li.active::after{background-color: #111;}
#header.white .lang .lang_btn span{color: #111;}
#header.white .lang .lang_btn i{color: #111;}
#header.white .head_login_btn{}
#header.white .head_login_btn a{border: 1px solid #111;}
#header.white .head_login_btn a span{color: #111; }
#header.white .head_login_btn a i{color: #111;}



/*메인3,5섹션 addClass*/
#header.black .logo a img.white{display: block;}
#header.black .logo a img.color{display: none;}
#header.black .lang .white{display: inline-block;}
#header.black .lang .color{display: none;}
#header.black .gnb .main_menu .gnb-1dep> a{color: #fff;}
#header.black .main_right .lang li a span{color: #fff; }
#header.black .main_right .all_menu_wrap .all_menu_btn span,
#header.black .main_right .all_menu_wrap .all_menu_btn span::before, #header.black .main_right .all_menu_wrap .all_menu_btn span::after{background-color: #fff;}
#header.black .head_wrap .main_right .lang li.black::after{background-color: #fff;}
#header.black .head_wrap .main_right .lang li.black span{color:#fff ;}
#header.black .head_wrap .main_right .lang li.active span{color: #fff;}
#header.black .head_wrap .main_right .lang li.active::after{background-color: #fff;}
#header.black .lang .lang_btn span{color: #fff;}
#header.black .lang .lang_btn i{color: #fff;}
#header.black .head_login_btn{}
#header.black .head_login_btn a{border: 1px solid #fff;}
#header.black .head_login_btn a span{color: #fff;}
#header.black .head_login_btn a i{color: #fff;}

.gnb{ height: 100%; max-width: 800px; width: 90%;}
.gnb .main_menu{display: flex; height: 100%; align-items: center;}
.gnb .main_menu .gnb-1dep{width:calc(100% / 5 - 10px) ; margin: 0 5px; text-align: center; height: 80px; line-height: 80px; position: relative;}
.gnb .main_menu .gnb-1dep::after{content: ""; background-color: var(--main-color); width: 0; position: absolute; left: 0; bottom: 0; transition: all .5s; height: 3px;}
.gnb .main_menu .gnb-1dep> a{display: block; width: 100%; height: 100%; font-size: 18px; color: #fff; position: relative;}
.gnb .main_menu .gnb-1dep> a::before{content: ""; width: 5px; height: 5px; background-color: #009dbb; position: absolute; top: 27px; left: 30px; display: none; transition: all .3s;}
.gnb .main_menu .gnb-1dep .gnb-2dep{height: auto; padding: 30px 20px; display: none; background-color: #fff; border: 1px solid #ccc; width: 230px; position: absolute; left: 50%; transform: translateX(-50%);}
.gnb .main_menu .gnb-1dep .gnb-2dep li{margin: 15px 0;}
.gnb .main_menu .gnb-1dep .gnb-2dep li a{display: block; width: 100%; height: 100%; font-size: 16px; text-align: left;line-height: 1.5; }
.gnb .main_menu .gnb-1dep .gnb-2dep li:hover a{color: #009dbb; }
.gnb .main_menu .gnb-1dep .gnb-2dep li:hover a span{border-bottom: 1px solid #009dbb;}

.gnb .main_menu .gnb-1dep:hover a::before{display: block; }




/*모바일head*/
#header.mobile{background-color: #fff; border-bottom: 1px solid #ccc;}
#header.mobile .logo a img.white{display: none;}
#header.mobile .logo a img.color{display: block;}


.head_wrap .m_btn{vertical-align: top; text-align: center; z-index: 200; display: none;}
.head_wrap .m_btn span{position:relative; display:inline-block; width: 30px; height: 2px; background: var(--main-color); transition:0.4s}
.head_wrap .m_btn span::before{content:""; position:absolute; top: -8px; left: 0; width: 100%; height: 2px; background: var(--main-color); transition:0.4s}
.head_wrap .m_btn span::after{content:""; position:absolute; top: 8px; left: 0; width: 100%; height: 2px; background: var(--main-color); transition:0.4s}

.m_btn.on{}
.m_btn.on span{background: transparent !important;}
.m_btn.on span::before{position:absolute; top: 0; transform:rotate(45deg); background-color: #fff;}
.m_btn.on span::after{position:absolute; top: 0; transform:rotate(-45deg); background-color: #fff;}

.head_wrap .m_menu{display:none; position:fixed; top: 0; right: -100%; width: 100%; height: 100%; max-width:640px; 
    /* background: linear-gradient(135deg, #01088A, #369DB5); */
    background-image: linear-gradient(to bottom, #004689 0%, #004689 100%);
     z-index: 100; box-sizing:border-box; transition:0.4s}
.head_wrap .m_menu .m_logo{position:relative; display:inline-block; vertical-align:middle; width: 150px; height: 60px; background:url(../../img/logo_color.png) 50% 50% no-repeat; background-size:contain; margin: 25px 0;}
.head_wrap .m_menu .m_lang{ margin-top: 80px; display: flex; text-align: center; font-size: 22px;}
.head_wrap .m_menu .m_lang a{color: #aaa; height: 50px; line-height: 50px; position: relative; width: calc(100% / 2 - 10px); margin: 0 5px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 16px;}
.head_wrap .m_menu .m_lang a.active{color: var(--main-color); background-color: #fff;}

.head_wrap .m_menu > ul{padding-top: 50px;}
.head_wrap .m_menu > ul > li{padding-left: 20px; }
.head_wrap .m_menu > ul > li > a{position:relative; display:inline-block; width: 100%; font-size:18px; color: #fff; padding: 14px 0; box-sizing:border-box; line-height:1.2em;  font-weight: 600;}
.head_wrap .m_menu > ul > li > a::before{background-color: #fff;
    content: '';
    width: 15px;
    height: 1px;
    position: absolute;
    right: 2%;
    top: 50%;
    transition: 0.3s ease-in-out;
    transform: translate(-50%, -50%);}
    .head_wrap .m_menu > ul > li > a::after{
        background-color: #fff;
        content: '';
        width: 15px;
        height: 1px;
        position: absolute;
        right: 2%;
        top: 50%;
        transition: 0.3s ease-in-out;
        transform: translate(-50%, -50%) rotate(90deg);
    }

.head_wrap .m_menu > ul > li > ul{display:none; padding: 10px 0 10px 25px;} 
.head_wrap .m_menu > ul > li > ul > li{}
.head_wrap .m_menu > ul > li > ul > li > a{position:relative; display:inline-block; width: 100%; font-size:16px; color: #222;  box-sizing:border-box; padding: 10px 0;  }
/* .head .m_menu > ul > li > ul > li > a i{position:absolute; right: 53px; top: 19px; display:inline-block; width: 6px; height: 6px; background:url(../img/icon_arrowG.png) 50% 50% no-repeat; background-size:cover} */

.head_wrap .m_menu.on{right: 0; display:block;}
.head_wrap .m_menu > ul > li.on{background: #f5f5f5;}
.head_wrap .m_menu > ul > li.on > a{color: var(--main-color);}

.head_wrap .m_menu > ul > li.on > a::before{background-color: var(--main-color);}
.head_wrap .m_menu > ul > li.on > a::after{transform: translate(-50%, -50%); background-color: var(--main-color);}
.head_wrap .m_menu > ul > li > ul > li.on a{color: var(--main-color);}
.head_wrap .m_btn.on span::before {background-color: #fff !important;}
.head_wrap .m_btn.on span::after {background-color: #fff !important;}

.head_wrap .m_menu .depth03{padding-left: 20px;}
.head_wrap .m_menu .depth03 li{font-size: 15px; margin: 10px 0;}






/*footer*/
.footer{background-color: #191919; padding: 80px 0;}
.ft_wrap{max-width:1830px; width: 95%; margin: 0 auto; position: relative;}

.ft_list{display: flex; flex-wrap: wrap;}
.ft_list .ft_logo{width: 170px;}
/* .ft_list .ft_logo img{width: 100%;} */

.ft_list .ft_txt{width: 80%; padding-left: 110px; }
.ft_list .ft_txt div{display: flex; flex-wrap: wrap; margin-bottom: 20px;}
.ft_list .ft_txt div p{font-size: 16px; color: #808080; margin-right: 10px;}
.ft_list .ft_txt div em{ color: #e3e3e3; margin-right: 10px; font-style: normal;}
.ft_list .ft_txt div.copy{font-size: 16px; margin-top: 30px;font-family: "Play", sans-serif; color: #e3e3e3; margin-bottom: 0;}
.ft_list .ft_txt div.copy i{color: var(--main-color); font-style: normal; padding: 0 5px;}



 /*******************************반응형*************************************/
 @media (max-width: 1770px) {  
    .head_wrap .main_right{width: 15%;}
   
    
 }
 @media (max-width: 1540px) {  
   
   
    
}
@media (max-width: 1380px) {  
    .head_wrap .main_right{width: 20%;}
    .head_wrap .logo a img{width: 100%;}
    .gnb .main_menu .gnb-1dep a{font-size: 18px;}
    .gnb .main_menu .gnb-1dep .gnb-2dep li a{font-size: 16px;}
}

@media (max-width: 1280px) {
    .head_wrap{justify-content: end;}
 .head_wrap .gnb{display: none;}
 .head_wrap .m_btn{position:relative; display:inline-block; width: 40px; height: 40px; vertical-align: middle;  cursor: pointer; transition:0.4s}
 .head_wrap .m_btn.on{margin-left: 0;}
 .head_wrap .m_btn span{margin: 19px 0;}
 .head_wrap .m_menu{display:block; }
 .mo_wrap{width: auto; display: flex; align-items: center; justify-content: space-between;}
 .head_wrap .main_right{display: none;}

 .privacy .pop_wrap{width: 90%;}
 .layerpopup .pop_wrap .pop_tit{font-size: 20px;}
 .head_login_btn{display: none;}
.m_head_login_btn{display: flex; margin-top: 80px;  }
.m_head_login_btn a{width: 95%; margin: 0 auto; border: 1px solid #fff !important; border-radius: 10px; padding: 15px 20px;}
.m_head_login_btn a span{color: #fff !important};
.m_head_login_btn a i{color: #fff !important;}
.head_login_btn{margin-right: 0;}
.head_login_btn a i{color: #fff !important;}
   
}
@media (max-width: 1024px) { 
    .ft_bot{flex-direction: column; align-items: start;}
  
}
@media (max-width: 800px) { 
    .ft_list{flex-direction: column;}
    .ft_list .ft_txt{padding-left: 0; margin-top: 30px; width: 100%;}

}
@media (max-width: 650px) { 
    #header{height: 60px;}
    .head_wrap .logo{width: 80px;}

    .ft_bot li div{font-size: 16px;}
    .ft_bot li div i{display: block;margin-bottom: 10px;}
    .ft_top{flex-direction: column; align-items: start;}
    .ft_top li:nth-child(1) {margin-bottom: 30px;}
    .ft_wrap{width: 90%;}

   
}
@media (max-width: 480px) { 

    .head_wrap .lang .lang_btn img{width: 15px;}
    .head_wrap .lang .lang_btn span{margin-left: 5px;}

    
    .layerpopup .pop_wrap .pop_tit{font-size: 18px;}
    .layerpopup .pop_wrap .pop_close i{font-size: 25px;}
    .privacy .pop_wrap textarea{font-size: 14px;}

    .ft_list .ft_txt div{margin-bottom: 10px; flex-direction: column;}
    .ft_list .ft_txt div p{font-size: 14px; margin: 2px 0;}
    .ft_list .ft_txt div.copy{font-size: 14px; display: block;}
   
}