/* 世界观 */
.worldview.section3 {
  position: relative;
  width: 100%;
  height: 1415px;
}

.worldviews {
  width: 100%;
  height: 1380px;
  position: relative;
}

.setion3_title {
  width: 381px;
  height: 101px;
  background: url('../image/section3/s3_title.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 90px;
  left: 50%;
  margin-left: -190.5px;
}

.setion3_title.s3_over {
  width: 362px;
  height: 101px;
  background: url('../image/section2/title_over.png') no-repeat;
  background-size: 100%;
  margin-left: -181px;
}

#canvas {
  position: absolute;
  left: 0px;
  top: -200px;
}

/* 标题 */
.world-text {
  width: 685px;
  height: 233px;
  background: url(../image/section3/worldview-bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 136px;
  left: 50%;
  /* transform: translateX(-432px); */
  margin-left: -342.5px;
  z-index: 5;
}

/* 标题 */
.world-text-2{
  width: 720px;
  height: 59px;
  background: url(../image/section3/worldview-bg2.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1280px;
  left: 50%;
  /* transform: translateX(-432px); */
  margin-left: -360px;
  z-index: 5;
}

/* 白云 */
.opening-cloud-sct3 {
  overflow: hidden;
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.opening-cloud-sct3 .cloud {
  position: absolute;
  top: calc(50% - 641px);
  /* Adjust this value as needed */
  left: calc(50% - 1106px);
  /* Adjust this value as needed */
  width: 2213px;
  height: 1282px;
  background-image: url(../image/section1/worldmap-cloud.png);
  transition: opacity 3000ms ease, transform 3000ms ease;
  transition-property: all;
  /* transition-delay: 700ms; */
  transition-duration: 0ms;
  transform: scale(2);
  opacity: 1;
}

.opening-cloud-sct3.animated .cloud.open {
  transition-delay: 0ms;
  transition-duration: 1000ms;
  opacity: 0;
  transform: scale(1);
  /* Adjust positions accordingly */
}

.opening-cloud-sct3.animated .cloud.end{
  transition-delay: 0ms;
  transition-duration: 1000ms;
  transform: scale(2);
  opacity: 1;
  /* Adjust positions accordingly */
}

.hide_out {
  opacity: 0;
}

.opening-cloud-sct3 .cloud.end:nth-child(1) {
  translate: calc(-25vw) calc(-25vh);
}

.opening-cloud-sct3.animated .cloud:nth-child(1).open {
  translate: -100vw -100vh;
}

.opening-cloud-sct3 .cloud.end:nth-child(2) {
  translate: 0% calc(-25vh);
}

.opening-cloud-sct3.animated .cloud:nth-child(2).open {
  translate: 0% -100vh;
}

.opening-cloud-sct3 .cloud.end:nth-child(3) {
  translate: 25vw calc(-25vh);
}

.opening-cloud-sct3.animated .cloud:nth-child(3).open {
  translate: 100vw -100vh;
}

.opening-cloud-sct3 .cloud.end:nth-child(4) {
  translate: 25vw 0%;
}

.opening-cloud-sct3.animated .cloud:nth-child(4).open {
  translate: 100vw 0%;
}

.opening-cloud-sct3 .cloud.end:nth-child(5) {
  transform: translate(100vw, 100vh);
}


.opening-cloud-sct3 .cloud.end:nth-child(6) {
  translate: 0% 25vh;
}

.opening-cloud-sct3.animated .cloud:nth-child(6).open {
  translate: 0% 100vh;
}

.opening-cloud-sct3 .cloud.end:nth-child(7) {
  translate: calc(-25vw) 25vh;
}

.opening-cloud-sct3.animated .cloud:nth-child(7).open {
  translate: -100vw 100vh;
}

.opening-cloud-sct3 .cloud.end:nth-child(8) {
  translate: calc(-25vw) 0%;
}

.opening-cloud-sct3.animated .cloud:nth-child(8).open {
  translate: -100vw 0%;
}


/* 元素按钮 */
.worldviews-pagination {
  top: 1070px;
}

.worldviews-pagination span {
  border-radius: 0;
  filter: grayscale(100);  
  opacity: 1;
}

.worldviews-pagination span.swiper-pagination-bullet-active{
  filter: grayscale(0);
}

.worldviews-pagination span:nth-child(1) {
  width: 259px;
  height: 84px;
  background: url(../image/section3/a1.png) no-repeat;
  background-size: 100%;

}

.worldviews-pagination span:nth-child(2) {
  width: 259px;
  height: 84px;
  background: url(../image/section3/a2.png) no-repeat;
  background-size: 100%;
}

.worldviews-pagination span:nth-child(3) {
  width: 259px;
  height: 84px;
  background: url(../image/section3/a3.png) no-repeat;
  background-size: 100%;
}

.worldviews-pagination span:nth-child(4) {
  width: 259px;
  height: 84px;
  background: url(../image/section3/a4.png) no-repeat;
  background-size: 100%;
}

.worldviews_left {
  width: 665px;
  height: 367px;
  position: absolute;
  background: url(../image/section3/leftbg.png)no-repeat;
  background-size: 100%;
  left: 30px;
  top: 255px;
}
.worldviews_left a {
  position: absolute;
  top: 0rem;
  left: 0rem;
  display: block;
  width: 100%;
  height: 100%;
}

.worldviews_right {
  width: 551px;
  height: 527px;
  position: absolute;
  background: url(../image/section3/rightbg.png)no-repeat;
  background-size: 100%;
  left: 93px;
  top: 705px;
}

.worldviews_left .playButton {
  width: 98px;
  height: 98px;
  position: absolute;
  background: url('../image/section3/play.png') no-repeat;
  background-size: 100%;
  cursor: pointer;
  top: 950px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 250;
}


.worldviews_left .playButton.paused {
  background: url('../image/section3/stop.png') no-repeat;
  background-size: 100%;
}


.autio {
  width: 620px;
  height: 40px;
  z-index: 200;
  display: flex;
  align-items: center;
  position: relative;
  top: 390px;
  left: 25px;
}

.progress-container {
  width: 0;
  height: 1px;
  background-color: rgba(80, 225, 255);
  position: absolute;
  top: 50%;
  z-index: 220;
  pointer-events: none;
}

.progress {
  width: 100%;
  height: 0px;
  z-index: 200;
  position: absolute;
  top: 50%;
  -webkit-appearance: none;
  background: #aca8a8 !important;  
  z-index: 200;
  border-radius: 60px;
  transition: all 1s ease-in-out;
}

/* 鼠标悬停时的样式 */
.progress:hover {
  opacity: 1;
  /* 鼠标悬停时不透明 */
}

/* 修改滑块（thumb）的样式 */
.progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* 移除默认样式 */
  appearance: none;
  width: 14px;
  /* 滑块宽度 */
  height: 14px;
  /* 滑块高度 */
  background: url('../image/section3/btn.png') no-repeat;
  background-size: 100%;
  /* 滑块背景图片 */
  cursor: pointer;
  margin-top: -7px;
}

.progress::-moz-range-thumb {
  width: 14px;
  /* 滑块宽度 */
  height: 14px;
  /* 滑块高度 */
  background: url('../image/section3/btn.png') no-repeat;
  background-size: 100%;
  /* 滑块背景图片 */
  cursor: pointer;
}

/* 修改轨道（track）的样式 */
.progress::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
}

.progress::-moz-range-track {
  width: 100%;
  height: 2px;
  background: #ccc;
}


.lyrics {
  width: 700px;
  height: 175px;
  top: 200px;
  left: -90px;
  overflow: hidden;
  padding: 10px;
  position: relative;
  transition: scroll-top 1s ease-out;
  /* scrollbar-width: none; 
  -ms-overflow-style: none; */
}

.lyrics div {
  width: 700px;
  position: absolute;
  top: 0px;
}

/* .lyrics::-webkit-scrollbar {
  display: none; 
} */

.lyrics div p {
  height: 50px;
  font-size: 30px;
  margin: 12px 0;
  line-height: 30px;
  color: #fff;
  transition: font-size .3s, color .2s ease-in-out;
  opacity: .8;
  text-align: center;
}

.lyrics div p.active {
  color: rgb(80, 250, 255);
  font-weight: bold;
  opacity: 1;
  transition: font-size .3s, color .2s ease-in-out;
}

/* 怪物介绍 */
.page-wap {
  width: 720px;
  height: 880px;
  background: url(../image/section3/page-wap-bg.png) no-repeat;
  background-size: 100%;
  position: relative;
  top: 255px;
  left: 0px;
}

.page-wap::after {
  content: '';
  width: 295px;
  height: 722px;
  background: url(../image/section3/red_bg.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 60px;
  left: 0px;
  pointer-events: none;
}

.back-wap {
  width: 100%;
  height: 100%;
}

.back-wap::after {
  content: '';
  width: 204px;
  height: 393px;
  background: url(../image/section3/p1t.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 560px;
  left: 0px;
  pointer-events: none;
}
.back-wap::before {
  content: '';
  width: 155px;
  height: 166px;
  background: url(../image/section3/p2.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: -15px;
  left: 565px;
  pointer-events: none;
}

.page-wap span{
  position: absolute;
}
/* 为每个卡片添加不同的位置 */
.page-wap span.card1-wap {
   width: 269px;
   height: 252px;
   background: url(../image/section3/card-1.png) no-repeat;
   background-size: 100%;
   top: 54px;
   left: 22px;
  }
.page-wap span.card2-wap {
  width: 253px;
  height: 255px;
  background: url(../image/section3/card-2.png) no-repeat;
  background-size: 100%;
  top: 238px;
  left: 187px;
  /* transform-style: preserve-3d;   */
  }
  .page-wap span.card3-wap {
  width: 253px;
  height: 269px;
  background: url(../image/section3/card-3.png) no-repeat;
  background-size: 100%;
  top: 289px;
  left: 3px;
  }
  .page-wap span.card4-wap {
  width: 267px;
  height: 262px;
  background: url(../image/section3/card-4.png) no-repeat;
  background-size: 100%;
  top: 455px;
  left: 160px;
  /* transform-style: preserve-3d; */
  }
  .page-wap span.card5-wap {
  width: 238px;
  height: 224px;
  background: url(../image/section3/card-5.png) no-repeat;
  background-size: 100%;
  top: 560px;
  left: 10px;
  }

  .page-wap .footer-btn {
    width: 95px;
    height: 85px;
    /* background-color: aqua;
    background-size: 100%; */
    position: absolute;
    top: 770px;
    left: 572px;
  }

  .section3—wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    top: -905px;
    left: 10px;
  }
  .section3—wrapper::before {
    content: '';
    width: 391px;
    height: 474px;
    background: url(../image/section3/p1.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 835px;
    left: 320px;
    z-index: 2;
    pointer-events: none;
  }

  .section3—wrapper .swiper-slide.slide1 {
    width: 684px;
    height: 1632px;
    background: url(../image/section3/swiper1.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 255px;
    left: 0px;
  }

  .section3—wrapper .swiper-slide.slide2 {
    width: 678px;
    height: 1632px;
    background: url(../image/section3/swiper2.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 255px;
    left: 0px;
  }

  .section3—wrapper .swiper-slide.slide3 {
    width: 682px;
    height: 1632px;
    background: url(../image/section3/swiper3.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 255px;
    left: 0px;
  }

  .section3—wrapper .swiper-slide.slide4 {
    width: 681px;
    height: 1632px;
    background: url(../image/section3/swiper4.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 255px;
    left: 0px;
  }

  .section3—wrapper .swiper-slide.slide5 {
    width: 682px;
    height: 1632px;
    background: url(../image/section3/swiper5.png) no-repeat;
    background-size: 100%;
    position: relative;
    top: 255px;
    left: 0px;
  }

  
.section3-button-prev,
.section3-button-next {
    position: absolute;
    width: 58px;
    height: 73px;
    background: url(../image/section3/left.png) no-repeat;
    background-size: 100%;
    cursor: pointer;
    z-index: 10;
    top: 650px;
}
.section3-button-prev {
    left: 0px;
}
.section3-button-next {
  right: 20px;
  width: 58px;
  height: 73px;
  background: url(../image/section3/right.png) no-repeat;
  background-size: 100%;
}