.mask-area {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200001;
    width: 100%;
    height: 100%
}

    .mask-area .loader {
        top: 48%;
        left: 48%;
        position: absolute;
        display: inline-block;
        -webkit-animation: loading 1.1s infinite linear;
        animation: loading 1.1s infinite linear;
        border-color: #ddd #ddd #ddd #fff;
        border-style: solid;
        border-width: 5px;
        border-radius: 50%;
        height: 36px;
        width: 36px;
        margin: auto;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 2px rgba(0, 0, 0, 0.2)
    }

@-webkit-keyframes loading {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}


.lobby-wrapper {
    float: left;
    width: 100%;
    position: relative;
    z-index: 0;
}

    .lobby-wrapper .banner {
        height: 240px;
        margin-bottom: 36px;
        position: relative;
    }

        .lobby-wrapper .banner .banner-img {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
        }

            .lobby-wrapper .banner .banner-img.curp {
                cursor: pointer;
            }

        .lobby-wrapper .banner .swiper-container {
            height: 100%;
        }

        .lobby-wrapper .banner .swiper-pagination-custom {
            position: absolute;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            bottom: 0px;
            text-align: right;
            padding-right: 18px;
            padding-bottom: 18px;
            z-index: 1;
        }

            .lobby-wrapper .banner .swiper-pagination-custom .custom-pagination {
                -webkit-transition: .3s;
                transition: .3s;
                -webkit-transform-origin: bottom center;
                transform-origin: bottom center;
                width: 34px;
                height: 2px;
                opacity: 1;
                border-radius: 0;
                background-color: rgba(153, 153, 153, 0.8);
                -webkit-transform: scaleY(1);
                transform: scaleY(1);
                transform-origin: bottom center;
                margin: 0 4px;
                cursor: pointer;
            }

                .lobby-wrapper .banner .swiper-pagination-custom .custom-pagination.swiper-pagination-bullet-active {
                    background-color: #FB2764;
                    -webkit-transform: scaleY(2.5);
                    transform: scaleY(2.5);
                }

    .lobby-wrapper .section {
        margin-bottom: 30px;
    }

        .lobby-wrapper .section h3 {
            font-size: 20px;
            color: #9B9B9B;
            margin-bottom: 18px;
            font-weight: 400;
        }

            .lobby-wrapper .section h3 span {
                font-size: 14px;
                color: #79767E;
                margin-left: 20px;
                vertical-align: text-bottom;
            }
        /**********真人，彩票**********/
        .lobby-wrapper .section .plat-wrapper:before, .lobby-wrapper .section .plat-wrapper:after,
        .lobby-wrapper .section .lottery-wrapper:before, .lobby-wrapper .section .lottery-wrapper:after {
            content: '';
            display: table;
        }

        .lobby-wrapper .section .plat-wrapper:after,
        .lobby-wrapper .section .lottery-wrapper:after {
            clear: both;
        }

        .lobby-wrapper .section .plat-wrapper .plat-game,
        .lobby-wrapper .section .lottery-wrapper .lottery-game {
            float: left;
            width: 246px;
            height: 260px;
            margin-right: 6px;
            margin-bottom: 6px;
            position: relative;
        }

            .lobby-wrapper .section .plat-wrapper .plat-game:nth-child(4n+4),
            .lobby-wrapper .section .lottery-wrapper .lottery-game:nth-child(4n+4) {
                margin-right: 0;
            }

            .lobby-wrapper .section .plat-wrapper .plat-game .block,
            .lobby-wrapper .section .lottery-wrapper .lottery-game .block {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background: no-repeat center;
            }

            .lobby-wrapper .section .plat-wrapper .plat-game .hover,
            .lobby-wrapper .section .lottery-wrapper .lottery-game .hover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding-top: 26px;
                -webkit-transition: .3s;
                transition: .3s;
                opacity: 0;
                background-color: rgba(41, 40, 43, 0.75);
                z-index: 1;
                cursor: pointer;
            }

                .lobby-wrapper .section .plat-wrapper .plat-game .hover:hover,
                .lobby-wrapper .section .lottery-wrapper .lottery-game .hover:hover {
                    opacity: 1;
                }

                .lobby-wrapper .section .plat-wrapper .plat-game .hover.no-qr,
                .lobby-wrapper .section .lottery-wrapper .lottery-game .hover.no-qr {
                    padding-top: 111px;
                }

                .lobby-wrapper .section .plat-wrapper .plat-game .hover .qr,
                .lobby-wrapper .section .lottery-wrapper .lottery-game .hover .qr {
                    width: 140px;
                    height: 140px;
                    background-color: #FFF;
                    margin: 0 auto 26px;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    padding: 10px;
                }

                .lobby-wrapper .section .plat-wrapper .plat-game .hover .btn
                 {
                    width: 140px;
                    height: 38px;
                    line-height: 26px;
                    font-size: 16px;
                    color: #FB2464;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border: 1px solid #FB2464;
                    -o-border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image-slice: 1;
                    cursor: pointer;
                    /*margin: 0 auto;*/
                    margin-left: 20%;
                    text-align: center;
                }
                .lobby-wrapper .section .lottery-wrapper .lottery-game .hover .btn {
                    width: 140px;
                    height: 38px;
                    line-height: 26px;
                    font-size: 16px;
                    color: #FB2464;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border: 1px solid #FB2464;
                    -o-border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image-slice: 1;
                    cursor: pointer;
                    /*margin: 0 auto;*/
                    margin-left: 20%;
                    text-align: center;
                    margin-top: 33%;
                }

                .lobby-wrapper .section .plat-wrapper .plat-game .hover .btn:hover,
                .lobby-wrapper .section .lottery-wrapper .lottery-game .hover .btn:hover {
                    background-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EB5D4D', endColorstr='#FB2464', GradientType=1);
                    color: #FFF;
                }

            .lobby-wrapper .section .plat-wrapper .plat-game .title,
            .lobby-wrapper .section .lottery-wrapper .lottery-game .title {
                font-size: 18px;
                color: #FFF;
                position: absolute;
                top: 10px;
                left: 18px;
            }

            .lobby-wrapper .section .plat-wrapper .plat-game .info,
            .lobby-wrapper .section .lottery-wrapper .lottery-game .info {
                font-size: 12px;
                color: #d9dde3;
                position: absolute;
                bottom: 14px;
                left: 18px;
            }

            .lobby-wrapper .section .plat-wrapper .plat-game.maintain .block,
            .lobby-wrapper .section .lottery-wrapper .lottery-game.maintain .block {
                opacity: .15;
            }

        /********电子 棋牌*********/
        .lobby-wrapper .section .slot-wrapper:before, .lobby-wrapper .section .slot-wrapper:after,
        .lobby-wrapper .section .board-wrapper:before, .lobby-wrapper .section .board-wrapper:after {
            content: '';
            display: table;
        }

        .lobby-wrapper .section .slot-wrapper:after,
        .lobby-wrapper .section .board-wrapper:after {
            clear: both;
        }

        .lobby-wrapper .section .slot-wrapper .slot-game,
        .lobby-wrapper .section .board-wrapper .board-game {
            float: left;
            width: 182px;
            height: 182px;
            margin-right: 23px;
            margin-bottom: 6px;
            position: relative;
        }

            .lobby-wrapper .section .slot-wrapper .slot-game:nth-child(5n+5),
            .lobby-wrapper .section .board-wrapper .board-game:nth-child(5n+5) {
                margin-right: 0;
            }

            .lobby-wrapper .section .slot-wrapper .slot-game .block,
            .lobby-wrapper .section .board-wrapper .board-game .block {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                position: relative;
                background: no-repeat center;
            }

                .lobby-wrapper .section .slot-wrapper .slot-game .block .slot-name,
                .lobby-wrapper .section .board-wrapper .board-game .block .board-name {
                    position: absolute;
                    width: 100%;
                    left: 0;
                    bottom: 12px;
                    color: #FFF;
                    font-size: 14px;
                    text-align: center;
                    -webkit-transition: .3s;
                    transition: .3s;
                    opacity: 1;
                }

            .lobby-wrapper .section .slot-wrapper .slot-game .hover,
            .lobby-wrapper .section .board-wrapper .board-game .hover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding-top: 52px;
                -webkit-transition: .3s;
                transition: .3s;
                opacity: 0;
                background-color: rgba(41, 40, 43, 0.75);
                cursor: pointer;
            }

                .lobby-wrapper .section .slot-wrapper .slot-game .hover p,
                .lobby-wrapper .section .board-wrapper .board-game .hover p {
                    color: #FFF;
                    font-size: 14px;
                    margin-bottom: 30px;
                    text-align: center;
                }

                .lobby-wrapper .section .slot-wrapper .slot-game .hover .btn
                 {
                    width: 102px;
                    height: 30px;
                    font-size: 14px;
                    color: #FB2464;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border: 1px solid #FB2464;
                    -o-border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image-slice: 1;
                    cursor: pointer;
                    margin-left: 20%;
                    text-align: center;
                }
                .lobby-wrapper .section .board-wrapper .board-game .hover .btn {
                    width: 90px;
                    height: 30px;
                    font-size: 14px;
                    color: #FB2464;
                    box-sizing: border-box;
                    border: 1px solid #FB2464;
                    border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image-slice: 1;
                    cursor: pointer;
                    margin-left: 28%;
                    text-align: center;
                    margin-top: 11%;
                }

                .lobby-wrapper .section .slot-wrapper .slot-game .hover .btn:hover,
                .lobby-wrapper .section .board-wrapper .board-game .hover .btn:hover {
                    background-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EB5D4D', endColorstr='#FB2464', GradientType=1);
                    color: #FFF;
                }

            .lobby-wrapper .section .slot-wrapper .slot-game:hover .hover,
            .lobby-wrapper .section .board-wrapper .board-game:hover .hover {
                opacity: 1;
            }

            .lobby-wrapper .section .slot-wrapper .slot-game:hover .slot-name,
            .lobby-wrapper .section .board-wrapper .board-game:hover .board-name {
                opacity: 0;
            }

            .lobby-wrapper .section .slot-wrapper .slot-game .game-tag,
            .lobby-wrapper .section .board-wrapper .board-game .game-tag {
                display: none;
                color: #FFF;
                padding: 3px 8px;
                position: absolute;
                border-radius: 6px 0px 0px 6px;
                top: 4px;
                right: -3px;
                font-size: 12px;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                height: 22px;
                line-height: 15px;
                z-index: 1;
                background-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EB5D4D', endColorstr='#FB2464', GradientType=1);
            }

                .lobby-wrapper .section .slot-wrapper .slot-game .game-tag:after,
                .lobby-wrapper .section .board-wrapper .board-game .game-tag:after {
                    content: '';
                    display: block;
                    position: absolute;
                    border-color: transparent;
                    border-style: solid;
                    top: 21px;
                    right: 1px;
                    border-width: 2px 2px 2px 0;
                    border-right-color: #9E271F;
                    width: 0;
                    height: 0;
                    -webkit-transform: rotateZ(45deg);
                    transform: rotateZ(45deg);
                }

            .lobby-wrapper .section .slot-wrapper .slot-game.no-demo .game-tag,
            .lobby-wrapper .section .board-wrapper .board-game.no-demo .game-tag {
                display: block;
            }

            .lobby-wrapper .section .slot-wrapper .slot-game.maintain .block,
            .lobby-wrapper .section .board-wrapper .board-game.maintain .block {
                opacity: .15;
            }

        .lobby-wrapper .section .slot-wrapper .check-more,
        .lobby-wrapper .section .board-wrapper .check-more {
            float: left;
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #1F1F1F;
            font-size: 12px;
            color: #79767E;
            text-align: center;
            cursor: pointer;
        }

        /************体育  电竞*********/
        .lobby-wrapper .section .sport-wrapper:before, .lobby-wrapper .section .sport-wrapper:after,
        .lobby-wrapper .section .competion-wrapper:before, .lobby-wrapper .section .competion-wrapper:after {
            content: '';
            display: table;
        }

        .lobby-wrapper .section .sport-wrapper:after,
        .lobby-wrapper .section .competion-wrapper:after {
            clear: both;
        }

        .lobby-wrapper .section .sport-wrapper .sport-game,
        .lobby-wrapper .section .competion-wrapper .competion-game {
            float: left;
            width: 190px;
            height: 200px;
            margin-right: 6px;
            margin-bottom: 0px;
            position: relative;
        }

            .lobby-wrapper .section .sport-wrapper .sport-game:nth-child(4n+4),
            .lobby-wrapper .section .competion-wrapper .competion-game:nth-child(4n+4) {
                margin-right: 0;
            }

            .lobby-wrapper .section .sport-wrapper .sport-game .block,
            .lobby-wrapper .section .competion-wrapper .competion-game .block {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center center;
                background: no-repeat center;
            }

            .lobby-wrapper .section .sport-wrapper .sport-game .hover,
            .lobby-wrapper .section .competion-wrapper .competion-game .hover {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                padding-top: 111px;
                -webkit-transition: .3s;
                transition: .3s;
                opacity: 0;
                background-color: rgba(41, 40, 43, 0.75);
                z-index: 1;
                cursor: pointer;
            }

                .lobby-wrapper .section .sport-wrapper .sport-game .hover:hover,
                .lobby-wrapper .section .competion-wrapper .competion-game .hover:hover {
                    opacity: 1;
                }

                .lobby-wrapper .section .sport-wrapper .sport-game .hover .btn,
                .lobby-wrapper .section .competion-wrapper .competion-game .hover .btn {
                    width: 140px;
                    height: 38px;
                    line-height: 26px;
                    font-size: 16px;
                    color: #FB2464;
                    -webkit-box-sizing: border-box;
                    box-sizing: border-box;
                    border: 1px solid #FB2464;
                    -o-border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                    border-image-slice: 1;
                    cursor: pointer;
                    /*margin: 0 auto;*/
                    margin-left: 20%;
                    text-align: center;
                }

                    .lobby-wrapper .section .sport-wrapper .sport-game .hover .btn:hover,
                    .lobby-wrapper .section .competion-wrapper .competion-game .hover .btn:hover {
                        background-image: linear-gradient(135deg, #EB5D4D, #FB2464);
                        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EB5D4D', endColorstr='#FB2464', GradientType=1);
                        color: #FFF;
                    }

            .lobby-wrapper .section .sport-wrapper .sport-game .title,
            .lobby-wrapper .section .competion-wrapper .competion-game .title {
                font-size: 18px;
                color: #FFF;
                position: absolute;
                top: 10px;
                left: 18px;
            }

            .lobby-wrapper .section .sport-wrapper .sport-game .info,
            .lobby-wrapper .section .competion-wrapper .competion-game .info {
                font-size: 12px;
                color: #d9dde3;
                position: absolute;
                bottom: 14px;
                left: 18px;
            }

            .lobby-wrapper .section .sport-wrapper .sport-game.maintain .block,
            .lobby-wrapper .section .competion-wrapper .competion-game.maintain .block {
                opacity: .15;
            }


    .lobby-wrapper .banner .banner-img {
        background-image: url('../images/pcyouxidat.webp');
    }

/********轮播*******/
.swiper-wrapper {
    height: unset;
    width:1002px;
}

.LiveSwiper .swiper-button-prev, .LiveSwiper .swiper-button-next,
.sportSwiper .swiper-button-prev, .sportSwiper .swiper-button-next {
    outline: none;
    background-color: rgba(245, 242, 242, 0.56);
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background-size: 15px;
    margin-top: 5px;
}
.slotSwiper .swiper-button-next {
    outline: none;
    background-image: none;
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-color: #eb8f3a;
    transform: rotate(-45deg);
    height: 30px;
    width: 30px;
    margin-top: 12px;
    margin-right: 8px;
}
.slotSwiper .swiper-button-prev {
    outline: none;
    background-image: none;
    border-left: 3px solid;
    border-bottom: 3px solid;
    border-color: #eb8f3a;
    transform: rotate(45deg);
    height: 30px;
    width: 30px;
    margin-top: 12px;
    margin-left: 8px;
}

.lotterySwiper .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%239614b3'%2F%3E%3C%2Fsvg%3E");
    background-color: rgba(241, 232, 155, 0.9);
    border-radius: 30px;
    width: 35px;
    height: 35px;
    background-size: 15px;
    margin-top: 0px;
}
.lotterySwiper .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%239614b3'%2F%3E%3C%2Fsvg%3E");
    background-color: rgba(241, 232, 155, 0.9);
    border-radius: 30px;
    width: 35px;
    height: 35px;
    background-size: 15px;
    margin-top: 0px;
}
.boardSwiper .swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23392f38'%2F%3E%3C%2Fsvg%3E");
    background-color: rgba(255, 255, 255, 0.73);
    border-radius: 30px;
    width: 35px;
    height: 35px;
    background-size: 15px;
    margin-top: 0px;
}
.boardSwiper .swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23392f38'%2F%3E%3C%2Fsvg%3E");
    background-color: rgba(255, 255, 255, 0.73);
    border-radius: 30px;
    width: 35px;
    height: 35px;
    background-size: 15px;
    margin-top: 0px;
}

#popup-dialog {
    display: block;
    width: auto;
    height: 690px;
    max-height: none;
    height: auto;
}