html, body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: url(../images/bg.jpg) no-repeat;
    background-size: 100% 100%;
    background-color: #ffee78;
    overflow: hidden;
    transform: translate(0,0,0);
    -webkit-transform: translate(0,0,0);
}
a {
    text-decoration: none;
}
/*****loading 加载页*****/
.loading {
    bottom: 0;
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #fff;
    text-align: center;
    z-index: 1900000;
}

    .loading .loading-content {
        width: 100%;
        height: 30%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto auto;
        font-size: 2rem;
        color: #fff;
    }

        .loading .loading-content p {
            text-align: center;
            font-size: 12px;
            color: #555;
        }

        .loading .loading-content img {
            display: block;
            width: 30px;
            height: 30px;
            margin: 15px auto;
            -webkit-animation: ani-circle 1s infinite linear; /*匀速 循环*/
        }

.ajax_loading {
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1900000;
}

    .ajax_loading .loading-content {
        width: 100px;
        height: 100px;
        position: fixed;
        top: calc(50vh - 50px);
        left: calc(50vw - 50px);
        background: rgba(0,0,0,0.7);
        border-radius:10px;
    }


        .ajax_loading .loading-content img {
            display: block;
            width: 30px;
            height: 30px;
            margin: 15px auto;
            -webkit-animation: ani-circle 1.5s infinite linear; /*匀速 循环*/
        }
.bottomBg {
    position:fixed;
    bottom:0;
    left:0;
}
    .bottomBg img {
        width: 100%;
        display: block;
    }
.page {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.btn_yhq {
    position: absolute;
    z-index: 1;
    top: 14px;
    right: 13px;
}
    .btn_yhq img {
        width:54px;
    }

.tips_wrap {
    display: none;
    background-color: rgba(0,0,0,0.8);
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 100;
    top: 0;
    left: 0;
    text-align: center;
}

    .tips_wrap .content {
        margin-top: 42%;
        display: inline-block;
        padding: 10px 25px 20px 25px;
        border-radius: 10px;
        background-color: #fff;
    }

        .tips_wrap .content p {
            font-size: 18px;
            margin-bottom:18px;
        }

        .tips_wrap .content a {
            font-size: 18px;
            background-color: #0094ff;
            padding: 5px 25px;
            text-align: center;
            color: #fff;
            border-radius: 10px;
        }

@-webkit-keyframes ani-circle {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes ani-circle {
    0% {
        transform: rotate(0deg);
    }

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

@-moz-keyframes ani-circle {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}
/*****loading 加载页end*****/
.clear {
    clear:both;
    width:1px;
    height:0px;
    margin-top:15px;
}
.main {
    width: 200vw;
    height: 100vh;
    display: flex;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
.bg {
    position:absolute;
    top:0;
    width:100%;
}
.fanpai_wrap {
    width: 26.79rem;
    height: 35.5rem;
    margin: 0 auto;
    background-image: url(../images/fanpai.png);
    background-size: 100%;
    padding: 5rem 2.2rem 1.96rem 2.2rem;
    background-repeat: no-repeat;
    position: relative;
    box-sizing: border-box;
}
    .fanpai_wrap .content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
    }
        .fanpai_wrap .content .item {
            width: 22%;
            height: 22%;
            margin-bottom: 0.2rem;
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
			opacity:1;
        }
        .fanpai_wrap .content .outer {
            position: relative;
            width: 100%;
            height: 100%;
            transform-origin: center center;
            -webkit-transform-origin: center center;
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            transition: all 0.3s linear;
            -webkit-transition: all 0.3s linear;
            transform:perspective(400px) rotateY(0deg) ;
            -webkit-transform:perspective(400px) rotateY(0deg) ;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .fanpai_wrap .content .flip180 {
           /* transform: rotateY(180deg) translateZ(0);
            -webkit-transform: rotateY(180deg) translateZ(0);
            transform-origin: center center;
            -webkit-transform-origin: center center;*/
        }

        .fanpai_wrap .content .hide {
           
			 animation: ani_hide 0.15s forwards;
			 -webkit-animation: ani_hide 0.15s forwards;
        }
        .fanpai_wrap .content .outer > div {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: all 0.15s linear;
            -webkit-transition: all 0.15s linear;
        }
        .fanpai_wrap .content .outer .under {
            transition: all 0.15s linear;
            -webkit-transition: all 0.15s linear;
            transform:perspective(400px) rotateY(-90deg);
            -webkit-transform:perspective(400px) rotateY(-90deg) ;
        }
        .fanpai_wrap .content .outer img {
            width: 100%;
            height: 100%;
        }
        .fanpai_wrap .content .item .flip {
            width: 100%;
            animation: flip720 1.5s forwards;
            -webkit-animation: flip720 1.5s forwards;
        }

        .fanpai_wrap .content .flip180 .fonter {
            transform:perspective(400px) rotateY(90deg) ;
            -webkit-transform:perspective(400px) rotateY(90deg) ;
        }
        .fanpai_wrap .content .flip180 .under {
            z-index:2;
            animation: flip90 0.15s forwards;
            animation-delay:0.15s;
            -webkit-animation: flip90 0.15s forwards;
            -webkit-animation-delay:0.15s;
        }
        /*.fanpai_wrap .content .outer .p2 {
            transform: rotateY(-180deg) translateZ(0);
            -webkit-transform: rotateY(-180deg) translateZ(0);
        }*/
.fonter {
    opacity:1;
}

.guize_wrap {
    position:fixed;
    background:rgba(0,0,0,0.8);
    top:0;
    left:0;
    z-index:98;
    width:100%;
    height:100%;
    overflow:hidden;
    display:none;
}
    .guize_wrap .panel {
        position: relative;
        width: 23rem;
        margin: 0 auto;
        margin-top:calc(50vh - 18rem);
    }
    .guize_wrap .content {
        display: block;
        background: url(../images/bg_neirong.png) no-repeat;
        background-size: 100% auto;
        padding: 0 0.8rem 0.8rem;
        width: 23rem;
        height: 33.7rem;
        overflow: auto;
        box-sizing: border-box;
        color: #000;
        position: relative;
    }

        .guize_wrap .content .num {
            border-radius: 50px;
            padding: 7px;
            background: #FACD94;
            color: #BF1201;
            float: left;
            line-height: 6px;
            font-size: 12px;
        }
        .guize_wrap .content .right {
            width: 90%;
            float: left;
            margin: 0;
            margin-left: 6px;
        }
        .guize_wrap .content>div {
            margin-bottom:1rem;
        }
            .guize_wrap .content > div::after {
                content: '';
                display: block;
                clear: both;
            }
    .guize_wrap .title {
        height: 3.6rem;
        line-height: 3rem;
        font-size: 1.56rem;
        font-weight: normal;
        margin: 0;
        margin-bottom: 1.36rem;
        width: 100%;
        text-align: center;
        color: #ffffff;
    }
        .guize_wrap .title > span {
            background: #ff364a;
            padding:5px 20px;
            color:#fff;
            border-radius:8px;
            font-size:16px;
            font-weight:bold;
        }
    .guize_wrap .btnClose {
        width: 2.29rem;
        height: 2.29rem;
        display:block;
        margin:1.1rem auto;
    }
    .guize_wrap .btnClose img{
        width:100%;
    }
.jiangpin_wrap .content > div {
    border-bottom: 1px solid #FACD94;
    height:3rem;
}
.jiangpin_wrap .content > div:last-child {
    border-bottom:0;
}
.jiangpin_wrap .content .right {
    font-size:1.5rem;
}
.jiangpin_wrap .content .num {
    margin-top: 0.3rem;
}
.jiangpin_wrap .content a {
    background: #FACD94;
    width: 3.93rem;
    height: 1.32rem;
    text-align: center;
    color: #BF1201;
    float: right;
    font-size: 1rem;
    border-radius:1rem;
}
.jiangpin_wrap .content .ylq {
    background: #BCBCBC;
}

.btnMusic {
    width: 3.21rem;
    height: 4rem;
    position: absolute;
    top: 4.2rem;
    right: 1.46rem;
    z-index: 2;
}
    .btnMusic img {
        width:100%;
    }
    .zhuti {
        width: 100%;
    }
    .zhuti img {
        width:100%;
    }

.btnGroup {
    position:fixed;
    width:100vw;
    text-align:center;
    bottom:4.3rem;
}
.btn {
    background: url(../images/btn.png) no-repeat;
    background-size:100% 100%;
    text-align:center; 
    display:block;
}
.btnStart {
    width: 16.14rem;
    height: 4rem;
    font-size: 2.16rem;
    color: #C22D2A;
    margin:0 auto;
}
.minbtn {
    text-align: center;
    margin-top:0.5rem;
    width:100%;
    display:flex;
    justify-content:center;
}
    .minbtn a {
        width: 6rem;
        display:block;
       
    }
    .minbtn img {
        width: 100%;
    }
.timer_wrap {
    width: 10.57rem;
    height: 2.64rem;
    position:relative;
}
    .timer_wrap .face, .timer_wrap .face>img {
        width: 100%;
    }
    .timer_wrap .num {
        width: 8.61rem;
        height: 2rem;
        line-height:2rem;
        position: absolute;
        top: 0.32rem;
        left: 1.18rem;
        z-index: 0;
        font-size: 1.07rem;
        color: #fff;
        text-align:center;
    }
    .timer_wrap .tick {
        width: 8.61rem;
        height: 2rem;
        position: absolute;
        top: 0.32rem;
        left: 1.18rem;
        z-index: -1;
    }
    .timer_wrap .tick>div {
        background: linear-gradient(0deg, #FDB130 0%, #FFCB72 100%);
        border-radius:1rem;
        height:100%;
        overflow:hidden;
        
    }
.timeout_wrap .content {
    background:none;
    margin-top:10vh;
}
    .timeout_wrap .content>img {
        width: 16.79rem;
        height: 20.11rem;
    }
    .timeout_wrap .content a {
        background-color:initial;
        font-size: 2.16rem;
        color: #C22D2A;
        margin-top:2rem;
    }
@keyframes flip720 {
    0% {
        transform: perspective(400px) rotateY(0deg);
        -webkit-transform: perspective(400px) rotateY(0deg);
    }

    100% {
        transform: perspective(400px) rotateY(720deg);
        -webkit-transform: perspective(400px) rotateY(720deg);
    }
}
@keyframes flip180 {

    0% {
        transform: perspective(400px) rotateY(0deg);
        -webkit-transform: perspective(400px) rotateY(0deg);
    }

    100% {
        transform: perspective(400px) rotateY(180deg);
        -webkit-transform: perspective(400px) rotateY(180deg);
    }
}


@keyframes flip90 {

    0% {
        transform: perspective(400px) rotateY(-90deg);
        -webkit-transform: perspective(400px) rotateY(-90deg);
    }

    100% {
        transform: perspective(400px) rotateY(0deg);
        -webkit-transform: perspective(400px) rotateY(0deg);
    }
}


/*红包*/

.btn_lq {
    position: fixed;
    z-index: 21;
    top: 470px;
    right: -150px;
    width: 110px;
    animation: shake 0.3s linear alternate-reverse infinite;
    -webkit-animation: shake 0.3s alternate-reverse linear infinite;
    transition: all 0.3s linear;
}

.btn_slide_in {
    right: 10px;
}

.hb_face_wrap {
    display: none;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
}

    .hb_face_wrap .face_content {
        width: 300px;
        border-radius: 10px;
        margin: 24vw auto 0 auto;
        text-align: center;
        overflow: hidden;
    }

    .hb_face_wrap .btn_kai {
        position: absolute;
        top: 308px;
        width: 110px;
        left: calc(50% - 55px);
        border-radius: 50%;
    }


.hb_wrap {
    background-color: rgba(0,0,0,0.8);
    background-image: url(../images/bg_hb2.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: none;
}

    .hb_wrap h2 {
        color: #b83939;
        font-size: 28px;
        line-height: 44px;
        width: 249px;
        margin: 0 auto 1rem auto;
    }

    .hb_wrap span {
        color: #b83939;
        font-size: 14px;
    }

    .hb_wrap a.btn {
        display: block;
        width: 200px;
        height: 48px;
        line-height: 48px;
        margin: 0 auto;
        border: 5px solid #d21a1a;
        background: #ffe116;
        border-radius: 35px;
        box-sizing: content-box;
        color: #ba520d;
        font-size: 22px;
        font-weight: bold;
        position: absolute;
        top: 19rem;
        left: calc(50% - 100px);
    }
    .hb_wrap a.btn2 {
        display: block;
        width: 200px;
        height: 40px;
        color: #fff;
        font-size: 14px;
        position: absolute;
        top: 24rem;
        left: calc(50% - 100px);
    }

.ani_flip360 {
    animation: flip360 1s linear infinite;
    -webkit-animation: flip360 1s linear infinite;
}
@keyframes flip360 {
    0% {
        transform: rotateY(0) perspective(20px);
    }

    100% {
        transform: rotateY(360deg) perspective(20px);
    }
}

@-webkit-keyframes flip360 {
    0% {
        -webkit-transform: rotateY(0deg) perspective(20px);
    }

    100% {
        -webkit-transform: rotateY(360deg) perspective(20px);
    }
}
@keyframes ani_hide {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@-webkit-keyframes ani_hide {
    0% {
        -webkit-transform: scale(1);
    }

    100% {
        -webkit-transform: scale(0);
    }
}