body{
    background-color: #101010;
}
.progress_container{
    position: relative;
    width: 100%;
    height: 4000px;
    background-color: #040b1a;
}
/* .top_gradient{
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to top, #10101000,#101010);
    pointer-events: none;
}
.bottom_gradient{
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to bottom, #10101000,#101010);
    pointer-events: none;
} */
.scene_container{
    /* position: sticky;
    position: -webkit-sticky; */
    width: 100%;
    height: 100vh;
    /* top: 0;
    left: 0; */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* user-select: none; */
    /* will-change: transform; */
}
.progress_container #webgl_container{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.html_swiper_container{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 4000px;
}
.html_swiper_container::before{
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to top, transparent,#101010);
}
.html_swiper_container::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to bottom, transparent,#101010);
}
.html_swiper_container .dom_item{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(100%);
}
.html_swiper_container .header_title{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* display: inline-table; */
    left: auto;
    right: auto;
    top: 50vh;
    transform: translateY(-50%);
    font-size: 6.25vw;
    font-weight: bold;
    background: linear-gradient(180deg, rgba(255,255,255,1),rgba(255,255,255,0.7), rgba(255,255,255,0.4));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    /* will-change: transform; */
}
.html_swiper_container .module_2{
    width: 33%;
    top: 30%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* will-change: transform; */
}
.html_swiper_container .module_2 .p_1{
    font-size: 3.125vw;
    font-weight: bold;
    margin-bottom: 4.1vw;
}
.html_swiper_container .module_2 .p_2{
    font-size: 0.84vw;
    line-height: 2;
}
.html_swiper_container .module_2 .special_effects_more{
    margin-top: 2.865vw;
    background-color: #3a3c42;
    border-top: 0.5px solid rgba(255,255,255,0.5);
    border-left: 0.5px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
}
.html_swiper_container .module_3{
    top: auto;
    bottom: 50vh;
    transform: translateY(50%);
    width: 83%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* will-change: transform; */
}
.html_swiper_container .module_3 .p_1_title{
    /* position: absolute; */
    /* top: -15vw; */
    font-size: 3.125vw;
    font-weight: bold;
    margin-bottom: 7.5vw;
    /* will-change: transform; */
}
.html_swiper_container .module_3 .service_step_container{
    display: flex;
}
.html_swiper_container .module_3 .service_step_container .service_item{
    width: 18.9vw;
    border-radius: 1vw;
    border: 1px solid rgba(255,255,255,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4vw 0;
    margin: 0 1vw;
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
    /* will-change: transform; */
}
.html_swiper_container .module_3 .service_step_container .service_item .index_icon{
    position: absolute;
    top: 1vw;
    left: 1vw;
    border: 2px solid #fff;
    border-radius: 0.2vw;
    width: 1.3vw;
    height: 1.3vw;
    font-size: 0.84vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.html_swiper_container .module_3 .service_step_container .service_item .index_icon::before{
    content: "";
    position: absolute;
    display: block;
    top: 0%;
    left: 0%;
    width: 70%;
    height: 70%;
    border-radius: 0.3vw 0 0 0;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    transform: translate(-0.4vw,-0.4vw);
    transition: all .5s;
}
.html_swiper_container .module_3 .service_step_container .service_item:hover .index_icon::before{
    width: 90%;
    height: 90%;
}

.html_swiper_container .module_3 .service_step_container .service_item .step_icon{
    position: relative;
    width: 10vw;
    height: 10vw;
    /* background-color: #040513;
    box-shadow: 0px 0px 20px 20px #040513; */
}
.html_swiper_container .module_3 .service_step_container .service_item .step_icon img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.html_swiper_container .module_3 .service_step_container .service_item .step_icon .video_1{
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}
.html_swiper_container .module_3 .service_step_container .service_item .step_text .p_1{
    font-size: 1.667vw;
    line-height: 1.5;
}
.footer_swiper_container{
    position: relative;
    width: 100%;
    height: 3500px;
    background-color: #101010;
    overflow: hidden;
    /* background: url('../static/image/service/noise_bg.webp'); */
    /* background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0; */
}
/* 移除原来的那一大段，改成精准控制 */
.offset_container {
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0); 
    will-change: transform; /* 只保留 transform，删除 top，且只给真正位移的父容器加 */
}
.total_offset_container {
    will-change: transform;
}
.footer_swiper_container .main_animate_container{
    /* position: sticky; */
    /* top: 0; */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_swiper_container .main_animate_container::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10vh;
    background: linear-gradient(to bottom, transparent ,#101010);
}
.footer_swiper_container .main_animate_container .total_offset_container{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    will-change: transform;
}
.footer_swiper_container .main_animate_container .total_offset_container .module_item{
    will-change: transform;
    backface-visibility: hidden; /* 强制开启 GPU 加速 */
}
.footer_swiper_container .main_animate_container .offset_container{
    position: absolute;
    top: 0; /* 新增这一行 */
    width: 87.7%;
    /* height: 38vw; */
    height: 0;
    /* will-change: transform; */
}
.footer_swiper_container .main_animate_container .offset_container .module_item{
    position: relative;
    width: 100%;
    height: 100%;
}
.footer_swiper_container .main_animate_container .offset_container .module_item_2{
    position: relative;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.5);
    box-sizing: border-box;
    padding: 4.583vw 0 5.5vw;
    border-radius: 1.5vw;
    display: flex;
    justify-content: center;
    background-color: #101010;
    /* background: linear-gradient(to bottom, transparent ,#101010 18%); */
    /* backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); */
}
.footer_swiper_container .main_animate_container .offset_container .module_item::after{
    position: absolute;
    z-index: -1;
    content: "";
    transform: translateY(80%);
    width: 100%;
    height: 100%;
    bottom: 0;
    background-color: #101010;
}
.footer_swiper_container .main_animate_container .module_item .width_limit{
    position: relative;
    z-index: 1;
    width: 92%;
}
.footer_swiper_container .main_animate_container .module_item .up_main{
    font-weight: bold;
    font-size: 4.2vw;
    border-bottom: 1px solid #6f7074;
    padding-bottom: 1vw;
}
.footer_swiper_container .main_animate_container .module_item .cn_title{
    margin-right: 2.4vw;
}
.footer_swiper_container .main_animate_container .module_item .down_main{
    display: flex;
    justify-content: space-between;
    margin-top: 2.3vw;
    font-size: 0.84vw;
}
.footer_swiper_container .main_animate_container .module_item .list_text_container{
    width: 41%;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}
.footer_swiper_container .main_animate_container .module_item .list_text_container_en{
    font-size: 0.729vw;
    font-weight: 400;
}
.footer_swiper_container .main_animate_container .module_item .list_text_container .item_index{
    display: flex;
    flex-direction: column;
    margin-top: 3.5vw;
    font-weight: bold;
}
.footer_swiper_container .main_animate_container .module_item .list_text_container_en .item_index{
    font-weight: 400;
}
.footer_swiper_container .main_animate_container .module_item .list_text_container .item_index .entry{
    display: flex;
    align-items: center;
    margin-bottom: 0.7vw;
}
.footer_swiper_container .main_animate_container .module_item .list_text_container .number_icon{
    width: 0.8vw;
    height: 0.8vw;
    display: inline-block;
    border-radius: 50%;
    background-color: #fff;
    color: #18181a;
    font-size: 12px;
    line-height: 1;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1vw;
    flex-shrink: 0;
}
.btn_container{
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101010;
    color: #fff;
    padding-top: 5vw;
    padding-bottom: 11.458vw;
}
.btn_container .width_limit{
    width: 81.25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn_container .item{
    text-align: center;
    border-radius: 100vw;
    border: 1px solid #113e79;
    box-sizing: border-box;
    padding: 2.708vw 3.333vw;
    transition: all .5s;
    cursor: pointer;
}
.btn_container .item:hover{
    background-color: #182434;
    border: 1px solid #134b94;
    transform: translateY(-10%);
}
.btn_container .item .item_title{
    font-weight: bold;
    font-size: 1.667vw;
    transition: all .5s;
}
.btn_container .item:hover .item_title{
    transform: translateY(-10%);
}
.btn_container .item .item_text{
    font-size: 0.94vw;
    margin-top: 1vw;
}
.last_container{
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
}
.last_container .bg_img{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 1s;
}
.last_container:hover .bg_img{
    scale: 1.05;
}
.last_container .fliter_container{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: contrast(0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    padding: 5.99vw 0 4.8vw;
    transition: all 1s;
}
.last_container:hover .fliter_container{
    backdrop-filter: contrast(1);
}
.last_container .fliter_container .title_cn{
    font-size: 2.5vw;
    font-weight: bold;
    transition: all 1s;
}
.last_container:hover .fliter_container .title_cn{
    transform: translateY(-10%);
}
.last_container .fliter_container .title_en{
    font-size: 1.25vw;
    margin-top: 1vw;
    letter-spacing: 0.1em;
    transition: all 1s;
}
.last_container:hover .fliter_container .title_en{
    letter-spacing: 0.2em;
}
.last_container .fliter_container .text_main{
    width: 18%;
    text-align: center;
    margin: 3.646vw 0;
    font-size: 0.84vw;
    opacity: 0.8;
    line-height: 1.5;
    transition: all 1s;
}
/* .last_container:hover .fliter_container .text_main{
    transform: translateY(10%);
} */

.last_container .special_effects_more{
    font-size: 0.84vw;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    background: rgba(255,255,255,0.2);
    box-shadow: 0px 5px 9px 0px rgba(53,53,53,0.22), 1px 1px 0px 0px rgba(255,255,255,0.35);
}
.last_container .special_effects_more .jciconfont{
    font-size: 0.85vw;
    margin-left: 1vw;
}
.last_container .special_effects_more .style_label{
    padding: 0.4vw 1.8vw;
}


.footer_container_width{
    position: relative;
    padding-top: 13.438vw;
    background-color: #1a1a1a;
    background-image: url('../static/image/catalog/footer_noise.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}
.footer_container{
    position: relative;
    z-index: 2;
}
.footer_container .footer_up .footer_up_left>.p_1{
    color: #918c8a !important;
}
.footer_container .footer_up .footer_up_left>.p_2{
    color: #918c8a !important;
}
.footer_container .footer_up .footer_up_left>.p_3{
    color: #918c8a !important;
}
.footer_container .logo_social_media_platform .jcicon-logo{
    color: #918c8a !important;
}
.footer_container .footer_up .footer_up_right .list_title{
    color: #918c8a !important;
}
.footer_container .footer_up .footer_up_right .list_item{
    color: #918c8a !important;
}
.footer_container .logo_social_media_platform .social_media_platform_container .jciconfont{
    color: #918c8a !important;
}
.footer_container .footer_down .other_info a{
    color: #918c8a !important;
}

@media (max-width:996px) {
    .progress_container {
        height: 2500px !important; /* 原为 4000px，可以根据需要调整，2000px能大幅减短滑动路程 */
    }
    
    .html_swiper_container {
        height: 2500px !important; 
    }
    .html_swiper_container .header_title{
        font-size: 16vw;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .html_swiper_container .module_2{
        width: 76%;
        top: 25%;
    }
    .html_swiper_container .module_2 .p_1{
        font-size: 7.692vw;
        margin-bottom: 18.718vw;
    }
    .html_swiper_container .module_2 .p_2{
        font-size: 3.59vw;
    }
    .html_swiper_container .module_2 .special_effects_more{
        margin-top: 16.154vw;
    }
    .html_swiper_container .special_effects_more .style_label{
        padding: 1.7vw 7vw;
    }
    .html_swiper_container .module_3{
        width: 87%;
    }
    .html_swiper_container .module_3 .p_1_title{
        font-size: 7.7vw;
        margin-bottom: 26.154vw;
    }
    .html_swiper_container .module_3 .service_step_container{
        position: relative;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .html_swiper_container .module_3 .service_step_container .service_item{
        width: 47%;
        margin: 2.65vw 0;
        box-sizing: border-box;
        border-radius: 3vw;
        padding: 8vw 0;
    }
    .html_swiper_container .module_3 .service_step_container .service_item .step_icon{
        width: 17.949vw;
        height: 17.949vw;
        margin-bottom: 3vw;
    }
    .html_swiper_container .module_3 .service_step_container .service_item .step_text .p_1{
        font-size: 3.6vw;
    }
    .html_swiper_container .module_3 .service_step_container .service_item .index_icon{
        width: 4.5vw;
        height: 4.5vw;
        border-radius: 1.5vw;
        top: 3.6vw;
        left: 3.6vw;
        font-size: 3vw;
    }
    .html_swiper_container .module_3 .service_step_container .service_item .index_icon::before{
        transform: translate(-1.4vw, -1.4vw);
        border-radius: 1.5vw 0 0 0;
    }
    .footer_swiper_container .main_animate_container .offset_container .module_item_2{
        padding: 15.385vw 0;
        border-radius: 3vw;
    }
    .footer_swiper_container .main_animate_container .module_item .up_main{
        display: flex;
        flex-direction: column;
        padding-bottom: 5.5vw;
    }
    .footer_swiper_container .main_animate_container .module_item .cn_title{
        font-size: 8.2vw;
        margin: 0 0 2vw 0;
    }
    .footer_swiper_container .main_animate_container .module_item .en_title{
        font-size: 6vw;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container{
        width: 100%;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container_en{
        display: none;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container{
        font-size: 3.6vw;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container .number_icon{
        font-size: 14px;
        width: 4vw;
        height: 4vw;
        margin-right: 5.1vw;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container .item_index{
        margin-top: 10.256vw;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container .item_index .entry{
        margin-bottom: 3vw;
    }
    .footer_swiper_container .main_animate_container .module_item .down_main{
        margin-top: 10.9vw;
    }
    .footer_swiper_container .main_animate_container .module_item .list_text_container .sub_title{
        font-size: 3.59vw;
    }
    .footer_swiper_container .main_animate_container .module_item .width_limit{
        width: 84%;
    }
    .btn_container .width_limit{
        width: 70%;
        flex-direction: column;
    }
    .btn_container .item{
        width: 100%;
        padding: 6.41vw 0;
        margin-bottom: 5.1vw;
    }
    .btn_container .item .item_title{
        font-size: 4.615vw;
    }
    .btn_container .item:hover .item_title{
        transform: translateY(0) !important;
    }
    .btn_container .item .item_text{
        font-size: 3.6vw;
    }
    .last_container .fliter_container{
        padding: 22.564vw 0 20vw;
    }
    .last_container .fliter_container .title_cn{
        font-size: 7.692vw;
        text-align: center;
    }
    .last_container:hover .fliter_container .title_cn{
        transform: translateY(0) !important;
    }
    .last_container .fliter_container .title_en{
        font-size: 3.6vw;
        margin-top: 2vw;
    }
    .last_container:hover .fliter_container .title_en{
        letter-spacing: 0.1em;
    }
    .last_container .fliter_container .text_main{
        width: 73%;
        font-size: 3.6vw;
        margin: 9.744vw 0;
    }
    .last_container .special_effects_more .style_label{
        padding: 2vw 7vw;
    }
    .last_container .special_effects_more .style_label span{
        font-size: 3.85vw;
    }
    .last_container .special_effects_more .jciconfont{
        margin-left: 5.5vw;
    }

    /* 1. 让容器高度自适应，不再是固定大高度 */
    .footer_swiper_container {
        height: auto !important;
        padding-bottom: 20vw; /* 留点底部间距 */
    }

    /* 2. 取消固定高度，让内容正常流式排列 */
    .footer_swiper_container .main_animate_container {
        height: auto !important;
        display: block !important; /* 取消 flex 居中 */
        position: relative !important;
    }

    /* 3. 关键：将绝对定位改为相对定位，让卡片一个接一个排队 */
    .footer_swiper_container .main_animate_container .offset_container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 90% !important; /* 调整宽度 */
        margin: 0 auto 8vw !important; /* 卡片之间的间距 */
        height: auto !important;
        transform: none !important; /* 清除 JS 可能产生的位移 */
    }

    /* 4. 重置内部容器的位移 */
    .footer_swiper_container .main_animate_container .total_offset_container,
    .footer_swiper_container .main_animate_container .offset_container .module_item {
        transform: none !important;
        position: relative !important;
    }

    /* 5. 隐藏手机端不需要的背景遮罩或装饰 */
    .footer_swiper_container .main_animate_container::after {
        display: none;
    }

}