@charset "utf-8";
/* ============================================================
   通栏容器 · 通用布局样式（xw-layout.css）
   适用：.sxzh_main 产品 / 新闻列表容器

   编码：UTF-8 无 BOM
   说明：本文件由原 GBK 编码转换而来，原中文注释已全部重写为规范中文
        转换日期：2026-09-12

   ============================================================
   修复记录
   ------------------------------------------------------------
   修复1  编码问题（原文件为 GBK，页面声明 UTF-8）
     页面 <meta charset="utf-8">，浏览器按 UTF-8 读取本文件，
     而注释里的 GBK 字节不是合法 UTF-8，导致中文注释全部乱码。
     虽然纯规则部分（英文）不受影响，但注释无法阅读、再编辑易出错。
     处理：转为 UTF-8 编码，并在首行保留 @charset "utf-8"; 声明。

   修复2  补齐 1201px ~ 1399px 区间空洞
     原写法：.sxzh_main{width:1400px}
             @media (max-width:1200px){width:100%}
     结果 1201px~1399px 区间仍是固定值 1400px，窗口装不下就横向溢出。
     1366x768 笔记本恰好落在此区间，页面底部出现横向滚动条。
     处理：统一改为 width:100% + max-width:Npx，
          各断点只调 max-width，不再出现区间空洞。

   修复3  425px 断点图片右侧空白 / 横向溢出
     原写法：.product-cen-list dl{width:100%; margin:1.5%}
     结果 100% + 1.5%x2 = 103%，超出 3%，
     这是移动端右侧空白、横向可以直接拖动的来源之一。
     处理：margin 改为 0 0 14px，宽度保持 100%。

   修复4  移动端字号 / 行高失控
     原写法：用 vw 计算（1vw=14px，以 1400px 为基准）写死成 px，
     换算后丢失响应性。例如 3.8vw 在 375px 屏上本应约 14px，
     却被固定成 53px，导致屏幕越小字号越大。
     典型症状：375px 时 h4 达 60px、desc 56px、行高 140px。
     处理：全部改为「屏幕越小、字号越小」的合理数值，
          并配合 line-clamp 限制行数，行高不再堆积。

   修复5  height 与 line-height 冲突
     原写法：dd h4{height:35px; line-height:45px; margin-bottom:22px}
     结果行高大于高度，文字溢出，叠加 margin 后实际占位 57px。
     处理：改为 height:auto + min-height + 合理行高，配合行数截断。

   修复6（本次新增）  siteInner 漏写点号
     原写法多处为 siteInner { ... }（缺前导点号），
     浏览器会当成「类型选择器」去匹配不存在的 <siteInner> 标签，
     这些规则 100% 从未生效，容器限宽居中实际失效。
     涉及断点：2000px / 1680~1999 / 1201~1679 / 1000~1200 /
               769~999 / 481~768 / 480
     处理：全部补回点号，改为 .siteInner { ... }

   ============================================================
   未改动说明
   ------------------------------------------------------------
   本文件不包含 .main-right / .mainContainer / .news-content
   等详情页专属选择器，也包含历史遗留的移动端字号问题。
   新闻详情页右侧「相关内容」列表的移动端表现，
   由 xw_xiangxi.css 与 xw-mobile.css 中的规则统一接管。
   ============================================================ */

/* ============================================================
   一、基础容器：弹性宽度，杜绝区间空洞
   ============================================================ */
.sxzh_main {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

/* 列表容器上下间距 */
.sxzh_cp_main {
    margin-bottom: 30px;
    margin-top: 30px;
}

/* ============================================================
   二、产品 / 新闻卡片
   ============================================================ */
.product-cen-list dl {
    float: left;
    width: 30.333333%;
    border: 1px solid #dfdfdf;
    margin: 1.5%;
    box-sizing: border-box;
}

.product-cen-list dt img {
    width: 100%;
    display: block;
    height: 220px;
    object-fit: cover;
}

.product-cen-list dd {
    height: auto;
    padding: 6px 20px 15px 20px;
}

/* 标题：去掉硬编码 height，改用行数截断 */
.product-cen-list dd h4 {
    height: auto;
    min-height: 24px;
    font-weight: normal;
    font-size: 17px;
    color: #4b4b4b;
    line-height: 1.5;
    margin-top: 12px;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
.product-cen-list h4 a {
    display: block;
    color: #4b4b4b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-cen-list dl:hover h4 a {
    color: #2D3436;
}

/* 描述：行数截断，不再写死 87px */
.product-cen-list-desc {
    font-size: 14px;
    line-height: 1.8;
    text-indent: 2em;
    color: #666;
    height: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.product-cen-list-deta {
    width: 100px;
    height: 40px;
    display: inline-block;
    border: 1px solid #aaa;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

.product-cen-list dl:hover {
    border-color: #2D3436;
}
.product-cen-list dl:hover .product-cen-list-deta {
    background: #2D3436;
    border-color: #2D3436;
}
.product-cen-list dl:hover .product-cen-list-desc a {
    color: #2D3436;
}
.product-cen-list dl:hover .product-cen-list-deta a {
    color: #fff;
}

/* 列表浮动闭合：防止高度塌陷 */
.product-cen-list::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* ============================================================
   三、响应式：只设 max-width 闸值，不再出现固定宽度区间
   ============================================================ */

/* ---------- 超宽屏 (>=2000px) ---------- */
@media screen and (min-width: 2000px) {
    .sxzh_main { max-width: 2000px; }
    .sxzh_sm { width: 100%; max-width: 2000px; margin: 0 auto; }
    .siteInner { width: 100%; max-width: 2000px; margin: 0 auto; }

    .siteInner .headAndbtn .note {
        font-size: 20px;
        line-height: 1.9;
        color: #333;
        margin: 28px 0;
        text-indent: 2em;
    }

    .product-cen-list dl { margin: 1.4%; }
    .product-cen-list dt img { height: 200px; }
    .product-cen-list dd { padding: 6px 20px 15px 20px; }
    .product-cen-list dd h4 { font-size: 20px; }
    .product-cen-list-desc { font-size: 15px; -webkit-line-clamp: 4; line-clamp: 4; }
}

/* ---------- 大屏 (1680px ~ 1999px) ---------- */
@media screen and (min-width: 1680px) and (max-width: 1999px) {
    .sxzh_main { max-width: 1680px; }
    .sxzh_sm { width: 100%; max-width: 1680px; margin: 0 auto; }
    .siteInner { width: 100%; max-width: 1680px; margin: 0 auto; }

    .siteInner .headAndbtn .note { font-size: 21px; line-height: 1.9; }

    .product-cen-list dl { margin: 1.3%; }
    .product-cen-list dt img { height: 310px; }
    .product-cen-list dd { padding: 6px 15px 15px 15px; }
    .product-cen-list dd h4 { font-size: 21px; }
    .product-cen-list-desc { font-size: 18px; -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ---------- 标准桌面 (1201px ~ 1679px)：修复原区间空洞 ---------- */
@media screen and (min-width: 1201px) and (max-width: 1679px) {
    .sxzh_main { max-width: 1400px; }
    .sxzh_sm { width: 100%; max-width: 1400px; margin: 0 auto; }
    .siteInner { width: 100%; max-width: 1400px; margin: 0 auto; }

    .siteInner .headAndbtn .note { font-size: 18px; line-height: 1.9; }
    .product-cen-list dl { margin: 1.4%; }
    .product-cen-list dt img { height: 220px; }
    .product-cen-list dd { padding: 6px 15px 15px 15px; }
    .product-cen-list dd h4 { font-size: 18px; }
    .product-cen-list-desc { font-size: 15px; }
}

/* ---------- 小笔记本 / 平板横屏 (1000px ~ 1200px) ---------- */
@media screen and (min-width: 1000px) and (max-width: 1200px) {
    .sxzh_sm { width: 100%; margin: 0 auto; }
    .siteInner { width: 100%; margin: 0 auto; }

    .siteInner .headAndbtn .note { font-size: 17px; line-height: 1.9; }
    .product-cen-list dl { margin: 1.4%; }
    .product-cen-list dt img { height: 220px; }
    .product-cen-list dd { padding: 6px 15px 15px 15px; }
    .product-cen-list dd h4 { font-size: 17px; }
    .product-cen-list-desc { font-size: 14px; }
}

/* ---------- 平板竖屏 (769px ~ 999px)：2 列 ---------- */
@media screen and (min-width: 769px) and (max-width: 999px) {
    .sxzh_sm { width: 100%; }
    .siteInner { width: 100%; }

    .siteInner .headAndbtn .note {
        font-size: 16px;
        line-height: 1.9;
        margin: 16px 0;
        text-indent: 2em;
    }

    .product-cen-list dl {
        float: left;
        width: 47%;
        margin: 1.5%;
        box-sizing: border-box;
    }
    .product-cen-list dt img { height: 230px; }
    .product-cen-list dd { padding: 6px 15px 15px 15px; }
    .product-cen-list dd h4 { font-size: 16px; }
    .product-cen-list-desc { font-size: 14px; }

    .headAndbtn .cn { line-height: 1.4; font-size: 18px; }
    .headAndbtn .more { font-size: 16px; line-height: 1.4; }
}

/* ---------- 手机横屏 / 大屏手机 (481px ~ 768px)：2 列 ---------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .sxzh_main { padding-left: 12px; padding-right: 12px; }
    .sxzh_sm { width: 100%; }
    .siteInner { width: 100%; }

    .siteInner .headAndbtn .note {
        font-size: 15px;
        line-height: 1.9;
        margin: 14px 0;
        text-indent: 2em;
    }

    .product-cen-list dl {
        width: 47%;
        margin: 1.5%;
        box-sizing: border-box;
    }
    .product-cen-list dt img {
        display: block;
        height: auto;
        width: 100%;
        aspect-ratio: 4 / 3;
        -webkit-aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .product-cen-list dd { padding: 6px 12px 12px 12px; }
    .product-cen-list dd h4 { font-size: 15px; }
    .product-cen-list-desc { font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; }

    .siteInner .headAndbtn h3 { font-size: 20px; margin: 16px 0; }
    .headAndbtn .cn { line-height: 1.4; font-size: 16px; }
    .headAndbtn .more { font-size: 14px; line-height: 1.4; }
}

/* ---------- 小屏手机 (<=480px)：1 列，修复 103% 溢出 ---------- */
@media screen and (max-width: 480px) {
    .sxzh_main { padding-left: 10px; padding-right: 10px; }
    .sxzh_sm { width: 100%; }
    .siteInner { width: 100%; }

    .siteInner .headAndbtn .note {
        font-size: 14px;
        line-height: 1.9;
        margin: 12px 0;
        text-indent: 2em;
    }

    /* 修复原写法 width:100% + margin:1.5% = 103% 导致的溢出 */
    .product-cen-list dl {
        float: none;
        width: 100%;
        margin: 0 0 14px 0;
        box-sizing: border-box;
    }
    .product-cen-list dt img {
        display: block;
        height: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
        -webkit-aspect-ratio: 16 / 9;
        object-fit: cover;
    }
    .product-cen-list dd { padding: 6px 12px 12px 12px; }
    .product-cen-list dd h4 { font-size: 15px; }
    .product-cen-list-desc { font-size: 13px; -webkit-line-clamp: 2; line-clamp: 2; }

    .siteInner .headAndbtn h3 { font-size: 19px; margin: 14px 0; }
    .headAndbtn .cn { line-height: 1.4; font-size: 15px; }
    .headAndbtn .more { font-size: 13px; line-height: 1.4; }
}

/* ---------- 超小屏 (<=360px) ---------- */
@media screen and (max-width: 360px) {
    .sxzh_main { padding-left: 8px; padding-right: 8px; }

    .siteInner .headAndbtn .note { font-size: 13px; line-height: 1.85; }
    .product-cen-list dd { padding: 6px 10px 10px 10px; }
    .product-cen-list dd h4 { font-size: 14px; }
    .product-cen-list-desc { font-size: 12px; }

    .siteInner .headAndbtn h3 { font-size: 17px; }
    .headAndbtn .cn { font-size: 14px; }
    .headAndbtn .more { font-size: 12px; }
}

/* ============================================================
   四、兜底：确保 .siteInner 生效（无害，可保留）
   ============================================================ */
.siteInner { width: 100%; max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
@media screen and (min-width: 2000px) { .siteInner { max-width: 2000px; } }
@media screen and (min-width: 1680px) and (max-width: 1999px) { .siteInner { max-width: 1680px; } }

/* ============================================================
   通用补充样式 · 结束
   ============================================================ */