﻿@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);  }  /* 去掉链接触摸高亮 */
	
	/*标题专用*/
	.title_index{ width:100%; height:auto; margin-top:30px; font-size:0.2rem; color:#333; font-weight:bold; text-align:center; position:relative}
	.title_index:before{content: ""; width:60px; height:4px;  background-color:#c9151e; position:absolute; left: 50%;/* 先移动到50%位置 */  transform: translateX(-50%);/* 再向左移动自身宽度的一半 */ top:0.35rem}
	
	/*弹性布局产品*/
	.prolist{
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.prolist li{width:49%; height:auto; margin-bottom:0.15rem; background-color:#FFF;}
	.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*/
	
	/*关于我们*/
	.about_box{ width:100%; height:auto; background:#F6F6F6; margin-top:20px; padding:20px 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: #c9151e; position:relative}
	.about_box .right h5:before{content: ""; width:60px; height:3px;  background-color:#c9151e; position:absolute; left:0; top:0.35rem}
	.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.46rem;
		border: 2px solid #fff;
		font-size: 0.18rem;
		margin-left: 0px;
		margin-top:20px;
		transition: all .5s ease;
		background: #c9151e;
		text-align:center
	}
	.about-btn a{ display:block}
	.about-btn:hover {
		background: #fff;
		border: 2px solid #c9151e;
		cursor: pointer
	}
	.about-btn:hover a {color: #c9151e}
	.about-btn a {color: #fff}
	
	/*资讯*/
	.news_box{ width:100%; height:auto; background:#F6F6F6; margin-top:50px; padding:20px 0; overflow:hidden}
	.ul_news{ padding:7px; overflow:hidden; margin-top:40px}
	.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; }
	
	/*优势*/
	.youshi_box{width:100%; height:auto; background: url(../images/youshi.jpg) no-repeat center #191c23;  margin-top:30px; padding:50px 0; overflow:hidden}
	.youshi_box h5{width:90%; height:auto; margin:0 auto; font-weight: bold; font-size:0.2rem; line-height:0.4rem; text-align:center; color:#FFF}
	.youshi_box h5 span{ display:block; font-size: 0.14rem; font-weight:400; margin-top:10px}
	
	.yunu-pinzhi {
		margin-top:35px;
		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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.yunu-pinzhi li {width:48%; height:auto; position: relative; background-color: #fff; min-height:100%; overflow: hidden; cursor:pointer; margin-bottom:15px}
	.yunu-pinzhi li .img-center{ width:100%; height:auto}
	.yunu-pinzhi li .img-center img{width:100%; height:auto}
	.yunu-pinzhi li .text{padding:22px;}
	.yunu-pinzhi li .text h4 {font-size: 0.18rem; margin-top:5px; color:#c9151e; text-align:center}
	.yunu-pinzhi li .text p {text-indent: 2em; color: #999; font-size:0.14rem; line-height:0.23rem; margin-top:15px}
	.yunu-pinzhi li .box{ position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background-color:#c9151e; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; }
	.yunu-pinzhi li .box h4 {font-size: 0.18rem; color:#fff; text-align:center; margin-top:50px}
	.yunu-pinzhi li .box p {padding:20px; color: #fff; text-indent: 2em; font-size:0.14rem; line-height:0.23rem;}
	.yunu-pinzhi li:hover .box { top:0;}

	/* 多图滚动 */
	.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;}

}

/*当页面大于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; width:100%; height:auto; }
	.slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0,0,0,0);  }  /* 去掉链接触摸高亮 */
	
	/*标题专用*/
	.title_index{ width:100%; height:auto; margin-top:50px; font-size:30px; color:#333; font-weight:bold; text-align:center; position:relative}
	.title_index:before{content: ""; width:90px; height:5px;  background-color:#c9151e; position:absolute; left: 50%;/* 先移动到50%位置 */  transform: translateX(-50%);/* 再向左移动自身宽度的一半 */ top:55px}
	
	/*弹性布局产品*/
	.prolist{
		margin-top:60px;
		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*/
	
	/*关于我们*/
	.about_box{ width:100%; height:auto; background:#F6F6F6; margin-top:30px; padding:50px 0; overflow:hidden}
	.about_box .left{ float:left; width:45%; height:auto}
	.about_box .right{ float:right; width:50%; height:auto}
	.about_box .right h5{ margin-top:10px; font-weight:bold; font-size: 30px; color: #c9151e; position:relative}
	.about_box .right h5:before{content: ""; width:90px; height:5px;  background-color:#c9151e; position:absolute; left:0; top:55px}
	.about_box .right .aboutus{color: #333; line-height:36px; font-size:16px; margin-top:50px}
	
	/*小幻灯片*/
	.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:30px;
		transition: all .5s ease;
		background: #c9151e;
		text-align:center
	}
	.about-btn a{ display:block}
	.about-btn:hover {
		background: #fff;
		border: 2px solid #c9151e;
		cursor: pointer
	}
	.about-btn:hover a {color: #c9151e}
	.about-btn a {color: #fff}
	
	/*资讯*/
	.news_box{ width:100%; height:auto; background:#F6F6F6; margin-top:50px; padding:20px 0; overflow:hidden}
	.ul_news{
		margin-top:50px;
		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; }
	
	/*优势*/
	.youshi_box{width:100%; height:auto; background: url(../images/youshi.jpg) no-repeat center #191c23;  margin-top:0px; padding:50px 0; overflow:hidden}
	.youshi_box h5{font-weight: bold; font-size: 32px; text-align:center; color:#FFF}
	.youshi_box h5 span{ display:block; font-size: 18px; font-weight:400; margin-top:35px}
	
	.yunu-pinzhi {
		margin-top:50px;
		display:flex;/*启用弹性布局*/
		display: -webkit-flex; /*启用弹性布局,Webkit内核的浏览器*/
		flex-direction:row;/*项目的排列方向,从左到右排*/
		-webkit-flex-direction:row;/*项目的排列方向,从左到右排*/
		justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
		-webkit-flex-justify-content:space-between;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
	}
	.yunu-pinzhi li {width:24%; height:auto; position: relative; background-color: #fff; min-height:100%; overflow: hidden; cursor:pointer }
	.yunu-pinzhi li .img-center{ width:100%; height:auto}
	.yunu-pinzhi li .img-center img{width:100%; height:auto}
	.yunu-pinzhi li .text{padding:50px;}
	.yunu-pinzhi li .text h4 {font-size: 24px; margin: 20px 0; color:#c9151e; text-align:center}
	.yunu-pinzhi li .text p {text-indent: 2em; color: #999; font-size:16px; line-height:30px}
	.yunu-pinzhi li .box{ position: absolute; left: 0; top: 100%; width: 100%; height: 100%; background-color:#c9151e; color: #fff; -webkit-transition: all 0.5s; transition: all 0.5s; }
	.yunu-pinzhi li .box h4 {font-size: 24px; color:#fff; text-align:center; margin-top:70px}
	.yunu-pinzhi li .box p {padding:50px; color: #fff; text-indent: 2em; font-size:16px; line-height:30px}
	.yunu-pinzhi li:hover .box { top:0;}
	
	/* 多图滚动 */
	.scrollBox{width:100%; height:auto; margin-top:60px; text-align:center;}
	.scrollBox .bd{width:100%; height:auto; overflow:hidden}
	.scrollBox .bd li{float:left; width:23.875%; height:auto; margin-right:1.5%;}
	.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{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;}
}