@charset "utf-8";

/**
 * Course - Layout v2.3 : 2023-11-01
*/
/* ------------------------------------------------------------------------------------------------------------- */
/* course color */
:root {
  --course-top-background: #B777E9;
  --course-nav-background: #FBF6FF;
  --course-white-background: #FFF;

  --course-btn-background: #8837C6;

  --hover-course-base: #F0E0FD;
  --hover-course-btn-background: #62159C;

  --course-color: #B777E9;
  --course-color-hover: #6D2E9E;


  --course-title-text: #8837C6;
  --course-nav-text: #FFF;
  --course-btn-text: #FFF;
  
  --course-pagebox: #FFF;


  --course-step-background: #E8F8FC;
  --course-step-active: #01B2E3;
  --course-util-text-color: #FFF;
  --course-tools-text: #3F4445;
  --course-tools-background: #FBE853;

  --course-border-accent: #DFD1EB;
  --course-border-deep: #424242;
  --course-border-dull: #D9D9D9;
  --course-border-line: #B699CD;

  --course-btn-line: #CAE0EB;
  --course-btn-dull: #B5B5B5;

  --hover-course-select: #CCF0F9;
  --hover-course-btn: #A94BF2;
  --hover-course-popbtn: #CCCCCC;
  --hover-course-popbtn-txt: #5B5B5B;
  --hover-course-popbtn-deep: #62159C;
  --hover-course-popbtn-deep-txt: #CCCCCC;
  --hover-course-popbtn-dull: #919191;

  --default-border-dull: 1px solid var(--course-border-dull);
  --default-border-deep: 1px solid var(--course-border-deep);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Common */
html,
body {
  background-color: #333;
}

.is--pc #lessonContentFrame {
  margin: 62px 0 0 0;
  padding-bottom: 62px;
}

.is--web #lessonContentFrame {
  margin: 0 0 0 0;
}

.is--web .header--container {
  display: none;
}

.is--pc .master--layout .nav--container .step_area {
  max-width: 1228px;
}

.is--web .master--layout .nav--container .step_area {
  max-width: 950px;
}

body>div:first-child {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
}

body>div:first-child:before {
  z-index: -1;
  pointer-events: none;
  content: "";
  position: absolute;
  left: -2000px;
  top: 0;
  width: calc(100% + 4000px);
  height: 100%;
  background: #FFF;
}

#lessonContentFrame {
  overflow: hidden;
  /* width: 1920px;
  height: 1020px; */
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#lessonContentFrame:before {
  pointer-events: none;
  z-index: -1;
  content: "";
  position: absolute;
  left: calc(-100% + 2px);
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../../img/course/background_basic.png) 0px 0px repeat;
}

#lessonContentFrame:after {
  pointer-events: none;
  z-index: -1;
  content: "";
  position: absolute;
  left: calc(100% - 2px);
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../../img/course/background_basic.png) 0px 0px repeat;
}

body>div:first-child:after {
  pointer-events: none;
  content: "";
  position: absolute;
}

.master--layout {
  font-family: "Cafe24 Ssurround Bold";
  font-weight: 700;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Page Move */
.master--layout .pagemove--container {
  pointer-events: none;
}

.master--layout .pagemove--container .page_move_area {
  z-index: 1001;
  position: absolute;
  top: 0;
  width: 45px;
  height: 100%;
}

.master--layout .pagemove--container .page_move_area .btn {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.master--layout .pagemove--container .page_move_area .btn:not(.is--disabled) {
  pointer-events: auto;
}

.master--layout .pagemove--container .page_move_area .btn.hover {
  background-color: rgba(242, 247, 250, 0.4);
}

.master--layout .pagemove--container .page_move_area .btn i {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 100px;
  margin-top: -50px;
}

.master--layout .pagemove--container .page_move_area .btn.prev i {
  left: 10px;
  background-position: 0px 50%;
  transform: rotate(180deg);
}

.master--layout .pagemove--container .page_move_area .btn.next i {
  right: 10px;
  background-position: 0px 50%;
  transform: rotate(0deg);
}

.master--layout .pagemove--container .page_move_area.outer .btn.prev i {
  left: auto;
  right: 50%;
  margin-left: -15px;
}

.master--layout .pagemove--container .page_move_area.outer .btn.next i {
  left: 50%;
  right: auto;
  margin-left: -15px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Header */
.master--layout .header--container .inner {
  z-index: 1100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 62px;
  margin: 0;
  padding: 0 82px;
  background: var(--course-top-background);
}

.master--layout .header--container .inner:before {
  pointer-events: none;
  z-index: -1;
  content: "";
  position: absolute;
  left: calc(-100% + 2px);
  top: 0;
  width: 100%;
  height: 100%;
  background: #8B37CD;
}

.master--layout .header--container .inner:after {
  pointer-events: none;
  z-index: -1;
  content: "";
  position: absolute;
  left: calc(100% - 2px);
  top: 0;
  width: 100%;
  height: 100%;
  background: #B777E9;
}

/* 학습 목차 */
.master--layout .header--container .toc_area {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: -82px;
  background-image: url(../../img/course/bg_lesson_data.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 350px auto;
  text-align: center;
}

.master--layout .header--container .top_lesson {
  pointer-events: none;
  width: 360px;
  min-width: 360px;
  max-width: 360px;
  height: 100%;
  padding-left: 82px;
  color: #FFF;
}

.master--layout .header--container .top_lesson span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 260px;
  padding: 0 30px 0 0;
  box-sizing: border-box;
  text-align: left;
  font-family: "Roboto", "Cafe24 Ssurround Bold", sans-serif;
  font-size: 26px;
}

.master--layout .header--container .top_chapter {
  width: 420px;
  z-index: 3200;
}

.master--layout .header--container .chapter_data {
  box-sizing: border-box;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  width: 404px;
  margin-left: 16px;
  padding: 0 60px 0 24px;
  background-color: var(--course-white-background);
  border-radius: 100px;
  text-align: left;
  text-align: left;
  font-family: "Roboto", "Cafe24 Ssurround Bold", sans-serif;
  font-size: 26px;
  line-height: 44px;
  color: var(--course-title-text);
  letter-spacing: 0;
}

.master--layout .header--container .chapter_data:after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 24px;
  top: 50%;
  width: 23px;
  height: 16px;
  margin-top: -8px;
  background-image: url(../../img/course/icon_corner_data_arrow.svg);
  background-repeat: no-repeat;
  background-size: 23px auto;
  background-position: center center;  
}

.master--layout .header--container .chapter_data.on {
  background-color: var(--hover-course-base);
  color: var(--course-title-text);
}

.master--layout .header--container .chapter_data.on:after {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .master--layout .header--container .chapter_data:hover {
    background-color: var(--hover-course-base);
    color: var(--course-title-text);
  }  
}

/* 보조 메뉴 */
.master--layout .header--container .util_area {
  margin: 0 0 0 20px;
}

.master--layout .header--container .util_area ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.master--layout .header--container .util_area ul li+li {
  margin-left: 8px;
}

.master--layout .header--container .util_area .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 44px;
  padding: 0 20px 0 14px;
  background: var(--course-btn-background);
  border-radius: 30px;
}

.master--layout .header--container .util_area .btn.hover,
.master--layout .header--container .util_area .btn:hover {
  background: var(--course-color-hover);
}

.master--layout .header--container .util_area .btn i {
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 36px auto;
}

.master--layout .header--container .util_area .btn span {
  margin-left: 10px;
  font-size: 18px;
  color: var(--course-util-text-color);
}

.master--layout .header--container .util_area .page {
  margin: 0 4px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Nav */
.master--layout .nav--container {
  z-index: 3100;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 64px;
}

.master--layout .nav--container.down {
  z-index: auto;
}

.master--layout .nav--container:before {
  z-index: -1;
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 300%;
  height: 100%;
  background-color: #FBF6FF;
}

.master--layout .nav--container span {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent
}

.master--layout .nav--container .nav_main {
  width: 100%;
  height: 100%;
}

.master--layout .nav--container .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 86px;
}

/* 볼륨 */
.master--layout .nav--container .volume_area {
  position: relative;
  z-index: 4000;
  margin-left: 30px;
}

.master--layout .nav--container .volume_area .volume {
  width: 40px;
  height: 40px;
}

.master--layout .nav--container .volume_progress {
  display: none;
  position: absolute;
  top: -170px;
  left: 50%;
  width: 48px;
  height: 160px;
  margin-left: -24px;
  padding: 20px 0;
  background-color: var(--course-white-background);
  border: 1px solid var(--course-border-accent);
  border-radius: 30px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.master--layout .nav--container .volume_progress.show {
  display: block;
}

.master--layout .nav--container .volume_progress .back {
  position: relative;
  margin: 0 auto;
  width: 12px;
  height: 120px;
  background-color: #C4ADD7;
  border-radius: 10px;
  cursor: pointer;
  box-sizing: border-box;
}

.master--layout .nav--container .volume_progress .current {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 12px;
  height: 50%;
  background-color: #824FAA;
  border-radius: 10px;
}

.master--layout .nav--container .volume_progress .marker {
  position: absolute;
  left: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: url(../../img/course/volume_control_mark.png) 0px 0px / 24px auto no-repeat;
  box-shadow: 0 4px 2px rgba(159, 134, 179, 0.25);
  transform: translate(-50%, 0);
  z-index: 1;
}

.master--layout .nav--container .volume_progress .toucharea {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
}

/* 페이지 이동 */
.master--layout .nav--container .page_move_area {
  margin-right: 30px;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 182px;
  height: 40px;
  background-color: var(--course-white-background);
  border: 2px solid var(--course-border-accent);
  border-radius: 30px;
}

.master--layout .nav--container .page_move_area .page_move {
  z-index: 10;
  position: absolute;
  top: 50%;
  width: 35px;
  height: 27px;
  margin-top: -10px;
  user-select: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 35px auto;
}

.master--layout .nav--container .page_move_area .page_move.prev {
  left: 18px;
}

.master--layout .nav--container .page_move_area .page_move.next {
  right: 18px;
}

.master--layout .nav--container .page_move_area .page_move.is--disabled {
  opacity: 1;
}

.master--layout .nav--container .page_move_area .page_box {
  margin: 0 10px;
}

.master--layout .nav--container .page_move_area .page_box span {
  position: relative;
  font-family: "Roboto", "Cafe24 Ssurround Bold", "Noto Sans KR", sans-serif;
  font-size: 18px;
  color: #696969;
  text-align: center;
}

.master--layout .nav--container .page_move_area .page_box span + span {
  vertical-align: 2px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 공통 */
.master--layout .popup--container.active:before {
  content: '';
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 9999px rgba(29, 29, 29, 0.6);
}

.master--layout .popup--container.draw-mode.active:before {
  box-shadow: none;
}

.master--layout .popup--container .popup.dimmed.popup--open {
  box-shadow: none;
}

.popup--container .popup.layer .container {
  box-shadow: none;
  border-radius: 0;
}

.master--layout .popup--container .popup.layer .top {
  background: none;
  height: 80px;
  padding-left: 32px;
}

.master--layout .popup--container .popup.layer .top:before {
  bottom: -2px;
}

.master--layout .popup--container .popup.layer .top h2,
.master--layout .popup--container .popup.layer .top .tit {
  font-size: 30px;
  font-weight: 700;
  line-height: 80px;
}

.master--layout .popup--container .popup.layer .top .btn_wrap {
  right: 30px;
}

.master--layout .popup--container .popup.layer .top .btn_wrap .pop_close i {
  background-image: url("data:image/svg+xml,%3Csvg width='38' height='38' viewBox='0 0 38 38' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32.5069 5.69414C31.5814 4.76862 30.0808 4.76862 29.1553 5.69414L19.1005 15.7489L9.04573 5.69414C8.12021 4.76862 6.61965 4.76862 5.69414 5.69414C4.76862 6.61965 4.76862 8.12021 5.69414 9.04573L15.7489 19.1005L5.69414 29.1553C4.76862 30.0808 4.76862 31.5814 5.69414 32.5069C6.61965 33.4324 8.12021 33.4324 9.04573 32.5069L19.1005 22.4521L29.1553 32.5069C30.0808 33.4324 31.5814 33.4324 32.5069 32.5069C33.4324 31.5814 33.4324 30.0808 32.5069 29.1553L22.4521 19.1005L32.5069 9.04573C33.4324 8.12021 33.4324 6.61966 32.5069 5.69414Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: 38px auto;
}

.master--layout .popup--container .popup.layer .top .btn_wrap .tip_help_over {
  background-size: 38px auto;
}

.master--layout .popup--container .popup.layer .top .btn_wrap .pop_close+.tip_help_over {
  margin-right: 6px;
}

.master--layout .popup--container .popup.layer .inner {
  border-radius: 32px;
  box-shadow: inset -4px -4px 4px rgba(0, 0, 0, 0.25), inset 4px 4px 4px rgba(255, 255, 255, 0.25);
  background: #fff;
  background: -moz-linear-gradient(top, #9221EA 90px, #fff 80px);
  background: -webkit-linear-gradient(top, #9221EA 80px, #fff 80px);
  background: linear-gradient(to bottom, #9221EA 80px, #fff 80px);
  transform: none;
}

.master--layout .popup--container .popup.layer .inner .content {
  height: calc(100% - 80px);
  padding: 30px;
  border-radius: 0;
  background: none;
  font-family: "Noto Sans KR", "Roboto", sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t {
  box-sizing: border-box;
  min-width: 110px;
  height: 46px;
  padding-bottom: 2px;
  border: 2px solid #D4D4D4;
  border-radius: 8px;
  box-shadow: none;
  font-size: 24px;
  font-weight: 700;
  color: var(--hover-course-popbtn-txt);
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t span {
  margin-top: -0.1em;
  font-size: 20px;
  font-weight: 700;
  color: var(--hover-course-popbtn-txt);
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.hover {
  background-color: #AE65E9;
  border-color: #9861C5;
  color: #FFF;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.hover span {
  color: #FFF;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.deep {
  border-color: #9861C5;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.deep,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.deep span {
  color: #FFF;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.deep.hover,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.deep.hover span {
  color: var(--hover-course-popbtn-deep-txt);
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.deep.hover {
  background-color: #8837C6;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.f_cfsu,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.f_cfsu span {
  font-family: "Cafe24 Ssurround Bold";
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.f_nskr,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.f_nskr span {
  font-family: 'Noto Sans KR';
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs22,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs22 span {
  font-size: 22px;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs24,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs24 span {
  font-size: 24px;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs26,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs26 span {
  font-size: 26px;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs30 {
  width: 148px;
  height: 56px;
  padding-top: 4px;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs30,
.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t.fs30 span {
  font-size: 30px;
}

.master--layout .popup--container .popup.layer .btn_wrap .btn.b_t+.btn.b_t {
  margin-left: 8px;
}

.master--layout .popup--container .popup.layer input[type="checkbox"]+.clabel {
  font-weight: 700;
  font-size: 26px;
  color: var(--color-text-base);
  padding-left: 46px;
}

.master--layout .popup--container .popup.layer input[type="checkbox"]+.clabel.chk {
  width: 30px;
  height: 30px;
  padding: 0;
}

.master--layout .popup--container .popup.layer input[type="checkbox"]+.clabel:before {
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_i_4_1554)'%3E%3Crect width='30' height='30' rx='5' fill='%23D9D9D9' fill-opacity='0.25'/%3E%3C/g%3E%3Crect x='0.5' y='0.5' width='29' height='29' rx='4.5' stroke='%23D9D9D9'/%3E%3Cdefs%3E%3Cfilter id='filter0_i_4_1554' x='0' y='0' width='30' height='30' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_4_1554'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 30px auto;
  border: none;
}

.master--layout .popup--container .popup.layer input[type="checkbox"]+.clabel:after {
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
}

.master--layout .popup--container .popup.layer input[type="checkbox"]:checked+.clabel:after {
  background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 13.5L13.5 20L22.6875 11' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-size: 30px auto;
}

.master--layout .popup--container .popup.layer .select_wrap,
.master--layout .popup--container .popup.layer .select_wrap .btn,
.master--layout .popup--container .popup.layer .select_wrap .items {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 22px;
  font-weight: 500;
}

.master--layout .popup--container .popup.layer .select_wrap .select_toggle {
  height: 50px;
  padding: 0 40px 0 10px;
  border: 2px solid var(--course-border-accent);
  line-height: 46px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master--layout .popup--container .popup.layer .select_wrap .select_toggle:after {
  border: none;
  right: 16px;
  width: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.69441 0.622767C9.52481 -0.207628 10.8711 -0.207629 11.7015 0.622766L19.3772 8.29843C20.2076 9.12883 20.2076 10.4752 19.3772 11.3056C18.5468 12.136 17.2005 12.136 16.3701 11.3056L10.1964 5.13191L3.95113 11.3772C3.12074 12.2076 1.7744 12.2076 0.944006 11.3772C0.113609 10.5468 0.113609 9.20047 0.944006 8.37007L8.61967 0.69441C8.64279 0.671292 8.66631 0.648818 8.6902 0.626987C8.6916 0.625579 8.69301 0.624172 8.69441 0.622767Z' fill='%2300B2E3'/%3E%3C/svg%3E%0A");
  background-size: 20px auto;
  transform: rotate(180deg);
}

.master--layout .popup--container .popup.layer .select_wrap .select_toggle.on:after {
  transform: rotate(0deg);
}

.master--layout .popup--container .popup.layer .select_wrap .select_menu {
  border: 2px solid var(--course-border-accent);
}

.master--layout .popup--container .popup.layer .select_wrap .select_menu .select_list {
  padding: 0;
}

.master--layout .popup--container .popup.layer .select_wrap .select_menu .tit,
.master--layout .popup--container .popup.layer .select_wrap .select_menu .txt,
.master--layout .popup--container .popup.layer .select_wrap .select_menu .items {
  height: 50px;
  padding: 0 20px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.master--layout .popup--container .popup.layer .select_wrap .select_menu .tit {
  font-weight: 700;
}

.master--layout .popup--container .popup.layer .select_wrap .select_menu .items.hover,
.master--layout .popup--container .popup.layer .select_wrap .select_menu .items.on {
  color: var(--color-text-base);
}

.master--layout .popup--container .popup.layer .select_wrap .select_menu .items.hover:after,
.master--layout .popup--container .popup.layer .select_wrap .select_menu .items.on:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--hover-course-select);
  z-index: -1;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* 목차 */
.popup--container .popup.layer.toc.popup--open {
  border-radius: 32px;
}

.master--layout:has(.toc.popup--open) .header--container .inner {
  z-index: 4000;
}

.master--layout:has(.toc.popup--open) .header--container .chapter_data {
  background-color: var(--hover-course-base);
  color: var(--course-title-text);
}

.master--layout:has(.toc.popup--open) .header--container .chapter_data:after {
  transform: rotate(180deg);
}

.popup--container .popup.layer .container.pop_toc {
  width: 1696px;
  height: 542px;
  overflow-x: hidden;
  border-radius: 32px;
  box-shadow: none;
}

.master--layout .popup--container .popup.layer .pop_toc .inner {
  border-radius: 0;
  box-shadow: none;
  background: none;
}

.master--layout .popup--container .popup.layer .pop_toc .inner .top {
  display: none;
}

.master--layout .popup--container .popup.layer .pop_toc .inner .content {
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0);
  padding: 0;
}

.master--layout .popup--container .pop_toc .scroll_box {
  border-radius: 0;
}

.master--layout .popup--container .pop_toc .scroll_box .scroll-element {
  display: block;
}

.master--layout .popup--container .pop_toc .scroll_box .scroll-element.scroll-y {
  right: 4px;
  top: 10px;
}

.master--layout .popup--container .pop_toc .scroll_box .scroll-element_outer {
  height: calc(100% - 20px);
  box-shadow: 2px 1px 4px rgba(0, 0, 0, 0.35);
}

.master--layout .popup--container .pop_toc .scroll_box .scroll-element_track {
  background: #CDCDCD;
  border-radius: 30px;
}

.master--layout .popup--container .pop_toc .scroll_box .scroll-bar {
  background: #BF79F6;
  border-radius: 30px;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
}

.master--layout .pop_toc .class_list {
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
  padding: 5px;
  width: 1706px;
  height: 552px;
  color: #000;
  align-items: flex-start;
  font-size: 20px;
  line-height: 38px;
  background-image: url("data:image/svg+xml,%3Csvg width='1696' height='542' viewBox='0 0 1696 542' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_663_623)'%3E%3Crect width='1696' height='542' rx='32' fill='%23FBF6FF'/%3E%3Crect width='238' height='542' fill='%238B37CD'/%3E%3Cg clip-path='url(%23clip1_663_623)'%3E%3Crect width='1458' height='54' transform='translate(238)' fill='%23E9D3FB'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_663_623'%3E%3Crect width='1696' height='542' rx='32' fill='white'/%3E%3C/clipPath%3E%3CclipPath id='clip1_663_623'%3E%3Crect width='1458' height='54' fill='white' transform='translate(238)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 1696px auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.master--layout .pop_toc .class_list.show:before {
  width: 238px;
  height: 542px; 
}

.master--layout .pop_toc .class_list .class_chapter {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 238px;
  height: calc(100% - 54px);
  padding-top: 54px;
}

.master--layout .pop_toc .class_list .class_chapter .class_chapter_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.master--layout .pop_toc .class_list .class_chapter .chapter {
  cursor: pointer;
  width: 180px;
  height: 52px;
  margin: 4px 0;
  border-radius: 99px;
  font-size: 22px;
  line-height: 52px;
  color: #D6A9FA;
  text-indent: 0;
  text-align: center;
}

@media (hover: hover) {
  .master--layout .pop_toc .class_list .class_chapter .chapter:hover {
    background: #A5FFEE;
    color: #8B37CD;
  }
}

.master--layout .pop_toc .class_list .class_chapter .chapter.active {
  background: #A5FFEE;
  color: #8B37CD;
}

.master--layout .pop_toc .class_list .class_chapter .chapter .num {
  font-family: "Cafe24 Ssurround Bold";
}

.master--layout .pop_toc .class_list .class_soc {
  display: flex;
}

.master--layout .pop_toc .class_list .class_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0;
  width: 243px;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
  border-radius: 36px;
}

.master--layout .pop_toc .class_list .class_inner:before {
  content: "";
  position: relative;
  left: -2px;
  top: 0;
  width: calc(100% + 2px);
  height: 54px;
  margin: 0;
  text-align: center;
  color: #7A2CB7;
  font-size: 22px;
  font-family: "Cafe24 Ssurround Bold";
  line-height: 54px;
  text-indent: 0;
}

.master--layout .pop_toc .class_list .class_inner:nth-child(1):before {
  content: "첫째 시간";
}

.master--layout .pop_toc .class_list .class_inner:nth-child(2):before {
  content: "둘째 시간";
}

.master--layout .pop_toc .class_list .class_inner:nth-child(3):before {
  content: "셋째 시간";
}

.master--layout .pop_toc .class_list .class_inner:nth-child(4):before {
  content: "넷째 시간";
}

.master--layout .pop_toc .class_list .class_inner:nth-child(5):before {
  content: "다섯째 시간";
}

.master--layout .pop_toc .class_list .class_inner:nth-child(6):before {
  content: "여섯째 시간";
}

.master--layout .pop_toc .class_list .class {
  display: flex;
  width: 243px;
  height: 64px;
  padding: 0;
  box-sizing: border-box;
  text-align: center;
  border-radius: 0;
  font-size: 18px;
  color: #9F7FB9;
  text-indent: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.master--layout .pop_toc .class_list .class.active {
  background: #AD75DA;
  color: #FFF;
}

@media (hover: hover) {
  .master--layout .pop_toc .class_list .class:hover {
    background: #AD75DA;
    color: #FFF;
  }
}

.master--layout .pop_toc .class_list .class_inner:nth-child(1) .class:nth-child(1),
.master--layout .pop_toc .class_list .class_inner:nth-child(1) .class:nth-child(2),
.master--layout .pop_toc .class_list .class_inner:nth-child(2) .class:nth-child(1),
.master--layout .pop_toc .class_list .class_inner:nth-child(2) .class:nth-child(7),
.master--layout .pop_toc .class_list .class_inner:nth-child(3) .class:nth-child(1),
.master--layout .pop_toc .class_list .class_inner:nth-child(4) .class:nth-child(1),
.master--layout .pop_toc .class_list .class_inner:nth-child(4) .class:nth-child(6),
.master--layout .pop_toc .class_list .class_inner:nth-child(5) .class:nth-child(1),
.master--layout .pop_toc .class_list .class_inner:nth-child(6) .class:nth-child(1),
.master--layout .pop_toc .class_list .class_inner:nth-child(6) .class:nth-child(2){
  font-family: "Cafe24 Ssurround Bold";
}


/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 진도 관리 */
.master--layout .popup--container .pop_progress:not(.save) {
  width: 1220px;
  height: 714px;
}

.master--layout .popup--container .pop_progress.save {
  width: 634px;
  height: 200px;
}

.master--layout .popup--container .popup.layer .pop_progress:not(.save) .content {
  padding-top: 0px;
  padding-bottom: 10px;
}

.master--layout .popup--container .popup .pop_progress .scroll_box {
  width: calc(100% + 10px);
  height: calc(100% - 152px);
}

.master--layout .popup--container .popup .pop_progress .list_header,
.master--layout .popup--container .pop_progress .scroll_box .list_body {
  width: 1160px;
}

.master--layout .popup--container .popup .pop_progress .list_header {
  height: 70px;
  border-top: none;
  border-bottom: 3px solid #A69BAF;
}

.master--layout .popup--container .popup .pop_progress .list_header>li {
  font-size: 26px;
  line-height: 70px;
}

.master--layout .popup--container .popup .pop_progress .list_body .items>* {
  height: 78px;
  line-height: 78px;
}

.master--layout .popup--container .popup .pop_progress .list_header>li+li:before,
.master--layout .popup--container .popup .pop_progress .list_body .items>*+*:before {
  display: none;
}

.master--layout .popup--container .popup .pop_progress .list_header>li+li:before {
  border-left: var(--default-border-deep);
}

.master--layout .popup--container .popup .pop_progress .list_body .items>*+*:before {
  border-left: var(--default-border-dull);
}

.master--layout .popup--container .pop_progress .list_header>li:nth-child(1),
.master--layout .popup--container .pop_progress .list_body .items>*:nth-child(1) {
  width: 70px;
}

.master--layout .popup--container .pop_progress .list_header>li:nth-child(2),
.master--layout .popup--container .pop_progress .list_body .items>*:nth-child(2) {
  width: 120px;
}

.master--layout .popup--container .pop_progress .list_header>li:nth-child(3),
.master--layout .popup--container .pop_progress .list_body .items>*:nth-child(3) {
  width: 210px;
}

.master--layout .popup--container .pop_progress .list_header>li:nth-child(5),
.master--layout .popup--container .pop_progress .list_body .items>*:nth-child(5) {
  width: 180px;
}

.master--layout .popup--container .popup .pop_progress .list_body>li {
  border-bottom: 1px solid var(--color-border-dull);
}

.master--layout .popup--container .popup .pop_progress .list_body .items {
  height: 78px;
  font-size: 24px;
  color: #5F5F5F;
}

.master--layout .popup--container .popup .pop_progress .items .text_clip {
  margin: 0 30px;
  text-align: center;
}

.master--layout .popup--container .popup .pop_progress .items .check_wrap {
  position: relative;
  left: auto;
  top: auto;
}

.master--layout .popup--container .popup .pop_progress .check_wrap label {
  margin-top: -15px;
  margin-left: -15px;
}

.master--layout .popup--container .popup .pop_progress .btn_wrap.bottom {
  margin-top: 0 !important;
  justify-content: space-between;
  align-items: center;
  height: 90px;
  border-top: 3px solid #A69BAF; 
}

.master--layout .popup--container .popup .pop_progress .btn_wrap.bottom .clabel {
  line-height: 50px;
}

.master--layout .popup--container .popup .pop_progress .btn_wrap.bottom .clabel:before,
.master--layout .popup--container .popup .pop_progress .btn_wrap.bottom .clabel:after {
  top: 4px;
}

.master--layout .popup--container .popup .pop_progress .btn_wrap.bottom .b_t.hover .icon_insert {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 10H17.5' stroke='%23CCC' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 17.5L10 2.5' stroke='%23CCC' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.master--layout .popup--container .popup .pop_progress .btn.tip_help_over.hover span {
  left: -400px;
  top: -140px;
  width: 504px;
  height: 134px;
  padding: 26px 0 0 30px;
  color: #477069;
  font-size: 20px;
  background-color: rgba(0, 0, 0, 0);
  background-image: url("data:image/svg+xml,%3Csvg width='504' height='134' viewBox='0 0 504 134' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_665_770)'%3E%3Cpath d='M28 8C19.1641 8 12 15.1631 12 24V90C12 98.8369 19.1641 106 28 106H408.721C409.926 106 411.066 106.543 411.826 107.478L418.896 116.179C420.496 118.149 423.504 118.149 425.104 116.179L432.174 107.478C432.934 106.543 434.074 106 435.279 106H476C484.836 106 492 98.8369 492 90V24C492 15.1631 484.836 8 476 8H28Z' fill='%23D4F7F0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_665_770' x='0' y='0' width='504' height='133.657' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_665_770'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_665_770' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.master--layout .popup--container .popup .pop_progress .items .no_data {
  flex: 1 0 0;
  width: 100%;
  margin-top: 10px;
  text-align: center;
  color: #949494;
}

.master--layout .popup--container .popup .pop_progress .items .no_data:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 8px;
  background-color: #EEEEEE;
}

.master--layout .popup--container .pop_progress .btn_wrap.bottom .hover .icon_del {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='4' viewBox='0 0 20 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 2H17.5' stroke='%23FFFFFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 진도 저장 */
.master--layout .popup--container .popup .pop_progress.save .input_box input,
.master--layout .popup--container .popup .pop_progress.save .input_box span {
  right: -38px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

.master--layout .popup--container .popup .pop_progress.save .input_box input {
  border: 1px solid var(--color-border-dull);
  border-radius: 8px;
  box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.1);
}

.master--layout .popup--container .popup .pop_progress.save .btn_wrap .b_t {
  width: 180px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* 수업 도우미 */
.master--layout .dropdown_wrap.type_tools {
  top: 80px !important;
  width: 173px;
  height: 368px;
}

.master--layout .dropdown_wrap.type_tools .dropdown_menu {
  width: 172px;
  height: 396px;
  background: none;
}

.master--layout .dropdown_wrap.type_tools .dropdown_menu:before {
  z-index: -1;
  content: "";
  position: absolute;
  left: -20px;
  top: -42px;
  width: 213px;
  height: 436px;
  background: url(../../img/course/type_tools_background.png) 0px 0px / 100% auto no-repeat;;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list {
  padding: 9px 10px 0 0;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list {
  padding: 8px 14px;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li,
.master--layout .dropdown_wrap .dropdown_list .btn,
.master--layout .dropdown_wrap .dropdown_list .layer_wrap {
  max-height: 44px;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li+li {
  border-top: 1px dotted var(--course-border-line);
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li .btn span {
  height: 44px;
  color: #9728ED;
  font-size: 18px;
  line-height: 44px;
}
.master--layout .dropdown_wrap.type_tools .dropdown_list li .btn.hover {
  background-color: #DDB7FC;
  border-radius: 8px;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li .btn.hover span {
  color: #9728ED;
}

.master--layout .dropdown_wrap .btn_wrap {
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Alert */
.master--layout .alert_msg.layer .inner {
  width: 830px;
  min-height: 290px;
  padding: 30px;
  border-radius: 64px;
  border: 8px solid var(--color-assort);
  box-shadow: 18px 38px 40px rgba(0, 0, 0, 0.16), 0 0 0 9999px rgba(29, 29, 29, 0.6);
}

.master--layout .alert_msg:not(.dimmed) .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 634px;
  height: 218px;
  min-height: 218px;
  padding: 50px;
  border: none;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.15), 0px 4px 20px rgba(0,0,0,0.15);
  border-radius: 12px;
}

.master--layout .alert_msg.layer .inner .top {
  justify-content: center;
  align-items: center;
  position: relative;
  width: calc(100% + 100px);
  height: 90px;
  top: -40px;
  left: -50px;
  background-color: var(--color-assort);
  border-radius: 64px;
  box-shadow: 18px 2px 19px rgba(0, 0, 0, 0.16);
  color: #FFF;
  text-align: center;
}

.master--layout .alert_msg.layer .inner .top:before {
  display: none;
}

.master--layout .alert_msg.layer .inner .top h1,
.master--layout .alert_msg.layer .inner .top h2,
.master--layout .alert_msg.layer .inner .top .tit,
.master--layout .alert_msg.layer .inner .top span {
  font-family: "Cafe24 Ssurround Bold";
  font-weight: 700;
  font-size: 42px;
  line-height: 90px;
}

.master--layout .alert_msg.layer .inner .top .btn_wrap {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 50px;
  height: 50px;
  margin-top: -25px;
}

.master--layout .alert_msg.layer .inner .top .btn_wrap .btn {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: none;
}

.master--layout .alert_msg.layer .inner .top .btn_wrap .pop_close i {
  background-image: url("data:image/svg+xml,%3Csvg width='31' height='30' viewBox='0 0 31 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.86544 1.3508C0.0643818 3.15186 0.0643851 6.07196 1.86545 7.87302L8.99243 15L1.98795 22.0045C0.186893 23.8055 0.186889 26.7256 1.98795 28.5267C3.78901 30.3278 6.70911 30.3278 8.51017 28.5267L15.5146 21.5222L22.5191 28.5267C24.3202 30.3278 27.2403 30.3278 29.0413 28.5267C30.8424 26.7256 30.8424 23.8055 29.0413 22.0045L22.0369 15L29.1638 7.87302C30.9649 6.07196 30.9649 3.15186 29.1639 1.3508C27.3628 -0.450265 24.4427 -0.450265 22.6416 1.35079L15.5146 8.47778L8.38766 1.35079C6.5866 -0.450265 3.6665 -0.450265 1.86544 1.3508Z' fill='white'/%3E%3C/svg%3E%0A");
  background-size: auto 30px;
}

.master--layout .alert_msg.layer .inner .txt {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 50px;
  min-height: 90px;
  font-family: "Cafe24 Ssurround Bold";
  font-weight: 700;
  font-size: 30px;
  text-align: center;
  box-sizing: border-box;
}

.master--layout .alert_msg.layer .inner>.btn_wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 80px;
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 106px;
  height: 60px;
  padding: 0 20px;
  margin: 0 10px;
  border-radius: 36px;
  background-color: var(--color-assort);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t span {
  margin-top: -0.1em;
  font-family: "Cafe24 Ssurround Bold";
  font-size: 24px;
  color: #FFF;
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.hover {
  background-color: var(--hover-course-popbtn-deep);
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.hover,
.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.hover span {
  color: var(--hover-course-popbtn-deep-txt);
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.dull {
  background-color: var(--course-btn-dull);
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.dull.hover {
  background-color: var(--hover-course-popbtn-dull);
}

.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.dull.hover,
.master--layout .alert_msg.layer .inner>.btn_wrap .b_t.dull.hover span {
  color: var(--hover-course-popbtn-deep-txt);
}

.master--layout .alert_msg.layer:not(.dimmed) .inner .txt {
  padding: 0;
  min-height: 28px;
  font-size: 28px;
}

.master--layout .alert_msg.layer:not(.dimmed) .inner .btn_wrap {
  height: 50px;
  min-height: 50px;
}

.master--layout .alert_msg.layer:not(.dimmed) .inner .btn_wrap .b_t {
  min-width: 82px;
  padding: 0 10px;
  height: 50px;
  border-radius: 8px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Tooltip */
.master--layout .tooltip--container .tooltip {
  padding: 12px 18px;
  background: #D4F7F0;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  color: #477069;
  border: none;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
}

.master--layout .tooltip--container .tooltip.follwing_capture,
.master--layout .tooltip--container .tooltip.follwing_text,
.master--layout .tooltip--container .tooltip.follwing_draw_text {
  font-size: 13px;
  padding: 6px 8px;
  background-color: var(--color-tip-box);
  border: 1px solid #BDBDBD;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}

.master--layout .tooltip--container .tooltip.progress_save,
.master--layout .tooltip--container .tooltip.progress_insert {
  width: 417px;
  height: 102px;
  background: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: none;
}

.master--layout .tooltip--container .tooltip.progress_save {
  padding: 46px 0 0 0;
  background-image: url("data:image/svg+xml,%3Csvg width='417' height='102' viewBox='0 0 417 102' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_667_262)'%3E%3Cpath d='M28 86C19.1641 86 12 78.8369 12 70V36C12 27.1631 19.1641 20 28 20H338.721C339.926 20 341.066 19.4572 341.826 18.5224L348.896 9.82087C350.496 7.8507 353.504 7.8507 355.104 9.82087L362.174 18.5224C362.934 19.4572 364.074 20 365.279 20H389C397.836 20 405 27.1631 405 36V70C405 78.8369 397.836 86 389 86H28Z' fill='%23D4F7F0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_667_262' x='0' y='0.343262' width='417' height='101.657' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_667_262'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_667_262' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
}

.master--layout .tooltip--container .tooltip.progress_insert {
  padding: 32px 0 0 0;
  background-image: url("data:image/svg+xml,%3Csvg width='417' height='102' viewBox='0 0 417 102' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_667_266)'%3E%3Cpath d='M28 8C19.1641 8 12 15.1631 12 24V58C12 66.8369 19.1641 74 28 74H338.721C339.926 74 341.066 74.5428 341.826 75.4776L348.896 84.1791C350.496 86.1493 353.504 86.1493 355.104 84.1791L362.174 75.4776C362.934 74.5428 364.074 74 365.279 74H389C397.836 74 405 66.8369 405 58V24C405 15.1631 397.836 8 389 8H28Z' fill='%23D4F7F0'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_667_266' x='0' y='0' width='417' height='101.657' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_667_266'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_667_266' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
}

.master--layout .popup--container .btn.tip_help_over.hover span {
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-tip-text);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Common Images */
.master--layout .pagemove--container .page_move_area .svg_i {
  background-image: url(../../img/course/btn_page_move.svg);
  background-position: 0 50%;
  background-size: 29px auto;
}

.master--layout .pagemove--container .page_move_area .btn.hover .svg_i {
  background-image: url(../../img/course/btn_page_move_hover.svg);
}

.master--layout .header--container .util_area .util_ebook .svg_i,
.master--layout .popup--container .pop_guide .help_area .list_body .row .guide_icon_ebook i {
  background-image: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 9.75C8.5 8.88805 8.84241 8.0614 9.4519 7.4519C10.0614 6.84241 10.888 6.5 11.75 6.5H24.25C25.112 6.5 25.9386 6.84241 26.5481 7.4519C27.1576 8.0614 27.5 8.88805 27.5 9.75V25.75C27.5 25.9489 27.421 26.1397 27.2803 26.2803C27.1397 26.421 26.9489 26.5 26.75 26.5H10.018C10.139 27.348 10.868 28 11.75 28H26.75C26.9489 28 27.1397 28.079 27.2803 28.2197C27.421 28.3603 27.5 28.5511 27.5 28.75C27.5 28.9489 27.421 29.1397 27.2803 29.2803C27.1397 29.421 26.9489 29.5 26.75 29.5H11.75C10.888 29.5 10.0614 29.1576 9.4519 28.5481C8.84241 27.9386 8.5 27.112 8.5 26.25V9.75ZM12 11.25V12.25C12 12.94 12.56 13.5 13.25 13.5H22.75C23.44 13.5 24 12.94 24 12.25V11.25C24 10.56 23.44 10 22.75 10H13.25C12.56 10 12 10.56 12 11.25Z' fill='white'/%3E%3C/svg%3E%0A");
}

.master--layout .header--container .util_area .util_dictionary .svg_i,
.master--layout .popup--container .pop_guide .help_area .list_body .row .guide_icon_dictionary i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8 8a1 1 0 0 1 1-1h1v24H9a1 1 0 0 1-1-1V8Zm3 23h17a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H11v24Zm5.304-17.463-1.167 2.102a.167.167 0 0 0 .146.247h9.41a.167.167 0 0 0 .14-.257l-2.478-3.827c-.408-.63-1.276-.611-1.66.035L19 14.685l-1.095-1.315c-.45-.54-1.255-.456-1.6.167Zm-.801 12.584a.626.626 0 0 1-.346.367c-.178.086-.386.102-.623.05a.894.894 0 0 1-.307-.16.651.651 0 0 1-.178-.228.717.717 0 0 1-.049-.257c0-.086.013-.169.04-.248l2.145-6.08a.873.873 0 0 1 .287-.377c.151-.125.375-.188.672-.188.296 0 .52.063.672.188.152.12.25.245.297.377l2.145 6.1c.079.23.076.416-.01.555-.086.139-.234.238-.445.297-.25.073-.461.067-.633-.02a.708.708 0 0 1-.346-.426l-.455-1.359h-2.392l-.474 1.409Zm2.461-2.609-.79-2.37-.791 2.37h1.581Zm6.514 2.797c-.363.218-.874.327-1.533.327-.738 0-1.282-.139-1.63-.416-.344-.271-.521-.608-.535-1.012-.04-.575.172-1.005.633-1.289.468-.29 1.163-.436 2.086-.436h.83c-.013-.212-.125-.394-.336-.546-.204-.159-.484-.238-.84-.238-.396 0-.735.06-1.018.179-.165.066-.31.099-.435.099a.477.477 0 0 1-.465-.298.753.753 0 0 1-.06-.277c0-.225.116-.394.347-.506.204-.106.458-.189.76-.248.31-.066.614-.1.91-.1.627 0 1.15.097 1.572.288.422.186.732.433.93.744.204.304.306.642.306 1.012v2.31c0 .212-.073.374-.218.486-.145.12-.342.179-.593.179-.342 0-.58-.086-.711-.258Zm-2.047-1.26c0 .146.06.262.178.348.119.086.284.129.494.129.323 0 .61-.076.86-.229.251-.152.376-.333.376-.545v-.198h-.87c-.395 0-.669.04-.82.119a.4.4 0 0 0-.218.377Zm-5.556-13.593a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.master--layout .header--container .util_area .util_dataroom .svg_i,
.master--layout .popup--container .pop_guide .help_area .list_body .row .guide_icon_dataroom i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cpath fill='%23fff' d='M14.7 21.5a1.5 1.5 0 0 0-1.5-1.5H9a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-4.2a1.5 1.5 0 0 0-1.5 1.5 1.5 1.5 0 0 1-1.5 1.5h-3.6a1.5 1.5 0 0 1-1.5-1.5Z'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12.87 6a2 2 0 0 0-1.908 1.4L7.631 18h7.77a1.5 1.5 0 0 1 1.5 1.5v.4a1.1 1.1 0 0 0 2.2 0v-.4a1.5 1.5 0 0 1 1.5-1.5h7.773L25.042 7.4A2 2 0 0 0 23.134 6H12.87Zm6.131 3a1 1 0 1 0-2 0v4.158l-1.755-1.14a1 1 0 1 0-1.09 1.678l3.3 2.143a1 1 0 0 0 1.09 0l3.3-2.143a1 1 0 0 0-1.09-1.678l-1.755 1.14V9Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.master--layout .header--container .util_area .util_tools .svg_i,
.master--layout .popup--container .pop_guide .help_area .list_body .row .guide_icon_tools i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cpath stroke='%23fff' stroke-width='2.6' d='M8.971 11.194a2 2 0 0 1 2.528-2.12l3.319.925a2 2 0 0 0 1.337-.094l3.157-1.378a2 2 0 0 1 2.799 1.748l.145 3.443a2 2 0 0 0 .502 1.242l2.287 2.578a2 2 0 0 1-.798 3.201l-3.23 1.203a2 2 0 0 0-1.026.861l-1.745 2.971a2 2 0 0 1-3.291.23l-2.141-2.699a2 2 0 0 0-1.137-.71l-3.365-.741a2 2 0 0 1-1.236-3.06l1.906-2.87a2 2 0 0 0 .324-1.3l-.335-3.43Z'/%3E%3Cpath fill='%23fff' d='M20.793 24.589a1.39 1.39 0 1 1 2.115-1.792l4.296 5.928a.834.834 0 0 1-1.269 1.075l-5.142-5.211Z'/%3E%3Cpath fill='%23fff' d='M24.653 27.55a.4.4 0 0 1 .505-.425l1.441.402a.4.4 0 0 0 .268-.019l1.371-.598a.4.4 0 0 1 .56.35l.063 1.495a.4.4 0 0 0 .1.248l.994 1.12a.4.4 0 0 1-.16.64l-1.402.522a.4.4 0 0 0-.206.172l-.757 1.29a.4.4 0 0 1-.659.047l-.93-1.173a.4.4 0 0 0-.227-.142l-1.461-.322a.4.4 0 0 1-.247-.612l.827-1.246a.4.4 0 0 0 .065-.26l-.145-1.49Z'/%3E%3Crect width='2.013' height='6.039' x='29.76' y='17.54' fill='%23fff' rx='1.006' transform='rotate(-109.963 29.76 17.54)'/%3E%3Crect width='2.013' height='5.435' x='29.096' y='20.123' fill='%23fff' rx='1.006' transform='rotate(-72.704 29.096 20.123)'/%3E%3Crect width='2.013' height='5.435' fill='%23fff' rx='1.006' transform='scale(1 -1) rotate(-36.704 -7.327 -47.52)'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M11.498 9.073a2 2 0 0 0-2.528 2.121l.335 3.43a2 2 0 0 1-.324 1.3l-1.906 2.87a2 2 0 0 0 1.236 3.06l3.365.74a2 2 0 0 1 1.137.711l2.141 2.7a2 2 0 0 0 3.291-.23l1.745-2.972a2 2 0 0 1 1.027-.861l3.229-1.203a2 2 0 0 0 .798-3.201l-2.286-2.578a2 2 0 0 1-.502-1.242l-.146-3.443a2 2 0 0 0-2.798-1.748l-3.158 1.378a2 2 0 0 1-1.337.093l-3.32-.925Zm1.429 4.154a.3.3 0 0 0-.38.318l.278 2.837a.3.3 0 0 1-.05.195L11.2 18.952a.3.3 0 0 0 .185.459l2.784.613a.3.3 0 0 1 .17.107l1.772 2.233a.3.3 0 0 0 .493-.035l1.444-2.458a.3.3 0 0 1 .154-.129l2.671-.995a.3.3 0 0 0 .12-.48L19.1 16.135a.3.3 0 0 1-.075-.187l-.12-2.848a.3.3 0 0 0-.42-.262l-2.613 1.14a.3.3 0 0 1-.2.014l-2.746-.765Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.master--layout .header--container .util_area .util_progress .svg_i,
.master--layout .popup--container .pop_guide .help_area .list_body .row .guide_icon_progress i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18 6a2 2 0 1 0-4 0h-1a1 1 0 0 0-1 1v2h8V7a1 1 0 0 0-1-1h-1ZM24 32a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm2.207-5.293a1 1 0 0 0-1.414-1.414L23 27.086l-.293-.293a1 1 0 0 0-1.414 1.414l1 1a1 1 0 0 0 1.414 0l2.5-2.5Z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M10 8H8a1 1 0 0 0-1 1v20a1 1 0 0 0 1 1h10.803A5.972 5.972 0 0 1 18 27c0-1.093.292-2.117.803-3H17a1 1 0 1 1 0-2h3.682c.95-.632 2.091-1 3.318-1 .34 0 .675.028 1 .083V9a1 1 0 0 0-1-1h-2v3H10V8Zm4.207 7.207a1 1 0 0 0-1.414-1.414L11 15.586l-.293-.293a1 1 0 0 0-1.414 1.414l1 1a1 1 0 0 0 1.414 0l2.5-2.5Zm0 5.086a1 1 0 0 1 0 1.414l-2.5 2.5a1 1 0 0 1-1.414 0l-1-1a1 1 0 1 1 1.414-1.414l.293.293 1.793-1.793a1 1 0 0 1 1.414 0ZM22 15h-5a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.master--layout .header--container .util_area .util_help .svg_i,
.master--layout .popup--container .pop_guide .help_area .list_body .row .guide_icon_help i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' fill='none'%3E%3Cmask id='a' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M18 6C11.373 6 6 11.373 6 18s5.373 12 12 12 12-5.373 12-12S24.627 6 18 6Zm4.738 7.856c0-.66-.174-1.26-.522-1.8-.348-.54-.882-.972-1.602-1.296-.708-.324-1.59-.486-2.646-.486-1.032 0-1.902.156-2.61.468-.696.3-1.23.678-1.602 1.134-.156.192-.234.39-.234.594 0 .312.168.594.504.846.204.156.474.234.81.234.492 0 .912-.15 1.26-.45l.288-.288c.156-.144.354-.264.594-.36.252-.096.558-.144.918-.144.72 0 1.224.138 1.512.414.288.276.432.678.432 1.206 0 .492-.15.93-.45 1.314-.288.384-.684.744-1.188 1.08-.696.408-1.206.876-1.53 1.404-.312.516-.468 1.2-.468 2.052 0 .768.486 1.152 1.458 1.152.468 0 .81-.108 1.026-.324.216-.216.324-.456.324-.72 0-.396.018-.702.054-.918.036-.216.12-.414.252-.594.144-.18.36-.372.648-.576a16.044 16.044 0 0 0 1.44-1.17c.384-.36.702-.768.954-1.224.252-.468.378-.984.378-1.548Zm-6.876 9.486c0 .48.168.852.504 1.116.336.276.762.414 1.278.414s.942-.138 1.278-.414c.348-.264.522-.636.522-1.116 0-.48-.174-.858-.522-1.134-.336-.276-.762-.414-1.278-.414s-.942.138-1.278.414c-.336.276-.504.654-.504 1.134Z' clip-rule='evenodd'/%3E%3C/mask%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M18 6C11.373 6 6 11.373 6 18s5.373 12 12 12 12-5.373 12-12S24.627 6 18 6Zm4.738 7.856c0-.66-.174-1.26-.522-1.8-.348-.54-.882-.972-1.602-1.296-.708-.324-1.59-.486-2.646-.486-1.032 0-1.902.156-2.61.468-.696.3-1.23.678-1.602 1.134-.156.192-.234.39-.234.594 0 .312.168.594.504.846.204.156.474.234.81.234.492 0 .912-.15 1.26-.45l.288-.288c.156-.144.354-.264.594-.36.252-.096.558-.144.918-.144.72 0 1.224.138 1.512.414.288.276.432.678.432 1.206 0 .492-.15.93-.45 1.314-.288.384-.684.744-1.188 1.08-.696.408-1.206.876-1.53 1.404-.312.516-.468 1.2-.468 2.052 0 .768.486 1.152 1.458 1.152.468 0 .81-.108 1.026-.324.216-.216.324-.456.324-.72 0-.396.018-.702.054-.918.036-.216.12-.414.252-.594.144-.18.36-.372.648-.576a16.044 16.044 0 0 0 1.44-1.17c.384-.36.702-.768.954-1.224.252-.468.378-.984.378-1.548Zm-6.876 9.486c0 .48.168.852.504 1.116.336.276.762.414 1.278.414s.942-.138 1.278-.414c.348-.264.522-.636.522-1.116 0-.48-.174-.858-.522-1.134-.336-.276-.762-.414-1.278-.414s-.942.138-1.278.414c-.336.276-.504.654-.504 1.134Z' clip-rule='evenodd'/%3E%3Cpath fill='%23fff' d='m20.614 10.76-.832 1.819.011.005.821-1.824Zm-5.256-.018.792 1.837.007-.004.008-.003-.807-1.83Zm-1.602 1.134-1.55-1.264-.002.003 1.552 1.261Zm.27 1.44 1.215-1.589-.008-.005-.007-.006-1.2 1.6Zm2.07-.216 1.306 1.515.056-.049.052-.052-1.414-1.414Zm.288-.288-1.357-1.47-.029.027-.028.029 1.414 1.414Zm.594-.36-.712-1.869-.015.006-.016.006.743 1.857Zm2.412 2.79-1.576-1.231-.012.015-.012.016 1.6 1.2Zm-1.188 1.08 1.011 1.725.05-.029.048-.032-1.109-1.664Zm-1.53 1.404-1.705-1.046-.007.011 1.712 1.035Zm2.394 1.242 1.973.329-1.973-.329Zm.252-.594-1.562-1.25-.026.033-.025.034 1.613 1.183Zm.648-.576 1.156 1.632.014-.01.014-.01-1.184-1.612Zm1.44-1.17 1.366 1.46h.002l-1.368-1.46Zm.954-1.224 1.75.967.006-.01.005-.009-1.761-.948Zm-5.994 9.054 1.27-1.545-.017-.014-.017-.014-1.236 1.573Zm2.556 0-1.209-1.593-.03.023-.03.024 1.269 1.546Zm0-2.25-1.27 1.546.014.01.013.011 1.243-1.567Zm-2.556 0 1.27 1.546-1.27-1.546ZM8 18c0-5.523 4.477-10 10-10V4C10.268 4 4 10.268 4 18h4Zm10 10c-5.523 0-10-4.477-10-10H4c0 7.732 6.268 14 14 14v-4Zm10-10c0 5.523-4.477 10-10 10v4c7.732 0 14-6.268 14-14h-4ZM18 8c5.523 0 10 4.477 10 10h4c0-7.732-6.268-14-14-14v4Zm2.535 5.14c.134.207.203.43.203.716h4a5.253 5.253 0 0 0-.84-2.883l-3.363 2.166Zm-.742-.556c.449.202.647.408.742.555l3.362-2.166c-.6-.933-1.471-1.59-2.462-2.037l-1.642 3.648Zm-1.825-.31c.866 0 1.442.135 1.814.305l1.664-3.638c-1.045-.478-2.232-.667-3.478-.667v4Zm-1.803.298c.384-.17.96-.298 1.803-.298v-4c-1.222 0-2.385.183-3.416.638l1.613 3.66Zm-.86.568c.12-.146.361-.353.845-.561l-1.584-3.674c-.908.392-1.735.94-2.36 1.707l3.1 2.528Zm.217-.67c0 .16-.032.307-.08.431a.896.896 0 0 1-.134.236l-3.104-2.522c-.382.47-.682 1.1-.682 1.855h4Zm-.296-.754c-.015-.011.06.04.14.176.09.152.156.355.156.578h-4c0 1.145.653 1.958 1.304 2.446l2.4-3.2Zm-.39-.166c-.033 0 .166-.006.405.177l-2.43 3.178c.647.495 1.386.645 2.025.645v-4Zm-.046.035a.224.224 0 0 1 .071-.036h.006l-.031.001v4c.935 0 1.828-.299 2.566-.935l-2.612-3.03Zm.18-.187-.288.288 2.828 2.828.288-.288-2.828-2.828Zm1.265-.803a3.907 3.907 0 0 0-1.208.747l2.714 2.94a.374.374 0 0 1-.055.042l.035-.015-1.486-3.714Zm1.661-.287a4.57 4.57 0 0 0-1.63.275l1.424 3.738c-.021.008-.019.004.016-.001.036-.006.098-.012.19-.012v-4Zm2.896.97c-.864-.828-2.037-.97-2.896-.97v4c.117 0 .208.006.275.013a.796.796 0 0 1 .115.02c.027.007-.102-.022-.262-.175l2.768-2.888Zm1.048 2.65c0-.89-.251-1.886-1.048-2.65l-2.768 2.888a.706.706 0 0 1-.175-.261c-.021-.06-.009-.063-.009.023h4Zm-.874 2.545c.578-.739.874-1.611.874-2.545h-4a.261.261 0 0 1-.003.04c0 .007-.002.01-.002.01l-.002.005a.236.236 0 0 1-.019.028l3.152 2.462Zm-1.655 1.513c.646-.43 1.225-.938 1.679-1.544l-3.2-2.4c-.122.162-.335.374-.697.616l2.218 3.328Zm-.934.786c.108-.176.34-.434.836-.725l-2.022-3.45c-.897.525-1.684 1.203-2.224 2.083l3.41 2.092Zm-.173 1.006c0-.63.119-.917.18-1.017l-3.424-2.07c-.563.932-.756 2.013-.756 3.087h4Zm-.542-.848c-.277 0-.115-.064.146.143.146.115.26.268.33.432a.749.749 0 0 1 .066.273h-4c0 .834.287 1.772 1.125 2.433.747.59 1.638.719 2.333.719v-4Zm-.388.262c.155-.156.311-.224.393-.25.073-.023.083-.012-.005-.012v4c.722 0 1.69-.16 2.44-.91l-2.828-2.828Zm-.262.694c0-.15.033-.304.095-.443a.852.852 0 0 1 .167-.251l2.828 2.828c.527-.527.91-1.256.91-2.134h-4Zm.081-1.247a7.827 7.827 0 0 0-.081 1.247h4c0-.359.018-.536.027-.59l-3.946-.657Zm.612-1.448a3.373 3.373 0 0 0-.612 1.448l3.946.658a.634.634 0 0 1-.108.26l-3.226-2.366Zm1.105-1.025c-.369.261-.749.577-1.054.959l3.124 2.498c-.014.017-.007.006.037-.033.042-.038.108-.092.205-.16l-2.312-3.264Zm1.23-.998c-.296.276-.71.615-1.258 1.018l2.368 3.224c.627-.46 1.174-.902 1.622-1.322l-2.732-2.92Zm.57-.731c-.15.27-.339.513-.572.732l2.736 2.918a6.952 6.952 0 0 0 1.336-1.716l-3.5-1.934Zm.128-.581c0 .254-.053.441-.139.6l3.522 1.896a5.21 5.21 0 0 0 .617-2.496h-4Zm-3.136 9.03a.74.74 0 0 1 .209.272c.051.114.051.19.051.184h-4c0 1.008.386 1.995 1.268 2.689l2.472-3.146Zm.042-.014c-.08 0-.104-.01-.09-.006a.305.305 0 0 1 .082.047l-2.54 3.09c.758.623 1.66.869 2.548.869v-4Zm.009.04a.305.305 0 0 1 .081-.046c.014-.005-.01.006-.09.006v4c.889 0 1.79-.246 2.548-.869l-2.54-3.09Zm-.209.43c0-.004.002-.088.058-.208a.736.736 0 0 1 .211-.27l2.418 3.187c.9-.683 1.313-1.675 1.313-2.709h-4Zm.235.433a.672.672 0 0 1-.235-.433h4c0-1.034-.41-2.012-1.28-2.701l-2.485 3.134Zm-.035.019c.08 0 .104.01.09.006a.305.305 0 0 1-.082-.047l2.54-3.09c-.758-.623-1.66-.869-2.548-.869v4Zm-.008-.04a.305.305 0 0 1-.082.046c-.014.005.01-.006.09-.006v-4c-.889 0-1.79.246-2.547.869l2.539 3.09Zm.226-.412c0-.005 0 .064-.046.169a.677.677 0 0 1-.18.242l-2.54-3.09c-.85.698-1.234 1.671-1.234 2.679h4Z' mask='url(%23a)'/%3E%3C/svg%3E");
}

.master--layout .nav--container .page_move_area .page_move.prev .svg_i {
  background-image: url(../../img/course/page_move_prev.png);
}

.master--layout .nav--container .page_move_area .page_move.next .svg_i {
  background-image: url(../../img/course/page_move_next.png);
}

.master--layout .nav--container .page_move_area .page_move.prev.hover .svg_i {
  background-image: url(../../img/course/page_move_prev_hover.png);
}

.master--layout .nav--container .page_move_area .page_move.next.hover .svg_i {
  background-image: url(../../img/course/page_move_next_hover.png);
}

.master--layout .nav--container .page_move_area .page_move.prev.is--disabled .svg_i {
  opacity: 0.3;
}

.master--layout .nav--container .page_move_area .page_move.next.is--disabled .svg_i {
  opacity: 0.3;
}

.master--layout .nav--container .volume_area .volume .svg_i {
  background-image: url(../../img/course/btn_volum_type.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 80px auto;
}

.master--layout .nav--container .volume_area .volume.hover .svg_i {
  background-position: -40px 0;
}

.master--layout .nav--container .volume_area .volume.mute .svg_i {
  background-position: 0 -40px;
}

.master--layout .nav--container .volume_area .volume.mute.hover .svg_i {
  background-position: -40px -40px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* 도움말 */
.master--layout .popup--container .pop_guide {
  width: 1440px;
  height: 638px;
}

.master--layout .popup--container .pop_guide .help_area {
  width: 1400px;
  height: 496px;
  background: url(../../img/course/help_img.png) center center / 1400px auto no-repeat;
  border-radius: 0px;
}

.master--layout .popup--container .pop_guide .help_area .list_body {
  display: flex;
  flex-direction: column;
}

.master--layout .popup--container .pop_guide .help_area .list_body > li {
  display: flex;
  border: none;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row {
  display: flex;
  height: 99px;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 99px;
  font-family: 'Noto Sans KR';
  font-size: 20px;
  color: #5F5F5F;
  line-height: 28px;
  box-sizing: border-box;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row [class*="guide_"] {
  opacity: 0;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row > span:nth-child(1) {
  width: 199px;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row > span:nth-child(2) {
  width: 192px;
  font-size: 25px;
  font-weight: 700;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row > span:nth-child(3) {
  flex: 1 0 0;
  padding: 0px 10px 0px 10px;
  box-sizing: border-box;
  font-weight: 500;
  justify-content: flex-start;
}

.master--layout .popup--container .pop_guide .help_area .list_body > li:first-child .row > span {
  border-top: 0;
}

.master--layout .popup--container .pop_guide .help_area .list_body > li:first-child .row > span:nth-child(1) {
  width: 900px;
}

.master--layout .popup--container .pop_guide .help_area .list_body > li:first-child .row > span:nth-child(2) {
  width: 192px;
}

.master--layout .popup--container .pop_guide .help_area .list_body > li:first-child .row > span:nth-child(3) { 
  justify-content: flex-start;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row:nth-of-type(2) > span:nth-child(3),
.master--layout .popup--container .pop_guide .help_area .list_body > li:first-child .row > span:nth-child(3) {
  border-right: 0;
}

.master--layout .popup--container .pop_guide .help_area .list_body > li:last-child .row > span {
  border-bottom: 0;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row span[class*="guide_icon_"] {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: auto;
  height: 44px;
  padding: 0 20px 0 14px;
  background: var(--course-btn-background);
  border-radius: 30px;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row span[class*="guide_icon_"] i {
  width: 36px;
  height: 36px;
  background-repeat: no-repeat;
  background-size: 36px auto;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row span[class*="guide_icon_"] i + span {
  position: relative;
  margin-left: 10px;
  font-size: 18px;
  color: var(--course-util-text-color);
  user-select: none;
  font-family: "Roboto", "Cafe24 Ssurround Bold", "Noto Sans KR", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row span.guide_toc i {
  width: 478px;
  height: 36px;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row span.guide_volume i {
  width: 40px;
  height: 40px;
}

.master--layout .popup--container .pop_guide .help_area .list_body .row span.guide_pagemove i {
  width: 158px;
  height: 40px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Scroll */
.master--layout .scroll_box:not(.jq-scroll)::-webkit-scrollbar,
.master--layout textarea::-webkit-scrollbar,
.master--layout .jq-scroll>.scroll-element.scroll-y,
.master--layout .jq-scroll>.scroll-element div,
.master--layout .jq-scroll>.scroll-element.scroll-y .scroll-bar,
.master--layout .jq-scroll>.scroll-element .scroll-element_track {
  width: 10px;
}

.iframe-blocker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 9999;
}

.volume--container {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.volume--container.active {
  display: block;
  pointer-events: auto;
  z-index: 9999;
}
