/* =========================================================================
      하위 페이지 상단 배너 (옛 Avada 슬라이더 → 정적 배너)
      Markup : resources/views/layouts/partials/page-banner.blade.php
      옛 슬라이더와 같은 모양으로 맞춘다.
      - 높이 200px, 800px 미만은 150px (사진은 늘 200px 높이로 채우고 아래를 자름)
      - 윗줄 20px 고정, '노스텍'은 35px 에서 좁은 화면일수록 작아짐
        (옛 fusion-responsive-typography 계산값: 375px 24.4px · 320px 23px)
      Every selector is scoped to #nt-page-banner so Avada's theme rules
      (body p, img …) cannot leak in.
      ========================================================================= */

#nt-page-banner {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: #4A4F59; /* 사진이 오기 전 (사진 평균색) */
}

#nt-page-banner .nt-page-banner__image {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 200px;
    object-fit: cover;
    object-position: 50% 50%;
}

#nt-page-banner .nt-page-banner__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 19px;
    height: 100%;
    padding: 0 10px;
    color: #FFFFFF;
    font-family: 'nanumsquare', sans-serif;
    font-weight: 700;
    text-align: center;
    word-break: keep-all;
}

#nt-page-banner .nt-page-banner__eyebrow,
#nt-page-banner .nt-page-banner__title {
    margin: 0;
    padding: 0;
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: normal;
}

#nt-page-banner .nt-page-banner__eyebrow {
    font-size: 20px;
    line-height: 24px;
}

#nt-page-banner .nt-page-banner__title {
    font-size: 35px;
    line-height: 1.2;
}

@media (max-width: 799px) {
    #nt-page-banner {
        height: 150px;
    }

    #nt-page-banner .nt-page-banner__title {
        font-size: calc(15px + 2.5vw);
    }
}