:root { font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; }
body { min-height: 100vh; min-height: 100svh; overflow: hidden; background: #eafafa; }
.intro { position: relative; display: grid; grid-template-columns: 57.3% 42.7%; width: 100vw; height: 100vh; height: 100svh; overflow: hidden; background: #eafafa; }
.intro-card { position: relative; min-width: 0; }
.intro-card--claim {
  z-index: 2;
}
.intro-card--claim::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  border-radius: 0 clamp(48px, 5vw, 96px) clamp(48px, 5vw, 96px) 0;
  background: url("/inc/renewal/assets/img/main_intro/intro-bg1.png") center / cover no-repeat;
  box-shadow: 16px 8px 26px rgba(25, 79, 91, .35);
}
.intro-card--portal { z-index: 1; }
.intro-card--portal::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 clamp(-96px, -5vw, -48px);
  content: "";
  background: url("/inc/renewal/assets/img/main_intro/intro-bg2.png") center / cover no-repeat;
}
.intro-card__content { position: absolute; z-index: 2; }
.intro-card__family {
  position: absolute;
  z-index: 1;
  right: 3%;
  bottom: 0;
  width: 56.4%;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.intro-card__content--claim { top: 13.2%; left: 24%; width: 60%; color: #fff; }
.intro-card__content--portal { top: 31%; left: 13.7%; width: 74%; color: #00578c; }
.intro-card__logo { display: block; width: auto; }
.intro-card__logo--claim { height: clamp(34px, 2.7vw, 52px); }
.intro-card__logo--portal { height: clamp(20px, 1.46vw, 28px); }
.intro-card__title { margin: 0; font-weight: 800; letter-spacing: -.055em; line-height: 1.15; }
.intro-card__title--claim { margin-top: 15px; font-size: clamp(44px, 4.48vw, 86px); }
.intro-card__title--portal { margin-top: 20px; font-size: clamp(40px, 3.75vw, 72px); }
.intro-card__description { margin: 0; font-weight: 500; letter-spacing: -.035em; line-height: 1.35; }
.intro-card__description--claim { margin-top: 28px; font-size: clamp(14px, 1.25vw, 24px); }
.intro-card__description--portal { margin-top: 22px; font-size: clamp(14px, 1.25vw, 24px); }
.intro-card__button { display: flex; align-items: center; justify-content: center; gap: 24px; width: min(clamp(220px, 15.36vw, 295px), 100%); height: clamp(64px, 4.38vw, 84px); margin-top: 24px; border-radius: 11px; font-size: clamp(20px, 1.41vw, 27px); font-weight: 800; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease; }
.intro-card__button:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 70, 125, .2); }
.intro-card__button:focus-visible { outline: 4px solid #ffd400; outline-offset: 4px; }
.intro-card__button img { width: 33px; height: 23px; }
.intro-card__button--claim { color: #135894; background: #fff; }
.intro-card__button--portal { height: clamp(48px, 3.33vw, 64px); color: #fff; background: #0875b2; font-size: clamp(20px, 1.25vw, 24px); }
@media (min-width: 1025px) and (max-width: 1400px) {
  .intro-card__content--claim { left: 18%; width: 58%; }
  .intro-card__content--portal { left: 10%; width: 82%; }
  .intro-card__title--claim { margin-top: 15px; }
  .intro-card__title--portal { margin-top: 16px; }
  .intro-card__description--claim,
  .intro-card__description--portal { margin-top: 18px; }
  .intro-card__button { gap: 18px; margin-top: 20px; }
  .intro-card__button img { width: 27px; height: auto; }
  .intro-card__family { right: 1%; width: 61%; }
}
@media (max-width: 1024px) {
  body { overflow-y: auto; }
  .intro { display: block; width: 100%; height: max(100svh, 844px); min-height: 844px; background: #eafafa; }
  .intro-card { position: absolute; inset-inline: 0; }
  .intro-card--claim { top: 0; height: 65%; }
  .intro-card--portal { top: 65%; height: 35%; }
  .intro-card--claim::before {
    border-radius: 0 0 clamp(34px, 10vw, 48px) clamp(34px, 10vw, 48px);
    background-position: center bottom;
    box-shadow: 8px 14px 24px rgba(25, 79, 91, .38);
  }
  .intro-card__family { right: 5%; width: 64%; }
  .intro-card--portal::before {
    inset: -48px 0 0;
    background-position: center bottom;
  }
  .intro-card__content--claim { top: 7%; left: 10%; width: 80%; }
  .intro-card__content--portal { top: 22%; left: 22.5%; width: 64%; }
  .intro-card__logo--claim { width: 122px; height: auto; }
  .intro-card__logo--portal { width: 143px; height: auto; }
  .intro-card__title--claim { margin-top: 15px; font-size: 48px; line-height: 1.18; }
  .intro-card__title--portal { margin-top: 10px; font-size: 32px; line-height: 1.18; }
  .intro-card__description--claim { margin-top: 10px; font-size: 14px; line-height: 1.35; }
  .intro-card__description--portal { display: none; }
  .intro-card__button { gap: 15px; height: 56px; margin-top: 34px; font-size: 20px; }
  .intro-card__button--claim { width: 205px; }
  .intro-card__button--portal { width: 207px; margin-top: 18px; }
  .intro-card__button img { width: 27px; height: auto; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .intro { height: max(100svh, 900px); min-height: 900px; }
  .intro-card__content--claim { top: 8%; left: 10%; width: 62%; }
  .intro-card__content--portal { top: 18%; left: 18%; width: 68%; }
  .intro-card__logo--claim { width: 150px; }
  .intro-card__logo--portal { width: 165px; }
  .intro-card__title--claim { font-size: 64px; }
  .intro-card__title--portal { font-size: 44px; }
  .intro-card__description--claim { font-size: 18px; }
  .intro-card__button { width: 240px; height: 64px; font-size: 22px; }
  .intro-card__button--portal { width: 207px; height: 56px; font-size: 20px; }
  .intro-card__family { right: 6%; width: 50%; }
}
@media (max-width: 350px) { .intro-card__content--claim { left: 8%; width: 84%; } .intro-card__content--portal { left: 18%; width: 72%; } .intro-card__title--claim { font-size: 42px; } .intro-card__title--portal { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .intro-card__button { transition: none; } }