﻿
.flexslider {
	margin: 0 auto 0 auto;
	position: relative;
	width: 100%;
	height: calc(100vw * 0.55);
	zoom: 1;      
}
#banner{
    width:100%;
    position:relative;
}

.flexslider .slides li {
	width: 100%;
	height: 100%;
}
.flexslider .slides li img{width:100%;}




.flex-control-nav {
	position: absolute;
bottom:40px;
z-index: 10;
padding: 0px 0px;
line-height: 25px;
height: auto;
border-radius: 15px;
margin-left: -35px;
left:50%;
z-index:4;
width:70px;
}

.flex-control-nav li {
	margin: 0;
	display: inline-block;
	zoom: 1;
    width:15px;height:15px;border-radius:50%;box-sizing:border-box;float:left;background:#ccc;margin:0 3px;
}

.flex-control-paging li a {
	display: block;
	width: 10px;
    height: 10px;
    margin-top: 4px;    
    font-size: 14px;
    margin-left: 4px;    
    text-align: center;  
    cursor: pointer;
border-radius: 50%;
background:#fff;
}

.flex-control-paging li a.flex-active,
.flex-control-paging li.active {
	border:3px solid #ccc;background:none;
}

.flexslider .slides a {
    display: block;
    width: 100%;
    height: 840px; 
    background-position:center top;
    background-size:auto 100%;
}
@-webkit-keyframes spin {
	from { transform: rotateY(0) }
	to { transform: rotateY(360deg) }
}
@-moz-keyframes spin {
	from { transform: rotateY(0) }
	to { transform: rotateY(360deg) }
}
@keyframes spin {
	from { transform: rotateY(0) }
	to { transform: rotateY(360deg) }
}
.topnew .list{width:48%;float:right;height: calc(1400px  * 0.48 * 0.67);overflow:hidden;}

.swiper-container {
    width: 48%;
    height: calc(1400px  * 0.48 * 0.67);
    margin: 0;
    overflow: hidden;
    float: left;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;    
    position:relative;
    overflow:hidden;
}
.swiper-slide img{width:100%;height:100%;object-fit:cover;position:absolute;left:0;top:0;}
.swiper-slide h1{position:absolute;left:0;bottom:0;display:block;width:100%;height:60px;background:rgba(0,0,0,0.4);box-sizing:border-box;padding-left:15px;color:#fff;line-height:60px;font-size:20px;font-family: OPPOSans-Medium;text-align:left;font-weight:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:80px;}

.tab{width:100%;padding-bottom:2.6vw;}
.tab li{width:150px;height:50px;float:left;margin-right:15px;box-sizing:border-box;background:#e6e6e6;color:#666;line-height:50px;font-size:19px;font-family:'OPPOSans-Bold';text-align:center;border-radius:3px;}
.tab li.tabactive{background:#16b254;color:#fff;position:relative;}
.tab li.tabactive::after{content:"";width: 0;height: 0;border-width: 12px;border-style: solid;border-color:#16b254 transparent transparent transparent;position:absolute;bottom:-23px;left:calc(100% / 2 - 10px);}

.tabcontent .top{}
.tabcontent .top div{width:11vw;height:7vw;overflow:hidden;position:relative;float:left;margin-right:20px;}
.tabcontent .top div img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;}
.tabcontent .top h1{font-size:1.6vw;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family: OPPOSans-bold;line-height:28px;padding-bottom:0.5vw;}
.tabcontent .top p{font-size:15px;color:#999;font-family:'OPPOSans-Medium';text-align: justify;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;line-height:26px;}
.tabcontent ul{padding-top:2vw;}
.tabcontent li{display:flex;justify-content:space-between;align-items:center;line-height:2.5vw;font-size:18px;color:#333;font-family:'OPPOSans-Medium';}
.tabcontent li a{color:#333;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tabcontent li i{font-family:iconfont;color:#16b254;}
.tabcontent li span{font-size:14px;color:#999;font-family:'OPPOSans-Regular';width:130px;text-align:right;}

.title{color:#16b254;font-size:28px;font-family: AlibabaPuHuiTi-ExtraBold;line-height:30px;margin-bottom:30px;}
.title i{font-family:iconfont;}
.title>i{}
.title a{font-size:14px;color:#999;float:right;transition-duration: .5s;font-family:'OPPOSans-Medium';}
.title a:hover{padding-right:10px;}

.news .top a{display:block;}
.news .top .img{width:120px;height:100px;overflow:hidden;position:relative;float:left;margin-right:15px;}
.news .top .img img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;}
.news .top h1{font-size:19px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family: OPPOSans-bold;line-height:32px;}
.news .top p{font-size:15px;color:#999;font-family:'OPPOSans-Medium';text-align: justify;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;line-height:22px;}
.news ul{padding-top:2vw;}
.news li{display:flex;justify-content:space-between;align-items:center;line-height:2.5vw;font-size:17px;color:#333;font-family:'OPPOSans-Medium';}
.news li a{color:#333;display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.news li span{font-size:14px;color:#999;font-family:'OPPOSans-Regular';width:130px;text-align:right;}

.company *{}
.company .scroll{width:100%;height:21vw;overflow:hidden;}
.company li{transition-duration: .3s;line-height:35px;font-size:17px;padding-left:10px;width:100%;font-family:'OPPOSans-bold';text-overflow:ellipsis;white-space:nowrap;overflow:hidden;border-radius:4px;box-sizing:border-box;}
.company li.lieven{background:linear-gradient(to right,#f4f4f4,#fff);}
.company li a{color:#666;}
.company li:hover{background:linear-gradient(to right,#16b254,#fff);line-height:40px;color:#fff;font-size:17px;text-shadow:2px 2px 2px rgba(0,0,0,0.2);}
.company li:hover a{color:#fff;}

.about .titbar{width:100%;line-height:4vw;background:#16b254;color:#fff;text-indent:20px;font-size:20px;font-family:'OPPOSans-bold';}
.about ul{display:block;width:100%;height:20.5vw;background:#f5f5f5;padding:1.5vw;box-sizing:border-box;}
.about li{transition-duration: .3s;margin:10px 2%;background:#fff;text-align:center;width:29%;float:left;height:0;padding-bottom:29%;font-size:16px;}
.about li i{font-family:iconfont;font-size:40px;color:#16b254;padding-top:1.5vw;display:block;}
.about li p{line-height:40px;font-family:'OPPOSans-Medium';}
.about li a{color:#333;}
.about li:hover{background:#16b254;color:#fff;}
.about li:hover a{color:#fff;}
.about li:hover i{color:#fff;}

.content2{padding:50px 0;}
.content2 .news,.content2 .company,.content2 .about{width:calc(calc(100% - 100px) / 3);box-sizing:border-box;float:left;}
.content2 .company{margin:0 50px;}

.product-container {
    width: 100%;
    height: auto;
    margin: 0;    
    position: relative;
    overflow: hidden;
    z-index: 1;
    
}

.product .swiper-slide {
    text-align: center;
    font-size: 18px;
    background:none;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.product .list{padding:50px 50px 40px 50px;width:100%;box-sizing:border-box;background: #fcfbf7;border: 1px solid #ece8e1;}
.product .list .swiper-slide{display:block;width:100%;text-align:center;}
.product .list .swiper-slide div{width:100%;height:0;padding-bottom:100%;overflow:hidden;position:relative;margin-bottom:10px;}
.product .list .swiper-slide div img{max-width:300px;}
.product .list .swiper-slide h1{position:relative;background:none;display:inline;color:#333;padding:0;line-height:40px;font-family:OPPOSans-Bold;}
.product .list .swiper-slide p{color:#999;font-size:15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

.logolist{margin:40px auto;background:#16b254;}
.logolist .title{width:5%;text-align:center;color:#fff;float:left;height:100%;margin:0;vertical-align:middle;font-family:AlibabaPuHuiTi-ExtraBold,iconfont;padding-top:2vw;box-sizing:border-box;}
.logolist .list{display:block;background: #fcfbf7;border: 1px solid #ece8e1;padding:10px;box-sizing:border-box;width:95%;float:right;}
.logolist li{margin:10px;background:#fff;width:18%;margin:1vw 1%;float:left;text-align:center;}
.logolist li img{width:100%;max-width:200px;}
.logolist li:hover img{animation: spin 2s infinite;}

.links{padding-bottom:50px;}
.links .list{}
.links .list a{font-size:17px;font-family:'OPPOSans-Medium';color:#333;line-height:30px;display:block;float:left;padding-right:20px;}
.links .list a:hover{color:#16b254;}

@media screen and (min-width:1440px) {
    .header{padding:40px 40px 20px 40px;}
}
@media screen and (max-width:1440px) {    
    .topnew .list,.swiper-container{height: calc(100vw * 0.48 * 0.67);}
     .tabcontent li{line-height:3vw;}
    .tabcontent .top div{width:12vw;height:7.5vw;}
}
@media screen and (max-width:1366px) {   
    .tabcontent .top p{line-height:22px;}
    .tabcontent .top h1{font-size:1.7vw;}
}
@media screen and (max-width:1280px) {
    .tab li{width:140px;height:45px;font-size:18px;line-height:45px;}
    .tab li.tabactive::after{border-width:10px;bottom:-18px;}
   .tabcontent li{line-height:2.9vw;font-size:17px;}   
   .tabcontent ul{padding-top:2.1vw;}

   .news li{font-size:16px;}
   .about li i{font-size:32px;}
   .about li{font-size:15px;}

    #news li .img{height:220px;}
    #news li h1{font-size:22px;}
    #news li h5{font-size:36px;}
}
@media screen and (max-width:1024px) {
    .tabcontent li{font-size:16px;line-height:3.2vw;}
    .tabcontent ul{padding-top:2vw;}
    .tabcontent .top p{-webkit-line-clamp: 2;}
    .swiper-slide h1{font-size:16px;}

    .news .top .img{height:85px;}
    .news .top h1{}
    .news .top p{line-height:20px;font-size:14px;}
    .news li span{display:none;}
    .news li{line-height:3.6vw;}

    .company .scroll{height:28vw;}
    .about li{width:46%;padding-bottom:32%;margin-bottom:0;}
    .about ul{height:31vw;}
    .about li p{line-height:36px;}

    .logolist .title{width:7%;font-size:24px;line-height:24px;}
    .logolist .list{width:93%;}
}
@media screen and (max-width:820px){
   .tab li{width:140px;line-height:40px;font-size:17px;height:40px;}
    .tabcontent li{font-size:15px;line-height:3.6vw;}
    .tabcontent li:last-child{display:none;}
    .tabcontent li span{font-size:13px;}
   .tabcontent ul{padding-top:1.2vw;}
   .tabcontent .top div{height:9vw;}
   .tabcontent .top h1{font-size:2.2vw;padding-bottom:0;}

   .content2 .news,.content2 .company{width:48%;float:left;}
   .content2 .company{margin:0 0 0 4%;}
   .content2 .about{width:100%;padding-top:30px;}
   .company li{font-size:16px;}
   .company .scroll{height:30vw;}
   .about .titbar{line-height:5vw;}
   .about ul{height:auto;display:flex;justify-content:space-between;}
   .about li{padding-bottom:14.6%;font-size:16px;margin:10px 1%;float:none;}
   .about li i{font-size:34px;padding-top:2.8vw;}
   .about li p{line-height:46px;}

    .product .list{padding:40px 40px 30px 40px;}
    .logolist .title{padding-top:7vw;}
    .logolist li{width:23%;}
}
@media screen and (max-width:512px){
    .wrap{padding:0 15px;width:100%;}

     .swiper-container{width:100%;height:calc(100vw * 0.68);}
     .swiper-button-next, .swiper-button-prev{display:none;}
     .swiper-slide h1{font-size:16px;}

     .content1{padding:0 !important;width:100%;}
     .tab{padding-bottom:20px;}
    .topnew .list{width:100%;height:auto;padding:30px 15px;box-sizing:border-box;}
    .tabcontent li{font-size:16px;line-height:38px;}
    .tabcontent li:last-child{display:flex;}
    .tabcontent li span{font-size:13px;width:120px;}
   .tabcontent ul{padding-top:1.5vw;}
   .tabcontent .top div{width:30%;height:17vw;}
   .tabcontent .top h1{font-size:18px;}

    .content2 .news,.content2 .company{width:100%;float:none;padding-bottom:30px;}
    .title{margin-bottom:15px;font-size:24px;}
    .content2 .company{margin:0;}
    .news .top h1{line-height:22px;padding-bottom:5px;}
    .news li{font-size:16px;line-height:36px;}
    .company .scroll{height:300px;}
    .content2 .about{padding-top:0;margin-bottom:30px;}
    .about .titbar{line-height:40px;}
    .about ul{flex-wrap:wrap;padding:20px;columns:3;}
    .about li{padding-bottom:31.3%;margin:10px 0;width:31.3%;}
    .about li i{padding-top:20px;font-size:8.5vw;}
    .about li p{font-size:3.8vw;}

    .product .list{padding:20px 20px 20px 20px;}
    .product .list .swiper-slide h1{line-height:30px;}

    .logolist{background:#fff;}
    .logolist .title{background:#16b254;width:100%;padding:15px 0;}
    .logolist .title br{display:none;}
    .logolist .list{width:100%;}
    .logolist .list li{width:46%;margin:7px 2%;}

    .links .list a{font-size:15px;}
}





