﻿@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
	/*标题专用*/
	.view_title{ width:100%; height:0.5rem; line-height:0.5rem; background: #f1f4f8;}
	.view_title a{ color:#666; margin-right:10px;}
	.view_title a:hover{ color:#dd0000}
	.view_title a+a:before{ padding-right:10px; color:#999999; content: "/";}

	/*分类菜单*/
	.fl_menu{width:100%; height:0.6rem; overflow:hidden; border-bottom: 1px solid #e3e3e3}
	.menu_fl{
		display: -webkit-box;/*启用横列布局*/
		overflow-x: scroll;/*裁剪内容提供滚动条*/
	}
	/*去掉滚动条*/
	.menu_fl::-webkit-scrollbar{
		width:0; 
		height:0; 
		display: none;
	}
	.menu_fl li {line-height:0.6rem; margin-right:15px}
	.menu_fl li a{display:block; font-size:0.16rem; color:#666670; font-weight:400; position:relative}
	.menu_fl li a:after{content: ""; width:0px; height:3px; background-color:#c9151e; position:absolute; left:0; bottom:0px; transition:all 0.5s;}
	.menu_fl li:hover a,.menu_fl li.active a,.menu_fl li:hover a:after,.menu_fl li.active a:after{text-decoration:none; color:#c9151e; width:100%; font-weight:bold}

	/*弹性布局产品*/
	.prolist{
		width:100%;
		height:auto;
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.prolist li{width:49%; height:auto; margin-bottom:0.15rem; padding:7px; background-color:#FFF; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
	.prolist li span{display:block; width:100%; height:auto; overflow:hidden;}
	.prolist li span img{width:100%; height:auto;}
	.prolist li p{ width:95%; height:auto; margin:0 auto; text-align: center; font-size:0.16rem; padding:10px 0px 7px 0px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.prolist li a{ display:block}
	/*产品框_end*/

	/*以下是主体部分*/
	.left_right{margin-top:20px; overflow:hidden}
	.left_right .l_left{width:100%; height:auto}
	.left_right .l_right{width:100%; height:auto; margin-top:40px;}
	
	/*产品名字*/
	.pro_name{font-size:0.18rem; line-height:0.35rem; font-weight:bold; color:#333; padding-bottom:10px; border-bottom: 1px solid #ebebeb;}
	
	/*产品详情标题*/
	.product_list{height:0.45rem; line-height:0.45rem; background-color:#f3f3f3; margin-top:30px; font-size:0.16rem; font-weight:bold; text-indent:30px; position:relative;}
	.product_list:before{content: ""; width:5px; height:0.25rem; background-color:#c9151e; position:absolute; left:10px; top:10px}
	
	/*同类产品*/
	.pro_list{ width:100%; height:auto; margin-top:10px; }
	.pro_list li{ height:0.4rem; line-height:0.4rem; font-size:0.14rem;}
	.pro_list li+li{border-top:1px solid #E6E6E6;}
	.pro_list li a{ display:block; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	
	/*产品框*/
	.box_product{
		width:100%;
		height:auto;
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.box_product li{width:48.5%; height:auto; margin-bottom:0px;}
	.box_product li span{display:block; width:100%; height:auto; overflow:hidden;}
	.box_product li span img{width:100%; height:auto;}
	.box_product li p{color:#002469; padding:0.15rem; text-align:center; font-size:0.14rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.box_product li:hover p{color:#ff6a00}
	/*产品框_end*/
	
	/*新闻*/
	.ul_news{ padding:7px; overflow:hidden;}
	.ul_news li{ padding:15px; height:auto; border:1px solid #e7eaf1; box-shadow:0px 0px 10px #dddbdb; border-radius: 5px; margin-bottom:20px}
	.ul_news li h4{ font-size:0.17rem; font-weight:400; height:auto; line-height:0.32rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.ul_news li h4 a{ color:#333333}
	.ul_news li h4 a:hover{ color:#FF0000}
	.ul_news li p{ font-size:0.14rem; color:#999999; margin-top:10px; height:auto; line-height:26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
	.ul_news li span{color: #a3afb7; font-size:0.14rem; display:inline-table; margin-top:10px}
	.ul_news li i{color: #a3afb7; font-size:0.14rem; display:inline-table; margin-top:10px; background:url(../images/click.png) no-repeat left center; padding-left:26px; margin-left:20px;}
	.ul_news li em{ color:#c9151e; display:block; margin-top:20px; background: url(../images/arrow3.png) no-repeat left 70px center;  transition: 0.4s all ease}
	.ul_news li:hover em{background: url(../images/arrow3.png) no-repeat left 80px center; }

}

/*当页面大于992px时候*/
@media screen and (min-width:992px){	
	/*标题专用*/
	.view_title{ width:100%; height:80px; line-height:80px; background: #f1f4f8;}
	.view_title a{ color:#666; margin-right:10px; font-size:16px}
	.view_title a:hover{ color:#dd0000}
	.view_title a+a:before{ padding-right:10px; color:#999999; content: ">";}
		
	/*分类菜单*/
	.fl_menu{width:100%; height:70px; overflow:hidden; border-bottom: 1px solid #e3e3e3}
	.menu_fl {width:100%; height:70px; text-align:left; overflow:hidden;}
	.menu_fl li {display:inline-block; line-height:70px; margin-right:30px;}
	.menu_fl li a{display:block; font-size:16px; color:#666670; font-weight:400; position:relative}
	.menu_fl li a:after{content: ""; width:0px; height:3px; background-color:#c9151e; position:absolute; left:0; bottom:0px; transition:all 0.5s;}
	.menu_fl li:hover a,.menu_fl li.active a,.menu_fl li:hover a:after,.menu_fl li.active a:after{text-decoration:none; color:#c9151e; width:100%; font-weight:bold}

	/*弹性布局产品*/
	.prolist{
		width:100%;
		height:auto;
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.prolist li{width:23.5%; height:auto; margin-bottom:30px; background-color:#FFF; padding:10px; }
	.prolist li span{display:block; width:100%; height:auto; overflow:hidden;}
	.prolist li span img{width:100%; height:auto;}
	.prolist li p{ width:95%; height:auto; margin:0 auto; text-align: center; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; padding:15px 0px 8px 0px;  font-size:18px; font-weight: bold; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.prolist li a{ display:block}
	.prolist li:hover { border:1px solid #c9151e;}
	/*产品框_end*/
	
	/*用于左右分开，左侧用于分类*/
	.left_right{margin-top:30px; overflow:hidden}
	.left_right .l_left{float:left; width:70%; height:auto; border-right: 1px solid #e4e4e4;}
	.left_right .l_right{float:right; width:28%; height:auto;}
	
	/*产品名字*/
	.pro_name{ width:97%; height:auto; margin-left:0; font-size:24px; line-height:45px; font-weight:bold; color:#333; padding-bottom:20px; border-bottom: 1px solid #ebebeb;}
	
	/*产品详情标题*/
	.product_list{height:45px; line-height:45px; background-color:#f3f3f3; margin-top:50px; font-size:18px; font-weight:bold; text-indent:30px; position:relative;}
	.product_list:before{content: ""; width:5px; height:25px; background-color:#c9151e; position:absolute; left:10px; top:10px}
	
	/*同类产品*/
	.pro_list{ width:100%; height:auto; margin-top:10px; }
	.pro_list li{ height:45px; line-height:45px; font-size:14px;}
	.pro_list li+li{border-top:1px solid #E6E6E6;}
	.pro_list li a{ display:block; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
		
	/*产品框*/
	.box_product{
		padding:12px;
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.box_product li{width:23.5%; height:auto; margin-bottom:40px; box-shadow: 0 0 10px 5px #d8d8d8; position:relative; }
	.box_product li span{display:block; width:100%; height:auto; overflow:hidden;}
	.box_product li span img{width:100%; height:auto;}
	.box_product li p{padding:20px; text-align:center; font-size:16px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.box_product li:hover p{color:#ff6a00}
	.box_product li:before{content: ""; position:absolute; bottom:-12px; width:100%; height:5px; background-color:#ff6a00; transition: 0.4s all ease}
	.box_product li:hover:before{bottom:0px;}
	/*产品框_end*/
		
	/*新闻*/
	.ul_news{
		height:auto;
		padding:12px;
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.ul_news li{width:32%; height:auto; padding:30px; border:1px solid #e7eaf1; box-shadow:0px 0px 10px #dddbdb; border-radius: 5px; margin-bottom:40px; transition:transform 0.5s; -webkit-transition:transform 0.5s; }
	.ul_news li h4{ font-size:22px; font-weight:100; height:auto; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.ul_news li h4 a{ color:#333333}
	.ul_news li h4 a:hover{ color:#FF0000}
	.ul_news li p{ font-size:16px; color:#999999; margin-top:10px; height:auto; line-height:27px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
	.ul_news li span{color: #a3afb7; font-size: 16px; display:inline-table; margin-top:10px}
	.ul_news li i{color: #a3afb7; font-size: 16px; display:inline-table; margin-top:10px; background:url(../images/click.png) no-repeat left center; padding-left:26px; margin-left:20px;}
	.ul_news li:hover{transform:translateY(-6px); -webkit-transform:translateY(-6px);}
	.ul_news li em{ color:#c9151e; display:block; margin-top:20px; background: url(../images/arrow3.png) no-repeat left 70px center;  transition: 0.4s all ease}
	.ul_news li:hover em{background: url(../images/arrow3.png) no-repeat left 80px center; }
	

}