* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center; background: url(../images/bg.jpg) repeat; background-size: 375px 375px;}
section{width: 100%;height: 100%; position: relative; margin: auto;display: none; overflow: hidden;}

.logo{width:4.306666rem; height: 0.506666rem; position: absolute; left: 0.453333rem; top: 0.413333rem; background: url(../images/logo.png); background-size: 100% 100%;}
.musicBtn{ width: 0.813333rem; height:0.773333rem; position: absolute; right: 0.373333rem; top: 0.373333rem; background: url(../images/musicBtn.png); background-size:100% 100% ; z-index: 2100;}

.loadingSection{}
.loadingSection .per{position: absolute; left: 50%; width: 3rem; margin-left: -1.5rem; top:50%; margin-top: 1.8rem; font-size:0.373333rem;}   
.loadingSection .note{position: absolute; left: 50%; width: 3rem; margin-left: -1.5rem; top:50%; margin-top: 1rem; font-size: 0.373333rem;}
.loadingSection .loadingTxt{position: absolute; left: 50%; width: 4.773333rem; margin-left: -2.386666rem; height: 1.906666rem; top:50%; margin-top: -2rem; background: url(../images/loadingTxt.png); background-size: 100% 100%;}


.swiper-container {width: 100%;height: 100%; max-height: 13rem; position: absolute;left: 0%;top: 0%;}
.swiper-container .swiper-slide{width: 231.226666rem;}
.homePic{width: 17.026666rem; height: 6.026666rem; position: absolute; bottom: 0.706666rem; left: 0.373333rem;}
.homePic .bg{width: 100%; height: 100%; position: absolute; background: url(../images/homePic.jpg); background-size: 17.026666rem 6.026666rem;-webkit-mask-image: url(../images/mask1.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}

.show.homePic .bg{-webkit-animation: mainbgAni 4000ms ease-out  forwards;}
@-webkit-keyframes mainbgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:0 0 ;}
	100%{-webkit-mask-size:60rem 20rem ;-webkit-mask-position:0 0 ;}
}


.homeTxt{width: 7.813333rem; height: 2.986666rem; position: absolute; bottom: 4.946666rem; left: 4.946666rem;}
.homeTxt .bg{width: 100%; height: 100%; position: absolute; background: url(../images/homeTxt.png); background-size: 7.813333rem 2.986666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.show.homeTxt .bg{-webkit-animation: t1Ani 3000ms ease-out 1500ms forwards;}
@-webkit-keyframes t1Ani{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 0 ;}
	100%{-webkit-mask-size:30rem 30rem ;-webkit-mask-position:50% 0 ;}
}

.scrollBox{ width: 212.946666rem; height: 8.506666rem; position: absolute; bottom: 0.44rem; left: 18rem; 
background-image:url("../images/scrollBoxBg1.png"),url("../images/scrollBoxBg3.png");
background-repeat: no-repeat, no-repeat;  
background-position: 0 0, 204.666666rem 0;  
background-size: 8.92rem 8.506666rem, 8.28rem 8.506666rem;  
-webkit-transform: translateX(2.666666rem);

}
.show.scrollBox{-webkit-animation: tBoxAni 1000ms ease-out 2500ms forwards;}
@-webkit-keyframes tBoxAni{
	0%{-webkit-transform: translateX(2.666666rem);}
	100%{-webkit-transform: translateX(0);}
}
.scrollBox .bg{width: 195.746666rem; height: 8.506666rem;position: absolute; top: 0; left: 8.92rem; background:url("../images/scrollBoxBg2.png") repeat-x ;  background-size: 7.226666rem 8.506666rem;}

.cardSize1{width: 4.88rem; height:3.066666rem; position: absolute;}
.cardSize2{width: 3.96rem; height: 6.293333rem; position: absolute;}
.cardSize3{width: 4.4rem; height: 2.746666rem; position: absolute;}
.cardSize4{ width: 2.106666rem; height: 3.346666rem; position: absolute;}

.card1{ left: 3.04rem; top: 1.04rem; background: url(../images/c1.png); background-size: 100% 100%;}
.card2{ left: 3.04rem; top: 4.253333rem; background: url(../images/c2.png); background-size: 100% 100%;}
.card3{ left: 8.08rem; top: 1.04rem; background: url(../images/c3.png); background-size: 100% 100%;}
.card4{ left: 12.213333rem; top: 1.04rem; background: url(../images/c4.png); background-size: 100% 100%;}
.card5{ left: 12.213333rem; top: 3.986666rem; background: url(../images/c5.png); background-size: 100% 100%;}
.card6{ left: 14.506666rem; top: 3.986666rem; background: url(../images/c6.png); background-size: 100% 100%;}
.card7{ left: 16.773333rem; top: 1.04rem; background: url(../images/c7.png); background-size: 100% 100%;}
.card8{ left: 20.893333rem; top: 1.04rem; background: url(../images/c8.png); background-size: 100% 100%;}
.card9{ left: 20.893333rem; top: 4.253333rem; background: url(../images/c9.png); background-size: 100% 100%;}
.card10{ left: 25.946666rem; top: 1.04rem; background: url(../images/c10.png); background-size: 100% 100%;}
.card11{ left: 30.066666rem; top: 1.04rem; background: url(../images/c11.png); background-size: 100% 100%;}
.card12{ left: 32.373333rem; top: 1.04rem; background: url(../images/c12.png); background-size: 100% 100%;}
.card13{ left: 30.066666rem; top: 4.56rem; background: url(../images/c13.png); background-size: 100% 100%;}
.card14{ left: 34.613333rem; top: 1.04rem; background: url(../images/c14.png); background-size: 100% 100%;}
.card15{ left: 38.72rem; top: 1.04rem; background: url(../images/c15.png); background-size: 100% 100%;}
.card16{ left: 38.72rem; top: 4.253333rem; background: url(../images/c16.png); background-size: 100% 100%;}
.card17{ left: 43.746666rem; top: 1.04rem; background: url(../images/c17.png); background-size: 100% 100%;}
.card18{ left: 47.84rem; top: 1.04rem; background: url(../images/c18.png); background-size: 100% 100%;}
.card19{ left: 47.84rem; top: 4.253333rem; background: url(../images/c19.png); background-size: 100% 100%;}
.card20{ left: 52.866666rem; top: 1.04rem; background: url(../images/c20.png); background-size: 100% 100%;}
.card21{ left: 56.986666rem; top: 1.04rem; background: url(../images/c21.png); background-size: 100% 100%;}
.card22{ left: 56.986666rem; top: 4.253333rem; background: url(../images/c22.png); background-size: 100% 100%;}
.card23{ left: 62rem; top: 1.04rem; background: url(../images/c23.png); background-size: 100% 100%;}
.card24{ left: 66.133333rem; top: 1.04rem; background: url(../images/c24.png); background-size: 100% 100%;}
.card25{ left: 70.226666rem; top: 1.04rem; background: url(../images/c25.png); background-size: 100% 100%;}
.card26{ left: 70.226666rem; top: 4.253333rem; background: url(../images/c26.png); background-size: 100% 100%;}
.card27{ left: 75.253333rem; top: 1.04rem; background: url(../images/c27.png); background-size: 100% 100%;}
.card28{ left: 79.36rem; top: 1.04rem; background: url(../images/c28.png); background-size: 100% 100%;}
.card29{ left: 79.36rem; top: 4.253333rem; background: url(../images/c29.png); background-size: 100% 100%;}
.card30{ left: 84.373333rem; top: 1.04rem; background: url(../images/c30.png); background-size: 100% 100%;}
.card31{ left: 88.466666rem; top: 1.04rem; background: url(../images/c31.png); background-size: 100% 100%;}
.card32{ left: 88.466666rem; top: 4.253333rem; background: url(../images/c32.png); background-size: 100% 100%;}
.card33{ left: 93.493333rem; top: 1.04rem; background: url(../images/c33.png); background-size: 100% 100%;}
.card34{ left: 97.613333rem; top: 1.04rem; background: url(../images/c34.png); background-size: 100% 100%;}
.card35{ left: 97.613333rem; top: 4.253333rem; background: url(../images/c35.png); background-size: 100% 100%;}
.card36{ left: 102.64rem; top: 1.04rem; background: url(../images/c36.png); background-size: 100% 100%;}
.card37{ left: 106.773333rem; top: 1.04rem; background: url(../images/c37.png); background-size: 100% 100%;}
.card38{ left: 106.773333rem; top: 4.253333rem; background: url(../images/c38.png); background-size: 100% 100%;}
.card39{ left: 111.786666rem; top: 1.04rem; background: url(../images/c39.png); background-size: 100% 100%;}
.card40{ left: 115.88rem; top: 1.04rem; background: url(../images/c40.png); background-size: 100% 100%;}
.card41{ left: 120rem; top: 1.04rem; background: url(../images/c41.png); background-size: 100% 100%;}


.endPic{width: 16.733333rem; height: 7.2rem; position: absolute; right: 1.173333rem; top: 1.586666rem;}
.endPic .bg{width: 100%; height: 100%; left: 0; top: 0; position: absolute; background: url(../images/endPic.png); background-size: 16.733333rem 7.2rem;}

.endTxt{width: 8.293333rem; height: 2.093333rem; position: absolute; right: 5.6rem; top: 5.066666rem;}
.endTxt .bg{width: 100%; height: 100%; left: 0; top: 0; position: absolute; background: url(../images/endTxt.png); background-size: 8.293333rem 2.093333rem;}

.playBtn{width: 1.893333rem; height: 1.893333rem; position: absolute; right: 8.786666rem; top: 2.186666rem;}
.playBtn .bg{width: 100%; height: 100%; left: 0; top: 0; position: absolute; background: url(../images/playBtn.png); background-size: 1.893333rem 1.893333rem;}

.giftBox1{width: 17.026666rem; height: 7.346666rem; position: absolute; left: 124.306666rem;}
.giftBox2{width: 51.946666rem; height: 7.346666rem; position: absolute; left: 142.24rem;}
.gift1Title{width: 2.386666rem; height: 0.466666rem; position: absolute; left: 0.333333rem; top: 1.133333rem; background: url(../images/title2.png); background-size: 100% 100%;}
.gift1Note{width: 16.586666rem; height: 0.466666rem; position: absolute; left: 0.333333rem; top: 1.813333rem; line-height: 0.466666rem; font-size: 0.293333rem; text-align: left;}
.giftBox1 .gift1{width: 3.333333rem; height: 4.453333rem; left: 1.146666rem; top: 2.893333rem; position: absolute;}
.giftBox1 .gift2{width: 3.333333rem; height: 4.453333rem; left: 4.986666rem; top: 2.893333rem; position: absolute;}
.giftBox1 .gift3{width: 3.333333rem; height: 4.453333rem; left: 8.76rem; top: 2.893333rem; position: absolute;}
.giftBox1 .gift4{width: 3.333333rem; height: 4.453333rem; left: 12.613333rem; top: 2.893333rem; position: absolute;}
.giftBox1 .gift img{width: 2.8rem; margin: 0 0.266666rem;}
.giftBox1 .gift p{font-size: 0.266666rem; line-height: 0.666666rem;text-align: center;}

.gift2Title{width: 6.226666rem; height: 0.48rem; position: absolute; left: 0.333333rem; top: 1.133333rem; background: url(../images/title3.png); background-size: 100% 100%;}
.gift2Note{width: 48.586666rem; height: 0.466666rem; position: absolute; left: 0.333333rem; top: 1.813333rem; line-height: 0.466666rem; font-size: 0.293333rem; text-align: left;}
.giftBox2 .gift1{width: 6.613333rem; height: 3.986666rem; left: 0.066666rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift2{width: 6.613333rem; height: 3.986666rem; left: 7.013333rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift3{width: 6.613333rem; height: 3.986666rem; left: 13.946666rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift4{width: 6.613333rem; height: 3.986666rem; left: 20.893333rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift5{width: 6.613333rem; height: 3.986666rem; left: 27.84rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift6{width: 6.613333rem; height: 3.986666rem; left: 34.773333rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift7{width: 6.613333rem; height: 3.986666rem; left: 41.72rem; top: 3.306666rem; position: absolute;}
.giftBox2 .gift img{width: 6.613333rem; height: 3.986666rem;}
.gift2Note2{width: 3.6rem; height: 0.466666rem; position: absolute; right: 0; bottom: 1.72rem; line-height: 0.466666rem; font-size: 0.293333rem; text-align: right;}


/* popups */

.md-modal {position: fixed;top: 50%;left: 50%; height: auto;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;background: rgba(0,0,0,0.6);-webkit-transition: all 0.3s;}
.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{width: 15.066666rem; height: 7.16rem; background: #007AFF;  text-align: left;background:url(../images/popBg.png) repeat-x; background-size: 100% 100%;}
.popUp:before{content: ''; position: absolute; top: 0; left: -0.533333rem;width:0.533333rem; height: 7.16rem; background:url(../images/popBorderLeft.png); background-size: 100% 100%;}
.popUp:after{content: ''; position: absolute; top: 0; right: -0.533333rem;width:0.533333rem; height: 7.16rem; background:url(../images/popBorderRight.png); background-size: 100% 100%;}
.popUp .md-close{ width: 0.786666rem; height: 0.786666rem; position: absolute; display: block; right: -0.04rem; top:0.373333rem; background:url(../images/closeBtn.png); background-size: 100% 100%;z-index: 1;}
.popUp .popNormalTxt{width: 7.906666rem; height: 4.333333rem; position: absolute; right:0.226666rem ; bottom: 1.506666rem; text-align: center; font-size:0.306666rem; line-height: 0.746666rem;}
.popUp .takeCard{width: 2.32rem; height: 0.893333rem; position: absolute; right: 2.96rem; bottom: 0.613333rem; background:url(../images/takeCard.png) ; background-size: 100% 100%;}
.popUp .cardType1{ width: 5.933333rem; height: 3.746666rem; position: absolute; left: 0.386666rem; top: 1.72rem;}
.popUp .cardType2{ width: 3.746666rem; height: 5.933333rem; position: absolute; left: 1.786666rem; top: 0.64rem;}

.popUpTip{width: 5.586666rem; height: 4.4rem;   text-align: center;background:url(../images/popBg2.png); background-size: 5.586666rem 4.4rem;-webkit-transition: all 0.1s;}
.popUpTip p{font-size: 0.42rem; line-height: 0.666666rem; text-align: center; margin-top: 1.6rem; float: left; width: 100%;}

.popUpVideo{width: 100%; height: 100%;}

.cBox{width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none;}


.tipBox{width: 4.28rem; height: 1.32rem; position: absolute; left: 6.133333rem; top: 3.36rem; -webkit-transform: translateY(-0.666666rem); opacity: 0; -webkit-transition: all 300ms; pointer-events: none;}
.tipBox .hand{width: 1.093333rem; height: 1.306666rem; position: absolute; left: 0; top: 0; background: url(../images/tipHand.png); background-size: 100% 100%; -webkit-transform-origin: 50% 100%;-webkit-animation: handClick 1000ms infinite;}
.tipBox p{ font-size: 0.293333rem; padding: 0.04rem 0.213333rem; border:0.053333rem solid #373737; position: absolute; border-radius: 0.24rem; background: #FFF; left: 1.1rem; top: 1rem;white-space:nowrap;}


.tipBox2{width: 4.28rem; height: 1.32rem; position: fixed; right: 0; bottom: 1.2rem; z-index: 1000; -webkit-transform: translateY(-0.666666rem); opacity: 0; -webkit-transition: all 300ms; pointer-events: none;}
.tipBox2 .hand{width: 1.093333rem; height: 1.306666rem; position: absolute; left: 0; top: 0; background: url(../images/tipHand.png); background-size: 100% 100%; -webkit-animation: handSwipe 3000ms infinite;}
.tipBox2 p{ font-size: 0.293333rem; padding: 0.04rem 0.213333rem; border:0.053333rem solid #373737; position: absolute; border-radius: 0.24rem; background: #FFF; top: 1.3rem;white-space:nowrap;}

.tipBox.show,.tipBox2.show{opacity: 1; -webkit-transform: translateY(0);}
@-webkit-keyframes handSwipe{
	0%{left: 0;}
	10%{left: 2rem;}
	100%{left: 0rem;}
}
@-webkit-keyframes handClick{
	0%{-webkit-transform: scaleY(1);}
	10%{-webkit-transform: scaleY(0.8);}
	20%{-webkit-transform: scaleY(1);}
	30%{-webkit-transform: scaleY(0.8);}
	40%{-webkit-transform: scaleY(1);}
}