@charset "utf-8";
/* ==========================================================================
   Lakeland 移动端适配样式表  mobile.css
   --------------------------------------------------------------------------
   作用：在 ≤768px 视口下重排全站布局（960px 定宽 -> 流式单列）
   加载：在各页面 </head> 中以 <link rel="stylesheet" href="/skin/mobile.css"> 引入
   设计原则：
     1. 只写移动端覆盖规则，PC 端 (>768px) 完全沿用 index.css 原样，零回归风险
     2. 依据动易 SiteWeaver 模板的真实 DOM 结构编写，不臆造类名
        (#head/.logo/.head_right/#nav/#search/.search_input/#main/#left/#center
         /#list/.list_01/.list_02/.sideleft/.left_01/.left_02/.left_03
         /#foot/.foot_01/.foot_02/.product1/.productname/.Thum/.jieshao
         /.dianhua/.wenzi/.neirong/.knowledge/.Ktitle/.Kcontent/.page)
     3. 移动端信息架构重排：
        - 顶部：Logo + 热线（可点击拨号）置顶，电话优先
        - 导航：横向可滑动，隐藏分隔符
        - 搜索：整行铺满，热门词换行
        - 主体：左栏目录折叠到内容之上，产品 2 列，卡片化
        - 隐藏：友情链接大表、样册下载图、桌面冗余模块
        - 底部：底部固定操作条（电话/咨询）
   ========================================================================== */

/* ---------- 1. 基础重置与容器 ---------- */
@media screen and (max-width: 768px) {

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

  body {
    font-size: 14px;
    line-height: 1.6;
    background: #f5f5f5;
    overflow-x: hidden;
  }

  /* 动易模板用 <center> 包裹整站，移动端改为块级并解除居中约束 */
  body > center { display: block; width: 100%; }

  /* 所有定宽容器改为流式 */
  #head, #nav, #search, #main, #center, #list, #foot {
    width: auto !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 通用内边距：让内容不贴边 */
  #main { padding: 0 8px 60px; }

  /* ---------- 2. 顶部：Logo + 热线 ---------- */
  #head {
    height: auto !important;
    padding: 10px 12px 12px;
    background: #fff;
    background-image: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }

  #head .logo {
    width: auto;
    height: auto;
    float: none;
    margin: 0 0 8px;
    text-align: center;
  }

  #head .logo img {
    max-width: 62%;
    height: auto;
    display: inline-block;
  }

  /* 热线：移动端最重要的转化入口，单独成行、放大、可点击 */
  #head .head_right {
    width: 100%;
    float: none;
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: #666;
    line-height: 1.7;
  }

  #head .head_right span {
    font-size: 20px;
    color: #e4393c;
    font-weight: bold;
    display: inline-block;
  }

  /* 工作时间在移动端降级，避免占据首屏黄金位 */
  #head .head_right:nth-of-type(3) {
    font-size: 12px;
    color: #999;
  }

  /* ---------- 3. 主导航：横向滑动 ---------- */
  #nav {
    height: auto !important;
    padding: 0 4px;
    background: #2f6b34;
    background-image: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  #nav::-webkit-scrollbar { display: none; }

  #nav a {
    display: inline-block;
    line-height: 40px;
    margin: 0 !important;
    padding: 0 12px;
    font-size: 14px;
    color: #fff !important;
    text-decoration: none;
  }
  #nav a:hover { text-decoration: none; color: #ffd700 !important; }

  /* 隐藏导航分隔符: 模板中为 <A href="|">|</A> */
  #nav a[href="|"], #nav a[href="| "], #nav a[href="|"] { display: none; }

  /* ---------- 4. 搜索区 ---------- */
  #search {
    height: auto !important;
    padding: 10px 12px;
    background: #fff;
    background-image: none !important;
    text-align: center;
  }

  #search .search_input {
    float: none !important;
    margin: 0 0 8px !important;
    text-align: center;
    width: 100%;
    overflow: visible;
  }

  /* 搜索表单由 ShowSearchForm.js 用 document.write 生成 table 结构:
     <table><form><select Field><select ClassID><input text name=keyword><input submit></form></table>
     移动端把该 table 转为块级, select/input 依次换行铺满 */
  #search .search_input table {
    width: 100% !important;
    border: 0 !important;
    display: block;
  }
  #search .search_input td {
    display: block;
    width: 100% !important;
    height: auto !important;
    padding: 0 0 8px;
    text-align: center;
  }
  #search .search_input select {
    width: 100% !important;
    height: 38px;
    font-size: 15px;
    padding: 0 6px;
    margin: 0 0 8px;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
  }
  #search .search_input input[type="text"],
  #search .search_input input[name="keyword"] {
    width: 100% !important;
    max-width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;   /* 16px 可避免 iOS Safari 聚焦时自动放大 */
    padding: 0 10px;
    background-image: none !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px;
    box-sizing: border-box;
    text-align: center;
  }
  #search .search_input input[type="submit"] {
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 16px;
    border: 0;
    border-radius: 4px;
    background: #4a9b4e;
    color: #fff;
    cursor: pointer;
  }

  /* 搜索输入框与按钮放大到手指友好尺寸 */
  #search .search_box {
    width: 100% !important;
    max-width: 100%;
    height: 38px;
    line-height: 38px;
    font-size: 15px;
    padding: 0 10px;
    background-image: none !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px;
    box-sizing: border-box;
  }

  #search .gj_search { display: none; }

  #search .key {
    float: none;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
    line-height: 2;
  }
  #search .key a {
    float: none;
    display: inline-block;
    margin: 0 6px !important;
    font-size: 12px;
    color: #7a7a7a;
    background: #f2f2f2;
    padding: 3px 8px;
    border-radius: 12px;
  }

  /* ---------- 5. 主体两栏 -> 单列 ---------- */
  #main { overflow: visible; }

  #left {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }

  #center {
    width: 100% !important;
    float: none !important;
    overflow: visible;
    margin-top: 8px;
  }

  /* ---------- 6. 左栏：产品目录 + 文章列表 ---------- */
  .sideleft {
    width: 100% !important;
    padding-bottom: 0 !important;
    margin: 8px 0 !important;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
  }

  .left_01 {
    width: 100% !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 16px !important;
    padding-left: 12px !important;
    background: #4a9b4e;
    color: #fff;
    background-image: none !important;
  }

  .left_03 {
    width: 100% !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 15px !important;
    padding-left: 12px !important;
    background: #f7f7f7;
    background-image: none !important;
    border-bottom: 1px solid #eee;
  }

  /* 目录条目：横向排布两列，避免超长滚动 */
  .left_02 {
    width: 50% !important;
    float: left;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 9px 6px 9px 12px !important;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .left_02:nth-child(odd) { border-right: 1px solid #f0f0f0; }
  .left_02 img { display: none; }   /* 去掉小圆点箭头，移动端节省空间 */
  .left_02 a { font-size: 14px !important; }

  /* 清浮动，防止两列布局错乱 */
  .sideleft:after { content: ""; display: block; clear: both; }

  /* 友情链接大表：移动端无用且占屏，完全隐藏 */
  #left .sideleft table,
  #left table.tdbg,
  #left .tdbg { display: none !important; }

  /* 样册下载图片：移动端隐藏（图片本身是固定宽度大图） */
  #left > a img[src*="lkldown"] { display: none !important; }
  #left > a { display: none; }

  /* ---------- 7. 内容区模块卡片化 ---------- */
  #list {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 !important;
    padding-bottom: 10px !important;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .list_01 {
    width: 100% !important;
    font-size: 16px !important;
    background: #4a9b4e !important;
    color: #fff !important;
    padding: 0 12px !important;
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 6px 6px 0 0;
  }
  .list_01 a { color: #fff !important; margin-right: 12px !important; }
  .changpin { float: left; }

  /* 产品网格：4 列 -> 2 列 */
  .list_02 {
    width: 46% !important;
    float: left;
    margin: 8px 2% 8px 3% !important;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    padding-bottom: 6px;
  }
  .list_02:nth-child(odd) { margin-left: 3% !important; }
  .list_02 a {
    width: 100% !important;
    float: none !important;
    display: block;
    font-size: 12px !important;
    line-height: 18px !important;
    padding: 0 4px;
    margin: 5px 0 0 !important;
    color: #333 !important;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list_02 img, .list_02 .productpic img {
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  .list_02 .productpic { padding: 6px 6px 0; }

  /* 面包屑 */
  .about_01 {
    width: 100% !important;
    font-size: 13px;
    padding: 10px 12px !important;
    background: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---------- 8. 文章详情页 ---------- */
  .Title {
    font-size: 19px !important;
    line-height: 1.45;
    margin: 12px 12px 6px !important;
    text-align: left !important;
    color: #222;
    font-weight: bold;
  }

  .neirong {
    width: 100% !important;
    padding: 4px 12px 14px !important;
    line-height: 1.8 !important;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .neirong p { margin: 10px 0; }
  .neirong img, .neirong IMG {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 8px auto;
  }
  .neirong table { width: 100% !important; max-width: 100%; }
  .neirong td, .neirong th { word-break: break-all; }

  /* ---------- 9. 商品详情页 ---------- */
  .product1 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 12px;
    box-sizing: border-box;
  }

  .productname {
    padding: 12px 0 8px !important;
    font-size: 18px !important;
    line-height: 1.4;
  }

  .key { padding: 3px 0 !important; font-size: 13px; color: #666; }

  .xiangqing {
    padding: 12px 0 6px !important;
    font-size: 16px !important;
    color: #4a9b4e;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
  }

  /* 主图：居中且自适应 */
  .Thum {
    width: 100% !important;
    float: none !important;
    margin: 0 0 10px !important;
    text-align: center;
    clear: both;
  }
  .Thum img { max-width: 70%; height: auto !important; }

  /* 商品详情正文 */
  .jieshao {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    line-height: 1.8 !important;
    font-size: 14px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .jieshao img, .jieshao IMG {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
  }
  .jieshao table { width: 100% !important; }

  /* 电话与咨询模块：改为醒目的点击区 */
  .dianhua {
    width: 100% !important;
    float: none !important;
    margin: 12px 0 0 !important;
    text-align: center;
  }
  .dianhua img { max-width: 100%; height: auto; }

  .wenzi {
    width: 100% !important;
    float: none !important;
    margin: 8px 0 0 !important;
    padding: 0 12px 10px;
    line-height: 1.7 !important;
    font-size: 13px;
    color: #666;
    box-sizing: border-box;
  }

  /* ---------- 10. 列表/搜索结果页 ---------- */
  .knowledge {
    width: 100% !important;
    margin: 8px 12px !important;
    background: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    padding-bottom: 6px;
  }

  .Ktitle {
    width: 100% !important;
    font-size: 15px !important;
    padding: 10px 12px 4px;
    height: auto !important;
    line-height: 1.5 !important;
    box-sizing: border-box;
  }
  .Ktitle a { font-size: 15px !important; }

  .Kcontent {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 12px 10px !important;
    font-size: 13px;
    line-height: 1.7;
    color: #666;
    box-sizing: border-box;
  }

  .result {
    width: 100% !important;
    float: none !important;
    padding: 10px 12px !important;
    font-size: 14px;
    box-sizing: border-box;
  }
  .resultn { font-size: 16px !important; }

  .tupian {
    float: none !important;
    width: 100% !important;
    padding: 10px 12px !important;
    box-sizing: border-box;
  }
  .tupian img { max-width: 100%; height: auto; }

  .cloumn { width: 100% !important; }
  .page { width: 100% !important; font-size: 13px; }

  .leaveT, .leaveI, .butt { width: 100% !important; margin-left: 0 !important; }
  .leaveinput { width: 100% !important; float: none !important; height: 36px !important; }

  /* ---------- 11. 页脚 ---------- */
  #foot {
    height: auto !important;
    padding-bottom: 56px;
    background: #3a3a3a !important;
    background-image: none !important;
  }

  .foot_01 {
    width: 100% !important;
    height: auto !important;
    line-height: 2.2 !important;
    padding: 10px 12px !important;
    background: transparent !important;
    box-sizing: border-box;
  }
  .foot_01 a {
    float: none !important;
    display: inline-block;
    margin: 0 6px 0 0 !important;
    font-size: 12px;
  }

  .foot_02 {
    width: 100% !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #bbb;
    padding: 10px 12px 14px !important;
    line-height: 1.9 !important;
    box-sizing: border-box;
  }
  .foot_02 a { color: #ddd; }

  /* ---------- 12. 底部固定操作条 ---------- */
  .lk-mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    background: #fff;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .lk-mobile-bar a {
    flex: 1;
    text-align: center;
    padding: 9px 4px;
    font-size: 13px;
    text-decoration: none;
    color: #333;
    line-height: 1.3;
  }
  .lk-mobile-bar .lk-call {
    background: #e4393c;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    flex: 1.4;
  }
  .lk-mobile-bar .lk-ico { display: block; font-size: 17px; line-height: 1; margin-bottom: 2px; }

  /* ---------- 13. 通用可读性增强 ---------- */
  a { -webkit-tap-highlight-color: rgba(74,155,78,.15); }

  /* 长表格横向可滚动，避免撑破布局 */
  table { max-width: 100%; }

  /* 桌面用 hover 换色的元素在触屏上点击后保持高亮 */
  a:active { color: #e4393c; }

  /* 隐藏滚动条但保留滚动能力（横向导航） */
  .no-sb { scrollbar-width: none; }
  .no-sb::-webkit-scrollbar { display: none; }
}

/* ---------- 14. 超小屏 (≤360px) 微调 ---------- */
@media screen and (max-width: 360px) {
  body { font-size: 13px; }
  #head .head_right span { font-size: 18px; }
  .list_02 { width: 47% !important; margin-left: 2% !important; }
  .list_02:nth-child(odd) { margin-left: 2% !important; }
  .neirong { font-size: 14px; }
  .productname { font-size: 16px !important; }
}

/* ---------- 15. 平板 (769px-1024px) 过渡：定宽缩到可视区 ---------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  #head, #nav, #search, #main, #foot { width: 96% !important; }
  #center { width: 72% !important; }
  .neirong, .jieshao { max-width: 100%; }
}