/* ==========================================
   全局基础样式
========================================== */
* {
    letter-spacing: 3px;
}
/* 修改全局基础样式 */
html, body {
    background: #000;
    overflow-x: hidden; 
    /* overflow-y: auto; 不要写死，让浏览器自行处理 */
    
    /* 移除以下两行，或者仅在非移动端使用 */
    /* overscroll-behavior-y: none; */
    /* touch-action: pan-y; */
    
    -webkit-overflow-scrolling: touch; 
}

/* 👇 新增：全局隐藏 Webkit 内核（Chrome/Safari/微信等）的原生滚动条 */
::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent;
}

/* ==========================================
   视频弹框遮罩层 (Products 2 & 3)
========================================== */
.video_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}
.video_modal {
    position: relative;
    width: 80%;
    max-width: 80%;
    background: #000;
    line-height: 0;
    border-radius: 12px;
    overflow: hidden;
}
.video_modal video {
    width: 100%;
    height: auto;
    display: block;
}
.close_video {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    transition: transform 0.3s;
}
.close_video:hover {
    transform: rotate(90deg);
}

/* ==========================================
   Header 首屏视频/轮播区域
========================================== */
.header_video_container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #000;
    overflow: hidden;
}
.header_video_container .header_video {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(0%);
}
.header_video_container .header_video_mobile {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateY(0%);
    display: none;
}

/* Header 轮播图模块 (Products 2) */
.header_video_container .swiper {
    position: relative;
    width: 100%;
    height: 100%;
    color: #fff;
}
.header_video_container .swiper .bg_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header_video_container .swiper .bg_img_mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}
.swiper-pagination {
    bottom: 3.5vw !important;
}
.swiper-pagination-bullet {
    background: transparent !important;
    border: 1px solid #ffffff !important;
    opacity: 1 !important;
    width: 0.47vw !important; 
    height: 0.47vw !important;
    box-sizing: border-box;
    transition: all 0.3s ease;
    margin: 0 1vw !important;
}
.swiper-pagination-bullet-active {
    background: #ffffff !important;
}

/* Header 文本定位 (Products 2 & 3) */
.header_video_container .swiper .pos_text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 87.5%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.header_video_container .pos_text {
    position: absolute;
    z-index: 1;
    color: #fff;
    left: 9.219vw;
    bottom: 9.219vw;
}
.header_video_container .pos_text .en_title {
    /* font-weight: bold; */
    font-size: 2vw; /* P2 base, P3 will override if needed or adapt */
    color: #bebebe;
}
.header_video_container .pos_text .en_title:nth-child(1 of .en_title) {
    margin-top: 1.5vw;
}
.header_video_container .pos_text .cn_title {
    font-size: 4.3vw;
    font-weight: bold;
    /* margin-top: 1vw; */
}
.header_video_container .pos_text .color_2{
    color: #bebebe !important;
}
/* ==========================================
   纯文本内容区域 (Text Container)
========================================== */
.text_container {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100vh;
    background-color: #0d0d0d;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.text_container::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    transform: translateY(-98%);
    background: linear-gradient(to bottom, transparent, #0d0d0d);
    width: 100%;
    height: 10vw;
}
.text_container::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    transform: translateY(98%);
    background: linear-gradient(to top, transparent, #0d0d0d);
    width: 100%;
    height: 5vw;
}
.text_container .p_1 {
    width: 27%;
    font-size: 1.5vw;
    font-weight: bold;
    color: #898989;
    line-height: 2;
    text-align: center;
}
.text_container .p_1 span {
    color: #898989;
    display: inline;
    transition: color 0.1s linear;
}
.text_container.height_100vh{
    position: relative;
    /* width: 100%;
    height: 100vh; */
}
/* 播放按钮容器复用类 */
.play_video_container {
    display: flex;
    width: 60%;
}
/* 播放按钮容器复用类 */
.text_container .play_video_container {
    display: flex;
    justify-content: center;
}
.play_video {
    position: absolute;
    color: #fff;
    margin-top: 5vw;
    border: 1px solid #646464;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: 0.84vw;
    cursor: pointer;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    will-change: color, transform;
}
.play_video .jciconfont,
.special_effects_more .jciconfont {
    margin-left: 1.4vw;
    /* color: #646464; */
    font-size: 0.9vw;
}
.play_video_container .special_effects_more {
    position: absolute;
    color: #fff;
    margin-top: 5vw;
    line-height: 1;
    font-size: 0.84vw;
    border: 1px solid #646464;
    border-radius: 9999px;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0);
    will-change: color, transform;
    background: none;
}
.play_video_container .special_effects_more .style_label {
    padding: 0.6vw 1.3vw 0.6vw 1.667vw;
}

/* ==========================================
   动画与场景进度容器 (Progress Container)
========================================== */
.progress_container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 200vh; /* Base height, P1 overrides inline or via JS if needed */
    background-color: #0d0d0d;
    touch-action: pan-y;
}
.progress_container .scene_container {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #0d0d0d;
}
.progress_container .scene_container::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    scale: 1.005;
    background: linear-gradient(to bottom, transparent 90%, #000 100%);
}
.progress_container .scene_container .image_sequence {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.progress_container .scene_container .pos_1{
    top: 13.021vw;
    left: 9.375vw
}
.progress_container .scene_container .pos_2{
    top: auto;
    bottom: 3.958vw;
    left: 9.375vw
}
/* ==========================================
   产品视频展示区 (Product Video)
========================================== */
.product_video {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    margin: 5vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product_video::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #000 0%, transparent 15%, transparent 85%, #000 100%);
}
.product_video .video {
    width: 100%;
    height: 99%;
    object-fit: cover;
}
.product_video .video_mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

/* 通用文本定位系统 (.text_pos) */
.text_pos {
    position: absolute;
    z-index: 1;
    /* 接入电脑端变量。后面的值是默认值，防错用 */
    left: var(--pos-x, 9.3vw); 
    top: var(--pos-y, 11.7vw);
}
.pos_1 {
    color: #fff;
    /* top: 11.7vw;
    left: 9.3vw; */
}
.pos_2 {
    color: #B5B5B5;
    font-size: 1vw;
    line-height: 1.6;
    /* left: 9.3vw;
    bottom: 4.6vw; */
}
.pos_1 .cn_title {
    font-size: 3.125vw;
    text-shadow: 17px 32px 62px rgba(13,15,15,0.17);
    line-height: 2;
    font-weight: bold;
}
.pos_1 .en_title {
    font-size: 1.25vw;
    text-shadow: 0px 0px 20px rgba(13,15,15,0.09);
    line-height: 1.6;
    color: #ccc;
}
.pos_2 .cn_title {
    width: 59%;
}

/* 适配 Products 3 的特殊定位变体 */
.progress_container .pos_1 .en_title { width: 61%; }
.product_video .pos_1 .en_title { width: 40%; }
.product_video .pos_1 .en_title_auto { width:auto; }
.product_video .pos_1 .en_title_60 { width: 60%; }
.product_video .pos_1 .en_title_40 { width: 40%; }
.product_video_2 .pos_1 { left: 15.573vw; top: 13.958vw; }
.product_video_2 .pos_1 .en_title { width: auto; }


/* ==========================================
   数据面板区 (Data Container)
========================================== */
.data_container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.data_container .bg_img_container,
.data_container #webgl_container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.data_container .bg_img_container img {
    position: absolute;
    width: 110%;
    height: 100%;
    object-fit: cover;
}
.parallax_svg {
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translateZ(0); 
    contain: paint;
}
.data_container .bg_img_container::before,
.data_container #webgl_container::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    scale: 1.005;
    background: linear-gradient(to bottom, #000 0%, transparent 15%, transparent 85%, #0d0d0d 100%);
}

#video {
    position: absolute;
    top: 0; left: 0;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.data_container .data_list {
    position: absolute;
    z-index: 1;
    width: 49.063%;
    height: 93%;
    border-radius: 2vw;
    right: 5%;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.data_container .data_list::before,
.data_container .data_list::after {
    position: absolute;
    content: "";
    width: 0.4vw;
    height: 0.4vw;
    top: 1.6vw;
    border-radius: 50%;
    background-color: #fff;
}
.data_container .data_list::before { left: 1.6vw; }
.data_container .data_list::after { right: 1.6vw; }

.data_container .data_list .up_list {
    position: relative;
    width: 90%;
    height: 22%;
    display: flex;
    align-items: flex-end;
    color: #fff;
    font-size: 1.875vw;
}
.data_container .data_list .down_list,
.data_container .data_list .down_list_2 {
    position: relative;
    width: 90%;
    height: 65%;
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-wrap: wrap;
}
.data_container .data_list .down_list {
    flex-direction: column;
    justify-content: center;
}
.data_container .data_list .down_list_2 {
    flex-direction: column;
    justify-content: flex-start;
}
.data_container .data_list .down_list .item {
    width: 100%;
    height: 45%;
}
.data_container .data_list .down_list_2 .item {
    width: 45%;
    min-height: 34%;
}
.data_container .data_list .down_list_2 .item:nth-child(3) { margin-top: 5vw; }

.data_container .data_list .item::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #605C5F;
}
.data_container .data_list .down_list .item::after { margin-top: 2vw; }
.data_container .data_list .down_list_2 .item::after { margin: 1vw 0; }

.data_container .data_list .item .title {
    font-size: 2.5vw;
    color: #fff;
    margin-bottom: 1vw;
}
.data_container .data_list .item .text {
    font-size: 1.25vw;
    color: #B5B5B5;
    line-height: 1.6;
}

/* ==========================================
   图文滑动区 (Swiper Progress Container)
========================================== */
.swiper_progress_container {
    position: relative;
    width: 100%;
    height: 100vh;
    /* touch-action: pan-y; */
}
.swiper_progress_container .main_container {
    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, #0d0d0d 80%, #000);
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper_progress_container .main_container .image_list_container {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper_progress_container .main_container .image_list_container .img_item {
    position: absolute;
    border-radius: 1vw;
    width: 80%;
    height: 30vw;
    object-fit: cover;
    box-shadow: 0 10px 30px #0d0d0d; 
}
.swiper_progress_container .main_container .image_text_container {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.swiper_progress_container .main_container .image_text_container .text_main {
    width: 60%;
    font-weight: bold;
    font-size: 1.2vw;
    line-height: 1.75;
    color: #898989;
}
.text_main span {
    color: #898989; 
    display: inline-block; 
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0); 
    will-change: color, transform; 
}
/* #split-text div, .text_main span {
    color: #898989; 
} */
/* ==========================================
   购买联系引导区 (Buy Container)
========================================== */
.buy_container {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.buy_container::before {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #000 40%, transparent 50%);
}
.buy_container .buy_video {
    position: absolute;
    width: 100%;
    object-fit: cover;
    bottom: 0;
}
.buy_container .buy_image {
    position: absolute;
    width: 100%;
    object-fit: cover;
    bottom: 0;
}
.buy_container .buy_title {
    position: absolute;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding-top: 11.875vw;
    box-sizing: border-box;
}
.buy_container .buy_title .p_1 {
    font-weight: bold;
    font-size: 1.875vw;
    line-height: 1.6;
}
.buy_container .buy_title .p_2 {
    width: 27vw;
    margin-top: 2.656vw;
    margin-bottom: 2.7vw;
    color: #7D7D7D;
    font-size: 1.25vw;
}
.buy_container .buy_title .special_effects_more {
    margin-top: 2.344vw;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, 0);
}

/* ==========================================
   页脚区块 (Footer Container)
========================================== */
.footer_container_width {
    position: relative;
    z-index: 1;
    padding-top: 8.9vw;
    background-color: #0d0d0d;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
}
.footer_container_width::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    transform: translateY(-98%);
    background: linear-gradient(to bottom, transparent, #0d0d0d);
    width: 100%;
    height: 10vw;
}
.footer_container {
    position: relative;
    z-index: 2;
}
.footer_container .footer_up .footer_up_left > .p_1,
.footer_container .footer_up .footer_up_left > .p_2,
.footer_container .footer_up .footer_up_left > .p_3,
.footer_container .logo_social_media_platform .jcicon-logo,
.footer_container .footer_up .footer_up_right .list_title,
.footer_container .footer_up .footer_up_right .list_item,
.footer_container .logo_social_media_platform .social_media_platform_container .jciconfont,
.footer_container .footer_down .other_info a {
    color: #918c8a !important;
}

/* ==========================================
   GSAP 文本拆分与动画性能优化
========================================== */
.text_pos .cn_title div, 
.text_pos .en_title div,
.pos_text div {
    display: inline-block !important;
    will-change: filter, transform, opacity;
    backface-visibility: hidden;
    text-shadow: 1px 1px 3px #555;
}
/* 初始隐藏防止文字闪烁 (配合 JS 动画) */
.header_video_container .pos_text .en_title, 
.header_video_container .pos_text .cn_title,
.text_pos .cn_title, 
.text_pos .en_title {
    opacity: 0;
    visibility: hidden;
}


/* ==========================================
   响应式布局 (Max Width: 996px)
========================================== */
@media (max-width: 996px) {
    /* 强制释放可能被 GSAP 锁死的容器 */
    #smooth-wrapper, 
    #smooth-content,
    body, 
    html {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        position: relative !important;
        /* 允许系统原生滚动，解决 Intervention 报错 */
        touch-action: auto !important; 
    }
    #smooth-wrapper {
        overflow: visible !important;
        height: auto !important;
    }
    #smooth-content {
        height: auto !important;
    }
    .header_video_container .header_video {
        display: none;
    }
    .header_video_container .header_video_mobile {
        display: block;
    }
    
    /* Header Container */
    .header_video_container .swiper .pos_text {
        width: 90%;
        height: 82%;
        justify-content: flex-end;
    }
    .header_video_container .swiper .pos_text .en_title,
    .header_video_container .pos_text .en_title {
        font-size: 4.7vw;
        line-height: 1.6;
    }
    .header_video_container .pos_text .en_title:first-child{
        margin-top: 4.5vw;
    }
    .header_video_container .swiper .pos_text .cn_title,
    .header_video_container .pos_text .cn_title {
        font-size: 12vw;
        margin-top: 0;
    }
    .header_video_container .pos_text {
        left: 3.846vw;
        bottom: 34.615vw;
    }
    .header_video_container .swiper .bg_img {
        display: none;
    }
    .header_video_container .swiper .bg_img_mobile {
        display: inline-block;
    }
    /* Swiper Pagination */scene_container
    .swiper-pagination { bottom: 8vw !important; }
    .swiper-pagination-bullet { width: 1.5vw !important; height: 1.5vw !important; margin: 0 4vw !important; }

    /* Text Container */
    .text_container .p_1 { width: 55%; font-size: 4vw; }
    .text_container .play_video_container { width: 90%; }
    .text_container .play_video_container .play_video { font-size: 4vw; margin-top: 10vw; }
    .play_video_container .special_effects_more .style_label { padding: 2vw 3vw 2vw 5vw; }
    .text_container .play_video_container .play_video .jciconfont { font-size: 4vw; }
    .play_video .jciconfont, .special_effects_more .jciconfont{
        font-size: 14px;
    }
    /* Swiper Progress Container */
    .swiper_progress_container .main_container { flex-direction: column; justify-content: space-between; }
    .swiper_progress_container .main_container .image_list_container { width: 100%; height: 55%; align-items: flex-end; }
    .swiper_progress_container .main_container .image_text_container { width: 100%; height: 45%; }
    .swiper_progress_container .main_container .image_list_container .img_item { width: 90%; height: 68vw; border-radius: 3vw; }
    .swiper_progress_container .main_container .image_text_container .text_main { width: 90%; font-size: 4vw; }
    .swiper_progress_container .main_container .image_text_container .play_video_container { width: 90%; }
    .swiper_progress_container .main_container .image_text_container .play_video_container .play_video { font-size: 4vw; }
    .swiper_progress_container .main_container .image_text_container .play_video_container .play_video .jciconfont { font-size: 4vw; }
    .text_pos {
        /* 使用移动端变量，并给定默认值 */
        left: var(--pos-m-x, 4.615vw) !important;
        top: var(--pos-m-y, 36.41vw) !important;
    }
    /* Product Video & Progress Container */
    .product_video .pos_1,
    .progress_container .pos_1 {
        /* left: 4.615vw;
        top: 36.41vw; */
    }
    .product_video .pos_1 .cn_title,
    .progress_container .pos_1 .cn_title { font-size: 9.231vw; }
    .product_video .pos_1 .en_title,
    .progress_container .pos_1 .en_title { width: 82%; font-size: 4.1vw; }
    .product_video .video {
        display: none;
    }
    .product_video .video_mobile {
        display: block;
    }
    
    .product_video .pos_2,
    .progress_container .pos_2 {
        /* left: 4.615vw;
        bottom: 19.231vw; */
        font-size: 4.1vw;
    }
    .product_video .pos_2 .cn_title { width: 85%; }
    .progress_container .pos_2 .cn_title { width: 65%; color: #fff; }
    .progress_container .scene_container .pos_1{
        top: 19.231vw !important;
        left: 5.128vw !important;
    }
    .progress_container .scene_container .pos_2{
        top: auto !important;
        bottom: 23.077vw !important;
        left: 5.128vw !important;
    }
    /* Data Container */
    .data_container .data_list { width: 91%; height: auto; right: auto; }
    .data_container .data_list .up_list { width: 82%; font-size: 4.615vw; font-weight: bold; margin: 14.103vw 0 11.538vw; }
    .data_container .data_list .up_list p { width: 60%; }
    
    .data_container .data_list .down_list_2,
    .data_container .data_list .down_list { width: 82%; flex-wrap: nowrap; height: auto; }
    
    .data_container .data_list .down_list_2 .item,
    .data_container .data_list .down_list .item { width: 100%; min-height: auto; }
    
    .data_container .data_list .item .title { font-size: 8.2vw; color: #E8E6E8; }
    .data_container .data_list .item .text { font-size: 3.59vw; }
    
    .data_container .data_list .down_list_2 .item::after,
    .data_container .data_list .down_list .item::after { margin: 4vw 0 7.436vw; }
    .data_container .data_list .down_list_2 .item:nth-child(3) { margin: 0; }
    
    .data_container .data_list::before,
    .data_container .data_list::after { width: 1.282vw; height: 1.282vw; top: 4.103vw; }
    .data_container .data_list::before { left: 4.103vw; }
    .data_container .data_list::after { right: 4.103vw; }

    /* Buy Container */
    .buy_container { height: 67.8vh; }
    .buy_container::before { background: linear-gradient(to bottom, #000 60%, transparent 70%); }
    .buy_container .buy_title { padding-top: 40vw; }
    .buy_container .buy_title .p_1 { font-size: 6.154vw; }
    .buy_container .buy_title .p_2 { width: 95%; margin: 6vw auto 3vw; font-size: 5vw; }
    .buy_container .buy_title .special_effects_more { margin-top: 10vw; }
    .special_effects_more .style_label { padding: 2vw 4vw; }
}