.page {


    .banner {
        width: 100%;
        position: relative;
        margin-bottom: 60px;

        .img {
            width: 100%;
        }

        .banner-text {
            position: absolute;
            left: 5vw;
            top: 40%;
            transform: translateY(-50%);

            .title {
                font-size: 1rem;
                font-weight: bold;
                color: white;
                margin-bottom: .5rem;
            }

            .text {
                font-size: .5rem;
                color: white;
            }
        }
    }

    .al-container {
        .al1 {
            width: 80vw;
            margin: auto;
            margin-bottom: 60px;

            .herder {
                width: 100%;
                height: 120px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 60px;

                .left {
                    width: 210px;
                    height: 100%;
                    margin-right: 40px;
                    position: relative;
                    cursor: pointer;

                    .img {
                        width: 100%;
                        height: 100%
                    }

                    .text-box {
                        width: 100%;
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%);
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        .text {
                            font-size: 24px;
                            color: white;
                        }
                    }
                }

                .right-tabs {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    border-bottom: 1px dashed #D9D9D9;

                    .item {
                        padding: 14px 28px;
                        border: 1px solid #D9D9D9;
                        font-size: 17px;
                        margin-right: 28px;
                        border-radius: 4px;
                    }

                    .active {
                        display: block;
                        background-color: #136BED;
                        font-weight: bold;
                        color: white;
                        border: 1px solid #136BED;
                    }

                    .item:last-child {
                        margin-right: 0;
                    }
                }
            }

            .tabs-container {
                .tab1 {
                    display: none;

                    .mySwiper {
                        width: 100%;
                        padding-bottom: 2vw;
                        margin-bottom: 2vw;

                        .container-list {
                            align-items: center;
                            justify-content: space-around;

                            .item {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;

                                .img-box {
                                    width: 100%;
                                    height: 15vw;
                                    margin-bottom: 24px;

                                    .img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }

                                .title {
                                    font-size: 18px;
                                    color: black;
                                }
                            }
                        }
                    }

                    .describe {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;

                        .ul-list {
                            width: 100%;

                            .li-item {
                                width: 30%;
                                display: inline-block;
                                list-style-type: square;
                                margin-left: 4%;
                                font-size: 14px;
                                color: #333;
                                margin-bottom: 12px;
                                position: relative;
                                text-indent: .6em;

                                overflow: hidden;
                                /* 确保超出的内容会被隐藏 */
                                white-space: nowrap;
                                /* 确保文本在一行内显示，不换行 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }

                            li:nth-child(3n+1) {
                                margin-left: 0
                            }

                            li:before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 50%;
                                background-color: #AEB3C8;
                                transform: translateY(-50%);
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                            }
                        }

                        .describe-item {
                            width: 30%;

                            .list-item {
                                width: 100%;
                                font-size: 14px;
                                color: #333;
                                margin-bottom: 12px;
                                position: relative;
                                text-indent: .6em;

                                overflow: hidden;
                                /* 确保超出的内容会被隐藏 */
                                white-space: nowrap;
                                /* 确保文本在一行内显示，不换行 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }

                            .list-item::before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 50%;
                                background-color: #AEB3C8;
                                transform: translateY(-50%);
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                            }
                        }

                        .describe-item:last-child {
                            margin-right: 0;
                        }
                    }
                }

                .active {
                    display: unset
                }
            }
        }

        .al2 {
            width: 90vw;
            margin: auto;
            margin-bottom: 2rem;

            .herder {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 3vw;

                .right-tabs {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    border-bottom: 1px dashed #D9D9D9;
                    padding-bottom: 3vw;

                    .item {
                        padding: .5rem .8rem;
                        border: 1px solid #D9D9D9;
                        font-size: .75rem;
                        margin-right: 1.2rem;
                        border-radius: 4px;
                    }

                    .active {
                        background-color: #136BED;
                        font-weight: bold;
                        color: white;
                        border: 1px solid #136BED;
                    }

                    .item:last-child {
                        margin-right: 0;
                    }
                }
            }

            .tabs-container {
                .tab1 {
                    display: none;

                    .mySwiper {
                        width: 100%;
                        height: 21.5vw;

                        .container-list {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .item {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;

                                .img-box {
                                    width: 24vw;
                                    height: 14vw;
                                    margin-bottom: 1.5vw;

                                    .img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }

                                .title {
                                    font-size: .8rem;
                                    color: black;
                                }
                            }
                        }
                    }

                    .describe {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;

                        .ul-list {
                            width: 100%;

                            .li-item {
                                width: 30%;
                                display: inline-block;
                                list-style-type: square;
                                margin-left: 2%;
                                font-size: 14px;
                                color: #333;
                                margin-bottom: 12px;
                                position: relative;
                                text-indent: .6em;
                                overflow: hidden;
                                /* 确保超出的内容会被隐藏 */
                                white-space: nowrap;
                                /* 确保文本在一行内显示，不换行 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }

                            li:nth-child(3n+1) {
                                margin-left: 0
                            }

                            li:before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 50%;
                                background-color: #AEB3C8;
                                transform: translateY(-50%);
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                            }
                        }

                        .describe-item {
                            width: 30%;

                            .list-item {
                                width: 100%;
                                font-size: .65rem;
                                color: #333;
                                margin-bottom: .6rem;
                                position: relative;
                                text-indent: .6em;
                                overflow: hidden;
                                /* 确保超出的内容会被隐藏 */
                                white-space: nowrap;
                                /* 确保文本在一行内显示，不换行 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }

                            .list-item::before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 50%;
                                background-color: #AEB3C8;
                                transform: translateY(-50%);
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                            }
                        }

                        .describe-item:last-child {
                            margin-right: 0;
                        }
                    }
                }

                .active {
                    display: unset
                }
            }
        }

        .al3 {
            width: 90vw;
            margin: auto;
            margin-bottom: 2rem;

            .herder {
                width: 100%;
                display: flex;
                justify-content: space-between;
                margin-bottom: 3vw;

                .right-tabs {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    border-bottom: 1px dashed #D9D9D9;
                    padding-bottom: 3vw;

                    .item {
                        padding: .5rem .6rem;
                        border: 1px solid #D9D9D9;
                        font-size: .9rem;
                        margin-right: 1rem;
                        border-radius: 4px;
                    }

                    .active {
                        background-color: #136BED;
                        font-weight: bold;
                        color: white;
                        border: 1px solid #136BED;
                    }

                    .item:last-child {
                        margin-right: 0;
                    }
                }
            }

            .tabs-container {
                .tab1 {
                    display: none;

                    .mySwiper {
                        width: 100%;
                        height: 50vw;

                        .container-list {
                            .item {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;

                                .img-box {
                                    width: 100%;
                                    height: 40vw;
                                    margin-bottom: 1.5vw;

                                    .img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }

                                .title {
                                    font-size: 1rem;
                                    color: black;
                                }
                            }
                        }
                    }

                    .describe {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;

                        .ul-list {
                            width: 100%;

                            .li-item {
                                width: 98%;
                                display: inline-block;
                                list-style-type: square;
                                margin-left: 2%;
                                font-size: 14px;
                                color: #333;
                                margin-bottom: 12px;
                                position: relative;
                                text-indent: .6em;
                                overflow: hidden;
                                /* 确保超出的内容会被隐藏 */
                                white-space: nowrap;
                                /* 确保文本在一行内显示，不换行 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }

                            li:before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 50%;
                                background-color: #AEB3C8;
                                transform: translateY(-50%);
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                            }
                        }

                        .describe-item {
                            width: 100%;

                            .list-item {
                                width: 100%;
                                font-size: 1rem;
                                color: #333;
                                margin-bottom: .6rem;
                                position: relative;
                                text-indent: .6em;
                                overflow: hidden;
                                /* 确保超出的内容会被隐藏 */
                                white-space: nowrap;
                                /* 确保文本在一行内显示，不换行 */
                                text-overflow: ellipsis;
                                /* 使用省略号表示被截断的文本 */
                            }

                            .list-item::before {
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 50%;
                                background-color: #AEB3C8;
                                transform: translateY(-50%);
                                width: 4px;
                                height: 4px;
                                border-radius: 50%;
                            }
                        }

                        .describe-item:last-child {
                            margin-right: 0;
                        }
                    }
                }

                .active {

                    display: unset;
                }
            }
        }
    }


}


.swiper-pagination-bullet {
    background: #c5c5c5 !important;
}

.swiper-pagination-bullet-active {
    width: 20px !important;
    background: #136BED !important;
    border-radius: 40px !important;
}



/* 头部 */
/* 屏幕 > 1120px */
@media (min-width: 1120px) {
    .page {
        .header-container {

            .header1,
            .header2 {
                display: none;
            }
        }
    }
}

/* 700px < 屏幕 < 1099px */
@media (min-width: 700px) and (max-width: 1119px) {
    .page {
        .header-container {

            .header,
            .header2 {
                display: none;
            }
        }
    }
}

/* 屏幕 < 699px */
@media (max-width: 699px) {
    .page {
        .header-container {

            .header,
            .header1 {
                display: none;
            }
        }
    }
}


/* banner */
@media (min-width: 1200px) {
    .page {
        .banner {
            margin-bottom: 60px;
        }
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    .page {
        .banner {
            margin-bottom: 30px;
        }
    }
}

@media (max-width: 699px) {
    .page {
        .banner {
            margin-bottom: 15px;
        }
    }
}


/* 案例 */
@media (min-width: 1200px) {
    .page {
        .al-container {

            .al2,
            .al3 {
                display: none;
            }
        }
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    .page {
        .al-container {

            .al1,
            .al3 {
                display: none;
            }
        }
    }

    .swiper-pagination-bullet {
        width: 4px !important;
        height: 4px !important;
        background: #c5c5c5 !important;
    }

    .swiper-pagination-bullet-active {
        width: 10px !important;
        background: #136BED !important;
        border-radius: 40px !important;
    }

}

@media (max-width: 699px) {
    .page {
        .al-container {

            .al1,
            .al2 {
                display: none;
            }
        }
    }

    .swiper-pagination-bullet {
        width: 4px !important;
        height: 4px !important;
        background: #c5c5c5 !important;
    }

    .swiper-pagination-bullet-active {
        width: 10px !important;
        background: #136BED !important;
        border-radius: 40px !important;
    }
}


/* 底部 */
@media (min-width: 1000px) {
    .page {
        .footer-container {
            .footer2 {
                display: none;
            }
        }
    }
}

@media (max-width: 999px) {
    .page {
        .footer-container {
            .footer1 {
                display: none;
            }
        }
    }
}