@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
	/*分类菜单*/
	.fl_menu{width:100%; height:0.5rem; line-height:0.5rem; overflow:hidden; background-color: rgba(238,242,245,1); border-bottom: 1px solid #ccc;}
	.fl_menu .l{width:100%; height:auto}
	.fl_menu .r{ display:none}
	
	.fl_menu em{position:relative}
	.fl_menu em a{ color:#666; margin-right:10px;}
	.fl_menu em a:hover{ color:#00459d}
	.fl_menu em a+a:before{ padding-right:10px; color:#999999; content: "/";}

	/*分类菜单*/
	.menu_fl{
		display: -webkit-box;/*启用横列布局*/
		overflow-x: scroll;/*裁剪内容提供滚动条*/
	}
	/*去掉滚动条*/
	.menu_fl::-webkit-scrollbar{
		width:0; 
		height:0; 
		display: none;
	}
	.menu_fl li {line-height:0.5rem; 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:#00459d; 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:#00459d; width:100%; font-weight:bold}
	
	/*以下是主体部分*/
	.left_right{overflow:hidden}
	.left_right .l_left{width:100%; height:auto}
	.left_right .l_right{width:100%; height:auto; margin-top:20px}
	
	.pc_fl{ display:none}
	
	.m_fl{width:100%; height:0.45rem; line-height:0.45rem; background: #013b87; text-indent:10px; font-size:0.16rem; color:#fff; margin-bottom:10px; position:relative}
	
	.donghua {width:30px; height: 20px; position:absolute; right:10px; top:10px}
	.dhdh {width: 100%; height:3px; position: relative; margin:4px 0}
	.dhdh:before {animation: dhxg 1s linear 0s infinite alternate; position: absolute; left:0; top:0; width: 100%; height:4px; background:#FFFFFF; content: ""; display: block; opacity: 0;}
	.dhdh:nth-child(2):before {animation-delay: 0.5s;}
	.dhdh:nth-child(3):before {animation-delay: 0.2s;}
	@keyframes dhxg {
		0%{width:30%; opacity: 1;}
		50%{width:100%; opacity:0.5;}
	}
	
	.m_ul{width:100%; height:auto; margin-bottom:10px; overflow:hidden; display:none;}
	.m_ul li{float:left; width:50%; height:0.4rem; line-height:0.4rem; text-align:center; border-right:1px solid #fff; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; background:linear-gradient(to bottom,#6e90be,#546fa6);}
	.m_ul li a{display: block; font-weight:400; font-size:0.14rem; color:#fff;}
	.m_ul li:hover a{color:#fff; background-color:#2e609f}
	.m_ul li:nth-child(2n){border-right:none}
	
	/*左侧部分*/
	.l_right_title{height:0.6rem; line-height:0.6rem; background:#2e609f; color:#fff; text-align:center; font-size:0.22rem; font-weight:700;}
	
	.ul_l_right{ width:100%; height:auto; margin-top:10px;}
	.ul_l_right li{height:0.5rem; line-height:0.5rem; font-size:0.16rem; background-color:#f2f2f2; color:#000; position: relative; border-left:3px solid #ea6103; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
	.ul_l_right li a{display:block; color:#737373; z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; padding-left: 24px;}
	.ul_l_right li a:hover{ color:#FFF}
	.ul_l_right li span{ display:inline-block; position: absolute;z-index: 10; right:20px; top:0; width:27px; height:100%; background:url(../images/jiantou.png) left center no-repeat;}
	.ul_l_right li em{ position: absolute; left:0; top:0; width: 0; height: 100%; background:#2e609f; -moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.3s; }
	.ul_l_right li:hover em{ width:100%; }
	.ul_l_right li.active a{color:#fff; background:#2e609f;}
	
	.l_left .images{display:none}
	.left_tel{ display:none}
	
	/*弹性布局产品*/
	.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;}
	.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; margin-top:6px; text-align: center; font-size:0.12rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.prolist li a{ display:block}
	/*产品框_end*/

	.pro_view_15{ padding:0px}
	.pro_view{padding:0px}
	
	/*产品详情标题*/
	.product_list{height:50px; line-height:50px; border-bottom:1px solid #e5e5e5; margin-top:40px; font-size:18px; font-weight:bold; color:#FFF; text-indent:60px; position:relative;}
	.product_list:before{content: ""; width:200px; height:50px; background-color:#e62129; position:absolute; left:0px; top:0px; color:#FFF; z-index:-1}
	
	/*相关产品前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.35rem; line-height:0.35rem; color:#FFF; text-align:center; font-size:0.12rem; 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:nth-of-type(2n+0){margin-right:0px;}
	/*产品前6个end*/
	
	/*新闻*/
	.ul_news{ height:auto; padding:5px; overflow:hidden; margin-top:20px;}
	.ul_news li{height:auto; margin-bottom:23px; background-color: rgba(247,247,247,1); transition: all .5s ease; overflow:hidden; position:relative}
	.ul_news li .left{width:100%; height:auto; overflow:hidden}
	.ul_news li .left img{width:100%; height:auto; -moz-transition:all .8s ease 0s; -ms-transition:all .8s ease 0s; -o-transition:all .8s ease 0s; -webkit-transition:all .8s ease 0s; transition:all .8s ease 0s;}
	
	.ul_news li .center{ width:93%; height:auto; margin:0 auto; padding:20px 0}
	.ul_news li .center h4{ font-size:0.17rem; line-height:0.28rem; font-weight:bold; text-align:left;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
	.ul_news li .center h4 a{ color:#333333}
	.ul_news li .center p{ font-size:0.14rem; color:#999999; margin-top:10px; height:auto; text-align:left; line-height:0.22rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
	.ul_news li .center em{ width:120px; height:40px; line-height:40px; font-size:12px; color:#FFF; display:block; margin-left:0px; margin-top:17px; background-color: rgba(68,68,68,1);}
	
	.ul_news li .right{ position:absolute; right:20px; bottom:27px; height:auto; color: rgba(102,102,102,1);}
	.ul_news li .right span{ display:inline-block; margin-right:20px}
	.ul_news li .right p{ display:inline-block}
	
	.ul_news li:hover{box-shadow: 0 0 10px 1px #e8e8e8; background: #fff;}
	.ul_news li:hover img{ -moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}
	.ul_news li:hover .center em{background-color: rgba(230,33,41,1)}
	
	/*标题专用*/
	.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: "/";}
	
	/*产品框*/
	.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*/
		
	/*相关图片*/
	.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.35rem; line-height:0.35rem; 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){
	/*分类菜单*/
	.fl_menu{width:100%; height:70px; line-height:70px; overflow:hidden; background-color: rgba(238,242,245,1); border-bottom: 1px solid #ccc;}
	.fl_menu .l{ float:left; width:59%; height:auto; }
	.fl_menu .r{ float:right; width:39%; height:auto; text-align:right; }
	
	.fl_menu em{position:relative}
	.fl_menu em a{ color:#666; margin-right:10px;}
	.fl_menu em a:hover{ color:#00459d}
	.fl_menu em a+a:before{ padding-right:10px; color:#999999; content: "/";}
	
	.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:4px; background-color:#00459d; 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:#00459d; width:100%; font-weight:bold}
	
	/*用于左右分开，左侧用于分类*/
	.left_right{overflow:hidden}
	.left_right .l_left{float:left; width:18%; height:auto;}
	.left_right .l_right{float:right; width:80%; height:auto;}
	
	.m_fl{ display:none}
	.m_ul{ display:none}
	
	/*产品分类*/
	.l_right_title{background:#013b87; color:#fff; text-align:center; font-size:26px; font-weight:bold; line-height:70px}
	
	.ul_l_right{ width:100%; height:auto; margin-top:10px; overflow:hidden}
	.ul_l_right li{height:54px; line-height:54px; font-size:15px; background-color:#f2f2f2; color:#000; position: relative; border-left:3px solid #ff6a00;  border-top: 1px solid #ddd;}
	.ul_l_right li:last-child{border-bottom: 1px solid #ddd;}
	.ul_l_right li a{display:block; color:#737373; z-index:1; position:absolute; left:0; top:0; width:100%; height:100%; padding-left: 24px;}
	.ul_l_right li a:hover{ color:#FFF}
	.ul_l_right li span{ display:inline-block; position: absolute;z-index: 10; right:0px; top:0; width:27px; height:100%; background:url(../images/jiantou.png) left center no-repeat;}
	.ul_l_right li em{ position: absolute; left:0; top:0; width: 0; height: 100%; background:#013b87; -moz-transition: all 0.5s;-webkit-transition:all 0.5s;-o-transition:all 0.5s;transition:all 0.3s; }
	.ul_l_right li:hover em{ width:100%; }
	.ul_l_right li.active a{color:#fff; background:#013b87;}
	
	.left_tel{height:auto; border:1px solid #ECECEC; padding:22px}
	.left_tel h6{ color:#000; font-size:16px; margin-bottom:10px}
	.left_tel span{ display:block; line-height:28px; font-size:14px}
		
	/*弹性布局产品*/
	.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:32%; 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:14px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
	.prolist li a{ display:block}
	/*产品框_end*/
	
	.pro_view_15{ padding:15px}
	.pro_view{ height:auto; box-shadow: 0 0 25px rgb(0 0 0 / 5%); padding:15px}
	
	/*产品详情标题*/
	.product_list{height:50px; line-height:50px; border-bottom:1px solid #e5e5e5; margin-top:40px; font-size:18px; font-weight:bold; color:#FFF; text-indent:60px; position:relative;}
	.product_list:before{content: ""; width:200px; height:50px; background-color:#e62129; position:absolute; left:0px; top:0px; color:#FFF; z-index:-1}
	
	/*相关产品前5个*/
	.pro_tj{width:100%; height:auto; 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:35px; line-height:35px; color:#FFF; text-align:center; font-size:12px; 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*/		
	
	/*新闻*/
	.ul_news{ height:auto; padding:30px; overflow:hidden; margin-top:40px;}
	.ul_news li{height:auto; margin-bottom:40px; background-color: rgba(247,247,247,1); transition: all .5s ease; overflow:hidden; position:relative}
	.ul_news li .left{float:left; width:27%; height:auto; overflow:hidden}
	.ul_news li .left img{width:100%; height:auto; -moz-transition:all .8s ease 0s; -ms-transition:all .8s ease 0s; -o-transition:all .8s ease 0s; -webkit-transition:all .8s ease 0s; transition:all .8s ease 0s;}
	
	.ul_news li .center{float:left; width:54%; height:auto; margin-left:4%; padding:50px 0}
	.ul_news li .center h4{ font-size:22px; font-weight:bold; text-align:left}
	.ul_news li .center h4 a{ color:#333333}
	.ul_news li .center p{ font-size:16px; color:#999999; margin-top:10px; height:auto; text-align:left; line-height:27px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}
	.ul_news li .center em{ width:120px; height:40px; line-height:40px; font-size:14px; color:#FFF; display:block; margin-left:0px; margin-top:23px; background-color: rgba(68,68,68,1);}
	
	.ul_news li .right{ position:absolute; right:0; width:130px; height:88px; text-align:center; font-weight:bold; top: 50%; /* 相对于父元素顶部偏移50% */  transform: translateY(-50%); /* 相对于自身高度向上偏移50% */}
	.ul_news li .right span{font-size:50px; color: rgba(102,102,102,1); line-height: 1.2;}
	.ul_news li .right p{font-size: 14px; color: rgba(102,102,102,1); line-height: 1.2;}
	
	.ul_news li:hover{box-shadow: 0 0 20px 15px #e8e8e8; background: #fff;}
	.ul_news li:hover img{ -moz-transform:scale(1.1,1.1); -ms-transform:scale(1.1,1.1); -o-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}
	.ul_news li:hover .center em{background-color: rgba(230,33,41,1)}
	
	/*产品框*/
	.box_product{
		margin-top:30px;
		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:14px; 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: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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.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:50px; line-height:50px; background:rgba(0,0,0,0.4); z-index:1; font-size:12px; 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*/

}