/* 成功 */

.flex {
    display: flex;
}

.main_area {
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
}

.success_area {
    height: 100vh;
    width: 100vw;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.success_img {
    height: 889rpx;
    width: 100%;
}

.success_top {
    height: 374rpx;
    width: 100%;
}

.success_center {
    height: 659rpx;
    width: 732rpx;
    position: absolute;
    top: 210rpx;
    left: calc(50% - 366rpx);
}

.success_btn_area {
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin-top: 20rpx;
}

.receive_btn {
    height: 100rpx;
    width: 620rpx;
    background: linear-gradient(to right, #61c6fa, #27b2fc);
    border-radius: 50rpx;
    line-height: 100rpx;
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 16rpx rgba(26, 132, 208, 0.35);
    margin-bottom: 35rpx;
}

.receive_btn image {
    height: 31rpx;
    width: 32rpx;
    margin-left: 15rpx;
}

.go_btn {
    height: 92rpx;
    width: 612rpx;
    background: #fff;
    border: 4rpx solid #4ebffb;
    border-radius: 50rpx;
    line-height: 80rpx;
    color: #219bed;
    font-size: 36rpx;
}

.welfare_cover {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.welfare_box {
    height: 868rpx;
    width: 678rpx;
    background: #fff;
    border-radius: 10rpx;
    position: relative;
}

.welfare_img {
    width: 100%;
    height: 256rpx;
}

.welfare_bottom {
    width: 100%;
    height: 612rpx;
    flex-direction: column;
    align-items: center;
}

.welfare_title {
    height: 90rpx;
    width: 614rpx;
    line-height: 90rpx;
    font-size: 32rpx;
    color: #4c4c4c;
    font-weight: bold;
    margin-top: 12rpx;
}

.select_type {
    height: 60rpx;
    width: 614rpx;
}

.select_btn {
    height: 54rpx;
    width: 184rpx;
    border: 3rpx solid #ededed;
    border-radius: 8rpx;
    background: #f9f9fa;
    line-height: 54rpx;
    text-align: center;
    font-size: 30rpx;
    color: #878a8f;
    margin-right: 19rpx;
    position: relative;
}

.select_btn image {
    height: 40rpx;
    width: 39rpx;
    position: absolute;
    bottom: -2rpx;
    right: -2rpx;
}

.select_btn_color {
    border-color: #0369d4;
    color: #0369d4;
}

.welfare_btn {
    margin-top: 70rpx;
    width: 560rpx;
    background: #c8c8c8;
    box-shadow: 0 8rpx 16rpx #c8c8c8;
}

.welfare_btn_bg {
    background: linear-gradient(to right, #61c6fa, #27b2fc);
    box-shadow: 0 8rpx 16rpx rgba(26, 132, 208, 0.35);
}

button.button_hover {
    background: #ccc;
}

.close_welfare_img {
    position: absolute;
    top: -116rpx;
    right: 30rpx;
    height: 117rpx;
    width: 54rpx;
}