.img-ob {
    position: relative;
}
.img-ob img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
}
.js-key {
  position: absolute;
  top: calc(50% - 8vh);
  left: calc(50% - 25vw);
  height: 16vh;
  width: 50vw;
  overflow: hidden;
  z-index: 1;
  transition: all 0.5s;
}
.js-key.end {
  position: absolute;
}
.js-key .gr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: all 0.5s;
}
.js-key .shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: #000;
  opacity: 0;
  mix-blend-mode: multiply;
  transition: all 0.8s 0.5s;
  width: 100%;
  height: 100%;
  z-index: 4;
}
.js-key .shadow.active{
  opacity: 0.6;
}
.js-key .key-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.js-key .key-slide .img2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* only animate opacity to avoid reflow/flicker */
  transition: opacity 0.8s;
  will-change: opacity;
  /* promote to its own layer for smoother fades */
  transform: translateZ(0);
  opacity: 0;
}
.js-key .key-slide.run .img2.active {
  z-index: 3;
  opacity: 1;
}
.js-key .key-slide.run .img2.active.prev {
  z-index: 2;
}
.js-key .key-slide.run .img2.prev {
  opacity: 1;
  z-index: 1;
}
.js-key .key-slide.run .img2.img1.next {
  z-index: 4;
}
.js-key .key-slide.stop .img2:nth-child(1) {
  z-index: 3;
  opacity: 1;
  transition: opacity 0.5s;
}
.js-key .key-slide .img2:nth-child(3) img{
  object-position: 0%;
}
@media screen and (max-width: 767px) {
  .js-key .key-slide .img1 img {
    -o-object-position: 40% center;
       object-position: 40% center;
  }
}

@media screen and (min-width: 768px) {
  .js-key {
    top: 313px;
    left: calc(50% - 280px);
    height: 410px;
    width: 560px;
  }
}