@charset "utf-8";

.effect-section {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    height: auto;
    display: flex;
    padding: 120px 96px;
    justify-content: center;
    align-items: center;
    background: var(--sys-bg-default, #F3F5F7);
}

.effect-section .content-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.effect-section .content-container .title-container {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.effect-section .content-container .title-container .title-text {
    color: var(--ref-base-black, #151818);
    text-align: center;
    box-sizing: border-box;
    word-break: keep-all;
    /* Display/Medium */
    font-family: Pretendard;
    font-size: var(--ref-font-size-10-fluent, 45px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 63px */
}

.effect-section .content-container .title-container .subtitle-text {
    color: var(--sys-text-light-700, #4E5760);
    text-align: center;
    box-sizing: border-box;
    word-break: keep-all;
    /* Title/XLarge */
    font-family: Pretendard;
    font-size: var(--ref-font-size-6-static, 24px);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 38.4px */
}

.effect-section .content-container .body-container {
    display: flex;
    width: 100%;
    max-width: 1248px;
    box-sizing: border-box;
    height: fit-content;
    border-radius: 16px;
    background: var(--global-white-a100, #FFF);
    /* shadow/basic/md */
    box-shadow: 0px 0px 16px 0px rgba(55, 61, 68, 0.08);
    padding: 50px 50px 37px 60px;
    align-items: center;
    justify-content: center;
    gap: 52px;
    flex-wrap: wrap;
    overflow: hidden; /* 또는 auto */
}

.effect-section .content-container .body-container .left-child {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
}

.effect-section .content-container .body-container .left-child .headline-text {
    word-break: keep-all;
    color: var(--sys-text-default-900, #373D44);
    /* Headline/Large */
    font-family: Pretendard;
    font-size: var(--ref-font-size-8-fluent, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 51.2px */
}

.effect-section .content-container .body-container .left-child .left-content-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 127px;
    padding-bottom: 23px;
}

.effect-section .content-container .body-container .left-child .left-content-container .left-content-top-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    gap: 12px;
    min-height: 196px;
}

.effect-section .content-container .body-container .right-child {
    display: flex;
    box-sizing: border-box;
    max-width: 474px;
    padding: 36px 0 24px 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 36px;
}

.effect-section .content-container .body-container .right-child img {
    aspect-ratio: 1;
    max-width: 466px;
}

.effect-section .content-container .body-container .img-description-text {
    color: var(--ref-neutral-300, #B6BDC4);
    word-break: keep-all;
    /* Caption/Small */
    text-align: left;
    font-family: Pretendard;
    font-size: var(--ref-font-size-1-static, 12px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 16.8px */
    align-self: stretch;
}

.effect-section .box-child {
    display: flex;
    width: 196px;
    height: 196px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    padding: 38px 25px;
}

.effect-section .brand-light-bg {
    background: var(--ref-primary-100, #70DCDC);
}

.effect-section .brand-default-bg {
    background: var(--ref-primary-200, #3CD0D0);
}

.effect-section .brand-dark-bg {
    background: var(--ref-primary-300, #00BBBA);
}


.effect-section .box-child .box-child-top-text {
    color: var(--comp-cont-inverse, #FFF);
    text-align: center;
    word-break: keep-all;
    /* Headline/Large */
    font-family: Pretendard;
    font-size: var(--ref-font-size-8-fluent, 32px);
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 51.2px */
}

.effect-section .box-child .box-child-bottom-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.effect-section .box-child .box-child-bottom-container .percent-text {
    color: var(--global-white-a100, #FFF);
    word-break: keep-all;
    text-align: center;
    font-family: var(--ref-font-size-font-family-2, Pretendard);
    font-size: var(--sys-font-size-display-lg, 56px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 78.4px */
    letter-spacing: -1.68px;
}

.effect-section .box-child .box-child-bottom-container .percent-text .suffix-text {
    font-size: 36px;
    word-break: keep-all;
}

.effect-section .box-child .box-child-bottom-container img {
    width: 20px;
    height: 20px;
}


@media screen and  (max-width: 1023px) {
    .effect-section {
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
        height: auto;
        display: flex;
        padding: 50px 24px;
        justify-content: center;
        align-items: center;
        background: var(--sys-bg-default, #F3F5F7);
    }

    .effect-section .content-container {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .effect-section .content-container .title-container {
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        align-items: center;
        gap: 23px;
    }

    .effect-section .content-container .title-container .title-text {
        color: var(--ref-base-black, #151818);
        text-align: center;
        /* Headline/Medium */
        font-family: Pretendard;
        font-size: var(--ref-font-size-7-fluent, 28px);
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 39.2px */
    }

    .effect-section .content-container .title-container .subtitle-text {
        color: var(--sys-text-light-700, #4E5760);
        box-sizing: border-box;
        /* Body/Medium */
        font-family: Pretendard;
        font-size: var(--ref-font-size-3-static, 16px);
        font-style: normal;
        font-weight: 400;
        line-height: 160%; /* 25.6px */
    }

    .effect-section .content-container .body-container {
        display: flex;
        width: 100%;
        flex-direction: column;
        box-sizing: border-box;
        height: fit-content;
        border-radius: 16px;
        background: var(--global-white-a100, #FFF);
        /* shadow/basic/md */
        box-shadow: 0px 0px 16px 0px rgba(55, 61, 68, 0.08);
        padding: 20px 21px 22px 20px;
        align-items: center;
        justify-content: center;
        gap: 31px;
        flex-wrap: wrap;
        overflow: hidden; /* 또는 auto */
    }

    .effect-section .content-container .body-container .left-child {
        display: flex;
        box-sizing: border-box;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .effect-section .content-container .body-container .left-child .headline-text {
        color: var(--sys-text-default-900, #373D44);
        /* Title/Large */
        font-family: Pretendard;
        font-size: var(--ref-font-size-5-static, 20px);
        font-style: normal;
        font-weight: 700;
        line-height: 160%; /* 32px */
    }

    .effect-section .content-container .body-container .left-child .left-content-container {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 0;
    }

    .effect-section .content-container .body-container .left-child .left-content-container .left-content-top-container {
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .effect-section .content-container .body-container .right-child {
        box-sizing: border-box;
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 21.554px;
        flex-shrink: 0;
        padding: 0;
    }

    .effect-section .content-container .body-container .right-child img {
        aspect-ratio: 1;
        max-width: 265px;
    }

    .effect-section .content-container .body-container .img-description-text {
        word-break: keep-all;
        color: var(--ref-neutral-300, #B6BDC4);
        font-family: Pretendard;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: 140%; /* 14px */
        text-align: center;
        align-self: stretch;
    }

    .effect-section .box-child {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        height: fit-content;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        gap: 10px;
        padding: 20px 20px 20px 30px;
    }

    .effect-section .brand-light-bg {
        background: var(--ref-primary-100, #70DCDC);
    }

    .effect-section .brand-default-bg {
        background: var(--ref-primary-200, #3CD0D0);
    }

    .effect-section .brand-dark-bg {
        background: var(--ref-primary-300, #00BBBA);
    }


    .effect-section .box-child .box-child-top-text {
        word-break: keep-all;
        color: var(--comp-cont-inverse, #FFF);
        /* Title/XLarge */
        min-width: 110px;
        font-family: Pretendard;
        font-size: var(--ref-font-size-6-static, 24px);
        font-style: normal;
        font-weight: 700;
        line-height: 160%; /* 38.4px */
        text-align: left; /* 왼쪽 정렬 */
    }

    .effect-section .box-child .box-child-bottom-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .effect-section .box-child .box-child-bottom-container .percent-text {
        word-break: keep-all;
        color: var(--global-white-a100, #FFF);
        text-align: center;
        font-family: var(--ref-font-size-font-family-2, Pretendard);
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 56px */
        letter-spacing: -1.2px;
    }

    .effect-section .box-child .box-child-bottom-container .percent-text .suffix-text {
        word-break: keep-all;
        font-size: 24px;
    }

    .effect-section .box-child .box-child-bottom-container img {
        width: 16px;
        height: 16px;
    }
}