@function px2rem($px) {
    @return $px / 75+rem;
}

@font-face {
    font-family: "iconfont";
    /* Project id 4251627 */
    src: url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.woff2?t=1694762890271') format('woff2'),
        url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.woff?t=1694762890271') format('woff'),
        url('//at.alicdn.com/t/c/font_4251627_lsh8i73eps.ttf?t=1694762890271') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: px2rem(50);
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-tuzi-01:before {
    content: "\e60d";
}

.icon-tuzi3:before {
    content: "\e600";
}

.icon-a-ziyuan412:before {
    content: "\e8bd";
}

.icon-tuzi:before {
    content: "\e648";
}

.rabbit {
    position: absolute;
    z-index: 99;
    // width: px2rem(100 );
}


html,
body {
    width: 100%;
    // height: 100%;
    background: linear-gradient(0deg, #4E2B8E 0%, #380B5E 100%);

    &::-webkit-scrollbar {
        width: 0;
        display: none;
    }
}

::-webkit-scrollbar {
    width: 0;
    display: none;
}

.back {
    position: fixed;
    top: px2rem(70);
    left: px2rem(34);
    z-index: 99;
    width: px2rem(62);
    height: px2rem(62);

    img {
        width: 100%;
        height: 100%;
    }

    p {
        color: #fff;
        font-size: px2rem(32);
        position: absolute;
        width: 9rem;
        left: 0;
        top: 0;
        height: 100%;
        text-align: center;
        line-height: px2rem(62);
    }
}

.header {
    position: relative;
    width: px2rem(750);
    height: px2rem(931);
    background: url(../images/header.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto -2.1rem;

    .rule_icon {
        width: px2rem(111);
        height: px2rem(37);
        line-height: px2rem(39);
        color: #fff;
        font-size: px2rem(18);
        position: absolute;
        right: px2rem(30);
        top: px2rem(725);
        text-align: center;
        text-indent: 8px;
        background: url(../images/rule_icon.png) no-repeat;
        background-size: 100% 100%;
    }
}

.giftBox {
    width: px2rem(690);
    height: px2rem(447);
    background: url(../images/giftBox.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto px2rem(5);
    position: relative;
    overflow: hidden;

    .swiper {
        width: px2rem(492);
        height: px2rem(300);
        margin: px2rem(111) auto 0;
    }
}

.page1 {
    // display: none;
    width: px2rem(690);
    height: px2rem(1958);
    background: url(../images/page1.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto px2rem(130);
    box-sizing: border-box;
    padding-top: px2rem(90);
    position: relative;

    .mc {
        display: none;
        position: absolute;
        width: 100%;
        height: 67%;
        z-index: 9;
        background: rgba(0, 0, 0, 0.6);
        top: 8.5rem;

        .mc_in {
            width: px2rem(500);
            height: px2rem(347);
            background: url(../images/Pub_qp.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;

            p {
                width: 100%;
                text-align: center;
                position: absolute;
                left: 0;
                top: px2rem(82);
                color: #FFFFFF;
                font-size: px2rem(34);
            }

            .p2 {
                top: 2.1rem;
            }

            .but {
                text-align: center;
                width: px2rem(230);
                height: px2rem(82);
                line-height: px2rem(73);
                color: #FFFFFF;
                font-size: px2rem(32);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(223);
                background: url(../images/pubBut.png) no-repeat;
                background-size: 100% 100%;
            }
        }


    }

    .tab {
        width: px2rem(485);
        height: px2rem(83);
        margin: 0 auto px2rem(0);
        display: flex;
        justify-content: space-between;

        div {
            width: px2rem(212);
        }

        .tab1 {
            background: url(../images/tab1.png) no-repeat;
            background-size: 100% 100%;
        }

        .tab2 {
            background: url(../images/tab2.png) no-repeat;
            background-size: 100% 100%;
        }

        .active1 {
            background: url(../images/active1.png) no-repeat;
            background-size: 100% 100%;
        }

        .active2 {
            background: url(../images/active2.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .switch {
        width: px2rem(385);
        height: px2rem(67);
        text-align: center;
        line-height: px2rem(67);
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: px2rem(185);
        left: 50%;
        transform: translateX(-50%);

        div {
            width: px2rem(170);
            height: 100%;
            color: #F1E8F6;
            font-size: px2rem(22);
            background: url(../images/task.png) no-repeat;
            background-size: 100% 100%;
        }

        .active {
            background: url(../images/active.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .myCandy {
        color: #fff;
        font-size: px2rem(22);
        position: absolute;
        top: px2rem(330);
        right: px2rem(78);
    }

    .qp {
        width: px2rem(162);
        height: px2rem(104);
        background: url(../images/qp.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: px2rem(273);
        left: px2rem(144);
        text-align: center;
        box-sizing: border-box;
        padding-top: px2rem(27);

        p {
            margin-bottom: px2rem(4);
            color: #CD33F4;
            font-size: px2rem(18);
        }
    }

    .candytitle {
        width: px2rem(465);
        height: px2rem(109);
        position: absolute;
        top: px2rem(353);
        left: 50%;
        transform: translateX(-50%);
    }

    .showBox {
        width: px2rem(150);
        height: px2rem(150);
        position: absolute;
        left: 0.8rem;
        top: 4.3rem;
        z-index: 2;
    }

    .boxs {
        width: px2rem(150);
        height: px2rem(150);
        position: absolute;
        top: px2rem(457);

        b {
            position: absolute;
            width: 100%;
            text-align: center;
            left: 0;
            bottom: 0;
            color: #F1E8F6;
            font-size: px2rem(17);
            text-indent: -12px;
        }
    }

    .boxText {
        width: px2rem(141);
        height: px2rem(115);
        position: absolute;
        top: px2rem(389);
        right: px2rem(-5);
    }

    .boxs1 {
        left: px2rem(91);
        background: url(../images/box1.png) no-repeat;
        background-size: 100% 100%;
    }

    .boxs2 {
        left: px2rem(281);
        background: url(../images/box2.png) no-repeat;
        background-size: 100% 100%;
    }

    .boxs3 {
        left: px2rem(473);
        background: url(../images/box3.png) no-repeat;
        background-size: 100% 100%;
    }

    .boxOpen1 {
        background: url(../images/boxOpen1.png) no-repeat;
        background-size: 100% 100%;
    }

    .boxOpen2 {
        background: url(../images/boxOpen2.png) no-repeat;
        background-size: 100% 100%;
    }

    .boxOpen3 {
        background: url(../images/boxOpen3.png) no-repeat;
        background-size: 100% 100%;
    }

    .candyLine1,
    .candyLine2 {
        width: px2rem(67);
        height: px2rem(5);
        border-radius: px2rem(5);
        background: linear-gradient(0deg, #9F50F7 0%, #FDF2BE 100%);
        opacity: 0.71;
        position: absolute;
        top: px2rem(530);
        left: px2rem(221);
    }

    .candyLine2 {
        left: px2rem(405);
    }

    .road {
        width: px2rem(643);
        height: px2rem(790);
        background: url(../images/road.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: px2rem(864);
        left: 50%;
        transform: translateX(-50%);

        .gui {
            width: px2rem(103);
            height: px2rem(95);
            left: 3.6rem;
            bottom: 0.9rem;
            position: absolute;
            transition: all .3s;
            z-index: 2;
        }

        .boxImg {
            width: px2rem(150);
            height: px2rem(150);
            position: absolute;
        }

        .boxImg1 {
            left: px2rem(6);
            top: px2rem(522);
        }

        .boxImg2 {
            left: px2rem(176);
            top: px2rem(341);
        }

        .boxImg3 {
            left: px2rem(-2);
            top: px2rem(70);
        }

        .boxImg4 {
            left: px2rem(261);
            top: px2rem(70);
        }

        .boxImg5 {
            left: px2rem(508);
            top: px2rem(-16);
        }

        .boxImg6 {
            left: px2rem(420);
            top: px2rem(252);
        }

        .boxImg7 {
            left: px2rem(509);
            top: px2rem(515);
        }

        .boxImgSvgaA,
        .boxImgSvgaB,
        .boxImgSvgaC {
            width: 103%;
            height: 132%;
            position: absolute;
            left: 50%;
            bottom: -0.6rem;
            background: rgba(0, 0, 0, 0.6);
            z-index: 3;
            transform: translateX(-50%);
            border-radius: 0.26667rem;
            display: none;

            .boxImgSvga_in1,
            .boxImgSvga_in2,
            .boxImgSvga_in3 {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: px2rem(350);
                height: px2rem(350);

                canvas {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .diceBox {
        width: px2rem(660);
        height: px2rem(209);
        position: absolute;
        bottom: px2rem(105);
        left: 50%;
        transform: translateX(-50%);
        background: url(../images/diceBox.png) no-repeat;
        background-size: 100% 100%;

        .diceQP {
            position: absolute;
            width: px2rem(168);
            height: px2rem(167);
            left: 50%;
            transform: translateX(-50%);
            bottom: px2rem(17);
        }

        .dice {
            position: absolute;
            width: px2rem(120);
            height: px2rem(120);
            left: 50%;
            transform: translateX(-50%);
            bottom: px2rem(42);
            z-index: 2;
        }

        .diceSvga {
            display: none;
            width: px2rem(120);
            height: px2rem(120);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: px2rem(42);
            z-index: 2;

            canvas {
                width: 100%;
                height: 100%;
            }
        }

        .diceLeftBut {
            width: px2rem(212);
            height: px2rem(83);
            line-height: px2rem(83);
            text-align: center;
            color: #FDF3EB;
            font-size: px2rem(24);
            position: absolute;
            left: px2rem(22);
            top: px2rem(95);
            background: url(../images/diceLeftBut.png) no-repeat;
            background-size: 100% 100%;
        }

        .diceRightBut {
            width: px2rem(212);
            height: px2rem(83);
            line-height: px2rem(83);
            text-align: center;
            color: #FDF3EB;
            font-size: px2rem(24);
            position: absolute;
            right: px2rem(27);
            top: px2rem(95);
            background: url(../images/diceRightBut.png) no-repeat;
            background-size: 100% 100%;
        }

        p {
            width: 100%;
            text-align: center;
            color: #4DE7E9;
            font-size: px2rem(23);
            position: absolute;
            left: 0;
            bottom: px2rem(-35);
        }
    }
}

.page2 {
    display: none;
    width: px2rem(690);
    height: px2rem(1600);
    background: url(../images/page2.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    margin: -1.25rem auto px2rem(53);
    box-sizing: border-box;

    .tab {
        width: px2rem(485);
        height: px2rem(83);
        margin: px2rem(98) auto px2rem(0);
        display: flex;
        justify-content: space-between;

        div {
            width: px2rem(212);
        }

        .tab1 {
            background: url(../images/tab1.png) no-repeat;
            background-size: 100% 100%;
        }

        .tab2 {
            background: url(../images/tab2.png) no-repeat;
            background-size: 100% 100%;
        }

        .active1 {
            background: url(../images/active1.png) no-repeat;
            background-size: 100% 100%;
        }

        .active2 {
            background: url(../images/active2.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .switch {
        width: px2rem(385);
        height: px2rem(67);
        text-align: center;
        line-height: px2rem(67);
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: px2rem(190);
        left: 50%;
        transform: translateX(-50%);

        div {
            width: px2rem(170);
            height: 100%;
            color: #F1E8F6;
            font-size: px2rem(22);
            background: url(../images/task.png) no-repeat;
            background-size: 100% 100%;
        }

        .active {
            background: url(../images/active.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .taskText {
        width: px2rem(590);
        height: px2rem(109);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: px2rem(293);
    }

    .taskTitle {
        width: px2rem(309);
        height: px2rem(138);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: px2rem(379);
    }

    .myCandy {
        color: #FFFFFF;
        font-size: px2rem(21);
        position: absolute;
        top: px2rem(501);
        left: px2rem(74);
    }

    .dayTask {
        width: px2rem(123);
        height: px2rem(40);
        position: absolute;
        top: px2rem(543);
        left: px2rem(283);
    }

    .alltask {
        width: px2rem(123);
        height: px2rem(40);
        position: absolute;
        top: px2rem(1008);
        left: px2rem(283);
    }

    .task {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(0deg, #6246BF 0%, #6734BB 100%);
        border-radius: px2rem(20);
        width: px2rem(570);
        box-sizing: border-box;
    }

    .task1 {
        height: px2rem(80);
        line-height: px2rem(80);
        display: flex;
        justify-content: space-between;
        padding: 0 px2rem(20) 0 px2rem(33);
        top: px2rem(606);

        p {
            color: #fff;
            font-size: px2rem(21);
        }

        .but {
            width: px2rem(136);
            height: px2rem(61);
            line-height: px2rem(48);
            text-align: center;
            color: #F0FAFC;
            font-size: px2rem(21);
            background: url(../images/taskBut.png) no-repeat;
            background-size: 100% 100%;
            margin-top: px2rem(16);
        }

        .butActive {
            background: url(../images/taskButActive.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .task2 {
        height: px2rem(200);
        top: px2rem(716);

        p {
            color: #FFFFFF;
            font-size: px2rem(21);
            position: absolute;
            left: px2rem(33);
            top: px2rem(20);
        }

        .but {
            width: px2rem(136);
            height: px2rem(61);
            line-height: px2rem(48);
            text-align: center;
            color: #F0FAFC;
            font-size: px2rem(21);
            background: url(../images/taskBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: px2rem(20);
            top: px2rem(86);
        }

        .butActive {
            background: url(../images/taskButActive.png) no-repeat;
            background-size: 100% 100%;
        }

        .lineBox {
            width: px2rem(360);
            height: px2rem(40);
            line-height: px2rem(40);
            background: #3E1E7E;
            border-radius: px2rem(40);
            // overflow: hidden;
            position: absolute;
            left: px2rem(29);
            top: px2rem(94);
            color: #AF3022;
            font-size: px2rem(21);
            text-indent: 8px;
        }

        .line {
            width: 0%;
            height: 100%;
            border-radius: px2rem(40);
            background: url(../images/line.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }

        span {
            width: px2rem(40);
            height: px2rem(40);
            position: absolute;
            top: 0;
            background: linear-gradient(0deg, #9867ED 0%, #FAEFFC 100%);
            transform: translateX(-50%);
            border-radius: 50%;
        }

        .sp1 {
            left: 30%;
        }

        .sp2 {
            left: 60%;
        }

        .sp3 {
            right: -0.26rem;
        }

        b {
            color: #5BF2FF;
            font-size: px2rem(18);
            position: absolute;
        }

        .b1,
        .b2,
        .b3 {
            top: px2rem(-41);
        }

        .b5,
        .b6,
        .b4 {
            bottom: px2rem(-41);
        }

        .b1 {
            left: 17%;
        }

        .b2 {
            left: 44%;
        }

        .b3 {
            left: 73%;
        }

        .b5 {
            left: 48%;
        }

        .b6 {
            left: 78%;
        }

        .b4 {
            left: 18%;
        }
    }

    .task3 {
        height: px2rem(120);
        background: linear-gradient(0deg, #9546BF 0%, #6734BB 100%);
        top: px2rem(1071);

        p {
            color: #FFFFFF;
            font-size: px2rem(21);
            position: absolute;
            top: px2rem(30);
            left: px2rem(33);

            i {
                font-style: normal;
                color: #5CDFF7;
            }
        }

        b {
            color: #FFFFFF;
            font-size: px2rem(18);
            position: absolute;
            top: px2rem(65);
            left: px2rem(33);

            i {
                font-style: normal;
                color: #F0FF00;
            }
        }

        .but {
            width: px2rem(136);
            height: px2rem(61);
            line-height: px2rem(48);
            text-align: center;
            color: #F0FAFC;
            font-size: px2rem(21);
            background: url(../images/taskBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: px2rem(26);
            top: 0.72667rem;
        }

        .butActive {
            background: url(../images/taskButActive.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .task4 {
        height: px2rem(120);
        background: linear-gradient(0deg, #9546BF 0%, #6734BB 100%);
        top: px2rem(1220);

        p {
            color: #FFFFFF;
            font-size: px2rem(21);
            position: absolute;
            top: px2rem(30);
            left: px2rem(33);

            i {
                font-style: normal;
                color: #5CDFF7;
            }
        }

        b {
            color: #FFFFFF;
            font-size: px2rem(18);
            position: absolute;
            top: px2rem(65);
            left: px2rem(33);

            i {
                font-style: normal;
                color: #F0FF00;
            }
        }

        .but {
            width: px2rem(136);
            height: px2rem(61);
            line-height: px2rem(48);
            text-align: center;
            color: #F0FAFC;
            font-size: px2rem(21);
            background: url(../images/taskBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            right: px2rem(26);
            top:0.72667rem;
        }

        .butActive {
            background: url(../images/taskButActive.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.page3 {
    display: none;
    width: px2rem(690);
    min-height: px2rem(930);
    background: url(../images/page3.png) no-repeat;
    background-size: 100% px2rem(930);
    margin: -1.2rem auto 2rem;
    position: relative;

    .tab {
        width: px2rem(485);
        height: px2rem(83);
        margin: px2rem(98) auto px2rem(0);
        display: flex;
        justify-content: space-between;

        div {
            width: px2rem(212);
        }

        .tab1 {
            background: url(../images/tab1.png) no-repeat;
            background-size: 100% 100%;
        }

        .tab2 {
            background: url(../images/tab2.png) no-repeat;
            background-size: 100% 100%;
        }

        .active1 {
            background: url(../images/active1.png) no-repeat;
            background-size: 100% 100%;
        }

        .active2 {
            background: url(../images/active2.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .listTab {
        width: px2rem(385);
        height: px2rem(67);
        text-align: center;
        line-height: px2rem(67);
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: px2rem(190);
        left: 50%;
        transform: translateX(-50%);

        div {
            width: px2rem(170);
            height: 100%;
            color: #F1E8F6;
            font-size: px2rem(22);
            background: url(../images/task.png) no-repeat;
            background-size: 100% 100%;
        }

        .active {
            background: url(../images/active.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .rule_icon {
        width: px2rem(120);
        height: px2rem(56);
        line-height: px2rem(51);
        position: absolute;
        right: px2rem(0);
        top: px2rem(263);
        text-align: center;
        background: url(../images/rule_iconList.png) no-repeat;
        background-size: 100% 100%;
        color: #FFFFFF;
        font-size: px2rem(18);
        text-indent: 10px;
    }

    .dayTab {
        width: px2rem(335);
        display: flex;
        justify-content: space-between;
        height: px2rem(61);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: px2rem(296);

        div {
            width: px2rem(155);
            height: px2rem(61);
            line-height: px2rem(61);
            text-align: center;
            color: #FDF3EB;
            font-size: px2rem(18);
            background: url(../images/dayTab.png) no-repeat;
            background-size: 100% 100%;
        }

        .active {
            background: url(../images/dayTabActive.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .listTitle {
        width: px2rem(456);
        height: px2rem(109);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: px2rem(353);
    }

    .time {
        position: absolute;
        top: px2rem(483);
        left: 50%;
        transform: translateX(-50%);
        width: 9.1rem;
        height: px2rem(48);
        line-height: px2rem(48);
        display: flex;
        justify-content: space-between;

        div {
            width: 1.1rem;
            height: px2rem(48);
            background: linear-gradient(0deg, #9552E6 0%, #8E39F4 100%);
            border-radius: px2rem(13);
            text-align: center;
            color: #fff;
            font-size: px2rem(24);
        }

        .active {
            background: url(../images/timeActive.png) no-repeat;
            background-size: 100% 100%;
        }
    }

    .topBox {
        width: px2rem(696);
        height: px2rem(546);
        background: url(../images/topBoxBg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        margin: 6rem auto 0;

        .no1 {
            width: px2rem(207);
            height: px2rem(200);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 1.2rem;

            .noBg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
            }

            .noImg {
                width: px2rem(153);
                height: px2rem(64);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(-64);
            }

            .tx {
                width: px2rem(154);
                height: px2rem(154);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(29);
                border-radius: 50%;
            }

            p {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                color: #FFFFFF;
                font-size: px2rem(24);
                position: absolute;
                left: 0;
                bottom: px2rem(-35);
                text-align: center;
            }

            b {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                color: #FFFFFF;
                font-size: px2rem(24);
                position: absolute;
                left: 0;
                bottom: px2rem(-65);
                text-align: center;
            }
        }

        .no2 {
            width: px2rem(180);
            height: px2rem(174);
            position: absolute;
            left: px2rem(49);
            top: 2.5rem;

            .noBg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
            }

            .noImg {
                width: px2rem(133);
                height: px2rem(56);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(-56);
            }

            .tx {
                width: px2rem(134);
                height: px2rem(134);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(25);
                border-radius: 50%;
            }

            p {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                color: #FFFFFF;
                font-size: px2rem(24);
                position: absolute;
                left: 0;
                bottom: px2rem(-35);
                text-align: center;
            }

            b {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                color: #FFFFFF;
                font-size: px2rem(24);
                position: absolute;
                left: 0;
                bottom: px2rem(-65);
                text-align: center;
            }
        }

        .no3 {
            width: px2rem(180);
            height: px2rem(174);
            position: absolute;
            right: px2rem(49);
            top: 2.5rem;

            .noBg {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 2;
            }

            .noImg {
                width: px2rem(133);
                height: px2rem(56);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(-56);
            }

            .tx {
                width: px2rem(134);
                height: px2rem(134);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(25);
                border-radius: 50%;
            }

            p {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                color: #FFFFFF;
                font-size: px2rem(24);
                position: absolute;
                left: 0;
                bottom: px2rem(-35);
                text-align: center;
            }

            b {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                color: #FFFFFF;
                font-size: px2rem(24);
                position: absolute;
                left: 0;
                bottom: px2rem(-65);
                text-align: center;
            }
        }
    }

    .lists {
        width: px2rem(610);
        margin: 0 auto;
        margin: 0 auto px2rem(160);

        li {
            width: 100%;
            height: px2rem(120);
            line-height: px2rem(120);
            border-radius: px2rem(20);
            background: #703EA8;
            margin-bottom: px2rem(10);
            box-sizing: border-box;
            padding: 0 px2rem(27) 0 px2rem(27);

            .num {
                color: #fff;
                // margin-right: px2rem(26);
                // font-size: px2rem(37);
                margin-right: 0.2rem;
                font-size: 0.35rem;
                float: left;
                width: 0.35rem;
                text-align: center;
            }

            .tx {
                width: px2rem(94);
                height: px2rem(94);
                display: block;
                margin-top: px2rem(16);
                margin-right: px2rem(24);
                border-radius: 50%;
                float: left;
            }

            .nick {
                width: 2.6rem;
                white-space: nowrap; //不换行
                overflow: hidden; //超出隐藏
                text-overflow: ellipsis; //超出文本省略号
                float: left;
                color: #fff;
                font-size: px2rem(29);
            }

            .score {
                float: right;
                color: #fff;
                font-size: px2rem(26);
            }
        }
    }

    .my {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: px2rem(142);
        background: #615DC8;
        z-index: 3;

        .li {
            width: 100%;
            height: px2rem(142);
            line-height: px2rem(142);
            border-radius: px2rem(20);
            margin-bottom: px2rem(10);
            box-sizing: border-box;
            padding: 0 px2rem(94) 0 px2rem(68);

            .num {
                color: #fff;
                margin-right: px2rem(26);
                font-size: px2rem(37);
                float: left;
            }

            .tx {
                width: px2rem(94);
                height: px2rem(94);
                display: block;
                margin-top: px2rem(18);
                margin-right: px2rem(24);
                border-radius: 50%;
                float: left;
            }

            .nick {
                width: 2.8rem;
                white-space: nowrap; //不换行
                overflow: hidden; //超出隐藏
                text-overflow: ellipsis; //超出文本省略号
                float: left;
                color: #fff;
                font-size: px2rem(29);
            }

            .score {
                float: right;
                color: #fff;
                font-size: px2rem(26);
            }
        }
    }

}

.rule {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .rule_in {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(668);
        height: px2rem(1027);
        background: url(../images/rule_bg.png) no-repeat;
        background-size: 100% 100%;
        overflow: hidden;

        .cen {
            width: px2rem(600);
            height: px2rem(800);
            overflow-y: scroll;
            margin: px2rem(129) auto 0;

            p {
                color: #FFFFFF;
                font-size: px2rem(24);
                margin-bottom: px2rem(15);
                line-height: 0.52rem;
            }
        }
    }
}

.listRule {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .listRule_in {
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(750);
        height: px2rem(1371);
        background: url(../images/listRuleBg.png) no-repeat;
        background-size: 100% 100%;
        overflow: hidden;

        .listRuletitle {
            width: px2rem(263);
            height: px2rem(59);
            position: absolute;
            top: px2rem(52);
            left: 50%;
            transform: translateX(-50%);
        }

        .box {
            width: px2rem(608);
            height: px2rem(1140);
            overflow-y: scroll;
            margin: px2rem(182) auto 0;

            img {
                width: px2rem(608);
                height: px2rem(1749);
                display: block;
            }
        }
    }
}

.box_pub {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .box_pub_in {
        width: px2rem(750);
        height: px2rem(1050);
        background: url(../images/box_pub.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

        .box_pub_Title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(51);
            width: px2rem(213);
            height: px2rem(60);
        }

        p {
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: px2rem(29);
            position: absolute;
            left: 0;
        }

        .p1 {
            top: px2rem(230);
        }

        .p2 {
            top: px2rem(266);
        }

        .p3 {
            top: px2rem(300);
        }

        .p4 {
            top: px2rem(346);
        }

        .box_pub_ul {
            width: px2rem(540);
            height: 6.9rem;
            position: absolute;
            top: px2rem(437);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            overflow-y: scroll;

            // li {
            //     width: px2rem(140);
            //     height: px2rem(140);
            //     margin-bottom: px2rem(100);
            //     position: relative;
            //     background: url(../images/box_pub_ul_liBg.png) no-repeat;
            //     background-size: 100% 100%;

            //     .gift {
            //         width: px2rem(99);
            //         height: px2rem(106);
            //         position: absolute;
            //         left: 50%;
            //         transform: translateX(-50%);
            //         top: px2rem(17);
            //         // border-radius: 50%;
            //     }

            //     p {
            //         width: 140%;
            //         text-align: center;
            //         color: #FED968;
            //         font-size: px2rem(29);
            //         position: absolute;
            //         left: 50%;
            //         transform: translateX(-50%);
            //         bottom: px2rem(-39);
            //         white-space: nowrap;
            //     }

            //     b {
            //         width: 100%;
            //         text-align: center;
            //         color: #FED968;
            //         font-size: px2rem(24);
            //         position: absolute;
            //         left: 0;
            //         bottom: -0.9rem;
            //     }
            // }
            li {
                width: px2rem(555);
            }

            .li1 {
                height: px2rem(500);
                background: url(../images/box_pubGift1.png) no-repeat;
                background-size: 100% 100%;
            }

            .li2 {
                height: px2rem(710);
                background: url(../images/box_pubGift2.png) no-repeat;
                background-size: 100% 100%;
            }

            .li3 {
                height: px2rem(1173);
                background: url(../images/box_pubGift3.png) no-repeat;
                background-size: 100% 100%;
            }
        }
    }
}

.gx {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .gx_in {
        width: px2rem(668);
        height: px2rem(641);
        background: url(../images/gxBg.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

        .gxBox {
            width: 8rem;
            height: 5.4rem;
            position: relative;
            top: px2rem(121);
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-around;
            overflow-y: scroll;
            flex-wrap: wrap;
            align-items: center;

            li {
                width: px2rem(166);
                height: px2rem(166);
                border: px2rem(1) solid #CA81F4;
                background: linear-gradient(0deg, #5F16AB 0%, #6A18B5 100%);
                border-radius: px2rem(20);
                position: relative;
                margin-bottom: px2rem(44);

                .gift,
                img {
                    width: px2rem(99);
                    height: px2rem(106);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }

                .ts {}

                .mp {
                    width: px2rem(145);
                    height: px2rem(40);
                }

                .qp {
                    width: px2rem(100);
                    height: px2rem(80);
                }

                .zj {}

                .lw {}

                p {
                    color: #FFFFFF;
                    font-size: px2rem(22);
                    position: absolute;
                    left: 0;
                    width: 100%;
                    text-align: center;
                    bottom: px2rem(-35);
                }
            }
        }

        .but {
            width: px2rem(230);
            height: px2rem(82);
            line-height: px2rem(82);
            text-align: center;
            color: #FFFFFF;
            font-size: px2rem(32);
            background: url(../images/pubBut.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: px2rem(545);
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.endActivity {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .endActivity_in {
        width: px2rem(500);
        height: px2rem(347);
        background: url(../images/Pub_qp.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

        p {
            width: 100%;
            text-align: center;
            position: absolute;
            left: 0;
            top: px2rem(123);
            color: #FFFFFF;
            font-size: px2rem(34);
        }

        .but {
            text-align: center;
            width: px2rem(230);
            height: px2rem(82);
            line-height: px2rem(73);
            color: #FFFFFF;
            font-size: px2rem(32);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(223);
            background: url(../images/pubBut.png) no-repeat;
            background-size: 100% 100%;
        }
    }


}

.zg {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .zg_in {
        width: px2rem(568);
        height: px2rem(400);
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
    }
}

.record_box {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6);

    .record_box_in {
        width: px2rem(668);
        height: px2rem(641);
        background: url(../images/record_box.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;

        ul {
            width: 100%;
            height: 5rem;
            box-sizing: border-box;
            position: absolute;
            top: px2rem(208);
            left: 0;
            padding: 0 px2rem(111) 0 px2rem(82);
            overflow-y: scroll;

            li {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: px2rem(10);

                .left {
                    height: px2rem(50);

                    p {
                        color: #FFFFFF;
                        font-size: px2rem(26.66);
                    }

                    b {
                        color: #F5B8FE;
                        font-size: px2rem(24);
                    }
                }

                .right {
                    height: px2rem(50);
                    line-height: px2rem(50);
                    color: #fff;
                    font-size: px2rem(26.66);
                }
            }
        }
    }
}