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

/*图片2*/
.piclist{
	margin-top:55px;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.piclist li{width:49%; height:auto; margin-bottom:10px; overflow:hidden; position:relative}
.piclist li span{width:100%; height:auto; display:block; position:relative}
.piclist li span img{width:100%; height:auto; }
.piclist li span:before{content: ""; position:absolute; width:100%; height:100%; border:1px solid #fff; z-index:1; transition:all 0.5s; opacity:0;}
.piclist li:hover span:before{opacity:1; transform:scale(0.9,0.85)}
.piclist li a{ display:block}
.piclist li p{ position:absolute; left:0; right:0; bottom:0; width:93%; height:0.5rem; line-height:0.5rem; margin:0 auto; font-size:0.14rem; color:#FFF; text-align:center; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}

/*标题*/
.part-title {position: relative; margin-top:40px; text-transform:uppercase}
.part-title h3 {
	text-align: center;
	font-family: Open Sans;
	font-size:0.25rem;
	font-weight: 700;
	color: #1a1a1a
}
.part-title h3 em {
	color: #0593db;
	font-style: normal;
	font-family: Open Sans
}
.part-title p {
	text-align: center;
	color: #202020;
	font-weight: 400;
	line-height:0.22rem;
	margin-top:5px;
	font-size:0.12rem
}
.part-title .after{
	color: #dedede;
	font-weight: 700;
	font-size: 1.2rem;
	font-family: Open Sans;
	position: absolute;
	top: -80%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -99;
}

/*资质*/
.zizhi{background-color:#f6f6f6; padding:40px 0; margin-top:60px}
.zizhi h6{ text-align:center; color:#333; font-size:0.2rem; font-weight:bold}

/* 多图滚动 */
.scrollBox{width:100%; height:auto; margin-top:30px; text-align:center;}
.scrollBox .bd{width:100%; height:auto; overflow:hidden}
.scrollBox .bd li{float:left; width:49%; height:auto; margin-right:2%; margin-bottom:20px;}
.scrollBox .bd li:nth-of-type(2n+0){margin-right:0;}
.scrollBox .bd li span{display:block; height:auto; background-color:#FFF; padding:5px}
.scrollBox .bd li span img{max-width:100%; height:auto;}
.scrollBox .bd li p{ margin-top:10px; padding:0 10px; line-height:0.2rem; color:#666; font-size:0.14rem; text-align:center; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.scrollBox .bd li a{ display:block}

.scrollBox .hd{ height:20px; overflow:hidden; font-size:0; margin-top:0px;}
.scrollBox .hd ul{ display:inline-block;}	
.scrollBox .hd li{ display:inline-block; width:16px; height:16px; border-radius:16px; background:#D0D0D0; margin:0 5px; overflow:hidden; }
.scrollBox .hd .on{ background:#BA2636;}

/*关于我们*/
.about_box{ width:100%; height:auto; background:#F6F6F6; margin-top:30px; padding:10px 0; overflow:hidden}
.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: #0593db;
	text-align:center
}
.about-btn a{ display:block}
.about-btn:hover {
	background: #fff;
	border: 2px solid #0593db;
	cursor: pointer
}
.about-btn:hover a {color: #0593db}
.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: #0593db; color:#FFFFFF}
/*产品框_end*/

.lastest-news {
	width:95%;
	height:auto;
	margin:0 auto;
	margin-top:60px;
}
.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:#0593db}
.lastest-news li a{ display:block}

/*联系方式*/
.contact{ display:none}

}

/*当页面大于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);  }  /* 去掉链接触摸高亮 */

/*图片2*/
.piclist{
	margin-top:90px;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.piclist li{width:23.5%; height:auto; margin-bottom:40px; overflow:hidden; position:relative}
.piclist li span{width:100%; height:auto; display:block; position:relative}
.piclist li span img{width:100%; height:auto; }
.piclist li span:before{content: ""; position:absolute; width:100%; height:100%; border:1px solid #fff; z-index:1; transition:all 0.5s; opacity:0;}
.piclist li:hover span:before{opacity:1; transform:scale(0.9,0.85)}
.piclist li a{ display:block}
.piclist li p{ position:absolute; left:0; right:0; bottom:0; width:93%; height:50px; margin:0 auto; line-height:50px; font-size:14px; color:#fff; text-shadow:2px 2px #666; text-align:center; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}

/* 多图滚动 */
.scrollBox{width:100%; height:auto; margin-top:30px; text-align:center;}
.scrollBox .bd{width:100%; height:auto; overflow:hidden}
.scrollBox .bd li{float:left; width:23.5%; height:auto; margin-right:2%;}
.scrollBox .bd li:nth-of-type(4n+0){margin-right:0;}
.scrollBox .bd li span{display:block; height:auto; background-color:#FFF; padding:8px}
.scrollBox .bd li span img{max-width:100%; height:auto;}
.scrollBox .bd li p{ margin-top:10px; padding:0 10px; line-height:26px; color:#333; font-size:14px; text-align:center; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.scrollBox .bd li a{ display:block}

.scrollBox .hd{ height:20px; overflow:hidden; font-size:0; margin-top:20px;}
.scrollBox .hd ul{ display:inline-block;}	
.scrollBox .hd li{ display:inline-block; width:16px; height:16px; border-radius:16px; background:#D0D0D0; margin:0 5px; overflow:hidden; }
.scrollBox .hd .on{ background:#BA2636;}

/*标题*/
.part-title {position: relative; margin-top:100px; text-transform:uppercase}
.part-title h3 {
	text-align: center;
	font-family: Open Sans;
	font-size:45px;
	font-weight: 700;
	color: #1a1a1a
}
.part-title h3 em {
	color: #0593db;
	font-style: normal;
	font-family: Open Sans
}
.part-title p {
	text-align: center;
	color: #202020;
	font-weight: 700;
	line-height: 24px
}
.part-title .after {
	color: #dedede;
	font-weight: 700;
	font-size: 210px;
	font-family: Open Sans;
	position: absolute;
	top: -120%;
	left: 50%;
	transform: translateX(-50%);
	z-index: -99;
}

/*关于我们*/
.about_box{ width:100%; height:auto; background:#F6F6F6; margin-top:60px; overflow:hidden; padding:26px 0}
.about_box .left{ float:left; width:50%; height:auto}
.about_box .right{ float:right; width:45%; height:auto}
.about_box .right h5{ margin-top:50px; font-weight:bold; font-size: 40px; color: #0593db;}
.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: #0593db;
	text-align:center
}
.about-btn a{ display:block}
.about-btn:hover {
	background: #fff;
	border: 2px solid #0593db;
	cursor: pointer
}
.about-btn:hover a {color: #0593db}
.about-btn a {color: #fff}

/*弹性布局产品*/
.index_pro{
	width:100%;
	height:auto;
	margin-top:90px;
	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:23.5%; height:auto; margin-bottom:30px; background-color:#FFF; box-shadow: 0 0 15px #eee; padding-bottom:18px}
.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:50px; 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:700px;}
.index_pro li i{
	display:block;
	width: 120px;
	height: 36px;
	line-height:36px;
	margin: 0 auto;
	text-align: center;
    background: #f2f2f2;
	border-radius:18px;
	transition: all .5s;
	color:#666
}
.index_pro li:hover i {background: #0593db; color:#FFFFFF}
/*产品框_end*/

.lastest-news {
	width:100%;
	height:auto;
	margin-top:90px;
	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:#0593db}
.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 #0593db;
	border-bottom: 2px solid #0593db;
	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 #0593db;
	border-right: 2px solid #0593db;
	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}

/*资质*/
.zizhi{background-color:#f6f6f6; padding:60px 0; margin-top:60px}
.zizhi h6{ text-align:center; color:#333; font-size:32px; font-weight:bold}

/*联系方式*/
.contact{padding:50px 0; background:#2e2e2e; overflow:hidden}
.contact .l{ float:left; width:50%; height:auto}
.contact .l p{ font-size:18px; color:#FFF; padding-top:10px}
.contact .r{ float:right; width:50%; height:auto; font-size:16px}
.contact .r .foot-contact{padding:0 14px; height:50px; background:#0593db; line-height:50px; color:#fff; white-space:nowrap;}

}