@charset "utf-8";
@import url(common.css);
@import url(aos.css);

/*
* File       : styles.css
* Date       : 2025. 03. 03.
*
*/
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    align-items: flex-start;
    background-size: cover !important;
    background-position: center center !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.autoplay-container {
    position: relative;
}

.autoplay-progress {
    align-items: center;
    bottom: 48px;
    display: flex;
    gap: var(--space-8-xxs);
    left: var(--bs-gutter-x);
    position: absolute;
    z-index: 10;
}

.progress-text {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
}

.progress-bar {
    background: rgba(255, 255, 255, 0.2);
    height: 1px;
    overflow: hidden;
    position: relative;
    width: 90px;
}

.progress-fill {
    background: var(--color-ffffff-white);
    height: 100%;
    transition: width 0.3s linear;
    width: 0%;
}

.autoplay-stop {
    align-items: center;
    background: none;
    border: 0;
    display: flex;
    justify-content: center;
    padding: 0;
    height: 24px;
    width: 24px;
}

.autoplay-stop img {
    display: block;
    height: 100%;
    width: 100%;
}

.main-visual-swiper {
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.main-visual-swiper .container {
    --bs-gutter-x: 24px;
}

.main-visual-swiper .swiper-slide {
    height: 618px;
}

.main-visual-swiper .swiper-slide::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
    bottom: 0;
    content: '';
    opacity: 0.5;
    height: 248px;
    position: absolute;
    width: 100%;
}

.main-visual-swiper .slide01 {
    background: url(../imgs/main/mo-main-visual-slide-01.png);
}

.main-visual-swiper .slide02 {
    background: url(../imgs/main/main-visual-slide-02.png);
}

.main-visual-swiper .swiper-slide-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding-bottom: 100px;
    position: relative;
    z-index: 1;
}

.main-visual-swiper .swiper-slide-text h2 {
    color: var(--color-ffffff-white);
    font-size: var(--font-title-24-lg);
    font-weight: var(--font-500-medium);
    letter-spacing: -1px;
    text-shadow: 0px 0px 11.8px rgba(0, 0, 0, 0.35);
}

.main-visual-swiper .swiper-slide-text h1 {
    color: var(--color-ffffff-white);
    font-size: var(--font-title-24-lg);
    font-weight: var(--font-800-extrabold);
    margin: var(--space-4-min) 0 var(--space-8-xxs) 0;
    letter-spacing: -1px;
    text-shadow: 0px 0px 11.8px rgba(0, 0, 0, 0.35);
}

.main-visual-swiper .swiper-slide-text h1 span {
    color: var(--color-2897FF-primary-text);
}

.main-visual-swiper .swiper-slide-text p {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    line-height: 24px;
}

.main-visual-swiper .swiper-slide-text p span {
    font-size: var(--font-12-min);
}

@media (min-width:768px) {
    .main-visual-swiper .slide01 {
        background: url(../imgs/main/main-visual-slide-01.png);
    }

    .main-visual-swiper .slide02 {
        background: url(../imgs/main/main-visual-slide-02.png);
    }
}

@media (min-width:992px) {
    .autoplay-progress {
        bottom: 180px;
    }

    .progress-bar {
        width: 240px;
    }

    .main-visual-swiper {
        border-bottom-left-radius: 120px;
        border-bottom-right-radius: 120px;
    }

    .main-visual-swiper .swiper-slide {
        height: 100vh;
    }

    .main-visual-swiper .swiper-slide-text {
        justify-content: center;
    }

    .main-visual-swiper .swiper-slide-text h2 {
        font-size: 48px;
    }

    .main-visual-swiper .swiper-slide-text h1 {
        font-size: 48px;
    }

    .main-visual-swiper .swiper-slide-text p {
        font-size: 24px;
        line-height: 36px;
    }

    .main-visual-swiper .swiper-slide-text p .mo {
        display: none;
    }

    .main-visual-swiper .swiper-slide-text p span {
        font-size: var(--font-16-md);
    }
}

@media (min-width:1400px) {
    .main-visual-swiper {
        border-bottom-left-radius: 200px;
        border-bottom-right-radius: 200px;
    }
}

.main-visual-cont {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-20-md);
    padding: var(--space-48-threexl) 0 0 0;
}

.main-visual-cont p {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-14-xs);
    text-align: center;
}

.main-visual-cont .cont-area {
    align-items: center;
    display: flex;
    gap: var(--space-12-xs);
    justify-content: center;
    margin: 0 auto;
    position: relative;
    padding: var(--space-24-lg);
}

.main-visual-cont .cont-area::before {
    border-radius: 182px;
    background: var(--color-F6F8FB-gray-200);
    backdrop-filter: blur(8px);
    content: '';
    height: 426px;
    position: absolute;
    width: 100%;
    z-index: 1;
}

.main-visual-cont ul {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--space-12-xs);
    justify-content: center;
    width: 100%;
    z-index: 2;
}

.main-visual-cont ul li {
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0px 4px 20px 0px rgba(1, 23, 44, 0.12);
    border-radius: var(--radius-16-lg);
    padding: 28px var(--space-16-sm);
    width: 100%;
}

.main-visual-cont ul li:first-child {
    padding: 28px var(--space-16-sm) var(--space-16-sm) var(--space-16-sm);
}

.main-visual-cont ul li h6 {
    color: #000;
    font-size: var(--font-12-min);
    font-weight: var(--font-300-thin);
    line-height: 18px;
}

.main-visual-cont ul li h6 b {
    font-weight: var(--font-500-medium);
}

.main-visual-cont ul li h4 {
    color: var(--color-0283FD-primary);
    font-size: var(--font-20-xl);
    font-weight: var(--font-600-semibold);
    margin: var(--space-8-xxs) 0 0 0;
}

.main-visual-cont ul li h4 span {
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
}

.main-visual-cont ul li a {
    background: var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-12-min);
    display: block;
    margin: var(--space-32-xl) 0 0 0;
    padding: var(--space-8-xxs) 0;
    text-align: center;
}

@media (min-width:992px) {
    .main-visual {
        position: relative;
    }

    .main-sec-01 {
        bottom: 48px;
        position: absolute;
        right: 48px;
        width: 500px;
    }

    .main-sec-01 .container {
        padding: 0;
    }

    .main-visual-cont {
        flex-direction: row;
        position: relative;
        padding: 0;
    }

    .main-visual-cont .cont-area {
        align-items: flex-end;
        flex-direction: row;
        margin: 0 0 0 auto;
        width: 100%;
    }

    .main-visual-cont ul {
        align-items: flex-end;
        bottom: 20px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        position: relative;
        width: calc(33.33% * 2);
    }

    .main-visual-cont ul.re {
        width: 33.33%
    }

    .main-visual-cont ul.re li {
        padding: var(--space-24-lg) var(--space-16-sm);
    }

    .main-visual-cont ul li {
        padding: var(--space-24-lg) var(--space-12-xs);
    }

    .main-visual-cont ul li:first-child {
        padding: 28px var(--space-12-xs) var(--space-12-xs) var(--space-12-xs);
    }

    .main-visual-cont ul.re li {
        padding: var(--space-24-lg) var(--space-12-xs);
    }

    .main-visual-cont ul.re li:nth-child(2),
    .main-visual-cont ul.re li:nth-child(3) {
        display: none;
    }

    .main-visual-cont .cont-area::before {
        background: rgba(241, 244, 249, 0.24);
        backdrop-filter: blur(8px);
        height: 162px;
    }

    .main-visual-cont p {
        color: var(--color-ffffff-white);
        font-size: var(--font-14-xs);
        left: 180px;
        position: absolute;
        top: 8px;
        z-index: 10;
    }
}

@media (min-width:1400px) {
    .main-sec-01 {
        width: 800px;
    }

    .main-visual-cont ul {
        width: 40%;
    }

    .main-visual-cont ul.re {
        width: 60%;
    }

    .main-visual-cont ul.re li:nth-child(2),
    .main-visual-cont ul.re li:nth-child(3) {
        display: block;
    }

    .main-visual-cont p {
        left: 170px;
    }
}

@media (min-width:1600px) {
    .main-sec-01 {
        right: 60px;
        width: 860px;
    }

    .main-visual-cont ul li {
        padding: var(--space-24-lg) var(--space-16-sm);
    }

    .main-visual-cont ul li:first-child {
        padding: 28px var(--space-16-sm) var(--space-16-sm) var(--space-16-sm);
    }

    .main-visual-cont ul.re li {
        padding: var(--space-24-lg) var(--space-16-sm);
    }

    .main-visual-cont p {
        left: 192px;
    }
}

.main-sec-02 {
    padding: var(--space-80-fivexl) 0;
}

.sec-cont-02 ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.sec-cont-02 dl {
    align-items: center;
    display: flex;
    flex-direction: column;
}

.sec-cont-02 dl dt {
    align-items: center;
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-full);
    display: flex;
    height: 120px;
    justify-content: center;
    margin: 0 0 var(--space-12-xs) 0;
    width: 120px;
}

.sec-cont-02 dl dt a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.sec-cont-02 dl dt img {
    height: 60px;
    width: 60px;
}

.sec-cont-02 dl dd.title {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-18-lg);
    font-weight: var(--font-700-bold);
    line-height: 26px;
    margin: 0 0 var(--space-4-min) 0;
}

.sec-cont-02 dl dd {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    text-align: center;
}

@media (min-width:992px) {
    .main-sec-02 {
        padding: var(--space-120-sixxl) 0;
    }

    .sec-cont-02 ul {
        flex-direction: row;
    }

    .sec-cont-02 ul li {
        flex: 1;
    }

    .sec-cont-02 dl dt {
        height: 160px;
        width: 160px;
    }

    .sec-cont-02 dl dt img {
        height: 120px;
        width: 120px;
    }
}

.main-sec-03 {
    background: #D2E9FF;
    padding: 0 0 var(--space-80-fivexl) 0;
    position: relative;
}

.main-sec-03::before {
    background: linear-gradient(180deg, #FFF 0%, #E0F0FF 100%);
    content: '';
    display: inline-block;
    height: 374px;
    position: absolute;
    width: 100%;
    z-index: 0;
}

.main-sec-03::after {
    background: #BFE0FF;
    content: '';
    height: 3px;
    position: absolute;
    top: 374px;
    width: 100%;
    z-index: 3;
}

.main-sec-03 .sec-cont-one {
    position: relative;
    z-index: 2;
}

.main-sec-03 .img-group {
    position: relative;
    text-align: center;
    z-index: 2;
}

.main-sec-03 .img-group.max-width {
    margin: 0 auto;
    width: max-content;
}

.main-sec-03 .img-group.point::before {
    background: var(--color-0283FD-primary);
    content: '';
    display: inline-block;
    filter: blur(70px);
    height: 300px;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    z-index: 1;
}

.main-sec-03 .img-group.point::after {
    bottom: -20px;
    background: linear-gradient(180deg, rgba(210, 233, 255, 0.00) 0%, #D2E9FF 100%);
    content: '';
    display: inline-block;
    height: 100px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
    z-index: 3;
}

.main-sec-03 .img-group.point img {
    margin: 0 auto;
    max-width: 328px;
    position: relative;
    z-index: 3;
    width: 100%;
}

.main-sec-03 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-400-regular);
    line-height: 30px;
    margin: var(--space-20-md) 0 0 0;
    text-align: center;
}

.main-sec-03 .sec-cont-one h4 br {
    display: block;
}

.main-sec-03 .sec-cont-one h5 {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-18-lg);
    font-weight: var(--font-500-medium);
    line-height: 26px;
    margin: var(--space-32-xl) 0 var(--space-16-sm) 0;
    text-align: center;
}

.main-sec-03 .sec-cont-one h5 br {
    display: block;
}

.main-sec-03 .sec-cont-one h5 span {
    color: var(--color-0283FD-primary);
}

.main-sec-03 .sec-cont-two h5 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    line-height: 24px;
    margin: var(--space-20-md) 0 0 0;
    text-align: center;
}

.main-sec-03 .sec-cont-two h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 30px;
    text-align: center;
}

.main-sec-03 .sec-cont-two h4 span {
    color: var(--color-0283FD-primary);
}

@media (min-width:992px) {
    .main-sec-03::after {
        height: 5px;
        top: 443px;
    }

    .main-sec-03::before {
        height: 443px;
    }

    .main-sec-03 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px* 1.5);
    }

    .main-sec-03 .sec-cont-one h4 br.pc {
        display: none;
    }

    .main-sec-03 .sec-cont-one h5 {
        margin: var(--space-12-xs) 0 var(--space-16-sm) 0;
    }

    .main-sec-03 .sec-cont-one h5 br.pc {
        display: none;
    }

    .main-sec-03 .img-group {
        text-align: center;
    }

    .main-sec-03 .img-group.max-width {
        max-width: 600px;
    }

    .main-sec-03 .img-group.point img {
        margin: 0 auto;
        max-width: 497px;
    }

    .main-sec-03 .img-group.point::before {
        height: 500px;
        top: 100px;
        width: 500px;
    }

    .main-sec-03 .img-group.point::after {
        bottom: -22px;
        height: 116px;
    }

    .main-sec-03 .sec-cont-two h5 br {
        display: none;
    }

    .main-sec-03 .sec-cont-two h4 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px* 1.5);
    }

    .main-sec-03 .sec-cont-two h4 span {
        font-size: var(--font-title-36-xxl);
    }
}

.main-sec-04 {
    padding: var(--space-20-md) 0 var(--space-120-sixxl) 0;
}

.sec-cont-04 .sec-title {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-400-regular);
    line-height: 30px;
    text-align: center;
}

.sec-cont-04 .sec-cont-one {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    margin: var(--space-24-lg) 0 var(--space-60-fourxl) 0;
}

.sec-cont-04 .sec-cont-one li {
    align-items: center;
    background: rgba(241, 244, 249, 0.80);
    backdrop-filter: blur(30px);
    border: 1px solid var(--color-D4DCE5-gray-500);
    border-radius: var(--radius-full);
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
    text-align: center;
    width: 200px;
}

.sec-cont-04 .sec-cont-one li p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
    z-index: 2;
}

.sec-cont-04 .sec-cont-one li.one::after {
    background: #47FF47;
    border-radius: var(--radius-full);
    content: '';
    filter: blur(10px);
    height: 100px;
    position: absolute;
    width: 100px;
    z-index: -1;
}

.sec-cont-04 .sec-cont-one li.two::after {
    background: #48A4FF;
    border-radius: var(--radius-full);
    content: '';
    filter: blur(10px);
    height: 100px;
    position: absolute;
    width: 100px;
    z-index: -1;
}

.sec-cont-04 .sec-cont-one li.three::after {
    background: #9054FF;
    border-radius: var(--radius-full);
    content: '';
    filter: blur(10px);
    height: 100px;
    position: absolute;
    width: 100px;
    z-index: -1;
}

.sec-cont-04 .sec-cont-one li::before {
    background: rgba(241, 244, 249, 0.80);
    border-radius: 1000px;
    backdrop-filter: blur(28px);
    content: '';
    height: 200px;
    position: absolute;
    width: 200px;
    z-index: 0;
}

.sec-cont-04 .sec-cont-two {
    position: relative;
}

.sec-cont-04 .sec-cont-two p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-300-thin);
    line-height: 24px;
    margin: 0 0 var(--space-4-min) 0;
}

.sec-cont-04 .sec-cont-two h3 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-title-24-lg);
    line-height: 32px;
}

.sec-cont-04 .sec-cont-two h3 span {
    color: var(--color-0283FD-primary);
}

.sec-cont-04 .sec-cont-two .sec-cont-box {
    background: #EBF5FF;
    border-radius: var(--radius-20-xl);
    margin: var(--space-24-lg) 0;
    padding: var(--space-24-lg) 0;
}

.sec-cont-04 .sec-cont-two .sec-cont-box p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    text-align: center;
}

.sec-cont-04 .sec-cont-two h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    line-height: 24px;
    padding: 0 0 var(--space-120-sixxl) 0;
}

.sec-cont-04 .sec-cont-two h5 span {
    color: var(--color-0283FD-primary);
}

.sec-cont-04 .sec-cont-two img {
    bottom: 0;
    position: absolute;
    right: var(--space-12-xs);
    width: 110px;
}

.sec-cont-04.sec-cont-three {
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-20-xl);
    margin: 0 var(--space-24-lg);
    padding: var(--space-16-sm);
}

.sec-cont-04.sec-cont-three p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    text-align: center;
}

.sec-cont-four {
    display: flex;
    justify-content: center;
}

.sec-cont-four .mo-img {
    display: block;
}

.sec-cont-four .pc-img {
    display: none;
}

.main-sec-04 .sec-cont-six h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    line-height: 24px;
}

.main-sec-04 .sec-cont-six p {
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    margin: var(--space-8-xxs) 0 var(--space-12-xs) 0;
    line-height: 24px;
}

.main-sec-04 .sec-cont-six h2 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-title-24-lg);
    line-height: 32px;
}

.main-sec-04 .sec-cont-six ul {
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    padding: var(--space-16-sm) var(--space-20-md);
}

.main-sec-04 .sec-cont-six ul li {
    align-items: center;
    color: var(--color-687481-gray-800);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    gap: var(--space-4-min);
    line-height: 20px;
}

.main-sec-04 .sec-cont-six ul li::before {
    background: url(../imgs/ico/i-check.svg);
    content: '';
    display: inline-block;
    height: 12px;
    margin: 0 var(--space-4-min) 0 0;
    width: 12px;
}

.main-sec-04 .sec-cont-six img {
    width: 100%;
}

@media (min-width:768px) {
    .sec-cont-04.sec-cont-three br {
        display: none;
    }
}

@media (min-width:992px) {
    .main-sec-04 {
        padding: var(--space-120-sixxl) 0;
    }

    .sec-cont-04 .sec-title {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.5);
    }

    .sec-cont-04 .sec-cont-one {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-120-sixxl);
        margin: var(--space-48-threexl) 0 var(--space-120-sixxl) 0;
    }

    .sec-cont-04 .sec-cont-one li {
        border-radius: 1000px;
        height: 248px;
        width: 248px;
    }

    .sec-cont-04 .sec-cont-one li p {
        font-size: var(--font-20-xl);
        line-height: 30px;
    }

    .sec-cont-04 .sec-cont-one li.one::after,
    .sec-cont-04 .sec-cont-one li.two::after,
    .sec-cont-04 .sec-cont-one li.three::after {
        filter: blur(20px);
        height: 140px;
        width: 140px;
    }

    .sec-cont-04 .sec-cont-one li::before {
        height: 248px;
        width: 248px;
    }

    .sec-cont-04 .sec-cont-two .sec-cont-box {
        width: 50%;
    }

    .sec-cont-04 .sec-cont-two h3 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.5);
    }

    .sec-cont-04 .sec-cont-two .sec-cont-box p {
        font-size: var(--font-20-xl);
        line-height: 30px;
    }

    .sec-cont-04 .sec-cont-two h5 {
        text-align: center;
        width: 50%;
    }

    .sec-cont-04 .sec-cont-two h5 br.mo {
        display: none;
    }

    .sec-cont-04 .sec-cont-two img {
        width: 260px;
    }

    .sec-cont-04.sec-cont-three p {
        font-size: var(--font-16-md);
    }

    .sec-cont-four .mo-img {
        display: none;
    }

    .sec-cont-four .pc-img {
        display: block;
    }

    .main-sec-04 .sec-cont-six h2 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.2);
    }

    .main-sec-04 .sec-cont-six .row {
        align-items: center;
    }

    .main-sec-04 .sec-cont-six ul {
        padding: var(--space-32-xl);
    }

    .main-sec-04 .sec-cont-six ul li {
        font-size: var(--font-16-md);
    }

    .main-sec-04 .sec-cont-six .img-group {
        margin: var(--space-24-lg) 0 0 0;
    }

}

.main-sec-05 {
    overflow: hidden;
}

.main-sec-05 .container {
    padding: 0;
}

.main-sec-05 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    text-align: center;
}

.main-sec-05 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-title-24-lg);
    line-height: 32px;
    margin: var(--space-4-min)0 var(--space-8-xxs) 0;
    text-align: center;
}

.main-sec-05 .sec-cont-one h5 {
    color: var(--color-0283FD-primary);
    font-size: var(--font-title-20-md);
    line-height: 38px;
    text-align: center;
}

.main-sec-05 .img-group img {
    margin: 0 auto;
    max-width: 400px;
}

@media (min-width:992px) {
    .main-sec-05 .sec-cont-one .row {
        align-items: center;
    }

    .main-sec-05 .sec-cont-one h6 {
        text-align: left;
    }

    .main-sec-05 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        margin: var(--space-16-sm) 0 var(--space-32-xl) 0;
        line-height: calc(28px* 1.2);
        text-align: left;
    }

    .main-sec-05 .sec-cont-one h5 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px* 1.2);
        text-align: left;
    }

    .main-sec-05 .img-group img {
        max-width: 100%;
    }
}

.main-sec-06 {
    margin: var(--space-120-sixxl) 0 var(--space-80-fivexl) 0;
}

.main-sec-06 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    text-align: center;
}

.main-sec-06 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-title-24-lg);
    line-height: 32px;
    margin: var(--space-4-min) 0 var(--space-8-xxs) 0;
    text-align: center;
}

.main-sec-06 .sec-cont-one p {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    text-align: center;
}

.main-sec-06 .img-group {
    margin: var(--space-24-lg) 0;
}

.main-sec-06 .img-group img {
    max-width: 400px;
    margin: 0 auto;
}

.main-sec-06 .sec-cont-two h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-300-thin);
    line-height: 30px;
    text-align: center;
}

.main-sec-06 .sec-cont-two h4 span {
    color: #159EA0;
}

.main-sec-06 .sec-cont-two h6 {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    margin: var(--space-8-xxs) 0 0 0;
    text-align: center;
}

@media (min-width:992px) {
    .main-sec-06 {
        margin: var(--space-120-sixxl) 0;
    }

    .main-sec-06 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px* 1.2);
        margin: var(--space-8-xxs) 0 var(--space-16-sm) 0;
    }

    .main-sec-06 .img-group img {
        max-width: 100%;
    }
}


.main-sec-07 {
    background: var(--color-F6F8FB-gray-200);
    padding: var(--space-80-fivexl) 0;
}

.main-sec-07 .row.reverse {
    flex-direction: column-reverse;
}

.main-sec-07 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    line-height: 24px;
}

.main-sec-07 .sec-cont-one h2 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-title-24-lg);
    line-height: 32px;
    margin: var(--space-4-min)0 var(--space-48-threexl) 0;
}

.main-sec-07 hr,
.sub-sec-08 hr {
    border: 1px solid var(--color-E8ECF5-gray-400);
    margin: 1px 0;
}

.main-sec-07 .sec-cont-text dl {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    margin: 0 0 var(--space-32-xl) 0;
}

.main-sec-07 .sec-cont-text dl dt {
    align-items: center;
    display: flex;
    font-size: var(--font-title-24-lg);
    font-weight: var(--font-700-bold);
    line-height: 32px;
    gap: var(--space-12-xs);
}

.main-sec-07 .sec-cont-text dl dt b {
    color: var(--color-0283FD-primary);
}

.main-sec-07 .sec-cont-text dl dd {
    color: var(--color-687481-gray-800);
    display: flex;
    flex-direction: column;
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 22px;
    padding: 0 0 0 30px;
}

.main-sec-07 .sec-cont-text dl dd b {
    color: var(--color-22272B-gray-900);
    font-weight: var(--font-700-bold);
    margin: var(--space-8-xxs) 0 0 0;
}

.main-sec-07 .sec-cont-text dl dd b:first-child {
    margin: 0;
}

.main-sec-07 .sec-cont-text p {
    align-items: center;
    color: var(--color-687481-gray-800);
    display: flex;
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    gap: var(--space-8-xxs);
}

.main-sec-07 .sec-cont-two,
.sub-sec-08 .sec-cont-two {
    margin: var(--space-24-lg) 0 0 0;
}

.main-sec-07 .sec-cont-two h6,
.sub-sec-08 .sec-cont-two h6 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    line-height: 24px;
    text-align: center;
}

.main-sec-07 .sec-cont-two h6 span,
.sub-sec-08 .sec-cont-two h6 span {
    color: var(--color-0283FD-primary);
}

.main-sec-07 .sec-cont-two p,
.sub-sec-08 .sec-cont-two p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    line-height: 24px;
    margin: var(--space-8-xxs) 0 0 0;
    text-align: center;
}

.main-sec-07 .sec-cont-three,
.sub-sec-08 .sec-cont-three {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.main-sec-07 .sec-cont-three h5,
.sub-sec-08 .sec-cont-three h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-500-medium);
    line-height: 28px;
}

.main-sec-07 .sec-cont-three h5 b,
.sub-sec-08 .sec-cont-three h5 b {
    color: var(--color-0283FD-primary);
}

.main-sec-07 .sec-cont-three p,
.sub-sec-08 .sec-cont-three p {
    display: none;
}

.main-sec-07 .link-group,
.sub-sec-08 .link-group {
    align-items: center;
    display: flex;
    gap: var(--space-8-xxs);
    margin: 0 auto;
    max-width: 680px;
    width: 100%;
}

.main-sec-07 .link-group a,
.sub-sec-08 .link-group a {
    border: 1px solid #002D57;
    border-radius: var(--radius-20-xl);
    color: #002D57;
    flex: 1;
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    padding: var(--space-16-sm) 0;
    text-align: center;
}

.main-sec-07 .link-group a.kakao,
.sub-sec-08 .link-group a.kakao {
    background: #002D57;
    color: var(--color-ffffff-white);
}

.main-sec-07 .link-group a span,
.sub-sec-08 .link-group a span {
    display: none;
}

@media (min-width:768px) {
    .main-sec-07 .sec-cont-text dl dd {
        display: block;
    }

    .main-sec-07 .sec-cont-text dl dd b {
        display: inline-block;
        width: 80px;
    }

    .main-sec-07 .sec-cont-text dl dd b:last-child {
        width: 20px;
    }

    /* .main-sec-07 .sec-cont-two h6 br.mo {
        display: none;
    } */

    .main-sec-07 .sec-cont-two p br,
    .sub-sec-08 .sec-cont-two p br {
        display: none;
    }
}

@media (min-width:768px) {

    .main-sec-07 .sec-cont-three h5,
    .sub-sec-08 .sec-cont-three h5 {
        text-align: center;
    }

    .main-sec-07 .sec-cont-one h6 {
        text-align: center;
    }

    .main-sec-07 .sec-cont-one h2 {
        text-align: center;
    }
}

@media (min-width:992px) {
    .main-sec-07 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-07 .row {
        align-items: center;
        flex-direction: row;
    }

    .main-sec-07 .row.reverse {
        flex-direction: row;
    }


    .main-sec-07 .sec-cont-one h2 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px* 1.2);
    }

    .main-sec-07 .sec-cont-two h6,
    .sub-sec-08 .sec-cont-two h6 {
        font-size: var(--font-title-24-lg);
        line-height: 32px;
    }

    .main-sec-07 .sec-cont-two,
    .sub-sec-08 .sec-cont-two {
        margin: var(--space-48-threexl) 0 0 0;
    }

    .main-sec-07 .sec-cont-three h5,
    .sub-sec-08 .sec-cont-three h5 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.5);
        text-align: center;
    }

    .main-sec-07 .sec-cont-three p,
    .sub-sec-08 .sec-cont-three p {
        color: var(--color-687481-gray-800);
        font-size: var(--font-16-md);
        font-weight: var(--font-400-regular);
        display: block;
        text-align: center;
    }

    .main-sec-07 .link-group,
    .sub-sec-08 .link-group {
        margin: var(--space-24-lg) auto 0 auto;
    }

    .main-sec-07 .link-group a,
    .sub-sec-08 .link-group a {
        border-radius: var(--radius-full);
    }

    .main-sec-07 .link-group a span,
    .sub-sec-08 .link-group a span {
        display: inline-block;
    }
}

@media (min-width:1400px) {
    .main-sec-07 .sec-cont-text dl dd {
        font-size: var(--font-16-md);
    }
}

.main-sec-08 {
    background: url(../imgs/main/cont-08-bg.svg);
    background-size: cover;
    padding: var(--space-80-fivexl) 0;
}

.main-sec-08 .sec-cont-one h2 {
    color: var(--color-ffffff-white);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 30px;
    text-align: center;
}

.main-sec-08 .sec-cont-one h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-300-thin);
    line-height: 24px;
    margin: var(--space-8-xxs) 0 0 0;
    text-align: center;
}

.main-sec-08 .sec-cont-one .link-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: var(--space-24-lg) 0;
    gap: var(--space-12-xs);
}

.main-sec-08 .sec-cont-one .link-group a {
    align-items: center;
    background: rgba(0, 0, 0, 0.10);
    border: 1px solid var(--color-ffffff-white);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    gap: var(--space-8-xxs);
    justify-content: center;
    line-height: 24px;
    max-width: 260px;
    padding: var(--space-12-xs) 0;
    width: 100%;
}

.main-sec-08 .sec-cont-one p {
    color: var(--color-ffffff-white);
    font-size: var(--font-15-sm);
    font-weight: var(--font-700-bold);
    line-height: 22px;
    margin: 0 0 var(--space-16-sm) 0;
    text-align: center;
}

.main-sec-08 .sec-cont-event {
    position: relative;
    padding: var(--space-40-xxl) 0 0 0;
}

.main-sec-08 .sec-cont-event .event {
    align-items: center;
    background: #22272B;
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    height: 80px;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 80px;
    z-index: 1;
}

.main-sec-08 .sec-cont-event .event p {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-800-extrabold);
    margin: 0;
}

.main-sec-08 .sec-cont-event .event-box {
    border-radius: 36px;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(16px);
    padding: var(--space-60-fourxl) 0 var(--space-40-xxl) 0;
}

.main-sec-08 .sec-cont-event .event-box h4 {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
    text-align: center;
}

.main-sec-08 .sec-cont-event .event-box h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 22px;
}

@media (min-width:768px) {
    .main-sec-08 .sec-cont-one .link-group {
        flex-direction: row;
        justify-content: center;
    }
}

@media (min-width:992px) {
    .main-sec-08 {
        background: url(../imgs/main/pc-cont-08-bg.svg);
        background-size: cover;
        padding: 220px 0;
    }

    .main-sec-08 .sec-cont-one h2 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.5);
    }

    .main-sec-08 .sec-cont-one h6 br {
        display: none;
    }


    .main-sec-08 .sec-cont-one p {
        margin: 0 0 var(--space-48-threexl) 0;
    }

    .main-sec-08 .sec-cont-one p br {
        display: none;
    }

    .main-sec-08 .sec-cont-event {
        align-items: center;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.30);
        backdrop-filter: blur(16px);
        display: flex;
        gap: var(--space-16-sm);
        margin: 0 auto;
        max-width: 610px;
        padding: var(--space-20-md);
    }

    .main-sec-08 .sec-cont-event .event {
        flex: 0 0 auto;
        left: unset;
        position: relative;
        transform: unset;
    }

    .main-sec-08 .sec-cont-event .event-box {
        background: none;
        backdrop-filter: none;
        padding: 0;
    }

    .main-sec-08 .sec-cont-event .event-box h4 {
        text-align: left;
    }

    .main-sec-08 .sec-cont-event .event-box h6 {
        text-align: left;
    }

    .main-sec-08 .sec-cont-event .event-box h6 br {
        display: block;
    }

    .main-sec-08 .sec-cont-event .event-box h6 br.mo {
        display: none;
    }
}

.main-sec-09 {
    overflow: hidden;
    padding: var(--space-80-fivexl) 0;
}

.main-sec-09 .sec-cont-one {
    margin: 0 0 var(--space-24-lg) 0;
}

.main-sec-09 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 24px;
    text-align: center;
}

.main-sec-09 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-500-medium);
    line-height: 28px;
    text-align: center;
}

.main-sec-09 .sec-cont-event ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    margin: 0 0 var(--space-8-xxs) 0;
}

.main-sec-09 .sec-cont-event ul li {
    background: var(--color-F1F4F9-gray-300);
    border-radius: var(--radius-16-lg);
    padding: 32px;
    min-height: 202px;
    position: relative;
}

.main-sec-09 .sec-cont-event ul li h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 22px;
}

.main-sec-09 .sec-cont-event ul li h5 span {
    color: var(--color-8995A1-gray-700);
    font-weight: var(--font-400-regular);
}

.main-sec-09 .sec-cont-event ul li p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    margin: var(--space-8-xxs) 0 0 0;
}

.main-sec-09 .sec-cont-event ul li img {
    bottom: 32px;
    height: 68px;
    position: absolute;
    right: 32px;
    width: 68px;
}

.main-sec-09 .sec-cont-event>p {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    text-align: center;
}

.main-sec-09 .sec-cont-event h1 {
    color: var(--color-0283FD-primary);
    font-size: 60px;
    font-weight: var(--font-800-extrabold);
    margin: var(--space-40-xxl) 0 0 0;
    text-align: center;
}

.main-sec-09 .sec-cont-two {
    margin: var(--space-48-threexl) 0 0 0;
}

.main-sec-09 .sec-cont-two h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 24px;
}

.main-sec-09 .sec-cont-two h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
}

.main-sec-09 .sec-cont-two h4 span {
    color: var(--color-0283FD-primary);
}

.main-sec-09 .sec-cont-two p {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    margin: var(--space-8-xxs) 0 0 0;
}

.main-sec-09 .sec-cont-two a {
    align-items: center;
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-20-xl);
    display: flex;
    gap: var(--space-12-xs);
    margin: var(--space-16-sm) 0;
    padding: var(--space-8-xxs) var(--space-24-lg);
}

.main-sec-09 .sec-cont-two .link-text p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    line-height: 20px;
    margin: 0;
}

.main-sec-09 .sec-cont-two .link-text h6 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-700-bold);
    line-height: 20px;
}

.main-sec-09 .img-group img {
    position: relative;
    z-index: 2;
}

.main-sec-09 .img-group.point {
    position: relative;
}

.main-sec-09 .img-group.point::after {
    background: #5ADBDD;
    border-radius: 1000px;
    content: '';
    display: inline-block;
    filter: blur(28px);
    height: 248px;
    opacity: 0.2;
    position: absolute;
    top: -20px;
    width: 248px;
    z-index: 0;
}

.main-sec-09 .img-group.point::before {
    background: #0083FF;
    border-radius: 1000px;
    bottom: -60px;
    content: '';
    display: inline-block;
    filter: blur(28px);
    height: 248px;
    opacity: 0.2;
    position: absolute;
    right: -20px;
    width: 248px;
    z-index: 0;
}

.main-sec-09 .sec-cont-three {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem);
    padding-left: var(--bs-gutter-x, .75rem);
    padding-top: var(--space-120-sixxl);
    margin-right: auto;
    margin-left: auto;
}

.main-sec-09 .sec-cont-three ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.main-sec-09 .sec-cont-three ul li {
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    height: 364px;
    gap: var(--space-8-xxs);
    justify-content: flex-start;
    padding: var(--space-32-xl);
    width: 100%;
}

.main-sec-09 .sec-cont-three ul li:first-child {
    background: linear-gradient(0deg, #0283FD 0%, rgba(2, 131, 253, 0.30) 100%), url(../imgs/main/cont-09-03.svg);
    background-size: cover;
    background-position: center;
    justify-content: flex-end;
}

.main-sec-09 .sec-cont-three ul li:last-child {
    background: linear-gradient(180deg, #22272B 0%, rgba(34, 39, 43, 0.30) 100%), url(../imgs/main/cont-09-04.svg);
    background-size: cover;
    background-position: center;
}

.main-sec-09 .sec-cont-three ul li h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 22px;
}

.main-sec-09 .sec-cont-three ul li p {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

@media (min-width:768px) {
    .main-sec-09 .sec-cont-event ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main-sec-09 .sec-cont-event ul li {
        width: calc(50% - 8px)
    }
}

@media (min-width:992px) {
    .main-sec-09 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-09 .sec-cont-one h6 {
        font-size: var(--font-16-md);
        text-align: left;
    }

    .main-sec-09 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.5);
        text-align: left;
    }

    .main-sec-09 .sec-cont-two .row {
        align-items: center;
        max-width: 1140px;
        margin: 0 auto;
    }

    .main-sec-09 .sec-cont-two h6 {
        font-size: var(--font-16-md);
    }

    .main-sec-09 .sec-cont-two h4 {
        font-size: var(--font-title-28-xl);
        line-height: calc(28px * 1.2);
        margin: var(--space-4-min) 0 var(--space-8-xxs) 00;
    }

    .main-sec-09 .sec-cont-two a {
        gap: var(--space-16-sm);
        padding: var(--space-12-xs) var(--space-24-lg);
        margin: var(--space-24-lg) 0 0 0;
        max-width: 440px;
    }

    .main-sec-09 .sec-cont-two .link-text p {
        font-size: var(--font-16-md);
    }

    .main-sec-09 .sec-cont-two .link-text h6 {
        font-size: var(--font-16-md);
        line-height: 20px;
    }

    .main-sec-09 .img-group.point::after,
    .main-sec-09 .img-group.point::before {
        display: none;
    }

    .main-sec-09 .sec-cont-three {
        margin: 200px 0 0 0;
    }

    .main-sec-09 .sec-cont-three ul {
        flex-direction: row;
    }

    .main-sec-09 .sec-cont-three ul li {
        height: 720px;
        gap: var(--space-12-xs);
        padding: var(--space-80-fivexl) var(--space-60-fourxl);
    }

    .main-sec-09 .sec-cont-three ul li h6 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
    }

    .main-sec-09 .sec-cont-three ul li p {
        font-size: var(--font-16-md);
    }

    .main-sec-09 .sec-cont-three ul li p br {
        display: none;
    }

    .main-sec-09 .sec-cont-event ul li img {
        height: 80px;
        width: 80px;
    }
}

@media (min-width:1200px) {
    .main-sec-09 .sec-cont-event {
        position: relative;
    }

    .main-sec-09 .sec-cont-event ul {
        max-width: 800px;
        position: relative;

    }

    .main-sec-09 .sec-cont-event ul::after {
        background: url(../imgs/main/cont-09-09.svg);
        content: '';
        display: inline-block;
        height: 339px;
        margin: 0 var(--space-24-lg) 0 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -80px;
        width: 35px;
    }

    .main-sec-09 .sec-cont-event>p {
        text-align: left;
    }

    .main-sec-09 .sec-cont-event h1 {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        margin: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
    }
}

@media (min-width:1400px) {
    .main-sec-09 .sec-cont-two .row {
        max-width: 1280px;
    }

    .main-sec-09 .sec-cont-event h1 {
        font-size: 80px;
    }
}

.main-sec-10 {
    background: var(--color-F1F4F9-gray-300);
    padding: var(--space-80-fivexl) 0;
}

.main-sec-10 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    margin: 0 0 var(--space-4-min) 0;
}

.main-sec-10 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
}

.main-sec-10 .sec-cont-two {
    margin: var(--space-60-fourxl) 0 0 0;
}

.main-sec-10-swiper .slide-item {
    border-radius: var(--radius-24-xxl);
    background: var(--color-ffffff-white);
    box-shadow: 0px 3.6px 20.7px 0px rgba(35, 52, 82, 0.00);
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
    padding: var(--space-24-lg);
}

.main-sec-10-swiper .slide-item .item-top {
    align-items: center;
    display: flex;
    gap: var(--space-12-xs);
}

.main-sec-10-swiper .slide-item .item-top img {
    height: 72px;
    width: 72px;
}

.main-sec-10-swiper .slide-item .item-top-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.main-sec-10-swiper .slide-item .item-top-info h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
}

.main-sec-10-swiper .slide-item .item-top-info h6 {
    align-items: center;
    display: flex;
    gap: var(--space-4-min)
}

.main-sec-10-swiper .slide-item .item-top-info h6 img {
    height: 16px;
    width: 16px;
}

.main-sec-10-swiper .slide-item .item-top-info h6 span {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.main-sec-10-swiper .slide-item .item-top-info h6 b {
    color: var(--color-B1BBC9-gray-600);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.main-sec-10-swiper .slide-item .item-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.main-sec-10-swiper .slide-item .dl-group {
    border-bottom: 1px solid var(--color-E8ECF5-gray-400);
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
    padding: 0 0 var(--space-12-xs) 0;
}

.main-sec-10-swiper .slide-item .dl-group dl {
    align-items: center;
    display: flex;
    gap: var(--space-8-xxs);
}

.main-sec-10-swiper .slide-item .dl-group dt {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-600-semibold);
    line-height: 20px;
}

.main-sec-10-swiper .slide-item .dl-group dd {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.main-sec-10-swiper .slide-item .item-body h6 {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.main-sec-10-swiper .slide-item .item-footer a {
    background: var(--color-E8ECF5-gray-400);
    border-radius: var(--radius-full);
    color: var(--color-22272B-gray-900);
    display: block;
    font-size: var(--font-14-xs);
    line-height: 20px;
    padding: var(--space-16-sm);
    text-align: center;
    width: 100%;
}

.main-sec-10-swiper .slide-item .item-footer a:hover,
.main-sec-10-swiper .slide-item .item-footer a:focus {
    background: var(--color-0283FD-primary);
    color: var(--color-ffffff-white);
}

@media (min-width:768px) {
    .main-sec-10 .sec-cont-one h6 br {
        display: none;
    }
}

@media (min-width:992px) {
    .main-sec-10 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-10 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
        margin: 0 0 var(--space-12-xs) 0;
        text-align: center;
    }

    .main-sec-10 .sec-cont-one h6 {
        font-size: var(--font-16-md);
        text-align: center;
    }
}

.main-sec-11 {
    background: #002D57;
    overflow: hidden;
    padding: var(--space-80-fivexl) 0;
}

.main-sec-11 h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    text-align: center;
}

.main-sec-11 h4 {
    color: var(--color-ffffff-white);
    font-size: var(--font-20-xl);
    font-weight: var(--font-300-thin);
    line-height: 28px;
    margin: 0 0 var(--space-4-min) 0;
    text-align: center;
}

.main-sec-11 .sec-cont-one {
    margin: var(--space-40-xxl) 0;
}

.main-sec-11 .sec-cont-one ul {
    display: flex;
    flex-direction: column;
    position: relative;
}

.main-sec-11 .sec-cont-one ul::before {
    background: var(--color-ffffff-white);
    content: '';
    display: inline-block;
    height: 420px;
    left: calc(52px / 2);
    opacity: 0.3;
    position: absolute;
    top: 12px;
    width: 1px;
    z-index: 0;
}

.main-sec-11 .sec-cont-one ul li:nth-child(4) dl {
    align-items: center;
}

.main-sec-11 .sec-cont-one dl {
    display: flex;
    gap: var(--space-24-lg);
    padding: var(--space-12-xs) 0;
    position: relative;
    z-index: 1;
}

.main-sec-11 .sec-cont-one dl dt img {
    height: 52px;
    width: 52px;
}

.main-sec-11 .sec-cont-one dl dd {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
    justify-content: center;
    margin: var(--space-8-xxs) 0 0 0;
}

.main-sec-11 .sec-cont-one dl dd h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
}

.main-sec-11 .sec-cont-one dl dd p {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    word-break: keep-all;
}

.main-sec-11 .link-group {
    align-items: center;
    display: flex;
    gap: var(--space-8-xxs);
    margin: 0 auto;
    max-width: 600px;
}

.main-sec-11 .link-group a {
    border: 1px solid var(--color-ffffff-white);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-600-semibold);
    flex: 1;
    line-height: 20px;
    padding: var(--space-12-xs) 0;
    text-align: center;
}

.main-sec-11 .link-group a:last-child {
    background: var(--color-ffffff-white);
    color: #002D57;
}

@media (min-width:768px) {
    .main-sec-11 .sec-cont-one ul::before {
        height: 377px;
    }
}

@media (min-width:992px) {
    .main-sec-11 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-11 h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
        margin: var(--space-12-xs) 0 0 0;
        text-align: center;
    }

    .main-sec-11 h6 {
        font-size: var(--font-16-md);
        text-align: center;
    }

    .main-sec-11 .sec-cont-one ul {
        flex-direction: row;
        gap: var(--space-16-sm);
    }

    .main-sec-11 .sec-cont-one ul::before {
        height: 1px;
        left: 50%;
        transform: translateX(-50%);
        top: 30px;
        width: 100vw;
    }

    .main-sec-11 .sec-cont-one ul li {
        flex: 1
    }

    .main-sec-11 .sec-cont-one dl {
        align-items: center;
        flex-direction: column;
        gap: var(--space-16-sm);
        padding: 0;
    }

    .main-sec-11 .sec-cont-one dl dt img {
        height: 60px;
        width: 60px;
    }

    .main-sec-11 .sec-cont-one dl dd {
        align-items: center;
        margin: 0;
        text-align: center;
    }

    .main-sec-11 .link-group a {
        font-size: var(--font-16-md);
        line-height: 24px;
        padding: var(--space-16-sm) 0;
    }
}

.main-sec-12 {
    padding: var(--space-48-threexl) 0;
}

.main-sec-12 .sec-cont-one {
    background: #E8F4FF;
    border-radius: var(--radius-20-xl);
    margin: 0 0 0 25px;
    padding: var(--space-32-xl);
    position: relative;
}

.main-sec-12 .sec-cont-one img {
    left: -25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.main-sec-12 .sec-cont-one h6 {
    color: #133A60;
    font-size: var(--font-18-lg);
    font-weight: var(--font-400-regular);
    line-height: 26px;
    margin: 0 0 var(--space-8-xxs) 0;
}

.main-sec-12 .sec-cont-one p {
    color: #133A60;
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

@media (min-width:768px) {
    .main-sec-12 .sec-cont-one p br.mo {
        display: none;
    }
}

@media (min-width:992px) {
    .main-sec-12 .sec-cont-one {
        align-items: center;
        display: flex;
        justify-content: center;
        gap: var(--space-32-xl);
        margin: 0;
        padding: var(--space-40-xxl) 0;
    }

    .main-sec-12 .sec-cont-one img {
        left: unset;
        position: relative;
        top: unset;
        transform: unset;
        width: 100px;
    }

    .main-sec-12 .sec-cont-one h6 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
    }

    .main-sec-12 .sec-cont-one p {
        font-size: var(--font-16-md);
        line-height: 24px;
    }
}

.main-sec-13 {
    background: url(../imgs/main/cont-13-bg.svg);
    background-size: cover;
    padding: var(--space-80-fivexl) 0;
}

.main-sec-13 .sec-cont-one h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    margin: 0 0 var(--space-4-min) 0;
    text-align: center;
}

.main-sec-13 .sec-cont-one h4 {
    color: var(--color-ffffff-white);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    margin: 0 0 var(--space-32-xl) 0;
    text-align: center;
}

.main-sec-13 .sec-cont-one dl {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-12-xs);
}

.main-sec-13 .sec-cont-one dl dt {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.main-sec-13 .sec-cont-one dl dd {
    background: rgba(34, 39, 43, 0.77);
    border-radius: var(--radius-16-lg);
    padding: var(--space-16-sm) var(--space-20-md);
    width: 100%;
}

.main-sec-13 .sec-cont-one dl ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.main-sec-13 .sec-cont-one dl ul li {
    color: var(--color-ffffff-white);
    display: flex;
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.main-sec-13 .sec-cont-one dl ul li::before {
    background: url(../imgs/ico/i-check.svg);
    content: '';
    display: inline-block;
    height: 12px;
    margin: 0 var(--space-4-min) 0 0;
    width: 12px;
}

.main-sec-13 p {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    margin: var(--space-32-xl) 0 0 0;
    text-align: center;
}

.main-sec-13 hr {
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-ffffff-white);
    opacity: 0.2;
    margin: var(--space-40-xxl) 0;
}

.main-sec-13 h5 {
    align-items: center;
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: 0 0 var(--space-24-lg) 0;
}

.main-sec-13 h5 span {
    background: rgba(34, 39, 43, 0.5);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-18-lg);
    font-weight: var(--font-700-bold);
    line-height: 32px;
    padding: 0 var(--space-12-xs);
}

.main-sec-13 .img-group .mo-img {
    margin: 0 auto;
    max-width: 400px;
}

@media (min-width:768px) {
    .main-sec-13 {
        background-position: center;
    }

    .main-sec-13 p br {
        display: block;
    }

    .main-sec-13 .sec-cont-one h4 br {
        display: none;
    }

    .main-sec-13 .sec-cont-one dl ul li {
        align-items: center;
    }
}

@media (min-width:992px) {
    .main-sec-13 {
        background: url(../imgs/main/pc-cont-13-bg.svg);
        background-size: cover;
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-13 .sec-cont-one h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .main-sec-13 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
    }

    .main-sec-13 .sec-cont-one .row {
        max-width: 1000px;
        margin: 0 auto;
    }

    .main-sec-13 .sec-cont-one dl {
        gap: var(--space-16-sm);
    }

    .main-sec-13 .sec-cont-one dl dd {
        padding: var(--space-20-md) var(--space-24-lg);
    }

    .main-sec-13 .sec-cont-one dl dt {
        font-size: var(--font-18-lg);
    }

    .main-sec-13 p {
        font-size: var(--font-18-lg);
        text-align: center;
    }

    .main-sec-13 hr {
        margin: var(--space-60-fourxl) 0;
    }

    .main-sec-13 h5 {
        align-items: center;
        font-size: var(--font-20-xl);
        flex-direction: row;
        justify-content: center;
    }

    .main-sec-13 h5 span {
        padding: var(--space-4-min) var(--space-16-sm);
    }

    .main-sec-13 .img-group .pc-img {
        max-width: 760px;
        margin: 0 auto;
    }
}

.main-sec-14 {
    padding: var(--space-80-fivexl) 0;
}

.main-sec-14 .sec-cont-one {
    margin: 0 0 var(--space-20-md) 0;
}

.main-sec-14 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    margin: 0 0 var(--space-4-min) 0;
    text-align: center;
}

.main-sec-14 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    text-align: center;
}

.main-sec-14 .sec-cont-one h6 span {
    color: var(--color-0283FD-primary);
}

.main-sec-14 .sec-cont-two {
    align-items: center;
    border: 6px solid var(--color-F1F4F9-gray-300);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-24-lg);
    padding: var(--space-24-lg) var(--space-20-md);
}

.main-sec-14 .sec-cont-two h4 {
    background: var(--color-22272B-gray-900);
    border-radius: var(--radius-16-lg);
    color: var(--color-ffffff-white);
    font-size: var(--font-18-lg);
    font-weight: var(--font-500-medium);
    line-height: 26px;
    padding: var(--space-20-md) 0;
    text-align: center;
    width: 100%;
}

.main-sec-14 .sec-cont-two ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.main-sec-14 .sec-cont-two ul li {
    align-items: flex-start;
    display: flex;
    gap: var(--space-4-min);
}

.main-sec-14 .sec-cont-two ul li img {
    height: 40px;
    width: 40px;
}

.main-sec-14 .sec-cont-two .cont-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    width: 100%;
}

.main-sec-14 .sec-cont-two .cont-box {
    background: var(--color-F1F4F9-gray-300);
    border-radius: var(--radius-16-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: 0 0 0 var(--space-12-xs);
    padding: var(--space-16-sm);
    position: relative;
}

.main-sec-14 .sec-cont-two .cont-box:first-child:before {
    background: url(../imgs/main/cont-14-trg.svg);
    content: '';
    display: inline-block;
    height: 28px;
    left: -11px;
    position: absolute;
    top: 0;
    width: 12px;
}

.main-sec-14 .sec-cont-two .cont-box p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.main-sec-14 .sec-cont-two .cont-box img {
    border-radius: var(--radius-16-lg);
    height: 180px;
    width: 180px;
}

@media (min-width:992px) {
    .main-sec-14 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-14 .cont-area {
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .main-sec-14 .sec-cont-one {
        position: sticky;
        height: max-content;
        top: 140px;
    }

    .main-sec-14 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
        margin: 0 0 var(--space-20-md) 0;
    }

    .main-sec-14 .sec-cont-one h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
        text-align: left;
    }

    .main-sec-14 .sec-cont-two {
        max-width: 500px;
        padding: var(--space-40-xxl);
    }

    .main-sec-14 .sec-cont-two ul li img {
        height: 60px;
        width: 60px;
    }

    .main-sec-14 .sec-cont-two .cont-box {
        padding: var(--space-24-lg);
    }

    .main-sec-14 .sec-cont-two .cont-box p {
        font-size: var(--font-16-md);
        line-height: 24px;
    }
}

.main-sec-15 {
    background: url(../imgs/main/cont-15-bg.png);
    background-position: center;
    background-size: cover;
    padding: var(--space-80-fivexl) 0;
}

.main-sec-15 h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    margin: 0 0 var(--space-4-min) 0;
    text-align: center;
}

.main-sec-15 h4 {
    color: var(--color-ffffff-white);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    text-align: center;
}

.main-sec-15 a {
    align-items: center;
    border: 1px solid var(--color-ffffff-white);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    gap: var(--space-8-xxs);
    justify-content: center;
    line-height: 24px;
    margin: 0 auto;
    max-width: 200px;
    padding: var(--space-12-xs) 0;
    width: 100%;
}

@media (min-width:992px) {
    .main-sec-15 {
        background: url(../imgs/main/pc-cont-15-bg.png);
        background-size: cover;
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-15 h6 {
        font-size: var(--font-16-md);
        margin: 0 0 var(--space-8-xxs) 0;
        text-align: left;
    }

    .main-sec-15 h4 {
        font-size: var(--font-title-28-xl);
        text-align: left;
    }

    .main-sec-15 a {
        margin: 0 0 0 auto;
    }
}

.main-sec-16 {
    padding: var(--space-80-fivexl) 0;
}

.main-sec-16 .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-60-fourxl);
}

.main-sec-16 .sec-cont-one h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-300-thin);
    line-height: 20px;
    margin: 0 0 var(--space-4-min) 0;
    text-align: center;
}

.main-sec-16 .sec-cont-one h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    margin: 0 0 var(--space-4-min) 0;
    text-align: center;
}

.main-sec-16 .sec-cont-one ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: var(--space-24-lg) 0 var(--space-60-fourxl) 0;
}

.main-sec-16 .sec-cont-one ul li {
    align-items: center;
    border-radius: var(--radius-16-lg);
    background-size: cover !important;
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
    height: 160px;
    justify-content: center;
    width: 100%;
}

.main-sec-16 .sec-cont-one ul li:nth-child(1) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%),
        url(../imgs/main/cont-16-01.png);
}

.main-sec-16 .sec-cont-one ul li:nth-child(2) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(../imgs/main/cont-16-02.png);
}

.main-sec-16 .sec-cont-one ul li:nth-child(3) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(../imgs/main/cont-16-03.png);
}

.main-sec-16 .sec-cont-one ul li:nth-child(4) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(../imgs/main/cont-16-04.png);
}

.main-sec-16 .sec-cont-one ul li h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.main-sec-16 .sec-cont-one ul li h4 {
    color: var(--color-ffffff-white);
    font-size: var(--font-18-lg);
    font-weight: var(--font-700-bold);
    line-height: 26px;
    text-align: center;
}

.main-sec-16 .sec-cont-two h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    margin: 0 0 var(--space-40-xxl) 0;
    text-align: center;
}

@media (min-width:768px) {
    .main-sec-16 .sec-cont-one ul li {
        height: 200px;
    }
}

@media (min-width:992px) {
    .main-sec-16 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-16 .sec-cont-one h6 {
        font-size: var(--font-16-md);
    }

    .main-sec-16 .sec-cont-one h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
    }

    .main-sec-16 .sec-cont-one ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main-sec-16 .sec-cont-one ul li {
        width: calc(50% - 8px);
    }

    .main-sec-16 .sec-cont-two h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
    }
}

@media (min-width:1400px) {
    .main-sec-16 .sec-cont-one ul {
        flex-wrap: nowrap;
        gap: var(--space-16-sm);
    }

    .main-sec-16 .sec-cont-one ul li {
        align-items: flex-end;
        height: 386px;
        justify-content: flex-end;
        padding: var(--space-20-md);
        width: 100%;
    }

    .main-sec-16 .sec-cont-one ul li h6 {
        text-align: right;
    }

    .main-sec-16 .sec-cont-one ul li:nth-child(1) {
        background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%),
            url(../imgs/main/pc-cont-16-01.png);
    }

    .main-sec-16 .sec-cont-one ul li:nth-child(2) {
        background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(../imgs/main/pc-cont-16-02.png);
    }

    .main-sec-16 .sec-cont-one ul li:nth-child(3) {
        background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(../imgs/main/pc-cont-16-03.png);
    }

    .main-sec-16 .sec-cont-one ul li:nth-child(4) {
        background: linear-gradient(180deg, rgba(102, 102, 102, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(../imgs/main/pc-cont-16-04.png);
    }
}

.main-sec-17 {
    background: var(--color-F1F4F9-gray-300);
    padding: var(--space-80-fivexl) 0;
}

.main-sec-17 h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    margin: 0 0 var(--space-40-xxl) 0;
    text-align: center;
}


.main-sec-17-swiper .slide-item {
    border-radius: var(--radius-24-xxl);
    background: var(--color-ffffff-white);
    box-shadow: 0px 4px 20px 0px rgba(35, 52, 82, 0.00);
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
    min-height: 332px;
    padding: 36px 28px;
}

.main-sec-17-swiper .slide-item .item-top {
    align-items: center;
    display: flex;
    gap: var(--space-12-xs);
}

.main-sec-17-swiper .slide-item .item-top img {
    flex: 0 0 auto;
    height: 44px;
    width: 44px;
}

.main-sec-17-swiper .slide-item .item-top-info {
    display: flex;
    flex-direction: column;
}

.main-sec-17-swiper .slide-item .item-top-info h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
}

.main-sec-17-swiper .slide-item .item-top-info h6 {
    color: var(--color-B1BBC9-gray-600);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.main-sec-17-swiper .slide-item .item-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.main-sec-17-swiper .slide-item .item-star {
    align-items: center;
    display: flex;
    gap: var(--space-4-min);
}

.main-sec-17-swiper .slide-item .item-star ul {
    align-items: center;
    display: flex;
    gap: var(--space-4-min);
}

.main-sec-17-swiper .slide-item .item-star ul li {
    margin: -6px;
}

.main-sec-17-swiper .slide-item .item-star p {
    align-items: baseline;
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-15-sm);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.main-sec-17-swiper .slide-item .item-star p>img {
    margin-left: -6px;
}

.main-sec-17-swiper .slide-item .dl-group {
    border-bottom: 1px solid var(--color-E8ECF5-gray-400);
    display: flex;
    gap: var(--space-4-min);
    padding: 0 0 var(--space-12-xs) 0;
}

.main-sec-17-swiper .slide-item .dl-group dl {
    align-items: center;
    display: flex;
    gap: var(--space-4-min);
}

.main-sec-17-swiper .slide-item .dl-group dl::after {
    background: var(--color-E8ECF5-gray-400);
    content: '';
    display: inline-block;
    height: 12px;
    width: 1px;
}

.main-sec-17-swiper .slide-item .dl-group dl:last-child::after {
    display: none;
}

.main-sec-17-swiper .slide-item .dl-group dt {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-600-semibold);
    line-height: 20px;
}

.main-sec-17-swiper .slide-item .dl-group dd {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.main-sec-17-swiper .slide-item .item-body h6 {
    color: var(--color-8995A1-gray-700);
    display: -webkit-box;
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    /* 최대 6줄 표시 */
    -webkit-box-orient: vertical;
}

@media (min-width:992px) {
    .main-sec-17 {
        padding: var(--space-120-sixxl) 0;
    }

    .main-sec-17 h4 {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
        text-align: center;
    }
}


.sub-sec-01 {
    align-items: center;
    background: linear-gradient(180deg, var(--color-2897FF-primary-text, #2897FF) 28.86%, var(--color-C9E6FF-primary-20, #C9E6FF) 100%);
    display: flex;
    flex-direction: column;
    height: 90vh;
    overflow: hidden;
    position: relative;
}

.sub-sec-01 .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: 160px 0 0 0;
}

.sub-sec-01 h1,
.sub-sec-01 h4 {
    color: var(--color-ffffff-white);
    text-align: center;
}

.metal-detector-qa {
    align-items: center;
    display: flex;
    flex-direction: column;
    /* gap: var(--space-12-xs); */
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    bottom: 60px;
    width: max-content;
}

.metal-detector-qa li {
    animation: wiggle 2s infinite ease-in-out;
    background: var(--color-ffffff-white);
    border-radius: var(--radius-12-md);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    color: var(--color-0283FD-primary);
    display: inline-block;
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
    margin: 0;
    padding: var(--space-12-xs) var(--space-24-lg);
    width: max-content;
}

.metal-detector-qa li:nth-child(1) {
    animation: wiggle-1 2s infinite ease-in-out;
    transform: rotate(-8deg) translateY(-2px);
    z-index: 2;
}

.metal-detector-qa li:nth-child(2) {
    animation: wiggle-2 2.1s infinite ease-in-out;
    transform: rotate(5deg) translateY(1px);
    z-index: 3;
}

.metal-detector-qa li:nth-child(3) {
    animation: wiggle-3 2.2s infinite ease-in-out;
    transform: rotate(-10deg) translateY(-3px);
    z-index: 4;
}

.metal-detector-qa li:nth-child(4) {
    animation: wiggle-4 2s infinite ease-in-out;
    transform: rotate(7deg) translateY(2px);
    z-index: 5;
}

/* 5번째 이후는 기본으로 숨김 (모바일 기준) */
.metal-detector-qa li:nth-child(n+5) {
    display: none;
}


@media (min-width: 768px) {
    .metal-detector-qa {
        flex-direction: row;
    }

    .metal-detector-qa li {
        margin-bottom: 0;
        margin-left: -20px;
    }

    .metal-detector-qa li:nth-child(n+5) {
        display: inline-block;
    }

    .metal-detector-qa li:nth-child(n+7) {
        display: none;
    }

    .metal-detector-qa li:nth-child(5) {
        animation: wiggle-5 1.8s infinite ease-in-out;
        transform: rotate(-6deg) translateY(-6px);
        z-index: 6;
    }

    .metal-detector-qa li:nth-child(6) {
        animation: wiggle-6 2.3s infinite ease-in-out;
        transform: rotate(9deg) translateY(6px);
        z-index: 7;
    }

    .metal-detector-qa li:nth-child(7) {
        animation: wiggle-7 2s infinite ease-in-out;
        transform: rotate(-4deg) translateY(-4px);
        z-index: 8;
    }
}

@media (min-width: 992px) {
    .sub-sec-01 {
        height: 100vh;
    }

    .sub-sec-01 .container {
        margin: 300px 0 0 0;
    }

    .metal-detector-qa {
        bottom: 160px;
        flex-direction: row;
    }

    .metal-detector-qa li {
        margin-bottom: 0;
        margin-left: -20px;
    }

    .metal-detector-qa li:nth-child(n+7) {
        display: inline-block;
    }

    .metal-detector-qa li:nth-child(1) {
        top: 10%;
        left: 50%;
        transform: translateX(-50%) rotate(-8deg);
    }

    .metal-detector-qa li:nth-child(5) {
        animation: wiggle-5 1.8s infinite ease-in-out;
        transform: rotate(-6deg) translateY(-1px);
        z-index: 6;
    }

    .metal-detector-qa li:nth-child(6) {
        animation: wiggle-6 2.3s infinite ease-in-out;
        transform: rotate(9deg) translateY(0px);
        z-index: 7;
    }

    .metal-detector-qa li:nth-child(7) {
        animation: wiggle-7 2s infinite ease-in-out;
        transform: rotate(-4deg) translateY(2px);
        z-index: 8;
    }

    .metal-detector-qa li:nth-child(8) {
        animation: wiggle-8 2.4s infinite ease-in-out;
        transform: rotate(10deg) translateY(-2px);
        z-index: 9;
    }

    .metal-detector-qa li:nth-child(9) {
        animation: wiggle-9 1.9s infinite ease-in-out;
        transform: rotate(-5deg) translateY(1px);
        z-index: 10;
    }

    .metal-detector-qa li:nth-child(10) {
        animation: wiggle-10 2.1s infinite ease-in-out;
        transform: rotate(6deg) translateY(-1px);
        z-index: 11;
    }
}

/* 각각의 흔들림에 약간의 차이를 둔 키프레임 */
@keyframes wiggle-1 {

    0%,
    100% {
        transform: rotate(-8deg);
    }

    50% {
        transform: rotate(-6deg);
    }
}

@keyframes wiggle-2 {

    0%,
    100% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(7deg);
    }
}

@keyframes wiggle-3 {

    0%,
    100% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-8deg);
    }
}

@keyframes wiggle-4 {

    0%,
    100% {
        transform: rotate(7deg);
    }

    50% {
        transform: rotate(9deg);
    }
}

@keyframes wiggle-5 {

    0%,
    100% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(-4deg);
    }
}

@keyframes wiggle-6 {

    0%,
    100% {
        transform: rotate(9deg);
    }

    50% {
        transform: rotate(11deg);
    }
}

@keyframes wiggle-7 {

    0%,
    100% {
        transform: rotate(-4deg);
    }

    50% {
        transform: rotate(-2deg);
    }
}

@keyframes wiggle-8 {

    0%,
    100% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(12deg);
    }
}

@keyframes wiggle-9 {

    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(-3deg);
    }
}

@keyframes wiggle-10 {

    0%,
    100% {
        transform: rotate(6deg);
    }

    50% {
        transform: rotate(8deg);
    }
}

.sub-sec {
    display: flex;
    flex-direction: column;
    gap: var(--space-80-fivexl);
    padding: var(--space-80-fivexl) 0;
}

.sub-sec .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-40-xxl);
}

@media (min-width:992px) {
    .sub-sec {
        padding: var(--space-120-sixxl) 0;
    }

    .sub-sec .container {
        gap: var(--space-60-fourxl);
        max-width: 1200px;
    }
}

.sub-sec h1,
.sub-sec h2,
.sub-sec h3,
.sub-sec h4,
.sub-sec h5,
.sub-sec h6 {
    text-align: center;
}

.sec-title-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.sub-sec-02 .img-group img {
    max-width: 480px;
    margin: 0 auto;
}

.sub-sec-02 ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: 0 auto;
    max-width: 480px;
    width: 100%;
}

.sub-sec-02 ul li {
    background: var(--color-F1F4F9-gray-300);
    border-radius: var(--radius-20-xl);
    padding: var(--space-32-xl) var(--space-24-lg) var(--space-8-xxs) var(--space-24-lg);
}

.sub-sec-02 ul dl {
    display: flex;
    flex-direction: column;
}

.sub-sec-02 ul dl dt {
    border-bottom: 1px solid var(--color-B1BBC9-gray-600);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    padding: 0 0 var(--space-20-md) 0;
    text-align: center;
}

.sub-sec-02 ul dl dd {
    color: #000;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    padding: var(--space-20-md) 0;
}

.sub-sec-02 ul dl dd p {
    align-items: center;
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    gap: var(--space-8-xxs);
}

.sub-sec-02 ul li:nth-child(2) {
    background: var(--color-0283FD-primary);
}

.sub-sec-02 ul li:nth-child(2) dt {
    border-color: var(--color-ffffff-white);
    color: var(--color-ffffff-white);
}

.sub-sec-02 ul li:nth-child(2) dd p {
    color: var(--color-ffffff-white);
}

@media (min-width:992px) {
    .sub-sec-02 ul {
        align-items: center;
        flex-direction: row;
        gap: var(--space-16-sm);
        justify-content: center;
        max-width: 100%;
    }

    .sub-sec-02 ul li {
        background: var(--color-F1F4F9-gray-300);
        border-radius: var(--radius-20-xl);
        flex: 1;
        padding: var(--space-40-xxl) 28px;
    }

    .sub-sec-02 ul dl dt {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }

}

.sub-sec-03 {
    background: var(--color-F6F8FB-gray-200);
}

.sub-sec-03 .sec-cont {
    border-radius: var(--radius-20-xl);
    padding: var(--space-32-xl);
    position: relative;
}

.sub-sec-03 .sec-cont-01 {
    background: var(--color-22272B-gray-900);
    height: 200px;
    display: block;
}

.sub-sec-03 .sec-cont-01 h6 {
    color: var(--color-B1BBC9-gray-600);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 24px;
    text-align: left;
}

.sub-sec-03 .sec-cont-01 h6 span {
    color: var(--color-ffffff-white);
}

.sub-sec-03 .sec-cont-01 img {
    bottom: 32px;
    height: 100px;
    position: absolute;
    right: 32px;
    width: 100px;
}

.sub-sec-03 .sec-cont-02 {
    align-items: flex-end;
    background: var(--color-ffffff-white);
    display: flex;
    height: 360px;
    justify-content: center;
}

.sub-sec-03 .sec-cont-02 img {
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    max-width: 300px;
}

.sub-sec-03 .sec-cont-02 h6 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 24px;
    text-align: center;
}

.sub-sec-03 .sec-cont-02 h6 span {
    color: var(--color-0283FD-primary);
}

@media (min-width:992px) {
    .sub-sec-03 .sec-cont {
        border-radius: var(--radius-28-threexl);
        padding: var(--space-40-xxl);
    }

    .sub-sec-03 .sec-cont-01 {
        height: 332px;
    }

    .sub-sec-03 .sec-cont-01 h6 {
        font-size: var(--font-title-24-lg);
        line-height: 32px;
    }

    .sub-sec-03 .sec-cont-01 img {
        bottom: 40px;
        height: 120px;
        right: 40px;
        width: 120px;
    }

    .sub-sec-03 .sec-cont-02 {
        align-items: center;
        height: 332px;
        justify-content: flex-start;
    }

    .sub-sec-03 .sec-cont-02 img {
        left: auto;
        position: absolute;
        top: 0;
        transform: unset;
        right: 40px;
        max-width: 340px;
    }

    .sub-sec-03 .sec-cont-02 h6 {
        line-height: 28px;
        text-align: left;
    }

}

/* .sub-sec-04 .sec-cont-img {
    background: #F9F9F9;
    border-radius: var(--radius-20-xl);
    height: 320px;
    padding: var(--space-40-xxl);
}

.sub-sec-04 .sec-cont-img img {
    max-width: 240px;
    margin: 0 auto;
    width: 100%;
} */

.sub-sec-04 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.sub-sec-04 .sec-cont-text dl {
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.sub-sec-04 .sec-cont-text dt {
    align-items: center;
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-18-lg);
    font-weight: var(--font-700-bold);
    gap: var(--space-8-xxs);
    line-height: 24px;
}

.sub-sec-04 .sec-cont-text dt b {
    color: var(--color-0283FD-primary);
    font-size: var(--font-20-xl);
}

.sub-sec-04 .sec-cont-text dd {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-400-regular);
    line-height: 24px;
}

.sub-sec-04 .sec-cont-text>p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.sub-sec-07 .sec-cont-box {
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-8995A1-gray-700);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-24-lg) var(--space-20-md);
    position: relative;
    text-align: center;
    z-index: 2;
}

.sub-sec-07 .sec-cont-box img {
    animation: blink 1s infinite;
}

.sub-sec-07 .sec-cont-box h5 {
    align-items: center;
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sub-sec-07 .sec-cont-box h6 {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

@media (min-width:992px) {
    .sub-sec-04 .row {
        align-items: center;
        --bs-gutter-x: 40px;
    }
}

@media (min-width:1200px) {
    /* .sub-sec-04 .sec-cont-img {
        align-items: center;
        border-radius: 40px;
        display: flex;
        height: 440px;
        justify-content: center;
    }

    .sub-sec-04 .sec-cont-img img {
        max-width: 300px;
    } */

    .sub-sec-04 .sec-cont-text {
        gap: var(--space-32-xl);
    }

    .sub-sec-04 .sec-cont-text dt {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .sub-sec-04 .sec-cont-text dt b {
        font-size: var(--font-title-24-lg);
    }

    .sub-sec-07 .sec-cont-box {
        gap: var(--space-12-xs);
        margin: 0 auto;
        padding: var(--space-40-xxl);
        width: 100%;
    }

    .sub-sec-07 .sec-cont-box h5 {
        font-size: var(--font-18-lg);
        flex-direction: row;
        line-height: 24px;
        justify-content: center;
    }

    .sub-sec-07 .sec-cont-box h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }
}

.sub-sec-05 {
    background: url(../imgs/sub/metal-detector/cont-05-bg.svg);
    background-size: cover;
    background-position: right center;
}

.sub-sec-05 .container {
    gap: var(--space-32-xl);
}

.sub-sec-05 h3 {
    color: var(--color-ffffff-white);
    font-weight: var(--font-500-medium);
}

.sub-sec-05 .link-group {
    align-items: center;
    display: flex;
    gap: var(--space-8-xxs);
    justify-content: center;
}

.sub-sec-05 .link-group a {
    align-items: center;
    border-radius: var(--radius-full);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    justify-content: center;
    padding: var(--space-12-xs) var(--space-20-md);
}

.sub-sec-05 .link-group a:last-child {
    background: var(--color-ffffff-white);
    color: var(--color-22272B-gray-900);
}

.sub-sec-05 .link-group a:first-child {
    border: 1px solid var(--color-ffffff-white);
    color: var(--color-ffffff-white);
}

@media (min-width:992px) {
    .sub-sec-05 h3 {
        font-size: var(--font-title-24-lg);
    }

    .sub-sec-05 .link-group {
        gap: var(--space-16-sm);
    }

    .sub-sec-05 .link-group a {
        padding: var(--space-16-sm) 0;
        width: 240px;
    }
}

.sub-sec-06 {
    background: var(--color-F6F8FB-gray-200);
    gap: var(--space-40-xxl);
}

.sub-sec-07 {
    background: var(--color-F6F8FB-gray-200);
}

.metal-swiper-wrap {
    position: relative;
}

.metal-swiper-wrap>img {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    z-index: 2;
}

.metal-swiper .swiper-slide {
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-D4DCE5-gray-500);
    border-radius: var(--radius-20-xl);
    padding: 28px var(--space-24-lg);
}

.metal-swiper .swiper-slide-img {
    align-items: center;
    display: flex;
    height: 240px;
    justify-content: center;
    position: relative;
    width: 100%;
}

.metal-swiper .swiper-slide-img::after {
    background: rgba(255, 255, 255, 0.50);
    backdrop-filter: blur(10px);
    content: '';
    display: inline-block;
    height: 240px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.metal-swiper .swiper-slide h6 {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
    margin: var(--space-20-md) 0 var(--space-4-min) 0;
    text-align: center;
    width: 100%;
}

.metal-swiper .swiper-slide h5 {
    color: var(--color-0283FD-primary);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
    text-align: center;
    width: 100%;
}

@media (min-width:992px) {
    .metal-swiper-wrap>img {
        width: 340px;
    }

    .metal-swiper .swiper-slide h6 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .metal-swiper .swiper-slide h5 {
        font-size: var(--font-title-24-lg);
        line-height: 32px;
    }
}

.metal-detector-comparison {
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-D4DCE5-gray-500);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-40-xxl);
    height: 100%;
    margin: 0 auto;
    max-width: 512px;
    padding: var(--space-48-threexl) var(--space-20-md) var(--space-20-md) var(--space-20-md);
    position: relative;
    width: 100%;
}

.metal-detector-comparison span {
    background: var(--color-22272B-gray-900);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    left: 50%;
    padding: var(--space-8-xxs) var(--space-24-lg);
    position: absolute;
    transform: translateX(-50%);
    top: -20px;
}

.metal-detector-comparison .top {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.metal-detector-comparison .top h3 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-600-semibold);
    line-height: 28px;
}

.metal-detector-comparison .top p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

.metal-detector-comparison img {
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
}

.metal-detector-comparison .bot {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.metal-detector-comparison .bot h5 {
    align-items: center;
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    gap: var(--space-8-xxs);
    line-height: 20px;
}

.metal-detector-comparison .bot h5 img {
    max-width: unset;
    width: max-content;
}

.metal-detector-comparison .bot ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    width: 100%;
}

.metal-detector-comparison .bot ul li {
    background: rgba(241, 244, 249, 0.70);
    border-radius: var(--radius-12-md);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-15-sm);
    font-weight: var(--font-500-medium);
    line-height: 22px;
    padding: var(--space-12-xs);
    text-align: center;
    width: 100%;
}

.metal-detector-comparison.primary {
    background: var(--color-ffffff-white);
    border: 2px solid var(--color-0283FD-primary);
}

.metal-detector-comparison.primary span {
    background: var(--color-0283FD-primary);
}

.metal-detector-comparison.primary img {
    margin: 0 auto;
    max-width: 160px;
}

@media (min-width:992px) {
    .sub-sec-07 .container {
        gap: var(--space-60-fourxl);
        max-width: 800px;
    }

    .metal-detector-comparison {
        gap: var(--space-60-fourxl);
        /* max-width: 100%; */
    }

    .metal-detector-comparison span {
        font-size: var(--font-16-md);
        line-height: 24px;
        padding: var(--space-8-xxs) var(--space-32-xl);
    }

    .metal-detector-comparison .top p {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .metal-detector-comparison .bot ul {
        flex-direction: row;
    }

    .metal-detector-comparison .bot ul li {
        padding: var(--space-16-sm) 0;
    }
}

.metal-detector-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.metal-detector-item .top ul {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-12-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
    padding: var(--space-20-md);
}

.metal-detector-item .top ul li::before {
    background: url(../imgs/ico/i-check-black.svg);
    content: '';
    display: inline-block;
    height: 24px;
    width: 24px;
}

.metal-detector-item .top ul li {
    align-items: center;
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    gap: var(--space-4-min);
    line-height: 24px;
}

.metal-detector-item>img {
    margin: 0 auto;
    width: max-content;
}

.metal-detector-item .bot {
    align-items: center;
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-D4DCE5-gray-500);
    border-radius: var(--radius-12-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-24-lg);
    padding: var(--space-24-lg);
}

.metal-detector-item .bot.primary {
    border-color: var(--color-0283FD-primary);
}

.metal-detector-item .bot .bot-top {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.metal-detector-item .bot .bot-top span {
    color: var(--color-0283FD-primary);
    font-size: var(--font-14-xs);
    font-weight: var(--font-600-semibold);
    line-height: 20px;
}

.metal-detector-item .bot .bot-top h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-18-lg);
    font-weight: var(--font-600-semibold);
    line-height: 26px;
    margin: var(--space-4-min) 0 var(--space-16-sm) 0;
}

.metal-item-swiper {
    margin: 0 auto;
    max-width: 300px;
    width: 100%;
}

.metal-item-swiper .swiper-slide {
    align-items: center;
    background: #f9f9f9;
    border-radius: var(--radius-12-md);
    display: flex;
    height: 260px;
    justify-content: center;
}

.metal-item-swiper-01 .slide-01 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-03.svg);
}

.metal-item-swiper-01 .slide-02 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-04.svg);
}

.metal-item-swiper-01 .slide-03 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-05.svg);
}

.metal-item-swiper-01 .slide-04 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-06.svg);
}

.metal-item-swiper-02 .slide-01 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-07.svg);
}

.metal-item-swiper-02 .slide-02 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-08.svg);
}

.metal-item-swiper-02 .slide-03 {
    background: #f9f9f9 url(../imgs/sub/metal-detector/cont-06-09.svg);
}


.metal-item-swiper .swiper-button-next::after,
.metal-item-swiper .swiper-button-prev::after {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
}

.metal-detector-item .bot .bot-bot {
    width: 100%;
}

.metal-detector-item .bot .bot-bot ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.metal-detector-item .bot .bot-bot ul li {
    align-items: center;
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    gap: var(--space-8-xxs);
}

.metal-desc {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: center;
}

@media (min-width:992px) {
    .metal-detector-item .bot {
        padding: var(--space-40-xxl);
    }

    .metal-detector-item .bot .bot-top span {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .metal-detector-item .bot .bot-top h5 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .metal-item-swiper .swiper-slide {
        background-size: 80% !important;
        background-repeat: no-repeat;
    }
}

.sub-sec-08 {
    /* background: var(--color-F6F8FB-gray-200); */
}

/* .sub-sec-08 .container {
    max-width: 800px;
} */

.sub-sec-08 .link-group,
.sub-sec-07 .link-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    justify-content: center;
}

.sub-sec-08 .link-group a,
.sub-sec-07 .link-group a {
    align-items: center;
    border-radius: var(--radius-full);
    flex: 1;
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    gap: var(--space-4-min);
    justify-content: center;
    padding: var(--space-12-xs) var(--space-20-md);
}

.sub-sec-08 .link-group a:first-child,
.sub-sec-07 .link-group a:first-child {
    border: 1px solid var(--color-22272B-gray-900)
}

.sub-sec-08 .link-group a:last-child,
.sub-sec-07 .link-group a:last-child {
    background: var(--color-22272B-gray-900);
    color: var(--color-ffffff-white);
}

.deal-progress-bar {
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-40-xxl) var(--space-32-xl);
}

.deal-progress-bar h6 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.deal-progress-bar .img-group .mo-img {
    max-width: 260px;
    margin: 0 auto;
}

.deal-progress-bar .deal-info {
    align-items: center;
    border: 1px solid var(--color-B1BBC9-gray-600);
    border-radius: var(--radius-12-md);
    display: flex;
    gap: var(--space-8-xxs);
    max-width: 260px;
    margin: 0 auto;
    padding: var(--space-16-sm) var(--space-20-md);
    width: 100%;
}

.deal-progress-bar .deal-info p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.deal-progress-bar .deal-info b {
    color: var(--color-0283FD-primary);
    font-size: var(--font-14-xs);
    font-weight: var(--font-700-bold);
    line-height: 20px;
    margin: 0 0 0 auto;
}

@media (min-width:992px) {
    .sub-sec-08 .container {
        gap: var(--space-60-fourxl);
    }

    .sub-sec-08 .link-group,
    .sub-sec-07 .link-group {
        flex-direction: row;
        gap: var(--space-16-sm);
        max-width: 500px;
        margin: 0 auto;
    }

    .sub-sec-08 .link-group a,
    .sub-sec-07 .link-group a {
        font-size: var(--font-16-md);
        padding: var(--space-16-sm) 0;
        width: 240px;
    }

    .deal-progress-bar {
        padding: var(--space-48-threexl);
    }

    .deal-progress-bar h6 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .deal-progress-bar .img-group .pc-img {
        max-width: 400px;
        margin: 0 auto;
    }

    .deal-progress-bar .deal-info {
        max-width: 400px;
        margin: 0 auto;
    }

    .deal-progress-bar .deal-info p {
        font-size: var(--font-15-sm);
        line-height: 22px;
    }

    .deal-progress-bar .deal-info b {
        font-size: var(--font-15-sm);
        line-height: 22px;
    }
}

.sub-sec-09 {
    align-items: center;
    background: linear-gradient(180deg, var(--color-0283FD-primary, #0283FD) 28.86%, var(--color-C9E6FF-primary-20, #C9E6FF) 100%);
    display: flex;
    flex-direction: column;
    height: 560px;
    overflow: hidden;
    position: relative;
}

.sub-sec-09 .container {
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
    margin: 160px 0 0 0;
}

.sub-sec-09 h1 {
    color: var(--color-ffffff-white);
    text-align: left;
}

.sec-cont-09 {
    align-items: center;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    position: absolute;
    right: -80px;
}

.sec-cont-09 ul {
    align-items: center;
    display: flex;
    gap: var(--space-8-xxs);
}

.sec-cont-09 ul li {
    background: linear-gradient(270deg, #FFF -4.55%, rgba(153, 153, 153, 0.00) 100%);
    border-radius: var(--radius-full);
    height: 46px;
    min-width: 132px;
    opacity: 0.2;
    padding: var(--space-12-xs) var(--space-24-lg);
    width: max-content;
}

.sec-cont-09 ul li:first-child {
    background: linear-gradient(270deg, #FFF -4.55%, rgba(153, 153, 153, 0.00) 100%);
}

.sec-cont-09 ul li:last-child {
    background: var(--color-ffffff-white);
}

.sec-cont-09 ul li.show {
    animation: blink 3s infinite;
    background: var(--color-ffffff-white);
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md-xl);
    font-weight: var(--font-500-medium);
    line-height: 24px;
    opacity: 1;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }
}

@media (min-width:992px) {
    .sub-sec-09 {
        height: 100vh;
    }

    .sub-sec-09 .container {
        gap: 0;
        margin: 200px 0 0 0;
    }

    .sec-cont-09 {
        zoom: 1.5;
        right: 80px;
    }
}

/* sub-sec-10 */
.sub-sec-10 .sec-cont-list {
    align-items: center;
    background: #f9f9f9;
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-24-lg);
}

.sub-sec-10 .sec-cont-list ul {
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-full);
    display: flex;
}

.sub-sec-10 .sec-cont-list ul li {
    align-items: center;
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-D4DCE5-gray-500);
    border-radius: var(--radius-full);
    display: flex;
    height: 120px;
    justify-content: center;
    width: 120px;
}

.sub-sec-10 .sec-cont-list ul.first {
    padding: var(--space-12-xs) var(--space-24-lg);
}

.sub-sec-10 .sec-cont-list ul.first li {
    margin: 0 -8px;
}

.sub-sec-10 img {
    /* transform: rotate(90deg); */
}

.sub-sec-10 .mo-img {
    max-width: 400px;
    margin: 0 auto;
}

.sub-sec-10 .sec-cont-list ul.last {
    background: #C9E6FF;
    gap: var(--space-20-md);
    padding: var(--space-12-xs);
}

.sub-sec-10 .sec-cont-list ul.last li {
    border: 1px solid var(--color-0283FD-primary);
    color: var(--color-0283FD-primary);
}

.sec-cont-10 {
    border: 1px solid var(--color-E8ECF5-gray-400);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    margin: 0 0 72px 0;
    padding: var(--space-20-md);
    position: relative;
}

.sec-cont-10::after {
    bottom: -72px;
    background: url(../imgs/sub/haccp-service/cont-10-01.svg);
    background-size: cover;
    content: '';
    display: inline-block;
    height: 72px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 12px;
}

.sec-cont-10 dl {
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.sec-cont-10 dl dt {
    align-items: center;
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-12-md);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-15-sm);
    font-weight: var(--font-600-semibold);
    display: flex;
    justify-content: center;
    padding: var(--space-12-xs);
}

.sec-cont-10 dl dd {
    border: 1px solid var(--color-0283FD-primary);
    border-radius: var(--radius-12-md);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-15-sm);
    font-weight: var(--font-500-medium);
    padding: var(--space-16-sm);
    text-align: center;
}

.sec-cont-10 dl dd span {
    color: var(--color-0283FD-primary);
}

.sub-sec-10 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sub-sec-10 .sec-cont-text h3 span {
    color: var(--color-0283FD-primary);
}

@media (min-width:992px) {
    .sec-cont-10 .sec-title-group {
        gap: var(--space-20-md);
    }

    .sub-sec-10 .pc-img {
        margin: 0 auto;
        max-width: 1000px;
    }

    .sub-sec-10 .sec-cont-list {
        flex-direction: row;
        justify-content: center;
        padding: var(--space-60-fourxl);
        margin: 0 auto;
        max-width: 1000px;
        width: 100%;
    }

    .sub-sec-10 .sec-cont-list ul li {
        height: 160px;
        width: 160px;
    }

    .sub-sec-10 .sec-cont-list ul.first {
        padding: var(--space-16-sm) var(--space-24-lg);
    }

    .sub-sec-10 img {
        transform: rotate(0deg);
    }

    .sub-sec-10 .sec-cont-list ul.last {
        padding: var(--space-16-sm);
    }

    .sec-cont-10 {
        margin: 0 auto 72px auto;
        max-width: 1000px;
        width: 100%;
    }

    .sec-cont-10 dl {
        flex-direction: row;
        gap: var(--space-20-md);
    }

    .sec-cont-10 dl dt {
        font-size: var(--font-16-md);
        flex: 0 0 auto;
        line-height: 24px;
        padding: var(--space-24-lg) 0;
        text-align: center;
        width: 200px;
    }

    .sec-cont-10 dl dd {
        flex: 1;
        font-size: var(--font-16-md);
        line-height: 24px;
        padding: var(--space-24-lg) 0;
        text-align: center;
    }
}

/* sub-sec-11 */
.sub-sec-11 {
    background: #f9f9f9;
}

.sub-sec-11 img {
    max-width: max-content;
}

.sec-cont-11 {
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
}

.sec-cont-11 li {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: var(--space-20-md) 0 0 0;
    padding: var(--space-40-xxl) var(--space-24-lg) var(--space-24-lg) var(--space-24-lg);
    position: relative;
}

.sec-cont-11 li span {
    background: var(--color-22272B-gray-900);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-15-sm);
    font-weight: var(--font-500-medium);
    line-height: 22px;
    left: 24px;
    padding: var(--space-8-xxs) var(--space-16-sm);
    position: absolute;
    top: -16px;
}

.sec-cont-11 li dl {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.sec-cont-11 li dl dt {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
}

.sec-cont-11 li dl dd {
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
}

@media (min-width:992px) {
    .sec-cont-11 {
        flex-direction: row;
    }

    .sec-cont-11 li {
        flex: 1;
        padding: var(--space-40-xxl) var(--space-32-xl) var(--space-32-xl) var(--space-32-xl);
    }

    .sec-cont-11 li span {
        left: 32px;
    }

    .sub-sec-11 img {
        margin: 0 auto;
    }
}

/* sub-sec-12 */
.sub-sec-12 .sec-cont-img ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.sub-sec-12 .sec-cont-img ul li {
    align-items: center;
    background: #f9f9f9;
    border-radius: var(--radius-20-xl);
    display: flex;
    height: 256px;
    justify-content: center;
    position: relative;
}

.sub-sec-12 .sec-cont-img ul li:first-child::after {
    background: url(../imgs/sub/haccp-service/cont-12-03.svg);
    border-radius: var(--radius-full);
    bottom: -32px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
    content: '';
    display: inline-block;
    height: 48px;
    position: absolute;
    transform: rotate(90deg);
    width: 48px;
    z-index: 1;
}

.sub-sec-12 .sec-cont-img ul li:last-child {
    background: #E9F3FF;
}

.sub-sec-12 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sub-sec-12 h4 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-12 .sec-cont-point-text {
    align-items: center;
    background: var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    padding: var(--space-16-sm) var(--space-32-xl);
}

.sub-sec-12 .sec-cont-point-text h4 {
    color: var(--color-ffffff-white);
    font-weight: var(--font-500-medium);
}

.sub-sec-12 h2 span {
    color: var(--color-0283FD-primary);
}

.sec-cont-12 {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sec-cont-12 .sec-cont-item {
    align-items: flex-start;
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-16-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: var(--space-20-md);
}

.sec-cont-12 .sec-cont-item h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: left;
}

.sec-cont-12 .sec-cont-item h6 span {
    color: var(--color-22272B-gray-900);
    font-weight: var(--font-600-semibold);
}

.sec-cont-12 .sec-cont-item h6 b {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-700-bold);
}

.sec-cont-12 .sec-cont-item h6 b span {
    color: var(--color-0283FD-primary);
}

.sec-cont-12 .sec-cont-item h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
    text-align: left;
}

.sec-cont-12 .sec-cont-item img {
    margin: auto 0 0 auto;
}

.sec-cont-12 .cont-right {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8-xxs);
}

.sec-cont-12 .cont-left .sec-cont-item {
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-0283FD-primary);
    gap: var(--space-12-xs);
    height: 400px;
    justify-content: unset;
    padding: var(--space-24-lg) var(--space-20-md);
}

.sec-cont-12 .cont-left .sec-cont-item h6 {
    font-size: var(--font-18-lg);
    line-height: 26px;
}

.sec-cont-12 .cont-left .sec-cont-item h5 {
    color: var(--color-0283FD-primary);
    font-size: var(--font-title-24-lg);
    line-height: 32px;
    margin: var(--space-8-xxs) 0 0 0;
}

.sec-cont-12 .cont-left .sec-cont-item-box {
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-12-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: auto 0 0 0;
    padding: var(--space-16-sm);
    width: 100%;
}

.sec-cont-12 .cont-left .sec-cont-item-box p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-600-semibold);
    line-height: 20px;
}

.sec-cont-12 .cont-left .sec-cont-item-box h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-12-min);
    font-weight: var(--font-400-regular);
    line-height: 18px;
}

.sec-cont-12 .cont-left .sec-cont-item a {
    border-radius: var(--radius-full);
    background: var(--color-0283FD-primary);
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    padding: var(--space-12-xs);
    text-align: center;
    width: 100%;
}

.sec-cont-12 .cont-right li {
    height: 160px;
    width: calc(50% - 4px);
}

.sub-sec-12 .desc {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: center;
}

@media (min-width:992px) {
    .sub-sec-12 .sec-cont-img ul {
        flex-direction: row;
    }

    .sub-sec-12 .sec-cont-img ul li {
        flex: 1;
    }

    .sub-sec-12 .sec-cont-img ul li:first-child::after {
        bottom: unset;
        transform: rotate(0);
        right: -32px;
    }

    .sub-sec-12 .sec-cont-point-text {
        flex-direction: row;
        margin: 0 auto;
        padding: var(--space-20-md) var(--space-40-xxl);
        width: max-content;
    }

    .sub-sec-12 .sec-cont-point-text h4 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .sub-sec-12 h2 {
        line-height: 40px;
    }

    .sec-cont-12 {
        align-items: flex-end;
        flex-direction: row;
        justify-content: center;
    }

    .sec-cont-12 .cont-right {
        width: 368px;
    }

    .sec-cont-12 .cont-right li {
        height: 160px;
        width: 180px;
    }

    .sec-cont-12 .cont-left .sec-cont-item {
        height: 400px;
        padding: 28px var(--space-24-lg);
        width: 300px;
    }

    .sub-sec-12 .desc {
        font-size: var(--font-16-md);
    }
}

/* sub-sec-13 */
.sub-sec-13 {
    background: var(--color-22272B-gray-900);
}

.sub-sec-13 h2 {
    color: var(--color-ffffff-white);
}

.sub-sec-13 h5 {
    color: var(--color-F6F8FB-gray-200);
}

.sec-cont-13 {
    display: flex;
    flex-direction: column;
    gap: var(--space-24-lg);
}

.sec-cont-13 dl {
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-12-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    justify-content: center;
    padding: var(--space-8-xxs);
}

.sec-cont-13 dl dt {
    /* border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-12-md); */
    color: var(--color-ffffff-white);
    /* padding: var(--space-16-sm); */
    padding: var(--space-12-xs) 0 0 0;
    position: relative;
    text-align: center;
    width: 100%;
}

.sec-cont-13 dl img {
    height: 24px;
    transform: rotate(90deg);
    width: 24px;
}

.sec-cont-13 dl dd {
    border-color: var(--color-0283FD-primary);
    background: var(--color-0283FD-primary);
    border-radius: var(--radius-12-md);
    color: var(--color-ffffff-white);
    padding: var(--space-16-sm);
    position: relative;
    text-align: center;
    width: 100%;
}

.sec-cont-13 dl:first-child dd {
    border-color: var(--color-0283FD-primary);
    background: var(--color-0283FD-primary);
}

.sub-sec-13 h3 {
    color: var(--color-ffffff-white);
}

.sub-sec-13 .sec-cont-box {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-24-lg) var(--space-20-md);
}

.sub-sec-13 .sec-cont-box h5 {
    align-items: center;
    color: #f0d138;
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sub-sec-13 .sec-cont-box h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.sub-sec-13 .star {
    margin: 0 auto;
    width: max-content;
}

.sub-sec-13 .sec-cont-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.sub-sec-13 .sec-cont-item {
    background: #282C30;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    justify-content: flex-start;
    padding: var(--space-24-lg);
}

.sub-sec-13 .sec-cont-item h5 {
    font-weight: var(--font-600-semibold);
    text-align: left;
}

.sub-sec-13 .sec-cont-item h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: left;
}

.sub-sec-13 h1 {
    color: var(--color-ffffff-white);
}

@media (min-width:992px) {
    .sec-cont-13 {
        gap: var(--space-8-xxs);
        margin: 0 auto;
        max-width: 800px;
        width: 100%;
    }

    .sec-cont-13 dl {
        flex-direction: row;
        gap: var(--space-20-md);
    }

    .sec-cont-13 dl dt {
        flex: 0 0 auto;
        padding: var(--space-20-md) 0;
        text-align: center;
        width: 200px;
    }

    .sec-cont-13 dl img {
        transform: rotate(0deg);
    }

    .sec-cont-13 dl dd {
        align-items: center;
        display: flex;
        height: 80px;
        justify-content: center;
        padding: var(--space-20-md) 0;
        text-align: center;
    }

    .sec-cont-13 dl:first-child dd::after {
        background: url(../imgs/sub/haccp-service/cont-13-01.svg);
        background-size: cover;
        content: '';
        display: inline-block;
        height: 24px;
        left: 24px;
        position: absolute;
        top: 0;
        width: 24px;
    }

    .sub-sec-13 .sec-cont-box {
        gap: var(--space-12-xs);
        margin: 0 auto;
        max-width: 800px;
        padding: var(--space-40-xxl);
        width: 100%;
    }

    .sub-sec-13 .sec-cont-box h5 {
        font-size: var(--font-18-lg);
        flex-direction: row;
        line-height: 24px;
        justify-content: center;
    }

    .sub-sec-13 .sec-cont-box h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .sub-sec-13 .sec-title-group.gap-5 {
        gap: var(--space-20-md);
    }

    .sub-sec-13 .sec-cont-wrap {
        flex-direction: row;
        margin: 0 auto;
        max-width: 800px;
        width: 100%;
    }

    .sub-sec-13 .sec-cont-item {
        flex: 1;
        padding: var(--space-32-xl);
    }

    .sub-sec-13 .sec-cont-item h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .sub-sec-13 h1 {
        font-size: 32px;
        line-height: 48px;
    }
}

/* sub-sec-14 */
.sub-sec-14 {
    background: var(--color-F7FBFF-primary-5);
}

.sec-cont-14 {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.sec-cont-14 .sec-cont-item {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-32-xl);
    padding: var(--space-32-xl);
    position: relative;
}

.sec-cont-14 .sec-cont-item img {
    width: 100%;
}

.sec-cont-14 .sec-cont-item.left {
    flex-direction: column;
    height: 480px;
}

.sec-cont-14 .sec-cont-item.left img {
    bottom: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 268px;
}

.sec-cont-14 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sec-cont-14 .sec-cont-text span {
    border: 1px solid var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    color: var(--color-0283FD-primary);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    padding: 6px var(--space-12-xs);
    width: max-content;
}

.sec-cont-14 .sec-cont-text h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-18-lg);
    font-weight: var(--font-700-bold);
    line-height: 26px;
    text-align: left;
}

.sec-cont-14 .sec-cont-text h5 {
    font-size: var(--font-14-xs);
    line-height: 20px;
    text-align: left;
}

@media (min-width:992px) {
    .sec-cont-14 .sec-cont-item {
        align-items: center;
        flex-direction: row;
        gap: var(--space-60-fourxl);
        padding: var(--space-40-xxl) var(--space-80-fivexl);
    }

    .sec-cont-14 .sec-cont-item.left {
        flex-direction: row;
        height: 336px;
    }

    .sec-cont-14 .sec-cont-item.left img {
        bottom: -20px;
        left: unset;
        position: relative;
        transform: unset;
    }

    .sec-cont-14 .sec-cont-text h4 {
        font-size: var(--space-20-md);
        line-height: 28px;
    }

    .sec-cont-14 .sec-cont-text h5 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .sec-cont-14 .sec-cont-item.right {
        justify-content: space-between;
    }

    .sec-cont-14 .sec-cont-item.right img {
        width: max-content;
    }
}

/* sub-sec-15 */
.sec-cont-15 {
    border: 1px solid var(--color-F1F4F9-gray-300);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-32-xl) var(--space-24-lg);
}

.sec-cont-15 ul {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

.sec-cont-15 ul li {
    align-items: center;
    border-radius: var(--radius-full);
    background: rgba(2, 131, 253, 0.60);
    color: var(--color-ffffff-white);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    height: 160px;
    line-height: 24px;
    justify-content: center;
    text-align: center;
    width: 160px;
}

.sec-cont-15 ul::after {
    border-right: 1px dashed var(--color-0283FD-primary);
    content: '';
    display: inline-block;
    height: 60px;
    width: 0;
}

.sec-cont-15 ul li:nth-child(2) {
    margin: -20px;
}

.sec-cont-15-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sec-cont-15-text h4 {
    font-weight: var(--font-700-bold);
}

.sec-cont-15-text h4 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-15 .title-point {
    border: 1px solid var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    color: var(--color-0283FD-primary);
    margin: 0 0 var(--space-8-xxs) 0;
    padding: var(--space-8-xxs) var(--space-24-lg);
}

.sub-sec-15 h4 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-15 .sec-cont-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.sub-sec-15 .sec-cont-list li {
    align-items: center;
    background: var(--color-F7FBFF-primary-5);
    border-radius: var(--radius-20-xl);
    display: flex;
    gap: var(--space-20-md);
    padding: var(--space-24-lg);
}

.sub-sec-15 .sec-cont-list li img {
    height: 60px;
    width: 60px;
}

.sub-sec-15 .sec-cont-list li .sec-cont-list-text {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.sub-sec-15 .sec-cont-list li .sec-cont-list-text h4 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.sub-sec-15 .sec-cont-list li .sec-cont-list-text h5 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    text-align: left;
}

@media (min-width:992px) {
    .sec-cont-15 {
        padding: var(--space-60-fourxl);
    }

    .sec-cont-15 ul {
        flex-direction: row;
        justify-content: center;
        margin: 0 0 var(--space-60-fourxl) 0
    }

    .sec-cont-15 ul li {
        font-size: var(--font-20-xl);
        line-height: 28px;
        height: 200px;
        width: 200px;
    }

    .sec-cont-15 ul::after {
        bottom: -60px;
        position: absolute;
    }

    .sec-cont-15-text h5 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .sub-sec-15 .sec-cont-list {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sub-sec-15 .sec-cont-list li {
        gap: var(--space-32-xl);
        padding: var(--space-40-xxl);
        width: calc(50% - 6px);
    }

    .sub-sec-15 .sec-cont-list li img {
        height: 80px;
        width: 80px;
    }

    .sub-sec-15 .sec-cont-list li .sec-cont-list-text h4 {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }

    .sub-sec-15 .sec-cont-list li .sec-cont-list-text h5 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }
}

/* sub-sec-17 */
.sub-sec-17 {
    background: var(--color-F6F8FB-gray-200);
}

.sub-sec-17 .sec-title-group {
    gap: var(--space-8-xxs);
}

.sec-cont-17 {
    display: flex;
    flex-direction: column;
}

.sec-cont-17 .sec-cont-box {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--radius-28-threexl);
}

.sec-cont-17 .sec-cont-box h6 {
    color: var(--color-8995A1-gray-700);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.sec-cont-17 .sec-cont-box ul {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sec-cont-17 .sec-cont-box ul li {
    align-items: center;
    color: var(--color-8995A1-gray-700);
    display: flex;
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    gap: var(--space-8-xxs);
}

.sec-cont-17 .sec-cont-box.right {
    background: var(--color-0283FD-primary);
}

.sec-cont-17 .sec-cont-box.right h6 {
    color: var(--color-ffffff-white);
}

.sec-cont-17 .sec-cont-box.right ul li {
    color: var(--color-ffffff-white);
}

.sub-sec-17 h5 {
    color: var(--color-22272B-gray-900);
}

.sec-cont-haccp {
    align-items: center;
    background: var(--color-ffffff-white);
    border-radius: var(--radius-full);
    display: flex;
    gap: var(--space-12-xs);
    padding: var(--space-20-md) var(--space-32-xl) var(--space-20-md) var(--space-20-md);
}

.sec-cont-haccp h6 {
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: left;
}

.sec-cont-haccp h6 span {
    color: var(--color-0283FD-primary);
}

@media (min-width:992px) {
    .sub-sec-17 .container {
        max-width: 640px;
    }

    .sec-cont-17 {
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }

    .sec-cont-17 .sec-cont-box {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        gap: var(--space-16-sm);
        height: 100%;
        margin: 0 -10px;
        padding: var(--space-40-xxl);
    }

    .sec-cont-17 .sec-cont-box.right {
        border-radius: var(--radius-20-xl);
    }

    .sec-cont-haccp {
        gap: var(--space-32-xl);
        margin: 0 auto;
        max-width: 640px;
        padding: var(--space-20-md) var(--space-32-xl);
    }

    .sec-cont-haccp h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }
}

/* sub-sec-16 */
.sec-cont-16 {
    position: relative;
}

.sec-cont-16 span {
    background: var(--color-ffffff-white);
    border: 1px solid var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
    left: 50%;
    padding: var(--space-8-xxs) var(--space-16-sm);
    position: absolute;
    transform: translateX(-50%);
    width: max-content;
}

.sec-cont-16 ul {
    align-items: center;
    border: 1px solid var(--color-B1BBC9-gray-600);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-24-lg);
    margin: var(--space-20-md) 0 0 0;
    padding: var(--space-40-xxl) var(--space-24-lg);
}

.sec-cont-16 ul li {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-24-lg);
}

.sec-cont-16 ul li p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
    text-align: center;
}

.sec-cont-16-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.sec-cont-16-text p {
    align-items: center;
    background: var(--color-8995A1-gray-700);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    display: flex;
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    justify-content: center;
    line-height: 20px;
    padding: var(--space-8-xxs) var(--space-32-xl);
    width: max-content;
}

.sec-cont-16-text h6 {
    font-size: var(--font-15-sm);
    font-weight: var(--font-500-medium00);
    text-align: left;
    line-height: 24px;
}

.sec-cont-16-text h6 span {
    color: var(--color-0283FD-primary);
}

.sec-cont-16-text.right p {
    background: var(--color-0283FD-primary);
}

.sec-cont-16-text dl {
    align-items: flex-start;
    display: flex;
    gap: var(--space-8-xxs);
}

.sec-cont-16-text dl dt {
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
}

.sec-cont-16-text dl dd {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
}

.sec-cont-16-text dl dd h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-15-sm);
    font-weight: var(--font-600-semibold);
    line-height: 22px;
}

@media (min-width:992px) {
    .sec-cont-16 ul {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-80-fivexl);
    }

    .sec-cont-16-text p {
        font-size: var(--font-16-md);
    }

    .sec-cont-16-text h6 {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }

    .sec-cont-16-text dl dt,
    .sec-cont-16-text dl dd h5 {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }
}

/* sub-sec-18 */
.sub-sec-18 {
    background: var(--color-0283FD-primary);
}

.sub-sec-18 h2 {
    color: var(--color-ffffff-white);
}

.sub-sec-18 a {
    align-items: center;
    border: 1px solid var(--color-ffffff-white);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: 174px;
    padding: var(--space-12-xs) var(--space-20-md);
    width: 100%;
}

.sub-sec-18 img {
    display: none;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (min-width:992px) {
    .sub-sec-18 .container {
        position: relative;
    }

    .sub-sec-18 .sec-title-group {
        flex-direction: row;
    }

    .sub-sec-18 h2 {
        font-size: var(--font-title-24-lg);
        line-height: 32px;
        text-align: left;
    }

    .sub-sec-18 img {
        animation: float 2.5s ease-in-out infinite;
        display: block;
        max-width: 270px;
        position: absolute;
        right: -20px;
    }

    .sub-sec-18 a {
        margin: 0 auto 0 0;
        padding: var(--space-16-sm) var(--space-32-xl);
    }
}

/* sub-sec-19 */
.sec-cont-19 ul {
    border: 1px solid rgba(2, 131, 253, 0.50);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    padding: var(--space-20-md);
}

.sec-cont-19 ul li {
    align-items: center;
    background: rgba(2, 131, 253, 0.05);
    border-radius: var(--radius-12-md);
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    gap: var(--space-8-xxs);
    line-height: 20px;
    padding: var(--space-16-sm);
}

.sec-cont-19 ul li:first-child {
    background: none;
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    padding: var(--space-12-xs);
    justify-content: center;
}

.sub-sec-19 h4 {
    color: var(--color-687481-gray-800);
    font-weight: var(--font-600-semibold);
    text-align: center;
}

.sub-sec-19 h4 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-19 .sec-cont-ex {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
}

.sub-sec-19 .sec-cont-ex p {
    align-items: center;
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    width: 100%;
}

.sub-sec-19 .sec-cont-ex p span {
    background: var(--color-F7FBFF-primary-5);
    border-radius: var(--radius-full);
    color: var(--color-0283FD-primary);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 22px;
    padding: var(--space-4-min) var(--space-16-sm);
    width: max-content;
}

.sub-sec-19 .sec-cont-ex ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    width: 100%;
}

.sub-sec-19 .sec-cont-ex ul li {
    align-items: center;
    background: var(--color-F6F8FB-gray-200);
    border-radius: var(--radius-12-md);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    display: flex;
    gap: var(--space-8-xxs);
    line-height: 20px;
    padding: var(--space-20-md);
}

@media (min-width:992px) {
    .sub-sec-19 .container {
        position: relative;
    }

    .sub-sec-19 .sec-title-group {
        align-items: flex-start;
        gap: 28px;
        justify-content: flex-start;
    }

    .sub-sec-19 .sec-title-group h2 {
        text-align: left;
    }

    .sec-cont-19 ul {
        gap: var(--space-12-xs);
        position: absolute;
        right: var(--space-24-lg);
        top: 56px;
        width: 452px;
    }

    .sec-cont-19 ul li {
        font-size: var(--font-16-md);
        line-height: 24px;
        padding: var(--space-20-md) 28px;
    }

    .sec-cont-19 ul li:first-child {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }

    .sub-sec-19 h4 {
        text-align: left;
    }

    .sub-sec-19 .sec-cont-ex p {
        flex-direction: row;
    }

    .sub-sec-19 .sec-cont-ex ul {
        flex-direction: row;
    }

    .sub-sec-19 .sec-cont-ex ul li {
        flex: 1;
    }
}

.sub-sec-20 {
    background: var(--color-22272B-gray-900);
}

.sub-sec-20 h3 {
    font-weight: var(--font-500-medium);
}

.sub-sec-20 h3 b {
    font-weight: var(--font-800-extrabold);
}

.sub-sec-20 .link-group {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    justify-content: center;
}

@media (min-width:992px) {
    .sub-sec-20 .link-group {
        flex-direction: row;
        gap: var(--space-16-sm);
        max-width: 500px;
        margin: 0 auto;
    }
}

.sub-sec-21 .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}

.sub-sec-21 img {
    border-radius: var(--radius-12-md);
    width: 100%;
}

.sub-sec-21 a {
    align-items: center;
    border: 1px solid var(--color-22272B-gray-900);
    border-radius: var(--radius-full);
    color: var(--color-22272B-gray-900);
    display: flex;
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    justify-content: center;
    margin: 0 auto;
    padding: var(--space-16-sm) var(--space-40-xxl);
    width: max-content;
}

.sub-sec-21 .more {
    display: none;
}

.sub-sec-21 .more.active {
    display: block;
}

.sub-sec-22 {
    background: var(--color-2897FF-primary-text);
    overflow: hidden;
    position: relative;
    padding-top: 160px;
}

.sub-sec-22::after {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10000px;
    content: '';
    display: inline-block;
    height: 1000px;
    left: -100px;
    top: 260px;
    position: absolute;
    width: 1000px;
}

.sub-sec-22 h1 {
    color: var(--color-ffffff-white);
    text-align: center;
}

.sub-sec-22 h1 span {
    background: var(--color-ffffff-white);
    color: var(--color-2897FF-primary-text);
    padding: var(--space-4-min);
}

.sub-cont-22 {
    display: flex;
    gap: var(--space-20-md);
    justify-content: center;
    position: relative;
    z-index: 2;
}

.sub-cont-22 li {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-12-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
    height: 100%;
    margin: var(--space-60-fourxl) 0 0 0;
    max-width: 168px;
    padding: var(--space-20-md);
    position: relative;
    width: 100%;
}

.sub-cont-22 li:nth-child(2) {
    margin: var(--space-20-md) 0 0 0;
}

.sub-cont-22 li::after {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-full);
    content: '';
    display: inline-block;
    height: 8px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    top: -20px;
    width: 8px;
    z-index: 1;
}

.sub-cont-22 li:nth-child(3),
.sub-cont-22 li:nth-child(4),
.sub-cont-22 li:nth-child(5) {
    display: none;
}

.sub-cont-22 li span {
    color: var(--color-0283FD-primary);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.sub-cont-22 li h5 {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 22px;
    text-align: left;
}

.sub-cont-22 li:first-child h5 {
    text-decoration: none;
}

.sub-sec-22 h5 {
    color: var(--color-ffffff-white);
    position: relative;
    text-align: center;
    z-index: 2;
}

.sub-sec-22 h2 {
    color: var(--color-ffffff-white);
    position: relative;
    text-align: center;
    z-index: 2;
}

.sub-sec-22 h2 span {
    background: var(--color-ffffff-white);
    color: var(--color-2897FF-primary-text);
    display: inline-block;
    margin: 0 var(--space-4-min) 0 0;
    padding: 0 var(--space-4-min);
    width: 100px;
}

.sub-sec-22 .sec-cont-box {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-20-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    max-width: 518px;
    margin: 0 auto;
    padding: var(--space-24-lg) var(--space-20-md);
    position: relative;
    text-align: center;
    z-index: 2;
}

.sub-sec-22 .sec-cont-box img {
    animation: blink 1s infinite;
}

.sub-sec-22 .sec-cont-box h5 {
    align-items: center;
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
}

.sub-sec-22 .sec-cont-box h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

@media (min-width:768px) {
    .sub-sec-22 h2 span {
        width: 140px;
    }
}

@media (min-width:992px) {
    .sub-sec-22 {
        padding-top: 240px;
    }

    .sub-sec-22 .container {
        gap: var(--space-80-fivexl);
    }

    .sub-sec-22::after {
        height: 3000px;
        left: -400px;
        top: 360px;
        width: 3000px;
    }

    .sub-cont-22 li {
        margin: 150px 0 0 0;
        padding: var(--space-32-xl);
    }

    .sub-cont-22 li:nth-child(2) {
        margin: 90px 0 0 0;
    }

    .sub-cont-22 li:nth-child(3),
    .sub-cont-22 li:nth-child(4),
    .sub-cont-22 li:nth-child(5) {
        display: flex;
    }

    .sub-cont-22 li:nth-child(3) {
        margin: 120px 0 0 0;
    }

    .sub-cont-22 li:nth-child(4) {
        margin: 48px 0 0 0;
    }

    .sub-cont-22 li:nth-child(5) {
        margin: 0;
    }

    .sub-sec-22 h5 {
        text-align: center;
    }

    .sub-sec-22 h2 span {
        width: 168px;
    }

    .sub-sec-22 .sec-cont-box {
        gap: var(--space-12-xs);
        margin: 0 auto;
        max-width: 800px;
        padding: var(--space-40-xxl);
        width: 100%;
    }

    .sub-sec-22 .sec-cont-box h5 {
        font-size: var(--font-18-lg);
        flex-direction: row;
        line-height: 24px;
        justify-content: center;
    }

    .sub-sec-22 .sec-cont-box h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

}

/* sub-sec-23 */
.sub-sec-23 {
    background: var(--color-22272B-gray-900);
    padding-bottom: 0;
}

.sub-sec-23 .row {
    --bs-gutter-y: 60px;
}

.sub-sec-23 .sec-title-group {
    gap: var(--space-16-sm);
}

.sub-sec-23 h2 {
    color: var(--color-ffffff-white);
    text-align: left;
    width: 100%;
}

.sub-sec-23 h5 {
    color: var(--color-ffffff-white);
    text-align: left;
    width: 100%;
}

.sub-sec-23 .sec-cont-img {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
}

.sub-sec-23 .img-blue {
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-28-threexl);
    max-width: 454px;
    position: relative;
}

.sub-sec-23 .img-blue::after {
    border-radius: 40px;
    background: rgba(40, 44, 48, 0.20);
    backdrop-filter: blur(2.5px);
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

.sub-sec-23 .img-blue img {
    max-width: 454px;
    width: 100%;
}

.sub-sec-23 .sec-cont-img p {
    color: var(--color-ffffff-white);
    font-size: var(--font-12-min);
    font-weight: var(--font-500-medium);
    line-height: 18px;
    max-width: 454px;
    text-align: center;
    width: 100%;
}

.sub-sec-23 h3 {
    color: var(--color-ffffff-white);
}

.sec-cont-23 {
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
}

.sec-cont-23 li {
    align-items: center;
    background: var(--color-ffffff-white);
    border-radius: var(--radius-12-md);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    gap: var(--space-8-xxs);
    padding: var(--space-20-md);
}

@media (min-width:992px) {
    .sub-sec-23 .row {
        align-items: center;
    }

    .sub-sec-23 .container {
        gap: var(--space-120-sixxl);
    }

    .sub-sec-23 .sec-cont-img p {
        font-size: var(--font-14-xs);
        line-height: 20px;
    }

    .sub-sec-23 h3 span {
        position: relative;
        z-index: 100;
    }

    .sub-sec-23 h3 span::after {
        background: var(--color-ffffff-white);
        content: '';
        filter: blur(15px);
        display: inline-block;
        height: 20px;
        left: 50%;
        position: absolute;
        width: 20px;
    }

    .sec-cont-23 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sec-cont-23 li {
        font-size: var(--font-18-lg);
        padding: var(--space-32-xl);
        width: calc(50% - 8px);
    }
}

/* sub-sec-24 */
.sub-sec-24 {
    background: url(../imgs/sub/guide-compare/cont-24-01.png);
    background-size: cover;
    background-position: right -160px top 0px;
    position: relative;
    padding-top: 300px;
}

.sec-cont-24 {
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
    position: relative;
    z-index: 2;
}

.sec-cont-24 dl {
    background: #282c30;
    border-radius: var(--radius-12-md);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
    padding: var(--space-20-md);
}

/* .sec-cont-24 dl dt {
    color: var(--color-687481-gray-800);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    text-decoration: line-through;
} */

.sec-cont-24 dl dt {
    color: var(--color-F6F8FB-gray-200);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: max-content;
}

/* 가짜 strike-through 선 */
.sec-cont-24 dl.dt-strike dt::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    background: #FF3030;
    transform: translateY(-50%);
    width: 0;
    animation: drawLine 0.4s ease-out forwards;
}

@keyframes drawLine {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.sec-cont-24 dl.dt-colored dt {
    color: var(--color-687481-gray-800);
}

.sec-cont-24 dl dd {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.sec-cont-24 dl dd.typing {
    visibility: hidden;
    white-space: normal;
    min-height: 48px;
}

.sub-sec-24 h1 {
    color: var(--color-ffffff-white);
}

@media (min-width:992px) {
    .sub-sec-24 {
        padding-top: 340px;
        background-position: right 0px top 0;
    }

    .sub-sec-24 .container {
        gap: var(--space-120-sixxl);
    }

    .sec-cont-24 {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sec-cont-24 dl {
        gap: var(--space-12-xs);
        padding: var(--space-32-xl);
        width: calc(50% - 8px);
    }

    .sec-cont-24 dl dt,
    .sec-cont-24 dl dd {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }

    .sub-sec-24 h1 {
        font-size: 40px;
        line-height: 60px;
    }
}

@media (min-width:1400px) {
    .sub-sec-24 {
        padding-top: 400px;
    }
}

@media (min-width:1600px) {
    .sub-sec-24 {
        padding-top: 500px;
    }
}

/* sub-sec-25 */
.sub-sec-25 {
    background: linear-gradient(180deg, #319BFF 0%, #ECF6FF 76%, rgba(255, 255, 255, 0.20) 86%);
}

.sub-sec-25 ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.sub-sec-25 ul li {
    background: var(--color-ffffff-white);
    backdrop-filter: blur(5px);
    box-shadow: 0px 0px 20px 0px rgba(0, 71, 148, 0.20);
    border-radius: var(--radius-28-threexl);
    display: flex;
    flex-direction: column;
    gap: var(--space-4-min);
    padding: var(--space-20-md) var(--space-24-lg);
    position: relative;
}

.sub-sec-25 ul li img {
    height: 40px;
    position: absolute;
    top: -20px;
    right: 20px;
    width: 40px;
}

.sub-sec-25 ul li:nth-child(2) img {
    right: unset;
    left: 20px;
}

.sub-sec-25 ul li:nth-child(3) img {
    bottom: -12px;
    right: 40px;
    top: unset;
}

.sub-sec-25 ul li h4 {
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    text-align: left;
}

.sub-sec-25 ul li h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
    text-align: left;
}

.sub-sec-25 h1 {
    color: var(--color-ffffff-white);
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.10);
}

.sub-sec-25 .sec-cont-img {
    display: flex;
    justify-content: center;
    gap: var(--space-4-min);
    position: relative;
}

.sub-sec-25 .sec-cont-img .toast-msg {
    background: var(--color-ffffff-white);
    border-radius: var(--radius-full);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    font-size: var(--font-title-20-md);
    font-weight: var(--font-700-bold);
    display: none;
    padding: var(--space-20-md) var(--space-60-fourxl);
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    width: max-content;
}

.sub-sec-25 .sec-cont-img img {
    zoom: 0.5;
}

.sub-sec-25 .sec-cont-img .img-01 {
    margin: 0 0 auto 0;
}

.sub-sec-25 .sec-cont-img .img-03 {
    margin: 0 0 0 var(--space-20-md);
}


@keyframes shake-small {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes shake-big {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }

    100% {
        transform: translateX(0);
    }
}

.sub-sec-25 .sec-cont-img .img-01,
.sub-sec-25 .sec-cont-img .img-03 {
    animation: none;
    /* 빠르게 작게 흔들 */
}

.sub-sec-25 .sec-cont-img .img-02 {
    animation: none;
    /* 느리게 좌우 흔들 */
}

/* .sub-sec-25 .sec-cont-img .img-01,
.sub-sec-25 .sec-cont-img .img-03 {
    animation: shake-small 0.3s infinite;
}

.sub-sec-25 .sec-cont-img .img-02 {
    animation: shake-big 0.8s infinite;
} */

.sub-sec-25 .sec-cont-25 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-32-xl);
}

.sub-sec-25 .sec-cont-25 span {
    background: var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
    padding: var(--space-8-xxs) var(--space-20-md);
}

.sub-sec-25 .sec-cont-time {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
}

.sub-sec-25 .sec-cont-time p {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.sub-sec-25 .sec-cont-time h1 {
    animation: blink 1s infinite;
    /* 1초 간격으로 깜빡깜빡 */
    color: var(--color-22272B-gray-900);
    font-size: 60px;
    font-weight: var(--font-900-black);
    line-height: 60px;
    text-shadow: none;
}

.sub-sec-25 .sec-cont-time h1.time-out {
    color: var(red);
}

.blink {
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}


@media (min-width:992px) {
    .sub-sec-25 .container {
        gap: var(--space-120-sixxl);
        max-width: 960px;
    }

    .sub-sec-25 h1 {
        font-size: 40px;
        line-height: 60px;
    }

    .sub-sec-25 ul li {
        gap: var(--space-8-xxs);
        min-width: 600px;
        position: relative;
        width: max-content;
    }

    .sub-sec-25 ul li:nth-child(1) {
        border-radius: 80px 80px 0px 80px;
        padding: 28px 0 28px 100px;
    }

    .sub-sec-25 ul li:nth-child(1) img {
        top: -36px;
        right: 92px;
    }

    .sub-sec-25 ul li:nth-child(2) {
        border-radius: 80px;
        margin: -40px 0 -30px auto;
        padding: 28px 0 28px 100px;
    }

    .sub-sec-25 ul li:nth-child(2) img {
        top: -36px;
        left: unset;
        right: 80px;
    }

    .sub-sec-25 ul li:nth-child(3) {
        border-radius: 80px 80px 0px 80px;
        margin: auto;
        padding: 28px 0 28px 164px;
    }

    .sub-sec-25 ul li:nth-child(3) img {
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
        right: unset;
    }

    .sub-sec-25 ul li h4 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .sub-sec-25 ul li h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .sub-sec-25 ul li img {
        height: 92px;
        width: 92px;
    }

    .sub-sec-25 .sec-cont-img img {
        zoom: 1;
    }

    .sub-sec-25 .sec-cont-img .toast-msg {
        font-size: var(--font-title-24-lg);
        font-weight: var(--font-700-bold);
        padding: var(--space-24-lg) var(--space-60-fourxl);
    }

    .sub-sec-25 .sec-cont-25 span {
        padding: var(--space-12-xs) var(--space-40-xxl);
    }

    .sub-sec-25 .sec-cont-time p {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .sub-sec-25 .sec-cont-time h1 {
        font-size: 90px;
        line-height: 90px;
    }
}

/* sub-sec-26 */
.sub-sec-26 .img-02 {
    zoom: 0.8;
}

@media (min-width:992px) {
    .sub-sec-26 .img-02 {
        zoom: 1;
    }
}

/* sub-sec-27 */
.sub-sec-27 .sec-cont-03 {
    align-items: center;
    background: var(--color-ffffff-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-40-xxl);
    height: 100%;
    justify-content: center;
}

.sub-sec-27 .sec-cont-03 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    width: 100%;
}

.sub-sec-27 .sec-cont-03 h3 {
    font-weight: var(--font-700-bold);
    text-align: left;
    width: 100%;
}

.sub-sec-27 .sec-cont-03 p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-500-medium);
}

.sub-sec-27 .sec-cont-03 img {
    max-width: max-content;
    width: 100%;
}

.sub-sec-27 .sec-cont-04 {
    align-items: flex-end;
    background: var(--color-ffffff-white);
    display: flex;
    flex-direction: column;
    gap: var(--space-40-xxl);
    height: 480px;
    justify-content: flex-end;
    overflow: hidden;
}

.sub-sec-27 .sec-cont-04 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
}

.sub-sec-27 .sec-cont-04 h3 {
    font-weight: var(--font-700-bold);
}

.sub-sec-27 .sec-cont-04 h3 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-27 .sec-cont-04 h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.sub-sec-27 .sec-cont-04 h6 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-27 .sec-cont-04 p {
    color: var(--color-687481-gray-800);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-500-medium);
    text-align: center;
}

.sub-sec-27 .sec-cont-04 img {
    left: 50%;
    position: absolute;
    top: -40px;
    transform: translateX(-50%);
    max-width: 300px;
}

.sub-sec-27 .sec-cont-01 h4 {
    color: var(--color-B1BBC9-gray-600);
    font-weight: var(--font-700-bold);
    text-align: left;
}

.sub-sec-27 .sec-cont-01 h4 span {
    color: var(--color-ffffff-white);
}

.sub-sec-27 .sec-cont-02 {
    height: 480px;
    overflow: hidden;
}

.sub-sec-27 .sec-cont-02 img {
    top: -40px;
}

.sub-sec-27 .sec-cont-02 h4 {
    font-weight: var(--font-700-bold);
}

.sub-sec-27 .sec-cont-02 h4 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-27 .sec-cont-02 .sec-cont-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-16-sm);
}

.sub-sec-27 .sec-cont-02 h6 {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
}

.sub-sec-27 .desc {
    color: var(--color-687481-gray-800);
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: center;
}

@media (min-width:992px) {
    .sub-sec-27 .sec-cont-03 {
        align-items: center;
        flex-direction: row;
        padding: var(--space-60-fourxl);
    }

    .sub-sec-27 .sec-cont-04 {
        align-items: center;
        flex-direction: row;
        justify-content: center;
        height: 400px;
        gap: var(--space-80-fivexl);
    }

    .sub-sec-27 .sec-cont-04 img {
        left: unset;
        position: relative;
        transform: unset;
        top: -20px;
        max-width: 360px;
    }

    .sub-sec-27 .sec-cont-04 .sec-cont-text {
        gap: var(--space-40-xxl);
    }

    .sub-sec-27 .sec-cont-04 h3 {
        text-align: left;
    }

    .sub-sec-27 .sec-cont-04 h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
        text-align: left;
    }

    .sub-sec-27 .sec-cont-04 p {
        font-size: var(--font-15-sm);
        line-height: 22px;
        text-align: left;
    }

    .sub-sec-27 .sec-cont-01 {
        height: 400px;
    }

    .sub-sec-27 .sec-cont-02 {
        height: 400px;
    }

    .sub-sec-27 .sec-cont-02 img {
        top: -20px;
        right: 20px;
        zoom: 1.1;
    }

    .sub-sec-27 .sec-cont-02 .sec-cont-text {
        gap: var(--space-40-xxl);
    }

    .sub-sec-27 .sec-cont-02 h3 {
        text-align: left;
    }

    .sub-sec-27 .sec-cont-02 h6 {
        font-size: var(--font-15-sm);
        line-height: 22px;
    }

    .sub-sec-27 .sec-cont-02 h4 {
        text-align: left;
    }

    .sub-sec-27 .desc {
        font-size: var(--font-16-md);
    }
}

/* sub-sec-28 */
.sub-sec-28 {
    padding-bottom: 0;
}

.sub-sec-28 .sec-cont-13 dl:first-child {
    display: none;
}

.sub-sec-28 .sec-cont-13 dl dd {
    align-items: center;
    border-color: var(--color-0283FD-primary);
    background: var(--color-0283FD-primary);
    display: flex;
    justify-content: center;
    min-height: 72px;
}

.sub-sec-28 .sec-cont-13 dl dd::after {
    background: url(../imgs/sub/haccp-service/cont-13-01.svg);
    background-size: cover;
    content: '';
    display: inline-block;
    height: 24px;
    left: 24px;
    position: absolute;
    top: 0;
    width: 24px;
}

@media (min-width:992px) {
    .sub-sec-28 .sec-cont-13 dl dd {
        line-height: 24px;
    }

    .sub-sec-28 .sec-cont-13 dl:first-child {
        border: 0;
        display: flex;
    }

    .sub-sec-28 .sec-cont-13 dl:first-child dt {
        border: 0;
        padding: 0;
    }

    .sub-sec-28 .sec-cont-13 dl:first-child dd {
        background: none;
        border: 0;
        height: 100%;
        min-height: max-content;
        padding: 0;
    }

    .sub-sec-28 .sec-cont-13 dl:first-child img {
        opacity: 0;
    }

    .sub-sec-28 .sec-cont-13 dl:first-child dd::after {
        display: none;
    }
}

/* sub-sec-29 */
.sub-sec-29 {
    background: var(--color-2897FF-primary-text);
    height: 90vh;
    position: relative;
    padding-top: 140px;
}

.sub-sec-29 .container {
    height: 100%;
}

.sub-sec-29 h1 {
    color: var(--color-ffffff-white);
    text-align: left;
}

.sub-sec-29 span {
    align-items: center;
    background: var(--color-ffffff-white);
    border-radius: var(--radius-full);
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    display: flex;
    gap: var(--space-8-xxs);
    padding: var(--space-12-xs) var(--space-24-lg);
    width: max-content;
}

.sub-sec-29 h6 {
    color: var(--color-ffffff-white);
    display: none;
    font-size: var(--font-14-xs);
    font-weight: var(--font-500-medium);
    line-height: 20px;
    text-align: left;
}

.sub-sec-29 span img {
    animation: none;
}

.sub-sec-29 .sec-cont-img {
    animation: float 2.5s ease-in-out infinite;
    bottom: 40px;
    position: absolute;
    right: -20px;
    width: 260px;
}

@media (min-width:992px) {
    .sub-sec-29 {
        height: 100vh;
        justify-content: center;
        overflow: hidden;
    }

    .sub-sec-29 .container {
        justify-content: center;
        gap: var(--space-32-xl);
        max-height: 500px;
        max-width: 1280px;
        position: relative;
    }

    .sub-sec-29 .sec-cont-img {
        bottom: unset;
        position: absolute;
        top: 30%;
        right: -60px;
        width: 440px;
    }

    .sub-sec-29 h6 {
        color: var(--color-ffffff-white);
        display: block;
        font-size: var(--font-20-xl);
        font-weight: var(--font-500-medium);
        line-height: 30px;
        margin: auto 0 0 0;
        text-align: left;
    }
}

/* sub-sec-30 */
.sub-sec-30 .sec-cont-19 ul {
    border-radius: 40px;
    padding: var(--space-12-xs);
}

.sub-sec-30 .sec-cont-19 ul li:first-child {
    align-items: center;
    background: rgba(2, 131, 253, 0.05);
    border-radius: var(--radius-full);
    color: var(--color-0283FD-primary);
    display: flex;
    font-size: var(--font-14-xs);
    gap: var(--space-8-xxs);
    line-height: 20px;
    justify-content: flex-start;
    padding: var(--space-16-sm);
}

.sub-sec-30 .sec-cont-19 ul li {
    border-radius: var(--radius-full);
    font-weight: var(--font-600-semibold);
}

@media (min-width:992px) {
    .sub-sec-30 .sec-cont-19 ul li:first-child {
        font-size: var(--font-16-md);
        line-height: 24px;
        padding: var(--space-20-md) 28px;
    }
}

/* sub-sec-31 */
.sub-sec-31 {
    background: var(--color-F6F8FB-gray-200);
}

.sub-sec-31 span {
    color: var(--color-0283FD-primary);
    font-size: var(--font-16-md);
    font-weight: var(--font-500-medium);
    line-height: 24px;
}

.sub-sec-31 .dl-group dl {
    border-bottom: 1px solid var(--color-D4DCE5-gray-500);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-24-lg) 0;
}

.sub-sec-31 .dl-group dl:first-child {
    padding: 0 0 var(--space-24-lg) 0;
}

.sub-sec-31 .dl-group dl:last-child {
    border: 0;
    padding: var(--space-24-lg) 0 0 0;
}

.sub-sec-31 .dl-group dl dt {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-20-xl);
    font-weight: var(--font-700-bold);
    line-height: 28px;
}

.sub-sec-31 .dl-group dl dd {
    color: var(--color-687481-gray-800);
    font-size: var(--font-15-sm);
    font-weight: var(--font-500-medium);
    line-height: 22px;
}

.sub-sec-31 .dl-group dl dd b {
    color: var(--color-22272B-gray-900);
}

.sub-sec-31 .dl-group dl dd span {
    font-size: var(--font-15-sm);
    line-height: 22px;
}

@media (min-width:992px) {
    .sub-sec-31 .dl-group dl {
        padding: var(--space-40-xxl) 0;
    }

    .sub-sec-31 .dl-group dl:first-child {
        padding: 0 0 var(--space-40-xxl) 0;
    }

    .sub-sec-31 .dl-group dl:last-child {
        border: 0;
        padding: var(--space-40-xxl) 0 0 0;
    }

    .sub-sec-31 .dl-group dl dt {
        font-size: var(--font-title-28-xl);
        line-height: 36px;
    }

    .sub-sec-31 .dl-group dl dd {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }

    .sub-sec-31 .dl-group dl dd span {
        font-size: var(--font-18-lg);
        line-height: 26px;
    }
}

/* sub-sec-32 */
.sub-sec-32 {
    background: var(--color-F6F8FB-gray-200);
}

.sub-sec-32 .sec-cont-10 dl dt {
    background: var(--color-0283FD-primary);
    color: var(--color-ffffff-white);
}

/* sub-sec-33 */
.sub-sec-33 {
    height: 90vh;
}

.sub-sec-33 .container {
    margin: var(--space-80-fivexl) 0 0 0;
}

@media (min-width:992px) {
    .sub-sec-33 .container {
        margin: 200px 0 0 0;
    }
}

.pb-0 {
    padding-bottom: 0 !important;
}

.metal-img-swiper .swiper-slide {
    align-items: center;
    background: #F9F9F9;
    border-radius: var(--radius-20-xl);
    display: flex;
    height: 320px;
    justify-content: center;
    padding: var(--space-40-xxl);
}

.metal-img-swiper .swiper-slide img {
    max-width: 250px;
}

.metal-img-swiper .swiper-button-next::after,
.metal-img-swiper .swiper-button-prev::after {
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
}

@media (min-width:992px) {
    .metal-img-swiper .swiper-slide {
        border-radius: 40px;
        height: 440px;
    }

    .metal-img-swiper .swiper-slide img {
        max-width: 360px;
    }
}

.sec-cont-34 {
    display: flex;
    flex-direction: column;
    gap: var(--space-32-xl);
}

.sec-cont-34 li {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-12-xs);
}

.sec-cont-34 li span {
    border-radius: var(--radius-full);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
    padding: var(--space-8-xxs) var(--space-24-lg);
    text-align: center;
}

.sec-cont-34 li.first span {
    background: var(--color-F7FBFF-primary-5);
    color: var(--color-0283FD-primary);
}

.sec-cont-34 li.last span {
    background: var(--color-F6F8FB-gray-200);
    color: var(--color-687481-gray-800);
}

.sec-cont-34 li a {
    text-decoration: none;
}

.sec-cont-34 li img {
    width: 100%;
}

.sec-cont-34 .sec-cont-item-text {
    border-radius: var(--radius-12-md);
    padding: var(--space-20-md);
    width: 100%;
}

.sec-cont-34 li.first .sec-cont-item-text {
    background: var(--color-0283FD-primary);
}

.sec-cont-34 li.last .sec-cont-item-text {
    background: var(--color-8995A1-gray-700);
}

.sec-cont-34 .sec-cont-item-text h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-700-bold);
    line-height: 24px;
    text-align: center;
}

.sub-sec-34 .sec-cont-point-text {
    align-items: center;
    display: flex;
    flex-direction: column;
    background: var(--color-0283FD-primary);
    border-radius: var(--radius-full);
    gap: var(--space-12-xs);
    padding: var(--space-16-sm) var(--space-32-xl);
}

.sub-sec-34 .sec-cont-point-text h4 {
    color: var(--color-ffffff-white);
    font-weight: var(--font-500-medium);
}

@media (min-width:992px) {
    .sec-cont-34 {
        flex-direction: row;
        gap: var(--space-20-md)
    }

    .sec-cont-34 li {
        gap: var(--space-20-md);
    }

    .sec-cont-34 li img {
        border-radius: var(--radius-16-lg);
    }

    .sec-cont-34 .sec-cont-item-text {
        border-radius: var(--radius-16-lg);
    }

    .sec-cont-34 .sec-cont-item-text h6 {
        font-size: var(--font-20-xl);
        line-height: 26px;
    }

    .sub-sec-34 .sec-cont-point-text {
        flex-direction: row;
        width: max-content;
        margin: 0px auto;
        padding: var(--space-20-md) var(--space-40-xxl);
    }

    .sub-sec-34 .sec-cont-point-text h4 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }
}

/* sub-sec-35 */
.sub-sec-35 {
    background: url(../imgs/sub/guide-consuting/cont-35-bg.png);
    background-size: cover;
}

.sub-sec-35 .container {
    max-width: 720px;
}

.sub-sec-35 .sec-title-group h5,
.sub-sec-35 .sec-title-group h2 {
    color: var(--color-ffffff-white);
}

.sub-sec-35 .sec-cont-one {
    display: flex;
    flex-direction: column;
    gap: var(--space-32-xl);
}

.sub-sec-35 .sec-cont-one .sec-cont-box {
    align-items: center;
    background: rgba(34, 39, 43, 0.50);
    backdrop-filter: blur(15.350000381469727px);
    border-radius: var(--radius-16-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-20-md);
    padding: var(--space-40-xxl) 0;
}

.sub-sec-35 .sec-cont-one .sec-cont-box h4 {
    color: var(--color-ffffff-white);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    line-height: 24px;
}

.sub-sec-35 .sec-cont-one .sec-cont-box h6 {
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
    line-height: 22px;
}

.sub-sec-35 .sec-cont-box ul {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-width: 260px;
    position: relative;
    width: 100%;
}

.sub-sec-35 .sec-cont-box ul li {
    align-items: center;
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    height: 80px;
    position: relative;
    text-align: center;
    width: 80px;
    z-index: 2;
}

.sub-sec-35 .sec-cont-box.first ul::after {
    background: var(--color-ffffff-white);
    content: '';
    display: inline-block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
}

.sub-sec-35 .sec-cont-box.first ul li {
    background: var(--color-22272B-gray-900);
    color: var(--color-ffffff-white);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
}

.sub-sec-35 .sec-cont-box.last {
    position: relative;
}

.sub-sec-35 .sec-cont-box.last::after {
    background: url(../imgs/sub/guide-consuting/cont-35-01.svg);
    background-size: cover;
    content: '';
    display: inline-block;
    height: 60px;
    position: absolute;
    top: -40px;
    width: 60px;
    z-index: 1;
}

.sub-sec-35 .sec-cont-box.last ul::after {
    background: var(--color-0283FD-primary);
    content: '';
    display: inline-block;
    height: 2px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
}

.sub-sec-35 .sec-cont-box.last ul li {
    background: var(--color-ffffff-white);
    color: var(--color-22272B-gray-900);
    font-size: var(--font-14-xs);
    font-weight: var(--font-400-regular);
}

.sub-sec-35 .sec-cont-box.last ul li:nth-child(2) {
    background: var(--color-0283FD-primary);
    color: var(--color-ffffff-white);
    font-weight: var(--font-700-bold);
}

.sub-sec-35 .desc {
    color: var(--color-ffffff-white);
    font-size: var(--font-13-xxs);
    font-weight: var(--font-400-regular);
    line-height: 20px;
}

@media (min-width:992px) {
    .sub-sec-35 .sec-cont-one .sec-cont-box {
        gap: var(--space-32-xl);
    }

    .sub-sec-35 .sec-cont-one .sec-cont-box h4 {
        font-size: var(--font-20-xl);
        line-height: 28px;
    }

    .sub-sec-35 .sec-cont-one .sec-cont-box h6 {
        font-size: var(--font-16-md);
        line-height: 24px;
    }

    .sub-sec-35 .sec-cont-box ul {
        max-width: 360px;
    }

    .sub-sec-35 .sec-cont-box ul li {
        font-size: var(--font-16-md);
        height: 100px;
        width: 100px;
    }

    .sub-sec-35 .sec-cont-box.last::after {
        height: 80px;
        top: -60px;
        width: 80px;
    }

    .sub-sec-35 .desc {
        text-align: center;
    }
}

/* sub-sec-36 */
.sub-sec-36 {
    background: var(--color-F7FBFF-primary-5);
}

.sub-sec-36 .sec-title-group h2 span {
    color: var(--color-0283FD-primary);
}

.sub-sec-36 .sec-cont-one {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-32-xl);
}

.sub-sec-36 .sec-cont-one img {
    width: 100%;
}

.sub-sec-36 .sec-cont-one ul {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--space-8-xxs);
    margin: 0 auto;
    width: max-content;
}

.sub-sec-36 .sec-cont-one ul li {
    align-items: center;
    color: var(--color-22272B-gray-900);
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    gap: var(--space-8-xxs);
    line-height: 24px;
}

.sub-sec-36 .sec-cont-one ul li img {
    width: max-content;
}

@media (min-width:992px) {
    .sub-sec-36 .sec-cont-one {
        flex-direction: row;
        justify-content: center;
    }

    .sub-sec-36 .sec-cont-one img {
        max-width: 680px;
    }

    .sub-sec-36 .sec-cont-one ul {
        flex: 0 0 auto;
        margin: 0;
    }
}

/* sub-sec-37 */
.sub-sec-37 .sec-cont-one ul li:nth-child(1) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.8) 100%), url(../imgs/sub/guide-consuting/cont-37-04.png);
}

.sub-sec-37 .sec-cont-one ul li:nth-child(2) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.8) 100%), url(../imgs/sub/guide-consuting/cont-37-05.png);
}

.sub-sec-37 .sec-cont-one ul li:nth-child(3) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.8) 100%), url(../imgs/sub/guide-consuting/cont-37-06.png);
}

.sub-sec-37 .sec-cont-one ul li:nth-child(4) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.8) 100%), url(../imgs/sub/guide-consuting/cont-37-01.png);
}

.sub-sec-37 .sec-cont-one ul li:nth-child(5) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.8) 100%), url(../imgs/sub/guide-consuting/cont-37-02.png);
}

.sub-sec-37 .sec-cont-one ul li:nth-child(6) {
    background: linear-gradient(180deg, rgba(102, 102, 102, 0) 0%, rgba(0, 0, 0, 0.8) 100%), url(../imgs/sub/guide-consuting/cont-37-03.png);
}

.sub-sec-37 .sec-cont-one ul {
    margin: 0;
}

.sub-sec-37 a {
    align-items: center;
    border: 1px solid #002d57;
    border-radius: var(--radius-full);
    flex: 1;
    font-size: var(--font-16-md);
    font-weight: var(--font-600-semibold);
    display: flex;
    gap: var(--space-4-min);
    justify-content: center;
    padding: var(--space-12-xs) var(--space-20-md);
    margin: 0 auto;
    width: max-content;
}

@media (min-width:992px) {
    .sub-sec-37 .sec-cont-one {
        max-width: 1000px;
        margin: 0 auto;
    }

    .sub-sec-37 .sec-cont-one ul {
        flex-wrap: wrap;
        gap: var(--space-24-lg);
    }

    .sub-sec-37 .sec-cont-one ul li {
        align-items: flex-end;
        height: 386px;
        justify-content: flex-end;
        padding: var(--space-20-md);
        width: calc((100% / 3) - 16px);
    }

    .sub-sec-37 .sec-cont-one h6 {
        font-size: var(--font-16-md);
        text-align: right;
    }

    .sub-sec-37 a {
        font-size: var(--font-16-md);
        padding: var(--space-16-sm) 0;
        width: 320px;
    }
}