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

body,
html {
    width: 100%;
    background: #CE3346;
    position: relative;
    box-sizing: border-box;
    padding-bottom: px2rem(120);
}

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

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

    .headerText {
        width: px2rem(573);
        height: px2rem(224);
        position: absolute;
        top: px2rem(0);
        left: 50%;
        transform: translateX(-50%);
    }

    .rule_icon {
        width: px2rem(118);
        height: px2rem(46);
        position: absolute;
        left: 0;
        top: px2rem(89);
    }

    .record_icon {
        width: px2rem(118);
        height: px2rem(46);
        position: absolute;
        left: 0;
        top: px2rem(153);
    }

    .rank_icon {
        width: px2rem(121);
        height: px2rem(125);
        position: absolute;
        right: px2rem(19);
        top: px2rem(217);
    }

    .headerH3 {
        width: px2rem(328);
        height: px2rem(71);
        line-height: px2rem(65);
        background: url(../images/headerH3.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: px2rem(203);
        color: #FADDB4;
        font-size: px2rem(22);
        text-align: center;
    }
}

.box {
    width: px2rem(719);
    height: px2rem(743);
    border-radius: px2rem(40);
    border: px2rem(12) solid #FBC577;
    box-sizing: border-box;
    background: #8B4621;
    margin: -2.1rem auto 0;
    position: relative;
    // display: none;
    // overflow: hidden;

    .boxTitle {
        width: px2rem(398);
        height: px2rem(69);
        background: url(../images/boxTitle.png) no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -1rem;
        text-align: center;
        line-height: px2rem(69);
        color: #FFFFFF;
        font-size: px2rem(26);

        b {
            font-weight: bold;
            font-size: px2rem(40);
            line-height: px2rem(70);
        }
    }

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

        div {
            width: px2rem(204);
            height: px2rem(95);
            line-height: px2rem(85);
            text-align: center;
            color: #975B25;
            font-size: px2rem(40);
            background: url(../images/tab.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            vertical-align: middle;

            img {
                display: block;
                width: px2rem(40);
                height: px2rem(32);
                margin-top: 0.4rem;
            }
        }

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

    .box_in {
        width: px2rem(702);
        height: px2rem(261);
        background: url(../images/box_in.png) no-repeat;
        background-size: 100% 100%;
        margin: px2rem(16) auto px2rem(10);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 0.4rem;

        .sBox {
            width: px2rem(168);
            height: px2rem(257);
            position: relative;
            display: none;

            .sBox1 {
                width: px2rem(168);
                height: px2rem(176);
                background: url(../images/sBox.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: 0.7rem;

                img {
                    width: px2rem(120);
                    height: px2rem(120);
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: -0.1rem;
                }
            }

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

            .SboxText {
                width: px2rem(136);
                height: px2rem(46);
                line-height: px2rem(46);
                background: url(../images/sBoxTextBg.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                bottom: 0.1rem;
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                color: #fff;
                font-weight: bold;
                font-size: px2rem(24);
            }

            .qp {
                display: none;
                width: px2rem(152);
                height: px2rem(79);
                background: url(../images/qp.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                top: px2rem(-2);
                left: 50%;
                transform: translateX(-50%);
                text-align: center;
                color: #fff;

                i {
                    font-style: normal;
                    font-size: px2rem(20);
                    display: block;
                    margin-top: px2rem(15);
                    margin-bottom: px2rem(5);
                    width: 100%;
                }

                p {
                    font-size: px2rem(22);
                    display: flex;
                    justify-content: center;

                    img {
                        width: px2rem(26);
                        height: px2rem(22);
                    }
                }
            }

            .bei {
                width: px2rem(73);
                height: px2rem(34);
                line-height: px2rem(34);
                text-align: center;
                color: #FFFFFF;
                font-size: px2rem(24);
                background: url(../images/sBoxbei.png) no-repeat;
                background-size: 100% 100%;
                position: absolute;
                left: px2rem(10);
                bottom: 1.05rem;
                text-indent: -5px;
            }
        }
    }

    .masks {
        position: absolute;
        width: 9rem;
        height: 9rem;
        background: none;
        left: 50%;
        transform: translateX(-50%);
        top: 0rem;
        display: none;
    }
}

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

    .wljg {
        width: px2rem(118);
        height: px2rem(33);
        position: absolute;
        top: px2rem(31);
        left: px2rem(50);
    }

    .sqp {
        float: left;
        display: block;
        width: px2rem(40);
        height: px2rem(40);
        // margin-top: px2rem(28);
        // margin-right: px2rem(12);
        position: absolute;
        z-index: 3;
        top: px2rem(28);
    }

    .sqp1 {
        left: px2rem(182);
    }

    .sqp2 {
        left: px2rem(234);
    }

    .sqp3 {
        left: px2rem(286);
    }

    .sqp4 {
        left: px2rem(338);
    }

    .sqp5 {
        left: px2rem(390);
    }

    .sqp6 {
        left: px2rem(442);
    }

    .sqp7 {
        left: px2rem(494);
    }

    .sqp8 {
        left: px2rem(546);
    }

    .sqp9 {
        left: px2rem(598);
    }

    .sqp10 {
        left: px2rem(650);
    }

    .sqp_in {
        float: left;
        width: px2rem(32);
        height: px2rem(32);
        position: absolute;
        top: px2rem(33);
        display: none;
    }

    .sqp_in1 {
        left: px2rem(186);
    }

    .sqp_in2 {
        left: px2rem(238);
    }

    .sqp_in3 {
        left: px2rem(290);
    }

    .sqp_in4 {
        left: px2rem(342);
    }

    .sqp_in5 {
        left: px2rem(394);
    }

    .sqp_in6 {
        left: px2rem(446);
    }

    .sqp_in7 {
        left: px2rem(498);
    }

    .sqp_in8 {
        left: px2rem(550);
    }

    .sqp_in9 {
        left: px2rem(602);
    }

    .sqp_in10 {
        left: px2rem(654);
    }
}

.resultText {
    width: px2rem(714);
    height: px2rem(86);
    position: relative;
    margin: -0.2rem auto 0.1rem;
    background: url(../images/resultText.png) no-repeat;
    background-size: 100% 100%;
}

h3 {
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: px2rem(20);

    b {
        margin-top: px2rem(8);
        display: block;
    }
}

.my {
    width: px2rem(750);
    height: px2rem(158);
    background: url(../images/my.png) no-repeat;
    background-size: 100% 100%;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 px2rem(30);
    z-index: 8;

    div {
        min-width: px2rem(328);
        height: px2rem(56);
        line-height: px2rem(56);
        color: #FFFFFF;
        font-size: px2rem(24);
        box-sizing: border-box;
        background: #BD7F38;
        border-radius: px2rem(56);
        margin-top: px2rem(36);
        border: 1px solid #FBF6F2;
        position: relative;
        font-weight: bold;

        .Sdiamond {
            width: px2rem(32);
            height: px2rem(28);
            position: absolute;
            left: px2rem(19);
            top: 50%;
            transform: translateY(-50%);
        }

        .add {
            width: px2rem(45);
            height: px2rem(45);
            position: absolute;
            right: px2rem(6);
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .left {
        padding: 0 px2rem(61) 0 0.75rem;
    }

    .right {
        padding: 0 px2rem(41) 0 0.75rem;
    }
}

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

    .result_popup_in {
        width: px2rem(660);
        height: px2rem(860);
        background: url(../images/result_popup.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;
        padding: px2rem(94) px2rem(30) 0;

        .result_popup_inTitle {
            width: px2rem(444);
            height: px2rem(138);
            line-height: 1.5rem;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(-69);
            text-align: center;
            color: #B33E17;
            font-size: px2rem(32);
            background: url(../images/result_popupTitle.png) no-repeat;
            background-size: 100% 100%;
            font-weight: 600;

            b {
                font-weight: 600;
            }
        }

        .resultList {
            width: 100%;
            display: flex;
            justify-content: center;
            height: px2rem(118);

            li {
                width: px2rem(118);
                height: px2rem(118);
                background: url(../images/border.png) no-repeat;
                background-size: 100% 100%;
                position: relative;

                img {
                    position: absolute;
                    width: px2rem(94);
                    height: px2rem(94);
                    border-radius: 50%;
                    left: 48%;
                    top: 46%;
                    transform: translate(-50%, -50%);
                }

                .name {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: -0.5rem;
                    color: #fff;
                    font-weight: 800;
                    font-size: px2rem(28);
                    text-align: center;
                }
            }
        }

        .income {
            width: px2rem(548);
            height: px2rem(25);
            line-height: px2rem(25);
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 4.45rem;

            p {
                display: flex;
                justify-content: center;
                text-align: center;
                width: 50%;

                img {
                    width: px2rem(26);
                    height: px2rem(22);
                }

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

        .no {
            width: px2rem(548);
            height: px2rem(160);
            position: absolute;
            bottom: px2rem(16);
            left: 50%;
            transform: translateX(-50%);
            background: url(../images/result_popupNo.png) no-repeat;
            background-size: 100% 100%;

            .no1 {
                width: px2rem(170);
                height: 100%;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);

                .tx {
                    width: px2rem(108);
                    height: px2rem(108);
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: px2rem(2) solid #FFFFFF;
                    position: absolute;
                    top: px2rem(-190);
                    left: 50%;
                    transform: translateX(-50%);
                }

                .name {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: px2rem(-66);
                    text-align: center;
                    color: #FFFFFF;
                    font-size: px2rem(24);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                p {
                    width: 100%;
                    height: px2rem(30);
                    line-height: px2rem(30);
                    display: flex;
                    justify-content: center;
                    position: absolute;
                    left: 0;
                    top: px2rem(-30);

                    .Sdiamond {
                        width: px2rem(26);
                        height: px2rem(22);
                        margin-top: 0.05rem;
                    }

                    b {
                        font-size: px2rem(28);
                        color: #fff;
                    }
                }
            }

            .no2 {
                width: px2rem(170);
                height: 100%;
                position: absolute;
                bottom: 0;
                left: 0;

                .tx {
                    width: px2rem(108);
                    height: px2rem(108);
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: px2rem(2) solid #FFFFFF;
                    position: absolute;
                    top: px2rem(-160);
                    left: 50%;
                    transform: translateX(-50%);
                }

                .name {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: px2rem(-36);
                    text-align: center;
                    color: #FFFFFF;
                    font-size: px2rem(24);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                p {
                    width: 100%;
                    height: px2rem(30);
                    line-height: px2rem(30);
                    display: flex;
                    justify-content: center;
                    position: absolute;
                    left: 0;
                    top: px2rem(-0);

                    .Sdiamond {
                        width: px2rem(26);
                        height: px2rem(22);
                        margin-top: 0.05rem;
                    }

                    b {
                        font-size: px2rem(28);
                        color: #fff;
                    }
                }
            }

            .no3 {
                width: px2rem(170);
                height: 100%;
                position: absolute;
                bottom: 0;
                right: 0;

                .tx {
                    width: px2rem(108);
                    height: px2rem(108);
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: px2rem(2) solid #FFFFFF;
                    position: absolute;
                    top: px2rem(-160);
                    left: 50%;
                    transform: translateX(-50%);
                }

                .name {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: px2rem(-36);
                    text-align: center;
                    color: #FFFFFF;
                    font-size: px2rem(24);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                p {
                    width: 100%;
                    height: px2rem(30);
                    line-height: px2rem(30);
                    display: flex;
                    justify-content: center;
                    position: absolute;
                    left: 0;
                    top: px2rem(-0);

                    .Sdiamond {
                        width: px2rem(26);
                        height: px2rem(22);
                        margin-top: 0.05rem;
                    }

                    b {
                        font-size: px2rem(28);
                        color: #fff;
                    }
                }
            }
        }
    }
}

// 规则弹窗
.shade-mask {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.4);

    .shade-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(576);
        height: px2rem(666);
        background: url('../images/rule-bg.png') no-repeat 0 0/100% 100%;
        // padding: px2rem(56) px2rem(54) px2rem(42) px2rem(40);
        // box-sizing: border-box;
        font-size: px2rem(26);
        color: #B58147;
        font-weight: 600;
        overflow: hidden;

        main {
            position: absolute;
            top: px2rem(60);
            width: 100%;
            height: 85%;
            padding: 0 px2rem(42);
            box-sizing: border-box;
            overflow: auto;

            div {
                line-height: 1.2;
                margin-top: 0.2rem;

                .title {
                    width: px2rem(252);
                    height: px2rem(46);
                    line-height: px2rem(46);
                    background: url('../images/title-bg.png') no-repeat 0 0/100% 100%;
                    margin: 0 auto px2rem(22);
                    text-align: center;
                }

                .jietu {
                    width: px2rem(490);
                    height: px2rem(275);
                    margin-top: px2rem(12);
                    margin-bottom: px2rem(32);

                    &.t2 {
                        height: px2rem(299);
                    }

                    &.t3 {
                        // height: px2rem(301);
                        height: 4.2rem;
                    }
                }
            }
        }
    }
}

// 今日排名弹窗
.shade-mask-rank {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.6);

    .shade-content-rank {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(660);
        height: px2rem(980);
        background: white;
        background: url(../images/myBoxBg.png) no-repeat;
        background-size: 100% 100%;

        .rank-top {
            height: px2rem(340);
            // background-image: linear-gradient(#F49C35, #FFDD81);
            overflow: hidden;

            .tab-wrap {
                font-family: 'pingfang-regular';
                width: px2rem(440);
                height: px2rem(70);
                background-color: rgba($color: #fff, $alpha: .3);
                border-radius: px2rem(36);
                margin: px2rem(20) auto px2rem(6);
                display: flex;
                overflow: hidden;
                padding: px2rem(5);
                box-sizing: border-box;
                justify-content: space-between;

                span {
                    display: inline-block;
                    // width: px2rem(210);
                    width: 50%;
                    height: px2rem(60);
                    line-height: px2rem(60);
                    text-align: center;
                    font-size: px2rem(30);
                    color: white;

                    // &:first-child {
                    //     margin-left: px2rem(14);
                    // }
                }

                .active {
                    background-color: white;
                    color: #F56801;
                    border-radius: px2rem(30);
                }
            }

            .topthree-wrap {
                position: relative;

                .info-wrap {
                    position: absolute;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;

                    &:first-child {
                        width: px2rem(132);
                        // height: px2rem(175);
                        // margin-top: px2rem(86);
                        left: 50%;
                        transform: translateX(-50%);

                        .diamond-num {
                            display: none;
                        }
                    }

                    .avatar {
                        width: px2rem(194);
                        height: px2rem(188);
                        margin-bottom: px2rem(20);

                        p {
                            position: relative;
                            z-index: 99;
                            width: 100%;
                            height: 100%;
                            background: url('../images/first.png') no-repeat 0 0/100% 100%;
                        }

                        img {
                            position: relative;
                            z-index: 9;
                            top: px2rem(-160);
                            // left: px2rem(2);
                            left: 50%;
                            transform: translateX(-50%);
                            width: px2rem(128);
                            height: px2rem(128);
                            border-radius: 50%;
                        }
                    }

                    .nick,
                    .diamond-num {
                        width: px2rem(360);
                        text-align: center;
                        font-size: px2rem(30);
                        font-weight: bold;
                        color: white;
                    }

                    .diamond-num {
                        font-family: 'din-medium';
                        margin: 0;
                        margin-top: px2rem(-20);
                        margin-bottom: px2rem(4);
                        color: #fff;
                        font-size: px2rem(24);
                    }
                }
            }
        }

        .other-rank {
            overflow: auto;
            position: absolute;
            width: 100%;
            height: 7rem;
            // background-color: white;
            padding: px2rem(30) px2rem(20) 0;
            box-sizing: border-box;
            margin-top: 0.25rem;

            li {
                width: 90%;
                display: flex;
                align-items: center;
                // margin-bottom: px2rem(40);
                margin: 0 auto px2rem(40);

                &:last-child {
                    // margin-bottom: px2rem(140);
                }

                .index {
                    display: inline-block;
                    width: px2rem(30);
                    font-size: px2rem(30);
                    font-weight: bold;
                    color: #333;
                    text-align: center;
                }

                .others-info {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    margin-left: px2rem(20);

                    img {
                        width: px2rem(100);
                        height: px2rem(100);
                        border-radius: 50%;
                        margin-right: px2rem(20);
                    }

                    .others-nick {
                        font-size: px2rem(28);
                        font-weight: bold;
                        color: #333333;
                    }
                }

                .others-diamond-num {
                    font-size: px2rem(26);
                    font-weight: bold;
                    color: #FF7700;

                    b {
                        color: #FF5110;
                        font-weight: bold;
                    }
                }
            }
        }

        .mine {
            position: fixed;
            left: 0;
            bottom: 0;
            z-index: 9;
            width: 100%;
            height: px2rem(100);
            // background-color: rgba($color: #000000, $alpha: .8);
            background: url(../images/mineBg.png) no-repeat;
            background-size: 100% 100%;
            padding: 0 0.7rem 0 0.2rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;

            .mine-rank {
                font-size: px2rem(26);
                font-weight: bold;
                color: white;
                white-space: nowrap;
            }

            .mine-info {
                flex: 1;
                display: flex;
                align-items: center;
                white-space: nowrap;

                img {
                    width: px2rem(80);
                    height: px2rem(80);
                    border-radius: 50%;
                    margin-left: px2rem(30);
                    margin-right: px2rem(40);
                }

                .mine-nick {
                    font-size: px2rem(28);
                    font-weight: bold;
                    color: white;
                    overflow: hidden; //超出隐藏
                    white-space: nowrap; //不折行
                    text-overflow: ellipsis;
                    width: 3.5rem;
                }
            }

            .mine-diamond-num {
                font-size: px2rem(26);
                font-weight: bold;
                color: #fff;
                white-space: nowrap;

                b {
                    color: #fff;
                    font-weight: bold;
                }
            }
        }
    }
}

// 碎片不足弹窗
.shade-mask-fragmentNum {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.6);

    .shade-content-fragmentNum {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(600);
        height: px2rem(600);
        background: white;
        border-radius: px2rem(24);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;

        .fragmentNum-title {
            font-size: px2rem(36);
            font-weight: bold;
            color: #333333;
            margin-top: px2rem(38);
        }

        img {
            width: px2rem(120);
            width: px2rem(120);
            margin-top: px2rem(108);
        }

        p {
            font-size: px2rem(30);
            font-weight: 600;
            color: #333333;
            margin-top: px2rem(50);
        }

        .fragmentNum-btn-wrap {
            display: flex;
            justify-content: space-between;
            width: px2rem(512);
            height: px2rem(76);
            margin-top: px2rem(90);

            .cancel-btn,
            .confirm-btn {
                width: px2rem(240);
                height: px2rem(76);
                line-height: px2rem(76);
                text-align: center;
                border-radius: px2rem(38);
                font-size: px2rem(28);
                font-weight: 600;
                background-color: #EAE5FC;
                color: #7154EE;
            }

            .confirm-btn {
                background-color: #735FFE;
                color: #fff;
            }
        }
    }
}