@charset "utf-8";

.page-hero {
    position: relative;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(300px, calc(450 / var(--container) * 100vw), 400rem);
    /* contain: content; */
    color: #fff;
    isolation: isolate;

    &::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--black) no-repeat 50% / cover;
        content: "";
    }

    &.nav-about::before {
        background-image: url("/assets/images/pages/bg-nav-about.jpg");
        filter: brightness(0.6);
    }

    &.nav-participating::before {
        background-image: url("/assets/images/pages/bg-nav-participating.jpg");
        filter: brightness(0.6);
    }

    &.nav-program::before {
        background-image: url("/assets/images/pages/bg-nav-program.jpg");
        filter: brightness(0.6);
    }

    &.nav-community::before {
        background-image: url("/assets/images/pages/bg-nav-community.jpg");
        filter: brightness(0.6);
    }

    &.nav-statistics::before {
        background-image: url("/assets/images/pages/bg-nav-statistics.jpg");
        filter: brightness(0.6);
    }

    &.nav-announcement::before {
        background-image: url("/assets/images/pages/bg-nav-announcement.jpg");
        filter: brightness(0.6);
    }

    &.nav-inquiry::before {
        background-image: url("/assets/images/pages/bg-nav-inquiry.jpg");
        filter: brightness(0.6);
    }


    /* TODO: after 삭제 */
    /* &::after { position: absolute; inset: 0; z-index: -1; align-content: center; margin: auto; font: 200 var(--font-size-32) var(--font-sans); text-align: center; color: #fff; background: radial-gradient(circle at 20% 0, #648de3 10%, #6768e3) 0 / cover no-repeat; content: "페이지 헤더"; } */

    .page-hero-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 64px;
    }

    .page-hero-container>nav {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .page-hero-container>nav>ul {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .page-hero-container>nav>ul>li>i {
        margin-right: 12px;
    }

    /* .page-hero-container>nav>ul>li::before { content: '>'; margin-right: 12px; }
    */
    .page-hero-container>nav>ul>li>span {
        font-weight: 700;
    }

    .page-hero-container>nav>ul>li:first-child {
        display: none;
    }

    .heading {
        font: var(--font-size-54) var(--font-primary);
    }

    @media(max-width: 767px) {
        .page-hero-container {
            flex-direction: column;
            gap: 20rem;
        }
    }


    /* @media (prefers-reduced-motion: no-preference) {
        &::before {
            animation: page-hero-bg 1.8s both;
        }

        .heading {
            opacity: 0;
            animation: slide-up 0.6s 0.2s both;
        }
    } */
}

@keyframes page-hero-bg {
    0% {
        scale: 1.05;
    }

    100% {
        scale: 1;
    }
}

@keyframes slide-up {
    0% {
        translate: 0 40rem;
        opacity: 0;
    }

    100% {
        translate: 0;
        opacity: 1;
    }
}

@keyframes slide-right {
    0% {
        translate: -40rem;
        opacity: 0;
    }

    100% {
        translate: 0;
        opacity: 1;
    }
}

.local-nav {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 7;
    font: var(--font-size-18-to-14) var(--font-sans);
    background-color: rgba(255, 255, 255, 0.2);

    .container {
        display: flex;
        height: 3.88888889em;
    }

    .home {
        display: grid;
        place-items: center;
        width: auto;
        height: 100%;
        aspect-ratio: 1;
        background: linear-gradient(180deg, #89262C 0%, #BA2427 100%);
    }

    .home-icon {
        display: block;
        width: 1.05555556em;
        height: auto;
        fill: white;
    }

    details {
        position: relative;
        min-width: clamp(150rem, calc(230 / var(--container) * 100vw), 230rem);
    }

    summary {
        position: relative;
        display: block;
        align-content: center;
        height: 100%;
        padding-inline: 1.66666667em 3.83333333em;
        text-align: left;
        color: var(--black);
        background: #fff;
    }

    .details-level-2 summary {
        font-weight: 700;
    }

    summary::after {
        position: absolute;
        inset: 0;
        width: 0.55555556em;
        aspect-ratio: 1;
        margin: auto 29rem auto auto;
        border: solid currentColor;
        border-width: 0 1px 1px 0;
        translate: 0 -25%;
        rotate: 45deg;
        content: "";
    }

    [open] summary::after {
        translate: 0 25%;
        scale: -1;
    }

    .nav-menu {
        position: absolute;
        inset: 100% 0 auto;
        color: var(--black);
        background: #fff;
        border: 1px solid var(--border-color);
        box-shadow: 0 10rem 30rem #0000000d;
    }

    .details-level-1 .nav-menu-level-2 {
        display: none;
    }

    .details-level-2 .nav-menu-level-3 {
        display: none;
    }

    .nav-link {
        display: block;
        padding: 1em 1.61111111em;
    }


    @media (any-hover) {
        .nav-link:hover {
            background: #f4f4f4;
        }
    }
}

.layout-sub {
    min-height: 300px;
    /* padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 120rem); */

    .legal-document .page-heading,
    .page-heading-block {
        margin-bottom: calc(var(--font-size-35) * 2);
        text-align: center;
    }

    .page-heading {
        font-family: var(--font-primary);
        font-size: var(--font-size-35);
    }

    .page-subheading {
        margin-top: 0.125em;
        font-weight: 700;
        font-size: var(--font-size-16);
        color: #999;
    }


    /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
    #main:has(.join_area) .sub_title {
        display: none;
    }

    .wrap-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 80px;
    }

    .wrap-title>p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
        text-transform: uppercase;
    }

    .wrap-title>h1 {
        position: relative;
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .wrap-title>h1::before {
        content: '';
        position: absolute;
        left: -48px;
        top: -60px;
        width: 114px;
        height: 78px;
        border-radius: 32px 0;
        opacity: 0.54;
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
        z-index: -1;
    }

}

/* Mobility Main Page */

.mobility-hero {
    width: 100%;
    height: 100dvh;
    min-height: 600rem;
    position: relative;
    background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
    overflow: hidden;
    border-radius: 0 0 200px 0;

    .mobility-hero-content {
        display: flex;
        align-items: center;
        height: 100%;
        z-index: 1;
    }

    .mobility-hero-content .title-wrap {
        color: #fff;
    }

    .mobility-hero-content .title-wrap .title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        margin-bottom: 24px;
    }

    .mobility-hero-content .title-wrap .title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
        line-height: 140%;
    }

    .mobility-hero-content .title-wrap a {
        display: flex;
        width: 200px;
        height: 60px;
        padding: 18px 12px;
        justify-content: center;
        align-items: center;
        gap: 20px;
        border-radius: 50px;
        background: #FFF;
        color: #B92427;
        margin-top: 100px;
    }

    .car-main {
        position: absolute;
        bottom: 10%;
        right: -5%;
        width: calc(var(--container-scale) * 100%);
        max-width: 1080px;
        z-index: 1;
    }

    .bg-main {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        filter: brightness(0.8);
        clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
    }

    @media (max-width: 768px) {
        .car-main {
            bottom: 5%;
            right: -10%;
        }
    }

    @media (max-width: 1024px) {
        .car-main {
            bottom: 5%;
            right: -8%;
        }
    }

    @media (max-width: 1280px) {
        .car-main {
            max-width: 900px;
            right: -6%;
        }
    }
}

@media (max-width: 1024px) {
    .mobility-hero {
        border-radius: 0 0 100px 0;
    }
}

.program-participant {
    position: relative;
}

.program-participant::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55%;
    border-radius: 0 240px 0 0;
    background: linear-gradient(180deg, #F0DBDB 0%, #ffffff 100%);
}

@media (max-width: 1024px) {
    .program-participant::before {
        border-radius: 0 100px 0 0;
    }
}

.program {
    position: relative;

    .program-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 80px;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .program-content>.title {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .program-content>.title>.wrap-title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
    }

    .program-content>.title>.wrap-title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .program-content>.title>.btn-more {
        font-weight: 800;
        color: #999999;
    }

    .program-content>.title>.btn-more>span {
        padding: 8px;
        background-color: #BA2427;
        border-radius: 50%;
        color: #fff;
        margin-left: 10px;
    }

    .program-content>.list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }

    @media (max-width: 1280px) {
        .program-content>.list {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    .program-content>.list>.card {
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        border-radius: 12px;
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 28px;
        gap: 52px;
        overflow: hidden;
    }

    .program-content>.list>.card>.content {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .program-content>.list>.card>.content>.status {
        display: flex;
        justify-content: end;
        width: 100%;
    }

    .program-content>.list>.card>.content>.status>p {
        display: flex;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: fit-content;
        border-radius: 100px;
    }

    .program-content>.list>.card>.content>.status.schedule>p {
        border: 1px solid #BA2427;
        color: #BA2427;
    }

    .program-content>.list>.card>.content>.status.progress>p {
        border: 1px solid #0084D1;
        color: #0084D1;
    }

    .program-content>.list>.card>.content>.status.closed>p {
        border: 1px solid #A1A1A1;
        color: #A1A1A1;
    }

    .program-content>.list>.card>.footer {
        padding-top: 24px;
        border-top: 1px solid #ddd;
    }

    .program-content>.list>.card>.footer>.date {
        margin-bottom: 16px;
    }

    .program-content>.list>.card>.footer>.date,
    .program-content>.list>.card>.footer>.location {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .program-content>.list>.card>.desc-hover {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(100%);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 28px;
        color: #fff;
        border-radius: 12px;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        background: url(/assets/images/components/bg-card-program-hover.png) center / cover no-repeat;
    }


    @media (hover: hover) {
        .program-content>.list>.card:hover .desc-hover {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .program-content>.list>.card>.desc-hover>p {
        font-size: var(--font-size-16);
        line-height: 180%;
    }

    .program-content>.list>.card>.desc-hover>a {
        display: flex;
        align-items: center;
        width: fit-content;
        gap: 20px;
        height: fit-content;
        padding-block: 12px;
        color: #ffffff;
        font-size: var(--font-size-20);
        border-bottom: 1px solid #ffffff;
    }

}

.participant {
    position: relative;

    marquee {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 200px;
        color: rgba(0, 0, 0, 0.02);
        font-family: var(--font-primary);
        text-transform: uppercase;
        overflow: hidden;
        white-space: nowrap;
    }

    .participant-content {
        display: flex;
        flex-direction: column;
        gap: 80px;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .participant-content>.title {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .participant-content>.title>.wrap-title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
    }

    .participant-content>.title>.wrap-title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .participant-content>.title>a {
        display: flex;
        align-items: center;
        gap: 20px;
        height: fit-content;
        padding-block: 20px;
        color: #89262C;
        font-size: var(--font-size-20);
        border-bottom: 1px solid #89262C;
    }

    .participant-content>.list {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        row-gap: 32px;
        column-gap: 20px;
    }

    @media (max-width: 1280px) {
        .participant-content>.list {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .participant-content>.list {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .participant-content>.list {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .participant-content>.list>.card-company {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* .participant-content>.list>.card-company>.img::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
        z-index: -1;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .participant-content>.list>.card-company:hover .img::before {
        top: 0;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    } */

    .participant-content>.list>.card-company:hover .img {
        border-color: #BA2427;
    }

    .participant-content>.list>.card-company>.img {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #ddd;
        height: 158px;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .participant-content>.list>.card-company>.img>img {
        width: 100%;
        height: 100%;
        max-height: 72px;
        object-fit: contain;
        object-position: center;
    }

}

.statistic {
    position: relative;
    background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
    border-radius: 240px 0 0 0;

    .statistic-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
        padding-block: clamp(60rem, calc(100 / var(--container) * 100vw), 120rem);
    }

    .statistic-content>.title {
        display: flex;
        flex-direction: column;
        /* width: 100%; */
        color: #fff;
    }

    .statistic-content .title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
    }

    .statistic-content .title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .statistic-content>.title span {
        display: block;
        font-size: var(--font-size-22);
        margin-top: 24px;
    }

    .statistic-content .title .desc {
        display: flex;
        font-size: var(--font-size-22);
        margin-top: 54px;
    }

    .statistic-content .tab-chart {
        width: 100%;
        max-width: 925px;
    }

    .statistic-content .tab-chart .tab-wrap {
        display: flex;
        width: fit-content;
        overflow: hidden;
        border-radius: 14px 0 0 0;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text p {
        font-size: var(--font-size-28);
        font-weight: 700;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text span {
        font-size: var(--font-size-22);
        color: #9C2B32;
    }

    .statistic-content .tab-chart .tab-wrap .tab {
        display: flex;
        align-items: end;
    }

    .statistic-content .tab-chart .tab-wrap .tab:not(:first-child) {
        margin-left: -40px;
    }

    .statistic-content .tab-chart .tab-wrap .tab>p {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 50px;
        height: 100%;
        color: #9C2B32;
        background-color: #F7E9E9;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg {
        fill: #F7E9E9;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg:first-child {
        margin-right: -1px;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg:last-child {
        margin-left: -1px;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active>svg {
        fill: #fff;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active {
        color: #000;
        font-weight: 800;
        z-index: 2;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active>p {
        background-color: #fff;
    }

    .statistic-content .tab-chart .tab-wrap .tab[data-tab="tab1"] {
        border-radius: 28px 0 0 0;
        /* overflow: hidden; */
    }

    .statistic-content .tab-chart .chart-wrap .chart {
        display: none;
    }

    .statistic-content .tab-chart .chart-wrap .chart.active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 54px;
        border-radius: 0 28px 28px 28px;
        box-shadow: 0 4px 2px 0 rgba(60, 64, 67, 0.12), 0 4px 6px 2px rgba(60, 64, 67, 0.08);
    }

    .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap {
        width: 100%;
        height: 415px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap canvas {
        width: 100%;
        height: 100%;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab1"] {
        background: url(/assets/images/components/bg-overlay-chart-1.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab2"] {
        background: url(/assets/images/components/bg-overlay-chart-2.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab3"] {
        background: url(/assets/images/components/bg-overlay-chart-3.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab4"] {
        background: url(/assets/images/components/bg-overlay-chart-4.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab3"] .title>img {
        width: 38px;
        height: 38px;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab4"] .title>img {
        width: 38px;
        height: 38px;
    }


    @media (max-width: 1280px) {
        .statistic-content {
            flex-direction: column;
        }

        .statistic-content>.title {
            width: 100%;
            align-items: center;
        }

        .statistic-content .title .desc {
            text-align: center;
        }

    }

    @media (max-width: 1024px) {
        .statistic-content .tab-chart .tab-wrap .tab>p {
            padding: 0 24px;
        }

        /* .statistic-content .tab-chart .tab-wrap .tab {
            padding: 12px 24px;
        } */

        .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap {
            height: 265px;
        }

        .statistic-content .tab-chart .chart-wrap .chart.active {
            padding: 32px;
        }

    }

    @media (max-width: 640px) {
        .statistic-content .tab-chart .tab-wrap .tab>p {
            padding: 0 14px;
        }
    }
}

@media (max-width: 1024px) {
    .statistic {
        border-radius: 100px 0 0 0;
    }
}

.event {
    position: relative;

    marquee {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 200px;
        color: rgba(0, 0, 0, 0.02);
        font-family: var(--font-primary);
        text-transform: uppercase;
        overflow: hidden;
        white-space: nowrap;
    }

    .event-content {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .event-content>.title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 80px;
    }

    .event-content>.title>p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
    }

    .event-content>.title>h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .event-content>.swiper>.swiper-wrapper>.swiper-slide {
        position: relative;
        width: 876px;
        height: 440px;
        border-radius: 20px;
        overflow: hidden;
    }

    .event-content>.swiper>.swiper-wrapper>.swiper-slide>h3 {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: clamp(24rem, calc(55 / var(--container) * 100vw), 55rem);
        font-size: var(--font-size-22);
        color: #fff;
        z-index: 1;
    }

    .event-content>.swiper>.swiper-wrapper>.swiper-slide>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .event-content>.swiper>.swiper-wrapper>.swiper-slide>span {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 90%);
    }

    .event-content>.swiper>.btn-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 100px;
        margin-top: 48px;
    }

    .event-content>.swiper>.btn-wrap>.btn-prev,
    .event-content>.swiper>.btn-wrap>.btn-next {
        display: flex;
        width: fit-content;
        height: fit-content;
        padding: 31px 21px;
        border-radius: 34.5px;
        background: #EEE;
    }

    .event-content>.swiper>.btn-wrap>.swiper-button-disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: default;
    }

    .event-content>.swiper>.btn-wrap>.pagination {
        width: fit-content;
    }

    .event-content>.swiper>.btn-wrap>.pagination>.swiper-pagination-current {
        font-weight: 700;
        color: #89262C;
    }


    @media (max-width: 1024px) {
        .event-content>.swiper>.swiper-wrapper>.swiper-slide {
            width: 538px;
            height: 320px;
        }

        .event-content>.swiper>.btn-wrap {
            gap: 32px;
        }

    }

    @media (max-width: 768px) {
        .event-content>.swiper>.swiper-wrapper>.swiper-slide {
            width: 438px;
            height: 220px;
        }
    }
}

.bast-cases::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 55%;
    border-radius: 0 0 240px 0;
    background-color: #F7EBEB;
}

.bast-cases {
    position: relative;
    background-color: #FBF4F4;

    .bast-cases-content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 80px;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .bast-cases-content>.title {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }

    .bast-cases-content>.title>a {
        font-weight: 800;
        color: #999999;
    }

    .bast-cases-content>.title>a>span {
        padding: 8px;
        background-color: #BA2427;
        border-radius: 50%;
        color: #fff;
        margin-left: 10px;
    }

    .bast-cases-content>.title>.wrap-title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
    }

    .bast-cases-content>.title>.wrap-title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .bast-cases-content>.list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
    }

    @media (max-width: 1280px) {
        .bast-cases-content>.list {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 1024px) {
        .bast-cases-content>.list {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 640px) {
        .bast-cases-content>.list {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    .bast-cases-content>.list>.card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 12px;
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 28px;
        gap: 84px;
        overflow: hidden;
    }

    .bast-cases-content>.list>.card>.content {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .bast-cases-content>.list>.card>.desc-hover {
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(100%);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 28px;
        color: #fff;
        border-radius: 12px;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        background: url(/assets/images/components/bg-card-program-hover.png) center / cover no-repeat;
    }

    .bast-cases-content>.list>.card>.desc-hover>p {
        font-size: var(--font-size-16);
        line-height: 180%;
    }

    .bast-cases-content>.list>.card>.desc-hover>a {
        display: flex;
        align-items: center;
        width: fit-content;
        gap: 20px;
        height: fit-content;
        padding-block: 12px;
        color: #ffffff;
        font-size: var(--font-size-20);
        border-bottom: 1px solid #ffffff;
    }


    @media (hover: hover) {
        .bast-cases-content>.list>.card:hover .desc-hover {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .bast-cases-content>.list>.card>.content>.status {
        display: flex;
        width: 100%;
    }

    .bast-cases-content>.list>.card>.content>.status>p {
        display: flex;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: fit-content;
        border-radius: 100px;
    }

    .bast-cases-content>.list>.card>.content>.status.schedule>p {
        background-color: #BA2427;
        color: #FFF;
    }

    .bast-cases-content>.list>.card>.content>.status.progress>p {
        border: 1px solid #0084D1;
        color: #0084D1;
    }

    .bast-cases-content>.list>.card>.content>.status.closed>p {
        border: 1px solid #A1A1A1;
        color: #A1A1A1;
    }

    .bast-cases-content>.list>.card>.footer {
        padding-top: 24px;
        border-top: 1px solid #ddd;
    }

    .bast-cases-content>.list>.card>.footer>.date {
        margin-bottom: 16px;
    }

    .bast-cases-content>.list>.card>.footer>.date,
    .bast-cases-content>.list>.card>.footer>.location {
        display: flex;
        align-items: center;
        gap: 12px;
    }

}

.announce-collab {
    position: relative;

    .wrap-announce-collab {
        display: flex;
        gap: 80px;
        padding-block: clamp(60rem, calc(120 / var(--container) * 100vw), 160rem);
    }

    .announce-content,
    .collab-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 24px;
    }

    .announce-content>.title,
    .collab-content>.title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 40px;
        border-bottom: 1px solid #000000;
    }

    .announce-content>.title>.wrap-title p,
    .collab-content>.title>.wrap-title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-20);
        color: #BA2427;
    }

    .announce-content>.title>.wrap-title h1,
    .collab-content>.title>.wrap-title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-45);
    }

    .announce-content>.title>.btn-more,
    .collab-content>.title>.btn-more {
        font-weight: 800;
        color: #999999;
    }

    .announce-content>.title>.btn-more>span,
    .collab-content>.title>.btn-more>span {
        padding: 8px;
        background-color: #BA2427;
        border-radius: 50%;
        color: #fff;
        margin-left: 10px;
    }

    .announce-content>ul>li>details>summary::marker,
    .collab-content>ul>li>details>summary::marker {
        content: "";
    }

    .announce-content>ul>li,
    .collab-content>ul>li {
        font-size: var(--font-size-18-to-14);
        padding: 32px 0;
    }

    .announce-content>ul>li:not(:first-child),
    .collab-content>ul>li:not(:first-child) {
        border-top: 1px solid #ddd;
    }

    .announce-content>ul>li>a>p,
    .collab-content>ul>li>a>p {
        padding: 12px 24px;
        margin-top: 12px;
        background-color: #f1f1f1;
    }

    .announce-content>ul>li>a>summary,
    .collab-content>ul>li>a>summary {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .announce-content>ul>li>a>summary::after,
    .collab-content>ul>li>a>summary::after {
        content: '+';
        display: block;
        /* position: absolute; */
        /* top: 50%; */
        /* right: 0; */
        /* translate: 0 -50%; */
        font-size: 28px;
        margin-left: 12px;
    }

    .announce-content>ul>li>details[open]>summary::after,
    .collab-content>ul>li>details[open]>summary::after {
        content: '-';
    }


    @media (max-width: 1024px) {
        .wrap-announce-collab {
            flex-direction: column;
        }
    }
}

/* Auth Page */

.auth {
    position: relative;

    /* Login */

    .auth-login-content {
        position: relative;
        display: flex;
        flex-direction: column;
        max-width: 365rem;
        padding-block: clamp(60rem, calc(120 / var(--container) * 100vw), 160rem);
    }

    .auth-login-content>h1 {
        position: relative;
        font-family: var(--font-primary);
        font-size: var(--font-size-45);
        text-align: center;
    }

    .auth-login-content>h1::before {
        content: '';
        position: absolute;
        left: 74px;
        top: -12px;
        width: 114px;
        height: 78px;
        border-radius: 32px 0;
        opacity: 0.54;
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
        z-index: -1;
    }

    .auth-login-content>p {
        font-family: var(--font-sans);
        font-size: var(--font-size-20);
        text-align: center;
        color: #8A8A8A;
        margin-bottom: 80px;
    }

    .auth-login-content>form {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .auth-login-content>form>input {
        display: flex;
        width: 100%;
        height: 55px;
        padding: 10px 20px;
        align-items: center;
        gap: 20px;
        border: 1px solid #DDD;
    }

    .auth-login-content>form>button {
        display: flex;
        width: 100%;
        height: 60px;
        padding: 18px 12px;
        justify-content: center;
        align-items: center;
        gap: 20px;
        border-radius: 50px;
        background: #B92427;
        color: #fff;
    }

    .auth-login-content>form>span {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
    }

    .auth-login-content>form>span>a {
        font-family: var(--font-sans);
        font-size: var(--font-size-16);
        color: #000000;
    }

    .auth-login-content>form>span>a:hover {
        text-decoration: underline;
    }

    .auth-login-content>form>span>p {
        color: #8A8A8A;
    }

    /* Register */

    .auth-regiser-content {
        position: relative;
        display: flex;
        flex-direction: column;
        max-width: 1080px;
        padding-block: clamp(60rem, calc(120 / var(--container) * 100vw), 160rem);
    }

    .auth-regiser-content>.sys-common>#alertModal>.modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .auth-regiser-content>.sys-common>#alertModal {
        position: fixed;
        display: none;
        place-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        padding: 24px;
    }

    .auth-regiser-content>.sys-common>#alertModal.show {
        display: grid;
    }

    .auth-regiser-content>.sys-common>#alertModal .modal {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        width: 100%;
        max-width: 550px;
        margin: auto;
        gap: 32px;
        overflow: hidden;
        padding: 24px;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        z-index: 99;
    }

    .auth-regiser-content>.sys-common>#alertModal .modal>.content>i {
        color: #B92427;
        margin-right: 8px;
        font-size: var(--font-size-20);
    }

    .auth-regiser-content>.sys-common>#alertModal .modal>.close-btn {
        position: absolute;
        top: 24px;
        right: 24px;
        cursor: pointer;
    }

    .auth-regiser-content>.sys-common>#alertModal .modal>.close-btn:hover {
        color: #6e6e6e;
    }

}

.detail {
    position: relative;

    .img-banner-detail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: clamp(300px, calc(450 / var(--container) * 100vw), 500px);
        z-index: -1;
    }

    .detail-content {
        padding-top: 320px;
        padding-bottom: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        margin-left: clamp(60px, calc(150 / var(--container) * 100vw), 150px);
    }

    .detail-content>.wrap-container {
        background: #fff;
        padding: 80px 0 80px 80px;
        padding-right: clamp(60px, calc(150 / var(--container) * 100vw), 150px);
        border-radius: 80px 0 0 0;
    }

    .detail-content>.wrap-container>.desc {
        position: relative;
        /* background: #fff; padding: 80px 150px; border-radius: 80px 0 0 0; */
        /* margin-left: clamp(60px, calc(100 / var(--container) * 100vw), 100px); */
    }

    .detail-content>.wrap-container>.desc>.status-wrap {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        z-index: 1;
    }

    .detail-content>.wrap-container>.desc::before {
        content: '';
        position: absolute;
        left: -40px;
        top: -40px;
        width: 176px;
        height: 138px;
        border-radius: 75px 0;
        opacity: 0.54;
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
    }

    .detail-content>.wrap-container>.desc>.status-wrap>p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
    }

    .detail-content>.wrap-container>.desc>.status-wrap>span {
        display: flex;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: fit-content;
        border-radius: 100px;
        border: 1px solid #BA2427;
        color: #BA2427;
    }

    .detail-content>.wrap-container>.desc>.status-wrap>a {
        display: flex;
        padding: 8px 24px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: fit-content;
        border-radius: 100px;
        background: linear-gradient(180deg, #89262C 0%, #BA2427 100%);
        color: #fff;
    }

    .detail-content>.wrap-container>.desc>h1 {
        position: relative;
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
        padding-bottom: 32px;
        border-bottom: 1px solid #000000;
        z-index: 1;
    }

    .detail-content>.wrap-container>.desc>.company {
        position: relative;
        display: flex;
        align-items: center;
        gap: 32px;
        z-index: 1;
    }

    .detail-content>.wrap-container>.desc>.company>.img {
        width: 250px;
        height: 250px;
        border-radius: 16px;
        border: 1px solid #ddd;
        background-color: #fff;
        overflow: hidden;
    }

    .detail-content>.wrap-container>.desc>.company>.img>img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .detail-content>.wrap-container>.desc>.date-wrap {
        position: relative;
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 40px;
        z-index: 1;
    }

    .detail-content>.wrap-container>.desc>.date-wrap>.date {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .detail-content>.wrap-container>.desc>.date-wrap>.location {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .detail-content>.wrap-container>.overview {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: clamp(60px, calc(100 / var(--container) * 100vw), 100px);
        position: relative;
    }

    .detail-content>.wrap-container>.overview>h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .detail-content>.wrap-container>.overview>ul {
        font-size: var(--font-size-20);
    }

    .detail-content>.wrap-container>.overview>ul>li {
        display: flex;
        gap: 24px;
        padding-block: 8px;
    }

    .detail-content>.wrap-container>.overview>ul>li>strong {
        display: block;
        max-width: 100px;
        font-weight: 800;
    }

    .detail-content>.wrap-container>.overview>ul>li>span>ul>li {
        padding-block: 8px;
    }

    .detail-content>.wrap-container>.overview>ul>li>span>span {
        font-weight: 800;
        color: #BA2427;
    }

    .detail-content>.wrap-container>.overview>.title {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .detail-content>.wrap-container>.overview>.title>p {
        position: relative;
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
        z-index: 1;
    }

    .detail-content>.wrap-container>.overview>.title>h1 {
        position: relative;
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
        z-index: 1;
    }

    .detail-content>.wrap-container>.overview>.desc-content {
        font-family: var(--font-sans);
        font-size: var(--font-size-20);
    }

    /* Company */

    .detail-content>.wrap-container>.overview.company>.title {
        position: relative;
    }

    .detail-content>.wrap-container>.overview.company>.title::before {
        content: '';
        position: absolute;
        left: -40px;
        top: -40px;
        width: 176px;
        height: 138px;
        border-radius: 75px 0;
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
    }

    .detail-content>.wrap-container>.overview.company>.desc-content {
        display: flex;
        align-items: center;
        gap: 95px;
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.img::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -32px;
        width: 100%;
        height: 80%;
        max-width: 482px;
        max-height: 592px;
        border-radius: 18px 18px 18px 230px;
        background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.img {
        position: relative;
        /* width: 100%; */
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.img>img {
        position: relative;
        /* width: 100%; */
        height: 100%;
        max-width: 482px;
        max-height: 592px;
        margin-left: 32px;
        object-fit: cover;
        object-position: center;
        border-radius: 18px 18px 18px 200px;
        overflow: hidden;
        z-index: 1;
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text {
        display: flex;
        flex-direction: column;
        gap: 54px;
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text>.wrap-ceo {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 32px;
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text>h3 {
        font-size: var(--font-size-36);
        font-family: var(--font-sans);
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text>h3::after {
        content: '';
        display: block;
        bottom: -20px;
        left: 0;
        width: 90px;
        height: 4px;
        background-color: #BA2427;
        margin-top: 24px;
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text>p {
        font-size: var(--font-size-18-to-14);
        font-family: var(--font-sans);
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text>.wrap-ceo>p {
        font-weight: 600;
    }

    .detail-content>.wrap-container>.overview.company>.desc-content>.text>.wrap-ceo>span {
        color: #7e7e7e;
    }

    .detail-content>.wrap-container>.program-history {
        display: flex;
        flex-direction: column;
        gap: 64px;
        padding-block: clamp(60px, calc(150 / var(--container) * 100vw), 150px);
        position: relative;
    }

    .detail-content>.wrap-container>.program-history>.title {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .detail-content>.wrap-container>.program-history>.title::before {
        content: '';
        position: absolute;
        left: -40px;
        top: -40px;
        width: 176px;
        height: 138px;
        border-radius: 75px 0;
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
    }

    .detail-content>.wrap-container>.program-history>.title p {
        position: relative;
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
        color: #BA2427;
        z-index: 1;
    }

    .detail-content>.wrap-container>.program-history>.title h1 {
        position: relative;
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
        z-index: 1;
    }

    .detail-content>.wrap-container>.program-history>.list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        gap: 32px;
    }

    .detail-content>.wrap-container>.program-history>.list>.card {
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        border: 1px solid #ddd;
        background-color: #fff;
        padding: 28px;
        gap: 52px;
        overflow: hidden;
    }

    .detail-content>.wrap-container>.program-history>.list>.card>.content {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .detail-content>.wrap-container>.program-history>.list>.card>.content>.status {
        display: flex;
        justify-content: end;
        width: 100%;
    }

    .detail-content>.wrap-container>.program-history>.list>.card>.content>.status>p {
        display: flex;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: fit-content;
        border-radius: 100px;
        border: 1px solid #A1A1A1;
        color: #A1A1A1;
    }

    .detail-content>.wrap-container>.program-history>.list>.card>.footer {
        padding-top: 24px;
        border-top: 1px solid #ddd;
    }

    .detail-content>.wrap-container>.program-history>.list>.card>.footer>.date {
        margin-bottom: 16px;
    }

    .detail-content>.wrap-container>.program-history>.list>.card>.footer>.date,
    .detail-content>.wrap-container>.program-history>.list>.card>.footer>.location {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* Detail Program */

    .detail-content>.wrap-container>.detail-box {
        padding-top: clamp(60px, calc(100 / var(--container) * 100vw), 100px);
    }

    .detail-content>.wrap-container>.detail-box>.info-box {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border: 1px solid #cfcfcf;
        padding: 24px;
        margin-bottom: 32px;
        border-radius: 12px;
        background: #f1f1f1;
    }

    .detail-content>.wrap-container>.detail-box>.info-box>.info-list {
        list-style: none;
        padding: 0 24px;
        margin: 0;
        border-left: 1px solid #e0e0e0;
    }

    .detail-content>.wrap-container>.detail-box>.info-box>.info-list:first-child {
        border-left: none;
    }

    .detail-content>.wrap-container>.detail-box>.info-box>.info-list>.info-item {
        display: flex;
        gap: 12px;
    }

    .detail-content>.wrap-container>.detail-box>.info-box>.info-list>.info-item:not(:last-child) {
        margin-bottom: 18px;
    }

    .detail-content>.wrap-container>.detail-box>.info-box>.info-list>.info-item>.label {
        min-width: 80px;
        font-weight: 800;
    }

    .detail-content>.wrap-container>.detail-box>.info-box>.info-list>.info-item>.value {
        color: #111;
        line-height: 1.6;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body {
        border: 1px solid #cfcfcf;
        padding: 32px;
        border-radius: 12px;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body>.notice-no {
        display: inline-block;
        margin-bottom: 16px;
        font-weight: 600;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body>.detail-title {
        font-size: 26px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body>.detail-desc {
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 40px;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body>.detail-sign {
        text-align: right;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body>.detail-sign>.date {
        display: block;
        margin-bottom: 6px;
    }

    .detail-content>.wrap-container>.detail-box>.detail-body>.detail-sign>.org {
        font-size: 18px;
    }

    .detail-content>.wrap-container>.overview>.desc-content>.info-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .detail-content>.wrap-container>.overview>.desc-content>.info-list>li {
        display: flex;
        gap: 16px;
        margin-bottom: 16px;
    }

    .detail-content>.wrap-container>.overview>.desc-content>.info-list>li>strong {
        min-width: 90px;
        font-weight: 700;
    }

    .detail-content>.wrap-container>.overview>.desc-content>.info-list>li>.sub-content {
        flex: 1;
    }

    .detail-content>.wrap-container>.overview>.desc-content .sub-title {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .detail-content>.wrap-container>.overview>.desc-content .number-list {
        margin: 8px 0 8px 18px;
    }

    .detail-content>.wrap-container>.overview>.desc-content .number-list>li {
        margin-bottom: 4px;
    }

    .detail-content>.wrap-container>.overview>.desc-content .dash-list {
        list-style: none;
        padding-left: 0;
    }

    .detail-content>.wrap-container>.overview>.desc-content .dash-list>li::before {
        content: "- ";
    }

    .detail-content>.wrap-container>.overview>.desc-content .note {
        font-size: 14px;
        margin-top: 6px;
    }

    .detail-content>.wrap-container>.overview>.desc-content>.warning-text {
        margin-top: 16px;
        color: #d10000;
        font-weight: 600;
    }

    .detail-content>.wrap-container>h3 {
        padding: 32px;
        border-radius: 12px;
        font-size: var(--font-size-24);
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
        margin-top: clamp(60px, calc(100 / var(--container) * 100vw), 100px);
    }


    @media (max-width: 768px) {
        .detail-content>.wrap-container>.overview>.desc-content>.info-list>li {
            flex-direction: column;
            gap: 4px;
        }

        .detail-content>.wrap-container>.overview>.desc-content>.info-list>li>strong {
            min-width: auto;
        }

        .detail-content>.wrap-container>.overview>.desc-content>.section-title {
            font-size: 18px;
        }

    }

    @media (max-width: 1024px) {
        .detail-content>.wrap-container>.detail-box>.info-box {
            grid-template-columns: 1fr;
        }

        .detail-content>.wrap-container>.detail-box>.info-box>.info-list {
            border-left: none;
            border-top: 1px solid #e0e0e0;
            padding: 20px 0;
        }

        .detail-content>.wrap-container>.detail-box>.info-box>.info-list:first-child {
            border-top: none;
        }

    }

    @media (max-width: 640px) {
        .detail-content>.wrap-container>.detail-box>.detail-body>.detail-title {
            font-size: 22px;
        }
    }

}

/* Background Page */

.background-sub-page {
    position: relative;

    .background-sub-page-content {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }
}

/* Program, Page Application */

.application-sub-page {
    position: relative;

    .application-sub-page-content {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .application-sub-page-content>.filter-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .application-sub-page-content>.filter-wrap>.status-buttons {
        display: flex;
        gap: 8px;
    }

    .application-sub-page-content>.filter-wrap>.status-buttons>.status-btn {
        padding: 8px 20px;
        border: 1px solid #dcdcdc;
        background: #fff;
        border-radius: 4px;
        cursor: pointer;
        color: #333;
        border-radius: 12px;
    }

    .application-sub-page-content>.filter-wrap>.status-buttons>.status-btn.active {
        border-color: #ff4242;
        background: #ffeded;
    }

    .application-sub-page-content>.filter-wrap>.search-box {
        display: flex;
        gap: 6px;
    }

    .application-sub-page-content>.filter-wrap>.search-box>input {
        width: 220px;
        padding: 8px 10px;
        border: 1px solid #dcdcdc;
        border-radius: 12px;
    }

    .application-sub-page-content>.filter-wrap>.search-box>.search-btn {
        padding: 8px 16px;
        background: linear-gradient(180deg, #89262C 0%, #BA2427 100%);
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 12px;
    }

    .application-sub-page-content>.tab-wrap {
        display: flex;
        border: 1px solid #dcdcdc;
        background: #f8fafc;
        border-radius: 12px;
        overflow: hidden;
    }

    .application-sub-page-content>.tab-wrap>.tab {
        width: 100%;
        padding: 12px 18px;
        background: #f1f3f6;
        cursor: pointer;
        color: #555;
    }

    .application-sub-page-content>.tab-wrap>.tab:not(:last-child) {
        border-right: 1px solid #dcdcdc;
    }

    .application-sub-page-content>.tab-wrap>.tab.active {
        background: #fff;
        color: #000;
        font-weight: 600;
        position: relative;
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .application-sub-page-content>.filter-wrap {
            gap: 12px;
        }

        .application-sub-page-content>.filter-wrap>.search-box>input {
            width: 180px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .application-sub-page-content>.filter-wrap {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .application-sub-page-content>.filter-wrap>.status-buttons {
            width: 100%;
        }

        .application-sub-page-content>.filter-wrap>.status-buttons>.status-btn {
            flex: 1;
            text-align: center;
        }

        .application-sub-page-content>.filter-wrap>.search-box {
            width: 100%;
        }

        .application-sub-page-content>.filter-wrap>.search-box>input {
            width: 100%;
            flex: 1;
        }
    }

    /* Tab horizontal scroll */
    @media (max-width: 768px) {
        .application-sub-page-content>.tab-wrap {
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .application-sub-page-content>.tab-wrap::-webkit-scrollbar {
            display: none;
        }

        .application-sub-page-content>.tab-wrap>.tab {
            flex-shrink: 0;
            padding: 12px 16px;
            font-size: 14px;
            width: auto;
        }
    }

    /* Small mobile */
    @media (max-width: 480px) {
        .application-sub-page-content>.filter-wrap>.status-buttons>.status-btn {
            padding: 8px 10px;
            font-size: 14px;
        }

        .application-sub-page-content>.filter-wrap>.search-box>.search-btn {
            padding: 8px 12px;
            font-size: 14px;
        }

        .application-sub-page-content>.tab-wrap>.tab {
            padding: 10px 14px;
            font-size: 13px;
        }
    }

    .application-sub-page-content>.placeholder-no-data {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 300px;
        border: 1px solid #ddd;
        border-radius: 12px;
        margin-block: 32px;
        font-size: var(--font-size-16);
        color: #555;
    }

    .application-sub-page-content>.application-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        padding-block: 32px;
    }

    .application-sub-page-content>.application-list>.application-item {
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 12px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .application-sub-page-content>.application-list>.application-item:hover {
        border-color: #ff4242;
        background: #ffeded;
        cursor: pointer;
    }

    .application-sub-page-content>.application-list>.application-item>.item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .application-sub-page-content>.application-list>.application-item>.item-header>.badges {
        display: flex;
        gap: 6px;
    }

    .application-sub-page-content>.application-list>.application-item>.item-header>.badges>.badge {
        padding: 6px 14px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 99px;
        color: #fff;
    }

    .application-sub-page-content>.application-list>.application-item>.item-header>.badges>.badge-red {
        background: linear-gradient(180deg, #89262C 0%, #BA2427 100%);
    }

    .application-sub-page-content>.application-list>.application-item>.item-header>.badges>.badge-yellow {
        background: linear-gradient(180deg, #dca40f 0%, #ffd256 100%);
    }

    .application-sub-page-content>.application-list>.application-item>.item-header>.badges>.badge-lightgray {
        background: linear-gradient(180deg, #adadad 0%, #d3d3d3 100%);
    }

    .application-sub-page-content>.application-list>.application-item>.item-header>.badges>.badge-gray {
        background: #666;
    }

    /* deadline */
    .application-sub-page-content>.application-list>.application-item>.item-header>.deadline {
        font-size: 14px;
        color: #555;
    }

    .application-sub-page-content>.application-list>.application-item>.title {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.45;
        color: #111;
        margin-bottom: auto;
    }

    .application-sub-page-content>.application-list>.application-item>.item-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 14px;
        color: #666;
    }

    @media (max-width: 1024px) {
        .application-sub-page-content>.application-list {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 640px) {
        .application-sub-page-content>.application-list {
            grid-template-columns: 1fr;
        }

        .application-sub-page-content>.application-list>.application-item>.title {
            font-size: 18px;
        }
    }


}

/* Common Table */
.sys-common {
    .form-control {
        width: 100%;
    }

    .form-control input {
        width: 100%;
        max-width: unset;
    }

    .form-control>div {
        display: flex;
        gap: 10rem;
    }

    td {

        input,
        select,
        textarea,
        label {
            width: 100% !important;
        }
    }
}

/* My Pages */
.mypages {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-block: clamp(60rem, calc(120 / var(--container) * 100vw), 160rem);

    .tab-wrap {
        display: flex;
        border: 1px solid #dcdcdc;
        background: #f8fafc;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 50rem;
    }

    .tab-wrap>.tab {
        width: 100%;
        padding: 12px 18px;
        background: #f1f3f6;
        cursor: pointer;
        color: #555;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .tab-wrap>.tab:not(:last-child) {
        border-right: 1px solid #dcdcdc;
    }

    .tab-wrap>.tab.active {
        background: #fff;
        color: #000;
        font-weight: 600;
        position: relative;
    }

    .tab-content {
        display: none;
        animation: fade .3s ease;
    }

    .tab-content.active {
        display: block;
    }

    .mp-data {

        .data {
            margin-bottom: 30rem;
        }

        .data .titl {
            display: flex;
            font-size: var(--font-size-20);
            gap: 6rem;
            align-items: center;
            margin-bottom: 20rem;
        }

        .data .table {
            width: 100%;
        }

        .data .table td,
        .data .table th {
            padding: 10rem;
            border: 1rem solid #ddd;
        }

        .data .table input {
            width: 100%;
            min-height: 40rem;
            padding-inline: 10rem;
        }

        .data .table th {
            background: #f1f3f6;
            font-size: var(--font-size-18);
        }

        .data .table-action {
            display: flex;
            justify-content: flex-end;
            margin-top: 20rem;
        }

        .data .table-action .btn-add {
            display: flex;
            padding: 10rem 25rem;
            background: #333;
            color: #fff;
        }

    }

    .mp-program {

        .table-program {}

        .table-program table {
            width: 100%;
        }

        .table-program table th,
        .table-program table td {
            padding: 15rem;
            border: 1rem solid #ddd;
        }

        .table-program table th {
            background: #f1f3f6;
        }

        .table-program table td:not(:first-child) {
            text-align: center;
        }

        .table-program table .stats {
            padding: 8rem 15rem;
            background: #f1f3f6;
            border-radius: 50rem;
        }

        .table-program table .stats.success {
            background: #67d58c;
            color: #fff;
        }

        .table-program table .stats.waiting {
            background: #f0ad68;
            color: #fff;
        }

        .table-program table .stats.cancel {
            background: #b92427;
            color: #fff;
        }

    }

}

/* About - Background */

.about-background {
    position: relative;

    .about-background-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-background-content>.overview {
        display: flex;
        flex-direction: column;
        gap: 12px;
        position: relative;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-background-content>.overview>h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .about-background-content>.overview>ul {
        font-size: var(--font-size-20);
    }

    .about-background-content>.overview>ul>li {
        display: flex;
        gap: 24px;
        padding-block: 8px;
    }

    .about-background-content>.overview>ul>li>strong {
        display: block;
        max-width: 100px;
        font-weight: 800;
    }

    .about-background-content>.overview>ul>li>span>ul>li {
        padding-block: 8px;
    }

    .about-background-content>.overview>ul>li>span>span {
        font-weight: 800;
        color: #BA2427;
    }

    .about-background-content>.overview>.desc-content {
        font-family: var(--font-sans);
        font-size: var(--font-size-20);
    }

    .about-background-content>.overview>.title {
        position: relative;
    }

    .about-background-content>.overview>.title::before {
        content: '';
        position: absolute;
        left: -40px;
        top: -40px;
        width: 176px;
        height: 138px;
        border-radius: 75px 0;
        background: linear-gradient(0deg, #F0DBDB 0%, #DBEFF0 100%);
    }

    .about-background-content>.overview>.desc-content {
        display: flex;
        align-items: center;
        gap: 95px;
    }

    .about-background-content>.overview>.desc-content>.img::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -32px;
        width: 100%;
        height: 80%;
        max-width: 482px;
        max-height: 592px;
        border-radius: 18px 18px 18px 230px;
        background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
    }

    .about-background-content>.overview>.desc-content>.img {
        position: relative;
        /* width: 100%; */
    }

    .about-background-content>.overview>.desc-content>.img>img {
        position: relative;
        /* width: 100%; */
        height: 100%;
        max-width: 482px;
        max-height: 592px;
        margin-left: 32px;
        object-fit: cover;
        object-position: center;
        border-radius: 18px 18px 18px 200px;
        overflow: hidden;
        z-index: 1;
    }

    .about-background-content>.overview>.desc-content>.text {
        display: flex;
        flex-direction: column;
        gap: 54px;
    }

    .about-background-content>.overview>.desc-content>.text>.wrap-ceo {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: 32px;
    }

    .about-background-content>.overview>.desc-content>.text>h3 {
        font-size: var(--font-size-36);
        font-family: var(--font-sans);
    }

    .about-background-content>.overview>.desc-content>.text>h3::after {
        content: '';
        display: block;
        bottom: -20px;
        left: 0;
        width: 90px;
        height: 4px;
        background-color: #BA2427;
        margin-top: 24px;
    }

    .about-background-content>.overview>.desc-content>.text>p {
        font-size: var(--font-size-18-to-14);
        font-family: var(--font-sans);
    }

    .about-background-content>.overview>.desc-content>.text>.wrap-ceo>p {
        font-weight: 600;
    }

    .about-background-content>.overview>.desc-content>.text>.wrap-ceo>.handwriting {
        font-family: var(--font-handwriting);
    }

    .about-background-content>.overview>.desc-content>.text>.wrap-ceo>span {
        color: #7e7e7e;
    }

    .about-background-content>.overview>.desc-content>.profile {
        position: relative;
        width: 100%;
    }

    .about-background-content>.overview>.desc-content>.profile .img-ceo {
        position: relative;
        border-radius: 12px;
        margin-bottom: -65px;
        z-index: 1;
    }

    .about-background-content>.overview>.desc-content>.profile>.quote-icon {
        position: absolute;
        right: 15%;
        bottom: -7%;
    }

    .about-background-content>.overview>.desc-content>.profile p {
        padding: 96px 54px 54px 54px;
        display: flex;
        color: #fff;
        width: 100%;
        max-width: 580px;
        background: linear-gradient(180deg, #89262C 0%, #BA2427 100%);
        border-radius: 12px 100px 12px 12px;
        font-size: var(--font-size-32);
        font-weight: 600;
    }

    @media (max-width: 1024px) {
        .about-background-content>.overview>.desc-content>.profile p {
            max-width: unset;
        }
    }

    marquee {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 200px;
        color: #f7f7f7;
        font-family: var(--font-primary);
        text-transform: uppercase;
        overflow: hidden;
        white-space: nowrap;
        z-index: -1;
    }


    @media (max-width: 1024px) {
        .about-background-content>.overview>.desc-content {
            flex-direction: column;
        }

        .about-background-content>.overview>.desc-content>.profile>p {
            max-width: unset;
        }

        .about-background-content>.overview>.desc-content>.profile>.quote-icon {
            bottom: -9%;
        }

    }
}

/* About - Cluster Overview */

.about-cluster {
    position: relative;

    .about-cluster-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-cluster-content>.detail-cluster {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 56px;
        width: 100%;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-cluster-content>.detail-cluster>.title,
    .about-cluster-content>.detail-cluster>.desc {
        position: relative;
        text-align: center;
    }

    .about-cluster-content>.detail-cluster>.title>p {
        font-size: var(--font-size-24);
    }

    .about-cluster-content>.detail-cluster>.title>.quote-start {
        position: absolute;
        left: -15%;
        bottom: 62%;
    }

    .about-cluster-content>.detail-cluster>.title>.quote-end {
        position: absolute;
        right: -15%;
        top: 62%;
    }

    .about-cluster-content>.detail-cluster>.desc {
        position: relative;
        max-width: 842px;
        font-size: var(--font-size-18);
    }

    .about-cluster-content>.detail-cluster>.desc::before {
        content: '';
        position: absolute;
        width: 100%;
        max-width: 462px;
        height: 207px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        background: url('/assets/images/components/logo-holo.png') center / contain no-repeat;
        z-index: -1;
    }

    .about-cluster-content>.detail-cluster>.point-wrap {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas: "grid-1 grid-1 grid-2 grid-2 grid-3 grid-3" ". grid-4 grid-4 grid-5 grid-5 .";
        width: 100%;
        max-width: 720px;
        font-size: var(--font-size-20);
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point {
        position: relative;
        display: flex;
        padding: 32px;
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point.grid-1 {
        grid-area: grid-1;
        border-bottom: 1px solid #ddd;
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point.grid-2 {
        grid-area: grid-2;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point.grid-3 {
        grid-area: grid-3;
        border-bottom: 1px solid #ddd;
        border-left: 1px solid #ddd;
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point.grid-4 {
        grid-area: grid-4;
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point.grid-5 {
        grid-area: grid-5;
        border-left: 1px solid #ddd;
    }

    .about-cluster-content>.detail-cluster>.point-wrap .point::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background-color: #BA2427;
        margin-right: 16px;
        margin-top: 8px;
    }

    .about-cluster-content>.detail-cluster>.point-wrap>.top {
        display: flex;
        border-bottom: 1px solid #ddd;
    }

    .about-cluster-content>.detail-cluster>.point-wrap>.top>.point:not(:first-child) {
        border-left: 1px solid #ddd;
    }

    .about-cluster-content>.detail-cluster>.point-wrap>.bottom {
        display: flex;
    }

    .about-cluster-content>.detail-cluster>.point-wrap>.bottom>.point:last-child {
        border-left: 1px solid #ddd;
    }


    @media (max-width: 1024px) {
        .about-cluster-content>.detail-cluster>.desc {
            margin-top: 32px;
        }

        .about-cluster-content>.detail-cluster>.title>.quote-start {
            left: 5%;
            bottom: 90%;
        }

        .about-cluster-content>.detail-cluster>.title>.quote-end {
            right: 5%;
            top: 115%;
        }

        .about-cluster-content>.detail-cluster>.point-wrap {
            grid-template-rows: repeat(3, 1fr);
            grid-template-areas:
                "grid-1 grid-1 grid-1 grid-2 grid-2 grid-2"
                "grid-3 grid-3 grid-3 grid-3 grid-3 grid-3"
                "grid-4 grid-4 grid-4 grid-5 grid-5 grid-5";
        }

        .about-cluster-content>.detail-cluster>.point-wrap>.point {
            justify-content: center;
        }

        .about-cluster-content>.detail-cluster>.point-wrap .point.grid-3 {
            border-left: unset;
        }

    }
}

/* About - Vision */

.about-vision {
    position: relative;

    .about-vision-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-vision-content>.statement {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-vision-content>.statement>.section {
        margin-bottom: 50px;
        text-align: center;
    }

    .about-vision-content>.statement>.section>.badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 22px;
        border-radius: 20px;
        font-weight: 600;
        margin-bottom: 16px;
        font-size: 14px;
    }

    .about-vision-content>.statement>.section>.badge>.text {
        font-size: 16px;
        line-height: 1.6;
        word-break: keep-all;
    }

    .about-vision-content>.statement>.card-wrapper {
        display: flex;
        justify-content: center;
        gap: 24px;
        margin-top: 40px;
        width: 100%;
    }

    .about-vision-content>.statement>.card-wrapper>.card {
        width: 220px;
        padding: 20px;
        border: 1px solid #f0dede;
        background-color: #fffafa;
        text-align: center;
        border-radius: 40px 8px;
    }

    .about-vision-content>.statement>.card-wrapper>.card p {
        font-size: 15px;
        font-weight: 500;
    }

    @media (max-width: 1024px) {
        .about-vision-content>.statement>.card-wrapper>.card {
            width: 200px;
        }
    }

    @media (max-width: 768px) {
        .about-vision-content>.statement>.section>.badge>.text {
            font-size: 15px;
        }

        .about-vision-content>.statement>.card-wrapper {
            flex-direction: column;
            align-items: center;
        }

        .about-vision-content>.statement>.card-wrapper>.card {
            width: 100%;
            max-width: 320px;
        }

    }

    @media (max-width: 480px) {
        .about-vision-content>.statement>.section>.badge {
            font-size: 13px;
            padding: 6px 18px;
        }

        .about-vision-content>.statement>.section>.badge>.text {
            font-size: 14px;
        }

    }

    /* --- */

    .about-vision-content>.goal {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fefbfb;
        width: 100%;
        overflow: hidden;
    }

    .about-vision-content>.goal>img {
        width: 100%;
    }

    .about-vision-content>.goal>.title {
        position: relative;
        padding: 80px 20px 32px 20px;
        text-align: center;
        width: 100%;
    }

    .about-vision-content>.goal>.title>img {
        position: absolute;
        width: 100%;
        height: fit-content;
        top: 0;
        left: 0;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
    }

    .about-vision-content>.goal>.title>.hero-text {
        max-width: 800px;
        margin: 20px auto 0;
        font-size: 16px;
        line-height: 1.7;
        word-break: keep-all;
    }

    .about-vision-content>.goal>.title>.badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 24px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        margin-top: 54px;
    }

    .about-vision-content>.goal>.content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        width: 100%;
        padding: 60px 20px 80px;
        text-align: center;
    }

    .about-vision-content>.goal>.content>.badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 24px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        width: fit-content;
    }

    .about-vision-content>.goal>.content>.card-wrapper {
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-template-areas:
            "grid-1 grid-1 grid-2 grid-2 grid-3 grid-3"
            ". grid-4 grid-4 grid-5 grid-5 .";
        gap: 30px;
        width: 100%;
        max-width: 1045px;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card.grid-1 {
        grid-area: grid-1;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card.grid-2 {
        grid-area: grid-2;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card.grid-3 {
        grid-area: grid-3;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card.grid-4 {
        grid-area: grid-4;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card.grid-5 {
        grid-area: grid-5;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card {
        padding: 32px 20px;
        border: 1px solid #f2dede;
        background-color: #fff;
        border-radius: 40px 8px;
    }

    .about-vision-content>.goal>.content>.card-wrapper>.card>p {
        font-size: 15px;
        line-height: 1.5;
        word-break: keep-all;
    }


    @media (max-width: 1024px) {}

    @media (max-width: 768px) {
        .about-vision-content>.goal>.title {
            padding: 60px 16px 80px;
        }

        .about-vision-content>.goal>.title>.hero-text {
            font-size: 15px;
        }

        .about-vision-content>.goal>.content>.card-wrapper {
            grid-template-rows: repeat(3, 1fr);
            grid-template-areas:
                "grid-1 grid-1 grid-1 grid-2 grid-2 grid-2"
                "grid-3 grid-3 grid-3 grid-3 grid-3 grid-3"
                "grid-4 grid-4 grid-4 grid-5 grid-5 grid-5";
        }

    }

    @media (max-width: 480px) {
        .about-vision-content>.goal>.content>.badge {
            font-size: 13px;
            padding: 6px 18px;
        }

        .about-vision-content>.goal>.content>.badge>.card>p {
            font-size: 14px;
        }

    }

    /* --- */

    .about-vision-content>.task {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 40px;
        overflow: hidden;
    }

    .about-vision-content>.task>img {
        width: 100%;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
    }

    .about-vision-content>.task>.title-wrap {
        text-align: center;
        margin-bottom: 32px;
    }

    .about-vision-content>.task>.title-wrap>.badge {
        display: inline-block;
        background: #b32626;
        color: #fff;
        padding: 10px 26px;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 600;
    }

    .about-vision-content>.task>.rise-layout {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .about-vision-content>.task>.rise-layout>img {
        width: 100%;
        max-width: 542px;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 22px;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(1)>img {
        background-color: #b32626;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(2)>img {
        background-color: #A5524B;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(3)>img {
        background-color: #B5666D;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(4)>img {
        background-color: #DAA3A3;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(5)>img {
        background-color: #E4CACA;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(3) {
        margin-left: 128px;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(2),
    .about-vision-content>.task>.rise-layout>.list-wrap>.item:nth-child(4) {
        margin-left: 64px;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item>img {
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item>.box {
        background: #fafafa;
        border-radius: 12px;
        padding: 16px 20px;
        border-left: 2px solid #b32626;
        flex: 1;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item>.box>h4 {
        font-size: 14px;
        font-weight: 700;
        color: #b32626;
    }

    .about-vision-content>.task>.rise-layout>.list-wrap>.item>.box>p {
        font-size: 14px;
        line-height: 1.5;
    }


    @media (max-width: 1024px) {
        .about-vision-content>.task>.rise-layout {
            flex-direction: column;
            gap: 32px;
        }

        .about-vision-content>.task>.rise-layout>.list-wrap>.item {
            margin-left: 0 !important;
        }

    }

    @media (max-width: 600px) {
        .about-vision-content>.task>.rise-layout>.list-wrap>.item>.box {
            padding: 14px 16px;
        }

        .about-vision-content>.task>.rise-layout>.list-wrap>.item>.box h4,
        .about-vision-content>.task>.rise-layout>.list-wrap>.item>.box p {
            font-size: 13px;
        }

    }

    /* --- */

    .about-vision-content>.promotion {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 40px;
        background-color: #fefbfb;
        padding-bottom: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        overflow: hidden;
    }

    .about-vision-content>.promotion>img {
        width: 100%;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.1));
    }

    .about-vision-content>.promotion>.title-wrap {
        text-align: center;
        margin-bottom: 32px;
    }

    .about-vision-content>.promotion>.title-wrap>.badge {
        display: inline-block;
        background: #b32626;
        color: #fff;
        padding: 10px 26px;
        border-radius: 24px;
        font-size: 14px;
        font-weight: 600;
    }

    .about-vision-content>.promotion>p {
        max-width: 800px;
        border-radius: 16px;
        border: 1px solid rgba(186, 36, 39, 0.12);
        padding: 32px;
        background-color: #fff;
        text-align: center;
    }

}

/* About - Expected */

.about-expected {
    position: relative;

    .about-expected-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .about-expected-content>.what-is {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        gap: 64px;
        align-items: center;
        width: 100%;
    }

    .about-expected-content>.what-is>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .about-expected-content>.what-is>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-expected-content>.what-is>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .about-expected-content>.what-is>.title>h3 {
        font-size: var(--font-size-36);
    }

    .about-expected-content>.what-is>.block-wrap {
        display: flex;
        flex-direction: column;
    }

    .about-expected-content>.what-is>.block-wrap>.block-01 {
        position: relative;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-24);
        padding: 54px 54px 54px 450px;
        background-color: #f8f8f8;
        border-radius: 12px 100px 12px 12px;
    }

    .about-expected-content>.what-is>.block-wrap>.block-01>span {
        color: #BA2427;
        margin-bottom: 16px;
    }

    .about-expected-content>.what-is>.block-wrap>.block-01::before {
        content: '';
        position: absolute;
        width: 100%;
        max-width: 462px;
        height: 207px;
        right: 54px;
        bottom: 0;
        display: block;
        background: url(/assets/images/components/logo-holo.png) center / contain no-repeat;
        z-index: -1;
    }

    .about-expected-content>.what-is>.block-wrap>.block-01 .img-cover {
        position: absolute;
        left: 54px;
        border-radius: 12px;
    }

    .about-expected-content>.what-is>.block-wrap>.block-01>.img-quote {
        position: absolute;
        right: 10%;
        bottom: -14%;
        width: 90px;
    }

    .about-expected-content>.what-is>.block-wrap>.block-02 {
        position: relative;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-20);
        padding: 54px 54px 54px 450px;
        border-radius: 12px 100px 12px 12px;
    }

    .about-expected-content>.what-is>.block-wrap>.block-02>p {
        display: flex;
        padding: 16px;
    }

    .about-expected-content>.what-is>.block-wrap>.block-02>p::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        background-color: #BA2427;
        margin-right: 16px;
        margin-top: 8px;
    }

    /* --- */

    .about-expected-content>.business {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        gap: 64px;
        align-items: center;
        width: 100%;
        border-radius: 0 240px;
        background: linear-gradient(180deg, #FCF8F8 0%, #F6EAEA 100%);


    }

    .about-expected-content>.business>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .about-expected-content>.business>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-expected-content>.business>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .about-expected-content>.business>.title>h3 {
        font-size: var(--font-size-36);
    }

    .about-expected-content>.business>.block-01 {
        position: relative;
        display: flex;
        flex-direction: column;
        font-size: var(--font-size-20);
        padding: 54px 54px 54px 450px;
        background-color: #fff;
        border-radius: 12px 100px 12px 12px;
    }

    .about-expected-content>.business>.block-01::before {
        content: '';
        position: absolute;
        width: 100%;
        max-width: 462px;
        height: 207px;
        right: 54px;
        bottom: 0;
        display: block;
        background: url(/assets/images/components/logo-holo.png) center / contain no-repeat;
        z-index: -1;
    }

    .about-expected-content>.business>.block-01>ul {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .about-expected-content>.business>.block-01>ul>li {
        display: flex;
    }

    .about-expected-content>.business>.block-01>ul>li::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        background-color: #BA2427;
        margin-right: 16px;
        margin-top: 8px;
    }

    .about-expected-content>.business>.block-01 .img-cover {
        position: absolute;
        left: 54px;
        border-radius: 12px;
    }

    .about-expected-content>.business>.block-01>.img-quote {
        position: absolute;
        right: 10%;
        bottom: -14%;
        width: 90px;
    }

    /* --- */

    .about-expected-content>.business>.wrap-tab {
        display: flex;
        flex-direction: column;
        gap: 40px;
        /* width: 100%; */
        margin-top: 262px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target] {
        display: none;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target].active {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .about-expected-content>.business>.wrap-tab>.tabs {
        display: flex;
    }

    .about-expected-content>.business>.wrap-tab>.tabs>.tab-button {
        display: flex;
        min-width: 240px;
        padding: 14px 24px;
        justify-content: center;
        align-items: center;
        font-size: var(--font-size-20);
        background-color: #fff;
    }

    @media (max-width:768px) {
        .about-expected-content>.business>.wrap-tab>.tabs {
            flex-direction: column;
        }
    }

    .about-expected-content>.business>.wrap-tab>.tabs>.tab-button.active {
        background-color: #BA2427;
        color: #fff;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.desc {
        display: flex;
        background-color: #fff;
        border-radius: 12px;
        border: 1px solid #ddd;
        overflow: hidden;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.desc>.inr-wrap {
        display: flex;
    }

    @media (max-width: 768px) {
        .about-expected-content>.business>.wrap-tab>.content>[data-target]>.desc>.inr-wrap {
            flex-direction: column;
        }
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.desc>.inr-wrap>p {
        padding: 20px;
        margin-right: 100px;
        font-size: var(--font-size-20);
        font-weight: 700;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.desc>.inr-wrap>ul>li {
        display: flex;
        padding: 20px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.desc>.inr-wrap>ul>li::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background-color: #BA2427;
        margin-right: 16px;
        margin-top: 8px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>span::before {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        background-color: #BA2427;
        margin-right: 16px;
        margin-top: 8px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>span {
        display: flex;
        padding-inline: 20px;
        margin-bottom: 20px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>p {
        text-align: center;
        background-color: #827B73;
        color: #fff;
        font-size: var(--font-size-20);
        padding-block: 8px;
        margin-bottom: 20px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>.wrap {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 20px;
        padding: 0 20px 20px 20px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>.wrap>.box {
        display: flex;
        flex-direction: column;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #ddd;
        width: 100%;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>.wrap>.box>p {
        text-align: center;
        background-color: #827B73;
        color: #fff;
        font-size: var(--font-size-20);
        padding-block: 8px;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target]>.table>.wrap>.box>.point>p {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        min-height: 82px;
        font-size: var(--font-size-18);
        border: 1px solid #ddd;
        border-radius: 12px;
        text-align: center;
        background-color: #F5F5F5;
    }

    /* Tab 1 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab1"]>.table>.wrap>.box>.point {
        display: inline-grid;
        padding: 20px;
        row-gap: 12px;
        column-gap: 12px;
        align-self: stretch;
        grid-template-rows: repeat(2, fit-content(100%));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        background-color: #fff;
    }

    /* Tab 2 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box>.point {
        display: inline-grid;
        padding: 20px;
        row-gap: 12px;
        column-gap: 12px;
        align-self: stretch;
        grid-template-rows: repeat(2, fit-content(100%));
        grid-template-columns: repeat(6, minmax(0, 1fr));
        background-color: #fff;
    }

    /* Box 1 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point {
        grid-template-areas:
            "grid-1 grid-1 grid-2 grid-2 grid-3 grid-3"
            "grid-4 grid-4 grid-5 grid-5 grid-6 grid-6";
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point>p:nth-child(1) {
        grid-area: grid-1;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point>p:nth-child(2) {
        grid-area: grid-2;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point>p:nth-child(3) {
        grid-area: grid-3;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point>p:nth-child(4) {
        grid-area: grid-4;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point>p:nth-child(5) {
        grid-area: grid-5;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box1"]>.point>p:nth-child(6) {
        grid-area: grid-6;
    }

    /* Box 2 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box2"]>.point {
        grid-template-areas:
            "grid-1 grid-1 grid-2 grid-2 grid-3 grid-3"
            "grid-4 grid-4 grid-4 grid-5 grid-5 grid-5";
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box2"]>.point>p:nth-child(1) {
        grid-area: grid-1;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box2"]>.point>p:nth-child(2) {
        grid-area: grid-2;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box2"]>.point>p:nth-child(3) {
        grid-area: grid-3;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box2"]>.point>p:nth-child(4) {
        grid-area: grid-4;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box2"]>.point>p:nth-child(5) {
        grid-area: grid-5;
    }

    /* Box 3 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box3"]>.point {
        grid-template-areas:
            "grid-1 grid-1 grid-2 grid-2 grid-3 grid-3"
            "grid-4 grid-4 grid-5 grid-5 grid-5 grid-5";
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box3"]>.point>p:nth-child(1) {
        grid-area: grid-1;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box3"]>.point>p:nth-child(2) {
        grid-area: grid-2;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box3"]>.point>p:nth-child(3) {
        grid-area: grid-3;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box3"]>.point>p:nth-child(4) {
        grid-area: grid-4;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab2"]>.table>.wrap>.box[data-box="box3"]>.point>p:nth-child(5) {
        grid-area: grid-5;
    }

    /* Tab 3 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box>.point {
        display: inline-grid;
        padding: 20px;
        height: 100%;
        gap: 12px;
        /* align-self: stretch; */
        /* grid-template-rows: repeat(2, fit-content(100%)); */
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        background-color: #fff;
    }

    /* Box 1 */



    /* Box 2 */



    /* Box 4 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box4"]>.point {
        grid-template-areas:
            "grid-1 grid-1 grid-1 grid-2 grid-2 grid-2"
            "grid-3 grid-3 grid-3 grid-4 grid-4 grid-4";
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box4"]>.point>p:nth-child(1) {
        grid-area: grid-1;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box4"]>.point>p:nth-child(2) {
        grid-area: grid-2;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box4"]>.point>p:nth-child(3) {
        grid-area: grid-3;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box4"]>.point>p:nth-child(4) {
        grid-area: grid-4;
    }

    /* Box 5 */

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box5"]>.point {
        grid-template-areas:
            "grid-1 grid-1 grid-1 grid-2 grid-2 grid-2"
            "grid-3 grid-3 grid-3 grid-4 grid-4 grid-4";
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box5"]>.point>p:nth-child(1) {
        grid-area: grid-1;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box5"]>.point>p:nth-child(2) {
        grid-area: grid-2;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box5"]>.point>p:nth-child(3) {
        grid-area: grid-3;
    }

    .about-expected-content>.business>.wrap-tab>.content>[data-target="tab3"]>.table>.wrap>.box[data-box="box5"]>.point>p:nth-child(4) {
        grid-area: grid-4;
    }

    /* Box 6 */

    /* --- */

    .about-expected-content>.goals {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        gap: 64px;
        align-items: center;
        width: 100%;
    }

    .about-expected-content>.goals .badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 22px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 14px;
    }

    .about-expected-content>.goals>p {
        font-size: var(--font-size-18);
        max-width: 640px;
        text-align: center;
    }

    .about-expected-content>.goals>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .about-expected-content>.goals>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-expected-content>.goals>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .about-expected-content>.goals>.title>h3 {
        font-size: var(--font-size-36);
    }

    .about-expected-content>.goals>.checklist-01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .about-expected-content>.goals .wrap-check {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
        max-width: 920px;
    }

    .about-expected-content>.goals .wrap-check>.check {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 32px;
        border-radius: 40px 8px;
        border: 1px solid rgba(186, 36, 39, 0.12);
        background-color: #fff;
    }

    .about-expected-content>.goals .wrap-check>.check>span {
        font-size: var(--font-size-36);
        font-weight: 800;
        color: #BA2427;
    }

    .about-expected-content>.goals .wrap-check>.check>i {
        font-size: var(--font-size-16);
    }

    /* --- */

    .about-expected-content>.goals-02 {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        gap: 64px;
        align-items: center;
        width: 100%;
        border-radius: 0 240px 0 0;
        background: linear-gradient(180deg, #FCF8F8 0%, #F6EAEA 100%);
    }

    .about-expected-content>.goals-02 .badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 22px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 14px;
    }

    .about-expected-content>.goals-02>p {
        font-size: var(--font-size-18);
        max-width: 640px;
        text-align: center;
    }

    .about-expected-content>.goals-02>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .about-expected-content>.goals-02>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .about-expected-content>.goals-02>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .about-expected-content>.goals-02>.title>h3 {
        font-size: var(--font-size-36);
    }

    .about-expected-content>.goals-02>.checklist-01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .about-expected-content>.goals-02 .wrap-check {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
        width: 100%;
        max-width: 920px;
    }

    .about-expected-content>.goals-02 .wrap-check>.check {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 32px;
        border-radius: 40px 8px;
        border: 1px solid rgba(186, 36, 39, 0.12);
        background-color: #fff;
    }

    .about-expected-content>.goals-02 .wrap-check>.check>span {
        font-size: var(--font-size-36);
        font-weight: 800;
        color: #BA2427;
    }

    .about-expected-content>.goals-02 .wrap-check>.check>i {
        font-size: var(--font-size-16);
    }
}

/* Participating - Companies */

.participating-companies {
    position: relative;

    .participating-companies-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .participating-companies-content>.companies {
        width: 100%;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .participating-companies-content>.companies>.list {
        display: grid;
        grid-template-columns: repeat(5, minmax(250px, auto));
        row-gap: 32px;
        column-gap: 20px;
        margin-bottom: 32px;
    }

    @media (max-width: 1280px) {
        .participating-companies-content>.companies>.list {
            grid-template-columns: repeat(4, minmax(200px, auto));
        }
    }

    @media (max-width: 1024px) {
        .participating-companies-content>.companies>.list {
            grid-template-columns: repeat(3, minmax(200px, auto));
        }
    }

    @media (max-width: 768px) {
        .participating-companies-content>.companies>.list {
            grid-template-columns: repeat(2, minmax(200px, auto));
        }
    }

    @media (max-width: 480px) {
        .participating-companies-content>.companies>.list {
            grid-template-columns: repeat(1, minmax(200px, auto));
        }
    }

    .participating-companies-content>.companies>.list>a {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* .participating-companies-content>.companies>.list>a>.img::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
        z-index: -1;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .participating-companies-content>.companies>.list>a:hover .img::before {
        top: 0;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    } */

    .participating-companies-content>.companies>.list>a:hover .img {
        border-color: #BA2427;
    }

    .participating-companies-content>.companies>.list>a>.img {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #ddd;
        height: 158px;
    }

    .participating-companies-content>.companies>.list>a>.img>img {
        width: 100%;
        height: 100%;
        max-height: 72px;
        object-fit: contain;
        object-position: center;
    }

}

/* Participating - Institution */

.participating-institutes {
    position: relative;

    .participating-institutes-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .participating-institutes-content>.institutes {
        width: 100%;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .participating-institutes-content>.institutes>.list {
        display: grid;
        grid-template-columns: repeat(5, minmax(200px, auto));
        row-gap: 32px;
        column-gap: 20px;
        margin-bottom: 32px;
    }

    @media (max-width: 1280px) {
        .participating-institutes-content>.institutes>.list {
            grid-template-columns: repeat(4, minmax(200px, auto));
        }
    }

    @media (max-width: 1024px) {
        .participating-institutes-content>.institutes>.list {
            grid-template-columns: repeat(3, minmax(200px, auto));
        }
    }

    @media (max-width: 768px) {
        .participating-institutes-content>.institutes>.list {
            grid-template-columns: repeat(2, minmax(200px, auto));
        }
    }

    @media (max-width: 480px) {
        .participating-institutes-content>.institutes>.list {
            grid-template-columns: repeat(1, minmax(200px, auto));
        }
    }

    .participating-institutes-content>.institutes>.list>a {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* .participating-institutes-content>.institutes>.list>a>.img::before {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #9C2B32 0%, #BA2427 100%);
        z-index: -1;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .participating-institutes-content>.institutes>.list>a:hover .img::before {
        top: 0;
        transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    } */

    .participating-institutes-content>.institutes>.list>a:hover .img {
        border-color: #BA2427;
    }

    .participating-institutes-content>.institutes>.list>a>.img {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #ddd;
        height: 158px;
    }

    .participating-institutes-content>.institutes>.list>a>.img>img {
        width: 100%;
        height: 100%;
        max-height: 72px;
        object-fit: contain;
        object-position: center;
    }

}

/* Program - Support */

.program-support {
    position: relative;

    .program-support-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .program-support-content>.overview {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .program-support-content>.overview img {
        width: 100%;
        height: 364px;
        object-fit: cover;
        object-position: center;
        border-radius: 12px 100px;
    }

    .program-support-content>.overview>.wrap-content {
        display: flex;
        width: 100%;
        max-width: 800px;
        padding: 24px 64px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: #FFF;
        margin-top: -100px;
    }

    .program-support-content>.overview>.wrap-content>p {
        text-align: center;
    }

    .program-support-content>.overview>.wrap-content>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .program-support-content>.overview>.wrap-content>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .program-support-content>.overview>.wrap-content>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .program-support-content>.overview>.wrap-content>.title>h3 {
        font-size: var(--font-size-36);
    }


    /* --- */

    .program-support-content>.program-types {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        gap: 64px;
        align-items: center;
        width: 100%;
        border-radius: 0 240px 0 0;
        background: linear-gradient(180deg, #F0DBDB 0%, #ffffff 100%);
    }

    @media (max-width: 1024px) {
        .program-support-content>.program-types {
            border-radius: 0 100px 0 0;
        }
    }

    .program-support-content>.program-types .badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 22px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 14px;
    }

    .program-support-content>.program-types>p {
        font-size: var(--font-size-18);
        max-width: 640px;
        text-align: center;
    }

    .program-support-content>.program-types>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .program-support-content>.program-types>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .program-support-content>.program-types>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .program-support-content>.program-types>.title>h3 {
        font-size: var(--font-size-36);
    }

    .program-support-content>.program-types>.checklist-01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .program-support-content>.program-types .wrap-check {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        width: 100%;
        max-width: 920px;
    }

    .program-support-content>.program-types .wrap-check>.check {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 32px;
        border-radius: 40px 8px;
        border: 1px solid rgba(186, 36, 39, 0.12);
        background-color: #fff;
    }

    .program-support-content>.program-types .wrap-check>.check>i {
        font-size: var(--font-size-16);
    }


    @media (max-width: 640px) {
        .program-support-content>.program-types .wrap-check {
            grid-template-columns: 1fr;
        }
    }
}

/* Statistics - Summary */

.statistics-summary {
    position: relative;

    .statistics-summary-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .statistics-summary-content>.overview {
        padding-top: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .statistics-summary-content>.overview>img {
        width: 100%;
        border-radius: 12px 100px;
    }

    .statistics-summary-content>.overview .title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .statistics-summary-content>.overview .title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .statistics-summary-content>.overview .title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .statistics-summary-content>.overview .title>h3 {
        font-size: var(--font-size-36);
    }

    .statistics-summary-content>.overview>p {
        font-size: var(--font-size-18);
        max-width: 640px;
        text-align: center;
    }

    .statistics-summary-content>.overview>.wrap-data {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .statistics-summary-content>.overview>.wrap-data img {
        width: 100%;
        height: 364px;
        object-fit: cover;
        object-position: center;
        border-radius: 12px 100px;
    }

    .statistics-summary-content>.overview>.wrap-data>.wrap-content {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: -71px;
        z-index: 1;
        border: 1px solid #ddd;
        border-radius: 0 54px;
        overflow: hidden;
        width: 100%;
        max-width: 600px;
        background-color: #fff;
    }

    .statistics-summary-content>.overview>.wrap-data>.wrap-content>span {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px 64px;
        gap: 24px;
        background-color: #fff;
        width: 100%;
    }

    .statistics-summary-content>.overview>.wrap-data>.wrap-content>span:first-child {
        border-right: 1px solid #ddd;
    }

    .statistics-summary-content>.overview>.wrap-data>.wrap-content>span>svg {
        width: 40px;
        height: 100%;
    }

    .statistics-summary-content>.overview>.wrap-data>.wrap-content>span>.data {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .statistics-summary-content>.overview>.wrap-data>.wrap-content>span>.data>span {
        color: #BA2427;
        font-size: var(--font-size-28);
        font-style: normal;
        font-weight: 700;
        line-height: 100%;
    }


    /* --- */

    .statistics-summary-content>.performance {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        width: 100%;
        border-radius: 0 240px;
        background: linear-gradient(180deg, #FCF8F8 0%, #F6EAEA 100%);
    }

    @media (max-width: 1024px) {
        .statistics-summary-content>.performance {
            border-radius: 0 100px;
        }
    }

    .statistics-summary-content>.performance .title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .statistics-summary-content>.performance .title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .statistics-summary-content>.performance .title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .statistics-summary-content>.performance .title>h3 {
        font-size: var(--font-size-36);
    }

    .statistics-summary-content>.performance>p {
        font-size: var(--font-size-18);
        max-width: 640px;
        text-align: center;
    }

    .statistics-summary-content>.performance>.achievements {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        width: 100%;
    }

    .statistics-summary-content>.performance>.achievements>.badge {
        display: inline-block;
        background-color: #b32626;
        color: #fff;
        padding: 8px 22px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 14px;
        width: fit-content;
    }

    .statistics-summary-content>.performance>.achievements>.wrap-card {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        gap: 24px;
        width: 100%;
        justify-content: center;
        max-width: 1000px;
    }

    .statistics-summary-content>.performance>.achievements>.wrap-card>.card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 32px;
        border-radius: 40px 8px;
        border: 1px solid rgba(186, 36, 39, 0.12);
        background-color: #fff;
        width: 100%;
    }

    .statistics-summary-content>.performance>.achievements>.wrap-card>.card>p {
        text-align: center;
    }

    /* --- */

    .statistics-summary-content>.summary {
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }

    .statistics-summary-content>.summary>p {
        font-size: var(--font-size-18);
        max-width: 640px;
        text-align: center;
    }

    .statistics-summary-content>.summary>.title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;
        margin-bottom: 32px;
    }

    .statistics-summary-content>.summary>.title::before {
        content: "";
        width: 80px;
        height: 4px;
        background-color: #BA2427;
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .statistics-summary-content>.summary>.title>span {
        font-family: var(--font-handwriting);
        font-size: var(--font-size-70);
        color: #BA2427;
    }

    .statistics-summary-content>.summary>.title>h3 {
        font-size: var(--font-size-36);
    }

    .statistics-summary-content>.summary>.checklist-01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }

    .statistics-summary-content>.summary .wrap-check {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        width: 100%;
        max-width: 920px;
    }

    .statistics-summary-content>.summary .wrap-check>.check {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 32px;
        border-radius: 40px 8px;
        border: 1px solid rgba(186, 36, 39, 0.12);
        background-color: #fff;
    }

    .statistics-summary-content>.summary .wrap-check>.check>i {
        font-size: var(--font-size-16);
    }

}

/* Sub05 - Statistic - 02 */

.statistic-sub02 {
    position: relative;

    .sub02-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .data-statistic {
        position: relative;
        padding-top: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
    }

    .data-statistic .tit-cont {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .data-statistic .tit-cont h4 {
        font-size: var(--font-size-36);
        margin-bottom: 24rem;
    }

    .data-statistic .tit-cont>p {
        font-size: var(--font-size-18);
        margin-top: 40rem;
    }

    .statistic-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 100px;
        padding-top: clamp(60rem, calc(100 / var(--container) * 100vw), 70rem);
    }

    .statistic-content>.title {
        display: flex;
        flex-direction: column;
        /* width: 100%; */
        color: #fff;
    }

    .statistic-content .title p {
        font-family: var(--font-sans);
        font-size: var(--font-size-32);
    }

    .statistic-content .title h1 {
        font-family: var(--font-primary);
        font-size: var(--font-size-60);
    }

    .statistic-content>.title span {
        display: block;
        font-size: var(--font-size-22);
        margin-top: 24px;
    }

    .statistic-content .title .desc {
        display: flex;
        font-size: var(--font-size-22);
        margin-top: 54px;
    }

    .statistic-content .tab-chart {
        width: 100%;
        max-width: 925px;
    }

    .statistic-content .tab-chart .tab-wrap {
        display: flex;
        width: fit-content;
        overflow: hidden;
        border-radius: 14px 0 0 0;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text p {
        font-size: var(--font-size-28);
        font-weight: 700;
    }

    .statistic-content .tab-chart .chart-wrap .chart .title .text span {
        font-size: var(--font-size-22);
        color: #9C2B32;
    }

    .statistic-content .tab-chart .tab-wrap .tab {
        display: flex;
        align-items: end;
    }

    .statistic-content .tab-chart .tab-wrap .tab:not(:first-child) {
        margin-left: -40px;
    }

    .statistic-content .tab-chart .tab-wrap .tab>p {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 50px;
        height: 100%;
        color: #9C2B32;
        background-color: #F7E9E9;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg {
        fill: #F7E9E9;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg:first-child {
        margin-right: -1px;
    }

    .statistic-content .tab-chart .tab-wrap .tab>svg:last-child {
        margin-left: -1px;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active>svg {
        fill: #fff;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active {
        color: #000;
        font-weight: 800;
        z-index: 2;
    }

    .statistic-content .tab-chart .tab-wrap .tab.active>p {
        background-color: #fff;
    }

    .statistic-content .tab-chart .tab-wrap .tab[data-tab="tab1"] {
        border-radius: 28px 0 0 0;
        /* overflow: hidden; */
    }

    .statistic-content .tab-chart .chart-wrap .chart {
        display: none;
    }

    .statistic-content .tab-chart .chart-wrap .chart.active {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        padding: 54px;
        border-radius: 28px 28px 28px 28px;
        box-shadow: 0 4px 2px 0 rgba(60, 64, 67, 0.12), 0 0px 6px 2px rgba(60, 64, 67, 0.08);
    }

    .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap {
        width: 100%;
        height: 415px;
    }

    .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap canvas {
        width: 100%;
        height: 100%;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab1"] {
        background: url(/assets/images/components/bg-overlay-chart-1.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab2"] {
        background: url(/assets/images/components/bg-overlay-chart-2.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab3"] {
        background: url(/assets/images/components/bg-overlay-chart-3.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab4"] {
        background: url(/assets/images/components/bg-overlay-chart-4.png) no-repeat center / cover;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab3"] .title>img {
        width: 38px;
        height: 38px;
    }

    .statistic-content .tab-chart .chart-wrap [data-target="tab4"] .title>img {
        width: 38px;
        height: 38px;
    }

    @media (max-width: 1280px) {
        .statistic-content {
            flex-direction: column;
        }

        .statistic-content>.title {
            width: 100%;
            align-items: center;
        }

        .statistic-content .title .desc {
            text-align: center;
        }

    }

    @media (max-width: 1024px) {
        .statistic-content .tab-chart .tab-wrap .tab {
            padding: 12px 24px;
        }

        .statistic-content .tab-chart .chart-wrap .chart .canvas-wrap {
            height: 265px;
        }

        .statistic-content .tab-chart .chart-wrap .chart.active {
            padding: 32px;
        }

    }
}

/* Sub07 - Sub01 */

.participation-question {
    position: relative;

    .participation-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .sys-common {
        width: 100%;
    }

    .captcha-numb {
        background-color: #222;
        color: #fff;
        height: 39rem;
        position: static;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-inline: 15rem;
        font-style: normal;
        letter-spacing: 2rem;
    }

}

/* Sub07 - Sub02 */

.contact-person {
    position: relative;

    .contact-person-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
    }

    .direction {
        position: relative;
        padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);
        width: 100%;
    }

    .direction .address-title {
        display: flex;
        flex-direction: column;
        gap: 15rem;
        margin-bottom: 50rem;
    }

    .direction .address-title p {
        color: #6f6f6f;
    }

    .direction .maps {
        display: flex;
        padding: 15rem;
        border: 1rem solid #ddd;
        gap: 10rem;
    }

    .direction .maps img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .direction .maps figure {
        width: 100%;
        max-width: 500rem;
        aspect-ratio: 500 / 420;
    }

    .direction .maps .map-direction {
        position: relative;
        width: 100%;
    }

    .direction .maps .map-direction .root_daum_roughmap_landing {
        width: 100%;
    }

    .direction .maps .map-direction .root_daum_roughmap_landing .hide,
    .direction .maps .map-direction .root_daum_roughmap_landing .cont {
        display: none;
    }

    .direction .maps .map-direction .root_daum_roughmap_landing .wrap_map {
        height: 430rem;
    }

    .direction .maps .map-direction .btn-goto {
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        background: #222;
        color: #fff;
        padding: 25rem 40rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20rem;
    }

    .direction .maps .map-direction .btn-goto i {
        rotate: 90deg;
    }

    .direction .data-company {
        display: flex;
        margin-top: 60rem;
    }

    .direction .data-company li {
        width: 100%;
        display: flex;
        border: 1rem solid #ddd;
        padding-block: 35rem;
        justify-content: center;
        gap: 10rem;
        align-items: center;
    }

    .direction .data-company li .icon {
        display: flex;
    }

    .direction .data-company li b {
        margin-left: 20rem;
    }

    @media(max-width: 767px) {
        .direction .maps {
            flex-direction: column;
        }

        .direction .data-company {
            flex-direction: column;
        }

        .direction .data-company li {
            justify-content: left;
            padding-inline: 30rem;
        }

    }

}

.find-id-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);

    .sys-common {
        width: 100%;
    }
}

.find-pwd-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block: clamp(60rem, calc(90 / var(--container) * 100vw), 90rem);

    .sys-common {
        width: 100%;
    }
}