@charset "utf-8";
/* CSS Document */

.top{ width:100%; height:100vh; background:url(../images/w1.jpg) no-repeat center; overflow:hidden; position:relative;}
.top_con{ width:100%; height:320px; position:absolute; top:50%; margin-top:-150px;}
.top h3{ font-size:60px; color:#fff; text-align:center; margin-top:52px;}
.top p{ width:207px; height:58px; background:#ff0000; text-align:center; line-height:57px; font-size:30px; color:#fff; margin:0 auto; font-weight:bold;}
.top img{ margin:0 auto; margin-top:46px;}

.con2{ width:1200px; height:445px; margin:0 auto; position:absolute; left:50%; top:50%; margin-top:-222px; margin-left:-600px;}
.con2 img{ margin:0 auto;}
.con2 h3{ font-size:30px; color:#333; font-weight:normal; margin-top:16px; font-weight:normal; text-align:center;}
.con2 p{ font-size:16px; color:#999; text-align:center; margin-top:25px;}
.con2 ul{ margin-top:76px; display:table;}
.con2 ul li{ opacity:0; display:inline-block; position:relative; width:300px; height:201px; float:left; background:#ededed;  transform: translate3d(200px, 200px, 0); -webkit-transform: translate3d(200px, 200px, 0);
	              -moz-transform: translate3d(200px, 200px, 0);
	              -o-transform: translate3d(200px, 200px, 0);}
.con2 ul li img{ margin:0 auto; margin-top:30px;}
.con2 ul li h3{ font-weight:normal; font-size:18px; color:#666; text-align:center; margin-top:10px; margin-bottom:10px;}
.con2 ul li p{ font-size:14px; color:#999; text-align:center; line-height:25px; margin:0px;}

.con2 ul li:nth-of-type(1) {
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
}
.con2 ul li:nth-of-type(2) {
	transition: all 1s ease .2s;
	-webkit-transition: all 1s ease .2s;
	-moz-transition: all 1s ease .2s;
}
.con2 ul li:nth-of-type(3) {
	transition: all 1s ease .4s;
	-webkit-transition: all 1s ease .4s;
	-moz-transition: all 1s ease .4s;
}
.con2 ul li:nth-of-type(4) {
	transition: all 1s ease .6s;
	-webkit-transition: all 1s ease .6s;
	-moz-transition: all 1s ease .6s;
}


.con2 ul.active li:nth-of-type(1) {
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
}
.con2 ul.active li:nth-of-type(2) {
	transition: all 1s ease .2s;
	-webkit-transition: all 1s ease .2s;
	-moz-transition: all 1s ease .2s;
}
.con2 ul.active li:nth-of-type(3) {
	transition: all 1s ease .4s;
	-webkit-transition: all 1s ease .4s;
	-moz-transition: all 1s ease .4s;
}
.con2 ul.active li:nth-of-type(4) {
	transition: all 1s ease .6s;
	-webkit-transition: all 1s ease .6s;
	-moz-transition: all 1s ease .6s;
}
.con2 ul.active li{transform: translate3d(0, 0, 0);
	                    /* -webkit-transform: translate3d(0, 0, 0); */
	                    -moz-transform: translate3d(0, 0, 0);
	                    -o-transform: translate3d(0, 0, 0); opacity: 1;}



.con3{ width:1200px; height:586px; position:absolute; top:50%; left:50%; margin-top:-293px; margin-left:-600px;}
.con3 h3{ font-weight:normal; font-size:35px; color:#ff0000; text-align:center;}
.con3 p{ font-size:20px; color:#666; text-align:center; margin-top:18px;}
.con3 ul{ width:728px; height:426px; margin:0 auto; margin-top:78px; background:url(../images/html.jpg) no-repeat; position:relative;}
.con3 ul li{ width:78px; height:90px; position:absolute; opacity:0;}
.con3 ul li.ht1{ top:186px; left:20px;}
.con3 ul li.ht2{ top:280px; left:129px;}
.con3 ul li.ht3{ top:330px; left:265px;}
.con3 ul li.ht4{ top:340px; left:400px;}
.con3 ul li.ht5{ top:280px; left:535px;}
.con3 ul li.ht6{ top:186px; left:630px;}
.con3 ul li:nth-of-type(1) {
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
}
.con3 ul li:nth-of-type(2) {
	transition: all 1s ease .2s;
	-webkit-transition: all 1s ease .2s;
	-moz-transition: all 1s ease .2s;
}
.con3 ul li:nth-of-type(3) {
	transition: all 1s ease .4s;
	-webkit-transition: all 1s ease .4s;
	-moz-transition: all 1s ease .4s;
}
.con3 ul li:nth-of-type(4) {
	transition: all 1s ease .6s;
	-webkit-transition: all 1s ease .6s;
	-moz-transition: all 1s ease .6s;
}
.con3 ul li:nth-of-type(5) {
	transition: all 1s ease .8s;
	-webkit-transition: all 1s ease .8s;
	-moz-transition: all 1s ease .8s;
}


.con3 ul li:nth-of-type(6) {
	transition: all 1s ease 1s;
	-webkit-transition: all 1s ease 1s;
	-moz-transition: all 1s ease 1s;
}

.con3 ul.active li{ opacity:1;}
.con4{ width:1200px; height:510px; position:absolute; top:50%; margin-top:-255px; left:50%; margin-left:-600px;}
.con4 h3{ font-size:30px; color:#fff; text-align:center;}
.con4 p{ font-size:20px; color:#fff; text-align:center; margin-top:28px;}
.con4 i{ width:81px; height:2px; background:#fff; display:block; margin:0 auto; margin-top:9px;}
.con4 span{ font-size:16px; color:#90b5cf; text-align:center; display:block; margin-top:10px;}
.con4 img{ margin:0 auto; margin-top:90px;}
.con5{ width:1200px; height:580px; position:absolute; top:50%; left:50%; margin-top:-290px; margin-left:-600px;}
.con5 h3{ font-weight:normal; font-size:30px; color:#333; text-align:center;}
.con5 p{ font-size:18px; color:#333; text-align:center; margin-top:20px;}
.con5 i{ width:150px; height:1px; background:#d3d3d3; display:block; margin:0 auto; margin-top:10px;}
.con5 span{ font-size:16px; color:#aeaeae; text-align:center; display:block; margin-top:10px;}
.con5 ul{ margin-top:114px; height:250px;}
.con5 ul li{ width:377px; height:239px; float:left; margin-right:34px; opacity:0; transform: translate3d(0px, 200px, 0); -webkit-transform: translate3d(0px, 200px, 0);
	              -moz-transform: translate3d(0px, 200px, 0);
	              -o-transform: translate3d(0px, 200px, 0);}


.con5 ul li:nth-of-type(1) {
	transition: all 1s ease 0s;
	-webkit-transition: all 1s ease 0s;
	-moz-transition: all 1s ease 0s;
}
.con5 ul li:nth-of-type(2) {
	transition: all 1s ease .2s;
	-webkit-transition: all 1s ease .2s;
	-moz-transition: all 1s ease .2s;
}
.con5 ul li:nth-of-type(3) {
	transition: all 1s ease .4s;
	-webkit-transition: all 1s ease .4s;
	-moz-transition: all 1s ease .4s;
}
.con5 ul.active li{ opacity:1; transform: translate3d(0, 0, 0);}
.con5 a{ width:200px; height:37px; background:#27313c; border-radius:30px; display:block; margin:55px auto; line-height:37px; color:#fff; text-align:center; font-size:15px;
  				  transform: translate3d(0px, 200px, 0);
				  -webkit-transform: translate3d(0px, 200px, 0);
	              -moz-transform: translate3d(0px, 200px, 0);
	              -o-transform: translate3d(0px, 200px, 0); 
				   opacity:0;
				  transition: all 1s ease .4s;
  				  -webkit-transition: all 1s ease .4s;
	              -moz-transition: all 1s ease .4s;}


.con5.active a{ transform: translate3d(0px, 0px, 0); -webkit-transform: translate3d(0px,0px, 0);
	              -moz-transform: translate3d(0px, 0px, 0);
	              -o-transform: translate3d(0px, 0px, 0); opacity:1;}


.con6{ width:1200px; height:520px; position:absolute; top:50%; margin-top:-260px; left:50%; margin-left:-600px;}
.con6 h3{ font-weight:normal; font-size:30px; color:#fff; text-align:center;}
.con6 p{ font-size:20px; color:#82868b; text-align:center; margin-top:39px;}
.con6 i{ width:150px; height:1px; background:#fff; display:block; margin:0 auto; margin-top:10px;}
.con6_cc{ width:365px; height:350px; margin:60px auto 0px; position:relative;}
.img1{ position:absolute; top:0; right:8px; 
				  transform: translate3d(200px, 0, 0);
				  -webkit-transform: translate3d(200px, 0, 0);
	              -moz-transform: translate3d(200px, 0, 0);
	              -o-transform: translate3d(200px, 0, 0); 
				  transition: all 1s ease .3s;
				   -webkit-transition: all 1s ease .3s;
	              -moz-transition: all 1s ease .3s;
				  opacity:0;
				  }
.img2{ position:absolute; bottom:25px; left:8px;transform: translate3d(-100px, 0px, 0);
				  -webkit-transform: translate3d(-100px, 0px, 0);
	              -moz-transform: translate3d(-100px, 0px, 0);
	              -o-transform: translate3d(-100px, 0px, 0); 
				  transition: all 1s ease .3s;
				   -webkit-transition: all 1s ease .3s;
	              -moz-transition: all 1s ease .3s;
				  opacity:0;}
.img3{ position:absolute; bottom:10px; right:40px; opacity:0;
 transition: all 1s ease .6s;
				   -webkit-transition: all 1s ease .6s;
	              -moz-transition: all 1s ease .6s;}


.con6 dl.active .img1{transform: translate3d(0px, 0px, 0); -webkit-transform: translate3d(0px,0px, 0);
	              -moz-transform: translate3d(0px, 0px, 0);
	              -o-transform: translate3d(0px, 0px, 0); opacity:1;}
 .con6 dl.active .img2{transform: translate3d(0px, 0px, 0); -webkit-transform: translate3d(0px,0px, 0);
	              -moz-transform: translate3d(0px, 0px, 0);
	              -o-transform: translate3d(0px, 0px, 0); opacity:1;}
.con6 dl.active .img3{ opacity:1;}
.con7{ width:1200px; height:626px; position:absolute; top:50%; margin-top:-313px; left:50%; margin-left:-600px;}
.con7 h3{ font-size:30px; color:#333; font-weight:normal; text-align:center;}
.con7 h3 span{ color:#5ebbd8;}
.cheng{ width:680px; height:475px; margin:0 auto; background:url(../images/cheng.jpg) no-repeat; margin-top:115px; position:relative;}
.lun1{ position:absolute; top:235px; left:290px; -webkit-animation:rotateImg1 1s linear infinite;}
.lun2{ position:absolute; top:272px; left:356px; -webkit-animation:rotateImg2 1s linear infinite;}
@keyframes rotateImg1 {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

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

@keyframes rotateImg2 {
  0% {transform : rotate(360deg);}
  100% {transform : rotate(0deg);}
}

@-webkit-keyframes rotateImg2 {
    0%{-webkit-transform : rotate(360deg);}
  100%{-webkit-transform : rotate(0deg);}
}
.con8{ width:100%; height:100vh; background:url(../images/con8.jpg) no-repeat center;}
.con8_con{ width:1200px; height:430px; position:absolute; top:50%; margin-top:-215px; left:50%; margin-left:-600px;}
.con8_con .bt{ width:425px; height:81px; margin:0 auto;}
.con8_con .bt h3{ width:159px; text-align:center; font-size:30px; color:#fb0000; float:left;}
.con8_con .bt .l1{ width:133px; height:1px; background:#fb0000; float:left; margin-top:20px; margin-bottom:33px;}
.con8_con .bt p{ font-size:18px; color:#fff; text-align:center;}
.con8_con .nr{ width:732px; height:120px; margin:133px auto 0;}
.con8_con .nr img{ width:118px; height:118px; float:left;}
.con8_con .nr .txt{ width:585px; float:right;}
.con8_con .nr .txt h3{ font-size:30px; font-family:叶根友毛笔行书简体; color:#fb0000; }
.con8_con .nr .txt p{ line-height:30px; font-size:18px; color:#fff;}
.con8_con dl{ color:#232323; margin-top:76px;}