/* 아이러브발리 메인 슬라이딩 */

.ilb-main-hero,
.ilb-main-hero *{
  box-sizing:border-box;
}

.ilb-main-hero{
  position:relative;
  width:100%;
  height:clamp(500px,39vw,600px);
  overflow:hidden;
  background:#1f2328;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
}

.ilb-main-hero__viewport,
.ilb-main-hero__slide,
.ilb-main-hero__picture{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.ilb-main-hero__slide{
  z-index:1;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .75s ease,visibility .75s ease;
}

.ilb-main-hero__slide.is-active{
  z-index:2;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.ilb-main-hero__picture{
  display:block;
  overflow:hidden;
}

.ilb-main-hero__image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.01);
  transition:transform 7s ease;
}

.ilb-main-hero__slide.is-active .ilb-main-hero__image{
  transform:scale(1.04);
}

.ilb-main-hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:rgba(0,0,0,var(--ilb-hero-overlay,.20));
  pointer-events:none;
}

.ilb-main-hero__slide.is-text-left .ilb-main-hero__overlay{
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.17) 45%,
      rgba(0,0,0,0) 76%
    ),
    rgba(0,0,0,var(--ilb-hero-overlay,.20));
}

.ilb-main-hero__slide.is-text-right .ilb-main-hero__overlay{
  background:
    linear-gradient(
      270deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.17) 45%,
      rgba(0,0,0,0) 76%
    ),
    rgba(0,0,0,var(--ilb-hero-overlay,.20));
}

.ilb-main-hero__slide.is-text-center .ilb-main-hero__overlay{
  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.25) 0%,
      rgba(0,0,0,.04) 65%
    ),
    rgba(0,0,0,var(--ilb-hero-overlay,.20));
}

.ilb-main-hero__inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1280px;
  height:100%;
  margin:0 auto;
  padding:0 44px;
  display:flex;
  align-items:center;
}

.ilb-main-hero__content{
  width:min(720px,66%);
  padding:24px 0 52px;
  word-break:keep-all;
}

.ilb-main-hero__slide.is-text-left .ilb-main-hero__inner{
  justify-content:flex-start;
  text-align:left;
}

.ilb-main-hero__slide.is-text-center .ilb-main-hero__inner{
  justify-content:center;
  text-align:center;
}

.ilb-main-hero__slide.is-text-right .ilb-main-hero__inner{
  justify-content:flex-end;
  text-align:right;
}

.ilb-main-hero__slide.is-color-white{
  color:#ffffff;
  text-shadow:0 2px 20px rgba(0,0,0,.28);
}

.ilb-main-hero__slide.is-color-black{
  color:#151515;
  text-shadow:0 1px 14px rgba(255,255,255,.24);
}

.ilb-main-hero__kicker{
  margin:0 0 5px;
  color:inherit;
  font-size:14px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:.19em;
}

.ilb-main-hero__title{
  margin:0;
  color:inherit;
  font-size:clamp(40px,4.2vw,62px);
  line-height:1.12;
  font-weight:800;
  letter-spacing:-2.4px;
}

.ilb-main-hero__description{
  max-width:650px;
  margin:20px 0 0;
  color:inherit;
  font-size:17px;
  line-height:1.75;
  font-weight:500;
  letter-spacing:-.3px;
}

.is-text-center .ilb-main-hero__description{
  margin-left:auto;
  margin-right:auto;
}

.is-text-right .ilb-main-hero__description{
  margin-left:auto;
}

.ilb-main-hero__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  height:42px;
  margin-top:28px;
  padding:0 20px;
  border:1px solid currentColor;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:inherit !important;
  font-size:13px;
  line-height:1;
  font-weight:800;
  text-decoration:none !important;
  text-shadow:none;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease;
}

.is-color-white .ilb-main-hero__button:hover{
  background:#ffffff;
  border-color:#ffffff;
  color:#151515 !important;
}

.is-color-black .ilb-main-hero__button:hover{
  background:#151515;
  border-color:#151515;
  color:#ffffff !important;
}

.ilb-main-hero__arrow{
  position:absolute;
  z-index:5;
  top:50%;
  width:42px;
  height:42px;
  margin-top:-21px;
  padding:0;
  border:1px solid rgba(255,255,255,.48);
  border-radius:999px;
  background:rgba(0,0,0,.14);
  color:#ffffff;
  font-family:Arial,sans-serif;
  font-size:30px;
  line-height:38px;
  font-weight:300;
  cursor:pointer;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.ilb-main-hero__arrow:hover{
  background:rgba(0,0,0,.4);
}

.ilb-main-hero__arrow.is-prev{
  left:22px;
}

.ilb-main-hero__arrow.is-next{
  right:22px;
}

.ilb-main-hero__navigation{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:27px;
  width:100%;
  max-width:1280px;
  padding:0 44px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  color:#ffffff;
}

.ilb-main-hero__counter{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  line-height:1;
  font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
}

.ilb-main-hero__counter strong{
  font-size:14px;
  font-weight:800;
}

.ilb-main-hero__dots{
  display:flex;
  align-items:center;
  gap:7px;
}

.ilb-main-hero__dot{
  width:20px;
  height:3px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.44);
  cursor:pointer;
  transition:
    width .25s ease,
    background .25s ease;
}

.ilb-main-hero__dot.is-active{
  width:38px;
  background:#ffffff;
}

.ilb-main-hero-empty{
  padding:80px 20px;
  background:#f4f5f7;
  color:#777777;
  font-size:14px;
  text-align:center;
}

@media(max-width:1024px){

  .ilb-main-hero{
    height:540px;
  }

  .ilb-main-hero__inner,
  .ilb-main-hero__navigation{
    padding-left:30px;
    padding-right:30px;
  }

  .ilb-main-hero__content{
    width:min(680px,74%);
  }

  .ilb-main-hero__title{
    font-size:48px;
  }

  .ilb-main-hero__arrow.is-prev{
    left:14px;
  }

  .ilb-main-hero__arrow.is-next{
    right:14px;
  }
}

@media(max-width:767px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* 모바일 화면 전체 폭으로 확장 */
  .ilb-main-hero{
    position:relative;
    left:50%;
    width:100vw !important;
    max-width:none !important;
    height:580px;
    min-height:580px;
    margin-left:-50vw !important;
    margin-right:0 !important;
    overflow:hidden;
  }

  .ilb-main-hero__viewport,
  .ilb-main-hero__slide,
  .ilb-main-hero__picture{
    width:100%;
    height:100%;
  }

  .ilb-main-hero__image{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* 모바일은 사진 하단 중심으로 어둡게 */
  .ilb-main-hero__slide.is-text-left .ilb-main-hero__overlay,
  .ilb-main-hero__slide.is-text-right .ilb-main-hero__overlay,
  .ilb-main-hero__slide.is-text-center .ilb-main-hero__overlay{
    background:
      linear-gradient(
        0deg,
        rgba(0,0,0,.62) 0%,
        rgba(0,0,0,.32) 34%,
        rgba(0,0,0,.05) 72%
      ),
      rgba(0,0,0,var(--ilb-hero-overlay,.12));
  }

  /* 모바일 텍스트는 모두 왼쪽 아래 */
  .ilb-main-hero__inner{
    width:100%;
    max-width:none;
    margin:0;
    padding:0 22px;
    align-items:flex-end;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .ilb-main-hero__content{
    width:100%;
    max-width:100%;
    padding:0 0 70px;
  }

  .ilb-main-hero__kicker{
    margin:0 0 10px;
    font-size:10px;
    line-height:1.4;
    letter-spacing:.18em;
  }

  .ilb-main-hero__title{
    max-width:330px;
    font-size:32px;
    line-height:1.17;
    letter-spacing:-1.2px;
  }

  .ilb-main-hero__description{
    max-width:330px;
    margin-top:13px;
    font-size:13px;
    line-height:1.6;
  }

  .ilb-main-hero__button{
    height:37px;
    min-width:100px;
    margin-top:18px;
    padding:0 15px;
    font-size:12px;
  }

  /* 모바일 좌우 화살표 숨김 */
  .ilb-main-hero__arrow{
    display:none;
  }

  /* 모바일 숫자 숨김 */
  .ilb-main-hero__counter{
    display:none;
  }

  /* 진행선만 오른쪽 아래 표시 */
  .ilb-main-hero__navigation{
    left:auto;
    right:22px;
    bottom:25px;
    width:auto;
    max-width:none;
    padding:0;
    transform:none;
    justify-content:flex-end;
    gap:0;
  }

  .ilb-main-hero__dots{
    gap:6px;
  }

  .ilb-main-hero__dot{
    width:14px;
    height:2px;
  }

  .ilb-main-hero__dot.is-active{
    width:30px;
  }
}

@media(prefers-reduced-motion:reduce){

  .ilb-main-hero__slide,
  .ilb-main-hero__image,
  .ilb-main-hero__dot{
    transition:none !important;
  }
}