/* 해외채권 LIVE 전용: ELS.css 유의사항 스타일을 슈퍼365 방식으로 덮어쓴다 */

.footer.bond-live-footer {
  padding-top: 18px;
  background: #f5f5f5;
}

.footer.bond-live-footer .tab_caution_head {
  background-color: #f5f5f5;
  background-repeat: no-repeat;
  box-shadow: none;
}

.footer.bond-live-footer .tab_caution_head.head1 {
  background-image: url("/assets/bond-live/pc/notice_title1.png");
  background-size: 12.396%;
  background-position: 19.501% 51.546%;
}

.footer.bond-live-footer .tab_caution_head.head2 {
  background-image: url("/assets/bond-live/pc/notice_title2.png");
  background-size: 7.135%;
  background-position: 18.396% 54.639%;
}

.footer.bond-live-footer .tab_caution_head .area_btn {
  width: 1280px;
  background-image: none;
}

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

.footer.bond-live-footer .tab_caution_content img {
  display: block;
  width: 100%;
}

.footer.bond-live-footer .tab_caution_head .btn_arrow {
  top: 50%;
  width: 22px;
  height: 22px;
  border: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}

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

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

@media only screen and (max-width: 1920px) {
  .footer.bond-live-footer {
    padding-top: 0.9375vw;
  }

  .footer.bond-live-footer .tab_caution_head {
    background-color: #f5f5f5;
    box-shadow: none;
  }

  .footer.bond-live-footer .tab_caution_head .area_btn {
    width: 66.667vw;
  }

  .footer.bond-live-footer .tab_caution_head.close .btn_arrow,
  .footer.bond-live-footer .tab_caution_head.open .btn_arrow {
    top: 50%;
    border: none;
  }
}

@media only screen and (max-width: 768px) {
  .footer.bond-live-footer {
    padding-top: 0;
  }

  .footer.bond-live-footer .tab_caution_head,
  .footer.bond-live-footer .tab_caution_head .area_btn {
    height: 13.2vw;
  }

  .footer.bond-live-footer .tab_caution_head.head1 {
    background-image: url("/assets/bond-live/mo/notice_title1.png");
    background-size: 29.6%;
    background-position: 7.765% 51.316%;
  }

  .footer.bond-live-footer .tab_caution_head.head2 {
    background-image: url("/assets/bond-live/mo/notice_title2.png");
    background-size: 17.2%;
    /* 구분선(제목 줄 맨 위)을 시안 위치에 맞추면 제목 줄이 12px 위에서 시작하므로 제목과 화살표를 그만큼 내린다 */
    background-position: 6.602% 67.105%;
  }

  /* 구분선(버튼 폭)은 시안의 글 폭에 맞추고, 화살표는 기존 위치에 둔다 */
  .footer.bond-live-footer .tab_caution_head .area_btn {
    width: 89.333vw;
  }

  .footer.bond-live-footer .tab_caution_content.open:not(:last-of-type) {
    box-shadow: none;
  }

  .footer.bond-live-footer .tab_caution_head .btn_arrow {
    right: -2.4vw;
    width: 14px;
    height: 14px;
  }

  .footer.bond-live-footer .tab_caution_head.close .btn_arrow,
  .footer.bond-live-footer .tab_caution_head.open .btn_arrow {
    top: 50%;
    border: none;
  }

  .footer.bond-live-footer .tab_caution_head.head2.close .btn_arrow,
  .footer.bond-live-footer .tab_caution_head.head2.open .btn_arrow {
    top: 62.121%;
  }
}