* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center;}
body{background: #ffffff; background-image: url(../images/bg.png); background-position: top; background-size: 100% 100%; background-repeat: no-repeat;}
section{width: 10rem;min-height: 14.88rem; height: 100%; max-height: 18rem; position: absolute; margin: auto;}
.logo{position: absolute; width: 3.226rem; height: 0.386rem; top: 0.386rem; left: 0.52rem; background: url(../images/logo.png) no-repeat; background-size: 100% 100%; z-index: 1000;}   
.musicBtn{ width: 0.56rem; height:0.56rem; position: absolute; right: 0.373333rem; top: 0.373333rem; background: url(../images/music.png); background-size:100% 100% ; z-index: 2100; display: none;}
.musicBtn.playing{-webkit-animation: playing 4000ms linear  infinite;}
#secSwiper{ width: 100%; height: 100%; display: none;}

.skipBtn{position: absolute; width: 1.8rem; height: 0.613rem; right: 0.64rem; bottom: 0.64rem; background: url(../images/skip.png) no-repeat; background-size: 100%; z-index: 100; display: none;}
.card-section{}
.card-section-bg{width: 100%; height: 100%; position: absolute;background: url(../images/card-bg.png) no-repeat; background-position: center; background-size: 100% auto;}
.card-swiper{position:absolute;width: 10rem; height: 7.733rem; left: 50%; margin-left: -5rem; top: 6.013rem;}
.card-swiper .card{width: 6.533rem; height: 4.133rem;  position: absolute; top: 0.346rem; left: 50%; margin-left: -3.253rem; border-radius: 0.2rem;}
.card-swiper .card.card1{background: url(../images/card1.png) no-repeat; background-size: 100% 100%;box-shadow: -0.2rem 0.2rem 0.48rem rgba(0,0,0,0.56);}
.card-swiper .card.card2{background: url(../images/card2.png) no-repeat; background-size: 100% 100%;box-shadow: -0.2rem 0.2rem 0.48rem rgba(0,0,0,0.56);}
.card-swiper .card.card3{background: url(../images/card3.png) no-repeat; background-size: 100% 100%;box-shadow: -0.2rem 0.2rem 0.48rem rgba(0,0,0,0.56);}
.card-swiper .card.card4{background: url(../images/card4.png) no-repeat; background-size: 100% 100%;box-shadow: -0.2rem 0.2rem 0.48rem rgba(0,0,0,0.56);}
.card-swiper .card.card5{background: url(../images/card5.png) no-repeat; background-size: 100% 100%;box-shadow: -0.2rem 0.2rem 0.48rem rgba(0,0,0,0.56);}
.card-swiper .swiper-button-next,.card-swiper .swiper-button-prev {top: 2.226rem;width: 0.693rem;height: 0.693rem;margin-top:0;background-size: 100% 100%;background-position: center;}
.card-swiper .swiper-button-prev,.card-swiper .swiper-container-rtl .swiper-button-next {background-image:url(../images/left.png);left: 0.6rem;right: auto;}
.card-swiper .swiper-button-next,.card-swiper .swiper-container-rtl .swiper-button-prev {background-image:url(../images/right.png);right: 0.6rem;left: auto;}
.card-swiper .title{font-size: 0.4rem; top: 5.066rem; position: absolute; width: 100%; text-align: center; color: #000;}
.card-swiper .note{font-size:0.28rem; line-height: 0.493rem; top: 5.866rem; position: absolute; width: 6.52rem;left: 50%; margin-left: -3.253rem; text-align: left; color: #000;}
.btn-getcard{position:absolute; width: 3.026rem; height: 0.706rem; top: 50%; margin-top: 5.866rem; left: 50%; margin-left: -3.253rem; background: url(../images/btn-getcard.png) no-repeat; background-size: 100%; z-index: 100;}
.btn-getcard.im{background: url(../images/btn-getcard-im.png) no-repeat; background-size: 100%;}
.btn-getadv{position:absolute; width: 3.026rem; height: 0.706rem; top: 50%; margin-top: 5.866rem; left: 50%; margin-left: 0.253rem; background: url(../images/btn-getadv.png) no-repeat; background-size: 100%;z-index: 100;}
.down{width: 0.613rem; height: 0.32rem; position: absolute; left: 50%; margin-left: -0.306rem; bottom: 0.546rem; background: url(../images/down.png) no-repeat; background-size: 100%;}

.ms{width: 9.36rem; height: 4rem; position: absolute; left: 0.2rem; top: 5%;background: url(../images/ms.png) no-repeat; background-size: 100%; z-index: 100;}
.band-box{ position: absolute; width: 8.973rem; height: 8.44rem; left: 50%; margin-left: -4.48rem; top: 30.87%; background: url(../images/band.png) no-repeat; background-size: 100% 100%;}
.band-box .note{width: 6.6rem; position: absolute; text-align: center; font-size: 0.28rem; top: 5.866rem; left: 50%; margin-left: -3.3rem;}

.zx-section{background: url(../images/zx-bg.png) no-repeat; background-position: center; background-size: 100% auto;}
.zx-box{ position: absolute; width: 8.973rem; height: 8.44rem; left: 50%; margin-left: -4.48rem; top: 30.87%; background: url(../images/zx-box.png) no-repeat; background-size: 100% 100%; }
.zx-box h4 { font-size: 0.4rem; color: #8f6939; margin-top: 0.333rem;}
.zx-box h4:first-child{ margin-top: 0.75rem;}
.zx-box p{font-size: 0.28rem; color: #5c462c; padding: 0 1.186rem; text-align: left; margin-top: 0.233rem;}
.zx-box .cup{position: absolute; width: 3.226rem; height: 2.52rem; bottom: 0; left: 50%; margin-left: -1.613rem; background: url(../images/cup.png) no-repeat; background-size: 100% 100%;}

.more-section{background: url(../images/zx-bg.png) no-repeat; background-position: center; background-size: 100% auto;}
.more-box{ position: absolute; width: 8.973rem; height: 8.44rem; left: 50%; margin-left: -4.48rem; top: 30.87%; background: url(../images/more-box.png) no-repeat; background-size: 100% 100%; }
.more-box ul{list-style: none; margin-left:0.5rem  ; margin-top: 2rem;}
.more-box ul li{color: #8f6939; font-size: 0.32rem; line-height: 0.853rem; text-align: left;}
.more-box ul li span{font-size: 0.579rem;}
.tip{font-size: 0.241rem; color: #695336; position: absolute; width: 100%; bottom: 0.32rem;}
.back-home{position: absolute; width: 1.786rem; height: 0.6rem; bottom: 0.666rem; left: 50%; margin-left: -0.893rem; background: url(../images/back-home.png) no-repeat; background-size: 100%; display: none;z-index: 100;}


/* popups */
.md-modal {position: fixed;top: 50%;left: 50%;max-width: 10rem;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;-webkit-transition: all 0.3s; background: rgba(0,0,0,0.7);
}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}
/* Content styles */
.md-content {position: relative;margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}

.popUp{background: url(../images/popbg.png) no-repeat; background-size: 100%; width: 8.973rem; height:8.466rem;text-align: center; }
.popUp .md-close{ width: 1.8rem; height: 0.613rem; position: absolute; display: block; left: 50%; margin-left: -0.9rem;  bottom:-3.16rem; background:url(../images/closeBtn.png) no-repeat; background-size:100%;z-index: 1;}
.popUp .code-box{ position: absolute; width: 3.146rem; height: 3.12rem; top: 1.773rem; left: 50%; margin-left:-1.573rem; background: url(../images/code-bg.png) no-repeat; background-size: 100%;}
.popUp .code-box>img{width: 2.8rem; height: 2.8rem; margin: 0.16rem;}
.popUp .code-note{ font-size: 0.338rem; color: #8F6939; width: 100%; line-height: 0.84rem; top: 5.373rem; position: absolute;}

.loading-section{z-index: 50;}
.loading-logo1{ position: absolute; width: 4.066rem; height: 4.053rem; left: 3.04rem; top:5.386rem; background: url(../images/intro-logo1.png) no-repeat; background-size: 100%;-webkit-animation: logoAni 4000ms ease-out infinite; }
.loading-logo2{ position: absolute; width: 3.346rem; height: 3.346rem; left: 3.37rem; top:5.746rem; background: url(../images/intro-logo2.png) no-repeat; background-size: 100%;-webkit-animation: logoAni 4000ms ease-out 300ms infinite; }
.loading-logo3{ position: absolute; width: 2.773rem; height: 2.773rem; left: 3.666rem;  top:6.04rem; background: url(../images/intro-logo3.png) no-repeat; background-size: 100%;-webkit-animation: logoAni 4000ms ease-out 600ms infinite; }
.loading-logo4{ position: absolute; width: 2.106rem; height: 1.373rem; left: 3.986rem;  top: 6.893rem; background: url(../images/intro-logo4.png) no-repeat; background-size: 100%;-webkit-animation: logoAni 4000ms ease-out 900ms infinite; }
.loading-tip{position: absolute; width: 3.44rem; height: 0.293rem; left: 50%; margin-left: -1.72rem; top: 11.373rem; background: url(../images/loading-tip.png) no-repeat; background-position: center; background-size: 2.64rem 0.293rem;} 
.loading-tip>.left{ position: absolute; width: 0.08rem; height: 0.133rem; left: 0; top: 0.08rem; background: url(../images/intro-left-a.png) no-repeat; background-size: 100%;}
.loading-tip>.right{ position: absolute; width: 0.08rem; height: 0.133rem; right: 0; top: 0.08rem; background: url(../images/intro-right-a.png) no-repeat; background-size: 100%;}
.loading-per{font-size: 0.34rem; color: #000; width: 100%; top: 9.773rem; text-align: center; position: absolute; }
.loading-section .btn-in{ position: absolute; width: 1.786rem; height: 0.6rem; left: 50%; margin-left: -0.893rem; top: 13.573rem; background: url(../images/button-in.png) no-repeat; background-size: 100%; display: none;}
.intro{display: none; width: 100%; }
.intro>video{width: 100%; position: absolute; height: auto; top: 0; left: 0;}

.cardin{-webkit-animation: card-in 1000ms ease-out forwards; transform-origin: 50% top;}
@-webkit-keyframes logoAni{
	0%{transform: scale(1);}
	15%{transform: scale(1.1);}
	30%{transform: scale(1);}
}
@-webkit-keyframes playing{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@-webkit-keyframes card-in{
	0%{transform: scale(1.151) translateY(0.506rem);}
	100%{transform: scale(1) translateY(0);}
}