* { margin: 0; padding: 0;}
html,body{height:100%; width: 100%; text-align: center; overflow: hidden;}
a,div{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none; color: #FFF;}

#container{overflow:hidden;width:414px; min-height: 660px;height: 100%; left: 0; top: 0; -webkit-perspective: 500px; -webkit-perspective-origin:50% 50%;-webkit-transform-style: preserve-3d;  }
#transformBox{width:100%;height: 100%; left: 0; top: 0;  -webkit-perspective-origin: 50% 50%;-webkit-transform-style: preserve-3d; z-index: 0;}
.musicBtn{width: 30px; height: 31px; display: block; position: absolute; right: 12px; top: 12px;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);}
}
.logo{width: 111px; height: 19px; position: absolute; left: 14px; top: 16px; background: url(../images/logo.png); background-size: 100% 100%; z-index: 1000;}
.tipBg{width: 48px; height: 95px; position: absolute; left: 184px; bottom: 66px; background: url(../images/tipBg.png); background-size: 100% 100%; -webkit-transform:translateZ(0px); opacity: 0; z-index: 1000; pointer-events: none;}
.tipBg .hand{width: 20px; height: 31px; position: absolute; left: 16px; bottom: -14px; background: url(../images/tipHand.png); background-size: 100% 100%; -webkit-animation: tiphandAni 6000ms infinite;}
.tipShow{-webkit-animation: fadeInAni  1000ms 1500ms   forwards;opacity: 0;}
.tipHide{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
@-webkit-keyframes tiphandAni{
	0%{bottom:-14px;}
	25%{bottom:56px;}
	50%{bottom:-14px;}
}
@-webkit-keyframes CloudAni{
	0%{top:204px;}
	50%{top:210px;}
	100%{top:204px;}
}
.loadingSection{min-height: 660px;height: 100%;  width: 414px; position: absolute; background: #fffefe; z-index: 2100;}
.loadingSection .per{ font-size: 20px; position: absolute; color: #000; font-style: italic; width: 100px; height: 30px; left: 164px; top:289px;}
.loadingSection .note{ font-size: 12px; position: absolute; color: #000; width: 120px; height: 30px; left: 154px; top:316px;}
.loadingSection .cloud1{ width: 148px; height: 64px; position: absolute; left: 124px; top: 204px;-webkit-animation: CloudAni  3000ms infinite;}
.loadingSection .cloud1 img{width: 100%; height: 100%; -webkit-filter: saturate(0%) ;}
Section{ min-height: 660px;height: 100%;  width: 414px; position: absolute;-webkit-perspective: 500px; -webkit-perspective-origin: 50% 50%;-webkit-transform-style: preserve-3d; display: none; }
.se1{-webkit-transform: translateZ(0px);}
.se2{-webkit-transform: translateZ(2000px);}
.se3{-webkit-transform: translateZ(4000px);}
.se4{-webkit-transform: translateZ(6000px);}
.se5{-webkit-transform: translateZ(8000px);}
.se6{-webkit-transform: translateZ(10000px);}
.se7{-webkit-transform: translateZ(12000px);}
.se8{-webkit-transform: translateZ(14000px);}
.se9{-webkit-transform: translateZ(16000px);}
.se10{-webkit-transform: translateZ(18000px);}
.se11{-webkit-transform: translateZ(20000px);}
.se12{-webkit-transform: translateZ(22000px);}
.se13{-webkit-transform: translateZ(24000px);}
.se14{-webkit-transform: translateZ(26000px);}
.se15{-webkit-transform: translateZ(28000px);}

.seCloud1{-webkit-transform: translateZ(1000px);}
.seCloud2{-webkit-transform: translateZ(3000px);}
.seCloud3{-webkit-transform: translateZ(5000px);}
.seCloud4{-webkit-transform: translateZ(7000px);}
.seCloud5{-webkit-transform: translateZ(9000px);}
.seCloud6{-webkit-transform: translateZ(11000px);}
.seCloud7{-webkit-transform: translateZ(13000px);}
.seCloud8{-webkit-transform: translateZ(15000px);}
.seCloud9{-webkit-transform: translateZ(17000px);}
.seCloud10{-webkit-transform: translateZ(19000px);}
.seCloud11{-webkit-transform: translateZ(21000px);}
.seCloud12{-webkit-transform: translateZ(23000px);}
.seCloud13{-webkit-transform: translateZ(25000px);}
.seCloud14{-webkit-transform: translateZ(27000px);}


.se1 .t1{width: 54px;height: 26px; position: absolute; left: 177px; bottom: 560px; background: url(../images/01T1.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 0;}
.se1 .t2{width: 59px;height: 72px; position: absolute; left: 172px; bottom: 460px; background: url(../images/01T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .t3{width: 47px;height: 74px; position: absolute; left: 177px; bottom: 373px; background: url(../images/01T3.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .t4{width: 84px;height: 80px; position: absolute; left: 168px; bottom: 283px; background: url(../images/01T4.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}

.se1 .ts1{width: 25px;height: 26px; position: absolute; left: 125px; bottom: 404px; background: url(../images/01Ts1.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .ts2{width: 25px;height: 24px; position: absolute; left: 125px; bottom: 376px; background: url(../images/01Ts2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .ts3{width: 23px;height: 24px; position: absolute; left: 126px; bottom: 347px; background: url(../images/01Ts3.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .ts4{width: 24px;height: 24px; position: absolute; left: 124px; bottom: 317px; background: url(../images/01Ts4.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .ts5{width: 23px;height: 24px; position: absolute; left: 125px; bottom: 289px; background: url(../images/01Ts5.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .ts6{width: 25px;height: 24px; position: absolute; left: 124px; bottom: 260px; background: url(../images/01Ts6.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}
.se1 .cloud1{width: 407px;height: 194px; position: absolute; left: -328px; top: 21px; background: url(../images/01Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);opacity: 0;}
.se1 .cloud2{width: 203px;height: 77px; position: absolute; right: -98px; bottom: 323px; background: url(../images/01Cloud2.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);opacity: 0;}
.se1 .cloud3{width: 270px;height: 125px; position: absolute; right: 40px; bottom: 126px; background: url(../images/01Cloud3.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);opacity: 0;}
.se1 .yin{width: 30px;height: 31px; position: absolute; left: 188px; bottom: 237px; background: url(../images/01Yin.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);opacity: 0;}

.se1.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se1.in .t2{-webkit-animation: boxT1Ani  1000ms 300ms  forwards;opacity: 0;}
.se1.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se1.in .t4{-webkit-animation: boxT1Ani  1000ms 900ms  forwards;opacity: 0;}
.se1.in .ts1{-webkit-animation: boxT2Ani  1000ms 600ms  forwards;opacity: 0;}
.se1.in .ts2{-webkit-animation: boxT2Ani  1000ms 700ms  forwards;opacity: 0;}
.se1.in .ts3{-webkit-animation: boxT2Ani  1000ms 800ms  forwards;opacity: 0;}
.se1.in .ts4{-webkit-animation: boxT2Ani  1000ms 900ms  forwards;opacity: 0;}
.se1.in .ts5{-webkit-animation: boxT2Ani  1000ms 1000ms  forwards;opacity: 0;}
.se1.in .ts6{-webkit-animation: boxT2Ani  1000ms 1100ms  forwards;opacity: 0;}
.se1.in .yin{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se1.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se1.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se1.in .cloud3{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}


.se1.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se1.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se1.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se1.out .t4{-webkit-animation: fadeOutAni  1000ms 900ms  forwards;opacity: 1;}
.se1.out .ts1{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se1.out .ts2{-webkit-animation: fadeOutAni  1000ms 700ms  forwards;opacity: 1;}
.se1.out .ts3{-webkit-animation: fadeOutAni  1000ms 800ms  forwards;opacity: 1;}
.se1.out .ts4{-webkit-animation: fadeOutAni  1000ms 900ms  forwards;opacity: 1;}
.se1.out .ts5{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity: 1;}
.se1.out .ts6{-webkit-animation: fadeOutAni  1000ms 1100ms  forwards;opacity: 1;}
.se1.out .yin{-webkit-animation: fadeOutAni  1000ms 1100ms  forwards;opacity: 1;}
.se1.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se1.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1100ms  forwards;opacity:1;}
.se1.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1100ms  forwards;opacity:1;}

.se2 .t1{width: 136px;height: 180px; position: absolute; left: 138px; top: 64px; background: url(../images/02T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);}
.se2 .t2{width: 166px;height: 146px; position: absolute; right: -2px; top: 48px; background: url(../images/02T102.png); background-size: 100% 100%; -webkit-transform:translateZ(0px);
		-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;
}
.se2 .t3{width: 168px;height: 75px; position: absolute; left: 119px; top: 256px; background: url(../images/02T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se2 .cloud1{width: 344px;height: 149px; position: absolute; left: -249px; top: 129px; background: url(../images/02Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se2 .cloud2{width: 290px;height: 138px; position: absolute; right: -285px; top: 255px; background: url(../images/02Cloud2.png); background-size: 100% 100%; -webkit-transform:translateZ(-200px);}
.se2 .cloud3{width: 226px;height: 99px; position: absolute; right: 80px; bottom: 130px; background: url(../images/02Cloud3.png); background-size: 100% 100%; -webkit-transform:translateZ(100px);}
.se2 .build1{width: 326px;height: 213px; position: absolute; left: 10px; bottom: 106px; background: url(../images/02Building1.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}
.se2 .build2{width: 159px;height: 133px; position: absolute; right: -10px; bottom: 140px; background: url(../images/02Building2.png); background-size: 100% 100%;-webkit-transform:translateZ(70px);}

.se2.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se2.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se2.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se2.in .build1{-webkit-animation: fadeInAni  300ms forwards;opacity: 0;}
.se2.in .build2{-webkit-animation: fadeInAni  300ms forwards;opacity: 0;}

.se2.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se2.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se2.in .cloud3{-webkit-animation: fadeInAni  1000ms 1200ms  forwards;opacity: 0;}

.se2.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se2.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se2.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se2.out .build1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se2.out .build2{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se2.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se2.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1100ms  forwards;opacity:1;}
.se2.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1100ms  forwards;opacity:1;}


.se3 .t1{width: 175px;height: 165px; position: absolute; left: 130px; top: 70px; background: url(../images/03T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se3 .t2{width: 113px;height: 138px; position: absolute; left:104px; top: 109px; background: url(../images/03T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
	-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se3 .t3{width: 165px;height: 52px; position: absolute; left: 121px; top: 257px; background: url(../images/03T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se3 .build1{width: 300px;height: 353px; position: absolute; left: 0px; bottom: 10px; background: url(../images/03Building1.png); background-size: 100% 100%;-webkit-transform:translateZ(40px);}
.se3 .build2{width: 210px;height: 214px; position: absolute; left: -60px; bottom: -20px; background: url(../images/03Building2.png); background-size: 100% 100%;-webkit-transform:translateZ(-50px);}
.se3 .build3{width: 159px;height: 181px; position: absolute; right: -50px; bottom: -10px; background: url(../images/03Building3.png); background-size: 100% 100%;-webkit-transform:translateZ(-50px);}

.se3.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se3.in .t2{-webkit-animation: moInLeftAni  1000ms 1000ms  forwards;opacity: 0;}
.se3.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se3.in .build1{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se3.in .build2{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se3.in .build3{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}


.se3.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se3.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se3.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se3.out .build1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se3.out .build2{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se3.out .build3{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}



.se4 .t1{width: 184px;height: 176px; position: absolute; left: 126px; top: 65px; background: url(../images/04T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se4 .t2{width: 175px;height: 128px; position: absolute; left:150px; top: 117px; background: url(../images/04T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se4 .t3{width: 199px;height: 75px; position: absolute; left: 103px; top: 257px; background: url(../images/04T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se4 .build{width: 318px;height: 213px; position: absolute; left: -60px; bottom: 40px; background: url(../images/04buliding1.png); background-size: 100% 100%;-webkit-transform:translateZ(-50px);}
.se4 .build2{width: 285px;height: 217px; position: absolute; right: -40px; bottom: 80px; background: url(../images/04buliding2.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}

.se4.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se4.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se4.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se4.in .build{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se4.in .build2{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}

.se4.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se4.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se4.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se4.out .build{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}
.se4.out .build2{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}

.se5 .t1{width: 154px;height: 175px; position: absolute; left: 138px; top: 83px; background: url(../images/05T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se5 .t2{width: 181px;height: 151px; position: absolute; right:-21px; top: 117px; background: url(../images/05T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se5 .t3{width: 247px;height: 74px; position: absolute; left: 78px; top: 266px; background: url(../images/05T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se5 .build{width: 500px;height: 229px; position: absolute; left: -20px; bottom: 120px; background: url(../images/05Building.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}
.se5 .cloud1{width: 210px;height: 92px; position: absolute; left: 108px; bottom: 170px; background: url(../images/05Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se5.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se5.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se5.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se5.in .build{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se5.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}

.se5.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se5.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se5.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se5.out .build{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}
.se5.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}


.se6 .t1{width: 178px;height: 159px; position: absolute; left: 130px; top: 87px; background: url(../images/06T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se6 .t2{width: 158px;height: 148px; position: absolute; left:96px; top: 92px; background: url(../images/06T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se6 .t3{width: 315px;height: 74px; position: absolute; left: 45px; top: 257px; background: url(../images/06T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se6 .build{width: 500px;height: 158px; position: absolute; left: -80px; bottom: 120px; background: url(../images/06Building.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}
.se6 .cloud1{width: 210px;height: 97px; position: absolute; right: 70px; bottom: 160px; background: url(../images/06Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se6.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se6.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se6.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se6.in .build{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se6.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}

.se6.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se6.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se6.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se6.out .build{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}
.se6.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se7 .t1{width: 165px;height: 146px; position: absolute; left: 131px; top: 92px; background: url(../images/07T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se7 .t2{width: 154px;height: 147px; position: absolute; right:-11px; top: 63px; background: url(../images/07T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se7 .t3{width: 164px;height: 75px; position: absolute; left: 130px; top: 257px; background: url(../images/07T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se7 .build1{width: 327px;height: 156px; position: absolute; left: 0px; bottom: 50px; background: url(../images/07Building1.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se7 .build2{width: 214px;height: 234px; position: absolute; right: 0px; bottom: 50px; background: url(../images/07Building2.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}

.se7.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se7.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se7.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se7.in .build1{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se7.in .build2{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}

.se7.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se7.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se7.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se7.out .build1{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}
.se7.out .build2{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}


.se8 .t1{width: 182px;height: 173px; position: absolute; left: 126px; top: 81px; background: url(../images/08T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se8 .t2{width: 166px;height: 132px; position: absolute; left:63px; top: 89px; background: url(../images/08T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se8 .t3{width: 98px;height: 74px; position: absolute; left: 155px; top: 257px; background: url(../images/08T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se8 .build{width: 500px;height: 328px; position: absolute; left: -50px; bottom: 80px; background: url(../images/08Building.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}

.se8.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se8.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se8.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se8.in .build{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}

.se8.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se8.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se8.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se8.out .build{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}

.se9 .t1{width: 190px;height: 180px; position: absolute; left: 119px; top: 75px; background: url(../images/09T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se9 .t2{width: 135px;height: 106px; position: absolute; left:112px; top: 138px; background: url(../images/09T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se9 .t3{width: 214px;height: 74px; position: absolute; left: 96px; top: 257px; background: url(../images/09T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se9 .build{width: 500px;height: 179px; position: absolute; left: -80px; bottom: 180px; background: url(../images/09Building.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}
.se9 .cloud1{width: 200px;height: 87px; position: absolute; left: -108px; top: 21px; background: url(../images/09Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se9 .cloud2{width: 250px;height: 110px; position: absolute; right: 90px; bottom: 146px; background: url(../images/09Cloud2.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se9.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se9.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se9.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se9.in .build{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se9.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se9.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}


.se9.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se9.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se9.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se9.out .build{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}
.se9.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se9.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se10 .t1{width: 177px;height: 177px; position: absolute; left: 137px; top: 38px; background: url(../images/10T101.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se10 .t2{width: 141px;height: 147px; position: absolute; left:179px; top: 44px; background: url(../images/10T102.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);
-webkit-mask:url(../images/mask.png);-webkit-mask-size:200% 100%; -webkit-mask-position-x:100%;}
.se10 .t3{width: 212px;height: 101px; position: absolute; left: 95px; top: 340px; background: url(../images/10T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se10 .build{width: 200px;height: 119px; position: absolute; right: 40px; bottom: 180px; background: url(../images/10Building.png); background-size: 100% 100%;-webkit-transform:translateZ(50px);}
.se10 .cloud1{width: 250px;height: 110px; position: absolute; left: -328px; top: 21px; background: url(../images/10Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);}
.se10 .cloud2{width: 203px;height: 77px; position: absolute; right: -98px; bottom: 323px; background: url(../images/10Cloud2.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se10 .cloud3{width: 270px;height: 105px; position: absolute; right: 40px; bottom: 130px; background: url(../images/10Cloud3.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}
.se10 .phonix{width: 300px;height: 359px; position: absolute; left: -50px; top: 50px; background: url(../images/phonix.png); background-size: 100% 100%;-webkit-transform:translateZ(20px);}

.se10.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se10.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se10.in .t3{-webkit-animation: boxT1Ani  1000ms 600ms  forwards;opacity: 0;}
.se10.in .build{-webkit-animation: fadeInAni  300ms  forwards;opacity: 0;}
.se10.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se10.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se10.in .cloud3{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se10.in .phonix{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}

.se10.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se10.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se10.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se10.out .build{-webkit-animation: fadeOutAni  1000ms  forwards;opacity: 1;}
.se10.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se10.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se10.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se10.out .phonix{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se11 .t1{width: 225px;height: 234px; position: absolute; left: 126px; top: 74px; background: url(../images/11T1.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se11 .t2{width: 25px;height: 191px; position: absolute; left:105px; top: 294px; background: url(../images/11T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se11 .cloud1{width: 250px;height: 110px; position: absolute; left: -228px; top: 241px; background: url(../images/11Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);}
.se11 .cloud2{width: 231px;height: 101px; position: absolute; right: -98px; bottom: 323px; background: url(../images/11Cloud2.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se11 .cloud3{width: 270px;height: 125px; position: absolute; right: 40px; bottom: 126px; background: url(../images/11Cloud3.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se11.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se11.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se11.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se11.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se11.in .cloud3{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}

.se11.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se11.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se11.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se11.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se11.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se12 .t1{width: 202px;height: 220px; position: absolute; left: 126px; top: 74px; background: url(../images/12T1.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se12 .t2{width: 58px;height: 169px; position: absolute; right:80px; top: 326px; background: url(../images/12T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se12 .cloud1{width: 250px;height: 110px; position: absolute; left: -228px; top: 0px; background: url(../images/06Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);}
.se12 .cloud2{width: 231px;height: 101px; position: absolute; right: -98px; bottom: 323px; background: url(../images/02Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se12 .cloud3{width: 270px;height: 125px; position: absolute; right: 40px; bottom: 46px; background: url(../images/12Cloud3.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se12.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se12.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se12.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se12.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se12.in .cloud3{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}

.se12.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se12.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se12.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se12.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se12.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se13 .t1{width: 167px;height: 211px; position: absolute; left: 225px; top: 250px; background: url(../images/13T1.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se13 .t2{width: 59px;height: 168px; position: absolute; left:128px; top: 108px; background: url(../images/13T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se13 .cloud1{width: 250px;height: 110px; position: absolute; right: -228px; top: 0px; background: url(../images/11Cloud2.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);}
.se13 .cloud2{width: 231px;height: 101px; position: absolute; left: -98px; bottom: 323px; background: url(../images/02Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se13 .cloud3{width: 270px;height: 125px; position: absolute; right: 40px; bottom: 126px; background: url(../images/12Cloud3.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se13.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se13.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se13.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se13.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se13.in .cloud3{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}

.se13.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se13.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se13.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se13.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se13.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se14 .t1{width: 175px;height: 215px; position: absolute; left: 59px; top: 223px; background: url(../images/14T1.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se14 .t2{width: 58px;height: 173px; position: absolute; left:228px; top: 76px; background: url(../images/14T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se14 .cloud1{width: 250px;height: 110px; position: absolute; left: -228px; top: 0px; background: url(../images/06Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);}
.se14 .cloud2{width: 231px;height: 101px; position: absolute; right: -98px; bottom: 323px; background: url(../images/02Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-100px);}
.se14 .cloud3{width: 270px;height: 125px; position: absolute; right: 40px; bottom: 126px; background: url(../images/12Cloud3.png); background-size: 100% 100%;-webkit-transform:translateZ(100px);}

.se14.in .t1{-webkit-animation: boxT1Ani  1000ms   forwards;opacity: 0;}
.se14.in .t2{-webkit-animation: moInRightAni  1000ms 1000ms  forwards;opacity: 0;}
.se14.in .cloud1{-webkit-animation: fadeInAni  1000ms 1000ms  forwards;opacity: 0;}
.se14.in .cloud2{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}
.se14.in .cloud3{-webkit-animation: fadeInAni  1000ms 1100ms  forwards;opacity: 0;}

.se14.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se14.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se14.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se14.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se14.out .cloud3{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}

.se15 .t1{width: 98px;height: 102px; position: absolute; left: 236px; top: 72px; background: url(../images/11T1.png); background-size: 100% 100%;-webkit-transform: translateZ(0px);opacity: 1; }
.se15 .t2{width: 35px;height: 55px; position: absolute; left:259px; top: 170px; background: url(../images/15T2.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se15 .t3{width: 49px;height: 61px; position: absolute; left:259px; top: 231px; background: url(../images/13T1.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se15 .t4{width: 84px;height: 92px; position: absolute; left:153px; top: 179px; background: url(../images/12T1.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se15 .t5{width: 57px;height: 53px; position: absolute; left:159px; top: 283px; background: url(../images/15T5.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se15 .t6{width: 50px;height: 60px; position: absolute; left:168px; top: 346px; background: url(../images/14T1.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se15 .t7{width: 292px;height: 70px; position: absolute; left:61px; top: 438px; background: url(../images/15T7.png); background-size: 100% 100%;-webkit-transform:translateZ(0px);}
.se15 .yin{width: 342px;height: 350px; position: absolute; left:79px; top: 320px; background: url(../images/15Yin.png); background-size: 100% 100%;-webkit-transform:translateZ(0px) scale(0.175);-webkit-transform-origin: 0% 0%;}
.se15 .cloud1{width: 250px;height: 110px; position: absolute; left: -228px; top: 0px; background: url(../images/02Cloud1.png); background-size: 100% 100%;-webkit-transform:translateZ(-200px);}
.se15 .cloud2{width: 231px;height: 101px; position: absolute; right: -98px; bottom: 323px; background: url(../images/02Cloud1.png); background-size: 100% 100%; -webkit-transform:translateZ(-100px);}
.se15 .replayBtn{ width: 94px; height: 39px; position: absolute; left: 159px; bottom: 67px; background: url(../images/replayBtn.png); background-size: 100% 100%;-webkit-transform:translateZ(0px); z-index: 2000;}

.se15.in .t1{-webkit-animation: boxT1Ani  1200ms 2000ms  forwards;opacity: 0;}
.se15.in .t2{-webkit-animation: boxT1Ani  1200ms 2300ms  forwards;opacity: 0;}
.se15.in .t3{-webkit-animation: boxT1Ani  1200ms 2600ms  forwards;opacity: 0;}
.se15.in .t4{-webkit-animation: boxT2Ani  1200ms 2300ms  forwards;opacity: 0;}
.se15.in .t5{-webkit-animation: boxT2Ani  1200ms 2600ms  forwards;opacity: 0;}
.se15.in .t6{-webkit-animation: boxT2Ani  1200ms 2900ms  forwards;opacity: 0;}
.se15.in .t7{-webkit-animation: fadeInAni  1200ms 3100ms  forwards;opacity: 0;}
.se15.in .cloud1{-webkit-animation: fadeInAni  1000ms   forwards;opacity: 0;}
.se15.in .cloud2{-webkit-animation: fadeInAni  1000ms 300ms  forwards;opacity: 0;}
.se15.in .yin{-webkit-animation: finalYinAni  2500ms   forwards;opacity: 0;}
.se15.in .replayBtn{-webkit-animation: boxT2Ani  1000ms 2000ms   forwards;opacity: 0;}

.se15.out .t1{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se15.out .t2{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se15.out .t3{-webkit-animation: fadeOutAni  1000ms 600ms  forwards;opacity: 1;}
.se15.out .t4{-webkit-animation: fadeOutAni  1000ms 900ms  forwards;opacity: 1;}
.se15.out .t5{-webkit-animation: fadeOutAni  1000ms 900ms  forwards;opacity: 1;}
.se15.out .t6{-webkit-animation: fadeOutAni  1000ms 900ms  forwards;opacity: 1;}
.se15.out .t7{-webkit-animation: fadeOutAni  1000ms   forwards;opacity: 1;}
.se15.out .yin{-webkit-animation: fadeOutAni  1000ms 300ms  forwards;opacity: 1;}
.se15.out .cloud1{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se15.out .cloud2{-webkit-animation: fadeOutAni  1000ms 1000ms  forwards;opacity:1;}
.se15.out .replayBtn{-webkit-animation: fadeOutAni  1000ms  forwards;opacity:1;}

.cloud.blur div img{-webkit-animation: blurInAni  2000ms 1000ms forwards;}
.cloud.blurOut div img{-webkit-animation: blurOutAni  1500ms  forwards;}
@-webkit-keyframes blurInAni{   
	0%{opacity: 1;}
	100%{opacity: 0.3;}
}
@-webkit-keyframes blurOutAni{   
	0%{opacity: 0.3;}
	100%{opacity: 1;}
}
.cloud div img{width: 100%; height: 100%;}
.seCloud1 .cloud1{width: 207px;height: 94px; position: absolute;  left: 0px; top: 21px; -webkit-transform:translateZ(-200px);}
.seCloud1 .cloud2{width: 203px;height: 107px; position: absolute; right: -200px; top: 23px; -webkit-transform:translateZ(-100px);}
.seCloud1 .cloud3{width: 270px;height: 125px; position: absolute; left: -200px; top: 226px; -webkit-transform:translateZ(0);}
.seCloud1 .cloud4{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud1 .cloud5{width: 290px;height: 138px; position: absolute; left: 0px; top: 305px; -webkit-transform:translateZ(100px);}
.seCloud1 .cloud6{width: 226px;height: 107px; position: absolute; right: -185px; bottom: 180px; -webkit-transform:translateZ(50px);}

.seCloud2 .cloud1{width: 260px;height: 100px; position: absolute; right: -249px; top: 59px; -webkit-transform:translateZ(-200px);}
.seCloud2 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-100px);}
.seCloud2 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud2 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 329px; -webkit-transform:translateZ(50px);}
.seCloud2 .cloud5{width: 210px;height: 98px; position: absolute; left: -80px; top: 50px; -webkit-transform:translateZ(100px);}
.seCloud2 .cloud6{width: 266px;height: 127px; position: absolute; right: 200px; bottom: 220px; -webkit-transform:translateZ(200px);}

.seCloud3 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud3 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud3 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud3 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud3 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud3 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud4 .cloud1{width: 407px;height: 194px; position: absolute;  left: 0px; top: 21px; -webkit-transform:translateZ(-200px);}
.seCloud4 .cloud2{width: 203px;height: 77px; position: absolute; right: 98px; bottom: 323px;-webkit-transform:translateZ(-100px);}
.seCloud4 .cloud3{width: 270px;height: 125px; position: absolute; right: 140px; bottom: 226px;-webkit-transform:translateZ(0);}
.seCloud4 .cloud4{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud4 .cloud5{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud4 .cloud6{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud5 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud5 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud5 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud5 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 329px; -webkit-transform:translateZ(50px);}
.seCloud5 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; bottm: 255px; -webkit-transform:translateZ(100px);}
.seCloud5 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 280px; -webkit-transform:translateZ(200px);}

.seCloud6 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud6 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud6 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud6 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud6 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud6 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 180px; -webkit-transform:translateZ(200px);}


.seCloud7 .cloud1{width: 407px;height: 194px; position: absolute;  left: 0px; top: 21px; -webkit-transform:translateZ(-200px);}
.seCloud7 .cloud2{width: 203px;height: 77px; position: absolute; right: 98px; bottom: 323px; -webkit-transform:translateZ(-100px);}
.seCloud7 .cloud3{width: 270px;height: 125px; position: absolute; right: 140px; bottom: 226px; -webkit-transform:translateZ(0);}
.seCloud7 .cloud4{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud7 .cloud5{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud7 .cloud6{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud8 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud8 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud8 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud8 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 329px; -webkit-transform:translateZ(50px);}
.seCloud8 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; bottm: 255px; -webkit-transform:translateZ(100px);}
.seCloud8 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 280px; -webkit-transform:translateZ(200px);}

.seCloud9 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud9 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud9 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud9 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud9 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud9 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud10 .cloud1{width: 407px;height: 194px; position: absolute;  left: 0px; top: 21px; -webkit-transform:translateZ(-200px);}
.seCloud10 .cloud2{width: 203px;height: 77px; position: absolute; right: 98px; bottom: 323px; -webkit-transform:translateZ(-100px);}
.seCloud10 .cloud3{width: 270px;height: 125px; position: absolute; right: 140px; bottom: 226px;-webkit-transform:translateZ(0);}
.seCloud10 .cloud4{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud10 .cloud5{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud10 .cloud6{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud11 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud11 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud11 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud11 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 329px; -webkit-transform:translateZ(50px);}
.seCloud11 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; bottm: 255px; -webkit-transform:translateZ(100px);}
.seCloud11 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 280px; -webkit-transform:translateZ(200px);}

.seCloud12 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud12 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud12 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud12 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud12 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud12 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud13 .cloud1{width: 407px;height: 194px; position: absolute;  left: 0px; top: 21px; -webkit-transform:translateZ(-200px);}
.seCloud13 .cloud2{width: 203px;height: 77px; position: absolute; right: 98px; bottom: 323px;-webkit-transform:translateZ(-100px);}
.seCloud13 .cloud3{width: 270px;height: 125px; position: absolute; right: 140px; bottom: 226px; -webkit-transform:translateZ(0);}
.seCloud13 .cloud4{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(50px);}
.seCloud13 .cloud5{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(100px);}
.seCloud13 .cloud6{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(200px);}

.seCloud14 .cloud1{width: 344px;height: 149px; position: absolute; left: -49px; top: 129px; -webkit-transform:translateZ(-100px);}
.seCloud14 .cloud2{width: 290px;height: 138px; position: absolute; right: -185px; top: 255px; -webkit-transform:translateZ(-200px);}
.seCloud14 .cloud3{width: 226px;height: 107px; position: absolute; right: 0px; bottom: 180px; -webkit-transform:translateZ(100px);}
.seCloud14 .cloud4{width: 344px;height: 149px; position: absolute; left: 249px; top: 329px; -webkit-transform:translateZ(50px);}
.seCloud14 .cloud5{width: 290px;height: 138px; position: absolute; right: 185px; bottm: 255px; -webkit-transform:translateZ(100px);}
.seCloud14 .cloud6{width: 226px;height: 107px; position: absolute; right: 200px; bottom: 280px; -webkit-transform:translateZ(200px);}


@-webkit-keyframes changeAni{
	0%{-webkit-transform:rotateX(0deg) rotateZ(0deg);}
	50%{-webkit-transform:rotateX(180deg) rotateZ(180deg);}
	100%{-webkit-transform:rotateX(360deg) rotateZ(360deg);}
}

@-webkit-keyframes boxT1Ani{   
	0%{-webkit-transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg) translateX(-200px) translateY(200px) translateZ(200px); opacity: 0; }
	99%{-webkit-transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes boxT2Ani{   
	0%{-webkit-transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) translateX(-300px) translateY(100px) translateZ(200px); opacity: 0; }
	99%{-webkit-transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px); opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes fadeInAni{   
	0%{ opacity: 0; }
	99%{opacity: 1;}
	100%{opacity: 1;}
}
@-webkit-keyframes fadeOutAni{   
	0%{opacity: 1; }
	99%{opacity: 0;}
	100%{opacity: 0;}
}
@-webkit-keyframes moInRightAni{   
	0%{opacity: 0;-webkit-transform:translateX(-10px) scale(0.9);-webkit-mask-position-x:0%; }
	99%{opacity: 1;-webkit-transform:translateX(0px) scale(1); -webkit-mask-position-x:100%;}
	100%{opacity: 1;}
}
@-webkit-keyframes moInLeftAni{   
	0%{opacity: 0;-webkit-transform:translateX(10px) scale(0.9);-webkit-mask-position-x:200%; }
	99%{opacity: 1;-webkit-transform:translateX(0px) scale(1); -webkit-mask-position-x:100%;}
	100%{opacity: 1;}
}
@-webkit-keyframes finalYinAni{   
	0%{-webkit-transform: rotateX(0deg) rotateY(60deg) rotateZ(0deg) translateX(-200px) translateY(200px) translateZ(200px)  scale(1); opacity: 0; }
	30%{-webkit-transform:  rotateX(0deg) rotateY(3deg) rotateZ(0deg) translateX(-38px) translateY(-150px) translateZ(0px)  scale(1); opacity: 1;}
	70%{-webkit-transform:  rotateX(0deg) rotateY(-3deg) rotateZ(0deg) translateX(-38px) translateY(-150px) translateZ(0px)  scale(1); opacity: 1;}
	100%{-webkit-transform:  rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px) translateY(0px) translateZ(0px)  scale(0.175); opacity: 1;}
}