.fade-enter-active,
.fade-leave-active {
    transition: opacity .5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

    {
    opacity: 0;
}

.pre-item {
    font-family: Arial, Helvetica, sans-serif;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    width: 100%;
} //弹窗样式
.modal-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 199;
    background-color: rgba($color: #000000, $alpha: .8);
    .pub-border-wrapper {
        border: 4px solid #504391;
        border-radius: 22px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .overflow-modal {
        background-color: #25405e;
        border: 6px solid #19274e;
        border-radius: 20px;
        width: px2rem(1188);
        @media screen and (max-width: 480px){
            &{
                width: px2rem(700);
            }
           }
        &.rule-modal {
            .game-modal {
                height: px2rem(750);
            }
        }
        &.notice-modal {
            .list-item {
                margin-bottom: 8px;
                line-height: 1.6;
                text-align: left;
                white-space: pre-wrap;
                a {
                    font-size: px2rem(24);
                    color: #f1e000;
                }
            }
        }
    }
    .game-modal {
        padding: px2rem(70) px2rem(70) px2rem(20);
        height: px2rem(500);
        margin-top: px2rem(20);
        overflow-y: auto;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        &::-webkit-scrollbar {
            width: 8px;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: 12px;
            background: rgba(#19274e, 0.6);
        }
    }
    .close-icon {
        position: absolute;
        z-index: 10;
        cursor: pointer;
        background: url('../../../assets/but_closed01_up.png') center center no-repeat;
        background-size: 100%;
        width: px2rem(88);
        height: px2rem(58);
        top: px2rem(33);
        right: -px2rem(78);
        &:hover {
            background: url('../../../assets/but_closed01_down.png') center center no-repeat;
            background-size: 100%;
        }
    }
    .en-title {
        width: 200px;
    }
    .title {
        position: absolute;
        background: url('../../../assets/tit_01.png');
        width: px2rem(254);
        height: px2rem(70);
        background-size: 100%;
        top: px2rem(6);
        left: 50%;
        margin-left: -px2rem(127);
        font-size: px2rem(30);
        color: #ffffff;
        text-align: center;
        line-height: px2rem(70);
        z-index: 10;
    }
    .counter-title {
        text-align: center;
        color: #ffffff;
        margin-bottom: 20px;
        p {
            font-size: 30px;
            font-weight: bold;
            display: inline-block;
            padding: 0 5px;
            border-bottom: 2px solid #ffffff;
        }
    }
    .en-title {
        color: #ffffff;
        font-size: 30px;
        font-weight: bold;
        width: 240px;
        margin: 20px auto;
    }
    .list-item {
        display: flex;
        font-size: px2rem(24);
        color: #ffffff;
        margin-bottom: 8px;
        line-height: 1.6;
        text-align: left;
        .order {
            width: 26px;
        }
        .item-text {
            flex: 1;
        }
        .text-wrap {
            flex: 1;
            a {
                color: #f1e000;
            }
        }
    }
}