@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
	.industry{
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.industry li{width:49%; height:auto; margin-bottom:20px; overflow:hidden; position:relative}
	.industry li img{width:100%; height:auto;}
	.industry li p{ position:absolute; left:0; right:0; bottom:20px; width:85%; height:auto; margin:0 auto; font-size:0.14rem; text-shadow:2px 2px #000000; font-weight:bold; color:#FFF; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.industry li a{ display:block}
	
	.biaoti{ width:100%; height:auto; position:relative}
	.biaoti em{ display:block; font-size:0.14rem; text-indent:18px}
	.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: #1fa753;
		width: 5px;
		height: 100%;
		z-index: 1;
	}
	.biaoti:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #3057fd;
		height: 40%;
		z-index: 2;
	}
	
	.nrbox{height: auto; background: #ecf7f1; margin-top:20px; padding:20px}
}

/*当页面大于992px时候*/
@media screen and (min-width:992px){
	/*弹性布局产品*/
	.industry{
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.industry li{width:23.5%; height:auto; margin-bottom:30px; overflow:hidden; position:relative}
	.industry li img{width:100%; height:auto;}
	.industry li p{ position:absolute; left:0; right:0; bottom:23px; width:85%; height:auto; margin:0 auto; font-size:18px; text-shadow:2px 2px #000000; font-weight:bold; color:#FFF; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.industry li a{ display:block}
	.industry li:hover:before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: #1fa753;
		width: 10px;
		height: 100%;
		z-index: 1;
	}
	.industry li:hover:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 10px;
		background: #3057fd;
		height: 20%;
		z-index: 2;
	}
	/*产品框_end*/
	
	.biaoti{ width:100%; height:auto; position:relative}
	.biaoti em{ display:block; font-size:14px; text-indent:18px}
	.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: #1fa753;
		width: 5px;
		height: 100%;
		z-index: 1;
	}
	.biaoti:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 5px;
		background: #3057fd;
		height: 40%;
		z-index: 2;
	}
	
	.nrbox{height: auto; background: #ecf7f1; margin-top:30px; padding:30px}
}