@media screen and (min-width:1024px){
.guangBg{width:40%;height:20%;top: 9%;left: 45%;position:absolute;z-index: 5;transform: rotate(-138deg);}
.py{display:block;width:59px;height:49px;top:160%;left:-55%;background-image: url(../images/spot.png);background-repeat:no-repeat;position:absolute;background-position:-42px 0;-moz-animation:py 2.5s ease-in infinite;-webkit-animation:py 5s ease-in infinite;-o-animation:py 5s ease-in infinite;-ms-animation:py 5s ease-in infinite;}
.p2{background-image:url(../images/spot.png);top:60%;left:35%;width:150px;height:125px;background-position:0 -24px;display:block;-moz-animation:p2 4s ease-in infinite;-webkit-animation:p2 4s ease-in infinite;-o-animation:p2 4s ease-in infinite;-ms-animation:p2 4s ease-in infinite}
.p3{left:110%;top:0}
.p5{left:-44%;top:170%;background-position:-50px -50px;width:90px;height:90px;position:absolute}
.p4{display:block;width:30px;height:34px;top:103%;left:167%;background-image:url(../images/spot.png);background-repeat:no-repeat;position:absolute;background-position:-97px 5px;-moz-animation:py 2.5s ease-in infinite;-webkit-animation:py 5s ease-in infinite;-o-animation:py 5s ease-in infinite;-ms-animation:py 5s ease-in infinite}
.py2{left:50%}
@-moz-keyframes py{0%{opacity:.9;-moz-transform:translate(0,0);-moz-transform:rotate(-100deg)}
100%{opacity:0;-moz-transform:translate(200px,-600px)}
}
@-webkit-keyframes py{0%{-webkit-transform:translate(0,0);-webkit-transform:rotate(-100deg)}
100%{opacity:.5;-webkit-transform:translate(200px,-600px)}
}
@-o-keyframes py{0%{opacity:.9;-o-transform:translate(0,0);-o-transform:rotate(-100deg)}
100%{opacity:0;-o-transform:translate(200px,-600px)}
}
@-ms-keyframes py{0%{opacity:.9;-ms-transform:translate(0,0);-ms-transform:rotate(-100deg)}
100%{opacity:0;-ms-transform:translate(200px,-600px)}
}
@-moz-keyframes p2{0%{opacity:.9;-moz-transform:translate(0,0);-moz-transform:rotate(-100deg)}
100%{opacity:0;-moz-transform:translate(0,-500px)}
}
@-webkit-keyframes p2{0%{opacity:.9;-webkit-transform:translate(0,0);-webkit-transform:rotate(-100deg)}
100%{opacity:0;-webkit-transform:translate(0,-500px)}
}
@-o-keyframes p2{0%{opacity:.9;-o-transform:translate(0,0);-o-transform:rotate(-100deg)}
100%{opacity:0;-o-transform:translate(0,-500px)}
}
@-ms-keyframes p2{0%{opacity:.9;-ms-transform:translate(0,0);-ms-transform:rotate(-100deg)}
100%{opacity:0;-ms-transform:translate(0,-500px)}
}
.b-sidler{-webkit-animation:shakeScale .5s .6s ease-out both;-moz-animation:shakeScale .5s .6s ease-out both;-ms-animation:shakeScale .5s .6s ease-out both;animation:shakeScale .5s .6s ease-out both}
@-webkit-keyframes shakeScale{0%,100%{-webkit-transform:scale3d(1,1,1)}
50%,70%,90%{-webkit-transform:scale3d(1.02,1.02,1)}
40%,60%,80%{-webkit-transform:scale3d(1,1,1)}
}
@-moz-keyframes shakeScale{0%,100%{-moz-transform:scale3d(1,1,1)}
10%,30%,50%,70%,90%{-moz-transform:scale3d(1.02,1.02,1)}
20%,40%,60%,80%{-moz-transform:scale3d(1,1,1)}
}
@-o-keyframes shakeScale{0%,100%{-o-transform:scale3d(1,1,1)}
10%,30%,50%,70%,90%{-o-transform:scale3d(1.02,1.02,1)}
20%,40%,60%,80%{-o-transform:scale3d(1,1,1)}
}
@-ms-keyframes shakeScale{0%,100%{-ms-transform:scale3d(1,1,1)}
10%,30%,50%,70%,90%{-ms-transform:scale3d(1.02,1.02,1)}
20%,40%,60%,80%{-ms-transform:scale3d(1,1,1)}
}
.banner_slogn:after{content:"";display:block;background:url(../images/slogn.png) center center no-repeat;width: 100%;height: 100%;position:absolute;left:0;top:0;opacity:0;background-size: 100%;}
.banner_slogn:after{-webkit-animation:pulseInOut 1s .7s ease-out both;-moz-animation:pulseInOut 1s .7s ease-out both;-ms-animation:pulseInOut 1s .7s ease-out both;animation:pulseInOut 1s .7s ease-out both}
@-webkit-keyframes pulseInOut{0%{opacity:0;filter:alpha(opacity=0)}
10%{opacity:1;filter:alpha(opacity=100)}
50%{opacity:.4}
90%{-webkit-transform:scale3d(2.5,2.5,2.5)}
100%{opacity:0;filter:alpha(opacity=0)}
}
@-moz-keyframes pulseInOut{0%{opacity:0;filter:alpha(opacity=0)}
10%{opacity:1;filter:alpha(opacity=100)}
90%{-moz-transform:scale3d(2.5,2.5,2.5)}
100%{opacity:0;filter:alpha(opacity=0)}
}
@-o-keyframes pulseInOut{0%{opacity:0;filter:alpha(opacity=0)}
10%{opacity:1;filter:alpha(opacity=100)}
90%{-o-transform:scale3d(2.5,2.5,2.5)}
100%{opacity:0;filter:alpha(opacity=0)}
}
@-ms-keyframes pulseInOut{0%{opacity:0;filter:alpha(opacity=0)}
10%{opacity:1;filter:alpha(opacity=100)}
90%{-ms-transform:scale3d(2.5,2.5,2.5)}
100%{opacity:0;filter:alpha(opacity=0)}
}
.in-put{-webkit-animation:pulseIn .3s .4s ease-out both;-moz-animation:pulseIn .3s .4s ease-out both;-ms-animation:pulseIn .3s .4s ease-out both;animation:pulseIn .3s .4s ease-out both}
@-webkit-keyframes pulseIn{0%{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale3d(2.6,2.6,2.6)}
100%{opacity:1;filter:alpha(opacity=100);-webkit-transform:scale3d(1,1,1)}
}
@-moz-keyframes pulseIn{0%{opacity:0;filter:alpha(opacity=0);-moz-transform:scale3d(2.6,2.6,2.6)}
100%{opacity:1;filter:alpha(opacity=100);-moz-transform:scale3d(1,1,1)}
}
@-o-keyframes pulseIn{0%{opacity:0;filter:alpha(opacity=0);-o-transform:scale3d(2.6,2.6,2.6)}
100%{opacity:1;filter:alpha(opacity=100);-o-transform:scale3d(1,1,1)}
}
@-ms-keyframes pulseIn{0%{opacity:0;filter:alpha(opacity=0);-ms-transform:scale3d(2.6,2.6,2.6)}
100%{opacity:1;filter:alpha(opacity=100);-ms-transform:scale3d(1,1,1)}
}
@keyframes pulseIn{0%{opacity:0;filter:alpha(opacity=0);transform:scale3d(2.6,2.6,2.6)}
100%{opacity:1;filter:alpha(opacity=100);transform:scale3d(1,1,1)}
}


.reward_act:after{/* -webkit-animation:light .8s ease-out infinite; */-moz-animation:light .8s ease-out infinite;/* animation:light .8s ease-out infinite */}
@-webkit-keyframes light{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}
@keyframes light{
0%{opacity:0;}
50%{opacity:1;}
100%{opacity:0;}
}


@media screen and (min-width:1023px){


.onScreen .reward li,.onScreen .btn-video,.onScreen .banner_logo,.onScreen.section5 ol,.onScreen.part2 .section-share,.onScreen.part2 .friends,.onScreen.part2 .section-sup,.onScreen.part2 .section-title,.onScreen .section-title,.onScreen .sec2-ul li,.onScreen .section-invite li,.onScreen .min-man,.onScreen .reward-btn,.onScreen .section-reward li,.onScreen .loading,.onScreen .form-l,.onScreen .form-r,.onScreen .form,.onScreen .section-number,.onScreen .active-title,.onScreen .event-map,.onScreen .zj,.onScreen .shu,.onScreen .man,.onScreen .rw,.onScreen .section-sup,.onScreen .sec3-R,.onScreen .sec3-L,.onScreen .rolebg03{transform: translate(0px,0px)!important; opacity: 1}
.part2 .section-title,.part2 .section-sup,.section-title,.banner_logo{opacity: 0;transform: translate(0px,-100px);transition: all 1.5s;}
.section-sup{opacity: 0;transform: translate(0px,-100px); transition: all 2s;}
.loading,.section5 ol{opacity: 0;transform: translate(-100px,0px);transition: all 2s 1s;}
.section-number{transform: translate(-200px,0px);opacity: 0;transition: all 1.5s .8s;}
.form{transform: translate(-300px,0px);opacity: 0;transition: all 1.5s .8s;}
.form-r{transform: translate(-300px,0px);opacity: 0;transition: all 2s .8s;}
.form-l{opacity: 0;transition: all 1s .7s;}
.friends{opacity: 0;transform: translate(0px,-100px); transition: all 2s;}
.section-share,.btn-video{opacity: 0;transform: translate(0px,100px); transition: all 2s 1s;}

.part2 .section-title

.section-reward li{opacity: 0}

.active-title{transform: translate(0px,-100px); opacity: 0; transition:all 1s 1s;}

.event-map,.zj,.rw{transform: translate(0px,100px);opacity: 0;transition: all 1s .5s;}
.shu{transform: translate(100px,0px); opacity: 0; transition:all 1s 1s;}
.man{transform: translate(-100px,0px); opacity: 0; transition:all 1s 1s;}
.min-man{transform: translate(0px,-100px); opacity: 0; transition:all 1s .5s;}



.section-reward li{opacity: 0}
.section-reward li.reward1{transition:all 1s;}
.section-reward li.reward2{transition:all 1s .4s;}
.section-reward li.reward3{transition:all 1s .8s;}
.section-reward li.reward4{transition: all 1s .7s;}
.section-reward li.reward5{transition: all 1s .6s;}
.section-reward li.reward6{transition: all 1s .4s;}
.section-reward li.reward7{transition: all 1s 1s;}
.section-reward li.reward8{transition: all 1s .5s;}
.reward-btn{opacity: 0;transition: all 1s 1s;}

.btn-lot i,.btn-lot span{border:2px solid transparent;width:0;height:0;display:block;content:'';position:absolute;top:0;left:0;z-index:2}
.btn-lot i{top: -1px;left: 12px;}
.btn-lot span{left:auto;right: -4px;top:auto;bottom: 26px;}
.btn-lot:hover i,.btn-lot:hover span{width: 202px;height: 150px;}
.btn-lot:hover i{border-top-color: #e8bd84;border-right-color: #c7b296;-webkit-transition:width .25s ease-out,height .25s ease-out .25s;-moz-transition:width .25s ease-out,height .25s ease-out .25s;-ms-transition:width .25s ease-out,height .25s ease-out .25s;-o-transition:width .25s ease-out,height .25s ease-out .25s;transition:width .25s ease-out,height .25s ease-out .25s;}
.btn-lot:hover span{border-bottom-color: #eccea7;border-left-color: #cebd98;-webkit-transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;-moz-transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;-ms-transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;-o-transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .75s;}


.sec2-ul li{opacity: 0}
.sec2-ul li.s-standard1,.sec2-ul li.s-standard5{transform: translate(0px,100px);transition:all 1s .4s;}
.sec2-ul li.s-standard2,.sec2-ul li.s-standard4{transform: translate(0px,100px); transition:all 1s .8s;}
.sec2-ul li.s-standard3{transform: translate(0px,100px); transition:all 1s 1.2s;}

.section-invite li{opacity: 0}
.section-invite li.s-invite1,.section-invite li.s-invite5{transform: translate(0px,100px);transition:all 1s .4s;}
.section-invite li.s-invite2,.section-invite li.s-invite4{transform: translate(0px,100px); transition:all 1s .8s;}
.section-invite li.s-invite3{transform: translate(0px,100px); transition:all 1s 1.2s;}

.reward li{opacity: 0}
.reward li:nth-child(1),.reward li:nth-child(3),.reward li:nth-child(5){transform: translate(0px,100px);transition:all 1s .4s;}
.reward li:nth-child(2),.reward li:nth-child(3),.reward li:nth-child(6){transform: translate(0px,100px); transition:all 1s .8s;}

	
}

.banner_logo,.title{transition: all .6s .2s ease; opacity: 0}
.goForm,.pp1{transition: all .6s .4s ease;opacity: 0;transform: translate(0px,100px);}
.banner-icon,.pp2{transition: all .6s .6s ease;opacity: 0;transform: translate(0px,100px);}
.vedio{transition: all .6s .8s ease; opacity: 0}
.rate-list{transition: all .6s 1s ease; opacity: 0}
.number{transition: all .6s .2s cubic-bezier(0.25, 0.1, 0.07, 0.65);transform: translate(0px,100px);opacity: 1;}
.system{transition: all .6s .4s cubic-bezier(0.25, 0.1, 0.07, 0.65);opacity: 0;}
.down,#section4 ol,.slogn,.turn-text{transition: all .6s .8s cubic-bezier(0.25, 0.1, 0.07, 0.65);transform: translate(100px,0px);opacity: 0;}
.duel-cold,.form,.charters,.brother-tr,.s-title-p,.invite-tip,.s-p,.turntable,#section6 ol{transition: all 1.6s .5s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(0px,200px);opacity: 0;}
.sec3-R,.rolebg01,.rolebg03{transition: all 1.6s .5s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(200px,0px);opacity: 0;}
.sec3-L{transition: all 1.6s .5s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(-200px,0px);opacity: 0;}
.charter,.duel-p,.duel-s-p,.gift-p{transition: all 1.6s .5s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(200px,0px);opacity: 0;}
.duel-hot,.s-tt,.brother-list{transition: all 1.6s .8s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(0px,200px);opacity: 0;}
.gift,.gift-list,.form-p,.turn-p{transition: all 1.6s .2s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(-200px,0px);opacity: 0;}
.play,.ss-p2,.charter-right,.share-list{transition: all 1.6s 1s cubic-bezier(0.25, 0.1, 0, 1);transform: translate(0px,100px);opacity: 0;}
.gold{transition: all 1s .8s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(-200px,200px);opacity: 0;}
.gold-big{transition: all 1s .8s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(-200px,-200px);opacity: 0;}
#section0:after{transition: all 1s .6s cubic-bezier(0.25, 0.1, 0, 0.99);transform: translate(-200px,-200px);opacity: 0;}
.duel-gift{transform: rotateY(180deg); opacity: 0; transition: all 1s 1.6s cubic-bezier(0.25, 0.1, 0, 0.99);}
.onScreen .banner_logo,.onScreen .goForm,.onScreen .banner-icon,.onScreen .vedio,.onScreen .pp1,.onScreen .pp2{opacity: 1;transform: translate(0px,0px);transform: rotateY(0deg);}


}


.vedio:after{
	-webkit-animation: rotate 8s linear infinite;
	animation: rotate 8s linear infinite;
}
@-webkit-keyframes rotate{
	0%,100%{-webkit-transform:rotate(0);}
	100%{-webkit-transform:rotate(360deg);}
}
@keyframes rotate{
	0%,100%{transform:rotate(0)}
	100%{transform:rotate(360deg)}
}

.web-scroll{-webkit-animation:sdrop 1s ease-out infinite;-moz-animation:sdrop 1s ease-out infinite;animation:sdrop 1s ease-out infinite}
@-webkit-keyframes sdrop{
0%{opacity:0; -webki-transform: translate(0px,-20px);}
50%{opacity:1;}
100%{opacity:0; -webki-transform: translate(0px,0px);}
}
@keyframes sdrop{
0%{opacity:0;transform: translate(0px,-20px);}
50%{opacity:1;}
100%{opacity:0;transform: translate(0px,0px);}
}

.vedio-btn{-webkit-animation: rat 12s ease-out infinite;animation: rat 12s ease-out infinite;}
@keyframes rat{
0%,100%{transform: scale(1);}
50%{transform: scale(1.1);}
}



/*.btn_audio {
	float: right;
	width: 100px;
    height: 33px;
	position: relative;
	margin-top: 25px;
	margin-right: 25px;
}*/

.btn_audio i {
	position: absolute;
	width: 2px;
	height: 20px;
	background-color: #eaeaea;
	left: 0;
	bottom: 0;
	-webkit-transform: scale(1,0);
	-moz-transform: scale(1,0);
	-ms-transform: scale(1,0);
	transform: scale(1,0);
	-webkit-transform-origin: 0 bottom;
	-moz-transform-origin: 0 bottom;
	-ms-transform-origin: 0 bottom;
	transform-origin: 0 bottom;
}

@-webkit-keyframes scalexy1 {
	0% {
		-webkit-transform: scale(1,0);
		-moz-transform: scale(1,0);
		-ms-transform: scale(1,0);
		transform: scale(1,0)
	}

	100% {
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
		transform: scale(1,1)
	}
}

@-moz-keyframes scalexy1 {
	0% {
		-webkit-transform: scale(1,0);
		-moz-transform: scale(1,0);
		-ms-transform: scale(1,0);
		transform: scale(1,0)
	}

	100% {
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
		transform: scale(1,1)
	}
}

@-o-keyframes scalexy1 {
	0% {
		-webkit-transform: scale(1,0);
		-moz-transform: scale(1,0);
		-ms-transform: scale(1,0);
		transform: scale(1,0)
	}

	100% {
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
		transform: scale(1,1)
	}
}

@-ms-keyframes scalexy1 {
	0% {
		-webkit-transform: scale(1,0);
		-moz-transform: scale(1,0);
		-ms-transform: scale(1,0);
		transform: scale(1,0)
	}

	100% {
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
		transform: scale(1,1)
	}
}

@keyframes scalexy1 {
	0% {
		-webkit-transform: scale(1,0);
		-moz-transform: scale(1,0);
		-ms-transform: scale(1,0);
		transform: scale(1,0)
	}

	100% {
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-ms-transform: scale(1,1);
		transform: scale(1,1)
	}
}

.btn_audio i.i1 {
	left: 2px;
	height: 15px;
	-webkit-animation: scalexy1 .5s linear infinite alternate;
	-moz-animation: scalexy1 .5s linear infinite alternate;
	-ms-animation: scalexy1 .5s linear infinite alternate;
	animation: scalexy1 .5s linear infinite alternate
}

.btn_audio i.i2 {
	left: 7px;
	-webkit-animation: scalexy1 .5s linear infinite alternate .5s;
	-moz-animation: scalexy1 .5s linear infinite alternate .5s;
	-ms-animation: scalexy1 .5s linear infinite alternate .5s;
	animation: scalexy1 .5s linear infinite alternate .5s
}

.btn_audio i.i3 {
	left: 12px;
	-webkit-animation: scalexy1 .5s linear infinite alternate .2s;
	-moz-animation: scalexy1 .5s linear infinite alternate .2s;
	-ms-animation: scalexy1 .5s linear infinite alternate .2s;
	animation: scalexy1 .5s linear infinite alternate .2s
}

.btn_audio i.i4 {
	left: 17px;
	-webkit-animation: scalexy1 .5s linear infinite alternate .3s;
	-moz-animation: scalexy1 .5s linear infinite alternate .3s;
	-ms-animation: scalexy1 .5s linear infinite alternate .3s;
	animation: scalexy1 .5s linear infinite alternate .3s
}

.btn_audio i.i5 {
	left: 22px;
	-webkit-animation: scalexy1 .5s linear infinite alternate .4s;
	-moz-animation: scalexy1 .5s linear infinite alternate .4s;
	-ms-animation: scalexy1 .5s linear infinite alternate .4s;
	animation: scalexy1 .5s linear infinite alternate .4s
}

.btn_audio i.i6 {
	left: 27px;
	height: 15px;
	-webkit-animation: scalexy1 .5s linear infinite alternate .1s;
	-moz-animation: scalexy1 .5s linear infinite alternate .1s;
	-ms-animation: scalexy1 .5s linear infinite alternate .1s;
	animation: scalexy1 .5s linear infinite alternate .1s
}

.btn_audio.off i {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused
}