.margin-bottom-40 {
    margin-bottom: 40px
}

.warp {
    width: 1200px;
    margin: 0 auto
}

.f-fs24 {
    font-size: 2.4rem
}

.banner {
    color: #fff;
    background: -webkit-gradient(linear, left bottom, left top, from(#272ab0), to(#91a3f9));
    background: -o-linear-gradient(bottom, #272ab0, #91a3f9);
    background: linear-gradient(0deg, #272ab0, #91a3f9);
    overflow: hidden
}

.banner h1 {
    font-size: 4.8rem
}

.banner .martop80 {
    margin: 80px 0 0
}

.banner .img-absolute {
    position: absolute;
    top: 140px;
    right: 0
}

@media (max-width:991px) {
    .banner {
        text-align: center
    }

    .banner .layui-row {
        padding: 100px 0 80px !important
    }

    .banner .img-absolute,
    .banner .img-bx {
        margin-top: 30px;
        text-align: center;
        position: static
    }
}

.what {
    padding: 95px 0 90px
}

.what dt {
    color: #202020;
    margin-bottom: 20px
}

.what dd {
    color: #747474;
    line-height: 1.6;
    margin-top: 25px
}

.what dl:not(:last-child) {
    margin-bottom: 30px
}

.what .txt {
    padding-left: 20px
}

@media (min-width:992px) {
    .what-mn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

@media (max-width:991px) {
    .what {
        text-align: center
    }

    .what .img-bx {
        margin-bottom: 30px
    }

    .what .img-bx,
    .what .txt-bx {
        padding-left: 0 !important;
        text-align: center !important
    }

    .what .txt {
        padding-left: 0
    }
}

.features {
    background: #f2f2f2;
    padding-top: 90px;
    margin: 0 auto;
    overflow: hidden
}

.features h2 {
    text-align: center;
    font-size: 48px;
    color: #202020;
    padding-bottom: 60px
}

.features .box {
    background: #fff;
    border-radius: 20px;
    margin-bottom: 100px
}

.features .box .border-1 {
    border-radius: 20px 0 0 0
}

.features .box .border-2 {
    border-radius: 0 20px 0 0
}

.features .box .border-3 {
    border-radius: 0 0 0 20px
}

.features .box .border-4 {
    border-radius: 0 0 20px 0
}

.features .box li {
    height: 260px;
    padding: 80px 68px 0 68px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #f2f2f2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.features .box li span {
    display: inline-block;
    width: 63px;
    height: 58px;
    font-size: 50%;
    background-image: url(/assets/images/icons/icon.png);
    margin: 5px 30px 0 0
}

.features .box li div {
    width: 345px
}

.features .box li div h5 {
    margin-bottom: 25px
}

.features .box li .sprites1 {
    background-position: 0 0
}

.features .box li .sprites2 {
    background-position: 0 -170px
}

.features .box li .sprites3 {
    background-position: 0 -329px
}

.features .box li .sprites4 {
    background-position: 0 -498px
}

.features .box li:hover {
    background: #3a3ec3;
    color: #fff;
    -webkit-transition: ease-in 1s;
    -o-transition: ease-in 1s;
    transition: ease-in 1s
}

.features .box li:hover span {
    display: inline-block;
    width: 63px;
    height: 58px;
    margin-top: 5px
}

.features .box li:hover .sprites1 {
    background-position: 0 -87px
}

.features .box li:hover .sprites2 {
    background-position: 0 -250px
}

.features .box li:hover .sprites3 {
    background-position: 0 -415px
}

.features .box li:hover .sprites4 {
    background-position: 0 -584px
}

@media (max-width:1199px) {
    .features {
        padding-top: 40px
    }

    .features .box {
        background: #fff;
        margin-bottom: 40px
    }

    .features .box li {
        height: 260px;
        padding: 65px 54px 0 54px
    }

    .features .box li span {
        display: inline-block;
        width: 85px;
        height: 58px;
        margin: 5px 40px 0 0
    }

    .features .box li div h5 {
        margin-bottom: 10px
    }

    .features .box li:hover span {
        width: 85px
    }
}

@media (max-width:991px) {
    .features {
        overflow: hidden;
        padding: 40px 0 0 0
    }

    .features h2 {
        font-size: 28px;
        padding-bottom: 40px
    }

    .features .box {
        overflow: hidden;
        border-radius: 0
    }

    .features .box .border-1 {
        border-radius: 0
    }

    .features .box .border-2 {
        border-radius: 0
    }

    .features .box .border-3 {
        border-radius: 0
    }

    .features .box .border-4 {
        border-radius: 0
    }

    .features .box li {
        height: 70%;
        padding: 65px 54px 62px 54px
    }

    .features .box li span {
        display: inline-block;
        width: 63px;
        height: 58px;
        margin: 5px 60px 0 0
    }

    .features .box li div {
        width: auto
    }

    .features .box li:hover span {
        width: 63px
    }
}

@media (max-width:768px) {
    .features {
        overflow: hidden;
        padding: 0
    }

    .features h2 {
        font-size: 28px;
        padding: 20px 0 20px 0
    }

    .features .box {
        overflow: hidden;
        border-radius: 0
    }

    .features .box .border-1 {
        border-radius: 0
    }

    .features .box .border-2 {
        border-radius: 0
    }

    .features .box .border-3 {
        border-radius: 0
    }

    .features .box .border-4 {
        border-radius: 0
    }

    .features .box li {
        height: 70%;
        display: block;
        padding: 20px
    }

    .features .box li span {
        display: block;
        margin: 0 auto;
        width: 63px;
        height: 58px
    }

    .features .box li div {
        width: auto;
        text-align: center;
        margin: 0 auto
    }

    .features .box li:hover span {
        display: block;
        width: 63px
    }
}

.join {
    background-color: #656ff1;
    height: 370px;
    overflow: hidden
}

.join .layui-container {
    position: relative;
    text-align: center;
    padding: 100px 170px 0
}

.join .layui-container i {
    position: absolute;
    width: 20px;
    height: 18px;
    display: block
}

.join .layui-container i.icon-1 {
    top: 91px;
    left: 105px;
    background: url(/assets/images/icons/MC-allin-1.png) no-repeat -632px -303px
}

.join .layui-container i.icon-2 {
    right: 99px;
    bottom: 125px;
    background: url(/assets/images/icons/MC-allin-1.png) no-repeat -672px -303px
}

.join .layui-container i.icon-2:lang(cn) {
    bottom: 90px
}

.join .layui-container h2 {
    margin-bottom: 50px;
    font-size: 24px;
    font-family: Myriad Pro;
    font-weight: 400;
    color: #fff;
    line-height: 44px
}

.join .layui-container a {
    font-weight: 700;
    line-height: 50px;
    font-size: 18px;
    width: 240px;
    height: 50px;
    background: #09b464;
    -webkit-box-shadow: 0 5px 10px 0 rgba(6, 81, 46, .4);
    box-shadow: 0 5px 10px 0 rgba(6, 81, 46, .4);
    border-radius: 10px
}

@media (max-width:991px) {
    .join {
        height: 290px
    }

    .join .layui-container {
        padding: 50px 20px 0 20px
    }

    .join .layui-container i {
        background: 0 0 !important
    }

    .join .layui-container h2 {
        margin-bottom: 50px
    }
}

@media (max-width:768px) {
    .join {
        height: 200px
    }

    .join .layui-container {
        padding: 20px
    }

    .join .layui-container h2 {
        line-height: 28px;
        font-size: 18px;
        margin-bottom: 20px;
        font-weight: 700
    }

    .join .layui-container a {
        width: 200px;
        height: 40px;
        line-height: 40px
    }
}

.online {
    padding: 60px 0;
    background-color: #f8f8f8
}

.online-mn {
    margin: 80px 0 130px;
    background-color: #ecedf9;
    border-radius: 30px
}

.online-mn .txt {
    padding: 90px 10% 115px 25px
}

.online-mn .txt:lang(fr) {
    padding: 90px 5% 115px 25px
}

.online-mn .txt:lang(cn) {
    padding: 90px 6% 115px 25px
}

.online-mn .txt:lang(es) {
    padding: 90px 7% 115px 25px
}

.online-mn h2 {
    color: #202020
}

.online-mn h2:lang(es),
.online-mn h2:lang(it) {
    font-size: 3.2rem
}

.online-mn .des {
    color: #737373;
    font-size: 18px;
    padding: 15px 0 25px;
    line-height: 2
}

.online .carousel {
    padding: 0;
    background: 0 0 !important
}

.online .carousel-bx {
    position: absolute;
    width: 100%;
    top: -80px;
    right: 0;
    height: 650px
}

.online .carousel .layui-carousel-ind {
    top: -10px
}

.online .carousel .layui-carousel-ind ul {
    background: 0 0
}

.online .carousel .layui-carousel-ind li {
    width: 30px;
    height: 6px;
    background: #c5cef6;
    border-radius: 3px
}

.online .carousel .layui-carousel-ind li.layui-this {
    background: #6b87f2
}

.online .carousel[lay-anim] [carousel-item]:before {
    display: none
}

.online .company-bx {
    padding: 0 50px;
    font-size: 0
}

.online .company-bx a {
    color: #828282;
    display: block;
    height: 125px;
    padding: 10px 0;
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 7px 7px 8px rgba(90, 90, 92, .3);
    box-shadow: 7px 7px 8px rgba(90, 90, 92, .3);
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s
}

.online .company-bx a:hover {
    background-color: #b2b6f1;
    -webkit-box-shadow: 7px 7px 8px rgba(106, 132, 242, .3);
    box-shadow: 7px 7px 8px rgba(106, 132, 242, .3);
    color: #464646;
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px)
}

.online .company-bx li {
    display: inline-block;
    vertical-align: top;
    width: 22%;
    margin-right: 3%;
    margin-bottom: 30px;
    text-align: center;
    font-size: 14px;
    line-height: 1.15
}

.online .company-bx li.last {
    margin-right: 0
}

.online .company-bx p {
    min-height: 32px
}

.online .ic-clogo {
    display: inline-block;
    width: 90px;
    height: 70px;
    background: url(../images/icons/img-cloud-logo.png) no-repeat;
    background-position-y: 0
}

.online .ic-clogo.clogo1 {
    background-position-x: -110px
}

.online .ic-clogo.clogo2 {
    background-position-x: -710px
}

.online .ic-clogo.clogo3 {
    background-position-x: -510px
}

.online .ic-clogo.clogo4 {
    background-position-x: -910px
}

.online .ic-clogo.clogo5 {
    background-position-x: -5812px
}

.online .ic-clogo.clogo6 {
    background: url(/assets/images/icons/pan-icon1.png) no-repeat;
    background-position: 12px -52px;
}

.online .ic-clogo.clogo7 {
    background-position-x: -1710px
}

.online .ic-clogo.clogo8 {
    background-position-x: -3710px
}

.online .ic-clogo.clogo9 {
    background-position-x: -2110px
}

.online .ic-clogo.clogo10 {
    background-position-x: -1510px
}

.online .ic-clogo.clogo11 {
    background-position-x: -710px
}

.online .ic-clogo.clogo12 {
    background-position-x: -510px
}

.online .ic-clogo.clogo13 {
    background-position-x: -4910px
}

.online .ic-clogo.clogo14 {
    background-position-x: -2310px
}

.online .ic-clogo.clogo15 {
    background-position-x: -3310px
}

.online .ic-clogo.clogo16 {
    background-position-x: -5310px
}

.online .ic-clogo.clogo17 {
    background-position-x: -3510px
}

.online .ic-clogo.clogo18 {
    background-position-x: -4110px
}

.online .ic-clogo.clogo19 {
    background-position-x: -2910px
}

.online .ic-clogo.clogo20 {
    background-position-x: -1310px
}

.online .ic-clogo.clogo21 {
    background-position-x: -4310px
}

.online .ic-clogo.clogo22 {
    background-position-x: -1910px
}

.online .ic-clogo.clogo23 {
    background-position-x: -2710px
}

.online .ic-clogo.clogo24 {
    background-position-x: -5904px
}

.online .ic-clogo.clogo25 {
    background-position-x: -4510px
}

.online .ic-clogo.clogo26 {
    background-position-x: -4710px
}

.online .ic-clogo.clogo27 {
    background-position-x: -2510px
}

.online .ic-clogo.clogo28 {
    background-position-x: -3110px
}

.online .ic-clogo.clogo29 {
    background-position-x: -5710px
}

.online .ic-clogo.clogo30 {
    background-position-x: -5110px
}

.online .ic-clogo.clogo31 {
    background-position-x: -5510px
}

.online .ic-clogo.clogoNas {
    background: url(../images/icons/nas.png) no-repeat center
}

.online .ic-clogo.clogo36 {
    background: url(/assets/images/icons/pan-icon1.png) no-repeat;
    background-position: 7px -592px
}

@media (max-width:1199px) {
    .online .carousel {
        padding: 0 15px;
        zoom: .9
    }

    .online .carousel-bx {
        top: -40px
    }
}

@media (max-width:991px) {
    .online {
        text-align: center
    }

    .online-mn {
        padding: 60px 0;
        margin: 0 0
    }

    .online .txt {
        padding: 0 0 30px
    }

    .online .carousel {
        padding: 0 15px;
        zoom: 1
    }

    .online .carousel-bx {
        position: static;
        height: auto;
        zoom: .6
    }

    .online .carousel.layui-carousel>[carousel-item]>* {
        position: relative
    }
}

.other-features .layui-container {
    padding-top: 90px;
    height: 468px
}

.other-features .layui-container h2 {
    text-align: center;
    font-size: 48px;
    font-family: Myriad Pro;
    color: #202020;
    margin-bottom: 40px
}

.other-features .layui-container ul li {
    text-align: center
}

.other-features .layui-container ul .margin-top {
    margin-top: -19px
}

@media (max-width:1199px) {
    .other-features .layui-container {
        height: 420px;
        padding: 40px 20px 0 20px
    }

    .other-features .layui-container h2 {
        font-size: 36px
    }
}

@media (max-width:991px) {
    .other-features .layui-container {
        height: 380px;
        padding: 50px 20px 0 20px
    }

    .other-features .layui-container h2 {
        font-size: 24px;
        margin-bottom: 50px
    }
}

@media (max-width:767px) {
    .other-features .layui-container {
        height: auto;
        padding: 20px 20px 0 20px
    }

    .other-features .layui-container h2 {
        font-size: 24px;
        margin-bottom: 20px
    }

    .other-features .layui-container li {
        font-size: 20px;
        display: block;
        margin: 20px 0
    }
}