.qr_header {
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 999;
  display: inline-block;
  border-bottom: 1px solid #e8e8e8;
}

.qr_header.qr_play {
  height: 120px;
}

.qr_right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qr_right .logo {
  width: 100px;
}

.qr_right .logo > img {
  width: 100%;
  display: block;
}

.qr_hd_inner {
  max-width: 1280px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 10px;
  padding: 10px 0;
}

.qr_hd_inner_main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qr_hd_inner_sub {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qr_hd_inner_sub .logo {
  width: 68px;
}

.qr_hd_inner_sub .logo > img {
  width: 100%;
  display: block;
}

.qr_hd_inner_sub .subject {
  font-size: 18px;
  color: #000;
}

.qr_book_cate {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qr_book_cate .grade {
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 20px;
  background-color: #3c64fa;
  color: #fff;
}

.qr_book_cate .grade.ele {
  background-color: #01b4bc;
}

.qr_book_cate .grade.middle {
  background-color: #fd6c6f;
}

.qr_book_cate .grade.high {
  background-color: #bf95df;
}

.qr_book_cate .subject {
  font-size: 20px;
  color: #000;
}

.resource_menu_title {
  font-size: 18px;
  color: #01b4bc;
}

.qr_list_btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #04142d;
  color: #fff;
  padding: 8px 20px;
  border-radius: 12px;
}

.qr_wrap {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.qr_container {
}

.qr_container.pt_91 {
  padding-top: 91px;
}

.qr_container.pt_120 {
  padding-top: 120px;
}

.qr_inner {
  padding-top: 20px;
  padding-bottom: 20px;
}

.list_area {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.accordion_item {
  background-color: #fbfbfb;
  border-radius: 20px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  border-top: none;
}

.accordion_content {
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.accordion_content > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 10px;
  cursor: pointer;
}

.accordion_content > li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.accordion_content .play_btn {
  background-color: transparent;
}

.accordion_content .play_btn > i {
  color: #ef3b24;
}

.accordion_header {
  background-color: #f1f1f1;
  cursor: pointer;
  padding: 20px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  /* border: 1px solid #ccc; */
  border-radius: 20px;
  text-align: left;
  outline: none;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion_header .title {
  font-size: 18px;
  color: #ef3b24;
}

.accordion_header i {
  transition: transform 0.3s ease;
  color: #ef3b24;
}

.accordion_header.active {
}

.rotate {
  transform: rotate(180deg);
}

.subject_qr_play.flex_direction,
.library_qr_play.flex_direction {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

/* 비디오 스타일 커스텀 */
/* .video_player_container { */
/*   position: relative; */
/*   width: 100%; */
/*   padding-bottom: 56.25%; !* 16:9 비율 *! */
/*   height: 0; */
/* } */

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

#video_player {
  width: 100%;
}

/* 2024-11-15 주석처리 */
/* video:-webkit-full-page-media { */
/*   width: 100%; */
/*   height: 100%; */
/* } */

/* video { */
/*   width: 100%; */
/*   height: 100%; */
/* } */

/* 오디오 스타일 커스텀 */
.audio_player_container {
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.audio_wrapper {
  position: relative;
  width: 100%;
  /* height: 200px; */
  background-color: #f0f3fa;
  border-radius: 8px;
}

#audio_player {
  width: 100%; /* 오디오 플레이어가 가로로 채워지도록 설정 */
  display: block; /* 오디오 컨트롤이 보이도록 설정 */
}

#play_button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border: none;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
}

#play_button > i {
  color: #fff;
  margin-left: 4px;
}

/* 재생 중일 때 버튼 숨기기 */
.hidden {
  display: none;
}

.resource_list_container {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.resource_title_area {
  display: flex;
  align-items: center;
  gap: 5px;
}

.resource_title_area > i {
  color: #000;
}

.resource_title_area .other_materials_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
}

.resource_title_area .other_materials_icon > img {
  display: block;
  width: 100%;
  height: 100%;
}

.resource_title_area .resource_title {
  color: #000;
  font-size: 18px;
  word-break: break-all;
}

.resource_list_area {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #fbfbfb;
  border-radius: 20px;
  border-top: none;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.resource_list_area > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: pointer;
}

.resource_list_area > li:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.resource_list_area > li.selected_color {
  /* color: #259be1; */
  font-weight: bold;
}

.resource_list_area.other_list > li {
  gap: 10px;
  justify-content: flex-start;
}

.resource_list_area > li > p {
  word-break: break-all;
}

.resource_list_area .play_btn {
  background-color: transparent;
}

.resource_list_area .play_btn > i {
  color: #000;
}

/* 이미지 영역 스타일 */
.subject_qr_image {
  
}

.subject_qr_image.flex_direction,
.subject_qr_other.flex_direction {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.image_player_container {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.explain {
  
}

.ex_icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  background-color: #5b9bd5;
  border-radius: 20px;
}

.ex_icon > span {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.ex_icon > span.ex_ar {
  color: #fff;
}

.subject_qr_image .image_view_area,
.subject_qr_other .image_view_area,
.library_qr_play .image_view_area {
  position: relative;
  cursor: pointer;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.subject_qr_other .image_view_area {
  cursor: unset;
}

.subject_qr_image .image_view_area > img,
.subject_qr_other .image_view_area > img,
.library_qr_play .image_view_area > img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.subject_qr_image .image_view_area .view_more,
.library_qr_play .image_view_area .view_more {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  color: #fff;
}

.library_qr_play .image_view_area .view_text,
.subject_qr_other .image_view_area .view_text {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  color: #fff;
  background-color: #bf95df;
  border-radius: 20px;
  font-size: 22px;
  padding: 10px 20px;
}

.image_view_area.bg_gray {
  background-color: #fff;
  border: 1px solid #ccc;
}

/* 모달 숨기기 */
.hidden {
  display: none;
}

/* 이미지 모달 배경 */
.image_modal {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 800;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

/* 이미지 모달 내용 */
.image_modal_content {
  max-width: 1280px;
  width: 100%;
  overflow-y: scroll;
  margin: 120px auto 0;
}

.image_modal_content.list_content {
  margin: 72px auto 0;
}

.image_modal_content_inner {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  margin-bottom: 120px;
}

.image_modal_title_area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  gap: 10px;
}

.image_modal_title {
  font-size: 18px;
  color: #ef3b24;
}

/* 닫기 버튼 */
.image_close_button {
  cursor: pointer;
}

.image_modal_content .image_box_area {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.image_modal_content .image_box {
  width: 100%;
  height: 400px;
  overflow: hidden;
  position: relative;
}

.image_modal_content .image_box > img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.image_box_dec_area {
  background-color: #fbfbfb;
  border-radius: 20px;
  border: 1px solid #ccc;
}

.image_box_dec_area .dec_inner {
  padding: 20px;
}

.list_table {
  display: table;
  width: 100%;
  /* table-layout: fixed; */
  border: 1px solid #ccc;
  border-radius: 20px;
}

.t_row {
  display: table-row;
}

.t_row.t_row_head .t_cell.title {
  text-align: center;
}

.t_row.t_row_head {
  font-weight: 600;
}

.t_cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 25px 10px;
  /* border-bottom: 1px solid #ccc; */
}

.t_cell.title {
  text-align: left;
}

.list_table .t_row:not(:last-child) .t_cell {
  border-bottom: 1px solid #ccc;
}

#pinchZoomContainer {
  /* transform-origin: 50% 50% !important; !* 중앙을 기준으로 *! */
  /* position: relative !important; !* position 스타일 재정의 *! */
  /* transform: scale(1) translate(0, 0) !important; !* 초기 스케일 설정 *! */
}