@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
.base-crumbs{
    width: 100%;
    height:auto;
    background-color: #f6f6f6;
}
.title_202110{font-size: 0.28rem; line-height: 1.2rem;}
.title_202110 a{color:#666; margin-right:10px;}
.title_202110 a:hover{ color:#dd0000}
.title_202110 a+a:before{ padding-right:10px; color:#999999; content: ">";}

/*以下是主体部分*/
.left_right{width:100%; height:auto; margin-top:10px; overflow:hidden}
.left_right .l_left{width:100%; height:auto}
.left_right .l_right{width:100%; height:auto;}

/*标题*/
.biaoti{ display:none}

/*左侧分类*/
.fl_menu{width:100%; height:auto;}
.fl_menu li{font-size: 0.28rem; line-height:0.9rem; background:url(../img/jt.jpg) no-repeat right 10px center; padding:0 10px}
.fl_menu li+li{border-top:1px solid #E6E6E6;}
.fl_menu li a{display:block;}
.fl_menu li.active{background-color:#F5F5F5; font-weight:bold; }
.fl_menu li.active a{color:#f36f2e;}

/*新闻*/
.ul_news{width:100%; height:auto; margin-top: 0.5rem;}
.ul_news li{width:100%; height:1.2rem; line-height:1.2rem; font-size: 0.38rem; color:#999999; overflow:hidden}
.ul_news li+li{border-top:1px solid #E6E6E6;}
.ul_news li p{float:left; width:73%; height:auto; color:#999; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.ul_news li span{ float:right; color:#999;}

/*相关产品前6个*/
.pro_tj{width:100%; height:auto; overflow:hidden; margin-top:30px; }
.pro_tj li{float:left; width:48%; height:auto; margin-right:4%; margin-bottom:15px; position: relative; border:1px solid #EBEBEB; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.pro_tj li img{display:block; width:100%; height:100%; max-width:100%;}
.pro_tj li h2{ position:absolute; left:0; bottom:0; right:0; height:0.7rem; line-height:0.7rem; color:#FFF; text-align:center; font-size:0.26rem; font-weight:100; background-color:#333;  overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis; padding:0 10px}
.pro_tj li:hover h2{ background-color:#000}
.pro_tj li:nth-of-type(2n+0){margin-right:0px;}
/*产品前6个end*/

/*弹性布局产品*/
.prolist{
	width:100%;
	height:auto;
	margin-top:0.5rem;
	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;}
.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; line-height:0.9rem; text-align: center; font-size:0.26rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.prolist li a{ display:block}
/*产品框_end*/

/*产品详情标题*/
.product_list{height:0.6rem; line-height:0.6rem; background-color:#f3f3f3; margin-top:30px; font-size:0.26rem; font-weight:bold; text-indent:30px; position:relative;}
.product_list:before{content: ""; width:5px; height:0.25rem; background-color:#037773; position:absolute; left:10px; top:0.18rem}

/*产品框*/
.box_product{
	width:100%;
	height:auto;
	margin-top: 0.5rem;
	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.4rem; text-align:center; font-size: 0.12rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.box_product li:hover p{color:#ff6a00}
/*产品框_end*/

/*相关图片*/
.pic_xg{width:100%; height:auto; margin-top:20px;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.pic_xg li{width:49%; height:auto; margin-bottom:15px; position:relative; border:1px solid #EBEBEB}
.pic_xg li img{display:block; width:100%; height:auto;}
.pic_xg li span{display:block; position:absolute; left:0; bottom:0; color:#FFF; width:100%; height:0.9rem; line-height:0.9rem; background:rgba(0,0,0,0.4); z-index:1; font-size:0.12rem; text-align:center; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
/*相关图片_end*/

}

/*当页面大于992px时候*/
@media screen and (min-width:992px){
/*标题*/
.base-crumbs{
    width: 100%;
    height:auto;
    background-color: #f6f6f6;
}
.title_202110{font-size: 0.1042rem; line-height: 0.47rem;}
.title_202110 a{color:#666; margin-right:10px;}
.title_202110 a:hover{ color:#dd0000}
.title_202110 a+a:before{ padding-right:10px; color:#999999; content: ">";}

/*用于左右分开，左侧用于分类*/
.left_right{width:100%; height:auto; overflow:hidden; margin-top: 0.3rem;}
.left_right .l_left{float:left; width:15%; height:auto;}
.left_right .l_right{float:right; width:82%; height:auto;}

/*用于左右分开，左侧用于分类*/
.left_right2{width:100%; height:auto; overflow:hidden; margin-top: 0.3rem;}
.left_right2 .l_left2{float:left; width:25%; height:auto;}
.left_right2 .l_right2{float:right; width:72%; height:auto;}

/*标题*/
.biaoti{font-size:0.18rem; font-weight:500; color:#f36f2e; position:relative;}
.biaoti:before{content: ""; width:60px; height:3px; background-color:#f36f2e; position:absolute; left:0; top:0.29rem}

/*左侧分类*/
.fl_menu{width:100%; height:auto; padding-bottom:0.3rem}
.fl_menu li{font-size: 0.12rem;}
.fl_menu li+li{ margin-top:0.12rem}
.fl_menu li a:hover{ color:#f36f2e}
.fl_menu li.active a{color:#f36f2e; position:relative;}
.fl_menu li.active a:before{content: ""; width:60px; height:3px; background-color:#f36f2e; position:absolute; left:0; top:0.2rem}

/*新闻*/
.ul_news{width:100%; height:auto; margin-top: 0.3rem;}
.ul_news li{width:100%; height:0.26rem; line-height: 0.26rem; font-size:0.10rem; color:#999999; overflow:hidden}
.ul_news li+li{border-top:1px solid #E6E6E6;}
.ul_news li p{float:left; width:85%; height:auto; color:#999; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.ul_news li span{float:right; color:#999;}

/*相关产品前5个*/
.pro_tj{width:100%; height:auto; margin-top:0.2rem; display:flex; display: -webkit-flex; /*启用弹性布局*/ flex-direction:row;/*从左到右排*/}
.pro_tj li{width:100%; height:auto; position: relative; margin-right:10px; border:1px solid #EBEBEB; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; }
.pro_tj li img{display:block; width:100%; height:auto}
.pro_tj li h2{ position:absolute; left:0; bottom:0; right:0; height:0.23rem; line-height:0.23rem; color:#FFF; text-align:center; font-size:0.08rem; font-weight:100; background-color:#333; opacity: 0.7; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis; padding:0 10px}
.pro_tj li:hover h2{ background-color:#000}
.pro_tj li:last-child{ margin-right:0}
/*产品前5个end*/

/*弹性布局产品*/
.prolist{
	width:100%;
	height:auto;
	margin-top:0.3rem;
	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:31.5%; height:auto; margin-bottom:30px; background-color:#FFF;}
.prolist li span{display:block; width:100%; height:auto; overflow:hidden; position:relative; display: flex; justify-content: center;}
.prolist li span img{width:100%; height:auto;}
.prolist li p{ width:95%; height:auto; margin:0 auto; margin-top:10px; text-align: center; font-size:0.10rem; line-height:0.18rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.prolist li a{ display:block}
.prolist li span:after{
	  content:"";
	  width:0px;
	  height:100%;
	  position:absolute;
	  transform:skew(45deg);
	  background:rgba(255,255,255,0.2);
	  z-index:9999;
	  transition: all 1s;
}
.prolist li:hover span:after{width:700px;}
/*产品框_end*/

/*产品详情标题*/
.product_list{height:0.26rem; line-height:0.26rem; background-color:#f3f3f3; margin-top:30px; font-size:0.10rem; font-weight:bold; text-indent:30px; position:relative;}
.product_list:before{content: ""; width:5px; height:0.09rem; background-color:#f36f2e; position:absolute; left:10px; top:0.09rem}

/*产品框*/
.box_product{
	margin-top: 0.3rem;
	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: 0.10rem; 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*/

/*相关图片,图片详情下面*/
.pic_xg{
	width:100%;
	height:auto;
	margin-top:20px;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.pic_xg li{width:23.5%; height:auto; margin-bottom:20px; text-align:center; position:relative; border:1px solid #EBEBEB}
.pic_xg li img{display:block; width:100%; height:auto;}
.pic_xg li p{ position:absolute; left:0; top:100%; width:100%; height:100%; background:rgba(0,0,0,0.4); transition: 0.5s all ease}
.pic_xg li:hover p{top:0; }
.pic_xg li span{ display:block; position:absolute; left:0; bottom:0; color:#FFF; width:100%; height:0.3rem; line-height:0.3rem; background:rgba(0,0,0,0.4); z-index:1; font-size:0.1rem; transition: 0.5s all ease; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.pic_xg li:hover span{bottom:43%; background:none;}
/*相关图片_end*/
}