.banner1 {
    width: 100%;
    height: 530px;
    padding-top: 150px;
    padding-bottom: 156px;
    padding-left: 40px;
    padding-right: 40px;
    background: url(../../images/features/banbg.png) no-repeat;
    background-size: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    display: inline-flex;
    margin-top: 80px;
}

.features_webchat .banner.swiper-container {
  min-height: calc(100vh - var(--header-height, 380px)) !important; /* 调整webchat高度 */
  height: auto !important; /* 继承原有响应式逻辑 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .features_webchat .banner.swiper-container {
    min-height: calc(100vh - var(--header-height, 260px)) !important;
  }
}


.banner1 .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner1 .butBox {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
    background: linear-gradient(360deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.16) 100%);
    border-radius: 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: inline-flex
}

.banner1 .butBox .txt {
    text-align: center;
    color: white;
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word
}

.banner1 .titBox {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    margin: 28px 0;
}

.banner1 .titBox .txt {
    align-self: stretch;
    text-align: center;
    color: white;
    font-size: 54px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 72px;
    word-wrap: break-word
}

.banner1 .info {
    width: 1224px;
    text-align: center;
    color: white;
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word
}

.banner2 {
    width: 100%;
    height: 800px;
}

.box1 {
    background: white;
    /* border-top-left-radius: 60px; */
    /* border-top-right-radius: 60px; */
    overflow: hidden;
    justify-content: space-between;
    gap: 18px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding-top: 108px;
}

.box1 .item {
    flex: 1 1 0;
    padding: 32px;
    background: white;
    border-radius: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 28px;
    display: inline-flex;
    align-items: center;
}

.box1 .item .infoBox {
    align-self: stretch;
    height: 276px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    display: flex;
}

.box1 .item .infoBox .tit {
    align-self: stretch;
    color: #1C2029;
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word;
    text-align: center;
}

.box1 .item .infoBox .con {
    align-self: stretch;
    color: #5D667A;
    font-size: 18px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word
}

.box2 {
    margin-top: 54px;
    padding-bottom: 108px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 72px;
    display: inline-flex;
}

.box2 .butBox {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: inline-flex
}

.box2 .butBox .but {
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 30px;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: flex;
    color: #5D667A;
    cursor: pointer;
}

.box2 .butBox .but:hover {
    background: #f1f1f1;
}

.box2 .butBox .but .txt {
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word;
}

.box2 .butBox .isSelected {
    background: #1C93E8;
    color: white;
    box-shadow: -8px 20px 48px rgba(21.22, 73.28, 163.20, 0.12);
    transition: background-color 1.2s ease;
}

.box2 .imgg {
    display: none;
}

#but1 {
    display: block;
}

.box3 {
    padding-bottom: 108px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 72px;
    display: inline-flex;
}

.box3 .titBox {
    align-self: stretch;
    height: 188px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 28px;
    display: flex;
}

.box3 .titBox .tit {
    align-self: stretch;
    text-align: center;
    color: #1C2029;
    font-size: 48px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 64px;
    word-wrap: break-word
}

.box3 .titBox .info {
    align-self: stretch;
    text-align: center;
    color: #5D667A;
    font-size: 20px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word
}

.box3 .itemBox {
    justify-content: space-between;
    gap: 26px;
    display: inline-flex;
    align-items: center;
}

.box3 .item {
    width: 386px;
    align-self: stretch;
    padding: 32px;
    background: white;
    border-radius: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    display: inline-flex
}

.box3 .item .imgBox {
    width: 200px;
    height: 210px;
    overflow: hidden;
}

.box3 .item .titBox {
    align-self: stretch;
    height: 132px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    display: flex;
}

.box3 .item .titBox .tit {
    align-self: stretch;
    text-align: center;
    color: #1C2029;
    font-size: 24px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word
}

.box3 .item .titBox .con {
    align-self: stretch;
    color: #5D667A;
    font-size: 18px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word
}

.box5 .container {
    padding: 0 0 108px;
}

.box5 .container .infoBox {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

.box5 .container .titBox {
    width: 100%;
    text-align: center
}

.box5 .container .titBox .span1 {
    color: #8FC31F;
    font-size: 48px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 64px;
    word-wrap: break-word;
    background: linear-gradient(to right, #0588E9, #8FC31F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box5 .container .titBox .span2 {
    color: #1C2029;
    font-size: 40px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 56px;
    word-wrap: break-word
}

.box5 .itemBox {
    width: 100%;
    background: linear-gradient(90deg, #E8F4FC 0%, #C8E4FA 100%);
    height: 360px;
    border-radius: 24px;
    margin-top: 72px;
    display: flex;
}

.box5 .itemBox .imgBox {
    margin-left: 40px;
}

.box5 .itemBox .txtInfoBox {
    position: relative;
    margin-left: 30px;
    width: 50%;
    display: flex;
    align-items: center;
}

.box5 .itemBox .txtInfoBox .tip {
    color: #1C2029;
    font-size: 88px;
    font-family: BM Hanna 11yrs Old;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word;
    position: absolute;
}

.box5 .itemBox .txtInfoBox .tip1 {
    top: 60px;
}

.box5 .itemBox .txtInfoBox .tip2 {
    bottom: 0;
    right: 0;
}

.box5 .itemBox .txtInfoBox .txt {
    color: #1C2029;
    font-size: 20px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
    padding-left: 30px;
}

.box5 .swiper-container {
    padding-bottom: 50px;
}

.box5 .swiper-container-horizontal>.swiper-pagination-bullets,
.box5 .swiper-pagination-custom,
.box5 .swiper-pagination-fraction {
    bottom: 0;
}

/* customization */
.customization .box1 .infoBox {
    height: auto !important;
}

.customization .box2 .itemBox {
    padding-bottom: 108px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 162px;
    display: inline-flex;
}

/* integrationService */
.banner02itemBox {
    gap: 32px;
    display: inline-flex;
    margin-top: 72px;
}

.banner02item {
    width: 282px;
    height: 225px;
    cursor: pointer;
}

.banner02item1 {
    background: url(../../images/features/img35.png) no-repeat;
    background-size: 100%;
}

.banner02item2 {
    background: url(../../images/features/img36.png) no-repeat;
    background-size: 100%;
}

.banner02item3 {
    background: url(../../images/features/img37.png) no-repeat;
    background-size: 100%;
}

.banner02item4 {
    background: url(../../images/features/img38.png) no-repeat;
    background-size: 100%;
}

/* securityPrivacy */
#securityPrivacy .box1 {
    padding-top: 108px;
    background: white;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    display: inline-flex;
}


.infoList {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.infoList .item {
    margin-bottom: 5px;
    display: inline-flex;
}

.infoList .item img {
    width: 20px;
    height: 20px;
    margin-top: 7px;
}

.infoList .item .txt {
    color: #1C2029;
    font-size: 20px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 32px;
    word-wrap: break-word
}

/* knowledgeBase */
.coonItemBox {
    align-self: stretch;
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 15px;
    display: flex
}

.coonItemTit {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 32px;
    display: inline-flex
}

.coonItemShow2 {
    align-self: stretch;
    background: white;
    box-shadow: -12px 24px 48px rgba(151, 157, 170, 0.22);
    border-top-left-radius: 16px;
    border-top-right-radius: 4px;
    justify-content: flex-end;
    align-items: flex-start;
    display: inline-flex;
}

.coonItemBox .on {
    display: none;
}

.coonItemShow {
    display: none;
}


.custItemBox {
    width: 100%;
    height: 100%;
    padding: 68px 0 68px 50px;
    background: #FAFAFA;
    overflow: hidden;
    align-items: flex-start;
    gap: 32px;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 50px;
    border-radius: 60px;
}

.custItemBox .custItem {
    width: 30%;
    height: 360px;
    padding: 32px 20px;
    background: white;
    border-radius: 24px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 28px;
    display: inline-flex;
    overflow: hidden;
}

.custItemBox .custItem .custTit {
    align-self: stretch;
    text-align: center;
    color: #1C2029;
    font-size: 20px;
    font-family: Helvetica;
    font-weight: 700;
    line-height: 32px;
    word-wrap: break-word
}

.custItemBox .custItem .custCon {
    align-self: stretch;
    text-align: center;
    color: #5D667A;
    font-size: 16px;
    font-family: Helvetica;
    font-weight: 400;
    line-height: 26px;
    word-wrap: break-word
}

@media (max-width:1025px) {
    .banner1 {
        background-size: cover;
        overflow: hidden;
    }

    .box1 {
        margin-bottom: 108px;
    }

    .box3 {
        width: 100%;
    }

    .box3 .item {
        width: 32%;
    }

    .livechat {
        flex-direction: column !important;
        margin-bottom: 108px;
    }

    .engage {
        flex-direction: column-reverse !important;
    }

    .engageInfo {
        width: 100% !important;
        padding: 0 10px;
    }

    .box5 {
        margin-top: 108px;
    }

    .box5 .container .titBox .span2 {
        font-size: 30px;
    }

    .box5 .itemBox {
        height: auto;
    }

    .box5 .itemBox .imgBox {
        margin-left: 0;
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }

    .box5 .itemBox .txtInfoBox {
        margin-left: 0;
        width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .box5 .itemBox .txtInfoBox .tip {
        display: none;
    }

    .box5 .itemBox .txtInfoBox .txt {
        padding-left: 0;
        font-size: 18px;
        line-height: 26px;
        margin: auto 0;
    }

    .box5 .banner .swiper-slide {
        height: auto !important;
    }

    .uibox2 {
        padding: 108px 20px !important;
    }

    .uibox2 .uititBox {
        width: 100% !important;
    }

    .uibox2 .uititBox .uitit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .uibox2 .uiItem {
        width: 100% !important;
        flex-direction: column;
    }

    .uibox2 .uiItem2 {
        flex-direction: column-reverse;
    }

    .uibox2 .uiItemBox {
        width: 100% !important;
    }

    .uibox2 .uiItemInfo {
        width: 100% !important;
    }

    .uibox2 .item3 {
        width: 100% !important;
        flex-direction: column-reverse;
    }

    .uibox2 .item4 {
        width: 100% !important;
        flex-direction: column;
    }

    .cmbox {
        flex-direction: column-reverse;
    }

    .cmboxInfo {
        width: 100% !important;
    }

    .cmboxInfo .cmboxTit {
        width: 100% !important;
    }

    .cmbox .cmboxImg {
        width: 100% !important;
        height: auto !important;
    }

    .cmbox .cmboxImg img {
        width: 100%;
    }

    .cmbox2 {
        flex-direction: column;
        width: 100%;
    }

    .cmbox2 img {
        width: 100%;
    }

    .custItemBox .custItem {
        width: 45% !important;
    }

    .banner1 .titBox .txt {
        font-size: 40px !important;
        line-height: 60px !important;
    }

    .analyticsItemBox {
        flex-direction: column;
    }

    .kbbox {
        margin-top: -108px;
        padding-bottom: 0 !important;
    }

    .banner02itemBox {
        flex-wrap: wrap;
    }

    .banner02item {
        width: 45%;
        min-height: 400px;
    }

    .commcItem3 {
        flex-direction: column;
    }

    .commcItem3 .cmboxTit {
        width: 100% !important;
    }

    .commcItem3 .cmboxImg {
        width: 100% !important;
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        display: inline-flex;
    }

    .commcItem3 .cmboxImg img {
        width: 70%;
    }

    .commcItem4 {
        flex-direction: column-reverse;
    }

    .commcban1 .info {
        font-size: 16px;
    }

    .custBox1 .item .infoBox .tit {
        font-size: 18px;
    }

    .custBox2 .butBox .isSelected {
        background: #1C93E8 !important;
        color: white !important;
    }
}

@media (min-width: 769px) and (max-width: 1025px) {}

@media (max-width: 768px) {
    #wrapper {
        margin-top: 0 !important;
    }

    .banner1 .butBox .txt {
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .banner1 .titBox .txt {
        font-size: 2.6rem !important;
        line-height: 3.6rem !important;
    }

    .banner1 .info {
        width: 100%;
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .box1 {
        margin-bottom: 50px !important;
    }

    .box1 .item {
        padding: 10px;
    }

    .box1 .item img {
        width: 50%;
    }

    .box1 .item .infoBox {
        height: auto !important;
    }

    .box1 .item .infoBox .tit {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    .box1 .item .infoBox .con {
        font-size: 1.4rem;
        line-height: 2.4rem;
    }

    .box2 .butBox .isSelected {
        background: #1C93E8 !important;
    }

    .box2 .butBox {
        gap: 1.5rem !important;
    }

    .box2 .butBox .but {
        padding: 8px 15px;
    }

    .box3 .titBox .tit {
        font-size: 4rem;
        line-height: 5rem;
    }

    .box3 .item {
        padding: 10px;
    }

    .box3 .item .imgBox {
        width: 100px;
        height: 110px;
        overflow: hidden;
    }

    .box3 .item .titBox .tit {
        font-size: 2.2rem;
        line-height: 3rem;
    }

    .box3 .item .titBox .con {
        font-size: 1.8rem;
        line-height: 2.6rem;
        padding-left: 10px;
    }

    .box5 .container .titBox .span1 {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .box5 .container .titBox .span2 {
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .box5 .itemBox {
        margin-top: 50px;
    }

    .box5 .itemBox .imgBox img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .box5 .itemBox .txtInfoBox .txt {
        font-size: 1.6rem !important;
        line-height: 2.4rem !important;
    }

    .livechat {
        margin-top: 108px;
    }

    .livechat .livechatTit {
        font-size: 3rem !important;
        padding: 0 1.5rem;
    }

    .livechat .livechatCon {
        font-size: 2rem !important;
        padding: 0 1.5rem;
    }

    .engageTit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .engageCon {
        font-size: 2rem !important;
        line-height: 2.8rem !important;
    }

    .uibox2 img {
        max-width: 100%;
    }

    .uibox2 .uiItemInfoTit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .uibox2 .item5 {
        height: auto !important;
    }

    .uibox2 .item5 img {
        max-width: 60% !important;
    }

    .uibox2 .item5 .item5tit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .uibox2 .item5 .item5con {
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .cmboxInfo .cmboxTit {
        width: 100% !important;
        font-size: 2.6rem !important;
        line-height: 3rem !important;
    }

    .cmboxInfo .cmboxTit2 {
        font-size: 2.6rem !important;
        line-height: 4rem !important;
    }

    .cmboxInfo .cmboxCon {
        font-size: 1.6rem !important;
        line-height: 2.8rem !important;
    }

    .infoList .item .txt {
        font-size: 1.6rem !important;
    }

    .custItemBox {
        padding: 15px;
    }

    .custItemBox .custItem .custTit {
        font-size: 1.8rem !important;
        line-height: 2.4rem !important;
    }

    .custItemBox .custItem .custCon {
        font-size: 1.3rem;
        line-height: 2rem;
    }

    .kbboxTit {
        font-size: 4rem !important;
        line-height: 5rem !important;
    }

    .securityPrivacyTit {
        font-size: 2.8rem !important;
        line-height: 4rem !important;
    }

    .integrationServiceTit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .integrationServiceCon {
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .banner02item {
        height: 170px;
        min-height: 170px;
    }

    .mtit {
        font-size: 2rem !important;
        line-height: 2.6rem !important;
    }

    .coonItemShow .mcon {
        font-size: 1.8rem !important;
        line-height: 2.6rem !important;
    }

    .coonItemShow .mliBox {
        font-size: 1.8rem !important;
        line-height: 2.6rem !important;
    }

    .commcban2 {
        height: auto !important;
        margin-bottom: 5rem !important;
    }

    .commcItem3 .cmboxTit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }

    .commcItem3 .cmboxCon {
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    .commcItem3 .cmboxImg img {
        width: 100% !important;
    }

    .custBox1 {
        padding: 5rem 0 !important;
    }

    .custBox1 .item .infoBox .tit {
        font-size: 1.4rem !important;
        line-height: 2rem !important;
    }

    .custBox2 .butBox .but .txt {
        font-size: 1.8rem;
    }

    .custBox2 .custItem3 {
        flex-direction: column;
    }

    .custBox2 .custItem3 img {
        width: 100% !important;
        margin: 0 !important;
    }

    .custBox2 .custItem4 {
        flex-direction: column-reverse;
    }

    .custBox2 .custItem4 img {
        width: 100% !important;
        margin: 0 !important;
    }
    
     .custItemTit {
        font-size: 3rem !important;
        line-height: 4rem !important;
    }
    .custItemCon {
        margin: 0 auto !important;
    }
}