.guangBg{width:40%;height:20%;top:65%;left:12%;position:absolute;z-index: 7;}
.py{display:block;width:59px;height:49px;top:130%;left:-55%;background-image:url(http://images.gamedreamer.com.tw/PMDESIGN/stzb/20160331/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(http://images.gamedreamer.com.tw/PMDESIGN/stzb/20160331/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(http://images.gamedreamer.com.tw/PMDESIGN/stzb/20160331/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)}
}

.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);}
}

.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;}
}

.section-title,.section-sup{opacity: 0;transition: all 1s;}
.onScreen .section-title{opacity: 1;}
.onScreen .section-standard 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{transform: translate(0px,0px)!important; opacity: 1}
.loading{opacity: 0;transition: all 1s .3s;}
.form-l{opacity: 0;transition: all 1s .7s;}

.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-number{transform: translate(-100px,0px);opacity: 0;transition: all 1s .5s;}
.form{transform: translate(-100px,0px);opacity: 0;transition: all 1s .5s;}
.form-r{transform: translate(-100px,0px);opacity: 0;transition: all 1s .6s;}

.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: 56px;}
.btn-lot:hover i,.btn-lot:hover span{width: 202px;height: 136px;}
.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;}


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


.bg-g,.tab-v-main,.tab-text,.content-slide{opacity: 0; z-index: -1}

.swiper-slide-active .bg-g,.swiper-slide-active .content-slide{opacity: 1;z-index: 1;}

.swiper-slide-active .bg-g:after{}

.swiper-slide-active .bg-g:after{-webkit-animation:pulseInOut 2s ease-out both;-moz-animation:pulseInOut 2s ease-out both;-ms-animation:pulseInOut 2s  ease-out both;animation:pulseInOut 2s ease-out both}
@-webkit-keyframes pulseInOut{0%{opacity:0;filter:alpha(opacity=0)}
10%{opacity:1;filter:alpha(opacity=100)}
90%{-webkit-transform:scale3d(2.5,2.5,2.5);opacity:0;}
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);opacity:0;}
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);opacity:0;}
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);opacity:0;}
100%{opacity:0;filter:alpha(opacity=0)}
}

.swiper-slide-active .content-slide:before{
	-webkit-animation:showtt 1s .5s both;
	animation:showtt 1s .5s both
}
@-webkit-keyframes showtt{
0%{opacity:0;}
100%{opacity:1;}
}
@keyframes showtt{
0%{opacity:0;}
100%{opacity:1;}
}

.swiper-slide-active .tab-text{
	-webkit-animation:showlt 1s .8s both;
	animation:showlt 1s .8s both
}
@-webkit-keyframes showlt{
0%{opacity:0;-webkit-transform: translate(-100px,0px);}
100%{opacity:1;-webkit-transform: translate(0px,0px);}
}
@keyframes showlt{
0%{opacity:0; transform: translate(-100px,0px);}
100%{opacity:1; transform: translate(0px,0px);}
}

.swiper-slide-active .tab-v-main{
	-webkit-animation:showrt 1s .8s both;
	animation:showrt 1s .8s both;
	z-index: 99;
}
@-webkit-keyframes showrt{
0%{opacity:0;-webkit-transform: translate(100px,0px);}
100%{opacity:1;-webkit-transform: translate(0px,0px);}
}
@keyframes showrt{
0%{opacity:0; transform: translate(100px,0px);}
100%{opacity:1; transform: translate(0px,0px);}
}




/*
人物介紹
*/
.t-vedio,.t-inf{opacity: 0; transition: all 1s .5s}
.swiper-slide-active .t-inf{opacity: 1}
.swiper-slide-active .t-vedio{opacity: 1}


@media screen and (min-width:750px){
	
	.section0 .swiper-container:after{content: "";position: absolute;display: block;left: -431px;bottom: -169%;width: 180%;height: 168%;background: url(../images/fog.png) repeat-x top;background-size: 100%;z-index: 3;}
	.section0 .swiper-container:after{animation:show_fog 30s infinite;-webkit-animation:show_fog 30s infinite;-moz-animation:show_fog 30s infinite;-o-animation:show_fog 30s infinite;}
	@keyframes show_fog{
	  0%{opacity:0;background-position: -1920px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}
	@-webkit-keyframes show_fog{
	  0%{opacity:0;background-position: -1920px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}
	@-moz-keyframes show_fog{
	  0%{opacity:0;background-position: -1920px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}
	@-o-keyframes show_fog{
	  0%{opacity:0;background-position: -1920px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}


	.section0 .swiper-container:before{content: "";position: absolute;display: none; left: 0; bottom: 0; width: 100%; height: 50%; background: url(http://images.gamedreamer.com.tw/PMDESIGN/skth/20150826/images/fog2.png) no-repeat; z-index: 2; }

	.section0 .swiper-container:before{animation: show_fog2 20s 5s infinite;-webkit-animation: show_fog2 20s 5s ease-in-out infinite;-moz-animation: show_fog2 20s ease-in-out infinite;-o-animation: show_fog2 20s 5s sease-in-out  infinite;}
	@keyframes show_fog2{
	  0%{opacity:0;background-position: 0px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}
	@-webkit-keyframes show_fog2{
	  0%{opacity:0;background-position: 0px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}
	@-moz-keyframes show_fog2{
	  0%{opacity:0;background-position: 0px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}
	@-o-keyframes show_fog2{
	  0%{opacity:0;background-position: 0px center}
	  10%,90%{opacity: 1}
	100%{opacity:0;background-position: 1920px center}
	}

}