@charset "utf-8";

/*幻灯片CSS*/
#banner {
	width: 100%;
	position: relative;
}
#banner .hd {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	font-size: 0;
	transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	-moz-transform: translate(-50%,0);
	-o-transform: translate(-50%,0);
}
#banner .hd li {
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	display: inline-block;
	margin: 0 5px;
	cursor: pointer;
	border-radius: 10px;
}
#banner .hd .on {
	background-color: #ff3600;
	border: 3px solid #FFFFFF;
}
#banner .bd a {
	display: block;
	width: 100%;
	height: 620px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}


.yingyong{ padding-top: 50px;}
.yingyong ul{ 
	width: 100%; 
	margin-top: 80px; 
	margin-bottom: 80px;
	text-align: center;
}
.yingyong ul li{ 
	width: 170px; 
	height: 170px; 
	display: inline-flex;
	margin: 0px 35px;
	border: 1px solid #ff7956;
	text-align: center;
	color: #333333;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.yingyong ul li:hover{ background: #ff3600; color: #FFFFFF;}
.yingyong ul li:before{
	position: absolute;
	width: 155px;
	height: 155px;
	border: 1px solid #ffccbe;
	display: block;
	content: '';
	left: 5px;
	top: 5px;
}
.yingyong ul li:hover:before{ display: none;}
.yingyong ul li div{ 
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	width: 100%;
	text-align: center;
}
.yingyong ul li div dd{ height: 80px; margin-top: 20px; margin-bottom: 20px;}
.yingyong ul li div dd img{ height: 100%;}
.yingyong ul li div h4{ font-size: 16px;}


.product{ background: #f5f5f5; padding: 70px 0px;}
.product .title{ text-align: left; width: 310px;}
.product .title h2{ text-align: left;}
.product .title:before{
	content: '';
	position: absolute;
	height: 2px;
	width: 60px;
	background: #ff3600;
	bottom: 0px;
	left:0px;
}
.product .proMenu dt:nth-child(2){
	width: 120px;
}
.product .proMenu dt:nth-child(2) a{ 
	display: block; 
	text-align: center; height: 35px; line-height: 35px;
	border:1px solid #ff3600;
	margin-bottom: 10px;
	font-size: 16px;
	color: #333333;
	cursor: pointer;
}
.product .proMenu dt:nth-child(2) a.active{
	background: #ff3600;
	color: #FFFFFF;
}
.product .proMenu dt:nth-child(2) a:hover{
	background: #ccc;
	color: #000;
}
.product .proMenu dt:nth-child(3){
	width: calc(100% - 450px);
}
.product .proMenu dt:nth-child(3) a{ 
	line-height: 30px; 
	font-size: 16px; padding-right:30px; color: #333333;
	white-space:nowrap;
}
.product .proMenu dt:nth-child(3) div{
	/*display: none;*/
}
.product .proMenu dt:nth-child(3) div:nth-child(1){
	display: block;
}

.product .prolist{ margin-top: 30px;}
.product .prolist ul li{ 
	width: calc((100% - 120px) / 4); float: left;
	margin-right: 40px;
	margin-bottom: 20px;
	
}
.product .prolist ul li:nth-child(4n){ margin-right: 0px;}
.product .prolist ul li dd{ height: 300px; padding: 15px; background: #FFFFFF; overflow: hidden;/*box-shadow: 0 0 5px #ccc;*/}
.product .prolist ul li dd img{ height: 100%; width: auto;}
.product .prolist ul li h4{ text-align: center; line-height:25px; padding: 10px 0px;}
.product .prolist ul li:hover dd{box-shadow: 0 0 10px #5E5E5E;}
.product .prolist ul li:hover  h4{ color: #ff3600;}


.about{ padding: 70px 0px;}
.about .title h2{text-align: left; height: 30px; line-height: 30px;}
.about .title p{ color: #c7c7c7; font-size: 12px; text-align: left; line-height: 25px; }
.about .title:before{
	content: '';
	position: absolute;
	height: 2px;
	width: 60px;
	background: #ff3600;
	bottom: 0px;
	left:0px;
}
.about .fl{ width: 50%; text-align: left;}
.about .fl img{ width: 100%; }
.about .fr{ width: 47%;}

.about .acontent{ margin-top: 20px; }
.about .acontent dd{ text-align: left; line-height: 25px; color: #5e5e5e; }
.about .acontent a{
	width: 150px; height: 40px; line-height: 40px; 
	text-align: center; color: #ff3600; display: block; letter-spacing: 1px; 
	margin-top: 50px;
	border: 1px solid #ff3600;
}


.news{ background: #f5f5f5; padding: 70px 0;}
.news ul{ margin-top: 50px; }
.news ul li{
	width: calc((100% - 40px) / 2);
	background: #FFFFFF;
	margin-right: 40px;
	padding: 20px;
	float: left; 
	margin-bottom: 40px;
	cursor: pointer;
	position: relative;
}
.news ul li:nth-child(2n){ margin-right: 0;}
.news ul li:hover{box-shadow: 0 0 10px #5E5E5E;}

.news ul li dd:nth-child(1){ width: 170px; height: 170px; float: left; font-size: 0; overflow: hidden;}
.news ul li dd:nth-child(1) img{ height: 100%; width: auto;}
.news ul li dd:nth-child(2){ width: calc(100% - 190px); float: right;}
.news ul li dd:nth-child(2) h4{ 
	font-size: 20px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	margin-bottom: 20px;
}
.news ul li dd:nth-child(2) p{ 
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	color: #7c7c7c;
	line-height: 25px;
}
.news ul li dd:nth-child(2) time{
	background: url(../images/time.png) left no-repeat;
	padding-left: 20px;
	position: absolute;
	bottom: 20px;
	color: #7c7c7c;
}
.news ul li:hover{ box-shadow: 0 0 10px #5E5E5E;}


.problem{ padding: 70px 0;}
.problem ul{ margin-top: 30px;}
.problem ul li{ 
	width:  calc((100% - 160px) / 3);
	float: left;
	margin-right: 80px;
	margin-bottom: 50px;
}
.problem ul li:nth-child(3n){ margin-right: 0px;}
.problem ul li dd:nth-child(1){ 
	width: 90px; height: 90px; 
	float: left; 
	border-radius: 90px; border: 1px solid #333333;
	text-align: center;
	
}
.problem ul li dd:nth-child(1) span{ display: block; font-size: 34px; margin-top: 5px;}
.problem ul li dd:nth-child(2){ width: calc(100% - 100px); float: right;}
.problem ul li dd:nth-child(2) h4{ 
	font-size: 20px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	margin-bottom: 10px;
}
.problem ul li dd:nth-child(2) p{ 
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: #7c7c7c;
	line-height: 25px;
}
.problem ul li:hover dd:nth-child(1){ background: #ff3600; border: none; color: #FFFFFF;}
.problem ul li:hover dd:nth-child(2) h4{color: #ff3600;}


.case{ background: #f5f5f5; padding: 70px 0;}

.case ul{ margin-top: 30px;}
.case ul li{ 
	width: 325px; height: 280px;
	float: left; 
	margin-right: 40px; margin-bottom: 40px;
	position: relative;
	background: #0000FF;
	overflow: hidden;
}
.case ul li:nth-child(1){ width: 440px; height: 600px; background: #FF0000;}
.case ul li:nth-child(3),.case ul li:nth-child(5){ margin-right: 0;}
.case ul li img{height: 100%; width: auto;}
.case ul li h4{ 
	position: absolute; bottom: 0;
	width: 100%; height: 40px; line-height: 40px;
	text-align: center;
	background: rgba(80,80,80,0.7);
	color: #FFFFFF;
}
.case ul li:hover h4{ background: rgba(255,7,7,0.7);}


.hzBrand{ padding: 70px 0;}
.hzBrand .title{ margin-bottom: 50px;	 }
.hzBrand ul{margin-top: 50px; width: 100%;}
.hzBrand ul li{ 
	width: calc((100% - (2% * 3)) / 4);
	margin-right: 2%;
	margin-bottom: 2%;
	float: left; 
	text-align: center; 
	background: #fff;
	border:1px solid #cccccc;
	height: 120px;
	overflow: hidden;
	padding: 10px;
}
/*	*/
.hzBrand li img{
	height: 100%;
	transition: all .35s;
}
.hzBrand li:hover img{
	transform: translate(0,0) scale(1.3);
	-ms-transform: translate(0,0) scale(1.3);
	-o-transform: translate(0,0) scale(1.3);
	-moz-transform: translate(0,0) scale(1.3);
	-webkit-transform: translate(0,0) scale(1.3);
}

.link{ padding: 0px 0px 100px 0px;}

.linklist{
	width: calc(100%);
	margin-top: 20px;
}
.linklist a{ 
	line-height: 30px; 
	font-size: 16px; padding-right:30px; color: #333333;
	white-space:nowrap;
}