.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) }
}

#product{height:auto;position:relative;padding:90px 0;background:#f7f7f8;}

.title{width:100%;padding-bottom:50px;}
.title .content{width:80%;float:left;color:#4b4c50;}
.title .content h3{font-family: Noto Sans SC;font-weight:800;font-size:45px;letter-spacing:-2px;}
.title .content h2{font-family:'OPPOSans-Bold';/*font-weight:bold;*/font-size:35px;}
.title .more *{transition-duration: .5s;}
.title .more{font-size:16px;color:#484b50;float:right;position:relative;margin-top:40px;font-family:'OPPOSans-Medium';}
.title .more i{font-family:iconfont;font-size:20px;color:#666;}
.title .more:after{content:"";width:30px;height:17px;background:rgba(0,0,0,0.07);position:absolute;top:-10px;left:-20px;}
.title .more:hover i{padding-left:10px;}

.tab{width:100%;padding-bottom:30px;}
.tab li{width:265px;height:85px;float:left;margin-right:35px;padding:15px 30px;box-sizing:border-box;background:#f7f7f8;border:3px solid #00873b;color:#00873b;}
.tab li h2{font-size:22px;font-family:'OPPOSans-Medium';line-height:36px;}
.tab li h3{font-size:12px;font-family:'OPPOSans-Medium';text-transform:uppercase;}
.tab li.tabactive{background:#00873b;color:#fff;position:relative;}
.tab li.tabactive::after{content:"";width: 0;height: 0;border-width: 12px;border-style: solid;border-color:#00873b transparent transparent transparent;position:absolute;bottom:-25px;left:calc(100% / 2 - 10px);}

#product .list{width:100%;height:auto;padding-top:50px;}
#product .list li{width:calc(calc(100% - 30px) / 4);margin-right:10px;height:calc(calc(100vw - 150px) / 4 * 1.66);overflow:hidden;position:relative;float:left;}
#product .list li *{transition: all 600ms ease;}
#product .list li:last-child{margin-right:0px;}
#product .list li img{width: 100%;position: absolute;top: 0;left: 0;object-fit: cover;height: 100%;}
#product .list li div{background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0, 0, 0, 0) 100%);position:absolute;width:100%;height:30%;top:0;left:0;box-sizing:border-box;padding:40px 30px 0 30px;color:#fff;z-index:9;}
#product .list li div h1{font-family:'OPPOSans-Bold';font-size:30px;line-height:50px;}
#product .list li div hr{width:60px;height:4px;background:#fff;border:none;}
#product .list li div p{font-size:15px;line-height:26px;font-family:'OPPOSans-Regular';padding-top:100px;opacity:0;text-align:justify;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow:hidden;}
#product .list li:hover div{background: linear-gradient(180deg, rgba(0,135,60,1) 10%, rgba(0, 0, 0, 0) 100%);height:70%;}
#product .list li:hover p{padding-top:20px;opacity:1;}
#product .list li:hover img{width:110%;height:110%;top:-5%;left:-5%;}

#tabcontent2 picture img{width:100%;border-radius: 8px;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);overflow: hidden;}

#about{padding:100px 0;background:url(/images/about-bg.jpg?v=1) no-repeat right top #00873b;background-size:auto 100%;min-height:710px;box-sizing:border-box;}
#about .wrap{}
#about .title .content{color:#fff;}
#about .introduce{padding-right:45%;color:#fff;}
#about .introduce h2{font-size:26px;font-family:'OPPOSans-Bold';padding-bottom:30px;line-height:40px;}
#about .introduce p{font-size:17px;font-family:'OPPOSans-Medium';line-height:28px;text-align:justify;padding-bottom:50px;}
#about .introduce a{display:block;width:168px;height:50px;background:#fff;border-radius:30px;color:#00873b;font-size:18px;font-family:'OPPOSans-Medium';text-align:center;line-height:50px;}
#about .introduce a i{font-family:iconfont;font-size:24px;}

    .swiper-container {
        width: 100%;
        height: calc(calc(100vw - 120px) * 0.28);
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

.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;    
}
.swiper-slide img{width:100%;}
 


#news{padding:80px 0 150px 0;}
#news li{width:28.6%;margin-right:7%;float:left;}
#news li div{overflow:hidden;position:relative;height:250px;border-radius:12px;}
#news li div img{width: 100%;position: absolute;top: 0;left: 0;object-fit: cover;height: 100%;}
#news li:last-child{margin-right:0;}
#news li h1{font-size:26px;font-family:'OPPOSans-Bold';line-height:70px;padding-top:30px;color:#181c17;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#news li p{font-size:16px;font-family:'OPPOSans-Medium';color:#777;text-align:justify;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow:hidden;line-height:26px;}
#news li h5{font-family:Rubik;color:#323232;padding-top:50px;font-size:40px;}
#news li h5 span{font-size:20px;color:#686868;}



@media screen and (min-width:1440px){
    .header{padding:40px 40px 20px 40px;}
}
@media screen and (max-width:1440px) {    

}
@media screen and (max-width:1366px) {
    .flexslider .slides li img{padding-top:3vw;}
    #about .introduce{padding-right:30%;}
    #about{background-image:url(/images/about-bg-1366.jpg);}    
}
@media screen and (max-width:1280px) {
    .flexslider .slides li img{padding-top:4vw;}
    .flexslider{}
    .title .content h3{font-size:40px;}
    #about{background-image:url(/images/about-bg-1280.jpg);}
    #news li div{height:220px;}
    #news li h1{font-size:22px;}
    #news li h5{font-size:36px;}
}
@media screen and (max-width:1024px) {
    #about .introduce{padding-right:20%;}
    
    
    #news .top{padding-right:40px;}
    #news .top a{height:400px;}
    #news .list li{height:123px;padding:15px;}
    #news .list li h1{font-size:17px;line-height:30px;}
    #news .list li p{font-size:14px;line-height:20px;margin-bottom:5px;}
    #news .list li h5{font-size:16px;}
}
@media screen and (max-width:820px){
   .flexslider .slides li img{padding-top:7vw;}  
   .flexslider{height: calc(100vw * 0.55 + 7vw);} 
    .flex-direction-nav li:first-child,.flex-direction-nav li:nth-child(2){width:50px;height:50px;line-height:50px;text-align:center;font-size:18px;}
    .flex-direction-nav .current{line-height:10rem;font-size:4rem;margin-top:2rem;}
    .flex-direction-nav .current b{font-size:5rem;}

    .title .content h3{font-size:35px;}
    .title .content h2{font-size:30px;}

    .tab li{width:200px;height:64px;padding:8px 20px;}
    .tab li h2{font-size:20px;line-height:30px;}
    .tab li h3{font-size:10px;}

    .swiper-container{height: calc(calc(100vw - 60px) * 0.4);}

    #product .list{padding-top:30px;}
    #product .list li{width:calc(calc(100% - 15px) / 4);margin-right:5px;height:calc(calc(100vw - 15px -60px) / 4 * 1.66);}
    #product .list li div{padding:20px 15px 0 15px;}
    #product .list li div h1{font-size:22px;line-height:40px;}
    #product .list li div hr{width:40px;height:3px;background:#fff;border:none;}
    #product .list li div p{font-size:14px;line-height:24px;padding-top:100px;opacity:0;}
    #product .list li:hover p{padding-top:20px;opacity:1;}
    #product .list li:hover img{width:110%;height:110%;top:-5%;left:-5%;}

   #about{background-image:url(/images/about-bg-820.jpg);}
   #news li{width:46.5%;margin-right:0;float:left;}
   #news li:first-child{margin-right:7%;}
   #news li:last-child{display:none;}
}
@media screen and (max-width:512px){
    .wrap{padding:0 20px;}
    .flexslider .slides li img{padding-top:15vw;}    
    .flexslider{height: calc(100vw * 1.25 + 15vw);} 
    .flex-direction-nav{padding:0 20px;bottom:-35px;}
    .flex-control-nav{bottom:20px;width:54px;}
    .flex-control-nav li{width:12px;height:12px;}
     .swiper-container{height: calc(calc(100vw - 40px) * 1.3);}
     .swiper-button-next, .swiper-button-prev{display:none;}
    
    #product{padding:40px 0;}
    .title{padding-bottom:30px;}
    .title .content h3{font-size:28px;}
    .title .content h2{font-size:25px;}  
    #product .title .more{display:none;}     
     #product .list li{width:calc(calc(100% - 5px) / 2);margin-right:5px;height:calc(calc(100vw - 5px -40px) / 2 * 1.66);margin-bottom:5px;}
     #product .list li:nth-child(even){margin:0;}

    .tab{padding-bottom:20px;}
    .tab li{width:140px;height:55px;padding:8px 20px;margin-right:15px;}
    .tab li h2{font-size:17px;line-height:20px;}
    .tab li h3{font-size:8px;font-family:arial;}
    .tab li.active{border:2px #00873b solid;}

    #about .introduce{padding-right:0%;}
    #about{background-image:url(/images/about-bg-wap.jpg);background-position:right bottom;padding:50px 0 300px 0;background-size:100% auto;}
    #about .introduce h2{font-size:17px;padding-bottom:20px;line-height:28px;text-align:justify;}
    #about .introduce p{font-size:15px;line-height:24px;padding-bottom:50px;}
    #about .introduce a{width:140px;height:40px;background:#fff;border-radius:30px;color:#00873b;font-size:16px;line-height:40px;}
    #about .introduce a i{font-size:20px;}

    #news{padding:60px 0 80px 0;}
    #news li{width:100%;margin:0 0 40px 0;}
    #news li:last-child{display:block;}
    #news li h1{font-size:18px;line-height:40px;padding-top:5px;}
    #news li h5{padding-top:10px;font-size:28px;}
    #news li p{font-size:15px;line-height:24px;}
}