.topic {
  width: 100%;
  height: 12.40rem;
  /* background: url(../image/section1/bg.png) no-repeat; */
  background-size: 100%;
  position: relative;
  top: 0;
  left: 0;
}

/* .topic.pc_down {
  background: url(../image/section1/bg-donw.png) no-repeat;
  background-size: 100%;

} */

.iconList {
  position: absolute;
  right: 0.1rem;
  top: 0.38rem;
  display: flex;
  align-items: center;
  jccustify-content: center;
}

.iconList a {
  width: .59rem;
  cursor: pointer;
  margin-right: 0.2rem;
}

.iconList a:first-child {
  width: .60rem;
  height: .60rem;
  background: url(../image/section1/btn-home.png) no-repeat;
  background-size: 100%;
}

.iconList a:nth-child(2) {
  width: .6rem;
  height: .6rem;
  background: url(../image/section1/btn-group.png) no-repeat;
  background-size: 100%;
}

.iconList a:nth-child(3) {
  width: .6rem;
  height: .6rem;
  background: url(../image/section1/btn-fb.png) no-repeat;
  background-size: 100%;
}

.iconList a:nth-child(4) {
  width: .72rem;
  background: url(../image/section1/btn-dis.png) no-repeat;
  background-size: 100%;
}

.iconList a:nth-child(5) {
  width: .67rem;
  background: url(../image/section1/btn-ba.png) no-repeat;
  background-size: 100%;
}

.iconList a:nth-child(6) {
  width: .76rem;
  background: url(../image/section1/btn-youtu.png) no-repeat;
  background-size: 100%;
}

.float-award {
  position: absolute;
  cursor: pointer;
  width: 2.8rem;
  height: 2.7rem;
  top: 3rem;
  right: 0rem;
  background: url(../image/section1/float-award.png) no-repeat;
  background-size: 100%;
}

.plays {
  cursor: pointer;
  width: .98rem;
  height: .98rem;
  position: absolute;
  top: 3.2rem;
  left: 50%;
  background: url(../image/section1/btn-play.png) no-repeat;
  background-size: 100%;
  /* transform: translateX(-0.555rem); */
  margin-left: -0.49rem;
}

.main-btn,
.main-btn-down {
  cursor: pointer;
  width: 5.51rem;
  height: 1.84rem;
  position: absolute;
  top: 7rem;
  left: 50%;
  margin-left: -2.3rem;
  /* transform: translateX(-50%); */
  background: url(../image/section1/main-btn.png) no-repeat;
  background-size: 100%;
}
.main-btn.btn_top {
  top: 6.5rem;
}

.main-btn-down {
  top: 7.5rem;
}

.main-btn-down.over {
  cursor: pointer;
  width: 6.8rem;
  height: 2.69rem;
  position: absolute;
  top: 6.6rem;
  left: 50%;
  margin-left: -3.5rem;
  /* transform: translateX(-50%); */
  background: url(../image/section1/main-down.png) no-repeat;
  background-size: 100%;
}



.main-btn-down::after {
  content: "";
  display: inline-block;
  width: .60rem;
  height: .67rem;
  background: url(../image/section1/btn-hand-login.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  right: 0.4rem;
  top: 1.8rem;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
  cursor: default;
}

.main-btn-down::before {
  content: "";
  display: inline-block;
  width: 0.53rem;
  height: 0.52rem;
  background: url(../image/section1/icon-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 0.5rem;
  left: 1.2rem;
  z-index: 1;
  cursor: default;
}


.main-btn::after {
  content: "";
  display: inline-block;
  width: .65rem;
  height: .54rem;
  background: url(../image/section1/btn-hand-login.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  right: -0.05rem;
  top: 1.4rem;
  -webkit-animation: fblike 1s ease-in-out infinite;
  animation: fblike 1s ease-in-out infinite;
  cursor: default;
}

.main-btn::before {
  content: "";
  display: inline-block;
  width: 0.53rem;
  height: 0.52rem;
  background: url(../image/section1/icon-red.png) no-repeat;
  background-size: 100%;
  cursor: pointer;
  position: absolute;
  top: 0.2rem;
  left: 0.3rem;
  z-index: 1;
  cursor: default;
}

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

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

.topic .btn-xia {
  top: 8.2rem;
}

.btn-xia {
  width: 1.08rem;
  height: 1.21rem;
  background: url(../image/section1/btn-xia.png) no-repeat;
  background-size: 100%;
  position: absolute;
  cursor: pointer;
  left: 50%;
  margin-left: -0.5rem;
  z-index: 5;
  bottom: 0rem;
}

.countdown {
  display: flex;
  width: 7.95rem;
  height: 1.49rem;
  font-size: 0.56rem;
  font-family: Arial;
  font-weight: bold;
  /* color: #e4f8ff; */
  background: url(../image/section1/count-down.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 4.8rem;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  /* pointer-events: none; */
}

/* .countdown.finaly {
  width: 5.93rem;
  height: 1.51rem;
  background: url(../image/section1/count-down.png) no-repeat;
  background-size: 100%;
} */

/* .countdown.over {
  width: 5.93rem;
  height: 1.51rem;
  background: url(../image/section1/count-down.png) no-repeat;
  background-size: 100%;
} */

.countdown.over {
  width: 7.95rem;
  height: 1.49rem;
  position: absolute;
  top: 5rem;
  background: url(../image/section1/count-down-finaly.png) no-repeat;
  background-size: 100%;
}

.countdown .day {
  position: relative;
  /* width: 0.27rem; */
  letter-spacing: 0.1rem;
  top: 0.58rem;
  left: 1.32rem;
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  /* color: #fff; */
  background: linear-gradient(to bottom, 
    #ffffff 0%,
    #f3d7d7 50%,
    #ff6666 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 {
  position: relative;
  letter-spacing: 0.53rem;
  top: 0.58rem;
  left: 2.38rem;
  /* letter-spacing: 0.25rem; */
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  /* color: #fff; */
  background: linear-gradient(to bottom, 
  #ffffff 0%,
    #f3d7d7 50%,
    #ff6666 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.wen {
  left: 2.36rem;
  letter-spacing: 0.5rem;
  /* color: #fff; */
  background: linear-gradient(to bottom, 
  #ffffff 0%,
  #f3d7d7 50%,
  #ff6666 100%
  );
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  -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 {
  position: relative;
  letter-spacing: 0.53rem;
  top: 0.58rem;
  left: 2.6rem;
  /* color: #fff; */
  background: linear-gradient(to bottom, 
  #ffffff 0%,
  #f3d7d7 50%,
  #ff6666 100%
  );
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  -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.wen {
  left: 2.58rem;
  letter-spacing: 0.5rem;
  /* color: #fff; */
  background: linear-gradient(to bottom, 
  #ffffff 0%,
  #f3d7d7 50%,
  #ff6666 100%
  );
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  -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 {
  position: relative;
  letter-spacing: 0.53rem;
  top: 0.58rem;
  left: 2.82rem;
  /* color: #fff; */
  background: linear-gradient(to bottom, 
  #ffffff 0%,
  #f3d7d7 50%,
  #ff6666 100%
  );
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  -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.wen {
  left: 2.815rem;
  letter-spacing: 0.47rem;
  /* color: #fff; */
  background: linear-gradient(to bottom, 
  #ffffff 0%,
  #f3d7d7 50%,
  #ff6666 100%
  );
  /* background: linear-gradient(to bottom, #4891DF, #0A3D72); */
  -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));
}



.footer-img {
  width: 100%;
  height: 4.59rem;
  position: absolute;
  bottom: -1.5rem;
  left: 0;
}



/* 播放按钮清除 */
.video-block {
  top: 3.2rem;
  /* left: 7rem; */
  /* display: none; */
}

/* 向下箭头 */
.section1_btn {
  width: 1.28rem;
  height: 1.29rem;
  background: url(../image/section1/set1_btn.png) no-repeat;
  background-size: 100%;
  position: absolute;
  bottom: 2.3rem;
  left: 50%;
  margin-left: -0.65rem;
}


/* 光斑 */
.poker-star {
  width: 100%;
  height: 4.1rem;
  position: absolute;
  top: 4.7rem;
  left: 50%;
  transform: translateX(-50%);
  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.2;
  transition: all .9s ease-out;
  position: absolute;
}


.poker-star .poker-star1,
.poker-star .poker-star1-2,
.poker-star .poker-star1-3,
.poker-star .poker-star1-4,
.poker-star .poker-star1-5,
.poker-star .poker-star1-6,
.poker-star .poker-star1-7,
.poker-star .poker-star1-8,
.poker-star .poker-star1-9,
.poker-star .poker-star1-10,
.poker-star .poker-star1-11,
.poker-star .poker-star1-12,
.poker-star .poker-star1-13,
.poker-star .poker-star1-14,
.poker-star .poker-star1-15,
.poker-star .poker-star1-16,
.poker-star .poker-star1-17,
.poker-star .poker-star1-18 {
  position: absolute;
  width: .27rem;
  height: .27rem;
  top: 2.3rem;
  left: 3.6rem;
}

.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: .23rem;
  height: .23rem;
  top: 1.8rem;
  left: .75rem;
  /* 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,
.poker-star .poker-star3-7,
.poker-star .poker-star3-8,
.poker-star .poker-star3-9,
.poker-star .poker-star3-10,
.poker-star .poker-star3-11,
.poker-star .poker-star3-12,
.poker-star .poker-star3-13,
.poker-star .poker-star3-14,
.poker-star .poker-star3-15,
.poker-star .poker-star3-16,
.poker-star .poker-star3-17 {
  position: absolute;
  width: .21rem;
  height: .2rem;
  top: 1.4rem;
  left: 1.65rem;
  /* animation: butterfly-float3 6s 3.1s infinite ease-out; */
}


.poker-star .poker-star4,
.poker-star .poker-star4-2,
.poker-star .poker-star4-3,
.poker-star .poker-star4-4,
.poker-star .poker-star4-5 {
  position: absolute;
  width: .13rem;
  height: .13rem;
  top: 1.4rem;
  left: 1.65rem;
  /* animation: butterfly-float3 6s 3.1s infinite ease-out; */
}



/* 第二步:左侧下 6-9
        2:1,2
*/
/* .poker-star .poker-star1-2 {
  top: 1.1rem;
  left: 2.9rem;
  animation: butterfly-float1 6s .1s infinite ease-out;
}

.poker-star .poker-star1-6 {
  top: 4.1rem;
  left: 0.5rem;
  animation: butterfly-float1 6s 1.1s infinite ease-out;
}

.poker-star .poker-star1-7 {
  top: 3.4rem;
  left: 1.9rem;
  animation: butterfly-float1 6s 2.1s infinite ease-out;
}

.poker-star .poker-star1-8 {
  top: 2.5rem;
  left: 2.4rem;
  animation: butterfly-float1 6s 3.1s infinite ease-out;
}

.poker-star .poker-star1-9 {
  top: 2.3rem;
  left: 0.9rem;
  animation: butterfly-float1 6s 3.6s infinite ease-out;
} */

.poker-star .poker-star2 {
  top: 3.25rem;
  left: 0.72rem;
  animation: butterfly-float3 6s 3.6s infinite ease-out;
}

.poker-star .poker-star2-2 {
  top: 2.75rem;
  left: 1.62rem;
  animation: butterfly-float3 6s 4.1s infinite ease-out;
}


/* 中间左 1: 1,3,4,5,10,11
          2: 3,4,5,6,7
          3: 1,2,6,7
          4:1,2,3
*/

.poker-star .poker-star1 {
  top: 4.2rem;
  left: 6.3rem;
  animation: butterfly-float1 6s 1.1s infinite ease-out;
}

.poker-star .poker-star1-3 {
  top: 3.5rem;
  left: 7.21rem;
  animation: butterfly-float1 6s 2.1s infinite ease-out;
}

.poker-star .poker-star1-4 {
  top: 3rem;
  left: 6.5rem;
  animation: butterfly-float1 6s 3.1s infinite ease-out;
}

.poker-star .poker-star1-5 {
  top: 2.45rem;
  left: 7.65rem;
  animation: butterfly-float1 6s 4.1s infinite ease-out;
}

.poker-star .poker-star1-10 {
  top: 2.15rem;
  left: 5.95rem;
  animation: butterfly-float1 6s 5.1s infinite ease-out;
}

.poker-star .poker-star1-11 {
  top: 1.75rem;
  left: 6.45rem;
  animation: butterfly-float1 6s 6.1s infinite ease-out;
  transform: scale(.9);
}


.poker-star .poker-star2-3 {
  top: 3.78rem;
  left: 6.33rem;
  animation: butterfly-float3 6s 3.1s infinite ease-out;
}

.poker-star .poker-star2-4 {
  top: 3.12rem;
  left: 5.75rem;
  animation: butterfly-float3 6s 3.1s infinite ease-out;
}

.poker-star .poker-star2-5 {
  top: 2.6rem;
  left: 6.8rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star2-6 {
  top: 2.7rem;
  left: 8.1rem;
  animation: butterfly-float3 6s 3.6s infinite ease-out;
}

.poker-star .poker-star2-7 {
  top: 2.7rem;
  left: 9.1rem;
  animation: butterfly-float3 6s 4.6s infinite ease-out;
}

.poker-star .poker-star3 {
  top: 1.61rem;
  left: 7rem;
  animation: butterfly-float3 6s 4.6s infinite ease-out;
}

.poker-star .poker-star3-2 {
  top: 1.68rem;
  left: 7.73rem;
  animation: butterfly-floatup 6s 8.6s infinite ease-out;
}

.poker-star .poker-star3-3 {
  top: 1.3rem;
  left: 5.68rem;
  animation: butterfly-floatup 6s 8.1s infinite ease-out;
}

.poker-star .poker-star3-4 {
  top: 1.18rem;
  left: 7.7rem;
  animation: butterfly-floatup 6s 7.6s infinite ease-out;
}

.poker-star .poker-star3-5 {
  top: 1.03rem;
  left: 1.52rem;
  animation: butterfly-floatup 6s 8.6s infinite ease-out;
}


/* .poker-star .poker-star3-6 {
  top: 0.46rem;
  left: 6.53rem;
}

.poker-star .poker-star3-7 {
  top: 0.46rem;
  left: 7.03rem;
} */


.poker-star .poker-star4 {
  top: 0.23rem;
  left: 5.92rem;
  animation: butterfly-floatup 6s 2.1s infinite ease-out;
}


.poker-star .poker-star4-2 {
  top: 0.46rem;
  left: 6.53rem;
  animation: butterfly-floatup 6s 3.1s infinite ease-out;
}

.poker-star .poker-star4-3 {
  top: 0.46rem;
  left: 7.03rem;
  animation: butterfly-floatup 6s 4.1s infinite ease-out;
}

/* 中间右 
        1:12,13,14,15,16,17
        3:8,9,10,11,12,13,14,15,16
*/

.poker-star .poker-star1-12 {
  top: 2.6rem;
  left: 10.11rem;
  animation: butterfly-float1 6s 1.1s infinite ease-out;
}


.poker-star .poker-star1-13 {
  top: 4.25rem;
  left: 12.41rem;
  animation: butterfly-float1 6s 2.1s infinite ease-out;
}

.poker-star .poker-star1-14 {
  top: 4rem;
  left: 13.81rem;
  animation: butterfly-float1 6s 3.1s infinite ease-out;
}

.poker-star .poker-star1-15 {
  top: 3.5rem;
  left: 12.41rem;
  animation: butterfly-float1 6s 4.1s infinite ease-out;
}

.poker-star .poker-star1-16 {
  top: 2.4rem;
  left: 12.91rem;
  animation: butterfly-float1 6s 5.1s infinite ease-out;
}


.poker-star .poker-star1-17 {
  top: 0.6rem;
  left: 14.55rem;
  animation: butterfly-float1 6s 5.5s infinite ease-out;
}

.poker-star .poker-star1-18 {
  top: 1.7rem;
  left: 18.55rem;
  animation: butterfly-float1 6s 6.5s infinite ease-out;
}

.poker-star .poker-star2-7 {
  top: 3.1rem;
  left: 12.91rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-8 {
  top: 2.7rem;
  left: 10.51rem;
  animation: butterfly-float3 6s 3.1s infinite ease-out;
}

.poker-star .poker-star3-9 {
  top: 2.1rem;
  left: 10.31rem;
  animation: butterfly-float3 6s 3.6s infinite ease-out;
}

.poker-star .poker-star3-10 {
  top: 0.5rem;
  left: 10.71rem;
  animation: butterfly-float3 6s 2.2s infinite ease-out;
}

.poker-star .poker-star3-11 {
  top: 0.2rem;
  left: 11.15rem;
  animation: butterfly-float3 6s 3.6s infinite ease-out;
}

.poker-star .poker-star3-12 {
  top: 0.7rem;
  left: 12.81rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-13 {
  top: 0.2rem;
  left: 13.21rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-14 {
  top: 1.5rem;
  left: 14.01rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-15 {
  top: 3.1rem;
  left: 14.21rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-16 {
  top: 1.3rem;
  left: 18.31rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-6 {
  top: 3.1rem;
  left: 12.21rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star3-7 {
  top: 3.9rem;
  left: 11.61rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

.poker-star .poker-star4-4 {
  top: 0.35rem;
  left: 8.51rem;
  animation: butterfly-float3 6s 2.6s infinite ease-out;
}

/* 左上 */


/* 中间向上 */



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

  50% {
    transform: translateX(-0.1rem) translateY(-0.15rem);
    opacity: .1;
  }

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

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

  50% {
    transform: translateX(-0.1rem);
    opacity: .1;
  }

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

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

  50% {
    transform: translateX(-0.05rem) translateY(-0.15rem) scale(.9);
    opacity: .1;
  }

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

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

  50% {
    transform: translateX(.05rem) translateY(-0.1rem);
    opacity: .1;
  }

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

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

  50% {
    transform: translateX(.03rem) translateY(-0.15rem);
    opacity: .1;
  }

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

.content {
  position: relative;
}