.scroll-bg {
  width: 100%;
  height: 100vh;
  position: relative;
  display: block;
  overflow: hidden;
  padding-bottom: 100vh;
  z-index: 200;
}
.scroll-bg > span {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: -4rem 0 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.8s ease, transform 0s ease 1s;
}
.scroll-bg > span img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.scroll-bg.is-fixed > span {
  position: fixed;
  margin: 0;
}
.scroll-bg.is-view > span {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.05);
  transition: opacity 0.8s ease, transform 6s;
}
.scroll-bg.is-view-hf > span {
  opacity: 0.15;
  transform: initial;
  transition: opacity 0.8s ease, transform 6s;
}
.scroll-bg:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: -1;
}
@media screen and (max-width: 480px) {
  .scroll-bg:after {
    height: 50%;
  }
}/*# sourceMappingURL=scroll-bg.css.map */