@font-face {
  font-family: 'heavy';
  src: url('../font/FZCYS.TTF') format('opentype');
}
html{
    width : 100vmax;
    height : 100vmin;
}
body{
    width : 100vmax;
    height : 100vmin;
}
.swiper-slide.swiper-slide-active{
	z-index:5;
}
#gyroContain{
    width : 100vmax;
    height : 100vmin;
	position:relative;
}
.swiper-container{
	width:100%;
	height:100%;
	position:relative;
	z-index: 3;
}
.kv{
	width:100%;
	height:100%;
	background:url(../images/kv.jpg) no-repeat center;
	background-size:cover;
	position:relative;
	overflow: hidden;
}
.qian{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	pointer-events: none;
}
.logo{
	display:block;
	width:1.41rem;
	position:absolute;
	left:.98rem;
	top:.3rem;
	z-index:2;
}
.logTip{
	width:3.7rem;
	height:.39rem;
	position:absolute;
	right:1.87rem;
	top:.57rem;
	display:flex;
	display:-webkit-flex;
	justify-content: space-between;
	z-index:2;
	font-family: 'heavy';
}
.logTip .phoneTip{
	width:2.56rem;
	height:.39rem;
	background:url(../images/name.png) no-repeat center;
	background-size:cover;
	font-size:.2rem;
	color:#fff;
	text-align: center;
	line-height:.39rem;
	display:flex;
	display:-webkit-flex;
	justify-content: center;
}
.logTip .phoneTip img{
	display:block;
	width:.25rem;
	height:.25rem;
	margin-top:.05rem;
	margin-left:.04rem;
}
.logTip .logout{
	width:.87rem;
	height:.39rem;
	background:url(../images/out.png) no-repeat center;
	background-size:cover;
	font-size:.22rem;
	color:#fff;
	text-align: center;
	line-height:.39rem;
}
.music{
	display:block;
	width:.5rem;
	position:absolute;
	right:.98rem;
	top:.43rem;
	z-index:2;
}
.music.active{
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
}
.light{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
	pointer-events: none;
	animation: opacity 3s linear infinite;
	-webkit-animation: opacity 3s linear infinite;
}
@keyframes opacity{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}
@-webkit-keyframes opacity{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}
.letter{
	width:12.76rem;
	height:5.84rem;
	background:url(../images/letter.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:50%;
	margin-left:-6.38rem;
	top:.7rem;
}
.letter .sma1{
	display:block;
	width:.88rem;
	position:absolute;
	right:1.6rem;
	top:4.21rem;
	animation: huxi 1s ease-out infinite alternate;
	-webkit-animation: huxi 1s ease-out infinite alternate;
}
@keyframes huxi{
	0%{
		transform: scale(.8);
		transform: translateY(10px);
	}
	100%{
		transform: scale(1);
		transform: translateY(-10px);
	}
}
@-webkit-keyframes huxi{
	0%{
		transform: scale(.8);
		transform: translateY(10px);
	}
	100%{
		transform: scale(1);
		transform: translateY(-10px);
	}
}
.letter .sma2{
	display:block;
	width:.96rem;
	position:absolute;
	left:3rem;
	top:3.91rem;
	animation: huxi 800ms ease-out infinite alternate;
	-webkit-animation: huxi 800ms ease-out infinite alternate;
}
.letter .sma3{
	display:block;
	width:.94rem;
	position:absolute;
	left:4.48rem;
	top:.58rem;
	animation: huxi 500ms ease-out infinite alternate;
	-webkit-animation: huxi 500ms ease-out infinite alternate;
}
.start{
	display:block;
	width:4.24rem;
	position:absolute;
	left:50%;
	margin-left:-2.12rem;
	top:5.71rem;
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
}
@keyframes vGo{
	0%{transform: scale(1);-webkit-transform: scale(1);}
	50%{transform: scale(1.2);-webkit-transform: scale(1.2);}
	100%{transform: scale(1);-webkit-transform: scale(1);}
}
@-webkit-keyframes vGo{
	0%{transform: scale(1);-webkit-transform: scale(1);}
	50%{transform: scale(1.2);-webkit-transform: scale(1.2);}
	100%{transform: scale(1);-webkit-transform: scale(1);}
}
.qiu1{
	display:block;
	width:2.77rem;
	position:absolute;
	left:.49rem;
	top:-.35rem;
	animation: qiu 2s linear infinite;
	-webkit-animation: qiu 2s linear infinite;
}
@keyframes qiu {
	0%{transform: translate(-10px,10px);}
	50%{transform: translate(0,0);}
	100%{transform: translate(-10px,10px);}
}
@-webkit-keyframes qiu{
	0%{transform: translate(-10px,10px);}
	50%{transform: translate(0,0);}
	100%{transform: translate(-10px,10px);}
}
.qiu2{
	display:block;
	width:2.13rem;
	position:absolute;
	right:.7rem;
	top:1.46rem;
	animation: qiu 3s linear infinite;
	-webkit-animation: qiu 3s linear infinite;
}
.qiu3{
	display:block;
	width:1.49rem;
	position:absolute;
	right:4.35rem;
	top:-.5rem;
	animation: qiu 4s linear infinite;
	-webkit-animation: qiu 4s linear infinite;
}
.loading{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.mask{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
}
.loadTxt {
	width: 9.86rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
.loadTxt::after {
	display:block;
	content:'';
	width:.72rem;
	height:.68rem;
	background:url(../images/xing.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:-.2rem;
	top:.22rem;
}
.jdtPic {
	display: block;
	width: 100%;
	position: relative;
}

.loadT {
	width: 100%;
	position: relative;
}

.loadT .loadTct {
	display: block;
	width: 2%;
	height: .19rem;
	background: linear-gradient(to right, #ffb3e0, #ffd3ba);
	position: absolute;
	left: .49rem;
	top: .53rem;
	border-radius: .1rem;
}

.loadT .loadGif {
	display: block;
	width: .69rem;
	position: absolute;
	left: 0.3rem;
	top: 0.22rem;
}

.loadTxt p {
	width:100%;
	font-size: .24rem;
	font-weight: bold;
	color: #986842;
	margin-top:-.3rem;
	text-align: center;
}
.sma4{
	display:block;
	width:.99rem;
	position:absolute;
	left:1.16rem;
	top:-.72rem;
}
.sma5{
	display:block;
	width:1.03rem;
	position:absolute;
	left:-.39rem;
	top:.97rem;
}
.sma6{
	display:block;
	width:.88rem;
	position:absolute;
	right:-.15rem;
	top:.93rem;
}
.sec {
	width:100%;
	height:100%;
	background:url(../images/sec.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
html.active .openLight{
	left:5.72rem;
}
.openLight{
	width:3.59rem;
	position:absolute;
	left:4.72rem;
	top:.64rem;
}
.openLight .yuan{
	display:block;
	width:2.33rem;
}
.openLight .wen{
	display:block;
	width:1.46rem;
	position:absolute;
	right:0;
	top:1.71rem;
	animation: imgGo 1s linear infinite;
	-webkit-animation: imgGo 1s linear infinite;
}
@keyframes imgGo {
	0% {
	    transform: translate(0, 0);
	}
	100% {
	    transform: translate(-15px, 0);
	}
}
@-webkit-keyframes imgGo{
	0% {
	    transform: translate(0, 0);
	}
	100% {
	    transform: translate(-15px, 0);
	}
}
.wen1{
	display:block;
	width:9.97rem;
	position:absolute;
	left:50%;
	margin-left:-4.985rem;
	top:5.65rem;
}
.go{
	display:block;
	width:1.82rem;
	position:absolute;
	left:50%;
	margin-left:-.91rem;
	top:6.21rem;
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
}
.skip{
	display:block;
	width:1.05rem;
	position:absolute;
	right:.88rem;
	top:5.58rem;
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
}
.clickTxt{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}
.clickSec{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}
.prev{
	width:1.42rem;
	height:1.42rem;
	background:url(../images/ye.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:.1rem;
	top:45%;
	transform: translate(0,-45%);
	-webkit-transform: translate(0,-45%);
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
	z-index:5;
}
.nextBub.swiper-button-disabled{
	display:none;
}
.next{
	width:1.42rem;
	height:1.42rem;
	background:url(../images/ye1.png) no-repeat center;
	background-size:cover;
	position:absolute;
	right:.1rem;
	top:45%;
	transform: translate(0,-45%);
	-webkit-transform: translate(0,-45%);
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
	z-index:5;
}
html.active .openDoor{
	right:5rem;
	top:4rem;
}
.openDoor{
	width:2.91rem;
	position:absolute;
	right:4.62rem;
	top:3.51rem;
	z-index:1;
}
.openDoor .yuan{
	display:block;
	width:1.58rem;
	margin-left:1.33rem;
}
.openDoor .wen{
	display:block;
	width:1.46rem;
	position:absolute;
	left:0;
	top:1.05rem;
	animation: imgGo1 1s linear infinite;
	-webkit-animation: imgGo1 1s linear infinite;
}
@keyframes imgGo1 {
	0% {
	    transform: translate(0, 0);
	}
	100% {
	    transform: translate(15px, 0);
	}
}
@-webkit-keyframes imgGo1{
	0% {
	    transform: translate(0, 0);
	}
	100% {
	    transform: translate(15px, 0);
	}
}
.suo{
	display:block;
	width:3.46rem;
	position:absolute;
	right:4.73rem;
	top:4.8rem;
}
html.active .deng{
	left:2.32rem;
}
.deng{
	display:block;
	width:9.27rem;
	position:absolute;
	left:1.32rem;
	top:0;
	animation: opac 2s linear infinite;
	-webkit-animation: opac 2s linear infinite;
}
@keyframes opac {
	0%{opacity:.2}
	50%{opacity: 1;}
	100%{opacity: .2;}
}
.txtDia{
	width:8.65rem;
	position:absolute;
	left:50%;
	margin-left:-4.325rem;
	top:4.278rem;
}
.txtDia img{
	display:none;
	width:100%;
}
.txtDia img.active{
	display:block;
}
.thc{
	width:100%;
	height:100%;
	background:url(../images/thc.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
.thTip{
	display:block;
	width:13.53rem;
	position:absolute;
	left:50%;
	margin-left:-6.765rem;
	top:2.7rem;
}
.thBtn{
	width:9.7rem;
	height:2.77rem;
	position:absolute;
	left:50%;
	margin-left:-4.85rem;
	top:4.7rem;
	display: flex;
	display: -webkit-flex;
	justify-content: center;
}
.thBtn img{
	display:block;
	width:5.52rem;
}
.thBtn img:nth-child(2){
	margin-left:-1.4rem;
	display:none;
}
.thBtn.active img:nth-child(2){
	display:block;
}
.for{
	width:100%;
	height:100%;
	background:url(../images/for.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
.for .flower{
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	pointer-events: none;
}
.for .logo{
	display:block;
	width:1.72rem;
	position:absolute;
	left:.83rem;
	top:.18rem;
}
.shake{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	pointer-events: none;
	animation: opacity 3s linear infinite;
	-webkit-animation: opacity 3s linear infinite;
}
html.active .foBtn{
	top:5.2rem;
}
.foBtn{
	width:6.02rem;
	position:absolute;
	left:50%;
	margin-left:-3.01rem;
	top:4.88rem;
	z-index:2;
}
.foBtn img{
	display:none;
	width:100%;
}
.foBtn img.active{
	display:block;
}
.person{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.banner{
	width:100%;
	height:100%;
	position:relative;
	overflow: hidden;
}
.five{
	width:100%;
	height:100%;
	background:url(../images/five.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
.openDay{
	width:12.89rem;
	height:5.27rem;
	background:url(../images/date.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:50%;
	margin-left:-6.445rem;
	top:.95rem;
}
.open1{
	display:block;
	width:.93rem;
	position:absolute;
	top:.19rem;
	left:4.63rem;
	animation: huxi 1s ease-out infinite alternate;
	-webkit-animation: huxi 1s ease-out infinite alternate;
}
.open2{
	display:block;
	width:.95rem;
	position:absolute;
	top:4.2rem;
	left:2.24rem;
	animation: huxi 800ms ease-out infinite alternate;
	-webkit-animation: huxi 800ms ease-out infinite alternate;
}
.open3{
	display:block;
	width:.91rem;
	position:absolute;
	top:4.1rem;
	right:2.34rem;
	animation: huxi 500ms ease-out infinite alternate;
	-webkit-animation: huxi 500ms ease-out infinite alternate;
}
.num{
	display:block;
	width:2.43rem;
	position:absolute;
	top:2.75rem;
	right:3.11rem;
}
.map{
	width:100%;
	height:5.76rem;
	background:url(../images/map.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:0;
	top:.77rem;
}
.clickStart{
	width:1.58rem;
	height:2.71rem;
	position:absolute;
	left:2.03rem;
	top:0;
	z-index:3;
}
.clickStart img:nth-child(1){
	display:block;
	width:1.58rem;
}
.clickStart img:nth-child(2){
	display:block;
	width:.82rem;
	margin:0 auto;
}
.walkGirl{
	display:block;
	width: 0.84rem;
	position:absolute;
	left:2.45rem;
	top:0rem;
	z-index:2;
}
.walkGirl.active{
	animation: walkGo 6s linear infinite;
	-webkit-animation: walkGo 6s linear infinite;
}
html.active .walkGirl.active{
	animation: walkGo1 6s linear infinite;
	-webkit-animation: walkGo1 6s linear infinite;
}
@keyframes walkGo1 {
	0%{left:2.45rem;top:0;}
	5%{left:4rem;top:0;}
	10%{left:5.5rem;top:0rem;}
	20%{left:9.3rem;top:0rem;}
	25%{left:11.3rem;top:1rem;}
	31%{left:9.2rem;top:1.5rem;}
	37%{left:7.2rem;top:1.8rem;}
	45%{left:3.8rem;top:2.5rem;}
	51%{left:6rem;top:3.2rem;}
	61%{left:9.3rem;top:3.4rem;}
	71%{left:13.3rem;top:3rem;}
	100%{left:20rem;top:2.4rem;}
}
@-webkit-keyframes walkGo1{
	0%{left:2.45rem;top:0;}
	5%{left:4rem;top:0;}
	10%{left:5.5rem;top:0rem;}
	20%{left:9.3rem;top:0rem;}
	25%{left:11.3rem;top:1rem;}
	31%{left:9.2rem;top:1.5rem;}
	37%{left:7.2rem;top:1.8rem;}
	45%{left:3.8rem;top:2.5rem;}
	51%{left:6rem;top:3.2rem;}
	61%{left:9.3rem;top:3.4rem;}
	71%{left:13.3rem;top:3rem;}
	100%{left:20rem;top:2.4rem;}
}
@keyframes walkGo {
	0%{left:2.45rem;top:0;}
	5%{left:4rem;top:0;}
	10%{left:5.5rem;top:0rem;}
	15%{left:7rem;top:0rem;}
	23%{left:8.5rem;top:1rem;}
	29%{left:9.2rem;top:1.5rem;}
	35%{left:7.2rem;top:1.8rem;}
	43%{left:3.8rem;top:2.5rem;}
	49%{left:6rem;top:3.2rem;}
	59%{left:9.3rem;top:3.4rem;}
	71%{left:13.3rem;top:3rem;}
	100%{left:20rem;top:1.8rem;}
}
@-webkit-keyframes walkGo{
	0%{left:2.45rem;top:0;}
	5%{left:4rem;top:0;}
	10%{left:5.5rem;top:0rem;}
	15%{left:7rem;top:0rem;}
	23%{left:8.5rem;top:1rem;}
	29%{left:9.2rem;top:1.5rem;}
	35%{left:7.2rem;top:1.8rem;}
	43%{left:3.8rem;top:2.5rem;}
	49%{left:6rem;top:3.2rem;}
	59%{left:9.3rem;top:3.4rem;}
	71%{left:13.3rem;top:3rem;}
	100%{left:20rem;top:1.8rem;}
}
.map ul{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	display:none;
}
.map ul li{
	position:absolute;
}
.map ul li img{
	display:block;
	width:100%;
}
.map ul li:nth-child(1){
	width:1.56rem;
	left:3.7rem;
	top:0.02rem;
}
.map ul li:nth-child(2){
	width:1.56rem;
	left:6.78rem;
	top:0.15rem;
}
.map ul li:nth-child(3){
	width:1.75rem;
	left:9.83rem;
	top:1.67rem;
}
.map ul li:nth-child(4){
	width:1.89rem;
	left:6.42rem;
	top:2.93rem;
}
.map ul li:nth-child(5){
	width:2.39rem;
	left:1.84rem;
	top:2.82rem;
}
.map ul li:nth-child(6){
	width:2.17rem;
	left:5.23rem;
	top:4.57rem;
}
.map ul li:nth-child(7){
	width:1.56rem;
	left:8.94rem;
	top:4.63rem;
}
.map ul li:nth-child(8){
	width:1.7rem;
	right:1.45rem;
	top:4.24rem;
}
.starPic{
	display:block;
	width:.75rem;
	position:absolute;
	left:9.37rem;
	top:.86rem;
}
.dan{
	display:block;
	width:.8rem;
	position:absolute;
	left:4.28rem;
	top:2.57rem;
}
.flo{
	display:block;
	width:.67rem;
	position:absolute;
	left:8.79rem;
	top:4.08rem;
}
.time{
	display:block;
	width:6.69rem;
	position:absolute;
	left:50%;
	margin-left:-3.345rem;
	top:6.61rem;
	z-index:2;
}
.endTxt{
	width:100%;
	height:100%;
	background:url(../images/zz.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:0;
	top:0;
	z-index:4;
	display:none;
}
.txtType{
	width:100%;
	height:100%;
	background:url(../images/white.png) no-repeat center;
	background-size:cover;
	position:relative;
	text-align: center;
}
.txtType>div{
	width:100%;
	top:45%;
	position:relative;
	transform: translate(0,-45%);
	-webkit-transform: translate(0,-45%);
	display:none;
	font-size:.38rem;
	color:#8d95e9;
	line-height:.6rem;
	font-family: 'heavy';
}
.txtType>div.active{
	display:block;
}
.txtType>div span{
	font-size:.45rem;
	color:#ffbe8f;
}
.txtType>div em{
	font-size:.4rem;
	color:#ffa7a7;
	font-style: normal;
}
.six{
	width:100%;
	height:100%;
	background:url(../images/six.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
.sixOne{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}
.txtDate{
	display:block;
	width:6.69rem;
	position:absolute;
	left:50%;
	margin-left:-3.345rem;
	top:6.61rem;
}
.guang1{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	pointer-events: none;
	animation: opacity 2s linear infinite;
	-webkit-animation: opacity 2s linear infinite;
}
.sixOne .siLetter{
	width:13.12rem;
	height:4.96rem;
	background:url(../images/lec.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:50%;
	margin-left:-6.56rem;
	top:1.26rem;
	font-family: 'heavy';
}
.sixOne .siLetter .siPic{
	display:block;
	width:2.13rem;
	position:absolute;
	left:0;
	bottom:0.2rem;
}
.sixOne .siLetter .sePic{
	display:block;
	width:1.76rem;
	position:absolute;
	left:1.4rem;
	bottom:0;
}
.sixOne .siLetter .txtOne{
	text-align: center;
	font-size:.36rem;
	color:#8d95e9;
	opacity: 0;
}
.sixOne .siLetter .txtOne span{
	color:#95d2e3;
}
.sixOne .siLetter .txtOne p{
	line-height:.7rem;
}
.sixOne .seLetter{
	width:12.7rem;
	height:5.09rem;
	background:url(../images/leb.png) no-repeat center;
	background-size:cover;
	position:absolute;
	left:50%;
	margin-left:-6.35rem;
	top:1.26rem;
}
.le1{
	display:block;
	width:2.72rem;
	position:absolute;
	left:0;
	top:1.33rem;
	z-index:1;
}
.le2{
	display:block;
	width:1.65rem;
	position:absolute;
	right:0.95rem;
	top:.92rem;
	z-index:1;
}
.feiji{
	display:block;
	width:.7rem;
	position:absolute;
	right:-1rem;
	top:45%;
	animation: feiji 8s linear infinite;
	-webkit-animation: feiji 8s linear infinite;
}
@keyframes feiji {
	0%{right:3rem;top:45%;transform: rotate(-20deg);}
	25%{right:6rem;top:65%;transform: rotate(-40deg);}
	27%{right:6rem;top:65%;transform: rotate(20deg);}
	50%{right:8rem;top:55%;transform: rotate(20deg);}
	52%{right:8rem;top:55%;transform: rotate(-40deg);}
	75%{right:10rem;top:65%;transform: rotate(-40deg);}
	77%{right:10rem;top:65%;transform: rotate(0);}
	100%{right:12.5rem;top:65%;transform: rotate(0);}
}
@-webkit-keyframes feiji{
	0%{right:3rem;top:45%;transform: rotate(-20deg);}
	25%{right:6rem;top:65%;transform: rotate(-40deg);}
	27%{right:6rem;top:65%;transform: rotate(20deg);}
	50%{right:8rem;top:55%;transform: rotate(20deg);}
	52%{right:8rem;top:55%;transform: rotate(-40deg);}
	75%{right:10rem;top:65%;transform: rotate(-40deg);}
	77%{right:10rem;top:65%;transform: rotate(0);}
	100%{right:12.5rem;top:65%;transform: rotate(0);}
}
.sixOne .seLetter .txtTwo{
	text-align: center;
	font-size:.39rem;
	color:#8d95e9;
	font-family: 'heavy';
	opacity:0;
}
.sixOne .seLetter .txtTwo span{
	color:#95d2e3;
}
.sixOne .seLetter .txtTwo p{
	line-height:.7rem;
}
.sixOne .seLetter .txtTwo em{
	color:#faa8a8;
	font-style: normal;
}
.seven{
	width:100%;
	height:100%;
	background:url(../images/sev.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
.time1{
	display:block;
	width:6.78rem;
	position:absolute;
	left:50%;
	margin-left:-3.39rem;
	top:6.57rem;
}
html.active .txtRight{
	left:7.2rem;
	top:2rem;
}
.txtRight{
	width:7rem;
	font-size:.38rem;
	color:#8d95e9;
	position:absolute;
	top:1.5rem;
	text-align: right;
	left:6.2rem;
	font-family: 'heavy';
	opacity:0;
}
.txtRight p{
	line-height:.6rem;
}
.txtRight p span{
	color:#ffbe8f;
	font-size:.48rem;
}
html.active .txtLeft{
	left:3.5rem;
	top:5.24rem;
}
.txtLeft{
	width:5.7rem;
	font-size:.38rem;
	color:#8d95e9;
	position:absolute;
	top:4.24rem;
	text-align: left;
	left:2.5rem;
	font-family: 'heavy';
	opacity:0;
}
.txtLeft p{
	line-height:.6rem;
}
.txtLeft p span{
	color:#ffbe8f;
	font-size:.48rem;
}
.pic1{
	display:block;
	width:3.17rem;
	position:absolute;
	left:2.62rem;
	top:1.07rem;
	animation: gifttop 2s linear infinite;
	-webkit-animation: gifttop 2s linear infinite;
}
@-webkit-keyframes gifttop {
    0% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
60% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(0px,10px,0)}
100% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}

@keyframes gifttop {
    0% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
40% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(0px,10px,0)}
100% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}
@-webkit-keyframes roate {
    0% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
60% {opacity:1;
    -webkit-transform:translate3d(0,0px,0);
    transform:translate3d(0px,10px,0)}
100% {opacity:0.8;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)}
}
.pic2{
	display:block;
	width:5.31rem;
	position:absolute;
	right:1.7rem;
	top:3.3rem;
	animation: gifttop 3s linear infinite;
	-webkit-animation: gifttop 3s linear infinite;
}
.eight{
	width:100%;
	height:100%;
	background:url(../images/eight.jpg) no-repeat center;
	background-size:cover;
	position:relative;
}
.jing{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	pointer-events: none;
}
.slogan{
	width:12.89rem;
	position:absolute;
	left:50%;
	margin-left:-6.445rem;
	top:.95rem;
}
.getBtn{
	display:block;
	width:4.24rem;
	position:absolute;
	left:50%;
	margin-left:-2.12rem;
	top:5.5rem;
	animation: vGo 2s linear infinite;
	-webkit-animation: vGo 2s linear infinite;
}
.getBtn.active{
	animation-name: none;
	-webkit-animation-name: none;
}
.getTc{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(.12rem);
	-webkit-backdrop-filter: blur(.12rem);
	display:none;
}
.getTc .tcBody{
	width:11.86rem;
	height:4.72rem;
	background:url(../images/tc.png) no-repeat center;
	background-size:cover;
	position:relative;
	margin:0 auto;
	top:45%;
	transform: translate(0,-45%);
	-webkit-transform: translate(0,-45%);
}
.getTc .tcBody i{
	display:block;
	width:.34rem;
	height:.34rem;
	position:absolute;
	right:.71rem;
	top:.22rem;
}
@media screen and (orientation: portrait) {
    html{
        width : 100vmin;
        height : 100vmax;
    }
    body{
        width : 100vmin;
        height : 100vmax;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
        transform-origin: top left;
        transform: rotate(90deg) translate(0,-100vmin);
    }
  }
@media screen and (orientation: landscape) {
    html{
        width : 100vmax;
        height : 100vmin;
    }
    body{
        width : 100vmax;
        height : 100vmin;
    }
    #gyroContain{
        width : 100vmax;
        height : 100vmin;
    }
	
}