html, body {
  margin:0; padding:0; height:100%;
  background-color:#d10000; overflow:hidden;
}
img { display:block; width:100%; }

/* 로고: 연속 애니메이션 2개(두 번째는 지연 시작) */
.logo{
  width:30%; max-width:294px;
  position:absolute; left:50%; top:-200px;
  transform:translateX(-50%);
  /* ① dropBounce 2s로 중앙까지 내려와 멈춤
     ② 3.0s 뒤에 fadeOutLogo 1.2s 실행(중앙에서 잠깐 머무름) */
	animation: 
	  dropBounce 2.2s ease-out forwards,
	  fadeOutLogo 1.2s ease forwards 3.5s;
}

/* 하강 + 약간의 바운스 후 중앙 정지 */
@keyframes dropBounce {
  0%   { top: -200px; }
  60%  { top: 50%; transform: translate(-50%, -50%); }
  70%  { top: 48%; }
  80%  { top: 50%; }
  88%  { top: 49.2%; }
  94%  { top: 50%; }
  100% { top: 50%; transform: translate(-50%, -50%); }
}

/* 중앙에 머무르다 투명해짐 (위치 고정) */
@keyframes fadeOutLogo{
  0%  { opacity:1; top:50%; transform:translate(-50%,-50%); }
  100%{ opacity:0; top:50%; transform:translate(-50%,-50%); }
}

/* 불필요: 아래 두 블록은 삭제하세요
.logo.exit{ animation:slideOut 1.5s ease forwards; }
@keyframes slideOut{ 0%{...} 100%{...} }
*/