/* 메인 슬라이드 배너 섹션 */
.main-banner-section {
  position: relative;
  width: 100%;
  overflow: hidden; /* 슬라이더 경계 밖으로 나가는 요소 숨기기 */
}

.main-swiper {
  width: 100%;
  height: 550px; /* 데스크탑 기준 슬라이더 높이 */
  position: relative; /* 자식 요소 포지셔닝 기준 */
}

.swiper-slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center; /* 이미지와 콘텐츠를 수직 중앙 정렬 */
  overflow: hidden; /* 이미지 오버플로우 처리 */
  /* Swiper 자체적으로 width를 조정하므로 여기서 width:100% 강제하지 않음 */
}

.swiper-slide:nth-child(1){background-color: #7ca697;}

.slide-bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 슬라이드 영역을 가득 채우도록 */
  position: absolute;
  top: 10;
  left: 0;
  z-index: 1; /* 텍스트 아래에 위치 */
}

.slide-content {
  position: relative; /* z-index를 높여 이미지 위에 표시 */
  z-index: 2;
  color: #fff; /* 기본 텍스트 색상은 이미지 위에 잘 보이도록 흰색으로 설정 */
  text-align: center;
  padding: 20px;
  padding: 30px 40px; /* 오버레이 패딩 */
  border-radius: 8px; /* 오버레이 모서리 둥글게 */
}
.slide_description{
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.1rem;
  display: inline-block;
  color:#d84141;
}
.slide-sub-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9); /* 서브 텍스트 */
  margin-bottom: 0.8rem; /* 여백 조정 */
  white-space: pre-line; /* 줄바꿈 적용 */
}


.slide-main-text {
  font-size: 2.8rem; /* 메인 텍스트 크기 */
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.8rem;  /*여백 조정 */
  white-space: pre-line; /* 줄바꿈 적용 */
  color: #fff; /* 메인 텍스트 색상 */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 그림자 추가로 가독성 향상 */
}

.slide-cta-button {
  display: inline-block;
  padding: 0.8rem 2rem; /* 버튼 패딩 */
  background-color: #131313; /* 강조색 */
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 5px;
  transition: background-color 0.3s ease, transform 0.2s ease; /* 전환 효과 추가 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 버튼 그림자 */
}

.slide-cta-button:hover {
  background-color: #c03636; /* 호버 시 색상 변경 */
  transform: translateY(-2px); /* 약간 위로 떠오르는 효과 */
}

/* Swiper 네비게이션 버튼 (화살표) */
.main-swiper .swiper-button-prev,
.main-swiper .swiper-button-next {
  color: #fff; /* 화살표 색상 */
  background-color: rgba(0, 0, 0, 0.4); /* 화살표 배경색 (반투명) */
  border-radius: 50%;
  width: 50px; /* 크기 키움 */
  height: 50px; /* 크기 키움 */
  transition: background-color 0.3s ease;
}
.main-swiper .swiper-button-prev:hover,
.main-swiper .swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.6);
}
.main-swiper .swiper-button-prev::after,
.main-swiper .swiper-button-next::after {
  font-size: 1.5rem; /* 화살표 아이콘 크기 */
}

/* Swiper 페이지네이션 (점) */
.main-swiper .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.8); /* 페이지네이션 점 색상 */
  opacity: 1;
}
.main-swiper .swiper-pagination-bullet-active {
  background-color: #d84141; /* 활성 페이지네이션 점 색상 */
}

/* 미디어 쿼리 (모바일) */
@media (max-width: 767px) {
  .main-swiper {
    height: 400px; /* 모바일 슬라이더 높이 조정 */
  }

  .slide-content {
    padding: 20px 25px; /* 모바일 오버레이 패딩 */
  }

  .slide-sub-text {
    font-size: 0.9rem;
  }

  .slide-main-text {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  .slide-cta-button {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  .main-swiper .swiper-button-prev,
  .main-swiper .swiper-button-next {
    display: none; /* 모바일에서는 화살표 숨기기 */
  }
}