@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
	.pross{margin-bottom: 25px;margin-top: -20px;}
	.pross .pross-c{height: auto; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: relative; padding: 20px 5%; z-index: 444; background: #FFFFFF;}
	.pross .pross-c:before{content: "";position: absolute;left: 0;top: 0; width: 5px;height: 100%;background:#ff6a00}
	.pross .pross-c:after{content: "";position: absolute;bottom: 0;width: 5px;left:0; height: 25%;background: #039a02;}
	
	.pross .pross-c form{width: 100%; height:auto; padding-left: 40px; display: block; overflow: hidden; position: relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	.pross .pross-c form i{width: 30px; height: auto; display: inline-block; position: absolute; left: 0; top:calc(50% - 15px);}
	.pross .pross-c form .sobox{float: left; width:calc(100% - 130px); height: auto; line-height:25px; padding: 10px; border: none; border-bottom:1px solid #dcdcdc;}
	.pross .pross-c form .postsend{float: right; width: 90px; height:auto; line-height: 25px; font-size:0.15rem; padding: 10px 0;color: #FFFFFF;background: #0067b8; font-weight:bold; cursor: pointer;}
	
	/*产品框*/
	.feilei{
		width:100%;
		height:auto;
		margin-top:25px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.feilei li{width:49%; height:auto; margin-bottom:20px; background: #f0f0f0; font-size: 0.15rem; color: #272727; padding:20px 0; text-align:center; font-weight:bold}
	.feilei li a{ display:block}
	.feilei li span{ display:block; width:46px; height:42px; margin:0 auto; background:url(../images/huagong2.png) no-repeat; overflow:hidden; margin-bottom:20px}
	.feilei li:hover span{background:url(../images/huagong2.png) no-repeat left -42px;}
	.feilei li:hover {background-image: url(../images/feilei.png);background-repeat: no-repeat;background-position: center;background-color: #0067b8;background-size: cover;}
	.feilei li:hover a{ color:#FFF}
	
	.probox{ width:100%; height:auto; border-top:1px solid #CCC; margin-top:10px; padding-top:30px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.probox li{width:49%; height:auto; margin-bottom:20px; background: #f0f0f0; font-size:0.14rem; color: #272727; padding:20px 0; text-align:center; position:relative}
	.probox li a{ display:block}
	.probox li span{ display:block; width:32px; height:32px; margin:0 auto; background:url(../images/hg32.png) no-repeat; overflow:hidden; margin-bottom:10px}
	.probox li:hover span{background:url(../images/hg32.png) no-repeat left -32px;}
	.probox li:hover{ background-color:#0067b8}
	.probox li:hover a{ color:#FFF}
	.probox li:hover:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #ff6a00;
		width: 5px;
		height: 100%;
		z-index: 1;
	}
	.probox li:hover:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #039a02;
		height: 30%;
		z-index: 2;
	}
	
	.p50{ padding:22px; box-shadow: 0px 2px 5px #C8C8C8; margin-top:30px; background:#FFFFFF url(../images/p50.jpg) no-repeat right top;  position:relative}
	.p50:before {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		background: #ff6a00;
		width:20px;
		height: 100%;
		z-index: 1;
	}
	.p50:after {
		content: "";
		position: absolute;
		right: 20px;
		bottom: 0;
		width: 5px;
		background: #039a02;
		height: 100%;
		z-index: 2;
	}
	
	.nrbox{ width:93%; height:auto; margin-left:0; margin-top:30px; border-top: 1px solid #CCC; padding-top:30px;}
	
	.biaoti{ width:100%; height:auto; position:relative}
	.biaoti em{ display:block; font-size:0.14rem; text-indent:18px; text-transform:Uppercase;}
	.biaoti span{ display:block; font-size:0.20rem; font-weight:bold; margin-top:5px; text-indent:18px}
	.biaoti:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #ff6a00;
		width: 5px;
		height: 100%;
		z-index: 1;
	}
	.biaoti:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #039a02;
		height: 40%;
		z-index: 2;
	}
}

/*当页面大于992px时候*/
@media screen and (min-width:992px){
	.pross{margin-bottom: 25px;margin-top: -45px;}
	.pross .pross-c{height: auto; box-shadow: 0 0 10px rgba(0,0,0,0.2); position: relative; padding: 25px 5%; z-index: 444; background: #FFFFFF;}
	.pross .pross-c:before{content: "";position: absolute;left: 0;top: 0; width: 5px;height: 100%;background:#ff6a00}
	.pross .pross-c:after{content: "";position: absolute;bottom: 0;width: 5px;left:0; height: 25%;background: #039a02;}
	
	.pross .pross-c form{width: 100%; height:auto; padding-left: 40px; display: block; overflow: hidden; position: relative; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	.pross .pross-c form i{width: 30px; height: auto; display: inline-block; position: absolute; left: 0; top:calc(50% - 15px);}
	.pross .pross-c form .sobox{float: left; width:calc(100% - 180px); height: auto; line-height:25px; padding: 10px; border: none; border-bottom:1px solid #dcdcdc;}
	.pross .pross-c form .postsend{float: right; width: 140px; height:auto; line-height: 25px; font-size:18px; padding: 10px 0;color: #FFFFFF;background: #0067b8; font-weight:bold; cursor: pointer;}
	
	/*产品框*/
	.feilei{
		width:100%;
		height:auto;
		margin-top:40px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.feilei li{width:32%; height:auto; margin-bottom:40px; background: #f0f0f0; font-size: 28px; color: #272727; padding:40px 0; text-align:center; font-weight:bold}
	.feilei li a{ display:block}
	.feilei li span{ display:block; width:66px; height:60px; margin:0 auto; background:url(../images/huagong.png) no-repeat; overflow:hidden; margin-bottom:30px}
	.feilei li:hover span{background:url(../images/huagong.png) no-repeat left -60px;}
	.feilei li:hover {background-image: url(../images/feilei.png);background-repeat: no-repeat;background-position: center;background-color: #0067b8;background-size: cover;}
	.feilei li:hover a{ color:#FFF}
	.feilei li.active {background-image: url(../images/feilei.png);background-repeat: no-repeat;background-position: center;background-color: #0067b8;background-size: cover;}
	.feilei li.active span{ color:#FFF; background:url(../images/huagong.png) no-repeat center -60px;}
	.feilei li.active a{ color:#FFF}
	
	.probox{ width:100%; height:auto; border-top:1px solid #CCC; margin-top:10px; padding-top:50px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		-webkit-flex-wrap:wrap;/*一行排不下则换行，第一行在上方*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.probox li{width:16%; height:auto; margin-bottom:20px; background: #f0f0f0; font-size:16px; color: #272727; padding:30px 0; text-align:center; position:relative}
	.probox li a{ display:block}
	.probox li span{ display:block; width:32px; height:32px; margin:0 auto; background:url(../images/hg32.png) no-repeat; overflow:hidden; margin-bottom:20px}
	.probox li:hover span{background:url(../images/hg32.png) no-repeat left -32px;}
	.probox li:hover{ background-color:#0067b8}
	.probox li:hover a{ color:#FFF}
	.probox li:hover:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #ff6a00;
		width: 5px;
		height: 100%;
		z-index: 1;
	}
	.probox li:hover:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #039a02;
		height: 30%;
		z-index: 2;
	}
	
	.p50{ padding:50px; box-shadow: 0px 2px 5px #C8C8C8; margin-top:50px; background:#FFFFFF url(../images/p50.jpg) no-repeat right top; position:relative}
	.p50:before {
		content: "";
		position: absolute;
		right: 0;
		top: 0;
		background: #ff6a00;
		width:70px;
		height: 100%;
		z-index: 1;
	}
	.p50:after {
		content: "";
		position: absolute;
		right: 70px;
		bottom: 0;
		width: 5px;
		background: #039a02;
		height: 100%;
		z-index: 2;
	}
	
	.nrbox{ width:93%; height:auto; margin-left:0; margin-top:50px; border-top: 1px solid #CCC; padding-top: 50px;}
	
	.biaoti{ width:100%; height:auto; position:relative}
	.biaoti em{ display:block; font-size:14px; text-indent:18px; text-transform:Uppercase;}
	.biaoti span{ display:block; font-size:22px; font-weight:bold; margin-top:5px; text-indent:18px}
	.biaoti:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #ff6a00;
		width: 5px;
		height: 100%;
		z-index: 1;
	}
	.biaoti:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #039a02;
		height: 40%;
		z-index: 2;
	}
}