.header-marsk-box {
    position: fixed;
    top: 54px;
    left: 0;
    width: 100%;
    height: calc(100vh - 54px);
    background-color: rgba(0, 0, 0, .4);
    z-index: -1
}

.menu-marsk-enter-active {
    animation: fadeIn .5s
}

.menu-marsk-leave-active {
    animation: fadeIn .5s reverse
}

.site-header {
    z-index: 9
}

@media screen and (min-width: 1240px) {
    .index_provider_bottomTitle p {
        font-family: "DINs" !important;
        font-weight: 600;
        font-size: 90px
    }

    .header-page-box :hover .header-box {
        background: #fff !important
    }

    .header-page-box .header-box {
        background: #fff;
        box-shadow: 0px 4px 30px rgba(0, 0, 0, .08)
    }

    .header-page-box .header-box .page-width {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        display: flex;
        align-items: center
    }

    .header-page-box .header-box .page-width .logo-box {
        display: flex;
        align-items: center
    }

    .header-page-box .header-box .page-width .menu-box {
        margin-left: 50px;
        flex: 1;
        display: flex;
        align-items: center;
        gap: 50px
    }

    .header-page-box .header-box .page-width .menu-box>div {
        text-align: center
    }

    .header-page-box .header-box .page-width .icon-box {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 24px
    }

    .header-page-box .header-box .page-width .icon-box .site-nav__icons {
        margin: 0 -12px
    }

    .header-page-box .header-box .page-width .icon-box .site-nav__icons .site-nav__link {
        padding: 0;
        margin: 0 12px
    }

    .header-page-box .header-box .page-width .icon-box .search,
    .header-page-box .header-box .page-width .icon-box .i-18 {
        cursor: pointer;
        display: flex;
        align-items: center
    }

    .header-page-box .header-box .page-width .icon-box .search svg *,
    .header-page-box .header-box .page-width .icon-box .i-18 svg * {
        transition: all .4s
    }

    .header-page-box .header-box .m-pc-width .logo-box {
        flex: 1
    }

    .header-page-box .header-box .m-pc-width .icon-box {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 24px
    }

    .header-page-box .header-box .m-pc-width .icon-box .site-nav__icons {
        margin: 0 -12px
    }

    .header-page-box .header-box .m-pc-width .icon-box .site-nav__icons .site-nav__link {
        padding: 0;
        margin: 0 12px
    }

    .header-page-box .header-box .m-pc-width .icon-box .search,
    .header-page-box .header-box .m-pc-width .icon-box .i-18 {
        display: flex;
        align-items: center
    }

    .header-page-box .menu-index-box {
        box-shadow: 0px 20px 30px 1px rgba(0, 0, 0, .08);
        z-index: 9;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .header-page-box .menu-index-box .inner-box {
        width: 100%;
        min-height: 200px;
        overflow: hidden;
        background-color: #fff
    }

    .header-page-box .i18n-index-box {
        z-index: 9;
        top: 0;
        right: 0;
        overflow: hidden;
        display: flex;
        justify-content: flex-end
    }

    .header-page-box .i18n-index-box .inner-box {
        height: 100%;
        width: 194px;
        background-color: #fff;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, .078)
    }

    .header-page-box .i18n-index-box .inner-box .item {
        display: flex;
        gap: 10px;
        font-weight: 700;
        align-items: center;
        width: 100%;
        padding: 15px 0;
        padding-left: 15px;
        border-bottom: 1px solid var(--line-color);
        color: #333;
        font-size: var(--niu-p2);
        line-height: 1.28
    }

    .header-page-box .i18n-index-box .inner-box .item span {
        cursor: pointer
    }

    .header-page-box .i18n-index-box .inner-box .active span {
        color: var(--niu-red)
    }

    .header-page-box .menu-enter-active {
        animation: bounce-in-a .4s;
        /* animation-timing-function: cubic-bezier(0.23, 0.71, 0.58, 1) */
        animation-timing-function: cubic-bezier(0,0,0,1)
    }
    .header-page-box .menu-enter-active .header-menu-collections{
        animation: menuListFadeIn .4s;
        animation-timing-function: cubic-bezier(0.48, -0.02, 0.93, 0.7)
    }
    .header-page-box .menu-enter-active .inner-box {
        animation: bounce-in .4s
    }

    .header-page-box .menu-leave-active {
        animation: bounce-in-a .4s;
        animation-timing-function: cubic-bezier(0.23, 0.71, 0.58, 1)
    }
    .header-page-box .menu-leave-active .header-menu-collections{
        animation: menuListFadeIn .4s reverse;
        animation-timing-function: cubic-bezier(0.48, -0.02, 0.93, 0.7)
    }
    
    .header-page-box .menu-leave-active .inner-box {
        animation: bounce-in .4s reverse
    }

    .header-page-box .search-enter-active {
        animation: search-in .5s
    }

    .header-page-box .search-leave-active {
        animation: search-in .5s reverse
    }
    @keyframes menuListFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
    
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes bounce-in-a {
        0% {
            transform: translateY(0%);
            opacity: 1;
            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0)
        }

        90% {
            transform: translateY(0%);
            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0);
            opacity: 1
        }

        100% {
            transform: translateY(0%);
            box-shadow: 0px 4px 30px rgba(0, 0, 0, .08);
            opacity: 1
        }
    }

    @keyframes search-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @keyframes bounce-in {
        0% {
            transform: translateY(-100%);
            opacity: 1
        }

        100% {
            transform: translateY(0%);
            opacity: 1
        }
    }

    .site-header {
        padding: 0 !important;
        background: rgba(0, 0, 0, 0);
        border: none
    }
   
}

@media screen and (max-width: 1240px) {
    .index_collection .grid--no-gutters .grid__item {
        padding-right: 0 !important
    }

    .indexProductSwiper_Bottom_rightBox .grid__item {
        padding-left: initial !important;
        margin-bottom: 30px !important;
        padding-right: 0 !important
    }

    .index_provider_bottomBox {
        margin-top: -210px !important
    }

    .video_mid_cha {
        display: none !important
    }

    .js-drawer-clos .pc-hide {
        display: inline-flex;
        align-items: center;
        border-bottom: 1px solid #dadada
    }

    .js-drawer-open .main-content:after {
        background-color: rgba(255, 255, 255, 0);
      z-index:1;
    }

    .drawer--right {
        width: 100%;
        max-width: 100%;
        top: var(--header-height-top)
    }

    #StickyHeaderWrap {
        height: auto !important
    }

    .site-header--stuck {
        position: relative
    }

    .site-header--stuck {
        transform: none
    }

    @keyframes headerShow {
        0% {
            position: fixed;
            top: 0px;
            left: 0;
            opacity: 1
        }

        49% {
            position: fixed;
            top: 0px;
            left: 0;
            opacity: 0
        }

        50% {
            position: fixed;
            top: 48px;
            left: 0;
            opacity: 0
        }

        100% {
            position: fixed;
            top: 48px;
            left: 0;
            opacity: 1
        }
    }

    /* .show-header {
        transition: none;
        opacity: 1;
        -webkit-transform: translateZ(0);
        position: fixed;
        top: 48px;
        left: 0;
        width: 100%;
        transform: translateZ(0);
        animation: headerShow .6s
    } */

    /* .show-headers {
        opacity: 1;
        -webkit-transform: translateZ(0);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateZ(0)
    } */

    /* .hide-header {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transform: translate3d(0, -100%, 0)
    } */

    /* .header-active {
        opacity: 1;
        -webkit-transform: translateZ(0);
        top: 0;
        left: 0;
        width: 100%;
        transform: translateZ(0)
    } */

    @keyframes fadeInDowns {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            transform: translate3d(0, -100%, 0);
            background-color: #fff
        }

        to {
            opacity: 1;
            -webkit-transform: translateZ(0);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            transform: translateZ(0);
            background-color: #fff
        }
    }

    .header-page-box {
        z-index: 9;
        height: var(--box-height);
        display: flex;
        flex-direction: column;
        transition: all .5s
    }

    .header-page-box .header-box {
        transition: all .3s
    }

    .header-page-box .header-box .page-width {
        box-shadow: 0px 4px 30px rgba(0, 0, 0, .08);
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: flex;
        align-items: center;
        gap: 30px
    }

    .header-page-box .header-box .m-pc-width .logo-box {
        flex: 1;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .header-page-box .header-box .m-pc-width .menu-box {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center
    }

    .header-page-box .header-box .m-pc-width .menu-box svg {
        width: 18px;
        height: 18px
    }

    .header-page-box .header-box .m-pc-width .icon-box {
        display: flex;
        justify-content: right;
        align-items: center;
        gap: 24px
    }

    .header-page-box .header-box .m-pc-width .icon-box .site-nav__icons {
        margin: 0 -12px
    }

    .header-page-box .header-box .m-pc-width .icon-box .site-nav__icons .site-nav__link {
        padding: 0;
        margin: 0 12px
    }

    .header-page-box .header-box .m-pc-width .icon-box .search,
    .header-page-box .header-box .m-pc-width .icon-box .i-18 {
        display: flex;
        align-items: center
    }

    .header-page-box .menu-index-box {
        box-shadow: 0px 4px 30px rgba(0, 0, 0, .08);
        z-index: 9;
        top: 0;
        left: 0;
        overflow: hidden
    }

    .header-page-box .menu-index-box .inner-box {
        width: 100%;
        min-height: 200px;
        overflow: hidden;
        background-color: #fff
    }

    .header-page-box .menu-enter-active .container {
        animation: bounce-in .5s
    }

    .header-page-box .menu-leave-active .container {
        animation: bounce-in .5s reverse
    }

    .header-page-box .search-enter-active {
        animation: search-in .5s
    }

    .header-page-box .search-leave-active {
        animation: search-in .5s reverse
    }

    @keyframes bounce-in-a {
        0% {
            transform: translateY(0%);
            opacity: 1;
            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0)
        }

        90% {
            transform: translateY(0%);
            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0);
            opacity: 1
        }

        100% {
            transform: translateY(0%);
            box-shadow: 0px 4px 30px rgba(0, 0, 0, .08);
            opacity: 1
        }
    }

    @keyframes search-in {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @keyframes bounce-in {
        0% {
            transform: translateY(-100%);
            opacity: 0
        }

        100% {
            transform: translateY(0%);
            opacity: 1
        }
    }

    .site-header {
        padding: 0 !important;
        background: rgba(0, 0, 0, 0)
    }
}

@media screen and (max-width: 768px) {
    @keyframes headerShow {
        0% {
            position: fixed;
            top: 0px;
            left: 0;
            opacity: 1
        }

        49% {
            position: fixed;
            top: 0px;
            left: 0;
            opacity: 0
        }

        50% {
            position: fixed;
            top: 56px;
            left: 0;
            opacity: 0
        }

        100% {
            position: fixed;
            top: 56px;
            left: 0;
            opacity: 1
        }
    }

    /* .show-header {
        transition: none;
        opacity: 1;
        -webkit-transform: translateZ(0);
        position: fixed;
        top: 56px;
        left: 0;
        width: 100%;
        transform: translateZ(0);
        animation: headerShow .6s
    } */
  
}

.index_provider_bottomTitle p {
    font-family: "DINs" !important;
    font-weight: 600
}

/*# sourceMappingURL=header-page.min.css.map */