/* Reset */
html,body {
 margin:0;
 padding:0;
 width:100%;
 height:100%;
}
body {
 display:flex;
 justify-content:center;
 background:#f5f5f5;
 overflow: hidden;
}
/* Àüü ÄÜÅÙÃ÷ ¿µ¿ª */
.intro-wrap {
 display:flex;
 width:100%;
 gap:10px;
 box-sizing: border-box;
}
/* °¢ ¿µ¿ª */
.intro-item {
 flex:1;
 overflow:hidden;
 opacity: 0;
 /* ¾Ö´Ï¸ÞÀÌ¼Ç ½ÃÀÛ Àü */
}
/* À̹ÌÁö ·¡ÆÛ (hover¿ë ºÐ¸®) */
.img-wrap {
 display:block;
 width:100%;
 height:100%;
 overflow:hidden;
}
.img-wrap img {
 width:100%;
 height:auto;
 display:block;
 transition:transform 0.4s ease;
 will-change:transform;
}
.intro-item.from-bottom .img-wrap {
 border:1px solid #d4e5f8;
 box-sizing:border-box;
}
.intro-item:hover .img-wrap img {
 transform:scale(1.05);
}
.from-top {
 animation:slideDown 1.1s ease-out forwards;
}
.from-bottom {
 animation:slideUp 1.1s ease-out forwards;
 animation-delay:0.15s;
 /* »ì¦ ½Ã°£Â÷ */
}
@keyframes slideDown {
 from {
  transform:translateY(-40px);
  opacity:0;
 }
 to {
  transform:translateY(0);
  opacity:1;
 }
}
@keyframes slideUp {
 from {
  transform:translateY(40px);
  opacity:0;
 }
 to {
  transform:translateY(0);
  opacity:1;
 }
}
/* ¸ð¼Ç ÃÖ¼ÒÈ­ (Á¢±Ù¼º) */
@media (prefers-reduced-motion:reduce) {
 .intro-item {
  animation:none;
  opacity:1;
  transform:none;
 }
 .img-wrap img {
  transition:none;
 }
}
@media (max-width:768px) {
 .intro-wrap {
  flex-direction:column;
  gap:10px;
  padding:0 10px;
 }
 .intro-item {
  width:100%;
 }
 .img-wrap img {
  width:100%;
  height: auto;
 }
}