@charset "UTF-8";
/*
 * S-Core Dream
 * base/_font.scss 에는 Pretendard·gong 만 있어서 이 페이지에서 직접 선언한다.
 * ('선착순!' 말풍선 한 곳에만 쓰므로 Medium(5) 한 종만 포함)
 * 사이트 전역에서 쓰게 되면 scss/base/_font.scss 로 옮기면 된다.
 */
@font-face {
  font-family: "S-Core Dream";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../font/scoreDream5-Medium.woff2") format("woff2"), url("../font/scoreDream5-Medium.woff") format("woff");
}
/*
 * 실력의 KEY 학습단 모집 (데스크탑)
 * - Figma 1920 캔버스 / 콘텐츠 960 (유의사항·혜택은 804)
 * - base 의 토큰(--margins, --max-width)과 리셋을 그대로 쓰고,
 *   이 페이지 고유 값만 --ks- 접두사로 선언한다
 * - 1rem = 10px (base 의 html { font-size: 62.5% }, 데스크탑은 분기 없음)
 * - 배경은 화면 끝까지 깔고 콘텐츠만 가운데로 제한한다
 */
/*
 * 스티키 배너가 .event 바깥(.main 직속)에 있으므로
 * 토큰은 :root 에 선언한다. (이 파일은 학습단 페이지에서만 로드됨)
 */
:root {
  --ks-primary: #6078ef;
  --ks-navy: #1d2d60;
  --ks-navy-deep: #04013b;
  --ks-ink: #2b2138;
  --ks-yellow: #fae931;
  --ks-red: #ea525e;
  --ks-pale: #ebf0ff;
  --ks-pale-bg: #f3f6ff;
  --ks-gray: #929292;
  --ks-line: #dfdfdf;
  --ks-nav-off: #454f71;
  --ks-nav-line: #454f71;
  --ks-notice-bg: #535a71;
  --ks-notice-txt: #e4e5e8;
  --ks-notice-line: #78809a;
  --ks-gift-bg: #f2f2f2;
  /* 교재 카드가 쓰는 폭. 이미지 460 + 여백 40 + 정보표 460 */
  --ks-contain-width: 96rem;
  /* 유의사항·혜택 안내처럼 글줄이 긴 영역은 더 좁게 잡는다 */
  --ks-narrow-width: 80.4rem;
  /* 고정 내비게이션 높이. ScrollNav 가 실측값(px)으로 덮어쓰므로
     이 값은 JS 로딩 전/비활성 시의 대략치일 뿐, 정확할 필요가 없다 */
  --ks-nav-height: 8.3rem;
  /* CDN 이 선언하는 패밀리명은 'NanumSquareNeo' (붙여쓰기).
     400/700/800/900 이 모두 들어 있어 디자인에 필요한 굵기를 전부 커버한다 */
  --ks-font: "NanumSquareNeo", "Pretendard", sans-serif;
  --ks-font-score: "S-Core Dream", "Pretendard", sans-serif;
}

/*
 * base 의 .main 은 상하 여백(10rem / 20rem)을 갖는데 이 페이지는 인트로가
 * 화면 맨 위에 붙어야 한다. 같은 저장소의 index.scss · oldDesign.scss 도
 * 같은 방식으로 페이지 스타일시트에서 이 여백을 재설정한다.
 */
.main {
  padding: 0;
}

.event {
  font-family: var(--ks-font);
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------
 * 인트로
 * ------------------------------------------------------------------ */
/*
 * 격자 배경 · 장식 블롭 2개 · 반짝임 · 전구 · 제목을 각각 레이어로 쌓는다.
 * 블롭은 Figma 처럼 화면 밖으로 흘러나가므로 overflow 로 잘라 준다.
 */
.event-intro {
  /* 격자 배경은 화면 끝까지, 높이는 Figma 702 */
  overflow: hidden;
  position: relative;
  height: 70.2rem;
  background: url(../image/intro__bg.png) no-repeat center top/cover;
  /* 반짝임 */
  /* 전구 (그림자 여백이 포함된 234 × 298 원본) */
}
.event-intro__contain {
  position: relative;
  width: var(--ks-contain-width);
  height: 100%;
  margin: 0 auto;
}
.event-intro__deco {
  position: absolute;
  /* 장식이라 클릭을 막지 않는다 */
  pointer-events: none;
  /* 좌표는 모두 __contain(960) 왼쪽 끝 기준이다.
     Figma 1920 캔버스에서 콘텐츠가 x 480 부터 시작하므로 그만큼을 뺐다.
     화면이 넓어지면 블롭이 자연스럽게 화면 밖으로 더 흘러나간다 */
}
.event-intro__deco--top {
  top: -16.8rem;
  left: 70.8rem;
  width: 139.1rem;
}
.event-intro__deco--bottom {
  top: 31rem;
  left: -81.8rem;
  width: 89.8rem;
}
.event-intro__pop {
  z-index: 1;
  position: absolute;
  top: 16.2rem;
  left: 0.4rem;
  width: 14.7rem;
  pointer-events: none;
  animation: ks-intro-twinkle 2.6s ease-in-out infinite;
}
.event-intro__bulb {
  z-index: 1;
  position: absolute;
  /* 원본 PNG 는 그림자까지 담아 234 × 298 이고, 그 왼쪽 끝이
     Figma x 1266.14 에 해당한다 (전구 자체는 1279 부터) */
  top: 35.1rem;
  left: 78.6rem;
  width: 23.4rem;
  pointer-events: none;
  animation: ks-intro-float 3.4s ease-in-out infinite;
}
.event-intro__ttl {
  z-index: 1;
  position: absolute;
  top: 12rem;
  left: 50%;
  width: 60rem;
  transform: translateX(-50%);
  animation: ks-intro-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.event-intro__ttl img {
  width: 100%;
}

/* 반짝임 : 커졌다 작아지며 살짝 회전 */
@keyframes ks-intro-twinkle {
  0%, 100% {
    opacity: 0.75;
    transform: scale(0.82) rotate(-8deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(8deg);
  }
}
/* 전구 : 천천히 위아래로 떠다닌다 */
@keyframes ks-intro-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.6rem);
  }
}
/* 제목 : 로드 시 한 번만 떠오른다 */
@keyframes ks-intro-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 2.4rem);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* ------------------------------------------------------------------
 * 상단 내비게이션 (스크롤 시 상단 고정 / 클릭 시 해당 교재로 스크롤 이동)
 * ------------------------------------------------------------------ */
.event-course-nav {
  z-index: 1;
  position: sticky;
  top: 16.8rem;
  padding: 2.4rem 0;
  background: var(--ks-navy);
  /*
   * 구분선.
   * 가상요소로 띄우면 글자 사이의 정중앙을 직접 계산해야 하는데,
   * 글자 수가 바뀔 때마다 그 값을 고쳐야 해서 어긋나기 쉽다.
   * 링크와 같은 플렉스 항목으로 두면 space-between 이 간격을 똑같이 나눠
   * 구분선이 저절로 두 글자의 가운데에 놓인다. (Figma 도 도형으로 그려져 있다)
   */
}
.event-course-nav__contain {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 74rem;
  margin: 0 auto;
}
.event-course-nav__link {
  position: relative;
  font-weight: 700;
  font-size: 3.2rem;
  color: var(--ks-nav-off);
  transition: color 0.2s linear;
}
.event-course-nav__link--active {
  color: #fff;
}
.event-course-nav__divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: 0.1rem;
  background: var(--ks-nav-line);
}

/* ------------------------------------------------------------------
 * 교재 섹션 / 카드
 * 4개 섹션이 모두 노출되며 배경이 흰색 ↔ 연한 파랑으로 교차된다.
 * ------------------------------------------------------------------ */
.event-course {
  /* 마감 도장의 기준. --closed 가 아닌 평소에도 걸어 두어야
     모디파이어를 빠뜨렸을 때 도장이 문서 최상단으로 튀지 않는다 */
  position: relative;
  /* 고정된 내비게이션에 가리지 않도록 앵커 이동 지점을 내려 준다 */
  scroll-margin-top: var(--ks-nav-height);
  background: #fff;
  /*
   * 마감.
   * 딤과 도장을 모두 가상요소로 그려서 이 클래스 하나만 붙였다 떼면 된다.
   * 마크업에 도장을 따로 넣으면 클래스와 손으로 맞춰야 해서 어긋나기 쉽다.
   * 딤은 표시용이라 pointer-events 를 넘겨, 교재 구매 링크와
   * 질문과 답변 아코디언은 마감 후에도 그대로 쓸 수 있다.
   */
}
.event-course:nth-child(even) {
  background: var(--ks-pale-bg);
}
.event-course--closed {
  /* 딤 */
  /* 마감 도장 */
}
.event-course--closed::after {
  position: absolute;
  content: "";
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.event-course--closed::before {
  position: absolute;
  content: "";
  z-index: 2;
  top: 42%;
  left: 50%;
  width: 36rem;
  background: url(../image/stamp--closed.svg) no-repeat center/contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  aspect-ratio: 1/1;
}

.event-card {
  display: flex;
  flex-direction: column;
  /* 간격은 '교재 소개 / 2단 본문 / 질문과 답변' 세 덩어리 사이에만 둔다 */
  gap: 4rem;
  width: var(--ks-contain-width);
  margin: 0 auto;
  padding: 16rem 0;
  /* 뱃지 + 제목 (Figma Frame 404) */
  /* 교재 이미지 + 모집 정보표 2단 (Figma Frame 429) */
  /* 왼쪽 : 이미지 + 설명 + 구매 링크 */
  /* 교재 구매 링크 */
  /*
   * 오른쪽 : 모집 정보표
   * 라벨 폭을 84 로 고정하고 나머지를 값이 가져간다.
   * dt·dd 를 격자에 직접 배치하려고 행 요소는 display:contents 로 둔다.
   */
  /* '*자녀 1인당 1권만 신청 가능' 같은 덧붙임.
     em 이라 부모 글자 크기가 바뀌어도 비율이 유지된다 */
}
.event-card__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}
.event-card__badge {
  padding: 0.4rem 2.4rem;
  border-radius: 8.4rem;
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 1.5;
  color: #fff;
  background: var(--ks-ink);
}
.event-card__badge strong {
  font-weight: inherit;
  color: var(--ks-yellow);
}
.event-card__ttl {
  font-weight: 900;
  font-size: 4.8rem;
  line-height: 1.3;
  text-align: center;
  color: var(--ks-ink);
}
.event-card__ttl em {
  font-style: normal;
  color: var(--ks-primary);
}
.event-card__body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4rem;
}
.event-card__product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 auto;
  width: 46rem;
}
.event-card__thumb {
  /*
   * 교재 사진은 흰 배경째로 합성돼 있다.
   * CSS mix-blend-mode 로 섞지 않고 이미지에 섹션 배경색을 구워 넣었다.
   * 등장 모션이 .event-card 에 transform 을 남기면 새 쌓임 맥락이 생겨
   * 블렌드가 섹션 배경까지 닿지 못하고 흰 네모가 그대로 보이기 때문이다.
   * [D] 섹션 배경색을 바꾸시면 짝수 섹션 교재 이미지(도형 · 연산)도
   *     같은 색으로 다시 내보내 주세요.
   */
}
.event-card__thumb img {
  width: 100%;
}
.event-card__foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2.4rem;
  padding-top: 0;
}
.event-card__desc {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ks-gray);
}
.event-card__more {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.56rem;
  padding: 0.56rem 2.24rem;
  border: 0.14rem solid var(--ks-line);
  border-radius: 5.6rem;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--ks-gray);
  background: #fff;
  transition: color 0.2s linear, border-color 0.2s linear;
  /*
   * 돋보기는 mask 로 찍어 글자색(currentColor)을 따라가게 한다.
   * 배경 이미지로 넣으면 색을 바꿀 수 없어 마우스를 올렸을 때
   * 테두리와 글자만 파래지고 아이콘만 회색으로 남는다.
   */
  /* 마우스를 올리면 테두리 · 글자 · 아이콘이 함께 파래진다 */
}
.event-card__more::before {
  flex: 0 0 auto;
  width: 1.96rem;
  height: 1.96rem;
  background: currentColor;
  mask: url(../image/icon__search.svg) no-repeat center/contain;
  content: "";
}
.event-card__more:hover {
  border-color: var(--ks-primary);
  color: var(--ks-primary);
}
.event-card__info {
  display: grid;
  grid-template-columns: 8.4rem 1fr;
  flex: 0 0 auto;
  align-self: center;
  width: 46rem;
  border-top: 0.1rem solid var(--ks-primary);
}
.event-card__info-item {
  display: contents;
}
.event-card__info-label, .event-card__info-desc {
  /* 세로 방향이라야 '*자녀 1인당 1권만 신청 가능' 같은 덧붙임이
     본문 옆이 아니라 아래 줄로 내려간다 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 0.1rem solid var(--ks-primary);
  font-weight: 700;
  line-height: 1.5;
}
.event-card__info-label {
  align-items: center;
  padding: 0.28rem 1.4rem;
  font-size: 1.4rem;
  text-align: center;
  color: var(--ks-primary);
  background: var(--ks-pale);
}
.event-card__info-desc {
  padding: 1.4rem 1.2rem;
  /* Figma 행 높이 53 = 여백 14 + 글줄 24 + 여백 14 + 아래 테두리 1 */
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--ks-ink);
  background: #fff;
}
.event-card__info-note {
  display: block;
  font-size: 0.8125em;
}

/* ------------------------------------------------------------------
 * 질문과 답변
 * ------------------------------------------------------------------ */
.event-qna {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.6rem;
  width: var(--ks-narrow-width);
  margin: 0 auto;
  /* Q / A 원형 표식 */
  /* 더보기 : 접혀 있다가 클릭하면 아래로 펼쳐진다 */
}
.event-qna__question, .event-qna__answer {
  display: flex;
  gap: 1.4rem;
  padding: 1.2rem 2.4rem;
  border-radius: 1.6rem;
}
.event-qna__question {
  align-items: center;
  color: #fff;
  background: var(--ks-primary);
}
.event-qna__question .event-qna__mark {
  color: var(--ks-primary);
  background: #fff;
}
.event-qna__answer {
  align-items: flex-start;
  border: 0.07rem solid var(--ks-primary);
  background: #fff;
}
.event-qna__answer .event-qna__mark {
  color: #fff;
  background: var(--ks-primary);
}
.event-qna__mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 0 0 auto;
  width: 3.36rem;
  height: 3.36rem;
  border-radius: 3.6rem;
  font-weight: 800;
  font-size: 1.96rem;
  line-height: 1.5;
}
.event-qna__text {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
}
.event-qna__text strong {
  font-weight: 800;
}
.event-qna__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.4rem;
  flex: 1 1 auto;
  min-width: 0;
}
.event-qna__lead {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--ks-primary);
}
.event-qna__detail {
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--ks-ink);
  /* 강조는 본문보다 한 단계 크다 (18 → 20).
     색은 본문(--ks-ink)을 그대로 쓰고 크기와 굵기로만 구분한다 */
}
.event-qna__detail p + p {
  margin-top: 1.4rem;
}
.event-qna__detail strong {
  font-weight: 800;
  font-size: 2rem;
}
.event-qna__toggle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.56rem;
  align-self: stretch;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--ks-gray);
}
.event-qna__toggle::after {
  flex: 0 0 auto;
  width: 2.24rem;
  height: 2.24rem;
  background: url(../image/icon__arrow-down.svg) no-repeat center/contain;
  transition: transform 0.2s linear;
  content: "";
}
.event-qna__toggle--open::after {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------
 * 학습단 활동 및 혜택 안내
 * ------------------------------------------------------------------ */
.event-benefit {
  padding: 16rem 0;
  background: var(--ks-primary);
  /* 흰 카드 */
}
.event-benefit__contain {
  width: var(--ks-narrow-width);
  margin: 0 auto;
}
.event-benefit__ttl {
  margin-bottom: 4rem;
  font-weight: 900;
  font-size: 4rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}
.event-benefit__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 4rem;
  padding: 4rem;
  border-radius: 1.6rem;
  background: #fff;
}

/* 활동 내용 / 선발 혜택 : 데스크탑은 가로 2단 */
.event-benefit-row {
  display: flex;
  gap: 1.2rem;
}

.event-benefit-section {
  /* 자식이 카드 폭을 꽉 채워야 한다 (완주 혜택 박스 · 경품 카드) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.8rem;
  flex: 1 1 0;
  min-width: 0;
  /* 완주 혜택 : 항목 사이가 더 넓다 (Figma 16) */
}
.event-benefit-section--wide {
  gap: 1.6rem;
}
.event-benefit-section__ttl {
  /* 알약 배지는 글자 폭만큼만 */
  align-self: flex-start;
  padding: 0.2rem 1rem;
  border-radius: 6rem;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #fff;
  background: var(--ks-primary);
}
.event-benefit-section__list {
  padding-left: 1.8rem;
}
.event-benefit-section__item {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--ks-ink);
  /* base 가 li 에 직접 list-style:none 을 걸어서 상속으로는 못 이긴다 */
  list-style-type: disc;
}
.event-benefit-section__item em {
  font-weight: 800;
  font-style: normal;
  color: var(--ks-red);
}
.event-benefit-section__item a {
  text-decoration: underline;
  /* 밑줄이 글자를 피해 끊기지 않게 한다 */
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  text-underline-offset: 0.2em;
}

/* 완주 혜택 : 테두리 한 줄 */
.event-benefit-reward {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2.1rem;
  padding: 0.8rem 1.6rem;
  border: 0.1rem solid var(--ks-primary);
  border-radius: 0.8rem;
}
.event-benefit-reward__label {
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--ks-primary);
}
.event-benefit-reward__desc {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.5;
  color: var(--ks-ink);
}
.event-benefit-reward__thumb {
  flex: 0 0 auto;
  width: 10.7rem;
  border-radius: 0.4rem;
  overflow: hidden;
}
.event-benefit-reward__thumb img {
  width: 100%;
}

/* 최우수 / 우수 경품 */
.event-gift {
  display: flex;
  gap: 1.12rem;
}
.event-gift__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1.12rem;
  flex: 1 1 0;
  min-width: 0;
}
.event-gift__rank {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.28rem 1.4rem;
  border-radius: 1.12rem 1.12rem 0 0;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #fff;
  background: var(--ks-primary);
}
.event-gift__thumb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 20.3rem;
  border-radius: 0 0 1.12rem 1.12rem;
  background: var(--ks-gift-bg);
  /* 세로 플렉스 항목의 기본 최소 높이(auto)는 내용 크기를 따라가서
     세로가 긴 그림이 들어오면 위 높이를 이겨 버린다.
     0 으로 풀어야 두 카드의 높이가 그림과 무관하게 같아진다 */
  min-height: 0;
}
.event-gift__thumb img {
  /* 에셋을 디자인 크기(1x)로 내보냈으므로 늘리지 않고 원본 그대로 쓴다 */
  width: auto;
  height: auto;
}
.event-gift__desc {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.2;
  text-align: center;
  color: var(--ks-primary);
}

/* ------------------------------------------------------------------
 * 꼭 읽어주세요
 * ------------------------------------------------------------------ */
.event-notice {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8rem;
  /*
   * 아래쪽 여백이 디자인(80)보다 넓은 이유 :
   * 하단 고정 버튼이 142.8 을 덮어서 그대로 두면 로고가 가려진다.
   * 디자인에는 이 아래에 footer(427) 가 있어 가려지지 않는다.
   * [D] 공용 footer 를 넣으시면 이 값을 8rem 으로 되돌리셔도 됩니다.
   */
  padding: 8rem 0 22.3rem;
  background: var(--ks-notice-bg);
}
.event-notice__contain {
  width: var(--ks-narrow-width);
}
.event-notice__ttl {
  margin-bottom: 4rem;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
  color: #fff;
}
.event-notice__logos {
  width: 21.2rem;
}

.event-notice-list {
  padding-left: 2rem;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--ks-notice-txt);
  /* base 가 li 에 직접 list-style:none 을 걸어서 상속으로는 못 이긴다 */
}
.event-notice-list li {
  list-style-type: decimal;
}
.event-notice-list li + li {
  margin-top: 0.8rem;
}
.event-notice-list strong {
  font-weight: 700;
}

/* ------------------------------------------------------------------
 * 하단 고정 버튼
 * ------------------------------------------------------------------ */
.event-sticky-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 80.4rem;
  height: 9.8rem;
  margin: 0 auto;
  border-radius: 1.6rem;
  background: var(--ks-navy-deep);
}
.event-sticky-btn__ttl {
  width: 39.3rem;
  max-width: 100%;
}
.event-sticky-btn__wrap {
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  min-width: var(--contain-width);
  padding: 2.24rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 2%, #fff 27.451%);
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.event-sticky-btn__wrap.is-show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* '선착순!' 말풍선 */
.event-speech-bubble {
  /* 꼬리 크기를 한 곳에서 정의하고 나머지는 여기서 파생시킨다 */
  --tail-size: 1.65rem;
  --tail-overlap: 0.6rem;
  position: absolute;
  top: -3.8rem;
  left: 50%;
  margin-left: -20.5rem;
  padding: 0.75rem 1.5rem 0.6rem;
  border-radius: 7.5rem;
  font-family: var(--ks-font-score);
  font-weight: 500;
  font-style: normal;
  font-size: 1.8rem;
  line-height: normal;
  letter-spacing: -0.04em;
  color: #fff;
  background: var(--ks-primary);
  animation: ks-bubble-float 2s ease-in-out infinite;
  /* 말풍선 꼬리 : 글자 수가 바뀌어도 따라오도록 폭 비율로 위치를 잡는다 */
}
.event-speech-bubble::after {
  position: absolute;
  content: "";
  top: calc(100% - var(--tail-overlap));
  left: 58%;
  border-top: var(--tail-size) solid var(--ks-primary);
  border-right: calc(var(--tail-size) / 2) solid transparent;
  border-bottom: 0;
  border-left: calc(var(--tail-size) / 2) solid transparent;
  transform: translateX(-50%);
}

@keyframes ks-bubble-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.6rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .event-speech-bubble,
  .event-intro__pop,
  .event-intro__bulb,
  .event-intro__ttl {
    animation: none;
  }
}

/*# sourceMappingURL=index.css.map */