/* 品牌营销页面样式 - ppyx.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ==================== 首屏 ==================== */
/* 高度 / 定位 / 字号 / 按钮等结构样式统一在公共 style.css 的 .hero 系列（内页共用同一套：
   hero 560 高、文字块 @top188、标题 48px、副标题 24px、按钮 145×48 @top356），这里只定义本页背景 */
.hero {
  background: #eef3fb url('../img/ppyx/61620960.jpg') 50% 50%/cover no-repeat;
}

/* ==================== 定制化品牌服务 ==================== */
.brand {
  padding: 80px 0 18px;
  background: #fff;
}

/* 设计稿：标题块顶 80、h2 36px/1.75、副标题 16px/1.75 → 标签行顶 200 */
.brand .sec-title {
  margin-bottom: 29px;
}

.brand .sec-title h2 {
  line-height: 1.75;
}

.brand .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 标签：4 枚独立胶囊 160×48、间距 20、整组居中；当前项底色 #f6f7fa（无描边）
   胶囊内：图标 26×26 左缩进 25，文字 18px 加粗距图标 7 */
.brand-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.brand-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 160px;
  height: 48px;
  padding: 0 0 0 25px;
  border: 0;
  border-radius: 200px;
  background: transparent;
  cursor: pointer;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1d2129;
  transition: background-color .2s;
}

.brand-tab img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.brand-tab.active {
  background: #f6f7fa;
  color: #1d2129;
}

/* 面板：1400×620、radius 20、1px #ededee 描边；
   左列内容 x32（h3 顶 84 / 副文 128 / 分隔线 202 / 三条目 226·318·411 / 按钮 520），
   插图 600×547 定位于 (752,40) */
.brand-panel {
  position: relative;
  margin-top: 52px;
  min-height: 620px;
  border: 1px solid #ededee;
  border-radius: 20px;
  background: url('../img/ppyx/61614632.jpg') 50% 50%/cover no-repeat;
  /* brand-panel-pad：桌面档面板高由 min-height 620 撑定（首屏文案只占 568），底部本就空 50px；
     其余三组 tab 的文案更长（实测文本块 646），没有下内距时按钮会**贴着面板下边框**。
     补 40px 后内容 568+40=608 < 620 ⇒ 默认态面板高度、各元素盒子**逐像素不变**；
     长文案档面板按内容长高（646+2+40=688），底部留出 40px 呼吸位。
     ≤1399 起该规则整体被内距覆盖，不受影响。 */
  padding: 0 48px 40px 31px;
}

.brand-panel__text {
  width: 636px;
  padding-top: 85px;
}

.brand-panel__text h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1d2129;
  line-height: 1;
}

.brand-panel__text>p {
  margin-top: 15px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 26px;
}

.brand-divider {
  width: 636px;
  height: 1px;
  margin-top: 21px;
  background: #dddddd;
}

.brand-points {
  margin-top: 25px;
}

.brand-points li {
  position: relative;
}

.brand-points li+li {
  margin-top: 28px;
}

.brand-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  background: url('../img/ppyx/61614267.png') center/contain no-repeat;
}

.brand-points h4 {
  padding-left: 43px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1d2129;
  line-height: 26px;
}

.brand-points p {
  margin-top: 12px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 26px;
}

.panel-btn {
  margin-top: 45px;
  width: 145px;
  height: 48px;
  padding: 0;
  border-radius: 8px;
  font-size: 18px;
}

.brand-panel__pic {
  position: absolute;
  top: 39px;
  right: 47px;
  width: 600px;
}

/* 设计稿该图组件自带 10px 圆角（其余图片组件为 1px，不可通用化） */
.brand-panel__pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ==================== 实力铸就口碑 ==================== */
.strength {
  padding: 80px 0 104px;
  background: #fff;
}

/* 设计稿标题块顶 80，卡片顶 240（h2/副标题行高 1.75） */
.strength .sec-title {
  margin-bottom: 69px;
}

.strength .sec-title h2 {
  line-height: 1.75;
}

.strength .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 4 张 335×400 卡、间距 20、无描边 */
.str-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.str-card {
  min-height: 400px;
  border-radius: 20px;
  padding: 49px 29px 0 32px;
  overflow: hidden;
}

/* 设计稿为整卡高度纵向渐变（顶浅底深），非纯色 */
.str-card--a {
  background: linear-gradient(180deg, #f2f8ff, #cadefc);
}

.str-card--b {
  background: linear-gradient(180deg, #f3fbff, #c9ebfc);
}

.str-card--c {
  background: linear-gradient(180deg, #edeefc, #cfc5fd);
}

.str-card--d {
  background: linear-gradient(180deg, #f3f8ff, #dcebff);
}

.str-card h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1d2129;
  line-height: 28px;
}

.str-card p {
  margin-top: 23px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px;
  color: #636e80;
  line-height: 25px;
}

/* 插图：设计稿为 271×168 的白底图（cover 裁切）＋四角 10px 圆角，
   不是满宽出血，也不是只圆上面两角 */
.str-card img {
  display: block;
  width: 271px;
  max-width: 100%;
  height: 168px;
  margin-top: 21px;
  object-fit: cover;
  border-radius: 10px;
}

/* 「实力铸就口碑」四张卡：滚入视口时整块自下而上飞入（不分卡片错峰）。
   · 待命位挂在 html.js 下 ⇒ 无 JS 时卡片照常可见；只动 opacity / translateY ⇒ 盒模型零位移。
   · 曲线 / 时长 / 位移与首页 .adv-row、.nm-grid 同一套（40px / .7s / cubic-bezier(.22,.61,.36,1)）。
   · 尊重「减少动态效果」。 */
@media (prefers-reduced-motion: no-preference) {

  .js .str-list {
    opacity: 0;
    transform: translateY(40px);
  }

  .js .str-list.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
  }
}

/* ==================== 专项服务保障 ==================== */
.guard {
  padding: 80px 0 150px;
  background: #f5f9ff url('../img/ppyx/61628899.png') 50% 50%/cover no-repeat;
}

/* 设计稿标题块顶 80、卡片顶 240 */
.guard .sec-title {
  margin-bottom: 69px;
}

.guard .sec-title h2 {
  line-height: 1.75;
}

.guard .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 4 张 690×280 卡（2×2、间距 20），1px 白描边、radius 20 */
.guard-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.guard-card {
  --pad: 105px;
  position: relative;
  height: 280px;
  border: 1px solid #fff;
  border-radius: 20px;
  box-shadow: 0 5px 10px rgba(202, 222, 252, .3);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  padding: var(--pad) 32px 0;
}

.guard-card--a {
  background-image: url('../img/ppyx/61629167.jpg');
}

.guard-card--b {
  background-image: url('../img/ppyx/61629469.jpg');
}

.guard-card--c {
  background-image: url('../img/ppyx/61629302.jpg');
}

.guard-card--d {
  background-image: url('../img/ppyx/61629528.jpg');
}

/* 标题下沿的高亮胶囊：设计稿 120×10、radius 200、卡内 (32,130)，压在两行正文与标题之间 */
.guard-card::before {
  content: "";
  position: absolute;
  left: 32px;
  top: calc(var(--pad) + 25px);
  z-index: 1;
  width: 120px;
  height: 10px;
  border-radius: 200px;
}

.guard-card--a::before {
  background: #c6e0ff;
}

.guard-card--b::before {
  background: rgba(169, 230, 255, .9);
}

.guard-card--c::before {
  background: rgb(255, 211, 150);
}

.guard-card--d::before {
  background: rgb(222, 223, 253);
}

.guard-card h4 {
  position: relative;
  z-index: 2;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1d2129;
  line-height: 28px;
}

.guard-card p {
  position: relative;
  z-index: 2;
  margin-top: 21px;
  max-width: 575px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px;
  color: #636e80;
  line-height: 28px;
}



/* ========== 合作品牌 logo「无缝」循环滚动 ==========
   结构：.logo-wall 可视窗口（两侧硬边收口，不做渐隐）
           └ .logo-row 轨道（width:max-content，内放 N 份相同 logo 组）
   做法：轨道整体移动恰好一份（-100% / var(--logo-copies)），移满一份后与起点逐像素重合 ⇒ 首尾严丝合缝。
        N 与动画时长由 ppyx.js 按实测宽度写入；位移是纯 CSS 动画走合成层，无需第三方滚动插件。
   ⚠️ 关键帧的百分比以 .logo-row 自身宽度为基准 ⇒ 不能用 px 写死位移。
   ⚠️ 本页原站只有两排、且两排都是 1400 全宽 ⇒ 没有窄排，所以不加 .logo-band。 */
.logo-wall {
  margin-top: 50px;
  overflow: hidden;
}

.logo-row {
  --logo-copies: 2;
  /* 轨道里 logo 组的份数（ppyx.js 按窗口宽度写入） */
  --logo-dur: 40s;
  /* 移动一份所需时间（ppyx.js 按组宽写入，保证各排速度一致） */
  display: flex;
  align-items: center;
  width: max-content;
  height: 107px;
  animation: logo-marquee var(--logo-dur) linear infinite;
}

@keyframes logo-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-100% / var(--logo-copies)), 0, 0);
  }
}

/* 中排反向（向右）滚动：从「−一份」走到 0，起止两端同样相差整数份，接缝照旧严丝合缝 */
.logo-row--reverse {
  animation-direction: reverse;
}

/* 尊重「减少动态效果」偏好：停住不动，此时轨道停在起点，与静态排版完全一致 */
@media (prefers-reduced-motion: reduce) {
  .logo-row {
    animation: none;
  }
}

.logo-row+.logo-row {
  margin-top: 12px;
}

/* logo 图尺寸取自原站轮播配置：$SlideWidth 190 + $SlideSpacing 10 ⇒ 排列周期 200px。
   ⚠️ 宽高必须成对给：素材 248×134（1.851），只写 width 时 object-fit:contain 会受高度限制；高度 = 宽 / 1.851。
   ⚠️ margin: 0 5px（左右合计 10px）即原站 $SlideSpacing，各断点一致。 */
.logo-row img {
  width: 190px;
  height: 103px;
  object-fit: contain;
  flex-shrink: 0;
  margin: 0 5px;
  filter: grayscale(.1);
}


/* ==================== 简单4步 + 常见问题 ==================== */
.steps {
  padding: 80px 0 88px;
  background: #fff;
  overflow: hidden;
}

/* 设计稿标题块顶 80，步骤行顶 220，FAO 标题顶 392，FAQ 列表顶 522 */
.steps .sec-title {
  margin-bottom: 49px;
}

.steps .sec-title h2 {
  line-height: 1.75;
}

.steps .sec-title p {
  margin-top: 0;
  line-height: 1.75;
}

/* 4 张 365×100 步骤、间距 20（第 4 张右侧溢出容器，由区块 overflow 裁掉） */
.step-list {
  display: grid;
  grid-template-columns: repeat(4, 365px);
  gap: 20px;
}

/* 卡内为「标题 211 + 虚线箭头 150×12」一行，说明换行到下一行 */
.step-item {
  position: relative;
  display: grid;
  grid-template-columns: 211px 150px;
  align-items: center;
  align-content: start;
  min-height: 100px;
}

.step-item h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  line-height: 26px;
}

.step-item h4 span {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: inherit;
  margin-right: 6px;
}

.step-item img {
  width: 150px;
  height: 12px;
  object-fit: fill;
}

.step-item p {
  grid-column: 1 / -1;
  margin-top: 13px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px;
  color: #636e80;
  line-height: 22px;
}

.step-item:last-child img {
  display: none;
}

/* ==================== 响应式适配 ==================== */
@media (max-width: 1399px) {
  .hero {
    background-position: 62% 50%;
  }

  .brand {
    padding: 64px 0 16px;
  }

  /* brand-panel-half：文字列与插图列各占一半。
   ⚠️ 两列都写 flex: 1 1 0（flex-basis 为 0 时两列均分「内容宽 − gap」，与文字长短无关），min-width:0 挡掉 min-content 顶宽。
   ⚠️ 必须同时把插图的 max-width:520px 取消（→ none）：1200~1399 右列半宽已达 513~612，留着 520 会把右列卡住。 */
  .brand-panel {
    min-height: 0;
    padding: 44px 36px 48px;
    display: flex;
    align-items: center;
    gap: 36px;
  }

  .brand-panel__text {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    padding-top: 0;
  }

  .brand-divider {
    width: 100%;
  }

  .brand-panel__pic {
    position: static;
    top: auto;
    right: auto;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
  }

  .str-card {
    min-height: 0;
    padding: 36px 26px 32px;
  }

  .str-card h4 {
    font-size: 24px;
    line-height: 1.3;
  }

  .str-card p {
    margin-top: 18px;
    font-size: 15px;
    line-height: 24px;
  }

  .str-card img {
    width: 100%;
    height: 168px;
    margin-top: 18px;
  }

  .guard-card {
    --pad: 40px;
    height: auto;
    padding: var(--pad) 36px 44px;
  }

  .guard-card h4 {
    font-size: 23px;
    line-height: 1.3;
  }

  .guard-card p {
    margin-top: 14px;
    font-size: 15px;
    line-height: 24px;
  }

  .step-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .step-item {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    min-height: 0;
  }

  .step-item h4 {
    font-size: 20px;
  }

  .step-item h4 span {
    font-size: 20px;
  }

  .step-item img {
    width: 100%;
    max-width: 150px;
  }

  .step-item p {
    font-size: 13px;
    margin-top: 12px;
  }
}

@media (max-width: 1199px) {
  /* .brand-panel 的「图在上、文在下」堆叠态已下移到 ≤991 块（见 brand-panel-stack：）——
     本轮把「左右各占一半」的两栏一直下探到 992px，故 992~1199 不再堆叠。 */

  .str-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .str-card img {
    /* max-width: 271px;
    height: 160px; */
    max-width: 100%;
    height: auto;
  }

  /* .guard-list {
    grid-template-columns: 1fr;
  } */

  .guard-card p {
    max-width: 100%;
  }
}

@media (max-width: 991px) {
  .hero {
    background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .6)),
      url('../img/ppyx/61620960.jpg');
    background-position: 50% 50%, 68% 50%;
    background-size: cover, cover;
  }

  .brand-tab {
    width: auto;
    padding: 0 20px;
    font-size: 16px;
  }

  .brand-tab img {
    width: 24px;
    height: 24px;
  }

  /* brand-panel-stack：≤991 回到「图在上、文在下」单列。
   ⚠️ 必须显式复位 flex：≤1399 块的 flex: 1 1 0 在 column 方向连高度基准一起压成 0，不复位面板会塌成一条。
      text 复位 1 1 auto、pic 复位 none。 */
  /* brand-panel-bg：≤991 背景由底图换成纯色 #eaf4fe。
   底图 61614632.jpg 是「左近白 → 右浅蓝」的横向渐变；面板 ≤991 转单列后 cover 按高度放大 2.05 倍，
   横向只截到渐变过渡带中段 ⇒ 面板正中压在过渡最陡处，左右两半出现一条竖向色界，与内容毫无关系。
   纯色取渐变中位色 #eaf4fe（与 ≤767 取值完全一致）；border / 圆角 / 内距不变，只换涂装。 */
  .brand-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    background: #eaf4fe;
  }

  .brand-panel__text {
    flex: 1 1 auto;
  }

  .brand-panel__pic {
    flex: none;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    order: -1;
  }

  .guard-card p {
    max-width: 100%;
  }

  .step-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 20px;
  }

  /* step-badge-2x2：≤991 收成 2 列后每张卡宽 461.5、标题却仍只有 148.25px（auto 轨道按 h4 的 max-content 定），
   虚线箭头素材被 ≤1399 的 max-width:150px 卡住 ⇒ 悬在半空；第 2 张的箭头还指向容器右缘外侧、等于指空。
   ⇒ 2×2 这一档不再用「横向箭头」这套语言，改用与 ≤767 手机端时间轴同一套「蓝色序号圆点 + 标题 + 缩进说明」，四宫格左右对称。
   ⚠️ 这里的轴向数值与 ≤767 那条逐字相同，且 ≤767 写在文件更靠后 ⇒ 手机端逐像素不变。 */
  .step-item h4 {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    font-size: 17px;
    line-height: 1.4;
  }

  .step-item h4 span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d97ff, #376aff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(55, 106, 255, .28);
    position: relative;
    z-index: 1;
  }

  .step-item img {
    display: none;
  }

  .step-item p {
    margin-top: 9px;
    padding-left: 54px;
  }
}

@media (max-width: 767px) {

  .brand {
    padding: 44px 0 40px;
  }

  .brand-tabs {
    gap: 10px;
  }

  .brand-tab {
    flex: 1 1 40%;
    justify-content: center;
    width: auto;
    height: 44px;
    padding: 0 12px;
    font-size: 14px;
    gap: 6px;
  }

  .brand-tab img {
    width: 20px;
    height: 20px;
  }

  .brand-panel {
    /* tabs 底 → 面板顶：原 52px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
    margin-top: 28px;
    padding: 24px 18px 28px;
    gap: 22px;
    /* 底色 #eaf4fe 已上移到 ≤991 块（见 brand-panel-bg：），此处不再重复声明 */
  }

  .brand-panel__text h3 {
    font-size: 20px;
  }

  .brand-panel__text>p {
    font-size: 14px;
    margin-top: 10px;
    line-height: 24px;
  }

  .brand-divider {
    margin-top: 16px;
  }

  .brand-points {
    margin-top: 18px;
  }

  /* 窄屏对勾定位：图标 20px 钉在 li 左缘（abs 定位不受 padding 影响），
     ① 竖向与标题首行居中：行高 26 → top = (26−20)/2 = 3（原 top:0 使视觉偏上 4px）；
     ② 标题取消桌面 43px 的悬挂缩进 —— 改前左边界三档（图标 0 / 正文 30 / 标题 73）不齐，
        现在图标在 0、标题与正文同在 32，标题右移量为 12px，图标右侧留白均衡 */
  .brand-points li {
    padding-left: 32px;
  }

  .brand-points li+li {
    margin-top: 16px;
  }

  .brand-points li::before {
    width: 20px;
    height: 20px;
    top: 3px;
  }

  .brand-points h4 {
    padding-left: 0;
    font-size: 18px;
  }

  .brand-points p {
    font-size: 14px;
    line-height: 22px;
  }

  .panel-btn {
    margin-top: 24px;
    height: 44px;
    font-size: 16px;
    width: 100%;
  }

  .strength {
    padding: 44px 0 52px;
  }

  /* 标题底 → 列表顶：原 69px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .strength .sec-title {
    margin-bottom: 28px;
  }

  .str-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .str-card {
    padding: 22px 18px 24px;
  }

  .str-card h4 {
    font-size: 20px;
  }

  .str-card p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 22px;
  }

  .str-card img {
    width: 100%;
    max-width: 100%;
    height: 150px;
    margin: auto;
    margin-top: 16px;
  }

  .guard {
    padding: 44px 0 40px;
  }

  /* 标题底 → 列表顶：原 69px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .guard .sec-title {
    margin-bottom: 28px;
  }

  .guard-list {
    gap: 14px;
    grid-template-columns: 1fr;
  }

  /* 卡片：内距收到 22/18/24，重排「标题→高亮胶囊→正文」节奏（胶囊紧贴标题下沿，
     正文与胶囊留 8px）；底图 690×320 左侧 60% 为纯白、插画落在右下，
     按卡宽等比放大到 min(108%, 410px) 并右下角对齐 ——
     插画整幅落在正文下方、右缘出血，卡片不再「上紧下空、插画缩在角落」。 */
  .guard-card {
    --pad: 22px;
    padding: var(--pad) 18px 24px;
    min-height: 232px;
    /* background-size: min(108%, 410px) auto; */
    background-position: 100% 100%;
  }

  .guard-card::before {
    left: 18px;
    top: calc(var(--pad) + 20px);
    width: 84px;
  }

  .guard-card h4 {
    font-size: 20px;
  }

  .guard-card p {
    font-size: 14px;
    line-height: 22px;
    margin-top: 18px;
  }

  /* 卡片变窄后取消设计稿的硬换行，交给浏览器折行 */
  .guard-card p br {
    display: none;
  }

  .logo-wall {
    margin-top: 30px;
  }

  .steps {
    padding: 44px 0 56px;
  }

  /* 标题底 → 步骤列表：原 49px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .steps .sec-title {
    margin-bottom: 28px;
  }

  /* 单列后横向虚线箭头「指向右」已无意义 → 改成竖向时间轴：
     左侧蓝色圆形序号 + 序号之间的竖向虚线（呼应桌面端虚线连接语言），与 SEM 页一致 */
  .step-list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .step-item {
    display: block;
    padding-bottom: 22px;
  }

  .step-item:last-child {
    padding-bottom: 0;
  }

  .step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 46px;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(180deg, rgba(55, 106, 255, .32) 0 5px, rgba(55, 106, 255, 0) 5px 11px);
  }

  .step-item h4 {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    font-size: 18px;
    line-height: 1.4;
  }

  .step-item h4 span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6d97ff, #376aff);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(55, 106, 255, .28);
    position: relative;
    z-index: 1;
  }

  .step-item img {
    display: none;
  }

  .step-item p {
    margin-top: 9px;
    padding-left: 54px;
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 479px) {
  .brand-tab {
    flex: 1 1 40%;
    justify-content: center;
  }

  .brand-panel {
    margin-top: 22px;
  }

  .strength .sec-title {
    margin-bottom: 22px;
  }

  .guard .sec-title {
    margin-bottom: 22px;
  }

  .guard-card {
    min-height: 180px;
  }

  .steps .sec-title {
    margin-bottom: 22px;
  }

  .str-list {
    grid-template-columns: 1fr;
  }

  .industry-tab {
    padding: 0 12px;
    font-size: 14px;
  }
}

/* logo-row-narrow */
/* 「合作品牌」logo 三档尺寸（≥992 / ≤991 / ≤479）：原站 $SlideWidth 190 起的等比阶梯 190 / 154 / 124，行高紧跟图高 107 / 84 / 68。
   ⚠️ 本块必须放在文件末尾：同优先级下靠后的媒体查询才能压过前面区块里的旧声明。 */
@media (max-width: 991px) {
  .logo-row {
    height: 84px;
  }

  .logo-row+.logo-row {
    margin-top: 8px;
  }

  .logo-row img {
    width: 154px;
    height: 83px;
  }
}

@media (max-width: 479px) {
  .logo-row {
    height: 68px;
  }

  .logo-row+.logo-row {
    margin-top: 6px;
  }

  .logo-row img {
    width: 124px;
    height: 67px;
  }
}