/* ==========================================================================
   responsive.css —— 全站响应式适配（手机 / 平板）
   --------------------------------------------------------------------------
   背景：本项目原为纯桌面站，容器定宽 1200px、无任何媒体查询，
        在 <1200px 的设备上会出现横向滚动、文字被裁切/遮挡。

   设计原则
   1. 桌面优先、渐进增强：只在窄屏（<=1199px）覆盖，>=1200px 视觉与原版
      完全一致，零回归风险。
   2. 不修改原有 CSS 文件，全部覆盖写在本文件，便于整体回滚（删掉本文件
      与各页 <link> 引用即可恢复原状）。
   3. 断点
        >=1200px   桌面（保持原样）
        992~1199px 平板横向 / 小笔记本
        768~991px  平板竖向
        <=767px    手机
   4. 手段优先级：定宽容器 -> max-width:100% ；不换行 flex -> 允许 wrap 或
      改 column ；固定宽图片/视频 -> max-width:100% 。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 全局兜底：防止任何元素撑破视口
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    /* 防止 iOS 横屏时字号被自动放大 */
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    /* 双保险：即使有遗漏的定宽元素，也不产生横向滚动条 */
}

/* 滚动入场动效的元素在「未进入视口」时带 translateX(±64px) 位移，
   在窄屏会超出视口宽度并触发横向滚动（首页 .product .right / .cnas_right 等）。
   窄屏把位移量减半，既保留动效又不撑破布局。 */
@media (max-width: 991px) {
    .reveal-left {
        transform: translateX(-24px);
    }

    .reveal-right {
        transform: translateX(24px);
    }
}

/* 图片 / 视频 一律不超出容器（覆盖 HTML 上的 width 属性） */
img,
video,
canvas,
iframe {
    max-width: 100%;
}

/* 表格在窄屏可横向滚动，避免撑破布局 */
.el-table {
    max-width: 100%;
}

/* ==========================================================================
   1. 平板及以下（<=1199px）：把定宽容器改为流式
   ========================================================================== */
@media (max-width: 1199px) {

    /* ---- 1.1 通用定宽容器 ---- */
    .center,
    .wrapper,
    .sector,
    .apply_form,
    .download_content,
    .product_banner .banner_content,
    .nav_bar {
        width: 100% !important;
        max-width: 1200px;
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 标题下的分隔线原本 1200px 定宽 */
    .title .el-divider--horizontal {
        width: 100% !important;
    }

    /* ---- 1.2 首页 banner 轮播文字层 ----
       .slider-main 原为 1200x400 绝对居中，窄屏必须改为占满容器，
       否则整个文字层会被推到视口外。 */
    .slider-main {
        width: 100% !important;
        height: 100%;
        max-width: 1200px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* .banner-text 是 absolute + width:100%，父级 .slider-main 已有 20px 内边距，
       它自身再取 100% 会多出 20px 并溢出视口，改用左右定位自适应。
       ★注意：absolute 元素的包含块是父级的 padding box（含 padding 区域），
       所以 left:0 并不会被 .slider-main 的 padding 推开，必须在这里显式内缩，
       否则文字会贴住视口左右边缘（实测 L=0 R=768）。 */
    .banner-engine .banner-text {
        width: auto !important;
        left: 20px;
        right: 20px;
        box-sizing: border-box;
    }

    .slider-text {
        padding-left: 0;
    }

    .slider-text p,
    .slider-text .flex {
        width: 70%;
    }

    /* ---- 1.3 首页产品介绍：文字 + 视频 两栏 -> 竖向堆叠 ---- */
    .product {
        flex-direction: column;
        align-items: stretch;
    }

    .product .left,
    .product .right {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .product .right {
        margin-top: 24px;
    }

    .product video {
        width: 100% !important;
        height: auto !important;
    }

    .product .left video,
    .product .right + video {
        margin-top: 24px;
    }
}

/* ==========================================================================
   2. 平板竖向及以下（<=991px）
   ========================================================================== */
@media (max-width: 991px) {

    /* ---- 2.1 顶部导航：折叠为汉堡菜单 ----
       原来 6 个菜单项平铺会占 100+px 高，且产品下拉依赖 hover（触屏不可用）。
       改为：logo 行 + 汉堡按钮，点击后从顶部滑出纵向菜单。
       交互由 js/responsive.js 提供；本处只负责样式与状态。 */
    .header {
        height: auto;
        min-height: 60px;
        background: rgba(21, 26, 51, .96);
    }

    .header .center.flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        padding-top: 6px;
        padding-bottom: 6px;
        position: relative;
    }

    .header .center.flex > span {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
    }

    /* 汉堡按钮：三横线，纯 CSS 绘制 */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 44px;
        height: 44px;
        padding: 12px 10px;
        box-sizing: border-box;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .35);
        border-radius: 8px;
        cursor: pointer;
        flex: 0 0 auto;
        margin-left: 10px;
    }

    .nav-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: transform .25s ease, opacity .2s ease;
    }

    /* 展开态：三条线变为叉号 */
    .header.menu-open .nav-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .header.menu-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .header.menu-open .nav-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* 导航列表：默认收起，展开时纵向铺满 */
    .aul {
        float: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
        background: #151a33;
        z-index: 100;
        transition: max-height .3s ease, padding .3s ease;
    }

    .header.menu-open .aul {
        max-height: 80vh;
        overflow-y: auto;
        padding: 72px 12px 20px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
    }

    .aul li {
        float: none;
        height: auto;
        line-height: 1.6;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .aul li:last-child {
        border-bottom: none;
    }

    .aul li a {
        height: auto;
        line-height: 1.6;
        padding: 14px 8px;
        display: block;
        font-size: 16px;
    }

    /* 产品子菜单：移动端改为点击展开（JS 切换 .submenu-open）
       ★ 必须显式 display:block —— 桌面端 index.css 里 .pul{display:none}，
       靠 jQuery hover 加 .adproduce 才 display:block；
       触屏没有 hover，.adproduce 永不出现，若这里不覆盖 display，
       子菜单会永远 display:none（即使 max-height 已放开也量不到高度）。
       收起/展开改由 max-height + overflow:hidden 控制。 */
    .pul {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        box-shadow: none;
        border-radius: 0;
        background: rgba(255, 255, 255, .04);
        padding: 0 0 0 12px;
        transition: max-height .3s ease, padding .3s ease;
    }

    .produce.submenu-open .pul {
        max-height: 600px;
        padding: 6px 0 10px 12px;
    }

    /* 子菜单项：浅底深字，与深色父菜单区分 */
    .pul li {
        border-bottom: none;
    }

    .pul li a {
        color: rgba(255, 255, 255, .88);
        font-size: 15px;
        padding: 10px 8px;
    }

    .pul li a:hover,
    .pul li a:focus {
        color: #00A0E9;
    }

    /* 关键词标签在窄屏隐藏，避免子菜单过长 */
    .pul .pul-kw {
        display: none;
    }

    /* 产品名右侧的下拉箭头，展开时翻转 */
    .produce > a i {
        display: inline-block;
        transition: transform .25s ease;
        margin-left: 4px;
    }

    .produce.submenu-open > a i {
        transform: rotate(180deg);
    }

    /* ---- 2.2 首页轮播文字：放宽到几乎满宽 ---- */
    /* ★首屏文字必须让开固定头部（60px）★
       注意：不能给 .banner-engine 加 padding-top ——
         a) .banner-engine 的行内样式有 z-index:0，会建立层叠上下文，
            把整个 banner 压在 fixed 头部（z-index:99）之下；
         b) .banner-text / .slider-text 都是 absolute，其包含块是 padding box，
            父级 padding 不会推它们下移（实测仍停在 top=10，被头部盖住）。
       因此直接把文字层自身下移 60px。 */
    .banner-engine .banner-text {
        top: 60px;
        height: calc(100% - 60px);
    }

    .slider-text p,
    .slider-text .flex {
        width: 100%;
    }

    .slider-text .flex {
        flex-wrap: wrap;
    }

    .slider-text .flex > span {
        margin: 0 20px 12px 0;
    }

    .slider-text p {
        font-size: 18px;
        line-height: 1.7;
        margin-top: 18px;
    }

    /* ---- 2.3 测评中心三栏 -> 竖向 ---- */
    .cnas {
        flex-direction: column;
        align-items: center;
    }

    .cnas_left,
    .cnas_right,
    .cnas_center {
        width: 100% !important;
    }

    /* ★内联 style 的 translateX(±150px) 必须用 !important 清除，
       否则条目会被推出容器、造成溢出 */
    .cnas_left p,
    .cnas_right p {
        transform: none !important;
        margin-bottom: 24px !important;
        text-align: center;
        justify-content: center;
    }

    .cnas_left,
    .cnas_right {
        text-align: center;
    }

    .cnas_text {
        width: auto;
        flex: 1;
        max-width: 420px;
    }

    .cnas_center {
        width: min(420px, 80vw) !important;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 24px auto;
    }

    .cnas_center .el-image {
        width: 70% !important;
        height: auto !important;
    }

    /* 服务案例 logo 行：允许换行 */
    .cnas_partner,
    .cnas_partner.flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .cnas_partner em {
        width: 100%;
        margin-bottom: 8px;
    }

    .cnas_partner > span {
        width: calc(50% - 10px) !important;
        max-width: 230px;
    }

    /* ---- 2.4 合作伙伴 logo 墙：每行 5 个 -> 自动换行 ---- */
    .partner p,
    .partner p.flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .partner p span {
        width: calc(33.333% - 10px) !important;
        max-width: 230px;
        height: 60px;
    }

    /* ---- 2.5 产品详情页 banner：文字与视频竖排 ---- */
    .product_banner {
        height: auto;
        padding-top: 90px;
        padding-bottom: 90px;
        box-sizing: border-box;
    }

    .product_banner .banner_content {
        flex-direction: column;
        align-items: center;
    }

    .banner_text {
        width: 100% !important;
        text-align: center;
    }

    /* product.css 中副标题为固定 620px，窄屏改为流式 */
    .banner_text p {
        width: 100% !important;
        font-size: 16px;
        line-height: 1.7;
        margin: 20px 0;
    }

    .banner_text h1 {
        font-size: 22px;
    }

    .product_banner .banner_content video {
        width: 100%;
        max-width: 640px;
        height: auto !important;
        margin-top: 24px;
    }

    /* 锚点导航条：绝对定位在 banner 底部，窄屏会叠到内容上 -> 改为静态 */
    .nav_bar {
        position: static !important;
        margin-top: 24px !important;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* ---- 2.6 产品页各功能区块 ---- */

    /* .logo_item（技术指标 / 支持列表的徽标卡）：190px 固定宽 + .flex 不换行，
       窄屏改为自动换行 */
    .index p.flex,
    .index .flex {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
    }

    .logo_item {
        width: auto !important;
        min-width: 150px;
        flex: 1 1 150px;
        max-width: 190px;
        box-sizing: border-box;
    }

    /* .function：左说明 + 右列表（原 width:90% + 30%） -> 竖排 */
    .function,
    .function.sector {
        flex-direction: column;
    }

    .function_left,
    .function_right {
        width: 100% !important;
        border-radius: 20px;
        box-sizing: border-box;
    }

    .function_right {
        padding-left: 24px !important;
        margin-top: 24px;
        line-height: 2.4;
    }

    /* vs 圆形徽标：绝对定位在中间，竖排后会压住内容 -> 隐藏 */
    .function .vs {
        display: none;
    }

    /* 横向排列的图标项（.icon_item）允许换行 */
    .icon_item {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .icon_item small,
    .icon_item.weixi small {
        width: auto !important;
        max-width: 100%;
        padding-left: 0;
        padding-top: 8px;
    }

    .icon_item.vertical {
        width: calc(50% - 16px);
    }

    .hexagon,
    .pentagon,
    .square {
        margin: 0 auto;
    }

    /* .mode（部署模式）：两个 48% 卡片 -> 竖排，取消固定高 */
    .mode_item {
        width: 100% !important;
        height: auto !important;
        padding: 20px 0;
        box-sizing: border-box;
    }

    .mode_item + .mode_item {
        margin-top: 20px;
    }

    .mode_title {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 1.5px dashed #00A0E9;
        padding-bottom: 16px;
        box-sizing: border-box;
    }

    .mode_title p {
        text-align: center;
    }

    /* .form（微瞳）：三栏 30% 卡片 -> 竖排 */
    .form.flex {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .form div {
        width: 100% !important;
        height: auto !important;
        padding: 16px;
        box-sizing: border-box;
    }

    .form em {
        writing-mode: horizontal-tb;
        height: auto !important;
        width: auto !important;
        border-right: none !important;
        border-bottom: 1.5px dashed #00A0E9;
        padding-bottom: 8px;
        margin-bottom: 12px;
        line-height: 1.6;
    }

    /* .structure（架构说明）：多列百分比 + 虚线边框，窄屏会挤压 -> 
       改为单列可读布局 */
    .structure .col1,
    .structure .col2,
    .structure .col3,
    .structure .col4,
    .structure .col6 {
        width: 100% !important;
        border-left: none;
        border-right: none;
    }

    .structure p {
        flex-wrap: wrap;
    }

    .structure p em,
    .structure p span,
    .structure p i {
        width: 100% !important;
        text-align: left;
    }

    .structure .row2 small,
    .structure .row3 small,
    .structure .row4 small,
    .structure .row5 small,
    .structure .row6 small,
    .structure .col1 small,
    .structure .col2 small,
    .structure .col3 small,
    .structure .col4 small,
    .structure .col6 small {
        width: 100% !important;
    }

    /* .value（应用价值）：左右两栏 -> 竖排 */
    .value.sector.flex {
        flex-direction: column;
    }

    .value_text,
    .value_chart {
        width: 100% !important;
    }

    .value_chart {
        margin-top: 24px;
    }

    .value_item small {
        width: 100%;
    }

    /* .case（客户案例）：图片 65% + 时间线 35% -> 竖排 */
    .case.sector.flex {
        flex-direction: column;
    }

    .case_img,
    .case_time {
        width: 100% !important;
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    .case_time {
        margin-top: 24px;
    }

    /* ---- 2.7 用户手册：左导航 + 右内容 -> 单栏上下排 ---- */
    .manual.sector.flex {
        flex-direction: column;
    }

    .manual > .el-menu {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px;
    }

    /* 菜单项恢复单行省略，避免移动端菜单过高 */
    .manual .el-menu-item,
    .manual .el-submenu__title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .manual_content {
        width: 100% !important;
        height: auto !important;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    /* ---- 2.8 微知柱状图：容器占满 ---- */
    .value_chart #chart {
        width: 100%;
        height: 260px;
    }

    /* ---- 2.9 关于我们 ---- */
    .about_intro_item {
        width: 100% !important;
        margin-bottom: 24px;
    }

    .about_banner {
        height: auto !important;
        padding: 100px 20px 60px;
        box-sizing: border-box;
        line-height: 1.8;
    }

    /* 锚点子导航：原为绝对定位 + width:1200px，窄屏改为静态流式 */
    .about_banner p {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .about_cont .el-col {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 20px;
    }

    /* ---- 2.10 试用表单 ---- */
    /* el-form 的 label-width="170px" 为 HTML 属性，窄屏需 CSS 归零并让标签
       转为上方堆叠，否则表单内容区被压到过窄 */
    .apply_form .el-form-item__label {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        padding: 0 0 6px 0 !important;
        line-height: 1.5;
    }

    .apply_form .el-form-item__content {
        margin-left: 0 !important;
    }

    .apply_form .submit-btn {
        width: 100% !important;
        max-width: 280px;
    }

    .apply_form .el-button--primary {
        width: 100%;
        margin-right: 0;
    }

    .apply_form .el-checkbox.is-bordered {
        margin-bottom: 8px;
    }

    /* 协议文本按钮原为 nowrap 长文本，窄屏允许换行 */
    .apply_form .el-button--text {
        white-space: normal !important;
        height: auto;
    }

    /* ---- 2.11 资源下载 ---- */
    .download_content {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 下载页 banner：原为固定高度 + 大图，窄屏改为流式 */
    .download_banner {
        height: auto !important;
        padding: 90px 20px 40px;
        box-sizing: border-box;
        line-height: 1.6;
        text-align: center;
    }

    /* 原用 calc((100% - 1200px)/2) 做居中内缩，窄屏会算出负值 -> 归零 */
    .download_banner h1 {
        padding-left: 0 !important;
        margin-bottom: 20px;
    }

    .download_banner img {
        position: static !important;
        right: auto !important;
        max-width: 100%;
        height: auto !important;
    }

    /* 原高度依赖 100vh 与固定 590px 偏移，窄屏改自适应 */
    .download_content {
        height: auto !important;
        min-height: 320px;
        padding-bottom: 40px;
    }

    /* 口令输入区：原 1100px 定宽，窄屏改为流式 */
    .detaily {
        width: 100% !important;
        max-width: 1100px;
        box-sizing: border-box;
    }

    /* el-steps 横向步骤条：窄屏改为纵向，避免标题/描述挤成竖排文字 */
    .download_content .el-steps--horizontal,
    .download_content .el-steps.el-steps--horizontal {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .download_content .el-step.is-horizontal {
        display: flex;
        flex-direction: row;
    }

    .download_content .el-step.is-horizontal .el-step__head {
        width: 30px;
        flex: 0 0 30px;
    }

    .download_content .el-step.is-horizontal .el-step__main {
        flex: 1;
        padding-left: 12px;
        padding-bottom: 20px;
        min-width: 0;
    }

    /* 步骤间的连接线：纵向排列后隐藏，避免穿过文字 */
    .download_content .el-step.is-horizontal .el-step__line {
        display: none;
    }

    .download_content .el-step__title {
        font-size: 15px;
        line-height: 1.5;
    }

    .download_content .el-step__description {
        font-size: 13px;
        line-height: 1.6;
        white-space: normal;
        padding-right: 0;
    }

    /* 口令输入框：原固定宽度，窄屏占满 */
    .detaily .load_input,
    .detaily input {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* ---- 2.12 咨询弹窗（Element UI）：避免超宽 ---- */
    .el-dialog.cnas_form,
    .el-dialog {
        width: 90% !important;
        max-width: 700px;
        min-width: auto !important;
    }

    .cnas_form .el-form-item__label {
        float: none;
        text-align: left;
        padding: 0 0 6px;
        width: auto !important;
        line-height: 1.4;
    }

    .cnas_form .el-form-item__content {
        margin-left: 0 !important;
    }
}

/* ==========================================================================
   3. 手机（<=767px）
   ========================================================================== */
@media (max-width: 767px) {

    /* ---- 3.1 通用间距压缩：桌面的大留白在手机上显得过空 ---- */
    .title {
        margin: 60px 0 40px 0;
    }

    h2 {
        margin-bottom: 24px;
        font-size: 22px;
    }

    h2 small {
        display: block;
        margin-top: 4px;
        font-size: 13px;
    }

    /* ---- 3.2 导航：字号与内边距进一步压缩 ---- */
    .aul li a {
        padding: 7px 9px;
        font-size: 14px;
    }

    .header .center.flex .logo {
        height: 30px !important;
    }

    /* ---- 3.3 首页 banner 文字 ---- */
    .slider-text h1 {
        font-size: 20px;
    }

    .slider-text p {
        font-size: 16px;
        line-height: 1.6;
    }

    .banner-point {
        bottom: 16px;
    }

    /* ---- 3.4 产品介绍 ---- */
    .product {
        margin-bottom: 50px;
    }

    .product .left,
    .product .right {
        line-height: 2;
    }

    /* ---- 3.5 测评中心 ---- */
    .cnas_center {
        width: min(300px, 78vw) !important;
    }

    .cnas_text {
        max-width: 100%;
    }

    .cnas_icon {
        width: 64px;
        height: 64px;
    }

    .cnas_left p,
    .cnas_right p {
        flex-direction: column;
        align-items: center;
    }

    .cnas_btn .el-button {
        width: 100%;
        max-width: 230px;
    }

    /* ---- 3.6 合作伙伴 logo 墙：每行 2 个 ---- */
    .partner p span {
        width: calc(50% - 10px) !important;
        height: 56px;
    }

    .partner h3 {
        margin: 28px 0 16px 0;
        font-size: 17px;
    }

    /* ---- 3.7 产品详情页 ---- */
    .product_banner {
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .banner_text h1 {
        font-size: 19px;
        line-height: 1.5;
    }

    .banner_text p {
        font-size: 15px;
    }

    /* 尺寸装饰块（六边形/五边形/方块）在窄屏缩小 */
    .hexagon,
    .pentagon,
    .square {
        width: 120px;
        height: 120px;
    }

    .hexagon img,
    .pentagon img,
    .square img {
        height: 40px;
        margin-top: 20px;
    }

    .icon_item.vertical {
        width: 100%;
    }

    .icon_item.vertical small {
        width: 100% !important;
        text-align: center;
    }

    /* 手册的双栏表格在窄屏改为可横向滚动 */
    .manual_content .el-table {
        overflow-x: auto;
    }

    /* el-table 内部有固定 min-width（列宽总和），窄屏必然超宽。
       授予横向滚动而非压缩列宽，保证内容可读。
       注意 .el-table 自身是 overflow:hidden，需外层包裹滚动容器。 */
    .el-table {
        overflow-x: auto;
    }

    .el-table__header-wrapper,
    .el-table__body-wrapper {
        overflow-x: auto !important;
    }

    /* 用户可以横向拖动查看完整表格 */
    .el-table__body-wrapper {
        -webkit-overflow-scrolling: touch;
    }

    /* el-table-column 的 show-overflow-tooltip 在窄屏（无 hover）会导致
       单元格文字被省略号截断且无法查看完整内容 —— 窄屏改为自动换行，
       配合表格横向滚动，保证内容完整可读。 */
    .manual_content .el-table .cell.el-tooltip,
    .manual_content .el-table .cell {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word;
        line-height: 1.5;
    }

    /* 换行后表头与单元格需垂直居中 */
    .manual_content .el-table th .cell,
    .manual_content .el-table td .cell {
        display: flex;
        align-items: center;
        min-height: 24px;
    }

    /* 换行会导致行高不定，去掉固定行高限制 */
    .manual_content .el-table .el-table__row {
        height: auto;
    }

    /* ---- 3.8 关于我们 / 底部 ---- */
    .about_intro p,
    .about_dev p {
        line-height: 1.9;
        font-size: 14px;
    }

    .copyright {
        height: auto;
        line-height: 1.6;
        padding: 16px 12px;
        font-size: 12px;
    }

    /* ---- 3.9 锚点导航条：竖排更易点 ---- */
    .nav_bar {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .nav_bar i {
        display: none;
        /* 竖排后分隔符多余 */
    }

    /* ---- 3.10 弹窗：手机全宽 ---- */
    .el-dialog.cnas_form,
    .el-dialog {
        width: 94% !important;
        margin-top: 8vh !important;
    }

    /* ---- 3.11 AI 助手浮窗：避免超出视口 ---- */
    #ai-panel {
        max-width: calc(100vw - 24px) !important;
        max-height: 70vh !important;
    }
}

/* ==========================================================================
   4. 超小屏（<=400px）兜底
   ========================================================================== */
@media (max-width: 400px) {

    .aul li a {
        padding: 6px 7px;
        font-size: 13px;
    }

    .partner p span {
        width: 100% !important;
    }

    .cnas_partner > span {
        width: 100% !important;
    }

    .slider-text h1 {
        font-size: 18px;
    }

    .banner_text h1 {
        font-size: 17px;
    }
}

/* ==========================================================================
   5. 触摸设备优化：增大可点击区域、去掉 hover 依赖
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

    .aul li a {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
    }

    .nav_bar a {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    .to_top {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
}