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

.common_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1
}

.proInfo1 {
    position: relative
}

.proInfo1 .img {
    width: 100%
}

.proInfo1 .back {
    position: absolute;
    left: 16.61458vw;
    bottom: 4.73958vw;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 6px
}

.proInfo1 .back svg {
    width: .9375vw;
    height: .9375vw
}

.proInfo1 .back p {
    color: #00378A;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.12px;
    text-transform: uppercase
}

.proInfo2 {
    padding: 2.39583vw 8.33333vw 5.73958vw 14.375vw
}

.proInfo2 .cut {
    display: flex;
    gap: .98958vw
}

.proInfo2 .cut .list {
    width: 9.47917vw;
    height: 3.33333vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.86458vw;
    border: 1px solid #00378A;
    background: #FFF;
    box-shadow: 0 0 15px 0 rgba(0, 55, 138, 0.4);
    color: #00378A;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    cursor: pointer;
    transition: .6s ease
}

.proInfo2 .cut .list.on,
.proInfo2 .cut .list:hover {
    border: 1px solid #00378A;
    background: #00378A;
    color: #fff
}

.proInfo2 .content {
    margin: 6.25vw 0 0 0;
    display: flex;
    justify-content: space-between
}

.proInfo2 .content .l .dis {
    display: flex;
    align-items: flex-end;
    gap: 1.14583vw;
    margin: 0 0 6.97917vw
}

.proInfo2 .content .l .dis img {
    width: 7.91667vw
}

.proInfo2 .content .l .dis p {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.proInfo2 .content .l .img {
    width: 18.64583vw
}

.proInfo2 .content .l .img img {
    width: 100%
}

.proInfo2 .content [data-lenis-prevent]::-webkit-scrollbar {
    width: .26042vw;
    display: block
}

.proInfo2 .content [data-lenis-prevent]::-webkit-scrollbar-thumb {
    background: #0D4E90;
    border-radius: .3125vw
}

.proInfo2 .content [data-lenis-prevent]::-webkit-scrollbar-track {
    background: rgba(13, 78, 144, 0.2);
    border-radius: .3125vw
}

.proInfo2 .content .r {
    max-height: 27.55208vw;
    padding: 0 4.21875vw 0 0;
    overflow: hidden;
    overflow-y: auto
}

.proInfo2 .content .r .item {
    width: 40.83333vw;
    border-radius: 1.66667vw;
    background: #F6F6F6;
    padding: 1.5625vw 2.86458vw;
    position: relative;
    z-index: 1
}

.proInfo2 .content .r .item:not(:last-child) {
    margin: 0 0 1.51042vw
}

.proInfo2 .content .r .item .bg {
    position: absolute;
    right: 1.25vw;
    top: 50%;
    transform: translateY(-50%);
    width: 13.125vw
}

.proInfo2 .content .r .item .p1 {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0 0 .83333vw
}

.proInfo2 .content .r .item .p2 {
    color: #666;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.proInfo3 {
    padding: 0 8.59375vw 9.6875vw 8.38542vw
}

.proInfo3 .img {
    width: 100%;
    height: 36.45833vw;
    border-radius: 1.66667vw;
    background: rgba(217, 217, 217, 0.6)
}

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

.proInfo4 {
    padding: 0 8.36458vw 5.96875vw 10.67708vw;
    display: flex;
    justify-content: space-between
}

.proInfo4 .l {
    width: 31.25vw
}

.proInfo4 .l .title {
    /* color: #0D4C8E; */
    color: #666;
    font-size: 0.8333vw;
    font-style: normal;
    font-weight: 500;
    margin: 0 0 2.03125vw
}

.proInfo4 .l .img {
    width: 100%;
    height: 23.22917vw;
    border-radius: 1.25vw;
    background: rgba(217, 217, 217, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 2.60417vw
}

.proInfo4 .l .img img {
    max-width: 90%;
    max-height: 90%
}

.proInfo4 .l .label {
    text-align: center;
    margin: 0 0 1.45833vw;
    width: 100%;
    height: 3.33333vw;
    border-radius: 1.66667vw;
    background: rgba(217, 217, 217, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(90, 90, 90, 0.8);
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.proInfo4 .l .label2 {
    border-radius: 1.66667vw;
    background: rgba(217, 217, 217, 0.2);
    padding: 1.66667vw 2.55208vw;
    opacity: 0;
    pointer-events: none;
    transition: .6s ease;
    text-align: center
}

.proInfo4 .l .label2.on {
    opacity: 1;
    pointer-events: none
}

.proInfo4 .l .label2 p {
    color: rgba(90, 90, 90, 0.8);
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.proInfo4 .l .label2 p:not(:last-child) {
    margin: 0 0 1.45833vw
}

.proInfo4 .r {
    width: 46.14583vw
}

.proInfo4 .r .p1 {
    color: #0D4E90;
    font-style: normal;
    font-weight: 500;
    margin: 0 0 1.04167vw;
    padding: 0 0 0 3.69792vw;
}

.proInfo4 .r table {
    width: 100%
}

.proInfo4 .r table tr td {
    padding: 0 0 1.71875vw;
    vertical-align: top;
    word-break: auto-phrase;
}

.proInfo4 .r table tr td:first-child {
    padding: 0 1.04167vw 1.71875vw 3.69792vw
}

.proInfo4 .r table tr td .text {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    max-width: 31.875vw;
}

@media (min-width:769px) {
    .proInfo4 .r .table-container {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 41.9271vw;
        padding: 0 2.21875vw 0 0;
    }

    .proInfo4 .r [data-lenis-prevent]::-webkit-scrollbar {
        width: .26042vw;
        display: block
    }

    .proInfo4 .r [data-lenis-prevent]::-webkit-scrollbar-thumb {
        background: #0D4E90;
        border-radius: .3125vw
    }

    .proInfo4 .r [data-lenis-prevent]::-webkit-scrollbar-track {
        background: rgba(13, 78, 144, 0.2);
        border-radius: .3125vw
    }
}

.proInfo4 .r table tr td .text span {
    color: #0D4E90;
    white-space: nowrap;
}

.proInfo4 .phone_box {
    display: none
}

.proInfo4 .phone_box .label {
    margin: 0 0 1.45833vw;
    width: 100%;
    height: 3.33333vw;
    border-radius: 1.66667vw;
    background: rgba(217, 217, 217, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(90, 90, 90, 0.8);
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.proInfo4 .phone_box .label2 {
    border-radius: 1.66667vw;
    background: rgba(217, 217, 217, 0.2);
    padding: 1.66667vw 2.55208vw;
    opacity: 0;
    pointer-events: none;
    transition: .6s ease;
    text-align: center
}

.proInfo4 .phone_box .label2.on {
    opacity: 1;
    pointer-events: inherit
}

.proInfo4 .phone_box .label2 p {
    color: rgba(90, 90, 90, 0.8);
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.proInfo4 .phone_box .label2 p:not(:last-child) {
    margin: 0 0 1.45833vw
}

.proInfo5 {
    padding: 0 0 7.60417vw;
    overflow: hidden
}

.proInfo5 .title {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 0 0 0 9.375vw
}

.proInfo5 .content {
    margin: 3.85417vw 0 0 0
}

.proInfo5 .content .swiper-pagination {
    width: 33.85417vw;
    height: .36458vw;
    border-radius: .46875vw;
    background: rgba(13, 78, 144, 0.2);
    margin: 5.98958vw auto 0;
    position: static
}

.proInfo5 .content .swiper-pagination span {
    border-radius: inherit;
    background: #0D4E90
}

.proInfo5 .content .swiper1 {
    width: 125vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    overflow: unset
}

.proInfo5 .content .swiper1 .swiper-slide .item {
    width: 100%;
    background: rgba(246, 246, 246, 0.1);
    border: .15625vw solid #fff;
    box-shadow: 0 0.5px 14.9px rgba(0, 55, 138, 0.17);
    border-radius: 1.30208vw;
    padding: 3.59375vw 4.27083vw 1.875vw 4.27083vw
}

.proInfo5 .content .swiper1 .swiper-slide .item .p1 {
    color: #666;
    font-style: normal;
    font-weight: 700;
    line-height: 178.571%;
    margin: 0 0 2.20833vw;
    /* padding: 0 1.09375vw */
}

.proInfo5 .content .swiper1 .swiper-slide .item .p2 {
    height: 13.0208vw;
    overflow: auto;
}

.proInfo5 .content .swiper1 .swiper-slide .item .p2 .list {
    display: flex;
}

.proInfo5 .content .swiper1 .swiper-slide .item .p2 .list p {
    color: rgba(102, 102, 102, 0.8);
    font-style: normal;
    font-weight: 400;
    line-height: 162.5%
}

.proInfo5 .content .swiper1 .swiper-slide .item .year {
    text-align: right;
    color: #666;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 3.125vw 0 0 0
}

.proInfo6 {
    height: 100vh
}

.proInfo6 .fix {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center
}

.proInfo6 .fix .wrap {
    width: 100%;
    padding: 0 9.21875vw
}

.proInfo6 .fix .wrap .title {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.proInfo6 .fix .wrap .line {
    width: 14.21875vw;
    height: .26042vw;
    background: rgba(13, 78, 144, 0.2);
    margin: 5.20833vw auto 0;
    border-radius: .3125vw
}

.proInfo6 .fix .wrap .line div {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: #0D4E90;
    transition: .6s ease
}

.proInfo6 .fix .wrap .content {
    margin: 8.4375vw auto 0;
    position: relative;
    width: 59.16667vw
}

.proInfo6 .fix .wrap .content .matter {
    width: 100%;
    /* height: 14.16667vw; */
    margin: auto;
    position: relative
}

.proInfo6 .fix .wrap .content .matter:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(100vh)
}

.proInfo6 .fix .wrap .content .matter .joke {
    width: 100%;
    height: 100%;
    border-radius: 1.04167vw;
    background: #F3F6F9;
    overflow: hidden;
    padding: 3.125vw 5.05208vw 1.82292vw 5.05208vw;
    transition: .6s ease
}

.proInfo6 .fix .wrap .content .matter .joke .p1 {
    color: #5A5A5A;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 1.66667vw
}

.proInfo6 .fix .wrap .content .matter .joke .dis {
    display: flex;
    justify-content: space-between
}

.proInfo6 .fix .wrap .content .matter .joke .dis .p2 {
    color: rgba(92, 92, 92, 0.6);
    font-style: normal;
    font-weight: 400;
    line-height: 171.429%
}

.proInfo6 .fix .wrap .content .matter .joke .dis .more {
    width: 9.47917vw;
    height: 2.60417vw;
    border-radius: 4.375vw;
    background: #FFF;
    box-shadow: 0 0 22.917px 0 rgba(0, 55, 138, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00378A;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.764px;
    text-transform: capitalize;
    margin: 2.44792vw 0 0 0;
    transition: .6s ease
}

.proInfo6 .fix .wrap .content .matter .joke .dis .more:hover {
    background: #0D4E90;
    color: #FFF
}

.common_sec {
    margin: 0 0 14.58333vw
}

.common_sec .title {
    margin: 0 0 4.53125vw;
    color: #5A5A5A;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

@media screen and (max-width: 768px) {
    .proInfo1 {
        height: 200px
    }

    .proInfo1 .img {
        height: 100%
    }
    .proInfo2 .content .r .item .bg {
        width: 195px;
    }
    .proInfo1 .back {
        left: 5%;
        bottom: 10%;
        gap: 10px
    }

    .proInfo1 .back svg {
        width: 16px;
        height: 16px
    }

    .proInfo2 {
        padding: 30px 5%
    }

    .proInfo2 .cut {
        gap: 10px;
        flex-wrap: wrap
    }

    .proInfo2 .cut .list {
        width: fit-content;
        height: 40px;
        padding: 0 10px;
        border-radius: 30px
    }

    .proInfo2 .content {
        margin: 30px 0 0 0;
        flex-direction: column;
        gap: 20px
    }

    .proInfo2 .content .l {
        gap: 10px;
        margin: 0 0 15px
    }

    .proInfo2 .content .l .dis {
        gap: 15px;
        margin: 0 0 20px;
        flex-wrap: wrap;
    }

    .proInfo2 .content .l .dis img {
        /* width: 100px */
        width: 130px;
    }

    .proInfo2 .content .l .img {
        width: 100%
    }

    .proInfo2 .content .r {
        width: 100%;
        max-height: none;
        height: auto;
        padding: 0
    }

    .proInfo4 .r .table-container {
        overflow-y: auto;
        overflow-x: hidden;
        max-height: 400px;
    }

    .proInfo2 .content .r .item {
        width: 100%;
        height: auto;
        border-radius: 15px;
        padding: 20px 5%
    }

    .proInfo2 .content .r .item:not(:last-child) {
        margin: 0 0 20px
    }

    .proInfo2 .content .r .item .p1 {
        margin: 0 0 10px;
        font-size: 16px;
    }
    .proInfo2 .content .r .item .p2 {
        font-size: 14px;
    }
    .proInfo3 {
        padding: 0 5% 40px 5%
    }

    .proInfo3 .img {
        height: 250px;
        border-radius: 15px
    }

    .proInfo4 {
        padding: 30px 5%;
        flex-direction: column
    }

    .proInfo4 .r {
        width: 100%;
        margin: 10px 0 0 0
    }

    .proInfo4 .r .p1 {
        margin: 0 0 0
    }

    .proInfo4 .r table tr td {
        padding: 0 10px 0 0 !important
    }

    .proInfo4 .r table tr td .text {
        font-size: 12px !important;
        max-width: 60vw
    }

    .proInfo4 .l {
        width: 100%
    }

    .proInfo4 .l .title {
        margin: 0 0 15px
    }

    .proInfo4 .l .img {
        padding: 40px 5%;
        border-radius: 15px;
        height: auto;
        margin: 0 0 20px
    }

    .proInfo4 .l .label {
        height: auto;
        margin: 0 0 20px;
        border-radius: 15px;
        padding: 20px 5%;
        display: none
    }

    .proInfo4 .l .label2 {
        height: auto;
        margin: 0 0 20px;
        border-radius: 15px;
        padding: 20px 5%;
        display: none
    }

    .proInfo4 .phone_box {
        display: block;
        margin-top: 15px
    }

    .proInfo4 .phone_box .label {
        height: auto;
        margin: 0 0 20px;
        border-radius: 15px;
        padding: 20px 5%
    }

    .proInfo4 .phone_box .label2 {
        height: auto;
        margin: 0 0 20px;
        border-radius: 15px;
        padding: 20px 5%
    }

    .proInfo5 {
        padding: 30px 5%
    }

    .proInfo5 .title {
        padding: 0;
        margin: 0 0 30px
    }

    .proInfo4 .l .title {
        font-size: 12px;
    }

    .proInfo5 .content {
        margin: 25px 0 0 0
    }

    .proInfo5 .content .swiper-pagination {
        width: 60%;
        height: 3px;
        border-radius: 4px;
        margin: 50px auto 0
    }

    .proInfo5 .content .swiper1 {
        width: 100%
    }

    .proInfo5 .content .swiper1 .swiper-slide .item {
        transform: scale(1) !important;
        padding: 25px 5%;
        height: 320px;
    }

    .proInfo5 .content .swiper1 .swiper-slide .item .p1 {
        /* margin: 0 0 20px; */
        padding: 0;
        font-size: 16px
    }

    .proInfo6 {
        height: auto !important
    }

    .proInfo6 .fix {
        height: auto
    }

    .proInfo6 .fix .wrap {
        padding: 0 5%
    }

    .proInfo6 .fix .wrap .line {
        display: none
    }

    .proInfo6 .fix .wrap .content {
        margin: 30px 0 0 0;
        width: 100%
    }

    .proInfo6 .fix .wrap .content .matter {
        height: auto;
        position: static !important;
        transform: none !important;
        margin: 0 0 20px
    }

    .proInfo6 .fix .wrap .content .matter .joke {
        border-radius: 15px;
        padding: 20px 5%;
        transform: scale(1) !important;
        opacity: 1 !important
    }

    .proInfo6 .fix .wrap .content .matter .joke .p1 {
        margin: 0 0 20px;
        font-size: 14px;
    }

    .proInfo6 .fix .wrap .content .matter .joke .dis {
        flex-direction: column;
        gap: 20px
    }

    .proInfo6 .fix .wrap .content .matter .joke .dis .more {
        width: fit-content;
        height: 45px;
        padding: 0 20px;
        border-radius: 30px;
        margin: 0
    }

    .common_sec {
        padding: 30px 5%;
        margin: 0 0 20px
    }

    .common_sec .title {
        margin: 0 0 25px
    }

    .proInfo5 .content .swiper1 .swiper-slide .item .p2 {
        height: 206px;
    }
}