@charset "utf-8";

/**
 * Viewer - Popup v1.7 : 2023-10-16
*/
/* ------------------------------------------------------------------------------------------------------------- */
/* Common */
.is--pc .popup--container .pop_select_text .select_memo,
.is--pc .popup--container .pop_select_text .select_link {
  display: none;
}

.is--pc .popup--container .pop_list .tab_menu[data-tab-menu="memo"],
.is--pc .popup--container .pop_list .tab_menu[data-tab-menu="link"] {
  display: none;
}

.is--web .popup--container .pop_select_text .select_memo,
.is--web .popup--container .pop_select_text .select_link {
  display: flex;
}

.is--web .popup--container .pop_list .tab_menu[data-tab-menu="memo"],
.is--web .popup--container .pop_list .tab_menu[data-tab-menu="link"] {
  display: block;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup--Container */
.popup--container {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.popup--container.active {
  display: block;
  pointer-events: auto;
  z-index: 4100;
}

.popup--container.active.uppermost {
  z-index: 3500;
  background-color: rgba(0, 0, 0, 0.46);
}

/* Popup */
.popup--container .popup {
  display: none;
  position: absolute;
  box-sizing: border-box;
}

.popup--container .popup.popup--open {
  display: block;
  cursor: default;
  /*
  animation: fadeInMotion ease-out 0.2s both;
  -webkit-animaition: fadeInMotion ease-out 0.2s both;
  */
}

.popup--container .popup.dimmed.popup--open {
  box-shadow: 0 0 0 9999px rgba(29, 29, 29, 0.6);
}

.popup--container .popup.layer.dimmed {
  border-radius: 12px;
}

.popup--container .popup .inner {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.popup--container .popup .inner .content {
  background-color: var(--color-background);
}

.popup--container .popup .top {
  display: flex;
  position: relative;
  width: 100%;
  height: 42px;
  background-color: var(--color-assort);
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup--container .popup .top:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-assort);
  z-index: -1;
}

.popup--container .popup .top h2,
.popup--container .popup .top .tit {
  font-size: 16px;
  font-weight: 700;
  font-family: "Cafe24 Ssurround Bold";
  color: var(--color-text-white);
  line-height: 42px;
}

.popup--container .popup .top .btn_wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
}

.popup--container .popup .top .btn_wrap .btn {
  position: relative;
  width: 40px;
  height: 40px;
}

.popup--container .popup .top .btn_wrap .pop_close i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='4' d='m3 3 12 12M15 3 3 15'/%3E%3C/svg%3E");
  background-size: 18px auto;
  transition: all 0.15s linear;
}

.popup--container .popup .content {
  width: 100%;
  height: 100%;
}

.popup--container .popup .top~.content {
  height: calc(100% - 42px);
}

/* Popup :: Layer */
.popup--container .popup.layer.popup--open {
  left: 50%;
  top: 50%;
  padding: 0px;
  transform-origin: 0 0;
  border-radius: 12px;
}

.popup--container .popup.layer.pos_left.popup--open {
  left: 30px;
  top: 50%;
}

.popup--container .popup.layer .container {
  border: none;
  border-radius: 12px;
}

.popup--container .popup.layer .top {
  padding: 0px 0px 0px 16px;
}

.popup--container .popup.layer .content {
  border-radius: 0 0 12px 12px;
  box-sizing: border-box;
}

.popup--container .popup.layer .content>div+.btn_wrap,
.popup--container .popup.layer .content>p+.btn_wrap {
  margin-top: 20px;
}

.popup--container .popup.layer .content>.btn_wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.popup--container .popup.layer .content>.btn_wrap .btn.b_t {
  min-width: 78px;
  height: 36px;
}

.popup--container .popup.layer .content>.btn_wrap .btn.b_t span {
  font-size: 15px;
}

.popup--container .popup.layer .content>.btn_wrap .btn.b_t+.btn {
  margin-left: 16px;
}

/* Popup :: slide */
.popup--container .popup.slide {
  top: 0;
  right: 0;
  max-width: 416px;
  height: calc(100% - 62px);
  border-radius: 12px;
  box-sizing: border-box;
}

.popup--container .popup.slide.pos_left {
  right: auto;
  left: 0;
}

.popup--container .popup.slide.popup--open {
  animation: slideRightInMotion ease 0.2s both;
  -webkit-animaition: slideRightInMotion ease 0.2s both;
}

.popup--container .popup.slide.pos_left.popup--open {
  animation: slideLeftInMotion ease 0.2s both;
  -webkit-animaition: slideLeftInMotion ease 0.2s both;
}

.popup--container .popup.slide .container {
  border-radius: 12px;
  box-shadow: 0px 4px 8px rgba(22, 27, 38, 0.15);
}

.popup--container .popup.slide .inner .content {
  border-radius: 0 0 12px 12px;
}

.popup--container .popup.slide .top {
  padding: 0px 16px;
}

.popup--container .popup.slide .top .btn_wrap {
  right: 16px;
}

/* Popup :: fill */
.popup--container .popup.fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: Items */
.popup--container .popup .items {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.popup--container .popup .items .thumb {
  position: relative;
  width: 65px;
  height: 84px;
  min-width: 65px;
  border: var(--default-border-line);
  border-radius: var(--base-radius);
  margin-right: 19px;
  text-align: center;
  overflow: hidden;
}

.popup--container .popup .items .thumb img {
  width: 65px;
  max-height: 84px;
}

.popup--container .popup .items .thumb .page_num {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--color-text-white);
  line-height: 16px;
}

.popup--container .popup .items .desc {
  flex-grow: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup--container .popup .items .desc .page {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.popup--container .popup .items .desc .num {
  margin-left: 8px;
  color: var(--color-assort);
  font-weight: 500;
}

.popup--container .popup .items .desc .cont {
  -webkit-line-clamp: 3;
  width: 100%;
  max-height: 52px;
  margin-top: 10px;
  line-height: 18px;
}

.popup--container .popup .pop_search .items .desc .cont {
  -webkit-line-clamp: 4;
  max-height: 72px;
}

.popup--container .popup .items .desc .cont mark {
  background-color: var(--color-highlight);
}

.popup--container .popup .items .desc .detail {
  -webkit-line-clamp: 2;
  word-break: break-all;
  width: 100%;
  max-height: 36px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-guide);
  line-height: 18px;
}

.popup--container .popup .items.hover:before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: calc(100% - 20px);
  height: calc(100% - 16px);
  border: 2px solid #00b2e3;
  box-shadow: 0px 0px 0px 4px rgba(3, 200, 255, 0.25);
  border-radius: var(--base-radius);
  pointer-events: none;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: List */
.popup--container .popup .list_body {
  width: 100%;
  box-sizing: border-box;
}

.popup--container .popup .list_body>li {
  width: 100%;
  border-bottom: var(--default-border-line);
  box-sizing: border-box;
}

.popup--container .popup .scroll_box.scroll-scrolly_visible .list_body>li:last-child {
  border: none;
}

.popup--container .popup .list_body a {
  width: 100%;
  height: 100%;
}

.popup--container .popup .list_body .items {
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: Tab */
.popup--container .tab_container {
  width: 100%;
  height: 100%;
}

.popup--container .tab_container .tab_menu_area {
  width: 100%;
  height: 35px;
  padding: 0 16px;
  border-bottom: var(--default-border-line);
  box-sizing: border-box;
}

.popup--container .tab_container .tab_menu_area .btn {
  font-family: "Noto Sans KR", sans-serif;
}

.popup--container .tab_container .tab_menu {
  padding: 0px 7px;
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-dull);
  line-height: 34px;
}

.popup--container .tab_container .tab_menu+.tab_menu {
  margin-left: 16px;
}

.popup--container .tab_container .tab_menu.hover {
  color: var(--color-text-base);
}

.popup--container .tab_container .tab_menu.on,
.popup--container .tab_container .tab_menu.on.hover {
  color: var(--color-text-base);
  font-weight: 700;
}

.popup--container .tab_container .tab_menu.on:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: var(--color-assort);
}

.popup--container .tab_container .inner {
  width: 100%;
  height: calc(100% - 35px);
}

.popup--container .tab_container .inner .tab_content {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 목차 */
.popup--container .pop_toc {
  width: 380px;
}

.popup--container .pop_toc .scroll_box {
  width: 100%;
  height: 100%;
  border-radius: 0 0 12px 12px;
}

.popup--container .pop_toc .unit_item {
  position: relative;
  cursor: pointer;
  background-color: var(--color-background);
}

.popup--container .pop_toc .unit_item.active {
  background-color: var(--color-background);
}

.popup--container .pop_toc .unit_item:not(.is--none) i {
  width: 16px;
  height: 16px;
  margin-right: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_701_12871)'%3E%3Crect width='16' height='16' rx='4' fill='white'/%3E%3Crect x='0.65' y='0.65' width='14.7' height='14.7' rx='3.35' stroke='%2300B2E3' stroke-width='1.3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 7V3H7V7H3V9H7V13H9V9H13V7H9Z' fill='%2300B2E3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_701_12871'%3E%3Crect width='16' height='16' rx='4' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: 16px auto;
  transition: all 0.15s linear;
}

.popup--container .pop_toc .unit_item:not(.is--none) .btn.hover i {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_701_12870)'%3E%3Crect width='16' height='16' rx='4' fill='white'/%3E%3Crect x='0.65' y='0.65' width='14.7' height='14.7' rx='3.35' stroke='%23008EB6' stroke-width='1.3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 7V3H7V7H3V9H7V13H9V9H13V7H9Z' fill='%23008EB6'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_701_12870'%3E%3Crect width='16' height='16' rx='4' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.popup--container .pop_toc .unit_item.active:not(.is--none) i {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_701_12873)'%3E%3Crect width='16' height='16' fill='%2300B2E3'/%3E%3Crect x='3' y='7' width='10' height='2' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_701_12873'%3E%3Crect width='16' height='16' rx='4' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.popup--container .pop_toc .unit_item.active:not(.is--none) .btn.hover i {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_701_12872)'%3E%3Crect width='16' height='16' fill='%23008EB6'/%3E%3Crect x='3' y='7' width='10' height='2' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_701_12872'%3E%3Crect width='16' height='16' rx='4' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.popup--container .pop_toc .unit_item p {
  display: flex;
  align-items: center;
}

.popup--container .pop_toc .unit_item .unit_tit {
  padding: 0px 10px 0px 16px;
  color: var(--color-text-base);
  line-height: 36px;
}

.popup--container .pop_toc .unit_item .unit_tit .btn {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.popup--container .pop_toc .unit_item .unit_tit span:nth-of-type(2) {
  flex-grow: 1;
}

.popup--container .pop_toc .sub_item p {
  width: calc(100% + 10px);
  padding-left: 56px;
  padding-right: 18px;
  font-size: 14px;
  color: var(--color-text-guide);
  background-color: #FFFFFF;
  line-height: 32px;
  box-sizing: border-box;
}

.popup--container .pop_toc .sub_item p:not(.dot) {
  background-color: var(--color-popup-background);
  padding-left: 66px;
}

.popup--container .pop_toc .unit_item .unit_sub {
  display: none;
  padding: 0px 10px 10px 0;
}

.popup--container .pop_toc .unit_item.active .unit_sub {
  display: block;
  color: var(--color-text-gray);
  background-color: var(--color-popup-background);
}

.popup--container .pop_toc .unit_item .unit_sub p span {
  width: calc(100% - 60px);
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Noto Sans KR", sans-serif;
}

.popup--container .pop_toc .unit_item .unit_sub p.dot>span {
  color: var(--color-text-base);
  font-weight: 700;
}

.popup--container .pop_toc .unit_item .unit_sub p.dot>span:before {
  content: "·";
  margin-right: 5px;
}

.popup--container .pop_toc .unit_item .unit_sub p>span {
  font-weight: 500;
}

.popup--container .pop_toc .sub_item .btn.hover span,
.popup--container .pop_toc .sub_item.active>p span {
  color: var(--color-assort);
}

.popup--container .pop_toc .jq-scroll > .scroll-element.scroll-x {
  display: none;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 드래그/캡쳐 */
.popup--container .pop_capture {
  width: 962px;
  height: 650px;
}

.popup--container .pop_capture .inner .content {
  background-color: var(--color-popup-background);
  padding: 16px 16px;
}

.popup--container .pop_capture .content .img_area {
  width: 930px;
  height: 504px;
  border: 2px solid var(--color-border-dull);
}

.popup--container .popup.layer .pop_capture .content>.btn_wrap .btn.b_t {
  height: 40px;
  padding: 2px 8px 2px 2px;
}

.popup--container .pop_capture .content .btn+.btn {
  margin-left: 16px;
}

.popup--container .pop_capture .content .btn i {
  width: 36px;
  height: 36px;
}

.popup--container .pop_capture .content .btn.capture_draw 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%3Crect x='11' y='25' width='20' height='4' rx='2' fill='%23C1CFD7'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2282 16.5134L13.4453 19.4502L18.2531 23.6591L20.7961 20.5122L16.2282 16.5134ZM17.2608 15.4237L21.7396 19.3446L29.5753 9.64799L25.8359 6.37439L17.2608 15.4237Z' fill='%2300B2E3'/%3E%3Cpath d='M16.9012 20.3526C18.7599 21.9798 19.0252 24.7169 17.4939 26.4662C16.528 27.5695 14.6234 28.9964 12.4436 28.9965C10.7088 28.9966 8.62906 27.9612 7.85206 27.5384C7.76297 27.49 7.79661 27.3329 7.89532 27.3096C8.30279 27.2133 9.00292 26.9399 9.69157 26.1629C10.7541 24.964 8.91445 22.6852 10.763 20.5737C12.2943 18.8244 15.0425 18.7255 16.9012 20.3526Z' fill='%23FFA132'/%3E%3Cpath d='M9.02047 15.1099C8.8938 14.9766 8.82714 14.8099 8.82047 14.6099C8.8138 14.4099 8.87714 14.2266 9.01047 14.0599C9.19714 13.8332 9.3438 13.6166 9.45047 13.4099C9.55714 13.2032 9.63714 12.9932 9.69047 12.7799C9.7438 12.5666 9.77714 12.3466 9.79047 12.1199C9.81047 11.8866 9.82047 11.6299 9.82047 11.3499V8.3999H8.14047C7.9538 8.3999 7.80047 8.38324 7.68047 8.3499C7.56047 8.3099 7.46714 8.2599 7.40047 8.1999C7.3338 8.13324 7.28714 8.0599 7.26047 7.9799C7.24047 7.89324 7.23047 7.7999 7.23047 7.6999C7.23047 7.6199 7.24047 7.5399 7.26047 7.4599C7.28047 7.37324 7.32047 7.2999 7.38047 7.2399C7.44714 7.17324 7.53714 7.1199 7.65047 7.0799C7.7638 7.0399 7.9138 7.0199 8.10047 7.0199H10.7105C10.8905 7.0199 11.0305 7.0399 11.1305 7.0799C11.2305 7.11324 11.3071 7.16324 11.3605 7.2299C11.4138 7.2899 11.4471 7.36657 11.4605 7.4599C11.4738 7.55324 11.4805 7.6599 11.4805 7.7799V11.6799C11.4805 11.8532 11.4605 12.0899 11.4205 12.3899C11.3871 12.6899 11.3238 13.0032 11.2305 13.3299C11.1438 13.6566 11.0238 13.9766 10.8705 14.2899C10.7238 14.6032 10.5405 14.8599 10.3205 15.0599C10.2271 15.1466 10.1238 15.2166 10.0105 15.2699C9.9038 15.3299 9.79047 15.3632 9.67047 15.3699C9.55714 15.3832 9.4438 15.3699 9.33047 15.3299C9.2238 15.2899 9.12047 15.2166 9.02047 15.1099ZM14.0305 15.4799C13.9238 15.4799 13.8205 15.4666 13.7205 15.4399C13.6271 15.4132 13.5405 15.3666 13.4605 15.2999C13.3871 15.2332 13.3271 15.1432 13.2805 15.0299C13.2405 14.9166 13.2205 14.7732 13.2205 14.5999V7.7699C13.2205 7.43657 13.3005 7.2099 13.4605 7.0899C13.6271 6.96324 13.8171 6.8999 14.0305 6.8999C14.1371 6.8999 14.2371 6.91324 14.3305 6.9399C14.4305 6.96657 14.5171 7.01324 14.5905 7.0799C14.6638 7.14657 14.7238 7.23657 14.7705 7.3499C14.8171 7.46324 14.8405 7.60324 14.8405 7.7699V10.1699H15.6305C15.8171 10.1699 15.9705 10.1932 16.0905 10.2399C16.2105 10.2799 16.3038 10.3332 16.3705 10.3999C16.4371 10.4666 16.4805 10.5432 16.5005 10.6299C16.5271 10.7099 16.5405 10.7899 16.5405 10.8699C16.5405 10.9699 16.5271 11.0632 16.5005 11.1499C16.4805 11.2366 16.4371 11.3132 16.3705 11.3799C16.3038 11.4399 16.2105 11.4899 16.0905 11.5299C15.9705 11.5699 15.8171 11.5899 15.6305 11.5899H14.8405V14.5999C14.8405 14.7732 14.8171 14.9166 14.7705 15.0299C14.7238 15.1432 14.6638 15.2332 14.5905 15.2999C14.5171 15.3666 14.4305 15.4132 14.3305 15.4399C14.2371 15.4666 14.1371 15.4799 14.0305 15.4799Z' fill='%2300B2E3'/%3E%3C/svg%3E%0A");
}

.popup--container .pop_capture .content .btn.capture_print 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='%23C1CFD7' d='M10.5 7.5h15v9.75h-15z'/%3E%3Cpath fill='%2300B2E3' d='M6.75 13.5a1.5 1.5 0 0 1 1.5-1.5h19.5a1.5 1.5 0 0 1 1.5 1.5v8.25H6.75V13.5Z'/%3E%3Cpath fill='%23fff' stroke='%2300B2E3' stroke-width='1.5' d='M11.25 18.75h13.5v9h-13.5z'/%3E%3Cpath fill='%23FFA132' d='M14.25 21h7.5v1.5h-7.5zM14.25 24h7.5v1.5h-7.5z'/%3E%3Ccircle cx='10.125' cy='15.375' r='1.125' fill='%23fff'/%3E%3C/svg%3E");
}

.popup--container .pop_capture .content .btn.capture_save 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='%2300B2E3' d='M7 29h22V12.5L23.5 7H7v22Z'/%3E%3Cpath fill='%23fff' d='M11 10h11v6H11zM11 19h14v7H11z'/%3E%3Cpath fill='%23FFA132' d='M13 20.5h10V22H13zM13 23h10v1.5H13z'/%3E%3Cpath fill='%2300B2E3' d='M12 11h3v4h-3z'/%3E%3C/svg%3E");
}

.popup--container .pop_capture .content .btn .txt {
  font-family: "Noto Sans KR", sans-serif;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 그리기/쓰기 */
.popup--container .popup.mini.popup--open {
  left: 50%;
  top: 5%;
  padding: 0px;
  transform-origin: 0 0;
  border-radius: 12px;
}

.popup--container .pop_draw {
  height: 56px;
  background-color: var(--color-background);
  border-radius: var(--base-radius-deep);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15), 0px 4px 20px rgba(0, 0, 0, 0.15);
}

.popup--container .popup .pop_draw .inner .content {
  border-radius: 8px;
}

.popup--container .pop_draw .draw_menu {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 4px;
}

/* 그리기/쓰기 - draw_menu */
.popup--container .pop_draw .draw_menu .drag_indicator {
  display: inline-block;
  width: 32px;
  height: 48px;
  cursor: pointer;
  box-sizing: border-box;
}

.popup--container .pop_draw .draw_menu .drag_indicator i {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px 22px;
}

.popup--container .pop_draw .draw_menu .btn,
.popup--container .pop_draw .type_delete .btn,
.popup--container .pop_draw .type_shape .btn {
  position: relative;
  width: 48px;
  height: 48px;
  background-color: var(--color-background);
  border-radius: var(--base-radius-deep);
  box-sizing: border-box;
}

.popup--container .pop_draw .draw_menu .btn i,
.popup--container .pop_draw .type_delete .btn i,
.popup--container .pop_draw .type_shape .btn i {
  border-radius: var(--base-radius-deep);
}

.popup--container .pop_draw .draw_menu .btn.hover:not(.active),
.popup--container .pop_draw .type_delete .btn.hover:not(.active),
.popup--container .pop_draw .type_shape .btn.hover:not(.active) {
  background-color: var(--hover-color-btn-background);
}

.popup--container .pop_draw .draw_menu .btn img,
.popup--container .pop_draw .type_delete .btn img,
.popup--container .pop_draw .type_shape .btn img {
  width: 100%;
}

.popup--container .pop_draw .draw_menu .drag_indicator img:nth-child(1),
.popup--container .pop_draw .draw_menu .btn img:nth-child(1),
.popup--container .pop_draw .type_delete .btn img:nth-child(1),
.popup--container .pop_draw .type_shape .btn img:nth-child(1) {
  display: block;
}

.popup--container .pop_draw .draw_menu .drag_indicator img:nth-child(2),
.popup--container .pop_draw .draw_menu .btn img:nth-child(2),
.popup--container .pop_draw .type_delete .btn img:nth-child(2),
.popup--container .pop_draw .type_shape .btn img:nth-child(2) {
  display: none;
}

.popup--container .pop_draw .draw_menu .drag_indicator.hover img:nth-child(1),
.popup--container .pop_draw .draw_menu .btn.hover:not(.active) img:nth-child(1),
.popup--container .pop_draw .type_delete .btn.hover:not(.active) img:nth-child(1),
.popup--container .pop_draw .type_shape .btn.hover:not(.active) img:nth-child(1) {
  display: none;
}

.popup--container .pop_draw .draw_menu .drag_indicator.hover img:nth-child(2),
.popup--container .pop_draw .draw_menu .btn.hover:not(.active) img:nth-child(2),
.popup--container .pop_draw .type_delete .btn.hover:not(.active) img:nth-child(2),
.popup--container .pop_draw .type_shape .btn.hover:not(.active) img:nth-child(2) {
  display: block;
}

.popup--container .pop_draw .draw_menu .btn:before,
.popup--container .pop_draw .type_delete .btn:before,
.popup--container .pop_draw .type_shape .btn:before {
  z-index: 1;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--base-radius-deep);
  box-sizing: border-box;
}

.popup--container .pop_draw .draw_menu .btn.active:before,
.popup--container .pop_draw .type_delete .btn.active:before,
.popup--container .pop_draw .type_shape .btn.active:before {
  border: 3px solid var(--hover-color-base);
}

.popup--container .pop_draw .draw_menu .contour {
  position: relative;
  margin-left: 10px;
}

.popup--container .pop_draw .draw_menu .btn.draw_write:after,
.popup--container .pop_draw .draw_menu .btn.draw_show:after,
.popup--container .pop_draw .draw_menu .btn.draw_hide:after {
  content: "";
  position: absolute;
  top: 6px;
  left: -6px;
  width: 1px;
  height: 36px;
  border-right: 1px solid var(--color-border-dull);
} 

.popup--container .pop_draw .btn.draw_undo,
.popup--container .pop_draw .btn.draw_redo {
  width: 40px;
}

/* Popup :: 그리기/쓰기 - draw_layer */
.popup--container .pop_draw .draw_option {
  position: absolute;
}

.popup--container .pop_draw .draw_option .draw_layer {
  position: absolute;
  top: 20px;
  width: 290px;
  padding: 20px 20px;
  background-color: var(--color-background);
  border-radius: var(--base-radius-deep);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15), 0px 4px 20px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.popup--container .pop_draw .draw_option .draw_layer:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 18px;
  width: 20px;
  height: 20px;
  background-color: var(--color-background);
  border-top-left-radius: 4px;
  box-shadow: -5px -5px 5px -5px rgba(0, 0, 0, 0.1);
  transform: rotate(45deg);
}

.popup--container .pop_draw .draw_option .draw_layer[data-draw-option="default"] {
  left: 30px;
}

.popup--container .pop_draw .draw_option .draw_layer[data-draw-option="mobile"] {
  left: 440px;
}

.popup--container .pop_draw .draw_option .draw_layer[data-draw-option="delete"] {
  left: 350px;
  width: 64px;
  padding: 8px 8px;
}

.popup--container .pop_draw .draw_option .draw_layer[data-draw-option="delete"]:before {
  left: 50%;
  margin-left: -10px;
}

.popup--container .pop_draw .draw_option .draw_layer[data-draw-option="font"] {
  left: 760px;
}

.popup--container .pop_draw .draw_option .draw_layer .type_shape .btn.hover {
  background: none;
}

.popup--container .pop_draw .draw_option .draw_layer .type_shape .btn.hover:before {
  border: 3px solid var(--hover-color-base);
}

.popup--container .pop_draw .draw_layer .draw_list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.popup--container .pop_draw .draw_layer .draw_list+.draw_list {
  margin-top: 20px;
}

/* Popup :: 그리기/쓰기 - type_colorpicker */
.popup--container .pop_draw .color_palette {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--color-background);
  box-shadow: 0px 0px 0px 2px rgba(179, 179, 179, 1);
  box-sizing: border-box;
}

.popup--container .pop_draw .sub_tree {
  display: none;
  position: absolute;
  top: -20px;
  left: -270px;
  width: 240px;
  height: 250px;
  border-radius: 12px;
  background-color: var(--color-background);
  box-shadow: var(--base-box-shadow);
  box-sizing: border-box;
}

/* Popup :: 그리기/쓰기 - 선굵기 */
.popup--container .pop_draw .type_thickness .btn,
.popup--container .pop_draw .type_fontsize .btn {
  margin: 0px 8px;
  border-radius: 50%;
  background-color: #D9D9D9;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
}

.popup--container .pop_draw .type_thickness .thickness_1 {
  width: 10px;
  height: 10px;
}

.popup--container .pop_draw .type_thickness .thickness_2 {
  width: 16px;
  height: 16px;
}

.popup--container .pop_draw .type_thickness .thickness_3 {
  width: 20px;
  height: 20px;
}

.popup--container .pop_draw .type_thickness .thickness_4 {
  width: 28px;
  height: 28px;
}

.popup--container .pop_draw .type_thickness .thickness_5 {
  width: 36px;
  height: 36px;
}

.popup--container .pop_draw .type_thickness .thickness_1.active,
.popup--container .pop_draw .type_thickness .thickness_2.active,
.popup--container .pop_draw .type_thickness .thickness_3.active,
.popup--container .pop_draw .type_thickness .thickness_4.active,
.popup--container .pop_draw .type_thickness .thickness_5.active {
  background-color: var(--hover-color-base);
}

/* Popup :: 그리기/쓰기 - 투명도 */
.popup--container .pop_draw .type_opacity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 20px;
}

.popup--container .pop_draw .type_opacity .txt,
.popup--container .pop_draw .type_opacity .opacity_percentage .percentage {
  color: #333333;
  font-size: 14px;
  font-weight: 700;
}

/* Popup :: 그리기/쓰기 - 투명도 :: progress_bar */
.popup--container .pop_draw .type_opacity .progress_bar {
  width: 155px;
  height: 5px;
  box-sizing: border-box;
}

.popup--container .pop_draw .type_opacity .progress_bar .progress.rail {
  background-color: #D9D9D9;
}

.popup--container .pop_draw .type_opacity .progress_bar .progress.current {
  background-color: #797979;
  border-radius: 120px;
}

.popup--container .pop_draw .type_opacity .progress_bar .progress.handle {
  width: 10px;
  height: 18px;
  margin-top: -9px;
  margin-left: -5px;
  background: var(--progress-color-assort);
  border-radius: 12px;
  box-shadow: none;
  -webkit-transition: opacity ease-out 0.2s;
  transition: opacity ease-out 0.2s;
}

.popup--container .pop_draw .type_opacity .progress_bar .progress.handle:after {
  display: none;
}

/* Popup :: 그리기/쓰기 - 모바일 - 도형 */
.popup--container .pop_draw .type_shape {
  justify-content: space-between;
  width: 100%;
  padding: 0;
}

.popup--container .pop_draw .type_shape .btn:before {
  border: 2px solid var(--color-border-dull);
}

/* Popup :: 그리기/쓰기 - 글자크기 - select_wrap */
.popup--container .pop_draw .select_wrap {
  width: 100%;
}

.popup--container .pop_draw .select_wrap .select_toggle {
  font-size: 14px;
}

/* Popup :: 그리기/쓰기 - 글자크기 */
.popup--container .pop_draw .type_fontsize {
  display: flex;
  align-items: center;
}

.popup--container .pop_draw .type_fontsize .font_14 {
  width: 18px;
  height: 18px;
  font-size: 8px;
}

.popup--container .pop_draw .type_fontsize .font_18 {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.popup--container .pop_draw .type_fontsize .font_24 {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

.popup--container .pop_draw .type_fontsize .font_30 {
  width: 40px;
  height: 40px;
  font-size: 20px;
}

.popup--container .pop_draw .type_fontsize .font_14.active,
.popup--container .pop_draw .type_fontsize .font_18.active,
.popup--container .pop_draw .type_fontsize .font_24.active,
.popup--container .pop_draw .type_fontsize .font_30.active {
  background-color: var(--hover-color-base);
  color: var(--color-text-white);
}

/* 텍스트 선택 버튼 */

.popup--container .pop_draw .type_text {
  padding-top: 20px;
  border-top: 1px solid var(--color-border-dull);
}

.popup--container .pop_draw .type_text .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 40px;
  border: 2px solid var(--color-border-dull);
  border-radius: var(--base-radius-deep);
  color: var(--color-btn-text);
  font-size: 14px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
}

.popup--container .pop_draw .type_text .btn.hover {
  border-color: var(--hover-color-base);
}

.popup--container .pop_draw .type_text .btn span {
  margin-top: -0.1em;
  margin-left: 8px;
}

.popup--container .pop_draw .type_text .btn i {
  width: 16px;
  height: 16px;
}

.popup--container .pop_draw .type_text .txt_add i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Crect width='14' height='2' x='1.5' y='7' fill='%235B5B5B' rx='1'/%3E%3Crect width='14' height='2' x='9.5' y='1' fill='%235B5B5B' rx='1' transform='rotate(90 9.5 1)'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .type_text .txt_del_all i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Crect width='13' height='2' x='1.5' y='1.5' fill='%235B5B5B' rx='1'/%3E%3Crect width='3' height='3' x='9.5' fill='%235B5B5B' rx='.5' transform='rotate(90 9.5 0)'/%3E%3Cpath stroke='%235B5B5B' stroke-linejoin='round' stroke-width='2' d='M3.584 13.617 2.625 5.5h10.75l-.96 8.117a1 1 0 0 1-.993.883H4.578a1 1 0 0 1-.994-.883Z'/%3E%3Cpath stroke='%235B5B5B' stroke-linecap='round' stroke-width='2' d='M6.5 8.5v3M9.5 8.5v3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

/* 닫기 버튼 */
.popup--container .pop_draw .draw_menu+.btn_wrap {
  position: absolute;
  top: 50%;
  right: -50px;
  margin-top: -19px;
}

.popup--container .pop_draw .btn_wrap .pop_close {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-assort);
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2329 13.5L26.1649 27.5' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M26.1648 13.5L13.2328 27.5' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15), 0px 4px 20px rgba(0, 0, 0, 0.15);
}


/* 그리기/쓰기 - 아이콘 */
.popup--container .pop_draw .drag_indicator i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='22' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='8' cy='2' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='2' cy='8' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='2' cy='14' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='8' cy='14' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='2' cy='20' r='2' fill='%23D4D4D4'/%3E%3Ccircle cx='8' cy='20' r='2' fill='%23D4D4D4'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .drag_indicator.hover i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='22' fill='none'%3E%3Ccircle cx='2' cy='2' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='8' cy='2' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='2' cy='8' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='2' cy='14' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='8' cy='14' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='2' cy='20' r='2' fill='%235B5B5B'/%3E%3Ccircle cx='8' cy='20' r='2' fill='%235B5B5B'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_pen i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='m37.901 20.906-1.06-1.06-3.161 3.16c-.515.515-1.036.64-1.39.576a1.495 1.495 0 0 0-.337-.023L24.4 16.007a1.501 1.501 0 0 0-.023-.337c-.064-.354.061-.875.576-1.39l3.161-3.16-1.06-1.06-3.161 3.16c-.773.772-1.165 1.767-.991 2.72l-5.58 6.324-.571 1.713-2.098 2.097a.667.667 0 0 0-.162.68l-2.452 6.48c-.635 1.678 1.007 3.32 2.686 2.685l6.48-2.451a.667.667 0 0 0 .68-.163l2.097-2.097 1.712-.571 6.324-5.58c.953.175 1.949-.218 2.721-.99l3.161-3.161Zm-14.392 8.879a1.5 1.5 0 0 0-.587.362l-1.508 1.508-5.11-5.11 1.508-1.508a1.5 1.5 0 0 0 .363-.586l.054-.162 5.441 5.442-.161.053Zm1.656-.68-6.31-6.31 4.787-5.426 6.948 6.948-5.425 4.787Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_highlighter i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%23D9D9D9' d='m28.944 11.95-4.338 4.337a2 2 0 0 0 0 2.829l4.235 4.235a2 2 0 0 0 2.829 0l4.338-4.338-7.064-7.064Z'/%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='m37.353 20.358 1.06 1.06-9.685 9.686c-.93.93-2.218 1.324-3.341.638-.296-.18-.63-.4-1.001-.669l-.405.135-2.098 2.098a.664.664 0 0 1-.36.186l-2.854 2.854c-.67.67-1.708.804-2.526.325l-5.132-3.004a2.083 2.083 0 0 1-.421-3.271l3.867-3.868a.664.664 0 0 1 .195-.453l2.098-2.098.135-.405a15.748 15.748 0 0 1-.669-1c-.686-1.123-.292-2.411.639-3.342l9.685-9.685 1.06 1.06-7.197 7.198 9.752 9.752 7.198-7.197Zm-14.433 9.79c.165-.165.366-.29.587-.363l.404-.135a1.5 1.5 0 0 1 1.352.207c.343.247.645.446.905.605.208.127.41.154.635.103.25-.056.56-.218.864-.522l1.427-1.427-9.752-9.752-1.427 1.427c-.303.304-.466.614-.522.864a.81.81 0 0 0 .103.635c.16.26.358.562.605.905a1.5 1.5 0 0 1 .207 1.352l-.135.404a1.5 1.5 0 0 1-.362.587l-1.509 1.508 5.11 5.11 1.508-1.509Z' clip-rule='evenodd'/%3E%3Cpath fill='%235B5B5B' d='m24.606 16.287 4.338-4.338 1.061 1.06-4.338 4.339a.5.5 0 0 0 0 .707l4.235 4.235a.5.5 0 0 0 .707 0l4.338-4.338 1.06 1.06-4.337 4.339a2 2 0 0 1-2.829 0l-4.235-4.235a2 2 0 0 1 0-2.829Z'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_delete i,
.popup--container .pop_draw .draw_delete.each i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M16.278 36.222 14.6 34.6 11 30.998a2.667 2.667 0 0 1 0-3.771l16.028-16.028a2.667 2.667 0 0 1 3.77 0l7.204 7.203a2.667 2.667 0 0 1 0 3.771L24.385 35.79c-.44.44-1.02.713-1.64.77l-4.369.402a2.666 2.666 0 0 1-2.098-.739Zm4.26-16.412 7.55-7.55a1.167 1.167 0 0 1 1.65 0l7.202 7.203a1.167 1.167 0 0 1 0 1.65l-7.55 7.55-8.853-8.853Zm-1.061 1.06-.773.773 8.853 8.853.773-.773-8.853-8.853Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_delete.all i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%23CECECE' d='M17.967 16.778H8.834a2.889 2.889 0 0 0-2.889 2.889V37a2.889 2.889 0 0 0 2.89 2.889h30.332A2.889 2.889 0 0 0 42.057 37V23.06l-1.5 1.5V37c0 .767-.622 1.389-1.39 1.389H8.834A1.389 1.389 0 0 1 7.445 37V19.667c0-.767.622-1.39 1.39-1.39h7.632l1.5-1.5Z'/%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M14.971 27.248a2.889 2.889 0 0 1 0-4.085l15.01-15.011a2.889 2.889 0 0 1 4.086 0l7.803 7.803a2.889 2.889 0 0 1 0 4.086L29.332 32.579a2.888 2.888 0 0 1-1.84.84l-4.564.321a2.889 2.889 0 0 1-2.213-.806l-1.834-1.776-.009-.008-3.833-3.834-.026-.026-.042-.042Zm10.201-12.165 5.87-5.87a1.389 1.389 0 0 1 1.965 0l7.803 7.803a1.389 1.389 0 0 1 0 1.964l-5.87 5.87-9.768-9.767Zm-1.06 1.06-.927.927 9.768 9.767.926-.926-9.768-9.767Z' clip-rule='evenodd'/%3E%3Cpath fill='%235B5B5B' d='M7.123 12.204a.457.457 0 0 1-.253.268.684.684 0 0 1-.455.036.654.654 0 0 1-.224-.116.475.475 0 0 1-.13-.166.52.52 0 0 1-.007-.368L7.621 7.43a.636.636 0 0 1 .21-.275c.11-.091.274-.137.491-.137.217 0 .38.046.491.137.11.087.183.178.217.275l1.567 4.441c.058.169.055.304-.007.405-.063.1-.171.173-.325.216-.183.053-.337.048-.462-.014a.516.516 0 0 1-.253-.31l-.332-.99H7.47l-.347 1.025Zm1.798-1.899-.577-1.726-.578 1.726H8.92ZM11.361 7.597c0-.183.065-.318.195-.405a.776.776 0 0 1 .665-.094c.077.02.144.05.202.094a.463.463 0 0 1 .137.166c.034.068.05.147.05.239v4.037h2.08c.203 0 .343.046.42.137.082.092.123.2.123.325a.499.499 0 0 1-.022.145.322.322 0 0 1-.087.144.432.432 0 0 1-.166.108.688.688 0 0 1-.267.044h-2.737c-.183 0-.328-.044-.434-.13a.449.449 0 0 1-.159-.369V7.597ZM15.826 7.597c0-.183.065-.318.195-.405a.776.776 0 0 1 .664-.094c.077.02.145.05.203.094a.464.464 0 0 1 .137.166c.034.068.05.147.05.239v4.037h2.08c.203 0 .342.046.42.137a.499.499 0 0 1 .101.47.323.323 0 0 1-.087.144.433.433 0 0 1-.166.108.689.689 0 0 1-.268.044h-2.737c-.183 0-.327-.044-.433-.13a.449.449 0 0 1-.16-.369V7.597Z'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_figure i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M19.2 29h-8.867A1.333 1.333 0 0 1 9 27.667V12.333C9 11.597 9.597 11 10.333 11h15.334c.736 0 1.333.597 1.333 1.333V17.2c.646-.131 1.315-.2 2-.2 5.523 0 10 4.477 10 10s-4.477 10-10 10c-4.838 0-8.873-3.435-9.8-8Zm-8.7-1.5v-15h15v5.13a10.004 10.004 0 0 0-6.488 9.87H10.5ZM27 18.737A8.5 8.5 0 1 1 20.737 29h4.93c.736 0 1.333-.597 1.333-1.333v-8.93Zm-1.5.515V27.5h-4.985a8.502 8.502 0 0 1 4.985-8.248Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_line i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='m36.53 12.53-24 24-1.061-1.06 24-24 1.06 1.06Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_arrow i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M29.251 11.25h6.75a.75.75 0 0 1 .75.75v6.75a.75.75 0 0 1-1.5 0v-4.94l-22.72 22.72-1.06-1.06 22.72-22.72h-4.94a.75.75 0 0 1 0-1.5Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_square i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M35.5 12.5h-23v23h23v-23Zm-23-1.5a1.5 1.5 0 0 0-1.5 1.5v23a1.5 1.5 0 0 0 1.5 1.5h23a1.5 1.5 0 0 0 1.5-1.5v-23a1.5 1.5 0 0 0-1.5-1.5h-23Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_circle i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M11.5 24c0 6.904 5.596 12.5 12.5 12.5S36.5 30.904 36.5 24 30.904 11.5 24 11.5 11.5 17.096 11.5 24ZM24 10c-7.732 0-14 6.268-14 14s6.268 14 14 14 14-6.268 14-14-6.268-14-14-14Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_write i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' d='M12.5 11h1.438v1.385H12.5a.115.115 0 0 0-.115.115v1.438H11V12.5a1.5 1.5 0 0 1 1.5-1.5ZM11 35.5v-1.438h1.385V35.5c0 .064.051.115.115.115h1.438V37H12.5a1.5 1.5 0 0 1-1.5-1.5ZM12.385 31.188H11v-2.875h1.385v2.875ZM12.385 25.438H11v-2.875h1.385v2.875ZM12.385 19.688H11v-2.875h1.385v2.875ZM16.813 12.385V11h2.875v1.385h-2.875ZM22.563 12.385V11h2.875v1.385h-2.875ZM28.313 12.385V11h2.875v1.385h-2.875ZM34.063 12.385V11H35.5a1.5 1.5 0 0 1 1.5 1.5v1.438h-1.385V12.5a.115.115 0 0 0-.115-.115h-1.438ZM35.615 16.813H37v2.875h-1.385v-2.875ZM35.615 22.563H37v2.875h-1.385v-2.875ZM35.615 28.313H37v2.875h-1.385v-2.875ZM35.615 34.063H37V35.5a1.5 1.5 0 0 1-1.5 1.5h-1.438v-1.385H35.5a.115.115 0 0 0 .115-.115v-1.438ZM31.188 35.615V37h-2.875v-1.385h2.875ZM25.438 35.615V37h-2.875v-1.385h2.875ZM19.688 35.615V37h-2.875v-1.385h2.875ZM33 15.826a.826.826 0 0 0-.826-.826H15.826a.826.826 0 0 0-.826.826v2.49a.683.683 0 0 0 1.355.127l.27-1.443H22v14h-1.174a.826.826 0 0 0-.826.826v.348c0 .456.37.826.826.826h6.348c.456 0 .826-.37.826-.826v-.348a.826.826 0 0 0-.826-.826H26V17h5.375l.27 1.443A.683.683 0 0 0 33 18.317v-2.491Z'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_select i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' d='M14.656 13.737a.826.826 0 0 1 1.247-.874l19.338 12.195c.652.41.435 1.412-.328 1.516l-9.016 1.23a.826.826 0 0 0-.618.434l-4.24 8.05c-.36.683-1.375.544-1.538-.21l-4.845-22.341Z'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_show i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' d='M24 28.5a4.5 4.5 0 0 0 4.19-6.143 1.808 1.808 0 1 1-2.547-2.547A4.5 4.5 0 1 0 24 28.5Z'/%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='M38.017 25.282C36.908 27.216 32.648 33.5 24 33.5c-8.648 0-12.908-6.284-14.016-8.218a2.57 2.57 0 0 1 0-2.564c1.109-1.934 5.369-8.218 14.016-8.218s12.907 6.284 14.016 8.218a2.57 2.57 0 0 1 0 2.564Zm-1.302-.746a1.07 1.07 0 0 0 0-1.072C35.688 21.67 31.82 16 24.001 16a8 8 0 0 1 0 16h-.006a8 8 0 0 1 0-16c-7.814.003-11.681 5.672-12.708 7.464a1.07 1.07 0 0 0 0 1.072c1.027 1.792 4.894 7.461 12.708 7.464H24c7.819 0 11.688-5.671 12.715-7.464ZM24 30a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_hide i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' fill-rule='evenodd' d='m17.403 31.606-4 3.077a1 1 0 0 1-1.22-1.585l24.415-18.781a1 1 0 1 1 1.22 1.585l-3.01 2.316a17.375 17.375 0 0 1 3.209 4 2.57 2.57 0 0 1 0 2.564C36.908 26.716 32.648 33 24 33c-2.579 0-4.767-.559-6.598-1.394ZM33.6 19.146l-2.086 1.604A8 8 0 0 1 24 31.5c7.819 0 11.688-5.671 12.715-7.464a1.07 1.07 0 0 0 0-1.072 15.821 15.821 0 0 0-3.114-3.818Zm-3.777 2.905-1.343 1.033a4.5 4.5 0 0 1-6.033 4.641l-1.342 1.032a6 6 0 0 0 8.718-6.706Zm-10.408 8.006a7.963 7.963 0 0 0 4.579 1.443c-1.991 0-3.726-.37-5.223-.948l.644-.495Z' clip-rule='evenodd'/%3E%3Cpath fill='%235B5B5B' d='M16 23.5c0 1.265.294 2.462.817 3.526l1.628-1.253a6 6 0 0 1 9.175-7.058l1.63-1.253A7.969 7.969 0 0 0 24 15.5c2.389 0 4.408.529 6.09 1.315l1.325-1.019C29.429 14.744 26.975 14 24.001 14c-8.648 0-12.908 6.284-14.016 8.218a2.57 2.57 0 0 0 0 2.564c.526.917 1.76 2.811 3.833 4.55l1.22-.938a15.82 15.82 0 0 1-3.751-4.358 1.07 1.07 0 0 1 0-1.072c1.027-1.792 4.894-7.461 12.708-7.464a8 8 0 0 0-7.995 8Z'/%3E%3Cpath fill='%235B5B5B' d='M19.694 24.812 25 20.731v-.039c0-.555.25-1.05.643-1.383a4.5 4.5 0 0 0-5.949 5.503Z'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_undo i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' d='m16.648 12.179-2.625 4.546 4.546 2.625a.75.75 0 1 0 .75-1.299l-2.303-1.33a8.251 8.251 0 0 1 7.402 14.718 8.25 8.25 0 0 1-12.139-9.107.75.75 0 1 0-1.457-.357 9.72 9.72 0 0 0 1.027 7.194c2.692 4.664 8.655 6.261 13.319 3.569 4.663-2.692 6.26-8.655 3.568-13.319-2.47-4.279-7.695-5.977-12.142-4.147l1.353-2.343a.75.75 0 0 0-1.3-.75Z'/%3E%3C/svg%3E");
}

.popup--container .pop_draw .draw_redo i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='48' fill='none'%3E%3Cpath fill='%235B5B5B' d='m23.352 12.179 2.625 4.546-4.547 2.625a.75.75 0 1 1-.75-1.299l2.303-1.33a8.251 8.251 0 0 0-7.401 14.718 8.25 8.25 0 0 0 12.138-9.107.75.75 0 1 1 1.457-.357 9.72 9.72 0 0 1-1.026 7.194c-2.693 4.664-8.656 6.261-13.32 3.569-4.663-2.692-6.26-8.655-3.568-13.319 2.47-4.279 7.695-5.977 12.142-4.147l-1.352-2.343a.75.75 0 0 1 1.299-.75Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------------------------------------------------- */
.sp-container.spectrum_cloud {
  width: 100%;
  height: 100%;
  padding: 16px 14px;
  border-radius: 12px;
}

.sp-container.spectrum_cloud .sp-palette-container,
.sp-container.spectrum_cloud .sp-palette {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
}

.sp-container.spectrum_cloud .sp-picker-container {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0;
  background: none;
  box-sizing: border-box;
}

.sp-container.spectrum_cloud .sp-color {
  width: 180px;
  height: 180px;
  border-radius: 0;
}

.sp-container.spectrum_cloud .sp-hue {
  width: 22px;
  height: 180px;
  border-radius: var(--base-radius);
  background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
}

.sp-container.spectrum_cloud .sp-hue .sp-slider {
  width: 26px;
  height: 9px;
  background: #FFFFFF;
  border: 2px solid #9E9E9E;
  border-radius: var(--base-radius-deep);
  margin: 0;
  box-sizing: border-box;
}

.sp-container.spectrum_cloud .sp-picker-container .sp-button-container {
  position: absolute;
  bottom: -10px;
  right: 0px;
  line-height: 0;
}

.sp-container.spectrum_cloud .sp-picker-container .sp-button-container button {
  width: 46px;
  height: 27px;
  border-radius: var(--base-radius);
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.sp-container.spectrum_cloud .sp-picker-container .sp-button-container button.sp-cancel {
  color: var(--color-text-red);
}

.sp-container.spectrum_cloud .sp-picker-container .sp-button-container button.sp-choose {
  background-color: var(--color-background);
  border: 1px solid #9E9E9E;
  margin-left: 4px;
  color: var(--color-btn-text);
}

.sp-container.spectrum_cloud .sp-picker-container .sp-button-container button:hover {
  opacity: 1;
  border-color: #5B5B5B;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 텍스트 선택 */
.popup--container .pop_select_text {
  width: 500px;
  height: 300px;
}

.popup--container .popup .pop_select_text .content {
  padding: 17px 16px 24px 16px;
  background-color: var(--color-popup-background);
}

.popup--container .pop_select_text .select_tit {
  font-size: 15px;
  color: var(--color-text-base);
}

.popup--container .pop_select_text .content .select_list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 17px 10px;
}

.popup--container .pop_select_text .content>div:nth-of-type(2) {
  border-top: 1px solid var(--color-border-dull);
}


.popup--container .pop_select_text .content .btn {
  width: 100px;
  min-width: 100px;
}

.popup--container .pop_select_text .content .btn+.btn {
  margin-left: 16px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 본문 검색 */
.popup--container .pop_search {
  width: 416px;
  height: 576px;
}

.popup--container .pop_search .box.search {
  width: 100%;
  padding: 12px 16px;
  border-bottom: var(--default-border-line);
}

.popup--container .pop_search .box.search .icon_search {
  position: absolute;
  top: 0;
  right: 5px;
  width: 30px;
  height: 100%;
}

.popup--container .pop_search .box.search .icon_search i {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Ccircle cx='7.875' cy='7.875' r='4.625' stroke='%2300B2E3' stroke-width='2'/%3E%3Cpath stroke='%2300B2E3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='16' stroke-width='2' d='m11.813 11.813 2.812 2.812'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px auto;
}

.popup--container .pop_search .box.search .input_box .search_input {
  padding: 0 40px 0 10px;
}

.popup--container .pop_search .box.search .input_box.input--hover:after,
.popup--container .pop_search .box.search .input_box.input--focus:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Ccircle cx='7.875' cy='7.875' r='4.625' stroke='%2300B2E3' stroke-width='2'/%3E%3Cpath stroke='%2300B2E3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='16' stroke-width='2' d='m11.813 11.813 2.812 2.812'/%3E%3C/svg%3E");
}

.popup--container .pop_search .box.result {
  width: 100%;
  height: calc(100% - 72px);
}

.popup--container .pop_search .box.result .scroll_box {
  height: 100%;
}

.popup--container .pop_search .box.result .list_body>li {
  height: 126px;
}

.popup--container .pop_search .box.result .items {
  height: 100%;
  padding: 20px 24px;
}

.popup--container .pop_search .box.result .no_data {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 자료 추가 */
.popup--container .pop_addition {
  width: 416px;
}

.popup--container .pop_addition .tab_container {
  height: calc(100% - 60px);
}

.popup--container .pop_addition .tab_content {
  padding: 20px 20px;
  box-sizing: border-box;
}

.popup--container .pop_addition .tab_content .input_box {
  width: 100%;
}

.popup--container .pop_addition .tab_content .input_box .memo_textarea {
  height: 124px;
}

.popup--container .pop_addition .tab_content .input_box .input_count {
  padding: 5px 5px;
  color: var(--color-text-dull);
}

/* Popup :: 자료 추가 - 메모 */
.popup--container .pop_addition .book_text {
  width: 100%;
  max-height: 220px;
  margin-bottom: 20px;
  -webkit-line-clamp: 4;
  line-height: 1.4em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup--container .pop_addition .book_text p {
  font-size: 14px;
  line-height: 20px;
}

/* Popup :: 자료 추가 - 녹음 */
.popup--container .pop_addition .record_panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup--container .pop_addition .record_panel .btn {
  width: 36px;
  height: 36px;
  outline: 1px solid red;
}

.popup--container .pop_addition .record_panel .btn+.btn {
  margin-left: 10px;
}

.popup--container .pop_addition .progress_panel {
  margin: 20px 0px;
}

.popup--container .pop_addition .progress_panel .progress_bar {
  width: 100%;
  height: 10px;
  box-sizing: border-box;
}

.popup--container .pop_addition .progress_panel .progress_bar .progress.current {
  border-radius: 120px;
}

.popup--container .pop_addition .progress_panel .progress_bar .progress.handle {
  width: 30px;
  height: 30px;
  background: var(--progress-color-assort);
  -webkit-transition: opacity ease-out 0.2s;
  transition: opacity ease-out 0.2s;
}

.popup--container .pop_addition .progress_panel .progress_bar .progress.handle:after {
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: var(--color-background);
}

.popup--container .pop_addition .progress_panel .progress_time {
  margin-top: 15px;
  text-align: right;
}

/* Popup :: 자료 추가 - 링크 */
.popup--container .pop_addition .link_box {
  display: block;
  width: 100%;
  min-height: 58px;
  margin-top: 20px;
  opacity: 0.5;
}

.popup--container .pop_addition .link_box.active {
  opacity: 1;
}

.popup--container .pop_addition .link_box .txt {
  display: flex;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.popup--container .pop_addition .link_box.active .txt {
  font-weight: 700;
  color: var(--color-text-base);
}

.popup--container .pop_addition .link_box.active .txt .icon {
  display: inline-block;
  width: 4px;
  height: 4px;
  background-color: var(--hover-color-base);
  border-radius: 50%;
  margin: 2px 4px;
}

.popup--container .pop_addition .link_box .input_box input {
  height: 36px;
}

.popup--container .pop_addition .link_box .link_file {
  width: calc(100% - 46px);
  cursor: pointer;
}

.popup--container .pop_addition .link_box .find_more {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  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%3Crect x='0.5' y='0.5' width='35' height='35' rx='3.5' fill='white' stroke='%23BDBDBD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.9507 13.5L18.5138 12.7717L17.2964 10.7428C17.206 10.5921 17.0433 10.5 16.8676 10.5H10C9.72386 10.5 9.5 10.7239 9.5 11V12V14V25C9.5 25.2761 9.72386 25.5 10 25.5H26C26.2761 25.5 26.5 25.2761 26.5 25V14C26.5 13.7239 26.2761 13.5 26 13.5H19.8H18.9507ZM8 11C8 9.89543 8.89543 9 10 9H16.8676C17.5701 9 18.2212 9.3686 18.5826 9.97101L19.8 12H26C27.1046 12 28 12.8954 28 14V25C28 26.1046 27.1046 27 26 27H10C8.89543 27 8 26.1046 8 25V14V12V11Z' fill='%23616161'/%3E%3Crect x='15' y='22' width='6' height='1.5' fill='%23616161'/%3E%3C/svg%3E%0A");
}

.popup--container .pop_addition .link_box .find_more.hover {
  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%3Crect x='0.5' y='0.5' width='35' height='35' rx='3.5' fill='white' stroke='%2376A1F8'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.9507 13.5L18.5138 12.7717L17.2964 10.7428C17.206 10.5921 17.0433 10.5 16.8676 10.5H10C9.72386 10.5 9.5 10.7239 9.5 11V12V14V25C9.5 25.2761 9.72386 25.5 10 25.5H26C26.2761 25.5 26.5 25.2761 26.5 25V14C26.5 13.7239 26.2761 13.5 26 13.5H19.8H18.9507ZM8 11C8 9.89543 8.89543 9 10 9H16.8676C17.5701 9 18.2212 9.3686 18.5826 9.97101L19.8 12H26C27.1046 12 28 12.8954 28 14V25C28 26.1046 27.1046 27 26 27H10C8.89543 27 8 26.1046 8 25V14V12V11Z' fill='%2376A1F8'/%3E%3Crect x='15' y='22' width='6' height='1.5' fill='%2376A1F8'/%3E%3C/svg%3E%0A");
}

.popup--container .pop_addition .link_box .desc {
  display: block;
  margin: 10px 0;
}

/* Popup :: 자료 추가 - btn_wrap bottom */
.popup--container .popup.layer .pop_addition .content>div+.btn_wrap {
  height: 60px;
  margin-top: 0;
  padding: 0 20px;
}

.popup--container .popup.layer .pop_addition .content>.btn_wrap {
  justify-content: space-between;
}

.popup--container .popup.layer .pop_addition .content>.btn_wrap .btn.b_t+.btn {
  margin-left: 6px;
}

.popup--container .pop_addition .radio_wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.popup--container .pop_addition .radio_wrap label+label {
  margin-left: 6px;
}

/* ------------------------------------------------------------------------------------------------------------- */

/* Popup :: 내 자료함 */
.popup--container .pop_list {
  width: 416px;
}

.popup--container .pop_list .tab_container {
  height: calc(100% - 55px);
}

.popup--container .pop_list .btn_wrap.bottom {
  height: 55px;
}

.popup--container .pop_list .btn_wrap.bottom .clabel {
  color: var(--color-text-base);
  font-weight: 500;
}

.popup--container .pop_list .btn_wrap.bottom .btn.b_l {
  font-family: "Noto Sans KR", sans-serif;
}

.popup--container .pop_list .tab_content .list_header {
  justify-content: space-between;
  padding: 0px 42px 0px 48px;
}

.popup--container .pop_list .tab_content .scroll_box {
  height: calc(100% - 35px);
}

.popup--container .pop_list .tab_content .scroll_box.highlight {
  height: calc(100% - 94px);
}

/* list :: items */
.popup--container .pop_list .items {
  height: 118px;
  padding: 21px 16px 0 48px;
}

.popup--container .pop_list .items .check_wrap {
  position: absolute;
  left: 16px;
  top: 20px;
}

.popup--container .pop_list .items .thumb i {
  top: 8px;
  right: 8px;
}

.popup--container .pop_list .items .desc {
  position: relative;
}

.popup--container .pop_list .items .page {
  display: flex;
  align-items: center;
  line-height: 18px;
}

.popup--container .pop_list .items .data {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  color: var(--color-text-dull);
  font-weight: 400;
}

.popup--container .pop_list .items .cont {
  font-weight: 500;
}

.popup--container .pop_list .items.type_memo .cont {
  -webkit-line-clamp: 1;
  max-height: 18px;
}

.popup--container .pop_list .input_box input {
  background-color: var(--color-input-background);
}

/* list icon */
.popup--container .pop_list i.icon_pen {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.popup--container .pop_list i.icon_pen:before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 3px solid #FFFFFF;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.popup--container .pop_list i.icon_pen.delete_color:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #E0E0E0;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1H8' stroke='%23F03434'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 8px auto;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 인쇄 */
.popup--container .pop_print {
  width: 500px;
  height: 300px;
}

.popup--container .popup .pop_print .content {
  padding: 17px 16px 24px 16px;
  background-color: var(--color-popup-background);
}

.popup--container .pop_print .select_tit {
  font-size: 15px;
  color: var(--color-text-base);
}

.popup--container .pop_print .select_option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 17px 10px;
}

.popup--container .pop_print .select_option .btn {
  width: 100px;
  min-width: 100px;
  padding: 8px 8px;
  font-family: "Noto Sans KR", sans-serif;
}

.popup--container .pop_print .select_option .btn+.btn {
  margin-left: 16px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 도움말 */
.popup--container .pop_guide {
  width: 1088px;
  height: 674px;
}

.popup--container .pop_guide .help_title {
  width: 1088px;
  height: 40px;
  background: url(../../img/viewer/help_title.png) 0px 0px / 1088px 40px no-repeat;
  border-bottom: 1px solid #5B5B5B;
}

.popup--container .pop_guide .scroll_box {
  width: 1088px;
  height: 591px;
  border-radius: 0 0 12px 12px;
}

.popup--container .pop_guide .scroll_box img {
  width: 1083px;
}

.popup--container .pop_guide .scroll-element.scroll-y .scroll-bar {
  background-color: var(--color-assort);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup :: 메뉴 설정 */
.popup--container .pop_setting .panel .panel_area {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  flex-flow: column;
  padding: 0px 10px;
  box-sizing: border-box;
  height: calc(100% - 56px);
  padding: 0;
}

.popup--container .pop_setting .panel {
  margin: 0px 24px;
  padding: 24px 0;
  height: 100%;
  box-sizing: border-box;
}

/* panel :: key_register */
.popup--container .pop_setting .key_register {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 576px;
  max-height: 100%;
}

.popup--container .pop_setting .key_register .key_box {
  width: 154px;
  height: 100%;
  border: 1px solid var(--color-border-keybox);
  box-sizing: border-box;
  border-radius: 4px;
}

.popup--container .pop_setting .key_register .btn_wrap+.key_box {
  border: 1px solid var(--hover-color-base);
}

.popup--container .pop_setting .key_register .key_box .scroll_box {
  height: calc(100% - 26px);
}

.popup--container .pop_setting .key_register .key_box .tit {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 16px 14px 16px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-base);
  line-height: 15px;
  box-sizing: border-box;
}

.popup--container .pop_setting .key_register .key_box .tit .icon_fav {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  width: 16px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' fill='none'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23FFBA33' d='m8 1.5 2.351 4.764 5.257.764-3.804 3.708.898 5.236L8 13.5l-4.702 2.472.898-5.236L.392 7.028l5.257-.764L8 1.5Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 .5h16v16H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.popup--container .pop_setting .key_register .key_box .sub_list {
  width: 100%;
  box-sizing: border-box;
}

.popup--container .pop_setting .key_register .key_box .sub_list li {
  width: 100%;
  height: 30px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-guide);
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.popup--container .pop_setting .key_register .key_box .sub_list li.hover {
  background-color: var(--hover-color-base);
  color: var(--color-text-white);
}

.popup--container .pop_setting .key_register .key_box .sub_list li.complete {
  color: var(--color-text-complete);
}

.popup--container .pop_setting .key_register .key_control {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26px;
}

.popup--container .pop_setting .key_register .key_control .btn {
  position: relative;
  flex: 1;
  height: 100%;
  border-top: 1px solid var(--color-border-keybox);
  border-radius: 0 0 0 4px;
  background-color: #FAF9F8;
}

.popup--container .pop_setting .key_register .key_control .btn+.btn {
  border-left: 1px solid var(--color-border-keybox);
  border-radius: 0 0 4px 0;
}

.popup--container .pop_setting .key_register .key_control .btn.hover {
  background-color: var(--hover-color-btn-background);
}

.popup--container .pop_setting .key_register .key_control .btn.is--disabled {
  opacity: 1;
  background: none;
}

.popup--container .pop_setting .key_register .key_control .key_arrow_up:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none'%3E%3Cpath fill='%2300B2E3' d='m8 0 8 10H0L8 0Z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px auto;
}

.popup--container .pop_setting .key_register .key_control .key_arrow_down:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none'%3E%3Cpath fill='%2300B2E3' d='M8 10 0 0h16L8 10Z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 16px auto;
}

.popup--container .pop_setting .key_register .key_control .key_arrow_up.is--disabled:before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0L16 10H0L8 0Z' fill='%23E0E0E0'/%3E%3C/svg%3E%0A");
}

.popup--container .pop_setting .key_register .key_control .key_arrow_down.is--disabled:before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='10' viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 10L6.99382e-07 1.58893e-07L16 1.90735e-06L8 10Z' fill='%23E0E0E0'/%3E%3C/svg%3E%0A");
}

.popup--container .pop_setting .key_register .btn_wrap {
  width: 32px;
  padding-top: 120px;
}

.popup--container .pop_setting .key_register .btn_wrap .btn {
  position: relative;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  background-color: #FBFBFB;
  border: 1px solid #DEDEDE;
  border-radius: 50%;
  box-shadow: 0px 2px 4px rgba(194, 194, 194, 0.6);
}

.popup--container .pop_setting .key_register .btn_wrap .btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 32px auto;
}

.popup--container .pop_setting .key_register .btn_wrap .btn.hover {
  border-color: var(--hover-color-base);
}

.popup--container .pop_setting .key_register .btn_wrap .btn.is--disabled {
  background: none;
  opacity: 1;
}

.popup--container .pop_setting .key_register .btn_wrap .btn.key_insert:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath stroke='%2300B2E3' stroke-miterlimit='16' stroke-width='2' d='M8 16h14M16 9l7.071 7.071L16 23.142'/%3E%3C/svg%3E");
}

.popup--container .pop_setting .key_register .btn_wrap .btn.key_delete:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none'%3E%3Cpath stroke='%2300B2E3' stroke-miterlimit='16' stroke-width='2' d='M8 16h14M16 9l7.071 7.071L16 23.142'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}

.popup--container .pop_setting .key_register .btn_wrap .btn.key_insert.is--disabled:before {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16H22' stroke='%23E0E0E0' stroke-width='2' stroke-miterlimit='16'/%3E%3Cpath d='M16 9L23.0711 16.0711L16 23.1421' stroke='%23E0E0E0' stroke-width='2' stroke-miterlimit='16'/%3E%3C/svg%3E%0A");
}

.popup--container .pop_setting .key_register .btn_wrap .btn.key_delete.is--disabled:before {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16H22' stroke='%23E0E0E0' stroke-width='2' stroke-miterlimit='16'/%3E%3Cpath d='M16 9L23.0711 16.0711L16 23.1421' stroke='%23E0E0E0' stroke-width='2' stroke-miterlimit='16'/%3E%3C/svg%3E%0A");
  transform: rotate(180deg);
}

/* panel :: explain_txt */
.popup--container .pop_setting .panel .explain_txt {
  color: var(--color-text-guide);
}

.popup--container .pop_setting .panel .explain_txt.fav {
  text-indent: -14px;
  margin-top: 16px;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.4;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* 진도 관리 */
.popup--container .pop_progress {
  width: 1470px;
  height: 786px;
}

.popup--container .pop_progress .content {
  display: flex;
  flex-direction: column;
  padding: 30px;
}

.popup--container .pop_progress .scroll_box {
  width: calc(100% + 10px);
  height: calc(100% - 97px);
}

.popup--container .pop_progress .scroll_box .list_body {
  width: 1410px;
}

.popup--container .pop_progress .list_header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: var(--default-border-deep);
  border-bottom: var(--default-border-deep);
}

.popup--container .pop_progress .list_header li {
  text-align: center;
}

.popup--container .pop_progress .list_header>li,
.popup--container .pop_progress .list_body .items>* {
  position: relative;
}

.popup--container .pop_progress .list_header>li+li:before,
.popup--container .pop_progress .list_body .items>*+*:before {
  content: "";
  position: absolute;
}

.popup--container .pop_progress .list_body .items {
  padding: 0;
  cursor: default;
}

.popup--container .pop_progress .list_body .items.hover:before {
  display: none;
}

.popup--container .pop_progress .list_header>li:nth-child(1),
.popup--container .pop_progress .list_body .items>*:nth-child(1) {
  width: 92px;
}

.popup--container .pop_progress .list_header>li:nth-child(2),
.popup--container .pop_progress .list_body .items>*:nth-child(2) {
  width: 132px;
}

.popup--container .pop_progress .list_header>li:nth-child(3),
.popup--container .pop_progress .list_body .items>*:nth-child(3) {
  width: 320px;
}

.popup--container .pop_progress .list_header>li:nth-child(4),
.popup--container .pop_progress .list_body .items>*:nth-child(4) {
  flex: 1 0 0;
}

.popup--container .pop_progress .list_header>li:nth-child(5),
.popup--container .pop_progress .list_body .items>*:nth-child(5) {
  width: 110px;
}

.popup--container .pop_progress .list_header>li:nth-child(6),
.popup--container .pop_progress .list_body .items>*:nth-child(6) {
  width: 316px;
}

.popup--container .pop_progress .items .classroom,
.popup--container .pop_progress .items .date {
  text-align: center;
}

.popup--container .pop_progress .items .text_clip {
  width: calc(100% - 60px);
  -webkit-line-clamp: 1;
  box-sizing: border-box;
}

.popup--container .pop_progress .items .btn_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup--container .pop_progress .check_wrap label {
  position: absolute;
  left: 50%;
  top: 50%;
}

.popup--container .pop_progress .btn_wrap.bottom .b_t span {
  font-family: 'Cafe24 Ssurround Bold';
  font-weight: 700;
}

.popup--container .pop_progress .btn_wrap.bottom .icon_insert {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  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='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 17.5L10 2.5' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.popup--container .pop_progress .btn_wrap.bottom .icon_del {
  display: block;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  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='%235B5B5B' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* alert--container */
.alert--container .alert_msg.layer .inner {
  border-radius: 12px;
}

.alert--container .alert_msg.layer .top {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: 42px;
  padding-left: 16px;
  background-color: var(--color-assort);
  border-radius: 12px 12px 0 0;
  color: var(--color-text-white);
  font-family: 'Cafe24 Ssurround Bold';
  font-weight: 700;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.alert--container .alert_msg.layer .top:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: var(--color-assort);
  z-index: -1;
}

.alert--container .alert_msg.layer .content {
  width: 100%;
  padding: 28px 36px;
  box-sizing: border-box;
}

.alert--container .alert_msg.layer .top .btn_wrap {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
}

.alert--container .alert_msg.layer .top .btn_wrap .btn {
  position: relative;
  width: 40px;
  height: 40px;
}

.alert--container .alert_msg.layer .top .btn_wrap .pop_close i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='4' d='m3 3 12 12M15 3 3 15'/%3E%3C/svg%3E");
  background-size: 18px auto;
  transition: all 0.15s linear;
}

.alert--container .alert_msg.layer .content .btn_wrap {
  margin-top: 24px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* 진도 저장 */
.popup--container .pop_progress.save {
  width: 634px;
  height: 190px;
}

.popup--container .pop_progress .save_area,
.popup--container .pop_progress .save_area .input_box,
.popup--container .pop_progress .save_area .btn_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup--container .pop_progress .save_area .input_box {
  width: 120px;
  height: 50px;
  margin-right: 12px;
}

.popup--container .pop_progress .save_area .input_box input {
  width: 100%;
  height: 100%;
}

.popup--container .pop_progress .save_area .input_box span {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translate(0%, -50%);
}