html {
    scroll-behavior: smooth;
}

.banner-section {
    width: 100%;
    height: 51vw;
    cursor: pointer;
    position: relative;
}
.banner-section .left-arrow,
.banner-section .right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 999;
    font-size: 2rem;
    color: #e0e0e0;
}
.banner-section .left-arrow {
    left: 1rem;
}
.banner-section .right-arrow {
    right: 1rem;
}


.banner-section .banner-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    /*position: relative;*/
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.banner-section .banner-content-active {
    opacity: 1;
}
.banner-section .banner-content .banner-img {
    width: 100%;
}
.banner-section .banner-content .banner-text {
    width: 51rem;
    max-width: 916px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 11vw;
}


#banner-content_3 .banner-text {
    max-width: 961px;
}
#banner-content_3 .banner-text {
    left: 10%;
    top: 50%;
    transform: translateX(0%) translateY(-50%);
    max-width: 664px;
}
/*.banner-section .banner-content .banner-text:last-child {*/
/*    left: 10%;*/
/*}*/
.banner-section .carousel-indicators {
    position: absolute;
    bottom: 3.6vw;
    width: 7.8rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-section .carousel-indicators .carousel-indicator {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.banner-section .carousel-indicators .carousel-indicator .carousel-indicator-icon {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: #fff;
}

.banner-section .carousel-indicators .carousel-indicator-active {
    /*background-color: #FFCC5E;*/
    border: 2px solid var(--base-line-bg-color);
}

.banner-section .carousel-indicators .carousel-indicator-active .carousel-indicator-icon {
    background-color: var(--base-line-bg-color);
}

.services {
    display: flex;
    flex-wrap: nowrap;
    color: white;
    height: 51vw;
    cursor: pointer;
}

.services .service-item .service-item-container {
    padding: var(--severice-item-padding);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    height: calc(100% - 15vw);
    position: relative;
}

.service-item-container .service-item-title {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
}

.service-item-title .service-item-title-text {
    width: 8.1rem;
    height: 1.8rem;
    margin-bottom: 1rem;
    max-width: 146px;
    max-height: 33px;
}

.rz {
    background: url("/static/images/rz_service.png") no-repeat;
    background-size: contain;
}

.jc {
    background: url("/static/images/jc_service.png") no-repeat;
    background-size: contain;
}


.service-item-title .service-item-title-text-sub {
    font-size: var(--base-font-size-default);
}
.service-item-title .line {
    width: 48px;
    height: 3px;
    background-color: var(--base-line-bg-color);
    margin-top: 2vw;
}

.service-item-container .service-item-content {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 6.5vw;
}


.service-item-content .service-item-content-item {
    flex: 0 0 calc(25% - 2px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /*width: 17.3rem;*/
    height: 12vw;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    font-size: var(--base-font-size-default);
    flex-wrap: wrap;

    &:hover {
        background: #175caa;
        /*color: var(--base-font-color-primary-hover);*/
    }


}

.service-item-content-item .service-item-content-item-icon {
    width: 4vw;
    height: 4vw;
    max-width: 48px;
    max-height: 48px;
    margin-bottom: .5rem;
}
.service-item-content-item .service-item-content-item-text {
    flex: 0 0 100%;
    text-align: center;
    color: #FFFFFF;
}


.services .detect {
    flex: 3;
    background: url("/static/images/bg3.jpg") no-repeat center center;
    background-size: cover; /* 确保背景图片填满整个元素 */
    transition: all 0.3s ease-in-out;  /* 添加过渡效果 */
    order: 1; /* 设置顺序 */
}

.services .authentication {
    flex: 1;
    background: url("/static/images/bg4.jpg") no-repeat center center;
    background-size: cover; /* 确保背景图片填满整个元素 */
    transition: all 0.3s ease-in-out;  /* 添加过渡效果 */
    order: 2; /* 设置顺序 */
}

.details {
    height: 51vw;
    background-color: #ffffff;
}

.details .details-container {
    margin: 7.6vw auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 68vw;
    height: calc(100% - 15vw);
}

.details-container .detail-item {
    border-radius: 20px;
    border: 1px solid #EAEAEA;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    height: calc(17vw - 4.6vw);
    padding: 2.3vw;
    width: calc(33vw - 4.6vw);
    transition: transform 0.3s ease-in-out;
}

.details-container .detail-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.details-container .detail-detail-item-content {
    width: 33vw;
    height: 17vw;
    position: relative;
}
.details-container .detail-detail-item-content img {
    width: 22.4vw;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    max-width: 430px;
    max-height: 193px;
}

.detail-item .detail-item-title {
    flex: 0 0 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}

.detail-item-title .detail-item-title-icon {
    border-radius: 50%;
    border: 2px solid #4077B4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.7vw;
    height: 4.7vw;
    max-width: 90px !important;
    max-height: 90px !important;
}

.detail-item-title .detail-item-title-icon img {
    width: 55%;
    max-width: 48px;
}

.detail-item-title>.detail-item-title-index>img {
    width: 2.8vw;
    max-width: 54px;
}

.detail-item .detail-item-title-text {
    flex: 0 0 100%;
    font-size: var(--base-font-size-xlarge);
    color: var(--base-font-color-info);
    font-weight: bold;
}

.detail-item .detail-item-content {
    font-size: var(--base-font-size-default);
    color: var(--base-font-color-info-1);
}


.company-intro {
    width: 100%;
    /*height: 51vw;*/
    background: url("/static/images/index_slices/office.jpg") no-repeat center center;
    background-size: cover;
}

.company-intro .company-intro-container {
    display: flex;
    flex-wrap: wrap;
    color: white;
    margin: 7.6vw auto;
    align-content: space-between;
    width: 68vw;

}
.company-intro-container .company-intro-title {
    flex: 0 0 100%;
    margin-bottom: 3rem;
}

.company-intro-container .company-intro-title img {
    width: 6.4vw;
    min-width: 80px;
    max-width: 123px;
}

.company-intro-container .company-intro-content {
    width: 33vw;
    text-align: justify;
    font-size: var(--base-font-size-default);
    line-height: 2rem;
}

.company-intro-container .device-show {
    flex: 0 0 100%;
    margin-top: 3.8rem;
}

.device-show .device-show-title {
    font-size: var(--base-font-size-default);
}

.device-show .device-show-list {
    margin-top: 1.6vw;
    display: flex;
}

.device-show .device-show-list .device-show-item {
    width: 9.4vw;
    height: 9.4vw;
    background-color: white;
    border-radius: 5.5%;
    margin-right: 1.6vw;
    border: 4px solid #ffffff;
}
.device-show .device-show-list .device-1 {
    background: url("/static/images/index_slices/device_01.jpg") no-repeat;
    background-size: contain;
}
.device-show .device-show-list .device-2 {
    background: url("/static/images/index_slices/device_02.jpg") no-repeat;
    background-size: contain;
}
.device-show .device-show-list .device-3 {
    background: url("/static/images/index_slices/device_03.jpg") no-repeat;
    background-size: contain;
}

.company-intro-container .learn-more {
    width: 10rem;
    height: 2.8rem;
    border-radius: 1.4rem;
    border: 1px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--base-font-size-default);
    margin-top: 5rem;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    color: white;
}



.company-intro-container .learn-more:hover {
    background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
    border-color: #007bff; /* 鼠标悬停时的边框颜色 */
    color: var(--base-font-color-primary-hover);
}

.company-intro-container .learn-more .learn-more-icon {
    width: 14px;
    height: 14px;
    margin-left: 0.8rem;
    background: url("/static/images/icons/more.png") no-repeat;
    background-size: contain;
    transition: background 0.3s;
}

.company-intro-container .learn-more:hover .learn-more-icon {
    background: url("/static/images/icons/more_hover.png") no-repeat; /* 鼠标悬停时的图标 */
    background-size: contain;
}

/*移动端*/
@media (max-width: 991px) {

    .banner-section .left-arrow,
    .banner-section .right-arrow {
        display: none;
    }

    .banner-content .banner-text {
        width: 50% !important;
    }
    /*  服务列表的布局  */
    .services {
        flex-wrap: wrap;
        height: auto;
    }

    .services .service-item {
        flex: 0 0 100%;
    }

    .service-item-content {
        margin-top: 1.5rem;
    }

    .services .detect {
        flex: 0 0 100%;
        background: url("/static/images/bg3.jpg") no-repeat;
        background-size: cover; /* 确保背景图片填满整个元素 */
        transition: all 0.3s ease-in-out;  /* 添加过渡效果 */
        order: 1; /* 设置顺序 */
    }

    .services .authentication {
        flex: 0 0 100%;
        background: url("/static/images/bg_2.jpg") no-repeat;
        background-size: cover; /* 确保背景图片填满整个元素 */
        transition: all 0.3s ease-in-out;  /* 添加过渡效果 */
        order: 2; /* 设置顺序 */
    }

    /*  细节页  */
    .details {
        height: 130vw;
        background-color: #ffffff;
    }
    .details .details-container {
        margin: 7.6vw auto 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        /*width: 80vw;*/
        width: calc(100vw - 40px);
        height: calc(100% - 15vw);
    }
    .details-container .detail-detail-item-content {
        order: 1;
        width: 33vw;
        height: 17vw;
        position: relative;
    }
    .details-container .detail-detail-item-content img {
        width: 22.4vw;
        height: auto;
        min-width: 140px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .details-container .detail-item {
        order: 2;
        margin-bottom: 3vw;
        border-radius: 10px;
        border: 1px solid #EAEAEA;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        height: 24.8vw;
        padding: 2.3vw;
        width: 100%;
    }

    .company-intro {
        /*height: 71vw;*/
    }

    .company-intro .company-intro-container {
        width: calc(100vw - 40px);
    }

    .company-intro-container .company-intro-content {
        width: 100%;
        text-align: justify;
    }
}
/*客户端*/
@media (min-width: 992px) {

    .service-item-container .authentication-content {
        display: none;
    }

    .title-static { position: static; }
    .title-absolute {
        position: absolute;
        bottom: 3.4vw;
    }

    /* 初始状态：透明度为 0，位置在下方 */
    .service-item-title, .service-item-content,
    .detail-item,
    .company-intro-content, .company-intro-title, .device-show-item {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    /* 动画状态：透明度为 1，位置恢复正常 */
    .service-item-title.animate, .service-item-content.animate,
    .detail-item.animate,
    .company-intro-content.animate, .company-intro-title.animate, .device-show-item.animate {
        opacity: 1;
        transform: translateY(0);
    }

}