* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  background-color: #d8442f;
}
.music {
  display: block;
  width: .8rem;
  height: .8rem;
  position: absolute;
  z-index: 2;
}
.musicOn {
  animation: rotateAnimation 4s linear infinite;
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.page {
  width: 7.5rem;
  height: 14.56rem;
  position: relative;
}
.bg {
  display: block;
  width: 7.5rem;
  height: 14.56rem;
  position: absolute;
  top: 0;
  left: 0;
}
.myprize {
  display: block;
  width: 1.33rem;
  height: .43rem;
  position: absolute;
  top: .44rem;
  right: 0;
}
.rule {
  display: block;
  width: 1.33rem;
  height: .43rem;
  position: absolute;
  top: 1rem;
  right: 0;
}
.indextitle {
  display: block;
  width: 7.5rem;
  height: 7.98rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
  animation: pulse 1.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.start {
  display: block;
  width: 4.64rem;
  height: 1.44rem;
  position: absolute;
  top: 11.04rem;
  left: 50%;
  margin-left: -2.32rem;
  animation: pulse 2s ease-in-out infinite;
}
.mark {
  width: 7.5rem;
  height: 100%;
  position: fixed;
  top: 0%;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
}
.agreeDiv {
  width: 7.08rem;
  height: 6.83rem;
  position: absolute;
  top: 15%;
  left: 50%;
  margin-left: -3.54rem;
}
.agreeBg {
  display: block;
  width: 7.08rem;
  height: 6.83rem;
  position: absolute;
  top: 0;
  left: 0;
}
.agree {
  width: 2.46rem;
  height: .72em;
  position: absolute;
  top: 5.04rem;
  right: .9rem;
}
.noagree {
  width: 2.46rem;
  height: .72em;
  position: absolute;
  top: 5.04rem;
  left: .8rem;
}
@keyframes tcPopup {
  0% {
    opacity: 0;
    /* transform: scale(0.5); */
  }
  70% {
    opacity: 1;
    /* transform: scale(1.05); */
  }
  100% {
    opacity: 1;
    /* transform: scale(1); */
  }
}
.loginBox {
  width: 7.08rem;
  height: 7.97rem;
  position: absolute;
  left: 50%;
  margin-left: -3.54rem;
  top: 10%;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
}
.loginBg {
  display: block;
  width: 7.08rem;
  height: 7.97rem;
  position: absolute;
  top: 0;
  left: 0;
}
.Phone {
  width: 5.34rem;
  height: .55rem;
  color: #cccccc;
  font-size: .2rem;
  display: block;
  border: .01rem solid #f85d48;
  border-radius: .08rem;
  position: absolute;
  top: 2.25rem;
  left: 0.86rem;
}

.Phone input,.ImageCode input,.messageCode input{
  height: .55rem;
  background-color: #fff;
}
.el-input__inner {
  border: none;
}
.ImageCode {
  width: 3.57rem;
  height: .55rem;
  color: #cccccc;
  font-size: .2rem;
  display: block;
  border: .01rem solid #f85d48;
  border-radius: .08rem;
  position: absolute;
  top: 3.12rem;
  left: 0.86rem;
}
.ImageCodeDiv {
  width: 1.6rem;
  height: .55rem;
  display: block;
  border-radius: .08rem;
  position: absolute;
  top: 3.12rem;
  right: .9rem;
  background-color: #999;
}
.messageCode {
  width: 3.57rem;
  height: .55rem;
  color: #cccccc;
  font-size: .2rem;
  display: block;
  border: .01rem solid #f85d48;
  border-radius: .08rem;
  position: absolute;
  top: 3.97rem;
  left: 0.86rem;
}
.messageCodeDiv {
  width: 1.6rem;
  height: .55rem;
  display: block;
  border-radius: .08rem;
  position: absolute;
  top: 3.97rem;
  right: 0.9rem;
  background-color: #f75232;
  color: #fff;
  font-size: .2rem;
  text-align: center;
  line-height: .54rem;
}
.submit {
  display: block;
  width: 2.6rem;
  height: .84rem;
  position: absolute;
  bottom: 1.06rem;
  left: 50%;
  margin-left: -1.3rem;
}
.codetxt {
  color: #858a99;
  font-size: .16rem;
  position: absolute;
  top: 3.7rem;
  right: 1.2rem;
}

.ruleBox {
  width: 7.06rem;
  height: 11.06rem;
  position: absolute;
  left: 50%;
  margin-left: -3.53rem;
  top: 10%;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
}
.ruleBg {
  display: block;
  width: 7.06rem;
  height: 11.06rem;
  position: absolute;
  top: 0;
  left: 0;
}
.close {
  display: block;
  width: .7rem;
  height: .7rem;
  position: absolute;
  left: 50%;
  margin-left: -.35rem;
  bottom: -1rem;
}
.close2 {
  display: block;
  width: .7rem;
  height: .7rem;
  position: absolute;
  top: 0.2rem;
  right: -1rem;
}
.twoDrawBox,.oneDrawBox {
  width: 7.08rem;
  height: 7.24rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -3.54rem;
  margin-top: -3.62rem;
  transform: rotate(90deg);
}
.twoDrawBg,.oneDrawBg {
  display: block;
  width: 7.08rem;
  height: 7.24rem;
  position: absolute;
  top: 0;
  left: 0;
}
.twoDrawBtn,.oneDrawBtn {
  display: block;
  width: 2.6rem;
  height: .84rem;
  position: absolute;
  left: 50%;
  margin-left: -1.3rem;
  bottom: .6rem;
}
.redPacketBox {
  width: 7.08rem;
  height: 7.24rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -3.62rem;
  margin-left: -3.54rem;
  transform: rotate(90deg);
}
.redPacketBg {
  display: block;
  width: 7.08rem;
  height: 7.24rem;
  position: absolute;
  top: 0;
  left: 0;
}
.entityBox {
  width: 7.08rem;
  height: 10.59rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -3.54rem;
}
.entityBg {
  display: block;
  width: 7.08rem;
  height: 10.59rem;
  position: absolute;
  top: 0;
  left: 0;
}
.userName {
  width: 3.3rem;
  height: .34rem;
  color: #cccccc;
  font-size: .2rem;
  display: block;
  border: .01rem solid #ca391a;
  border-radius: 4px;
  position: absolute;
  bottom: 3.4rem;
  right: 1.35rem;
}
.userPhone {
  width: 3.3rem;
  height: .34rem;
  color: #cccccc;
  font-size: .2rem;
  display: block;
  border: .01rem solid #ca391a;
  border-radius: 4px;
  position: absolute;
  bottom: 3rem;
  right: 1.35rem;
}
.userAddress {
  width: 3.3rem;
  height: .34rem;
  color: #cccccc;
  font-size: .2rem;
  display: block;
  border: .01rem solid #ca391a;
  border-radius: 4px;
  position: absolute;
  bottom: 2.6rem;
  right: 1.35rem;
}
.userName input,.userPhone input,.userAddress input{
  height: .28rem;
  background-color: #fff;
}
.entityBtn {
  display: block;
  width: 2.6rem;
  height: .84rem;
  position: absolute;
  left: 50%;
  margin-left: -1.3rem;
  bottom: .6rem;
}
.oneNoPrizeBox,.twoNoPrizeBox,.todayNoDrawBox,.getPrizeBox,.lastTwoNoPrizeBox,.lastNoDrawBox {
  width: 7.08rem;
  height: 6.15rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -3.54rem;
  margin-top: -3.075rem;
  transform: rotate(90deg);
}
.oneNoPrizeBg,.twoNoPrizeBg,.todayNoDrawBg,.getPrizeBg,.lastTwoNoPrizeBg,.lastNoDrawBg {
  display: block;
  width: 7.08rem;
  height: 6.15rem;
  position: absolute;
  top: 0;
  left: 0;
}
.getPrizeBox2,.todayNoDrawBox2 {
  transform: rotate(0deg);
}
.fangwen {
  display: block;
  width: 2.6rem;
  height: .84rem;
  position: absolute;
  left: 50%;
  margin-left: -1.3rem;
  bottom: .8rem;
}
.moreBtn {
  display: block;
  width: 2.88rem;
  height: .84rem;
  position: absolute;
  left: 50%;
  margin-left: -1.44rem;
  bottom: .8rem;
}
.noMyPrizeBox {
  width: 7.08rem;
  height: 9.64rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -3.54rem;
}
.noMyPrizeBg {
  display: block;
  width: 7.08rem;
  height: 9.64rem;
  position: absolute;
  top: 0;
  left: 0;
}
.redPacketMyPrizeBox {
  width: 7.08rem;
  height: 11.19rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -3.54rem;
}
.redPacketMyPrizeBg {
  display: block;
  width: 7.08rem;
  height: 11.19rem;
  position: absolute;
  top: 0;
  left: 0;
}
.entityMyPrizeBox {
  width: 7.08rem;
  height: 9.64rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -3.54rem;
}
.entityMyPrizeBg {
  display: block;
  width: 7.08rem;
  height: 9.64rem;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes shou {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.jixuBox,.cuoBox {
  width: 7.08rem;
  height: 6.4rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -3.54rem;
  margin-top: -3.2rem;
  transform: rotate(90deg);
}
.jixuBg,.cuoBg {
  display: block;
  width: 7.08rem;
  height: 6.4rem;
  position: absolute;
  top: 0;
  left: 0;
}
.jixuBtn,.cuoBtn {
  width: 2.6rem;
  height: .9rem;
  position: absolute;
  left: 50%;
  margin-left: -1.3rem;
  bottom: .8rem;
}
.datiBox {
  width: 8.1rem;
  height: 6.08rem;
  animation: tcPopup 0.3s ease-out forwards;
  transform-origin: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.05rem;
  margin-top: -3.04rem;
  background: url('../images/bg2.png') no-repeat;
  background-size: 100%;
  overflow: hidden;
  transform: rotate(90deg);
}
.levelTitle {
  display: block;
  width: 1.95rem;
  height: .74rem;
  margin: .3rem auto 0;
}
.quesTitle {
  width: 7rem;
  display: flex;
  margin: .46rem auto .36rem;
  color: #79503b;
  font-size: .26rem;
  font-weight: bold;
}
.datiDiv {
  width: 7.14rem;
  height: auto;
  margin: 0 auto .24rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.answer {
  width: 3.4rem;
  height: .73rem;
  background: url('../images/ansBg.png') no-repeat;
  background-size: 100%;
  margin: 0 auto .1rem;
  color: #ba1f1f;
  font-size: .22rem;
  display: flex;
  align-items: center;
  padding-right: .1rem;
}
.answer div {
  font-weight: bold;
  margin-left: .14rem;
  margin-right: .06rem;
}
.answerClick {
  background: url('../images/ansBgSel.png') no-repeat;
  background-size: 100%;
  color: #fff;
}
.tijiao {
  display: block;
  width: 2.6rem;
  height: .84rem;
  margin: 0 auto 0;
}
.moveBg {
  width: 7.5rem;
  height: 58.95rem;
  background: url('../images/page2.png') no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0rem;
  /* 关键点 */
  transform: translateY(0);
  transition: transform 2s linear;
  will-change: transform;
}
.gk1 {
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 1.58rem;
  top: 7.67rem;
}
.gk2 {
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 1.58rem;
  top: 15.08rem;
}
.gk3 {
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 1.58rem;
  top: 22.46rem;
}
.gk4 {
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 1.58rem;
  top: 29.9rem;
}
.gk5 {
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 1.58rem;
  top: 37.29rem;
}
.gk6 {
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 1.58rem;
  top: 44.72rem;
}
.drawBtn2Box {
  width: .84rem;
  height: 2.6rem;
  position: absolute;
  left: 1.38rem;
  top: 53.5rem;
}
.drawBtn2 {
  display: block;
  width: .84rem;
  height: 2.6rem;
  position: absolute;
  left: 0;
  top: 0;
}
.gkimg {
  display: block;
  width: .6rem;
  height: 1.8rem;
  position: absolute;
  left: 0;
  top: 0;
}
.shou {
  display: block;
  width: .35rem;
  height: .44rem;
  position: absolute;
  left: -.14rem;
  bottom: -.05rem;
  animation: shou 2s ease-in-out infinite;
}
.logo {
  display: block;
  width: .68rem;
  height: 2.4rem;
  position: absolute;
  top: .36rem;
  right: .4rem;
}
.maBox {
  width: 2.52rem;
  height: 3.09rem;
  position: absolute;
  top: 1.4rem;
  left: 2.44rem;
  transform: translateX(0);
  will-change: transform;
}
.ma {
  display: block;
  width: 2.18rem;
  height: 3.09rem;
  position: absolute;
  top: 0;
  left: 0;
}
.ma1 {
  display: block;
  width: 2.52rem;
  height: 3.09rem;
  position: absolute;
  top: 0;
  left: 0;
}
.ma2 {
  display: block;
  width: 2.24rem;
  height: 3.09rem;
  position: absolute;
  top: 0;
  left: 0;
}
.tishi {
  display: block;
  width: 1.01rem;
  height: 11.62rem;
  position: absolute;
  top: 1.5rem;
  left: .36rem;
}
.title2 {
  display: block;
  width: 4.16rem;
  height: 9.38rem;
  position: absolute;
  top: 2.1rem;
  right: .2rem;
}