@font-face {
  font-family: 'Montserrat';
  src: url('../../../assets/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #0d4f73;
  --text: #114f73;
  --koreantec: #5b3a2d;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
}
body {
  font-family: 'Montserrat', Arial, sans-serif;
}
main, .hero {
  width: 100%;
}
.hero {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2048 / 992;
  background: #fff;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 900ms ease, visibility 900ms ease;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
.hero__picture,
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.hero__image {
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--text);
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}
.hero__overlay--mobile { display: none; }

.eyebrow,
.headline,
.product-line,
.availability,
.company-line,
.koreantec__product-line,
.koreantec__headline,
.koreantec__subline,
.koreantec-mobile__product-line,
.koreantec-mobile__headline,
.koreantec-mobile__subline {
  margin: 0;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* SMART slide */
.hero__intro-block {
  position: absolute;
  left: 3%;
  top: 14.2%;
  width: 44%;
  text-align: center;
}
.eyebrow {
  font-size: clamp(16px, 2.2vw, 30px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: .02em;
}
.headline {
  margin-top: .14em;
  font-size: clamp(30px, 3.5vw, 49px);
  line-height: 1.02;
  font-weight: 750;
  letter-spacing: -.02em;
}
.hero__detail-block {
  position: absolute;
  left: 3%;
  top: 36.5%;
  width: 44.8%;
  text-align: center;
}
.product-line {
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.03em;
}
.product-line--second { margin-top: .02em; }
.availability {
  margin-top: .5em;
  font-size: clamp(12px, 1.65vw, 24px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .01em;
}
.company-line {
  position: absolute;
  left: 7.2%;
  bottom: 6.3%;
  width: 36.5%;
  text-align: center;
  font-size: clamp(11px, 1.25vw, 18px);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .03em;
}

/* KOREANTEC slide desktop */
.hero__overlay--koreantec {
  color: var(--koreantec);
}
.koreantec__top-copy {
  position: absolute;
  left: 5.45%;
  top: 13.2%;
  width: 34.5%;
}
.koreantec__product-line {
  font-size: clamp(22px, 2.6vw, 33px);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -.02em;
}
.koreantec__product-line--second { margin-top: .02em; }

.koreantec__headline-block {
  position: absolute;
  left: 6.2%;
  top: 25.3%;
  width: 30%;
}
.koreantec__headline {
  font-size: clamp(68px, 7.5vw, 118px);
  line-height: .895;
  font-weight: 800;
  letter-spacing: -.05em;
}
.koreantec__headline + .koreantec__headline { margin-top: .04em; }

.koreantec__subline {
  position: absolute;
  left: 6.2%;
  bottom: 12.9%;
  width: 39%;
  font-size: clamp(24px, 2.45vw, 40px);
  line-height: 1.03;
  font-weight: 450;
  letter-spacing: -.02em;
}


.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(13, 79, 115, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  padding: 0;
}
.hero__arrow:hover {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.hero__arrow:active {
  transform: translateY(-50%) scale(0.97);
}
.hero__arrow span {
  display: block;
  font-size: 28px;
  line-height: 1;
  margin-top: -2px;
}
.hero__arrow--prev { left: 14px; }
.hero__arrow--next { right: 14px; }

@media (max-width: 767px) {
  .hero__arrow {
    width: 28px;
    height: 28px;
    top: 50%;
    background: rgba(255, 255, 255, 0.88);
  }
  .hero__arrow span {
    font-size: 23px;
    margin-top: -2px;
  }
  .hero__arrow--prev { left: 8px; }
  .hero__arrow--next { right: 8px; }
}

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 1.6%;
  transform: translateX(-50%);
  display: inline-flex;
  gap: 10px;
  z-index: 5;
}
.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(13, 79, 115, 0.22);
}
.hero__dot.is-active {
  width: 22px;
  background: rgba(13, 79, 115, 0.92);
}

@media (max-width: 767px) {
  .hero {
    aspect-ratio: 501 / 757;
  }
  .hero__overlay--desktop { display: none; }
  .hero__overlay--mobile { display: block; }

  /* slide 1 mobile */
  .hero__mobile-intro {
    position: absolute;
    top: 5.2%;
    left: 7%;
    width: 86%;
    text-align: center;
  }
  .hero__mobile-intro .eyebrow {
    font-size: clamp(15px, 4.0vw, 20px);
    line-height: 1.04;
    font-weight: 500;
    letter-spacing: .015em;
  }
  .hero__mobile-intro .headline {
    margin-top: .05em;
    font-size: clamp(23px, 6.5vw, 33px);
    line-height: 1.02;
    font-weight: 750;
    letter-spacing: -.025em;
  }

  .hero__mobile-detail {
    position: absolute;
    top: 20.4%;
    left: 4%;
    width: 92%;
    text-align: center;
  }
  .hero__mobile-detail .product-line {
    font-size: clamp(20px, 5.7vw, 29px);
    line-height: 1.03;
    font-weight: 700;
    letter-spacing: -.03em;
  }
  .hero__mobile-detail .product-line--second { margin-top: .02em; }
  .hero__mobile-detail .availability {
    margin-top: .3em;
    font-size: clamp(11px, 3.3vw, 17px);
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: .01em;
  }

  /* slide 2 mobile */
  .hero__overlay--koreantec-mobile {
    color: var(--koreantec);
  }
  .koreantec-mobile__top-copy {
    position: absolute;
    top: 13.7%;
    left: 10%;
    width: 80%;
    text-align: center;
  }
  .koreantec-mobile__product-line {
    font-size: clamp(18px, 5.6vw, 28px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.02em;
  }
  .koreantec-mobile__product-line--second { margin-top: .02em; }

  .koreantec-mobile__headline-block {
    position: absolute;
    top: 25%;
    left: 11%;
    width: 46%;
  }
  .koreantec-mobile__headline {
    font-size: clamp(48px, 14.4vw, 90px);
    line-height: .92;
    font-weight: 800;
    letter-spacing: -.055em;
  }
  .koreantec-mobile__headline + .koreantec-mobile__headline { margin-top: .04em; }

  .koreantec-mobile__subline {
    position: absolute;
    left: 11%;
    bottom: 8.8%;
    width: 78%;
    font-size: clamp(18px, 6vw, 30px);
    line-height: 1.04;
    font-weight: 450;
    letter-spacing: -.02em;
  }

  
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: rgba(13, 79, 115, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  padding: 0;
}
.hero__arrow:hover {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
}
.hero__arrow:active {
  transform: translateY(-50%) scale(0.97);
}
.hero__arrow span {
  display: block;
  font-size: 28px;
  line-height: 1;
  margin-top: -2px;
}
.hero__arrow--prev { left: 14px; }
.hero__arrow--next { right: 14px; }

@media (max-width: 767px) {
  .hero__arrow {
    width: 28px;
    height: 28px;
    top: 50%;
    background: rgba(255, 255, 255, 0.88);
  }
  .hero__arrow span {
    font-size: 23px;
    margin-top: -2px;
  }
  .hero__arrow--prev { left: 8px; }
  .hero__arrow--next { right: 8px; }
}

.hero__dots {
    bottom: 1.2%;
    gap: 8px;
  }
  .hero__dot {
    width: 7px;
    height: 7px;
  }
  .hero__dot.is-active {
    width: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}


@media (max-width: 767px) {
  .slide--koreantec .hero__overlay--koreantec-mobile {
    display: none !important;
  }
  .slide--koreantec .hero__image {
    object-fit: cover;
    object-position: center top;
  }
}