/* 大屏基础样式（你原有的，仅作对照） */
.page {
    height: 100vh; /* 每个页面占满视口高度 */
    overflow: hidden; /* 隐藏溢出内容 */
    position: relative; /* 为绝对定位提供上下文 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5vw; /* 使用视口宽度单位 */
    color: white;
    padding: 2vw; /* 使用视口宽度单位 */
    background-size: cover; /* 背景图覆盖 */
    background-position: center; /* 背景图居中 */
}

/* 小屏适配（≤800px） */
@media (max-width: 800px) {
    /* 容器基础布局：保持原有逻辑，强化溢出隐藏 */
    .pages-wrapper {
        width: 100vw !important;
        min-height: 100vh !important;
        margin-top: 50px !important; /* 避开导航栏 */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important; /* 允许纵向滚动，避免内容截断 */
    }

    /* 覆盖大屏.page的100vh，统一所有.pageone为16:9 */
    .pageone,
    .page { /* 同时命中.pageone和大屏的.page，强制覆盖height */
        height: calc(100vw * 9 / 16) !important; /* 16:9核心，覆盖100vh */
        max-height: calc(100vh - 50px) !important; /* 最大高度不超屏幕（减导航栏） */
        width: 100vw !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important; /* 覆盖大屏的2vw padding */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: scale(calc(100vw / 1920)) !important; /* 适配设计稿1920px */
        transform-origin: top center !important; /* 避免垂直偏移 */
        overflow: hidden !important;
        background-size: cover !important; /* 继承大屏背景逻辑 */
        background-position: center !important;
        font-size: unset !important; /* 清空大屏的5vw字体，单独给page1定义 */
    }

    /* page1 专属：清空所有继承样式，强制16:9+文字适配 */
    .page1 {
        all: unset !important; /* 彻底清空大屏/父级继承的所有样式 */
        /* 重新定义核心样式 */
        display: flex !important;
        flex-direction: column !important; /* 文字上下排列 */
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100vw !important;
        height: calc(100vw * 9 / 16) !important; /* 严格16:9 */
        max-height: calc(100vh - 50px) !important;
        margin: 0 !important;
        padding: 0 2vw !important; /* 仅保留左右内边距，避免文字贴边 */
        position: relative !important;
        overflow: hidden !important;
        /* 背景图（替换为你的实际路径） */
        background-image: url('../img/cpzx/首页.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        /* 缩放适配 */
        transform: scale(calc(100vw / 1920)) !important;
        transform-origin: top center !important;
    }

    /* page1 文字自适应（彻底摆脱大屏字体影响） */
    .page1 p {
        margin: 0 0 1vw 0 !important; /* 仅保留与p1的间距 */
        padding: 0 !important;
        color: #fff !important;
        font-weight: bold !important;
        font-size: 7vw !important; /* 视口宽度7%，自动适配 */
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .page1 p1 {
        margin: 0 !important;
        padding: 0 !important;
        color: #fff !important;
        font-size: 2.5vw !important; /* 视口宽度2.5%，自动适配 */
        line-height: 1.2 !important;
        text-align: center !important;
        display: block !important; /* 块级显示，排版更稳 */
    }

    /* 其他page（page2/page3/page4）小屏适配（可选，保证统一16:9） */
    .page2, .page3, .page4 {
        height: calc(100vw * 9 / 16) !important;
        max-height: calc(100vh - 50px) !important;
    }
}












/* ========== 移动端适配（≤800px）- 强制三图水平对齐 ========== */
@media (max-width: 800px) {
    /* 1. 彻底重置page2的缩放，避免缩放导致的错位 */
    .pageone.page2,
    .page2 {
        width: 100vw !important;
        height: calc(100vw * 9 / 16) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        transform: none !important; /* 完全取消缩放，避免错位 */
        transform-origin: center center !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important; /* 整体垂直居中 */
        justify-content: space-between !important; /* 三容器均匀分布 */
    }

    /* 2. 统一三个containersw容器样式（核心：强制等宽+完全居中） */
    .page2 .containersw {
        flex: 1 !important;
        width: 33.333333% !important; /* 严格三等分 */
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important; /* 容器内垂直居中 */
        justify-content: center !important; /* 容器内水平居中 */
    }

    /* 3. 统一所有图片容器样式（消除偏移） */
    .page2 .img-hzimg,
    .page2 .img-hzimg3,
    .page2 .img-hzimg11 {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. 统一图片样式（强制等比+无偏移） */
    .page2 .img-hzimg img,
    .page2 .img-hzimg3 img,
    .page2 .img-hzimg11 img {
        max-width: 80% !important; /* 统一图片最大宽度，避免尺寸差异 */
        max-height: 70% !important; /* 统一图片最大高度 */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        display: block !important;
    }

    /* 5. 第二个容器：cpzx.png 浮在 zx2.png 上方（修复居中+尺寸偏差） */
    .page2 .img-cpzx {
        position: absolute !important; /* 绝对定位实现悬浮 */
        top: 50% !important;
        left: 50% !important;
        /* 核心修复：水平+垂直完全居中，如需偏上可微调第二个值（如-55%） */
        transform: translate(-50%, -50%) !important;
        max-width: 70% !important;
        max-height: 35% !important;
        /* 关键：让容器宽度贴合图片，不再超出 */
        width: fit-content !important;
        height: fit-content !important;
        /* 重置所有冗余边距，避免宽度偏差 */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        /* 确保宽度计算不包含padding/border */
        box-sizing: border-box !important;
        /* 兜底：强制容器内图片居中 */
        text-align: center !important;
        z-index: 2 !important; /* 确保在zx2上方 */
    }

    /* 强化：让内部图片完全贴合容器，无多余空白 */
    .page2 .img-cpzx img {
        display: block !important; /* 块级元素消除行内对齐偏差 */
        width: 100% !important;    /* 图片宽度铺满容器 */
        height: auto !important;   /* 保持图片比例 */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    /* 5. 新增：隐藏.img-cpzx元素（核心需求） */
    .page2 .img-cpzx {
        display: none !important; /* 强制隐藏 */
    }
}













/* ========== 移动端适配（≤800px）- 强制三图水平对齐 ========== */
@media (max-width: 800px) {
    /* 1. 彻底重置page2的缩放，避免缩放导致的错位 */
    .pageone.page3,
    .page3 {
        width: 100vw !important;
        height: calc(100vw * 9 / 16) !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-sizing: border-box !important;
        transform: none !important; /* 完全取消缩放，避免错位 */
        transform-origin: center center !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important; /* 整体垂直居中 */
        justify-content: space-between !important; /* 三容器均匀分布 */
    }

    /* 2. 统一三个containersw容器样式（核心：强制等宽+完全居中） */
    .page3 .containersw {
        flex: 1 !important;
        width: 33.333333% !important; /* 严格三等分 */
        height: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important; /* 容器内垂直居中 */
        justify-content: center !important; /* 容器内水平居中 */
    }

    /* 3. 统一所有图片容器样式（消除偏移） */
    .page3 .img-hzimg,
    .page3 .img-hzimg3,
    .page3 .img-hzimg11 {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 4. 统一图片样式（强制等比+无偏移） */
    .page3 .img-hzimg img,
    .page3 .img-hzimg3 img,
    .page3 .img-hzimg11 img {
        max-width: 80% !important; /* 统一图片最大宽度，避免尺寸差异 */
        max-height: 70% !important; /* 统一图片最大高度 */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        display: block !important;
    }

    /* 5. 第二个容器：cpzx.png 浮在 zx2.png 上方（修复居中+尺寸偏差） */
    .page3 .img-cpzx {
        position: absolute !important; /* 绝对定位实现悬浮 */
        top: 50% !important;
        left: 50% !important;
        /* 核心修复：水平+垂直完全居中，如需偏上可微调第二个值（如-55%） */
        transform: translate(-50%, -50%) !important;
        max-width: 70% !important;
        max-height: 35% !important;
        /* 关键：让容器宽度贴合图片，不再超出 */
        width: fit-content !important;
        height: fit-content !important;
        /* 重置所有冗余边距，避免宽度偏差 */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        /* 确保宽度计算不包含padding/border */
        box-sizing: border-box !important;
        /* 兜底：强制容器内图片居中 */
        text-align: center !important;
        z-index: 2 !important; /* 确保在zx2上方 */
    }

    /* 强化：让内部图片完全贴合容器，无多余空白 */
    .page3 .img-cpzx img {
        display: block !important; /* 块级元素消除行内对齐偏差 */
        width: 100% !important;    /* 图片宽度铺满容器 */
        height: auto !important;   /* 保持图片比例 */
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    /* 5. 新增：隐藏.img-cpzx元素（核心需求） */
    .page3 .img-cpzx {
        display: none !important; /* 强制隐藏 */
    }
}














/* ========== 移动端适配（≤800px）- 去掉page4顶部margin，消除白条 ========== */
@media (max-width: 800px) {
    /* 1. 核心：page3和page4彻底分隔（靠page3的margin-bottom即可） */
    .page3 {
        margin-bottom: 20px !important; /* 固定间距，彻底分隔 */
        overflow: hidden !important;
        clear: both !important; /* 强制换行，不和page4重叠 */
    }

    /* 2. page4整体：去掉margin-top，消除白条+自适应高度+无滚动条 */
    .page4 {
        width: 100vw !important;
        height: auto !important; /* 整体自适应高度，保证内容全显示 */
        min-height: auto !important;
        max-height: none !important;
        margin: 0 !important; /* 去掉margin-top:10px，仅保留margin:0 */
        padding: 20px 0 20px 0 !important; /* 上下内边距，内容不贴边 */
        border: 0 !important;
        box-sizing: border-box !important;
        transform: none !important; /* 取消缩放，避免偏移 */
        overflow: visible !important; /* 内容不截断，无滚动条 */
        overflow-x: hidden !important; /* 强制消除右侧滚动条 */
        position: relative !important;
        clear: both !important; /* 强制换行，不和page3重叠 */
        background-image: url('../img/join/last.png') !important;
        background-size: cover !important;
        background-position: center !important;
        color: #ffffff !important;
        display: block !important; /* 恢复块级布局，内容自然流 */
    }

    /* 3. 标题容器：小尺寸+居中，不占多余空间 */
    .page4 .pagetext {
        padding: 0 !important;
        margin: 0 auto 20px auto !important; /* 底部间距，和小卡片分隔 */
        text-align: center !important;
        width: 90% !important; /* 标题容器窄一点，更美观 */
        line-height: 1 !important;
    }
    .page4 .pagetext p {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 20px !important;
        font-weight: bold !important;
        line-height: 1.2 !important;
    }
    .page4 .pagetext h2 {
        padding: 0 !important;
        margin: 2px 0 0 0 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        font-weight: normal !important;
    }

    /* 4. 产品卡片外层容器：无滚动条+内容全显示 */
    .page4 .container2 {
        width: 90% !important;
        height: auto !important;
        margin: 0 auto !important; /* 整体居中 */
        padding: 0 !important;
        overflow: visible !important; /* 内容全显示，无滚动条 */
        overflow-x: hidden !important; /* 消除右侧滚动条 */
    }
    .page4 .container2 .row .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin: 0 !important;
        gap: 15px !important; /* 卡片之间的间距，更整齐 */
    }

    /* 5. 卡片父容器：宽度适配，为小卡片16:9做准备 */
    .page4 .col-md-3.col-sm-3.mb-3.custom-margin {
        width: 90% !important; /* 小卡片宽度，可微调 */
        max-width: 90% !important;
        padding: 0 !important;
        margin: 0 auto !important; /* 居中 */
        float: none !important;
        box-sizing: border-box !important;
    }

    /* 6. 核心：4个小卡片改成16:9自适应（关键！） */
    .page4 .cpjiejuewt-container4,
    .page4 .cpjiejuewt-container1,
    .page4 .cpjiejuewt-container2,
    .page4 .cpjiejuewt-container3 {
        width: 100% !important; /* 宽度100%，基于父容器 */
        padding-top: 56.25% !important; /* 16:9核心：padding-top=宽度*9/16=56.25% */
        height: 0 !important; /* 高度设为0，由padding-top撑起16:9 */
        margin: 0 auto !important;
        position: relative !important; /* 内部内容绝对定位，不影响16:9比例 */
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        border-radius: 15px !important; /* 保留原有圆角 */
        background-size: cover !important; /* 保留背景图 */
        background-position: center !important;
    }

    /* 7. 小卡片内部内容：绝对定位，在16:9容器内居中显示 */
    .page4 .cpjiejuewt-container4 .profuilepagefen,
    .page4 .cpjiejuewt-container1 .profuilepagefen,
    .page4 .cpjiejuewt-container2 .profuilepagefen,
    .page4 .cpjiejuewt-container3 .profuilepagefen {
        position: absolute !important; /* 绝对定位，不破坏16:9比例 */
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important; /* 垂直居中 */
        align-items: center !important; /* 水平居中 */
        padding: 10px !important; /* 内边距，内容不贴边 */
        box-sizing: border-box !important;
    }

    /* 8. 小卡片内图片+按钮：适配16:9容器，显示完整 */
    .page4 .cpjiejuewt-container4 img,
    .page4 .cpjiejuewt-container1 img,
    .page4 .cpjiejuewt-container2 img,
    .page4 .cpjiejuewt-container3 img {
        width: 40% !important; /* 适配16:9容器 */
        max-width: 100px !important; /* 最大宽度，避免过大 */
        margin: 0 auto 10px auto !important; /* 图片和按钮间距 */
        display: block !important;
    }
    .page4 .text-center {
        margin-bottom: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    .page4 .btnpage1 {
        font-size: 14px !important;
        padding: 5px 15px !important;
        display: inline-block !important;
        margin: 0 auto !important;
    }

    /* 9. 全局消除滚动条（兜底） */
    .pages-wrapper {
        overflow-x: hidden !important; /* 消除右侧滚动条 */
        overflow-y: auto !important; /* 纵向滚动正常，无截断 */
    }
    .page4 .container2 {
        overflow: visible !important; /* 内容全显示，无滚动条 */
    }
}




/* 小屏适配（≤800px）- 覆盖大屏border+极细横线+300px logo居中 */
@media (max-width: 800px) {
    /* ========== 核心修改：居中对齐+极细横线+300px logo ========== */
    .dom .headername {
        margin: 0 auto 20px auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* 强制水平居中（核心） */
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important; /* 兜底居中 */
        position: relative !important; /* 相对定位，避免绝对定位干扰 */
    }

    /* logo保持300px，居中 */
    .dom .headername .logo {
        width: 300px !important; /* 你要的更大logo尺寸 */
        height: auto !important;
        margin: 0 auto 0px auto !important; /* 和横线间距12px */
        display: block !important;
        position: relative !important;
        left: 0 !important;
    }

    /* 关键：覆盖大屏的border/定位，实现极细横线+居中 */
    .dom .divider {
        /* 1. 清除大屏的粗border和绝对定位 */
        border: none !important;
        border-top: none !important;
        position: relative !important; /* 覆盖大屏的absolute */
        top: unset !important; /* 清除大屏的top:30% */
        left: unset !important; /* 清除大屏的left:6% */
        right: unset !important; /* 清除大屏的right:40% */

        /* 2. 极细横线：用border-top实现（比background更细） */
        width: 100px !important; /* 适配300px logo的宽度比例 */
        height: 0 !important; /* 高度设0，靠border撑粗细 */
        border-top: 2px solid rgba(255, 255, 255, 0.6) !important; /* 0.5px极细+半透明白，视觉更细 */
        background-color: transparent !important; /* 清除大屏的background */

        /* 3. 精准居中 */
        margin: 0 auto !important;
        display: block !important;
    }

    /* ========== 以下样式完全保留，无需修改 ========== */
    .dom {
        height: auto !important;
        padding: 20px 15px !important;
        background-color: #0b5894 !important;
    }

    .dom .container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important; /* 容器整体居中，双重保障 */
    }

    .dom .features {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 95% !important;
        max-width: 100% !important;
        margin: 10px auto !important;
        padding: 2vw 0 !important;
        gap: 1vw !important;
        overflow: hidden !important;
    }

    .dom .feature-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
        width: 18vw !important;
        max-width: 20vw !important;
        margin: 0 !important;
    }

    .dom .feature-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 10vw !important;
        height: 10vw !important;
        margin: 0 auto !important;
    }

    .dom .feature-text {
        display: block !important;
        text-align: center !important;
        font-size: 4vw !important;
        line-height: 1 !important;
    }

    .dom .feature-desc {
        text-align: center !important;
        margin: 1vw 0 0 0 !important;
        padding: 0 !important;
        font-size: 2.5vw !important;
        white-space: nowrap !important;
        width: 100% !important;
    }

    .dom .main-title,
    .dom .contact-section,
    .dom .image-row {
        text-align: center !important;
        margin: 10px 0 !important;
    }

    .dom .contact-info, .dom .contact-info1, .dom .contact-info2, .dom .contact-info3 {
        text-align: center !important;
        margin: 5px 0 !important;
        display: block !important;
    }

    .dom .image-item, .dom .image-item5 {
        display: inline-block !important;
        width: 18% !important;
        margin: 5px 1% !important;
    }

    .dom .small-icon {
        height: 30px !important;
        width: auto !important;
    }

    .dom .large-icon {
        height: 60px !important;
        width: auto !important;
    }

    .dom .footer {
        text-align: center !important;
        margin-top: 20px !important;
        font-size: 12px !important;
    }

    .dom * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    .dom .contact-title {
        text-align: center !important; /* 强制文本水平居中 */
        margin: 0 auto 15px auto !important; /* 左右margin:auto确保块级居中，上下留间距更美观 */
        font-size: 18px !important; /* 可选：小屏适配字号，不需要可删除 */
    }
}