/* ==========================================================================
   kelin-production-process 修正版
   --------------------------------------------------------------------------
   原代码的排版错乱由 3 处「写死的数据条数」造成，实测截图里的坐标可以完全对上：
     · 7 个编号圆点 x = 352/552/752/952/1152/1352/1552（间距正好 200px，一行放得下）
     · 第 1~5 条之间有 100px 连接线（x 403-502、603-702 …），第 6 条之后没有
     · 第 7 条没有圆点，它的标题比前 6 个高 61px（= em 的 36px + margin 25px）
     · 第二行居中飘着一个孤立的点（y≈528）和一条悬空线（y≈571）
   对应原因：
     1) 模板里 if not forloop.last 让最后一条不输出 <em>，标题少了 61px 占位；
     2) li:not(:nth-child(6)):not(:nth-child(9)) 是按「9 条数据、6+3 两行」写死的，
        数据变成 7 条后，第 6 条的线被误删、第 7 条该有的线没画；
     3) HTML 里补的 <li class="extra-line-item"> 是给 6 条数据打的补丁，
        现在变成第 8 个 li（8×200=1600 撑破容器），被挤到第二行居中显示。
   修法：数据有几条就画几条，行末的线按「每行 N 个」自动不画。
   ========================================================================== */

.kelin-production-process {
  padding: 70px 0;
  overflow: hidden;
  background: url(https://okki-shop.oss-accelerate.aliyuncs.com/category/370811/3959/3618964a6e82d911ddbdc5c7052bf581/%E8%83%8C%E6%99%AF.jpg) no-repeat center;
  background-size: cover;
}

.kelin-production-process .index-kelin-tit h3 { color: #000; }
.kelin-production-process .index-kelin-tit h3::before { background: #fff; }
.kelin-production-process .index-kelin-tit h3::after { background: #fff; }

/* ① 用 flex 换掉 inline-block + font-size:0：
      换行后每行仍然居中，也不用再靠 font-size:0 消掉标签间空白。
      max-width 用来锁死一行放几个（7 × 200px），配合 margin:auto 居中。 */
.kelin-production-process ul {
  position: relative;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1400px;
}

/* ② 尺寸固定，不再让内容把盒子撑开 */
.kelin-production-process ul li {
  flex: 0 0 200px;
  width: 200px;
  margin: 80px 0 0;
  text-align: center;
  position: relative;
}

/* ③ 连接线：默认每条都画，只在「行末」和「最后一条」隐藏（见下方两条规则） */
.kelin-production-process ul li::after {
  content: '';
  top: 86px;
  right: -50px;
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 2px;
  background: #1f456b;
}

/* ④ 每行第 7 个是行末，不画线；最后一条不画线。
      换行数改了（比如改成一屏 4 个）就把 7n 换成 4n，并在断点里各写一份。 */
.kelin-production-process ul li:nth-child(7n)::after,
.kelin-production-process ul li:last-child::after {
  display: none;
}

.kelin-production-process ul li img { height: 44px; }

.kelin-production-process ul li em {
  background: url(https://okki-shop.oss-accelerate.aliyuncs.com/category/370811/3959/25b92bb25bf853437502febf83c7ada7/58d6f72197833eae23c6ff5b3f7f118e.png) no-repeat center;
  width: 36px;
  height: 36px;
  display: block;
  margin: 25px auto 0;
}

.kelin-production-process ul li p {
  font-size: 17px;
  color: #1f456b;
  line-height: 24px;
  height: 48px;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 0;
}

.kelin-production-process .more {
  width: 198px;
  margin: 50px auto 0;
  background: color-mix(in srgb, var(--color-primary) 85%, transparent);
  height: 47px;
  line-height: 47px;
  box-sizing: border-box;
  display: block;
  color: #fff;
  font-size: 15px;
  text-align: center;
  border-radius: var(--button-radius);
}

.kelin-production-process .more:hover {
  background: color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.index-kelin-tit h3 { font-size: 36px; }

/* --------------------------------------------------------------------------
   窄屏：靠「max-width 锁死一行放几个 + 隐藏该行行末的线」保持整齐。
   7 条数据时依次是 7 / 6+1 / 4+3 / 2+2+2+1。
   以后步骤数变了，把 max-width 和对应的 N n 一起改就行。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
  /* 一行最多 6 个（6 × 200px） */
  .kelin-production-process ul { max-width: 1200px; }
  .kelin-production-process ul li:nth-child(6n)::after,
  .kelin-production-process ul li:last-child::after { display: none; }
}

@media screen and (max-width: 1024px) {
  /* 一行最多 4 个（4 × 200px） */
  .kelin-production-process ul { max-width: 800px; }
  .kelin-production-process ul li:nth-child(6n)::after { display: block; }
  .kelin-production-process ul li:nth-child(4n)::after,
  .kelin-production-process ul li:last-child::after { display: none; }
}

@media screen and (max-width: 640px) {
  /* 一行 2 个 */
  .kelin-production-process ul { max-width: none; }
  .kelin-production-process ul li { flex: 0 0 50%; width: 50%; }
  .kelin-production-process ul li:nth-child(4n)::after { display: block; }
  .kelin-production-process ul li:nth-child(2n)::after,
  .kelin-production-process ul li:last-child::after { display: none; }
  /* 一行两个时，线会顶到边缘，缩短一点更耐看 */
  .kelin-production-process ul li::after { right: -30px; width: 60px; }
}

/* --------------------------------------------------------------------------
   可选增强：页面底部的小脚本会给每一行的最后一个 li 加上 .is-row-end，
   由它隐藏行末的线。这样以后加减步骤条数，不必再改上面的 6n / 4n / 2n。
   写在文件最后，保证覆盖上面所有断点里的规则。
   -------------------------------------------------------------------------- */
.kelin-production-process ul li.is-row-end::after { display: none; }