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

html,
body {
    width: 100%;
    // height: 100%;
    background: #C0AAFF;
    padding-bottom: px2rem(44, );
    overflow-x: hidden;
}

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

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

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

    .rules {
        width: px2rem(48, );
        height: px2rem(140, );
        position: absolute;
        right: 0;
        top: px2rem(301, );
    }
}

.ruleContent {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
    z-index: 99;

    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: px2rem(600, );
        height: px2rem(995, );
    }
}

.limitGift {
    width: px2rem(690, );
    height: px2rem(288, );
    background: url(../images/limitGift.png) no-repeat;
    background-size: 100% 100%;
    margin: 0 auto px2rem(40, );
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    padding-top: px2rem(84, );

    .swiper {
        width: px2rem(595, );
        height: px2rem(180, );
        margin: 0 auto;
        overflow: hidden;

        .swiper-slide {
            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
    }
}

.tabBox {
    width: px2rem(690, );
    height: px2rem(67, );
    margin: 0 auto px2rem(40, );
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;

    .tab {
        width: px2rem(165, );
        height: px2rem(67, );
    }

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

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

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

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

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

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

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

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

.page1 {
    .desire {
        width: px2rem(690, );
        height: px2rem(2061, );
        margin: 0 auto px2rem(0, );
        background: url(../images/desire.png) no-repeat;
        background-size: 100% 100%;
        position: relative;

        .rule1_but {
            width: 2rem;
            height: 0.7rem;
            position: absolute;
            right: 0.4rem;
            top: 2.6rem;
        }

        .clock {
            color: #FE447F;
            font-size: px2rem(26, );
            position: absolute;
            left: px2rem(172, );
            top: px2rem(208, );
            font-weight: bold;
        }

        .speed {
            width: px2rem(642, );
            height: px2rem(110, );
            border: px2rem(1, ) solid #FFFFFF;
            background: linear-gradient(0deg, #FFC9BA 0%, #FF8D9F 96%);
            border-radius: px2rem(16, );
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(264, );

            .line {
                position: relative;
                width: 7.8rem;
                height: px2rem(20, );
                border-radius: px2rem(8, );
                left: 50%;
                top: px2rem(31, );
                transform: translateX(-50%);
                background: rgba(255, 255, 255, 0.5);


                span {
                    width: 10%;
                    height: 100%;
                    border-radius: px2rem(8, );
                    position: absolute;
                    left: 0;
                    top: 0;
                    background: #FF6686;
                }

                .gift1,
                .gift2,
                .gift3 {
                    position: absolute;
                    left: 1.1rem;
                    top: 90%;
                    transform: translateY(-50%);
                    width: px2rem(130, );

                    img {
                        display: block;
                        width: px2rem(92, );
                        height: px2rem(67, );
                        margin: 0 auto;
                    }

                    p {
                        color: #FFFFFF;
                        font-size: px2rem(22, );
                        text-align: center;
                    }
                }

                .gift2 {
                    left: px2rem(306, );
                }

                .gift3 {
                    left: px2rem(484, );
                }

            }
        }

        .card {
            width: px2rem(300, );
            height: px2rem(388, );
            position: absolute;
            z-index: 1;

            .clicks {
                position: absolute;
                left: 0;
                top: 0;
                width: px2rem(300, );
                height: px2rem(388, );
                display: none;
            }



            .notObtained {
                display: none;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background: url(../images/notObtained.png) no-repeat;
                background-size: 100% 100%;
                z-index: 2;

                .but {
                    width: px2rem(175, );
                    height: px2rem(60, );
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 2.15rem;
                }
            }

            .obtained {
                display: none;
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background: url(../images/obtained.png) no-repeat;
                background-size: 100% 100%;
                z-index: 3;

                .but1 {
                    width: px2rem(210, );
                    height: px2rem(68, );
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 1.1rem;
                }

                .but2 {
                    width: px2rem(210, );
                    height: px2rem(68, );
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    top: 2.45rem;
                }
            }

            .acquired {
                display: none;
                position: absolute;
                z-index: 2;
                left: 0;
                top: px2rem(1, );
                width: px2rem(160, );
                height: px2rem(60, );
            }

            .cardNum {
                position: absolute;
                width: px2rem(64, );
                height: px2rem(64, );
                line-height: px2rem(74, );
                text-align: center;
                color: #FE447F;
                font-size: px2rem(26, );
                right: px2rem(11, );
                bottom: px2rem(99, );
                background: url(../images/cardNum.png) no-repeat;
                background-size: 100% 100%;
            }
        }

        .card1 {
            left: px2rem(24, );
            top: px2rem(397, );
        }

        .card2 {
            right: px2rem(24, );
            top: px2rem(397, );
        }

        .card3 {
            left: px2rem(24, );
            top: px2rem(808, );
        }

        .card4 {
            right: px2rem(24, );
            top: px2rem(808, );
        }

        .card5 {
            left: px2rem(24, );
            top: px2rem(1221, );
        }

        .card6 {
            right: px2rem(24, );
            top: px2rem(1221, );
        }

        .card7 {
            left: px2rem(24, );
            bottom: px2rem(40, );
        }

        .card8 {
            right: px2rem(24, );
            bottom: px2rem(40, );
        }
    }
}

.page2 {
    .redTree {
        width: px2rem(690, );
        height: px2rem(887, );
        background: url(../images/redTree.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto px2rem(46, );
        position: relative;

        .redTree_bag {
            position: absolute;
            color: #FE447F;
            font-size: px2rem(26, );
            height: px2rem(44, );
            left: px2rem(180, );
            top: px2rem(102, );

            span {
                display: inline-block;
                width: px2rem(44, );
                height: px2rem(44, );
                background: url(../images/redTree_bag_span.png) no-repeat;
                background-size: 100% 100%;
                margin-right: px2rem(10, );
                float: left;
            }

            b {
                height: px2rem(44, );
                line-height: px2rem(44, );
                display: inline-block;
                float: left;
            }
        }

        .recordRules {
            width: px2rem(160, );
            height: px2rem(48, );
            line-height: px2rem(48, );
            border-radius: px2rem(20, );
            position: absolute;
            top: px2rem(101, );
            text-align: center;
            color: #FE447F;
            font-size: px2rem(26, );
            right: px2rem(24, );
            background: #fff;
        }

        .box {
            width: px2rem(642, );
            height: px2rem(480, );
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(170, );
            // background: #390F27;
            background: url(../images/redTreeBg.png) no-repeat;
            background-size: 100% 100%;
            border-radius: px2rem(20, );
            position: absolute;

            .cloud {
                width: px2rem(626, );
                height: px2rem(165, );
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: px2rem(5, );
                z-index: 2;
            }

            .red {
                width: px2rem(150, );
                height: px2rem(160, );
                position: absolute;

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

                .red_in {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: none;

                    .gift {
                        position: absolute;
                        width: px2rem(72, );
                        height: px2rem(72, );
                        left: 50%;
                        transform: translateX(-50%);
                        top: px2rem(16, );
                        border-radius: 50%;
                    }

                    .gift_img {
                        width: 0.9rem;
                        height: 0.45rem;
                        top: 0.5rem;
                    }

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

                    span {
                        position: absolute;
                        width: 100%;
                        left: 0;
                        top: px2rem(129, );
                        color: #FEFFA3;
                        font-size: px2rem(18, );
                        text-align: center;
                    }
                }

                .redBagSvag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: px2rem(150, );
                    height: px2rem(160, );
                    display: none;
                }
            }

            .red1 {
                left: px2rem(7, );
                top: px2rem(215, );
            }

            .red2 {
                left: px2rem(163, );
                top: px2rem(287, );
            }

            .red3 {
                left: px2rem(238, );
                top: px2rem(104, );
            }

            .red4 {
                left: px2rem(367, );
                top: px2rem(268, );
            }

            .red5 {
                left: px2rem(426, );
                top: px2rem(73, );
            }

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

        .box2 {
            width: px2rem(642, );
            height: px2rem(480, );
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(170, );
            position: absolute;
            z-index: 1;
            display: none;

            .red {
                width: px2rem(150, );
                height: px2rem(160, );
                position: absolute;

                .redBagSvag {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: px2rem(150, );
                    height: px2rem(160, );
                    display: none;
                }
            }

            .red1 {
                left: px2rem(7, );
                top: px2rem(215, );
            }

            .red2 {
                left: px2rem(163, );
                top: px2rem(287, );
            }

            .red3 {
                left: px2rem(238, );
                top: px2rem(104, );
            }

            .red4 {
                left: px2rem(367, );
                top: px2rem(268, );
            }

            .red5 {
                left: px2rem(426, );
                top: px2rem(73, );
            }

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

        .redTreeBut {
            width: px2rem(400, );
            height: px2rem(98, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(694, );
        }

        .sx {
            width: px2rem(300, );
            height: 0.5rem;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.47rem;
            position: absolute;
        }
    }

    .redTreeTakst {
        width: px2rem(690, );
        height: px2rem(809, );
        margin: 0 auto px2rem(40, );
        background: url(../images/redTreeTakst.png) no-repeat;
        background-size: 100% 100%;
        position: relative;

        .redTreeTakstTab {
            position: absolute;
            width: px2rem(500, );
            height: px2rem(72, );
            line-height: px2rem(72, );
            border-radius: px2rem(72, );
            background: #FFFFFF;
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(107, );

            div {
                width: px2rem(250, );
                height: 100%;
                border-radius: px2rem(72, );
                text-align: center;
                color: #FE7AA3;
                background: #fff;
                font-size: px2rem(30, );
                font-weight: bold;
            }

            .active {
                color: #FFFFFF;
                background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
            }
        }

        .title {
            width: 100%;
            position: absolute;
            left: 0;
            top: px2rem(212, );
            font-size: px2rem(22, );
            color: #BB4A56;
            text-align: center;
        }

        .tabs1 {
            width: px2rem(641, );
            margin: px2rem(46, ) auto 0;
            overflow: hidden;

            .div {
                width: px2rem(641, );
                position: relative;
                background: linear-gradient(90deg, #FF8894 0%, #FFA2A4 99%);
                border-radius: px2rem(16, );
                margin-bottom: px2rem(16, );
                height: px2rem(94, );

                p {
                    position: absolute;
                    color: #fff;
                    font-size: px2rem(20, );
                    left: px2rem(26, );
                    top: px2rem(22, );
                }

                b {
                    position: absolute;
                    font-size: px2rem(18, );
                    color: #FEFFA3;
                    left: px2rem(26, );
                    top: px2rem(53, );
                }

                .but {
                    width: px2rem(110, );
                    height: px2rem(45, );
                    // background: linear-gradient(0deg, #FFEFF6 0%, #FFFCE0 100%);
                    background: url(../images/redTreeTakst_but.png);
                    background-size: 100% 100%;
                    border-radius: px2rem(8, );
                    color: #3D001F;
                    font-size: px2rem(23, );
                    text-align: center;
                    line-height: px2rem(40, );
                    position: absolute;
                    right: px2rem(26, );
                    top: 50%;
                    transform: translateY(-50%);
                }

                .butOut {
                    background: #EBCACB;
                    color: #FFF3F9;
                }
            }

            .div1 {
                height: px2rem(167, );
                margin-top: px2rem(254, );

                p {
                    color: #fff;
                    font-size: px2rem(20, );
                    position: absolute;
                    left: px2rem(26, );
                    top: px2rem(14, );
                }

                .line {
                    width: px2rem(439, );
                    height: px2rem(27, );
                    border-radius: px2rem(27, );
                    border: px2rem(1, ) solid #FFE4E7;
                    position: absolute;
                    left: px2rem(24, );
                    top: px2rem(84, );
                    // background: #C35053;
                    box-sizing: border-box;
                    background: #ff6687;

                    b {
                        position: absolute;
                        z-index: 3;
                        color: #fff;
                        font-size: px2rem(20, );
                        left: px2rem(8, );
                        top: 50%;
                        transform: translateY(-50%);
                    }

                    span {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 80%;
                        height: px2rem(24.5, );
                        background: linear-gradient(90deg, #FFD5A9 0%, #E6FFFC 99%);
                        border-radius: px2rem(24.5, );
                    }

                    .gift1,
                    .gift2,
                    .gift3 {
                        width: px2rem(80, );
                        height: px2rem(100, );
                        position: absolute;
                        left: px2rem(130, );
                        top: 50%;
                        transform: translateY(-50%);

                        b {
                            display: block;
                            width: 100%;
                            text-align: center;
                            color: #FEFFA3;
                            font-size: px2rem(18, );
                            position: absolute;
                            left: 0;
                            top: px2rem(15, );
                        }

                        img {
                            display: block;
                            width: px2rem(49, );
                            height: px2rem(48, );
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }

                        i {
                            width: 100%;
                            text-align: center;
                            color: #fff;
                            font-size: px2rem(20, );
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            font-style: normal;
                        }
                    }

                    .gift2 {
                        left: px2rem(280, );
                    }

                    .gift3 {
                        left: px2rem(390, );
                    }
                }


            }
        }

        .tabs2 {
            display: none;

            .redTreeTakstGift {
                width: px2rem(644, );
                height: px2rem(447, );
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(253, );
            }

            .redTreeTakstButImg {
                position: absolute;
                width: px2rem(280, );
                height: px2rem(72, );
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(713, );
            }
        }

    }
}

.page3 {

    // display: none;
    .lovePostOffice {
        width: px2rem(690, );
        height: px2rem(812, );
        background: url(../images/lovePostOffice.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto px2rem(39, );
        position: relative;
        overflow: hidden;

        .dm {
            margin: 1.6rem auto 0;
            width: px2rem(600, );
            height: px2rem(450, );

            .my_containers {
                // width: px2rem(587, );
                height: px2rem(60, );
                line-height: px2rem(60, );
                border-radius: px2rem(60, );
                font-size: px2rem(24, );
                color: #FEFFA3;
                position: relative;
                box-sizing: border-box;
                background: rgba(48, 0, 9, 0.5);
                padding: 0 px2rem(14, ) 0 px2rem(120, );
                border: px2rem(2, ) solid #FFF7D0;

                .l {
                    position: absolute;
                    left: px2rem(1, );
                    top: px2rem(0, );
                    width: px2rem(56, );
                    height: px2rem(56, );
                    border-radius: px2rem(56, );
                }

                .r {
                    position: absolute;
                    left: px2rem(48, );
                    top: px2rem(0, );
                    width: px2rem(56, );
                    height: px2rem(56, );
                    border-radius: px2rem(56, );
                    z-index: 2;
                }
            }
        }

        .zfImg {
            position: absolute;
            right: px2rem(23, );
            top: px2rem(601, );
            width: px2rem(276, );
            height: px2rem(34, );
        }

        .yw {
            width: px2rem(310, );
            height: px2rem(120, );
            position: absolute;
            left: px2rem(24, );
            top: px2rem(656, );
        }

        .yx {
            width: px2rem(310, );
            height: px2rem(120, );
            position: absolute;
            right: px2rem(24, );
            top: px2rem(656, );
        }

        .redDot {
            width: px2rem(16, );
            height: px2rem(16, );
            border-radius: px2rem(16, );
            background: #FF3871;
            z-index: 3;
            position: absolute;
            right: px2rem(42, );
            bottom: px2rem(127, );
        }
    }

    .twoWayRush {
        width: px2rem(690, );
        height: px2rem(1311, );
        background: url(../images/twoWayRush.png) no-repeat;
        background-size: 100% 100%;
        margin: 0 auto px2rem(54, );
        position: relative;

        .rule_img {
            position: absolute;
            width: 2.2rem;
            height: 0.7rem;
            right: 0.15rem;
            top: 0.2rem;
        }

        .twoWayRush_qs {
            width: px2rem(158, );
            height: px2rem(84, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(188, );
            background: url(../images/twoWayRush_qs.png) no-repeat;
            background-size: 100% 100%;

            .twoWayRush_ax {
                position: absolute;
                width: px2rem(99, );
                height: px2rem(48, );
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 3;
            }

            .tx_l {
                width: px2rem(80, );
                height: px2rem(80, );
                position: absolute;
                left: px2rem(2, );
                top: px2rem(2, );
                border-radius: 50%;
                z-index: 1;
            }

            .tx_r {
                width: px2rem(80, );
                height: px2rem(80, );
                position: absolute;
                right: px2rem(2, );
                top: px2rem(2, );
                border-radius: 50%;
                z-index: 2;
            }
        }

        .twoWayRushline {
            width: px2rem(642, );
            height: px2rem(40, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(273, );
            border-radius: px2rem(40, );
            background: #fff;
            display: flex;

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

            .c {
                width: px2rem(6, );
                height: px2rem(52, );
                border-radius: px2rem(6, );
                background: #FF4B85;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 3;
            }

            .left {
                width: 10%;
                position: absolute;
                left: 0;
                top: 0;
                height: px2rem(40, );
                background: linear-gradient(90deg, #FF4585 0%, #FF8691 100%);
                flex: 1;
                border-top-left-radius: px2rem(40, );
                border-bottom-left-radius: px2rem(40, );
            }

            .right {
                width: 10%;
                position: absolute;
                right: 0;
                top: 0;
                height: px2rem(40, );
                background: linear-gradient(90deg, #89CCFF 0%, #A272F4 100%);
                flex: 1;
                border-top-right-radius: px2rem(40, );
                border-bottom-right-radius: px2rem(40, );
            }
        }

        .qingshu {
            width: px2rem(642, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(335, );

            span {
                float: left;
                color: #482F2F;
                font-size: px2rem(26, );

                b {
                    color: #FE447F;
                    font-size: px2rem(24, );
                    font-weight: bold;
                }
            }

            .r {
                float: right;
            }
        }

        .twoWayRushRed {
            height: px2rem(44, );
            line-height: px2rem(44, );
            position: absolute;
            top: px2rem(487, );
            left: px2rem(171, );

            img {
                display: inline-block;
                float: left;
                width: px2rem(44, );
                height: px2rem(44, );
                margin-right: px2rem(9, );

            }

            b {
                float: left;
                font-weight: bold;
                color: #FE447F;
                font-size: px2rem(26, );
                line-height: px2rem(50, );
            }
        }

        .gbdm {
            width: px2rem(643, );
            height: px2rem(553, );
            background: url(../images/gb.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            top: px2rem(571, );
            left: 50%;
            transform: translateX(-50%);

            .yqz9999 {
                width: px2rem(139, );
                height: px2rem(133, );
                position: absolute;
                left: 0.28rem;
                top: 0;
            }

            .yqz12999 {
                width: px2rem(139, );
                height: px2rem(133, );
                position: absolute;
                left: 0.28rem;
                top: 0;
                display: none;
            }

            .num {
                color: #FE447F;
                font-size: px2rem(24, );
                position: absolute;
                z-index: 2;
                right: px2rem(68, );
                bottom: px2rem(246, );
                font-weight: bold;
            }

            textarea {
                width: px2rem(507, );
                height: px2rem(72, );
                position: absolute;
                left: px2rem(68, );
                top: px2rem(215, );
                background: none;
                outline: none;
                border: none;
                resize: none;
                overflow: auto;
                color: #482F2F;
                font-weight: bold;
                font-size: px2rem(24, );

                &::-webkit-input-placeholder {
                    color: #FE447F;
                    font-size: px2rem(22, );
                    font-weight: normal;
                }
            }

            .text {
                width: px2rem(487, );
                height: px2rem(44, );
                line-height: px2rem(44, );
                border-radius: px2rem(44, );
                text-align: center;
                color: #FE447F;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(345, );
                border: px2rem(1, ) solid #FE447F;
            }

            .gbdmBut {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(441, );
                width: px2rem(280, );
                height: px2rem(72, );
            }

            .tx_l {
                width: px2rem(98, );
                height: px2rem(98, );
                border-radius: px2rem(98, );
                top: px2rem(41, );
                left: px2rem(119, );
                position: absolute;
            }

            .tx_r {
                width: px2rem(98, );
                height: px2rem(98, );
                border-radius: px2rem(98, );
                top: px2rem(40, );
                right: px2rem(130.5, );
                position: absolute;
            }

            .nice_l {
                width: 2.5rem;
                font-size: 0.3466666667rem;
                color: #FE447F;
                left: 1.2rem;
                top: 2.13rem;
                position: absolute;
                text-align: center;
            }

            .nice_r {
                width: 2.5rem;
                font-size: 0.3466666667rem;
                color: #FE447F;
                right: 1.2rem;
                top: 2.13rem;
                position: absolute;
                text-align: center;
            }

            .new {
                width: px2rem(112, );
                height: px2rem(34, );
                position: absolute;
                left: px2rem(510, );
                top: px2rem(460, );
            }
        }

        .office {
            width: px2rem(642, );
            height: px2rem(140, );
            position: absolute;
            top: px2rem(1146, );
            left: 50%;
            transform: translateX(-50%);
            background: url(../images/office.png) no-repeat;
            background-size: 100% 100%;

            .reduce {
                width: px2rem(48, );
                height: px2rem(36, );
                position: absolute;
                left: px2rem(253, );
                top: px2rem(51, );
            }

            input {
                background: none;
                outline: none;
                border: none;
                width: px2rem(60, );
                height: px2rem(36, );
                text-align: center;
                color: #482F2F;
                font-weight: bold;
                font-size: px2rem(22, );
                position: absolute;
                left: px2rem(313, );
                top: px2rem(51, );
                box-sizing: border-box;
                padding: 0 px2rem(10, );
            }

            .add {
                width: px2rem(48, );
                height: px2rem(36, );
                position: absolute;
                left: px2rem(385, );
                top: px2rem(51, );
            }

            .but {
                width: px2rem(110, );
                height: px2rem(44, );
                position: absolute;
                right: px2rem(31, );
                top: px2rem(50, );
            }

            .p1 {
                color: #fff;
                font-size: px2rem(20, );
                position: absolute;
                left: 53%;
                transform: translateX(-50%);
                top: px2rem(103, );
            }

            .p2 {
                color: #fff;
                font-size: px2rem(22, );
                position: absolute;
                right: px2rem(25, );
                top: px2rem(14, );
                height: px2rem(30, );
                line-height: px2rem(30, );

                b {
                    font-weight: bold;
                    color: #FEF15B;
                    font-size: px2rem(24, );
                }
            }
        }

    }

    .rule_roce {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 99;
        display: none;

        .rule_roce_in {
            width: px2rem(600, );
            height: px2rem(704, );
            background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: px2rem(40, );
            overflow: hidden;

            .tab {
                width: px2rem(500, );
                height: px2rem(72, );
                border-radius: px2rem(72, );
                margin: px2rem(40, ) auto px2rem(24, );
                display: flex;
                justify-content: space-between;
                background: #FFDBE0;

                div {
                    width: px2rem(250, );
                    height: 100%;
                    line-height: px2rem(72, );
                    text-align: center;
                    color: #BB4A56;
                    font-size: px2rem(30, );
                    font-weight: bold;
                }

                .active {
                    background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
                    color: #fff;
                    border-radius: px2rem(72, );
                }
            }

            .tab1 {
                margin: 0 auto 0;
                width: px2rem(540, );
                height: px2rem(528, );
                border-radius: px2rem(10, );
                background: #fff;

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

            .tab2 {
                margin: 0 auto 0;
                width: px2rem(540, );
                height: px2rem(528, );
                border-radius: px2rem(10, );
                background: #fff;
                box-sizing: border-box;
                padding: px2rem(15, ) px2rem(17, );
                display: none;

                p {
                    font-size: px2rem(22, );
                    color: #3D001F;
                    margin-bottom: px2rem(25, );
                    line-height: 0.5rem;
                    font-weight: bold;
                }
            }
        }
    }

    .recipient {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 99;
        display: none;

        .recipient_in {
            width: 100%;
            height: px2rem(1000, );
            background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
            position: absolute;
            left: 0;
            bottom: 0;
            border-radius: px2rem(40, ) px2rem(40, ) 0px 0px;
            overflow: hidden;
            padding: px2rem(0, ) px2rem(33, );
            box-sizing: border-box;

            .recipient_text {
                display: block;
                width: px2rem(445, );
                height: px2rem(54, );
                margin: px2rem(32, ) auto px2rem(25, );
            }

            ul {
                width: 100%;
                // background: skyblue;
                height: 11.1rem;
                overflow-y: scroll;

                li {
                    width: 100%;
                    height: px2rem(151, );
                    margin-bottom: px2rem(31, );

                    .num {
                        width: px2rem(48, );
                        height: 100%;
                        line-height: px2rem(151, );
                        color: #482F2F;
                        font-size: px2rem(36, );
                        margin-right: px2rem(33, );
                        float: left;
                    }

                    .left {
                        float: left;
                        width: px2rem(121, );
                        height: px2rem(121, );
                        background: url(../images/recipientBg.png) no-repeat;
                        background-size: 100% 100%;
                        position: relative;
                        margin-right: px2rem(6, );
                        text-align: center;

                        .tx {
                            width: px2rem(98, );
                            height: px2rem(98, );
                            border-radius: 50%;
                            position: absolute;
                            left: px2rem(11, );
                            top: px2rem(11, );
                        }

                        .nickLeft {
                            position: absolute;
                            bottom: -0.4rem;
                            left: 0;
                            width: 100%;
                            text-align: center;
                            color: #FE447F;
                            font-size: px2rem(24, );
                            font-weight: bold;
                            overflow: hidden; //超出隐藏
                            white-space: nowrap; //不折行
                            text-overflow: ellipsis; //溢出显示省略号
                        }
                    }

                    .love {
                        float: left;
                        width: px2rem(153, );
                        height: px2rem(65, );
                        margin-top: px2rem(29, );
                        margin-right: px2rem(4, );
                        display: block;
                    }

                    .right {
                        float: left;
                        width: px2rem(121, );
                        height: px2rem(121, );
                        background: url(../images/recipientBg.png) no-repeat;
                        background-size: 100% 100%;
                        position: relative;
                        margin-right: px2rem(6, );
                        text-align: center;

                        .tx {
                            width: px2rem(98, );
                            height: px2rem(98, );
                            border-radius: 50%;
                            position: absolute;
                            left: px2rem(11, );
                            top: px2rem(11, );
                        }

                        .nickLeft {
                            position: absolute;
                            bottom: -0.4rem;
                            left: 0;
                            width: 100%;
                            text-align: center;
                            color: #FE447F;
                            font-size: px2rem(24, );
                            font-weight: bold;
                            overflow: hidden; //超出隐藏
                            white-space: nowrap; //不折行
                            text-overflow: ellipsis; //溢出显示省略号
                        }
                    }

                    .but {
                        float: right;
                        width: px2rem(160, );
                        height: px2rem(60, );
                        display: block;
                        margin-top: px2rem(39, );
                    }
                }
            }
        }
    }

    .letter {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 99;
        display: none;

        .letter_in {
            width: px2rem(600, );
            height: px2rem(704, );
            background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: px2rem(40, );
            overflow: hidden;

            .tab {
                width: px2rem(500, );
                height: px2rem(72, );
                border-radius: px2rem(72, );
                margin: px2rem(40, ) auto px2rem(32, );
                display: flex;
                justify-content: space-between;
                background: #FFDBE0;

                div {
                    width: px2rem(250, );
                    height: 100%;
                    line-height: px2rem(72, );
                    text-align: center;
                    color: #BB4A56;
                    font-size: px2rem(30, );
                }

                .active {
                    background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
                    color: #fff;
                    border-radius: px2rem(72, );
                }
            }

            ul {
                width: 100%;
                padding: 0 px2rem(30, );
                box-sizing: border-box;
                margin: 0 auto 0;
                height: 7rem;
                overflow-y: scroll;

                li {
                    width: 100%;
                    height: px2rem(148, );
                    background: linear-gradient(90deg, #FF8894 0%, #FFA2A4 99%);
                    border-radius: px2rem(10, );
                    position: relative;
                    margin-bottom: px2rem(16, );

                    p {
                        width: 100%;
                        position: absolute;
                        left: px2rem(17, );
                        top: px2rem(17, );
                        color: #fff;
                        font-size: px2rem(22, );
                    }

                    .tx_l {
                        width: px2rem(72, );
                        height: px2rem(72, );
                        border: px2rem(1, ) solid #fff;
                        background: #98535B;
                        border-radius: 50%;
                        position: absolute;
                        left: px2rem(33, );
                        top: px2rem(56, );
                        z-index: 2;
                        box-sizing: border-box;
                    }

                    .love2 {
                        position: absolute;
                        width: px2rem(97, );
                        height: px2rem(42, );
                        top: px2rem(72, );
                        left: px2rem(91, );
                    }

                    .tx_r {
                        width: px2rem(72, );
                        height: px2rem(72, );
                        border: px2rem(1, ) solid #fff;
                        background: #98535B;
                        border-radius: 50%;
                        position: absolute;
                        left: px2rem(171, );
                        top: px2rem(56, );
                        z-index: 2;
                        box-sizing: border-box;
                    }

                    .letters {
                        width: px2rem(91, );
                        height: px2rem(76, );
                        position: absolute;
                        left: px2rem(275, );
                        top: px2rem(52, );
                    }

                    .but {
                        width: px2rem(111, );
                        height: px2rem(44, );
                        position: absolute;
                        top: px2rem(71, );
                        right: px2rem(31, );
                    }
                }
            }
        }
    }

    .capture {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 99;
        display: none;

        .letter_in1Img {
            width: px2rem(644, );
            height: px2rem(638, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 35%;
            border-radius: px2rem(20, );
            // display: none;
        }

        .letter_in1 {
            width: px2rem(644, );
            height: px2rem(638, );
            // background: url(../images/letter_in1.png) no-repeat;background-size: 100% 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 35%;
            border-radius: px2rem(20, );

            // background: #FFFAE6;
            .letter_in111111 {
                width: px2rem(644, );
                height: px2rem(638, );
                position: absolute;
                left: 0;
                top: 0;
                border-radius: px2rem(20, );

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

            .letter_in222 {
                width: px2rem(54, );
                height: px2rem(54, );
                position: absolute;
                left: px2rem(97, );
                top: 1.5rem;
                border-radius: px2rem(20, );
                overflow: hidden;
                border-radius: 50%;
                border: px2rem(1, ) solid #FF7489;

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

            .letter_in333 {
                width: px2rem(54, );
                height: px2rem(54, );
                position: absolute;
                right: 2.4rem;
                top: px2rem(385, );
                border-radius: px2rem(20, );
                overflow: hidden;
                border-radius: 50%;
                border: px2rem(1, ) solid #FF7489;

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

            .line {
                width: 95%;
                height: 95%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border: px2rem(2, ) solid #FFB9C4;
                border-radius: px2rem(30, );
                background: #FFFAE6;
                display: none;
            }

            .title {
                width: 100%;
                text-align: center;
                left: 0;
                top: px2rem(58, );
                color: #990D39;
                font-weight: bold;
                font-size: px2rem(33, );
                position: absolute;
            }

            .to {
                height: px2rem(55, );
                line-height: px2rem(55, );
                position: absolute;
                left: px2rem(52, );
                top: px2rem(108, );
                color: #FE447F;
                font-size: px2rem(24, );

                .toImg {
                    display: inline-block;
                    width: px2rem(55, );
                    height: px2rem(55, );
                    margin: 0 px2rem(4, );
                    border-radius: 50%;
                    border: px2rem(1, ) solid #FF7489;
                    z-index: 5;

                    // img {
                    //     width: 100%;
                    //     height: 100%;
                    //     display: block;
                    //     border-radius: 50%;
                    // }
                }

                // .nick {
                //     margin-left: px2rem(71, );
                // }
            }

            p {
                width: px2rem(390, );
                text-align: center;
                color: #3D001F;
                font-size: px2rem(24, );
                top: px2rem(244, );
                left: 50%;
                transform: translateX(-50%);
                position: absolute;
                line-height: 0.5rem;
                z-index: 2;
            }

            .bg {
                width: px2rem(520, );
                height: px2rem(148, );
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(206, );
                background: #FFE8E8;
                border-radius: px2rem(20, );
                z-index: 2;
            }

            .form {
                height: px2rem(55, );
                line-height: px2rem(55, );
                position: absolute;
                right: px2rem(53, );
                bottom: px2rem(199, );
                color: #FE447F;
                font-size: px2rem(24, );

                .toImg {
                    display: inline-block;
                    width: px2rem(55, );
                    height: px2rem(55, );
                    margin: 0 px2rem(4, );
                    border-radius: 50%;
                    border: px2rem(1, ) solid #FF7489;
                    z-index: 5;

                    img {
                        width: 100%;
                        height: 100%;
                        display: block;
                        border-radius: 50%;
                    }
                }

                // .nick {
                //     margin-left: px2rem(71, );
                // }
            }

            i {
                font-style: normal;
                color: #723E52;
                font-size: px2rem(22, );
                position: absolute;
                right: px2rem(62, );
                bottom: px2rem(168, );
            }
        }

        .letter_in2 {
            width: px2rem(644, );
            height: px2rem(338, );
            // background: url(../images/letter_in2.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 49.9%;
            transform: translateX(-50%);
            top: 53%;
            z-index: 2;

            .close {
                width: px2rem(220, );
                height: px2rem(65, );
                line-height: px2rem(65, );
                border-radius: px2rem(65, );
                text-align: center;
                color: #482F2F;
                font-weight: bold;
                font-size: px2rem(28, );
                position: absolute;
                left: px2rem(77, );
                bottom: px2rem(25, );
                background: #FFFFFF;
            }

            .ok {
                width: px2rem(220, );
                height: px2rem(72, );
                line-height: px2rem(72, );
                border-radius: px2rem(72, );
                text-align: center;
                color: #482F2F;
                font-weight: bold;
                font-size: px2rem(28, );
                position: absolute;
                right: px2rem(77, );
                bottom: px2rem(22, );
            }
        }
    }

    .dynamic {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 99;
        display: none;

        .dynamic_in {
            width: px2rem(600, );
            height: px2rem(421, );
            background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: px2rem(40, );
            overflow: hidden;

            .title {
                width: px2rem(208, );
                height: px2rem(78, );
                margin: px2rem(33, ) auto px2rem(65, );
                display: block;
            }

            p {
                color: #3D001F;
                font-size: px2rem(26, );
                width: 100%;
                text-align: center;
                font-weight: bold;
            }

            .close {
                position: absolute;
                width: px2rem(220, );
                height: px2rem(72, );
                line-height: px2rem(72, );
                border-radius: px2rem(72, );
                text-align: center;
                color: #482F2F;
                font-weight: bold;
                font-size: px2rem(28, );
                background: #fff;
                left: px2rem(60, );
                bottom: px2rem(33, );
            }

            .ok {
                position: absolute;
                width: px2rem(220, );
                height: px2rem(72, );
                line-height: px2rem(72, );
                border-radius: px2rem(72, );
                text-align: center;
                color: #482F2F;
                font-weight: bold;
                font-size: px2rem(28, );
                background: #fff;
                right: px2rem(60, );
                bottom: px2rem(33, );
            }
        }
    }
}

.desire_pub {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .8);

    .desire_pub_in {
        width: px2rem(600, );
        height: px2rem(705, );
        background: url(../images/desire_pub.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .desire_pub_in_tab {
            width: px2rem(500, );
            height: px2rem(72, );
            line-height: px2rem(72, );
            border-radius: px2rem(72, );
            background: #fff;
            font-size: px2rem(30, );
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(40, );

            div {
                width: px2rem(250, );
                text-align: center;
                color: #FE7AA3;
                font-weight: bold;
            }

            .active {
                background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
                border-radius: px2rem(72, );
                color: #fff;
            }
        }

        ul {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(144, );
            width: px2rem(540, );
            height: px2rem(528, );
            overflow-y: scroll;
            box-sizing: border-box;
            padding: px2rem(16, );

            li {
                width: 100%;
                height: px2rem(88, );
                margin-bottom: px2rem(18, );

                img {
                    display: inline-block;
                    width: px2rem(88, );
                    height: px2rem(88, );
                    background: #FFADB7;
                    float: left;
                    margin-right: px2rem(14, );
                    border-radius: 50%;
                }

                div {
                    float: left;

                    p {
                        margin: px2rem(19, ) 0 px2rem(11, );
                        color: #482f2f;
                        font-size: px2rem(24, );
                    }

                    b {
                        color: #fe447f;
                        font-size: px2rem(20, );
                    }
                }
            }
        }

        .rule {
            display: none;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(144, );
            width: px2rem(540, );
            height: px2rem(528, );
            box-sizing: border-box;
            padding: px2rem(16, );

            p {
                color: #482f2f;
                font-size: px2rem(24, );
                margin-bottom: px2rem(25, );
                line-height: px2rem(40, );
            }
        }
    }
}

.redTree_pub {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .8);

    .desire_pub_in {
        width: px2rem(600, );
        height: px2rem(705, );
        background: url(../images/desire_pub.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        .desire_pub_in_tab {
            width: px2rem(500, );
            height: px2rem(72, );
            line-height: px2rem(72, );
            border-radius: px2rem(72, );
            background: #fff;
            font-size: px2rem(30, );
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(40, );

            div {
                width: px2rem(250, );
                text-align: center;
                color: #FE7AA3;
                font-weight: bold;
            }

            .active {
                background: linear-gradient(0deg, #FF7489 0%, #FFC1AF 100%);
                border-radius: px2rem(72, );
                color: #fff;
            }
        }

        ul {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(144, );
            width: px2rem(540, );
            height: px2rem(528, );
            overflow-y: scroll;
            box-sizing: border-box;
            padding: px2rem(16, );
            overflow-x: hidden;

            li {
                width: px2rem(500, );
                margin: 0 auto;
                height: 0.8rem;
                line-height: 0.8rem;
                display: flex;
                justify-content: space-between;

                span {
                    flex: 1;
                    font-weight: bold;
                    color: #3D001F;
                    text-align: center;
                    font-size: px2rem(24, );
                }
            }

            .li {
                margin-bottom: px2rem(24, );

                span {
                    width: px2rem(125, );
                    height: px2rem(50, );

                    i {
                        width: 100%;
                        height: 0.25rem;
                        text-align: center;
                        color: #3D001F;
                        font-size: px2rem(22, );
                        margin-bottom: px2rem(11, );
                        font-style: normal;
                        display: block;
                    }

                    b {
                        width: 100%;
                        text-align: center;
                        font-size: px2rem(20, );
                        color: #C3646E;
                    }
                }
            }
        }

        .rule {
            display: none;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(144, );
            width: px2rem(540, );
            height: px2rem(528, );
            box-sizing: border-box;
            padding: px2rem(16, );

            p {
                color: #3D001F;
                font-size: px2rem(22, );
                margin-bottom: px2rem(25, );
                font-weight: bold;
                line-height: px2rem(40, );
            }
        }
    }
}

.desire_see {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .8);

    .desire_see_in {
        width: px2rem(600, );
        height: px2rem(630, );
        background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: px2rem(40, );

        .title {
            width: px2rem(253, );
            height: px2rem(78, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(29, );
        }

        .gift {
            width: px2rem(540, );
            height: px2rem(321, );
            background: #fff;
            border-radius: px2rem(10, );
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(134, );
        }

        .desire_see_in_but {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(521, );
            width: px2rem(280, );
            height: px2rem(72, );
        }
    }
}

.confirmTheGift {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .8);

    .confirmTheGift_in {
        width: px2rem(600, );
        height: px2rem(421, );
        background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: px2rem(40, );
        box-sizing: border-box;

        .confirmTheGift_in_title {
            width: 100%;
            text-align: center;
            position: absolute;
            left: 0;
            top: px2rem(40, );
            color: #990D39;
            font-size: px2rem(26, );
            font-weight: bold;

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

            i {
                font-style: normal;
                font-weight: bold;
            }
        }

        .gift {
            width: px2rem(160, );
            height: px2rem(160, );
            background: #FFADB7;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(111, );
        }

        .but1 {
            text-align: center;
            color: #482F2F;
            font-size: px2rem(28, );
            font-weight: bold;
            line-height: px2rem(72, );
            width: px2rem(220, );
            height: px2rem(72, );
            border-radius: px2rem(72, );
            position: absolute;
            left: px2rem(60, );
            top: px2rem(316, );
            background: #fff;
        }

        .but2 {
            width: px2rem(220, );
            height: px2rem(72, );
            position: absolute;
            right: px2rem(60, );
            top: px2rem(316, );
            background: url(../images/confirmTheGift_in_but2.png) no-repeat;
            background-size: 100% 100%;
        }
    }
}

.page4 {
    .rankTab {
        width: px2rem(500, );
        height: px2rem(86, );
        background: #FFC2CA;
        border: px2rem(3, ) solid #FFE1EC;
        border-radius: px2rem(42, );
        margin: px2rem(40, ) auto 0;
        display: flex;
        position: relative;
        z-index: 1;

        .rankItem {
            width: 50%;
            height: px2rem(86, );
            color: #D5747E;
            font-size: px2rem(34, );
            text-align: center;
            line-height: px2rem(86, );
            margin-top: -0.02rem;
        }

        .rankItem_act {
            background: url(../images/rank/rank_act.png) no-repeat;
            background-size: 100% 100%;
            color: #FFFFFF;
        }
    }

    .yqListWrap {
        width: px2rem(690, );
        // height: px2rem(2190, );
        height: 39.5rem;
        background: linear-gradient(90deg, #FFE1ED 0%, #FFF6E7 100%);
        border-radius: px2rem(30, );
        margin: -0.6rem auto 2rem;
        position: relative;

        .rankAward {
            width: px2rem(160, );
            height: px2rem(48, );
            background: #FFFFFF;
            border-radius: px2rem(20, );
            font-size: px2rem(26, );
            color: #FE447F;
            text-align: center;
            line-height: px2rem(48, );
            position: absolute;
            top: 0.8rem;
            right: px2rem(30, );
        }

        .tips {
            width: 100%;
            font-size: px2rem(24, );
            color: #482F2F;
            text-align: center;
            position: absolute;
            top: px2rem(132, );
        }

        .dateTab {
            width: px2rem(343, );
            height: px2rem(66, );
            position: absolute;
            top: px2rem(177, );
            left: px2rem(173, );
            display: flex;
            justify-content: space-between;

            .iteml {
                width: px2rem(170, );
                height: px2rem(66, );
                background: url('../images/rank/date.png') no-repeat;
                background-size: 100%;
                line-height: px2rem(66, );
                text-align: center;
                font-size: px2rem(26, );
                color: #CE5F6B;
                font-weight: 500;
                transform: rotate(180deg);

                p {
                    transform: rotate(-180deg);
                }
            }

            .itemr {
                width: px2rem(170, );
                height: px2rem(66, );
                background: url('../images/rank/date.png') no-repeat;
                background-size: 100%;
                line-height: px2rem(66, );
                text-align: center;
                font-size: px2rem(26, );
                color: #CE5F6B;
                font-weight: 500;
            }

            .iteml_act {
                background: url('../images/rank/date_act.png') no-repeat;
                background-size: 100%;
                transform: rotate(0deg);

                p {
                    transform: rotate(0deg);
                }
            }

            .itemr_act {
                background: url('../images/rank/date_act.png') no-repeat;
                background-size: 100%;
                transform: rotate(180deg);

                p {
                    transform: rotate(-180deg);
                }
            }
        }

        .time {
            width: 8.75rem;
            height: px2rem(36, );
            line-height: px2rem(36, );
            text-align: center;
            display: flex;
            position: relative;
            left: 5%;
            top: px2rem(266, );

            overflow-x: scroll;

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

            span {
                min-width: px2rem(72, );
                height: 100%;
                background: #FFD8E5;
                font-size: px2rem(22, );
                color: #3D001F;
                border-radius: px2rem(10, );
                margin-right: px2rem(22, );
                z-index: 2;
            }

            .active {
                background: linear-gradient(0deg, #FF5A7D 1%, #FFC99E 98%);
                color: #fff;
            }

            p {
                position: absolute;
                top: 50%;
                left: 2%;
                transform: translateY(-50%);
                width: 135%;
                height: px2rem(6, );
                background-color: #FFD8E5;
                z-index: 1;
            }
        }

        .yqList {
            width: px2rem(640, );
            height: 34.6rem;
            background: #FFA2AB;
            border-radius: px2rem(12, );
            position: absolute;
            top: px2rem(335, );
            left: 50%;
            transform: translateX(-50%);

            // cp榜样式
            .no1 {
                width: px2rem(535, );
                height: px2rem(378, );
                position: absolute;
                top: px2rem(23, );
                left: 50%;
                transform: translateX(-50%);
                background: url(../images/rank/no1Bg.png) no-repeat;
                background-size: 100%;

                .bg {
                    // width: px2rem(73, );
                    width: 1rem;
                    height: px2rem(59, );
                    background: url(../images/rank/cpLink.png) no-repeat;
                    background-size: 100%;
                    position: absolute;
                    top: px2rem(122, );
                    left: 47%;
                    transform: translateX(-50%);
                }

                .img1 {
                    width: px2rem(120, );
                    height: px2rem(120, );
                    border: px2rem(2, ) solid #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: px2rem(89, );
                    left: 1.2rem;
                }

                .img2 {
                    width: px2rem(120, );
                    height: px2rem(120, );
                    border: px2rem(2, ) solid #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: px2rem(89, );
                    right: 1.63rem;
                }

                .name1,
                .name2 {
                    width: 1.4rem;
                    height: px2rem(34, );
                    font-size: px2rem(24, );
                    color: #fff;
                    text-align: center;
                    line-height: px2rem(34, );
                    white-space: nowrap;
                }

                .name1 {
                    position: absolute;
                    left: 1.3rem;
                    top: 2.9rem;
                }

                .name2 {
                    position: absolute;
                    right: 1.8rem;
                    top: 2.9rem;
                }

                b {
                    font-size: px2rem(26, );
                    color: #FEFFA3;
                    position: absolute;
                    bottom: px2rem(78, );
                    left: 48%;
                    transform: translateX(-50%);
                }

            }

            .no2 {
                width: 3.5rem;
                height: px2rem(318, );
                position: absolute;
                top: 5.5rem;
                left: 2.2rem;
                transform: translateX(-50%);

                .bg {
                    width: px2rem(107, );
                    height: px2rem(136, );
                    background: url(../images/rank/no2.png) no-repeat;
                    background-size: 100%;
                    position: absolute;
                    top: 0.3rem;
                    left: 50.5%;
                    transform: translateX(-50%);
                }

                .img1 {
                    width: px2rem(101, );
                    height: px2rem(101, );
                    border: px2rem(2, ) solid #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: 1.1rem;
                    left: 0;
                }

                .img2 {
                    width: px2rem(101, );
                    height: px2rem(101, );
                    border: px2rem(2, ) solid #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: 1.1rem;
                    right: 0;
                }

                .name1,
                .name2 {
                    width: 1.4rem;
                    height: px2rem(34, );
                    font-size: px2rem(24, );
                    color: #fff;
                    text-align: center;
                    line-height: px2rem(34, );
                    white-space: nowrap;
                }

                .name1 {
                    position: absolute;
                    left: 0rem;
                    top: 2.6rem;
                }

                .name2 {
                    position: absolute;
                    right: 0rem;
                    top: 2.6rem;
                }

                b {
                    font-size: px2rem(26, );
                    color: #FEFFA3;
                    white-space: nowrap;
                    position: absolute;
                    bottom: 0.7rem;
                    left: 48%;
                    transform: translateX(-50%);
                }
            }

            .no3 {
                width: 3.5rem;
                height: px2rem(318, );
                position: absolute;
                top: 5.55rem;
                right: 0.4rem;

                .bg {
                    width: px2rem(107, );
                    height: px2rem(136, );
                    background: url(../images/rank/no3.png) no-repeat;
                    background-size: 100%;
                    position: absolute;
                    top: 0.3rem;
                    left: 52%;
                    transform: translateX(-50%);
                }

                .img1 {
                    width: px2rem(101, );
                    height: px2rem(101, );
                    border: px2rem(2, ) solid #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: 1.1rem;
                    left: 0;
                }

                .img2 {
                    width: px2rem(101, );
                    height: px2rem(101, );
                    border: px2rem(2, ) solid #fff;
                    border-radius: 50%;
                    position: absolute;
                    top: 1.1rem;
                    right: 0;
                }

                .name1,
                .name2 {
                    width: 1.4rem;
                    height: px2rem(34, );
                    font-size: px2rem(24, );
                    color: #fff;
                    text-align: center;
                    line-height: px2rem(34, );
                    white-space: nowrap;
                }

                .name1 {
                    position: absolute;
                    left: 0rem;
                    top: 2.6rem;
                }

                .name2 {
                    position: absolute;
                    right: 0rem;
                    top: 2.6rem;
                }

                b {
                    font-size: px2rem(26, );
                    color: #FEFFA3;
                    white-space: nowrap;
                    position: absolute;
                    bottom: 0.7rem;
                    left: 48%;
                    transform: translateX(-50%);
                }
            }

            ul {
                width: 100%;
                height: 25.55rem;
                position: absolute;
                bottom: 0;
                overflow-y: hidden;

                li {
                    width: px2rem(589, );
                    height: px2rem(158, );
                    margin: 0 auto;
                    position: relative;
                    border-bottom: 1px solid rgba(247, 189, 189, 0.5);

                    &:nth-child(7) {
                        border-bottom: 0;
                    }

                    .num {
                        width: px2rem(80, );
                        font-size: px2rem(26, );
                        font-weight: 500;
                        color: #FFFFFF;
                        text-align: center;
                        position: absolute;
                        top: px2rem(70, );
                        left: 0;
                    }

                    .img1 {
                        width: px2rem(90, );
                        height: px2rem(90, );
                        border-radius: 50%;
                        box-sizing: border-box;
                        border: 1px solid #fff;
                        position: absolute;
                        left: px2rem(125, );
                        top: px2rem(20, );
                        z-index: 1;
                    }

                    .img2 {
                        width: px2rem(90, );
                        height: px2rem(90, );
                        border-radius: 50%;
                        box-sizing: border-box;
                        border: 1px solid #fff;
                        position: absolute;
                        left: px2rem(209, );
                        top: px2rem(20, );
                        z-index: 2;
                    }

                    p {
                        width: 3rem;
                        font-size: px2rem(22, );
                        color: #fff;
                        text-align: center;
                        white-space: nowrap;
                        position: absolute;
                        left: 1.25rem;
                        top: px2rem(124, );
                    }

                    b {
                        position: absolute;
                        right: 0.1rem;
                        top: 50%;
                        transform: translateY(-50%);
                        color: #FEFFA3;
                        font-size: px2rem(26, );
                    }

                }
            }
        }
    }

    .myGulp {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: px2rem(188, );
        background: linear-gradient(0deg, #FF97CA 0%, #FFF4E8 99%);
        border-radius: px2rem(16, ) px2rem(16, ) 0px 0px;
        box-sizing: border-box;
        padding: px2rem(42, ) 0;
        z-index: 5;
        transition: all 0.4s;

        .more {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: px2rem(11, );
            width: px2rem(25, );
            height: px2rem(19, );
            transition: all 0.4s;
        }

        .more_act {
            transform: translateX(-50%) rotate(180deg);
        }

        ul {
            width: 100%;
            height: px2rem(125, );
            // height: 1.7rem;
            overflow: hidden;

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

            li {
                width: px2rem(650, );
                height: px2rem(125, );
                margin: 0 auto;
                position: relative;
                border-bottom: 1px solid rgb(255, 255, 255, 0.3);

                .num {
                    width: px2rem(80, );
                    font-size: px2rem(26, );
                    font-weight: 500;
                    color: #3D001F;
                    text-align: center;
                    position: absolute;
                    top: px2rem(48, );
                    left: 0;
                }

                .img1 {
                    width: px2rem(90, );
                    height: px2rem(90, );
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: 1px solid #fff;
                    position: absolute;
                    left: px2rem(125, );
                    top: 0.05rem;
                    z-index: 1;
                }

                .img2 {
                    width: px2rem(90, );
                    height: px2rem(90, );
                    border-radius: 50%;
                    box-sizing: border-box;
                    border: 1px solid #fff;
                    position: absolute;
                    left: px2rem(209, );
                    top: 0.05rem;
                    z-index: 2;
                }

                p {
                    width: 3rem;
                    font-size: px2rem(22, );
                    color: #fff;
                    text-align: center;
                    white-space: nowrap;
                    position: absolute;
                    left: 1.26rem;
                    top: 1.3rem;
                }

                b {
                    position: absolute;
                    right: 0;
                    top: px2rem(40, );
                    color: #CF636E;
                    font-size: px2rem(26, );
                }

            }

            .active {
                text-align: center;
                font-size: px2rem(30, );
                line-height: px2rem(125, );
                color: #ffffff;
            }
        }
    }

    .mlListWrap {
        display: none;
        width: px2rem(690, );
        height: px2rem(2444, );
        background: linear-gradient(90deg, #FFE1ED 0%, #FFF6E7 100%);
        border-radius: px2rem(30, );
        margin: -0.6rem auto 1.8rem;
        position: relative;


        .rankAward {
            width: px2rem(160, );
            height: px2rem(48, );
            background: #FFFFFF;
            border-radius: px2rem(20, );
            font-size: px2rem(26, );
            color: #FE447F;
            text-align: center;
            line-height: px2rem(48, );
            position: absolute;
            top: 0.8rem;
            right: px2rem(30, );
        }

        .tips {
            width: 100%;
            font-size: px2rem(24, );
            color: #482F2F;
            text-align: center;
            position: absolute;
            top: px2rem(132, );
        }

        .mlList {
            width: px2rem(640, );
            height: px2rem(2210, );
            background: #FFA2AB;
            border-radius: px2rem(12, );
            position: absolute;
            top: px2rem(202, );
            left: 50%;
            transform: translateX(-50%);

            .no1 {
                width: px2rem(226, );
                height: px2rem(226, );
                position: absolute;
                top: px2rem(40, );
                left: 50.6%;
                transform: translateX(-50%);
                padding: px2rem(34, ) 0;
                box-sizing: border-box;

                .bg {
                    width: px2rem(372, );
                    height: px2rem(292, );
                    position: absolute;
                    top: 0;
                    left: 50.6%;
                    transform: translateX(-50%);
                }

                .tx {
                    display: block;
                    width: 2.35rem;
                    height: 2.35rem;
                    margin: -0.14rem auto 0.4133333333rem;
                    border-radius: 50%;
                }

                .No {
                    width: px2rem(226, );
                    height: px2rem(226, );
                    position: absolute;
                    top: 0;
                    left: 50.6%;
                    transform: translateX(-50%);
                    box-sizing: border-box;
                }

                p {
                    width: px2rem(215, );
                    height: px2rem(45, );
                    background: linear-gradient(90deg, rgba(253, 183, 205, 0.02) 1%, rgba(255, 111, 135, 0.96) 41%, rgba(253, 184, 205, 0) 100%);
                    font-size: px2rem(24, );
                    color: #fff;
                    line-height: px2rem(45, );
                    text-align: center;
                }

                b {
                    width: 100%;
                    text-align: center;
                    color: #FEFFA3;
                    font-size: px2rem(22, );
                    display: block;
                    padding-top: px2rem(12, );
                }
            }

            .no2,
            .no3 {
                width: px2rem(162, );
                height: px2rem(167, );
                position: absolute;
                top: 1.7rem;
                left: 0.5rem;
                padding: px2rem(16, ) 0;
                box-sizing: border-box;

                .tx {
                    display: block;
                    width: 1.8rem;
                    height: 1.8rem;
                    margin: 0.05rem auto 0.3rem;
                    border-radius: 50%;
                }

                .No {
                    width: px2rem(162, );
                    height: px2rem(167, );
                    position: absolute;
                    top: 0;
                    left: 50.6%;
                    transform: translateX(-50%);
                    box-sizing: border-box;
                }

                p {
                    width: 2.2rem;
                    height: px2rem(45, );
                    background: linear-gradient(90deg, rgba(253, 183, 205, 0.02) 1%, rgba(255, 111, 135, 0.96) 41%, rgba(253, 184, 205, 0) 100%);
                    font-size: px2rem(24, );
                    color: #fff;
                    line-height: px2rem(45, );
                    text-align: center;
                }

                b {
                    width: 100%;
                    text-align: center;
                    color: #FEFFA3;
                    font-size: px2rem(22, );
                    display: block;
                    padding-top: px2rem(12, );
                }
            }

            .no3 {
                left: 6rem;
            }

            .ul {
                width: px2rem(630, );
                height: 24.3rem;
                border-radius: px2rem(12, );
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                overflow: hidden;

                li {
                    width: px2rem(589, );
                    height: px2rem(150, );
                    margin: 0 auto;
                    border-bottom: 1px solid rgba(247, 189, 189, 0.5);

                    .num {
                        width: px2rem(80, );
                        text-align: center;
                        color: #fff;
                        font-size: px2rem(26, );
                        margin-left: px2rem(10, );
                        margin-top: px2rem(70, );
                        margin-right: px2rem(22, );
                        display: block;
                        float: left;
                    }

                    .tx {
                        display: block;
                        float: left;
                        width: px2rem(102, );
                        height: px2rem(102, );
                        margin-top: px2rem(32, );
                        margin-right: px2rem(22, );
                        border: 1px solid #fff;
                        box-sizing: border-box;
                        border-radius: 50%;
                    }

                    .nick {
                        margin-top: px2rem(70, );
                        text-align: center;
                        color: #fff;
                        font-size: px2rem(22, );
                        float: left;
                    }

                    b {
                        float: right;
                        margin-right: px2rem(10, );
                        margin-top: px2rem(70, );
                        text-align: right;
                        color: #FEFFA3;
                        font-size: px2rem(24, );
                    }
                }
            }
        }

    }

    .myList {
        width: 100%;
        height: px2rem(173, );
        position: fixed;
        left: 0;
        bottom: 0;
        background: linear-gradient(0deg, #FF97CA 0%, #FFF5E7 100%);
        border-radius: px2rem(16, ) px2rem(16, ) 0 0;
        z-index: 5;

        .num {
            width: 17%;
            text-align: center;
            height: px2rem(36, );
            margin-left: px2rem(49, );
            margin-right: 0.1rem;
            display: block;
            float: left;
            color: #3D001F;
            font-size: px2rem(30, );
            line-height: px2rem(134, );
        }

        .tx {
            display: block;
            float: left;
            width: px2rem(90, );
            height: px2rem(90, );
            margin-top: px2rem(24, );
            margin-right: 0.3rem;
            border: 1px solid #fff;
            box-sizing: border-box;
            border-radius: 50%;
        }

        .nick {
            height: 100%;
            width: 25%;
            line-height: px2rem(134, );
            // text-align: center;
            color: #fff;
            font-size: px2rem(22, );
            float: left;
        }

        .right {
            width: 25%;
            float: right;
            margin-right: px2rem(52, );
            line-height: px2rem(134, );
            text-align: right;
            color: #CF636E;
            font-size: px2rem(26, );
        }
    }

    // 弹窗
    .listRule1 {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 9999;
        display: none;

        .listRule1_in {
            width: px2rem(600, );
            height: px2rem(995, );
            background: url(../images/rank/rankBg.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: relative;
            overflow: hidden;

            .title {
                position: absolute;
                width: px2rem(230, );
                height: px2rem(78, );
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(16, );
            }

            .box {
                width: px2rem(505, );
                overflow-y: scroll;
                box-sizing: border-box;
                margin: px2rem(142, ) auto 0;
                height: 10.6rem;

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

                img {
                    width: 100%;
                    height: px2rem(2020, );
                }
            }

        }
    }

    .listRule2 {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .8);
        z-index: 9999;
        display: none;

        .listRule2_in {
            width: px2rem(600, );
            height: px2rem(995, );
            background: url(../images/rank/rankBg.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: relative;
            overflow: hidden;

            .title {
                position: absolute;
                width: px2rem(230, );
                height: px2rem(78, );
                left: 50%;
                transform: translateX(-50%);
                top: px2rem(16, );
            }

            .box {
                width: px2rem(505, );
                overflow-y: scroll;
                box-sizing: border-box;
                margin: 2rem auto 0;
                height: 10.5rem;

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

                img {
                    width: 100%;
                    height: px2rem(999, );
                }
            }

        }
    }
}

.jieshu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;

    .jieshu_in {
        width: px2rem(634, );
        height: px2rem(365, );
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url(../images/rank/jieshu.png) no-repeat;
        background-size: 100% 100%;

        span {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0.68rem;
            width: 5.4rem;
            height: 1.3rem;
        }
    }
}