.banner-box {
    /*height: 720px;*/
    /*background: url("../images/index-banner.png");*/
    /*background-size: 100% 100%;*/
    /*background-position: center center;*/
    overflow: auto;
}

.banner-content {
    height: 626px;
}

.swiper-pagination {
    bottom: 100px !important;
}

.swiper-pagination-bulletbanner {
    width: 24px;
    height: 8px;
    opacity: 0.5;
    background: rgba(12, 22, 38, 0.3);
    border-radius: 4px;
    /*float: left;*/
    display: inline-block;
    margin-right: 12px;
}

.pagination-bulletbanner-active {
    width: 40px;
    height: 8px;
    background: #ffffff;
    border-radius: 4px;
}

.swiper-content {
    width: 100%;
    /*height: 100%;*/
    height: 720px;
    /*position: absolute;*/
    /*top: 193px;*/
}

.blue-hint {
    width: 54px;
    height: 5px;
    background: #288dff;
}

.banner-title {
    font-size: 36px;
    font-weight: 600;
    margin-top: 23px;
}

.banner-text {
    font-size: 20px;
    font-weight: 400;
    margin-top: 30px;
}

.experience {
    width: 150px;
    height: 48px;
    box-shadow: 0px 4px 16px 0px rgba(0, 127, 255, 0.4);
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    margin-top: 44px;
}

.product-box-index {
    height: 800px;
    background: #ffffff;
    overflow: visible;
}

.value-box {
    height: 154px;
    background: #ffffff;

    padding: 0 65px;
    box-sizing: border-box;
}

.value-item {
    width: 302px;
    height: 100%;
    padding-top: 36px;
    box-sizing: border-box;
}

.value-img {
    height: 82px;
    width: 82px;
}

.value-dec-box {
    height: 100%;
    margin-left: 20px;
}

.value-title {
    font-size: 18px;
    font-weight: 500;
    color: #191919;
}

.value-dec {
    width: 200px;
    font-size: 14px;
    font-weight: 400;
    color: #5c636d;
    margin-top: 12px;
}

.ml-80 {
    margin-left: 80px;
}

.value-box-container {
    height: 154px;
    top: -77px;
    z-index: 2;
    border-radius: 8px;
    box-shadow: 0px 4px 12px 0px rgba(12, 53, 94, 0.11);
}

.product-dec-title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    color: #202328;
}

.product-dec-text {
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    color: #5c636d;
    margin-top: 32px;
}

.product-dec-nav-box {
    margin-top: 38px;
    height: 97px;
    display: flex;
    justify-content: center;
}

.product-dec-nav-box .dec-nav-item:not(:first-child) {
    margin-left: 100px;
}

.dec-nav-item {
    /*width: 64px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dec-nav-item-img {
    width: 44px;
    height: 44px;
    /*background: url('../images/logo.png');*/
    /*background-size: cover;*/
}

.bus {
    background: url("../images/cxgl-icon.png");
    background-size: cover;
}

.active > .bus {
    background: url("../images/cxgl-icon-active.png");
    background-size: cover;
}

.device {
    background: url("../images/device.png");
    background-size: cover;
}

.active > .device {
    background: url("../images/sbgl-icon-active.png");
    background-size: cover;
}

.catering {
    background: url("../images/catering.png");
    background-size: cover;
}

.active > .catering {
    background: url("../images/cygl-icon-active.png");
    background-size: cover;
}

.safely {
    background: url("../images/safely.png");
    background-size: cover;
}

.active > .safely {
    background: url("../images/qyaf-icon-active.png");
    background-size: cover;
}

.synergy {
    background: url("../images/material.png");
    background-size: cover;
}

.active > .synergy {
    background: url("../images/xtbg-icon-active.png");
    background-size: cover;
}

.welfare {
    background: url("../images/welfare.png");
    background-size: cover;
}

.active > .welfare {
    background: url("../images/ygfl-icon-active.png");
    background-size: cover;
}


.index-board {
    background: url("../images/xzzskb-icon.png");
    background-size: cover;
}

.active > .index-board {
    background: url("../images/xzzskb-icon-active.png");
    background-size: cover;
}


.report-form {
    background: url("../images/user-statement-icon.png");
    background-size: cover;
}

.active > .report-form {
    background: url("../images/zdybb-icon-active.png");
    background-size: cover;
}


.data-board {
    background: url("../images/data-brand-icon.png");
    background-size: cover;
}

.active > .data-board {
    background: url("../images/sjkb-icon-active.png");
    background-size: cover;
}


.path {
    background: url("../images/path-icon.png");
    background-size: cover;
}

.active > .path {
    background: url("../images/znghxl-icon-active.png");
    background-size: cover;
}


.dormitory {
    background: url("../images/dormitory-icon.png");
    background-size: cover;
}

.active > .dormitory {
    background: url("../images/zhss-icon-active.png");
    background-size: cover;
}

.wechat {
    background: url("../images/company-wechat-icon.png");
    background-size: cover;
}

.active > .wechat {
    background: url("../images/qywx-icon-active.png");
    background-size: cover;
}


.dingding {
    background: url("../images/dd-icon.png");
    background-size: cover;
}

.active > .dingding {
    background: url("../images/dd-icon-active.png");
    background-size: cover;
}


.wechat-public {
    background: url("../images/wechat-public-icon.png");
    background-size: cover;
}

.active > .wechat-public {
    background: url("../images/wxgzh-icon-active.png");
    background-size: cover;
}


.app {
    background: url("../images/app-icon.png");
    background-size: cover;
}

.active > .app {
    background: url("../images/app-icon-active.png");
    background-size: cover;
}


.company-bus {
    background: url("../images/cxgl-icon.png");
    background-size: cover;
}

.active > .company-bus {
    background: url("../images/cxgl-icon-active.png");
    background-size: cover;
}


.company-dormitory {
    background: url("../images/index-dormitory-icon.png");
    background-size: cover;
}

.active > .company-dormitory {
    background: url("../images/zhss-icon-active.png");
    background-size: cover;
}

.company-private {
    background: url("../images/index-private-icon.png");
    background-size: cover;
}

.active > .company-private {
    background: url("../images/gcsy-icon-active.png");
    background-size: cover;
}

.company-public {
    background: url("../images/index-public-icon.png");
    background-size: cover;
}

.active > .company-public {
    background: url("../images/qygwyc-icon-active.png");
    background-size: cover;
}

.company-polling {
    background: url("../images/index-polling.png");
    background-size: cover;
}

.active > .company-polling {
    background: url("../images/qyxj-icon-active.png");
    background-size: cover;
}

.company-repair {
    background: url("../images/index-repairs-icon.png");
    background-size: cover;
}

.active > .company-repair {
    background: url("../images/bxgl-icon-active.png");
    background-size: cover;
}

.company-good {
    background: url("../images/index-goods-icon.png");
    background-size: cover;
}

.active > .company-good {
    background: url("../images/wzgl-icon-active.png");
    background-size: cover;
}

.dec-nav-item-text {
    min-width: 64px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #5e6b7a;
    margin-top: 16px;
}

.dec-nav-item-indicator {
    width: 64px;
    height: 3px;
    background: #288dff;
    margin-top: 8px;
    display: none;
    animation: headShake 1s linear;
}

.active > .dec-nav-item-indicator {
    display: block;
}


.product-dec-content-box-index {
    margin-top: 50px;
    /*display: none;*/
}

.product-dec-content-title-index {
    font-size: 24px;
    font-weight: 500;
    color: #2f353d;
}

.product-dec-content-dec-index {
    font-size: 16px;
    font-weight: 400;
    color: #5c636d;
    margin-top: 15px;
}

.product-try-btn-index {
    width: 150px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    box-shadow: 0px 2px 10px 0px rgba(0, 127, 255, 0.4);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin-top: 45px;
}

.product-dec-content-left-index {
    margin: 69px 0 0 102px;
    display: none;
    /*animation: fadeInLeft 0.6s linear;*/
}

.product-dec-content-dec-index {
    width: 432px;
    letter-spacing: 1px;
}

.product-dec-content-img-index {
    width: 444px;
    /*height: 322px;*/
    display: none;
    margin-right: 123px;
    /*animation: fadeInRight 0.6s linear;*/
}

.data-product-box {
    height: 800px;
    background: #f5faff;
    overflow: hidden;
}

.data-product-box .product-dec-title {
    margin-top: 80px;
}

.data-product-box .product-dec-content-img {
    margin: 0 0 0 100px;
}

.data-product-box .product-try-btn {
    margin-top: 24px;
}

.platform-box {
    height: 800px;
    background: #ffffff;

}

.platform-box .product-dec-title {
    margin-top: 80px;
}

.index-box {
    height: 300px;
    /*background: #f5faff;*/
    overflow: hidden;
}

.mt-80 {
    margin-top: 80px;
}

.mb-80 {
    margin-bottom: 80px;
}

.index-box .product-dec-text {
    margin-top: 16px;
}

.index-box .product-dec-nav-box {
    margin-top: 30px;
}

.index-content-box {
    height: 720px;
    background: #ffffff;
}

.index-number-box {
    margin-top: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.index-number-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 56px;
    height: 56px;
    color: #202328;
    margin: 0 32px 0 28px;
}

.index-number-box .index-number-item:not(:last-child) {
    margin-right: 8px;
}

.index-number-item {
    width: 36px;
    height: 56px;
    background: #288dff;
    line-height: 56px;
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #ffffff;
}

.line-img {
    height: 4px;
    width: 265px;
}

.ml-28 {
    margin-left: 28px;
}

.index-content-img {
    /*width: 300px;*/
    width: 900px;
    height: 494px;
}

.index-swiper-container {
    width: 950px;
    margin: 30px 0 81px 150px;
    /*overflow: hidden;*/
}

.blue-data-box {
    height: 280px;
    background: #2383fa;
    overflow: hidden;
}

.blue-item-value {
    font-size: 60px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
}

.blue-item-dec {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
}

.blue-item-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-title {
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    color: #282828;
    margin-top: 98px;
}

.client-dec-box {
    width: 1200px;
    height: 458px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 48px;
}

.client-img-index {
    width: 458px;
    height: 100%;
}

.client-detail-box {
    width: 742px;
    height: 100%;
    background: #ffffff;
    padding: 60px 0 0 51px;
    box-sizing: border-box;
}

.client-logo {
    width: 195px;
    height: 76px;
}

.client-text-dec {
    width: 600px;
    height: 120px;
    font-size: 20px;
    font-weight: 500;
    color: #202328;
    margin-top: 20px;
}

.client-name-index {
    font-size: 20px;
    font-weight: 500;
    color: #202328;
    margin-top: 32px;
}

.show-detail-btn {
    color: #3770fa;
    margin-top: 36px;
}

.client-item-box {
    margin: 32px 0 72px 0;
    display: flex;
    justify-content: space-between;
    /*align-items: center;*/
}

.client-item-index {
    width: 180px;
    height: 83px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0px 2px 10px 0px rgba(19, 45, 68, 0.1);
    text-align: center;
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
    box-sizing: border-box;
}

.client-item-index:hover {
    border-bottom: 4px solid #156cfd;
}

.client-item-img {
    /*height: 52px;*/
    width: 180px;
    height: 78px;
    /*margin-top: 21px;*/
    /*width: 72px;*/
}

.all-client-box {
    height: 1000px;
    background: #F5FAFF;
}

.all-logo-box {
    margin-top: 50px;
    width: 1250px;
    height: 539px;
}

.logo-box-item {
    height: 90px;

}

.logo-box-title {

}

.foot-try-box {
    height: 176px;
    background: url("../images/foot-blue.png");
    background-size: 100% 110%;
}

.foot-try-title {
    font-size: 28px;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
    letter-spacing: 4px;
    margin-top: 36px;
}

.foot-try-btn {
    display: block;
    width: 132px;
    height: 40px;
    background: #ffffff;
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #288dff;
    margin: 24px auto;
    transition: all linear 0.2s;
}

.foot-try-btn:hover {
    box-shadow: 0px 3px 12px 0 #ffffff;
}

.foot-box {
    height: 493px;
    background: #212636;
}

.foot-content-box {
    height: 320px;
    margin-top: 80px;
    border-bottom: 1px solid rgba(209, 220, 255, 0.1);
}

.company-dec {
    width: 280px;
}

.foot-logo-img {
    width: 120px;
    height: 40px
}

.foot-item-text {
    font-size: 14px;
    font-weight: 400;
    color: #a7b3d2;
    display: block;
}

.ca7b {
    color: #a7b3d2;
}

.mt-12 {
    margin-top: 12px;
}

.mt-19 {
    margin-top: 19px;
}

.other-logo {
    height: 24px;
    width: 24px;
    margin-right: 12px;
}

.foot-item-title {
    font-size: 18px;
    font-weight: 500;
    color: #f3f7ff;
}

.mt-21 {
    margin-top: 21px;
}

.product-center {
    margin-left: 120px;
}

.client-example, .administration, .about {
    margin-left: 72px;
}

.code-img {
    width: 80px;
    height: 80px;
}

.code-box {
    margin-left: 84px;
}

.ml-16 {
    margin-left: 16px;
}

.foot-hint {
}

.banner-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-value-box {
    padding-top: 190px;
    box-sizing: border-box;
}

.client-logo-img {
    width: 160px;
    height: 72px;
    margin: 0 13px 24px 0;
}

.triangle {
    width: 140px;
    height: 144px;
    position: absolute;
    z-index: 2;
}

.square {
    position: absolute;
    z-index: 2;
    width: 158px;
    height: 163px;
}

.all-client-box .triangle {
    left: 2%;
    top: -60px;
}

.product-box-square {
    right: 2%;
    bottom: -80px;
}

.scan-code-box {
    width: 150px;
    height: 150px;
    border: 2px solid #FFFFff;
    position: absolute;
    left: -62px;
    top: -165px;
    background-color: #FFF;
    cursor: pointer;

}

.scan-code-box:before, .scan-code-box:after {
    content: "";
    display: block;
    border-width: 8px;
    position: absolute;
    bottom: -18px;
    left: 65px;
    border-style: solid dashed dashed;
    border-color: #FFFFff transparent transparent;
    font-size: 0;
    line-height: 0;
}

/*.scan-code-box:after{*/
/*bottom:-18px;*/
/*border-color:#FFF transparent transparent;*/
/*}*/
.scan-code-img {
    width: 100%;
    height: 100%;
}

.other-logo-box:hover .scan-code-box {
    display: block;
}

.right-side-box {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    /*height: 356px;*/
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px #CDD9EE;
    border-radius: 8px;
    box-sizing: border-box;
    padding: 4px;
    z-index: 999999999;
}


.side-item {
    width: 100%;
    height: 87px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
}

.side-item-text {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #808FA9;
    line-height: 17px;
    text-shadow: 0px 2px 10px #CDD9EE;

}

.side-item:hover .side-item-text {
    color: #FFFFFF;
}

.active .side-item-text {
    color: #FFFFFF;
}

.side-item:hover {
    background: #1F70F0;
}

.side-item-icon {
    width: 44px;
    height: 44px;
}

.phone-icon {
    background: url("../images/side-right-phone.png");
    background-size: 100% 100%;
}

.side-item:hover .phone-icon {
    background: url("../images/side-right-phone-active.png");
    background-size: 100% 100%;
}

.active .phone-icon {
    background: url("../images/side-right-phone-active.png");
    background-size: 100% 100%;
}

.wx-icon {
    background: url("../images/side-right-wx.png");
    background-size: 100% 100%;
}

.side-item:hover .wx-icon {
    background: url("../images/side-right-wx-active.png");
    background-size: 100% 100%;
}

.gift-icon {
    background: url("../images/side-right-gift.png");
    background-size: 100% 100%;
}

.side-item:hover .gift-icon {
    background: url("../images/side-right-gift-active.png");
    background-size: 100% 100%;
}

.calc-icon {
    background: url("../images/side-right-calc.png");
    background-size: 100% 100%;
}

.side-item:hover .calc-icon {
    background: url("../images/side-right-calc-active.png");
    background-size: 100% 100%;
}

.contact-phone {
    position: absolute;
    left: -220px;
    width: 200px;
    height: 87px;
    line-height: 87px;
    text-align: center;
    background: #FFFFff;
    border-radius: 4px;
    font-size: 22px;
    font-weight: 600;
    box-shadow: 0px 2px 10px 0px #CDD9EE;
    display: none;
}

.side-item:hover .contact-phone {
    display: block;
}

/*#bannerCanvas{*/
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
/*width: 100%;*/
/*height: 100%;*/
/*}*/

/*canvas{*/
/*width: 100%;*/
/*height: 100%;*/
/*}*/


.closed-loop-box {
    width: 384px;
    height: 384px;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0px 4px 20px 0px #D0E2F4;
    line-height: 1.2;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}
.closed-loop-box:hover {
    transform: translate(2px, -2px);
    box-shadow: 0 4px 20px 0 #aaa;
}
.inner_box {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.dec_title {
    font-size: 30px;
    line-height: 50px;
    margin-top: 36px;
    color: #fff;
    text-align: center;
}
.dec_sub_title {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    text-align: center;
}
.dec_content {
    margin-top: 60px;
    width: 310px;
    margin-left: auto;
    margin-right: auto;
    color: #7A7D82;
    font-size: 16px;
    line-height: 26px;
    height: 110px;
}

.detail_btn {
    width: 176px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    background-color: #9BB3CC;
    border-radius: 22px;
    margin-top: 7px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.12s ease;
}
.closed-loop-box:hover .detail_btn {
    background-color: #298DFF;
    background-image: linear-gradient(-42deg, #298DFF 2%, #2AAFFF 99%);
}

.closed-icon {
    width: 384px;
    height: 140px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.closed-img {
    display: block;
    width: 100%;
    height: 100%;
}
.closed-loop-box.ml {
    margin-left: 24px;
}

.why-select-box {
    height: 450px;
    background: url("../images/why-select-bg.png") no-repeat;
    background-size: 100% 100%;
}

.why-select-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.why-item-box {
    /*margin-top: 25px;*/
    width: 530px;
    height: 55px;
    border-bottom: 1px solid #E6E6E6;
}

.why-item-text {
    font-size: 22px;
    width: 100px;
    color: #585A5E;
    height: 55px;
    line-height: 55px;
    cursor: default;
}

.why-item-text + .why-item-text {
    margin-left: 40px;
}

.why-item-text.active {
    color: #2195F2;
    border-bottom: 2px solid #2195F2;
}

.why-dec-box {
    width: 730px;
    margin-top: 10px;
    font-size: 18px;
    color: #585A5E;
}

.mb-5 {
    margin-bottom: 5px;
}

.lh1-2 {
    line-height: 1.2;
}