/* ==========================================================================
   附99 · 移动端体验改造（对应需求文档 Code_20261005161743）
   原则：**只加不改** —— 全部用 @media 覆盖，不动任何 HTML 内容（SEO 约束）
   断点：≤900px 生效（需求二），与 klk-ui.css / klk-mobile-fix.css 同层加载
   变量：优先用既有站色（#0a6db5 主蓝 / #1a59b8 深蓝 / #0a3d24 深绿）
   ========================================================================== */

/* ---- 需求 1-2：容器与图片 ---- */
@media screen and (max-width:900px){
  .wrap,
  .s-inp,
  .content > div,
  .right_main > div{
    max-width:1200px !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
  img{
    max-width:100% !important;
    height:auto !important;
    display:block !important;
  }
}

/* ---- 需求 4：正文字号 ≥16px / 行高 1.7 ----
   🔴 用 1rem 基准而非硬编码 16px，避免覆盖用户浏览器字号设置 */
@media screen and (max-width:900px){
  body,
  .con_text,
  .con_text p,
  .klk-hero-sub,
  .right_main p,
  .list_con p,
  .s-inp p,
  article p,
  .nsbody p,
  .nsbody li,
  .nsbody td,
  .faq-a,
  .pillar-list p,
  .klk-adv p,
  .klk-area p{
    font-size:max(1rem, 16px) !important;
    line-height:1.7 !important;
  }
  /* 辅助信息类：不低于 14px（WCAG 允许，但比正文小一号） */
  .con_text small,
  .klk-hero-pills,
  .scn-list a,
  .klk-area-hd span,
  .site-info,
  .breadcrumb,
  .plc,
  .list-con-sub,
  .meta,
  .time{
    font-size:max(0.875rem, 14px) !important;
    line-height:1.6 !important;
  }
  /* 纯装饰性的小标签允许 13px（不承载关键信息） */
  .klk-bnav em,
  .tag,
  .badge{
    font-size:max(0.8125rem, 13px) !important;
  }
}

/* ---- 需求 5：标题用 clamp() 响应式缩放 ---- */
@media screen and (max-width:900px){
  h1{
    font-size:clamp(1.375rem, 5.2vw, 1.75rem) !important;
    line-height:1.35 !important;
  }
  h2{
    font-size:clamp(1.25rem, 4.6vw, 1.5rem) !important;
    line-height:1.4 !important;
  }
  h3{
    font-size:clamp(1.0625rem, 4vw, 1.25rem) !important;
    line-height:1.45 !important;
  }
  /* 首屏 H1 稍大一点，是移动端唯一的主标题 */
  .klk-hero h1,
  .klk-hero-title{
    font-size:clamp(1.5rem, 6vw, 2rem) !important;
    line-height:1.3 !important;
  }
}

/* ---- 需求 2：导航改汉堡菜单（≤900px 隐藏横排） ---- */
@media screen and (max-width:900px){
  .h_nav .clearfix,
  .h_nav > ul,
  .h_nav ul.clearfix{
    display:none !important;   /* 横排菜单隐藏（内容仍在 DOM，SEO 不损） */
  }
  .h_nav{
    position:relative !important;
    min-height:48px !important;
    display:block !important;
  }
}

/* 汉堡按钮 + 抽屉菜单（由 klk-nav-m.js 注入，不改模板 HTML） */
.klk-mnav{position:relative}
.klk-mnav-btn{
  position:absolute !important;right:8px !important;top:50% !important;
  transform:translateY(-50%) !important;
  width:44px !important;min-width:44px !important;   /* 需求二：44×44 点击区 */
  height:44px !important;min-height:44px !important;
  display:none;align-items:center !important;justify-content:center !important;
  background:#0a6db5 !important;border:0 !important;border-radius:6px !important;
  cursor:pointer !important;z-index:10001 !important;
  -webkit-tap-highlight-color:transparent;
  padding:0 !important;line-height:0 !important;box-sizing:border-box !important;
}
.klk-mnav-btn span,
.klk-mnav-btn span::before,
.klk-mnav-btn span::after{
  display:block;width:20px;height:2px;background:#fff;border-radius:2px;
  transition:transform .25s,opacity .2s;
}
.klk-mnav-btn span{position:relative}
.klk-mnav-btn span::before{content:"";position:absolute;top:-6px}
.klk-mnav-btn span::after{content:"";position:absolute;top:6px}
.klk-mnav-btn[aria-expanded="true"] span{background:transparent}
.klk-mnav-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.klk-mnav-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

.klk-mnav-panel{
  position:absolute;left:0;right:0;top:100%;z-index:10000;
  background:#fff;border-top:1px solid #e2e8f0;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  max-height:calc(100dvh - 120px);overflow-y:auto;
  display:none;
}
.klk-mnav-panel.on{display:block}
.klk-mnav-panel a{
  display:flex;align-items:center;
  min-height:48px;                   /* 需求二：每项 48px 高 */
  padding:0 18px;
  font-size:16px;color:#1f3d2b;text-decoration:none;
  border-bottom:1px solid #eef2f5;
}
.klk-mnav-panel a:active{background:#f2f7fa}
.klk-mnav-panel .mnav-tel{
  background:#0a6db5;color:#fff;font-weight:700;justify-content:center;
  border-bottom:0;margin:10px 14px;border-radius:8px;
  min-height:48px;
}
/* 打开时锁滚动 */
body.klk-mnav-open{overflow:hidden}

@media screen and (max-width:900px){
  .klk-mnav-btn{display:flex !important}
  /* 需求二5：手机端隐藏设为首页 / 加入收藏 / 繁體中文 */
  .h_top a[title*="设为首页"],
  .h_top a[title*="加入收藏"],
  .h_top a[title*="繁體"],
  .h-top a[href*="javascript:"],
  .h-con-t a[title*="繁體"]{
    display:none !important;
  }
}

/* ---- 需求 3：首页首屏两个大按钮 ---- */
.klk-hero-cta{
  display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px;
}
.klk-hero-cta a{
  flex:1 1 200px;min-width:150px;
  height:52px;                       /* 需求三：按钮高 52px */
  display:flex;align-items:center;justify-content:center;gap:8px;
  border-radius:8px;text-decoration:none;
  font-size:17px;font-weight:700;line-height:1;
  transition:transform .2s,box-shadow .2s;
}
.klk-hero-cta a:active{transform:scale(.97)}   /* 需求：点击收缩 0.95-0.97 */
.klk-hero-cta .cta-tel{background:#0a6db5;color:#fff;box-shadow:0 2px 8px rgba(10,109,181,.28)}
.klk-hero-cta .cta-form{background:#fff;color:#0a6db5;border:2px solid #0a6db5}
@media screen and (max-width:480px){
  .klk-hero-cta a{flex:1 1 100%}      /* 窄屏上下排列，避免挤成两小按钮 */
}
@media screen and (min-width:901px){
  .klk-hero-cta{max-width:520px}
}

/* ---- 需求 4：服务区九宫格 → 2 列卡片 ---- */
@media screen and (max-width:900px){
  /* 兼容多种可能的类名：按 DOM 结构兜底 */
  .pro-thumbs,
  .service_con ul,
  .service-item,
  .pillar-list,
  .klk-srv-grid,
  .jz-l ul,
  #service ul,
  .index-service ul{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
  }
  .pro-thumbs > li,
  .pillar-list li,
  .service_con li,
  .service-item,
  .klk-srv-grid li{
    width:auto !important;float:none !important;margin:0 !important;
  }
  /* 卡片化：白底 + 圆角 + 描边 + 可点感 */
  .pro-thumbs > li > a,
  .pillar-list li a,
  .service_con li a,
  .klk-srv-grid li a{
    display:flex !important;flex-direction:column;align-items:center;justify-content:flex-start;
    min-height:128px;padding:14px 10px !important;
    background:#fff !important;
    border:1px solid #dde7ee !important;
    border-radius:8px !important;     /* 需求四：圆角 8px */
    box-shadow:0 1px 3px rgba(16,40,58,.06);
    text-align:center;
  }
  .pro-thumbs > li > a:active,
  .pillar-list li a:active,
  .service_con li a:active{transform:scale(.97)}
  .pro-thumbs > li > a img,
  .pillar-list li a img,
  .service_con li a img,
  .klk-srv-grid li a img{width:44px !important;height:44px !important;margin:0 0 8px !important}
  .pro-thumbs > li > a em,
  .pro-thumbs > li > a span,
  .pillar-list li a em,
  .service_con li a em,
  .klk-srv-grid li a em{
    display:block !important;font-style:normal !important;
    font-size:15px !important;line-height:1.4 !important;color:#1f3d2b !important;
  }
  /* 卡片间距 12px（grid-gap 已设），箭头 */
    /* 附100：箭头已移除（用户要求）*/
}

/* ---- 需求 5：数据条 2×2 ---- */
@media screen and (max-width:900px){
  .jz-l ul,
  .klk-num,
  .num-list,
  .advantage,
  .klk-advantage,
  .count-bar,
  .index-count ul{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:12px !important;
  }
  .jz-l ul > li,
  .klk-num li,
  .num-list li,
  .advantage li,
  .klk-advantage li,
  .count-bar li,
  .index-count li{
    float:none !important;width:auto !important;margin:0 !important;
    text-align:center;background:#f7fafc;border:1px solid #e2e8f0;
    border-radius:8px;padding:14px 8px !important;
  }
  /* 数字大号、说明小号 */
  .jz-l ul > li b,
  .jz-l ul > li strong,
  .jz-l ul > li em,
  .klk-num li b,
  .klk-num li strong,
  .num-list li b,
  .num-list li strong,
  .advantage li b,
  .klk-advantage li b,
  .count-bar li b,
  .count-bar li strong{
    display:block !important;
    font-size:clamp(1.5rem, 7vw, 2rem) !important;
    line-height:1.1 !important;color:#0a6db5 !important;margin-bottom:2px !important;
  }
  .jz-l ul > li span,
  .klk-num li span,
  .num-list li span,
  .advantage li span,
  .klk-advantage li span,
  .count-bar li span,
  .count-bar li em{
    display:block !important;font-style:normal !important;
    font-size:max(0.875rem, 14px) !important;color:#5a7080 !important;line-height:1.4 !important;
  }
}

/* ---- 需求 6-3：手机端隐藏友情链接 ---- */
@media screen and (max-width:900px){
  .link,
  .links,
  .friendlink,
  .flink,
  .footer-link,
  .h_friend,
  .frend,
  .youqing{
    display:none !important;
  }
}

/* ---- 需求 8：100vh → 100dvh（避开移动浏览器地址栏高度问题） ---- */
@supports (height:100dvh){
  @media screen and (max-width:900px){
    .klk-mnav-panel{max-height:calc(100dvh - 120px)}
    .klk-bnav,.klk-float-tel,.klk-backtop{
      padding-bottom:env(safe-area-inset-bottom);
    }
  }
}

/* ---- 需求 8：图片懒加载的视觉占位（避免 CLS） ---- */
@media screen and (max-width:900px){
  img[loading="lazy"]{
    background:#f4f6f8;
    background-image:linear-gradient(135deg,#eef2f5 25%,transparent 25%,transparent 50%,#eef2f5 50%,#eef2f5 75%,transparent 75%);
    background-size:16px 16px;
  }
}

/* ---- 需求 9：桌面端（>900px）完全保持原样 ---- */
@media screen and (min-width:901px){
  /* 🔴 显式隐藏注入元素：JS 加的 class 没有 @media 包裹，必须在这里兜底 */
  .klk-mnav-btn,.klk-mnav-panel{display:none !important}
  .h_nav.min-height:0 !important;
  .h_nav .clearfix,
  .h_nav > ul,
  .h_nav ul.clearfix{display:block !important}
}

/* ---- 无障碍：焦点可见（WCAG 2.2） ---- */
@media screen and (max-width:900px){
  .klk-mnav-btn:focus-visible,
  .klk-mnav-panel a:focus-visible,
  .klk-hero-cta a:focus-visible,
  .pillar-list li a:focus-visible,
  .klk-num li a:focus-visible{
    outline:3px solid #ffb400 !important;
    outline-offset:2px !important;
  }
}

/* ---- 表单：移动端可点性（配合需求七） ---- */
@media screen and (max-width:900px){
  input[type="text"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea{
    min-height:48px !important;      /* 触控目标 ≥48px */
    font-size:max(1rem, 16px) !important;  /* ≥16px 防 iOS 自动缩放 */
    box-sizing:border-box !important;
    width:100% !important;
  }
  input[type="submit"],
  button[type="submit"],
  .submit-btn{
    min-height:52px !important;
    font-size:17px !important;
    width:100% !important;
  }
  label{font-size:max(0.9375rem, 15px) !important;line-height:1.6 !important}
}

/* ---- 触控目标兜底：所有可点元素最小 44×44 ---- */
@media screen and (max-width:900px){
  .klk-mnav-panel a,
  .klk-bnav a,
  .pillar-list li a,
  .h_nav a{ /* 横排虽隐藏，抽屉里的已是 48px */ }
}

/* ---- 降低动效偏好（WCAG 2.2 / 前庭功能障碍） ---- */
@media (prefers-reduced-motion:reduce){
  .klk-mnav-btn span,
  .klk-mnav-btn span::before,
  .klk-mnav-btn span::after,
  .klk-hero-cta a{
    transition:none !important;
  }
}


/* ---- 需求 4 补（v2）：小字号兜底，**按实测的真实结构**写 ----
   🔴 教训：/yuyue/ 是独立模板（`main > .card`），不是 `.yuyue` 容器 →
      之前按 `.yuyue xxx` 写的选择器全部落空，字号一点没变。
   ✅ 改法：不再猜容器名，直接对**具体的小元素标签/类**抬字号（全局兜底）。
   实测待修元素：small(11/13) .tip(12) .tel(15) .sub(14) .klk-privacy(12)
                  .klk-more(14) footer(12) label(14) h2(14) span(13) p(13) */
@media screen and (max-width:900px){
  /* ① 兜底：可见文本不得 <14px（合规与可读底线） */
  small,
  .tip,
  .klk-privacy,
  .klk-more,
  .sub,
  .tel,
  .brand small,
  .card .sub,
  .card .tip,
  main p,
  main span,
  main small,
  main label,
  main h2,
  main h3,
  main li,
  .top small,
  .top .tel,
  .card p,
  .card span,
  .card small,
  .card label,
  .card li,
  .card h2,
  .card h3,
  body > footer,
  body > footer p,
  body > footer a,
  body > footer small{
    font-size:max(0.875rem, 14px) !important;
    line-height:1.65 !important;
  }
  /* ② 表单区的关键说明（.sub 是「10 分钟内回电」这类卖点）提到 16px */
  .sub,
  .card .sub,
  main .sub,
  .card > p:first-child{
    font-size:max(1rem, 16px) !important;
  }
  /* ③ 拨号链接必须够大（它是转化入口） */
  .tel{
    font-size:max(1.0625rem, 17px) !important;
  }
}

/* ---- 需求 2 补：手机端隐藏蓝色面包屑条（.plc）----
   🔴 用户反馈「最好不要上面那条蓝色的了」。
   .plc 是 DedeCMS 面包屑（`{dede:field name='position'/}`），
   **它是 SEO 信号（告诉搜索引擎页面层级），绝不能删 DOM** ——
   ✅ 按需求九的约束：只在移动端 `display:none`，DOM 与桌面端完全不动。
   层级信息仍在：① 移动端底栏有「服务」入口可达 ② <title> 保留完整栏目名
                 ③ JSON-LD 的 BreadcrumbList 仍输出给搜索引擎 */
@media screen and (max-width:900px){
  .plc{display:none !important}
}

/* ---- 需求 2 补：手机端隐藏蓝色面包屑条（.plc）----
   🔴 用户反馈「最好不要上面那条蓝色的了」。
   .plc 是 DedeCMS 面包屑（`{dede:field name='position'/}`），
   **它是 SEO 信号（告诉搜索引擎页面层级），绝不能删 DOM** ——
   ✅ 按需求九的约束：只在移动端 `display:none`，DOM 与桌面端完全不动。
   层级信息仍在：① 移动端底栏有「服务」入口可达 ② <title> 保留完整栏目名
                 ③ JSON-LD 的 BreadcrumbList 仍输出给搜索引擎 */
@media screen and (max-width:900px){
  .plc,
  div.plc,
  .plc span{
    display:none !important;
  }
}

/* ==========================================================================
   附100 · 六项问题的修复（补充到 klk-mobile-nav.css 末尾）
   ① /case/ 案例卡片在手机上「不协调」→ 按钮组改竖排满宽、图文比例调整
   ② 手机端隐藏备案信息整栏（.f-wrap）—— 用户明确要求
   ③ 服务卡片去掉「›」箭头伪元素、压缩图标与标题之间的空白
   ④ /news/ask/ 问答列表重叠 → span.date 绝对定位在移动端压住标题
   ⑤ 移动端隐藏「资质证照」与「数据条/为什么选」卡片
   ⑦ .f-wrap 蓝条通栏 → 改成与顶部导航同宽（960 居中）
   ⚠️ 全部只改显示与排版，不删任何 DOM（需求九的约束）
   ========================================================================== */

/* ---- ③ 服务卡片：去掉 › 箭头 + 压缩空白（两个断点都要） ---- */
@media screen and (max-width:768px){
  /* 去掉我之前加的 ::after 箭头（那是我在附99 加的，成了用户指的「> 符号」） */
  .pro-thumbs > li > a::after,
  .pillar-list li a::after,
  .service_con li a::after,
  .klk-srv-grid li a::after{
    content:none !important;
  }
  /* 图标与标题之间不再留空：压缩内边距 + 去掉 min-height 撑出的空白 */
  .pro-thumbs > li > a,
  .pillar-list li a,
  .service_con li a,
  .klk-srv-grid li a{
    min-height:0 !important;
    padding:10px 8px !important;
    gap:0 !important;
  }
  .pro-thumbs > li > a img,
  .pillar-list li a img,
  .service_con li a img,
  .klk-srv-grid li a img{
    width:38px !important;
    height:38px !important;
    margin:0 0 5px !important;
  }
  .pro-thumbs > li > a em,
  .pro-thumbs > li > a span,
  .pillar-list li a em,
  .service_con li a em,
  .klk-srv-grid li a em{
    margin:0 !important;
    line-height:1.25 !important;
    font-size:14.5px !important;
  }
  /* 去掉卡片 hover 位移（手机没有 hover，且会造成视觉跳动） */
  .pro-thumbs > li > a:active,
  .pillar-list li a:active{transform:none !important}
}
/* 桌面端也去掉箭头（用户说「不要 > 符号」，两处都要） */
@media screen and (min-width:769px){
  .pro-thumbs > li > a::after,
  .pillar-list li a::after,
  .service_con li a::after,
  .klk-srv-grid li a::after{content:none !important}
}

/* ---- ④ 问答/新闻列表：绝对定位的日期在移动端压住标题 → 改为静态流 ---- */
@media screen and (max-width:768px){
  .list_news_01 li,
  .list_news li,
  .news-list li,
  .faq-item,
  .prolist li{
    position:relative !important;
    padding-left:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
    line-height:1.55 !important;
  }
  /* 日期从绝对定位改为块级（不再压住标题） */
  .list_news_01 li .date,
  .list_news li .date,
  .news-list li .date,
  .list_news_01 li > span:first-child{
    position:static !important;
    float:none !important;
    display:block !important;
    font-size:12.5px !important;
    color:#8496a5 !important;
    line-height:1.4 !important;
    margin:0 0 2px !important;
  }
  /* 图标装饰块也静态化 */
  .list_news_01 li .ico,
  .list_news li .ico,
  .news-list li .ico{
    position:static !important;
    float:none !important;
    display:none !important;
  }
  /* 标题独占一行，允许换行 */
  .list_news_01 li > a,
  .list_news li > a,
  .news-list li > a{
    display:block !important;
    width:100% !important;
    font-size:15px !important;
    line-height:1.55 !important;
    word-break:break-word !important;
    overflow:visible !important;
    height:auto !important;
    white-space:normal !important;
  }
  /* 列表项自身不能有固定高度（那是重叠的另一个来源） */
  .list_news_01 li,
  .list_news li,
  .news-list li{
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
}

/* ---- ① 案例卡片：手机上按钮组改竖排满宽，消除「不协调」 ---- */
@media screen and (max-width:768px){
  .case-list li,
  .case_list li,
  .list_01 li,
  .pro_cases li,
  .case-item{
    display:flex !important;
    flex-direction:column !important;
    text-align:center !important;
  }
  /* 按钮组：两个按钮竖排满宽，不再一左一右显得歪 */
  .case-list li .btn,
  .case-item .btn,
  .list_01 li .btn,
  .pro_cases li .btn,
  .case-list li a.more,
  .case-item a.more{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    width:100% !important;
    max-width:none !important;
  }
  .case-list li .btn a,
  .case-item .btn a,
  .list_01 li .btn a,
  .pro_cases li .btn a{
    display:block !important;
    width:100% !important;
    margin:0 0 8px !important;
    text-align:center !important;
  }
  .case-list li .btn a:last-child,
  .case-item .btn a:last-child{margin-bottom:0 !important}
  /* 图片统一比例，避免高低不齐 */
  .case-list li img,
  .case-item img,
  .list_01 li img,
  .pro_cases li img{
    width:100% !important;
    height:auto !important;
    max-height:200px !important;
    object-fit:cover !important;
    display:block !important;
  }
  /* 分页条紧凑化 */
  .pagelist,
  .pages,
  .page-navi{
    margin:14px 0 !important;
    padding:10px !important;
    text-align:center !important;
  }
  .pagelist a,
  .pages a{
    padding:6px 10px !important;
    margin:2px !important;
    display:inline-block !important;
  }
}

/* ---- ② 手机端隐藏备案信息整栏 ----
   🔴 附101：断点由 768px 改为 **600px**（用户拍板）——
      手机（375/390/430）隐藏；平板 iPad 竖屏（768）与 PC 一致显示备案信息。
      依据：备案号是《ICP备案管理办法》要求首页展示的合规信息，
      768px 以上已具备「页脚单行展示」的空间，没有隐藏的必要。 */
@media screen and (max-width:600px){
  .f-wrap{display:none !important}
  /* 但电话必须留（转化），用底栏承载（附93 已做 5 项底栏 + 联系弹层） */
  body{padding-bottom:84px !important}
}

/* ---- ⑤ 移动端隐藏「资质证照」与「数据条/为什么选」区块 ---- */
@media screen and (max-width:768px){
  /* 资质证照图片列表 */
  .about-pic,
  .pic-list,
  .zhengzi,
  .资质证照,
  .rongyao-pic,
  .con_img,
  .img_list,
  .about-img,
  .zp-list{
    display:none !important;
  }
  /* 「数据条」（9年/1000+/24h/90天）与「为什么选快立克」 */
  .jz-l,
  .klk-advantage,
  .klk-adv,
  .le10,
  .le1,
  .le2,
  .advantage,
  .num-list,
  .klk-num,
  .count-bar,
  .pro_advantage,
  .why-us,
  .whychoose{
    display:none !important;
  }
  /* 「关于我们 / ABOUT US」标题条 */
  .about-tit,
  .h-about,
  .tit-about{
    display:none !important;
  }
}

/* ---- ⑦ 页脚蓝条与顶部导航同宽（桌面端）----
   🔴 附102 事故：v1 写了 `.f-wrap{background:transparent}` 想「把蓝条背景移到内层」，
      但**忘了给内层 `.footer` 加背景** → PC 端蓝底消失、文字挤成 15px 细线，几乎看不见。
   ✅ 正确做法：**外层限宽 960 居中（负责对齐），内层 `.footer` 承载蓝底与内边距**。 */
@media screen and (min-width:601px){
  .f-wrap{
    max-width:960px !important;      /* 与 .header / .content 同宽 */
    width:100% !important;
    margin:0 auto !important;
    background:transparent !important;
    /* 关键：内层负责蓝底，min-height 兜住高度（避免 padding 被压缩） */
    padding:0 !important;
  }
  .f-wrap > .footer{
    max-width:960px !important;
    width:100% !important;
    margin:0 auto !important;
    background:#0681c5 !important;  /* 与顶部导航栏**视觉同色**：
        由 top_bg.gif 像素取样得出（CSS 声明的 #026bb0 是图片底色，肉眼看到的是这个）*/
    color:#fff !important;
    min-height:auto !important;
    padding:10px 14px !important;   /* 恢复原有视觉高度 */
    line-height:1.9 !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }
  /* 文字颜色强制为白（原来继承 rgb(102,102,102) 灰字在白底上几乎不可见） */
  .f-wrap > .footer,
  .f-wrap > .footer a,
  .f-wrap > .footer p,
  .f-wrap > .footer span{
    color:#fff !important;
  }
}

/* ---- ③-b 服务卡片：`.hoverdir` 是绝对定位覆盖层，`.clude` 描述被推出视口（-789px）
        → 造成「图标与标题之间一大片空白」。移动端改为正常流内并只保留标题。 ---- */
@media screen and (max-width:768px){
  .pro-thumbs > li,
  .pro-thumbs > li.mcard{
    height:auto !important;
    padding:6px 4px 8px !important;
  }
  .pro-thumbs > li > a{
    position:relative !important;
    height:auto !important;
    min-height:0 !important;
    padding:8px 6px 10px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  /* ① 描述文字：移动端隐藏（它是造成空白的元凶之一） */
  .pro-thumbs .clude{
    display:none !important;
  }
  /* ② 悬停层：改为文档流内的标题块，不再绝对定位覆盖 */
  .pro-thumbs .hoverdir{
    position:static !important;
    height:auto !important;
    top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    background:transparent !important;
    padding:0 !important;
    margin:4px 0 0 !important;
    display:block !important;
    width:100% !important;
    pointer-events:auto !important;
  }
  .pro-thumbs .hoverdir > a{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    transform:none !important;
    color:#1f3d2b !important;
    background:transparent !important;
  }
  .pro-thumbs .hoverdir .box{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  /* ③ 只留标题，14.5px 加粗居中 */
  .pro-thumbs .hoverdir .name{
    display:block !important;
    font-size:14.5px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    color:#1f3d2b !important;
    text-align:center !important;
    margin:0 !important;
  }
  /* ④ VIEW MORE 去掉（用户要求紧凑，不要多余符号与文字） */
  .pro-thumbs .hoverdir .more{
    display:none !important;
  }
  /* ⑤ 图标缩小并靠上，减少空白 */
  .pro-thumbs > li > a > img{
    width:40px !important;
    height:40px !important;
    margin:0 0 6px !important;
    display:block !important;
  }
}

/* ---- 附104：友情链接已有内容，但模板自带 `.link-empty{display:none}` 仍把它藏着
        （DedeCMS 的空态类：有链接时这个类名仍留在 HTML 上）→ 有内容时必须显示 ---- */
@media screen and (min-width:601px){
  .link.link-empty{display:block !important;margin-top:18px !important}
  .link.link-empty h2{
    font-size:16px !important;color:#0a3d24 !important;
    display:flex !important;align-items:center !important;gap:8px !important;
    border-bottom:1px solid #e6ecf0 !important;padding-bottom:8px !important;margin-bottom:10px !important;
  }
  .link.link-empty h2 em{font-style:normal !important;display:flex!important;align-items:baseline!important;gap:6px!important}
  .link.link-empty p{
    display:flex !important;flex-wrap:wrap !important;gap:8px 18px !important;
    max-width:none !important;height:auto !important;overflow:visible !important;
  }
  .link.link-empty p a{
    color:#0a6db5 !important;text-decoration:none !important;font-size:14px !important;
    display:inline-flex !important;align-items:center !important;
    /* 🔴 附104：文字被截断（"全国标准信息公共服"）——继承的省略号样式在起作用 */
    max-width:none !important;
    width:auto !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    height:auto !important;
    line-height:1.8 !important;
    padding:0 !important;
  }
  .link.link-empty p a:hover{text-decoration:underline !important}
  /* 移动端仍隐藏（附94 需求：手机端不显示友情链接） */
}
@media screen and (max-width:600px){
  .link,.link.link-empty{display:none !important}
}

/* ---- 附104 修正：文字截断的真正根因是 **`p span`（DedeCMS 输出 flink 时自带 span）**
        `resetcommonindex.css` 里 `.link p span{display:inline-block}` + `p` 宽度 953px
        + flex 布局 → 每个 span 被压到 131px，文字被 `overflow` 裁掉。
        ✅ 必须针对 `p > span` 与 `p > span > a` 一起解除，不能只管 `a`。 ---- */
@media screen and (min-width:601px){
  .link.link-empty p > span{
    display:inline-block !important;
    /* 🔴 关键：span 在 flex 容器里被 flex-shrink 压到 131px → 必须 flex:none，
          只写 width:auto 无效（flex item 的 width:auto 会被 shrink 覆盖） */
    flex:none !important;
    -webkit-flex:none !important;
    flex-shrink:0 !important;
    width:auto !important;min-width:max-content !important;max-width:none !important;
    height:auto !important;overflow:visible !important;
    padding:0 18px 0 0 !important;margin:0 !important;
    vertical-align:top !important;
  }
  .link.link-empty p > span > a{
    display:inline-block !important;
    width:auto !important;min-width:0 !important;max-width:none !important;
    height:auto !important;overflow:visible !important;
    white-space:nowrap !important;text-overflow:clip !important;
    color:#0a6db5 !important;text-decoration:none !important;
    font-size:14px !important;line-height:1.8 !important;
  }
  .link.link-empty p > span > a:hover{text-decoration:underline !important}
}

/* ---- 附105 三项 ----
   ① 「咨询电话：159…（7×24 小时）座机：028-…」整行删除（用户要求）
      —— 只删这一行；`{dede:myqq}`/表单/底栏的联系方式**不动**（仍是转化入口） */
.klk-hero-tel{display:none !important}

/* ② 备案条与导航条「上下呼应」：
      导航条是 `top_bg.gif`（**上浅 #1eadea → 下深 #0681c5** 的渐变）；
      备案条改为同款渐变（上浅下深），两条并排时形成对称关系。 */
@media screen and (min-width:601px){
  .f-wrap > .footer{
    background:linear-gradient(180deg,#1eadea 0%,#0681c5 62%,#0681c5 100%) !important;
    color:#fff !important;
  }
}

/* ③ 友情链接紧贴备案条上方：压缩自身上下留白，视觉上成为「蓝条的上方铺垫」 */
@media screen and (min-width:601px){
  .link.link-empty{
    margin:26px 0 0 !important;      /* 上留白 */
    border:1px solid #dde7ee !important;border-top:3px solid #1eadea !important;
    border-radius:0 0 0 0 !important;
    background:#f7fafc !important;
  }
  .link.link-empty h2{
    margin:0 !important;padding:10px 14px 8px !important;
    border-bottom:1px solid #e6ecf0 !important;
    background:linear-gradient(180deg,#1eadea 0%,#0681c5 100%) !important;
    color:#fff !important;
  }
  .link.link-empty h2 a{color:#fff !important}
  .link.link-empty h2 em{color:rgba(255,255,255,.75) !important}
  .link.link-empty p{padding:12px 14px !important}
}


/* ---- 附105-b（修正版）：友情链接移到备案条**正上方** ----
   🔴 上一版用 `.contant > .link{order:999}` 无效，原因：
      `.link` 在 `.contant` 内，但它**后面还有 3 个 body 级 section**
      （`.klk-adv` 571px / `.klk-area` 247px / `.klkfaq` 634px = 1452px）
      → 这些不是 `.contant` 的子元素，`.contant` 的 order 管不到它们。
   ✅ 正确做法：在 `body` 层用 flex + order，把 `.link` 排到 `.f-wrap` 之前。 */
@media screen and (min-width:601px){
  body{
    display:flex !important;
    flex-direction:column !important;
  }
  /* 归档条的顺序标记 */
  body > .f-wrap{order:60 !important;margin-top:0 !important}
  /* 友情链接紧贴它上面 */
  body > .contant{order:50 !important;display:flex !important;flex-direction:column !important}
  body > .contant > .link.link-empty{order:999 !important;margin:22px 0 0 !important}
  /* 其余 section 排在友情链接之前 */
  body > .klk-adv{order:20 !important}
  body > .klk-area{order:21 !important}
  body > .klkfaq{order:22 !important}
  body > .klk-hero{order:1 !important}
  body > .ban_bg{order:2 !important}
  body > .h-ser{order:3 !important}
  body > .bts{order:4 !important}
  body > .top{order:0 !important}
  /* 移动端浮层必须脱离 flex 流（否则会被当 flex item 排进正文） */
  body > .klk-bnav,
  body > .klk-float-tel,
  body > .klk-backtop,
  body > button{position:fixed !important}
}

/* ---- 附105-c：友情链接与备案条**左对齐** ----
   🔴 实测：`.link` left=0 / `.f-wrap > .footer` left=160 → **左边缘差 159px**，
      两条不在一条竖线上（用户截图里看着"歪"）。
   根因：`.contant`（友情链接的父容器）**没有 960px 限宽 + 居中**，
        而 `.f-wrap` 有（`max-width:960px; margin:0 auto`）。
   ✅ 修法：给 `.contant` 补上同样的限宽居中。 */
@media screen and (min-width:601px){
  .contant{
    max-width:960px !important;
    width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
  /* 友情链接自身去掉自带 1px 边框带来的偏移（.link 原本 border:1px solid #d9d9d9） */
  .link.link-empty{
    margin:22px 0 0 !important;
    border:none !important;
    border-top:3px solid #1eadea !important;
  }
  /* 备案条上方的呼吸去掉，两者直接相接 */
  .f-wrap{margin-top:0 !important}
}

/* ---- 附105-d：底部三段的视觉收口 ----
   实测遗留问题：
   ① 友情链接（960）比上方「新闻中心/行业问答」两栏（容器更宽）左右各突出 55px → 看着"鼓出来"
   ② 友情链接上方还有一段空白（`常见问题` section 的底部留白）
   ✅ 统一成：底部三段（行业问答 → 友情链接 → 备案条）**同宽 960、左对齐、间距 0**。 */
@media screen and (min-width:601px){
  /* 上方两栏容器也限宽到 960，与底部一致 */
  .klkfaq .container,
  .klkfaq .wrap,
  .klkfaq > div,
  .klk-adv .container,
  .klk-adv > div,
  .klk-area .container,
  .klk-area > div{
    max-width:960px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  /* 友情链接块：去掉背景与边框，做成「干净的标题条 + 内容」 */
  .link.link-empty{
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    border:none !important;
    border-top:none !important;
  }
  /* 三段之间 0 间距，靠标题条自身的底色区分 */
  .klkfaq{margin-bottom:0 !important}
  /* 友情链接标题条：与备案条同款渐变、同高 */
  .link.link-empty h2{
    margin:0 !important;
    height:43px !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    padding:0 16px !important;
    background:linear-gradient(180deg,#1eadea 0%,#0681c5 62%,#0681c5 100%) !important;
    color:#fff !important;
    font-size:15px !important;
    border:none !important;
  }
  /* 内容区：白底 + 下边框，紧接标题条 */
  .link.link-empty p{
    margin:0 !important;
    padding:13px 16px !important;
    background:#fff !important;
    border:1px solid #dde7ee !important;
    border-top:none !important;
    gap:4px 26px !important;
  }
  .link.link-empty p a{
    color:#0a6db5 !important;font-size:14px !important;
    display:inline-block !important;flex:none !important;
    padding:2px 0 !important;
  }
}