/*--------------------------------------------------------------
# Page FAQ
--------------------------------------------------------------*/

.page-faq {
  /* Section Intro
--------------------------------------------- */

  .intro {
    > .wrapper {
      max-width: var(--max-w-xl);
      margin: 0 auto;
      padding: var(--padding-xxl) 24px 4.5rem;
    }

    .title {
      margin-bottom: 1.5rem;
      font-size: var(--font-3xl);
      line-height: 1.2;
      font-weight: 500;
    }
  }

  /* QnA
--------------------------------------------- */

  .qna {
    > .wrapper {
      max-width: var(--max-w-xl);
      margin: 0 auto;
      padding: 0 24px var(--padding-xxl);
    }

    .qna-list .qna-list-item details {
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--base-300);
    }

    .qna-list .qna-list-item details summary {
      list-style: none;
      cursor: pointer;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 1.5rem;
    }

    .qna-list .qna-list-item details summary .question {
      font-weight: bold;
    }

    .qna-list .qna-list-item details summary .symbol::after {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      padding: 0.25rem;
      content: "\e313";
    }

    .qna-list .qna-list-item details[open] summary .symbol::after {
      content: "\e316";
    }

    .qna-list .qna-list-item details .content {
      margin: 1.5rem 0;
      max-width: var(--max-w-md);

      .answer p:not(:last-of-type) {
        margin-bottom: 1.5rem;
      }
    }
  }
}