/*#region var*/
@media (max-width: 1300px) {
    :root {
        --headerH: 12rem;
    }
}

@media (max-width: 991px) {
    :root {
        --headerH: 80px;
    }
}

@media (max-width: 768px) {
    :root {
        --pxunit: 7px;
        --headerH: 75px;
    }

    html {
        font-size: 2.5vw;
    }
}

/*#endregion var*/

/*#region HEADER*/
@media (max-width: 991px) {
    .overlay {
        display: block;
    }
    
    header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 30px;
    }

    .header_set {
        height: 100%;
    }

    .header_left {
        position: relative;
        flex: 1;
        height: 100%;
        z-index: 20;
    }

    .header_logo {
        font-size: 28px;
    }

    .header_logo img {
        height: 38px;
    }

    .header_menu {
        position: fixed;
        top: var(--headerH);
        right: 0;
        width: 300px;
        height: calc(100% - var(--headerH));
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: var(--bg-white-color);
        -webkit-transition: 0.6s;
        -moz-transition: 0.6s;
        -ms-transition: 0.6s;
        transition: 0.6s;
        transform: translateX(300px);
        will-change: transform;
        padding: 8vh 30px 0;
        margin-left: 0;
        z-index: 9999;
    }

    .header_menu.pst_open {
        transform: translateX(0%);
    }

    .headmenu_a {
        height: auto;
        padding: 12px 0;
    }

    .headmenu_a .headmenu_shape .headmenu_cap {
        font-size: 15px;
    }

    .search_set.sp_version {
        display: flex;
        width: 100%;
        padding: 12px 0;
    }

    .search_form {
        width: 100%;
    }

    .search_input {
        width: 80%;
        font-size: 15px;
        padding: 8px 10px;
        border-radius: 3px 0 0 3px;
    }

    .search_btn {
        width: 20%;
        padding: 0;
        border-radius: 0 3px 3px 0;
    }

    .search_icon {
        width: 16px;
        height: 16px;
    }

    .search_set.pc_version {
        display: none;
    }

    .hamburger_set {
        display: block;
    }
}

@media (max-width: 768px) {
    header {
        padding: 0 25px;
    }

    .header_logo img {
        height: 35px;
    }
}

@media (max-width: 450px) {
    header {
        padding: 0 15px;
    }

    .header_logo img {
        height: 33px;
    }

    .header_menu {
        width: 240px;
        padding: 7vh 20px 0;
        transform: translateX(240px);
    }

    .header_menu.pst_open {
        transform: translateX(0);
    }

    .search_input {
        font-size: 14px;
    }
}

/*#endregion HEADER*/