@charset "utf-8";
/* ============================================================
   移动端总控样式（xw-mobile.css）
   编码：UTF-8 无 BOM

   加载顺序：必须放在所有 CSS 的最后
     例如：<link rel="stylesheet" href="/css/xw-mobile.css">
   作用：统一收编各文件的移动端规则，避免多处定义互相打架；
        并补齐新设备场景（刘海屏 / 横屏 / 触摸目标 / 无障碍）。

   覆盖对象：
     1) 新闻详情页：.xwxx-body / .zhth_content / .researchList
        / .news-content .main-right .list / .fanye
     2) 通用列表页：.sxzh_main / .product-cen-list / .headAndbtn
     3) 公共组件：.gotop 返回顶部按钮

   断点体系（8 档）：
     <=1024  iPad 横屏 / 小笔记本
     769-1024 iPad 竖屏
     <=768   平板竖屏 / 折叠屏展开
     <=600   主流手机
     <=480   iPhone SE / 小屏安卓
     <=400   iPhone 12/13 mini
     <=360   超小屏安卓
     <=320   iPhone SE 一代
     另有：横屏专属、刘海屏安全区、减弱动效
   ============================================================ */

/* ============================================================
   0. 全局溢出兜底（防止长 URL / iframe / 大图撑破屏幕）
   ============================================================ */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}
table { max-width: 100%; }
pre, code {
    white-space: pre-wrap;
    word-break: normal;
    overflow-wrap: break-word;
}
/* 中文排版：用 break-word 而非 break-all，避免标点跑到行首 */
.zhth_content,
.zhth_content p,
.zhth_content li,
.zhth_content td,
.zhth_content th,
.xwxx-body-sour {
    overflow-wrap: break-word;
    word-break: normal;
}
.zhth_content,
.zhth_content * {
    max-width: 100%;
}

/* 强制盒模型，杜绝 padding 撑破容器 */
.sxzh_main, .xwxx-body, .xwxx-body *, .product-cen-list,
.product-cen-list *, .news-content, .news-content * {
    box-sizing: border-box;
}

/* ============================================================
   1. 触摸目标 >=44px（手指点得准，符合 Apple / Google 规范）
   ============================================================ */
@media screen and (max-width: 768px) {
    .fanye a,
    .pagination a,
    .pagination strong,
    .pagination b {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 0 12px;
    }
    .more, .headAndbtn .more {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
}

/* ============================================================
   2. iPad 横屏 / 小笔记本 (<=1024px)
   ============================================================ */
@media screen and (max-width: 1024px) {
    .sxzh_main { padding-left: 12px; padding-right: 12px; }
    .xwxx-body { padding: 22px; }
    .zhth_content p { font-size: 15px; }
}

/* ============================================================
   3. iPad 竖屏 (769px ~ 1024px)：修正标题过大
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* 原 35px 在 iPad 竖屏过大，收敛到 26px */
    .xwxx-body-tit,
    .xwxx-body .xwxx-body-tit {
        font-size: 26px !important;
        line-height: 1.4 !important;
    }
    .researchList .cn { font-size: 22px !important; }
    /* 相关内容列表：日期换到标题下方 */
    .news-content .main-right .list li {
        flex-direction: column !important;
        align-items: flex-start !important;
        height: auto !important;
        padding: 10px 4px 10px 14px !important;
    }
    .news-content .main-right .list li .date { margin-top: 4px; }
}

/* ============================================================
   4. 平板竖屏 / 折叠屏展开 (<=768px)
   ============================================================ */
@media screen and (max-width: 768px) {
    .sxzh_main { padding-left: 12px; padding-right: 12px; }

    /* 详情页主体 */
    .xwxx-body {
        padding: 18px 14px !important;
        border-radius: 8px;
    }
    .xwxx-body-tit {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }
    .xwxx-body-sour {
        font-size: 13px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    .zhth_content {
        padding-top: 10px !important;
    }
    .zhth_content p {
        font-size: 15px !important;
        line-height: 1.9 !important;
        text-indent: 2em;
    }
    .zhth_content h2, .zhth_content h3 {
        font-size: 17px !important;
        line-height: 1.5 !important;
        margin: 20px 0 10px !important;
    }
    .zhth_content h4 {
        font-size: 16px !important;
    }
    .zhth_content li {
        font-size: 15px !important;
        line-height: 1.9 !important;
    }

    /* 表格：横向滑动，右侧加渐变提示 */
    .zhth_content table,
    .zhth_content .p_biaoge,
    .xwxx-body .p_biaoge {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap !important;
    }
    .zhth_content th,
    .zhth_content td {
        font-size: 12px !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }

    /* 相关内容：标题区 */
    .researchList { margin-bottom: 16px; padding-bottom: 16px; }
    .researchList .cn {
        font-size: 20px !important;
        line-height: 1.4 !important;
        height: auto !important;
    }
    .more { font-size: 15px !important; }

    /* 相关内容列表：竖排，标题两行截断 */
    .news-content .main-right .list li {
        height: auto !important;
        line-height: 1.6 !important;
        padding: 10px 4px 10px 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }
    .news-content .main-right .list li a {
        font-size: 15px !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        overflow: hidden !important;
    }
    .news-content .main-right .list li .date {
        font-size: 13px !important;
    }
    .fanye { font-size: 15px !important; }

    /* 产品 / 新闻卡片两列 */
    .product-cen-list dl {
        width: 47% !important;
        margin: 1.5% !important;
        float: left;
    }
    .product-cen-list dt img {
        height: auto !important;
        aspect-ratio: 4 / 3;
        -webkit-aspect-ratio: 4 / 3;
    }
}

/* ============================================================
   5. 主流手机 (<=600px)
   ============================================================ */
@media screen and (max-width: 600px) {
    .xwxx-body-tit { font-size: 21px !important; }
    .zhth_content p { font-size: 15px !important; }
    .researchList .cn { font-size: 19px !important; }
    .fanye { font-size: 14px !important; }
    .fanye a { padding: 0 9px; margin: 0 3px; }
}

/* ============================================================
   6. iPhone SE / 小屏安卓 (<=480px)
   ============================================================ */
@media screen and (max-width: 480px) {
    .sxzh_main { padding-left: 10px; padding-right: 10px; }
    .xwxx-body { padding: 16px 12px !important; }
    .xwxx-body-tit { font-size: 19px !important; }
    .xwxx-body-sour { font-size: 12px !important; }
    .zhth_content p { font-size: 14px !important; line-height: 1.85 !important; }
    .zhth_content h2, .zhth_content h3 { font-size: 16px !important; }

    .researchList .cn { font-size: 18px !important; }
    .more { font-size: 14px !important; min-height: 40px; line-height: 40px; }
    .news-content .main-right .list li { padding: 9px 4px 9px 12px !important; }
    .news-content .main-right .list li a { font-size: 14px !important; }
    .news-content .main-right .list li .date { font-size: 12px !important; }
    .fanye { font-size: 14px !important; }
    .fanye a { min-width: 40px; min-height: 40px; padding: 0 8px; }

    /* 卡片单列 */
    .product-cen-list dl {
        float: none !important;
        width: 100% !important;
        margin: 0 0 14px 0 !important;
    }
    .product-cen-list dt img {
        aspect-ratio: 16 / 9;
        -webkit-aspect-ratio: 16 / 9;
    }
}

/* ============================================================
   7. iPhone 12/13 mini (<=400px)
   ============================================================ */
@media screen and (max-width: 400px) {
    .xwxx-body { padding: 14px 10px !important; }
    .xwxx-body-tit { font-size: 18px !important; }
    .zhth_content p { font-size: 14px !important; }
    .researchList .cn { font-size: 17px !important; }
    .fanye { font-size: 13px !important; }
}

/* ============================================================
   8. 超小屏安卓 (<=360px)
   ============================================================ */
@media screen and (max-width: 360px) {
    .sxzh_main { padding-left: 8px; padding-right: 8px; }
    .xwxx-body-tit { font-size: 17px !important; }
    .zhth_content p { font-size: 13px !important; line-height: 1.8 !important; }
    .zhth_content h2, .zhth_content h3 { font-size: 15px !important; }
    .researchList .cn { font-size: 17px !important; }
    .more { font-size: 13px !important; }
    .news-content .main-right .list li a { font-size: 13px !important; }
    .news-content .main-right .list li .date { font-size: 12px !important; }
    .fanye { font-size: 13px !important; }
    .fanye a { min-width: 38px; min-height: 38px; padding: 0 6px; }
}

/* ============================================================
   9. 极限小屏 iPhone SE 一代 (<=320px)
   ============================================================ */
@media screen and (max-width: 320px) {
    .xwxx-body-tit { font-size: 16px !important; }
    .zhth_content p { font-size: 13px !important; }
    .researchList .cn { font-size: 16px !important; }
    .fanye { font-size: 12px !important; }
}

/* ============================================================
   10. 横屏专属（手机横放，高度 <520px）
   ============================================================ */
@media screen and (orientation: landscape) and (max-height: 520px) {
    /* 横屏时隐藏大 banner，把空间让给正文 */
    #sxzh_ban_layout,
    .sxzh_ban_list { display: none !important; }
    .xwxx-body { padding: 14px 16px !important; }
    .xwxx-body-tit { font-size: 19px !important; }
    /* 返回顶部按钮缩小，避免遮挡正文 */
    .gotop { width: 38px !important; height: 38px !important; right: 10px !important; bottom: 10px !important; }
    .gotop-arrow svg { width: 13px !important; height: 13px !important; }
}

/* ============================================================
   11. 刘海屏安全区（iPhone X 及以上）
   用 @supports 渐进增强，不支持的浏览器自动忽略
   ============================================================ */
@supports (bottom: env(safe-area-inset-bottom)) {
    .gotop {
        bottom: calc(18px + env(safe-area-inset-bottom));
    }
    .site-footer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
    @media screen and (max-width: 768px) {
        .sxzh_main {
            padding-left: max(12px, env(safe-area-inset-left));
            padding-right: max(12px, env(safe-area-inset-right));
        }
    }
}

/* ============================================================
   12. 无障碍：系统开启「减弱动效」时关闭过渡动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   13. 打印：隐藏无关区域，只留正文
   ============================================================ */
@media print {
    .site-header, .sxzh_ban_list, #sxzh_ban_layout,
    .kefu, .gotop, .site-footer .footer-links,
    .news-content, .researchList { display: none !important; }
    .xwxx-body {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-width: 100%;
    }
    .zhth_content, .zhth_content p { color: #000 !important; font-size: 12pt; }
    .zhth_content a { color: #000 !important; text-decoration: none; }
    .zhth_content a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
    }
    .zhth_content table, .zhth_content .p_biaoge {
        display: table !important;
        white-space: normal !important;
    }
}