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

.app {
  cursor: pointer;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #011121;
  position: relative;
  background-image: url(img/bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.girl {
  position: absolute;
  bottom: -1%;
  left: 22%;
  width: 45%;
}

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

.girl .girl-wrapper img {
  width: 100%;
  display: block;
}

.girl .girl-wrapper .girl-layers {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.notice {
  width: 22%;
  position: absolute;
  top: 4%;
  left: 58%;
}

.notice img {
  width: 100%;
}

.mouse-arrow {
  width: 5.5%;
  -webkit-transform: rotateZ(180deg);
  transform: rotateZ(180deg);
  position: absolute;
  top: 45%;
  left: 80%;
}

.mouse-arrow img {
  width: 100%;
}

.mouse-mouse {
  width: 5.5%;
  -webkit-animation: mouse 1s ease;
  animation: mouse 1s ease;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  position: absolute;
  top: 55%;
  left: 79.5%;
}

.mouse-mouse img {
  width: 100%;
}

.mouse-arrow2 {
  width: 5.5%;
  position: absolute;
  top: 85%;
  left: 80%;
}

.mouse-arrow2 img {
  width: 100%;
}

.scale {
  position: absolute;
  top: 30%;
  left: 10%;
  width: 5%;
}

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

.scale .scale-wrapper .scale-box {
  display: block;
  width: 100%;
}

.scale .scale-wrapper .bar-start {
  position: absolute;
  bottom: 2%;
  left: 1.5%;
  width: 100%;
}

.scale .scale-wrapper .bar-start img {
  width: 100%;
  display: block;
}

.scale .scale-wrapper .bar-end {
  position: absolute;
  bottom: 30%;
  left: 1.5%;
  width: 100%;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
  opacity: 1;
}

.scale .scale-wrapper .bar-end img {
  width: 100%;
  display: block;
}

.scale .scale-wrapper .bar-scale {
  width: 100%;
  position: absolute;
  left: 1.5%;
  bottom: 15%;
  height: 20%;
  background-image: url(img/bar2.png);
  background-repeat: repeat-y;
  background-size: contain;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

.scale .scale-wrapper .box-icon {
  position: absolute;
  top: -12%;
  left: -28%;
  width: 150%;
}

.scale .scale-wrapper .box-icon img {
  width: 100%;
}

.button {
  position: absolute;
  top: 5%;
  left: 2.5%;
  width: 20%;
  z-index: 1;
}

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

.button .button-wrapper img {
  width: 100%;
}

.button .button-wrapper img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
  opacity: 0;
}

.button:hover .button-wrapper img:last-child {
  opacity: 1;
}

.button-after {
  top: 39%;
  left: 40%;
  -webkit-animation: btn-after 1s linear;
  animation: btn-after 1s linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes btn-after {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes btn-after {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

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

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

#canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.644);
  opacity: 0;
  -webkit-transition: all ease 0.5s;
  transition: all ease 0.5s;
}