.section {
    width: 100%;
    padding: 3.07292vw 8.48958vw 7.96875vw 9.27083vw
}

.section .wrap {
    display: flex;
    justify-content: space-between
}

.section .wrap .l {
    position: sticky;
    top: 6.25vw;
    height: fit-content
}

.section .wrap .l .item {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1.04167vw
}

.section .wrap .l .item .icon {
    width: 1.5625vw;
    height: 1.5625vw;
    border-radius: 50%;
    background: #F1F4F7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.6s;
    margin-right: .67708vw
}

.section .wrap .l .item .icon img {
    max-width: 80%;
    max-height: 80%;
    transition: 0.6s
}

.section .wrap .l .item p {
    color: #000;
    font-weight: 400;
    line-height: 250%;
    transition: 0.6s
}

.section .wrap .l .item:hover .icon,
.section .wrap .l .item.on .icon {
    background: #00378A
}

.section .wrap .l .item:hover .icon img,
.section .wrap .l .item.on .icon img {
    filter: invert(1)
}

.section .wrap .l .item:hover p,
.section .wrap .l .item.on p {
    color: #1C4B8A
}

.section .wrap .r {
    width: 62.08333vw;
    position: relative
}

.section .wrap .r:after {
    content: "";
    width: .05208vw;
    height: 100%;
    background: #DEE1E2;
    position: absolute;
    top: 0;
    left: -4.53125vw
}

.section .wrap .r .part {
    margin-bottom: 3.33333vw
}

.section .wrap .r .part .part_title {
    color: #1c4b8a;
    font-weight: 600;
    line-height: 166.667%;
    margin-bottom: 1.35417vw
}

.section .wrap .r .part .swiper {
    width: 100%;
    overflow: hidden;
    margin: 0 0 3.33333vw
}

.section .wrap .r .part .swiper .swiper-slide .pro_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.66667vw 4.16667vw
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item {
    display: block
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .img {
    width: 100%;
    height: 17.96875vw;
    overflow: hidden;
    margin-bottom: 1.04167vw
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 1s
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .text {
    display: flex;
    align-content: center;
    justify-content: space-between
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .text p {
    width: 80%;
    color: #000;
    font-weight: 400;
    line-height: 166.667%;
    transition: 0.6s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .text .icon {
    width: .625vw
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .text .icon img {
    display: block;
    width: 100%
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item:hover .img img {
    transform: scale(1.1)
}

.section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item:hover .text p {
    color: #00378A
}

.section .wrap .r .part .swiper_control {
    position: relative;
    width: 100%;
    display: flex;
    align-content: center
}

.section .wrap .r .part .swiper_control .swiper-pagination {
    width: 53.69792vw;
    height: .05208vw;
    background: #DEE1E2;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    right: unset;
    bottom: unset
}

.section .wrap .r .part .swiper_control .swiper-pagination .swiper-pagination-progressbar-fill {
    height: .20833vw;
    background: #00378A;
    top: -.05208vw
}

.section .wrap .r .part .swiper_control .btns {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: space-between
}

.section .wrap .r .part .swiper_control .btns .jt {
    width: 2.03125vw;
    height: 2.03125vw;
    border-radius: 50%;
    display: flex;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    background: #F1F4F7;
    transition: 0.6s
}

.section .wrap .r .part .swiper_control .btns .jt:nth-child(2) {
    transform: rotate(180deg)
}

.section .wrap .r .part .swiper_control .btns .jt img {
    width: 1.25vw;
    transition: 0.6s
}

.section .wrap .r .part .swiper_control .btns .jt:hover {
    background: #00419F
}

.section .wrap .r .part .swiper_control .btns .jt:hover img {
    filter: brightness(0) invert(1)
}

@media screen and (max-width: 768px) {
    .section {
        padding: 60px 0
    }

    .section .wrap {
        width: 90%;
        display: block;
        margin: 0 auto
    }

    .section .wrap .l {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 40px;
        position: unset
    }

    .section .wrap .l .item {
        width: 50%
    }

    .section .wrap .l .item .icon {
        width: 24px;
        height: 24px;
        margin-right: 8px
    }

    .section .wrap .l .item .icon img {
        max-width: 70%;
        max-height: 70%
    }

    .section .wrap .r {
        width: 100%
    }

    .section .wrap .r .part {
        margin-bottom: 60px
    }

    .section .wrap .r .part .part_title {
        margin-bottom: 30px
    }

    .section .wrap .r .part .swiper .swiper-slide .pro_list {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item {
        width: 100%
    }

    .section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .img {
        height: 90vw;
        margin-bottom: 20px
    }

    .section .wrap .r .part .swiper .swiper-slide .pro_list .pro_item .text .icon {
        width: 12px
    }

    .section .wrap .r .part .swiper_control {
        margin: 30px 0
    }

    .section .wrap .r .part .swiper_control .btns .jt {
        width: 30px;
        height: 30px
    }

    .section .wrap .r .part .swiper_control .btns .jt img {
        width: 18px
    }
}