html,body{margin: 0; padding: 0; width: 100%;   height: 100%; text-align: center;}
section{width: 10rem;min-height: 14.88rem;  max-height: 17.786666rem;height: 100%; position: relative; margin: auto;}
    .swiper-container {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0%;
        top: 0%;
 		min-height: 14.88rem;
    }
    .swiper-slide img{max-width: 100%;}
    
.bghome{width: 100%; height: 100%; background: url(../images/home.jpg); background-size: 100% auto; background-position: 0 bottom;}
.bgend{width: 100%; height: 100%; background: url(../images/end.jpg); background-size: 100% auto; background-position: 0 bottom;}
.bg1{width: 100%; height: 100%; background: url(../images/1.jpg); background-size: 100% auto; background-position: 0 center;}
.bg2{width: 100%; height: 100%; background: url(../images/2.jpg); background-size: 100% auto; background-position: 0 bottom;}
.bg3{width: 100%; height: 100%; background: url(../images/3.jpg); background-size: 100% auto; background-position: 0 center;}
.bg4{width: 100%; height: 100%; background: url(../images/4.jpg); background-size: 100% auto; background-position: 0 center;}
.bg5{width: 100%; height: 100%; background: url(../images/5.jpg); background-size: 100% auto; background-position: 0 center;}
.bg6{width: 100%; height: 100%; background: url(../images/6.jpg); background-size: 100% auto; background-position: 0 center;}
.bg7{width: 100%; height: 100%; background: url(../images/7.jpg); background-size: 100% auto; background-position: 0 center;}
.bg8{width: 100%; height: 100%; background: url(../images/8.jpg); background-size: 100% auto; background-position: 0 center;}
.card{ width: 3.24rem; height: 3.36rem; position: absolute; left: 0.506666rem; bottom: 4.1%;}
.card1{background: url(../images/card1.png); background-size: 100% 100%;}
.card2{background: url(../images/card2.png); background-size: 100% 100%;}
.card3{background: url(../images/card3.png); background-size: 100% 100%;}
.card4{background: url(../images/card4.png); background-size: 100% 100%;}
.card5{background: url(../images/card5.png); background-size: 100% 100%;}
.card6{background: url(../images/card6.png); background-size: 100% 100%;}
.card7{background: url(../images/card7.png); background-size: 100% 100%;}
.card8{background: url(../images/card8.png); background-size: 100% 100%; }

.code{width: 2.586666rem; height: 2.586666rem; position: absolute; bottom: 1.4rem; left: 50%; margin-left:-1.23333rem; }
.code img{width: 100%; height: 100%;}
.logo{width: 4.093333rem; height: 0.48rem; position: absolute; left: 0.653333rem; top: 0.533333rem; background: url(../images/logo.png); background-size: 100% 100%; z-index: 2;}
.solagon{width: 1.613333rem; height: 1.64rem; position: absolute;right: 0.48rem; top: 0.506666rem; background: url(../images/solagon.png); background-size: 100% 100%; z-index: 2;}
.arraw{width: 0.786666rem; height: 0.333333rem; position: absolute; bottom: 4%; left: 50%; margin-left: -0.386666rem;background: url(../images/arraw.png); background-size: 100% 100%; z-index: 2;
-webkit-animation: upAni 3000ms linear infinite;
}

.musicBtn{width: 0.666666rem; height: 0.666666rem; display: block; position: absolute; right: 0.65333rem; bottom: 0.5rem;background:url(../images/soundBtn.png) center center no-repeat; background-size:100% 100% ; display: none; z-index: 1000; pointer-events: auto;}
.shake{-webkit-animation: shakeAni 1000ms linear infinite;}
@-webkit-keyframes shakeAni{
	25%{-webkit-transform:rotate(-5deg);}
	75%{-webkit-transform:rotate(5deg);}
}
@-webkit-keyframes upAni{
	15%{-webkit-transform:translateY(-0.3rem);}
	30%{-webkit-transform:translateY(0);}
}