#noise-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}
#noise-canvas.noise-start {
  opacity: 0.0;
  animation: 17s ease-in 0s 2 alternate noise-opacity;
}
@keyframes noise-opacity {
  0% {opacity: 0;}
  90% {opacity: 1;}
  100% {opacity: 1;}
}
@media (prefers-reduced-motion: reduce) {
  #noise-canvas.noise-start {
    opacity: 0.0;
    animation: 170s ease-in 0s 2 alternate noise-opacity;
  }
}
.top {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.top-bg {
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
  width: 178.19vh;
  height: 100vh;
  transform-origin: 50vw 50vh;
  background: rgba(255, 255, 255, 255) url("../images/top/top-image.jpg")
    no-repeat border-box left top/cover;
}
.topImage {
  z-index: 11;
  position: absolute;
  width: 90vw;
  height: auto;
  margin: 6vw 5vw 0;
}

.topImage.bottom {
  z-index: 11;
  position: absolute;
  top: auto;
  left: auto;
  width: 35vw;
  height: auto;
  bottom: 6vw;
  right: 0;
}
@media screen and (min-width: 768px) {
  .top {
    width: 100vw;
    height: 56.12vw;
  }
  .top-bg {
    width: 100vw;
    height: 56.12vw;
    transform-origin: center;
    background: rgba(255, 255, 255, 255) url("../images/top/top-image.jpg")
      no-repeat border-box left top/cover;
  }
  .topImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 42vw;
    height: auto;
    margin: 3vw 3vw 0;
  }
  .topImage.bottom {
    position: absolute;
    width: 25vw;
    height: auto;
    bottom: 3vw;
    right: 0;
  }
}