﻿@charset "utf-8";
/*当浏览器尺寸小于960px的时执行下面的CSS*/
@media screen and (max-width: 960px){
/* 首页焦点图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:#fff; text-indent:-9999px; overflow:hidden; margin:10px;   cursor:pointer;}
.slideBox .hd li.on{ background:#00ac97;  }
.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);  }  /* 去掉链接触摸高亮 */

/*品牌介绍*/
.pinpai{width:100%; height:auto; margin-top:10px; overflow:hidden}
.pinpai .l{width:100%; height:auto; }
.pinpai .c{width:100%; height:auto; margin-top:20px; overflow:hidden}
.pinpai .r{width:100%; height:auto; 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); /* 取消链接高亮 */  }

.gundong{ width:100%; height:auto;}
.gundong .shuzi{ color:#00ac97}
.gundong .shuzi span{ font-size:0.4rem; margin-right:10px}
.gundong p{ font-size:0.14rem; color:#999; margin-top:8px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.gundong+.gundong{ margin-top:20px}

.pp_title{ width:100%; height:auto; padding-bottom:20px; border-bottom:1px solid #d2d2d2}
.pp_title span{ display:block; font-size:0.22rem}
.pp_title em{ display:block; font-size:0.16rem; margin-top:10px; text-transform: uppercase; color:#999}

.pp_content{width:100%; height:auto; margin-top:15px; line-height:0.3rem; font-size:0.16rem; color:#999; overflow:hidden}

/*产品*/
.pro_box{ width:100%; height:auto; padding:0.5rem 0; margin-top:0.5rem;  position:relative}
.pro_box:before{content: ""; position:absolute; top:0; left:0; width:100%; height:500px; background:#f6f6f6 url(../images/anfu.jpg) no-repeat top center;}
.pro_po{ display:none}


/* 多图滚动 */
.scrollBox{width:100%; height:auto; text-align:center; position:relative}
.scrollBox .hd{width:100%; height:auto; overflow:hidden}
.scrollBox .hd ul{ width:100%; height:auto; display: -webkit-box;/*启用横列布局*/ overflow-x: scroll;/*裁剪内容提供滚动条*/}
/*去掉滚动条*/
.scrollBox .hd ul::-webkit-scrollbar{
	width:0; 
	height:0; 
	display: none;
}
.scrollBox .hd ul li{height:auto; padding:0 10px; cursor:pointer;}
.scrollBox .hd ul li span{ display:block; width:90%; height:auto; text-align:center}
.scrollBox .hd ul li span img{ max-width:100%; height:auto; filter: grayscale(1); transition: 0.4s;}
.scrollBox .hd ul li h6{ font-size:0.16rem; font-weight:100; color:#999; text-align:center; margin-top:20px}
.scrollBox .hd ul li.on img{filter: grayscale(0);}
.scrollBox .hd ul li.on h6{color:#00ac97}

.scrollBox .bd{width:100%; height:auto; margin-top:20px!important; 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; width:100%; height:auto; overflow:hidden; position:relative;}
.scrollBox .bd li span img{max-width:100%; height:auto;}
.scrollBox .bd li p{ margin-top:20px; padding:0 10px; line-height:0.3rem; color:#666; font-size:0.16rem; text-align:center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3;/*显示几行*/-webkit-box-orient: vertical;}


/*动态*/
.news_box{ width:100%; height:auto; background-color:#f6f6f6; padding:30px 0}
.news_lr{width:100%; height:auto; padding-bottom:30px; overflow:hidden}
.news_lr .l{ float:left; width:50%; height:auto}
.news_lr .l span{ display:block; font-size:0.2rem}
.news_lr .l em{ display:block; font-size:0.16rem; margin-top:10px; text-transform: uppercase; color:#999}
.news_lr .r{ float:right; width:45%; height:auto}

.y_more{width:100px; height:40px; margin-right:0; overflow:hidden; background-color:#00ac97; text-align:center; border-radius:50px; position:relative; }
.y_more a{position:absolute; left:0; top:0; width:100%; height:100%; line-height:40px; color:#fff; text-align:center; z-index:1; }
.y_more a:hover{ color:#FFFFFF!important;}
.y_more:before{content: ""; position:absolute; right:100%; top:0; width:100%; height:100%; background-color:#017c6d; transition: 0.4s all ease}
.y_more:hover:before{right:0; color:#FFFFFF}

.news{width:95%; height:auto; margin:0 auto; overflow:hidden }
.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:#00ac97; color:#fff;}
.index_news li a:hover{ color:#FFF}
.index_news li:hover p{color:#FFF}
.index_news li:last-child{margin-bottom:0;}
}

/*当浏览器尺寸大于960px时候*/
@media screen and (min-width:960px){
/* 首页焦点图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);  }  /* 去掉链接触摸高亮 */

/*品牌介绍*/
.pinpai{width:100%; height:auto; margin-top:70px; overflow:hidden}
.pinpai .l{ float:left; width:495px; height:auto;}
.pinpai .c{ float:left; width:525px; height:auto; margin-left:80px; overflow:hidden}
.pinpai .r{ float:right; width:200px; height:auto;}

/*小幻灯片*/
.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); /* 取消链接高亮 */  }

.gundong{ width:100%; height:auto;}
.gundong .shuzi{ color:#00ac97}
.gundong .shuzi span{ font-size:40px; margin-right:10px}
.gundong p{ font-size:14px; color:#999; margin-top:8px; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis;}
.gundong+.gundong{ margin-top:30px}

.pp_title{ width:100%; height:auto; padding-bottom:20px; border-bottom:1px solid #d2d2d2}
.pp_title span{ display:block; font-size:26px}
.pp_title em{ display:block; font-size:18px; margin-top:10px; text-transform: uppercase; color:#999}

.pp_content{width:100%; height:auto; margin-top:15px; line-height:32px; font-size:16px; color:#999; overflow:hidden}

/*产品*/
.pro_box{ width:100%; height:auto; padding:50px 0; margin-top:50px;  position:relative}
.pro_box:before{content: ""; position:absolute; top:0; left:0; width:100%; height:500px; background:#f6f6f6 url(../images/anfu.jpg) no-repeat top center;}
.pro_ov{ position:relative;}
.pro_po{ position:absolute; left:0; top:10px}
.pro_po span{ display:block; font-size:26px}
.pro_po em{ display:block; font-size:18px; margin-top:10px; text-transform: uppercase; color:#999}

/* 多图滚动 */
.scrollBox{width:100%; height:auto; text-align:center;}
.scrollBox .hd{ height:auto; overflow:hidden;}
.scrollBox .hd ul{ float:right; overflow:hidden;}
.scrollBox .hd ul li{ float:left;  padding:0 20px; cursor:pointer}
.scrollBox .hd ul li span{ display:block; width:85px; height:auto; text-align:center}
.scrollBox .hd ul li span img{ max-width:100%; height:auto; filter: grayscale(1); transition: 0.4s;}
.scrollBox .hd ul li h6{ font-size:20px; font-weight:100; color:#999; text-align:center; margin-top:30px}
.scrollBox .hd ul li.on img{filter: grayscale(0);}
.scrollBox .hd ul li.on h6{color:#00ac97}

.scrollBox .bd{width:100%; height:auto; margin-top:50px!important; 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; width:100%; height:auto; overflow:hidden; position:relative;}
.scrollBox .bd li span img{max-width:100%; height:auto;}
.scrollBox .bd li p{ margin-top:20px; padding:0 10px; line-height:30px; color:#666; font-size:20px; text-align:center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3;/*显示几行*/-webkit-box-orient: vertical;}

/*动态*/
.news_box{ width:100%; height:auto; background-color:#f6f6f6; padding:80px 0; margin-top:40px;}
.news_lr{width:100%; height:auto; padding-bottom:30px; overflow:hidden}
.news_lr .l{ float:left; width:50%; height:auto}
.news_lr .l span{ display:block; font-size:26px}
.news_lr .l em{ display:block; font-size:18px; margin-top:10px; text-transform: uppercase; color:#999}
.news_lr .r{ float:right; width:45%; height:auto}

.y_more{width:140px; height:40px; margin-right:0; overflow:hidden; background-color:#00ac97; text-align:center; border-radius:50px; position:relative; }
.y_more a{position:absolute; left:0; top:0; width:100%; height:100%; line-height:40px; color:#fff; text-align:center; z-index:1; }
.y_more a:hover{ color:#FFFFFF!important;}
.y_more:before{content: ""; position:absolute; right:100%; top:0; width:100%; height:100%; background-color:#017c6d; transition: 0.4s all ease}
.y_more:hover:before{right:0; color:#FFFFFF}

.news{width:1380px; min-width:1380px; margin:0 auto; height:auto; overflow:hidden }
.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:#00ac97; color:#fff;}
.index_news li a:hover{ color:#FFF}
.index_news li:hover p{color:#FFF}
.index_news li:last-child{margin-bottom:0;}


}
