@charset "utf-8";
/*当页面小于992px的时执行下面的CSS*/
@media screen and (max-width: 992px){
/* 首页焦点图banner幻灯片 */
.slideBox2{width:100%; height:auto; position:relative; overflow:hidden; margin:0 auto; max-width:100%; background:#fff; }
.slideBox2 .hd{ width:100%; position:absolute; height:20px; line-height:20px; left:0; bottom:20px; text-align:center; z-index:1; }
.slideBox2 .hd li{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#333; text-indent:-9999px; overflow:hidden; margin:10px;   cursor:pointer;}
.slideBox2 .hd li.on{ background:#fff;  }
.slideBox2 .prev{ position:absolute; left:20px; top:0; display:none; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox2 .next{ position:absolute; right:20px; top:0; display:none; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox2 .bd{ position:relative; z-index:0; }
.slideBox2 .bd li{ position:relative; text-align:center;  }
.slideBox2 .bd li img{vertical-align:top; width:100%; height:auto/* 图片宽度100%，达到自适应效果 */}
.slideBox2 .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */

/*产品*/
.top_pro{
	width:95%;
	height:auto;
	margin:0 auto;
	margin-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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.top_pro li{width:48%; height:auto;}
.top_pro li span{display:block; width:100%; height:auto; overflow:hidden; position:relative; display: flex; justify-content: center;}
.top_pro li span img{width:100%; height:auto;}
.top_pro li p{ width:95%; height:auto; margin:0 auto; line-height:56px; text-align: center; font-size:16px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.top_pro li a{ display:block}

/*标题*/
.part-title {width:93%;	height:auto; margin:0 auto; margin-top:30px}
.part-title h3 {
	text-align: center;
	font-family: Open Sans;
	font-size:0.25rem;
	font-weight: 700;
	color: #1a1a1a
}
.part-title h3 em {
	color: #f38c04;
	font-style: normal;
	font-family: Open Sans
}
.part-title p {
	text-align: center;
	color: #202020;
	font-weight: 500;
	line-height:0.14rem;
	margin-top:5px;
	line-height:0.22rem
}


/*关于我们*/
.about_box{ width:100%; height:auto; margin-top:10px; padding:30px 0; overflow:hidden; background: url("../images/1594781411299.jpeg") no-repeat center/cover;}
.about_box .left{width:100%; height:auto}
.about_box .right{width:100%; height:auto}
.about_box .right h5{ margin-top:26px; font-weight:bold; font-size:0.2rem; color: #333;}
.about_box .right .aboutus{color: #333; line-height:26px; margin-top:20px}

/*小幻灯片*/
.xiao_hdp{width:100%; height:auto; overflow:hidden; position:relative}
.xiao_hdp .hd{ width:100%; position:absolute; height:20px; line-height:20px; left:0; bottom:20px; text-align:center; z-index:1; }
.xiao_hdp .hd li{ display:inline-block; width:10px; height:10px; border-radius:50%; background:#fff; text-indent:-9999px; overflow:hidden; margin:10px;   cursor:pointer;}
.xiao_hdp .hd li.on{ background:#00ac97;  }
.xiao_hdp .bd{width:100%; height:auto; z-index:0; overflow:hidden}
.xiao_hdp .bd li img{display:block; width:100%; height:auto;}
.xiao_hdp .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }

.about-btn {
	width: 160px;
	height: 0.5rem;
	line-height:0.5rem;
	border: 2px solid #fff;
	font-size: 0.2rem;
	font-family: Open Sans;
	margin-left: 0px;
	margin-top:20px;
	transition: all .5s ease;
	background: #f38c04;
	text-align:center
}
.about-btn a{ display:block}
.about-btn:hover {
	background: #fff;
	border: 2px solid #f38c04;
	cursor: pointer
}
.about-btn:hover a {color: #f38c04}
.about-btn a {color: #fff}

/*弹性布局产品*/
.index_pro{
	width:100%;
	height:auto;
	margin-top:0.4rem;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.index_pro li{width:49%; height:auto; margin-bottom:0.15rem;}
.index_pro li span{display:block; width:100%; height:auto; overflow:hidden;}
.index_pro li span img{width:100%; height:auto;}
.index_pro li p{ width:95%; height:auto; margin:0 auto; margin-top:6px; margin-bottom:10px; text-align: center; font-size:0.12rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.index_pro li a{ display:block}
.index_pro li i{
	display:block;
	width: 70%;
	height: 0.3rem;
	line-height:0.3rem;
	margin: 0 auto;
	text-align: center;
    background-color: #f2f2f2;
	border-radius:0.15rem;
	transition: all .5s;
	font-size:0.12rem;
	color:#666
}
.index_pro li:hover i{background: #f38c04; color:#FFFFFF}
/*产品框_end*/

/*资讯*/
.lastest-news{
	width:95%;
	height:auto;
	margin:0 auto;
	margin-top:40px;
}
.lastest-news li {width:100%; height:auto; background: #f6f6f6; overflow:hidden; }
.lastest-news li dt{width:100%; height:auto}
.lastest-news li dt img {width:100%; height:auto}
.lastest-news li dd {width:100%; height:auto; padding:30px; color:#333333; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.lastest-news li dd h6{font-size:0.2rem; font-weight:500; line-height:0.3rem}
.lastest-news li dd span{ display:block; line-height:0.5rem}
.lastest-news li dd i{display:block; line-height:0.5rem; font-weight:bold; font-size:0.16rem}
.lastest-news li dd p{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical; color:#666666; font-size:14px; line-height:26px}
.lastest-news li:hover i{ color:#f38c04}
.lastest-news li a{ display:block}

}

/*当页面大于992px时候*/
@media screen and (min-width:992px){
/* 首页焦点图banner幻灯片 */
.slideBox{width:100%; height:auto; position:relative; overflow:hidden; margin:0 auto; max-width:100%; background:#fff; }
.slideBox .hd{ width:100%; position:absolute; height:80px; line-height:30px; left:0; bottom:30px; text-align:center; z-index:1; }
.slideBox .hd li{ display:inline-block; width:20px; height:20px; border-radius:50%; background: rgba(255, 255, 255, 0.6); text-indent:-9999px; overflow:hidden; margin:10px;   cursor:pointer;}
.slideBox .hd li.on{ background: rgba(1, 21, 88, 0.6); }

.slideBox .prev{ position:absolute; left:20px; top:0; display:block; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox .next{ position:absolute; right:20px; top:0; display:block; width:58px; height:58px; text-align:center; cursor:pointer}
.slideBox .bd{ position:relative; z-index:0; }
.slideBox .bd li{ position:relative; text-align:center; image-rendering: -webkit-optimize-contrast;}
.slideBox .bd li img{vertical-align:top; max-width:100%; height:auto; object-fit: none; /*保留原有元素内容的长度和宽度，图片不会变模糊*/}
.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */

/*产品*/
.top_pro{
	width:98%;
	height:auto;
	margin:0 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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.top_pro li{width:24.6%; height:auto;}
.top_pro li span{display:block; width:100%; height:auto; overflow:hidden; position:relative; display: flex; justify-content: center;}
.top_pro li span img{width:100%; height:auto;}
.top_pro li p{ width:95%; height:auto; margin:0 auto; line-height:56px; text-align: center; font-size:16px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.top_pro li a{ display:block}

/*标题*/
.part-title {margin-top:50px;}
.part-title h3 {
	text-align: center;
	font-family: Open Sans;
	font-size:45px;
	font-weight: 700;
	color: #1a1a1a
}
.part-title h3 em {
	color: #f38c04;
	font-style: normal;
	font-family: Open Sans
}
.part-title p {
	text-align: center;
	color: #202020;
	font-weight: 500;
	line-height: 24px
}

/*弹性布局产品*/
.index_pro{
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.index_pro li{width:32%; height:auto; margin-bottom:20px; background-color:#FFF;}
.index_pro li span{display:block; width:100%; height:auto; overflow:hidden; position:relative; display: flex; justify-content: center;}
.index_pro li span img{width:100%; height:auto;}
.index_pro li p{ width:95%; height:auto; margin:0 auto; line-height:56px; text-align: center; font-size:16px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.index_pro li a{ display:block}
.index_pro 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;
}
.index_pro li:hover span:after{width:860px;}

/*产品框_end*/

/*关于我们*/
.about_box{ width:100%; height:auto; margin-top:20px; padding:60px 0; overflow:hidden; background: url("../images/1594781411299.jpeg") no-repeat center/cover;}
.about_box .left{ float:left; width:50%; height:auto}
.about_box .right{ float:right; width:45%; height:auto}
.about_box .right h5{ margin-top:0px; font-weight:bold; font-size: 40px; color: #f38c04;}
.about_box .right .aboutus{color: #333; line-height:36px; margin-top:20px}

/*小幻灯片*/
.xiao_hdp{width:100%; height:auto; overflow:hidden; position:relative}
.xiao_hdp .hd{ position:absolute; width:100%; height:40px; bottom:30px; left:0; z-index:1; text-align:center}
.xiao_hdp .hd img{ width:40px; height:40px;  }
.xiao_hdp .prev{cursor:pointer}
.xiao_hdp .next{cursor:pointer}

.xiao_hdp .bd{width:100%; height:auto; z-index:0; overflow:hidden}
.xiao_hdp .bd li img{display:block; width:100%; height:auto;}
.xiao_hdp .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }

.about-btn {
	width: 200px;
	height: 60px;
	line-height:60px;
	border: 2px solid #fff;
	font-size: 22px;
	font-family: Open Sans;
	margin-left: 0px;
	margin-top:20px;
	transition: all .5s ease;
	background: #f38c04;
	text-align:center
}
.about-btn a{ display:block}
.about-btn:hover {
	background: #fff;
	border: 2px solid #f38c04;
	cursor: pointer
}
.about-btn:hover a {color: #f38c04}
.about-btn a {color: #fff}

/*资讯*/
.lastest-news {
	width:100%;
	height:auto;
	margin-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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.lastest-news li {width:50%; height:auto; background: #f6f6f6; overflow:hidden; position:relative}
.lastest-news li dt{float:left; width:50%; height:auto}
.lastest-news li dt img {width:100%; height:auto}
.lastest-news li dd { float:right; width:50%; height:100%;  padding:50px; color:#333333; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position:relative}
.lastest-news li dd h6{font-size:22px; font-weight:500; line-height:32px}
.lastest-news li dd span{ display:block; line-height:50px}
.lastest-news li dd i{display:block; line-height:50px; font-weight:bold; font-size:16px}
.lastest-news li dd p{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical; color:#666666; font-size:14px; line-height:26px}
.lastest-news li:hover i{ color:#f38c04}
.lastest-news li a{ display:block}
.lastest-news li em{display:block; position:absolute; right:0; top:0; width:50%; height:100%;}
.lastest-news li em:before {
	content: "";
	position: absolute;
	bottom: 0;
	transition: opacity .7s ease 0s,transform .7s ease 0s;
	width: 94%;
	height: 92%;
	top: 4%;
	left: 3%;
	opacity: 0;
	border-top: 2px solid #f38c04;
	border-bottom: 2px solid #f38c04;
	transform: scaleX(0);
	-webkit-transform: scaleX(0);
	box-sizing: border-box
}

.lastest-news li em:after {
	transition: opacity .5s ease 0s,transform .5s ease 0s;
	content: "";
	border-left: 2px solid #f38c04;
	border-right: 2px solid #f38c04;
	transform: scaleY(0);
	-webkit-transform: scaleY(0);
	opacity: 0;
	position: absolute;
	width: 94%;
	height: 92%;
	top: 4%;
	left: 3%;
	box-sizing: border-box
}
.lastest-news li:hover em:after,.lastest-news li:hover em:before{opacity:1; transform: scale(1)}
.lastest-news li:nth-child(3) dt{float:right;}
.lastest-news li:nth-child(3) dd{float:left}
.lastest-news li:nth-child(3) em{ left:0; right:inherit}
.lastest-news li:nth-child(4) dt{float:right;}
.lastest-news li:nth-child(4) dd{float:left}
.lastest-news li:nth-child(4) em{ left:0; right:inherit}

}