/* 公共 */

.page {
  display: none;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.canvas-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  opacity: 0;
}

/*假如添加了video标签,可能会出现video标签默认置顶的情况,解决这个bug可以通过样式设置来规避;*/

.compatibleStyle {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-perspective: 0;
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible;
}

.hand-img {
  position: absolute;
  right: 24vw;
  top: 77vw;
  width: 9vw;
  animation: transformScale 1s linear infinite;
  -webkit-animation: transformScale 1s linear infinite;
  z-index: 2;
  filter: drop-shadow(2px 4px 6px black);
}

.hand-img1 {
  position: absolute;
  right: 24vw;
  top: 29vw;
  width: 9vw;
  animation: transformScale 1s linear infinite;
  -webkit-animation: transformScale 1s linear infinite;
  z-index: 2;
  /* filter: drop-shadow(2px 4px 6px black); */
}

.hand-img2 {
  position: absolute;
  right: 24vw;
  top: 66vw;
  width: 9vw;
  animation: transformScale 1s linear infinite;
  -webkit-animation: transformScale 1s linear infinite;
  z-index: 2;
  /* filter: drop-shadow(2px 4px 6px black); */
}

@keyframes transformScale {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 1.2);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes transformScale {
  0% {
    -webkit-transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1.2, 1.2);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

.good {
  width: 60vw;
  position: fixed;
  top: 40vw;
  left: 20vw;
  z-index: 100;
  display: none;
}

.btn-back {
  width: 12vw;
  position: absolute;
  top: 22vw;
  left: 2vw;
  z-index: 100;
}

.btn-play {
  width: 30vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  z-index: 100;
}

/* 首页 */

#page00 {
  display: block;
  background-color: #c6c9e4;
  background: url(../images/screen.jpg) center no-repeat;
  background-size: cover;
}

.footer {
  width: 76vw;
  height: 16vw;
  position: absolute;
  bottom: 4vw;
  left: 12vw;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-pic0 {
  width: 36vw;
  height: 1vw;
  background-color: #51374c;
  border-radius: 1vw;
  position: absolute;
  bottom: 0;
  left: 20vw;
}

.footer>img {
  width: 13vw;
}

.lock {
  width: 6vw;
  height: 9vw;
  text-align: center;
  position: absolute;
  top: 5vw;
  left: 47vw;
}

.lock0 {
  width: 6vw;
  position: relative;
  bottom: 2.2vw;
}

.lock1 {
  width: 5vw;
}

.unlock {
  animation: unlock 0.5s linear both;
}

@-webkit-keyframes unlock {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  25% {
    -webkit-transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 0deg);
    transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 0deg);
    transform-origin: 90% 0%;
  }
  100% {
    -webkit-transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 180deg);
    transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 180deg);
    transform-origin: 90% 0%;
  }
}

@keyframes unlock {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  25% {
    -webkit-transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 0deg);
    transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 0deg);
    transform-origin: 90% 0%;
  }
  100% {
    -webkit-transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 180deg);
    transform: translate3d(0, -2px, 0) rotate3d(0, 1, 0, 180deg);
    transform-origin: 90% 0%;
  }
}

.time-num {
  text-align: center;
  font-size: 20vw;
  line-height: 1;
  color: #fff;
  margin-top: 21vw;
}

.date-yang {
  text-align: center;
  font-size: 6vw;
  line-height: 1;
  color: #fff;
  margin-top: 5vw;
}

.date-yin {
  text-align: center;
  font-size: 4vw;
  line-height: 1;
  color: #fff;
  margin-top: 3vw;
}

.home-dialog {
  width: 96vw;
  height: 20vw;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3vw;
  margin: 0 auto;
  margin-top: 6vw;
  display: none;
}

.icon-wechat {
  width: 14vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  float: left;
  margin: 3vw;
}

.icon-wechat>img {
  width: 5vw;
}

.icon-wechat>div {
  font-size: 3.2vw;
  color: #6e6472;
}

.home-dialog-time {
  font-size: 3.2vw;
  color: #6e6472;
  float: right;
  margin: 4vw;
}

.home-dialog-text {
  float: left;
  font-size: 4vw;
  font-weight: bold;
  color: #181219;
  padding-left: 3vw;
  margin-top: -1vw;
}

/* 邀请进群 */

#page01, #page02, #page03 {
  background-color: #ededed;
}

.dialog-footer {
  width: 100vw;
  position: fixed;
  bottom: 0;
}

.dialog-invivation {
  width: 77vw;
  position: absolute;
  top: 3vw;
  left: 3vw;
}

.btn-invivation {
  width: 64vw;
  height: 33vw;
  position: absolute;
  top: 3vw;
  left: 16vw;
  z-index: 10;
}

.invivation-main {
  width: 100vw;
  height: 42vw;
  text-align: center;
  background-color: #fff;
  color: #000;
}

.group-head {
  width: 18vw;
  margin-top: 5vw;
}

.group-name {
  font-size: 5vw;
  line-height: 1;
  margin-top: 4vw;
}

.group-num {
  font-size: 4vw;
  line-height: 1;
  margin-top: 2vw;
}

.invivation-title {
  width: 80vw;
  height: 5vw;
  font-size: 5vw;
  line-height: 1;
  color: #676767;
  margin: 0 auto;
  margin-top: 8vw;
  margin-bottom: 5vw;
  text-align: center;
}

.btn-invite {
  width: 54vw;
  height: 12vw;
  background-color: #08be04;
  border-radius: 2vw;
  margin: 0 auto;
  text-align: center;
  color: #fff;
  font-size: 5vw;
  line-height: 12vw;
}

ol {
  width: 88vw;
  list-style: decimal;
  font-size: 4vw;
  color: #646464;
  margin: 0 auto;
  margin-top: 11vw;
}

/* 群聊对话 */

#page03 {
  z-index: 180;
}

.system-tips {
  font-size: 4vw;
  color: #a4a4a4;
  text-align: center;
  padding: 2vw 11vw;
}

.message {
  width: 100vw;
  height: auto;
  position: relative;
  top: 0vw;
  margin-bottom: 8vw;
  float: right;
  display: none;
}

.member-head {
  width: 11vw;
  height: 11vw;
  background-color: #fff;
  background: url(../images/head0.png) center no-repeat;
  background-size: cover;
  border-radius: 5px;
  position: absolute;
  left: 3vw;
}

.member-name {
  position: absolute;
  top: 0;
  left: 17vw;
  color: #6a6a6a;
  font-size: 3.2vw;
}

.member-dialog {
  width: max-content;
  max-width: 64%;
  background: #fff;
  border-radius: 5px;
  padding: 2.5vw;
  font-size: 4.2vw;
  color: #161616;
  position: relative;
  top: 5vw;
  left: 17vw;
}

.member-dialog>div {
  color: #526198;
  font-size: 4.5vw;
}

.member-square {
  position: absolute;
  top: 9vw;
  left: 16vw;
  width: 2vw;
  height: 2vw;
  border-radius: 1px;
  background: #fff;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.mine-square {
  position: absolute;
  top: 4.5vw;
  right: 16vw;
  width: 2vw;
  height: 2vw;
  border-radius: 1px;
  background: #96eb68;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.mine-head {
  width: 11vw;
  height: 11vw;
  background-color: #fff;
  background: url(../images/user-head.png) center no-repeat;
  background-size: cover;
  border-radius: 5px;
  position: absolute;
  right: 3vw;
}

.mine-dialog {
  width: max-content;
  max-width: 61%;
  background: #96eb68;
  border-radius: 5px;
  padding: 2.5vw;
  font-size: 4.2vw;
  color: #161616;
  position: relative;
  top: 0;
  right: 17vw;
  float: right;
}

.emoji {
  width: 5vw;
  position: relative;
  top: 1vw;
  left: -1vw;
}

.emoji1 {
  width: 5vw;
  position: relative;
  top: 1vw;
  left: 1vw;
  margin-right: 2vw;
}

.quickly {
  width: 27vw;
  position: relative;
  left: 17vw;
  top: 5vw;
  float: left;
}

.message-main {
  float: left;
}

.dialog-top {
  overflow: scroll;
}

.btns {
  width: 100vw;
  text-align: center;
  position: relative;
  float: right;
}

.btn-orange {
  width: 55vw;
  height: 12vw;
  background: url(../images/btn-orange.png) center no-repeat;
  background-size: cover;
  font-size: 4vw;
  line-height: 12vw;
  color: #fffffd;
  margin: 0 auto;
  margin-bottom: 3vw;
  margin-top: 3vw;
}

.btn-blue {
  width: 55vw;
  height: 12vw;
  background: url(../images/btn-blue.png) center no-repeat;
  background-size: cover;
  font-size: 4vw;
  line-height: 12vw;
  color: #fffffd;
  margin: 0 auto;
  margin-bottom: 3vw;
  margin-top: 3vw;
}

.excel {
  width: 54vw;
}

.idcard {
  width: 50vw;
  position: relative;
  right: 17vw;
  top: 0;
  float: right;
}

.SMS {
  width: 100vw;
  position: fixed;
  top: 0;
  z-index: 100;
  display: none;
}

.red-packet0 {
  width: 56vw;
  position: relative;
  left: 17vw;
  top: 5vw;
  float: left;
}

.red-packet1 {
  width: 56vw;
  position: relative;
  right: 17vw;
  top: 0;
  float: right;
}

.remove-chat {
  display: none;
}

.ewm {
  width: 30vw;
  position: relative;
  left: 17vw;
  top: 5vw;
  float: left;
}

.ewm-pic0 {
  display: none;
  width: 31vw;
  position: relative;
  left: -13.5vw;
  top: 4.5vw;
  float: left;
}

.ewm-pic1 {
  display: none;
  width: 30vw;
  position: relative;
  left: -44vw;
  top: 5vw;
  float: left;
  -webkit-animation: ewm-animate 3s linear infinite;
  animation: ewm-animate 3s linear infinite;
}

@keyframes ewm-animate {
  0% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(29vw);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}

/* 中毒警报 */

#page04 {
  background: url(../images/warning-bg.png) center no-repeat;
  background-size: cover;
  animation: hue-rotate 3s linear infinite;
  z-index: 200;
}

.warning-pic0 {
  width: 88vw;
  position: absolute;
  bottom: 45vw;
  left: 6vw;
  animation: turn 30s linear infinite;
}

.warning-pic1 {
  width: 80vw;
  position: absolute;
  bottom: 49vw;
  left: 10vw;
  animation: turn-re 15s linear infinite;
}

.warning-pic2 {
  width: 72vw;
  position: absolute;
  bottom: 54vw;
  left: 14vw;
  animation: turn 12s linear infinite;
}

.warning-pic3 {
  width: 64vw;
  position: absolute;
  bottom: 58vw;
  left: 18vw;
  animation: turn-re 8s linear infinite;
}

.warning-text0 {
  width: 45vw;
  position: absolute;
  bottom: 81vw;
  left: 27.5vw;
  z-index: 100;
  display: none;
}

.warning-text1 {
  width: 45vw;
  position: absolute;
  bottom: 81vw;
  left: 27.5vw;
  z-index: 100;
  display: none;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes turn-re {
  0% {
    -webkit-transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(-180deg);
  }
  75% {
    -webkit-transform: rotate(-270deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}

@keyframes hue-rotate {
  0% {
    -webkit-filter: hue-rotate(0deg);
  }
  50% {
    -webkit-filter: hue-rotate(150deg);
  }
  100% {
    -webkit-filter: hue-rotate(0deg);
  }
}

/* 网络安全锦囊 */

#page05, #page08 {
  background: url(../images/bg.jpg) center no-repeat;
  background-size: cover;
}

#page05 {
  z-index: 190;
}

.title {
  width: 90vw;
  position: absolute;
  top: 3vw;
  left: 3vw;
  z-index: 10;
}

.star0 {
  width: 79vw;
  position: absolute;
  top: 6vw;
  left: 1vw;
}

.star1 {
  width: 73vw;
  position: absolute;
  top: 4vw;
  left: 13vw;
}

.riband {
  width: 6vw;
  position: absolute;
  top: 0;
  right: 2vw;
}

.bctp {
  width: 20vw;
  position: absolute;
  top: 27.5vw;
  left: 20vw;
}

.kits-box {
  width: 96vw;
  height: 128vw;
  background: url(../images/kits-box.png) center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 29vw;
  left: 0;
}

.kits-title {
  width: 44vw;
  margin-top: 16vw;
  margin-left: 8vw;
}

.kits-text {
  font-size: 3.9vw;
  line-height: 7vw;
  color: #2152ef;
  width: 68vw;
  height: 43vw;
  text-align: justify;
  margin-left: 8vw;
  margin-top: 3vw;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.shja {
  width: 32vw;
  position: absolute;
  left: 32vw;
  top: 93vw;
}

.jb-head {
  width: 35vw;
  position: absolute;
  bottom: 21.5vw;
  left: 2vw;
  z-index: 20;
  animation: tossing 2.5s infinite;
}

.jb-body {
  width: 35vw;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
}

@keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
    -webkit-transform-origin: bottom;
  }
  50% {
    -webkit-transform: rotate(4deg);
    -webkit-transform-origin: bottom;
  }
  100% {
    -webkit-transform: rotate(-4deg);
    -webkit-transform-origin: bottom;
  }
}

.ybkj {
  width: 100%;
  font-size: 3.2vw;
  color: #4fddff;
  text-align: center;
  position: absolute;
  bottom: 2vw;
}

.btn-bg {
  width: 11vw;
  height: 11vw;
  background: url(../images/btn-bg.png) center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.btn-bg>img {
  width: 7vw;
}

.btn-text {
  font-size: 3.5vw;
  color: #fff;
  margin-top: 1vw;
}

.btn-continue {
  width: 15vw;
  text-align: center;
  position: absolute;
  bottom: 8vw;
  left: 47vw;
  z-index: 50;
}

.btn-again {
  width: 15vw;
  text-align: center;
  position: absolute;
  bottom: 8vw;
  left: 63.5vw;
  z-index: 50;
}

.btn-share {
  width: 15vw;
  text-align: center;
  position: absolute;
  bottom: 8vw;
  left: 80vw;
  z-index: 50;
}

.btn-again-animate {
  animation: turn 1s linear;
}

.btn-share-animate {
  animation: turn-share 1s ease-out both;
}

@keyframes turn-share {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(-120deg);
  }
  100% {
    -webkit-transform: rotate(-45deg);
  }
}

.police-video {
  width: 68vw;
  height: 42vw;
  position: absolute;
  top: 60vw;
  left: 8vw;
  border: 1px solid #2f57fa;
}

.video-img {
  width: 100%;
  height: 100%;
  /* background: url(../images/video-img.png?v=1) center no-repeat;
  background-size: 100% 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-play {
  width: 9vw;
}

.video-pic0 {
  width: 4vw;
  position: absolute;
  top: -0.8vw;
  left: -0.8vw;
}

.video-pic1 {
  width: 4vw;
  position: absolute;
  top: -0.8vw;
  right: -0.8vw;
}

.video-pic2 {
  width: 4vw;
  position: absolute;
  bottom: -0.8vw;
  left: -0.8vw;
}

.video-pic3 {
  width: 4vw;
  position: absolute;
  bottom: -0.8vw;
  right: -0.8vw;
}

/* 获得徽章 */

#page06 {
  background: url(../images/badge-bg.jpg) center no-repeat;
  background-size: cover;
  z-index: 170;
}

.head-bg {
  width: 23vw;
  height: 17vw;
  background: url(../images/head-bg.png) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 4vw;
  left: 3vw;
  z-index: 10;
}

.user-head {
  width: 11vw;
  height: 11vw;
  border-radius: 50%;
  /* background-color: coral; */
  background: url(../images/user-head.png) center no-repeat;
  background-size: cover;
  position: absolute;
  top: 2.5vw;
  left: 6.2vw;
}

.user-name {
  width: 60vw;
  font-size: 5vw;
  font-weight: bold;
  color: #ffffff;
  position: absolute;
  top: 1vw;
  left: 21vw;
}

.user-rank {
  width: 70vw;
  font-size: 4vw;
  color: #ffffff;
  position: absolute;
  top: 7vw;
  left: 21vw;
}

.user-num {
  font-size: 5vw;
  color: #fdda39;
}

.info-pic0 {
  width: 24vw;
  position: absolute;
  top: 3vw;
  left: 0;
}

.info-pic1 {
  width: 75vw;
  position: absolute;
  right: 0;
  top: 0;
}

.badge-box {
  width: 85vw;
  height: 100vw;
  background: url(../images/badge-box.png) center no-repeat;
  background-size: cover;
  margin: 0 auto;
  margin-top: 37vw;
  text-align: center;
  position: relative;
}

.badge {
  display: none;
  width: 65vw;
  position: absolute;
  left: 10vw;
  top: -13vw;
  z-index: 10;
}

.badge0 {
  display: none;
  width: 25vw;
  position: absolute;
  left: 30vw;
  top: -5vw;
  z-index: 10;
}

.light {
  width: 65vw;
  position: absolute;
  left: 10vw;
  top: -18vw;
}

.badge-title {
  display: none;
  width: 47vw;
  position: absolute;
  top: 23vw;
  left: 19vw;
}

.badge-title0 {
  display: none;
  width: 55vw;
  position: absolute;
  top: 25vw;
  left: 15vw;
}

.bctp-tips {
  width: 100%;
  text-align: center;
  font-size: 4vw;
  font-weight: bold;
  color: #fffffd;
  position: absolute;
  top: 26vw;
  z-index: 10;
}

.badge-text {
  padding: 12vw;
  font-size: 4vw;
  line-height: 6vw;
  color: #ffffff;
  position: absolute;
  top: 22vw;
}

.btn-lightblue {
  display: none;
  width: 59vw;
  height: 11vw;
  background: url(../images/btn-lightblue.png) center no-repeat;
  background-size: 100% 100%;
  font-size: 4vw;
  line-height: 11vw;
  color: #fffffd;
  position: absolute;
  top: 54vw;
  left: 15vw;
  z-index: 50;
}

.user-time-box {
  /* display: none; */
  text-align: center;
  width: 100%;
  position: absolute;
  top: 47vw;
  left: 0;
}

.user-time {
  display: inline-flex;
  align-items: center;
}

.user-time>img {
  width: 15vw;
}

.user-time-text {
  margin: 0 2vw;
  font-size: 3.5vw;
  color: #a3ecfe;
}

.user-time-num {
  color: #fdda39;
}

.win-rate {
  font-size: 5vw;
  color: #fdda39;
}

.shja1 {
  width: 33vw;
  position: absolute;
  left: 26vw;
  top: 62vw;
}

.btn-again1 {
  width: 15vw;
  text-align: center;
  position: absolute;
  bottom: 30vw;
  right: 4vw;
  z-index: 50;
}

.btn-share1 {
  width: 15vw;
  text-align: center;
  position: absolute;
  bottom: 10vw;
  right: 4vw;
  z-index: 50;
}

.btn-orange1 {
  display: none;
  width: 42vw;
  height: 12vw;
  background: url(../images/btn-orange.png) center no-repeat;
  background-size: 100% 100%;
  font-size: 4vw;
  line-height: 12vw;
  color: #fffffd;
  text-align: center;
  position: absolute;
  bottom: 10vw;
  left: 29vw;
  z-index: 50;
}

.star2 {
  width: 73vw;
  position: absolute;
  top: 20vw;
  left: 13vw;
}

.star3 {
  width: 90vw;
  position: absolute;
  top: 20vw;
  left: 2vw;
}

/* 分享游戏 */

#page07 {
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 999;
}

.lightstar {
  width: 100vw;
  position: absolute;
  top: -14vw;
  right: 0;
  animation: lightstar 12s ease-in-out infinite;
}

@keyframes lightstar {
  0% {
    -webkit-opacity: 0;
    -webkit-transform: rotate(0deg) translate(0%, 0%);
  }
  30% {
    -webkit-opacity: 0.6;
    -webkit-transform: rotate(1deg) translate(4%, 5%);
  }
  60% {
    -webkit-opacity: 1;
    -webkit-transform: rotate(2deg) translate(6%, 4%);
  }
  100% {
    -webkit-opacity: 0;
    -webkit-transform: rotate(3deg) translate(3%, -5%);
  }
}

.share-main {
  width: 52vw;
  position: absolute;
  top: 5vw;
  right: 10vw;
  animation: share-animate 2s ease-in-out infinite;
}

@keyframes share-animate {
  0% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
  50% {
    transform: translate(4vw, -4vw);
    -webkit-transform: translate(4vw, -4vw);
  }
  100% {
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
  }
}

/* 抽红包 */

#page08 {
  z-index: 500;
}

.red-packet-box {
  width: 80vw;
  height: 100vw;
  background: url(../images/game-red-packet.png) center no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  margin-top: 37vw;
  position: relative;
}

.light-red-packet {
  width: 80vw;
  position: absolute;
  top: 0;
}

.logo {
  width: 22vw;
  position: absolute;
  top: 10vw;
  left: 29vw;
  z-index: 10;
}

.red-packet-text {
  font-size: 5vw;
  font-weight: bold;
  line-height: 7vw;
  color: #fee2da;
  text-align: center;
  position: relative;
  top: 40vw;
}

.btn-orange2 {
  width: 50vw;
  height: 12vw;
  background: url(../images/btn-orange.png) center no-repeat;
  background-size: 100% 100%;
  font-size: 4vw;
  line-height: 12vw;
  color: #fffffd;
  text-align: center;
  position: absolute;
  bottom: 13vw;
  left: 15vw;
  display: none;
}

.btn-again-img {
  width: 40vw;
  position: absolute;
  top: 85vh;
  left: 30vw;
  display: none;
}

.shja-text {
  width: 100%;
  font-size: 3.2vw;
  color: #fc7993;
  position: absolute;
  bottom: 4vw;
  text-align: center;
  display: none;
}

.line0 {
  width: 27vw;
  position: absolute;
  bottom: 5.5vw;
  left: 5vw;
  animation: line0 2s ease-in-out;
}

.line1 {
  width: 27vw;
  position: absolute;
  bottom: 5.5vw;
  right: 5vw;
  animation: line1 2s ease-in-out;
}

@keyframes line0 {
  0% {
    -webkit-transform: translate3d(-12vw, -30vw, 0) rotate(90deg);
  }
  50% {
    -webkit-transform: translate3d(-12vw, -12vw, 0) rotate(90deg);
    opacity: 0;
  }
  51% {
    -webkit-transform: translate3d(-10vw, 0, 0) rotate(0deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes line1 {
  0% {
    -webkit-transform: translate3d(12vw, -30vw, 0) rotate(-90deg);
  }
  50% {
    -webkit-transform: translate3d(12vw, -12vw, 0) rotate(-90deg);
    opacity: 0;
  }
  51% {
    -webkit-transform: translate3d(10vw, 0, 0) rotate(0deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
}

.money-num {
  font-size: 6vw;
  color: #fedf6b;
}

/* 视频播放 */

#page09 {
  z-index: 999;
  background-color: rgb(0, 0, 0);
}