﻿.banner{width:100%;position:relative;}
.banner .font{position:absolute;bottom:0;left:0;width:100%;height:auto;padding:20px 0 20px 7%;box-sizing:border-box;background:rgba(0,150,86,0.8);z-index:999;}
.banner .font img{width:50%;}
.swiper-container {width: 100%;height: auto;overflow:hidden;}
.swiper-slide {width:100%;height:100%;overflow:hidden;text-align: center;font-size: 18px;background: #fff;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 a{height:100%;}
.swiper-slide img{height:100%;transition: all 0.5s;margin:0 auto;}
.swiper-slide:hover img{transform: scale(1.05);}

.about{padding:50px 0 50px 0;}
.about h1{font-size:26px;font-weight:600;line-height:30px;padding-bottom:5px;}
.about h2{font-size:15px;text-transform:uppercase;letter-spacing:3px;}
.about p{font-size:16px;color:#222;padding:20px 0;line-height:30px;}
.about p b{font-weight:bold;}
.about ul{display:flex;justify-content:space-between;}
.about ul li{width:31%;}
.about ul li div{border:2px solid #009656;border-radius:50%;}
.about ul li div img{border-radius:50%;border:6px solid #fff;width:100%;box-sizing:border-box;}
.about ul li p{font-size:16px;text-align:center;font-weight:500;line-height:40px;padding:0;}

.more{display:block;width:45%;background:#009656;color:#fff;font-size:16px;text-align:center;line-height:52px;border-radius:5px;margin:0 auto;}

.product{padding-bottom:80px;background:#f0f6f4;}
.product .title{padding:50px 0 50px 0;}
.product .title h1{font-size:36px;color:#000;font-weight:bold;text-align:center;}
.product .title ul{display:flex;justify-content:flex-end;width:52%;justify-content:space-between;}
.product .title li{width:23%;line-height:55px;font-size:var(--f22);color:#827e7e;border-radius:30px;border:1px solid #cdcdcd;text-align:center;cursor:pointer;height:55px;}
.product .title li.on{background:#006835;border:none;color:#fabf16;font-weight:500;}
.product .plist ul{display:flex;flex-wrap:wrap;justify-content:space-between;padding-bottom:30px;}
.product .plist ul li{width:23%;color:#006835;padding-bottom:40px;text-align:center;}
.product .plist ul li .img{width: 100%;height: 200px;position: relative;overflow: hidden;border-radius:20% 0;box-sizing:border-box;border:1px solid #006835;}
.product .plist ul li .img img{position: absolute;object-fit: cover;width: 100%;left: 0;top: 0;height:100%;}
.product .plist ul li h1{font-size:var(--f28);color:#006835;font-weight:600;padding-top:20px;line-height:1.6}
.product .plist ul li p{font-size:var(--f16);color:#999;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
.product .plist ul li:hover .img{}

.ad{width:100%;height:auto;background:url(/images/ad.jpg) no-repeat top right;border-radius:180px 0 0 0;color:#fff;background-size:auto 100%;}
.ad .text{width:55%;padding:8vw 0 8vw 3vw;}
.ad h2{font-size:var(--f50);font-weight:600;padding-bottom:30px;}
.ad p{font-size:var(--f18);line-height:1.8;text-align:justify;}

.article{padding-top:100px;padding-bottom:150px;box-sizing:border-box;}
.article .title{display:flex;justify-content:space-between;padding-bottom:50px;}
.article .title h1{font-size: var(--f50);font-weight: bold;color:#000;}
.article .title .more{height:52px;}
.article .more2{display:none;}

.article .list{display:flex;justify-content:space-between;position:relative;}
.article .list .swiper-article{width:50%;margin:0;height:500px;border-radius:0;}
.swiper-article .swiper-slide a{display:flex;width:100%;height:100%;position:relative;justify-content:center;overflow:hidden;}
.swiper-article .swiper-slide a *{transition-duration: 0.5s;}
.swiper-article .swiper-slide a img{width: 100%;height: 100%;object-fit: cover;position: absolute;left: 0;top: 0;}
.swiper-article .swiper-slide div{background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.7));position:absolute;left:0;bottom:0;width:100%;color:#fff;text-align:left;padding:5% 6%;box-sizing:border-box;}
.swiper-article .swiper-slide div h1{font-size:var(--f26);line-height:36px;font-weight:600;}
.swiper-article .swiper-slide div h3{font-size:16px;line-height:30px;}

.article .list .right{width:50%;box-sizing:border-box;background:#f6f6f6;padding:40px 0 40px 4%;}
.list .right ul{display:flex;flex-direction:column;justify-content:space-between;height:100%;}
.article .list li *{transition: all 0.5s;}
.article .list li{width:100%;padding:20px 0 20px 20px;position:relative;box-sizing:border-box;}
.article .list li:after{content:"";background:#006835;width:5px;height:0;position:absolute;top:0;right:0;transition: all 0.5s;}
.article .list li a{display:flex;justify-content:space-between;}
.article .list li h1{font-size:var(--f22);line-height:1.6;color:#444;font-weight:500;width:70%;}
.article .list li h3{font-size:var(--f18);font-weight:400;padding-bottom:10px;width:30%;text-align:center;color:#888;line-height:1.7;}
.article .list li:hover:after{height:90px;}
.article .list li:hover h1,.article .list li:hover h3{color:#006835;font-weight:bold}

@media screen and (max-width:1440px){
	.swiper-container{height:650px;}
	

}
@media screen and (max-width:1280px){
	.swiper-container{height:550px;}
	
	.product .title{padding:100px 0 40px 0;}

	.article .list .swiper-article{height:450px;}
	.article .list .item h1{font-size:18px;line-height:26px;}
}
@media screen and (max-width:1024px) {
	.swiper-container{width:100%;height:40vw;}
	.product .title ul{width:60%;}
	.product .title ul li{line-height:45px;height:45px;}
	
	.ad{border-radius:150px 0 0 0;}
	.ad .text{width:70%;}

	.article .list .swiper-article{height:450px;}
}
@media screen and (max-width: 820px){
	.banner{width:100%;box-sizing:border-box;}
	.swiper-container{width:100%;height:auto;}
	.swiper-slide img{width:100%;height:auto;}	
	
	.ad{background-position:-300px bottom;border-radius:70px 0 0 0;}
	.ad .text{width:85%;}

	
	.article{padding-top:80px;padding-bottom:80px;}
	.article .title{width:96%;margin:0 auto;}
	.article .title h2{font-size:34px;padding-bottom:20px;}
	.article .list{flex-direction:column;}
	.article .list .swiper-article{height:350px;width:100%;}	
	.article .list li{padding:7px 0 7px 0;}
	.article .list .right{width:100%;}
}
@media screen and (max-width:768px){
	.swiper-container{}
	.swiper-slide a{width:100%;}
	.product .plist ul li h1{padding-top:10px;}
}

@media screen and (max-width:670px){
	

	
	

	.product{padding-bottom:60px;}
	.product .title{padding:50px 0 20px 0;flex-wrap:wrap;}
	.product .title h1{width:100%;text-align:center;padding-bottom:10px;font-size:28px;}
	.product .title ul{width:100%;}
	.product .title ul li{line-height:40px;height:40px;}
	.product .plist ul li{width:48%;padding-bottom:20px;}

	.ad{border-radius:80px 0 0 0;background:url(/images/ad-wap.jpg?v=1) no-repeat bottom center;background-size:100% auto;}
	.ad .text{width:100%;padding:60px 0 100px 0;}	

	.article{padding:50px 0;}
	.article .title{padding-bottom:20px;justify-content:center;}	
	.article .title .more{display:none;}
	.article .more2{display:block;margin:40px auto 0 auto;}
	.article .list .right{padding:20px;}
	.article .list .swiper-article{height:230px;}	
	.swiper-article .swiper-slide div{padding:10px 10px;}
	.swiper-product .swiper-slide a div{padding-top: 124%;}
	.swiper-product .swiper-slide a div h1{font-size:20px;line-height:20px;}

	.swiper-article .swiper-slide div h1{font-size:17px;line-height:24px;}
	.article .list li h3{text-align:right;font-size:14px;}
}