.header{ width: 100%;  position: fixed; top: 0; left: 0; z-index: 99999999; color: #fff; transition-duration: 0.4s; }
.header .wrap{ display: flex; }
.header .logo{ width: 170px; padding: 35px 0; flex-shrink: 0; }
.header .logo a img._c{ display: none; }

.header nav{ display: flex; justify-content: center; width: 100%; padding-left: 9%; }
.header nav .menu{ display: flex; }
.header nav .menu li a{width: 100%; padding: 0 48px; display: flex; text-align: center; align-items: center; justify-content: center; height: 100%; font-size: 19px; letter-spacing: -0.05em; font-weight: 600; }

.header .rightWrap{ flex-shrink: 0; display: flex; align-items: center; }
.header .rightWrap .quick{ display: flex; height: 100%; }
.header .rightWrap .quick li{ position: relative;  height: 100%; }
.header .rightWrap .quick li::after{ content: ''; display: block; width: 1px; height: 10px; background-color: rgba(255,255,255,0.2); position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition-duration: 0.4s; }
.header .rightWrap .quick li:first-child img{transition-duration: 0.4s;margin-right: 10px;}
.header .rightWrap .quick li:last-of-type::after{ display: none; }
.header .rightWrap .quick li a{ display: flex; height: 100%; align-items: center; padding: 0 20px; box-sizing: border-box; }
.header .rightWrap .quick li a i{ font-size: 25px; margin-right: 3px; }
.header .rightWrap .quick li a span{ font-size: 15px; letter-spacing: -0.05em; }

.header .rightWrap .hamWrap{ width: 40px; height: 19px; position: relative; cursor: pointer; }
.header .rightWrap .hamWrap span{ display: block; width: 100%; height: 1px; background-color: #fff; position: absolute; transition-duration: 0.4s; }
.header .rightWrap .hamWrap span:nth-of-type(1){ top: 0; left: 0; }
.header .rightWrap .hamWrap span:nth-of-type(2){ top: 50%; left: 0; }
.header .rightWrap .hamWrap span:nth-of-type(3){ top: 100%; left: 0; }

.header.ham .rightWrap .quick li:first-child img{filter: brightness(.3) !important;}


/* 헤더 햄버거버튼 */
.header.ham .rightWrap .hamWrap span:nth-of-type(1){ top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.header.ham .rightWrap .hamWrap span:nth-of-type(2){ transform: translate(-50%, 0); opacity: 0; }
.header.ham .rightWrap .hamWrap span:nth-of-type(3){ top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); }

.header.ham{background-color: #fff !important;color: #404040 !important;}
.header.ham .quick li:first-child img{filter: brightness(.3) !important;}
.header.ham .logo a img._w{display: none !important;}
.header.ham .logo a img._c{display: block !important;}
.header.ham .rightWrap .hamWrap span{background-color: #404040 !important;}


/* 헤더 기본배경 */
.header.basicbg{ background-color: transparent; color: #fff; }
.header.basicbg .logo a img._c{ display: none; }
.header.basicbg .logo a img._w{ display: block; }
.header.basicbg .quick li:first-child img{filter: brightness(1);}
.header.basicbg .rightWrap .hamWrap span{background-color: #fff;}
/* 헤더 배경 */
.header.bg{ background-color: #042B48; color: #fff; }
.header.bg .rightWrap .hamWrap span{ background-color: #fff; }
.header.bg .rightWrap .quick li::after{ background-color: #fff; }
.header.bg .quick li:first-child img{filter: brightness(1);}
.header.bg .logo a img._c{ display: none; }
.header.bg .logo a img._w{ display: block; }

/* .header.bg2{ background-color: #A48362; color: #fff; }
.header.bg2 .rightWrap .hamWrap span{ background-color: #fff; }
.header.bg2 .rightWrap .quick li::after{ background-color: #fff; }
.header.bg2 .quick li:first-child img{filter: brightness(1);}
.header.bg2 .logo a img._c{ display: none; }
.header.bg2 .logo a img._w{ display: block; }

.header.bg3{ background-color: #042B48; color: #fff; }
.header.bg3 .rightWrap .hamWrap span{ background-color: #fff; }
.header.bg3 .rightWrap .quick li::after{ background-color: #fff; }
.header.bg3 .quick li:first-child img{filter: brightness(1);}
.header.bg3 .logo a img._c{ display: none; }
.header.bg3 .logo a img._w{ display: block; } */

.header{}
.header:hover{background-color: #fff !important;color: #404040 !important;}
.header:hover .quick li:first-child img{filter: brightness(.3) !important;}
.header:hover .logo a img._w{display: none !important;}
.header:hover .logo a img._c{display: block !important;}
.header:hover .rightWrap .hamWrap span{background-color: #404040 !important;}

.header .header_list{transition: .5s;height: 0; background: linear-gradient(to bottom, #1c2533, #042B48 15%);position: absolute;overflow: hidden; display: block;left: 0;width: 100%;top: 100%; z-index: 1;}
.header.ham .header_list{height: 150px;}


.header .header_list .bg-logo{position: absolute;right: 0;top: 100%;transform: translateY(-50%);z-index: -1;}

.header .header_list .header_list_cont{transition: .5s;min-height: 0px;display: flex;align-items: center;justify-content: center;}
.header.ham .header_list .header_list_cont{min-height: 150px;}


.header .header_list .header_list_cont .list-box{transition: .3s;background: transparent; width: 151px;height: 150px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;gap: 12px;padding-top: 30px;}
.header .header_list .header_list_cont .list-box:hover{background: linear-gradient(to bottom, #346567, #37747c);}
.header .header_list .header_list_cont .txt-box{font-family: 'Pretendard';font-size: 16px;line-height: 23px;color: #fff;cursor: pointer;font-weight: 400;}
.header:hover .header_list{height: 150px;}
.header:hover .header_list .header_list_cont{min-height: 150px;}

.gnb-click-bx{display: none;}

@media (hover: hover) {
    /* .header:hover .header_list{height: 150px;}
    .header:hover .header_list .header_list_cont{min-height: 150px;} */
}

.header .rightWrap .lang_list{
    margin-top: -35px;
    display: none;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #fff;
    box-sizing: border-box;
    z-index: 9999;
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    box-shadow: rgba(0,0,0,.25) 0px 2px 5px -1px, rgba(0,0,0,.25) 0px 1px 3px -1px;
    overflow: hidden;
}
.header .rightWrap .lang_list.on{
    display: block;
}
.header .rightWrap .lang_list >li{}
.header .rightWrap .lang_list >li a{
    color: #042B48;
    padding: 7px 0;
    box-sizing: border-box;
    text-align: center;
    display: block;
    font-size: 15px;
    color: #fff;
    background-color: #042B48;
}
.header .rightWrap .lang_list >li a:hover{
    background-color: #fff;
    
    color: #042B48;
}
.header .rightWrap .lang_list >li:after{
    display: none;
}
.header .rightWrap .lang_list >li a:after{
    display: none;
}
.mo_lang{
    display: none;
}

@media screen and (max-width: 1440px) {
    .header .rightWrap .lang_list{
        bottom: -50px;
    }
}
@media screen and (max-width: 1280px) {
    .header .rightWrap .lang_list li a {
        padding: 7px 0 !important;
    }
}
@media screen and (max-width: 500px){
    .mo_lang > ul >li >a {
        display: flex;
        align-items: center;
    }
    .mo_lang{
        display: block;
        position: relative;
    }
    .header .rightWrap .lang_list{
        bottom: -70px;
        left: -18px;
        width: auto;
    }
    .header .rightWrap .lang_list >li a{
        padding: 8px 20px !important;
    }
}
@media screen and (max-width: 1440px){
    .header .logo{ width: 120px; padding: 20px 0; }
    .header nav {
        padding-left: 0;
    }
    .header nav .menu li a{ font-size: 17px; }

    .header .rightWrap .hamWrap{ width: 30px; height: 14px; margin-left: 20px; }

}

@media screen and (max-width: 1280px){
    .header .logo{ width: 100px; padding: 15px 0; }
    .header nav{ display: none; }
    .header .wrap{ justify-content: space-between; }
    .header nav{ padding-left: 5%; }
    .header nav .menu li a{ font-size: 16px; padding: 0 30px; }

    .header .header_list .header_list_cont .list-box:hover{background: transparent;}

    .header .rightWrap .hamWrap{ width: 30px; height: 14px; margin-left: 20px; }
    .header .rightWrap .quick li a{ padding: 0 10px; }
    .header .rightWrap .quick li a i{ font-size: 20px; }
    .header .rightWrap .quick li a span{ font-size: 14px; }

    .header .header_list{display: none; background: linear-gradient(to bottom, #000, #042B48 3%);}
    .header.ham .header_list{height: 100vh;}
    .header .header_list .header_list_cont{padding: 0;}
    .header .header_list .header_list_cont .list-box{position: relative;padding-top: 0;padding-bottom: 3vh;justify-content: center;}
    .header .header_list .header_list_cont .list-box:nth-child(2){padding-top: 3vh;}
    .header .header_list .header_list_cont .list-box:nth-child(3){padding-top: 3vh;padding-bottom: 0;}
    .header .header_list .header_list_cont .list-box:nth-child(3)::after{display: none;}
    .header .header_list .header_list_cont .list-box::after{content: "";position: absolute;bottom: 0;background-color: #67B5A9;height: 1px;width: 200px;left: 50%;transform: translateX(-50%);}
    .header .header_list .header_list_cont{flex-direction: column;justify-content: flex-start;padding-top: 4vh;}
    .header.ham .header_list .header_list_cont{height: 100vh;}

    .header .header_list .header_list_cont .tit-box{font-family: 'Pretendard';font-size: 22px;line-height: 32px;color: #fff;font-weight: 700;margin-bottom: 15px;}

    .header .header_list .bg-logo{top: 35%;right: -153px;}
    .header .header_list .bg-logo img{width: 90%;}

    .header:hover .header_list{height: 150px;}
    .header:hover .header_list .header_list_cont{min-height: 150px;}

    .header:hover .header_list{height: 0;}
    .header.ham:hover .header_list{height: 100vh;}
    .header:hover .header_list .header_list_cont{min-height: none;}

    .gnb-click-bx{transition: .4s;display: block;position: fixed;left: 0;right: 0;z-index: 9999;top: 0;bottom: 0;max-height: 0;background: url(/img/common/com_ham_bg.png)no-repeat center bottom / cover;overflow: hidden;}
    .ham .gnb-click-bx{max-height: 100vh;}
    
    .gnb-bx {
      display: block;
      transition: 0.4s ease-out;
      top: 0 !important;
      height: 100vh;
      max-height: 0%;
      left: 0;
      right: 0;
      overflow: hidden;
    }
    .ham .gnb-bx {
      max-height: 100%;
    }
    .m_bx {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 99999999999998;
      transform: translateX(100%);
    }
    .ham .m_bx {
      transform: translateX(0);
      background-color: rgba(0, 0, 0, 0.397);
    }
  
    .gnb-cnt-bx {
      width: 100%;
      flex-direction: column;
      height: 100%;
      justify-content: space-between;
    }
    .gnb-list-bx2 {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 45px;
    }
    .gnb-list-tit2{
      border-bottom: 1px solid #67B5A9;
    }
    .gnb-cnt-bx .gnb-list-tit2-tit {
      width: 90%;
      margin: 0 auto;
      font-size: 20px;
      font-weight: 500;
      line-height: 30px;
      cursor: pointer;
      position: relative;
      padding: 20px 0;
      color: #fff;
    }
    .gnb-cnt-bx .gnb-tit2-tit {
      width: 90%;
      margin: 0 auto;
      font-size: 24px;
      font-weight: 500;
      line-height: 24px;
      cursor: pointer;
      position: relative;
      padding: 15px 0;
      color: #fff;
    }
    .gnb-cnt-bx .gnb-sub-bx {
      max-height: 0px;
      overflow: hidden;
      transition: 0.6s;
      background-color: #357678;
    }
    .gnb-cnt-bx .gnb-sub-bx.on {
      transition: 0.6s;
    }
    .gnb-cnt-bx .gnb-sub-bx1.on {
      max-height: 300px;
    }
    .gnb-cnt-bx .gnb-sub-bx2.on {
      max-height: 300px;
    }
    .gnb-cnt-bx .gnb-sub-bx3.on {
      max-height: 320px;
    }
  
    .gnb-cnt-bx .gnb-list-sub2 {
      width: 90%;
      font-size: 16px;
      line-height: 19px;
      cursor: pointer;
      margin: 25px auto;
      color: #fff;
    }
    .gnb-cnt-bx .gnb-list-tit2-tit::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      right: 2%;
      top: 50%;
      transition: 0.5s;
      transform: translateY(-50%) rotate(0deg);
      background: url(/img/common/ham_arr.png) no-repeat center/contain;
    }
    .gnb-cnt-bx .gnb-list-tit2-tit.on::after {
      transform: translateY(-50%) rotate(180deg);
    }
}

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

@media screen and (max-width: 500px){
    .header .logo{ width: 80px; padding: 10px 0; }
    .header .rightWrap .quick li a{ padding: 0; padding-left: 5px; padding-right: 10px; }
    .header .rightWrap .quick li a i{ font-size: 18px; }
    .header .rightWrap .quick li a span{ font-size: 13px; }

    .header .rightWrap .hamWrap{ margin-left: 10px; }
    .header .rightWrap .quick{ display: none; }
}

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