@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);  }  /* 去掉链接触摸高亮 */

/*产品优势*/
.ADVANTAGES{width:100%;	height:auto; background-color: #ececec; padding:30px 0;}
.ADVANTAGES_title{width:100%; height:auto; position:relative}
.ADVANTAGES_title h3{font-size:0.2rem; font-weight:bold; color:#009a19; background:url(../images/cppro_m.png) no-repeat left center; text-indent:30px}
.ADVANTAGES_title .you{ position:absolute; right:0; top:0px}

/* 多图滚动 */
.scrollBox{width:100%; height:auto; margin-top:20px; 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: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;}

/*简介*/
.about{ overflow:hidden; margin-top:50px}
.about .l{width:100%; height:auto; color:#666}
.about .r{width:100%; height:auto; margin-top:20px}
.about .r img{max-width:100%; height:auto;}

.al{ font-size:0.20rem; color:#333; text-align:center}
.al span{ display:block; font-size:0.16rem; padding-bottom:15px}
.al em{ font-size:0.15rem; color:#999; font-weight:500; padding-left:10px}

.four{
	width:85%;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.four li{ width:45%; height:auto; text-align:center;}
.four li span{ display:block}
.four li span img{max-width:100%; height:auto; transition: 0.6s;}
.four li:hover img {
      transform: rotatey(360deg);
      -webkit-transform: rotatey(360deg);
      -o-transform: rotatey(360deg);
      -moz-transform: rotatey(360deg);
      -ms-transform: rotatey(360deg);
}
.four li p{color: #08b000; font-size:0.18rem; font-weight: bold; line-height:0.5rem}
.four li em{display:block; text-transform: uppercase; color: #47b659; font-size:0.14rem; line-height:0.26rem}

/*标题专用*/
.title_index{width:90%; height:auto; margin:0 auto; margin-top:10px; position:relative}
.title_index h1{font-size:0.22rem; color:#333; font-weight:bold; text-align:center; padding:20px;}
.title_index h1 span{ color:#ff6700}
.title_index h1 em{display:block; font-size:0.14rem; line-height:0.22rem; color:#999; font-weight:100; padding-top:20px;}
.title_index:before{content: ""; width:70px; height:1px; background-color:#CCC; position:absolute; left:0; top:60px}
.title_index:after{content: ""; width:70px; height:1px; background-color:#CCC; position:absolute; right:0; top:60px}

/*more*/
.more{ background:url(../images/x.jpg) no-repeat center 22px; text-align:center; margin-top:26px}
.more span{ display:inline-table; font-size:16px; border:1px solid #cccccc; padding:10px 30px; background-color:#FFFFFF}
.more span:hover{background-color:#013e8b;}
.more span:hover a{color:#FFFFFF}

/*优势*/
.youshi{ width:100%; height:auto; margin-top:30px; padding:80px 0; background:url(../images/youshi_m.jpg) no-repeat center top; overflow:hidden}
.youshi h5{ width:90%; height:auto; margin:0 auto; font-size:0.24rem; text-align:center; font-weight:bold; color:#FFF; text-align:center; letter-spacing:4px; text-shadow: 1px 1px #000; position:relative}
.youshi h5 span{ display:block; letter-spacing:0px; font-weight:500; font-size:0.16rem; text-transform:Uppercase; margin-top:15px}
.youshi h5:before{content: ""; width:50px; height:1px; background-color:#fff; position:absolute; left:0; top:40px}
.youshi h5:after{content: ""; width:50px; height:1px; background-color:#fff; position:absolute; right:0; top:40px}

.ys_ul{
	width:90%;
	height:auto;
	margin:0 auto;
	margin-top:40px;
}
.ys_ul li{ width:90%; height:auto; margin:0 auto; overflow:hidden; transition: all 0.5s; margin-bottom:30px }
.ys_ul li span{ display:block; overflow:hidden; border-top-right-radius:50%; border-top-left-radius:50%;}
.ys_ul li span img{ width:100%; height:auto}
.ys_ul li .ybox{ padding:30px; background-color:#FFF; padding-bottom:80px; border-bottom-right-radius:50%; border-bottom-left-radius:50%;}
.ys_ul li h4{ color:#FFF; color: #009a19; font-size:0.16rem; line-height:0.26rem; font-weight: bold; text-align:center}
.ys_ul li p{ font-size:0.16rem; line-height:0.26rem; color:#666; margin-top:20px}
.ys_ul li:hover { margin-top:-10px;}

/*动态*/
.news{overflow:hidden; margin-top:10px}
.news .l{width:100%; height:auto; position:relative}
.news .l img{ width:100%; height:100%}
.news .l .nbox{ width:100%; height:auto; position:absolute; left:0; bottom:0; background-color:rgba(0,0,0,0.7); padding:20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.news .l .nbox span{ display:block; color:#FFF}
.news .l .nbox b{ display:block; color:#FFF; font-size:0.18rem; line-height:0.36rem; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.news .l .nbox p{ margin-top:10px; color:#FFF; font-size:0.14rem; line-height:0.26rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}

.news .r{width:100%; height:auto; margin-top:10px}

.index_news { width:100%; height:auto;}
.index_news li {width:100%; height:auto; margin-bottom:10px; padding:15px; background-color:#F3F3F3; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position:relative; -webkit-transition: all 0.5s; transition: all 0.5s;}
.index_news li a {display: block;}
.index_news li:before{content: ""; width:0px; height:3px; background-color:#FFCC00; position:absolute; left:0; bottom:0; transition:all 0.5s; z-index:1}
.index_news li:hover:before{ width:100%; }
.index_news li:after{content: ""; width:100%; height:3px; background-color:#E6E6E6; position:absolute; left:0; bottom:0;}
.index_news li h4 {font-size:0.18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.index_news li p { margin-top:10px; color: #666; line-height: 1.8; height:0.5rem; overflow: hidden;}
.index_news li:hover {background-color:#3697fd; color:#fff;}
.index_news li a:hover{ color:#FFF}
.index_news li:hover p{color:#FFF}
.index_news li:last-child{margin-bottom:0;}

/*友情链接*/
.yqlj{width:100%; height:0.4rem; line-height:0.4rem; font-size:0.32rem; color: #ccc; font-weight: bold; text-align: center; margin-top:30px; position:relative}
.yqlj:before{content: ""; width:35%; height:1px; background-color:#CCC; position:absolute; left:0; top:0.2rem}
.yqlj:after{content: ""; width:35%; height:1px; background-color:#CCC; position:absolute; right:0; top:0.2rem}

/*分站列表*/
.citylist{width:100%; height:auto; overflow:hidden; margin-top:15px; text-align:center}
.citylist a{ padding:8px 15px; background-color:#EEE; display:inline-table; margin-bottom:5px; color:#666; border-radius:5px;}
.citylist a:hover{ background-color:#324776; color:#FFF}
/*分站列表end*/

.i_foot{width:100%; height:2.5rem; background:url(../images/nyybj.jpg) no-repeat center; margin-top:30px; overflow:hidden}
.i_foot h6{font-size:0.16rem; color: #009a19; font-weight: bold; text-shadow:1px 1px #FFf; margin-top:66px}

.i_more{width:140px; height:0.35rem; margin-left:0; margin-top:20px; overflow:hidden; border:2px solid #009a19; text-align:center; border-radius:50px; position:relative; }
.i_more a{position:absolute; left:0; top:0; width:100%; height:100%; line-height:0.35rem; color:#009a19; text-align:center; z-index:1; }
.i_more a:hover{color:#fff;}
.i_more:before{content: ""; position:absolute; right:100%; top:0; width:100%; height:100%; background-color:#009a19; transition: 0.4s all ease}
.i_more:hover:before{right:0}
}

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

/*产品优势*/
.ADVANTAGES{width:100%;	height:auto; background-color: #ececec; padding:50px 0;}
.ADVANTAGES_title{width:100%; height:auto; color:#333; position:relative;}
.ADVANTAGES_title h3{font-size:33px; font-weight:bold; color:#009a19; background:url(../images/cppro.png) no-repeat left center; text-indent:60px}
.ADVANTAGES_title .you{ position:absolute; right:0; top:5px}

/* 多图滚动 */
.scrollBox{width:100%; height:auto; margin-top:40px; 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;}

/*简介*/
.about{ overflow:hidden; margin-top:100px}
.about .l{ float:left; width:55%; height:auto; color:#666}
.about .r{ float:right; width:40%; height:auto;}
.about .r img{max-width:100%; height:auto;}

.al{ font-size:33px; color:#333}
.al span{ display:block; font-size:23px; padding-bottom:15px}
.al em{ font-size:20px; color:#999; font-weight:500; padding-left:10px}

.four{
	width:90%;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.four li{ width:23%; height:auto; text-align:center;}
.four li span{ display:block}
.four li span img{max-width:100%; height:auto; transition: 0.6s;}
.four li:hover img {
      transform: rotatey(360deg);
      -webkit-transform: rotatey(360deg);
      -o-transform: rotatey(360deg);
      -moz-transform: rotatey(360deg);
      -ms-transform: rotatey(360deg);
}
.four li p{color: #08b000; font-size: 20px; font-weight: bold; line-height:50px}
.four li em{display:block; text-transform: uppercase; color: #47b659; font-size: 14px; line-height:26px}

/*标题专用*/
.title_index{ width:800px; height:auto; margin:0 auto; margin-top:10px; position:relative}
.title_index h1{font-size:30px; color:#333; font-weight:bold; text-align:center; padding:20px;}
.title_index h1 span{ color:#ff6700}
.title_index h1 em{display:block; font-size:14px; line-height:30px; color:#999; font-weight:100; padding-top:12px;}
.title_index:before{content: ""; width:150px; height:1px; background-color:#CCC; position:absolute; left:0; top:67px}
.title_index:after{content: ""; width:150px; height:1px; background-color:#CCC; position:absolute; right:0; top:67px}

/*more*/
.more{ background:url(../images/x.jpg) no-repeat center 22px; text-align:center; margin-top:26px}
.more span{ display:inline-table; font-size:16px; border:1px solid #cccccc; padding:10px 30px; background-color:#FFFFFF}
.more span:hover{background-color:#013e8b;}
.more span:hover a{color:#FFFFFF}

/*优势*/
.youshi{ width:100%; height:auto; margin-top:40px; padding:80px 0; background:url(../images/youshi.jpg) no-repeat center top; overflow:hidden}
.youshi h5{ width:700px; height:auto; margin:0 auto; font-size:35px; text-align:center; font-weight:bold; color:#FFF; text-align:center; letter-spacing:4px; text-shadow: 1px 1px #000; position:relative}
.youshi h5 span{ display:block; letter-spacing:0px; font-weight:500; font-size:18px; text-transform:Uppercase; margin-top:15px}
.youshi h5:before{content: ""; width:150px; height:1px; background-color:#fff; position:absolute; left:0; top:74px}
.youshi h5:after{content: ""; width:150px; height:1px; background-color:#fff; position:absolute; right:0; top:74px}

.ys_ul{
	width:100%;
	height:auto;
	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;/*在主轴上的对齐方式,两端对齐，项目之间的间隔都相等*/
}
.ys_ul li{ width:22%; height:auto; overflow:hidden; transition: all 0.5s; }
.ys_ul li span{ display:block; overflow:hidden; border-top-right-radius:50%; border-top-left-radius:50%;}
.ys_ul li span img{ width:100%; height:auto}
.ys_ul li .ybox{ padding:40px; background-color:#FFF; padding-bottom:90px; border-bottom-right-radius:50%; border-bottom-left-radius:50%;}
.ys_ul li h4{ color:#FFF; color: #009a19; font-size:20px;  font-weight: bold; text-align:center; line-height:35px}
.ys_ul li p{ font-size:16px; line-height:26px; color:#666; margin-top:20px}
.ys_ul li:hover { margin-top:-10px;}

/*动态*/
.news{overflow:hidden; margin-top:10px}
.news .l{ float:left; width:48%; height:400px; position:relative}
.news .l img{ width:100%; height:100%}
.news .l .nbox{ width:100%; height:auto; position:absolute; left:0; bottom:0; background-color:rgba(0,0,0,0.7); padding:20px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.news .l .nbox span{ display:block; color:#FFF}
.news .l .nbox b{ display:block; color:#FFF; font-size:18px; line-height:36px}
.news .l .nbox p{ margin-top:10px; color:#FFF; font-size:14px; line-height:26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2;/*显示几行*/-webkit-box-orient: vertical;}

.news .r{ float:right; width:50%; height:auto;}

.index_news { width:100%; height:auto; overflow:hidden}
.index_news li {width:100%; height:auto; margin-bottom:20px; padding:18px; background-color:#F3F3F3; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; position:relative; -webkit-transition: all 0.5s; transition: all 0.5s;}
.index_news li a {display: block;}
.index_news li:before{content: ""; width:0px; height:3px; background-color:#FFCC00; position:absolute; left:0; bottom:0; transition:all 0.5s; z-index:1}
.index_news li:hover:before{ width:100%; }
.index_news li:after{content: ""; width:100%; height:3px; background-color:#E6E6E6; position:absolute; left:0; bottom:0;}
.index_news li h4 {font-size:18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.index_news li p { margin-top:10px; color: #666; font-size:14px; line-height: 1.8; height:50px; overflow: hidden;}
.index_news li:hover {background-color:#009a19; color:#fff;}
.index_news li a:hover{ color:#FFF}
.index_news li:hover p{color:#FFF}
.index_news li:last-child{margin-bottom:0;}

/*友情链接*/
.yqlj{width:100%; height:40px; line-height:40px; font-size:32px; color: #ccc; font-weight: bold; text-align: center; margin-top:50px; position:relative}
.yqlj:before{content: ""; width:43%; height:1px; background-color:#CCC; position:absolute; left:0; top:20px}
.yqlj:after{content: ""; width:43%; height:1px; background-color:#CCC; position:absolute; right:0; top:20px}

/*分站列表*/
.citylist{width:100%; height:auto; overflow:hidden; margin-top:20px; text-align:center}
.citylist a{ padding:8px 15px; background-color:#EEE; display:inline-table; margin-bottom:5px; color:#666; border-radius:5px;}
.citylist a:hover{ background-color:#324776; color:#FFF}
/*分站列表end*/

.i_foot{width:100%; height:250px; background:url(../images/nyybj.jpg) no-repeat center; margin-top:30px; overflow:hidden}
.i_foot h6{font-size:35px; color: #009a19; font-weight: bold; margin-top:66px}

.i_more{width:140px; height:40px; margin-left:0; margin-top:20px; overflow:hidden; border:2px solid #009a19; text-align:center; border-radius:50px; position:relative; }
.i_more a{position:absolute; left:0; top:0; width:100%; height:100%; line-height:40px; color:#009a19; text-align:center; z-index:1; }
.i_more a:hover{color:#fff;}
.i_more:before{content: ""; position:absolute; right:100%; top:0; width:100%; height:100%; background-color:#009a19; transition: 0.4s all ease}
.i_more:hover:before{right:0}

}