.noise {
  background-image: url(/resource/images/top/grain.jpg);
  background-size: cover;
  animation: noise_anima 1s steps(1) infinite;
  width: 100%;
  height: 72vw;
  position: absolute;
  box-sizing: border-box;
  opacity: 0.1;
  z-index: 35;
}

.scratch {
  position: absolute;
  width: 100%;
  height: 72vw;
  box-sizing: border-box;
  background: url(/resource/images/top/scratch.png) repeat center center;
  animation: scratch 1.2s steps(1) infinite;
  opacity: 0.2;
  z-index: 34;
}

@media (min-width: 768px) {
  .noise {
    height: 100vh;
  }
  .scratch {
    height: 100vh;
  }
}
@keyframes noise_anima {
  0%, 100% {
    background-position: 0 0;
  }
  10% {
    background-position: 236px 343px;
  }
  20% {
    background-position: 432px 11px;
  }
  30% {
    background-position: 23px 123px;
  }
  40% {
    background-position: 456px 123px;
  }
  50% {
    background-position: 234px 432px;
  }
  60% {
    background-position: 42px 33px;
  }
  70% {
    background-position: 456px 123px;
  }
  80% {
    background-position: 456px 123px;
  }
  90% {
    background-position: 123px 456px;
  }
}
@keyframes scratch {
  0%, 100% {
    background-position: 0 0;
  }
  10% {
    background-position: 236px 343px;
  }
  20% {
    background-position: 432px 11px;
  }
  30% {
    background-position: 23px 123px;
  }
  40% {
    background-position: 456px 123px;
  }
  50% {
    background-position: 234px 432px;
  }
  60% {
    background-position: 42px 33px;
  }
  70% {
    background-position: 456px 123px;
  }
  80% {
    background-position: 456px 123px;
  }
  90% {
    background-position: 123px 456px;
  }
}/*# sourceMappingURL=noise.css.map */