#content-container {
    width: 100%;
}

.header-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-img-text {
    position: absolute;
    top: 36.3vw;
    left: 12.2vw;
    color: #ffffff;

    > p {
        color: #ffffff;
        font-size: 2.6rem;
    }

    .p2 {
        margin-top: 20px;
    }

    z-index: 101;
}

#news {
    margin: 0 12.25vw;
    width: 75.5vw;
    padding: 88px 0;

    .label {
        border-left: 5px solid #005BAD;


        > span {
            color: #333333;
            font-size: 1rem;
            margin-left: 8px;
        }
    }

    .p1 {
        font-size: 1.8rem;
        color: #464646;
        margin-top: 19px;
    }

    .p2 {
        font-size: 0.8rem;
        margin-top: 18px;
        color: #464646;
        line-height: 1.4rem;
        height: 2.2vw;
    }

    .pages {
        margin-top: 33px;

        > span {
            font-size: 1.2rem;
            color: #666666;

        }

        .pg-up {
            color: #005BAD;
        }

        .pg-l {
            cursor: pointer;
            margin-left: 2vw;
            font-size: 1.2rem;

        }

        .pg-r {
            font-size: 1.2rem;
            margin-left: 0.5vw;
            cursor: pointer;
        }

        .pg-no {
            color: #B6BBC0;
        }
    }
}


#solution {
    background-color: #E3E7EA;
    margin: 0 auto;
    padding: 75px 0;

    .solution-c {
        background-color: #fff;
        margin: 75px 12.4vw;
        display: flex;
        flex-direction: column;

        .zoom-image {
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }

        .zoom-image:hover {
            transform: scale(1.2); /* 放大1.2倍 */
        }

        .solution-t {
            display: flex;

            .solution-t-l {
                .type-1 {
                    display: flex;
                    flex-direction: column;

                    > div, > a > div {
                        width: 37.4vw;
                        height: 17.6vw;
                    }

                    .type-1-img {
                        /*background-image: url("/assets/img/index/jhk-1691480546807.png");*/
                        /*background-size: 100% 100%;*/
                        overflow: hidden;
                        cursor: pointer;

                        > div > img {
                            width: 37.4vw;
                            height: 18vw;
                        }
                    }

                    .type-1-text {
                        height: 17.6vw;
                        background-color: #005BAD;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .p1 {
                            margin: 0 4.8vw;
                            font-size: 1.7rem;
                            color: #FFFFFF;
                        }

                        .p2 {
                            margin: 26px 4.8vw 0 4.8vw;
                            font-size: 0.8rem;
                            color: #ffffff;
                            line-height: 1.58em;
                        }

                    }
                }
            }

            .solution-t-r {
                display: flex;
                flex-direction: column;

                .type-2 {
                    display: flex;

                    > div, > a > div {
                        width: 18.75vw;
                        height: 17.6vw;
                    }

                    .type-2-img {
                        overflow: hidden;
                        cursor: pointer;

                        >div> img {
                            width: 18.7vw;
                            height: 18vw;
                        }
                    }

                    .type-2-text {
                        background-color: #ffffff;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        /*align-items: center;*/

                        .p1 {
                            margin: 0 2.8vw;
                            font-size: 1.7rem;
                            color: #4B4B4B;
                        }

                        .p2 {
                            margin: 26px 2.8vw 0 2.8vw;
                            font-size: 0.8rem;
                            color: #474747;
                            line-height: 1.58em;
                        }

                    }

                    /*.type-2-img {*/
                    /*    background-image: url("/assets/img/index/wwhl2.png");*/
                    /*    background-size: 100% 100%;*/
                    /*}*/
                }

                .type-3 {
                    > div, > a > div {
                        width: 18.7vw;
                        height: 17.6vw;
                    }

                    display: flex;

                    .type-3-img {
                        /*background-image: url("/assets/img/index/jhk-1691481388568.png");*/
                        /*background-size: 100% 100%;*/
                        overflow: hidden;
                        cursor: pointer;

                        >div> img {
                            width: 18.7vw;
                            height: 18vw;
                        }
                    }

                    .type-3-text {
                        background-color: #383838;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        /*align-items: center;*/

                        .p1 {
                            margin: 0 2.8vw;
                            font-size: 1.7rem;
                            color: #ffffff;
                        }

                        .p2 {
                            margin: 26px 2.8vw 0 2.8vw;
                            font-size: 0.8rem;
                            color: #ffffff;
                            line-height: 1.58em;
                        }

                    }

                }
            }


        }

        .solution-b {
            display: flex;

            .type-4 {
                > div, > a > div {
                    width: 18.7vw;
                    height: 17.6vw;
                }

                display: flex;

                .type-4-img {
                    /*background-image: url("/assets/img/index/jhk-1692178944011.png");*/
                    /*background-size: 100% 100%;*/
                    overflow: hidden;
                    cursor: pointer;

                    >div> img {
                        width: 18.7vw;
                        height: 18vw;
                    }
                }

                .type-4-text {
                    background-color: #BEC5CC;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    /*align-items: center;*/

                    .p1 {
                        margin: 0 2.4vw;
                        font-size: 1.7rem;
                        color: #2D2D2D;
                    }

                    .p2 {
                        margin: 26px 2.4vw 0 2.4vw;
                        font-size: 0.8rem;
                        color: #2D2D2D;
                        line-height: 1.58em;
                    }

                }
            }

            .type-5 {
                > div, > a > div {
                    width: 18.7vw;
                    height: 17.6vw;
                }

                display: flex;

                .type-5-img {
                    /*background-image: url("/assets/img/index/wt.png");*/
                    /*background-size: 100% 100%;*/
                    overflow: hidden;
                    cursor: pointer;

                    >div> img {
                        width: 18.7vw;
                        height: 17.6vw;
                    }
                }

                .type-5-text {
                    background-color: #05B4EA;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .p1 {
                        margin: 0 2.4vw;
                        font-size: 1.7rem;
                        color: #ffffff;
                    }

                    .p2 {
                        margin: 26px 2.4vw 0 2.4vw;
                        font-size: 0.8rem;
                        color: #ffffff;
                        line-height: 1.58em;
                    }

                }
            }
        }
    }
}

#solution-type {
    padding: 0 12.25vw;
    /*height: 349px;*/
    height: 18.1vw;
    background-color: #353A44;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .box:hover {
        .img1 {
            opacity: 0 !important;
            transform: scale(1.2); /* 放大1.2倍 */
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }

        .img2 {
            opacity: 1 !important;
            transform: scale(1.2); /* 放大1.2倍 */
            transition: all 0.3s ease; /* 添加过渡效果 */
        }
    }


    .box {
        width: 8vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;

        .img-box {
            position: absolute;
            /*top: 0.53vw;*/
            /*left: 1.1vw;*/
            top: 0;
            left: 0;
            cursor: pointer;
            width: 8vw;


            .img1, .img2 {
                position: absolute;
                top: 0;
                left: 1vw;
                width: 6vw;
            }

            .img1 {
                opacity: 1;
                transition: all 0.3s ease;
            }

            .img2 {
                opacity: 0;
                transition: all 0.3s ease;
            }
        }

        .text-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-top: 6.4vw;
            width: 8vw;

            .p1 {
                color: #ffffff;
                font-size: 1rem;

            }

            .p2 {
                color: #ffffff;
                font-size: 1rem;
                margin-top: 11px;

            }
        }
    }
}

#digit {
    .title {
        font-size: 1.8rem;
        margin: 53px 0;
        text-align: center;
        color: #3C3C3C;

    }

    .swiper-contione {
        width: 99vw;
        overflow: hidden;
        margin: 20px auto;
        position: relative;
    }

    .swiper {
        width: 9999px;
        transition: all 1s ease;
        overflow: hidden;

    }

    .swiper-item {
        width: 99vw;
        float: left;
        position: relative;
    }

    .swiper-item img {
        width: 99vw;
    }

    .text-box {
        color: #fff;
        position: absolute;
        bottom: 8.5vw;
        left: 12vw;

        display: flex;
        flex-direction: column;
        /*display: block;*/

        .p1 {
            margin-top: 8.6vw;
            font-size: 2.4rem;
        }

        .p2 {
            margin-top: 34px;
            width: 36vw;
            line-height: 1.2rem;
            font-size: 0.8rem;
        }

        > div {
            margin-top: 2.4vw;

            .a1 {
                padding: 0.4rem 0.7rem;
                border: 1px solid #fff;
                display: inline;
                font-size: 0.8rem;
            }

            .a1:hover {
                background-color: #0b69be;
                color: #fff;
                border: 1px solid #0b69be;
                transition: all 0.3s ease;
            }
        }
    }

    .swiper-point {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 1vw;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .point {
        width: 40px;
        height: 6px;
        /*border-radius: 50%;*/
        background: rgba(255, 255, 255, 0.4);
        margin-right: 5px;
        float: left;
        cursor: pointer;

    }

    .point.active {
        background: #fff;
    }

}

#product {
    padding: 0 12.34vw;

    .title {
        font-size: 1.8rem;
        margin: 2.8vw 0;
        text-align: center;
        color: #3C3C3C;
    }

    > ul {
        display: flex;
        /* 项目在主轴上的对齐方式 */
        justify-content: space-between;

        .product-li {
            overflow: hidden;
            width: 23.95vw;
            height: 29vw;
            color: #ffffff;
            cursor: pointer;
            position: relative;

            .text-box {
                z-index: 30;
                height: 26.9vw;
                position: relative;
                overflow: hidden;

                .text-box-mr {
                    position: absolute;
                    bottom: -20.6vw;
                    transition: All 0.3s ease-in-out;

                    margin-top: 15.2vw;
                    padding-left: 2.03vw;
                    padding-right: 2.03vw;
                    height: 13.9vw;
                    display: flex;
                    flex-direction: column;

                    .p1 {
                        font-size: 1.4rem;
                    }

                    .p2 {
                        margin-top: 0.53vw;
                        margin-bottom: 1vw;
                        line-height: 1.4rem;
                        font-size: 0.8rem;

                    }

                    .a1 {
                        font-size: 0.8rem;
                        padding: 0.4rem 0.7rem;
                        border: 1px solid #fff;
                        display: inline;
                        width: 4vw;
                        text-align: center;
                    }

                    .a1:hover {
                        background-color: #0b69be;
                        color: #fff;
                        border: 1px solid #0b69be;
                        transition: all 0.3s ease;
                    }
                }
            }

            .masking {
                z-index: 20;
                position: absolute;
                bottom: -16vw;
                height: 29vw;
                width: 23.95vw;
                transition: All 0.4s ease-in-out;
                /*background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));*/
                background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
            }

            .img-box {
                width: 23.95vw;
                height: 29vw;
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;

                > img {
                    width: 100%;
                    height: 100%;
                    transition: transform 0.3s ease; /* 添加过渡效果 */
                }
            }

        }

        .product-li:hover {
            .text-box {
                .text-box-mr {
                    bottom: -5.8vw;
                    transition: All 0.3s ease-in-out;
                }
            }

            .masking {
                bottom: 0;
                transition: All 0.4s ease-in-out;
            }

            .zoom-image2 {
                transform: scale(1.2); /* 放大1.2倍 */
                transition: transform 0.3s ease; /* 添加过渡效果 */
            }
        }
    }

    .more {
        text-align: right;
        margin-top: 2.6vw;
        margin-bottom: 2.6vw;
        font-size: 0.9rem;
        color: #333;

        > span {
            color: #3D3D3D;
            font-size: 0.7rem;
            margin-left: 0.3vw;
        }
    }

    .more:hover {
        text-decoration: underline;
    }
}

#customcase {
    padding: 0 12.34vw;
    background-color: #005BAD;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 1.8rem;
        margin: 53px 0;
        text-align: center;
        color: #ffffff;
        /*font-weight:bold;*/

    }

    > ul {
        display: flex;
        /* 项目在主轴上的对齐方式 */
        justify-content: space-between;

        > li {
            background-color: #ffffff;
            width: 24vw;
            height: 29vw;

            .customcase-l-t {
                width: 24vw;
                height: 13.4vw;

                > img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .customcase-l-b {
                height: 15.6vw;
                padding-left: 2vw;
                padding-right: 2vw;
                position: relative;
                display: flex;
                flex-direction: column;

                .p1 {
                    margin-top: 1.56vw;
                    font-size: 1.4rem;
                    /*font-weight:bold;*/
                    line-height: 2rem;
                    color: #3c3c3c;
                }

                .p2 {
                    margin-top: 1.25vw;
                    margin-bottom: 2.3vw;
                    font-size: 0.7rem;

                    line-height: 1.2rem;
                    color: #3c3c3c;
                }

                .a1 {
                    padding: 0.4rem 0.7rem;
                    border: 1px solid #000000;
                    display: inline;
                    /* 固定定位的盒子也必须写边偏移 */
                    position: absolute;
                    bottom: 2.2vw;
                    left: 2.03vw;
                    font-size: 0.8rem;
                    color: #3c3c3c;

                }

                .a1:hover {
                    background-color: #0b69be;
                    color: #fff;
                    border: 1px solid #0b69be;
                    transition: all 0.3s ease;
                }
            }
        }
    }

    .more {
        text-align: right;
        margin-top: 50px;
        margin-bottom: 50px;
        font-size: 0.9rem;
        color: #ffffff;

        > span {
            color: #ffffff;
            font-size: 0.7rem;
            margin-left: 6px;
        }
    }

    .more:hover {
        text-decoration: underline;
    }
}

#news-bot {


    .title {
        font-size: 1.8rem;
        margin: 53px 0;
        text-align: center;
        color: #3C3C3C;
    }

    .box {
        padding-left: 12.34vw;
        padding-right: 3.9vw;
        margin-bottom: 86px;
        display: flex;

        .news-l {
            background-color: #F9F9F9;
            width: 45.26vw;
            height: 35.4vw;
            display: flex;
            flex-direction: column;
            position: relative;

            > img {
                height: 21.9vw;
                width: 100%;
            }

            .p1 {
                color: #3C3C3C;
                margin: 0 1.98vw;
                margin-top: 1.6vw;
                font-size: 1.6rem;

            }

            .p2 {
                margin: 0 1.98vw;
                color: #3C3C3C;
                margin-bottom: 45px;
                font-size: 0.9rem;
                margin-top: 32px;

                line-height: 1.2rem;
            }

            .a1 {
                padding: 0.4rem 0.7rem;
                border: 1px solid #000000;
                display: inline;
                /* 固定定位的盒子也必须写边偏移 */
                position: absolute;
                bottom: 2.5vw;
                left: 2.03vw;
                font-size: 0.8rem;
                color: #3c3c3c;

            }

            .a1:hover {
                background-color: #0b69be;
                color: #fff;
                border: 1px solid #0b69be;
                transition: all 0.3s ease;
            }
        }

        .news-r {
            margin-left: 1.57vw;
            width: 35vw;
            color: #3C3C3C;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .news-r-t {
                background-color: #F9F9F9;
                height: 16.7vw;
                padding: 0 2.7vw;

                .text-box {
                    padding-top: 39px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .p1 {
                        color: #3D3D3D;
                        font-size: 1.2rem;

                    }

                    > a {
                        color: #3D3D3D;
                        font-size: 0.8rem;

                        top: 33px;
                        right: 0;
                    }

                    > a:hover {
                        text-decoration: underline;
                    }
                }

                > ul {
                    margin-top: 10px;

                    > li {
                        margin-top: 31px;
                        display: flex;

                        .news-r-t-l {
                            width: 7.65vw;
                            height: 4.1vw;
                        }

                        .news-r-t-r {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            margin-left: 22px;

                            .news-r-t-r-p1 {
                                font-size: 0.9rem;
                                color: #3C3C3C;

                            }

                            .news-r-t-r-p2 {
                                font-size: 0.7rem;
                                color: #989898;
                            }
                        }
                    }
                }
            }

            .news-r-b {
                background-color: #F9F9F9;
                height: 16.7vw;
                padding: 0 2.7vw;

                .text-box {
                    padding-top: 39px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .p1 {
                        color: #3D3D3D;
                        font-size: 1.2rem;


                    }

                    > a {
                        color: #3D3D3D;
                        font-size: 0.8rem;

                        top: 33px;
                        right: 0;
                    }

                    > a:hover {
                        text-decoration: underline;
                    }
                }

                > ul {
                    margin-top: 10px;

                    > li {
                        margin-top: 31px;
                        display: flex;

                        .news-r-t-l {
                            width: 7.65vw;
                            height: 4.1vw;
                        }

                        .news-r-t-r {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            margin-left: 22px;

                            .news-r-t-r-p1 {
                                font-size: 0.9rem;
                                color: #3C3C3C;

                            }

                            .news-r-t-r-p2 {
                                font-size: 0.7rem;
                                color: #989898;
                            }
                        }
                    }
                }
            }
        }
    }
}