@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-style: normal;
}
:root { --main-color: #1890c3;}
#header{ background-color: #fff;   width: 100%;   position: relative; z-index: 99999;}

.head_wrap{max-width: 1280px; width: 95%;margin: 0 auto; }


.head_wrap .head_top{display: flex; justify-content: space-between; align-items: center; padding: 10px 0;}
.head_wrap .head_top .head_top_menu{width: 30%;}
.head_wrap .head_top .head_top_menu ul{display: flex; }
.head_wrap .head_top .head_top_menu ul li{margin-left: 15px;}
.head_wrap .head_top .head_top_menu ul li a{display: block; font-size: 16px;}
.head_wrap .head_top .logo{ width: 100px;}
.head_wrap .head_top .logo a{display: block; width: 100%; height: 100%;}
.head_wrap .head_top .logo a img{}
.head_wrap .head_top .head_call{width: 30%;}
.head_wrap .head_top .head_call a{display: flex; justify-content: end; align-items: center;}
.head_wrap .head_top .head_call a span{font-size: 25px; margin-right: 10px; font-weight: 900;}
.head_wrap .head_top .head_call a em{font-size: 40px; font-style: normal; color:#1c3f95 ; font-weight: 700;}



.gnb{ height: 50px; max-width: 1280px; width: 100%; position: relative;}
.gnb::before{content: ""; background-color: #ccc; width: 1920px; height: 1px; position: absolute; top: 0; left: -330px;}
.gnb .main_menu{display: flex; height: 100%; align-items: center; justify-content: space-between;}
.gnb .main_menu .gnb-1dep{ text-align: center; height: 50px; position: relative; }
.gnb .main_menu .gnb-1dep a{display: block; width: 100%; height: 100%; font-size: 17px; padding: 15px 0;}
.gnb .main_menu .gnb-1dep .gnb-2dep{height: auto; padding: 20px; display: none; background-color: #28499a; position: absolute; width: 200px; left: 50%; transform: translateX(-50%);}
.gnb .main_menu .gnb-1dep .gnb-2dep li{margin: 10px 0;}
.gnb .main_menu .gnb-1dep .gnb-2dep li a{display: block; width: 100%; height: 100%; font-size: 15px; text-align: center; color: #fff;}

.gnb .main_menu .gnb-1dep .gnb-2dep li a i{display: block;}
.gnb .main_menu .gnb-1dep .gnb-2dep li:hover a{font-weight: 600;}


.gnb .main_menu .main_menu1, .gnb .main_menu .main_menu2, .gnb .main_menu .main_menu3{display: none ; }


/*모바일head*/
.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{ padding-top: 10px; padding-left: 40px;}
.head_wrap .m_menu .m_lang span{position:relative; display:inline-block; vertical-align: bottom;}
.head_wrap .m_menu .m_lang span a{position:relative; display:inline-block; vertical-align: bottom; font-size:16px; font-weight:500; color: #222; letter-spacing:0.025em; margin-right: 40px; opacity: 0.4; padding: 0;}
.head_wrap .m_menu .m_lang span:first-of-type::after{content:""; position:absolute; top: 4px; right: 21px; width: 1px; height: 12px; background: #222; opacity: 0.4;}
.head_wrap .m_menu .m_lang span.on a::after{content:"";position:absolute;  bottom: -6px; left: 0; height: 3px; width: 100%; background: var(--main-color); transition:0.4s;;}
.head_wrap .m_menu .m_lang span.on a{font-weight:500; font-size:18px; color: var(--main-color); opacity: 1;}
.head_wrap .m_menu > ul{padding-top: 100px;}
.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 개인정보처리방침*/
.privacy .pop_wrap{width: 800px; }
.layerpopup{display: none; position:fixed;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:999999999999;overflow:auto;}
.layerpopup .pop_wrap{margin:70px auto 50px;padding:20px;background:#fff;box-sizing:border-box;border:1px solid #c1c1c1;position:relative;  height: 800px;}
.layerpopup .pop_wrap .pop_tit{font-size: 25px; text-align: center;margin: 50px 0 ; color: var(--main-color); font-weight: 600;}
.layerpopup .pop_wrap .pop_content{border: 1px solid #ddd; margin-bottom: 20px; padding: 20px; background-color: #f7f7f7;}
.layerpopup .pop_wrap .pop_content h3{font-size: 18px; font-weight: 500; margin-bottom: 20px;}
.layerpopup .pop_wrap .pop_content p{font-size: 16px;line-height: 1.2; word-break: keep-all;}

.layerpopup .pop_wrap .pop_close{position: absolute; right: 30px; top: 30px;}
.layerpopup .pop_wrap .pop_close i{color: var(--main-color); font-size: 30px; transition: all .5s;}
.layerpopup .pop_wrap .pop_close:hover i{transform: rotate(360deg);}

.privacy .pop_wrap textarea{width: 100%;height: 500px;background-color: #f4f4f4; font-size: 16px; word-break: keep-all;}


/*footer*/
.footer{border-top: 1px solid #ccc;}
.ft_inner{max-width: 1280px; margin: 0 auto; }
.ft_partner{background-color: #fff; padding: 20px 0;}
.ft_partner ul{display: flex; justify-content: space-between;}
.ft_partner ul li{width:calc(100% / 5 - 20px) ; margin: 0 10px; text-align: center;}
.ft_partner ul li a{display: block; width: 100%;}


.ft_info{    padding: 40px 0 30px 0; background-color: #222;}

.ft_flex{display: flex; justify-content: space-between;}
.ft_flex .ft_logo{width: 90px;}
.ft_flex .ft_logo img{ display: block;}
.ft_flex .ft_logo img:first-child{margin-bottom: 20px;}

.ft_info_wrap{display: flex; justify-content: space-between;     width: calc(100% - 200px);}
.ft_info_wrap> li{width :33%; }
.ft_info_wrap> li h2{font-size: 17px; color: #fff; margin-bottom: 15px;}
.ft_info_wrap >li div{display: flex; justify-content: space-between;margin-bottom: 20px;}
.ft_info_wrap >li div a{ margin: 0 10px; color: #fff;}
.ft_info_wrap >li div a:nth-child(1){margin-left: 0;}
.ft_info_wrap >li p{font-size: 13px;  line-height: 1.8; color: #ddd; }
.ft_info_wrap >li p span{margin-right: 10px;}
.ft_info_wrap .ft_info_list1{padding-right: 50px;}
.ft_info_wrap .ft_info_list2{padding:0 50px; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1);}
.ft_info_wrap .ft_info_list3{padding-left: 40px;}


.ft_link{display: flex; justify-content: space-between; flex-wrap: wrap;}
.ft_link li{width: calc(100% / 2 - 10px);margin: 5px;}
.ft_link li a{display: block; color: #ccc; font-size: 13px;}

.copy{    padding: 25px 0; background-color: #111; text-align: center; color: #555;} 


.head_aside{display: none;}


 /*******************************반응형*************************************/
 @media (max-width: 1540px) {  
   
   
    
}
@media (max-width: 1380px) {  

    .head_wrap .logo{width: 150px;}
    .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) {
    #header{border-bottom: 1px solid #ccc;}
 .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; overflow-y: auto;}
 .mo_wrap{width: auto; display: flex; align-items: center; justify-content: space-between;}

 .head_wrap .head_top .head_top_menu{display: none;}
 .head_wrap .head_top .head_call{display: none;}
 .head_wrap{display: flex; justify-content: space-between;}
 .head_wrap .head_top .logo a img{width: 80px;}

 .privacy .pop_wrap{width: 90%;}
 .layerpopup .pop_wrap .pop_tit{font-size: 20px;}
 .ft_inner{width: 95%;}
   
}
@media (max-width: 1024px) { 
    .ft_bot{flex-direction: column; align-items: start;}
    .ft_flex{flex-direction: column; }
    .ft_info_wrap{width: 100%; margin-top: 20px;width: 100%; }
    .ft_info_wrap .ft_info_list2{padding: 0 20px;}
    .ft_info_wrap .ft_info_list3{padding-left: 20px;}
 .ft_info_wrap .ft_info_list1{padding-right: 15px;}
 .ft_flex .ft_logo{display: flex; width: 100%;}
 .ft_flex .ft_logo img:first-child{margin-bottom: 0; margin-right: 20px;}
    
}
@media (max-width: 800px) { 
    .ft_info_wrap{flex-wrap: wrap; width: 100%;}
    .ft_partner ul li a img{width: 100%;}
    .ft_info_wrap> li{margin: 10px 0; width: 100%;}
    .ft_link li{width: calc(100% / 3 - 10px);}
    .ft_info_wrap .ft_info_list2{padding: 0;}
    .ft_info_wrap .ft_info_list3{padding: 0;}
    .copy{padding: 25px 10px;}

    .head_wrap .m_menu > ul{padding-top: 50px;}
    .head_aside{margin-top: 100px; width: 100%; display: block;}
    .head_aside ul{display: flex;}
    .head_aside ul li{width: calc(100% / 4 - 10px); margin: 0 5px;}
    .head_aside ul li a{display: flex; flex-direction: column; justify-content: center;  background-color: #fff; text-align: center;     box-shadow: 2px 2px 5px rgba(0,0,0,0.2); padding: 15px 5px;}
    .head_aside ul li.tel a i{color:#28499a ;}
    .head_aside ul li.blog a i{color:#2db400 ;}
    .head_aside ul li.e_mail a i{color:#ff9600 ;}
    .head_aside ul li.kakao a i{color:#3b1e1e ; }
    .head_aside ul li a i{margin-bottom: 10px;font-size: 22px;}
    .head_aside ul li a span{font-size: 12px;}
    .head_wrap .head_top .logo a img{width: 60px;}

    .ft_info_wrap .ft_info_list2{border: none; }
}
@media (max-width: 650px) { 
    #header{height: 80px;}
    .head_wrap .lang{height: 80px;}
    .head_wrap .head_top .logo a img{width: 60px;}

    
   
   
}
@media (max-width: 480px) { 
    #header{height: 70px;}
    .head_wrap .head_top .logo a img{width: 50px;}
    .head_wrap{width: 90%;}
    .head_wrap .m_btn span{width: 25px;}
    .head_wrap .m_menu > ul > li > a{font-size: 16px;}
    .ft_link li{width:calc(100% / 2 - 10px) ;}
    .ft_info_wrap .ft_info_list1{padding-right: 0;}
    
    
    .layerpopup .pop_wrap .pop_tit{font-size: 18px;}
    .layerpopup .pop_wrap .pop_close i{font-size: 25px;}
    .privacy .pop_wrap textarea{font-size: 14px;}
   
}