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


/* .topic .title {
    position: absolute;
    top: 4.4rem;
    left: 6.3rem;
    width: 6.13rem;
    height: 2.42rem;
    content: "";
    display: inline-block;
    background: url(../image/section1/pc-slogan.png) no-repeat;
    background-size: 100%;
} */

.wap-slogan {
  position: absolute;
  top: 565px;
  left: 70px;
  width: 557px;
  height: 357px;
  content: "";
  /* display: inline-block; */
  background: url(../image/section1/wap-slogan.png) no-repeat;
  background-size: 100%;
  z-index: 10;
  /* display: none; */
}

.wap-slogan-down {
  position: absolute;
  top: 690px;
  left: 40px;
  width: 643px;
  height: 88px;
  content: "";
  /* display: inline-block; */
  background: url(../image/section1/wap-slogan-down.png) no-repeat;
  background-size: 100%;
  z-index: 10;
  display: none;
}

.countdown {
  display: flex;
  width: 630px;
  height: 159px;
  font-size: 56px;
  font-family: Arial;
  /* font-weight: bold; */
  /* color: #e4f8ff; */
  background: url(../image/section1/count-down.png) no-repeat;
  background-size: 100%;
  position: relative;
  top: 680px;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  z-index: 10;
  /* pointer-events: none; */
}
 .slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1156px;
  object-fit: cover;
  z-index: 1;
}

.video-bg1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1156px;
  background: url(../image/section1/video-bg1.png) no-repeat;
  background-size: 100%;
  z-index: 2;
}
.countdown.over {
  width: 630px;
  height: 160px;
  position: absolute;
  top: 680px;
  background: url(../image/section1/count-down-finaly.png) no-repeat;
  background-size: 100%;
  z-index: 10;
}

.countdown .day {
  width: 48px;
  height: 53px;
  position: absolute;
  top: 100px;
  left: 108px;
  letter-spacing: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  /* background: linear-gradient(to bottom, #8a0301 0%,#8a0301 50%,#8a0301 100%); */
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#ffffff 100%);
  -webkit-background-clip: text;
  color: transparent;
  /* filter: drop-shadow(-0.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(-0.01rem .01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem .01rem .06rem rgba(255, 0, 0, 0.25)); */
}

.countdown .hour {
  width: 170px;
  /* height: 53px; */
  position: absolute;
  top: 75px;
  left: 202px;
  letter-spacing: 26px;
  /* line-height: 53px; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  text-align: center;
  /* background: linear-gradient(to bottom, #8a0301 0%,#8a0301 50%,#8a0301 100%); */
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#ffffff 100%);
  -webkit-background-clip: text;
  color: transparent;
  /* filter: drop-shadow(-0.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(-0.01rem .01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem .01rem .06rem rgba(255, 0, 0, 0.25)); */
}

.countdown .minute {
  width: 170px;
  /* height: 53px; */
  position: absolute;
  top: 75px;
  left: 350px;
  letter-spacing: 26px;
  /* line-height: 53px; */
  /* display: flex;
  align-items: center;
  justify-content: center; */
  text-align: center;
  /* background: linear-gradient(to bottom, #8a0301 0%,#8a0301 50%,#8a0301 100%); */
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#ffffff 100%);
  -webkit-background-clip: text;
  color: transparent;
  /* filter: drop-shadow(-0.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(-0.01rem .01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem .01rem .06rem rgba(255, 0, 0, 0.25)); */
}

.countdown .second {
  width: 170px;
  /* height: 53px; */
  position: absolute;
  top: 75px;
  left: 500px;
  letter-spacing: 26px;
  /* padding-top: 53px; */
  /* display: flex; */
  /* align-items: center; */
  /* justify-content: center; */
  text-align: center;
  /* background: linear-gradient(to bottom, #8a0301 0%,#8a0301 50%,#8a0301 100%); */
  background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#ffffff 100%);
  -webkit-background-clip: text;
  color: transparent;
  /* filter: drop-shadow(-0.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem -0.01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(-0.01rem .01rem .06rem rgba(255, 0, 0, 0.25)) drop-shadow(.01rem .01rem .06rem rgba(255, 0, 0, 0.25)); */
}

.float-award {
  position: absolute;
  cursor: pointer;
  width: 221px;
  height: 225px;
  top: 550px;
  right: 0;
  background: url(../image/section1/float-award.png) no-repeat;
  background-size: 100%;
}

.topic .plays {
  width: 98px;
  height: 98px;
  background: url(../image/section1/btn-play.png) no-repeat;
  background-size: 100%;
  position: absolute;
  right: 300px;
  top: 365px;
  z-index: 0;
}

.bgz0 {
  display: inline-block;
  width: 154px;
  height: 166px;
  background: url(../image/section1/bgz.png) no-repeat;
  background-size: 100%;
  animation: rotate-clockwise 6s linear infinite;
  position: absolute;
  left: 260px;
  top: 461px;
}

@keyframes rotate-clockwise  {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.topic .main-btn,
.main-btn-down {
  width: 579px;
  height: 200px;
  position: absolute;
  top: 920px;
  left: 50%;
  margin-left: -285px;
  z-index: 3;
  background: url(../image/section1/main-btn.png) no-repeat;
  background-size: 100%;
}

.main-btn-down {
  width: 579px;
  height: 200px;
  position: absolute;
  top: 890px;
  left: 50%;
  margin-left: -285px;
  z-index: 2;
  background: url(../image/section1/main-down-btn.png) no-repeat;
  background-size: 100%;
}

.topic .btn_top {
  top:890px;
}

.topic .main-btn::after {
  content: "";
  display: inline-block;
  width: 101px;
  height: 98px;
  background: url(../image/section1/icon-hand.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  right: -20px;
  top: 110px;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
  cursor: default;
}

.topic .main-btn::before {
  content: "";
  display: inline-block;
  width: 59px;
  height: 63px;
  background: url(../image/section1/icon-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 15px;
  left: 80px;
  z-index: 1;
  cursor: default;
}

.main-btn.no-red-hand::after {
  content: none;
}

.main-btn.no-red-hand::before {
  content: none;
}

.topic .btn-order.over {
  background: url("../image/section1/btn-order-over.png") no-repeat;
  background-size: 100%;
  margin-left: -219px;

}

.topic .btn-order.red-hend::before,
.topic .over.red-hend::before {
  content: "";
  display: inline-block;
  height: 1124px;
  width: 34px;
  height: 34px;
  background: url(../image/section1/order-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: -14px;
  left: -13px;
  z-index: 1;
}

.topic .btn-order.red-hend::after,
.topic .over.red-hend::after {
  content: "";
  display: inline-block;
  width: 103px;
  height: 107px;
  background: url(../image/section1//order-hand.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 51px;
  left: 370px;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
}

.topic .btn-order-overtime {
  background: url(../images/warp-img/bottom/btn-order-overtime.png) no-repeat;
  background-size: 100%;
}

.topic .topic-gifts {
  position: absolute;
  top: 1174px;
  left: 20px;
  z-index: 1;
}

.topic .topic-ball {
  width: 150px;
  height: 131px;
  background: url("../images/topic-ball.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: 587px;
  left: 19px;
  -webkit-animation: ball 3s ease-in-out infinite;
  animation: ball 3s ease-in-out infinite;
  z-index: 1;
  transform-style: preserve-3d;
}

.topic .topic-ball::before {
  content: "";
  width: 228px;
  height: 254px;
  background: url("../images/topic-ball-light.png") no-repeat;
  background-size: 100%;
  position: absolute;
  top: -80px;
  left: -43px;
  transform: translateZ(-1px);
  -webkit-animation: ball-light 3s ease-in-out infinite;
  animation: ball-light 3s ease-in-out infinite;
}

@keyframes ball {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(18px);
    transform: translateY(18px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes ball-light {
  0% {
    width: 228px;
    height: 254px;
  }

  50% {
    width: 280px;
    height: 312px;
  }

  100% {
    width: 228px;
    height: 254px;
  }
}

.topic .btn-web {
  width: 138px;
  position: absolute;
  top: 1120px;
  left: 445px;
}

/* 隐藏播放按钮 */
.topic .video-block {
  /* display: none; */
  right: 313px;
  top: 365px;
}

/* 替换背景素材 */
.Down {
  background: url(../image/bg_down.jpg) no-repeat;
  background-size: 100%;
}

/* 调整按钮 */
.section_btn {
  width: 128px;
  height: 129px;
  background: url(../image/section1/set1_btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  z-index: 98;
  top: 1125px;
  margin-left: -66px;
}

.section_btndown {
  width: 128px;
  height: 129px;
  background: url(../image/section1/set1_btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  left: 50%;
  z-index: 98;
  top: 1140px;
  margin-left: -70px;
}
/* 光斑 */
.poker-star {
  width: 574px;
  height: 300px;
  position: absolute;
  top: 415px;
  left: 57px;
  z-index: 10;
  pointer-events: none;
  /* background-color: rgba(0, 0, 0, 0.8); */
}

.poker-star ul {
  display: flex;
  flex-direction: row;
  list-style: none;
}

.poker-star li {
  /* opacity: 0.5; */
  transition: all .3s ease-out;
}

.poker-star .poker-star1,
.poker-star .poker-star1-2,
.poker-star .poker-star1-3,
.poker-star .poker-star1-4,
.poker-star .poker-star1-5 {
  position: absolute;
  width: 27px;
  height: 27px;
  top: 230px;
  left: 360px;
}

.poker-star .poker-star2,
.poker-star .poker-star2-2,
.poker-star .poker-star2-3,
.poker-star .poker-star2-4,
.poker-star .poker-star2-5,
.poker-star .poker-star2-6,
.poker-star .poker-star2-7 {
  position: absolute;
  width: 23px;
  height: 23px;
  top: 180px;
  left: 75px;
  /* animation: butterfly-float2 6s 2.1s infinite ease-out; */
  /* transform: scale(.9); */
}

.poker-star .poker-star3,
.poker-star .poker-star3-2,
.poker-star .poker-star3-3,
.poker-star .poker-star3-4,
.poker-star .poker-star3-5,
.poker-star .poker-star3-6 {
  position: absolute;
  width: 21px;
  height: 20px;
  top: 140px;
  left: 165px;
  /* animation: butterfly-float3 6s 3.1s infinite ease-out; */
}


/* 第一步:右侧下 */
.poker-star .poker-star2 {
  top: 265px;
  left: 338px;
  animation: butterfly-float1 6s .2s infinite ease-out;
}

.poker-star .poker-star1 {
  top: 294px;
  left: 319px;
  animation: butterfly-float1 6s 1.1s infinite ease-out;
}


/* 第二步:左侧下 */
.poker-star .poker-star1-2 {
  top: 250px;
  left: 190px;
  animation: butterfly-float2 6s 1.6s infinite ease-out;
}

.poker-star .poker-star3-6 {
  top: 226px;
  left: 103px;
  animation: butterfly-float1 6s 2.1s infinite ease-out;
}

/* 中间左 */
.poker-star .poker-star2-5 {
  top: 180px;
  left: 150px;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star2-3 {
  top: 189px;
  left: 223px;
  animation: butterfly-float3 6s 3.1s infinite ease-out;
}



/* 中间右 */
.poker-star .poker-star2-2 {
  top: 205px;
  left: 382px;
  animation: butterfly-float3 6s 3.6s infinite ease-out;
}

.poker-star .poker-star1-3 {
  top: 170px;
  left: 391px;
  animation: butterfly-float3 6s 4.1s infinite ease-out;
}

.poker-star .poker-star3 {
  top: 171px;
  left: 470px;
  animation: butterfly-float3 6s 4.6s infinite ease-out;
}

.poker-star .poker-star1-4 {
  top: 110px;
  left: 420px;
  animation: butterfly-float1-4 6s 5.1s infinite ease-out;
}


/* 左上 */
.poker-star .poker-star1-5 {
  top: 145px;
  left: 185px;
  animation: butterfly-float1 6s 5.6s infinite ease-out;
}

.poker-star .poker-star2-6 {
  top: 125px;
  left: 145px;
  animation: butterfly-float1 6s 6.1s infinite ease-out;
}

.poker-star .poker-star2-4 {
  top: 132px;
  left: 75px;
  animation: butterfly-float1 6s 6.6s infinite ease-out;
}

/* 中间向上 */

.poker-star .poker-star3-5 {
  top: 83px;
  left: 152px;
  animation: butterfly-floatup 6s 7.1s infinite ease-out;
}

.poker-star .poker-star3-4 {
  top: 68px;
  left: 210px;
  animation: butterfly-floatup 6s 7.6s infinite ease-out;
}

.poker-star .poker-star3-3 {
  top: 76px;
  left: 312px;
  animation: butterfly-floatup 6s 8.1s infinite ease-out;
}

.poker-star .poker-star3-2 {
  top: 68px;
  left: 473px;
  animation: butterfly-floatup 6s 8.6s infinite ease-out;
}

@keyframes butterfly-float1 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(-10px) translateY(-15px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes butterfly-float1-4 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(-10px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes butterfly-float2 {
  0% {
    transform: translateY(0) scale(.9);
    opacity: 1;
  }

  50% {
    transform: translateX(-5px) translateY(-15px) scale(.9);
    opacity: .1;
  }

  100% {
    transform: translateY(0) scale(.9);
    opacity: 1;
  }
}

@keyframes butterfly-float3 {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(5px) translateY(-10px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes butterfly-floatup {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateX(3px) translateY(-15px);
    opacity: .1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


.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: 100%;
}

.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 .step-fb.fb-page-btn {
  background: url(../image/section1/nav-fb.png) no-repeat;
  background-size: 100%;
  width: 73px;
  height: 73px;
  position: absolute;
  right: 20px;
  top: 200px;
  /* z-index:99; */
}
.topic .step-fb.fb-page-btn::before {
  display: none;
}

.topic .go-home {
  background: url(../image/section1/nav-home.png) no-repeat;
  background-size: 100%;
  width: 73px;
  height: 73px;
  position: absolute;
  /* right: 105px; */
  right: 20px;
  top: 105px;
  /* z-index:99; */

}