.banner img,
.banner video {
    display: block;
    width: 100%;
    /* height: 34.375vw; */
    object-fit: cover
}

.container .sec1 {
    padding: 5.625vw 5.05208vw 9.27083vw 5.20833vw
}

.container .sec1 .t_top {
    display: flex;
    justify-content: space-between
}

.container .sec1 .t_top .lt {
    color: #111827;
    font-weight: 600;
    text-transform: uppercase
}

.container .sec1 .t_top .lt span {
    color: #3A6BD9
}

.container .sec1 .t_top .des {
    width: 46.97917vw;
    margin-right: 3.38542vw;
    color: #27384A;
    line-height: 1.5;
    letter-spacing: -0.01667vw;
    font-weight: 300
}

.container .sec1 .content {
    display: flex;
    justify-content: space-between;
    gap: 7.29167vw;
    margin-top: 7.86458vw
}

.container .sec1 .content .lbox {
    width: 15.72917vw
}

.container .sec1 .content .lbox .p1 {
    color: #000;
    font-weight: 500;
    line-height: 0.85;
    margin-bottom: 1.30208vw
}

.container .sec1 .content .lbox .sub p {
    padding: .3125vw;
    border-bottom: 1px solid #B3B3B3;
    line-height: 1.2;
    font-weight: 500
}

.container .sec1 .content .lbox .sub p:not(:last-child) {
    margin-bottom: .78125vw
}

.container .sec1 .content .rbox {
    width: 100%;
    flex: 1;
    max-height: 52.5vw;
    overflow-y: auto;
    padding-right: .57292vw
}

.container .sec1 .content .rbox::-webkit-scrollbar {
    width: .15625vw
}

.container .sec1 .content .rbox::-webkit-scrollbar-thumb {
    background: #3A6BD9
}

.container .sec1 .content .rbox::-webkit-scrollbar-track {
    background: rgba(221, 221, 221, 0.6)
}

.container .sec1 .content .rbox .list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.29167vw
}

.container .sec1 .content .rbox .list a {
    display: block;
    width: 100%;
    background: #F7F5F0;
    padding: 3.07292vw 2.08333vw 1.97917vw 2.08333vw
}

.container .sec1 .content .rbox .list a .pic {
    width: 16.14583vw;
    height: 13.85417vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.container .sec1 .content .rbox .list a .pic img {
    max-width: 100%;
    object-fit: contain;
    max-height: 100%;
    display: block;
    transition: all 600ms
}

.container .sec1 .content .rbox .list a .pt {
    margin: 1.71875vw 0 .72917vw 0;
    color: #124477;
    font-weight: 500;
    line-height: 1
}

.container .sec1 .content .rbox .list a .des {
    font-weight: 500;
    line-height: 1.5
}

.container .sec1 .content .rbox .list a:hover .pic img {
    transform: scale(1.05)
}

.container .w_pic img,
.container .w_pic video {
    width: 100%;
    display: block;
    object-fit: cover
}

.container .sec2 {
    padding: 5.78125vw 5.05208vw 9.84375vw 5.20833vw
}

.container .sec2 .t_top {
    display: flex;
    justify-content: space-between
}

.container .sec2 .t_top .lt {
    color: #111827;
    font-weight: 600;
    text-transform: uppercase
}

.container .sec2 .t_top .lt span {
    color: #3A6BD9
}

.container .sec2 .t_top .des {
    width: 50.36458vw;
    color: #27384A;
    line-height: 1.5;
    letter-spacing: -0.01667vw;
    font-weight: 300
}

.container .sec2 .content {
    display: flex;
    justify-content: space-between;
    gap: 7.29167vw;
    margin-top: 7.39583vw
}

.container .sec2 .content .lbox {
    width: 15.72917vw
}

.container .sec2 .content .lbox .p1 {
    color: #000;
    font-weight: 500;
    /* line-height: 0.85; */
    margin-bottom: 1.30208vw
}

.container .sec2 .content .lbox .sub p {
    padding: .3125vw;
    border-bottom: 1px solid #B3B3B3;
    line-height: 1.2;
    font-weight: 500
}

.container .sec2 .content .lbox .sub p:not(:last-child) {
    margin-bottom: .78125vw
}

.container .sec2 .content .rbox {
    width: 100%;
    flex: 1;
    max-height: 52.5vw;
    overflow-y: auto;
    padding-right: .57292vw
}

.container .sec2 .content .rbox::-webkit-scrollbar {
    width: .15625vw
}

.container .sec2 .content .rbox::-webkit-scrollbar-thumb {
    background: #3A6BD9
}

.container .sec2 .content .rbox::-webkit-scrollbar-track {
    background: rgba(221, 221, 221, 0.6)
}

.container .sec2 .content .rbox .list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.29167vw
}

.container .sec2 .content .rbox .list a {
    display: block;
    width: 100%;
    background: #F7F5F0;
    padding: 1.30208vw 0 1.97917vw 0
}

.container .sec2 .content .rbox .list a .pic {
    width: 100%;
    height: 14.0625vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

.container .sec2 .content .rbox .list a .pic img {
    /* max-width: 100%; */
    width: 60%;
    object-fit: contain;
    /* max-height: 100%; */
    display: block;
    transition: all 600ms
}

.container .sec2 .content .rbox .list a .pt {
    margin: 1.71875vw 0 .72917vw 0;
    color: #124477;
    font-weight: 500;
    line-height: 1;
    padding: 0 2.08333vw
}

.container .sec2 .content .rbox .list a .des {
    font-weight: 500;
    line-height: 1.5;
    padding: 0 2.08333vw
}

.container .sec2 .content .rbox .list a:hover .pic img {
    transform: scale(1.05)
}

@media screen and (max-width: 768px) {
    .banner {
        margin-top: 60px
    }

    .banner img {
        height: 200px;
        object-fit: cover
    }

    .container .sec1 {
        padding: 30px 5% 30px
    }

    .container .sec1 .t_top {
        flex-direction: column;
        gap: 10px
    }

    .container .sec1 .t_top .lt {
        font-size: 20px
    }

    .container .sec1 .t_top .des {
        width: 100%;
        margin-right: 0;
        font-size: 14px;
        line-height: 1.5
    }

    .container .sec1 .content {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px
    }

    .container .sec1 .content .lbox {
        width: 100%
    }

    .container .sec1 .content .lbox .p1 {
        font-size: 18px;
        margin-bottom: 10px
    }

    .container .sec1 .content .lbox .sub p {
        padding: 10px 0;
        font-size: 14px;
        border-bottom: 1px solid #E0E0E0
    }

    .container .sec1 .content .rbox {
        width: 100%;
        max-height: none;
        overflow-y: visible;
        padding-right: 0
    }

    .container .sec1 .content .rbox .list {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .container .sec1 .content .rbox .list a {
        padding: 30px 20px 25px
    }

    .container .sec1 .content .rbox .list a .pic {
        width: 100%;
        height: 200px
    }

    .container .sec1 .content .rbox .list a .pic img {
        max-width: 100%;
        max-height: 100%
    }

    .container .sec1 .content .rbox .list a .pt {
        margin: 20px 0 10px;
        font-size: 16px
    }

    .container .sec1 .content .rbox .list a .des {
        font-size: 14px;
        line-height: 1.4
    }

    .container .sec2 {
        padding: 30px 5% 30px
    }

    .container .sec2 .t_top {
        flex-direction: column;
        gap: 10px
    }

    .container .sec2 .t_top .lt {
        font-size: 20px
    }

    .container .sec2 .t_top .des {
        width: 100%;
        margin-right: 0;
        font-size: 14px;
        line-height: 1.5
    }

    .container .sec2 .content {
        flex-direction: column;
        gap: 20px;
        margin-top: 30px
    }

    .container .sec2 .content .lbox {
        width: 100%
    }

    .container .sec2 .content .lbox .p1 {
        font-size: 18px;
        margin-bottom: 10px
    }

    .container .sec2 .content .lbox .sub p {
        padding: 10px 0;
        font-size: 14px;
        border-bottom: 1px solid #E0E0E0
    }

    .container .sec2 .content .rbox {
        width: 100%;
        max-height: none;
        overflow-y: visible;
        padding-right: 0
    }

    .container .sec2 .content .rbox .list {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .container .sec2 .content .rbox .list a {
        padding: 20px 0 25px
    }

    .container .sec2 .content .rbox .list a .pic {
        width: 100%;
        height: 200px
    }

    .container .sec2 .content .rbox .list a .pic img {
        max-width: 100%;
        max-height: 100%
    }

    .container .sec2 .content .rbox .list a .pt {
        margin: 20px 0 10px;
        padding: 0 20px;
        font-size: 16px
    }

    .container .sec2 .content .rbox .list a .des {
        padding: 0 20px;
        font-size: 14px;
        line-height: 1.4
    }
}