.app {
    position: relative;
    width: 100%;
    padding-bottom: 5vw;
    background: #F7CF4E;
}
    .cover {
        z-index: 99;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        background: rgba(16,16,16,.7);
        display: none;
    }
    .noTimeToast {
        z-index: 101;
        position: fixed;
        left: 7.5%;
        top: 36vw;
        width: 85%;
        height: 50%;
        /* animation: zoomIn .5s ease-in-out; */
        display: none;
    }
        .noTimeBg {
            width: 100%;
        }
        .close {
            position: inherit;
            right: 7.5%;
            top: 24vw;
            width: 8%;
            /* display: none; */
        }
        .noTimeFont1 {
            position: inherit;
            top: 74vw;
            width: 85%;
            text-align: center;
            font-size: 6.5vw;
            line-height: 10vw;
            /* font-weight: bold; */
            color: #ED1000;
        }
        .noTimeFont2 {
            position: inherit;
            top: 97vw;
            width: 85%;
            color: #535353;
            font-size: 4vw;
            line-height: 7vw;
            text-align: center;
        }
        .noTimeBtn {
            position: inherit;
            width: 55%;
            left: 22.5%;
            top: 116vw;
        }
            .noTimeBtn img {
                width: 100%;
            }
            .noTimeBtnFont {
                position: inherit;
                width: 55%;
                top: 120vw;
                font-size: 5vw;
                text-align: center;
                color: #401500;
            }

    .reward {
        z-index: 101;
        position: fixed;
        left: 10%;
        top: 36vw;
        width: 80%;
        height: 50%;
        /* animation: zoomIn .5s ease-in-out; */
        display: none;
    }
        .rewardBg {
            width: 100%;
        }
        .rewardClose {
            position: inherit;
            right: 11%;
            top: 25vw;
            width: 8%;
        }
        .rewardFont1 {
            position: inherit;
            width: 83%;
            top: 49vw;
            color: #461D00;
            text-align: center;
            line-height: 7vw;
        }
            .rewardFont1 span {
                color: #ED1800;
                font-size: 5.2vw;
            }
        .rewardFont2 {
            position: inherit;
            top: 78vw;
            width: 80%;
            color: white;
            font-size: 5vw;
            text-align: center;
        }
            .rewardFont2 span {
                color: #FCFF00;
            }
        .rewardFont3 {
            position: inherit;
            top: 95vw;
            width: 50%;
            height: 8vw;
            background: #BE0D18;
            color: white;
            margin-left: 15%;
            text-align: center;
            line-height: 8vw;
            border-radius: 90px;
            font-size: 4vw;
        }
        .rewordBtn {
            position: inherit;
            width: 41%;
            top: 111vw;
            font-size: 5vw;
            text-align: center;
            color: #401500;
            margin-left: 19.5%;
        }
            .rewordBtn img {
                width: 100%;
            }
            .rewardBtnFont {
                position: inherit;
                width: 41%;
                top: 113.5vw;
                font-size: 4.5vw;
                text-align: center;
                color: #401500;
            }

    .Divide {
        z-index: 101;
        position: fixed;
        left: 5%;
        top: 20vw;
        width: 90%;
        height: 50%; 
        display: none;
    }
        .divdeListIocn {
            position: absolute;
            top: 0vw;
            right: 0vw;
            width: 35%;
        }
        .DivideBg {
            width: 100%;
        }
        .DivideClose {
            position: inherit;
            right: 4%;
            top: 11vw;
            width: 8%;
        }
        .DivideFont1 {
            position: inherit;
            width: 90%;
            top: 45vw;
            color:black;
            text-align: center;
            font-size: 4.5vw;
            font-weight: bold;
        }
        .DivideFont2 {
            position: inherit;
            width: 90%;
            top: 54vw;
            color:#F01505;
            text-align: center;
            font-size: 13vw;
            font-weight: bold;
        }
        .DivideStudent {
            position: inherit;
            width: 70%;
            margin-left: 10%;
            top: 80vw;
            height: 56vw;
            border-top: 1px solid #F2F2F2;
            border-bottom: 1px solid #F2F2F2;
        }
            .DivideStudentTitle {
                position: inherit;
                top: 87vw;
                left: 20%;
                width: 62%;
            }
            .DivideStudentCon {
                position: inherit;
                top: 100vw;
                height: 35vw;
                width: 70%;
            }
                .DivideList {
                    position: relative;
                    float: left;
                    width: 28%;
                    height: 100%;
                }
                .DivideListMiddle {
                    margin: auto 8%;
                }
                    .DivideListPic {
                        width: 70%;
                        margin-left: 15%;
                        border-radius: 90px;
                    }
                    .nickName {
                        margin-top: 2vw;
                        font-size: 3.2vw;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    .DivideMoney {
                        margin-top: 2vw;
                        font-size: 4.5vw;
                        color: #EF1700;
                        text-align: center;
                        font-weight: bold;
                    }
            .DivideBtn {
                position: inherit;
                width: 45%;
                top: 145vw;
                font-size: 5vw;
                text-align: center;
                color: #401500;
                margin-left: 23.5%;
            }
                .DivideBtn img {
                    width: 100%;
                }
            .DivideBtnFont {
                position: inherit;
                width: 45%;
                top: 147.5vw;
                font-size: 5vw;
                text-align: center;
                color: #401500;
            }       

    .go_rules {
        z-index: 88;
        position: absolute;
        right: 0;
        top: 4.5vw;
        display: inline-block;
        width: 22vw;
        height: 8vw;
        background: #FE380B;
        color: white;
        text-align: center;
        line-height: 8vw;
        font-size: 3.6vw;
        border-radius: 90px 0 0 90px;
    }
    .top_banner {
        position: relative;
        width: 100%;
    }
    .bannerGif {
        z-index: 66;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
        .bannerGif img {
            width: 100%;
        }
        .top_banner img {
            width: 100%;
        }

    .main_show {
        position: relative;
        width: 90%;
        margin: auto;
        background: #FEFEFE;
        border-radius: 15px;
        padding-bottom: 8vw;
    }
        .total_price {
            position: relative;
            width: 100%;
        }
            .bonus {
                position: absolute;
                width: 80%;
                height: 14vw;
                top: 35vw;
                margin-left: 10%;
            }
                .bonus_left,.bonus_right {
                    float: left;
                }
                .bonus_left {
                    width: 85%;
                    height: 100%;
                    text-align: center;
                }
                .bonus_left span{ 
                    display: inline-block; 
                    font-size: 10vw; 
                    vertical-align: text-bottom;
                    margin-top: 1.6vw;
                }
                    .bonus_left span.numbs{
                        width: calc(100%/9);
                    }
                    .bonus_left span.numbs:after{
                        transition-duration: 300ms; 
                        display: block;
                        content: '';
                        background-image: url('../images/YellowNumbs.png');
                        /* background-position:center 150.24%;  */
                        background-repeat:repeat-y; 
                        background-size: auto 1021%;
                        width: 100%;
                        height: .9em; 
                        background-position: center top;
                    }
                    .bonus_left span.numbs-0:after{background-position: center -333;}
                    .bonus_left span.numbs-1:after{background-position: center -322%;}
                    .bonus_left span.numbs-2:after{background-position: center -311%;}
                    .bonus_left span.numbs-3:after{background-position: center -299%;}
                    .bonus_left span.numbs-4:after{background-position: center -288%;}
                    .bonus_left span.numbs-5:after{background-position: center -277%;}
                    .bonus_left span.numbs-6:after{background-position: center -266%;}
                    .bonus_left span.numbs-7:after{background-position: center -255%;}
                    .bonus_left span.numbs-8:after{background-position: center -244%;}
                    .bonus_left span.numbs-9:after{background-position: center -232.6%;}
                .bonus_right {
                    width: 15%;
                    height: 100%;
                    line-height: 20vw;
                    color: #F8DE25;
                    font-size: 4.6vw;
                    text-align: center;
                    font-weight: bold;
                }
            .total_price_title {
                position: absolute;
                top: 8vw;
                color: white;
                font-size: 5vw;
                width: 100%;
                text-align: center;
                line-height: 8vw;
            }
            .total_price_line {
                position: absolute;
                top: 26vw;
                height: 1px;
                width: 80%;
                margin-left: 10%;
                background: #FDE024;
            }
            .total_price_info {
                position: absolute;
                top: 29vw;
                width: 100%;
                text-align: center;
                color: #F3E41D;
                font-weight: bold;
                font-size: 3.8vw;
            }
            .total_price_bottom {
                position: absolute;
                top: 50vw;
                width: 100%;
                text-align: center;
                font-size: 4vw;
                color: white;
            }
            .total_price_line_left {
                position: absolute;
                top: 52.5vw;
                width: 5vw;
                height: 1px;
                left: 10vw;
                background: white;
            }
            .total_price_line_right {
                position: absolute;
                top: 52.5vw;
                width: 5vw;
                height: 1px;
                right: 10vw;
                background: white;
            }
            .total_price img {
                width: 90%;
                margin-left: 5%;
                margin-top: 5vw;
            }
        .rightNowBtn {
            width: 100%;
        }
            .rightNowBtn img {
                width: 90%;
                margin-left: 5%;
                animation: zoomIn 1.5s ease-in-out infinite;
            }
        .inviteDatas {
            width: 90%;
            height: 20vw;
            border-top: 1px dashed #F3CE69;
            border-bottom: 1px dashed #F3CE69;
            margin: 5vw auto;
        }
            .dataCell {
                float: left;
                width: calc( 100% / 3);
                height: 100%;
                text-align: center;
            }
                .dataCell div {
                    font-size: 5vw;
                    margin: 3vw 0 1vw 0;
                }
                .dataCell span {
                    font-size: 3.2vw;
                    color: #676767;
                    margin-top: -3vw;
                }
        .inviteTitle {
            width: 100%;
        }
            .inviteTitle img {
                width: 90%;
                margin: 3vw 5% 3vw 5%;
            }
        .packetList {
            position: relative;
            width: 90%;
            margin-left: 5%;
            height: 112vw;
        }
        .redPacket {
            position: relative;
            float: left;
            width: calc( 100% / 3);
            height: 58vw;
            text-align: center;
        }
            .red_title {
                font-size: 4.2vw;
                color: #565656;
                margin: 2vw auto;
            }
            .redBg {
                position: relative;
                width: 90%;
            }
            .redBtn {
                margin-top: 3vw;
                width: 90%;
            }

            .redFont1 {
                position: absolute;
                top: 23vw;
                text-align: center;
                width: 100%;
                font-size: 4.5vw;
                color: #FFE613;
            }
            .redMoney {
                position: absolute;
                top: 30vw;
                text-align: center;
                width: 100%;
                font-size: 5.5vw;
                color: #FFE613;
            }

        .inviteSkill {
            width: 90%;
            margin: auto;
        }
            .inviteSkill img {
                width: 90%;
                margin-left: 5%;
                margin-top: 8vw; 
            }
        .inviteSkillCon {
            position: relative;
            width: 90%;
            margin: 5vw auto;
            height: 100vw;
            background: white;
            border-radius: 15px;
        }
            .inviteSkillCon ul {
                list-style: none;
                padding: 0;
                width: 90%;
                margin: auto;
                padding-top: 4vw;
            }
            .inviteSkillCon ul li {
                margin-top: 4vw;
                color: #606060;
                font-size: 4.2vw;
            }

        .invite_skill {
            width: 90%;
            margin-left: 5%;
            margin-top: 4vw;
        }
        .info {
            width: 100%;
            color: white;
            text-align: center;
            font-size: 3.2vw;
        }

        .block {
            width: 100%;
            height: 20vw;
        }
        .footerBtn {
            position: fixed;
            bottom: 0vw;
            width: 100%;
            height: 20vw;
            background: #F7CF4E;
            display: none;
        }
            .footerImg {
                width: 60%;
                margin-left: 20%;
                margin-top: 3vw;
            }

        @-webkit-keyframes zoomIn {
            from {
                transform: scale(.9);
            }
          
            50% {
                transform: scale(1);
            }
            100% {
                transform: scale(.9);
            }
          }