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

body{ margin:0; padding: 0;}
html{ margin:0; padding: 0;}
div{ margin:0; padding: 0;}

ul{ list-style: none}
li{ list-style: none; list-style-position: outside;}

a{ text-decoration: none; color: #333;}

.width-1200{width:1200px;margin: auto;height: 100px;}

.top{width:100%; height: 917px; color: #fff;}
.top-banner{width:100%; height: 917px; position: absolute; top: 0; z-index: -1; overflow: hidden}
.top-top{width:100%;background-color:rgba(0,0,0,0.4); padding-top: 25px; padding-bottom: 15px;}
.top-logo{ float: left; width: 295px;}
.top-right{ float: right; width: 760px}
.top-language{ width: 98%; text-align: right; float: left; font-size: 14px; margin-top: 5px; margin-bottom: 10px;}
.top-menu{ width:100%; float: left;}
.top-menu ul li{width:95px; float: left; text-align: right;}
.top-top a{ color: #fff;}
.top-top a:hover{ color:#D4D4D4;}

.introduction{width:100%;text-align: center;overflow:  hidden;}
.introduction .title{ font-size: 30px; margin-top: 85px; margin-bottom: 40px;}
.introduction .text{ color: #424242; line-height: 32px; margin-bottom: 40px;}
.introduction .btn{ width:190px; height: 45px; line-height: 45px; background: #fff; color: #6e6e6e; font-size: 18px; text-align: center;
display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
	border-radius: 100px;
	border: 2px solid #5cb573;
}

.introduction .btn:hover, .introduction .btn:focus, .introduction .btn:active {
  background-color: #5cb573;
  color: white;
}

.introduction .img{ width:100%; margin-top: 60px;}
.introduction .img-left{width:574px; height: 277px; float: left;}
.introduction .img-right{width:574px; height: 277px; float: right;}

.jg10{width:100%;}
.jq10-box{width:100%;}

.kstd{width:100%;text-align: center;padding-bottom: 50px;overflow:  hidden;}

.kstd .title{ font-size: 30px; margin-top: 85px; margin-bottom: 40px;}
.kstd .text{ color: #424242; line-height: 32px; margin-bottom: 40px;}

.kstd .img{width:80%;margin: auto;text-align: center;overflow: hi;}
.kstd .img li{float:left; width:25%; margin: auto;}

.wzzh{
	width: 100%;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: top center;
}

.section1{
  	color: white;
	height: 485px;
	background-image: url(../images/wz-bg.jpg);
	background-size:cover;
}

.wzzh .title{width:100%;text-align: center;margin-top: 65px;margin-bottom: 75px;float:  left;}

.wzzhbox{width:100%;}
.wzzhbox ul li{float: left;width:16.5%; text-align: center; color: #fff;}
.wzzhbox ul li .text{margin-top:35px;}

/*wzzh1*/
.wzzh1{ width:100%; height: 93px;
display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;overflow: hidden;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
background: url(../images/wz-1.png) center no-repeat;}
.wzzh1:hover, .wzzh1:focus, .wzzh1:active {background: url(../images/wz-11.png) center no-repeat;}

/*wzzh2*/
.wzzh2{ width:100%; height: 93px;
display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;overflow: hidden;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
background: url(../images/wz-2.png) center no-repeat;}
.wzzh2:hover, .wzzh2:focus, .wzzh2:active {background: url(../images/wz-12.png) center no-repeat;}

/*wzzh3*/
.wzzh3{ width:100%; height: 93px;
display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;overflow: hidden;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
background: url(../images/wz-3.png) center no-repeat;}
.wzzh3:hover, .wzzh3:focus, .wzzh3:active {background: url(../images/wz-13.png) center no-repeat;}

/*wzzh4*/
.wzzh4{ width:100%; height: 93px;
display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;overflow: hidden;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
background: url(../images/wz-4.png) center no-repeat;}
.wzzh4:hover, .wzzh4:focus, .wzzh4:active {background: url(../images/wz-14.png) center no-repeat;}

/*wzzh5*/
.wzzh5{ width:100%; height: 93px;
display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;overflow: hidden;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
background: url(../images/wz-5.png) center no-repeat;}
.wzzh5:hover, .wzzh5:focus, .wzzh5:active {background: url(../images/wz-15.png) center no-repeat;}

/*wzzh6*/
.wzzh6{ width:100%; height: 93px;
display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;overflow: hidden;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;
background: url(../images/wz-6.png) center no-repeat;}
.wzzh6:hover, .wzzh6:focus, .wzzh6:active {background: url(../images/wz-16.png) center no-repeat;}




.footer{width:100%;overflow:  hidden;float: left;}
.footer1{width:100%;margin-top: 50px;padding-bottom: 50px;overflow:  hidden;}
.footer1 .left{width:785px; float: left;}
.footer1 .left .menu{width:100%; float: left;}
.footer1 .left .menu li{ float: left; margin-right: 20px;}
.footer1 .left .guanzhu{width:100%; float: left; margin-top: 20px; color: #9f9f9f;}
.footer1 .left .guanzhu img{ vertical-align: middle; margin-left: 10px;}
.footer1 .center{width:265px; float: left; font-size: 14px; color: #929292; text-align: right;}
.footer1 .center h1{font-size:36px; font-weight: 800; margin: 10px auto; color: #424242;}
.footer1 .center .btn{width:100%; text-align: right;}
.footer1 .right{width:128; float: right;}

.footer2{width:100%; background: #212121; color: #737373; text-align: center; line-height: 32px; padding: 10px 0;}
.footer2 span{ margin:0 5px;}
.footer2 span a{color: #737373;}
.footer2 span a:hover{color: #959595;}



@media screen and (max-width: 1199px) {
	.width-1200{width:100%;}
	.introduction .img-left{width:49%; }
	.introduction .img-right{width:49%}
	.kstd .text{width:96%; margin:0 auto 40px}
	.kstd .img li {width:24%;}
	.kstd .img li img{width:90%;}
	
	.footer1 .left{width:100%; text-align: center}
	.footer1 .left .menu{display:none;}
	.footer1 .center{width:100%; text-align: center}
	.footer1 .center .btn{ text-align:center}
	.footer1 .right{width:100%; text-align:center}
		}

@media screen and (max-width: 999px) {
	.kstd .img li {width:45%; }
	.kstd .img li img{width:auto;}
		}

@media screen and (max-width: 888px) {
	.wzzh .title img{width:100%}
	.wzzhbox ul li{width:30%; margin-bottom: 30px;}
	.section1{height:auto;overflow:  hidden;}
		}





	.demo {
		  display: inline-block;
		  width: 20%;
		  -webkit-box-sizing: padding-box;
		  box-sizing: padding-box;
		}
		.demo textarea {
		  -webkit-box-sizing: padding-box;
		  box-sizing: padding-box;
		  font-family: "Roboto";
		  font-size: 0.9em;
		  height: 32px;
		  padding: 6px 0px;
		  resize: none;
		  text-align: center;
		  width: 100%;
		  border: 1px solid rgba(0, 0, 0, 0.2);
		}
		img {
		  border: none;
		  width:100%；
		}
		.effects {
			font-size: 0px;
			width:100%;
		  
		}
		@media only screen and (max-width: 959px) {
		  .demo {
		    width: 32.5%;
		  }
		}
		@media only screen and (max-width: 659px) {
		  .demo {
		    width: 49%;
		  }
		}
		@media only screen and (max-width: 360px) {
		  .demo {
		    width: 100%;
		  }
		}