html {
    scroll-behavior: smooth;
}
.web_container > header {
    background-color: #fff;
    border-bottom: 1px solid var(--color-gray-light);
    box-shadow: var(--shadow-md);
}
.main_banner {
    background-color: #fafafa;
    width: 100%;
    height: 100vh;
    max-height: 830px;
    /* background-image: url(../images/main_banner_02.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain; */
}

.section_inner {
    /* height: 100%; */
    width: 100%;
    max-width: var(--inner-max-width);
    margin: 0 auto;
    position: relative;
    /* border: 1px solid black; */
    display: flex;
}
.main_banner .section_inner {
    height: 100%;
    background-image: url(../images/main_banner_pc.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}
.main_banner_text_box {
    /* border: 1px solid red; */
    position: absolute;
    top: 50%;
    left: 2rem;
    transform: translateY(-50%);
}
.main_banner_text_box span {
    font-size: var(--fs-md);
    font-weight: 600;
    text-transform: uppercase;
    color: #053174;
}
.main_banner_text_box h2 {
    font-size: var(--fs-4xl);
    line-height: 1.25;
    padding-top: 1rem;
}
.main_banner_text_box h2 em {
    font-style: normal;
    color: #7f45bf;
    background: linear-gradient(90deg, #7f45bf 9.62%, #3b2059 53.37%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.main_banner_text_box p {
    font-size: var(--fs-md);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-blk);
    padding-top: 1.5rem;
}
.main_banner_text_box div {
    padding-top: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1.5rem;
}
.btn {
    padding: 1rem 2rem;
    background: linear-gradient(90deg, #4242d7 100%, #361a81 100%);
    color: var(--color-wht);
    border-radius: 2rem;
}
/*  */
.content_section {
    /* border: 1px solid teal; */
    padding: 1rem;
    /* min-height: 500px; */
    display: flex;
}
.main_textbox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2rem;
    width: fit-content;
    padding: 1rem;
    width: 100%;
    max-width: 340px;
}
.main_textbox h3 {
    color: #0f172a;
    font-size: var(--fs-3xl);
    font-style: normal;
    font-weight: 700;
    line-height: 1.25; /* 120% */
    word-break: keep-all;
}
.main_textbox p {
    color: #000;
    font-size: var(--fs-md);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    word-break: keep-all;
}
.main_textbox h3 em {
    color: #7f45bf;
    font-style: normal;
}

/* section_01 */

.section_01 .section_inner {
    min-height: 640px;
    align-items: center;
}
.section_01 .section_inner .image_container {
    position: relative;
    flex: 1;
    box-sizing: border-box;
    aspect-ratio: 16/10; /* 필요에 맞게 조정 (예: 16/9, 4/3 등) */
    min-height: 300px; /* 폴백 최소 높이 */
}
.section_01 .section_inner .image_container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%; /* 컨테이너에 대한 상대 크기 */
    height: auto;
    max-width: none;
    display: block;
}
.section_01 .section_inner .image_container img:nth-of-type(1) {
    top: 50%;
    left: 40%;
    width: 55%;
}
.section_01 .section_inner .image_container img:nth-of-type(2) {
    top: 40%;
    left: 75%;
    width: 40%;
}
.section_01 .section_inner .image_container img:nth-of-type(3) {
    top: 65%;
    left: 68%;
    width: 40%;
}
.section_01 .section_inner .main_textbox {
    /* border: 1px solid #666; */
    flex: 1;
    max-width: none;
    padding-left: 4rem;
    box-sizing: border-box;
    width: auto;
}
/* section_02 */
.section_02 {
    background: #cec5ff;
    padding: 6rem 1rem;
}
.section_02 .section_inner {
    justify-content: space-between;
    align-items: center;
}
.section_02 .section_inner .main_textbox {
}
.section_02 .section_inner .card_list {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 100%;
}
.card_list .card_item {
    width: 100%;
    max-width: 340px;
    padding: 1.5rem;
    border-radius: 0 40px;
    border: 1.5px solid #e0d1ee;
    background: rgba(235, 235, 235, 0.42);
    background-blend-mode: screen;
    display: flex;
    flex-direction: column;
}
.card_list .card_item .card_icon {
    display: flex;
    width: 5rem;
    height: 5rem;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.card_list .card_item h4 {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-top: 1.5rem;
    word-break: keep-all;
}
.card_list .card_item p {
    font-size: var(--fs-md);
    color: #111;
    margin-top: 0.5rem;
    word-break: keep-all;
}
.card_list .card_item ul {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    padding-left: 0; /* reset default list padding */
    list-style: none; /* remove default bullets */
    flex: 1;
    justify-content: flex-end;
    padding-top: 0.5rem;
}
.card_list .card_item ul li {
    position: relative;
    padding-left: 1.8rem; /* space for the check icon */
    margin-bottom: 0.5rem;
    font-size: var(--fs-md);
    color: #111;
    word-break: keep-all;
}
.card_list .card_item ul li::before {
    content: "✔️"; /* check mark */
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    display: block;
    top: 0.2rem;
    /* transform: ; */
    color: #7f45bf; /* accent color */
    font-size: var(--fs-md);
    line-height: 1;
    word-break: keep-all;
}

/* section_03 */
.section_03 {
    padding: 4rem 1rem;
}
.section_03 .section_inner {
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    background-image: url(../images/bg_Visual_01.png);
    background-repeat: no-repeat;
    background-position: top 4rem right;
    background-size: 800px;
}

.section_03 .section_inner .main_textbox {
    height: 520px;
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.section_03 .cardlist_business {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    /* border: 1px solid blue; */
    margin-top: 6rem;
}
.section_03 .cardlist_business > div {
    background-color: #f5f5f5;
    padding: 2rem;
    border-radius: 1rem;
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.section_03 .cardlist_business .text {
    flex: 1;
}
.section_03 .cardlist_business .text h4 {
    font-size: var(--fs-xl);
    font-weight: 700;
}
.section_03 .cardlist_business .text p {
    padding-top: 0.5rem;
    font-size: var(--fs-md);
    word-break: keep-all;
}
.section_03 .cardlist_business .img {
    background-color: #fff;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
/* section_04 */
.section_04 {
    background-color: #efebf9;
    padding: 4rem 1rem;
}
.section_04 .section_inner {
    align-items: center;
}
.company_history_box {
    /* border: 1px solid red; */
    flex: 1;
}
.company_history_list {
    /* border: 1px solid blue; */
}
.company_history_list li {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: minmax(60px, auto);
}
.company_history_list li .history_year {
    font-size: var(--fs-lg);
    color: var(--color-blu-02);
    font-weight: bold;
}
.company_history_list li .history_info {
    border-left: 1px solid #a1a1a1;
    font-size: var(--fs-md);
    position: relative;
    padding-left: 2rem;
    font-weight: 300;
    padding-bottom: 1rem;
    word-break: keep-all;
    line-height: 1.5;
}
.company_history_list li:last-child {
    transform: translateY(-8px);
}
.company_history_list li:last-child .history_info {
    border-left: 1px solid transparent;
}
.company_history_list li .history_info::before {
    content: "";
    width: 8px;
    height: 8px;
    background-color: var(--color-blu-02);
    display: block;
    position: absolute;
    top: calc(var(--fs-md) / 2);
    left: -4px;
    border-radius: 50%;
    outline: 2px solid var(--color-wht);
}

.company_history_list li .history_info span {
    font-weight: 500;
}
/* section_05 */
.section_05 {
    background: #2d1f79;
    background-blend-mode: plus-darker;
}
.section_05 .main_textbox {
    max-width: 360px;
}
.section_05 .main_textbox h3 {
    font-size: 34px;
}
.section_05 .contact_box {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.section_05 .contact_box > div {
    padding: 0 2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.section_05 .contact_box > div:not(:first-child) {
    border-left: 1px solid var(--color-wht);
}
.section_05 .contact_box > div img {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
}
.section_05 .contact_box > div p {
    color: var(--color-wht);
}
.footer_inner {
    padding: 2rem 1rem 1rem;
}
.footer_inner > div {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}
.footer_inner > div img {
    height: 28px;
}
.footer_inner > div p {
    color: #888;
    font-size: var(--fs-sm);
}
.footer_inner address {
    padding-top: 2rem;
    /* border: 1px solid red; */
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: var(--fs-md);
    color: #444;
}
.footer_inner address div {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .main_banner {
        /* background-size: 120%;
        background-position: bottom right; */
    }
    .main_banner .section_inner {
        background-image: url(../images/main_banner_mo.png);
    }
    /*  */
    .main_textbox {
        max-width: none;
    }
    .section_01 .section_inner {
        min-height: 640px;
    }
    .section_01 .section_inner .image_container {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        aspect-ratio: 1/ 1.25;
        min-height: 520px; /* 폴백 최소 높이 */
    }
    .section_01 .section_inner .image_container img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40%; /* 컨테이너에 대한 상대 크기 */
        height: auto;
        max-width: none;
        display: block;
    }
    .section_01 .section_inner .image_container img:nth-of-type(1) {
        top: 50%;
        left: 50%;
        width: 80%;
    }
    .section_01 .section_inner .image_container img:nth-of-type(2) {
        top: 75%;
        left: 62%;
        width: 50%;
    }
    .section_01 .section_inner .image_container img:nth-of-type(3) {
        top: 80%;
        left: 40%;
        width: 50%;
    }
    .section_01 .section_inner .main_textbox {
        word-break: keep-all;
    }
    .section_01 .section_inner .main_textbox br {
        display: none;
    }
    /*  */
    .section_02 .section_inner {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 2rem;
        padding: 3rem 0;
    }
    /*  */

    .section_03 .section_inner {
        display: flex;
        flex-direction: row;
        min-height: 640px;
        background: none;
        padding: 4rem 0;
    }
    .section_03 .section_inner::before {
        content: "";
        background-image: url("../images/bg_Visual_01.png");
        background-size: cover;
        position: absolute;
        bottom: 4rem;
        left: 0;
        width: 50%;
        height: 45%;
        display: block;

        /* 핵심: 좌우 반전 */
        transform: scaleX(-1);

        /* 배경을 글자 뒤로 보냄 */
        z-index: -1;
    }
    .section_03 .section_inner .main_textbox {
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
    }
    .section_03 .section_inner .main_textbox br {
        display: none;
    }

    .section_03 .cardlist_business {
        display: flex;
        flex-direction: column;
        min-width: 420px;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 0;
    }
    .section_03 .cardlist_business > div {
        width: 100%;
    }
    /* .section_04 */
    .section_04 .section_inner {
        flex-direction: column;
        gap: 2rem;
    }
    .section_04 .section_inner .main_textbox br {
        display: none;
    }
    .section_04 .company_history_box {
        width: 100%;
        padding: 0 3rem;
    }
    /* section_05 */
    .section_05 .section_inner {
    }
    .section_05 .section_inner .main_textbox {
        flex: 1;
        width: fit-content;
    }
    .section_05 .section_inner .contact_box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        flex: 1;
        padding: 1rem 0;
    }
    .section_05 .section_inner .contact_box > div {
        border: none;
    }
    /* footer */
    .footer_inner {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1.5rem;
    }
    .footer_inner address {
        padding: 0;
        gap: 0.5rem;
    }
    .footer_inner address div {
        flex-direction: column;
        gap: 0.5rem;
    }
}
@media (max-width: 768px) {
    .content_section {
        /* padding: 1rem 0.5rem; */
    }
    .main_banner {
        height: calc(82vh);
        /* background-size: 160%;
        background-position-y: bottom 143px; */
    }
    .main_banner .section_inner {
        height: 100%;
        background-position: bottom 143px right;
        background-size: 150%;
    }
    .main_banner_text_box {
        word-break: keep-all;
        position: static;
        transform: none;
        height: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .main_banner_text_box span {
        padding: 1rem 1rem 0 1rem;
    }
    .main_banner_text_box h2 {
        padding: 1rem 1rem 0 1rem;
    }
    .main_banner_text_box p {
        flex: 1;
        padding: 1rem 1rem 0 1rem;
    }
    .main_banner_text_box br {
        display: none;
    }
    .main_banner_text_box div {
        flex-direction: column;
        padding: 0.5rem 1rem;
        background-color: #f5f5fe;
    }
    .main_banner_text_box div .btn {
        width: 100%;
        height: 52px;
        padding: 0;
        box-sizing: border-box;
    }
    /* section 01 */
    .section_01 .section_inner {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 2rem;
        padding: 2rem 0;
    }
    .section_01 .section_inner .image_container {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        aspect-ratio: auto;
        /* border: 1px solid #000; */
        width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 0;
    }
    .section_01 .section_inner .image_container img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40%; /* 컨테이너에 대한 상대 크기 */
        height: auto;
        max-width: none;
        display: block;
    }
    .section_01 .section_inner .image_container img:nth-of-type(1) {
        top: 50%;
        left: 40%;
        width: 70%;
    }
    .section_01 .section_inner .image_container img:nth-of-type(2) {
        top: 44%;
        left: 80%;
        width: 50%;
    }
    .section_01 .section_inner .image_container img:nth-of-type(3) {
        top: 65%;
        left: 74%;
        width: 50%;
    }
    .section_01 .section_inner .main_textbox {
        width: 100%;
        padding: 0;
        gap: 0.75rem;
        flex: 0;
    }
    .main_textbox h3 {
        padding-bottom: 1rem;
    }
    .section_01 .section_inner .main_textbox br {
        display: none;
    }
    /* section 02 */
    .section_02 .section_inner .card_list {
        flex-direction: column;
        width: 100%;
    }
    .card_list .card_item {
        width: 100%;
        max-width: none;
    }
    .card_list .card_item .card_icon {
        display: none;
    }
    .card_list .card_item h4 {
        margin: 0;
    }
    /* section 03 */
    .section_03 .section_inner {
        flex-direction: column;
        gap: 4rem;
    }
    .section_03 .section_inner::before {
        display: none;
    }
    .section_03 .cardlist_business {
        min-width: 0;
    }
    .section_03 .cardlist_business > div {
        padding: 1.5rem 1rem;
    }
    /* section 04 */
    .section_04 .company_history_box {
        padding: 0;
    }
    /* section 05 */
    .section_05 .section_inner {
        display: flex;
        flex-direction: column;
    }
    .company_history_list li {
        display: flex;
        flex-direction: column;
        padding: 1rem;
        position: relative;
        margin-left: 2rem;
        border-left: 1px solid #a1a1a1;
    }
    .company_history_list li::before {
        content: "";
        width: 8px;
        height: 8px;
        background-color: var(--color-blu-02);
        display: block;
        position: absolute;
        top: calc(var(--fs-md) / 2 + (1rem));
        left: -4px;
        border-radius: 50%;
        outline: 2px solid var(--color-wht);
    }
    .company_history_list li .history_year {
    }
    .company_history_list li .history_info {
        padding: 0;
        position: static;
        border: none;
    }
    .company_history_list li .history_info::before {
        display: none;
    }

    /* footer */
    .footer_inner {
        display: flex;
        flex-direction: column;
        padding: 2rem 1rem;
    }
    .footer_inner address {
        gap: 0.25rem;
        padding-top: 1.5rem;
    }
    .footer_inner address div {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    .footer_inner address div p {
        width: 100%;
    }
}
@media (max-width: 480px) {
}