@charset "utf-8";
/* =========================================================================
   Finerise WAP adaptation layer  /m/site.css
   Scope: mobile/tablet ONLY. Desktop (>1024px) rendering is NOT touched.
   No colour, no typeface, no imagery changes. Layout + touch targets only.
   ========================================================================= */

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

@media screen and (max-width: 1024px) {
  img, video, canvas, svg { max-width: 100%; }
  table { max-width: 100%; }
  td, th { overflow-wrap: break-word; word-break: break-word; }
  iframe { max-width: 100%; }
}

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

  html, body { max-width: 100%; overflow-x: hidden; }
  body { position: relative; }

  /* ---- 1. media ---- */
  img { max-width: 100%; height: auto; }
  img[width], img[height] { height: auto !important; }
  video, iframe, embed, object { max-width: 100%; }
  iframe { width: 100% !important; }

  /* ---- 2. legacy fixed pixel widths -> fluid ---- */
  table { width: 100% !important; max-width: 100% !important; height: auto !important; }
  table[width] { width: 100% !important; }
  td[width], th[width] { width: auto !important; height: auto !important; }
  td[height], th[height] { height: auto !important; }

  /* ---- 3. layout tables (auto-classified by site.js) become stacked ---- */
  table.m-lt,
  table.m-lt > tbody,
  table.m-lt > thead,
  table.m-lt > tfoot,
  table.m-lt > tbody > tr,
  table.m-lt > tr { display: block !important; width: 100% !important; }

  table.m-lt > tbody > tr > td,
  table.m-lt > tbody > tr > th,
  table.m-lt > tr > td,
  table.m-lt > tr > th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0;
    padding-right: 0;
  }

  /* 侧栏 / 咨询栏：禁止遮挡正文，改为文档流内整宽块 */
  .tab2, .consult-section, .hero-right, .col-tel, .sidebar,
  [class*="consult"], [class*="sidebar"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---- 4. body copy: min 16px, 1.75 line-height ---- */
  .text, td.text, .text td, .text p, .text div, .text span, .text li,
  #main .text, .article, .article p, .article td, .article div,
  .content, .content p, .content td, .content div,
  .news_content, .news_content p, .news_content td,
  .tab2 td.text, .tab2 .text, .tab2 .text p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
  }
  .text img, .article img, .content img { height: auto !important; }

  p, li { overflow-wrap: break-word; word-break: break-word; }

  /* ---- 5. top language strip: replaced by drawer entry ---- */
  .city-nav { display: none !important; }
  .header-top { padding-top: 0 !important; }

  /* reserve space for the fixed mobile bar */
  body.m-has-bar { padding-top: 52px; }

  /* ---- 6. original desktop nav hidden once JS drawer is ready ---- */
  html.m-nav-ready .wrapper { display: none !important; }
  html.m-nav-ready .menuDiv { display: none !important; }

  /* fallback when JS is unavailable: never squash, just let it wrap */
  .wrapper { flex-wrap: wrap !important; }
  .wrapper > div { min-width: 0; flex: 1 1 33.333% !important; }
  .wrapper .meun { padding: 12px 4px !important; font-size: 13px !important; }

  /* ---- 7. carousel: proportional box + cover crop ---- */
  .wrap, #wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 6px 0 !important;
    border-radius: 0;
    aspect-ratio: 2.06 / 1;
    overflow: hidden;
  }
  #pic { height: 100%; }
  #pic li { height: 100%; }
  #pic li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    border-radius: 0 !important;
  }
  /* 文字层与图片分离：移动端只缩字号/调位置，不烧图 */
  .slide-text,
  .slide-center,
  .slide-split {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    top: 0 !important;
    left: 4% !important;
    right: auto !important;
    width: 92% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 6px 30px 6px;   /* 底部预留 30px 给指示点，避免压字 */
    transform: none !important;
    text-align: center !important;
  }
  .slide-text .line1,
  .slide-text .text-main { font-size: 5.2vw !important; line-height: 1.28 !important; letter-spacing: 1px !important; }
  .slide-text .line2,
  .slide-text .text-sub { font-size: 4.1vw !important; line-height: 1.3 !important; letter-spacing: 0.5px !important; }
  .slide-split .line1, .slide-split .line2 {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    left: auto !important; right: auto !important; top: auto !important;
    word-break: normal !important;
  }

  /* carousel dots */
  #list, ol#list { bottom: 0 !important; }
  #list li {
    width: 26px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    background: transparent !important;
  }

  /* ---- 8. touch targets ---- */
  a.meun, a.meun1, a.meun2 { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .wrapper a, .menuDiv > ul > li > a { min-height: 44px; }

  /* ---- 9. footer / misc ---- */
  .scroll-container { border-radius: 0 !important; }
  hr[style*="height: 5px"] { display: none; }
}

/* ---------------------------------------------------------------- mobile bar */
#mBar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  z-index: 9998;
  background: linear-gradient(145deg, #4a7cff 0%, #3b6be0 100%);
  box-shadow: 0 2px 10px rgba(31, 61, 122, .22);
  align-items: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
@media screen and (max-width: 768px) {
  #mBar { display: flex; }
}
#mBar .m-burger {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  flex: 0 0 52px;
}
#mBar .m-burger span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: #fff; position: relative;
}
#mBar .m-burger span::before,
#mBar .m-burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px;
  border-radius: 2px; background: #fff;
}
#mBar .m-burger span::before { top: -7px; }
#mBar .m-burger span::after { top: 7px; }
#mBar .m-brand {
  flex: 1 1 auto; min-width: 0;
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .5px;
  text-align: center; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 6px;
}
/* round-4: 品牌名 + 始于2005，同一行，副信息更小更浅，不加高顶栏 */
#mBar .m-brand .m-bn { font-weight: 600; }
#mBar .m-brand .m-since,
#mDrawer .m-dhead .m-since {
  font-style: normal; font-weight: 400; font-size: 12px;
  color: rgba(255, 255, 255, .8); letter-spacing: 0; margin-left: 2px;
}
#mDrawer .m-dhead .m-bn { font-weight: 600; }
#mBar .m-tel {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 14px;
  color: #fff; font-size: 13px; text-decoration: none;
  border-left: 1px solid rgba(255, 255, 255, .22);
}

/* ---------------------------------------------------------------- drawer */
#mMask {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .22s ease;
}
#mMask.m-on { display: block; opacity: 1; }

#mDrawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 10000;
  width: 84%; max-width: 340px;
  background: #fff;
  transform: translateX(-102%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  box-shadow: 2px 0 16px rgba(0, 0, 0, .18);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}
#mDrawer.m-on { transform: translateX(0); }

#mDrawer .m-dhead {
  height: 52px; flex: 0 0 52px;
  background: linear-gradient(145deg, #4a7cff 0%, #3b6be0 100%);
  color: #fff; display: flex; align-items: center;
  padding: 0 14px; font-size: 15px; font-weight: 600;
  justify-content: space-between;
}
#mDrawer .m-close {
  width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer;
}
#mDrawer .m-dbody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }

#mDrawer ul { list-style: none; margin: 0; padding: 0; }
#mDrawer li { margin: 0; padding: 0; border-bottom: 1px solid #eef2f8; }
#mDrawer a {
  display: flex; align-items: center;
  min-height: 48px; padding: 10px 16px;
  color: #1a1a2e; font-size: 16px; text-decoration: none;
  line-height: 1.4;
}
#mDrawer a:active { background: #f2f6ff; }
#mDrawer .m-sub a { padding-left: 30px; font-size: 15px; color: #3b4a63; background: #fafcff; }
#mDrawer .m-grp { display: flex; align-items: center; border-bottom: 1px solid #eef2f8; }
#mDrawer .m-grp > a { flex: 1 1 auto; border-bottom: 0; }
#mDrawer .m-toggle {
  flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px;
  background: none; border: 0; border-left: 1px solid #eef2f8;
  color: #4a7cff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#mDrawer .m-toggle::before { content: '\25BC'; font-size: 10px; transition: transform .2s ease; display: block; }
#mDrawer .m-grp.m-open .m-toggle::before { transform: rotate(180deg); }
#mDrawer .m-sub { display: none; }
#mDrawer .m-grp.m-open + .m-sub { display: block; }

#mDrawer .m-dfoot { border-top: 6px solid #f4f7fd; }
#mDrawer .m-langbox { padding: 12px 16px 4px; }
#mDrawer .m-langt { font-size: 12px; color: #8492a6; letter-spacing: 1px; margin-bottom: 8px; }
#mDrawer .m-langs { display: flex; flex-wrap: wrap; gap: 8px; }
#mDrawer .m-langs a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border: 1px solid #dde6f5; border-radius: 6px;
  font-size: 14px; color: #2c3e50; text-decoration: none;
}
#mDrawer .m-langs a.m-cur,
#mDrawer .m-langs .m-cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px; border-radius: 6px;
  font-size: 14px;
  border: 1px solid #4a7cff; color: #4a7cff; font-weight: 600; background: #f2f6ff;
}

body.m-lock { overflow: hidden; }

/* ------------------------------------------------- 11 项一级导航：2 列对称网格 */
#mDrawer ul.m-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid #eef2f8;
}
#mDrawer ul.m-grid > li {
  border-bottom: 1px solid #eef2f8;
  border-right: 1px solid #eef2f8;
  list-style: none;
}
#mDrawer ul.m-grid > li:nth-child(2n) { border-right: 0; }
#mDrawer ul.m-grid > li > a {
  justify-content: center;
  text-align: center;
  min-height: 52px;
  padding: 12px 8px;
  font-size: 15px;
  letter-spacing: .5px;
}
/* 第 11 项（联系方式）通栏收尾，前 10 项构成 5×2 完全对称 */
#mDrawer ul.m-grid > li:last-child {
  grid-column: 1 / -1;
  border-right: 0;
  background: #f7faff;
}

/* --------------------------------------- round-4: 12 项，前 10 单列 + 末行双列 */
#mDrawer ul.m-nav12 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid #eef2f8;
}
#mDrawer ul.m-nav12 > li {
  grid-column: 1 / -1;
  border-bottom: 1px solid #eef2f8;
  list-style: none;
}
#mDrawer ul.m-nav12 > li > a {
  box-sizing: border-box;
  min-height: 52px;
  padding: 8px 16px;
  font-size: 16px;
}
/* 末两项：关于我们 / 联系我们，各占 50%，触控高度 52px ≥ 44px */
#mDrawer ul.m-nav12 > li.m-half {
  grid-column: auto;
  background: #f7faff;
  border-right: 0;
}
#mDrawer ul.m-nav12 > li.m-half:nth-last-child(2) { border-right: 1px solid #eef2f8; }
#mDrawer ul.m-nav12 > li.m-half > a {
  box-sizing: border-box;
  min-height: 52px;
  padding: 8px;
  font-size: 15px;
  letter-spacing: .5px;
  justify-content: center;
  text-align: center;
}
#mDrawer ul.m-grid > li:last-child > a {
  color: #3b6be0;
  font-weight: 600;
  letter-spacing: 2px;
  min-height: 54px;
}

/* ------------------------------------------------- 兜底：任何容器不得超过视口 */
@media screen and (max-width: 768px) {
  div, p, center, section, article, main, ul, ol, dl, table, td, th,
  h1, h2, h3, h4, h5, h6, pre, blockquote {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 旧版 Word 粘贴内容常见：写死宽度的内联样式 */
  [style*="width"] { max-width: 100% !important; }
  /* 过长的不可断字符串 */
  div, p, td, span { overflow-wrap: break-word; }
}

@media screen and (max-width: 768px) {
  select, input, textarea, button { max-width: 100% !important; }
  img, table { max-width: 100% !important; }
}

/* ---------------------------------------------------------------------------
   兜底 B：旧模板把长文本显式设为 white-space:nowrap（且写在内联 <style> 里，
   优先级高于本文件），窄屏下整行撑出视口 -> 内容被裁切。
   此处只放开换行，不改字号 / 颜色 / 字重 / 任何文字内容。
   --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* .scroll-text / .scroll-track are excluded on purpose: the notice bar is
     meant to stay on one line and is panned by its own keyframe. Wrapping it
     turned a 26px strip into a 94px block of stacked text. */
  body *:not(pre):not(code):not(textarea):not(samp):not(kbd):not(.scroll-text):not(.scroll-track) {
    white-space: normal !important;
  }
  pre, code, textarea, samp, kbd {
    white-space: pre !important;
    overflow-x: auto;
  }
  .scroll-text, .scroll-track { white-space: nowrap !important; }
  body { overflow-wrap: break-word; word-break: break-word; }
}

/* ---------------------------------------------------------------------------
   兜底 C：卡片栅格里的定宽卡片（.card）在窄屏容易按 max-content 撑开，
   这里只做"不得超过视口"的上限约束，不强制改写原有宽度 / 列数，
   避免影响页面既有版式。
   --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .card { max-width: 100% !important; }
}

/* ---------------------------------------------------------------------------
   D. 表单类页面（.app-table）：旧写法 table-layout:auto + 固定列宽 + 固定像素
      输入框，窄屏下表格最小宽度超过内容区 -> 右侧被裁切。窄屏改固定表格布局。
   --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .app-table { table-layout: fixed !important; width: 100% !important; }
  .app-table th { width: 32% !important; }
  .app-table th, .app-table td { padding: 4px 5px !important; }
  .app-table input[type="text"], .app-table input[type="number"], .app-table textarea { width: 100% !important; }
}

/* ---------------------------------------------------------------------------
   E. 栏目小导航（.index_sub_nav）：9 个行内链接排成一行，窄屏最后一个出界。
      窄屏改为可换行的流式排列，链接文字与顺序不变。
   --------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .index_sub_nav { display: flex !important; flex-wrap: wrap !important; gap: 6px 10px; justify-content: center; }
  .index_sub_nav a { display: inline-block; }
}


/* ===========================================================================
   G. Content area fills the viewport on phones  (round-2 requirement)
   ---------------------------------------------------------------------------
   Root cause: the legacy desktop stylesheets set
       body { margin-left:10%; margin-right:10%; width:auto }   (css.css)
       body { margin-left:5%;  margin-right:5%  }               (css_en.css)
   so on a 375px screen the body box is only 300px / 345px wide and 10% of the
   screen is wasted on each side.  Here the auto margins are removed, the body
   is allowed to fill the viewport, and a 14px gutter is re-applied as padding
   so text keeps breathing room without shrinking the layout box.

   Desktop (>768px) is NOT touched: these rules live inside the 768px query.
   =========================================================================== */
@media screen and (max-width: 768px) {

  body {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px;
    padding-right: 14px;
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* full-bleed banners / carousels cancel the body gutter, edge to edge */
  .wrap,
  #wrap {
    margin-left: -14px !important;
    margin-right: -14px !important;
    width: auto !important;
    max-width: none !important;
    /* round-4: 外文模板的 lunbo_en.css 把 .wrap 高度钉死在 170px，
       与 aspect-ratio 组合会把宽度反算成 350.19px → 右侧留 24.8px 空白。
       这里把高度交还给宽高比，宽度才能撑满 375。 */
    height: auto !important;
  }

  /* legacy fixed-width wrappers that would still overflow the new box */
  .page-container,
  .about-main,
  .main,
  .content,
  .container {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* the old 1002px body template */
  body[style*="width"],
  body[class] { max-width: 100% !important; }
}

/* 1002px template used by images/cn.css needs a slightly stronger reset */
@media screen and (max-width: 768px) {
  body { width: auto !important; min-width: 0 !important; }
}

/* ===========================================================================
   H. Contact entry matrix  (round-2, section 3 of the brief)
   ---------------------------------------------------------------------------
   PC  (>=769px) : fixed rail on the right edge, 6 entries
                   广州电话 / 广州微信 / 佛山电话 / 佛山微信 / WhatsApp / 邮箱
   M   (<=768px) : fixed bottom bar, 4 entries
                   zh : 广州电话 / 广州微信 / 佛山电话 / 佛山微信
                   intl: 广州电话 / WhatsApp / 广州微信 / 佛山微信
   Region only changes ORDER and emphasis, never visibility.
   No blinking. Any motion respects prefers-reduced-motion.
   =========================================================================== */

#mContact { display: none; }
#mMCBar  { display: none; }
#mPanel  { display: none; }
#mModal  { display: none; }

@media screen and (min-width: 769px) {

  #mContact {
    position: fixed;
    /* round-4: hug the content column instead of the viewport edge.
       The page box sits on 10vw gutters (measured: content right edge is
       10vw - 63px away from the viewport edge at 1024/1280/1440/1920), so
       right = 10vw - 63px + 8px gap lands the rail 8px off the copy at every
       desktop width, and stops it overlapping the text below ~1100px. */
    right: max(6px, calc(10vw - 55px));
    top: 50%;
    transform: translateY(-50%);
    z-index: 9900;
    display: flex;
    flex-direction: column;
    width: 62px;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: visible;
    border: 1px solid #e6edf8;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: -4px 6px 22px rgba(16, 32, 64, .14);
    scrollbar-width: none;
  }
  #mContact::-webkit-scrollbar { width: 0; }

  #mContact .mc-i {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 62px;
    flex: 0 0 62px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #f1f5fb;
    background: transparent;
    color: #3a5075;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  #mContact .mc-i:first-child { border-radius: 9px 9px 0 0; }
  #mContact .mc-i:last-child { border-bottom: 0; border-radius: 0 0 9px 9px; }
  #mContact .mc-i:hover,
  #mContact .mc-i:focus-visible { background: #f1f7ff; color: #1a5d9c; }
  #mContact .mc-i[aria-expanded="true"] { background: #e8f1ff; color: #1a5d9c; }
  #mContact .mc-i:focus { outline: none; }
  #mContact .mc-i:focus-visible { outline: 2px solid #4a7cff; outline-offset: -2px; }

  #mContact .mc-i .ico { width: 20px; height: 20px; display: block; flex: 0 0 20px; }
  /* label may wrap to 2 lines so long intl labels stay inside the 62px rail */
  #mContact .mc-i .lb {
    display: block;
    max-width: 58px;
    padding: 0 1px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* region lead: slightly bigger icon + accent colour + accent edge */
  #mContact .mc-i.lead { color: #b5441a; }
  #mContact .mc-i.lead .ico { transform: scale(1.14); }
  #mContact .mc-i.lead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #e0703f;
  }
  #mContact .mc-i { position: relative; }

  /* ---- flyout panel, opens to the left of the rail ---- */
  #mPanel {
    position: fixed;
    z-index: 9901;
    width: 238px;
    padding: 14px 14px 12px;
    border: 1px solid #e2e9f5;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 34px rgba(16, 32, 64, .18);
    font-size: 13px;
    color: #24344f;
  }
  #mPanel.on { display: block; }
  #mPanel .mp-t {
    font-size: 12px;
    font-weight: 700;
    color: #1a5d9c;
    letter-spacing: .5px;
    margin: 0 0 8px;
    padding-bottom: 7px;
    border-bottom: 1px solid #eef3fb;
  }
  #mPanel .mp-big {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #16233c;
    letter-spacing: .6px;
    margin: 6px 0 10px;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  #mPanel .mp-img { display: block; width: 148px; height: 148px; object-fit: contain; margin: 2px auto 8px; }
  #mPanel .mp-hint { font-size: 11.5px; line-height: 1.55; color: #6b7c96; text-align: center; margin: 0 0 8px; }
  #mPanel .mp-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: #2f6fd0;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }
  #mPanel .mp-btn:hover { background: #255cb2; }
  #mPanel .mp-btn.alt { background: #2f9e44; }
  #mPanel .mp-btn.alt:hover { background: #268039; }
  #mPanel .mp-mail { word-break: break-all; text-align: center; font-size: 13.5px; color: #1a5d9c; margin: 6px 0 10px; }
}

/* ---- mobile bottom bar ---- */
@media screen and (max-width: 768px) {

  #mMCBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9900;
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-top: 1px solid #e5ecf7;
    box-shadow: 0 -2px 14px rgba(16, 32, 64, .09);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  #mMCBar .mc-b {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-left: 1px solid #f1f5fb;
    background: transparent;
    color: #3a5075;
    font-size: 10px;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #mMCBar .mc-b:first-child { border-left: 0; }
  #mMCBar .mc-b:active { background: #eef5ff; }
  #mMCBar .mc-b .ico { width: 19px; height: 19px; display: block; flex: 0 0 19px; }
  #mMCBar .mc-b .lb {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.m-has-mc { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* ---- QR modal ---- */
  #mModal.on {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9960;
    align-items: center;
    justify-content: center;
  }
  #mModal .mm-mask { position: absolute; inset: 0; background: rgba(12, 22, 40, .58); }
  #mModal .mm-box {
    position: relative;
    width: 78vw;
    max-width: 300px;
    padding: 20px 18px 16px;
    border-radius: 14px;
    background: #fff;
    text-align: center;
  }
  #mModal .mm-t { font-size: 14px; font-weight: 700; color: #1a5d9c; margin: 0 0 10px; }
  #mModal .mm-img { display: block; width: 62vw; max-width: 220px; height: auto; margin: 0 auto 10px; }
  #mModal .mm-hint { font-size: 12.5px; line-height: 1.6; color: #4a5a76; margin: 0 0 14px; }
  /* wa.me invite link inside the sheet: brand blue, same weight as the rail */
  #mModal .mm-wa {
    display: block;
    margin: 0 0 10px;
    padding: 10px 12px;
    border: 1px solid #cfe0f3;
    border-radius: 8px;
    background: #f1f7ff;
    color: #1a5d9c;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
  }
  #mModal .mm-wa:active { background: #e4eefc; }
  #mModal .mm-x {
    display: inline-block;
    padding: 9px 30px;
    border: 0;
    border-radius: 22px;
    background: #2f6fd0;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  #mContact .mc-i,
  #mContact .mc-i .ico { transition: none !important; }
  #mContact .mc-i.lead .ico { transform: none !important; }
}

/* ===========================================================================
   I. Table presentation layer  (round-2, task 2)
   ---------------------------------------------------------------------------
   99.8% of the 10,933 tables carry no <th>/<thead>; they are legacy layout
   tables.  The HTML width / cellpadding / cellspacing / border attributes are
   presentational hints, so author CSS overrides them without touching markup.
   - layout tables  : stacked by .m-lt (classified in site.js)
   - data tables    : .m-dt inside .m-scroll, horizontal pan with a fade hint
   Desktop is untouched: everything below sits in the 768px query.
   =========================================================================== */
@media screen and (max-width: 768px) {

  /* width attribute -> CSS.  cellspacing -> border-spacing.
     cellpadding is NOT overridden globally: legacy spacer cells rely on
     the attribute value 0, and adding padding there would distort the
     stacked blocks.  Padding is re-applied only inside .m-scroll. */
  table {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-spacing: 0 !important;
  }
  table[width] { width: 100% !important; }
  table[cellspacing] { border-spacing: 0 !important; }
  table[border] { border: 0 !important; }

  /* stacked layout table: no borders, no forced heights, block flow */
  table.m-lt,
  table.m-lt > tbody,
  table.m-lt > thead,
  table.m-lt > tfoot,
  table.m-lt > tbody > tr,
  table.m-lt > tr,
  table.m-lt > tbody > tr > td,
  table.m-lt > tr > td {
    display: block !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
  }
  table.m-lt > tbody > tr > td { padding: 0 0 10px 0 !important; }
  table.m-lt table { width: 100% !important; }
  table.m-lt td, table.m-lt th { border: 0 !important; }

  /* data table: horizontal pan */
  .m-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e8eef8;
    border-radius: 6px;
    background: #fff;
  }
  .m-scroll > table {
    width: auto !important;
    /* no !important: site.js sets an inline min-width per column count */
    min-width: 100%;
    margin: 0 !important;
    border: 0 !important;
    /* equal column widths: auto layout lets one long cell eat the whole row */
    table-layout: fixed !important;
  }
  .m-scroll > table td,
  .m-scroll > table th {
    padding: 7px 9px !important;
    border: 1px solid #e8eef8 !important;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.6;
  }
  .m-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 26px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95));
  }
  .m-scroll.m-at-end::after { display: none; }
  .m-scroll::before {
    content: "\5de6\53f3\u6ed1\u52a8\u67e5\u770b";
    position: absolute;
    top: 2px;
    right: 6px;
    z-index: 2;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(47, 111, 208, .9);
    color: #fff;
    font-size: 10px;
    line-height: 1.6;
    pointer-events: none;
  }
  .m-scroll.m-at-end::before,
  .m-scroll.m-no-hint::before { display: none; }
}

/* ===========================================================================
   J. Left/right template  (.con > .side float:left + .main float:right)
   ---------------------------------------------------------------------------
   Used by 126 pages (dljz.css / xzsp.css families).  On phones the 20% / 78%
   floats leave the side rail ~69px wide and every link wraps to one character
   per line.  Both columns go full width and stack; the category rail can be
   collapsed so the article comes first.
   =========================================================================== */
@media screen and (max-width: 768px) {

  .con,
  .side,
  .main {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    box-sizing: border-box;
  }
  .side { margin-bottom: 12px; }

  /* banner images keep their own flow; only cap their width */
  .sidebanner { overflow: visible !important; margin-bottom: 10px; }
  .sidebanner img { max-width: 100% !important; height: auto !important; }

  /* category rail becomes a collapsed list above the article */
  .m-catnav-sum {
    display: block;
    padding: 11px 14px;
    margin: 0 0 8px;
    border-radius: 8px;
    background: #eef4ff;
    color: #1a5d9c;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .m-catnav-sum::after {
    content: "\25be";
    float: right;
    font-size: 13px;
    transition: transform .18s ease;
  }
  .m-catnav-cb:checked ~ .m-catnav-sum::after { transform: rotate(180deg); }
  .m-catnav-cb:not(:checked) ~ .m-catnav-body { display: none; }
  .m-catnav-body { padding-top: 2px; }

  /* On pages that carry a collapsed rail the first screen must show content,
     not the promotional banners. Interleave the side column's children with
     the article so the order becomes: fold label -> article -> banners.
     Scoped with :has() so every other rail page keeps its original order. */
  .con:has(.m-catnav) {
    display: flex;
    flex-direction: column;
  }
  .con:has(.m-catnav) > * { order: 3; }
  .con:has(.m-catnav) > .side { display: contents; }
  .con:has(.m-catnav) > .main { order: 2; }
  /* the fold label must span the full column even when the legacy .con
     sets a non-stretch alignment on its flex items */
  .con:has(.m-catnav) .m-catnav {
    order: 1;
    width: 100% !important;
    align-self: stretch;
    box-sizing: border-box;
  }
  .con:has(.m-catnav) .sidebanner { order: 4; margin-bottom: 0; }
}

/* desktop: the toggle label is invisible, the rail is always expanded.
   NOTE: this must stay inside the min-width query. As an unscoped rule that
   follows the max-width block it wins on equal specificity and would hide the
   label on phones too. */
@media screen and (min-width: 769px) {
  .m-catnav-sum { display: none !important; }
  .m-catnav-body { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
  .m-catnav-sum::after { transition: none !important; }
}

/* ===========================================================================
   K. Semantic rebuild — breadcrumb / side rail list / article header
   ---------------------------------------------------------------------------
   Pages whose legacy layout tables were replaced by semantic markup
   (currently /sbqa/bhfs.html). The rules reproduce the old coloured section
   bars and article title bar so the palette and typography stay untouched.
   =========================================================================== */

.crumb {
  max-width: 1152px;
  margin: 0 auto;
  padding: 10px 0 4px;
  font-size: 13px;
  line-height: 1.7;
  color: #55617a;
}
.crumb a { color: #1a5d9c; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb span { margin: 0 6px; color: #8a95a8; }
.crumb span[aria-current] { color: #55617a; }

/* side rail: coloured section heading + link list (was a nested layout table) */
.side-nav { width: 100%; }
.side-nav-sec { margin: 0 0 2px; }
.side-nav-h {
  height: 40px;
  line-height: 40px;
  margin: 0;
  padding: 0 8px 0 13px;
  font-size: 10.5pt;
  font-weight: bold;
  color: #000066;
  overflow: hidden;
}
.side-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-nav-list li {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 0 0 11px;
  font-size: 9.5pt;
  line-height: 150%;
  color: #000099;
}
.side-nav-list li a {
  color: #000099;
  text-decoration: none;
}
.side-nav-list li a:hover { color: #0000cc; }

/* article title bar (was <td bgcolor="#c2c2ec" align="center">) */
.art-h {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  background: #c2c2ec;
}
.art-h h1 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  color: #000066;
  line-height: normal;
  text-align: center;
}
.about-art { color: #000099; }

@media screen and (max-width: 768px) {
  .crumb {
    max-width: none;
    padding: 8px 0 4px;
    font-size: 12px;
    line-height: 1.6;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* round-3 4.3: on a phone keep only "parent › current" so the trail never
     squeezes the H1. Only applies when the trail actually has three or more
     levels, otherwise a two-level trail would lose its first crumb.
     The BreadcrumbList JSON-LD in <head> is untouched and keeps the full
     hierarchy for crawlers. */
  .crumb:has(> :nth-child(5)) > *:not(:nth-last-child(-n + 3)) { display: none; }
  .crumb span { margin: 0 4px; }

  .side-nav-h {
    height: auto;
    line-height: 1.5;
    padding: 9px 10px 9px 11px;
    font-size: 15px;
    border-radius: 6px;
  }
  .side-nav-list li {
    min-height: 0;
    padding: 7px 0 7px 10px;
    font-size: 14px;
    line-height: 1.55;
  }
  .art-h { min-height: 44px; padding: 8px 10px; }
  .art-h h1 { font-size: 16px; line-height: 1.4; }

  /* service chip row: 5px 24px padding only fits two chips per line on a
     phone, which turned an 18-link block into a 430px wall above the
     article. Tighten the chips so four share a row. The chips are nav, not
     body copy, so they may drop below the 16px article minimum. */
  .index_sub_nav { padding: 6px 4px !important; gap: 5px 6px !important; }
  .index_sub_nav a {
    padding: 5px 4px;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  /* quick-nav rail (.hc_lnav): fixed 222px wide with an absolutely
     positioned 218px flyout, so on a phone the flyout leaves the flow and
     paints on top of the article. Make it static and full width instead. */
  .hc_lnav { width: 100% !important; }
  .hc_lnav .allbtn h2 a {
    width: auto !important;
    padding-left: 14px;
    font-size: 16px;
  }
  .hc_lnav .allbtn ul {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    left: auto !important;
  }
  .hc_lnav .allbtn ul li dd { width: 100% !important; }
  /* hover-only mega panels never open on touch, keep them out of the flow */
  .hc_lnav .allbtn ul li .pop { display: none !important; }

  /* legacy 120px desktop offset above the left-rail promo stack reads as a
     blank screen on a phone */
  table[style*="margin-top: 120px"] { margin-top: 12px !important; }

  /* legacy QQ online-service floater (OKQQ/ServiceQQ.js): an absolutely
     positioned 115px panel at right:5 top:105 that paints over the article.
     The fixed bottom bar already offers phone + WeChat on phones. */
  .QQbox { display: none !important; }

  /* Foreign landing pages pin their card grids with an inline
     grid-template-columns (repeat(3..6, 1fr)) which silently beats the
     page's own @media rules, leaving 79px columns on a phone. An inline
     declaration can only be beaten by !important. */
  .service-card-grid,
  [style*="repeat(3,"],
  [style*="repeat(4,"],
  [style*="repeat(5,"],
  [style*="repeat(6,"] { grid-template-columns: 1fr !important; }

  /* daili (agency bookkeeping) cards: 33% floats leave a 114px column on a
     phone, which squeezes the paragraph to 45px and 17 lines */
  .daili-box { width: 100% !important; float: none !important; }

  /* news list: two items per row on desktop leaves ~80px for the headline
     once the fixed 70px date column is taken out, so every title clamps to
     "2025年4月8…". One item per row instead. */
  .newsList .list li,
  .news .content .list li {
    width: 100% !important;
    padding: 5px 0 !important;
  }
  .newsList .list li a,
  .news .content .list li a { -webkit-line-clamp: 3; }
  .newsList .list li span.time,
  .news .content .list li span.time {
    width: 76px !important;
    font-size: 12px;
  }
}

/* ===========================================================================
   L. Service hot-link row  (round-3, 4.4)
   ---------------------------------------------------------------------------
   "服务热点：" is followed by a flat run of inline links. At 375px that run
   wraps into three lines and splits phrases ("申请 / 进出口权"). The span
   added by r3_wrap_hot.py turns it into one nowrap line that pans sideways.
   No entry is hidden, no font size is reduced.
   =========================================================================== */

/* desktop: the wrapper must not alter the original inline flow */
.m-hot { display: contents; }

@media screen and (max-width: 768px) {
  .m-hot {
    display: flex;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
    padding: 2px 0 4px;
    box-sizing: border-box;
  }
  .m-hot::-webkit-scrollbar { height: 0; }

  .m-hot a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-right: 15px;
  }
  /* a leading <b>label</b> must not be squeezed into a vertical stack */
  .m-hot > b,
  .m-hot > strong,
  .m-hot > span {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .m-hot a:last-child { padding-right: 34px; }

  /* fade hint on the right edge, removed once the row is fully scrolled */
  .m-hot {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent 100%);
  }
  .m-hot.m-at-end,
  .m-hot.m-no-hint {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ===========================================================================
   M. Home: secondary blocks become horizontal rails on phones
   ---------------------------------------------------------------------------
   The trust row (安全/极速/专业/贴心/周到) is five <td width="20%"> cells,
   each holding a coloured card. Stacked they ate 224px of vertical space -
   secondary reassurance content pushing the real services down. On a phone
   the row now pans sideways as one strip of cards.
   =========================================================================== */

@media screen and (max-width: 768px) {
  table.m-trust { display: block !important; width: 100% !important; }

  /* the tbody becomes the scroll strip; the single tr becomes its track */
  table.m-trust > tbody {
    display: flex !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 9px;
    padding: 0 0 6px;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  table.m-trust > tbody::-webkit-scrollbar { height: 0; }
  .m-trust.m-at-end > tbody,
  .m-trust.m-no-hint > tbody {
    -webkit-mask-image: none;
    mask-image: none;
  }

  table.m-trust > tbody > tr {
    display: flex !important;
    flex: 0 0 auto;
    gap: 9px;
  }
  table.m-trust > tbody > tr > td {
    display: block !important;
    flex: 0 0 auto;
    width: 116px !important;
    min-width: 116px;
    padding: 0 !important;
    vertical-align: top;
  }
  .m-trust table.tab2 {
    width: 100% !important;
    margin: 0 !important;
  }
  /* the card body is 125px tall on desktop; trim it so the strip stays light */
  .m-trust table.tab2 td[height="125"] {
    height: auto !important;
    padding: 8px 0 12px !important;
  }
  .m-trust table.tab2 img { max-width: 52px; height: auto; }
  .m-trust table.tab2 div[style*="font-size: 18px"] {
    font-size: 15px !important;
  }
}

/* ===========================================================================
   N. Home: four service-entry illustrations as a rail
   ---------------------------------------------------------------------------
   走出去 / 开账户 / 保市场 / 拿身份 are four 222x190 illustrations stacked
   vertically inside a 222px-wide table - about 800px of scroll for what is
   a shortcut row. On a phone they become one panning strip; the enclosing
   222px table is released to full width first, otherwise the strip would be
   confined to a 222px window.
   =========================================================================== */

@media screen and (max-width: 768px) {
  table.m-imgrail {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 14px !important;
  }
  .m-imgrow {
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 10px;
    padding: 2px 0 6px;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  .m-imgrow::-webkit-scrollbar { height: 0; }
  .m-imgrow.m-at-end,
  .m-imgrow.m-no-hint {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .m-imgrow > a {
    flex: 0 0 auto;
    width: 46vw;
    max-width: 210px;
    padding: 0 !important;
  }
  .m-imgrow > a img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ===========================================================================
   O. Notice bar  (round-3, task 4)
   ---------------------------------------------------------------------------
   Two identical copies of the text sit inside .scroll-track, so
   translateX(-50%) lands exactly on one copy and the loop has no jump.
   JS adds .m-anim only when the text is wider than the container, so a short
   notice never moves. Content and links are untouched.
   =========================================================================== */

.scroll-container { overflow: hidden; }
.scroll-track { display: inline-flex; white-space: nowrap; }
/* each copy must keep its intrinsic width; without this flex shrinks it to the
   container width and the notice wraps into two lines again.
   padding-left is reset because one legacy notice (sblb2026) pushed its text
   out of the box with padding-left:100% - inside a two-copy track that makes
   the strip explode to ~2000px. */
.scroll-track > .scroll-text {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 2rem;
  white-space: nowrap !important;
}
.scroll-track > .scroll-text[aria-hidden="true"] { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .scroll-track.m-anim,
  .scroll-text {
    animation: none !important;
    transform: none !important;
  }
}

/* /sblb/sblb2026.htm carries the notice inside an auto-layout table cell.
   A flex track reports its content width as its own, which widens the cell
   to ~2035px and the whole page with it. That page's container already has
   position:relative + a fixed height, so taking the track out of flow keeps
   the cell width intact while the animation still runs. */
.scroll-container > .scroll-track.m-track-abs {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}

/* =========================================================================
   round-4 · 首页轮播移动端
   1) <picture> 包裹后图片仍要撑满整格
   2) 桌面 42px/36px 的两行字在 375px 下必然溢出，统一收敛为 19px 居中
   3) 第 3 张（bgg4）右下角是白色透视网格，白字压上去看不清，给文字层加衬底
   ========================================================================= */
@media screen and (max-width: 768px) {

  #pic li picture { display: block; width: 100%; height: 100%; }
  #pic li picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .wrap .slide-text,
  #wrap .slide-text {
    top: 50%; left: 50%; right: auto;
    transform: translate(-50%, -50%);
    width: 90%; text-align: center;
  }
  .wrap .slide-text p,
  .wrap .slide-split .line1,
  .wrap .slide-split .line2,
  .wrap .slide-center .line1,
  .wrap .slide-center .line2 {
    position: static; transform: none;
    text-align: center;
    font-size: 19px;
    line-height: 1.38;
    margin: 0;
    word-break: normal;
    letter-spacing: 1px;
  }
  .wrap .slide-text .line1 { margin-bottom: 4px; }

  /* 半透明衬底只包住文字，不改图片本身 */
  .wrap .slide-scrim::before {
    content: "";
    position: absolute;
    left: -14px; right: -14px; top: -11px; bottom: -11px;
    background: rgba(0, 0, 0, .46);
    border-radius: 10px;
    z-index: -1;
  }
  .wrap .slide-scrim { z-index: 11; }
}

/* =========================================================================
   round-4 · 首页两组跑马灯（CSS transform + 双份内容，禁用 marquee / margin 驱动）
   第一组 走出去/开账户/保市场/拿身份  → 从右向左
   第二组 安全/极速/专业/贴心/周到      → 从左向右
   ========================================================================= */
@media screen and (max-width: 768px) {

  /* 第一组：图片轨道 */
  .m-imgrow.m-mq {
    overflow: hidden !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .m-mq-track {
    display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 10px;
    flex: 0 0 auto;                 /* 作为 flex item 时不允许被压缩，否则 max-content 失效 */
    width: max-content;
    max-width: none !important;     /* 压过 round-2 的 div{max-width:100%!important} 兜底 */
    gap: 0;                         /* 用 margin 造间距，保证 -50% 正好等于一份 */
    padding: 2px 0 6px;
    will-change: transform;
    -webkit-transform: translateZ(0);
  }
  .m-mq-track > a { flex: 0 0 auto; width: 46vw; max-width: 210px; padding: 0 !important; margin-right: 10px; }
  .m-mq-track > a img { width: 100% !important; height: auto !important; }

  /* 第二组：表格 tbody 作轨道，表格做裁剪盒 */
  table.m-trust.m-mq { overflow: hidden; }
  table.m-trust > tbody.m-marquee {
    gap: 0 !important;
    width: max-content !important;
    overflow: hidden !important;
    padding-bottom: 6px;
  }
  table.m-trust > tbody.m-marquee > tr { gap: 9px; padding-right: 9px; }

  .m-mq-track.m-run-left { animation: mMarqL var(--mq-dur, 26s) linear infinite; }
  .m-mq-track.m-run-right { animation: mMarqR var(--mq-dur, 34s) linear infinite; }
  table.m-trust > tbody.m-marquee.m-run-right { animation: mMarqR var(--mq-dur, 34s) linear infinite; }
  table.m-trust > tbody.m-marquee.m-run-left { animation: mMarqL var(--mq-dur, 34s) linear infinite; }
}

@keyframes mMarqL { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes mMarqR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .m-mq-track.m-run-left,
  .m-mq-track.m-run-right,
  table.m-trust > tbody.m-marquee {
    animation: none !important;
    transform: none !important;
  }
}

/* 桌面端必须完全回到改造前：副本隐藏，包裹层透明化（display:contents 让 <a> 回到原流） */
@media screen and (min-width: 769px) {
  .m-mq-clone { display: none !important; }
  .m-mq-track { display: contents; }
}

/* =========================================================================
   round-4 · 页脚结构化（中文首页）
   PC 端保持改造前的单块紧凑文本流；移动端才把三层拉开、加分割线。
   传真 .sf-fax 仅桌面显示。
   ========================================================================= */
.sf { width: 100%; }

/* ---- 桌面：一行一层，与原 span 流一致 ---- */
.sf .sf-in { display: flex; align-items: flex-start; }
.sf .sf-body { flex: 1 1 auto; min-width: 0; min-height: 100px; }
.sf .sf-qr { flex: 0 0 13%; text-align: center; }
.sf .sf-qr img { display: inline-block; }

.sf .sf-loc { display: block; }
.sf .sf-loc address {
  display: inline; font-style: normal;
}
.sf .sf-tel, .sf .sf-fax, .sf .sf-mail { display: inline; }
.sf .sf-tel a, .sf .sf-mail a { color: inherit; text-decoration: none; }
.sf .sf-tel a:hover, .sf .sf-mail a:hover { text-decoration: underline; }

/* the old footer lived in a <table> cell whose baseline spacing ran 9-10px
   taller at every desktop width; keep the document height identical so the
   1440px layout stays within +/-2px of the pre-change build. */
@media screen and (min-width: 1200px) {
  .sf .sf-body { padding-bottom: 9px; }
}

/* ---- 移动端：三层堆叠 ---- */
@media screen and (max-width: 768px) {

  /* 咨询中心（右侧栏）手机上不显示，入口交给底部固定联络条。
     注意：页面移动端有 table.m-lt > tbody > tr > td 的 display:block!important，
     特异性高于 td.side-consult，必须把整条路径写全才压得住。 */
  table.m-lt > tbody > tr > td.side-consult,
  table.m-lt > tr > td.side-consult,
  .side-consult { display: none !important; height: 0 !important; padding: 0 !important; }

  /* 页脚主体 */
  .sf .sf-hr { margin: 4px 0 0; }
  .sf .sf-in { display: block; padding: 0 14px 8px; }
  .sf .sf-body { min-height: 0; }

  .sf .sf-l1 {
    padding: 10px 0 8px;
    border-bottom: 1px solid #eaeff7;
    line-height: 1.75;
  }
  .sf .sf-l2 { padding: 2px 0 4px; }

  .sf .sf-loc {
    padding: 9px 0;
    border-bottom: 1px solid #eaeff7;
  }
  .sf .sf-loc:last-child { border-bottom: 0; }
  .sf .sf-loc address {
    display: block;
    font-style: normal;
    margin-bottom: 3px;
    line-height: 1.6;
    word-break: break-word;
  }
  .sf .sf-tel, .sf .sf-fax, .sf .sf-mail {
    display: block;
    line-height: 1.6;
  }
  /* 传真只在桌面出现 */
  .sf .sf-fax { display: none !important; }

  /* 电话行做成整行可点，触控高度 ≥44px */
  .sf .sf-tel { min-height: 44px; display: flex; align-items: center; }
  .sf .sf-tel a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-right: 8px;
    color: #0a4bd8; font-weight: 600;
  }

  .sf .sf-l3 {
    padding: 12px 0 10px;
    border-top: 1px solid #eaeff7;
    line-height: 1.7;
  }
  .sf .sf-l4 {
    padding: 10px 0 4px;
    border-top: 1px solid #eaeff7;
    display: flex; flex-wrap: wrap; gap: 6px 10px;
    font-size: 12px;
  }
  .sf .sf-l4 a {
    display: inline-flex; align-items: center; min-height: 40px;
    color: #33415c;
  }
  .sf .sf-l4 a b { font-weight: 500; }
  .sf .sf-l4 img { vertical-align: middle; margin-right: 4px; }

  /* 页脚二维码在手机上不再重复：上面的「添加微信」已能弹出同一张码 */
  .sf .sf-qr { display: none; }
}

/* =========================================================================
   round-4 补充 · 中文 24 项服务表（.service-grid.svc）
   桌面：24 条进同一个 4 列 grid，等同于原来的 6 行 × 4 列平铺
   移动：6 组默认收起，点标题展开，组内两列
   用 div + button 而非 <details>：Chrome 111+ 的 ::details-content 伪元素
   会截断 display:contents，桌面网格会塌陷成 0 高。
   ========================================================================= */
@media screen and (min-width: 769px) {
  .service-grid.svc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    padding: 1px;
    background: #dce5f2;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .service-grid.svc .svc-g { display: contents; }
  .service-grid.svc .svc-hd { display: none !important; }
  .service-grid.svc .svc-list { display: contents !important; }
  .service-grid.svc .svc-i {
    background: #ffffff;
    padding: 14px 8px;
    text-align: center;
    box-sizing: border-box;
  }
  .service-grid.svc .svc-s { display: block; }
}

@media screen and (max-width: 768px) {
  .service-grid.svc {
    display: block;
    padding: 0;
    background: transparent;
    border-radius: 0;
    overflow: visible;
  }
  .service-grid.svc .svc-g { border-bottom: 1px solid #e8eef7; }
  .service-grid.svc .svc-g:last-child { border-bottom: 0; }

  .service-grid.svc .svc-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    padding: 0 4px;
    background: none;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .service-grid.svc .svc-t {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 600; color: #123a63;
  }
  .service-grid.svc .svc-n { font-size: 12px; color: #7f8ea6; }
  .service-grid.svc .svc-ar {
    flex: 0 0 auto;
    width: 8px; height: 8px;
    border-right: 2px solid #9aa8bd;
    border-bottom: 2px solid #9aa8bd;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .2s ease;
  }
  .service-grid.svc .svc-g.on .svc-ar {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  .service-grid.svc .svc-list {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 0 12px;
  }
  .service-grid.svc .svc-g.on .svc-list { display: grid; }

  .service-grid.svc .svc-i {
    background: #f7f9fc;
    border-radius: 8px;
    padding: 11px 9px;
    text-align: left;
    box-sizing: border-box;
    min-height: 44px;
  }
  .service-grid.svc .svc-i strong { font-size: 14px !important; line-height: 1.45; display: block; }
  .service-grid.svc .svc-i .svc-s {
    display: block;
    margin-top: 3px;
    font-size: 11.5px !important;
    line-height: 1.5;
  }
}

/* =========================================================================
   round-4 补充 · 外文首页服务卡片
   1) 核心服务 6 张：描述短的语种（ja/ko 等）走两列，描述长的保持单列
   2) Visa 12 张：原本内联 repeat(4,1fr) 在手机上会挤成 4 条窄柱，
      改成横向滑动，12 项一个不少
   ========================================================================= */
@media screen and (max-width: 768px) {

  .service-card-grid.m-2col {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .service-card-grid.m-2col > .service-card-item {
    padding: 16px 11px 14px !important;
    border-radius: 12px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .service-card-grid.m-2col > .service-card-item .service-icon { margin: 0 0 8px !important; }
  .service-card-grid.m-2col > .service-card-item h1,
  .service-card-grid.m-2col > .service-card-item h4 {
    font-size: 14px !important;
    line-height: 1.35 !important;
    margin: 0 0 6px !important;
  }
  .service-card-grid.m-2col > .service-card-item p {
    font-size: 11.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 8px !important;
  }
  .service-card-grid.m-2col > .service-card-item > a { font-size: 12px !important; }

  .service-card-grid.m-slide {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 10px;
    margin-bottom: 22px !important;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent 100%);
  }
  .service-card-grid.m-slide::-webkit-scrollbar { height: 0; }
  .service-card-grid.m-slide > .service-card-item.service-card-item {
    flex: 0 0 72vw !important;
    flex-shrink: 0 !important;
    max-width: 310px !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    padding: 16px 13px 14px !important;
  }
  .service-card-grid.m-slide > .service-card-item h4 { font-size: 14px !important; line-height: 1.35 !important; }
  .service-card-grid.m-slide > .service-card-item p { font-size: 11.5px !important; line-height: 1.5 !important; }
  .service-card-grid.m-slide.m-at-end,
  .service-card-grid.m-slide.m-no-hint {
    -webkit-mask-image: none; mask-image: none;
  }
}

/* =========================================================================
   round-5 · 首页 WAP
   1) 三地地址块升级为「标签 + 地址 + 电话 + 微信/WhatsApp」卡片
   2) 「来华工作居留全流程服务」16 链接 → 分段卡片（桌面仍是 4 列）
   3) 新闻 / 链接 / 地址 / 备案 四区统一圆角、间距、辅助色
   ========================================================================= */
:root {
  --r5-r: 12px;
  --r5-bg: #f7f9fc;
  --r5-line: #e8eef7;
  --r5-acc: #3b6be0;
}

/* ---------- 桌面临界：新增元素一律不显示，保持原视觉 ---------- */
@media screen and (min-width: 769px) {
  .sf-region, .sf-qrbtn { display: none !important; }

  .visa-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
  .visa-grid .vg { display: contents; }
  .visa-grid .vg-hd { display: none !important; }
  .visa-grid .vg-list { display: contents !important; }
  .visa-grid a {
    display: flex;
    align-items: center;
    min-height: 26px;
    padding: 0 8px 0 20px;
    line-height: 1.55;
    overflow: hidden;
  }
}

/* ---------- 移动端 ---------- */
@media screen and (max-width: 768px) {

  /* 三地卡片 */
  .sf .sf-loc { padding: 12px 0 14px; }
  .sf .sf-region {
    display: inline-block;
    margin-bottom: 7px;
    padding: 2px 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #2b53b8;
    background: #eaf1ff;
    border-radius: 20px;
    letter-spacing: .3px;
  }
  .sf .sf-qrbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 0 12px;
    border: 1px solid #cbe9d7;
    background: #f2fbf5;
    color: #0b7a3d;
    border-radius: var(--r5-r);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sf .sf-qrbtn:active { background: #e7f7ee; }

  /* 来华板块：四段卡片 */
  .visa-grid { display: block; }
  .visa-grid .vg { margin-bottom: 14px; }
  .visa-grid .vg:last-child { margin-bottom: 0; }
  .visa-grid .vg-hd {
    padding: 6px 2px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #123a63;
    border-bottom: 1px solid var(--r5-line);
    margin-bottom: 10px;
  }
  .visa-grid .vg-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .visa-grid .vg-list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 10px;
    background: var(--r5-bg);
    border: 1px solid var(--r5-line);
    border-radius: var(--r5-r);
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    box-sizing: border-box;
  }

  /* 四区统一：链接栏胶囊、新闻分隔线 */
  .bottom-links { padding: 10px 14px 4px; }
  .bottom-links .m-hot a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    background: var(--r5-bg);
    border: 1px solid var(--r5-line);
    border-radius: 18px;
    font-size: 12.5px;
    text-decoration: none;
  }
  .news .newsList li {
    border-bottom: 1px solid #f0f4fa;
    padding-bottom: 6px;
    margin-bottom: 6px;
  }
  .news .newsList li:last-child { border-bottom: 0; }
}