/* BASIC css start */
/* 이미지 스타일 */
.brand-image {
    width: 47%; /* 이미지 크기를 50%로 줄임 */
    height: auto;
    max-width: 100%;
    object-fit: contain;
    display: block; /* 중앙 정렬을 위해 블록 요소로 설정 */
    margin: 30px auto 0; /* 위쪽에 20px 여백을 주고, 왼쪽/오른쪽은 자동으로 중앙 정렬 */
}


body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.faq-container {
  width: 45%; /* 너비를 줄여서 중앙에 배치 */
  margin: 50px auto;
  border-top: 2px solid #333; /* 상단에 가로 선 추가 */
  padding-top: 10px; /* 선과 내용 사이의 여백 추가 */
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0; /* 패딩을 줄여서 전체 영역을 더 짧게 보이게 */
}

.faq-header {
  display: flex;
  align-items: baseline; /* 번호와 제목을 기준선에 맞게 정렬 */
  cursor: pointer;
  padding: 10px 0;
}

.faq-prefix {
  font-size: 25px; /* 접두어 크기 */
  color: #9548c1; /* 접두어 색상 */
  margin-right: 10px; /* 제목과 번호 사이의 여백 */
  display: inline-block; /* 접두어를 가로로 표시 */
  vertical-align: top; /* 접두어 상단 정렬 */
  line-height: 0.7; /* 접두어의 줄 높이 조정 */
}

.faq-number {
  font-size: 18px; /* 번호 크기 */
  color: #333;
  margin-right: 60px; /* 번호와 제목 사이의 여백 */
  padding-left: 20px; /* 번호 왼쪽 여백 */
  display: inline-block; /* 번호를 인라인 블록으로 설정하여 다른 요소와 정렬 */
  width: 30px; /* 고정된 너비 설정 */
  text-align: right; /* 번호를 오른쪽 정렬 */
}

.faq-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  flex-grow: 1; /* 제목 부분이 나머지 공간을 차지하도록 설정 */
  padding-left: 15px;
  transition: color 0.3s ease; /* 색상 변화에 부드러운 전환 효과 추가 */
}

.faq-title:hover {
  color: #9548c1; /* 마우스를 올렸을 때 글씨 색 변화 */
}

.faq-answer {
  display: none;
  padding: 20px; /* 패딩을 추가하여 답변 영역을 더 넓히기 */
  background-color: #f9f9f9;
  margin-top: 15px;
  border-radius: 5px;
  display: flex; /* 가로로 배치되도록 설정 */
  padding-left: 40px; /* 좌측 여백 */
}

.faq-answer-prefix {
  font-size: 25px; /* 답변 접두어 크기 */
  color: #008055; /* 답변 접두어 색상 */
  margin-right: 10px; /* 답변 접두어와 본문 사이 여백 */
  display: inline-block; /* 답변 접두어를 가로로 표시 */
  vertical-align: top; /* 답변 접두어 상단 정렬 */
  line-height: 1.4; /* 답변 접두어의 줄 높이 조정 */
  margin-top: 5px; /* 접두어와 본문 간 상단 여백 추가 */
  padding-left: 40px;
}

.faq-answer p {
  margin: 0;
  color: #555;
  font-size: 15px; /* 답변 글씨 크기 */
  line-height: 1.8; /* 줄 간격을 더 넓히기 */
  padding-top: 10px; /* 위쪽 여백 추가 */
  padding-bottom: 10px; /* 아래쪽 여백 추가 */
  display: inline-block; /* 본문 텍스트와 답변 접두어를 가로로 배치 */
  vertical-align: top; /* 본문 텍스트 상단 정렬 */
  margin-left: 10px; /* 답변 본문과 접두어 간의 간격 추가 */
}

/* BASIC css end */