*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;background-color: #000}
.tips_blk{z-index:99999999;position:absolute;left:50%;bottom:10px;width:130px;height: 20px;margin-left:-65px;text-align:center;}
.tips_blk p{z-index:99999999;font-size:10px;color:#FFF;}
.tips_blk_hide p{z-index:99999999999;display:none;}
.loading{position:absolute;width:100%;height:100%;z-index: 99;background:url('../images/loading.jpg') no-repeat;background-size:100% 100%;}

/*.center{*/
    /*width: 100%;position: fixed;height: 100%;max-height:736px;*/
/*}*/
/*#body1{*/
    /*width: 100%;height: 100%;top:0;left:0;position: absolute;*/
    /*display:flex;*/
    /*justify-content:center;*/
    /*align-items:center;*/
/*}*/
.bg0{
    position:absolute;width:100%;height:100%;background:url('../images/p0.jpg');background-size:100% 100%;display: none;
}
.loading1{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.1.png') no-repeat;background-size:100% 100%;}
.loading2{position: absolute;top:0;left:0;width: 100%;height:100%;background:url('../images/p0.2.png') no-repeat;background-size:100% 100%;}
.loading_gif{
    position: absolute;
    width: 30%;
    height: 37.6%;
    left:35%;
    top:45%;
}
.loading11{
    /*position:absolute;top:43%;left:33%;width: 35.26%;height:4px;background-color: #d4d2d1;*/
    position: absolute;left:16%;top:46%;;width: 65%;height:1.6%;border-radius: 8px;border: 6px solid #ff6061;overflow: hidden;box-shadow: 0 0 50px #ff6061;  -webkit-box-shadow: 0 0 50px #ff6061;
}
.loading11_1{
    position: absolute;width: 0;height:100%;border-radius: 2px;background:  linear-gradient(to bottom, #d71b00 0%, #fff 55%,#e8306f 100%);
-webkit-linear-gradient(to bottom, #d71b00 0%, #fff 55%,#e8306f 100%);
}
.progress_num{
    position: absolute;width: 100%;font-size: 14px;text-align: center;top:51%;color: #fff;
}
.hand_gif{
    position: absolute;
    left: 65%;
    top: 29%;
    width: 13%;
    height: 9%;
}
a{opacity:1}
/*loading*/

/*音乐*/

.music_blk{z-index:999999999999999999999999;
    position:fixed;
    left: 3%;
    top: 13%;
    display: none;
}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;}
.music_on{
    -webkit-animation:rotate 1.2s linear infinite;
    animation:rotate 1.2s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {transform: rotate(0)}
    100% {transform: rotate(360deg);}
}

.swiper-container{position:absolute;width:100%;height:100%}
.swiper-slide{position:relative;overflow:hidden}
.swiper-slide *{position:absolute;}




#ss{width: 100%;height: 100%;margin: 0 auto;overflow: hidden;position: absolute;top:0;left:0}
#s0,#s1,#s2,#s3{width: 100%;height: 100%;position: relative;background:url("../images/p1.jpg") no-repeat 0 0;background-size:100% 100%;}
/*.head{*/
    /*width: 100%;height: 100%;left:0;top:0;position: absolute;*/
/*}*/
.progress_bar{
    position: absolute;left:20%;top:8%;;width: 65%;height:1.6%;border-radius: 8px;border: 6px solid #ff6061;overflow: hidden;box-shadow: 0 0 50px #ff6061;  -webkit-box-shadow: 0 0 50px #ff6061;display: none;
}
.progress_bar1{
    position: absolute;width: 105%;height:100%;border-radius: 2px;background:  linear-gradient(to bottom, #d71b00 0%, #fff 55%,#e8306f 100%);
-webkit-linear-gradient(to bottom, #d71b00 0%, #fff 55%,#e8306f 100%);
}
.fix_p{

    position: absolute;display: none ;left:30%;top:12%;height:4%;width: 50%;
    color: #fbcc8c;letter-spacing:2px;
    /*text-shadow:#fabb78 1px 0 0,#fabb78 0 1px 0,#fabb78 -1px 0 0,#fabb78 0 -1px 0;*/
    /*-webkit-text-shadow:#fabb78 1px 0 0,#fabb78 0 1px 0,#fabb78 -1px 0 0,#fabb78 0 -1px 0;*/
    /*-moz-text-shadow:#fabb78 1px 0 0,#fabb78 0 1px 0,#fabb78 -1px 0 0,#fabb78 0 -1px 0;*/
}
.person{
    width:24.6%;position: absolute;background:url("../images/p1.4.png") no-repeat 0 0;background-size:100% 100%;left:8%;top:4%;
    display: none;
}
.arrow{
    position: absolute;left:30%;top:93%;height:4%;width: 38.8%;display: none;
}
#s1 .head .progress_bar1{
    width:78%;
}
#s2 .head .progress_bar1{
    width:47%;
}
#s3 .head .progress_bar1{
    width:36%;
}
#s4 .head .progress_bar1{
    width:0%;
}

/*#s0.ani .s0_0{*/
    /*-webkit-animation: 0.8s 1.5s Out linear both;*/
    /*animation: 0.8s 1.5s Out linear both;*/
/*}*/
/*#s0.ani .s0_1{*/
    /*-webkit-animation: 0.8s 0.5s Out linear both;*/
    /*animation: 0.8s 0.5s Out linear both;*/
/*}*/
.s0_1{background:url('../images/p1-1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;}
.s1_1{background:url('../images/p1-2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;}
.s2_1{background:url('../images/p1-3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;}
.s3_1{background:url('../images/p1-4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;}

#s4{width: 100%;height: 100%;position: relative;background:url("../images/p2.jpg") no-repeat 0 0;background-size:100% 100%;}
.ani_1{
    width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;
}
.s4_1{
    background:url('../images/p2.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0
}
.s4_2{
    background:url('../images/p2.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0
}
.s4_3{
    background:url('../images/p2.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;
}
.s4_click{
    width: 47%;
    height: 5%;
    position: absolute;
    top: 88%;
    left: 26%;

}
.bg1_click{
    width: 47%;
    height: 5%;
    position: absolute;
    top: 88%;
    left: 26%;
}

.bg1{position: absolute;top:0;left:0;background:url('../images/p3.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none}
.bg1_1{
    background:url('../images/p3.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0
}
.bg1_2{
    background:url('../images/p3.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0
}
.bg1_3{
    background:url('../images/p3.3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:10%;left:0;opacity: 0;
}
.bg1_4{
    background:url('../images/p3.4.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0;opacity: 0;
}
.bg1.ani .bg1_2{
    -webkit-animation:shake 2s linear infinite;
    animation:shake 2s linear infinite;
}
.bg1.ani .bg1_3{
    -webkit-animation:up1 1s 0.5s linear both;
    animation:up1 1s 0.5s linear both;
}
.bg1.ani .bg1_4{
    -webkit-animation:Out 1s 2s linear both;
    animation:Out 1s 2s linear both;
}


.bg2{
    position: absolute;top:0;left:0;background:url('../images/p1.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;
}
.bg2_bg1{
    background:url('../images/p4.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0
}
.bg2_bg2{
    background:url('../images/p4.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;position: absolute;top:0;left:0
}
.box_input{
    width: 75.6%;height:8.8%;position: absolute;top:33.27%;left:12.27%;box-shadow: 0 0 8px #bc1066;  -webkit-box-shadow: 0 0 8px #ff6061;border:3px solid #f4837d  ;border-radius: 8px;
    display:flex;
    justify-content:center;
    align-items:center;
}
#input1{display:inline-block;width: 94.7%;height:73.8%;outline:0;font-size: 18px;text-align: center;color: #fff;
    background-color:#8a2453;box-shadow: 0 0 8px #bc1066;  -webkit-box-shadow: 0 0 8px #ff6061;border:3px solid #f4837d  ;border-radius: 8px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #c89fb1;font-size:16px;
}
.bg2_click{
    width: 47%;
    height: 5%;
    position: absolute;
    top: 88%;
    left: 26%;
}

.bg3{
    position: absolute;top:0;left:0;background:url('../images/p6.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;
}

.bg3_bg,.bg3_bg_turn{
    width: 100%;height:100%;position: absolute;top:0;left:0;
}
.bg3_bg_turn div:nth-of-type(1){
    position: absolute;top:0;left:0;background:url('../images/p6-1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;
}
.bg3_bg_turn div:nth-of-type(2){
    position: absolute;top:0;left:0;background:url('../images/p6-2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;
}
.bg3_bg_turn div:nth-of-type(3){
    position: absolute;top:0;left:0;background:url('../images/p6-3.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display: none;
}

#user_bottom{
    position: absolute;color: #fff;
    left: 0;
    top: 55%;
    width: 100%;
    text-align: center;
    text-shadow:#ff9025 1px 0 0,#ff9025 0 1px 0,#ff9025 -1px 0 0,#ff9025 0 -1px 0;
    -webkit-text-shadow:#ff9025 1px 0 0,#ff9025 0 1px 0,#ff9025 -1px 0 0,#ff9025 0 -1px 0;
    -moz-text-shadow:#ff9025 1px 0 0,#ff9025 0 1px 0,#ff9025 -1px 0 0,#ff9025 0 -1px 0;
}

.left_arrow{
    position: absolute;top:46%;left:0;width:10.6%;height: 9.6%;background:url('../images/left_arrow.png') no-repeat 0 0;background-size:100% 100%;
}
.right_arrow{
    position: absolute;top:46%;right:0;width:10.6%;height: 9.6%;background:url('../images/right_arrow.png') no-repeat 0 0;background-size:100% 100%;
}
.bg3_mask{
    position: absolute;top:0;left:0;background:url('../images/p5.jpg') no-repeat 0 0;background-size:100% 100%;width: 100%;height:100%;display:none
}
.file_div{
    position: absolute;
    top: 23%;
    left: 20%;
    width: 58%;
    height: 34%;
    opacity: 0;
}
.bg3_text1{
    position: absolute;top:80%;left:0;background:url('../images/p6.1.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:5.42%;
}
.bg3_text2{
    position: absolute;bottom:0;left:0;background:url('../images/p6.2.png') no-repeat 0 0;background-size:100% 100%;width: 100%;height:14.46%;
}
.canvas_touch{
    position: absolute;top:8.95%;left:0;width: 100%;height:36.976%;
}
.bg3_click{
    width: 47%;
    height: 5%;
    position: absolute;
    top: 88%;
    left: 26%;

}
.poster_div,#poster{
    width: 100%;
    height:100%;
    position: absolute;
    top:0;
    left:0
}
.poster_div{
    display:none;
}
.tishi{
    position: absolute;
    top: 80%;
    left: 40%;
    width: 20%;
    height:1.8%;
    background:url('../images/tishi.png') no-repeat 0 0;background-size:100% 100%;
    /*-webkit-animation:shake 2.5s linear infinite;*/
    /*animation:shake 2.5s linear infinite;*/
}
.upload{
    position: absolute;top:0;left:0;width:100%;height: 100%;background:url('../images/upload.png') no-repeat 0 0;background-size:100% 100%;display: none;
}

@keyframes shake{
    0%{opacity:0}
    25%{opacity:1}
    50%{opacity:0}
    75%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes shake{
    0%{opacity:0}
    25%{opacity:1}
    50%{opacity:0}
    75%{opacity: 1}
    100%{opacity: 0}
}
@-webkit-keyframes up1 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 0}
    100% { -webkit-transform:translate3d(0,-10%,0);transform:translate3d(0,-10%,0);opacity: 1}
}
@keyframes up1 {
    0% { -webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity: 0}
    100% { -webkit-transform:translate3d(0,-10%,0);transform:translate3d(0,-10%,0);opacity: 1}
}




#s4.ani .ani_1{
    -webkit-animation: 0.6s 0.5s bounceIn cubic-bezier(0.215,0.610,0.355,1.000)  both;
    animation: 0.6s 0.5s bounceIn cubic-bezier(0.215,0.610,0.355,1.000)  both;
}
#s4.ani .s4_3{
    -webkit-animation: 0.8s 2s Out linear both;
    animation: 0.8s 2s Out linear both;
}
@-webkit-keyframes  bounceIn{

    0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
    40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
    60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
    80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
    100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes bounceIn{

    0%{transform:scale3d(.3,.3,.3);opacity:0;}
    20%{transform:scale3d(1.1,1.1,1.1);}
    40%{transform:scale3d(.9,.9,.9);}
    60%{transform:scale3d(1.03,1.03,1.03);opacity:1}
    80%{transform:scale3d(.97,.97,.97)}
    100%{transform:scale3d(1,1,1);opacity:1;}
}

@keyframes Out{
    0%{opacity:0}
    100%{opacity:1}
}
@-webkit-keyframes Out{
    0%{opacity: 0}
    100%{opacity:1}
}
.s0_1,.s1_1,.s2_1,.s3_1{
    opacity: 0.5;
}
#s0.ani .s0_1,#s1.ani .s1_1,#s2.ani .s2_1,#s3.ani .s3_1{
    -webkit-animation: 1.5s 0.2s s0_1 linear infinite;
    animation:1.5s 0.2s s0_1 linear infinite;
}
@keyframes s0_1{
    0%{opacity:0.5}
    50%{opacity:1}
    100%{opacity:0.5}
}
@-webkit-keyframes s0_1{
    0%{opacity:0.5}
    50%{opacity:1}
    100%{opacity:0.5}
}
.open{
    width: 42%;
    height: 4%;
    position: absolute;
    left: 12%;
    top: 90%;
}
.open_hand{
    width: 8%;
    height: 6%;
    position: absolute;
    left: 47%;
    top: 90%;
    background:url('../images/hand2.png') no-repeat 0 0;background-size:100% 100%;
    -webkit-animation:shake 2s linear infinite;
    animation:shake 2s linear infinite;
}