page{
  background-color: #fff;
}
.page-success{
  text-align: center;
}
.page-success .top{
  height:56vh;
  display: flex;
  align-items: center;
  padding-top:40px;
  box-sizing: border-box;
}
.page-success .top-content{
  flex:1;
}
.page-success .bottom{
  height:44vh;
}
.icon{
  width:140rpx;
  height:140rpx;
}
.title{
  font-size: 44rpx;
  font-weight: 500;
  color:var(--main-color);
  margin-top:50rpx;
}
.sub-title{
  font-size: 30rpx;
  color:#555555;
  margin-top:40rpx;
}
.sub-title .red{
  color:#ff0000;
  font-weight: 500;
}
.button{
  border: 1.2rpx solid #999999!important;
  color:var(--main-font-color)!important;
  font-weight: normal;
  border-radius: 60rpx;
  padding:19rpx!important;
  margin:90rpx 154rpx 0 154rpx!important;
}
.qrcode{
  border-radius: 30rpx;
  width:360rpx;
  height:360rpx;
  margin:0 auto;
  border:20rpx solid rgba(254, 196, 0, 0.15);
}
.qrcode .image{
  width:100%;height:100%;
}

.tips{
  font-size: 32rpx;
  margin-top: 40rpx;
}
.tips::after{
  content: '';
  display: block;
  width:180rpx;
  height:12rpx;
  background-color: var(--main-color);
  margin:30rpx auto;
  border-radius: 6rpx;
}