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

html,
body {
  width: 100%;
  overflow: hidden;
}

.app {
  display: block;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  height: 100vh;
}

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

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

.screen1 {
  width: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  overflow: hidden;
}

.screen1 .state2 {
  opacity: 0;
}

.screen1 .state3 {
  opacity: 0;
}

.screen1 .notice {
  position: absolute;
  width: 30%;
  bottom: 50%;
  left: 35%;
  opacity: 0;
}

.screen1 .button {
  position: absolute;
  bottom: 2%;
  left: 24%;
  width: 22%;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  cursor: pointer;
}

.screen1 .button:hover {
  bottom: 4%;
}

.screen1 .button1 {
  opacity: 0;
}

.screen1 .button2 {
  opacity: 0;
  left: 53%;
}

.state {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.screen2 {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  display: none;
}

.screen2 .state2 {
  opacity: 0;
}

.screen2 .state3 {
  opacity: 0;
}

.screen2 .notice {
  position: absolute;
  width: 30%;
  bottom: 50%;
  left: 35%;
  opacity: 0;
}

.screen2 .button {
  position: absolute;
  bottom: 2%;
  left: 24%;
  width: 22%;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  cursor: pointer;
}

.screen2 .button:hover {
  bottom: 4%;
}

.screen2 .button1 {
  opacity: 0;
}

.screen2 .button2 {
  opacity: 0;
  left: 53%;
}

.screen1_active {
  display: block;
}

.screen1_active .state2 {
  -webkit-animation: fade 0.5s ease-in-out;
          animation: fade 0.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.screen1_active .button1 {
  -webkit-animation: fadeleft 0.5s ease-in-out;
          animation: fadeleft 0.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.screen1_active .state3 {
  -webkit-animation: fade 0.5s ease-in-out;
          animation: fade 0.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.screen1_active .button2 {
  -webkit-animation: faderight 0.5s ease-in-out;
          animation: faderight 0.5s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.screen1_active .notice {
  -webkit-animation: notice 0.7s ease-in-out;
          animation: notice 0.7s ease-in-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.screen1_active .button img {
  -webkit-animation: puls 1s ease;
          animation: puls 1s ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.screen1_active .button2 img {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

@-webkit-keyframes puls {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes puls {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes notice {
  from {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

@keyframes notice {
  from {
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateY(10%);
            transform: translateY(10%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}