.main-page {
  --main-x: clamp(20px, 6vw, 320px);
  --main-inner: min(1280px, calc(100vw - var(--main-x) - var(--main-x)));
  --main-section-y: clamp(60px, calc(39.61px + 5.23vw), 140px);
  --main-title-size: clamp(24px, calc(13.8px + 2.62vw), 64px);
  --course-card-w: clamp(214px, calc(160.98px + 13.59vw), 422px);
  --course-card-h: clamp(270px, calc(203.23px + 17.12vw), 532px);
  --course-card-pad-x: clamp(12px, calc(9.45px + 0.65vw), 22px);
  --course-card-pad-y: clamp(15px, calc(10.16px + 1.24vw), 34px);
  --course-card-gap: clamp(15px, calc(11.18px + 0.98vw), 30px);
  --course-media-h: clamp(127px, calc(95.14px + 8.17vw), 252px);
  --course-active-y: clamp(8px, calc(5.96px + 0.52vw), 16px);
  --course-side-x: clamp(248px, calc(168.62px + 19.65vw), 560px);
  --course-side-y: clamp(0px, 5vw, 96px);
  overflow: hidden;
  color: #18171c;
  font-family: Pretendard;
  background: #fff;
  word-break: keep-all;
}

.main-gnb {
  height: 108px;
  padding: 30px 40px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

body.main-header-dark:not(.menu-open) .main-gnb .main-nav .nav-item > a,
body.main-header-dark:not(.menu-open) .main-gnb .brand-divider {
  color: #18171c;
}

body.main-header-dark:not(.menu-open) .main-header-actions img {
  filter: brightness(0);
}

.main-brand {
  gap: 14px;
}

.korcham-logo {
  width: 193px;
  height: 35px;
  object-fit: contain;
}

.brand-divider {
  color: #fff;
  font-family: "IBM Plex Sans";
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
}

.dlca-logo {
  width: 107px;
  height: 41px;
  object-fit: contain;
}

.main-nav {
  position: absolute;
  left: 50%;
  top: 32px;
  gap: 20px;
  width: 600px; /* hgw20260729 */
  margin-left: 0;
  font-family: Pretendard;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 700;
  transform: translateX(-50%);
}

.main-nav .nav-item > a {
  color: #fff;
}

.main-header-actions {
  position: absolute;
  right: 40px;
  top: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  width: 328px;
  height: 44px;
}

.main-header-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.main-header-actions img {
  width: auto;
  height: auto;
  max-width: 34px;
  max-height: 34px;
  object-fit: contain;
}

.main-header-actions img[src$="main-header-icon2.svg"] {
  width: 34.5px;
  height: auto;
  max-height: none;
}

.main-mobile-menu-btn {
  display: none;
}

.main-hero {
  position: relative;
  height: clamp(844px, calc(809.35px + 8.88vw), 980px);
  overflow: hidden;
  background: #fff;
}

.main-hero::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 1080px;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
  content: "";
}

.main-hero::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 2;
  height: 4px;
  background: #fff;
  pointer-events: none;
  content: "";
}

.hero-bg {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  display: block;
  width: 100%;
  height: 1080px;
  object-fit: cover;
  object-position: center top;
}

.hero-curve {
  position: absolute;
  left: 50%;
  top: 653px;
  z-index: 2;
  width: 3898px;
  height: 1768px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--main-inner);
  height: 100%;
  margin: 0 auto;
  padding-top: 700px;
}

.hero-inner h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1005px;
  max-width: 100%;
  margin: 0;
  color: #18171c;
  font-family: Paperlogy;
  font-size: var(--main-title-size);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
}

.hero-inner h1 span {
  display: block;
  white-space: nowrap;
}

.hero-inner h1 b {
  color: transparent;
  font-weight: 700;
  background: linear-gradient(110deg, #7aaefc 0%, #8b48ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(0.75rem, 1vw, 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  color: #7373ff;
  font-family: Pretendard;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  transform: translateX(-50%);
}

.scroll-cue i,
.main-button i {
  display: block;
  width: 19px;
  height: 16px;
  position: relative;
}

.scroll-cue i {
  animation: scroll-arrow-bounce 2.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.scroll-cue i::before,
.scroll-cue i::after {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-50%) rotate(45deg);
  content: "";
}

.scroll-cue i::before {
  top: -4px;
  opacity: 0.35;
}

.scroll-cue i::after {
  top: 3px;
  opacity: 1;
}

@keyframes scroll-arrow-bounce {
  0%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }

  50% {
    opacity: 0.28;
    transform: translateY(6px);
  }
}

.search-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  min-height: 740px;
  margin-top: -2px;
  padding: 200px var(--gutter);
  background: #fff;
}

.search-section::before {
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  z-index: 1;
  height: 8px;
  background: #fff;
  pointer-events: none;
  content: "";
}

.search-glow {
  position: absolute;
  left: 50%;
  top: 564px;
  width: 1597px;
  height: 1416px;
  background: url("../img/main/main-search-glow.png") center / 100% 100% no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
}

.search-section h2,
.section-title h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #18171c;
  font-family: Paperlogy;
  font-size: var(--main-title-size);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -1.28px;
}

.search-section h2 b {
  color: transparent;
  font-weight: 700;
  background: linear-gradient(100deg, #8b48ff 0%, #7aaefc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.course-search {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 1058px;
  height: 80px;
  max-width: 100%;
  margin-top: clamp(34px, calc(27.37px + 1.7vw), 60px);
  border: 2px solid #59afff;
  border-radius: 100px;
  background: rgba(89, 175, 255, 0.1);
}

.region-select {
  position: relative;
  width: 218px;
  height: 100%;
  padding: 0 72px 0 47px;
  color: #18171c;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.44px;
  text-align: left;
}

.region-select::after {
  position: absolute;
  right: 78px;
  top: 50%;
  width: 17px;
  height: 10px;
  background: #18171c;
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center;
  -webkit-mask: url("../img/main/main-region-arrow.svg") center / 100% 100% no-repeat;
  mask: url("../img/main/main-region-arrow.svg") center / 100% 100% no-repeat;
  content: "";
}

.region-select.is-open::after {
  transform: translateY(-50%);
}

.course-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  color: #18171c;
  font-family: Pretendard;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.44px;
  background: transparent;
}

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

.search-submit {
  width: 58px;
  height: 58px;
  margin-right: 10px;
  border-radius: 100px;
  background: #59afff url("../img/main/main-search-icon.svg") 17px 16px / 25px 27px no-repeat;
  transition: background-color 0.2s ease;
}

.search-submit:hover,
.search-submit:focus-visible {
  background-color: #4b5fff;
}

.search-submit::before {
  display: none;
  content: "";
}

.search-submit::after {
  display: none;
  content: "";
}

.region-menu {
  position: absolute;
  left: 15px;
  top: 93px;
  display: none;
  flex-direction: column;
  width: 137px;
  height: 150px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}

.region-menu.open {
  display: flex;
}

.region-menu button {
  height: 50px;
  padding: 12px 20px;
  color: rgba(24, 23, 28, 0.6);
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.32px;
  text-align: left;
}

.region-menu button.is-active {
  color: #4b5fff;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.category-carousel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
  width: 1282px;
  max-width: calc(100% + 8px);
  margin-top: clamp(16px, calc(9.88px + 1.57vw), 40px);
}

.category-viewport {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.category-hover-shadow {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: var(--category-shadow-width, 127px);
  height: var(--category-shadow-height, 96px);
  border-radius: var(--category-shadow-radius, 20px);
  background: #4b5fff;
  box-shadow: 0 10px 18px rgba(75, 95, 255, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--category-shadow-x, 0), var(--category-shadow-y, 0));
}

.category-hover-shadow.is-visible {
  opacity: 1;
}

.category-carousel > .carousel-arrow {
  position: relative;
  z-index: 1;
}

.category-track {
  display: flex;
  gap: 15px;
  width: 100%;
  max-width: none;
  overflow: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.category-track::-webkit-scrollbar {
  display: none;
}

.category-track::after {
  flex: 0 0 32px;
  content: "";
}

.main-category {
  display: flex;
  flex: 0 0 126px;
  flex-direction: column;
  align-items: center;
  scroll-snap-align: start;
  gap: 9px;
  height: 96px;
  padding: 13px 1px; /* hgw20260729 */
  border: 1px solid #dadada;
  border-radius: 20px;
  background: #fff;
}

.main-category img {
  width: 43px;
  height: 43px;
  object-fit: contain;
}

.main-category b {
  color: #18171c;
  font-size: 18px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.36px;
}

.main-category:hover,
.main-category:focus-visible {
  border-color: #4b5fff;
  background: #4b5fff;
}

.main-category:hover b,
.main-category:focus-visible b {
  color: #fff;
}

.carousel-arrow {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 20px rgba(24, 23, 28, 0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.carousel-arrow::before {
  display: block;
  width: 10px;
  height: 17px;
  margin: 16px auto;
  background: no-repeat center / 10px 17px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='17' viewBox='0 0 10 17' fill='none'%3E%3Cpath d='M1.5 15.5L8.5 8.32051L1.85 1.5' stroke='%237B5AFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: "";
}

.carousel-arrow:hover,
.carousel-arrow:focus-visible {
  background-color: #8585ff;
  box-shadow: none;
}

.carousel-arrow:hover::before,
.carousel-arrow:focus-visible::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='17' viewBox='0 0 10 17' fill='none'%3E%3Cpath d='M1.5 15.5L8.5 8.32051L1.85 1.5' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.carousel-arrow.prev::before {
  transform: rotate(180deg);
}

.carousel-arrow.next::before {
  transform: none;
}

.course-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: clamp(586px, calc(423.45px + 41.68vw), 1224px);
  padding: var(--main-section-y) 0 clamp(60px, calc(28.92px + 7.97vw), 182px);
  overflow: hidden;
  background: linear-gradient(135deg, #dff5ff 0%, #a18dff 88%);
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: var(--main-inner);
}

.section-title.centered {
  align-items: center;
  text-align: center;
}

.section-title > p {
  margin: 0;
  color: #18171c;
  font-size: 28px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.56px;
}

.section-title > p b {
  color: #4b5fff;
  font-weight: 700;
}

.section-title.centered > p:first-child {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 236px;
  height: 54px;
  padding: 14px 18px;
  border-radius: 30px;
  color: #101010;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.05px;
  background: linear-gradient(90deg, #bda4ff 0%, #61f7ff 100%);
}

.section-title.centered > p:first-child::after {
  position: absolute;
  left: 50%;
  bottom: -13px;
  width: 40px;
  height: 26px;
  background: linear-gradient(90deg, #bda4ff 0%, #61f7ff 100%);
  background-position: center;
  background-size: 236px 54px;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
  content: "";
}

.search-section h2,
.course-search,
.category-carousel,
.course-preview .section-title,
.preview-window,
.course-preview .main-button,
.result-section .section-title,
.result-visual,
.result-list,
.review-section .section-title,
.review-button,
.review-card,
.benefit-section .section-title,
.benefit-item {
  --main-reveal-y: 0px;
  transform: translateY(var(--main-reveal-y));
  will-change: transform, opacity;
}

.preview-window {
  --drag-offset: 0px;
  width: 100%;
  height: var(--course-card-h);
  margin-top: 100px;
  overflow: visible;
}

.preview-track {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.preview-track.dragging {
  cursor: grabbing;
}

.preview-card {
  --course-x: 0px;
  --course-y: 0px;
  --course-rotate: 0deg;
  --course-tilt: 0deg;
  --course-scale: 0.84;
  --course-opacity: 0;
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  width: var(--course-card-w);
  min-height: var(--course-card-h);
  padding: var(--course-card-pad-y) var(--course-card-pad-x);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: clamp(18px, calc(14.94px + 0.78vw), 30px);
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 14px 42px rgba(75, 95, 255, 0.14);
  opacity: var(--course-opacity);
  pointer-events: none;
  transform:
    translateX(calc(-50% + var(--course-x) + var(--drag-offset, 0px)))
    translateY(var(--course-y))
    rotate(var(--course-rotate))
    rotateX(var(--course-tilt))
    scale(var(--course-scale));
  transform-origin: center top;
  transition: transform 0.62s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.36s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.preview-track.dragging .preview-card {
  transition: opacity 0.12s linear, background 0.24s ease, box-shadow 0.24s ease;
}

.preview-card.is-active,
.preview-card.is-prev,
.preview-card.is-next {
  pointer-events: auto;
}

.preview-card.is-active {
  --course-y: var(--course-active-y);
  --course-opacity: 1;
  --course-scale: 1;
  z-index: 5;
  background: linear-gradient(180deg, #fff 0%, #e3d9ff 100%);
  box-shadow: 0 28px 80px rgba(75, 95, 255, 0.28);
}

.preview-card.is-prev {
  --course-x: calc(var(--course-side-x) * -1);
  --course-y: var(--course-side-y);
  --course-rotate: -8deg;
  --course-tilt: 6deg;
  --course-opacity: 0.92;
  --course-scale: 0.96;
  z-index: 3;
}

.preview-card.is-next {
  --course-x: var(--course-side-x);
  --course-y: var(--course-side-y);
  --course-rotate: 8deg;
  --course-tilt: 6deg;
  --course-opacity: 0.92;
  --course-scale: 0.96;
  z-index: 3;
}

.preview-card.is-prev-far {
  --course-x: calc(var(--course-side-x) * -1.92);
  --course-y: clamp(102px, 14.5vw, 235px);
  --course-rotate: -14deg;
  --course-tilt: 9deg;
  --course-opacity: 0.36;
  z-index: 1;
}

.preview-card.is-next-far {
  --course-x: calc(var(--course-side-x) * 1.92);
  --course-y: clamp(102px, 14.5vw, 235px);
  --course-rotate: 14deg;
  --course-tilt: 9deg;
  --course-opacity: 0.36;
  z-index: 1;
}

.preview-card.is-prev-out {
  --course-x: calc(var(--course-side-x) * -2.62);
  --course-y: clamp(112px, 16.5vw, 270px);
  --course-rotate: -20deg;
  --course-tilt: 10deg;
  --course-opacity: 0;
  --course-scale: 0.9;
  z-index: 0;
}

.preview-card.is-next-out {
  --course-x: calc(var(--course-side-x) * 2.62);
  --course-y: clamp(112px, 16.5vw, 270px);
  --course-rotate: 20deg;
  --course-tilt: 10deg;
  --course-opacity: 0;
  --course-scale: 0.9;
  z-index: 0;
}

.preview-media {
  position: relative;
  height: var(--course-media-h);
  overflow: hidden;
  border-radius: clamp(12px, calc(9.96px + 0.52vw), 20px);
  background: #eee;
}

.preview-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 54%;
  max-height: 44%;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.preview-card[data-course="posco-ai-bigdata"] .preview-logo {
  width: 42.7%;
  height: auto;
  max-width: none;
  max-height: none;
}

.preview-card[data-course="samsung-ssafy"] .preview-logo {
  width: 53.3%;
  height: auto;
  max-width: none;
  max-height: none;
}

.preview-card[data-course="kt-alive"] .preview-logo {
  width: 13.9%;
  height: auto;
  max-width: none;
  max-height: none;
}

.preview-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--course-card-gap);
}

.preview-card-body h3 {
  display: -webkit-box;
  height: clamp(22px, calc(19.67px + 0.6vw), 34px);
  margin: 0;
  overflow: hidden;
  color: #18171c;
  font-size: clamp(16px, calc(13.96px + 0.52vw), 24px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.02em;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;
}

.preview-card-body p {
  display: -webkit-box;
  height: clamp(56px, calc(51.33px + 1.2vw), 74px);
  margin: 0;
  overflow: hidden;
  color: rgba(24, 23, 28, 0.72);
  font-size: clamp(12px, calc(10.98px + 0.26vw), 16px);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.02em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
}

.preview-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.preview-card-footer span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(22px, calc(19.2px + 0.72vw), 33px);
  padding: 0 clamp(10px, calc(7.96px + 0.52vw), 18px);
  border-radius: 999px;
  color: #fff;
  font-size: clamp(11px, calc(9.22px + 0.46vw), 18px);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: #4b5fff;
}

.preview-card-footer span.is-pending {
  background: rgba(75, 95, 255, 0.2);
}

.preview-card-footer span.is-pending-purple {
  background: rgba(196, 100, 255, 0.2);
}

.preview-card-footer i {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(22px, calc(18.18px + 0.98vw), 37px);
  height: clamp(22px, calc(18.18px + 0.98vw), 37px);
  border-radius: 50%;
  background: linear-gradient(180deg, #c779ff 0%, #80b3f2 100%);
  transition: background 0.2s ease;
}

.preview-card-footer i:hover,
.preview-card-footer i:focus-visible {
  background: #c57afe;
}

.preview-card-footer i::before {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: clamp(11px, calc(8.96px + 0.52vw), 19px);
  height: clamp(11px, calc(8.96px + 0.52vw), 19px);
  background: url("../img/main/main-card-arrow-up-right.svg") center / contain no-repeat;
  transform: translate(-50%, -50%);
  content: "";
}

.main-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 172px;
  height: 59px;
  padding: 0 28px;
  border-radius: 999px;
  color: #18171c;
  font-family: Pretendard;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.36px;
  white-space: nowrap;
  background: #fff;
}

.main-button i {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #18171c;
}

.main-button i::before {
  display: block;
  width: 7px;
  height: 7px;
  margin: 6px 0 0 5px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  content: "";
}

.outline-button {
  margin-top: clamp(60px, calc(55.92px + 1.05vw), 76px);
  width: auto;
  min-width: 222px;
  height: 59px;
  padding: 20px 28px;
  border: 1px solid #fff;
  color: #fff;
  font-family: Paperlogy;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  background: rgba(255, 255, 255, 0.3);
}

.outline-button,
.review-button {
  transition: color 0.2s ease, background-color 0.2s ease;
}

.outline-button i {
  position: relative;
  width: 19px;
  height: 19px;
  border-radius: 0;
  background: transparent;
}

.outline-button i::before {
  position: absolute;
  left: 1px;
  top: 9px;
  width: 16px;
  height: 2px;
  margin: 0;
  border: 0;
  background: #fff;
  transform: none;
}

.outline-button i::after {
  position: absolute;
  left: 8px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  content: "";
}

.result-section {
  position: relative;
  min-height: 1359px;
  padding: 140px 0;
  overflow: hidden;
  background: #fff;
}

.result-section::before {
  position: absolute;
  left: 62.34%;
  top: -693px;
  width: 1597px;
  height: 1416px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 241, 255, 0.92) 0%, rgba(214, 241, 255, 0.35) 42%, rgba(214, 241, 255, 0) 72%);
  content: "";
}

.result-section::after {
  position: absolute;
  left: -555px;
  bottom: 154px;
  color: rgba(214, 241, 255, 0.3);
  font-family: "IBM Plex Sans";
  font-size: 200px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -8px;
  text-shadow: 0 0 80px rgba(172, 229, 237, 0.2);
  white-space: nowrap;
  content: "DIGITAL LEADING ENTERPRISE";
}

.result-inner {
  position: relative;
  z-index: 1;
  width: var(--inner);
  margin: 0 auto;
}

.result-section .section-title {
  width: 100%;
}

.result-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 61px;
}

.result-visual {
  position: relative;
  width: 543px;
  height: 676px;
}

.result-visual::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 543px;
  height: 499px;
  background: url("../img/main/main-digital-object-left.png") center / contain no-repeat;
  content: "";
}

.result-visual::after {
  position: absolute;
  left: -225px;
  top: 310px;
  width: 384px;
  height: 366px;
  background: url("../img/main/main-digital-object-left.png") center / contain no-repeat;
  filter: blur(8.9px);
  opacity: 0.5;
  transform: rotate(164deg) scaleY(-1);
  content: "";
}

.result-list {
  display: flex;
  flex-direction: column;
  width: 493px;
  margin: 74px 0 0;
}

.result-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 144px;
  padding: 40px 0;
  border-bottom: 1px solid #788cff;
}

.result-list dt {
  color: #000;
  font-size: 24px;
  line-height: 1;
  font-weight: 600;
}

.result-list dd {
  margin: 0;
  color: #4b5fff;
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translateY(0) scale(1);
  transform-origin: right center;
  transition: filter 0.2s ease;
}

.result-list dd.is-counting {
  filter: drop-shadow(0 10px 18px rgba(75, 95, 255, 0.18));
}

.logo-marquee {
  width: 100%;
  height: 438px;
  padding: 120px 0;
  overflow: hidden;
  background: #fff;
}

.logo-track {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: max-content;
  min-width: 100%;
}

.logo-row {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: logo-roll-left 72s linear infinite;
}

.logo-row:first-child {
  transform: translateX(48px);
}

.logo-row:nth-child(2) {
  animation-name: logo-roll-right;
}

.logo-set {
  display: flex;
  gap: 28px;
}

.logo-track span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 221px;
  height: 85px;
  padding: 20px 48px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(24, 23, 28, 0.05);
}

.logo-track img {
  display: block;
  width: 125px;
  height: 45px;
  object-fit: contain;
}

@keyframes logo-roll-left {
  from {
    transform: translateX(48px);
  }

  to {
    transform: translateX(calc(-50% - 14px + 48px));
  }
}

@keyframes logo-roll-right {
  from {
    transform: translateX(calc(-50% - 14px));
  }

  to {
    transform: translateX(0);
  }
}

.review-section {
  position: relative;
  min-height: 1008px;
  padding: 200px var(--gutter);
  overflow: hidden;
  background: linear-gradient(180.9deg, #fff 1.37%, #768dff 98.49%);
}

.review-bg-word {
  position: absolute;
  left: -253px;
  bottom: 65px;
  color: rgba(255, 255, 255, 0.12);
  font-family: "IBM Plex Sans";
  font-size: 200px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.review-button {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 60px auto 0;
  width: 172px;
  min-width: 172px;
  height: 59px;
  padding: 20px 28px;
  border: 1px solid #fff;
  color: #fff;
  font-family: Paperlogy;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.45px;
  background: rgba(255, 255, 255, 0.3);
}

.review-button i {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 0;
  background: url("../img/main/main-button-arrow-right.png") center / 19px 19px no-repeat;
}

.review-button i::before,
.review-button i::after {
  display: none;
}

.outline-button:hover,
.outline-button:focus-visible,
.review-button:hover,
.review-button:focus-visible {
  color: #4b5fff;
  background: #fff;
}

.outline-button:hover i,
.outline-button:focus-visible i,
.review-button:hover i,
.review-button:focus-visible i {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  border-radius: 0;
  background: url("../img/main/main-button-arrow-right-blue.svg") center / 19px 19px no-repeat;
  transform: rotate(45deg);
}

.outline-button:hover i::before,
.outline-button:hover i::after,
.outline-button:focus-visible i::before,
.outline-button:focus-visible i::after,
.review-button:hover i::before,
.review-button:hover i::after,
.review-button:focus-visible i::before,
.review-button:focus-visible i::after {
  display: none;
}

.review-list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  width: var(--inner);
  margin: 60px auto 0;
}

.review-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
  height: 325px;
  padding: 28px;
  border: 1px solid #fff;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.review-card.lower {
  margin-top: 40px;
}

.review-quote {
  display: flex;
  gap: 2px;
  width: 241px;
  max-width: 100%;
  height: 28.12px;
  pointer-events: none;
}

.review-quote img {
  flex: 0 0 13.95px;
  width: 13.95px;
  height: 28.12px;
  border-radius: 0;
  object-fit: fill;
}

.review-quote.is-close {
  justify-content: flex-end;
  margin-top: auto;
}

.review-card p {
  /* margin: 36px 0 0; */ /* hgw20260729 */
  color: #18171c;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.36px;
  overflow: hidden; /* hgw20260729 */
  height: 130px; /* hgw20260729 */
  display: block; /* hgw20260729 */
  flex: 0 0 auto; /* hgw20260729 */
}

.review-card div {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: auto; /* hgw20260729 */
}

.review-card div img {
  width: 57px;
  height: 57px;
  border-radius: 50%;
  object-fit: cover;
}

.review-card div span {
  color: #18171c;
  font-size: 17px; /* hgw20260729 */
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.36px;
}

.benefit-section {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 140px var(--gutter);
  background: #fff;
}

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: 140px;
  width: var(--inner);
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 84px;
}

.benefit-item.reverse {
  flex-direction: row-reverse;
}

.benefit-item img {
  width: 640px;
  height: 417px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 0 40px rgba(165, 201, 255, 0.4);
}

.benefit-item div {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 507px;
}

.benefit-item span {
  color: #8585ff;
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.36px;
}

.benefit-item h3 {
  margin: 0;
  color: #18171c;
  font-size: 36px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.9px;
}

.benefit-item p {
  margin: 12px 0 0;
  color: #18171c;
  font-size: 28px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.7px;
}

.main-footer {
  margin-top: 0;
  padding: 80px var(--gutter) 62px;
  border-radius: 160px 160px 0 0;
  background: #788cff;
}

.main-footer .footer-inner {
  width: var(--inner);
  margin: 0 auto;
}

.main-footer .footer-top {
  display: flex;
  align-items: center;
  gap: 82px;
}

.main-footer .footer-brand {
  display: flex;
  align-items: center;
  gap: 22px;
}

.main-footer .footer-brand img:first-child {
  width: 242px;
}

.main-footer .footer-brand img:last-of-type {
  width: 127px;
}

.main-footer .footer-links {
  display: flex;
  gap: 32px;
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.045px;
}

.main-footer .footer-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 29px;
}

.main-footer address {
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.045px;
}

.footer-address-row {
  display: flex;
  align-items: center;
  gap: 35px;
}

.footer-address-row i {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.main-footer .footer-sns {
  display: flex;
  align-items: center;
  gap: 19px;
}

.main-footer .footer-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
}

.main-footer .footer-sns img {
  max-width: 34px;
  max-height: 34px;
}

@media (max-width: 1240px) {
  .main-gnb {
    height: 72px;
    padding: 16px 20px;
  }

  .main-nav {
    display: none !important;
  }

  .main-header-actions {
    display: none;
  }

  .main-nav .nav-item > a {
    padding: 0 18px;
  }

  .korcham-logo {
    width: 150px;
    height: 27px;
  }

  .dlca-logo {
    width: 88px;
    height: 33px;
  }

  body.menu-open .main-gnb {
    height: 72px;
    padding: 16px 20px;
  }

  body.menu-open .main-brand {
    gap: 14px;
  }

  body.menu-open .main-brand .korcham-logo {
    width: 150px;
    height: 27px;
  }

  body.menu-open .main-brand .brand-divider {
    width: auto;
    height: auto;
    overflow: visible;
    color: #fff;
    font-size: 16px;
    background: transparent;
  }

  body.menu-open .main-brand .dlca-logo {
    width: 88px;
    height: 33px;
  }

  .main-gnb .menu-btn {
    display: block !important;
    position: absolute;
    right: 20px;
    top: 24px;
    z-index: 3;
    flex: 0 0 var(--mobile-menu-btn-size);
    width: var(--mobile-menu-btn-size);
    height: var(--mobile-menu-btn-size);
    margin-left: auto;
    border-radius: 50%;
    background: #8585ff;
    opacity: 0;
    pointer-events: none;
  }

  .main-gnb .menu-btn i,
  .main-gnb .menu-btn::before,
  .main-gnb .menu-btn::after {
    left: var(--mobile-menu-line-left);
    width: var(--mobile-menu-line-width);
    height: var(--mobile-menu-line-height);
    border-radius: 3px;
    background: #fff;
  }

  .main-gnb .menu-btn::before {
    top: var(--mobile-menu-line-top-start);
  }

  .main-gnb .menu-btn i {
    top: var(--mobile-menu-line-top-mid);
  }

  .main-gnb .menu-btn::after {
    top: var(--mobile-menu-line-top-end);
  }

  .main-mobile-menu-btn {
    position: absolute;
    right: 20px;
    top: 24px;
    z-index: 4;
    display: block;
    width: var(--mobile-menu-btn-size);
    height: var(--mobile-menu-btn-size);
    border-radius: 50%;
    background: #8585ff;
  }

  .main-mobile-menu-btn i,
  .main-mobile-menu-btn::before,
  .main-mobile-menu-btn::after {
    position: absolute;
    left: var(--mobile-menu-line-left);
    width: var(--mobile-menu-line-width);
    height: var(--mobile-menu-line-height);
    border-radius: 3px;
    background: #fff;
    content: "";
  }

  .main-mobile-menu-btn::before {
    top: var(--mobile-menu-line-top-start);
  }

  .main-mobile-menu-btn i {
    top: var(--mobile-menu-line-top-mid);
  }

  .main-mobile-menu-btn::after {
    top: var(--mobile-menu-line-top-end);
  }

  body.menu-open .main-mobile-menu-btn {
    border-radius: 0;
    background: url("../img/main/main-mobile-menu-close.svg") center / var(--mobile-menu-open-close-icon) var(--mobile-menu-open-close-icon) no-repeat;
  }

  body.menu-open .main-mobile-menu-btn i,
  body.menu-open .main-mobile-menu-btn::before,
  body.menu-open .main-mobile-menu-btn::after {
    display: none;
  }

  .hero-inner {
    padding-top: 675px;
  }

  .category-carousel {
    width: 100%;
    gap: 16px;
  }

  .category-track {
    width: 100%;
    max-width: none;
  }

  .benefit-item,
  .benefit-item.reverse {
    gap: 48px;
  }

  .review-list {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .review-list::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    flex: 0 0 297px;
    height: 325px;
  }

  .review-quote {
    flex: 0 0 auto;
  }

  .review-quote.is-close {
    margin-top: 0;
  }

  .review-card p {
    /* display: block; */ /* hgw20260729 */
    /* flex: 0 0 auto; */ /* hgw20260729 */
    /* margin-bottom: 12px; */ /* hgw20260729 */
    /* overflow: visible; */ /* hgw20260729 */
  }

  .review-card div {
    flex: 0 0 auto;
    margin-top: auto;
  }
}

@media (max-width: 1024px) {
  .main-gnb {
    height: 72px;
    padding: 16px 20px;
  }

  .main-header-actions {
    display: none;
  }

  .korcham-logo {
    width: 150px;
    height: 27px;
  }

  .dlca-logo {
    width: 88px;
    height: 33px;
  }

  .hero-bg {
    height: 760px;
  }

  .main-hero::before {
    height: 760px;
  }

  .hero-curve {
    top: clamp(526px, calc(484px + 5.47vw), 540px);
    width: clamp(1434px, calc(-264px + 221.09vw), 2000px);
    height: clamp(900px, calc(3208px - 225.39vw), 1477px);
  }

  .hero-inner {
    padding-top: clamp(584px, calc(505.58px + 10.2vw), 610px);
  }

  .search-section {
    min-height: 620px;
    padding: 120px var(--gutter);
  }

  .course-search {
    width: 100%;
  }

  .category-carousel {
    gap: 16px;
  }

  .category-track {
    width: 100%;
    max-width: none;
  }

  .result-body,
  .benefit-item,
  .benefit-item.reverse {
    flex-direction: column;
    align-items: flex-start;
  }

  .result-visual,
  .result-list,
  .benefit-item img,
  .benefit-item div {
    width: 100%;
  }

  .result-section {
    min-height: clamp(491px, calc(325.52px + 42.43vw), 760px);
    padding: clamp(60px, calc(35.39px + 6.31vw), 100px) 0 0;
    background: #fff;
  }

  .result-section::before {
    left: 44%;
    top: clamp(-300px, calc(-203.09px + -9.46vw), -240px);
    width: clamp(620px, calc(373.85px + 63.08vw), 1020px);
    height: clamp(550px, calc(334.7px + 55.2vw), 900px);
  }

  .result-section::after {
    left: clamp(-360px, calc(-227.34px + -12.95vw), -278px);
    bottom: clamp(90px, calc(52.46px + 9.63vw), 151px);
    font-size: clamp(72px, calc(23.97px + 12.31vw), 150px);
    letter-spacing: clamp(-6px, calc(-1.96px + -0.39vw), -2.88px);
  }

  .result-inner {
    width: min(calc(100vw - 40px), clamp(350px, calc(97.6px + 64.72vw), 760px));
    height: clamp(371px, calc(217.77px + 39.29vw), 620px);
  }

  .result-section .section-title {
    gap: clamp(14px, calc(7.85px + 1.58vw), 24px);
  }

  .result-section .section-title p {
    font-size: clamp(14px, calc(11.54px + 0.63vw), 18px);
    text-align: left;
  }

  .result-body {
    position: relative;
    display: block;
    height: clamp(216px, calc(90.43px + 32.2vw), 420px);
    margin-top: clamp(14px, calc(7.85px + 1.58vw), 24px);
    top: clamp(-20px, calc(-13.85px + -0.63vw), -16px);
  }

  .result-visual {
    position: absolute;
    left: clamp(-28px, calc(-6.99px + -2.05vw), -15px);
    top: clamp(14px, calc(7.85px + 1.58vw), 24px);
    width: clamp(150px, calc(57.74px + 23.66vw), 300px);
    height: clamp(210px, calc(80.84px + 33.12vw), 420px);
  }

  .result-visual::before {
    left: 0;
    top: 0;
    width: clamp(108px, calc(41.55px + 17.04vw), 216px);
    height: clamp(99.18px, calc(38.14px + 15.65vw), 198.4px);
  }

  .result-visual::after {
    left: clamp(-124px, calc(-23.14px + -9.85vw), -62px);
    top: clamp(86px, calc(33.06px + 13.57vw), 172px);
    width: clamp(106px, calc(40.78px + 16.72vw), 212px);
    height: clamp(101px, calc(38.86px + 15.93vw), 202px);
    background: url("../img/main/main-digital-object-left.png") center / contain no-repeat;
    filter: blur(3px);
    opacity: 0.5;
    transform: rotate(164deg) scaleY(-1);
  }

  .result-list {
    width: clamp(245px, calc(131.15px + 29.19vw), 430px);
    margin: 0 0 0 clamp(105px, calc(15.77px + 22.88vw), 250px);
  }

  .result-list div {
    height: clamp(54px, calc(33.09px + 5.36vw), 88px);
    padding: 0;
    border-bottom-color: #788cff;
  }

  .result-list dt {
    font-size: clamp(12px, calc(8.31px + 0.95vw), 18px);
    letter-spacing: clamp(-0.36px, calc(-0.17px + -0.02vw), -0.24px);
  }

  .result-list dd {
    font-size: clamp(30px, calc(16.47px + 3.47vw), 52px);
  }

  .benefit-item img {
    height: auto;
    aspect-ratio: 640 / 417;
  }

  .preview-window {
    width: 100vw;
    height: auto;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .preview-window::-webkit-scrollbar {
    display: none;
  }

  .preview-track {
    position: relative;
    display: flex;
    gap: 15px;
    width: max-content;
    height: auto;
    cursor: auto;
    touch-action: auto;
  }

  .preview-card {
    position: relative;
    left: auto;
    top: auto;
    z-index: auto;
    flex: 0 0 var(--course-card-w);
    height: var(--course-card-h);
    min-height: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .preview-card.is-active,
  .preview-card.is-prev,
  .preview-card.is-next,
  .preview-card.is-prev-far,
  .preview-card.is-next-far,
  .preview-card.is-prev-out,
  .preview-card.is-next-out {
    z-index: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 14px 42px rgba(75, 95, 255, 0.14);
  }

  .review-list {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .review-list::-webkit-scrollbar {
    display: none;
  }

  .review-card {
    flex: 0 0 297px;
  }

  .main-footer {
    border-radius: 80px 80px 0 0;
  }

  .main-footer .footer-top,
  .main-footer .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .main-gnb {
    height: 108px;
    padding: 24px 20px;
  }

  .main-page {
    --course-active-y: 0px;
  }

  .main-brand {
    gap: 8px;
  }

  .brand-divider {
    width: 1px;
    height: 9px;
    overflow: hidden;
    color: transparent;
    background: rgba(255, 255, 255, 0.9);
  }

  .korcham-logo {
    width: 121px;
    height: 22px;
  }

  .dlca-logo {
    width: 58px;
    height: 22px;
  }

  body.menu-open .main-gnb {
    height: 108px;
    padding: 24px 20px;
  }

  body.menu-open .main-brand {
    gap: 8px;
  }

  body.menu-open .main-brand .korcham-logo {
    width: 121px;
    height: 22px;
  }

  body.menu-open .main-brand .brand-divider {
    width: 1px;
    height: 9px;
    overflow: hidden;
    color: transparent;
    font-size: 16px;
    background: rgba(255, 255, 255, 0.9);
  }

  body.menu-open .main-brand .dlca-logo {
    width: 58px;
    height: 22px;
  }

  .main-gnb .menu-btn {
    display: block !important;
    position: absolute;
    right: 20px;
    top: 24px;
    z-index: 3;
    flex: 0 0 var(--mobile-menu-btn-size);
    width: var(--mobile-menu-btn-size);
    height: var(--mobile-menu-btn-size);
    margin-left: auto;
    border-radius: 50%;
    background: #8585ff;
    opacity: 0;
    pointer-events: none;
  }

  .main-gnb .menu-btn i,
  .main-gnb .menu-btn::before,
  .main-gnb .menu-btn::after {
    left: var(--mobile-menu-line-left);
    width: var(--mobile-menu-line-width);
    height: var(--mobile-menu-line-height);
    border-radius: 3px;
    background: #fff;
  }

  .main-gnb .menu-btn::before {
    top: var(--mobile-menu-line-top-start);
  }

  .main-gnb .menu-btn i {
    top: var(--mobile-menu-line-top-mid);
  }

  .main-gnb .menu-btn::after {
    top: var(--mobile-menu-line-top-end);
  }

  .main-mobile-menu-btn {
    position: absolute;
    right: 20px;
    top: 24px;
    z-index: 4;
    display: block;
    width: var(--mobile-menu-btn-size);
    height: var(--mobile-menu-btn-size);
    border-radius: 50%;
    background: #8585ff;
  }

  .main-mobile-menu-btn i,
  .main-mobile-menu-btn::before,
  .main-mobile-menu-btn::after {
    position: absolute;
    left: var(--mobile-menu-line-left);
    width: var(--mobile-menu-line-width);
    height: var(--mobile-menu-line-height);
    border-radius: 3px;
    background: #fff;
    content: "";
  }

  .main-mobile-menu-btn::before {
    top: var(--mobile-menu-line-top-start);
  }

  .main-mobile-menu-btn i {
    top: var(--mobile-menu-line-top-mid);
  }

  .main-mobile-menu-btn::after {
    top: var(--mobile-menu-line-top-end);
  }

  body.menu-open .main-mobile-menu-btn {
    border-radius: 0;
    background: url("../img/main/main-mobile-menu-close.svg") center / var(--mobile-menu-open-close-icon) var(--mobile-menu-open-close-icon) no-repeat;
  }

  body.menu-open .main-mobile-menu-btn i,
  body.menu-open .main-mobile-menu-btn::before,
  body.menu-open .main-mobile-menu-btn::after {
    display: none;
  }

  .hero-bg {
    left: 50%;
    width: 1499px;
    height: 843px;
    transform: translateX(-50%);
  }

  .main-hero::before {
    left: 50%;
    width: 1499px;
    height: 843px;
    transform: translateX(-50%);
  }

  .hero-curve {
    top: 526px;
    width: 1434px;
    height: 1477px;
  }

  .hero-inner {
    width: 270px;
    padding-top: 583px;
  }

  .hero-inner h1 {
    width: 270px;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -0.48px;
  }

  .hero-inner h1 span {
    white-space: normal;
  }

  .scroll-cue {
    gap: 6px;
    bottom: 2.375rem;
    font-size: 14px;
  }

  .search-section {
    min-height: 277px;
    margin-top: -2px;
    padding: 40px 20px 60px;
  }

  .search-section h2,
  .section-title h2 {
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.48px;
    text-align: center;
  }

  .course-search {
    width: min(728px, calc(100vw - 40px));
    height: 45px;
    border-width: 1px;
  }

  .region-select {
    width: 71px;
    padding: 0 24px 0 12px;
    font-size: 14px;
    letter-spacing: -0.28px;
  }

  .region-select::after {
    right: 13px;
    width: 9px;
    height: 6px;
  }

  .course-search input {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .search-submit {
    width: 29px;
    height: 29px;
    margin-right: 8px;
    background-position: 8.5px 8px;
    background-size: 12.5px 13.5px;
  }

  .search-submit::before {
    display: none;
  }

  .search-submit::after {
    display: none;
  }

  .region-menu {
    left: 0;
    top: 52px;
    width: 81px;
    height: 105px;
    border-radius: 12px;
  }

  .region-menu button {
    height: 35px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 19px;
    letter-spacing: -0.24px;
  }

  .region-menu button.is-active {
    text-underline-offset: 4px;
  }

  .category-carousel {
    width: min(728px, calc(100vw - 40px));
    gap: 13px;
  }

  .carousel-arrow {
    flex-basis: 32px;
    width: 32px;
    height: 32px;
  }

  .carousel-arrow::before {
    width: 7px;
    height: 12px;
    margin: 10px auto;
    background-size: 7px 12px;
  }

  .category-track {
    gap: 14px;
    width: 100%;
    max-width: none;
  }

  .main-category {
    flex-basis: 77px;
    gap: 6px;
    height: 58px;
    padding: 8px 1px; /* hgw20260729 */
    border-radius: 12px;
  }

  .main-category img {
    width: 24px;
    height: 24px;
  }

  .main-category b {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .review-section {
    min-height: 546px;
    padding: 60px 0 100px;
  }

  .benefit-section {
    gap: 34px;
    padding: 60px 20px;
  }

  .section-title,
  .benefit-list {
    width: min(350px, calc(100vw - 40px));
    max-width: 100%;
  }

  .section-title > p {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.28px;
    text-align: center;
  }

  .section-title.centered {
    gap: 12px;
  }

  .section-title.centered > p:first-child {
    min-width: 144px;
    height: 45px;
    padding: 10px 12px;
    border-radius: 30px;
    font-size: 12px;
    line-height: 25px;
    letter-spacing: -0.24px;
  }

  .section-title.centered > p:first-child::after {
    bottom: -8px;
    width: 18px;
    height: 13px;
  }

  .preview-window {
    width: 100vw;
    height: auto;
    margin-left: calc(50% - 50vw);
    margin-top: 36px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .preview-window::-webkit-scrollbar {
    display: none;
  }

  .preview-track {
    position: relative;
    display: flex;
    gap: 15px;
    width: max-content;
    height: auto;
    cursor: auto;
    touch-action: auto;
  }

  .preview-card-body {
    gap: 4px;
    margin-top: 8px;
  }

  .preview-card {
    position: relative;
    left: auto;
    top: auto;
    z-index: auto;
    flex: 0 0 var(--course-card-w);
    height: var(--course-card-h);
    min-height: 0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .preview-card.is-active,
  .preview-card.is-prev,
  .preview-card.is-next,
  .preview-card.is-prev-far,
  .preview-card.is-next-far,
  .preview-card.is-prev-out,
  .preview-card.is-next-out {
    z-index: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: 0 14px 42px rgba(75, 95, 255, 0.14);
  }

  .preview-card-body h3 {
    height: 21px;
    line-height: 1.3;
  }

  .preview-card-body p {
    height: 54px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .main-button {
    gap: 10px;
    min-width: 117px;
    height: 43px;
    padding: 0 20px;
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .main-button i {
    width: 14px;
    height: 14px;
  }

  .main-button i::before {
    width: 5px;
    height: 5px;
    margin: 4px 0 0 4px;
    border-width: 1px;
  }

  .outline-button {
    width: auto;
    min-width: 151px;
    height: 43px;
    padding: 0 20px;
    margin-top: 36px;
  }

  .outline-button i {
    width: 14px;
    height: 14px;
  }

  .outline-button i::before {
    left: 1px;
    top: 7px;
    width: 11px;
    height: 1px;
    margin: 0;
  }

  .outline-button i::after {
    left: 6px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-width: 1px;
  }

  .logo-marquee {
    height: 170px;
    margin-top: 0;
    padding: 40px 0 0;
  }

  .logo-track {
    gap: 12px;
    width: max-content;
    min-width: 0;
    padding-bottom: 0;
    transform: none;
  }

  .logo-row {
    gap: 16px;
  }

  .logo-set {
    gap: 16px;
  }

  .logo-row:first-child {
    transform: translateX(28px);
    animation-name: logo-roll-left-mobile;
  }

  .logo-row:nth-child(2) {
    animation-name: logo-roll-right-mobile;
  }

  .logo-track span {
    width: 127px;
    height: 39px;
    padding: 5px 18px;
    border-radius: 8px;
  }

  .logo-track img {
    width: 91px;
    height: 29px;
  }

  @keyframes logo-roll-left-mobile {
    from {
      transform: translateX(28px);
    }

    to {
      transform: translateX(calc(-50% - 8px + 28px));
    }
  }

  @keyframes logo-roll-right-mobile {
    from {
      transform: translateX(calc(-50% - 8px));
    }

    to {
      transform: translateX(0);
    }
  }

  .review-bg-word {
    display: none;
  }

  .review-section .section-title {
    margin: 0 auto;
    width: 201px;
  }

  .review-section .section-title h2 {
    width: 100%;
    text-align: center;
  }

  .review-button {
    margin: 30px auto 0;
    width: 172px;
    min-width: 172px;
    height: 59px;
    padding: 20px 28px;
    font-size: 18px;
    letter-spacing: -0.45px;
  }

  .review-button i {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    border-radius: 0;
    background: url("../img/main/main-button-arrow-right.png") center / 19px 19px no-repeat;
  }

  .review-button i::before,
  .review-button i::after {
    display: none;
  }

  .review-list {
    --review-card-w: clamp(171px, calc(41px + 33.33vw), 297px);
    --review-card-h: clamp(244px, calc(160.43px + 21.43vw), 325px);
    --review-card-pad: clamp(20px, calc(11.75px + 2.12vw), 28px);
    --review-card-radius: clamp(18px, calc(5.63px + 3.17vw), 30px);
    --review-quote-w: clamp(131px, calc(17.41px + 29.13vw), 241px);
    --review-quote-h: clamp(15.3px, calc(2.07px + 3.39vw), 28.12px);
    --review-quote-img-w: clamp(7.6px, calc(1.05px + 1.68vw), 13.95px);
    --review-card-text: clamp(12px, calc(5.81px + 1.59vw), 17px); /* hgw20260729 */
    --review-avatar-size: clamp(25px, calc(-8.02px + 8.47vw), 57px);
    gap: 18px;
    width: 100vw;
    margin: 30px 0 0 calc(50% - 50vw);
    padding: 0 20px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 20px;
  }

  .review-card {
    flex: 0 0 var(--review-card-w);
    height: var(--review-card-h);
    padding: var(--review-card-pad);
    border-radius: var(--review-card-radius);
  }

  .review-card.lower {
    margin-top: 30px;
  }

  .review-quote {
    gap: 1px;
    flex: 0 0 auto;
    width: var(--review-quote-w);
    height: var(--review-quote-h);
  }

  .review-quote img {
    flex-basis: var(--review-quote-img-w);
    width: var(--review-quote-img-w);
    height: var(--review-quote-h);
  }

  .review-quote.is-close {
    margin-top: 0;
  }

  .review-card p {
    /* display: block; */ /* hgw20260729 */
    /* flex: 0 0 auto; */ /* hgw20260729 */
    /* margin: 20px 0 12px; */ /* hgw20260729 */
    /* overflow: visible; */ /* hgw20260729 */
    font-size: var(--review-card-text);
    line-height: 1.5;
    letter-spacing: -0.24px;
    /* text-align: center; */ /* hgw20260729 */
  }

  .review-card div {
    flex: 0 0 auto;
    gap: 7px;
    margin-top: auto;
  }

  .review-card div img {
    width: var(--review-avatar-size);
    height: var(--review-avatar-size);
  }

  .review-card div span {
    font-size: var(--review-card-text);
    letter-spacing: -0.24px;
  }

  .benefit-list {
    gap: 30px;
    width: calc(100vw - 40px);
    margin: 0;
  }

  .benefit-section .section-title {
    align-items: flex-start;
    width: 229px;
    gap: 14px;
    text-align: left;
  }

  .benefit-section .section-title h2,
  .benefit-section .section-title p {
    text-align: left;
  }

  .benefit-item,
  .benefit-item.reverse {
    height: auto;
    gap: 12px;
    overflow: visible;
  }

  .benefit-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 350 / 228;
    border-radius: 12px;
  }

  .benefit-item div {
    gap: 4px;
    width: 100%;
  }

  .benefit-item span {
    font-size: 12px;
    letter-spacing: -0.24px;
  }

  .benefit-item h3 {
    font-size: 18px;
    letter-spacing: -0.36px;
  }

  .benefit-item p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1;
    letter-spacing: -0.24px;
  }

  .benefit-section .section-title p br {
    display: none;
  }

  .main-footer {
    padding: 40px 20px;
    border-radius: 50px 50px 0 0;
  }

  .main-footer .footer-inner {
    width: 350px;
    max-width: 100%;
  }

  .main-footer .footer-top {
    gap: 16px;
  }

  .main-footer .footer-brand {
    gap: 11px;
  }

  .main-footer .footer-brand img:first-child {
    width: 124px;
  }

  .main-footer .footer-brand img:last-of-type {
    width: 58px;
  }

  .main-footer .footer-links {
    gap: 25px;
    font-size: 14px;
    letter-spacing: -0.035px;
  }

  .main-footer address {
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.03px;
  }

  .main-footer .footer-bottom {
    gap: 26px;
    margin-top: 20px;
  }

  .footer-address-row {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .footer-address-row:nth-of-type(2) {
    order: 3;
  }

  .footer-address-row:nth-of-type(3) {
    order: 2;
  }

  .footer-address-row i {
    display: block;
  }

  .main-footer .footer-sns {
    gap: 18px;
  }

  .main-footer .footer-sns a:first-child,
  .main-footer .footer-sns a:first-child img {
    width: 26px;
    height: 26px;
  }

  .main-footer .footer-sns a:nth-child(2),
  .main-footer .footer-sns a:nth-child(2) img {
    width: 26px;
    height: 26px;
  }

  .main-footer .footer-sns a:last-child,
  .main-footer .footer-sns a:last-child img {
    width: 27px;
    height: 19px;
  }

  body .wrap .main-footer.footer.footer.footer {
    min-height: 298px;
    height: 298px;
    padding: 40px 20px;
  }

  body .wrap .main-footer.footer.footer.footer .footer-inner.footer-inner.footer-inner {
    width: 350px;
    height: 218px;
    gap: 20px;
  }

  body .wrap .main-footer.footer.footer.footer .footer-bottom.footer-bottom.footer-bottom {
    flex-direction: column;
    gap: 56px;
    align-items: flex-start;
  }

  body .wrap .main-footer.footer.footer.footer .footer-bottom.footer-bottom.footer-bottom address {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 0;
    width: 350px;
    height: 60px;
  }

  body .wrap .main-footer.footer.footer.footer .footer-address-row {
    width: 350px;
    height: 16px;
  }

  body .wrap .main-footer.footer.footer.footer .footer-bottom.footer-bottom.footer-bottom address .footer-address-row span {
    height: 16px;
    line-height: 1.3;
  }

  body .wrap .main-footer.footer.footer.footer .footer-address-row:nth-child(2) span:first-child {
    flex: 0 0 167px;
    width: 167px;
  }

  body .wrap .main-footer.footer.footer.footer .footer-address-row:nth-child(3) span:first-child {
    flex: 0 0 114px;
    width: 114px;
  }

  body .wrap .main-footer.footer.footer.footer .footer-address-row:nth-child(2) i,
  body .wrap .main-footer.footer.footer.footer .footer-address-row:nth-child(3) i {
    flex: 0 0 1px;
    width: 1px;
    height: 14px;
    margin: 1px 6px 0;
  }

  body .wrap .main-footer.footer.footer.footer .footer-address-row:nth-child(2) i + span,
  body .wrap .main-footer.footer.footer.footer .footer-address-row:nth-child(3) i + span {
    flex: 0 0 171px;
    width: 171px;
  }
}

.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: #4b5fff;
}

@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;
  }
}