@charset "utf-8";
@import "page.css";

#seo_one{width:100%;padding:80px 0;}
#seo_one .list{margin-top:20px}
#seo_one .list ul li{float:left;width:calc((100% - 30px) / 2);margin-right:30px;position:relative;margin-top:30px}
#seo_one .list ul li:nth-child(2n){margin-right:0}
#seo_one .list ul li .img{width:100%;min-height:200px}
#seo_one .list ul li .img img{width:100%;height:100%;min-height:200px;object-fit:cover}
#seo_one .list ul li .info{position:absolute;left:30px;bottom:30px;color:#fff}
#seo_one .list ul li .info big{display:block;font-size:24px;position:relative;}
#seo_one .list ul li .info small{display:block;font-size:14px;margin-top:10px;padding-right:40%;line-height:24px}
#seo_one .list ul li .info big:before{content:"";display:inline-block;width:20px;height:3px;background-color:#fff;position:absolute;top:-20px;left:0;}
#seo_one .list ul li:hover .info{bottom:50px;}
#seo_one .list ul li:hover .info big:before{opacity:0}

#seo_two{width:100%;background:url(/theme/2020/static/images/seo_bg_1.jpg) no-repeat center center;background-size:cover;padding:80px 0;}
#seo_two .list{margin-top:50px}
#seo_two .list ul li{float:left;width:calc((100% - 120px) / 5);margin-right:30px;background:#fff;padding:40px 0;text-align:center;border-radius:2px}
#seo_two .list ul li{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#seo_two .list ul li:last-child{margin-right:0}
#seo_two .list ul li .icon{width:80px;height:80px;border:1px solid #eee;text-align:center;margin:0 auto;border-radius:80px}
#seo_two .list ul li .icon i{font-size:40px;line-height:80px;color:#3c6ef0}
#seo_two .list ul li .info{margin-top:20px}
#seo_two .list ul li .info big{font-size:18px;margin-bottom:10px;display:block}
#seo_two .list ul li .info p{color:#999;line-height:24px;}
#seo_two .list ul li:nth-child(2) .icon i{color:#ffaa00}
#seo_two .list ul li:nth-child(3) .icon i{color:#4db849}
#seo_two .list ul li:nth-child(4) .icon i{color:#ff4c4c}
#seo_two .list ul li:nth-child(5) .icon i{color:#336633}
#seo_two .list ul li:nth-child(6) .icon i{color:#FF0033}

#seo_two .list ul li:hover{background:#3c6ef0}
#seo_two .list ul li:hover .info big,
#seo_two .list ul li:hover .info p{color:#fff}
#seo_two .list ul li:hover .icon{border:1px solid #fff;background:#fff;color:#3c6ef0}

#seo_three{width:100%;padding:80px 0}
#seo_three .box{margin-top:50px;position:relative}
#seo_three .box .left{width:48%}
#seo_three .box .right{width:48%}
#seo_three .box .item{width:100%}
#seo_three .box .item .img{width:100%;overflow:hidden}
#seo_three .box .item big{display:block;font-size:22px;font-weight:700;margin-top:20px;}
#seo_three .box .item big em{font-size:18px;color:#888;text-transform:uppercase;margin-left:10px;}
#seo_three .box .item small{display:block;font-size:14px;line-height:22px}
#seo_three .box .blue-box{width:245px;height:315px;background-color:#3c6ef0;position:absolute;top:90px;left:50%;transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%);padding:60px 0 0 40px;z-index:999}
#seo_three .box .blue-box em{display:block;width:50px;height:3px;background-color:#fff;margin-bottom:30px}
#seo_three .box .blue-box big{display:block;font-size:28px;color:#fff;font-weight:600;margin-bottom:20px;line-height:40px}
#seo_three .box .blue-box small{display:block;font-size:16px;color:#fff;text-transform:uppercase;line-height:24px}

#seo_why{width:100%;padding:80px 0;background:url(/theme/2020/static/images/seo_bg_2.png) no-repeat center center;background-size:cover}
#seo_why .list{margin-top:20px}
#seo_why .list ul li{float:left;width:calc((100% - 90px) / 4);margin-right:30px;padding:50px 50px;text-align:center;background:#fff;margin-top:30px}
#seo_why .list ul li{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#seo_why .list ul li:nth-child(4n){margin-right:0}
#seo_why .list ul li .icon i{font-size:50px;color:#3c6ef0}
#seo_why .list ul li:nth-child(2) .icon i{color:#ffaa00}
#seo_why .list ul li:nth-child(3) .icon i{color:#4db849}
#seo_why .list ul li:nth-child(4) .icon i{color:#ff4c4c}
#seo_why .list ul li:nth-child(5) .icon i{color:#336633}
#seo_why .list ul li:nth-child(6) .icon i{color:#FF0033}
#seo_why .list ul li:nth-child(7) .icon i{color:#99CC99}
#seo_why .list ul li:nth-child(8) .icon i{color:#0099CC}
#seo_why .list ul li big{display:block;font-size:18px;margin-top:20px}
#seo_why .list ul li p{display:block;color:#999;margin-top:10px;line-height:24px;}
#seo_why .list ul li:hover{-webkit-transform:translatey(-10px);-ms-transform:translatey(-10px);-o-transform:translatey(-10px);transform:translatey(-10px);box-shadow:0px 0px 12px 0px rgba(0, 0, 0, 0.06);}

#seo_team{width:100%;padding:80px 0;}
#seo_team .list{margin-top:50px}
#seo_team .list ul li{float:left;width:calc((100% - 90px) / 4);margin-right:30px;position:relative;overflow:hidden}
#seo_team .list ul li:last-child{margin-right:0}
#seo_team .list ul li .img img{width:100%}
#seo_team .list ul li .info{position:absolute;left:0;top:0;width:100%;height:100%;padding:20px 50px;text-align:center}
#seo_team .list ul li .info .icon{margin-top:80px}
#seo_team .list ul li .info .t{font-size:24px;color:#fff;margin-top:80px;position:relative}
#seo_team .list ul li .info .t:before{content:"";display:block;width:40px;height:2px;background-color:#3c6ef0;position:absolute;bottom:-15px;left:50%;margin-left:-20px;overflow:hidden;opacity:0}
#seo_team .list ul li .info p{color:#fff;margin-top:50px;opacity:0;}
#seo_team .list ul li:hover .info .icon{margin-top:50px}
#seo_team .list ul li:hover .info .t{margin-top:30px;font-size:18px}
#seo_team .list ul li:hover .info .t:before{opacity:1}
#seo_team .list ul li:hover .info p{opacity:1;line-height:24px}
#seo_team .list ul li .info .icon,
#seo_team .list ul li .info .t,
#seo_team .list ul li .info p{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}

@media (max-width:1200px){
	#seo_team .list ul li .info{padding:20px 20px;}
	#seo_team .list ul li .info .icon{margin-top:50px}
	#seo_team .list ul li .info .t{font-size:20px;margin-top:30px;}
	#seo_team .list ul li .info p{margin-top:40px;}	
	#seo_team .list ul li:hover .info .icon{margin-top:20px}
	#seo_team .list ul li:hover .info .t{margin-top:20px;font-size:18px}
	#seo_team .list ul li:hover .info .t:before{opacity:1}
	#seo_team .list ul li:hover .info p{opacity:1;line-height:20px}
}
@media (max-width:1000px){
	#seo_one .list ul li .info small{padding-right:20%;}
	#seo_two .list ul li{width:calc((100% - 60px) / 3);margin-right:30px;}
	#seo_two .list ul li:nth-child(3n){margin-right:0}
	#seo_team .list ul li .info p{margin-top:20px;}	
	#seo_team .list ul li:hover .info .icon{margin-top:10px}
}
@media (max-width:800px){
	.ntitle small{font-size:.23rem;margin-top:.1rem;}
	.ntitle big{font-size:.4rem;}	
	.ntitle big img{display:block;margin:.3rem auto;width:1rem}
	#seo_one{width:100%;padding:.8rem 0;}
	#seo_one .list{margin-top:.2rem}
	#seo_one .list ul li{float:left;width:100%;margin-right:0;margin-top:.3rem}
	#seo_one .list ul li .img{width:100%;height:3rem}
	#seo_one .list ul li .img img{width:100%;height:100%;object-fit:cover}
	#seo_one .list ul li .info{left:.3rem;bottom:.3rem;}
	#seo_one .list ul li .info big{font-size:.28rem;font-weight:700}
	#seo_one .list ul li .info small{font-size:.23rem;margin-top:.1rem;line-height:.3rem}
	#seo_one .list ul li .info big:before{width:.3rem;height:.03rem;top:-.2rem;}

	#seo_two{padding:.8rem 0;}
	#seo_two .list{margin-top:.2rem}
	#seo_two .list ul li{margin-right:0px;padding:.5rem 0;}
	#seo_two .list ul li{width:100%;margin-right:0;margin-top:.3rem}
	#seo_two .list ul li .icon{width:1.2rem;height:1.2rem;border-radius:1.2rem}
	#seo_two .list ul li .icon i{font-size:.6rem;line-height:1.2rem}
	#seo_two .list ul li .info{margin-top:.2rem}
	#seo_two .list ul li .info big{font-size:.28rem;margin-bottom:.1rem}
	#seo_two .list ul li .info p{line-height:.4rem;font-size:.23rem}

	#seo_three{width:100%;padding:.8rem 0}
	#seo_three .box{margin-top:50px;position:relative}
	#seo_three .box .left{width:100%}
	#seo_three .box .right{width:100%;margin-top:.5rem}
	#seo_three .box .item{width:100%}
	#seo_three .box .item .img{height:4rem}
	#seo_three .box .item .img img{width:100%;height:100%;object-fit:cover}
	#seo_three .box .blue-box{display:none}
	#seo_three .box .item big{font-size:.28rem;margin-top:.3rem;}
	#seo_three .box .item big em{font-size:.23rem;margin-left:.1rem;}
	#seo_three .box .item small{display:block;font-size:.23rem;line-height:.3rem}

	#seo_why{padding:.8rem 0;}
	#seo_why .list{margin-top:.2rem}
	#seo_why .list ul li{width:48%;margin-right:0;padding:.5rem .2rem;margin-top:.3rem}
	#seo_why .list ul li:nth-child(2n){float:right}
	#seo_why .list ul li .icon i{font-size:.6rem;}
	#seo_why .list ul li big{font-size:.28rem;margin-top:.2rem}
	#seo_why .list ul li p{margin-top:.1rem;line-height:.36rem;min-height:1.4rem;}

	#seo_team{padding:.8rem 0;}
	#seo_team .list{margin-top:.2rem}	
	#seo_team .list ul li{width:48%;margin-right:0;margin-top:.3rem}
	#seo_team .list ul li:nth-child(2n){float:right}
	#seo_team .list ul li .info{padding:.5rem 0;}
	#seo_team .list ul li .info .icon{margin-top:.5rem}
	#seo_team .list ul li .info .icon img{width:.8rem}
	#seo_team .list ul li .info .t{color:#fff;margin-top:.2rem;font-size:.28rem}
	#seo_team .list ul li .info .t:before{display:none}
	#seo_team .list ul li .info p{display:none}

}