* {margin: 0;padding: 0;}
a,div{-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;}
html,body{margin: 0; padding: 0; width: 100%; height: 100%; text-align: center; background: #000;}
section{width: 10rem;min-height: 14.88rem;  max-height: 16.226666rem;height: 100%; position: absolute; margin: auto; overflow: hidden;}
#container{overflow:hidden;width: 10rem; height: 100%; left: 0; top: 0;}
.logo{width: 3.386666rem; height: 0.4rem; position: absolute; left: 0.4rem; top: 0.333333rem; background: url(../images/logo.png); background-size: 100% 100%; z-index: 1000;}
.musicBtn{width: 0.666666rem; height: 0.706666rem; display: block; position: absolute; right: 0.266666rem; top: 0.346666rem;background:url(../images/musicBtn.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(0deg);}
	75%{-webkit-transform:rotate(0deg);}
}
.arraw{width: 0.693333rem; height: 0.28rem; position: absolute; left: 50%; margin-left: -0.333333rem; bottom: 0.56rem; opacity: 0;-webkit-transition: all 1000ms;}
.arraw img{ position: absolute; width: 100%; height: 100%; left:0; top:0;-webkit-animation: ar 1000ms ease-in-out infinite;}
@-webkit-keyframes ar{   
	0%{-webkit-transform: translateY(0);}
	50%{-webkit-transform: translateY(0.133333rem);}
	100%{-webkit-transform: translateY(0);}
}
.in .arraw{opacity: 1;}
.out .arraw{opacity: 0;}

.bgParticles{position: absolute; left: 0; top: 0; width: 100%; min-height: 14.88rem;  max-height: 16.226666rem;height: 100%; z-index: 200; }
.bgParticles canvas{z-index: 1; position: absolute; left: 0; top: 0;}
.loadingSection{z-index: 300;}
.loadingSection .loadingPer{position: absolute; left: 50%; width: 200px; margin-left: -100px; top: 8.333333rem; font-size: 14px; color: #ece0ad; opacity: 1;-webkit-transition: all 1000ms;}   
.loadingSection .loadingTxt{position: absolute; left: 50%; width: 200px; margin-left: -100px; top: 7.573333rem; font-size: 14px; color: #ece0ad; opacity: 1;-webkit-transition: all 1000ms;}
.loadingSection .hourglass{position: absolute; width: 6.626666rem;height: 10.613333rem; bottom: 3.493333rem; left: 50%; margin-left: -3.186666rem; background: url(../images/hourglass.png); -webkit-transform: translateX(-0.07rem) translateY(-1rem)  scale(0.187); background-size: 100% 100%; -webkit-transition: all 1000ms;}
.loadingSection .hourglassRay{position: absolute; width: 7.746666rem; height: 2.2rem; left: 50%; margin-left: -3.88rem; bottom: 2.8rem; background: url(../images/hourglass_ray.png); background-size: 100% 100%; opacity: 0;-webkit-transform: translateY(-3.9rem)  scale(0.187); -webkit-transition: all 1000ms;}
.loadingSection .hourglassBtn{position: absolute; width: 3.666666rem; height: 4.093333rem; left: 50%; margin-left: -1.826666rem; bottom: 1.693333rem; background: url(../images/hourglass_button.png); background-size: 100% 100%; opacity: 0; -webkit-transition: all 1000ms; display: none; text-align: center;}
.loadingSection .hourglassBtn .btnRay{position: absolute; width: 1.506666rem; height: 1.506666rem; left: 50%; margin-left: -0.76rem; top:-0.626666rem; background: url(../images/btnRay.png); background-size: 100% 100%;
-webkit-animation: btnRayAni 2000ms infinite;}
@-webkit-keyframes btnRayAni{   
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0}
}
.in .loadingPer{ opacity: 0;}
.in .loadingTxt{opacity: 0;}
.in .hourglass{ -webkit-transform: translateX(0rem) translateY(0)  scale(1);}
.in .hourglassBg{opacity: 1;}
.in .hourglassRay{opacity: 1;-webkit-transform: translateY(0rem)  scale(1);}
.in .hourglassBtn{-webkit-animation: hourglassBtnIn  1000ms  forwards;opacity: 0; display: block;}

.out .hourglass{-webkit-transform: rotate(186deg) translateY(-12rem) scale(5) ; opacity: 0; -webkit-transition: all 2000ms;}
.out .hourglassBg{-webkit-transform: rotate(5deg)  scale(1.6) ; opacity: 0;}
.out .hourglassRay{opacity: 0;}
.out .hourglassBtn{-webkit-animation: hourglassBtnOut  1000ms  forwards;opacity: 1; display: block;}

.section01{opacity: 0;z-index: 0;}
.section01 .section01Bg{position: absolute;width: 10rem; height: 17.013333rem; left: 50%; margin-left: -5rem; top: 50%; margin-top:-8.506666rem; background: url(../images/section01_Bg.jpg); background-size: 100% 100%; }
.section01 .section01Mask{position: absolute;width: 10rem; height: 100%; left: 0;top: 0;  background: url(../images/section0_mask.png); background-size: 100% 100%; }
.section01 .section01C1{position: absolute;width: 10rem; height: 10.88rem; left: 0;top: 0;  background: url(../images/section01_c1.png); background-size: 100% 100%;}
.section01 .section01Text{position: absolute;width: 0.4rem; height: 6.866666rem; left: 0.893333rem;top: 50%; margin-top: -2.493333rem;  background: url(../images/section01_text.png); background-size: 100% 100%; }

.forword .in .section01Bg{-webkit-animation: bgIn  1500ms forwards;opacity: 0;}
.backword .in .section01Bg{-webkit-animation: bgbkIn  1500ms  forwards;opacity: 0;}
.in .section01Mask{-webkit-animation: fadeIn  1500ms  forwards;opacity: 0;}
.forword .in .section01C1{-webkit-animation: section01C1In  1500ms 500ms  forwards;opacity: 0;}
.backword .in .section01C1{-webkit-animation: section01C1bkIn  1500ms 500ms  forwards;opacity: 0;}
.in .section01Text{-webkit-animation: section01TextIn  1500ms 500ms  forwards;opacity: 0;}

.forword .out .section01Bg{-webkit-animation: bgOut  1500ms  forwards;opacity: 1;}
.backword .out .section01Bg{-webkit-animation: bgbkOut  1500ms  forwards;opacity: 1;}
.out .section01Mask{-webkit-animation: fadeOut  1500ms  forwards;opacity: 1;}
.forword .out .section01C1{-webkit-animation: section01C1Out  1500ms  forwards;opacity: 1;}
.backword .out .section01C1{-webkit-animation: section01C1bkOut  1500ms  forwards;opacity: 1;}
.out .section01Text{-webkit-animation: section01TextOut  1500ms  forwards;opacity: 1;}


.section02{opacity: 0;z-index: 0;}
.section02 .section02Bg{position: absolute;width: 10rem; height: 16.16rem; left: 50%; margin-left: -5rem; top: 50%; margin-top:-8.08rem; background: url(../images/section02_Bg.jpg); background-size: 100% 100%;}
.section02 .section02Mask{position: absolute;width: 10rem; height: 100%; left: 0;top: 0;  background: url(../images/section0_mask.png); background-size: 100% 100%; }
.section02 .section02C1{position: absolute;width:8.76rem; height: 11.92rem; right: 0;bottom: 0;  background: url(../images/section02_c1.png); background-size: 100% 100%; -webkit-transform-origin: 50% 100%;}
.section02 .section02Text{position: absolute;width: 0.4rem; height: 3.466666rem; left: 0.906666rem;top: 50%; margin-top: -2.466666rem;  background: url(../images/section02_text.png); background-size: 100% 100%;}

.forword .in .section02Bg{-webkit-animation: bgIn  1500ms  forwards;opacity: 0;}
.backword .in .section02Bg{-webkit-animation: bgbkIn  1500ms  forwards;opacity: 0;}
.in .section02Mask{-webkit-animation: fadeIn  1500ms  forwards;opacity: 0;}
.forword .in .section02C1{-webkit-animation: section02C1In  1500ms 500ms  forwards;opacity: 0;}
.backword .in .section02C1{-webkit-animation: section02C1bkIn  1500ms 500ms  forwards;opacity: 0;}
.in .section02Text{-webkit-animation: section01TextIn  1500ms 500ms  forwards;opacity: 0;}

.forword .out .section02Bg{-webkit-animation: bgOut  1500ms  forwards;opacity: 1;}
.backword .out .section02Bg{-webkit-animation: bgbkOut  1500ms  forwards;opacity: 1;}
.out .section02Mask{-webkit-animation: fadeOut  1500ms  forwards;opacity: 1;}
.forword .out .section02C1{-webkit-animation: section02C1Out  1500ms  forwards;opacity: 1;}
.backword .out .section02C1{-webkit-animation: section02C1bkOut  1500ms  forwards;opacity: 1;}
.out .section02Text{-webkit-animation: section01TextOut  1500ms  forwards;opacity: 1;}


.section03{opacity: 0;z-index: 0;}
.section03 .section03Bg{position: absolute;width: 10rem; height: 16.16rem; left: 50%; margin-left: -5rem; top: 50%; margin-top:-8.08rem; background: url(../images/section03_Bg.jpg); background-size: 100% 100%;}
.section03 .section03Mask{position: absolute;width: 10rem; height: 100%; left: 0;top: 0;  background: url(../images/section0_mask.png); background-size: 100% 100%; }
.section03 .section03C1{position: absolute;width:8.76rem; height: 11.92rem; right: 0;bottom: 0;  background: url(../images/section02_c1.png); background-size: 100% 100%; -webkit-transform-origin: 50% 100%;}
.section03 .section03Text{position: absolute;width: 0.4rem; height: 3.986666rem; left: 0.893333rem;top: 50%; margin-top: -2.493333rem;  background: url(../images/section03_text.png); background-size: 100% 100%;}

.forword .in .section03Bg{-webkit-animation: bgIn  1500ms  forwards;opacity: 0;}
.backword .in .section03Bg{-webkit-animation: bgbkIn  1500ms  forwards;opacity: 0;}
.in .section03Mask{-webkit-animation: fadeIn  1500ms  forwards;opacity: 0;}
.forword .in .section03C1{-webkit-animation: section02C1In  1500ms 500ms  forwards;opacity: 0;}
.backword .in .section03C1{-webkit-animation: section02C1bkIn  1500ms 500ms  forwards;opacity: 0;}
.in .section03Text{-webkit-animation: section01TextIn  1500ms 500ms  forwards;opacity: 0;}

.forword .out .section03Bg{-webkit-animation: bgOut  1500ms  forwards;opacity: 1;}
.backword .out .section03Bg{-webkit-animation: bgbkOut  1500ms  forwards;opacity: 1;}
.out .section03Mask{-webkit-animation: fadeOut  1500ms  forwards;opacity: 1;}
.forword .out .section03C1{-webkit-animation: section02C1Out  1500ms  forwards;opacity: 1;}
.backword .out .section03C1{-webkit-animation: section02C1bkOut  1500ms  forwards;opacity: 1;}
.out .section03Text{-webkit-animation: section01TextOut  1500ms  forwards;opacity: 1;}

.section04{opacity: 0;z-index: 0;}
.section04 .section04Bg{position: absolute;width: 10rem; height: 16.16rem; left: 50%; margin-left: -5rem; top: 50%; margin-top:-8.08rem; background: url(../images/section04_Bg.jpg); background-size: 100% 100%;}
.section04 .section04Mask{position: absolute;width: 10rem; height: 100%; left: 0;top: 0;  background: url(../images/section0_mask.png); background-size: 100% 100%; }
.section04 .section04C1{position: absolute;width:8.76rem; height: 11.92rem; right: 0;bottom: 0;  background: url(../images/section02_c1.png); background-size: 100% 100%; -webkit-transform-origin: 50% 100%;}
.section04 .section04Text{position: absolute;width: 0.4rem; height: 3.466666rem; left: 0.893333rem;top: 50%; margin-top: -2.44rem;  background: url(../images/section04_text.png); background-size: 100% 100%;}

.forword .in .section04Bg{-webkit-animation: bgIn  1500ms  forwards;opacity: 0;}
.backword .in .section04Bg{-webkit-animation: bgbkIn  1500ms  forwards;opacity: 0;}
.in .section04Mask{-webkit-animation: fadeIn  1500ms  forwards;opacity: 0;}
.forword .in .section04C1{-webkit-animation: section02C1In  1500ms 500ms  forwards;opacity: 0;}
.backword .in .section04C1{-webkit-animation: section02C1bkIn  1500ms 500ms  forwards;opacity: 0;}
.in .section04Text{-webkit-animation: section01TextIn  1500ms 500ms  forwards;opacity: 0;}

.forword .out .section04Bg{-webkit-animation: bgOut  1500ms  forwards;opacity: 1;}
.backword .out .section04Bg{-webkit-animation: bgbkOut  1500ms  forwards;opacity: 1;}
.out .section04Mask{-webkit-animation: fadeOut  1500ms  forwards;opacity: 1;}
.forword .out .section04C1{-webkit-animation: section02C1Out  1500ms  forwards;opacity: 1;}
.backword .out .section04C1{-webkit-animation: section02C1bkOut  1500ms  forwards;opacity: 1;}
.out .section04Text{-webkit-animation: section01TextOut  1500ms  forwards;opacity: 1;}


.section05{opacity: 0;z-index: 0;}
.section05 .section05Bg{position: absolute;width: 10rem; height: 16.16rem; left: 50%; margin-left: -5rem; top: 50%; margin-top:-8.08rem; background: url(../images/section05_Bg.jpg); background-size: 100% 100%;}
.section05 .section05Mask{position: absolute;width: 10rem; height: 100%; left: 0;top: 0;  background: url(../images/section0_mask.png); background-size: 100% 100%; }
.section05 .section05C1{position: absolute;width:8.76rem; height: 11.92rem; right: 0;bottom: 0;  background: url(../images/section02_c1.png); background-size: 100% 100%; -webkit-transform-origin: 50% 100%;}
.section05 .section05Text{position: absolute;width: 0.4rem; height: 3.986666rem; left: 0.88rem;top: 50%; margin-top: -2.506666rem;  background: url(../images/section05_text.png); background-size: 100% 100%;}

.forword .in .section05Bg{-webkit-animation: bgIn  1500ms  forwards;opacity: 0;}
.backword .in .section05Bg{-webkit-animation: bgbkIn  1500ms  forwards;opacity: 0;}
.in .section05Mask{-webkit-animation: fadeIn  1500ms  forwards;opacity: 0;}
.forword .in .section05C1{-webkit-animation: section02C1In  1500ms 500ms  forwards;opacity: 0;}
.backword .in .section05C1{-webkit-animation: section02C1bkIn  1500ms 500ms  forwards;opacity: 0;}
.in .section05Text{-webkit-animation: section01TextIn  1500ms 500ms  forwards;opacity: 0;}

.forword .out .section05Bg{-webkit-animation: bgOut  1500ms  forwards;opacity: 1;}
.backword .out .section05Bg{-webkit-animation: bgbkOut  1500ms  forwards;opacity: 1;}
.out .section05Mask{-webkit-animation: fadeOut  1500ms  forwards;opacity: 1;}
.forword .out .section05C1{-webkit-animation: section02C1Out  1500ms  forwards;opacity: 1;}
.backword .out .section05C1{-webkit-animation: section02C1bkOut  1500ms  forwards;opacity: 1;}
.out .section05Text{-webkit-animation: section01TextOut  1500ms  forwards;opacity: 1;}

.section06{opacity: 0;z-index: 0;}
.section06 .section06Bg{position: absolute;width: 10rem; height: 16.293333rem; left: 50%; margin-left: -5rem; top: 50%; margin-top:-8.146666rem; background: url(../images/section06_Bg.jpg); background-size: 100% 100%;}
.section06 .section06Mask{position: absolute;width: 10rem; height: 100%; left: 0;top: 0;  background: url(../images/section0_mask.png); background-size: 100% 100%; }
.section06 .section06C1{position: absolute;width:5.973333rem; height: 12.573333rem; right: 0;bottom: 0;  background: url(../images/section06_c1.png); background-size: 100% 100%; -webkit-transform-origin: 50% 100%; }
.section06 .section06Text{position: absolute;width: 0.4rem; height: 3.466666rem; left: 0.906666rem;top: 50%; margin-top: -2.466666rem;  background: url(../images/section06_text.png); background-size: 100% 100%; }

.forword .in .section06Bg{-webkit-animation: bgIn  1500ms  forwards;opacity: 0;}
.backword .in .section06Bg{-webkit-animation: bgbkIn  1500ms  forwards;opacity: 0;}
.in .section06Mask{-webkit-animation: fadeIn  1500ms  forwards;opacity: 0;}
.forword .in .section06C1{-webkit-animation: section02C1In  1500ms 500ms  forwards;opacity: 0;}
.backword .in .section06C1{-webkit-animation: section02C1bkIn  1500ms 500ms  forwards;opacity: 0;}
.in .section06Text{-webkit-animation: section01TextIn  1500ms 500ms  forwards;opacity: 0;}

.forword .out .section06Bg{-webkit-animation: bgOut  1500ms  forwards;opacity: 1;}
.backword .out .section06Bg{-webkit-animation: bgbkOut  1500ms  forwards;opacity: 1;}
.out .section06Mask{-webkit-animation: fadeOut  1500ms  forwards;opacity: 1;}
.forword .out .section06C1{-webkit-animation: section02C1Out  1500ms  forwards;opacity: 1;}
.backword .out .section06C1{-webkit-animation: section02C1bkOut  1500ms  forwards;opacity: 1;}
.out .section06Text{-webkit-animation: section01TextOut  1500ms  forwards;opacity: 1;}


.homeSection{ z-index: 290;}
.homeSection .hourglass{position: absolute; width: 6.626666rem;height: 10.613333rem; bottom: 3.493333rem; left: 50%; margin-left: -3.186666rem; background: url(../images/hourglass.png);  background-size: 100% 100%; opacity: 0;}
.homeSection .hourglassRay{position: absolute; width: 7.746666rem; height: 2.2rem; left: 50%; margin-left: -3.88rem; bottom: 2.8rem; background: url(../images/hourglass_ray.png); background-size: 100% 100%; opacity: 0;}
.homeSection .hourglassBtn{position: absolute;  width: 3.666666rem; height: 4.093333rem; left: 50%; margin-left: -1.826666rem; bottom: 1.693333rem; background: url(../images/hourglass_button.png); background-size: 100% 100%; opacity: 0; -webkit-transition: all 1000ms; display: none;}
.homeSection .homeText1{position: absolute; width: 0.4rem; height: 5.066666rem; left: 50%; margin-left: 0.28rem; top: 6.333333rem; background: url(../images/mainText1.png); background-size: 100% 100%; opacity: 0;}
.homeSection .homeText2{position: absolute; width: 0.4rem; height: 4.653333rem; left: 50%; margin-left: -0.573333rem; top: 6.333333rem; background: url(../images/mainText2.png); background-size: 100% 100%; opacity: 0;}
.homeSection .hourglassBtn .btnRay{position: absolute; width: 1.506666rem; height: 1.506666rem; left: 50%; margin-left: -0.76rem; top:-0.626666rem; background: url(../images/btnRay.png); background-size: 100% 100%;
-webkit-animation: btnRayAni 2000ms infinite;}

.homeSection.in .hourglass{ -webkit-animation: homeHourglassIn  1000ms  forwards;opacity: 0;}
.homeSection.in .hourglassBg{-webkit-animation: fadeIn  1000ms  forwards;opacity: 0;}
.homeSection.in .hourglassRay{-webkit-animation: homeHourglassRayIn2  1000ms  forwards;opacity: 0;}
.homeSection.in .hourglassBtn{-webkit-animation: hourglassBtnIn  1000ms  forwards;opacity: 0; display: block;}

@-webkit-keyframes homeHourglassRayIn2{   
	0%{-webkit-transform: translateY(3.9rem)  scale(0.187); opacity: 0; }
	100%{-webkit-transform: translateY(0rem)  scale(1);opacity: 1;}
}

.homeSection.out .hourglass{-webkit-animation: homeHourglassOut  3000ms  forwards;opacity: 0;}
.homeSection.out .hourglassBg{-webkit-animation: fadeOut  1000ms  forwards;opacity: 0;}
.homeSection.out .hourglassRay{-webkit-animation: homeHourglassRayOut  3000ms  forwards;opacity: 1;}
.homeSection.out .hourglassBtn{-webkit-animation: hourglassBtnOut  1000ms  forwards;opacity: 1; display: block;}
.homeSection.out .homeText1{-webkit-animation: homeTextOut  3000ms  forwards;opacity: 0;}
.homeSection.out .homeText2{-webkit-animation: homeTextOut  3000ms 500ms  forwards;opacity: 0;}


.mainSection{-webkit-perspective: 500px;-webkit-transform-style: preserve-3d;-webkit-perspective-origin: 50% 50%;}
.mainSection .desktop{position:absolute;width: 21.026666rem; height: 15.973333rem; left: 0; -webkit-transform: translate3d(-1rem, 0px, 0px);}
.mainSection .desktopbg{position:absolute;width: 21.026666rem; height: 15.973333rem; top: 0; top: 0; background: url(../images/mainBg.jpg);background-size: 100% 100%; opacity: 0;}
.mainSection .card{position: absolute; width: 5.68rem; height: 3.586666rem; left: 50%; margin-left: -2.84rem; top: 5.56rem; background: url(../images/card.png); background-size: 100% 100%; opacity: 0;-webkit-transform-style: preserve-3d; -webkit-transform-origin: 0 0;}
.mainSection .mainT1{position: absolute; width: 5.853333rem; height: 0.466666rem; left: 50%; margin-left: -3.106666rem; top: 10.773333rem; background: url(../images/mainT1.png); background-size: 100% 100%; opacity: 0;}
.mainSection .mainT2{position: absolute; width: 5.013333rem; height: 0.786666rem; left: 50%; margin-left: -2.626666rem; top: 11.773333rem; background: url(../images/mainT2.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj1{position: absolute; width: 3.346666rem; height: 4.266666rem; left: 50%; margin-left: -9.733333rem; top: 3.026666rem; background: url(../images/obj1.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj2{position: absolute; width: 2.506666rem; height: 4.906666rem; left: 50%; margin-left: -5.853333rem; top: 2.36rem; background: url(../images/obj2.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj3{position: absolute; width: 1.426666rem; height: 2.426666rem; left: 50%; margin-left: 1.653333rem; top: 2.426666rem; background: url(../images/obj3.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj4{position: absolute; width: 3.306666rem; height: 3.293333rem; left: 50%; margin-left: 4rem; top: 1.813333rem; background: url(../images/obj4.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj5{position: absolute; width: 2.266666rem; height: 0.826666rem; left: 50%; margin-left: -6.893333rem; top: 8.133333rem; background: url(../images/obj5.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj6{position: absolute; width: 4.053333rem; height: 2.053333rem; left: 50%; margin-left: -7.24rem; top: 9.786666rem; background: url(../images/obj6.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj7{position: absolute; width: 5.386666rem; height: 3.28rem; left: 50%; margin-left: -2.24rem; top: 8.826666rem; background: url(../images/obj7.png); background-size: 100% 100%; opacity: 0;}
.mainSection .obj8{position: absolute; width: 5.08rem; height: 5.786666rem; left: 50%; margin-left: 3.88rem; top: 5.8rem; background: url(../images/obj8.png); background-size: 100% 100%; opacity: 0;}
.mainSection .desktop .tips{position:absolute;width: 21.026666rem; height: 15.973333rem; top: 0; top: 0;opacity: 0; pointer-events: none;}
.mainSection .desktop .tips>.tip{-webkit-transform:translateY(0.266666rem); opacity: 0; -webkit-transition: all 500ms; pointer-events: none;}
.mainSection .desktop .tips>.tip.tipShow{-webkit-transform:translateY(0); opacity: 1; -webkit-transition: all 500ms;}
.mainSection .desktop .tips>.tip>img{width: 100%; height: 100%;}
.mainSection .tip1{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: -9.226666rem; top: 2.146666rem;}
.mainSection .tip2{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: -5.986666rem; top: 1.426666rem;}
.mainSection .tip3{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: -2.24rem; top: 2.173333rem;}
.mainSection .tip4{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: 0.746666rem; top: 1.653333rem;}
.mainSection .tip5{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: 4.906666rem; top: 1.013333rem;}
.mainSection .tip6{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: -7.053333rem; top: 7.506666rem;}
.mainSection .tip7{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: -6.16rem; top: 8.986666rem;}
.mainSection .tip8{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: -0.64rem; top: 8.013333rem;}
.mainSection .tip9{ width: 2.92rem; height: 0.613333rem; position: absolute; left: 50%; margin-left: 5.36rem; top: 5.44rem;}
.mainSection .dot1{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: -7.226666rem; top: 4.813333rem;}
.mainSection .dot2{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: -4.226666rem; top: 2.586666rem;}
.mainSection .dot3{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: -0.493333rem; top: 3.333333rem;}
.mainSection .dot4{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: 2.24rem; top: 4.08rem;}
.mainSection .dot5{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: 6.36rem; top: 3.453333rem;}
.mainSection .dot6{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: -6rem; top: 8.08rem;}
.mainSection .dot7{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: -5.293333rem; top: 9.973333rem;}
.mainSection .dot8{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: 1.066666rem; top: 8.946666rem;}
.mainSection .dot9{width: 0.746666rem; height: 0.746666rem; position: absolute; left: 50%; margin-left: 7.186666rem; top: 9.853333rem;}
.mainSection .dot{opacity: 0; -webkit-transition: all 500ms; pointer-events: none;}
.mainSection .dot>img{width: 100%; height: 100%; -webkit-animation: btnRayAni 2000ms infinite;}
.mainSection.in .card{ -webkit-animation: cardIn  1500ms 3000ms  forwards;opacity: 0;}
.mainSection.in .mainT1{-webkit-animation: fadeIn  1000ms 3000ms  forwards;opacity: 0;}
.mainSection.in .mainT2{-webkit-animation: fadeIn  1000ms 3000ms  forwards;opacity: 0;}
.mainSection .desktop.show .desktopbg{-webkit-animation: fadeIn  1000ms  forwards;opacity: 0;}
.mainSection .desktop.show .card{-webkit-animation: cardshowIndesk  1000ms  forwards;opacity: 1;}
.mainSection .desktop.show .mainT1{-webkit-animation: mainT1showIndesk  1000ms  forwards;opacity: 1;}
.mainSection .desktop.show .mainT2{-webkit-animation: mainT2showIndesk  1000ms  forwards;opacity: 1;}
.mainSection .desktop.show .obj1{-webkit-animation: fadeScaleIn  1000ms 500ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj2{-webkit-animation: fadeScaleIn  1000ms 800ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj3{-webkit-animation: fadeScaleIn  1000ms 1200ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj4{-webkit-animation: fadeScaleIn  1000ms 1500ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj5{-webkit-animation: fadeScaleIn  1000ms 800ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj6{-webkit-animation: fadeScaleIn  1000ms 1200ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj7{-webkit-animation: fadeScaleIn  1000ms 1500ms  forwards;opacity: 0;}
.mainSection .desktop.show .obj8{-webkit-animation: fadeScaleIn  1000ms 500ms  forwards;opacity: 0;}
.mainSection .desktop.show .tips{-webkit-animation: fadeScaleIn  1000ms 500ms  forwards;opacity: 0;}
@-webkit-keyframes fadeScaleIn{   
	0%{opacity: 0; }
	100%{opacity: 1; }
}

@-webkit-keyframes mainT1showIndesk{   
	0%{ margin-left: -3.106666rem; top: 10.773333rem; opacity: 1; }
	100%{margin-left: -2.64rem;top: 5.933333rem; opacity: 1;}
}
@-webkit-keyframes mainT2showIndesk{   
	0%{ margin-left: -2.626666rem; top: 11.773333rem; opacity: 1; }
	100%{margin-left: -2.293333rem;top: 6.933333rem; opacity: 1;}
}
@-webkit-keyframes cardshowIndesk{   
	0%{-webkit-transform: scale(1);  margin-left: -2.84rem; top: 5.56rem; opacity: 1; }
	100%{-webkit-transform: scale(0.55); margin-left: -2.333333rem;top: 3.026666rem; opacity: 1;}
}
@-webkit-keyframes cardIn{   
	0%{-webkit-transform: translateX(6rem) translateY(3rem) translateZ(-4rem) rotateX(90deg) rotateY(60deg) rotateZ(30deg) scale(1); opacity: 0; }
	100%{-webkit-transform: translateX(0) translateY(0)translateZ(0px) rotateX(0) rotateY(0) rotateZ(0) scale(1); opacity: 1;}
}
@-webkit-keyframes homeHourglassIn{   
	0%{-webkit-transform: translateX(-0.07rem) rotate(60deg) scale(5); opacity: 0; }
	100%{-webkit-transform: translateX(0rem) rotate(0deg) scale(1); opacity: 1;}
}
@-webkit-keyframes homeHourglassOut{   
	0%{ -webkit-transform: translateX(0rem) scale(1); opacity: 1;}
	100%{-webkit-transform: translateX(-0.07rem) scale(0.4); opacity: 0;}
}
@-webkit-keyframes homeHourglassRayIn{   
	0%{-webkit-transform: translateY(-3.9rem)  scale(0.187); opacity: 0; }
	100%{-webkit-transform: translateY(0rem)  scale(1);opacity: 1;}
}
@-webkit-keyframes homeHourglassRayOut{   
	0%{-webkit-transform: translateY(0rem)  scale(1);opacity: 1;}
	100%{-webkit-transform: translateY(-3.9rem)  scale(0.187); opacity: 0; }
}
@-webkit-keyframes homeTextOut{   
	0%{-webkit-transform:  scale(0.5);opacity: 0;}
	25%{-webkit-transform: scale(1);opacity: 1;}
	75%{-webkit-transform: scale(1);opacity: 1;}
	100%{-webkit-transform: scale(1.5); opacity: 0; }
}



@-webkit-keyframes hourglassBtnIn{   
	0%{opacity: 0; }
	100%{opacity: 1;}
}
@-webkit-keyframes hourglassBtnOut{   
	0%{opacity: 1; -webkit-transform:  translateY(0rem); }
	100%{opacity: 0;-webkit-transform:  translateY(1.333333rem); }
}
@-webkit-keyframes bgIn{   
	0%{opacity: 0; -webkit-transform: scale(0.8); -webkit-filter: blur(20px);}
	100%{opacity: 1; -webkit-transform: scale(1); -webkit-filter: blur(0px);}
}
@-webkit-keyframes bgOut{   
	0%{opacity: 1; -webkit-transform: scale(1); }
	100%{opacity: 0; -webkit-transform: scale(1.2);}
}
@-webkit-keyframes bgbkIn{   
	0%{opacity: 0; -webkit-transform: scale(1.2); -webkit-filter: blur(20px);}
	100%{opacity: 1; -webkit-transform: scale(1); -webkit-filter: blur(0px);}
}
@-webkit-keyframes bgbkOut{   
	0%{opacity: 1; -webkit-transform: scale(1); }
	100%{opacity: 0; -webkit-transform: scale(0.8);}
}

@-webkit-keyframes section01C1In{   
	0%{opacity: 0; -webkit-transform: rotate(-5deg) scale(0.8); -webkit-filter: blur(10px);}
	100%{opacity: 1; -webkit-transform: rotate(0deg) scale(1); -webkit-filter: blur(0px);}
}
@-webkit-keyframes section01C1bkIn{   
	0%{opacity: 0; -webkit-transform: rotate(5deg) scale(1.2); -webkit-filter: blur(10px);}
	100%{opacity: 1; -webkit-transform: rotate(0deg) scale(1); -webkit-filter: blur(0px);}
}
@-webkit-keyframes section01C1Out{   
	0%{opacity: 1; -webkit-transform: rotate(0deg) scale(1); }
	100%{opacity: 0; -webkit-transform: rotate(5deg) scale(1.2);}
}
@-webkit-keyframes section01C1bkOut{   
	0%{opacity: 1; -webkit-transform: rotate(5deg) scale(1); }
	100%{opacity: 0; -webkit-transform: rotate(0deg) scale(0.8);}
}
@-webkit-keyframes section01TextIn{   
	0%{opacity: 0; -webkit-transform: translateY(-50px); -webkit-filter: blur(10px);}
	100%{opacity: 1; -webkit-transform: translateY(0px); -webkit-filter: blur(0px);}
}
@-webkit-keyframes section01TextOut{   
	0%{opacity: 1; -webkit-transform: translateY(0px); }
	100%{opacity: 0; -webkit-transform: translateY(50px); }
}

@-webkit-keyframes section02C1In{   
	0%{opacity: 0; -webkit-transform: scale(0.8); -webkit-filter: blur(10px);}
	100%{opacity: 1; -webkit-transform: scale(1); -webkit-filter: blur(0px);}
}
@-webkit-keyframes section02C1bkIn{   
	0%{opacity: 0; -webkit-transform: scale(1.2); -webkit-filter: blur(10px);}
	100%{opacity: 1; -webkit-transform: scale(1); -webkit-filter: blur(0px);}
}
@-webkit-keyframes section02C1Out{   
	0%{opacity: 1; -webkit-transform:  scale(1); }
	100%{opacity: 0; -webkit-transform:  scale(1.2);}
}
@-webkit-keyframes section02C1bkOut{   
	0%{opacity: 1; -webkit-transform:  scale(1); }
	100%{opacity: 0; -webkit-transform:  scale(0.8);}
}

@-webkit-keyframes fadeOut{   
	0%{opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes fadeIn{   
	0%{opacity: 0;}
	100%{opacity: 1;}
}


/* popups */

.md-modal {position: fixed;top: 50%;left: 50%;max-width: 10rem;min-width: 4.266666rem;height: auto;z-index: 2000;visibility: hidden;-webkit-backface-visibility: hidden;-webkit-transform: translateX(-50%) translateY(-50%);}
.md-show {visibility: visible;}
.md-overlay {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1000;opacity: 0;background: rgba(0,0,0,0.6);-webkit-transition: all 0.3s;}
.md-show ~ .md-overlay {opacity: 1;visibility: visible;}

/* Content styles */
.md-content {position: relative; margin: 0 auto;}
.md-effect-3 .md-content {-webkit-transform: translateY(20%);opacity: 0;-webkit-transition: all 0.3s;}
.md-show.md-effect-3 .md-content {-webkit-transform: translateY(0);opacity: 1;}


.popUp{background: #000; border: 0.013333rem solid #53483C; width:9.866666rem; height: 10.72rem; text-align: center;}
.popUp .md-close{ width: 0.533333rem; height: 0.533333rem; position: absolute; display: block; right:0.56rem;top: -1.226666rem; background:url(../images/closeBtn.png); background-size: 100% 100%;z-index: 1;}
.popUp .popUpTitle{width: 10rem; height: 0.666666rem; margin: auto; top: -1.266666rem; position:absolute; text-align: center; font-size: 16px; color: #FFF;}
.popUp .bg1{ width: 100%; height: 100%; background: url(../images/pop1.jpg); background-size: 100% 100%;}
.popUp p.p1{ color: #B49E86; font-size: 16px;  font-weight: normal; margin: auto; line-height: 30px;}
.popUp p.p2{ color: #B49E86; font-size: 14px;  font-weight: normal; margin: auto; line-height: 30px;}
.popUp p.p3{ color: #B49E86; font-size: 18px;  font-weight: normal; margin: auto; line-height: 30px; font-weight: bold;}
#popNote2 .swiper-container{overflow: visible;}
#popNote2 .swiper-slide>img{width: 100%; height: auto;}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: -0.533333rem;}



.tipBox1{width: 4.093333rem; height: 2.213333rem; position: absolute; bottom: 0.5rem; left: 50%; margin-left: -2.05rem; background: url(../images/tip2.png); background-size: 100% 100%; opacity: 0; -webkit-transition: all 1000ms;}
.tipBox2{width: 4.093333rem; height: 2.213333rem; position: absolute; bottom: 0.5rem; left: 50%; margin-left: -2.05rem; background: url(../images/tip1.png); background-size: 100% 100%; opacity: 0; -webkit-transition: all 1000ms;}

.show .tipBox1{opacity: 1;}