@charset "utf-8";
/* =============================================================================
   建岑企服 · 内页样式表  (shun.css)
   -----------------------------------------------------------------------------
   作用范围：栏目列表页（产品 / 新闻 / 课堂 / 快讯）与内容详情页。
   依赖：tokens.css + style.css（必须先加载）。
   约定：本文件不重复定义 .bdListPaging / .jm-container 等已在 style.css 中
         统一的组件，避免双份定义互相覆盖。
   -----------------------------------------------------------------------------
   版本：v3.0.0   目录：/zhenxing/jianc12/css/shun.css
   ============================================================================= */

/* =============================================================================
   1. 内页容器骨架
   ============================================================================= */
#container-wrap { background: var(--c-bg-soft); min-height: 60vh; }
#contents { padding: var(--sec-py) 0 var(--sec-py-lg); }

/* =============================================================================
   2. 内页视觉横幅 SVISUAL
   ============================================================================= */
.svisual-wrap {
  position: relative;
  background: var(--c-primary-active);
  overflow: hidden;
}
.svis-sec { position: relative; }
.svis { position: relative; }
.svis .img-box { position: absolute; inset: 0; }
.svis .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.svisual-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 107, 93, .82), rgba(15, 107, 93, .35));
  pointer-events: none;
}
.svis .txt-box {
  position: relative;
  z-index: var(--z-base);
  width: var(--container);
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  min-height: 220px;
  display: flex;
  align-items: center;
}
.txt-pkg { display: flex; flex-direction: column; gap: var(--sp-1); }
.txt-eng {
  font-size: var(--fs-note);
  font-weight: var(--fw-medium);
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .65);
  text-transform: uppercase;
}
.txt {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  letter-spacing: var(--ls-tight);
}
.svis-deco { display: none; }

/* =============================================================================
   3. 面包屑 BREADCRUMB
   ============================================================================= */
.jm-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-assist);
  color: var(--t-weak);
}
.jm-crumb a { color: var(--t-assist); transition: var(--t-color); }
.jm-crumb a:hover { color: var(--c-primary); }
.jm-crumb .sep { color: var(--c-border-strong); font-size: var(--fs-note); }
.jm-crumb .cur { color: var(--c-primary); font-weight: var(--fw-medium); }

/* =============================================================================
   4. 内页区块标题（与首页 .jm-sec-head 视觉一致）
   ============================================================================= */
.cont-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-border);
  position: relative;
}
.cont-top::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 2px;
  background: var(--c-primary);
}
.cont-tit {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--t-strong);
  letter-spacing: var(--ls-tight);
}
.cont-util { flex: none; }
.box-util { display: flex; align-items: center; gap: var(--sp-1); }
.unit { display: flex; }
.btn-cast {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-h);
  height: var(--btn-h);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-white);
  transition: var(--t-all);
}
.btn-cast:hover { border-color: var(--c-primary-mute); background: var(--c-primary-bg); }
.btn-cast:active { transform: translateY(1px); }
.btn-print::before,
.btn-share::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--c-gray-3);
  transition: var(--t-color);
}
.btn-print::before {
  -webkit-mask: linear-gradient(currentColor 0 0) top/18px 6px no-repeat,
                linear-gradient(currentColor 0 0) bottom/12px 8px no-repeat;
  mask: linear-gradient(currentColor 0 0) top/18px 6px no-repeat,
        linear-gradient(currentColor 0 0) bottom/12px 8px no-repeat;
}
.btn-share::before {
  -webkit-mask: radial-gradient(circle 3px at 5px 9px, currentColor 96%, transparent 100%),
                radial-gradient(circle 3px at 13px 4px, currentColor 96%, transparent 100%),
                radial-gradient(circle 3px at 13px 14px, currentColor 96%, transparent 100%);
  mask: radial-gradient(circle 3px at 5px 9px, currentColor 96%, transparent 100%),
        radial-gradient(circle 3px at 13px 4px, currentColor 96%, transparent 100%),
        radial-gradient(circle 3px at 13px 14px, currentColor 96%, transparent 100%);
}
.btn-cast:hover::before { background: var(--c-primary); }

/* =============================================================================
   5. 分类选项卡 C-TAB01（与首页 .jm-tabs 视觉统一）
   ============================================================================= */
.c-tab01 { margin-bottom: var(--sp-4); }
.c-tab01 ul {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.c-tab01 ul::-webkit-scrollbar { display: none; }
.c-tab01 li { flex: none; }
.c-tab01 a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tab-h);
  padding: 0 var(--sp-1);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--t-assist);
  white-space: nowrap;
  transition: var(--t-color);
}
.c-tab01 a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: var(--t-transform);
}
.c-tab01 a:hover { color: var(--c-primary); }
.c-tab01 a:hover::after { transform: scaleX(.4); }
.c-tab01 li.on a { color: var(--c-primary); font-weight: var(--fw-semibold); }
.c-tab01 li.on a::after { transform: scaleX(1); }

/* =============================================================================
   6. 列表工具条（结果数 + 排序）
   ============================================================================= */
.bdListTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.bdSec { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; width: 100%; }
.bdTotal { font-size: var(--fs-h4); color: var(--t-title); }
.bdTotal em { font-style: normal; font-weight: var(--fw-semibold); color: var(--c-primary); }
.bdTotal b { font-weight: var(--fw-semibold); color: var(--t-title); }
.bdPkg { flex: none; }
.bdSearch form { display: flex; align-items: center; gap: var(--sp-1); }
.bdSearch .text {
  width: 240px;
  height: var(--input-h-sm);
  padding: 0 var(--sp-2);
  font-size: var(--fs-assist);
  color: var(--t-title);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  transition: var(--t-color);
}
.bdSearch .text:focus { border-color: var(--c-primary); box-shadow: var(--sd-focus); outline: none; }
.btnSearch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--input-h-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-assist);
  color: var(--t-on-primary);
  background: var(--c-primary);
  border-radius: var(--r-md);
  transition: var(--t-all);
}
.btnSearch:hover { background: var(--c-primary-hover); box-shadow: var(--sd-hover); }
.btnSearch:active { transform: translateY(1px); }

/* 内容说明条 */
.contents_view_wrap { margin-bottom: var(--sp-4); }
.c-tit01 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--t-title);
  margin-bottom: var(--sp-3);
}

/* =============================================================================
   7. 服务列表卡片 BOOKLET LIST（统一 .jm-card 观感）
   ============================================================================= */
.bookletList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
}
.bookletList > li { display: flex; }
.inBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--sd-card);
  overflow: hidden;
  transition: var(--t-card);
}
.inBox:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
  box-shadow: var(--sd-hover);
}
.inBox .img {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--c-bg-soft);
}
.inBox .img img { width: 100%; height: 100%; object-fit: cover; transition: var(--t-transform); }
.inBox:hover .img img { transform: scale(1.04); }
.btnBox { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--card-p); flex: 1; }
.btnBox .txt { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.btnBox .txt .year {
  color: var(--t-title);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: var(--t-color);
}
.inBox:hover .btnBox .txt .year { color: var(--c-primary); }
.btnBox .desc {
  font-size: var(--fs-assist);
  line-height: var(--lh-normal);
  color: var(--t-assist);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.btnBox .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-1);
}
.btnBox .price { font-family: var(--ff-number); font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--c-accent); line-height: 1; }
.btnBox .price em { font-style: normal; font-size: var(--fs-note); font-weight: var(--fw-regular); }
.btnBox .go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h-sm);
  padding: 0 var(--sp-2);
  font-size: var(--fs-assist);
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-radius: var(--r-sm);
  transition: var(--t-all);
}
.btnBox .go:hover { background: var(--c-primary); color: var(--t-on-primary); }

/* =============================================================================
   8. 资讯列表 NEWS LIST（修复 newsThum 固定高度导致的卡片参差）
   ============================================================================= */
#bdListWrap { margin-bottom: var(--sp-2); }
.newsList { display: grid; gap: var(--sp-2); }
.newsList > li { display: flex; }
.newsList > li > a {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-3);
  align-items: center;
  width: 100%;
  padding: var(--card-p);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  box-shadow: var(--sd-card);
  transition: var(--t-card);
}
.newsList > li > a:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
  box-shadow: var(--sd-hover);
}
.newsThum {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-bg-soft);
}
.newsThum img { width: 100%; height: 100%; object-fit: cover; transition: var(--t-transform); }
.newsList > li > a:hover .newsThum img { transform: scale(1.04); }
.newsCont { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.newsCont .subject {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--t-title);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: var(--t-color);
}
.newsList > li > a:hover .newsCont .subject { color: var(--c-primary); }
.newsCont .cont-more { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-note); color: var(--t-weak); }
.newsCont .txt {
  font-size: var(--fs-assist);
  line-height: var(--lh-normal);
  color: var(--t-assist);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.more-btn {
  align-self: flex-start;
  margin-top: var(--sp-1);
  font-size: var(--fs-assist);
  color: var(--c-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.more-btn::after { content: "\203A"; transition: var(--t-transform); }
.newsList > li > a:hover .more-btn::after { transform: translateX(4px); }

/* =============================================================================
   9. 详情页 DETAIL
   ============================================================================= */
#boardWrap { position: relative; }

/* ---- 9.1 详情头部 ---- */
.bdViewHead {
  padding: var(--card-p) var(--card-p) var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border-bottom: 0;
}
.bdViewTit { margin-bottom: var(--sp-2); }
.viewTit { display: flex; align-items: flex-start; gap: var(--sp-1); }
.viewTit .stit {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--t-strong);
  letter-spacing: var(--ls-tight);
}
.viewTit .notice { display: none; }
.viewTitWinfo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-assist);
  color: var(--t-weak);
}
.viewTitWinfo .name { color: var(--t-assist); }
.viewTitWinfo .hit { padding: 2px var(--sp-1); color: var(--c-primary); background: var(--c-primary-soft); border-radius: var(--r-sm); }
.bdViewWinfo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--c-border);
}
.bdWinfoTxt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-assist); }
.bdWinfoTxt .tit { color: var(--t-weak); }
.bdWinfoTxt .txt { color: var(--t-assist); }

/* ---- 9.2 正文区：最大宽度 760px 居中，行长 45–75 中文字符 ---- */
.bdViewCont {
  padding: var(--sp-4) var(--card-p);
  background: var(--c-white);
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}
#boardContents { max-width: 760px; margin: 0 auto; }
.contents-box {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--t-body);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.contents-box h1,
.contents-box h2,
.contents-box h3,
.contents-box h4 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--t-strong);
}
.contents-box h1 { font-size: var(--fs-h2); }
.contents-box h2 { font-size: var(--fs-h3); }
.contents-box h3 { font-size: var(--fs-h4); }
.contents-box h4 { font-size: var(--fs-body); }
.contents-box p { margin: 0 0 var(--sp-2); }
.contents-box ul,
.contents-box ol { margin: 0 0 var(--sp-2); padding-left: var(--sp-3); }
.contents-box ul { list-style: disc; }
.contents-box ol { list-style: decimal; }
.contents-box li { margin-bottom: var(--sp-1); }
.contents-box img {
  max-width: 100%;
  height: auto;
  margin: var(--sp-3) 0;
  border-radius: var(--r-md);
}
.contents-box a { color: var(--c-primary); text-decoration: underline; }
.contents-box a:hover { color: var(--c-primary-hover); }
.contents-box table { margin: var(--sp-3) 0; font-size: var(--fs-assist); }
.contents-box th,
.contents-box td { padding: var(--sp-1) var(--sp-2); border: 1px solid var(--c-border); }
.contents-box th { background: var(--c-bg-soft); font-weight: var(--fw-semibold); text-align: left; }
.contents-box blockquote {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--c-primary);
  background: var(--c-primary-bg);
  color: var(--t-assist);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.contents-box strong { color: var(--t-strong); }

/* 覆盖入库文章的重复内联排版，保证全站一致 */
.contents-box div[style] { font-family: inherit !important; }

/* ---- 9.3 上下篇 ---- */
.bdViewMore {
  padding: 0 var(--card-p);
  background: var(--c-white);
  border-left: 1px solid var(--c-border);
  border-right: 1px solid var(--c-border);
}
.bdViewMore ul { border-top: 1px solid var(--c-border); }
.bdViewMore li { border-bottom: 1px solid var(--c-border); }
.bdViewMore li:last-child { border-bottom: 0; }
.bdViewMore a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  padding: var(--sp-2) 0;
  transition: var(--t-color);
}
.bdViewMore a:hover { color: var(--c-primary); }
/* 无上一篇/下一篇时（CMS 输出 href="#"），由 main.js 标记为不可点 */
.bdViewMore a.is-off {
  cursor: default;
  opacity: .55;
  background: var(--c-bg-soft);
}
.bdViewMore a.is-off:hover { color: var(--t-assist); }
.bdViewMore a.is-off:hover .subject { color: var(--t-assist); }
.bdViewMore .ico {
  flex: none;
  width: 6px; height: 6px;
  border-radius: var(--r-circle);
  background: var(--c-border-strong);
}
.bdViewMore .lbl { flex: none; font-size: var(--fs-assist); color: var(--t-weak); }
.bdViewMore .subject {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--t-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bdViewMore a:hover .subject { color: var(--c-primary); }
.bdViewMore .date { flex: none; font-size: var(--fs-note); color: var(--t-weak); }

/* ---- 9.4 底部按钮 ---- */
.bdViewBtns {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--card-p);
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 0 0 var(--r-md) var(--r-md);
  border-top: 0;
}
.bw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--sp-4);
  font-size: var(--fs-body);
  color: var(--c-primary);
  background: var(--c-white);
  border: 1px solid var(--c-primary-mute);
  border-radius: var(--r-md);
  transition: var(--t-all);
}
.bw-btn:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--t-on-primary); }
.bw-btn:active { transform: translateY(1px); }

/* =============================================================================
   10. 详情页 · FAQ 手风琴（与入库的 FAQPage JSON-LD 呼应，利于 GEO）
   ============================================================================= */
.jm-faq { margin: var(--sp-5) 0 0; }
.jm-faq__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--t-strong);
}
.jm-faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-1);
  overflow: hidden;
  background: var(--c-white);
  transition: var(--t-color);
}
.jm-faq__item:hover { border-color: var(--c-border-strong); }
.jm-faq__item.is-open { border-color: var(--c-primary-mute); }
.jm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--card-p-sm);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--t-title);
  text-align: left;
  cursor: pointer;
  transition: var(--t-color);
}
.jm-faq__q:hover { color: var(--c-primary); }
.jm-faq__q::after {
  content: "+";
  flex: none;
  font-size: var(--fs-h3);
  color: var(--c-gray-4);
  transition: var(--t-transform);
}
.jm-faq__item.is-open .jm-faq__q::after { transform: rotate(45deg); color: var(--c-primary); }
.jm-faq__a {
  display: none;
  padding: 0 var(--card-p-sm) var(--card-p-sm);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--t-assist);
}
.jm-faq__item.is-open .jm-faq__a { display: block; }

/* =============================================================================
   11. 详情页 · 侧边锚点目录
   ============================================================================= */
.jm-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 760px) 260px;
  gap: var(--sp-5);
  justify-content: center;
  align-items: start;
}
.jm-toc {
  position: sticky;
  top: var(--sp-3);
  padding: var(--card-p-sm);
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.jm-toc__title {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--t-strong);
}
.jm-toc__list { display: flex; flex-direction: column; gap: 2px; }
.jm-toc__list a {
  display: block;
  padding: 6px var(--sp-1);
  font-size: var(--fs-assist);
  color: var(--t-assist);
  border-radius: var(--r-sm);
  border-left: 2px solid transparent;
  transition: var(--t-color);
}
.jm-toc__list a:hover { color: var(--c-primary); background: var(--c-white); }
.jm-toc__list a.is-active {
  color: var(--c-primary);
  font-weight: var(--fw-medium);
  background: var(--c-white);
  border-left-color: var(--c-primary);
}

/* =============================================================================
   12. 详情页 · 转化 CTA + 相关推荐
   ============================================================================= */
.jm-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--c-primary-bg);
  border: 1px solid var(--c-primary-mute);
  border-radius: var(--r-lg);
}
.jm-cta__txt { min-width: 0; }
.jm-cta__txt h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); color: var(--t-strong); }
.jm-cta__txt p { margin-top: 4px; font-size: var(--fs-assist); color: var(--t-assist); }
.jm-cta__btn { flex: none; }

.jm-related { margin-top: var(--sp-5); }
.jm-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }

/* =============================================================================
   13. 响应式 RESPONSIVE
   ============================================================================= */

/* ---- 13.1 笔记本 ≤ 1200 ---- */
@media screen and (max-width: 1200px) {
  .newsList > li > a { grid-template-columns: 200px 1fr; }
  .jm-article-layout { grid-template-columns: minmax(0, 1fr); }
  .jm-toc { display: none; }
}

/* ---- 13.2 平板 768–1024（修复 iPad 竖屏 810px 断点缺口） ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  .svis .txt-box { min-height: 180px; }
  .txt { font-size: var(--fs-h2); }

  .bookletList { grid-template-columns: repeat(2, 1fr); }
  .newsList > li > a { grid-template-columns: 180px 1fr; gap: var(--sp-2); }
  .jm-related__grid { grid-template-columns: repeat(2, 1fr); }
  .bdSearch .text { width: 180px; }

  #contents { padding: var(--sec-py) 0 var(--sec-py-lg); }
}

/* ---- 13.3 手机 ≤ 768 ---- */
@media screen and (max-width: 768px) {
  .svis .txt-box { min-height: 140px; }
  .txt { font-size: var(--fs-h2); }
  .txt-eng { letter-spacing: 1px; }

  #contents { padding: var(--sec-py) 0; }

  .cont-top { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .cont-util { align-self: flex-end; }
  .btn-cast { width: var(--touch-min); height: var(--touch-min); }

  .bdListTop { gap: var(--sp-2); }
  .bdSec { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .bdSearch form { width: 100%; }
  .bdSearch .text { flex: 1; width: auto; height: var(--input-h); }
  .btnSearch { height: var(--input-h); }

  /* 服务列表：单列大卡 */
  .bookletList { grid-template-columns: 1fr; gap: var(--sp-2); }

  /* 资讯列表：移动端改为紧凑横卡，替代拥挤堆叠 */
  .newsList { gap: var(--sp-2); }
  .newsList > li > a {
    grid-template-columns: 116px 1fr;
    gap: var(--sp-2);
    padding: var(--card-p-sm);
  }
  .newsThum { aspect-ratio: 1 / 1; }
  .newsCont .subject { font-size: var(--fs-body); -webkit-line-clamp: 2; line-clamp: 2; }
  .newsCont .txt { -webkit-line-clamp: 2; line-clamp: 2; }
  .more-btn { display: none; }

  /* 详情 */
  .bdViewHead { padding: var(--card-p-sm) var(--card-p-sm) var(--sp-2); }
  .viewTit .stit { font-size: var(--fs-h2); }
  .bdViewCont { padding: var(--sp-3) var(--card-p-sm); }
  .contents-box { font-size: var(--fs-body); line-height: var(--lh-loose); }
  .bdViewMore { padding: 0 var(--card-p-sm); }
  .bdViewMore .date { display: none; }
  .bdViewBtns { padding: var(--sp-3) var(--card-p-sm); }
  .bw-btn { width: 100%; height: var(--btn-h); }

  .jm-cta { padding: var(--sp-3); }
  .jm-cta__btn { width: 100%; }
  .jm-related__grid { grid-template-columns: 1fr; gap: var(--sp-2); }
}

/* ---- 13.4 小屏 ≤ 480 ---- */
@media screen and (max-width: 480px) {
  .svis .txt-box { min-height: 120px; }
  .txt { font-size: var(--fs-h3); }
  .newsList > li > a { grid-template-columns: 96px 1fr; }
  .newsCont .txt { display: none; }
  .bookletList { gap: var(--sp-1); }
  .btnBox { padding: var(--card-p-sm); }
}

/* ============================================================================
   无封面内容兜底（ketang/kuaixun 等 jm-related 推荐卡）
   IndexImage 为空时引擎输出 /images/nopic.gif；main.js 会替换为
   images/cover/ 下的品牌封面图，此处 background 作为无 JS 环境兜底
   ============================================================================ */
.inBox .img {
  background: linear-gradient(135deg, #0b3d33 0%, #116e5f 55%, #1f9c86 100%) center / cover no-repeat;
}
.jm-related__grid .inBox:nth-child(3n+1) .img { background-image: url(../images/cover/cover-01.jpg); }
.jm-related__grid .inBox:nth-child(3n+2) .img { background-image: url(../images/cover/cover-02.jpg); }
.jm-related__grid .inBox:nth-child(3n+3) .img { background-image: url(../images/cover/cover-03.jpg); }
.inBox .img img[src*="nopic"] { opacity: 0; }