@charset "UTF-8";

.page-useful .section-useful {
  padding: 2.2rem 0 8.4rem;
}

.useful-guide {
  width: 100%;
  margin: 0 auto;
  padding-right: 1.6rem;
  padding-left: 1.6rem;
}

.useful-guide-heading {
  padding: 0 1rem;
  font-weight: bolder;
  font-size: 2.8rem;
  line-height: 1.2;
}

.useful-guide-lead {
  padding: 0 1rem;
  font-weight: bolder;
  font-size: 1.6rem;
}

.useful-guide-content {
  max-width: 48.5rem;
  margin: 0 auto;
}

.useful-guide-content .slider-img {
  border: 1px solid var(--color-14);
}

.useful-guide-slider {
  --slider-navigation-color: #9a9a9a;
  --slider-navigation-width: 4rem;
  --slider-navigation-height: 8rem;
  --slider-navigation-angle-size: 3.8rem;
  --slider-navigation-angle-width: 0.2rem;
  --slider-navigation-position: 0;
  position: relative;
}

.useful-guide-slider .swiper {
  width: 84%;
}

.useful-guide .swiper-thumbs {
  max-width: 39.1rem;
  margin-top: 2.3rem;
}

.useful-guide .swiper-thumbs .swiper-slide {
  padding: 0.3rem;
}

.useful-guide-detail-heading {
  color: var(--color-3);
  font-weight: bolder;
  font-size: 2rem;
  line-height: 1.2;
}

.useful-guide-detail-body {
  margin-top: 1.8rem;
  font-size: 1.4rem;
}

.useful-guide-detail-text {
  margin-top: 0.5rem;
}

.useful-guide-form {
  max-width: 43.4rem;
  margin: 1.2rem auto 0;
  padding: 0.2rem 1rem 5rem;
  border-radius: 0.4rem;
  background-color: var(--color-8);
}

.useful-guide-form .form-col .input-control {
  --input-padding-x: 1.4rem;
}

.useful-guide-form .form-col select {
  --select-icon-padding: 3rem;
}

.useful-guide-form-terms .checkbox-label {
  font-size: 1.4rem;
}

.useful-guide-form-btn {
  text-align: center;
}

.useful-guide-form-btn .btn {
  width: 100%;
  max-width: 28rem;
}

@media (min-width: 375px) {
  .useful-guide-slider .swiper {
    max-width: 27.4rem;
  }
}

@media (min-width: 768px) {
  .page-useful .section-useful {
    padding: 2.8rem 0 15.8rem;
  }

  .page-useful .card-useful {
    border-color: var(--color-8);
    background-color: var(--color-8);
  }

  .useful-guide {
    max-width: 104rem;
    padding-right: 4rem;
    padding-left: 4rem;
  }

  .useful-guide-heading {
    padding: 0;
  }

  .useful-guide-lead {
    padding: 0;
  }

  .useful-guide-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .useful-guide-row > * {
    flex: 1 0 1%;
  }

  .useful-guide-content {
    margin: 0;
    padding-right: 2rem;
  }

  .useful-guide-slider .swiper {
    max-width: 38.5rem;
  }

  .useful-guide .swiper-thumbs {
    margin-top: 1.7rem;
  }

  .useful-guide-form {
    margin: 0 0 0 auto;
    padding: 0.2rem 2rem 5rem;
  }

  .useful-guide-form .form-item {
    font-size: 1.6rem;
  }

  .useful-guide-form .form-col-row {
    --gutter-x: 0.4rem;
  }

  .useful-guide-form-terms .checkbox-label {
    font-size: 1.6rem;
  }

  .useful-guide-form-btn .btn {
    max-width: 35rem;
  }
}

@media (min-width: 960px) {
  .useful-guide-content {
    padding-right: 0;
  }

  .useful-guide-slider {
    --slider-navigation-position: 1rem;
  }

  .useful-guide-form {
    padding: 0.4rem 3.6rem 5.4rem;
  }
}

@media (min-width: 1180px) {
  .useful-guide-detail {
    padding-left: 7.2rem;
  }
}