/* ABOUT은 풀와이드 서브페이지 */
body .aha-sub-wrap{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
	padding:0 !important;
}

body .aha-sub-wrap #container{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}
/* =========================================================
   AHA ABOUT
========================================================= */

.aha-about-hero{
    --about-bg:var(--aha-color-subpage-background);
    --about-point:var(--aha-primary);

    /* 모바일에서 JS가 실제 헤더 높이로 덮어씀 */
    --aha-mobile-header-height:70px;

    position:relative;

    width:100%;
    height:210vh;

    background:var(--aha-color-subpage-background) !important;

    transition:background .35s ease;
}


/* =========================================================
   LIGHT MODE
========================================================= */

body.aha-light-theme .aha-about-hero{
    --about-bg:#fbfaff;
    --about-point:var(--aha-primary);
}


/* =========================================================
   STICKY
========================================================= */

.aha-about-sticky{
    position:sticky;

    top:0;

    width:100%;
    height:100vh;

    /*
     * 이 영역 안에서만 잘라서
     * 모바일 가로 삐져나감 방지
     *
     * 부모 .aha-about-hero에는
     * overflow 안 걸어서 sticky 방해 안 함
     */
    overflow:hidden;
}


/* =========================================================
   VIDEO
========================================================= */

.aha-about-visual{
    position:absolute;

    left:50%;
    top:60%;

    /*
     * PC 초기 영상 크기
     */
    width:60vw;
    height:50vh;

    transform:translate(-50%,-50%);

    overflow:hidden;

    border-radius:24px;

    will-change:
        top,
        width,
        height,
        border-radius;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}


.aha-about-media{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center center;

    border:0;
    outline:0;

    pointer-events:none;

    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}


/* =========================================================
   VIDEO OVERLAY
========================================================= */

.aha-about-visual::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.13) 0%,
            rgba(0,0,0,.05) 45%,
            rgba(0,0,0,.13) 100%
        );

    pointer-events:none;
}


/* =========================================================
   COPY
========================================================= */

.aha-about-copy{
    position:absolute;

    z-index:10;

    left:50%;
    top:20%;

    transform:translate(-50%,-50%);

    width:100%;
    max-width:1700px;

    padding:0 24px;

    box-sizing:border-box;

    text-align:center;

    pointer-events:none;

    will-change:top;
}


/* =========================================================
   TITLE
========================================================= */

.aha-about-title{
    margin:0;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:.18em;

    width:100%;

    font-family:
        "Pretendard Variable",
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    /*
     * PC 시작 크기
     * JS와 동일
     */
    font-size:72px;

    line-height:.96;

    font-weight:700;

    letter-spacing:-.025em;

    white-space:nowrap;

    color:#fff;

    text-align:center;

    text-shadow:none;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}


.aha-about-word{
    display:inline-block;
    white-space:nowrap;
}


.aha-about-dot{
    display:inline-block;
}


/* A / H / A */
.aha-about-title .aha-point{
    color:var(--about-point);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.aha-about-desc{
    margin:18px auto 0;

    width:100%;
    max-width:980px;

    padding:0;

    box-sizing:border-box;

    font-family:
        "Pretendard Variable",
        Pretendard,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:18px;

    line-height:1.65;

    font-weight:400;

    letter-spacing:-.025em;

    color:rgba(255,255,255,.82);

    text-align:center;

    text-shadow:none;

    -webkit-font-smoothing:antialiased;
}
	.aha-about-desc .pcbr{
        display:block;
    }
	.aha-about-desc .mobr{
        display:none;
    }

/* =========================================================
   LIGHT
========================================================= */

body.aha-light-theme .aha-about-title{
    color:#111116;
}

body.aha-light-theme .aha-about-desc{
    color:rgba(17,17,22,.68);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .aha-about-hero{
        height:190vh;
    }


    /* =====================================================
       헤더 밑에서부터 STICKY 시작
    ===================================================== */

    .aha-about-sticky{
        position:sticky;

        top:var(--aha-mobile-header-height,70px);

        width:100%;

        height:calc(
            100vh - var(--aha-mobile-header-height,70px)
        );

        height:calc(
            100svh - var(--aha-mobile-header-height,70px)
        );

        overflow:hidden;
    }


    /* =====================================================
       VIDEO
    ===================================================== */

    .aha-about-visual{
        /*
         * 초기 아래쪽
         */
        top:62%;

        /*
         * 영상은 기존처럼 작게
         */
        width:80vw;
        height:48vh;

        max-width:100%;

        border-radius:18px;
    }


    /* =====================================================
       COPY

       이미 헤더 아래 영역 기준이라
       헤더와 안 겹침
    ===================================================== */

    .aha-about-copy{
        top:18%;

        width:100%;
        max-width:100%;

        padding-left:18px;
        padding-right:18px;

        box-sizing:border-box;
    }


    /* =====================================================
       TITLE
       MOBILE = 3줄
    ===================================================== */

    .aha-about-title{
        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:3px;

        width:100%;
        max-width:100%;

        /*
         * 처음부터 크게
         */
        font-size:40px;

        line-height:.91;

        font-weight:700;

        letter-spacing:0.05em;

        white-space:normal;
    }


    .aha-about-word{
        display:block;

        width:auto;
        max-width:100%;

        white-space:nowrap;
    }


    /*
     * 모바일은 점 제거
     */
    .aha-about-dot{
        display:none;
    }


    /* =====================================================
       DESCRIPTION
    ===================================================== */

    .aha-about-desc{
        margin:16px auto 0;

        width:100%;
        max-width:520px;

        padding:0 5px;

        box-sizing:border-box;

        font-size:16px !important;

        line-height:1.6;
    }


    /*
     * 모바일 자연 줄바꿈
     */
    .aha-about-desc .mobr{
        display:block;
    }
	.aha-about-desc .pcbr{
        display:none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:480px){

    .aha-about-copy{
        padding-left:14px;
        padding-right:14px;
    }


    .aha-about-title{
        font-size:38px;
    }


    .aha-about-desc{
        font-size:13.5px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:360px){

    .aha-about-title{
        font-size:34px;
    }


    .aha-about-desc{
        font-size:13px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .aha-about-hero{
        height:auto;
    }


    .aha-about-sticky{
        position:relative;

        top:0;

        height:100vh;
    }


    .aha-about-visual{
        top:50%;

        width:100vw;
        height:100vh;

        border-radius:0;
    }


    .aha-about-copy{
        top:50%;
    }

}