.kerun-section {
  display: flex;
  /* 改进：将 align-items 改为 stretch，以确保 .img 和 .text 容器高度一致 */
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.kerun-section.reverse {
  flex-direction: row-reverse;
}
.kerun-section .img {
  flex: 1 1 40%;
  text-align: center;
  /* 改进：设置 .img 容器为 flex 布局，并让其内容垂直居中 */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; /* 保持图片在 .img 容器内垂直居中 */
  gap: 10px; /* 图片之间的间距 */
  /* 确保 .img 容器的高度被拉伸到与 .text 容器一致 */
  min-height: 1px; /* 确保 flex item 能够被拉伸 */
}
.kerun-section .img img {
  /* 移除原有的单图限制，让 flex 布局控制 */
  width: auto;
  max-width: none;
  height: 100%; /* 改进：让图片高度填充父容器 .img 的高度 */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  object-fit: cover; /* 确保图片覆盖空间并保持比例 */
}

/* 针对单张图片的情况 */
.kerun-section .img img:only-child {
  /* 只有一张图时，恢复原有的样式，占据 100% 宽度，最大 500px */
  width: 100%;
  max-width: 500px;
  flex: 0 0 auto;
  height: auto; /* 恢复自动高度，避免拉伸 */
}

/* 针对两张图片并排的情况（图文并存） */
/* 默认情况下，我们假设图片数量 <= 2，让它们平分空间 */
.kerun-section .img > img {
    /* 默认两图布局：每张图片占据 50% 减去间距 */
    flex: 1 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    /* height: 100%; 已经在通用 img 样式中设置 */
}

/* 针对三张及以上图片并排的情况 */
/* 存在第三张图时，覆盖默认的两图布局，让所有图片平分空间 */
.kerun-section .img > img:nth-child(3),
.kerun-section .img > img:nth-child(3) ~ img {
    /* 三图布局：每张图片占据 33.333% 减去间距 */
    flex: 1 1 calc(33.333% - 6.666px);
    max-width: calc(33.333% - 6.666px);
    /* height: 100%; 已经在通用 img 样式中设置 */
}

/* 确保单图样式优先级最高 */
.kerun-section .img img:only-child {
    flex: 0 0 auto;
    max-width: 500px;
    height: auto;
}

.kerun-section .text {
  flex: 1 1 50%;
}
.kerun-section h2 {
  color: #004080;
  margin-bottom: 20px;
}
.kerun-section p {
  line-height: 1.8;
  font-size: 14px;
  color:#333;
  font-family:'Microsoft YaHei',sans-serif;
}

/* ---------- 移动端响应式 ---------- */
@media (max-width: 768px) {
  .kerun-section {
    flex-direction: column !important;
    text-align: left !important;
    align-items: flex-start !important; /* 移动端不需要拉伸，改为靠左对齐 */
  }
  .kerun-section.reverse {
    flex-direction: column !important;
  }
  .kerun-section .img,
  .kerun-section .text {
    flex: 1 1 100% !important;
  }
  .kerun-section .img img {
    max-width: 100% !important;
  }
  /* 移动端多图布局：全部堆叠或保持并排（更常见） */
  .kerun-section .img {
      gap: 5px; /* 移动端间距减小 */
  }
  /* 移动端两图并排 */
  .kerun-section .img > img {
      flex: 1 1 calc(50% - 2.5px) !important;
      max-width: calc(50% - 2.5px) !important;
      height: auto !important; /* 移动端恢复自动高度 */
  }
  /* 移动端三图并排 */
  .kerun-section .img > img:nth-child(3),
  .kerun-section .img > img:nth-child(3) ~ img {
      flex: 1 1 calc(33.333% - 3.333px) !important;
      max-width: calc(33.333% - 3.333px) !important;
      height: auto !important; /* 移动端恢复自动高度 */
  }
  /* 移动端单图恢复 */
  .kerun-section .img img:only-child {
      flex: 0 0 auto !important;
      max-width: 100% !important;
      height: auto !important;
  }
}