@charset "utf-8";
@import "page.css";
#wweb{width:100%;padding:60px 0;}
#wweb .list .img{text-align:center;}
#wweb .list .text{width:calc(100% - 600px);padding-top:150px;}
#wweb .list .text big{display:block;font-size:24px;}
#wweb .list .text small{display:block;font-size:14px;margin-top:10px;color:#878B99;}
#wweb .list .text .pic{margin-top:30px;}

#wweb_why{width:100%;padding:60px 0;background:url("../images/wweb_bg_1.jpg") center center;background-size:cover;}
#wweb_why .list{margin-top:30px;text-align:center;}
#wweb_why .list .text{color:#fff;font-size:16px;margin-top:20px;}
#wweb_why .list .pic img{width:300px;}

#wweb_wyx{width:100%;padding:60px 0;}
#wweb_wyx .list{margin-top:30px;text-align:center;}
#wweb_wyx .list img{width:800px;}

#wweb_hy{width:100%;padding:60px 0;background:url("../images/wweb_bg_2.jpg") center center;background-size:cover;}
#wweb_hy .list ul li{float:left;width:calc(100% / 4);text-align:center;margin-top:30px;}
#wweb_hy .list ul li .box{border:5px solid rgba(255,255,255,.5);width:150px;height:150px;border-radius:100%;overflow:hidden;position:relative;margin:0 auto;}
#wweb_hy .list ul li .box .img{width:100%;height:100%;overflow:hidden;}
#wweb_hy .list ul li .box .img img{width:100%;height:100%;object-fit:cover;}
#wweb_hy .list ul li .box .info{position:absolute;left:0;top:0;width:100%;padding:45px 0;text-align:center;color:#fff;background:rgba(0,0,0,.5);}
#wweb_hy .list ul li .box .info big{display:block;font-size:20px;}
#wweb_hy .list ul li .box .info small{display:block;font-size:12px;text-transform:uppercase;}

#wweb_gn{width:100%;padding:60px 0;}
#wweb_gn .list ul li{float:left;width:calc(100% / 6);text-align:center;margin-top:30px;}
#wweb_gn .list ul li big{font-size:18px;display:block;margin-top:10px;}
#wweb_gn .list ul li small{font-size:14px;display:block;color:#878B99;}

@media (max-width:800px){
	body,html{font-size:.21rem;line-height:.34rem;}
	
	#wweb{padding:.6rem 0;}
	#wweb .list .img{text-align:center;float:inherit;width:100%;}	
	#wweb .list .img img{width:3rem;}
	#wweb .list .text{float:inherit;width:100%;padding-top:.2rem;text-align:center;}
	#wweb .list .text big{font-size:.26rem;}
	#wweb .list .text small{font-size:.21rem;margin-top:.1rem;}
	#wweb .list .text .pic{margin-top:.3rem;}
	
	#wweb_why{padding:.6rem 0;}
	#wweb_why .list{margin-top:.3rem;}
	#wweb_why .list .text{font-size:.21rem;margin-top:.2rem;}
	#wweb_why .list .pic img{width:3rem;}
	
	#wweb_wyx{padding:.6rem 0;}
	#wweb_wyx .list{margin-top:.3rem;}
	#wweb_wyx .list img{width:100%;}
	
	#wweb_hy{padding:.6rem 0;}
	#wweb_hy .list ul li{float:left;width:calc(100% / 2);margin-top:.3rem;}
	#wweb_hy .list ul li .box{border:.05rem solid rgba(255,255,255,.5);width:1.5rem;height:1.5rem;}
	#wweb_hy .list ul li .box .info{padding:.45rem 0;}
	#wweb_hy .list ul li .box .info big{font-size:.26rem;}
	#wweb_hy .list ul li .box .info small{font-size:.16rem;}
	
	#wweb_gn{padding:.6rem 0;}
	#wweb_gn .list{margin-top:0;}
	#wweb_gn .list ul li{width:30%;margin-top:.3rem;margin-right:5%;}
	#wweb_gn .list ul li:nth-child(3n){margin-right:0;}
	#wweb_gn .list ul li img{width:1rem;}
	#wweb_gn .list ul li big{font-size:.26rem;margin-top:.1rem;}
	#wweb_gn .list ul li small{font-size:.21rem;line-height:.34rem;height:.7rem;margin-top:.1rem;}
}