
﻿html{
	width:100%;
	height:100%;	
}
body{
	overflow-x:hidden;
	width:100%;
	height:100%;	
}
.top{
	width:100%;
	height:100vh;
	background:url(../../images/bg.jpg) no-repeat;	
	background-position: center center;
	background-attachment: scroll;	
	background-size: cover;
	overflow:hidden;
	position:relative;
}
.circle{
	width:1708px;
	height:1708px;
	background:url(../../images/circlebg3.png) no-repeat;
	background-position:-5px 2px;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-884px;
	margin-left:-855px;	
	z-index:0;
}
.roundbg1{
	width:1164px;
	height:1164px;
	background:url(../../images/circlebg2.png) no-repeat;	
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-590px;
	margin-left:-582px;	
	-ms-animation:rotate 10s linear infinite;	
	-webkit-animation:rotate 10s linear infinite;	
	-moz-animation:rotate 10s linear infinite;	
	-o-animation:rotate 10s linear infinite;	
}
.roundbg2{
	position:absolute;	
	width:594px;
	height:594px;
	background:url(../../images/circlebg.png) no-repeat;	
	left:50%;
	top:50%;
	margin-top:-297px;
	margin-left:-292px;	
	-ms-animation:rotate2 16s linear infinite;		
	-webkit-animation:rotate2 16s linear infinite;		
	-moz-animation:rotate2 16s linear infinite;		
	-o-animation:rotate2 16s linear infinite;		
}
@-ms-keyframes rotate{ 		
	0%{-ms-transform:rotate(0deg);} 			
	100%{-ms-transform:rotate(360deg);} 	
}
@-webkit-keyframes rotate{ 		
	0%{-webkit-transform:rotate(0deg);} 			
	100%{-webkit-transform:rotate(360deg);} 	
}
@-moz-keyframes rotate{ 		
	0%{-moz-transform:rotate(0deg);} 			
	100%{-moz-transform:rotate(360deg);} 	
}
@-o-keyframes rotate{ 		
	0%{-o-transform:rotate(0deg);} 			
	100%{-o-transform:rotate(360deg);} 	
}
@-ms-keyframes rotate2{ 		
	0%{-ms-transform:rotate(0deg);} 			
	100%{-ms-transform:rotate(-360deg);} 	
}
@-webkit-keyframes rotate2{ 		
	0%{-webkit-transform:rotate(0deg);} 			
	100%{-webkit-transform:rotate(-360deg);} 	
}
@-moz-keyframes rotate2{ 		
	0%{-moz-transform:rotate(0deg);} 			
	100%{-moz-transform:rotate(-360deg);} 	
}
@-o-keyframes rotate2{ 		
	0%{-o-transform:rotate(0deg);} 			
	100%{-o-transform:rotate(-360deg);} 	
}
.srollTab{
	width:22px;
	height:254px;
	background:url(../../images/topLeftTab.png) no-repeat;
	position:absolute;
	left:50px;
	top:50%;	
	margin-top:-150px;
}
.srollTab span{
	display:block;	
	width:20px;
	height:10px;
	background:url(../../images/tabIco.png) no-repeat;
	position:absolute;
	left:-18px;
	top:46px;	
}
.srollTab .tab1{
	top:46px;	
}
.srollTab .tab2{
	top:98px;	
}
.srollTab .tab3{
	top:149px;	
}
.srollTab .tab4{
	top:200px;	
}
.circleText{
	width:600px;
	height:300px;
	text-align:center;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-295px;
	margin-top:-120px;
}
.circleText h1{
	font-size:40px;
	color:#fff;
	line-height:80px;
	font-weight:400;
}
.circleText h2{
	font-size:40px;
	color:#34a9d4;
	line-height:80px;
	font-weight:400;	
}
.circleText p{
	font-size:24px;
	color:#fff;
	line-height:50px;
}
.circleText div{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	left:0;
	top:0;
}
.circleText .showText{
	display:block;
	animation: fadeIn .5s;
	-moz-animation: fadeIn .5s;	/* Firefox */
	-webkit-animation: fadeIn .5s;	/* Safari 和 Chrome */
	-o-animation: fadeIn .5s;	/* Opera */
}
@keyframes fadeIn
{
0%   {margin-top:200px;opacity:0.3}
100% {margin-top:0px;opacity:1}
}
@-moz-keyframes fadeIn
{
0%   {margin-top:200px;opacity:0.3}
100% {margin-top:0px;opacity:1}
}
@-webkit-keyframes fadeIn
{
0%   {margin-top:200px;opacity:0.3}
100% {margin-top:0px;opacity:1}
}
@-o-keyframes fadeIn
{
0%   {margin-top:200px;opacity:0.3}
100% {margin-top:0px;opacity:1}
}
.circleText .hideText{
	display:block;
	opacity:0;
	animation: fadeOut .5s;
	-moz-animation: fadeOut .5s;	/* Firefox */
	-webkit-animation: fadeOut .5s;	/* Safari 和 Chrome */
	-o-animation: fadeOut .5s;	/* Opera */
}
@keyframes fadeOut
{
0%   {margin-top:0px;opacity:1}
100% {margin-top:-200px;opacity:0;display:none;}
}
@-moz-keyframes fadeOut
{
0%   {margin-top:0px;opacity:1}
100% {margin-top:-200px;opacity:0;display:none;}
}
@-webkit-keyframes fadeOut
{
0%   {margin-top:0px;opacity:1}
100% {margin-top:-200px;opacity:0;display:none;}
}
@-o-keyframes fadeOut
{
0%   {margin-top:0px;opacity:1}
100% {margin-top:-200px;opacity:0;display:none;}
}

.mouseTip{
	width:60px;
	height:140px;
	text-align:center;
	position:absolute;
	left:50%;
	bottom:10px;
	margin-left:-30px;
	z-index:1;
}
.mouseTip div{
	display:inline-block;
	width:54px;
	height:79px;
	background:url(../../images/mouse.png) no-repeat;
	margin-bottom:10px;	
}
.mouseTip span{
	display:inline-block;
	width:42px;
	height:15px;
	background:url(../../images/arrow.png) no-repeat;	
}
.mouseTip .aoorw1{
	-ms-animation:fade 0.8s linear infinite;			
	-webkit-animation:fade 0.8s linear infinite;			
	-moz-animation:fade 0.8s linear infinite;			
	-o-animation:fade 0.8s linear infinite;
	opacity:0.8;	
}
.mouseTip .aoorw2{
	-ms-animation:fade2 0.8s linear infinite;
	-webkit-animation:fade2 0.8s linear infinite;
	-moz-animation:fade2 0.8s linear infinite;
	-o-animation:fade2 0.8s linear infinite;
	opacity:0;
}
@-ms-keyframes fade{ 		
	0%{opacity:0.8;} 
	50%{opacity:0;} 	
	100%{opacity:0.8;} 	
}
@-webkit-keyframes fade{ 		
	0%{opacity:0.8;} 
	50%{opacity:0;} 	
	100%{opacity:0.8;} 	
}
@-moz-keyframes fade{ 		
	0%{opacity:0.8;} 
	50%{opacity:0;} 	
	100%{opacity:0.8;} 	
}
@-o-keyframes fade{ 		
	0%{opacity:0.8;} 
	50%{opacity:0;} 	
	100%{opacity:0.8;} 	
}
@-ms-keyframes fade2{ 		
	0%{opacity:0;} 			
	50%{opacity:.5;} 			
	100%{opacity:0;} 	
}
@-webkit-keyframes fade2{ 		
	0%{opacity:0;} 			
	50%{opacity:.5;} 			
	100%{opacity:0;} 	
}
@-moz-keyframes fade2{ 		
	0%{opacity:0;} 			
	50%{opacity:.5;} 			
	100%{opacity:0;} 	
}
@-o-keyframes fade2{ 		
	0%{opacity:0;} 			
	50%{opacity:.5;} 			
	100%{opacity:0;} 	
}


.topBar2{
	display:none;
}

.more{
	width:176px;
	height:58px;
	line-height:58px;
	overflow:hidden;
	font-size:20px;
	color:#666666;
	background:url(../../images/mobile/more.png) no-repeat;
	text-align:center;
	padding-right:20px;
	margin:0 auto;
	margin-top:10px;
	margin-bottom:40px;
	cursor:pointer;	
}
