* {margin: 0;padding: 0;}
a,div{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
html,body{margin: 0; padding: 0; width: 100%;   height: 100%; text-align: center; background: #fff;}
section{width: 750px; min-height: 1160px; max-height: 1212px; height: 100%; position: absolute; overflow: hidden; display: none;}
.logo{width: 323px; height: 38px; position: absolute; left: 28px; top: 20px; background: url(../images/logo.png); background-size: 100% 100%; z-index: 100;}
.musicBtn{width: 50px; height: 50px; display: block; position: absolute; right: 28px; bottom: 20px;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);}
}

.loadingSection{}
.loadingSection .per{position: absolute; left: 50%; width: 300px; margin-left: -150px; top: 43%; font-size: 30px;}   
.loadingSection .note{position: absolute; left: 50%; width: 300px; margin-left: -150px; top: 49%; font-size: 24px;}


.container{width:750px; height:100%; position:absolute;-webkit-perspective: 1500px;-webkit-transform-style: preserve-3d;-webkit-perspective-origin: 50% 20%;
	left: 50%; top: 0; margin-left: -375px; margin-top: 0; opacity: 0;
}
.arrawBox{width: 85px; height: 21px; position: absolute; left: 332px; bottom: 49px; opacity: 0;}
.arraw{ width: 85px; height: 21px; position: absolute;  background: url(../images/arraw.png); background-size: 100%;-webkit-animation: arrawUp 1000ms infinite;}
@-webkit-keyframes arrawUp{   
	0%{-webkit-transform: translateY(0px);}
	50%{-webkit-transform: translateY(-20px);}
	100%{-webkit-transform: translateY(0px);}
}
.show .arrawBox{-webkit-animation: fadeIn 1000ms forwards;}
.out .arrawBox{-webkit-animation: fadeOut 1000ms forwards;}
.skip{width: 108px; height: 38px; position: absolute; right:20px ; top: 22px; background: url(../images/skip.png); background-size: 100% 100%; z-index: 100;}
.card{ background: rgba(0,0,0,0);width:531px; height:335px; left: 50%; margin-left: -267px; top: 372px; position:absolute;-webkit-transform-style: preserve-3d;}
.corners{width:100px; height:100px; position:absolute;-webkit-transform-style: preserve-3d;  -webkit-transform: translateZ(0); -webkit-transform-origin: 100% 0;}
.corner{width:10px;height: 6px; position: absolute; background: rgba(61,63,69,1);  -webkit-transform-style: preserve-3d; transform-origin: 0% 0%;  -webkit-transform:rotateX(90deg) rotateY(0deg);}
.lb{width: 6px;height: 295px; top:20px;background: rgba(61,63,69,1); position: absolute; -webkit-transform-origin: 0 0; -webkit-transform: rotateY(-90deg) ;}
.rb{width: 6px;height: 295px; top:20px; right:0;background: rgba(61,63,69,1); position: absolute; -webkit-transform-origin: 100% 0; -webkit-transform: rotateY(90deg) ;}
.tb{height: 6px;width: 491px; top:0; left:20px;background: rgba(61,63,69,1); position: absolute; -webkit-transform-origin: 0 0; -webkit-transform: rotateX(90deg) ;}
.bb{height: 6px;width: 491px; bottom:0; left:20px;background: rgba(61,63,69,1); position: absolute; -webkit-transform-origin: 0 100%; -webkit-transform: rotateX(-90deg) ;}
.card_f{width:100%; height:100%; position: absolute; background: url(../images/card_f.png) no-repeat; background-size: 100% 100%; border-radius: 23px; border: 1px solid transparent; -webkit-transform: translateZ(6px) ; -webkit-transition: all 600ms ;}
.card_b{width:100%; height:100%; position: absolute; background: url(../images/card_b.png) no-repeat; background-size: 100% 100%; border-radius: 23px; border: 1px solid transparent; -webkit-transform: translateZ(0px) rotateY(180deg); -webkit-transition: all 600ms ;}
.card_c{width:100%; height:100%; position: absolute; background: url(../images/card_c.png) no-repeat; background-size: 100% 100%; border-radius: 23px; border: 1px solid transparent; -webkit-transform: translateZ(3px) ; -webkit-transition: all 600ms ;}
.card_border{width:100%; height:100%; position: absolute; -webkit-transform-style: preserve-3d;}
.sdBox{width: 300px; height:10px; position: absolute; top: 800px; left: 50%; margin-left: -150px;-webkit-transform-style: preserve-3d;}
.sd{width: 300px; height:10px; position: absolute;  -webkit-filter: blur(20px);-webkit-transition: all 1000ms ;
				background: rgba(0,0,0,0.1); background-size: 100% 100%;
			}
.open .card_f{-webkit-transform: translateZ(120px) ; opacity: 0.7;}
.open .card_b{-webkit-transform: translateZ(-120px) rotateY(180deg); opacity: 0.7;}
.open .card_c{-webkit-transform: translateZ(0px); opacity: 1;}
			
.open .sd1{-webkit-transform: translateY(120px) ; opacity: 0.7;}
.open .sd2{-webkit-transform: translateY(-120px); opacity: 0.7;}
			
.c_rt{right: 0;-webkit-transform:  scale(0.2);}
.c_lt{left: -100px;-webkit-transform:rotateY(180deg) translateZ(-6px)  scale(0.2);}
.c_rb{left: -100px; bottom:-100px;-webkit-transform:rotateX(180deg) rotateY(180deg) scale(0.2);}
.c_lb{right: 0; bottom:-100px;-webkit-transform:rotateX(180deg)  translateZ(-6px) scale(0.2);}
			
.degNote{left: 0; bottom:0; position: absolute; font-size: 30px;}


/* 参考点 */
.dot{width: 4px; height: 4px; border-radius: 2px;  position: absolute; }
.dot1{left:85px; top: 145px;}
.dot2{left:450px; top: 30px;}
.dot3{left:100px; bottom: 100px;}
.dot4{left:380px; top: 170px;}
.dot5{left:350px; bottom: 30px;}
.dot6{left:220px; top: 120px;}
.dot7{left:120px; top: 0px;}

.tips{width: 100%; height: 100%; position: relative;-webkit-transform: translateZ(500px);pointer-events: none;}
.tip{width: 10px; height: 10px;  position: absolute;opacity: 1;}
.tip.show{opacity: 1;}
.tip.show .tipText{opacity: 1;-webkit-transform: translateY(0px);}
.tip1 .tipText{ width: 329px; height: 347px; position: absolute; left: -5px; top: -9px; background: url(../images/tip1.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(20px); -webkit-transition: all 300ms;}
.tip2 .tipText{ width: 301px; height: 240px; position: absolute; left: -258px; top: -240px; background: url(../images/tip2.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(20px); -webkit-transition: all 300ms;}
.tip3 .tipText{ width: 351px; height: 332px; position: absolute; left: -180px; top: -10px; background: url(../images/tip3.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(-20px); -webkit-transition: all 300ms;}
.tip4 .tipText{ width: 453px; height: 373px; position: absolute; left: -255px; top: -367px; background: url(../images/tip4.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(-20px); -webkit-transition: all 300ms;}
.tip5 .tipText{ width: 351px; height: 253px; position: absolute; left: -104px; top: -6px; background: url(../images/tip5.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(-20px); -webkit-transition: all 300ms;}
.tip6 .tipText{ width: 343px; height: 325px; position: absolute; left: -337px; top: -318px; background: url(../images/tip6.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(-20px); -webkit-transition: all 300ms;}
.tip7 .tipText{ width: 374px; height: 222px; position: absolute; left: -234px; top: -216px; background: url(../images/tip7.png); background-size: 100% 100%; opacity: 0; -webkit-transform: translateY(-20px); -webkit-transition: all 300ms;}

.tip:after{content: ' '; width: 20px; height: 20px; position: absolute; left: -10px; top: -14px; border-radius: 10px; background:#0068B7; -webkit-animation: tipRay 1000ms infinite; display: none;}
.tip.show:after{display: block;}
@-webkit-keyframes tipRay{   
	0%{opacity: 0.5; -webkit-transform: scale(0.5);}
	100%{opacity: 0; -webkit-transform: scale(3);}
}

.nums{width: 42px; height: 23px; position: absolute; left: 302px; top: 137px;}
.nums .num{width: 14px; height: 23px; display: inline-block; float: left; background: url(../images/num.png); background-size: 140px 23px;}

.intro{}
.intro.out{-webkit-animation: fadeOut 300ms forwards; opacity: 1;}
.intro .introP1{width:750px; height: 297px; top:158px; position: absolute; background: url(../images/introP1.jpg); background-size: 100% 100%; opacity: 0;}
.intro .introP2{width:750px; height: 297px; top:455px; position: absolute; background: url(../images/introP2.jpg); background-size: 100% 100%; opacity: 0;}
.intro .introP3{width:750px; height: 297px; top:752px; position: absolute; background: url(../images/introP3.jpg); background-size: 100% 100%; opacity: 0;}
.intro .introP1Text{width: 254px; height: 125px; right:70px ; top: 91px; position: absolute;background: url(../images/introP1Text.png); background-size: 100% 100%; opacity: 0;}
.intro .introP2Text{width: 271px; height: 125px; left:58px ; top: 88px; position: absolute;background: url(../images/introP2Text.png); background-size: 100% 100%; opacity: 0;}
.intro .introP3Text{width: 237px; height: 125px; right:88px ; top: 86px; position: absolute;background: url(../images/introP3Text.png); background-size: 100% 100%; opacity: 0;}
.intro .splits{width: 750px; height: 891px; top: 158px; position: absolute; opacity: 0;}
.intro .split1{width: 575px; height: 715px;left: 0; top: 0; position: absolute; background: url(../images/split1.png); background-size: 100% 100%;opacity: 0;}
.intro .split2{width: 391px; height: 632px;left: 0; bottom: 0; position: absolute; background: url(../images/split2.png); background-size: 100% 100%;opacity: 0;}
.intro .split3{width: 134px; height: 263px;left:297px; bottom: 70px; position: absolute; background: url(../images/split3.png); background-size: 100% 100%;opacity: 0;}
.intro .split4{width: 344px; height: 197px;right:0; top: 0; position: absolute; background: url(../images/split4.png); background-size: 100% 100%;opacity: 0;}
.intro .split5{width: 178px; height: 199px;right:0; top: 65px; position: absolute; background: url(../images/split5.png); background-size: 100% 100%;opacity: 0;}
.intro .split6{width: 388px; height: 695px;right:0; bottom: 0; position: absolute; background: url(../images/split6.png); background-size: 100% 100%;opacity: 0;}
.show .introP1{ -webkit-animation: moveInLeft 600ms forwards;}
.show .introP1 .introP1Text{ -webkit-animation: moveInRight 600ms 300ms forwards;}
.show .introP2{ -webkit-animation: moveInRight 600ms 600ms forwards;}
.show .introP2 .introP2Text{ -webkit-animation: moveInLeft 600ms 900ms forwards;}
.show .introP3{ -webkit-animation: moveInLeft 600ms 1200ms forwards;}
.show .introP3 .introP3Text{ -webkit-animation: moveInRight 600ms 1500ms forwards;}
.show.splits{opacity: 1;}
.show .split2{-webkit-animation: fadeIn 300ms forwards;}
.show .split3{-webkit-animation: fadeIn 300ms 100ms forwards;}
.show .split6{-webkit-animation: fadeIn 300ms 200ms forwards;}
.show .split1{-webkit-animation: fadeIn 300ms 200ms forwards;}
.show .split5{-webkit-animation: fadeIn 300ms 300ms forwards;}
.show .split4{-webkit-animation: fadeIn 300ms 300ms forwards;}
.fall.splits{opacity: 1;}
.fall .split2{-webkit-animation: fall1 2000ms ease-in forwards; opacity: 1;}
.fall .split3{-webkit-animation: fall2 2000ms ease-in 300ms forwards; opacity: 1;}
.fall .split6{-webkit-animation: fall4 2000ms ease-in 500ms forwards; opacity: 1;}
.fall .split1{-webkit-animation: fall4 2000ms ease-in 700ms forwards; opacity: 1;}
.fall .split5{-webkit-animation: fall3 2000ms ease-in 900ms forwards; opacity: 1;}
.fall .split4{-webkit-animation: fall1 2000ms ease-in 1200ms forwards; opacity: 1;}
@-webkit-keyframes moveInLeft{
	0%{opacity: 0; -webkit-transform: translateX(-60px);}
	100%{opacity: 1; -webkit-transform: translateX(0);}
}
@-webkit-keyframes moveInRight{
	0%{opacity: 0; -webkit-transform: translateX(60px);}
	100%{opacity: 1; -webkit-transform: translateX(0);}
}
@-webkit-keyframes fadeIn{
	0%{opacity: 0; }
	100%{opacity: 1; }
}
@-webkit-keyframes fadeOut{
	0%{opacity: 1; }
	100%{opacity: 0; }
}
@-webkit-keyframes fall1{
	0%{-webkit-transform: translateY(0px) rotate(0);}
	100%{-webkit-transform: translateY(1860px) rotate(50deg);}
}
@-webkit-keyframes fall2{
	0%{-webkit-transform: translateY(0px) rotate(0);}
	100%{-webkit-transform: translateY(1860px) rotate(-50deg);}
}
@-webkit-keyframes fall3{
	0%{-webkit-transform: translateY(0px) rotate(0);}
	100%{-webkit-transform: translateY(1860px) rotate(180deg);}
}
@-webkit-keyframes fall4{
	0%{-webkit-transform: translateY(0px) rotate(0);}
	100%{-webkit-transform: translateY(1860px) rotate(-30deg);}
}

.intro2{}
.intro2 .intro2T1{ width: 183px; height: 44px;left: 87px ; top: 204px; position: absolute; background: url(../images/intro2T1.png); background-size: 100% 100%; opacity: 0;}
.intro2 .intro2T2{ width: 259px; height: 63px;left: 88px ; top: 273px; position: absolute; background: url(../images/intro2T2.png); background-size: 100% 100%; opacity: 0;}
.intro2 .intro2T3{ width: 276px; height: 46px;left: 88px ; top: 363px; position: absolute; background: url(../images/intro2T3.png); background-size: 100% 100%; opacity: 0;}
.intro2 .intro2T4{ width: 259px; height: 64px;left: 89px ; top: 433px; position: absolute; background: url(../images/intro2T4.png); background-size: 100% 100%; opacity: 0;}
.intro2 .intro2T5{ width: 575px; height: 28px;left: 87px ; top: 561px; position: absolute; background: url(../images/intro2T5.png); background-size: 100% 100%; opacity: 0;}
.intro2 .intro2Sharp{ width: 560px; height: 283px;left: 113px ; top: 698px; position: absolute; background-size: 100% 100%;opacity: 0;-webkit-perspective: 500px;-webkit-perspective-origin:50% 50%;-webkit-transform-style: preserve-3d;}
.intro2 .intro2Sharp .tip{ width: 347px; height: 168px;left: -26px ; top: -87px; position: absolute; background: url(../images/intro2T6.png); background-size: 100% 100%;opacity: 0;}
.intro2 .intro2Sharp .wheelBox{width: 279px; height: 279px;right: 0px ; bottom: 0px; position: absolute; opacity: 0;}
.intro2 .intro2Sharp .wheel{ width: 279px; height: 279px;right: 0px ; bottom: 0px; position: absolute; background: url(../images/intro2SharpBorder.png); background-size: 100% 100%;-webkit-animation: rollCW 5000ms infinite;}
.intro2 .intro2Sharp .wheelInnerBox{width: 261px; height: 261px;right: 9px ; bottom: 9px; position: absolute; opacity: 0;}
.intro2 .intro2Sharp .wheelInner{ width: 261px; height: 261px;right: 0px ; bottom: 0px; position: absolute; background: url(../images/intro2SharpInner.png); background-size: 100% 100%;-webkit-animation: rollCW 5000ms 1000ms infinite;}
.intro2 .intro2Sharp .wheelInnerBox2{width: 261px; height: 261px;right: 9px ; bottom: 9px; position: absolute; opacity: 0;}
.intro2 .intro2Sharp .wheelInner2{ width: 261px; height: 261px;right: 0px ; bottom: 0px; position: absolute; background: url(../images/intro2SharpInner.png); background-size: 100% 100%; opacity:0.1;-webkit-animation: rollCCW 8000ms linear 1000ms infinite;}
.intro2 .intro2Sharp .wheelText{ width: 90px; height: 71px;right: 95px ; bottom: 104px; position: absolute; background: url(../images/wheelText.png); background-size: 100% 100%;opacity: 0;}

.show .intro2T1{-webkit-animation: fadeUpIn 500ms  forwards;}
.show .intro2T2{-webkit-animation: fadeUpIn 500ms 300ms  forwards;}
.show .intro2T3{-webkit-animation: fadeUpIn 500ms 600ms  forwards;}
.show .intro2T4{-webkit-animation: fadeUpIn 500ms 900ms forwards;}
.show .intro2T5{-webkit-animation: fadeUpIn 500ms 1200ms  forwards;}
.show .intro2Sharp{-webkit-animation: fadeUpIn 500ms 1500ms  forwards;}
.show .intro2Sharp .wheelBox{-webkit-animation: wheelIn 1000ms 1500ms  forwards;}
.show .intro2Sharp .wheelInnerBox{-webkit-animation: wheelIn 1000ms 2000ms  forwards;}
.show .intro2Sharp .wheelInnerBox2{-webkit-animation: wheelIn2 1000ms 2000ms  forwards;}
.show .intro2Sharp .tip{-webkit-animation: fadeUpIn 500ms 2000ms  forwards;}
.show .intro2Sharp .wheelText{-webkit-animation: fadeUpIn 500ms 2000ms  forwards;}

.out .intro2T1{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}
.out .intro2T2{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}
.out .intro2T3{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}
.out .intro2T4{-webkit-animation: fadeOut 500ms forwards; opacity: 1;}
.out .intro2T5{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}
.out .intro2Sharp{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}
.out .intro2Sharp .wheelBox{-webkit-animation: fadeOut 1000ms  forwards; opacity: 1;}
.out .intro2Sharp .wheelInnerBox{-webkit-animation: fadeOut 1000ms  forwards; opacity: 1;}
.out .intro2Sharp .wheelInnerBox2{-webkit-animation: fadeOut 1000ms  forwards; opacity: 1;}
.out .intro2Sharp .tip{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}
.out .intro2Sharp .wheelText{-webkit-animation: fadeOut 500ms  forwards; opacity: 1;}


@-webkit-keyframes fadeUpIn{
	0%{opacity: 0; -webkit-transform: translateY(20px);}
	100%{opacity: 1; -webkit-transform: translateY(0px);}
}
@-webkit-keyframes rollCW{
	0%{-webkit-transform: rotate(0);}
	20%{-webkit-transform: rotate(36deg);}
	40%{-webkit-transform: rotate(-12deg);}
	60%{-webkit-transform: rotate(90deg);}
	80%{-webkit-transform: rotate(-50deg);}
	100%{-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes rollCCW{
	0%{-webkit-transform:rotateX(30deg)  rotateZ(0);}
	50%{-webkit-transform:rotateX(85deg) rotateZ(180deg);;}
	100%{-webkit-transform:rotateX(30deg) rotateZ(360deg);}
}
@-webkit-keyframes wheelIn{
	0%{opacity: 0; -webkit-transform: rotateY(90deg) rotateX(90deg);}
	100%{opacity: 1; -webkit-transform: rotateY(0deg) rotateX(0deg);}
}
@-webkit-keyframes wheelIn2{
	0%{opacity: 0; -webkit-transform: rotateY(90deg) rotateX(90deg);}
	100%{opacity: 1; -webkit-transform: rotateY(0deg) rotateX(40deg);}
}
@-webkit-keyframes roll{
	0%{-webkit-mask-position:300px 0% ;}
	50%{-webkit-mask-position:300px 50% ;}
	100%{-webkit-mask-position:300px 0% ;}
}
@-webkit-keyframes rollc{
	0%{top:-9px;}
	50%{top:91px}
	100%{top:-9px;}
}
.intro3{}
.intro3 .intro3T1{ width: 436px; height: 64px;left: 156px ; top: 176px; position: absolute; background: url(../images/intro3T1.png); background-size: 100% 100%; opacity: 0;}
.intro3 .intro3T2{ width: 436px; height: 64px;left: 157px ; top: 265px; position: absolute; background: url(../images/intro3T2.png); background-size: 100% 100%; opacity: 0;}
.intro3 .intro3T3{ width: 506px; height: 290px;left: 122px ; top: 789px; position: absolute; background: url(../images/intro3T3.png); background-size: 100% 100%; opacity: 0;}
.intro3 .intro3card{ width: 502px; height: 318px;left: 123px ; top: 385px; position: absolute; background: url(../images/intro3card.png); background-size: 100% 100%; opacity: 0;}
.intro3 .intro3bigBox{ width: 626px; height: 398px;left: 39px ; top: 349px; position: absolute; opacity: 0; }
/*
.intro3 .intro3bigcard{ width: 626px; height: 398px; position: absolute;
	-webkit-mask: url(../images/mask.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position:300px 0% ;-webkit-animation: roll 2000ms infinite;
}
.intro3 .intro3bigcard img{width: 100%; height: 100%;}
.intro3 .intro3bigBox .biger{width: 313px; height: 349px; left: 291px; top: -9px; position: absolute;background: url(../images/biger.png); background-size: 100% 100%;-webkit-animation: rollc 2000ms infinite;}
*/
.intro3 .intro3bigcard{ width: 626px; height: 398px; position: absolute;
	-webkit-mask: url(../images/mask.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position:100px 0 ;
}
.intro3 .intro3bigcard img{width: 100%; height: 100%;}
.intro3 .intro3bigBox .biger{width: 313px; height: 349px; left: 100px; top: 0; position: absolute;background: url(../images/biger.png); background-size: 100% 100%;}




.show .intro3T1{-webkit-animation: fadeUpIn 500ms  forwards;}
.show .intro3T2{-webkit-animation: fadeUpIn 500ms 300ms  forwards;}
.show .intro3T3{-webkit-animation: fadeUpIn 500ms 600ms  forwards;}
.show .intro3card{-webkit-animation: fadeUpIn 500ms 900ms forwards;}
.show .intro3bigBox{-webkit-animation: fadeUpIn 500ms 900ms forwards;}
.out .intro3T1{-webkit-animation: fadeOut 500ms forwards; opacity: 1;}
.out .intro3T2{-webkit-animation: fadeOut 500ms forwards; opacity: 1;}
.out .intro3T3{-webkit-animation: fadeOut 500ms forwards; opacity: 1;}
.out .intro3card{-webkit-animation: fadeOut 500ms forwards; opacity: 1;}
.out .intro3bigBox{-webkit-animation: fadeOut 500ms forwards; opacity: 1;}
.mainSec{}
.mainSec .mainT1{width: 412px; height: 88px;left: 170px ; top: 124px; position: absolute; background: url(../images/homeT1.png); background-size: 100% 100%; opacity: 0;}
.mainSec .mainT2{width: 575px; height: 63px;left: 89px ; top: 246px; position: absolute; background: url(../images/homeT2.png); background-size: 100% 100%; opacity: 0;}
.mainSec .mainTip{width: 397px; height: 233px;left: 176px ; top: 761px; position: absolute; background: url(../images/homeTipBg.png); background-size: 100% 100%; opacity: 0;}
.mainSec .mainTip .tipHand{width: 185px; height: 75px;left:108px ; top: 0px; position: absolute; background: url(../images/tipHand.png); background-size: 100% 100%;-webkit-animation: handShake 1600ms linear infinite;}
.mainSec .mainBtn1{width: 191px; height: 72px;left: 47px ; top: 1029px; position: absolute; background: url(../images/homeBtn1.png); background-size: 100% 100%; opacity: 0;}
.mainSec .mainBtn2{width: 191px; height: 72px;left: 280px ; top: 1029px; position: absolute; background: url(../images/homeBtn2.png); background-size: 100% 100%; opacity: 0;}
.mainSec .mainBtn3{width: 191px; height: 72px;left: 512px ; top: 1029px; position: absolute; background: url(../images/homeBtn3.png); background-size: 100% 100%; opacity: 0;}
.show .container{-webkit-animation: fadeIn 2000ms forwards;}
.show .card{-webkit-animation: showCard 1000ms;}
.show .mainT1{-webkit-animation: fadeUpIn 500ms  forwards;}
.show .mainT2{-webkit-animation: fadeUpIn 500ms 300ms  forwards;}
.show .mainTip{-webkit-animation: fadeUpIn 500ms 600ms  forwards;}
.show .mainBtn1{-webkit-animation: fadeUpIn 500ms 900ms forwards;}
.show .mainBtn2{-webkit-animation: fadeUpIn 500ms 1200ms forwards;}
.show .mainBtn3{-webkit-animation: fadeUpIn 500ms 1500ms forwards;}

.show.hideTip .mainT1{-webkit-animation: fadeOut 300ms  forwards; opacity: 1;}
.show.hideTip .mainT2{-webkit-animation: fadeOut 300ms 300ms  forwards; opacity: 1;}
.show.hideTip .mainTip{-webkit-animation: fadeOut 300ms 600ms  forwards; opacity: 1;}

@-webkit-keyframes handShake{
	0%{left:108px;}
	25%{left: 128px;}
	75%{left: 88px;}
	100%{left: 108px;}
}
@-webkit-keyframes showCard{
	0%{-webkit-transform: rotateY(90deg);}
	100%{-webkit-transform:  rotateY(0deg);}
}


/* popups */

.md-modal {position: fixed;top: 50%;left: 50%;max-width: 750px;min-width: 450px;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;border-radius: 20px;border: 1px solid #0090FF; box-shadow: 0 0 0.2rem rgba(0,0,0,1); margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%); opacity: 0; }
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;-webkit-transition: all 0.3s;}


.popUp{background: #fffefe; width: 480px; height: 790px; padding: 70px;  text-align: center;}
.popUp .md-close{ width: 50px; height: 50px; position: absolute; display: block; right: 18px; top:18px; background:url(../images/closeBtn.png); background-size: 100% 100%;z-index: 1;}
.popUp .popUpTitle{line-height: 50px; padding: 40px 0; text-align: center; position: relative; font-size: 48px; font-weight: bold; color: #000;}
.popNormalTxt{font-size: 28px;color: #6e6e6e; line-height: 42px;}
.popLeftTxt{font-size: 28px;color: #6e6e6e; line-height: 42px; text-align: left;}
.blueTxt{color:#0069C7;}
.popLine{width: 100%; border-bottom:1px solid #6E6E6E; margin: 30px auto;}
.popBtn1{width: 300px; height: 72px; background: url(../images/popBtn1.png); background-size: 100% 100%; margin: 30px auto;}
.popBtn2{width: 300px; height: 72px; background: url(../images/popBtn2.png); background-size: 100% 100%; margin: 30px auto;}
.popBtn3{width: 300px; height: 72px; background: url(../images/popBtn3.png); background-size: 100% 100%; margin: 30px auto; margin-top: 180px;}