.family-friendly {
  box-sizing: border-box;
  margin: auto;
}

.title {
  font-size: 0.48rem;
  color: #000000;
  text-align: center;
  padding-top: 0.82rem;
}

.title_line {
  width: 0.9rem;
  height: 0.03rem;
  background: #f8650d;
  margin: 0.17rem auto 0.23rem;
}

.en-title {
  font-size: 0.24rem;
  color: #000000;
  text-align: center;
  margin-bottom: 0.49rem;
}

/* 差异化优势模块 */
.diff-advantage .advantage-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.13rem;
}

.diff-advantage .advantage-item {
  width: 2.73rem;
  text-align: center;
  background: #f6f6f6;
}

.diff-advantage .advantage-item img {
  width: 100%;
  object-fit: cover;
}

.diff-advantage .advantage-item p {
  font-size: 0.23rem;
  color: #000000;
  margin: 0.23rem auto 0.29rem;
}

/* 免费儿童娱乐设施模块 */
.children-play .play-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-radius: 10px;
  overflow: hidden;
}

.children-play .play-item {
  /* width: 4.74rem; */
  flex: 1;
  transition: all 0.5s ease;
  box-sizing: border-box;
  animation: fadeInPlay 0.8s ease forwards; /* 执行动画并保持最终状态 */
  opacity: 0; /* 初始透明，由动画渐显 */
  position: relative;
}

/* 每个项目动画延迟，实现依次显示 */
.play-item:nth-child(1) {
  animation-delay: 0.1s;
}
.play-item:nth-child(2) {
  animation-delay: 0.3s;
}
.play-item:nth-child(3) {
  animation-delay: 0.5s;
}
.play-item:nth-child(4) {
  animation-delay: 0.7s;
}

.children-play .play-item .play-item-main {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block; /* 消除图片底部间隙 */
}

.children-play .play-item .play-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.8;
  transition: opacity 0.5s ease; /* 蒙层透明度过渡 */
  z-index: 1;
}

.play-item.active .play-item-mask {
  opacity: 0; /* 选中时蒙层隐藏 */
}

/* 初始加载动画：淡入 + 上移 */
@keyframes fadeInPlay {
  from {
    opacity: 0;
    transform: translateY(0.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.children-play .play-item .play-item-con {
  position: absolute;
  top: 2.61rem;
  left: 0;
  right: 0;
  padding: 0 0.33rem;
  color: #656565; /* 文本默认白色 */
  z-index: 2; /* 确保文本在蒙层上方 */
}

.children-play .play-item.active .play-item-con {
  color: #ffffff !important;
}

.children-play .play-item.active h3 {
  color: #ffffff !important;
}

.children-play .play-item h3 {
  font-size: 0.24rem;
  color: #000;
  margin-bottom: 0.14rem;
  line-height: 0.32rem;
  font-weight: bold;
}

.children-play .play-item .time {
  font-size: 0.14rem;
}

/* 位置、时间图标：选中时转为白色 */
.children-play .play-item .time .location_icon,
.children-play .play-item .time .clock_icon {
  transition: filter 0.5s ease; /* 图标颜色过渡（用滤镜实现） */
}

/* 选中时：图标转为白色（假设原图为深色） */
.play-item.active .time .location_icon,
.play-item.active .time .clock_icon {
  filter: brightness(0) invert(1); /* 将深色图标转为白色 */
}

.children-play .play-item .time .location_icon {
  width: 0.1rem;
}

.children-play .play-item .time .clock_icon {
  width: 0.13rem;
  vertical-align: baseline;
}

.children-play .play-item .play-item-line {
  width: 0.36rem;
  height: 0.02rem;
  background: #f8650d;
  margin: 0.12rem 0 0.1rem;
}

.children-play .play-item .desc {
  font-size: 0.16rem;
}

/* 亲子主题活动体验模块 */
.activity-experience .activity-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.22rem;
}

.activity-experience .activity-item {
  /* width: 3.35rem; */
  flex: 1;
  height: fit-content;
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
}

.activity-experience .activity-item:nth-child(even) {
  margin-top: 0.59rem;
}

.activity-experience .activity-item .activity-item-mask {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.activity-experience .activity-item.active .activity-item-mask {
  top: 0;
  opacity: 1;
}

.activity-experience .activity-item img {
  width: 100%;
  height: auto;
  display: block;
}

.activity-experience .activity-item .activity-item-title {
  font-size: 0.25rem;
  color: #ffffff;
  margin-top: 0.3rem;
  transition: all 0.5s ease; /* 颜色/位置过渡平滑 */
}

.activity-experience .activity-item .activity_item_con .activity-item-line,
.activity-experience .activity-item .activity_item_con .activity-item-desc {
  opacity: 0;
  display: none;
  transition: opacity 0.3s ease 0.2s;
}

.activity-experience .activity-item .activity-item-line {
  width: 0.46rem;
  height: 0.02rem;
  background: #f8650d;
  margin-top: 0.11rem;
}

.activity-experience .activity-item .activity-item-desc {
  font-size: 0.19rem;
  color: #323232;
  margin: 0;
  transform: translateY(10px);
}

.activity-experience .activity-item .activity_item_con {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 0.21rem 0.23rem;
  box-sizing: border-box;
  z-index: 2;
  transition: all 0.5s ease;
}

.activity-experience .activity-item.active .activity_item_con {
  top: 0;
  animation: slideUpContent 0.5s ease forwards;
}

.activity-experience .activity-item.active .activity_item_con .activity-item-title {
  color: #000; /* 标题同步变黑 */
}

.activity-experience .activity-item.active .activity_item_con .activity-item-line,
.activity-experience .activity-item.active .activity_item_con .activity-item-desc {
  opacity: 1;
  display: block;
}

@keyframes fadeInContent {
  from {
    transform: translateY(100%); /* 从底部向上滑动 */
  }
  to {
    transform: translateY(0);
  }
}

/* 东部最大亲子主题街区模块 */
.parent-child-street .street-content {
  display: flex;
  align-items: stretch;
  justify-content: center;

  overflow: hidden;
  background: #f5f5f5;
  width: fit-content;
  margin: auto;
}

.parent-child-street .street-content img {
  width: 7.21rem;
  height: auto;
  object-fit: cover;
}

.parent-child-street .street-content .street-desc-box {
  width: 6.99rem;
  padding: 0.42rem;

  display: flex;
  align-items: center;
}

.parent-child-street .street-content .street-desc {
  font-size: 0.24rem;
  color: #000;
}

/* 亲子友好暖心服务模块 */
.parent-child-services .services-list .service-item {
  display: flex;
  align-items: stretch;
  border-radius: 0.1rem;
  background: #f5f5f5;
  overflow: hidden;
  transition: background-color 0.5s ease;
  position: relative;

  opacity: 0;
  animation: fadeIn 0.6s forwards;
}

.parent-child-services .services-list .service-item:nth-child(1) {
  animation-delay: 0.1s;
}
.parent-child-services .services-list .service-item:nth-child(2) {
  animation-delay: 0.2s;
}
.parent-child-services .services-list .service-item:nth-child(3) {
  animation-delay: 0.3s;
}
.parent-child-services .services-list .service-item:nth-child(4) {
  animation-delay: 0.4s;
}
.parent-child-services .services-list .service-item:nth-child(5) {
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  to {
    opacity: 1; /* 仅从透明到不透明 */
  }
}

.parent-child-services .services-list .service-item.active .service-text,
.parent-child-services .services-list .service-item:hover .service-text {
  animation: textFade 0.5s ease forwards;
}

@keyframes textFade {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.parent-child-services .services-list .service-item.active,
.parent-child-services .services-list .service-item:hover {
  background: #ff7b00;
}

.parent-child-services .services-list .service-item .service-text h3,
.parent-child-services .services-list .service-item .service-text .service-item-desc {
  transition: color 0.5s ease;
}

.parent-child-services .services-list .service-item.active .service-text h3,
.parent-child-services .services-list .service-item:hover .service-text h3,
.parent-child-services .services-list .service-item.active .service-text .service-item-desc,
.parent-child-services .services-list .service-item:hover .service-text .service-item-desc {
  color: #ffffff !important; /* 强制文字变白，修复颜色丢失 */
}

.parent-child-services .services-list .service-item.active::before,
.parent-child-services .services-list .service-item:hover::before {
  height: 100%;
}

/* 左侧装饰条动画 */
.parent-child-services .services-list .service-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0.06rem;
  height: 0;
  background: #ffffff;
  transition: height 0.5s ease;
}

.parent-child-services .services-list .service-item .service-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.23rem;
  box-sizing: border-box;
}

.parent-child-services .services-list .service-item .service-item-line {
  width: 0.45rem;
  height: 0.03rem;
  background: #f8650d;
  margin: 0.16rem auto 0.18rem;
  transition: background 0.5s ease, width 0.5s ease;
}

.parent-child-services .services-list .service-item.active .service-item-line,
.parent-child-services .services-list .service-item:hover .service-item-line {
  background: #ffffff !important; /* 强制分割线变白，修复颜色丢失 */
}

.parent-child-services .services-list .service-item .service-text h3 {
  text-align: center;
  font-size: 0.32rem;
  color: #000000;
}

.parent-child-services .services-list .service-item .service-text .service-item-desc {
  font-size: 0.24rem;
  color: #000000;
}

.parent-child-services .services-list .service-item img {
  width: 7.11rem;
  height: auto;
  transition: filter 0.5s ease;
}

.parent-child-services .services-list .service-item.active img,
.parent-child-services .services-list .service-item:hover img {
  filter: brightness(1.05); /* 柔和亮度变化 */
}

/* 亲子友好餐厅模块 */
.family-restaurant {
  width: 100%;
  padding: 0 0.85rem 1.22rem;
  border-radius: 10px;
  background: #f5f5f5;
  margin: 0.49rem 0 1.39rem;
}

.family-restaurant .restaurant-text {
  width: 62%;
  margin: 0 auto 0.4rem;
  text-align: center;
}

.family-restaurant .restaurant-text p {
  font-size: 0.18rem;
  color: #666;
  line-height: 0.3rem;
}

.family-restaurant .restaurant-imgs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.42rem;
}

.family-restaurant .restaurant-imgs img {
  width: 100%;
  height: auto;
}

.family-restaurant .restaurant-brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.family-restaurant .restaurant-brands img {
  width: 100%;
  height: auto;
  margin: 0.1rem;
}

/* 动画效果：淡入 + 上移 */
.wow {
  visibility: hidden;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(0.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.fadeIn {
  animation: fadeIn 0.8s ease-in-out forwards;
}

/* 媒体查询：移动端（≤768px） */
@media screen and (max-width: 768px) {
  .family-friendly {
    width: 100%;
  }

  .title {
    font-size: 0.24rem;
  }

  .en-title {
    font-size: 0.12rem;
    margin-bottom: 0.3rem;
  }

  /* 差异化优势 */
  .diff-advantage .advantage-list {
    flex-direction: column;
  }

  .diff-advantage .advantage-item {
    width: 100%;
    margin-bottom: 0.3rem;
  }

  /* 免费儿童娱乐设施 */
  .children-play .play-list {
    flex-direction: column;
  }

  .children-play .play-item {
    width: 100%;
  }

  /* 亲子主题活动体验 */
  .activity-experience .activity-list {
    flex-direction: column;
  }

  .activity-experience .activity-item {
    width: 100%;
    margin-bottom: 0.3rem;
  }

  /* 东部最大亲子主题街区 */
  .parent-child-street .street-content {
    flex-direction: column;
  }

  .parent-child-street .street-content img {
    width: 100%;
    margin-right: 0;
  }

  .parent-child-street .street-content .street-desc {
    font-size: 0.16rem;
    line-height: 0.26rem;
  }

  /* 亲子友好暖心服务 */
  .parent-child-services .services-list .service-item {
    width: 100%;
    flex-direction: column;
  }

  .parent-child-services .services-list .service-item .service-text {
    width: 100%;
    margin-bottom: 0.2rem;
  }

  .parent-child-services .services-list .service-item img {
    width: 100%;
  }

  /* 亲子友好餐厅 */
  .family-restaurant .restaurant-text {
    width: 80%;
  }

  .family-restaurant .restaurant-text p {
    font-size: 0.16rem;
    line-height: 0.26rem;
  }

  .family-restaurant .restaurant-imgs {
    flex-direction: column;
  }
}

/* 媒体查询：桌面端（≥768px） */
@media screen and (min-width: 768px) {
  .family-friendly {
    width: 14.22rem;
  }
  .parent-child-street .street-content {
    border-radius: 0.1rem;
  }
  .family-restaurant {
  }
}