@charset "utf-8";
#prolist{padding:50px 0}
.title{text-align:center}
.title h3{color:#32B823;font-size:36px}
.title p{}
.prolist{display:flex;justify-content:space-around;max-width:1200px;margin:30px auto}
.prolist li{text-align:center;width: 24%;}
.prolist li p{line-height:4}
.prolist .img{
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 5px #ccc;
}
.prolist .img img{
    display: block;
    max-width: 100%;
}
.prolist li:hover p{color:#33B924}
@media (max-width:768px){
	#prolist{padding-bottom:0}
	.title{}
	.title h3{font-size:20px}
	.title p{line-height:1.5}
	.prolist{flex-wrap:wrap;margin-bottom:0}
	.prolist li{
    width: 46%;
}
	.prolist li p{}
	.prolist .img{}
	.prolist .img:before{}
}
#about{background:url(../images/about-bg.jpg) no-repeat center;padding:100px 0}
.about{}
.about h1{color:#32B823;font-size:36px}
.about div{max-width:700px;margin:10px 0;color:#333}
.about a{color:#000;border-bottom:1px solid;font-weight:bold}
.about a:hover{color:#32B823}
@media (max-width:768px){
	#about{padding:50px 0}
	.about{}
	.about h1{font-size:18px}
	.about div{}
	.about a{}
}

#case{background:#F5F5F5;overflow:hidden;padding:50px 0}
.case{margin:50px 0 20px}
.case li{}
.case a{display:block;position:relative;padding: 0 0 75% 0;border: 1px solid rgba(49,186,34,0.8);}
.case img{display:block;max-width:100%;position: absolute;top: 50%;left: 50%;transform: translate(-50% , -50%);}
.case p{background:rgba(49,186,34,0.8);text-align:center;position:absolute;bottom:0;z-index:2;width:100%;color:#fff;line-height:3}
.case-controls{position:relative;margin-top:15px}
.case-controls .swiper-pagination{text-align:center;position:relative}
.case-controls .swiper-pagination-bullet{background:#DFDFDF;opacity:1;margin:0 1px}
.case-controls .swiper-pagination-bullet-active{background:#33B821}

@media (max-width:768px){
	#case{padding: 30px 0 0;}
	.case{margin-top: 20px;}
	.case li{}
	.case a{}
	.case img{}
	.case p{}
	.case-controls{}
	.case-controls .swiper-pagination{}
	.case-controls .swiper-pagination-bullet{}
	.case-controls .swiper-pagination-bullet-active{}
}
#video{padding:50px 0}
.videoL{}
.videoL img{display:block;max-width:100%}
.videoR{}
.videoR .title{text-align:left}
.videoR p{text-align:left;margin:10px 0 30px;max-width:600px}
.video{
    display: inline-block;
    cursor: pointer;
}
.video img{vertical-align:middle;margin-right:10px}
.video span{font-size:20px}
#youshi{padding-bottom:50px}
#youshi ul{display:flex;justify-content:space-around}
#youshi li{width:50%;max-width:260px;text-align:center}
#youshi img{}
#youshi h4{font-size:20px;margin-bottom:10px}
#youshi p{color:#666;font-size:14px;line-height:1.5}
@media (max-width:768px){
	#video{padding: 20px 0;}
	.videoL{}
	.videoL img{}
	.videoR{}
	.videoR p{}
	.video{}
	.video img{}
	.video span{}
	#youshi{padding-bottom: 20px;}
	#youshi ul{flex-wrap: wrap;}
	#youshi li{}
	#youshi img{}
	#youshi h4{}
	#youshi p{}
}

.videos{
    z-index: 3;
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
    max-width: 100%;
    max-height: 100%;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}
.videos span{display:block;content:'x';position: absolute;top: 10px;right: 10px;color: #fff;z-index: 999;width: 30px;line-height: 30px;border: 1px solid #fff;text-align: center;border-radius: 5px;cursor: pointer;background: rgba(255,255,255,0.5);}
.videos span:hover{background:rgba(255,255,255,1);color: #000;}
.videos video{display: block;}