/* 基础重置与布局 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    /* 避免拖动干扰，不影响文字选择但提升滑动体验 */
}

body {
    overflow-x: hidden;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f5f7fa;
}


/* 容器最大宽度限制，内容居中，依然使用 rem 确保缩放时相对合理 */
.container {
    width: 90%;
    max-width: 95rem;
    margin: 0 auto;
}


.nav-links li:nth-child(2) .MenuTitle{
    color: #409eff !important;
    /*font-size: 1.6rem !important;*/
}


/* wrap 作为滚动容器，PC端启用强制高度，移动端由内容撑开自由滚动 */
#wrap {
    position: relative;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* main 用于PC端动画位移，移动端不做定位变换，保持文档流 */
#main {
    position: relative;
    width: 100%;
}

/* 页面通用样式 */
.page {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
}

/* 不同页面背景色区分 (美观) */
#page1 {
    height: 100vh;
}

/* 播放器容器 - 卡片风格 */
.video-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: transform 0.2s ease;
}


/* 视频元素: 完全隐藏原生控件，并保证铺满容器 */
video {
    width: 100%;
    height: 100vh;
    display: block;
    object-fit: fill;
    cursor: pointer;  /* 让用户知道可以点击（虽然我们点击不是暂停，鼠标悬停才显示按钮）但也可保留默认行为，我们通过js控制暂停，所以不需要双击默认事件干扰。但为了体验，不阻止click冒泡到video？我们控件会独立响应，而点击视频区域也可以自定义暂停？需求未明确，但常见是点击视频暂停？不过需求只说“鼠标经过显示声音和暂停控件”，为了简洁，只通过控件控制，避免干扰。但如果用户点击视频区域意外暂停也无伤大雅？不，为了符合预期：只有控件按钮控制暂停/播放以及声音开关，视频区域不额外干预。但也可以保留，但避免与控件逻辑冲突，我就让视频本身不监听额外点击，完全依赖控件按钮。更好符合需求“显示声音控件和暂停控件”。 */
}

/* 自定义控件层: 初始透明且不可见，鼠标悬停容器时显示，并且平滑过渡 */
.custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px 18px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    opacity: 0;
    visibility: hidden;
    z-index: 10;
}

/* 鼠标悬停在视频容器上时显示控件 */
.video-container:hover .custom-controls {
    opacity: 1;
    visibility: visible;
}

.control-btn {
    background: rgba(30, 30, 40, 0.85);
    backdrop-filter: blur(8px);
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    color: white;
    font-size: 22px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
}

.control-btn:hover {
    background: #2c7da0;
    transform: scale(1.08);
    border-color: rgba(255,255,255,0.6);
}

.control-btn:active {
    transform: scale(0.96);
}

.volume-slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.6);
    padding: 0 12px;
    border-radius: 40px;
    height: 44px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
}

.volume-icon {
    font-size: 22px;
    color: white;
    cursor: pointer;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    transition: background 0.2s;
}

.volume-icon:hover {
    background: rgba(255,255,255,0.2);
}

input[type="range"] {
    width: 90px;
    height: 4px;
    -webkit-appearance: none;
    background: rgba(255,255,255,0.3);
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}

input[type="range"]:focus {
    outline: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: 0.1s;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #409eff;
}


@media (max-width: 48rem) {
    .custom-controls {
        padding: 12px 16px;
        gap: 12px;
    }
    .control-btn {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }
    .volume-slider-container {
        height: 38px;
        padding: 0 8px;
    }
    input[type="range"] {
        width: 70px;
    }
    video {
        width: 100%;
        height: auto;
        display: block;
        cursor: pointer;
    }
}






#page2 {
    height: 100vh;
    background-color: #fff;
    overflow: hidden;
}

.about-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 90%;
    max-width: 95rem;
    margin: 0 auto;
}

.about-header {
    margin: 20px 0;
    font-size: 2.5rem;
    color: #333;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-100vh);
    opacity: 0;
}

.about-header.animate {
    transition-delay: .3s;
    transform: translateY(0);
    opacity: 1;
}



.about-content {
    font-size: 1.25rem;
    margin-top: 20px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-100vh);
    opacity: 0;
}

.about-content.animate {
    transition-delay: .5s;
    transform: translateY(0);
    opacity: 1;
}


/* 标签栏 - 与设计稿完全一致但增强交互反馈 */
.about-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-bottom: 2px solid #dfdfdf;
    height: auto;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(100%);
    opacity: 0;
}

.about-tabs.animate {
    transition-delay: .7s;
    transform: translateX(0);
    opacity: 1;
}

.tab-item {
    position: relative;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    color: #2c3e66;
    letter-spacing: 0.3px;
    user-select: none;
    margin-bottom: 0.2rem;
    border: 1px solid transparent;
    margin-right: 40px;
    font-size: 1.875rem;
    height: 100%;
    padding: 1.5rem 0 1.5rem 0;
}

.tab-item:hover {
    color: #1e3a8a;
    transform: translateY(-2px);
}

.tab-item.active {
    color: #0075C2;
    transform: scale(1.02);
}

.tab-item.active::before {
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    width: 100% !important;
    height: 2px;
    background-color: #0075C2;
    color: #0075C2;
}



/* 轮播区域 */
.corporate-card {
    width: 100%;
    overflow: hidden;
    transition: all 0.3s;
}

/* 让 wrapper 也使用 flex 布局，占满剩余空间 */
.swiper-container-wrapper {
    padding: 2rem 0 2.2rem 0;
    flex: 1;
    /* 关键：占据剩余空间 */
    min-height: 0;
    /* 关键：允许 flex 子元素溢出滚动/收缩 */
    display: flex;
    flex-direction: column;
}

/* swiper 容器占满 wrapper 的全部高度 */
.swiper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

/* 可选：让 slide 内容也正确适应高度 */
.swiper-slide {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 100%;
}

.swiper-item {
    display: flex;
    align-items: center;
}



.slide-icon {
    position: relative;
    width: 50%;
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
    opacity: 0;
}



.slide-icon.animate {
    transition-delay: .3s;
    transform: translateY(0);
    opacity: 1;
}

.slide-right {
    position: absolute;
    /* 添加这行，作为绝对定位的参考点 */
    right: 6px;
    z-index: 2;
    width: 55%;
    min-height: 80%;
    background-color: #fff;
    padding: 40px;
    box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.15);
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
    opacity: 0;
}

.slide-right.animate {
    transition-delay: .7s;
    transform: translateX(0);
    opacity: 1;
}

.slide-sub{
    font-size: 1.875rem;
}


.slide-line {
    margin-top: 10px;
    width: 60px;
    height: 4px;
    background-color: #0075c2;
}

.slide-title {
    font-size: 1.25rem;
    padding: 20px 0;
    color: #0075c2;
}

.slide-desc {
    color: #666666;
}

.swiper-button {
    position: absolute;
    bottom: 0;
    right: 20%;
    display: flex;
    gap: 10px;
    width: 130px;
}



.swiper-button-next,
.swiper-button-prev {
    color: #fff !important;
    background: #0075c2;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2px);
    transition: all 0.2s;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
    font-size: 1.25rem !important;
    font-weight: 700;
}












#page3 {
    height: 100vh;
    overflow: hidden;
}


.scerntic-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 90%;
    max-width: 95rem;
    margin: 0 auto;
}

.scerntic-header {
    margin-top: 20px;
    font-size: 2.5rem;
    color: #333;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-100vh);
    opacity: 0;
}

.scerntic-header.animate {
    transition-delay: .3s;
    transform: translateY(0);
    opacity: 1;
}

/* 让 wrapper 占满剩余高度 */
.swiper-container-wrapper {
    flex: 1;
    /* 关键：占满剩余空间 */
    min-height: 0;
    /* 防止 flex 子项溢出 */
    display: flex;
    flex-direction: column;
}

/* Swiper 容器占满 wrapper */
.scernticSwiper {
    flex: 1;
    height: 100%;
}

/* 可选：让 slide 内容也自适应 */
.swiper-slide {
    height: auto;
}

.swiper-scerntic {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    width: 100%;
}




.scerntic-left {
    position: absolute;
    padding: 40px;
    width: 55%;
    min-height: 50%;
    background-color: #fff;
    box-shadow: 0px 0px 12px 1px rgba(0, 0, 0, 0.15);
    z-index: 2;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
    opacity: 0;
}



.scerntic-left.animate {
    transition-delay: .7s;
    transform: translateX(0);
    opacity: 1;
}


.scerntic-sub {
    font-size: 1.875rem;
    margin-bottom: 30px;
}


.scerntic-icon {
    position: absolute;
    right: 0;
    width: 50%;
    z-index: 1;
    margin-left: 50%;
    height: 80%;
    transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
    opacity: 0;
}

.scerntic-icon.animate {
    transition-delay: .3s;
    transform: translateX(0);
    opacity: 1;
}


.swiper-button-scerntic {
    position: absolute;
    bottom: 0;
    left: 20px;
    display: flex;
    gap: 10px;
    width: 130px;
}



.swiper-button-next,
.swiper-button-prev {
    color: #fff !important;
    background: #0075c2;
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2px);
    transition: all 0.2s;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative !important;
    font-size: 1.25rem !important;
    font-weight: 700;
}




/* 发展史 */
#page4 {
    height: 100vh;
    overflow: hidden;
    background-image: url('../images/history-bgc.png');/*自定义高清背景图.-·风景·*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.development-history-header {
    margin-top: 20px;
    font-size: 2.5rem;
    color: #333;
    font-weight: normal;
    transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateX(-100%);
    opacity: 0;
}


.development-history-header.animate {
    transition-delay: 1s;
    transform: translateX(0);
    opacity: 1;
}


/* 主卡片容器 */
.timeline-container {
    display: flex;
    flex-direction: column;
    width: 90%;
    height: 100%;
    max-width: 95rem;
    margin: 0 auto;
    backdrop-filter: blur(2px);
    transition: all 0.2s;
}



/* 时间轴滚动区 ———— 彻底隐藏滚动条，但保留滚动功能 (支持鼠标拖拽/滚轮) */
.timeline-scroll-wrapper {
    position: relative;
    flex-shrink: 0;
    position: relative;
    margin-top: 2.5rem;
    padding: 0.75rem 0;
    height: 110px;
    width: 100%;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-100%);
    opacity: 0;
    margin-bottom: 20px;
}

.timeline-scroll-wrapper.animate {
    transition-delay: 1s;
    transform: translateY(0);
    opacity: 1;
}




.timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    white-space: nowrap;
    margin: 0 44px;
    display: flex;
    flex-wrap: nowrap;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 70px;
}

/* 隐藏 Chrome/Safari 滚动条 */
.timeline-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.timeline-scroll:active {
    cursor: grabbing;
}

/* 年份按钮样式：上方小圆点 + 下方年份 */
.year-btn {
    position: relative;
    flex: 0 0 auto;
    width: 20%;
    min-width: 70px; /* 设置最小宽度，避免太窄 */
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    /* transition: all 0.2s ease; */
    cursor: pointer;
    z-index: 10; /* 确保按钮在最上层 */
}

/* 或者更简单的解决方案：让整个按钮区域都可点击，包括伪元素 */
.year-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background-color: #4197d0;
    z-index: 1;
    pointer-events: none; /* 让横线不干扰点击 */
}

/* 小圆点样式 */
.year-dot {
    position: relative;
    z-index: 3;
    width: 12px;
    height: 12px;
    background: #4197d0;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.year-text {
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 1.25rem;
    color: #666666;
    padding: 4px 12px;
    border-radius: 40px;
    transition: all 0.2s;
    letter-spacing: 0.5px;
    /* 移除 pointer-events: none; 让文字也可以点击 */
    pointer-events: auto; /* 或者直接删除这行 */
    white-space: nowrap; /* 防止文字换行 */
    cursor: pointer; /* 添加手型光标 */
    z-index: 11; /* 确保文字也在上层 */
}


.year-btn:hover .year-dot {
    background: #4197d0;
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(79, 155, 194, 0.2);
    color: fff;
}

.year-btn:hover .year-text {
    color: #1a5d7e;
}

.year-btn.active .year-dot {
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 3px rgba(31, 99, 146, 0.3);
    color: #4197d0;
}

.year-btn.active .year-text {
    color: #4197d0;
    font-size: 1.2rem;
}


/* 自定义 swiper 导航按钮 */
.custom-swiper-controls {
    position: absolute;
    left: 0;
    top: -16px;
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    margin-top: 1.8rem;
    width: 100%;
    z-index: 4;
}



/* 内容轮播区域 - Swiper 定制 */
.carousel-section {
    flex: 1;
    margin-top: 1rem;
    backdrop-filter: blur(12px);
    padding: 1.8rem 0;
    transition: all 0.2s;
}



/* Swiper 容器覆盖样式 */
.swiper {
    width: 100%;
    padding-bottom: 0.5rem;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.history-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transition: all 0.2s;
}

.history-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 45%;
    height: 100%;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
    opacity: 0
}

.history-left.animate {
    transition-delay: .7s;
    transform: translateY(0);
    opacity: 1;
}

.history-year {
    font-size: 1.875rem;
    margin-bottom: 1.875rem;
    color: #1f6392;
}

.history-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f3b4f;
    border-left: 4px solid #1f6392;
    padding-left: 1rem;
    margin: 0.75rem 0 1rem 0;
}

.history-desc {
    font-size: 1rem;
    line-height: 1.5;
    color: #2c3e4e;
    margin-bottom: 1rem;
}

.history-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 50%;
    height: 100%;
    transition: all .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(100vh);
    opacity: 0
}

.history-right.animate {
    transition-delay: .3s;
    transform: translateY(0);
    opacity: 1;
}

/* 错位背景 */
.history-right::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 80%;
    background: #1f6392;
    z-index: 0;
}

.history-icon {
    position: relative;
    z-index: 1;
    width: 90%;
    height: 90%;
    transition: all 0.3s;
    transform: translate(-5%, -5%);
}




.swiper-nav-btn {
    background: #4197d0;
    border: none;
    width: 44px;
    height: 44px;
    font-size: 1.8rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.swiper-nav-btn:hover {
    background: #cfe3f0;
    transform: scale(1.05);
    color: #0b4f6c;
}

/* 自定义分页器 dots */
.swiper-pagination-custom {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1rem;
}

.custom-dot {
    width: 8px;
    height: 8px;
    background: #bfd7e5;
    border-radius: 50%;
    transition: all 0.2s;
    cursor: pointer;
}

.custom-dot.active-custom-dot {
    width: 24px;
    background: #1f6392;
    border-radius: 6px;
}

.footer-note {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.8rem;
    color: #6c8ea0;
}





/* 满屏合作伙伴区块：视口高度100vh，不滚动，出场动画作用于内部元素 */
.partners-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px 0;
}



.partners-container {
    display: flex;
    flex-direction: column;
    width: 90%;
}

/* 标题区域 + 入场动画 (fade-up) */
.section-header {
    text-align: center;
    /*margin-bottom: 3.5rem;*/
    /*margin-top: 20px;*/
    font-size: 2.5rem;
    color: #333;
    transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(-50vh);
    opacity: 0
}

.section-header.animate {
    transition-delay: .3s;
    transform: translateY(0);
    opacity: 1;
}


.partners-grid {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.partner-item {
    padding: 1.5rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: default;
    opacity: 0;
}

.partner-item.animate {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}


/* Logo 图片容器 */
.logo-wrapper {
    width: 360px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: 0.2s;
    box-shadow: 0px 0px 18px 1px rgba(92, 124, 180, 0.24);
}


.logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(0.1);
    transition: filter 0.3s, transform 0.2s;
}

.logo-wrapper:hover {
    filter: grayscale(0);
    transform: scale(1.02);
}

/* 入场动画定义 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(35px);
    }

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

#page5 {
    height: 100vh;
    background-image:url('../images/cooperation-bgc.png');
    /*自定义高清背景图- 风景*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

#page6 {
    background: #fff3e0;
    color: #bf360c;
}



/* 移动端自由滚动专用: 当视口宽度 <= 48rem (768px) 时，恢复原生滚动，禁用main的top变换，wrap自动滚动 */
@media (max-width: 48rem) {
    body {
        overflow: auto;
    }

    #wrap {
        overflow-y: auto !important;
        height: auto !important;
        position: relative;
    }

    #main {
        position: relative !important;
        top: 0 !important;
        transition: none !important;
        transform: none !important;
    }

    .page {
        height: auto !important;
        margin: 0;
    }

    #page1 {
        height: auto;
    }

    #videoPlayer {
        height: auto;
    }

    .custom-poster {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding-top: 60px;
    }

    .custom-poster .lk-log {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .custom-poster .lk-title {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .custom-poster .lk-described {
        margin-bottom: 10px;
    }

    .play-btn-large {
        width: 40px;
        height: 40px;
    }




    #page2 {
        height: auto;
    }

    .about-box {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 95rem;
        margin: 0 auto;
    }

    .about-header {
        transform: translateY(0);
        opacity: 1;
        margin: 20px 0;
    }

    .about-content {
        transform: translateY(0);
        opacity: 1;
    }

    .about-content {
        margin-top: 0;
    }

    .about-tabs {
        display: flex;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(0);
        opacity: 1;
    }

    .about-tabs {
        display: flex;
        justify-content: space-between !important;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(0);
        opacity: 1;
    }

    .tab-item {
        position: relative;
        font-size: 16px !important;
        padding: 10px !important;
        margin: 0 !important;
    }

    .swiper {
        height: auto !important;
    }

    .swiper-slide {
        height: auto !important;
    }

    .swiper-item {
        display: flex;
        flex-direction: column !important;
        height: auto !important;
    }

    .slide-icon {
        position: static !important;
        width: 100%;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateY(0);
        opacity: 1;
    }

    .slide-right {
        position: static !important;
        z-index: 1;
        width: 100%;
        height: auto !important;
        transform: translateY(0);
        opacity: 1;
    }

    .slide-desc {
        padding-bottom: 20px;
    }

    .swiper-button {
        display: flex;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        gap: 10px;
        width: 130px;
        height: 40px;
    }




    #page3 {
        height: auto !important;
        background-color: #fff;
    }

    .scerntic-header {
        transform: translateY(0);
        opacity: 1;
    }

    .swiper-scerntic {
        display: flex;
        flex-direction: column;
    }

    .scerntic-left {
        position: static !important;
        width: 100%;
        transform: translateY(0);
        opacity: 1;
        padding: 20px;
        padding-bottom: 50px;
    }

    .swiper-button-scerntic {
        position: absolute;
        left: 50%;
        bottom: 0 !important;
        transform: translateX(-50%);
        width: 130px;
        height: 40px;
    }

    .scerntic-icon {
        position: static !important;
        order: -1 !important;
        width: 100%;
        transform: translateY(0);
        opacity: 1;
        margin-left: 0;
    }


    #page4 {
        height: auto !important;
    }

    .development-history-header {
        transform: translateX(0);
        opacity: 1;
    }

    /* 时间轴滚动区 ———— 彻底隐藏滚动条，但保留滚动功能 (支持鼠标拖拽/滚轮) */
    .timeline-scroll-wrapper {
        transform: translateY(0);
        opacity: 1;
    }

    .timeline-scroll-wrapper::before {
        top: 32px;
    }

    .history-card {
        display: flex;
        flex-direction: column;
    }

    .history-left {
        width: 100%;
        height: auto;
        transform: translateY(0);
        opacity: 1
    }

    .history-right {
        width: 100%;
        height: auto;
        transform: translateY(0);
        opacity: 1;
    }




    #page5 {
        height: auto;
    }

    .partner-item {
        padding: 1.5rem 0.8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: default;
        opacity: 1;
    }

    .partners-grid {
        display: flex;
        margin-bottom: 20px;
    }

    .partner-item {
        width: 49%;
    }

    /* Logo 图片容器 */
    .logo-wrapper {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        transition: 0.2s;
        box-shadow: 0px 0px 18px 1px rgba(92, 124, 180, 0.24);
    }


    .partner-item {
        padding: 10px 0;
    }

    /* 标题区域 + 入场动画 (fade-up) */
    .section-header {
        transform: translateY(0);
        opacity: 1;
        margin-bottom: 20px;
    }


}


/* 移动端自由滚动专用: 当视口宽度 <= 48rem (768px) 时，恢复原生滚动，禁用main的top变换，wrap自动滚动 */
@media (max-width: 30rem) {
    body {
        overflow: auto;
    }

    #wrap {
        overflow-y: auto !important;
        height: auto !important;
        position: relative;
    }

    #main {
        position: relative !important;
        top: 0 !important;
        transition: none !important;
        transform: none !important;
    }

    .page {
        height: auto !important;
        margin: 0;
    }

    #page1 {
        height: auto;
    }

    #videoPlayer {
        height: auto;
    }

    .custom-poster {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding-top: 60px;
    }

    .custom-poster .lk-log {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .custom-poster .lk-title {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .custom-poster .lk-described {
        margin-bottom: 10px;
    }

    .play-btn-large {
        width: 40px;
        height: 40px;
    }




    #page2 {
        height: auto;
    }

    .about-box {
        display: flex;
        flex-direction: column;
        width: 90%;
        max-width: 95rem;
        margin: 0 auto;
    }

    .about-header {
        transform: translateY(0);
        opacity: 1;
        margin: 20px 0;
    }

    .about-content {
        transform: translateY(0);
        opacity: 1;
    }

    .about-content {
        margin-top: 0;
    }

    .about-tabs {
        display: flex;
        justify-content: space-between !important;
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        transform: translateX(0);
        opacity: 1;
    }

    .tab-item {
        position: relative;
        font-size: 16px !important;
        padding: 10px !important;
        margin: 0 !important;
    }
}

#page6 {
    height: 360px !important;
    background-color: #1a2e50;
}

@media (max-width: 48rem) {
    #page6 {
        height: auto !important;
        background-color: #1a2e50;
    }
}

@media (max-width: 30rem) {
    #page6 {
        height: auto !important;
        background-color: #1a2e50;
    }
}