/* ========================================================
// 서브 비쥬얼
========================================================= */
h1, h2, h3, h4, h5, h6 {font-weight: var(--font-weight-bold);}

.sub-visual {
    --sub-visual-height: 500px;
    height: var(--sub-visual-height);
    color: var(--color-main-white);
    @media screen and (max-width:640px) {
        height: auto;
        aspect-ratio: 640/440;
    }

    & .sub-visual-img {
        --sub-visual-img-gap: 20px;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--sub-visual-img-gap);

        width: 100%;
        height: 100%;
        padding-top: var(--header-height);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        & em {
            font-family: var(--font-family-granville);
            font-size: var(--font-size-14);
            text-transform: capitalize;
            letter-spacing: 1px;
        }
        & h1 {
            font-size: clamp(26px, 6vw + 2px, var(--font-size-38)); /* width 600px 기준 */

            & span.title-mark {
                font-size: calc(var(--font-size-38) * 0.47);
                vertical-align: super;
            }
        }
        & :where(p, a) {font-size: var(--font-size-17);}
        & a {
            --btn-padding-base: clamp(2px, 0.78125vw, 5px);
            --btn-border-r: 21px;

            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: calc(var(--sub-visual-img-gap) * 2);

            @media screen and (max-width:640px) {
                margin-top: var(--sub-visual-img-gap);
            }
            padding: 
                calc(var(--btn-padding-base) * 2.5)
                calc(var(--btn-padding-base) * 4)
            ;
            border-radius: var(--btn-border-r);
            background-color: var(--color-main-02);
            font-weight: var(--font-weight-bold);
        }
    }
}


/* ========================================================
// 서브 섹션
========================================================= */
.sub-section {

    /* border-radius 설정 */
    --border-r-sub: 21px;

    /* color 설정 */
    --app-color-tel: #bb6028;
    --app-color-kakaotalk: #fbcb25;
    --app-color-kakaotalk-text: #391b1b;
    --app-color-line: #00c300;

    /* line height 설정 */
    --line-height-mid: 1.39;
    --line-height-default: 1.77;

    overflow: hidden;


    /*////////////////////////////////////////////////// 
    // 서브 섹션 타이틀
    //////////////////////////////////////////////////*/
    & em.sub-sec-tit-em {
        font-family: var(--font-family-granville);
        font-size: clamp(12px, 2.5vw, var(--font-size-18));
        color: var(--color-text-07);
        text-transform: capitalize;
        letter-spacing: 0;
        transform: scaleY(0.9);

    }

    & .sub-section-title-bx {
        display: flex;
        flex-direction: column;
        gap: calc(var(--gap-base) * 4);

        &.center {align-items: center;}

        & h2 {
            display: flex;
            align-items: flex-start;
            font-size: clamp(24px, 5.3125vw + 0.25em, var(--font-size-42)); /* width 600px 기준*/
            word-break: keep-all;
            text-align: center;

            @media screen and (max-width: 1200px) {
                line-height: var(--line-height-mid);
            }

            & span {
                display: inline-block;
                margin-right: 5px;
                font-size: var(--font-size-18);
            }
            & i {
                margin-left: 10px;
                font-weight: var(--font-weight-light);
            }
        }
        & p {
            font-size: clamp(14px, 3.333vw, var(--font-size-18));
            color: var(--color-text-08);
            line-height: 1.77;
        }
    }

    /*////////////////////////////////////////////////// 
    // 인트로 섹션 
    //////////////////////////////////////////////////*/
    & .about-intro {
        --about-intro-padding: clamp(50px, 16.5625vw, 106px);

        position: relative;
        display: flex;
        align-items: center;
        margin-bottom: var(--content-vertical-gap-sm);
        padding: var(--about-intro-padding) 0;

        @media screen and (max-width: 1500px) {
            padding-inline: var(--content-inner-padding);
        }
        @media screen and (max-width: 1000px) {
            flex-direction: column;
            padding-top: var(--mobile-content-vertical-gap-big);
        }

        & svg.circle-shape {
            --circle-w: clamp(180px, 40.625vw + 20px, 260px);
            --circle-bottom-pos-multifly: -0.1;

            position: absolute;
            bottom: calc(var(--circle-w) * var(--circle-bottom-pos-multifly));
            left: calc(50% - (var(--circle-w) / 2));

            width: var(--circle-w);
            height: var(--circle-w);

            @media screen and (max-width: 370px) {
                --circle-bottom-pos-multifly: -0.18;
            }
        }

        & .about-intro-title-bx {
            /* 1400px 기준 */
            --about-intro-title-bx-gap: clamp(10px, 1.42857143vw, 20px);
            --about-intro-title-bx-h2-padding: 20px;

            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: var(--about-intro-title-bx-gap);

            @media screen and (max-width: 1000px) {
                --about-intro-title-bx-h2-padding: 0;
                align-items: center;
                margin-bottom: calc(var(--gap-base) * 8);
                text-align: center;
            }

            & h2 {
                display: flex;
                flex-direction: column;
                gap: var(--about-intro-title-bx-gap);
                padding-right: var(--about-intro-title-bx-h2-padding);
                font-size: clamp(22px, 2.76vw + 10px, var(--font-size-42));
                font-weight: var(--font-weight-light);
                letter-spacing: -0.15rem;
                word-break: keep-all;

                & span:where(:nth-child(2), :nth-child(3)) {
                    font-weight: var(--font-weight-bold);
                    line-height: 1.3;
                }
            }
            & .intro-text-group {
                margin-top: var(--about-intro-title-bx-gap);
                word-break: keep-all;

                & p {
                    font-size: clamp(14px, 3.333vw, var(--font-size-18));
                    font-weight: var(--font-weight-light);
                    line-height: var(--line-height-default);
    
                    & strong {
                        font-weight: var(--font-weight-bold);
                        color: var(--color-main-02);
                    }

                    & i {
                        display: block;
                        margin-top: calc(var(--gap-base) * 8);
                    }
                }
            }
        }
        & .about-intro-img-bx {
            flex: 1;
            width: 100%;
            aspect-ratio: 1/0.593;

            & img {
                width: 100%;

                &.overflow {
                    width: 135%;

                    @media screen and (max-width: 1000px) {
                        width: 100%;
                    }
                }
            }
        }
    }
}