.page {
  .container {
    padding: 0 40rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    box-sizing: border-box;
    .title {
      margin-top: 204rpx;
      flex-shrink: 0;
      width: 464rpx;
      height: 44rpx;
    }
    .rule {
      margin: 32rpx 0;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 28rpx;
      color: rgba(133, 133, 133, 1);
      line-height: 48rpx;
    }
    .footer {
      margin: 0 -40rpx;
      padding: 32rpx 32rpx calc(env(safe-area-inset-bottom) + 32rpx);
      flex-shrink: 0;
      display: flex;
      gap: 24rpx;
      background-color: #fff;
      box-shadow: 0 -10rpx 20rpx #ccc;
      .cancel {
        flex: 1;
        height: 84rpx;
        text-align: center;
        line-height: 84rpx;
        font-size: 32rpx;
        color: rgba(1, 180, 197, 1);
        border-radius: 96rpx 96rpx 96rpx 96rpx;
        border: 1px solid #01b4c5;
      }
      .sure {
        flex: 1;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
        color: #fff;
        background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%);
        border-radius: 96rpx 96rpx 96rpx 96rpx;
      }
      .wait {
        flex: 1;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        font-size: 32rpx;
        color: #fff;
        opacity: 0.3;
        background: linear-gradient(90deg, #00b4c5 0%, #54e2b4 100%);
        border-radius: 96rpx 96rpx 96rpx 96rpx;
      }
    }
  }
}