* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html, body {
  width: 100%;
  font-family: 'Main';
}

.app {
  width: 100%;
  height: 100vh;
  display: block;
  text-decoration: none;
  background-image: url(../image/na_bg_1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  position: relative;
}

img {
  width: 100%;
  display: block;
}

.block-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.layer2 {
  background-image: url(../image/na_bg_2.jpg);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: all ease-in-out .7s;
  transition: all ease-in-out .7s;
}

.layer2_active {
  opacity: 1;
}

.logo {
  width: 16%;
  position: absolute;
  top: 2%;
  left: 42%;
  opacity: 0;
  -webkit-animation: fadein .5s ease;
          animation: fadein .5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.notice {
  width: 26%;
  left: 37%;
  top: 20%;
  position: absolute;
  opacity: 0;
  -webkit-animation: fadein .5s ease;
          animation: fadein .5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: .5s;
          animation-delay: .5s;
}

.buttons {
  position: absolute;
  width: 18%;
  top: 60%;
  left: 16%;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
}

.buttons img {
  -webkit-animation: btns 1s ease-in-out;
          animation: btns 1s ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.btn_active {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.btn-r {
  left: 66%;
}

.spaces {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

.sp2 {
  left: 50%;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes btns {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes btns {
  from {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}