/* =========================================================
   hero
========================================================= */

.hero {
  position: relative;
  height: 1016px;
  overflow: hidden;
  background: linear-gradient(180deg, #bef5ff 0%, rgba(190, 245, 255, 0.2) 100%);
}

.ghost {
  position: absolute;
  margin: 0;
  color: #fff;
  font-family: "IBM Plex Sans";
  font-size: 260px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -10.4px;
  opacity: 0.5;
  white-space: nowrap;
}

.ghost-1 {
  left: calc(var(--gutter) - 297px);
  top: 99px;
}

.ghost-2 {
  left: calc(var(--gutter) + 450px);
  top: 315px;
}

.hero-obj {
  position: absolute;
  left: var(--gutter);
  top: 181px;
  width: 706px;
  height: 761px;
  object-fit: cover;
}

.hero-copy {
  position: absolute;
  left: calc(var(--gutter) + 774px);
  top: 440px;
  width: 511px;
}

.hero-copy p {
  margin: 0 0 22px;
  color: var(--black);
  font-family: Pretendard;
  font-size: 36px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.hero-copy h1 {
  margin: 0 0 52px;
  font-family: Paperlogy;
  font-size: 78px;
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.95px;
  color: transparent;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
}

.hero-copy span {
  display: block;
  margin-bottom: 52px;
  color: var(--black);
  font-family: Pretendard;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: -0.4px;
}

.hero-links {
  display: flex;
  gap: 16px;
}

.hero-links .btn {
  font-family: Paperlogy;
  font-weight: 700;
}

/* =========================================================
   category
========================================================= */

.category-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 646px;
  padding-top: 104px;
  background: linear-gradient(180deg, #f0fcff 0%, #effcff 100%);
}

.category-sec h2 {
  margin: 0;
  color: var(--black);
  font-family: Paperlogy;
  font-size: 42px;
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.84px;
}

em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
}

.search {
  --search-width: clamp(350px, 55.104vw, 1058px);
  --search-height: clamp(45px, 4.375vw, 84px);
  --search-border: 2px;
  --search-padding: 0;
  --search-font: clamp(14px, 1.146vw, 22px);
  --region-width: clamp(47px, 12.188vw, 234px);
  --region-height: 100%;
  --region-toggle-padding-left: clamp(24px, 2.448vw, 47px);
  --region-chevron-size: clamp(16px, 1.042vw, 20px);
  --region-chevron-left: clamp(58px, 6.51vw, 125px);
  --region-chevron-top: calc((var(--search-height) - var(--region-chevron-size)) / 2);
  --region-menu-left: 27px;
  --region-menu-top: calc(100% + 8px);
  --region-menu-width: 128px;
  --region-menu-item-height: 56px;
  --region-menu-radius: 18px;
  --region-menu-padding: 0 20px;
  --search-input-margin-left: 0;
  --search-submit-size: clamp(29px, 3.021vw, 58px);
  --search-submit-margin-right: clamp(10px, 0.729vw, 14px);
  --search-icon-size: clamp(16px, 2.188vw, 42px);
  --search-icon-inset: calc((var(--search-submit-size) - var(--search-icon-size)) / 2);
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--search-width);
  height: var(--search-height);
  margin-top: 60px;
  padding: var(--search-padding);
  overflow: visible;
  border: var(--search-border) solid #e2eeff;
  border-radius: 100px;
  background: #fff;
}

.search button,
.search input {
  border: 0;
  background: transparent;
}

.search input,
.search-submit {
  padding: 0;
}

.region-select {
  position: relative;
  z-index: 20;
  width: var(--region-width);
  height: var(--region-height);
  flex: 0 0 var(--region-width);
}

.region-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  padding-left: var(--region-toggle-padding-left);
  color: var(--black);
  font-family: Pretendard;
  font-size: var(--search-font);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.44px;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.region-toggle:active,
.region-toggle:focus {
  background: transparent;
  outline: 0;
}

.region-toggle::after {
  position: absolute;
  left: var(--region-chevron-left);
  top: var(--region-chevron-top);
  width: var(--region-chevron-size);
  height: var(--region-chevron-size);
  content: "";
  background: url("/knda/img/common-icon-chevron-up-black.svg") center / var(--region-chevron-size)
    var(--region-chevron-size) no-repeat;
  transform: rotate(180deg);
}

.region-select.open .region-toggle::after {
  transform: none;
}

.region-menu {
  position: absolute;
  z-index: 100;
  left: var(--region-menu-left);
  top: var(--region-menu-top);
  display: none;
  width: var(--region-menu-width);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--region-menu-radius);
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

.region-menu::-webkit-scrollbar {
  width: 4px;
}

.region-menu::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(24, 23, 28, 0.2);
}

.region-menu::-webkit-scrollbar-track {
  background: transparent;
}

.region-select.open .region-menu {
  display: block;
}

.region-menu button {
  display: flex;
  align-items: center;
  width: var(--region-menu-width);
  height: var(--region-menu-item-height);
  padding: var(--region-menu-padding);
  color: rgba(24, 23, 28, 0.6);
  font-family: Pretendard;
  font-size: var(--search-font);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  text-align: left;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.region-menu button:active,
.region-menu button:focus {
  background: transparent;
  outline: 0;
}

.region-menu button.active {
  color: var(--blue2);
}

.search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin-left: var(--search-input-margin-left);
  padding: 0;
  outline: 0;
  color: var(--black);
  font-family: Pretendard;
  font-size: var(--search-font);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.44px;
}

.search input::placeholder {
  color: #afafaf;
}

.search-submit {
  position: relative;
  flex: 0 0 var(--search-submit-size);
  width: var(--search-submit-size);
  height: var(--search-submit-size);
  margin-right: var(--search-submit-margin-right);
  border-radius: 100px;
  background: var(--blue2) !important;
}

.search-submit::before {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--search-icon-size);
  height: var(--search-icon-size);
  content: "";
  background: url("/knda/img/common-icon-search-white.png") center / var(--search-icon-size) var(--search-icon-size)
    no-repeat;
  transform: translate(-50%, -50%);
}

.categories {
  --cat-width: 120px;
  --cat-height: 160px;
  --cat-gap: 10px;
  --cat-font: 17px;
  --cat-icon-width: 120px;
  --cat-icon-height: 120px;
  --cat-icon-padding: 26px;
  --cat-icon-border: 2px;
  --cat-icon-radius: 100px;
  --category-arrow-size: 50px;
  --category-arrow-gap: 40px;
  --category-swiper-left: calc(var(--category-arrow-size) + var(--category-arrow-gap));
  --category-arrow-top: calc((var(--cat-icon-height) - var(--category-arrow-size)) / 2);
  position: relative;
  flex: 0 0 var(--cat-height);
  width: 1460px;
  height: var(--cat-height);
  margin-top: 40px;
}

.category-swiper {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1280px;
  height: var(--cat-height);
  overflow: hidden;
  transform: translateX(-50%);
}

.category-swiper .swiper-wrapper {
  align-items: flex-start;
}

.cat {
  display: flex;
  flex: 0 0 var(--cat-width);
  flex-direction: column;
  align-items: center;
  gap: var(--cat-gap);
  width: var(--cat-width);
  height: var(--cat-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: #1077fd;
  font-family: Pretendard;
  font-size: var(--cat-font);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.07px;
}

.cat img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--cat-icon-width);
  height: var(--cat-icon-height);
  padding: var(--cat-icon-padding);
  object-fit: contain;
  border: var(--cat-icon-border) solid transparent;
  border-radius: var(--cat-icon-radius);
  background: var(--blue2);
}

.cat.active img {
  border-color: transparent;
  background:
    linear-gradient(#2a8dff, #2a8dff) padding-box,
    linear-gradient(90deg, #1081f9, #21ffe5) border-box;
}

.cat:hover img,
.cat:focus-visible img {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #1081f9, #21ffe5) border-box;
}

.circle-prev,
.circle-next {
  position: absolute;
  top: var(--category-arrow-top);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--category-arrow-size);
  height: var(--category-arrow-size);
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  color: var(--blue2);
  font-size: 0;
}

.circle-prev::before,
.circle-next::before {
  width: 20px;
  height: 20px;
  content: "";
  background: center / 20px 20px no-repeat;
}

.circle-prev::before {
  background-image: url("/knda/img/common-icon-arrow-left-blue.svg");
}

.circle-next::before {
  background-image: url("/knda/img/common-icon-arrow-right-blue.svg");
}

.circle-prev.swiper-button-lock,
.circle-next.swiper-button-lock {
  display: flex;
}

.circle-prev.swiper-button-disabled,
.circle-next.swiper-button-disabled {
  opacity: 1;
  pointer-events: auto;
}

.circle-prev {
  left: 0;
}

.circle-next {
  right: 0;
}

/* =========================================================
   intro
========================================================= */

.intro {
  position: relative;
  height: 1228px;
  overflow: hidden;
  background: linear-gradient(180deg, #effcff 0%, #dff9ff 100%);
}

.intro::before {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 101px;
  width: 1479px;
  height: 1113px;
  content: "";
  background: url("/knda/img/main/main-sec4-bg-orbit.svg") center / contain no-repeat;
  transform: translateX(-50%);
}

.intro::after {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 645px;
  width: 3360px;
  height: 1102px;
  content: "";
  background: url("/knda/img/main/main-sec4-bg-ellipse.svg") center / 100% 100% no-repeat;
  transform: translateX(calc(-50% - 27px));
}

.intro-float {
  position: absolute;
  z-index: 1;
  object-fit: cover;
  pointer-events: none;
}

.intro-left {
  left: calc(var(--gutter) - 320px);
  top: -96px;
  width: 464px;
  height: 659px;
  --intro-visible-opacity: 0.6;
  opacity: 0.6;
  filter: blur(49px);
}

.intro-right {
  left: calc(var(--gutter) + 1161px);
  top: 383px;
  width: 439px;
  height: 353px;
  filter: blur(12px);
}

.intro-head {
  position: relative;
  z-index: 2;
  width: 531px;
  margin: 128px auto 0;
  text-align: center;
}

.intro-head small {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 18px;
  border-radius: 30px;
  background: linear-gradient(90deg, #6ee9ff, #80f6b1);
  color: #101010;
  font-family: Pretendard;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
}

.intro-head small::after {
  position: absolute;
  left: 50%;
  top: 48px;
  width: 30px;
  height: 19px;
  content: "";
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='19' viewBox='0 0 30 19' fill='none'%3E%3Cpath d='M16.3681 17.8165C15.5725 18.7123 14.1731 18.7123 13.3775 17.8165L0.508485 3.32818C-0.637301 2.03822 0.278444 7.90362e-07 2.00379 9.41197e-07L27.7418 3.19129e-06C29.4672 3.34212e-06 30.3829 2.03822 29.2371 3.32818L16.3681 17.8165Z' fill='%2379F1DE'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transform: translateX(-50%);
}

.intro-head h2 {
  margin: 45px 0 0;
  color: #101010;
  font-family: Paperlogy;
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.2px;
  text-align: center;
  white-space: nowrap;
}

.intro-head p {
  margin: 32px 0 0;
  font-family: Pretendard;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.07px;
}

.intro-head p b {
  color: var(--blue2);
  font-weight: 600;
}

.intro-cards {
  --intro-card-gap: 21px;
  --intro-card-width: 400px;
  --intro-card-height: 502px;
  --intro-card-padding: 0 42px 60px;
  --intro-card-radius: 50px;
  --intro-title-gap: 30px;
  --intro-title-font: 36px;
  --intro-text-font: 24px;
  --intro-img1-left: 93px;
  --intro-img1-top: -70px;
  --intro-img1-width: min(318px, 81.122%);
  --intro-img2-left: 64px;
  --intro-img2-top: -105px;
  --intro-img2-width: min(350px, 89.286%);
  --intro-img3-left: 69px;
  --intro-img3-top: -122px;
  --intro-img3-width: min(365px, 93.112%);
  position: absolute;
  z-index: 1;
  left: calc(var(--gutter) + 37px);
  top: 538px;
  display: flex;
  gap: var(--intro-card-gap);
  width: 1218px;
}

.intro-cards-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--intro-card-gap);
  width: 100%;
  height: 100%;
}

.intro-cards article {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: var(--intro-card-width);
  height: var(--intro-card-height);
  padding: var(--intro-card-padding);
  border-radius: var(--intro-card-radius);
  box-shadow: 0 30px 30px rgba(0, 0, 0, 0.08);
}

.intro-cards article:nth-child(1) {
  --intro-base-transform: rotate(-5.13deg);
  background: linear-gradient(180deg, #b2e3ff 0%, #80cffd 58.65%);
}

.intro-cards article:nth-child(2) {
  color: #fff;
  --intro-base-transform: translateX(-42px) rotate(4.85deg);
  background: linear-gradient(180deg, #2a8dff 0%, #0b74ed 100%);
}

.intro-cards article:nth-child(3) {
  --intro-base-transform: translateX(-60px) rotate(-5.48deg);
  background: linear-gradient(180deg, #d4fff5 0%, #9af5df 100%);
}

.intro .intro-float,
.intro .intro-cards article {
  --intro-y: 0px;
  transform: translateY(var(--intro-y)) var(--intro-base-transform, translateZ(0));
}

.intro-cards img {
  position: absolute;
  object-fit: contain;
}

.intro-cards article:nth-child(1) img {
  left: var(--intro-img1-left);
  top: var(--intro-img1-top);
  width: var(--intro-img1-width);
  height: auto;
  aspect-ratio: 1 / 1;
}

.intro-cards article:nth-child(2) img {
  left: var(--intro-img2-left);
  top: var(--intro-img2-top);
  width: var(--intro-img2-width);
  height: auto;
  aspect-ratio: 1 / 1;
}

.intro-cards article:nth-child(3) img {
  left: var(--intro-img3-left);
  top: var(--intro-img3-top);
  width: var(--intro-img3-width);
  height: auto;
  aspect-ratio: 1 / 1;
}

.intro-cards h3 {
  margin: 0 0 var(--intro-title-gap);
  font-family: Pretendard;
  font-size: var(--intro-title-font);
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.09px;
}

.intro-cards p {
  margin: 0;
  font-family: Pretendard;
  font-size: var(--intro-text-font);
  font-style: normal;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.06px;
}

.intro-cards article:nth-child(2) p {
  color: #fff;
}

/* =========================================================
   programs
========================================================= */

.programs {
  position: relative;
  height: 1195px;
  overflow: visible;
  background: #fff;
}

.programs::before {
  position: absolute;
  z-index: 0;
  left: -699px;
  top: -353px;
  width: 1355px;
  height: 1355px;
  content: "";
  background: url("/knda/img/main/main-sec7-bg-ellipse.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.program-head {
  position: absolute;
  z-index: 3;
  left: calc(var(--gutter) + 1px);
  top: 86px;
  display: flex;
  align-items: flex-end;
  gap: 216px;
  width: 1278px;
}

.program-copy-swiper {
  flex: 0 0 628px;
  width: 628px;
  height: 374px;
  overflow: visible;
}

.program-copy-swiper .swiper-wrapper {
  align-items: flex-start;
  overflow: visible;
}

.program-copy {
  display: flex;
  flex: 0 0 628px;
  flex-direction: column;
  align-items: flex-start;
  width: 628px;
  height: 374px;
  overflow: visible;
}

.programs .program-copy h2,
.programs .program-copy p,
.programs .program-copy .btn,
.programs .program-ui,
.programs .program-list article {
  --program-reveal-y: 0px;
  transform: translateY(var(--program-reveal-y));
}

.program-copy h2 {
  margin: 0;
  color: #101010;
  font-family: Paperlogy;
  font-size: 64px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.16px;
}

.program-copy p {
  margin: 40px 0 0;
  font-family: Pretendard;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500 !important;
  letter-spacing: -0.07px;
}

.program-copy p b {
  color: var(--blue2);
  font-weight: 500 !important;
}

.program-copy .btn {
  margin-top: 30px;
}

.program-copy .btn::after {
  width: 20px;
  height: 20px;
  border: 0;
  background: url("/knda/img/common-icon-arrow-right-mint.png") center / 20px 20px no-repeat;
  transform: none;
}

.program-ui {
  display: flex;
  align-items: center;
  gap: 35px;
  width: 434px;
  height: 66px;
  padding: 6px 0;
}

.arrows {
  display: flex;
  gap: 10px;
}

.arrows button,
.video-ui button {
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--blue2);
  color: #fff;
  font-size: 0;
}

.arrows button::before,
.video-ui button::before {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 20px;
  height: 20px;
  content: "";
  background: url("/knda/img/common-icon-arrow-left-white.svg") center / 20px 20px no-repeat;
}

.arrows button + button::before,
.video-ui button + button::before {
  background-image: url("/knda/img/common-icon-arrow-right-white.svg");
}

.program-ui span,
.video-ui span {
  position: relative;
  display: block;
  width: 229px;
  color: #80cffd;
  font-size: 14px;
  font-weight: 700;
}

.program-ui span {
  --program-progress: 0;
}

.video-ui span {
  --video-progress: 0;
}

.program-page {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 289px;
  padding: 11px 0;
}

.program-pause {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 2px solid #80cffd;
  border-radius: 26px;
  background: #fff;
}

.program-pause::before,
.program-pause::after {
  position: absolute;
  top: 11px;
  width: 3px;
  height: 16px;
  content: "";
  border-radius: 3px;
  background: #80cffd;
}

.program-pause::before {
  left: 13px;
}

.program-pause::after {
  left: 22px;
}

.program-pause.active::before {
  left: 15px;
  top: 11px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #80cffd;
  border-radius: 0;
  background: transparent;
}

.program-pause.active::after {
  display: none;
}

.program-ui span::before,
.program-ui span::after,
.video-ui span::before,
.video-ui span::after {
  position: absolute;
  left: 61px;
  top: 8px;
  width: 168px;
  height: 3px;
  content: "";
}

.program-ui span::before {
  background: rgba(128, 207, 253, 0.2);
}

.video-ui span::before {
  left: 75px;
  background: rgba(128, 207, 253, 0.2);
}

.program-ui span::after {
  background: #80cffd;
  transform: scaleX(var(--program-progress));
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.video-ui span::after {
  left: 75px;
  background: #80cffd;
  transform: scaleX(var(--video-progress));
  transform-origin: left center;
  transition: transform 0.45s ease;
}

.program-ui b,
.video-ui b {
  display: inline-block;
  margin-right: 4px;
  color: var(--blue2);
}

.program-list {
  --program-card-gap: 40px;
  --program-card-cols: 4;
  --program-card-width: calc(
    (100% - (var(--program-card-gap) * (var(--program-card-cols) - 1))) / var(--program-card-cols)
  );
  position: absolute;
  z-index: 1;
  left: calc(50vw - 924px);
  top: 526px;
  width: 1848px;
  height: 625px;
  overflow: hidden;
}

.program-list .swiper-wrapper {
  align-items: flex-start;
}

.program-list .swiper-slide {
  flex: 0 0 var(--program-card-width);
  width: var(--program-card-width);
}

.program-list article {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 432 / 521;
  overflow: hidden;
  border-radius: 70px;
  background: #fff;
  box-shadow: 0 0 60px rgba(211, 242, 249, 0.75);
}

/* �봽濡쒓렇�옩 移대뱶�뒗 �쐞/�븘�옒 吏�洹몄옱洹몃씪 猷⑦봽 紐⑹뾽�룄 吏앹닔 踰덉㎏ 移대뱶瑜� �븘�옒濡� �궡由곕떎. */
.program-card-down {
  margin-top: 104px;
}

.program-list img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1296 / 864;
  object-fit: cover;
}

.program-list small {
  position: absolute;
  left: 37px;
  top: 319px;
  font-family: Pretendard;
  padding: 10px 18px;
  border-radius: 30px;
  background: #1081f9;
  color: #fff;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
}

.program-list small.program-status-ing,
.program-list small[data-status="모집중"] {
  background: #ff6400;
}

.program-list small.program-status-ready,
.program-list small[data-status="준비중"],
.program-list small[data-status="모집예정"] {
  background: #00b700;
}

.program-list small.program-status-soon,
.program-list small[data-status="마감임박"] {
  background: #f23838;
}

.program-list small.program-status-close,
.program-list small[data-status="마감"],
.program-list small[data-status="모집마감"] {
  background: gray;
}

.program-list h3 {
  position: absolute;
  left: 37px;
  top: 375px;
  font-family: Pretendard;
  width: 318px;
  margin: 0;
  overflow: hidden;
  color: #101010;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.07px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-list p {
  position: absolute;
  left: 37px;
  top: 426px;
  font-family: Pretendard;
  width: 357px;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: rgba(16, 16, 16, 0.5);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.05px;
}

/* =========================================================
   partners
========================================================= */

.partners {
  --partner-roll-distance: -5000px;
  position: relative;
  height: 404px;
  overflow: hidden;
  background: #fff;
}

.partners div {
  position: absolute;
  left: 0;
  top: 96px;
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: partner-roll-left 40s linear infinite;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes partner-roll-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(var(--partner-roll-distance), 0, 0);
  }
}

.partners img {
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
  object-fit: contain;
  margin: 15px;
}

/* =========================================================
   benefits
========================================================= */

.benefits {
  position: relative;
  height: 1347px;
  overflow: hidden;
  background: linear-gradient(144.1deg, #0c71fe 18.15%, #96ecd8 83.91%);
}

.benefits::before {
  position: absolute;
  left: -621px;
  top: -691px;
  width: 1997px;
  height: 1103px;
  content: "";
  border-radius: 1997px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(89, 218, 189, 0.4) 0%, rgba(89, 218, 189, 0) 100%);
}

.benefit-word {
  position: absolute;
  margin: 0;
  color: rgba(255, 255, 255, 0.1);
  font-size: 214px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.535px;
  white-space: nowrap;
}

.word-1 {
  left: -36px;
  top: 580px;
}

.word-2 {
  left: -1612px;
  top: 842px;
}

.benefit-scene {
  display: contents;
}

.benefit-copy {
  position: absolute;
  left: var(--gutter);
  top: 278px;
  width: 520px;
}

.benefit-copy h2 {
  margin: 0;
  color: #fff;
  font-family: Paperlogy;
  font-size: 64px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.16px;
  white-space: nowrap;
}

.benefit-copy h2 em {
  background: linear-gradient(151deg, #fff -0.28%, #63e0dd 94.94%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.benefit-copy p {
  margin: 18px 0 42px;
  font-family: Pretendard;
  color: #fff;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.07px;
}

.benefit-cards {
  position: absolute;
  left: calc(var(--gutter) + 499px);
  top: 121px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 31px 21px;
  width: 781px;
  height: 1105px;
}

.benefit-cards article {
  --benefit-y: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 380px;
  height: 459px;
  overflow: hidden;
  border-radius: 50px;
  background: #fff;
  text-align: center;
  transform: translateY(var(--benefit-y));
}

.benefit-cards article:nth-child(3) {
  margin-top: 156px;
}

.benefit-cards img {
  object-fit: cover;
}

.benefit-cards article:nth-child(1) img {
  width: 229px;
  height: 200px;
  margin-top: 56px;
}
.benefit-cards article:nth-child(2) img {
  width: 242px;
  height: 227px;
  margin-top: 57px;
}
.benefit-cards article:nth-child(3) img {
  width: 229px;
  height: 218px;
  margin-top: 57px;
}
.benefit-cards article:nth-child(4) img {
  width: 225px;
  height: 196px;
  margin-top: 71px;
}

.benefit-cards h3 {
  margin: 20px 0 0;
  font-family: Pretendard;
  color: #101010;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.07px;
}

.benefit-cards article:nth-child(n + 2) h3 {
  margin-top: 14px;
}

.benefit-cards p {
  margin: 11px 0 0;
  padding: 0 40px;
  font-family: Pretendard;
  color: rgba(16, 16, 16, 0.5);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.05px;
}

/* =========================================================
   area
========================================================= */

.area-video-bg {
  --area-scale: 1;
  --video-scale: 1;
  --video-section-height: 852px;
  --video-fade-top: 583px;
  --video-fade-width: 2408px;
  --video-fade-height: 754px;
  overflow: hidden;
  background: linear-gradient(180deg, #e4f9ff 0%, #fff 100%);
}

.wide {
  position: relative;
  height: 1077px;
  overflow: visible;
  background: transparent;
}

.wide-deco-left {
  position: absolute;
  z-index: 0;
  left: -276px;
  top: 948px;
  width: 687px;
  height: 458px;
  background: url("/knda/img/main/main-sec1-deco-left.png") center / cover no-repeat;
  filter: blur(20px);
  pointer-events: none;
  will-change: transform;
}

.wide-ellipse-left {
  position: absolute;
  z-index: 0;
  left: -1075px;
  top: 1024px;
  width: 1809px;
  height: 1809px;
  background: url("/knda/img/main/main-sec1-bg-ellipse-left.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.wide-ellipse-right {
  position: absolute;
  z-index: 0;
  left: 734px;
  top: 1012px;
  width: 1822px;
  height: 1821px;
  background: url("/knda/img/main/main-sec1-bg-ellipse-right.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.video-section::before {
  position: absolute;
  z-index: 1;
  left: -242px;
  top: 583px;
  width: 2408px;
  height: 754px;
  content: "";
  background: url("/knda/img/main/main-sec1-bottom-fade.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.area {
  position: relative;
  z-index: 1;
  height: 1177px;
}

.area-scene {
  position: relative;
  height: 100%;
}

.area-copy {
  position: absolute;
  left: var(--gutter);
  top: 267px;
  width: 697px;
}

.area-copy h2 {
  margin: 0;
  font-family: Paperlogy;
  font-size: 64px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.16px;
}

.area-copy p {
  margin: 41px 0 0;
  font-family: Pretendard;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.07px;
}

.stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 77px;
  width: 480px;
  height: 219px;
  margin-top: 107px;
  padding: 62px 39px;
  border-radius: 70px;
  background: rgba(255, 255, 255, 0.8);
}

.stats div {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 148px;
  text-align: center;
}

.stats div + div::before {
  position: absolute;
  left: -38px;
  top: -21px;
  width: 1px;
  height: 138px;
  content: "";
  background: rgba(42, 141, 255, 0.2);
}

.stats span {
  color: #278afd;
  font-family: Pretendard;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

.stats b {
  margin-top: 12px;
  font-family: Paperlogy;
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.6px;
  color: transparent;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
}

.map {
  position: absolute;
  left: calc(var(--gutter) + 733px);
  top: 35px;
  width: 752px;
  height: 1108px;
}

.map > img {
  width: 752px;
  height: 1108px;
  object-fit: cover;
}

.region {
  --region-y: 0px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 14px 18px;
  border-radius: 30px;
  background: linear-gradient(90deg, #71ebf2, #99ecd9);
  color: #fff;
  text-align: center;
  transform: translateY(var(--region-y));
  white-space: nowrap;
}

.region::after {
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 0;
  height: 0;
  content: "";
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 26px solid #86efd7;
  transform: translateX(-50%);
}

.region::before {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  width: 95px;
  height: 95px;
  content: "";
  background: url("/knda/img/main/main-sec1-pin.png") center / cover no-repeat;
  transform: translateX(-50%);
}

.region b {
  font-family: Pretendard;
  font-size: 28px;
  line-height: 1.37;
  font-weight: 700;
}

.region span {
  font-family: Pretendard;
  font-size: 20px;
  line-height: 1.37;
  font-weight: 700;
}

.r1 {
  left: 395px;
  top: 117px;
}
.r2 {
  left: 221px;
  top: 222px;
}
.r3 {
  left: 412px;
  top: 364px;
}
.r4 {
  left: 166px;
  top: 507px;
}
.r5 {
  left: 160px;
  top: 773px;
}

/* =========================================================
   video
========================================================= */

.video-section {
  position: relative;
  height: 852px;
  overflow: visible;
  background: transparent;
}

.video {
  position: absolute;
  left: calc(var(--gutter) - 1px);
  top: 160px;
  z-index: 2;
  width: 1278px;
  height: 403px;
}

.video-swiper {
  width: 1278px;
  height: 403px;
  overflow: visible;
}

.video-slide {
  position: relative;
  width: 1278px;
  height: 403px;
  overflow: visible;
}

.video-thumb {
  --video-y: 0px;
  position: relative;
  width: 618px;
  height: 397px;
  overflow: hidden;
  border-radius: 20px;
  background: #f0f0f0;
  transform: translateY(var(--video-y));
}

.video-thumb img {
  position: absolute;
  left: -86px;
  top: 0;
  width: 712px;
  height: 403px;
  object-fit: cover;
}

.video-thumb::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 626px;
  height: 403px;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

.video-thumb button {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 91px;
  height: 91px;
  border: 0;
  border-radius: 50%;
  background: url("/knda/img/main/main-sec3-play-circle.svg") center / 100% 100% no-repeat;
  transform: translate(-50%, -50%);
}

.video-thumb button::after {
  position: absolute;
  left: 32px;
  top: 28px;
  width: 35px;
  height: 32px;
  content: "";
  border: 0;
  background: url("/knda/img/main/main-sec3-play-icon.svg") center / 100% 100% no-repeat;
  transform: rotate(90deg);
}

.video-copy {
  position: absolute;
  left: 656px;
  top: 0;
  z-index: 2;
  width: 622px;
  height: 167px;
}

.video-copy h2,
.sns h2 {
  margin: 0;
  color: #101010;
  font-family: Paperlogy;
  font-size: 64px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.16px;
}

.video-copy h2 {
  --video-y: 0px;
  transform: translateY(var(--video-y));
}

.video-desc {
  --video-y: 0px;
  position: absolute;
  left: 656px;
  top: 227px;
  font-family: Pretendard;
  width: 622px;
  height: 88px;
  margin: 0;
  overflow: hidden;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.07px;
  transform: translateY(var(--video-y));
}

.video-ui {
  --video-y: 0px;
  position: absolute;
  left: 656px;
  top: 331px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 622px;
  height: 72px;
  transform: translateY(var(--video-y));
}

.video-ui span {
  margin-right: auto;
  width: 243px;
}

.video-ui button {
  position: relative;
  margin-left: 10px;
  font-size: 0;
}

.video-ui button::before {
  left: 50%;
  top: 50%;
  width: 21px;
  height: 21px;
  background-size: 21px 21px;
  transform: translate(-50%, -50%);
}

/* =========================================================
   sns
========================================================= */

.sns {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1178px;
  margin-top: 0;
  padding-top: 80px;
  overflow: visible;
  background: #fff;
}

.sns-bg {
  position: absolute;
  z-index: 0;
  background: url("/knda/img/main/main-sec1-deco-left.png") center / contain no-repeat;
  filter: blur(20px);
  opacity: 0.9;
  pointer-events: none;
  will-change: transform;
}

.sns-bg-left {
  left: -241px;
  top: 943px;
  width: 588px;
  height: 392px;
}

.sns-bg-right {
  right: -360px;
  top: 285px;
  width: 927px;
  height: 618px;
  transform: scaleX(-1);
  transform-origin: center;
}

.sns h2 {
  --sns-y: 0px;
  position: relative;
  z-index: 1;
  width: 622px;
  text-align: center;
  transform: translateY(var(--sns-y));
}

.sns-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 130px 120px;
  width: 720px;
  margin-top: 126px;
}

.sns-list img {
  --sns-y: 0px;
  width: 160px;
  height: 155px;
  object-fit: cover;
  transform: translateY(var(--sns-y));
}

.sns-item {
  display: block;
  flex: 0 0 auto;
}

.sns-empty {
  position: relative;
  z-index: 1;
  margin: 40px 0 0;
  color: rgba(16, 16, 16, 0.5);
  font-family: Pretendard;
  font-size: 18px;
  line-height: 1.5;
}

/* =========================================================
   quick links
========================================================= */

.quick {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-content: flex-start;
  width: var(--inner);
  min-height: 783px;
  margin: 0 auto;
  padding: 120px 0 159px;
  background: #fff;
}

.quick a {
  --quick-y: 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc((100% - 16px) / 2);
  height: 245px;
  padding: 66px 46px;
  overflow: hidden;
  border: 2px solid #e2eeff;
  border-radius: 20px;
  background: #fff;
  transform: translateY(var(--quick-y));
}

.quick span {
  color: rgba(16, 16, 16, 0.5);
  font-family: Pretendard;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.045px;
}

.quick b {
  margin-top: 6px;
  color: #101010;
  font-family: Pretendard;
  font-size: 42px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.105px;
}

.quick em {
  position: absolute;
  right: 46px;
  bottom: 66px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 66px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--mint));
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}

@media (min-width: 1025px) and (max-width: 1919px) {
  .program-head {
    gap: clamp(115px, 11.25vw, 216px);
    width: clamp(668px, 66.563vw, 1278px);
  }

  .program-copy-swiper,
  .program-copy {
    flex-basis: clamp(335px, 32.708vw, 628px);
    width: clamp(335px, 32.708vw, 628px);
    height: clamp(200px, 19.479vw, 374px);
  }

  .program-copy h2 {
    font-size: clamp(34px, 3.333vw, 64px);
  }

  .program-copy p {
    margin-top: clamp(21px, 2.083vw, 40px);
    font-size: clamp(15px, 1.458vw, 28px);
  }

  .program-copy .btn {
    gap: clamp(4px, 0.417vw, 8px);
    height: clamp(35px, 3.438vw, 66px);
    margin-top: clamp(16px, 1.563vw, 30px);
    padding: 0 clamp(15px, 1.458vw, 28px);
    font-size: clamp(10px, 0.938vw, 18px);
    letter-spacing: clamp(-0.36px, -0.019vw, -0.19px);
  }

  .program-copy .btn::after {
    width: clamp(11px, 1.042vw, 20px);
    height: clamp(11px, 1.042vw, 20px);
    background-size: clamp(11px, 1.042vw, 20px) clamp(11px, 1.042vw, 20px);
  }

  .program-ui {
    gap: clamp(19px, 1.823vw, 35px);
    width: clamp(232px, 22.604vw, 434px);
    height: clamp(35px, 3.438vw, 66px);
    padding: clamp(3px, 0.313vw, 6px) 0;
  }

  .arrows {
    gap: clamp(5px, 0.521vw, 10px);
  }

  .arrows button {
    width: clamp(27px, 2.604vw, 50px);
    height: clamp(27px, 2.604vw, 50px);
  }

  .arrows button::before {
    left: clamp(8px, 0.781vw, 15px);
    top: clamp(8px, 0.781vw, 15px);
    width: clamp(11px, 1.042vw, 20px);
    height: clamp(11px, 1.042vw, 20px);
    background-size: clamp(11px, 1.042vw, 20px) clamp(11px, 1.042vw, 20px);
  }

  .program-page {
    gap: clamp(10px, 0.938vw, 18px);
    width: clamp(154px, 15.052vw, 289px);
    padding: clamp(6px, 0.573vw, 11px) 0;
  }

  .program-ui span {
    width: clamp(122px, 11.927vw, 229px);
    font-size: clamp(8px, 0.729vw, 14px);
  }

  .program-ui span::before,
  .program-ui span::after {
    left: clamp(33px, 3.177vw, 61px);
    top: clamp(4px, 0.417vw, 8px);
    width: clamp(90px, 8.75vw, 168px);
    height: clamp(2px, 0.156vw, 3px);
  }

  .program-pause {
    width: clamp(22px, 2.188vw, 42px);
    height: clamp(22px, 2.188vw, 42px);
    border-width: clamp(1px, 0.104vw, 2px);
  }

  .program-pause::before,
  .program-pause::after {
    top: clamp(6px, 0.573vw, 11px);
    width: clamp(2px, 0.156vw, 3px);
    height: clamp(9px, 0.833vw, 16px);
  }

  .program-pause::before {
    left: clamp(7px, 0.677vw, 13px);
  }

  .program-pause::after {
    left: clamp(12px, 1.146vw, 22px);
  }

  .program-list {
    --program-card-gap: clamp(21px, 2.083vw, 40px);
    left: 50%;
    width: clamp(986px, 96.25vw, 1848px);
    height: clamp(334px, 32.552vw, 625px);
    transform: translateX(-50%);
  }

  .program-list article {
    border-radius: clamp(37px, 3.646vw, 70px);
  }

  .program-card-down {
    margin-top: clamp(56px, 5.417vw, 104px);
  }

  .program-list small {
    left: clamp(20px, 1.927vw, 37px);
    top: clamp(170px, 16.615vw, 319px);
    padding: clamp(5px, 0.521vw, 10px) clamp(10px, 0.938vw, 18px);
    font-size: clamp(11px, 1.042vw, 20px);
  }

  .program-list h3 {
    left: clamp(20px, 1.927vw, 37px);
    top: clamp(200px, 19.531vw, 375px);
    width: clamp(170px, 16.563vw, 318px);
    font-size: clamp(15px, 1.458vw, 28px);
  }

  .program-list p {
    left: clamp(20px, 1.927vw, 37px);
    top: clamp(227px, 22.188vw, 426px);
    width: clamp(191px, 18.594vw, 357px);
    font-size: clamp(11px, 1.042vw, 20px);
  }
}

/* wide PC(1440px+) 레이아웃 유지, 그 이하에서는 카드 2열 스택 */
@media (max-width: 1439px) and (min-width: 1025px) {
  .benefits {
    height: auto;
    min-height: 1240px;
    padding: 90px var(--gutter);
  }

  .benefits::before {
    left: -720px;
    top: -720px;
  }

  .benefit-word {
    font-size: 120px;
  }

  .word-1 {
    left: -70px;
    top: 660px;
  }

  .word-2 {
    left: -760px;
    top: 800px;
  }

  .benefit-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 640px;
  }

  .benefit-copy h2 {
    font-size: 52px;
    white-space: normal;
  }

  .benefit-copy p {
    margin: 18px 0 32px;
    font-size: 22px;
  }

  .benefit-cards {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin-top: 48px;
  }

  .benefit-cards article {
    width: calc((100% - 20px) / 2);
    height: 360px;
    border-radius: 36px;
  }

  .benefit-cards article:nth-child(3) {
    margin-top: 0;
  }

  .benefit-cards article:nth-child(1) img,
  .benefit-cards article:nth-child(2) img,
  .benefit-cards article:nth-child(3) img,
  .benefit-cards article:nth-child(4) img {
    width: 150px;
    height: 150px;
    margin-top: 40px;
  }

  .benefit-cards h3,
  .benefit-cards article:nth-child(n + 2) h3 {
    margin-top: 20px;
    font-size: 24px;
  }

  .benefit-cards p {
    padding: 0 18px;
    font-size: 16px;
  }
}

@media (min-width: 1025px) and (max-width: 1919px) {
  .benefits {
    --benefit-inner: clamp(683px, 66.667vw, 1280px);
    height: clamp(719px, 70.156vw, 1347px);
    min-height: 0;
    padding: 0;
  }

  .benefits::before {
    left: clamp(-621px, -32.344vw, -331px);
    top: clamp(-691px, -35.99vw, -369px);
    width: clamp(1066px, 104.01vw, 1997px);
    height: clamp(589px, 57.448vw, 1103px);
  }

  .benefit-word {
    font-size: clamp(114px, 11.146vw, 214px);
  }

  .word-1 {
    left: clamp(-36px, -1.875vw, -19px);
    top: clamp(310px, 30.208vw, 580px);
  }

  .word-2 {
    left: clamp(-1612px, -83.958vw, -861px);
    top: clamp(450px, 43.854vw, 842px);
  }

  .benefit-copy {
    position: absolute;
    left: calc((100% - var(--benefit-inner)) / 2);
    top: clamp(148px, 14.479vw, 278px);
    width: clamp(278px, 27.083vw, 520px);
    max-width: none;
  }

  .benefit-copy h2 {
    font-size: clamp(34px, 3.333vw, 64px);
    white-space: nowrap;
  }

  .benefit-copy p {
    margin: clamp(10px, 0.938vw, 18px) 0 clamp(22px, 2.188vw, 42px);
    font-size: clamp(15px, 1.458vw, 28px);
  }

  .benefit-cards {
    --benefit-card-width: clamp(203px, 19.792vw, 380px);
    --benefit-card-height: clamp(245px, 23.906vw, 459px);
    --benefit-card-gap-x: clamp(11px, 1.094vw, 21px);
    --benefit-card-gap-y: clamp(17px, 1.615vw, 31px);
    --benefit-card-stagger: clamp(83px, 8.125vw, 156px);
    position: absolute;
    left: calc(((100% - var(--benefit-inner)) / 2) + clamp(266px, 25.99vw, 499px));
    top: clamp(65px, 6.302vw, 121px);
    display: block;
    width: calc(var(--benefit-card-width) + var(--benefit-card-width) + var(--benefit-card-gap-x));
    max-width: none;
    height: calc(
      var(--benefit-card-height) + var(--benefit-card-height) + var(--benefit-card-gap-y) + var(--benefit-card-stagger)
    );
    margin: 0;
  }

  .benefit-cards article {
    position: absolute;
    width: var(--benefit-card-width);
    height: var(--benefit-card-height);
    border-radius: clamp(27px, 2.604vw, 50px);
  }

  .benefit-cards article:nth-child(1) {
    left: 0;
    top: 0;
  }

  .benefit-cards article:nth-child(2) {
    left: 0;
    top: calc(var(--benefit-card-height) + var(--benefit-card-gap-y));
  }

  .benefit-cards article:nth-child(3) {
    left: calc(var(--benefit-card-width) + var(--benefit-card-gap-x));
    top: var(--benefit-card-stagger);
    margin-top: 0;
  }

  .benefit-cards article:nth-child(4) {
    left: calc(var(--benefit-card-width) + var(--benefit-card-gap-x));
    top: calc(var(--benefit-card-stagger) + var(--benefit-card-height) + var(--benefit-card-gap-y));
  }

  .benefit-cards article:nth-child(1) img {
    width: clamp(122px, 11.927vw, 229px);
    height: clamp(107px, 10.417vw, 200px);
    margin-top: clamp(30px, 2.917vw, 56px);
  }

  .benefit-cards article:nth-child(2) img {
    width: clamp(129px, 12.604vw, 242px);
    height: clamp(121px, 11.823vw, 227px);
    margin-top: clamp(38px, 3.698vw, 71px);
  }

  .benefit-cards article:nth-child(3) img {
    width: clamp(122px, 11.927vw, 229px);
    height: clamp(116px, 11.354vw, 218px);
    margin-top: clamp(30px, 2.969vw, 57px);
  }

  .benefit-cards article:nth-child(4) img {
    width: clamp(120px, 11.719vw, 225px);
    height: clamp(105px, 10.208vw, 196px);
    margin-top: clamp(38px, 3.698vw, 71px);
  }

  .benefit-cards h3,
  .benefit-cards article:nth-child(n + 2) h3 {
    margin-top: clamp(11px, 1.042vw, 20px);
    font-size: clamp(15px, 1.458vw, 28px);
  }

  .benefit-cards p {
    margin-top: clamp(6px, 0.573vw, 11px);
    padding: 0 clamp(10px, 0.938vw, 18px);
    font-size: clamp(11px, 1.042vw, 20px);
  }
}

@media (min-width: 768px) and (max-width: 1919px) {
  .wide {
    height: clamp(575px, 56.094vw, 1077px);
  }

  .area {
    height: clamp(628px, 61.302vw, 1177px);
  }

  .area-scene {
    position: absolute;
    left: calc(50% - 960px);
    top: 0;
    width: 1920px;
    height: 1177px;
    transform: scale(var(--area-scale));
    transform-origin: top center;
  }

  .area-copy {
    left: 320px;
    top: 267px;
    width: 697px;
  }

  .map {
    left: 1053px;
    top: 35px;
    width: 752px;
    height: 1108px;
    transform: none;
  }

  .video-section {
    height: clamp(455px, 44.375vw, 852px);
  }

  .video-section::before {
    left: clamp(-242px, -12.604vw, -97px);
    top: clamp(233px, 30.365vw, 583px);
    width: clamp(963px, 125.417vw, 2408px);
    height: clamp(302px, 39.271vw, 754px);
  }

  .video {
    left: 50%;
    top: 160px;
    transform: translateX(-50%) scale(var(--area-scale));
    transform-origin: top center;
  }
}

@media (min-width: 1025px) and (max-width: 1919px) {
  .video-section {
    height: var(--video-section-height);
  }

  .video-section::before {
    left: 50%;
    top: var(--video-fade-top);
    width: var(--video-fade-width);
    height: var(--video-fade-height);
    transform: translateX(-50%);
  }

  .video {
    left: 50%;
    top: 160px;
    transform: translateX(-50%) scale(var(--video-scale));
    transform-origin: top center;
  }
}

@media (min-width: 1025px) and (max-width: 1439px) {
  .hero {
    height: 780px;
  }

  .ghost {
    font-size: 170px;
    letter-spacing: -6.8px;
  }

  .ghost-1 {
    left: calc(var(--gutter) - 180px);
    top: 230px;
  }

  .ghost-2 {
    left: calc(50% - 20px);
    top: 390px;
  }

  .hero-obj {
    left: calc(var(--gutter) + clamp(20px, 5vw, 64px));
    top: 270px;
    width: clamp(390px, 35vw, 470px);
    height: auto;
    aspect-ratio: 706 / 761;
  }

  .hero-copy {
    left: calc(50% - 10px);
    top: 238px;
    width: min(440px, calc(50% - 70px));
    text-align: left;
    transform: none;
  }

  .hero-copy p {
    margin-bottom: 16px;
    font-size: clamp(28px, 2.8vw, 34px);
    line-height: 1.4;
  }

  .hero-copy h1 {
    margin-bottom: 30px;
    font-size: clamp(52px, 5vw, 60px);
  }

  .hero-copy span {
    margin-bottom: 0;
    font-size: 16px;
    white-space: normal;
  }

  .hero-links {
    flex-direction: row;
    gap: 12px;
    margin-top: 34px;
  }

  .categories {
    --cat-width: 100px;
    --cat-height: 135px;
    --cat-gap: 8px;
    --cat-font: 14px;
    --cat-icon-width: 100px;
    --cat-icon-height: 100px;
    --cat-icon-padding: 20px;
    --cat-icon-border: 2px;
    --cat-icon-radius: 100px;
    --category-arrow-size: 50px;
    --category-arrow-gap: 28px;
    width: calc(100% - 40px);
    height: var(--cat-height);
  }

  .category-swiper {
    width: 860px;
  }

  .cat.active img {
    border-color: transparent;
    background:
      linear-gradient(#2a8dff, #2a8dff) padding-box,
      linear-gradient(90deg, #1081f9, #21ffe5) border-box;
  }

  .intro-cards {
    --intro-card-gap: clamp(16px, 1.45vw, 21px);
    --intro-card-width: calc((100% - (var(--intro-card-gap) * 2)) / 3);
    --intro-card-height: auto;
    --intro-card-padding: 0 clamp(28px, 2.75vw, 36px) clamp(42px, 4vw, 52px);
    --intro-card-radius: clamp(38px, 3.55vw, 46px);
    --intro-title-gap: clamp(20px, 2.1vw, 26px);
    --intro-title-font: clamp(28px, 2.55vw, 32px);
    --intro-text-font: clamp(18px, 1.7vw, 21px);
    --intro-img1-left: 23.25%;
    --intro-img1-top: clamp(-62px, -5vw, -54px);
    --intro-img1-width: min(278px, 81.122%);
    --intro-img2-left: 16%;
    --intro-img2-top: clamp(-92px, -7.4vw, -78px);
    --intro-img2-width: min(306px, 89.286%);
    --intro-img3-left: 17.25%;
    --intro-img3-top: clamp(-106px, -8.5vw, -90px);
    --intro-img3-width: min(318px, 93.112%);
    left: 50%;
    width: min(1120px, calc(100% - 80px));
    transform: translateX(-50%);
  }

  .intro-cards article {
    width: var(--intro-card-width);
    height: var(--intro-card-height);
    aspect-ratio: 400 / 502;
    padding: var(--intro-card-padding);
    border-radius: var(--intro-card-radius);
  }

  .intro-cards article:nth-child(2) {
    --intro-base-transform: translateX(clamp(-36px, -2.9vw, -30px)) rotate(4.85deg);
  }

  .intro-cards article:nth-child(3) {
    --intro-base-transform: translateX(clamp(-52px, -4.2vw, -44px)) rotate(-5.48deg);
  }
}

@media (max-width: 1024px) {
  .hero {
    height: 754px;
  }

  .ghost {
    font-family: "IBM Plex Sans";
    font-size: 120px;
    line-height: 1;
    letter-spacing: -4.8px;
  }

  .ghost-1 {
    left: calc(50% - 369px);
    top: 352px;
  }

  .ghost-2 {
    left: calc(50% - 77px);
    top: 472px;
  }

  .hero-obj {
    left: calc(50% - 295px);
    top: 358px;
    width: 345px;
    height: 372px;
  }

  .hero-copy {
    left: 50%;
    top: 142px;
    text-align: center;
    transform: translateX(-50%);
  }

  .hero-copy p {
    margin: 0 0 12px;
    font-size: 28px;
    line-height: 1.37;
    font-weight: 700;
    letter-spacing: -0.56px;
  }

  .hero-copy h1 {
    margin: 0 0 20px;
    font-size: 42px;
    letter-spacing: -1.05px;
    white-space: nowrap;
  }

  .hero-copy span {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.28px;
    white-space: nowrap;
  }

  .hero-links {
    position: absolute;
    left: 50%;
    top: 350px;
    flex-direction: column;
    gap: 8px;
    width: 159px;
    transform: translateX(-50%);
  }

  .hero-links .btn {
    width: 100%;
  }

  .category-sec {
    height: auto;
    padding: 72px 20px 80px;
  }

  .category-sec h2 {
    width: 100%;
    font-size: 28px;
    line-height: 1.3;
    text-align: center;
    word-break: keep-all;
  }

  .search {
    --search-width: clamp(350px, 55.104vw, 1058px);
    --search-height: clamp(45px, 4.375vw, 84px);
    --search-font: clamp(14px, 1.146vw, 22px);
    --region-width: clamp(47px, 12.188vw, 234px);
    --region-toggle-padding-left: 24px;
    --region-chevron-left: 58px;
    --region-chevron-top: 17px;
    --region-menu-left: 6px;
    --region-menu-width: 96px;
    --region-menu-item-height: 42px;
    --region-menu-radius: 14px;
    --region-menu-padding: 0 16px;
    --search-submit-size: clamp(29px, 3.021vw, 58px);
    --search-submit-margin-right: 10px;
    --search-icon-size: 20px;
    --search-icon-inset: 7px;
    width: var(--search-width);
    height: var(--search-height);
    margin-top: 32px;
  }

  .region-menu button {
    letter-spacing: -0.32px;
  }

  .categories {
    --cat-width: 100px;
    --cat-height: 135px;
    --cat-gap: 8px;
    --cat-font: 14px;
    --cat-icon-width: 100px;
    --cat-icon-height: 100px;
    --cat-icon-padding: 20px;
    --cat-icon-border: 2px;
    --cat-icon-radius: 100px;
    --category-arrow-size: 50px;
    --category-arrow-gap: 28px;
    width: 100%;
    height: var(--cat-height);
    margin-top: 36px;
  }

  .category-swiper {
    width: 820px;
  }

  .cat {
    line-height: 1;
  }

  .cat span {
    font-size: var(--cat-font);
  }

  .cat.active img {
    border-color: transparent;
    background:
      linear-gradient(#2a8dff, #2a8dff) padding-box,
      linear-gradient(90deg, #1081f9, #21ffe5) border-box;
  }

  .intro {
    height: 1320px;
  }

  .intro::before {
    top: 80px;
    width: 780px;
    height: 588px;
  }

  .intro-left {
    left: -210px;
    top: -80px;
    width: 320px;
    height: 320px;
  }

  .intro-right {
    right: -190px;
    top: 90px;
    width: 300px;
    height: 300px;
  }

  .intro-head {
    width: 340px;
    margin: 90px auto 0;
  }

  .intro-head small {
    height: 42px;
    padding: 0 15px;
    font-size: 15px;
  }

  .intro-head small::after {
    top: 38px;
  }

  .intro-head h2 {
    margin-top: 34px;
    font-size: 42px;
  }

  .intro-head p {
    margin-top: 22px;
    font-size: 18px;
  }

  .intro-cards {
    --intro-card-gap: 34px;
    --intro-card-width: min(310px, 100%);
    --intro-card-height: auto;
    --intro-card-padding: 0 30px 44px;
    --intro-card-radius: 34px;
    --intro-title-gap: 18px;
    --intro-title-font: 24px;
    --intro-text-font: 16px;
    --intro-img1-left: 49px;
    --intro-img1-top: -52px;
    --intro-img1-width: 70.968%;
    --intro-img2-left: 38px;
    --intro-img2-top: -76px;
    --intro-img2-width: 70.968%;
    --intro-img3-left: 34px;
    --intro-img3-top: -82px;
    --intro-img3-width: 70.968%;
    left: 50%;
    top: 438px;
    flex-direction: column;
    align-items: center;
    gap: var(--intro-card-gap);
    width: calc(100% - 40px);
    transform: translateX(-50%);
  }

  .intro-cards article {
    width: var(--intro-card-width);
    height: var(--intro-card-height);
    aspect-ratio: 310 / 372;
    padding: var(--intro-card-padding);
    border-radius: var(--intro-card-radius);
  }

  .intro-cards article:nth-child(1) img,
  .intro-cards article:nth-child(2) img,
  .intro-cards article:nth-child(3) img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .programs {
    height: 980px;
  }

  .programs::before {
    left: -470px;
    top: -250px;
    width: 850px;
    height: 850px;
  }

  .program-head {
    left: 20px;
    top: 70px;
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
    width: calc(100% - 40px);
  }

  .program-copy-swiper,
  .program-copy {
    width: 100%;
    height: auto;
    flex-basis: auto;
  }

  .program-copy h2 {
    font-size: 34px;
  }

  .program-copy p {
    margin-top: 24px;
    font-size: 18px;
  }

  .program-copy .btn {
    margin-top: 24px;
  }

  .program-ui {
    width: 100%;
  }

  .program-list {
    --program-card-gap: 40px;
    --program-card-width: min(300px, calc((100% - (var(--program-card-gap) * 2)) / 3));
    left: 20px;
    top: 430px;
    width: calc(100% - 40px);
    height: 470px;
  }

  .program-list .swiper-slide,
  .program-list article {
    width: var(--program-card-width);
    flex-basis: var(--program-card-width);
  }

  .program-list article {
    height: auto;
    aspect-ratio: 300 / 390;
    border-radius: 42px;
  }

  .program-card-down {
    margin-top: 64px;
  }

  .program-list img {
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 864;
  }

  .program-list h3 {
    font-size: 22px;
  }

  .program-list p {
    font-size: 15px;
  }

  .partners {
    --partner-roll-distance: -3400px;
    height: 145px;
  }

  .partners div {
    top: 0;
    height: 145px;
  }

  .partners img {
    width: 170px;
    height: 145px;
  }

  .benefits {
    height: auto;
    min-height: 1240px;
    padding: 90px 20px;
  }

  .benefits::before {
    left: -720px;
    top: -720px;
  }

  .benefit-word {
    font-size: 86px;
  }

  .word-1 {
    left: -70px;
    top: 660px;
  }

  .word-2 {
    left: -760px;
    top: 800px;
  }

  .benefit-word {
    transform: scale(var(--benefit-word-scale, 1));
    transform-origin: left top;
  }

  .word-1 {
    left: var(--benefit-word1-left, -70px);
    top: var(--benefit-word1-top, 660px);
  }

  .word-2 {
    left: var(--benefit-word2-left, -760px);
    top: var(--benefit-word2-top, 800px);
  }

  .benefit-copy {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
  }

  .benefit-copy h2 {
    font-size: 42px;
  }

  .benefit-copy p {
    margin: 18px 0 28px;
    font-size: 18px;
  }

  .benefit-cards {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: row;
    gap: 14px;
    width: 100%;
    height: auto;
    margin-top: 54px;
  }

  .benefit-cards article {
    width: calc((100% - 14px) / 2);
    height: 330px;
    border-radius: 28px;
  }

  .benefit-cards article:nth-child(3) {
    margin-top: 0;
  }

  .benefit-cards article:nth-child(1) img,
  .benefit-cards article:nth-child(2) img,
  .benefit-cards article:nth-child(3) img,
  .benefit-cards article:nth-child(4) img {
    width: 130px;
    height: 130px;
    margin-top: 32px;
  }

  .benefit-cards h3,
  .benefit-cards article:nth-child(n + 2) h3 {
    margin-top: 18px;
    font-size: 21px;
  }

  .benefit-cards p {
    padding: 0 14px;
    font-size: 14px;
  }

  .wide {
    height: 900px;
    min-height: 0;
  }

  .wide-deco-left,
  .wide-ellipse-left,
  .wide-ellipse-right,
  .video-section::before {
    opacity: 0.8;
  }

  .area {
    height: 900px;
  }

  .area-copy {
    left: 20px;
    top: 90px;
    width: calc(100% - 40px);
  }

  .area-copy h2 {
    font-size: 38px;
  }

  .area-copy p {
    margin-top: 24px;
    font-size: 18px;
  }

  .stats {
    gap: 0;
    justify-content: center;
    width: 100%;
    height: 130px;
    margin-top: 42px;
    padding: 36px 20px;
  }

  .stats div {
    width: 50%;
    justify-content: center;
  }

  .stats div + div::before {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60px;
  }

  .stats span {
    font-size: 13px;
  }

  .stats b {
    margin-top: 8px;
    font-size: 38px;
  }

  .map {
    left: 50%;
    top: 430px;
    width: 330px;
    height: 487px;
    transform: translateX(-50%);
  }

  .map > img {
    width: 330px;
    height: 487px;
  }

  .region {
    padding: 8px 12px;
    border-radius: 18px;
  }

  .region b {
    font-size: 16px;
  }

  .region span {
    font-size: 12px;
  }

  .region::before {
    width: 48px;
    height: 48px;
  }

  .r1 {
    left: 174px;
    top: 52px;
  }
  .r2 {
    left: 97px;
    top: 98px;
  }
  .r3 {
    left: 181px;
    top: 160px;
  }
  .r4 {
    left: 73px;
    top: 223px;
  }
  .r5 {
    left: 70px;
    top: 340px;
  }

  .video {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - 40px);
    height: 720px;
    margin: 0 auto;
    transform: none;
  }

  .video-swiper,
  .video-slide {
    width: 100%;
    height: 620px;
  }

  .video-thumb {
    width: 100%;
    aspect-ratio: 626 / 403;
    height: auto;
  }

  .video-thumb img {
    left: calc(50% - 104px);
    width: 600px;
    height: 100%;
  }

  .video-thumb::after {
    width: 100%;
    height: 100%;
  }

  .video-thumb button {
    z-index: 4;
  }

  .video-copy {
    left: calc(50% - 104px);
    top: 276px;
    width: 600px;
    height: auto;
  }

  .video-copy h2,
  .sns h2 {
    font-size: 38px;
  }

  .video-desc {
    left: 0;
    top: 400px;
    width: 100%;
    height: auto;
    font-size: 18px;
  }

  .video-ui {
    left: 0;
    top: 520px;
    width: 100%;
  }

  .sns {
    height: auto;
    min-height: 900px;
    margin-top: 0;
    padding: 84px 20px 110px;
  }

  .sns-bg-left {
    left: -250px;
    top: 640px;
    width: 500px;
    height: 333px;
  }

  .sns-bg-right {
    right: -420px;
    top: 220px;
    width: 720px;
    height: 480px;
  }

  .sns h2 {
    width: 100%;
  }

  .sns-list {
    gap: 46px 40px;
    justify-content: center;
    width: 100%;
    margin-top: 70px;
  }

  .sns-list img {
    width: 86px;
    height: 84px;
  }

  .quick {
    gap: 14px;
    width: calc(100% - 40px);
    min-height: auto;
    padding: 70px 0;
  }

  .quick a {
    width: 100%;
    height: 180px;
    padding: 42px 28px;
  }

  .quick b {
    font-size: 32px;
  }

  .quick em {
    right: 28px;
    bottom: 42px;
    height: 52px;
    padding: 0 20px;
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero {
    height: 720px;
  }

  .ghost {
    font-size: 150px;
    letter-spacing: -6px;
  }

  .ghost-1 {
    left: calc(var(--gutter) - 160px);
    top: 210px;
  }

  .ghost-2 {
    left: calc(50% - 36px);
    top: 362px;
  }

  .hero-obj {
    left: calc(var(--gutter) + clamp(16px, 5vw, 60px));
    top: 258px;
    width: clamp(310px, 39vw, 400px);
    height: auto;
    aspect-ratio: 706 / 761;
  }

  .hero-copy {
    left: calc(50% - 10px);
    top: 220px;
    width: min(420px, calc(50% - 40px));
    text-align: left;
    transform: none;
  }

  .hero-copy p {
    margin-bottom: 14px;
    font-size: clamp(24px, 3vw, 28px);
    line-height: 1.4;
  }

  .hero-copy h1 {
    margin-bottom: 24px;
    font-size: clamp(42px, 5vw, 52px);
  }

  .hero-copy span {
    font-size: 15px;
    white-space: normal;
  }

  .hero-links {
    position: static;
    flex-direction: row;
    gap: 10px;
    width: auto;
    margin-top: 28px;
    transform: none;
  }

  .hero-links .btn {
    width: auto;
  }

  .category-sec {
    height: 370px;
    padding: 50px 20px 0;
  }

  .search {
    margin-top: 40px;
  }

  .categories {
    height: var(--cat-height);
    margin-top: 28px;
  }

  .category-swiper {
    width: 680px;
    height: var(--cat-height);
  }

  .intro {
    height: 720px;
  }

  .intro::before {
    top: 116px;
    width: 900px;
    height: 680px;
  }

  .intro-head {
    width: 340px;
    margin: 70px auto 0;
  }

  .intro-cards {
    --intro-card-gap: clamp(16px, 1.758vw, 18px);
    --intro-card-width: clamp(208px, calc(37.5vw - 80px), 304px);
    --intro-card-height: auto;
    --intro-card-padding: 0 clamp(21px, calc(4.297vw - 12px), 32px) clamp(22px, calc(7.813vw - 38px), 42px);
    --intro-card-radius: clamp(28px, calc(3.906vw - 2px), 38px);
    --cards-width: calc((var(--intro-card-width) * 3) + (var(--intro-card-gap) * 2));
    --cards-visual-offset: clamp(36px, 4vw, 48px);
    --intro-title-gap: clamp(10px, calc(3.125vw - 14px), 18px);
    --intro-title-font: clamp(20px, calc(3.125vw - 4px), 28px);
    --intro-text-font: clamp(14px, calc(1.563vw + 0px), 18px);
    --intro-img1-left: 50%;
    --intro-img1-top: clamp(-54px, calc(-6.25vw - 6px), -38px);
    --intro-img1-width: min(clamp(152px, calc(38.281vw - 142px), 250px), 78.04%);
    --intro-img2-left: 50%;
    --intro-img2-top: clamp(-54px, calc(-6.25vw - 6px), -38px);
    --intro-img2-width: min(clamp(152px, calc(38.281vw - 142px), 250px), 78.04%);
    --intro-img3-left: 50%;
    --intro-img3-top: clamp(-54px, calc(-6.25vw - 6px), -38px);
    --intro-img3-width: min(clamp(152px, calc(38.281vw - 142px), 250px), 78.04%);
    left: calc(((100% - var(--cards-width)) / 2) + var(--cards-visual-offset));
    top: 320px;
    flex-direction: row;
    justify-content: center;
    gap: var(--intro-card-gap);
    width: var(--cards-width);
    transform: none;
  }

  .intro-cards article {
    width: var(--intro-card-width);
    height: var(--intro-card-height);
    aspect-ratio: 400 / 502;
    padding: var(--intro-card-padding);
    border-radius: var(--intro-card-radius);
  }

  .intro-cards article:nth-child(1) img,
  .intro-cards article:nth-child(2) img,
  .intro-cards article:nth-child(3) img {
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
  }

  .intro-cards p {
    font-size: var(--intro-text-font);
    word-break: keep-all;
  }

  .programs {
    height: 760px;
  }

  .program-head {
    top: 58px;
    gap: 20px;
  }

  .program-copy h2 {
    font-size: 34px;
  }

  .program-copy p {
    margin-top: 18px;
    font-size: 16px;
  }

  .program-copy .btn {
    margin-top: 20px;
  }

  .program-ui .arrows {
    display: none;
  }

  .program-list {
    --program-card-width: min(300px, calc((100% - var(--program-card-gap)) / 2));
    top: 370px;
    height: 400px;
  }

  .program-list article {
    height: auto;
    aspect-ratio: 300 / 360;
    border-radius: 36px;
  }

  .program-card-down {
    margin-top: 0;
  }

  .program-list img,
  .program-card-1 img,
  .program-card-2 img,
  .program-card-3 img,
  .program-card-4 img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 864;
  }

  .program-list small {
    left: 16px;
    top: 216px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .program-list h3 {
    left: 16px;
    top: 248px;
    width: 252px;
    font-size: 18px;
  }

  .program-list p {
    left: 16px;
    top: 280px;
    width: 252px;
    font-size: 14px;
    line-height: 1.35;
  }

  .partners {
    --partner-roll-distance: -4000px;
    height: 170px;
  }

  .partners div {
    height: 170px;
  }

  .partners img {
    width: 200px;
    height: 170px;
  }

  .benefits {
    min-height: 1180px;
    padding-top: 70px;
  }

  .benefit-copy {
    left: calc(50% - 280px);
    width: 560px;
  }

  .benefit-cards {
    position: absolute;
    left: 50%;
    top: 330px;
    display: block;
    width: 560px;
    height: 756px;
    margin: 0;
    transform: translateX(-50%);
  }

  .benefit-cards article {
    position: absolute;
    width: 270px;
    height: 326px;
    border-radius: 36px;
  }

  .benefit-cards article:nth-child(1) {
    left: 0;
    top: 0;
  }

  .benefit-cards article:nth-child(2) {
    left: 0;
    top: 350px;
  }

  .benefit-cards article:nth-child(3) {
    left: 290px;
    top: 108px;
    margin-top: 0;
  }

  .benefit-cards article:nth-child(4) {
    left: 290px;
    top: 458px;
  }

  .benefit-cards article:nth-child(1) img,
  .benefit-cards article:nth-child(2) img,
  .benefit-cards article:nth-child(3) img,
  .benefit-cards article:nth-child(4) img {
    width: 132px;
    height: 122px;
    margin-top: 38px;
  }

  .benefit-cards h3,
  .benefit-cards article:nth-child(n + 2) h3 {
    margin-top: 16px;
    font-size: 22px;
  }

  .benefit-cards p {
    margin-top: 10px;
    padding: 0 26px;
    font-size: 15px;
    line-height: 1.38;
    word-break: keep-all;
  }

  .wide {
    height: 980px;
    min-height: 0;
  }

  .area {
    height: 980px;
  }

  .map {
    top: 520px;
    width: 300px;
    height: 442px;
  }

  .map > img {
    width: 300px;
    height: 442px;
  }

  .region {
    padding: 6px 10px;
  }

  .region b {
    font-size: 13px;
  }

  .region span {
    font-size: 10px;
  }

  .region::after {
    bottom: -14px;
    border-left-width: 11px;
    border-right-width: 11px;
    border-top-width: 20px;
  }

  .region::before {
    top: calc(100% + 14px);
    width: 38px;
    height: 38px;
  }

  .r1 {
    left: 158px;
    top: 34px;
  }

  .r2 {
    left: 88px;
    top: 74px;
  }

  .r3 {
    left: 164px;
    top: 128px;
  }

  .r4 {
    left: 66px;
    top: 184px;
  }

  .r5 {
    left: 64px;
    top: 296px;
  }

  .video {
    height: 880px;
  }

  .video-swiper,
  .video-slide {
    height: 830px;
  }

  .video-copy {
    top: 34px;
  }

  .video-desc {
    top: 168px;
  }

  .video-thumb {
    top: 230px;
    aspect-ratio: 626 / 403;
    height: auto;
  }

  .video-thumb img,
  .video-thumb::after {
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .video-ui {
    top: 804px;
  }

  .sns {
    min-height: 760px;
    padding-bottom: 80px;
  }

  .sns-list {
    --sns-list-width: clamp(350px, calc(58.571vw + 121.571px), 720px);
    --sns-row-gap: clamp(61px, calc(10.918vw + 18.418px), 130px);
    --sns-col-gap: clamp(58px, calc(9.81vw + 19.761px), 120px);
    --sns-item-width: calc((var(--sns-list-width) - (var(--sns-col-gap) * 2) - 1px) / 3);
    gap: var(--sns-row-gap) var(--sns-col-gap);
    width: var(--sns-list-width);
    margin-top: 58px;
  }

  .sns-item,
  .sns-list img {
    width: var(--sns-item-width);
    height: clamp(76px, calc(12.5vw + 27.25px), 155px);
  }

  .quick {
    min-height: auto;
    padding: 64px 0 90px;
  }

  .quick a {
    align-items: flex-start;
    justify-content: center;
    width: calc((100% - 16px) / 2);
    height: 132px;
    padding: 30px 28px;
  }

  .quick em {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .wide {
    height: clamp(471px, 61.302vw, 628px);
    min-height: 0;
  }

  .area {
    height: clamp(471px, 61.302vw, 628px);
  }

  .area-scene {
    position: absolute;
    left: calc(50% - 960px);
    top: 0;
    width: 1920px;
    height: 1177px;
    transform: scale(var(--area-scale));
    transform-origin: top center;
  }

  .area-copy {
    left: 320px;
    top: 267px;
    width: 697px;
  }

  .area-copy h2 {
    font-size: 64px;
  }

  .area-copy p {
    margin: 41px 0 0;
    font-size: 28px;
  }

  .stats {
    gap: 77px;
    justify-content: center;
    width: 480px;
    height: 219px;
    margin-top: 107px;
    padding: 62px 39px;
  }

  .stats div {
    width: 148px;
  }

  .stats div + div::before {
    left: -38px;
    top: -21px;
    height: 138px;
  }

  .stats span {
    font-size: 20px;
  }

  .stats b {
    margin-top: 12px;
    font-size: 64px;
  }

  .map {
    left: 1053px;
    top: 35px;
    width: 752px;
    height: 1108px;
    transform: none;
  }

  .map > img {
    width: 752px;
    height: 1108px;
  }

  .region {
    padding: 14px 18px;
    border-radius: 30px;
  }

  .region b {
    font-size: 28px;
  }

  .region span {
    font-size: 20px;
  }

  .region::after {
    bottom: -18px;
    border-left-width: 14px;
    border-right-width: 14px;
    border-top-width: 26px;
  }

  .region::before {
    top: calc(100% + 18px);
    width: 95px;
    height: 95px;
  }

  .r1 {
    left: 395px;
    top: 117px;
  }

  .r2 {
    left: 221px;
    top: 222px;
  }

  .r3 {
    left: 412px;
    top: 364px;
  }

  .r4 {
    left: 166px;
    top: 507px;
  }

  .r5 {
    left: 160px;
    top: 773px;
  }

  .video-section {
    --video-side: clamp(20px, calc(11.041vw - 23.06px), 90px);
    height: clamp(895px, calc(64.377vw + 400px), 1060px);
  }

  .video-section::before {
    z-index: 1;
    left: 50%;
    top: auto;
    bottom: -160px;
    width: clamp(963px, calc(348.828vw - 1716px), 1856px);
    height: clamp(355px, calc(88.281vw - 323px), 581px);
    transform: translateX(-50%);
  }

  .video {
    position: relative;
    left: auto;
    top: auto;
    width: calc(100% - (var(--video-side) * 2));
    height: clamp(895px, calc(64.377vw + 400px), 1060px);
    margin: 0 auto;
    transform: none;
  }

  .video-swiper,
  .video-slide {
    width: 100%;
    height: clamp(875px, calc(64.377vw + 380px), 1040px);
  }

  .video-thumb {
    top: 230px;
    width: 100%;
    aspect-ratio: 626 / 403;
    height: auto;
  }

  .video-thumb img {
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .video-thumb::after {
    width: 100%;
    height: 100%;
  }

  .video-copy {
    left: 50%;
    top: 34px;
    width: min(600px, 100%);
    text-align: center;
    transform: translateX(-50%);
  }

  .video-copy h2 {
    font-size: 38px;
    line-height: 1.3;
  }

  .video-desc {
    left: 50%;
    top: 168px;
    width: min(600px, 100%);
    height: auto;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    transform: translateX(-50%) translateY(var(--video-y));
  }

  .video-ui {
    z-index: 4;
    left: 50%;
    top: clamp(669px, calc(50.166vw + 283.69px), 798px);
    width: min(clamp(253px, calc(54.732vw + 39.585px), 600px), 100%);
    height: clamp(36px, calc(5.678vw + 13.855px), 72px);
    transform: translateX(-50%) translateY(var(--video-y));
  }

  .video-ui span {
    width: clamp(167px, calc(9.779vw + 128.86px), 229px);
    font-size: clamp(12px, calc(0.315vw + 10.771px), 14px);
  }

  .video-ui span::before,
  .video-ui span::after {
    left: clamp(53px, calc(3.47vw + 39.468px), 75px);
    top: clamp(8px, calc(-0.158vw + 9.616px), 9px);
    width: clamp(114px, calc(8.517vw + 80.781px), 168px);
    height: clamp(2px, calc(0.158vw + 1.384px), 3px);
  }

  .video-ui button {
    width: clamp(36px, calc(2.208vw + 27.388px), 50px);
    height: clamp(36px, calc(2.208vw + 27.388px), 50px);
    margin-left: clamp(6px, calc(0.631vw + 3.539px), 10px);
  }

  .video-ui button::before {
    left: 50%;
    top: 50%;
    width: 21px;
    height: 21px;
    background-size: 21px 21px;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 767px) {
  .video-section {
    --video-mobile-scale: clamp(1, calc(0.053vw + 0.793), 1.2);
  }

  .hero-copy {
    top: 142px;
  }

  .category-sec {
    height: 357px;
    padding: 50px 20px 49px;
  }

  .category-sec h2 {
    width: 211px;
    font-family: "IBM Plex Sans";
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.4px;
  }

  .search {
    --search-width: clamp(350px, 55.104vw, 1058px);
    --search-height: clamp(45px, 4.375vw, 84px);
    --search-border: 0;
    --search-padding: 8px 12px;
    --search-font: clamp(14px, 1.146vw, 22px);
    --region-width: clamp(47px, 12.188vw, 234px);
    --region-height: 16px;
    --region-toggle-padding-left: 0;
    --region-chevron-size: 16px;
    --region-chevron-left: 31px;
    --region-chevron-top: 0;
    --region-menu-left: -12px;
    --region-menu-top: calc(100% + 20px);
    --region-menu-width: 81px;
    --region-menu-item-height: 35px;
    --region-menu-radius: 14px;
    --region-menu-padding: 8px 12px;
    --search-input-margin-left: 15px;
    --search-submit-size: clamp(29px, 3.021vw, 58px);
    --search-submit-margin-right: 0;
    --search-icon-size: 16px;
    --search-icon-inset: 6px;
    width: var(--search-width);
    height: var(--search-height);
    min-height: var(--search-height);
    margin-top: 44px;
    overflow: visible;
  }

  .region-toggle {
    justify-content: flex-start;
    height: var(--region-height);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.28px;
  }

  .region-select.open .region-toggle::after {
    top: 0;
    transform: none;
  }

  .region-menu {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  }

  .region-menu button {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: -0.24px;
  }

  .search input {
    flex: 1;
    width: auto;
    height: 14px;
    line-height: 1;
    letter-spacing: -0.28px;
  }

  .search-submit {
    margin-left: auto;
  }

  .categories {
    --cat-width: 83px;
    --cat-height: 101px;
    --cat-gap: 7px;
    --cat-font: 12px;
    --cat-icon-width: 82px;
    --cat-icon-height: 82px;
    --cat-icon-padding: 14px;
    --cat-icon-border: 2px;
    --cat-icon-radius: 100px;
    --category-arrow-size: 30px;
    --category-arrow-gap: 6px;
    width: 350px;
    height: var(--cat-height);
    margin-top: 18px;
  }

  .category-swiper {
    width: 277px;
  }

  .category-swiper {
    height: var(--cat-height);
  }

  .cat {
    line-height: 1;
  }

  .cat span {
    font-size: var(--cat-font);
    line-height: 1;
  }

  .cat.active img {
    border-color: transparent;
    background:
      linear-gradient(#2a8dff, #2a8dff) padding-box,
      linear-gradient(90deg, #1081f9, #21ffe5) border-box;
  }

  .circle-prev::before,
  .circle-next::before {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }

  .intro {
    height: 522px;
  }

  .intro::before {
    left: 43px;
    top: 155px;
    width: 304px;
    height: 206px;
    transform: none;
  }

  .intro::after {
    left: clamp(-260px, calc(-36.87vw + 22.8px), -121px);
    top: clamp(250px, calc(-11.94vw + 341.6px), 295px);
    width: clamp(632px, calc(161.27vw + 3px), 1240px);
    height: clamp(256px, calc(65.25vw + 1.5px), 502px);
    transform: none;
  }

  .intro-left,
  .intro-right {
    display: none;
  }

  .intro-head {
    width: 201px;
    margin: 46px auto 0;
  }

  .intro-head small {
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
  }

  .intro-head small::after {
    top: 34px;
    width: 24px;
    height: 16px;
  }

  .intro-head h2 {
    position: relative;
    left: 50%;
    width: max-content;
    margin-top: 16px;
    font-size: 36px;
    translate: -50% 0;
  }

  .intro-head p {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.5;
  }

  .intro-cards {
    --intro-card-gap: 16px;
    --intro-card-width: 208px;
    --intro-card-height: auto;
    --intro-card-padding: 134px 21px 22px;
    --intro-card-radius: 28px;
    --intro-title-gap: 0;
    --intro-title-font: 20px;
    --intro-text-font: 14px;
    --intro-img1-left: 30.5%;
    --intro-img1-top: -31px;
    --intro-img1-width: min(152px, 80.287%);
    --intro-img2-left: 27.5%;
    --intro-img2-top: -51px;
    --intro-img2-width: min(167.2px, 88.316%);
    --intro-img3-left: 30.5%;
    --intro-img3-top: -31px;
    --intro-img3-width: min(152px, 80.287%);
    left: 0;
    top: 252px;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--intro-card-gap);
    width: 100%;
    overflow: visible;
    transform: none;
  }

  .intro-cards.swiper .intro-cards-wrapper {
    gap: 0;
  }

  .intro-cards article,
  .intro-cards article:nth-child(1),
  .intro-cards article:nth-child(2),
  .intro-cards article:nth-child(3) {
    width: var(--intro-card-width);
    height: var(--intro-card-height);
    padding: var(--intro-card-padding);
    border-radius: var(--intro-card-radius);
    align-items: flex-start;
    gap: 10px;
    box-shadow: none;
    transform: none;
  }

  .intro .intro-cards article.swiper-slide-active {
    transform: translateY(-19px);
  }

  .intro-cards article:nth-child(1) img,
  .intro-cards article:nth-child(2) img,
  .intro-cards article:nth-child(3) img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .intro-cards p {
    line-height: 1.3;
  }

  .programs {
    height: 645px;
  }

  .program-head {
    left: 20px;
    top: 70px;
    width: 350px;
  }

  .program-copy h2 {
    width: 296px;
    font-size: 30px;
  }

  .program-copy p {
    margin-top: 16px;
    width: 296px;
    font-size: 14px;
    line-height: 1.5;
  }

  .program-copy .btn {
    display: none;
  }

  .program-ui {
    width: 211px;
    height: 36px;
    margin-top: -8px;
  }

  .program-ui .arrows {
    display: none;
  }

  .program-page {
    width: 211px;
    gap: 8px;
    padding: 0;
  }

  .program-ui span {
    width: 167px;
  }

  .program-ui span::before,
  .program-ui span::after {
    left: 53px;
    top: 9px;
    width: 114px;
    height: 2px;
  }

  .program-pause {
    width: 36px;
    height: 36px;
  }

  .program-pause::before,
  .program-pause::after {
    top: 9px;
    height: 14px;
  }

  .program-pause::before {
    left: 11px;
  }

  .program-pause::after {
    left: 19px;
  }

  .program-list {
    --program-card-gap: 22px;
    --program-card-cols: 2;
    --program-card-width: 232px;
    left: 20px;
    top: 299px;
    width: calc(100% - 20px);
    height: 300px;
  }

  .program-list .swiper-slide,
  .program-list article {
    width: var(--program-card-width);
    flex-basis: var(--program-card-width);
  }

  .program-list article {
    height: auto;
    aspect-ratio: 232 / 280;
    border-radius: 32px;
  }

  .program-card-down {
    margin-top: 0;
  }

  .program-list img,
  .program-card-1 img,
  .program-card-2 img,
  .program-card-3 img,
  .program-card-4 img {
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 1296 / 864;
  }

  .program-list small {
    left: 16px;
    top: 162px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .program-list h3 {
    left: 16px;
    top: 192px;
    width: 179px;
    font-size: 16px;
  }

  .program-list p {
    left: 16px;
    top: 219px;
    width: 200px;
    font-size: 12px;
  }

  .partners {
    --partner-roll-distance: -4000px;
    height: 213px;
  }

  .partners div {
    left: 0;
    top: 0;
    height: 170px;
  }

  .partners img {
    width: 200px;
    height: 170px;
  }

  .benefits {
    height: 876px;
    min-height: 0;
    padding: 64px 20px 0;
  }

  .benefit-copy {
    width: 203px;
  }

  .benefit-copy h2 {
    font-size: 30px;
    line-height: 1.3;
    white-space: normal;
  }

  .benefit-copy p {
    width: 190px;
    margin: 16px 0 22px;
    font-size: 14px;
    line-height: 1.5;
    word-break: keep-all;
  }

  .benefit-copy .btn {
    width: 124px;
  }

  .benefit-cards {
    position: absolute;
    left: calc(50% - 175px);
    top: 304px;
    display: block;
    width: 350px;
    height: 498px;
    margin: 0;
  }

  .benefit-cards article {
    position: absolute;
    width: 171px;
    height: 206px;
    border-radius: 24px;
  }

  .benefit-cards article:nth-child(1) {
    left: 0;
    top: 0;
  }
  .benefit-cards article:nth-child(2) {
    left: 0;
    top: 214px;
  }
  .benefit-cards article:nth-child(3) {
    left: 179px;
    top: 78px;
  }
  .benefit-cards article:nth-child(4) {
    left: 179px;
    top: 292px;
  }

  .benefit-cards article:nth-child(1) img,
  .benefit-cards article:nth-child(2) img,
  .benefit-cards article:nth-child(3) img,
  .benefit-cards article:nth-child(4) img {
    width: 85px;
    height: 78px;
    margin-top: 24px;
  }

  .benefit-cards h3,
  .benefit-cards article:nth-child(n + 2) h3 {
    margin-top: 10px;
    font-size: 16px;
  }

  .benefit-cards p {
    margin-top: 8px;
    padding: 0 18px;
    font-size: 12px;
    line-height: 1.35;
    word-break: keep-all;
  }

  .wide {
    height: 909px;
    min-height: 0;
  }

  .wide-deco-left {
    left: -74px;
    top: 870px;
    width: 186px;
    height: 124px;
    background-size: cover;
    filter: blur(10px);
    opacity: 1;
    transform: none !important;
  }

  .wide-ellipse-left {
    left: -208px;
    top: 1201px;
    width: 403px;
    height: 401px;
  }

  .wide-ellipse-right {
    left: 137px;
    top: 1231px;
    width: 404px;
    height: 404px;
  }

  .area {
    height: 909px;
  }

  .area-copy {
    left: calc(50% - 175px);
    top: 82px;
    width: 350px;
  }

  .area-copy h2 {
    width: 319px;
    font-size: 30px;
  }

  .area-copy p {
    width: 195px;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.5;
  }

  .stats {
    width: 100%;
    height: 111px;
    margin-top: 22px;
    padding: 20px 32px;
    border-radius: 24px;
  }

  .stats div {
    width: 50%;
  }

  .stats div + div::before {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
  }

  .stats span {
    font-size: 12px;
    line-height: 1.3;
    white-space: normal;
  }

  .stats b {
    margin-top: 5px;
    font-size: 30px;
  }

  .map {
    top: 379px;
    width: 350px;
    height: 514px;
  }

  .map > img {
    width: 350px;
    height: 514px;
  }

  .video-section {
    --video-side: clamp(20px, calc(11.041vw - 23.06px), 90px);
    height: clamp(590px, calc(68.966vw + 321.034px), 850px);
  }

  .video-section::before {
    z-index: 1;
    left: 50%;
    top: auto;
    bottom: -80px;
    width: clamp(632px, calc(87.798vw + 289.59px), 963px);
    height: clamp(256px, calc(26.26vw + 153.586px), 355px);
    transform: translateX(-50%);
  }

  .video {
    width: calc(100% - (var(--video-side) * 2));
    height: clamp(590px, calc(68.966vw + 321.034px), 850px);
    margin: 0 auto;
    transform: none;
  }

  .video-swiper,
  .video-slide {
    height: clamp(570px, calc(68.966vw + 301.034px), 830px);
  }

  .video-copy {
    left: 50%;
    top: 57px;
    width: 319px;
    text-align: center;
    transform: translateX(-50%);
  }

  .video-copy h2,
  .sns h2 {
    font-size: 30px;
    line-height: 1.3;
  }

  .video-desc {
    top: 151px;
    left: 50%;
    width: 205px;
    height: 42px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    word-break: keep-all;
    transform: translateX(-50%) translateY(var(--video-y));
  }

  .video-thumb {
    top: 215px;
    aspect-ratio: 626 / 403;
    height: auto;
  }

  .video-thumb img,
  .video-thumb::after {
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  .video-thumb button {
    z-index: 4;
  }

  .video-ui {
    z-index: 4;
    top: clamp(464px, calc(50.166vw + 268.69px), 654px);
    left: 50%;
    width: clamp(253px, calc(54.732vw + 39.585px), 600px);
    height: clamp(36px, calc(5.678vw + 13.855px), 72px);
    transform: translateX(-50%) translateY(var(--video-y));
  }

  .video-ui span {
    width: clamp(167px, calc(9.779vw + 128.86px), 229px);
    font-size: clamp(12px, calc(0.315vw + 10.771px), 14px);
  }

  .video-ui span::before,
  .video-ui span::after {
    left: clamp(53px, calc(3.47vw + 39.468px), 75px);
    top: clamp(8px, calc(-0.158vw + 9.616px), 9px);
    width: clamp(114px, calc(8.517vw + 80.781px), 168px);
    height: clamp(2px, calc(0.158vw + 1.384px), 3px);
  }

  .video-ui button {
    width: clamp(36px, calc(2.208vw + 27.388px), 50px);
    height: clamp(36px, calc(2.208vw + 27.388px), 50px);
    margin-left: clamp(6px, calc(0.631vw + 3.539px), 10px);
  }

  .video-ui button::before {
    left: 50%;
    top: 50%;
    width: 21px;
    height: 21px;
    background-size: 21px 21px;
    transform: translate(-50%, -50%);
  }

  .sns {
    height: auto;
    min-height: 664px;
    padding: 62px 20px 0;
  }

  .sns h2 {
    width: 319px;
  }

  .sns-list {
    --sns-list-width: clamp(350px, calc(58.571vw + 121.571px), 720px);
    --sns-row-gap: clamp(61px, calc(10.918vw + 18.418px), 130px);
    --sns-col-gap: clamp(58px, calc(9.81vw + 19.761px), 120px);
    --sns-item-width: calc((var(--sns-list-width) - (var(--sns-col-gap) * 2) - 1px) / 3);
    gap: var(--sns-row-gap) var(--sns-col-gap);
    width: var(--sns-list-width);
    margin-top: 60px;
  }

  .sns-item,
  .sns-list img {
    width: var(--sns-item-width);
    height: clamp(76px, calc(12.5vw + 27.25px), 155px);
  }

  .quick {
    gap: 12px;
    width: 350px;
    height: 580px;
    padding: 64px 0;
  }

  .quick a {
    width: 350px;
    height: 104px;
    padding: 18px 20px;
    border-radius: 20px;
  }

  .quick span {
    font-size: 12px;
  }

  .quick b {
    font-size: 28px;
  }

  .quick em {
    right: 20px;
    bottom: 18px;
    width: 124px;
    height: 52px;
    padding: 0 21px;
    font-size: 12px;
  }
}

@media (max-width: 1024px) {
  .benefits {
    height: var(--benefit-height, 876px);
    min-height: 0;
    padding: 64px 20px 0;
  }

  .benefit-scene {
    position: relative;
    left: 50%;
    display: block;
    width: 560px;
    height: 1140px;
    margin: 0;
    transform: translateX(-50%) scale(var(--benefit-scale, 1));
    transform-origin: top center;
  }

  .benefit-copy {
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    margin: 0;
  }

  .benefit-copy h2 {
    width: 510px;
    font-size: 48px;
    line-height: 1.3;
    white-space: normal;
  }

  .benefit-copy p {
    width: 304px;
    margin: 26px 0 35px;
    font-size: 22px;
    line-height: 1.5;
    word-break: keep-all;
  }

  .benefit-copy .btn {
    width: 198px;
  }

  .benefit-cards {
    position: absolute;
    left: 0;
    top: 384px;
    display: block;
    width: 560px;
    height: 756px;
    margin: 0;
    transform: none;
  }

  .benefit-cards article {
    position: absolute;
    width: 270px;
    height: 326px;
    border-radius: 36px;
  }

  .benefit-cards article:nth-child(1) {
    left: 0;
    top: 0;
  }

  .benefit-cards article:nth-child(2) {
    left: 0;
    top: 350px;
  }

  .benefit-cards article:nth-child(3) {
    left: 290px;
    top: 108px;
    margin-top: 0;
  }

  .benefit-cards article:nth-child(4) {
    left: 290px;
    top: 458px;
  }

  .benefit-cards article:nth-child(1) img,
  .benefit-cards article:nth-child(2) img,
  .benefit-cards article:nth-child(3) img,
  .benefit-cards article:nth-child(4) img {
    width: 132px;
    height: 122px;
    margin-top: 38px;
  }

  .benefit-cards h3,
  .benefit-cards article:nth-child(n + 2) h3 {
    margin-top: 16px;
    font-size: 24px;
  }

  .benefit-cards p {
    margin-top: 13px;
    padding: 0 29px;
    font-size: 18px;
    line-height: 1.35;
    word-break: keep-all;
  }
}

@media (max-width: 390px) {
  .intro::after {
    background-image: url("/knda/img/main/main-sec4-bg-ellipse-mobile.svg");
  }
}

.cat:hover img,
.cat:focus-visible img {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90deg, #1081f9, #21ffe5) border-box;
}

/* =========================================================
   popup
========================================================= */

.popup {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.popup-open {
  overflow: hidden;
}

.popup-box {
  position: relative;
  width: min(480px, calc(100vw - 40px));
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.popup-swiper {
  width: 100%;
}

.popup-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.popup-pagination {
  position: absolute;
  z-index: 2;
  bottom: 72px;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.popup-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: background 0.2s ease;
}

.popup-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

.popup-prev,
.popup-next {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: -30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #18171c;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease;
}

.popup-prev:hover,
.popup-next:hover {
  background: #fff;
}

.popup-prev {
  left: 12px;
}

.popup-next {
  right: 12px;
}

.popup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  background: #fff;
}

.popup-today,
.popup-close {
  border: 0;
  background: transparent;
  font-family: Pretendard;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.375px;
  cursor: pointer;
}

.popup-today {
  color: rgba(24, 23, 28, 0.55);
  font-weight: 500;
}

.popup-close {
  color: #18171c;
  font-weight: 700;
}

.popup-today:hover {
  color: rgba(24, 23, 28, 0.8);
}

.popup-close:hover {
  color: #2a8dff;
}

@media (max-width: 1024px) {
  .popup-box {
    width: min(360px, calc(100vw - 40px));
    border-radius: 20px;
  }

  .popup-actions {
    height: 50px;
    padding: 0 16px;
  }

  .popup-today,
  .popup-close {
    font-size: 14px;
  }

  .popup-prev,
  .popup-next {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}