.container{width:1220px; height:100%; margin:0 auto; position:relative;}
.section-header{padding-bottom:36px;}
.section-header h2{font-size: 32px; font-weight: 400; text-align: center;}
.section-header p{font-size: 16px; padding: 20px 0; line-height:1.8; text-align:center;color: #646464;}
.item-wrap{display: flex;flex-wrap: wrap; justify-content: center;align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center; 
}
.item-col-3{width:33.3333333333%; padding:0 12px;box-sizing: border-box;}
.item-col-4{width:25%; padding:0 12px;box-sizing: border-box;}
.item-col-6{width:16.6666666666%; padding:0 12px;box-sizing: border-box;}

/*banner*/
.banner{width:100%; background-color:#bddcfb;padding-top:60px;}
.banner-box{width:100%;}
.banner-box .content{width:100%; height:500px;}
.banner-box .pagination {position: absolute; left: 0; text-align: center; bottom: 10px; width: 100%;z-index:999;}
.banner-box .swiper-pagination-bullet {display: inline-block;width: 8px;height: 8px;opacity:1;border-radius: 8px;background: #fff;margin: 0 3px;cursor: pointer;transition: width 0.3s ease-in-out;}
.banner-box .swiper-pagination-bullet-active{background: #186AF2;width:24px;}

.swiper-button-next{right:50%; margin-right:-610px; display:none;}
.swiper-button-prev{left:50%; margin-left:-610px; display:none;}
.banner-box:hover .swiper-button-next{display:block; margin-top:-30px; border-radius:2px; padding:6px 2px; background-color:rgba(255,255,255,.8); background-size:50% auto;}
.banner-box:hover .swiper-button-prev{display:block; margin-top:-30px; border-radius:2px; padding:6px 2px; background-color:rgba(255,255,255,.8); background-size:50% auto;}

.banner-inner{height:500px; width:1220px; margin:0 auto; position:relative;}
.banner-text{position:absolute;-ms-transform:translate(0,-50%);transform:translate(0,-50%);box-sizing:inherit;left:60px; top:45%; text-align:center;}
.banner-text h2{font-size:46px;line-height:64px;color:#fff;}
.banner-text p{margin-top:20px;font-size:18px;line-height:24px;color:#fff;}
.banner-text p span{margin-right:20px;}.banner-btn{margin-top:50px;}
.banner-pic{position:absolute;right:30px;top:75px;box-sizing:inherit;width:436px;height:350px;}
.banner-pic img{width:100%;margin-top:10px;max-width:436px;}

.btn-gradient-blue {font-size: 16px; padding: 10px 30px 12px !important; border: none;color: #fff !important; border-radius: 26px;
    background: linear-gradient(-45deg,#32b6ff,#4276ff);
    -webkit-box-shadow: 0 2px 8px 0 rgb(82 94 102 / 15%);
    box-shadow: 0 2px 8px 0 rgb(82 94 102 / 15%);
}

.btn-gradient-ghost { font-size: 16px; padding: 9px 30px 11px !important; background: #fff; margin-left:50px; border: 1px solid #3da8f5; color: #3da8f5; border-radius: 26px;
    -webkit-box-shadow: 0 2px 8px 0 rgb(36 10 147 / 15%);
    box-shadow: 0 2px 8px 0 rgb(36 10 147 / 15%);
}

.feature {display: block;background: #fff; padding: 36px 20px 20px;text-align: center;font-size: 16px; line-height: 1.5; word-wrap: break-word; box-shadow: 0px 0 30px rgb(1 41 112 / 10%); height: 100%; background-color: #fff; text-align: center; transition: 0.3s; border-radius: 6px;}
.feature:hover { background-color: #4385F5; background: linear-gradient(to left, #4385F5, #00aaff); color: #fff; }  
.feature .part-icon {display: inline-block;border-radius: 100%;background: #f5f5f5; padding: 25px;width: 60px; height: 60px;}
.part-text h3 {color: #333;font-weight: normal; text-align: center;font-size:18px; padding: 10px 0;}
.part-text {text-align: left; line-height: 1.6;font-size: 14px; color: #888; padding: 10px 0;}
.feature:hover .part-text h3,.feature:hover .part-text {color: #fff;}
.part-icon img { width: 60px;height: 60px;}

.cms-banner{width:100%; height:120px; background-color:#4385F5}
.cms-banner .container {padding: 30px 0; color: rgba(255,255,255,0.9); overflow: hidden;}
.cms-banner img {display: block; float: left; height: 60px; margin-right: 2px;}
.cms-banner span { display: block; float: left; line-height: 60px; margin-right:36px; font-size: 24px; font-weight: 100;}
.cms-banner ul { overflow: hidden;  float: left; margin-right:36px;}
.cms-banner ul li {font-size: 16px; padding: 5px 0;font-weight: 100;}
.cms-banner a {float: right;display: block; margin-top: 12px; padding: 6px 24px 7px; border: solid 2px #ed5d18; border-radius: 100px; background: #ed5d18; color: #fff; font-size: 16px; }

.function {background:#f2f2f2; width: 100%; text-align: center; padding: 80px 0;}
.function-title{font-size: 42px; font-weight: 500; text-align: center; font-weight: 100;}
.function-sub-title{font-size: 18px; padding: 20px 0 160px; line-height:1.8;  font-weight: 100; text-align: left;}
.function-wrap{width:100%;position: relative; margin:0 auto; background-color: #fff; padding:180px 0 30px;  border-radius: 10px;  box-shadow: 0 0 10px rgb(0 0 0 / 10%);}
.function-img{width: 100%;position: absolute; top: -112px;}
.function-main{display: flex;  justify-content: center; padding: 24px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center; 
}

.function-item { width: 220px; font-size: 15px; line-height: 1.5; margin:0 12px; word-wrap: break-word;}
.item-box{padding: 20px 0; background-color: #4385F5; background: linear-gradient(to left, #4385F5, #00aaff); border-radius: 8px; color: #fff;margin-bottom: 10px;}
.function-item  ul li { width: 44%; float: left; padding:5px 3%; text-align: left; font-weight: 100;}
.function-item  ul li span{font-size: 16px; color: #4385F5; font-weight: 800; margin-right: 3px;}
.item-box h3{font-size: 18px; font-weight: 100; padding-top:10px;}
.item-box img{height:80px;}

.advantage {background:#f2f2f2; width: 100%; padding: 60px 0 80px; font-weight: 100;}
.advantage-box{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;margin:0 auto;width:100%;max-width:1220px;height:522px;border-right: 1px solid #e8e8e8;}
.advantage-images{position:relative;-webkit-box-flex:68;-ms-flex:68;flex:68;width:68%;height:100%;background:#f5f5f5;}
.advantage-images > *{position:absolute;}
.advantage-images-font{position:absolute;top:52%;left:50%;z-index:60;height:auto;max-height:90%;max-width:95%;opacity:0;-webkit-transition:opacity 0.6s,-webkit-transform 0.6s;transition:opacity 0.6s,-webkit-transform 0.6s;transition:opacity 0.6s,transform 0.6s;transition:opacity 0.6s,transform 0.6s,-webkit-transform 0.6s;}
.advantage-images-font.image-active{-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity:1;}
.advantage-images-back{position:absolute;z-index:55;width:100%;height:100%;opacity:0;-webkit-transition:opacity 0.6s;transition:opacity 0.6s;}
.advantage-images-back.active{opacity:1;}

.advantage-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:32;flex:32;-ms-flex:auto;background:#fff;}

.product-card-text-subtitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;z-index:70;-webkit-box-flex:1;-ms-flex:1;flex:1;border:1px solid transparent;border-top-color:#ccc;width:100%;background:#fff;-webkit-transition:border-color 0.3s,opacity 0.3s,-webkit-box-shadow 0.3s;transition:border-color 0.3s,opacity 0.3s,-webkit-box-shadow 0.3s;transition:border-color 0.3s,box-shadow 0.3s,opacity 0.3s;transition:border-color 0.3s,box-shadow 0.3s,opacity 0.3s,-webkit-box-shadow 0.3s;opacity:0.4;cursor:pointer;}
.product-card:last-child{border-bottom-color:#dddddd;}
.product-card.active{border-top-color:#e8e8e8;opacity:1;-webkit-box-shadow:0 0 12px 0 rgba(0,0,0,0.1);box-shadow:0 0 12px 0 rgba(0,0,0,0.1);}
.product-card.active:last-child{border-bottom-color:#e8e8e8;}
.product-card.active:before{-webkit-transform:translate3d(-17px,-50%,0);transform:translate3d(-17px,-50%,0);}
.product-card.active .product-card-icon{-webkit-box-shadow:0 6px 18px 0 rgba(0,0,0,0.1);box-shadow:0 6px 18px 0 rgba(0,0,0,0.1);}
.product-card.active .product-card-text-title-tip{opacity:1;-webkit-transform:translateX(-32px);transform:translateX(-32px);}
.product-card:hover .product-card-arrow-back{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.product-card:hover .product-card-arrow img{opacity:1;left:50%;}
.product-card-icon{margin-left:6%;margin-right:5%;border-radius:50%;width:64px;height:64px;background-size:100%;background-position:center;background-repeat:no-repeat;-webkit-transition:-webkit-box-shadow 0.3s;transition:-webkit-box-shadow 0.3s;transition:box-shadow 0.3s;transition:box-shadow 0.3s,-webkit-box-shadow 0.3s;}
.product-card-text{width:calc(75% - 64px);}
.product-card-text-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;max-width:100%;line-height:28px;font-size:1.375em;font-weight:500;}
.product-card-text-title-tip{display:inline-block;border-radius:4px;padding:5px 12px 5px 42px;line-height:20px;font-size:0.73em;color:#996921;background:-webkit-gradient(linear,left top,right top,from(rgba(255,216,105,0)),to(rgba(255,175,56,0.5)));background:linear-gradient(to right,rgba(255,216,105,0),rgba(255,175,56,0.5));opacity:0;-webkit-transform:translateX(-56px);transform:translateX(-56px);-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;transition:opacity 0.3s,-webkit-transform 0.3s;transition:transform 0.3s,opacity 0.3s;transition:transform 0.3s,opacity 0.3s,-webkit-transform 0.3s;}
.product-card-text-subtitle{margin-top:10px;max-width:100%;line-height:24px;font-size:1.125em;}
.product-card-arrow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:absolute;top:0;right:0;width:15%;max-width:72px;height:100%;-webkit-transition:opacity 0.3s,-webkit-transform 0.3s;transition:opacity 0.3s,-webkit-transform 0.3s;transition:transform 0.3s,opacity 0.3s;transition:transform 0.3s,opacity 0.3s,-webkit-transform 0.3s;background:transparent;}
.product-card-arrow-back,.product-card-arrow img{position:absolute;-webkit-transition:0.3s;transition:0.3s;}
.product-card-arrow-back{top:0;right:0;width:100%;height:100%;-webkit-transform:translate3d(72px,0,0);transform:translate3d(72px,0,0);opacity:0.1;}
.product-card-arrow img{top:50%;left:calc(50% + 72px);-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);width:22px; opacity:0;}
.product-card:before{content:"";position:absolute;border-width:18px 18px 18px 0;border-style:solid;border-color:transparent #fff transparent transparent;top:50%;left:0;width:0;height:0;opacity:1;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);-webkit-transition:-webkit-transform 0.3s;transition:-webkit-transform 0.3s;transition:transform 0.3s;transition:transform 0.3s,-webkit-transform 0.3s;}
.isWIP .product-card-text{width:calc(76.8% - 64px);}

.services {width: 100%; text-align: center; padding: 60px 0; background-color: #ffffff;}
.services .service-box {box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); height: 100%; background-color: #fff; margin-bottom:30px; padding:30px 12px; text-align: center; transition: 0.3s;  border-radius: 6px;}
.services .service-box .bi {font-size: 48px; padding: 12px; position: relative; margin-bottom: 24px; display: inline-block; line-height: 0;transition: 0.3s;}
.services .service-box h3 { color: #323232; margin-bottom:20px; font-weight: 400; font-size: 24px;}
.services .service-box p {color: #646464; font-size:15px;}

.services .service-box.blue {border-bottom: 3px solid #2db6fa;}
.services .service-box.blue .bi {color: #2db6fa; background: #dbf3fe;}
.services .service-box.blue:hover { background: #2db6fa;}

.services .service-box.orange { border-bottom: 3px solid #f68c09;}
.services .service-box.orange .bi { color: #f68c09; background: #fde3c4;}
.services .service-box.orange:hover { background: #f68c09;}

.services .service-box.green {border-bottom: 3px solid #52CD75;}
.services .service-box.green .bi { color: #52CD75; background: #cffddf;}
.services .service-box.green:hover { background: #52CD75;}

.services .service-box.red { border-bottom: 3px solid #EA4335;}
.services .service-box.red .bi { color: #EA4335; background: #fef7f8;}
.services .service-box.red:hover {background: #EA4335;}

.services .service-box.purple {border-bottom: 3px solid #9B74D7;}
.services .service-box.purple .bi {color: #9B74D7;background: #f8e4fd;}
.services .service-box.purple:hover {background: #9B74D7;}

.services .service-box.pink {border-bottom: 3px solid #f51f9c;}
.services .service-box.pink .bi {color: #f51f9c; background: #feecf7;}
.services .service-box.pink:hover { background: #f51f9c;}

.services .service-box:hover h3, .services .service-box:hover p, .services .service-box:hover{ color: #fff;}
.services .service-box:hover .bi { background: #fff;}