@charset "utf-8";
/* ==========================================================================
   zhmachine.com 响应式样式层  responsive.css
   --------------------------------------------------------------------------
   设计原则：本文件所有规则都写在媒体查询内 —— 桌面端（>1000px）渲染完全不受影响。
   覆盖对象：模板 NEST12018 的固定 977px 版式。经大小写不敏感全量扫描，站内固定宽度如下
     #itop 977 / #header 977 / .menu 977 / #imain 977 / #fooer 977（页脚，模板把 footer 拼成 fooer）
     正文表格两栏：td#ileft(254px) + td#iright(首页) / td.right(其余 243 页)
     其他：#login 500 / .topnav 450 / .dn 650 / .container2 650 / #demo1p 550 /
           .downlist_l 350 / .contacty1·2 332 / #comment_list .border 400 / #fromtinner_ 300
   断点：1000px（平板 / 横屏手机）→ 768px（竖屏手机）→ 480px（小屏手机）
   ========================================================================== */

/* ===== ≤1000px：外层与页脚改流式 · 两栏纵向堆叠 · 导航改横向滑动条 ===== */
@media (max-width: 1000px) {

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

  /* 1) 固定宽容器 → 流式（含页脚 #fooer 与模板错误页 #errorXxx） */
  div#itop,
  div#header,
  div#imain,
  div.menu,
  div#fooer,
  div#iboxfoot,
  div.footnav,
  div.copyright,
  #errorMessage,
  #errorStackTitle,
  #errorTemplateCode,
  #errorStackInfo { width: auto; max-width: 100%; box-sizing: border-box; }

  div#itop { padding: 0 12px; }
  div#header { padding: 0 12px; }
  div#imain { padding: 16px 12px; }
  div.menu { height: auto; padding: 0 12px 8px; }
  div#fooer { padding: 15px 12px 0; }
  div.footnav,
  div.copyright { padding-left: 0; padding-right: 0; }

  /* 2) 顶部登录条：原 500px 左浮动 + 450px 右浮动 → 纵向堆叠 */
  div#login,
  div.topnav { float: none; width: auto; text-align: left; }
  div#login { padding: 2px 0; }
  div.topnav { padding: 2px 0 6px; }

  /* 3) 主导航：原绝对定位 dl + 浮动 dd → 静止流 + 横向可滑动
        （保留全部 8 个入口，不依赖 JS，触摸可左右滑动） */
  div.menu dl {
    position: static;
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  div.menu dl dd { float: none; display: inline-block; vertical-align: top; }
  div.menu dl dd a {
    width: auto;
    min-width: 84px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 15px;
  }

  /* 4) 正文表格两栏 → 纵向堆叠
        注意：首页右栏是 td#iright，其余 243 页是 td class="right"，两者都要覆盖
        table/tbody/tr/td 需整链改 block，否则表单元格无法堆叠 */
  div#imain > table,
  div#imain > table > tbody,
  div#imain > table > tbody > tr { display: block; width: 100%; }

  div#imain > table > tbody > tr > td#ileft,
  div#imain > table > tbody > tr > td#iright,
  div#imain > table > tbody > tr > td.right {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    float: none;
    box-sizing: border-box;
  }
  div#imain > table > tbody > tr > td#ileft { padding-right: 0; margin-bottom: 16px; }

  /* 5) 图片与横幅自适应（logo 550px / 横幅 940px 等比缩小） */
  div#imain img,
  div#header img,
  div#iboxtop img { max-width: 100%; height: auto; }
  div.ibanner img { width: 100%; max-width: 100%; height: auto; }

  /* 6) 产品网格：5 列 → 3 列，并按 3 列重算换行清除
        （页面级样式里的 5n+1 clear 在此被中和；body 前缀提升特异性） */
  body div.pro_list > div { width: 31.5% !important; }
  body div.pro_list > div:nth-of-type(5n+1) { clear: none; }
  body div.pro_list > div:nth-of-type(3n+1) { clear: both; }

  /* 7) 已知固定宽块 → 自适应 */
  .dn,
  #demo1p,
  .container2,
  .downlist_l,
  .downlist_m,
  .downlist_r,
  .downlist_l ul li,
  .downlist_m ul li,
  .downlist_r ul li { width: auto !important; max-width: 100%; float: none; }
  #demo1p,
  .dn { overflow: hidden; }
}

/* ===== ≤768px：进一步单栏化 · 网格 2 列 · 宽表格不撑破页面 ===== */
@media (max-width: 768px) {

  /* 页头表格（logo 单元格）居中，避免左右挤压 */
  div#header > table,
  div#header > table > tbody,
  div#header > table > tbody > tr { display: block; width: 100%; }
  div#header > table td { display: block; width: auto; text-align: center; }

  /* 产品网格 3 列 → 2 列 */
  body div.pro_list > div { width: 47% !important; }
  body div.pro_list > div:nth-of-type(3n+1) { clear: none; }
  body div.pro_list > div:nth-of-type(2n+1) { clear: both; }

  /* 内容区表格与其中的图片不超出容器（含内页嵌套的固定宽单元格） */
  td#iright table,
  td.right table,
  td#iright img,
  td.right img { max-width: 100%; height: auto; }

  /* 下载列表（.downlist_l/m/r 三栏 350+100+150）与宽表 → 本区域内横向滚动 */
  .downlist { display: block; width: 100%; max-width: 100%; overflow-x: auto; }

  /* 联系页两栏（各 332px）→ 上下堆叠 */
  .contacty1,
  .contacty2 { width: auto !important; max-width: 100%; float: none; display: block; }

  /* 评论/留言区固定宽块 */
  #comment_list .border { width: auto !important; max-width: 100%; }

  /* 走进我们：取消图片右浮动，避免正文被挤成窄列 */
  div.icompany img { float: none; display: block; margin: 0 auto 10px; }

  /* 标题条改自适应高度，页脚换行更宽松 */
  div.ititle,
  div.ititrn { height: auto; min-height: 36px; overflow: hidden; }
  div.footnav { line-height: 2; }
  div.copyright { text-align: left; }
  div.place { float: none; padding-right: 0; }
}

/* ===== ≤480px：小屏微调 ===== */
@media (max-width: 480px) {

  div#itop { padding: 0 10px; }
  div#header { padding: 0 10px; }
  div#imain { padding: 12px 10px; }
  div.menu { padding: 0 10px 8px; }
  div#fooer { padding: 12px 10px 0; }
  div.menu dl dd a { min-width: 74px; padding: 0 8px; font-size: 14px; }

  /* 网格保持 2 列，缩略图与标题同步缩小 */
  body div.pro_list > div { width: 47% !important; }
  div.pro_list h2,
  div.pro_list h2 a { width: 104px; height: 104px; }
  div.pro_list h2 img { max-width: 104px; height: auto; }
  div.pro_list h3 { height: 54px; }

  /* 表单输入框在窄屏占满可用宽度 */
  #fromtinner_ TEXTAREA,
  #fromtinner_ .border { width: 100% !important; max-width: 100%; box-sizing: border-box; }

  div.ibanner { padding: 3px; margin-bottom: 10px; }
  div#iitop { font-size: 12px; }
  div.copyright,
  div.footnav { font-size: 12px; }
}