body{
    overflow-y: scroll;
}
.bg{
    width: 100%;
}
.center{
    width: 100%;
    height: 25.5rem;
    -webkit-transform: translate(-50%, -50%);
}
.page1,.page2,.page3,.page4,.page5,.page6{
    background: url("../img/bg.png") no-repeat;
    background-size: 100% 100%;
}
.page1 .center{
    background: url("../img/c1.png") no-repeat;
    background-size: 100% 100%;
}
.page2 .center{
    background: url("../img/c2.png") no-repeat;
    background-size: 100% 100%;
}
.page3 .center{
    background: url("../img/c3.png") no-repeat;
    background-size: 100% 100%;
}
.page4 .center{
    /*background: url("../img/c4.png") no-repeat;
    background-size: 100% 100%;*/
}
.page5 .center{
    /*background: url("../img/c5.png") no-repeat;
    background-size: 100% 100%;*/
}
.page6 .center{
    background: url("../img/c6.png") no-repeat;
    background-size: 100% 100%;
}
.title{
    position: absolute;
    left: 7%;
    top: 7%;
    width: 86%;
    box-sizing: border-box;
}
.title::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.65rem;
    background: url("../img/t-after.png") no-repeat;
    background-size: 100%;
}
.page1 .title{
    background: url(../img/t1.png) no-repeat;
    background-size: 4.7rem;
    padding: 1rem 0.8rem 0.3rem 0;
    font-size: 0.75rem;
}
.page2 .title{
    background: url(../img/t2.png) no-repeat;
    background-size: 4.7rem;
    padding: 1rem 0.8rem 0.3rem 0;
    font-size: 0.75rem;
}
.page3 .title{
    background: url(../img/t3.png) no-repeat;
    background-size: 4.7rem;
    padding: 1rem 0.8rem 0.3rem 0;
    font-size: 0.75rem;
}
.page4 .title{
    background: url(../img/t4.png) no-repeat;
    background-size: 4.7rem;
    padding: 1rem 0.8rem 0.3rem 0;
    font-size: 0.75rem;
}
.page5 .title{
    background: url(../img/t5.png) no-repeat;
    background-size: 4.7rem;
    padding: 1rem 0.8rem 0.3rem 0;
    font-size: 0.75rem;
}
.page6 .title{
    background: url(../img/t6.png) no-repeat;
    background-size: 4.7rem;
    padding: 1rem 0.8rem 0.3rem 0;
    font-size: 0.75rem;
}
.n{
    position: absolute;
    bottom: 0;
    right: 1rem;
}
.progress{
    position: absolute;
    left: 1.5rem;
    top: 6%;
    display: flex;
}
.progress div{
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: #f49c7d;
    border: 1px solid #a81a1a;
    box-sizing: border-box;
    margin-right: 0.3rem;
}
.s1-1{
    position: absolute;
    left: 50%;
    top: 20%;
    width: 1.45rem;
    box-sizing: border-box;
    background: #f49c7d;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
}
.s1-2{
    position: absolute;
    left: 76%;
    top: 35%;
    width: 1.45rem;
    box-sizing: border-box;
    background: #f49c7d;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
}
.s1-3{
    position: absolute;
    left: 9%;
    top: 54%;
    width: 1.45rem;
    box-sizing: border-box;
    background: #f49c7d;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
}
.s1-4{
    position: absolute;
    left: 39%;
    bottom: 3%;
    width: 1.45rem;
    box-sizing: border-box;
    background: #f49c7d;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
}
.s1-detail-a{
    position: relative;
    width: 100%;
    height: auto;
    background: url(../img/s1-a.png) no-repeat 0.28rem 0.5rem #dd3c17;
    background-size: 0.75rem;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
    left: -0.15rem;
    top: -0.15rem;
    padding: 1.6rem 0.3rem 0.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #ffe5d7;
    overflow-wrap: break-word;
}

.s1-detail-b{
    position: relative;
    width: 100%;
    height: auto;
    background: url(../img/s1-b.png) no-repeat 0.28rem 0.5rem #dd3c17;
    background-size: 0.75rem;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
    left: -0.15rem;
    top: -0.15rem;
    padding: 1.6rem 0.3rem 0.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #ffe5d7;
    overflow-wrap: break-word;
}

.s1-detail-c{
    position: relative;
    width: 100%;
    height: auto;
    background: url(../img/s1-c.png) no-repeat 0.28rem 0.5rem #dd3c17;
    background-size: 0.75rem;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
    left: -0.15rem;
    top: -0.15rem;
    padding: 1.6rem 0.3rem 0.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #ffe5d7;
    overflow-wrap: break-word;
}

.s1-detail-d{
    position: relative;
    width: 100%;
    height: auto;
    background: url(../img/s1-d.png) no-repeat 0.28rem 0.5rem #dd3c17;
    background-size: 0.75rem;
    border: 0.05rem solid #a81a1a;
    border-radius: 0.75rem;
    left: -0.15rem;
    top: -0.15rem;
    padding: 1.6rem 0.3rem 0.5rem;
    box-sizing: border-box;
    text-align: center;
    color: #ffe5d7;
    overflow-wrap: break-word;
}



.progress div.cur{
    background: #dd3c17;
}
.progress div.se{
    background: #fff;
}
.disable{
    pointer-events: none;
    overflow-wrap: break-word;
}
.sbox img{
    -webkit-transition: all 0.2s;
}
.a1{
    -webkit-transform: scale(1.15);
}
.s2-1{
    position: absolute;
    left: 30%;
    top: 30%;
    width: 9.225rem;
    height: 2.55rem;
    background: url("../img/s2-1.png") no-repeat;
    background-size: 100% 100%;
    color: #a81a1a;
    box-sizing: border-box;
    padding: 0.72rem 0 0 1.6rem;
}
.s2-2{
    position: absolute;
    left: 11%;
    top: 47%;
    width: 9.225rem;
    height: 2.55rem;
    background: url("../img/s2-2.png") no-repeat;
    background-size: 100% 100%;
    color: #a81a1a;
    box-sizing: border-box;
    padding: 0.72rem 0 0 1.6rem;
}
.s2-3{
    position: absolute;
    left: 30%;
    top: 63%;
    width: 9.225rem;
    height: 2.55rem;
    background: url("../img/s2-3.png") no-repeat;
    background-size: 100% 100%;
    color: #a81a1a;
    box-sizing: border-box;
    padding: 0.72rem 0 0 1.6rem;
}
.s2-4{
    position: absolute;
    left: 11%;
    top: 79%;
    width: 9.225rem;
    height: 2.55rem;
    background: url("../img/s2-4.png") no-repeat;
    background-size: 100% 100%;
    color: #a81a1a;
    box-sizing: border-box;
    padding: 0.72rem 0 0 1.6rem;
}
.s3-1{
    position: absolute;
    left: 12%;
    top: 28%;
    width: 8.55rem;
    height: 2.35rem;
    background: url("../img/s3-1.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 0.6rem 0 0 1.6rem;
    box-sizing: border-box;
}
.s3-2{
    position: absolute;
    left: 38%;
    top: 39%;
    width: 8.55rem;
    height: 2.35rem;
    background: url("../img/s3-2.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 0.6rem 0 0 1.6rem;
    box-sizing: border-box;
}
.s3-3{
    position: absolute;
    left: 38%;
    top: 70.5%;
    width: 8.55rem;
    height: 2.35rem;
    background: url("../img/s3-3.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 1rem 0 0 1.6rem;
    box-sizing: border-box;
}
.s3-4{
    position: absolute;
    left: 12%;
    top: 80.5%;
    width: 8.55rem;
    height: 2.35rem;
    background: url("../img/s3-4.png") no-repeat;
    background-size: 100% 100%;
    color: #fff;
    padding: 1rem 0 0 1.6rem;
    box-sizing: border-box;
}
.page4{
    background: url("../img/bg4.png") no-repeat;
    background-size: 100% 100%;
}
.page5{
    background: url("../img/bg5.png") no-repeat;
    background-size: 100% 100%;
}
.sbox4{
    position: absolute;
    left: 1.6rem;
    top: 15.5rem;
}
.s4-1{
    width: 9.475rem;
    height: 1.95rem;
    background: url("../img/s4-1.png") no-repeat;
    background-size: 100% 100%;
    color: #492e2e;
    box-sizing: border-box;
    padding: 0.85rem 0 0 1.2rem;
}
.s4-2{
    width: 9.475rem;
    height: 1.95rem;
    background: url("../img/s4-2.png") no-repeat;
    background-size: 100% 100%;
    color: #492e2e;
    box-sizing: border-box;
    padding: 0.85rem 0 0 1.2rem;
}
.s4-3{
    width: 9.475rem;
    height: 1.95rem;
    background: url("../img/s4-3.png") no-repeat;
    background-size: 100% 100%;
    color: #492e2e;
    box-sizing: border-box;
    padding: 0.85rem 0 0 1.2rem;
}
.s4-4{
    width: 9.475rem;
    height: 1.95rem;
    background: url("../img/s4-4.png") no-repeat;
    background-size: 100% 100%;
    color: #492e2e;
    box-sizing: border-box;
    padding: 0.85rem 0 0 1.2rem;
}
.s5-1{
    position: absolute;
    left: 9%;
    top: 20%;
    width: 8.725rem;
    height: 1.45rem;
    background: url("../img/s5-1.png") no-repeat;
    background-size: 100% 100%;
}
.s5-2{
    position: absolute;
    left: 25%;
    top: 29%;
    width: 8.725rem;
    height: 1.45rem;
    background: url("../img/s5-2.png") no-repeat;
    background-size: 100% 100%;
}
.s5-3{
    position: absolute;
    left: 9%;
    top: 38%;
    width: 8.725rem;
    height: 1.45rem;
    background: url("../img/s5-3.png") no-repeat;
    background-size: 100% 100%;
}
.s5-4{
    position: absolute;
    left: 25%;
    top: 47%;
    width: 8.725rem;
    height: 1.45rem;
    background: url("../img/s5-4.png") no-repeat;
    background-size: 100% 100%;
}
.s6-1{
    position: absolute;
    left: 10%;
    top: 48.4%;
}
.s6-2{
    position: absolute;
    left: 10%;
    top: 56.8%;
}
.s6-3{
    position: absolute;
    left: 10%;
    top: 65.5%;
}
.s6-4{
    position: absolute;
    left: 10%;
    top: 74.2%;
}
.sbox6 div{
    padding: 0.75rem 0 0.8rem 3rem;
    width: 10rem;
}
.s5-detail{
    position: absolute;
    width: 80%;
    top: 12%;
    left: 20%;
    height: 1rem;
    line-height: 1rem;
    -webkit-transform: skew(20deg);
    color: #492e2e;
}
.page7{
    background: rgba(0,0,0,0.5);
}
.page7 .center{
    background: url("../img/bg-nick.png?V=1") no-repeat;
    background-size: 100%;
}

.nickname{
    display: block;
    width: 10.5rem;
    height: 1.8rem;
    margin: 11.5rem auto 3rem;
    background: #ffe5d7;
    border: 0.01rem solid #a81a1a;
    text-align: center;
    color: #492e2e;
    font-size: 0.65rem;
}
.submit{
    display: block;
    margin: 2rem auto;
    margin-top: 13rem;

}
.page8{
    background: url("../img/p4.png") no-repeat;
    background-size: 100% 100%;
}
.p1{
    position: absolute;
    left: 11%;
    top: 7%;
    -webkit-animation: bounceIn 1s both;
}
.p3{
    position: absolute;
    left: calc(50% - 9.5rem);
    top: calc(50% - 12.75rem);
    width: 19rem;
    height: 25.5rem;
    background: url("../img/p3.png") no-repeat;
    background-size: 100% 100%;
    -webkit-animation: rotateIn 1.2s 0.6s both;
}
.uname{
    position: absolute;
    left: 2%;
    width: 100%;
    top: 68%;
    -webkit-transform: rotateZ(-9deg);
    text-align: center;
    font-size: 0.6rem;
    color: #492e2e;
}
.p2{
    position: absolute;
    left: 27%;
    bottom: 8%;
    -webkit-animation: bounceIn 1s 1.5s both;
}
.page9{
    background: #fff;
    overflow-y: scroll;
}
.p9{
    width: 100%;
}
.video{
    background: rgb(238,238,238);
    z-index: 2;
}
video{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    background: rgb(238,238,238);
}
.end{
    -webkit-animation: end 2s both;
    -webkit-transform-origin: 25% 75%;
}
@-webkit-keyframes end {
    from{
        opacity: 1;
        -webkit-transform: scale(1);
    }
    60%{
        opacity: 1;
    }
    to{
        opacity: 0;
        -webkit-transform: scale(2);
    }
}
.bt-music{
    position: absolute;
    right: 0.45rem;
    top: 0.45rem;
    width: 1.5rem;
    -webkit-animation: play 6s linear infinite;
    z-index: 1;
}
@-webkit-keyframes play {
    from{
        -webkit-transform: rotateZ(0);
    }
    to{
        -webkit-transform: rotateZ(360deg);
    }
}
.pause{
    -webkit-animation: noen;
}
.contain{
    position: relative;
}
.restart{
    position: absolute;
    bottom: 1.6rem;
    left: 30%;
}
.bt-share{
    display: none;
    position: absolute;
    bottom: 1.6rem;
    right: 5%;
}
.share{
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: none;
    background: rgba(0,0,0,0.5) url("http://brsdh5.brightest.net.cn/th_wx/Public/img/share.png") no-repeat;
    background-size: 6rem;
    z-index:111;
    background-position: 9.5rem 0.5rem;
}
.index{
    position: absolute;
    background: url("../img/index.png") no-repeat center;
    background-size: 100%;
}

.land{
    background: url(../img/index.png) no-repeat center;
    background-size: auto 100%;
}
.sun{
    position: absolute;
    left: -4.7rem;
    top: -4.5rem;
    -webkit-transform-origin: 28% 22%;
    -webkit-animation: sun 10s linear infinite;
}
@-webkit-keyframes sun {
    from{
        opacity: 1;
        -webkit-transform: scale(1);
    }
    50%{
        opacity: 0.5;
        -webkit-transform: scale(2);
    }
    to{
        opacity: 1;
        -webkit-transform: scale(1);
    }
}
.q2{
    position: absolute;
    left: 12%;
    top: 2%;
    -webkit-animation: bounceInRight 1s 0.5s both;
}
.q1{
    position: absolute;
    left: 11%;
    top: 24%;
    -webkit-animation: bounceInLeft 1s 0.8s both;
}
.q3{
    position: absolute;
    left: 24%;
    top: 78%;
    -webkit-animation: bounceInUp 1s 1.1s both;
}
.phone{
    background: url("../img/pbg.jpg") no-repeat center;
    background-size: 100% 100% ;
    z-index: 1;
}
.time{
    position: absolute;
    width: 54.6%;
    left: 22.5%;
    top: 20%;
}
.receive{
    position: absolute;
    width: 87.6%;
    left: 6.2%;
    top: 38%;
    -webkit-animation: receive 2s linear infinite;
}
@-webkit-keyframes receive {
    from{
        -webkit-transform: scale(1);
    }
    50%{

        -webkit-transform: scale(1.05);
    }
    to{

        -webkit-transform: scale(1);
    }
}
.icon{
    position: absolute;
    width: 76.6%;
    left: 11.6%;
    bottom: 3%;
}
.hand{
    position: fixed;
    width: 70%;
    left: 14%;
    bottom: -14%;
}
.sa1{
    -webkit-animation: a1 0.1s both;
}
@-webkit-keyframes a1 {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.out{
    -webkit-animation: out 0.5s both;
}
@-webkit-keyframes out {
    from{
        -webkit-transform: translateY(0);
    }
    to{
        -webkit-transform: translateY(-100%);
    }
}