@charset "utf-8";
/* CSS Document */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}
.boxSizing {
	box-sizing: border-box;
	-moz-box-sizing: border-box; /* Firefox */
	-webkit-box-sizing: border-box; /* Safari */
}

/*产品banner*/
.proBannerBox {
	width: 100%;
	height: 500px; position:relative; /*background-color:#739266*/
	background: url(../images/banner1.jpg) no-repeat center bottom;
}
.proBannerBox .box{ margin:0 auto; width:1200px; height:500px; position:relative; padding-top:160px;}
.proBannerBox .box .mobileBox{ border:1px solid #333; width:213px; height:431px; position:absolute; top:30px; left:40px; z-index:10; border-radius:30px; background-color:#000}
.proBannerBox .box .mobileBox1{ width:213px; height:431px; position:absolute; top:29px; left:41px; z-index:5; border-radius:30px; background-color:#222}
.proBannerBox .box .mobileBox2{  width:213px; height:431px; position:absolute; top:28px; left:43px; z-index:4; border-radius:30px; background-color:#333}
.proBannerBox .box .mobileBox .topBox{ margin:8px auto 15px; text-align:center; position:relative}
.proBannerBox .box .mobileBox .topBox .copy1{ font-size:10px; color:#333333}
.proBannerBox .box .mobileBox .topBox .copy2{ font-size:10px; color:#333333; position:absolute; left:72px; top:12px; z-index:10}
.proBannerBox .box .mobileBox .topBox span{width:35px; height:2px; background-color:#333333; display:block; margin:0 auto}
.proBannerBox .box .mobileBox .centerBox{ width:186px; height:332px; margin:0 auto; border:1px solid #747474; background-color:#000; position:relative; overflow:hidden}
.proBannerBox .box .mobileBox .centerBox img{ width:100%; height:100%; z-index:12; top:0; position:absolute}

.proBannerBox .box .mobileBox .centerBox .img1{left:0;animation:mymove33 15s ease 0s infinite normal;
    -webkit-animation:mymove33 15s ease 0s infinite normal;}
.proBannerBox .box .mobileBox .centerBox .img2{left:100%;animation:mymove44 15s ease 0s infinite normal;
    -webkit-animation:mymove44 15s ease 0s infinite normal;}
.proBannerBox .box .mobileBox .centerBox .img3{left:-100%;animation:mymove55 15s ease 0s infinite normal;
    -webkit-animation:mymove55 15s ease 0s infinite normal;}
@keyframes mymove33
{
0% {left:0;z-index:10}
30% {left:0;z-index:10}
34%{left:-100%;z-index:10}
63%{left:-100%;z-index:10}
67%{left:100%;z-index:9}
96%{left:100%;z-index:10}
100%{left:0;z-index:10}
}

@-webkit-keyframes mymove33 /*Safari and Chrome*/
{
0% {left:0;z-index:10}
30% {left:0;z-index:10}
34%{left:-100%;z-index:10}
63%{left:-100%;z-index:10}
67%{left:100%;z-index:9}
96%{left:100%;z-index:10}
100%{left:0;z-index:10}
}
@keyframes mymove44
{
0% {left:100%;z-index:9}
30% {left:100%;z-index:10}
34%{left:0;z-index:10}
63%{left:0;z-index:10}
67%{left:-100%;z-index:10}
96%{left:-100%;z-index:9}
100%{left:100%;z-index:9}
}

@-webkit-keyframes mymove44 /*Safari and Chrome*/
{
0% {left:100%;z-index:9}
30% {left:100%;z-index:10}
34%{left:0;z-index:10}
63%{left:0;z-index:10}
67%{left:-100%;z-index:10}
96%{left:-100%;z-index:9}
100%{left:100%;z-index:9}
}
@keyframes mymove55
{
0% {left:-100%;z-index:9}
30% {left:-100%;z-index:9}
34%{left:100%;z-index:9}
63%{left:100%;z-index:10}
67%{left:0%;z-index:10}
96%{left:0%;z-index:10}
100%{left:-100%;z-index:10}
}

@-webkit-keyframes mymove55 /*Safari and Chrome*/
{
0% {left:-100%;z-index:9}
30% {left:-100%;z-index:9}
34%{left:100%;z-index:9}
63%{left:100%;z-index:10}
67%{left:0%;z-index:10}
96%{left:0%;z-index:10}
100%{left:-100%;z-index:10}
}

.proBannerBox .box .mobileBox .bottomBox{ border:1px solid #333; width:30px; height:30px; border-radius:30px; margin:10px auto 0;background-color:#131313}
.proBannerBox .box .textBox{ text-align:center; color:#fff; font-size:16px;  width:1000px; height:180px; margin:0 auto; position:relative; overflow:hidden}
.proBannerBox .box .opacityBox{ position:absolute; left:0; top:0; z-index:9;background-color:#000000;    filter:Alpha(opacity=40); opacity:0.4; width:100%; height:100%;}

.proBannerBox .box .opacityBox{animation:mymovez4 15s ease 0s infinite normal;
    -webkit-animation:mymovez4 15s ease 0s infinite normal;}

@keyframes mymovez4
{
  0%{opacity:0.4;filter:Alpha(opacity=40);}
  80%{opacity:0.4;filter:Alpha(opacity=40);}
  96%{opacity:0;filter:Alpha(opacity=0);}
  100%{opacity:0.4;filter:Alpha(opacity=40);}
}

@-webkit-keyframes mymovez4 /*Safari and Chrome*/
{
 0%{opacity:0.4;filter:Alpha(opacity=40);}
  80%{opacity:0.4;filter:Alpha(opacity=40);}
  96%{opacity:0;filter:Alpha(opacity=0);}
  100%{opacity:0.4;filter:Alpha(opacity=40);}
}

.proBannerBox .box .textBox strong{ font-size:40px; line-height:60px; display:block; position:absolute; left:0; top:20px; z-index:11; text-align:center; width:100%; height:60px; padding-left:100px; opacity:1}
.proBannerBox .box .textBox p{ display:block;position:absolute; left:0; top:80px; z-index:11;width:100%; height:20px; padding-left:100px;opacity:1}
.proBannerBox .box .textBox label{ font-size:20px; line-height:40px; font-weight:bold; display:block;position:absolute; left:0; top:100px; z-index:11;width:100%; height:20px; padding-left:100px;opacity:1}

.proBannerBox .box .textBox strong{animation:mymovez1 15s ease 0s infinite normal;
    -webkit-animation:mymovez1 15s ease 0s infinite normal;}

@keyframes mymovez1
{
  0%{left:0;opacity:1}
  84%{left:0;opacity:1} 
  88%{left:100%;opacity:1}
  92%{left:100%; opacity:0}
  96%{left:0;opacity:0}
  100%{left:0;opacity:1}
}

@-webkit-keyframes mymovez1 /*Safari and Chrome*/
{
  0%{left:0;opacity:1}
  84%{left:0;opacity:1} 
  88%{left:100%;opacity:1}
  92%{left:100%; opacity:0}
  96%{left:0;opacity:0}
  100%{left:0;opacity:1}
}
.proBannerBox .box .textBox p{animation:mymovez2 15s ease 0s infinite normal;
    -webkit-animation:mymovez2 15s ease 0s infinite normal;}

@keyframes mymovez2
{
   0%{left:0;opacity:1}
  80%{left:0;opacity:1} 
  84%{left:100%;opacity:1}
  92%{left:100%; opacity:0}
  96%{left:0;opacity:0}
  100%{left:0;opacity:1}
}

@-webkit-keyframes mymovez2 /*Safari and Chrome*/
{
   0%{left:0;opacity:1}
  80%{left:0;opacity:1} 
  84%{left:100%;opacity:1}
  92%{left:100%; opacity:0}
  96%{left:0;opacity:0}
  100%{left:0;opacity:1}
}
.proBannerBox .box .textBox label{animation:mymovez3 15s ease 0s infinite normal;
    -webkit-animation:mymovez3 15s ease 0s infinite normal;}

@keyframes mymovez3
{
  0%{left:0;opacity:1}
  76%{left:0;opacity:1} 
  80%{left:100%;opacity:1}
  92%{left:100%; opacity:0}
  96%{left:0;opacity:0}
  100%{left:0;opacity:1}
}

@-webkit-keyframes mymovez3 /*Safari and Chrome*/
{
  0%{left:0;opacity:1}
  76%{left:0;opacity:1} 
  80%{left:100%;opacity:1}
  92%{left:100%; opacity:0}
  96%{left:0;opacity:0}
  100%{left:0;opacity:1}
}



.publicBox {
	width: 1200px;
	margin: 0 auto
}
.oneBox {
	position: relative;
	margin-top: 60px;
	border: 1px solid #d8d8d8
}
.oneBox h2 {
	position: absolute;
	left: 0;
	top: -30px;
	z-index: 10;
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 50px
}
.oneBox h2 label {
	background-color: #fff;
	padding: 0 30px
}
.oneBox h2 i {
	font-size: 30px;
	background-color: #fff;
	line-height: 57px
}
.oneBox section {
	width: 800px;
	text-align: center;
	font-size: 16px;
	margin: 40px auto;
	line-height: 30px
}
.towBox {
	margin-top: 50px;
}
.towBox h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 60px;
}
.towBox section {
	margin: 0 -30px
}
.towBox section ul {
	padding: 30px 30px 0;
	width: 25%;
	float: left;
	cursor: pointer;
	perspective: 4000px;
	-webkit-perspective: 4000px;
}
.towBox section ul li {
	position: relative;
	width: 100%;
	height: 150px;
	font-size: 14px;
	color: #fff;
	line-height: 30px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform .6s;
	-webkit-transition: -webkit-transform .6s;
	-moz-transition: -moz-transform .6s;
	-o-transition: -o-transform .6s;
}
.towBox section ul li .div1 {
	width: 100%;display: block;
	padding: 20px 40px;
	height: 150px;
	top: 0;
	position: absolute;
	-ms-transform: translateZ(125px);
	-moz-transform: translateZ(125px);
	-webkit-transform: translateZ(125px);
	-o-transform: translateZ(125px);
	-webkit-transition: all .6s;
	transition: all .6s;
	-moz-transition: all .6s;
	-o-transition: all .6s;
}
.towBox section ul li .div2 {
	width: 100%;display: block;
	padding: 20px 40px;
	height: 150px;
	position: absolute;
	top: 0;
	-webkit-transform: rotateY(-90deg) translateZ(125px);
	transform: rotateY(-90deg) translateZ(125px);
	-moz-transform: rotateY(-90deg) translateZ(125px);
	-o-transform: rotateY(-90deg) translateZ(125px);
	-webkit-transition: all .6s;
	transition: all .6s;
	-moz-transition: all .6s;
	-o-transition: all .6s;
}
.towBox section ul:hover li {
	-webkit-transform: rotateY(95deg);
	transform: rotateY(95deg);
	-moz-transform: rotateY(95deg);
	-o-transform: rotateY(95deg);
}
.towBox section ul .bg1 {
	background-color: #f58aa3;
}
.towBox section ul .bg2 {
	background-color: #87d27d;
}
.towBox section ul .bg3 {
	background-color: #fcbd80;
}
.towBox section ul .bg4 {
	background-color: #fc80cc;
}
.towBox section ul .bg5 {
	background-color: #00c1de;
}
.towBox section ul .bg6 {
	background-color: #ec846c;
}
.towBox section ul .bg7 {
	background-color: #779ecb;
}
.towBox section ul .bg8 {
	background-color: #4fc94f;
}
.towBox section ul .bg11 {
	background-color: #dd7089;
}
.towBox section ul .bg21 {
	background-color: #6dbd62;
}
.towBox section ul .bg31 {
	background-color: #ce8c4b;
}
.towBox section ul .bg41 {
	background-color: #d04299;
}
.towBox section ul .bg51 {
	background-color: #058ea3;
}
.towBox section ul .bg61 {
	background-color: #ce5438;
}
.towBox section ul .bg71 {
	background-color: #4576af;
}
.towBox section ul .bg81 {
	background-color: #2aa92a;
}
.threeBox {
	margin-top: 50px;
}
.threeBox h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 60px;
}
.threeBox section {
}
.threeBox section ul {
}
.threeBox section li {
	padding: 30px 0 0;
	width: 10%;
	float: left;
	text-align: center;cursor: pointer;
}
.threeBox section li i {
	font-size: 36px;
	line-height: 60px
}
.threeBox section li:hover i{
	animation:mymove 1s ease 0s 1 normal;
    -webkit-animation:mymove 1s ease 0s 1 normal;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}

@keyframes mymove
{
from {font-size: 36px;}
to {font-size:50px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {font-size: 36px;}
to {font-size:50px;}
}
.threeBox section .phoneBox {
	float: left;
	width: 25%;
	padding: 30px 40px;
	text-align: center
}
.threeBox section .phoneBox img {
	width: 100%
}
.fourBox {
	margin-top: 50px;
}
.fourBox h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 60px;
}
.fourBox section {
	width: 1000px;
	margin: 0 auto
}
.fourBox section ul {
	padding: 30px 0 0;
	width: 20%;
	float: left;
}
.fourBox section li {
	cursor: pointer;
	text-align: center;
	width: 100px;
	height: 100px;
	border-radius: 100px;
	color: #fff;
	margin: 0 auto;
	padding-top: 10px
}
.fourBox section li i {
	font-size: 36px;
	line-height: 50px;font-weight:normal
}
.fourBox section li:hover{
	animation:mymove2 1s ease 0s 1 normal;
    -webkit-animation:mymove2 1s ease 0s 1 normal;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
.fourBox section li:hover i{
	animation:mymove1 1s ease 0s 1 normal;
    -webkit-animation:mymove1 1s ease 0s 1 normal;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
}
@keyframes mymove2
{
from {font-size: 12px;
	line-height: 20px;}
to {font-size: 18px;
	line-height: 30px; font-weight:bold}
}

@-webkit-keyframes mymove2 /*Safari and Chrome*/
{
from {font-size: 12px;
	line-height: 20px;}
to {font-size: 18px;
	line-height: 30px; font-weight:bold}
}
@keyframes mymove1
{
from {font-size: 36px;
	line-height: 50px;}
to {font-size: 20px;
	line-height: 30px;}
}

@-webkit-keyframes mymove1 /*Safari and Chrome*/
{
from {font-size: 36px;
	line-height: 50px;}
to {font-size: 20px;
	line-height: 30px;}
}
.fourBox section ul .bg1 {
	background-color: #87d27d;
}
.fourBox section ul .bg2 {
	background-color: #fc80cc;
}
.fourBox section ul .bg3 {
	background-color: #4fc94f;
}
.fourBox section ul .bg4 {
	background-color: #ec846c;
}
.fourBox section ul .bg5 {
	background-color: #f58aa3;
}
.fourBox section .xian {
	background-color: #a3a3a3;
	height: 40px;
	width: 1px;
	margin: 0 10%;
	float: left
}
.fourBox section .xianMRN {
	margin-right: 0
}
.fourBox section .hxian {
	background-color: #a3a3a3;
	height: 1px;
	width: 80%;
	margin: 0 auto
}
.fourBox section .sxian {
	background-color: #a3a3a3;
	height: 40px;
	width: 1px;
	margin-left: 502px;
}
.fourBox section h2 {
	width: 300px;
	height: 50px;
	border: 1px solid #a3a3a3;
	margin: 0 auto;
	line-height: 50px;
	text-align: center;
	font-size: 24px
}
.fourBox section .xtName {
	width: 20%;
	float: left;
	text-align: center;
	color: #fff;
	line-height: 38px
}
.fourBox section .xtName label {
	padding: 10px 20px;
	font-size: 16px
}
.fourBox section .xtName .bg1 {
	background-color: #87d27d;
}
.fourBox section .xtName .bg2 {
	background-color: #fc80cc;
}
.fourBox section .xtName .bg3 {
	background-color: #4fc94f;
}
.fourBox section .xtName .bg4 {
	background-color: #ec846c;
}
.fourBox section .xtName .bg5 {
	background-color: #f58aa3;
}
.fiveBox {
	margin-top: 80px;
}
.fiveBox h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 60px;
}
.fiveBox section {
	margin: 30px auto;
	width: 922px
}
.fiveBox section .leftBox {
	float: left;
}
.fiveBox section .leftBox .mobileBox {
	background: url(../images/mobileBg.jpg) no-repeat left center;
	width: 213px;
	height: 431px;
	float: left;
}
.fiveBox section .leftBox .mobileBox .imgList {
	background-color: #fff;
	width: 187px;
	height: 332px;
	margin: 50px auto 0;
	border: 1px solid #d6d6d6;
	overflow: hidden; position:relative
}
.fiveBox section .leftBox .mobileBox .imgList img {
	width: 100%; position:absolute;  top:0; height:100%; z-index:10
	
}
.fiveBox section .leftBox .mobileBox .imgList .img1{left:0;animation:mymove3 15s ease 0s infinite normal;
    -webkit-animation:mymove3 15s ease 0s infinite normal;}
.fiveBox section .leftBox .mobileBox .imgList .img2{left:100%;animation:mymove4 15s ease 0s infinite normal;
    -webkit-animation:mymove4 15s ease 0s infinite normal;}
	.fiveBox section .leftBox .mobileBox .imgList .img3{left:-100%;animation:mymove5 15s ease 0s infinite normal;
    -webkit-animation:mymove5 15s ease 0s infinite normal;}
@keyframes mymove3
{
0% {left:0;z-index:10}
30% {left:0;z-index:10}
34%{left:-100%;z-index:10}
63%{left:-100%;z-index:10}
67%{left:100%;z-index:9}
96%{left:100%;z-index:10}
100%{left:0;z-index:10}
}

@-webkit-keyframes mymove3 /*Safari and Chrome*/
{
0% {left:0;z-index:10}
30% {left:0;z-index:10}
34%{left:-100%;z-index:10}
63%{left:-100%;z-index:10}
67%{left:100%;z-index:9}
96%{left:100%;z-index:10}
100%{left:0;z-index:10}
}
@keyframes mymove4
{
0% {left:100%;z-index:9}
30% {left:100%;z-index:10}
34%{left:0;z-index:10}
63%{left:0;z-index:10}
67%{left:-100%;z-index:10}
96%{left:-100%;z-index:9}
100%{left:100%;z-index:9}
}

@-webkit-keyframes mymove4 /*Safari and Chrome*/
{
0% {left:100%;z-index:9}
30% {left:100%;z-index:10}
34%{left:0;z-index:10}
63%{left:0;z-index:10}
67%{left:-100%;z-index:10}
96%{left:-100%;z-index:9}
100%{left:100%;z-index:9}
}
@keyframes mymove5
{
0% {left:-100%;z-index:9}
30% {left:-100%;z-index:9}
34%{left:100%;z-index:9}
63%{left:100%;z-index:10}
67%{left:0%;z-index:10}
96%{left:0%;z-index:10}
100%{left:-100%;z-index:10}
}

@-webkit-keyframes mymove5 /*Safari and Chrome*/
{
0% {left:-100%;z-index:9}
30% {left:-100%;z-index:9}
34%{left:100%;z-index:9}
63%{left:100%;z-index:10}
67%{left:0%;z-index:10}
96%{left:0%;z-index:10}
100%{left:-100%;z-index:10}
}

.fiveBox section .leftBox .boxMR {
	margin-right: 80px
}
.fiveBox section ul {
	float: right; width:350px;
	
}
.fiveBox section ul li {
	cursor:pointer;
	line-height: 40px;
	font-size: 20px;
}
.fiveBox section ul li i {
	color: #4fc94f;
	font-size: 24px;
	padding-right: 10px
}
.fiveBox section ul li:hover {
	line-height:60px;font-size: 24px;
}
.fiveBox section ul  li:hover i{
	font-size: 30px;
}

.sixBox {
	margin-top: 50px;
}
.sixBox h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 60px;
}
.sixBox section {
	margin: 40px 0px 0px;
}
.sixBox section ul{
	float: left;
	width: 20%;
	margin-bottom: 20px; height:130px; position:relative; cursor:pointer
}
.sixBox section ul li {
	margin: 0 auto
}
.sixBox section ul .firstLi {
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 100px;
	text-align: center;
	border-radius: 100px
}
.sixBox section ul .firstLi i {
	color: #fff;
	font-size: 50px;
}
.sixBox section ul .lastLi {
	
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 14px; position:absolute; left:0; bottom:0; width:100%;
}
.sixBox section ul:hover .lastLi{animation:mymove9 0.5s ease 0s 1 normal;
    -webkit-animation:mymove9 0.5s ease 0s 1 normal;animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;}
@keyframes mymove9
{
0%{ bottom:0; color:#333}
100%{ bottom:20px;color:#fff}
}

@-webkit-keyframes mymove9 /*Safari and Chrome*/
{
0%{ bottom:0; color:#333}
100%{ bottom:20px;color:#fff}
}
.sixBox section ul:hover .firstLi{animation:mymove8 1s ease 0s 1 normal;
    -webkit-animation:mymove8 1s ease 0s 1 normal;animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;}
@keyframes mymove8
{
0%{width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 100px;}
100%{width: 130px;
	height: 130px;
	line-height: 100px;
	border-radius: 130px;}
}

@-webkit-keyframes mymove8 /*Safari and Chrome*/
{
0%{width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 100px;}
100%{width: 130px;
	height: 130px;
	line-height: 100px;
	border-radius: 130px;}
}
.sixBox section ul:hover .firstLi i{animation:mymove7 1s ease 0s 1 normal;
    -webkit-animation:mymove7 1s ease 0s 1 normal;animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;}
@keyframes mymove7
{
0%{font-size: 50px;}
100%{font-size: 45px;}
}

@-webkit-keyframes mymove7 /*Safari and Chrome*/
{
0%{font-size: 50px;}
100%{font-size: 45px;}
}

.sixBox section ul .bg1 {
	background-color: #779dcc;
}
.sixBox section ul .bg2 {
	background-color: #4fc950;
}
.sixBox section ul .bg3 {
	background-color: #789ecb;
}
.sixBox section ul .bg4 {
	background-color: #f99154;
}
.sixBox section ul .bg5 {
	background-color: #54bcf9;
}
.sixBox section ul .bg6 {
	background-color: #54bcf9;
}
.sixBox section ul .bg7 {
	background-color: #00a5a1;
}
.sixBox section ul .bg8 {
	background-color: #fd80cc;
}
.sixBox section ul .bg9 {
	background-color: #4fc950;
}
.sixBox section ul .bg10 {
	background-color: #ec836d;
}
.sixBox section ul .bg11 {
	background-color: #f99154;
}
.sixBox section ul .bg12 {
	background-color: #ec836d;
}
.sixBox section ul .bg13 {
	background-color: #789ecb;
}
.sixBox section ul .bg14 {
	background-color: #00a5a1;
}
.sixBox section ul .bg15 {
	background-color: #779dcc;
}
.sevenBox {
	margin-top: 80px;
}
.sevenBox h2 {
	width: 100%;
	text-align: center;
	font-size: 36px;
	line-height: 60px;
}
.sevenBox section {
	margin: 40px 0 0;
	overflow: hidden;
}
.sevenBox section ul {
	float: left;
	width: 16.66666%;
	margin-bottom: 20px
}
.sevenBox section ul li {
	margin: 0 auto;
	width: 120px;
	height: 100px;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	font-size: 12px;
	text-align: center;
	line-height: 40px;
	padding: 25px 10px 0;
	color: #666; position:relative; padding-top:40px; cursor:pointer
}
.sevenBox section ul li i {
	font-size: 40px;
	line-height: 40px;
	color: #555; display:block; position: absolute; left:50px; top:30px
}
.sevenBox section ul li:hover i{animation:mymove6 1s ease 0s 1 normal;
    -webkit-animation:mymove6 1s ease 0s 1 normal;}
@keyframes mymove6
{
0%{left:50px;}
20%{left:80px;}
40%{left:20px;}
60%{left:60px;}
80%{left:40px;}
100%{left:50px;}
}

@-webkit-keyframes mymove6 /*Safari and Chrome*/
{
0%{left:50px;}
20%{left:80px;}
40%{left:20px;}
60%{left:60px;}
80%{left:40px;}
100%{left:50px;}
}