/* ==========================================================
   容达典当 - 全站统一样式表
   设计基准:   1920px 宽度
   容器宽度:   1250px（两侧各留 335px）
   响应式策略: 移动端优先 (Mobile First)
   包含页面:   index.html（首页） / contact.html（联系我们）
   ========================================================== */

/* ----------------------------------------------------------
   1. CSS 自定义属性（设计令牌）
   ---------------------------------------------------------- */
:root {
  /* 品牌色 */
  --gold:        #9e8049;
  --gold-lt:     #cba368;
  --gold-grad:   linear-gradient(135deg, #cba368 0%, #9e8049 100%);

  /* 背景色 */
  --dark:        #1a1a1a;
  --dark-blue:   #15202f;
  --white:       #ffffff;
  --bg-light:    #f5f5f4;
  --bg-beige:    #eeedeb;

  /* 文字色 */
  --text-main:   #000000;
  --text-gray:   #99a1af;
  --text-muted:  rgba(0, 0, 0, 0.5);

  /* 间距 / 尺寸 */
  --container:   1250px;
  --header-h:    96px;
  --sec-py:      80px;
  --sec-py-sm:   48px;

  /* 字体 */
  --font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei',
          'WenQuanYi Micro Hei', sans-serif;

  /* 过渡 */
  --trans: 0.2s ease;
}

/* ----------------------------------------------------------
   2. 基础重置
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  color: var(--text-main);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; }

/* 无障碍：屏幕阅读器专用隐藏元素 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------
   3. 通用容器
   ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 1300px) {
  .container { padding-inline: 0; }
}

/* 通用节标题区 */
.sec-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.sec-title {
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.3;
}

.sec-desc {
  font-size: clamp(14px, 1vw, 18px);
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 40px;
}

.more-link {
  font-size: 16px;
  color: var(--text-main);
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-transition: color var(--trans);
          transition: color var(--trans);
}
.more-link:hover { color: var(--gold); }

/* ----------------------------------------------------------
   4. 头部导航（共享）
   ---------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--white);
  height: var(--header-h);
  -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.06);
          box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.logo-icon { width: auto; height: 63px; object-fit: contain; }
.logo-text  { width: auto; height: 51px; object-fit: contain; }

.header-phone {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: 24px;
  flex-shrink: 0;
}

.header-sep {
  display: block;
  width: 1px;
  height: 49px;
  background: rgba(0,0,0,0.12);
  margin-right: 18px;
}

.phone-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.phone-glow {
  position: absolute;
  left: -8px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 200px;
  height: 35px;
  background: rgba(203, 163, 104, 0.2);
  border-radius: 100px;
  pointer-events: none;
}

.phone-circle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--gold-lt);
  border-radius: 50%;
  flex-shrink: 0;
}
.phone-circle img { width: 18px; height: 18px; object-fit: contain; }

.phone-num {
  position: relative;
  z-index: 1;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav { margin-left: auto; }

.nav-list {
  display: flex;
  align-items: center;
}

.nav-link {
  display: block;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-main);
  line-height: var(--header-h);
  white-space: nowrap;
  position: relative;
  -webkit-transition: color var(--trans);
          transition: color var(--trans);
}
.nav-link:hover,
.nav-link.active { color: var(--gold); }

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 34px;
  height: 3px;
  background: var(--gold);
  border-radius: 10px;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  margin-left: auto;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
          transition: transform 0.3s, opacity 0.3s;
}

/* ----------------------------------------------------------
   5. 首页 Hero Banner
   ---------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  /*max-width: var(--container);*/
  margin-left: auto;
  margin-right: auto;
  height: 800px;
  overflow: hidden;
}

/* 首页 Hero 轮播（Swiper） */
.hero-swiper {
  width: 100%;
  height: 100%;
}

.hero-swiper .swiper-slide {
  position: relative;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.hero-slide-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* 文案+渐变块：与 1250 内容栏对齐（左内边距等价于原先稿中 368−335≈33px） */
.hero-caption {
  position: absolute;
  z-index: 1;
  left: 33px;
  top: 321px;
  width: min(500px, calc(100% - 66px));
  min-height: 349px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 下层：弱化冷色渐变（近似设计稿中与金色叠化的层），opacity .8 */
.hero-mask {
  position: absolute;
  pointer-events: none;
}

.hero-mask--cool {
  left: 0;
  top: 4px;
  width: 100%;
  height: 341px;
  max-height: 97.71%;
  z-index: 0;
  opacity: 0.8;
  background: -webkit-linear-gradient(left, rgba(31, 62, 103, 0.22) 0%, rgba(31, 62, 103, 0) 91%);
  background:         linear-gradient(90deg, rgba(31, 62, 103, 0.22) 0%, rgba(31, 62, 103, 0) 91%);
}

/* 上层：#c39c62 → 透明，与设计稿金色条一致 */
.hero-mask--gold {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.9;
  background: -webkit-linear-gradient(left, #c39c62 0%, rgba(34, 16, 1, 0) 100%);
  background:         linear-gradient(90deg, #c39c62 0%, rgba(34, 16, 1, 0) 100%);
}

.hero-caption-inner {
  position: relative;
  z-index: 2;
  padding: 78px 33px 28px 33px; /* 标题 top 399−321；左 368−335 */
}

.hero-title {
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  white-space: nowrap;
}

.hero-slogan {
  font-size: clamp(22px, 2.8vw, 42px);
  font-weight: 400;
  color: var(--white);
  margin-top: 10px;
  white-space: nowrap;
}

.hero-deco {
  display: block;
  width: min(455px, 80%);
  height: auto;
  margin-top: 15px;
  margin-bottom: 0;
  object-fit: contain;
  object-position: left;
}

/* Figma 280:7：说明文案深底胶囊条（装饰图下方略有叠压） */
.hero-desc {
  position: relative;
  z-index: 1;
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 14px;
  padding: 6px 10px;
  font-size: clamp(13px, 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--white);
  background-color: #331a05;
  border-radius: 999px;
  white-space: normal;
  word-break: break-word;
}

.hero-deco + .hero-desc {
  margin-top: -35px;
}

/* Hero 外层 Swiper：避免 swiper-wrapper 默认 content-box 与子项合成宽度异常 */
.hero-swiper .swiper-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.news-feat-swiper .swiper-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Hero 轮播分页条 */
section.hero .hero-pagination.swiper-pagination-horizontal {
  position: absolute;
  bottom: 45px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 14px;
  z-index: 2;
  width: auto !important;
  max-width: calc(100% - 32px);
}

section.hero .hero-pagination .swiper-pagination-bullet {
  display: block;
  width: 115px;
  height: 5px;
  border-radius: 100px;
  margin: 0 !important;
  padding: 0;
  border: none;
  background: rgba(217, 217, 217, 0.4);
  opacity: 1;
  -webkit-transition: background var(--trans);
          transition: background var(--trans);
}

section.hero .hero-pagination .swiper-pagination-bullet-active {
  background: var(--white);
}

/* ----------------------------------------------------------
   6. 服务卡片（汽车典当 / 房产业务）
   ---------------------------------------------------------- */
.services {
  background: var(--white);
  padding: 40px 0;
}

.services-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 30px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.svc-card {
  display: block;
  position: relative;
  height: 360px;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  -webkit-transition: outline-offset 0.15s ease;
          transition: outline-offset 0.15s ease;
}
.svc-card:focus {
  outline: none;
}
.svc-card:focus-visible {
  outline: 3px solid var(--gold-lt);
  outline-offset: 3px;
  z-index: 1;
}

.svc-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
          transition: transform 0.4s ease;
}
.svc-card:hover .svc-card-img { -webkit-transform: scale(1.04); transform: scale(1.04); }

.svc-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 103px;
  background: -webkit-linear-gradient(1.6deg, rgb(0,0,0) 40.746%, rgba(102,102,102,0) 88.231%);
  background:         linear-gradient(1.6deg, rgb(0,0,0) 40.746%, rgba(102,102,102,0) 88.231%);
  opacity: 0.95;
  pointer-events: none;
}

.svc-card-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 18px 34px 22px;
}
.svc-card-body h3 {
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 6px;
}
.svc-card-body p { font-size: 14px; color: var(--white); line-height: 1.5; }

.svc-card-btn {
  position: absolute;
  right: 55px;
  bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
  pointer-events: none;
}
.svc-card:hover .svc-card-btn { opacity: 0.75; }
.svc-card-btn img { width: 35px; height: 35px; object-fit: contain; }

/* ----------------------------------------------------------
   7. 典当业务
   ---------------------------------------------------------- */
.pawn-biz { padding: var(--sec-py) 0; }

.pawn-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.pawn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}
.pawn-item:last-child { border-right: none; }

.pawn-img-wrap {
  width: 100%;
  max-width: 180px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.pawn-img-wrap img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pawn-item h3 {
  font-size: clamp(16px, 1.4vw, 24px);
  font-weight: 500;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 10px;
}
.pawn-item--active h3 { color: var(--gold); }
.pawn-item:hover{
  background-color: #EEEDEB;
}

.pawn-link {
  font-size: 14px;
  color: var(--gold);
  text-align: center;
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
}
.pawn-link:hover { opacity: 0.7; }

/* ----------------------------------------------------------
   8. 我们的优势
   ---------------------------------------------------------- */
.advantages {
  position: relative;
  padding: var(--sec-py) 0;
  overflow: hidden;
}

.adv-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.adv-bg img {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.advantages .container { position: relative; z-index: 1; }

.adv-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr 24px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.adv-card { background: var(--white); padding: 40px 30px 36px; border-radius: 4px; }

.adv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--gold-grad);
  margin-bottom: 16px;
  flex-shrink: 0;
}
.adv-icon img { width: 28px; height: 28px; object-fit: contain; }

.adv-card h4 { font-size: 20px; font-weight: 700; color: var(--text-main); margin-bottom: 8px; line-height: 28px; }
.adv-card p  { font-size: 16px; color: var(--text-gray); line-height: 26px; }

/* ----------------------------------------------------------
   9. 简单四步
   ---------------------------------------------------------- */
.steps {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.steps-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.steps-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 32, 47, 0.75);
}

.steps-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 0;
}

.steps-inner h2 { font-size: clamp(24px, 2.5vw, 40px); font-weight: 700; color: var(--white); }
.steps-desc { font-size: 16px; color: var(--white); margin-top: 8px; margin-bottom: 40px; }

.steps-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: nowrap;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 220px;
}

.step-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border: 2px solid var(--white);
  border-radius: 50%;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.step-circle img { width: 40px; height: 40px; object-fit: contain; }

.step-item h4 { font-size: clamp(16px, 1.2vw, 20px); font-weight: 700; color: var(--white); text-align: center; margin-bottom: 8px; line-height: 28px; }
.step-item p  { font-size: 14px; color: var(--white); text-align: center; line-height: 22.75px; padding: 0 8px; }

.step-conn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: clamp(56px, 6.5vw, 100px);
  height: 70px; /* 与 .step-circle 同高，连接线垂直居中对齐圆环 */
  padding-top: 0;
}

/*
  line-horizontal.png 为扁长箭头图：按比例缩放即可见，禁用 fill 拉伸。
  max-height + width:auto 在窄区内仍可读；资源黑底用 lighten 压掉。
*/
.step-conn img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 14px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  mix-blend-mode: lighten;
}

/* ----------------------------------------------------------
   10. 典当资讯
   ---------------------------------------------------------- */
.news { padding: var(--sec-py) 0; }

.news-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 520px) minmax(0, 1fr);
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 30px;
  align-items: stretch;
}

.news-feat {
  position: relative;
  max-width: 520px;
  width: 100%;
}

/* 资讯大图轮播 */
.news-feat-swiper {
  width: 100%;
  height: 450px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.news-feat-swiper .swiper-slide {
  height: 100%;
}

.news-feat-card {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-feat-inner {
  position: relative;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
}

.news-feat-img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-transition: -webkit-transform 0.4s ease;
          transition: transform 0.4s ease;
}
.news-feat-card:hover .news-feat-img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

.news-feat-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 24px 22px;
  min-width: 0;
  background: -webkit-linear-gradient(1.6deg, rgba(0,0,0,0.95) 20%, transparent 100%);
  background:         linear-gradient(1.6deg, rgba(0,0,0,0.95) 20%, transparent 100%);
}

#newsFeatCarousel .news-feat-pagination.swiper-pagination-horizontal {
  position: absolute;
  right: 24px;
  left: auto !important;
  bottom: 22px;
  top: auto !important;
  z-index: 3;
  width: auto !important;
  height: calc(14px * 1.55);
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 5px;
  /* 仅圆点可点击，避免整块挡在链接触发区上 */
  pointer-events: none;
}

#newsFeatCarousel .news-feat-pagination .swiper-pagination-bullet {
  pointer-events: auto;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  margin: 0 !important;
  background: rgba(217, 217, 217, 0.55);
  opacity: 1;
  -webkit-transition: background var(--trans);
          transition: background var(--trans);
}

#newsFeatCarousel .news-feat-pagination .swiper-pagination-bullet-active {
  background: var(--white);
}

.news-feat-overlay h3 {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 8px;
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-feat-overlay-foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
  /* 右侧留给分页圆点（与 .news-feat-swiper 上 right:24px 对齐） */
  padding-right: 52px;
}

.news-feat-overlay-foot p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--white);
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 450px;
}

.news-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 25px 28px 30px;
  background: rgba(245, 245, 244, 0.7);
  flex: 1;
}

.news-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.news-item-body h4 { font-size: clamp(16px, 1.4vw, 24px); font-weight: 400; color: var(--text-main); line-height: 1.4; margin-bottom: 6px; }
.news-excerpt { font-size: 14px; color: rgba(0, 0, 0, 0.6); line-height: 1.6; flex: 1; }

.news-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.news-date   { font-size: 14px; color: rgba(0, 0, 0, 0.4); }

.news-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 20px;
  background: var(--gold-lt);
  border-radius: 100px;
  font-size: 14px;
  color: var(--white);
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
  white-space: nowrap;
}
.news-btn:hover { opacity: 0.85; }

.news-thumb {
  width: 211px;
  height: 146px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  -ms-flex-negative: 0;
}

.news-rule { border: none; border-top: 1px solid rgba(0, 0, 0, 0.08); margin: 0; }

/* ----------------------------------------------------------
   11. 页脚（共享）
   ---------------------------------------------------------- */
.footer { background: var(--dark); }

.footer-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: auto 1fr 1fr 2fr auto;
  -ms-grid-columns: auto 40px 1fr 40px 1fr 40px 2fr 40px auto;
  gap: 40px;
  padding-top: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  align-items: start;
}

.ft-logo { width: 139px; height: auto; object-fit: contain; }

.ft-nav h5,
.ft-svc h5,
.ft-contact h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 30px;
}

.ft-nav ul li,
.ft-svc ul li { margin-bottom: 2px; }

.ft-nav a,
.ft-svc a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 30px;
  -webkit-transition: color var(--trans);
          transition: color var(--trans);
}
.ft-nav a:hover,
.ft-svc a:hover { color: var(--white); }

.ft-contact ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
.ft-contact ul li img { flex-shrink: 0; margin-top: 7px; opacity: 0.6; }
.ft-contact ul li span { font-size: 14px; color: rgba(244, 244, 244, 0.6); line-height: 30px; }

.ft-qr { display: flex; flex-direction: column; align-items: center; }
.ft-qr-img { width: 123px; height: 123px; object-fit: cover; border-radius: 8px; }

.footer-bottom { background: var(--dark); }
.footer-bottom .container {
  padding-top: 18px;
  padding-bottom: 18px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom p { font-size: 14px; color: rgba(255, 255, 255, 0.4); line-height: 20px; }

/* ==========================================================
   ===  联系我们页面专属样式 (contact.html)  ================
   ========================================================== */

/* ----------------------------------------------------------
   12. 子页面 Hero Banner（联系我们 / 其他子页通用）
   ---------------------------------------------------------- */
/* 子页横幅高度 600px，左侧深色渐变蒙版 */
.page-hero {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

/* 从左向右：黑色50%透明 → 透明 */
.page-hero-mask {
  position: absolute;
  inset: 0;
  background: -webkit-linear-gradient(90.26deg, rgba(0,0,0,0.5) 7.5%, rgba(115,115,115,0) 91.2%);
  background:         linear-gradient(90.26deg, rgba(0,0,0,0.5) 7.5%, rgba(115,115,115,0) 91.2%);
  pointer-events: none;
}

/* 子页横幅文字区，与设计稿 top:368px、left:335px 对齐 */
.page-hero-content {
  position: relative;
  z-index: 1;
  /* 368px - 113px(此页header起点) = 255px */
  padding-top: 255px;
}

.page-hero-content h1 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  white-space: nowrap;
}

.page-hero-content p {
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 400;
  color: var(--white);
  margin-top: 12px;
  white-space: nowrap;
}

/* ----------------------------------------------------------
   13. 面包屑导航
   ---------------------------------------------------------- */
.breadcrumb {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 8px 0;
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 36px;
}

.breadcrumb-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.6;
  flex-shrink: 0;
}

.breadcrumb-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------
   14. 联系信息区块
   ---------------------------------------------------------- */
.ci-section { padding: var(--sec-py) 0; }

/* 区块标题（36px 半粗） */
.ci-title {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.ci-subtitle {
  font-size: 16px;
  color: #4a5565;
  line-height: 24px;
  margin-bottom: 48px;
}

/* 5 列联系信息卡片网格 */
.ci-cards {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

/* 单个信息卡片：高 281px，圆角 20px，浅灰背景 */
.ci-card {
  background: rgba(243, 243, 245, 0.4);
  border: 1px solid rgba(243, 243, 245, 0.4);
  border-radius: 20px;
  height: 281px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 54px; /* 对齐设计稿：circle top 从 card top 54px 开始 */
  gap: 12px;
}

/* 图标圆圈容器（circle 66×66 + icon 32×32 居中叠加） */
.ci-icon-wrap {
  position: relative;
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  background-color: rgba(203, 163, 104, 0.15);
  border-radius: 50%;
}

.ci-circle {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

/* 功能图标绝对居中叠加在圆圈上 */
.ci-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ci-label {
  font-size: 14px;
  color: rgba(10, 10, 10, 0.5);
  line-height: 28px;
  text-align: center;
}

.ci-value {
  font-size: 18px;
  font-weight: 400;
  color: #101828;
  text-align: center;
  line-height: 30px;
}

/* 第5张卡片（微信客服二维码） — 内部布局调整 */
.ci-card--qr {
  padding-top: 40px;
  gap: 14px;
}

.ci-qr-img {
  width: 130px;
  height: 130px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   15. 在线留言表单区块
   ---------------------------------------------------------- */
.cf-section { padding: var(--sec-py) 0; }

/* 表单区标题 */
.cf-title {
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.cf-subtitle {
  font-size: 16px;
  color: #4a5565;
  line-height: 24px;
  margin-bottom: 32px;
}

/* 左表单 + 右图片两列布局 */
.cf-grid {
  display: flex;
  gap: clamp(24px, 7.7%, 96px); /* 设计稿间距 96px */
  align-items: flex-start;
}

/* 左侧表单区（设计稿宽 646px） */
.cf-form-area {
  flex: 1;
  min-width: 0;
}

/* 表单两列行 */
.cf-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 46px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 46px;            /* 设计稿: 685-637=48px，取 46px */
  margin-bottom: 24px;
}

/* 单个表单字段 */
.cf-field { display: flex; flex-direction: column; gap: 8px; }

.cf-field label {
  font-size: 16px;
  font-weight: 600;
  color: #364153;
  line-height: 20px;
}

/* 输入框：bg #f3f3f5，高 44px，圆角 8px */
.cf-field input,
.cf-field textarea {
  width: 100%;
  background: #f3f3f5;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 14px;
  color: #717182;
  outline: none;
  -webkit-transition: border-color var(--trans);
          transition: border-color var(--trans);
}
.cf-field input { height: 44px; }
.cf-field textarea { height: 90px; resize: vertical; }
.cf-field input:focus,
.cf-field textarea:focus { border-color: var(--gold-lt); }
.cf-field input::-webkit-input-placeholder,
.cf-field textarea::-webkit-input-placeholder { color: #717182; }

/* 咨询内容跨两列 */
.cf-field--full {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

/* 提交按钮：金色底色，胶囊形，180×63px */
.cf-submit {
  width: 180px;
  height: 63px;
  background: var(--gold);
  border: none;
  border-radius: 100px;
  color: var(--white);
  font-family: var(--font);
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 20px;
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
}
.cf-submit:hover { opacity: 0.85; }

/* 右侧装饰图（设计稿 507×498px，圆角 4px） */
.cf-image {
  width: min(507px, 40%);
  flex-shrink: 0;
}
.cf-image img {
  width: 100%;
  height: 498px;
  object-fit: cover;
  border-radius: 4px;
}

/* ==========================================================
   16. 响应式 — 平板端（768px ~ 1199px）
   ========================================================== */
@media (max-width: 1199px) {

  :root {
    --header-h: 80px;
    --sec-py: 64px;
  }

  /* Header */
  .header-phone { display: none; }
  .nav-link { padding: 0 10px; font-size: 14px; }
  .nav-link.active::after { bottom: 14px; }

  /* 首页 Hero — 仍为全栏宽，由内层 max-width 限制 */
  .hero { height: 520px; }
  .hero-caption {
    left: 28px;
    width: min(460px, calc(100% - 56px));
    top: 209px;
    min-height: 227px;
  }
  .hero-caption-inner { padding: 44px 24px 20px 24px; }
  .hero-mask--cool { height: 87%; top: 3px; }

  /* 服务卡片 */
  .svc-card { height: 280px; }
  .pawn-img-wrap { height: 110px; max-width: 140px; }

  /* 四步流程 — 收紧仍保留可辨箭头 */
  .step-conn {
    width: clamp(48px, 7vw, 72px);
    height: 70px;
  }
  .step-conn img {
    max-height: 12px;
  }

  /* 资讯区 */
  .news-feat-swiper { height: 360px; }
  .news-list { height: 360px; }
  .news-thumb { width: 160px; height: 120px; }

  /* 页脚 */
  .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-contact { grid-column: 1 / 3; }
  .ft-qr { grid-column: 3 / 4; align-items: flex-start; }

  /* 子页 Hero */
  .page-hero { height: 440px; }
  .page-hero-content { padding-top: 180px; }

  /* 联系信息：5列→3列 */
  .ci-cards { grid-template-columns: repeat(3, 1fr); }

  /* 在线留言表单 */
  .cf-image { width: 35%; }
  .cf-image img { height: 400px; }
}

/* ==========================================================
   17. 响应式 — 移动端（< 768px）
   ========================================================== */
@media (max-width: 767px) {

  :root {
    --header-h: 64px;
    --sec-py: var(--sec-py-sm);
  }

  /* ---- Header ---- */
  .logo-icon { height: 44px; }
  .logo-text { height: 34px; }
  .header-phone { display: none; }
  .hamburger { display: flex; }

  .nav {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--white);
    -webkit-box-shadow: 0 6px 20px rgba(0,0,0,0.12);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 199;
    padding: 8px 0 16px;
    overflow-y: auto;
    max-height: calc(100vh - 64px);
  }
  .nav.is-open { display: block; }
  .nav-list { flex-direction: column; }
  .nav-link { line-height: 52px; padding: 0 24px; border-bottom: 1px solid rgba(0,0,0,0.04); }
  .nav-link.active::after { display: none; }

  /* ---- 首页 Hero ---- */
  .hero { height: 320px; }
  .hero-caption {
    left: 16px;
    top: 72px;
    width: min(500px, calc(100% - 32px));
    min-height: 0;
  }
  .hero-mask--gold { min-height: 0; height: 100%; }
  .hero-caption-inner {
    padding: 20px 16px 18px 16px;
  }
  .hero-title { white-space: normal; }
  .hero-slogan { font-size: 20px; white-space: normal; }
  .hero-deco { width: 200px; margin-top: 10px; }
  .hero-deco + .hero-desc {
    margin-top: -22px;
    padding: 7px 14px 9px;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 999px;
  }
  section.hero .hero-pagination .swiper-pagination-bullet {
    width: 40px;
    height: 4px;
  }
  section.hero .hero-pagination.swiper-pagination-horizontal {
    gap: 8px;
    bottom: 16px;
  }

  /* ---- 服务卡片 ---- */
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-card { height: 240px; }
  .svc-card-btn { right: 20px; }

  /* ---- 典当业务 ---- */
  .pawn-grid { grid-template-columns: repeat(2, 1fr); gap: 0; padding: 32px 0; }
  .pawn-item { border-right: 1px solid rgba(0,0,0,0.08); padding-bottom: 24px; padding-top: 12px; }
  .pawn-item:nth-child(even) { border-right: none; }
  .pawn-item:nth-child(1),
  .pawn-item:nth-child(2) { border-bottom: 1px solid rgba(0,0,0,0.08); }
  .pawn-img-wrap { height: 90px; max-width: 120px; }
  .pawn-item h3 { font-size: 15px; }

  /* ---- 我们的优势 ---- */
  .adv-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .adv-card { padding: 24px 16px; }
  .adv-card h4 { font-size: 16px; }
  .adv-card p { font-size: 13px; }

  /* ---- 简单四步 ---- */
  .steps { min-height: auto; }
  .steps-inner { padding: 48px 0; }
  .steps-row { flex-direction: column; align-items: stretch; gap: 20px; }
  .step-item { flex-direction: row; align-items: flex-start; max-width: 100%; gap: 16px; text-align: left; }
  .step-circle { flex-shrink: 0; margin-bottom: 0; }
  .step-item h4 { text-align: left; }
  .step-item p { text-align: left; padding: 0; }
  .step-conn { display: none; }

  /* ---- 典当资讯 ---- */
  .news-grid { grid-template-columns: 1fr; }
  .news-feat-swiper { height: 240px; }
  #newsFeatCarousel .news-feat-pagination.swiper-pagination-horizontal {
    right: 16px;
    left: auto !important;
    bottom: 16px;
    height: calc(14px * 1.55);
  }
  #newsFeatCarousel .news-feat-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
  }
  .news-feat-overlay {
    padding: 28px 16px 16px;
    padding-top: 32px;
  }
  .news-feat-overlay-foot {
    padding-right: 44px;
  }
  .news-list { height: auto; gap: 12px; }
  .news-item { flex-direction: column; padding: 20px; gap: 12px; }
  .news-thumb { width: 100%; height: 180px; order: -1; }
  .news-item-body h4 { font-size: 16px; line-height: 1.5; }
  .news-excerpt { line-height: 1.6; }
  .news-feat-overlay h3 { font-size: 16px; }

  /* ---- 页脚 ---- */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; padding-top: 32px; padding-bottom: 24px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-contact { grid-column: 1 / -1; }
  .ft-qr { grid-column: 1 / -1; flex-direction: row; gap: 12px; }
  .ft-qr-img { width: 100px; height: 100px; }
  .ft-contact ul li span { font-size: 13px; }

  /* ---- 子页 Hero ---- */
  .page-hero { height: 260px; }
  .page-hero-content { padding-top: 100px; }
  .page-hero-content h1 { font-size: 28px; white-space: normal; }
  .page-hero-content p  { font-size: 15px; white-space: normal; }

  /* ---- 联系信息 ---- */
  .ci-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  /* 第5张（二维码）居中跨两列 */
  .ci-card:last-child { grid-column: 1 / -1; }
  .ci-card { height: auto; padding: 28px 16px 24px; }
  .ci-title { font-size: 24px; }
  .ci-value { font-size: 15px; }

  /* ---- 在线留言 ---- */
  .cf-grid { flex-direction: column; gap: 24px; }
  .cf-row { grid-template-columns: 1fr; gap: 16px; }
  .cf-image { width: 100%; }
  .cf-image img { height: 240px; }
  .cf-title { font-size: 24px; }
  .cf-submit { width: 100%; font-size: 18px; height: 52px; }
}

/* ==========================================================
   ===  汽车典当页面专属样式 (car.html)  =====================
   ========================================================== */

/* ----------------------------------------------------------
   20. 汽车典当 — 图文介绍区块
       左侧图片 625px + 右侧文字，两列 flex 布局
   ---------------------------------------------------------- */
.car-intro { padding: var(--sec-py) 0; }

/* 左图 + 右文两列 */
.car-intro-grid {
  display: flex;
  gap: clamp(24px, 9.8%, 123px); /* 设计稿 gap: 1083-960=123px */
  align-items: flex-start;
}

/* 左侧图片容器（设计稿 625×400px） */
.car-intro-img-wrap {
  flex: 0 0 min(625px, 50%);
}
.car-intro-img-wrap img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 右侧文字区，有极淡灰色背景 */
.car-intro-body {
  flex: 1;
  min-width: 0;
  padding: 48px 24px 24px;
  background: rgba(217, 217, 217, 0.1);
}

/* 右侧标题（设计稿 40px 半粗） */
.car-intro-body h2 {
  font-size: clamp(26px, 2.5vw, 40px);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 24px;
}

/* 右侧描述文字（16px, 70%透明度） */
.car-intro-body p {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 30px;
}

/* ----------------------------------------------------------
   21. 可典当汽车类型 — 4 列卡片网格
       背景极浅灰，白色卡片，图片 180×180，按钮金色胶囊
   ---------------------------------------------------------- */
.car-types {
  /* 设计稿背景 #d9d9d9 × opacity 0.16 */
  background: rgba(217, 217, 217, 0.16);
  padding: var(--sec-py) 0;
}

/* 区块标题行（含左文字 + 右侧 prev/next 箭头） */
.car-types-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}

.car-types-title {
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 10px;
}

.car-types-desc {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 24px;
  max-width: 980px;
}

/* 轮播 prev/next 按钮（设计稿位于标题行右侧） */
.car-types-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 36px; /* 与 desc 底部对齐 */
}

.car-types-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  background: rgba(217, 217, 217, 0.5);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  -webkit-transition: background var(--trans);
          transition: background var(--trans);
}
.car-types-nav button:hover { background: rgba(158, 128, 73, 0.25); }

.car-types-nav img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* icon-faq-nav 为朝下 V，旋转为横向左右箭头 */
.car-types-nav-icon--prev {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.car-types-nav-icon--next {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

/* 4 列卡片网格（设计稿：4×293px + 3×26px = 1250px） */
.car-types-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

/* 车型卡片 Swiper（car.html；保留 .car-types-grid 供其他结构复用） */
.car-types-swiper.swiper {
  width: 100%;
  overflow: hidden;
}
.car-types-swiper .swiper-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.car-types-swiper .swiper-slide {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.car-types-swiper .car-type-card {
  width: 100%;
  max-width: 293px;
}

.car-types .car-types-nav button.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 单张汽车类型卡片 */
.car-type-card {
  background: var(--white);
  min-height: 392px;
  padding: 37px 0 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 卡片内车型图片（设计稿 180×180，居中，圆角 4px） */
.car-type-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  margin-bottom: 32px;
}

/* 车型名称 */
.car-type-name {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 24px;
  margin-bottom: 8px;
}

/* 副标题说明（14px，50%透明度） */
.car-type-sub {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 24px;
  margin-bottom: 24px;
}

/* 金色胶囊"立即咨询"按钮（设计稿 121×40px） */
.car-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 121px;
  height: 40px;
  background: var(--gold);
  border-radius: 100px;
  border: none;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
  text-decoration: none;
}
.car-type-btn:hover { opacity: 0.85; }

/* ----------------------------------------------------------
   22. 常见问题 — FAQ 手风琴
       1000px 居中容器，金色 Q 徽章，折叠箭头交互
   ---------------------------------------------------------- */
.car-faq { padding: var(--sec-py) 0; }

.car-faq-title {
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 600;
  text-align: center;
  margin-bottom: 40px;
}

/* 1000px 居中的 FAQ 列表容器 */
.car-faq-list {
  max-width: 1000px;
  margin: 0 auto;
}

/* 单条 FAQ 项（含问题行 + 可折叠答案） */
.car-faq-item {
  background: rgba(217, 217, 217, 0.14);
  border-radius: 2px;
  margin-bottom: 8px;
  overflow: hidden;
}

/* 展开状态：背景略深 */
.car-faq-item.is-open {
  background: rgba(217, 217, 217, 0.25);
}

/* 问题行：flex 行，左徽章 + 文字 + 右箭头 */
.car-faq-question {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  min-height: 58px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 金色 Q 徽章（设计稿 27×27，圆角 4px） */
.car-faq-badge {
  width: 27px;
  height: 27px;
  background: var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 1;
}

/* 问题文字（折叠：20px 黑色；展开：24px 金色） */
.car-faq-text {
  flex: 1;
  min-width: 0;
  font-size: 20px;
  color: var(--text-main);
  line-height: 24px;
  -webkit-transition: color var(--trans), font-size var(--trans);
          transition: color var(--trans), font-size var(--trans);
}
.car-faq-item.is-open .car-faq-text {
  font-size: 24px;
  color: var(--gold);
}

/* 折叠箭头图标 */
.car-faq-arrow {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.5;
  -webkit-transition: -webkit-transform 0.3s ease;
          transition: transform 0.3s ease;
}
/* 展开时：箭头上翻 */
.car-faq-item.is-open .car-faq-arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* 答案区（折叠时隐藏） */
.car-faq-answer {
  display: none;
  /* 左缩进：20px(padding) + 27px(badge) + 12px(gap) = 59px */
  padding: 0 24px 20px 59px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 24px;
}
.car-faq-item.is-open .car-faq-answer { display: block; }

/* ----------------------------------------------------------
   23. 汽车典当 — 响应式平板端（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  /* 介绍区图片宽度缩减 */
  .car-intro-img-wrap { flex: 0 0 44%; }
  .car-intro-img-wrap img { height: 320px; }

  /* 汽车类型：4→2 列；Swiper 内卡片铺满 slide */
  .car-types-grid { grid-template-columns: repeat(2, 1fr); }
  .car-types-swiper .car-type-card {
    max-width: none;
    min-height: auto;
  }
}

/* ----------------------------------------------------------
   24. 汽车典当 — 响应式移动端（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* 介绍区：改为单列纵向 */
  .car-intro-grid { flex-direction: column; gap: 0; }
  .car-intro-img-wrap { flex: 0 0 auto; width: 100%; }
  .car-intro-img-wrap img { height: 220px; }
  .car-intro-body { padding: 20px 16px 20px; }
  .car-intro-body h2 { font-size: 22px; margin-bottom: 12px; }

  /* 汽车类型：2 列；Swiper 与 .car-type-card 共用移动端样式 */
  .car-types-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .car-types-swiper .car-type-card {
    max-width: none;
  }
  .car-type-card { min-height: auto; padding: 24px 8px 20px; }
  .car-type-img { width: 120px; height: 120px; margin-bottom: 16px; }
  .car-type-name { font-size: 18px; }
  .car-types-nav { display: none; } /* 移动端隐藏 prev/next */

  /* FAQ */
  .car-faq-text { font-size: 16px; }
  .car-faq-item.is-open .car-faq-text { font-size: 18px; }
  .car-faq-answer { padding-left: 20px; }
}

/* ==========================================================
   19. 打印样式
   ========================================================== */
@media print {
  .header { position: static; }
  .hero-pagination, .hamburger, .header-phone { display: none; }
  .hero, .page-hero { height: auto; }
  .hero-caption-inner,
  .page-hero-content { padding-top: 40px; }
  .steps { min-height: auto; }
  .footer { color: var(--dark); background: none; }
  .footer * { color: var(--dark) !important; }
  .cf-submit { background: var(--gold); color: var(--white); }
  .car-faq-answer { display: block !important; }
  .nl-answer { display: block !important; }
  /* 详情页强制单列 */
  .nd-layout { flex-direction: column; }
  .nd-sidebar { width: 100%; }
}

/* ==========================================================
   ===  典当资讯详情页专属样式 (news-detail.html)  ===========
   ========================================================== */

/* ----------------------------------------------------------
   29. 新闻详情页 — 页面双栏布局
       左：主文章（flex:1，~858px）
       右：资讯推荐侧栏（361px）
       列间距：31px（设计稿 1224-1193=31px）
   ---------------------------------------------------------- */
.nd-section { padding: 40px 0 60px; }

/* 双栏 flex 容器，顶部对齐 */
.nd-layout {
  display: flex;
  align-items: flex-start;
  gap: 31px;
}

/* 主文章区（flex:1，避免溢出） */
.nd-main {
  flex: 1;
  min-width: 0;
}

/* 文章大标题（36px, medium, 行高 44px） */
.nd-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 44px;
  margin-bottom: 8px;
}

/* 文章元信息：发布时间 + 浏览量（14px, 40% 透明度） */
.nd-meta {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 44px;
  margin-bottom: 0;
}

/* 标题区下细分隔线（替代 imgLine25，用 CSS border 实现） */
.nd-rule {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0 0 28px;
}

/* 文章正文（16px，行高 30px） */
.nd-body {
  font-size: 16px;
  color: var(--text-main);
  line-height: 30px;
  margin-bottom: 36px;
}
.nd-body p { margin-bottom: 20px; }
.nd-body p:last-child { margin-bottom: 0; }

/* 文章内图片（672×428，圆角4px，居中显示） */
.nd-article-img {
  display: block;
  width: 100%;
  max-width: 672px;
  height: auto;
  aspect-ratio: 672 / 428;
  object-fit: cover;
  border-radius: 4px;
  margin: 0 auto 40px;
}

/* 正文底部粗分隔线（替代 imgLine27，用 CSS border 实现） */
.nd-bottom-rule {
  border: none;
  border-top: 2px solid rgba(0, 0, 0, 0.12);
  margin: 0 0 20px;
}

/* 上一篇 / 下一篇导航区（16px，50% 透明度） */
.nd-prev-next {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 30px;
}
.nd-prev-next p { margin-bottom: 4px; }
.nd-prev-next a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: color var(--trans);
          transition: color var(--trans);
}
.nd-prev-next a:hover { color: var(--gold); }

/* ----------------------------------------------------------
   30. 新闻详情页 — 右侧「资讯推荐」侧栏
       宽 361px，极浅灰底（#d9d9d9, opacity:0.14），内边距 28px
   ---------------------------------------------------------- */
.nd-sidebar {
  flex-shrink: 0;
  width: 361px;
  background: rgba(217, 217, 217, 0.14);
  padding: 28px;
}

/* 侧栏标题行：金色竖条 4×25px + 标题文字 */
.nd-sidebar-hd {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;
}

/* 金色竖条装饰（4px宽 × 25px高，#9e8049，圆角20px） */
.nd-sidebar-bar {
  flex-shrink: 0;
  width: 4px;
  height: 25px;
  background: var(--gold);
  border-radius: 20px;
}

/* 侧栏标题文字（36px, medium） */
.nd-sidebar-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 30px;
}

/* 推荐文章列表（无序列表，去掉默认样式） */
.nd-rec-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 单条推荐文章（顶部细线 + 16px 上下间距） */
.nd-rec-item {
  padding: 18px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* 推荐文章标题（20px, medium，悬停变金色） */
.nd-rec-title {
  display: block;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 30px;
  margin-bottom: 8px;
  text-decoration: none;
  -webkit-transition: color var(--trans);
          transition: color var(--trans);
}
.nd-rec-title:hover { color: var(--gold); }

/* 推荐文章摘要（14px, 70% 透明度，限 2 行超出省略） */
.nd-rec-excerpt {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 20px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 推荐文章日期（14px, 40% 透明度） */
.nd-rec-date {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  line-height: 44px;
}

/* ----------------------------------------------------------
   31. 新闻详情 — 平板响应式（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .nd-title { font-size: 28px; }
  .nd-sidebar { width: 280px; padding: 20px; }
  .nd-sidebar-title { font-size: 24px; }
  .nd-rec-title { font-size: 17px; }
}

/* ----------------------------------------------------------
   32. 新闻详情 — 移动端响应式（< 768px）
       侧栏移到主内容下方，改为全宽单列
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .nd-layout { flex-direction: column; }
  .nd-sidebar { width: 100%; }
  .nd-title { font-size: 22px; line-height: 32px; }
  .nd-body { font-size: 15px; }
  .nd-sidebar-title { font-size: 22px; }
  .nd-rec-title { font-size: 16px; }
}

/* ==========================================================
   ===  典当资讯列表页专属样式 (news.html)  ==================
   ========================================================== */

/* ----------------------------------------------------------
   25. 典当资讯 — 新闻列表区块
       每条：左日期徽章 + 中缩略图 + 右标题/摘要/按钮
   ---------------------------------------------------------- */
.nl-section { padding: 40px 0 0; }

/* 单条新闻行 */
.nl-item {
  display: flex;
  align-items: flex-start;
  padding: 40px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.nl-item:last-child { border-bottom: none; }

/* ---- 日期徽章列（75px 固定宽） ---- */
.nl-date-col {
  flex-shrink: 0;
  width: 75px;
  /* 与缩略图等高，使徽章垂直居中于图片 */
  height: 200px;
  display: flex;
  align-items: center;
  margin-right: 31px; /* 设计稿：441-410=31px */
}

/* 金色徽章（#cba368，82×75px，圆角 7px） */
.nl-badge {
  width: 75px;
  height: 82px;
  background: var(--gold-lt);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}

/* 日期：大号数字（36px white） */
.nl-badge-day {
  font-size: 36px;
  font-weight: 500;
  color: var(--white);
  line-height: 1;
}

/* 徽章内分隔线（替代 imgLine13，用 CSS border 实现） */
.nl-badge-rule {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  width: 42px;
  margin: 4px 0;
}

/* 年月：小字（12px white） */
.nl-badge-month {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.5;
}

/* ---- 缩略图列（310×200px） ---- */
.nl-thumb-col {
  flex-shrink: 0;
  margin-right: 35px; /* 设计稿：786-751=35px */
}

/* 缩略图（设计稿 310×200px） */
.nl-thumb {
  width: 310px;
  height: 200px;
  object-fit: cover;
  display: block;
}

/* ---- 文章内容列 ---- */
.nl-body {
  flex: 1;
  min-width: 0;
  padding-top: 11px; /* 设计稿：title top 811 - image top 800 = 11px */
}

/* 文章标题（24px medium） */
.nl-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 30px;
  margin-bottom: 14px;
}

/* 摘要（16px，70%透明度，行高 26px，约 3 行） */
.nl-excerpt {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 26px;
  margin-bottom: 16px;
}

/* "查看详情 >" 边框胶囊按钮（117×42px，金色边框） */
.nl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 117px;
  height: 42px;
  border: 1px solid var(--gold);
  border-radius: 100px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  -webkit-transition: background var(--trans), color var(--trans);
          transition: background var(--trans), color var(--trans);
}
.nl-btn:hover {
  background: var(--gold);
  color: var(--white);
}

/* ----------------------------------------------------------
   26. 典当资讯 — 分页导航
       设计稿: [< prev] [1] [2] [next >]，按钮 31×34px，圆角 2px
   ---------------------------------------------------------- */
.nl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 0 60px;
}

/* 基础页码按钮（31×34px，圆角 2px） */
.nl-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 2px;
  background: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: border-color var(--trans), color var(--trans);
          transition: border-color var(--trans), color var(--trans);
}
.nl-pg-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* 当前激活页（金色边框 + 金色文字） */
.nl-pg-btn.is-active {
  border-color: var(--gold);
  color: var(--gold);
}

/* prev/next 导航按钮（含方向图标，padding 为 0） */
.nl-pg-btn--nav {
  padding: 0;
  overflow: hidden;
}
.nl-pg-btn--nav img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0.7;
  display: block;
}
/* next 按钮：图标水平翻转 */
.nl-pg-btn--next img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

/* ----------------------------------------------------------
   27. 典当资讯 — 响应式平板端（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .nl-thumb { width: 240px; height: 160px; }
  .nl-date-col { height: 160px; margin-right: 20px; }
  .nl-thumb-col { margin-right: 24px; }
  .nl-title { font-size: 20px; }
}

/* ----------------------------------------------------------
   28. 典当资讯 — 响应式移动端（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* 新闻条目改为上缩略图下文字 */
  .nl-item {
    flex-direction: column;
    gap: 16px;
    padding: 28px 0;
    align-items: stretch;
  }
  /* 日期+缩略图横排 */
  .nl-date-col {
    height: auto;
    margin-right: 0;
    /* 在 mobile 中与缩略图并排 */
  }
  .nl-item-media {
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .nl-thumb {
    width: 100%;
    height: 180px;
    flex: 1;
  }
  .nl-thumb-col { margin-right: 0; flex: 1; }
  .nl-body { padding-top: 0; }
  .nl-title { font-size: 18px; }
  .nl-excerpt { font-size: 14px; line-height: 22px; }
}

/* ==========================================================
   ===  典当业务页专属样式 (business.html)  ==================
   ========================================================== */

/* ----------------------------------------------------------
   33. 典当业务 — 交替图文行区块
       4 条业务：奢侈品典当 / 黄铂金典当 / 数码典当 / 产权典当
       奇数行：左图右文；偶数行：左文右图
       图片列宽 50%（设计稿 625/1250=50%），高度固定 400px
       文字列宽 50%，浅灰背景 rgba(217,217,217,.16)
   ---------------------------------------------------------- */
.pb-section { padding: 30px 0; }

/* 每行 flex 容器 */
.pb-row {
  display: flex;
  align-items: stretch;
  min-height: 400px;
}

/* 图片列（50%，图片 cover 铺满） */
.pb-col-img {
  flex: 0 0 50%;
  overflow: hidden;
}
.pb-col-img img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* 文字列（50%，极浅灰底，flex 纵向排列内容） */
.pb-col-text {
  flex: 0 0 50%;
  background: rgba(217, 217, 217, 0.16);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 设计稿: 顶部 80px，底部 60px，左侧缩进 120px（取 116~135px 均值） */
  padding: 80px 60px 60px 120px;
}

/* 奇数行（图左文右）：文字列在右侧，左侧缩进微调 135px */
.pb-row--img-left .pb-col-text  { padding-left: 135px; }

/* 偶数行（文左图右）：文字列在左侧，左侧缩进 116px */
.pb-row--text-left .pb-col-text { padding-left: 116px; }

/* ----------------------------------------------------------
   34. 典当业务 — 文字列内部元素
   ---------------------------------------------------------- */

/* 业务标题（36px, medium） */
.pb-title {
  font-size: 36px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* 业务描述（16px, 70% 透明度, 行高 30px） */
.pb-desc {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 30px;
  max-width: 384px;
  flex: 1; /* 撑开，使按钮贴近底部 */
}

/* CTA 按钮（金色实心胶囊，157×55px，#9e8049） */
.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 157px;
  height: 55px;
  background: var(--gold);
  border-radius: 100px;
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  margin-top: 32px;
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
}
.pb-btn:hover { opacity: 0.85; }

/* ----------------------------------------------------------
   35. 典当业务 — 平板响应式（768px ~ 1199px）
       保持双栏但缩减内边距和图片高度
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .pb-col-img img { height: 320px; }
  .pb-col-text {
    padding: 60px 30px 50px 60px;
    min-height: 320px;
  }
  .pb-row--img-left .pb-col-text  { padding-left: 60px; }
  .pb-row--text-left .pb-col-text { padding-left: 60px; }
  .pb-title { font-size: 28px; }
  .pb-btn { width: 140px; height: 48px; font-size: 16px; }
}

/* ----------------------------------------------------------
   36. 典当业务 — 移动端响应式（< 768px）
       改为上图下文单列堆叠，奇偶行均相同排列
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .pb-section { padding-top: 0; }
  .pb-row,
  .pb-row--img-left,
  .pb-row--text-left { flex-direction: column; }

  .pb-col-img,
  .pb-col-text { flex: 0 0 100%; width: 100%; }

  .pb-col-img img { height: 220px; }

  /* 文左图右行在移动端：图片仍在文字后显示（flex-column 顺序不变） */
  .pb-row--text-left .pb-col-img { order: -1; }

  .pb-col-text,
  .pb-row--img-left .pb-col-text,
  .pb-row--text-left .pb-col-text {
    padding: 32px 20px 36px 20px;
  }
  .pb-title { font-size: 22px; }
  .pb-desc { font-size: 15px; max-width: 100%; }
  .pb-btn { margin-top: 24px; width: 140px; height: 48px; font-size: 15px; }
}

/* ==========================================================
   ===  奢侈品典当详情页专属样式 (business-luxury.html)  ====
   ========================================================== */

/* ----------------------------------------------------------
   37. 业务详情 — 介绍区块（复用 pb-row 布局，调整左缩进/标题字号）
       intro 图文左右各 50%，右侧文字 padding-left 调整为 123px
       标题 40px semibold（设计稿比 pb-row 的 36px medium 更大更重）
   ---------------------------------------------------------- */
.bd-intro .pb-col-text { padding-left: 123px; }

/* 40px semibold 标题变体（区分 pb-title 的 36px medium） */
.pb-title--xl {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 20px;
}

/* 介绍区描述以多行要点形式排列（如房产典当的六大优势），重置 p 默认 margin */
.pb-desc--list p { margin: 0; line-height: 30px; }

/* ==========================================================
   ===  关于我们-团队介绍页专属样式 (about-team.html)  ======
   ========================================================== */

/* ----------------------------------------------------------
   48. 团队成员卡片网格
       4列，每列300px，列间距17px；行间距44px
       每卡片由上方照片（300×300px）+ 下方信息面板（300×203px）组成
   ---------------------------------------------------------- */
.tm-section { padding: 24px 0 74px; }

/* 4 列等宽网格（4×300 + 3×17 = 1251px ≈ 容器 1250px） */
.tm-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 300px);
  gap: 44px 17px;
}

/* 单张成员卡片 */
.tm-card {
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 300px;
}

/* 照片区（300×300px，正方形） */
.tm-card-photo {
  width: 300px;
  height: 300px;
  overflow: hidden;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}
.tm-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 信息面板（300×203px，半透明白底 + 阴影） */
.tm-card-info {
  width: 300px;
  height: 203px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 23px 20px 17px 17px;
  box-sizing: border-box;
}

/* 姓名 + 职位 Badge 水平行（两端对齐） */
.tm-card-header {
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-bottom: 11px;
}

/* 姓名（20px semibold） */
.tm-card-name {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: var(--text-main);
}

/* 职位徽章（金色描边胶囊，56×26px，border-radius 110px） */
.tm-card-badge {
  display: -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  /*width: 56px;*/
  padding: 0 9px;
  height: 26px;
  border-radius: 110px;
  border: 1px solid #caa66a;
  font-size: 14px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  white-space: nowrap;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

/* 个人简介（14px, 80% opacity, 最多4行，超出截断） */
.tm-card-desc {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ----------------------------------------------------------
   49. 团队页分页控件
       Prev/Next 按钮（带←箭头图片）+ 页码按钮
       按钮尺寸 31×34px，圆角 2px，描边样式
   ---------------------------------------------------------- */
.tm-pagination {
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  gap: 8px;
  margin-top: 43px;
}

/* 通用分页按钮（31×34px） */
.tm-pg-btn {
  display: -webkit-inline-flex;
  display:         inline-flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  width: 31px;
  height: 34px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-main);
  line-height: 24px;
  font-family: inherit;
  -webkit-transition: border-color var(--trans), color var(--trans);
          transition: border-color var(--trans), color var(--trans);
}

/* 激活页码：金色描边 + 金色文字 */
.tm-pg-btn.is-active {
  border-color: var(--gold);
  color: var(--gold);
}

.tm-pg-btn:hover:not(.is-active):not(:disabled) { border-color: rgba(0, 0, 0, 0.6); }
.tm-pg-btn:disabled { opacity: 0.35; cursor: default; }

/* Prev/Next 按钮内箭头图片（34×34px，opacity 0.7） */
.tm-pg-btn--nav {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.4);
}
.tm-pg-btn--nav img { width: 34px; height: 34px; object-fit: contain; opacity: 0.7; display: block; }

/* Next 按钮：水平翻转箭头 scaleX(-1) = 指向右侧 */
.tm-pg-btn--next img {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* ----------------------------------------------------------
   50. 团队页 — 平板响应式（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .tm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
  }
  .tm-card { width: 100%; }
  .tm-card-photo { width: 100%; height: 220px; }
  .tm-card-info { width: 100%; height: auto; min-height: 160px; }
}

/* ----------------------------------------------------------
   51. 团队页 — 移动端响应式（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .tm-section { padding: 20px 0 48px; }
  .tm-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .tm-card { width: 100%; }
  .tm-card-photo { width: 100%; height: 160px; }
  .tm-card-info { width: 100%; height: auto; padding: 16px 14px; }
  .tm-card-name { font-size: 16px; }
  .tm-card-desc { -webkit-line-clamp: 3; }
}

/* ==========================================================
   ===  关于我们页专属样式 (about.html)  ====================
   ========================================================== */

/* ----------------------------------------------------------
   42. 关于我们 — 页面主区块
       整体 padding，tab 导航与内容区共同包裹在 .au-section
   ---------------------------------------------------------- */
.au-section { padding: 24px 0 74px; }

/* ----------------------------------------------------------
   43. 选项卡导航
       4 个等宽按钮（177-178×53px，圆角 2px，居中排列）
       激活项：金色实底 + 白字；未激活：半透明灰底 + 深色字
   ---------------------------------------------------------- */
.au-tab-wrap { margin-bottom: 76px; }

/* tab 按钮列表（flex 居中） */
.au-tabs {
  display: -webkit-flex;
  display:         flex;
  -webkit-justify-content: center;
          justify-content: center;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 单个 tab 按钮 */
.au-tab-btn {
  width: 177px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  background: rgba(217, 217, 217, 0.5);
  color: var(--text-main);
  font-family: inherit;
  -webkit-transition: background var(--trans), color var(--trans);
          transition: background var(--trans), color var(--trans);
}

/* 激活态：金色底 + 白字 */
.au-tab-btn.is-active {
  background: var(--gold);
  color: var(--white);
}

.au-tab-btn:hover:not(.is-active) { background: rgba(217, 217, 217, 0.8); }

/* ----------------------------------------------------------
   44. 选项卡内容面板（默认隐藏，激活时显示）
   ---------------------------------------------------------- */
.au-tab-pane { display: none; }
.au-tab-pane.is-active { display: block; }

/* ----------------------------------------------------------
   45. 公司简介 — 内容区
       公司标题（40px semibold）+ 双栏布局（左文694px + 右图556px）
   ---------------------------------------------------------- */

/* 公司名称大标题（40px semibold） */
.au-company-title {
  font-size: 40px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 40px;
}

/* 双栏包裹：左文字块 + 右图片（总宽 694+556=1250px） */
.au-intro-layout {
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: stretch;
          align-items: stretch;
}

/* 左：浅灰底文字区块（694×460px，内边距 33px 顶、37px 左右） */
.au-intro-text {
  -webkit-flex: 0 0 694px;
          flex: 0 0 694px;
  background: rgba(217, 217, 217, 0.20);
  border-radius: 2px;
  padding: 33px 37px;
  font-size: 16px;
  color: var(--text-main);
  line-height: 30px;
  min-height: 460px;
  box-sizing: border-box;
}

/* 段落间距（每段后留白，代替设计稿中的空白段落行） */
.au-intro-text > p { margin: 0 0 15px; }
.au-intro-text > p:last-child { margin-bottom: 0; }

/* 右：公司实景图（556×460px，全覆盖） */
.au-intro-img {
  -webkit-flex: 0 0 556px;
          flex: 0 0 556px;
  overflow: hidden;
}
.au-intro-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------------------------------------------------
   46. 关于我们 — 平板响应式（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .au-tabs { gap: 8px; }
  .au-tab-btn { width: 140px; height: 48px; font-size: 16px; }
  .au-company-title { font-size: 28px; }
  .au-intro-text { flex: 1; padding: 24px; }
  .au-intro-img { flex: 0 0 40%; }
  .au-intro-layout { gap: 0; }
}

/* ----------------------------------------------------------
   47. 关于我们 — 移动端响应式（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .au-section { padding: 20px 0 48px; }
  .au-tab-wrap { margin-bottom: 40px; overflow-x: auto; }
  .au-tabs { justify-content: flex-start; gap: 8px; padding: 0 16px; min-width: max-content; }
  .au-tab-btn { width: 110px; height: 44px; font-size: 15px; }
  .au-company-title { font-size: 22px; margin-bottom: 24px; }
  .au-intro-layout { flex-direction: column; }
  .au-intro-text { flex: none; min-height: auto; padding: 20px; }
  .au-intro-img { flex: none; height: 220px; }
}

/* ----------------------------------------------------------
   38. 业务详情 — 可典当品类卡片区块
       全页宽浅灰底 rgba(217,217,217,.16)，4 列等宽卡片网格
       卡片：293×392px，白底，居中对齐图片/文字/按钮
   ---------------------------------------------------------- */

/* 区块整体（padding 上60下80，全页宽灰底） */
.bd-cards-section {
  background: rgba(217, 217, 217, 0.16);
  padding: 60px 0 80px;
}

/* 标题行：左对齐标题 + 右对齐翻页按钮 */
.bd-cards-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* 区块标题（40px semibold） */
.bd-cards-title {
  font-size: 40px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 24px;
}

/* 翻页按钮容器 */
.bd-cards-nav {
  display: flex;
  gap: 8px;
}

/* 翻页箭头按钮（39×39px，浅灰实心，圆角 5px） */
.bd-cards-nav-btn {
  width: 39px;
  height: 39px;
  background: rgba(217, 217, 217, 0.5);
  border-radius: 5px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  -webkit-transition: background var(--trans);
          transition: background var(--trans);
}
.bd-cards-nav-btn:hover { background: rgba(158, 128, 73, 0.2); color: var(--gold); }

/* 副标题描述（16px, 70% 透明度） */
.bd-cards-sub {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 24px;
  margin-bottom: 40px;
  max-width: 983px;
}

/* 四列卡片网格（4×293px + 3×26px = 1250px，正好填满容器） */
.bd-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 293px);
  gap: 26px;
}

/* 品类卡片 Swiper（business-luxury.html、realestate.html；其余页面仍可用 .bd-cards-grid） */
.bd-cards-swiper.swiper {
  width: 100%;
  overflow: hidden;
}
.bd-cards-swiper .swiper-wrapper {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.bd-cards-swiper .swiper-slide {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.bd-cards-swiper .bd-card {
  width: 100%;
  max-width: 293px;
}

/* Swiper Navigation 挂载到 .bd-cards-nav-btn 时的禁用态 */
.bd-cards-section .bd-cards-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* 单张卡片（293×392px，白底，flex 纵向排列） */
.bd-card {
  width: 293px;
  height: 392px;
  background: var(--white);
  padding: 35px 20px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 卡片图片容器（固定高 182px，图片居中） */
.bd-card-img-area {
  height: 182px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}
.bd-card-img {
  max-height: 182px;
  max-width: 100%;
  object-fit: contain;
}

/* 卡片商品名（24px, medium，距图片下方 32px） */
.bd-card-name {
  margin-top: 32px;
  font-size: 24px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 24px;
}

/* 卡片副文案（14px, 50% 透明度） */
.bd-card-desc {
  margin-top: 9px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
  line-height: 24px;
  text-align: center;
}

/* 卡片咨询按钮（金色实心胶囊 121×40px，与业务列表 btn 尺寸略小） */
.bd-card-btn {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 121px;
  height: 40px;
  background: var(--gold);
  border-radius: 100px;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
  -webkit-transition: opacity var(--trans);
          transition: opacity var(--trans);
}
.bd-card-btn:hover { opacity: 0.85; }

/* ----------------------------------------------------------
   39. 业务详情 — 常见问题 FAQ 手风琴
       宽 1000px 居中，每条 height:58px（展开时自动撑高）
       Q 徽章：27×27px 金色圆角方块；问题20px；右侧箭头
   ---------------------------------------------------------- */
.bd-faq { padding: 60px 0 80px; }

/* 章节标题（40px semibold，居中） */
.bd-faq-title {
  text-align: center;
  font-size: 40px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 24px;
  margin-bottom: 48px;
}

/* FAQ 列表（max-width:1000px，居中） */
.bd-faq-list {
  max-width: 1000px;
  margin: 0 auto;
  list-style: none;
}

/* 单条 FAQ 项 */
.bd-faq-item { margin-bottom: 8px; }
.bd-faq-item:last-child { margin-bottom: 0; }

/* 问题触发按钮（flex 行，高 58px，浅灰底） */
.bd-faq-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  background: rgba(217, 217, 217, 0.14);
  border: none;
  padding: 17px 20px;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
}

/* Q 徽章（27×27px，金色 #9e8049，圆角 4px） */
.bd-faq-badge {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  background: var(--gold);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
}

/* 问题文字（20px regular） */
.bd-faq-question {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-main);
  line-height: 24px;
}

/* 右侧折叠箭头（纯 CSS ▾，32×32px 区域，opacity 0.5） */
.bd-faq-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  -webkit-transition: -webkit-transform var(--trans);
          transition: transform var(--trans);
}

/* 展开态：背景加深，问题文字变金色，箭头旋转 180° */
.bd-faq-item.is-open .bd-faq-btn {
  background: rgba(217, 217, 217, 0.25);
  border-radius: 2px 2px 0 0;
}
.bd-faq-item.is-open .bd-faq-question { color: var(--gold); font-size: 24px; }
.bd-faq-item.is-open .bd-faq-arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

/* 答案面板（默认隐藏，展开时显示） */
.bd-faq-answer {
  display: none;
  padding: 16px 20px 20px 61px; /* 61px = 14gap + 27badge + 20gapRight */
  font-size: 16px;
  color: rgba(0, 0, 0, 0.7);
  line-height: 24px;
  background: rgba(217, 217, 217, 0.25);
  border-radius: 0 0 2px 2px;
}
.bd-faq-item.is-open .bd-faq-answer { display: block; }

/* ----------------------------------------------------------
   40. 业务详情 — 平板响应式（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  /* 介绍区继承 pb-row 平板样式，仅调整缩进 */
  .bd-intro .pb-col-text { padding-left: 60px; }
  .pb-title--xl { font-size: 30px; }

  /* 品类卡片：栅格仍为 2 列；Swiper 内卡片铺满 slide */
  .bd-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .bd-cards-swiper .bd-card {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 360px;
  }
  .bd-card { width: 100%; height: auto; min-height: 360px; }
  .bd-cards-title { font-size: 28px; }

  /* FAQ */
  .bd-faq-title { font-size: 28px; }
  .bd-faq-question { font-size: 16px; }
  .bd-faq-item.is-open .bd-faq-question { font-size: 18px; }
}

/* ----------------------------------------------------------
   41. 业务详情 — 移动端响应式（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* 介绍区继承 pb-row 移动端单列样式 */
  .bd-intro .pb-col-text { padding-left: 20px; }
  .pb-title--xl { font-size: 22px; }

  /* 品类卡片：栅格仍为 2 列；Swiper 单卡略压缩内边距 */
  .bd-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .bd-cards-swiper .bd-card {
    padding: 24px 16px 28px;
  }
  .bd-card { width: 100%; height: auto; padding: 24px 16px 28px; }
  .bd-card-name { font-size: 18px; }

  /* FAQ */
  .bd-faq { padding: 40px 0 60px; }
  .bd-faq-title { font-size: 24px; margin-bottom: 32px; }
  .bd-faq-question { font-size: 14px; }
  .bd-faq-btn { min-height: 50px; padding: 14px 16px; gap: 10px; }
  .bd-faq-answer { padding-left: 51px; font-size: 14px; }
  .bd-faq-item.is-open .bd-faq-question { font-size: 16px; }
}

/* ==========================================================
   ===  关于我们-公司文化页专属样式 (about-culture.html)  ===
   ========================================================== */

/* 企业使命 — 容器内背景图 + 白色覆盖卡片 */
.cc-mission {
  position: relative;
  height: 380px;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 78px;
}
.cc-mission-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}
.cc-mission-card {
  position: absolute;
  left: 37px;
  top: 54px;
  width: 392px;
  height: 273px;
  background: rgba(255, 255, 255, 0.85);
  padding: 45px 30px 30px 51px;
  box-sizing: border-box;
  z-index: 1;
}
.cc-mission-title {
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--text-main);
  margin: 0 0 6px;
}
.cc-mission-en {
  font-size: clamp(13px, 1.1vw, 20px);
  font-weight: 400;
  opacity: 0.5;
  line-height: 40px;
  color: var(--text-main);
  margin: 0;
}
.cc-mission-taglines {
  margin-top: 14px;
}
.cc-mission-taglines p {
  font-size: clamp(15px, 1.1vw, 20px);
  font-weight: 600;
  line-height: 30px;
  color: var(--text-main);
  margin: 0;
}

/* 企业文化 / 企业愿景 — 左文右图双栏 */
.cc-article {
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
  gap: clamp(40px, 8vw, 147px);
  padding-bottom: 57px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  margin-bottom: 67px;
}
.cc-article:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 54px;
}
.cc-article-text {
  -webkit-flex: 1;
          flex: 1;
  min-width: 0;
}
.cc-article-title {
  font-size: clamp(24px, 2.2vw, 40px);
  font-weight: 600;
  line-height: normal;
  color: var(--text-main);
  margin: 0;
}
.cc-article-en {
  font-size: clamp(13px, 1.1vw, 20px);
  font-weight: 400;
  opacity: 0.5;
  line-height: 40px;
  color: var(--text-main);
  margin: 0 0 5px;
}
.cc-article-desc {
  font-size: clamp(14px, 1vw, 18px);
  line-height: 30px;
  color: var(--text-main);
  max-width: 760px;
  margin: 0;
}
.cc-article-img {
  -webkit-flex: 0 0 330px;
          flex: 0 0 330px;
  width: 330px;
}
.cc-article-img img {
  display: block;
  width: 100%;
  height: 220px;
  -o-object-fit: cover;
     object-fit: cover;
}
.cc-article-img--flip img {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
}

/* 容达价值观 — 3+2 卡片网格 */
.cc-values-hd {
  margin-bottom: 17px;
}
.cc-values-title {
  font-size: clamp(24px, 2.2vw, 40px);
  font-weight: 600;
  line-height: normal;
  color: var(--text-main);
  margin: 0;
}
.cc-values-en {
  font-size: clamp(13px, 1.1vw, 20px);
  font-weight: 400;
  opacity: 0.5;
  line-height: 40px;
  color: var(--text-main);
  margin: 0 0 22px;
}
.cc-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px 31px;
}
.cc-value-card {
  background: rgba(217, 217, 217, 0.20);
  padding: 33px 34px 30px 46px;
  box-sizing: border-box;
  min-height: 302px;
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}
.cc-value-icon-wrap {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: #CBA368;
  border-radius: 50%;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
  margin-bottom: 11px;
}
.cc-value-icon-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.cc-value-icon {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 42px;
  max-height: 42px;
}
.cc-value-title {
  font-size: clamp(16px, 1.3vw, 24px);
  font-weight: 700;
  line-height: 40px;
  color: var(--text-main);
  margin: 0 0 5px;
}
.cc-value-desc {
  font-size: clamp(12px, 0.8vw, 14px);
  line-height: 25px;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
}

/* ----------------------------------------------------------
   公司文化 — 平板响应式（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .cc-mission {
    height: auto;
    min-height: 240px;
    margin-bottom: 48px;
  }
  .cc-mission-card {
    left: 20px;
    top: 30px;
    width: min(300px, 60%);
    height: auto;
    padding: 28px 24px 28px 32px;
  }
  .cc-article { gap: 32px; padding-bottom: 40px; margin-bottom: 40px; }
  .cc-article-img { -webkit-flex: 0 0 240px; flex: 0 0 240px; width: 240px; }
  .cc-article-img img { height: 165px; }
  .cc-values-grid { gap: 18px; }
  .cc-value-card { padding: 24px 20px 24px 28px; min-height: 260px; }
}

/* ----------------------------------------------------------
   公司文化 — 移动端响应式（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .cc-mission {
    height: 200px;
    margin-bottom: 32px;
    margin-top: 16px;
  }
  .cc-mission-card {
    left: 12px;
    top: 20px;
    width: calc(100% - 24px);
    height: auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.92);
  }
  .cc-article {
    -webkit-flex-direction: column;
            flex-direction: column;
    gap: 16px;
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
  .cc-article-img {
    -webkit-flex: none;
            flex: none;
    width: 100%;
  }
  .cc-article-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .cc-article-desc { max-width: 100%; }
  .cc-values-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .cc-value-card {
    padding: 20px 14px;
    min-height: auto;
  }
  .cc-value-icon-wrap { width: 44px; height: 44px; margin-bottom: 8px; }
  .cc-value-icon { max-width: 32px; max-height: 32px; }
  .cc-value-title { font-size: 16px; line-height: 32px; }
  .cc-value-desc { font-size: 12px; line-height: 22px; }
}

/* ==========================================================
   ===  关于我们-荣誉资质页专属样式 (about-honor.html)  ===
   ========================================================== */

/* 覆盖 au-tab-wrap 底部间距（设计稿 tab 底~834px，卡片顶~874px，差 40px） */
.hz-section .au-tab-wrap { margin-bottom: 40px; }

/* 3 列证书卡片网格 */
.hz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px 38px;
  padding-bottom: 74px;
}

/* 单张证书卡片 */
.hz-card {
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: -webkit-flex;
  display:         flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
          align-items: center;
  padding: 25px 20px 19px;
  min-height: 353px;
  box-sizing: border-box;
}

/* 证书图片区（flex:1 充满上方空间，图片居中） */
.hz-card-img {
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  width: 100%;
}
.hz-card-img img {
  display: block;
  max-width: 100%;
  max-height: 267px;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 证书标题（20px，居中，与图片间距 13px） */
.hz-card-caption {
  font-size: 20px;
  font-weight: 400;
  color: var(--text-main);
  text-align: center;
  line-height: 30px;
  margin: 13px 0 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0;
}

/* ----------------------------------------------------------
   荣誉资质 — 平板响应式（768px ~ 1199px）
   ---------------------------------------------------------- */
@media (max-width: 1199px) {
  .hz-grid { gap: 32px 20px; padding-bottom: 60px; }
  .hz-card { padding: 20px 16px 16px; min-height: 260px; }
  .hz-card-img img { max-height: 200px; }
  .hz-card-caption { font-size: 16px; }
}

/* ----------------------------------------------------------
   荣誉资质 — 移动端响应式（< 768px）
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .hz-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 12px;
    padding-bottom: 48px;
  }
  .hz-card { padding: 16px 12px 12px; min-height: 180px; }
  .hz-card-img img { max-height: 130px; }
  .hz-card-caption { font-size: 13px; margin-top: 8px; }
}