.wrap,
.mask-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wrap {
    overflow-y: auto;
}
.mask-container {
    position: relative;
    width: 482.49rpx;
    height: 996.38rpx;
}
.mask-nav {
    position: absolute;
    width: 482.49rpx;
    height: 996.38rpx;
    margin-top: 25.36rpx;
    transition: opacity 240ms;
    opacity: 1;
}
.mask-show .custom-mask,
.mask-show .default-mask {
    opacity: 1;
}
.mask-hide .custom-mask,
.mask-hide .default-mask {
    opacity: 0;
}
.custom-mask {
    position: absolute;
    width: 410.63rpx;
    height: 774.76rpx;
    left: 50%;
    margin-top: 132.85rpx;
    margin-left: -205.315rpx;
    transition: opacity 240ms;
}
.default-mask {
    position: absolute;
    width: 410.63rpx;
    height: 704.71rpx;
    margin-top: 199.28rpx;
    transition: opacity 240ms;
}
.mask-tip {
    font-size: 23.55rpx;
    line-height: 36.23rpx;
    color: #999;
    text-align: center;
    margin-top: 22.95rpx;
}

.mask-flex-button {
    display: flex;
    width: 100%;
    background-color: #f5f5f5;
}

.button-left,
.button-right {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 304.35rpx;
    height: 79.71rpx;
    font-size: 32.61rpx;
    margin-right: 0;
    margin-left: calc((100% - 608.7rpx) / 3);
    white-space: nowrap;
}

.button-right {
    margin-right: calc((100% - 608.7rpx) / 3);
}