.article {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding: 160rem 0;
    overflow: hidden;
}

.article-bundle {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 흰 배경 섹션에서 이미지 섹션으로 부드럽게 넘어가도록 상단을 흰색으로 덮습니다.
   height 를 키우면 흰색이 더 아래까지 내려와 이미지가 늦게 드러납니다. */
.article1,
.article4 {
    position: relative;
}

.article1::before,
.article4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    z-index: 3;
    pointer-events: none;
}

/* 히어로 섹션에서 이어지므로 히어로 배경 이미지의 바탕색(#efefef)을 씁니다 */
.article1::before {
    background: linear-gradient(to bottom,
        #efefef 0%,
        rgba(239, 239, 239, .92) 30%,
        rgba(239, 239, 239, .6) 60%,
        rgba(239, 239, 239, 0) 100%);
}

/* 앞의 article3 이 흰 배경으로 끝나므로 흰색 유지 */
.article4::before {
    background: linear-gradient(to bottom,
        #fff 0%,
        rgba(255, 255, 255, .92) 30%,
        rgba(255, 255, 255, .6) 60%,
        rgba(255, 255, 255, 0) 100%);
}

.article.parallax__item {
    height: 82vh;
}

.article.parallax__item .article-bg img {
    object-fit: cover;
    object-position: center;
}

.article.parallax__item .article-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 clamp(40px, 8vw, 160px) clamp(56px, 9vh, 110px);
    justify-content: flex-end;
    pointer-events: none;
    z-index: 3;
}

.article.parallax__item .at-text {
    position: static;
    width: fit-content;
    max-width: min(760px, 100%);
    text-align: left;
}

.article.parallax__item .at-text ul {
    width: fit-content;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
    text-align: left;
}

.article.parallax__item.article1 .article-wrapper,
.article.parallax__item.article3 .article-wrapper {
    align-items: flex-start;
    padding-left: 120px;
}

.article.parallax__item.article2 .article-wrapper {
    align-items: flex-end;
    padding-right: 120px;
}

.article5 {
    position: relative;
    background-color: #fff;
    z-index: 5;
}

.article-wrapper {
    width: 1400rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*==================================================*/
@media (max-width: 1450px) {
    .article-wrapper {
        width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .article.parallax__item {
        height: auto;
    }

    .article.parallax__item .article-wrapper {
        position: relative;
        inset: auto;
        height: auto;
        padding: 0 20px;
        pointer-events: auto;
    }

    .article.parallax__item .at-text {
        text-align: left;
    }

    .article.parallax__item.article1 .article-wrapper,
    .article.parallax__item.article2 .article-wrapper,
    .article.parallax__item.article3 .article-wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}