@charset "utf-8";
/* CSS Document */
body{ background-color:#FFF; padding-top:110px; }
.float{ width:768px; left:0; top:0; height:100%; position:fixed; margin-left:-384px; background-color:rgba(0,0,0,0.9); z-index:1200; display:none; }
.float > .f-navlist{ width:100%; position:absolute; left:0; top:0; z-index:1002; display:none;}
.float > .f-navlist > h3{ width:100%; height:48px; line-height:48px; font-size:16px; box-sizing:border-box; padding-left:10px; padding-right:10px; border-bottom:1px solid rgba(255,255,255,0.8); color:#333; text-align:center; font-weight:normal; color:#FFF;} 
.float > .f-navlist > h3 > span{ float:left;}
.float > .f-navlist > h3 > span a,.float > .f-navlist > h3 > span a:hover{ color:#FFF;}
.float > .f-navlist > h3 > span:nth-of-type(2){ float:right; }
.float > .f-navlist > h3 > span > i{ font-size:14px;}
.float > .f-navlist > ul{ width:100%; box-sizing:border-box; box-sizing:border-box;}
.float > .f-navlist > ul > li{ width:100%; height:40px; line-height:40px; font-size:12px; overflow:hidden; text-align:left; box-sizing:border-box; padding-left:10px; padding-right:10px; border-bottom:1px solid rgba(255,255,255,0.6);}
.float > .f-navlist > ul > li + li{}
.float > .f-navlist > ul > li > a,.float > .f-navlist > ul > li > a:hover{ color:#FFF !important; }
.float > .f-navlist > ul > li > a > i{ color:#FFF; font-size:14px;}
.float > .f-navlist > ul > li:hover{ background-color:#000;}
.float > .f-navlist > ul > li:hover > a,.float > .f-navlist > ul > li > a:hover,.float > .f-navlist > ul > li:hover > a > i,.float > .f-navlist > ul > li:hover > a:hover > i{ color:#FFF !important; }

.header{ width:100%; position:fixed; left:0; top:0; background-color:rgba(255,255,255,0); z-index:1000; box-sizing:border-box; }
.header > .c-con{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; align-items:center; }
.header > .c-con > .logo{ width:420px;padding-top:15px; padding-bottom:15px; display:block; }
.header > .c-con > .logo > img{ width:100%;}
.hc-right{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; align-items:center; height:100px; }
.nav{ position:relative;}
.nav > ul > li{ float:left; cursor:pointer; position:relative; z-index:1210;}
.nav > ul > li > a{ position:relative; display:block; padding:0 20px; height:32px; line-height:32px; font-size:16px; color:rgba(0,0,0,0.8); box-sizing:border-box;}
.nav > ul > li i,.header > .c-con > .nav > ul > li > h3{ font-size:18px;}
.nav > ul > li:hover > a{ background-color:#FFF; color:#00a0ea}
.nav > ul > li:hover{ color:#0569a5;}
.scrolltop{ background-color:rgba(255,255,255,1); border-bottom:1px solid rgba(120,120,120,0.2);  animation: fadeInDown 0.5s ease-in-out; -webkit-animation: fadeInDown 0.5s ease-in-out;}
.scrolltop > .c-con > .nav > ul > li > a,.scrolltop > .c-con > .nav > ul > li i,.scrolltop > .c-con > .nav > h3{ color:#333; }
.header > .c-con > .btn-nav{ width:24px; height:24px; text-align:center; line-height:22px; border-radius:4px; position:absolute; right:10px; top:50%; margin-top:-13px; display:none;border:1px solid #EEE; border-radius:4px;}

.links{ width:100%; background-color: #3b3b3b; }
.links > .c-con{ padding-left:90px; position: relative; padding-top: 10px; padding-bottom:10px; }
.links > .c-con > h3{ width: 90px; height:24px; line-height: 24px; font-weight: normal; text-align: center; font-size: 14px; position:absolute; left:0; top:10px;color: rgba(255,255,255,0.6); }
.links > .c-con > h3 > i{ font-style: 16px; }
.links > .c-con > .links-list{ width:100%; height: auto; }
.links > .c-con > .links-list > ul > li{ width:11.11%; height:24px; line-height:24px; float: left; text-align: center; font-size:12px; position: relative; box-sizing: border-box; padding-left:10px; padding-right:10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.links > .c-con > .links-list > ul > li::after{ content: ' '; width:1px; height: 14px; background-color: rgba(255,255,255,0.6); position: absolute; right:0; top:50%; margin-top: -7px; }
.links > .c-con > .links-list > ul > li:nth-of-type(9n)::after{ display: none; }
.links > .c-con > .links-list > ul > li > a{ color: rgba(255,255,255,0.6); }

.footer{ width: 100%; background-color: #181818; padding-top: 3%; padding-bottom:3%; }
.footer > .c-con{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-content: center;}
.footer > .c-con > div{ }
.foot-copyright{ width:38%; box-sizing: border-box; padding-top: 10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-content: center;}
.foot-copyright > h3{ width:100%; margin-bottom:20px; box-sizing: border-box; padding-right:15%; }
.foot-copyright > h3 img{ width: 100%; }
.foot-copyright > .copyright{ width:100%; height: auto; line-height: 24px; font-size: 14px; color: rgba(255,255,255,0.6); box-sizing: border-box; padding-right:10%;}
.foot-contact{ width:42%; position:relative; box-sizing:border-box; border-left:1px solid #6e6e6e; border-right:1px solid #6e6e6e; }
.foot-contact > img{ width:100%; }
.foot-contact > .fc-cont{width:100%; height: 100%; position:absolute; left:0; top:0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;  align-content: center;}
.foot-contact > .fc-cont > div{ line-height:26px;  color: rgba(255,255,255,0.6); font-size: 14px; align-self:center; }
.foot-online{ width:20%; align-self: center;  }
.fo-ewm{ width:100%; align-self: center; }
.fo-ewm > p{ width:100px; margin:0 auto; }
.fo-ewm > p img{ width:100%; }
.fo-ewm > h3{ width:100%; text-align: center; margin-top: 10px; font-size:14px; color: rgba(255,255,255,0.6); font-weight: normal; }

/*首页*/
/*焦点图*/
.swiper1 .swiper-pagination {right:0; display:inline-block;  padding-top:2%; padding-bottom:2%; bottom:0; left:auto; text-align:center; padding-right:10px; box-sizing:border-box;}
.swiper1 .swiper-pagination-bullet{opacity:1; background-color:rgba(255,255,255,1); margin:0 3px!important;width:50px; height:4px; border-radius:0%; box-sizing:border-box;}
.swiper1 .swiper-pagination-bullet-active{background-color:rgba(0,0,0,0.4);}
.swiper1 .swiper-slide{ position:relative;}
.swiper1 .swiper-slide > img{ width:100%;}
.swiper1 .swiper-button-next,.swiper1 .swiper-button-prev{ color:rgba(255,255,255,1); background-color:rgba(29,48,60,0.8); border-radius:2px; height:40px; width:40px; line-height:40px; text-align:center; background-image:url(none); cursor:pointer;  box-sizing:border-box;  } 
.swiper1 .swiper-button-next:hover,.swiper1 .swiper-button-prev:hover{ color:rgba(255,255,255,0.8); background-color:rgba(29,48,60,1);} 
.swiper1 .swiper-button-next i,.swiper1 .swiper-button-prev i{ font-size:20px; }
.swiper-slide-active  .sa-cen{animation: pulse 1s ease-in-out; -webkit-animation: pulse 1s ease-in-out;}

.main{}

/*产品*/
.prods{ width:100%; padding-top:6% ; padding-bottom:6%; }
.prods > .prod-header{ width:100%; box-sizing: border-box; padding-left:6%; position:relative; height: 32px; }
.prods > .prod-header::after{ content: ' '; width:6%; height: 2px; background-color: #999; position:absolute; left:0; top:16px; }
.prods > .prod-header > h3{ font-weight: normal; font-size: 16px; float:left; height: 32px; line-height: 32px; padding:0 10px; }
.prods > .prod-header > .ph-tab{ height:32px; float: right; width:auto; display: inline-block;font-size:0; }
.prods > .prod-header > .ph-tab > li{display: inline-block; height: 32px; line-height: 32px; padding:0 10px; position: relative;  }
.prods > .prod-header > .ph-tab > li > a{ display: inline-block; height: 32px; line-height: 32px; font-size:14px; padding:0 10px; }
.prods > .prod-header > .ph-tab > li > a:hover{ color: #FFF !important; background-color: rgba(30,150,213,1); }
.prods > .prod-header > .ph-tab > li::after{ content:' '; width:1px; height: 14px; background-color: #999; position: absolute; left:0; top:50%; margin-top: -7px;  }
.prods > .prod-header > .ph-tab > li:nth-of-type(1)::after{ display: none; }
.prods > .prod-header > .ph-tab > li:nth-of-type(1){ padding-left:0; }
.prods > .prod-header > .ph-tab > li:nth-last-of-type(1){ padding-right:0; }
.btn-prodmenu{ width: 30px; height: 30px;  box-sizing: border-box; border:1px solid #FFF; line-height: 26px; position: absolute; right:0; top:50%; margin-top: -15px; border-radius: 2px; background-color: #FFF; display: none; }
.prods > .prod-list{ width:100%; height: auto;  margin-top: 10px; }
.prods > .prod-list > ul > li{ width: 23.5%; float: left; margin-top: 2%; margin-right:2%; position: relative; }
.prods > .prod-list > ul > li:nth-of-type(4n){ margin-right:0; }
.prods > .prod-list > ul > li > .pl-img{ width:100%; display: block; position: relative; }
.prods > .prod-list > ul > li > .pl-img > img{ width: 100%; }
.prods > .prod-list > ul > li > .pl-img > h3{ width:100%; height: 36px; line-height: 20px; background-color: rgba(0,0,0,0.5); position: absolute; left:0; bottom:0; font-weight: normal; box-sizing: border-box; padding:8px 10px; font-size: 14px; color: #FFF; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prods > .prod-list > ul > li > .pl-title{ width:100%; height: 100%; position: absolute; left: 0; top:0; background-color: rgba(30,150,213,0.9); box-sizing: border-box; padding:10px; display: none; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; }
.prods > .prod-list > ul > li > .pl-title > a{ display: block; width: 100%; height: 100%; box-sizing:border-box; padding:10px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content:center; align-items:center; align-content: center;color: #FFF; }
.prods > .prod-list > ul > li > .pl-title > a > h3,.prods > .prod-list > ul > li > .pl-title > a > h4{ width:100%; font-weight: normal; text-align: center; font-size: 14px; height: 24px; line-height: 24px; overflow: hidden; text-overflow: ellipsis;}
.prods > .prod-list > ul > li > .pl-title > a > h4{ font-size:16px; margin-top: 5px; }
.prods > .prod-list > ul > li > .pl-title > a > p{ width:40%; height: 30px; line-height:16px; margin:0 auto; text-align: center; box-sizing: border-box; border: 1px solid #FFF; margin-top: 10px; }
.prods > .prod-list > ul > li > .pl-title > a > p i{ font-size: 24px }
.prods > .prod-list > ul > li:hover > .pl-img > h3{ display: none; }
.prods > .prod-list > ul > li:hover > .pl-title{ display: block; }
.prods > .prod-list > ul > li:hover > .pl-title > a{ color: #FFF !important; }

/*关于我们*/
.about{ width: 100%; background-image: url(../images/about.png); background-repeat: no-repeat; background-position: center top; }
.about > .c-con{ padding-top: 6%; padding-bottom:6%; }
.about-header{ width: 100%;  }
.about-header > h3,.about-header > p{ width:100%; font-weight: normal; font-size: 20px; text-align: left; text-transform: uppercase;}
.about-con{ width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:center; align-items:center;}
.ac-cen{ width:50%; box-sizing: border-box; padding-right:3%; padding-bottom:3%; }
.ac-cen > p{ width:100%; font-size:14px; text-align: left; line-height: 26px; max-height:208px; overflow: hidden;  }
.ac-cen > .ac-cen-more{ width: 80px; height: 30px; line-height: 28px; text-align: center; text-transform: uppercase; border:1px solid #1e96d5; color: #1e96d5; display: block; font-size:14px; border-radius: 2px; margin-top: 3%;box-sizing: border-box; }
.ac-cen > .ac-cen-more:hover{ background-color: #1e96d5; color: #FFF !important; }
.ac-img{ width: 50%; box-sizing: border-box; padding:2%; background-image: url(../images/about-img.png); background-repeat: no-repeat; background-position: left top; position: relative; background-size: 100% 100%; }
.ac-img img{ width:100%; position: relative; z-index: 10; }

/*服务范围*/
.sevice{ width: 100%; background-color: #202020; background-image: url(../images/service.png); background-repeat: no-repeat; background-position: center center; }
.sevice > .c-con{ padding-top: 6%; padding-bottom:6%; }
.sevice-header{ width:100%; box-sizing: border-box; padding-left:6%; position:relative; height: 32px; }
.sevice-header::after{ content: ' '; width:6%; height: 2px; background-color: #FFF; position:absolute; left:0; top:16px; }
.sevice-header > h3{ font-weight: normal; font-size: 16px; float:left; height: 32px; line-height: 32px; padding:0 10px; color: #FFF; }
.sevice-list{ width: 100%; margin-top: 3%; }
.sevice-list > ul > li{ width:25%; float:left; box-sizing: border-box; padding-bottom:20px; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; }
.sevice-list > ul > li > a{ width: 100%; height: 100%; display: block; box-sizing: border-box; padding:6%; color: rgba(100,100,100,0.8); position: relative;}
.sevice-list > ul > li > a > p{ width: 60px; height: 60px; text-align: center; line-height: 60px; margin:0 auto; }
.sevice-list > ul > li > a > p > i{ font-size: 40px; }
.sevice-list > ul > li > a > h3{ width:100%; height: 30px; line-height: 30px; font-weight: normal; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 10px; }
.sevice-list > ul > li > a > h4{ width:100%; height: 48px; line-height: 24px; font-weight: normal; font-size: 14px; overflow: hidden; margin-top: 10px;}
.sevice-list > ul > li > a::after{ content: ' '; width:20px; height: 2px; background-color: rgba(100,100,100,0.8); position: absolute; left:50%; bottom:0px; margin-left:-10px; }
.sevice-list > ul > li:hover{ background-color: #1e96d5; }
.sevice-list > ul > li:hover > a{ color: #FFF !important;}
.sevice-list > ul > li:hover > a::after{ background-color: #FFF; }

/*新闻中心*/
.news{ width: 100%; background-color: #f2f2f2; }
.news > .c-con{ padding-top: 6%; padding-bottom:6%; display: flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start; }
.news-ad{ width:42%; position:relative; }
.news-ad img{ width:100%;}
.news-ad > .news-ad-about{ width:80%; height:auto; background-color:#FFF; position:absolute; left:50%; bottom:-52px; margin-left:-40%; box-sizing:border-box; padding:20px;}
.news-ad > .news-ad-about > h3{ width:100%; font-weight:normal; font-size:14px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news-ad > .news-ad-about > a{ display:block; width:25%; height:24px; box-sizing:border-box; border:1px solid #666; line-height:22px; text-align:center; margin:0 auto; margin-top:20px;}
.news-ad > .news-ad-about > a > i{ font-size:24px; color:#666;}
.news-list{ width:58%; height:auto; box-sizing:border-box; padding-left:20px; padding-right:58px; position: relative;}
.news-list > ul > li{ width:100%; height:auto; box-sizing:border-box; padding:20px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content:space-between; align-items:center; background-color: #FFF; cursor: pointer; transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out;}
/*.news-list > ul > li:hover,*/.news-list > ul > li.on{background-color:#1e96d5; }
.news-list > ul > li + li{ margin-top:10px;}
.news-list > ul > li > img{ display: none; }
.news-list > ul > li .nl-date{ flex:1; background-color:#FFF; box-sizing:border-box; padding:5px 10px; box-sizing:border-box;}
.news-list > ul > li .nl-date > h3,.news-list > ul > li .nl-date > p{ width:100%; font-size:24px; text-align:center; height:40px; line-height:40px; overflow:hidden; border-bottom:1px solid #FFF; font-weight:normal; }
.news-list > ul > li .nl-date > h3{ border-bottom:1px solid #666;}
.news-list > ul > li .nl-date > p{ height:30px; line-height:30px; font-size:14px; }
.news-list > ul > li .nl-about{ flex:6; box-sizing:border-box; padding-left:10px; }
.news-list > ul > li .nl-about > h3,.news-list > ul > li .nl-about > p{ width:100%; font-weight:normal; font-size:16px; }
.news-list > ul > li .nl-about > h3{ height:24px; line-height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.news-list > ul > li .nl-about > p{ height:auto; font-size:14px; margin-top:5px; line-height:24px; height:48px; overflow:hidden;} 
/*.news-list > ul > li:hover .nl-about > h3 > a,.news-list > ul > li:hover .nl-about > h3 > a:hover,.news-list > ul > li:hover .nl-about > p,.news-list > ul > li:hover .nl-about > p,*/.news-list > ul > li.on .nl-about > h3 > a,.news-list > ul > li.on .nl-about > h3 > a:hover,.news-list > ul > li.on .nl-about > p,.news-list > ul > li.on .nl-about > p{ color:#FFF !important;}

.news-btn{ width:48px; height: 96px; background-color: #FFF; position: absolute; right:0; bottom:0; }
.news-btn > p{ width:48px; height: 48px; line-height: 48px; text-align: center; box-sizing: border-box; cursor: pointer; }
.news-btn > p:nth-of-type(2){ border-top: 1px solid #EEE; }
.news-btn > p > i{ font-size: 18px; }
.news-btn > p:hover{ background-color: #000000; color: #FFF; }


.client{ width:100%; padding-top: 3%; padding-bottom: 3%; }
.client-header{ width: 100%;  }
.client-header > h3,.client-header > p{ width:100%; font-weight: normal; font-size: 20px; text-align: left; text-transform: uppercase;}
.client-header > h3{ font-size:14px; }