/*
 实际宽度 = 显示宽度 * (perspective + z) / perspective;
*/

html,body{margin: 0; padding: 0; height: 100%;}
body{ background: #000;}
.sections{width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;background: #fff;background-size: 100% 100%; }/*url(../img/boxBg.png) no-repeat*/
.p3d{width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;-webkit-perspective: 13.333rem;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% bottom;}

.box{-webkit-transform-style: preserve-3d; position: absolute; width: 100%; height: 100%;transform-origin: 50% 0 0;-webkit-perspective-origin:50% bottom;left: 120rem;}
.section{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin:50% bottom;}

.box .sec3Box{-webkit-perspective-origin:50% bottom;}
.section .sec3{-webkit-perspective-origin:50% bottom;}
.section .sec4{transform-origin: center;}
.section .sec5{transform-origin: center;}

.sec6Box{background-image: linear-gradient(#062c70, #276bb0);}

.content{width: 10rem;min-height: 14.88rem; height: 100%; max-height: 18rem; position: absolute; margin: auto;}
.mainSec{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 300;}
.mainSec>img{width: 100%; height: auto;}
.content .mainTitle{width: 8.026rem; height: 4.226rem; background:url(../img/myTitle.png) no-repeat; background-size: 100%; position: absolute; top: 6.3%; left: 50%; margin-left: -4.12rem;}
.content .you{width: 9.04rem; height: 6.32rem; background:url(../img/you.png) no-repeat; background-size: 100%; position: absolute; top: 33.8%; left: 50%; margin-left:-4.053rem;}
.content .mainBtn{width:5.213rem; height:2.906rem; position: absolute; bottom: 12.77%; left: 50%; margin-left:-2.72rem;}
.content .mainBtn .btn{width:100%; height:100%; background:url(../img/homeBtn.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0;}
.logo{width:3.76rem; height:0.453rem; background:url(../img/logo.png) no-repeat; background-size: 100%; position: absolute; bottom: 4.57%; left: 50%; margin-left:-1.88rem; z-index: 1000;}
.mainBtnNote{font-size: 0.293rem; text-align: center; color: #ffffff; width: 100%; position: absolute; bottom: 12.76%;}
.pipeSection{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 100;}
.mainBgs{z-index: 200;}
.p3d{z-index: 0;}
#scene{width: 100%; height:100%;}
.bgTop{height: 75%; width: 100%; background-image: linear-gradient(#062c70, #236bb5); position: absolute; top: 0; left: 0;}
.bgBottom{height: 25%;width: 100%; background-image: linear-gradient(#236bb5, #276bb0); position: absolute; top: 75%; left: 0;}
.goTop{-webkit-animation: gotop 1000ms ease-in forwards;}
.goDown{-webkit-animation: godown 1000ms ease-in forwards;}
@-webkit-keyframes gotop{
	0%{transform: translateY(0);}
	100%{transform: translateY(-2000px);}
}
@-webkit-keyframes godown{
	0%{transform: translateY(0);}
	100%{transform: translateY(2000px);}
}

.maskImg{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.zTitle{width:7.24rem; height: 1.6rem; position: absolute; background: url(../img/zTitle.png) no-repeat; background-size: 100%; top: 50%; margin-top: -4.92rem; left: 50%; margin-left: -3.626rem;}
.sec{width:2.88rem; height: 2.88rem; position: absolute; background: url(../img/3.png) no-repeat; background-size: 100%; top: 50%; margin-top: -3.346rem; left: 50%; margin-left: -1.44rem;}
.section.sec2{-webkit-transform-style: preserve-3d;}
.boxMask{position: absolute; width: 100%; height: 100%; background:url(../img/mask2.png) no-repeat; background-size: 10rem auto; background-position: center;}
.maskIn{-webkit-animation: boxMaskIn 2000ms ease-out forwards;}
/*  */
.sec.sec_2.sec{background: url(../img/2.png) no-repeat; background-size: 100%;}
.sec.sec_3.sec{background: url(../img/1.png) no-repeat; background-size: 100%;}
.content>img{width: 100%; height: 100%;}
.shipDown{-webkit-animation: shipdown 1000ms ease-in forwards;}
.sec2In{-webkit-animation: sec2in 3000ms ease-out forwards;}

@-webkit-keyframes shipdown{
	0%{transform: translateY(0) scale(1); opacity: 1;}
	100%{transform: translateY(400px) scale(8); opacity: 0;}
}

@-webkit-keyframes sec2in{
	0%{-webkit-transform: translateZ(-2500px); opacity: 0;}
	100%{-webkit-transform: translateZ(0); opacity: 1;}
}
@-webkit-keyframes boxMaskIn{
	0%{background-size: 10rem auto;}
	50%{background-size: 10rem auto;}
	99%{background-size: 30rem auto;opacity: 1;}
	100%{background-size: 30rem auto; opacity: 0;}
}
@-webkit-keyframes pxMove{
	0%{-webkit-transform: translateX(0); opacity: 1;}
	50%{-webkit-transform: translateX(1.066rem); opacity: 1;} 
	100%{-webkit-transform: translateX(0); opacity: 1;}
}

.sec2_1{position: absolute; width:3.76rem; height:3.16rem; bottom:5.2rem;left: 50%; margin-left:-2rem; transform: translateZ(-1px); background: url(../img/s2_1.png) no-repeat; background-size: 100%;}
.sec2_2{position: absolute; width: 2.853rem; height:3.64rem; bottom:5.346rem; left:50%; margin-left:1.533rem; transform: translateZ(-0.266rem); background: url(../img/s2_2.png) no-repeat; background-size: 100%;}
.sec2_3{position: absolute; width: 1.88rem; height:2.626rem; bottom:8.4rem; left:50%; margin-left:0.104rem; transform: translateZ(-4rem); background: url(../img/s2_3.png) no-repeat; background-size: 100%;}
.sec2_4{position: absolute; width: 2.175rem; height:2.92rem; bottom:7.386rem; left:50%; margin-left:-4.773rem; transform: translateZ(-2.666rem); background: url(../img/s2_4.png) no-repeat; background-size: 100%;}
.sec2_5{position: absolute; width:1.642rem; height:3.266rem; bottom:8.493rem; left:50%; margin-left:5.36rem; transform: translateZ(-5.333rem); background: url(../img/s2_5.png) no-repeat; background-size: 100%;}
.sec2_6{position: absolute; width:8.826rem; height:14.56rem; bottom:7.8rem; left:50%; margin-left:-0.76rem; transform: translateZ(-6.666rem); background: url(../img/s2_6.png) no-repeat; background-size: 100%;}
.sec2_7{position: absolute; width:42.133rem; height:43.653rem; bottom:-2.906rem; left:50%; margin-left:-21.066rem; transform: translateZ(-13.333rem); background: url(../img/s2_bg2.png) no-repeat; background-size: 100%;}

.sec3_1{position: absolute; width:15.573rem; height:18.8rem; bottom:-1.853rem;left: 50%; margin-left:-7.786rem; transform: translateZ(-1px); background: url(../img/s3_1.png) no-repeat; background-size: 100%;}
.sec3_2{position: absolute; width:6.253rem; height:3.36rem; bottom:8.24rem;left: 50%; margin-left:-2.72rem; transform: translateZ(-1.333rem); transform-style: flat;}/*100*/
.sec3_2>img{width: 100%; height: 100%; position: absolute;}
.sec3_2 .px{position: absolute; width: 0.506rem; height: 0.426rem; bottom: 0.08rem; right: 1.186rem; background: url(../img/px.png) no-repeat; background-size: 100%;-webkit-animation: pxMove 6000ms infinite;}
.sec3_2 .hd1{position: absolute; width:0.44rem; height:1.12rem; top:0.233rem; left: 0.5rem; background: url(../img/s3_2_h1.png) no-repeat; background-size: 100%; transform-origin: right bottom; -webkit-animation: hdShake1 700ms ease-in-out infinite;}
.sec3_2 .hd2{position: absolute; width:0.453rem; height:1.08rem; top:0.233rem; left: 1.386rem; background: url(../img/s3_2_h2.png) no-repeat; background-size: 100%;transform-origin: left bottom; -webkit-animation: hdShake2 700ms ease-in-out infinite;}
.sec3_2 .hd3{position: absolute; width:0.493rem; height:1.16rem; top:0.32rem; left:2.66rem; background: url(../img/s3_2_h3.png) no-repeat; background-size: 100%; transform-origin: right bottom; -webkit-animation: hdShake1 900ms ease-in-out 300ms infinite;}
.sec3_2 .hd4{position: absolute; width:0.493rem; height:1.013rem; top:0.133rem; left:3.38rem; background: url(../img/s3_2_h4.png) no-repeat; background-size: 100%;transform-origin: 80% bottom; -webkit-animation: hdShake2 900ms ease-in-out 300ms infinite;}

@-webkit-keyframes hdShake1{
	0%{-webkit-transform: rotate(0deg);}
	50%{-webkit-transform: rotate(25deg);}
	100%{-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes hdShake2{
	0%{-webkit-transform: rotate(0deg);}
	50%{-webkit-transform: rotate(-25deg);}
	100%{-webkit-transform: rotate(0deg);}
}
@-webkit-keyframes shipMove{
	0%{bottom:19.76rem;left: 50%; margin-left:-5.08rem; transform:translateZ(-9.333rem) scale(1);}
	33%{bottom:20.146rem;left: 50%; margin-left:-11.24rem;transform:translateZ(-9.333rem) scale(0.8);} 
	66%{bottom:18.24rem;left: 50%; margin-left:-11.24rem;transform:translateZ(-9.333rem) scale(1.2);} 
	100%{bottom:19.76rem;left: 50%; margin-left:-5.08rem; transform:translateZ(-9.333rem) scale(1);}
}
@-webkit-keyframes boatRoll{
	0%{-webkit-transform: rotateY(0);left: 0;}
	33%{-webkit-transform: rotateY(0);left: 0;} 
	66%{-webkit-transform: rotateY(180deg);left: -1.586rem;} 
	100%{-webkit-transform:rotateY(180deg);left: -1.586rem;}
}

.sec3_3{position: absolute; width:6.754rem; height:4.946rem; bottom:19.76rem;left: 50%; margin-left:-5.08rem; transform: translateZ(-9.333rem);transform-style: flat;}/*700*/
.shipM{-webkit-animation: shipMove 12000ms linear infinite;}
.shipM .boat{-webkit-animation: boatRoll 12000ms steps(1, start) infinite;}
.sec3_3 .s_ship{position: absolute; width: 100%; height: 100%; background: url(../img/s3_3.png) no-repeat; background-size: 100%; transform-origin: left bottom;}
.sec3_3 .s_ship .boat{ position: absolute; width: 47%; height: 19.25%; background: url(../img/s3_3_ship.png) no-repeat;background-size: 100%; left: 0; bottom: 0;}
.sec3_4{position: absolute; width:31.146rem; height:46.72rem; bottom:-3.706rem;left: 50%; margin-left:-15.573rem; transform: translateZ(-13.333rem); background: url(../img/s3_4.png) no-repeat; background-size: 100%;}

.sec4_1{position: absolute; width:8.253rem; height:11.76rem; bottom:-0.08rem;left: 50%; margin-left:-8.56rem; transform: translateZ(-1.333rem); background: url(../img/s4_1.png) no-repeat; background-size: 100%;}
.sec4_2{position: absolute; width:13.84rem; height:14.186rem; bottom:8.106rem;left: 50%;  margin-left:-4.613rem; transform: translateZ(-8rem); background: url(../img/s4_2.png) no-repeat; background-size: 100%;}/*600*/
.sec4_3{position: absolute; width:6.053rem; height:10.306rem; bottom:16.36rem;left: 50%;  margin-left:-7.613rem; transform: translateZ(-9.333rem); background: url(../img/s4_3.png) no-repeat; background-size: 100%;}/*700*/
.sec4_4{position: absolute; width:31.146rem; height:46.72rem; bottom:-3.706rem;left: 50%;  margin-left:-15.6rem; transform: translateZ(-13.333rem); background: url(../img/s4_4.png) no-repeat; background-size: 100%;}/*1000*/
.sec4_5{position: absolute; width:31.146rem; height:43.013rem; bottom:-3.706rem;left: 50%;  margin-left:-15.6rem; transform: translateZ(-13.353rem); }/*1000*/
.sec4_6{position: absolute; width:20rem; height:13.946rem; bottom:21.706rem;left: 50%;  margin-left:-10rem; transform: translateZ(-13.383rem); background: url(../img/s4_6.jpg) no-repeat; background-size: 100%;}/*1000*/

.sec5_1{position: absolute; width:4.306rem; height:5.893rem; bottom:4.546rem;left: 50%; margin-left:0.498rem; transform: translateZ(-1.333rem); background: url(../img/s5_1.png) no-repeat; background-size: 100%;}
.sec5_2{position: absolute; width:8.592rem; height:15.453rem; bottom:8.106rem;left: 50%; margin-left:-6rem; transform: translateZ(-2.666rem); background: url(../img/s5_2.png) no-repeat; background-size: 100%;}
.mc{position: absolute; width:1.404rem;
 height:0.849rem; bottom:11.128rem;left: 50%; margin-left:2.733rem; transform: translateZ(-4rem); background: url(../img/mc.png) no-repeat; background-size: 100%;}
.mcRun{ -webkit-animation: mcrun 10000ms infinite;}

.sec5_3{position: absolute;transform-style: flat; width:17.34rem; height:9.946rem; bottom:13.12rem;left: 50%; margin-left:-5.802rem; transform: translateZ(-9.333rem); background: url(../img/s5_3.png) no-repeat; background-size: 100%;}
.sec5_3 .cat_t{width: 0.8rem; height: 0.3rem;transform-style: flat; position: absolute; background: url(../img/cat_t.png) no-repeat; background-size: 100%; left:2.313rem; top:4.96rem; transform-origin: 10% top;
 -webkit-animation: hdShake3 3000ms infinite;}
.sec5_4{position: absolute; width:31.146rem; height:46.72rem; bottom:-3.706rem;left: 50%; margin-left:-15.573rem; transform: translateZ(-13.333rem); background: url(../img/s5_4.png) no-repeat; background-size: 100%;}
@-webkit-keyframes hdShake3{
	0%{-webkit-transform: rotate(0deg);}
	50%{-webkit-transform: rotate(90deg);}
	100%{-webkit-transform: rotate(0deg);}
}

@-webkit-keyframes maskin{
	0%{-webkit-mask-size: 5rem 5rem;}
	100%{-webkit-mask-size: 25rem 25rem;}
}
@-webkit-keyframes mcrun{
	0%{bottom:11.128rem;left: 50%; margin-left:2.733rem;}
	25%{bottom:8.986rem;left: 50%; margin-left:-1.64rem;}
	30%{bottom:8.986rem;left: 50%; margin-left:-1.64rem;}
	55%{bottom:8.373rem;left: 50%; margin-left:3.933rem;}
	60%{bottom:8.373rem;left: 50%; margin-left:3.933rem;}
	95%{bottom:11.128rem;left: 50%; margin-left:2.733rem;}
}

#world{width: 100%; height: 100%; position: absolute;}

.faceMask{ position: absolute; width: 1.48rem; height: 1.626rem; -webkit-mask: url(../img/tearMask.png); -webkit-mask-size: 1.48rem 1.626rem;  left: 2.84rem; top: 0.44rem;}
.tear{width: 1.866rem; height: 0.28rem; position: absolute; background: url(../img/tear.png) repeat-x; background-size: 1.866rem 0.28rem;-webkit-animation: tearRun 3000ms linear infinite; transform-origin: left center;}
@-webkit-keyframes tearRun{
	0%{background-position: 0 0;}
	100%{background-position: 1.866rem 0; }
}
.tear1{left: 0.723rem; top: 0.5rem; transform: rotate(36.84deg);}
.tear2{left: 0.26rem; top: 0.513rem; transform: rotate(90deg);}
.youIcon{position: absolute; width: 0.68rem; height: 0.786rem; background: url(../img/youIcon.png) no-repeat; background-size: 100%; transform-origin: left bottom; left: 4.453rem; top: 0;-webkit-animation: iconRun 1200ms linear infinite;}
@-webkit-keyframes iconRun{
	0%{transform: scale(1);}
	10%{transform: scale(1.2);}
	20%{transform: scale(1);}
	30%{transform: scale(1.2);}
	40%{transform: scale(1);}
	100%{transform: scale(1);}
}
.ship{width: 6.653rem; height: 3.666rem; position: absolute; background: url(../img/ship.png) no-repeat;  background-size: 100%; bottom: 4rem; transform-origin:center 25% ; left: 50%; margin-left: -3.333rem;}
.shipIn{-webkit-animation: shipin 2000ms ease-out forwards;}
.shipOut{-webkit-animation: shipout 2000ms ease-in-out forwards;}
.cabin{position: absolute; width: 10rem; height: 6.6rem; bottom: 0; left: 0;  background: url(../img/cabin.png) no-repeat; background-size: 100%; opacity: 0;}
.cabin2{position: absolute; width:14.933rem; height:9.08rem; bottom:-2.48rem; left: 50%; margin-left: -7.466rem; background: url(../img/cabin2.png) no-repeat; background-size: 100%; transform-origin:center top;  }
.cabinIn{-webkit-animation: cabinin 2000ms ease-in-out forwards;}
.cabinOut{-webkit-animation: cabinout 1000ms ease-in forwards;}
@-webkit-keyframes shipin{
	0%{transform: translateY(5.333rem);}
	100%{transform: translateY(0);}
}
@-webkit-keyframes shipout{
	0%{transform: scale(1) translateY(0rem); opacity: 1;}
	100%{transform: scale(16) translateY(-0.05rem); opacity: 0;}
}
@-webkit-keyframes cabinin{
	0%{transform: scale(0.1) translateY(0); opacity: 0;}
	100%{transform: scale(1) translateY(0); opacity: 1;}
}
@-webkit-keyframes cabinout{
	/*
	0%{transform: scale(1) translateY(0); opacity: 1;}
	100%{transform: scale(1) translateY(8rem); opacity: 1;}
	*/
	0%{transform: scale(1) translateY(0); opacity: 1;}
	100%{transform: scale(0.02) translateY(0); opacity: 0;}
	
}

/* loading Section */
.loadingSection{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(#062c70, #276bb0); z-index: 500;}
.loadingTxt{font-size:0.4rem; color: #a0c7ec; position: absolute; top: 45%; width: 100%; left: 0; text-align: center;}


.sec3_bg{position: absolute; width:20rem; height:35.573rem; bottom:0; left:50%; margin-left:-10rem; transform: translateZ(-13.333rem); background: url(../img/2.jpg) no-repeat; background-size: 100%;}
.sec4_bg{position: absolute; width:20rem; height:35.573rem; bottom:0; left:50%; margin-left:-10rem; transform: translateZ(-13.333rem); background: url(../img/3.jpg) no-repeat; background-size: 100%;}
.sec5_bg{position: absolute; width:20rem; height:35.573rem; bottom:0; left:50%; margin-left:-10rem; transform: translateZ(-13.333rem); background: url(../img/4.jpg) no-repeat; background-size: 100%;}

.homeTitleIn{-webkit-animation: homeTitlein 1000ms ease-in forwards;}
.mainSec .mainTitle{transform:translateY(-7.2rem);}
.mainSec .you{transform: scale(0.1); opacity: 0;}
.pop1{position: absolute; width: 3.106rem; height: 1.8rem; background: url(../img/pop1.png) no-repeat; background-size: 100%;  top: 1.12rem; left: 0; transform-origin: right 60%;}
.pop2{position: absolute; width:3.253rem; height: 2.133rem; background: url(../img/pop2.png) no-repeat; background-size: 100%;  top:2.56rem; left: 4.64rem; transform-origin: left 60%;}
.newMsg{position: absolute; width: 2.973rem; height: 2.093rem; opacity: 0; transform: scale(0.1); background: url(../img/newMessage.png) no-repeat; background-size: 100%; top: 4.08rem; left:0; transform-origin: 80% top;}
.mainSec .pop1{transform: scale(0.1); opacity: 0;}
.mainSec .pop2{transform: scale(0.1); opacity: 0;}
.mainSec .mainBtnNote{opacity: 0; transform: translateY(0.4rem);}
.mainSec .mainBtn {transform: scale(0.1); opacity: 0;}
.mainSec .mainBtn .btn{-webkit-animation: btnShake 4000ms infinite;}
@-webkit-keyframes btnShake{
	0%{transform: scale(1);}
	5%{transform: scale(1.1); }
	10%{transform: scale(1); }
	15%{transform: scale(1.1); }
	20%{transform: scale(1); }
}

.sec6 .viewBtn{width:5.213rem; height:2.906rem; position: absolute; bottom: 12.77%; left: 50%; margin-left:-2.72rem;transform: scale(0.1); opacity: 0;}
.sec6 .viewBtn .btn{width:100%; height:100%; background:url(../img/viewMsg.png) no-repeat; background-size: 100%; position: absolute; left: 0; top: 0;-webkit-animation: btnShake 4000ms infinite;}

.phoneBox{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.phoneBox .right_hand{position: absolute; width: 15.466rem; height: 22.68rem; background: url(../img/right_hand.png) no-repeat; background-size: 100%; top: 4.146rem; left: 0.84rem; transform: translateY(10.666rem) rotate(-90deg);}
.phoneBox .left_hand{position: absolute; width:10.4rem; height:15.733rem; top:10.56rem; left:-3.4rem; transform: translateX(5rem) translateY(10.666rem);}
.phoneBox .left_hand .hand{position: absolute; width:100%; height:100%; background: url(../img/left_hand.png) no-repeat; background-size: 100%; top:0; left:0;}
.click{-webkit-animation: clickAni 500ms forwards;}
.screen{position: absolute; width:6.84rem; height: 10.573rem; -webkit-mask: url(../img/phone_mask.png); -webkit-mask-size: 100% 100%; left: 1.4rem; top: 0.306rem;}
.timeSpan{position: absolute; width: 0.973rem; height: 0.266rem; left: 2.426rem; top: 1.946rem; background: url(../img/timeSpan.png) no-repeat; background-size: 100%; opacity: 0;}
.msg1{position: absolute; width:4.933rem; height:2.186rem; left:0.426rem; top:2.093rem; background: url(../img/msg1.png) no-repeat; background-size: 100%;transform: translateX(0.106rem) translateY(0.666rem); opacity: 0;}
.msg2{position: absolute; width:4.946rem; height:2.253rem; left:0.706rem; top:3.773rem; background: url(../img/msg2.png) no-repeat; background-size: 100%;transform: translateX(0.106rem) translateY(0.666rem); opacity: 0;}
.msg3{position: absolute; width:5.026rem; height:2.28rem; left:0.973rem; top:5.413rem; transform: translateX(0.106rem) translateY(0.666rem); opacity: 0;}
.msg3ray{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url(../img/msg3ray.png) no-repeat; background-size: 100%;-webkit-animation: ray 1000ms ease-in-out  infinite;}
.msg3txt{position: absolute; width:4.866rem; height: 2.133rem; left: 0.066rem; top: 0.093rem; background: url(../img/msg3.png) no-repeat; background-size: 100%;}
@-webkit-keyframes clickAni{
	0%{transform: translateY(0);}
	50%{transform:translateY(0.133rem); }
	100%{transform:translateY(0); }
}

.fastTxt{ position: absolute; width: 4.84rem; height: 1.746rem; background: url(../img/fastTxt.png) no-repeat; background-size: 100%; top: 50%; margin-top: -4.92rem; left: 50%; margin-left:-2.0rem;display: none;}
.clock{position: absolute; width: 3.173rem; height: 3.173rem; left: 50%; margin-left: -1.586rem; top: 50%; margin-top: -3.346rem; left: 50%;display: none;}
.clock .clockBody{position: absolute; width: 100%; height: 100%; background: url(../img/clock.png) no-repeat; background-size: 100%;-webkit-animation: roll 3000ms linear infinite;}
.clock .min{position: absolute; width: 100%; height: 100%; background: url(../img/min.png) no-repeat; background-size: 100%; -webkit-animation: roll 500ms linear  infinite;}
@-webkit-keyframes roll{
	0%{transform:rotate(0); }
	100%{transform:rotate(360deg); }
}
@-webkit-keyframes rollback{
	0%{transform:rotate(0); }
	100%{transform:rotate(-360deg); }
}

@-webkit-keyframes ray{
	0%{opacity:0; }
	50%{opacity:1; }
	100%{opacity: 0;}
}

.cabinCover{position: absolute; width:14.933rem; height:9.08rem; bottom:-2.48rem; left: 50%; margin-left: -7.466rem;   }
.cabin2{ opacity: 0;}
.cabinCover .fastTxt{width: 3.466rem; height: 1.253rem; left:50%; margin-left: -1.533rem; top: 1.2rem !important; margin-top: 0; display: none;}
.cabinCover .clock {width: 2.133rem; height: 2.133rem ; left: 50%; margin-left: -3.6rem; top: 3.8rem !important; margin-top: 0; transform: rotateX(45deg) rotateY(-5deg) translateZ(1rem); display: none;}

.clock.back .clockBody{-webkit-animation: rollback 3000ms linear  infinite;}
.clock.back .min{-webkit-animation: rollback 500ms linear  infinite;}

.tipNext{ position: absolute; width:0.946rem; height:0.28rem; left: 50%; top:3.76rem; margin-left:2.55rem; background: url(../img/tip_next.png) no-repeat; background-size: 100%; opacity: 0; transform: translateY(-0.2rem);}
.tipBack{ position: absolute; width:1.506rem; height: 0.493rem; left: 50%; top:3.76rem; margin-left: 0.12rem;  background: url(../img/tip_back.png) no-repeat; background-size: 100%; opacity: 0; transform: translateY(-0.2rem);}
.tipNext.show{opacity: 1; transform: translateY(0); transition: all 0.3s;}
.tipBack.show{opacity: 1; transform: translateY(0); transition: all 0.3s;}
.nextBtn{ position: absolute; width: 1.773rem; height: 1.293rem; left: 50%; top:3.933rem; margin-left: 2.106rem; background-size: 100%;}
.backBtn{ position: absolute; width: 1.773rem; height: 1.293rem; left: 50%; top:3.933rem; margin-left: -0.146rem; background-size: 100%;}

.t1{position: absolute; width: 6.253rem; height: 2.506rem; top: 0.506rem; left: 50%; margin-left: -3.033rem; background: url(../img/t1.png) no-repeat; background-size: 100%; display: none;}
.tm1{position: absolute; width:2.226rem; height:1.506rem; top:3.766rem; left: 50%; margin-left:-3.74rem; background: url(../img/tm1.png) no-repeat; background-size: 100%; display: none;}
.t2{position: absolute; width: 6.253rem; height: 2.506rem; top: 0.506rem; left: 50%; margin-left: -3.033rem; background: url(../img/t2.png) no-repeat; background-size: 100%; display: none;}
.tm2{position: absolute; width:2.226rem; height:1.506rem; top:3.766rem; left: 50%; margin-left:-3.74rem; background: url(../img/tm2.png) no-repeat; background-size: 100%; display: none;}
.t3{position: absolute; width: 6.253rem; height: 2.506rem; top: 0.506rem; left: 50%; margin-left: -3.033rem; background: url(../img/t3.png) no-repeat; background-size: 100%; display: none;}
.tm3{position: absolute; width:2.226rem; height:1.506rem; top:3.766rem; left: 50%; margin-left:-3.74rem; background: url(../img/tm3.png) no-repeat; background-size: 100%; display: none;}
.t4{position: absolute; width: 6.253rem; height: 2.506rem; top: 0.506rem; left: 50%; margin-left: -3.033rem; background: url(../img/t4.png) no-repeat; background-size: 100%; display: none;}
.tm4{position: absolute; width:2.226rem; height:1.506rem; top:3.766rem; left: 50%; margin-left:-3.74rem; background: url(../img/tm4.png) no-repeat; background-size: 100%; display: none;}
#firework{left: 12rem; top: 0.626rem; position: absolute;}


.skipBtn{position: absolute; width: 1.6rem; height: 0.96rem; background: url(../img/skipBtn.png) no-repeat; right: 0; bottom: 0.2rem; background-size: 100%; z-index: 1000; display: none;}
.kkk2{position: absolute; width: 1.88rem; height: 1.066rem; left: 50%; margin-left: -0.08rem; top: 4.253rem; background: url(../img/kkk2.png) no-repeat; background-size: 100%; opacity: 0;}
.kkk1{position: absolute; width:2.026rem; height: 1.2rem; left: 50%; margin-left: 2.053rem; top: 4.173rem; background: url(../img/kkk1.png) no-repeat; background-size: 100%; opacity: 0;}
.kkray{-webkit-animation: ray 600ms ease-in-out  infinite;}
.soundBtn{position: absolute; width: 0.933rem; height: 0.946rem; background: url(../img/soundon.png) no-repeat; background-size: 100%; right: 0.146rem; top: 0.146rem; z-index: 1000;}
.soundBtn.off{position: absolute; width: 0.933rem; height: 0.946rem; background: url(../img/soundoff.png) no-repeat; background-size: 100%; right: 0.146rem; top: 0.146rem; z-index: 1000; display: none;}

.music-btn{
	display: none;
    position: fixed;
    width: 0.9rem;
    height: 0.9rem;
    top: 0.6rem;
    right: 0.2rem;
    z-index: 1000;}
.music-btn .disk{
    background: url(../img/disk.png) no-repeat;
    background-size: 100% auto;
    position: absolute;
    width: 0.56rem;
    height: 0.56rem;
    left: 0.12rem;
    top: 0.18rem;
    }
.music-btn .icon{
background: url(../img/music_btn.png) 0 0 no-repeat;
    background-size: 0.9rem 1.8rem;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.music-btn.off .icon{background-position: 0 -0.9rem;}
.zRotate {
	-webkit-animation: zRotate 2s 0s infinite linear both;
}
@-webkit-keyframes zRotate {
	0% {
		-webkit-transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
.music-btn.off .disk {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}