@charset "utf-8";
/* ============================================================
   手机自适应覆盖层 (responsive.css)   2026-10-02
   ------------------------------------------------------------
   站点原为 980px 定宽表格布局。本文件全部规则都在 @media 窄屏块内，
   桌面端 (>768px) 的显示与原站完全一致，不受任何影响。

   核心做法(经实测):
   1) 只把 td 转 block / 只把 tr 转 block 都没用 —— 只要 tbody 或 table
      还留在表格模型里，浏览器就会生成“匿名表格包装盒”，把单元格重新
      按表格排到同一行，导致右侧溢出。
   2) 因此必须把整条链统一转成块级: table, thead, tbody, tfoot, tr。
      这样表格盒子全部消失，不再产生匿名包装。
   3) 单元格默认转 inline-block 且宽度自动: 小格子(序号/图标/广告格)会自动
      换行成一行多个；宽格子因 min(可用宽度, max-content) 自动占满一行。
   4) 含整宽子表(面板/标题条)或百分比宽的格子，强制独占整行。
   5) 图片 / iframe / 表单自适应 + 页头页脚(af- 与 jc- 前缀组件)专门适配。

   断点: 768px (手机横屏 / 平板竖屏)、480px (手机竖屏)
   注意: 本文件注释内不得出现“星号加斜杠”的字符组合，否则会提前闭合注释。
   ============================================================ */

@media only screen and (max-width: 768px) {

  /* ---------- 0. 根容器 ---------- */
  html, body {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* ---------- A. 定宽容器流体化 ---------- */
  table[width] { max-width: 100% !important; }
  table[width$="%"] { width: 100% !important; }

  /* ---------- B. 表格链整体块级化(关键) ---------- */
  table, thead, tbody, tfoot, tr { display: block !important; }

  /* ---------- C. 单元格默认行内块: 小格子自动换行 ---------- */
  td, th {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    vertical-align: top;
    box-sizing: border-box;
  }
  /* 固定 height 的格子转块级后装不下换行内容，溢出会盖住下一行
     (产品分类重叠与招商代理叠字的根因: td height=62 / table height=23) */
  td[height], th[height], tr[height], table[height] {
    height: auto !important; min-height: 0 !important;
  }

  /* ---------- D. 宽格子独占整行 ---------- */
  td[width$="%"], th[width$="%"],
  td:has(> table[width="100%"]), th:has(> table[width="100%"]) {
    display: block !important;
    width: 100% !important;
  }
  /* 面板标题条 / 分隔条等整宽条带 */
  td.classborder, td.classborder2, td.right-border, td.left-border, td.mid-border {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---------- D2. 行内写死的宽度 / 外边距 / 缩进 ----------
     旧站的正文多由 Word 粘贴而来，带着 margin-left:683.8pt、width:405px 这类
     行内声明，窄屏下会把内容顶出屏幕。这里统一在窄屏下收口。 */
  [style*="width:"] {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  [style*="margin-left"], [style*="margin-right"], [style*="text-indent"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-indent: 0 !important;
  }

  /* ---------- E. 图片 / 媒体 / 表单自适应 ---------- */
  img { max-width: 100%; }
  img[src*="ploadfiles"] { height: auto !important; }
  iframe { max-width: 100% !important; }
  input[type="text"], input[type="password"], input[type="file"],
  textarea, select {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  textarea { width: 100% !important; }

  /* ---------- F. 页头 / 导航 / 页脚 (af- 前缀组件) ---------- */
  .af-wrap {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  .af-utility-in, .af-head-in, .af-search-in { flex-wrap: wrap; }
  .af-head-in { gap: 10px; padding: 8px 0; }
  .af-logo img { height: 42px; }
  .af-hbanner { flex: 1 1 100%; }
  .af-hbanner img { max-width: 100%; height: auto; }
  .af-nav-list { flex-wrap: wrap; }
  .af-nav-list li { flex: 1 1 25%; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .af-nav-list li a { padding: 0 4px; line-height: 38px; font-size: 14px; letter-spacing: 1px; }
  .af-nav-list li.af-nav-img { display: none; }
  .af-search-in { flex-direction: column; align-items: stretch; gap: 8px; }
  .af-searchform { width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .af-input { width: auto !important; flex: 1 1 120px; min-width: 0; }
  .af-radios { flex: 1 1 100%; margin-left: 0; margin-top: 0; white-space: normal; }
  .af-search-ad img { max-width: 100%; height: auto; }
  .af-login table, .af-login thead, .af-login tbody, .af-login tr,
  .af-login td, .af-login th {
    display: block !important;
    width: auto !important;
  }
  .af-login input[type="text"], .af-login input[type="password"] { width: 150px; }
  .af-footer-links a { margin: 0 8px; display: inline-block; }

  /* ---------- F2. jc 技术子站页头 ---------- */
  .jc-notice-in, .jc-utility-in, .jc-head-in, .jc-nav-in {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }
  .jc-welcome { float: none; width: auto !important; }
  .jc-login { float: none; }
  .jc-login table, .jc-login thead, .jc-login tbody, .jc-login tr,
  .jc-login td, .jc-login th {
    display: block !important;
    width: auto !important;
  }
  .jc-nav-list { flex-wrap: wrap; }
  .jc-nav-list li { flex: 1 1 25%; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .jc-nav-list li a { padding: 0 4px; line-height: 38px; font-size: 14px; letter-spacing: 1px; }
  .jc-nav-list li.jc-nav-img { display: none; }

  /* ---------- F3. 其他定宽组件 ---------- */
  table.classborder2 { width: 100% !important; max-width: 100% !important; }

  /* ---------- F4. 手机端隐藏登录框与广告 ---------- */
  .af-login, .jc-login { display: none !important; }
  .af-hbanner, .af-search-ad { display: none !important; }
  .af-ad { display: none !important; }
  /* 手机端隐藏：综合新闻图文块 / 推荐品牌 / 安防展会 / 文章排行榜（index.aspx 标记） */
  .af-mhide, .af-mhide.af-mhide { display: none !important; }
  /* 手机端隐藏：页顶更名公告条（af-notice 与 jc-notice） */
  .af-notice, .jc-notice { display: none !important; }

  /* ---------- F5. 窄栏频道放开为整行宽 ---------- */
  /* 首页今日关注 / 安防产品 / 招商代理 / 工程信息等窄栏，内部列表行
     是固定像素宽的 div 与小表，手机端块级化后仍只有窄条；统一放开，
     使这些栏目与其他频道一样占满整行 */
  .left-border div { width: auto !important; max-width: 100%; box-sizing: border-box; }
  table[width="219"], table[width="234"], table[width="237"], table[width="241"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* 首页并排窄栏（今日关注/综合新闻/安防产品/招商代理/工程信息）：
     行内块收缩适应受嵌套百分比表循环约束，展开后不足整行，强制块级占满 */
  td.af-fluid { display: block !important; width: 100% !important; max-width: 100% !important; }
  /* af-fluid 栏位内部仍是行内块的大格（328=今日关注外层、262=安防产品外层） */
  td[width="328"], td[width="262"] { display: block !important; width: 100% !important; max-width: 100% !important; }
  /* 最新产品等图片卡是浮动 div，块级化后浮动溢出内容格，后续频道表格会环绕
     叠在图卡旁；给内容格加自清除，使后续内容从图卡下方另起一行 */
  td.left-border::after { content: ""; display: block; clear: both; }

  /* ---------- F6. 频道标题栏：右侧更多/日期/子栏目与名称同行 ---------- */
  /* 标题栏按左右百分比分的 td 在手机端被 D 规则改成块级各占整行，
     右侧的「更多>>」、日期、「政策解读」等被挤到下一行；
     这里让标题栏行改为弹性布局：名称在左，右侧内容贴右同行 */
  table.classborder > tbody > tr,
  td.classborder > table > tbody > tr {
    display: flex !important;
    width: 100% !important;
    align-items: center;
    flex-wrap: wrap;
  }
  table.classborder > tbody > tr > td:last-child,
  td.classborder > table > tbody > tr > td:last-child { margin-left: auto; }

  /* ---------- F7. 招商代理列表行：标题与地区同行 ---------- */
  /* 列表行内层表（width=237）的左右 td（74%/26%）被 D 规则块级化后，
     地区（全国、等）掉到标题下一行；改为 flex：标题在左、地区贴右。
     块级表 width:auto 会收缩适应内容，须显式 100% 才占满整行 */
  table[width="237"] { width: 100% !important; max-width: 100% !important; }
  /* 外层行格子（table height=26 内的 td align=center）也是行内块收缩，
     会把整行夹窄，强制块级占满 */
  table[height="26"] > tbody > tr > td { display: block !important; width: 100% !important; }
  table[width="237"] > tbody > tr {
    display: flex !important;
    width: 100% !important;
    align-items: center;
  }
  table[width="237"] > tbody > tr > td {
    display: inline-block !important;
    width: auto !important;
  }
  table[width="237"] > tbody > tr > td:last-child { margin-left: auto; }

  /* ---------- F8. 品牌榜 logo 两列居中 ---------- */
  /* logo 卡原为 float:left 固定 138px，手机端靠左挤成三列；
     改为 flex 换行居中，每行两张卡片 */
  td.pp-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    width: 100% !important;
  }
  .pp-grid > table { display: none !important; }  /* 清浮动的透明小表，flex 下是多余占位 */
  .pp-card { float: none !important; width: 138px !important; max-width: 100%; box-sizing: border-box; margin: 0 !important; }

  /* ---------- F10. 展会频道「合作展会」图片一列居中 ---------- */
  /* 5 张 230x120 展会横幅在右侧栏内左对齐堆叠；块级化后整表放开，
     行与格各占整行、文字居中，图片 inline 居中显示 */
  table.zh-ads { display: block !important; width: 100% !important; text-align: center; }
  table.zh-ads > tbody > tr,
  table.zh-ads > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    text-align: center;
  }
  table.zh-ads img { max-width: 100%; height: auto; }
  table.classborder > tbody > tr > td,
  td.classborder > table > tbody > tr > td {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---------- F9. 代理信息列表（dl_list）：四项一行对齐 ---------- */
  /* 表头（品种/区域/次数/日期）与数据行在手机端被块级化后逐项掉行；
     改为 flex 单行，数据行隐藏「【代理】」前缀格，四格与表头同比例对齐 */
  table.dl-head > tbody > tr,
  table.dl-row > tbody > tr {
    display: flex !important;
    width: 100% !important;
    align-items: center;
  }
  table.dl-head > tbody > tr > td,
  table.dl-row > tbody > tr > td {
    display: inline-block !important;
    box-sizing: border-box;
    font-size: 12px;
    overflow: hidden;
  }
  table.dl-row > tbody > tr > td:first-child { display: none !important; }  /* 【代理】前缀手机端省略 */
  table.dl-head > tbody > tr > td:nth-child(1),
  table.dl-row > tbody > tr > td:nth-child(2) { width: 37% !important; }
  table.dl-head > tbody > tr > td:nth-child(2),
  table.dl-row > tbody > tr > td:nth-child(3) { width: 28% !important; }
  table.dl-head > tbody > tr > td:nth-child(3),
  table.dl-row > tbody > tr > td:nth-child(4) { width: 15% !important; }
  table.dl-head > tbody > tr > td:nth-child(4),
  table.dl-row > tbody > tr > td:nth-child(5) { width: 20% !important; }

  /* ---------- G. 行距与小字 ---------- */
  td, th, div, p, span, font, li { line-height: 1.7; }
  font[size="1"], font[size="2"], .STYLE8, .STYLE1 { font-size: 12px !important; }
  .dht, .dht a { font-size: 13px; }

}

/* ============================================================
   480px 以下: 手机竖屏微调
   ============================================================ */
@media only screen and (max-width: 480px) {

  .af-wrap, .jc-notice-in, .jc-utility-in, .jc-head-in, .jc-nav-in {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .af-nav-list li { flex: 1 1 33.33%; }
  .af-nav-list li a { font-size: 13px; letter-spacing: 0; }
  .jc-nav-list li { flex: 1 1 33.33%; }
  .jc-nav-list li a { font-size: 13px; letter-spacing: 0; }
  .af-logo img { height: 36px; }
  img[src*="ploadfiles"] { max-width: 100% !important; }

}


/* ============================================================
   H. 桌面端加宽：980 → 1200（仅 ≥1200px 视口生效，手机端不受影响）
   外层容器与独立页容器 → 1200px；主体列 td 放开为 auto 吸收剩余
   宽度；主体内容表 → 100% 填满；横幅图随宽缩放（height:auto）。
   ============================================================ */
@media only screen and (min-width: 1200px) {

  body { min-width: 1200px; }

  /* 页头页脚新组件容器（style.css / jc/style.css） */
  .af-wrap { width: 1200px !important; }
  .jc-notice-in, .jc-utility-in, .jc-head-in, .jc-nav-in { width: 1200px !important; }

  /* 外层容器与独立页容器 → 1200px */
  table[width="980"], td[width="980"],
  table[width="946"], table[width="948"], table[width="950"],
  table[width="952"], table[width="1000"] { width: 1200px !important; }

  /* 通栏横幅图随宽缩放，高度按比例 */
  img[width="980"] { width: 1200px !important; height: auto !important; }
  img[width="755"] { width: 100% !important; height: auto !important; }

  /* 嵌套的主体内容表填满所在列 */
  table[width="704"], table[width="730"], table[width="778"],
  table[width="777"], table[width="944"], table[width="978"] { width: 100% !important; }

  /* 主体列 td 放开为 auto，吸收 1200 减去侧栏后的剩余宽度 */
  td[width="615"], td[width="618"], td[width="638"], td[width="674"],
  td[width="675"], td[width="700"], td[width="710"], td[width="713"],
  td[width="730"], td[width="740"], td[width="745"], td[width="750"],
  td[width="754"], td[width="757"], td[width="760"], td[width="772"],
  td[width="778"], td[width="780"], td[width="782"], td[width="796"],
  td[width="909"], td[width="927"] { width: auto !important; }

}