:root {
    --gap: 2.5vw;
}
@media (min-width: 768px) {
    :root {
        --vertical-gap: 4.6875vw;
    }
    .home-banner .banner-text {
        max-width: 45.2083vw;
    }
}
.sticky {
    position: sticky;
    top: 59px;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: #f5f5f5;
}
.banner-text {
    position: relative;
    z-index: 1;
    color: #fff;
}
.banner-text .btn {
    --border-bg-color: #fff;
    min-width: 26.0417vw;
}
.home-banner:hover .banner-text .btn {
    --btn-bg-color: #fff;
    --btn-text-color: #000;
    --border-bg-color: #000;
}
.banner-text h2 {
    font-size: 15.5208vw;
}
.banner-text h4 {
    font-size: 5.4167vw;
    margin: 1.5625vw 0;
}
.banner-item {
    position: relative;
}
.home-banner {
    margin-bottom: 30px;
}


/* recommend-products */
.recommend-products ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    /* -webkit-flex-wrap: wrap;
    flex-wrap: wrap; */
    gap: 3.125vw;
}
.recommend-products li {
    width: 50%;
}

.recommend-products li:last-child {
    position: relative;
}
.recommend-products li:last-child .ani-imgbox {
    height: 100%;
    position: absolute;
    left: -2.7%;
    width: 100%;
}
.recommend-products li:last-child .ani-imgbox img {
    width: auto;
    height: 100%;
}
.recommend-about .btn-border {
    margin-top: 12px;
}

.home-block {
    margin-bottom: 2.9167vw;
}
.home-block:last-child {
    margin-bottom: 0;
}





.home-banner .swiper {
    height: 100%;
}
.home-banner .swiper-slide  a {
    display: block;
    height: 100%;
}
.home-banner img,
.home-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-banner .banner-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.home-banner .banner-text .subtitle {
    font-size: 20px;
    font-weight: 500;
}
.home-banner .banner-text .title {
    font-size: 5vw;
    font-weight: 500;
    line-height: 1.2;
}
.home-page .learn-more {
    font-size: 20px;
    font-weight: 500;
    display: inline-block;
    background: #BCBCBC;
    color: #0B352A;
    border-radius: 12px 12px 0px 0px;
    line-height: 42px;
    padding: 0 10px;
    margin-top: 24px;
}
.home-banner .banner-text .learn-more:hover {
    background: #fff;
}
.home-banner .banner-text {
    position: absolute;
    color: #F1EDE7;
    pointer-events: none;
}
.home-banner:hover .banner-text {
    color: #fff;
}
.home-banner .content-left .banner-text {
    left: var(--gap);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    
}

.home-banner .content-right .banner-text {
    right: var(--gap);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.home-banner .content-bottom .banner-text {
    text-align: center;
    bottom: var(--vertical-gap);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.home-banner .content-top .banner-text {
    text-align: center;
    top: var(--vertical-gap);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.home-banner .banner-text.text-light {
    color: #fff;
}
.home-banner:hover .navigation-btn {
    display: block;
}
.home-banner .banner-text .title,
.home-banner .banner-text .subtitle,
.home-banner .banner-text .learn-more {
    opacity: 0;
    transform: translateY(-60px);
}
.home-banner .swiper-slide-active .banner-text .title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s linear,transform 0.6s cubic-bezier(.215,.61,.355,1);
}
.home-banner .swiper-slide-active .banner-text .subtitle {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s linear .1s,transform 0.6s cubic-bezier(.215,.61,.355,1) .1s;
}
.home-banner .swiper-slide-active .banner-text .learn-more {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s linear .2s,transform 0.6s cubic-bezier(.215,.61,.355,1) .2s;
}

.footer {
    margin-top: 0;
}
/* @media (max-width: 1200px) {
    .sticky {
        height: calc(100vh - 52px);
        top: 51px;
    }
    .footer {
        margin-top: -20px;
    }
} */
@media (max-width: 828px) {
    :root {
        --gap: 24px;
    }
   
    .home-banner .banner-text .subtitle {
        font-size: 14px;
    }
    .home-banner .banner-text .title {
        font-size: 17.067vw;
        margin: 6px 0;
    }
    .home-banner .banner-text {
        max-width: calc(100% - 48px);
        width: 100%;
    }
    .home-banner {
        margin: 0 calc(-1 * var(--top-bar));
        margin-top: var(--header-padding-gap);
    }
    .banner-text h2 {
        font-size: 28.0374vw;
    }
    .banner-text h4 {
        font-size: 9.8131vw;
        margin: 3.125vw 0;
    }
    .banner-text .btn {
        width: 90%;
        height: 11.6822vw;
        font-size: 7.4766vw;
    }
    /* 在手机端文案统一顶部居中 */
    .home-banner .content-left .banner-text,
    .home-banner .content-right .banner-text,
    .home-banner .content-top .banner-text {
        top: 11.215vw;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        right: auto;
        /* bottom: var(--vertical-gap); */
        text-align: center;
    }

    .recommend-products ul {
        flex-direction: column;
    }
    .recommend-products li:last-child .ani-imgbox {
        position: initial;
        width: auto;
        
    }
    .recommend-products li:last-child .ani-imgbox img {
        width: 100%;
        height: auto;
    }
    .recommend-products li {
        width: 100%;
    }
    .recommend-products .ani-imgbox.mobile {
        margin: 0 calc(-1 * var(--top-bar));
    }

    .recommend-about .btn-border {
        margin-top: 11.6822vw;
    }
   
   
}