/* ==========================================================================
   zgjjjc / enhance.css —— 家居建材网 视觉增强层（2026-10-31）
   --------------------------------------------------------------------------
   定位：**只做覆盖，不改原文件**。
     base / header / index / footer / channel / detail 六张基线表都是「线上原样取回」，
     一个字符都不动；本文件在它们**之后**加载，用更高优先级的选择器做视觉升级。

   回滚方式：把 layout.ejs 里引用本文件的那一行删掉，站点立即回到改造前。

   与 rmjkol / airuiyoka 两份 enhance.css 的关系：同一套方法论，各自独立实现。
     本站是「Swiper5 + 自研 flex」老骨架，主色棕 #854E33，页脚是深色 #292C33。

   基线里被本文件修掉的几个真问题（不是审美偏好）：
     1. `.container { width: 1200px }` 死宽 —— 手机上整站被横向裁掉右侧，
        没有横向滚动条（body 上没声明 overflow），等于右边那截内容和链接直接消失。
     2. 各区块宽度全部写死：`.latestNewsBox/…/… 380px`、`.swiper-decorate 790px`、
        `.decorateInfo 380px`、`.articleContent 790px`。1200 的版心正好放下，
        窄一档就溢出，宽一档就右边空一大条。
     3. `.articleContent .articleStatement` 是 12px 居中棕色小字 —— 免责声明读不清。
     4. 页脚只有「常见问题解答 互联网违法和不良信息举报」一行纯文本，不是链接。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] {
  --jj: #854e33;              /* 主色，取自线上六张表（出现 42 次） */
  --jj-dark: #6d3d26;         /* hover 深一档 */
  --jj-deep: #4a2a19;         /* 最深：页头下沿、当前栏目 */
  --jj-soft: #f9f4f0;         /* 浅棕底 */
  --jj-line: #ede2d9;         /* 浅棕描边 */
  --jj-ink: #221a15;          /* 标题 */
  --jj-text: #4b423b;         /* 正文 */
  --jj-mute: #948a82;         /* 辅助信息 */
  --jj-bg: #f7f5f2;           /* 页面底（基线是 #F6F6F6，偏冷，改暖一点与棕主色同调） */
  --jj-card: #ffffff;
  --jj-radius: 4px;           /* 家居建材走克制路线，圆角比健康站小 */
  --jj-radius-sm: 3px;
  --jj-shadow: 0 1px 2px rgba(34, 26, 21, .04), 0 4px 14px rgba(34, 26, 21, .045);
  --jj-shadow-hover: 0 10px 26px rgba(133, 78, 51, .13);
  --jj-ease: cubic-bezier(.2, .7, .3, 1);
  --jj-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans SC",
             Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. 全局
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] {
  background: var(--jj-bg);
  color: var(--jj-text);
  font-family: var(--jj-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 兜底：基线的宽度都是写死的，窄屏时一定会溢出。宁可吃掉那几像素，
     也不要出现「整页可以左右拖动、右边是空白」的手机端观感。 */
  overflow-x: hidden;
}

body[data-site="zgjjjc"] *,
body[data-site="zgjjjc"] *::before,
body[data-site="zgjjjc"] *::after {
  box-sizing: border-box;
}

body[data-site="zgjjjc"] a {
  transition: color .18s var(--jj-ease), background-color .18s var(--jj-ease),
              border-color .18s var(--jj-ease), opacity .18s var(--jj-ease);
}

body[data-site="zgjjjc"] ::selection {
  background: var(--jj-soft);
  color: var(--jj-deep);
}

body[data-site="zgjjjc"] img {
  max-width: 100%;
}

/* 空 src 会渲染成破图图标，比不显示更难看（模板层已尽量不输出，这里兜底）。
   注意 "null" 是**字符串**，不是空值 —— 库里有稿件把 image_logo 存成了字面量 null。 */
body[data-site="zgjjjc"] img[src=""],
body[data-site="zgjjjc"] img[src="null"],
body[data-site="zgjjjc"] img.is-broken {
  visibility: hidden;
}

/* 版心：死宽 1200 → 可收缩。这是全站移动端能不能用的一号开关。 */
body[data-site="zgjjjc"] .container {
  width: auto;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   3. 页头
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] header {
  background: #fff;
  box-shadow: 0 1px 0 var(--jj-line);
}

body[data-site="zgjjjc"] header .top {
  padding: 22px 0;
}

body[data-site="zgjjjc"] header .top .logo {
  height: 50px;
  width: auto;
  display: block;
}

/* 搜索框：方框带 2px 棕边 → 胶囊，按钮与输入框连成一体 */
body[data-site="zgjjjc"] header .top .search {
  width: auto;
  flex: 1 1 auto;
  max-width: 560px;
  height: 44px;
  margin-left: 40px;
  background: #f8f6f4;
  border: 1px solid #e9e1db;
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .2s var(--jj-ease), background-color .2s var(--jj-ease);
}

body[data-site="zgjjjc"] header .top .search:focus-within {
  background: #fff;
  border-color: var(--jj);
}

body[data-site="zgjjjc"] header .top .search input {
  padding: 0 20px;
  font-size: 14px;
  color: var(--jj-ink);
  background: transparent;
  border: 0;
  outline: none;
}

body[data-site="zgjjjc"] header .top .search input::placeholder {
  color: #b3a9a1;
}

body[data-site="zgjjjc"] header .top .search .searchBtn {
  width: 96px;
  line-height: 44px;
  font-size: 14px;
  letter-spacing: .06em;
  background: var(--jj);
  border: 0;
  border-radius: 0 999px 999px 0;
  transition: background-color .18s var(--jj-ease);
}

body[data-site="zgjjjc"] header .top .search .searchBtn:hover {
  background: var(--jj-dark);
}

/* 导航：棕线上沿 + 图标一级 + 二级平铺（与线上老站一致，不做下拉浮层）。
   基线给 .navType:nth-child(2)/(3) 写死 280/390 宽，栏目增减就错位；
   这里改成按内容自适应，二级在栏内折行，导航条按需整栏换行。 */
body[data-site="zgjjjc"] .navList {
  border-top: 3px solid var(--jj);
  background: #fff;
}

body[data-site="zgjjjc"] .navList .container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  gap: 0;
}

body[data-site="zgjjjc"] .navList .navType {
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0;
  border-right: 1px solid #f2ece7;
  transition: background-color .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .navList .navType:first-child {
  flex-shrink: 0;
  border-left: 1px solid #f2ece7;
}

body[data-site="zgjjjc"] .navList .navType:nth-child(2),
body[data-site="zgjjjc"] .navList .navType:nth-child(3) {
  width: auto;
}

body[data-site="zgjjjc"] .navList .navType:hover {
  background: var(--jj-soft);
}

body[data-site="zgjjjc"] .navList .navType .mainNav {
  padding: 14px 26px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jj-ink);
  white-space: nowrap;
  transition: color .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .navList .navType .mainNav i {
  font-size: 22px;
  margin-bottom: 4px;
  color: var(--jj);
}

body[data-site="zgjjjc"] .navList .navType .mainNav:hover,
body[data-site="zgjjjc"] .navList .navType:hover .mainNav {
  color: var(--jj);
}

/* 二级栏目：直接平铺在一级右侧，不做下拉浮层 —— 下拉里一列只有一百多像素，
   四五字的栏目名会被压成「工装…配」。
   整条导航只排一行：一级标题宽度固定，剩下的宽度按二级内容多少分配，
   分到哪栏不够就在这一栏里折行（文字始终不截），而不是整栏掉到下一行 ——
   那样第二行只剩「行业产品」一个，左边空一大片。 */
body[data-site="zgjjjc"] .navList .navType ul {
  position: static;
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-content: center;
  /* 下限 180px：内容少的栏目（资讯只 5 个）按内容比例收缩时会被压到
     一百出头、一个词一行，太挤；180 是「一行放得下 2–3 个词」的宽度。 */
  min-width: 180px;
  max-width: none;
  padding: 6px 10px 6px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

body[data-site="zgjjjc"] .navList .navType ul a {
  display: block;
  padding: 0 9px;
  font-size: 13px;
  line-height: 24px;
  color: var(--jj-text);
  white-space: nowrap;
  border-radius: 3px;
  transition: color .16s var(--jj-ease), background-color .16s var(--jj-ease);
}

body[data-site="zgjjjc"] .navList .navType ul a:hover {
  color: var(--jj);
  background: #fff;
}

/* --------------------------------------------------------------------------
   4. 首屏 #banner（轮播 + 右列文字）
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] #banner {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-top: 22px;
}

body[data-site="zgjjjc"] #banner .swiper-container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border-radius: var(--jj-radius);
  overflow: hidden;
  box-shadow: var(--jj-shadow);
}

/* 轮播标题条：基线是贴底的一行白字，压在明暗不定的图上经常看不清 */
body[data-site="zgjjjc"] #banner .swiper-container .swiper-slide .newsTitle {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 20px 16px;
  font-size: 17px;
  text-align: left;
  background: linear-gradient(to top, rgba(12, 9, 7, .82), rgba(12, 9, 7, 0));
}

/* 图片：基线只写了 width:100%，没有 object-fit —— 换真实封面后会横向拉变形。
   高度来自 layout 里的内联 style（430px），那是「图片自身撑不出高度」的兜底，
   保留；这里只补裁切方式，并把装饰性轮播的固定 790px 宽度也放开。 */
body[data-site="zgjjjc"] #banner .swiper-container .swiper-slide img {
  width: 100%;
  object-fit: cover;
  display: block;
}

body[data-site="zgjjjc"] .decorate .swiper-decorate .swiper-slide img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  display: block;
}

/* 左右箭头：白色圆形，压在图上也能看清 */
body[data-site="zgjjjc"] #banner .swiper-button-prev,
body[data-site="zgjjjc"] #banner .swiper-button-next,
body[data-site="zgjjjc"] .decorate .swiper-button-prev,
body[data-site="zgjjjc"] .decorate .swiper-button-next {
  width: 38px;
  height: 38px;
  margin-top: -19px;
  background: rgba(255, 255, 255, .9);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(34, 26, 21, .18);
  opacity: 0;
  transition: opacity .2s var(--jj-ease), background-color .2s var(--jj-ease);
}

body[data-site="zgjjjc"] #banner:hover .swiper-button-prev,
body[data-site="zgjjjc"] #banner:hover .swiper-button-next,
body[data-site="zgjjjc"] .decorate:hover .swiper-button-prev,
body[data-site="zgjjjc"] .decorate:hover .swiper-button-next {
  opacity: 1;
}

body[data-site="zgjjjc"] #banner .swiper-button-prev::after,
body[data-site="zgjjjc"] #banner .swiper-button-next::after,
body[data-site="zgjjjc"] .decorate .swiper-button-prev::after,
body[data-site="zgjjjc"] .decorate .swiper-button-next::after {
  font-size: 15px;
  font-weight: 700;
  color: var(--jj);
}

/* 右列 7 条文字：让它们成为一张「榜单卡」，而不是浮在白底上的裸文字 */
body[data-site="zgjjjc"] #banner .newsList {
  flex: 0 0 358px;
  width: 358px;
  margin-left: 0;
  padding: 8px 18px 12px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
  counter-reset: jjrank;
}

body[data-site="zgjjjc"] #banner .newsList li {
  position: relative;
  padding: 13px 0 13px 34px;
  border-bottom: 1px dashed #f2ece7;
  counter-increment: jjrank;
}

body[data-site="zgjjjc"] #banner .newsList li:last-child {
  border-bottom: 0;
}

/* 序号：前三名给实心棕，其余浅灰，一眼看出「这是榜」 */
body[data-site="zgjjjc"] #banner .newsList li::before {
  content: counter(jjrank);
  position: absolute;
  left: 0;
  top: 13px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  color: var(--jj-mute);
  background: #f4f0ec;
  border-radius: 2px;
}

body[data-site="zgjjjc"] #banner .newsList li:nth-child(-n+3)::before {
  color: #fff;
  background: var(--jj);
}

/* 榜单里不再画圆点（序号已经承担了这个角色） */
body[data-site="zgjjjc"] #banner .newsList .listRadius {
  display: none;
}

body[data-site="zgjjjc"] #banner .newsList a {
  display: block;
  margin-left: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--jj-text);
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-site="zgjjjc"] #banner .newsList a:hover {
  color: var(--jj);
}

/* --------------------------------------------------------------------------
   5. 通用区块：标题 / 栏目条 / 文字列表
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .classifyBox {
  margin-top: 52px;
}

/* 标题：38px 居中 + 两侧长横线 → 24px 左对齐 + 短棕条。
   38px 那是杂志封面的尺度，在 1200 版心的资讯站上会把每屏的垂直空间吃光。 */
body[data-site="zgjjjc"] .classifyBox .classifyTitle {
  position: relative;
  padding: 0 0 12px 16px;
  text-align: left;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--jj-ink);
  border-bottom: 1px solid var(--jj-line);
}

body[data-site="zgjjjc"] .classifyBox .classifyTitle::before {
  left: 0;
  top: 6px;
  right: auto;
  bottom: auto;
  width: 5px;
  height: 22px;
  background: var(--jj);
  border-radius: 1px;
}

body[data-site="zgjjjc"] .classifyBox .classifyTitle::after {
  display: none;
}

/* 英文副标题：从标题下方 20px 的绝对定位，改成紧跟其后的行内小字 */
body[data-site="zgjjjc"] .classifyBox .classifyTitle .en {
  position: static;
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #b8ada5;
}

/* 栏目条：18px 纯文字链接摊成一排 → 小药丸，点得准也看得清层次 */
body[data-site="zgjjjc"] .classifyBox .classifyLink {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
  text-align: left;
  font-size: 14px;
}

body[data-site="zgjjjc"] .classifyBox .classifyLink .link {
  margin-right: 0;
  padding: 5px 15px;
  color: var(--jj-text);
  background: #fff;
  border: 1px solid var(--jj-line);
  border-radius: 999px;
  transition: all .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .classifyBox .classifyLink .link:hover {
  color: #fff;
  background: var(--jj);
  border-color: var(--jj);
}

body[data-site="zgjjjc"] .classifyBox .classifyLink .link.active {
  color: #fff;
  background: var(--jj);
  border-color: var(--jj);
}

/* 带圆点的文字列表：统一行距，hover 有底色反馈 */
body[data-site="zgjjjc"] .newsList {
  width: auto;
}

body[data-site="zgjjjc"] .newsList li {
  padding: 7px 0;
  line-height: 1.7;
  border-bottom: 1px dashed #f4efeb;
}

body[data-site="zgjjjc"] .newsList li:last-child {
  border-bottom: 0;
}

body[data-site="zgjjjc"] .newsList .listRadius {
  width: 5px;
  height: 5px;
  margin-right: 0;
  background: var(--jj);
  border: 0;
  border-radius: 50%;
  vertical-align: middle;
  transition: transform .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .newsList li:hover .listRadius {
  transform: scale(1.6);
}

body[data-site="zgjjjc"] .newsList a {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--jj-text);
}

body[data-site="zgjjjc"] .newsList a:hover {
  color: var(--jj);
}

/* --------------------------------------------------------------------------
   6. 一周家居播报
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .hotNews {
  margin-top: 44px;
  padding: 22px 24px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .hotNews .newsTitle {
  height: auto;
  margin-bottom: 18px;
  padding-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
  border-bottom: 1px solid var(--jj-line);
}

/* 「Hot news」那一格：棕底白字 → 小标签，别用 32px 的字撑满一行 */
body[data-site="zgjjjc"] .hotNews .newsTitle span {
  line-height: 1.5;
}

body[data-site="zgjjjc"] .hotNews .newsTitle span:first-child {
  padding: 3px 10px;
  margin-right: 10px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--jj);
  border-radius: 2px;
}

body[data-site="zgjjjc"] .hotNews .newsTitle span:last-child {
  font-size: 17px;
  color: var(--jj-ink);
}

body[data-site="zgjjjc"] .hotNews .flex {
  gap: 24px;
  align-items: flex-start;
}

body[data-site="zgjjjc"] .hotNews .flex > a {
  display: block;
  flex: 0 0 380px;
  max-width: 380px;
  border-radius: var(--jj-radius-sm);
  overflow: hidden;
}

body[data-site="zgjjjc"] .hotNews .flex > a img {
  width: 100%;
  height: 226px;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--jj-ease);
}

body[data-site="zgjjjc"] .hotNews .flex > a:hover img {
  transform: scale(1.04);
}

body[data-site="zgjjjc"] .hotNews .flex > .newsList {
  flex: 1 1 0;
  min-width: 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   7. 最新资讯（三个 .latestNewsBox）
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .latestNews .flex {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding: 14px 16px 16px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
  transition: box-shadow .25s var(--jj-ease), transform .25s var(--jj-ease);
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox:hover {
  box-shadow: var(--jj-shadow-hover);
  transform: translateY(-2px);
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox > a {
  display: block;
  border-radius: var(--jj-radius-sm);
  overflow: hidden;
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox > a img {
  width: 100%;
  height: 178px;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--jj-ease);
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox > a:hover img {
  transform: scale(1.04);
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox > .newsList {
  margin-top: 12px;
  padding: 0;
}

body[data-site="zgjjjc"] .latestNews .latestNewsBox > .newsList li {
  padding: 9px 0;
}

/* --------------------------------------------------------------------------
   8. 装修设计
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .decorate .flex {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

body[data-site="zgjjjc"] .decorate .swiper-decorate {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .decorate .swiper-decorate .swiper-slide .newsTitle {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 22px 18px;
  font-size: 19px;
  text-align: left;
  background: linear-gradient(to top, rgba(12, 9, 7, .82), rgba(12, 9, 7, 0));
}

/* 右侧长列表单独成卡 */
body[data-site="zgjjjc"] .decorate .decorateList {
  flex: 0 0 358px;
  width: 358px;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .decorate .decorateFlex {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

body[data-site="zgjjjc"] .decorate .decorateFlex > .newsList {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .decorate .decorateInfo {
  flex: 0 0 358px;
  width: 358px;
  padding: 16px 18px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

/* 那两个靠绝对定位白块「挖空」横线的小标题，改成朴素的左对齐标题栏：
   白块位置是按 380px 宽度写死的，容器一变就露馅。 */
body[data-site="zgjjjc"] .decorate .decorateInfo .infoTitle,
body[data-site="zgjjjc"] .industry .industryNews .industryTitle {
  height: auto;
  margin-bottom: 14px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  color: var(--jj-ink);
  border-bottom: 1px solid var(--jj-line);
}

body[data-site="zgjjjc"] .decorate .decorateInfo .infoTitle span,
body[data-site="zgjjjc"] .industry .industryNews .industryTitle span {
  display: none;
}

body[data-site="zgjjjc"] .decorate .decorateInfo .infoTitle .infoBox,
body[data-site="zgjjjc"] .industry .industryNews .industryTitle .industryBox {
  display: none;
}

body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-info .swiper-slide {
  gap: 12px;
  align-items: flex-start;
}

body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-info .swiper-slide img {
  flex: 0 0 120px;
  width: 120px;
  height: 80px;
  margin-right: 0;
  object-fit: cover;
  border-radius: 2px;
}

body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-info .swiper-slide .newsTitle a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--jj-text);
}

body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-info .swiper-slide .newsTitle a:hover {
  color: var(--jj);
}

body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-info .swiper-slide .newsDate {
  font-size: 12px;
  color: var(--jj-mute);
}

/* 小轮播的分页点 */
body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: var(--jj-line);
  opacity: 1;
}

body[data-site="zgjjjc"] .decorate .decorateInfo .swiper-pagination-bullet-active {
  background: var(--jj);
}

/* --------------------------------------------------------------------------
   9. 行业产品
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .industry .flex {
  display: flex;
  gap: 18px;
  align-items: stretch;
}

body[data-site="zgjjjc"] .industry .leftBox {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  padding: 14px 16px 16px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .industry .leftBox > a {
  display: block;
  flex: 0 0 240px;
  border-radius: var(--jj-radius-sm);
  overflow: hidden;
}

body[data-site="zgjjjc"] .industry .leftBox > a img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform .5s var(--jj-ease);
}

body[data-site="zgjjjc"] .industry .leftBox > a:hover img {
  transform: scale(1.04);
}

body[data-site="zgjjjc"] .industry .leftBox .newsList {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 20px;
  padding: 0;
}

body[data-site="zgjjjc"] .industry .industryNews {
  flex: 0 0 358px;
  width: 358px;
  padding: 16px 18px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .industry .industryNews > a {
  display: block;
  margin-bottom: 10px;
  border-radius: var(--jj-radius-sm);
  overflow: hidden;
}

body[data-site="zgjjjc"] .industry .industryNews > a img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

body[data-site="zgjjjc"] .industry .industryNews .newsList {
  width: auto;
  padding: 0;
}

body[data-site="zgjjjc"] .industry .flexBox {
  display: flex;
  gap: 18px;
  margin-top: 18px;
  align-items: stretch;
}

body[data-site="zgjjjc"] .industry .flexBox > .flex {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  gap: 18px;
  background: transparent;
}

body[data-site="zgjjjc"] .industry .flexBox > .flex > .newsList {
  flex: 1 1 0;
  min-width: 0;
  margin-right: 0;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .industry .flexBox > .newsList {
  flex: 0 0 358px;
  width: 358px;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

/* --------------------------------------------------------------------------
   10. 家具百科
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .furniture .furnitureType {
  margin-top: 22px;
  padding: 6px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .furniture .furnitureType .typeNav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--jj-line);
  padding-bottom: 6px;
}

body[data-site="zgjjjc"] .furniture .typeNav .nav {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  font-size: 14px;
  color: var(--jj-mute);
  background: transparent;
  border: 0;
  border-radius: var(--jj-radius-sm) var(--jj-radius-sm) 0 0;
  cursor: pointer;
  transition: color .18s var(--jj-ease), background-color .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .furniture .typeNav .nav i {
  font-size: 22px;
  color: var(--jj-mute);
  transition: color .18s var(--jj-ease), transform .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .furniture .typeNav .nav:hover {
  color: var(--jj);
  background: var(--jj-soft);
}

body[data-site="zgjjjc"] .furniture .typeNav .nav:hover i {
  color: var(--jj);
}

body[data-site="zgjjjc"] .furniture .typeNav .nav.active {
  color: var(--jj);
  background: var(--jj-soft);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--jj);
}

body[data-site="zgjjjc"] .furniture .typeNav .nav.active i {
  color: var(--jj);
  transform: translateY(-1px);
}

body[data-site="zgjjjc"] .furniture .typeContent {
  padding: 18px 16px 8px;
}

/* 关键词格子：交回基线，这里一条覆盖都不写。
   之前给 ul/li 加了 flex-wrap + gap、给 a 加了 border-radius:999px 想做胶囊，
   但基线 `.typePanel ul a { flex: 1 }` 没清掉 —— 链接被拉成 200px 宽的大椭圆，
   四字栏目在里面折成两行，圈与圈互相压。原样是「每行两组、组内均分的纯文字」，
   整齐且不会破格，保持不动。 */

/* --------------------------------------------------------------------------
   11. 列表页（/n/:slug）
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .latestNews .flex > .articleList {
  flex: 1 1 auto;
  min-width: 0;
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem {
  padding: 18px;
  margin-bottom: 14px;
  background: #fff;
  border: 0;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
  transition: box-shadow .25s var(--jj-ease), transform .25s var(--jj-ease);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem:hover {
  box-shadow: var(--jj-shadow-hover);
  transform: translateY(-2px);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem > a {
  flex: 0 0 200px;
  display: block;
  margin-right: 20px;
  border-radius: var(--jj-radius-sm);
  overflow: hidden;
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleImg {
  width: 200px;
  height: 132px;
  object-fit: cover;
  display: block;
  margin-right: 0;
  max-height: none;
  transition: transform .5s var(--jj-ease);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem:hover .articleImg {
  transform: scale(1.04);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleInfo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleTitle {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--jj-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleTitle:hover {
  color: var(--jj);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleDate {
  margin-top: 10px;
  font-size: 12px;
  color: var(--jj-mute);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleNote {
  margin-top: 10px;
  font-size: 13px;
  color: var(--jj-mute);
}

body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleNote .cate {
  display: inline-block;
  padding: 1px 10px;
  color: var(--jj) !important;
  background: var(--jj-soft);
  border-radius: 999px;
}

/* 列表页右栏：两块 industryNews 各成卡片 */
body[data-site="zgjjjc"] .latestNews .flex > div:not(.articleList) {
  flex: 0 0 358px;
  width: 358px;
}

body[data-site="zgjjjc"] .latestNews .flex > div:not(.articleList) > .industryNews {
  width: auto;
  padding: 16px 18px 14px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

/* 分页 */
body[data-site="zgjjjc"] #kkpager-box {
  padding: 10px 0 30px;
  text-align: center;
}

body[data-site="zgjjjc"] #kkpager a,
body[data-site="zgjjjc"] #kkpager span {
  display: inline-block;
  min-width: 34px;
  height: 34px;
  margin: 0 4px;
  padding: 0 10px;
  font-size: 13px;
  line-height: 32px;
  text-align: center;
  color: var(--jj-text);
  background: #fff;
  border: 1px solid var(--jj-line);
  border-radius: 3px;
}

body[data-site="zgjjjc"] #kkpager a:hover {
  color: var(--jj);
  border-color: var(--jj);
}

body[data-site="zgjjjc"] #kkpager .currPage,
body[data-site="zgjjjc"] #kkpager .currPage:hover {
  color: #fff !important;
  background: var(--jj);
  border-color: var(--jj);
}

/* --------------------------------------------------------------------------
   12. 详情页（/news/:id）
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .breadNav {
  padding: 10px 0;
  margin: 14px 0;
  font-size: 13px;
  color: var(--jj-mute);
}

body[data-site="zgjjjc"] .breadNav a {
  margin: 0 4px;
  font-size: 13px;
  color: var(--jj-mute);
}

body[data-site="zgjjjc"] .breadNav a:hover {
  color: var(--jj);
}

body[data-site="zgjjjc"] .breadNav span {
  margin-left: 4px;
  color: #b8ada5;
}

body[data-site="zgjjjc"] .article .flex {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

/* 790px 死宽 → 弹性。这是详情页能不能在手机上读的一号开关。 */
body[data-site="zgjjjc"] .articleContent {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 30px 34px 34px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .articleContent .articleTitle {
  font-size: 28px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--jj-ink);
  margin-bottom: 18px;
}

body[data-site="zgjjjc"] .articleContent .articleTime,
body[data-site="zgjjjc"] .articleContent .articleSource {
  margin-right: 18px;
  font-size: 13px;
  color: var(--jj-mute);
}

/* 正文：16px/28px → 16.5px/1.95，段落间留白，图片圆角居中 */
body[data-site="zgjjjc"] .articleContent .articleDetail {
  margin-top: 22px;
  padding-top: 22px;
  font-size: 16.5px;
  line-height: 1.95;
  color: #3a332d;
  border-top: 1px dashed #f0e8e2;
}

body[data-site="zgjjjc"] .articleContent .articleDetail p {
  margin-top: 18px;
}

body[data-site="zgjjjc"] .articleContent .articleDetail img {
  display: block;
  margin: 22px auto;
  max-width: 100%;
  border-radius: var(--jj-radius-sm);
}

body[data-site="zgjjjc"] .articleContent .articleDetail h2,
body[data-site="zgjjjc"] .articleContent .articleDetail h3 {
  margin: 26px 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--jj-ink);
}

body[data-site="zgjjjc"] .articleContent .articleDetail a {
  color: var(--jj);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 免责声明：12px 居中棕字 → 浅棕卡片 + 左侧棕条。三行以上才读得下去。 */
body[data-site="zgjjjc"] .articleContent .articleStatement {
  margin: 26px 0 6px;
  padding: 16px 18px 16px 20px;
  font-size: 12.5px;
  line-height: 1.9;
  text-align: left;
  color: #8d837b;
  background: #fdfaf8;
  border-left: 3px solid var(--jj);
  border-radius: 0 var(--jj-radius-sm) var(--jj-radius-sm) 0;
}

body[data-site="zgjjjc"] .articleContent .articleStatement span {
  display: inline-block;
  margin-right: 4px;
  font-weight: 700;
  color: var(--jj);
}

/* 举报入口（模板里 .reportEntry） */
body[data-site="zgjjjc"] .reportEntry {
  margin: 18px 0 4px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.9;
  color: #6f665f;
  background: var(--jj-soft);
  border: 1px dashed #e5d3c5;
  border-radius: var(--jj-radius-sm);
}

body[data-site="zgjjjc"] .reportEntry a {
  font-weight: 600;
  color: var(--jj-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   上一篇 / 下一篇（模板里 .pnNav）
   --------------------------------------------------------------------------
   控制器传的是 prevNews / nextNews（同平台 + 同 type + createdAt 相邻）。
   用 flex:1 自适应：两边都有就各占一半，只有一边就独占整行。
   不补空占位 —— 补了会在旁边留一片空白，像页面少了一块。
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .pnNav {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px dashed #f0e8e2;
}

body[data-site="zgjjjc"] .pnNav .pnItem {
  display: flex;
  flex: 1 1 0;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--jj-text);
  background: #faf7f5;
  border: 1px solid var(--jj-line);
  border-radius: var(--jj-radius-sm);
  transition: color .18s ease, background .18s ease,
              border-color .18s ease, box-shadow .18s ease;
}

body[data-site="zgjjjc"] .pnNav a.pnItem:hover {
  color: var(--jj-dark);
  background: var(--jj-soft);
  border-color: #e3cfc0;
  box-shadow: 0 4px 12px rgba(133, 78, 51, .09);
}

body[data-site="zgjjjc"] .pnNav .pnItem i {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 12px;
  color: var(--jj-mute);
}

body[data-site="zgjjjc"] .pnNav a.pnItem:hover i {
  color: var(--jj);
}

/* 标题单行截断：详情页左右两栏各约 380px，长标题必须裁，否则卡片被撑高不齐 */
body[data-site="zgjjjc"] .pnNav .pnItem span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-site="zgjjjc"] .pnNav a.pnItem:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 窄屏：并排两栏每栏只剩一百多像素，标题截得只剩几个字，改上下堆叠 */
@media (max-width: 640px) {
  body[data-site="zgjjjc"] .pnNav {
    flex-direction: column;
    gap: 10px;
  }
}

/* 相关推荐 */
body[data-site="zgjjjc"] .articleContent .recommend {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px dashed #f0e8e2;
}

body[data-site="zgjjjc"] .articleContent .recommend .recommendTitle {
  position: relative;
  padding-left: 14px;
  font-size: 17px;
  font-weight: 700;
  text-align: left;
  color: var(--jj-ink);
}

body[data-site="zgjjjc"] .articleContent .recommend .recommendTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 4px;
  height: 17px;
  background: var(--jj);
  border-radius: 1px;
}

body[data-site="zgjjjc"] .articleContent .recommend .recommendTitle::after {
  display: none;
}

body[data-site="zgjjjc"] .articleContent .recommend .recommendTitle span {
  display: none;
}

body[data-site="zgjjjc"] .articleContent .recommend .flex {
  gap: 0 24px;
  margin-top: 8px;
}

body[data-site="zgjjjc"] .articleContent .recommend .newsList {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  margin-top: 0;
  padding: 0;
}

/* 详情页右栏（匿名 div）：靠 :not 选中，给它定宽 */
body[data-site="zgjjjc"] .article .flex > div:not(.articleContent) {
  flex: 0 0 358px;
  width: 358px;
}

body[data-site="zgjjjc"] .article .industryNews {
  width: auto;
  padding: 16px 18px 14px;
  margin-bottom: 16px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

/* 特别精选 */
body[data-site="zgjjjc"] .article .selected {
  padding: 16px 18px 18px;
  background: #fff;
  border-radius: var(--jj-radius);
  box-shadow: var(--jj-shadow);
}

body[data-site="zgjjjc"] .article .selected .selectTitle {
  position: relative;
  padding-left: 14px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--jj-ink);
  border-bottom: 1px solid var(--jj-line);
}

body[data-site="zgjjjc"] .article .selected .selectTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 16px;
  background: var(--jj);
  border-radius: 1px;
}

body[data-site="zgjjjc"] .article .selected .listItem {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed #f4efeb;
}

body[data-site="zgjjjc"] .article .selected .listItem:last-child {
  border-bottom: 0;
}

body[data-site="zgjjjc"] .article .selected .listImg {
  flex: 0 0 92px;
  width: 92px;
  height: 64px;
  object-fit: cover;
  border-radius: 2px;
}

body[data-site="zgjjjc"] .article .selected .listInfo {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

body[data-site="zgjjjc"] .article .selected .listTitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--jj-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-site="zgjjjc"] .article .selected .listTitle:hover {
  color: var(--jj);
}

body[data-site="zgjjjc"] .article .selected .listTime {
  font-size: 12px;
  color: var(--jj-mute);
}

/* 纯图容器（图片链接里没有文字）在封面加载失败时整块收起。
   这类容器如果只把 img 藏起来，会留下一个 380×226 的空洞，
   比「这一块没有图」更像页面坏了。带标题的图位（首屏轮播、详情页配图）不动。 */
body[data-site="zgjjjc"] .hotNews .flex > a:has(> img.is-broken),
body[data-site="zgjjjc"] .latestNews .latestNewsBox > a:has(> img.is-broken),
body[data-site="zgjjjc"] .industry .leftBox > a:has(> img.is-broken),
body[data-site="zgjjjc"] .industry .industryNews > a:has(> img.is-broken),
body[data-site="zgjjjc"] .article .selected .listItem > a:has(> img.is-broken) {
  display: none;
}

/* --------------------------------------------------------------------------
   13. 页脚
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] footer {
  margin-top: 52px;
  padding: 38px 0 30px;
  background: #292c33;
}

body[data-site="zgjjjc"] footer .footerTitle {
  position: relative;
  padding-left: 13px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

body[data-site="zgjjjc"] footer .footerTitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 15px;
  background: var(--jj);
  border-radius: 1px;
}

body[data-site="zgjjjc"] footer .friednLink {
  margin-top: 16px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid #3b3f47;
}

body[data-site="zgjjjc"] footer .friednLink a {
  margin: 0 16px 8px 0;
  font-size: 13px;
  color: #b7bcc6;
}

body[data-site="zgjjjc"] footer .friednLink a:hover {
  color: #fff;
}

/* 合规导航：深底上的描边药丸，举报用主色实心 */
body[data-site="zgjjjc"] footer .navLink {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

body[data-site="zgjjjc"] footer .navLink a {
  display: inline-block;
  padding: 7px 16px;
  font-size: 13px;
  color: #d5d8de;
  background: rgba(255, 255, 255, .04);
  border: 1px solid #444851;
  border-radius: 999px;
  transition: all .18s var(--jj-ease);
}

body[data-site="zgjjjc"] footer .navLink a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border-color: #6a6f79;
  transform: translateY(-1px);
}

body[data-site="zgjjjc"] footer .navLink a.is-key {
  color: #fff;
  background: var(--jj);
  border-color: var(--jj);
}

body[data-site="zgjjjc"] footer .navLink a.is-key:hover {
  background: var(--jj-dark);
  border-color: var(--jj-dark);
}

body[data-site="zgjjjc"] footer .copyRight {
  justify-content: flex-start;
  padding-top: 20px;
  border-top: 1px solid #3b3f47;
}

body[data-site="zgjjjc"] footer .copyRight img {
  height: 34px;
  width: auto;
  margin-right: 28px;
  opacity: .9;
}

body[data-site="zgjjjc"] footer .copyRight p {
  font-size: 12.5px;
  line-height: 2;
  color: #9aa0aa;
}

body[data-site="zgjjjc"] footer .copyRight p a {
  color: #9aa0aa !important;
}

body[data-site="zgjjjc"] footer .copyRight p a:hover {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   14. 悬浮工具条（举报 + 返回顶部）
   -------------------------------------------------------------------------- */
body[data-site="zgjjjc"] .jj-float {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-site="zgjjjc"] .jj-float a,
body[data-site="zgjjjc"] .jj-float button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  font-family: var(--jj-font);
  font-size: 13px;
  color: #fff;
  background: var(--jj);
  border: 0;
  border-radius: var(--jj-radius);
  box-shadow: 0 6px 18px rgba(74, 42, 25, .28);
  cursor: pointer;
  transition: transform .18s var(--jj-ease), background-color .18s var(--jj-ease),
              opacity .18s var(--jj-ease);
}

body[data-site="zgjjjc"] .jj-float a:hover,
body[data-site="zgjjjc"] .jj-float button:hover {
  background: var(--jj-dark);
  transform: translateY(-2px);
}

body[data-site="zgjjjc"] .jj-float .jj-top {
  opacity: 0;
  visibility: hidden;
  background: #3b3f47;
  box-shadow: 0 6px 18px rgba(34, 26, 21, .24);
}

body[data-site="zgjjjc"] .jj-float .jj-top.show {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   15. 响应式
   -------------------------------------------------------------------------- */
/* 15.1 中等屏：右栏收窄，避免挤掉主内容 */
@media (max-width: 1240px) {
  body[data-site="zgjjjc"] #banner .newsList,
  body[data-site="zgjjjc"] .decorate .decorateList,
  body[data-site="zgjjjc"] .decorate .decorateInfo,
  body[data-site="zgjjjc"] .industry .industryNews,
  body[data-site="zgjjjc"] .industry .flexBox > .newsList,
  body[data-site="zgjjjc"] .latestNews .flex > div:not(.articleList),
  body[data-site="zgjjjc"] .article .flex > div:not(.articleContent) {
    flex: 0 0 310px;
    width: 310px;
  }
}

/* 15.2 平板竖屏 / 大手机：主要的两栏布局先塌成单栏。
   这一档最容易出问题 —— 768~1024 之间的竖屏平板，1200 的版心放不下两栏，
   每一栏又都还没到「该收成单列」的宽度，于是挤成一团。 */
@media (max-width: 1024px) {
  body[data-site="zgjjjc"] #banner {
    flex-direction: column;
  }

  body[data-site="zgjjjc"] #banner .newsList {
    flex: 1 1 auto;
    width: 100%;
  }

  body[data-site="zgjjjc"] .decorate .flex,
  body[data-site="zgjjjc"] .industry .flex,
  body[data-site="zgjjjc"] .article .flex {
    flex-direction: column;
  }

  body[data-site="zgjjjc"] .decorate .decorateList,
  body[data-site="zgjjjc"] .decorate .decorateInfo,
  body[data-site="zgjjjc"] .industry .industryNews,
  body[data-site="zgjjjc"] .latestNews .flex > div:not(.articleList),
  body[data-site="zgjjjc"] .article .flex > div:not(.articleContent) {
    flex: 1 1 auto;
    width: 100%;
  }

  body[data-site="zgjjjc"] .industry .flexBox {
    flex-direction: column;
  }

  body[data-site="zgjjjc"] .industry .flexBox > .newsList {
    flex: 1 1 auto;
    width: 100%;
  }

  body[data-site="zgjjjc"] .decorate .swiper-decorate {
    flex: 1 1 auto;
    width: 100%;
  }

  /* 列表页：列表 + 右栏竖排 */
  body[data-site="zgjjjc"] .latestNews .flex {
    flex-direction: column;
  }
}

/* 15.3 手机 */
@media (max-width: 768px) {
  body[data-site="zgjjjc"] .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 页头：logo + 搜索竖排 */
  body[data-site="zgjjjc"] header .top {
    flex-wrap: wrap;
    padding: 14px 0;
    gap: 12px;
  }

  body[data-site="zgjjjc"] header .top .logo {
    height: 40px;
  }

  body[data-site="zgjjjc"] header .top .search {
    flex: 1 1 100%;
    max-width: none;
    margin-left: 0;
    height: 40px;
  }

  body[data-site="zgjjjc"] header .top .search .searchBtn {
    width: 76px;
    line-height: 40px;
  }

  /* 导航：一行放不下就横向滚动，别折成三行把首屏推下去 */
  body[data-site="zgjjjc"] .navList .container {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-site="zgjjjc"] .navList .container::-webkit-scrollbar {
    display: none;
  }

  /* 一级项按可用宽度均分（栏目少时不至于挤在左边留一大条空白），
     栏目多到放不下时由 flex-shrink:0 触发横向滚动 */
  body[data-site="zgjjjc"] .navList .navType {
    flex: 1 0 auto;
  }

  body[data-site="zgjjjc"] .navList .navType .mainNav {
    padding: 10px 16px;
    font-size: 14px;
  }

  body[data-site="zgjjjc"] .navList .navType .mainNav i {
    font-size: 18px;
  }

  /* 手机上二级同样平铺（原来靠 hover 才显，触屏根本点不出来）。
     但不折行 —— 折开一个栏目就有五六行高，导航比首屏还高；这里让它排成
     一条，撑开容器后由上面的 overflow-x 横向滑动，字仍然不截。 */
  body[data-site="zgjjjc"] .navList .navType ul {
    flex-wrap: nowrap;
    max-width: none;
    padding: 6px 8px 6px 0;
  }

  body[data-site="zgjjjc"] .navList .navType ul a {
    padding: 0 7px;
    font-size: 12px;
    line-height: 22px;
  }

  /* 轮播：layout 里内联了 height:430px，这里必须 !important 才压得住 */
  body[data-site="zgjjjc"] #banner .swiper-container .swiper-slide img {
    height: 210px !important;
  }

  body[data-site="zgjjjc"] #banner .swiper-container .swiper-slide .newsTitle {
    padding: 26px 14px 12px;
    font-size: 14px;
  }

  body[data-site="zgjjjc"] .decorate .swiper-decorate .swiper-slide img {
    width: 100% !important;
    height: 210px !important;
  }

  body[data-site="zgjjjc"] .decorate .swiper-decorate .swiper-slide .newsTitle {
    padding: 26px 14px 12px;
    font-size: 15px;
  }

  body[data-site="zgjjjc"] .decorate .swiper-decorate .swiper-slide img {
    height: 210px !important;
  }

  /* 触屏上箭头会压住图，且没有 hover 出现的条件 */
  body[data-site="zgjjjc"] #banner .swiper-button-prev,
  body[data-site="zgjjjc"] #banner .swiper-button-next,
  body[data-site="zgjjjc"] .decorate .swiper-button-prev,
  body[data-site="zgjjjc"] .decorate .swiper-button-next {
    display: none;
  }

  body[data-site="zgjjjc"] .classifyBox {
    margin-top: 34px;
  }

  /* 手机上列表条目允许折成两行。
     基线是 .newsList li{white-space:nowrap} + 省略号 —— 桌面一行够宽没问题，
     手机上一条 30 字的中文标题只剩前 12 个字，读者根本分不清是哪条。 */
  body[data-site="zgjjjc"] .newsList li {
    white-space: normal;
  }

  body[data-site="zgjjjc"] .newsList a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    line-height: 1.6;
  }

  body[data-site="zgjjjc"] .classifyBox .classifyTitle {
    font-size: 20px;
    padding-left: 13px;
  }

  body[data-site="zgjjjc"] .classifyBox .classifyTitle::before {
    top: 4px;
    height: 18px;
    width: 4px;
  }

  body[data-site="zgjjjc"] .classifyBox .classifyLink {
    gap: 6px;
  }

  body[data-site="zgjjjc"] .classifyBox .classifyLink .link {
    padding: 4px 12px;
    font-size: 13px;
  }

  /* 三个 .latestNewsBox 竖排 */
  body[data-site="zgjjjc"] .latestNews .flex {
    flex-direction: column;
  }

  body[data-site="zgjjjc"] .latestNews .latestNewsBox {
    flex: 1 1 auto;
    width: 100%;
  }

  body[data-site="zgjjjc"] .latestNews .latestNewsBox > a img {
    height: 200px;
  }

  /* 一周播报：图与两列文字竖排 */
  body[data-site="zgjjjc"] .hotNews {
    padding: 16px 14px 12px;
  }

  body[data-site="zgjjjc"] .hotNews .flex {
    flex-direction: column;
    gap: 10px;
  }

  body[data-site="zgjjjc"] .hotNews .flex > a {
    flex: 1 1 auto;
    max-width: none;
    width: 100%;
  }

  body[data-site="zgjjjc"] .hotNews .flex > a img {
    height: 200px;
  }

  body[data-site="zgjjjc"] .decorate .decorateList,
  body[data-site="zgjjjc"] .decorate .decorateInfo,
  body[data-site="zgjjjc"] .decorate .decorateFlex > .newsList {
    padding: 14px;
  }

  /* 行业产品左栏：大图与列表竖排 */
  body[data-site="zgjjjc"] .industry .leftBox {
    flex-direction: column;
    padding: 14px;
  }

  body[data-site="zgjjjc"] .industry .leftBox > a {
    flex: 1 1 auto;
    width: 100%;
  }

  body[data-site="zgjjjc"] .industry .leftBox > a img {
    width: 100%;
    height: 190px;
  }

  body[data-site="zgjjjc"] .industry .leftBox .newsList {
    margin-left: 0;
    margin-top: 10px;
  }

  body[data-site="zgjjjc"] .industry .industryNews > a img {
    height: 180px;
  }

  body[data-site="zgjjjc"] .industry .flexBox > .flex {
    flex-direction: column;
    gap: 14px;
  }

  /* 家具百科：6 个 tab 改成横向滚动，图标在上文字在下 */
  body[data-site="zgjjjc"] .furniture .furnitureType {
    padding: 4px;
  }

  body[data-site="zgjjjc"] .furniture .furnitureType .typeNav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body[data-site="zgjjjc"] .furniture .furnitureType .typeNav::-webkit-scrollbar {
    display: none;
  }

  body[data-site="zgjjjc"] .furniture .typeNav .nav {
    flex: 0 0 auto;
    min-width: 76px;
    padding: 10px 8px;
    font-size: 13px;
  }

  body[data-site="zgjjjc"] .furniture .typeNav .nav i {
    font-size: 18px;
  }

  body[data-site="zgjjjc"] .furniture .typeContent {
    padding: 14px 10px 6px;
  }

  body[data-site="zgjjjc"] .furniture .typePanel a {
    padding: 4px 11px;
    font-size: 12.5px;
  }

  /* 列表页条目：图与文字竖排太浪费首屏，改成小图右置 */
  body[data-site="zgjjjc"] .latestNews .flex .articleItem {
    padding: 14px;
  }

  body[data-site="zgjjjc"] .latestNews .flex .articleItem > a {
    flex: 0 0 104px;
    margin-right: 12px;
  }

  body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleImg {
    width: 104px;
    height: 78px;
  }

  body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleTitle {
    font-size: 15px;
    -webkit-line-clamp: 2;
  }

  body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleNote {
    display: none;
  }

  /* 详情页 */
  body[data-site="zgjjjc"] .articleContent {
    padding: 18px 15px 22px;
  }

  body[data-site="zgjjjc"] .articleContent .articleTitle {
    font-size: 21px;
    line-height: 1.5;
  }

  body[data-site="zgjjjc"] .articleContent .articleDetail {
    margin-top: 16px;
    padding-top: 16px;
    font-size: 16px;
    line-height: 1.9;
  }

  body[data-site="zgjjjc"] .breadNav {
    font-size: 12.5px;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body[data-site="zgjjjc"] .article .selected .listImg {
    flex: 0 0 78px;
    width: 78px;
    height: 56px;
  }

  /* 页脚 */
  body[data-site="zgjjjc"] footer {
    margin-top: 34px;
    padding: 26px 0 22px;
  }

  body[data-site="zgjjjc"] footer .copyRight {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  body[data-site="zgjjjc"] footer .copyRight img {
    margin-right: 0;
  }

  body[data-site="zgjjjc"] .jj-float {
    right: 12px;
    bottom: 16px;
  }

  body[data-site="zgjjjc"] .jj-float a,
  body[data-site="zgjjjc"] .jj-float button {
    width: 42px;
    height: 42px;
    font-size: 12px;
  }
}

/* 15.4 超小屏 */
@media (max-width: 400px) {
  body[data-site="zgjjjc"] .articleContent .articleTitle {
    font-size: 19px;
  }

  body[data-site="zgjjjc"] #banner .swiper-container .swiper-slide img,
  body[data-site="zgjjjc"] .decorate .swiper-decorate .swiper-slide img {
    height: 180px !important;
  }

  body[data-site="zgjjjc"] .latestNews .flex .articleItem > a {
    flex: 0 0 88px;
    margin-right: 10px;
  }

  body[data-site="zgjjjc"] .latestNews .flex .articleItem .articleImg {
    width: 88px;
    height: 66px;
  }
}

/* 15.5 尊重系统的减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body[data-site="zgjjjc"] *,
  body[data-site="zgjjjc"] *::before,
  body[data-site="zgjjjc"] *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}