.section-10 {
  background-image: url(../image/bg-130.png);
  background-repeat: no-repeat, no-repeat;
  /* background-position: center, center; */
  /* background-size: cover, cover; */
  padding: 0.81rem 7.9rem 0.76rem 2.6rem;
  position: relative;
  height: 9.6rem;
}
.section-10 .top {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}
.section-10 .top-title-text-1 {
  font-size: 0.48rem;
  font-weight: bold;
  line-height: normal;
  color: #ffffff;
}
.section-10 .top-title-text-2 {
  margin-top: 0.14rem;
  font-size: 0.16rem;
  font-weight: normal;
  line-height: normal;
  color: #ffffff;
  width: 4.8rem;
}
.section-10 .tag {
  position: absolute;
  width: 0.86rem;
  height: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #7de8ff 0%, #8bfaff 50%, #72e6ff 100%);
  box-shadow:
    0 0 0.18rem rgba(90, 244, 255, 0.5),
    inset 0 0 0.14rem rgba(255, 255, 255, 0.35);
  -webkit-clip-path: polygon(
    0.14rem 0,
    calc(100% - 0.14rem) 0,
    100% 50%,
    calc(100% - 0.14rem) 100%,
    0.14rem 100%,
    0 50%
  );
  clip-path: polygon(
    0.14rem 0,
    calc(100% - 0.14rem) 0,
    100% 50%,
    calc(100% - 0.14rem) 100%,
    0.14rem 100%,
    0 50%
  );
  cursor: pointer;
  transition: transform 0.3s ease;
}

/* 仅在入场动画完成后，才应用呼吸灯动画，避免与 reveal-up 的 transform/opacity 冲突 */
.section-10 .tag.is-revealed {
  animation: tag-breathing 2.5s infinite ease-in-out;
}

@keyframes tag-breathing {
  0% {
    transform: scale(1);
    filter: brightness(0.8);
    box-shadow: inset 0 0 0.05rem rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
    box-shadow: inset 0 0 0.2rem rgba(255, 255, 255, 0.8);
  }
  100% {
    transform: scale(1);
    filter: brightness(0.8);
    box-shadow: inset 0 0 0.05rem rgba(255, 255, 255, 0.2);
  }
}

/* 各城市 Tag 的具体定位 (可根据实际地图底图调整百分比) */
.section-10 .tag-shanghai {  top: 60%;left: 67%; }
.section-10 .tag-guangzhou { top: 69%;left: 60%; }
.section-10 .tag-shenzhen {  top: 73%;left: 60%; }
.section-10 .tag-beijing { top: 43%;  left: 62%; }
.section-10 .tag-ningbo { top: 64%;left: 67%; }
.section-10 .tag-wuhan {  top: 59%;left: 60%; }
.section-10 .tag-qingdao { top: 48%; left: 68%; }
.section-10 .tag-tianjin { top: 47%; left: 63%; }
.section-10 .tag-dalian {  top: 43%;left: 68%; }
.section-10 .tag-kunshan { top: 57%;left: 65%; }

/* 为已入场的元素错开呼吸动画的延迟，避免同时放大，且预留 1.5s 等待入场动画结束 */
.section-10 .tag-shanghai.is-revealed { animation-delay: 1.5s; }
.section-10 .tag-guangzhou.is-revealed { animation-delay: 1.7s; }
.section-10 .tag-shenzhen.is-revealed { animation-delay: 1.9s; }
.section-10 .tag-beijing.is-revealed { animation-delay: 2.1s; }
.section-10 .tag-ningbo.is-revealed { animation-delay: 2.3s; }
.section-10 .tag-wuhan.is-revealed { animation-delay: 2.5s; }
.section-10 .tag-qingdao.is-revealed { animation-delay: 2.7s; }
.section-10 .tag-tianjin.is-revealed { animation-delay: 2.9s; }
.section-10 .tag-dalian.is-revealed { animation-delay: 3.1s; }
.section-10 .tag-kunshan.is-revealed { animation-delay: 3.3s; }

.section-10 .tag::before,
.section-10 .tag::after {
  content: "";
  position: absolute;
  top: 0.07rem;
  width: 0.18rem;
  height: 0.34rem;
  background: rgba(255, 255, 255, 0.22);
  filter: blur(1px);
}

.section-10 .tag::before {
  left: 0.1rem;
  transform: skewX(-28deg);
}

.section-10 .tag::after {
  right: 0.1rem;
  transform: skewX(28deg);
}

.section-10 .tag span {
  position: relative;
  z-index: 1;
  font-size: 0.16rem;
  font-weight: 600;
  line-height: normal;
  color: #3662ec;
  color: #2d57d9;
  letter-spacing: 1px;
}

/* Tag 动态扫光层 */
.section-10 .tag .light-sweep {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  z-index: 2;
  pointer-events: none;
}

/* Tag 悬浮特效 */
.section-10 .tag:hover {
  animation: none;
  transform: translateY(-0.04rem) scale(1.05);
  filter: brightness(1.1);
  box-shadow:
    0 0.08rem 0.24rem rgba(90, 244, 255, 0.6),
    inset 0 0 0.18rem rgba(255, 255, 255, 0.5);
}

.section-10 .tag:hover .light-sweep {
  left: 150%;
}

.section-10 .tag:active {
  transform: translateY(-1px) scale(0.98);
}

.section-4 .bottom-btn .hero-action,
.section-5 .bottom-btn .hero-action,
.section-6 .bottom-btn .hero-action,
.section-9 .bottom-btn .hero-action,
.section-10 .bottom-btn .hero-action,
.section-11 .bottom-btn .hero-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 2.41rem;
  height: 0.54rem;
  border-radius: 0.04rem;
  font-size: 0.24rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    color 0.3s ease,
    filter 0.3s ease;
}

.section-4 .bottom-btn .hero-action span,
.section-5 .bottom-btn .hero-action span,
.section-6 .bottom-btn .hero-action span,
.section-9 .bottom-btn .hero-action span,
.section-10 .bottom-btn .hero-action span,
.section-11 .bottom-btn .hero-action span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
}

.section-4 .bottom-btn .hero-action img,
.section-5 .bottom-btn .hero-action img,
.section-6 .bottom-btn .hero-action img,
.section-9 .bottom-btn .hero-action img,
.section-10 .bottom-btn .hero-action img,
.section-11 .bottom-btn .hero-action img {
  display: block;
  flex-shrink: 0;
}

.section-4 .bottom-btn .hero-action::after,
.section-5 .bottom-btn .hero-action::after,
.section-6 .bottom-btn .hero-action::after,
.section-9 .bottom-btn .hero-action::after,
.section-10 .bottom-btn .hero-action::after,
.section-11 .bottom-btn .hero-action::after {
  content: "";
  position: absolute;
  top: 0;
  left: -42%;
  width: 36%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left 0.42s ease;
}

.section-4 .bottom-btn .hero-action-primary,
.section-5 .bottom-btn .hero-action-primary,
.section-6 .bottom-btn .hero-action-primary,
.section-9 .bottom-btn .hero-action-primary,
.section-10 .bottom-btn .hero-action-primary,
.section-11 .bottom-btn .hero-action-primary {
  background: linear-gradient(270deg, #0182ff 0%, #006eff 100%);
  box-shadow: inset 0 0 0.03rem rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.18rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
}

.section-4 .bottom-btn .hero-action-primary::before,
.section-5 .bottom-btn .hero-action-primary::before,
.section-6 .bottom-btn .hero-action-primary::before,
.section-9 .bottom-btn .hero-action-primary::before,
.section-10 .bottom-btn .hero-action-primary::before,
.section-11 .bottom-btn .hero-action-primary::before {
  content: "";
  position: absolute;
  bottom: -0.15rem;
  left: 0;
  width: 100%;
  height: 50%;
  background-image: url("../image/btn-bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  mix-blend-mode: screen;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.section-4 .bottom-btn .hero-action-primary span,
.section-4 .bottom-btn .hero-action-primary img,
.section-5 .bottom-btn .hero-action-primary span,
.section-5 .bottom-btn .hero-action-primary img,
.section-6 .bottom-btn .hero-action-primary span,
.section-6 .bottom-btn .hero-action-primary img,
.section-9 .bottom-btn .hero-action-primary span,
.section-9 .bottom-btn .hero-action-primary img,
.section-10 .bottom-btn .hero-action-primary span,
.section-10 .bottom-btn .hero-action-primary img,
.section-11 .bottom-btn .hero-action-primary span,
.section-11 .bottom-btn .hero-action-primary img {
  position: relative;
  z-index: 1;
}

.section-4 .bottom-btn .hero-action:hover,
.section-5 .bottom-btn .hero-action:hover,
.section-6 .bottom-btn .hero-action:hover,
.section-9 .bottom-btn .hero-action:hover,
.section-10 .bottom-btn .hero-action:hover,
.section-11 .bottom-btn .hero-action:hover
 {
  transform: translateY(-0.05rem) scale(1.03);
}

.section-4 .bottom-btn .hero-action:hover::after,
.section-5 .bottom-btn .hero-action:hover::after,
.section-6 .bottom-btn .hero-action:hover::after,
.section-9 .bottom-btn .hero-action:hover::after,
.section-10 .bottom-btn .hero-action:hover::after,
.section-11 .bottom-btn .hero-action:hover::after
 {
  left: 118%;
}

.section-4 .bottom-btn .hero-action-primary:hover,
.section-5 .bottom-btn .hero-action-primary:hover,
.section-6 .bottom-btn .hero-action-primary:hover,
.section-9 .bottom-btn .hero-action-primary:hover,
.section-10 .bottom-btn .hero-action-primary:hover,
.section-11 .bottom-btn .hero-action-primary:hover
 {
  background: linear-gradient(270deg, #1791ff 0%, #1677ff 100%);
  box-shadow:
    0 0.2rem 0.4rem rgba(20, 103, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  filter: brightness(1.04);
}

.section-4 .bottom-btn .hero-action-primary:hover::before,
.section-5 .bottom-btn .hero-action-primary:hover::before,
.section-6 .bottom-btn .hero-action-primary:hover::before,
.section-9 .bottom-btn .hero-action-primary:hover::before,
.section-10 .bottom-btn .hero-action-primary:hover::before,
.section-11 .bottom-btn .hero-action-primary:hover::before
 {
  opacity: 1;
  transform: scale(1.08);
}

.section-4 .bottom-btn .hero-action:active,
.section-5 .bottom-btn .hero-action:active,
.section-6 .bottom-btn .hero-action:active,
.section-9 .bottom-btn .hero-action:active,
.section-10 .bottom-btn .hero-action:active,
.section-11 .bottom-btn .hero-action:active
  {
  transform: translateY(-1px) scale(0.99);
}