@charset "utf-8";

#header .gnb_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2.8rem 10rem 2.7rem;
    background-color: rgba(1, 1, 1, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}
#header .gnb_wrap .logo a {
    display: block;
    width: 97px;
    height: 35px;
    background-image: url(../../images/logo/logo.svg);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#header .gnb_wrap nav .lst_link {
    display: flex;
    align-items: center;
}
#header .gnb_wrap nav .lst_link li a {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

#header .gnb_wrap .lst_util li a {
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

#header .gnb_wrap nav .lst_link li + li {
    margin-left: 5.6rem;
}

#header .gnb_wrap .btn_open_drawer {
    display: none;
}

#header .mb_menu_wrap {
    display: none;
}

@media screen and (max-width: 1600px) {
    #header .gnb_wrap {
        padding: 2vw 7.1428571429vw 1.9285714286vw;
    }
    #header .gnb_wrap .logo a {
        width: calc(100vw * (97 / 1600));
        height: calc(100vw * (35 / 1600));
    }
    #header .gnb_wrap nav .lst_link li a {
        font-size: calc(100vw * (16 / 1600));
    }
    #header .gnb_wrap nav .lst_link li + li {
        margin-left: calc(100vw * (56 / 1600));
    }
    #header .gnb_wrap .lst_util li a {
        font-size: calc(100vw * (16 / 1600));
    }
}
@media screen and (max-width: 900px) {
    #header .gnb_wrap {
        position: fixed;
        height: calc(100vw * (64 / 375));
        transition: 0.2s;
        width: calc(100vw * (375 / 375));
        z-index: 9;
    }
    #header .gnb_wrap.is-hide {
        transform: translateY(-100%);
        transition: 0.2s;
    }
    #header .gnb_wrap {
        transform: translateY(0);
    }
    #header .gnb_wrap .logo a {
        width: calc(100vw * (60 / 375));
        height: calc(100vw * (21 / 375));
    }
    #header .gnb_wrap nav {
        display: none;
    }
    #header .gnb_wrap .lst_util {
        display: none;
    }
    #header .gnb_wrap .btn_open_drawer {
        display: block !important;
        width: 6.4vw;
        height: 6.4vw;
        background-image: url(../../images/ico/ico_ham.svg);
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    #header .mb_menu_wrap {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;
        width: 100vw;
        height: calc(100vw * (20 / 375));
    }
    #header .mb_menu_wrap .dimd_menu {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 40;
        width: 100vw;
        height: calc(var(--vh, 1vh) * 100);
        background-color: transparent;
        transition: 0.4s;
    }
    #header .mb_menu_wrap .dimd_menu.is-active {
        background-color: rgba(0, 0, 0, 0.5);
        transition: 0.4s;
    }
    #header .mb_menu_wrap .mb_menu_area {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 40;
        width: 80vw;
        height: calc(var(--vh, 1vh) * 100);
        background-color: #fff;
        transition: 0.4s;
        -moz-transform: translateX(100%);
        -o-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head {
        width: calc(100vw * (300 / 375));
        height: calc(100vw * (140 / 375));
        background-color: #111;
        padding: calc(100vw * (20 / 375)) calc(100vw * (16 / 375)) calc(100vw * (40 / 375)) calc(100vw * (16 / 375));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: calc(100vw * (36 / 375));
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .btn_wrap {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .btn_wrap .link_home {
        width: calc(100vw * (24 / 375));
        height: calc(100vw * (24 / 375));
        background-image: url(../../images/ico/ico_home_white.svg);
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .btn_wrap .btn_close {
        width: calc(100vw * (24 / 375));
        height: calc(100vw * (24 / 375));
        background-image: url(../../images/ico/ico_x_white.svg);
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .link_wrap {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .link_wrap a {
        font-size: calc(100vw * (15 / 375));
        font-weight: 500;
        color: #fff;
        position: relative;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .link_wrap a:last-child {
        padding-left: calc(100vw * (20 / 375));
        position: relative;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_head .link_wrap a + a::before {
        height: calc(100vw * (8 / 375));
        background-color: #ddd;
        position: absolute;
        left: 0;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body {
        width: 100%;
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .lst_link {
        width: 100%;
        padding: calc(100vw * (35 / 375)) calc(100vw * (20 / 375)) 0 calc(100vw * (32 / 375));
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .lst_link li:not(:last-child) {
        margin-bottom:  calc(100vw * (31 / 375));
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .lst_link li a {
        display: block;
        width: 100%;
        font-size: calc(100vw * (20 / 375));
        font-weight: 500;
        color: #111;
        background-image: url(../../images/ico/ico_right_arrow_black.svg);
        background-size: calc(100vw * (24 / 375));
        background-position: 100% 50%;
        background-repeat: no-repeat;
        font-family: "AktivGrotesk", "Sans-Serif";
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .menu_foot {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 calc(100vw * (20 / 375)) calc(100vw * (22 / 375)) calc(100vw * (20 / 375));
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .menu_foot .sns_link_wrap {
        display: flex;
        align-items: center;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .menu_foot .sns_link_wrap a {
        width: calc(100vw * (40 / 375));
        height: calc(100vw * (40 / 375));
        background-size: 100% 100%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .menu_foot .sns_link_wrap a + a {
        margin-left: calc(100vw * (12 / 375));
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .menu_foot .sns_link_wrap a.link_insta {
        background-image: url(../../images/ico/ico_insta_gray_black.svg);
    }
    #header .mb_menu_wrap .mb_menu_area .menu_body .menu_foot .sns_link_wrap a.link_kakao {
        background-image: url(../../images/ico/ico_kakao_gray_black.svg);
    }
    #header .mb_menu_wrap .mb_menu_area.is-active {
        transition: 0.4s;
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    #header .mb_menu_wrap.is-active {
        display: block;
    }

    #header .gnb_wrap .lst_util li a {
        font-size: calc(100vw * (16 / 375));
        font-weight: 500;
        color: #fff;
    }
      #header .gnb_wrap nav .lst_link li a {
        font-size: calc(100vw * (16 / 375));
      }
}

/*# sourceMappingURL=header.css.map */