.overview{padding:80px 0;}
.overview-title{text-align:center;}
.overview-title>h2{font-size:32px; line-height:1;}
.overview-title>h2:after{display:block; width:64px; height:4px; margin:18px auto; border-radius:4px; content:''; background:#1684ed;}
.overview-title>p{font-size:16px; line-height:1; color:#a8a8a8;}
.overview-box{margin-top:50px;}
.overview-box:after{display:block; content:''; clear:both;}
.overview-img{float:left; width:48%; }
.overview-img img{display:block; max-width:100%; margin:0 auto;}
.overview-text{float:right; width:48%; }
.overview-text>h3{font-size:22px; color:#1169d8;}
.overview-text>aside{margin-top:20px;}
.overview-text>aside>p+p{margin-top:10px;}
@media(max-width:1200px){
.overview{padding:50px 0;}
.overview-img{width:49%;}
.overview-text{width:49%;}
}
@media(max-width:992px){
.overview-box{margin:0;}
.overview-img{width:100%; margin:30px 0;}
.overview-text{width:100%;}
}
@media(max-width:767px){
.overview{padding:20px 0;}
.overview-img{margin:15px 0;}
.overview-title>h2{font-size:22px;}
.overview-title>h2:after{width:44px; height:2px; margin:10px auto;}
.overview-title>p{font-size:14px;}
.overview-text>h3{font-size:16px;}
.overview-text>aside{margin-top:10px;}
}


.build{padding:80px 0; text-align:center; background-position:center; background-size:cover; background-size:cover;}
.build-title>h2{font-size:32px; line-height:1; margin-bottom:15px;}
.build-title>h2:after{display:block; width:64px; height:4px; margin:18px auto; border-radius:4px; content:''; background:#1684ed;}
.build-title>p{font-size:16px; line-height:1; color:#787878;}
.build-nav{margin-top:50px;}
.build-nav.v1{display:none;}
.build-nav>ol{font-size:0;}
.build-nav>ol>li{display:inline-block; margin:0 15px;}
.build-nav>ol>li>span{display:block; font-size:15px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.1); padding:8px 38px; border-radius:3px; cursor:pointer;}
.build-nav>ol>li.on>span{color:#fff; box-shadow:0 0 10px #1169d866; background:#1684ed;}
.build-box{margin-top:50px;}
.build-nav:not(.v1) + .build-box{margin-top:35px;}
.build-box>aside{display:none;}
.build-box>aside.on{display:block;}
@media(max-width:1200px){
.build{padding:50px 0;}
.build-nav{margin-top:30px;}
.build-box{margin-top:30px;}
.build-nav:not(.v1) + .build-box{margin-top:25px;}
}
@media(max-width:767px){
.build{padding:20px 0;}
.build-title>h2{font-size:22px;}
.build-title>h2:after{width:44px; height:2px; margin:10px auto;}
.build-title>p{font-size:14px;}
.build-nav{margin-top:20px;}
.build-nav:not(.v1) + .build-box{margin-top:15px;}
.build-nav>ol>li{margin:0 5px;}
.build-nav>ol>li>span{font-size:14px; padding:4px 18px;}
}


.features{padding:80px 0; text-align:center;}
.features-title>h2{font-size:32px; line-height:1; margin-bottom:15px;}
.features-title>h2:after{display:block; width:64px; height:4px; margin:18px auto; border-radius:4px; content:''; background:#1684ed;}
.features-title>p{font-size:16px; line-height:1; color:#787878;}
.features-list{display:block;}
.features-list>ul{margin:0 -15px;}
.features-list>ul:after{display:block; content:''; clear:both;}
.features-list>ul>li{float:left; width:25%; padding:0 15px; margin-top:50px;}
.features-list>ul>li>a{display:block;}
.features-list>ul>li>a>em{display:block; width:80px; height:80px; line-height:80px; font-size:40px; margin:0 auto; text-align:center; border-radius:50%; transition:.6s; color:#fff; box-shadow:0 0 10px #1169d866; background:#1684ed;}
.features-list>ul>li>a:hover>em{transform:rotate(360deg); background:#1169d8;}
.features-list>ul>li>a>h3{margin:20px 0 10px 0;}
.features-list>ul>li>a>h3>i{display: none;}
.features-list>ul>li>a>p{color:#787878;}
.features-list>ul>ol{display:none;}
.features-list>ul>ol:nth-child(8n){display:block; width:100%; clear:both;}
@media(max-width:1200px){
.features{padding:50px 0;}
.features-list>ul{margin:0 -10px;}
.features-list>ul>li{padding:0 10px; margin-top:30px;}
.features-list>ul>li>a>h3{margin:15px 0 5px 0;}
}
@media(max-width:992px){
.features-list>ul>li{width:50%;}
.features-list>ul>ol:nth-child(4n){display:block; width:100%; clear:both;}
}
@media(max-width:767px){
.features{padding:20px 0;}
.features-title>h2{font-size:22px;}
.features-title>h2:after{width:44px; height:2px; margin:10px auto;}
.features-title>p{font-size:14px;}
.features-list>ul{margin:0;}
.features-list>ul>li{width:100%; padding:0; text-align:left; margin-top:15px;}
.features-list>ul>li>a>em{float:left; margin-right:10px; width:28px; height:28px; line-height:28px; font-size:18px;}
.features-list>ul>li>a>h3{margin:0 0 5px 0;}
.features-list>ul>li>a>h3>i{display: block; float: right; line-height: inherit; transition: .3s;}
.features-list>ul>li>a>p{height:50px; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.features-list>ul>li.on>span>h3>i{transform:rotate(180deg);}
.features-list>ul>li.on>span>p{height: auto; display: block;}
}


.establish{padding:80px 0;}
.establish-title{text-align:center;}
.establish-title>h2{font-size:32px; line-height:1; margin-bottom:15px;}
.establish-title>h2:after{display:block; width:64px; height:4px; margin:18px auto; border-radius:4px; content:''; background:#1684ed;}
.establish-title>p{font-size:16px; line-height:1; color:#787878;}
.establish-list{position:relative; overflow:hidden; margin:35px 0 -15px 0;}
.establish-list>ul{position:relative; width:10000%; z-index:1;}
.establish-list>ul:after{display:block; content:''; clear:both;}
.establish-list>ul>li{float:left; width:.3333%; padding:15px 30px;}
.establish-list>ul>li>div{display:block; background:#fff; border-radius:3px; overflow:hidden; position:relative; box-shadow:0 0 12px rgba(0,0,0,.12);}
.establish-list>ul>li>div:before{position:absolute; width:150px; height:150px; border-radius:50%; bottom:-90px; right:-60px; content:''; opacity:0.05; background:#1169d8;}
.establish-list>ul>li>div:after{position:absolute; width:210px; height:210px; border-radius:50%; bottom:15px; right:15px; content:''; opacity:0.05;  background:#1684ed;
background:linear-gradient(111deg,#fff,#1684ed);}
.establish-list>ul>li>div>a{display:block; overflow:hidden; position:relative; z-index:6;}
.establish-list>ul>li>div>a>img{display:block; width:100%; transition:.3s;}
.establish-list>ul>li>div:hover>a>img{transform:scale(1.02);}
.establish-list>ul>li>div>span{display:block; padding:20px; position:relative; z-index:8;}
.establish-list>ul>li>div>span>h3{display:block; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.establish-list>ul>li>div>span>p{display:block; margin:5px 0 30px 0; height:50px; overflow:hidden; color:#787878;}
.establish-list>ul>li>div>span>a{display:inline-block; line-height:1; color:#1684ed;}
.establish-list>ul>li>div>span>a:after{display:block; content:''; clear:both;}
.establish-list>ul>li>div>span>a:hover{color:#1169d8;}
.establish-list>ul>li>div>span>a>b{float:left; font-weight:normal;}
.establish-list>ul>li>div>span>a>i{float:left; line-height:inherit;}
.establish-list>dl{position:absolute; bottom:50%; left:0; right:0; transition:.3s; padding:0 50px; z-index:2; opacity:0; visibility:hidden;}
.establish-list:hover>dl{opacity:1; visibility:visible;}
.establish-list>dl>.fa{width:50px; height:50px; line-height:50px; border-radius:50%; text-align:center; cursor:pointer; font-size:28px; color:#fff; transition:.3s; box-shadow:0 0 12px #1169d866; background:#1684ed;}
.establish-list>dl>.fa:hover{background:#1169d8;}
.establish-list>dl>dt{float:left;}
.establish-list>dl>dd{float:right;}
@media(max-width:1200px){
.establish{padding:50px 0;}
.establish-list{margin:30px -10px -10px -10px;}
.establish-list>ul>li{padding:15px 10px;}
}
@media(max-width:992px){
.establish-list>ul>li{width:.5%;}
}
@media(max-width:767px){
.establish{padding:20px 0;}
.establish-title>h2{font-size:22px;}
.establish-title>h2:after{width:44px; height:2px; margin:10px auto;}
.establish-title>p{font-size:14px;}
.establish-list{margin:0 -5px -10px -5px;}
.establish-list>ul>li{width:1%; padding:15px 5px;}
}


.material{padding:80px 0;} 
.material-title{text-align:center;}
.material-title>h2{font-size:32px; line-height:1; margin-bottom:15px;}
.material-title>h2:after{display:block; width:64px; height:4px; margin:18px auto; border-radius:4px; content:''; background:#1684ed;}
.material-title>p{font-size:16px; line-height:1; color:#787878;}
.material-list{margin-top:30px;}
.material-list>ul:after{display:block; content:''; clear:both;}
.material-list>ul>li{float:left; width:50%; padding:0 30px;}
.material-list>ul>li>a{display:block; padding:20px 5px; border-bottom:1px solid #eee;}
.material-list>ul>li>a>h3{margin-bottom:5px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.material-list>ul>li>a>h3:before{width:18px; height:3px; border-radius:5px; content:''; float:left; margin:12px 8px 0 0; background:#1684ed;}
.material-list>ul>li>a>p{display:block; height:50px; overflow:hidden; color:#787878;}
@media(max-width:1200px){
.material{padding:50px 0;}
.material-list{margin-top:20px;}
.material-list>ul{margin:0 -10px;}
.material-list>ul>li{padding:0 10px;}
}
@media(max-width:992px){
.material-list>ul{margin:0;}
.material-list>ul>li{float:none; width:100%; padding:0;}
.material-list>ul>li>a{padding:15px 5px;}
.material-list>ul>li>a>h3{margin-bottom:0;}
}
@media(max-width:767px){
.material{padding:20px 0;}
.material-title>h2{font-size:22px;}
.material-title>h2:after{width:44px; height:2px; margin:10px auto;}
.material-title>p{font-size:14px;}
.material-list{margin-top:10px;}
.material-list>ul>li>a{padding:10px 0;}
.material-list>ul>li>a>h3{font-size:15px;}
}


.relate{padding:60px 0;}
.relate-box{color:#fff; text-align:center;}
.relate-box>h2{font-size:32px;}
.relate-box>p{font-size:16px; opacity:0.88; margin:10px 0 40px 0;}
.relate-box>div{text-align:center;}
.relate-box>div>a{background:#fff; box-shadow:0 0 8px rgba(255,255,255,.3); padding:8px 48px; font-size:16px; border-radius:3px; display:inline-block;}
.relate-box>div>a:hover{color:#fff; background:#1684ed;}
@media(max-width:1200px){
.relate{padding:40px 0;}
}
@media(max-width:767px){
.relate{padding:20px 0;}
.relate-box>h2{font-size:22px;}
.relate-box>p{font-size:14px; margin:5px 0 20px 0;}
.relate-box>div>a{padding:6px 32px; font-size:14px;}
}
