@charset "utf-8";

.banner-slider-wrapper {position: relative;width: 100%;height: 100%;overflow: hidden;z-index: 0 !important;margin-top:0px}
.banner-slider {display: flex;transition: transform 0.5s ease-in-out;width: 100%;height: 100%;}
.banner-slide {min-width: 100%;height: 100%;box-sizing: border-box;text-align: center;}
.banner-slide img {width: 100%;height: auto;object-fit: cover; /* 비율 유지하면서 빈틈 없이 채움 */}

/* 좌/우 버튼 */
.banner-controls button {position: absolute;top: 50%;transform: translateY(-50%);
    background-color: rgba(0,0,0,0.4);color: white;border: none;padding: 10px;cursor: pointer;z-index: 1 !important;}
.banner-prev {left: 50px;}
.banner-next {right: 50px;}

/* 도트 */
.banner-dots {text-align: center;position: absolute;bottom: 10px;width: 100%;z-index: 5;}
.banner-dots span {display: inline-block;width: 18px;height: 18px;margin: 0 4px;
    background: rgba(255,255,255,0.5);border-radius: 50%;cursor: pointer;transition: background 0.3s;}
.banner-dots span.active {background:rgb(255, 0, 0);}

/* 텍스트 */
.banner-slide {
    position: relative;
}

.banner-text {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 0;
}

.banner-title,
.banner-content {
    animation: s-in 2.5s forwards;
}
@keyframes s-in {0% {transform: translateX(100%);opacity: 0;} 100% {transform: translateX(0);opacity: 1;}}
@keyframes s-out {0% {transform: translateX(0); /* 현재 위치 */} 100% {transform: translateX(-100%); /* 화면 밖 왼쪽 */}}

.banner-title {
    font-size: 1.4rem;
    color: #fff;
    z-index: -1;
    text-align: center;
    animation-delay: 2.5s;
    margin-top: 30px;
    margin-bottom: 0px;
    font-weight: bold;
    text-shadow:
        -1px -1px 0 rgb(63, 63, 63),
         1px -1px 0 rgb(63, 63, 63),
        -1px  1px 0 rgb(63, 63, 63),
         1px  1px 0 rgb(63, 63, 63);
}

@keyframes spread-in {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}

.banner-title.spread-effect {
  animation: spread-in 2s ease-out forwards;
}
@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.banner-content {
    animation: fade-in 2.5s forwards;
    opacity: 0;
    animation-delay: 5s;
    font-size: 2.5em;
    color: #fff;
    z-index: -1;
    text-align: center;
    font-weight: bold;
    text-shadow:
        -1px -1px 0 rgb(63, 63, 63),
         1px -1px 0 rgb(63, 63, 63),
        -1px  1px 0 rgb(63, 63, 63),
         1px  1px 0 rgb(63, 63, 63);
}

.banner-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 0;
    pointer-events: none;
}

.banner-text,
.banner-title,
.banner-content {
    pointer-events: none;
}

.banner-separator {
    height: 2px;
    background-color: rgba(255, 255, 255, 0.5);
    width: 70%;
    margin: 10px auto;
    transform-origin: center;
    animation: g-s-w 10s infinite;
    z-index: -1;
}
@keyframes g-s-w {
    0%, 100% { transform: scaleX(1); }
    10% { transform: scaleX(0); }
}

@media (max-width: 768px) {
  .banner-title {
    font-size: 1.1rem;
  }

  .banner-content {
    font-size: 1.5em;
  }
}

@media (max-width: 480px) {
  .banner-title {
    font-size: 1rem;
  }

  .banner-content {
    font-size: 1.7em;
  }
}