html,
body {
  margin: 0;
  padding: 0;
  background-color: rgb(207, 83, 68);
}

.main {
  width: 18.75rem;
  height: 37.4rem;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  overflow: hidden;
}

.up {
  background-image: url("../image/hb-top.webp");
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  width: 18.75rem;
  top: 0;
  height: 20rem;
}

.down {
  background-image: url("../image/hb-bottom.webp");
  top: 15.4rem;
  height: 22.5rem;
  position: absolute;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  width: 18.75rem;
}

.btn {
  position: absolute;
  top: 15.55rem;
  left: 6.475rem;
  width: 5.8rem;
  height: 5.8rem;
}

.btn_bg {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
  animation: btn_scale 0.6s linear infinite;
}

@keyframes btn_scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.btn_hand {
  opacity: 1;
  transform-origin: right bottom;
  animation: btn_hands 0.6s linear infinite;
  position: absolute;
  top: 3.5rem;
  left: 2.75rem;
  width: 4.5rem;
  height: 4.5rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: 100% 100%;
}

@keyframes btn_hands {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(25deg);
  }
}

.residue {
  position: absolute;
  top: 25rem;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.61;
  color: rgb(255, 255, 255);
}

.packet {
  position: absolute;
  top: 0;
  left: 0;
  width: 18.75rem;
  height: auto;
}

.move .up {
  animation: bg_up 0.5s linear forwards;
}

@keyframes bg_up {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-20rem);
    opacity: 0.5;
  }
}
.move .down {
  animation: bg_down 0.5s linear forwards;
}
@keyframes bg_down {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(22.5rem);
    opacity: 0.5;
  }
}