.container.pc .openapi-faq {
  --px: min(calc(100vw / 1920), 1px);
}

.container.mo .openapi-faq {
  --px: calc(100vw / 750);
}

.openapi-acc__btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.openapi-acc__btn:focus-visible {
  outline: 2px solid #003cdc;
  outline-offset: 2px;
}

.openapi-acc__panel {
  display: none;
}

.openapi-acc.is-open .openapi-acc__panel {
  display: block;
}

.openapi-faq {
  background: #fff;
}

.section.openapi-faq img {
  display: block;
  height: auto;
  margin: 0;
}

.openapi-faq__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.openapi-faq__list {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.openapi-faq__q {
  margin: 0;
}

.openapi-faq__q .openapi-acc__btn,
.section.openapi-faq .openapi-faq__q img,
.section.openapi-faq .openapi-faq__a img {
  width: 100%;
}

.section.openapi-faq .openapi-faq__q-open,
.section.openapi-faq .openapi-acc.is-open .openapi-faq__q-close {
  display: none;
}

.section.openapi-faq .openapi-acc.is-open .openapi-faq__q-open {
  display: block;
}

.openapi-faq__cta p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.section .openapi-faq__cta a,
.section.openapi-faq .openapi-faq__cta img {
  display: block;
  margin: 0 auto;
}

/* FAQ - PC */
.container.pc .openapi-faq {
  padding: calc(110 * var(--px)) 0 calc(160 * var(--px));
}

.container.pc .openapi-faq__title {
  height: calc(74 * var(--px));
}

.container.pc .openapi-faq__list {
  width: calc(1280 * var(--px));
  margin-top: calc(70 * var(--px));
  gap: calc(40 * var(--px));
}

.container.pc .openapi-faq__a {
  margin-top: calc(6 * var(--px));
}

.container.pc .openapi-faq__cta {
  margin-top: calc(70 * var(--px));
}

.container.pc .openapi-faq__cta p {
  height: calc(32 * var(--px));
}

.container.pc .openapi-faq__cta a {
  width: calc(517 * var(--px));
  margin-top: calc(24 * var(--px));
}

/* FAQ - MO */
.container.mo .openapi-faq {
  padding: calc(70 * var(--px)) 0 calc(160 * var(--px));
}

.container.mo .openapi-faq__title {
  height: calc(72 * var(--px));
}

.container.mo .openapi-faq__list {
  width: calc(630 * var(--px));
  margin-top: calc(54 * var(--px));
  gap: calc(40 * var(--px));
}

.container.mo .openapi-faq__a {
  margin-top: calc(6 * var(--px));
}

.container.mo .openapi-faq__cta {
  margin-top: calc(70 * var(--px));
}

.container.mo .openapi-faq__cta p {
  height: calc(44 * var(--px));
}

.container.mo .openapi-faq__cta a {
  width: calc(570 * var(--px));
  margin-top: calc(28 * var(--px));
}

.footer.openapi-footer .tab_caution_content img {
  display: block;
  height: auto;
  margin: 0;
}

.container.pc .footer.openapi-footer {
  --px: min(calc(100vw / 1920), 1px);
  container-type: inline-size;
  padding-top: calc(20 * var(--px));
  background: #f5f5f5;
}

/* 100vw는 세로 스크롤바 폭까지 포함해 가운데 정렬이 밀리므로, 지원 브라우저는 영역 실제 폭(cqw) 기준 */
@supports (width: 1cqw) {
  .container.pc .footer.openapi-footer > * {
    --px: min(calc(100cqw / 1920), 1px);
  }
}

.container.pc .footer.openapi-footer .tab_caution_head {
  height: calc(99 * var(--px));
  background-color: #f5f5f5;
  box-shadow: none;
}

.container.pc .footer.openapi-footer .tab_caution_head .area_btn {
  width: calc(1280 * var(--px));
  height: calc(99 * var(--px));
  background-position: calc(7 * var(--px)) center;
}

.container.pc .footer.openapi-footer .tab_caution_head.head1 .area_btn {
  background-image: url("/assets/openapi/pc/notice_title1.png");
  background-size: calc(155 * var(--px)) auto;
}

.container.pc .footer.openapi-footer .tab_caution_head.head2 .area_btn {
  background-image: url("/assets/openapi/pc/notice_title2.png");
  background-size: calc(192 * var(--px)) auto;
}

.container.pc .footer.openapi-footer .tab_caution_head.head3 .area_btn {
  background-image: url("/assets/openapi/pc/notice_title3.png");
  background-size: calc(348 * var(--px)) auto;
}

.container.pc .footer.openapi-footer .tab_caution_head.head4 .area_btn {
  background-image: url("/assets/openapi/pc/notice_title4.png");
  background-size: calc(134 * var(--px)) auto;
}

.container.pc .footer.openapi-footer .tab_caution_head .btn_arrow {
  top: 50%;
  right: 0; /* 화살표 오른쪽 끝 = 구분선 끝 */
  /* 모양·크기는 bond-live PC와 동일 */
  width: 22px;
  height: 22px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}

.container.pc .footer.openapi-footer .tab_caution_head.close .btn_arrow {
  background-image: url("/assets/els_quiz/pc/down.png");
}

.container.pc .footer.openapi-footer .tab_caution_head.open .btn_arrow {
  background-image: url("/assets/els_quiz/pc/up.png");
}

.container.pc .footer.openapi-footer .tab_caution_content,
.container.pc .footer.openapi-footer .tab_caution_content.open:not(:last-of-type) {
  padding: calc(26 * var(--px)) calc(50% - 640 * var(--px)) calc(40 * var(--px));
  background-color: #f5f5f5;
  box-shadow: none;
}

.container.pc .footer.openapi-footer .tab_caution_content.content4 {
  padding-bottom: calc(60 * var(--px));
}

.container.pc .footer.openapi-footer .tab_caution_content img + img {
  margin-top: calc(40 * var(--px));
}

.container.pc .footer.openapi-footer .tab_caution_content img.openapi-notice__badge {
  width: calc(110 * var(--px));
  margin: calc(31 * var(--px)) 0 0 auto;
}

.container.mo .footer.openapi-footer {
  --px: calc(100vw / 750);
  container-type: inline-size;
  padding-top: calc(18 * var(--px));
  background: #f5f5f5;
}

@supports (width: 1cqw) {
  .container.mo .footer.openapi-footer > * {
    --px: calc(100cqw / 750);
  }
}

.container.mo .footer.openapi-footer .tab_caution_head {
  height: calc(99 * var(--px));
  background-color: #f5f5f5;
  background-repeat: no-repeat;
  box-shadow: none;
}

.container.mo .footer.openapi-footer .tab_caution_head.head1 {
  background-image: url("/assets/openapi/mo/notice_title1.png");
  background-size: 19.867%;
  background-position: 7.82% center;
}

.container.mo .footer.openapi-footer .tab_caution_head.head2 {
  background-image: url("/assets/openapi/mo/notice_title2.png");
  background-size: 24.667%;
  background-position: 8.319% center;
}

.container.mo .footer.openapi-footer .tab_caution_head.head3 {
  background-image: url("/assets/openapi/mo/notice_title3.png");
  background-size: 44.667%;
  background-position: 11.325% center;
}

.container.mo .footer.openapi-footer .tab_caution_head.head4 {
  background-image: url("/assets/openapi/mo/notice_title4.png");
  background-size: 17.2%;
  background-position: 7.568% center;
}

.container.mo .footer.openapi-footer .tab_caution_head .area_btn {
  width: calc(670 * var(--px));
  height: calc(99 * var(--px));
  background-image: none;
}

.container.mo .footer.openapi-footer .tab_caution_head .btn_arrow {
  top: 50%;
  right: 0; /* 화살표 오른쪽 끝 = 구분선 끝 */
  /* 모양·크기는 bond-live MO와 동일 */
  width: 14px;
  height: 14px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}

.container.mo .footer.openapi-footer .tab_caution_head.close .btn_arrow {
  background-image: url("/assets/els_quiz/pc/down.png");
}

.container.mo .footer.openapi-footer .tab_caution_head.open .btn_arrow {
  background-image: url("/assets/els_quiz/pc/up.png");
}

.container.mo .footer.openapi-footer .tab_caution_content,
.container.mo .footer.openapi-footer .tab_caution_content.open:not(:last-of-type) {
  background-color: #f5f5f5;
  box-shadow: none;
}

.container.mo .footer.openapi-footer .tab_caution_content img {
  width: 100%;
}

.container.mo .footer.openapi-footer .tab_caution_content:not(.content4) {
  padding-bottom: calc(30 * var(--px));
}