@charset "utf-8";
/* ============================================================
   seo.css —— 语义标签样式补丁
   用途：把 <p> 换成 <h1>/<h2>/<h3> 之后，视觉与原版完全一致
   加载位置：必须在 style.css 之后（index 里已放在 </head> 前）
   说明：原 style.css 开头已有全局 reset
        （body,h1..h6,p,ul,li 全部 margin:0 padding:0 border:0）
        所以这里只补"字体/颜色/行高"这类随标签变化而丢失的规则，
        不需要重写盒模型，不会导致版面跳动。
   ============================================================ */


/* ---------- 1. 首页主标题 H1 ---------- */
/* 原页面没有 H1，这是新增元素。做成"板块标题"的视觉重量，
   不抢 banner 和原有 32px 标题的风头。 */
.seo-h1 {
    display: block;
    width: 100%;
    padding: 28px 16px 6px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #1e5aa1;
    line-height: 1.4;
    letter-spacing: .5px;
}
.seo-h1 span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: normal;
    color: #999;
    line-height: 1.6;
    letter-spacing: 1px;
}

@media (max-width: 768px) {
    .seo-h1 {
        padding: 18px 12px 4px;
        font-size: 17px;
        letter-spacing: 0;
    }
    .seo-h1 span {
        margin-top: 6px;
        font-size: 11.5px;
        letter-spacing: 0;
    }
}


/* ---------- 2. 板块标题 H2（原 .h_tlt1 p） ---------- */
/* 按原样式表的书写顺序照搬两条规则，保证层叠结果一致：
   最终生效 = font-size 24px / bold / #1e5aa1 / 居中 */
.h_tlt1 h2 {
    font-size: 32px;
    color: #1e5aa1;
    text-align: center;
}
.h_tlt1 h2 {
    font-size: 24px;
    font-weight: bold;
    color: #1e5aa1;
    text-align: center;
}


/* ---------- 3. 首页产品名 H3（原 .pro_bd li>div p a） ---------- */
.h_products .pro_bd ul li > div h3 a {
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
    color: #555;
    font-weight: bold;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block; /* 原 p 内 a 为 inline，改为 block 让省略号和上下间距真正生效 */
    text-decoration: none;
}
.h_products .pro_bd ul li > div h3 a:hover {
    color: #1e5aa1;
    text-decoration: none;
}


/* ---------- 4. 首页推荐问答标题 H3（原 .news_tj p a） ---------- */
.h_news .news_bd .news_tj h3 a {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    color: #1e5aa1;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    text-decoration: none;
}
.h_news .news_bd .news_tj h3 a:hover {
    color: #1e5aa1;
    text-decoration: none;
}


/* ---------- 5. 首页问答列表标题 H3（原 .news_con p a） ---------- */
.h_news .news_bd ul li .news_con h3 a {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #1e5aa1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.h_news .news_bd ul li:hover .news_con h3 a {
    color: #1e5aa1;
    text-decoration: none;
}


/* ---------- 6. 面包屑（内页用，首页不显示） ---------- */
.breadcrumb {
    width: 1200px;
    max-width: 96%;
    margin: 0 auto;
    padding: 14px 0 6px;
    font-size: 13px;
    color: #999;
    line-height: 1.8;
}
.breadcrumb a {
    color: #999;
    text-decoration: none;
}
.breadcrumb a:hover {
    color: #1e5aa1;
}
.breadcrumb span {
    color: #666;
}
@media (max-width: 768px) {
    .breadcrumb {
        font-size: 12px;
        padding: 10px 0 4px;
    }
}


/* ---------- 7. 屏幕阅读器专用文本 ---------- */
/* 给纯图片链接、图标按钮补可读文字，不占版面 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 8. 栏目页 H1（原为 H2，为补齐 H1 标签而升级） ---------- */
/* 原 <h2>{sort:name}</h2> 无对应样式，显示为浏览器默认 1.5em(24px) 粗体。
   改成 H1 后默认 2em(32px) 会变大，这里压回 24px，视觉零变化。 */
.ny_tlt1 h1 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
}
@media (max-width: 768px) {
    .ny_tlt1 { display: none; }  /* 与原移动端隐藏标题块的行为保持一致 */
}

/* ---------- 9. 详情页栏目名（原 H2，降级为 div，避免与正文 H2 抢层级） ---------- */
.tlt-txt {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.4;
}

/* ---- 首页新闻区块：左右两栏底部对齐（2026-11-01） ---- */
.h_news .news_bd .news_tj .news_tj_con { padding-bottom: 12px; }
.h_news .news_bd .news_tj .btn-more1 { margin-top: 4px; }

/* ---- 导航产品下拉菜单（桌面端，2026-11-02 对齐版） ---- */
@media (min-width: 769px) {
  #nav ul li { position: relative; }
  #nav ul li .prod-menu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #1e5aa1;
    padding: 4px 0;
    z-index: 3000;
  }
  #nav ul li:hover .prod-menu { display: block; }
  /* 覆盖导航 li 的 float/height，恢复竖排 */
  #nav .pm-cats li { float: none; height: auto; width: 100%; }
  #nav .pm-cats { margin: 0; padding: 0; list-style: none; }
  #nav .pm-cats li a {
    display: block; box-sizing: border-box;
    width: 100%; height: auto; padding: 0 4px;
    font-size: 17px; color: #fff; line-height: 46px;
    text-align: center; text-decoration: none; white-space: nowrap;
  }
  /* 干掉导航 a:hover:after 白色伪元素（会盖住菜单文字） */
  #nav .pm-cats li a:after { content: none; }
  #nav .pm-cats li a:hover { color: #1e5aa1; background: #fff; }
}

/* ---- 产品列表页类目筛选标签（2026-11-02） ---- */
.pro_tabs { display: flex; flex-wrap: wrap; gap: 8px 6px; margin: 0 0 18px; }
.pro_tabs a { padding: 6px 18px; font-size: 15px; color: #1e5aa1; background: #fff; border: 1px solid #1e5aa1; border-radius: 3px; text-decoration: none; cursor: pointer; }
.pro_tabs a:hover, .pro_tabs a.active { color: #fff; background: #1e5aa1; }
.pro_empty { display: none; padding: 36px 0; text-align: center; color: #666; font-size: 15px; }
.pro_empty a { color: #1e5aa1; }

/* ---- 产品网格 flex 化：筛选隐藏后仍保持整齐排列（2026-11-02） ---- */
@media (min-width: 993px) {
  .ny_products .pro_bd ul { display: flex; flex-wrap: wrap; }
  .ny_products .pro_bd ul li { float: none; width: calc((100% - 15%) / 3); margin-right: 5%; }
  .ny_products .pro_bd ul li:nth-child(3n) { margin-right: 5%; }
}
@media (max-width: 992px) and (min-width: 769px) {
  .ny_products .pro_bd ul { display: flex; flex-wrap: wrap; }
  .ny_products .pro_bd ul li { float: none; width: calc((100% - 8%) / 2); margin-right: 4%; }
  .ny_products .pro_bd ul li:nth-child(2n), .ny_products .pro_bd ul li:nth-child(3n) { margin-right: 4%; }
}

/* ============================================================
   移动端 UI 优化（2026-11-02）
   1) 产品卡 2 列网格（首页 + 列表页），图片压缩、标题两行省略
   2) 类目筛选标签改横向滑动
   3) 文章内表格横向滚动（对比表不再挤压换行）
   4) 页脚字号微调
   ============================================================ */
@media (max-width: 768px) {
  /* ---- 1. 产品卡 2 列 ---- */
  .h_products .pro_bd ul,
  .ny_products .pro_bd ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px;
  }
  .h_products .pro_bd ul li,
  .ny_products .pro_bd ul li {
    float: none;
    width: calc((100% - 10px) / 2) !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 6px;
    box-sizing: border-box;
  }
  /* 图片压缩：原 222~300px 固定高 → 视口比例 */
  .h_products .pro_bd ul li > div a .pro_img,
  .ny_products .pro_bd ul li > div a .pro_img {
    height: 44vw !important;
  }
  .pro_img img {
    max-width: 86%;
    max-height: 86%;
  }
  /* 标题：两行省略，替代原来的单行 30px 固定高 */
  .h_products .pro_bd ul li > div h3 a,
  .ny_products .pro_bd ul li > div h3 a,
  .ny_products .pro_bd ul li > div p a {
    height: auto !important;
    line-height: 1.45 !important;
    margin: 6px 0 4px !important;
    font-size: 13px !important;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 首页卡片上的灰色箭头按钮隐藏（列表页原已隐藏） */
  .h_products .pro_bd ul li > div span { display: none; }

  /* ---- 2. 筛选标签：两排网格（每行4个） ---- */
  .pro_tabs {
    flex-wrap: wrap;
    gap: 8px;
    overflow: visible;
    padding-bottom: 2px;
    margin-bottom: 16px;
  }
  .pro_tabs a {
    flex: 0 0 calc(25% - 6px);
    min-width: calc(25% - 6px);
    box-sizing: border-box;
    text-align: center;
    padding: 8px 4px;
    font-size: 14px;
    margin: 0;
    border-radius: 4px;
  }

  /* ---- 3. 文章表格横向滚动 ---- */
  #maximg table,
  .content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #maximg table td,
  #maximg table th,
  .content table td,
  .content table th {
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
  }

  /* ---- 4. 页脚 ---- */
  .foot2 p { font-size: 11px; line-height: 1.7; }
}

/* ============================================================
   移动端菜单修复（2026-11-02）
   问题：#nav ul li 在移动端仍带 float:left，菜单容器高度塌陷为 0，
        所有菜单项叠在一起；产品下拉菜单也被压扁。
   方案：移动端取消浮动、正常堆叠；子类目随菜单静态展开。
   ============================================================ */
@media (max-width: 768px) {
  #nav ul li {
    float: none !important;
    height: auto !important;
    width: 100%;
  }
  #nav ul li > a {
    float: none;
    height: auto !important;
    line-height: 46px;
    padding: 0 16px;
    position: static;
  }
  /* 关掉悬停白色伪元素（手机端点按会盖住文字） */
  #nav ul li > a:after { content: none !important; }
  /* 产品子类目：手机端取消显示（用户要求） */
  #nav ul li .prod-menu {
    display: none !important;
  }
  /* pm-cats 子类目样式已随菜单隐藏一并移除 */
}