/* pages/user/completeData/index.wxss */
page{
  width: 100%;
  height: 100vh;
}
.page-box{
  width: 100%;
  height: 100%;
  position: relative;
}
.bg-img-box{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.bg-img-box image{
  width: 100%;
  height: 100%;
}
.mail-box{
  width: 687rpx;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.mail-box .mail-img-box{
  position: absolute;
}

.mail-top,.mail-bottom{
  z-index: 3;
}
.mail-top{
  z-index: 4;
   top: 10rpx;
   /* top: 314rpx; */
}
.top-move{
  animation: topMove 2s ease;
  animation-fill-mode: forwards;
}
.mail-top image{
  width: 687rpx;
  height: 445rpx;
}
.mail-center image{
  width: 684rpx;
  height: 648rpx;
  transform: scale(0.99);
}
.mail-center{
  top: 316rpx;
}
.mail-bottom image{
  width: 687rpx;
  height: 432rpx;
  
}
.mail-bottom{
  top: 616rpx;
}
.btm-move{
  animation: btmMove 1.5s  ease;
  animation-fill-mode: forwards;
}
@keyframes topMove{
  0% {
    top: 10rpx;
    opacity: 0.8;
  }
  100% {
    top: 314rpx;
    opacity: 1;
  }
}
@keyframes btmMove{
  0% {
    top: 616rpx;
    opacity: 0.2;
  }
  100% {
    top: 532rpx;
    opacity: 1;
  }
}

.tips{
  width: 100%;
  color:#EFDACA;
  font-size: 40rpx;
  line-height: 56rpx;
  position: absolute;
  top: 1000rpx;
  text-align: center;
}
.word-move{
  animation: wordMove 1s ease;
  animation-fill-mode: forwards;
}
@keyframes wordMove{
  0%{
    left: -100%;
  }
  100%{
    left: 0;
  }
}
.pay-btn{
  width: 686rpx;
  height: 82rpx;
  position: absolute;
  top: 1100rpx;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%);
  border-radius: 62rpx;
  text-align: center;
  line-height: 82rpx;
  color: #946F46;
}
.tip{
  width: 100%;
  text-align: center;
  color: #EFDACA;
  font-size: 32rpx;
  line-height: 44rpx;
  position: absolute;
  top: 1200rpx;
  left: 50%;
  transform: translateX(-50%);
}