.sub-top-container {
  position: relative;
  height: 400px; /* 메인 비주얼보다 낮은 고정 높이 */
  overflow: hidden;
  display: flex;
  align-items: center; /* 수직 중앙 정렬 */
  justify-content: center; /* 수평 중앙 정렬 */
  text-align: center;
  color: #fff;
}

/* 배경 이미지 스타일 */
.sub-top-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.sub-top-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 영역을 꽉 채우도록 */
}

/* 오버레이 스타일 */
.sub-top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 어두운 오버레이 */
  z-index: 2;
}

/* 콘텐츠 영역 */
.sub-top-content-area {
  position: relative;
  z-index: 3; /* 오버레이 위에 위치 */
}

.sub-top-title {
  font-size: 42px;
  font-weight: bold;
  margin-bottom: 10px;
}

.sub-top-description {
  font-size: 18px;
  font-weight: 300;
}

/* ------------------------------------------- */
/* 📏 태블릿 및 작은 화면 데스크톱 (1024px 이하) */
/* ------------------------------------------- */

@media (max-width: 1024px) {
    
    .sub-top-container {
        height: 320px; /* 태블릿 환경에 맞춰 높이 감소 */
    }

    .sub-top-title {
        font-size: 34px; /* 제목 크기 조정 */
        margin-bottom: 8px;
    }

    .sub-top-description {
        font-size: 16px; /* 설명 텍스트 크기 조정 */
    }
}


/* ------------------------------------------- */
/* 📱 모바일 환경 (768px 이하) */
/* ------------------------------------------- */

@media (max-width: 768px) {
    
    .sub-top-container {
        height: 250px; /* 모바일에서 추가 높이 감소 */
    }
    
    .sub-top-content-area {
        padding: 0 20px; /* 작은 화면에서 좌우 패딩 감소 */
    }

    .sub-top-title {
        font-size: 26px; /* 모바일 제목 크기 */
    }

    .sub-top-description {
        font-size: 14px; /* 모바일 설명 텍스트 크기 */
    }
}