/* slides */
.slides {
  width: 400px;
  height: 275px;
  position: relative;
  padding: 30px 50px;
  background: #fff;
  border-radius: 5px;
}

.slide {
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

  .slide.active {
    opacity: 1;
  }

.slide-img {
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid #fafafa;
}

  .slide-img img {
    width: 400px;
    height: 269px;
    object-fit: cover;
  }

/* ¶¯»­Ð§¹û */
.fade-in {
  animation: fadeIn 1.5s ease;
}

.slide-in-left {
  animation: slideInLeft 1.2s ease;
}

.slide-in-right {
  animation: slideInRight 1.2s ease;
}

.slide-in-top {
  animation: slideInTop 1.2s ease;
}

.slide-in-bottom {
  animation: slideInBottom 1.2s ease;
}

.zoom-in {
  animation: zoomIn 1.5s ease;
}

.rotate-in {
  animation: rotateIn 1.5s ease;
}

.flip-in {
  animation: flipIn 1.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.8);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes flipIn {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }

  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
  }
}