@media only screen and (max-width: 1660px) {
  .btn {
    min-width: 200px;
  }
  .hero-title-wrapper {
    top: 40px;
  }
  .hero-bottom-wrapper {
    width: calc(507 / 1920 * 100%);
  }
  .text-bubble {
    font-size: 1.12vw;
  }
  .hero-btn-wrapper {
    bottom: 40px;
  }
  .main-form {
    width: 820px;
    height: 820px;
  }
  form.form {
    margin-top: 32px;
  }
  .form-sub-title {
    margin-top: 20px;
  }
}

@media only screen and (max-width: 1024px) {
  h1,
  h2 {
    font-size: min(160 / 991 * 100vw, 160px);
  }
  .title-cap {
    font-size: 16px;
  }
  .btn {
    min-width: 261px;
  }
  .hero-title-wrapper {
    top: 7%;
  }
  .hero-bg {
    height: 300px;
  }
  .hero-bubble {
    top: 4%;
    width: 53.8%;
  }
  .hero-bubble.right {
    right: 28%;
  }
  .hero-bubble.left {
    left: -76%;
  }
  .text-bubble {
    font-size: min(20 / 991 * 100vw, 20px);
  }
  .hero-bottom-wrapper {
    width: 58%;
  }
  .hero-btn-wrapper {
    bottom: 80px;
  }
  .ele-group,
  .ray-group {
    display: none;
  }
  .form-ele-item {
    z-index: 1;
  }
}

@media only screen and (max-width: 512px) {
  :root {
    --skew-btn: skew(-12deg);
    --skew-btn-text: skew(12deg);
  }
  .logo {
    transform: scale(0.85);
  }
  h1,
  h2 {
    font-size: 70px;
  }
  .title-cap {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .btn {
    min-width: 280px;
  }
  .main-wrapper {
    transition-duration: 1.5s;
  }
  .hero-bg {
    height: 375px;
  }
  .hero-title-wrapper {
    top: 24px;
  }
  .hero-bottom-wrapper {
    width: 421px;
    left: 30%;
    bottom: -4%;
  }
  .hero-bubble {
    top: 5%;
    width: 200px;
  }
  .hero-bubble.right {
    right: 38%;
  }
  .hero-bubble.left {
    left: -437px;
  }
  .text-bubble {
    font-size: 16px;
  }
  .hero-btn-wrapper {
    flex-direction: column;
    bottom: 36px;
  }
  .main-form {
    width: 100%;
    height: 100%;
    padding: 0 20px;
  }
  .bg-main-form {
    width: 578px;
    height: 578px;
  }
  .form-title {
    margin-top: 20px;
  }
  .form-sub-title {
    max-width: 350px;
  }
  form.form {
    margin-top: 12px;
  }
  form,
  .form-group {
    width: 100%;
  }
  input {
    width: 100%;
  }
  .form-ele-item {
    z-index: 1;
  }
  .form-ele-item._2 {
    z-index: 100;
    width: 101px;
    top: 17.54%;
    left: -11%;
  }
  .form-ele-item._6 {
    z-index: 100;
    width: 80px;
    top: 17.54%;
    right: -8%;
  }
}