.promotion {
    position: relative;
    width: 100%;
    height: 100vh;
    justify-content: unset !important;
}

/* article_common.css 의 .article 규칙이 background-size: cover !important 를 걸어두고
   더 나중에 로드되므로, 선택자를 두 개 겹쳐 우선순위를 높여야 값이 먹습니다. */
.article.promotion {
    /* 이미지 테두리 평균색과 맞춰야 이미지 경계가 드러나지 않습니다 */
    background: #f3f3f3 url(../images/hero-bg.jpg) no-repeat;
    /* 두 번째 값이 이미지를 아래로 내리는 거리. 문구와 겹치면 키우세요 */
    background-position: center 300px !important;
    background-size: 45% auto !important;
}

.p-text {
    text-align: center;
}

.p-text h5 {
    font-size: 65px;
    font-weight: 600;
    line-height: 1.25;
}

.p-text h5 span {
    color: var(--main-color);
    letter-spacing: -4rem;
}

.p-text p {
    color: rgba(0, 0, 0, .5);
    font-size: 19px;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 30rem;
}


/*==================================================*/
@media (min-width: 2250px) {
    .p-text {
        margin-top: 80rem;
    }
}


@media (max-width: 1250px) {
    .p-text {
        margin-top: 80rem;
    }
}


@media (max-width: 768px) {
    /* 모바일은 세로가 길어 문구 아래에 이미지를 놓습니다.
       bottom 으로 붙여야 히어로 하단에 빈 공간이 남지 않습니다.
       125% 를 줄이면 이미지가 작아지고 그만큼 아래 여백이 다시 생깁니다. */
    .article.promotion {
        background-position: center bottom !important;
        background-size: 125% auto !important;
    }

    .p-text h5 {
        font-size: 65rem;
    }

    .p-text p {
        font-size: 19rem;
    }
}


@media (max-width: 550px) {
    .p-text {
        margin-top: 40%;
    }

    .p-text h5 {
        font-size: 80rem;
    }

    .p-text p {
        font-size: 22rem;
    }
}