*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.warp{
  width: 100dvw;
  height: 100dvh;
  background: url('assets/bg.png') no-repeat center/cover;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center

}
.title{
  width: 274px;height: 43px;
}
.title2{
  width: 240px;
  height: 32px;
  margin-top: 8px;
}
.rotate-out{
  width: 230px;height: 315px;
  background: url('/assets/rotate-out.png') no-repeat center/cover;
  margin-top: 25px;
  .rotate-in{
    width: 189px;height: 188px;
    background: url('./assets/rotate-in.png') no-repeat center/cover;
    display: block;
    margin: 18px auto 0 auto;

  }
}
.roate-in{
  width: 230px;height: 315px;
  background: url('/assets/rotate-in.png') no-repeat center/cover;
  margin-top: 20px;
}
.btn{
  width: 240px;height: 70px;
  background: url('assets/btn.png') no-repeat center/cover;
  position: relative;
  margin-top: 40px;
  cursor: pointer;
  animation: btn-pulse 1.2s ease-in-out infinite;
  .hand{
    width: 66px;height: 56px;
    background: url('./assets/hand.png') no-repeat center/cover;
    position: absolute;
    top: 24px;right: -36px;
    animation: hand 1.2s ease-in-out infinite;
    transform-origin: center center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
}
@keyframes btn-pulse{
  0%,100%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.96);
  }
}
@keyframes hand{
  0%,100%{
    transform: translateX(0) translateY(0) scale(1);
  }
  50%{
    transform: translateX(36px) translateY(6px) scale(0.95);
  }
}

@media screen and (max-width: 480px) {
  .title{
    width: 200px;
    height: 31px;
  }
  .title2{
    width: 180px;
    height: 24px;
    margin-top: 6px;
  }
  .rotate-out{
    width: 180px;
    height: 246px;
    margin-top: 20px;
    .rotate-in{
      width: 148px;
      height: 147px;
      margin: 14px auto 0 auto;
    }
  }
  .roate-in{
    width: 180px;
    height: 246px;
    margin-top: 15px;
  }
  .btn{
    width: 180px;
    height: 52px;
    margin-top: 30px;
    cursor: pointer;
    animation: btn-pulse 1.2s ease-in-out infinite;
    .hand{
      width: 50px;
      height: 42px;
      top: 18px;
      right: -27px;
      animation: hand 1.2s ease-in-out infinite;
      transform-origin: center center;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
  }
  @keyframes hand{
    0%,100%{
      transform: translateX(0) translateY(0) scale(1);
    }
    50%{
      transform: translateX(27px) translateY(4px) scale(0.95);
    }
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .title{
    width: 240px;
    height: 38px;
  }
  .title2{
    width: 210px;
    height: 28px;
    margin-top: 7px;
  }
  .rotate-out{
    width: 210px;
    height: 287px;
    margin-top: 23px;
    .rotate-in{
      width: 172px;
      height: 171px;
      margin: 16px auto 0 auto;
    }
  }
  .roate-in{
    width: 210px;
    height: 287px;
    margin-top: 18px;
  }
  .btn{
    width: 210px;
    height: 61px;
    margin-top: 35px;
    cursor: pointer;
    animation: btn-pulse 1.2s ease-in-out infinite;
    .hand{
      width: 58px;
      height: 49px;
      top: 21px;
      right: -31px;
      animation: hand 1.2s ease-in-out infinite;
      transform-origin: center center;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
  }
  @keyframes hand{
    0%,100%{
      transform: translateX(0) translateY(0) scale(1);
    }
    50%{
      transform: translateX(31px) translateY(5px) scale(0.95);
    }
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .title{
    width: 260px;
    height: 41px;
  }
  .title2{
    width: 228px;
    height: 30px;
    margin-top: 8px;
  }
  .rotate-out{
    width: 218px;
    height: 299px;
    margin-top: 24px;
    .rotate-in{
      width: 179px;
      height: 178px;
      margin: 17px auto 0 auto;
    }
  }
  .roate-in{
    width: 218px;
    height: 299px;
    margin-top: 19px;
  }
  .btn{
    width: 228px;
    height: 66px;
    margin-top: 38px;
    cursor: pointer;
    animation: btn-pulse 1.2s ease-in-out infinite;
    .hand{
      width: 63px;
      height: 53px;
      top: 23px;
      right: -34px;
      animation: hand 1.2s ease-in-out infinite;
      transform-origin: center center;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
  }
  @keyframes hand{
    0%,100%{
      transform: translateX(0) translateY(0) scale(1);
    }
    50%{
      transform: translateX(34px) translateY(6px) scale(0.95);
    }
  }
}

@media screen and (min-width: 1025px) {
  .title{
    width: 300px;
    height: 47px;
  }
  .title2{
    width: 264px;
    height: 35px;
    margin-top: 9px;
  }
  .rotate-out{
    width: 253px;
    height: 346px;
    margin-top: 27px;
    .rotate-in{
      width: 207px;
      height: 206px;
      margin: 20px auto 0 auto;
    }
  }
  .roate-in{
    width: 253px;
    height: 346px;
    margin-top: 22px;
  }
  .btn{
    width: 264px;
    height: 77px;
    margin-top: 44px;
    cursor: pointer;
    animation: btn-pulse 1.2s ease-in-out infinite;
    .hand{
      width: 73px;
      height: 62px;
      top: 27px;
      right: -40px;
      animation: hand 1.2s ease-in-out infinite;
      transform-origin: center center;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
  }
  @keyframes hand{
    0%,100%{
      transform: translateX(0) translateY(0) scale(1);
    }
    50%{
      transform: translateX(40px) translateY(7px) scale(0.95);
    }
  }
}