@charset "utf-8";
* {margin: 0;padding: 0;outline: none;}
*:not(input,textarea) {  -webkit-touch-callout: inherit; -webkit-user-select: auto;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,em,img,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,footer,header,nav,ruby,section{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-weight:normal}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
i,em{font-style:normal}
a img{border:none;}
a{ text-decoration:none; color:#fff;}
footer,header,hgroup,menu,nav,section,summary{display:block}
body {  width: 100%;  height:100%; font-family:"Droid Sans Fallback","\5fae\8f6f\96c5\9ed1",Arial,sans-serif; color:#333; }


.w1200{ width:1200px; margin:0 auto}
.hide{ display:none;}
.gotop{ width:100%; height:6%; background:url(../images/backtop.png) no-repeat top center; background-size:auto 100%; position:absolute;bottom:0;z-index:10;}
.section{ position:relative;}
.section-1{ width:100%; background:url(../images/bj0.jpg) no-repeat;  position:relative}
.main1{ width: 535px; height:340px; padding:350px 0px 0px 665px; background:url(../images/bj.png?v=2) no-repeat center center; background-size:100% auto; margin: 0 auto; z-index: 999;  position:relative }
/*.main1 .ewmimg{ width:10%; position:absolute; top:50%; right:29%;}*/
.scoll{ width:100%;  display:block; position:absolute; bottom:0;}
.scoll1{height:10%; background:url(../images/scoll1.png) repeat-x;background-size:auto 100%;}
.scoll2{height:15%; background:url(../images/scoll2.png) repeat-x;background-size:auto 100%;}
.scoll3{height:8%; background:url(../images/scoll3.png) -10px repeat-x ;background-size:auto 100%;}
.active .scollmove1{ animation:scollalways1 8s forwards linear alternate infinite; -webkit-animation:scollalways1 8s forwards linear alternate infinite;}
.active .scollmove2{ animation:scollalways2 5s forwards linear alternate infinite; -webkit-animation:scollalways2 5s forwards linear alternate infinite;}
.active .scollmove3{ animation:scollalways3 3s forwards linear alternate infinite; -webkit-animation:scollalways3 3s forwards linear alternate infinite;}
.each_bj{ width:100%; height:50%;  position:absolute; top:20%; animation:fadeOut 2.5s forwards;-webkit-animation:fadeOut 2.5s forwards; opacity:0;  opacity: 1\0;}
.each1{ background:url(../images/bj1.png) no-repeat top center;background-size:auto 100%;}
.each2{ background:url(../images/bj2.png) no-repeat top center;background-size:auto 100%;}
.each3{ background:url(../images/bj3.png) no-repeat top center;background-size:auto 100%;}

.page-current{z-index:4;}
.pt-page-moveToTop {-webkit-animation: moveToTop .6s ease both;animation: moveToTop .6s ease both;}
.pt-page-moveToBottom {-webkit-animation: moveToBottom .6s ease both;animation: moveToBottom .6s ease both;}

.phone{ width:100%; height:60%; background:url(../images/phone.png) no-repeat top center; background-size:auto 100%; animation:fade; position:absolute; top:10%;  opacity:0; opacity: 1\0;}
.active .phonemove{animation:downTop 1.5s forwards; -webkit-animation:downTop 1.5s forwards; }
.gameicon{width:100%; height:50%; background:url(../images/gameicon.png) no-repeat top center;  background-size:auto 100%;position:absolute; top:6%; opacity:0; opacity: 1\0; }
.active .gameiconmove{animation:toBig 1.5s 0.5s forwards; -webkit-animation:toBig 1.5s 0.5s forwards;}
.yxj1{width:10%; height:10%; background:url(../images/yxj1.png) no-repeat; background-size:auto 100%; position:absolute; top:60%; left:50%; margin-left:-13%; opacity:0; opacity: 1\0;}
.active .yxjmove1{animation:downTopoo 1.5s 0.5s forwards; -webkit-animation:downTopoo 1.5s 0.5s forwards; }
.yxj2{width:10%;height:6%; background:url(../images/yxj2.png) no-repeat; background-size:auto 100%; position:absolute; top:65%; right:50%;margin-right:-16%; opacity:0; opacity: 1\0;}
.active .yxjmove2{animation:downToptt 1.5s 0.5s forwards; -webkit-animation:downToptt 1.5s 0.5s forwards;}
.giftbox{ width:100%; height:60%; background:url(../images/giftbox.png) no-repeat top center; background-size:auto 100%; position:absolute; top:12%; right:0; opacity:0; opacity: 1\0;}
.active .giftboxmove{animation:fadeRighr 1.5s forwards;  -webkit-animation:fadeRighr 1.5s forwards;}
.conputer{ width:100%; height:46%; background:url(../images/conputer.png) no-repeat top center; background-size:auto 100%; position:absolute; top:25%; opacity:0; opacity: 1\0;}
.active .conputermove{animation:fadeBottom 1.5s forwards; -webkit-animation:fadeBottom 1.5s forwards;}
.content-text{width:100%; height:15%; position:absolute; bottom:5%;opacity:0; opacity: 1\0;}
.active .textmove{ animation:fadeOut 2.5s 0.5s forwards; -webkit-animation:fadeOut 2.5s 0.5s forwards;}
.content-text1{background:url(../images/text1.png) no-repeat top center; background-size:auto 100%; }
.content-text2{background:url(../images/text2.png) no-repeat top center; background-size:auto 100%; }
.content-text3{background:url(../images/text3.png) no-repeat top center; background-size:auto 100%; bottom:8%;}

/*.arrow-up{width:100%;height:40px; background:url(../images/icon_up.png) no-repeat top center; background-size:31px 27px;position:absolute;bottom:0;z-index:10; animation:shakeTop 1.5s infinite; opacity:1;}*/
/********************************* keyframes **************************************/
@keyframes scollalways1{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:0; }
	60%{bottom:5px; }
	80%{bottom:10px; }
	100%{ background-position:20%; bottom:5px;}	
}
@keyframes scollalways2{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:-13px; }
	60%{bottom:-5px; }
	80%{bottom:0; }
	100%{ background-position:20%; bottom:-5px;}	
}
@keyframes scollalways3{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:-10px; }
	60%{bottom:-5px; }
	80%{bottom:0; }
	100%{ background-position:20%; bottom:-5px;}	
}
@-moz-keyframes scollalways1{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:0; }
	60%{bottom:5px; }
	80%{bottom:10px; }
	100%{ background-position:20%; bottom:5px;}	
}
@-moz-keyframes scollalways2{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:-13px; }
	60%{bottom:-5px; }
	80%{bottom:0; }
	100%{ background-position:20%; bottom:-5px;}	
}
@-moz-keyframes scollalways3{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:-10px; }
	60%{bottom:-5px; }
	80%{bottom:0; }
	100%{ background-position:20%; bottom:-5px;}	
}
@-webkit-keyframes scollalways1{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:0; }
	60%{bottom:5px; }
	80%{bottom:10px; }
	100%{ background-position:20%; bottom:5px;}	
}
@-webkit-keyframes scollalways2{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:-13px; }
	60%{bottom:-5px; }
	80%{bottom:0; }
	100%{ background-position:20%; bottom:-5px;}	
}
@-webkit-keyframes scollalways3{
	0%{ background-position:0; bottom:0;}
	20%{  bottom:-5px;}
	40%{bottom:-10px; }
	60%{bottom:-5px; }
	80%{bottom:0; }
	100%{ background-position:20%; bottom:-5px;}	
}

@keyframes fadeOut{
	from{ opacity:0}
	to{ opacity:1}	
}
@-moz-keyframes fadeOut{
	from{ opacity:0}
	to{ opacity:1}	
}
@-webkit-keyframes fadeOut{
	from{ opacity:0}
	to{ opacity:1}	
}

@keyframes downTop{
	from{ top:-220px; opacity:0;}
	to{ top:10%; opacity:1}	
}
@-moz-keyframes downTop{
	from{ top:-220px; opacity:0;}
	to{ top:10%; opacity:1}	
}
@-webkit-keyframes downTop{
	from{ top:-220px; opacity:0;}
	to{ top:10%; opacity:1}	
}

@keyframes downTopoo{
	from{ top:-220px; opacity:0;}
	to{ top:60%; opacity:1}
}
@-moz-keyframes downTopoo{
	from{ top:-220px; opacity:0;}
	to{ top:60%; opacity:1}
}
@-webkit-keyframes downTopoo{
	from{ top:-220px; opacity:0;}
	to{ top:60%; opacity:1}
}

@keyframes downToptt{
	0%{ top:-220px; opacity:0;}
	100% {top:65%; opacity:1;}	
}
@-moz-keyframes downToptt{
	0%{ top:-220px; opacity:0;}
	100% {top:65%; opacity:1;}	
}
@-webkit-keyframes downToptt{
	0%{ top:-220px; opacity:0;}
	100% {top:65%; opacity:1;}	
}

@keyframes toBig{
	from{ top:10%; background-size:auto 70%; opacity:0;}
	to{ top:6%; background-size:auto 100%;opacity:1 }	
}
@-moz-keyframes toBig{
	from{ top:10%; background-size:auto 70%; opacity:0;}
	to{ top:6%; background-size:auto 100%;opacity:1 }	
}
@-webkit-keyframes toBig{
	from{ top:10%; background-size:auto 70%; opacity:0;}
	to{ top:6%; background-size:auto 100%;opacity:1 }	
}

@keyframes fadeRighr{
	from{ right:-616px; opacity:0;}
	to{ right:0; opacity:1}	
}
@-moz-keyframes fadeRighr{
	from{ right:-616px; opacity:0;}
	to{ right:0; opacity:1}	
}
@-webkit-keyframes fadeRighr{
	from{ right:-616px; opacity:0;}
	to{ right:0; opacity:1}	
}

@keyframes fadeBottom{
	from{ top:-500px; opacity:0;}
	to{ top:25%; opacity:1}	
}
@-moz-keyframes fadeBottom{
	from{ top:-500px; opacity:0;}
	to{ top:25%; opacity:1}	
}
@-webkit-keyframes fadeBottom{
	from{ top:-500px; opacity:0;}
	to{ top:25%; opacity:1}	
}


@keyframes moveToTop {
	from { }
	to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
@-moz-keyframes moveToTop {
	from { }
	to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}
@-webkit-keyframes moveToTop {
	from { }
	to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
}

@keyframes moveToBottom {
	from { }
	to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}
@-moz-keyframes moveToBottom {
	from { }
	to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}
@-webkit-keyframes moveToBottom {
	from { }
	to { -webkit-transform: translateY(100%); transform: translateY(100%); }
}