/* 通用样式 reset + 基础组件 - style.css */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans", Tahoma, Geneva, sans-serif;
  color: #1d2129;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #fff;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; border: 0; vertical-align: middle; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; }

.wrap { width: 100%; max-width: 1400px; margin: 0 auto; position: relative; }

/* 区块通用 */
.section { position: relative; width: 100%; }
.section-inner { width: 1400px; max-width: 100%; margin: 0 auto; position: relative; }

/* 标题通用 */
.sec-title { text-align: center; }
.sec-title h2 { font-size: 36px; font-weight: 700; color: #1d2129; line-height: 1.4; }
.sec-title p { margin-top: 14px; font-size: 16px; color: #a5a5a5; line-height: 1.6; }

/* 按钮通用 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 28px; border-radius: 8px;
  font-size: 18px; font-weight: 400; line-height: 1;
  transition: all .25s ease;
  white-space: nowrap;
}
.btn-primary {
  background: #317af7 url('../img/index/61238301.jpg') center/cover no-repeat;
  color: #fff;
}
.btn-primary:hover { background-color: #2188ca; }
.btn-ghost {
  background: #fff; color: #444; border: 1px solid #eeeeee;
}
.btn-ghost:hover { border-color: #317af7; color: #317af7; }
.btn-pill {
  background: #fff; color: #317af7; border: 1px solid #317af7;
  border-radius: 200px;
}
.btn-pill:hover { background: #317af7; color: #fff; }
.btn-sm { height: 38px; padding: 0 20px; font-size: 16px; }

/* 卡片 */
.card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(226, 234, 246, .86);
}

/* 文本省略 */
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ========== 顶部导航（公共） ==========
   固定在页面顶部：用 position:sticky 而非 fixed —— sticky 仍在文档流中占位，
   首屏依旧从 y80 开始，不影响与设计稿的像素对齐；滚动时吸附在顶端。
   z-index 需高于所有区块内容（全站区块层级均 < 100）。 */
.header {
  position: sticky; top: 0; z-index: 300;
  height: 80px;
  background: #fff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
/* 页内锚点跳转时预留页头高度，避免目标被固定页头遮住 */
html { scroll-padding-top: 80px; }
.header-inner {
  display: flex; align-items: center; height: 100%;
}
.logo img { width: 98px; height: 54px; }
.nav {
  margin-left: 91px;
  display: flex; height: 36px;
}
.nav li {
  width: 95px; height: 36px; line-height: 36px;
  text-align: center;
}
.nav a {
  display: block; height: 100%;
  font-family: Tahoma, sans-serif; font-size: 18px; color: #383838;
  transition: color .2s;
}
.nav a:hover, .nav a.current { color: #0084fe; }
/* 移动端汉堡按钮（桌面隐藏） */
.nav-toggle { display: none; position: relative; width: 26px; height: 20px; }
.nav-toggle span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: #1d2129; transition: transform .25s, opacity .25s, top .25s;
}
.nav-toggle span:nth-child(1) { top: 0; }
.nav-toggle span:nth-child(2) { top: 9px; }
.nav-toggle span:nth-child(3) { top: 18px; }
.nav-toggle.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
.header-right {
  margin-left: auto; display: flex; align-items: center; gap: 18px;
}
.phone { display: flex; align-items: center; gap: 6px; }
.phone img { width: 42px; height: 40px; }
.phone span {
  font-family: Tahoma, sans-serif; font-size: 28px; color: #317af7;
  animation: pulse .75s .75s infinite;
}
@keyframes pulse {
  0% { transform: scale3d(1, 1, 1); }
  50% { transform: scale3d(1.05, 1.05, 1.05); }
  100% { transform: scale3d(1, 1, 1); }
}

/* ========== CTA 区块（公共） ========== */
.cta {
  height: 360px;
  background: #fff url('../img/index/61283945.jpg') 50% 50%/cover no-repeat;
  padding-top: 89px; text-align: center;
}
.cta h2 {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 42px; color: #1d2129; line-height: 1.5; font-weight: 700;
}
.cta h2 em { color: #317af7; font-style: normal; }
.cta p {
  margin-top: 14px; font-size: 18px; color: #1d2129; line-height: 1.5;
}
.cta-btns {
  display: flex; justify-content: center; gap: 20px; margin-top: 30px;
}
.cta .cta-consult {
  width: 260px; height: 64px; border-radius: 200px;
  background: #317af7 url('../img/index/61238301.jpg') center/cover no-repeat;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; font-family: Tahoma, Geneva, sans-serif;
  gap: 8px; cursor: pointer; transition: transform .2s;
}
.cta .cta-consult:hover { transform: translateY(-2px); }
.cta .cta-consult img { width: 24px; height: 24px; }
.cta .cta-hotline {
  width: 260px; height: 64px; border-radius: 200px;
  background: transparent; border: 1px solid #317af7;
  color: #317af7; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 400; font-family: Tahoma, Geneva, sans-serif;
  cursor: pointer; transition: all .2s;
}
.cta .cta-hotline:hover { background: #317af7; color: #fff; }

/* ========== 页脚（公共） ========== */
.footer {
  background: #282f3d; color: #989898;
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid; grid-template-columns: 333px 1fr 113px 113px;
  gap: 40px; align-items: flex-start;
}
.footer-brand .logo { width: 104px; height: 54px; }
.footer-brand .label {
  font-size: 14px; color: #636e80; line-height: 1.5; margin-top: 22px;
  font-family: "Source Han Sans", Geneva, sans-serif;
}
.footer-brand .tel {
  font-size: 24px; color: #fff; line-height: 1.5;
  font-family: "Source Han Sans", Geneva, sans-serif;
}
.footer-col h4 {
  font-size: 18px; color: #fff; font-weight: 400; margin-bottom: 10px;
  font-family: "Source Han Sans", Geneva, sans-serif;
}
.footer-col ul { font-size: 16px; line-height: 2; color: #636e80; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.footer-col ul a { color: #636e80; }
.footer-col ul a:hover { color: #fff; }
.footer-qr {
  text-align: center; font-size: 14px; color: #989898;
}
.footer-qr img { width: 113px; height: 113px; border-radius: 6px; }
.footer-divider { height: 1px; background: #3a4252; margin: 32px 0 16px; }
.footer-copy {
  font-size: 14px; color: #656D78; line-height: 1.75;
  font-family: "Source Han Sans", Geneva, sans-serif;
}

/* ========== 响应式适配 ========== */
/* 断点：1399（笔记本） / 1199（小笔记本·平板横屏） / 991（平板竖屏） / 767（大屏手机） / 479（小屏手机） */
@media (max-width: 1399px) {
  .section-inner, .wrap { width: 100%; padding: 0 32px; }

  /* 头部 */
  html { scroll-padding-top: 76px; }
  .header { height: 76px; }
  .nav { margin-left: 44px; }
  .nav li { width: auto; }
  .nav a { padding: 0 12px; font-size: 16px; white-space: nowrap; }
  .phone img { width: 36px; height: 34px; }
  .phone span { font-size: 24px; }
  .header-right { gap: 14px; }

  /* 通用标题 */
  .sec-title h2 { font-size: 32px; }
  .sec-title p { font-size: 16px; }

  /* CTA */
  .cta { height: auto; padding: 76px 0; }
  .cta h2 { font-size: clamp(28px, 3.4vw, 42px); }
  .cta p { font-size: clamp(15px, 1.5vw, 18px); }

  /* 页脚 */
  .footer-grid { grid-template-columns: 280px 1fr 100px 100px; gap: 28px; }
  .footer-qr img { width: 100px; height: 100px; }
}

@media (max-width: 1199px) {
  /* 头部 */
  html { scroll-padding-top: 70px; }
  .header { height: 70px; }
  .logo img { width: 84px; height: 46px; }
  .nav { margin-left: 18px; }
  .nav li { width: auto; }
  .nav a { padding: 0 9px; font-size: 14px; }
  .phone img { width: 30px; height: 28px; }
  .phone span { font-size: 20px; }
  .header-right { gap: 12px; }
  .header-right .btn { height: 42px; padding: 0 18px; font-size: 15px; }

  /* CTA */
  .cta { padding: 64px 0; }
  .cta .cta-consult, .cta .cta-hotline { width: 220px; height: 56px; font-size: 19px; }

  /* 页脚 */
  .footer-grid { grid-template-columns: 240px 1fr 92px 92px; gap: 22px; }
  .footer-brand .tel { font-size: 21px; }
  .footer-col h4 { font-size: 17px; }
  .footer-col ul { font-size: 15px; }
  .footer-qr img { width: 92px; height: 92px; }
}

@media (max-width: 991px) {
  .section-inner, .wrap { padding: 0 24px; }

  /* 头部：导航折叠为下拉菜单（固定位置由基础样式的 sticky 提供） */
  html { scroll-padding-top: 64px; }
  .header { height: 64px; }
  .logo img { width: 76px; height: 42px; }
  .nav-toggle { display: block; }
  .header-right { gap: 14px; }
  .phone { display: none; }
  .nav {
    position: absolute; left: 0; top: 100%; width: 100%;
    margin: 0; height: auto; flex-direction: column; gap: 0;
    background: #fff; border-top: 1px solid #eee;
    box-shadow: 0 12px 24px rgba(29, 33, 41, .08);
    display: none; padding: 6px 0 10px; z-index: 400;
  }
  .nav.open { display: flex; }
  .nav li { width: 100%; height: 46px; line-height: 46px; text-align: left; }
  .nav a { padding: 0 24px; font-size: 16px; }

  /* 通用标题 */
  .sec-title h2 { font-size: 26px; }
  .sec-title p { font-size: 15px; }

  /* CTA */
  .cta { padding: 56px 0; }
  .cta h2 { font-size: 26px; }
  .cta p { font-size: 15px; }

  /* 页脚 */
  .footer { padding: 48px 0 22px; }
  .footer-grid { display: flex; flex-wrap: wrap; gap: 30px 24px; }
  .footer-brand { flex: 1 1 220px; }
  .footer-col.footer-cols { flex: 1 1 100%; order: 3; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .footer-qr { flex: 0 0 92px; }
  .footer-divider { margin: 26px 0 14px; }
  .footer-copy { font-size: 13px; }
}

@media (max-width: 767px) {
  .section-inner, .wrap { padding: 0 16px; }

  .header-right .btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .nav a { font-size: 15px; }

  .sec-title h2 { font-size: 22px; }
  .sec-title p { font-size: 14px; }

  /* CTA */
  .cta { padding: 44px 16px; }
  .cta h2 { font-size: 21px; line-height: 1.5; }
  .cta p { font-size: 14px; margin-top: 10px; }
  .cta-btns {
    flex-direction: column; align-items: center; gap: 12px; margin-top: 24px;
  }
  .cta .cta-consult, .cta .cta-hotline {
    width: 100%; max-width: 320px; height: 52px; font-size: 17px;
  }

  /* 页脚：手机端仅保留版权信息 */
  .footer { padding: 20px 0 22px; }
  .footer-grid, .footer-divider { display: none; }
  .footer-copy { line-height: 1.9; font-size: 12px; text-align: center; }
}

@media (max-width: 479px) {
  .header-right .btn { display: none; }
  .footer-qr { flex: 1 1 45%; }
}

/* ==================== 陪伴式服务 / 新媒体服务（首页 + 服务案例页共用组件） ==================== */
.newmedia {
  position: relative; height: 1074px; padding-top: 80px;
  background-color: #fff; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
}
.newmedia .sec-title { margin-bottom: 69px; }
.newmedia .sec-title h2 { line-height: 1.75; color: #1d2129; }
.newmedia .sec-title p { margin-top: 0; line-height: 1.75; }

/* 卡片：设计稿 1400×551、2px #c6e0ff 描边。
   内部坐标以「边框内」为原点 —— padding 80/48 让内容盒落在卡内 (50,82)，正好对上设计稿的 (48,80)。 */
.nm-card {
  position: relative; box-sizing: border-box;
  height: 551px; padding: 80px 48px 0;
  background: #fff; border: 2px solid #c6e0ff; border-radius: 20px;
  box-shadow: 0 5px 10px rgb(226, 234, 246);
}
.nm-title {
  height: 48px; margin: 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px; font-weight: 700; line-height: 30px; color: #1d2129;
}
.nm-desc {
  margin-top: 6px; width: 878px; max-width: 100%;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; color: #636e80; line-height: 24px;
}
/* 四张服务项：设计稿为 200×200、间距 20 的浅蓝圆角块 */
.nm-grid { display: grid; grid-template-columns: repeat(4, 200px); gap: 20px; margin-top: 42px; }
.nm-item {
  box-sizing: border-box; width: 200px; height: 200px; padding: 22px 10px 0;
  background: rgba(198, 224, 255, .2); border-radius: 20px; text-align: center;
}
.nm-item img { display: block; width: 64px; height: 64px; object-fit: contain; margin: 0 auto; }
.nm-item h4 {
  margin-top: 4px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 22px; font-weight: 400; line-height: 26px; color: #1d2129;
}
.nm-item p {
  margin-top: 6px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px; color: #636e80; line-height: 24.7px;
}
/* 插画：设计稿在卡内 (941,128) 442×342 */
.nm-img { position: absolute; top: 128px; right: 13px; width: 442px; height: 342px; }
.nm-img img { width: 100%; height: 100%; object-fit: contain; }
.nm-btns { display: flex; gap: 20px; margin-top: 40px; }
.nm-btns .btn {
  width: 200px; height: 48px; padding: 0; border-radius: 6px;
  font-family: Tahoma, Geneva, sans-serif; font-size: 18px;
}
.nm-btns .btn-primary { background: linear-gradient(90deg, #317af7, #65a9ff); color: #fff; }
.nm-btns .btn-primary:hover { background: linear-gradient(90deg, #2188ca, #4e9af5); }

/* 六步流程：设计稿 232×200 × 6（间距 0），数字图 93×81、胶囊 170×48 */
.nm-steps { display: flex; margin-top: 37px; }
.nm-step { position: relative; width: 232px; height: 200px; flex-shrink: 0; text-align: center; }
.nm-step img { display: block; width: 93px; height: 81px; margin: 26px auto 0; }
.nm-step .btn-step {
  display: block; width: 170px; height: 48px; line-height: 48px; margin: 1px auto 0;
  background: #337bf7; color: #fff; font-size: 18px; font-family: Tahoma, Geneva, sans-serif;
  border-radius: 8px; transition: background .2s;
}
.nm-step:nth-child(even) .btn-step { background: #61a7ff; }
/* 设计稿最后一步后面没有点状箭头 */
.nm-step:last-child .btn-step::after { display: none; }
.nm-step .btn-step:hover { background: #2188ca; }
.nm-step .btn-step::after {
  content: ""; position: absolute; left: 206px; top: 129px; width: 55px; height: 5px;
  background: url('../img/index/61252567.png') center/contain no-repeat;
}

@media (max-width: 1399px) {
  .newmedia { height: auto; padding: 60px 0 72px; }
  .nm-card { height: auto; padding: 48px 40px 44px; }
  .nm-title { height: auto; font-size: 26px; }
  .nm-desc { width: auto; }
  .nm-img { position: static; width: 100%; max-width: 320px; height: auto; margin: 24px 0 0; }
  .nm-grid { margin-top: 32px; }
  .nm-btns { margin-top: 32px; }
  .nm-steps { margin-top: 32px; }
  .nm-step { flex: 1 1 0; width: auto; min-width: 0; height: auto; }
  .nm-step .btn-step { width: 100%; max-width: 170px; }
  .nm-step .btn-step::after { display: none; }
}
@media (max-width: 1199px) {
  .nm-grid { grid-template-columns: repeat(2, 200px); justify-content: start; gap: 26px 20px; }
}
@media (max-width: 991px) {
  .nm-grid { grid-template-columns: repeat(2, 1fr); }
  .nm-item { width: auto; height: auto; min-height: 170px; padding: 20px 12px; }
  .nm-img { max-width: 300px; }
  .nm-steps { flex-wrap: wrap; gap: 20px 0; }
  .nm-step { flex: 0 0 33.333%; width: auto; }
}
@media (max-width: 767px) {
  .newmedia { padding: 44px 0 56px; }
  /* 手机端收紧「标题 → 卡片」间距（组件默认 69px 在窄屏过空） */
  .newmedia .sec-title { margin-bottom: 28px; }
  .nm-card { padding: 28px 18px 28px; }
  .nm-title { font-size: 22px; }
  .nm-desc { font-size: 15px; }
  .nm-grid { gap: 12px; margin-top: 22px; }
  .nm-item { min-height: 148px; padding: 18px 10px; border-radius: 16px; }
  .nm-item img { width: 46px; height: 46px; }
  .nm-item h4 { font-size: 17px; }
  .nm-item p { font-size: 13px; }
  .nm-img { max-width: 240px; margin-top: 24px; }
  .nm-btns { gap: 12px; margin-top: 24px; }
  .nm-btns .btn { width: auto; flex: 1 1 140px; height: 44px; font-size: 15px; }
  .nm-steps { gap: 24px 0; margin-top: 26px; }
  .nm-step { flex: 0 0 50%; width: auto; }
  .nm-step img { width: 70px; height: 61px; margin-top: 0; }
  .nm-step .btn-step { width: 150px; height: 44px; line-height: 44px; font-size: 16px; }
}
@media (max-width: 479px) {
  .newmedia .sec-title { margin-bottom: 22px; }
  .nm-btns { flex-direction: column; gap: 10px; }
  .nm-btns .btn { width: 100%; flex: none; }
  .nm-steps { gap: 20px 0; }
  .nm-step img { width: 60px; height: 52px; }
  .nm-step .btn-step { width: 140px; height: 42px; line-height: 42px; font-size: 15px; }
}

/* ==================== 内页首屏（除首页 / 案例详情外的 10 个内页共用） ====================
   这 10 个页面的设计稿首屏是【完全同一套】：hero 高 560、文字块 @top188
   （标题 48px / 副标题 24px，行高均 1.75）、两颗按钮各 145×48 @top356、间距 25，
   各页只有背景图不同 —— 背景留在各页 CSS 里定义。
   用 :where() 把优先级降到 0，避免干扰首页 banner 与案例详情页自带的 hero 布局。 */
:where(.hero) { margin-top: -1px; height: 560px; }
:where(.hero-inner) { position: relative; height: 100%; padding-top: 188px; }
:where(.hero-title) {
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 48px; font-weight: 700; color: #1d2129; line-height: 1.75;
}
:where(.hero-sub) {
  margin-top: 1px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 24px; color: #1d2129; line-height: 1.75;
}
:where(.hero-btns) { position: absolute; left: 0; top: 356px; display: flex; gap: 25px; }
:where(.hero-btns .btn) { width: 145px; height: 48px; padding: 0; border-radius: 8px; font-size: 18px; }

@media (max-width: 1399px) {
  :where(.hero) { height: auto; padding: 90px 0 80px; }
  :where(.hero-inner) { height: auto; padding-top: 0; position: static; }
  :where(.hero-title) { font-size: clamp(26px, 3vw, 40px); }
  :where(.hero-sub) { font-size: clamp(15px, 1.5vw, 20px); }
  :where(.hero-btns) { position: static; gap: 18px; margin-top: 26px; }
  :where(.hero-btns .btn) { width: auto; height: 46px; padding: 0 28px; font-size: 17px; }
}
@media (max-width: 991px) {
  :where(.hero) { padding: 80px 0 72px; }
  :where(.hero-title) { font-size: 26px; }
}
@media (max-width: 767px) {
  :where(.hero) { padding: 56px 0 52px; }
  :where(.hero-title) { font-size: 22px; }
  :where(.hero-sub) { font-size: 14px; margin-top: 10px; }
  :where(.hero-btns) { margin-top: 20px; gap: 12px; }
  :where(.hero-btns .btn) { height: 42px; font-size: 15px; padding: 0 20px; flex: 1 1 0; }
}

/* ==================== 内页栏目切换栏（关于我们 / 联系我们 / 新闻详情 共用） ====================
   设计稿 con_11_35：栏高 58（自页头下 638 起，与首屏底重叠 1px），白底 + 1px #f4f4f4 底边。
   每一项是 100px 宽的居中文本块（top 20、高 26、16px Tahoma），项与项紧邻、无间距；
   激活项文字 #376aff，下方再画一条 80×2 的品牌蓝下划线（项内 left 10 / top 35）。 */
/* z-index 让底影能压住下一区块（设计稿这栏的 z-index 就是 6） */
.catbar { position: relative; z-index: 6; margin-top: -1px; height: 58px; background: #fff; border-bottom: 1px solid #f4f4f4; }
/* 设计稿底边下方还有 3px 极淡的投影（248 / 250 / 253），补上 */
.catbar::after {
  /* 定位锚点是 padding box（已被 1px 底边框顶掉 1px），所以用 bottom: -4px 落到边框正下方 */
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 3px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .029) 0 1px, rgba(0, 0, 0, .018) 1px 2px, rgba(0, 0, 0, .006) 2px 3px);
}
.catbar .section-inner { height: 100%; }
.page-tabs, .news-tabs { display: flex; height: 100%; }
.page-tabs li, .news-tabs li {
  position: relative; width: 100px; height: 26px; margin-top: 20px;
  font-family: Tahoma, "Microsoft YaHei", Geneva, sans-serif;
  font-size: 16px; line-height: 16px; color: #656d78;
  text-align: center; cursor: pointer; transition: color .2s;
}
.page-tabs li a, .news-tabs li a { display: block; color: inherit; }
.page-tabs li:hover, .news-tabs li:hover { color: #376aff; }
.page-tabs li.active, .news-tabs li.active { color: #376aff; }
.page-tabs li.active::after, .news-tabs li.active::after {
  content: ""; position: absolute; left: 10px; top: 35px;
  width: 80px; height: 2px; background: #376aff;
}
@media (max-width: 991px) {
  .catbar { height: auto; padding: 16px 0 12px; }
  .catbar .section-inner { height: auto; }
  .page-tabs, .news-tabs { height: auto; }
  .page-tabs li, .news-tabs li { margin-top: 0; }
  .page-tabs li.active::after, .news-tabs li.active::after { top: auto; bottom: -10px; }
}
@media (max-width: 767px) {
  /* 窄屏不再用「定宽 100px + 横滑」——3 项页（300 < 358）整排左偏、右侧空 74px；
     4 项页（400 > 358）会把末项裁掉一截，且没有任何"可横滑"的视觉提示。
     改为「等分铺满」：flex:1 1 0 让每项吃满可用宽度（min-width:0 解除
     flex item 的最小内容宽保护），两项问题一次消失。
     激活态沿用桌面的蓝色下划线，但拉成"项内通栏"（左右各留 14px）——
     既是明确的选项卡指示条，又保留桌面「文字 + 蓝色下划线」的设计语言。
     文字纵向居中：li 高度仍是基础档的 26，但把 line-height 从 16 抬到 26，
     文字行盒就在项内垂直居中；同时把 .catbar 的内边距从 991 档的 16/12
     改成上下对称的 14/14，项跟着在栏内居中 ⇒ 墨迹距栏顶 21、距栏底 22
     （差 1px 已是像素级最优），栏高仍是 14+26+14+1 = 55，栏体尺寸不变、下游零位移。
     （991 档的 16/12 保持原样：那是平板/小桌面档，本档只服务手机端。）
     指示条纵向位置：桌面档下缘落在栏底 1px 灰边之上（项内 top 35 ⇒ 距栏底 1px）。
     窄屏的参照系是 **li 的 padding box 下缘**，它距栏体 border-box 下缘 14+1 = 15px，
     所以用 bottom:-15px 才能把蓝条压到栏体最下缘——蓝条下缘正好贴在"边界阴影"
     （栏底 1px #f4f4f4 底边 + 其下 3px 渐变投影）的第一行上，并把这条灰底边盖住，
     观感上蓝线与栏体边界严丝合缝，不再悬在栏内半空。
     （例外：xwxq 的 .article 用 z-index:6 + margin-top:-1px 压掉栏底 1px 且本页无投影，
       该页在 xwxq.css 里单独回到 -14px，见那里的注释。）
     max-width 140 是"上限"：390~600 档本来就被 flex 撑不满、不触发；
     只在 600~767（大屏手机 / 小平板）把每项从 184px 收到 140px 并居中，
     免得 4 个字撑在 184px 的格子里显得空旷。 */
  /* 栏体内边距改为上下对称（991 档是 16/12），14+26+14+1 = 55，栏高不变 */
  .catbar { padding: 14px 0 14px; }
  .page-tabs, .news-tabs { overflow-x: visible; justify-content: center; }
  .page-tabs li, .news-tabs li {
    flex: 1 1 0; max-width: 140px; min-width: 0; width: auto; margin-top: 0;
    /* line-height 抬到与 li 等高（26）⇒ 文字行盒在项内垂直居中 */
    font-size: 14px; line-height: 26px;
  }
  .page-tabs li.active::after, .news-tabs li.active::after {
    left: 14px; right: 14px; width: auto; top: auto; bottom: -15px;
  }
}
@media (max-width: 479px) {
  /* 320 视口下 4 项页每项仅 72px 宽，15px 字（4 字 60px）会贴边，收到 13px */
  .page-tabs li, .news-tabs li { font-size: 13px; }
}

/* ==================== 更多案例（案例详情页 + 新闻详情页共用） ====================
   xwxq con_70_38 与 fwalxq con_145_8 是同一张设计稿（两页 ref_full 互 diff 平均 0.0000）：
   区块高 691 = 上 72 + 标题 48 + 40 + 卡片 382 + 41 + 按钮 52 + 下 56。
   卡片内部是手工绝对定位（封面 (20,20) 300×167 / 药丸 (20,210) / 描述 (21,266) 300×75 /
   「立即咨询」盒 (37,336) 69×36 + 图标 (21,347) 18×18 / 「了解详情」盒 (230,336) 100×36），
   逐条按设计稿 inline style 落点还原，故桌面档用 absolute 而非流式。
   ⚠️ 所有选择器必须挂在 .more 下：.case-card / .case-grid / .case-cover / .case-tags /
   .more-btn / .tag--* 这些名字在别页（geo/sem/seo/xmtyy/fwal/index）另有同名的**其它**组件，
   不加作用域会互相污染。 */
.more { padding: 72px 0 56px; background: #f7f8fa; }
.more .more-title {
  height: 48px; margin: 0;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 36px; font-weight: 700; line-height: 36px; color: #0b1636;
  text-align: center;
}
.more .case-grid {
  display: grid; grid-template-columns: repeat(4, 340px);
  gap: 12px; margin-top: 40px; justify-content: start;
}
.more .case-card {
  position: relative; width: 340px; height: 382px;
  background: #fff; border-radius: 16px;
  box-shadow: 0 5px 10px rgba(226, 234, 246, .86);
}
/* 封面按设计稿用 background-image（原站就是 300×167 盒 + cover），
   不要换 <img object-fit>——取整规则不同，会差出一整条边缘。
   display:block 是给窄屏（改回 static 后空的 <a> 会被 inline 化而塌成 0 高）兜底 */
.more .case-cover {
  display: block;
  position: absolute; left: 20px; top: 20px; width: 300px; height: 167px;
  border-radius: 16px; overflow: hidden;
  background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
}
.more .case-tags { position: absolute; left: 20px; top: 210px; display: flex; gap: 10px; }
.more .case-tags span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 30px; border-radius: 200px;
  /* 底部 2px 内边距把 flex 居中的文字整体上提 1px（设计稿药丸文字墨迹 3238..3249，盒 3229..3258） */
  padding-bottom: 2px;
  font-family: Tahoma, Geneva, sans-serif; font-size: 14px;
}
.more .case-tags span.tag--w100 { width: 100px; }
.more .tag--teal { background: rgb(236, 251, 251); color: #36c17a; }
.more .tag--cyan { background: rgb(236, 251, 251); color: #43b1f8; }
.more .tag--pink { background: rgb(250, 233, 233); color: #d47878; }
.more .tag--orange { background: rgb(252, 229, 205); color: #ff9900; }
.more .tag--blue { background: rgb(231, 241, 255); color: #3d63fc; }
.more .case-desc {
  position: absolute; left: 21px; top: 266px; width: 300px; height: 75px;
  margin: 0; overflow: hidden;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px; line-height: 21px; color: #636e80;
}
.more .case-consult, .more .case-more {
  position: absolute; top: 336px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  /* 左内边距 2px 让 flex 居中的文字整体右移 1px（实测设计稿墨迹比「居中位」右 1px）；
     注意绝对定位子元素的锚点是 padding box，所以图标不受它影响，仍用 left:-16px */
  padding-left: 2px;
  font-family: Tahoma, Geneva, sans-serif; font-size: 14px; color: #317af7;
}
.more .case-consult { left: 37px; width: 69px; }
/* 图标落点在卡片 (21,347)，比按钮盒左 37 靠左 16 —— 用相对按钮的负偏移还原 */
.more .case-consult img { position: absolute; left: -16px; top: 11px; width: 18px; height: 18px; }
.more .case-more { left: 230px; width: 100px; }
.more .case-consult:hover, .more .case-more:hover { text-decoration: underline; }
/* 查看更多：蓝底就是 61238301.jpg + cover（与 .btn-primary 同一张），箭头 30×30 落在 (125,12)，
   文字盒 (36,16) 左对齐（不是居中） */
.more .more-btn-wrap { margin-top: 41px; text-align: center; }
.more .more-btn {
  position: relative; display: block; width: 182px; height: 52px;
  /* 设计稿按钮落在容器第 608px（不是居中位 609）—— 按 inline style 原值还原 */
  margin-left: 608px;
  border-radius: 200px;
  background: #317af7 url('../img/index/61238301.jpg') center/cover no-repeat;
}
.more .more-btn-txt {
  position: absolute; left: 36px; top: 16px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 20px; font-weight: 700; line-height: 20px; color: #fff;
}
.more .more-btn img { position: absolute; left: 125px; top: 12px; width: 30px; height: 30px; }
.more .more-btn:hover { background-color: #2188ca; }

@media (max-width: 1399px) {
  .more { padding: 56px 0 48px; }
  .more .more-title { font-size: 32px; }
  /* 自动换列：能给 4 列给 4 列，放不下就 3 / 2 / 1 */
  .more .case-grid { grid-template-columns: repeat(auto-fit, 340px); gap: 24px 20px; justify-content: center; }
  /* 容器已随视口压缩，608 这个绝对左偏量不再适用 → 回到居中 */
  .more .more-btn { margin: 0 auto; }
}
@media (max-width: 767px) {
  .more { padding: 40px 0 40px; }
  .more .more-title { height: auto; font-size: 22px; line-height: 1.4; }
  .more .case-grid { gap: 18px; margin-top: 24px; }
  .more .more-btn-wrap { margin-top: 28px; }
}
@media (max-width: 479px) {
  /* 单列放不下 340 时改流式，卡片内部回到静态排版 */
  .more .case-grid { grid-template-columns: 100%; }
  .more .case-card { width: 100%; height: auto; padding: 20px 20px 20px; }
  .more .case-cover { position: static; width: 100%; height: auto; aspect-ratio: 300 / 167; }
  .more .case-tags { position: static; margin-top: 18px; }
  .more .case-desc { position: static; width: auto; height: auto; margin-top: 16px; }
  .more .case-consult { position: static; width: auto; height: auto; justify-content: flex-start; gap: 6px; margin-top: 18px; }
  .more .case-consult img { position: static; left: auto; top: auto; flex: 0 0 auto; }
  .more .case-more { position: static; width: auto; height: auto; margin-top: 14px; justify-content: flex-start; }
  .more .more-btn { width: 100%; max-width: 182px; }
}