@charset "utf-8";

/* faq */
.faq {
  padding-top: clamp(5.000rem, 2.542rem + 5.122vw, 8.688rem);
  padding-bottom: clamp(5.000rem, -1.333rem + 13.194vw, 14.500rem);
}
.faq__inner {
  padding-right: clamp(1.250rem, -9.917rem + 23.264vw, 18.000rem);
  padding-left: clamp(1.250rem, -9.917rem + 23.264vw, 18.000rem);
}
.faq__container {
  display: flex;
  flex-direction: column;
}

/* faq cate */
.faq__cate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.750rem, -0.250rem + 2.083vw, 2.250rem);
}
.faq__cate > a {
  display: block;
  width: fit-content;
}
.faq__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.625rem, 0.417rem + 0.434vw, 0.938rem);
  width: fit-content;
  min-height: clamp(4.000rem, 3.167rem + 1.736vw, 5.250rem);
  padding: clamp(0.500rem, 0.333rem + 0.347vw, 0.750rem) clamp(1.000rem, 0.000rem + 2.083vw, 2.500rem);
  background-color: #445d7c;
  border-radius: 42px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.16);
  transition: background-color 0.3s;
}
.faq-btn__text {
  font-size: clamp(0.875rem, 0.708rem + 0.347vw, 1.125rem);
  font-weight: 500;
  line-height: clamp(1.250rem, 1.000rem + 0.521vw, 1.625rem);
  color: #fff;
}
.faq-btn__icon {
  position: relative;
  flex-shrink: 0;
  width: clamp(2.000rem, 1.625rem + 0.781vw, 2.563rem);
  height: clamp(2.000rem, 1.625rem + 0.781vw, 2.563rem);
  background-color: #ff880a;
  border-radius: 50%;
  transition: background-color 0.3s;
}
.faq-btn__icon::after {
  content: "";
  position: absolute;
  top: 52%;
  left: 50%;
  width: clamp(0.438rem, 0.396rem + 0.087vw, 0.500rem);
  height: clamp(0.438rem, 0.396rem + 0.087vw, 0.500rem);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translate(-50%, -70%) rotate(45deg);
}
.faq__cate > a:hover .faq__btn {
  background-color: #ff880a;
}
.faq__cate > a:hover .faq-btn__icon {
  background-color: #445d7c;
}

/* faq content */
.faq__container > .faq__content {
  display: flex;
  flex-direction: column;
  row-gap: clamp(3.750rem, 2.083rem + 3.472vw, 6.250rem);
  margin-top: clamp(5.000rem, 1.042rem + 8.247vw, 10.938rem);
}

/* faq title */
.faq__title {
  display: flex;
  align-items: center;
  gap: clamp(0.750rem, 0.417rem + 0.694vw, 1.250rem);
  margin-bottom: clamp(2.000rem, 0.833rem + 2.431vw, 3.750rem);
  padding-bottom: clamp(0.750rem, 0.375rem + 0.781vw, 1.312rem);
  border-bottom: 1px solid #000;
}
.faq__box + .faq__box .faq__title {
  border-bottom-color: #707070;
}
.faq-title__icon {
  flex-shrink: 0;
  width: clamp(0.875rem, 0.667rem + 0.434vw, 1.188rem);
  height: clamp(0.875rem, 0.667rem + 0.434vw, 1.188rem);
  background-color: #ff880a;
  border-radius: 50%;
}
.faq-title__main {
  font-size: clamp(1.250rem, 0.833rem + 0.868vw, 1.875rem);
  font-weight: 500;
  line-height: clamp(1.750rem, 1.583rem + 0.347vw, 2.000rem);
  color: #000;
}

/* faq item */
.faq__items {
  display: flex;
  flex-direction: column;
  row-gap: clamp(1.000rem, 0.417rem + 1.215vw, 1.875rem);
}
.faq__item {
  overflow: hidden;
  padding-inline: 10px;
}
.faq__header {
  display: flex;
  align-items: baseline;
  gap: clamp(0.625rem, 0.333rem + 0.608vw, 1.062rem);
  min-height: clamp(3.500rem, 2.917rem + 1.215vw, 4.375rem);
  padding: clamp(0.750rem, 0.667rem + 0.174vw, 0.875rem) clamp(1.000rem, -1.375rem + 4.948vw, 4.563rem);
  background-color: #facb9a;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
}
.faq-header__q {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: clamp(2.750rem, 2.333rem + 0.868vw, 3.375rem);
  height: clamp(1.500rem, 1.250rem + 0.521vw, 1.875rem);
  background-color: #0f3666;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.125rem, 0.833rem + 0.608vw, 1.563rem);
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
.faq-header__title {
  font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
  font-weight: 500;
  line-height: clamp(1.500rem, 1.167rem + 0.694vw, 2.000rem);
  color: #000;
}
.accordion-header {
  position: relative;
  padding-right: clamp(2.375rem, 0.000rem + 4.948vw, 5.938rem);
}
.accordion-header::before,
.accordion-header::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(1.000rem, -1.375rem + 4.948vw, 4.563rem);
  background-color: #0f3666;
  pointer-events: none;
}
.accordion-header::before {
  width: 14px;
  height: 2px;
  transform: translateY(-50%);
}
.accordion-header::after {
  width: 2px;
  height: 14px;
  right: calc(clamp(1.000rem, -1.375rem + 4.948vw, 4.563rem) + 6px);
  transform: translateY(-50%);
  transition: transform 0.3s, opacity 0.3s;
}
.accordion-header.active::after {
  opacity: 0;
  transform: translateY(-50%) scaleY(0);
}
.faq__item > .faq__content {
  overflow: hidden;
  min-height: 0;
  padding: 0 clamp(1.000rem, -1.375rem + 4.948vw, 4.563rem);
  background-color: #fae0c5;
}
.faq-content__text {
  min-height: clamp(4.500rem, 3.542rem + 1.997vw, 5.938rem);
  padding-top: clamp(1.000rem, 0.833rem + 0.347vw, 1.250rem);
  padding-bottom: clamp(1.000rem, 0.667rem + 0.694vw, 1.500rem);
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
  font-weight: 400;
  line-height: clamp(1.375rem, 1.292rem + 0.174vw, 1.500rem);
  color: #000;
  overflow-wrap: anywhere;
}

@media (max-width: 767px) {
  .faq__inner {
    padding-right: 20px;
    padding-left: 20px;
  }
  .faq__cate {
    flex-direction: column;
    align-items: stretch;
  }
  .faq__cate > a {
    width: 100%;
        display: flex;
    justify-content: center;
  }
  .faq__btn {
    justify-content: space-between;
    width: 100%;
    max-width: 300px;
  }
  .faq-content__text {
    font-size: clamp(0.75rem, 0.621rem + 0.53vw, 0.875rem);
  }
}

@media (max-width: 389px) {
  .faq__inner {
    padding-right: 16px;
    padding-left: 16px;
  }
  .faq-btn__text {
    font-size: 13px;
    line-height: 18px;
  }
  .faq-title__main {
    font-size: 18px;
    line-height: 26px;
  }
  .faq-header__title {
    line-height: 22px;
    font-size: 14px;
  }
  .faq-content__text {
    line-height: 20px;
  }
}