@charset "utf-8";
/* CSS Document */
/*---------public-------------*/
html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td { margin: 0; padding: 0; }
body { font-family:微软雅黑,"Microsoft YaHei",SimHei,"黑体",SimSun,"宋体",Arial, Helvetica, sans-serif; background: #fff; font-size: 24px; color: #000; margin: 0; padding: 0; }
img { border: 0 none; vertical-align: top; display:inline-block; -ms-interpolation-mode: bicubic; image-rendering:optimizeQuality; }
button { cursor: pointer; border:0 none; }
input{ border:0 none; background:transparent; }
textarea{ resize: none; border:0 none; }
ul, li { list-style-type: none; }
table{ border-collapse:collapse; border-spacing:0; }
i, em, cite { font-style: normal; }
p{ word-wrap:break-word; }
.fixed:after { clear:both; content:'.'; display:block; font-size:0; line-height:0; visibility:hidden; height:0; }
.fixed { zoom:1; }
body, input, select, button,textarea{ outline: none; }
a,input,textarea,p,span,h2,em,li,div{ outline: none; text-decoration: none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
a:focus,textarea:focus,input:focus{ outline: none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); -webkit-appearance: none; }
body{
	overflow:hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
/*load*/
#pageload{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0; 
	z-index:999; 
	background:#fff;
}
#loadPress{
	width:300px;
	height:48px; 
	background:url(../images/loadDefault.png) no-repeat left center;
	position:absolute;
	top:40%;
	left:50%;
	margin-left:-150px;
}
#loadPress span{
	display:block;
	height:48px;
	width:0;
	background:url(../images/loadOk.png) no-repeat left center;
	transition:all .4s ease-in-out;
	-webkit-transition:all .4s ease-in-out;
}
/*音乐*/
.music{position:fixed;top:10px;right:10px; z-index:98;width:88px;height:88px;}
.music img{display:none;position:absolute;top:20px;left:20px;width:48px;height:48px;}
.music .stop{z-index:99;}
.music .play{animation: music 1s linear infinite;
-webkit-animation: music 1s linear infinite;}
@keyframes music
{
0%   {transform:rotate(0);transform-origin:center center;}
100% {transform:rotate(360deg);transform-origin:center center;}
}

@-webkit-keyframes music 
{
0%   {-webkit-transform:rotate(0);-webkit-transform-origin:center center;}
100% {-webkit-transform:rotate(360deg);-webkit-transform-origin:center center;}
}
/**/
.warp{
	width:640px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
.home{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:#000;
	z-index:2;
	-webkit-transition:all .5s;
			transition:all .5s;
}
.home.top{
	-webkit-transform:translate(0,-100%);
			transform:translate(0,-100%);
}
.logo{
	position:absolute;
	top:26px;
	left:30px;
	z-index:9;
	-webkit-transform:translate(0,-60px);
			transform:translate(0,-60px);
}

.home.on .logo{
	-webkit-transition:all .6s .6s ease-out;
			transition:all .6s .6s ease-out;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
}
.home .box{
	width:640px;
	height:1010px;
	background:url(../images/bg.jpg) no-repeat center center;
	position:relative;
	-webkit-transform-origin:center top;
			transform-origin:center top;
}
.card{
	height:230px;
	width:100%;
	font-size:0;
	padding-top:100px;
}
.card span{
	display:block;
	height:230px;
	background:url(../images/sprite.png) no-repeat;
	display:inline-block;
}
.card .left{
	width:185px;
	background-position:0 0;
	-webkit-transform:translate(-100px,0);
			transform:translate(-100px,0);
	opacity:0;
}
.card .center{
	width:418px;
	background-position:-185px 0;
	-webkit-transform:translate(0,-200px);
			transform:translate(0,-200px);
	opacity:0;
}
.card .center div{
	width:103px;
	height:22px;
	background:url(../images/bo.gif) no-repeat;
	position:absolute;
	top:142px;
	left:280px;
}
.card .right{
	width:18px;
	background-position:-603px 0;
	-webkit-transform:translate(100px,0);
			transform:translate(100px,0);
	opacity:0;
}
.home.on .card .center{
	opacity:1;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
	-webkit-transition:all .6s;
			transition:all .6s;
}
.home.on .card .left,.home.on .card .right{
	opacity:1;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
	-webkit-transition:all .6s .6s;
			transition:all .6s .6s;
}
.home .conBox{
	margin-top:108px;
	position:relative;
}
.round{
	width:200px;
	height:200px;
	position:absolute;
	left:50%;
	margin-left:-100px;
	top:110px;
	opacity:0;
}
.round div{
	width:200px;
	height:200px;
	position:absolute;
	top:0;
	left:0;
}
.round1{
	background:url(../images/round.png) no-repeat 0 0;
	-webkit-animation: round 3s infinite linear;
			animation: round 3s infinite linear;
}
.round2{
	background:url(../images/round.png) no-repeat 0 -200px;
	-webkit-animation: round2 4s infinite linear;
			animation: round2 4s infinite linear;
}
.round3{
	background:url(../images/round.png) no-repeat 0 -400px;
	-webkit-animation: round 5s infinite linear;
			animation: round 5s infinite linear;
	}
@keyframes round
{
0%  {transform:rotate(0);}
100%{transform:rotate(360deg);}
}

@-webkit-keyframes round
{
0%  {-webkit-transform:rotate(0);}
100%{-webkit-transform:rotate(360deg);}
}
@keyframes round2
{
0%  {transform:rotate(0);}
100%{transform:rotate(-360deg);}
}

@-webkit-keyframes round2
{
0%  {-webkit-transform:rotate(0);}
100%{-webkit-transform:rotate(-360deg);}
}
.home.on .round{
	opacity:1;
	-webkit-transition:all .8s 1.3s;
			transition:all .8s 1.3s;
}
.home .phone{
	position:absolute;
	top:90px;
	left:253px;
	z-index:6;
	opacity:0;
}
.home.on .phone{
	opacity:1;
	-webkit-transition:all .8s 1.8s;
			transition:all .8s 1.8s;
}
@keyframes phone
{
0%  {transform:translate(0,0);}
25%  {transform:translate(0,10px);}
50%  {transform:translate(0,0);}
75%  {transform:translate(0,-10px);}
100%{transform:translate(0,0);}
}

@-webkit-keyframes phone
{
0%  {-webkit-transform:translate(0,0);}
25%  {-webkit-transform:translate(0,10px);}
50%  {-webkit-transform:translate(0,0);}
75%  {-webkit-transform:translate(0,-10px);}
100%{-webkit-transform:translate(0,0);}
}
.menu{
	margin-left:60px;
	position:relative;
	z-index:4;
}
.menu li{
	float:left;
	margin-left:123px;
	width:200px;
	position:relative;
}
.menu li:nth-child(1),.menu li:nth-child(3){margin:0;}
.menu li:nth-child(1),.menu li:nth-child(2){margin-bottom:320px;}
.menu li a{
	display:block;
	width:148px;
	height:50px;
	background:url(../images/sprite.png) no-repeat -621px 0;
	opacity:0;
}
.menu li:nth-child(1) a,.menu li:nth-child(2) a{
	-webkit-transform:translate(0,-50px);
			transform:translate(0,-50px);
}
.menu li:nth-child(3) a,.menu li:nth-child(4) a{
	-webkit-transform:translate(0,50px);
			transform:translate(0,50px);
}
.menu li span{
	height:61px;
	display:block;
	background:url(../images/li.png) no-repeat right 0;
	width:0;
	position:absolute;
}
.home.on .menu li span{
	width:200px;
	-webkit-transition:all .8s 1.6s;
			transition:all .8s 1.6s;
}
.home.on .menu li a{
	opacity:1;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
	-webkit-transition:all .8s 1.6s;
			transition:all .8s 1.6s;
}
.menu li:nth-child(1) span{
	top:64px;
	right:0;
}
.menu li:nth-child(2) a{
	margin-left:52px;
	background-position:-621px -50px;
}
.menu li:nth-child(2) span{
	-webkit-transform:scaleX(-1);
			transform:scaleX(-1);
	top:64px;
	left:0;
}
.menu li:nth-child(3) a{
	background-position:-621px -100px;
}
.menu li:nth-child(3) span{
	-webkit-transform:scaleY(-1);
			transform:scaleY(-1);
	top:-75px;
	right:0;
}
.menu li:nth-child(4) a{
	margin-left:52px;
	background-position:-621px -150px;
}
.menu li:nth-child(4) span{
	-webkit-transform:scale(-1);
			transform:scale(-1);
	top:-75px;
	left:0;
}
.home .line{
	width:268px;
	height:578px;
	background:url(../images/line.png) no-repeat;
	position:absolute;
	top:346px;
	left:313px;
	opacity:0;
	-webkit-transform:translate(0,50px);
			transform:translate(0,50px);
}
.home.on .line{
	opacity:1;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
	-webkit-transition:all .5s 1s;
			transition:all .5s 1s;
}
.home .more{
	display:block;
	width:380px;
	height:70px;
	background:url(../images/sprite.png) no-repeat -972px 0;
	margin:58px 0 0 139px;
	opacity:0;
	-webkit-transform:translate(0,50px);
			transform:translate(0,50px);
}
.home.on .more{
	opacity:1;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
	-webkit-transition:all 1s 2.2s;
			transition:all 1s 2.2s;
}
.home .leftBox{
	position:absolute;
	top:148px;
	left:60px;
	opacity:0;
}
.home .rightBox{
	position:absolute;
	top:148px;
	right:36px;
	opacity:0;
}
.home.on .leftBox,.home.on .rightBox{
	opacity:1;
	-webkit-transition:all 1s 2.2s;
			transition:all 1s 2.2s;
}
.home .leftBox span,.home .rightBox span{
	display:block;
	width:44px;
	height:27px;
	background:url(../images/sprite.png) no-repeat -1172px -70px;
	margin-top:25px;
}
.home .rightBox span{
	transform:scaleX(-1);
	margin-top:15px;
}
.home .rightBox .RT{
	width:161px;
	height:14px;
	background:url(../images/sprite.png) no-repeat -621px -216px;
	margin-bottom:10px;
}
.home .leftBox .text{
	height:90px;
	overflow:hidden;
}
.home .leftBox .text img{
	-webkit-animation: scroll1 6s infinite linear;
			animation: scroll1 6s infinite linear;
}
.home .rightBox .text{
	height:76px;
	overflow:hidden;
}
.home .rightBox .text img{
	-webkit-animation: scroll2 3s infinite linear;
			animation: scroll2 3s infinite linear;
}
@keyframes scroll1
{
0%  {transform:translate(0,0);}
100%{transform:translate(0,-90px);}
}

@-webkit-keyframes scroll1
{
0%  {-webkit-transform:translate(0,0);}
100%{-webkit-transform:translate(0,-90px);}
}
@keyframes scroll2
{
0%  {transform:translate(0,0);}
100%{transform:translate(0,-80px);}
}

@-webkit-keyframes scroll2
{
0%  {-webkit-transform:translate(0,0);}
100%{-webkit-transform:translate(0,-80px);}
}

.page{
	width:640px;
	height:100%;
	position:relative;
	background:#343434;
}
.pics{
	width:640px;
	height:100%;
	background:url(../images/default.jpg) no-repeat center center;
	background-size:auto 100%;
}
.page .tit{
	width:100%;
	height:230px;
	position:absolute;
	top:12px;
	left:0;
	background:url(../images/sprite.png) no-repeat 0 -230px;
	opacity:0;
	-webkit-transform:translate(0,-100px);
			transform:translate(0,-100px);
}
.page .tit span{
	display:block;
	width:330px;
	height:80px;
	margin:60px auto 0;
	background:url(../images/tits.png) no-repeat;
}
.page .tit span.t0{ background-position:0 0;}
.page .tit span.t1{ background-position:0 -80px;}
.page .tit span.t2{ background-position:0 -160px;}
.page .tit span.t3{ background-position:0 -240px;}
.page .bottom{
	width:506px;
	height:104px;
	position:absolute;
	left:50%;
	margin-left:-253px;
	bottom:10px;
	font-size:0;
	background:url(../images/sprite.png) no-repeat -640px -230px;
	-webkit-transform:translate(0,120px);
			transform:translate(0,120px);
}
.page .bottom a{
	width:180px;
	height:60px;
	margin:0 10px;
	display:inline-block;
	background:#000;
	margin-left:85px;
	opacity:0;
}
.page .bottom a:first-child{margin-left:25px;}
.page.on .tit{
	-webkit-transition:all .6s ease-out;
			transition:all .6s ease-out;
	opacity:1;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
}
.page.on .bottom{
	-webkit-transition:all .4s ease-out;
			transition:all .4s ease-out;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
}
.page.on .btns{
	-webkit-transition:all .6s .3s ease-out;
			transition:all .6s .3s ease-out;
	-webkit-transform:translate(0,0);
			transform:translate(0,0);
}
.sharePic{width:0;height:0;position:absolute;}
.sharePop{
	width:640px;
	height:100%;
	position:fixed;
	top:0;
	left:50%;
	margin-left:-320px;
	background:url(../images/share.png) no-repeat 140px 40px rgba(27,27,27,0.9);
	z-index:99;
	display:none;
}
.hand{
	width:65px;
	height:76px;
	background:url(../images/hand.png) no-repeat;
	position:absolute;
	top:40px;
	left:100px;
	z-index:9;
	opacity:0;
	pointer-events:none;
}
.home.on .hand{
	-webkit-animation: hand 1s 5 linear 2.5s;
			animation: hand 1s 5 linear 2.5s;
}

@keyframes hand
{
0%  {opacity:0}
50%  {opacity:1}
100%  {opacity:0}
}

@-webkit-keyframes hand
{
0%  {opacity:0}
50%  {opacity:1}
100%  {opacity:0}
}
.page .arrow{
	position:absolute;
	top:50%;
	margin-top:-40px;
	width:40px;
	height:80px;
	background:url(../images/arrow.png) no-repeat;
	z-index:1;
	pointer-events:none;
	display:none;
}
.page .arrow.left{
	-webkit-transform:scale(-1);
			transform:scale(-1);
	left:30px;
	-webkit-animation: arrow1 1s linear infinite;
			animation: arrow1 1s linear infinite;
}
.page .arrow.right{
	right:30px;
	-webkit-animation: arrow2 1s linear infinite;
			animation: arrow2 1s linear infinite;
}
@keyframes arrow1
{
0%  {left:30px;}
25% {left:50px;}
50% {left:30px;}
75% {left:10px;}
100%{left:30px;}
}

@-webkit-keyframes arrow1
{
0%  {left:30px;}
25% {left:50px;}
50% {left:30px;}
75% {left:10px;}
100%{left:30px;}
}
@keyframes arrow2
{
0%  {right:30px;}
25% {right:50px;}
50% {right:30px;}
75% {right:10px;}
100%{right:30px;}
}

@-webkit-keyframes arrow2
{
0%  {right:30px;}
25% {right:50px;}
50% {right:30px;}
75% {right:10px;}
100%{right:30px;}
}