@keyframes marqueeX {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes marqueeX_r {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes updown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10%);
  }
}

.updown {
  animation: updown 3s infinite ease-in-out;
}

.image_sd_wrap {
  overflow: hidden;
}

.image_sd .absol {
  left: 100%;
}

.image_sd_r .absol {
  right: 100%;
}

.image_sd {
  animation: marqueeX 20s infinite linear;
}

.image_sd_r {
  animation: marqueeX_r 20s infinite linear;
}

/* ===== AWARDS 배너 불빛 (sunshine) — 햇빛 쨍/깜빡, 은은한 맥동 =====
   키프레임만 정의. 각 불빛의 duration/delay 는 brand.css 에서 다르게 부여해 "각각 다르게" 반짝임. */
@keyframes sunshine {
  0% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.72;
  }

  100% {
    opacity: 0.3;
  }
}

@keyframes sunshineFlare {
  0%,
  100% {
    opacity: 0.35;
  }

  10% {
    opacity: 1;
  }

  24% {
    opacity: 0.5;
  }

  60% {
    opacity: 0.85;
  }
}

/* ===== 푸터 퀵바 마스코트 hover — 살짝 눌렸다 올라오는 모션 (PC 전용) ===== */
@keyframes mascotPress {
  0% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(9%);
  }

  65% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(0);
  }
}

/* 트리거는 footer.js (mouseenter 시 .mascot-press 부여 → animationend 시 제거).
   :hover 로 걸면 마우스가 중간에 나갈 때 애니메이션이 끊기므로 클래스 방식 사용. */
.quick_mascot img.mascot-press {
  animation: mascotPress 0.5s ease-in-out;
}

/* ===== con05(창업) 노란점 링 — 점 주변이 은은하게 커지며 fade (점 본체는 정적) ===== */
@keyframes scale_opa {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  35% {
    opacity: 0.85;
  }

  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}

/* 트럭 덜덜(시동 걸린 듯) — 과하지 않게 미세 흔들림. con06 트럭용 공통 */
@keyframes truckIdle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-0.6px) rotate(-0.12deg);
  }
  55% {
    transform: translateY(0.4px) rotate(0.1deg);
  }
  80% {
    transform: translateY(-0.3px) rotate(0.13deg);
  }
}

/* ===== .shake : 흔들흔들 → 멈춤 → 흔들흔들 (주기적 흔들림 · 공통 재사용) =====
   transform 이라 개별 rotate/translate(예: con11_gift 모바일 rotate:36deg) 위에 합성됨.
   GSAP 등장 끝난 뒤 addClass('shake') 로 idle 흔들림 부여. 0~21% 흔들→21~100% 멈춤→루프. */
@keyframes shake {
  0%   { transform: rotate(0deg); }
  3%   { transform: rotate(-5deg); }
  6%   { transform: rotate(5deg); }
  9%   { transform: rotate(-4deg); }
  12%  { transform: rotate(4deg); }
  15%  { transform: rotate(-3deg); }
  18%  { transform: rotate(2deg); }
  21%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}
.shake {
  animation: shake 4s ease-in-out infinite;
}