@charset "UTF-8";/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2015 Daniel Eden
html, body, menu, ul, ol, li, p, div, form, h1, h2, h3, h4, h5, h6, img, a img, input, button, textarea, fieldset{ padding: 0; margin: 0; border: 0;font-family:"\5FAE\8F6F\96C5\9ED1"; }
ul, ol, li { list-style: none }
body, input, button, textarea, select { -webkit-text-size-adjust: none;outline: 0; color: #333 }
body { margin: 0 auto; background: #fff; /*min-width:320rem; width:320rem*/ }
html,
body {
  height: 100%;
  overflow: hidden;
}
input[type="text"], input[type="password"], input[type="button"], input[type="submit"], button, textarea { -webkit-appearance: none }
a { text-decoration: none; color: #333; }
a { blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
.img img, video { vertical-align: middle }
.btn { display: inline-block; vertical-align: middle }
/* a:hover { color: #cc3333; } */
img { border: none }
ol, ul, li { list-style: none; }
i, em { font-style: normal; }
html{
    height: 100vh;
}
.body-main{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 100vh;
    overflow: hidden;
}
.main{
    width: 100%;
    height: 100%;
}
html,
body,
body div,
span,
object,
iframe,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
menu,
nav,
section,
time,
mark,
audio,
video,
details,
summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}

.isPc{
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    /* -webkit-transform-origin: 0 0; */
    /* -ms-transform-origin: 0 0; */
    /* transform-origin: 0 0; */
    margin:0 auto;
    left:0;
    top:50%;
}
.swiper-container{
    width: 7.5rem;
    height: 15.08rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.swiper-slide{
    width: 7.50rem;
    height: 15.08rem;
}
.slide1{
    background: url(../images/bg1.jpg)no-repeat center/cover;
}
.start-btn{
    width: 1.72rem;
    height: 1.09rem;
    position: absolute;
    left: 2.97rem;
    bottom: 2.75rem;
    background: url(../images/btn.png)no-repeat center/cover;
    z-index: 2;
}
.swiper-container2{
    width: 7.50rem;
    height: 15.08rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.choose1{
    background: url(../images/choose1.jpg)no-repeat center/cover;
}
.choose2{
    background: url(../images/choose2.jpg)no-repeat center/cover;
}
.choose3{
    background: url(../images/choose3.jpg)no-repeat center/cover;
}
.choose4{
    background: url(../images/choose4.jpg)no-repeat center/cover;
}
.choose5{
    background: url(../images/choose5.jpg)no-repeat center/cover;
}
.choose-left{
    width: 0.70rem;
    height: 1.1rem;
    position: absolute;
    top: 5.90rem;
    left: 0.15rem;
    background: url(../images/choose6.png)no-repeat center/cover;
    z-index: 1;
    display: none;
}
.choose-right{
    width: 0.70rem;
    height: 1.1rem;
    position: absolute;
    top: 5.90rem;
    right: 0.15rem;
    background: url(../images/choose7.png)no-repeat center/cover;
    z-index: 1;
}
.start-color{
    width: 5.13rem;
    height: 1.13rem;
    background: url(../images/choose8.png)no-repeat center/cover;
    position: absolute;
    left: 0.99rem;
    bottom: 3rem;
    z-index: 1;
}
.choose-hand{
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.7);
    position: fixed;
    z-index: 3;
}
.choose-hand .hand{
    width: 2.2rem;
    height: 1.37rem;
    position: absolute;
    top: 6.10rem;
    right: 0.24rem;
    background: url(../images/click-info3.png)no-repeat center/cover;
    transform:scale(1);
}
.choose-hand2{
    width: 100%;
    height: 100%;
    background:rgba(0, 0, 0, 0.7);
    position: fixed;
    z-index: 4;
}
.choose-hand2 .hand1{
    width: 3.8rem;
    height: 1.4rem;
    position: absolute;
    top: 10.52rem;
    left: 1.52rem;
    background: url(../images/click-info1.png)no-repeat center/cover;
}
.choose-hand2 .hand2{
    width: 3.8rem;
    height: 1.4rem;
    position: absolute;
    top: 5rem;
    left: 1.52rem;
    background: url(../images/click-info2.png)no-repeat center/cover;
    display: none;
}
.slide3{
    background: url(../images/colorbg.jpg)no-repeat center/cover;
}
.slide3>img{
    display: none;
}
.color{
    width: 7.5rem;
    height: 5.93rem;
    background: url(../images/colorbg6.png)no-repeat center/cover;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}
.color>div{
    width: 100%;
    height: 100%;
    position: relative;
}
.colse-btn{
    width: 1rem;
    height: 0.65rem;
    background: url(../images/close-btn.png)no-repeat center/cover;
    position: absolute;
    left: 0.11rem;
    bottom: 5.28rem;
}
.color-main{
    width: 0.97rem;
    height: 0.97rem;
    border-radius: 50%;
    box-sizing: border-box;
}
.color .red{
    position: absolute;
    top: 1.83rem;
    left: 0.24rem;
    border: 0.08rem solid #2d4484;
}
.color .orange{
    position: absolute;
    left: 1.38rem;
    top: 1.72rem;
}
.color .yellow{
    position: absolute;
    left: 2.64rem;
    top: 1.62rem;
}
.color .green{
    position: absolute;
    left: 3.79rem;
    top: 1.59rem;
}
.color .pink{
    position: absolute;
    left: 4.94rem;
    top: 1.78rem;
}
.color .blue{
    position: absolute;
    top: 2.96rem;
    left: 0.85rem;
}
.color .dian{
    position: absolute;
    top: 2.93rem;
    left: 2.15rem;
}
.color .black{
    position: absolute;
    top: 2.95rem;
    left: 4.65rem;
}
.color .purple{
    position: absolute;
    top: 2.95rem;
    left: 3.47rem;
}
.random-btn{
    width: 2.26rem;
    height: 0.55rem;
    position: absolute;
    left: 1.16rem;
    top: 0.75rem;
}
.complete-btn{
    width: 2.26rem;
    height: 0.55rem;
    position: absolute;
    left: 3.95rem;
    top: 0.8rem;
}
.index{
    width: 100%;
    height: 100%;
    background: url(../images/loading1.png)no-repeat center/cover;
}
.loading{
    width: 3.5rem;
    height: 2.05rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.index2{
    width: 100%;
    height: 100%;
    background: url(../images/loading1.png)no-repeat center/cover;
}
.loading2{
    width: 3.5rem;
    height: 2.05rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.loading-main{
    width: 100%;
    height: 100%;
    position: relative;
}
.loading-main .pig-body{
    width: 1.92rem;
    height: 0.94rem;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(../images/loading2.png)no-repeat center/cover;
}
.loading-main .pig-head{
    width: 1.67rem;
    height: 1.48rem;
    position: absolute;
    left: 0.15rem;
    top: 0;
    transform-origin:bottom;
    background: url(../images/loading3.png)no-repeat center/cover;
}
.loading-main .gong,.loading-main .gong2{
    width: 0.71rem;
    height: 0.78rem;
    background: url(../images/loading4.png)no-repeat center/cover;
    position: absolute;
    left: 0.78rem;
    top: 1.14rem;
    z-index: 2;
    display: none;
}
.loading-main .gong2{
    background: url(../images/loading8.png)no-repeat center/cover;
}
.loading-main .he,.loading-main .he2{
    width: 0.64rem;
    height: 0.73rem;
    background: url(../images/loading5.png)no-repeat center/cover;
    position: absolute;
    left: 1.34rem;
    top: 1.14rem;
    z-index: 3;
    display: none;
}
.loading-main .he2{
    background: url(../images/loading9.png)no-repeat center/cover;
}
.musicbtn{
    width: 0.5rem;
    height: 0.5rem;
    position: fixed;
    top: 0.5rem;
    right: 0.3rem;
    background: url(../images/openm.png)no-repeat center/cover;
    z-index: 1000;
}
.colsemusic{
    background: url(../images/closem.png)no-repeat center/cover !important;
}
.loading-main .xin,.loading-main .xin2{
    width: 0.63rem;
    height: 0.69rem;
    background: url(../images/loading6.png)no-repeat center/cover;
    position: absolute;
    left: 1.83rem;
    top: 1.11rem;
    z-index: 4;
    display: none;

}
.loading-main .xin2{
    background: url(../images/loading10.png)no-repeat center/cover;
}
.loading-main .xi,.loading-main .xi2{
    width: 0.69rem;
    height: 0.77rem;
    background: url(../images/loading7.png)no-repeat center/cover;
    position: absolute;
    left: 2.32rem;
    top: 1.11rem;
    z-index: 4;
    display: none;
}
.loading-main .xi2{
    background: url(../images/loading11.png)no-repeat center/cover;
}
#pg{width: 100%;height: 0.25rem;background: #fff;border: 0.03rem solid #000;position: absolute;left: 0;bottom: 0;color: #ff3f3f;text-align: center;border-radius: 0.05rem;z-index: 5;}
.pg-value{width: 100%;height: 0.25rem;position: absolute;left: 0;bottom: 0;color: #000;text-align: center;font: normal 0.2rem/0.25rem "微软雅黑";z-index: 6;}
progress::-webkit-progress-bar
{
       background-color:#fff;
}
progress::-webkit-progress-value
{
     background-color:#ff3f3f;
}
progress::-moz-progress-bar
{
       background-color:#ff3f3f;
}
progress::-moz-progress-value
{
     background-color:#fff;
}
#pg2{width: 100%;height: 0.25rem;background: #fff;border: 0.03rem solid #000;position: absolute;left: 0;bottom: 0;color: #ff3f3f;text-align: center;border-radius: 0.05rem;z-index: 5;}
.pg-value2{width: 100%;height: 0.25rem;position: absolute;left: 0;bottom: 0;color: #000;text-align: center;font: normal 0.2rem/0.25rem "微软雅黑";z-index: 6;}
progress::-webkit-progress-bar
{
       background-color:#fff;
}
progress::-webkit-progress-value
{
     background-color:#ff3f3f;
}
progress::-moz-progress-bar
{
       background-color:#ff3f3f;
}
progress::-moz-progress-value
{
     background-color:#fff;
}
.slide4{
    background: url(../images/loading1.png)no-repeat center/cover;
}
.cardbg{
    width: 7.3rem;
    height: 12.55rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.cardbgimg{
    width: 7.3rem;
    height: 12.55rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.cardbgimg>img{
    width: 7.3rem;
    height: 12.55rem;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.cardbg-img{
    width: 7rem;
    /* height: 12.55rem; */
    position: absolute;
    left: 0;
    right: 0;
    top: -1.2rem;
    bottom: 0;
    margin:0 auto;
    display: block;
}
.cardbg-img2{
    width: 7rem;
    height: 14.3rem;
    position: absolute;
    left: 0;
    right: 0;
    top: -0.24rem;
    bottom: 0;
    margin: auto;
    display: block;
}
/* .cardbg1{
    background: url(../images/endbg1.png)no-repeat center/cover;
}
.cardbg2{
    background: url(../images/endbg2.png)no-repeat center/cover;
}
.cardbg3{
    background: url(../images/endbg3.png)no-repeat center/cover;
}
.cardbg4{
    background: url(../images/endbg4.png)no-repeat center/cover;
}
.cardbg5{
    background: url(../images/endbg5.png)no-repeat center/cover;
} */
.endbg2{
    width: 7.30rem;
    height: 3.23rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0rem;
    margin: auto;
    z-index: 3;
    display: none;
}
.endbg2>img{
    width: 7.30rem;
    height: 3.23rem;
    display: block;
}
.code{
    width: 1.02rem;
    height: 1.02rem;
    position: fixed;
    right: 0.61rem;
    bottom: 2.605rem;
    z-index: 5;
}
.code>img{
    width: 1.02rem;
    height: 1.02rem;
    display: block;
}
.savebg{
    width: 7.3rem;
    height: 12.55rem;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;
    display: block;
}

@keyframes pig-headani{
    0% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
    }
    50% {
        transform:rotate(-5deg);
        -webkit-transform:rotate(-5deg);
    }
    100% {
        transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
    }
}
.pig-headani{
    -webkit-animation: pig-headani 2s both infinite;
    animation: pig-headani 2s both infinite; 
  }
@keyframes handani{
    0% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
    50% {
        transform:scale(0.8);
        -webkit-transform:scale(0.8);
    }
    100% {
        transform:scale(1);
        -webkit-transform:scale(1);
    }
}
.handani{
    -webkit-animation: handani 2s both infinite;
    animation: handani 2s both infinite; 
  }
  @keyframes hand1ani{
    0% {
        transform:translateX(0rem);
        -webkit-transform:translateX(0rem);
    }
    50% {
        transform:translateX(1rem);
        -webkit-transform:translateX(1rem);
    }
    100% {
        transform:translateX(0rem);
        -webkit-transform:translateX(0rem);
    }
}
.hand1ani{
    -webkit-animation: hand1ani 3s both linear infinite;
    animation: hand1ani 3s both linear infinite; 
  }
  @keyframes rotate{
    0% {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
    }
    100% {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
    }
    }
    .rotate{
        -webkit-animation: rotate 2s both linear infinite;
        animation: rotate 2s both linear infinite; 
    }
  @keyframes slidedown{
    0% {
        transform:translateY(0rem);
        -webkit-transform:translateY(0rem);
    }
    100% {
        transform:translateY(5rem);
        -webkit-transform:translateY(5rem);
    }
}
.slidedown{
    -webkit-animation: slidedown 1s both 0s;
    animation: slidedown 1s both 0s; 
  }
  @keyframes rotatebtn{
    0% {
        transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
    }
    100% {
        transform:rotate(180deg);
        -webkit-transform:rotate(180deg);
    }
}
.rotatebtn{
    -webkit-animation: rotatebtn 1s both 0s;
    animation: rotatebtn 1s both 0s; 
  }
  @keyframes slidedown{
    0% {
        transform:translateY(0rem);
        -webkit-transform:translateY(0rem);
    }
    100% {
        transform:translateY(3rem);
        -webkit-transform:translateY(3rem);
    }
}
.slidedown{
    -webkit-animation: slidedown 1s both 0s;
    animation: slidedown 1s both 0s; 
  }
  @keyframes slideup{
    0% {
        transform:translateY(3rem);
        -webkit-transform:translateY(3rem);
    }
    100% {
        transform:translateY(0rem);
        -webkit-transform:translateY(0rem);
    }
}
.slideup{
    -webkit-animation: slideup 1s both 0s;
    animation: slideup 1s both 0s; 
  }