#banner {
  height: 700px;
  width: 100%;
}
#banner .banner-item-wr {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
#banner .banner-item-wr img.banner-item {
  position: absolute;
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
}
@keyframes imgloading {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.dop-banner-item-wr {
  height: 100%;
  width: calc(100% / 3);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dop-banner-item-wr.center {
  left: calc(100% / 3);
}
.dop-banner-item-wr.left {
  left: 0;
}
.dop-banner-item-wr.right {
  right: 0;
}
#banner .dop-banner-item {
  z-index: 1;
  max-width: 550px;
  height: auto;
  animation-name: imgloading;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateY(50px);
}
.banner-item-mobile {
  display: none;
}
@media (max-width: 767.98px) {
    .banner-item {
  display: none;
}
  .banner-item.banner-item-mobile {
  display: block;
}
  #banner {
    height: 400px;
  }
  .dop-banner-item-wr {
    left: var(--container-padding) !important;
    width: calc(100% - 2 * var(--container-padding));
  }
  #banner .dop-banner-item {
    width: 100%;
    max-width: 100%;
  }
}