.page-box {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.page-box .page {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: url('../images/home/bg.jpg') repeat-y center top;
  background-size: 100%;
}
.page-box .page.hide {
  display: none;
}
.page-box .page.in-top {
  animation: ShowTop 0.5s ease-out both;
}
.page-box .page.out-top {
  animation: HideTop 0.5s ease-out both;
}
.page-box .page.in-down {
  animation: ShowDown 0.5s ease-out both;
}
.page-box .page.out-down {
  animation: HideDown 0.5s ease-out both;
}
@keyframes ShowTop {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes HideTop {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes ShowDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes HideDown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}