/*第一屏*/
.topic {
  width: 100%;
  height: 1550px;  position: relative;
  background-size: 100%;
}

.topic.over {
  height: 1300px;
}

/* .topic.overSection1   {
  height: 1170px;
} */

.topic-video {
  width: 181px;
  height: 181px;
  position: absolute;
  top: 360px;
  left: 290px;
}
/* 倒计时、预下载播放按钮定位 */
.topic-video.down {
  top: 360px;
  left: 290px;
}

.topic-video.overVideo {
  top: 360px;
  left: 290px;
}

.order-bg .reward-bg {
  position: absolute;
  left: 155px;
  top: 1062px;
  width: 446px;
  overflow: hidden;
  height: 45px;
  background-image: none;
}

.order-bg .requ {
  position: absolute;
  width: 558px;
  height: 175px;
  top: 228px;
  left: 83px;
  /* background-color: #0b3787; */
  z-index: 5;
}

.order-bg .reward-list {
  position: absolute;
  font-size: 19.5px;
  font-weight: bold;
  white-space: nowrap;
  color: #fff;
  line-height: 45px;
  margin-left: 180px;
  -moz-animation: my-animation 45s linear infinite;
  -webkit-animation: my-animation 45s linear infinite;
  animation: my-animation 45s linear infinite;
}

.reward-list .reward-list-item {
  display: inline;
  margin-right: 160px;
}

.reward-text-glow {
  color: #ffffff;
  text-shadow: 0 0 7px rgba(191, 69, 142, 0.92), 0 0 10px rgba(191, 69, 142, 0.7);
}

@keyframes my-animation {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    transform: translate3d(0%, 0, 0);
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-90%, 0, 0);
  }
}

/* .topic-video.over {
  top: 832px;
} */

/* 
.topic-video .btn-play::before {
  content: '';
  position: absolute;
  width: 156px;
  height: 156px;
  background: url(../image/section1/btn-play-bg.png) no-repeat;
  background-size: 100%;
  animation: rotate 12s infinite linear;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
} */

.topic-video .btn-play::after {
  content: '';
  position: absolute;
  width: 117px;
  height: 117px;
  background: url(../image/section1/btn-play.png) no-repeat;
  background-size: 100%;
  top: 245px;
  left: 0px;
}

.topic-video .topic-video-light {
  position: absolute;
  background: url(../image/section1/topic-video-light.png) no-repeat;
  background-size: 100%;
  width: 720px;
  height: 500px;
  top: -162px;
  left: -271px;
}

.topic .topic-slogan {
  position: absolute;
  background: url(../image/section1/slogan.png) no-repeat;
  background-size: 100%;
  width: 720px;
  height: 445px;
  top: 470px;
  left: calc((720px - 720px) / 2);
}

.topic .topic-slogan.over {
 position: absolute;
  background: url(../image/section1/slog-over.png) no-repeat;
  background-size: 100%;
  width: 720px;
  top: 455px;
  left: calc((720px - 720px) / 2);
}

.topic .topic-slogan.countdown-status {
  background: url(../image/section1/slogan-down.png) no-repeat;
  background-size: 100%;
  top: 495px;
  left: calc((720px - 720px) / 2);
}

/* .topic .topic-slogan.down {
  display: none;
} */

.topic .topic-slogan.topic-slogan-none {
  display: block;
}

.topic-store {
  position: absolute;
  width: 720px;
  display: flex;
  justify-content: center;
  top: 950px;
}

.topic-store.countdown-status {
  top: 1078px;
}

.topic-store [class^="order-store-"] {
  position: absolute;
  width: 406px;
  height: 120px;
  background-repeat: no-repeat;
  background-size: 100%;
}

.topic-store .order-store-ios {
  background-image: url(../image/section1/order-store-ios.png);
}

.topic-store .order-store-ios.overtime {
  background-image: url(../image/section1/order-store-ios-overtime.png);
}

.topic-store .order-store-gp {
  background-image: url(../image/section1/order-store-gp.png);
}

.topic-store .order-store-gp.overtime {
  background-image: url(../image/section1/order-store-gp-overtime.png);
}

.topic-store .order-store-ios.active::before,
.topic-store .order-store-gp.active::before {
  content: "";
  display: inline-block;
  width: 37px;
  height: 37px;
  background: url(../image/section1/fb-like-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: -12px;
  left: 385px;
  z-index: 1;
}

.topic-store .order-store-ios.active::after,
.topic-store .order-store-gp.active::after {
  content: "";
  display: inline-block;
  width: 68px;
  height: 68px;
  background: url(../image/section1/fb-like-hand.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 77px;
  left: 385px;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
}

 /* @font-face {
  font-family: 'SansH1Heavy';
  src: url('../../font/ToronoGlitchSans\ H1\ Heavy.ttf');
}  */


.countdown {
  display: flex;
  width: 700px;
  height: 63px;
  font-size: 65px;
  font-family: SansH1Heavy;
  font-weight: bold;
  color: #ffffff;
  background: url(../image/section1/countdown-bg1.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 10px;
  top: 880px;

  opacity: 0;
  /* pointer-events: none; */
  z-index: 1;
}

.countdown.over {
  display: none;
}

.hidden {
  visibility: hidden;
}

.countdown-second {
  position: absolute;
  left: 24px;
  top: 947px;
  width: 672px;
  height: 110px;
  opacity: 0;
  background: url(../image/section1/countdown-bg2.png) no-repeat;
  background-size: 100%;
}

.countdown-second.over {
  display: none;
}

.countdown .day {
  position: absolute;
  top: 66px;
  left: 194px;
  letter-spacing: 10px;
  width: 50px;
  /* background: linear-gradient(to bottom, #6BB8F7, #1D5A96); */
  -webkit-background-clip: text;
  color: transparent;
  /* color: #d51c1c; */
  background: linear-gradient(180deg, #ffffff 0%, #fff9db 40%, #ffe4a8 65%, #ffd27a 85%, #ffc766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* font-size: 80px; */
  filter: drop-shadow(0 0 11px rgba(206, 72, 170, 0.74)) drop-shadow(0 0 8px rgba(206, 72, 170, 0.6)) drop-shadow(0 0 5px rgba(206, 72, 170, 0.5));
}

.countdown .hour {
  position: absolute;
  top: 66px;
  left: 315px;
  letter-spacing: 4px;
  width: 121px;
  /* background: linear-gradient(to bottom, #6BB8F7, #1D5A96); */
  -webkit-background-clip: text;
  color: transparent;
  /* color: #d51c1c; */
  background: linear-gradient(180deg, #ffffff 0%, #fff9db 40%, #ffe4a8 65%, #ffd27a 85%, #ffc766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 11px rgba(206, 72, 170, 0.74)) drop-shadow(0 0 8px rgba(206, 72, 170, 0.6)) drop-shadow(0 0 5px rgba(206, 72, 170, 0.5));

}

.countdown .minute {
  position: absolute;
  top: 66px;
  left: 435px;
  letter-spacing: 4px;
  width: 121px;
  /* background: linear-gradient(to bottom, #6BB8F7, #1D5A96); */
  -webkit-background-clip: text;
  color: transparent;
  /* color: #d51c1c; */
  background: linear-gradient(180deg, #ffffff 0%, #fff9db 40%, #ffe4a8 65%, #ffd27a 85%, #ffc766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 11px rgba(206, 72, 170, 0.74)) drop-shadow(0 0 8px rgba(206, 72, 170, 0.6)) drop-shadow(0 0 5px rgba(206, 72, 170, 0.5));

}

.countdown .second {
  position: absolute;
  top: 66px;
  left: 550px;
  letter-spacing: 4px;
  width: 121px;
  /* background: linear-gradient(to bottom, #6BB8F7, #1D5A96); */
  -webkit-background-clip: text;
  color: transparent;
  /* color: #d51c1c; */
  background: linear-gradient(180deg, #ffffff 0%, #fff9db 40%, #ffe4a8 65%, #ffd27a 85%, #ffc766 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 11px rgba(206, 72, 170, 0.74)) drop-shadow(0 0 8px rgba(206, 72, 170, 0.6)) drop-shadow(0 0 5px rgba(206, 72, 170, 0.5));

}


/* 不用wow 就把.animated 删掉就行了 */
/* 白云 */
.opening-cloud {
  overflow: hidden;
  position: absolute;
  inset: 0;
  z-index: 25;
  pointer-events: none;
}

.opening-cloud .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 5000ms ease, transform 5000ms ease;
  transition-property: all;
  transition-delay: 700ms;
  transition-duration: 0ms;
  transform: scale(3);
  opacity: 1;
}

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

.topic{
  /* transition: opacity 4000ms ease, transform 4000ms ease, filter 4000ms ease; */
  transform: scale(1.2);
  transition-property: all;
  transition-delay: 700ms;
  transition-duration: 0ms;
  filter:blur(20px);
  background: url(../image/section1/sct1-bg.png) no-repeat;
  /* background-size: 720px 1128px; */
}

.topic.animated {
  transform: scale(1);
  filter: blur(0px);
  transition: opacity 2000ms ease, transform 2000ms ease, filter 2000ms ease;
}

.noclass {
  transform: none;
  filter: none;
  /* transition: none; */
  background: none;
}

.topic-guide {
  width: 52px;
  height: 89px;
  background: url(../image/section1/scrolldown.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 340px;
  top: 1140px;
  animation: bounce-inSS 2s infinite;
  cursor: pointer;
}

@keyframes bounce-inSS {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-20px);
  }

  60% {
    transform: translateY(-10px);
  }
}