body {
  font-family: MiSans;
  line-height: 1.2;
}
.section-title {
  font-family: MiSans;
  font-size: 0.64rem !important;
  font-weight: 900;
  text-align: center;
  color: #4F4D4D;
  margin-bottom: 0.08rem;
  letter-spacing: 0.02rem;
}
.section-desc {
  font-family: MiSans;
  font-size: 0.36rem;
  text-align: center;
  color: #3D3D3D;
  margin-bottom: 0.54rem;
  letter-spacing: 0.01rem;
}
.classroom-service-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  background: url('../img/classroom-service/bg.png') center center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: MiSans;
}

.classroom-service-banner::after {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0;
  bottom: 0;
  opacity: 1;
  background: linear-gradient(90deg, rgba(95, 184, 40, 0.9) 22%, rgba(95, 184, 40, 0.792) 61%, rgba(95, 184, 40, 0.18) 100%);
}

.banner-content {
  width: 100%;
  padding: 0.6rem 0.44rem 0.4rem 1.33rem;
  text-align: left;
  position: relative;
  z-index: 1;
}

.banner-title {
  font-family: MiSans;
  font-size: 1.2rem;
  font-weight: bold;
  background: #fff;
  color: #38b449;
  display: inline-block;
  padding: 0.16rem 0.39rem;
  line-height: 1;
}

.banner-desc {
  font-size: 0.4rem;
  margin: 0.74rem 0 0.4rem 0.4rem;
  font-weight: 400;
  letter-spacing: 0.02rem;
}


.banner-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.9rem;
}

.banner-btn {
  font-family: MiSans;
  border: 1px solid #fff;
  color: #fff;
  font-size: 0.36rem;
  font-weight: 500;
  padding: 0.05rem 0.41rem;
  border-radius: 0.32rem;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
}

.banner-btn svg {
  margin-left: 0.1rem;
}

.banner-slogan {
  font-family: MiSans;
  position: relative;
  font-size: 0.48rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
  background: rgba(56, 180, 73, 0.0);
}

.banner-slogan::after {
  content: '';
  position: absolute;
  right: 0;
  top: -0.06rem;
  height: 0.06rem;
  width: 1.66rem;
  background: #fff;
}
.top-bg-content{
  position: absolute;
  left: 0;
  bottom: 0;
  height: 750px;
  width: 100%;
  background-image: url('../img/classroom-service/painpoint-cloud-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 如何解决客户痛点 */
.painpoint-bg {
  position: relative;
  margin: 1.59rem auto 0 auto;
  padding: 0rem 0.86rem 0rem 0.86rem;
  min-height: 4rem;
  overflow: hidden;
}

.painpoint-cloud {
  position: relative;
  width: 12rem;
  height: 600px;
  margin: 120px auto 80px;
  overflow: hidden;
 
  display: flex;
  justify-content: center;
  align-items: center;
}

 
/* 上半圆渐变 */
/* .painpoint-cloud::before{
  top: 0;
  left: 0;
  position: absolute;
  content: '';
  width: 100%;
  height: 169px;
  opacity: 1;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #5FB828 0%, #FFFFFF 10%);
  z-index: -1;
} */

/* 下半圆渐变 */
/* .painpoint-cloud::after{
  bottom: 0;
  left: 0;
  position: absolute;
  content: '';
  width: 100%;
  height: 169px;
  opacity: 1;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(0deg, #5FB828 , #FFFFFF 15%);
  z-index:  -1;
} */

/* 添加渐变遮罩层实现中间深、两边浅的效果 */
/* .painpoint-cloud .gradient-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    rgba(255, 255, 255, 0.8) 100%
  );
  pointer-events: none;
  z-index: 1;
} */
/* 云标签样式 */
.cloud-item {
  position: absolute;
  font-size: 0.18rem;
  color: #333;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.18rem;
  padding: 0.06rem 0.18rem;
  box-shadow: 0 0.02rem 0.08rem 0 rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  font-weight: 400;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 2;
}

/* 飘动的云标签 - 完全匀速移动 */
.cloud-item.flowing-cloud {
  animation: cloudSmoothUp 20s linear infinite;
  will-change: transform, opacity;
}

.cloud-item.flowing-cloud:hover {
  animation-play-state: paused;
}

/* 为每个云标签设置负延迟 - 让它们一开始就分布在不同高度 */
.cloud-item.flowing-cloud:nth-child(1) { animation-delay: 0s; }
.cloud-item.flowing-cloud:nth-child(2) { animation-delay: -1s; }
.cloud-item.flowing-cloud:nth-child(3) { animation-delay: -2s; }
.cloud-item.flowing-cloud:nth-child(4) { animation-delay: -3s; }
.cloud-item.flowing-cloud:nth-child(5) { animation-delay: -4s; }
.cloud-item.flowing-cloud:nth-child(6) { animation-delay: -5s; }
.cloud-item.flowing-cloud:nth-child(7) { animation-delay: -6s; }
.cloud-item.flowing-cloud:nth-child(8) { animation-delay: -7s; }
.cloud-item.flowing-cloud:nth-child(9) { animation-delay: -8s; }
.cloud-item.flowing-cloud:nth-child(10) { animation-delay: -9s; }
.cloud-item.flowing-cloud:nth-child(11) { animation-delay: -10s; }
.cloud-item.flowing-cloud:nth-child(12) { animation-delay: -11s; }
.cloud-item.flowing-cloud:nth-child(13) { animation-delay: -12s; }
.cloud-item.flowing-cloud:nth-child(14) { animation-delay: -13s; }
.cloud-item.flowing-cloud:nth-child(15) { animation-delay: -14s; }
.cloud-item.flowing-cloud:nth-child(16) { animation-delay: -15s; }
.cloud-item.flowing-cloud:nth-child(17) { animation-delay: -16s; }
.cloud-item.flowing-cloud:nth-child(18) { animation-delay: -17s; }
.cloud-item.flowing-cloud:nth-child(19) { animation-delay: -18s; }
.cloud-item.flowing-cloud:nth-child(20) { animation-delay: -19s; }
.cloud-item.flowing-cloud:nth-child(21) { animation-delay: -1s; }
.cloud-item.flowing-cloud:nth-child(22) { animation-delay: -3s; }
.cloud-item.flowing-cloud:nth-child(23) { animation-delay: -5s; }
.cloud-item.flowing-cloud:nth-child(24) { animation-delay: -7s; }

/* 完全匀速向上移动的动画 - 调整移动范围，让高度更贴近容器 */
@keyframes cloudSmoothUp {
  0% {
    transform: translateY(550px);
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    transform: translateY(-200px);
    opacity: 0;
  }
}

/* 走马灯动画效果 - 持续不断的向上滑动，中间时最清晰 */
@keyframes carousel-slide-up {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.25;
    filter: blur(1px);
  }
  10% {
    opacity: 0.4;
    filter: blur(0.5px);
  }
  25% {
    transform: translateY(-175px) translateX(20px);
    opacity: 0.7;
    filter: blur(0px);
  }
  50% {
    transform: translateY(-350px) translateX(-15px);
    opacity: 1;
    filter: blur(0px);
  }
  75% {
    transform: translateY(-525px) translateX(10px);
    opacity: 0.7;
    filter: blur(0px);
  }
  90% {
    opacity: 0.4;
    filter: blur(0.5px);
  }
  100% {
    transform: translateY(-500px) translateX(0);
    opacity: 0.25;
    filter: blur(1px);
  }
}

/* 内容进行走马灯动画 - 持续不断滑动，线性无停顿 */
.cloud-item {
  animation: carousel-slide-up linear infinite;
  will-change: transform;
}

.cloud-item.bold {
  font-weight: bold;
  color: #111;
  font-size: 0.2rem;
  background: rgba(255, 255, 255, 0.95);
}

.cloud-item.small {
  font-size: 0.15rem;
  color: #666;
  padding: 0.04rem 0.12rem;
  background: rgba(255, 255, 255, 0.85);
}

.cloud-item:hover {
  box-shadow: 0 0.04rem 0.16rem 0 rgba(0, 128, 0, 0.10);
}

/* 小班课优势 */
.advantage-container {
  margin: 40px auto 0;
  font-family: '微软雅黑', Arial, sans-serif;
}

.advantage-polygon-group {
  position: relative;
  height: 800px;
  width: 1485px;
  margin: 0 auto;
}

.advantage-polygon-group .polygon:nth-child(odd) {
  background: url('../img/classroom-service/polygon1.png') center center/cover no-repeat;
}

.advantage-polygon-group .polygon:nth-child(even) {
  background: url('../img/classroom-service/polygon.png') center center/cover no-repeat;
}

.polygon {
  position: absolute;
  width: 399px;
  height: 370px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: MiSans;
  font-size: 36px;
  font-weight: 500;
  color: #3D3D3D;
  cursor: pointer;
  /* transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); */
}

/* .polygon span {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
} */

.polygon:hover,
.polygon.active {
  background: #6fc13e !important;
  color: #fff;
  clip-path: polygon(50% 0%, 100% 38%, 82% 95%, 18% 95%, 0% 38%);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  z-index: 10;
}

/* 第2和第4个polygon悬浮/激活时使用倒置的五边形 */
.polygon:nth-child(2):hover,
.polygon:nth-child(2).active,
.polygon:nth-child(4):hover,
.polygon:nth-child(4).active {
  clip-path: polygon(50% 100%, 100% 62%, 82% 5%, 18% 5%, 0% 62%);
}

.polygon-green {
  background: #6fc13e !important;
  color: #fff;
  clip-path: polygon(50% 0%, 100% 38%, 82% 95%, 18% 95%, 0% 38%);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
}

/* 计算五边形中心点坐标 */
.polygon:nth-child(1) {
  /* 左端 */
  left: 0px;
  top: 410px;
}

.polygon:nth-child(2) {
  /* 左上 */
  left: 204px;
  top: 170px;
}

.polygon:nth-child(3) {
  /* 顶部 */
  left: 544px;
  top: 38px;
}

.polygon:nth-child(4) {
  /* 右上 */
  left: 882px;
  top: 170px;
}

.polygon:nth-child(5) {
  /* 右端 */
  left: 1080px;
  top: 410px;
}

.advantage-arc {
  position: absolute;
  top: 474px;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
}

.advantage-desc {
  position: absolute;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  text-align: center;
  font-size: 36px;
  color: #3D3D3D;
  z-index: 2;
}

/* 闪烁圆点容器 - 默认显示 */
.arc-pulse-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
}

/* 圆点基础样式 - 内圈白色，无阴影 */
.arc-pulse-dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #6fc13e;
}

/* 圆点外层波纹效果 - 绿色扩散圆环（默认不显示） */
.arc-pulse-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #6fc13e;
  background: transparent;
  opacity: 0;
}

/* 悬浮或激活时外圈才有波纹扩散动画 */
.polygon:nth-child(1):hover ~ .arc-pulse-dots .arc-dot-1::before,
.polygon:nth-child(1).active ~ .arc-pulse-dots .arc-dot-1::before,
.polygon:nth-child(2):hover ~ .arc-pulse-dots .arc-dot-2::before,
.polygon:nth-child(2).active ~ .arc-pulse-dots .arc-dot-2::before,
.polygon:nth-child(3):hover ~ .arc-pulse-dots .arc-dot-3::before,
.polygon:nth-child(3).active ~ .arc-pulse-dots .arc-dot-3::before,
.polygon:nth-child(4):hover ~ .arc-pulse-dots .arc-dot-4::before,
.polygon:nth-child(4).active ~ .arc-pulse-dots .arc-dot-4::before,
.polygon:nth-child(5):hover ~ .arc-pulse-dots .arc-dot-5::before,
.polygon:nth-child(5).active ~ .arc-pulse-dots .arc-dot-5::before {
  animation: arcPulseRing 2s ease-out infinite;
}

/* 5个圆点沿弧线分布的位置（对应5个polygon） - 默认不闪烁 */
.arc-dot-1 {
  left: 411px;
  top: 669px;
}

.arc-dot-2 {
  left: 530px;
  top: 534px;
}

.arc-dot-3 {
  left: 744px;
  top: 465px;
}

.arc-dot-4 {
  left: 960px;
  top: 548px;
}

.arc-dot-5 {
  left: 1053px;
  top: 662px;
}


@media screen and (max-width: 1600px) {
  .arc-dot-1 {
    left: 404px;
    top: 689px;
  }
  .arc-dot-2 {
    left: 544px;
        top: 524px;
  }
  
  .arc-dot-3 {
    left: 754px;
    top: 469px;
  }
  
  .arc-dot-4 {
    left: 953px;
    top: 539px;
  }
  
  .arc-dot-5 {
    left: 1066px;
    top: 682px;
  }
}

/* 内圈不需要动画，保持静态 */

/* 外圈波纹扩散动画 - 从内圈开始扩散 */
@keyframes arcPulseRing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}

/* 适合人群 */
.target-audience {
  text-align: center;
  margin: 1.6rem 2.91rem 0.89rem;
}

.phone-img {
  width: 2.47rem;
  margin-right: 1.13rem;
  flex-shrink: 0;
  background: url('../img/classroom-service/screenshot.png') center center/cover no-repeat;
  background-position: 0.06rem 0.1rem;
  overflow: hidden;
  border-radius: 0.44rem;
}

.content {
  flex: 1;
  min-width: 4rem;
  text-align: left;
}

.audience-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audience-list li {
  display: flex;
  align-items: flex-start;
  color: #3D3D3D;
  margin-bottom: 0.28rem;
  font-family: MiSans;
  font-size: 0.3rem;
  font-weight: normal;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.3s ease;
}

.audience-list li svg {
  margin-right: 0.22rem;
  min-width: 0.35rem;
  transition: all 0.3s ease;
}

.audience-list li svg path {
  transition: fill 0.3s ease;
}

/* 鼠标悬浮时展示第一个绿色的样式 */
.audience-list li:hover {
  color: #23b14d;
  font-weight: 500;
}

.audience-list li:hover svg path {
  fill: #5FB828 !important;
}

.audience-list li.green .icon {
  color: #3ecf5e;
}

.audience-list li.green {
  color: #23b14d;
  font-weight: 500;
}

.audience-list li .highlight {
  color: #23b14d;
  font-weight: 500;
}

.audience-list li:not(.green) .icon {
  color: #444;
}

/* 独家优势 */
.advantage-section {
  text-align: center;
  margin-top: 0.4rem;
}

.advantage-cards {
  display: flex;
  justify-content: center;
  gap: 0.37rem;
  margin-top: 0.67rem;
}

.advantage-card {
  width: 3.71rem;
  height: 2.27rem;
  border-radius: 0.1rem;
  box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.3);
  background: #FBFBFB;
  font-family: MiSans;
  font-size: 0.3rem;
  font-weight: 600;
  color: #3D3D3D;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.advantage-card span {
  display: block;
  position: relative;
  z-index: 3;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1);
}

/* 卡片底部内容默认隐藏，仅hover时显示 */
.advantage-card-extra {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(95, 184, 40, 0.5);
  color: #fff;
  font-size: 0.24rem;
  padding: 0.18rem 0.16rem 0.12rem 0.16rem;
  border-radius: 0 0 0.12rem 0.12rem;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), opacity 0.35s;
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
  display: block;
  text-align: left;
  font-weight: normal;
}

.advantage-card:hover span {
  transform: translateY(-0.56rem);
}

.advantage-card:hover .advantage-card-extra,
.advantage-card.active .advantage-card-extra {
  background-color: rgba(95, 184, 40, 0.7);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: 0.96rem 0.3rem 0 0.3rem;
  color: #fff;
}

.advantage-card:first-child {
  background-image: url("../img/classroom-service/advantage1.png");
}

.advantage-card:nth-child(2) {
  background-image: url("../img/classroom-service/advantage2.png");
}

.advantage-card:nth-child(3) {
  background-image: url("../img/classroom-service/advantage3.png");
}

.advantage-card:nth-child(4) {
  background-image: url("../img/classroom-service/advantage4.png");
}

/* 第一个卡片为 hover 态 */
.advantage-card.active,
.advantage-card:hover {
  color: #fff;
  opacity: 1;
  box-shadow: 0 0.08rem 0.24rem rgba(76, 175, 80, 0.18);
  z-index: 1;
}

/* 其他卡片 hover 效果（可选） */
.advantage-card:not(:first-child):hover {
  opacity: 1;
  box-shadow: 0 0.08rem 0.24rem rgba(0, 0, 0, 0.12);
}

/* 服务流程可视化 */
.service-flow-container {
  margin-top: 1.72rem;
  text-align: center;
  font-family: MiSans;
  margin-bottom: 2.62rem;
}

.flow-steps {
  position: relative;
  margin: 0;
  padding: 0;
  background-image: url("../img/classroom-service/line.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 2.22rem;
  height: 5.31rem;
}

.flow-step {
  text-align: center;
  margin-bottom: 0.25rem;
  position: absolute;
}

.flow-step:first-child {
  width: 3.23rem;
  top: -0.4rem;
  left: 2.83rem;
}

.flow-step:nth-child(2) {
  width: 4.1rem;
  top: -0.4rem;
  left: 34%;
}

.flow-step:nth-child(3) {
  width: 3.7rem;
  top: -0.4rem;
  left: 60%;
}

.flow-step:nth-child(4) {
  width: 3.7rem;
  top: 2.22rem;
  left: 22%;
}

.flow-step:nth-child(5) {
  width: 4.66rem;
  top: 2.22rem;
  left: 52%;
}

.flow-step:nth-child(6) {
  width: 4.3rem;
  top: 4.88rem;
  left: 28%;
}

.flow-step:nth-child(7) {
  width: 4.52rem;
  top: 4.88rem;
  left: 64%;
}

.step-circle {
  width: 0.8rem;
  height: 0.8rem;
  background: #2ecc40;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.48rem;
  font-weight: 600;
  line-height: normal;
  box-shadow: 0rem 0.04rem 0.1rem 0rem rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 2;
  margin: 0 auto 0.24rem;
}

.step-content {
  flex: 1;
  text-align: left;
}

.step-title {
  font-size: 0.36rem;
  font-weight: 600; 
  color: #3D3D3D;
  margin-bottom: 0.22rem;
}

.step-desc {
  font-size: 0.24rem;
  font-weight: normal;
  color: #3D3D3D;
}
 

/* 中大屏笔记本适配 (1441px-1600px) */
@media (max-width: 1600px) and (min-width: 1441px) {
  body{
      zoom: 0.80;
  }
   
  /* 通用间距调整 */
  .common-pd {
      padding: 0 100px;
  }
}
@media (max-width: 1440px) {
  body{
      zoom: 0.75;
  }
  
  /* 通用间距调整 */
  .common-pd {
      padding: 0 100px;
  }
}