@charset "utf-8";
/* ==========================================================================
   全站响应式统一层（批次六十八）
   --------------------------------------------------------------------------
   定位：只做「覆盖与补齐」，不改 style.css / bootstrap.css 里任何一条既有规则。
        全部规则都带 |media| 限定或更高特异性的前缀（.page / .page-footer），
        桌面端（≥1200px）在绝大多数条目上保持原样。

   加载顺序：layout.html 里排在 app.css 之后、footer-crile.css 之前，
             即所有主题样式的最后一份；faq.css / download.css 在 body 尾部
             单独加载的页面，用 .page 前缀提高特异性压过它们。

   断点规范（全站统一 5 档，新代码只准用这几档）：
        ≤479px         小屏手机（iPhone SE / 老安卓）
        480–767px      手机
        768–991px      平板竖屏
        992–1199px     平板横屏 / 小笔记本
        ≥1200px        桌面（主题默认，不动）

   为什么不用 min-width 重写：主题是 Bootstrap 4 的 min-width 体系
   （576 / 768 / 992 / 1200 / 1600 / 1800），另有 479 / 700 / 800 / 900 /
   1025 / 1160 / 1400 等零散值，共 20 个断点。移动端修补统一用 max-width
   向下覆盖，避免与主题的层叠顺序打架；新增组件请复用上面 5 档。
   ========================================================================== */

/* ==========================================================================
   1. 基础：iOS 横屏字体放大 / 锚点被固定头压住
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 0–1199px 头部 .rd-navbar-panel 为 fixed、高 56px（≥1200 才 static），
   锚点跳转后标题会被盖住一截。统一给带 id 的块留出让位。 */
@media (max-width: 1199px) {
    section[id],
    article[id],
    div[id],
    h1[id],
    h2[id],
    h3[id] {
        scroll-margin-top: 72px;
    }
}

/* ==========================================================================
   2. 表单控件：iOS 聚焦不缩放
   --------------------------------------------------------------------------
   Safari 规则：input/select/textarea 的 font-size < 16px 时，聚焦会自动把
   整个页面放大，用户必须手动缩回去。站点原有 14–15px，实测 /contacts.html
   7 个输入框、/news.html 搜索框、/support/faq.html 搜索框都会触发。
   只改字号，不改高度与内边距，布局不受影响。
   ========================================================================== */

@media (max-width: 991px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    select,
    textarea,
    .form-input,
    .rd-search-input,
    .faq-search-box input[type="search"] {
        font-size: 16px;
    }

    /* placeholder 跟随，避免 16px 输入框里出现 14px 灰字 */
    input::placeholder,
    textarea::placeholder {
        font-size: 15px;
    }
}

/* ==========================================================================
   3. 触控目标：手指够得着（移动端建议 44×44，这里取 36px 下限做折中）
   ========================================================================== */

@media (max-width: 767px) {
    /* 页脚链接：原每项高 32px，链接贴着文字盒子，指甲盖点不中 */
    .page-footer .footer-list-pro li > a,
    .page-footer .footer-list-other li > a,
    .page-footer .footer-copyright a {
        display: block;
        padding: 4px 0;
        line-height: 26px;
    }

    /* 版权区的法务链接是行内并排，不能撑成块级 */
    .page-footer .footer-copyright p > a {
        display: inline-block;
        padding: 3px 2px;
    }

    /* 轮播里的「了解详情」按钮与文字链 */
    .swiper-container a.button,
    .owl-carousel a.button {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   4. 页脚：移动端两列排布
   --------------------------------------------------------------------------
   现状：产品 13 项按 33.33% 浮动成 3 列，390px 下每列仅 110px，
        「湿法剥片氮化硼」被折成两行，整块 5 行共 320px 高且参差不齐；
        品牌 10 个在 ≤575px 时是 100% 宽，纵向排 10 行。
   改法：产品 / 快链 / 品牌统一两列，产品从「5 行 × 64px」变「7 行 × 34px」，
        高度 320 → 238px，且每项一行不再折字。
   ========================================================================== */

@media (max-width: 767px) {
    .page-footer .footer-list-pro ul,
    .page-footer .footer-list-other ul {
        overflow: hidden;   /* 清浮动 */
        margin-top: 16px;
    }

    .page-footer .footer-list-pro li {
        float: left;
        width: 50%;
        margin: 2px 0;
        padding-left: 14px;
    }

    .page-footer .footer-list-other li {
        float: left;
        width: 50%;
        margin: 2px 0;
        padding-left: 14px;
    }

    .page-footer .footer-list-other h3 + ul,
    .page-footer .footer-list-pro h3 + ul {
        margin-top: 14px;
    }

    .page-footer h3 {
        margin-bottom: 4px;
    }

    /* 扫一扫的二维码别被两列规则影响 */
    .page-footer .footer-list-other p {
        margin-top: 14px;
    }

    /* 品牌墙：≤575 原本每行一个，改两列 */
    .page-footer .footer-logo-list > div {
        float: left;
        width: 50%;
    }

    .page-footer .footer-logo-list {
        overflow: hidden;
    }

    .page-footer .footer-copyright {
        clear: both;
    }
}

@media (max-width: 479px) {
    .page-footer .footer-list-pro li,
    .page-footer .footer-list-other li {
        padding-left: 12px;
    }

    .page-footer .footer-list-pro li > a,
    .page-footer .footer-list-other li > a {
        font-size: 14px;
        line-height: 24px;
    }
}

/* ==========================================================================
   5. 横向滚动条：给出「还能滑」的视觉暗示
   --------------------------------------------------------------------------
   .faq-cats（常见问题分类）在 390px 下内容 863px / 视口 368px，
   溢出 495px 却没有任何提示，用户以为「粉体材料」就是最后一个。
   用 mask 在右侧做 20px 渐隐；滚到末尾时最后一格边缘会被淡掉一点点，
   属可接受折中（切换条那套 is-start/is-end 联动只对它自己生效）。
   ========================================================================== */

@media (max-width: 767px) {
    .page .faq-cats {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
        overscroll-behavior-x: contain;
    }
}

/* ==========================================================================
   6. 宽表格：横滑提示 + 惯性滚动
   --------------------------------------------------------------------------
   产品详情页参数表（.table-novi）在 390px 下 330 → 433px，溢出 103px；
   320px 下溢出 165px。表格能滑，但右侧没有任何边界提示。
   用「两侧固定阴影 + 两端白色遮罩随内容滚动」的经典方案：
   滚到左端时左阴影被白色遮罩盖住，滚到右端时右阴影被盖住，
   中间状态两侧都露出阴影，用户一眼看出还有内容。
   ========================================================================== */

@media (max-width: 991px) {
    .page .table-novi,
    .page .table-custom-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        background-image:
            linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)),
            linear-gradient(to left, #fff 40%, rgba(255, 255, 255, 0)),
            radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0));
        background-position: 0 0, 100% 0, 0 0, 100% 0;
        background-repeat: no-repeat;
        background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* ==========================================================================
   7. 首页 Banner：文字可读性 + 平板高度收敛
   --------------------------------------------------------------------------
   现状：标题是 24px（手机）/ 28px（平板）纯白字，直接压在照片上，
        合影、红地毯、肤色背景时几乎不可读（320 / 390 / 768 实测均如此）。
        平板 768–1199 的 min-height 是 650px，768×1024 竖屏占屏 63%。
   改法：≤1199 加一层纵向渐变遮罩（上深 → 中浅 → 下深，保证上下都能压字），
        平板高度收到 440px。桌面 ≥1200 完全不动。
   ========================================================================== */

@media (max-width: 1199px) {
    .swiper-container_height-1 .swiper-slide::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg,
            rgba(10, 14, 22, .52) 0%,
            rgba(10, 14, 22, .20) 38%,
            rgba(10, 14, 22, .14) 62%,
            rgba(10, 14, 22, .50) 100%);
    }

    .swiper-container_height-1 .swiper-slide-caption {
        position: relative;
        z-index: 2;
    }

    /* 分页圆点原本压在最下面，遮罩后要保证它仍在最上层可点 */
    .swiper-container_height-1 .swiper-pagination {
        position: relative;
        z-index: 3;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .swiper-container_height-1 {
        min-height: 440px;
    }
}

/* ==========================================================================
   8. 打印：去掉一切浮动与背景
   ========================================================================== */

@media print {
    .page-footer .footer-list-pro li,
    .page-footer .footer-list-other li,
    .page-footer .footer-logo-list > div {
        float: none !important;
        width: auto !important;
    }
}

/* ==========================================================================
   9. 首页「数据统计」区块（.lei07）
   --------------------------------------------------------------------------
   现状：.lei07 .top 绝对定位、h3 是 50px 大字；.bot 里是点阵地图 + 12 个
        脉冲圆点，三张数据卡再绝对定位压在地图底部（bottom:-75px）。
        这套层叠只在 ≥992px 成立，实测卡片顶边与标题底边的关系：
            992px   卡片 380 / 标题 269   → 不重叠
            768px   卡片 269 / 标题 339   → 重叠  70px
            390px   卡片  63 / 标题 600   → 重叠 536px（截图那样糊成一团）
            320px   卡片 -193 / 标题 670  → 重叠 863px
   改法：≤991 退回常规文档流 —— 标题、按钮、三张卡依次排列；
        点阵地图与脉冲圆点是纯装饰，手机上既看不清又抢位，直接隐藏；
        数字 80 → 40 → 34/30px、说明 21 → 13px，保证卡片里不折字。
    桌面 ≥992px 完全不动（卡片仍浮在地图底部）。
   ========================================================================== */

@media (max-width: 991px) {
    .lei07 {
        padding: 48px 0 40px;
    }

    .lei07 .top {
        position: static;
        width: auto;
        text-align: center;
    }

    .lei07 .top h3 {
        margin-top: 0;
        margin-bottom: 6px;
        font-size: 26px;
        line-height: 1.5;
        /* 320px 下原本断成「…产品性 / 能，」把词拆开，
           balance 让三行长度接近；不支持的浏览器忽略即可 */
        text-wrap: balance;
    }

    .lei07 .top a {
        margin-top: 14px;
        padding: 9px 22px;
        font-size: 16px;
        letter-spacing: .5px;
    }

    .lei07 .bot {
        margin-top: 24px;
    }

    /* 点阵地图 + 12 个脉冲圆点：纯装饰 */
    .lei07 .bot > img,
    .lei07 .bot dl {
        display: none;
    }

    .lei07 .bot ul {
        position: static;
        bottom: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0;
    }

    .lei07 .bot ul li {
        width: 32%;
        padding: 18px 10px;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(61, 41, 164, .10);
    }

    .lei07 .bot ul li h4 {
        justify-content: center;
        margin-bottom: 6px;
    }

    .lei07 .bot ul li h4 strong {
        margin-right: 0;
        font-size: 40px;
    }

    .lei07 .bot ul li h4 sup {
        top: .6rem !important;
        font-size: 20px;
    }

    .lei07 .bot ul li h5 {
        width: 100%;
        font-size: 13px;
        line-height: 1.55;
    }
}

@media (max-width: 767px) {
    /* 390px 下三列每张只剩 105px，改成一行一张：左边数字、右边说明 */
    .lei07 .bot ul {
        display: block;
    }

    .lei07 .bot ul li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 10px;
        padding: 14px 16px;
    }

    .lei07 .bot ul li h4 {
        flex: 0 0 auto;
        justify-content: flex-end;
        min-width: 84px;
        margin: 0 14px 0 0;
    }

    .lei07 .bot ul li h4 strong {
        font-size: 34px;
    }

    .lei07 .bot ul li h5 {
        text-align: left;
    }
}

@media (max-width: 479px) {
    .lei07 .top h3 {
        font-size: 22px;
    }

    .lei07 .bot ul li h4 {
        min-width: 74px;
    }

    .lei07 .bot ul li h4 strong {
        font-size: 30px;
    }

    /* 「2026全球展会」带 inline 的 margin-left:20px，换行后会偏右 */
    .lei07 .top a {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .lei07 .top a + a {
        margin-top: 8px !important;
    }
}

/* ==========================================================================
   10. 页脚：快链 / 扫一扫 的左边线对齐
   --------------------------------------------------------------------------
   现状：.footer-list-other 带着 padding-left:80px + 左侧 1px 竖线，那是给
        桌面三栏准备的（把「快链」与「产品」隔开）。可是 ≤1199px 时
        .col-xl-7 / .col-xl-2 / .col-xl-3 全部失效，三块各自 100% 宽纵向
        堆叠，80px 内缩就变成了「快链、扫一扫整体右移、左边挂一条孤零零
        的竖线」，标题与「产品」对不齐（390px 实测 30px vs 96px）。
   改法：≤1199 把内缩与竖线一并去掉，三块左边缘统一回到 30px。
   ========================================================================== */

@media (max-width: 1199px) {
    .page-footer .footer-list-other {
        padding-left: 15px;
        border-left: 0;
    }
}

/* 页脚装饰层里残留的一个字符（<div id="pulse-wave">1</div> 的文本节点），
   白字印在深色页脚上，手机端正好落在「其他」右侧，像个错字。 */
.page-footer .animation-container {
    font-size: 0;
}