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

#w_brand{width:100%;padding:80px 0;}
#w_brand .list{margin-top:50px}
#w_brand .list .img{text-align:center}
#w_brand .list .img img{width:60%}

#w_business{width:100%;background:#f8f8f8;padding:80px 0;}
#w_business .list{margin-top:20px}
#w_business .list ul li{float:left;width:calc((100% - 90px) / 4);margin-right:30px;background:#fff;margin-top:30px }
#w_business .list ul li{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#w_business .list ul li:nth-child(4n){margin-right:0}
#w_business .list ul li .img img{width:100%}
#w_business .list ul li .info{padding:40px 30px 20px;position:relative}
#w_business .list ul li .info h2{font-size:18px;font-weight:normal;position:relative;z-index:1;}
#w_business .list ul li .info p{color:#999;line-height:24px;margin-top:10px}
#w_business .list ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;}
#w_business .list ul li .info i{opacity:0}
#w_business .list ul li .info  em{font-size:56px;color:#f5f5fa;position:absolute;left:30px;top:20px;font-weight:bold;z-index:0}
#w_business .list ul li:hover{background:#3c6ef0}
#w_business .list ul li:hover .info i{opacity:.8;color:#fff}
#w_business .list ul li:hover .info em{color:#fff;opacity:.1}
#w_business .list ul li:hover .info h2{color:#fff;}
#w_business .list ul li:hover .info p{color:#fff;}

#w_relevant{width:100%;padding:80px 0}
#w_relevant .wrap{overflow:inherit}
#w_relevant .list{margin-top:20px}
#w_relevant .list ul li{float:left;width:calc((100% - 60px) / 3);margin-right:30px;border:1px solid #eee;padding:30px 40px;margin-top:30px}
#w_relevant .list ul li:nth-child(3n){margin-right:0}
#w_relevant .list ul li .icon{float:left;width:25%}
#w_relevant .list ul li .icon i{font-size:50px;line-height:78px;color:#999}
#w_relevant .list ul li .info{float:right;width:75%}
#w_relevant .list ul li .info big{display:block;font-size:18px}
#w_relevant .list ul li .info small{display:block;font-size:14px;line-height:24px;color:#666}
#w_relevant .list ul li:hover{border:1px solid #3c6ef0;-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);}
#w_relevant .list ul li:hover .icon i{color:#3c6ef0}

#okwork{width:100%;padding:100px 0;background:url(/theme/2020/static/images/w_bg.png) center center no-repeat;background-size:cover;}
#okwork .text{text-align:center;color:#fff;}
#okwork .text big{display:block;font-weight:700;font-size:36px; line-height:50px}
#okwork .text small{display:block;font-size:16px;letter-spacing:10px; margin-top:10px}
#okwork .text em{width:60px;height:4px;background:#3c6ef0;display:block;overflow:hidden;margin:30px auto 0}
#okwork .text p{text-align:center;font-size:14px;color:#abb8d1;text-align:center;line-height:26px;margin-top:30px;}
#okwork .btn{margin-top:40px;text-align:center;}
#okwork .btn a{display:inline-block;background:#3c6ef0;color:#fff;border-radius:2px;margin:0 5px;padding:0px 40px;position:relative;line-height:50px;}
#okwork .btn a:nth-child(2){background:#0da056;}
#okwork .btn a i{width:0;position:absolute;left:0;top:0;height:100%;content:'';display:block;z-index:0;-webkit-transition:all .3s;transition:all .3s;background:#fff;border-radius:2px;}
#okwork .btn a span{position:relative;z-index:10;}
#okwork .btn a:hover{color:#333;}
#okwork .btn a:hover i{width:100%;}
#okwork .btn em{margin-left:5px;}

#w_process{width:100%;padding:80px 0;}
#w_process .list{margin-top:50px;}
#w_process .list ul{}
#w_process .list ul li{float:left;width:calc((100% - 300px) / 7);margin-right:50px}
#w_process .list ul li:last-child{margin-right:0}
#w_process .list ul li .title-box{display:block;width:80px;height:80px;margin:0 auto;text-align:center;border-radius:50%;background:#3c6ef0;overflow:hidden;position:relative}
#w_process .list ul li:nth-child(1) .title-box{background:#e771b1}
#w_process .list ul li:nth-child(2) .title-box{background:#ae82e3}
#w_process .list ul li:nth-child(3) .title-box{background:#e87676}
#w_process .list ul li:nth-child(4) .title-box{background:#e17ae2}
#w_process .list ul li:nth-child(5) .title-box{background:#4fc9e2}
#w_process .list ul li:nth-child(6) .title-box{background:#97d25c}
#w_process .list ul li em{color:#fff;font-size:18px;line-height:80px}
#w_process .list ul li .num{color:#fff;font-size:24px;opacity:0.2;position:absolute;left:0;right:0;bottom:-12px;margin:auto}
#w_process .list ul li p{color:#666;padding:20px 0;background:#f5f5f5;border-radius:4px;position:relative;text-align:center;margin:20px auto 0;height:160px}
#w_process .list ul li p::before{content:'';display:block;width:0;height:0;border-top:8px solid #fff;border-right:8px solid rgba(255,255,255,0);border-left:8px solid rgba(255,255,255,0);border-bottom:8px solid #f5f5f5;position:absolute;top:-16px;left:50%;margin-left:-9px}
#w_process .list ul li p span{display:block;}
#w_process .list ul li p i{display:block;color:#E87B2A;font-style:normal}
#w_process .btn{display:block;margin:auto;margin-top:60px;text-align:center}
#w_process .btn a{display:inline-block;background:#3c6ef0;color:#fff;border-radius:2px;padding:0px 40px;position:relative;line-height:50px}

#w_promise {width:100%;padding:80px 0;background:#f8f8f8}
#w_promise .list{margin-top:50px}
#w_promise .list ul li{float:left;width:50%;background:#fff}
#w_promise .list ul li .info{width:50%;padding:40px;text-align:center}
#w_promise .list ul li .info big{display:block;font-size:24px;margin-top:10px}
#w_promise .list ul li .info small{display:block;font-size:14px;color:#666;line-height:24px;margin-top:10px}
#w_promise .list ul li .img{width:50%}
#w_promise .list ul li .img img{width:100%}

#w_periphery{width:100%;padding:80px 0}
#w_periphery .wrap{overflow:inherit}
#w_periphery .list{margin-top:50px}
#w_periphery .list ul li{float:left;text-align:center;border:1px solid #eee;padding:40px 10px;width:calc((100% - 90px) / 4);margin-right:30px}
#w_periphery .list ul li:last-child{margin-right:0}
#w_periphery .list ul li big{font-size:18px;display:block;position:relative}
#w_periphery .list ul li big::before{content:'';display:block;width:20px;height:3px;overflow:hidden;background:#3c6ef0;position:absolute;left:50%;margin-left:-10px;bottom:-10px;}
#w_periphery .list ul li small{font-size:14px;color:#666;display:block;line-height:24px;margin-top:30px}
#w_periphery .list ul li i{font-size:50px;margin-top:30px;color:#3c6ef0}
#w_periphery .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);}

@media (max-width:1200px){
	#w_process .list ul li{float:left;width:calc((100% - 180px) / 7);margin-right:30px}
	#w_promise .list ul li .info{padding:10px 20px;text-align:center}
	#w_promise .list ul li .info big{display:block;font-size:24px;}
}
@media (max-width:1100px){
	#w_promise .list{margin-top:20px}
	#w_promise .list ul li{float:inherit;width:100%;margin-top:30px}
	#w_promise .list ul li .info{padding:40px;}
	#w_promise .list ul li .info big{ margin-top:10px}
}
@media (max-width:1000px){
	#w_process .list ul li{float:left;width:calc((100% - 120px) / 7);margin-right:20px}
}
@media (max-width:800px){
	#w_brand .list .img img{width:100%}
	
	#w_business{padding:.8rem 0;}
	#w_business .list{margin-top:.2rem}
	#w_business .list ul li{width:100%;margin-right:0px;margin-top:.3rem }
	#w_business .list ul li:nth-child(2n){float:right}
	#w_business .list ul li .info{padding:.4rem .3rem .3rem;}
	#w_business .list ul li .info h2{font-size:.28rem;}
	#w_business .list ul li .info p{font-size:.23rem ;line-height:.36rem;margin-top:.1rem}
	#w_business .list ul li .info p{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;}
	#w_business .list ul li .info i{display:none}
	#w_business .list ul li .info em{font-size:.56rem;left:.3rem;top:.2rem;}
	
	#w_relevant{padding:.8rem 0}
	#w_relevant .list{margin-top:.2rem}
	#w_relevant .list ul li{float:inherit;width:100%;margin-right:0px;border:.01rem solid #eee;padding:.3rem;margin-top:.3rem;height:1.7rem;border-radius:.04rem}
	#w_relevant .list ul li:nth-child(3n){margin-right:0}
	#w_relevant .list ul li .icon i{font-size:.6rem;line-height:1.1rem;}
	#w_relevant .list ul li .info big{font-size:.28rem}
	#w_relevant .list ul li .info small{ font-size:.23rem;line-height:.36rem;margin-top:.1rem}
	
	#okwork .text big{font-size:.36rem; line-height:.4rem}
	#okwork .text small{font-size:.23rem;letter-spacing:.1rem}
	#okwork .text em{width:.3rem;height:.04rem;margin:.3rem auto 0}
	#okwork .text p{font-size:.23rem;line-height:.36rem;margin-top:.3rem;}
	
	#w_process{width:100%;padding:.8rem 0;}
	#w_process .list{margin-top:.2rem;}
	#w_process .list ul li{width:48%;margin-right:0;margin-top:.3rem}
	#w_process .list ul li:nth-child(2n){float:right}
	#w_process .list ul li .title-box{width:1rem;height:1rem}
	#w_process .list ul li em{font-size:.28rem;line-height:1rem}
	#w_process .list ul li .num{font-size:.36rem;bottom:-.1rem;}
	#w_process .list ul li p{padding:.3rem 0;margin:.2rem auto 0;height:2.2rem}
	#w_process .list ul li p::before{border-top:.08rem solid #fff;border-right:.08remx solid #fff;border-left:.08rem solid #fff;border-bottom:.08rem solid #f5f5f5;top:-.16rem;margin-left:-.08rem}
	#w_process .btn{margin-top:.6rem}
	#w_process .btn a{padding:0px .5rem;position:relative;line-height:.5rem}
	
	#w_promise .list{margin-top:.2rem}
	#w_promise .list ul li{float:inherit;width:100%;margin-top:.3rem;}
	#w_promise .list ul li .info{float:inherit;padding:.3rem;width:100%;background:#fff}
	#w_promise .list ul li .info big{ margin-top:.1rem;font-size:.28rem}
	#w_promise .list ul li .info small{font-size:.23rem;line-height:.36rem}
	#w_promise .list ul li .img{float:inherit;width:100%}	
	
	#w_periphery{width:100%;padding:.8rem 0}
	#w_periphery .list{margin-top:.2rem}
	#w_periphery .list ul li{padding:.5rem;width:100%;margin-right:0;margin-top:.3rem}
	#w_periphery .list ul li:nth-child(2n){float:right}
	#w_periphery .list ul li big{font-size:.28rem;}
	#w_periphery .list ul li big::before{width:.2rem;height:.03rem;margin-left:-.1rem;bottom:-.1rem;}
	#w_periphery .list ul li small{font-size:.23rem;line-height:.4rem;margin-top:.3rem}
	#w_periphery .list ul li i{font-size:.8rem;margin-top:.3rem;}
}