@charset "UTF-8";
/* 엠티처 전체를 제어하는 스타일 입니다. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Outfit:wght@100..900&display=swap");
:root {
  --color-primary: #02a39f;
  --color-primary-bg: #e6f4f4;
  --color-primary-50: #f9fbfc;
  --color-primary-100: #e8f6f6;
  --color-primary-150: #f2fafa;
  --color-primary-200: #d1eeed;
  --color-primary-300: #8cd5d3;
  --color-primary-400: #36bac1;
  --color-primary-600: #1e9fa7;
  --color-primary-700: #017c81;
  --color-primary-800: #015c61;
  --color-primary-disabled: #88a8a7;
  --color-primary_header:#42b2bb;
  --color-secondary: #f28b9c;
  --color-secondary-500: #e26f8e;
  --color-secondary-600: #d66384;
  --button-primary: #02a39f;
  --button-primary-hover: #015c61;
  --button-primary-disable: #57AAA0;
  --button-secondary: #36bac1;
  --button-secondary-hover: #015c61;
  --button-secondary-disable: #57AAA0;
  --button-third: #f28b9c;
  --button-third-hover: #e26f8e;
  --button-third-disable: #d66384;
  --logo-images: url("/assets/images/common/logo-elementary-1486c11b230f2e3ec3947f479505e07a.svg");
  --logo-mteacher: url("/assets/images/elementary/logo-mteacher-3b376aaad6a8ba22af3f2e62b0d627a0.svg");
  --bg-prd-reference: url("/assets/images/elementary/bg-prd-reference-ac916699566b4164feba232cbb2fe2e7.png");
  --icon-star: url("/assets/images/elementary/icon-star-20dea88ee4cb44a73177b780c16566ef.svg");
  --bg-loading: url("/assets/images/elementary/bg-loading-0bcea9577e59378621b873ae3b63e5b0.png");
}

/* _reboot.scss */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  overflow-wrap: break-word;
  box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

section {
  position: relative;
}

address {
  display: inline-block;
  font-style: normal;
}

:lang(ko) {
  word-break: keep-all;
  word-wrap: break-word;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

html {
  /* 스크롤 바의 색상 지정 */
  /* 스크롤 바 호버 시 색상 지정 */
}
html ::-webkit-scrollbar {
  width: 6px; /* 스크롤 바의 너비 */
  background-color: rgba(32, 32, 32, 0.1); /* 스크롤 바의 배경색 */
}
html ::-webkit-scrollbar-thumb {
  background-color: rgba(32, 32, 32, 0.4); /* 스크롤 바의 색상 */
}
html ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(32, 32, 32, 0.8); /* 스크롤 바의 색상 */
}

body {
  font-size: 14px;
  box-sizing: border-box;
  font-family: "Outfit", "Noto Sans KR", "malgun gothic", "맑은 고딕", "open sans", sans-serif;
  color: #838383;
  line-height: 1.5;
  letter-spacing: -0.25px;
  scroll-behavior: smooth;
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

:before,
:after {
  box-sizing: border-box;
  flex-shrink: 0;
}

caption,
legend {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

table {
  border-spacing: 0;
  table-layout: fixed;
}

picture {
  display: inline-block;
}

picture > img {
  display: block;
}

img, picture, video, canvas {
  max-width: 100%;
  border: none;
}

select,
input,
.input-inner-extra {
  padding: 0;
  outline: 0;
}

hr {
  border-top: 1px solid #d2d2d2;
  max-width: 1320px;
}
hr.type-dashed {
  border-top-style: dashed;
}
hr.type-hide {
  display: none;
}

ol,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dt,
dd {
  margin: 0;
  padding: 0;
}

span {
  outline: 0;
}

a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  text-underline-position: under;
}

button {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
}
button:disabled {
  cursor: default;
}

input, .input-inner-extra,
select,
textarea {
  box-sizing: border-box;
  outline: none;
  font-size: 14px;
  font-family: "Outfit", "Noto Sans KR", "malgun gothic", "맑은 고딕", "open sans", sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

svg {
  fill: transparent;
}

/* Helper.scss */
.hidden, .buttons.type-rounded [type=checkbox],
.buttons.type-rounded [type=radio], .switcher [type=checkbox], .ox [type=checkbox],
.ox [type=radio] {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.display-hide {
  display: none !important;
}

.display-show {
  display: block !important;
}

.display-inline-block {
  display: inline-block !important;
}

.display-show-flex {
  display: flex !important;
  flex-direction: column;
}

.fill-elementary {
  background-color: #02A39F !important;
}
.fill-middle {
  background-color: #C43CB4 !important;
}
.fill-high {
  background-color: #7547D9 !important;
}
.fill-secondary-elementary {
  background-color: #F28B9C !important;
}
.fill-secondary-middle {
  background-color: #36BAC1 !important;
}
.fill-secondary-high {
  background-color: #58BC85 !important;
}
.fill-all-grade {
  background-color: #6098EA !important;
}
.fill-white {
  background-color: #fff !important;
}
.fill-white, .fill-white:hover, .fill-white:focus {
  color: #626262 !important;
}
.fill-black {
  background-color: #000 !important;
}
.fill-purple {
  background-color: #c43cb4 !important;
}
.fill-orange {
  background-color: #ff9457 !important;
}
.fill-skyblue {
  background-color: #3db0ec !important;
}
.fill-green {
  background-color: #60ba86 !important;
}
.fill-gray-100 {
  background-color: #e6e6e6 !important;
}
.fill-gray-100, .fill-gray-100:hover, .fill-gray-100:focus {
  color: #a4a4a4 !important;
}
.fill-gray-500 {
  background-color: #a4a4a4 !important;
}
.fill-lightest {
  background-color: #fafafa !important;
}
.fill-lighten {
  background-color: #f6f6f6 !important;
}
.fill-light {
  background-color: #f1f1f1 !important;
}
.fill-light, .fill-light:hover, .fill-light:focus {
  color: #626262 !important;
}
.fill-dark {
  background-color: #626262 !important;
}
.fill-primary {
  background-color: var(--color-primary) !important;
}
.fill-primary-400 {
  background-color: var(--color-primary-400) !important;
}
.fill-secondary {
  background-color: var(--color-secondary) !important;
}
.fill-tertiary {
  background-color: #f2e581 !important;
}
.fill-error {
  background-color: #f24a4a !important;
}
.fill-new {
  background-color: #fb647d !important;
}

.text-elementary {
  color: #02A39F !important;
}
.text-middle {
  color: #C43CB4 !important;
}
.text-high {
  color: #7547D9 !important;
}
.text-secondary-elementary {
  color: #F28B9C !important;
}
.text-secondary-middle {
  color: #36BAC1 !important;
}
.text-secondary-high {
  color: #58BC85 !important;
}
.text-all-grade {
  color: #6098EA !important;
}
.text-white {
  color: #fff !important;
}
.text-black {
  color: #000 !important;
}
.text-purple {
  color: #c43cb4 !important;
}
.text-orange {
  color: #ff9457 !important;
}
.text-skyblue {
  color: #3db0ec !important;
}
.text-green {
  color: #60ba86 !important;
}
.text-gray-100 {
  color: #e6e6e6 !important;
}
.text-gray-500 {
  color: #a4a4a4 !important;
}
.text-lightest {
  color: #fafafa !important;
}
.text-lighten {
  color: #f6f6f6 !important;
}
.text-light {
  color: #f1f1f1 !important;
}
.text-dark {
  color: #626262 !important;
}
.text-primary {
  color: var(--color-primary) !important;
}
.text-primary-400 {
  color: var(--color-primary-400) !important;
}
.text-secondary {
  color: var(--color-secondary) !important;
}
.text-tertiary {
  color: #f2e581 !important;
}
.text-error {
  color: #f24a4a !important;
}
.text-new {
  color: #fb647d !important;
}

.text-colorelementary {
  color: #02A39F !important;
}
.text-colormiddle {
  color: #C43CB4 !important;
}
.text-colorhigh {
  color: #7547D9 !important;
}
.text-colorsecondary-elementary {
  color: #F28B9C !important;
}
.text-colorsecondary-middle {
  color: #36BAC1 !important;
}
.text-colorsecondary-high {
  color: #58BC85 !important;
}
.text-colorall-grade {
  color: #6098EA !important;
}
.text-colorwhite {
  color: #fff !important;
}
.text-colorblack {
  color: #000 !important;
}
.text-colorpurple {
  color: #c43cb4 !important;
}
.text-colororange {
  color: #ff9457 !important;
}
.text-colorskyblue {
  color: #3db0ec !important;
}
.text-colorgreen {
  color: #60ba86 !important;
}
.text-colorgray-100 {
  color: #e6e6e6 !important;
}
.text-colorgray-500 {
  color: #a4a4a4 !important;
}
.text-colorlightest {
  color: #fafafa !important;
}
.text-colorlighten {
  color: #f6f6f6 !important;
}
.text-colorlight {
  color: #f1f1f1 !important;
}
.text-colordark {
  color: #626262 !important;
}
.text-colorprimary {
  color: var(--color-primary) !important;
}
.text-colorprimary-400 {
  color: var(--color-primary-400) !important;
}
.text-colorsecondary {
  color: var(--color-secondary) !important;
}
.text-colortertiary {
  color: #f2e581 !important;
}
.text-colorerror {
  color: #f24a4a !important;
}
.text-colornew {
  color: #fb647d !important;
}

.text-tertiary {
  color: #f2e581;
}

.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.ellipsis-single {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-multi {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legend {
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
}

.text-info-dark {
  margin-bottom: 30px;
  color: #000;
}

.extra {
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}
.extra > :not(:last-child) {
  margin-right: 4px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.float-clear {
  float: none;
  clear: both;
}

.no-gutter {
  gap: 0 !important;
}

.margin-section {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
} /* 1541 */

.no-margin {
  margin: 0 !important;
}

.margin-top-zero {
  margin-top: 0 !important;
}

.margin-top-xs {
  margin-top: 4px !important;
}

.margin-top-sm {
  margin-top: 8px !important;
}

.margin-top-md {
  margin-top: 16px !important;
}

.margin-top-lg {
  margin-top: 24px !important;
}

.margin-top-xl {
  margin-top: 32px !important;
}

.margin-top-xxxl {
  margin-top: 72px !important;
}

.padding-sm {
  padding: 14px !important;
}

.padding-md {
  padding: 24px !important;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
  border-top: 1px solid #e6e6e6;
  border-bottom: none;
}
hr.margin-sm {
  margin-top: 12px;
  margin-bottom: 12px;
}
hr.margin-md {
  margin-top: 20px;
  margin-bottom: 20px;
}
hr.margin-lg {
  margin-top: 32px;
  margin-bottom: 32px;
}

.new {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 2px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: #fb647d;
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  position: relative; /* (1496) */
  top: -1px; /* (1496) */
}

.date {
  font-size: 12px;
  color: #838383;
}

.icon-size-md {
  width: 24px;
  height: 24px;
}

.icon-size-sm {
  width: 16px;
  height: 16px;
}

.drop-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.block-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.block-wrap.type-vertical {
  flex-direction: column;
  align-items: flex-start;
}

.inline-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gutter-md {
  gap: 8px;
}

.gutter-lg {
  gap: 12px;
}

.limited-area {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

select,
.select2-container {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 85px;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}
select select,
select .select2-selection--single,
.select2-container select,
.select2-container .select2-selection--single {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 36px;
  user-select: none;
  -webkit-user-select: none;
}
select select .select2-selection__rendered,
select .select2-selection--single .select2-selection__rendered,
.select2-container select .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  padding-left: 12px;
  padding-right: 30px;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
select select .select2-selection__clear,
select .select2-selection--single .select2-selection__clear,
.select2-container select .select2-selection__clear,
.select2-container .select2-selection--single .select2-selection__clear {
  background-color: transparent;
  border: none;
  font-size: 1em;
}
select[dir=rtl] .select2-selection--single .select2-selection__rendered,
.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
  padding-right: 8px;
  padding-left: 20px;
}
select .select2-selection--multiple,
.select2-container .select2-selection--multiple {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  min-height: 32px;
  user-select: none;
  -webkit-user-select: none;
}
select .select2-selection--multiple .select2-selection__rendered,
.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: inline;
  list-style: none;
  padding: 0;
}
select .select2-selection--multiple .select2-selection__clear,
.select2-container .select2-selection--multiple .select2-selection__clear {
  background-color: transparent;
  border: none;
  font-size: 1em;
}
select .select2-search--inline .select2-search__field,
.select2-container .select2-search--inline .select2-search__field {
  box-sizing: border-box;
  border: none;
  font-size: 100%;
  margin-top: 5px;
  margin-left: 5px;
  padding: 0;
  max-width: 100%;
  resize: none;
  height: 18px;
  vertical-align: bottom;
  font-family: sans-serif;
  overflow: hidden;
  word-break: keep-all;
}
select .select2-search--inline .select2-search__field::-webkit-search-cancel-button,
.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

select.fluid {
  width: 100% !important;
}
select.fluid + .select2-container {
  width: 100% !important;
}

select {
  display: block;
  padding-left: 12px;
  border-color: #e6e6e6;
  color: #838383;
  border-radius: 4px;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: url(/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 16px 16px;
}

select.size-sm {
  height: 28px;
}
select.size-sm + .select2-container .select2-selection--single {
  height: 28px;
}
select.size-sm + .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 26px;
}
select.size-sm + .select2-container .select2-selection--single .select2-selection__arrow {
  height: 28px;
}

select.size-xl {
  height: 56px;
}
select.size-xl + .select2-container .select2-selection--single {
  height: 56px;
}
select.size-xl + .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 54px;
}
select.size-xl + .select2-container .select2-selection--single .select2-selection__arrow {
  height: 56px;
}

select.size-sm + .select2-container .select2-selection__arrow b,
select.size-sm + .select2-container .select2-selection--single .select2-selection__arrow b {
  width: 12px;
  height: 12px;
}

.select2-dropdown {
  background-color: white;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1001;
}

.select2-results {
  display: block;
}

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.select2-results__option {
  padding: 7.5px 20px 7.5px 10px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-results__option--selectable {
  cursor: pointer;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-search--dropdown {
  display: block;
  padding: 4px;
}
.select2-search--dropdown .select2-search__field {
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}
.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.select2-search--dropdown.select2-search--hide {
  display: none;
}

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--single:focus {
  border-color: var(--color-primary);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #838383;
  line-height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
  cursor: pointer;
  float: right;
  font-weight: bold;
  height: 34px;
  margin-right: 20px;
  padding-right: 0px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #999;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  position: absolute;
  top: 1px;
  right: 10px;
  width: 16px;
  display: flex;
  align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: inline-block;
  content: " ";
  width: 16px;
  height: 16px;
  transition: all 300ms ease-in-out;
  background-image: url(/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
  float: left;
}
.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #fafafa;
  cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
  display: none;
}
.select2-container--default.select2-container--disabled .select2-selection--single, .select2-container--default.select2-container--disabled .select2-selection--single:hover, .select2-container--default.select2-container--disabled .select2-selection--single:focus {
  border-color: #a4a4a4;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered, .select2-container--default.select2-container--disabled .select2-selection--single:hover .select2-selection__rendered, .select2-container--default.select2-container--disabled .select2-selection--single:focus .select2-selection__rendered {
  color: var(--color-primary-disabled);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  transform: rotateX(-180deg);
}
.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  cursor: text;
  padding-bottom: 5px;
  padding-right: 5px;
  position: relative;
}
.select2-container--default .select2-selection--multiple.select2-selection--clearable {
  padding-right: 25px;
}
.select2-container--default .select2-selection--multiple .select2-selection__clear {
  cursor: pointer;
  font-weight: bold;
  height: 20px;
  margin-right: 10px;
  margin-top: 5px;
  position: absolute;
  right: 0;
  padding: 1px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #e4e4e4;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  box-sizing: border-box;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  padding-left: 20px;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
  cursor: default;
  padding-left: 2px;
  padding-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  background-color: transparent;
  border: none;
  border-right: 1px solid #d2d2d2;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  color: #999;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  padding: 0 4px;
  position: absolute;
  left: 0;
  top: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background-color: #f1f1f1;
  color: #333;
  outline: none;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 5px;
  padding-right: 2px;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
  border-left: 1px solid #d2d2d2;
  border-right: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__clear {
  float: left;
  margin-left: 10px;
  margin-right: auto;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0;
}
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default;
}
.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none;
}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #d2d2d2;
}
.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield;
}
.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}
.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
  padding-left: 0;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -1em;
  padding-left: 2em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -2em;
  padding-left: 3em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -3em;
  padding-left: 4em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -4em;
  padding-left: 5em;
}
.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
  margin-left: -5em;
  padding-left: 6em;
}
.select2-container--default .select2-results__option--group {
  padding: 0;
}
.select2-container--default .select2-results__option--disabled {
  color: #999;
}
.select2-container--default .select2-results__option--selected {
  background-color: #ddd;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--color-primary-100);
  color: var(--color-primary);
}
.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

/**
 * Swiper 10.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: August 17, 2023
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  overflow: clip;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-vertical {
  touch-action: pan-x;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
  transform: translate3d(0px, 0, 0);
}

.swiper-android .swiper-slide {
  transform: translate3d(0px, 0, 0);
}

.swiper-ios .swiper-slide {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-horizontal > .swiper-pagination-bullets {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}
.swiper-horizontal > .swiper-pagination-progressbar {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-horizontal > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight {
  height: auto;
}
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(var(--color-primary)));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(36px) / 44 * 27);
  height: var(36px);
  margin-top: calc(0px - var(36px) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(var(--color-primary)));
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(36px);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  content: "next";
}

.swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(36px) / 44 * 27);
  height: var(36px);
  margin-top: calc(0px - var(36px) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(var(--color-primary)));
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-prev svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(36px);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
  content: "prev";
}

.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-rtl .swiper-button-next:after {
  content: "prev";
}
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}
.swiper-rtl .swiper-button-prev:after {
  content: "next";
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-button-lock {
  display: none;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination {
  display: none !important;
}

.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-custom {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(var(--color-primary)));
}

.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(var(--color-primary)));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-pagination-progressbar.swiper-pagination-horizontal {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-progressbar.swiper-pagination-vertical {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  -ms-touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar {
  display: none !important;
}

.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-zoom-container > img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube .swiper-slide-active {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-next {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active {
  pointer-events: auto;
}
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

/* ---------추가--------- */
.swiper-pagination.default-pagination {
  display: flex;
  gap: 4px;
  top: 37px;
  right: 30px;
  left: unset;
  bottom: unset;
  width: auto;
}
.swiper-pagination.default-pagination .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0;
  background-color: #b2b2b2;
  border-radius: 100%;
  transition: width 0.2s;
  opacity: 1;
}
.swiper-pagination.default-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 20px;
  background-color: #000;
  border-radius: 2px;
}

.tooltip-trigger.focus {
  position: relative;
  z-index: 101;
}

.webui-popover-content {
  display: none;
}

.webui-popover-rtl {
  direction: rtl;
  text-align: right;
}

.webui-popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
  display: none;
  min-width: 50px;
  min-height: 32px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
}
.webui-popover.top, .webui-popover.top-left, .webui-popover.top-right {
  margin-top: -6px;
}
.webui-popover.right, .webui-popover.right-top, .webui-popover.right-bottom {
  margin-left: 6px;
}
.webui-popover.bottom, .webui-popover.bottom-left, .webui-popover.bottom-right {
  margin-top: 6px;
}
.webui-popover.left, .webui-popover.left-top, .webui-popover.left-bottom {
  margin-left: -6px;
}
.webui-popover.pop {
  transform: scale(0.8);
  transition: transform 0.15s cubic-bezier(0.3, 0, 0, 1.5);
  opacity: 0;
  filter: alpha(opacity=0);
}
.webui-popover.pop-out {
  transition-property: "opacity,transform";
  transition: 0.15s linear;
  opacity: 0;
  filter: alpha(opacity=0);
}
.webui-popover.fade, .webui-popover.fade-out {
  transition: opacity 0.15s linear;
  opacity: 0;
  filter: alpha(opacity=0);
}
.webui-popover.out {
  opacity: 0;
  filter: alpha(opacity=0);
}
.webui-popover.in {
  -webkit-transform: none;
  -o-transform: none;
  transform: none;
  opacity: 1;
  filter: alpha(opacity=100);
}
.webui-popover .webui-popover-content {
  margin: 12px 12px 12px;
  max-height: 290px;
  overflow: auto;
  display: block;
}
.webui-popover .webui-popover-content .ul-dot {
  margin-top: 0;
}
.webui-popover .close + .webui-popover-content {
  padding-right: 12px;
}
.webui-popover .webui-popover-title + .webui-popover-content {
  margin-bottom: 24px;
}

.webui-popover-inner {
  margin: 12px;
}
.webui-popover-inner .close {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 14px;
  height: 14px;
  background: url(/assets/images/common/icon-closed-1f656028013c7507c2c4e301d5ae5f45.svg) center center no-repeat;
  content: "";
}

.webui-popover-title {
  margin: 24px 12px 16px;
  font-size: 14px;
  font-weight: 700;
}

.webui-popover-content {
  display: none;
}

.webui-popover-inverse {
  background-color: #333;
  color: #eee;
}
.webui-popover-inverse .webui-popover-title {
  background: #333;
  border-bottom: 1px solid #3b3b3b;
  color: #eee;
}

.webui-no-padding .webui-popover-content {
  padding: 0;
}
.webui-no-padding .list-group-item {
  border-right: none;
  border-left: none;
}
.webui-no-padding .list-group-item:first-child {
  border-top: 0;
}
.webui-no-padding .list-group-item:last-child {
  border-bottom: 0;
}

.webui-popover > .webui-arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 7px;
}
.webui-popover > .webui-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 6px;
  content: "";
}
.webui-popover.top > .webui-arrow, .webui-popover.top-right > .webui-arrow, .webui-popover.top-left > .webui-arrow {
  bottom: -7px;
  left: 50%;
  margin-left: -7px;
  border-top-color: #e6e6e6;
  border-bottom-width: 0;
}
.webui-popover.top > .webui-arrow:after, .webui-popover.top-right > .webui-arrow:after, .webui-popover.top-left > .webui-arrow:after {
  content: " ";
  bottom: 1px;
  margin-left: -6px;
  border-top-color: #fff;
  border-bottom-width: 0;
}
.webui-popover.right > .webui-arrow, .webui-popover.right-top > .webui-arrow, .webui-popover.right-bottom > .webui-arrow {
  top: 50%;
  left: -7px;
  margin-top: -7px;
  border-left-width: 0;
  border-right-color: #e6e6e6;
}
.webui-popover.right > .webui-arrow:after, .webui-popover.right-top > .webui-arrow:after, .webui-popover.right-bottom > .webui-arrow:after {
  content: " ";
  left: 1px;
  bottom: -6px;
  border-left-width: 0;
  border-right-color: #fff;
}
.webui-popover.bottom > .webui-arrow, .webui-popover.bottom-right > .webui-arrow, .webui-popover.bottom-left > .webui-arrow {
  top: -7px;
  left: 50%;
  margin-left: -7px;
  border-bottom-color: #e6e6e6;
  border-top-width: 0;
}
.webui-popover.bottom > .webui-arrow:after, .webui-popover.bottom-right > .webui-arrow:after, .webui-popover.bottom-left > .webui-arrow:after {
  content: " ";
  top: 1px;
  margin-left: -6px;
  border-bottom-color: #fff;
  border-top-width: 0;
}
.webui-popover.left > .webui-arrow, .webui-popover.left-top > .webui-arrow, .webui-popover.left-bottom > .webui-arrow {
  top: 50%;
  right: -7px;
  margin-top: -7px;
  border-right-width: 0;
  border-left-color: #e6e6e6;
}
.webui-popover.left > .webui-arrow:after, .webui-popover.left-top > .webui-arrow:after, .webui-popover.left-bottom > .webui-arrow:after {
  content: " ";
  right: 1px;
  border-right-width: 0;
  border-left-color: #fff;
  bottom: -6px;
}

.webui-popover-inverse.top > .webui-arrow, .webui-popover-inverse.top-left > .webui-arrow, .webui-popover-inverse.top-right > .webui-arrow, .webui-popover-inverse.top > .webui-arrow:after, .webui-popover-inverse.top-left > .webui-arrow:after, .webui-popover-inverse.top-right > .webui-arrow:after {
  border-top-color: #333;
}
.webui-popover-inverse.right > .webui-arrow, .webui-popover-inverse.right-top > .webui-arrow, .webui-popover-inverse.right-bottom > .webui-arrow, .webui-popover-inverse.right > .webui-arrow:after, .webui-popover-inverse.right-top > .webui-arrow:after, .webui-popover-inverse.right-bottom > .webui-arrow:after {
  border-right-color: #333;
}
.webui-popover-inverse.bottom > .webui-arrow, .webui-popover-inverse.bottom-left > .webui-arrow, .webui-popover-inverse.bottom-right > .webui-arrow, .webui-popover-inverse.bottom > .webui-arrow:after, .webui-popover-inverse.bottom-left > .webui-arrow:after, .webui-popover-inverse.bottom-right > .webui-arrow:after {
  border-bottom-color: #333;
}
.webui-popover-inverse.left > .webui-arrow, .webui-popover-inverse.left-top > .webui-arrow, .webui-popover-inverse.left-bottom > .webui-arrow, .webui-popover-inverse.left > .webui-arrow:after, .webui-popover-inverse.left-top > .webui-arrow:after, .webui-popover-inverse.left-bottom > .webui-arrow:after {
  border-left-color: #333;
}

.webui-popover i.icon-refresh {
  display: block;
  width: 30px;
  height: 30px;
  font-size: 20px;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-left: -15px;
  margin-right: -15px;
  background: url(../img/loading.gif) no-repeat;
}
.webui-popover i.icon-refresh:before {
  content: "";
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.webui-popover-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.5s;
  z-index: 100;
}

.webui-popover .dropdown-menu {
  display: block;
  position: relative;
  top: 0;
  border: none;
  box-shadow: none;
  float: none;
}

.webui-popover.webui-popover-theme-dark {
  padding: 0;
  border-color: #a4a4a4;
}
.webui-popover.webui-popover-theme-dark .webui-arrow {
  border-bottom-color: #a4a4a4;
}
.webui-popover.webui-popover-theme-dark .webui-popover-inner {
  margin: 0;
  padding: 24px 20px 20px;
}
.webui-popover.webui-popover-theme-dark .webui-popover-inner .webui-popover-title {
  font-size: 16px;
  margin: 0;
  margin-bottom: 16px;
}
.webui-popover.webui-popover-theme-dark .webui-popover-inner .webui-popover-content {
  margin: 0;
  padding: 0;
}

.webui-popover.webui-popover-theme-primary {
  padding: 0;
  border-color: var(--color-primary);
}
.webui-popover.webui-popover-theme-primary .webui-arrow {
  border-bottom-color: var(--color-primary);
}
.webui-popover.webui-popover-theme-primary .webui-popover-inner {
  margin: 0;
  padding: 24px;
}
.webui-popover.webui-popover-theme-primary .webui-popover-inner .webui-popover-title {
  margin: 0;
}
.webui-popover.webui-popover-theme-primary .webui-popover-inner .webui-popover-content {
  margin: 0;
  padding: 0;
}
.webui-popover.webui-popover-theme-primary .webui-popover-inner .webui-popover-content .ul-dot li {
  font-size: 12px;
}

.webui-popover.webui-popover-quick {
  z-index: 101;
}
.webui-popover.webui-popover-quick .webui-popover-inner {
  margin: 0;
  padding: 24px 20px;
}
.webui-popover.webui-popover-quick .webui-popover-content {
  margin: 0;
}
.webui-popover.webui-popover-quick .webui-popover-content p {
  font-size: 13px;
}
.webui-popover.webui-popover-quick-logined {
  width: 100%;
  max-width: 180px;
  z-index: 101;
}
.webui-popover.webui-popover-quick-logined .webui-popover-inner {
  margin: 0;
  padding: 24px 20px;
}
.webui-popover.webui-popover-quick-logined .webui-popover-content {
  margin: 0;
}
.webui-popover.webui-popover-quick-logined .webui-popover-content .ul-dot {
  margin-top: 0;
}
.webui-popover.webui-popover-quick-logined .webui-popover-content .ul-dot li {
  font-size: 11px;
  white-space: nowrap;
}
.webui-popover.webui-popover-quick-logined .webui-popover-content .ul-dot li:hover {
  font-weight: bold;
  color: var(--color-primary);
}

.webui-popover.webui-popover-fill-dark {
  padding: 0;
  border-color: #414141;
  background-color: #414141;
}
.webui-popover.webui-popover-fill-dark .webui-arrow {
  border-bottom-color: #414141;
}
.webui-popover.webui-popover-fill-dark .webui-arrow::after {
  border-bottom-color: #414141;
}
.webui-popover.webui-popover-fill-dark .webui-popover-inner {
  margin: 0;
  padding: 12px 16px;
}
.webui-popover.webui-popover-fill-dark .webui-popover-inner .webui-popover-title {
  font-size: 16px;
  margin: 0;
  margin-bottom: 16px;
}
.webui-popover.webui-popover-fill-dark .webui-popover-inner .webui-popover-content {
  margin: 0;
  padding: 0;
  color: #fff;
}

/*
== malihu jquery custom scrollbar plugin ==
Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller
*/
/*
CONTENTS:
	1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited).
	2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar.
	3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar.
	4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars.
	5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars.
	6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
		6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes.
*/
/*
------------------------------------------------------------------------------------------------------------------------
1. BASIC STYLE
------------------------------------------------------------------------------------------------------------------------
*/
.mCustomScrollbar {
  position: relative;
  -ms-touch-action: pinch-zoom;
  touch-action: pinch-zoom; /* direct pointer events to js */
}

.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
  -ms-touch-action: auto;
  touch-action: auto;
}

.mCustomScrollBox { /* contains plugin's markup */
  position: relative;
  overflow: hidden;
  height: 100%;
  max-width: 100%;
  outline: none;
  direction: ltr;
}

.mCSB_container { /* contains the original content */
  overflow: hidden;
  width: auto;
  height: auto;
}

/*
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR
y-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_inside > .mCSB_container {
  margin-right: 30px;
}

.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0;
} /* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 30px;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-left: 0;
} /* RTL direction/left-side scrollbar */
.mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
  position: absolute;
  width: 16px;
  height: auto;
  left: auto;
  top: 0;
  right: 0;
  bottom: 0;
}

.mCSB_outside + .mCSB_scrollTools {
  right: -26px;
} /* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */
  right: auto;
  left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
  left: -26px;
} /* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
  margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
  width: 2px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger { /* the draggable element */
  cursor: pointer;
  width: 100%;
  height: 30px; /* minimum dragger height */
  z-index: 1;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */
  position: relative;
  width: 4px;
  height: 100%;
  margin: 0 auto;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  text-align: center;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 12px; /* auto-expanded scrollbar */
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 8px; /* auto-expanded scrollbar */
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
  display: block;
  position: absolute;
  height: 20px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools .mCSB_buttonDown {
  bottom: 0;
}

/*
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR
x-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_horizontal.mCSB_inside > .mCSB_container {
  margin-right: 0;
  margin-bottom: 30px;
}

.mCSB_horizontal.mCSB_outside > .mCSB_container {
  min-height: 100%;
}

.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
} /* non-visible scrollbar */
.mCSB_scrollTools.mCSB_scrollTools_horizontal {
  width: auto;
  height: 16px;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
}

.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: -26px;
} /* scrollbar position: outside */
.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer {
  margin: 0 20px;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 2px;
  margin: 7px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 30px; /* minimum dragger width */
  height: 100%;
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 12px; /* auto-expanded scrollbar */
  margin: 2px auto;
}

.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 8px; /* auto-expanded scrollbar */
  margin: 4px 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  display: block;
  position: absolute;
  width: 20px;
  height: 100%;
  overflow: hidden;
  margin: 0 auto;
  cursor: pointer;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft {
  left: 0;
}

.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight {
  right: 0;
}

/*
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS
yx-axis
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_container_wrapper {
  position: absolute;
  height: auto;
  width: auto;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-right: 30px;
  margin-bottom: 30px;
}

.mCSB_container_wrapper > .mCSB_container {
  padding-right: 30px;
  padding-bottom: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 20px;
}

.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 20px;
}

/* non-visible horizontal scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical {
  bottom: 0;
}

/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  right: 0;
}

/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 20px;
}

/* non-visible scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  left: 0;
}

.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper { /* RTL direction/left-side scrollbar */
  margin-right: 0;
  margin-left: 30px;
}

.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container {
  padding-right: 0;
}

.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container {
  padding-bottom: 0;
}

.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden {
  margin-right: 0; /* non-visible scrollbar */
  margin-left: 0;
}

/* non-visible horizontal scrollbar */
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
  margin-bottom: 0;
}

/*
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS
------------------------------------------------------------------------------------------------------------------------
*/
.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
  -webkit-transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail {
  -webkit-transition: width 0.3s ease-out 0.2s, height 0.3s ease-out 0.2s, margin-left 0.3s ease-out 0.2s, margin-right 0.3s ease-out 0.2s, margin-top 0.3s ease-out 0.2s, margin-bottom 0.3s ease-out 0.2s, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-out 0.2s, height 0.3s ease-out 0.2s, margin-left 0.3s ease-out 0.2s, margin-right 0.3s ease-out 0.2s, margin-top 0.3s ease-out 0.2s, margin-bottom 0.3s ease-out 0.2s, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  -o-transition: width 0.3s ease-out 0.2s, height 0.3s ease-out 0.2s, margin-left 0.3s ease-out 0.2s, margin-right 0.3s ease-out 0.2s, margin-top 0.3s ease-out 0.2s, margin-bottom 0.3s ease-out 0.2s, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: width 0.3s ease-out 0.2s, height 0.3s ease-out 0.2s, margin-left 0.3s ease-out 0.2s, margin-right 0.3s ease-out 0.2s, margin-top 0.3s ease-out 0.2s, margin-bottom 0.3s ease-out 0.2s, opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/*
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
------------------------------------------------------------------------------------------------------------------------
*/
/*
----------------------------------------
6.1 THEMES
----------------------------------------
*/
/* default theme ("light") */
.mCSB_scrollTools {
  opacity: 0.75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 0;
  filter: "alpha(opacity=0)";
  -ms-filter: "alpha(opacity=0)";
}

.mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag,
.mCustomScrollBox:hover > .mCSB_scrollTools,
.mCustomScrollBox:hover ~ .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools,
.mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)";
}

.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.4);
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
  filter: "alpha(opacity=85)";
  -ms-filter: "alpha(opacity=85)";
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}

.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight {
  background-image: url(/assets/images/common/m-custom-scrollbar-sprite-3a8a4582fe1dbc77086eccca317c459e.png); /* css sprites */
  background-repeat: no-repeat;
  opacity: 0.4;
  filter: "alpha(opacity=40)";
  -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 0;
  /*
  sprites locations
  light: 0 0, -16px 0, -32px 0, -48px 0, 0 -72px, -16px -72px, -32px -72px
  dark: -80px 0, -96px 0, -112px 0, -128px 0, -80px -72px, -96px -72px, -112px -72px
  */
}

.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -20px;
  /*
  sprites locations
  light: 0 -20px, -16px -20px, -32px -20px, -48px -20px, 0 -92px, -16px -92px, -32px -92px
  dark: -80px -20px, -96px -20px, -112px -20px, -128px -20px, -80px -92px, -96px -92px, -112 -92px
  */
}

.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -40px;
  /*
  sprites locations
  light: 0 -40px, -20px -40px, -40px -40px, -60px -40px, 0 -112px, -20px -112px, -40px -112px
  dark: -80px -40px, -100px -40px, -120px -40px, -140px -40px, -80px -112px, -100px -112px, -120px -112px
  */
}

.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -56px;
  /*
  sprites locations
  light: 0 -56px, -20px -56px, -40px -56px, -60px -56px, 0 -128px, -20px -128px, -40px -128px
  dark: -80px -56px, -100px -56px, -120px -56px, -140px -56px, -80px -128px, -100px -128px, -120px -128px
  */
}

.mCSB_scrollTools .mCSB_buttonUp:hover,
.mCSB_scrollTools .mCSB_buttonDown:hover,
.mCSB_scrollTools .mCSB_buttonLeft:hover,
.mCSB_scrollTools .mCSB_buttonRight:hover {
  opacity: 0.75;
  filter: "alpha(opacity=75)";
  -ms-filter: "alpha(opacity=75)";
}

.mCSB_scrollTools .mCSB_buttonUp:active,
.mCSB_scrollTools .mCSB_buttonDown:active,
.mCSB_scrollTools .mCSB_buttonLeft:active,
.mCSB_scrollTools .mCSB_buttonRight:active {
  opacity: 0.9;
  filter: "alpha(opacity=90)";
  -ms-filter: "alpha(opacity=90)";
}

/* theme: "dark" */
.mCS-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

/* ---------------------------------------- */
/* theme: "light-2", "dark-2" */
.mCS-light-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-light-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 4px;
  margin: 6px auto;
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px 0;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -20px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -40px;
}

.mCS-light-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -56px;
}

/* theme: "dark-2" */
.mCS-dark-2.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-2.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px 0;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -20px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -40px;
}

.mCS-dark-2.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -56px;
}

/* ---------------------------------------- */
/* theme: "light-thick", "dark-thick" */
.mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  width: 4px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 4px;
  margin: 6px 0;
}

.mCS-light-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 6px;
  margin: 5px auto;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-light-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px 0;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -20px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -40px;
}

.mCS-light-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -56px;
}

/* theme: "dark-thick" */
.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px 0;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -20px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -40px;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -56px;
}

/* ---------------------------------------- */
/* theme: "light-thin", "dark-thin" */
.mCS-light-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}

.mCS-light-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 2px;
}

.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
}

.mCS-light-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 2px;
  margin: 7px auto;
}

/* theme "dark-thin" */
.mCS-dark-thin.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-thin.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px 0;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -20px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -40px;
}

.mCS-dark-thin.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -56px;
}

/* ---------------------------------------- */
/* theme "rounded", "rounded-dark", "rounded-dots", "rounded-dots-dark" */
.mCS-rounded.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}

.mCS-rounded.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger {
  height: 14px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 14px;
  margin: 0 1px;
}

.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 14px;
}

.mCS-rounded.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 14px;
  margin: 1px 0;
}

.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  width: 16px; /* auto-expanded scrollbar */
  height: 16px;
  margin: -1px 0;
}

.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 4px; /* auto-expanded scrollbar */
}

.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
  height: 16px; /* auto-expanded scrollbar */
  width: 16px;
  margin: 0 -1px;
}

.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-rounded-dark.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 4px; /* auto-expanded scrollbar */
  margin: 6px 0;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonUp {
  background-position: 0 -72px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonDown {
  background-position: 0 -92px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: 0 -112px;
}

.mCS-rounded.mCSB_scrollTools .mCSB_buttonRight {
  background-position: 0 -128px;
}

/* theme "rounded-dark", "rounded-dots-dark" */
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.15);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -80px -72px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -80px -92px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -80px -112px;
}

.mCS-rounded-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -80px -128px;
}

/* theme "rounded-dots", "rounded-dots-dark" */
.mCS-rounded-dots.mCSB_scrollTools_vertical .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_vertical .mCSB_draggerRail {
  width: 4px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  background-color: transparent;
  background-position: center;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
  background-repeat: repeat-y;
  opacity: 0.3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-rounded-dots.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-rounded-dots-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  height: 4px;
  margin: 6px 0;
  background-repeat: repeat-x;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -16px -72px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -16px -92px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -20px -112px;
}

.mCS-rounded-dots.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -20px -128px;
}

/* theme "rounded-dots-dark" */
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYV2NkIAAYSVFgDFR8BqrBBEifBbGRTfiPZhpYjiQFBK3A6l6CvgAAE9kGCd1mvgEAAAAASUVORK5CYII=");
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -96px -72px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -96px -92px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -100px -112px;
}

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -100px -128px;
}

/* ---------------------------------------- */
/* theme "3d", "3d-dark", "3d-thick", "3d-thick-dark" */
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-y;
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}

/* theme "3d", "3d-dark" */
.mCS-3d.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-3d-dark.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 70px;
}

.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 70px;
}

.mCS-3d.mCSB_scrollTools,
.mCS-3d-dark.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-3d.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.mCS-3d.mCSB_scrollTools .mCSB_draggerRail,
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  width: 8px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.5), inset -1px 0 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
}

.mCS-3d.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 8px;
  margin: 4px 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}

.mCS-3d.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  width: 100%;
  height: 8px;
  margin: 4px auto;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

/* theme "3d-dark" */
.mCS-3d-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

/* ---------------------------------------- */
/* theme: "3d-thick", "3d-thick-dark" */
.mCS-3d-thick.mCSB_scrollTools,
.mCS-3d-thick-dark.mCSB_scrollTools {
  opacity: 1;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-3d-thick.mCSB_scrollTools,
.mCS-3d-thick-dark.mCSB_scrollTools,
.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.mCSB_inside + .mCS-3d-thick.mCSB_scrollTools_vertical,
.mCSB_inside + .mCS-3d-thick-dark.mCSB_scrollTools_vertical {
  right: 1px;
}

.mCS-3d-thick.mCSB_scrollTools_vertical,
.mCS-3d-thick-dark.mCSB_scrollTools_vertical {
  box-shadow: inset 1px 0 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick.mCSB_scrollTools_horizontal,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  bottom: 1px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.5);
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
  width: 12px;
  margin: 2px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #555;
}

.mCS-3d-thick.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 12px;
  width: auto;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-3d-thick.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

/* theme: "3d-thick-dark" */
.mCS-3d-thick-dark.mCSB_scrollTools {
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 14px rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #777;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
  background-color: #fff;
  background-color: rgba(0, 0, 0, 0.05);
  box-shadow: inset 1px 1px 16px rgba(0, 0, 0, 0.1);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

/* ---------------------------------------- */
/* theme: "minimal", "minimal-dark" */
.mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
  right: 0;
  margin: 12px 0;
}

.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox.mCS-minimal-dark + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal {
  bottom: 0;
  margin: 0 12px;
}

/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal.mCSB_scrollTools_vertical,
.mCS-dir-rtl > .mCSB_outside + .mCS-minimal-dark.mCSB_scrollTools_vertical {
  left: 0;
  right: auto;
}

.mCS-minimal.mCSB_scrollTools .mCSB_draggerRail,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
}

.mCS-minimal.mCSB_scrollTools_vertical .mCSB_dragger,
.mCS-minimal-dark.mCSB_scrollTools_vertical .mCSB_dragger {
  height: 50px;
}

.mCS-minimal.mCSB_scrollTools_horizontal .mCSB_dragger,
.mCS-minimal-dark.mCSB_scrollTools_horizontal .mCSB_dragger {
  width: 50px;
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-minimal.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-minimal.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}

/* theme: "minimal-dark" */
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)";
}

.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-minimal-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  filter: "alpha(opacity=50)";
  -ms-filter: "alpha(opacity=50)";
}

/* ---------------------------------------- */
/* theme "light-3", "dark-3" */
.mCS-light-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  width: 6px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-light-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
}

.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-light-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 6px;
  margin: 5px 0;
}

.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  width: 12px;
}

.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-light-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCS-dark-3.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
  height: 12px;
  margin: 2px 0;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-light-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

/* theme "dark-3" */
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

/* ---------------------------------------- */
/* theme "inset", "inset-dark", "inset-2", "inset-2-dark", "inset-3", "inset-3-dark" */
.mCS-inset.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  width: 12px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.2);
}

.mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 6px;
  margin: 3px 5px;
  position: absolute;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar {
  height: 6px;
  margin: 5px 3px;
  position: absolute;
  width: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.mCS-inset.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-2.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3.mCSB_scrollTools_horizontal .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools_horizontal .mCSB_draggerRail {
  width: 100%;
  height: 12px;
  margin: 2px 0;
}

.mCS-inset.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -32px -72px;
}

.mCS-inset.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -32px -92px;
}

.mCS-inset.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -40px -112px;
}

.mCS-inset.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-2.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -40px -128px;
}

/* theme "inset-dark", "inset-2-dark", "inset-3-dark" */
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.1);
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonUp,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonUp {
  background-position: -112px -72px;
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonDown,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonDown {
  background-position: -112px -92px;
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonLeft,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonLeft {
  background-position: -120px -112px;
}

.mCS-inset-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_buttonRight,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_buttonRight {
  background-position: -120px -128px;
}

/* theme "inset-2", "inset-2-dark" */
.mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail {
  border-color: #000;
  border-color: rgba(0, 0, 0, 0.2);
}

/* theme "inset-3", "inset-3-dark" */
.mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.6);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.75);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.85);
}

.mCS-inset-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.9);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.75);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.85);
}

.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.9);
}

/* ---------------------------------------- */
/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
.mejs__offscreen {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal;
}

.mejs__container {
  background: #000;
  box-sizing: border-box;
  position: relative;
  text-align: left;
  text-indent: 0;
  vertical-align: top;
}
.mejs__container.mejs__video {
  margin: 0 auto;
}

.mejs__container * {
  box-sizing: border-box;
}

/* Hide native play button and control bar from iOS to favor plugin button */
.mejs__container video::-webkit-media-controls,
.mejs__container video::-webkit-media-controls-panel,
.mejs__container video::-webkit-media-controls-panel-container,
.mejs__container video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.mejs__fill-container,
.mejs__fill-container .mejs__container {
  height: 100%;
  width: 100%;
}

.mejs__fill-container {
  background: transparent;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.mejs__container:focus {
  outline: none;
}

.mejs__iframe-overlay {
  height: 100%;
  position: absolute;
  width: 100%;
}

.mejs__embed,
.mejs__embed body {
  background: #000;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 0;
  width: 100%;
}

.mejs__fullscreen {
  overflow: hidden !important;
}

.mejs__container-fullscreen {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}

.mejs__container-fullscreen .mejs__mediaelement,
.mejs__container-fullscreen video {
  height: 100% !important;
  width: 100% !important;
}

/* Start: LAYERS */
.mejs__background {
  left: 0;
  position: absolute;
  top: 0;
}

.mejs__mediaelement {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.mejs__poster {
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
  position: absolute;
  top: 0;
  z-index: 1;
}

:root .mejs__poster-img {
  display: none;
}

.mejs__poster-img {
  border: 0;
  padding: 0;
}

.mejs__overlay {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
}

.mejs__layer {
  z-index: 1;
}

.mejs__overlay-play {
  cursor: pointer;
}

.mejs__overlay-button {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  height: 90px;
  width: 90px;
  background:url("/assets/images/common/icon-overlay-play-c3b3a0a1379e6ba422b9eeed8fb56b7b.svg") no-repeat 0 0;
  background-size:cover;
}
.mejs__overlay-button svg {
  width: 100%;
  height: 100%;
}

.mejs__overlay-loading {
  height: 88px;
  width: 90px;
}

.mejs__overlay-loading-bg-img {
  animation: mejs__loading-spinner 1s linear infinite;
  display: block;
  height: 88px;
  width: 90px;
  z-index: 1;
}
.mejs__overlay-loading-bg-img svg {
  width: 100%;
  height: 100%;
}

@keyframes mejs__loading-spinner {
  100% {
    transform: rotate(1turn);
  }
}
/* End: LAYERS */
/* Start: CONTROL BAR */
.mejs__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0 20px 11px;
  width: 100%;
  list-style-type: none;
  z-index: 3;
}

.mejs__controls:not([style*="display: none"]) {
  background: rgba(255, 0, 0, 0.7);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.35));
}

.mejs__button > button {
  display: block;
  padding: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: #fff;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
}

/* :focus for accessibility */
.mejs__button > button:focus {
  outline: dotted 1px #999;
}

.mejs__container-keyboard-inactive a,
.mejs__container-keyboard-inactive a:focus,
.mejs__container-keyboard-inactive button,
.mejs__container-keyboard-inactive button:focus,
.mejs__container-keyboard-inactive [role=slider],
.mejs__container-keyboard-inactive [role=slider]:focus {
  outline: 0;
}

/* End: CONTROL BAR */
/* Start: Time (Current / Duration) */
.mejs__time {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

/* End: Time (Current / Duration) */
/* Start: Play/Pause/Stop */
.mejs__play,
.mejs__pause,
.mejs__replay {
  width: 14px;
  height: 14px;
}
.mejs__play svg,
.mejs__pause svg,
.mejs__replay svg {
  width: 100%;
  height: 100%;
}

.mejs__play > button {
  background-position: 0 0;
}

.mejs__pause > button {
  background-position: -20px 0;
}

.mejs__replay > button {
  background-position: -160px 0;
}

.mejs__pause svg.mejs__icon-pause,
.mejs__play svg.mejs__icon-play,
.mejs__replay svg.mejs__icon-replay {
  display: block;
}

.mejs__playpause-button svg {
  display: none;
}

/* End: Play/Pause/Stop */
/* Start: Progress Bar */
.mejs__time-rail {
  flex-grow: 1;
  position: relative;
}

.mejs__time-total,
.mejs__time-buffering,
.mejs__time-loaded,
.mejs__time-current,
.mejs__time-float,
.time-tooltip,
.mejs__time-hovered {
  display: block;
  position: absolute;
  border-radius: 10px;
  cursor: pointer;
}

.mejs__time-total {
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.mejs__time-buffering {
  animation: buffering-stripes 2s linear infinite;
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
  background-size: 15px 15px;
  width: 100%;
}

@keyframes buffering-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 30px 0;
  }
}
.mejs__time-loaded {
  background: rgba(255, 255, 255, 0.3);
}

.mejs__time-current,
.mejs__time-handle-content {
  background-color: #414141;
}
.mejs__time-current.selected,
.mejs__time-handle-content.selected {
  background-color: #F28B9C;
}

.mejs__time-hovered {
  background-color: rgba(65, 65, 65, 0.5);
  z-index: 10;
}

.mejs__time-hovered.negative {
  background: rgba(0, 0, 0, 0.2);
}

.mejs__time-current,
.mejs__time-buffering,
.mejs__time-loaded,
.mejs__time-hovered {
  left: 0;
  width: 100%;
  height: 4px;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: 0.15s ease-in all;
}

.mejs__time-buffering {
  transform: scaleX(1);
}

.mejs__time-hovered {
  transition: height 0.1s cubic-bezier(0.44, 0, 1, 1);
}

.mejs__time-hovered.no-hover {
  transform: scaleX(0) !important;
}

.mejs__time-handle,
.mejs__time-handle-content {
  position: absolute;
  left: 0;
  border: 2px solid transparent;
  transform: translateX(0);
  cursor: pointer;
  z-index: 11;
}

.mejs__time-handle-content {
  top: -2px;
  left: -4px;
  width: 4px;
  height: 4px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: scale(0);
}

.mejs__time-rail:hover .mejs__time-handle-content,
.mejs__time-rail .mejs__time-handle-content:focus,
.mejs__time-rail .mejs__time-handle-content:active {
  transform: scale(1);
}

.mejs__time-float, .time-tooltip {
  bottom: 100%;
  margin-bottom: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 4px;
  padding-right: 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 10px;
  text-align: center;
  transform: translateX(-50%);
}

.mejs__time-float-corner, .time-tooltip:after {
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border: 5px solid rgba(0, 0, 0, 0.8);
  border-color: rgba(0, 0, 0, 0.8) transparent transparent;
  border-radius: 0;
  line-height: 0;
  transform: translateX(-50%);
  content: "";
}

.mejs__long-video .mejs__time-float, .mejs__long-video .time-tooltip {
  margin-left: -23px;
  width: 64px;
}

.rewind-wrap {
  position: absolute;
  bottom: -11px;
  z-index: 11;
}
.rewind-wrap .mejs__time-float, .rewind-wrap .time-tooltip {
  position: relative;
  left: 8px;
}

.button-rewind {
  width: 17px;
  height: 17px;
}

.mejs__broadcast {
  position: absolute;
  top: 15px;
  width: 100%;
  height: 4px;
  color: #fff;
}

/* End: Progress Bar */
/* Start: Fullscreen */
.mejs__fullscreen-button,
.mejs__unfullscreen-button {
  width: 14px;
  height: 14px;
}
.mejs__fullscreen-button svg,
.mejs__unfullscreen-button svg {
  width: 100%;
  height: 100%;
}

.mejs__fullscreen-button > button {
  background-position: -80px 0;
}

.mejs__unfullscreen-button > button {
  background-position: -100px 0;
}

.mejs__fullscreen-button svg.mejs__icon-unfullscreen {
  display: none;
}

.mejs__unfullscreen svg.mejs__icon-unfullscreen {
  display: block;
}

.mejs__fullscreen svg.mejs__icon-fullscreen {
  display: block;
}

.mejs__unfullscreen svg.mejs__icon-fullscreen {
  display: none;
}

/* End: Fullscreen */
/* Start: Mute/Volume */
.mejs__mute > button {
  background-image: url("/assets/images/common/icon-sound-on-7162cb102cbd0c01d37adf8b0ac8768d.svg");
}

.mejs__unmute > button {
  background-image: url("/assets/images/common/icon-sound-mute-d0ccfd2d8d40d7225d286cc3987fcb59.svg");
}

.mejs__volume-button svg {
  display: none;
}

.mejs__volume-button {
  position: relative;
  width: 15px;
  height: 14px;
}

.mejs__volume-button > .mejs__volume-slider {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-backface-visibility: hidden;
  margin: 0;
  height: 115px;
  width: 25px;
  background: rgba(50, 50, 50, 0.7);
  transform: translateX(-50%);
  z-index: 1;
}

.mejs__volume-button:hover {
  border-radius: 0 0 4px 4px;
}

.mejs__volume-total {
  position: absolute;
  top: 8px;
  left: 50%;
  margin: 0;
  width: 2px;
  height: 100px;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-50%);
}

.mejs__volume-current {
  position: absolute;
  left: 0;
  margin: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
}

.mejs__volume-handle {
  position: absolute;
  left: 50%;
  height: 6px;
  width: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(-50%);
  cursor: ns-resize;
}

.mejs__horizontal-volume-slider {
  display: block;
  position: relative;
  width: 56px;
  height: 36px;
}

.mejs__horizontal-volume-total {
  position: absolute;
  top: 16px;
  left: 0;
  margin: 0;
  padding: 0;
  width: 50px;
  height: 8px;
  border-radius: 2px;
  background: rgba(50, 50, 50, 0.8);
  font-size: 1px;
}

.mejs__horizontal-volume-current {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.8);
  font-size: 1px;
}

.mejs__horizontal-volume-handle {
  display: none;
}

/* End: Mute/Volume */
/* Start: Track (Captions and Chapters) */
.mejs__captions-button,
.mejs__chapters-button {
  position: relative;
}

.mejs__captions-button > button {
  background-position: -140px 0;
}

.mejs__chapters-button > button {
  background-position: -180px 0;
}

.mejs__captions-button > .mejs__captions-selector,
.mejs__chapters-button > .mejs__chapters-selector {
  background: rgba(50, 50, 50, 0.7);
  border: solid 1px transparent;
  border-radius: 0;
  bottom: 100%;
  margin-right: -43px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 50%;
  visibility: visible;
  width: 86px;
}

.mejs__chapters-button > .mejs__chapters-selector {
  margin-right: -55px;
  width: 110px;
}

.mejs__captions-selector-list,
.mejs__chapters-selector-list {
  list-style-type: none !important;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.mejs__captions-selector-list-item,
.mejs__chapters-selector-list-item {
  color: #fff;
  cursor: pointer;
  display: block;
  list-style-type: none !important;
  margin: 0 0 6px;
  overflow: hidden;
  padding: 0;
}

.mejs__captions-selector-list-item:hover,
.mejs__chapters-selector-list-item:hover {
  background-color: rgb(200, 200, 200) !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.mejs__captions-selector-input,
.mejs__chapters-selector-input {
  clear: both;
  float: left;
  left: -1000px;
  margin: 3px 3px 0 5px;
  position: absolute;
}

.mejs__captions-selector-label,
.mejs__chapters-selector-label {
  cursor: pointer;
  float: left;
  font-size: 10px;
  line-height: 15px;
  padding: 4px 10px 0;
  width: 100%;
}

.mejs__captions-selected,
.mejs__chapters-selected {
  color: rgb(33, 248, 248);
}

.mejs__captions-translations {
  font-size: 10px;
  margin: 0 0 5px;
}

.mejs__captions-layer {
  bottom: 0;
  color: #fff;
  font-size: 16px;
  left: 0;
  line-height: 20px;
  position: absolute;
  text-align: center;
}

.mejs__captions-layer a {
  color: #fff;
  text-decoration: underline;
}

.mejs__captions-layer[lang=ar] {
  font-size: 20px;
  font-weight: normal;
}

.mejs__captions-position {
  bottom: 15px;
  left: 0;
  position: absolute;
  width: 100%;
}

.mejs__captions-position-hover {
  bottom: 35px;
}

.mejs__captions-text,
.mejs__captions-text * {
  background: rgba(20, 20, 20, 0.5);
  box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
  padding: 0;
  white-space: pre-wrap;
}

.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container {
  display: none;
}

/* End: Track (Captions and Chapters) */
/* Start: Error */
.mejs__overlay-error {
  position: relative;
}

.mejs__overlay-error > img {
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  z-index: -1;
}

.mejs__cannotplay,
.mejs__cannotplay a {
  color: #fff;
  font-size: 0.8em;
}

.mejs__cannotplay {
  position: relative;
}

.mejs__cannotplay p,
.mejs__cannotplay a {
  display: inline-block;
  padding: 0 15px;
  width: 100%;
}

/* End: Error */
.controls-time {
  position: absolute;
  bottom: 20px;
  z-index: 5;
  height: 4px;
}

.time-tooltip {
  animation: slideUp 1s;
}
.mejs-speed-button,
.mejs__speed-button {
  position: relative;
}

.mejs-speed-button > button,
.mejs__speed-button > button {
  background: transparent;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

.mejs-speed-selector,
.mejs__speed-selector {
  position: absolute;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  visibility: visible;
  padding: 0;
  width: 60px;
  height: 150px;
  border: 1px solid transparent;
  border-radius: 0;
  background: rgba(50, 50, 50, 0.7);
  transform: translateX(-50%);
}

.mejs-speed-selector-list,
.mejs__speed-selector-list {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.mejs-speed-selector-list-item,
.mejs__speed-selector-list-item {
  display: block;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 0 10px;
  list-style-type: none;
  color: #fff;
}

.mejs-speed-selector-list-item:hover,
.mejs__speed-selector-list-item:hover {
  background-color: #c8c8c8;
  background-color: hsla(0, 0%, 100%, 0.4);
}

.mejs-speed-selector-input,
.mejs__speed-selector-input {
  position: absolute;
  left: -1000px;
  clear: both;
  float: left;
  margin: 3px 3px 0 5px;
}

.mejs-speed-selector-label,
.mejs__speed-selector-label {
  float: left;
  margin-left: 5px;
  padding: 4px 0 0;
  width: 60px;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  cursor: pointer;
}

.mejs-speed-selected,
.mejs__speed-selected {
  color: var(--color-primary);
}

.mejs-speed-selector,
.mejs__speed-selector {
  visibility: hidden;
}

.mejs-speed-button:hover .mejs-speed-selector,
.mejs__speed-button:hover .mejs__speed-selector {
  visibility: visible;
}

.wrapper {
  position: relative;
}

header.header {
  position: relative;
  top: 0;
  width: 100%;
  min-width: 1320px;
  background-color: #fff;
  z-index: 100;
}
header.header.fixed {
  position: fixed;
}
header.header.fixed .header-inner,
header.header.fixed .util-wrap {
  display: none;
}
header.header .logo {
  width: 136px;
}
header.header .logo a {
  display: block;
  height: 60px;
  font-size: 0px;
}
header.header .logo img {
  width: 100%;
  height: 100%;
}
header.header .search-inner {
  width: 210px;
  position: relative;
  padding-right: 40px;
  background-color: white;
  border-radius: 4px;
  border:1px solid #e6e6e6;
}
header.header .search-inner .clear-container {
  border: none;
}
header.header .search-inner input, header.header .search-inner .input-inner-extra {
  height: 50px;
  color: #000;
  font-size: 13px;
  border: none;
}
header.header .search-inner input::placeholder, header.header .search-inner .input-inner-extra::placeholder {
  color: #d2d2d2;
}
header.header .search-inner .icon-search {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  color: var(--color-primary);
}
header.header .search-inner .icon-search svg {
  width: 30px;
  height: 30px;
}
header.header .items {
  display: none;
  left: 50% !important;
  margin-top: 7px;
  padding: 12px;
  min-width: auto !important;
  max-width: 224px;
  border-color: var(--color-primary);
  border-radius: 0px 0px 4px 4px;
  transform: translateX(-50%);
}
header.header .items::before, header.header .items::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -100%);
}
header.header .items::before {
  top: -1px;
  border-bottom: 8px solid var(--color-primary);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
header.header .items::after {
  top: 1px;
  border-bottom: 9px solid #fff;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
}
header.header .items .button {
  position: relative;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 12px;
  padding-right: 32px;
  min-width: 130px;
  color: #626262;
  text-align: left;
  white-space: normal !important;
}
header.header .items .button:hover, header.header .items .button:focus {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}
header.header .items .button svg {
  position: absolute;
  top: 16px;
  right: 12px;
  width: 12px;
  height: 12px;
}
header.header .header-personal .items {
  padding-bottom: 40px;
}
header.header .close-button {
  position: absolute;
  bottom: 0;
  right: calc((100% - 1320px) / 2);
  padding: 6px 37px 6px 16px;
  background: #fff url("/assets/images/common/icon-closed-1f656028013c7507c2c4e301d5ae5f45.svg") no-repeat right 16px center/16px 16px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(100%);
}
header.header .header-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 1320px;
  height: 40px;
  opacity: 1;
}
header.header .header-contents,
header.header .header-personal {
  background: var(--color-primary_header);
}
header.header .header-contents.header-contents,
header.header .header-personal.header-contents {
  position: relative;
}
header.header .header-contents .buttons,
header.header .header-personal .buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
header.header .header-contents .buttons {
  gap: 12px;
}
header.header .header-contents .buttons a:before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 15px;
  background: rgba(255,255,255,0.4);
  vertical-align: middle;
  margin-right: 12px;
}
header.header .header-contents .buttons a:first-child:before {
  display: none;
}
header.header .header-contents .buttons img {
  vertical-align:middle;
  transform: scale(95%);
}
header.header.header-mchive .header-contents {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.02);
}
header.header.header-mchive .gnb-inner {
  width: 1320px;
}
header.header.header-mchive .gnb {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  width: 100%;
}
header.header.header-mchive .gnb .swiper-slide {
  width: unset !important;
}
header.header.header-mchive .gnb .swiper-button-prev,
header.header.header-mchive .gnb .swiper-button-next {
  width: 100px;
  height: 100%;
  opacity: 1;
  color: #000;
  transform: translateY(-50%);
}
header.header.header-mchive .gnb .swiper-button-prev.swiper-button-disabled,
header.header.header-mchive .gnb .swiper-button-next.swiper-button-disabled {
  display: none;
}
header.header.header-mchive .gnb .swiper-button-prev {
  justify-content: flex-start;
  left: 0;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, #fff 62.38%);
}
header.header.header-mchive .gnb .swiper-button-next {
  justify-content: flex-end;
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 62.38%);
}
header.header.header-mchive .gnb > ul {
  gap: 0;
}
header.header.header-mchive .gnb > ul > li > a {
  color: #000;
  opacity: 1;
}
header.header.header-mchive .gnb > ul > li:hover > a, header.header.header-mchive .gnb > ul > li.active > a {
  color: var(--color-primary);
}

.common-nav {
  display: flex;
  align-items: center;
  height: 40px;
}
.common-nav > :not(:first-child) {
  position: relative;
  margin-left: 22px;
}
.common-nav > :not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 2px;
  height: 2px;
  background-color: #707070;
  transform: translateY(-50%);
  opacity: 0.5;
}
.common-nav > .common-nav:before{
  display:none;
}
.common-nav > a,
.common-nav .dropdown button {
  color: #838383;
  font-size: 12px;
  line-height: 1;
}
.common-nav > a.active,
.common-nav .dropdown button.active {
  color: var(--color-primary);
  font-weight: 700;
}
.common-nav > a.active svg,
.common-nav .dropdown button.active svg {
  transform: rotateZ(180deg);
}
.common-nav .dropdown {
  top: -1px;
}
.common-nav .dropdown svg {
  width: 12px;
  height: 11px;
}
.common-nav .aiclass {
  display:inline-block;
  width: 57px;
  height: 18px;
  background: url("/assets/images/common/icon-aiclass-827dfa893d1fc34419e3b49306d06afd.svg") no-repeat center/contain;
  text-indent: -9999rem;
}
.common-nav > .dropdown.ai::before{
  display:none;
}
.common-nav .dropdown.ai svg{
  vertical-align:-4px;
}
.common-nav .mkaive {
  width:50px;
  height:18px;
  margin-left:18px;
  color:#000;
  text-indent:-9999rem;
  background:url(/assets/images/common/logo-m-chive-71fd840a6b490292d898e4063d3eb140.svg) no-repeat center / contain;
}
.common-nav .tlive{
  width:57px;
  height:18px;
  margin-left:18px;
  text-indent:-9999rem;
  background:url(/assets/images/common/logo-teacher-live-349607a477421929f03864448f545799.svg) no-repeat center / contain;
}
.common-nav .tlive + a {
  margin-left: 29px;
}
.common-nav .tlive + a::before {
  left: -15px;
  width: 1px;
  height: 10px;
  background-color: #e3e3e3;
  opacity: 1;
}

.gnb-wrap,
.personal-wrap {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 1320px;
  height: 60px;
}
.gnb-wrap::before, .gnb-wrap::after,
.personal-wrap::before,
.personal-wrap::after {
  /*content: "";*/
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(-100%);
}
.gnb-wrap::before,
.personal-wrap::before {
  top: 0;
  left: calc((100% - 1320px) / 2 - 31px);
  width: 15px;
  height: 6px;
  background-image: url("/assets/images/common/img-triangle01-e4582d206fa11e384d8ef8996ce45855.svg");
}
.gnb-wrap::after,
.personal-wrap::after {
  bottom: 0;
  left: calc((100% - 1320px) / 2 - 29px);
  width: 20px;
  height: 8px;
  background-image: url("/assets/images/common/img-triangle02-bd758e9b2a4b8d2b8fa18d4e93fb5cc8.svg");
}

.personal-wrap {
  justify-content: normal;
}
.personal-wrap .badge {
  margin-right: 8px;
}
.personal-wrap .buttons {
  margin-left: auto;
}

.gnb-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap:28px;
}

.gnb > ul {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 30px;
  margin-top:2px;
}
.gnb > ul > li:hover > a, .gnb > ul > li.active > a {
  position: relative;
  font-weight: 700;
  transform: scale(1.1);
  opacity: 1;
}
.gnb > ul > li:hover > a::before, .gnb > ul > li.active > a::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  aspect-ratio: 1/1;
  animation: 150ms linear 0s alternate animating-underline;
}
.gnb > ul > li .lnb-wrap {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: all 250ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
}
.gnb > ul > li.active .lnb-wrap {
  opacity: 1;
  transform: scaleY(1);
}
.gnb > ul > li > a {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.36px;
  transform-origin: 50% 100%;
  transition: all 250ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  opacity: 0.9;
}
.gnb > ul > li > a .new { position:relative; top:-3px; right:0px; margin-left:0px; }

.lnb {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  width: 100%;
  padding-bottom:25px;
}
.lnb.type-text-box {
  padding: 30px 0;
  display: unset;
}
.lnb a {
  display: flex;
  align-items: center;
  font-weight: unset;
}
.lnb .depth-2 {
  padding: 25px 12px 0;
}
.lnb .depth-2:last-child {
  border-right-color: transparent;
}
.lnb .depth-2:hover a {
  transform: unset;
}
.lnb .depth-2:hover a::before {
  content: none;
}
.lnb .depth-2 > a {
  transform: unset;
  padding: 9px 10px;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height:1;
}
.lnb .depth-2 > a:nth-child(n+2) {
  margin-top: 20px;
}
.lnb .depth-2 > a:hover {
  color: var(--color-primary);
}
.lnb a .blank svg{
  margin-left:4px;
  width:14px;
  height:14px;
}
.lnb .depth-3 {
  margin-top: 10px;
}
.lnb .depth-3 + a:nth-child(n+2) {
  margin-top: 62px;
}
.lnb .depth-3 a {
  position: relative;
  font-size: 14px;
  line-height:1;
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 10px;
  padding-right: 45px;
  color: #626262;
}
.lnb .depth-3 a:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary);
  font-weight: 700;
}
.lnb .depth-3 a:hover::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 16px;
  height: 16px;
  background: url("/assets/images/common/icon-circle-chevron-right-bdab5308dcfdd785f67d77d83e5db0af.svg") no-repeat center/contain;
  transform: translateY(-50%);
}
.lnb .lnb-contents {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
}
/* (1496) 수정.site-map .depth-items.type-vertical .depth-2 > a {
.lnb .text-data {
  display: inline-block;
  padding: 12px 16px;
  border: 1px solid transparent;
  background-color: #f6f7f9;
}
.lnb .text-data:hover {
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 500;
}
*/
.lnb-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
}
.lnb-wrap .banners {
  flex-shrink: 0;
  padding: 30px 0;
  width: 290px;
}
.lnb-scroll{
  max-height:650px;
  overflow:hidden;
  overflow-y:auto;
}
.lnb-inner {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin: 0 auto;
  width: 1320px;
}
.lnb-inner.type-line {
  background: url(/assets/images/common/bg-gnb-depth2-3e7e07cd640c88c526aeaae0c2ae54b3.svg) 0 0 repeat-y;
}

.lnb-contents {
  display: grid;
  gap: 10px;
}
.lnb-contents a:hover .text-data {
  color: var(--color-primary);
  font-weight: 500;
}
.lnb-contents .text-data {
  color: #000;
  font-size: 14px;
}

.grade-lnb {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
  align-self: stretch;
}
.grade-lnb ul {
  flex-basis: 150px;
  flex-shrink: 0;
  padding-top: 18px;
  border-right: 1px solid #d2d2d2;
}
.grade-lnb ul li a {
  color: #626262;
  font-size: 13px;
}
.grade-lnb ul li:hover, .grade-lnb ul li.active {
  background: var(--color-primary-100);
}
.grade-lnb ul li:hover a, .grade-lnb ul li.active a {
  transform: unset;
  position: relative;
  color: var(--color-primary);
  font-weight: 700;
}
.grade-lnb ul li:hover a::before, .grade-lnb ul li.active a::before {
  content: none;
}
.grade-lnb ul li:hover a::after, .grade-lnb ul li.active a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 16px;
  height: 16px;
  background: url("/assets/images/common/icon-circle-chevron-right-bdab5308dcfdd785f67d77d83e5db0af.svg") no-repeat center/contain;
  transform: translateY(-50%);
}
.grade-lnb a {
  display: block;
  padding: 11px 10px;
  color: #626262;
  font-size: 14px;
}

.grade-contents {
  background-color: white;
  flex-grow: 1;
  padding: 30px 0 30px 30px;
}
.grade-contents .lnb-header {
  position: relative;
}
.grade-contents .tabs {
  position: relative;
}
.grade-contents .sort {
  display: flex;
  flex-wrap: nowrap;
  gap: 21px;
  position: absolute;
  top: 6px;
  right: 0;
}
.grade-contents .sort button {
  color: #838383;
  font-size: 12px;
}
.grade-contents .sort button:not(:first-child) {
  position: relative;
}
.grade-contents .sort button:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -11px;
  width: 1px;
  height: 10px;
  background: #d2d2d2;
  transform: translateY(-50%);
}
.grade-contents .sort button.active {
  color: var(--color-primary);
  font-weight: 500;
}
.grade-contents .lnb-contents {
  margin-top: 20px;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.grade-contents .lnb-contents a {
  padding: unset;
}
.grade-contents .lnb-contents a:hover .thumb {
  box-shadow: 0px 8px 12px 0px rgba(17, 100, 99, 0.3);
}
.grade-contents .lnb-contents a:hover .thumb::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-primary);
}
.grade-contents .lnb-contents a:hover .thumb img {
  height: 100%;
}
.grade-contents .thumb {
  position: relative;
  width: 120px;
  height: 155px;
  overflow: hidden;
}
.grade-contents .badges {
  margin-top: 8px;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.grade-contents .badge {
  font-weight: 400;
}

@keyframes animating-underline {
  from {
    width: 0;
    filter: brightness(75%);
  }
  to {
    width: 100%;
  }
}
html.header-overlay {
  overflow-y: hidden;
  scrollbar-gutter: stable;
}
html.header-overlay .gnb-dim {
  display: block;
  z-index: 99;
}

.dimd, html.header-overlay .gnb-dim {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}

html.active-overlay {
  overflow-y: hidden;
  /*scrollbar-gutter: stable;*/
}

.container {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 1320px;
  margin: 18px auto 80px;
  gap: 48px;
}
.container aside {
  width: 224px;
  flex-shrink: 0;
}
.container main {
  flex-grow: 1;
  min-width: 0;
}
.container main section,
.container main section .section-inner {
  max-width: 1320px;
  margin: 30px auto;
}
.container main section.fluid {
  max-width: 100%;
}
.container main section.faq-section {
  margin-bottom: 64px;
}
.container main section.faq-section:last-child {
  margin-bottom: 0;
}
.container main section.search-section {
  margin: 40px auto;
}
.container main section.search-section:last-child {
  margin-bottom: 0;
}

.gnb-wrap .sidemenu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 30px 0;
  height: 100%;
  border-right: 1px solid #e6e6e6;
}
.gnb-wrap .grade {
  width: 150px;
  height: 42px;
}
.gnb-wrap .grade.active .depth3 {
  display: flex;
}
.gnb-wrap .grade.active .grade-button {
  font-weight: 700;
  color: var(--color-primary);
  background: #e6f4f4 url(/assets/images/common/ico-arrow-right.png) right 12px no-repeat;
  background-position-x: 95%;
}
.gnb-wrap .grade-button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  line-height: 42px;
  font-size: 13px;
  color: #626262;
}
.gnb-wrap .grade-button:active, .gnb-wrap .grade-button:hover, .gnb-wrap .grade-button:focus {
  color: var(--color-primary);
  background-color: #e6f4f4;
}
.gnb-wrap .menu-list {
  height: 100%;
}

/* family-site */
footer {
  position: relative;
}
footer.layout-footer {
  margin-top: 80px;
  padding: 0;
  border-top: 1px solid #000;
  min-width: 1320px;
}
footer .inner {
  max-width: 1320px;
  margin: 0 auto;
}
footer .family-site-button {
  min-width: 200px;
  padding: 12px 20px;
  min-height: 49px;
  border-color: #d2d2d2;
  border-width: 0 1px;
  border-style: solid;
  background-color: #fff;
  background-image: url("/assets/images/common/icon-chevron-up-10b0d8e46b98596b16400e176548b2ee.svg");
  background-position: right 24px center;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  font-size: 13px;
  font-weight: 300;
  text-align: left;
  color: #414141;
}
footer .family-site-button.active {
  background-image: url("/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg");
  background-color: #000;
  color: #fff;
}
footer .family-site {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  transform: translateY(-100%);
  width: 100%;
  height: 100vh;
}
footer .family-site .wrap {
  background-color: #fff;
  position: absolute;
  bottom: 1px;
  left: 0;
  z-index: 2;
  width: 100%;
}
footer .family-site .list {
  max-width: 1320px;
  margin: 0 auto;
}
footer .family-site .list > li {
  display: flex;
  gap: 28px;
  padding: 30px 20px;
  padding-right: 0;
  border-bottom: 1px solid #e6e6e6;
}
footer .family-site .list > li :last-child {
  border-bottom: none;
}
footer .family-site .list a {
  font-size: 13px;
  line-height: 1;
}
footer .family-site .list h4 {
  width: 150px;
  flex-shrink: 0;
}
footer .family-site .list .ul-dot {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 20px 40px;
}
footer .family-site .list .ul-dot li {
  width: 192px;
  margin: 0;
  vertical-align: middle;
}
footer .family-site .list .ul-dot li::before {
  top: 50%;
  transform: translateY(-50%);
}
footer .family-site .list .ul-dot li:hover {
  color: var(--color-primary);
  font-weight: bold;
}
footer .family-site .list .ul-dot li:hover:before {
  background-color: var(--color-primary);
}
footer .family-site .close-button {
  position: absolute;
  top: 0;
  right: calc((100% - 1320px) / 2);
  transform: translateY(-100%);
  padding: 6px 37px 6px 16px;
  background: #fff url("/assets/images/common/icon-closed-1f656028013c7507c2c4e301d5ae5f45.svg") no-repeat right 16px center/16px 16px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
}

/* footerTop */
.footer-info .inner {
  display: flex;
  align-items: center;
  flex-basis: 1320px;
  gap: 24px;
}

.policy {
  flex-grow: 1;
}
.policy ul {
  overflow: hidden;
}
.policy ul li {
  float: left;
  margin-right: 20px;
}
.policy ul li a {
  padding: 5px 0;
  font-size: 13px;
  color: #626262;
}
.policy ul li a:hover, .policy ul li a:active, .policy ul li a:focus {
  text-decoration: underline;
}
.policy ul:last-child {
  margin-right: 0;
}

.sns a {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.sns a svg {
  width: 100%;
  height: 100%;
}
.sns .ft-youtube {
  background-position: 0 0;
}
.sns .ft-facebook {
  background-position: -38px 0;
}
.sns .ft-kakao {
  background-position: -76px 0;
}
.sns .ft-naver {
  background-position: -114px 0;
}

/* footerBottom */
.footer-address {
  display: block;
  padding: 30px 0;
  text-align: left;
  border-top: 1px solid #e6e6e6;
}
.footer-address .ft-logo {
  margin-bottom: 21px;
  display: inline-block;
  width: 112px;
  height: 30px;
}
.footer-address .ft-logo svg {
  width: 100%;
  height: 100%;
}
.footer-address .ft-address ul {
  overflow: hidden;
  margin: 0 -5px;
}
.footer-address .ft-address ul li {
  float: left;
  font-size: 12px;
  color: #838383;
  margin: 5px;
}
.footer-address .ft-address ul li:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 9px;
  margin-left: 10px;
  background: #d5d5d5;
}
.footer-address .ft-address ul li:last-child::after {
  display: none;
}
.footer-address .ft-address p {
  margin: 0;
  margin-top: 15px;
  color: #838383;
  font-size: 12px;
}

#snb.type-fold .snb-header {
  padding-bottom: 15px;
}
#snb.type-fold .snb-header .items {
  top: 31px !important;
  left: -10px !important;
  width: 204px !important;
}
#snb.type-fold .snb-header .items li {
  white-space: inherit !important;
}
#snb.type-fold .snb-header .items a {
  white-space: inherit !important;
  word-break: normal;
}
#snb.type-fold .snb-header .items a:hover {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 500;
}
#snb.type-fold .snb-header .items a:hover::before {
  background-color: var(--color-primary);
}
#snb.type-fold .dropdown {
  width: 100% !important;
}
#snb.type-fold .dropdown button {
  width: 100%;
}
#snb.type-fold .subject-items .active > a {
  color: #626262;
}
#snb .dropdown {
  margin-right: auto;
}
#snb .dropdown button {
  position: relative;
  padding-right: 28px;
  color: black;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
  letter-spacing: -0.4px;
}
#snb .dropdown button.active svg {
  transform: rotateZ(180deg);
}
#snb .dropdown button .name {
  display: block;
  margin-top: 15px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary-1500);
  opacity: 0.5;
}
#snb .dropdown svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}
#snb .divider-group li::before, #snb .page-header ul li::before, .page-header #snb ul li::before {
  height: 9px;
  background-color: var(--color-primary-400);
  opacity: 0.5;
}
#snb .divider-group .button, #snb .page-header ul .button, .page-header #snb ul .button {
  color: #838383;
  font-size: 12px;
  font-weight: 700;
}
#snb .divider-group .button.active, #snb .page-header ul .button.active, .page-header #snb ul .button.active, #snb .divider-group .button:hover, #snb .page-header ul .button:hover, .page-header #snb ul .button:hover, #snb .divider-group .button:active, #snb .page-header ul .button:active, .page-header #snb ul .button:active {
  color: var(--color-primary);
}
#snb .grade-lnb,
#snb .subject-items {
  padding: 10px;
  border-color: #e6e6e6;
  border-width: 0 1px 1px;
  border-style: solid;
}
#snb .utility {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 20px 15px;
  border-color: rgba(0, 0, 0, 0.1);
  border-width: 0 1px;
  background-color: var(--color-primary-100);
}
#snb .switcher {
  margin: 0;
  width: 100%;
}
#snb .switcher label {
  justify-content: space-between;
  color: var(--color-primary-800);
  font-weight: 500;
}

.snb-inner {
  margin-bottom: 10px;
}

.snb-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 0;
  background-color: var(--color-primary-100);
}
.snb-header strong {
  color: #000;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.snb-header .items {
  display: none;
  padding: 15px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}
.snb-header .items a {
  position: relative;
  padding: 5px 0 5px 13px;
  font-size: 13px;
  vertical-align: baseline;
}
.snb-header .items a:hover {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 500;
}
.snb-header .items a:hover::before {
  background-color: var(--color-primary);
}
.snb-header .items a::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 12px;
  left: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #d2d2d2;
}
.snb-header .items .revise strong {
  display: block;
  padding: 5px 0;
  color: #000;
  font-size: 13px;
}
.snb-header .items .revise:not(:first-of-type) {
  margin-top: 10px;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.snb-header .items .name {
  position: relative;
  margin-left: 5px;
  padding-left: 6px;
  vertical-align: baseline;
}
.snb-header .items .name::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 11px;
  background-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
}

.snb-extra .action {
  display: flex;
  width: 100%;
  padding: 15px 20px;
  background-color: var(--color-primary-100);
  color: #000;
  font-size: 16px;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.04);
}
.snb-extra .action::after {
  display: none;
}
.snb-extra .action svg {
  width: 16px;
  height: 16px;
  margin-left: auto;
  transition: all 0.5s ease 0s;
  color: var(--color-primary-800);
}
.snb-extra .active svg {
  transform: rotateZ(180deg);
}
.snb-extra .items {
  padding: 10px 0;
  border-color: rgba(0, 0, 0, 0.1);
  border-width: 0 1px 1px;
  border-style: solid;
}
.snb-extra .items a {
  display: block;
  padding: 12px 20px;
  color: #000;
  font-size: 13px;
}
.snb-extra .items a:hover {
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 500;
}

.subject-items li {
  overflow: hidden;
  border-radius: 4px;
}
.subject-items li:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}
.subject-items li > a {
  display: block;
  position: relative;
  padding: 11px 36px 11px 10px;
  color: #000;
  font-size: 14px;
}
.subject-items li > a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-primary);
  background-image: url("/assets/images/common/icon-chevron-right-white-15fee97ae2195890f1fb0cc40187c479.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.subject-items li > a:hover {
  color: var(--color-primary);
  font-weight: 700;
}
.subject-items li > a:hover::after {
  content: "";
}
.subject-items .depth-2 {
  display: flex;
}
.subject-items .depth-2:hover a {
  color: var(--color-primary);
  font-weight: 700;
}
.subject-items .depth-2:hover .action::after {
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: var(--color-primary);
  background-image: url("/assets/images/common/icon-plus-white-9e89185affe0a69abaff0e383b7ec2dd.svg");
}
.subject-items .depth-2 a {
  flex: 1 1 auto;
  padding: 11px 0 11px 10px;
  color: #000;
  font-size: 14px;
}
.subject-items .active {
  background-color: #f6f6f6;
}
.subject-items .active > a {
  background-color: #f6f6f6;
  color: var(--color-primary);
  font-weight: 700;
}
.subject-items .active > a::after, .subject-items .active.single_menu > div > a::after {
  content: "";
}
.subject-items .active .depth-2:hover a {
  color: var(--color-primary);
}
.subject-items .active .depth-2 a {
  color: #414141;
  font-weight: 700;
}
.subject-items .active .depth-2 .action::after {
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-color: var(--color-primary);
  background-image: url("/assets/images/common/icon-minus-white-a01ac0ee5c1f767e9b199218befc35ce.svg");
}
.subject-items .action {
  flex-shrink: 0;
  position: relative;
  width: 36px;
  text-indent: -9999rem;
}
.subject-items .action::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 10px;
  width: 12px;
  height: 12px;
  background-color: transparent;
  background-image: url("/assets/images/common/icon-plus-a2d38fe79a85283fce6ef516d5c7960e.svg");
}
.subject-items .pane {
  width: 100%;
}
.subject-items .hour-list {
  position: relative;
  padding: 12px 10px;
}
.subject-items .hour-list::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 20px);
  height: 1px;
  background-color: #e6e6e6;
  transform: translateX(-50%);
}
.subject-items .hour-list a {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
  padding-left: 13px;
  color: #000;
  font-size: 12px;
}
.subject-items .hour-list a:last-child {
  margin-bottom: 0;
}
.subject-items .hour-list a:hover {
  color: var(--color-primary);
  font-weight: 700;
}
.subject-items .hour-list .active {
  font-weight: 700;
}
.subject-items .chapter:hover {
  background-color: transparent;
}
.subject-items .chapter.active {
  background-color: transparent;
}
.subject-items .chapter.active > a {
  background-color: transparent;
}
.subject-items .chapter.active > a::after {
  content: none;
}
.subject-items .chapter > a {
  padding-top: 12px;
}
.subject-items .chapter > a:hover::after {
  content: none;
}
.subject-items .chapter .chapter-items {
  margin-bottom: 12px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 4px;
  background-color: #f6f6f6;
}
.subject-items .chapter .chapter-items a {
  display: block;
  padding: 5px 12px;
  color: #000;
  font-size: 12px;
}
.subject-items .chapter .chapter-items a:hover, .subject-items .chapter .chapter-items a.active {
  color: var(--color-primary);
  font-weight: 700;
}
.subject-items .chapter .chapter-items a:first-child {
  padding-top: 12px;
}
.subject-items .chapter .chapter-items a:last-child {
  padding-bottom: 12px;
}

.header-personal {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.header-personal .dropdown button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.header-personal .dropdown button.active svg {
  transform: rotate(180deg);
}
.header-personal .dropdown button svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}
.header-personal .dropdown h2 {
  padding: 18px 12px 20px;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 700;
}
.header-personal .buttons {
  gap: 24px;
}
.header-personal .buttons .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
}

.mybook {
  padding: 20px 0;
  border-bottom: 1px solid #d2d2d2;
}

.mybook-inner {
  display: flex;
  align-items: flex-start;
  margin: 0 auto;
  width: 1320px;
  gap: 37px;
}
.mybook-inner .button {
  flex-shrink: 0;
  gap: 5px;
  padding: 3px 0 4px;
  min-height: 30px;
  border-color: transparent;
  color: #000;
  font-size: 14px;
  font-weight: 500;
}
.mybook-inner .button:hover {
  background-color: transparent;
}
.mybook-inner .button svg {
  width: 16px;
  height: 16px;
}
.mybook-inner ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.mybook-inner li.alert-button a {
  color: #000;
  font-size: 11px;
  line-height: unset;
  transform: unset;
}
.mybook-inner li.alert-button a::before {
  content: none;
}
.site-map .depth-items-scroll{
  height:450px;
  overflow:hidden;
  overflow-y:auto;
}
.site-map .icon-button {
  display:flex;
  justify-content:center;
  align-items:center;
  width: 40px;
  height: 40px;
  color: #fff;
}
.site-map .icon-button:not(:disabled):hover {
  color: #fff;
}
.site-map .icon-button.active + .site-map-inner {
  opacity: 1;
  transform: scaleY(1);
}
.site-map .slider-view-auto {
  min-height: 152px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e6e6e6;
}
.site-map .slider-view-auto .slides {
  left: calc((100% - 1320px) / 2);
  right: calc((100% - 1320px) / 2);
  padding: 16px 0;
}
.site-map .slider-view-auto .swiper-slide {
  position: relative;
  padding: 0 13px;
  max-width: 128px;
  height: 120px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  background-color: #fff;
  letter-spacing: -1px;
}
.site-map .slider-view-auto .swiper-slide:hover::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 2px solid var(--color-primary);
}
.site-map .slider-view-auto .swiper-button-prev {
  display: block;
  left: calc((100% - 1320px) / 2 - 18px);
}
.site-map .slider-view-auto .swiper-button-next {
  display: block;
  left: auto;
  right: calc((100% - 1320px) / 2 - 18px);
}
.site-map .slider-view-auto .images {
  margin-top: 16px;
}
.site-map .slider-view-auto .inner-wrap {
  margin-top: 12px;
}
.site-map .slider-view-auto .title {
  color: #000;
  font-weight: 500;
}
.site-map .slider-view-auto .desc {
  color: #000;
}
.site-map .depth-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, minmax(240px, auto));
  width: 1320px;
  margin: 0 auto;
}
.site-map .depth-items.type-vertical {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  max-height: 605px;
  width: unset;
}
.site-map .depth-items.type-vertical .depth-1 {
  display: flex;
  border-top: 1px solid #e6e6e6;
  border-right: 0;
  margin: 0 auto;
  width: 1320px;
}
.site-map .depth-items.type-vertical .depth-1:first-child {
  border-top: 0;
}
.site-map .depth-items.type-vertical .depth-1.board-top-line{
  border-top: 1px dashed var(--color-primary);
}
.site-map .depth-items.type-vertical .depth-1 h2 {
  flex-shrink: 1;
  padding-top: 5px;
  padding-bottom: 5px;
  min-width: 152px;
}
.site-map .depth-items.type-vertical .depth-2 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px 35px;
  margin-top: 0;
}
.site-map .depth-items.type-vertical .depth-2 > a {
  min-width: 192px; /* 1496 */
  width: 192px; /* 1496 */
  line-height: 24px; /* 1496 */
}
.site-map .depth-items.type-vertical .depth-2 > a:nth-child(n+2) {
  margin-top: 0;
}
.site-map .depth-items .depth-2 > a .blank svg{
  width:14px;
  height:14px;
  margin-left:4px;
}
.site-map .depth-1 {
  padding: 15px 20px;
  border-right: 1px solid #e6e6e6;
}
.site-map .depth-1:nth-child(5) {
  grid-column: 5;
  grid-row: 1/span 2;
  border-right: 0;
}
.site-map .depth-1:nth-child(n+6) {
  border-top: 1px solid #e6e6e6;
}
.site-map .depth-1 h2 {
  font-size: 16px;
  letter-spacing: -0.32px;
}
.site-map .depth-1 h2 > a:hover {
  color: var(--color-primary);
}
.site-map .depth-2 {
  margin-top: 13px;
  padding: 0;
  border-right: 0;
}
.site-map .depth-2 > a {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  color: #626262;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}
.site-map .depth-2 > a:hover {
  font-weight: 700;
}
.site-map .depth-2 > a:hover::before {
  background-color: var(--color-primary);
}
.site-map .depth-2 > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #a4a4a4;
  transform: translateY(-50%);
}
.site-map .depth-2 > a:nth-child(n+2) {
  margin-top: 5px;
}
.theme-elementary .site-map .depth-2 > a{
  padding-top:4px;
  padding-bottom:4px;
}
.theme-elementary .site-map .depth-2 > a:nth-child(n+2){
  margin-top:4px;
}

.site-map-inner {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: 0 0;
  transition: all 250ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
}

.header.fixed .top-banner {
  display: none;
}

.top-banner {
  width: 100%;
  background-color: #f7f3e7;
}
.top-banner .inner {
  width: 100%;
  margin: 0 auto;
  padding-top: 26px;
  padding-bottom: 25px;
  text-align: center;
  line-height: 1.4;
  color: #000;
  background-image: url(/assets/images/common/bg-top-banner-3cdd4a0aa8638ea4228933486aadfe95.png);
  background-position: center;
  background-size: cover;
}
.top-banner .inner p {
  font-size: 18px;
  font-weight: 300;
}
.top-banner .inner p strong {
  font-size: 31px;
  font-weight: bold;
}

h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: #000;
  font-weight: 500;
}

h2,
.h2 {
  font-size: 26px;
  font-weight: 700;
}

h3,
.h3 {
  font-size: 18px;
}

h4,
.h4 {
  font-size: 16px;
}

h5,
.h5 {
  font-size: 14px;
}

.text-xxl {
  font-size: 24px !important;
}

.text-xl {
  font-size: 20px !important;
}

.text-lg {
  font-size: 18px !important;
}

.text-md {
  font-size: 16px !important;
}

.text-sm {
  font-size: 13px !important;
}

.text-xs {
  font-size: 12px !important;
}

.text-xxs {
  font-size: 11px !important;
}

.text-xxxs {
  font-size: 10px !important;
}

strong.semi {
  font-weight: 500;
}

.text-underline {
  text-decoration: underline;
}

@keyframes loading {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes popup-show {
  from {
    transform: translate(-50%, -55%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}
@keyframes slideUp {
  from {
    margin-bottom: -10px;
    opacity: 0;
  }
  to {
    margin-bottom: 5px;
    opacity: 1;
  }
}
/* button.scss /////////////////////////////////////////////////////////////////*/
.button {
  border-radius: 4px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  line-height: normal;
  background-color: #fff;
  gap: 8px;
  font-family: "Outfit", "Noto Sans KR", "malgun gothic", "맑은 고딕", "open sans", sans-serif;
  color: #626262;
  border: 1px solid #d2d2d2;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 1px;
}
.button svg {
  fill: transparent;
  color: #838383;
  width: 16px;
  height: 16px;
}
.button strong {
  vertical-align: baseline;
}
.button:hover {
  background-color: #f6f6f6;
}
.button.size-xs {
  min-height: 20px;
  font-size: 10px;
  gap: 4px;
  padding-left: 6px;
  padding-right: 6px;
}
.button.size-xs svg {
  width: 12px;
  height: 12px;
}
.button.size-sm {
  min-height: 26px;
  font-size: 12px;
  gap: 4px;
}
.button.size-sm svg {
  width: 12px;
  height: 12px;
}
.button.size-md {
  min-height: 36px;
  font-size: 14px;
  min-width: 100px;
}
.button.size-lg {
  min-height: 46px;
  font-size: 14px;
}
.button.size-xl {
  min-height: 56px;
  font-size: 16px;
  min-width: 100px;
}
.button.size-xxl {
  min-height: 64px;
  font-size: 24px;
  min-width: 100px;
}
.button:disabled, .button.disabled {
  border-color: #d2d2d2;
  color: #a4a4a4;
  pointer-events: none;
  opacity: 0.5;
}
.button:disabled.type-gray, .button.disabled.type-gray {
  background-color: #f6f6f6;
  color: #a4a4a4;
}
.button:disabled.type-text, .button.disabled.type-text {
  background-color: transparent;
  border-color: transparent;
}
.button.type-icon {
  border-radius: 2px;
  padding-left: 0;
  padding-right: 0;
}
.button.type-icon.size-xs {
  min-width: 20px;
  padding-left: 0;
  padding-right: 0;
}
.button.type-icon.size-sm {
  min-width: 28px;
  min-height: 28px;
}
.button.type-icon.size-sm svg {
  width: 16px;
  height: 16px;
}
.button.type-icon.size-md {
  min-width: 36px;
}
.button.type-icon.size-lg {
  min-width: 46px;
}
.button.type-icon.size-xl {
  min-width: 56px;
}
.button.type-text {
  border-color: transparent;
  background-color: transparent;
  min-height: auto;
  min-width: auto;
  color: #838383;
  padding-left: 0;
  padding-right: 0;
}
.button.type-text:hover {
  color: var(--color-primary);
  border-color: transparent;
  background-color: transparent;
}
.button.type-gray {
  background-color: #f6f6f6;
  color: #000;
}
.button.type-gray svg {
  color: inherit;
}
.button.type-dark {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: #838383;
  color: white;
}
.button.type-dark svg {
  color: inherit;
}
.button.type-dark:hover {
  background-color: #626262;
}
.button.type-line {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.button.type-line svg {
  color: inherit;
}
.button.type-line:hover {
  background-color: var(--color-primary-150);
  border-color: rgba(0, 0, 0, 0.1);
}
.button.type-line:disabled, .button.type-line.disabled {
  border-color: #d2d2d2;
  color: #a4a4a4;
}
.button.type-primary {
  border-color: rgba(0, 0, 0, 0.1);
}
.button.type-primary svg {
  color: inherit;
}
.button.type-primary, .button.type-primary:link {
  text-decoration: none;
  background-color: var(--button-primary);
  color: white;
}
.button.type-primary:hover {
  background-color: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
  color: white;
}
.button.type-primary:disabled, .button.type-primary.disabled {
  opacity: 1;
  background-color: #e6e6e6;
  color: #fff;
}
.button.type-secondary {
  border-color: rgba(0, 0, 0, 0.1);
}
.button.type-secondary svg {
  color: inherit;
}
.button.type-secondary, .button.type-secondary:link {
  text-decoration: none;
  background-color: var(--button-secondary);
  color: white;
}
.button.type-secondary:hover {
  background-color: var(--button-secondary-hover);
  border-color: var(--button-secondary-hover);
  color: white;
}
.button.type-secondary:disabled, .button.type-secondary.disabled {
  opacity: 1;
  background-color: #e6e6e6;
  color: #fff;
}
.button.type-third {
  border-color: rgba(0, 0, 0, 0.1);
}
.button.type-third svg {
  color: inherit;
}
.button.type-third, .button.type-third:link {
  text-decoration: none;
  background-color: var(--button-third);
  color: white;
}
.button.type-third:hover {
  background-color: var(--button-third-hover);
  border-color: var(--button-third-hover);
  color: white;
}
.button.type-third:disabled, .button.type-third.disabled {
  opacity: 1;
  background-color: #e6e6e6;
  color: #fff;
}
.button.type-primary:disabled, .button.type-primary.disabled {
  background-color: var(--button-primary-disable);
  border-color: var(--button-primary-disable);
}
.button.type-primary-light {
  background-color: var(--color-primary-100);
  border-color: transparent;
  color: var(--color-primary);
}
.button.type-primary-light svg {
  color: inherit;
}
.button.type-primary-light:hover {
  background-color: var(--color-primary-200);
}
.button.type-white {
  background-color: #fff;
  border-color: #fff;
  color: #838383;
}
.button.type-white svg {
  color: inherit;
}
.button.type-white:hover {
  color: #000;
}
.button[class*=fill-] {
  color: #fff;
}
.button[class*=fill-] svg {
  color: #fff;
}

.block-button {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-direction: column;
  text-align: left;
  padding: 24px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  color: #838383;
  gap: 4px;
}
.block-button strong {
  font-weight: 500;
}
.block-button:hover, .block-button:focus, .block-button.active {
  border-color: var(--color-primary);
  background-color: white;
}

.light-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  padding: 0 15px;
  min-height: 40px;
  border-radius: 70px;
  background-color: #fff;
  color: #000;
  font-family: "Outfit", "Noto Sans KR", "malgun gothic", "맑은 고딕", "open sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
}
.light-button:hover {
  background-color: #f6f6f6;
  color: var(--color-primary);
}
.light-button svg,
.light-button img {
  width: 20px;
  height: 20px;
}

.button-min-equal-sm .button {
  min-width: 140px;
}

.origin-mteacher {
  background: #414141;
  border: 2px solid #333;
  box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  color: #fff;
  gap: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.origin-mteacher svg {
  color: #fff;
}
.origin-mteacher:hover {
  background: #000;
}
.origin-mteacher.size-sm {
  border-radius: 12px;
  font-size: 12px;
  padding: 6px 12px;
  border: 1px solid #333;
  color: #fff;
}
.origin-mteacher.size-sm svg {
  width: 12px;
  height: 12px;
}
.origin-mteacher.size-md {
  border-radius: 8px;
  font-size: 16px;
  padding: 0 20px;
  height: 52px;
}
.origin-mteacher.size-md svg {
  width: 20px;
  height: 20px;
}
.origin-mteacher.size-lg {
  border-radius: 12px;
  font-size: 24px;
  padding: 16.5px 20px;
}
.origin-mteacher.size-lg svg {
  width: 28px;
  height: 28px;
}

.text-button {
  display: inline-block;
  color: #838383;
  vertical-align: baseline;
}
.text-button:hover, .text-button:focus {
  text-decoration: underline;
}

.banner-button {
  margin-top: 20px;
  font-size: 13px;
}

.icon-button {
  display: inline-block;
  content: "";
  font-size: 0;
  margin-left: 0;
  border: 1px solid transparent;
  color: #a4a4a4;
}
.icon-button svg {
  width: 20px;
  height: 20px;
  fill: transparent;
}
.icon-button:hover:not(:disabled) {
  color: var(--color-primary);
}
.icon-button:disabled {
  color: #a4a4a4;
  cursor: default;
  pointer-events: none;
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}
.icon-button.size-md img {
  width: 32px;
  border-radius: 4px;
}
.icon-button.size-md svg {
  width: 32px;
  height: 32px;
}
.icon-button.size-lg img {
  width: 48px;
  border-radius: 4px;
}
.icon-button.size-lg svg {
  width: 48px;
  height: 48px;
}

.icon-button-link,
.icon-button-copy {
  display: inline-block;
  content: "";
  font-size: 0;
  margin-left: 0;
  border: 1px solid transparent;
  color: #a4a4a4;
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-position: center center;
  background-repeat: no-repeat;
}

.icon-button-link {
  background-image: url(/assets/images/common/icon-search-325af0832b934ed26cd166f17b1adb3c.svg);
}

.icon-button-copy {
  background-image: url(/assets/images/common/icon-copy-88059d3dab729b7c7e61ca9c4765a9b4.svg);
}

.icon-button-link:hover {
  background-image: url(/assets/images/common/icon-search-ele-4e7a7986439a692648ebda8bd9d47635.svg);
}

.icon-button-copy:hover {
  background-image: url(/assets/images/common/icon-copy-ele-3038c0afc6ad8a93b1ddf6a5e3950de9.svg);
}

.top-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 15px;
  right: calc((100% - 1320px) * 0.5 - 60px);
  width: 40px;
  height: 40px;
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.06);
  color: #000;
  background-color: #fff;
  z-index: 98;
}
.top-button:hover, .top-button:focus {
  background-color: #fafafa;
}
.top-button svg {
  width: 24px;
  height: 24px;
}

.alert-button {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 8px;
  height: 30px;
  border: 1px solid #d2d2d2;
  border-radius: 2px;
  background: #f6f6f6;
}
.alert-button a {
  padding: 6px 0 6px 10px;
  color: #000;
  font-size: 11px;
}
.alert-button a:hover {
  color: #000;
}
.alert-button .icon-button {
  padding: 9px 10px 9px 0;
  color: #838383;
}
.alert-button .icon-button:hover:not(:disabled) {
  color: #000;
}
.alert-button .icon-button svg {
  width: 10px;
  height: 10px;
}
.alert-button.type-primary-light {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-100);
}
.alert-button.type-primary-light a {
  color: #626262;
}
.alert-button.type-primary-light:hover, .alert-button.type-primary-light:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.alert-button.type-primary-light:hover a,
.alert-button.type-primary-light:hover .icon-button, .alert-button.type-primary-light:focus a,
.alert-button.type-primary-light:focus .icon-button {
  color: #fff;
}
.alert-button.type-rounded-primary-light {
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-color: var(--color-primary-200);
  border-radius: 100px;
  background-color: var(--color-primary-150);
}
.alert-button.type-rounded-primary-light span {
  color: var(--color-primary);
}
.alert-button.type-rounded-primary-light .icon-button {
  padding: 10px 12px 10px 0;
  color: var(--color-primary-300);
}
.alert-button.type-rounded-primary-light .icon-button svg {
  width: 12px;
  height: 12px;
}

.fluid {
  width: 100%;
}
.fluid > button,
.fluid > a {
  flex-grow: 1;
}

/* _ul.scss */
.ul-dot,
.ul-dot ul,
.ul-decimal,
.ul-decimal ul,
.ul-circle,
.ul-circle ul {
  margin-top: 10px;
}
.ul-dot > li,
.ul-decimal > li,
.ul-circle > li {
  position: relative;
  text-align: left;
  padding-left: 10px;
}
.ul-dot > li:not(:first-of-type),
.ul-decimal > li:not(:first-of-type),
.ul-circle > li:not(:first-of-type) {
  margin-top: 4px;
}
.ul-dot > li ul,
.ul-decimal > li ul,
.ul-circle > li ul {
  margin-top: 5px;
  margin-bottom: 5px;
}
.ul-dot > li li,
.ul-decimal > li li,
.ul-circle > li li {
  position: relative;
  padding-left: 10px;
}
.ul-dot > li li:before,
.ul-decimal > li li:before,
.ul-circle > li li:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "-";
}

.ul-circle > li::before {
  position: absolute;
  top: 5.6px;
  left: 0;
  content: " ";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid #838383;
}

.ul-dot > li::before {
  position: absolute;
  top: 9px;
  left: 0;
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #838383;
}
.ul-dot.size-sm > li::before {
  top: 11.2px;
  width: 2px;
  height: 2px;
}
.ul-dot.size-md > li::before {
  width: 4px;
  height: 4px;
}

.ul-decimal > li {
  counter-increment: ulIndex;
  padding-left: 20px;
}
.ul-decimal > li::before {
  content: counter(ulIndex) ".";
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  text-align: center;
  min-width: 20px;
}

.ol-policy > li {
  margin-bottom: 10px;
}
.ol-policy > li:not(:first-of-type) {
  margin-top: 10px;
}
.ol-policy > li:not(:first-of-type) h4 {
  margin-top: 40px;
}
.ol-policy > li ul,
.ol-policy > li p {
  margin-top: 5px;
  margin-bottom: 5px;
}
.ol-policy > li li,
.ol-policy > li p {
  text-align: left;
  padding-left: 10px;
  margin-top: 8px;
}

form {
  width: 100%;
}

input, .input-inner-extra,
.clear-container,
.textarea, textarea {
  box-sizing: border-box;
  border: 1px solid #d2d2d2;
  padding-left: 10px;
  padding-right: 10px;
  max-width: 100%;
  height: 36px;
  border-radius: 4px;
}
input::placeholder, .input-inner-extra::placeholder,
.clear-container::placeholder,
.textarea::placeholder, textarea::placeholder {
  color: #a4a4a4;
}
input::-webkit-input-placeholder, .input-inner-extra::-webkit-input-placeholder,
.clear-container::-webkit-input-placeholder,
.textarea::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #a4a4a4;
}
input::-moz-placeholder, .input-inner-extra::-moz-placeholder,
.clear-container::-moz-placeholder,
.textarea::-moz-placeholder, textarea::-moz-placeholder {
  color: #a4a4a4;
}
input:-ms-input-placeholder, .input-inner-extra:-ms-input-placeholder,
.clear-container:-ms-input-placeholder,
.textarea:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #a4a4a4;
}
input:-moz-placeholder, .input-inner-extra:-moz-placeholder,
.clear-container:-moz-placeholder,
.textarea:-moz-placeholder, textarea:-moz-placeholder {
  color: #a4a4a4;
}
input:not(:disabled):hover, .input-inner-extra:not(:disabled):hover, input:not(:disabled):focus, .input-inner-extra:not(:disabled):focus,
.clear-container:not(:disabled):hover,
.clear-container:not(:disabled):focus,
.textarea:not(:disabled):hover,
.textarea:not(:disabled):focus, textarea:not(:disabled):hover, textarea:not(:disabled):focus {
  border-color: var(--color-primary);
  color: #000;
}
input:disabled, .input-inner-extra:disabled, input.disabled, .disabled.input-inner-extra,
.clear-container:disabled,
.clear-container.disabled,
.textarea:disabled,
.textarea.disabled, textarea:disabled, textarea.disabled {
  color: #a4a4a4;
  background-color: #f6f6f6;
}
input.size-xl, .size-xl.input-inner-extra,
.clear-container.size-xl,
.textarea.size-xl, textarea.size-xl {
  height: 56px;
}

.textarea,
textarea {
  width: 100%;
  padding: 20px 16px;
  background-color: #fff;
}
.textarea, .textarea.size-xl,
textarea,
textarea.size-xl {
  height: auto;
}

/* input /////////////////////////////////////////////////////////////////////////////////*/
input::-ms-clear, .input-inner-extra::-ms-clear,
input::-ms-reveal,
.input-inner-extra::-ms-reveal {
  opacity: 0;
}

input::-webkit-search-decoration, .input-inner-extra::-webkit-search-decoration,
input::-webkit-search-cancel-button,
.input-inner-extra::-webkit-search-cancel-button,
input::-webkit-search-results-button,
.input-inner-extra::-webkit-search-results-button,
input::-webkit-search-results-decoration,
.input-inner-extra::-webkit-search-results-decoration {
  opacity: 0;
}

input:-webkit-autofill, .input-inner-extra:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-transition: background-color 9999s ease-out;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

/* textarea /////////////////////////////////////////////////////////////////////////////////*/
.textarea textarea {
  border: none;
  padding: 0;
  resize: none;
}
.textarea .buttons {
  margin-top: 10px;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
}
.textarea .buttons .digits {
  color: #a4a4a4;
}
.textarea .buttons .button {
  min-width: 80px;
}

input[type=date], [type=date].input-inner-extra {
  position: relative;
  min-width: 152px;
  background: url("/assets/images/common/icon-calendar-2194d7b8a4210f1fcaf475a0ec852869.svg") no-repeat right 14px center/16px auto;
}

input[type=date]::-webkit-calendar-picker-indicator, [type=date].input-inner-extra::-webkit-calendar-picker-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

form .title-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  line-height: 1;
}

.file-upload {
  display: flex;
  width: 100%;
  gap: 8px;
}
.file-upload.flag-modify .placeholder {
  display: none;
}
.file-upload:hover .inner-form, .file-upload:focus .inner-form {
  border-color: var(--color-primary);
}
.file-upload .inner-form {
  flex-grow: 1;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid #d2d2d2;
  background-color: white;
  padding: 5px 8px 5px 16px;
  cursor: pointer;
  overflow: hidden;
  height: 36px;
  border-radius: 4px;
  gap: 8px;
}
.file-upload input[type=file], .file-upload [type=file].input-inner-extra {
  border: none;
  height: unset;
  width: 100%;
  font-size: 12px;
  margin: 0 auto;
}
.file-upload input[type=file]::file-selector-button, .file-upload [type=file].input-inner-extra::file-selector-button {
  width: 0px;
  height: 1px;
  border: none;
  padding: 0;
  margin: 0;
  visibility: hidden;
  background-color: blue;
}
.file-upload input[type=file]:focus, .file-upload [type=file].input-inner-extra:focus {
  outline: none;
}
.file-upload .button {
  min-width: 80px;
  z-index: 2;
  font-size: 12px;
}
.file-upload label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 36px;
  min-width: 140px;
  font-size: 14px;
}
.file-upload .placeholder {
  position: absolute;
  top: -1px;
  left: 0;
  padding-left: 16px;
  padding-right: 140px;
  width: 100%;
  line-height: 36px;
  background-color: #fff;
  color: #a4a4a4;
  text-align: left;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.file-upload .placeholder + input[file=file], .file-upload .placeholder + [file=file].input-inner-extra {
  color: transparent;
}
.file-upload.type-vertical {
  flex-direction: column;
}
.file-upload.size-xl .inner-form {
  height: 56px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.file-upload.size-xl input[type=file], .file-upload.size-xl [type=file].input-inner-extra {
  font-size: 14px;
  padding: 0;
}
.file-upload.size-xl .button {
  font-size: 14px;
}
.file-upload.size-xl label {
  font-size: 16px;
  height: 56px;
}
.file-upload.size-xl .placeholder {
  line-height: 56px;
  font-size: 14px;
}

.file-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.file-items .item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 8px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
}
.file-items .item span {
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.file-items .item span:first-of-type {
  margin-right: auto;
}

.text-file-size {
  color: #838383 !important;
  font-size: 12px;
}
.text-file-size:not(:empty) {
  z-index: 2;
}

.input-inner-extra {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0;
  background-color: white;
}
.input-inner-extra:hover, .input-inner-extra:focus {
  border-color: var(--color-primary);
}
.input-inner-extra > input, .input-inner-extra > .input-inner-extra,
.input-inner-extra .clear-container {
  flex-grow: 1;
  width: 25%;
  border: none;
  background-color: transparent;
  padding-right: 0;
  height: 34px;
}
.input-inner-extra > :first-child {
  padding-left: 10px;
}
.input-inner-extra > :last-child:not(button) {
  padding-right: 10px;
}
.input-inner-extra .icon-button {
  color: var(--color-primary);
  width: 36px;
  height: 36px;
}
.input-inner-extra.type-dark {
  border-color: #000;
}
.input-inner-extra.type-dark.disabled:hover, .input-inner-extra.type-dark.disabled:focus {
  border-color: #000;
}
.input-inner-extra.type-dark .icon-button {
  color: black;
}
.input-inner-extra.size-xl input, .input-inner-extra.size-xl .input-inner-extra,
.input-inner-extra.size-xl .clear-container {
  height: 54px;
}
.input-inner-extra.size-xl .icon-button {
  width: 56px;
  height: 56px;
}
.input-inner-extra.disabled:hover, .input-inner-extra.disabled:focus {
  border-color: #d2d2d2;
}
.input-inner-extra.disabled .icon-button {
  color: #a4a4a4;
}
.input-inner-extra select {
  flex-shrink: 0;
  flex-basis: 90px;
  border: none;
  background-color: transparent;
}
.input-inner-extra .select2-container {
  flex-shrink: 0;
  flex-basis: 90px;
}
.input-inner-extra .select2-container .select2-selection--single {
  border: none;
  background-color: transparent;
}
.input-inner-extra .select2-container:after {
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 0;
  display: inline-block;
  width: 1px;
  background-color: #e6e6e6;
  content: "";
}

.utility .input-inner-extra {
  min-width: 300px;
}

/* _ox.scss */
.ox {
  position: relative;
  display: inline-flex;
  min-height: 20px;
}
.ox [type=checkbox] + label,
.ox [type=radio] + label {
  padding-left: 28px;
  display: inline-flex;
  align-items: flex-start;
  min-height: 20px;
  color: #a4a4a4;
  cursor: pointer;
}
.ox [type=checkbox] + label::before, .ox [type=checkbox] + label::after,
.ox [type=radio] + label::before,
.ox [type=radio] + label::after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: " ";
  border-radius: 50%;
}
.ox [type=checkbox] + label:empty,
.ox [type=radio] + label:empty {
  padding-left: 20px;
}
.ox [type=checkbox] + label::before,
.ox [type=radio] + label::before {
  border: 1px solid #d2d2d2;
  background-color: white;
}
.ox [type=checkbox] + label.multi-line,
.ox [type=radio] + label.multi-line {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.ox [type=checkbox] + label.multi-line .desc,
.ox [type=radio] + label.multi-line .desc {
  color: #626262;
}
.ox [type=checkbox]:disabled:checked + label,
.ox [type=radio]:disabled:checked + label {
  color: #a4a4a4;
}
.ox [type=checkbox]:disabled:checked + label:after,
.ox [type=radio]:disabled:checked + label:after {
  background-color: #a4a4a4;
}
.ox:hover {
  z-index: 2;
}
.ox:hover [type=radio]:not(:disabled) + label::before {
  border-color: var(--color-primary);
}
.ox [type=checkbox] + label:after {
  background-image: url(/assets/images/common/icon-check-c22df2571082e83ea6871c7668b1a310.svg);
  background-position: center center;
  background-repeat: no-repeat;
}
.ox [type=checkbox]:checked + label {
  color: #000;
}
.ox [type=checkbox]:checked + label:after {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.ox [type=radio] + label::before, .ox [type=radio] + label::after {
  border-radius: 50%;
}
.ox [type=radio]:checked + label {
  color: #000;
}
.ox [type=radio]:checked + label:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border: none;
}
.ox.ox-bookmark {
  min-height: 24px;
}
.ox.ox-bookmark [type=checkbox] + label {
  min-height: 24px;
}
.ox.ox-bookmark [type=checkbox] + label::before {
  background-color: transparent;
}
.ox.ox-bookmark [type=checkbox] + label::after {
  height: 24px;
  background-image: url(/assets/images/common/icon-check-bookmark-4b518de299797a3ed691f46a83fbd90c.svg);
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0;
}
.ox.ox-bookmark [type=checkbox]:checked + label::before {
  background-color: transparent;
}
.ox.ox-bookmark [type=checkbox]:checked + label::after {
  background-color: transparent;
  background-image: url(/assets/images/common/icon-check-bookmark-checked-74d829acaa042499aff52ef94ad16828.svg);
  border-radius: 0;
}

/* _switcher.scss */
.switcher {
  display: inline-block;
  max-width: 100%;
}
.switcher label {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  max-width: 100%;
  line-height: 1;
}
.switcher label::before {
  display: inline-block;
  content: " ";
  align-self: flex-start;
  min-width: 30px;
  height: 16px;
  background-color: #a4a4a4;
  border-radius: 8px;
  transition: all 150ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  margin-top: 2px;
}
.switcher label:after {
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #d2d2d2;
  border-radius: 50%;
  transition: all 150ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  -moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.062745098);
  -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.062745098);
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.062745098);
}
.switcher [type=checkbox]:checked + label::before {
  background-color: var(--color-primary);
  color: white;
}
.switcher [type=checkbox]:checked + label:after {
  left: 10px;
}
.switcher [type=checkbox]:disabled + label {
  color: #a4a4a4;
}
.switcher [type=checkbox]:disabled + label::before {
  background-color: #a4a4a4;
  opacity: 0.5;
}
.switcher [type=checkbox]:disabled + label::after {
  opacity: 0.8;
}
.switcher.reverse [type=checkbox]:checked + label::after {
  left: unset;
  right: 0;
}
.switcher.reverse label {
  flex-direction: row-reverse;
}
.switcher.reverse label::after {
  left: unset;
  right: 10px;
}
.switcher.type-tertiary [type=checkbox]:checked + label::before {
  background-color: #f2e581;
}

.text-switcher {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 32px;
}
.text-switcher input, .text-switcher .input-inner-extra {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-color: transparent;
  border-radius: 100px;
  cursor: pointer;
}
.text-switcher input:hover, .text-switcher .input-inner-extra:hover, .text-switcher input:focus, .text-switcher .input-inner-extra:focus {
  border-color: transparent;
}
.text-switcher input::before, .text-switcher .input-inner-extra::before, .text-switcher input::after, .text-switcher .input-inner-extra::after {
  position: absolute;
  top: 50%;
  font-weight: 500;
  transform: translateY(-50%);
  z-index: 2;
}
.text-switcher input::before, .text-switcher .input-inner-extra::before {
  content: "OFF";
  left: 18px;
}
.text-switcher input::after, .text-switcher .input-inner-extra::after {
  content: "ON";
  right: 21px;
}
.text-switcher input:checked, .text-switcher .input-inner-extra:checked {
  background-color: var(--color-primary);
}
.text-switcher input:checked::before, .text-switcher .input-inner-extra:checked::before {
  color: #fff;
}
.text-switcher input:checked::after, .text-switcher .input-inner-extra:checked::after {
  color: var(--color-primary);
}
.text-switcher input:checked + label, .text-switcher .input-inner-extra:checked + label {
  left: 60px;
  right: 2px;
}
.text-switcher input:not(:checked), .text-switcher .input-inner-extra:not(:checked) {
  background-color: #e6e6e6;
}
.text-switcher input:not(:checked):before, .text-switcher .input-inner-extra:not(:checked):before {
  color: #838383;
}
.text-switcher input:not(:checked):after, .text-switcher .input-inner-extra:not(:checked):after {
  color: #a4a4a4;
}
.text-switcher input:not(:checked) + label, .text-switcher .input-inner-extra:not(:checked) + label {
  left: 2px;
  right: 60px;
}
.text-switcher label {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 100px;
  background-color: #fff;
  transition: all 150ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  cursor: pointer;
  z-index: 1;
}
.text-switcher label::before {
  content: none;
}
.text-switcher label::after {
  content: none;
}

fieldset {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 8px;
}
fieldset button {
  flex-shrink: 0;
}
fieldset > input, fieldset > .select2, fieldset .dropdown-select, fieldset .input-inner-extra, fieldset .clear-container, fieldset select {
  flex: 1 1;
  min-width: 0;
  width: auto !important;
}
fieldset.type-vertical {
  flex-direction: column;
}
fieldset.type-vertical > input, fieldset.type-vertical > .select2, fieldset.type-vertical .dropdown-select, fieldset.type-vertical .input-inner-extra, fieldset.type-vertical .clear-container, fieldset.type-vertical select {
  flex-basis: initial;
  width: 100% !important;
}
fieldset .caution {
  display: none;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: normal;
  width: 100%;
  background-color: white;
  color: #f24a4a;
}
fieldset .caution:before {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  margin-right: 4px;
  display: inline-block;
  content: "";
  background: url(/assets/images/common/icon-caution-filled-error-9d9b64c83028dcf8d3f5fc27d41fe302.svg) 0 center no-repeat;
  background-size: contain;
}
fieldset .caution.type-float {
  position: absolute;
  top: calc(100% + 10px);
  background-color: white;
  z-index: 2;
}
fieldset.flag-error > input:not(:disabled), fieldset.flag-error > .select2:not(:disabled), fieldset.flag-error .dropdown-select:not(:disabled), fieldset.flag-error .input-inner-extra:not(:disabled), fieldset.flag-error .clear-container:not(:disabled), fieldset.flag-error select:not(:disabled),
fieldset.flag-error .select2-selection--single:not(:disabled),
fieldset.flag-error .select2-selection__rendered:not(:disabled) {
  z-index: 2;
}
fieldset.flag-error > input:not(:disabled), fieldset.flag-error > input:not(:disabled):hover, fieldset.flag-error > .select2:not(:disabled), fieldset.flag-error > .select2:not(:disabled):hover, fieldset.flag-error .dropdown-select:not(:disabled), fieldset.flag-error .dropdown-select:not(:disabled):hover, fieldset.flag-error .input-inner-extra:not(:disabled), fieldset.flag-error .input-inner-extra:not(:disabled):hover, fieldset.flag-error .clear-container:not(:disabled), fieldset.flag-error .clear-container:not(:disabled):hover, fieldset.flag-error select:not(:disabled), fieldset.flag-error select:not(:disabled):hover,
fieldset.flag-error .select2-selection--single:not(:disabled),
fieldset.flag-error .select2-selection--single:not(:disabled):hover,
fieldset.flag-error .select2-selection__rendered:not(:disabled),
fieldset.flag-error .select2-selection__rendered:not(:disabled):hover {
  border-color: #f24a4a;
  color: #f24a4a;
}
fieldset.flag-error .caution {
  display: inline-flex;
  align-items: flex-start;
}
fieldset.flag-error .select2-selection--single .select2-selection__arrow b {
  background-image: url("/assets/images/common/icon-chevron-down-error-fa5ddf1c01d4bb3303f517fbe63da727.svg");
}
fieldset.flag-error .icon-button {
  color: #f24a4a;
}
fieldset + .message-info {
  margin-top: 8px;
}
fieldset + fieldset {
  margin-top: 8px;
}

.message-info {
  padding-left: 24px;
  color: #626262;
  position: relative;
  text-align: left;
}
.message-info::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/assets/images/elementary/icon-caution-line-fa774b7f6bce1a35b8878ade005103de.svg) 0 center no-repeat;
  background-size: 20px;
}
.message-info.type-gray::before {
  background-image: url(/assets/images/common/icon-caution-filled-b1150ec50fa501907aeccf412e4bc15a.svg);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 1px 4px 1px;
  white-space: nowrap;
  font-weight: 500;
  z-index: 10;
  background-color: #a4a4a4;
  vertical-align: -webkit-baseline-middle;
  border: 1px solid transparent;
  line-height: 1;
  min-height: 21px;
  flex-shrink: 0;
}
.badge:empty {
  padding: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  min-height: auto;
}
.badge, .badge:hover, .badge:focus {
  color: #fff;
  text-decoration: none;
}
.badge.type-round-box {
  border-radius: 4px;
  border-color: rgba(0, 0, 0, 0.1);
  padding-left: 6px;
  padding-right: 6px;
}
.badge.type-rounded {
  border-radius: 13px;
  padding-left: 7px;
  padding-right: 7px;
}
.badge.size-sm {
  padding: 3px 8px;
  min-height: 25px;
  font-size: 12px;
}
.badge.size-sm:empty {
  padding: 0;
  width: 10px;
  min-height: auto;
  height: 10px;
}
.badge.size-md {
  padding: 3px 10px;
  min-height: 28px;
  font-size: 16px;
}
.badge.size-md:empty {
  padding: 0;
  width: 10px;
  min-height: auto;
  height: 10px;
}
.badge.size-md.type-rounded {
  border-radius: 18px;
}
.badge.size-lg {
  padding: 3px 16px;
  min-height: 36px;
  font-size: 14px;
}
.badge.size-lg:empty {
  padding: 0;
  width: 10px;
  min-height: auto;
  height: 10px;
}
.badge.size-lg.type-rounded {
  border-radius: 18px;
}
.badge.type-tail {
  min-height: 24px;
  padding-left: 8px;
  padding-right: 8px;
  border: 1px solid #d2d2d2;
  border-radius: 8px 8px 8px 0px;
  background-color: #fff;
  color: #838383;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.badge[class*=text-] {
  background-color: #fff;
  border: 1px solid currentColor;
}

strong.badge {
  font-weight: 700;
}

.image-wrap .badge {
  position: absolute;
}
.image-wrap .badge.type-rounded {
  top: 12px;
  left: 12px;
  background-color: rgba(0, 0, 0, 0.5);
}
.image-wrap .badge.type-round-box {
  bottom: 8px;
  right: 8px;
  border-color: transparent;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.5);
}

.badge-recently {
  position: relative;
  background-color: #f28b9c;
  font-size: 10px;
  color: white;
  line-height: 1;
  padding: 4px 6px 4px 8px;
  border-radius: 4px;
  margin-left: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 20px;
}
.badge-recently::before {
  position: absolute;
  content: "";
  top: 1px;
  left: -6px;
  width: 16px;
  height: 16px;
  background-color: #f28b9c;
  border-radius: 4px;
  clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
  transform: rotate(225deg);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.badge-recently:after {
  position: absolute;
  top: calc(50% - 2px);
  left: -1px;
  width: 5px;
  height: 5px;
  content: "";
  background-color: white;
  border-radius: 50%;
}
.badge-recently.type-dark {
  display: inline-block;
  background-color: #626262;
}
.badge-recently.type-dark::before {
  background-color: #626262;
}

.items a {
  display: block;
}
.items a:hover, .items a:focus {
  background-color: #f6f6f6;
  color: #626262;
}
.items .underline {
  border-bottom: 1px solid #d2d2d2;
}

.breadcrumbs {
  min-width: 1320px;
  margin-top: 15px;
  margin-bottom: 20px;
}
.breadcrumbs.type-chapter {
  min-width: auto;
  margin-top: 50px;
  margin-bottom: 30px;
}
.breadcrumbs.type-chapter ul {
  justify-content: flex-start;
  width: auto;
}
.breadcrumbs.type-chapter li {
  color: #000;
  font-size: 18px;
  font-weight: 500;
}
.breadcrumbs.type-chapter .number-unit {
  margin-right: 10px;
}
.breadcrumbs.type-period {
  margin: 0;
  min-width: unset;
}
.breadcrumbs.type-period ul {
  justify-content: flex-start;
  width: auto;
}
.breadcrumbs.type-period li {
  color: #000;
  font-size: 13px;
}
.breadcrumbs.type-period .current {
  font-weight: 700;
}
.breadcrumbs ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 1320px;
  margin: 0 auto;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs li:first-of-type::before {
  content: none;
}
.breadcrumbs li::before {
  display: inline-block;
  content: "";
  background: url(/assets/images/common/icon-chevron-right-e606f83279b6adff72be7c6d04e995cc.svg) center center;
  background-size: contain;
  width: 12px;
  height: 12px;
  margin: 0 4px;
}
.breadcrumbs .home {
  margin-right: 8px;
}
.breadcrumbs .icon-button svg {
  width: 16px;
  height: 16px;
}

.dropdown .items {
  background-color: #fff;
  border: 1px solid #d2d2d2;
  z-index: 101;
}
.dropdown .items a {
  padding: 4px 10px;
}

.banners {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: fit-content;
}
.banners + .form, .banners + .tabs {
  margin-top: 24px;
}
.banners .banner-slider {
  position: relative;
  width: 312px;
  height: 273px;
}
.banners a {
  position: relative;
  overflow: hidden;
  transition: all 500ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  font-size: 0;
}
.banners a:hover img {
  transition: all 250ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  transform: scale(1.03);
}
.banners h2 {
  font-size: 18px;
}
.banners .button {
  display: none;
  position: absolute;
  bottom: 30px;
  left: 30px;
  padding: 6px 16px;
  background-color: #fff;
}
.banners .banner-inner {
  display: none;
  position: absolute;
  top: 30px;
  left: 30px;
}
.banners .banner-inner.sm {
  top: 12px;
  left: 20px;
}
.banners .desc {
  margin-top: 10px;
  font-size: 13px;
}
.banners.type-slim .banner-inner {
  top: 50%;
  left: calc((100% - 1320px) / 2 + 270px);
  transform: translateY(-50%);
}
.banners.type-slim .desc {
  margin-top: 2px;
}
.banners.type-horizontal {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.banners.type-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 323px repeat(3, 1fr);
  grid-template-rows: 154px;
}
.banners.type-grid a:nth-child(1) {
  grid-row: 1/span 2;
}
.banners.type-grid a:nth-child(2) {
  grid-column: 2/span 3;
}
.banners.type-grid h2 {
  color: #fff;
  opacity: 0.7;
}
.banners.type-grid h2.sm {
  font-size: 13px;
}
.banners.type-grid .desc {
  color: #fff;
}

.grid-cont {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-cont .item {
  border: 1px solid #000;
  background-color: green;
  color: #fff;
}

.banners-visual {
  position: relative;
}
.banners-visual .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 32px;
}
.banners-visual .header {
  margin-bottom: 40px;
  padding-left: 16px;
}
.banners-visual .header .title {
  margin-bottom: 32px;
}
.banners-visual .header .title p {
  font-size: 20px;
  color: #626262;
}
.banners-visual .header .title h2 {
  font-size: 32px;
}
.banners-visual .header .button {
  min-width: 114px;
}
.banners-visual .boxes {
  display: flex;
  gap: 16px;
}
.banners-visual .box {
  position: relative;
  width: 100%;
  min-height: 260px;
  padding: 32px;
  background-color: #fff;
  border-radius: 8px;
}
.banners-visual .box h3 {
  font-size: 20px;
  font-weight: 500;
  color: #000;
}
.banners-visual .box p {
  margin-top: 8px;
}
.banners-visual .box img {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 68px;
  height: 68px;
}

.banners-visual.xr-science { height: 468px; }
.banners-visual.xr-science .header { margin-bottom: 85px; }
.banners-visual.xr-science .box { min-height: 240px; }
.banners-visual.xr-science .box .button { position: absolute; bottom: 24px; background: rgb(54,120,255); background: linear-gradient(180deg, rgba(54,120,255,1) 0%, rgba(110,63,215,1) 100%); border: 0; border-radius: 10px; color: #fff; font-size: 18px; padding: 0 15px; font-weight: 500; transition: all 0.2s; }
.banners-visual.xr-science .box .button:hover { opacity: 0.9; }
.banners-visual.xr-science .box img { width: 203px; height: 137px; }

.box-gray {
  background-color: #f6f6f6;
  padding: 32px;
}
.box-gray + .box-gray {
  margin-top: 24px;
}
.box-gray .block-button:not(.active) {
  border-color: white;
}

.box-outlined-gray {
  border: 1px solid #e6e6e6;
  padding: 30px;
}
.box-outlined-gray + .box-outlined-gray {
  margin-top: -1px;
}
.box-outlined-gray .ul-dot{
  margin-top:0;
}
.box-outlined-gray.rounded {
  border-radius: 4px;
}
.box-outlined-gray .title-info {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e6e6e6;
}

.popup .box-outlined-gray {
  padding: 24px;
}

.box-gray-scroll {
  overflow-y: auto;
  max-height: 140px;
  padding: 30px 50px 30px 40px;
  background: #f6f6f6;
  color: #626262;
  margin-top: 16px;
  margin-bottom: 32px;
}

.box-white-round {
  background-color: white;
  border-radius: 4px;
  padding: 24px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.box-white-round .block-top-line {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #e6e6e6;
}

.roundbox-outlined {
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  padding: 24px;
}
.roundbox-outlined .section > :not(:first-child) {
  margin-top: 8px;
}

.box-light-gray {
  background-color: #f9fbfc;
}
.box-light-gray a {
  width: 120px;
  height: 120px;
  background-size: cover;
}
.box-light-gray a.ele {
  background-image: url("/assets/images/common/img-shortcut-elementary-1f7255e690400cb40a2c70a93d7183e6.png");
}
.box-light-gray a.mid {
  background-image: url("/assets/images/common/img-shortcut-middle-7ac29a340f0b57c8e61101b026b7621b.png");
}
.box-light-gray a.high {
  background-image: url("/assets/images/common/img-shortcut-high-befc278c2a855dfbb4fff6dab02b9924.png");
}
.box-light-gray.box-shortcut {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 66px;
  padding: 28px;
  text-indent: -9999px;
  border-radius: 30px;
  border: 2px dashed #e6e6e6;
}

.divider-line {
  position: relative;
  text-align: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.divider-line span {
  display: inline-block;
  background-color: white;
  color: #a4a4a4;
  padding-left: 10px;
  padding-right: 10px;
}
.divider-line::before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #e6e6e6;
  z-index: -1;
}

.like {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  position: relative;
  padding-left: 12px;
  padding-right: 12px;
  border: 1px solid transparent;
  background-color: #f6f6f6;
  color: #000;
  font-size: 13px;
  line-height: 1;
  border-radius: 100px;
}
.like:hover, .like.active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-50);
  color: var(--color-primary);
  font-weight: 600;
}
.like svg {
  width: 12px;
  height: 12px;
}
.like.size-sm {
  min-height: 28px;
}
.like.size-md {
  min-height: 36px;
}
.like.size-lg {
  padding-left: 16px;
  padding-right: 16px;
  min-height: 40px;
}

span.like {
  pointer-events: none;
}

.badge-lesson {
  position: absolute;
  top: 35px;
  left: 0;
  padding: 4px 6px 4px 8px;
  min-width: 55px;
  height: 23px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--color-primary);
  color: white;
  font-size: 13px;
  line-height: 1;
  text-align: center;
}
.badge-lesson::before {
  content: "";
  position: absolute;
  top: 1px;
  right: -7px;
  border: 1px solid transparent;
  border-radius: 4px;
  background-color: var(--color-primary);
  width: 18px;
  height: 18px;
  clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
  transform: rotate(45deg);
}

.float-button {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 44px;
  right: 80px;
  padding: 8px;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 100%;
  background: linear-gradient(135deg, var(--button-secondary) 0%, var(--button-primary) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  box-shadow: 5px 5px 20px 0px rgba(23, 128, 125, 0.2);
}
.float-button svg {
  width: 28px;
  height: 28px;
}

.dropdown-select {
  display: inline-block;
  position: relative;
  max-width: 100%;
  min-width: 85px;
}
.dropdown-select.size-sm .select-button {
  height: 28px;
}
.dropdown-select.size-md .select-button {
  height: 36px;
}
.dropdown-select.size-xl .select-button {
  height: 56px;
}
.dropdown-select.disabled {
  background-color: #fafafa;
  color: var(--color-primary-disabled);
}
.dropdown-select.active .select-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: var(--color-primary);
}
.dropdown-select.active .select-button:before {
  background-image: url("/assets/images/common/icon-chevron-up-10b0d8e46b98596b16400e176548b2ee.svg");
}
.dropdown-select.active .options li {
  white-space: normal;
}
.dropdown-select .select-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-left: 12px;
  padding-right: 30px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.dropdown-select .select-button span:not([class]) {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dropdown-select .select-button:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  transition: all 300ms ease-in-out;
  background-image: url("/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.dropdown-select .options {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 101;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--color-primary);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
  opacity: 0;
  max-height: 200px;
  overflow-y: auto;
}
.dropdown-select .options li {
  width: 100%;
  white-space: nowrap;
}
.dropdown-select .options li.selected {
  background-color: #ddd;
}
.dropdown-select .options li.disabled {
  color: #999;
}
.dropdown-select .options li > button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7.5px 20px 7.5px 10px;
}
.dropdown-select .options li > button.hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary);
}
.dropdown-select.direction-top .select-button.active {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.dropdown-select.direction-top .options {
  top: unset;
  bottom: 100%;
  border: 1px solid #d2d2d2;
  border-bottom: none;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: sub;
}
.icon.direction-right {
  margin-left: 4px;
  margin-right: 0;
}
.icon.size-sm {
  width: 12px;
  height: 12px;
}
.icon.size-md {
  width: 24px;
  height: 24px;
}
.icon.size-lg {
  width: 36px;
  height: 36px;
}
.icon.type-rounded {
  border-radius: 50%;
  background-color: #ebf2f2;
  color: var(--color-primary);
}
.icon.type-rounded svg {
  width: 45%;
  height: 45%;
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: transparent;
}

.required:after {
  content: "*";
  color: #f24a4a;
  margin-left: 4px;
  display: inline-block;
}
.required.forms:after {
  content: none;
}
.required.forms label:after {
  content: "*";
  color: #f24a4a;
  margin-left: 4px;
  display: inline-block;
}

.clear-container {
  position: relative;
  display: inline-block;
  height: fit-content;
  background-color: white;
}
.clear-container:hover .button-clear, .clear-container:focus .button-clear {
  display: inline-block;
}
.clear-container input, .clear-container .input-inner-extra {
  width: 100%;
  padding: 0;
  border: none;
  background-color: transparent;
  padding-right: 24px;
}
.clear-container input.size-xl, .clear-container .size-xl.input-inner-extra {
  height: 54px;
}
.clear-container input.size-sm, .clear-container .size-sm.input-inner-extra {
  height: 26px;
}

.button-clear {
  display: inline-block;
  position: absolute;
  right: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: #d2d2d2 !important;
  display: none;
}
.button-clear svg {
  width: 100%;
  height: 100%;
}

.input-inner-extra .button-clear, .input-inner-extra.size-xl .button-clear {
  right: 0;
}

.size-xl input, .size-xl .input-inner-extra {
  height: 54px;
}
.size-xl + .button-clear {
  right: 16px;
}

.image-upload {
  display: inline-flex;
  gap: 8px;
}
.image-upload .inner-wrap {
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 112px;
  border-radius: 4px;
}
.image-upload .inner-wrap label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border: 1px dashed #d2d2d2;
  border-radius: 4px;
  background-color: #f9fbfc;
  color: #d2d2d2;
  cursor: pointer;
}
.image-upload .inner-wrap label svg {
  width: 24px;
  height: 24px;
}
.image-upload .image-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.image-upload .button-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.loading {
  /* background-image 는 각 학년 scss에 있습니다 */
}
.loading .popup-container, .loading .iframe-container {
  width: 500px;
  padding: 32px 90px 36px;
  border-radius: 32px;
  background-size: contain;
  background-position: center;
  background-image: var(--bg-loading);
}
.loading .title {
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.loading .bar-wrap {
  overflow: hidden;
  width: 100%;
  margin-top: 12px;
  padding: 5px;
  border: 5px solid #fff;
  border-radius: 50px;
  /* box-shadow, background-color 는 각 학년 scss에 있습니다 */
  -moz-box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.1) inset;
  -webkit-box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: -2px -2px 4px 0px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.25) inset, 0px 9px 14px 0px var(--color-primary-700);
  -webkit-box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.25) inset, 0px 9px 14px 0px var(--color-primary-700);
  box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.25) inset, 0px 9px 14px 0px var(--color-primary-700);
}
.loading .bar {
  width: 0%;
  height: 20px;
  border-radius: 50px;
  background-color: #fff;
  animation-name: loading;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.image-wrap {
  width: 100%;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  line-height: 0;
  text-align: center;
  background-image: url("/assets/images/common/img-no-data-91913e87c717c7448ba8692b6aafdc4c.svg");
  background-size: 15%;
  background-color: var(--color-primary-100);
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  border-radius: 10px;
}
.image-wrap img {
  height: 100%;
  max-width: none;
}

.no-image .image-wrap {
  background-image: url("/assets/images/common/img-no-img-650c1c7a8181c9b566aea364ea6e0605.svg");
}

.no-video .image-wrap {
  background-image: url("/assets/images/common/img-no-video-9e289afc78c6b95f69d1d6051af20ec1.svg");
}

.no-zip .image-wrap {
  background-image: url("/assets/images/common/img-no-zip-070e99e6669f04b36435427e303bef54.svg");
}

.no-link .image-wrap {
  background-image: url("/assets/images/common/img-no-link-fb68f2bc51bc5ec66aa39dcb954327ba.svg");
}

.no-sound .image-wrap {
  background-image: url("/assets/images/common/img-no-sound-dc81cc88f844612def205519cabb90cc.svg");
}

.page-header {
  margin-top: 20px;
  margin-bottom: 32px;
}
.page-header.type-items-center {
  display: flex;
  align-items: center;
  gap: 24px;
}
.page-header.is-extra {
  display: flex;
  align-items: flex-end;
  margin-top: 0;
}
.page-header.is-extra .button {
  min-width: 140px;
}
.page-header h2 {
  line-height: 1;
}
.page-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0;
  gap: 8px;
}
.page-buttons [class^=button]:not(.button-text) {
  min-width: 100px;
}
.page-buttons .pagination {
  flex-grow: 1;
}
.page-buttons.fluid a,
.page-buttons.fluid button {
  flex-grow: 1;
}
.page-buttons.align-split {
  justify-content: flex-end;
}
.page-buttons.align-split > :first-child {
  margin-right: auto;
}
.page-buttons.align-left {
  justify-content: flex-start;
}
.page-buttons.align-right {
  justify-content: flex-end;
}
.page-buttons.align-center {
  justify-content: center;
}
.page-buttons.type-form {
  position: relative;
}
.page-buttons.type-form .button {
  min-width: 168px;
}
.page-buttons.type-form .button.position-right {
  position: absolute;
  top: 0;
  right: 0;
}

/* _pagination.scss */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto;
  gap: 12px;
}
.pagination.display-show-flex {
  flex-direction: row;
}
.pagination > button {
  color: #838383;
  min-width: 32px;
  height: 32px;
  padding: 0 4px;
}
.pagination > button:not([class^=icon-button]) {
  border-bottom: 2px solid transparent;
}
.pagination > button.icon-button {
  color: #d2d2d2;
}
.pagination > button.icon-button.current, .pagination > button.icon-button:hover, .pagination > button.icon-button:focus {
  color: #838383;
}
.pagination > button.icon-button svg {
  width: 16px;
  height: 16px;
}
.pagination > button.current:not(:disabled, .page-ellipsis, .icon-button), .pagination > button:hover:not(:disabled, .page-ellipsis, .icon-button), .pagination > button:focus:not(:disabled, .page-ellipsis, .icon-button) {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: bold;
  border-radius: 100%;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}
.badges.type-tag > .badge::before {
  content: "# ";
}

/* _ox-group.scss */
.ox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.ox-group.type-vertical .ox {
  display: flex;
}

/* _list-comm.scss*/
.list-item, [class^=list] > li,
[class^=list] > a {
  position: relative;
  display: block;
  padding: 12px;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

[class^=list].type-short > li,
[class^=list].type-short > a,
[class^=list].type-short .item {
  padding: 6px 12px;
}
[class^=list] > a {
  text-decoration: none;
}
[class^=list] > a:hover {
  background-color: #fafafa;
}
[class^=list] .image-wrap .labels,
[class^=list] .image-wrap > .label {
  position: absolute;
  top: 12px;
  left: 12px;
}
[class^=list] h3,
[class^=list] h4,
[class^=list] h5 {
  margin-bottom: 0;
}
[class^=list] .desc {
  margin-top: 4px;
}

.table-wrap + .pagination {
  margin-top: 32px;
}

.table-items {
  margin-top: 24px;
  /* --------------------------thead와 tbody가 함께 있을 때(리스트 타입)-------------------------- */
  /* table이 여러개일 때 */
  /* 보더 들어갈 때 */
}
.table-items table {
  width: 100%;
  border-top: 1px solid var(--color-primary-200);
  border-bottom: 1px solid var(--color-primary-200);
}
.table-items table:not(:first-child) {
  margin-top: 20px;
}
.table-items th,
.table-items td {
  vertical-align: middle;
  padding: 14px 8px;
  height: 60px;
  border-top: 1px solid #f6f6f6;
  text-align: center;
}
.table-items th.is-border-right,
.table-items td.is-border-right {
  border-right: 1px solid #f6f6f6;
}
.table-items th a:not(.button),
.table-items td a:not(.button) {
  width: 100%;
}
.table-items th {
  text-align: center;
  font-weight: 500;
  color: #000;
  background-color: var(--color-primary-150);
}
.table-items td .divider-group, .table-items td .page-header ul, .page-header .table-items td ul {
  margin-top: 8px;
  color: #838383;
  font-weight: normal;
}
.table-items tbody th {
  background-color: transparent;
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
}
.table-items tbody tr:hover th:not(.no-hover), .table-items tbody tr:hover td:not(.no-hover) {
  background-color: var(--color-primary-50);
}
.table-items tbody tr:hover a:not(.button).title,
.table-items tbody tr:hover a:not(.button) .title {
  text-decoration: underline;
}
.table-items.type-semi-strong th,
.table-items.type-semi-strong td {
  color: #000;
}
.table-items.type-semi-strong th .icon-button,
.table-items.type-semi-strong td .icon-button {
  color: #626262;
}
.table-items.type-semi-strong td {
  font-weight: 500;
}
.table-items.type-view th, .table-items.type-view td {
  padding-left: 24px;
  padding-right: 24px;
}
.table-items.type-view th {
  background-color: var(--color-primary-150);
}
.table-items.type-view th.no-bg {
  background-color: transparent;
}
.table-items.type-view td {
  text-align: left;
}
.table-items.type-view tbody tr:hover th {
  background-color: var(--color-primary-150);
}
.table-items.type-view tbody tr:hover td {
  background-color: transparent;
}
.table-items.no-hover tbody tr:hover th, .table-items.no-hover tbody tr:hover td {
  background-color: transparent;
}
.table-items.type-border table {
  border-color: #e6e6e6;
}
.table-items.type-border th,
.table-items.type-border td {
  border-top-color: #e6e6e6;
  border-left: 1px solid #e6e6e6;
}
.table-items.type-border th:first-child,
.table-items.type-border td:first-child {
  border-left: none;
}
.table-items.type-border th.is-border-left,
.table-items.type-border td.is-border-left {
  border-left: 1px solid #e6e6e6;
}
.table-items.type-border thead + tbody tr:hover th,
.table-items.type-border thead + tbody tr:hover td {
  background-color: transparent;
}
.table-items.type-border thead th {
  background-color: #f6f6f6;
}
.table-items.type-border tbody tr:first-child th,
.table-items.type-border tbody tr:first-child td {
  border-top: 1px solid #e6e6e6;
}
.table-items.type-border tbody th,
.table-items.type-border tbody td {
  text-align: left;
}
.table-items.type-border .buttons {
  justify-content: center;
}
.table-items .img-wrap {
  flex-shrink: 0;
  overflow: hidden;
  width: 120px;
  border-radius: 4px;
}
.table-items .img-wrap img {
  width: 100%;
}
.table-items .notice {
  background-color: #fafafa;
}
.table-items .notice .icon {
  background-color: #fff;
  border: 1px solid #ebf2f2;
}
.table-items .notice .title {
  color: var(--color-primary);
  font-weight: bold;
}
.table-items .notice:first-of-type th,
.table-items .notice:first-of-type td {
  border-color: var(--color-primary-200);
}
.table-items .notice th,
.table-items .notice td {
  border-color: #e6e6e6;
}
.table-items .notice + tr td,
.table-items .notice + tr th {
  border-color: #e6e6e6;
}
.table-items .title {
  text-align: left;
  color: #000;
  font-weight: 500;
}

/*tab.scss */
.tab {
  position: relative;
}
.tab:before {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  content: " ";
  height: 1px;
  background-color: var(--color-primary-300);
  z-index: 2;
}
.tab ul {
  display: inline-flex;
}
.tab li {
  position: relative;
  display: inline-block;
  border: 1px solid #e6e6e6;
  background-color: var(--color-primary-50);
}
.tab li:hover, .tab li:focus, .tab li.active {
  border-color: var(--color-primary-300);
  background-color: var(--color-primary-300);
}
.tab li:hover a, .tab li:focus a, .tab li.active a {
  color: black;
  font-weight: 500;
}
.tab li:hover, .tab li:focus {
  z-index: 2;
}
.tab li.active {
  z-index: 3;
}
.tab li:not(:first-of-type) {
  border-left-color: transparent;
}
.tab a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #626262;
  padding: 6px 14px;
  min-height: 50px;
  text-align: center;
  height: 100%;
}

.tabs.type-rounded .tab {
  font-size: 13px;
}
.tabs.type-rounded .tab::before {
  content: none;
}
.tabs.type-rounded .tab ul {
  gap: 8px;
}
.tabs.type-rounded .tab li {
  border-radius: 20px;
}
.tabs.type-rounded .tab li a {
  min-height: 36px;
  color: #000;
}
.tabs.type-rounded .tab li:hover, .tabs.type-rounded .tab li:focus, .tabs.type-rounded .tab li.active {
  border-color: rgba(0, 0, 0, 0.4);
  background-color: #fafafa;
}
.tabs.type-rounded .tab li:hover a, .tabs.type-rounded .tab li:focus a, .tabs.type-rounded .tab li.active a {
  font-weight: 400;
}
.tabs.type-rounded .tab li.active {
  background-color: #000;
}
.tabs.type-rounded .tab li.active a {
  color: white;
  font-weight: 500;
}
.tabs.type-rounded .pane-wrap {
  margin-top: 20px;
}
.tabs.type-sub {
  font-size: 13px;
  margin-top: 30px;
}
.tabs.type-sub .tab a {
  min-height: 44px;
  font-size:14px;
  color: #838383;
}
.tabs.type-sub .tab li {
  background-color: #f9fbfc;
}
.tabs.type-sub .tab li:hover, .tabs.type-sub .tab li:focus, .tabs.type-sub .tab li.active {
  background-color: var(--color-primary-300);
}
.tabs.type-sub .tab li:hover a, .tabs.type-sub .tab li:focus a, .tabs.type-sub .tab li.active a {
  color: #000;
}
.tabs.type-sub .tab li.active {
  border-bottom-color: var(--color-primary-300);
}
.tabs.type-sub .pane-wrap {
  margin-top: -1px;
}
.tabs.type-sub .box-line {
  border: 1px solid var(--button-primary);
  padding: 20px;
}
.tabs.type-line > .tab:before {
  height: 2px;
  background-color: #e6e6e6;
}
.tabs.type-line > .tab a {
  color: #a4a4a4;
}
.tabs.type-line > .tab li {
  border: none;
  background-color: transparent;
}
.tabs.type-line > .tab li:hover a, .tabs.type-line > .tab li:focus a, .tabs.type-line > .tab li.active a {
  color: var(--color-primary-700);
}
.tabs.type-line > .tab li.active {
  border-bottom: 2px solid var(--color-primary-300);
}
.tabs.type-line > .pane-wrap {
  margin-top: 0;
}
.tabs.fluid > .tab ul {
  display: flex;
}
.tabs.fluid > .tab li {
  flex-grow: 1;
  flex-basis: 33.3%;
}
.tabs.fluid > .tab li a {
  width: 100%;
}
.tabs.type-outlined > .tab {
  border: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  overflow: hidden;
}
.tabs.type-outlined-primary.type-line > .tab li:hover a, .tabs.type-outlined-primary.type-line > .tab li:focus a, .tabs.type-outlined-primary.type-line > .tab li.active a {
  color: var(--color-primary-700);
  font-weight: 700;
}
.tabs.type-outlined-primary.type-line > .tab li.active {
  border-bottom: 1px solid var(--color-primary-300);
}
.tabs.type-outlined-primary > .tab {
  position: relative;
  border: 1px solid var(--color-primary);
  border-bottom: none;
  background-color: #fff;
  z-index: 10;
}
.tabs.type-round-box > .tab {
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
}
.tabs.type-round-box > .tab:before {
  background-color: #e6e6e6;
}
.tabs.type-round-box > .tab a {
  color: #a4a4a4;
}
.tabs.type-round-box > .tab li {
  border: none;
  background-color: transparent;
}
.tabs.type-round-box > .tab li:hover a, .tabs.type-round-box > .tab li:focus a, .tabs.type-round-box > .tab li.active a {
  color: var(--color-primary);
}
.tabs.type-round-box > .tab li.active {
  position: relative;
}
.tabs.type-round-box > .tab li.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  border-radius: 4px 4px 0px 0px;
  background-color: var(--color-primary);
}
.tabs.type-round-box > .pane-wrap {
  margin-top: 0;
}
.tabs.type-grid .tab ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20%, 1fr));
  border-left: 1px solid #e6e6e6;
}
.tabs.type-grid .tab li:first-of-type {
  border-left: none;
}
.tabs.type-grid .tab li:nth-of-type(n+6) {
  border-top-width: 0;
}
.tabs.type-grid .tab.line-2cell::before {
  width: 40%;
}

.tabs .pane {
  display: none;
}
.tabs .filters {
  position: relative;
  margin-top: -1px;
  border: 1px solid var(--color-primary-300);
  z-index: 2;
}
.tabs .no-filters {
  position: relative;
  margin-top: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary-300);
  z-index: 2;
}
.tabs .filter-wrap .banner {
  margin-top: -1px;
  border-color: var(--color-primary-300);
  border-bottom: 1px solid var(--color-primary-300);
}
.tabs .filter-wrap .filters:nth-child(n+2) {
  border-top-color: #e6e6e6;
}
.tabs.type-round-box .filter-wrap > :last-child {
  border-radius: 0px 0px 4px 4px;
}
.tabs.type-round-box .filter-wrap .banner {
  border-color: #e6e6e6;
}
.tabs.type-round-box .filter-wrap .filters {
  border-color: #e6e6e6;
  background-color: #fff;
}
.tabs.type-outlined-primary .filters {
  border-color: var(--color-primary);
  border-top-color: #e6e6e6;
}
.tabs.type-outlined-primary .no-filters {
  background-color: var(--color-primary);
}

.header-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin-right: auto;
  gap: 10px;
}
.header-wrap h3,
.header-wrap h4,
.header-wrap h5 {
  display: inline-block;
  font-weight: 500;
  line-height: 1;
}

.number-unit {
  font-weight: 500;
  font-size: 18px;
}

/* _accordion.scss */
.accordion {
  margin-top: 30px;
}
.accordion li {
  transition: all 500ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
}
.accordion li .action {
  position: relative;
  display: flex;
  padding-right: 70px;
  border-top: 0;
  cursor: pointer;
}
.accordion li .action::after {
  position: absolute;
  top: 50%;
  right: 22px;
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background: url(/assets/images/common/icon-chevron-down-black-f265ddb02ab1eaf6c19fadb1f3aa865b.svg) center center no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  transition: all 500ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  opacity: 0.2;
}
.accordion .pane {
  display: none;
}
.accordion .active {
  border-color: var(--color-primary-200);
}
.accordion .active > :first-child::after {
  transform: translateY(-50%) rotateZ(-180deg);
  opacity: 1;
}
.accordion .active .action {
  /*background-color: var(--color-primary-200);*/
  background-color: var(--color-primary-250);
}
.accordion .board-list {
  margin: 20px 30px 40px;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}
.accordion .board-items {
  grid-column-gap: 16px;
  margin-top: 20px;
}
.accordion .board-items.type-vertical .item {
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.buttons.align-split {
  justify-content: flex-end;
}
.buttons.align-split > :first-child {
  margin-right: auto;
}
.buttons.align-left {
  justify-content: flex-start;
}
.buttons.align-right {
  justify-content: flex-end;
}
.buttons.align-center {
  justify-content: center;
}
.buttons.type-vertical {
  flex-direction: column;
}
.buttons.type-vertical .button {
  flex-direction: column;
}
.buttons.gutter-md {
  gap: 12px;
}
.buttons.type-rounded [type=checkbox] + label::before, .buttons.type-rounded [type=checkbox] + label::after,
.buttons.type-rounded [type=radio] + label::before,
.buttons.type-rounded [type=radio] + label::after {
  display: none;
}
.buttons.type-rounded [type=checkbox]:checked + label,
.buttons.type-rounded [type=radio]:checked + label {
  background-color: #000;
  border-color: #000;
  color: white;
  z-index: 2;
}
.buttons.type-rounded [type=checkbox]:disabled + label,
.buttons.type-rounded [type=radio]:disabled + label {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: #838383;
  color: white;
  pointer-events: none;
}
.buttons.type-rounded span:not(:first-of-type) {
  margin-left: -1px;
}
.buttons.type-rounded label {
  background-color: #fff;
  display: inline-block;
  border: 1px solid #d2d2d2;
  color: #000;
  font-weight: 500;
  min-height: 36px;
  padding: 7px 14px 5px;
  /* padding: {
    left: 14px;
    right: 14px;
    top: 4px;
    bottom: 6px;
  } */
}
.buttons.type-rounded label {
  border-radius: 17px;
  cursor: pointer;
}
.buttons.type-rounded a,
.buttons.type-rounded button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: 0 14px;
  min-height: 36px;
  border: 1px solid #e6e6e6;
  border-radius: 100px;
  background-color: #fff;
  color: #000;
  font-family: "Outfit", "Noto Sans KR", "malgun gothic", "맑은 고딕", "open sans", sans-serif;
  font-weight: 500;
  line-height: normal;
  vertical-align: middle;
  text-align: center;
}
.buttons.type-rounded a svg,
.buttons.type-rounded button svg {
  fill: transparent;
  color: #a4a4a4;
  width: 16px;
  height: 16px;
}
.buttons.type-rounded a.active,
.buttons.type-rounded button.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.buttons.type-rounded a.disabled,
.buttons.type-rounded button.disabled {
  background-color: var(--button-primary-disable);
  border-color: var(--button-primary-disable);
  color: #fff;
  pointer-events: none;
}
.buttons.type-rounded.type-primary [type=checkbox]:checked + label,
.buttons.type-rounded.type-primary [type=radio]:checked + label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.buttons.type-rounded.type-primary [type=checkbox]:disabled + label,
.buttons.type-rounded.type-primary [type=radio]:disabled + label {
  background-color: var(--button-primary-disable);
  border-color: var(--button-primary-disable);
  color: white;
  pointer-events: none;
}
.buttons.type-rounded.type-primary label {
  background-color: var(--color-primary-100);
  border-color: var(--color-primary-100);
  color: #a4a4a4;
}
.buttons.type-rounded.type-primary-active [type=checkbox]:checked + label,
.buttons.type-rounded.type-primary-active [type=radio]:checked + label {
  background-color: var(--color-primary);
  border-color: rgba(0, 0, 0, 0.04);
}
.buttons.type-rounded.type-primary-active [type=checkbox]:disabled + label,
.buttons.type-rounded.type-primary-active [type=radio]:disabled + label {
  background-color: var(--button-primary-disable);
  border-color: rgba(0, 0, 0, 0.04);
  color: white;
  pointer-events: none;
}
.buttons.type-row2 {
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.buttons.type-row2 .block-button {
  flex-basis: 45%;
  max-width: 45%;
}
.members .tabs .buttons.type-row2 .block-button {
  flex-basis: calc(50% - 6px);
  max-width: calc(50% - 6px);
}
.buttons.type-row2 .block-button:hover {
  border-color: var(--color-primary);
}
.buttons.type-row4 {
  gap: 16px;
}
.buttons.type-row4 .block-button {
  flex-basis: 20%;
}

.toggle-group {
  display: inline-flex;
  gap: 0;
}
.toggle-group .button {
  border-radius: 0;
}
.toggle-group .button:hover, .toggle-group .button:focus, .toggle-group .button.active {
  z-index: 2;
}
.toggle-group > :first-child {
  border-radius: 4px 0 0 4px;
}
.toggle-group > :last-child {
  border-radius: 0 4px 4px 0;
}
.toggle-group > :not(:first-child) {
  margin-left: -1px;
}
.toggle-group .active {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.toggle-group .active,
.toggle-group .active svg {
  color: white;
}

.toggle-this.active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-100);
}
.toggle-this.active, .toggle-this.active svg {
  color: var(--color-primary);
}

.toggle-primary.active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-100);
}
.toggle-primary.active, .toggle-primary.active svg {
  color: var(--color-primary);
}

.divider-group, .page-header ul {
  display: flex;
  align-items: center;
  gap: 0;
}
.divider-group:not(.type-outlined) > :first-child:not(.button), .page-header ul:not(.type-outlined) > :first-child:not(.button) {
  padding-left: 0;
}
.divider-group:not(.type-outlined) > :last-child:not(.button), .page-header ul:not(.type-outlined) > :last-child:not(.button) {
  padding-right: 0;
}
.divider-group.type-outlined, .page-header ul.type-outlined {
  display: inline-flex;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.divider-group.type-card, .page-header ul.type-card {
  align-items: unset;
}
.divider-group.type-card > li, .page-header ul.type-card > li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
  gap: 8px;
  padding-left: 24px;
  padding-right: 24px;
}
.divider-group.type-card > li::before, .page-header ul.type-card > li::before {
  height: 100%;
}
.divider-group.type-card button, .page-header ul.type-card button {
  white-space: nowrap;
}
.divider-group > .button, .page-header ul > .button {
  position: relative;
  border-radius: 0;
  border: 0;
}
.divider-group > .button::before, .page-header ul > .button::before {
  position: absolute;
  top: 50%;
  display: inline-block;
  left: 0;
  width: 1px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
  content: "";
}
.divider-group > li, .page-header ul > li {
  position: relative;
  padding-left: 8px;
  padding-right: 8px;
  line-height: normal;
}
.divider-group > li::before, .page-header ul > li::before {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block;
  width: 1px;
  height: 14px;
  background-color: rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
  content: "";
}
.divider-group > :first-child::before, .page-header ul > :first-child::before {
  content: none;
}
.divider-group.type-brace, .page-header ul.type-brace {
  flex-wrap: wrap;
}
.divider-group.type-brace > li, .page-header ul.type-brace > li {
  position: relative;
  padding-left: 0;
  padding-right: 24px;
  line-height: normal;
}
.divider-group.type-brace > li::before, .page-header ul.type-brace > li::before {
  display: none;
}
.divider-group.type-brace > li::after, .page-header ul.type-brace > li::after {
  position: absolute;
  top: 0;
  right: 6px;
  transform: translate(0, 50%);
  content: "";
  background: url(/assets/images/common/icon-chevron-right-e606f83279b6adff72be7c6d04e995cc.svg) center center;
  background-size: contain;
  width: 12px;
  height: 12px;
  margin: 0;
}
.divider-group.type-brace > :last-child::after, .page-header ul.type-brace > :last-child::after {
  content: none;
}
.divider-group.type-dot, .page-header ul.type-dot {
  flex-wrap: wrap;
}
.divider-group.type-dot > li, .page-header ul.type-dot > li {
  position: relative;
  padding-left: 0;
  padding-right: 12px;
  line-height: normal;
}
.divider-group.type-dot > li::before, .page-header ul.type-dot > li::before {
  display: none;
}
.divider-group.type-dot > li::after, .page-header ul.type-dot > li::after {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(0);
  content: "";
  width: 2px;
  height: 2px;
  background-color: #a4a4a4;
  border-radius: 100%;
  margin: 0;
}
.divider-group.type-dot > :last-child::after, .page-header ul.type-dot > :last-child::after {
  content: none;
}

.quick-menu {
  position: fixed;
  bottom: 10px;
  right: 8px;
  z-index: 98;
  width: 170px;
}
.quick-menu .toggle-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  padding-right: 38px;
  background-color: var(--color-primary);
}
.quick-menu .toggle-button .user-status {
  width: calc(100% - 42px);
}
.quick-menu .toggle-button .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  margin-right: 8px;
  border-radius: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-primary);
}
.quick-menu .toggle-button .icon svg {
  width: 100%;
  height: 100%;
}
.quick-menu .toggle-button .user-name {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  text-decoration: underline;
}
.quick-menu .toggle-button .school-name {
  display: none;
  font-size: 12px;
  color: #fff;
  opacity: 0.7;
  text-align: left;
}
.quick-menu .toggle-button .toggle-arrow {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: url(/assets/images/common/icon-arrow-toggle-2215b4b7d6fa6a1ed478ff3ef6d8e367.svg);
}
.quick-menu.is-login .user-name {
  text-decoration: none;
}
.quick-menu.is-login .school-name {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.quick-menu.is-login .toggle-button .icon {
  background: #fff;
  color: var(--color-primary);
}
.quick-menu.is-login .menu-list {
  padding-bottom: 8px;
}
.quick-menu.on .toggle-arrow,
.quick-menu.init-show .toggle-arrow {
  transform: translateY(-50%) rotateZ(180deg);
}
.quick-menu.init-show .body {
  display: block;
}
.quick-menu .body {
  display: none;
  width: 100%;
  margin-top: 8px;
  background: #fff;
}
.quick-menu .swiper {
  position: relative;
  width: 100%;
  min-height: 104px;
  /*border: 1px solid #f6f6f6;*/
}
.quick-menu .slide-item {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.quick-menu .slide-item .slide-item-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 16px 14px;
  line-height: 1.5;
}
.quick-menu .slide-item img {
  line-height: 0;
}
.quick-menu .slide-item .sub-title {
  max-width: calc(100% - 30px);
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  opacity: 0.7;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.quick-menu .slide-item .title {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.quick-menu .slide-item .slide-buttons {
  margin: 0;
  margin-top: 16px;
  gap: 4px;
}
.quick-menu .swiper-button-prev,
.quick-menu .swiper-button-next {
  position: absolute;
  top: 17px;
  left: unset;
  right: 14px;
  width: 12px;
  height: 12px;
}
.quick-menu .swiper-button-prev.swiper-button-prev,
.quick-menu .swiper-button-next.swiper-button-prev {
  transform: translateX(calc(-100% - 4px));
}
.quick-menu .swiper-button-prev:hover,
.quick-menu .swiper-button-next:hover {
  color: #fff;
}
.quick-menu .swiper-button-prev::after,
.quick-menu .swiper-button-next::after {
  display: block;
  width: 100%;
  height: 100%;
  font-size: 12px;
  line-height: 1;
}
.quick-menu .login-box {
  padding: 8px;
  border: 1px solid #f6f6f6;
}
.quick-menu .login-box .login-ox {
  margin-top: 8px;
}
.quick-menu .login-box .login-ox label {
  padding-left: 18px;
  font-size: 10px;
}
.quick-menu .login-box .login-ox label::before, .quick-menu .login-box .login-ox label::after {
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
}
.quick-menu .login-box .login-ox label::after {
  background-size: contain;
}
.quick-menu .login-box .login-button {
  margin-top: 16px;
  padding-top: 7px;
  padding-bottom: 7px;
  background-color: #000;
  color: #fff;
  border-radius: 2px;
  font-size: 12px;
  line-height: 18px;
}
.quick-menu .login-box .divider-group, .quick-menu .login-box .page-header ul, .page-header .quick-menu .login-box ul {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}
.quick-menu .login-box .divider-group li, .quick-menu .login-box .page-header ul li, .page-header .quick-menu .login-box ul li {
  line-height: 1;
}
.quick-menu .login-box .divider-group li::before, .quick-menu .login-box .page-header ul li::before, .page-header .quick-menu .login-box ul li::before {
  top: 70%;
  height: 9px;
}
.quick-menu .login-box .divider-group a, .quick-menu .login-box .page-header ul a, .page-header .quick-menu .login-box ul a {
  font-size: 10px;
  line-height: 1;
  color: #626262;
}
.quick-menu .login-box .sns-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.quick-menu .login-box .sns-box button {
  width: 20px;
  height: 20px;
}
.quick-menu .input-box {
  position: relative;
}
.quick-menu .input-box:last-child {
  margin-top: -1px;
}
.quick-menu .input-box svg {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}
.quick-menu .input-box input, .quick-menu .input-box .input-inner-extra {
  position: relative;
  width: 100%;
  height: auto;
  padding: 7px;
  padding-left: 30px;
  font-size: 11px;
  line-height: 18px;
  border-radius: 2px 2px 0px 0px;
}
.quick-menu .input-box input:hover, .quick-menu .input-box .input-inner-extra:hover, .quick-menu .input-box input:focus, .quick-menu .input-box .input-inner-extra:focus {
  z-index: 10;
}
.quick-menu .input-box:last-child input, .quick-menu .input-box:last-child .input-inner-extra {
  border-radius: 0px 0px 2px 2px;
}
.quick-menu .menu-list {
  padding: 8px;
  padding-bottom: 16px;
  border: 1px solid #f6f6f6;
  border-top: none;
}
.quick-menu .menu-list > li {
  position: relative;
}
.quick-menu .menu-list > li:hover > a, .quick-menu .menu-list > li:focus > a {
  background-color: #f6f6f6;
}
.quick-menu .menu-list > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  color: #000;
  font-size: 12px;
  line-height: 1;
}
.quick-menu .menu-list > li > a img,
.quick-menu .menu-list > li > a svg{
  width: 16px;
  height: 16px;
}
.quick-menu .menu-list > li > a svg{
  color:#151515;
}
.quick-menu .bottom-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #fafbfd;
  border: 1px solid #f6f6f6;
  border-top: none;
}
.quick-menu .bottom-buttons::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 9px;
  background-color: #e6e6e6;
}
.quick-menu .bottom-buttons .bottom-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  padding: 10px 16px;
  color: #626262;
  font-size: 11px;
}
.quick-menu .menu-list li:hover .depth02 {
  display: block;
}
.quick-menu .depth02 {
  display: none;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translate(-100%, -50%);
  min-width: 180px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
}
.quick-menu .depth02 h4 {
  padding-right: 16px;
  padding-bottom: 24px;
  font-weight: bold;
  border-bottom: 1px solid #e6e6e6;
  line-height: 1.5;
}
.quick-menu .depth02 p {
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #838383;
  line-height: 1.5;
}
.quick-menu .depth02 .ul-dot {
  margin: 0;
}
.quick-menu .depth02 .ul-dot > li {
  padding-left: 8px;
  font-size: 11px;
  color: #626262;
}
.quick-menu .depth02 .ul-dot > li:not(:first-of-type) {
  margin-top: 6px;
}
.quick-menu .depth02 .ul-dot > li::before {
  top: 6.66px;
}
.quick-menu .depth02 .ul-dot > li:hover {
  font-weight: bold;
  color: var(--color-primary);
}

.popup {
  display: none;
}
.popup .dimd, .popup html.header-overlay .gnb-dim, html.header-overlay .popup .gnb-dim {
  z-index: 1001;
}
.popup .dimd.type-transparent, .popup html.header-overlay .type-transparent.gnb-dim, html.header-overlay .popup .type-transparent.gnb-dim {
  background-color: transparent;
}
.popup .popup-container, .popup .iframe-container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 520px;
  transform: translate(-50%, -50%);
  z-index: 1001;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.popup .popup-container.size-sm, .popup .size-sm.iframe-container {
  width: 484px;
}
.popup .popup-container.size-lg, .popup .size-lg.iframe-container {
  width: 700px;
}
.popup .popup-container.size-xl, .popup .size-xl.iframe-container {
  width: 800px;
}
.popup .popup-container.size-xxl, .popup .size-xxl.iframe-container {
  width: 1320px;
  height: 90vh;
}
.popup .popup-container.size-xxl .body, .popup .size-xxl.iframe-container .body {
  max-height: unset;
  flex-grow: 1;
}
.popup .popup-container.fluid, .popup .fluid.iframe-container {
  width: 100%;
}
.popup .popup-container > iframe, .popup .iframe-container > iframe {
  width: 100%;
  height: 100%;
}

.popup-container, .iframe-container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  z-index: 2;
}
.popup-container .close-button, .iframe-container .close-button {
  position: absolute;
  right: 22px;
  top: 23px;
  color: #a4a4a4;
  z-index: 3;
}
.popup-container .header, .iframe-container .header {
  text-align: center;
  font-weight: 500;
  font-size: 18px;
  padding: 22px 48px;
  border-bottom: 1px solid #e6e6e6;
  color: #000;
  flex-shrink: 0;
}
.popup-container .footer, .iframe-container .footer {
  border-top: 1px solid #e6e6e6;
  padding: 24px 22px;
  display: flex;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
}
.popup-container .footer .button, .iframe-container .footer .button {
  flex-grow: 1;
  gap: 8px;
  width: 100%;
}
.popup-container .body, .iframe-container .body {
  padding: 24px 22px;
  overscroll-behavior-y: contain;
  overflow-y: scroll;
  max-height: 536px;
  scrollbar-width: thin;
  scrollbar-color: #d2d2d2;
}
.popup-container .body::-webkit-scrollbar, .iframe-container .body::-webkit-scrollbar {
  width: 6px;
}
.popup-container .body::-webkit-scrollbar-thumb, .iframe-container .body::-webkit-scrollbar-thumb {
  background: #d2d2d2;
}
.popup-container .body > :not(:first-child):not(section), .iframe-container .body > :not(:first-child):not(section) {
  margin-top: 24px;
}
.popup-container.no-body-scroll .body, .no-body-scroll.iframe-container .body {
  overflow-y: hidden;
}
.popup-container .body > .block-wrap, .iframe-container .body > .block-wrap {
  align-items: baseline;
}
.popup-container .table-items, .iframe-container .table-items {
  margin-top: 0;
}
.popup-container .table-items tbody th, .iframe-container .table-items tbody th {
  padding-left: 12px;
  padding-right: 4px;
}
.popup-container .table-items a:hover, .iframe-container .table-items a:hover {
  text-decoration: underline;
}
.popup-container.ignore-duration, .ignore-duration.iframe-container {
  border-radius: 0 0 4px 4px;
}
.popup-container.ignore-duration .slides, .ignore-duration.iframe-container .slides {
  overflow: hidden;
}
.popup-container.ignore-duration .slides .image-wrap, .ignore-duration.iframe-container .slides .image-wrap {
  border-radius: unset;
}
.popup-container.ignore-duration .slides .swiper-button-prev, .ignore-duration.iframe-container .slides .swiper-button-prev,
.popup-container.ignore-duration .slides .swiper-button-next,
.ignore-duration.iframe-container .slides .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  color: #000;
}
.popup-container.ignore-duration .slides .swiper-button-prev.swiper-button-disabled, .ignore-duration.iframe-container .slides .swiper-button-prev.swiper-button-disabled,
.popup-container.ignore-duration .slides .swiper-button-next.swiper-button-disabled,
.ignore-duration.iframe-container .slides .swiper-button-next.swiper-button-disabled {
  opacity: 0.2;
}
.popup-container.ignore-duration .slides .swiper-button-prev, .ignore-duration.iframe-container .slides .swiper-button-prev {
  left: -20px;
  transform: translateX(-100%);
}
.popup-container.ignore-duration .slides .swiper-button-next, .ignore-duration.iframe-container .slides .swiper-button-next {
  right: -20px;
  transform: translateX(100%);
}
.popup-container.ignore-duration .slides .swiper-pagination, .ignore-duration.iframe-container .slides .swiper-pagination {
  bottom: 72px;
}
.popup-container.ignore-duration .slides .swiper-pagination .swiper-pagination-bullet, .ignore-duration.iframe-container .slides .swiper-pagination .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0 2px;
  background-color: #fff;
  opacity: 1;
}
.popup-container.ignore-duration .slides .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .ignore-duration.iframe-container .slides .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 20px;
  border-radius: 2px;
  background-color: #000;
}
.popup-container.ignore-duration .footer, .ignore-duration.iframe-container .footer {
  padding: 8px 24px;
}
.popup-container.ignore-duration .footer .split-container, .ignore-duration.iframe-container .footer .split-container, .popup-container.ignore-duration .footer .board-view .header, .ignore-duration.iframe-container .footer .board-view .header, .board-view .popup-container.ignore-duration .footer .header, .board-view .ignore-duration.iframe-container .footer .header {
  width: 100%;
}
.popup-container.ignore-duration .footer .button, .ignore-duration.iframe-container .footer .button {
  flex-grow: 0;
  width: auto;
  min-width: 100px;
}

.popup-alert {
  display: none;
}
.popup-alert .dimd, .popup-alert html.header-overlay .gnb-dim, html.header-overlay .popup-alert .gnb-dim {
  z-index: 9999;
}
.popup-alert .popup-container, .popup-alert .iframe-container {
  display: inline-block;
  position: fixed;
  background-color: #fff;
  z-index: 2;
  top: 50%;
  left: 50%;
  animation: popup-show 500ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
  animation-fill-mode: forwards;
  width: 360px;
  padding: 32px 24px;
  text-align: center;
  border-radius: 4px;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}
.popup-alert .popup-container .body, .popup-alert .iframe-container .body {
  padding: 0;
  overflow: auto;
}
.popup-alert .popup-container .footer, .popup-alert .iframe-container .footer {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
  border-top: none;
  padding: 0;
}
.popup-alert .popup-container .footer .button, .popup-alert .iframe-container .footer .button {
  max-width: 112px;
}
.popup-alert .flag-positive::before,
.popup-alert .flag-negative::before {
  display: block;
  content: "";
  width: 56px;
  height: 56px;
  background: url(/assets/images/common/icon-light-confirm-33d3da6f8612b2ea7f7231a8e1198094.svg) center center no-repeat;
  background-size: contain;
  margin: 0 auto 12px;
}
.popup-alert .flag-negative::before {
  background-image: url(/assets/images/common/icon-caution-no-data-6b57e79801a2745546e00d6721ae04e7.svg);
}

.popup-fullpage {
  display: none;
}
.popup-fullpage .popup-container, .popup-fullpage .iframe-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-height: unset;
}

.popup-window .popup-container, .popup-window .iframe-container {
  width: unset;
}
.popup-window .body {
  overflow-y: unset;
  max-height: unset;
}
.popup-window .header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: white;
}
.popup-window .close-button {
  position: fixed;
  top: 23px;
  right: 22px;
  z-index: 3;
}

.utility {
  display: flex;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 10px;
}
.utility > :last-child {
  margin-left: auto;
}
.utility.my-data .button.size-md.type-secondary{
  margin-left: auto;
}
.utility dt {
  color: #000;
  font-weight: 500;
  margin-right: 40px;
  margin-left: 30px;
}
.utility dt,
.utility dd {
  display: inline-block;
}
.utility .input-inner-extra .icon-button svg {
  width: 20px;
  height: 20px;
}
.utility .utility-inner {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.utility .utility-inner.gap-lg {
  gap: 24px;
}

.utility.margin-section {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
  height: 36px;
} /* 1541 */

.box-info {
  margin-top: 30px;
  background-color: #fafafa;
  padding: 30px;
}
.box-info .title {
  margin-bottom: 16px;
  background: url("/assets/images/elementary/icon-caution-line-fa774b7f6bce1a35b8878ade005103de.svg") 0 0px no-repeat;
  background-size: 20px;
  padding-left: 28px;
  color: var(--color-primary);
}
.box-info .body p {
  margin-top: 10px;
}
.box-info .body > :first-child {
  margin-top: inherit;
}
.box-info.no-bg {
  background-color: transparent;
  padding: 0;
}

.theme-middle .box-info .title {
  background-image: url("/assets/images/middle/icon-caution-line-812c29a741e0f739a0738763505246c3.svg");
}

.theme-high .box-info .title {
  background-image: url("/assets/images/high/icon-caution-line-6b7464379c506ed1abe803abd05604d8.svg");
}

.title-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: var(--color-primary);
  gap: 8px;
  font-weight: 700;
}
.title-info::before {
  display: inline-block;
  content: "";
  background: url("/assets/images/elementary/icon-caution-line-fa774b7f6bce1a35b8878ade005103de.svg") 0 0px no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.desc-info {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  color: #838383;
  gap: 4px;
  font-weight: 500;
}
.desc-info::before {
  display: inline-block;
  content: "";
  background: url("/assets/images/common/icon-caution-filled-b1150ec50fa501907aeccf412e4bc15a.svg") 0 0px no-repeat;
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.title-check {
  position: relative;
  padding: 16px 24px;
  padding-left: 56px;
  border-radius: 4px;
  background-color: #f6f6f6;
  color: var(--color-primary);
}
.title-check::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 24px;
  background-image: url("/assets/images/common/icon-check-02-4117023739ff187e664827cc97105828.svg");
  width: 24px;
  height: 24px;
}

.split-container-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 32px;
  padding: 32px 20px 0;
  border-top: 1px solid #e6e6e6;
}

.tel-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 500;
  margin-top: 40px;
}
.tel-info::before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  background: url("/assets/images/common/icon-telephone-talk-187d166c60a390028b8bef717171a686.svg") 0 0 no-repeat;
}

.box-outlined-info {
  padding: 32px 24px;
  background-color: #f6f6f6;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.box-outlined-info .title {
  margin-bottom: 16px;
  background: url("/assets/images/elementary/icon-caution-line-fa774b7f6bce1a35b8878ade005103de.svg") 0 0px no-repeat;
  background-size: 20px;
  padding-left: 28px;
  color: var(--color-primary);
}

.box-underlined {
  padding-bottom: 32px;
  border-bottom: 1px solid #e6e6e6;
}

.box-no-data {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}

.box-no-file {/* 1541 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px;
  gap: 4px;
}

.box-no-file svg {/* 1541 */
  width: 28px;
  height: 24px;
  color: #999;
}
.box-no-data::before {
  display: block;
  width: 48px;
  height: 48px;
  content: "";
  background: url(/assets/images/common/icon-caution-no-data-6b57e79801a2745546e00d6721ae04e7.svg) center center no-repeat;
  margin: 0px auto 10px;
}
.box-no-data.type-border-bottom,
.box-no-file.type-border-bottom { /* 1541 */
  border-bottom: 1px solid var(--color-primary-200);
}

.split-container, .board-view .header {
  display: flex;
  align-items: center;
}
.split-container > :first-child, .board-view .header > :first-child {
  flex-grow: 1;
}
.split-container.align-button, .board-view .align-button.header {
  align-items: flex-end;
}

.split-vertical-line {
  display: flex;
  width: 100%;
}
.split-vertical-line > :not(:first-child) {
  position: relative;
  margin-left: 24px;
  padding-left: 24px;
}
.split-vertical-line > :not(:first-child):before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #e6e6e6;
  width: 1px;
}
.split-vertical-line .align-middle {
  display: flex;
  align-items: center;
}
.split-vertical-line .section {
  flex-grow: 1;
}

.sns-box {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.sns-box button {
  overflow: hidden;
  width: 42px;
  height: 42px;
  border-radius: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.sns-box button.naver {
  background-image: url(/assets/images/common/icon-sns-NA-round-844426164eee97e9f64db6c41d4918fb.svg);
}
.sns-box button.kakao {
  background-image: url(/assets/images/common/icon-sns-KA-round-e2fb21607289f0e50c3476b3a29f8cbc.svg);
}
.sns-box button.facebook {
  background-image: url(/assets/images/common/icon-sns-FB-round-2ea16b07c1aef70cb5f3cb5b0a461eb3.svg);
}
.sns-box button.google {
  background-image: url(/assets/images/common/icon-sns-GO-round-3e790b092d3c88529b50a457d7182731.svg);
}
.sns-box button.whale {
  background-image: url(/assets/images/common/icon-sns-WH-round-05b60164c5ce317b688f1e97adf0ffb5.svg);
}
.sns-box button.class123 {
  background-image: url(/assets/images/common/icon-sns-class123-round-11a5f510b42c9fc39f3d91eea9fd210b.svg);
}
.sns-box button.iamteacher {
  background-image: url(/assets/images/common/icon-sns-IA-round-2a17d8fbf633ed15298c8aad008acd54.svg);
}

.forms {
  text-align: left;
}
.forms + .forms {
  margin-top: 24px;
}
.forms .label-with-extra {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.forms .label-with-extra label {
  flex-grow: 1;
  margin-bottom: 0;
}
.forms.type-horizontal {
  display: flex;
  align-items: center;
  gap: 12px;
}
.forms.type-horizontal label,
.forms.type-horizontal fieldset {
  margin: 0;
}
.forms > :not(:first-child) {
  margin-top: 8px;
}
.forms label {
  display: block;
  color: #000;
  margin-bottom: 12px;
}
.forms label.title {
  margin-bottom: 0;
}
.forms label span {
  color: #a4a4a4;
  margin-right: 4px;
  line-height: 1;
}
.forms label .required {
  color: var(--color-primary);
}
.forms fieldset.is-badge {
  position: relative;
}
.forms fieldset.is-badge .badge {
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  flex-shrink: unset;
}

.unit-list-items {
  display: flex;
  flex-direction: column;
  width: 280px;
  gap: 6px;
}
.unit-list-items li button, .unit-list-items li a {
  padding: 8px;
  font-size: 13px;
  color: #000;
  background-color: #f6f6f6;
}
.unit-list-items.split2 {
  width: 566px;
  flex-direction: row;
  flex-wrap: wrap;
}
.unit-list-items.split2 li {
  width: calc((100% - 6px) * 0.5);
}

.unit-item, .unit-list-items li button, .unit-list-items li a {
  display: flex;
  gap: 10px;
  width: 100%;
}
.unit-item.multi-line p, .unit-list-items li button.multi-line p, .unit-list-items li a.multi-line p {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-item p, .unit-list-items li button p, .unit-list-items li a p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.webui-popover-content .unit-two-line{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 500px;
}
.webui-popover-content .unit-two-line .unit-list-items{
  width: 50% !important;
}
.unit-two-line ul:nth-child(1){
  padding-right: 5px;
}

.comment {
  margin-top: 44px;
}
.comment .pagination {
  margin: 32px auto;
}
.comment .inner-wrap {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px 8px 0px 0px;
}
.comment .write-box {
  padding: 24px;
  background-color: #fafafa;
}
.comment .textarea {
  margin-top: 16px;
  position: relative; /* #2073 금지어 경고문구 수정 25-10-23 */
}

.comments {
  padding: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.comments > .split-container, .board-view .comments > .header {
  margin-bottom: 16px;
}
.comments .ox label {
  color: #a4a4a4;
}
.comments > ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  padding-right: 40px;
}
.comments > ul > li:not(:last-of-type) {
  border-bottom: 1px solid #e3e3e3
}
.comments .user-id {
  color: #000;
  font-weight: bold;
}
.comments .comment-text {
  line-height: 1.75;
  color: #000;
}
.comments .dropdown {
  display: none;
  position: absolute !important;
  top: 16px;
  right: 10px;
}
.comments .dropdown .icon-button {
  width: 20px;
  height: 20px;
  color: #d2d2d2;
}
.comments .dropdown .icon-button svg {
  width: 100%;
  height: 100%;
}
.comments .dropdown .items {
  left: unset !important;
  right: 0px !important;
  padding: 8px;
  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.comments .dropdown .items a {
  width: 104px;
  padding: 8px 12px 7px;
  border-radius: 4px;
}
.comments .dropdown .items a:hover {
  background-color: var(--color-primary-100);
  color: var(--color-primary);
}
.comments .comment-modify .buttons {
  margin-top: 16px;
}
.comments .comment-modify .buttons .button {
  min-width: 64px;
}
.comments .flag-my .dropdown {
  display: block;
}
.comments .flag-modify {
  gap: 16px;
}
.comments .flag-modify .dropdown,
.comments .flag-modify .comment-text,
.comments .flag-modify .date {
  display: none;
}
.comments .flag-modify .comment-modify {
  display: block;
}

.filters {
  display: flex;
  gap: 28px;
  padding: 16px 32px;
  border: 1px solid #e6e6e6;
  background-color: #fafafa;
}
.filters.type-row7 .ox-group {
  gap: 20px 24px;
}
.filters.type-row7 .ox {
  width: 119px;
}
.filters .title {
  min-width: 84px;
  color: #000;
  font-weight: 500;
}
.filters .ox-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 16px 16px;
}
.filters .ox {
  width: 160px;
}
.filters .ox [type=checkbox] + label,
.filters .ox [type=radio] + label {
  color: #000;
}
.filters .ox [type=checkbox]:disabled + label,
.filters .ox [type=radio]:disabled + label {
  color: #a4a4a4;
  opacity: 0.7;
  pointer-events: none;
}
.filters .buttons [type=checkbox]:disabled + label,
.filters .buttons [type=radio]:disabled + label {
  opacity: 0.7;
  pointer-events: none;
}
.filters .buttons .disabled,
.filters .buttons button:disabled {
  opacity: 0.7;
  pointer-events: none;
}
.filters .box-no-data {
  width: 100%;
}

.filter-wrap {
  margin-bottom: 24px;
}
.filter-wrap .banner {
  display: block;
  position: relative;
  line-height: 0;
  border-color: #e6e6e6;
  border-width: 1px 1px 0 1px;
  border-style: solid;
}
.filter-wrap .banner[href*="void(0)"]{
  cursor:initial;
}
.filter-wrap .banner-inner {
  position: absolute;
  top: 50%;
  left: 72px;
  line-height: 1.5;
  transform: translateY(-50%);
}
.filter-wrap .banner-inner h3 {
  max-width: 610px;
}
.filter-wrap .banner-inner .desc {
  margin-top: 8px;
  max-width: 580px;
}
.filter-wrap .filters + .filters {
  margin-top: -1px;
}
.filter-wrap + .board-items.type-card {
  margin-top: 56px;
}

.filter-items {
  display: flex;
  align-items: flex-start;
  gap: 0 24px;
  padding: 16px 24px;
  border-color: #e6e6e6;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  background-color: var(--color-primary-50);
}
.filter-items .inner-wrap {
  min-height: 36px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.filter-items .item {
  display: flex;
  font-size: 12px;
  line-height: 1;
}
.filter-items .item .button {
  margin-left: 3px;
}
.filter-items .item .button svg {
  color: #838383;
}
.filter-items > .button {
  font-weight: 500;
}
.filter-items .button.type-text:hover,
.filter-items .button.type-text:focus,
.filter-items .button.type-text.active {
  color: #000;
}

.inner-header {
  margin-bottom: 12px;
}
.inner-header h3, .inner-header h4, .inner-header h5 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.inner-header h3 {
  margin-top: 56px;
}
.inner-header h4 {
  margin-top: 40px;
}
.inner-header h5 {
  margin-top: 24px;
}
.inner-header.is-extra {
  display: flex;
  align-items: baseline;
}

.info-media {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  position: absolute;
  bottom: 8px;
  right: 8px;
  border-radius: 6px;
}
.info-media img {
  margin-right: 0;
}
.info-media .time {
  padding: 4px 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.form-group {
  display: flex;
  align-items: center;
  gap: 24px;
}
.form-group.gutter-md {
  gap: 8px;
}
.form-group .forms {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.slider-view-auto {
  background-color: #E6F4F4;
  position: relative;
}
.slider-view-auto > .slider-header {
  max-width: 1320px;
  margin: 0 auto;
  padding-right: 1056px;
}
.slider-view-auto > .slider-header h2 {
  font-size: 24px;
  margin-top: 4px;
}
.slider-view-auto > .slider-header button {
  margin-top: 8px;
}
.slider-view-auto > .slider-header .text-primary {
  font-weight: 500;
}
.slider-view-auto .buttons {
  margin-bottom: 22px;
}
.slider-view-auto .slides {
  position: absolute;
  top: 0px;
  left: calc((100% - 1320px) / 2 + 270px);
  right: 0;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}
.slider-view-auto .slides.move .swiper-wrapper {
  gap: 0px;
}
.slider-view-auto .slides.move .swiper-button-prev,
.slider-view-auto .slides.move .swiper-button-next {
  display: inline-block;
}
.slider-view-auto .swiper-button-prev,
.slider-view-auto .swiper-button-next {
  display: none;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  opacity: 1;
  z-index: 4;
}
.slider-view-auto .swiper-button-prev:hover, .slider-view-auto .swiper-button-prev:focus,
.slider-view-auto .swiper-button-next:hover,
.slider-view-auto .swiper-button-next:focus {
  color: white;
}
.slider-view-auto .swiper-button-prev {
  left: 0;
}
.slider-view-auto .swiper-button-next {
  left: 1032px;
}
.slider-view-auto .swiper-slide {
  position: relative;
  transition: all 500ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
}
.slider-view-auto .swiper-slide:hover, .slider-view-auto .swiper-slide:focus {
  -moz-box-shadow: 3px 12px 12px 0px rgba(0, 80, 78, 0.2);
  -webkit-box-shadow: 3px 12px 12px 0px rgba(0, 80, 78, 0.2);
  box-shadow: 3px 12px 12px 0px rgba(0, 80, 78, 0.2);
}
.slider-view-auto.type-bookmark {
  margin-top: 0px;
  padding: 30px 0 40px;
}
.slider-view-auto.type-bookmark .swiper-slide {
  width: 120px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  min-height: 155px;
  height: 100%;
  background-color: #c4eae9;
  padding: 10px;
  margin-left: 18px;
  margin-right: 2px;
}
.slider-view-auto.type-bookmark .swiper-slide:hover .overlay, .slider-view-auto.type-bookmark .swiper-slide:focus .overlay {
  display: flex;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4); /* (1457) 24-10-17 ai class 버튼 추가 */
}
.slider-view-auto.type-bookmark .icon {
  width: 32px;
  height: 32px;
}
.slider-view-auto.type-bookmark .cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slider-view-auto.type-bookmark .item-inner {
  width: 100%;
  font-size: 11px;
}
.slider-view-auto.type-bookmark .title {
  font-weight: 500;
  font-size: 13px;
  color: #414141;
  margin-bottom: 3px;
  line-height: 16px;
}
.slider-view-auto.type-bookmark .overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.slider-view-auto.type-card {
  margin-bottom: 68px;
  padding: 40px 0;
  min-height: 250px;
  background-color: #F0F5F5;
}
.slider-view-auto.type-card h2 {
  max-width: 140px;
  font-size: 20px;
  font-weight: 500;
}
.slider-view-auto.type-card .button {
  margin-top: 28px;
}
.slider-view-auto.type-card .slides {
  top: 0px;
  left: calc((100% - 1320px) * 0.5 + 206px);
  right: calc((100% - 1320px) * 0.5 - 18px);
  padding-bottom: 20px;
  padding-left: 18px;
  padding-right: 18px;
}
.slider-view-auto.type-card .slides.move {
  padding-left: 0;
}
.slider-view-auto.type-card .swiper-slide {
  position: relative;
  background: #fff;
  width: 200px;
  margin-left: 18px;
  margin-right: 6px;
  -moz-box-shadow: 0px 10px 10px 0px rgba(0, 80, 78, 0.05);
  -webkit-box-shadow: 0px 10px 10px 0px rgba(0, 80, 78, 0.05);
  box-shadow: 0px 10px 10px 0px rgba(0, 80, 78, 0.05);
}
.slider-view-auto.type-card .swiper-slide:after {
  position: absolute;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  content: "";
  border: 2px solid var(--color-primary);
}
.slider-view-auto.type-card .swiper-slide .inner-wrap {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100px;
}
.slider-view-auto.type-card .swiper-slide:hover:after, .slider-view-auto.type-card .swiper-slide:focus:after {
  display: block;
}
.slider-view-auto.type-card .swiper-button-next {
  left: 1096px;
}
.slider-view-auto.type-card .title {
  font-size: 14px;
  font-weight: 500;
  color: #626262;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.slider-view-auto.type-card .desc {
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slider-view-auto.type-card .summary {
  margin-top: auto;
}
.slider-view-auto.type-card .image-wrap {
  height: 112px;
  border-radius: inherit;
}

.font-weight-500 .title {
  font-weight: 500 !important;
}

.nav-slider {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.nav-slider::before, .nav-slider::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 75px;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#fafafa",GradientType=1 );
  z-index: 2;
}
.nav-slider::before {
  left: 0;
  background: -moz-linear-gradient(left, #fafafa 0%, #fafafa 40%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, #fafafa 0%, #fafafa 40%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(90deg, #fafafa 0%, #fafafa 40%, rgba(255, 255, 255, 0) 100%);
}
.nav-slider::after {
  right: 0;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fafafa 60%, #fafafa 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fafafa 60%, #fafafa 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fafafa 60%, #fafafa 100%);
}
.nav-slider.type-filter {
  padding: 20px 82px;
  border-bottom: 1px solid #d2d2d2;
  background-color: #fafafa;
}
.nav-slider.type-filter .swiper-slide label {
  padding-top: 6px;
  padding-bottom: 8px;
  border-color: var(--color-primary-100);
  background-color: var(--color-primary-100);
  color: #a4a4a4;
  font-weight: 500;
}
.nav-slider.type-filter .swiper-slide [type=checkbox]:checked + label,
.nav-slider.type-filter .swiper-slide [type=radio]:checked + label {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}
.nav-slider .swiper-wrapper {
  flex-wrap: nowrap;
}
.nav-slider .swiper-wrapper .swiper-slide {
  width: auto;
}
.nav-slider .swiper-button {
  top: 50%;
  width: 36px;
  height: 36px;
  color: #000;
  border: 1px solid #e6e6e6;
  border-radius: 100%;
  background-color: #fff;
  transform: translateY(-50%);
  box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.05);
  z-index: 4;
}
.nav-slider .swiper-button:hover {
  background-color: #f6f6f6;
}
.nav-slider .swiper-button::after {
  display: none;
}
.nav-slider .swiper-button svg {
  width: 14px;
  height: auto;
}
.nav-slider .swiper-button-prev {
  left: 30px;
}
.nav-slider .swiper-button-next {
  right: 30px;
}
.nav-slider .swiper-button-disabled {
  border-color: #d2d2d2;
  background-color: #e6e6e6;
  color: #a4a4a4;
  opacity: 1;
}
.wrapper-lesson .nav-slider {
  display:none;
}
.wrapper-lesson .nav-slider.swiper-initialized.type-filter .buttons{
  gap:0;
}
.wrapper-lesson .nav-slider.type-filter .buttons span{
  margin:0;
}
.wrapper-lesson .nav-slider .swiper-button-lock{
  display:block;
}
.wrapper-lesson .nav-slider .swiper-button-lock svg{
  height:100%;
}
.wrapper-lesson .nav-slider.type-filter.no_slide{
  padding:20px 30px;
}
.wrapper-lesson .nav-slider.no_slide::before, .nav-slider.no_slide::after{
  display:none;
}
.wrapper-lesson .nav-slider.no_slide .swiper-button{
  display:none;
}
.scrollable-container, .popup-container > form, .iframe-container > form, .popup-container.no-body-scroll .body, .no-body-scroll.iframe-container .body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0; /* NEW */
  min-width: 0;
}

.scrollable {
  overflow: auto;
}

.slider-overflow {
  position: relative;
}
.slider-overflow .slides {
  overflow-x: hidden;
}
.slider-overflow .swiper-button-prev,
.slider-overflow .swiper-button-next {
  top: 50%;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.08);
  z-index: 4;
}
.slider-overflow .swiper-button-prev:hover, .slider-overflow .swiper-button-prev:focus,
.slider-overflow .swiper-button-next:hover,
.slider-overflow .swiper-button-next:focus {
  color: #fff;
}
.slider-overflow .swiper-button-prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.slider-overflow .swiper-button-next {
  right: 0;
  transform: translate(50%, -50%);
}
.slider-overflow .swiper-button-disabled {
  opacity: 1;
}

.video-box {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.video-box video {
  width: 100%;
}

.youtube-box, .video_frm {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  padding-bottom: 56.25%;
  width: 100%;
  height: 0;
  border-radius: 4px;
}
.youtube-box iframe, .video_frm iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.media-fullpage {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  width: 100vw;
  min-height: 100vh;
}

.share-sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.share-sns .button {
  min-width: 60px;
  min-height: 60px;
}
.share-sns .button img {
  width: 100%;
}

.audio-box {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 25px 10px 10px;
  background-color: #000;
}

#main-contents .audio-box + .utility-box {
  padding-top: 8px;
  padding-bottom: 8px;
}

.textbook-intro {
  display: flex;
  border: 1px solid #e6e6e6;
  margin-bottom: 30px;
}
.textbook-intro .textbook-wrap {
  flex-grow: 1;
  display: flex;
  gap: 22px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 14px;
  padding-right: 14px;
  border-right: 1px solid #e6e6e6;
}
.textbook-intro .book-link {
  flex-shrink: 0;
  width: 150px;
  height: 194px;
  background: url("/assets/images/common/img-no-data-8fdc13af07b04363d0de596930a94eb4.png") center center no-repeat #E8F6F6;
  background-size: 100%;
  border:1px solid rgba(0, 0, 0, 0.1);
}
.textbook-intro .book-link img {
  width: 100%;
  height: 100%;
}
.textbook-intro .book-link .ebook-box {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 100%;
  text-align: center;
}
.textbook-intro .book-link .ebook-box > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 100%;
}
.textbook-intro .book-link .ebook-box p {
  display: none;
  margin-top: 4px;
}
.textbook-intro .book-link .ebook-box svg {
  position: relative;
  width: 24px;
  height: 24px;
  color: #fff;
}
.textbook-intro .book-link.is-ebook {
  position: relative;
}
.textbook-intro .book-link.is-ebook .ebook-box {
  display: block;
}
.textbook-intro .book-link.is-ebook::after {
  display: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.textbook-intro .book-link.is-ebook:hover::after {
  display: block;
}
.textbook-intro .book-link.is-ebook:hover > .ebook-box p {
  display: block;
}
.textbook-intro .book-link.is-ebook:hover > .ebook-box > span {
  width: 24px;
  height: 24px;
  background-color: transparent;
}
.textbook-intro .info-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.textbook-intro .info-inner {
  line-height: 0;
}
.textbook-intro .info-inner .title {
  margin-top: 6px;
  margin-bottom: 8px;
}
.textbook-intro .info-inner .title .divider-group li::before, .textbook-intro .info-inner .title .page-header ul li::before, .page-header .textbook-intro .info-inner .title ul li::before {
  height: 25px;
}
.textbook-intro .info-buttons {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 24px;
}
.textbook-intro .info-buttons > .button {
  flex-shrink: 0;
}
.textbook-intro .info-buttons .buttons {
  gap: 4px;
}
.textbook-intro .info-buttons .buttons .button.size-md {
  min-width: 87px;
}
.textbook-intro .break-line {
  margin-top: 12px;
}
.textbook-intro .info-buttons .buttons .button.type-primary-light{
  border:1px solid #d2d2d2;
}
/* .textbook-intro .type-primary svg {
  color: var(--color-primary);
} */

.special-data-wrap {
  flex-shrink: 0;
  width: 278px;
  overflow: hidden;
  padding: 30px;
  background-color: #f6f6f6;
}
.special-data-wrap .buttons {
  margin-top: 30px;
}

.special-data-wrap {
  flex-shrink: 0;
  width: 278px;
  overflow: hidden;
  padding: 30px;
  background-color: var(--color-primary-50);
}
.special-data-wrap .title {
  font-size: 15px;
  font-weight: bold;
  color: #000;
}

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

.special-data-pagination {
  display: flex;
  gap: 4px;
}
.special-data-pagination button {
  width: 20px;
  height: 20px;
}
.special-data-pagination button svg {
  width: 100%;
  height: 100%;
  color: #a4a4a4;
}
.special-data-pagination button:not(:disabled):hover svg {
  color: #000;
}

.special-data-body {
  width: 100%;
  height: 100%;
  margin-top: 16px;
}
.special-data-body .swiper-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: calc((100% - 16px) / 4);
  color: #626262;
  border-bottom: 1px solid #e6e6e6;
}
.special-data-body .swiper-slide:last-child, .special-data-body .swiper-slide:nth-child(4n) {
  border-bottom: none;
}
.special-data-body .swiper-slide:hover {
  color: #000;
}
.special-data-body .swiper-slide .ellipsis-single{
  flex:1;
  padding-right:10px;
}
.special-data-body .swiper-slide svg {
  width: 16px;
  height: 16px;
}

.board-list {
  margin-top: 24px;
  margin-bottom: 32px;
  padding-top: 24px;
  padding-bottom: 32px;
  border-color: #e6e6e6;
  border-width: 1px 0;
  border-style: solid;
}
.board-list.no-line {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}
.board-list.no-bottom-line {
  border-bottom: none;
}
.board-list.no-top-line {
  padding-top: 0;
  border-top: none;
}
.board-list .sort {
  display: flex;
  justify-content: space-between;
}
.board-list .sort-inner {
  display: inline-flex;
  align-items: center;
}
.board-list .sort-group {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.board-list .sort-group.extra {
  text-align: left;
}
.board-list .type-vertical .item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.board-list .mchive-gallery .item .image-wrap .icon {
  position: absolute;
  top: 8px;
  left: 8px;
}
.board-list .mchive-gallery .item .image-wrap .time {
  font-size: 10px;
}
.board-list .mchive-gallery .item .image-wrap .overlay .divider-group, .board-list .mchive-gallery .item .image-wrap .overlay .page-header ul, .page-header .board-list .mchive-gallery .item .image-wrap .overlay ul {
  justify-content: center;
  align-content: center;
  gap: 4px 0;
  margin-bottom: 0;
  color: #fff;
}
.board-list .mchive-gallery .item .image-wrap .overlay .divider-group li::after, .board-list .mchive-gallery .item .image-wrap .overlay .page-header ul li::after, .page-header .board-list .mchive-gallery .item .image-wrap .overlay ul li::after {
  background: url("/assets/images/common/icon-chevron-right-white-15fee97ae2195890f1fb0cc40187c479.svg") 100% center center;
  transform: translate(0);
}
.board-list .mchive-gallery .item .ox-bookmark {
  left: unset;
  right: 8px;
}
.board-list .mchive-gallery .item .title {
  font-weight: 500;
}
.board-list .mchive-gallery .item .grades {
  font-weight: 700;
}
.board-list .mchive-list {
  display: block;
}
.board-list .mchive-list .item {
  align-items: center;
  flex-direction: row;
  gap: 40px;
  padding: 32px 0;
  border-top: 1px solid #e6e6e6;
}
.board-list .mchive-list .item:first-child {
  padding-top: 0;
  border-top: none;
}
.board-list .mchive-list .item .image-wrap {
  width: 304px;
  height: 172px;
  margin-bottom: 0;
}
.board-list .mchive-list .item .inner-wrap {
  gap: 0;
}
.board-list .mchive-list .item .inner-wrap .divider-group.type-brace li::after, .board-list .mchive-list .item .inner-wrap .page-header ul.type-brace li::after, .page-header .board-list .mchive-list .item .inner-wrap ul.type-brace li::after {
  transform: translate(0);
}
.board-list .mchive-list .item .title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.board-list .mchive-list .item .title {
  min-height: auto;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}
.board-list .mchive-list .item .title .grades {
  font-weight: 700;
}
.board-list .mchive-list .item .extra > :not(:last-child) {
  margin-right: 0;
}
.board-list .mchive-list .item .button.type-icon {
  display: inline-flex;
}
.board-list .mchive-list .item .date {
  margin-top: 24px;
  color: #838383;
}
.board-list .mchive-list .item .edit-range {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #000;
}
.board-list .mchive-list .item .url-wrap {
  display: flex;
  gap: 4px;
  margin-top: 32px;
}
.board-list .mchive-list .item .url-wrap .url {
  display: flex;
  align-items: center;
  width: 330px;
  height: 28px;
  padding: 0 8px;
  background-color: #f6f6f6;
  border-radius: 4px;
  color: #000;
  font-size: 12px;
}
.board-list .mchive-list .item .url-wrap .url .icon,
.board-list .mchive-list .item .url-wrap .url strong {
  flex-shrink: 0;
}
.board-list .mchive-list .item .url-wrap .url .url-link {
  margin-left: 8px;
  color: #838383;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.board-view {
  border-top: 2px solid #000;
  margin-top: 20px;
  margin-bottom: 20px;
  /* 하단에 목록, 수정 버튼 예외처리 */
}
.board-view .header {
  padding: 24px;
  border-bottom: 1px solid #e6e6e6;
}
.board-view .board-buttons {
  justify-content: flex-end;
  margin-top: 0;
}
.board-view .button.size-xl {
  min-width: 200px;
}
.board-view .page-buttons {
  position: relative;
  margin-top: 20px;
  margin-bottom: 0;
}
.board-view .page-buttons:not(.align-right) {
  margin-top: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid #e6e6e6;
}
.board-view .board-pagination {
  margin-top: 64px;
  margin-bottom: 0;
  border-bottom: 2px solid #000;
}
.board-view .board-pagination a {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 17px 24px;
  color: #000;
  border-top: 1px solid #e6e6e6;
}
.board-view .board-pagination a span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.board-view .board-pagination a span svg {
  width: 12px;
  height: 12px;
}
.board-view .board-pagination a p {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}
.board-view .category {
  display: flex;
  align-items: center;
  margin-top: 32px;
  margin-right: auto;
  padding: 0 24px;
}
.board-view .category ul {
  flex-wrap: wrap;
  width: 100%;
}
.board-view .category ul li {
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
}
.board-view .category .writer {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  width: 20%;
  margin-left: auto;
  font-size: 12px;
}
.board-view .category .date {
  flex-shrink: 0;
  margin-left: 12px;
}
.board-view .category .date span {
  margin-left: 4px;
}
.board-view .attach-items {
  margin-top: 32px;
}
.board-view .attach-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  min-height: 56px;
  border: 1px solid #e6e6e6;
}
.board-view .attach-items li:not(:first-child) {
  border-top: none;
}
.board-view .attach-items li:hover, .board-view .attach-items li:focus {
  background-color: var(--color-primary-50);
}
.board-view .attach-items .file-name {
  flex-grow: 1;
  color: #000;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-view .attach-items .extra {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.board-view .view-body {
  width: 76.34%;
  margin: 40px auto;
}
.board-view .view-body.full {
  width: 100%;
  margin: 40px auto;
}

.board-view .view-body > :not(:first-child) {
  margin-top: 56px;
}
.board-view .view-body img {
  max-width: 100%;
  border-radius: 4px;
}
.board-view .editor-area {
  margin-top: 40px;
}
.board-view .editor-area p, .board-view .editor-area div {
  margin: revert;
}
.board-view .summary-box {
  padding: 28px 24px;
  border: 1px solid #e6e6e6;
  background-color: #fafafa;
  color: #000;
}
.board-view .card-news {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.board-view .card-news li {
  width: calc(20% - 16px);
}
.board-view .combo-box {
  padding: 32px 40px;
  background-color: var(--color-primary-50);
}
.board-view .combo-box li {
  line-height: 1.75;
}
.board-view .source-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding: 24px 40px;
  background-color: var(--color-primary-50);
}
.board-view .delete-button {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.recommend {
  margin-top: 44px;
}
.recommend .board-items {
  margin-top: 24px;
}

/* _board-items.scss */
.board-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(235px, 1fr));
  grid-column-gap: 36px;
  grid-row-gap: 56px;
  margin-top: 32px;
}
.board-items.type-cols-5 {
  grid-template-columns: repeat(5, minmax(235px, 1fr));
}
.board-items .item {
  position: relative;
  display: flex;
  flex-direction: column;
}
.board-items .item:hover .image-wrap img {
  transform: scale(1.05);
  transition: all 500ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
}
.board-items .item .image-wrap {
  height: 132px;
}
.board-items .item.size-auto .image-wrap {
  height: unset;
  min-height: 126px;
}
.board-items .item.size-textbook .image-wrap {
  height: 330px;
  min-height: 126px;
}
.board-items .ox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
}
.board-items .image-wrap {
  display: inline-block;
  margin-bottom: 12px;
  width: 100%;
}
.board-items .image-wrap:hover .overlay {
  display: flex;
}
.board-items .inner-wrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 16px 16px;
}
.board-items .text-wrap a {
  display: block;
}
.board-items .text-wrap a:hover {
  text-decoration: underline;
}
.board-items .text-wrap .desc {
  min-height: 42px;
}
.board-items .source-wrap {
  display: flex;
  flex-direction: column;
}
.board-items .divider-group, .board-items .page-header ul, .page-header .board-items ul {
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.board-items .divider-group li, .board-items .page-header ul li, .page-header .board-items ul li {
  font-size: 12px;
  line-height: 1;
}
.board-items .divider-group li::before, .board-items .page-header ul li::before, .page-header .board-items ul li::before {
  height: 9px;
}
.board-items .title {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 42px;
  color: #000;
  font-weight: 500;
  white-space: normal;
  word-break: keep-all;
  position: relative;
}
.board-items .desc {
  margin-top: 8px;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-items .subject {
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid #e6e6e6;
}
.board-items .subject .badges:last-child {
  margin-bottom: 0;
}
.board-items .badges {
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 4px;
}
.board-items .badges .desc {
  margin-top: 0;
  font-size: 12px;
  -webkit-line-clamp: 1;
}
.board-items .tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  max-height: 46px;
  overflow: hidden;
}
.board-items .source {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board-items .overlay {
  display: none;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.board-items .overlay .divider-group, .board-items .overlay .page-header ul, .page-header .board-items .overlay ul {
  gap: 32px;
}
.board-items .overlay .divider-group .button, .board-items .overlay .page-header ul .button, .page-header .board-items .overlay ul .button {
  width: 40px;
  height: 40px;
}
.board-items .overlay .divider-group .button::before, .board-items .overlay .page-header ul .button::before, .page-header .board-items .overlay ul .button::before {
  left: -16px;
  height: 35px;
  background-color: rgba(255, 255, 255, 0.3);
}
.board-items .overlay .divider-group .button svg, .board-items .overlay .page-header ul .button svg, .page-header .board-items .overlay ul .button svg {
  width: 100%;
  height: 100%;
  color: #fff;
}
.board-items .ebook {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}
.board-items .ebook .image-wrap {
  flex-grow: 1;
  margin-bottom: 0;
  min-height: 308px;
  border-radius: 0;
  background-image: url("/assets/images/common/img-no-ebook-75fdf3d76cc4ca2615bcc47d47bb4e09.png");
}
.board-items .ebook .title {
  margin-top: 10px;
  margin-bottom: 12px;
  margin-left: 12px;
  margin-right: 11px;
  min-height: auto;
  font-size: 18px;
  text-align: center;
  -webkit-line-clamp: 1;
}
.board-items .ebook .button {
  min-height: 48px;
}
.board-items .ebook .divider-group, .board-items .ebook .page-header ul, .page-header .board-items .ebook ul {
  margin-bottom: 0;
}
.theme-elementary .board-items .ebook .image-wrap img {
  max-width: 100%;
}
.board-items.type-vertical {
  display: block;
}
.board-items.type-vertical .item {
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e6e6e6;
}
.board-items.type-vertical .item.size-auto .image-wrap {
  min-height: 162px;
}
.board-items.type-vertical .image-wrap {
  width: 304px;
  height: 172px;
  margin-bottom: 0;
}
.board-items.type-vertical .inner-wrap {
  flex-direction: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  position: relative;
  width: 100%;
}
.board-items.type-vertical .text-wrap {
  order: 1;
  flex: 1 1 25%;
  margin-bottom: 0;
  width: 25%;
}
.board-items.type-vertical .title {
  min-height: auto;
  -webkit-line-clamp: 1;
}
.board-items.type-vertical .desc {
  margin-top: 4px;
  -webkit-line-clamp: 1;
}
.board-items.type-vertical .source-wrap {
  order: 3;
  width: 100%;
}
.board-items.type-vertical .subject {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.board-items.type-vertical .board-buttons {
  order: 2;
  justify-content: flex-end;
  margin-top: unset;
}
.board-items.type-vertical + .pagination {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.board-items.type-grid {
  grid-row-gap: 24px;
}
.board-items.type-grid .item:first-child {
  grid-column: 1/span 2;
  grid-row: 1/span 2;
}
.board-items.type-grid .item:first-child .image-wrap {
  margin-bottom: 20px;
  height: 284px;
}
.board-items.type-grid .item:first-child .image-wrap img {
  width: 100%;
}
.board-items.type-grid .item:first-child .text-wrap .divider-group li, .board-items.type-grid .item:first-child .text-wrap .page-header ul li, .page-header .board-items.type-grid .item:first-child .text-wrap ul li {
  font-size: 14px;
}
.board-items.type-grid .item:first-child .title {
  min-height: auto;
  font-size: 16px;
}
.board-items.type-grid .item:first-child .desc {
  margin-top: 16px;
  font-size: 16px;
}
.board-items.type-grid .item:first-child .info-media .time {
  padding: 4px 8px 6px;
  font-size: 14px;
}
.board-items.type-card {
  display: block;
  padding: 40px 32px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.board-items.type-card:nth-child(n+2) {
  margin-top: 24px;
}
.board-items.type-card .items-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.board-items.type-card .items-header p {
  margin-top: 16px;
  margin-bottom: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e6e6e6;
}
.board-items.type-card .items-header + .item {
  margin-top: 24px;
}
.board-items.type-card .item {
  flex-direction: row;
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e6e6e6;
}
.board-items.type-card .item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: unset;
}
.board-items.type-card .image-wrap {
  width: 304px;
  min-height: 172px;
  margin-bottom: 0;
}
.board-items.type-card .inner-wrap {
  flex-direction: inherit;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  position: relative;
  width: 100%;
}
.board-items.type-card .text-wrap {
  flex: 1 1 25%;
  margin-bottom: 0;
  width: 25%;
}
.board-items.type-card .title {
  min-height: auto;
  -webkit-line-clamp: 1;
}
.board-items.type-card .desc {
  margin-top: 4px;
}
.board-items.type-card .source-wrap {
  margin-top: 8px;
  width: 100%;
}
.board-items.type-card .board-buttons {
  justify-content: flex-start;
  margin-top: 20px;
  width: 100%;
}
.board-items.type-card .board-buttons .lesson {
  margin-left: auto;
}

.board-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
  margin-top: auto;
}

.event-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(315px, 1fr));
  min-height: 420px;
  grid-gap: 20px;
  margin-top: 32px;
}
.event-items .item {
  overflow: hidden;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
}
.event-items .item.end .overlay {
  display: block;
}
.event-items .image-wrap {
  height: 177px;
  text-align: left;
}
.event-items .overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 20px;
  padding-left: 24px;
  background-color: rgba(0, 0, 0, 0.3);
}
.event-items .overlay .badge {
  position: static;
}
.event-items .inner-wrap {
  padding: 16px 24px 24px;
}
.event-items .inner-wrap .title {
  color: #000;
  font-weight: bold;
}
.event-items .text-wrap {
  margin-top: 12px;
}
.event-items .text-wrap p {
  width: 100%;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-items .info-date {
  margin-top: 20px;
}
.event-items .button {
  margin-top: 16px;
}

.chapter-items > li {
  border: 1px solid #e6e6e6;
}
.chapter-items > li:not(:first-of-type) {
  margin-top: 10px;
}
.chapter-items li.active .badge {
  background-color: var(--color-primary);
}
.chapter-items .chapter-depth {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #000;
  border-top: 1px solid #e6e6e6;
  gap: 10px;
  padding-top: 15px;
  padding-bottom: 14px;
  padding-left: 30px;
  padding-right: 30px;
}
.chapter-items .chapter-depth .badge {
  background-color: #b0b2b4;
  transition: all 150ms cubic-bezier(0.17, 0.67, 0.6, 0.93);
}
.chapter-items .chapter-depth h5 {
  font-size: 14px;
}
.chapter-items .chapter-depth:hover {
  background-color: #f6f6f6;
}
.chapter-items .chapter-depth.type-middle,
.chapter-items .chapter-depth.type-high{
  background-color: var(--color-primary-200-70per); /* 1541 */

}
.chapter-items .chapter-depth.type-middle .title {
  font-size: 16px;
}
.chapter-items .chapter-depth.type-small {
  background-color: var(--color-primary-200-30per); /* 1541 */
}
.chapter-items .chapter-depth.type-small .title {
  font-size: 16px;
}
.chapter-items .hour-list {
  background-color: #fff;
  padding: 0 30px;
  border-top: 1px solid #e6e6e6;
}
.chapter-items .hour-list > li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
  gap: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.chapter-items .hour-list > :last-child {
  border-bottom: none;
}
.chapter-items .hour-list .title {
  font-size: 14px;
  color: #000;
}
.chapter-items .total {
  font-weight: 400;
  color: #838383;
  border-left: 1px solid #d2d2d2;
  padding-left: 10px;
}
.chapter-items .total strong {
  vertical-align: baseline;
}
.chapter-items .box-no-data,
.chapter-items .box-no-file { /* 1541 */
  border-top: 1px solid #e6e6e6;
}

.number-pages {
  display: inline-flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.number-pages .badge {
  font-weight: 400;
  font-size: 12px;
  padding-left: 10px;
  padding-right: 10px;
}
.number-pages > :not(:first-child) {
  position: relative;
}
.number-pages > :not(:first-child)::before {
  position: absolute;
  display: inline-block;
  content: "";
  background-color: #e6e6e6;
  width: 1px;
  left: 0px;
  top: 5px;
  bottom: 5px;
}

/* _chapter-list.scss */
.chapter-wrap {
  padding: 10px 30px;
}
.chapter-wrap.type-outlined {
  border: 1px solid var(--color-primary);
}
.chapter-wrap .utility {
  margin: 10px 0 5px;
  line-height: 1;
  text-align: right;
}
.chapter-wrap .utility .toggle-group .button:first-child svg {
  width: 12px;
  height: 12px;
}
.chapter-wrap .page-buttons .button {
  padding-left: 29px;
  padding-right: 29px;
}

.chapter-list.type-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 30px;
  margin: 20px 0 40px;
}
.chapter-list.type-gallery .item {
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding: 0;
  border-bottom: 0;
}
.chapter-list.type-gallery .ox {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
}
.chapter-list.type-gallery .image-wrap {
  display: block;
}
.chapter-list.type-gallery .inner-wrap {
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  height: 100%;
}
.chapter-list.type-gallery .text-wrap {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.chapter-list.type-gallery .text-wrap .extra img {
  display: none;
}
.chapter-list.type-gallery .divider-group, .chapter-list.type-gallery .page-header ul, .page-header .chapter-list.type-gallery ul {
  order: 2;
}
.chapter-list.type-gallery .title {
  font-weight: 500;
  -webkit-line-clamp: 2;
}
.chapter-list .item {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #e6e6e6;
}
.chapter-list .item:last-child {
  border-bottom: 0;
}
.chapter-list .ox {
  margin-right: 5px;
}
.chapter-list .ox ~ .inner-wrap .text-wrap img {
  margin-left: 10px;
  width: 20px;
  height: 20px;
}
.chapter-list .inner-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
}
.chapter-list .text-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #414141;
}
.chapter-list .text-wrap img {
  border-radius: 2px;
}
.chapter-list .extra {
  display: inline-flex;
  align-items: center;
  text-align: left;
}
.chapter-list .divider-group, .chapter-list .page-header ul, .page-header .chapter-list ul {
  min-width: 130px;
}
.chapter-list .divider-group li, .chapter-list .page-header ul li, .page-header .chapter-list ul li {
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
}
.chapter-list .title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size:14px;
  color: #414141;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: initial;
}
.chapter-list .title strong {
  font-weight: 500;
  vertical-align: unset;
}
.chapter-list .buttons {
  flex-shrink: 0;
  gap: 8px;
}
.chapter-list .image-wrap {
  display: none;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
.chapter-list .image-wrap .extra {
  align-items: stretch;
  overflow: hidden;
  position: absolute;
  right: 8px;
  bottom: 8px;
  border-radius: 6px;
}
.chapter-list .image-wrap .extra img {
  margin-right: 0;
}
.chapter-list .time {
  padding: 4px 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}

.wrapper-lesson {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  overflow: hidden;
  height: 100vh;
  padding-top: 51px;
  padding-bottom: 81px;
  box-sizing: border-box;
}
.wrapper-lesson main {
  position: relative;
  padding: 24px 0;
}
.wrapper-lesson .contents-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  position: relative;
  margin-bottom: 24px;
  padding: 0 60px;
  width: 100%;
  min-width: 1320px;
  z-index: 101;
}
.wrapper-lesson .contents-header .header-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wrapper-lesson .contents-header .buttons {
  flex-shrink: 0;
}

.period-header {
  position: fixed;
  top: 0;
  padding: 12px 0;
  width: 100%;
  min-width: 1320px;
  border-bottom: 1px solid #d2d2d2;
  background-color: #fff;
  box-shadow: 0px 4px 50px 0px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.period-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 60px;
}
.period-inner .buttons {
  flex-shrink: 0;
}

.period-footer {
  position: fixed;
  bottom: 0;
  padding: 17px 0;
  width: 100%;
  min-width: 1320px;
  border-top: 1px solid #e6e6e6;
  background-color: #fff;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}
.period-footer .buttons .button {
  min-width: 140px;
}

.period-contents {
  display: flex;
  gap: 24px;
  position: relative;
  min-width: 1320px;
  min-height: 0; /* NEW */
  padding: 0 60px;
}
.period-contents section {
  flex: 1 1 40%;
  border-color: var(--color-secondary);
  border-width: 0 1px 1px;
  border-style: solid;
  background-color: #fff;
}
.period-contents section.type-primary {
  border-color: var(--color-primary);
}
.period-contents section.type-primary .lesson-header {
  background-color: var(--color-primary);
}
.period-contents .buttons {
  flex-shrink: 0;
}
.period-contents .filters {
  justify-content: space-between;
  padding: 20px 30px;
  border-width: 0 0 1px;
  border-color: #d2d2d2;
}
.period-contents .filters .buttons:not(:first-child) {
  align-items: center;
}
.period-contents .tooltip-button {
  width: 26px;
  height: 26px;
}

.lesson-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  background-color: var(--color-secondary);
}
.lesson-header h3 {
  color: #fff;
}
.lesson-header .input-inner-extra {
  min-width: 192px;
}

.lesson-items {
  padding: 30px;
}
.lesson-items .item {
  position: relative;
  padding-left: 108px;
  padding-bottom: 40px;
}
.lesson-items .item::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 78px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-primary);
  border-radius: 100%;
  background-color: #fff;
  z-index: 1;
}
.lesson-items .item::after {
  content: "";
  position: absolute;
  top: 49px;
  left: 82px;
  width: 2px;
  height: calc(100% + 32px);
  background-color: var(--color-primary);
}
.lesson-items .item:last-child {
  padding-bottom: 0;
}

.sub-lessons {
  padding: 30px;
  border-bottom: 1px solid #e6e6e6;
}
.sub-lessons:last-child {
  border-bottom: unset;
}
.sub-lessons h4 {
  margin-bottom: 20px;
}
.sub-lessons .page-buttons {
  margin: 20px 0 0;
}

.lesson-data {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lesson-data .data {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  min-height: 94px;
  border: 1px solid #e6e6e6;
  border-radius: 18px;
  background-color: white;
  color: #838383;
  text-align: left;
}
.lesson-data .data:hover, .lesson-data .data:focus, .lesson-data .data.active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-150);
}
.lesson-data .data.active-vertical, .lesson-data .data.active-horizontal {
  position: relative;
  border-color: var(--color-primary);
  background-color: var(--color-primary-150);
  box-shadow: 5px 5px 10px 0px rgba(93, 144, 149, 0.2);
}
.lesson-data .data.active-vertical::before, .lesson-data .data.active-horizontal::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-image: url("/assets/images/common/icon-chevron-up-down-ef721092fa0bdcfd24a0fbf1432d78e9.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 5px 5px 20px 0px rgba(23, 128, 125, 0.2);
  transform: translate(-50%, -50%);
}
.lesson-data .data.active-horizontal::before {
  background-image: url("/assets/images/common/icon-chevron-left-right-780b6d6d3f3933e6e94ec5f5585654ae.svg");
}
.lesson-data .data a {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
}
.lesson-data .data strong {
  color: #000;
  font-weight: 500;
}
.lesson-data .data .inner-wrap {
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
.lesson-data .data .badges {
  width: 100%;
}
.lesson-data .data .number-pages {
  flex-wrap: wrap;
}
.lesson-data .data .icon-button {
  color: #d2d2d2;
}
.lesson-data .data .title-ellipsis {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.lesson-data .data .image-wrap {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 119px;
}
.lesson-data .data .image-wrap img{
  min-height: 62px;
  max-height: 66.95px; /*16:9*/
}
.lesson-data .data .divider-group, .lesson-data .data .page-header ul, .page-header .lesson-data .data ul {
  flex-wrap: wrap;
  width: 100%;
}
.lesson-data .data .divider-group li, .lesson-data .data .page-header ul li, .page-header .lesson-data .data ul li {
  position: relative;
  padding-left: 0;
  padding-right: 18px;
  font-size: 11px;
  white-space: nowrap;
}
.lesson-data .data .divider-group li::before, .lesson-data .data .page-header ul li::before, .page-header .lesson-data .data ul li::before {
  left: -8px;
  height: 8px;
}
.lesson-data .data .divider-group li::after, .lesson-data .data .page-header ul li::after, .page-header .lesson-data .data ul li::after {
  content: "";
  position: absolute;
  top: 57%;
  right: 4px;
  width: 10px;
  height: 10px;
  background: url("/assets/images/common/icon-chevron-right-e606f83279b6adff72be7c6d04e995cc.svg") no-repeat center/contain;
  transform: translateY(-50%);
}
.lesson-data .data .divider-group li:first-child::after, .lesson-data .data .page-header ul li:first-child::after, .page-header .lesson-data .data ul li:first-child::after, .lesson-data .data .divider-group li:last-child::after, .lesson-data .data .page-header ul li:last-child::after, .page-header .lesson-data .data ul li:last-child::after {
  display: none;
}
.lesson-data .data .divider-group li:nth-child(n+3)::before, .lesson-data .data .page-header ul li:nth-child(n+3)::before, .page-header .lesson-data .data ul li:nth-child(n+3)::before {
  display: none;
}
.lesson-data .no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 20px;
  min-height: 94px;
  border: 2px dashed #e6e6e6;
  border-radius: 18px;
  background-color: #f6f6f6;
}
.lesson-data .no-data strong {
  color: #000;
  font-weight: 500;
}
.lesson-data .data-afterimage {
  padding: 16px 20px;
  min-height: 94px;
  border: 2px dashed #e6e6e6;
  border-radius: 18px;
  background-color: #f6f6f6;
}

.period-float {
  position: fixed;
  bottom: 81px;
  left: 0;
  width: 100%;
  min-width: 1320px;
  z-index: 100;
}
.period-float .float-inner {
  display: none;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  padding: 0 60px;
  height: 80px;
  border-top: 1px solid #fff;
  background-color: rgba(239, 239, 239, 0.8);
  backdrop-filter: blur(10px);
}
.period-float .float-inner.active {
  display: flex;
}
.period-float .float-inner.active + .float-button {
  bottom: 108px;
}
.period-float .float-inner h4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.period-float .float-inner .button {
  min-width: 168px;
}

.other-lesson .other-items {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  padding-top: 18px;
}
.other-lesson .dimd, .other-lesson html.header-overlay .gnb-dim, html.header-overlay .other-lesson .gnb-dim {
  top: 18px;
  height: 100vh;
}
.other-lesson .item-wrap {
  display: flex;
  position: absolute;
  padding: 0 60px;
  width: 100%;
  min-width: 1320px;
  background-color: #fff;
  z-index: 1;
}
.other-lesson .item-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--color-primary);
}
.other-lesson .item,
.other-lesson .sub-item {
  flex-grow: 5;
  flex-basis: 50%;
  position: relative;
}
.other-lesson .item.grow-2,
.other-lesson .sub-item.grow-2 {
  flex-grow: 2;
  flex-basis: 20%;
  max-width: 230px;
}
.other-lesson .item.grow-3,
.other-lesson .sub-item.grow-3 {
  flex-grow: 3;
  flex-basis: 30%;
}
.other-lesson .item.grow-4,
.other-lesson .sub-item.grow-4 {
  flex-grow: 4;
  flex-basis: 40%;
}
.other-lesson .item strong,
.other-lesson .sub-item strong {
  display: flex;
  align-items: center;
  padding: 20px;
  height: 70px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
}
.other-lesson .item a,
.other-lesson .sub-item a {
  display: block;
  position: relative;
  color: #626262;
  word-break: normal;
}
.other-lesson .item a:hover, .other-lesson .item a.active,
.other-lesson .sub-item a:hover,
.other-lesson .sub-item a.active {
  color: var(--color-primary);
  font-weight: 700;
}
.other-lesson .item .depth-2,
.other-lesson .sub-item .depth-2 {
  padding: 40px 0;
  height: 376px;
  border-right: 1px solid #e6e6e6;
}
.other-lesson .item a {
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 20px;
  padding-right: 44px;
}
.other-lesson .item a:hover, .other-lesson .item a.active {
  background-color: var(--color-primary-100);
}
.other-lesson .item a:hover::after, .other-lesson .item a.active::after {
  content: "";
}
.other-lesson .item a::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-primary) url("/assets/images/common/icon-chevron-right-white-15fee97ae2195890f1fb0cc40187c479.svg") no-repeat center/contain;
  transform: translateY(-50%);
}
.other-lesson .sub-item:last-of-type strong {
  border-right: none;
}
.other-lesson .sub-item:last-of-type .depth-2 {
  border-right: none;
}
.other-lesson .sub-item a {
  padding: 10px 20px;
}
.other-lesson .sub-item a:first-child {
  padding-top: 0;
}
.other-lesson .sub-item a:last-child {
  padding-bottom: 0;
}
.other-lesson .close-button {
  position: absolute;
  bottom: 0;
  right: 60px;
  padding: 6px 37px 6px 16px;
  background: #fff url("/assets/images/common/icon-closed-1f656028013c7507c2c4e301d5ae5f45.svg") no-repeat right 16px center/16px 16px;
  color: #000;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(100%);
}

.period-slider {
  width: 725px;
  position: relative;
  overflow: hidden;
  padding-left: 52px;
  padding-right: 0;
}
.period-slider::before, .period-slider::after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  width: 20px;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#ffffff", endColorstr="#fafafa",GradientType=1 );
  z-index: 2;
}
.period-slider::before {
  left: 30px;
  background: -moz-linear-gradient(left, #fff 0%, #fff 40%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-linear-gradient(left, #fff 0%, #fff 40%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(90deg, #fff 0%, #fff 40%, rgba(255, 255, 255, 0) 100%);
}
.period-slider::after {
  right: 30px;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 60%, #fff 100%);
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, #fff 60%, #fff 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 60%, #fff 100%);
}
.period-slider .swiper-wrapper {
  gap: 4px;
}
.period-slider .swiper-slide {
  width: auto;
}
.period-slider .swiper-button-prev,
.period-slider .swiper-button-next {
  top: 0;
  width: 36px;
  height: 36px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  background-color: #fff;
  color: #a4a4a4;
  z-index: 4;
}
.period-slider .swiper-button-prev:hover,
.period-slider .swiper-button-next:hover {
  background-color: #f6f6f6;
  color: #000;
}
.period-slider .swiper-button-prev::after,
.period-slider .swiper-button-next::after {
  display: none;
}
.period-slider .swiper-button-prev svg,
.period-slider .swiper-button-next svg {
  width: 16px;
  height: 16px;
}
.period-slider .swiper-button-prev {
  left: 0;
}
.period-slider .swiper-button-next {
  right: 0;
}
.period-slider .swiper-button-disabled {
  pointer-events: none;
  background-color: #e6e6e6;
  color: #a4a4a4;
  opacity: 1;
}

.scrollable-slide {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.scrollable-slide .swiper-slide {
  height: auto;
}

.popup-bookmark {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100vh;
  padding-top: 72px;
  padding-bottom: 81px;
}
.popup-bookmark .scrollable-container, .popup-bookmark .popup-container > form, .popup-bookmark .iframe-container > form, .popup-bookmark .popup-container.no-body-scroll .body, .popup-bookmark .no-body-scroll.iframe-container .body, .popup-container.no-body-scroll .popup-bookmark .body, .no-body-scroll.iframe-container .popup-bookmark .body {
  flex-grow: 1;
}
.popup-bookmark .close-button {
  position: fixed;
  top: 20px;
  right: 60px;
  color: #a4a4a4;
  z-index: 101;
}
.popup-bookmark .close-button svg {
  width: 32px;
  height: 32px;
}
.popup-bookmark .header {
  position: fixed;
  top: 0;
  padding: 16px 0;
  width: 100%;
  min-width: 1320px;
  border-bottom: 1px solid #e6e6e6;
  background-color: #fff;
  z-index: 100;
}
.popup-bookmark .header-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 60px;
}
.popup-bookmark .header-inner .badge {
  padding: 0 16px 1px;
  min-height: 32px;
  border-radius: 18px;
  background-color: var(--color-primary-400);
  font-size: 20px;
  font-weight: 700;
}
.popup-bookmark .footer {
  position: fixed;
  bottom: 0;
  padding: 12px 0;
  width: 100%;
  min-width: 1320px;
  border-top: 1px solid #e6e6e6;
  background-color: #fff;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}
.popup-bookmark .footer-inner {
  display: flex;
  align-items: center;
  margin: 0 60px;
  width: 100%;
}
.popup-bookmark .footer-inner .buttons {
  flex-wrap: nowrap;
  margin-left: auto;
}
.popup-bookmark .footer-inner .button {
  min-width: 180px;
}
.popup-bookmark .footer-inner .ul-dot {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 0;
}
.popup-bookmark .footer-inner .ul-dot > li:not(:first-of-type) {
  margin-top: 0;
}
.popup-bookmark .body {
  display: flex;
  flex-grow: 1;
  gap: 24px;
  position: relative;
  padding: 24px 60px;
  min-width: 1320px;
  min-height: 400px;
  max-height: unset;
}
.popup-bookmark section {
  flex: 1 1 40%;
  gap: 16px;
}
.popup-bookmark section .tab a span {
  margin-left: 3px;
}
.popup-bookmark .filters {
  box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.1);
}
.popup-bookmark .no-filters + .bookmark {
  height: calc(100% - 16px);
}
.popup-bookmark .bookmark {
  margin-top: 16px;
  height: 100%;
  border-color: var(--color-primary-400);
  border-width: 0 1px 1px;
  border-style: solid;
  background-color: #fff;
}
.popup-bookmark .bookmark.type-secondary {
  margin-top: 0;
  border-color: var(--color-secondary);
}
.popup-bookmark .bookmark.type-secondary .bookmark-header {
  background-color: var(--color-secondary);
}
.popup-bookmark .bookmark.type-secondary .badge {
  color: var(--color-secondary);
}
.popup-bookmark .bookmark-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 30px;
  background-color: var(--color-primary-400);
}
.popup-bookmark .bookmark-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  line-height: 1;
}
.popup-bookmark .bookmark-header .badge {
  padding: 0 7px 2px;
  background-color: #fff;
  color: var(--color-primary-400);
  font-size: 18px;
  font-weight: 700;
}
.popup-bookmark .bookmark-header fieldset {
  margin-top: 0;
  width: auto;
}
.popup-bookmark .bookmark-header .select2 {
  min-width: 160px;
}
.popup-bookmark .bookmark-header .select2-selection--single {
  border-color: transparent;
}
.popup-bookmark .bookmark-contents {
  position: relative;
  padding: 30px;
  height: 100%;
}
.popup-bookmark .bookmark-contents > button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  width: 100%;
  height: 40px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.popup-bookmark .bookmark-contents > button:nth-child(n+2) {
  margin-top: 8px;
}
.popup-bookmark .bookmark-contents > button.active {
  border-color: var(--color-primary-200);
  background-color: #f9fbfc;
  font-weight: 500;
}
.popup-bookmark .bookmark-contents > button.active .icon {
  border-color: var(--color-primary-400);
  background-color: var(--color-primary-400);
  color: #fff;
}
.popup-bookmark .bookmark-contents > button.active .divider-group > li, .popup-bookmark .bookmark-contents > button.active .page-header ul > li, .page-header .popup-bookmark .bookmark-contents > button.active ul > li {
  color: var(--color-primary-400);
}
.popup-bookmark .bookmark-contents > button.active .divider-group > li:first-child, .popup-bookmark .bookmark-contents > button.active .page-header ul > li:first-child, .page-header .popup-bookmark .bookmark-contents > button.active ul > li:first-child {
  flex-shrink: 0;
}
.popup-bookmark .bookmark-contents .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
  width: 16px;
  height: 16px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  background-color: #f6f6f6;
  color: #a4a4a4;
}
.popup-bookmark .bookmark-contents .icon svg {
  width: 100%;
  height: 100%;
}
.popup-bookmark .bookmark-contents .divider-group > li, .popup-bookmark .bookmark-contents .page-header ul > li, .page-header .popup-bookmark .bookmark-contents ul > li {
  color: #000;
  text-align: left;
}
.popup-bookmark .bookmark-contents .divider-group > li:last-child, .popup-bookmark .bookmark-contents .page-header ul > li:last-child, .page-header .popup-bookmark .bookmark-contents ul > li:last-child {
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popup-bookmark .bookmark-contents .button-wrap {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 4px;
}
.popup-bookmark .bookmark-contents .button-wrap button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  color: #a4a4a4;
  border: 1px solid #d2d2d2;
}
.popup-bookmark .bookmark-contents .button-wrap button:first-child {
  border-radius: 4px 0 0 4px;
}
.popup-bookmark .bookmark-contents .button-wrap button:last-child {
  border-left: 0;
  border-radius: 0 4px 4px 0;
}
.popup-bookmark .bookmark-contents .button-wrap button:disabled, .popup-bookmark .bookmark-contents .button-wrap button.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.popup-bookmark .bookmark-contents .button-wrap button svg {
  width: 14px;
  height: 14px;
}
.popup-bookmark .bookmark-contents .box-no-data {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
.popup-bookmark .bookmark-items:nth-child(n+2) {
  margin-top: 16px;
}
.popup-bookmark .bookmark-items .item {
  justify-content: space-between;
  padding: 0 16px;
  height: 40px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
}
.popup-bookmark .bookmark-items .item:first-child {
  margin-top: 0;
}
.popup-bookmark .bookmark-items .item:disabled, .popup-bookmark .bookmark-items .item.disabled {
  background-color: #f6f6f6;
}
.popup-bookmark .bookmark-items .item:disabled .divider-group > li, .popup-bookmark .bookmark-items .item:disabled .page-header ul > li, .page-header .popup-bookmark .bookmark-items .item:disabled ul > li, .popup-bookmark .bookmark-items .item.disabled .divider-group > li, .popup-bookmark .bookmark-items .item.disabled .page-header ul > li, .page-header .popup-bookmark .bookmark-items .item.disabled ul > li {
  color: #a4a4a4;
}
.popup-bookmark .bookmark-items .item:disabled .button-wrap button, .popup-bookmark .bookmark-items .item.disabled .button-wrap button {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.popup-bookmark .bookmark-items .item > button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 8px;
}
.popup-bookmark .bookmark-footer .button {
  min-width: 140px;
}
#popup-share-sns .webui-popover{
  left:50% !important;
  transform:translateX(-50%);
}
#popup-share-sns .webui-popover .webui-popover-content{
  text-align:center;
}


#reg-bookmark ~ .select2-container .select2-dropdown {
  border-color: transparent;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.07);
}

.iframe-container {
  display: block;
  height: 100%;
}

.helpers-slider {
  margin-top: 16px;
  padding: 24px 48px;
  background-color: var(--color-primary-50);
  position: relative;
  overflow: hidden;
}
.helpers-slider::before, .helpers-slider::after {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  width: 48px;
  height: 100%;
  background-color: var(--color-primary-50);
  z-index: 2;
}
.helpers-slider::before {
  left: 0;
}
.helpers-slider::after {
  right: 0;
}
.helpers-slider .swiper-slide {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ebf2f2;
  border-radius: 4px;
}
.helpers-slider .swiper-slide img {
  width: 100%;
}
.helpers-slider .swiper-button-prev,
.helpers-slider .swiper-button-next {
  transform: translateY(-50%);
}

.popup#popup-mypoint .popup-container{
  height:720px;
}
.popup#popup-mypoint .popup-container.no-body-scroll .body{
  max-height:650px;
}

.board-view .header {
  gap: 12px;
}
.board-view .header h3 {
  word-break: break-all;
}

.filters.col-4 .ox  {
  width: 205px;
}
.site-map .depth-1 {
  border-bottom: 1px solid #e6e6e6;
}
.site-map .depth-1:nth-child(5) {
  grid-column: auto;
  grid-row: auto;
}
.site-map .depth-1:nth-child(5n) {
  border-right: 0;
}
.site-map .depth-1:nth-child(n+6) {
  border-top: 0;
}

/* (1456) 24-11-12 스크랩한 게시글의 첨부 파일 자료 노출 추가 */
.lesson-data .data:has(.title-info-wrap) {
  display: flex;
  flex-direction: column;
}

.lesson-data .data .title-info-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.lesson-data .data .title-info-wrap ~ .attach-items {
  width: 100%;
}

.lesson-data .data .attach-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  min-height: 56px;
  border: 1px solid #e6e6e6;
  text-align: left;
}

.lesson-data .data .attach-items li:not(:first-child) {
  border-top: none;
}

.lesson-data .data .attach-items .file-name {
  flex-grow: 1;
  color: #000;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-data .data .attach-items .extra {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

/* (1456) 24-11-22 스크랩한 게시글의 첨부 파일 자료 노출 추가 (수정) */
.lesson-items .lesson-data .data:has(.attach-items),
.lesson-items .lesson-data .data:has(.attach-items) .attach-items li,
.lesson-items .lesson-data .data:has(.attach-item-individual),
.sub-lessons .lesson-data .data:has(.attach-item-individual) {
  min-height: initial;
}

.lesson-items .lesson-data .data:has(.attach-items) .attach-items li {
  padding: 0;
  border: 0;
}

.lesson-items .lesson-data .data:has(.attach-items) .inner-wrap,
.lesson-items .lesson-data .data:has(.attach-items) .attach-items {
  width: 100%;
}

.lesson-items .lesson-data .data:has(.attach-item-individual) .file-name,
.sub-lessons .lesson-data .data:has(.attach-item-individual) .file-name {
  flex-grow: 1;
  color: #000;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-items .lesson-data .data:has(.attach-item-individual) .divider-group,
.sub-lessons .lesson-data .data:has(.attach-item-individual) .divider-group {
  flex-wrap: nowrap;
}

.lesson-items .lesson-data .data .attach-item-individual,
.sub-lessons .lesson-data .data .attach-item-individual  {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.lesson-items .lesson-data .data:has(.attach-item-individual) .ellipsis-single,
.sub-lessons .lesson-data .data:has(.attach-item-individual) .ellipsis-single {
  flex-grow: 1;
  white-space: normal;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* (1456) 24-11-22 스크랩한 게시글의 첨부 파일 자료 노출 추가 (수정) */

/* (1457) 24-10-17 ai class 버튼 추가 */
.slider-view-auto.type-bookmark .button.size-md {
  min-height: 30px;
  width: 100px;
}

.main-visual-section .mybook-wrapper .book-info .button.size-md {
  min-height: 30px;
}

.textbook-intro .info-buttons .left-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 이벤트 고도화 */
.board-view .page-buttons:not(.align-right).no-board-pagination {
  border-bottom: 2px solid #000;
}
/* 1308 이벤트 고도화 이벤트 상세 팝업*/
#mevent-popup .classInfoArea.d-none,
#mevent-popup .studentCntArea.d-none {
  display: none !important;
}

/* (1456) 24-11-22 스크랩한 게시글의 첨부 파일 자료 노출 추가 (수정) */
.lesson-items .lesson-data .data:has(.attach-items),
.lesson-items .lesson-data .data:has(.attach-items) .attach-items li {
  min-height: initial;
}

.lesson-items .lesson-data .data:has(.attach-items) .attach-items li {
  padding: 0;
  border: 0;
}

.lesson-items .lesson-data .data:has(.attach-items) .inner-wrap,
.lesson-items .lesson-data .data:has(.attach-items) .attach-items {
  width: 100%;
}

/* (1496) [11/15] 2022개정 대비 엠티쳐 교과활동 개선의 건 (~12/05) */
.mybook {
  border-top: 1px solid #d2d2d2;
  border-bottom: 0;
}

.lnb .lnb-contents .lnb-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid transparent;
  background-color: #f6f7f9;
}

.lnb .lnb-contents .lnb-item:hover {
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  font-weight: 500;
}

.lnb .lnb-contents .lnb-item .lnb-btn-group {
  display: flex;
  gap: 8px;
  padding-right: 12px;
}

.gnb .lnb-contents .button {
  height: 32px;
  line-height: 32px;
  width: 74px;
  min-width: 74px;
  font-size: 12px;
}

.lnb .text-data {
  display: flex;
  flex: 1;
  padding: 12px 0px 12px 12px; /* 1541 */
}

.title.subject-list {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.title.subject-list span {
  word-break: break-all;
}

.number-unit-sm {
  font-size: 1em;
  display: flex;
  flex-shrink: 0;
}

/*.divider-group.hyphen > li {
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
}
.divider-group.hyphen > li::before {
  content: "-";
  background: none;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 0px;
  display: inline-block;
  vertical-align: middle;
}

.divider-group.hyphen > :first-child::before {
  content: none;
}
.divider-group.hyphen > :last-child::after {
  content: "단원";
  display: inline-block;
  padding-left: 5px;
}*/

.site-map .depth-items.type-vertical .depth-2 a {
  display: flex;
  align-items: flex-start;
}

.site-map .depth-items.type-vertical .depth-2 > a::before {
  top: 17px;
}

.site-map .depth-items.type-vertical .depth-2 a .year {
  align-self: flex-start;
  flex-shrink: 0;
}

.site-map .depth-items.type-vertical .depth-2 a span {
  word-break: break-all;
}

.popup-container.popup-banner {
  border-radius: 4px;
}
.popup-container.popup-banner .slides {
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  margin: -0.5px 0; /* 상하 유격 보정 */
}
.popup-container.popup-banner .slides .image-popup{
  border-radius: unset;
}
.popup-container.popup-banner .slides .swiper-button-prev,
.popup-container.popup-banner .slides .swiper-button-next
{
  width: 36px;
  height: 36px;
  border-radius: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  color: #000;
}
.popup-container.popup-banner .slides .swiper-button-prev.swiper-button-disabled,
.popup-container.popup-banner .slides .swiper-button-next.swiper-button-disabled {
  opacity: 0.2;
}
.popup-container.popup-banner .slides .swiper-button-prev {
  left: -20px;
  transform: translateX(-100%);
}
.popup-container.popup-banner .slides .swiper-button-next {
  right: -20px;
  transform: translateX(100%);
}
.popup-container.popup-banner .slides .swiper-pagination {
  bottom: 72px;
}
.popup-container.popup-banner .slides .swiper-pagination .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0 2px;
  background-color: #fff;
  opacity: 1;
}
.popup-container.popup-banner .slides .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 20px;
  border-radius: 2px;
  background-color: #000;
}
.popup-container.popup-banner .footer {
  padding: 8px 24px;
}
.popup-container.popup-banner .footer .split-container, .popup-container.popup-banner .footer .board-view .header, .board-view .popup-container.popup-banner .footer .header {
  width: 100%;
}
.popup-container.popup-banner .footer .button {
  flex-grow: 0;
  width: auto;
  min-width: 100px;
}

.popup .popup-banner{
  position: fixed;
  top: 50%;
  left: 50%;
  /*width: 520px;*/
  transform: translate(-50%, -50%);
  z-index: 1001;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
  /*max-width: 50%; !* 최대 너비를 브라우저의 50%로 설정 *!*/
}

.popup-container.popup-banner .swiper-wrapper{
  align-items: center;
  background-color: var(--color-primary-100);
}

.image-popup img {
  height: 100%;
  max-height: 520px;
  object-fit: contain; /* 비율 유지 */
}

.image-popup {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
  text-align: center;
  width: 100%; /* 부모 요소의 너비 */
  height: auto;
  background-image: url("/assets/images/common/img-no-data-91913e87c717c7448ba8692b6aafdc4c.svg");
  background-size: 15%;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  border-radius: 10px;
}

.image-popup .btn-link {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 0);
  background: #ff70b2;
  color: #fff;
  border-radius: 6px;
  padding: 10px 40px;
}

.chapter-items .chapter-depth * {
  word-break: break-all;
}

.chapter-items .chapter-depth.mid-high {
  flex-direction: column;
}

.chapter-items .chapter-depth.mid-high .header,
.chapter-items .hour-list.mid-high .header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.chapter-items .chapter-depth.mid-high .header .header-wrap h3 {
  display: -webkit-box;
}

.chapter-items .chapter-depth.mid-high .header .extra {
  display: flex;
  gap: 10px;
}

.chapter-items .hour-list.mid-high > li {
  flex-direction: column;
}

.chapter-items .hour-list.mid-high .header .header-wrap .title {
  align-items: center;
}

.chapter-items .hour-list.mid-high .header .header-wrap .title .number-unit-sm {
  width: 80px;
}

.chapter-list .divider-group.hyphen {
  min-width: 100px;
}

.divider-group.hyphen > li {
  height: 18px;
  line-height: 18px;
  display: flex;
}

.divider-group.hyphen > li:first-child::before {
  display: none;
}

.divider-group.hyphen > li::before {
  position: absolute;
  top: 0;
  left: -2px;
  display: inline-block;
  width: 0px;
  height: 0px;
  content: "-";
}

.divider-group.hyphen > li:last-child::after {
  content: "단원";
}

.height-auto {
  height: auto !important;
}
.image-popup swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
}


/* ****************************
  miraen ele Renewal : 25.02
 **************************** */
.logo_contents { position:relative; border-top:1px solid #e6e6e6; box-sizing:border-box; }
.logo_contents .inner { display:flex; justify-content:space-between; align-items:center; margin:0 auto; width:1320px; height:88px; }
.logo_contents .bn_editor { width:253px; /*height:92px;*/ }
  .logo_contents .bn_editor a { display:flex; justify-content:space-between; align-items:center; }
  .logo_contents .bn_editor p { font-size:18px; font-weight:600; line-height:1.2; word-break:keep-all; }
  .logo_contents .bn_editor p span { display:block; margin-bottom:5px; font-size:12px; }
.logo_contents .logo { display:flex; justify-content:center; }
.logo_contents .search { display:flex; justify-content:flex-end; align-items:center; }

/* *******************
  Quick menu
******************* */
.quick_menu { z-index:101; position:fixed; top:0px; right:0px; width:60px; min-height:100vh; height:100%; border-left:1px solid #E6E6E6; background:#fff; }
.quick_menu .quick_btn { position:absolute; top:48px; left:-20px; display:inline-block; width:20px; height:24px; background:var(--color-quick); border-radius:12px 0 0 12px; color: var(--color-primary);}
.quick_menu .quick_btn svg { width:10px; height:12px; }
.quick_menu .quick_tit { display:block; padding:4px 0; text-align:center; color:var(--color-primary); line-height:1.1; font-weight:600; }

.quick_menu .login_box { height:90px; line-height:90px; text-align:center; }
.quick_menu .login_open { display:none; }
  /* 로그인 -> 접힘 */
  .login_box.login { background:#656569; }
    .login_box .login_off { display:none; vertical-align:middle; line-height:1.0; color:#fff; font-weight:500; }
      .login_off .login_logo { position:relative; display:inline-block; margin-bottom:8px; width:30px; height:30px; background:#fff; border-radius:100px; color:var(--color-primary); }
      .login_off .login_logo svg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:16px; height:15px; }
  .login_box.login .login_off { display:inline-block; }
  /* 로그아웃 -> 접힘 */
  .login_box.logout { background:#F6F6F6; }
    .login_box .login_on { display:none; vertical-align:middle; line-height:1.0; }
      .login_box .login_close .login_on strong { display:block; margin-bottom:8px; font-size:12px; color:#000; line-height:1.2; font-weight:600; }
      .login_box .login_close .login_on button { display:inline-block; width:auto; padding:5px 3px; font-size:10px; color:#fff; background-color:#A4A4A4; border:1px solid #949494; border-radius:3px; font-weight:600; }
  .login_box.logout .login_on { display:inline-block; }

.quick_menu .menu-list li { position:relative; }
  .quick_menu .menu-list a { display:block; height:36px; line-height:35px; text-align:center; border-bottom:1px solid #E6E6E6; }
  .quick_menu .menu-list a img { position:relative; top:3px; }
    .quick_menu .menu-list .tit { display:none; }
    .quick_menu .menu-list a:hover .tit { display:block; }
  .quick_menu .menu-list .tit { position:absolute; left:5px; top:50%; transform:translate(-100%, -50%); line-height:1.0; padding:8px 9px; background:#fff; border:1px solid #e6e6e6; white-space:nowrap; border-radius:4px; box-shadow:0px 2px 6px rgba(0,0,0,0.1); color:#000; }
  .quick_menu .menu-list .tit:before { content:""; position:absolute; top:50%; right:-8px; transform:translateY(-50%); display:inline-block; width:8px; height:10px; background:url('/assets/images/common/bg_tooltip-401f77e2496419418238679e92c8ce76.png') center no-repeat; background-size:100% auto; }

.quick_menu .menu-list.my_list { padding:5px 0; border-bottom:5px solid #F6F6F6; }
  .quick_menu .menu-list.my_list li a { border-bottom:0px; }


/* Quick menu open */
.quick_menu.open { width:170px; }
.quick_menu.open .login_close { display:none; }

.quick_menu.open .quick_btn svg { margin-left:5px; transform:rotate(-180deg);}
.quick_menu.open .quick_tit { text-align:left; padding:12px 14px; }
.quick_menu.open .menu-list a { padding:0 14px; text-align:left; }

.quick_menu.open .login_box { height:auto; line-height:1.0; background:#F6F6F6; }
.quick_menu.open .login_box .login_open { display:block; text-align:left; }

.quick_menu.open .login_box {
  padding: 9px 14px 10px;
  border: 1px solid #f6f6f6;
}
.quick_menu.open .login_box .login-ox {
  margin-top: 8px;
  min-height:auto !important;
}
.quick_menu.open .login_box .login-ox label {
  padding-left: 18px;
  font-size: 12px;
  font-weight:400;
  color:#626262;
  min-height:auto !important;
}
.quick_menu.open .login_box .login-ox label::before, .quick_menu.open .login_box .login-ox label::after {
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
}
.quick_menu.open .login_box .login-ox label::after {
  background-size: contain;
}
.quick_menu.open .login_box .login-button {
  margin-top: 14px;
  padding:7px 0 8px;
  background-color:#656569;
  color: #fff;
  border-radius:4px;
  font-weight:600;
}
.quick_menu.open .login_box .logout-button {
  margin-top: 14px;
  padding:7px 0 8px;
  background-color:#A4A4A4;
  border:1px solid #949494;
  color: #fff;
  border-radius:4px;
  font-weight:600;
  box-sizing:border-box;
  font-size:14px;
}
.quick_menu.open .login_box .divider-group, .quick_menu.open .login_box .page-header ul, .page-header .quick_menu.open .login_box ul {
  width: 100%;
  justify-content: center;
  margin-top:8px;
}
.quick_menu.open .login_box .divider-group li, .quick_menu.open .login_box .page-header ul li, .page-header .quick_menu.open .login_box ul li {
  line-height: 1;
}
.quick_menu.open .login_box .divider-group li::before, .quick_menu.open .login_box .page-header ul li::before, .page-header .quick_menu.open .login_box ul li::before {
  top: 70%;
  height: 9px;
}
.quick_menu.open .login_box .divider-group a, .quick_menu.open .login_box .page-header ul a, .page-header .quick_menu.open .login_box ul a {
  font-size:13px;
  line-height: 1;
  color: #626262;
  font-weight:400;
}
.quick_menu.open .login_box .sns-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 16px;
}
.quick_menu.open .login_box .sns-box button {
  width: 19px;
  height: 19px;
}
.quick_menu.open .input-box {
  position: relative;
  color:#a4a4a4;
}
.quick_menu.open .input-box:last-child {
  margin-top: -1px;
}
.quick_menu.open .input-box svg {
  position: absolute;
  z-index: 11;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
}
.quick_menu.open .input-box input,
.quick_menu.open .input-box .input-inner-extra {
  position: relative;
  width: 100%;
  height: auto;
  padding: 8px;
  padding-left: 30px;
  font-size: 13px;
  line-height: 18px;
  border-radius:0;
  border:1px solid #e6e6e6;
}
.quick_menu.open .input-box:nth-child(1) input { border-radius:4px 4px 0 0; }
.quick_menu.open .input-box:nth-child(2) input { border-radius:0 0 4px 4px; }

.quick_menu.open .menu-list .tit { display:inline-block; position:static; margin-left:5px; padding:0px; transform:translate(0, 0); font-size:13px; border:0px; box-shadow:none; }
.quick_menu.open .menu-list .tit:before { display:none; }
.quick_menu.open .menu-list a:hover .tit { display:inline-block; }

.quick_menu.open .login_on { padding:10px 5px; }
.quick_menu.open .login_on p { font-size:12px; text-align:center; line-height:1.2; }
.quick_menu.open .login_on p strong { display:block; margin-top:5px; font-size:16px; color:#000; font-weight:700; }

/* bookmark_area */
.bookmark_area { position:absolute; left:5px; padding:20px 20px 25px; white-space:nowrap; background:#fff; border:1px solid #e6e6e6; white-space:nowrap; border-radius:4px; box-shadow:0px 2px 6px rgba(0,0,0,0.1); }
.bookmark_area:before { content:""; position:absolute; right:-8px; display:inline-block; width:8px; height:10px; background:url('/assets/images/common/bg_tooltip-401f77e2496419418238679e92c8ce76.png') center no-repeat; background-size:100% auto; }
.bookmark_area .ul-dot { margin-top:0px; }
.bookmark_area .ul-dot li a { padding:0px !important; height:auto; line-height:1.2; text-align:left; }
.bookmark_area .ul-dot li + li { margin-top:15px; }

.bookmark_area.textbook { display:none; top:50%; transform:translate(-100%, -50%);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px); /* 배경 블러 효과 */
  -webkit-backdrop-filter: blur(10px); /* Safari 지원 */
}
  .bookmark_area.textbook:before { top:50%; transform:translateY(-50%); }
  .bookmark_area.textbook .ul-dot.size-sm > li:before { top:8px;}
  .bookmark_area.textbook .ul-dot.size-sm > li a:hover { color:var(--color-primary); font-weight:600; }
.bookmark_area.service { display:none; top:-42px; transform:translateX(-100%); }
  .bookmark_area.service:before { top:55px; }

.bokmark_textbook .tit:hover,
.bokmark_service .tit:hover { color:var(--color-primary); font-weight:700; }
.bokmark_textbook > a:hover:before,
.bokmark_service > a:hover:before { content:""; z-index:2; position:absolute; top:9.5px; left:21.5px; display:inline-block; width:16px; height:16px; background:url('/assets/images/common/icon-star-on-21b7d9d115da46731efaead6456babb0.svg') center no-repeat; }
.open .bokmark_textbook > a:hover:before,
.open .bokmark_service > a:hover:before { left:14px; }
.bokmark_textbook:hover .bookmark_area.textbook,
.bokmark_service:hover .bookmark_area.service { display:block; }

.tool_list.swiper-slide.swiper-slide-next {
  visibility: hidden; /* 다음 슬라이드 숨김 */
}
.tool_list.swiper-slide.swiper-slide-prev {
  visibility: hidden; /* 이전 슬라이드 숨김 */
}
.common-nav > a.miraen_txtbook { color:#000; }
/* ****************************
  miraen ele Renewal : 25.02
 **************************** */

.icon-folder-2 {width:16px; height:16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='17.373' height='14.215' viewBox='0 0 17.373 14.215'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='사각형_177' data-name='사각형 177' width='17.373' height='14.215' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='그룹_100' data-name='그룹 100' transform='translate(0 0)'%3E%3Cg id='그룹_99' data-name='그룹 99' transform='translate(0 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='패스_239' data-name='패스 239' d='M18.775,5.644V3.987a.829.829,0,0,0-.829-.829H9.658L8.83,1.5H4.686L4.032,2.808a1.655,1.655,0,0,0-.175.741v2.1' transform='translate(-2.63 -1.023)' fill='none' stroke='%23838383' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3Cpath id='패스_240' data-name='패스 240' d='M3.007,23.638h13.4a.829.829,0,0,0,.825-.754l.678-7.459a.829.829,0,0,0-.826-.9H2.329a.829.829,0,0,0-.825.9l.678,7.459A.828.828,0,0,0,3.007,23.638Z' transform='translate(-1.023 -9.9)' fill='none' stroke='%23838383' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") center no-repeat; background-size: 100%;}

/* [1566] 마이페이지 내자료 및 선생님 공유하기 고도화  */
:root {
  --logo-make-x: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAaCAYAAACgoey0AAAABHNCSVQICAgIfAhkiAAAAa9JREFUSEutlktKBEEMhnv0Am5E8NmKr4WK4D1Ej6BzDzfqEXwsvIUg6sKN4Ep0IXgBRfe+UHz+/2CkralK0t1TEKa6k/zfpCpFdSPLsjtYcfQHz516vIZQj4g1ImDxrWOyU5M6jfyTmIYGlviqKxCu5D++B8yEQdhXiepVKHW8YMYOwT4dcBMq4AtMemHdDlEL7oKCc8+Kw2ElDyDhu25eDEzNM1iurEDYcNqfZW+wR9qaK6VvwYeR+AErDZU91rb2GM4ZJYCV0H8YiYlWKnGppS7qHOFh1lj2uQDO7mcjJocHzOQD2LwTrlZapmKJ3cdkQYHn8E3BrrRKq4CZsw1bUoRH4XvrJLjYuTxKW7BlBTAO30vdPY4dFw98AuDnFNxqLu2MEr4JW1Eq454/xvwaWIM+QWzyV3ADv6sKnHfyQ+iPgRcRtKsIce+4h8Vhwc8RTN2/IWDeTKewXGsI+F5hY4kYCy5prc4vcx/zmDBJG/xcahoxLbcX/I7YEY8gYlxwD3gPYmtOqIT1YXKp5Vjgqh96wkyejBS4LjAs9hYvuoovCY5dXzcll9YKb2P8ABWfSwGJdoa2AAAAAElFTkSuQmCC");
  --icon-converting: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35'%3E%3Cg id='loading-svgrepo-com' transform='translate(0 0.5)'%3E%3Cpath d='M12,1V7.1' transform='translate(5.5)' fill='none' stroke='%2342b2bb' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M20.906,20.406,16.6,16.1' transform='translate(7.907 7.908)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M24.6,11.5H18.5' transform='translate(8.905 5.5)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M12,18v6.1' transform='translate(5.5 8.905)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M8.885,8.385l-4.31-4.31' transform='translate(1.611 1.611)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M7.6,11.5H1.5' transform='translate(0 5.5)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M8.885,16.1l-4.31,4.31' transform='translate(1.611 7.908)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3Cpath d='M4.575,8.384,8.884,4.075' transform='translate(19.928 1.611)' fill='none' stroke='%23333' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.logo-make-x-svg {width: 15px; height: 12.56px; display:inline-block; background: var(--logo-make-x) center center no-repeat; background-size:100%;}

.data-upload-category {}
.data-upload-category-parent {margin-top:8px;}
.data-upload-category-parent .data-upload-category-child {display:none}
.data-upload-category-parent .data-upload-category-child.active {display:block;}
.data-upload-category-parent .data-upload-category-child .file-upload {margin-bottom:16px;}
.data-upload-category-parent .data-infor-txt {display:flex; flex-direction: column; gap:4px;}
.data-upload-category-parent .data-infor-txt li {padding-left:10px; position:relative;}
.data-upload-category-parent .data-infor-txt li:before {content:''; width:4px; height:4px; display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); background-color:#838383; border-radius:50%;}
.data-upload-category-parent .data-infor-txt.no-bullet li {padding-left:0;}
.data-upload-category-parent .data-infor-txt.no-bullet li.no-bullet:before {display:none;}

.icon-size-20 {width: 20px; height: 20px; vertical-align: top;}

.edu-information-section {padding:10px;}
.edu-information-section .badge {padding:0; margin-top:4px; background-color:transparent; font-size:14px; color:#A4A4A4; font-weight:400;}
.edu-information-section .button.size-xl {min-height:46px; font-size:14px;}
.edu-information-section .section .text-xs strong {font-size:14px;}

.webui-popover {z-index:1001;}
.webui-popover-inner {margin:16px;}
h3.webui-popover-title {margin:0 0 8px; font-size:16px; color:#000; line-height:24px; font-weight:500;}
.webui-popover .webui-popover-content {margin:0;}
.webui-popover .webui-popover-content .popover-my-data {width:max-content}
.webui-popover .webui-popover-content .ul-dot {}
.webui-popover .webui-popover-content .ul-dot > li {padding-left:16px; color:#838383; line-height:20px;}
.webui-popover .webui-popover-content .ul-dot > li::before {top:8px;}
.webui-popover .webui-popover-content .ul-dot > li.no-dot {color:#BBBBBB;}
.webui-popover .webui-popover-content .ul-dot > li.no-dot:before {display:none;}

.item-stat-box {position:relative;}
.item-stat-box .icon.size-md {min-width:24px;}
.item-stat-box .tooltip-trigger,
.item-stat-box .icon-data-converting {position:absolute; right:0; top:50%; transform:translateY(-50%)}
.item-stat-box .tooltip-trigger img {width:32px;}
.item-stat-box .icon-data-converting img {width:30px; animation: spin 2s linear infinite;}
.table-items .item-stat-box .title {padding-right:30px;}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.container-subject-aiclass .essential-comment {
  display: flex;
  justify-content: flex-end;
}
.container-subject-aiclass .essential-comment:before {
  content: "*";
  display: inline-block;
  margin-right: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #f24a4a;
}

.popup-container .body > .essential-comment + .forms {
  margin-top: 0px;
}

form .title-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  line-height: 1;
}

.share-with .form-row {
  display: flex;
  gap: 10px;
}
.share-with .form-row .share-with-item {
  display: flex;
  align-items:center;
}

.share-with .form-row .share-with-item .school-name {
  width: 130px;
  display: flex;
  flex-wrap: wrap;
}
.share-with .form-row .share-with-item .selection {
  display: flex;
  position: relative;
  width: 130px;

}

.share-with .form-row .share-with-item .selection i.icon-select-arrow {
  position: absolute;
  right:10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  transition: all 300ms ease-in-out;
  background-image: url(/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.share-with .form-row .share-with-item .selection.active i.icon-select-arrow {
  transform: rotate(180deg);
  top: calc(50% - 10px);
}
i.icon-select-arrow {
  position: absolute;
  right:10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  transition: all 300ms ease-in-out;
  background-image: url(/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.share-with .form-row .share-with-item .selection .selection-default {
  position: relative;
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  align-items: center;
  padding: 0 24px 0 6px;
  width: 130px;
  flex-shrink: 0;
  height: 46px;
  cursor: pointer;
}

.share-with .form-row .share-with-item .selection .selection-default > div {
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-with .form-row .share-with-item .selection .selection-option {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 130px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  z-index: 1000;
  display: none;
}

.share-with .form-row .share-with-item .add-class {
  display: flex;
  align-items: center;
}

.share-with .form-row .share-with-item .add-class > div {
  padding-left: 4px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item {
  display: flex;
  align-items: center;
  height: 42px;
  line-height: 42px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item label,
.share-with .form-row label  {
  margin-bottom: 0;
}

.share-with .form-row.share-option-check-list > div {
  width: 100%;
}

.share-with .form-row.share-option-check-list .add-textbook {
  /*padding-left: 24px;*/
  padding: 8px 0 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-group {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-group + .add-box-group {
  margin-top: 10px;
}
.share-with .form-row.share-option-check-list .add-textbook .add-box-item {
  display: flex;
  align-items: center;
  flex: 1;
  border: 1px solid #ddd;
  background-color: #f1f1f1;
  border-radius: 6px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item label {
  display: flex;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=checkbox] + label::before,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=checkbox] + label::after,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=radio] + label::before,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=radio] + label::after {
  left: 6px;
  top: 10px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item:has(:checked) {
  background-color: #fff;
}


.share-with .form-row.share-option-check-list .add-textbook .add-box-item:has(:checked) input:read-only:hover {
  border: 1px solid var(--color-primary);
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item input:read-only:hover,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item input:read-only:active,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item input:read-only:focus {
  border: 1px solid #ddd;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .score {
  background-color: #fafafa;
  width: 70px;
  height: 30px;
  border-radius: 4px;
  text-align: center;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection {
  display: flex;
  width: 100%;
  position: relative;
  cursor: pointer;
  padding: 0 16px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection .text-truncate {
  width: 450px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item ~ button {
  width: 44px;
  height: 44px;
  padding: 0;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item ~ button svg {
  width: 20px;
  height: 20px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item span {
  padding: 6px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option {
  position: absolute;
  left: 188px;
  top: 54px;
  background-color: #fff;
  width: calc(100% - 240px);
  border-radius: 6px;
  border: 1px solid #ddd;
  z-index: 1000;
  display: none;
  overflow: auto;
  max-height: 150px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option > div {
  padding: 8px;
  border-top: 1px solid #ddd;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option > div:first-child {
  border-top: 0;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option .date {
  text-align: right;
  font-size: 12px;
  color: #bbb;
}

.share-with .form-row.share-option-check-list .ox-group .ox label {
  margin-bottom: 4px;
}
.share-with .form-row.share-option-check-list .input-date {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.share-with .form-row.share-option-check-list .input-date * {
  display: inline-flex;
}

.share-with .form-row.share-option-check-list:has(:checked) .input-date,
.share-with .form-row.share-option-check-list:has(:checked) .add-textbook {
  display: block;
}

.share-with .form-row.share-option-check-list > div {
  margin-bottom: 8px;
}

.share-with .form-row.share-option-check-list > div .input-date,
.share-with .form-row.share-option-check-list > div .add-textbook {
  display: none;
  align-items: center;
  justify-content: center;
}

.share-with .form-row.share-option-check-list .input-date input {
  height: 46px;
}

.share-with .form-row.share-option-check-list .input-date input:first-child {
  margin-left: 24px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=radio] + label::before,
.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=radio] + label::after,
.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=checkbox] + label::before,
.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=checkbox] + label::after {
  top: 11px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=radio]:checked + label::after {
  top: 17px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=checkbox]:checked + label::after {
  top: 11px;
}

.share-with .form-row .share-with-item .selection.active .selection-option {
  display: block;
}

.share-with .form-row .share-with-item .selection .selection-option > div {
  padding: 0 6px;
  cursor: pointer;
  height: 42px;
  line-height: 42px;
  border-top: 1px solid #ddd;
}

.share-with .form-row .share-with-item .selection .selection-option > div:first-child {
  border-top: 0;
}

.share-with .form-row .share-with-item .selection .selection-option > div:hover {
  background-color: #eee;
  color: #000;
}

.share-with .form-row .share-with-item .selection .selection-option > div:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.share-with .form-row .share-with-item .selection .selection-option > div:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.ms-140 {
  margin-left: 140px;
}

.bullet-caution-green {
  display: flex;
  align-items: center;
}

.bullet-caution-green:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/images/container/icon-con-footer-btn-classtool-caution-d4b2f51a81b69d6bb2bd22dbe1384d87.svg") center center no-repeat;
  background-size: contain;
  margin-right: 4px;
}

.alert-button.type-rounded-gray-light {
  align-items: center;
  gap: 4px;
  padding-left: 12px;
  border-color: #ddd;
  border-radius: 100px;
  background-color: #f1f1f1;
}

.alert-button.type-rounded-gray-light:not(.button) {
  padding-right: 12px;
}

[data-js="tab-container"] > div {display:none}
[data-js="tab-container"] > div.active {display:block;}

.popup .header h3.makex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup .header h3.makex img {
  width: 20px;
  margin-right: 8px;
}

.template-select {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.template-select > div {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 31.2%;
  border-radius: 4px;
}

.template-select input[type="radio"] {
  display: block;
  border: 1px solid #ddd;
  padding: 0;
  width: 100%;
  height: 120px;
  border-radius: 4px;
  margin: 0 auto;
  cursor: pointer;
}

.template-select input[type="radio"]:checked {
  border: 1px solid var(--color-primary);
}

.template-select input[type="radio"]:checked ~ label {
  color: var(--color-primary);
  font-weight: 600;
}

.template-select input[type="radio"]#template01 {
  background: url(/assets/images/elementary/template-01-4a650504d06eb56e38cb297c8d4a0032.svg) center center no-repeat;
  background-size: 12%;
}

.template-select input[type="radio"]#template02 {
  background: url(/assets/images/elementary/template-02-f6695787520d6f0f7f3b2b27535eb0b5.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template03 {
  background: url(/assets/images/elementary/template-03-74c6d9a633b929e97ae67fb2a24321f9.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template04 {
  background: url(/assets/images/elementary/template-04-974dcfd670a8d4419aa3b41da2f6bfb7.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template05 {
  background: url(/assets/images/elementary/template-05-00337ee325dca945e15262fb6c1e2cd7.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template06 {
  background: url(/assets/images/elementary/template-06-9bdc486a8923e85be2fe9dac179e5b02.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template07 {
  background: url(/assets/images/elementary/template-07-d35dd75708f47c16161a6ff84457438a.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template08 {
  background: url(/assets/images/elementary/template-08-9d1a3ed92f77a209f6b41c306aff2439.png) center center no-repeat;
  background-size: contain;
}

.template-select input[type="radio"]#template09 {
  background: url(/assets/images/elementary/template-09-a8137667d96a7653ca9dc82d3d90165a.png) center center no-repeat;
  background-size: contain;
}
.teacher-share-btn-list{
  display: flex;
  gap: 10px;
  justify-content: end
}

/* [1566] 마이페이지 내자료 및 선생님 공유하기 고도화 aiclass 팝업 */
.container-subject-aiclass .essential-comment {
  display: flex;
  justify-content: flex-end;
}
.container-subject-aiclass .essential-comment:before {
  content: "*";
  display: inline-block;
  margin-right: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #f24a4a;
}

.popup-container .body > .essential-comment + .forms {
  margin-top: 0px;
}

.form-row {
  display: flex;
  align-items: center;
}
.flex-wrap {
  flex-wrap: wrap;
}
.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.ms-130 {
  margin-left: 130px;
}

.ms-140 {
  margin-left: 140px;
}

.mt-16 {
  margin-top: 16px !important;
}

.share-with .form-row {
  display: flex;
  gap: 10px;
}
.share-with .form-row .share-with-item {
  display: flex;
  align-items:center;
}

.share-with .form-row .share-with-item .school-name {
  width: 130px;
  display: flex;
  flex-wrap: wrap;
}
.share-with .form-row .share-with-item .selection {
  display: flex;
  position: relative;
  width: 130px;

}

.share-with .form-row .share-with-item .selection i.icon-select-arrow {
  position: absolute;
  right:10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  transition: all 300ms ease-in-out;
  background-image: url(/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.share-with .form-row .share-with-item .selection.active i.icon-select-arrow {
  transform: rotate(180deg);
  top: calc(50% - 10px);
}
i.icon-select-arrow {
  position: absolute;
  right:10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  transition: all 300ms ease-in-out;
  background-image: url(/assets/images/common/icon-chevron-down-7d56ef8855cd85283551b23a3e28d6f4.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.share-with .form-row .share-with-item .selection .selection-default {
  position: relative;
  display: flex;
  border: 1px solid #ddd;
  border-radius: 6px;
  align-items: center;
  padding: 0 24px 0 6px;
  width: 130px;
  flex-shrink: 0;
  height: 46px;
  cursor: pointer;
}

.share-with .form-row .share-with-item .selection .selection-default > div {
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-with .form-row .share-with-item .selection .selection-option {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  width: 130px;
  background-color: #fff;
  border-radius: 6px;
  border: 1px solid #ddd;
  z-index: 1000;
  display: none;
}

.share-with .form-row .share-with-item .add-class {
  display: flex;
  align-items: center;
}

.share-with .form-row .share-with-item .add-class > div {
  padding-left: 4px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item {
  display: flex;
  align-items: center;
  height: 42px;
  line-height: 42px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item label,
.share-with .form-row label  {
  margin-bottom: 0;
}

.share-with .form-row.share-option-check-list > div {
  width: 100%;
}

.share-with .form-row.share-option-check-list .add-textbook {
  /*padding-left: 24px;*/
  padding: 8px 0 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-group {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-group + .add-box-group {
  margin-top: 10px;
}
.share-with .form-row.share-option-check-list .add-textbook .add-box-item {
  display: flex;
  align-items: center;
  flex: 1;
  border: 1px solid #ddd;
  background-color: #f1f1f1;
  border-radius: 6px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item label {
  display: flex;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=checkbox] + label::before,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=checkbox] + label::after,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=radio] + label::before,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item .ox [type=radio] + label::after {
  left: 6px;
  top: 10px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item:has(:checked) {
  background-color: #fff;
}


.share-with .form-row.share-option-check-list .add-textbook .add-box-item:has(:checked) input:read-only:hover {
  border: 1px solid var(--color-primary);
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item input:read-only:hover,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item input:read-only:active,
.share-with .form-row.share-option-check-list .add-textbook .add-box-item input:read-only:focus {
  border: 1px solid #ddd;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .score {
  background-color: #fafafa;
  width: 70px;
  height: 30px;
  border-radius: 4px;
  text-align: center;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection {
  display: flex;
  width: 100%;
  position: relative;
  cursor: pointer;
  padding: 0 16px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection .text-truncate {
  width: 450px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item ~ button {
  width: 44px;
  height: 44px;
  padding: 0;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item ~ button svg {
  width: 20px;
  height: 20px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item span {
  padding: 6px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option {
  position: absolute;
  left: 188px;
  top: 54px;
  background-color: #fff;
  width: calc(100% - 240px);
  border-radius: 6px;
  border: 1px solid #ddd;
  z-index: 1000;
  display: none;
  overflow: auto;
  max-height: 150px;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option > div {
  padding: 8px;
  border-top: 1px solid #ddd;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option > div:first-child {
  border-top: 0;
}

.share-with .form-row.share-option-check-list .add-textbook .add-box-item .selection ~ .selection-option .date {
  text-align: right;
  font-size: 12px;
  color: #bbb;
}

.share-with .form-row.share-option-check-list .ox-group .ox label {
  margin-bottom: 4px;
}
.share-with .form-row.share-option-check-list .input-date {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
}

.share-with .form-row.share-option-check-list .input-date * {
  display: inline-flex;
}

.share-with .form-row.share-option-check-list:has(:checked) .input-date,
.share-with .form-row.share-option-check-list:has(:checked) .add-textbook {
  display: block;
}

.share-with .form-row.share-option-check-list > div {
  margin-bottom: 8px;
}

.share-with .form-row.share-option-check-list > div .input-date,
.share-with .form-row.share-option-check-list > div .add-textbook {
  display: none;
  align-items: center;
  justify-content: center;
}

.share-with .form-row.share-option-check-list .input-date input {
  height: 46px;
}

.share-with .form-row.share-option-check-list .input-date input:first-child {
  margin-left: 24px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=radio] + label::before,
.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=radio] + label::after,
.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=checkbox] + label::before,
.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=checkbox] + label::after {
  top: 11px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=radio]:checked + label::after {
  top: 17px;
}

.share-with .form-row .share-with-item .selection .selection-option > .check-item .ox [type=checkbox]:checked + label::after {
  top: 11px;
}

.share-with .form-row .share-with-item .selection.active .selection-option {
  display: block;
}

.share-with .form-row .share-with-item .selection .selection-option > div {
  padding: 0 6px;
  cursor: pointer;
  height: 42px;
  line-height: 42px;
  border-top: 1px solid #ddd;
}

.share-with .form-row .share-with-item .selection .selection-option > div:first-child {
  border-top: 0;
}

.share-with .form-row .share-with-item .selection .selection-option > div:hover {
  background-color: #eee;
  color: #000;
}

.share-with .form-row .share-with-item .selection .selection-option > div:first-child:hover {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.share-with .form-row .share-with-item .selection .selection-option > div:last-child:hover {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-qr-title .info-txt {
  margin-bottom: 16px;
  font-size: 15px;
  color: #1f1f1f;
  font-weight: 500;
  line-height: 1.3;
}

.share-qr-title .h3-info {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
}

.share-qr-title > div:last-child {
  padding-bottom: 16px;
  border-bottom:1px solid #ddd;
}

.share-qr-title .date span:first-child {
  font-weight: 15px;
  padding-right: 16px;
  color: #666;
  font-weight: 600;
}

.share-qr-group .info {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
}

.share-qr-item {
  background-color: #f4f4f4;
  border-radius: 4px;
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.share-qr-item .qr-img img {
  width: 120px;
  height: 120px;
}

.share-qr-item {
  margin-top: 16px;
}

.bullet-caution-green {
  display: flex;
  align-items: center;
}

.bullet-caution-green:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("/assets/images/container/icon-con-footer-btn-classtool-caution-d4b2f51a81b69d6bb2bd22dbe1384d87.svg") center center no-repeat;
  background-size: contain;
  margin-right: 4px;
}

.d-flex {
  display: flex;
}

.width-100per {
  width: 100%;
}

.makex-dimd {width:100%; height:100%; display:none; position:fixed; left:0; top:0; background-color:rgba(0,0,0,.5); z-index:9999}
.makex-dimd.active {display:block;}

/* #1580 교과활동 자료 list 자동채점 뱃지 */
.badge.autograde,
.chapter-items li .badge.autograde { background-color: #ffe699; color: #000; }

/* 댓글영역 : 내가 쓴 글의 수정, 삭제 버튼 노출방식 수정 */
.my-button-group {display: none;}
.flag-my .my-button-group  {display: block; position: absolute; top: 22px; right: 10px;}
.flag-my .my-button-group .items {display: flex; gap: 4px;}
.flag-my .my-button-group .items a {display: flex;}

#download-file .dimd {z-index:1002;}
#download-file .popup-container {z-index:1003;}
/* 퀵메뉴 추가 */
.fill-elementary-new,.fill-middle-new,.fill-high-new {
  background-color:var(--color-primary_header) !important ;
}

.quick_menu .menu-list .fill-elementary-new a,
.quick_menu .menu-list .fill-middle-new a,
.quick_menu .menu-list .fill-high-new a {
  height: 46px;
  line-height: 46px;
}
.quick_menu .menu-list .fill-elementary-new .tit,
.quick_menu .menu-list .fill-middle-new .tit,
.quick_menu .menu-list .fill-high-new .tit {
  background-color: #fff;
  color: #000;
  font-size: 15px;
}
.quick_menu.open .menu-list .fill-elementary-new .tit,
.quick_menu.open .menu-list .fill-middle-new .tit,
.quick_menu.open .menu-list .fill-high-new .tit {
  background-color: transparent;
  color: #fff;
}
/* #1566 팝업창 display 처리시 페이지 여백 삭제 */
.container:has(#snb) { gap: 0; }
.container #snb { margin-right: 48px; }

/* #1675 2025-03-14 [03/11]  초등에서 차시창 미제공 시, 라벨 추가 요청 건 (~03/20) */
.chapter-list .ox ~ .inner-wrap .text-wrap .badge img {
  margin-left: 0;
}
.badge.preparing,
.chapter-items li .badge.preparing { background-color: #aaa; color: #fff; min-height: 21px; font-size: 11px; padding-left: 4px; padding-right: 5px;} /* 2025-03-28 추가 */

.cursor {
    cursor: pointer;
} /* 티처라이브*/

/* #1705 플로팅 배너 추가 25-04-01 */
.floating_area { position: fixed; width: 160px; top: 210px; left: calc(50% + 680px); z-index: 98; }
.floating_area .banner { position: relative; width: 160px; max-width: 160px; margin-bottom: 20px; }
.floating_area .banner button,
.floating_area .banner a.btn-trans { position: absolute; font-size: 0; background: transparent; }
.floating_area .banner button.close-button { width: 24px; height: 24px; top: 0; right: 0; }
.floating_area .banner.awards button.close-button { border-radius: 50%; }
.floating_area .banner.awards a.btn-trans { width: 100%; height: 30px; right: 0; }
.floating_area .banner.awards a.btn-trans.btn1 { top: 168px; }
.floating_area .banner.awards a.btn-trans.btn2 { top: 203px; }
.floating_area .banner.event button.close-button { right: 33px; border-radius: 50%; }
.floating_area .banner.event a.btn-trans { width: 100%; height: 100px; right: 0; }
.floating_area .banner.event a.btn-trans.btn1 { top: 24px; }

/* #1863 메인 플로팅 배너 관리 추가 */
.floating_area .banner.event button.close-button { right: 0px; border-radius: 50%; }
.floating_area .banner.event a.btn-trans { width: 100%; height: calc(100% - 20px); right: 0; }
.floating_area .banner.event .close-button svg{ width:15px; height:15px; }

/* #1766 이벤트 공유하기 버튼 색 변경 */
.button.type-secondary.type-high {
  background-color: #58BC85;
  border-color: rgba(0,0,0,0.1);
}
.button.type-secondary.type-high:hover {
  background-color: #42A67E;
}
/* #1786 내 댓글 수정/삭제버튼 위치 조정 250430 */
.flag-my .my-button-group .items {flex-direction: column;}
.comments > ul > li.flag-my { padding-right: 120px; }

/* #1787 GNB padding 수정 250430 */
.lnb .depth-3 a {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* #1824 팝업 배너 투명 배경 옵션 추가 250522 */
.popup-container.popup-banner.popup-transparent {
  background-color: transparent;
  box-shadow: none;
}
.popup-container.popup-banner.popup-transparent .swiper-wrapper,
.popup-container.popup-banner.popup-transparent .image-popup {
  background: transparent;
}
.popup-container.popup-banner.popup-transparent .footer {
  border-top: 0;
  padding: 8px 0;
}
.popup-container.popup-banner.popup-transparent .footer label {
  color: #fff;
}

/* #1790 교과서 e-book 보기 */
.textbook-intro .book-link.is-ebook:has(.ebook-box) {
  margin-bottom: 28px;
}
.textbook-intro .book-link.is-ebook .ebook-box + span {
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 5px;
}
.textbook-intro .book-link.is-ebook .ebook-box + span svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 6px;
}
.textbook-intro .book-link.is-ebook:hover .ebook-box + span {
  color: var(--color-primary);
}

/* #1790 교과서 e-book 보기 */
.textbook-intro .book-link.is-ebook:has(.ebook-box) {
  margin-bottom: 28px;
}
.textbook-intro .book-link.is-ebook .ebook-box + span {
  text-align: center;
  display: block;
  width: 100%;
  margin-top: 5px;
}
.textbook-intro .book-link.is-ebook .ebook-box + span svg {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 6px;
}
.textbook-intro .book-link.is-ebook:hover .ebook-box + span {
  color: var(--color-primary);
}

/* 1800 이벤트 참여 버튼 비활성화 색 적용 */
.type-only-color-disabled,
.type-only-color-disabled:hover,
.type-only-color-disabled:focus,
.type-only-color-disabled:active {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: #838383;
  color: white;
  opacity: 0.5;
}
.bookmark_area.service { min-width: 120px; top: -10px; }
.bookmark_area.service:before { top: 22px; }

/* 1940 GNB 사이트맵 즐겨찾기 여백, 말줄임 */
.site-map .slider-view-auto .inner-wrap {
  margin-top: 0;
}
.site-map .slider-view-auto .title {
  color: #000;
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-word;
}

/* #1964 GNB 로고 관리 사이즈 변경 */
header.header .header-contents .buttons img { width: 100%; max-width: 90px; }
.gnb > ul { gap: 25px; }

/* #2016 메인 팝업 자동 롤링 기능 */
/* 이미지가 높이를 결정: 자연 비율 유지 */
#popup-slider .image-popup {
  position: relative;
}
#popup-slider .image-popup > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;

  /* 드래그/선택 방지 */
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* "자세히 보기" 버튼은 이미지 위에 겹침 */
#popup-slider .image-popup > .btn-link {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: auto;
}

/* 슬라이드 영역 확장 */
#popup-slider .swiper-container {
  position: relative;
  padding-bottom: 0;
  touch-action: pan-y;
}
#popup-slider .swiper-wrapper {
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
#popup-slider .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: hidden;
}
#popup-slider .controller {
  position: absolute;
  left: 40px;
  bottom: 12px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  background: none;
  padding: 0;
}
/* 슬라이드가 컨트롤러를 덮지 않게 기본 레이어 낮춤 */
#popup-slider .slides{
  position: relative;
  z-index: 1;
}

#popup-slider .slider-button{
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .7;
  transition: .15s;
  pointer-events: auto;
  touch-action: manipulation;
}
#popup-slider .slider-button:hover { opacity: 1; }
#popup-slider .slider-button svg {
  width: 12px;
  height: 12px;
  color: #111;
  fill: currentColor;
}

#popup-slider .indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#popup-slider .indicator .this-index {
  font: 600 14px/1 system-ui, sans-serif;
  color: #111;
}
#popup-slider .indicator .last-index {
  font: 600 14px/1 system-ui, sans-serif;
  color: rgba(0, 0, 0, .35);
}
#popup-slider .indicator .bar {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .18);
  overflow: hidden;
}
#popup-slider .indicator .bar .bar-thumb {
  display: block;
  height: 100%;
  width: 0%;
  background: #111;
  transition: width linear;
}
/* 기본 옅게, 호버 시 선명 */
#popup-slider .controls{
  display: flex;
  align-items: center;
  gap: 6px;
}
#popup-slider .footer{
  padding-top: 10px;
}

#popup-container .is-hidden {
  visibility: hidden;
}


/* #1790 스마트수업 탭에 new 아이콘 추가 25-05-27 */
.tab a {
    gap: 4px;
}

.tab-class-new {
    display: inline-block;
    padding: 6px 6px;
    border: 1px solid #E00404;
    border-radius: 24px;
    background: #E80202;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.board-items .board-item-new {
    position: absolute;
    right: 8px;
    top: -4px;
}

.board-items.type-vertical .board-item-new {
    position: absolute;
    left: 236px;
    top: -4px;
}
.new2 {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 2px;
    border: 1px solid transparent;
    border-radius: 2px;
    background: #fb647d;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    position: absolute;
    bottom: 5px;
    right: 0;
}

/* #2038 [09/08] 소셜 로그인 개선 25-09-19 */
/* 원본 소스와 다른 quick-menu -> quick_menu, login-box -> login_box 로 변경함 */
.sns-box button {
  overflow: initial;
}
.quick_menu .login_box .sns-box {
  gap: 4px;
}
.quick_menu .login_box .sns-box .recent {
  position: relative;
}
.quick_menu .login_box .sns-box .recent:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #F24A4A;
}

.quick_menu .login_box .sns-box .tit {
  display: none;
}

/* #2054 이벤트 댓글 파일첨부 기능 추가 25-10-16 */
.comment .write-box .split-container,
.comments .flag-modify .split-container { justify-content: space-between; }
.comment .write-box .split-container .buttons.left,
.comments .flag-modify .split-container .buttons.left { flex-grow: inherit; }
.comment-attach-thumb { display: flex; gap: 8px 16px; flex-wrap: wrap; margin: 8px 0 16px; }
.comment-attach-thumb dl { position: relative; margin: 8px 0 0; }
.comment-attach-thumb dl dt img,
.comments .flag-modify .comment-attach-thumb dl dt img { width: 112px; height: 84px; border-radius: 4px; object-fit: contain; background-color: var(--color-primary-100); }
.comment-attach-thumb dl dd { position: absolute; top: -8px; right: -8px; }
.comment-attach-thumb dl dd button,
.comment-attach-thumb dl dd button svg { width: 24px; height: 24px; color: #d2d2d2 !important; }
.comment-attach-thumb dl dd button:hover,
.comment-attach-thumb dl dd button:hover svg { color: #a4a4a4 !important; }
.comment-attach-li dl { display: flex; width:100%; min-height: 56px; padding: 14px 16px; border: 1px solid #ddd; background-color: #fff; justify-content: space-between; }
.comment-attach-li dl:first-of-type { border-radius: 4px 4px 0 0; }
.comment-attach-li dl:last-of-type { border-radius: 0 0 4px 4px; }
.comment-attach-li dl:only-of-type { border-radius: 4px; }
.comment-attach-li dl + dl { margin-top: -1px; }
.comment-attach-li dl dt { display: flex; align-items: center; color: #000 !important; min-width: 0; flex: 1; }
.comment-attach-li dl dt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; max-width: calc(100% - 40px); }
.comment-attach-li dl dt img { vertical-align: bottom; margin-right: 8px; width: 20px; height: 20px; }
/*.comment-attach-li dl dd { display: flex; align-items: center; }*/
.textarea .comment-attach-li dl dd .button.type-icon.size-sm svg,
.comments .flag-modify .comment-attach-li dl dd .button.type-icon.size-sm svg { width: 12px; height: 12px; }
.comment-attach-guide { padding: 32px 0 10px; }
.comment-attach-guide strong + button { margin-left: 4px; vertical-align: middle; }
.comment-attach-guide strong + button * { width: 20px; height: 20px; }
.comment-attach-guide ul { margin-top: 8px; }
.comment-attach-guide ul li { font-size: 14px; line-height: 24px; color: #838383 !important; }
.comments .comment-attach-thumb { margin: 8px 0; }
.comments .comment-attach-thumb dl dt img { /* width: 212px; height: 159px; */ width: 206px; height: 154px; }
.comments .flag-modify .split-container .buttons { align-items: center; margin-top: 0; }
.comments .flag-modify .comment-attach-thumb { margin: 8px 0 16px; }
.comments .flag-modify {background-color: #fafafa;}

/* #2073 금지어 경고문구 수정 25-10-23 */
.comment-caution-toast {
  position: absolute;
  right: 16px;
  top: calc(100% - 12px);
  display: flex;
  color: #f24a4a;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  background-color: #fff;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
}
.comment-caution-toast:before {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  margin-right: 4px;
  display: inline-block;
  content: "";
  background: url(/assets/images/common/icon-caution-filled-error-9d9b64c83028dcf8d3f5fc27d41fe302.svg) 0 center no-repeat;
  background-size: contain;
}
.comments .comment-modify {
  position: relative;
}
.comments .comment-modify .comment-caution-toast {
  top: calc(100% + 8px);
  right: 0;
}

/* #2073 금지어 경고문구 수정 25-11-11 */
.comment-caution-toast {
  position: absolute;
  right: 16px;
  top: calc(100% - 12px);
  display: flex;
  color: #f24a4a;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  background-color: #fff;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.07);
  z-index: 1;
}
table .table-caution-msg {
  display: flex;
  color: #f24a4a;
  padding-top: 12px;
}
.comment-caution-toast:before,
table .table-caution-msg:before {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  margin-right: 4px;
  display: inline-block;
  content: "";
  background: url(/assets/images/common/icon-caution-filled-error-9d9b64c83028dcf8d3f5fc27d41fe302.svg) 0 center no-repeat;
  background-size: contain;
}
.comment .textarea,
.write-box .textarea {
  position: relative;
}
.comments .comment-modify {
  position: relative;
}
.comments .comment-modify .comment-caution-toast {
  top: calc(100% + 8px);
  right: 0;
}
table td .error,
table td .error:hover,
.comments .comment-modify.error textarea,
.comments .comment-modify.error:hover textarea,
.comment .textarea.error,
.comment .textarea.error:hover {
  border: 1px solid #f24a4a !important;
}

/* #2098 플로팅 배너 위치 우->좌로 수정 25-12-08 */
.floating_area { left: initial; right: calc(50% + 680px); }