.top{position:relative;width:100%;z-index:1;background:#000;}
.top div{width:100%;background:#fff;overflow: hidden;}
.top div h1{font-weight:500;text-align:center;letter-spacing:0.1rem;color: #111;}
.top div p{text-align:left;text-align: justify;justify-content: space-around;color: #333;}
.top div p span{font-size:2rem;font-weight:400;font-family:"PingFang SC","Microsoft JhengHei";}
@media only screen and (min-width:768px){
.top{padding:6rem 0 0;}
.top div{padding:8rem 0 4rem;}
.top div h1,.top div p{margin:0 auto;width:120rem;overflow: hidden;}
.top div h1{padding:0 0 2rem;font-size:6.8rem;}
.top div p{padding:0;font-size:1.8rem;line-height:4rem;font-weight:300;}.top div p span{padding:0 2px;}
}
@media only screen and (max-width:768px){
.top{padding:5.2rem 0 0;}
.top div{padding:5rem 0 2.5rem;}
.top div h1,.top div p{margin:0;}
.top div h1{width:100%;padding:0 0 1rem;font-size:4.2rem;}
.top div p{padding:0 1.4rem;font-size:1.76rem;line-height:3.3rem;font-weight:normal;word-break:break-all;overflow:hidden;}
.top div p span{font-weight:300;}
}
.data{overflow:hidden;}.data div{display:inline-block;border-radius:0.3rem;color: #fff;text-align:center;font-weight:400;font-size:2.6rem;background:#039D52;background-repeat:no-repeat;overflow:hidden;}
.data div:before{position:relative;}.data div span{display:block;position:relative;font-weight:300;font-size:1.6rem;}
@media only screen and (min-width:768px){
    .data{padding:4rem 0;}.data div{width:23%;height:20.3rem;background-position:center 3.3rem;background-size:24%;}
    .data div:nth-child(-n+3){margin-right:2.66666%;}
    .data div:before{top:11.6rem;}.data div span{top:12.2rem;}
}
@media only screen and (max-width:768px){
    .data{padding:2.5rem 1.2rem;display:flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
    .data div{width:48.5%;height:18rem;background-position:center 3rem;background-size:30%;}
    .data div:nth-child(-n+2){margin-bottom:3%;}
    .data div:before{top:10rem;}.data div span{top:10.2rem;}
}
.data div:nth-child(1):before {content:'2011年';}.data div:nth-child(2):before {content:'1000+';}.data div:nth-child(3):before {content:'10000+';}.data div:nth-child(4):before {content:'中国 香港';} 
.data div:nth-child(1) span:before{content:'成立时间';}.data div:nth-child(2) span:before{content:'服务客户';}.data div:nth-child(3) span:before{content:'主机数量';}.data div:nth-child(4) span:before{content:'公司位置';}
.data div:nth-child(1){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><g fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="7" r="6.5"/><path d="M7 4.5V7l2.54 2.96"/></g></svg>');}
.data div:nth-child(2){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><g fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round"><circle cx="5" cy="3.75" r="2.25"/><path d="M9.5 13.5h-9v-1a4.5 4.5 0 0 1 9 0ZM9 1.5A2.25 2.25 0 0 1 9 6m1.6 2.19a4.5 4.5 0 0 1 2.9 4.2v1.11H12"/></g></svg>');}
.data div:nth-child(3){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14" stroke-linecap="round" stroke-linejoin="round"><rect width="13" height="5" x=".5" y=".5" fill="none" stroke="%23fff" rx="1"/><path fill="%23fff" d="M3.25 2.25A.75.75 0 1 0 4 3a.76.76 0 0 0-.75-.75Z"/><path fill="none" stroke="%23fff" d="M6 3h2M1.5 5.5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1"/><path fill="%23fff" d="M3.25 7.25A.75.75 0 1 0 4 8a.76.76 0 0 0-.75-.75Z"/><path fill="none" stroke="%23fff" d="M6 8h2m-1 2.5v3m-5 0h10"/></svg>');}
.data div:nth-child(4){background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><g fill="none" stroke="%23fff" ><circle cx="7" cy="7" r="6.5"/><path d="M1 9.5h1.75A1.75 1.75 0 0 0 4.5 7.75v-1.5A1.75 1.75 0 0 1 6.25 4.5A1.75 1.75 0 0 0 8 2.75V.57m5.5 6.33a3.56 3.56 0 0 0-1.62-.4H9.75a1.75 1.75 0 0 0 0 3.5A1.25 1.25 0 0 1 11 11.25v.87"/></g></svg>');}
.trait{overflow: hidden;}
.trait h2{width:100%;text-align:center;font-size:6rem;font-weight:500;letter-spacing:1px;color:#111;overflow: hidden;}
.trait ul{display:flex;padding:0;flex-wrap:wrap;justify-content:space-between;align-content:stretch;}
.trait ul li{overflow: hidden;}
.trait h3{display:inline-block;font-weight:500;color:#111;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><rect width="6" height="12" style="fill:rgb(6,168,108)" /></svg>');background-size:100%;}
.trait ul li p{display:block;color:#444;line-height:2.8rem;font-size:1.6rem;text-align: justify;justify-content: space-around;}
@media only screen and (min-width:768px){
.trait{padding:4rem 0;}
.trait h2{padding:0 0 3.3rem;font-size:6rem;}
.trait ul li{width:46%;padding:0 0 3.3rem;}
.trait h3{margin:0 0 1rem;padding:0 0 0 1.6rem;font-size:2.4rem;background-position:0 1.1rem;}
.trait ul li p{font-weight:300;}
}
@media only screen and (max-width:768px){
.trait{padding:2.5rem 0;}
.trait h2{padding:0 0 2rem;font-size:3.6rem;}
.trait ul{padding:0 2rem;}
.trait ul li{width:100%;padding:0 0 2rem;}
.trait h3{margin:0 0 6px;padding:0 0 0 1.3rem;font-size:2rem;background-position:0 0.9rem;}
.trait ul li p{width:100%;word-break:break-all;font-weight:normal;}
}