@charset "utf-8";
.bannerbox1,.bannerbox2{
				height: 650px;
				/*background-color: #9c64ef;*/
				background: #FF9900;
				position: relative;
				overflow: hidden;
			}
			.bannerbox2{
				background-color: #9c64ef;
			}
			.yuan1{
				width: 50px;
				height: 50px;
				/*background-color: rgba(255,255,255,.7);*/
				border: 30px solid #DDDDDD;
				border-radius: 50%;
				position: absolute;
				animation: yidong 5s infinite;
				animation-direction: alternate;
			}
			@keyframes yidong{
				from{left: 30px; top: 50px;}
				to{left: 300px; top: 450px;}
			}
			.yuan2{
				width: 50px;
				height: 50px;
				background-color: rgba(255,255,0,1);
				border-radius: 25px;
				position: absolute;
				animation: yidong2 5s infinite;
				animation-direction: alternate;
			}
			@keyframes yidong2{
				from{right: 30px; top: 50px;}
				to{right: 200px; top: 440px; background-color: rgba(255,255,0,.7);}
			}
			.yuan3{
				width:80px;
				height: 80px;
				background-color: rgba(220,193,220,.2);
				border-radius: 50%;
				position: absolute;
				animation: yidong3 5s infinite;
				animation-direction: alternate;
			}
			@keyframes yidong3{
				from{right: 330px; top: 300px;}
				to{right: 600px; top: 120px; background-color: rgba(220,193,220,.5);}
			}
			.yuan4{
				position: absolute;
				width:460px;
				height: 460px;
				left: 50%;
				top: 40%;
				background-color:rgba(255,255,255,.2);
				border-radius: 50%;
				margin-left: -230px;
				margin-top: -230px;
				animation: yidong4 4s 1;

			}
			@keyframes yidong4{
				from{
					width: 100px;
					height: 100px;
					background-color:rgba(255,255,255,.5);
				}
				to{
					width: 460px;
					height: 460px;
					background-color:rgba(255,255,255,.2);
				}}
			.yuan5{
				
				position: absolute;
				left: 50%;
				top: 40%;
				border-radius: 50%;
				width:400px;
				height: 400px;
				margin-left: -200px;
				margin-top: -200px;
				background-color:rgba(255,255,255,.2);
				animation: yidong5 2s 1;
			}
			@keyframes yidong5{
				from{
					width: 100px;
					height: 100px;
					background-color:rgba(255,255,255,.5);
				}
				to{
					width: 400px;
					height:400px;
					background-color:rgba(255,255,255,.2);
				}}
			
			.sp0,.sp1,.sp2{
				display: block;
				width:50px;
				height: 50px;
				border-radius: 50%;
				border: 20px #FFF solid;
				position: absolute;
				animation: sp0 5s infinite;
				animation-direction: alternate;
			}
			.sp1{
				border: 20px #FFD800 solid;
				animation: sp1 5s infinite;
				animation-direction: alternate;
			}
			.sp2{
				width:30px;
				height: 30px;
				border-radius: 50%;
				border: 15px #c8e239 solid;
				animation: sp2 4s infinite;
				animation-direction: alternate;
			}
			@keyframes sp0{
				from{left: 500px; top: 300px;}
				to{left: 900px; top: 450px;}
			}
			@keyframes sp1{
				from{left: 900px; top: 400px;}
				to{left: 1000px; top: 50px;}
			}
			@keyframes sp2{
				from{left: 600px; top: 500px;}
				to{left: 800px; top: 250px;}
			}
			.wz{
				width: 500px;
				height:300px;
				/*background-color: #DDDDDD;*/
				animation-duration: 4s;
				position: absolute;
				left: 35%;
				top: 20%;
			}
			.wz h1{
				font-size: 40px;
				color: #fff;
				line-height: 80px;
			}
			.wz p{
				font-size: 18px;
				color: #fff;
				line-height: 30px;
				font-weight: 500;
			}
			.wz p span{
				font-size: 30px;
				color: #fff;
			}
			.a0{
				width: 157px;
				height: 150px;
				background:url(../images/ani-a.png) no-repeat;
				position: absolute;
				top: 30px;
				left: 50px;
				transform: rotate(20deg,30deg,3deg);
				animation-direction: alternate;
				animation-duration: 3s;
			}
			.logo{
				width: 140px;
				height:140px;
				background-image:url(../images/500500.png);
				background-size: 140px 140px;
				position: absolute;
				left: 20%;
				top: 30px;
				animation-duration: 4s;
			}
			.nav{margin: 0 auto;
			padding: 30px 50px;}
			.nav li{
				width: calc(100% / 5 - 30px);
				margin: 10px 15px;
				float: left;
			}
			.nav a{
				display: block;
				text-align: center;
			}
			.icon{
				margin: 0 auto;
				width: 100px;
				height: 100px;
				border-radius: 50%;
			}
			.icon1{
				background: #999 url(../images/icon1.png) no-repeat center center;
				background-size: 50px 50px;
			}
			.icon2{
				background: #999 url(../images/icon2.png) no-repeat center center;
				background-size: 50px 50px;
			}
			.icon3{
				background: #999 url(../images/icon3.png) no-repeat center center;
				background-size: 50px 50px;
			}
			.icon4{
				background: #999 url(../images/icon4.png) no-repeat center center;
				background-size: 50px 50px;
			}
			.icon5{
				background: #999 url(../images/icon5.png) no-repeat center center;
				background-size: 50px 50px;
			}
			.item h1{
				text-align: center;
				font-size: 18px;
				font-weight: 500;
				color: #555;
				line-height: 40px;
			}
			.icon:hover{
				animation: icon 2s infinite;
			}
			@keyframes icon{
				from{transform: rotateY(0deg);}
				to{transform: rotateY(360deg);}
			}
			/*banner底部动画*/
			.upimg1{
				position: absolute;
				width: calc(100% + 700px);
				height:160px;
				bottom: 0;
				left: -700px;
				background: url(../images/wave.png);
				z-index: 9;
				animation: up1 10s infinite;
				animation-direction: alternate;
			}
			.upimg2{
				position: absolute;
				width: calc(100% + 850px);
				height:142px;
				bottom: 0;
				right:-850px;
				background: url(../images/wave.png);
				z-index: 9;
				animation: up2 10s infinite;
				animation-direction: alternate;
			}
			@keyframes up1{
				from{left: -700px;}
				to{left: -250px;}
			}
			@keyframes up2{
				from{right: -850px;}
				to{right: -300px;}
			}