* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;  height: 100%; text-align: center;-webkit-tap-highlight-color: transparent;}
section{width: 10rem;min-height: 14.88rem; max-height: 20.266rem; height: 100%; position: relative; margin: auto;position: absolute; overflow: hidden; display: none;}
.logo{position: absolute; width: 4.08rem; height: 0.48rem; top: 0.506rem; left: 0.4rem; background: url(../images/logo.png) no-repeat; background-size: 100% 100%; z-index: 200;}   
.musicBtn{position: absolute; width: 0.8rem; height: 0.8rem; top: 0.346rem; right: 0.4rem; background: url(../images/musicBtn.png) no-repeat; background-size: 100% 100%; z-index: 200;}
.musicBtn.playing{-webkit-animation: playing 1000ms linear infinite alternate;}
.swiper-container{z-index: 0;}
/* 加载页 */
.loadingSection{background: url(../images/loadingBg.png) no-repeat; background-size:100% auto; background-position: center;}
.loadingBar{position: absolute; width: 6.293rem;  top: 50%; left: 50%; margin-left: -3.146rem; margin-top: -1.04rem;}
.loadingTxt{position: absolute; width: 6.026rem; height: 0.346rem; top: 0.8rem; left: 50%; margin-left: -3.013rem; background: url(../images/loadingTxt.png) no-repeat; background-size: 100% 100%; }
.loadingBar .loadingBar1{width: 6.293rem; height: 0.533rem; background: url(../images/loadingBar1.png) no-repeat; background-size: 100% 100%; position: absolute;}
.loadingBar .loadingBar2{width: 6.293rem; height: 0.533rem; background: url(../images/loadingBar2.png) no-repeat; background-size: 100% 100%; position: absolute;
		-webkit-mask-image: url(../images/loadingBarMask.png); -webkit-mask-position:-6.293rem 0; -webkit-mask-size: 12.586rem 0.533rem; }
.loadingBar .loadingFire{width: 3.333rem; height: 2.32rem; position: absolute; background: url(../images/loadingFire.png) no-repeat; background-size: 100% 100%; left: -1.7rem; top: -.94rem; transform-origin: center; 
	-webkit-animation:loadingF 1600ms step-start infinite alternate;
}
.homeSection.show{display: block;}
.homeSectionBg{ width: 10rem; height: 100%;background: url(../images/mainBg.png) no-repeat; background-size:100% auto; background-position: center; opacity: 0;}
.homeSection .firecracker{width: 2.613rem; height: 5.133rem; position: absolute; left: 50%; margin-left: -1.306rem; top: 50%; margin-top: 0.4rem; background: url(../images/firecracker.png) no-repeat; background-size: 100% 100%;opacity: 0;}
.homeSection .mainTop{width: 10rem; height: 11.133rem; position: absolute; left: 50%; margin-left: -5rem; bottom: 50%; margin-bottom: -1.133rem; background: url(../images/mainTitleBg.png) no-repeat;background-size: 100% 100%; opacity: 0; transform-origin: bottom center;

}
.homeSection .mainBottom{width: 10rem; height: 4.813rem; position: absolute; left: 50%; margin-left: -5rem; top: 50%; margin-top: 5.493rem;background: url(../images/mainBottom.png) no-repeat;background-size: 100% 100%; opacity: 0;}
.homeSection .fireBtnBox{width: 4.693rem; height: 1.706rem; position: absolute; left: 50%; margin-left: -2.346rem; top: 50%; margin-top: 5.466rem; opacity: 0;}
.homeSection .fireBtn{width: 4.693rem; height: 1.706rem; position: absolute; left: 0; top: 0; background: url(../images/fireBtn.png) no-repeat; background-size: 100% 100%;}
.homeSection .fireBtn:active{background: url(../images/fireBtnActive.png) no-repeat; background-size: 100% 100%;}
.homeSection .mainTxt{width: 5.56rem; height: 3.933rem; position: absolute; left: 50%; margin-left: -2.84rem; bottom: 3.12rem;perspective: 5.1rem; perspective-origin: 50% 50%;transform-style: preserve-3d; }
.homeSection .mainTxt1{width: 3.146rem; height: 1.12rem; position: absolute; left: 50%; margin-left: -1.573rem; top: 0;background: url(../images/mainTxt1.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.homeSection .mainTxt2{width: 5.56rem; height: 1.093rem; position: absolute; left: 50%; margin-left: -2.773rem; top: 1.56rem; background: url(../images/mainTxt2.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.homeSection .mainTxt3{width: 3.293rem; height: 1.066rem; position: absolute; left: 50%; margin-left: -1.64rem; bottom:0; background: url(../images/mainTxt3.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.homeSection .fireWork1{width: 1.04rem; height: 1.04rem; position: absolute; left: 50%; margin-left: -3.733rem; bottom: 5.853rem; background: url(../images/mainFireWork.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.homeSection .fireWork2{width: 1.76rem; height: 1.76rem; position: absolute; left: 50%; margin-left: -2.946rem; bottom: 7.04rem; background: url(../images/mainFireWork.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.homeSection .fireWork3{width: 2.533rem; height: 2.533rem; position: absolute; left: 50%; margin-left: 1.72rem; bottom: 6.68rem; background: url(../images/mainFireWork.png) no-repeat; background-size: 100% 100%; opacity: 0;}

.show .homeSectionBg{-webkit-animation: opacityIn 1000ms ease-in forwards;}
.show .firecracker{-webkit-animation: opacityIn 500ms ease-in 1000ms forwards;}
.show .mainTop{-webkit-animation: mainTopIn 500ms ease-out 2000ms forwards;}
.show .mainTxt1{-webkit-animation: mainTxtIn 600ms ease-out 2600ms forwards;}
.show .mainTxt2{-webkit-animation: mainTxtIn 600ms ease-out 3100ms forwards;}
.show .mainTxt3{-webkit-animation: mainTxtIn 600ms ease-out 3600ms forwards;}
.show .fireWork1{-webkit-animation: fireWorkIn 1500ms ease-out 2100ms infinite forwards;}
.show .fireWork2{-webkit-animation: fireWorkIn 1700ms ease-out 2300ms infinite forwards;}
.show .fireWork3{-webkit-animation: fireWorkIn2 1900ms ease-out 2500ms infinite forwards;}
.show .fireBtnBox{-webkit-animation: fireBtnIn 900ms ease-out 1500ms forwards;}
.show .mainBottom{-webkit-animation: upIn 1500ms ease-out 1000ms forwards;}
.show .fireBtn{-webkit-animation: shake 1000ms linear infinite alternate;}
@-webkit-keyframes loadingF{
	0%{opacity: 1; transform: rotate(20deg) scale(1); }
	10%{opacity: 1; transform: rotate(10deg) scale(0.7); }
	20%{opacity: 1; transform: rotate(120deg) scale(1); }
	30%{opacity: 1; transform: rotate(60deg) scale(0.9); }
	40%{opacity: 1; transform: rotate(310deg) scale(1); }
	50%{opacity: 1; transform: rotate(50deg) scale(0.8); }
	60%{opacity: 1; transform: rotate(10deg) scale(1); }
	70%{opacity: 1; transform: rotate(70deg) scale(0.9); }
	80%{opacity: 1; transform: rotate(195deg) scale(1); }
	90%{opacity: 1; transform: rotate(80deg) scale(0.9); }
}
@-webkit-keyframes opacityIn{
	0%{opacity: 0; }
	100%{opacity: 1; }
}
@-webkit-keyframes playing{
	0%{transform: rotate(-5deg); }
	100%{transform: rotate(5deg); }
}
@-webkit-keyframes opacityOut{
	0%{opacity: 1; }
	100%{opacity: 0; }
}
@-webkit-keyframes firecrackerIn{
	0%{opacity: 0; }
	100%{opacity: 1; }
}
@-webkit-keyframes mainTopIn{
	0%{opacity: 0; transform: scale(0);}
	100%{opacity: 1; transform: scale(1);}
}
@-webkit-keyframes mainTxtIn{
	0%{opacity: 0; transform:translateY(0.4rem) rotateY(90deg);}
	100%{opacity: 1; transform: translateY(0) rotateY(0);}
}
@-webkit-keyframes fireWorkIn{
	0%{opacity: 0; transform:scale(0) rotate(30deg) translateZ(2px);}
	40%{opacity: 1; transform:scale(1) rotate(0) translateZ(2px);}
	100%{opacity: 1; transform:scale(1) rotate(0) translateZ(2px);}
}
@-webkit-keyframes fireWorkIn2{
	0%{opacity: 0; transform:scale(0) rotate(-30deg) translateZ(2px);}
	40%{opacity: 1; transform:scale(1) rotate(0) translateZ(2px);}
	100%{opacity: 1; transform:scale(1) rotate(0) translateZ(2px);}
}
@-webkit-keyframes fireBtnIn{
	0%{opacity: 0; transform:translateY(0.4rem);}
	100%{opacity: 1; transform:translateY(0rem);}
}
@-webkit-keyframes upIn{
	0%{opacity: 0; transform:translateY(0.2rem);}
	100%{opacity: 1; transform:translateY(0rem);}
}
@-webkit-keyframes shake{
	0%{ transform:rotate(0deg);}
	10%{transform:rotate(-3deg);}
	20%{transform:rotate(3deg);}
	30%{transform:rotate(-3deg);}
	40%{transform:rotate(3deg);}
	50%{transform:rotate(0deg);}
}
.selectSection.show{display: block;}
.selectSectionBg{width: 10rem; height: 100%;background: url(../images/selectBg.png) no-repeat ; background-size:100% auto; background-position: center;}
.selectSection .selectBgRay{width: 8.506rem; height: 8.506rem; position: absolute; left: 0;  top: 0; background: url(../images/selectBgRay.png) no-repeat; background-size: 100% 100%;}
.selectSection .selectTxt{ width: 3.693rem; height: 2.706rem; position: absolute; left: 50%; margin-left: -1.84rem; top: 1.466rem; background: url(../images/selectTxt.png) no-repeat; background-size: 100% 100%; opacity: 0;} 
.selectSection .selectBtnBox{width: 4.293rem; height: 1.56rem; position: absolute; left: 50%; margin-left: -2.146rem; top: 50%; margin-top: 5.946rem; opacity: 0;}
.selectSection .selectBtn{width: 4.293rem; height: 1.56rem; position: absolute; left: 0;  top: 0;background: url(../images/selectBtn.png) no-repeat; background-size: 100% 100%; }
.selectSection .selectBtn:active{background: url(../images/selectBtnActive.png) no-repeat; background-size: 100% 100%;}
.selectSection .swiper-container{width: 8.506rem; height: 8.506rem; position: absolute; left: 50%; margin-left: -4.253rem; top: 50%; margin-top: -3.8rem; opacity: 0;}
.selectSection .swiper-container .swiper-slide>img{width: 100%; height: 100%; position: absolute; left: 0; top: 01;}
.swiper-button-next, .swiper-button-prev{bottom: 50%;margin-bottom: 0.133rem;top:auto; margin-top:0;width: 0.48rem;height: 0.76rem;z-index: 10;cursor: pointer;background-size: 100% 100%;background-position: center;background-repeat: no-repeat;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{background: url(../images/arrawLeft.png) no-repeat; background-size: 100% 100%; left: 0.4rem;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{background: url(../images/arrawRight.png) no-repeat; background-size: 100% 100%; right: 0.4rem;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 2.133rem;}
.swiper-pagination-bullet{width: 0.106rem; height: 0.106rem; background: #ffe400; opacity: 0.6; transition: all 500ms;}
.swiper-pagination-bullet-active{width: 0.106rem; height: 0.106rem; opacity: 1;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 0.093rem;}

.show .selectSectionBg{-webkit-animation: opacityIn 1000ms ease-in forwards;}
.selectSection.show .selectTxt{-webkit-animation: fallIn 500ms ease-out 1300ms forwards;}
.selectSection.show .selectBtnBox{-webkit-animation: upIn 500ms ease-out 2000ms forwards;}
.selectSection.show .swiper-container{-webkit-animation: opacityIn 500ms ease-out 1000ms forwards;}
.selectSection.show .selectBgRay{-webkit-animation: roting  30000ms linear infinite forwards;}
.selectSection.show  .selectBtn{-webkit-animation: shake 1000ms linear infinite alternate;}
@-webkit-keyframes fallIn{
	0%{opacity: 0; transform:translateY(-0.4rem);}
	100%{opacity: 1; transform:translateY(0rem);}
}

.playGroundSection.show{display: block;}
.playGroundSectionBg{width: 10rem; height: 100%;background: url(../images/playgroundBg.png) no-repeat ; background-size:100% auto; background-position: center;}
.playGroundSection .playGround{width: 10rem; height: 7.36rem; position: absolute; top: 50%; margin-top: 2.933rem;  background: url(../images/playGround.png) no-repeat;background-size: 100% 100%; transform: translateY(10rem);}
.playGroundSection .fcBox{width: 2.16rem; height: 5.44rem; position: absolute; top: 50%; margin-top: 2.04rem;  left: 50%; margin-left: -1.32rem; transform-origin: bottom center; transform: translateY(10rem);}
.playGroundSection .fcBox .fcShadow{width: 1.76rem; height: 0.666rem; position: absolute; right: 0; bottom: 0; background: url(../images/fcShadow.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .fcBox .fcBg{width: 2.053rem; height: 4.533rem; position: absolute; right: 0.12rem; bottom: 0.093rem; background: url(../images/fcBg.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .fcBox .fc{width: 1.066rem; height: 2.493rem; position: absolute; right: 0.32rem; top: 0; background: url(../images/fc.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .fcBox .fcMask{width: 1.533rem; height: 1.88rem; position: absolute; right: 0.093rem; top: 1rem; background: url(../images/fcMask.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .fcBox .fb{width: 2.133rem; height: 2.133rem; position: absolute; left: -0.9rem; top: 3.2rem; opacity: 0;}
.playGroundSection .fcBox .fb_fire{width: 2.133rem; height: 2.133rem; position: absolute; left: 0; top: 0; background: url(../images/loadingFire.png) no-repeat; background-size: 100% 100%; -webkit-animation:loadingF 1600ms step-start infinite alternate;}
.playGroundSection .boyBox{width: 2.026rem; height: 2.506rem; position: absolute;top: 50%; margin-top: 4.933rem;  left: 50%; margin-left: -3.52rem;  transform: translateY(10rem);}
.playGroundSection .boyBox .boyShadow{width: 0.826rem; height: 0.173rem;position: absolute; left: 0.173rem; bottom: 0; background: url(../images/boyShadow.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .boyBox .boyBody{width: 1.093rem; height: 2.453rem;position: absolute; left: 0; top: 0; background: url(../images/boyBody.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .boyBox .boyHand{width: 1.52rem; height: 1.16rem;position: absolute; right: 0; top: 0.453rem; background: url(../images/boyHand.png) no-repeat; background-size: 100% 100%; transform-origin: 25% 50%;}
.playGroundSection .girlBox{width: 0.96rem; height: 2.426rem;position: absolute;top: 50%; margin-top: 5rem;  left: 50%; margin-left: 2.24rem; transform: translateY(10rem);}
.playGroundSection .girlBox .girlShadow{width: 0.773rem; height: 0.173rem;position: absolute; left: 0.093rem; bottom: 0; background: url(../images/girlShadow.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .girlBox .girl{width: 0.96rem; height: 2.36rem;position: absolute; right: 0; top: 0;}
.playGroundSection .girlBox .girlBody{width: 0.96rem; height: 2.36rem;position: absolute; right: 0; top: 0; background: url(../images/girlBody.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .girlBox .girlRh{width: 0.48rem; height: 0.853rem; position: absolute; left: 0; top: 0.6rem;background: url(../images/girlRh.png) no-repeat; background-size: 100% 100%;transform-origin: 60% 60%;}
.playGroundSection .girlBox .girlLh{width: 0.306rem; height: 0.613rem; position: absolute; left: 0.573rem; top: 0.72rem;background: url(../images/girlLh.png) no-repeat; background-size: 100% 100%; transform-origin: center 90%; }
.playGroundSection .snow{width: 10rem; height: 19.573rem; position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0;}
.playGroundSection .cloud1{width: 10rem; height: 32rem; position: absolute; left: 0; top: 0; background: url(../images/cloud.png) repeat-y; background-size: 100% auto; transform: translateY(-100%);}
.playGroundSection .cloud2{width: 10rem; height: 13.333rem; position: absolute; left: 0; top: 0; background: url(../images/cloud2.png) repeat-y; background-size: 100% auto; transform: translateY(-100%);}
.playGroundSection .cloud3{width: 10rem; height: 6.893rem; position: absolute; left: 0; top: 0; background: url(../images/cloud3.png) no-repeat; background-size: 100% auto; transform: translateY(-100%);}


.playGroundSection.show .playGroundSectionBg{-webkit-animation: opacityIn 1000ms ease-out  forwards;}
.playGroundSection.show .playGround{-webkit-animation: groundIn 500ms ease-in 500ms  forwards;}
.playGroundSection.show .girlBox{-webkit-animation: groundIn 500ms ease-in 500ms  forwards;}
.playGroundSection.show .boyBox{-webkit-animation: groundIn 500ms ease-in 500ms  forwards;}
.playGroundSection.show .fcBox{-webkit-animation: groundIn 500ms ease-in 500ms  forwards;}
.playGroundSection.show .snow{-webkit-animation: opacityIn 500ms ease-in 1000ms  forwards;}
.playGroundSection.show .fcBox .fb{-webkit-animation: opacityIn 500ms linear 2500ms forwards;}
.playGroundSection .girlBox.jump .girlLh{-webkit-animation: lhWave 500ms linear infinite alternate;}
.playGroundSection .girlBox.jump .girlRh{-webkit-animation: lhWave 500ms linear infinite alternate;}
.playGroundSection .girlBox.jump .girlBody{-webkit-animation: girlJumpBg 500ms step-start infinite alternate;}
.playGroundSection .girlBox.jump .girl{-webkit-animation: girlJump 500ms ease-out infinite alternate;}
.playGroundSection .girlBox.jump{-webkit-animation: girlMove 2500ms linear infinite alternate;}
.playGroundSection .boyBox.fire .boyHand{-webkit-animation: boyhWave 1500ms linear forwards;}
.playGroundSection .boyBox.fire{-webkit-animation: boyMoveIn 1500ms linear forwards;}
.playGroundSection .fcBox.ready{-webkit-animation: fcIn 500ms linear 2000ms forwards;transform: translateY(0);}

.playGroundSection .girlBox.out{-webkit-animation: downOut 500ms ease-out  forwards;}
.playGroundSection .fcBox.out{-webkit-animation: downOut 500ms ease-out  forwards;}
.playGroundSection .fcBox.out .fc{-webkit-animation: fcOut 500ms ease-out  forwards;}
.playGroundSection .boyBox.out{-webkit-animation: downOut 500ms ease-out  forwards;}
.playGroundSection .playGround.out{-webkit-animation: downOut 500ms ease-out  forwards;}
.playGroundSection .cloud1.out{-webkit-animation: cloudOut 2500ms ease-out  forwards;}
.playGroundSection .cloud2.out{-webkit-animation: cloudOut 2500ms ease-out  forwards;}
.playGroundSection .cloud3.out{-webkit-animation: cloudOut 2500ms ease-out  forwards;}
.playGroundSection .cloud1.fadeOut{-webkit-animation: cloudFadeOut 2500ms ease-out  forwards;}
.playGroundSection .cloud2.fadeOut{-webkit-animation: cloudFadeOut 2500ms ease-out  forwards;}
.playGroundSection .cloud3.fadeOut{-webkit-animation: cloudFadeOut 2500ms ease-out  forwards;}
.playGroundSection .snow.fadeOut{-webkit-animation: opacityOut 2500ms ease-out  forwards;}

@-webkit-keyframes groundIn{
	0%{transform:translateY(10rem);}
	100%{ transform:translateY(0);}
}

@-webkit-keyframes lhWave{
	0%{transform:rotate(-90deg);}
	100%{ transform:rotate(0);}
}
@-webkit-keyframes girlJumpBg{
	50%{background: url(../images/girlBody.png) no-repeat; background-size: 100% 100%;}
	100%{ background: url(../images/girlBodyJump.png) no-repeat; background-size: 100% 100%;}
}
@-webkit-keyframes girlJump{
	0%{transform:translateY(0rem);}
	100%{ transform:translateY(-0.25rem);}
}
@-webkit-keyframes girlMove{
	0%{transform:translateX(0rem);}
	100%{ transform:translateX(-0.25rem);}
}
@-webkit-keyframes boyhWave{
	0%{transform:rotate(0deg);}
	100%{ transform:rotate(40deg);}
}
@-webkit-keyframes boyMoveIn{
	0%{transform:translateX(0rem);}
	100%{ transform:translateX(0.27rem);}
}
@-webkit-keyframes fcIn{
	0%{transform:scaleY(1) scaleX(1);}
	40%{transform:scaleY(0.95) scaleX(1.1);}
	90%{transform:scaleY(0.9) scaleX(1.2);}
	100%{transform:scaleY(1.1) scaleX(0.9);}
}
@-webkit-keyframes downOut{
	0%{transform:translateY(0);}
	100%{transform:translateY(25rem);}
}
@-webkit-keyframes fcOut{
	0%{transform:translateY(0);}
	100%{transform:translateY(-29rem);}
}
@-webkit-keyframes cloudOut{
	0%{transform:translateY(-100%);}
	100%{transform:translateY(100%);}
}
@-webkit-keyframes cloudFadeOut{
	0%{transform:translateY(100%); opacity: 1;}
	100%{transform:translateY(100%); opacity: 0;}
}
.playGroundSection .heaven{width: 10rem; height: 100%; top: 0; left: 0; position: absolute; transform: translateY(-50rem);}
.playGroundSection .cloud{width: 10rem; height: 11.413rem; position: absolute; left: 0; top: 3rem; background: url(../images/cloud.png) no-repeat; background-size: 100% auto; transform: translateZ(10rem); }
.playGroundSection .gate{width: 11.2rem; height: 10.253rem; position: absolute; left: 50%; margin-left: -5.6rem; top: 0.293rem; background: url(../images/gate.png) no-repeat; background-size: 100% 100%;
						perspective: 10rem; perspective-origin: 50% 80%;transform-style: preserve-3d;}
.playGroundSection .gate .ldoor{width: 2.75rem; height: 6.4rem; background: url(../images/gateLeft.png) no-repeat #a61d11; background-size: 100% 100%; left: 2.8rem; top: 3rem; position: absolute; transform: translateZ(3rem) rotateX(24deg) rotateY(0deg); transform-origin:left bottom;
transform-style: preserve-3d; }
.playGroundSection .gate .ldoor:after{content: ''; border:0.04rem solid #a61d11; width: 0.22rem; height: 6.33rem; left: 2.75rem; top: 0; transform: rotateY(90deg); background: #fed471;position: absolute; transform-origin: left;}
.playGroundSection .gate .ldoor:before{content: ''; border:0.04rem solid #a61d11; width: 2.68rem; height: 0.22rem; left: 0rem; bottom: 0; transform: rotateX(90deg); background: #fed471;position: absolute; transform-origin: bottom;}

.playGroundSection .gate .rdoor{width:  2.75rem; height: 6.4rem; background: url(../images/gateRight.png) no-repeat #a61d11; background-size: 100% 100%; right: 2.8rem; top: 3rem; position: absolute; transform: translateZ(3rem) rotateX(24deg) rotateY(0deg); transform-origin:right bottom;
transform-style: preserve-3d; }
.playGroundSection .gate .rdoor:after{content: ''; border:0.04rem solid #a61d11; width: 0.22rem; height: 6.33rem; left: 0rem; top: 0; transform: rotateY(90deg); background: #fed471;position: absolute; transform-origin: left;}
.playGroundSection .gate .rdoor:before{content: ''; border:0.04rem solid #a61d11; width: 2.75rem; height: 0.22rem; left: 0rem; bottom: 0; transform: rotateX(90deg); background: #fed471;position: absolute; transform-origin: bottom;}

.playGroundSection .lantern{width: 12.44rem; height: 5.333rem; position: absolute; left: 50%; margin-left: -6.213rem; top: -1.306rem; background: url(../images/lantern.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .heavenCloud{width: 16.4rem; height: 9.026rem; position: absolute; top: 0.266rem; left: 50%; margin-left: -8.48rem;background: url(../images/heavenCloud.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .heavenCloudBg{width: 10rem; height: 4.56rem; position: absolute; top: 3.813rem; left: 50%; margin-left: -5rem;background: url(../images/heavenCloudBg.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.playGroundSection .heavenCloudBg2{width: 10rem; height: 3.346rem; position: absolute; top: 50%; margin-top: 6.933rem; left: 50%; margin-left: -5rem;background: url(../images/heavenCloudBg2.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.playGroundSection .mammonBox{width: 7.426rem; height: 7.226rem; position: absolute; top: 50%; margin-top: -0.56rem; left: 50%; margin-left: -3.76rem; opacity: 0; transform: translateZ(8rem);}
.playGroundSection .mammon{width: 7.426rem; height: 7.226rem; position: absolute; top: 0; left: 0; background: url(../images/mammon.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .mammonHat{width: 3.533rem; height: 2.786rem; position: absolute; top: 0; left: 50%;  margin-left: -1.773rem; background: url(../images/hat.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .mammonHatL{width: 2rem; height: 1.066rem; position: absolute; top: 0.8rem; left: 50%;  margin-left: -3.266rem; background: url(../images/hatL.png) no-repeat; background-size: 100% 100%; transform-origin: right center;}
.playGroundSection .mammonHatR{width: 2rem; height: 1.066rem; position: absolute; top: 0.8rem; left: 50%;  margin-left: 1.253rem; background: url(../images/hatR.png) no-repeat; background-size: 100% 100%; transform-origin: left center;}
.playGroundSection .packet{width: 5.373rem; height: 4.04rem; position: absolute; top: 3.453rem; left: 1.066rem;background: url(../images/packet.png) no-repeat; background-size: 100% 100%; transform: scale(0.9);}
.playGroundSection .hand{width: 5.506rem; height: 1.44rem; position: absolute; top: 4rem; left: 0.946rem;background: url(../images/hand.png) no-repeat; background-size: 100% 100%; transform: scale(0.9); pointer-events: none;}
.playGroundSection .packetRay{width: 9.4rem; height: 3.893rem; position: absolute; top: -1.326rem; left: -1.76rem;background: url(../images/packetRay.png) no-repeat; background-size: 100% 100%; opacity: 0; pointer-events: none;}
.playGroundSection .btnBox{width: 3.693rem; height: 3.68rem; position: absolute; top: -0.693rem; left: 50%; margin-left: -1.826rem;}
.playGroundSection .btnBox .openBtn{width: 1.653rem; height: 1.493rem; position: absolute; top: 0.933rem; left: 1.013rem; background: url(../images/openBtn.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .packet:active .openBtn{ background: url(../images/openBtnActive.png) no-repeat; background-size: 100% 100%;}
.playGroundSection .btnBox .openBtnRay{width: 3.693rem; height: 3.213rem; position: absolute; top: 0; left: 0; background: url(../images/openBtnRay.png) no-repeat; background-size: 100% 100%; transform: scale(0);}
.playGroundSection .btnBox .openBtnHand{width: 0.92rem; height: 1.226rem; position: absolute; bottom: 0; left: 1.386rem; background: url(../images/openBtnHand.png) no-repeat; background-size: 100% 100%; opacity: 0;}
.playGroundSection .heavenTitle{width: 1.613rem; height: 4.92rem; position: absolute; top: 3.44rem; left:50%; margin-left: -0.8rem; background: url(../images/heavenTitle.png) no-repeat; background-size: 100% 100%; opacity: 0; transform: translateZ(8rem);}
.playGroundSection .blom{width: 6.066rem; height: 5.84rem; position: absolute; top: 50%; margin-top: -3.2rem; left:50%; margin-left: -3rem; background: url(../images/blom.png) no-repeat; background-size: 54.6rem 5.84rem; background-position:-60.666rem 0 ; transform: scale(1.6); pointer-events: none;}
.playGroundSection .blom2{width: 6.066rem; height: 5.84rem; position: absolute; top: 50%; margin-top: -.2rem; left:50%; margin-left: -4.8rem; background: url(../images/blom.png) no-repeat; background-size: 54.6rem 5.84rem; background-position:-60.666rem 0 ; transform: scale(0.6); pointer-events: none;}
.playGroundSection .blom3{width: 6.066rem; height: 5.84rem; position: absolute; top: 50%; margin-top: -.2rem; left:50%; margin-left: 0.5rem; background: url(../images/blom.png) no-repeat; background-size: 54.6rem 5.84rem; background-position:-60.666rem 0 ; transform: scale(1); pointer-events: none;}


.playGroundSection .heaven.show{-webkit-animation: downShow 2500ms ease-out  forwards;}
.playGroundSection .heaven.show .lantern{-webkit-animation: lanternShow 1000ms ease-out 1500ms  forwards;}
.playGroundSection .heaven.show .cloud{-webkit-animation: heavenCloudShow 5000ms linear 500ms  forwards;}
.playGroundSection .heaven.show .mammonBox{-webkit-animation: mammonShow 2000ms ease-out 3000ms  forwards;}
.playGroundSection .heaven.show .packet{-webkit-animation: packetShow 1000ms ease-out 5000ms   infinite alternate;}
.playGroundSection .heaven.show .hand{-webkit-animation: packetShow 1000ms ease-out 5000ms   infinite alternate;}
.playGroundSection .heaven.show .packetRay{-webkit-animation: opacityIn 1000ms ease-out 6000ms  forwards;}
.playGroundSection .heaven.show .btnBox .openBtnHand{-webkit-animation: opacityIn 1000ms ease-out 6000ms  forwards;}
.playGroundSection .heaven.show .btnBox .openBtnHand.blink{-webkit-animation: btnHandBlink 300ms ease-out infinite  forwards; transform-origin: bottom; opacity: 1;}
.playGroundSection .heaven.show .btnBox .openBtnRay{-webkit-animation: btnRayBlink 1500ms ease-out 6000ms infinite  forwards;}
.playGroundSection.show .blom.blomAni{-webkit-animation: blomAni 1000ms steps(1) forwards;}
.playGroundSection.show .blom2.blomAni{-webkit-animation: blomAni 1000ms steps(1) 200ms forwards;}
.playGroundSection.show .blom3.blomAni{-webkit-animation: blomAni 1000ms steps(1) 500ms forwards;}
.playGroundSection .heaven.show .ldoor{-webkit-animation: leftDoorOpen 1000ms ease-out 2000ms  forwards;}
.playGroundSection .heaven.show .rdoor{-webkit-animation: rightDoorOpen 1000ms ease-out 2000ms  forwards;}
.playGroundSection .heaven.show .heavenTitle{-webkit-animation: opacityIn 1000ms ease-out 2000ms  forwards;}
.playGroundSection .heaven.show .heavenCloudBg{-webkit-animation: opacityIn 1000ms ease-out 2000ms  forwards;}
.playGroundSection .heaven.show .heavenCloudBg2{-webkit-animation: opacityIn 1000ms ease-out 2000ms  forwards;}
.playGroundSection .heaven.show .mammonHatL{-webkit-animation: mammonL 1000ms ease-out  infinite alternate;}
.playGroundSection .heaven.show .mammonHatR{-webkit-animation: mammonR 1000ms ease-out  infinite alternate;}
@-webkit-keyframes leftDoorOpen{
	0%{transform: translateZ(3rem) rotateX(24deg) rotateY(0deg);}
	100%{transform: translateZ(3rem) rotateX(24deg) rotateY(-35deg);}
}
@-webkit-keyframes rightDoorOpen{
	0%{transform: translateZ(3rem) rotateX(24deg) rotateY(0deg);}
	100%{transform: translateZ(3rem) rotateX(24deg) rotateY(35deg);}
}
@-webkit-keyframes downShow{
	0%{transform:translateY(-30rem);}
	100%{transform:translateY(0);}
}
@-webkit-keyframes lanternShow{
	0%{transform:translateY(-3rem);}
	100%{transform:translateY(0);}
}
@-webkit-keyframes heavenCloudShow{
	0%{transform:translateY(0rem) translateZ(10rem); opacity: 1;}
	50%{transform:translateY(2rem) translateZ(10rem); opacity: 1;}
	100%{transform:translateY(3rem) translateZ(10rem); opacity: 0;}
}
@-webkit-keyframes mammonShow{
	0%{transform:translateY(-4rem) translateZ(8rem) scale(0) ; opacity: 0;}
	100%{transform:translateY(0) translateZ(8rem) scale(1) ; opacity: 1;}
}
@-webkit-keyframes mammonL{
	0%{transform:rotate(0deg) ;}
	100%{transform:rotate(5deg);}
}
@-webkit-keyframes mammonR{
	0%{transform:rotate(0deg) ;}
	100%{transform:rotate(-5deg);}
}
@-webkit-keyframes packetShow{
	0%{transform: scale(0.9) ; }
	100%{transform:scale(1) ; }
}
@-webkit-keyframes btnRayBlink{
	0%{transform: scale(0); opacity: 0; }
	50%{transform: scale(0.5); opacity: 1; }
	100%{transform:scale(1); opacity: 0;}
}
@-webkit-keyframes btnHandBlink{
	0%{transform: scaleY(1); }
	50%{transform: scaleY(0.9); }
}
@-webkit-keyframes blomAni{
	0%{background-position: 0 0;}
	10%{background-position: -6.066rem 0;}
	20%{background-position: -12.133rem 0;}
	30%{background-position: -18.2rem 0;}
	40%{background-position: -24.266rem 0;}
	50%{background-position: -30.333rem 0;}
	60%{background-position: -36.4rem 0;}
	70%{background-position: -42.466rem 0;}
	80%{background-position: -48.533rem 0;}
	90%{background-position: -54.6rem 0;}
	100%{background-position: -60.666rem 0;}
}
.shareSection{}/*perspective: 5.1rem; perspective-origin: 50% 50%;transform-style: preserve-3d;*/
.shareSection.show{display: block;}
.shareSectionBg{width: 10rem; height: 100%;background: url(../images/shareBg.png) no-repeat ; background-size:100% auto; background-position: center;}
.shareSection .shareBg{ width: 20rem; height: 20rem; position: absolute; left: 50%; margin-left: -10rem; top: 50%; margin-top: -11.4rem;background: url(../images/shareBg2.png) no-repeat; background-size: 100% 100%;}
.shareSection .fu{width: 4.24rem; height: 15.626rem; position: absolute; left: 50%; margin-left: -2.12rem; top: 50%; margin-top: -8.693rem; background: url(../images/fu1_1.png) no-repeat; background-size: 100% 100%; transform: translateZ(0rem);}
.shareSection .fuBg{width: 9.346rem; height: 15.493rem; position: absolute; left: 50%; margin-left: -4.666rem; top: 50%; margin-top: -8.693rem; background: url(../images/fu1_1Bg.png) no-repeat; background-size: 100% 100%;}
.shareSection .fust{width: 3.826rem; height: 8.88rem; position: absolute; left: 50%; top: 50%; margin-left: -3.826rem; margin-top: -5.573rem;background: url(../images/fu1_1st.png) no-repeat; background-size: 100% 100%;}
.shareSection .btnLayer{width: 10rem; height: 5.613rem; position: absolute; left: 0; bottom: -1.32rem; background: url(../images/btnLayer.png) no-repeat; background-size: 100% 100%; }
.shareSection .btnLayer .againBtn{width: 1.786rem; height: 1.786rem; position: absolute; top: 1.933rem; left: 50%; margin-left: -3.893rem; padding-top: 1.6rem; font-size: 14px; color: #FFF; background: url(../images/againBtn.png) no-repeat; background-size: 1.786rem 1.786rem; }
.shareSection .btnLayer .againBtn:active{background: url(../images/againBtnActive.png) no-repeat; background-size: 1.786rem 1.786rem;}
.shareSection .btnLayer .takeBtn{width: 1.786rem; height: 1.786rem; position: absolute; top: 1.933rem; left: 50%; margin-left: 2.333rem; padding-top: 1.6rem; font-size: 14px; color: #FFF; background: url(../images/takeBtn.png) no-repeat; background-size: 1.786rem 1.786rem; }
.shareSection .btnLayer .takeBtn:active{background: url(../images/takeBtnActive.png) no-repeat; background-size: 1.786rem 1.786rem;}
.shareSection .btnLayer .longTap{width: 2.426rem; height: 1.786rem; position: absolute; top: 1.933rem; left: 50%; margin-left:-1.213rem; padding-top: 1.6rem; font-size: 14px; color: #FFF; background: url(../images/longTap.png) no-repeat; background-size: 1.786rem 1.786rem; background-position: top center; }
.shareSection .fuMask{width: 10rem; height: 100%; position: absolute; opacity: 0; top: 0; left: 0;}
.shareSection .fuMask>img{width: 100%; height: 100%;}
.shareSection .fuBox{width: 100%; height: 100%; top: 0; left: 0; position: absolute;}
.shareSection.show .fu{-webkit-animation: boxT1Ani  1500ms ease-in-out  forwards;opacity: 0; transform-origin: bottom center -5rem; }
.shareSection.show .fust{-webkit-animation: fustIn  1000ms ease-out 1500ms forwards;opacity: 0;}
.shareSection.show .fuBg{-webkit-animation: fubgIn  1000ms ease-out 1700ms forwards;opacity: 0;}
.shareSection.show .btnLayer{-webkit-animation: fadeUpIn  1000ms ease-out 1200ms forwards;opacity: 0;}
.shareSection.show .shareBg{-webkit-animation: roting  60000ms linear infinite forwards;}
.shareSection.show .shareSectionBg{-webkit-animation: opacityIn  1000ms ease-out 200ms forwards;opacity: 0;}
@-webkit-keyframes boxT1Ani{   
	0%{transform: translateY(5rem) translateZ(0rem)  rotateX(-45deg) rotateY(-180deg) scale(0.2); opacity: 0; }
	99%{transform: translateY(0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg)  scale(1); opacity: 1;}
	100%{opacity: 1;transform: translateZ(0rem);}
}
@-webkit-keyframes boxT2Ani{   
	0%{transform: translateY(2rem) translateZ(0rem)  rotateX(45deg) rotateY(0deg) scale(0.2); opacity: 0; }
	99%{transform: translateY(0rem) translateZ(0rem) rotateX(0deg) rotateY(0deg)  scale(1); opacity: 1;}
	100%{opacity: 1;transform: translateZ(0rem);}
}

@-webkit-keyframes fustIn{
	0%{transform: translateX(2rem) ; opacity: 0; }
	100%{transform: translateX(0) ; opacity: 1;}
}
@-webkit-keyframes fubgIn{
	0%{transform: translateX(-1rem) ; opacity: 0; }
	100%{transform: translateX(0) ; opacity: 1;}
}
@-webkit-keyframes roting{
	0%{transform: rotate(0);}
	100%{transform: rotate(360deg);}
}
@-webkit-keyframes fadeUpIn{
	0%{transform: translateY(0.5rem) ; opacity: 0; }
	100%{transform: translateY(0) ; opacity: 1;}
}