* { margin: 0; padding: 0;}
html,body{height:100%; width: 100%; text-align: center;background:url(../images/bg.jpg) bottom; background-size:100% 100% ;}
a,div{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none; color: #FFF;}
Section{overflow: hidden; min-height: 660px;height: 100%;  width: 414px; position: absolute; }


#loadSection{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d;}
#loadSection .loadingT1{width: 40px; height: 45px; position: absolute; top: 206px; left: 177px; background: url(../images/loadingT1.png); background-size: 100% 100%;-webkit-animation: loadingT1Ani  1000ms  forwards;opacity: 0;}
#loadSection .loadingT2{width: 40px; height: 45px; position: absolute; top: 209px; left: 216px; background: url(../images/loadingT2.png); background-size: 100% 100%;-webkit-animation: loadingT2Ani  1000ms  forwards;opacity: 0;}
#loadSection .loadingT3{width: 67px; height: 93px; position: absolute; top: 245px; left: 136px; background: url(../images/loadingT3.png); background-size: 100% 100%;-webkit-animation: loadingT3Ani  1000ms  forwards;opacity: 0;}
#loadSection .loadingT4{width: 95px; height: 92px; position: absolute; top: 248px; left: 194px; background: url(../images/loadingT4.png); background-size: 100% 100%;-webkit-animation: loadingT4Ani  1000ms  forwards;opacity: 0;}
.loadingPre{width:66px; height:66px; position: absolute; left: 50%; top: 332px; margin-left: -33px; font-size: 24px; font-style: italic; line-height:66px;color: #000; background: #FFF697; border-radius: 33px;-webkit-animation: boxTipAni3  1000ms  forwards; opacity: 0;}
.logo{width: 140px; height: 16px; position: absolute; left: 50%; bottom: 26px; margin-left: -70px; background: url(../images/logo.png); background-size: 100% 100%;}
.solgen{width: 79px;height: 117px; position: absolute; left: 8px;top: 18px; background: url(../images/2017.png); background-size: 100% 100%;opacity: 0; z-index: 10; }
.solgen2{width: 34px;height: 110px; position: absolute; right: 13px;top: 98px; background: url(../images/2017-2.png); background-size: 100% 100%;opacity: 0; z-index: 10;}
.musicBtn{width: 50px; height: 51px; display: block; position: absolute; right: 0px; top: 20px;background:url(../images/soundBtn.png) center center no-repeat; display: none; z-index: 100; pointer-events: auto;}
.shake{-webkit-animation: shakeAni 1000ms linear infinite;}
@-webkit-keyframes shakeAni{
	25%{transform:rotate(-5deg);}
	75%{transform:rotate(5deg);}
}

.in .solgen{-webkit-animation: boxss1Ani  800ms  forwards;}
.in .solgen2{-webkit-animation: boxss2Ani  800ms 1s  forwards;}

.out .solgen{-webkit-animation: fadeOutAni  800ms  forwards;}
.out .solgen2{-webkit-animation: fadeOutAni  800ms  forwards;}

.D3{ min-height: 660px;height: 100%;  width: 414px; position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d; z-index: 100; pointer-events: none;}
.paperBox{pointer-events: auto;}
.paperBox .handBoxs{width: 100% ; height: 100%; position: absolute; top:0; left: 0; overflow: hidden;}
.paperBox .paperHand{width: 26px; height: 26px;position: absolute; right: 20px; bottom: 10px; background: url(../images/paperHand.png); background-size: 100% 100%; transform-origin: bottom right; -webkit-animation: paperHand  800ms infinite;}
@-webkit-keyframes paperHand{
	0%{transform:scale(1);}
	10%{transform:scale(0.9);}
	20%{transform:scale(1);}
	100%{transform:scale(1);}
}
#homeSection{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d;}
#homeSection .hsT1{width: 111px; height: 130px; position: absolute; left: 110px; top: 32px; background: url(../images/hsT1.png); background-size: 100% 100%;  opacity: 0;}
#homeSection .hsT2{width: 106px; height: 128px; position: absolute; right: 83px; top: 40px; background: url(../images/hsT2.png); background-size: 100% 100%;  opacity: 0;}
#homeSection .hsT3{width: 193px; height: 271px; position: absolute; left: -10px; top: 146px; background: url(../images/hsT3.png); background-size: 100% 100%; opacity: 0;}
#homeSection .hsT4{width: 278px; height: 270px; position: absolute; right: -25px; top: 156px; background: url(../images/hsT4.png); background-size: 100% 100%; opacity: 0;}
#homeSection .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/hsBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#homeSection .hsTip{width: 306px; height: 149px; position: absolute; left: 49px; bottom: 124px; background: url(../images/tip.gif); background-size: 100% 100%; z-index: 10; opacity: 0;}
#homeSection.in{z-index: 1;}

#homeSection.in .hsT1{-webkit-animation: boxT1Ani  1000ms  forwards;opacity: 0;}
#homeSection.in .hsT2{-webkit-animation: boxT2Ani  1000ms 200ms  forwards;opacity: 0;}
#homeSection.in .hsT3{-webkit-animation: boxT3Ani  1000ms 400ms  forwards;opacity: 0;}
#homeSection.in .hsT4{-webkit-animation: boxT4Ani  1000ms 600ms  forwards;opacity: 0;}
#homeSection.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#homeSection.in .hsTip{-webkit-animation: boxTipAni2  1000ms 1200ms  forwards; opacity: 0;}

#homeSection.out{z-index: -1;}
#homeSection.out .hsT1{-webkit-animation: boxss1out  1000ms  forwards;opacity: 1;}
#homeSection.out .hsT2{-webkit-animation: boxOut1  1000ms 200ms  forwards;opacity: 1;}
#homeSection.out .hsT3{-webkit-animation: boxOut2  1000ms 400ms  forwards;opacity: 1;}
#homeSection.out .hsT4{-webkit-animation: boxOut3  1000ms 600ms  forwards;opacity: 1;}
#homeSection.out .hsBtn{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1;}
#homeSection.out .hsTip{-webkit-animation: boxOut3  800ms   forwards;opacity: 1; }


#s1Section{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d; }
#s1Section .s1T1{width: 231px; height: 221px; position: absolute; left: -23px; top: 0px; background: url(../images/s1T1.png); background-size: 100% 100%;opacity: 0;}
#s1Section .s1T2{width: 196px; height: 221px; position: absolute; right: 45px; top: -13px; background: url(../images/s1T2.png); background-size: 100% 100%;opacity: 0;}
#s1Section .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/moreBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#s1Section .paperBox{width: 1px; height: 89px; position: absolute; left: 71px; bottom: 109px; background: url(../images/s1PaperBg.png); background-size: 277px 100%; opacity: 0;}
#s1Section .paperBox .paperLeft{width: 18px; height: 107px; position: absolute; left: -16px; top: -7px; background: url(../images/s6PaperLeft.png); background-size: 100% 100%;}
#s1Section .paperBox .paperRight{width: 22px; height: 107px; position: absolute; right: -19px; top: -7px; background: url(../images/s6PaperRight.png); background-size: 100% 100%;}
#s1Section .handBox{width: 103px; height: 31px; position: absolute; right: 63px; bottom: 226px; background: url(../images/s1hand.png); background-size: 100% 100%;opacity: 0;}
.bowlGround{position: absolute; width: 100%;height: 100%;opacity: 0; top: 0; left: 0;}
.bowlBox{width: 120px; height: 65px; position: absolute; background: url(../images/bowlShadow.png) bottom no-repeat; background-size:100% auto;}
.bowlBox .bowl{width: 109px; height: 58px; position: absolute; top:0; left: 6px; background: url(../images/bowl.png); background-size:100% 100%;}
#bowl1{left: 24px; bottom: 293px;}
#bowl2{left: 146px; bottom: 293px;}
#bowl3{left: 269px; bottom: 293px;}
.chicken{width: 68px;height: 94px; position:absolute; bottom: 0px; left: 25px;background: url(../images/chicken.png); background-size: 100% 100%; opacity: 0;}
.hbBox{width: 135px; height: 141px; position: absolute; top: -38px; left: -7px; opacity: 0;}
.hbBox .ray{position: absolute; background: url(../images/ray.png);background-size: 100% 100%; width: 135px; height: 141px; -webkit-animation:changeAni 2s linear infinite;}
@-webkit-keyframes changeAni{
	0%{transform:rotate(0deg);}
	50%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}
.hbBox .hb{ width: 61px; height: 110px; position: absolute; top: 35px; left: 35px; background: url(../images/hongbao.png); background-size: 100% 100%;}
#s1Section.in{z-index: 1;}
#s1Section.in .s1T1{-webkit-animation: boxT1Ani  1000ms  forwards;opacity: 0;}
#s1Section.in .s1T2{-webkit-animation: boxT3Ani  1000ms 300ms  forwards;opacity: 0;}
#s1Section.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#s1Section.in .paperBox{-webkit-animation: paperOpenAni  800ms 500ms  forwards;opacity: 0;}
#s1Section.in .bowlGround{-webkit-animation: fadeInAni  800ms 500ms  forwards; opacity: 0;}
#s1Section.out{z-index: -1;}
#s1Section.out .s1T1{-webkit-animation: boxOut1  1000ms  forwards;opacity: 1;}
#s1Section.out .s1T2{-webkit-animation: boxOut2  1000ms 300ms  forwards;opacity: 1;}
#s1Section.out .hsBtn{-webkit-animation: boxOut3  800ms 500ms  forwards;opacity: 1;}
#s1Section.out .paperBox{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1; width: 277px;}
#s1Section.out .bowlGround{-webkit-animation: fadeOutAni  800ms 500ms  forwards; opacity: 1;}


#s2Section{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d; }
#s2Section .s2T1{width: 230px; height: 291px; position: absolute; left: 0px; top: -9px; background: url(../images/s2T1.png); background-size: 100% 100%;opacity: 0;}
#s2Section .s2T2{width: 164px; height: 179px; position: absolute; right: 61px; top: 2px; background: url(../images/s2T2.png); background-size: 100% 100%;opacity: 0;}
#s2Section .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/moreBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#s2Section .paperBox{width: 1px; height: 89px; position: absolute; left: 71px; bottom: 109px; background: url(../images/s2PaperBg.png); background-size: 277px 100%; opacity: 0;}
#s2Section .paperBox .paperLeft{width: 18px; height: 107px; position: absolute; left: -16px; top: -7px; background: url(../images/s6PaperLeft.png); background-size: 100% 100%;}
#s2Section .paperBox .paperRight{width: 22px; height: 107px; position: absolute; right: -19px; top: -7px; background: url(../images/s6PaperRight.png); background-size: 100% 100%;}
#s2Section .handBox{width: 94px; height: 32px; position: absolute; right: 63px; bottom: 226px; background: url(../images/s2hand.png); background-size: 100% 100%;opacity: 0;}
#s2Section .whacMoleGround{position: absolute; width: 100%;height: 100%;opacity: 0; top: 0; left: 0;}
#s2Section .moleBox{width: 116px; height: 137px; margin-left: -58px; margin-top:-122px ; position: absolute; pointer-events: none;}
.moleShadow{width: 96px; height: 31px; position: absolute;bottom: 0; left: 0; background: url(../images/moleShadow.png); background-size: 100% 100%;}
.moleRange{width: 140px; height: 140px; position: absolute; left: -22px; bottom:0px; overflow: hidden; -webkit-mask: url(../images/moleMask.png);}
.mole{width: 80px; height: 80px; left: 30px; position: absolute; bottom: 0; background: url(../images/moles.png); background-size: 200% 100%; pointer-events: auto;}
#s2Section.in{z-index: 1;}
#s2Section.in .s2T1{-webkit-animation: boxT1Ani  1000ms  forwards;opacity: 0;}
#s2Section.in .s2T2{-webkit-animation: boxT3Ani  1000ms 300ms  forwards;opacity: 0;}
#s2Section.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#s2Section.in .paperBox{-webkit-animation: paperOpenAni  800ms 500ms  forwards;opacity: 0;}
#s2Section.in .whacMoleGround{-webkit-animation: fadeInAni  800ms 500ms  forwards; opacity: 0;}
#s2Section.out{z-index: -1;}
#s2Section.out .s2T1{-webkit-animation: boxOut1  1000ms  forwards;opacity: 1;}
#s2Section.out .s2T2{-webkit-animation: boxOut2  1000ms 300ms  forwards;opacity: 1;}
#s2Section.out .hsBtn{-webkit-animation: boxOut3  800ms 500ms  forwards;opacity: 1;}
#s2Section.out .paperBox{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1; width: 277px;}
#s2Section.out .whacMoleGround{-webkit-animation: fadeOutAni  800ms 500ms  forwards; opacity: 1;}


#s3Section{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d; }
#s3Section .s3T1{width: 193px; height: 271px; position: absolute; left: 8px; top: 0px; background: url(../images/s3T1.png); background-size: 100% 100%;opacity: 0;}
#s3Section .s3T2{width: 250px; height: 293px; position: absolute; right: 0px; top: -24px; background: url(../images/s3T2.png); background-size: 100% 100%;opacity: 0;}
#s3Section .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/moreBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#s3Section .paperBox{width: 1px; height: 89px; position: absolute; left: 71px; bottom: 109px; background: url(../images/s3PaperBg.png); background-size: 277px 100%; opacity: 0;}
#s3Section .paperBox .paperLeft{width: 18px; height: 107px; position: absolute; left: -16px; top: -7px; background: url(../images/s6PaperLeft.png); background-size: 100% 100%;}
#s3Section .paperBox .paperRight{width: 22px; height: 107px; position: absolute; right: -19px; top: -7px; background: url(../images/s6PaperRight.png); background-size: 100% 100%;}
#s3Section .handBox{width: 132px; height: 79px; position: absolute; left: 138px; bottom: 251px; background: url(../images/s3hand.png); background-size: 100% 100%;opacity: 0;}
#s3Section .handBox .hand{width: 26px; height: 32px; position: absolute; left: 0px; top: 0px; background: url(../images/s3hand2.png); background-size: 100% 100%;-webkit-animation: handShake3  1800ms infinite; }
#s3Section #gifGround{position: absolute; width: 100%;height: 100%;opacity: 0; top: 0; left: 0;}
#s3Section #gifGround .gift{width: 100px; height: 100px; position: absolute; background: url(../images/gifts.png); background-size: 1000% 100%;}

#s3Section.in{z-index: 1;}
#s3Section.in .s3T1{-webkit-animation: boxT6Ani  1000ms  forwards;opacity: 0;}
#s3Section.in .s3T2{-webkit-animation: boxT5Ani  1000ms 300ms  forwards;opacity: 0;}
#s3Section.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#s3Section.in .paperBox{-webkit-animation: paperOpenAni  800ms 500ms  forwards;opacity: 0;}
#s3Section.in #gifGround{-webkit-animation: fadeInAni  800ms 500ms  forwards; opacity: 0;}

#s3Section.out{z-index: -1;}
#s3Section.out .s3T1{-webkit-animation: boxOut1  1000ms  forwards;opacity: 1;}
#s3Section.out .s3T2{-webkit-animation: boxOut2  1000ms 300ms  forwards;opacity: 1;}
#s3Section.out .hsBtn{-webkit-animation: boxOut3  800ms 500ms  forwards;opacity: 1;}
#s3Section.out .paperBox{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1; width: 277px;}

#s3Section.out #gifGround{-webkit-animation: fadeOutAni  800ms  forwards;opacity: 1;}

#s4Section{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d; }
#s4Section .s4T1{width: 159px; height: 224px; position: absolute; left: -13px; top: -13px; background: url(../images/s4T1.png); background-size: 100% 100%;opacity: 0;}
#s4Section .s4T2{width: 155px; height: 175px; position: absolute; left: 86px; top: 91px; background: url(../images/s4T2.png); background-size: 100% 100%;opacity: 0;}
#s4Section .s4T3{width: 230px; height: 217px; position: absolute; left: 184px; top: 29px; background: url(../images/s4T3.png); background-size: 100% 100%;opacity: 0;}
#s4Section .handBox{width: 85px; height: 33px; position: absolute; right: 109px; bottom: 251px; background: url(../images/s4hand.png); background-size: 100% 100%;opacity: 0;}

#s4Section .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/moreBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#s4Section .paperBox{width: 1px; height: 89px; position: absolute; left: 71px; bottom: 109px; background: url(../images/s4PaperBg.png); background-size: 277px 100%; opacity: 0;}
#s4Section .paperBox .paperLeft{width: 18px; height: 107px; position: absolute; left: -16px; top: -7px; background: url(../images/s6PaperLeft.png); background-size: 100% 100%;}
#s4Section .paperBox .paperRight{width: 22px; height: 107px; position: absolute; right: -19px; top: -7px; background: url(../images/s6PaperRight.png); background-size: 100% 100%;}
#playGround{width: 100%; height: 100%; position: absolute; top: 0; left: 0;opacity: 0;}
#pcMan{width: 67px; height: 67px; position: absolute; top:50%; left: 50%;   z-index: 100;}/*  */
#pcMan .face{width: 67px; height: 67px; position: absolute;background: url(../images/pcMan2.png); background-size: 200% 100%;-webkit-animation: pcManAni 500ms infinite step-start;}
.eatFace{background: url(../images/pcMan.png) !important; background-size: 200% 100% !important;-webkit-animation: pcManAni 500ms infinite step-start;}
.jiaozi{width: 74px; height: 48px; background: url(../images/jiaozi.png); background-size: 100% 100%; position: absolute; }
.jiaozi2{width: 65px; height: 44px; left:5px; top:0; background: url(../images/jiaozi2.png); background-size: 100% 100%; position: absolute; -webkit-animation: jiaoziAni  300ms  forwards;}
#s4Section.in{z-index: 1;}
#s4Section.in .s4T1{-webkit-animation: boxT1Ani  1000ms  forwards;opacity: 0;}
#s4Section.in .s4T2{-webkit-animation: boxT2Ani  1000ms 300ms  forwards;opacity: 0;}
#s4Section.in .s4T3{-webkit-animation: boxT3Ani  1000ms 600ms  forwards;opacity: 0;}
#s4Section.in .paperBox{-webkit-animation: paperOpenAni  800ms 500ms  forwards;opacity: 0;}
#s4Section.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#s4Section.in #playGround{-webkit-animation: fadeInAni  800ms 500ms  forwards;opacity: 0;}

#s4Section.out{z-index: -1;}
#s4Section.out .s4T1{-webkit-animation: boxOut3  1000ms  forwards;opacity: 1;}
#s4Section.out .s4T2{-webkit-animation: boxOut2  1000ms 300ms  forwards;opacity: 1;}
#s4Section.out .s4T3{-webkit-animation: boxOut1  1000ms 600ms  forwards;opacity: 1;}
#s4Section.out .hsBtn{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1;}
#s4Section.out .paperBox{-webkit-animation: boxOut3  800ms   forwards;opacity: 1; width: 277px;}
#s4Section.out #playGround{-webkit-animation: fadeOutAni  800ms  forwards;opacity: 1;}

#s5Section{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d;}
#s5Section .s5T1{width: 254px; height: 265px; position: absolute; left: -46px; top: 25px; background: url(../images/s5T1.png); background-size: 100% 100%;opacity: 0;}
#s5Section .s5T2{width: 252px; height: 263px; position: absolute; right: -2px; top: -22px; background: url(../images/s5T2.png); background-size: 100% 100%;opacity: 0;}
#s5Section .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/moreBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#s5Section .paperBox{width: 1px; height: 89px; position: absolute; left: 71px; bottom: 109px; background: url(../images/s5PaperBg.png); background-size: 277px 100%; opacity: 0;}
#s5Section .paperBox .paperLeft{width: 18px; height: 107px; position: absolute; left: -16px; top: -7px; background: url(../images/s6PaperLeft.png); background-size: 100% 100%;}
#s5Section .paperBox .paperRight{width: 22px; height: 107px; position: absolute; right: -19px; top: -7px; background: url(../images/s6PaperRight.png); background-size: 100% 100%;}
#s5Section .handBox{width: 107px; height: 121px; position: absolute; right: 109px; bottom: 203px; background: url(../images/s5hand.png); background-size: 100% 100%;opacity: 0; }
#s5Section .handBox .hand{width: 21px; height: 34px; position: absolute; left: 2px; bottom: 0px; background: url(../images/s5hand2.png); background-size: 100% 100%;
-webkit-animation: handShake2  1200ms infinite; 
}

#s5Section.in{z-index: 1;}
#s5Section.in .s5T1{-webkit-animation: boxT5Ani  1000ms forwards;opacity: 0;}
#s5Section.in .s5T2{-webkit-animation: boxT6Ani  1000ms 300ms forwards;opacity: 0;}
#s5Section.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#s5Section.in .paperBox{-webkit-animation: paperOpenAni  800ms 500ms  forwards;opacity: 0;}


#s5Section.out{z-index: -1;}
#s5Section.out .s5T1{-webkit-animation: boxOut1  1000ms  forwards;opacity: 1;}
#s5Section.out .s5T2{-webkit-animation: boxOut2  1000ms 300ms  forwards;opacity: 1;}
#s5Section.out .hsBtn{-webkit-animation: boxOut3  800ms 500ms  forwards;opacity: 1;}
#s5Section.out .paperBox{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1; width: 277px;}


#s6Section{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d;}
#s6Section .s6T1{width: 224px; height: 234px; position: absolute; left: -18px; top: 0px; background: url(../images/s6T1.png); background-size: 100% 100%;opacity: 0;}
#s6Section .s6T2{width: 202px; height: 215px; position: absolute; right: 46px; top: -22px; background: url(../images/s6T2.png); background-size: 100% 100%;opacity: 0;}
#s6Section .eraserLayer{width: 321px; height: 319px; position: absolute; left: 47px; bottom: 196px; background: url(../images/fu.png); background-size: 100% 100%; opacity: 0;}
#s6Section .hsBtn{width: 198px; height: 58px; position: absolute; left: 109px; bottom: 63px; background: url(../images/moreBtn.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}
#s6Section .handBox{width: 121px; height: 46px; position: absolute; left: 138px; bottom: 248px; background: url(../images/s6hand.png); background-size: 100% 100%; opacity: 0; }
#s6Section .handBox .hand{width: 38px; height: 52px; position: absolute; left: 17px; top: 15px; background: url(../images/s6hand2.png); background-size: 100% 100%;
-webkit-animation: handShake1  1200ms infinite; 
}
#s6Section .paperBox{width: 1px; height: 89px; position: absolute; left: 71px; bottom: 109px; background: url(../images/s6PaperBg.png); background-size: 277px 100%; opacity: 0;}
#s6Section .paperBox .paperLeft{width: 18px; height: 107px; position: absolute; left: -16px; top: -7px; background: url(../images/s6PaperLeft.png); background-size: 100% 100%;}
#s6Section .paperBox .paperRight{width: 22px; height: 107px; position: absolute; right: -19px; top: -7px; background: url(../images/s6PaperRight.png); background-size: 100% 100%;}

#s6Section.in{z-index: 1;}
#s6Section.in .s6T1{-webkit-animation: boxT1Ani  1000ms  forwards;opacity: 0;}
#s6Section.in .s6T2{-webkit-animation: boxT4Ani  1000ms 300ms  forwards;opacity: 0;}
#s6Section.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}
#s6Section.in .paperBox{-webkit-animation: paperOpenAni  800ms 500ms  forwards;opacity: 0;}
#s6Section.in .eraserLayer{-webkit-animation: fadeInAni  500ms 1000ms  forwards;opacity: 0;}


#s6Section.out{z-index: -1;}
#s6Section.out .s6T1{-webkit-animation: boxOut1  1000ms  forwards;opacity: 1;}
#s6Section.out .s6T2{-webkit-animation: boxOut2  1000ms  forwards;opacity: 1;}
#s6Section.out .eraserLayer{-webkit-animation: fadeOutAni  200ms  forwards;opacity: 1;}
#s6Section.out .hsBtn{-webkit-animation: boxOut3  800ms 500ms  forwards;opacity: 1;}
#s6Section.out .paperBox{-webkit-animation: boxOut2  800ms 500ms  forwards;opacity: 1; width: 277px;}


#endSection{position: absolute;perspective: 300px; perspective-origin: 50% 50%;transform-style: preserve-3d;}
#endSection .end1{width: 253px; height: 73px; position: absolute; left: 81px; bottom: 483px; background: url(../images/end_1.png); background-size: 100% 100%; opacity: 0;}
#endSection .end2{width: 333px; height: 147px; position: absolute; left: 38px; bottom: 274px; background: url(../images/end_2.png); background-size: 100% 100%; opacity: 0;}
#endSection .hsBtn{width: 198px; height: 58px; position: absolute; left: 110px; bottom: 154px; background: url(../images/end_3.png); background-size: 100% 100%; opacity: 0;pointer-events:auto;}

#endSection.in{z-index: 1;}
#endSection.in .end1{-webkit-animation: boxT2Ani  1000ms  forwards;opacity: 0;}
#endSection.in .end2{-webkit-animation: boxT3Ani  1000ms  forwards;opacity: 0;}
#endSection.in .hsBtn{-webkit-animation: boxBtnAni  800ms 500ms  forwards;opacity: 0;}

#endSection.out{z-index: -1;}
#endSection.out .end1{-webkit-animation: boxOut1  1000ms  forwards;opacity: 1;}
#endSection.out .end2{-webkit-animation: boxOut2  1000ms  forwards;opacity: 1;}
#endSection.out .hsBtn{-webkit-animation: boxOut3  800ms 500ms  forwards;opacity: 1;}

@-webkit-keyframes paperOpenAni{   
	0%{ opacity: 0;left: 208px; transform: rotateZ(30deg);}
	50%{ opacity: 1;left: 208px; width: 1px;  transform: rotateZ(0deg);}
	100%{ opacity: 1;left: 71px; width: 277px; }
}
@-webkit-keyframes boxT1Ani{   
	0%{transform:translateX(-300px) translateY(200px) translateZ(201px) rotateX(40deg) rotateY(70deg) rotateZ(0deg) ; opacity: 0; }
	99%{transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxT2Ani{   
	0%{transform: translateX(300px) translateY(200px) translateZ(201px) rotateX(40deg) rotateY(-90deg) rotateZ(0deg) ; opacity: 0; }
	99%{transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxT3Ani{   
	0%{transform:  translateX(-300px) translateY(200px) translateZ(201px) rotateX(-40deg) rotateY(70deg) rotateZ(0deg); opacity: 0; }
	99%{transform:  translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxT4Ani{   
	0%{transform: rotateX(-40deg) rotateY(-90deg) rotateZ(0deg) translateX(300px) translateY(200px) translateZ(201px); opacity: 0; }
	99%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxT5Ani{   
	0%{transform: translateX(-300px) translateY(-200px) translateZ(201px)rotateX(-40deg) rotateY(-90deg) rotateZ(0deg) ; opacity: 0; }
	99%{transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxT6Ani{   
	0%{transform: translateX(300px) translateY(200px) translateZ(201px)rotateX(40deg) rotateY(90deg) rotateZ(0deg) ; opacity: 0; }
	99%{transform: translateX(0px) translateY(0px) translateZ(0px)rotateX(0deg) rotateY(0deg) rotateZ(0deg) ; opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxBtnAni{   
	0%{transform: rotateX(-90deg) rotateY(45deg) rotateZ(0deg) translateX(100px) translateY(100px) translateZ(100px); opacity: 0; }
	50%{transform: rotateX(2deg) rotateY(-2deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(-6px); opacity: 1;}
	75%{transform: rotateX(-1deg) rotateY(1deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(3px); opacity: 1;}
	100%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
}
@-webkit-keyframes boxss1Ani{   
	0%{transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(-100px) translateY(0) translateZ(0px); opacity: 0; }
	50%{transform: rotateX(0deg) rotateY(-4deg) rotateZ(0deg) translateX(2px) translateY(0px) translateZ(0px); opacity: 1;}
	75%{transform: rotateX(0deg) rotateY(1deg) rotateZ(0deg) translateX(-1px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
}
@-webkit-keyframes boxss2Ani{   
	0%{transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg) translateX(100px) translateY(0) translateZ(0px); opacity: 0; }
	50%{transform: rotateX(0deg) rotateY(-4deg) rotateZ(0deg) translateX(-2px) translateY(0px) translateZ(0px); opacity: 1;}
	75%{transform: rotateX(0deg) rotateY(1deg) rotateZ(0deg) translateX(1px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
}
@-webkit-keyframes boxTipAni{   
	0%{transform: rotateX(0deg) rotateY(100deg) rotateZ(45deg) translateX(0) translateY(50px) translateZ(0px); opacity: 0; }
	50%{transform: rotateX(0deg) rotateY(-2deg) rotateZ(-2deg) translateX(0px) translateY(-2px) translateZ(0px); opacity: 1;}
	75%{transform: rotateX(0deg) rotateY(1deg) rotateZ(1deg) translateX(0px) translateY(1px) translateZ(0px); opacity: 1;}
	100%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(1px); opacity: 1;}
}
@-webkit-keyframes boxTipAni2{   
	0%{transform: scaleX(0.2) scaleY(0.2) rotateY(45deg) translateY(200px) translateZ(0px); opacity: 0; }
	50%{transform: scaleX(1.05) scaleY(1.05) rotateY(-1deg) translateY(-2px) translateZ(0px); opacity: 1;}
	75%{transform: scaleX(0.95) scaleY(0.95) rotateY(0.5deg) translateY(1px) translateZ(0px); opacity: 1;}
	100%{transform: scaleX(1) scaleY(1) rotateY(0deg) translateY(0px) translateZ(1px); opacity: 1;}
}
@-webkit-keyframes boxTipAni3{   
	0%{transform: rotateY(90deg) translateY(100px); opacity: 0; }
	50%{transform: rotateY(-1deg) translateY(-2px) ; opacity: 1;}
	75%{transform: rotateY(0.5deg) translateY(1px) ; opacity: 1;}
	100%{transform: rotateY(0deg) translateY(0px) ; opacity: 1;}
}
@-webkit-keyframes boxss1out{   
	0%{transform:  translateZ(0px)rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0); opacity: 1; }
	100%{transform: translateZ(-300px) rotateX(0deg) rotateY(40deg) rotateZ(0deg) translateX(0px) translateY(0px); opacity: 0;}
}
@-webkit-keyframes boxOut1{   
	0%{transform:  translateZ(0px)rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0); opacity: 1; }
	100%{transform: translateZ(-300px) rotateX(60deg) rotateY(0deg) rotateZ(50deg) translateX(0px) translateY(0px); opacity: 0;}
}
@-webkit-keyframes boxOut2{   
	0%{transform:  translateZ(0px)rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0); opacity: 1; }
	100%{transform: translateZ(-300px) rotateX(0deg) rotateY(40deg) rotateZ(50deg) translateX(0px) translateY(0px); opacity: 0;}
}
@-webkit-keyframes boxOut3{   
	0%{transform:  translateZ(0px)rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0); opacity: 1; }
	100%{transform: translateZ(-300px) rotateX(80deg) rotateY(20deg) rotateZ(0deg) translateX(0px) translateY(0px); opacity: 0;}
}

@-webkit-keyframes handShake1{   
	0%{transform:rotateZ(-1deg);}
	50%{transform:rotateZ(30deg);}
	100%{transform:rotateZ(-1deg);}
}
@-webkit-keyframes handShake2{   
	0%{bottom:0;}
	100%{bottom:80px;}
}
@-webkit-keyframes handShake3{   
	0%{left:0px; top:0px;}
	33%{left:45px; top:-5px;}
	66%{left:20px; top:70px;}
	100%{left:60px; top:65px;}
}
@-webkit-keyframes fadeInAni{   
	0%{opacity:0;}
	100%{opacity:1;}
}
@-webkit-keyframes fadeOutAni{   
	0%{opacity:1;}
	100%{opacity:0;}
}
@-webkit-keyframes pcManAni{
    50%{background-position-x: 0px;}
    100%{background-position-x: -100%;}
}
@-webkit-keyframes jiaoziAni{
    40%{top: -15px; transform:rotateZ(-12deg);}
    80%{top: 5px;transform:rotateZ(5deg);}
    90%{top: -2px;transform:rotateZ(-3deg);}
    100%{top: 0px;transform:rotateZ(0deg);}
}
@-webkit-keyframes giftAni{
	0%{opacity:0;transform:scale(0.1) rotateZ(-3deg);}
    100%{transform:scale(1) rotateZ(-3deg);}
}

@-webkit-keyframes loadingT1Ani{   
	0%{ transform:rotateX(40deg) rotateY(70deg) rotateZ(0deg) translateX(-300px) translateY(300px) translateZ(201px); opacity: 0; }
	99%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)  translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes loadingT2Ani{   
	0%{transform: rotateX(40deg) rotateY(-90deg) rotateZ(0deg)  translateX(150px) translateY(300px) translateZ(201px); opacity: 0; }
	99%{transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes loadingT3Ani{   
	0%{transform:  translateX(-100px) translateY(100px) translateZ(201px) rotateX(-40deg) rotateY(70deg) rotateZ(0deg); opacity: 0; }
	99%{transform:  translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes loadingT4Ani{   
	0%{transform: rotateX(-40deg) rotateY(-90deg) rotateZ(0deg) translateX(100px) translateY(100px) translateZ(201px); opacity: 0; }
	99%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{opacity: 1;}
}

.fadeIn{opacity: 1 !important;transition: all 1s !important;}
.fadeOut{opacity: 0!important;transition: all 1s !important;}



.md-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	max-width: 750px;
	min-width: 320px;
	height: auto;
	z-index: 2000;
	visibility: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	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.7);
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show ~ .md-overlay {
	opacity: 1;
	visibility: visible;
}

/* Content styles */
.md-content {
	color: #fff;
	background: #e74c3c;
	position: relative;
	border-radius: 3px;
	margin: 0 auto;
}
.md-effect-3 .md-content {
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	transform: translateY(20%);
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.md-show.md-effect-3 .md-content {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
}
.msgAlert{width: 390px; height: 485px; background:url(../images/modBg.png); background-size:100% auto;text-align: center; float: left;}
.msgAlert .md-close{ width: 32px; height: 31px; position: absolute; display: block; right: 29px; top:0px; background:url(../images/closeBtn.png); background-size: 100% 100%;}
.msgAlert .modBorder1{width: 390px; height: 19px; position: absolute; top:-18px; background:url(../images/modBorder1.png); background-size: 100% 100%;}
.msgAlert .modBorder2{width: 390px; height: 21px; position: absolute; bottom:-21px; background:url(../images/modBorder2.png); background-size: 100% 100%;}

.msgAlert h3{ width: 283px; height: 68px; padding-top: 8px; border: 2px solid #EBC347; border-radius:10px ; margin: auto; margin-top: 48px; color: #fff68e; font-size: 26px; line-height: 30px; font-style: italic;}
.msgAlert p{color: #fff68e; width: 283px; margin: auto; text-align: left; line-height: 1.8em; margin-top: 20px; font-size: 14px;}
.msgAlert ul{margin: 0; padding: 0; width: 283px; line-height: 1.8em; margin: auto;}
.msgAlert ul li{color: #fff68e; width: 263px; text-align: left; line-height: 1.4em; margin-top: 10px; font-size: 14px; list-style: none; padding-left: 20px;}
.msgAlert ul li span{display: block; width: 20px; margin-left: -20px; float: left;}

.msgAlert .logos{width: 275px; height: 174px; background: url(../images/logos.png); background-size: 100% 100%; margin: auto; margin-top: 30px;}