*{margin:0;}
html,body{ font-family:"微软雅黑"; font-size:12px; width:100%; color:#303030;}
html{overflow-y:scroll;}
td{font-size:12px;}
input{font-size:14px; outline:none;}
select{font-size:12px;}
textarea{ overflow:auto; font-size:12px;}
img{ border:0px;}
ul,li{list-style-type:none;}
ul,li,p,div,input,ol{padding:0px; margin:0px;}
a{text-decoration:none; color:#333; outline-style:none;}
a:hover{ color:#0098fe;}
h1{ font-size:24px;}
h2{ font-size:18px;}
h3{ font-size:14px;}
h4{ font-size:12px;}
.clearboth{ clear:both; width:100%; font-size:0; height:0; overflow:hidden; margin:0; padding:0; line-height:0;}
.clear{width:100%; height:15px; overflow:hidden; clear:both; padding:0; margin:0;}
.clear0{ clear:both; width:100%; font-size:0; height:0px; overflow:hidden; margin:0; padding:0; line-height:0px;}
.clear5{ clear:both; width:100%; font-size:0; height:5px; overflow:hidden; margin:0; padding:0; line-height:5px;}
.clear10{ clear:both; width:100%; font-size:0; height:10px; overflow:hidden; margin:0; padding:0; line-height:10px;}
.clear20{ clear:both; width:100%; font-size:0; height:20px; overflow:hidden; margin:0; padding:0; line-height:20px;}
.clear30{ clear:both; width:100%; font-size:0; height:30px; overflow:hidden; margin:0; padding:0; line-height:30px;}
.clear40{ clear:both; width:100%; font-size:0; height:40px; overflow:hidden; margin:0; padding:0; line-height:40px;}
.clear50{ clear:both; width:100%; font-size:0; height:50px; overflow:hidden; margin:0; padding:0; line-height:50px;}
.fl{ float:left;}
.fr{ float:right;}
.wapper{max-width:1180px;margin:0 auto;}
body{color:#333;}
/*头部*/

.chage_box1{background:url(../images/banner.jpg) no-repeat fixed center center / cover;height:645px;}
.main-box{overflow:hidden;width:100%;}
.header_box{height:79px;border-bottom:1px solid rgba(255,255,255,.15);box-sizing:border-box;}
.header_box .logo{padding-top:22px;width: 164px;height:33px;}
.header_box .logo img{width: 164px;height:33px;}
.header_box .nav a{display:inline-block;height:79px;line-height:79px;padding:0 20px;color:#fff;font-size:15px;}
.header_box .nav a.home,.header_box .nav a:hover{color:#0098fe;}

.fixednav{position:fixed;width:100%;height:79px;background:rgba(0,0,0,.8);z-index:9999;}



.tit{height:100px;line-height:100px;text-align:center;font-size:40px;color:#333;padding-top:15px;}

.banner_box{height:565px;}
.banner_box .banner { max-width: 1180px;width:100%; height: 565px;position: relative; overflow:hidden;  }
.banner_box .banner .swiper-pagination{ overflow:hidden; height: 20px; position: absolute; bottom:50px; left: 0; zoom:1; z-index:3 ;width:100%;text-align:center;}
.banner_box .swiper-pagination span { width: 12px; height: 12px;line-height:12px;text-align:center; background:none; margin-right: 10px;cursor:pointer;display:inline-block;border:1px solid #fff;border-radius:50%;}
.banner_box .swiper-pagination .swiper-pagination-bullet-active { background:#fff;color:#fff; } /*当前项*/
.banner_box .banner h3{text-align:center;color:#fff;font-size:60px;margin-top:165px;}
.banner_box .banner p{text-align:center;color:#8c8c8c;font-size:12px;margin-top:40px;}
.banner_box .banner p a{ color:#0098fe; text-decoration:underline;}
.comtent_box1{background:#fff;padding:0 20px;}
.comtent_box1 .describe{text-align:center;font-size:12px;color:#bbb;line-height:24px;}

.comtent_box1 .comtent_box1_con{padding:0 450px 0 0;position:relative;min-height:260px;font-size: 14px;color: #333;line-height: 24px;}
.comtent_box1 .comtent_box1_con .img{position:absolute;right:0;top:0;width: 416px;height: 210px;}
.comtent_box1 .comtent_box1_con .img img{width: 416px;height: 210px;}


.comtent_box1 .box_l1 img{filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);}
.comtent_box1 .box_l1 img:hover{filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);}

.chage_box2{background:#333;height:600px;padding:0 20px;}
.chage_box2 .tit{color:#fff;}
.chage_box2 .describe{text-align:center;color:#999;line-height:20px;font-size:12px;}

.chage_box2 .box2_list3{width:100%;height:100%;}
.chage_box2 .projec_t1 ul{width:calc(100% + 50px);margin-left:-25px;}
.chage_box2 .projec_t1 ul li{float:left;width:33.33333%;height:220px;padding:0 25px;box-sizing:border-box;}
.chage_box2 .color1{background:rgba(74,147,255,.7);}
.chage_box2 .color2{background:rgba(255,119,85,.7);}
.chage_box2 .color3{background:rgba(139,139,177,.7);margin:0;}
.chage_box2 .box2_list3 .pic{padding-top:25px;width:100%;text-align:center;display:block;}
.chage_box2 .box2_list3 p{line-height:22px;padding:0 40px;color:#fff;text-align:center;font-size:14px;}
.chage_box2 .box2_list3 p a{ color:#FFFFFF; text-decoration: underline;}
.chage_box2 .box2_all{width:100%;height:280px;background:rgba(0,0,0,.7);position:relative;}
.chage_box2 .box2_all i{position:absolute;left:150px;top:-29px;font-size:40px;color:rgba(0,0,0,.7);}
.chage_box2 .box2_all i.i2{left:580px;}
.chage_box2 .box2_all i.i3{left:inherit;right:150px;}

.comtent_box1 .project_box .projec_t{text-align:center;height:40px;line-height:40px;color:#333;font-size:18px;}
.comtent_box1 .project_box .projec_t span{display:inline-block;margin:0 30px;padding:0 5px;}
.comtent_box1 .project_box .projec_t span.none{margin:0;}
.comtent_box1 .project_box .projec_t span.on{border-bottom:3px solid #0099ff;}
.comtent_box1 .p1{position:relative;}
.comtent_box1 .p1 li{float:left;width:66.66666%;height:250px;background:#f5f5f5;position:relative;font-size:0;}

.comtent_box1 .p1 li .show-img{position:relative;display:inline-block;width:50%;vertical-align:top;height:250px;}
.comtent_box1 .p1 li .show-img img{max-width:100%;}
.comtent_box1 .p1 li .show-con{display:inline-block;width:50%;vertical-align:top;}
.comtent_box1 .p1 li:nth-child(3){width:33.333333%;float:right;position:absolute;right:0;top:0;height:500px;}
.comtent_box1 .p1 li:nth-child(3) .show-img{display:block;width:100%;}
.comtent_box1 .p1 li:nth-child(3) .show-con{display:block;width:100%;}
.comtent_box1 .p1 li span{position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;color:#fff;font-size:30px;font-weight:bold;font-family:Arial, Helvetica, sans-serif;text-align:center;height:60px;line-height:60px;}
.comtent_box1 .p1 li h3{padding-left:30px;padding-top:30px;font-size:18px;color:#333;}
.comtent_box1 .p1 li p{font-size:12px;padding:0 30px;color:#666;line-height: 25px;}

.comtent_box1 .p2{width:calc(100% + 20px);text-align:center;margin-left:-10px;}
.comtent_box1 .p2 li{display:inline-block;vertical-align:top;width:380px;position:relative;padding:0 10px;box-sizing:border-box;}
.comtent_box1 .p2 li.none{margin:0;}
.comtent_box1 .p2 li.other{clear:both; width:100%; font-size:0; height:20px; overflow:hidden; margin:0; padding:0; line-height:20px;background:none;}
.comtent_box1 .p2 li a{display:block;position:relative;text-align:center;}
.comtent_box1 .p2 li .cover_layer{background-color:rgba(0,0,0,.7);position:absolute;left:0;top:0;z-index:9;width:100%;height:100%; opacity:0; transition:all 0.5s ease;}
.comtent_box1 .p2 li span{position:absolute;height:32px;line-height:32px;font-size:16px;color:#fff;padding:0;border:1px solid #fff;margin:auto;left:0;right:0;top:0;bottom:0;width:130px;z-index:10;text-align:center;opacity:0; transition:all 0.5s ease;}
.comtent_box1 .p2 li a:hover .cover_layer{opacity:0.7;}
.comtent_box1 .p2 li a:hover span{opacity:1;}

.chage_box3{background:#333;height:360px;}
.cooper-partner{ width: 1180px; height: 360px;position: relative; overflow:hidden;text-align:center;}
.cooper-partner h3{text-align:center;color:#fff;font-size:40px;margin:55px 0;}
.cooper-partner .cooper-partner-list{height:200px;}
.cooper-partner .cooper-partner-list li span{display:inline-block;width:20%;padding:0 20px;box-sizing:border-box;}
.cooper-partner .cooper-partner-list li span img{max-width:100%;}

.cooper-partner .cooper-partner-list .partner-pagination { overflow:hidden; height: 20px; position: absolute; bottom:50px; left: 0; zoom:1; z-index:3 ;width:100%;text-align:center;}
.cooper-partner .cooper-partner-list .partner-pagination span { width: 12px; height: 12px;line-height:12px;text-align:center; background:none; margin-right: 10px;cursor:pointer;display:inline-block;border:1px solid #fff;border-radius:50%;}
.cooper-partner .cooper-partner-list .partner-pagination .swiper-pagination-bullet-active { background:#fff;color:#fff; }



.comtent_box2{background:#eee;padding:40px 0;}
.comtent_box2 .box_cc{background:#fff;padding:0 20px;}
.comtent_box2 .describe{text-align:left;font-size:12px;color:#bbb;line-height:24px;}
.comtent_box2 ul{padding:0;width:calc(100% + 20px);margin-left:-10px;}
.comtent_box2 ul li img{max-width:100%;filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
display:block;
}
.comtent_box2 ul li img:hover{filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);}
.comtent_box2 ul li{float:left;width:25%;padding:0 10px;box-sizing:border-box;}
.comtent_box2 ul li.none{margin:0;}
.comtent_box1 .news_box li{width:50%;padding-left:64px;padding-right:30px;float:left;height:48px;line-height:48px;margin-bottom:25px;font-size:16px;position:relative;box-sizing:border-box;}
.comtent_box1 .news_box li span{position:absolute;left:0;top:0;width:48px;height:48px;float:left;background:#7f7f7f;color:#fff;text-align:center;line-height:48px;margin-right:15px;font-size:16px;}
.comtent_box1 .news_box li a{display:block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

.chage_box4{background:#333;height:460px;}
.chage_box4 .tit{color:#fff;}
.chage_box4 .describe{text-align:center;color:#999;line-height:20px;font-size:12px;}
.chage_box4 .cus_list{max-width:1180px;width:100%;margin:auto;}
.chage_box4 .cus_list li{float:left;width:20%;color:#fff;}
.chage_box4 .cus_list li a{color:#fff;}
.chage_box4 .cus_list li span{display:block;font-size:15px;font-weight:bold;margin-bottom:3px;}
.chage_box4 .cus_list li i{float:left;width:55px;height:40px;text-align:center;line-height:40px;color:#fff;font-size:40px;margin-right:5px;}
.footer{background:#333;color:#999;text-align:center;line-height:24px;font-size:13px;padding:30px 0;}


.overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.73) 17%, rgba(0,0,0,0.66) 35%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.4) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(17%,rgba(0,0,0,0.73)), color-stop(35%,rgba(0,0,0,0.66)), color-stop(62%,rgba(0,0,0,0.55)), color-stop(100%,rgba(0,0,0,0.4))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.73) 17%,rgba(0,0,0,0.66) 35%,rgba(0,0,0,0.55) 62%,rgba(0,0,0,0.4) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
	height: 100%;
	background-attachment: fixed;

}
/*-- slide animations --*/
.slideanim {display: flex;justify-content: center;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide; 
    /* The duration of the animation */
    animation-duration: 1s; 
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    } 
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
.header_box .mobile-nav{
	display:none;
	float:right;
	position:relative;
}
.header_box .mobile-nav-icon{
	width:40px;
	height:40px;
	margin:20px 0 0;
	background:#1975ff;
	position:relative;
}
.header_box .mobile-nav-icon span,
.header_box .mobile-nav-icon:before,
.header_box .mobile-nav-icon:after{
	position:absolute;
	top:20px;
	left:8px;
	height:1px;
	width:24px;
	background:#fff;
	transition:all 0.3s;
}
.header_box .mobile-nav-icon:before{
	content:'';
	top:13px;
}
.header_box .mobile-nav-icon:after{
	content:'';
	top:27px;
}
.header_box .mobile-nav-icon__close:before{
	top:20px;
	transform:rotate(45deg);
}
.header_box .mobile-nav-icon__close:after{
	top:20px;
	transform:rotate(-45deg);
}
.header_box .mobile-nav-icon__close span{
	opacity:0;
}

.header_box .mobile-nav-list{
	position:absolute;
	top:79px;
	right:0;
	width:200px;
	background:rgba(0,0,0,.6);
	padding:15px 0;
	z-index:999;
	opacity:0;
	visibility:hidden;
	transition:all 0.3s;
	transform:translate(0,-15px);
}
.header_box .mobile-nav-list a{
	display:block;
	height:34px;
	line-height:34px;
	color:#fff;
	padding:0 15px;
}
.header_box .mobile-nav-list__show{
	opacity:1;
	visibility:visible;
	transform:translate(0,0);
}



/*响应式*/
@media screen and (max-width:1180px){
	.wapper{
		max-width:100%;
		width:auto;
	}
	.header_box{
		padding:0 30px;
	}
	.banner_box .www51buycom{
		max-width:100%;
		width:auto;
		height:500px;
	}
	.comtent_box1 .p2{
		font-size:0;
	}
	.comtent_box1 .p2 li{
		width:33.3333%;
	}
	.comtent_box1 .p2 li a img{
		max-width:100%;
	}
}
@media screen and (max-width:992px){
	.header_box .nav{
		display:none;
	} 
	.header_box .mobile-nav{
		display:block;
	}
	.chage_box1{
		height:530px;
	}
	.banner_box .banner,
	.banner_box{
		height:450px;
	}
	.banner_box .banner h3{
		margin:110px 0 0;
		font-size:50px;
	}
	.comtent_box1 .comtent_box1_con{
		padding:0 50% 0 0;
	}
	.comtent_box1 .comtent_box1_con .img{
		width:45%;
	}
	.comtent_box1 .comtent_box1_con .img img{
		max-width:100%;	
	}
	.chage_box2 .projec_t1 ul li{
		width:100%;
		margin:0 0 20px;
		float:none;
	}
	.chage_box2{
		height:auto;
		padding-bottom:30px;
	}
	.chage_box4 .cus_list{
		text-align:center;
		padding:0 30px;
		box-sizing:border-box;
	}
	.chage_box4 .cus_list ul{
		font-size:0;
	}
	.chage_box4 .cus_list li{
		width:33.3333%;
		display:inline-block;
		vertical-align:top;
		font-size:12px;
		float:none;
		margin:0 0 30px;
	}
	.chage_box4 .cus_list li p{
		text-align:left;
	}
}
@media screen and (max-width:767px){
	.header_box{
		position:fixed;
		top:0;
		width: 100%;
		height: 79px;
		background: rgba(0,0,0,.8);
		z-index: 9999;
	}
	.chage_box1{
		height:340px;
		padding:80px 0 0;
		box-sizing:border-box;
	}
	.banner_box .banner, 
	.banner_box{
		height:260px;
	}
	.banner_box{
		padding:0 30px;
	}
	.banner_box .banner h3{
		margin: 60px 0 0;
    	font-size: 30px;
	}
	.banner_box .banner p{
		margin:20px 0 0;
	}
	.comtent_box1 .comtent_box1_con{
		padding:0;
	}
	.comtent_box1 .comtent_box1_con .img{
		position:relative;
		left:0;
		width:100%;
		margin:0 0 20px;
	}
	.tit{
		height:60px;
		line-height:60px;
		font-size:24px;
	}
	.comtent_box2 ul li{
		width:50%;
		margin:0 0 20px;
	}
	.comtent_box1 .p1 li{
		width:100%;
		padding:0 0 20px;
		height:auto;
		margin:0 0 20px;
	}
	.comtent_box1 .p1 li .show-img,
	.comtent_box1 .p1 li .show-con{
		width:100%;
		display:block;
	}
	.comtent_box1 .p1 li:nth-child(2){
		position:relative;
		padding:250px 0 20px;
	}
	.comtent_box1 .p1 li:nth-child(2) .show-img{
		position:absolute;
		top:0;
		left:0;
	}
	.comtent_box1 .p1 li:nth-child(3){
		width:100%;
		position:relative;
		height:auto;
	}
	.comtent_box1 .p1 li:nth-child(3) .show-img,
	.comtent_box1 .p1 li:nth-child(3) .show-con{
		display:block;
		width:100%;
	}
	.comtent_box1 .p1 li h3{
		padding-left:10px;
		padding-top:10px;
	}
	.comtent_box1 .p1 li p{
		padding:0 10px;
	}
	.comtent_box1 .p2{
		width:100%;
		margin:0;
	}
	.comtent_box1 .p2 li{
		width:100%;
		padding:0;
		margin:0 0 20px;
	}
	.comtent_box1 .p2 li.other{
		display:none;
	}
	.cooper-partner .cooper-partner-list{
		height:230px;
	}
	.cooper-partner .cooper-partner-list li span{
		width:33.3333%;
		margin:0 0 30px;
	}
	.comtent_box1 .news_box li{
		width:100%;
	}
	.news_box{
		margin:20px 0 0;
	}
	.chage_box4{
		height:auto;
		padding:0 20px;
	}
	.chage_box4 .cus_list li{
		width:100%;
	}
	.chage_box4 .cus_list{
		padding:0;
	}
	.banner_box .banner .swiper-pagination{
		bottom:20px;
	}
}
@media screen and (max-width:480px){

}


/*-- /slide animations --*/

@-moz-document url-prefix(){.chage_box2 .box2_all i{top:-28px;}}