* {margin: 0;padding: 0;}
html,body{margin: 0; padding: 0; width: 100%;   height: 100%; text-align: center; background: url(../images/bg.jpg); background-size: 100% 100%;}
section{width: 10rem;min-height: 14.88rem;  max-height: 16.226666rem;height: 100%; position: relative; margin: auto;display: none; overflow: hidden;}

.logo{width:4.306666rem; height: 0.506666rem; position: absolute; left: 0.453333rem; top: 0.413333rem; background: url(../images/logo.png); background-size: 100% 100%;}
.musicBtn{ width: 0.546666rem; height: 0.546666rem; position: absolute; right: 0.373333rem; top: 0.373333rem; background: url(../images/musicBtn.png); background-size:100% 100% ; z-index: 2100;}
.skipBtn{width: 1.253333rem; height: 0.546666rem; position: absolute; right: 0.373333rem; bottom: 0.96rem; background: url(../images/skipBtn.png); background-size:100% 100% ; z-index: 100;}
.loadingSection{}
.loadingSection .per{position: absolute; left: 50%; width: 3rem; margin-left: -1.5rem; top: 8.306666rem; font-size: 14px;}   
.loadingSection .note{position: absolute; left: 50%; width: 3rem; margin-left: -1.5rem; top: 7.493333rem; font-size: 14px;}
.loadingSection .loadingTxt{position: absolute; left: 50%; width: 4.773333rem; margin-left: -2.386666rem; height: 1.906666rem; top:4.626666rem; background: url(../images/loadingTxt.png); background-size: 100% 100%;}

.t1{width: 2.946666rem; height: 6.093333rem;position: absolute; left: 50%; margin-left: -1.48rem; top: 3.08rem;}
.t1>div{position: absolute;background: url(../images/t1.png) no-repeat; background-size: 2.946666rem 6.093333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.t1 .bg{width: 100%; height: 100%;}
.t1 .bg1{width: 0.746666rem; height: 100%; }
.t1 .bg2{width: 0.733333rem; height: 100%; left: 0.746666rem;  background-position-x:-0.746666rem;}
.t1 .bg3{width: 0.733333rem; height: 100%; left: 1.48rem;  background-position-x:-1.48rem;}
.t1 .bg4{width: 0.733333rem; height: 100%; left: 2.213333rem; background-position-x:-2.213333rem;}

.t2{width: 4.013333rem; height: 7.453333rem;position: absolute; left: 50%; margin-left: -1.906666rem; top: 3.093333rem;}
.t2>div{position:absolute;background: url(../images/t2.png) no-repeat; background-size: 4.013333rem 7.453333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.t2 .bg{width: 100%; height: 100%;}
.t2 .bg1{width: 0.44rem; height: 100%;}
.t2 .bg2{width: 0.733333rem; height: 100%; left: 0.44rem;  background-position-x:-0.44rem;}
.t2 .bg3{width: 0.733333rem; height: 100%; left: 1.173333rem; background-position-x:-1.173333rem;}
.t2 .bg4{width: 0.733333rem; height: 100%; left: 1.906666rem; background-position-x:-1.906666rem;}
.t2 .bg5{width: 1.373333rem; height: 100%; left: 2.64rem; background-position-x:-2.64rem;}


.t3{width: 4.013333rem; height: 7.453333rem;position: absolute; left: 50%; margin-left: -1.906666rem; top: 3.093333rem;}
.t3>div{position:absolute;background: url(../images/t3.png) no-repeat; background-size: 4.013333rem 7.453333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.t3 .bg{width: 100%; height: 100%;}
.t3 .bg1{width: 0.44rem; height: 100%;}
.t3 .bg2{width: 0.733333rem; height: 100%; left: 0.44rem;  background-position-x:-0.44rem;}
.t3 .bg3{width: 0.733333rem; height: 100%; left: 1.173333rem; background-position-x:-1.173333rem;}
.t3 .bg4{width: 0.733333rem; height: 100%; left: 1.906666rem; background-position-x:-1.906666rem;}
.t3 .bg5{width: 1.373333rem; height: 100%; left: 2.64rem; background-position-x:-2.64rem;}


.t4{width: 4.013333rem; height: 7.453333rem;position: absolute; left: 50%; margin-left: -1.906666rem; top: 3.093333rem;}
.t4>div{position:absolute;background: url(../images/t4.png) no-repeat; background-size: 4.013333rem 7.453333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.t4 .bg{width: 100%; height: 100%;}
.t4 .bg1{width: 0.44rem; height: 100%;}
.t4 .bg2{width: 0.733333rem; height: 100%; left: 0.44rem;  background-position-x:-0.44rem;}
.t4 .bg3{width: 0.733333rem; height: 100%; left: 1.173333rem; background-position-x:-1.173333rem;}
.t4 .bg4{width: 0.733333rem; height: 100%; left: 1.906666rem; background-position-x:-1.906666rem;}
.t4 .bg5{width: 1.373333rem; height: 100%; left: 2.64rem; background-position-x:-2.64rem;}

.t5{width: 2.573333rem; height: 6.093333rem;position: absolute; left: 50%; margin-left: -1.28rem; top: 3.093333rem;}
.t5>div{position: absolute;background: url(../images/t5.png) no-repeat; background-size: 2.573333rem 6.093333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.t5 .bg{width: 100%; height: 100%;}
.t5 .bg1{width: 0.653333rem; height: 100%; }
.t5 .bg2{width: 0.64rem; height: 100%; left: 0.653333rem;  background-position-x:-0.653333rem;}
.t5 .bg3{width: 0.64rem; height: 100%; left: 1.293333rem;  background-position-x:-1.293333rem;}
.t5 .bg4{width: 0.64rem; height: 100%; left: 1.933333rem; background-position-x:-1.933333rem;}

.t6{width: 1.226666rem; height: 6.706666rem;position: absolute; left: 50%; margin-left: -0.613333rem; top: 3.093333rem;}
.t6>div{position: absolute;background: url(../images/t6.png) no-repeat; background-size: 1.226666rem 6.706666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.t6 .bg{width: 100%; height: 100%;}
.t6 .bg1{width: 0.613333rem; height: 100%; }
.t6 .bg2{width: 0.613333rem; height: 100%; left: 0.613333rem;  background-position-x:-0.613333rem;}



.t1.show .bg1{-webkit-animation: t1Ani 2000ms ease-out 1500ms forwards;}
.t1.show .bg2{-webkit-animation: t1Ani 2000ms ease-out 1000ms forwards;}
.t1.show .bg3{-webkit-animation: t1Ani 2000ms ease-out 500ms forwards;}
.t1.show .bg4{-webkit-animation: t1Ani 2000ms ease-out forwards;}
.t1.out{-webkit-animation: fadeOut 500ms ease-out forwards;}

.t2.show .bg1{-webkit-animation: t1Ani 2000ms ease-out 1700ms forwards;}
.t2.show .bg2{-webkit-animation: t1Ani 2000ms ease-out 1500ms forwards;}
.t2.show .bg3{-webkit-animation: t1Ani 2000ms ease-out 1000ms forwards;}
.t2.show .bg4{-webkit-animation: t1Ani 2000ms ease-out 500ms forwards;}
.t2.show .bg5{-webkit-animation: t1Ani 2000ms ease-out forwards;}
.t2.out{-webkit-animation: fadeOut 500ms ease-out forwards;}

.t3.show .bg1{-webkit-animation: t1Ani 2000ms ease-out 1700ms forwards;}
.t3.show .bg2{-webkit-animation: t1Ani 2000ms ease-out 1500ms forwards;}
.t3.show .bg3{-webkit-animation: t1Ani 2000ms ease-out 1000ms forwards;}
.t3.show .bg4{-webkit-animation: t1Ani 2000ms ease-out 500ms forwards;}
.t3.show .bg5{-webkit-animation: t1Ani 2000ms ease-out forwards;}
.t3.out{-webkit-animation: fadeOut 500ms ease-out forwards;}

.t4.show .bg1{-webkit-animation: t1Ani 2000ms ease-out 1700ms forwards;}
.t4.show .bg2{-webkit-animation: t1Ani 2000ms ease-out 1500ms forwards;}
.t4.show .bg3{-webkit-animation: t1Ani 2000ms ease-out 1000ms forwards;}
.t4.show .bg4{-webkit-animation: t1Ani 2000ms ease-out 500ms forwards;}
.t4.show .bg5{-webkit-animation: t1Ani 2000ms ease-out forwards;}
.t4.out{-webkit-animation: fadeOut 500ms ease-out forwards;}

.t5.show .bg1{-webkit-animation: t1Ani 2000ms ease-out 1500ms forwards;}
.t5.show .bg2{-webkit-animation: t1Ani 2000ms ease-out 1000ms forwards;}
.t5.show .bg3{-webkit-animation: t1Ani 2000ms ease-out 500ms forwards;}
.t5.show .bg4{-webkit-animation: t1Ani 2000ms ease-out forwards;}
.t5.out{-webkit-animation: fadeOut 500ms ease-out forwards;}

.t6.show .bg1{-webkit-animation: t1Ani 2000ms ease-out 500ms forwards;}
.t6.show .bg2{-webkit-animation: t1Ani 2000ms ease-out forwards;}
.t6.out{-webkit-animation: fadeOut 500ms ease-out forwards;}

.in1{width: 7.826666rem; height: 2.373333rem;position: absolute; right: 0; bottom: 3.813333rem;}
.in1 .bg{width: 100%; height: 100%;background: url(../images/in1.png) no-repeat; background-size: 7.826666rem 2.373333rem;-webkit-mask-image: url(../images/mask1.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.in2{width: 3.24rem; height: 1.653333rem;position: absolute; left: 0; bottom: 1.226666rem;}
.in2 .bg{width: 100%; height: 100%;background: url(../images/in2.png) no-repeat; background-size: 3.24rem 1.653333rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.in3{width: 3.213333rem; height: 1.36rem;position: absolute; right: 0; bottom: 2.293333rem; }
.in3 .bg{width: 100%; height: 100%;background: url(../images/in3.png) no-repeat; background-size: 3.213333rem 1.36rem;-webkit-mask-image: url(../images/mask1.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.in4{width: 4.293333rem; height: 1.72rem;position: absolute; right: 0; bottom: 5.013333rem; }
.in4 .bg{width: 100%; height: 100%;background: url(../images/in4.png) no-repeat; background-size: 4.293333rem 1.72rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.in5{width: 3.56rem; height: 1.026666rem;position: absolute; left: 0.56rem; bottom: 6.52rem; }
.in5 .bg{width: 100%; height: 100%;background: url(../images/in5.png) no-repeat; background-size: 3.56rem 1.026666rem;-webkit-mask-image: url(../images/mask1.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.in6{width: 1.706666rem; height: 1.68rem;position: absolute; left:0; bottom: 2.186666rem; }
.in6 .bg{width: 100%; height: 100%;background: url(../images/in6.png) no-repeat; background-size: 1.706666rem 1.68rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.in7{width: 1.44rem; height: 1.946666rem;position: absolute; right:7.44rem; bottom: 3.333333rem; }
.in7 .bg{width: 100%; height: 100%;background: url(../images/in7.png) no-repeat; background-size: 1.44rem 1.946666rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}



.show.in1 .bg{-webkit-animation: in1bgAni 3000ms ease-out  forwards;}
.show.in2 .bg{-webkit-animation: in2bgAni 2000ms ease-out forwards;}
.show.in3 .bg{-webkit-animation: in3bgAni 2000ms ease-out forwards;}
.show.in4 .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.in5 .bg{-webkit-animation: in1bgAni 2000ms ease-out forwards;}
.show.in6 .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.in7 .bg{-webkit-animation: in7bgAni 2000ms ease-out forwards;}
.show.in7 {-webkit-animation: in7Ani 40000ms linear forwards;}
.out.in1 {-webkit-animation: fadeOut 500ms ease-out  forwards;}
.out.in2 {-webkit-animation: fadeOut 500ms ease-out forwards;}
.out.in3 {-webkit-animation: fadeOut 500ms ease-out forwards;}
.out.in4 {-webkit-animation: fadeOut 500ms ease-out forwards;}
.out.in5 {-webkit-animation: fadeOut 500ms ease-out forwards;}
.out.in6 {-webkit-animation: fadeOut 500ms ease-out forwards;}
.out.in7 {-webkit-animation: fadeOut 500ms ease-out forwards;right:0.453333rem; bottom: -2.946666rem; }
@-webkit-keyframes in1bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 50% ;}
	100%{-webkit-mask-size:10rem 10rem ;-webkit-mask-position:100% 50% ;}
}
@-webkit-keyframes in2bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:center 50% ; }
	100%{-webkit-mask-size:8rem 8rem ;-webkit-mask-position:center 50% ;}
}
@-webkit-keyframes in3bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 50% ; }
	100%{-webkit-mask-size:5rem 5rem ;-webkit-mask-position:100% 50% ;}
}
@-webkit-keyframes in4bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:center 50% ; }
	100%{-webkit-mask-size:8rem 8rem ;-webkit-mask-position:center 50% ; }
}
@-webkit-keyframes in7bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:center 50% ; }
	100%{-webkit-mask-size:3rem 3rem ;-webkit-mask-position:center 50% ; }
}
@-webkit-keyframes in7Ani{
	0%{ right:7.44rem; bottom: 3.333333rem;  }
	100%{ right:0.453333rem; bottom: -2.946666rem;  }
}
@-webkit-keyframes t1bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 50% ;}
	100%{-webkit-mask-size:12rem 12rem ;-webkit-mask-position:50% 50% ;}
}
@-webkit-keyframes t1Ani{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 0 ;}
	100%{-webkit-mask-size:12rem 12rem ;-webkit-mask-position:50% 0 ;}
}
@-webkit-keyframes t2bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:center 0 ;}
	100%{-webkit-mask-size:12rem 12rem ;-webkit-mask-position:center center;}
}
@-webkit-keyframes t3bgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:0 0 ;}
	100%{-webkit-mask-size:12rem 12rem ;-webkit-mask-position:center center;}
}
@-webkit-keyframes t1bgOut{
	0%{-webkit-mask-size:10rem 10rem ;-webkit-mask-position:50% 50% ;}
	100%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 50% ;}
}
@-webkit-keyframes fadeOut{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.mainBg{width: 100%; height: 100%; position: absolute; background:url(../images/homeBg.jpg); background-size: 100% 100%;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.mainTitle{width: 7.52rem; height: 3.026666rem;position: absolute; left:50%; margin-left: -3.733333rem; top: 2.36rem;}
.mainTitle .bg{width: 100%; height: 100%;background: url(../images/homeTitle.png) no-repeat; background-size: 7.52rem 3.026666rem;-webkit-mask-image: url(../images/mask1.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.obj1{width: 4rem; height: 4rem;position: absolute; left:50%; margin-left: 0.08rem; top: 4.78rem;}
.obj1 .bg{width: 100%; height: 100%;background: url(../images/obj1.gif) no-repeat; background-size: 4rem 4rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.obj2{width: 4rem; height: 4rem;position: absolute; left:50%; margin-left: -3.786666rem; top: 6.62rem;}
.obj2 .bg{width: 100%; height: 100%;background: url(../images/obj2.gif) no-repeat; background-size:4rem 4rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.obj3{width: 4rem; height: 4rem;position: absolute; left:50%; margin-left: 0.0rem; top: 8.273333rem;}
.obj3 .bg{width: 100%; height: 100%;background: url(../images/obj3.gif) no-repeat; background-size:4rem 4rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.btnHome{width: 5.96rem; height: 0.933333rem;position: absolute; left:50%; margin-left: -2.973333rem; bottom: 1.613333rem;}
.btnHome .bg{width: 100%; height: 100%;background: url(../images/btn1.png) no-repeat; background-size:5.96rem 0.933333rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.homeTip{width: 5.493333rem; height: 0.546666rem;position: absolute; left:50%; margin-left: -2.746666rem; bottom: 3.066666rem;}
.homeTip .bg{width: 100%; height: 100%;background: url(../images/homeTip.png) no-repeat; background-size:5.493333rem 0.546666rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.btn3{width: 2.96rem; height: 1.013333rem;position: absolute; left:50%; margin-left: 0.48rem; bottom: 1.146666rem;}
.btn3 .bg{width: 100%; height: 100%;background: url(../images/btn3.png) no-repeat; background-size:2.96rem 1.013333rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.cloud1{width: 2.426666rem; height: 0.84rem;position: absolute; left:50%; margin-left: 1.773333rem; top: 1.413333rem;}
.cloud1 .bg{width: 100%; height: 100%;background: url(../images/cloud1.png) no-repeat; background-size:2.426666rem 0.84rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.cloud2{width: 2.08rem; height: 0.72rem;position: absolute; left:50%; margin-left: -4.24rem; top: 5.8rem;}
.cloud2 .bg{width: 100%; height: 100%;background: url(../images/cloud2.png) no-repeat; background-size:2.08rem 0.72rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.cloud3{width: 1.466666rem; height: 0.44rem;position: absolute; left:50%; margin-left:2.746666rem; top: 8.893333rem;}
.cloud3 .bg{width: 100%; height: 100%;background: url(../images/cloud3.png) no-repeat; background-size:1.466666rem 0.44rem;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}

.show.mainBg{-webkit-animation: mainbgAni 2000ms ease-out  forwards;}
.show.mainTitle .bg{-webkit-animation: titlebgAni 2000ms ease-out forwards;}
.show.obj1 .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.obj2 .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.obj3 .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.btnHome .bg{-webkit-animation: t1bgAni 2000ms ease-out forwards;}
.show.homeTip .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.cloud1 .bg{-webkit-animation: in4bgAni 2000ms ease-out forwards;}
.show.cloud2 .bg{-webkit-animation: in7bgAni 2000ms ease-out forwards;}
.show.cloud3 .bg{-webkit-animation: in7bgAni 2000ms ease-out forwards;}
@-webkit-keyframes titleAni{
	0%{-webkit-transform: translateX(0.666666rem); }
	100%{-webkit-transform: translateX(0rem);}
}
@-webkit-keyframes titlebgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:100% 50% ;}
	100%{-webkit-mask-size:14rem 14rem ;-webkit-mask-position:100% 50% ;}
}
@-webkit-keyframes mainbgAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:center 50% ; }
	100%{-webkit-mask-size:16rem 16rem ;-webkit-mask-position:center 50% ; }
}


/* popups */

.md-modal {position: fixed;top: 50%;left: 50%;width: 10rem;height: 100%;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: url(../images/bg.jpg); background-size: 100% 100%;-webkit-transition: all 0.3s;}
#popNote1.md-show ~ .md-overlay {opacity: 1;visibility: visible;}
#popNote2.md-show ~ .md-overlay {opacity: 1;visibility: visible;}
#popNote3.md-show ~ .md-overlay {opacity: 1;visibility: visible;}

.md-overlayBlack {position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1500;opacity: 0;background:rgba(0,0,0,0.6);-webkit-transition: all 0.3s;}
#popNote4.md-show ~ .md-overlayBlack {opacity:1;visibility: visible;}


.md-overlayOpe{position: fixed;width: 100%;height: 100%;visibility: hidden;top: 0;left: 0;z-index: 1500;opacity: 0;background: #FFF; background-size: 100% 100%;-webkit-transition: all 0.3s;}
#popNote5.md-show ~ .md-overlayOpe {opacity:0;visibility: visible;}
#popNote4{pointer-events: none;}

.md-shareModal{position: absolute;width: 3.706666rem; height: 2.813333rem; right: 0.586666rem; top: 0.186666rem; background: url(../images/share.png); background-size:100% 100% ;z-index: 2000;visibility: hidden;}
.md-shareModal.md-show  ~ .md-overlayBlack {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{ width: 100%; height: 100%; }
/*
.popUp .md-close{ width: 0.786666rem; height: 0.786666rem; position: absolute; display: block; right: -0.3rem; top:-0.3rem; background:url(../images/closeBtn.png); background-size: 100% 100%;z-index: 1;}
*/
.swiper-container {width: 100%;height: 100%;position: absolute;left: 0%;top: 0%;min-height: 14.88rem;}




.popUp .btn{width: 2.226666rem; height: 0.72rem;background: url(../images/qBtnBlack.png); background-size:2.226666rem 0.72rem; position: absolute; line-height: 0.72rem; font-size: 14px; color: #FFF;}
.popUp .btn1{left: 50%; margin-left: -3.853333rem; bottom: 3.093333rem;}
.popUp .btn2{left: 50%; margin-left: -1.106666rem; bottom: 3.093333rem;}
.popUp .btn3{left: 50%; margin-left: 1.64rem; bottom: 3.093333rem;}
.btnRight.check{background: url(../images/qBtnGreen.png); background-size:2.226666rem 0.72rem;}
.btnWrong.check{background: url(../images/qBtnRed.png); background-size:2.226666rem 0.72rem;}

.btnRight.check:after{ content: ''; position: absolute; top: 1.253333rem; left: 0.92rem; width: 0.466666rem; height: 0.466666rem; background: url(../images/right.png); background-size: 100% 100%;}
.btnWrong.check:after{ content: ''; position: absolute; top: 1.253333rem; left: 0.92rem; width: 0.466666rem; height: 0.466666rem; background: url(../images/wrong.png); background-size: 100% 100%;}
.answer.fadeIn{-webkit-animation: fadeIn 500ms ease-out forwards; opacity: 0;}
.question.fadeOut{-webkit-animation: fadeOut 1000ms ease-out forwards; opacity: 1;}

.qTitle{width: 6.626666rem; height: 0.946666rem; position: absolute; left: 50%; margin-left: -3.32rem; top: 2.146666rem;}
.qTitle .bg{width: 100%; height: 100%; background: url(../images/qTitle.png); background-size:6.626666rem 0.946666rem;}
.qPre{width: 2rem; height: 0.4rem;position: absolute; left: 50%; margin-left: -1rem; top: 3.786666rem;}
.qPre .bg{width: 1rem; height: 100%; background: url(../images/qPer.png); background-size:2rem 0.4rem; font-size: 0.38rem; line-height: 0.4rem; padding-left: 1rem; text-align: center;}
.qPicBg{width: 6.933333rem; height: 4.36rem;position: absolute; left: 50%; margin-left: -3.466666rem; top: 5.053333rem;background: url(../images/qPicBg.png); background-size:6.933333rem 4.36rem;}
.qPic1{width:6.733333rem; height:2.973333rem; position: absolute; left: 0.093333rem; top: 0.96rem; background: url(../images/qPic1.png); background-size:100% 100%;}
.qPic2{width: 5.213333rem; height: 3rem;position: absolute; left: 0.866666rem; top: 0.666666rem; background: url(../images/qPic2.png); background-size:100% 100%;}
.qPic3{width: 6.093333rem; height: 2.24rem; left: 0.426666rem; top: 1.106666rem;position: absolute; background: url(../images/qPic3.png); background-size:100% 100%;}
.qPic4{width: 5.546666rem; height: 3.266666rem; left: 0.733333rem; top: 0.6rem;position: absolute; background: url(../images/qPic4.png); background-size:100% 100%;}
.qPic5{width: 5.053333rem; height: 3.36rem; left: 0.933333rem; top: 0.573333rem;position: absolute; background: url(../images/qPic5.png); background-size:100% 100%;}
.qPic6{width: 5.173333rem; height: 3.546666rem; left: 0.88rem; top: 0.4rem;position: absolute; background: url(../images/qPic6.png); background-size:100% 100%;}
.qPic7{width: 4.253333rem; height: 3.36rem; left: 1.346666rem; top: 0.573333rem;position: absolute; background: url(../images/qPic7.png); background-size:100% 100%;}

.qPic8{width: 3.733333rem; height: 3.24rem; left: 1.653333rem; top: 0.613333rem;position: absolute; background: url(../images/qPic8.png); background-size:100% 100%;}
.qPic9{width: 5.706666rem; height: 3.08rem; left: 1.08rem; top: 0.88rem;position: absolute; background: url(../images/qPic9.png); background-size:100% 100%;}
.qPic10{width: 3.386666rem; height: 3.213333rem; left: 1.906666rem; top: 0.693333rem;position: absolute; background: url(../images/qPic10.png); background-size:100% 100%;}
.qPic11{width: 4.72rem; height: 3.12rem; left: 1.146666rem; top: 0.653333rem;position: absolute; background: url(../images/qPic11.png); background-size:100% 100%;}
.qPic12{width: 4.533333rem; height: 2.746666rem; left: 1.32rem; top: 0.84rem;position: absolute; background: url(../images/qPic12.png); background-size:100% 100%;}

.qRadio{width: 8.213333rem; height: 4.36rem; position: absolute; left: 50%; margin-left: -4.106666rem; top: 5.08rem;background: url(../images/qRadio.png); background-size:100% 100%;}
.playBtn{width: 2.293333rem; height: 0.84rem; position: absolute; left: 50%; margin-left: -1.146666rem; top: 9.72rem;background: url(../images/playBtn.png); background-size:100% 100%;}


.out.qPic1{-webkit-animation: qPic1Ani 500ms ease-out forwards;}
.out.qPic2{-webkit-animation: qPic2Ani 500ms ease-out forwards;}
.out.qPic3{-webkit-animation: qPic3Ani 500ms ease-out forwards;}
.out.qPic4{-webkit-animation: qPic4Ani 500ms ease-out forwards;}
.out.qPic5{-webkit-animation: qPic5Ani 500ms ease-out forwards;}
.out.qPic6{-webkit-animation: qPic6Ani 500ms ease-out forwards;}
.out.qPic7{-webkit-animation: qPic7Ani 500ms ease-out forwards;}

.out.qPic8{-webkit-animation: qPic8Ani 500ms ease-out forwards;}
.out.qPic9{-webkit-animation: qPic9Ani 500ms ease-out forwards;}
.out.qPic10{-webkit-animation: qPic10Ani 500ms ease-out forwards;}
.out.qPic11{-webkit-animation: qPic11Ani 500ms ease-out forwards;}
.out.qPic12{-webkit-animation: qPic12Ani 500ms ease-out forwards;}

.aTitle{width: 2.333333rem; height: 2.253333rem; position: absolute; left: 50%; margin-left: -3.44rem; top:1.806666rem;}/* top:2.306666rem; */
.aTitle .bg1{width: 100%; height: 100%; background: url(../images/aTitle1.png); background-size:2.333333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg2{width: 100%; height: 100%; background: url(../images/aTitle2.png); background-size:2.333333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg3{width: 100%; height: 100%; background: url(../images/aTitle3.png); background-size:2.333333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg4{width: 100%; height: 100%; background: url(../images/aTitle4.png); background-size:2.333333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg5{width: 3.413333rem; height: 100%; background: url(../images/aTitle5.png); background-size:3.413333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg6{width: 2.813333rem; height: 100%; background: url(../images/aTitle6.png); background-size:2.813333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg7{width: 100%; height: 100%; background: url(../images/aTitle7.png); background-size:2.333333rem 2.253333rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}

.aTitle .bg8{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle8.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg9{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle9.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg10{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle10.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg11{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle11.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg12{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle12.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg13{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle13.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg14{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle14.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg15{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle15.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg16{width: 4.38rem; height: 2.3rem; background: url(../images/aTitle16.png); background-size:4.38rem 2.3rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg17{width: 2.24rem; height: 2.946666rem; background: url(../images/aTitle17.png); background-size:2.24rem 2.946666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg18{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle18.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aTitle .bg19{width: 3.413333rem; height: 2.306666rem; background: url(../images/aTitle19.png); background-size:3.413333rem 2.306666rem;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}

.aPic{width: 6.933333rem; height: 4.36rem;position: absolute; left: 50%; margin-left: -3.466666rem; top: 4.553333rem;}/*top: 5.053333rem; */

.aPic .bg{width: 100%; height: 100%;-webkit-mask-image: url(../images/mask2.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aPic .obj{-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.aPic1 .bg{ background: url(../images/aPic1.png); background-size:6.933333rem 4.36rem;}
.aPic1 .obj{width: 4.346666rem; height: 1.893333rem; position: absolute; left: 2.386666rem; top: 0.946666rem; background: url(../images/aPic1Obj.png); background-size:100% 100%;}
.aPic2 .bg{ background: url(../images/aPic2.png); background-size:6.933333rem 4.36rem;}
.aPic2 .obj{width: 3.226666rem; height: 1.72rem; position: absolute; left: 2.96rem; top: 1rem; background: url(../images/aPic2Obj.png); background-size:100% 100%;}
.aPic3 {width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -0.92rem; top:1.866666rem;}
.aPic3 .bg{ background: url(../images/aPic3.png); background-size:4.386666rem 7.013333rem;}
.aPic3 .obj{width: 2.413333rem;	 height: 1.666666rem; position: absolute; left: 1.653333rem; top: 3.413333rem; background: url(../images/aPic3Obj.png); background-size:100% 100%;}
.aPic4 {width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -0.92rem; top:1.866666rem;}
.aPic4 .bg{ background: url(../images/aPic4.png); background-size:4.386666rem 7.013333rem;}
.aPic4 .obj{width: 2.88rem;	 height: 1.773333rem; position: absolute; left: 1.306666rem; top: 3.4rem; background: url(../images/aPic4Obj.png); background-size:100% 100%;}
.aPic5 {width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: 0.08rem; top:1.866666rem;}
.aPic5 .bg{ background: url(../images/aPic5.png); background-size:4.386666rem 7.013333rem;}
.aPic5 .obj{width: 2.453333rem;	 height: 1.773333rem; position: absolute; left: 1.533333rem; top: 3.253333rem; background: url(../images/aPic5Obj.png); background-size:100% 100%;}
.aPic6 .bg{ background: url(../images/aPic6.png);  background-size:6.933333rem 4.36rem;}
.aPic6 .obj{width: 3.786666rem;	 height: 1.693333rem; position: absolute; left: 2.666666rem; top: 1rem; background: url(../images/aPic6Obj.png); background-size:100% 100%;}
.aPic7 {width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -0.92rem; top:1.866666rem;}
.aPic7 .bg{ background: url(../images/aPic7.png); background-size:4.386666rem 7.013333rem;}
.aPic7 .obj{width: 2.053333rem;	 height: 2.44rem; position: absolute; left: 2rem; top: 3.106666rem; background: url(../images/aPic7Obj.png); background-size:100% 100%;}
.aPic8 .bg{ background: url(../images/aPic8.png); background-size:6.933333rem 4.36rem;}
.aPic8 .obj{width: 3.653333rem; height: 1.733333rem; position: absolute; left: 2.68rem; top: 1.093333rem; background: url(../images/aPic8Obj.png); background-size:100% 100%;}
.aPic9 .bg{ background: url(../images/aPic9.png); background-size:6.933333rem 4.36rem;}
.aPic9 .obj{width: 3.253333rem; height: 1.84rem; position: absolute; left: 2.613333rem; top: 0.96rem; background: url(../images/aPic9Obj.png); background-size:100% 100%;}
.aPic10 .bg{ background: url(../images/aPic10.png); background-size:6.933333rem 4.36rem;}
.aPic10 .obj{width: 3.44rem; height: 1.64rem; position: absolute; left: 2.973333rem; top: 1.013333rem; background: url(../images/aPic10Obj.png); background-size:100% 100%;}
.aPic11 .bg{ background: url(../images/aPic11.png); background-size:6.933333rem 4.36rem;}
.aPic11 .obj{width: 3.2rem; height: 1.653333rem; position: absolute; left: 2.96rem; top: 1.066666rem; background: url(../images/aPic11Obj.png); background-size:100% 100%;}
.aPic12 .bg{ background: url(../images/aPic12.png); background-size:6.933333rem 4.36rem;}
.aPic12 .obj{width: 3.426666rem; height: 1.76rem; position: absolute; left: 2.653333rem; top: 0.986666rem; background: url(../images/aPic12Obj.png); background-size:100% 100%;}
.aPic13{width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -0.92rem; top:1.866666rem;}
.aPic13 .bg{ background: url(../images/aPic13.png); background-size:4.386666rem 7.013333rem;}
.aPic14{width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -0.92rem; top:1.866666rem;}
.aPic14 .bg{ background: url(../images/aPic14.png); background-size:4.386666rem 7.013333rem;}
.aPic15 .bg{ background: url(../images/aPic15.png); background-size:6.933333rem 4.36rem;}
.aPic16 .bg{ background: url(../images/aPic16.png); background-size:6.933333rem 4.36rem;}
.aPic17{width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -0.92rem; top:1.866666rem;}
.aPic17 .bg{ background: url(../images/aPic17.png); background-size:4.386666rem 7.013333rem;}
.aPic18 .bg{ background: url(../images/aPic18.png); background-size:6.933333rem 4.36rem;}
.aPic19 .bg{ background: url(../images/aPic19.png); background-size:6.933333rem 4.36rem;}
.popUp .aBtn{width: 2.96rem; height: 1.013333rem;left:50%; margin-left:-1.48rem; bottom: 5%;  background: url(../images/aBtn.png); background-size:2.96rem 1.013333rem; position: absolute; line-height: 0.72rem; font-size: 14px; color: #FFF;}
.popUp .aComplete{background: url(../images/aBtnComplete.png); background-size:2.96rem 1.013333rem;}
.aTxt{ width: 6.933333rem; position: absolute; left: 50%; margin-left: -3.466666rem; top: 9.066666rem; }/* top: 9.866666rem; */
.aTxt .text{font-size: 0.373333rem; text-align: justify  ;-webkit-mask-image: url(../images/mask3.png);-webkit-mask-size:0 0; -webkit-mask-repeat:no-repeat ;}
.show .aTitle .bg{-webkit-animation: t1Ani 1500ms ease-out 1600ms forwards;}
.show .aTxt .text{-webkit-animation: t1Ani 1500ms ease-out 1600ms forwards;}
.show .aPic .bg{-webkit-animation: abg1Ani 1500ms ease-out 1600ms forwards;}
.aPic .obj.fadeIn{-webkit-animation: objAni 1500ms ease-out forwards;}

#popNote3 .show .aTitle .bg{-webkit-animation: t1Ani 1500ms ease-out forwards;}
#popNote3 .show .aTxt .text{-webkit-animation: t1Ani 1500ms ease-out forwards;}
#popNote3 .show .aPic .bg{-webkit-animation: abg1Ani 1500ms ease-out forwards;}


@-webkit-keyframes qPic1Ani{
	0%{width:6.733333rem; height:2.973333rem; left: 0.093333rem; top: 0.96rem; }
	100%{width: 4.253333rem; height: 1.88rem; left: 2.4rem; top: 0.96rem; }
}
@-webkit-keyframes qPic2Ani{
	0%{width: 5.213333rem; height: 3rem; left: 0.866666rem; top: 0.666666rem;}
	100%{width: 3.16rem; height: 1.813333rem; left: 2.96rem; top: 0.92rem; }
}
@-webkit-keyframes qPic3Ani{
	0%{width: 6.093333rem; height: 2.24rem; left: 0.426666rem; top: 1.106666rem;}
	100%{width: 3.76rem; height: 1.826666rem; left: 3.373333rem; top: 0.466666rem; }
}
@-webkit-keyframes qPic4Ani{
	0%{width: 5.546666rem; height: 3.266666rem; left: 0.733333rem; top: 0.6rem;}
	100%{width: 3.213333rem; height: 1.893333rem; left: 3.693333rem; top: 0.506666rem; }
}
@-webkit-keyframes qPic5Ani{
	0%{width: 5.053333rem; height: 3.36rem; left: 0.933333rem; top: 0.573333rem;}
	100%{width: 2.693333rem; height: 1.786666rem; left: 4.933333rem; top: 0.44rem; }
}
@-webkit-keyframes qPic6Ani{
	0%{width: 5.173333rem; height: 3.546666rem; left: 0.88rem; top: 0.4rem;}
	100%{width: 3.706666rem; height: 2.56rem; left:2.693333rem; top:0.12rem; }
}
@-webkit-keyframes qPic7Ani{
	0%{width: 4.253333rem; height: 3.36rem; left: 1.346666rem; top: 0.573333rem;}
	100%{width: 2.973333rem; height: 2.346666rem; left:4.04rem; top:0.373333rem; }
}
@-webkit-keyframes qPic8Ani{
	0%{width: 3.733333rem; height: 3.24rem; left: 1.653333rem; top: 0.613333rem;}
	100%{width: 2.16rem; height: 1.88rem; left:2.4rem; top:0.88rem; }
}
@-webkit-keyframes qPic9Ani{
	0%{width: 5.706666rem; height: 3.08rem; left: 1.08rem; top: 0.88rem;}
	100%{width: 3.933333rem; height: 2.12rem; left:2.8rem; top:0.853333rem; }
}
@-webkit-keyframes qPic10Ani{
	0%{width: 3.386666rem; height: 3.213333rem; left: 1.906666rem; top: 0.693333rem;}
	100%{width: 2.293333rem; height: 2.173333rem; left:4.573333rem; top:0.453333rem; }
}
@-webkit-keyframes qPic11Ani{
	0%{width: 4.72rem; height: 3.12rem; left: 1.146666rem; top: 0.653333rem;}
	100%{width: 2.946666rem; height: 1.946666rem; left:3.106666rem; top:0.853333rem; }
}
@-webkit-keyframes qPic12Ani{
	0%{width: 4.533333rem; height: 2.746666rem; left: 1.32rem; top: 0.84rem;}
	100%{width: 3.24rem; height: 1.96rem; left:2.653333rem; top:0.84rem; }
}
@-webkit-keyframes abg1Ani{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:75% 40% ;}
	100%{-webkit-mask-size:12rem 12rem ;-webkit-mask-position:center center;}
}
@-webkit-keyframes objAni{
	0%{-webkit-mask-size:0 0 ;-webkit-mask-position:center center ; opacity: 0;}
	100%{-webkit-mask-size:6rem 6rem ;-webkit-mask-position:center center; opacity: 1;}
}

.mainSec{width: 100%; height: 100%;  z-index: 1200;visibility: hidden;pointer-events: none; display: none;}
.md-show {visibility: visible;display: block;}
.mainSec.md-show ~ .md-overlay {opacity: 1;visibility: visible;}

.mapBg{width: 16rem; height: 10.8rem ; position: relative; background:url(../images/map.png); background-size: 100% auto; background-position: top center;  transform: translate3d(-1rem, 0px, 0px); top: 1.44rem; position: absolute; pointer-events: auto;
	-webkit-filter: blur(5px);
}
.mapTxt{width: 1.613333rem; height: 3.04rem; position: absolute; left: 50%; margin-left: 0; top: -0.293333rem; background: url(../images/mapTxt.png); background-size: 100% 100%;}
.mapTipBox{width: 4.226666rem; height: 3.266666rem; position: absolute; left: 50%; margin-left: -2.113rem; top: 4.12rem; background: url(../images/mapTipBg.png); background-size: 100% 100%; pointer-events: none; opacity: 0; z-index: 1000; -webkit-transition: all 300ms;}
.mapTipBox.show{opacity: 1;}
.mapTipBox .mapTip{width: 2rem; height: 0.826666rem; position: absolute; left: 1.093333rem; top: 0.6rem; background: url(../images/mapTip.png); background-size: 100% 100%;-webkit-animation: TipAni 2000ms infinite;}
.mapClearBlur{-webkit-animation: blurAni 1000ms ease-out forwards;}
@-webkit-keyframes blurAni{
	0%{-webkit-filter: blur(5px);}
	100%{-webkit-filter: blur(0px);}
}
@-webkit-keyframes TipAni{
	0%{left: 0.593333rem;}
	50%{left: 1.593333rem;}
	100%{left: 0.593333rem;}
}
.tag{ width: 0.76rem; height: 0.933333rem; position: absolute; top: 50%; left:50% ; pointer-events: auto;}
.tag1{left: 12.706666rem; top: 0.786666rem; background: url(../images/tag1.png); background-size: 100% 100%;}
.tag2{left: 13.04rem; top: 2.053333rem; 	background: url(../images/tag2.png); background-size: 100% 100%;}
.tag3{left: 12.026666rem; top: 2.44rem; 	background: url(../images/tag3.png); background-size: 100% 100%;}
.tag4{left: 10.746666rem; top: 2.986666rem; 	background: url(../images/tag4.png); background-size: 100% 100%;}
.tag5{left: 9.293333rem; top: 2.866666rem; 	background: url(../images/tag5.png); background-size: 100% 100%;}
.tag6{left: 6.76rem; top: 3.586666rem; 	background: url(../images/tag6.png); background-size: 100% 100%;}
.tag7{left: 4.04rem; top: 2.813333rem; 	background: url(../images/tag7.png); background-size: 100% 100%;}
.tag8{left: 11.133333rem; top: 3.586666rem; 	background: url(../images/tag8.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag9{left: 12rem; top: 4.24rem; 	background: url(../images/tag9.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag10{left: 11.226666rem; top: 4.36rem;/*4.586666rem*/ 	background: url(../images/tag10.png); background-size: 100% 100%;}
.tag11{left: 10.466666rem; top: 4.053333rem; 	background: url(../images/tag11.png); background-size: 100% 100%;}
.tag12{left: 9.693333rem; top: 4.186666rem; 	background: url(../images/tag12.png); background-size: 100% 100%;}
.tag13{left: 8.32rem; top: 4.226666rem; 	background: url(../images/tag13.png); background-size: 100% 100%;}
.tag14{left: 5.773333rem; top: 4.88rem; 	background: url(../images/tag14.png); background-size: 100% 100%;}
.tag15{left: 11.706666rem; top: 5.053333rem; 	background: url(../images/tag15.png); background-size: 100% 100%;}
.tag16{left: 11.24rem; top: 5.133333rem; 	background: url(../images/tag16.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag17{left: 12.333333rem; top: 5.52rem; 	background: url(../images/tag17.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag18{left: 11.946666rem; top: 5.786666rem; 	background: url(../images/tag18.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag19{left: 12.146666rem; top: 6.226666rem; 	background: url(../images/tag19.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag20{left: 12.506666rem; top: 5.933333rem; 	background: url(../images/tag20.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag21{left: 9.04rem; top: 4.933333rem; 	background: url(../images/tag21.png); background-size: 100% 100%;}
.tag22{left: 10.2rem; top: 5.2rem; 	background: url(../images/tag22.png); background-size: 100% 100%;}
.tag23{left: 8.853333rem; top: 5.6rem; 	background: url(../images/tag23.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag24{left: 11.16rem; top:5.906666rem; 	background: url(../images/tag24.png); background-size: 100% 100%;}
.tag25{left: 9.973333rem; top:6.146666rem; 	background: url(../images/tag25.png); background-size: 100% 100%;}
.tag26{left: 8.76rem; top:6.426666rem; 	background: url(../images/tag26.png); background-size: 100% 100%;}
.tag27{left: 7.16rem; top:6.146666rem; 	background: url(../images/tag27.png); background-size: 100% 100%;}
.tag28{left:7.8rem; top: 6.64rem; 	background: url(../images/tag28.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag29{left: 3.733333rem; top:6.213333rem; 	background: url(../images/tag29.png); background-size: 100% 100%;}
.tag30{left:12.02rem; top: 6.753333rem; 	background: url(../images/tag30.png); background-size: 100% 100%;}
.tag31{left:11.626666rem; top:7.533333rem; 	background: url(../images/tag31.png); background-size: 100% 100%;}
.tag32{left:10.893333rem; top:7.08rem; 	background: url(../images/tag32.png); background-size: 100% 100%;}
.tag33{left:9.733333rem; top:7.226666rem; 	background: url(../images/tag33.png); background-size: 100% 100%;}
.tag34{left:8.466666rem; top:7.533333rem; 	background: url(../images/tag34.png); background-size: 100% 100%;}
.tag35{left:7.066666rem; top:8.266666rem; 	background: url(../images/tag35.png); background-size: 100% 100%;}
.tag36{left:8.866666rem; top:8.493333rem; 	background: url(../images/tag36.png); background-size: 100% 100%;}
.tag37{left:9.48rem; top: 8.093333rem; 	background: url(../images/tag37.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag38{left:10.36rem; top:8.306666rem; 	background: url(../images/tag38.png); background-size: 100% 100%;}
.tag39{left:10.973333rem; top: 8.653333rem; 	background: url(../images/tag39.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}
.tag40{left:9.306666rem; top: 9.373333rem; 	background: url(../images/tag40.png); background-size: 100% 100%;}
.tag41{left:9.626666rem; top: 10rem; 	background: url(../images/tag41.png); background-size: 100% 100%; width: 0.533333rem; height: 0.653333rem;}

.mapBtn1{width: 2.453333rem; height: 0.906666rem; left: 50%; top:12.286666rem ; margin-left: -3.973333rem; position: absolute; background: url(../images/mapBtn1.png); background-size: 100% 100%;pointer-events:all; opacity: 0;}
.mapBtn2{width: 2.453333rem; height: 0.906666rem; left: 50%; top:12.286666rem ; margin-left: -1.226666rem; position: absolute; background: url(../images/mapBtn2.png); background-size: 100% 100%;pointer-events:all; opacity: 0;}
.mapBtn3{width: 2.453333rem; height: 0.906666rem; left: 50%; top:12.286666rem ; margin-left: 1.52rem; position: absolute; background: url(../images/mapBtn3.png); background-size: 100% 100%;pointer-events:all; opacity: 0;}
.mapBtn4{width: 7.946666rem; height: 1.173333rem; left: 50%; top:13.34rem; margin-left: -3.973333rem; position: absolute; background: url(../images/mapBtn4.png); background-size: 100% 100%;pointer-events:all; opacity: 0;}
.mapBtnShow{-webkit-animation: fadeIn 1000ms ease-out forwards;}


.card{width: 6.933333rem; height: 4.36rem;position: absolute; left: 50%; margin-left: -3.466666rem; top: 5.053333rem; pointer-events: a;}

.card1{background: url(../images/card1.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card2{background: url(../images/card2.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card3 {background: url(../images/card3.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card4 {background: url(../images/card4.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card5{background: url(../images/card5.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card6 {background: url(../images/card6.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card7{background: url(../images/card7.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card8{background: url(../images/card8.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card9{background: url(../images/card9.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card10 {background: url(../images/card10.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card11 {background: url(../images/card11.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card12 {background: url(../images/card12.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card13{background: url(../images/card13.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card14{background: url(../images/card14.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card15 {background: url(../images/card15.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card16{background: url(../images/card16.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card17{background: url(../images/card17.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card18 {background: url(../images/card18.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card19{background: url(../images/card19.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card20{background: url(../images/card20.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card21{background: url(../images/card21.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card22{background: url(../images/card22.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card23 {background: url(../images/card23.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card24 {background: url(../images/card24.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card25 {background: url(../images/card25.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card26{background: url(../images/card26.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card27 {background: url(../images/card27.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card28{background: url(../images/card28.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card29 {background: url(../images/card29.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card30 {background: url(../images/card30.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card31 {background: url(../images/card31.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card32 {background: url(../images/card32.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card33 {background: url(../images/card33.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card34{background: url(../images/card34.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card35 {background: url(../images/card35.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card36{background: url(../images/card36.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card37{background: url(../images/card37.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card38{background: url(../images/card38.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card39 {background: url(../images/card39.png) no-repeat; background-size:4.386666rem 7.013333rem; width: 4.386666rem; height: 7.013333rem;position: absolute; left: 50%; margin-left: -2.15rem; top:2.266666rem;}
.card40{background: url(../images/card40.png) no-repeat; background-size:6.933333rem 4.36rem;}
.card41{background: url(../images/card41.png) no-repeat; background-size:6.933333rem 4.36rem;}


.score .scoreBg{ width: 8.133333rem; height: 2.28rem; padding-top: 1.6rem; position: absolute; top: 1.213333rem; left: 50%; margin-left: -4.053333rem; background: url(../images/scoreBg.png) no-repeat; background-size: 100% 100%; font-size: 1rem; color: #D84A51;}
.score .scoreTxtBg{ width: 5.56rem; height: 6.333333rem; position: absolute; top: 5.4rem;left: 50%; margin-left: -2.786666rem;background: url(../images/scoreTxtBg.png) no-repeat; background-size: 100% 100%;}
#popNote5Close{width: 1.146666rem; height: 1.146666rem; position: absolute; display: block; bottom: 10%;left: 50%; right: auto; top: auto; margin-left: -0.573333rem;background: url(../images/blackClose.png) no-repeat; background-size: 100% 100%;}
.f1Txt1{width: 2.12rem; height: 5.48rem; position: absolute; left: 1.733333rem; top: 0.453333rem; background: url(../images/fa1Txt1.png); background-size: 100% 100%;}
.f1Txt2{width: 2.12rem; height: 5.48rem; position: absolute; left: 1.733333rem; top: 0.453333rem; background: url(../images/fa1Txt2.png); background-size: 100% 100%;}
.f1Txt3{width: 2.12rem; height: 5.48rem; position: absolute; left: 1.733333rem; top: 0.453333rem; background: url(../images/fa1Txt3.png); background-size: 100% 100%;}