.clearfix {
  clear: both;
}

.flex-start {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.flex-start-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: flex-end;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  min-width: 320px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.module {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  position: absolute;
  top: 0;
  opacity: 0.4;
  visibility: hidden;
}

.module-0 {
  background-color: violet;
}

.module-1 {
  flex: 1;
  /* height: 20rem; */
  background-color: gold;
}

.module-2 {
  height: 37.1rem;
  background-color: red;
}

.module-3 {
  height: 24rem;
  background-color: greenyellow;
}

.module-4 {
  height: 23.58rem;
  background-color: blueviolet;
}

.module-5 {
  height: 49.6rem;
  background-color: red;
}

.module-6 {
  height: 52.4rem;
  background-color: gold;
}

.module-7 {
  height: 30.4rem;
  background-color: red;
}

.module-8 {
  /* height: 69.44rem; */
  height: 37.24rem;
  background-color: goldenrod;
}

.module-9 {
  height: 32.2rem;
  background-color: blueviolet;
}

/* 背景音乐 */
.bg_music {
  width: 8.53%;
  position: fixed;
  right: 4.26%;
  top: 4.26%;
  z-index: 99;
  display: none;
}

.bg_music img {
  max-width: 32px;
}

.bg_music img.active {
  animation: fadenum 2s linear infinite;
}

@keyframes fadenum {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 手势 */
.hand {
  width: 1.1rem;
  cursor: pointer;
  animation: handBounce 1s linear infinite;
}

@keyframes handBounce {
  0%,
  100% {
    transform: scale(1);
  }

  30% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.97);
  }
}

.dian {
  width: 1rem;
}

.group1-2 .rocket .box .dian {
  position: absolute;
  top: 4.71rem;
  right: 1.2rem;
}

.group7 .linkuang .dian {
  position: absolute;
  right: 1.96rem;
  top: 0.92rem;
}

/* 关闭按钮 */
.close-btn {
  width: 0.94rem;
}

.group {
  overflow-x: hidden;
  position: relative;
}

.group .group-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 图片弹窗 */
.img-pop {
  text-align: center;
  box-sizing: border-box;

  width: 100%;
  padding: 0 0.08rem;
  position: absolute;
  top: 0;
  z-index: 10;
}

.img-pop .pop-content {
  padding-left: 0.84rem;
}

.img-pop .pop-content * {
  pointer-events: none; /* 核心：让子元素不响应鼠标事件，事件穿透到父元素 */
}

.img-pop .img1 {
  width: 3.6rem;
  display: inline-block;
  transition: all 0.5s ease;
}

.img-pop .video {
  width: 3.6rem;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: all 0.5s ease;
  padding: 0.1rem;
}

.img-pop .again-btn {
  width: 0.52rem;
  margin-left: 0.32rem;
  transition: all 0.5s ease;
  cursor: pointer;
}

.img-pop .close-btn {
  width: 0.94rem;
  position: absolute;
  right: 0.14rem;
  top: -1.02rem;
  z-index: 99;
  transition: opacity 1s ease;
  cursor: pointer;
  opacity: 0;
}

.img-pop.active {
  max-width: 750px;
  margin-top: 0;
  z-index: 999;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.img-pop.active .pop-content {
  padding-left: 0;
}

.img-pop.active .pop-content * {
  pointer-events: auto; /* 遮罩可响应事件 */
}

.img-pop.active .img1,
.img-pop.active .video {
  width: calc(100% - 0.08rem);
}

.img-pop.active .again-btn {
  display: none;
}

.img-pop.active .close-btn {
  opacity: 1;
}

/* 轮播图弹窗 */
.swiper-pop {
  width: 100%;
  max-width: 750px;
  padding: 0 0.08rem;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  z-index: 10;
}

.swiper-pop .pop-content {
  padding-left: 0.84rem;
}

.swiper-pop .pop-content * {
  pointer-events: none; /* 核心：让子元素不响应鼠标事件，事件穿透到父元素 */
}

.swiper-pop .close-btn {
  width: 0;
  position: absolute;
  right: 0.08rem;
  top: -1.02rem;
  transition: all 0.3s ease;
  opacity: 0;
}

.swiper-pop .again-btn {
  width: 0.52rem;
  margin-left: 0.32rem;
  transition: all 0.5s ease;
  cursor: pointer;
}

.swiper-pop .swiper-container {
  width: 3.6rem;
  margin-left: inherit;
  margin-right: inherit;
}

.swiper-pop .swiper-slide {
  transition: all 0.3s ease;
}

.swiper-pop.active {
  position: fixed;
  bottom: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.swiper-pop.active .pop-content {
  padding-left: 0;
}

.swiper-pop.active .pop-content * {
  pointer-events: auto; /* 遮罩可响应事件 */
}

.swiper-pop.active .close-btn {
  width: 0.9rem;
  opacity: 1;
}

.swiper-pop.active .again-btn {
  display: none;
}

.swiper-pop.active .swiper-container {
  width: 100%;
  margin-left: 0;
}

.swiper-pop .swiper-pagination {
  height: 0.16rem;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
}

.swiper-pop .swiper-pagination-bullet {
  width: 0.1rem;
  height: 0.1rem;
}

.swiper-pop.active .swiper-pagination-bullet {
  width: 0.16rem;
  height: 0.16rem;
}

.swiper-pop
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0.04rem;
}

.swiper-pop .swiper-pagination-bullet-active {
  background-color: #ea4452;
}

/* 太空层：首屏 */
.group1-1 {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: end;
  position: relative;
}

.group1-1 .content {
  max-width: 680px;
  padding-bottom: 0.8rem;
  margin: 0 auto;
}

.group1-1 .content .them {
  padding-bottom: 0.56rem;
}

.group1-1 .content .icon {
  width: 0.48rem;
  width: 6.4%;
  margin: 0 auto;
  animation: jtFloat 2.5s ease-in-out infinite;
}

@keyframes jtFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
  }
}

.group1-1 .stars {
  width: 100%;
  height: 9.4rem;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

/* 太空层：火箭 */
.group1-2 {
  padding-top: 0.36rem;
  /* padding-bottom: 2.38rem; */
}

.group1 .ht-img {
  position: absolute;
  bottom: 1.5rem;
}

.group1-2 .desc {
  width: 59.06%;
  margin: 0 auto 2rem;
}

.group1-2 .rocket {
  /* margin-top: 2.04rem;
  margin-bottom: 2.38rem; */
  position: relative;
}

.group1-2 .rocket .img {
  width: 76.8%;
  margin-left: 10.66%;
  opacity: 0;
  transform: translate(-100%, 100%) scale(0);
}

.group1-2 .rocket.active .img {
  animation: rocketMove 1.5s linear forwards;
  /* animation-delay: 0.5s; */
}

@keyframes rocketMove {
  0% {
    opacity: 0;
    transform: translate(-100%, 100%) scale(2);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

.group1-2 .rocket .box {
  width: 100%;
  position: absolute;
  top: -0.9rem;
  opacity: 0;
}

.group1-2 .rocket.active .box {
  animation: rocketTips 1s linear forwards;
  animation-delay: 2s;
}

@keyframes rocketTips {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.group1-2 .rocket .box .tips {
  width: 50.66%;
  margin-top: 0.28rem;
}

.group1-2 .rocket .box .hand {
  position: absolute;
  top: 3.8rem;
  right: 1.02rem;
}

.group1-2 .rocket .rocket-pop {
  width: 100%;
  box-sizing: border-box;
  padding-left: 0.16rem;
  position: absolute;
  top: -1.5rem;
  display: none;
}

.group1-2 .rocket .rocket-pop .flex-start {
  margin-bottom: 0.7rem;
}

.group1-2 .rocket .rocket-pop img {
  object-fit: contain;
  display: none;
}

.group1-2 .rocket .rocket-pop .rocket-item1 {
  width: 1.68rem;
  margin-left: 0.56rem;
  margin-right: 0.08rem;
}

.group1-2 .rocket .rocket-pop .rocket-item2 {
  width: 4rem;
}

.group1-2 .rocket .rocket-pop .rocket-item3 {
  width: 4.24rem;
  margin-left: 0.58rem;
  margin-right: 0.16rem;
}

.group1-2 .rocket .rocket-pop .rocket-item4 {
  width: 2.24rem;
}

.group1-2 .rocket .rocket-pop .rocket-item5 {
  width: 2.1rem;
}

.group1-2 .rocket .rocket-pop .rocket-item6 {
  width: 4rem;

  margin-left: -0.36rem;
}

.group1-2 .rocket .rocket-pop .rocket-item7 {
  width: 4.26rem;
  margin-left: 0.58rem;
  margin-right: 0.14rem;
}

.group1-2 .rocket .rocket-pop .rocket-item8 {
  width: 2.2rem;
}

/* 天空层：气泡 */
.group2-1 {
  margin-bottom: 8.22em;
  position: relative;
}

.group2-1 .baiyun {
  width: 100%;
  position: relative;
}

.group2-1 .baiyun .img {
  visibility: hidden;
}

.group2-1 .baiyun .desc {
  width: 92%;
  position: absolute;
  top: 2.34rem;
  left: 0.36rem;
  display: none;
}

.group2-1 .wuyun {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.group2-1 .baiyun .img,
.group2-1 .wuyun .img {
  width: 99.73%;
  margin: 0 auto;
}

.group2-1 .wuyun .tips {
  padding-left: 2.76rem;
  box-sizing: border-box;
  position: absolute;
  top: 2.52rem;
}

.group2-1 .wuyun .txt {
  font-weight: 500;
  font-size: 0.32rem;
  color: #ffffff;
  line-height: 54px;
  /* text-shadow:
    0px 0.04rem 0.28rem #ffffff,
    0.02rem 0.02rem 0px #18149c; */

  text-shadow:
    0px 4px 28px #ffffff,
    2px 2px 0px #18149c;
  line-height: 0.54rem;
  text-align: center;
}

.group2-1 .wuyun .hand {
  margin-left: 0.16rem;
}

/* 天空层：遗产地弹窗 */
.heritage-pop {
  top: 15.7rem;
}

.heritage-pop.active .video {
  padding: 0.26rem;
}

/* 山地层：桥梁 */
.group3-2 {
  margin-top: -2.9rem;
}

.group3-1 .bridge,
.group3-2 .tianyan {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.group3-1 .content,
.group3-2 .content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.group3-1 .tips {
  margin-top: 0.64rem;
  padding-left: 0.3rem;
}

.group3-1 .tips .icon {
  width: 2.9rem;
  margin-left: -0.2rem;
}

.group3-1 .bridge-talk {
  width: 100%;
  position: absolute;
  top: 7.26rem;
}

.group3-1 .talk-1 {
  width: 5.06rem;
  margin-left: 1.28rem;
  margin-bottom: 0.4rem;
  display: none;
}

.group3-1 .talk-2 {
  width: 6.04rem;
  margin-left: 0.36rem;
  display: none;
}

.group3-1 .talk-3 {
  width: 6.64rem;
  margin-top: -0.16rem;
  margin-left: 0.72rem;
  display: none;
}

/* 山地层：花江大桥 */
.bridge-pop {
  top: 3.9rem;
}

/* 山地层：天眼 */
.tianyan-pop {
  top: 22.2rem;
  margin-top: 0;
}

.group3-2 .tips {
  margin-top: 4.68rem;
  margin-right: 1.3rem;
}

.group3-2 .tips .icon {
  width: 2.62rem;
  margin: 0 auto;
}

.group3-2 .tips .hand {
  margin: 0 auto;
}

.group3-2 .desc {
  position: absolute;
  bottom: 0.56rem;
  left: 0;
}

.group3-2 .maichong {
  width: 85.06%;
  margin-top: 3.65rem;
  margin-left: 0.66rem;
  display: none;
}

.group3-2 .txt {
  width: 91.46%;
  margin: 0.48rem auto 0;
}

/* 土地河流层 */
.group4 .tips {
  margin-top: 2.62rem;
}

.group4 .tips .icon {
  width: 1.76rem;
  margin-left: 2.84rem;
}

.group4 .tips .hand {
  margin-left: 3.72rem;
}

.group4 .tips2 {
  position: absolute;
  bottom: 13.42rem;
}

.group4 .tips2 .icon {
  width: 2.94rem;
  margin-left: 2.2rem;
}

.group4 .tips2 .hand {
  margin-left: 3.1rem;
}

.group4 .chaye {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.group4 .variety {
  padding: 0 0.48rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  position: absolute;
  top: 19.74rem;
}

.group4 .variety img {
  width: 1.88rem;
  opacity: 0;
  transition: all 0.8s ease;
}

.group4 .variety img:nth-of-type(2) {
  transition-delay: 0.5s;
}

.group4 .variety img:nth-of-type(3) {
  transition-delay: 1s;
}

.group4 .variety img:nth-of-type(4) {
  transition-delay: 1.5s;
}

.group4 .variety img:nth-of-type(5) {
  transition-delay: 2s;
}

.group4 .variety img:nth-of-type(6) {
  transition-delay: 2.5s;
}

.group4 .crop {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
}

.crop-swiper {
  bottom: 2.8rem;
}

/* 城市层 */
.group5 .shiji {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

.group5 .tips1 {
  margin-top: 1.78rem;
}

.group5 .tips1 img {
  margin: 0 auto;
}

.group5 .tips1 .icon {
  width: 2.18rem;
}

.group5 .shi-talk {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 13.7rem;
  left: 0;
}

.group5 .shi-talk img {
  opacity: 0;
  transition: all 1s ease;
}

.group5 .shi-talk.active img {
  opacity: 1;
}

.group5 .shi-talk img:nth-of-type(1) {
  width: 5.42rem;
  margin-left: 1.14rem;
}

.group5 .shi-talk img:nth-of-type(2) {
  width: 4.66rem;
  margin-top: -0.3rem;
  transition-delay: 0.5s;
}

.group5 .shi-talk img:nth-of-type(3) {
  width: 5.32rem;
  margin-left: 2.5rem;
  margin-top: -1.16rem;
  transition-delay: 1s;
}

.group5 .tips2 {
  position: absolute;
  top: 31.06rem;
  left: 1.22rem;
  z-index: 10;
}

.group5 .tips2 img {
  margin: 0 auto;
}

.group5 .tips2 .icon {
  width: 2.76rem;
}

.group5 .pintu {
  width: 100%;
  position: absolute;
  left: 0;
  top: 27.32rem;
}

.group5 .pintu img {
  opacity: 0;
}

.group5 .pintu .pt1 {
  width: 4.84rem;
}

.group5 .pintu .pt2 {
  width: 3.22rem;
  margin-left: -0.56rem;
}

.group5 .pintu .pt3 {
  margin-top: 0.28rem;
}

.group5 .pintu .pt4 {
  width: 3.54rem;
  margin-left: 0.12rem;
  margin-top: -0.18rem;
}

.group5 .pintu .pt5 {
  width: 3.92rem;
  margin-top: -0.36rem;
}

.group5 .pintu .pt6 {
  width: 3.86rem;
  margin-left: -0.26rem;
  margin-top: 0.06rem;
}

.group5 .pintu.active .pt1 {
  animation: flyInLeft 0.5s ease-out forwards;
  transform: translateX(-100%);
}

.group5 .pintu.active .pt2 {
  animation: flyInRight 0.5s ease-out 0.5s forwards;
  transform: translateX(100%);
}

.group5 .pintu.active .pt3 {
  animation: flyInRight 0.5s ease-out 1s forwards;
  transform: translateX(100%);
}

.group5 .pintu.active .pt4 {
  animation: flyInLeft 0.5s ease-out 1.5s forwards;
  transform: translateX(100%);
}

.group5 .pintu.active .pt5 {
  animation: flyInLeft 0.5s ease-out 2.5s forwards;
  transform: translateX(100%);
}

.group5 .pintu.active .pt6 {
  animation: flyInRight 0.5s ease-out 2s forwards;
  transform: translateX(100%);
}

@keyframes flyInLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  80% {
    transform: translateX(10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes flyInRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  80% {
    transform: translateX(-10px);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.hxx-pop {
  top: 46.78rem;
}

.hxx-pop.active .video {
  padding: 0.26rem;
}

/* 算力层: 流 */
.group6 .liu {
  width: 100%;
  height: 7.3rem;
  position: absolute;
  top: 0;
  left: 0;
  background-image:
    radial-gradient(4px 100px at 0px 235px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 235px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 117.5px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 252px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 252px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 126px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 150px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 150px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 75px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 253px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 253px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 126.5px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 204px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 204px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 102px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 134px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 134px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 67px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 179px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 179px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 89.5px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 299px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 299px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 149.5px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 215px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 215px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 107.5px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 281px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 281px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 140.5px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 158px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 158px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 79px, #4b9be9 100%, #0000 150%),
    radial-gradient(4px 100px at 0px 210px, #4b9be9, #0000),
    radial-gradient(4px 100px at 300px 210px, #4b9be9, #0000),
    radial-gradient(1.5px 1.5px at 150px 105px, #4b9be9 100%, #0000 150%);
  background-size:
    300px 235px,
    300px 235px,
    300px 235px,
    300px 252px,
    300px 252px,
    300px 252px,
    300px 150px,
    300px 150px,
    300px 150px,
    300px 253px,
    300px 253px,
    300px 253px,
    300px 204px,
    300px 204px,
    300px 204px,
    300px 134px,
    300px 134px,
    300px 134px,
    300px 179px,
    300px 179px,
    300px 179px,
    300px 299px,
    300px 299px,
    300px 299px,
    300px 215px,
    300px 215px,
    300px 215px,
    300px 281px,
    300px 281px,
    300px 281px,
    300px 158px,
    300px 158px,
    300px 158px,
    300px 210px,
    300px 210px,
    300px 210px;
  animation: hi 150s linear infinite;
}

@keyframes hi {
  0% {
    background-position:
      0px 220px,
      3px 220px,
      151.5px 337.5px,
      25px 24px,
      28px 24px,
      176.5px 150px,
      50px 16px,
      53px 16px,
      201.5px 91px,
      75px 224px,
      78px 224px,
      226.5px 350.5px,
      100px 19px,
      103px 19px,
      251.5px 121px,
      125px 120px,
      128px 120px,
      276.5px 187px,
      150px 31px,
      153px 31px,
      301.5px 120.5px,
      175px 235px,
      178px 235px,
      326.5px 384.5px,
      200px 121px,
      203px 121px,
      351.5px 228.5px,
      225px 224px,
      228px 224px,
      376.5px 364.5px,
      250px 26px,
      253px 26px,
      401.5px 105px,
      275px 75px,
      278px 75px,
      426.5px 180px;
  }

  to {
    background-position:
      0px 6800px,
      3px 6800px,
      151.5px 6917.5px,
      25px 13632px,
      28px 13632px,
      176.5px 13758px,
      50px 5416px,
      53px 5416px,
      201.5px 5491px,
      75px 17175px,
      78px 17175px,
      226.5px 17301.5px,
      100px 5119px,
      103px 5119px,
      251.5px 5221px,
      125px 8428px,
      128px 8428px,
      276.5px 8495px,
      150px 9876px,
      153px 9876px,
      301.5px 9965.5px,
      175px 13391px,
      178px 13391px,
      326.5px 13540.5px,
      200px 14741px,
      203px 14741px,
      351.5px 14848.5px,
      225px 18770px,
      228px 18770px,
      376.5px 18910.5px,
      250px 5082px,
      253px 5082px,
      401.5px 5161px,
      275px 6375px,
      278px 6375px,
      426.5px 6480px;
  }
}

/* 算力层：星星 */
.group6 .stars {
  width: 100%;
  height: 15.74rem;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

/* 算力层：旋转效果 */
.group6 .rotate-box {
  width: 100%;
  padding: 0 0.38rem;
  box-sizing: border-box;
  position: absolute;
  top: 3.88rem;
  left: 0;
}

.group6 .svg-frame {
  position: relative;
  width: 2.12rem;
  height: 2.12rem;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;

  /* 比例系数：2.12rem 对应原设计 344px，所有位移、描边按此缩放 */
  --unit: calc(2.12rem / 344);
}

.group6 .svg-frame svg {
  position: absolute;
  transition: 0.5s;
  z-index: calc(1 - (0.2 * var(--j)));
  transform-origin: center;
  width: 2.12rem;
  height: 2.12rem;
  fill: none;

  /* 保证图形完美适配2.12rem画布，坐标系统保留原344x344 */
  viewbox: 0 0 344 344;
}

.group6 .svg-frame svg [stroke] {
  stroke-width: calc(10 * var(--unit));
  /* 原2px → 等比0.0116rem，视觉一致 */
}

.group6 .svg-frame svg .center {
  transition: 0.5s;
  transform-origin: center;
}

.group6 .svg-frame.active .out2 {
  animation: rotate16 2s ease-in-out infinite alternate;
  transform-origin: center;
  stroke: white;
}

.group6 .svg-frame.active .out3 {
  animation: rotate16 2s ease-in infinite normal;
  transform-origin: center;
  stroke: #ff0;
}

.group6 .svg-frame.active .inner3,
.group6 .svg-frame.active .inner1 {
  animation: rotate16 0.5s ease-in-out infinite alternate;
  transform-origin: center;
}

.group6 .svg-frame.active .center1 {
  fill: #ff0;
  animation: rotate16 0.5s ease-out infinite normal;
  transform-origin: center;
}

@keyframes rotate16 {
  to {
    transform: rotate(360deg);
  }
}

/* 算力层：百分比效果 */
/* .progress-txt {
  color: #fff;
  text-align: center;
  font-size: 0.32rem;
}

.group6 .progress-bar {
  width: 4.43rem;
  height: 0.46rem;
  padding: 0.08rem;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.4rem;
  overflow: hidden;
}

.group6 .progress-bar::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  border-radius: 0.4rem;
  background: linear-gradient(90deg, #00ddff, #ff00de);
  box-shadow: 0 0 0.1rem rgba(0, 221, 255, 0.7);
}

.group6 .progress.active .progress-bar::after {
  animation: progressS 5s linear forwards;
}

@keyframes progressS {
  0% {
    width: 0;
  }

  20% {
    width: 20%;
  }

  40% {
    width: 38%;
  }

  50% {
    width: 52%;
  }

  60% {
    width: 65%;
  }

  75% {
    width: 82%;
  }

  100% {
    width: 100%;
  }
} */

.group6 .tips {
  width: 2.12rem;
  position: absolute;
  top: 3.62rem;
  right: 2.5rem;
  /* z-index: 30; */
}

.group6 .tips img {
  margin: 0 auto;
}

.group6 .tips .icon {
  width: 2.12rem;
}

.group6 .tips .hand {
  margin-top: -0.12rem;
}

.group6 .tips2 {
  width: 100%;
  position: absolute;
  top: 18.9rem;
  z-index: 10;
}

.group6 .tips2 img {
  margin: 0 auto;
}

.group6 .tips2 .icon {
  width: 1.76rem;
}

.group6 .HTP {
  position: absolute;
  top: 17.82rem;
}

.group6 .HTP img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.group6 .HTP.active img {
  opacity: 1;
}

.group6 .HTP .huawei {
  width: 3.36rem;
}

.group6 .HTP .tengxun {
  width: 3.74rem;
  margin-left: -1.86rem;
  transition-delay: 0.5s;
}

.group6 .HTP .pingguo {
  width: 3.74rem;
  margin-left: -1.48rem;
  transition-delay: 1s;
}

/* 地下层 */
.group7 {
  margin-top: -2px;
}

.group7 .tips1 {
  width: 100%;
  margin-top: 2.18rem;
}

.group7 .tips1 img {
  margin: 0 auto;
}

.group7 .tips1 .icon {
  width: 1.78rem;
}

.group7 .wakuang {
  width: 100%;
  height: calc(0.6rem + 6.72rem);
  position: absolute;
  top: 4.28rem;
  right: 0;
}

.group7 .wakuang .car {
  width: 2.26rem;
  position: absolute;
  top: 0;
  right: 0.24rem;
  z-index: 1;
  transition: top 2s ease-in-out;
}

.group7 .wakuang .keng {
  height: 1.5rem;
  /* height: 6rem; */
  width: 2.8rem;
  margin-top: 0.58rem;
  opacity: 0;
  background-color: #09233a;
  border-bottom-left-radius: 1.22rem;
  border-bottom-right-radius: 1.22rem;
  position: absolute;
  top: 0;
  right: 0;
  /* transition: height 2s ease-in-out; */
  background: url("../images/img_fangxing@2x.png") no-repeat center bottom;
  background-size: 100% 100%;
}

.group7 .wakuang.active .car {
  top: calc(100% - 2.28rem);
}

.group7 .wakuang.active .keng {
  animation: heightCar 2.01s ease-in-out forwards;
}

@keyframes heightCar {
  0% {
    height: 0rem;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }
  /* 20% {
    height: 1rem;
    opacity: 1;
  } */

  100% {
    height: 6.5rem;
    opacity: 1;
  }
}

.group7 .tips2 {
  position: absolute;
  top: 17.22rem;
  right: 1.18rem;
}

.group7 .tips2 img {
  margin: 0 auto;
}

.group7 .tips2 .icon {
  width: 2.78rem;
}

.group7 .tips2 .hand2 {
  margin-top: -0.2rem;
}

.group7 .ksduihua {
  width: 100%;
  position: absolute;
  top: 18.54rem;
}

.group7 .ksduihua img {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.group7 .ksduihua.active img {
  opacity: 1;
}

.group7 .ksduihua img:nth-of-type(1) {
  width: 6.12rem;
  margin-left: 0.34rem;
  transition-delay: 0.2s;
}

.group7 .ksduihua img:nth-of-type(2) {
  width: 6.56rem;
  margin-left: 0.74rem;
  margin-top: 1.82rem;
  transition-delay: 1s;
}

.group7 .ksduihua img:nth-of-type(3) {
  width: 5.62rem;
  margin-left: 0.28rem;
  margin-top: 2.38rem;
  transition-delay: 1.8s;
}

.group7 .linkuang {
  width: 100%;
  position: absolute;
  top: 30.82rem;
}

.group7 .linkuang .shitou {
  width: 1.42rem;
  margin-left: 3.36rem;
  /* animation: handBounce 2s linear infinite; */
}

.group7 .linkuang .shitou2 {
  width: 1.42rem;
  position: absolute;
  left: 3.36rem;
  top: 0;
  display: none;
}

.group7 .linkuang .hand4 {
  position: absolute;
  right: 1.8rem;
  top: 0;
}

.group7 .linkuang .lk-img {
  width: 6.4rem;
  position: absolute;
  right: -0.14rem;
  top: 0.92rem;
  display: none;
}

.group7 .tips3 {
  position: absolute;
  top: 37.4rem;
  right: 2.22rem;
}

.group7 .tips3 .icon {
  width: 3.08rem;
}

.group7 .tips3 .hand3 {
  margin-top: -0.24rem;
  margin-left: 0.16rem;
}

.group7 .qiche {
  width: 100%;
  position: absolute;
  top: 38.84rem;
}

.group7 .qiche img {
  width: 2.04rem;
  margin-left: 0.12rem;
  transition: margin-left 3.5s ease-in-out;
}

.group7 .qiche.active img {
  margin-left: 5.28rem;
}