@charset "utf-8";

/**
 * Layout v1.0 : 2024-08-20
*/
/* ------------------------------------------------------------------------------------------------------------- */
/* color */
:root {
  --color-background: #FFFFFF;
  --color-popup-background: #EEEEEE;

  --color-assort: #AC5FE9;
  --color-assort-deep: #922DE1;

  --color-text-base: #424242;
  --color-text-dull: #9E9E9E;
  --color-text-white: #FFFFFF;
  --color-text-red: #F03434;
  --color-text-guide: #757575;
  --color-text-complete: #BDBDBD;

  --color-border-base: #E0E0E0;
  --color-border-line: #EEEEEE;
  --color-border-dull: #D9D9D9;
  --color-border-accent: #F03434;
  --color-border-clabel: #C1CFD7;
  --color-border-keybox: #DEDEDE;

  --color-btn-background: #FFFFFF;
  --color-btn-text: #5B5B5B;
  --color-btn-alert: #C9DDEB;
  --color-btn-alert-deep: #922DE1;

  --hover-color-base: #922DE1;
  --hover-color-btn-background: #F0E4F9;
  --hover-color-btn-deep: #6701B7;

  --color-highlight: rgba(146, 45, 225, 0.2);

  --color-tip-box: #FAF9F8;
  --color-tip-text: #424242;

  --color-input-color: #333333;
  --color-input-border: #E0E0E0;
  --color-input-background: #FAF9F8;
  --color-input-placeholder: #B2B2BD;

  --view-nav-background: #FBF6FF;
  --view-nav-dividing: #DFD1EB;
  --view-nav-text: #707070;

  --scroll-color-thumb: #D9D9D9;
  --scroll-color-track: rgba(0, 0, 0, 0);

  --progress-color-rail: #F0E4F9;
  --progress-color-assort: #922DE1;

  --base-radius: 4px;
  --base-radius-deep: 8px;

  --base-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

  --default-border-line: 1px solid var(--color-border-line);
}

.master--layout {
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* body */
html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: fixed;
  overflow: hidden;
}

body>div {
  width: 100%;
  height: 100%;
}

.master--layout {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text-base);
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* block element */
.master--layout .area,
.master--layout [class*="_area"] {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

.master--layout .box,
.master--layout [class*="_box"] {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  position: relative;
  box-sizing: border-box;
}

.master--layout [class*="_wrap"] {
  display: inline-block;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

.master--layout .inner {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* display */
.master--layout .is--disabled {
  opacity: 0.2;
  pointer-events: none;
}

.master--layout .show {
  display: block;
}

.master--layout .hide,
.master--layout .show.hide {
  display: none;
}

.master--layout .blind {
  overflow: hidden;
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: -1px;
  text-indent: -9999px;
}

.master--layout .row {
  display: inline-block;
  width: 100%;
}

.master--layout .cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.master--layout .item_list {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.master--layout .item_list>li,
.master--layout .item_list>div,
.master--layout .item_list>.items {
  float: left;
  box-sizing: border-box;
}

.master--layout .item_list:after,
.master--layout .item_list>li:last-child:after,
.master--layout .item_list>div:last-child:after,
.master--layout .item_list>.items:last-child:after {
  content: "";
  display: block;
  clear: both;
}

.master--layout .fl {
  float: left;
}

.master--layout .fl:last-child:after {
  content: "";
  display: block;
  clear: both;
}

.master--layout .cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.master--layout .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}

.master--layout .flex>* {
  box-sizing: border-box;
}

.master--layout .flex.row {
  -webkit-flex-direction: row;
  flex-direction: row;
}

.master--layout .flex.column {
  -webkit-flex-direction: column;
  flex-direction: column;
}

.master--layout .flex.center {
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
}

.master--layout .flex.around {
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

.master--layout .flex.between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.master--layout .inline_flex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.master--layout .block_flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* font */
.master--layout .bold {
  font-weight: 700;
}

.master--layout .italic,
i {
  font-style: italic;
}

.master--layout .underline {
  border-bottom: 1px solid #333;
}

.master--layout .wbreak {
  word-break: keep-all;
}

.master--layout .tal {
  text-align: left !important;
}

.master--layout .tac {
  text-align: center !important;
}

.master--layout .tar {
  text-align: right !important;
}

.master--layout .taj {
  text-align: justify !important;
}

.master--layout .indent {
  text-indent: 0.7em;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* SVG COMMON */
.master--layout [class*="svg_"] {
  display: block;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ------------------------------------------------------------------------------------------------------------- */
/*  btn */
.master--layout .btn,
.master--layout [class*="btn_"] {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "Cafe24 Ssurround Bold", "Noto Sans KR", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-base);
  letter-spacing: -0.02em;
}

.master--layout .btn.b_t,
.master--layout .btn.b_l {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 68px;
  border-radius: var(--base-radius);
  font-size: 14px;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 500;
  box-sizing: border-box;
  /* -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s; */
}

.master--layout .btn.b_t span,
.master--layout .btn.b_l span {
  margin-top: -0.1em;
}

.master--layout .btn.btn--disabled {
  pointer-events: none;
  opacity: 1;
}

.master--layout .btn_wrap {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.master--layout .btn_wrap.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0px 20px 0px 16px;
  border-top: var(--default-border-line);
  font-family: "Noto Sans KR", sans-serif;
  box-sizing: border-box;
}

.master--layout .btn i,
.master--layout .btn svg {
  pointer-events: none;
}

.master--layout .btn.b_t {
  height: 37px;
  background-color: var(--color-btn-background);
  border-radius: var(--base-radius-deep);
  box-shadow: 0px 2px 8px rgba(194, 194, 194, 0.6);
  font-weight: 700;
  color: var(--color-btn-text);
}

.master--layout .btn.b_t.hover {
  background-color: var(--hover-color-btn-background);
}

.master--layout .btn.b_t.deep {
  background-color: var(--color-assort);
  color: var(--color-text-white);
}

.master--layout .btn.b_t.deep.hover {
  background-color: var(--hover-color-btn-deep);
}

.master--layout .btn.b_t.deep {
  background-color: var(--color-assort);
  color: var(--color-text-white);
}

.master--layout .btn.b_l {
  height: 28px;
  background-color: var(--color-btn-background);
  border: 1px solid var(--color-border-base);
}

.master--layout .btn.b_l.hover {
  background-color: var(--hover-color-btn-background);
}

.master--layout .btn.b_l.strong {
  border: 1px solid var(--color-border-accent);
}

.master--layout .btn.b_l.strong span {
  color: var(--color-text-red);
}

.master--layout .btn.b_l.strong.hover {
  background-color: #EFE9EF;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* input */
.master--layout input,
.master--layout textarea {
  resize: none;
  background: var(--color-background);
  color: var(--color-input-color);
  border: 1px solid var(--color-input-border);
  border-radius: var(--base-radius);
  box-sizing: border-box;
}

.master--layout input,
.master--layout select {
  padding: 0px 9px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-input-color);
}

.master--layout textarea {
  border: 1px solid var(--color-input-border);
  padding: 9px;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-input-color);
}

/* input - placeholder */
.master--layout input::placeholder {
  color: var(--color-input-placeholder) !important;
  font-weight: 400 !important;
  font-size: 1em;
}

.master--layout input:-ms-input-placeholder {
  color: var(--color-input-placeholder) !important;
  font-weight: 400 !important;
  font-size: 1em;
}

.master--layout textarea::placeholder {
  color: var(--color-input-placeholder) !important;
  font-weight: 400 !important;
  font-size: 1em;
}

.master--layout textarea:-ms-input-placeholder {
  color: var(--color-input-placeholder) !important;
  font-weight: 400 !important;
  font-size: 1em;
}

/* input box */
.master--layout .input_box {
  display: block;
  margin: 3px 0;
}

.master--layout .input_box input {
  width: 100%;
  height: 32px;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
}

.master--layout .input_box:before {
  content: "";
  position: absolute;
}

.master--layout .input_box.input--hover input,
.master--layout .input_box.input--hover textarea {
  border: 1px solid var(--hover-color-base);
  box-shadow: 0px 0px 0px 1px var(--hover-color-base);
}

.master--layout .input_box.input--focus input,
.master--layout .input_box.input--focus textarea {
  border: 1px solid var(--hover-color-base);
  box-shadow: 0px 0px 0px 1px var(--hover-color-base);
}

.master--layout input[type="number"]::-webkit-outer-spin-button,
.master--layout input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* label */
.master--layout .lab {
  display: block;
  position: absolute;
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: var(--color-input-placeholder);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* text_clip */
.master--layout .text_clip {
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* box-shadow */
.master--layout .select_wrap .select_menu,
.master--layout .dropdown_wrap .dropdown_menu,
.master--layout .popup.layer .container,
.master--layout .alert_msg.layer .inner {
  box-shadow: var(--base-box-shadow);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Container */
.master--layout .container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

.master--layout .container.flex>div {
  height: 100%;
}

.master--layout .container.flex>.content {
  flex-grow: 1;
  margin: 0px 20px;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* select */
.master--layout .select_wrap,
.master--layout .dropdown_wrap {
  position: relative;
}

.master--layout .select_wrap .select_toggle,
.master--layout .dropdown_wrap .dropdown_toggle {
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.master--layout .dropdown_wrap .dropdown_toggle svg,
.master--layout .dropdown_wrap .dropdown_toggle i {
  width: 100%;
  height: 100%;
}

.master--layout .select_wrap .select_toggle {
  display: inline-block;
  width: 100%;
  height: 40px;
  padding: 0 40px 0 10px;
  background-color: #FFFFFF;
  border: 2px solid var(--color-border-dull);
  line-height: 36px;
  border-radius: var(--base-radius-deep);
  text-align: left;
}

.master--layout .select_wrap .select_toggle:after {
  content: "";
  position: absolute;
  top: 1px;
  right: 10px;
  width: 20px;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%235B5B5B' d='M7.293 12.293 1.707 6.707C1.077 6.077 1.523 5 2.414 5h11.172c.89 0 1.337 1.077.707 1.707l-5.586 5.586a1 1 0 0 1-1.414 0Z'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px auto;
}

.master--layout .select_wrap .select_toggle.on:after {
  transform: rotate(-180deg);
}

.master--layout .select_wrap .select_toggle.hover {
  border-color: var(--hover-color-base);
}

.master--layout .select_wrap .select_toggle.hover:before,
.master--layout .select_wrap .select_toggle.on:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--base-radius-deep);
  box-sizing: border-box;
}

.master--layout .select_wrap .select_menu,
.master--layout .dropdown_wrap .dropdown_menu {
  display: none;
  z-index: 3100;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background-color: var(--color-background);
  border-radius: var(--base-radius);
  box-sizing: border-box;
}

.master--layout .select_wrap .select_menu.show,
.master--layout .dropdown_wrap .dropdown_menu.show {
  display: block;
  animation: marginTopPlusMotion ease 0.2s both;
  -webkit-animaition: marginTopPlusMotion ease 0.2s both;
}

/* select_wrap */
.master--layout .select_wrap .select_list {
  padding: 4px 10px;
  line-height: 34px;
}

.master--layout .select_wrap .select_list .items,
.master--layout .select_wrap .select_list [data-select-option] {
  font-size: 14px;
  color: var(--color-text-base);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
}

.master--layout .select_wrap .select_list .items.hover,
.master--layout .select_wrap .select_list [data-select-option]:hover {
  color: var(--color-assort);
}

.master--layout .select_wrap .select_list .items.hover:before,
.master--layout .select_wrap .select_list [data-select-option]:hover.before {
  display: none;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* dropdown container */
.master--layout .dropdown--container {
  display: none;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
}

.master--layout .dropdown--container.active {
  display: block;
  pointer-events: auto;
  z-index: 4300;
}

.master--layout .dropdown--container .dropdown_wrap {
  position: absolute;
}

.master--layout .dropdown_wrap .dropdown_menu {
  left: auto;
  top: -10px;
  margin: 0;
  border-radius: 16px;
}

.master--layout .dropdown_wrap .dropdown_list {
  padding: 10px 9px;
  box-sizing: border-box;
}

.master--layout .dropdown_wrap .dropdown_list li {
  width: 100%;
  min-height: 24px;
  padding: 0;
  box-sizing: border-box;
  -webkit-transition: all ease-out 0.3s;
  transition: all ease-out 0.3s;
}

.master--layout .dropdown_wrap .dropdown_list li+li {
  margin-top: 8px;
}

.master--layout .dropdown_wrap .dropdown_list .btn,
.master--layout .dropdown_wrap .dropdown_list .layer_wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 24px;
}

.master--layout .dropdown_wrap .dropdown_list .btn.show {
  display: flex;
}

.master--layout .dropdown_wrap .dropdown_list .btn.hide {
  display: none;
}

.master--layout .dropdown_wrap .dropdown_list .layer_wrap {
  position: relative;
}

.master--layout .dropdown_wrap .dropdown_list .layer_wrap .inner {
  display: none;
  position: absolute;
}

.master--layout .dropdown_wrap .dropdown_list .layer_wrap .btn.hover~.inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* type_tools */
.master--layout .dropdown_wrap.type_tools {
  width: 122px;
  height: 269px;
}

.master--layout .dropdown_wrap.type_tools .dropdown_menu {
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list {
  padding: 6px 16px;
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li+li {
  margin-top: 0;
  border-top: var(--default-border-line);
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li .btn span {
  height: 32px;
  font-family: 'Cafe24 Ssurround Bold';
  font-size: 12px;
  font-weight: 700;
  line-height: 32px;
  color: var(--view-nav-text);
}

.master--layout .dropdown_wrap.type_tools .dropdown_list li .btn.hover span {
  color: var(--hover-course-btn);
}

.master--layout .dropdown_wrap .btn_wrap {
  z-index: 3200;
  position: absolute;
  top: -7px;
  right: -8px;
  width: 26px;
  height: 26px;
}

.master--layout .dropdown_wrap .btn_wrap .dropdown_close {
  width: 100%;
  height: 100%;
  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;
}

.master--layout .dropdown_wrap.type_tools .dropdown_menu {
  background: url(../img/viewer/type_viewer_tools_background.png) 0 0/ 122px auto no-repeat;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* dividing */
.master--layout .dividing {
  border-top: 1px solid var(--color-border-dividing);
  box-sizing: border-box;
}

.master--layout .dropdown_list li.dividing {
  position: relative;
  margin-top: 11px;
  border-top: none;
}

.master--layout .dropdown_list li.dividing:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid var(--color-border-base);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* radio + .check */
.master--layout .check_wrap,
.master--layout .radio_wrap {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.master--layout .check_wrap label,
.master--layout .radio_wrap label {
  display: block;
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
}

.master--layout .radio_wrap label:before {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.master--layout .clabel,
.master--layout .rlabel {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
}

.master--layout input[type="checkbox"]+.clabel {
  position: relative;
  padding-left: 22px;
  line-height: 20px;
  font-size: 14px;
}

.master--layout input[type="checkbox"]+.clabel:before,
.master--layout input[type="checkbox"]+.clabel:after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--base-radius);
  box-sizing: border-box;
}

.master--layout input[type="checkbox"]+.clabel:before {
  border: 1px solid var(--color-border-clabel);
}

.master--layout input[type="checkbox"]:checked+.clabel:after {
  border: 1px solid var(--hover-color-base);
  background-color: var(--hover-color-base);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3L5 7L11 1' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 12px auto;
}

.master--layout input[type="checkbox"]+.clabel.chk {
  position: absolute;
  text-indent: -9999px;
  width: 16px;
  height: 16px;
  padding: 0;
}

.master--layout input[type="radio"]+.rlabel {
  padding-left: 22px;
  font-size: 14px;
  line-height: 20px;
}

.master--layout input[type="radio"]+.rlabel:before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid var(--color-border-dull);
  border-radius: 50%;
  box-sizing: border-box;
}

.master--layout input[type="radio"]:checked+.rlabel:before {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='5' fill='%2376A1F8'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  border-color: var(--color-assort);
}

/*
@media (hover: hover) {
  .master--layout input[type="checkbox"]+.clabel:hover:before {
    border-color: var(--hover-color-base);
  }

  .master--layout input[type="radio"]+.rlabel:hover:before {
    border-color: var(--hover-color-base);
  }
}
*/

/* none txt */
.master--layout input[type="radio"]+.rlabel.none_txt,
.master--layout input[type="checkbox"]+.clabel.none_txt {
  display: block;
  width: 16px;
  padding-left: 0;
  font-size: 0;
  color: rgba(0, 0, 0, 0);
}

/* ------------------------------------------------------------------------------------------------------------- */
/* default scroll */
.master--layout .scroll_box {
  overflow: hidden;
  overflow-y: auto;
  display: block;
  box-sizing: border-box;
}

.master--layout .scroll_box:not(.jq-scroll)::-webkit-scrollbar,
.master--layout textarea::-webkit-scrollbar {
  width: 4px;
}

.master--layout .scroll_box:not(.jq-scroll)::-webkit-scrollbar-thumb,
.master--layout textarea::-webkit-scrollbar-thumb {
  background-color: var(--scroll-color-thumb);
  border-radius: 0px;
}

.master--layout .scroll_box:not(.jq-scroll)::-webkit-scrollbar-track,
.master--layout textarea::-webkit-scrollbar-track {
  background-color: var(--scroll-color-track);
  border-radius: 0px;
  box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* jquery Scroll */
.master--layout .jq-scroll>.scroll-element.scroll-y {
  width: 8px;
  right: 0px;
}

.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: 8px;
  cursor: pointer;
}

.master--layout .jq-scroll>.scroll-element .scroll-element_track {
  background-color: var(--scroll-color-track);
}

.master--layout .jq-scroll>.scroll-element .scroll-element_track {
  left: 0;
}

.master--layout .jq-scroll>.scroll-element .scroll-bar,
.master--layout .jq-scroll>.scroll-element .scroll-bar:hover,
.master--layout .jq-scroll>.scroll-element.scroll-draggable .scroll-bar {
  background-color: var(--scroll-color-thumb);
}

.master--layout .popup.slide .jq-scroll>.scroll-element.scroll-y {
  right: 0;
}

.master--layout .popup.slide .jq-scroll>.scroll-element.scroll-y,
.master--layout .popup.slide .jq-scroll>.scroll-element.scroll-y .scroll-bar {
  border-radius: 0;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* spectrum_box */
.master--layout .spectrum_box {
  position: relative;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* inflex */
.master--layout .inflex {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}

.master--layout .inflex .txt_box {
  width: 90px;
}

.master--layout .inflex .input_box {
  flex-grow: 1;
}

.master--layout .inflex .input_box>.box {
  display: flex;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* tab_container */
.master--layout .tab_container {
  box-sizing: border-box;
}

.master--layout .tab_container.is--disabled {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.master--layout .tab_container .tab_menu_area {
  display: flex;
}

.master--layout .tab_container .tab_menu {
  text-align: center;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.master--layout .tab_container .inner {
  width: 100%;
}

.master--layout .tab_container .tab_content {
  display: none;
}

.master--layout .tab_container .tab_content.show {
  display: block;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* progress bar */
.master--layout .page_area {
  display: flex;
  align-items: center;
}

.master--layout .progress_bar {
  position: relative;
}

.master--layout .progress_bar .progress.rail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: var(--progress-color-rail);
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25);
  border-radius: 120px;
}

.master--layout .progress_bar .progress.current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--progress-color-assort);
  box-sizing: border-box;
}

.master--layout .progress_bar .progress.handle {
  position: absolute;
  top: 50%;
  left: 0;
  cursor: pointer;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  background: var(--progress-color-assort);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
}

.master--layout .progress_bar .progress.handle:after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  background: var(--color-background);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.master--layout .progress_bar .progress.touch {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* tooltip container */
.master--layout .tooltip {
  overflow: hidden;
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  margin: -1px;
  text-indent: -9999px;
}

.master--layout .tooltip--container {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 4200;
  pointer-events: none;
}

.master--layout .tooltip--container .tooltip {
  overflow: visible;
  top: 100%;
  left: auto;
  width: auto;
  height: auto;
  min-width: 40px;
  max-width: 800px;
  margin: 6px 0 0 0;
  padding: 6px 8px;
  background-color: var(--color-tip-box);
  font-family: "Noto Sans KR", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  color: var(--color-tip-text);
  text-indent: 0;
  border: 1px solid #BDBDBD;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  animation: fadeInMotion ease 0.3s 0.5s both;
  -webkit-animaition: fadeInMotion ease 0.3s 0.5s both;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Alert */
.master--layout .alert--container {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.master--layout .alert--container.active {
  display: block;
  pointer-events: auto;
  z-index: 4400;
}

.master--layout .alert_msg {
  display: none;
  position: absolute;
  /*
  animation: fadeInMotion ease-out 0.2s both;
  -webkit-animaition: fadeInMotion ease-out 0.2s both;
  */
}

.master--layout .alert_msg.layer {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.master--layout .alert_msg.layer .inner {
  min-width: 360px;
  min-height: 210px;
  background-color: var(--color-background);
}

.master--layout .alert_msg.layer .inner .txt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #333333;
}

.master--layout .alert_msg.layer .inner .btn_wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
}

.master--layout .alert_msg .inner .btn_wrap .btn {
  width: 106px;
  min-height: 37px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.master--layout .alert_msg .inner .btn_wrap .btn+.btn {
  margin-left: 8px;
}

.master--layout .alert_msg .inner .btn_wrap .btn.b_l {
  border: 1px solid var(--color-btn-alert);
  border-radius: var(--base-radius-deep);
  color: var(--color-btn-text);
}

.master--layout .alert_msg.min {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.master--layout .alert_msg.min .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  min-width: 360px;
  min-height: 140px;
  padding: 28px 36px;
  background-color: var(--color-background);
  border-radius: 12px;
  box-shadow: var(--base-box-shadow);
}

.master--layout .alert_msg.min .inner .txt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  color: #333333;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup & Alert event disabled */
.master--layout .popup--container.active:before,
.master--layout .alert--container.active:before {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* tip_help_over */
.master--layout .btn.tip_help_over {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  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%3Crect x='1.58333' y='1.58333' width='34.8333' height='34.8333' rx='17.4167' stroke='white' stroke-width='3.16667'/%3E%3Cpath d='M25.6776 9.58908C26.2286 10.4441 26.5041 11.3941 26.5041 12.4391C26.5041 13.3321 26.3046 14.1491 25.9056 14.8901C25.5066 15.6121 25.0031 16.2581 24.3951 16.8281C23.8061 17.3791 23.0461 17.9966 22.1151 18.6806C21.6591 19.0036 21.3171 19.3076 21.0891 19.5926C20.8801 19.8776 20.7471 20.1911 20.6901 20.5331C20.6331 20.8751 20.6046 21.3596 20.6046 21.9866C20.6046 22.4046 20.4336 22.7846 20.0916 23.1266C19.7496 23.4686 19.2081 23.6396 18.4671 23.6396C16.9281 23.6396 16.1586 23.0316 16.1586 21.8156C16.1586 20.4666 16.4056 19.3836 16.8996 18.5666C17.4126 17.7306 18.2201 16.9896 19.3221 16.3436C20.1201 15.8116 20.7471 15.2416 21.2031 14.6336C21.6781 14.0256 21.9156 13.3321 21.9156 12.5531C21.9156 11.7171 21.6876 11.0806 21.2316 10.6436C20.7756 10.2066 19.9776 9.98808 18.8376 9.98808C18.2676 9.98808 17.7831 10.0641 17.3841 10.2161C17.0041 10.3681 16.6906 10.5581 16.4436 10.7861C16.2156 11.0141 16.0636 11.1661 15.9876 11.2421C15.4366 11.7171 14.7716 11.9546 13.9926 11.9546C13.4606 11.9546 13.0331 11.8311 12.7101 11.5841C12.1781 11.1851 11.9121 10.7386 11.9121 10.2446C11.9121 9.92158 12.0356 9.60808 12.2826 9.30408C12.8716 8.58208 13.7171 7.98358 14.8191 7.50858C15.9401 7.01458 17.3176 6.76758 18.9516 6.76758C20.6236 6.76758 22.0201 7.02408 23.1411 7.53708C24.2811 8.05008 25.1266 8.73408 25.6776 9.58908ZM16.4151 29.2256C15.8831 28.8076 15.6171 28.2186 15.6171 27.4586C15.6171 26.6986 15.8831 26.1001 16.4151 25.6631C16.9471 25.2261 17.6216 25.0076 18.4386 25.0076C19.2556 25.0076 19.9301 25.2261 20.4621 25.6631C21.0131 26.1001 21.2886 26.6986 21.2886 27.4586C21.2886 28.2186 21.0131 28.8076 20.4621 29.2256C19.9301 29.6626 19.2556 29.8811 18.4386 29.8811C17.6216 29.8811 16.9471 29.6626 16.4151 29.2256Z' fill='white'/%3E%3C/svg%3E%0A");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.master--layout .btn.tip_help_over span {
  display: none;
  position: absolute;
  z-index: 100;
}

.master--layout .btn.tip_help_over.hover span {
  display: block;
  top: 100%;
  left: 50%;
  width: 200px;
  margin-top: 10px;
  padding: 8px;
  background-color: var(--color-background);
  border-radius: 4px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.08);
  transform: translate(-50%, 0%);
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  color: var(--color-text-guide);
  word-break: break-all;
  animation: fadeInMotion ease 0.3s both;
  -webkit-animaition: fadeInMotion ease 0.3s both;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------------------------------------------------- */
.master--layout .context--container {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  box-sizing: border-box;
}

.master--layout .context--container.active {
  display: block;
  pointer-events: auto;
  z-index: 3200;
}

/* context */
.master--layout .context {
  display: none;
  position: absolute;
  box-sizing: border-box;
}

.master--layout .context.context--open {
  left: 0;
  top: 0;
  padding: 0px;
  transform-origin: 0 0;
  display: block;
  /*
  animation: fadeInMotion ease-out 0.2s both;
  -webkit-animaition: fadeInMotion ease-out 0.2s both;
  */
  cursor: default;
}

.master--layout .context.layer {
  box-sizing: border-box;
}

.master--layout .context .inner {
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------------------------------------------------------- */
/* animate */
@keyframes fadeOutMotion {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes fadeOutMotion {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeInMotion {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeInMotion {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* DropListMotion */
@keyframes marginTopPlusMotion {
  0% {
    opacity: 0;
    margin-top: 0px;
  }

  100% {
    opacity: 1;
    margin-top: 4px;
  }
}

@-webkit-keyframes marginTopPlusMotion {
  0% {
    opacity: 0;
    margin-top: 0px;
  }

  100% {
    opacity: 1;
    margin-top: 4px;
  }
}

@keyframes marginBottomPlusMotion {
  0% {
    opacity: 0;
    margin-bottom: 0px;
  }

  100% {
    opacity: 1;
    margin-bottom: 4px;
  }
}

@-webkit-keyframes marginBottomPlusMotion {
  0% {
    opacity: 0;
    margin-bottom: 0px;
  }

  100% {
    opacity: 1;
    margin-bottom: 4px;
  }
}

@keyframes slideRightInMotion {
  0% {
    right: -420px;
  }

  100% {
    right: 0px;
  }
}

@-webkit-keyframes slideRightInMotion {
  0% {
    right: -420px;
  }

  100% {
    right: 0px;
  }
}

@keyframes slideLeftInMotion {
  0% {
    left: -420px;
  }

  100% {
    left: 0px;
  }
}

@-webkit-keyframes slideLeftInMotion {
  0% {
    left: -420px;
  }

  100% {
    left: 0px;
  }
}

@keyframes slideBottomInMotion {
  0% {
    bottom: -100%;
  }

  100% {
    bottom: 0px;
  }
}

@-webkit-keyframes slideBottomInMotion {
  0% {
    bottom: -100%;
  }

  100% {
    bottom: 0px;
  }
}

/* ------------------------------------------------------------------------------------------------------------- */
/* Popup up */
.master--layout .pop_install {
  width: 654px;
  height: 340px;
}

.master--layout .pop_install .step {
  display: none;
}

.master--layout .pop_install .step.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  /*padding: 20px 24px 30px 24px;*/
  box-sizing: border-box;
}

.master--layout .pop_install .step.show:nth-child(3) .row {
  padding: 20px 0;
}

.master--layout .pop_install .install_area {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 14px;
  box-sizing: border-box;
}

.master--layout .pop_install .install_area .row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.master--layout .pop_install .install_area .row:nth-child(1) {
  flex: 1 0 0;
  flex-wrap: wrap;
}

.master--layout .pop_install .install_area .row + .row {
  margin: 20px 0;
}

.master--layout .pop_install .install_area .msg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: 'Cafe24 Ssurround Bold';
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
}

.master--layout .pop_install .install_area .msg.min {
  height: auto;
}

.master--layout .pop_install .install_area .tit {
  font-family: 'Cafe24 Ssurround Bold';
  font-size: 28px;
  font-weight: 700;
}

.master--layout .pop_install .install_area .input_box {
  flex: 1 0 0;
  margin: 0 10px;
  height: 50px;
}

.master--layout .pop_install .install_area .input_box input {
  height: 100%;
  font-size: 25px;
  font-weight: 700;
  border-radius: 8px;
}

.master--layout .pop_install .install_area .input_box.input--hover input,
.master--layout .pop_install .install_area .input_box.input--focus input {
  border: 1px solid var(--color-input-border);
  box-shadow: none;
}

.master--layout .pop_install .install_area .input_box + .btn.b_t {
  min-width: 82px;
  height: 50px;
  border: none;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: 'Cafe24 Ssurround Bold';
  font-size: 20px;
  font-weight: 700;
  color: var(--hover-course-popbtn-txt)
}

.master--layout .pop_install .install_area .input_box + .btn.b_t.find {
  font-size: 22px;
}

.master--layout .pop_install .install_area .progress_bar {
  width: calc(100% - 46px - 80px);
  height: 20px;
  margin: 0 16px 0 30px;
}

.master--layout .pop_install .install_area .progress_bar .progress.rail {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #F0E4F9;
  border-radius: 120px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.2);
}

.master--layout .pop_install .install_area .progress_bar .progress.current {
  border-radius: 120px;
}

.master--layout .pop_install .install_area .progress_bar .progress.handle {
  display: none;
}

.master--layout .pop_install .install_area .percentage {
  display: inline-block;
  font-family: "Cafe24 Ssurround Bold", serif;
  font-size: 25px;
  font-weight: 700;
  color: #922DE1;
}

.master--layout .popup--container .popup .pop_install input[type="checkbox"]+.clabel {
  padding-left: 44px;
  font-family: 'Noto Sans KR';
  font-size: 25px;
}

.master--layout .popup--container .popup .pop_install input[type="checkbox"]+.clabel:before,
.master--layout .popup--container .popup .pop_install input[type="checkbox"]+.clabel:after {
  top: 5px !important;
}