@charset "UTF-8";
/************************************************
 * 공통 스타일 변수
 ************************************************/
/************************************************
 * 컬러 시스템
 ************************************************/
/************************************************
 * 고대비 색상
 ************************************************/
/************************************************
 * 바디
 ************************************************/
/************************************************
 * 폰트
 ************************************************/
/************************************************
 * 유틸
 ************************************************/
/************************************************
 * 컴포넌트 공통 (컨트롤 공통)
 ************************************************/
/************************************************
 * 인풋 계열 컨트롤
 * → 인풋박스, 서치인풋, 파일인풋, 텍스트에리어
 *   데이트인풋, 넘버에디터, 마스크에디터, 콤보박스 일부
 ************************************************/
/************************************************
 * 셀렉션 계열 컨트롤
 * → 콤보박스 리스트, 리스트 박스, 트리, 사이드 내비게이션
 *   메뉴, 내비게이션바
 ************************************************/
/************************************************
 * 버튼
 ************************************************/
/************************************************
 * 폼
 ************************************************/
/************************************************
 * 테이블(그리드)
 ************************************************/
/************************************************
 * 탭 (탭 폴더/MDI 폴더)
 ************************************************/
/************************************************
 * 다이얼로그 (모달/팝업)
 ************************************************/
/************************************************
 * 캘린더
 * → 캘린더 및 데이트인풋의 캘린더
 ************************************************/
/************************************************
 * 전역 컨트롤 스타일시트
 ************************************************/
/* 모든 UIControl 공통 스타일 */
.cl-control {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
}
/* 오류 발생시 표시되는 메시지 스타일 */
.cl-scrollbar.cl-touchdevice::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 5px;
  height: 5px;
}
.cl-scrollbar.cl-touchdevice::-moz-scrollbar {
  -moz-appearance: none;
  width: 5px;
  height: 5px;
}
.cl-scrollbar.cl-touchdevice::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border: solid 1px transparent;
  background-clip: content-box;
}
.cl-scrollbar.cl-touchdevice::-moz-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  border: solid 1px transparent;
  background-clip: content-box;
}
body.cl-has-modal {
  overflow: hidden;
}
/* 넘버 에디터  */
.cl-numbereditor {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  text-align: left;
  /* 넘버 에디터 텍스트 */
  /* 넘버 에디터 클리어 버튼*/
  /* 넘버 에디터 disabled 상태  */
}
.cl-numbereditor .cl-text {
  padding: 0 12px;
}
.cl-numbereditor .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-numbereditor .cl-numbereditor-buttons {
  border-left: 1px solid #f1f2f5;
  /* 넘버 에디터 스핀 업 버튼 */
  /* 넘버 에디터 스핀 다운 버튼 */
}
.cl-numbereditor .cl-numbereditor-buttons.cl-vertical.cl-left,
.cl-numbereditor .cl-numbereditor-buttons.cl-horizontal.cl-left {
  border-right: 1px solid #f1f2f5;
}
.cl-numbereditor .cl-numbereditor-buttons .cl-numbereditor-increase {
  background: url("../images/component/common/ico_arr_up_16.svg") no-repeat center;
  background-size: contain;
}
.cl-numbereditor .cl-numbereditor-buttons .cl-numbereditor-decrease {
  background: url("../images/component/common/ico_arr_down_16.svg") no-repeat center;
  background-size: contain;
}
.cl-numbereditor .cl-numbereditor-clear {
  background: url("../images/component/common/ico_clear_20.svg") no-repeat center/contain;
  width: 20px;
  margin: 0px 6px 0px 0px;
}
.cl-numbereditor:not(.cl-disabled) {
  /* 넘버 에디터 스핀 업 버튼 호버 */
  /* 넘버 에디터 스핀 업 버튼 액티브  */
  /* 넘버 에디터 스핀 다운 버튼 호버 */
  /* 넘버 에디터 스핀 다운 버튼 액티브 */
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:hover {
  background-color: transparent;
  background-image: url("../images/component/common/ico_arr_up_16.svg");
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-increase:active {
  background-color: rgba(64, 81, 233, 0.1);
  background-image: url("../images/component/common/ico_arr_up_16.svg");
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:hover {
  background-color: transparent;
  background-image: url("../images/component/common/ico_arr_down_16.svg");
}
.cl-numbereditor:not(.cl-disabled) .cl-numbereditor-decrease:active {
  background-color: rgba(64, 81, 233, 0.1);
  background-image: url("../images/component/common/ico_arr_down_16.svg");
}
.cl-numbereditor.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-numbereditor.cl-focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
  border-color: #2d2d2d;
}
.cl-numbereditor.cl-focus .cl-numbereditor-buttons {
  border-left-color: #2d2d2d;
}
/* 데이트 인풋 */
.cl-dateinput {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 텍스트 */
  /* 버튼 */
  /* 클리어 버튼 */
  /* 스핀 버튼 */
  /* 비활성화 상태 */
  /* 포커스 상태 */
}
.cl-dateinput .cl-text {
  padding: 0 12px;
}
.cl-dateinput .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-dateinput .cl-dateinput-button {
  background: url("../images/component/common/ico_date.svg") no-repeat center/contain;
  width: 32px;
  height: 32px !important;
}
.cl-dateinput .cl-dateinput-button.cl-left {
  margin: 0 0 0 6px;
}
.cl-dateinput .cl-dateinput-button.cl-right {
  margin: 0 6px 0 0;
}
.cl-dateinput .cl-dateinput-button:hover {
  background-color: #e0e3e7;
  border-radius: 999px;
}
.cl-dateinput .cl-dateinput-clear {
  background: url("../images/component/common/ico_clear_20.svg") no-repeat center/contain;
  width: 16px;
  margin: 0px 6px 0px 0px;
}
.cl-dateinput .cl-dateinput-spinbuttons {
  border-left: 1px solid #f1f2f5;
  /* 증가 버튼 */
  /* 감소 버튼 */
}
.cl-dateinput .cl-dateinput-spinbuttons .cl-dateinput-increase {
  background: url("../images/component/common/ico_arr_up_16.svg") no-repeat center;
  background-size: contain;
}
.cl-dateinput .cl-dateinput-spinbuttons .cl-dateinput-decrease {
  background: url("../images/component/common/ico_arr_down_16.svg") no-repeat center;
  background-size: contain;
}
.cl-dateinput:not(.cl-disabled) .cl-dateinput-increase:hover {
  background-color: transparent;
  background-image: url("../images/component/common/ico_arr_up_16.svg");
}
.cl-dateinput:not(.cl-disabled) .cl-dateinput-increase:active {
  background-color: rgba(64, 81, 233, 0.1);
  background-image: url("../images/component/common/ico_arr_up_16.svg");
}
.cl-dateinput:not(.cl-disabled) .cl-dateinput-decrease:hover {
  background-color: transparent;
  background-image: url("../images/component/common/ico_arr_down_16.svg");
}
.cl-dateinput:not(.cl-disabled) .cl-dateinput-decrease:active {
  background-color: transparent;
  background-image: url("../images/component/common/ico_arr_down_16.svg");
}
.cl-dateinput.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-dateinput.cl-disabled .cl-dateinput-button {
  background-image: url("../images/component/common/ico_date_disabled.svg");
}
.cl-dateinput.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
/* 캘린더 */
.cl-calendar {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #ffffff;
  border-color: #e0e3e7;
  border-radius: 12px;
  color: #2d2d2d;
  padding: 0;
  /* 이전 년도 버튼 */
  /* 다음 년도 버튼 */
  /* 이전 달 버튼 */
  /* 다음 달 버튼 */
  /* 캘린더 헤더 */
  /* 캘린더 컨텐츠의 일, 월, 년 스타일 */
  /* 캘린더 컨텐츠 스타일 */
  /* 캘린더 푸터 */
  /* font-size로 디테일과 날짜와의 간격을 설정합니다. */
  /* font-size로 이벤트 막대와의 간격을 설정합니다. 막대의 height보다 커야 합니다. */
  /* height로 막대의 높이를 설정합니다. */
  /* 캘린더 아이템, 기념일 스타일 */
  /* 기념일을 표시하는 캘린더 스타일 */
  /* 포커스 상태 */
  /* 데이트인풋 등에 팝업으로 나타날때 스타일 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-before.cl-hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-before:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-after.cl-hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-after:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev.cl-hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next.cl-hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-text.cl-hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-text:hover {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-before {
  /* 호버 상태 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-prev.cl-hover {
  background-image: url("../images/component/common/ico_cal_prev.svg");
}
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-header-next.cl-hover {
  background-image: url("../images/component/common/ico_cal_next.svg");
}
.cl-calendar .cl-calendar-header {
  background-color: transparent;
  border-bottom: #aaafb6;
  padding: 16px 12px 8px 24px;
  gap: 0 2px;
  /* 년도 버튼 공통 */
  /* 이전 년도 버튼 */
  /* 다음 년도 버튼 */
  /* 이전 달 버튼 */
  /* 다음 달 버튼 */
  /* 헤더 텍스트 */
}
.cl-calendar .cl-calendar-header .cl-calendar-header-before,
.cl-calendar .cl-calendar-header .cl-calendar-header-after,
.cl-calendar .cl-calendar-header .cl-calendar-header-prev,
.cl-calendar .cl-calendar-header .cl-calendar-header-next {
  background-size: 34px;
  width: 34px;
  min-height: 34px;
}
.cl-calendar .cl-calendar-header .cl-calendar-header-prev {
  background-image: url("../images/component/common/ico_cal_prev.svg");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-next {
  background-image: url("../images/component/common/ico_cal_next.svg");
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text {
  display: flex;
  align-items: center;
  color: #2d2d2d;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text:hover,
.cl-calendar .cl-calendar-header .cl-calendar-header-text.cl-hover {
  color: #2d2d2d;
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text:first-child {
  text-align: left;
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text:last-child {
  text-align: right;
}
.cl-calendar .cl-calendar-header .cl-calendar-header-text::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
  background: url("../images/component/common/ico_cal_select.svg") no-repeat center;
  margin-left: 6px;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year,
.cl-calendar:not(.cl-disabled) .cl-other-month {
  overflow: visible;
  /* 일, 월, 년 스타일 공통 */
  /* 셀 호버 스타일 */
  /* 기본 날짜 - 오늘 날짜 셀 */
  /* range 선택에서 선택된 날짜 스타일 */
  /* 선택된 날짜 셀 */
  /* 키보드 날짜 이동 스타일 */
  /* 셀 숨김 스타일 */
  /* 비활성화 셀 */
  /* 기념일 전역 스타일 */
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-other-month:not(.cl-disabled):hover {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px #c9cdd2;
  color: inherit;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-calendar-defaultdate,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-calendar-defaultdate,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-calendar-defaultdate,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-calendar-defaultdate {
  background-color: transparent;
  color: inherit;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-range-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-range-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-range-selected,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-range-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-range-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-range-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-range-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-range-selected:not(.cl-disabled):hover {
  background-color: #4051e9;
  color: #ffffff;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected:not(.cl-disabled):hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected.cl-calendar-current,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected.cl-calendar-current,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected.cl-calendar-current,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected.cl-calendar-current {
  background-color: #4051e9;
  box-shadow: none;
  color: #ffffff !important;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected:not(.cl-disabled):hover.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected:not(.cl-disabled):hover.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected:not(.cl-disabled):hover.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected:not(.cl-disabled):hover.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-selected.cl-calendar-current.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-selected.cl-calendar-current.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-selected.cl-calendar-current.cl-calendar-content-sun,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-selected.cl-calendar-current.cl-calendar-content-sun {
  color: #ffffff;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-calendar-current,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-calendar-current,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-calendar-current,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-calendar-current {
  background-color: inherit;
  box-shadow: none;
  color: inherit;
  outline-offset: 0;
  outline: 2px solid #00cbde;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-hidden:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-hidden:hover,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-hidden:hover,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-hidden:hover {
  background-color: transparent;
  box-shadow: none;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-calendar-anniversary,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-calendar-anniversary,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-calendar-anniversary,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-calendar-anniversary {
  box-shadow: none;
  color: inherit;
}
.cl-calendar:not(.cl-disabled) .cl-calendar-content-day.cl-calendar-anniversary::before,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-month.cl-calendar-anniversary::before,
.cl-calendar:not(.cl-disabled) .cl-calendar-content-year.cl-calendar-anniversary::before,
.cl-calendar:not(.cl-disabled) .cl-other-month.cl-calendar-anniversary::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: calc(50% - 2px);
  width: 4px;
  height: 4px;
  background-color: #4051e9;
  border-radius: 999px;
}
.cl-calendar .cl-calendar-content-wrapper {
  overflow: visible;
  padding: 0px 27px 25px;
}
.cl-calendar .cl-calendar-content {
  gap: 12px 0;
  /* week of year의 스타일 */
  /* 날짜 달력의 헤더 스타일 */
  /* 날짜 선택 모드시 날짜 스타일 */
  /* 이전 달 또는 다음 달의 날짜 */
}
.cl-calendar .cl-calendar-content > *:first-child + * {
  gap: 2px;
  justify-items: center;
  align-items: center;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-week {
  background-color: transparent;
  color: #2d2d2d;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-header {
  background-color: transparent;
  border: none;
  color: #717171;
  font-weight: 500;
  height: 36px;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day {
  width: 36px;
  height: 36px;
  /* 일요일 셀 */
  /* 토요일 셀 */
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sun {
  color: #8e8e8e;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sat {
  color: #2d2d2d;
}
.cl-calendar .cl-calendar-content .cl-other-month {
  background-color: transparent;
  border: 0;
  color: #aaaaaa;
  /* 비활성화 상태 */
}
.cl-calendar .cl-calendar-content .cl-other-month.cl-disabled {
  color: #aaaaaa;
}
.cl-calendar .cl-calendar-content .cl-calendar-content-day,
.cl-calendar .cl-calendar-content .cl-other-month,
.cl-calendar .cl-calendar-content .cl-calendar-content-month,
.cl-calendar .cl-calendar-content .cl-calendar-content-year {
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.17px;
}
.cl-calendar .cl-calendar-footer {
  background-color: transparent;
}
.cl-calendar .cl-calendar-footer .cl-calendar-footer-text {
  font: 400 15px "Pretendard GOV", sans-serif;
  float: right;
}
.cl-calendar .cl-calendar-footer.cl-hover:not(.cl-disabled) .cl-calendar-footer-text,
.cl-calendar .cl-calendar-footer .cl-calendar-footer-text:hover {
  text-decoration: none;
}
.cl-calendar .cl-calendar-item,
.cl-calendar .cl-anniversary,
.cl-calendar .cl-calendar-more {
  /* line-height로 텍스트의 위치를 정렬합니다. height와 값이 같으면 가운데 정렬입니다. */
}
.cl-calendar .cl-calendar-item,
.cl-calendar .cl-anniversary {
  /* 숨김 상태 */
  /* 선택 상태 */
}
.cl-calendar.cl-anniversaries {
  /* 년월일 달력 스타일 */
}
.cl-calendar.cl-anniversaries .cl-calendar-content-day,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-mon,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-tue,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-wed,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-thu,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-fri,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-sat,
.cl-calendar.cl-anniversaries .cl-other-month.cl-calendar-content-sun {
  /* 기념일 텍스트 스타일 */
}
.cl-calendar.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-calendar.cl-popup {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
  /* 년도 캘린더 */
  /* 년월 캘린더 */
  /* 년월일 캘린더 */
  /* 데이트인풋 위에 표시될때 상태 */
  /* 데이트인풋 아래에 표시될때 상태 */
}
.cl-calendar.cl-popup.cl-calendar-year {
  width: 320px;
  height: 217px;
}
.cl-calendar.cl-popup.cl-calendar-month {
  width: 320px;
  height: 217px;
}
.cl-calendar.cl-popup.cl-calendar-day {
  width: 320px;
  height: 359px;
}
.cl-calendar.cl-popup.cl-top {
  margin-top: -4px;
}
.cl-calendar.cl-popup.cl-bottom {
  margin-top: 4px;
}
.cl-calendar.cl-popup .cl-calendar-content-day .cl-calendar-current,
.cl-calendar.cl-popup .cl-calendar-content-month .cl-calendar-current,
.cl-calendar.cl-popup .cl-calendar-content-year .cl-calendar-current {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
/* 캘린더 disabled 상태 */
.cl-calendar.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
  opacity: 1;
}
.cl-calendar.cl-disabled .cl-calendar-header {
  background-color: #eaeaea;
}
.cl-calendar.cl-disabled .cl-calendar-header .cl-calendar-header-text {
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-header .cl-calendar-header-text:hover,
.cl-calendar.cl-disabled .cl-calendar-header .cl-calendar-header-text.cl-hover {
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-content .cl-calednar-conten-header {
  background-color: transparent;
  border-bottom-color: #eaeaea;
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-content .cl-calendar-content-week:not(.cl-calendar-content-header) {
  background-color: #ebf0f3;
  color: #2d2d2d;
}
.cl-calendar.cl-disabled .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sun {
  /* 일요일 셀 */
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sat {
  /* 토요일 셀 */
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-content-day,
.cl-calendar.cl-disabled .cl-calendar-content-month,
.cl-calendar.cl-disabled .cl-calendar-content-year,
.cl-calendar.cl-disabled .cl-other-month {
  background-color: transparent;
  color: #aaaaaa;
  /* 셀 호버 스타일 */
}
.cl-calendar.cl-disabled .cl-calendar-content-day:not(.cl-disabled):hover,
.cl-calendar.cl-disabled .cl-calendar-content-month:not(.cl-disabled):hover,
.cl-calendar.cl-disabled .cl-calendar-content-year:not(.cl-disabled):hover,
.cl-calendar.cl-disabled .cl-other-month:not(.cl-disabled):hover,
.cl-calendar.cl-disabled .cl-calendar-content-day.cl-selected,
.cl-calendar.cl-disabled .cl-calendar-content-month.cl-selected,
.cl-calendar.cl-disabled .cl-calendar-content-year.cl-selected,
.cl-calendar.cl-disabled .cl-other-month.cl-selected {
  background-color: transparent;
}
.cl-calendar.cl-disabled .cl-calendar-content-day.cl-selected,
.cl-calendar.cl-disabled .cl-calendar-content-month.cl-selected,
.cl-calendar.cl-disabled .cl-calendar-content-year.cl-selected,
.cl-calendar.cl-disabled .cl-other-month.cl-selected {
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-content-day.cl-calendar-defaultdate,
.cl-calendar.cl-disabled .cl-calendar-content-month.cl-calendar-defaultdate,
.cl-calendar.cl-disabled .cl-calendar-content-year.cl-calendar-defaultdate,
.cl-calendar.cl-disabled .cl-other-month.cl-calendar-defaultdate {
  background-color: transparent;
  color: #aaaaaa;
}
.cl-calendar.cl-disabled .cl-calendar-footer .cl-calendar-footer-text {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
/* 리스트 박스 */
.cl-listbox {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #ffffff;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 리스트 박스내 아이템 목록 박스 */
  /* disabled 상태 */
  /* focus 상태 */
}
.cl-listbox .cl-listbox-list {
  /* 아이템 목록 박스내 각 아이템 */
}
.cl-listbox .cl-listbox-list .cl-listbox-item {
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  /* 아이템 드래그시 마우스가 아이템의 아래에 위치할때 표시 */
  /* 아이템 드래그시 마우스가 아이템의 위에 위치할때 표시 */
  /* 선택된 아이템 */
  /* 아이템 아이콘 */
  /* 아이템 텍스트 */
  /* 아이템의 뱃지 스타일 */
}
.cl-listbox .cl-listbox-list .cl-listbox-item.cl-dropbottom {
  box-shadow: inset 0 -2px 0 #2d2d2d;
}
.cl-listbox .cl-listbox-list .cl-listbox-item.cl-droptop {
  box-shadow: inset 0 2px 0 #2d2d2d;
}
.cl-listbox .cl-listbox-list .cl-listbox-item.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
.cl-listbox.cl-disabled {
  border-color: #eaeaea;
  color: #aaaaaa;
  /* disabled 상태에서 선택된 아이템들 */
}
.cl-listbox.cl-disabled .cl-listbox-list {
  background-color: #eaeaea;
}
.cl-listbox.cl-disabled .cl-listbox-list .cl-listbox-item.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-listbox.cl-focus,
.cl-listbox:focus {
  border-color: #2d2d2d;
}
.cl-listbox:not(.cl-disabled) .cl-listbox-item:not(.cl-disabled):not(.cl-selected) {
  /* 포커스된 아이템 */
  /* 호버된 아이템 */
}
.cl-listbox:not(.cl-disabled) .cl-listbox-item:not(.cl-disabled):not(.cl-selected):focus {
  background-color: transparent;
  color: #2c2d31;
}
.cl-listbox:not(.cl-disabled) .cl-listbox-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-listbox:not(.cl-disabled) .cl-listbox-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: transparent;
  color: #2c2d31;
}
/* 링크드 리스트 박스 루트 */
.cl-linkedlistbox {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  /* 리스트 박스 */
  /* 링크드리스트박스 disabled 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox {
  /* 리스트 박스 헤더 */
  /* 리스트 박스 리스트 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-header {
  border: 1px solid #f1f2f5;
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list {
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  /* 리스트 박스 리스트 아이템 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item {
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  /* 아이템 드래그시 마우스가 아이템의 아래에 위치할때 표시 */
  /* 아이템 드래그시 마우스가 아이템의 위에 위치할때 표시 */
  /* 리스트 박스의 리스트 아이템 아이콘 */
  /* 리스트 박스 리스트 아이템 텍스트 */
  /* 리스트 박스 리스트 아이템 리프 아이콘 */
  /* 리스트 박스 리스트 아이템 드릴다운 아이콘 */
  /* 리스트 박스 리스트 아이템 - disabled 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-dropbottom {
  box-shadow: inset 0 -2px 0 #2d2d2d;
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-droptop {
  box-shadow: inset 0 2px 0 #2d2d2d;
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item .cl-linkedlistbox-arrow.cl-folder {
  background-image: url("../images/component/common/ico_arr_right_20.svg");
  background-size: contain;
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-disabled {
  color: #aaaaaa;
  /* 리스트 박스 리스트 아이템 - 선택됨, disabled 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-disabled.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-linkedlistbox .cl-linkedlistbox-listbox.cl-focus {
  /* 리스트 박스 리스트 - 포커스 상태 */
}
.cl-linkedlistbox .cl-linkedlistbox-listbox.cl-focus .cl-linkedlistbox-list {
  border-color: #2d2d2d;
}
.cl-linkedlistbox.cl-disabled {
  color: #aaaaaa;
}
.cl-linkedlistbox.cl-disabled .cl-linkedlistbox-list {
  background-color: #eaeaea;
  border-color: #eaeaea;
}
.cl-linkedlistbox.cl-disabled .cl-linkedlistbox-list .cl-linkedlistbox-item.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled) {
  cursor: pointer;
  /* 아이템 호버 스타일 */
  /* 선택된 아이템 스타일 */
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled):hover,
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled):focus {
  background-color: transparent;
  color: #2c2d31;
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled):hover .cl-linkedlistbox-arrow.cl-folder,
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled):focus .cl-linkedlistbox-arrow.cl-folder {
  background-image: url("../images/component/common/ico_arr_right_20.svg");
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled).cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
  /* 선택된 아이템 드릴 다운 아이콘 */
}
.cl-linkedlistbox:not(.cl-disabled) .cl-linkedlistbox-item:not(.cl-disabled).cl-selected .cl-linkedlistbox-arrow.cl-folder {
  background-image: url("../images/component/common/P_ico_arr_right_20.svg");
}
/* 메뉴 루트 */
.cl-menu {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  overflow: visible !important;
  /* 메뉴 리스트 */
}
.cl-menu .cl-menu-list {
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
  padding: 8px;
  /* 서브 메뉴 */
  /* 스크롤 업 버튼 */
  /* 스크롤 다운 버튼 */
  /* 메뉴 아이템 */
}
.cl-menu .cl-menu-list.cl-sub {
  border: 1px solid #e4e4e4;
  margin-left: -1px;
}
.cl-menu .cl-menu-list .cl-arrow-up:hover,
.cl-menu .cl-menu-list .cl-arrow-down:hover,
.cl-menu .cl-menu-list .cl-arrow-up.cl-disabled,
.cl-menu .cl-menu-list .cl-arrow-down.cl-disabled {
  background-color: transparent;
}
.cl-menu .cl-menu-list .cl-menu-item {
  color: inherit;
  height: auto;
  min-height: 40px;
  padding: 0 16px;
  /* 메뉴 아이템 아이콘 */
  /* 메뉴 아이템 텍스트 */
  /* 메뉴 아이템 단축키 */
  /* 메뉴 아이템 드릴다운 아이콘 */
  /* 폴더 아이템 방향 이미지 */
  /* 메뉴 아이템 - disabled */
}
.cl-menu .cl-menu-list .cl-menu-item .cl-menu-icon {
  background-size: contain;
  width: 0;
  height: 0;
}
.cl-menu .cl-menu-list .cl-menu-item .cl-menu-accesskey {
  color: #8e8e8e;
}
.cl-menu .cl-menu-list .cl-menu-item .cl-menu-arrow {
  background-size: contain;
  width: 20px;
  height: 20px;
}
.cl-menu .cl-menu-list .cl-menu-item.cl-hover,
.cl-menu .cl-menu-list .cl-menu-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-menu .cl-menu-list .cl-menu-item:not(.cl-disabled).cl-hover {
  background-color: rgba(64, 81, 233, 0.08);
  color: #2c2d31;
}
.cl-menu .cl-menu-list .cl-menu-item.cl-selected {
  background-color: rgba(64, 81, 233, 0.08);
  color: #4051e9;
}
.cl-menu .cl-menu-list .cl-menu-item.cl-disabled {
  color: #aaaaaa;
  /* 메뉴 아이템 - 선택됨, disabled */
}
.cl-menu .cl-menu-list .cl-menu-item.cl-disabled.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-menu:not(.cl-disabled) .cl-menu-list .cl-menu-item.cl-hover,
.cl-menu:not(.cl-disabled) .cl-menu-list .cl-menu-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-menu:not(.cl-disabled) .cl-menu-list .cl-menu-item:not(.cl-disabled).cl-hover {
  background-color: rgba(64, 81, 233, 0.08);
  color: #2c2d31;
}
.cl-menu.cl-focus {
  /* 메뉴 리스트 - 포커스 */
}
.cl-menu.cl-focus .cl-menu-list {
  border-color: #e4e4e4;
}
.cl-menu.cl-disabled .cl-menu-item {
  color: #aaaaaa;
}
.cl-menu.cl-disabled .cl-menu-item.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
/* 파일 업로드 루트 */
.cl-fileupload {
  font: 400 15px "Pretendard GOV", sans-serif;
  border: 0;
  /* 파일 업로드 내 텍스트 */
  /* 헤더 */
  /* 파일 업로드 디테일 영역 */
  /* 푸터 */
  /* 파일 업로드 체크 박스 */
}
.cl-fileupload .cl-fileupload-header {
  background-color: #fafafa;
  background-image: none;
  border: 0;
  border-radius: 8px;
  height: auto;
  padding: 16px;
  /* 헤더내 체크 박스 */
  /* 파일명 헤더 컬럼 */
  /* 파일 크기 헤더 컬럼 */
}
.cl-fileupload .cl-fileupload-header .cl-fileupload-checkheader {
  border-right: 0;
  width: 24px;
}
.cl-fileupload .cl-fileupload-header .cl-fileupload-nameheader {
  color: #6a6a6a;
  padding-left: 12px;
  text-align: left;
}
.cl-fileupload .cl-fileupload-header .cl-fileupload-sizeheader {
  border-left: 0;
  color: #6a6a6a;
  min-width: 80px;
}
.cl-fileupload .cl-fileupload-detail {
  /* emptyMessage */
  /* 각 파일 행 */
  /* 업로드된 파일 */
}
.cl-fileupload .cl-fileupload-detail .cl-emptymsg {
  color: #8e8e8e;
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile {
  border-bottom: 1px solid #eaeaea;
  height: auto;
  padding: 16px;
  /* 체크 박스 컬럼 */
  /* 파일 아이콘 */
  /* 피일 이름 */
  /* 파일 크기 */
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon {
  background-image: url("../images/component/common/ico_file.svg");
  background-size: 24px;
  margin-left: 12px;
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-txt,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-txt {
  background-image: url("../images/component/common/ico_file.svg");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-png,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-png,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-gif,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-gif,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-jpg,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-jpg,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-jpeg,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-jpeg {
  background-image: url("../images/component/common/ico_file_pic.svg");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-avi,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-avi,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-mp4,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-mp4,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-mov,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-mov,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-wmv,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-wmv,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-mkv,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-mkv {
  background-image: url("../images/component/common/ico_file_video.svg");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-zip,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-zip {
  background-image: url("../images/component/common/ico_file_zip.svg");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-fileicon.cl-filetype-pdf,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-fileicon.cl-filetype-pdf {
  background-image: url("../images/component/common/ico_file_pdf.svg");
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-filename,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-filename {
  color: #111111;
  font-weight: 500;
  padding-left: 12px;
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-file .cl-fileupload-sizecolumn,
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-sizecolumn {
  color: #444444;
  min-width: 80px;
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile {
  /* 파일 다운로드 버튼 */
}
.cl-fileupload .cl-fileupload-detail .cl-fileupload-uploadedfile .cl-fileupload-download {
  background-image: url("../images/component/common/ico_file_down.svg");
  background-size: 24px;
}
.cl-fileupload .cl-fileupload-footer {
  background-color: #f8f8ff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  height: auto;
  padding: 16px;
  /* 푸터 텍스트 */
  /* 푸터 내 버튼 영역 */
}
.cl-fileupload .cl-fileupload-footer .cl-text {
  color: #6a6a6a;
  font-weight: 400;
  padding: 0;
}
.cl-fileupload .cl-fileupload-footer .cl-text .keyword {
  color: #4051e9;
  font-weight: 600;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons {
  padding: 0;
  /* 푸터 내 버튼 */
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  border-radius: 8px;
  font-weight: 500;
  margin: 0 0 0 4px;
  padding: 7.5px 16px;
  text-shadow: none;
  background-color: #ffffff;
  border-color: #dddddd;
  color: #444444;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button:focus {
  background-color: #ffffff;
  border-color: #dddddd;
  color: #444444;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button:hover {
  background-color: #f1f2f5;
  border-color: #dddddd;
  color: #444444;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button:active {
  background-color: #e0e3e7;
  border-color: #dddddd;
  color: #444444;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button.cl-fileupload-send {
  background-color: #ffffff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button.cl-fileupload-send:focus {
  background-color: #ffffff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button.cl-fileupload-send:hover {
  background-color: #f3f5ff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-fileupload .cl-fileupload-footer .cl-fileupload-buttons .cl-fileupload-button.cl-fileupload-send:active {
  background-color: #e3e6ff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-fileupload .cl-fileupload-checkbox {
  background-image: url("../images/component/common/ico_check.svg");
  background-size: contain;
  width: 24px;
  height: 24px;
  /* 선택된 파일 업로드 체크 박스 */
}
.cl-fileupload .cl-fileupload-checkbox.cl-checked {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-fileupload .cl-fileupload-checkbox:focus {
  background-image: url("../images/component/common/ico_check.svg");
}
.cl-fileupload .cl-fileupload-checkbox:focus.cl-checked {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-fileupload:not(.cl-disabled) {
  /* 파일 - 호버 상태 */
  /* 파일 업로드 버튼 - 호버 상태 */
}
.cl-fileupload:not(.cl-disabled) .cl-fileupload-file:hover,
.cl-fileupload:not(.cl-disabled) .cl-fileupload-uploadedfile:hover {
  background-color: #f0f1fe;
  color: #2d2d2d;
}
@media (max-width: 767px) {
  .cl-fileupload .cl.fileupload-footer > * {
    display: felx !important;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 12px;
  }
  .cl-fileupload .cl.fileupload-footer .cl-fileupload-buttons {
    text-align: center;
  }
}
/* 버튼 */
.cl-button {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #4051e9;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #4051e9;
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 0 !important;
  padding: 0 19px;
  text-shadow: none;
  /* 텍스트 스타일 */
  /* 아이콘 스타일 */
  /* 마우스 호버 스타일 */
  /* 포커스 스타일 */
  /* 클릭 스타일 */
}
.cl-button .cl-text {
  line-height: 1.5 !important;
}
.cl-button .cl-text-wrapper {
  gap: 6px;
}
.cl-button .cl-icon {
  background-size: contain;
  height: 24px;
  width: 24px;
}
.cl-button:not(.cl-disabled):hover {
  background-color: #2f41d0;
  border-color: #2f41d0;
  color: #ffffff;
}
.cl-button.cl-focus {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
  outline-offset: 0px;
  outline: 2px solid #00cbde;
}
.cl-button:not(.cl-disabled).cl-activated,
.cl-button:not(.cl-disabled):active {
  background-image: none;
  background-color: #1e33b8;
  border-color: #1e33b8;
  color: #ffffff;
}
/* Disable 상태의 버튼 */
.cl-button.cl-disabled {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
  opacity: 0.3;
}
/* 아코디언 */
.cl-accordion {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: transparent;
  border: 0;
  color: #2d2d2d;
  padding: 0;
  /* 아코디언의 각 헤더 */
  /* 아코디언 컨텐츠를 감싸는 영역 */
  /* 아코디언 섹션 */
}
.cl-accordion .cl-accordion-header {
  background-color: #ffffff;
  border: 1px solid #EEE;
  border-radius: 8px;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  padding: 24px;
  /* 아코디언 펼침 버튼 */
  /* 아코디언 헤더에 마우스가 호버되었을 떄의 스타일 */
  /* 아코디언 헤더 비활성화 상태 */
  /* 아코디언 헤더를 클릭했을 때의 스타일 */
}
.cl-accordion .cl-accordion-header .cl-text {
  padding-right: 20px;
}
.cl-accordion .cl-accordion-header .cl-accordion-expander {
  background-image: url("../images/component/common/ico_arr_down_24.svg");
  width: 24px;
  height: 24px;
}
.cl-accordion .cl-accordion-header.cl-title-collapse:focus {
  text-decoration: none;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-accordion .cl-accordion-header:hover:not(.cl-disabled) {
  background-color: #ffffff;
  color: #2d2d2d;
}
.cl-accordion .cl-accordion-header.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-accordion .cl-accordion-header.cl-activated {
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: #2D2D2D;
  background-color: #ffffff;
  border-color: #EEE;
  /* 클릭된 헤더의 펼침 버튼 아이콘 */
}
.cl-accordion .cl-accordion-header.cl-activated .cl-accordion-expander {
  background-image: url("../images/component/common/ico_arr_down_24.svg");
  transform: rotate(-180deg);
}
.cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) {
  background-color: #ffffff;
  padding: 0 24px 24px 24px;
  border-radius: 0 0 8px 8px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  /* 아코디언 컨텐츠 */
}
.cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) .cl-accordion-content {
  background-color: #F4F7FB;
  border-top: 0;
  padding: 32px 24px;
  border-radius: 8px;
  border: none;
}
.cl-accordion .cl-accordion-section:not(.cl-accordion-placeholder) .cl-accordion-content .cl-text {
  color: #2D2D2D;
  font-weight: 500;
  font-size: 17px;
}
.cl-accordion .cl-accordion-section + .cl-accordion-header {
  margin-top: 12px;
}
.cl-accordion.cl-disabled {
  /* 선택된 헤더 */
}
.cl-accordion.cl-disabled .cl-accordion-header {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
  /* 아코디언 헤더가 선택된 경우 */
  /* 아코디언 헤더에 마우스가 호버되었을 떄의 스타일 */
}
.cl-accordion.cl-disabled .cl-accordion-header.cl-activated {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-accordion.cl-disabled .cl-accordion-header:hover:not(.cl-activated) {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-accordion.cl-disabled .cl-accordion-section:not(.cl-accordion-placeholder) {
  /* 선택된 바디 */
}
.cl-accordion.cl-disabled .cl-accordion-section:not(.cl-accordion-placeholder) .cl-accordion-content {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
@media (max-width: 1023px) {
  .cl-accordion-header {
    padding: 24px 18px !important;
  }
  .cl-accordion-header.cl-activated {
    padding-bottom: 18px !important;
  }
  .cl-accordion-section:not(.cl-accordion-placeholder) {
    padding: 0px 18px 24px 18px !important;
  }
}
@media (max-width: 360px) {
  /* 아코디언의 각 헤더 */
  .cl-accordion-header {
    /* 아코디언 펼침 버튼 */
    /* 아코디언 헤더를 클릭했을 때의 스타일 */
  }
  .cl-accordion-header .cl-text {
    padding-right: 12px !important;
  }
  .cl-accordion-header .cl-accordion-expander {
    background-image: url("../images/component/common/ico_arr_down_black.png") !important;
    width: 20px !important;
    height: 20px !important;
  }
  .cl-accordion-header.cl-activated {
    /* 클릭된 헤더의 펼침 버튼 아이콘 */
  }
  .cl-accordion-header.cl-activated .cl-accordion-expander {
    background-image: url("../images/component/common/ico_arr_down_black.png") !important;
  }
}
.cl-htmlsnippet {
  overflow: auto !important;
}
/* 인풋 박스 루트 */
.cl-inputbox {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 인풋 박스 텍스트 */
  /* 인풋 박스 - 클리어 버튼 */
  /* 인풋 박스 - disabled 상태 */
  /* 인풋 박스 - 포커스 상태 */
}
.cl-inputbox .cl-text {
  padding: 0 12px;
}
.cl-inputbox .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-inputbox .cl-inputbox-clear {
  background: url("../images/component/common/ico_clear_20.svg") no-repeat center/contain;
  width: 20px;
  margin: 0px 6px 0px 0px;
}
.cl-inputbox.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-inputbox:not(.cl-disabled) {
  /* 클리어 버튼 hover, active 상태 */
}
.cl-inputbox:not(.cl-disabled) .cl-inputbox-clear:hover,
.cl-inputbox:not(.cl-disabled) .cl-inputbox-clear:active {
  background-image: url("../images/component/common/ico_clear_20.svg");
  opacity: 1;
}
.cl-inputbox.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
/* 서치 인풋 */
.cl-searchinput {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 서치 인풋 텍스트 */
  /* 서치 인풋 클리어 버튼 */
  /* 서치 인풋 검색버튼 */
  /* 서치 인풋 - 포커스 */
}
.cl-searchinput .cl-text {
  padding: 0 12px;
}
.cl-searchinput .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-searchinput .cl-searchinput-clear {
  background: url("../images/component/common/ico_clear_16.svg") no-repeat center/contain;
  width: 16px;
  margin: 0px 12px 0px 0px;
}
.cl-searchinput .cl-searchinput-search {
  background: url("../images/component/common/ico_search.svg") no-repeat center/contain;
  width: 20px;
  /* 검색버튼이 왼쪽에 표시될때 스타일 */
  /* 검색버튼이 오른쪽에 표시될때 스타일 */
}
.cl-searchinput .cl-searchinput-search.cl-left {
  margin: 0 0 0 12px;
}
.cl-searchinput .cl-searchinput-search.cl-right {
  margin: 0 12px 0 0;
}
.cl-searchinput:not(.cl-disabled) {
  /* Clear버튼 hover 및 active 상태 */
  /* 검색버튼 hover 및 active 상태 */
}
.cl-searchinput:not(.cl-disabled) .cl-searchinput-clear:hover,
.cl-searchinput:not(.cl-disabled) .cl-searchinput-clear:active {
  background-image: url("../images/component/common/ico_clear_20.svg");
  opacity: 1;
}
.cl-searchinput:not(.cl-disabled) .cl-searchinput-search:hover,
.cl-searchinput:not(.cl-disabled) .cl-searchinput-search:active {
  background-image: url("../images/component/common/ico_search.svg");
  opacity: 1;
}
.cl-searchinput.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-searchinput.cl-disabled .cl-searchinput-search {
  background-image: url("../images/component/common/ico_search.svg");
}
.cl-searchinput.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
/* 슬라이더 */
.cl-slider {
  overflow: visible !important;
  /* 슬라이더 바 */
}
.cl-slider.cl-horizontal {
  min-height: 20px;
}
.cl-slider.cl-vertical {
  min-width: 20px;
}
.cl-slider .cl-slider-bar {
  background-color: #f1f2f5;
  border: 0;
  border-radius: 999px;
  /* 슬라이더 가로 바 */
  /* 슬라이더 세로 바 */
  /* 슬라이더 핸들 */
  /* 슬라이더 선택 영역 표시 바 */
}
.cl-slider .cl-slider-bar.cl-horizontal {
  background-image: none;
  top: calc(50% - 0.5px);
  right: 10px;
  left: 10px;
  height: 1px;
}
.cl-slider .cl-slider-bar.cl-vertical {
  background-image: none;
  top: 10px;
  bottom: 10px;
  left: calc(50% - 0.5px);
  width: 1px;
}
.cl-slider .cl-slider-bar .cl-slider-handle {
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 999px;
  height: 20px;
  width: 20px;
  /* 슬라이더 핸들에 표시되는 label */
  /* 슬라이더 가로바 핸들 */
  /* 슬라이더 세로바 핸들 */
}
.cl-slider .cl-slider-bar .cl-slider-handle .cl-slider-label {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #2c2d31;
  border: 0;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.5;
  padding: 4px 8px;
}
.cl-slider .cl-slider-bar .cl-slider-handle .cl-slider-label::before {
  content: "";
  position: absolute;
  border: 5px solid transparent;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal {
  top: -10px;
  transform: translateX(-10px);
  /* 슬라이더 핸들에 표시되는 label */
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal .cl-slider-label {
  /* 슬라이더 labelAlign속성값이 leading인 경우 label 스타일 */
  /* 슬라이더 labelAlign속성값이 trailing인 경우 label 스타일 */
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal .cl-slider-label:before {
  left: 50%;
  transform: translateX(-50%);
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal .cl-slider-label.cl-leading {
  margin-bottom: 10px;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal .cl-slider-label.cl-leading::before {
  bottom: -10px;
  border-top-color: #2c2d31;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal .cl-slider-label.cl-trailing {
  margin-top: 10px;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-horizontal .cl-slider-label.cl-trailing::before {
  top: -10px;
  border-bottom-color: #2c2d31;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical {
  left: -10px;
  transform: translateY(-10px);
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical .cl-slider-label:before {
  transform: translateY(20%);
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical .cl-slider-label.cl-leading {
  margin-right: 10px;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical .cl-slider-label.cl-leading:before {
  right: -10px;
  border-left-color: #2c2d31;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical .cl-slider-label.cl-trailing {
  margin-left: 10px;
}
.cl-slider .cl-slider-bar .cl-slider-handle.cl-vertical .cl-slider-label.cl-trailing:before {
  left: -10px;
  border-right-color: #2c2d31;
}
.cl-slider .cl-slider-bar .cl-slider-range {
  background-color: #2d2d2d;
}
.cl-slider.cl-focus {
  /* 슬라이더 바 - focus */
}
.cl-slider.cl-focus .cl-slider-handle {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-slider.cl-disabled {
  /* 슬라이더 바 - 비활성화 */
  /* 슬라이더 바 핸들 - 비활성화 */
  /* 슬라이더 바 선택 영역 - 비활성화 */
}
.cl-slider.cl-disabled .cl-slider-bar {
  background-color: #f1f2f5;
}
.cl-slider.cl-disabled .cl-slider-handle {
  background-color: #4051e9;
}
.cl-slider.cl-disabled .cl-slider-range {
  background-color: #aaaaaa;
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle {
  /* 슬라이더 바 핸들 - hover */
}
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle:hover,
.cl-slider:not(.cl-disabled) .cl-slider-bar .cl-slider-handle.cl-hover {
  background-image: none;
}
/* 아웃풋 */
.cl-output {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-repeat: no-repeat;
  background-position: left center;
  color: #2d2d2d;
  line-height: 1.5;
}
.cl-output.cl-disabled {
  color: #aaaaaa;
}
.cl-output {
  /* outputType="h1" 설정 시 스타일 */
  /* outputType="h2" 설정 시 스타일 */
  /* outputType="h3" 설정 시 스타일 */
  /* outputType="h4" 설정 시 스타일 */
  /* outputType="h5" 설정 시 스타일 */
  /* outputType="h6" 설정 시 스타일 */
  /* dataType="number"와 format 설정 시 스타일 */
  /* dataType="date"와 format 설정 시 스타일 */
  /* dataType="string"과 format 설정 시 스타일 */
  /* dataType="text"와 format 설정 시 스타일 */
}
/* 텍스트 에리어 */
.cl-textarea {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 텍스트 에리어 텍스트 */
  /* 텍스트 에리어 - 비활성화 */
  /* 텍스트 에리어 - 포커스 */
}
.cl-textarea .cl-textarea-wrap {
  padding: 12px 12px;
}
.cl-textarea .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-textarea.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-textarea.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
/* 라디오 버튼 */
.cl-radiobutton {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  font-size: 17px;
  font-weight: 500;
  overflow: visible !important;
  /* 라디오 버튼 아이템 */
  /* 라디오버튼 focus 스타일 */
  /* disabled 라디오버튼 스타일 */
  /* fixedWidth를 고정값으로 설정시 .cl-radiobutton-item의 width와 같은 값으로 설정 */
  /* iconAlign=right 스타일 */
  /* iconAlign=top 스타일 */
  /* iconAlign=bottom 스타일 */
  /* hideIcon=true 스타일 */
}
.cl-radiobutton .cl-radiobutton-item {
  padding: 0px;
  overflow: visible !important;
  /* 라디오 버튼 내부 아이템 요소 */
  /* 아이콘 정렬을 설정 */
  /* 라디오 버튼 아이템 텍스트 */
  /* 라디오 아이템 아이콘 스타일 */
  /* 라디오 아이템 hover시 아이콘 스타일 */
  /* 선택된 라디오 아이템의 아이콘 스타일 */
  /* disabled 라디오 아이템 스타일 */
  /* clickRegion="item" 설정시 스타일 */
  /* clickRegion="textField" 설정시 스타일 */
}
.cl-radiobutton .cl-radiobutton-item .cl-icon-wrapper {
  width: auto;
  vertical-align: baseline;
}
.cl-radiobutton .cl-radiobutton-item .cl-text {
  padding: 0 0 0 8px;
  color: inherit;
}
.cl-radiobutton .cl-radiobutton-item .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio.svg");
  background-size: contain;
  width: 20px;
  height: 20px;
  min-height: 20px;
  margin: 0;
}
.cl-radiobutton .cl-radiobutton-item:hover .cl-radiobutton-icon,
.cl-radiobutton .cl-radiobutton-item.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio.svg");
}
.cl-radiobutton .cl-radiobutton-item.cl-selected {
  /* 선택된 라디오 아이템 hover시 아이콘 스타일 */
}
.cl-radiobutton .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_selected.svg");
}
.cl-radiobutton .cl-radiobutton-item.cl-selected:hover .cl-radiobutton-icon,
.cl-radiobutton .cl-radiobutton-item.cl-selected.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_selected.svg");
}
.cl-radiobutton .cl-radiobutton-item.cl-disabled {
  color: #717171;
  /* disabled 라디오 아이템 hover시 아이콘 스타일 */
  /* 선택된 disabled 라디오 아이템의 아이콘 스타일 */
}
.cl-radiobutton .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_disabled.svg");
}
.cl-radiobutton .cl-radiobutton-item.cl-disabled:hover .cl-radiobutton-icon,
.cl-radiobutton .cl-radiobutton-item.cl-disabled.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_disabled.svg");
}
.cl-radiobutton .cl-radiobutton-item.cl-disabled.cl-selected {
  /* 선택된 disabled 라디오아이템 hover시 아이콘 스타일 */
}
.cl-radiobutton .cl-radiobutton-item.cl-disabled.cl-selected .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_selected_disabled.svg");
}
.cl-radiobutton .cl-radiobutton-item.cl-disabled.cl-selected:hover .cl-radiobutton-icon,
.cl-radiobutton .cl-radiobutton-item.cl-disabled.cl-selected.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_selected_disabled.svg");
}
.cl-radiobutton:focus .cl-radiobutton-item .cl-radiobutton-icon:focus,
.cl-radiobutton.cl-focus .cl-radiobutton-item .cl-radiobutton-icon:focus,
.cl-radiobutton:focus .cl-radiobutton-item .cl-radiobutton-icon.cl-focus,
.cl-radiobutton.cl-focus .cl-radiobutton-item .cl-radiobutton-icon.cl-focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-radiobutton:focus.cl-iconalign-none .cl-radiobutton-item .cl-text:focus,
.cl-radiobutton.cl-focus.cl-iconalign-none .cl-radiobutton-item .cl-text:focus,
.cl-radiobutton:focus.cl-iconalign-none .cl-radiobutton-item .cl-text.cl-focus,
.cl-radiobutton.cl-focus.cl-iconalign-none .cl-radiobutton-item .cl-text.cl-focus {
  outline: none;
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item {
  color: #717171;
  /* disabled 라디오 버튼 내 라디오 아이템 hover시 아이콘 스타일 */
  /* disabled 라디오 버튼의 선택된 라디오 아이템 아이콘 스타일 */
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_disabled.svg");
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item:hover .cl-radiobutton-icon,
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_disabled.svg");
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected {
  /* disabled 라디오 버튼의 선택된 라디오 아이템 hover시 아이콘 스타일 */
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_selected_disabled.svg");
}
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected:hover .cl-radiobutton-icon,
.cl-radiobutton.cl-disabled .cl-radiobutton-item.cl-selected.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_selected_disabled.svg");
}
.cl-radiobutton.cl-fixedWidth .cl-radiobutton-item .cl-icon-wrapper {
  width: 20px;
}
.cl-radiobutton.cl-iconalign-right .cl-radiobutton-item .cl-text {
  padding-right: 8px;
}
.cl-radiobutton.cl-iconalign-top .cl-radiobutton-item .cl-text {
  padding-top: 8px;
}
.cl-radiobutton.cl-iconalign-bottom .cl-radiobutton-item .cl-text {
  padding-bottom: 8px;
}
.cl-radiobutton.cl-iconalign-none .cl-radiobutton-item .cl-text {
  padding: 0;
}
.cl-radiobutton.cl-flow {
  vertical-align: middle;
}
/* 체크 박스 */
.cl-checkbox {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  font-size: 17px;
  font-weight: 500;
  padding: 0;
  /* 체크박스 내부 아이템 요소 */
  /* 아이콘 정렬을 설정 */
  /* 체크 박스 텍스트 */
  /* 체크박스 아이콘 스타일 */
  /* 체크 박스 hover시 아이콘 스타일 */
  /* 체크된 체크박스의 아이콘 스타일 */
  /* disabled 체크박스 스타일 */
  /* clickRegion="item" 설정시 체크박스 스타일 */
  /* clickRegion="textField" 설정시 체크박스 스타일 */
  /* 체크박스 focus 스타일 */
  /* 체크박스 부분선택 아이콘 스타일 */
  /* iconAlign=right 스타일 */
  /* iconAlign=top 스타일 */
  /* iconAlign=bottom 스타일 */
  /* hideIcon=true 스타일 */
  /* fixedWidth를 고정값으로 설정시 .cl-checkbox-icon의 width와 같은 값으로 설정 */
}
.cl-checkbox > * {
  line-height: 1;
}
.cl-checkbox .cl-icon-wrapper {
  width: auto;
}
.cl-checkbox .cl-text {
  padding: 0 0 0 8px;
}
.cl-checkbox .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check.svg");
  background-size: contain;
  width: 20px;
  height: 20px;
  min-height: 20px;
}
.cl-checkbox:hover .cl-checkbox-icon,
.cl-checkbox.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check.svg");
}
.cl-checkbox.cl-checked {
  /* 체크된 체크박스 hover시 아이콘 스타일 */
}
.cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-checkbox.cl-checked:hover .cl-checkbox-icon,
.cl-checkbox.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-checkbox.cl-disabled {
  /* disabled 체크박스 hover시 아이콘 스타일 */
  /* 체크된 disabled 체크박스의 아이콘 스타일 */
}
.cl-checkbox.cl-disabled .cl-text {
  color: #717171;
}
.cl-checkbox.cl-disabled .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_disabled.svg");
}
.cl-checkbox.cl-disabled:hover .cl-checkbox-icon,
.cl-checkbox.cl-disabled.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_disabled.svg");
}
.cl-checkbox.cl-disabled.cl-checked {
  /* 체크된 disabled 체크박스 hover시 아이콘 스타일 */
}
.cl-checkbox.cl-disabled.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-checkbox.cl-disabled.cl-checked:hover .cl-checkbox-icon,
.cl-checkbox.cl-disabled.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-checkbox.cl-focus .cl-checkbox-icon {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-checkbox.cl-focus.cl-iconalign-none .cl-text {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-checkbox.cl-partialchecked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_partial.svg");
}
.cl-checkbox.cl-partialchecked:hover .cl-checkbox-icon,
.cl-checkbox.cl-partialchecked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_partial.svg");
}
.cl-checkbox.cl-partialchecked.cl-disabled .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_partial_disabled.svg");
}
.cl-checkbox.cl-partialchecked.cl-disabled:hover .cl-checkbox-icon,
.cl-checkbox.cl-partialchecked.cl-disabled.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_partial_disabled.svg");
}
.cl-checkbox.cl-iconalign-right .cl-text {
  padding-left: 8px;
}
.cl-checkbox.cl-iconalign-top .cl-text {
  padding-top: 8px;
}
.cl-checkbox.cl-iconalign-bottom .cl-text {
  padding-bottom: 8px;
}
.cl-checkbox.cl-iconalign-none .cl-text {
  padding: 0;
}
.cl-checkbox.cl-fixedWidth .cl-icon-wrapper {
  width: 20px;
}
/* 체크박스그룹 */
.cl-checkboxgroup {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  font-size: 17px;
  font-weight: 500;
  overflow: visible !important;
  /* 체크박스그룹의 체크박스 스타일 */
  /* 체크박스그룹 focus 스타일 */
  /* disabled 체크박스그룹 스타일 */
  /* fixedWidth를 고정값으로 설정시 .cl-checkbox-icon의 width와 같은 값으로 설정 */
  /* iconAlign=right 스타일 */
  /* iconAlign=top 스타일 */
  /* iconAlign=bottom 스타일 */
  /* hideIcon=true 스타일 */
}
.cl-checkboxgroup .cl-checkbox {
  padding: 0px;
  overflow: visible !important;
  /* 체크박스그룹의 체크박스 내부 아이템 요소 */
  /* 체크박스그룹에 체크박스 hover시 아이콘 스타일 */
  /* 체크박스그룹에 체크된 체크박스 아이콘 스타일 */
  /* 체크박스그룹 내에 disabled된 체크박스 스타일 */
  /* clickRegion="item" 설정시 체크박스 스타일 */
  /* clickRegion="textField" 설정시 체크박스 스타일 */
}
.cl-checkboxgroup .cl-checkbox:hover .cl-checkbox-icon,
.cl-checkboxgroup .cl-checkbox.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check.svg");
}
.cl-checkboxgroup .cl-checkbox.cl-checked {
  /* 체크박스그룹에 체크된 체크박스 hover시 아이콘 스타일 */
}
.cl-checkboxgroup .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-checkboxgroup .cl-checkbox.cl-checked:hover .cl-checkbox-icon,
.cl-checkboxgroup .cl-checkbox.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-checkboxgroup .cl-checkbox.cl-disabled {
  color: #717171;
  /* 체크박스그룹 내에 disabled된 체크박스 hover시 아이콘 스타일 */
  /* 체크박스그룹 내에 disabled, 체크된 체크박스 아이콘 스타일 */
}
.cl-checkboxgroup .cl-checkbox.cl-disabled .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_disabled.svg");
}
.cl-checkboxgroup .cl-checkbox.cl-disabled:hover .cl-checkbox-icon,
.cl-checkboxgroup .cl-checkbox.cl-disabled.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_disabled.svg");
}
.cl-checkboxgroup .cl-checkbox.cl-disabled.cl-checked {
  /* 체크박스그룹 내에  disabled, 체크된 체크박스 hover시 아이콘 스타일 */
}
.cl-checkboxgroup .cl-checkbox.cl-disabled.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-checkboxgroup .cl-checkbox.cl-disabled.cl-checked:hover .cl-checkbox-icon,
.cl-checkboxgroup .cl-checkbox.cl-disabled.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-checkboxgroup.cl-focus {
  /* 체크박스그룹 내에 focus를 받은 체크박스 focus 아이콘 스타일 */
}
.cl-checkboxgroup.cl-focus .cl-checkbox .cl-checkbox-icon:focus,
.cl-checkboxgroup.cl-focus .cl-checkbox .cl-checkbox-icon.cl-focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-checkboxgroup.cl-focus.cl-iconalign-none .cl-checkbox .cl-text {
  outline: none;
}
.cl-checkboxgroup.cl-disabled {
  color: #717171;
  /* disabled 체크박스그룹의 체크박스 스타일 */
}
.cl-checkboxgroup.cl-disabled .cl-checkbox {
  /* disabled 체크박스그룹에 체크박스 hover시 아이콘 스타일 */
  /* disabled 체크박스그룹 내에 체크된 체크박스 아이콘 스타일 */
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-text {
  color: #717171;
}
.cl-checkboxgroup.cl-disabled .cl-checkbox .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_disabled.svg");
}
.cl-checkboxgroup.cl-disabled .cl-checkbox:hover .cl-checkbox-icon,
.cl-checkboxgroup.cl-disabled .cl-checkbox.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_disabled.svg");
}
.cl-checkboxgroup.cl-disabled .cl-checkbox.cl-checked {
  /* disabled 체크박스그룹 내에 체크된 체크박스 hover시 아이콘 스타일 */
}
.cl-checkboxgroup.cl-disabled .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-checkboxgroup.cl-disabled .cl-checkbox.cl-checked:hover .cl-checkbox-icon,
.cl-checkboxgroup.cl-disabled .cl-checkbox.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-checkboxgroup.cl-fixedWidth .cl-checkbox .cl-icon-wrapper {
  width: 20px;
}
.cl-checkboxgroup.cl-iconalign-right .cl-checkbox .cl-text {
  padding-right: 8px;
}
.cl-checkboxgroup.cl-iconalign-top .cl-checkbox .cl-text {
  padding-top: 8px;
}
.cl-checkboxgroup.cl-iconalign-bottom .cl-checkbox .cl-text {
  padding-bottom: 8px;
}
.cl-checkboxgroup.cl-iconalign-none .cl-checkbox .cl-text {
  padding: 0;
}
.cl-checkboxgroup.cl-flow {
  vertical-align: middle;
}
/* 마스크 에디터 루트 */
.cl-maskeditor {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 마스크 에디터 텍스트 */
  /* 마스크 에디터 - 클리어 버튼 */
  /* 마스크 에디터 - disabled */
  /* 마스크 에디터 - 포커스 */
}
.cl-maskeditor .cl-text {
  padding: 0 12px;
}
.cl-maskeditor .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-maskeditor .cl-maskeditor-clear {
  background: url("../images/component/common/ico_clear_20.svg") no-repeat center/contain;
  width: 20px;
  margin: 0px 6px 0px 0px;
}
.cl-maskeditor.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-maskeditor.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
/* 콤보 박스 스타일 */
.cl-combobox {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 선택된 아이템의 아이콘 */
  /* 텍스트 영역 스타일 */
  /* 콤보 박스 펼침 버튼 */
  /* 포커스 상태 */
  /* 비활성화 상태 */
}
.cl-combobox .cl-text {
  padding: 0 12px;
  /* preventInput=true인 경우 */
}
.cl-combobox .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-combobox .cl-combobox-button {
  background: url("../images/component/common/ico_arr_down.svg") no-repeat center/contain;
  width: 16px;
  margin: 0 12px 0 0;
}
.cl-combobox.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-combobox.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
/* 콤보 박스의 리스트 스타일 */
.cl-combobox-list {
  font: 400 15px "Pretendard GOV", sans-serif;
  border: 1px solid #f1f2f5;
  color: #2d2d2d;
  font-size: 14px;
  padding: 4px 0;
  /* 리스트의 쉐도우 */
  /* 콤보박스 위에 표시될때 상태 */
  /* 콤보박스 아래에 표시될때 상태 */
  /* 리스트의 최대 높이 */
  /* 콤보박스 리스트 아이템 */
  /* 체크박스 다중선택 아이템 스타일 */
}
.cl-combobox-list.cl-popup {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
}
.cl-combobox-list.cl-top {
  margin-top: -4px;
}
.cl-combobox-list.cl-bottom {
  margin-top: 4px;
}
.cl-combobox-list .cl-viewport {
  max-height: 320px;
}
.cl-combobox-list .cl-combobox-item {
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  /* 아이템 체크박스 */
  /* 아이템 아이콘 */
  /* 아이템 텍스트 */
  /* 선택 상태 */
  /* 비활성화 상태 */
  /* 콤보박스 트리 아이템 스타일 */
}
.cl-combobox-list .cl-combobox-item .cl-checkbox {
  background-image: url("../images/component/common/ico_check.svg");
  background-size: contain;
  width: 16px;
  height: 16px;
  min-height: 16px;
}
.cl-combobox-list .cl-combobox-item .cl-checkbox.cl-checked {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-combobox-list .cl-combobox-item .cl-checkbox + .cl-text {
  padding: 0 0 0 10px;
}
.cl-combobox-list .cl-combobox-item .cl-text {
  padding: 0;
}
.cl-combobox-list .cl-combobox-item.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
.cl-combobox-list .cl-combobox-item.cl-selected .cl-checkbox + .cl-text::after {
  content: none;
}
.cl-combobox-list .cl-combobox-item.cl-disabled {
  color: #aaaaaa;
  /* 비활성화 상태로 선택 */
}
.cl-combobox-list .cl-combobox-item.cl-disabled.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-combobox-list .cl-combobox-item:not(.cl-disabled) {
  /* 호버 상태 */
}
.cl-combobox-list .cl-combobox-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-combobox-list .cl-combobox-item:not(.cl-disabled):not(.cl-selected).cl-hover {
  background-color: transparent;
  color: #2c2d31;
  text-decoration: underline;
}
.cl-combobox-list .cl-combobox-item:not(.cl-disabled).cl-focus,
.cl-combobox-list .cl-combobox-item:not(.cl-disabled):focus {
  text-decoration: underline;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem {
  /* 트리 아이콘 스타일 */
  /* 체크 박스 스타일 */
  /* 텍스트 스타일 */
  /* 트리 라인, 아이콘 */
  /* 펼침 아이콘*/
  /* 접음 아이콘 */
  /* 마지막 아이템 */
  /* 처음 아이템 */
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-treeicon {
  /*트리 확장 아이콘 스타일*/
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-treeitem.-cl-root .cl-treeicon-line {
  background-image: none;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-checkbox {
  background-image: url("../images/component/common/ico_check.svg");
  background-size: contain;
  width: 16px;
  height: 16px;
  min-height: 16px;
  /* 체크 상태 */
  /* 부분 체크 상태 */
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-checkbox.cl-checked {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-checkbox.cl-partialchecked {
  background-image: url("../images/component/common/ico_check_partial.svg");
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-text {
  padding: 0 0 0 10px;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-line,
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-treeicon,
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-treeicon-line {
  padding: 0;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-expanded .cl-treeicon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-expanded.cl-selected .cl-treeicon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-collapsed .cl-treeicon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-collapsed.cl-selected .cl-treeicon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-line {
  background-image: url("../images/component/common/ico_treeline.svg");
  height: 100%;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem .cl-treeicon-line {
  background-image: url("../images/component/common/ico_treeline_child.svg");
  height: 100%;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-last .cl-treeicon-line {
  background-image: url("../images/component/common/ico_treeline_last.svg");
  background-position: center top;
}
.cl-combobox-list .cl-combobox-item.cl-treeitem.cl-first .cl-treeicon-line {
  background-image: none;
}
.cl-combobox-list.cl-multi-select .cl-combobox-item:not(.cl-disabled).cl-selected:hover {
  background-color: transparent;
  color: #2c2d31;
}
.cl-combobox-list.cl-multi-select .cl-combobox-item:not(.cl-disabled).cl-hover.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
.cl-combobox-list.cl-multi-select .cl-combobox-item.cl-treeitem.cl-expanded.cl-selected .cl-treeicon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-combobox-list.cl-multi-select .cl-combobox-item.cl-treeitem.cl-collapsed.cl-selected .cl-treeicon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
/* 링크드 콤보 박스 루트 */
.cl-linkedcombobox {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  /* 콤보 박스 */
  /* 콤보 박스 - 포커스 상태 */
  /* 콤보 박스 - disabled 상태 */
}
.cl-linkedcombobox .cl-linkedcombobox-combo {
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  width: 120px;
  /* 선택된 아이템의 아이콘 */
  /* 콤보 박스 인풋 텍스트 */
  /* 콤보 박스 펼침 버튼 */
}
.cl-linkedcombobox .cl-linkedcombobox-combo .cl-text {
  /* preventInput속성일때 스타일 */
}
.cl-linkedcombobox .cl-linkedcombobox-combo .cl-linkedcombobox-button {
  background: url("../images/component/common/ico_arr_down_20.svg") no-repeat center/contain;
  width: 20px;
  margin: 0 6px 0 0;
}
.cl-linkedcombobox .cl-linkedcombobox-combo.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-linkedcombobox.cl-disabled {
  color: #aaaaaa;
  /* 콤보 박스 펼침 버튼 - disabled 상태 */
}
.cl-linkedcombobox.cl-disabled .cl-linkedcombobox-combo {
  background-color: #eaeaea;
  border-color: #eaeaea;
}
/* 콤보 박스 리스트 박스 */
.cl-linkedcombobox-list {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  border: 1px solid #f1f2f5;
  background-color: #f1f2f5;
  /* 리스트박스의 쉐도우 */
  /* 콤보박스 위에 표시될때 상태 */
  /* 콤보박스 아래에 표시될때 상태 */
  /* 콤보 박스 아이템 */
}
.cl-linkedcombobox-list.cl-top {
  margin-top: -2px;
}
.cl-linkedcombobox-list.cl-bottom {
  margin-top: 2px;
}
.cl-linkedcombobox-list .cl-linkedcombobox-item {
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  /* 콤보 박스 아이템 아이콘 */
  /* 콤보 박스 아이템 텍스트 */
  /* 콤보 박스 아이템 드릴다운 아이콘 */
  /* 콤보 박스 아이템 리프 아이콘 */
  /* 콤보 박스 아이템 - 선택됨 */
  /* 콤보 박스 아이템 - disabled 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item .cl-text {
  padding: 0;
}
.cl-linkedcombobox-list .cl-linkedcombobox-item .cl-linkedcombobox-arrow.cl-folder {
  background-image: url("../images/component/common/ico_arr_right_20.svg");
  background-size: contain;
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
  /* 콤보 박스 아이템 드릴 다운 아이콘 - 선택됨 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-selected .cl-linkedcombobox-arrow.cl-folder {
  background-image: url("../images/component/common/P_ico_arr_right_20.svg");
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-disabled {
  color: #aaaaaa;
  /* 콤보 박스 아이템 - 선택됨, disabled 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item.cl-disabled.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-linkedcombobox-list .cl-linkedcombobox-item:not(.cl-disabled) {
  /* 콤보 박스 아이템 - 호버 상태 */
}
.cl-linkedcombobox-list .cl-linkedcombobox-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-linkedcombobox-list .cl-linkedcombobox-item:not(.cl-disabled):not(.cl-selected).cl-hover {
  background-color: transparent;
  color: #2c2d31;
}
/* 다이얼로그 루트 */
.cl-dialog {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #f4f7fb;
  border-radius: 24px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  border-color: #e4e4e4;
  border-width: 2px;
  /* 다이얼로그 헤더 */
}
.cl-dialog .cl-dialog-header {
  background-color: #ffffff;
  border-bottom-color: #e4e4e4;
  color: #000000;
  padding: 24px;
  align-items: center;
  /* 다이얼로그 헤더 텍스트 */
  /* 다이얼로그 버튼 공통 */
  /* 다이얼로그 닫기 버튼 */
  /* 다이얼로그 닫기 버튼 - 호버 및 액티브 */
  /* 다이얼로그 최소화 버튼 */
  /* 다이얼로그 최소화 버튼 - 호버 및 액티브 */
  /* 다이얼로그 최대화 버튼 */
  /* 다이얼로그 최대화 버튼 - 호버 및 액티브 */
  /* 다이얼로그 복구 버튼 */
  /* 다이얼로그 복구 버튼 - 호버 및 액티브 */
}
.cl-dialog .cl-dialog-header .cl-text {
  font-size: 19px;
  font-weight: 600;
}
.cl-dialog .cl-dialog-header .cl-dialog-close,
.cl-dialog .cl-dialog-header .cl-dialog-min,
.cl-dialog .cl-dialog-header .cl-dialog-max,
.cl-dialog .cl-dialog-header .cl-dialog-restore {
  background-size: contain;
  width: 24px;
  height: 24px;
  margin: 0 0 0 4px;
}
.cl-dialog .cl-dialog-header .cl-dialog-close {
  background-image: url("../images/component/common/ico_x_md_24.svg");
}
.cl-dialog .cl-dialog-header .cl-dialog-close:hover,
.cl-dialog .cl-dialog-header .cl-dialog-close:active {
  background-image: url("../images/component/common/ico_x_md_24.svg");
}
.cl-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
/* 트리 */
.cl-tree {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  /* 트리 아이템 */
  /* 트리 - 포커스 */
  /* 트리 다중 선택 */
  /* 트리 아이템간 라인 */
}
.cl-tree .cl-tree-item {
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  /* 트리 아이템 체크박스 아이콘 */
  /* 트리 셀렉션 체크박스 아이콘 */
  /* 트리 아이템 아이콘 영역 */
  /* 트리 아이템의 펼치고 접혀지는 아이콘 영역 */
  /* 트리 아이템 텍스트 */
  /* 텍스트 편집 상자 */
  /* 트리 아이템 뱃지 스타일 */
  /* 트리 아이템 - 비활성화 */
  /* 트리 아이템 - 선택됨 */
}
.cl-tree .cl-tree-item .cl-checkbox {
  background-image: url("../images/component/common/ico_check.svg");
  background-size: 16px;
  width: 20px;
}
.cl-tree .cl-tree-item .cl-checkbox.cl-checked {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-tree .cl-tree-item .cl-checkbox.cl-partialchecked {
  background-image: url("../images/component/common/ico_check_partial.svg");
}
.cl-tree .cl-tree-item .cl-tree-checkbox {
  background-image: url("../images/component/common/ico_check.svg");
}
.cl-tree .cl-tree-item .cl-tree-itemicon {
  background-image: url("../images/component/common/ico_file.svg");
  background-size: 20px;
  width: 20px;
  height: 20px;
}
.cl-tree .cl-tree-item .cl-tree-treeicon {
  background-size: 20px;
  width: 20px;
  height: 20px;
}
.cl-tree .cl-tree-item .cl-text {
  padding: 0 0 0 10px;
}
.cl-tree .cl-tree-item.cl-checked {
  /* 트리 아이템 체크박스 아이콘 - 선택됨 */
}
.cl-tree .cl-tree-item.cl-checked > .cl-tree-checkbox {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-tree .cl-tree-item.cl-partialchecked {
  /* 트리 아이템 체크박스 아이콘 - 부분 선택됨 */
}
.cl-tree .cl-tree-item.cl-partialchecked > .cl-tree-checkbox {
  background-image: url("../images/component/common/ico_check_partial.svg");
}
.cl-tree .cl-tree-item.cl-folder {
  /* 트리 아이템 폴더 아이콘 */
  /* 트리 아이템 폴더 아이콘 - 펼쳐짐 */
  /* 트리 아이템 폴더 아이콘 - 접힘 */
}
.cl-tree .cl-tree-item.cl-folder .cl-tree-itemicon {
  background-image: url("../images/component/common/ico_folder.svg");
}
.cl-tree .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-tree .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-tree .cl-tree-item.cl-disabled {
  color: #aaaaaa;
  /* 트리 아이템 - 비활성화, 선택됨 */
}
.cl-tree .cl-tree-item.cl-disabled.cl-selected {
  color: #eaeaea;
  background-color: #aaaaaa;
}
.cl-tree .cl-tree-item.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
.cl-tree .cl-tree-item.cl-selected.cl-folder {
  /* 트리 아이템 폴더 펼쳐짐 아이콘 - 선택됨 */
  /* 트리 아이템 폴더 점힘 아이콘 - 선택됨 */
}
.cl-tree .cl-tree-item.cl-selected.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-tree .cl-tree-item.cl-selected.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-tree.cl-focus {
  border-color: #2d2d2d;
}
.cl-tree.cl-multi-select .cl-tree-item.cl-checked.cl-selected.cl-hover {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
.cl-tree.cl-tree-lines .cl-tree-item {
  align-items: center;
}
.cl-tree.cl-tree-lines .cl-tree-item.-cl-root .cl-tree-iconline,
.cl-tree.cl-tree-lines .cl-tree-item.-cl-root.cl-first .cl-tree-iconline,
.cl-tree.cl-tree-lines .cl-tree-item.-cl-root.cl-last .cl-tree-iconline {
  background-image: none;
}
.cl-tree.cl-tree-lines .cl-tree-item .cl-tree-treeicon {
  background-size: 20px;
}
.cl-tree.cl-tree-lines .cl-tree-item.cl-expanded > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_treeline_expand.svg");
}
.cl-tree.cl-tree-lines .cl-tree-item.cl-expanded.cl-selected > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_treeline_expand.svg");
}
.cl-tree.cl-tree-lines .cl-tree-item.cl-collapsed > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_treeline_collapse.svg");
}
.cl-tree.cl-tree-lines .cl-tree-item.cl-collapsed.cl-selected > .cl-tree-treeicon {
  background-image: url("../images/component/common/ico_treeline_collapse.svg");
}
.cl-tree.cl-tree-lines .cl-tree-item .cl-tree-line {
  background-image: url("../images/component/common/ico_treeline.svg");
  height: 100%;
}
.cl-tree.cl-tree-lines .cl-tree-item .cl-tree-iconline {
  background-image: url("../images/component/common/ico_treeline_child.svg");
  height: 100%;
}
.cl-tree.cl-tree-lines .cl-tree-item.cl-first .cl-tree-iconline {
  background-image: url("../images/component/common/ico_treeline_first.svg");
  background-position: center bottom;
}
.cl-tree.cl-tree-lines .cl-tree-item.cl-last .cl-tree-iconline {
  background-image: url("../images/component/common/ico_treeline_last.svg");
  background-position: center top;
}
.cl-tree.cl-tree-lines .cl-tree-item .cl-text {
  padding: 0 0 0 10px;
}
.cl-tree.cl-tree-lines .cl-tree-item .cl-tree-line,
.cl-tree.cl-tree-lines .cl-tree-item .cl-tree-treeicon,
.cl-tree.cl-tree-lines .cl-tree-item .cl-tree-iconline {
  padding: 0;
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled) {
  /* 트리 아이템 - hover */
  /* 드래그 아이템 위치에 따른 표시 - 아래 */
  /* 드래그 아이템 위치에 따른 표시 - 중간 */
  /* 드래그 아이템 위치에 따른 표시 - 위 */
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: transparent;
  color: #2c2d31;
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled).cl-dropbottom {
  box-shadow: inset 0 -2px 0 #2d2d2d;
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled).cl-dropmiddle,
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-dropmiddle {
  background-color: #2d2d2d;
}
.cl-tree:not(.cl-disabled) .cl-tree-item:not(.cl-disabled).cl-droptop {
  box-shadow: inset 0 2px 0 #2d2d2d;
}
/* 트리 - 비활성화 */
.cl-tree.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-tree.cl-disabled .cl-tree-item.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
/* 그리드 */
.cl-grid {
  font: 400 15px "Pretendard GOV", sans-serif;
  border: 0;
  border-radius: 0;
  color: #2d1d2d;
  min-height: 120px;
  /* 그리드 헤더 */
  /* 그리드 디테일 */
  /* 그리드 푸터 */
  /* 좌측 틀고정 그리드 */
  /* 우측 틀고정 그리드 */
  /* 그리드의 상단 고정 영역 */
  /* 그리드의 하단 고정 영역 */
  /* noDataMessage 보여질 때 해당 텍스트영역 스타일 */
}
.cl-grid.cl-focus,
.cl-grid:focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-grid.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-grid .cl-grid-header {
  background-color: #f8f8f8;
  background-image: none;
  border-radius: 12px;
  /* 그리드 헤더 셀 */
  /* 그리드 헤더 셀 정렬 인디케이터 (header의 sortColumnName속성) */
  /* 그리드 헤더 셀 필터 인디케이터 */
  /* 그리드 헤더 셀에 정렬 가능한 셀 스타일 */
  /* 디테일에 스크롤이 생길시 우측에 생기는 빈 영역 */
}
.cl-grid .cl-grid-header .cl-grid-row:not(:first-child) .cl-grid-cell {
  border-top: 1px solid #dddddd;
}
.cl-grid .cl-grid-header .cl-grid-cell {
  border: 0;
  color: #1d1d1d;
  font-size: 16px;
  font-weight: 700;
  /* 그리드 헤더 셀에 임베딩 된 컨트롤 */
}
.cl-grid .cl-grid-header .cl-grid-cell .cl-control {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.cl-grid .cl-grid-header .cl-sort {
  /* 그리드 헤더 셀 정렬 인디케이터 - 정렬 가능 */
  /* 그리드 헤더 셀 정렬 인디케이터 - 오름차순 정렬됨 */
  /* 그리드 헤더 셀 정렬 인디케이터 - 내림차순 정렬됨 */
}
.cl-grid .cl-grid-header .cl-filter {
  /* 그리드 헤더 셀 필터 인디케이터에 마우스가 호버되었을 때 스타일 */
  /* 그리드 헤더 셀 필터 인디케이터 - 필터되었을 때 스타일 */
}
.cl-grid .cl-grid-header .cl-sortable-cell {
  /* 그리드 헤더 셀 정렬 인디케이터 */
  /* 그리드 헤더 셀 정렬 인디케이터 - 오름차순 정렬됨  */
  /* 그리드 헤더 셀 정렬 인디케이터 - 내림차순 정렬됨  */
}
.cl-grid .cl-grid-header .cl-sortable-cell .cl-sort {
  /* 그리드 헤더 셀 정렬 인디케이터 - 정렬 가능한 아이콘 */
  /* 그리드 헤더 셀 정렬 인디케이터 - 정렬 우선 순위 영역 */
}
.cl-grid .cl-grid-header .cl-sortable-cell .cl-sort .cl-sort-icon:before {
  content: "▲";
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc {
  /* 그리드 헤더 셀 정렬 인디케이터 - 오름차순 아이콘 */
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-asc .cl-sort-icon:before {
  content: "▲";
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-desc {
  /* 그리드 헤더 셀 정렬 인디케이터 - 내림차순 아이콘 */
}
.cl-grid .cl-grid-header .cl-sortable-cell.cl-sort-desc .cl-sort-icon:before {
  content: "▼";
}
.cl-grid .cl-grid-header .cl-blank {
  background-color: transparent;
}
.cl-grid .cl-grid-detail {
  /* 디테일에 스크롤이 생길시 우측 하단에 생기는 빈 영역 */
}
.cl-grid .cl-grid-detail .cl-blank {
  background-color: transparent;
}
.cl-grid .cl-grid-footer {
  background-color: #eaf4ff;
  border-top: 0;
  border-radius: 12px;
  /* 디테일에 스크롤이 생길시 우측에 생기는 빈 영역 */
}
.cl-grid .cl-grid-footer .cl-grid-cell {
  border-bottom: 0;
}
.cl-grid .cl-grid-footer .cl-grid-cell .cl-control {
  color: #2d1d2d;
  font-weight: 600;
  text-align: left;
  padding: 0 6px;
}
.cl-grid .cl-grid-footer .cl-blank {
  background-color: transparent;
}
.cl-grid.cl-leftsplit {
  /* 좌측 틀고정시 그리드의 좌측 영역 */
  /* 좌측 틀고정시 그리드의 중앙 영역 */
}
.cl-grid.cl-leftsplit .cl-grid-centersplit {
  border-left: 1px solid #f1f2f5;
}
.cl-grid.cl-rightsplit {
  /* 우측 틀고정시 그리드의 우측 영역 */
  /* 우측 틀고정시 그리드의 중앙 영역 */
}
.cl-grid.cl-rightsplit .cl-grid-centersplit {
  border-right: 1px solid #f1f2f5;
}
.cl-grid .cl-grid-topsplit {
  border-bottom: double 3px #f1f2f5;
}
.cl-grid .cl-grid-bottomsplit {
  border-top: double 3px #f1f2f5;
}
.cl-grid .cl-nodatamsg {
  color: #8e8e8e;
  vertical-align: middle;
}
.cl-grid.no-search-data .cl-nodatamsg {
  font-size: 0;
  line-height: 0;
}
.cl-grid.no-search-data .cl-nodatamsg::before {
  padding-top: 163px;
  display: block;
  line-height: 33.6px;
  font-size: 24px;
  font-weight: 500;
  color: #2c2d31;
  background: url("../images/controls/grid/ic_nosearchdata.svg") no-repeat top;
  content: "검색 결과가 없습니다.";
}
.cl-grid.no-search-data .cl-nodatamsg::after {
  display: block;
  color: #7f8791;
  line-height: 24px;
  font-size: 16px;
  font-weight: 500;
  content: "다시 검색해 주세요.";
}
/* 그리드 필터 사용시 필터 다이얼로그가 펼쳐지는 영역 스타일 */
.cl-gridfilter {
  /* 필터 다이얼로그 뒤에 비활성화 영역을 표현하기 위해 덮히는 막 */
  /* 필터 다이얼로그 */
}
.cl-gridfilter.cl-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.cl-gridfilter .cl-filterdlg {
  padding: 0;
  width: 280px;
  height: 360px;
  background-color: #f4f7fb;
  border: none;
  border-radius: 24px;
  /* 필터 다이얼로그 - 타이틀 영역 */
  /* 필터 다이얼로그 - 필터 찾기 영역 */
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역 */
  /* 필터 다이얼로그 - 하단에 버튼 영역 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header {
  background-color: #ffffff;
  background-image: none;
  color: #000000;
  height: auto;
  padding: 24px;
  /* 필터 다이얼로그 - 타이틀 영역의 글자 스타일 */
  /* 필터 다이얼로그 - 타이틀 영역의 닫기 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header .cl-text {
  font-size: 19px;
  font-weight: 600;
  padding: 0;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header .cl-filterdlg-sortable,
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header .cl-filterdlg-close {
  background-repeat: no-repeat;
  background-position: center;
  width: 24px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header .cl-filterdlg-close {
  background-image: url("../images/component/common/ico_x_24.svg");
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-search {
  margin: 0;
  padding: 16px 20px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-search .cl-search-input {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  height: 40px;
  padding: 0 12px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-search .cl-search-input:focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist {
  height: calc(100% - 1px);
  margin: 0 20px 0 20px;
  padding: 0 0 1rem 0;
  overflow: visible;
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역의 아이템 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist > * {
  overflow: visible !important;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item {
  height: 32px;
  /* 필터 다이얼로그 - 아이템 체크박스 영역 스타일 */
  /* 필터 다이얼로그 - 아이템 체크박스가 체크되었을 때의 스타일 */
  /* 필터 다이얼로그 - 아이템 글자 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item .cl-icon-wrapper {
  width: 20px;
  /* 필터 다이얼로그 - 아이템 체크박스 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item .cl-icon-wrapper .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check.svg");
  width: 20px;
  height: 20px;
  min-height: 20px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_selected.svg");
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item .cl-text {
  padding: 0 0 0 10px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons {
  height: auto;
  margin: 8px 20px;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  /* 필터 다이얼로그 - 하단에 버튼 영역의 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin: 0;
  min-width: 56px;
  height: 28px;
  /* 필터 다이얼로그 - 버튼 영역의 확인 버튼 스타일 */
  /* 필터 다이얼로그 - 버튼 영역의 취소 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-select {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-select:not(.cl-disabled):hover {
  background-color: #3546d3;
  border-color: #3546d3;
  color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-select:focus,
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-select.cl-focus {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
  outline-color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-select:not(.cl-disabled).cl-activated,
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-select:not(.cl-disabled):active {
  background-color: #2a3bbc;
  border-color: #2a3bbc;
  color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-cancel {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
  margin: 0px 0px 0px 8px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-cancel:focus,
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-cancel.cl-focus {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-cancel:not(.cl-disabled):hover {
  background-color: #2f41d0;
  border-color: #2f41d0;
  color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-cancel:not(.cl-disabled).cl-activated,
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button.cl-cancel:not(.cl-disabled):active {
  background-color: #1e33b8;
  border-color: #1e33b8;
  color: #ffffff;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-checkbox {
  font-size: 15px;
  padding: 0;
  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-checkbox .cl-checkbox-icon {
  background: url("../images/component/common/ico_check.svg") no-repeat center/contain;
  width: 20px;
  height: 20px;
  min-height: 20px;
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("../images/controls/checkbox/ic_check_on.svg");
}
/* 그리드 행 */
.cl-grid-row {
  /* 보기 모드의 행 */
  /* 홀수 행 */
  /* 짝수 행 */
  /* 그리드 content의 첫번째 행 */
  /* 그리드 content의 마지막 행 */
  /* 추가된 행 */
  /* 수정된 행 */
  /* 삭제된 행 */
  /* 추가 후 삭제된 행 */
  /* 선택된 행 - 보기 모드 */
  /* 편집중인 행 */
  /* 체크된 행 */
  /* 행 그룹시 그룹의 헤더 */
  /* 행 그룹시 그룹의 푸터 */
}
.cl-grid-row.cl-inserted {
  background-color: initial;
  color: #2d2d2d;
}
.cl-grid-row.cl-inserted .cl-default-cell,
.cl-grid-row.cl-inserted .cl-inputbox,
.cl-grid-row.cl-inserted .cl-output,
.cl-grid-row.cl-inserted .cl-maskeditor,
.cl-grid-row.cl-inserted .cl-numbereditor,
.cl-grid-row.cl-inserted .cl-dateinput,
.cl-grid-row.cl-inserted .cl-button,
.cl-grid-row.cl-inserted .cl-textarea,
.cl-grid-row.cl-inserted .cl-combobox,
.cl-grid-row.cl-inserted .cl-treecell,
.cl-grid-row.cl-inserted .cl-fileinput,
.cl-grid-row.cl-inserted .cl-searchinput {
  color: inherit;
  font-weight: 400;
}
.cl-grid-row.cl-modified {
  background-color: initial;
  color: #2d2d2d;
}
.cl-grid-row.cl-modified .cl-default-cell,
.cl-grid-row.cl-modified .cl-inputbox,
.cl-grid-row.cl-modified .cl-output,
.cl-grid-row.cl-modified .cl-maskeditor,
.cl-grid-row.cl-modified .cl-numbereditor,
.cl-grid-row.cl-modified .cl-dateinput,
.cl-grid-row.cl-modified .cl-button,
.cl-grid-row.cl-modified .cl-textarea,
.cl-grid-row.cl-modified .cl-combobox,
.cl-grid-row.cl-modified .cl-treecell,
.cl-grid-row.cl-modified .cl-fileinput,
.cl-grid-row.cl-modified .cl-searchinput {
  color: inherit;
  font-weight: 400;
}
.cl-grid-row.cl-deleted {
  background-color: initial;
  color: #aaaaaa;
  font-style: normal;
}
.cl-grid-row.cl-deleted .cl-default-cell,
.cl-grid-row.cl-deleted .cl-inputbox,
.cl-grid-row.cl-deleted .cl-output,
.cl-grid-row.cl-deleted .cl-maskeditor,
.cl-grid-row.cl-deleted .cl-numbereditor,
.cl-grid-row.cl-deleted .cl-dateinput,
.cl-grid-row.cl-deleted .cl-button,
.cl-grid-row.cl-deleted .cl-textarea,
.cl-grid-row.cl-deleted .cl-combobox,
.cl-grid-row.cl-deleted .cl-treecell,
.cl-grid-row.cl-deleted .cl-fileinput,
.cl-grid-row.cl-deleted .cl-searchinput {
  color: #aaaaaa;
  font-style: inherit;
}
.cl-grid-row.cl-nullified {
  background-color: initial;
  color: #aaaaaa;
  font-style: normal;
}
.cl-grid-row.cl-nullified .cl-default-cell,
.cl-grid-row.cl-nullified .cl-inputbox,
.cl-grid-row.cl-nullified .cl-output,
.cl-grid-row.cl-nullified .cl-maskeditor,
.cl-grid-row.cl-nullified .cl-numbereditor,
.cl-grid-row.cl-nullified .cl-dateinput,
.cl-grid-row.cl-nullified .cl-button,
.cl-grid-row.cl-nullified .cl-textarea,
.cl-grid-row.cl-nullified .cl-combobox,
.cl-grid-row.cl-nullified .cl-treecell,
.cl-grid-row.cl-nullified .cl-fileinput,
.cl-grid-row.cl-nullified .cl-searchinput {
  color: #aaaaaa;
  font-style: inherit;
}
.cl-grid-row.cl-selected {
  background-color: #f0f1fe;
  /* 선택된행 포커스 스타일 */
}
.cl-grid-row.cl-selected:not(.cl-deleted):not(.cl-nullified) {
  color: #2d2d2d;
}
.cl-grid-row.cl-editing {
  background-color: #f0f1fe;
  color: #2d2d2d;
}
.cl-grid-row:not(.cl-editing) .cl-grid-cell.cl-selected {
  background-color: #f0f1fe;
  color: #2d2d2d;
}
.cl-grid-row.cl-rowgroup-header {
  background-color: transparent;
}
.cl-grid-row.cl-rowgroup-footer {
  background-color: transparent;
}
.cl-grid-row.cl-rowgroup-footer .cl-control {
  font-weight: 500;
}
/* 모든 셀 스타일 */
.cl-grid-cell {
  border-right: 0;
  border-bottom: 1px solid #eeeeee;
  /* columnType=checkbox, columnType=rowindex와 같이 그리드에서 기본 제공하는 컬럼 */
  /* 셀에 포함된 컨트롤 */
  /* 그룹 펼침/접힘 버튼 */
  /* 그리드 content의 첫번째 컬럼 */
  /* 그리드 content의 마지막 컬럼 */
}
.cl-grid-cell.cl-focus,
.cl-grid-cell:focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-grid-cell .cl-builtin {
  /* columnType=checkbox */
  /* columnType=rowindex */
}
.cl-grid-cell .cl-builtin:focus-within {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-grid-cell .cl-expander {
  /* 그룹 펼쳐짐 버튼 */
  /* 그룹 접혀짐 버튼 */
}
.cl-grid-cell.cl-last-column {
  border-right: 0;
}
/* Grid 기본 셀 스타일 */
.cl-default-cell {
  text-align: center;
}
/* 트리 셀 */
.cl-treecell {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 0;
  color: #2d2d2d;
  /* 트리 셀 안에 트리 아이템 (트리 셀에서 트리 구조가 시작되는 영역) */
  /* 트리셀 - focus */
  /* disabled 트리셀 */
  /* 트리셀간 라인 */
}
.cl-treecell .cl-treecell-item {
  align-items: center;
  /* 트리 아이템이 펼치고 접혀지는 아이콘 영역 */
  /* 트리 아이템 체크박스 */
  /* 트리 아이템의 아이콘 영역 */
  /* 트리 아이템의 텍스트 */
  /* 폴더형 트리 아이템 */
  /* 트리 아이템 - disabled */
}
.cl-treecell .cl-treecell-item .cl-checkbox {
  background: url("../images/component/common/ico_check.svg") no-repeat center/contain;
  width: 20px;
  height: 20px;
  min-height: 20px;
  /* 체크된 체크박스 */
  /* 부분 체크된 체크박스 */
}
.cl-treecell .cl-treecell-item .cl-checkbox.cl-checked {
  background-image: url("../images/component/common/ico_check_selected.svg");
  /* 체크된 disabled 체크박스 */
}
.cl-treecell .cl-treecell-item .cl-checkbox.cl-checked.cl-disabled {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-treecell .cl-treecell-item .cl-checkbox.cl-partialchecked {
  background-image: url("../images/component/common/ico_check_partial.svg");
  /* disabled 상태의 부분 체크된 체크박스*/
}
.cl-treecell .cl-treecell-item .cl-checkbox.cl-partialchecked.cl-disabled {
  background-image: url("../images/component/common/ico_check_partial_disabled.svg");
}
.cl-treecell .cl-treecell-item .cl-treecell-itemicon {
  background-image: url("../images/component/common/ico_file.svg");
  background-size: 20px;
  width: 20px;
  height: 20px;
}
.cl-treecell .cl-treecell-item .cl-text {
  padding: 0 0 0 10px;
}
.cl-treecell .cl-treecell-item.cl-folder {
  /* 폴더형 트리 아이템의 아이콘 영역 */
  /* 폴더형 트리 아이템이 펼쳐졌을 때 펼치고 접혀지는 아이콘 영역 */
  /* 폴더형 트리 아이템이 접혀졌을 때 펼치고 접혀지는 아이콘 영역 */
}
.cl-treecell .cl-treecell-item.cl-folder .cl-treecell-itemicon {
  background-image: url("../images/component/common/ico_folder.svg");
}
.cl-treecell .cl-treecell-item.cl-folder.cl-expanded > .cl-treecell-treeicon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-treecell .cl-treecell-item.cl-folder.cl-collapsed > .cl-treecell-treeicon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-treecell .cl-treecell-item.cl-disabled {
  color: #aaaaaa;
}
.cl-treecell.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-treecell.cl-disabled {
  /* disabled 트리셀의 체크박스 */
}
.cl-treecell.cl-disabled .cl-checkbox {
  /* disabled 트리셀의 체크된 체크박스 */
  /* disabled 트리셀의 부분 체크된 체크박스 */
}
.cl-treecell.cl-disabled .cl-checkbox.cl-checked {
  background-image: url("../images/component/common/ico_check_selected_disabled.svg");
}
.cl-treecell.cl-disabled .cl-checkbox.cl-partialchecked {
  background-image: url("../images/component/common/ico_check_partial_disabled.svg");
}
.cl-treecell.cl-treecell-lines {
  /* 트리 셀 라인 적용시 트리 셀 아이템 */
}
.cl-treecell.cl-treecell-lines .cl-treecell-item {
  /* 트리 라인의 확장/축소 아이콘 */
  /* 형제 노드에 의해 라인만 있는 영역 */
  /* 현재 트리 셀의 라인 영역 */
}
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-treecell-treeicon {
  background-size: 20px;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-expanded > .cl-treecell-treeicon {
  background-image: url("../images/component/common/ico_treeline_expand.svg");
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-expanded.cl-selected > .cl-treecell-treeicon {
  background-image: url("../images/component/common/ico_treeline_expand.svg");
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-collapsed > .cl-treecell-treeicon {
  background-image: url("../images/component/common/ico_treeline_collapse.svg");
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-collapsed.cl-selected > .cl-treecell-treeicon {
  background-image: url("../images/component/common/ico_treeline_collapse.svg");
}
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-treecell-line {
  background-image: url("../images/component/common/ico_treeline.svg");
  background-repeat: repeat-y;
  height: 100%;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-treecell-iconline {
  background-image: url("../images/component/common/ico_treeline_child.svg");
  height: 100%;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-first .cl-treecell-iconline {
  background-image: url("../images/component/common/ico_treeline_first.svg");
  background-position: center bottom;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-last .cl-treecell-iconline {
  background-image: url("../images/component/common/ico_treeline_last.svg");
  background-position: center top;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item.cl-first.cl-last .cl-treecell-iconline {
  background-image: none;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-text {
  padding: 0 0 0 10px;
}
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-treecell-line,
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-treecell-treeicon,
.cl-treecell.cl-treecell-lines .cl-treecell-item .cl-treecell-iconline {
  padding: 0;
}
/* 트리 셀이 enabled이고, 트리 아이템이 enabled일때 스타일 */
/* 트리 셀 - disabled */
/* 내비게이션 바 */
.cl-navigationbar {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  color: #2d2d2d;
  /* 스크롤 왼쪽 버튼 */
  /* 스크롤 오른쪽 버튼 */
  /* 상단 바 */
  /* 내비게이션 바 - 포커스 */
  /* barItemWidths 속성이 true인 경우 */
}
.cl-navigationbar .cl-navigationbar-prev,
.cl-navigationbar .cl-navigationbar-next {
  background-color: transparent;
}
.cl-navigationbar .cl-navigationbar-prev.cl-disabled,
.cl-navigationbar .cl-navigationbar-next.cl-disabled {
  opacity: 0.5;
}
.cl-navigationbar .cl-navigationbar-prev {
  background-image: url("../images/component/common/ico_tab_prev.svg");
}
.cl-navigationbar .cl-navigationbar-prev.cl-position-both,
.cl-navigationbar .cl-navigationbar-prev.cl-position-left,
.cl-navigationbar .cl-navigationbar-prev.cl-position-right {
  border: 0;
}
.cl-navigationbar .cl-navigationbar-prev.cl-disabled {
  background-image: url("../images/component/common/ico_tab_prev.svg");
}
.cl-navigationbar .cl-navigationbar-next {
  background-image: url("../images/component/common/ico_tab_next.svg");
}
.cl-navigationbar .cl-navigationbar-next.cl-position-both,
.cl-navigationbar .cl-navigationbar-next.cl-position-left,
.cl-navigationbar .cl-navigationbar-next.cl-position-right {
  border: 0;
}
.cl-navigationbar .cl-navigationbar-next.cl-disabled {
  background-image: url("../images/component/common/ico_tab_next.svg");
}
.cl-navigationbar .cl-navigationbar-bar {
  /* 내비게이션 바 아이템 */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
  color: #2d2d2d;
  height: auto;
  min-height: 32px;
  padding: 6px 12px;
  /* 내비게이션 바 아이템 아이콘 */
  /* 내비게이션 바 아이템 텍스트 */
  /* 내비게이션 바 아이템 단축키 */
  /* 내비게이션 바 아이템 드랍다운 아이콘 */
  /* 내비게이션 바 아이템 - 호버 */
  /* 내비게이션 바 아이템 - 활성화 */
  /* 내비게이션 바 아이템 - 비활성화 */
  /* 내비게이션 바 아이템 - 선택됨 */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item .cl-navigationbar-arrow {
  background-image: url("../images/component/common/ico_arr_down_20.svg");
  background-size: contain;
  width: 20px;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover {
  background-color: transparent;
  color: #2c2d31;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled).cl-hover {
  background-color: transparent;
  color: #2c2d31;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-disabled {
  color: #aaaaaa;
  /* 메뉴 아이템 - 선택됨, disabled */
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-disabled.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
.cl-navigationbar.cl-focus {
  border-color: #2d2d2d;
}
/* 내비게이션 바 드랍다운 메뉴 */
.cl-navigationbar-list {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  margin-top: -1px;
  padding: 4px 0;
  /* megamenu 타입의 카테고리 */
  /* submenu의 up스크롤 버튼*/
  /* submenu의 down스크롤 버튼*/
  /* 내비게이션 바 드랍다운 메뉴 아이템 */
}
.cl-navigationbar-list .cl-navigationbar-category {
  /* 카테고리의 아이템 영역 */
}
.cl-navigationbar-list .cl-navigationbar-category .sub-items {
  /* 카테고리의 목록 아이템 */
}
.cl-navigationbar-list .cl-navigationbar-listitem {
  color: #2d2d2d;
  /* 내비게이션 바 드랍다운 메뉴 아이템 텍스트 */
  /* 내비게이션 드랍다운 메뉴 아이템 - 활성화 */
  /* 내비게이션 바 드랍다운 메뉴 아이템 - 비활성화 */
  /* 내비게이션 바 드랍다운 메뉴 아이템 - 선택됨 */
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-icon-wrapper {
  width: 0px;
  /* 내비게이션 바 드랍다운 메뉴 아이템 아이콘 */
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-icon-wrapper .cl-navigationbar-icon {
  display: none;
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-arrow-wrapper {
  width: 0px;
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-arrow-wrapper .cl-navigationbar-arrow {
  width: 100%;
}
.cl-navigationbar-list .cl-navigationbar-listitem .cl-navigationbar-accesskey-wrapper {
  /* 내비게이션 바 드랍다운 메뉴 아이템 단축키 */
}
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled) {
  /* 내비게이션 드랍다운 메뉴 아이템 - 호버 */
}
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled):not(.cl-selected):hover,
.cl-navigationbar-list .cl-navigationbar-listitem:not(.cl-disabled).cl-hover {
  background-color: transparent;
  color: #2c2d31;
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-hover {
  background-color: transparent;
  color: #2c2d31;
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-disabled {
  color: #aaaaaa;
  /* 내비게이션 바 드랍다운 메뉴 아이템 - 비활성화, 선택됨 */
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-disabled.cl-selected {
  background-color: transparent;
  color: #aaaaaa;
}
.cl-navigationbar-list .cl-navigationbar-listitem.cl-selected {
  background-color: rgba(64, 81, 233, 0.1);
  color: #0c0c0d;
}
/* fullmenu 타입 서브메뉴 */
.cl-navigationbar-fullmenu {
  /* 서브메뉴에서 나누어진 그룹 영역 */
}
/* 탭 폴더 - disabled */
.cl-tabfolder.cl-disabled .cl-tabfolder-body {
  background-color: #eaeaea;
}
/* 탭 폴더 */
.cl-tabfolder {
  font: 400 15px "Pretendard GOV", sans-serif;
  /* 헤더 */
  /* 탭폴더 바디 */
}
.cl-tabfolder .cl-tabfolder-header {
  height: auto;
  /* 좌측 스크롤 버튼 */
  /* 우측 스크롤 버튼 */
  /* 탭 아이템 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-header-viewport {
  padding: 8px 0 16px;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-prev,
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-next {
  background-color: transparent;
  border: 0;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-prev.cl-disabled,
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-next.cl-disabled {
  opacity: 0.5;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-prev {
  background-image: url("../images/component/common/ico_tab_prev.svg");
  /* 비활성 상태 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-prev.cl-disabled {
  background-image: url("../images/component/common/ico_tab_prev.svg");
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-next {
  background-image: url("../images/component/common/ico_tab_next.svg");
  /* 비활성 상태 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-next.cl-disabled {
  background-image: url("../images/component/common/ico_tab_next.svg");
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item {
  background-color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  color: #555555;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  padding: 11px 24px;
  text-align: center;
  /* 탭 아이템 체크 박스 */
  /* 탭 아이템 닫기 버튼 */
  /* 탭 아이템 - 선택됨 */
  /* 탭 아이템 - 호버 */
  /* 비활성 탭 아이템 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .cl-text:focus {
  text-decoration: none;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:focus-within {
  outline-offset: -4px;
  outline: 2px solid #00cbde;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:focus-within .cl-text:focus {
  outline: none;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected {
  background-color: #4051e9;
  color: #ffffff;
  font-weight: 600;
  /* 선택된 탭 아이템 닫기 버튼 */
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item:not(.cl-selected):hover {
  background-color: #ffffff;
  color: #555555;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-disabled {
  background-color: #ffffff;
  border-color: transparent;
  color: #7f8791;
}
.cl-tabfolder .cl-tabfolder-header.cl-top .cl-tabfolder-item,
.cl-tabfolder .cl-tabfolder-header.cl-bottom .cl-tabfolder-item {
  border: 0;
  position: relative;
}
.cl-tabfolder .cl-tabfolder-header.cl-top .cl-tabfolder-item.cl-selected,
.cl-tabfolder .cl-tabfolder-header.cl-bottom .cl-tabfolder-item.cl-selected {
  border-color: transparent;
}
.cl-tabfolder .cl-tabfolder-header.cl-top .cl-tabfolder-item:not(.cl-selected):hover,
.cl-tabfolder .cl-tabfolder-header.cl-bottom .cl-tabfolder-item:not(.cl-selected):hover {
  border-color: #f1f2f5;
}
.cl-tabfolder .cl-tabfolder-body {
  background-color: transparent;
  border: 0;
}
/* 페이지 인덱서 */
.cl-pageindexer {
  font: 400 15px "Pretendard GOV", sans-serif;
  color: #555555;
  padding: 0;
  overflow: visible !important;
  /* 페이지 인덱서 버튼 공통 */
  /* navigationType="text"으로 표현되는 페이지 정보 텍스트 */
  /* 페이지 인덱서 처음으로 버튼 */
  /* 페이지 인덱서 이전 버튼 */
  /* 페이지 인덱서 다음 버튼 */
  /* 페이지 인덱서 마지막으로 버튼 */
  /* navigationType="button"으로 표현되는 페이지 인덱스 버튼 */
  /* 페이지 인덱서 - disabled */
}
.cl-pageindexer .cl-pageindexer-first,
.cl-pageindexer .cl-pageindexer-last,
.cl-pageindexer .cl-pageindexer-prev,
.cl-pageindexer .cl-pageindexer-next,
.cl-pageindexer .cl-pageindexer-index-area,
.cl-pageindexer .cl-pageindexer-index,
.cl-pageindexer .cl-text-wrapper {
  min-height: 0;
}
.cl-pageindexer .cl-pageindexer-first,
.cl-pageindexer .cl-pageindexer-last,
.cl-pageindexer .cl-pageindexer-prev,
.cl-pageindexer .cl-pageindexer-next,
.cl-pageindexer .cl-pageindexer-index {
  background-size: 20px;
  border-radius: 6px;
  height: 40px;
  margin: 0 4px;
}
.cl-pageindexer .cl-pageindexer-first:focus,
.cl-pageindexer .cl-pageindexer-last:focus,
.cl-pageindexer .cl-pageindexer-prev:focus,
.cl-pageindexer .cl-pageindexer-next:focus,
.cl-pageindexer .cl-pageindexer-index:focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-pageindexer .cl-pageindexer-first.cl-disabled,
.cl-pageindexer .cl-pageindexer-last.cl-disabled,
.cl-pageindexer .cl-pageindexer-prev.cl-disabled,
.cl-pageindexer .cl-pageindexer-next.cl-disabled,
.cl-pageindexer .cl-pageindexer-index.cl-disabled {
  background-color: #eaeaea;
}
.cl-pageindexer .cl-pageindexer-text {
  padding: 0;
}
.cl-pageindexer .cl-pageindexer-text span {
  color: #4051e9;
  font-weight: 700;
}
.cl-pageindexer .cl-pageindexer-first,
.cl-pageindexer .cl-pageindexer-last,
.cl-pageindexer .cl-pageindexer-prev,
.cl-pageindexer .cl-pageindexer-next {
  background-color: transparent;
  border: 0;
  width: 62px;
  margin: 0;
}
.cl-pageindexer .cl-pageindexer-prev {
  background-image: url("../images/component/common/ico_page_prev.svg");
  background-position: 4px center;
}
.cl-pageindexer .cl-pageindexer-prev::before {
  content: "이전";
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  height: 100%;
  color: inherit;
  margin-left: 24px;
}
.cl-pageindexer .cl-pageindexer-next {
  background-image: url("../images/component/common/ico_page_next.svg");
  background-position: calc(100% - 4px) center;
}
.cl-pageindexer .cl-pageindexer-next::before {
  content: "다음";
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  height: 100%;
  color: inherit;
  margin-right: 24px;
}
.cl-pageindexer .cl-pageindexer-index-area {
  padding: 0 12px;
}
.cl-pageindexer .cl-pageindexer-index {
  background-color: transparent;
  border: none;
  width: 40px;
  /* 페이지 인덱서 선택된 페이지 */
}
.cl-pageindexer .cl-pageindexer-index.cl-selected {
  background-color: #4051e9;
  color: #ffffff;
  font-weight: 700;
}
.cl-pageindexer.cl-disabled {
  /* 페이지 인덱서 버튼 공통 - disabled */
  /* 페이지 인덱서 버튼 공통 - disabled, selected */
}
.cl-pageindexer.cl-disabled .cl-pageindexer-first,
.cl-pageindexer.cl-disabled .cl-pageindexer-last,
.cl-pageindexer.cl-disabled .cl-pageindexer-prev,
.cl-pageindexer.cl-disabled .cl-pageindexer-next {
  background-color: transparent;
  color: #8e8e8e;
}
.cl-pageindexer.cl-disabled .cl-pageindexer-prev {
  background-image: url("../images/component/common/ico_page_prev_disabled.svg");
}
.cl-pageindexer.cl-disabled .cl-pageindexer-next {
  background-image: url("../images/component/common/ico_page_next_disabled.svg");
}
.cl-pageindexer.cl-disabled .cl-pageindexer-index {
  color: #aaaaaa;
}
.cl-pageindexer.cl-disabled .cl-pageindexer-index.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-pageindexer:not(.cl-disabled) {
  /* 페이지 인덱서 처음으로 버튼 - active */
  /* 페이지 인덱서 이전 버튼 - active */
  /* 페이지 인덱서 다음 버튼 - active */
  /* 페이지 인덱서 마지막으로 버튼 - active */
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected).cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):hover {
  background-color: #eaecff;
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:not(.cl-selected):active,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index:not(.cl-selected):active {
  background-color: #c5c9f5;
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first.cl-disabled,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last.cl-disabled,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev.cl-disabled,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next.cl-disabled,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index.cl-disabled {
  background-color: transparent;
  color: #8e8e8e;
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first.cl-disabled.cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last.cl-disabled.cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev.cl-disabled.cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next.cl-disabled.cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index.cl-disabled.cl-hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-first.cl-disabled:hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-last.cl-disabled:hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev.cl-disabled:hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next.cl-disabled:hover,
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-index.cl-disabled:hover {
  background-color: transparent;
  color: #8e8e8e;
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev.cl-disabled {
  background-image: url("../images/component/common/ico_page_prev_disabled.svg");
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next.cl-disabled {
  background-image: url("../images/component/common/ico_page_next_disabled.svg");
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-prev:active {
  background-image: url("../images/component/common/ico_page_prev.svg");
}
.cl-pageindexer:not(.cl-disabled) .cl-pageindexer-next:active {
  background-image: url("../images/component/common/ico_page_next.svg");
}
/* 알림 아이템 */
.cl-notifier-item {
  font: 400 15px "Pretendard GOV", sans-serif;
  background: #f1f2f5;
  border: 1px solid #f1f2f5;
  color: #2d2d2d;
  border-radius: 0;
  font-weight: 500;
  padding: 8px 20px;
  /* 알림 아이템 텍스트 */
  /* 알림 아이템 아이콘 */
  /* 알림 아이템 닫기 버튼 */
  /* 알림 아이템 기본 스타일 */
  /* 알림 아이템 success 스타일 */
  /* 알림 아이템 info 스타일 */
  /* 알림 아이템 warning 스타일 */
  /* 알림 아이템 danger 스타일 */
}
.cl-notifier-item .cl-text {
  padding-left: 12px;
}
.cl-notifier-item .cl-notifier-icon {
  border-radius: 999px;
  width: 32px;
}
.cl-notifier-item .cl-notifier-closebutton {
  background-image: url("../images/component/common/ico_close_20.svg");
}
.cl-notifier-item.cl-notifier-default {
  /* 알림 아이템 기본 아이콘 */
}
.cl-notifier-item.cl-notifier-default .cl-notifier-default-icon {
  background-color: #4051e9;
  background-image: url("../images/component/common/W_ico_talk_16.svg");
}
.cl-notifier-item.cl-notifier-success {
  /* 알림 아이템 success 아이콘 */
}
.cl-notifier-item.cl-notifier-success .cl-notifier-success-icon {
  background-color: #09a873;
  background-image: url("../images/component/common/W_ico_talk_16.svg");
}
.cl-notifier-item.cl-notifier-info {
  /* 알림 아이템 info 아이콘 */
}
.cl-notifier-item.cl-notifier-info .cl-notifier-info-icon {
  background-color: #0074ff;
  background-image: url("../images/component/common/W_ico_talk_16.svg");
}
.cl-notifier-item.cl-notifier-warning {
  /* 알림 아이템 warning 아이콘 */
}
.cl-notifier-item.cl-notifier-warning .cl-notifier-warning-icon {
  background-color: #ffb800;
  background-image: url("../images/component/common/ico_talk_16.svg");
}
.cl-notifier-item.cl-notifier-danger {
  /* 알림 아이템 danger 아이콘 */
}
.cl-notifier-item.cl-notifier-danger .cl-notifier-danger-icon {
  background-color: #de3737;
  background-image: url("../images/component/common/W_ico_talk_16.svg");
}
/* 프로그레스 바 루트 */
.cl-progress {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #aaafb6;
  border: 0;
  border-radius: 0;
  line-height: 1;
  min-width: 0;
  text-shadow: none;
  /* 진행 바 */
  /* 진행 바에 표시되는 텍스트 */
}
.cl-progress .cl-progress-bar {
  background-image: none;
  background-color: #2d2d2d;
  border-radius: 0;
  transition: all 0.3s;
}
.cl-progress .cl-text {
  color: #ffffff;
}
/* 프로그레스 바 - 비활성화 */
.cl-progress.cl-disabled {
  background-image: none;
  background-color: #eaeaea;
}
.cl-progress.cl-disabled .cl-progress-bar {
  /* 진행 바 - disabled */
  background-image: none;
  background-color: #aaaaaa;
}
.cl-progress.cl-disabled .cl-text {
  color: #ffffff;
}
/* 파일 인풋 루트 */
.cl-fileinput {
  font: 400 15px "Pretendard GOV", sans-serif;
  background-image: none;
  background-color: #f1f2f5;
  border: 1px solid #f1f2f5;
  border-radius: 8px;
  color: #2d2d2d;
  text-align: left;
  /* autoSize 설정시 표시되는 기본크기 */
  min-width: 28px;
  min-height: 28px;
  /* 파일 인풋 내 텍스트 */
  /* 비활성화 상태 */
  /* 파일 인풋 - 클리어 버튼 */
  /* 포커스 상태 */
}
.cl-fileinput .cl-text {
  padding: 0 12px;
}
.cl-fileinput .cl-text.cl-placeholder {
  color: #8e8e8e !important;
}
.cl-fileinput.cl-disabled {
  background-color: #eaeaea;
  border-color: #eaeaea;
  color: #aaaaaa;
}
.cl-fileinput .cl-fileinput-clear {
  background: url("../images/component/common/ico_clear_20.svg") no-repeat center/contain;
  width: 20px;
  margin: 0px 6px 0px 0px;
}
.cl-fileinput.cl-focus {
  border-color: #2d2d2d;
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-formlayout-column-shade {
  /* 컬럼 음영 스타일 */
  background-color: #c9cdd2;
}
.cl-formlayout-row-shade {
  /* 행 음영 스타일 */
  background-color: #c9cdd2;
}
.cl-formlayout-vertical-separator,
.cl-formlayout-horizontal-separator {
  /* 구분 선 스타일 */
  background-color: #aaafb6;
}
.cl-formlayout-vertical-lightweight-resizer,
.cl-formlayout-horizontal-lightweight-resizer {
  /* lightweight resizer style */
  background-color: #2d2d2d;
}
/* HTML 오브젝트 */
.cl-audio {
  border: 1px solid #f1f2f5;
}
.cl-audio.cl-focus {
  border-color: #2d2d2d;
}
.cl-audio.cl-disabled .cl-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
/* 비디오 */
.cl-video {
  border: 1px solid #f1f2f5;
}
.cl-video.cl-focus {
  border-color: #2d2d2d;
}
.cl-video.cl-disabled .cl-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
/* 사이드 내비게이션 */
.cl-sidenavigation {
  font: 400 15px "Pretendard GOV", sans-serif;
  border: 1px solid #f1f2f5;
  color: #2d2d2d;
  /* 포커스 */
  /* 사이드 내비게이션 아이템 */
  /* 비활성화 */
}
.cl-sidenavigation.cl-focus {
  border-color: #2d2d2d;
}
.cl-sidenavigation .cl-sidenavigation-item {
  height: auto;
  padding: 6px 12px;
  /* 아이템 아이콘 */
  /* 아이템 텍스트 */
  /* 아이템 뱃지 */
  /* 펼침 아이콘 */
  /* 폴더 아이템 */
  /* 아이템 - 호버, 포커스 */
  /* 아이템 - 선택됨 */
}
.cl-sidenavigation .cl-sidenavigation-item .cl-icon {
  background-image: url("../images/component/common/ico_file.svg");
  background-size: contain;
  width: 20px;
  height: 20px;
}
.cl-sidenavigation .cl-sidenavigation-item .cl-text {
  padding: 0 0 0 8px;
  white-space: normal;
  word-break: break-all;
  text-overflow: initial;
}
.cl-sidenavigation .cl-sidenavigation-item .cl-expand-icon {
  background-size: contain;
  width: 24px;
  height: 24px;
}
.cl-sidenavigation .cl-sidenavigation-item.cl-folder .cl-icon {
  background-image: url("../images/component/common/ico_folder.svg");
}
.cl-sidenavigation .cl-sidenavigation-item.cl-folder.cl-expanded .cl-expand-icon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-sidenavigation .cl-sidenavigation-item.cl-folder.cl-collapsed .cl-expand-icon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-sidenavigation .cl-sidenavigation-item:hover,
.cl-sidenavigation .cl-sidenavigation-item.cl-hover,
.cl-sidenavigation .cl-sidenavigation-item:focus {
  background-color: transparent;
  color: #2c2d31;
}
.cl-sidenavigation .cl-sidenavigation-item.cl-selected {
  background-color: transparent;
  color: #0c0c0d;
}
.cl-sidenavigation .cl-sidenavigation-item.cl-selected.cl-folder.cl-expanded .cl-expand-icon {
  background-image: url("../images/component/common/ico_tree_expand.svg");
}
.cl-sidenavigation .cl-sidenavigation-item.cl-selected.cl-folder.cl-collapsed .cl-expand-icon {
  background-image: url("../images/component/common/ico_tree_collapse.svg");
}
.cl-sidenavigation .cl-sidenavigation-item.cl-disabled {
  color: #aaaaaa;
}
.cl-sidenavigation .cl-sidenavigation-item.cl-disabled.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-sidenavigation .cl-sidenavigation-item.cl-focus,
.cl-sidenavigation .cl-sidenavigation-item:focus {
  text-decoration: underline;
}
.cl-sidenavigation.cl-disabled {
  color: #aaaaaa;
}
.cl-sidenavigation.cl-disabled .cl-sidenavigation-item.cl-selected {
  background-color: #eaeaea;
  color: #aaaaaa;
}
.cl-tooltip {
  background-color: #000000;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  padding: 2px 6px;
}
.cl-tooltip .cl-control {
  color: #ffffff;
}
/************************************************
 * 공통 스타일시트
 ************************************************/
/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
 */
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 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  font-family: "Pretendard GOV", sans-serif;
  color: #2d2d2d;
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
  word-wrap: break-word;
  scroll-behavior: smooth;
}
html {
  font-size: 10px;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  max-width: none;
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}
.cl-layout,
.cl-layout-content,
.cl-layout-wrap {
  line-height: 1;
}
::-moz-selection {
  background: #494c55;
  color: #ffffff;
}
::selection {
  background: #494c55;
  color: #ffffff;
}
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
a,
button,
select,
ul,
li,
span,
em,
label,
:before,
:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  font-family: inherit;
  letter-spacing: inherit;
  line-height: 1.5;
}
pre {
  font-family: inherit;
}
input,
textarea,
a,
button,
select,
span,
label,
:before,
:after {
  font-size: inherit;
  font-weight: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 700;
}
img,
fieldset {
  border: 0;
}
fieldset {
  min-width: 100%;
}
img {
  max-width: 100%;
  vertical-align: top;
}
ul,
ol {
  list-style: none;
}
em,
address,
i {
  font-style: normal;
}
a,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
}
textarea {
  resize: none;
}
label {
  cursor: pointer;
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
caption {
  position: static !important;
  margin: 0 !important;
}
.img img {
  min-width: 100%;
  max-width: 100%;
}
*:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.8);
}
/*
Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
https://github.com/orioncactus/pretendard

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
*/
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 800;
  font-display: swap;
  src: local('Pretendard GOV Bold'), url("../fonts/PretendardGOV/PretendardGOV-ExtraBold.subset.woff2") format('woff2'), url("../fonts/PretendardGOV/PretendardGOV-ExtraBold.subset.woff") format('woff'), url("../fonts/PretendardGOV/PretendardGOV-ExtraBold.otf") format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 700;
  font-display: swap;
  src: local('Pretendard GOV Bold'), url("../fonts/PretendardGOV/PretendardGOV-Bold.subset.woff2") format('woff2'), url("../fonts/PretendardGOV/PretendardGOV-Bold.subset.woff") format('woff'), url("../fonts/PretendardGOV/PretendardGOV-Bold.otf") format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 600;
  font-display: swap;
  src: local('Pretendard GOV SemiBold'), url("../fonts/PretendardGOV/PretendardGOV-SemiBold.subset.woff2") format('woff2'), url("../fonts/PretendardGOV/PretendardGOV-SemiBold.subset.woff") format('woff'), url("../fonts/PretendardGOV/PretendardGOV-SemiBold.otf") format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 500;
  font-display: swap;
  src: local('Pretendard GOV Medium'), url("../fonts/PretendardGOV/PretendardGOV-Medium.subset.woff2") format('woff2'), url("../fonts/PretendardGOV/PretendardGOV-Medium.subset.woff") format('woff'), url("../fonts/PretendardGOV/PretendardGOV-Medium.otf") format('opentype');
}
@font-face {
  font-family: 'Pretendard GOV';
  font-weight: 400;
  font-display: swap;
  src: local('Pretendard GOV Regular'), url("../fonts/PretendardGOV/PretendardGOV-Regular.subset.woff2") format('woff2'), url("../fonts/PretendardGOV/PretendardGOV-Regular.subset.woff") format('woff'), url("../fonts/PretendardGOV/PretendardGOV-Regular.otf") format('opentype');
}
/************************************************
 * [MIXIN] 헤딩
 * →
 ************************************************/
.h1,
.h2 {
  font-weight: 700;
}
.h3,
.h4,
.h5,
.h6 {
  font-weight: 600;
}
.h1 {
  font-size: 27px;
}
.h2 {
  font-size: 24px;
}
.h3 {
  font-size: 21px;
}
.h4 {
  font-size: 19px;
}
.h5 {
  font-size: 18px;
}
/************************************************
 * [MIXIN] 본문
 * →
 ************************************************/
.b-lg {
  font-size: 17px;
}
.b-md {
  font-size: 16px;
}
.b-sm {
  font-size: 15px;
}
.b-xs {
  font-size: 14px;
}
/************************************************
 * [MIXIN] br 처리
 * →
 ************************************************/
.w-br {
  display: block;
}
.m-br {
  display: inline-block;
}
@media (max-width: 767px) {
  .w-br {
    display: inline-block;
  }
  .m-br {
    display: block;
  }
}
/************************************************
 * [MIXIN] 플렉스 레이아웃
 ************************************************/
/************************************************
 * [MIXIN] 그리드 레이아웃
 ************************************************/
/************************************************
 * [MIXIN] 버튼 스타일 RESET
 ************************************************/
.btn-transparent {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
}
.btn-transparent:focus,
.btn-transparent.cl-focus,
.btn-transparent:not(.cl-disabled):hover,
.btn-transparent:not(.cl-disabled).cl-activated,
.btn-transparent:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
/************************************************
 * [MIXIN] 포커스 링
 ************************************************/
/************************************************
 * [MIXIN] 반응형 처리
 ************************************************/
/* 1280px 이상 */
@media (min-width: 1280px) {
  /* 데스크탑 */
}
/* 1024px ~ 1279px */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 태블릿 */
}
/* 0 ~ 1023px */
@media (max-width: 1023px) {
  /* 모바일 */
}
/* =====================
   앱 헤더 (udcComAppHeader)
   ===================== */
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-button.home {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/component/udc/ico_home.svg");
  background-position: left center;
  color: #717171;
  padding-left: 27px;
  text-align: left;
  text-decoration: underline;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-button.home:focus,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-button.home.cl-focus,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-button.home:not(.cl-disabled):hover,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-button.home:not(.cl-disabled).cl-activated,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-button.home:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container > .cl-layout > .cl-layout-content > .cl-layout-wrap {
  padding-left: 21px;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container > .cl-layout > .cl-layout-content > .cl-layout-wrap::before {
  content: "";
  position: absolute;
  top: calc(50% - 9px);
  left: 0;
  width: 18px;
  height: 18px;
  background: url("../images/component/udc/ico_bc_arr.svg") no-repeat center;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  color: #717171;
  font-size: 15px;
  font-weight: 400;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb:focus,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb.cl-focus,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb:not(.cl-disabled):hover,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb:not(.cl-disabled).cl-activated,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-button.breadcrumb.cl-last {
  color: #1d1d1d;
  font-weight: 500;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  color: #717171;
  font-size: 15px;
  font-weight: 400;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb:focus,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb.cl-focus,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb:not(.cl-disabled):hover,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb:not(.cl-disabled).cl-activated,
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.app-header .cl-container.breadcrumb-wrap .cl-container .cl-output.breadcrumb.cl-last {
  color: #1d1d1d;
  font-weight: 500;
}
.cl-container.app-header .cl-output.tit {
  font-weight: 700;
  font-size: 27px;
}
.cl-container.app-header .cl-output.tit .cl-text::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #f23b3b;
  border-radius: 999px;
  margin-left: 2px;
}
/* =====================
   파일박스 (udcComFileBox)
   ===================== */
.cl-container.filebox {
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 12px;
}
.cl-container.filebox .cl-output.name {
  background-image: url("../images/component/common/ico_clip_md_24.svg");
  font-size: 16px;
  padding-left: 40px;
}
.cl-container.filebox .cl-button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
}
.cl-container.filebox .cl-button:focus,
.cl-container.filebox .cl-button.cl-focus,
.cl-container.filebox .cl-button:not(.cl-disabled):hover,
.cl-container.filebox .cl-button:not(.cl-disabled).cl-activated,
.cl-container.filebox .cl-button:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.filebox .cl-button.download {
  background-image: url("../images/component/common/ico_download_md_24.svg");
}
.cl-container.filebox .cl-button.preview {
  background-image: url("../images/component/common/ico_view_md_24.svg");
}
/************************************************
 * 인트로 A
 ************************************************/
.cl-container._introA .cl-container.main-top .cl-container.header {
  padding: 21px 40px;
  z-index: 1;
}
.cl-container._introA .cl-container.main-top .cl-container.header > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: normal;
  gap: 0;
}
.cl-container._introA .cl-container.main-top .cl-container.header .logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 0 4px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}
.cl-container._introA .cl-container.main-top .cl-container.header .logo a {
  display: block;
  color: #ffffff;
  text-decoration: none;
}
.cl-container._introA .cl-container.main-top .cl-container.header .logo::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: #f23b3b;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-searchinput.search {
  background-color: rgba(0, 0, 0, 0.1);
  border: 0;
  border-radius: 12px;
  color: #ffffff;
  font-size: 17px;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-searchinput.search .cl-text {
  padding: 0 12px;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-searchinput.search .cl-text.cl-placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-searchinput.search .cl-searchinput-search {
  background-image: url("../images/intro/btn-search.png");
  width: 24px;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-searchinput.search.cl-focus {
  outline-color: #ffffff;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-container.log .cl-button {
  background-color: #ffffff;
  border: 0;
  border-radius: 12px;
  padding: 0;
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-container.log .cl-button.btn-login {
  background-image: url("../images/intro/btn-login.png");
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-container.log .cl-button.btn-join {
  background-image: url("../images/intro/btn-join.png");
}
.cl-container._introA .cl-container.main-top .cl-container.header .cl-container.log .cl-button.btn-sch {
  background-image: url("../images/intro/search_bold.svg");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-output.scroll {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  overflow: visible !important;
  text-transform: uppercase;
  transform: rotate(90deg);
  z-index: 1;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-output.scroll::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 4px);
  right: 0;
  width: 12px;
  height: 12px;
  background: url("../images/intro/bg-scroll.png") no-repeat center;
  animation: scrollMove 1s infinite alternate;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area {
  z-index: 1;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-output.now {
  color: #ffffff;
  font-size: 14px;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-output.total {
  color: #ffffff;
  font-size: 14px;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-progress.pagination {
  background-color: rgba(0, 0, 0, 0.2);
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-progress.pagination .cl-progress-bar {
  background-color: #ffffff;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-prev {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/intro/btn-prev.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-prev:focus,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-prev.cl-focus,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-prev:not(.cl-disabled):hover,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-prev:not(.cl-disabled).cl-activated,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-prev:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/intro/btn-stop.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play:focus,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play.cl-focus,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play:not(.cl-disabled):hover,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play:not(.cl-disabled).cl-activated,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-play.on {
  background-image: url("../images/intro/btn-start.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-next {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/intro/btn-next.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-next:focus,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-next.cl-focus,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-next:not(.cl-disabled):hover,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-next:not(.cl-disabled).cl-activated,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area .cl-button.swiper-button-next:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 {
  background-position: left top;
  background-repeat: no-repeat;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 > .cl-layout > .cl-layout-content,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 > .cl-layout > .cl-layout-content,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: normal;
  gap: 0;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 > .cl-layout > .cl-layout-content > .cl-layout-margin,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 > .cl-layout > .cl-layout-content > .cl-layout-margin,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output {
  color: #ffffff;
  font-weight: 700;
  text-align: center;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-01,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-01,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-01 {
  font-size: 25px;
  line-height: 1;
  margin-top: -60px;
  margin-bottom: 60px;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-02,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-02,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-02 {
  font-size: 64px;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-02 .dot,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-02 .dot,
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-02 .dot {
  color: #f23b3b;
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 {
  background-image: url("../images/intro/vis-01.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 {
  background-image: url("../images/intro/vis-02.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 {
  background-image: url("../images/intro/vis-03.png");
}
.cl-container._introA .cl-container.main-top .cl-container.main-visual-swiper .swiper-slide > .cl-container > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cl-container._introA .cl-container.main-top .cl-button.login-go {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  left: 50% !important;
  width: auto !important;
  color: #1d1d1d;
  font-size: 32px;
  font-weight: 700;
  margin-left: 400px;
  overflow: visible !important;
}
.cl-container._introA .cl-container.main-top .cl-button.login-go:focus,
.cl-container._introA .cl-container.main-top .cl-button.login-go.cl-focus,
.cl-container._introA .cl-container.main-top .cl-button.login-go:not(.cl-disabled):hover,
.cl-container._introA .cl-container.main-top .cl-button.login-go:not(.cl-disabled).cl-activated,
.cl-container._introA .cl-container.main-top .cl-button.login-go:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text-wrapper {
  gap: 0 32px;
}
.cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text-wrapper::after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: #4051e9 url("../images/intro/btn-login-arr.png") no-repeat center;
  border-radius: 100px;
  box-shadow: 4px 4px 16px 0 rgba(64, 81, 233, 0.3);
}
.cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text {
  width: auto !important;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.top > .cl-layout > .cl-layout-content,
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.bottom > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: normal;
  gap: 0;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-container.down {
  margin-top: 80px;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-container.down .cl-output {
  text-align: center;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-button.btn-area {
  background-color: #4051e9;
  border: 0;
  border-radius: 99px;
  box-shadow: 10px 10px 30px 0 rgba(64, 81, 233, 0.3);
  color: #ffffff;
  font-size: 25px;
  padding: 30px 64px;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-button.btn-area .cl-text-wrapper::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url("../images/intro/ico-arr.png") no-repeat center;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01 {
  color: #1d1d1d;
  font-size: 48px;
  font-weight: 700;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01.position {
  overflow: visible !important;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01.position::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 151px;
  height: 154px;
  line-height: 0;
  margin-top: 30px;
  margin-left: -10px;
  background: url("../images/intro/img-01-arr.png") no-repeat 0 0;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-02 {
  color: #1d1d1d;
  font-size: 19px;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section.s-01 {
  background: url("../images/intro/bg-section-01.png") no-repeat center -200px;
  padding: 200px 0;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section.s-02 {
  background: #f4f7fb url("../images/intro/bg-section-02.png") no-repeat right center;
  padding: 0;
}
.cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 {
  background: #e3e6ff url("../images/intro/bg-section-03.png") no-repeat center top;
  padding: 150px 0;
}
.cl-container._introA .cl-container.footer {
  background-color: #1d1d1d;
  padding: 64px 0;
}
.cl-container._introA .cl-container.footer .cl-container.foot-link .cl-button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.cl-container._introA .cl-container.footer .cl-container.foot-link .cl-button:focus,
.cl-container._introA .cl-container.footer .cl-container.foot-link .cl-button.cl-focus,
.cl-container._introA .cl-container.footer .cl-container.foot-link .cl-button:not(.cl-disabled):hover,
.cl-container._introA .cl-container.footer .cl-container.foot-link .cl-button:not(.cl-disabled).cl-activated,
.cl-container._introA .cl-container.footer .cl-container.foot-link .cl-button:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container._introA .cl-container.footer .cl-container.foot-info .cl-output.logo {
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}
.cl-container._introA .cl-container.footer .cl-container.foot-info .cl-output.logo .cl-text::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background-color: #f23b3b;
  margin-left: 4px;
}
.cl-container._introA .cl-container.footer .cl-container.foot-info .cl-container.text .cl-output {
  color: rgba(255, 255, 255, 0.5);
}
.cl-container._introA .cl-container.footer .cl-combobox.family {
  background-color: rgba(0, 0, 0, 0.2);
  border: 0;
  border-radius: 0;
  color: #ffffff;
}
.cl-container._introA .cl-container.footer .cl-combobox.family .cl-text {
  padding: 0 12px;
}
.cl-container._introA .cl-container.footer .cl-combobox.family .cl-text.cl-placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.cl-container._introA .cl-container.footer .cl-combobox.family .cl-combobox-button {
  background-image: url("../images/intro/btn-combo.png");
  width: 24px;
}
.cl-container._introA .cl-container.footer .cl-output.call {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}
.cl-container._introA .cl-container.footer .cl-output.call .label {
  display: block;
  font-size: 16px;
  margin-bottom: 32px;
}
@keyframes scrollMove {
  0% {
    transform: rotate(270deg) translateY(0);
  }
  100% {
    transform: rotate(270deg) translateY(10px);
  }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .cl-container._introA > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row {
    height: 600px !important;
  }
  .cl-container._introA > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row > .cl-container.main-top {
    height: 600px !important;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 {
    background-size: 100% 600px;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-01,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-01,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-01 {
    font-size: 21px;
    margin-top: -30px;
    margin-bottom: 30px;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-02,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-02,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-02 {
    font-size: 54px;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 {
    background-image: url("../images/intro/t_vis-01.png");
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 {
    background-image: url("../images/intro/t_vis-02.png");
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 {
    background-image: url("../images/intro/t_vis-03.png");
  }
  .cl-container._introA .cl-container.main-top .cl-button.login-go {
    right: 80px;
    bottom: 11px !important;
    left: unset !important;
    height: 84px !important;
    font-size: 28px;
    margin-left: 0;
  }
  .cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text-wrapper {
    gap: 0 32px;
  }
  .cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text-wrapper::after {
    width: 84px;
    height: 84px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.top > .cl-layout > .cl-layout-content {
    justify-content: center;
    gap: 0 80px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.top > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first {
    width: 400px !important;
    height: 400px !important;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.bottom > .cl-layout > .cl-layout-content {
    justify-content: center;
    gap: 0 80px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.bottom > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-last {
    width: 446px !important;
    height: 446px !important;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-button.btn-area {
    font-size: 23px;
    font-weight: 700;
    padding: 23px 60px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-button.btn-area .cl-text-wrapper::after {
    content: "";
    background-size: contain;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01 {
    font-size: 40px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01.position::after {
    content: "";
    position: absolute;
    top: 68px;
    left: 496px;
    width: 63px;
    height: 63px;
    margin-top: 0;
    margin-left: 0;
    background-size: contain;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-02 {
    font-size: 18px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-02 .cl-container.top > .cl-layout > .cl-layout-content {
    gap: 0 70px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-02 .cl-container.top > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first {
    width: 502px !important;
    height: 795px !important;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 .cl-container.center > .cl-layout > .cl-layout-content {
    gap: 0;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 .cl-container.center .cl-container.up > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first {
    width: 250px !important;
    height: 203px !important;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 .cl-container.center .cl-container.down {
    margin-top: 20px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 .cl-container.down > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-last-row {
    margin-top: 60px !important;
  }
}
@media (max-width: 1279px) {
  .cl-container._introA > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row {
    height: 640px !important;
  }
  .cl-container._introA > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row > .cl-container.main-top {
    height: 640px !important;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-output.scroll {
    top: calc(100% - 97px) !important;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.control-area {
    bottom: 190px !important;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 {
    background-size: 100% 640px;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-01,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-01,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-01 {
    font-size: 19px;
    margin-top: -40px;
    margin-bottom: 40px;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 .cl-output.txt-02,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 .cl-output.txt-02,
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 .cl-output.txt-02 {
    font-size: 29px;
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-01 {
    background-image: url("../images/intro/m_vis-01.png");
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-02 {
    background-image: url("../images/intro/m_vis-02.png");
  }
  .cl-container._introA .cl-container.main-top .cl-container.main-visual .cl-container.bg-main-03 {
    background-image: url("../images/intro/m_vis-03.png");
  }
  .cl-container._introA .cl-container.main-top .cl-button.login-go {
    right: 16px;
    bottom: 11px !important;
    left: unset !important;
    height: 40px !important;
    font-size: 17px;
    margin-left: 0;
  }
  .cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text-wrapper {
    gap: 0 16px;
  }
  .cl-container._introA .cl-container.main-top .cl-button.login-go .cl-text-wrapper::after {
    width: 40px;
    height: 40px;
    background-image: url("../images/intro/m_btn-login-arr.png");
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.top > .cl-layout > .cl-layout-content,
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.bottom > .cl-layout > .cl-layout-content {
    flex-direction: column;
    justify-content: center;
    gap: 100px 0;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center > .cl-layout > .cl-layout-content {
    flex-direction: column;
    justify-content: center;
    gap: 100px 0;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-container.down {
    margin-top: 0;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-button.btn-area {
    font-size: 19px;
    font-weight: 700;
    padding: 18px 47px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-container.center .cl-button.btn-area .cl-text-wrapper::after {
    content: "";
    background-size: contain;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01 {
    font-size: 24px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-01.position::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -4px;
    width: 60px;
    height: 60px;
    margin-top: 0;
    margin-left: 0;
    background-size: contain;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section .cl-output.txt-02 {
    font-size: 16px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-01 {
    background-image: url("../images/intro/m_bg-section-01_1.png"), url("../images/intro/m_bg-section-01_2.png");
    background-position: center -80px, center calc(100% - 320px);
    padding: 120px 20px 100px 20px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-02 {
    background-image: url("../images/intro/m_bg-section-02.png");
    background-position: center 350px;
    padding: 0 16px 186px 16px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-02 .cl-container.top > .cl-layout > .cl-layout-content {
    gap: 200px 0;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 {
    background-image: url("../images/intro/m_bg-section-03.png");
    padding: 80px 24px;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 .cl-container.center > .cl-layout > .cl-layout-content {
    gap: 60px 0;
  }
  .cl-container._introA .cl-container.main-contents .cl-container.main-section.s-03 .cl-container.down > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-last-row {
    margin-top: 60px !important;
  }
}
/************************************************
 * 인트로 B
 ************************************************/
.cl-container._introB .cl-container.aiep-header {
  z-index: 1;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner {
  margin: 0 auto;
  width: 1340px;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .aiep-header-logo {
  display: flex;
  align-items: center;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .aiep-header-logo a {
  display: block;
  text-decoration: none;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-searchinput.aiep-header-search {
  border: 0;
  border-radius: 99px;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-searchinput.aiep-header-search::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 99px;
  background-image: linear-gradient(90deg, #537DFD 0%, #58C8C6 100%);
  z-index: -1;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-searchinput.aiep-header-search .cl-text {
  padding: 0 10px;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-searchinput.aiep-header-search .cl-text.cl-placeholder {
  color: #adb7c6 !important;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-searchinput.aiep-header-search .cl-searchinput-search {
  background-image: url("../images/intro/btn-search.svg");
  width: 24px;
  height: 24px;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-searchinput.aiep-header-search .cl-searchinput-search.cl-left {
  margin: 0 0 0 24px;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-container.aiep-header-button .cl-button {
  background-color: rgba(68, 68, 68, 0.08);
  background-position: 12px center;
  border: 0;
  border-radius: 99px;
  color: #1f2841;
  font-weight: 500;
  padding: 0 12px 0 34px;
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-container.aiep-header-button .cl-button.btn-login {
  background-image: url("../images/intro/btn-login.svg");
}
.cl-container._introB .cl-container.aiep-header .cl-container.aiep-inner .cl-container.aiep-header-button .cl-button.btn-join {
  background-image: url("../images/intro/btn-join.svg");
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row {
  position: absolute !important;
  top: 120px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-last-row {
  position: absolute !important;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 0;
  animation: float 2s ease-in-out infinite;
  transition: all 0.2s ease;
  z-index: 20;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-searchinput.aiep-header-search-lg {
  border: 0;
  border-radius: 99px;
  font-size: 24px;
  overflow: visible !important;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-searchinput.aiep-header-search-lg::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 99px;
  background-image: linear-gradient(90deg, #537DFD 0%, #58C8C6 100%);
  z-index: -1;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-searchinput.aiep-header-search-lg .cl-text {
  padding: 0 10px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-searchinput.aiep-header-search-lg .cl-text.cl-placeholder {
  color: #adb7c6 !important;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-searchinput.aiep-header-search-lg .cl-searchinput-search {
  background-image: url("../images/intro/btn-search.svg");
  width: 36px;
  height: 36px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-searchinput.aiep-header-search-lg .cl-searchinput-search.cl-left {
  margin: 0 0 0 24px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-output.aiep-section01-title {
  color: #1f2b41;
  font-size: 56px;
  font-weight: 800;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-output.aiep-section01-title .em {
  color: #537dfd;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-output {
  color: #1f2b41;
  font-size: 35px;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-button.btn-login {
  background: linear-gradient(90deg, #577bf8 0%, #4370dd 21%, #8c52f8 100%);
  border: 0;
  border-radius: 72px;
  color: #ffffff;
  font-size: 23px;
  font-weight: 700;
  padding: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-button.btn-login .cl-text-wrapper {
  width: auto !important;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-button.btn-login .cl-text-wrapper::after {
  content: "";
  position: relative;
  z-index: 20;
  display: block;
  width: 26px;
  height: 26px;
  background: url("../images/intro/btn-arrow.svg") no-repeat 50% 50%;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-button.btn-login .cl-text-wrapper .cl-text {
  z-index: 1;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-button.btn-login:not(.cl-disabled):hover::before {
  width: 100%;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01 .cl-container.aiep-section01-inner .cl-container.aiep-section01-contents .cl-button.btn-login::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 92px;
  border-radius: 72px;
  background-color: #1f2b41;
  transition: all 0.4s ease;
  transform: translateX(-50%);
  z-index: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section01::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url("../images/intro/bg.svg") no-repeat 50% 100%;
  transition: all 3s ease;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner .cl-container.aiep-section02-title .cl-output.num {
  color: #537dfd;
  font-size: 20px;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner .cl-container.aiep-section02-title .cl-output.num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 48px;
  width: 200px;
  height: 1px;
  background-color: #537dfd;
  transform: translateY(-50%);
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner .cl-container.aiep-section02-title .cl-output.tit {
  color: #1f2b41;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner .cl-container.aiep-section02-title .cl-output.tit .em {
  color: #537dfd;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner .cl-output.aiep-section02-obj01 {
  color: #4b6387;
  font-size: 20px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section02 .cl-container.aiep-section02-inner .cl-output.aiep-section02-obj01 .em {
  color: #1f2b41;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner .cl-container.aiep-section03-title .cl-output.num {
  color: #537dfd;
  font-size: 20px;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner .cl-container.aiep-section03-title .cl-output.num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 48px;
  width: 200px;
  height: 1px;
  background-color: #537dfd;
  transform: translateY(-50%);
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner .cl-container.aiep-section03-title .cl-output.tit {
  color: #1f2b41;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner .cl-container.aiep-section03-title .cl-output.tit .em {
  color: #537dfd;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner .cl-output.aiep-section03-obj01 {
  color: #4b6387;
  font-size: 20px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section03 .cl-container.aiep-section03-inner .cl-output.aiep-section03-obj01 .em {
  color: #1f2b41;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner .cl-container.aiep-section04-title .cl-output.num {
  color: #537dfd;
  font-size: 20px;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner .cl-container.aiep-section04-title .cl-output.num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 48px;
  width: 200px;
  height: 1px;
  background-color: #537dfd;
  transform: translateY(-50%);
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner .cl-container.aiep-section04-title .cl-output.tit {
  color: #1f2b41;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner .cl-container.aiep-section04-title .cl-output.tit .em {
  color: #537dfd;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner .cl-output.aiep-section04-obj01 {
  color: #4b6387;
  font-size: 20px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section04 .cl-container.aiep-section04-inner .cl-output.aiep-section04-obj01 .em {
  color: #1f2b41;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner .cl-container.aiep-section05-title .cl-output.num {
  color: #537dfd;
  font-size: 20px;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner .cl-container.aiep-section05-title .cl-output.num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 48px;
  width: 200px;
  height: 1px;
  background-color: #537dfd;
  transform: translateY(-50%);
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner .cl-container.aiep-section05-title .cl-output.tit {
  color: #1f2b41;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner .cl-container.aiep-section05-title .cl-output.tit .em {
  color: #537dfd;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner .cl-output.aiep-section05-obj01 {
  color: #4b6387;
  font-size: 20px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.scroll-content .cl-container.aiep-section05 .cl-container.aiep-section05-inner .cl-output.aiep-section05-obj01 .em {
  color: #1f2b41;
  font-weight: 700;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner {
  padding: 130px 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner .cl-container.aiep-section06-obj01 .cl-output.tit {
  color: #1f2b41;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner .cl-container.aiep-section06-obj01 .cl-output.tit .em {
  color: #537dfd;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner .cl-container.aiep-section06-obj01 .cl-button.btn-start {
  background-color: #0b111d;
  border: 0;
  border-radius: 72px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  padding: 0 22px 0 28px;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner .cl-container.aiep-section06-obj01 .cl-button.btn-start .cl-text-wrapper {
  width: auto !important;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner .cl-container.aiep-section06-obj01 .cl-button.btn-start .cl-text-wrapper::after {
  content: "";
  position: relative;
  z-index: 20;
  display: block;
  width: 26px;
  height: 26px;
  background: url("../images/intro/btn-arrow.svg") no-repeat 50% 50%;
}
.cl-container._introB .cl-container.aiep-stage .cl-container.aiep-section06 .cl-container.aiep-section06-inner .cl-container.aiep-section06-obj01 .cl-button.btn-start .cl-text-wrapper .cl-text {
  z-index: 1;
}
.cl-container._introB .cl-container.aiep-footer {
  background-color: #fafbfe;
  padding: 34px 0 40px 0;
}
.cl-container._introB .cl-container.aiep-footer .cl-container.foot-info {
  border-top: 1px solid #dbdbdb;
  padding-top: 16px;
}
.cl-container._introB .cl-container.aiep-footer .cl-container.foot-info .cl-container.info-cnt > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first) {
  padding-left: 8px;
}
.cl-container._introB .cl-container.aiep-footer .cl-container.foot-info .cl-container.info-cnt > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first)::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 0;
  width: 1px;
  height: 10px;
  background-color: #d9d9d9;
}
.cl-container._introB .cl-container.aiep-footer .cl-container.foot-info .cl-container.info-cnt .cl-output {
  color: #666666;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-footer .cl-container.foot-info .cl-output.copyright {
  color: #666666;
  font-size: 12px;
  line-height: 1.25;
}
.cl-container._introB .cl-container.aiep-bg {
  pointer-events: none;
  z-index: 1;
}
.cl-container._introB .cl-container.aiep-bg .cl-htmlsnippet {
  transition: all 2s ease;
}
.cl-container._introB .cl-container.aiep-bg .cl-htmlsnippet::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 93px;
  height: 26px;
  background: url("../images/intro/logo-white.png") no-repeat 50% 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease;
  z-index: 100;
}
.cl-container._introB .aiep.start .cl-container.aiep-header {
  background-color: #ffffff;
  border-bottom: 1px solid #d9d9d9;
}
.cl-container._introB .aiep.start .cl-container.aiep-section01-obj03 {
  opacity: 0;
}
.cl-container._introB .aiep.start .cl-container.aiep-bg .cl-htmlsnippet {
  bottom: 200px !important;
}
html.start .cl-container._introB .cl-container.aiep-bg .cl-htmlsnippet {
  bottom: 200px;
}
html.end .cl-container._introB .aiep.start .cl-container.aiep-bg .cl-htmlsnippet {
  bottom: 320px !important;
}
html.end .cl-container._introB .cl-container.aiep-bg .cl-htmlsnippet {
  transition: all 1s ease;
}
html.end .cl-container._introB .cl-container.aiep-bg .cl-htmlsnippet::after {
  opacity: 1;
}
@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
/* =====================
   메인(WN-PTL-PM-002M)
   ===================== */
.cl-button.skip-link {
  background-color: #000000;
  border: 0;
  border-radius: 0;
  clip: inherit;
  color: #ffffff;
  font-size: 15px;
  font-weight: 400;
  height: 0px !important;
}
.cl-button.skip-link.cl-focus,
.cl-button.skip-link:focus {
  z-index: 10000;
  height: 32px !important;
}
.cl-button.skip-link:not(.cl-disabled):hover,
.cl-button.skip-link:not(.cl-disabled).cl-activated,
.cl-button.skip-link:not(.cl-disabled):active {
  background-color: #000000;
  color: #ffffff;
}
.cl-container._main {
  background-color: #f4f7fb;
  /* 1024px ~ 1279px */
  /* 0 ~ 1023px */
}
.cl-container._main .cl-container.header {
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e4;
  z-index: 1;
}
.cl-container._main .cl-container.header .cl-layout {
  overflow-y: visible !important;
}
.cl-container._main .cl-container.header .cl-container.inner {
  margin: 0 auto;
  max-width: 1280px;
}
.cl-container._main .cl-container.header .cl-container.inner > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
}
.cl-container._main .cl-container.header .cl-container.inner > .cl-layout > .cl-layout-content > .cl-layout-wrap:has(.cl-navigationbar) {
  flex: 1;
}
.cl-container._main .cl-container.header .cl-container.inner .aiep-header-logo {
  display: flex;
  align-items: center;
}
.cl-container._main .cl-container.header .cl-container.inner .aiep-header-logo a {
  display: block;
  text-decoration: none;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar {
  background: 0;
  border: 0;
  border-radius: 0;
  color: #1d1d1d;
  font-size: 16px;
  font-weight: 700;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar > div {
  overflow-x: visible !important;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar > div > div:nth-child(2) {
  overflow-x: visible !important;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item {
  position: relative;
  height: 100%;
  padding: 0;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item .cl-navigationbar-content {
  outline: none;
  align-items: center;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item .cl-navigationbar-arrow {
  display: none;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item.cl-hover,
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled).cl-hover {
  background-color: transparent;
  color: #4051e9;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item.cl-navigationbar-visible,
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
  background-color: transparent;
  color: #4051e9;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item.cl-navigationbar-visible::before,
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected::before {
  content: "";
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4051e9;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar.navbar .cl-navigationbar-bar .cl-navigationbar-item.mypage .cl-navigationbar-content::before {
  content: "";
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../images/main/ico_mypage.svg") no-repeat center;
  vertical-align: middle;
  margin-right: 2px;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu {
  width: 182px !important;
  position: absolute !important;
  left: 50% !important;
  top: 64px !important;
  transform: translateX(-50%);
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list {
  background-color: #ffffff;
  border: 1px solid #c6c6c6;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
  padding: 8px;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category {
  width: 100%;
  padding: 0;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem {
  background-color: transparent;
  border-radius: 8px;
  color: #1d1d1d;
  font-weight: 400;
  min-height: 48px;
  padding: 0 16px;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem .cl-navigationbar-accesskey-wrapper {
  display: none;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem .cl-text {
  text-overflow: clip;
  white-space: normal;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem.cl-hover,
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem:not(.cl-disabled):not(.cl-selected):hover,
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem:not(.cl-disabled).cl-hover {
  background-color: transparent;
  color: #1d1d1d;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem.cl-selected {
  background-color: rgba(64, 81, 233, 0.08);
  color: #4051e9;
  font-weight: 500;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem + .sub-items {
  border-left: 2px solid #c6c6c6;
  margin: 0 0 16px 16px;
  padding: 0 0 0 16px;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-navigationbar-accessiblemegamenu .cl-navigationbar-list .cl-navigationbar-category > .sub-items.cl-level-1 > .cl-navigationbar-listitem-wrapper > .cl-navigationbar-listitem + .sub-items .cl-navigationbar-listitem {
  min-height: 36px;
  padding: 0;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav {
  background-color: #ffffff;
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 0;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.sch {
  background-image: url("../images/main/ico_search.svg");
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.logout {
  background-image: url("../images/main/ico_logout.svg");
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.alarm {
  background-image: url("../images/main/ico_alarm.svg");
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.alarm.active {
  position: relative;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.alarm.active::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  display: block;
  width: 14px;
  height: 14px;
  background: url("../images/main/ico_alarm_new.svg") no-repeat center;
  border: 1px solid #ffffff;
  border-radius: 999px;
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.menu {
  background-image: url("../images/main/ico_menu.svg");
}
.cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav.menu.active {
  background-image: url("../images/main/ico_close.svg");
}
.cl-container._main .cl-container.footer {
  background-color: #1d1d1d;
}
.cl-container._main .cl-container.footer .cl-container.foot-link > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: normal;
  gap: 40px;
}
.cl-container._main .cl-container.footer .cl-container.foot-link .cl-button {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.cl-container._main .cl-container.footer .cl-container.foot-info .cl-output.f-cnt {
  color: #808080;
}
.cl-container._main .cl-container.footer .cl-output.call {
  color: #ffffff;
  font-weight: 700;
}
.cl-container._main .cl-container.footer .cl-output.call .key {
  font-size: 16px;
}
.cl-container._main .cl-container.footer .cl-output.call .value {
  display: block;
  font-size: 40px;
  margin-top: 32px;
}
.cl-container._main .cl-container.footer .cl-combobox.family-site {
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.2);
  border: 0;
  border-radius: 12px;
  font-size: 15px;
}
.cl-container._main .cl-container.sitemap {
  background-color: #ffffff;
  border: 1px solid #c6c6c6;
  border-radius: 16px;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation {
  background: 0;
  border: 0;
  border-radius: 0;
  font-size: 16px;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item .cl-expand-icon {
  display: none;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1 {
  font-weight: 500;
  padding: 12px 16px 12px 20px;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1 .cl-icon {
  border-radius: 12px;
  background-size: 20px;
  width: 36px;
  height: 36px;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1 .cl-text {
  padding-left: 8px;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.cl-selected {
  color: #2d2d2d;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1 + .cl-list {
  padding: 8px 0 12px 30px;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1 + .cl-list .cl-sidenavigation-item .cl-icon {
  display: none;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1 + .cl-list .cl-sidenavigation-item.cl-selected {
  color: #2d2d2d;
  font-weight: 700;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m1 .cl-icon {
  background-color: #fff3f3;
  background-image: url("../images/main/ico_menu01.svg");
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m2 .cl-icon {
  background-color: #fff7ea;
  background-image: url("../images/main/ico_menu02.svg");
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m3 .cl-icon {
  background-color: #f0fcf8;
  background-image: url("../images/main/ico_menu03.svg");
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m4 .cl-icon {
  background-color: #f7f5ff;
  background-image: url("../images/main/ico_menu04.svg");
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m5 .cl-icon {
  background-color: #ebf6ff;
  background-image: url("../images/main/ico_menu05.svg");
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m6 .cl-icon {
  background-image: url("../images/main/ico_menu06.svg");
  background-color: #fff3f3;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-1.m7 .cl-icon {
  background-image: url("../images/main/ico_menu07.svg");
  background-color: #fff3ea;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-2 {
  min-height: 44px;
  padding: 0;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-2 .cl-text {
  padding: 0;
}
.cl-container._main .cl-container.sitemap .cl-sidenavigation .cl-sidenavigation-item.cl-level-3 {
  border-left: 2px solid #c6c6c6;
  min-height: 40px;
  padding: 0 0 0 22px;
}
@media (max-width: 1279px) {
  .cl-container._main .cl-container.header .cl-container.inner {
    max-width: 100%;
    margin: 0;
  }
  .cl-container._main .cl-container.header .cl-container.inner > .cl-layout > .cl-layout-content {
    justify-content: space-between;
  }
  .cl-container._main .cl-container.header .cl-container.inner .cl-container.header-actions .cl-button.btn-nav {
    background-color: transparent;
    border: 0;
    border-radius: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cl-container._main {
    /* 태블릿 */
  }
  .cl-container._main .cl-container.header .cl-container.inner {
    padding: 0 40px;
  }
}
@media (max-width: 1023px) {
  .cl-container._main {
    /* 모바일 */
  }
  .cl-container._main .cl-container.header .cl-container.inner {
    padding: 0 16px;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-link > .cl-layout > .cl-layout-content {
    justify-content: center;
    gap: 8px 12px;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-link > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first) {
    padding-left: 16px;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-link > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first)::before {
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    left: 0;
    width: 4px;
    height: 4px;
    background-color: #494c55;
    border-radius: 999px;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-link .cl-button.btn-txt:not(.point) {
    font-weight: 400;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-info {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-info .cl-layout-wrap {
    justify-self: center;
  }
  .cl-container._main .cl-container.footer .cl-container.foot-info .cl-output.f-cnt {
    text-align: center;
  }
  .cl-container._main .cl-container.footer .cl-output.call {
    padding-bottom: 12px;
    text-align: center;
  }
  .cl-container._main .cl-container.footer .cl-output.call .key {
    font-size: 15px;
    margin-right: 16px;
  }
  .cl-container._main .cl-container.footer .cl-output.call .value {
    display: inline-block;
    font-size: 17px;
    margin-top: 0;
  }
  .cl-container._main .cl-container.footer .cl-combobox.family-site {
    border-radius: 8px;
  }
}
.cl-container.notification {
  background-color: #ffffff;
  border: 1px solid #c6c6c6;
  border-radius: 16px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.08);
}
.cl-container.notification .cl-output.tit {
  font-size: 16px;
  font-weight: 700;
}
.cl-container.notification .cl-button.btn-txt {
  color: #717171;
  font-size: 14px;
  font-weight: 500;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-output.icon {
  background-position: center;
  border-radius: 12px;
  min-width: 32px;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-output.icon.activity {
  background-image: url("../images/main/ico_noti_activity.svg");
  background-color: #fff4d4;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-output.icon.event {
  background-image: url("../images/main/ico_noti_event.svg");
  background-color: #f7f5ff;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-output.icon.new {
  background-color: #eceefd;
  color: #4051e9;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.33px;
  overflow: visible !important;
  text-align: center;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-output.icon.new::after {
  content: "";
  position: absolute;
  display: block;
  right: -2px;
  bottom: -2px;
  width: 12px;
  height: 12px;
  background: url("../images/main/ico_noti_new.svg") no-repeat center;
  border-radius: 999px;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-output.icon.schedule {
  background-color: #edf8f6;
  background-image: url("../images/main/ico_noti_shedule.svg");
}
.cl-container.notification .cl-container.list .cl-container.item .cl-container.text .cl-output.date {
  color: #555555;
  font-size: 13px;
  font-weight: 500;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-container.text .cl-output.txt {
  font-weight: 500;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-container.text .cl-output.txt .keyword {
  color: #4051e9;
}
.cl-container.notification .cl-container.list .cl-container.item .cl-container.text .cl-output.time {
  color: #717171;
  font-size: 12px;
  font-weight: 500;
}
.cl-button.foot-btn {
  background-image: url("../images/main/ico_top.svg");
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 8px 0 rgba(64, 81, 233, 0.3);
}
.cl-button.foot-btn.cl-focus,
.cl-button.foot-btn:not(.cl-disabled):hover,
.cl-button.foot-btn:not(.cl-disabled).cl-activated,
.cl-button.foot-btn:not(.cl-disabled):active {
  background-image: url("../images/main/ico_top.svg");
}
.cl-menu.foot-menu {
  color: #ffffff;
  font-weight: 700;
  overflow: visible !important;
}
.cl-menu.foot-menu .cl-menu-list {
  background-color: #4051e9;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(64, 81, 233, 0.3);
  padding: 8px 20px;
}
.cl-menu.foot-menu .cl-menu-list::before {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 0;
  width: 100%;
  height: 14px;
  background: url("../images/main/ico_arrow.svg") no-repeat right 16px center;
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item {
  min-height: 40px;
  padding: 0;
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item .cl-menu-icon {
  width: 20px;
  height: 20px;
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item .cl-text {
  padding: 0 0 0 8px;
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item .cl-menu-arrow {
  width: 0;
  height: 0;
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item.cl-hover,
.cl-menu.foot-menu .cl-menu-list .cl-menu-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-menu.foot-menu .cl-menu-list .cl-menu-item:not(.cl-disabled).cl-hover,
.cl-menu.foot-menu .cl-menu-list .cl-menu-item.cl-selected {
  background-color: transparent;
  color: #ffffff;
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item.cl-first .cl-menu-icon {
  background-image: url("../images/main/ico_menu_write.svg");
}
.cl-menu.foot-menu .cl-menu-list .cl-menu-item.cl-last .cl-menu-icon {
  background-image: url("../images/main/ico_menu_list.svg");
}
.cl-container.menu-mobile {
  background-color: #f4f7fb;
}
.cl-container.menu-mobile .cl-container.menu-top .cl-image.avatar {
  border-radius: 999px;
}
.cl-container.menu-mobile .cl-container.menu-top .cl-output.name {
  font-size: 17px;
}
.cl-container.menu-mobile .cl-container.menu-top .cl-output.name .keyword {
  font-weight: 700;
}
.cl-container.menu-mobile .cl-container.menu-top .cl-button.btn-txt {
  background-image: url("../images/main/ico_arr_right.svg");
  background-position: right center;
  color: #4051e9;
  font-size: 14px;
  font-weight: 400;
  padding-right: 14px;
}
.cl-container.menu-mobile .cl-container.menu-top .cl-button.set {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/main/ico_setting.svg");
}
.cl-container.menu-mobile .cl-container.menu-top .cl-button.set:focus,
.cl-container.menu-mobile .cl-container.menu-top .cl-button.set.cl-focus,
.cl-container.menu-mobile .cl-container.menu-top .cl-button.set:not(.cl-disabled):hover,
.cl-container.menu-mobile .cl-container.menu-top .cl-button.set:not(.cl-disabled).cl-activated,
.cl-container.menu-mobile .cl-container.menu-top .cl-button.set:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.menu-mobile .cl-sidenavigation.menu {
  background-color: #ffffff;
  border: 0;
  border-radius: 16px 16px 0 0;
  color: #2d2d2d;
  padding: 16px;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item {
  padding: 11px 0;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item .cl-text {
  line-height: 1.4;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-folder.cl-expanded .cl-expand-icon {
  background-image: url("../images/main/ico_menu_collapsed.svg");
  transform: rotate(180deg);
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-folder.cl-collapsed .cl-expand-icon {
  background-image: url("../images/main/ico_menu_collapsed.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-selected {
  background-color: transparent;
  font-weight: 700;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-selected.cl-folder.cl-expanded .cl-expand-icon {
  background-image: url("../images/main/ico_menu_expanded.svg");
  transform: 0;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-selected.cl-folder.cl-collapsed .cl-expand-icon {
  background-image: url("../images/main/ico_menu_expanded.svg");
  transform: rotate(180deg);
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1 {
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  padding: 11px 16px 11px 20px;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1 .cl-icon {
  background-size: 20px;
  border-radius: 12px;
  width: 36px;
  height: 36px;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.cl-selected {
  background-color: #4051e9;
  color: #ffffff;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.cl-selected .cl-icon {
  background-color: transparent !important;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1 + .cl-list {
  background-color: #eff2f8;
  border-radius: 8px;
  padding: 8px 16px 12px 30px;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1 + .cl-list .cl-sidenavigation-item .cl-icon,
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1 + .cl-list .cl-sidenavigation-item .cl-expand-icon {
  display: none;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1 + .cl-list .cl-sidenavigation-item .cl-text {
  padding: 0;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m1 .cl-icon {
  background-color: #fff3f3;
  background-image: url("../images/main/ico_menu01.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m1.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu01.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m2 .cl-icon {
  background-color: #fff7ea;
  background-image: url("../images/main/ico_menu02.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m2.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu02.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m3 .cl-icon {
  background-color: #f0fcf8;
  background-image: url("../images/main/ico_menu03.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m3.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu03.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m4 .cl-icon {
  background-color: #f7f5ff;
  background-image: url("../images/main/ico_menu04.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m4.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu04.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m5 .cl-icon {
  background-color: #ebf6ff;
  background-image: url("../images/main/ico_menu05.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m5.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu05.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m6 .cl-icon {
  background-image: url("../images/main/ico_menu06.svg");
  background-color: #fff3f3;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m6.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu06.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m7 .cl-icon {
  background-image: url("../images/main/ico_menu07.svg");
  background-color: #fff3ea;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-1.m7.cl-selected .cl-icon {
  background-image: url("../images/main/W_ico_menu07.svg");
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-2 {
  font-size: 16px;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-2 + .cl-list {
  border-left: 2px solid #c6c6c6;
  padding-left: 24px;
}
.cl-container.menu-mobile .cl-sidenavigation.menu .cl-sidenavigation-item.cl-level-3 {
  font-size: 15px;
  padding: 9.5px 0;
}
/* =====================
   메인(WN-PTL-PM-002M) B안
   ===================== */
.cl-container._main_B {
  background-color: #f9fafd;
}
.cl-container._main_B .cl-container.aside {
  background-color: #eaf4ff;
  border-radius: 0 32px 32px 0;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-top > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: normal;
  gap: 0;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-top .cl-container.logo .cl-output.symbol {
  background-image: url("../images/main/TB_logo_sm.svg");
}
.cl-container._main_B .cl-container.aside .cl-container.aside-top .cl-container.logo .cl-output.txt {
  background-image: url("../images/main/TB_logo_txt.svg");
  padding-left: 78px;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu {
  background: 0;
  border: 0;
  border-radius: 0;
  color: #717171;
  font-size: 16px;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-list.cl-level-1 {
  padding: 24px 20px 0;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item .cl-icon {
  width: 20px;
  height: 20px;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1 {
  color: #555555;
  font-size: 17px;
  font-weight: 500;
  min-height: 48px;
  padding: 0 16px;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.cl-folder.cl-collapsed > .cl-expand-icon {
  background-image: url("../images/main/TB_ico_menu_close.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.cl-folder.cl-expanded > .cl-expand-icon {
  background-image: url("../images/main/TB_ico_menu_open_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.cl-selected {
  background-color: #1f71ed;
  border-radius: 12px;
  color: #ffffff;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.cl-selected.cl-folder.cl-expanded {
  background-color: #1f71ed;
  border-radius: 12px;
  color: #ffffff;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.cl-selected.cl-folder.cl-expanded > .cl-expand-icon {
  background-image: url("../images/main/TB_ico_menu_open.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.cl-selected.cl-folder.cl-collapsed > .cl-expand-icon {
  background-image: url("../images/main/TB_ico_menu_close_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1 + .cl-list {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px 16px 16px 24px;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m1 .cl-icon {
  background-image: url("../images/main/TB_ico_book.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m1.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_book_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m2 .cl-icon {
  background-image: url("../images/main/TB_ico_chart.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m2.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_chart_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m3 .cl-icon {
  background-image: url("../images/main/TB_ico_hub.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m3.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_hub_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m4 .cl-icon {
  background-image: url("../images/main/TB_ico_info.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m4.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_info_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m5 .cl-icon {
  background-image: url("../images/main/TB_ico_messages.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m5.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_messages_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m6 .cl-icon {
  background-image: url("../images/main/TB_ico_my.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m6.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_my_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m7 .cl-icon {
  background-image: url("../images/main/TB_ico_notebook.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m7.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_notebook_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m8 .cl-icon {
  background-image: url("../images/main/TB_ico_pencil.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-1.m8.cl-selected .cl-icon {
  background-image: url("../images/main/TB_ico_pencil_ac.svg");
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-2 {
  box-shadow: inset 1px 0 0 0 #e0e3e7;
  min-height: 34px;
  padding: 0;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-2 .cl-icon,
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-2 .cl-expand-icon {
  display: none;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-2 .cl-text {
  padding-left: 20px;
}
.cl-container._main_B .cl-container.aside .cl-sidenavigation.sidemenu .cl-sidenavigation-item.cl-level-2.cl-selected {
  box-shadow: inset 2px 0 0 0 #1f71ed;
  color: #2d2d2d;
  font-weight: 600;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-actions .cl-container.user .cl-output.school {
  color: #555555;
  font-weight: 500;
  font-size: 15px;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-actions .cl-container.user .cl-output.name {
  color: #353746;
  font-size: 15px;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-actions .cl-container.user .cl-output.name .keyword {
  font-size: 17px;
  font-weight: 600;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-actions .cl-button.btn-txt.logout {
  background: 0;
  border: 0;
  border-radius: 0;
}
.cl-container._main_B .cl-container.aside .cl-container.aside-actions .cl-button.btn-txt.logout .cl-icon {
  background-image: url("../images/main/TB_ico_logout.svg") !important;
  width: 16px;
  height: 16px;
}
.cl-container._main_B .cl-container.container .cl-container.wrap {
  max-width: 100%;
  margin: 0;
}
/* =====================
   로그인(WN-PTL-LO-001M)
   ===================== */
.cl-container._login {
  background-color: #e3e6ff;
  background-image: url("../images/main/login_bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
.cl-container._login .cl-container.login-wrap {
  height: auto !important;
}
.cl-container._login .cl-container.login-wrap .cl-output.h1 {
  color: #2d2d2d;
  text-align: center;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box {
  background-color: #ffffff;
  border-radius: 24px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-output.label {
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 700;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-inputbox {
  font-size: 17px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-inputbox .cl-text {
  padding: 0 16px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-inputbox.id .cl-text {
  padding-right: 119px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-inputbox.password .cl-text {
  padding-right: 56px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-output.email {
  font-size: 17px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/main/ico_pw_view.svg");
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility:focus,
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility.cl-focus,
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility:not(.cl-disabled):hover,
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility:not(.cl-disabled).cl-activated,
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-container.input-field .cl-button.ico-visibility.active {
  background-image: url("../images/main/ico_pw_view_active.svg");
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-checkbox {
  font-size: 16px;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-button.btn-txt {
  color: #666666;
  font-weight: 400;
}
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-button.primary,
.cl-container._login .cl-container.login-wrap .cl-container.login-box .cl-button.tertiary {
  border-radius: 12px;
  font-weight: 700;
}
/************************************************
 * 학생 Main & 교수 Main
 ************************************************/
.cl-container.dashboard .cl-container.top-section {
  border-radius: 12px;
  background: #4051e9 url("../images/main/img_top_section.svg") no-repeat center;
  padding: 24px;
  min-height: 108px;
  /* 학습분석 버튼 */
}
.cl-container.dashboard .cl-container.top-section .cl-container.profile .cl-output {
  color: #ffffff;
}
.cl-container.dashboard .cl-container.top-section .cl-container.profile .cl-output.sub-txt {
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
}
.cl-container.dashboard .cl-container.top-section .cl-container.profile .cl-output.tit {
  font-weight: 500;
  font-size: 21px;
}
.cl-container.dashboard .cl-container.top-section .cl-button.btn-learning {
  color: #4051e9;
  font-weight: 600;
}
.cl-container.dashboard .cl-container.top-section .cl-button.btn-learning .cl-text-wrapper {
  gap: 4px;
}
.cl-container.dashboard .cl-container.top-section .cl-button.btn-learning .cl-icon {
  background-image: url("../images/main/ico_book.svg") !important;
}
.cl-container.dashboard .cl-container.top-section .cl-button.btn-setting {
  color: #4051e9;
  font-weight: 600;
}
.cl-container.dashboard .cl-container.top-section .cl-button.btn-setting .cl-text-wrapper {
  gap: 4px;
}
.cl-container.dashboard .cl-container.top-section .cl-button.btn-setting .cl-icon {
  background-image: url("../images/main/ico_setting_blue.svg") !important;
}
.cl-container.dashboard .cl-container.in-sect {
  padding: 24px;
  border-radius: 12px;
  background-color: #ffffff;
}
.cl-container.dashboard .cl-container.in-sect .cl-output.tit {
  font-size: 21px;
  font-weight: 700;
}
.cl-container.dashboard .cl-container.in-sect .cl-button.btn-go-page {
  border-radius: 999px;
  background-image: url("../images/main/ico_plus_16.svg");
  border-color: #e4e4e4;
  padding: 0;
}
.cl-container.dashboard .cal-wrap .cl-calendar {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header {
  padding: 0 0 24px 0;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-text {
  font-weight: 700;
  font-size: 21px;
  color: #333;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-text::after {
  display: none;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-prev,
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-next {
  width: 20px;
  min-height: 20px;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-prev {
  margin-right: 8px;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-prev.cl-hover,
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-header .cl-calendar-header-next.cl-hover {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content-wrapper {
  padding: 0;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content .cl-calendar-content-header {
  font-weight: 700;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content .cl-calendar-content-day {
  border-radius: 14px;
  margin: 0 auto;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content-sun {
  color: #F23B3B;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content-sat {
  color: #5062FC;
}
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content-sun.cl-selected:not(:hover),
.cl-container.dashboard .cal-wrap .cl-calendar .cl-calendar-content-sat.cl-selected:not(:hover) {
  color: #ffffff;
}
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
}
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button:focus,
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button.cl-focus,
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button:not(.cl-disabled):hover,
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button:not(.cl-disabled).cl-activated,
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button.prev {
  background-image: url("../images/main/ico_16_arrow_left.svg");
}
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-button.next {
  background-image: url("../images/main/ico_16_arrow_right.svg");
}
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-output.num {
  font-size: 17px;
  font-weight: 700;
  color: #4051e9;
}
.cl-container.dashboard .today-class-box .cl-container.pagenation .cl-output.num span.total {
  color: #1d1d1d;
}
.cl-container.dashboard .today-class-box .cl-container.btn-wrap {
  background-color: #ffffff;
  border-top-left-radius: 16px;
}
.cl-container.dashboard .today-class-box .cl-container.btn-wrap::before,
.cl-container.dashboard .today-class-box .cl-container.btn-wrap::after {
  content: "";
  position: absolute;
  width: 23px;
  height: 23px;
  background: url("../images/main/bg_card.svg") no-repeat center;
}
.cl-container.dashboard .today-class-box .cl-container.btn-wrap::before {
  bottom: 0;
  left: -23px;
}
.cl-container.dashboard .today-class-box .cl-container.btn-wrap::after {
  top: -23px;
  right: 0;
}
.cl-container.dashboard .today-class-box .cl-container.btn-wrap .cl-button.btn-more {
  background-color: #2d2d2d;
  background-image: url("../images/main/ico_class_more.svg");
  border-radius: 999px;
}
.cl-container.dashboard .today-class-box .cl-output.nodata {
  border: 2px dashed #bfc7d0;
  color: #8b929d;
  font-size: 19px;
  font-weight: 500;
  text-align: center;
}
.cl-container.dashboard .today-class-box .cl-output.nodata .cl-text::before {
  content: "";
  position: relative;
  display: block;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background: url("../images/content/ico_nodata_class.svg") no-repeat center;
  margin-bottom: 8px;
}
.cl-container.dashboard .today-class-box .cl-container.class-item {
  border-radius: 16px;
  padding: 24px;
}
.cl-container.dashboard .today-class-box .cl-container.class-item > .cl-layout > .cl-layout-content {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto;
  grid-gap: 16px;
  align-items: stretch;
  justify-items: stretch;
}
.cl-container.dashboard .today-class-box .cl-container.class-item > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container.dashboard .today-class-box .cl-container.class-item .cl-output {
  color: #ffffff;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type1 {
  background-color: #7553ed;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type1 .cl-output.subject-view {
  color: #7553ed;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type1::before {
  content: "";
  position: absolute;
  background: url("../images/main/img_class_science.svg") no-repeat left center;
  bottom: 16px;
  right: 9px;
  width: 150px;
  height: 150px;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type2 {
  background-color: #2fbe5c;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type2 .cl-output {
  color: #2d2d2d;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type2 .cl-output.subject-view {
  color: #2fbe5c;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type2::before {
  content: "";
  position: absolute;
  background: url("../images/main/img_class_person.svg") no-repeat left center;
  bottom: 28px;
  right: 21px;
  width: 106px;
  height: 126px;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type2 .cl-output.time {
  background-image: url("../images/main/ico_class_time_b.svg");
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type3 {
  background-color: #4051e9;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type3 .cl-output.subject-view {
  color: #4051e9;
}
.cl-container.dashboard .today-class-box .cl-container.class-item.type3::before {
  content: "";
  position: absolute;
  background: url("../images/main/img_class_math.svg") no-repeat left center;
  bottom: 31px;
  right: 13px;
  width: 123px;
  height: 123px;
}
.cl-container.dashboard .today-class-box .cl-container.class-item .cl-output.subject-view {
  padding: 4.5px 12px;
  font-size: 14px;
  background-color: #ffffff;
  border-radius: 12px;
  font-weight: 600;
}
.cl-container.dashboard .today-class-box .cl-container.class-item .cl-output.text {
  font-size: 19px;
  font-weight: 600;
  vertical-align: top;
}
.cl-container.dashboard .today-class-box .cl-container.class-item .cl-output.time {
  padding-left: 22px;
  font-weight: 700;
  background: url("../images/main/ico_class_time.svg") no-repeat left center;
}
.cl-container.dashboard .cl-container.noti-board {
  background-color: #fafafa;
  border-radius: 12px;
}
.cl-container.dashboard .cl-container.noti-board .cl-formlayout-horizontal-separator {
  background: none;
  border-top: 1px dashed #ddd;
}
.cl-container.dashboard .cl-container.noti-board .cl-container.board-list {
  padding: 20px;
}
.cl-container.dashboard .cl-container.noti-board .cl-container.board-list > .cl-layout > .cl-layout-content {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-gap: 8px;
  align-items: center;
  justify-items: stretch;
}
.cl-container.dashboard .cl-container.noti-board .cl-container.board-list > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container.dashboard .cl-container.noti-board .cl-output.text {
  color: #2d2d2d;
  font-size: 17px;
  line-height: 1;
}
.cl-container.dashboard .cl-container.noti-board .cl-output.text.date {
  color: #555555;
  font-size: 16px;
  line-height: 1;
}
.cl-container.dashboard .cl-container.noti-board .cl-button.btn-go {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/main/ico_arrow_more.svg");
}
.cl-container.dashboard .cl-container.noti-board .cl-button.btn-go:focus,
.cl-container.dashboard .cl-container.noti-board .cl-button.btn-go.cl-focus,
.cl-container.dashboard .cl-container.noti-board .cl-button.btn-go:not(.cl-disabled):hover,
.cl-container.dashboard .cl-container.noti-board .cl-button.btn-go:not(.cl-disabled).cl-activated,
.cl-container.dashboard .cl-container.noti-board .cl-button.btn-go:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 24px;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-output.date {
  color: #555555;
  font-size: 16px;
  text-align: right;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: 17px;
  text-align: left;
  padding-left: 22px;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit:focus,
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit.cl-focus,
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit:not(.cl-disabled):hover,
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit:not(.cl-disabled).cl-activated,
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit::before {
  content: "Q.";
  position: absolute;
  color: #4051e9;
  left: 0;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit .cl-text {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: keep-all;
  white-space: normal;
}
.cl-container.dashboard .cl-container.faq .cl-container.faq-list .cl-button.tit span.q {
  color: #4051e9;
}
.cl-container.teacher-dashboard .cl-container.top-section {
  padding-top: 16px;
}
.cl-container.teacher-dashboard .cl-container.top-section .cl-container.profile .cl-output.school {
  font-size: 17px;
  font-weight: 500;
}
.cl-container.teacher-dashboard .cl-container.top-section .cl-container.profile .cl-output.name {
  font-size: 21px;
}
.cl-container.teacher-dashboard .cl-container.top-section .cl-button {
  border-radius: 999px;
}
.cl-container.teacher-dashboard .cl-container.top-section .cl-button .cl-icon {
  width: 16px;
  height: 16px;
}
.cl-container.teacher-dashboard .cl-container.top-section .cl-button.ico-set .cl-icon {
  background-image: url("../images/content/ico_pw_set.svg") !important;
}
.cl-container.teacher-dashboard .cl-container.top-section .cl-button.ico-book .cl-icon {
  background-image: url("../images/main/W_ico_book.svg") !important;
}
.cl-container.teacher-dashboard .cl-calendar.calendar {
  background-color: #4051e9;
  border-radius: 16px;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header {
  padding: 16px 24px;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header .cl-calendar-header-prev,
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header .cl-calendar-header-next {
  background-size: 20px;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header .cl-calendar-header-prev {
  background-image: url("../images/component/common/W_ico_arr_left_md_20.svg");
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header .cl-calendar-header-next {
  background-image: url("../images/component/common/W_ico_arr_right_md_20.svg");
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header .cl-calendar-header-text {
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-header .cl-calendar-header-text::after {
  content: none;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper {
  background-color: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 24px;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper .cl-calendar-content .cl-calendar-content-header {
  color: #2d2d2d;
  font-size: 14px;
  font-weight: 700;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper .cl-calendar-content .cl-calendar-content-header.cl-calendar-content-sun {
  color: #f23b3b;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper .cl-calendar-content .cl-calendar-content-header.cl-calendar-content-sat {
  color: #5062fc;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper .cl-calendar-content .cl-calendar-content-day {
  border-radius: 14px;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sun {
  color: #f23b3b;
}
.cl-container.teacher-dashboard .cl-calendar.calendar .cl-calendar-content-wrapper .cl-calendar-content .cl-calendar-content-day.cl-calendar-content-sat {
  color: #5062fc;
}
.cl-container.teacher-dashboard .cl-container.card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.class-info {
  background: url("../images/main/bg_note.png") no-repeat right center;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.class-info .cl-output.tit {
  color: #555555;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.class-info .cl-output.tit .badge {
  background-color: rgba(64, 81, 233, 0.1);
  border-radius: 999px;
  color: #4051e9;
  font-weight: 700;
  margin-left: 8px;
  padding: 0 8px;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.class-info .cl-output.date {
  color: #1d1d1d;
  font-size: 19px;
  font-weight: 700;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.subject {
  border-radius: 12px;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.subject .badge {
  border: 0;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.subject .cl-output.tit {
  font-size: 19px;
  font-weight: 600;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.subject .cl-output.ico-class {
  background-image: url("../images/main/ico_class.svg");
  padding-left: 30px;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.subject .cl-button.btn {
  background-color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.social {
  background-color: #f0fcf8;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.social .cl-button.btn {
  border-color: #8bddc1;
  color: #056d42;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.math {
  background-color: #eaf4ff;
}
.cl-container.teacher-dashboard .cl-container.card .cl-container.classSwiper-wrap .cl-container.classSwiper-in .cl-container.math .cl-button.btn {
  border-color: #aed5ff;
  color: #0050bf;
}
.cl-container.teacher-dashboard .cl-container.main-sect > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-last-row {
  position: absolute !important;
  top: 0;
  right: 0;
  width: auto !important;
  margin-top: 0 !important;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-output.tit {
  color: #1d1d1d;
  font-size: 21px;
  font-weight: 700;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-button.more {
  background-image: url("../images/main/ico_more.svg");
  background-color: #ffffff;
  border-color: #e4e4e4;
  border-radius: 999px;
  padding: 0;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.line-li .cl-container.li {
  padding: 16px 0;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.line-li .cl-container.li:not(.cl-last-row) {
  border-bottom: 1px dashed #e4e4e4;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li {
  padding: 11px 0;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: 17px;
  font-weight: 400;
  text-align: left;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt:focus,
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt.cl-focus,
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt:not(.cl-disabled):hover,
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt:not(.cl-disabled).cl-activated,
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-button.txt .cl-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card .cl-container.li .cl-output.date {
  color: #555555;
  font-size: 16px;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.fold {
  background: linear-gradient(-45deg, transparent 32px, #ffffff 0) right;
  background-repeat: no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.04));
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.fold::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-top: 45px solid #4051e9;
  border-right: 45px solid transparent;
  border-top-left-radius: 24px;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.fold .cl-container.li {
  padding: 0;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.fold .cl-container.li:not(.cl-last-row) {
  padding-bottom: 24px;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.fold .cl-container.li .cl-button.txt {
  font-weight: 700;
}
.cl-container.teacher-dashboard .cl-container.main-sect .cl-container.card.fold .cl-container.li .cl-button.txt .cl-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.3 !important;
  height: 100% !important;
}
/************************************************
 * 사용자 정의 스타일시트
 ************************************************/
.cl-control.cl-focus,
.cl-control:focus,
.cl-linkedcombobox-combo.cl-focus,
.cl-linkedcombobox-combo:focus,
.cl-grid-cell:focus,
.cl-navigationbar-list.mega-menu-left .cl-navigationbar-listitem:not(.cl-disabled).cl-hover,
.cl-container.aside .cl-sidenavigation-item:not(.cl-disabled):focus {
  /* 웹 접근성 개선 목적으로 브라우저의 기본 포커스 링을 활성화 하려면 아래 주석을 해제 하십시오. */
}
/* =====================
   아웃풋
   ===================== */
.cl-grid .cl-grid-cell .cl-output.cont-type,
.cl-output.cont-type {
  text-align: left;
}
.cl-grid .cl-grid-cell .cl-output.cont-type .cl-text::before,
.cl-output.cont-type .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  margin-right: 12px;
}
.cl-grid .cl-grid-cell .cl-output.cont-type.video .cl-text::before,
.cl-output.cont-type.video .cl-text::before {
  background-image: url("../images/component/common/ico_video.svg");
}
.cl-grid .cl-grid-cell .cl-output.cont-type.docs .cl-text::before,
.cl-output.cont-type.docs .cl-text::before {
  background-image: url("../images/component/common/ico_folder.svg");
}
.cl-grid .cl-grid-cell .cl-output.cont-type.audio .cl-text::before,
.cl-output.cont-type.audio .cl-text::before {
  background-image: url("../images/component/common/ico_audio.svg");
}
.cl-output.ico-book {
  font-size: 17px;
}
.cl-output.ico-book .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("../images/component/common/ico_book.svg") no-repeat center;
  vertical-align: middle;
  margin-right: 8px;
}
.cl-output.ico-book.tit {
  font-size: 21px;
  font-weight: 600;
}
.cl-output.ico-paper {
  font-size: 17px;
}
.cl-output.ico-paper .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0;
  width: 24px;
  height: 24px;
  background: url("../images/component/common/ico_paper.svg") no-repeat center;
  vertical-align: middle;
  margin-right: 8px;
}
.cl-grid .cl-grid-row.top .cl-grid-cell .cl-output.bbs-tit {
  font-weight: 600;
}
.cl-output.newlock .cl-text {
  display: grid !important;
  grid-template-columns: auto max-content 1fr;
  align-items: center;
  gap: 4px;
}
.cl-output.newlock .cl-text span.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.cl-output.newlock .cl-text span.lock::after {
  content: "";
  background: url("../images/content/ico_lock.svg") no-repeat center;
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
}
.cl-output.newlock .cl-text span.new::after {
  content: "";
  background: url("../images/component/common/ico_new.svg") no-repeat center;
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  vertical-align: middle;
}
.cl-grid .cl-grid-cell .cl-output.sub-tit,
.cl-output.sub-tit {
  color: #717171;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: left;
}
.cl-output.device-nodata {
  border: 2px dashed #bfc7d0;
  border-radius: 16px;
  color: #717171;
  font-size: 19px;
  font-weight: 500;
  min-height: 500px;
  text-align: center;
}
.cl-output.device-nodata .cl-text::before {
  content: "";
  position: relative;
  display: block;
  top: 0;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background: url("../images/content/ico_nodata_class.svg") no-repeat center;
  background-size: contain;
  margin-bottom: 16px;
}
@media (max-width: 1023px) {
  .cl-output.device-nodata {
    font-size: 16px;
    min-height: 336px;
  }
  .cl-output.device-nodata .cl-text::before {
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
  }
}
/* =====================
   인풋 계열 공통
   ===================== */
.cl-inputbox,
.cl-searchinput,
.cl-maskeditor,
.cl-numbereditor,
.cl-dateinput,
.cl-fileinput,
.cl-textarea,
.cl-combobox {
  font-weight: 500;
  font-size: 16px;
}
.cl-inputbox.small,
.cl-searchinput.small,
.cl-maskeditor.small,
.cl-numbereditor.small,
.cl-dateinput.small,
.cl-fileinput.small,
.cl-textarea.small,
.cl-combobox.small {
  border-radius: 12px;
  font-size: 15px;
}
.cl-inputbox.error {
  border-color: #de3737;
}
.cl-searchinput.error {
  border-color: #de3737;
}
.cl-maskeditor.error {
  border-color: #de3737;
}
.cl-numbereditor.error {
  border-color: #de3737;
}
.cl-dateinput.error {
  border-color: #de3737;
}
.cl-fileinput.error {
  border-color: #de3737;
}
.cl-textarea.error {
  border-color: #de3737;
}
.cl-combobox.error {
  border-color: #de3737;
}
.cl-container.textarea-wrap {
  background-color: #ffffff;
  border: 2px solid #4051e9;
  border-radius: 8px;
  padding: 24px;
}
.cl-container.textarea-wrap .cl-textarea {
  background: 0;
  border: 0;
  border-radius: 0;
}
.cl-container.textarea-wrap .cl-textarea .cl-textarea-wrap {
  padding: 0;
}
.cl-container.textarea-wrap .cl-textarea.cl-focus {
  outline: none;
}
/* =====================
   셀렉션 계열 공통
   ===================== */
.cl-checkbox.large .cl-checkbox-icon {
  width: 24px;
  height: 24px;
}
.cl-checkbox.large:hover .cl-checkbox-icon,
.cl-checkbox.large.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg.svg");
}
.cl-checkbox.large.cl-checked {
  /* 체크된 체크박스 hover시 아이콘 스타일 */
}
.cl-checkbox.large.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected.svg");
}
.cl-checkbox.large.cl-checked:hover .cl-checkbox-icon,
.cl-checkbox.large.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected.svg");
}
.cl-checkbox.large.cl-disabled .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_disabled.svg");
}
.cl-checkbox.large.cl-disabled:hover .cl-checkbox-icon,
.cl-checkbox.large.cl-disabled.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_disabled.svg");
}
.cl-checkbox.large.cl-disabled.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected_disabled.svg");
}
.cl-checkbox.large.cl-disabled.cl-checked:hover .cl-checkbox-icon,
.cl-checkbox.large.cl-disabled.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected_disabled.svg");
}
.cl-checkbox.large.cl-partialchecked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_partial.svg");
}
.cl-checkbox.large.cl-partialchecked:hover .cl-checkbox-icon,
.cl-checkbox.large.cl-partialchecked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_partial.svg");
}
.cl-checkbox.large.cl-partialchecked.cl-disabled .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_partial_disabled.svg");
}
.cl-checkbox.large.cl-partialchecked.cl-disabled:hover .cl-checkbox-icon,
.cl-checkbox.large.cl-partialchecked.cl-disabled.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_partial_disabled.svg");
}
.cl-checkbox.large.cl-fixedWidth .cl-icon-wrapper {
  width: 24px;
}
.cl-checkboxgroup.large .cl-checkbox .cl-checkbox-icon {
  width: 24px;
  height: 24px;
}
.cl-checkboxgroup.large .cl-checkbox:hover .cl-checkbox-icon,
.cl-checkboxgroup.large .cl-checkbox.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg.svg");
}
.cl-checkboxgroup.large .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected.svg");
}
.cl-checkboxgroup.large .cl-checkbox.cl-checked:hover .cl-checkbox-icon,
.cl-checkboxgroup.large .cl-checkbox.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected.svg");
}
.cl-checkboxgroup.large .cl-checkbox.cl-disabled {
  color: #aaaaaa;
}
.cl-checkboxgroup.large .cl-checkbox.cl-disabled .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_disabled.svg");
}
.cl-checkboxgroup.large .cl-checkbox.cl-disabled:hover .cl-checkbox-icon,
.cl-checkboxgroup.large .cl-checkbox.cl-disabled.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_disabled.svg");
}
.cl-checkboxgroup.large .cl-checkbox.cl-disabled.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected_disabled.svg");
}
.cl-checkboxgroup.large .cl-checkbox.cl-disabled.cl-checked:hover .cl-checkbox-icon,
.cl-checkboxgroup.large .cl-checkbox.cl-disabled.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected_disabled.svg");
}
.cl-checkboxgroup.large.cl-disabled .cl-checkbox .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_disabled.svg");
}
.cl-checkboxgroup.large.cl-disabled .cl-checkbox:hover .cl-checkbox-icon,
.cl-checkboxgroup.large.cl-disabled .cl-checkbox.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_disabled.svg");
}
.cl-checkboxgroup.large.cl-disabled .cl-checkbox.cl-checked .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected_disabled.svg");
}
.cl-checkboxgroup.large.cl-disabled .cl-checkbox.cl-checked:hover .cl-checkbox-icon,
.cl-checkboxgroup.large.cl-disabled .cl-checkbox.cl-checked.cl-hover .cl-checkbox-icon {
  background-image: url("../images/component/common/ico_check_lg_selected_disabled.svg");
}
.cl-checkboxgroup.form-chip {
  color: #1e2124;
  font-size: 17px;
  font-weight: 400;
}
.cl-checkboxgroup.form-chip .cl-checkbox {
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  padding: 0 11px;
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  height: 48px;
}
.cl-checkboxgroup.form-chip .cl-checkbox .cl-text {
  line-height: 1.5;
}
.cl-checkboxgroup.form-chip .cl-checkbox.cl-checked {
  background-color: #f3f5ff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-checkboxgroup.form-chip .cl-checkbox.cl-checked .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/component/common/ico_chip_check.svg") no-repeat center;
  margin-right: 4px;
  vertical-align: middle;
}
.cl-checkboxgroup.form-chip .cl-checkbox.cl-disabled {
  background-color: #e0e3e7;
  color: #555555;
}
.cl-checkboxgroup.form-chip .cl-checkbox.cl-disabled.cl-checked {
  background-color: #e0e3e7;
  color: #555555;
}
.cl-checkboxgroup.form-chip .cl-checkbox.cl-disabled.cl-checked .cl-text::before {
  background-image: url("../images/component/common/ico_chip_check_disabled.svg");
}
.cl-checkboxgroup.form-chip.cl-focus.cl-iconalign-none .cl-checkbox:focus-within {
  outline-offset: 0;
  outline: 2px solid #00cbde;
}
.cl-checkboxgroup.form-chip.cl-disabled .cl-checkbox {
  background-color: #e0e3e7;
  color: #555555;
}
.cl-checkboxgroup.form-chip.cl-disabled .cl-checkbox.cl-checked {
  background-color: #e0e3e7;
  color: #555555;
}
.cl-checkboxgroup.form-chip.cl-disabled .cl-checkbox.cl-checked .cl-text::before {
  background-image: url("../images/component/common/ico_chip_check_disabled.svg");
}
.cl-checkboxgroup.form-chip.small {
  font-size: 15px;
}
.cl-checkboxgroup.form-chip.small .cl-checkbox {
  height: 40px;
  padding: 0 9px;
}
.cl-checkboxgroup.form-chip.small .cl-checkbox.cl-checked .cl-text::before {
  width: 16px;
  height: 16px;
}
.cl-checkboxgroup.form-chip.large {
  font-size: 19px;
}
.cl-checkboxgroup.form-chip.large .cl-checkbox {
  height: 56px;
  padding: 0 15px;
}
.cl-checkboxgroup.form-chip.large .cl-checkbox.cl-checked .cl-text::before {
  width: 24px;
  height: 24px;
}
.cl-radiobutton.large .cl-radiobutton-item .cl-radiobutton-icon {
  width: 24px;
  height: 24px;
}
.cl-radiobutton.large .cl-radiobutton-item:hover .cl-radiobutton-icon,
.cl-radiobutton.large .cl-radiobutton-item.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg.svg");
}
.cl-radiobutton.large .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_selected.svg");
}
.cl-radiobutton.large .cl-radiobutton-item.cl-selected:hover .cl-radiobutton-icon,
.cl-radiobutton.large .cl-radiobutton-item.cl-selected.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_selected.svg");
}
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled {
  color: #aaaaaa;
}
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_disabled.svg");
}
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled:hover .cl-radiobutton-icon,
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_disabled.svg");
}
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled.cl-selected .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_selected_disabled.svg");
}
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled.cl-selected:hover .cl-radiobutton-icon,
.cl-radiobutton.large .cl-radiobutton-item.cl-disabled.cl-selected.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_selected_disabled.svg");
}
.cl-radiobutton.large.cl-disabled .cl-radiobutton-item .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_disabled.svg");
}
.cl-radiobutton.large.cl-disabled .cl-radiobutton-item:hover .cl-radiobutton-icon,
.cl-radiobutton.large.cl-disabled .cl-radiobutton-item.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_disabled.svg");
}
.cl-radiobutton.large.cl-disabled .cl-radiobutton-item.cl-selected .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_selected_disabled.svg");
}
.cl-radiobutton.large.cl-disabled .cl-radiobutton-item.cl-selected:hover .cl-radiobutton-icon,
.cl-radiobutton.large.cl-disabled .cl-radiobutton-item.cl-selected.cl-hover .cl-radiobutton-icon {
  background-image: url("../images/component/common/ico_radio_lg_selected_disabled.svg");
}
.cl-radiobutton.large.cl-fixedWidth .cl-checkbox .cl-icon-wrapper {
  width: 24px;
}
.cl-checkbox.form-toggle-switch {
  font-size: 16px;
  font-weight: 400;
}
.cl-checkbox.form-toggle-switch .cl-checkbox-icon {
  position: relative;
  background-color: #6d7882;
  background-image: none !important;
  border-radius: 999px;
  width: 32px;
}
.cl-checkbox.form-toggle-switch .cl-checkbox-icon::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #ffffff url("../images/component/common/ico_switch.svg") no-repeat center;
  border-radius: 999px;
  transition: 0.4s cubic-bezier(0.4, 0, 0.23, 1);
}
.cl-checkbox.form-toggle-switch.cl-checked .cl-checkbox-icon {
  background-color: #4051e9;
}
.cl-checkbox.form-toggle-switch.cl-checked .cl-checkbox-icon::before {
  left: calc(32px - 16px - 2px);
  background-image: url("../images/component/common/ico_switch_active.svg");
}
.cl-checkbox.form-toggle-switch.cl-disabled .cl-checkbox-icon {
  background-color: #cdd1d5;
}
.cl-checkbox.form-toggle-switch.cl-disabled .cl-checkbox-icon::before {
  background-color: #8a949e;
  background-image: url("../images/component/common/ico_switch_disabled.svg");
}
.cl-checkbox.form-toggle-switch.cl-disabled.cl-checked .cl-checkbox-icon::before {
  background-image: url("../images/component/common/ico_switch_active_disabled.svg");
}
.cl-checkbox.form-toggle-switch.large {
  font-size: 17px;
}
.cl-checkbox.form-toggle-switch.large .cl-checkbox-icon {
  width: 40px;
}
.cl-checkbox.form-toggle-switch.large .cl-checkbox-icon::before {
  width: 20px;
  height: 20px;
  background-size: 10px;
}
.cl-checkbox.form-toggle-switch.large.cl-checked .cl-checkbox-icon::before {
  left: calc(40px - 20px - 2px);
}
.cl-radiobutton.form-chip {
  color: #1e2124;
  font-size: 17px;
  font-weight: 400;
}
.cl-radiobutton.form-chip .cl-radiobutton-item {
  border: 1px solid #c6c6c6;
  border-radius: 8px;
  padding: 0 11px;
  display: inline-flex !important;
  flex-wrap: nowrap;
  align-items: center;
  height: 48px;
}
.cl-radiobutton.form-chip .cl-radiobutton-item .cl-text {
  line-height: 1.5;
}
.cl-radiobutton.form-chip .cl-radiobutton-item.cl-selected {
  background-color: #f3f5ff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-radiobutton.form-chip .cl-radiobutton-item.cl-selected .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/component/common/ico_chip_check.svg") no-repeat center;
  margin-right: 4px;
  vertical-align: middle;
}
.cl-radiobutton.form-chip .cl-radiobutton-item.cl-disabled {
  background-color: #e0e3e7;
  color: #555555;
}
.cl-radiobutton.form-chip .cl-radiobutton-item.cl-disabled.cl-checked {
  background-color: #e0e3e7;
  color: #555555;
}
.cl-radiobutton.form-chip .cl-radiobutton-item.cl-disabled.cl-checked .cl-text::before {
  background-image: url("../images/component/common/ico_chip_check_disabled.svg");
}
.cl-radiobutton.form-chip.small {
  font-size: 15px;
}
.cl-radiobutton.form-chip.small .cl-radiobutton-item {
  height: 40px;
  padding: 0 9px;
}
.cl-radiobutton.form-chip.small .cl-radiobutton-item.cl-selected .cl-text::before {
  width: 16px;
  height: 16px;
}
.cl-radiobutton.form-chip.large {
  font-size: 19px;
}
.cl-radiobutton.form-chip.large .cl-radiobutton-item {
  height: 56px;
  padding: 0 15px;
}
.cl-radiobutton.form-chip.large .cl-radiobutton-item.cl-selected .cl-text::before {
  width: 24px;
  height: 24px;
}
.cl-radiobutton.form-switch {
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}
.cl-radiobutton.form-switch .cl-radiobutton-item {
  border: 1px solid #c9cdd2;
  border-radius: 0;
  padding: 0 20px;
}
.cl-radiobutton.form-switch .cl-radiobutton-item .cl-radiobutton-field {
  height: 38px;
}
.cl-radiobutton.form-switch .cl-radiobutton-item.cl-first-column {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.cl-radiobutton.form-switch .cl-radiobutton-item.cl-last-column {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.cl-radiobutton.form-switch .cl-radiobutton-item.cl-selected {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
.cl-radiobutton.form-switch:focus.cl-iconalign-none,
.cl-radiobutton.form-switch.cl-focus.cl-iconalign-none {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-radiobutton.form-switch:focus.cl-iconalign-none .cl-radiobutton-item .cl-text:focus,
.cl-radiobutton.form-switch.cl-focus.cl-iconalign-none .cl-radiobutton-item .cl-text:focus,
.cl-radiobutton.form-switch:focus.cl-iconalign-none .cl-radiobutton-item .cl-text.cl-focus,
.cl-radiobutton.form-switch.cl-focus.cl-iconalign-none .cl-radiobutton-item .cl-text.cl-focus {
  outline: none;
}
.cl-radiobutton.sch-field {
  color: #555555;
}
.cl-radiobutton.sch-field .cl-radiobutton-item.cl-selected {
  color: #4051e9;
  font-weight: 700;
}
.cl-container.tab-group .cl-checkboxgroup .cl-checkbox {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 999px;
  padding: 0 16px;
}
.cl-container.tab-group .cl-checkboxgroup .cl-checkbox .cl-checkbox-field {
  height: 44px;
}
.cl-container.tab-group .cl-checkboxgroup .cl-checkbox.cl-checked {
  border-color: #4051e9;
  color: #4051e9;
  font-weight: 600;
}
.cl-container.tab-group .cl-checkboxgroup .cl-checkbox.cl-checked .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("../images/component/common/ico_chip_check.svg") no-repeat center;
  margin-right: 8px;
  vertical-align: middle;
}
.cl-container.tab-group .cl-checkboxgroup .cl-checkbox.cl-disabled {
  background-color: #f1f2f5;
  color: #555555;
}
.cl-container.tab-group .cl-radiobutton .cl-radiobutton-item {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 999px;
  padding: 0 16px;
}
.cl-container.tab-group .cl-radiobutton .cl-radiobutton-item .cl-radiobutton-field {
  height: 44px;
}
.cl-container.tab-group .cl-radiobutton .cl-radiobutton-item.cl-selected {
  border-color: #4051e9;
  color: #4051e9;
  font-weight: 600;
}
.cl-container.tab-group .cl-radiobutton .cl-radiobutton-item.cl-selected .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: url("../images/component/common/ico_chip_check.svg") no-repeat center;
  margin-right: 8px;
  vertical-align: middle;
}
.cl-container.tab-group .cl-radiobutton .cl-radiobutton-item.cl-disabled {
  background-color: #f1f2f5;
  color: #555555;
}
.cl-container.tab-group .cl-radiobutton .cl-radiobutton-item:focus-within {
  outline-offset: 0;
  outline: 2px solid #00cbde;
}
.cl-container.tab-group .cl-button.outline.ico-plus {
  border: 2px dashed #d3ddeb;
  border-radius: 999px;
}
/* =====================
   알림 메세지
   ===================== */
.cl-output.error {
  background-image: url("../images/component/common/ico_alert_error.svg");
  color: #ff1a09;
  padding-left: 28px;
}
.cl-output.info {
  background-image: url("../images/component/common/ico_alert_info.svg");
  color: #717171;
  font-size: 14px;
  padding-left: 27px;
}
.cl-output.required {
  color: #555555;
  text-align: right;
}
.cl-output.required .em {
  color: #f23b3b;
  font-weight: 600;
}
/* =====================
   버튼
   ===================== */
.cl-button.large {
  font-size: 17px;
  padding: 0 23px;
}
.cl-button.medium {
  font-size: 16px;
}
.cl-button.small {
  font-size: 16px;
  padding: 0 15px;
}
.cl-button.small .cl-icon {
  width: 20px;
  height: 20px;
}
.cl-button.xsmall {
  font-size: 15px;
  padding: 0 15px;
}
.cl-button.xsmall .cl-icon {
  width: 16px;
  height: 16px;
}
.cl-button.primary {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
.cl-button.primary.cl-focus {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
.cl-button.primary:not(.cl-disabled):hover {
  background-color: #2f41d0;
  border-color: #2f41d0;
  color: #ffffff;
}
.cl-button.primary:not(.cl-disabled).cl-activated,
.cl-button.primary:not(.cl-disabled):active {
  background-color: #1e33b8;
  border-color: #1e33b8;
  color: #ffffff;
}
.cl-button.primary.cl-disabled {
  background-color: #4051e9;
  border-color: #4051e9;
  color: #ffffff;
}
.cl-button.secondary {
  background-color: #e3e6ff;
  border-color: #e3e6ff;
  color: #4051e9;
}
.cl-button.secondary.cl-focus {
  background-color: #e3e6ff;
  border-color: #e3e6ff;
  color: #4051e9;
}
.cl-button.secondary:not(.cl-disabled):hover {
  background-color: #d6daff;
  border-color: #d6daff;
  color: #4051e9;
}
.cl-button.secondary:not(.cl-disabled).cl-activated,
.cl-button.secondary:not(.cl-disabled):active {
  background-color: #c5c9f5;
  border-color: #c5c9f5;
  color: #4051e9;
}
.cl-button.secondary.cl-disabled {
  background-color: #e3e6ff;
  border-color: #e3e6ff;
  color: #4051e9;
}
.cl-button.tertiary {
  background-color: #ffffff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-button.tertiary.cl-focus {
  background-color: #ffffff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-button.tertiary:not(.cl-disabled):hover {
  background-color: #f3f5ff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-button.tertiary:not(.cl-disabled).cl-activated,
.cl-button.tertiary:not(.cl-disabled):active {
  background-color: #e3e6ff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-button.tertiary.cl-disabled {
  background-color: #ffffff;
  border-color: #4051e9;
  color: #4051e9;
}
.cl-button.outline {
  background-color: #ffffff;
  border-color: #c6c6c6;
  color: #555555;
}
.cl-button.outline.cl-focus {
  background-color: #ffffff;
  border-color: #c6c6c6;
  color: #555555;
}
.cl-button.outline:not(.cl-disabled):hover {
  background-color: #f1f2f5;
  border-color: #c6c6c6;
  color: #555555;
}
.cl-button.outline:not(.cl-disabled).cl-activated,
.cl-button.outline:not(.cl-disabled):active {
  background-color: #e0e3e7;
  border-color: #c6c6c6;
  color: #555555;
}
.cl-button.outline.cl-disabled {
  background-color: #ffffff;
  border-color: #c6c6c6;
  color: #555555;
}
.cl-button.ghost {
  background-color: transparent;
  border: 0;
  color: #555555;
}
.cl-button.ghost.cl-focus,
.cl-button.ghost:not(.cl-disabled):hover,
.cl-button.ghost:not(.cl-disabled).cl-activated,
.cl-button.ghost:not(.cl-disabled):active {
  background-color: transparent;
  color: #555555;
}
.cl-button.ghost.cl-disabled {
  background-color: #ffffff;
  color: #555555;
}
.cl-button.sch {
  background-color: #5f606c;
  border-color: #5f606c;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  padding: 0 16px;
}
.cl-button.sch .cl-icon {
  background-image: url("../images/component/common/W_ico_sch_md_20.svg") !important;
  width: 20px;
}
.cl-button.sch.cl-focus {
  background-color: #5f606c;
  border-color: #5f606c;
  color: #ffffff;
}
.cl-button.sch:not(.cl-disabled):hover {
  background-color: #515366;
  border-color: #515366;
  color: #ffffff;
}
.cl-button.sch:not(.cl-disabled).cl-activated,
.cl-button.sch:not(.cl-disabled):active {
  background-color: #42445d;
  border-color: #42445d;
  color: #ffffff;
}
.cl-button.sch.cl-disabled {
  background-color: #5f606c;
  border-color: #5f606c;
  color: #ffffff;
}
.cl-button.btn-tbl {
  background-color: #f5f5f5;
  border: 0;
  border-radius: 12px;
  padding: 0;
}
.cl-button.btn-tbl .cl-text-wrapper {
  gap: 0;
}
.cl-button.btn-tbl .cl-icon {
  width: 20px;
  height: 20px;
}
.cl-button.btn-tbl.cl-focus,
.cl-button.btn-tbl:not(.cl-disabled):hover,
.cl-button.btn-tbl:not(.cl-disabled).cl-activated,
.cl-button.btn-tbl:not(.cl-disabled):active {
  background-color: #f5f5f5;
}
.cl-button.btn-tbl.ico-edit .cl-icon {
  background-image: url("../images/component/common/ico_write.svg") !important;
}
.cl-button.btn-tbl.ico-timetable .cl-icon {
  background-image: url("../images/component/common/ico_timetable.svg") !important;
}
.cl-button.btn-tbl.ico-search .cl-icon {
  background-image: url("../images/content/ico_device.svg") !important;
}
.cl-button.btn-txt {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
}
.cl-button.btn-txt:focus,
.cl-button.btn-txt.cl-focus,
.cl-button.btn-txt:not(.cl-disabled):hover,
.cl-button.btn-txt:not(.cl-disabled).cl-activated,
.cl-button.btn-txt:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-button.ico-plus .cl-icon {
  background-image: url("../images/component/common/P_ico_plus_20.svg") !important;
}
.cl-button.ico-link .cl-icon {
  background-image: url("../images/component/common/P_ico_link_24.svg") !important;
}
.cl-button.primary.ico-link .cl-icon {
  background-image: url("../images/component/common/W_ico_link_20.svg") !important;
}
.cl-button.ico-reset .cl-icon {
  background-image: url("../images/component/common/ico_reset_24.svg") !important;
}
.cl-button.ico-prev .cl-icon {
  background-image: url("../images/component/common/ico_left_24.svg") !important;
}
.cl-button.ico-view .cl-icon {
  background-image: url("../images/component/common/P_ico_view_20.svg") !important;
}
.cl-button.ico-max .cl-icon {
  background-image: url("../images/component/common/P_ico_max_md_24.svg") !important;
}
.cl-button.ico-down .cl-icon {
  background-image: url("../images/component/common/P_ico_download_md_24.svg") !important;
}
.cl-button.primary.ico-down .cl-icon {
  background-image: url("../images/component/common/W_ico_download_md_24.svg") !important;
}
.cl-button.ico-bookmark .cl-icon {
  background-image: url("../images/component/common/ico_bookmark_24.svg") !important;
}
.cl-button.ico-bookmark.active .cl-icon {
  background-image: url("../images/component/common/P_ico_bookmark_24.svg") !important;
}
.cl-button.ico-like .cl-icon {
  background-image: url("../images/component/common/ico_like_24.svg") !important;
}
.cl-button.ico-like.active .cl-icon {
  background-image: url("../images/component/common/ico_like_active_24.svg") !important;
}
.cl-button.icon {
  background-color: #ffffff;
  color: inherit;
  padding: 0 !important;
}
.cl-button.icon .cl-text-wrapper {
  gap: 0;
}
.cl-button.icon:not(.outline) {
  border: 0;
}
.cl-button.icon.ico-like {
  background-image: url("../images/component/common/ico_like_24.svg");
  border-radius: 999px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-button.icon.ico-like.active {
  background-image: url("../images/component/common/ico_like_active_24.svg");
}
.cl-button.icon.ico-edit {
  background-image: url("../images/component/common/ico_write.svg");
  border-radius: 999px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-button.icon.ico-more {
  background-color: transparent;
  border-radius: 0;
  background-image: url("../images/component/common/G_ico_menu_24.svg");
}
.cl-button.link {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3 !important;
  text-decoration: underline;
}
.cl-button.link:focus,
.cl-button.link.cl-focus,
.cl-button.link:not(.cl-disabled):hover,
.cl-button.link:not(.cl-disabled).cl-activated,
.cl-button.link:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-button.link.cl-focus {
  color: #2d2d2d;
}
.cl-button.link:not(.cl-disabled):hover {
  color: #4051e9;
}
.cl-button.link:not(.cl-disabled).cl-activated,
.cl-button.link:not(.cl-disabled):active {
  color: #4051e9;
}
.cl-button.link.cl-disabled {
  color: #8e8e8e;
  opacity: 1;
}
.cl-button.link.xsmall {
  font-size: 12px;
}
.cl-button.link.small {
  font-size: 14px;
}
.cl-button.link.large {
  font-size: 18px;
}
.cl-button.tooltip {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/component/common/ico_tooltip.svg");
  width: 16px;
  height: 16px;
}
.cl-button.tooltip:focus,
.cl-button.tooltip.cl-focus,
.cl-button.tooltip:not(.cl-disabled):hover,
.cl-button.tooltip:not(.cl-disabled).cl-activated,
.cl-button.tooltip:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-button.tooltip.cl-focus,
.cl-button.tooltip:not(.cl-disabled):hover,
.cl-button.tooltip:not(.cl-disabled).cl-activated,
.cl-button.tooltip:not(.cl-disabled):active {
  background-image: url("../images/component/common/ico_tooltip.svg");
}
/* =====================
   다이얼로그
   ===================== */
.cl-dialog.modal {
  background-color: #ffffff;
  border: 1px solid #c9cdd2;
  border-radius: 16px;
}
.cl-dialog.modal .cl-container.modal-conts .cl-output.msg {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.cl-dialog.modal .cl-container.modal-conts .cl-output.submsg {
  color: #555555;
  font-size: 16px;
  text-align: center;
}
.cl-dialog.modal .cl-container.modal-btn .cl-button {
  font-weight: 700;
}
@media (max-width: 1023px) {
  .cl-dialog.modal .cl-container.modal-conts .cl-output.msg {
    font-size: 16px;
  }
  .cl-dialog.modal .cl-container.modal-conts .cl-output.submsg {
    font-size: 14px;
  }
  .cl-dialog.modal .cl-container.modal-btn > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    height: 40px !important;
  }
  .cl-dialog.modal .cl-container.modal-btn .cl-button {
    font-size: 14px;
    font-weight: 600;
  }
}
/* =====================
   폼
   ===================== */
.cl-container.box {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 24px;
}
.cl-container.box-in {
  background-color: #f4f7fb;
  border-radius: 12px;
  padding: 24px;
}
.cl-container.form .label {
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 600;
  padding-right: 12px;
}
.cl-container.form .label.required .cl-text::after {
  content: " *";
  color: #f23b3b;
}
.cl-container.form .cl-output.txt {
  color: #8e8e8e;
  font-weight: 500;
}
@media (max-width: 1023px) {
  .cl-container.form .cl-container.field > .cl-layout > .cl-layout-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: normal;
    gap: 0;
  }
  .cl-container.form .cl-container.field > .cl-layout > .cl-layout-content {
    flex-direction: column;
  }
  .cl-container.form .cl-container.field > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    width: calc(100% - 8px) !important;
  }
}
.cl-container.sch-form {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.sch-form > .cl-layout > .cl-layout-content {
  width: calc(100% - (24px * 2)) !important;
  padding: 24px;
}
.cl-container.sch-form .label {
  color: #555555;
  font-size: 16px;
  font-weight: 500;
  text-align: right !important;
}
@media (max-width: 1023px) {
  .cl-container.sch-form > .cl-layout > .cl-layout-content {
    width: calc(100% - (16px * 2)) !important;
    padding: 16px;
  }
}
.cl-container.form-base {
  background-color: #ffffff;
  border-top: 2px solid #2c2d31;
  border-bottom: 1px solid #e0e3e7;
}
.cl-container.form-base .cl-formlayout-horizontal-separator,
.cl-container.form-base .cl-formlayout-vertical-separator {
  background-color: #e0e3e7;
}
.cl-container.form-base .label {
  background-color: #f8f8f8;
  font-size: 17px;
  font-weight: 600;
  padding: 2px 24px;
}
/* =====================
   그리드
   ===================== */
.cl-grid .cl-grid-footer .cl-output.sum {
  color: #4051e9;
  text-align: center;
}
.cl-grid .cl-grid-cell {
  font-size: 17px;
}
.cl-grid .cl-grid-cell .cl-output {
  font-size: inherit;
  text-align: center;
  padding: 0 6px;
}
.cl-grid .cl-grid-cell .cl-output.text-blue {
  color: #0166f3;
}
.cl-grid .cl-grid-cell .cl-output.text-green {
  color: #077045;
}
.cl-grid .cl-grid-cell .cl-output.text-red {
  color: #de1a16;
}
.cl-grid .cl-grid-cell .cl-output.text-gray {
  color: #717171;
}
.cl-grid .cl-grid-cell .cl-checkbox {
  font-weight: 400;
  padding: 0 12px;
}
.cl-grid .cl-grid-cell .cl-button {
  width: auto !important;
  min-width: 32px !important;
  left: 50%;
  transform: translateX(-50%);
}
.cl-grid.tbl .cl-grid-detail .cl-grid-row.cl-last-row .cl-grid-cell {
  border-bottom: 0;
}
.cl-grid.tbl .cl-grid-cell.bar {
  background: linear-gradient(#dddddd, #dddddd) no-repeat right center;
  background-size: 1px 18px;
}
/* =====================
   탭 폴더 및 아코디언
   ===================== */
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.new .cl-text::after {
  content: "";
  background: url("../images/component/common/ico_new.svg") no-repeat center;
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-left: 10px;
  vertical-align: top;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item .num {
  background-color: #eceefd;
  border-radius: 999px;
  color: #4051e9;
  font-size: 15px;
  font-weight: 700;
  margin-left: 10px;
  padding: 3px 8px;
}
.cl-tabfolder .cl-tabfolder-header .cl-tabfolder-item.cl-selected.new .cl-text::after {
  background-image: url("../images/component/common/ico_new_active.svg");
}
.cl-tabfolder.tab > .tab > .cl-tabfolder-header.cl-top.tab {
  background: linear-gradient(#dddddd, #dddddd) no-repeat center bottom;
  background-size: 100% 1px;
}
.cl-tabfolder.tab > .tab > .cl-tabfolder-header.cl-top.tab .cl-tabfolder-header-viewport {
  padding: 0;
}
.cl-tabfolder.tab > .tab > .cl-tabfolder-header.cl-top.tab .cl-tabfolder-item {
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #717171;
  font-weight: 400;
  padding: 15px;
}
.cl-tabfolder.tab > .tab > .cl-tabfolder-header.cl-top.tab .cl-tabfolder-item.cl-selected {
  background-color: transparent;
  color: #4051e9;
  font-weight: 600;
}
.cl-tabfolder.tab > .tab > .cl-tabfolder-header.cl-top.tab .cl-tabfolder-item.cl-selected::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #4051e9;
}
.cl-container.accordion .cl-container.accordion-header .cl-output.tit {
  font-size: 21px;
  font-weight: 600;
}
.cl-container.accordion .cl-container.accordion-header .cl-output.txt {
  color: #717171;
  font-size: 17px;
}
.cl-container.accordion .cl-container.accordion-header .cl-button.expander {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/component/common/ico_arr_down_24.svg");
}
.cl-container.accordion .cl-container.accordion-header .cl-button.expander:focus,
.cl-container.accordion .cl-container.accordion-header .cl-button.expander.cl-focus,
.cl-container.accordion .cl-container.accordion-header .cl-button.expander:not(.cl-disabled):hover,
.cl-container.accordion .cl-container.accordion-header .cl-button.expander:not(.cl-disabled).cl-activated,
.cl-container.accordion .cl-container.accordion-header .cl-button.expander:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.accordion .cl-container.accordion-header .cl-button.expander.cl-focus {
  outline-offset: -2px;
}
.cl-container.accordion .cl-container.accordion-header .cl-button.expander.active {
  background-image: url("../images/component/common/ico_arr_up_24.svg");
}
.cl-container.accordion .cl-container.accordion-body {
  padding-top: 16px;
}
@media (max-width: 1023px) {
  .cl-container.accordion .cl-container.accordion-body .cl-container.btn-wrap > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    height: 36px !important;
  }
}
/* =====================
   배지
   ===================== */
.badge {
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}
.cl-output .cl-text .badge {
  display: inline-block;
  margin-right: 8px;
}
.badge-grade {
  background-color: #ffefe9;
  color: #d1320b;
  padding: 0 7.5px;
}
.badge-grade.outline {
  background-color: #ffffff;
  border: 1px solid #ffd5c7;
}
.badge-grade.large {
  line-height: 36px;
  padding: 0 8px;
}
.badge-subject {
  padding: 0 8px;
}
.badge-subject.korean {
  background-color: #fef2f2;
  color: #de1a16;
}
.badge-subject.english {
  background-color: #fff7ed;
  color: #996600;
}
.badge-subject.social {
  background-color: #f0fcf8;
  color: #088451;
}
.badge-subject.math {
  background-color: #eaf4ff;
  color: #0166f3;
}
.badge-subject.science {
  background-color: #f3f0ff;
  color: #7553ed;
}
.badge-subject.art {
  background-color: #fdf4ff;
  color: #c514cc;
}
.badge-subject.music {
  background-color: #fdf4ff;
  color: #dd0760;
}
.badge-subject.subject-1 {
  background-color: #f7fee7;
  color: #468301;
}
.badge-subject.subject-2 {
  background-color: #ecfeff;
  color: #017da6;
}
.badge-subject.subject-3 {
  background-color: #eef2ff;
  color: #4f46e5;
}
.badge-subject.outline {
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  padding: 0 7px;
}
.badge-subject.large {
  border-radius: 8px;
  line-height: 32px;
  padding: 0 15px;
}
.badge-subject.large.outline {
  padding: 0 14px;
}
.badge-year {
  background-color: #f5f5f5;
  border-radius: 8px;
  color: #717171;
  font-size: 15px;
  font-weight: 500;
  line-height: 32px;
  padding: 0 12px;
}
.badge-state,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state {
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 32px;
  padding: 0 12px;
}
.badge-state.done,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.done {
  background-color: #dcf6ee;
  color: #088451;
}
.badge-state.active,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.active {
  background-color: #eaf4ff;
  color: #0166f3;
}
.badge-state.pending,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.pending {
  background-color: #eff2f8;
  color: #6b6f76;
}
.badge-state.scheduled,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.scheduled {
  background-color: #e3e6ff;
  color: #4051e9;
}
.badge-state.closed,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.closed {
  background-color: #fef2f2;
  color: #de1a16;
}
.badge-state.large,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.large {
  font-size: 16px;
  line-height: 36px;
  padding: 0 16px;
}
.badge-state.small,
.cl-grid .cl-grid-ctrl-inherit:not(.cl-button):not(.cl-disabled).badge-state.small {
  line-height: 26px;
  padding: 0 8px;
}
.badge-category {
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 0 12px;
  line-height: 32px;
}
.badge-category.category-1 {
  background-color: #dcf6ee;
  color: #088451;
}
.badge-category.category-2 {
  background-color: #eaf4ff;
  color: #0166f3;
}
.badge-category.category-3 {
  background-color: #fef2f2;
  color: #de1a16;
}
.badge-category.category-4 {
  background-color: #e3e6ff;
  color: #4051e9;
}
.badge-base {
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 26px;
  padding: 0 8px;
  text-align: center;
}
.badge-base.primary {
  background-color: rgba(64, 81, 233, 0.1);
  color: #4051e9;
}
.badge-base.red {
  background-color: #ffefe9;
  color: #ea4916;
}
.badge-dot {
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 36px;
  padding: 0 16px;
}
.badge-dot .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  top: calc(50% - 4px);
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 4px;
}
.badge-dot.green {
  background-color: #e3fdfa;
  color: #06807a;
}
.badge-dot.green .cl-text::before {
  background-color: #06807a;
}
.badge-dot.blue {
  background-color: #eaf4ff;
  color: #0166f3;
}
.badge-dot.blue .cl-text::before {
  background-color: #0074ff;
}
.badge.badge-pill,
.badge-base.badge-pill {
  border-radius: 999px;
}
/* =====================
   태그
   ===================== */
.cl-container.btn-tag {
  background-color: #eaf4ff;
  border: 1px solid #c0daf8;
  border-radius: 999px;
  color: #4051e9;
  padding: 3.5px 9px;
}
.cl-container.btn-tag .cl-output {
  font-size: 15px;
  padding-right: 2px;
}
.cl-container.btn-tag .cl-button.btn-delete {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  background-image: url("../images/component/common/P_ico_x_md_24.svg");
}
.cl-container.btn-tag .cl-button.btn-delete:focus,
.cl-container.btn-tag .cl-button.btn-delete.cl-focus,
.cl-container.btn-tag .cl-button.btn-delete:not(.cl-disabled):hover,
.cl-container.btn-tag .cl-button.btn-delete:not(.cl-disabled).cl-activated,
.cl-container.btn-tag .cl-button.btn-delete:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.tag-wrap.small .cl-container.btn-tag {
  padding: 1px 7px;
}
.cl-container.tag-wrap.small .cl-container.btn-tag .cl-output {
  font-size: 14px;
}
.cl-container.tag-wrap.large .cl-container.btn-tag {
  padding: 9px 13px;
}
.cl-container.tag-wrap.large .cl-container.btn-tag .cl-output {
  font-size: 16px;
  padding-right: 6px;
}
.cl-button.btn-tag {
  background-color: #ffffff;
  border: 1px solid #c8c8c8;
  border-radius: 999px;
  color: #555555;
  padding: 0 11px;
}
.cl-button.btn-tag:not(.cl-disabled):hover,
.cl-button.btn-tag:not(.cl-disabled).cl-activated,
.cl-button.btn-tag:not(.cl-disabled):active {
  background-color: #ffffff;
  border-color: #c8c8c8;
  color: #555555;
  text-decoration: underline;
}
/* =====================
   이미지
   ===================== */
.cl-image.thumbnail.nodata {
  background: #f8f8f8 url("../images/component/common/bg_thumbnail.svg") no-repeat center;
}
/* =====================
   캘린더
   ===================== */
.cl-container.datepicker {
  background-color: #ffffff;
  border: 1px solid #e0e3e7;
  border-radius: 8px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.02), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
}
.cl-container.datepicker .cl-formlayout-horizontal-separator,
.cl-container.datepicker .cl-formlayout-vertical-separator {
  background-color: #e0e3e7;
}
.cl-container.datepicker .cl-container.calendar-body .cl-calendar {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.cl-container.datepicker .cl-container.calendar-body .cl-calendar.cl-focus {
  outline: none;
}
.cl-container.datepicker .cl-container.calendar-body .cl-listbox,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) {
  background-color: transparent;
  border: 0;
  border-radius: 0;
}
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list {
  padding: 3.5px;
}
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list .cl-listbox-item,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list .cl-listbox-item {
  border-radius: 8px;
  height: 36px;
  letter-spacing: 0.17px;
  padding: 0;
  text-align: center;
}
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list .cl-listbox-item .cl-text,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list .cl-listbox-item .cl-text {
  text-overflow: clip;
}
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list .cl-listbox-item:not(.cl-disabled):not(.cl-selected):focus,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list .cl-listbox-item:not(.cl-disabled):not(.cl-selected):focus,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list .cl-listbox-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list .cl-listbox-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list .cl-listbox-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list .cl-listbox-item:not(.cl-disabled):not(.cl-selected):hover {
  background-color: transparent;
  color: #2d2d2d;
}
.cl-container.datepicker .cl-container.calendar-body .cl-listbox .cl-listbox-list .cl-listbox-item.cl-selected,
.cl-container.datepicker .cl-container.calendar-body .cl-listbox:not(.cl-disabled) .cl-listbox-list .cl-listbox-item.cl-selected {
  background-color: #4051e9;
  color: #ffffff;
}
.cl-container.datepicker .cl-container.calendar-footer {
  padding: 8px;
}
.cl-container.datepicker .cl-container.calendar-footer .cl-button.btn-txt {
  color: #4051e9;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  padding: 8px;
  text-transform: uppercase;
}
/* =====================
   페이지 인덱서 (Pagination)
   ===================== */
.cl-container.pagination .cl-button.page-navi {
  background-color: transparent;
  border: 0;
  border-radius: 6px;
  color: #555555;
  font-weight: 400;
  padding: 0;
}
.cl-container.pagination .cl-button.page-navi .cl-text-wrapper {
  gap: 0;
}
.cl-container.pagination .cl-button.page-navi .cl-icon {
  width: 20px;
  height: 20px;
}
.cl-container.pagination .cl-button.page-navi.prev .cl-icon {
  background-image: url("../images/component/common/ico_page_prev.svg") !important;
}
.cl-container.pagination .cl-button.page-navi.next .cl-icon {
  background-image: url("../images/component/common/ico_page_next.svg") !important;
}
.cl-container.pagination .cl-button.page-navi.cl-disabled {
  color: #8e8e8e;
  opacity: 1;
}
.cl-container.pagination .cl-button.page-navi.cl-disabled.prev .cl-icon {
  background-image: url("../images/component/common/ico_page_prev_disabled.svg") !important;
}
.cl-container.pagination .cl-button.page-navi.cl-disabled.next .cl-icon {
  background-image: url("../images/component/common/ico_page_next_disabled.svg") !important;
}
/* =====================
   카드
   ===================== */
.cl-container.structured-list > .cl-layout > .cl-layout-content > .cl-layout-wrap > .cl-container {
  cursor: pointer;
}
.cl-container.structured-list .cl-container.structured-item {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  /*WN-PTL-BT-410T 카드 이미지 모바일 변경시 높이 292로 변경 되는 경우*/
}
@media (max-width: 360px) {
  .cl-container.structured-list .cl-container.structured-item.img-mobile-size-292 .cl-image {
    height: 292px;
  }
}
.cl-container.structured-list .cl-container.structured-item .cl-container.im-wrap {
  border-radius: 8px;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.im-wrap .badge {
  width: auto !important;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-tit {
  font-size: 19px;
  font-weight: 600;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-tit .cl-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  text-align: left;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit:focus,
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit.cl-focus,
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled):hover,
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled).cl-activated,
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit .cl-text {
  white-space: normal;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-button.c-tit.cl-focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-txt {
  color: #555555;
  font-size: 16px;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-txt .key {
  margin-right: 12px;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-txt .value {
  color: #2d2d2d;
  font-weight: 500;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-txt span.right {
  float: right;
}
.cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-body .cl-output.c-txt span.right.badge {
  margin-right: 0;
}
@media (max-width: 1023px) {
  .cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-btn > .cl-layout > .cl-layout-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: normal;
    gap: 0;
  }
  .cl-container.structured-list .cl-container.structured-item .cl-container.in .cl-container.card-btn > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    flex: 1;
  }
}
.cl-container.structured-list .cl-container.item-footer {
  background-color: #eaf4ff;
  border-radius: 12px;
  padding: 12px;
}
.cl-container.structured-list .cl-container.item-footer .cl-output {
  font-size: 17px;
  font-weight: 600;
}
.cl-container.structured-list .cl-container.item-footer .cl-output.sum {
  color: #4051e9;
}
.cl-container.structured-list.type2 .cl-container.structured-item {
  border: 1px solid #eeeeee;
  box-shadow: none;
}
.cl-container.structured-list.type2 .cl-container.structured-item .cl-output.cont-type {
  font-size: 17px;
}
.cl-container.structured-list.type2 .cl-container.structured-item .cl-container.c-info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first) {
  padding-left: 12px;
}
.cl-container.structured-list.type2 .cl-container.structured-item .cl-container.c-info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first)::before {
  content: "";
  position: absolute;
  top: calc(50% - 7px);
  left: 0;
  width: 1px;
  height: 14px;
  background-color: #dddddd;
}
.cl-container.structured-list.type2 .cl-container.structured-item .cl-container.c-info .cl-output {
  font-size: 16px;
}
.cl-container.info-box {
  background-color: #f4f7fb;
  border-radius: 8px;
}
.cl-container.info-box .cl-output {
  color: #555555;
}
/*자주 묻는 질문(QnA) 아코디언 스타일*/
.cl-accordion.qna .qna-tit {
  color: #717171;
  font-size: 16px;
  font-weight: 400;
  padding-right: 12px;
  display: inline-block;
  width: 142px !important;
}
@media (max-width: 1023px) {
  .cl-accordion.qna .qna-tit {
    display: block;
    padding-bottom: 12px;
  }
}
.cl-accordion.qna .qna-tit::before {
  content: "Q";
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background-color: #555;
  border-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  vertical-align: middle;
}
.cl-accordion.qna .cl-accordion-content {
  padding: 32px 24px 32px 60px !important;
  background: url("../images/component/common/ico_arr_down left_24.png") no-repeat top 32px left 24px;
}
.cl-accordion.qna .cl-accordion-content .cl-text::before {
  content: "A";
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  background-color: #4051E9;
  border-radius: 999px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  vertical-align: middle;
}
@media (max-width: 360px) {
  .cl-accordion.qna .cl-accordion-content {
    padding: 18px !important;
    background-image: none !important;
  }
  .cl-accordion.qna .cl-accordion-content .cl-text::before {
    display: none !important;
  }
}
/* =====================
   페이지 공통
   ===================== */
.cl-container.wrap {
  max-width: 1200px;
  margin: 0 auto;
}
.cl-container.wrap .cl-container.app-header {
  margin-bottom: 32px;
}
.cl-container.wrap .cl-container.cont-wrap .cl-container.content-tit-wrap .cl-output.tit {
  color: #1d1d1d;
  font-size: 21px;
  font-weight: 700;
}
.cl-container.wrap .cl-container.cont-wrap .cl-container.content-tit-wrap .cl-pageindexer .cl-pageindexer-index-area {
  padding: 0;
}
.cl-container.wrap .cl-container.cont-wrap .cl-container.content-tit-wrap .cl-pageindexer .cl-pageindexer-text {
  color: #1d1d1d;
  font-size: 17px;
  font-weight: 700;
}
.cl-container.wrap .cl-container.cont-wrap.in .cl-button.ico-prev {
  color: #555555;
}
@media (min-width: 1280px) {
  .cl-container.wrap .cl-container.cont-wrap .cl-container.box .cl-container.sch-list-top .cl-container.sch-sort .cl-combobox {
    background-color: #f1f2f5;
  }
}
@media (max-width: 1023px) {
  .cl-container.wrap .cl-container.cont-wrap {
    /* 모바일 */
  }
  .cl-container.wrap .cl-container.cont-wrap .cl-container.box.hide {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .cl-container.wrap .cl-container.cont-wrap .cl-container.box.hide .cl-container.sch-list-top .cl-container.sch-sort .cl-combobox {
    background-color: #ffffff;
    border: 0;
  }
}
@media (max-width: 1023px) {
  .cl-container.wrap .cl-container.btn-wrap .cl-layout-content.fill {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .cl-container.wrap .cl-container.btn-wrap .cl-layout-content.fill > .cl-layout-wrap {
    flex: 1;
  }
}
@media (max-width: 1279px) {
  .cl-container.wrap {
    margin: 0;
    max-width: 100%;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cl-container.wrap .cl-container.app-header {
    margin-bottom: 24px;
  }
}
@media (max-width: 1023px) {
  .cl-container.wrap .cl-container.app-header {
    margin-bottom: 24px;
  }
  .cl-container.wrap .cl-container.btn-wrap .cl-container > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    height: 44px !important;
  }
}
@media (max-width: 1023px) {
  .cl-container.pop-wrap .cl-container.pop-cont-wrap {
    /* 모바일 */
  }
  .cl-container.pop-wrap .cl-container.pop-cont-wrap .cl-container.box.hide {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
}
@media (max-width: 1023px) {
  .cl-container.pop-wrap .cl-container.pop-btn-wrap .cl-layout-content.fill {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .cl-container.pop-wrap .cl-container.pop-btn-wrap .cl-layout-content.fill > .cl-layout-wrap {
    flex: 1;
    height: 44px !important;
  }
}
.cl-container .cl-layout-content.flexbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
}
.cl-container .cl-layout-content.flexbox.col-3 > .cl-layout-wrap {
  width: calc(100% / 3 - 16px) !important;
}
.cl-container .cl-layout-content.flexbox.col-4 {
  gap: 16px;
}
.cl-container .cl-layout-content.flexbox.col-4 > .cl-layout-wrap {
  width: calc(100% / 4 - 12px) !important;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cl-container .cl-layout-content.flexbox.col-3 {
    gap: 16px;
  }
  .cl-container .cl-layout-content.flexbox.col-3 > .cl-layout-wrap {
    width: calc(100% / 2 - 8px) !important;
  }
}
@media (max-width: 1023px) {
  .cl-container .cl-layout-content.flexbox {
    gap: 16px;
  }
  .cl-container .cl-layout-content.flexbox[class*="col-"] > .cl-layout-wrap {
    width: 100% !important;
  }
}
.cl-container.flex-end > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: normal;
  gap: 0;
}
.cl-container.flex-end > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container.center > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: normal;
  gap: 0;
}
.cl-container.center > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container.fill > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: normal;
  gap: 0;
}
.cl-container.fill > .cl-layout > .cl-layout-content > .cl-layout-margin {
  display: none;
}
.cl-container.fill > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-last-row {
  flex: 1;
}
/* =====================
   스와이퍼
   ===================== */
.swiper-prev-button,
.swiper-next-button {
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 999px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  padding: 0;
}
.swiper-prev-button:not(.cl-disabled):hover,
.swiper-next-button:not(.cl-disabled):hover,
.swiper-prev-button.cl-focus,
.swiper-next-button.cl-focus,
.swiper-prev-button:not(.cl-disabled).cl-activated,
.swiper-next-button:not(.cl-disabled).cl-activated,
.swiper-prev-button:not(.cl-disabled):active,
.swiper-next-button:not(.cl-disabled):active {
  background-color: #ffffff;
  border-color: #dddddd;
}
.swiper-prev-button.cl-disabled,
.swiper-next-button.cl-disabled {
  background-color: #ffffff;
}
.swiper-prev-button {
  background-image: url("../images/component/common/ico_arr_left_md_24.svg");
}
.swiper-prev-button:not(.cl-disabled):hover,
.swiper-prev-button.cl-focus,
.swiper-prev-button:not(.cl-disabled).cl-activated,
.swiper-prev-button:not(.cl-disabled):active {
  background-image: url("../images/component/common/ico_arr_left_md_24.svg");
}
.swiper-next-button {
  background-image: url("../images/component/common/ico_arr_right_md_24.svg");
}
.swiper-next-button:not(.cl-disabled):hover,
.swiper-next-button.cl-focus,
.swiper-next-button:not(.cl-disabled).cl-activated,
.swiper-next-button:not(.cl-disabled):active {
  background-image: url("../images/component/common/ico_arr_right_md_24.svg");
}
.cl-pageindexer.swiper-pagination .cl-pageindexer-index-area {
  padding: 0;
}
.cl-pageindexer.swiper-pagination .cl-pageindexer-index {
  background-color: rgba(64, 81, 233, 0.3);
  border-radius: 3px;
  height: 8px;
  font-size: 0;
  margin: 0 3px;
}
.cl-pageindexer.swiper-pagination .cl-pageindexer-index.cl-selected {
  background-color: #4051e9;
}
.cl-container.todaySwiper-wrap .cl-output.nodata {
  border: 2px dashed #bfc7d0;
  border-radius: 16px;
  color: #8b929d;
  font-size: 19px;
  font-weight: 500;
  text-align: center;
}
.cl-container.todaySwiper-wrap .cl-output.nodata .cl-text::before {
  content: "";
  position: relative;
  display: block;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background: url("../images/content/ico_nodata_class.svg") no-repeat center;
  margin-bottom: 16px;
}
/* =====================
   검색 결과 영역
   ===================== */
.cl-container.sch-list-top .cl-output.tit {
  font-size: 21px;
  font-weight: 600;
}
.cl-container.sch-list-top .cl-container.sch-sort .cl-output.label {
  font-size: 16px;
  font-weight: 600;
}
.cl-container.sch-list-top .cl-container.sch-sort .cl-combobox:not(.normal) {
  background-color: #ffffff;
  border: 0;
  min-width: 160px;
}
@media (max-width: 1023px) {
  .cl-container.sch-list-top .cl-container.sch-sort .cl-combobox {
    min-width: 0;
  }
  .cl-container.sch-list-top .cl-container.button-group > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    height: 36px !important;
  }
}
.cl-output.sch-info {
  font-size: 19px;
  font-weight: 700;
}
.cl-output.sch-info .keyword {
  color: #4051e9;
}
@media (max-width: 1023px) {
  .cl-output.sch-info {
    font-size: 19px;
    font-weight: 700;
  }
  .cl-output.sch-info .keyword {
    font-weight: 700;
  }
}
.cl-container.sch-info .cl-output.tit,
.cl-container.sch-info .cl-checkbox.tit {
  color: #1d1d1d;
  font-size: 19px;
  font-weight: 700;
}
.cl-container.sch-info .cl-output.tit .keyword,
.cl-container.sch-info .cl-checkbox.tit .keyword {
  color: #4051e9;
  font-weight: 700;
}
.cl-container.sch-info .cl-output.count {
  color: #1d1d1d;
  font-size: 17px;
  padding-left: 2px;
}
.cl-container.sch-info .cl-output.count .keyword {
  color: #4051e9;
  font-weight: 700;
}
@media (max-width: 1023px) {
  .cl-container.sch-info .cl-output.tit {
    font-weight: 500;
  }
  .cl-container.sch-info .cl-output.count .keyword {
    font-size: 15px;
    font-weight: 700;
  }
}
/* =====================
   게시판 상세
   ===================== */
.cl-container.bbs .cl-container.bbs-top {
  background-color: #ffffff;
  border-radius: 16px;
}
.cl-container.bbs .cl-container.bbs-top .cl-output.tit {
  font-size: 24px;
  font-weight: 700;
}
.cl-container.bbs .cl-container.bbs-top .cl-output.tit .icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  margin-left: 8px;
  vertical-align: inherit;
}
.cl-container.bbs .cl-container.bbs-top .cl-output.tit .icon.new {
  background-image: url("../images/component/common/ico_new.svg");
}
.cl-container.bbs .cl-container.bbs-top .cl-output.tit .icon.lock {
  background-image: url("../images/content/ico_lock.svg");
}
.cl-container.bbs .cl-container.bbs-top .cl-container.info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first) {
  padding-left: 15px;
}
.cl-container.bbs .cl-container.bbs-top .cl-container.info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first)::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  left: 6px;
  width: 3px;
  height: 3px;
  background-color: #555555;
  border-radius: 999px;
}
.cl-container.bbs .cl-container.bbs-top .cl-container.info .cl-output:not(.badge) {
  color: #555555;
}
.cl-container.bbs .cl-container.bbs-top .cl-container.info .cl-output:not(.badge)[class*="ico-"] {
  padding-left: 26px;
}
.cl-container.bbs .cl-container.bbs-top .cl-container.info .cl-output.ico-person {
  background-image: url("../images/content/ico_person.svg");
}
.cl-container.bbs .cl-container.bbs-top .cl-container.info .cl-output.ico-calendar {
  background-image: url("../images/content/ico_calendar.svg");
}
.cl-container.bbs .cl-container.bbs-body {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.bbs .cl-container.bbs-body .cl-htmlsnippet {
  font-size: 17px;
  overflow: auto !important;
}
.cl-container.bbs .cl-container.bbs-body.reply {
  box-shadow: none;
}
.cl-container.bbs .cl-container.bbs-body.reply .cl-container.reply-top .cl-output.tit {
  font-size: 19px;
  font-weight: 500;
}
.cl-container.bbs .cl-container.bbs-body.reply .cl-container.reply-top .cl-output.tit .keyword {
  color: #4051e9;
  font-weight: 700;
}
.cl-container.bbs .cl-container.bbs-body.reply .cl-container.reply-top .cl-output.date {
  color: #555555;
  font-size: 16px;
}
.cl-container.bbs .cl-container.bbs-body.reply .cl-container.reply-body {
  background-color: #f4f7fb;
  border-radius: 8px;
}
.cl-container.bbs .cl-container.bbs-btm {
  background-color: #edf0f7;
  border-radius: 16px;
}
.cl-container.bbs .cl-container.bbs-btm .cl-output.nodata {
  color: #8e8e8e;
  font-size: 16px;
}
.cl-container.bbs .cl-container.bbs-btm .cl-formlayout-vertical-separator {
  background: linear-gradient(#c6c6c6, #c6c6c6) no-repeat center;
  background-size: 1px 20px;
}
.cl-container.bbs .cl-container.bbs-btm .cl-button.page-btn {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}
.cl-container.bbs .cl-container.bbs-btm .cl-button.page-btn:focus,
.cl-container.bbs .cl-container.bbs-btm .cl-button.page-btn.cl-focus,
.cl-container.bbs .cl-container.bbs-btm .cl-button.page-btn:not(.cl-disabled):hover,
.cl-container.bbs .cl-container.bbs-btm .cl-button.page-btn:not(.cl-disabled).cl-activated,
.cl-container.bbs .cl-container.bbs-btm .cl-button.page-btn:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.bbs .cl-container.bbs-btm .cl-button.article {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  color: #555555;
  font-size: 16px;
  font-weight: 400;
}
.cl-container.bbs .cl-container.bbs-btm .cl-button.article:focus,
.cl-container.bbs .cl-container.bbs-btm .cl-button.article.cl-focus,
.cl-container.bbs .cl-container.bbs-btm .cl-button.article:not(.cl-disabled):hover,
.cl-container.bbs .cl-container.bbs-btm .cl-button.article:not(.cl-disabled).cl-activated,
.cl-container.bbs .cl-container.bbs-btm .cl-button.article:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.bbs .cl-container.bbs-btm .cl-button.article .cl-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-container.bbs .cl-container.bbs-btm .cl-container.prev .cl-button.page-btn {
  background-image: url("../images/component/common/ico_arr_left_md_24.svg");
  background-position: left center;
  padding-left: 28px;
  text-align: left;
}
.cl-container.bbs .cl-container.bbs-btm .cl-container.next .cl-button.page-btn {
  background-image: url("../images/component/common/ico_arr_right_md_24.svg");
  background-position: right center;
  padding-right: 28px;
  text-align: right;
}
@media (max-width: 1279px) {
  .cl-container.bbs {
    /* 태블릿 & 모바일 */
  }
  .cl-container.bbs .cl-container.bbs-top .cl-output.tit {
    font-size: 19px;
  }
  .cl-container.bbs .cl-container.bbs-body .cl-container.btn-wrap > .cl-layout > .cl-layout-content > .cl-layout-wrap {
    height: 44px !important;
  }
}
.cl-container.bbs.in .cl-container.bbs-body .cl-container.bbs-top {
  border-bottom: 1px solid #dddddd;
  border-radius: 0;
  padding-bottom: 30px;
}
.cl-container.bbs.in .cl-container.bbs-body .cl-container.bbs-top .cl-container.profile .cl-output.name {
  color: #1d1d1d;
  font-size: 18px;
}
.cl-container.bbs.in .cl-container.bbs-body .cl-container.bbs-top .cl-container.profile .cl-output.name .keyword {
  font-weight: 700;
}
/* =====================
   클래스 관리
   ===================== */
.cl-container.weekly-calendar {
  background-color: #4051e9;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-output.tit {
  color: #ffffff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev:focus,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next:focus,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev.cl-focus,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next.cl-focus,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev:not(.cl-disabled):hover,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next:not(.cl-disabled):hover,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev:not(.cl-disabled).cl-activated,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next:not(.cl-disabled).cl-activated,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev:not(.cl-disabled):active,
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.prev {
  background-image: url("../images/component/common/W_ico_arr_left_md_20.svg");
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-header .cl-button.next {
  background-image: url("../images/component/common/W_ico_arr_right_md_20.svg");
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-content .cl-output.calendar-content-header {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-content .cl-container.calendar-content-day .cl-button {
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 400;
  padding: 0;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-content .cl-container.calendar-content-day.active .cl-button {
  background-color: #ffffff;
  color: #4051e9;
  font-weight: 700;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-content .cl-container.calendar-content-day .cl-container.dot-wrap > .cl-layout > .cl-layout-content > .cl-layout-wrap:nth-child(2) {
  opacity: 0.7;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-content .cl-container.calendar-content-day .cl-container.dot-wrap > .cl-layout > .cl-layout-content > .cl-layout-wrap:nth-child(3) {
  opacity: 0.3;
}
.cl-container.weekly-calendar .cl-container.calendar .cl-container.calendar-content .cl-container.calendar-content-day .cl-container.dot-wrap .cl-output {
  background-color: #ffffff;
  border-radius: 999px;
  line-height: 1;
}
.cl-container.weekly-calendar .cl-container.calendar-list {
  background-color: #ffffff;
  border-radius: 16px 16px 0 0;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-output.tit {
  color: #333333;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-output.tit .date {
  color: #4051e9;
  float: right;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-container.ul .cl-container.li .cl-output.time {
  color: #717171;
  font-size: 16px;
  padding-left: 9px;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-container.ul .cl-container.li .cl-output.time::before {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 1.5px);
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #c6c6c6;
  border-radius: 999px;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-container.ul .cl-container.li .cl-output.txt {
  font-size: 16px;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-output.nodata {
  color: #8e8e8e;
  font-size: 16px;
  font-weight: 500;
  height: 88px;
  text-align: center;
}
.cl-container.weekly-calendar .cl-container.calendar-list .cl-output.nodata .cl-text::before {
  content: "";
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("../images/content/ico_nodata_calendar.svg") no-repeat center;
  margin-right: 8px;
  vertical-align: middle;
}
.cl-container.card-today-class {
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
  border-radius: 16px;
}
.cl-container.card-today-class .cl-output.term {
  font-weight: 500;
}
.cl-container.card-today-class .cl-container.in .cl-container.card-body .cl-output.c-tit {
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
}
.cl-container.card-today-class .cl-container.in .cl-container.card-body .cl-output.ico-person {
  background-image: url("../images/content/ico_person.svg");
  background-position: left center;
  color: #2d2d2d;
  font-size: 15px;
  padding-left: 28px;
}
.cl-container.card-today-class .cl-container.in .cl-container.card-body .cl-output.ico-person .key {
  font-weight: 600;
  margin-right: 6px;
}
.cl-container.card-today-class .cl-container.in .cl-container.card-body .cl-output.ico-teacher {
  background-image: url("../images/content/ico_teacher.svg");
  background-position: left center;
  color: #2d2d2d;
  font-size: 15px;
  padding-left: 28px;
}
.cl-container.card-today-class .cl-container.in .cl-container.card-body .cl-output.ico-teacher .key {
  font-weight: 600;
  margin-right: 6px;
}
.cl-output.timetable {
  font-size: 14px;
  font-weight: 600;
}
.cl-output.timetable .time {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background-color: #f2effe;
  border-radius: 999px;
  color: #603fe9;
  margin: 0 4px;
}
.cl-container.card-class {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-class .cl-container.in .cl-output.c-tit {
  font-size: 19px;
  font-weight: 600;
}
.cl-container.card-class .cl-container.in .cl-image.im {
  background-color: #f4f7fb;
  border-radius: 999px;
}
.cl-container.card-class .cl-container.in .cl-output.c-info {
  color: #555555;
  font-weight: 500;
}
.cl-container.card-class .cl-container.in .cl-output.c-info .key {
  margin-right: 8px;
}
.cl-container.card-class .cl-container.in .cl-output.c-info .value {
  color: #2d2d2d;
}
.cl-container.card-class .cl-container.in .cl-output.c-info .ico-place {
  background: url("../images/content/ico_place.svg") no-repeat left center;
  color: #2d2d2d;
  font-weight: 600;
  padding-left: 24px;
}
.cl-container.card-course {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-course .cl-container.in .cl-output {
  font-size: 16px;
}
.cl-container.card-course .cl-container.in .cl-output .key {
  color: #555555;
  margin-right: 8px;
}
.cl-container.card-course .cl-container.in .cl-output .value {
  color: #2d2d2d;
  font-weight: 500;
}
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: 19px;
  font-weight: 600;
  text-align: left;
}
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit:focus,
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit.cl-focus,
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled):hover,
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled).cl-activated,
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-button.c-tit .cl-text {
  white-space: normal;
}
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-container.c-info .cl-output {
  font-size: 16px;
}
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-container.c-info .cl-output .key {
  color: #555555;
  margin-right: 8px;
}
.cl-container.card-course .cl-container.in .cl-container.card-body .cl-container.c-info .cl-output .value {
  color: #2d2d2d;
  font-weight: 500;
}
.cl-container.card-course .cl-container.in .cl-container.card-btn > .cl-layout > .cl-layout-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: normal;
  gap: 0;
}
.cl-container.card-course .cl-container.in .cl-container.card-btn > .cl-layout > .cl-layout-content > .cl-layout-wrap {
  flex: 1;
}
.cl-container.card-assign {
  background-color: #f4f7fb;
  border-radius: 16px;
}
.cl-container.card-assign .cl-container.in .cl-container.card-top {
  margin-bottom: 12px;
}
.cl-container.card-assign .cl-container.in .cl-container.card-top .cl-output.assignment {
  background-image: url("../images/component/common/ico_assignment.svg");
}
.cl-container.card-assign .cl-container.in .cl-container.card-body .cl-output.c-tit {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  min-height: 53px;
  vertical-align: top;
}
.cl-container.card-assign .cl-container.in .cl-container.card-body .cl-output.c-tit .cl-text {
  word-break: keep-all;
}
.cl-container.card-assign .cl-container.in .cl-container.c-btm .cl-output.c-date {
  color: #555555;
  font-size: 16px;
}
.cl-container.card-discussion {
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.card-body .badge-category,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.card-body .badge-category {
  border-radius: 4px;
  line-height: 24px;
  padding: 0 8px;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.card-body .cl-output.c-tit,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.card-body .cl-output.c-tit {
  font-size: 19px;
  font-weight: 500;
  padding-right: 24px;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.card-body .cl-textarea.c-tit,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.card-body .cl-textarea.c-tit {
  font-size: 19px;
  font-weight: 500;
  padding-right: 24px;
  background-color: #ffffff;
  color: #2d2d2d;
  border: 2px solid #4051e9 !important;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.card-body .cl-textarea.c-tit.cl-readonly,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.card-body .cl-textarea.c-tit.cl-readonly {
  border: 0px !important;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.c-btm .cl-output.c-info,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.c-btm .cl-output.c-info {
  font-weight: 500;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.c-btm .cl-output.c-date,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.c-btm .cl-output.c-date {
  color: #555555;
  padding-left: 10px;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.c-btm .cl-output.c-date::before,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.c-btm .cl-output.c-date::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #555555;
  border-radius: 999px;
}
.cl-container.card-discussion .cl-container.in .cl-container.comment .cl-container.c-btm .cl-button.btn-txt,
.cl-container.card-discussion .cl-container.in .cl-container.reply .cl-container.c-btm .cl-button.btn-txt {
  color: #4051e9;
  font-weight: 400;
}
.cl-container.card-discussion .cl-container.in .cl-container.reply {
  border-top: 1px solid #e4e4e4;
  padding-top: 24px;
}
.cl-container.card-discussion .cl-container.in .cl-container.textarea-wrap {
  background-color: #f1f2f5;
  border: 0;
  border-radius: 8px;
  padding: 16px;
}
.cl-container.card-discussion .cl-container.in .cl-container.textarea-wrap .cl-textarea {
  border: 0;
}
.cl-container.card-discussion .cl-container.in .cl-container.textarea-wrap .cl-textarea .cl-textarea-wrap {
  padding: 0;
}
.cl-container.card-discussion .cl-container.in .cl-container.textarea-wrap .cl-textarea.cl-focus {
  outline: none;
}
.cl-container.card-discussion .cl-container.in .cl-container.textarea-wrap .cl-container.btn-wrap .cl-button {
  padding: 0 12px;
}
.cl-container.card-discussion .cl-container.in .cl-container.textarea-wrap:focus-within {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-container.card-memo {
  background-color: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-body .cl-output.c-tit {
  font-size: 19px;
  font-weight: 500;
  padding-right: 24px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-body .cl-output.c-txt {
  color: #555555;
  font-size: 17px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-body .cl-container.c-btm .cl-output.c-info {
  font-weight: 500;
}
.cl-container.card-memo .cl-container.in .cl-container.card-body .cl-container.c-btm .cl-output.c-date {
  color: #555555;
  padding-left: 10px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-body .cl-container.c-btm .cl-output.c-date::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  left: 0;
  width: 3px;
  height: 3px;
  background-color: #555555;
  border-radius: 999px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-body .cl-container.c-btm .cl-button.btn-txt {
  color: #4051e9;
  font-weight: 400;
}
.cl-container.card-memo .cl-container.in .cl-container.card-btm .cl-output.ico-memo {
  background-image: url("../images/content/ico_memo.svg");
  padding-left: 30px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-btm .cl-output.ico-memo .key {
  font-weight: 500;
  margin-right: 6px;
}
.cl-container.card-memo .cl-container.in .cl-container.card-btm .cl-output.ico-memo .value {
  color: #555555;
}
.cl-container.student-list {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #eeeeee;
}
.cl-container.student-list .cl-container.li {
  border-radius: 8px;
  padding: 12px;
}
.cl-container.student-list .cl-container.li .cl-checkbox {
  font-weight: 400;
}
.cl-container.student-list .cl-container.li .cl-output {
  font-size: 16px;
}
.cl-container.student-list .cl-container.li.active {
  background-color: #eaf4ff;
}
.cl-container.timetable-form .cl-output.subtit {
  background-image: url("../images/component/common/ico_book.svg");
  color: #1d1d1d;
  padding-left: 32px;
}
.cl-container.timetable-form .cl-output.tit {
  color: #1d1d1d;
  font-size: 24px;
  font-weight: 700;
}
.cl-container.timetable-form .cl-container.form .label {
  padding-right: 0;
}
/* =====================
   단말관리
   ===================== */
.cl-container.card-device {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-device .cl-container.in .cl-output.c-tit {
  font-size: 19px;
  font-weight: 600;
}
.cl-container.card-device .cl-container.in .cl-container.d-box {
  background-color: #f4f7fb;
  border-radius: 8px;
  padding: 16px 20px;
}
.cl-container.card-device .cl-container.in .cl-container.d-box .cl-output {
  font-size: 14px;
  font-weight: 600;
}
.cl-container.card-device .cl-container.in .cl-container.d-box .cl-output.text-green {
  color: #077045;
}
.cl-container.card-device .cl-container.in .cl-container.d-box .cl-output.text-gray {
  color: #717171;
}
.cl-container.card-device .cl-container.in .cl-container.d-box .cl-output.text-blue {
  color: #0166f3;
}
.cl-container.card-device .cl-container.in .cl-container.d-box .cl-output.text-red {
  color: #de1a16;
}
.cl-container.card-device .cl-container.in .cl-container.os-box .cl-output {
  background-repeat: no-repeat;
  background-position: left center;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  padding-left: 36px;
}
.cl-container.card-device .cl-container.in .cl-container.os-box .cl-output.android {
  background-image: url("../images/content/android.svg");
}
.cl-container.card-device .cl-container.in .cl-container.os-box .cl-output.chrome {
  background-image: url("../images/content/chrome.svg");
}
.cl-container.card-device .cl-container.in .cl-container.os-box .cl-output.ios {
  background-image: url("../images/content/iOS.svg");
}
.cl-container.card-device .cl-container.in .cl-container.os-box .cl-output.windows {
  background-image: url("../images/content/windows.svg");
}
.cl-container.card-sync {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-sync .cl-container.in .cl-output.name {
  font-size: 17px;
  font-weight: 600;
}
.cl-container.card-sync .cl-container.in .cl-output.name .email {
  color: #717171;
  font-weight: 400;
}
.cl-container.card-sync .cl-container.in .cl-output.name .spacing {
  padding-left: 12px;
}
.cl-container.card-sync .cl-container.in .cl-output.serial {
  font-size: 16px;
  font-weight: 600;
  padding-left: 28px;
}
.cl-container.card-sync .cl-container.in .cl-output.serial.android {
  background-image: url("../images/content/android.svg");
}
.cl-container.card-sync .cl-container.in .cl-output.serial.chrome {
  background-image: url("../images/content/chrome.svg");
}
.cl-container.card-sync .cl-container.in .cl-output.serial.ios {
  background-image: url("../images/content/iOS.svg");
}
.cl-container.card-sync .cl-container.in .cl-output.serial.windows {
  background-image: url("../images/content/windows.svg");
}
.cl-container.card-sync .cl-container.in .cl-container.c-info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-last) {
  padding-right: 12px;
}
.cl-container.card-sync .cl-container.in .cl-container.c-info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-last)::after {
  content: "";
  position: absolute;
  display: block;
  top: calc(50% - 7px);
  right: 0;
  width: 1px;
  height: 14px;
  background-color: #c9cdd2;
}
.cl-container.card-sync .cl-container.in .cl-container.c-info .cl-output {
  font-size: 16px;
}
.cl-container.card-data {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-data .cl-container.in .cl-output.name {
  font-size: 19px;
  font-weight: 600;
}
.cl-container.card-data .cl-container.in .cl-output.name .email {
  color: #717171;
  font-weight: 400;
  margin-left: 10px;
}
/* =====================
   공지사항
   ===================== */
.cl-container.card-notice {
  background-color: #ffffff;
  border-radius: 12px;
}
.cl-container.card-notice .cl-button.c-tit {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}
.cl-container.card-notice .cl-button.c-tit:focus,
.cl-container.card-notice .cl-button.c-tit.cl-focus,
.cl-container.card-notice .cl-button.c-tit:not(.cl-disabled):hover,
.cl-container.card-notice .cl-button.c-tit:not(.cl-disabled).cl-activated,
.cl-container.card-notice .cl-button.c-tit:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.card-notice .cl-button.c-tit .cl-text {
  white-space: normal;
}
.cl-container.card-notice .cl-button.c-tit.cl-focus {
  outline-offset: -2px;
  outline: 2px solid #00cbde;
}
.cl-container.card-notice .cl-button.c-tit.new .cl-text::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/component/common/ico_new.svg") no-repeat center;
  background-size: 20px;
  vertical-align: middle;
  margin-left: 8px;
}
.cl-container.card-notice .cl-button.c-tit.lock .cl-text::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url("../images/content/ico_lock.svg") no-repeat center;
  background-size: 20px;
  vertical-align: middle;
  margin-left: 8px;
}
.cl-container.card-notice .cl-output.sub-tit {
  color: #717171 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 150%;
  /* 24px */
}
.cl-container.card-notice .cl-container.info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first) {
  padding-left: 15px;
}
.cl-container.card-notice .cl-container.info > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first)::before {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  left: 6px;
  width: 3px;
  height: 3px;
  background-color: #555555;
  border-radius: 999px;
}
.cl-container.card-notice .cl-container.info .cl-output:not(.badge) {
  color: #555555;
}
.cl-container.card-notice .cl-container.info .cl-output:not(.badge)[class*="ico-"] {
  padding-left: 26px;
}
.cl-container.card-notice .cl-container.info .cl-output.ico-person {
  background-image: url("../images/content/ico_person.svg");
}
.cl-container.card-notice .cl-container.info .cl-output.ico-calendar {
  background-image: url("../images/content/ico_calendar.svg");
}
.cl-container.card-statistics {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-statistics .cl-output.c-tit {
  color: #1d1d1d;
  font-size: 17px;
  font-weight: 700;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li {
  padding: 12px 0 12px 12px;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li > .cl-layout > .cl-layout-content > .cl-layout-wrap:not(.cl-first-row) {
  border-top: 1px solid #eeeeee;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li .cl-output.rank {
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li .cl-output.txt {
  font-size: 17px;
  font-weight: 500;
  padding: 0 8px;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li .cl-output.rate {
  background-color: #f5f5f5;
  border-radius: 6px;
  color: #555555;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li.top .cl-output.rate {
  font-weight: 700;
}
.cl-container.card-statistics .cl-container.top-list .cl-container.li.top.cl-first-row .cl-output.rank {
  border: 0;
  color: #ffffff;
  font-weight: 700;
}
.cl-container.card-statistics .cl-container.top-list.primary > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row .cl-container.li .cl-output.rank {
  background-color: #4051e9;
}
.cl-container.card-statistics .cl-container.top-list.primary .cl-container.li .cl-output.rank {
  color: #4051e9;
}
.cl-container.card-statistics .cl-container.top-list.primary .cl-container.li.top .cl-output.rate {
  background-color: #ebf6ff;
  color: #4051e9;
}
.cl-container.card-statistics .cl-container.top-list.purple > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row .cl-container.li .cl-output.rank {
  background-color: #7553ed;
}
.cl-container.card-statistics .cl-container.top-list.purple .cl-container.li .cl-output.rank {
  color: #7553ed;
}
.cl-container.card-statistics .cl-container.top-list.purple .cl-container.li.top .cl-output.rate {
  background-color: #f4f2fe;
  color: #7553ed;
}
.cl-container.card-statistics .cl-container.top-list.green > .cl-layout > .cl-layout-content > .cl-layout-wrap.cl-first-row .cl-container.li .cl-output.rank {
  background-color: #008270;
}
.cl-container.card-statistics .cl-container.top-list.green .cl-container.li .cl-output.rank {
  color: #008270;
}
.cl-container.card-statistics .cl-container.top-list.green .cl-container.li.top .cl-output.rate {
  background-color: #f0fcf8;
  color: #008270;
}
.cl-container.card-statistics .cl-container.cont-list .cl-output.key {
  color: #717171;
  font-size: 16px;
  font-weight: 500;
}
.cl-container.card-statistics .cl-container.cont-list .cl-output.value {
  font-size: 16px;
}
.cl-container.card-statistics .cl-container.cont-list .cl-output.value .keyword {
  font-size: 21px;
  font-weight: 600;
}
.cl-container.card-statistics .cl-container.progress-list .cl-output.tit {
  font-size: 17px;
  font-weight: 700;
}
.cl-container.card-statistics .cl-container.progress-list .cl-output.tit .keyword {
  color: #4051e9;
  font-size: 19px;
  font-weight: 700;
  float: right;
}
.cl-container.card-statistics .cl-container.progress-list .cl-container.progress-wrap .cl-progress {
  background-color: rgba(64, 81, 233, 0.12);
  border-radius: 999px;
  overflow: visible !important;
}
.cl-container.card-statistics .cl-container.progress-list .cl-container.progress-wrap .cl-progress > * {
  overflow: visible !important;
}
.cl-container.card-statistics .cl-container.progress-list .cl-container.progress-wrap .cl-progress .cl-progress-bar {
  background-color: #4051e9;
  border-radius: 999px;
  box-shadow: 0 3px 4px 0 rgba(64, 81, 233, 0.2);
}
.cl-container.card-statistics .cl-container.progress-list .cl-container.progress-wrap .cl-container.tick .cl-output {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.cl-container.card-statistics .cl-container.progress-list .cl-container.progress-wrap .cl-container.tick .cl-output.active {
  background-color: #ffffff;
}
.cl-container.card-statistics .cl-container.total {
  background-color: #f5f5f5;
  border-radius: 12px;
  padding: 20px 16px;
}
.cl-container.card-statistics .cl-container.total .cl-output.label {
  background: url("../images/content/P_ico_person.svg") no-repeat left center;
  font-size: 17px;
  font-weight: 700;
  padding-left: 24px;
}
.cl-container.card-statistics .cl-container.total .cl-output.value {
  font-size: 17px;
  font-weight: 700;
}
.cl-container.card-statistics .cl-container.total .cl-output.value .keyword {
  color: #4051e9;
}
.cl-container.card-status {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.card-status .cl-output.c-tit {
  font-size: 21px;
  font-weight: 700;
}
.cl-container.card-status .cl-container.status-list {
  border: 1px solid #eeeeee;
  border-radius: 8px;
}
.cl-container.card-status .cl-container.status-list .cl-output.tit {
  font-size: 17px;
  font-weight: 700;
}
.cl-container.card-status .cl-container.status-list .cl-output.tit .keyword {
  font-size: 19px;
  font-weight: 700;
  float: right;
}
.cl-container.card-status .cl-container.status-list .cl-container.progress-wrap .cl-progress {
  background-color: rgba(64, 81, 233, 0.12);
  border-radius: 999px;
  overflow: visible !important;
}
.cl-container.card-status .cl-container.status-list .cl-container.progress-wrap .cl-progress > * {
  overflow: visible !important;
}
.cl-container.card-status .cl-container.status-list .cl-container.progress-wrap .cl-progress .cl-progress-bar {
  border-radius: 999px;
  box-shadow: 0 3px 4px 0 rgba(64, 81, 233, 0.2);
}
.cl-container.card-status .cl-container.status-list .cl-container.progress-wrap .cl-container.tick .cl-output {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}
.cl-container.card-status .cl-container.status-list .cl-container.progress-wrap .cl-container.tick .cl-output.active {
  background-color: #ffffff;
}
.cl-container.card-status .cl-container.status-list .cl-container.li {
  padding: 12px 0;
}
.cl-container.card-status .cl-container.status-list .cl-container.li.primary .cl-output.tit .keyword {
  color: #4051e9;
}
.cl-container.card-status .cl-container.status-list .cl-container.li.primary .cl-progress .cl-progress-bar {
  background-color: #4051e9;
}
.cl-container.card-status .cl-container.status-list .cl-container.li.purple .cl-output.tit .keyword {
  color: #7557f2;
}
.cl-container.card-status .cl-container.status-list .cl-container.li.purple .cl-progress .cl-progress-bar {
  background-color: #7557f2;
}
.cl-container.card-status .cl-container.status-list .cl-container.li.green .cl-output.tit .keyword {
  color: #009984;
}
.cl-container.card-status .cl-container.status-list .cl-container.li.green .cl-progress .cl-progress-bar {
  background-color: #009984;
}
.cl-container.card-status .cl-container.best-list .cl-container.li {
  background-color: #f4f5fe;
  border-radius: 8px;
  padding: 24px;
}
.cl-container.card-status .cl-container.best-list .cl-container.li .cl-output.badge {
  background-color: #0166f3;
  color: #ffffff;
  padding: 0 8px;
}
.cl-container.card-status .cl-container.best-list .cl-container.li .cl-output.txt {
  font-size: 16px;
  font-weight: 600;
  padding: 0 12px;
}
.cl-container.card-status .cl-container.best-list .cl-container.li .cl-output.class {
  color: #4051e9;
  font-size: 16px;
  font-weight: 700;
}
.cl-container.card-status.type2 .cl-output.c-tit {
  font-size: 19px;
}
.cl-container.card-status.type2 .cl-container.user {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 24px;
}
.cl-container.card-status.type2 .cl-container.user .cl-output.school {
  font-size: 17px;
  font-weight: 500;
}
.cl-container.card-status.type2 .cl-container.user .cl-output.name {
  font-size: 17px;
}
.cl-container.card-status.type2 .cl-container.user .cl-output.name .keyword {
  font-size: 21px;
  font-weight: 700;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-output.txt {
  color: #555555;
  font-size: 17px;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.li {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 16px 24px;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.li .cl-output.value {
  color: #4051e9;
  font-size: 17px;
  font-weight: 700;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.li .cl-output.dot {
  font-size: 17px;
  font-weight: 500;
  padding-left: 16px;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.li .cl-output.dot::before {
  content: "•";
  position: absolute;
  top: 0;
  left: 0;
  color: inherit;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.activity {
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 24px;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.activity .cl-output.txt {
  font-weight: 500;
  padding-left: 32px;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.activity .cl-output.value {
  font-size: 19px;
  font-weight: 500;
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.activity.memo .cl-output.txt {
  background-image: url("../images/component/common/ico_memo.svg");
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.activity.question .cl-output.txt {
  background-image: url("../images/component/common/ico_question.svg");
}
.cl-container.card-status.type2 .cl-container.study-list .cl-container.activity.discussion .cl-output.txt {
  background-image: url("../images/component/common/ico_assignment.svg");
}
/* =====================
   헬프 센터
   ===================== */
.cl-container.card-article {
  background-color: #ffffff;
  border-radius: 16px;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-output.c-tit {
  font-size: 19px;
  font-weight: 700;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-output.c-tit.new .cl-text::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../images/component/common/ico_new.svg") no-repeat center;
  vertical-align: middle;
  margin-left: 8px;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: inherit;
  padding: 0;
  color: #2d2d2d;
  font-size: 19px;
  font-weight: 700;
  text-align: left;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit:focus,
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit.cl-focus,
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled):hover,
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled).cl-activated,
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit:not(.cl-disabled):active {
  background-color: transparent;
  color: inherit;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit .cl-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-button.c-tit.new .cl-text::after {
  content: "";
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../images/component/common/ico_new.svg") no-repeat center;
  vertical-align: middle;
  margin-left: 8px;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-output.c-txt {
  color: #555555;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-output.ico-viewer {
  background-image: url("../images/content/ico_viewer.svg");
  background-position: left center;
  color: #555555;
  padding-left: 26px;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-output.ico-like {
  background-image: url("../images/content/ico_like.svg");
  background-position: left center;
  color: #555555;
  padding-left: 26px;
}
.cl-container.card-article .cl-container.in .cl-container.card-body .cl-output.ico-bookmark {
  background-image: url("../images/content/ico_bookmark.svg");
  background-position: left center;
  color: #555555;
  padding-left: 26px;
}
/* =====================
   마이 페이지
   ===================== */
.cl-container.mypage .cl-container.profile {
  background-color: #4051e9;
  border-radius: 16px;
  padding: 60px 40px 40px;
}
.cl-container.mypage .cl-container.profile .cl-container.im-wrap {
  border: 3px solid #53bdff;
  border-radius: 999px;
}
.cl-container.mypage .cl-container.profile .cl-output.name {
  color: #ffffff;
  font-size: 19px;
  font-weight: 700;
}
.cl-container.mypage .cl-container.profile .cl-output.email {
  color: #ffffff;
}
.cl-container.mypage .cl-container.profile .cl-output.email .key {
  background: url("../images/content/ico_info_email.svg") no-repeat left center;
  font-size: 16px;
  padding-left: 28px;
}
.cl-container.mypage .cl-container.profile .cl-output.email .value {
  display: block;
  font-size: 17px;
  font-weight: 500;
}
.cl-container.mypage .cl-container.profile .cl-output.form-field {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
}
.cl-container.mypage .cl-container.profile .cl-output.form-field .key {
  color: #555555;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 28px;
}
.cl-container.mypage .cl-container.profile .cl-output.form-field .value {
  float: right;
  font-size: 17px;
  font-weight: 500;
}
.cl-container.mypage .cl-container.profile .cl-output.form-field.user .key {
  background-image: url("../images/content/ico_info_user.svg");
}
.cl-container.mypage .cl-container.profile .cl-output.form-field.birth .key {
  background-image: url("../images/content/ico_info_date.svg");
}
.cl-container.mypage .cl-container.profile .cl-output.form-field.phone .key {
  background-image: url("../images/content/ico_info_phone.svg");
}
.cl-container.mypage .cl-container.card-wrap .cl-output.tit {
  font-weight: 600;
  font-size: 21px;
  color: #1d1d1d;
  font-weight: 700;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-output.info {
  font-size: 16px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-container.account {
  background: url("../images/content/ico_account.svg") no-repeat left center;
  padding-left: 64px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-container.account .cl-output.label {
  color: #555555;
  font-size: 17px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-container.account .cl-output.value {
  font-weight: 700;
  font-size: 18px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-button.tertiary.ico-pw {
  border-radius: 999px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-button.tertiary.ico-pw .cl-text-wrapper {
  gap: 4px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-button.tertiary.ico-pw .cl-icon {
  background-image: url("../images/content/ico_pw_set.svg") !important;
  width: 16px;
  height: 16px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-container.form-user .cl-output {
  font-size: 17px;
}
.cl-container.mypage .cl-container.card-wrap .cl-container.card .cl-container.form-user .cl-output.label {
  color: #555555;
  line-height: 1.4;
}
/* =====================
   이용 문의 상단 글쓰기 버튼 영역
   ===================== */
.cl-container.card-write {
  background-color: #EDF0F7;
  border-radius: 16px;
  padding: 24px;
}
@media (max-width: 768px) {
  .cl-container.card-write {
    padding: 18px;
  }
}
.cl-container.card-write .cl-output .cl-text {
  color: #2D2D2D;
  font-size: 19px;
  font-weight: 600;
}
.cl-container.card-write .cl-output .cl-text::before {
  content: "";
  background: url("../images/content/ico_question.png") no-repeat;
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
@media (max-width: 768px) {
  .cl-container.card-write .cl-output .cl-text {
    padding-left: 32px;
    /* 이미지 + 여백 */
    text-indent: -32px;
    /* 첫 줄은 다시 원래 위치로 */
  }
}
.cl-container.card-write .cl-button.ico-write .cl-icon {
  background-image: url("../images/content/W_ico_edit_20.png") !important;
  width: 20px;
  height: 20px;
}
/* =====================
   과제 제출 채점 영역
   ===================== */
.cl-container.card-homework-grade {
  background-color: #F6F8FB;
  border-radius: 12px;
  padding: 30px;
}
.cl-container.card-homework-grade .cl-formlayout-vertical-separator,
.cl-container.card-homework-grade .cl-formlayout-horizontal-separator {
  /* 구분 선 스타일 */
  background-color: #ddd;
}
.cl-container.card-homework-grade .cl-image.im {
  background-color: #DADADA;
  border-radius: 999px;
}
.cl-container.card-homework-grade .cl-output.homework-info {
  color: #1D1D1D;
  font-size: 19px;
  font-weight: 400;
  line-height: 150%;
}
.cl-container.card-homework-grade .cl-output.comment {
  color: #2D1D2D;
  font-size: 17px;
  font-weight: 400;
}
/************************************************
 * 웹접근성 속성 확인영역 스타일 설정
 ************************************************/
span.wa-area {
  position: absolute;
  top: 0px;
  right: 0px;
  border-bottom: 5px solid transparent;
  border-top: 5px solid #ff1a09;
  border-left: 5px solid transparent;
  border-right: 5px solid #ff1a09;
  cursor: pointer;
}
span.wa-check-handle {
  position: absolute;
  font-size: 17px;
  text-align: center;
  vertical-align: middle;
  background-color: #108912;
  background-image: url("../images/icon/check-mark.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  top: 0px;
  left: 0px;
  width: 18px;
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
}
span.wa-uncheck-handle {
  position: absolute;
  font-size: 17px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  background-color: #EE0000;
  background-image: url("../images/icon/exclamation-mark.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 13px 13px;
  top: 0px;
  left: 0px;
  width: 18px;
  height: 20px;
  border-radius: 2px;
  cursor: pointer;
}
.cl-output.wa-info-checked {
  font-size: 12px;
  color: #ffffff;
  border: 1px solid #108912;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #108912;
  padding: 0px 3px;
  width: auto;
  height: 20px auto;
}
.cl-output.wa-info-unchecked {
  font-size: 12px;
  color: #ffffff;
  border: 1px solid #EE0000;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: #EE0000;
  padding: 0px 3px;
  width: auto;
  height: 20px auto;
}
.wa-checked {
  border: 1px dashed #108912 !important;
}
.wa-unchecked {
  border: 1px dashed #EE0000 !important;
}
.cl-grid .cl-grid-row:not(.cl-viewing) .wa-checked-grid {
  border: 1px dashed #108912 !important;
}
.cl-grid .cl-grid-row:not(.cl-viewing) .wa-unchecked-grid {
  border: 1px dashed #EE0000 !important;
}
/************************************************
 * 공통 스타일시트
 ************************************************/
/************************************************
 * 공통 변수 스타일시트 임포트
 ************************************************/
/************************************************
 * font-family
 ************************************************/
.font-serif {
  font-family: "Pretendard GOV", sans-serif;
}
.font-base {
  font-family: "Pretendard GOV", sans-serif;
}
/************************************************
 * font-size
 ************************************************/
/************************************************
 * font-smoothing
 ************************************************/
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.subpixel-antialiased {
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}
/************************************************
 * font-style
 ************************************************/
.italic {
  font-style: italic;
}
.not-italic {
  font-style: normal;
}
/************************************************
 * font-weight
 ************************************************/
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
/************************************************
 * letter-spacing
 ************************************************/
.tracking-tighter .cl-text {
  letter-spacing: -0.05em;
}
.tracking-tight .cl-text {
  letter-spacing: -0.025em;
}
.tracking-normal .cl-text {
  letter-spacing: 0em;
}
.tracking-wide .cl-text {
  letter-spacing: 0.025em;
}
.tracking-wider .cl-text {
  letter-spacing: 0.05em;
}
.tracking-widest .cl-text {
  letter-spacing: 0.1em;
}
/************************************************
 * line-clamp
 ************************************************/
.line-clamp-1 .cl-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 .cl-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-3 .cl-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp-4 .cl-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.line-clamp-5 .cl-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
/************************************************
 * line-height
 ************************************************/
.leading-3 .cl-text {
  line-height: 0.75rem;
  /* 12px */
}
.leading-4 .cl-text {
  line-height: 1rem;
  /* 16px */
}
.leading-5 .cl-text {
  line-height: 1.25rem;
  /* 20px */
}
.leading-6 .cl-text {
  line-height: 1.5rem;
  /* 24px */
}
.leading-7 .cl-text {
  line-height: 1.75rem;
  /* 28px */
}
.leading-8 .cl-text {
  line-height: 2rem;
  /* 32px */
}
.leading-9 .cl-text {
  line-height: 2.25rem;
  /* 36px */
}
.leading-10 .cl-text {
  line-height: 2.5rem;
  /* 40px */
}
.leading .cl-text {
  line-height: 1;
}
.leading-tight .cl-text {
  line-height: 1.25;
}
.leading-snug .cl-text {
  line-height: 1.375;
}
.leading-normal .cl-text {
  line-height: 1.5;
}
.leading-relaxed .cl-text {
  line-height: 1.625;
}
.leading-loose .cl-text {
  line-height: 2;
}
/************************************************
 * text-align
 ************************************************/
.text-left,
.text-left .cl-text {
  text-align: left;
}
.text-center,
.text-center .cl-text {
  text-align: center;
}
.text-right,
.text-right .cl-text {
  text-align: right;
}
.text-justify,
.text-justify .cl-text {
  text-align: justify;
}
.text-start,
.text-start .cl-text {
  text-align: start;
}
.text-end,
.text-end .cl-text {
  text-align: end;
}
.align-baseline {
  vertical-align: baseline;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.align-bottom {
  vertical-align: bottom;
}
.align-text-top {
  vertical-align: text-top;
}
.align-text-bottom {
  vertical-align: text-bottom;
}
.align-sub {
  vertical-align: sub;
}
.align-super {
  vertical-align: super;
}
/************************************************
 * text-color
 ************************************************/
.text-inherit {
  color: inherit;
}
.text-transparent {
  color: transparent;
}
.text-base {
  color: #2d2d2d;
}
.text-gray-5 {
  color: #e0e3e7;
}
.text-gray-10 {
  color: #c9cdd2;
}
.text-gray-20 {
  color: #aaafb6;
}
.text-gray-30 {
  color: #a0a6b1;
}
.text-gray-40 {
  color: #7f8791;
}
.text-gray-50 {
  color: #626974;
}
.text-gray-60 {
  color: #555b65;
}
.text-gray-70 {
  color: #494c55;
}
.text-gray-80 {
  color: #3a3c43;
}
.text-gray-90 {
  color: #2c2d31;
}
.text-gray-95 {
  color: #212227;
}
.text-muted {
  color: #555555;
}
.text-primary {
  color: #4051e9;
}
.text-primary-5 {
  color: #dde0fb;
}
.text-primary-10 {
  color: #c8ccf7;
}
.text-primary-20 {
  color: #b3b8f3;
}
.text-primary-30 {
  color: #8e97ec;
}
.text-primary-40 {
  color: #6976e4;
}
.text-primary-50 {
  color: #4051e9;
}
.text-primary-60 {
  color: #3546d3;
}
.text-primary-70 {
  color: #2a3bbc;
}
.text-primary-80 {
  color: #1f30a6;
}
.text-primary-90 {
  color: #142590;
}
.text-primary-95 {
  color: #0a1b7a;
}
.text-secondary {
  color: #494c55;
}
.text-info {
  color: #0074ff;
}
.text-success {
  color: #09a873;
}
.text-warning {
  color: #ffb800;
}
.text-danger {
  color: #de3737;
}
.text-red {
  color: #ff1a09;
}
.text-orange {
  color: #ff6c61;
}
.text-yellow {
  color: #ffd255;
}
.text-green {
  color: #27c590;
}
.text-teal {
  color: #009984;
}
.text-cyan {
  color: #53bdff;
}
.text-blue {
  color: #0166f3;
}
.text-indigo {
  color: #232ea3;
}
.text-purple {
  color: #7557f2;
}
.text-pink {
  color: #ff1493;
}
.text-white {
  color: #ffffff;
}
.text-black {
  color: #000000;
}
.text-gray {
  color: #717171;
}
.text-dark {
  color: #2e2e2e;
}
/************************************************
 * text-decoration
 ************************************************/
.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.line-through {
  text-decoration-line: line-through;
}
.no-underline {
  text-decoration-line: none;
}
.decoration-inherit {
  text-decoration-color: inherit;
}
.decoration-transparent {
  text-decoration-color: transparent;
}
.decoration-base {
  text-decoration-color: #2d2d2d;
}
.decoration-gray-5 {
  text-decoration-color: #e0e3e7;
}
.decoration-gray-10 {
  text-decoration-color: #c9cdd2;
}
.decoration-gray-20 {
  text-decoration-color: #aaafb6;
}
.decoration-gray-30 {
  text-decoration-color: #a0a6b1;
}
.decoration-gray-40 {
  text-decoration-color: #7f8791;
}
.decoration-gray-50 {
  text-decoration-color: #626974;
}
.decoration-gray-60 {
  text-decoration-color: #555b65;
}
.decoration-gray-70 {
  text-decoration-color: #494c55;
}
.decoration-gray-80 {
  text-decoration-color: #3a3c43;
}
.decoration-gray-90 {
  text-decoration-color: #2c2d31;
}
.decoration-gray-95 {
  text-decoration-color: #212227;
}
.decoration-gray-98 {
  text-decoration-color: #161619;
}
.decoration-gray-99 {
  text-decoration-color: #0d0d0e;
}
.decoration-primary {
  text-decoration-color: #4051e9;
}
.decoration-secondary {
  text-decoration-color: #494c55;
}
.decoration-info {
  text-decoration-color: #0074ff;
}
.decoration-success {
  text-decoration-color: #09a873;
}
.decoration-warning {
  text-decoration-color: #ffb800;
}
.decoration-danger {
  text-decoration-color: #de3737;
}
.decoration-red {
  text-decoration-color: #ff1a09;
}
.decoration-orange {
  text-decoration-color: #ff6c61;
}
.decoration-yellow {
  text-decoration-color: #ffd255;
}
.decoration-green {
  text-decoration-color: #27c590;
}
.decoration-teal {
  text-decoration-color: #009984;
}
.decoration-cyan {
  text-decoration-color: #53bdff;
}
.decoration-blue {
  text-decoration-color: #0166f3;
}
.decoration-indigo {
  text-decoration-color: #232ea3;
}
.decoration-purple {
  text-decoration-color: #7557f2;
}
.decoration-pink {
  text-decoration-color: #ff1493;
}
.decoration-white {
  text-decoration-color: #ffffff;
}
.decoration-black {
  text-decoration-color: #000000;
}
.decoration-solid {
  text-decoration-style: solid;
}
.decoration-double {
  text-decoration-style: double;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.decoration-dashed {
  text-decoration-style: dashed;
}
.decoration-wavy {
  text-decoration-style: wavy;
}
.decoration-auto {
  text-decoration-thickness: auto;
}
.decoration-from-font {
  text-decoration-thickness: from-font;
}
.decoration-0 {
  text-decoration-thickness: 0px;
}
.decoration-1 {
  text-decoration-thickness: 1px;
}
.decoration-2 {
  text-decoration-thickness: 2px;
}
.decoration-4 {
  text-decoration-thickness: 4px;
}
.decoration-8 {
  text-decoration-thickness: 8px;
}
/************************************************
 * text-underline
 ************************************************/
.underline-offset-auto {
  text-underline-offset: auto;
}
.underline-offset-0 {
  text-underline-offset: 0px;
}
.underline-offset-1 {
  text-underline-offset: 1px;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.underline-offset-8 {
  text-underline-offset: 8px;
}
/************************************************
 * text-transform
 ************************************************/
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.normal-case {
  text-transform: none;
}
/************************************************
 * text-overflow
 ************************************************/
.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.text-clip {
  text-overflow: clip;
}
/************************************************
 * text-indent
 ************************************************/
.indent-0 {
  text-indent: 0px;
}
.indent-px {
  text-indent: 1px;
}
.indent-0\.5 {
  text-indent: 0.125rem;
  /* 2px */
}
.indent-1 {
  text-indent: 0.25rem;
  /* 4px */
}
.indent-1\.5 {
  text-indent: 0.375rem;
  /* 6px */
}
.indent-2 {
  text-indent: 0.5rem;
  /* 8px */
}
.indent-2\.5 {
  text-indent: 0.625rem;
  /* 10px */
}
.indent-3 {
  text-indent: 0.75rem;
  /* 12px */
}
.indent-3\.5 {
  text-indent: 0.875rem;
  /* 14px */
}
.indent-4 {
  text-indent: 1rem;
  /* 16px */
}
.indent-5 {
  text-indent: 1.25rem;
  /* 20px */
}
.indent-6 {
  text-indent: 1.5rem;
  /* 24px */
}
.indent-7 {
  text-indent: 1.75rem;
  /* 28px */
}
.indent-8 {
  text-indent: 2rem;
  /* 32px */
}
.indent-9 {
  text-indent: 2.25rem;
  /* 36px */
}
.indent-10 {
  text-indent: 2.5rem;
  /* 40px */
}
.indent-11 {
  text-indent: 2.75rem;
  /* 44px */
}
.indent-12 {
  text-indent: 3rem;
  /* 48px */
}
.indent-14 {
  text-indent: 3.5rem;
  /* 56px */
}
.indent-16 {
  text-indent: 4rem;
  /* 64px */
}
.indent-20 {
  text-indent: 5rem;
  /* 80px */
}
.indent-24 {
  text-indent: 6rem;
  /* 96px */
}
.indent-28 {
  text-indent: 7rem;
  /* 112px */
}
.indent-32 {
  text-indent: 8rem;
  /* 128px */
}
.indent-36 {
  text-indent: 9rem;
  /* 144px */
}
.indent-40 {
  text-indent: 10rem;
  /* 160px */
}
.indent-44 {
  text-indent: 11rem;
  /* 176px */
}
.indent-48 {
  text-indent: 12rem;
  /* 192px */
}
.indent-52 {
  text-indent: 13rem;
  /* 208px */
}
.indent-56 {
  text-indent: 14rem;
  /* 224px */
}
.indent-60 {
  text-indent: 15rem;
  /* 240px */
}
.indent-64 {
  text-indent: 16rem;
  /* 256px */
}
.indent-72 {
  text-indent: 18rem;
  /* 288px */
}
.indent-80 {
  text-indent: 20rem;
  /* 320px */
}
.indent-96 {
  text-indent: 24rem;
  /* 384px */
}
/************************************************
 * white-space
 ************************************************/
.whitespace-normal .cl-text {
  white-space: normal;
}
.whitespace-nowrap .cl-text {
  white-space: nowrap;
}
.whitespace-pre .cl-text {
  white-space: pre;
}
.whitespace-pre-line .cl-text {
  white-space: pre-line;
}
.whitespace-pre-wrap .cl-text {
  white-space: pre-wrap;
}
.whitespace-break-spaces .cl-text {
  white-space: break-spaces;
}
/************************************************
 * word-break
 ************************************************/
.break-normal .cl-text {
  overflow-wrap: normal;
  word-break: normal;
}
.break-words .cl-text {
  word-break: break-word;
}
.break-all .cl-text {
  word-break: all;
}
.break-keep .cl-text {
  word-break: keep-all;
}
/************************************************
 * content
 ************************************************/
.content-none:before,
.content-none:after {
  content: none;
}
.content-none .cl-text:before,
.content-none .cl-text:after {
  content: none;
}
/************************************************
 * background-color
 ************************************************/
.bg-inherit {
  background-color: inherit;
}
.bg-transparent {
  background-color: transparent;
}
.bg-body {
  background-color: #f4f7fb;
}
.bg-gray-5 {
  background-color: #e0e3e7;
}
.bg-gray-10 {
  background-color: #c9cdd2;
}
.bg-gray-20 {
  background-color: #aaafb6;
}
.bg-gray-30 {
  background-color: #a0a6b1;
}
.bg-gray-40 {
  background-color: #7f8791;
}
.bg-gray-50 {
  background-color: #626974;
}
.bg-gray-60 {
  background-color: #555b65;
}
.bg-gray-70 {
  background-color: #494c55;
}
.bg-gray-80 {
  background-color: #3a3c43;
}
.bg-gray-90 {
  background-color: #2c2d31;
}
.bg-gray-95 {
  background-color: #212227;
}
.bg-primary {
  background-color: #4051e9;
}
.bg-secondary {
  background-color: #494c55;
}
.bg-info {
  background-color: #0074ff;
}
.bg-success {
  background-color: #09a873;
}
.bg-warning {
  background-color: #ffb800;
}
.bg-danger {
  background-color: #de3737;
}
.bg-red {
  background-color: #ff1a09;
}
.bg-orange {
  background-color: #ff6c61;
}
.bg-yellow {
  background-color: #ffd255;
}
.bg-green {
  background-color: #27c590;
}
.bg-teal {
  background-color: #009984;
}
.bg-cyan {
  background-color: #53bdff;
}
.bg-blue {
  background-color: #0166f3;
}
.bg-indigo {
  background-color: #232ea3;
}
.bg-purple {
  background-color: #7557f2;
}
.bg-pink {
  background-color: #ff1493;
}
.bg-white {
  background-color: #ffffff;
}
.bg-black {
  background-color: #000000;
}
.bg-gray {
  background-color: #717171;
}
.bg-dark {
  background-color: #2e2e2e;
}
/************************************************
 * background-position
 ************************************************/
.bg-bottom {
  background-position: bottom;
}
.bg-center {
  background-position: center;
}
.bg-left {
  background-position: left;
}
.bg-left-bottom {
  background-position: left bottom;
}
.bg-left-top {
  background-position: left top;
}
.bg-right {
  background-position: right;
}
.bg-right-bottom {
  background-position: right bottom;
}
.bg-right-top {
  background-position: right top;
}
.bg-top {
  background-position: top;
}
/************************************************
 * background-repeat
 ************************************************/
.bg-repeat {
  background-repeat: repeat;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.bg-repeat-x {
  background-repeat: repeat-x;
}
.bg-repeat-y {
  background-repeat: repeat-y;
}
.bg-repeat-round {
  background-repeat: round;
}
.bg-repeat-space {
  background-repeat: space;
}
/************************************************
 * background-size
 ************************************************/
.bg-auto {
  background-size: auto;
}
.bg-cover {
  background-size: cover;
}
.bg-contain {
  background-size: contain;
}
/************************************************
 * border-radius
 ************************************************/
.rounded-none {
  border-radius: 0;
}
.rounded-sm {
  border-radius: 4px;
}
.rounded {
  border-radius: 8px;
}
.rounded-md {
  border-radius: 12px;
}
.rounded-lg {
  border-radius: 16px;
}
.rounded-xl {
  border-radius: 20px;
}
.rounded-2xl {
  border-radius: 24px;
}
.rounded-3xl {
  border-radius: 40px;
}
.rounded-full {
  border-radius: 999px;
}
.rounded-s-none {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.rounded-s-sm {
  border-start-start-radius: 4px;
  border-end-start-radius: 4px;
}
.rounded-s {
  border-start-start-radius: 8px;
  border-end-start-radius: 8px;
}
.rounded-s-md {
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
}
.rounded-s-lg {
  border-start-start-radius: 16px;
  border-end-start-radius: 16px;
}
.rounded-s-xl {
  border-start-start-radius: 20px;
  border-end-start-radius: 20px;
}
.rounded-s-2xl {
  border-start-start-radius: 24px;
  border-end-start-radius: 24px;
}
.rounded-s-3xl {
  border-start-start-radius: 40px border-end-start-radius: 40px;
}
.rounded-s-full {
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}
.rounded-e-none {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
.rounded-e-sm {
  border-start-end-radius: 4px;
  border-end-end-radius: 4px;
}
.rounded-e {
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
}
.rounded-e-md {
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
}
.rounded-e-lg {
  border-start-end-radius: 16px;
  border-end-end-radius: 16px;
}
.rounded-e-xl {
  border-start-end-radius: 20px;
  border-end-end-radius: 20px;
}
.rounded-e-2xl {
  border-start-end-radius: 24px;
  border-end-end-radius: 24px;
}
.rounded-e-3xl {
  border-start-end-radius: 40px border-end-end-radius: 40px;
}
.rounded-e-full {
  border-start-end-radius: 999px;
  border-end-end-radius: 999px;
}
.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-t-sm {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.rounded-t {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.rounded-t-md {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.rounded-t-lg {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.rounded-t-xl {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.rounded-t-2xl {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.rounded-t-3xl {
  border-top-left-radius: 40px border-top-right-radius: 40px;
}
.rounded-t-full {
  border-top-left-radius: 999px;
  border-top-right-radius: 999px;
}
.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-r-sm {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.rounded-r {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}
.rounded-r-md {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.rounded-r-lg {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.rounded-r-xl {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.rounded-r-2xl {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.rounded-r-3xl {
  border-top-right-radius: 40px border-bottom-right-radius: 40px;
}
.rounded-r-full {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}
.rounded-b-none {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rounded-b-sm {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.rounded-b {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.rounded-b-md {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.rounded-b-lg {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
.rounded-b-xl {
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.rounded-b-2xl {
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.rounded-b-3xl {
  border-bottom-left-radius: 40px border-bottom-right-radius: 40px;
}
.rounded-b-full {
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
}
.rounded-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.rounded-l-sm {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.rounded-l {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.rounded-l-md {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.rounded-l-lg {
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.rounded-l-xl {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.rounded-l-2xl {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.rounded-l-3xl {
  border-top-left-radius: 40px border-bottom-left-radius: 40px;
}
.rounded-l-full {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}
.rounded-se-none {
  border-start-end-radius: 0;
}
.rounded-se-sm {
  border-start-end-radius: 4px;
}
.rounded-se {
  border-start-end-radius: 8px;
}
.rounded-se-md {
  border-start-end-radius: 12px;
}
.rounded-se-lg {
  border-start-end-radius: 16px;
}
.rounded-se-xl {
  border-start-end-radius: 20px;
}
.rounded-se-2xl {
  border-start-end-radius: 24px;
}
.rounded-se-3xl {
  border-start-end-radius: 40px;
}
.rounded-se-full {
  border-start-end-radius: 999px;
}
.rounded-ee-none {
  border-end-end-radius: 0;
}
.rounded-ee-sm {
  border-end-end-radius: 4px;
}
.rounded-ee {
  border-end-end-radius: 8px;
}
.rounded-ee-md {
  border-end-end-radius: 12px;
}
.rounded-ee-lg {
  border-end-end-radius: 16px;
}
.rounded-ee-xl {
  border-end-end-radius: 20px;
}
.rounded-ee-2xl {
  border-end-end-radius: 24px;
}
.rounded-ee-3xl {
  border-end-end-radius: 40px;
}
.rounded-ee-full {
  border-end-end-radius: 999px;
}
.rounded-es-none {
  border-end-start-radius: 0;
}
.rounded-es-sm {
  border-end-start-radius: 4px;
}
.rounded-es {
  border-end-start-radius: 8px;
}
.rounded-es-md {
  border-end-start-radius: 12px;
}
.rounded-es-lg {
  border-end-start-radius: 16px;
}
.rounded-es-xl {
  border-end-start-radius: 20px;
}
.rounded-es-2xl {
  border-end-start-radius: 24px;
}
.rounded-es-3xl {
  border-end-start-radius: 40px;
}
.rounded-es-full {
  border-end-start-radius: 999px;
}
.rounded-tl-none {
  border-top-left-radius: 0;
}
.rounded-tl-sm {
  border-top-left-radius: 4px;
}
.rounded-tl {
  border-top-left-radius: 8px;
}
.rounded-tl-md {
  border-top-left-radius: 12px;
}
.rounded-tl-lg {
  border-top-left-radius: 16px;
}
.rounded-tl-xl {
  border-top-left-radius: 20px;
}
.rounded-tl-2xl {
  border-top-left-radius: 24px;
}
.rounded-tl-3xl {
  border-top-left-radius: 40px;
}
.rounded-tl-full {
  border-top-left-radius: 999px;
}
.rounded-tr-none {
  border-top-right-radius: 0;
}
.rounded-tr-sm {
  border-top-right-radius: 4px;
}
.rounded-tr {
  border-top-right-radius: 8px;
}
.rounded-tr-md {
  border-top-right-radius: 12px;
}
.rounded-tr-lg {
  border-top-right-radius: 16px;
}
.rounded-tr-xl {
  border-top-right-radius: 20px;
}
.rounded-tr-2xl {
  border-top-right-radius: 24px;
}
.rounded-tr-3xl {
  border-top-right-radius: 40px;
}
.rounded-tr-full {
  border-top-right-radius: 999px;
}
.rounded-br-none {
  border-bottom-right-radius: 0;
}
.rounded-br-sm {
  border-bottom-right-radius: 4px;
}
.rounded-br {
  border-bottom-right-radius: 8px;
}
.rounded-br-md {
  border-bottom-right-radius: 12px;
}
.rounded-br-lg {
  border-bottom-right-radius: 16px;
}
.rounded-br-xl {
  border-bottom-right-radius: 20px;
}
.rounded-br-2xl {
  border-bottom-right-radius: 24px;
}
.rounded-br-3xl {
  border-bottom-right-radius: 40px;
}
.rounded-br-full {
  border-bottom-right-radius: 999px;
}
.rounded-bl-none {
  border-bottom-left-radius: 0;
}
.rounded-bl-sm {
  border-bottom-left-radius: 4px;
}
.rounded-bl {
  border-bottom-left-radius: 8px;
}
.rounded-bl-md {
  border-bottom-left-radius: 12px;
}
.rounded-bl-lg {
  border-bottom-left-radius: 16px;
}
.rounded-bl-xl {
  border-bottom-left-radius: 20px;
}
.rounded-bl-2xl {
  border-bottom-left-radius: 24px;
}
.rounded-bl-3xl {
  border-bottom-left-radius: 40px;
}
.rounded-bl-full {
  border-bottom-left-radius: 999px;
}
/************************************************
 * border-width
 ************************************************/
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-8 {
  border-width: 8px;
}
.border {
  border-width: 1px;
}
.border-x-0 {
  border-left-width: 0px;
  border-right-width: 0px;
}
.border-x-2 {
  border-left-width: 2px;
  border-right-width: 2px;
}
.border-x-4 {
  border-left-width: 4px;
  border-right-width: 4px;
}
.border-x-8 {
  border-left-width: 8px;
  border-right-width: 8px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-y-0 {
  border-top-width: 0px;
  border-bottom-width: 0px;
}
.border-y-2 {
  border-top-width: 2px;
  border-bottom-width: 2px;
}
.border-y-4 {
  border-top-width: 4px;
  border-bottom-width: 4px;
}
.border-y-8 {
  border-top-width: 8px;
  border-bottom-width: 8px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-s-0 {
  border-inline-start-width: 0px;
}
.border-s-2 {
  border-inline-start-width: 2px;
}
.border-s-4 {
  border-inline-start-width: 4px;
}
.border-s-8 {
  border-inline-start-width: 8px;
}
.border-s {
  border-inline-start-width: 1px;
}
.border-e-0 {
  border-inline-end-width: 0px;
}
.border-e-2 {
  border-inline-end-width: 2px;
}
.border-e-4 {
  border-inline-end-width: 4px;
}
.border-e-8 {
  border-inline-end-width: 8px;
}
.border-e {
  border-inline-end-width: 1px;
}
.border-t-0 {
  border-top-width: 0px;
}
.border-t-2 {
  border-top-width: 2px;
}
.border-t-4 {
  border-top-width: 4px;
}
.border-t-8 {
  border-top-width: 8px;
}
.border-t {
  border-top-width: 1px;
}
.border-r-0 {
  border-right-width: 0px;
}
.border-r-2 {
  border-right-width: 2px;
}
.border-r-4 {
  border-right-width: 4px;
}
.border-r-8 {
  border-right-width: 8px;
}
.border-r {
  border-right-width: 1px;
}
.border-b-0 {
  border-bottom-width: 0px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-b-4 {
  border-bottom-width: 4px;
}
.border-b-8 {
  border-bottom-width: 8px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-0 {
  border-left-width: 0px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-l-8 {
  border-left-width: 8px;
}
.border-l {
  border-left-width: 1px;
}
/************************************************
 * border-color
 ************************************************/
.border-inherit {
  border-color: inherit;
}
.border-transparent {
  border-color: transparent;
}
.border-base {
  border-color: #f1f2f5;
}
.border-gray-5 {
  border-color: #e0e3e7;
}
.border-gray-10 {
  border-color: #c9cdd2;
}
.border-gray-20 {
  border-color: #aaafb6;
}
.border-gray-30 {
  border-color: #a0a6b1;
}
.border-gray-40 {
  border-color: #7f8791;
}
.border-gray-50 {
  border-color: #626974;
}
.border-gray-60 {
  border-color: #555b65;
}
.border-gray-70 {
  border-color: #494c55;
}
.border-gray-80 {
  border-color: #3a3c43;
}
.border-gray-90 {
  border-color: #2c2d31;
}
.border-gray-95 {
  border-color: #212227;
}
.border-gray-98 {
  border-color: #161619;
}
.border-gray-99 {
  border-color: #0d0d0e;
}
.border-primary {
  border-color: #4051e9;
}
.border-secondary {
  border-color: #494c55;
}
.border-info {
  border-color: #0074ff;
}
.border-success {
  border-color: #09a873;
}
.border-warning {
  border-color: #ffb800;
}
.border-danger {
  border-color: #de3737;
}
.border-red {
  border-color: #ff1a09;
}
.border-orange {
  border-color: #ff6c61;
}
.border-yellow {
  border-color: #ffd255;
}
.border-green {
  border-color: #27c590;
}
.border-teal {
  border-color: #009984;
}
.border-cyan {
  border-color: #53bdff;
}
.border-blue {
  border-color: #0166f3;
}
.border-indigo {
  border-color: #232ea3;
}
.border-purple {
  border-color: #7557f2;
}
.border-pink {
  border-color: #ff1493;
}
.border-white {
  border-color: #ffffff;
}
.border-black {
  border-color: #000000;
}
.border-gray {
  border-color: #717171;
}
.border-dark {
  border-color: #2e2e2e;
}
.border-x-inherit {
  border-left-color: inherit;
  border-right-color: inherit;
}
.border-x-transparent {
  border-left-color: transparent;
  border-right-color: transparent;
}
.border-x-gray-5 {
  border-left-color: #e0e3e7;
  border-right-color: #e0e3e7;
}
.border-x-gray-10 {
  border-left-color: #c9cdd2;
  border-right-color: #c9cdd2;
}
.border-x-gray-20 {
  border-left-color: #aaafb6;
  border-right-color: #aaafb6;
}
.border-x-gray-30 {
  border-left-color: #a0a6b1;
  border-right-color: #a0a6b1;
}
.border-x-gray-40 {
  border-left-color: #7f8791;
  border-right-color: #7f8791;
}
.border-x-gray-50 {
  border-left-color: #626974;
  border-right-color: #626974;
}
.border-x-gray-60 {
  border-left-color: #555b65;
  border-right-color: #555b65;
}
.border-x-gray-70 {
  border-left-color: #494c55;
  border-right-color: #494c55;
}
.border-x-gray-80 {
  border-left-color: #3a3c43;
  border-right-color: #3a3c43;
}
.border-x-gray-90 {
  border-left-color: #2c2d31;
  border-right-color: #2c2d31;
}
.border-x-gray-95 {
  border-left-color: #212227;
  border-right-color: #212227;
}
.border-x-primary {
  border-left-color: #4051e9;
  border-right-color: #4051e9;
}
.border-x-secondary {
  border-left-color: #494c55;
  border-right-color: #494c55;
}
.border-x-info {
  border-left-color: #0074ff;
  border-right-color: #0074ff;
}
.border-x-success {
  border-left-color: #09a873;
  border-right-color: #09a873;
}
.border-x-warning {
  border-left-color: #ffb800;
  border-right-color: #ffb800;
}
.border-x-danger {
  border-left-color: #de3737;
  border-right-color: #de3737;
}
.border-x-red {
  border-left-color: #ff1a09;
  border-right-color: #ff1a09;
}
.border-x-orange {
  border-left-color: #ff6c61;
  border-right-color: #ff6c61;
}
.border-x-yellow {
  border-left-color: #ffd255;
  border-right-color: #ffd255;
}
.border-x-green {
  border-left-color: #27c590;
  border-right-color: #27c590;
}
.border-x-teal {
  border-left-color: #009984;
  border-right-color: #009984;
}
.border-x-cyan {
  border-left-color: #53bdff;
  border-right-color: #53bdff;
}
.border-x-blue {
  border-left-color: #0166f3;
  border-right-color: #0166f3;
}
.border-x-indigo {
  border-left-color: #232ea3;
  border-right-color: #232ea3;
}
.border-x-purple {
  border-left-color: #7557f2;
  border-right-color: #7557f2;
}
.border-x-pink {
  border-left-color: #ff1493;
  border-right-color: #ff1493;
}
.border-x-white {
  border-left-color: #ffffff;
  border-right-color: #ffffff;
}
.border-x-black {
  border-left-color: #000000;
  border-right-color: #000000;
}
.border-x-gray {
  border-left-color: #717171;
  border-right-color: #717171;
}
.border-x-dark {
  border-left-color: #2e2e2e;
  border-right-color: #2e2e2e;
}
.border-y-inherit {
  border-top-color: inherit;
  border-bottom-color: inherit;
}
.border-y-transparent {
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.border-y-gray-5 {
  border-top-color: #e0e3e7;
  border-bottom-color: #e0e3e7;
}
.border-y-gray-10 {
  border-top-color: #c9cdd2;
  border-bottom-color: #c9cdd2;
}
.border-y-gray-20 {
  border-top-color: #aaafb6;
  border-bottom-color: #aaafb6;
}
.border-y-gray-30 {
  border-top-color: #a0a6b1;
  border-bottom-color: #a0a6b1;
}
.border-y-gray-40 {
  border-top-color: #7f8791;
  border-bottom-color: #7f8791;
}
.border-y-gray-50 {
  border-top-color: #626974;
  border-bottom-color: #626974;
}
.border-y-gray-60 {
  border-top-color: #555b65;
  border-bottom-color: #555b65;
}
.border-y-gray-70 {
  border-top-color: #494c55;
  border-bottom-color: #494c55;
}
.border-y-gray-80 {
  border-top-color: #3a3c43;
  border-bottom-color: #3a3c43;
}
.border-y-gray-90 {
  border-top-color: #2c2d31;
  border-bottom-color: #2c2d31;
}
.border-y-gray-95 {
  border-top-color: #212227;
  border-bottom-color: #212227;
}
.border-y-gray-98 {
  border-top-color: #161619;
  border-bottom-color: #161619;
}
.border-y-gray-99 {
  border-top-color: #0d0d0e;
  border-bottom-color: #0d0d0e;
}
.border-y-primary {
  border-top-color: #4051e9;
  border-bottom-color: #4051e9;
}
.border-y-secondary {
  border-top-color: #494c55;
  border-bottom-color: #494c55;
}
.border-y-info {
  border-top-color: #0074ff;
  border-bottom-color: #0074ff;
}
.border-y-success {
  border-top-color: #09a873;
  border-bottom-color: #09a873;
}
.border-y-warning {
  border-top-color: #ffb800;
  border-bottom-color: #ffb800;
}
.border-y-danger {
  border-top-color: #de3737;
  border-bottom-color: #de3737;
}
.border-y-red {
  border-top-color: #ff1a09;
  border-bottom-color: #ff1a09;
}
.border-y-orange {
  border-top-color: #ff6c61;
  border-bottom-color: #ff6c61;
}
.border-y-yellow {
  border-top-color: #ffd255;
  border-bottom-color: #ffd255;
}
.border-y-green {
  border-top-color: #27c590;
  border-bottom-color: #27c590;
}
.border-y-teal {
  border-top-color: #009984;
  border-bottom-color: #009984;
}
.border-y-cyan {
  border-top-color: #53bdff;
  border-bottom-color: #53bdff;
}
.border-y-blue {
  border-top-color: #0166f3;
  border-bottom-color: #0166f3;
}
.border-y-indigo {
  border-top-color: #232ea3;
  border-bottom-color: #232ea3;
}
.border-y-purple {
  border-top-color: #7557f2;
  border-bottom-color: #7557f2;
}
.border-y-pink {
  border-top-color: #ff1493;
  border-bottom-color: #ff1493;
}
.border-y-white {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.border-y-black {
  border-top-color: #000000;
  border-bottom-color: #000000;
}
.border-y-gray {
  border-top-color: #717171;
  border-bottom-color: #717171;
}
.border-y-dark {
  border-top-color: #2e2e2e;
  border-bottom-color: #2e2e2e;
}
.border-t-inherit {
  border-top-color: inherit;
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-base {
  border-top-color: #f1f2f5;
}
.border-t-gray-5 {
  border-top-color: #e0e3e7;
}
.border-t-gray-10 {
  border-top-color: #c9cdd2;
}
.border-t-gray-20 {
  border-top-color: #aaafb6;
}
.border-t-gray-30 {
  border-top-color: #a0a6b1;
}
.border-t-gray-40 {
  border-top-color: #7f8791;
}
.border-t-gray-50 {
  border-top-color: #626974;
}
.border-t-gray-60 {
  border-top-color: #555b65;
}
.border-t-gray-70 {
  border-top-color: #494c55;
}
.border-t-gray-80 {
  border-top-color: #3a3c43;
}
.border-t-gray-90 {
  border-top-color: #2c2d31;
}
.border-t-gray-95 {
  border-top-color: #212227;
}
.border-t-gray-98 {
  border-top-color: #161619;
}
.border-t-gray-99 {
  border-top-color: #0d0d0e;
}
.border-t-primary {
  border-top-color: #4051e9;
}
.border-t-secondary {
  border-top-color: #494c55;
}
.border-t-info {
  border-top-color: #0074ff;
}
.border-t-success {
  border-top-color: #09a873;
}
.border-t-warning {
  border-top-color: #ffb800;
}
.border-t-danger {
  border-top-color: #de3737;
}
.border-t-red {
  border-top-color: #ff1a09;
}
.border-t-orange {
  border-top-color: #ff6c61;
}
.border-t-yellow {
  border-top-color: #ffd255;
}
.border-t-green {
  border-top-color: #27c590;
}
.border-t-teal {
  border-top-color: #009984;
}
.border-t-cyan {
  border-top-color: #53bdff;
}
.border-t-blue {
  border-top-color: #0166f3;
}
.border-t-indigo {
  border-top-color: #232ea3;
}
.border-t-purple {
  border-top-color: #7557f2;
}
.border-t-pink {
  border-top-color: #ff1493;
}
.border-t-white {
  border-top-color: #ffffff;
}
.border-t-black {
  border-top-color: #000000;
}
.border-t-gray {
  border-top-color: #717171;
}
.border-t-dark {
  border-top-color: #2e2e2e;
}
.border-r-inherit {
  border-right-color: inherit;
}
.border-r-transparent {
  border-right-color: transparent;
}
.border-r-base {
  border-right-color: #f1f2f5;
}
.border-r-gray-5 {
  border-right-color: #e0e3e7;
}
.border-r-gray-10 {
  border-right-color: #c9cdd2;
}
.border-r-gray-20 {
  border-right-color: #aaafb6;
}
.border-r-gray-30 {
  border-right-color: #a0a6b1;
}
.border-r-gray-40 {
  border-right-color: #7f8791;
}
.border-r-gray-50 {
  border-right-color: #626974;
}
.border-r-gray-60 {
  border-right-color: #555b65;
}
.border-r-gray-70 {
  border-right-color: #494c55;
}
.border-r-gray-80 {
  border-right-color: #3a3c43;
}
.border-r-gray-90 {
  border-right-color: #2c2d31;
}
.border-r-gray-95 {
  border-right-color: #212227;
}
.border-r-gray-98 {
  border-right-color: #161619;
}
.border-r-gray-99 {
  border-right-color: #0d0d0e;
}
.border-r-primary {
  border-right-color: #4051e9;
}
.border-r-secondary {
  border-right-color: #494c55;
}
.border-r-info {
  border-right-color: #0074ff;
}
.border-r-success {
  border-right-color: #09a873;
}
.border-r-warning {
  border-right-color: #ffb800;
}
.border-r-danger {
  border-right-color: #de3737;
}
.border-r-red {
  border-right-color: #ff1a09;
}
.border-r-orange {
  border-right-color: #ff6c61;
}
.border-r-yellow {
  border-right-color: #ffd255;
}
.border-r-green {
  border-right-color: #27c590;
}
.border-r-teal {
  border-right-color: #009984;
}
.border-r-cyan {
  border-right-color: #53bdff;
}
.border-r-blue {
  border-right-color: #0166f3;
}
.border-r-indigo {
  border-right-color: #232ea3;
}
.border-r-purple {
  border-right-color: #7557f2;
}
.border-r-pink {
  border-right-color: #ff1493;
}
.border-r-white {
  border-right-color: #ffffff;
}
.border-r-black {
  border-right-color: #000000;
}
.border-r-gray {
  border-right-color: #717171;
}
.border-r-dark {
  border-right-color: #2e2e2e;
}
.border-b-inherit {
  border-bottom-color: inherit;
}
.border-b-transparent {
  border-bottom-color: transparent;
}
.border-b-base {
  border-bottom-color: #f1f2f5;
}
.border-b-gray-5 {
  border-bottom-color: #e0e3e7;
}
.border-b-gray-10 {
  border-bottom-color: #c9cdd2;
}
.border-b-gray-20 {
  border-bottom-color: #aaafb6;
}
.border-b-gray-30 {
  border-bottom-color: #a0a6b1;
}
.border-b-gray-40 {
  border-bottom-color: #7f8791;
}
.border-b-gray-50 {
  border-bottom-color: #626974;
}
.border-b-gray-60 {
  border-bottom-color: #555b65;
}
.border-b-gray-70 {
  border-bottom-color: #494c55;
}
.border-b-gray-80 {
  border-bottom-color: #3a3c43;
}
.border-b-gray-90 {
  border-bottom-color: #2c2d31;
}
.border-b-gray-95 {
  border-bottom-color: #212227;
}
.border-b-gray-98 {
  border-bottom-color: #161619;
}
.border-b-gray-99 {
  border-bottom-color: #0d0d0e;
}
.border-b-primary {
  border-bottom-color: #4051e9;
}
.border-b-secondary {
  border-bottom-color: #494c55;
}
.border-b-info {
  border-bottom-color: #0074ff;
}
.border-b-success {
  border-bottom-color: #09a873;
}
.border-b-warning {
  border-bottom-color: #ffb800;
}
.border-b-danger {
  border-bottom-color: #de3737;
}
.border-b-red {
  border-bottom-color: #ff1a09;
}
.border-b-orange {
  border-bottom-color: #ff6c61;
}
.border-b-yellow {
  border-bottom-color: #ffd255;
}
.border-b-green {
  border-bottom-color: #27c590;
}
.border-b-teal {
  border-bottom-color: #009984;
}
.border-b-cyan {
  border-bottom-color: #53bdff;
}
.border-b-blue {
  border-bottom-color: #0166f3;
}
.border-b-indigo {
  border-bottom-color: #232ea3;
}
.border-b-purple {
  border-bottom-color: #7557f2;
}
.border-b-pink {
  border-bottom-color: #ff1493;
}
.border-b-white {
  border-bottom-color: #ffffff;
}
.border-b-black {
  border-bottom-color: #000000;
}
.border-b-gray {
  border-bottom-color: #717171;
}
.border-b-dark {
  border-bottom-color: #2e2e2e;
}
.border-l-inherit {
  border-left-color: inherit;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-l-base {
  border-left-color: #f1f2f5;
}
.border-l-gray-5 {
  border-left-color: #e0e3e7;
}
.border-l-gray-10 {
  border-left-color: #c9cdd2;
}
.border-l-gray-20 {
  border-left-color: #aaafb6;
}
.border-l-gray-30 {
  border-left-color: #a0a6b1;
}
.border-l-gray-40 {
  border-left-color: #7f8791;
}
.border-l-gray-50 {
  border-left-color: #626974;
}
.border-l-gray-60 {
  border-left-color: #555b65;
}
.border-l-gray-70 {
  border-left-color: #494c55;
}
.border-l-gray-80 {
  border-left-color: #3a3c43;
}
.border-l-gray-90 {
  border-left-color: #2c2d31;
}
.border-l-gray-95 {
  border-left-color: #212227;
}
.border-l-gray-98 {
  border-left-color: #161619;
}
.border-l-gray-99 {
  border-left-color: #0d0d0e;
}
.border-l-primary {
  border-left-color: #4051e9;
}
.border-l-secondary {
  border-left-color: #494c55;
}
.border-l-info {
  border-left-color: #0074ff;
}
.border-l-success {
  border-left-color: #09a873;
}
.border-l-warning {
  border-left-color: #ffb800;
}
.border-l-danger {
  border-left-color: #de3737;
}
.border-l-red {
  border-left-color: #ff1a09;
}
.border-l-orange {
  border-left-color: #ff6c61;
}
.border-l-yellow {
  border-left-color: #ffd255;
}
.border-l-green {
  border-left-color: #27c590;
}
.border-l-teal {
  border-left-color: #009984;
}
.border-l-cyan {
  border-left-color: #53bdff;
}
.border-l-blue {
  border-left-color: #0166f3;
}
.border-l-indigo {
  border-left-color: #232ea3;
}
.border-l-purple {
  border-left-color: #7557f2;
}
.border-l-pink {
  border-left-color: #ff1493;
}
.border-l-white {
  border-left-color: #ffffff;
}
.border-l-black {
  border-left-color: #000000;
}
/************************************************
 * border-style
 ************************************************/
.border-solid {
  border-style: solid;
}
.border-dashed {
  border-style: dashed;
}
.border-dotted {
  border-style: dotted;
}
.border-double {
  border-style: double;
}
.border-hidden {
  border-style: hidden;
}
.border-none {
  border-style: none;
}
/************************************************
 * box-shadow
 ************************************************/
.shadow-01 {
  box-shadow: 0 4px 4px 0 rgba(202, 206, 218, 0.08);
}
.shadow-02 {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.04);
}
.shadow-03 {
  box-shadow: 0 4px 8px 0 rgba(64, 81, 233, 0.3);
}
/************************************************
 * opacity
 ************************************************/
.opacity-0 {
  opacity: 0;
}
.opacity-5 {
  opacity: 0.05;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-95 {
  opacity: 0.95;
}
.opacity-100 {
  opacity: 1;
}
.backdrop-opacity-0 {
  backdrop-filter: opacity(0);
}
.backdrop-opacity-5 {
  backdrop-filter: opacity(0.05);
}
.backdrop-opacity-10 {
  backdrop-filter: opacity(0.1);
}
.backdrop-opacity-20 {
  backdrop-filter: opacity(0.2);
}
.backdrop-opacity-25 {
  backdrop-filter: opacity(0.25);
}
.backdrop-opacity-30 {
  backdrop-filter: opacity(0.3);
}
.backdrop-opacity-40 {
  backdrop-filter: opacity(0.4);
}
.backdrop-opacity-50 {
  backdrop-filter: opacity(0.5);
}
.backdrop-opacity-60 {
  backdrop-filter: opacity(0.6);
}
.backdrop-opacity-70 {
  backdrop-filter: opacity(0.7);
}
.backdrop-opacity-75 {
  backdrop-filter: opacity(0.75);
}
.backdrop-opacity-80 {
  backdrop-filter: opacity(0.8);
}
.backdrop-opacity-90 {
  backdrop-filter: opacity(0.9);
}
.backdrop-opacity-95 {
  backdrop-filter: opacity(0.95);
}
.backdrop-opacity-100 {
  backdrop-filter: opacity(1);
}
/************************************************
 * blur
 ************************************************/
.blur-none {
  filter: blur(0);
}
.blur-sm {
  filter: blur(4px);
}
.blur {
  filter: blur(8px);
}
.blur-md {
  filter: blur(12px);
}
.blur-lg {
  filter: blur(16px);
}
.blur-xl {
  filter: blur(24px);
}
.blur-2xl {
  filter: blur(40px);
}
.blur-3xl {
  filter: blur(64px);
}
.backdrop-blur-none {
  backdrop-filter: blur(0);
}
.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}
.backdrop-blur {
  backdrop-filter: blur(8px);
}
.backdrop-blur-md {
  backdrop-filter: blur(12px);
}
.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
}
.backdrop-blur-2xl {
  backdrop-filter: blur(40px);
}
.backdrop-blur-3xl {
  backdrop-filter: blur(64px);
}
/************************************************
 * blightness
 ************************************************/
.brightness-0 {
  filter: brightness(0);
}
.brightness-50 {
  filter: brightness(0.5);
}
.brightness-75 {
  filter: brightness(0.75);
}
.brightness-90 {
  filter: brightness(0.9);
}
.brightness-95 {
  filter: brightness(0.95);
}
.brightness-100 {
  filter: brightness(1);
}
.brightness-105 {
  filter: brightness(1.05);
}
.brightness-110 {
  filter: brightness(1.1);
}
.brightness-125 {
  filter: brightness(1.25);
}
.brightness-150 {
  filter: brightness(1.5);
}
.brightness-200 {
  filter: brightness(2);
}
.backdrop-brightness-0 {
  backdrop-filter: brightness(0);
}
.backdrop-brightness-50 {
  backdrop-filter: brightness(0.5);
}
.backdrop-brightness-75 {
  backdrop-filter: brightness(0.75);
}
.backdrop-brightness-90 {
  backdrop-filter: brightness(0.9);
}
.backdrop-brightness-95 {
  backdrop-filter: brightness(0.95);
}
.backdrop-brightness-100 {
  backdrop-filter: brightness(1);
}
.backdrop-brightness-105 {
  backdrop-filter: brightness(1.05);
}
.backdrop-brightness-110 {
  backdrop-filter: brightness(1.1);
}
.backdrop-brightness-125 {
  backdrop-filter: brightness(1.25);
}
.backdrop-brightness-150 {
  backdrop-filter: brightness(1.5);
}
.backdrop-brightness-200 {
  backdrop-filter: brightness(2);
}
/************************************************
 * contrast
 ************************************************/
.contrast-0 {
  filter: contrast(0);
}
.contrast-50 {
  filter: contrast(0.5);
}
.contrast-75 {
  filter: contrast(0.75);
}
.contrast-100 {
  filter: contrast(1);
}
.contrast-125 {
  filter: contrast(1.25);
}
.contrast-150 {
  filter: contrast(1.5);
}
.contrast-200 {
  filter: contrast(2);
}
.backdrop-contrast-0 {
  backdrop-filter: contrast(0);
}
.backdrop-contrast-50 {
  backdrop-filter: contrast(0.5);
}
.backdrop-contrast-75 {
  backdrop-filter: contrast(0.75);
}
.backdrop-contrast-100 {
  backdrop-filter: contrast(1);
}
.backdrop-contrast-125 {
  backdrop-filter: contrast(1.25);
}
.backdrop-contrast-150 {
  backdrop-filter: contrast(1.5);
}
.backdrop-contrast-200 {
  backdrop-filter: contrast(2);
}
/************************************************
 * drop shadow
 ************************************************/
.drop-shadow-sm {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
.drop-shadow {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
}
.drop-shadow-md {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}
.drop-shadow-lg {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}
.drop-shadow-xl {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
}
.drop-shadow-2xl {
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}
.drop-shadow-none {
  filter: drop-shadow(0 0 #000000);
}
/************************************************
 * grayscale
 ************************************************/
.grayscale-0 {
  filter: grayscale(0);
}
.grayscale {
  filter: grayscale(100%);
}
.backdrop-grayscale-0 {
  backdrop-filter: grayscale(0);
}
.backdrop-grayscale {
  backdrop-filter: grayscale(100%);
}
/************************************************
 * hue rotate
 ************************************************/
.hue-rotate-0 {
  filter: hue-rotate(0deg);
}
.hue-rotate-15 {
  filter: hue-rotate(15deg);
}
.hue-rotate-30 {
  filter: hue-rotate(30deg);
}
.hue-rotate-60 {
  filter: hue-rotate(60deg);
}
.hue-rotate-90 {
  filter: hue-rotate(90deg);
}
.hue-rotate-100 {
  filter: hue-rotate(100deg);
}
.backdrop-hue-rotate-0 {
  backdrop-filter: hue-rotate(0deg);
}
.backdrop-hue-rotate-15 {
  backdrop-filter: hue-rotate(15deg);
}
.backdrop-hue-rotate-30 {
  backdrop-filter: hue-rotate(30deg);
}
.backdrop-hue-rotate-60 {
  backdrop-filter: hue-rotate(60deg);
}
.backdrop-hue-rotate-90 {
  backdrop-filter: hue-rotate(90deg);
}
.backdrop-hue-rotate-100 {
  backdrop-filter: hue-rotate(100deg);
}
/************************************************
 * invert
 ************************************************/
.invert-0 {
  filter: invert(0);
}
.invert {
  filter: invert(100%);
}
.backdrop-invert-0 {
  backdrop-filter: invert(0);
}
.backdrop-invert {
  backdrop-filter: invert(100%);
}
/************************************************
 * saturate
 ************************************************/
.saturate-0 {
  filter: saturate(0);
}
.saturate-50 {
  filter: saturate(0.5);
}
.saturate-100 {
  filter: saturate(1);
}
.saturate-150 {
  filter: saturate(1.5);
}
.saturate-200 {
  filter: saturate(2);
}
.backdrop-saturate-0 {
  backdrop-filter: saturate(0);
}
.backdrop-saturate-50 {
  backdrop-filter: saturate(0.5);
}
.backdrop-saturate-100 {
  backdrop-filter: saturate(1);
}
.backdrop-saturate-150 {
  backdrop-filter: saturate(1.5);
}
.backdrop-saturate-200 {
  backdrop-filter: saturate(2);
}
/************************************************
 * sepia
 ************************************************/
.sepia-0 {
  filter: sepia(0);
}
.sepia {
  filter: sepia(100%);
}
.backdrop-sepia-0 {
  backdrop-filter: sepia(0);
}
.backdrop-sepia {
  backdrop-filter: sepia(100%);
}
/************************************************
 * cursor
 ************************************************/
.cursor-auto {
  cursor: auto;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-wait {
  cursor: wait;
}
.cursor-text {
  cursor: text;
}
.cursor-move {
  cursor: move;
}
.cursor-help {
  cursor: help;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-none {
  cursor: none;
}
.cursor-context-menu {
  cursor: context-menu;
}
.cursor-progress {
  cursor: progress;
}
.cursor-cell {
  cursor: cell;
}
.cursor-crosshair {
  cursor: crosshair;
}
.cursor-vertical-text {
  cursor: vertical-text;
}
.cursor-alias {
  cursor: alias;
}
.cursor-copy {
  cursor: copy;
}
.cursor-no-drop {
  cursor: no-drop;
}
.cursor-grab {
  cursor: grab;
}
.cursor-grabbing {
  cursor: grabbing;
}
.cursor-all-scroll {
  cursor: all-scroll;
}
.cursor-col-resize {
  cursor: col-resize;
}
.cursor-row-resize {
  cursor: row-resize;
}
.cursor-n-resize {
  cursor: n-resize;
}
.cursor-e-resize {
  cursor: e-resize;
}
.cursor-s-resize {
  cursor: s-resize;
}
.cursor-w-resize {
  cursor: w-resize;
}
.cursor-ne-resize {
  cursor: ne-resize;
}
.cursor-nw-resize {
  cursor: nw-resize;
}
.cursor-se-resize {
  cursor: se-resize;
}
.cursor-sw-resize {
  cursor: sw-resize;
}
.cursor-ew-resize {
  cursor: ew-resize;
}
.cursor-ns-resize {
  cursor: ns-resize;
}
.cursor-nwse-resize {
  cursor: nwse-resize;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.cursor-zoom-out {
  cursor: zoom-out;
}
/************************************************
 * padding
 ************************************************/
.p-0 {
  padding: 0px !important;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.ps-0 {
  padding-inline-start: 0px;
}
.pe-0 {
  padding-inline-end: 0px;
}
.pt-0 {
  padding-top: 0px;
}
.pr-0 {
  padding-right: 0px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pl-0 {
  padding-left: 0px;
}
.p-px {
  padding: 1px;
}
.px-px {
  padding-left: 1px;
  padding-right: 1px;
}
.py-px {
  padding-top: 1px;
  padding-bottom: 1px;
}
.ps-p {
  padding-inline-start: 1px;
}
.pe-px {
  padding-inline-end: 1px;
}
.pt-px {
  padding-top: 1px;
}
.pr-px {
  padding-right: 1px;
}
.pb-px {
  padding-bottom: 1px;
}
.pl-px {
  padding-left: 1px;
}
.p-0\.5 {
  padding: 2px;
  /* 0.125rem */
}
.px-0\.5 {
  padding-left: 2px;
  padding-right: 2px;
  /* 0.125rem */
}
.py-0\.5 {
  padding-top: 2px;
  padding-bottom: 2px;
  /* 0.125rem */
}
.ps-0\.5 {
  padding-inline-start: 2px;
  /* 0.125rem */
}
.pe-0\.5 {
  padding-inline-end: 2px;
  /* 0.125rem */
}
.pt-0\.5 {
  padding-top: 2px;
  /* 0.125rem */
}
.pr-0\.5 {
  padding-right: 2px;
  /* 0.125rem */
}
.pb-0\.5 {
  padding-bottom: 2px;
  /* 0.125rem */
}
.pl-0\.5 {
  padding-left: 2px;
  /* 0.125rem */
}
.p-1 {
  padding: 4px;
  /* 0.25rem */
}
.px-1 {
  padding-left: 4px;
  padding-right: 4px;
  /* 0.25rem */
}
.py-1 {
  padding-top: 4px;
  padding-bottom: 4px;
  /* 0.25rem */
}
.ps-1 {
  padding-inline-start: 4px;
  /* 0.25rem */
}
.pe-1 {
  padding-inline-end: 4px;
  /* 0.25rem */
}
.pt-1 {
  padding-top: 4px;
  /* 0.25rem */
}
.pr-1 {
  padding-right: 4px;
  /* 0.25rem */
}
.pb-1 {
  padding-bottom: 4px;
  /* 0.25rem */
}
.pl-1 {
  padding-left: 4px;
  /* 0.25rem */
}
.p-1\.5 {
  padding: 6px;
  /* 0.375rem */
}
.px-1\.5 {
  padding-left: 6px;
  padding-right: 6px;
  /* 0.375rem */
}
.py-1\.5 {
  padding-top: 6px;
  padding-bottom: 6px;
  /* 0.375rem */
}
.ps-1\.5 {
  padding-inline-start: 6px;
  /* 0.375rem */
}
.pe-1\.5 {
  padding-inline-end: 6px;
  /* 0.375rem */
}
.pt-1\.5 {
  padding-top: 6px;
  /* 0.375rem */
}
.pr-1\.5 {
  padding-right: 6px;
  /* 0.375rem */
}
.pb-1\.5 {
  padding-bottom: 6px;
  /* 0.375rem */
}
.pl-1\.5 {
  padding-left: 6px;
  /* 0.375rem */
}
.p-2 {
  padding: 8px;
  /* 0.5rem */
}
.px-2 {
  padding-left: 8px;
  padding-right: 8px;
  /* 0.5rem */
}
.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
  /* 0.5rem */
}
.ps-2 {
  padding-inline-start: 8px;
  /* 0.5rem */
}
.pe-2 {
  padding-inline-end: 8px;
  /* 0.5rem */
}
.pt-2 {
  padding-top: 8px;
  /* 0.5rem */
}
.pr-2 {
  padding-right: 8px;
  /* 0.5rem */
}
.pb-2 {
  padding-bottom: 8px;
  /* 0.5rem */
}
.pl-2 {
  padding-left: 8px;
  /* 0.5rem */
}
.p-2\.5 {
  padding: 10px;
  /* 0.625rem */
}
.px-2\.5 {
  padding-left: 10px;
  padding-right: 10px;
  /* 0.625rem */
}
.py-2\.5 {
  padding-top: 10px;
  padding-bottom: 10px;
  /* 0.625rem */
}
.ps-2\.5 {
  padding-inline-start: 10px;
  /* 0.625rem */
}
.pe-2\.5 {
  padding-inline-end: 10px;
  /* 0.625rem */
}
.pt-2\.5 {
  padding-top: 10px;
  /* 0.625rem */
}
.pr-2\.5 {
  padding-right: 10px;
  /* 0.625rem */
}
.pb-2\.5 {
  padding-bottom: 10px;
  /* 0.625rem */
}
.pl-2\.5 {
  padding-left: 10px;
  /* 0.625rem */
}
.p-3 {
  padding: 12px;
  /* 0.75rem */
}
.px-3 {
  padding-left: 12px;
  padding-right: 12px;
  /* 0.75rem */
}
.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
  /* 0.75rem */
}
.ps-3 {
  padding-inline-start: 12px;
  /* 0.75rem */
}
.pe-3 {
  padding-inline-end: 12px;
  /* 0.75rem */
}
.pt-3 {
  padding-top: 12px;
  /* 0.75rem */
}
.pr-3 {
  padding-right: 12px;
  /* 0.75rem */
}
.pb-3 {
  padding-bottom: 12px;
  /* 0.75rem */
}
.pl-3 {
  padding-left: 12px;
  /* 0.75rem */
}
.p-3\.5 {
  padding: 14px;
  /* 0.875rem */
}
.px-3\.5 {
  padding-left: 14px;
  padding-right: 14px;
  /* 0.875rem */
}
.py-3\.5 {
  padding-top: 14px;
  padding-bottom: 14px;
  /* 0.875rem */
}
.ps-3\.5 {
  padding-inline-start: 14px;
  /* 0.875rem */
}
.pe-3\.5 {
  padding-inline-end: 14px;
  /* 0.875rem */
}
.pt-3\.5 {
  padding-top: 14px;
  /* 0.875rem */
}
.pr-3\.5 {
  padding-right: 14px;
  /* 0.875rem */
}
.pb-3\.5 {
  padding-bottom: 14px;
  /* 0.875rem */
}
.pl-3\.5 {
  padding-left: 14px;
  /* 0.875rem */
}
.p-4 {
  padding: 16px;
  /* 1rem */
}
.px-4 {
  padding-left: 16px;
  padding-right: 16px;
  /* 1rem */
}
.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
  /* 1rem */
}
.ps-4 {
  padding-inline-start: 16px;
  /* 1rem */
}
.pe-4 {
  padding-inline-end: 16px;
  /* 1rem */
}
.pt-4 {
  padding-top: 16px;
  /* 1rem */
}
.pr-4 {
  padding-right: 16px;
  /* 1rem */
}
.pb-4 {
  padding-bottom: 16px;
  /* 1rem */
}
.pl-4 {
  padding-left: 16px;
  /* 1rem */
}
.p-5 {
  padding: 20px;
  /* 1.25rem */
}
.px-5 {
  padding-left: 20px;
  padding-right: 1.25rem;
  /* 1.25rem */
}
.py-5 {
  padding-top: 20px;
  padding-bottom: 1.25rem;
  /* 1.25rem */
}
.ps-5 {
  padding-inline-start: 20px;
  /* 1.25rem */
}
.pe-5 {
  padding-inline-end: 20px;
  /* 1.25rem */
}
.pt-5 {
  padding-top: 20px;
  /* 1.25rem */
}
.pr-5 {
  padding-right: 20px;
  /* 1.25rem */
}
.pb-5 {
  padding-bottom: 20px;
  /* 1.25rem */
}
.pl-5 {
  padding-left: 20px;
  /* 1.25rem */
}
.p-6 {
  padding: 24px;
  /* 1.5rem */
}
.px-6 {
  padding-left: 24px;
  padding-right: 24px;
  /* 1.5rem */
}
.py-6 {
  padding-top: 24px;
  padding-bottom: 24px;
  /* 1.5rem */
}
.ps-6 {
  padding-inline-start: 24px;
  /* 1.5rem */
}
.pe-6 {
  padding-inline-end: 24px;
  /* 1.5rem */
}
.pt-6 {
  padding-top: 24px;
  /* 1.5rem */
}
.pr-6 {
  padding-right: 24px;
  /* 1.5rem */
}
.pb-6 {
  padding-bottom: 24px;
  /* 1.5rem */
}
.pl-6 {
  padding-left: 24px;
  /* 1.5rem */
}
.p-7 {
  padding: 28px;
  /* 1.75rem */
}
.px-7 {
  padding-left: 28px;
  padding-right: 28px;
  /* 1.75rem */
}
.py-7 {
  padding-top: 28px;
  padding-bottom: 28px;
  /* 1.75rem */
}
.ps-7 {
  padding-inline-start: 28px;
  /* 1.75rem */
}
.pe-7 {
  padding-inline-end: 28px;
  /* 1.75rem */
}
.pt-7 {
  padding-top: 28px;
  /* 1.75rem */
}
.pr-7 {
  padding-right: 28px;
  /* 1.75rem */
}
.pb-7 {
  padding-bottom: 28px;
  /* 1.75rem */
}
.pl-7 {
  padding-left: 28px;
  /* 1.75rem */
}
.p-8 {
  padding: 32px;
  /* 2rem */
}
.px-8 {
  padding-left: 32px;
  padding-right: 32px;
  /* 2rem */
}
.py-8 {
  padding-top: 32px;
  padding-bottom: 32px;
  /* 2rem */
}
.ps-8 {
  padding-inline-start: 32px;
  /* 2rem */
}
.pe-8 {
  padding-inline-end: 32px;
  /* 2rem */
}
.pt-8 {
  padding-top: 32px;
  /* 2rem */
}
.pr-8 {
  padding-right: 32px;
  /* 2rem */
}
.pb-8 {
  padding-bottom: 32px;
  /* 2rem */
}
.pl-8 {
  padding-left: 32px;
  /* 2rem */
}
.p-9 {
  padding: 36px;
  /* 2.25rem */
}
.px-9 {
  padding-left: 36px;
  padding-right: 36px;
  /* 2.25rem */
}
.py-9 {
  padding-top: 36px;
  padding-bottom: 36px;
  /* 2.25rem */
}
.ps-9 {
  padding-inline-start: 36px;
  /* 2.25rem */
}
.pe-9 {
  padding-inline-end: 36px;
  /* 2.25rem */
}
.pt-9 {
  padding-top: 36px;
  /* 2.25rem */
}
.pr-9 {
  padding-right: 36px;
  /* 2.25rem */
}
.pb-9 {
  padding-bottom: 36px;
  /* 2.25rem */
}
.pl-9 {
  padding-left: 36px;
  /* 2.25rem */
}
.p-10 {
  padding: 40px;
  /* 2.5rem */
}
.px-10 {
  padding-left: 40px;
  padding-right: 40px;
  /* 2.5rem */
}
.py-10 {
  padding-top: 40px;
  padding-bottom: 40px;
  /* 2.5rem */
}
.ps-10 {
  padding-inline-start: 40px;
  /* 2.5rem */
}
.pe-10 {
  padding-inline-end: 40px;
  /* 2.5rem */
}
.pt-10 {
  padding-top: 40px;
  /* 2.5rem */
}
.pr-10 {
  padding-right: 40px;
  /* 2.5rem */
}
.pb-10 {
  padding-bottom: 40px;
  /* 2.5rem */
}
.pl-10 {
  padding-left: 40px;
  /* 2.5rem */
}
.p-11 {
  padding: 44px;
  /* 2.75rem */
}
.px-11 {
  padding-left: 44px;
  padding-right: 44px;
  /* 2.75rem */
}
.py-11 {
  padding-top: 44px;
  padding-bottom: 44px;
  /* 2.75rem */
}
.ps-11 {
  padding-inline-start: 44px;
  /* 2.75rem */
}
.pe-11 {
  padding-inline-end: 44px;
  /* 2.75rem */
}
.pt-11 {
  padding-top: 44px;
  /* 2.75rem */
}
.pr-11 {
  padding-right: 44px;
  /* 2.75rem */
}
.pb-11 {
  padding-bottom: 44px;
  /* 2.75rem */
}
.pl-11 {
  padding-left: 44px;
  /* 2.75rem */
}
.p-12 {
  padding: 48px;
  /* 3rem */
}
.px-12 {
  padding-left: 48px;
  padding-right: 48px;
  /* 3rem */
}
.py-12 {
  padding-top: 48px;
  padding-bottom: 48px;
  /* 3rem */
}
.ps-12 {
  padding-inline-start: 48px;
  /* 3rem */
}
.pe-12 {
  padding-inline-end: 48px;
  /* 3rem */
}
.pt-12 {
  padding-top: 48px;
  /* 3rem */
}
.pr-12 {
  padding-right: 48px;
  /* 3rem */
}
.pb-12 {
  padding-bottom: 48px;
  /* 3rem */
}
.pl-12 {
  padding-left: 48px;
  /* 3rem */
}
.p-14 {
  padding: 56px;
  /* 3.5rem */
}
.px-14 {
  padding-left: 56px;
  padding-right: 56px;
  /* 3.5rem */
}
.py-14 {
  padding-top: 56px;
  padding-bottom: 56px;
  /* 3.5rem */
}
.ps-14 {
  padding-inline-start: 56px;
  /* 3.5rem */
}
.pe-14 {
  padding-inline-end: 56px;
  /* 3.5rem */
}
.pt-14 {
  padding-top: 56px;
  /* 3.5rem */
}
.pr-14 {
  padding-right: 56px;
  /* 3.5rem */
}
.pb-14 {
  padding-bottom: 56px;
  /* 3.5rem */
}
.pl-14 {
  padding-left: 56px;
  /* 3.5rem */
}
.p-16 {
  padding: 64px;
  /* 4rem */
}
.px-16 {
  padding-left: 64px;
  padding-right: 64px;
  /* 4rem */
}
.py-16 {
  padding-top: 64px;
  padding-bottom: 64px;
  /* 4rem */
}
.ps-16 {
  padding-inline-start: 64px;
  /* 4rem */
}
.pe-16 {
  padding-inline-end: 64px;
  /* 4rem */
}
.pt-16 {
  padding-top: 64px;
  /* 4rem */
}
.pr-16 {
  padding-right: 64px;
  /* 4rem */
}
.pb-16 {
  padding-bottom: 64px;
  /* 4rem */
}
.pl-16 {
  padding-left: 64px;
  /* 4rem */
}
.p-20 {
  padding: 80px;
  /* 5rem */
}
.px-20 {
  padding-left: 80px;
  padding-right: 80px;
  /* 5rem */
}
.py-20 {
  padding-top: 80px;
  padding-bottom: 80px;
  /* 5rem */
}
.ps-20 {
  padding-inline-start: 80px;
  /* 5rem */
}
.pe-20 {
  padding-inline-end: 80px;
  /* 5rem */
}
.pt-20 {
  padding-top: 80px;
  /* 5rem */
}
.pr-20 {
  padding-right: 80px;
  /* 5rem */
}
.pb-20 {
  padding-bottom: 80px;
  /* 5rem */
}
.pl-20 {
  padding-left: 80px;
  /* 5rem */
}
.p-24 {
  padding: 96px;
  /* 6rem */
}
.px-24 {
  padding-left: 96px;
  padding-right: 96px;
  /* 6rem */
}
.py-24 {
  padding-top: 96px;
  padding-bottom: 96px;
  /* 6rem */
}
.ps-24 {
  padding-inline-start: 96px;
  /* 6rem */
}
.pe-24 {
  padding-inline-end: 96px;
  /* 6rem */
}
.pt-24 {
  padding-top: 96px;
  /* 6rem */
}
.pr-24 {
  padding-right: 96px;
  /* 6rem */
}
.pb-24 {
  padding-bottom: 96px;
  /* 6rem */
}
.pl-24 {
  padding-left: 96px;
  /* 6rem */
}
.p-28 {
  padding: 112px;
  /* 7rem */
}
.px-28 {
  padding-left: 112px;
  padding-right: 112px;
  /* 7rem */
}
.py-28 {
  padding-top: 112px;
  padding-bottom: 112px;
  /* 7rem */
}
.ps-28 {
  padding-inline-start: 112px;
  /* 7rem */
}
.pe-28 {
  padding-inline-end: 112px;
  /* 7rem */
}
.pt-28 {
  padding-top: 112px;
  /* 7rem */
}
.pr-28 {
  padding-right: 112px;
  /* 7rem */
}
.pb-28 {
  padding-bottom: 112px;
  /* 7rem */
}
.pl-28 {
  padding-left: 112px;
  /* 7rem */
}
.p-32 {
  padding: 128px;
  /* 8rem */
}
.px-32 {
  padding-left: 128px;
  padding-right: 128px;
  /* 8rem */
}
.py-32 {
  padding-top: 128px;
  padding-bottom: 128px;
  /* 8rem */
}
.ps-32 {
  padding-inline-start: 128px;
  /* 8rem */
}
.pe-32 {
  padding-inline-end: 128px;
  /* 8rem */
}
.pt-32 {
  padding-top: 128px;
  /* 8rem */
}
.pr-32 {
  padding-right: 128px;
  /* 8rem */
}
.pb-32 {
  padding-bottom: 128px;
  /* 8rem */
}
.pl-32 {
  padding-left: 128px;
  /* 8rem */
}
.p-36 {
  padding: 144px;
  /* 9rem */
}
.px-36 {
  padding-left: 144px;
  padding-right: 144px;
  /* 9rem */
}
.py-36 {
  padding-top: 144px;
  padding-bottom: 144px;
  /* 9rem */
}
.ps-36 {
  padding-inline-start: 144px;
  /* 9rem */
}
.pe-36 {
  padding-inline-end: 144px;
  /* 9rem */
}
.pt-36 {
  padding-top: 144px;
  /* 9rem */
}
.pr-36 {
  padding-right: 144px;
  /* 9rem */
}
.pb-36 {
  padding-bottom: 144px;
  /* 9rem */
}
.pl-36 {
  padding-left: 144px;
  /* 9rem */
}
.p-40 {
  padding: 160px;
  /* 10rem */
}
.px-40 {
  padding-left: 160px;
  padding-right: 160px;
  /* 10rem */
}
.py-40 {
  padding-top: 160px;
  padding-bottom: 160px;
  /* 10rem */
}
.ps-40 {
  padding-inline-start: 160px;
  /* 10rem */
}
.pe-40 {
  padding-inline-end: 160px;
  /* 10rem */
}
.pt-40 {
  padding-top: 160px;
  /* 10rem */
}
.pr-40 {
  padding-right: 160px;
  /* 10rem */
}
.pb-40 {
  padding-bottom: 160px;
  /* 10rem */
}
.pl-40 {
  padding-left: 160px;
  /* 10rem */
}
.p-44 {
  padding: 176px;
  /* 11rem */
}
.px-44 {
  padding-left: 176px;
  padding-right: 176px;
  /* 11rem */
}
.py-44 {
  padding-top: 176px;
  padding-bottom: 176px;
  /* 11rem */
}
.ps-44 {
  padding-inline-start: 176px;
  /* 11rem */
}
.pe-44 {
  padding-inline-end: 176px;
  /* 11rem */
}
.pt-44 {
  padding-top: 176px;
  /* 11rem */
}
.pr-44 {
  padding-right: 176px;
  /* 11rem */
}
.pb-44 {
  padding-bottom: 176px;
  /* 11rem */
}
.pl-44 {
  padding-left: 176px;
  /* 11rem */
}
.p-48 {
  padding: 192px;
  /* 12rem */
}
.px-48 {
  padding-left: 192px;
  padding-right: 192px;
  /* 12rem */
}
.py-48 {
  padding-top: 192px;
  padding-bottom: 192px;
  /* 12rem */
}
.ps-48 {
  padding-inline-start: 192px;
  /* 12rem */
}
.pe-48 {
  padding-inline-end: 192px;
  /* 12rem */
}
.pt-48 {
  padding-top: 192px;
  /* 12rem */
}
.pr-48 {
  padding-right: 192px;
  /* 12rem */
}
.pb-48 {
  padding-bottom: 192px;
  /* 12rem */
}
.pl-48 {
  padding-left: 192px;
  /* 12rem */
}
.p-52 {
  padding: 208px;
  /* 13rem */
}
.px-52 {
  padding-left: 208px;
  padding-right: 208px;
  /* 13rem */
}
.py-52 {
  padding-top: 208px;
  padding-bottom: 208px;
  /* 13rem */
}
.ps-52 {
  padding-inline-start: 208px;
  /* 13rem */
}
.pe-52 {
  padding-inline-end: 208px;
  /* 13rem */
}
.pt-52 {
  padding-top: 208px;
  /* 13rem */
}
.pr-52 {
  padding-right: 208px;
  /* 13rem */
}
.pb-52 {
  padding-bottom: 208px;
  /* 13rem */
}
.pl-52 {
  padding-left: 208px;
  /* 13rem */
}
.p-56 {
  padding: 224px;
  /* 14rem */
}
.px-56 {
  padding-left: 224px;
  padding-right: 224px;
  /* 14rem */
}
.py-56 {
  padding-top: 224px;
  padding-bottom: 224px;
  /* 14rem */
}
.ps-56 {
  padding-inline-start: 224px;
  /* 14rem */
}
.pe-56 {
  padding-inline-end: 224px;
  /* 14rem */
}
.pt-56 {
  padding-top: 224px;
  /* 14rem */
}
.pr-56 {
  padding-right: 224px;
  /* 14rem */
}
.pb-56 {
  padding-bottom: 224px;
  /* 14rem */
}
.pl-56 {
  padding-left: 224px;
  /* 14rem */
}
.p-60 {
  padding: 240px;
  /* 15rem */
}
.px-60 {
  padding-left: 240px;
  padding-right: 240px;
  /* 15rem */
}
.py-60 {
  padding-top: 240px;
  padding-bottom: 240px;
  /* 15rem */
}
.ps-60 {
  padding-inline-start: 240px;
  /* 15rem */
}
.pe-60 {
  padding-inline-end: 240px;
  /* 15rem */
}
.pt-60 {
  padding-top: 240px;
  /* 15rem */
}
.pr-60 {
  padding-right: 240px;
  /* 15rem */
}
.pb-60 {
  padding-bottom: 240px;
  /* 15rem */
}
.pl-60 {
  padding-left: 240px;
  /* 15rem */
}
.p-64 {
  padding: 256px;
  /* 16rem */
}
.px-64 {
  padding-left: 256px;
  padding-right: 256px;
  /* 16rem */
}
.py-64 {
  padding-top: 256px;
  padding-bottom: 256px;
  /* 16rem */
}
.ps-64 {
  padding-inline-start: 256px;
  /* 16rem */
}
.pe-64 {
  padding-inline-end: 256px;
  /* 16rem */
}
.pt-64 {
  padding-top: 256px;
  /* 16rem */
}
.pr-64 {
  padding-right: 256px;
  /* 16rem */
}
.pb-64 {
  padding-bottom: 256px;
  /* 16rem */
}
.pl-64 {
  padding-left: 256px;
  /* 16rem */
}
.p-72 {
  padding: 288px;
  /* 18rem */
}
.px-72 {
  padding-left: 288px;
  padding-right: 288px;
  /* 18rem */
}
.py-72 {
  padding-top: 288px;
  padding-bottom: 288px;
  /* 18rem */
}
.ps-72 {
  padding-inline-start: 288px;
  /* 18rem */
}
.pe-72 {
  padding-inline-end: 288px;
  /* 18rem */
}
.pt-72 {
  padding-top: 288px;
  /* 18rem */
}
.pr-72 {
  padding-right: 288px;
  /* 18rem */
}
.pb-72 {
  padding-bottom: 288px;
  /* 18rem */
}
.pl-72 {
  padding-left: 288px;
  /* 18rem */
}
.p-80 {
  padding: 320px;
  /* 20rem */
}
.px-80 {
  padding-left: 320px;
  padding-right: 320px;
  /* 20rem */
}
.py-80 {
  padding-top: 320px;
  padding-bottom: 320px;
  /* 20rem */
}
.ps-80 {
  padding-inline-start: 320px;
  /* 20rem */
}
.pe-80 {
  padding-inline-end: 320px;
  /* 20rem */
}
.pt-80 {
  padding-top: 320px;
  /* 20rem */
}
.pr-80 {
  padding-right: 320px;
  /* 20rem */
}
.pb-80 {
  padding-bottom: 320px;
  /* 20rem */
}
.pl-80 {
  padding-left: 320px;
  /* 20rem */
}
.p-96 {
  padding: 384px;
  /* 24rem */
}
.px-96 {
  padding-left: 384px;
  padding-right: 384px;
  /* 24rem */
}
.py-96 {
  padding-top: 384px;
  padding-bottom: 384px;
  /* 24rem */
}
.ps-96 {
  padding-inline-start: 384px;
  /* 24rem */
}
.pe-96 {
  padding-inline-end: 384px;
  /* 24rem */
}
.pt-96 {
  padding-top: 384px;
  /* 24rem */
}
.pr-96 {
  padding-right: 384px;
  /* 24rem */
}
.pb-96 {
  padding-bottom: 384px;
  /* 24rem */
}
.pl-96 {
  padding-left: 384px;
  /* 24rem */
}
/************************************************
 * margin
 ************************************************/
.-m-px {
  margin: -1px;
}
.-mx-px {
  margin-left: -1px;
  margin-right: -1px;
}
.-my-px {
  margin-top: -1px;
  margin-bottom: -1px;
}
.-ms-p {
  margin-inline-start: -1px;
}
.-me-px {
  margin-inline-end: -1px;
}
.-mt-px {
  margin-top: -1px;
}
.-mr-px {
  margin-right: -1px;
}
.-mb-px {
  margin-bottom: -1px;
}
.-ml-px {
  margin-left: -1px;
}
.-m-0\.5 {
  margin: 2px;
  /* -0.125rem */
}
.-mx-0\.5 {
  margin-left: 2px;
  margin-right: 2px;
  /* -0.125rem */
}
.-my-0\.5 {
  margin-top: 2px;
  margin-bottom: 2px;
  /* -0.125rem */
}
.-ms-0\.5 {
  margin-inline-start: 2px;
  /* -0.125rem */
}
.-me-0\.5 {
  margin-inline-end: 2px;
  /* -0.125rem */
}
.-mt-0\.5 {
  margin-top: 2px;
  /* -0.125rem */
}
.-mr-0\.5 {
  margin-right: 2px;
  /* -0.125rem */
}
.-mb-0\.5 {
  margin-bottom: 2px;
  /* -0.125rem */
}
.-ml-0\.5 {
  margin-left: 2px;
  /* -0.125rem */
}
.-m-1 {
  margin: 4px;
  /* 4px */
}
.-mx-1 {
  margin-left: 4px;
  margin-right: 4px;
  /* -0.25rem */
}
.-my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
  /* -0.25rem */
}
.-ms-1 {
  margin-inline-start: 4px;
  /* -0.25rem */
}
.-me-1 {
  margin-inline-end: 4px;
  /* -0.25rem */
}
.-mt-1 {
  margin-top: 4px;
  /* -0.25rem */
}
.-mr-1 {
  margin-right: 4px;
  /* -0.25rem */
}
.-mb-1 {
  margin-bottom: 4px;
  /* -0.25rem */
}
.-ml-1 {
  margin-left: 4px;
  /* -0.25rem */
}
.-m-1\.5 {
  margin: 6px;
  /* -0.375rem */
}
.-mx-1\.5 {
  margin-left: 6px;
  margin-right: 6px;
  /* -0.375rem */
}
.-my-1\.5 {
  margin-top: 6px;
  margin-bottom: 6px;
  /* -0.375rem */
}
.-ms-1\.5 {
  margin-inline-start: 6px;
  /* -0.375rem */
}
.-me-1\.5 {
  margin-inline-end: 6px;
  /* -0.375rem */
}
.-mt-1\.5 {
  margin-top: 6px;
  /* -0.375rem */
}
.-mr-1\.5 {
  margin-right: 6px;
  /* -0.375rem */
}
.-mb-1\.5 {
  margin-bottom: 6px;
  /* -0.375rem */
}
.-ml-1\.5 {
  margin-left: 6px;
  /* -0.375rem */
}
.-m-2 {
  margin: 8px;
  /* -0.5rem */
}
.-mx-2 {
  margin-left: 8px;
  margin-right: 8px;
  /* -0.5rem */
}
.-my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
  /* -0.5rem */
}
.-ms-2 {
  margin-inline-start: 8px;
  /* -0.5rem */
}
.-me-2 {
  margin-inline-end: 8px;
  /* -0.5rem */
}
.-mt-2 {
  margin-top: 8px;
  /* -0.5rem */
}
.-mr-2 {
  margin-right: 8px;
  /* -0.5rem */
}
.-mb-2 {
  margin-bottom: 8px;
  /* -0.5rem */
}
.-ml-2 {
  margin-left: 8px;
  /* -0.5rem */
}
.-m-2\.5 {
  margin: 10px;
  /* -0.625rem */
}
.-mx-2\.5 {
  margin-left: 10px;
  margin-right: 10px;
  /* -0.625rem */
}
.-my-2\.5 {
  margin-top: 10px;
  margin-bottom: 10px;
  /* -0.625rem */
}
.-ms-2\.5 {
  margin-inline-start: 10px;
  /* -0.625rem */
}
.-me-2\.5 {
  margin-inline-end: 10px;
  /* -0.625rem */
}
.-mt-2\.5 {
  margin-top: 10px;
  /* -0.625rem */
}
.-mr-2\.5 {
  margin-right: 10px;
  /* -0.625rem */
}
.-mb-2\.5 {
  margin-bottom: 10px;
  /* -0.625rem */
}
.-ml-2\.5 {
  margin-left: 10px;
  /* -0.625rem */
}
.-m-3 {
  margin: 12px;
  /* -0.75rem */
}
.-mx-3 {
  margin-left: 12px;
  margin-right: 12px;
  /* -0.75rem */
}
.-my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
  /* -0.75rem */
}
.-ms-3 {
  margin-inline-start: 12px;
  /* -0.75rem */
}
.-me-3 {
  margin-inline-end: 12px;
  /* -0.75rem */
}
.-mt-3 {
  margin-top: 12px;
  /* -0.75rem */
}
.-mr-3 {
  margin-right: 12px;
  /* -0.75rem */
}
.-mb-3 {
  margin-bottom: 12px;
  /* -0.75rem */
}
.-ml-3 {
  margin-left: 12px;
  /* -0.75rem */
}
.-m-3\.5 {
  margin: 14px;
  /* -0.875rem */
}
.-mx-3\.5 {
  margin-left: 14px;
  margin-right: 14px;
  /* -0.875rem */
}
.-my-3\.5 {
  margin-top: 14px;
  margin-bottom: 14px;
  /* -0.875rem */
}
.-ms-3\.5 {
  margin-inline-start: 14px;
  /* -0.875rem */
}
.-me-3\.5 {
  margin-inline-end: 14px;
  /* -0.875rem */
}
.-mt-3\.5 {
  margin-top: 14px;
  /* -0.875rem */
}
.-mr-3\.5 {
  margin-right: 14px;
  /* -0.875rem */
}
.-mb-3\.5 {
  margin-bottom: 14px;
  /* -0.875rem */
}
.-ml-3\.5 {
  margin-left: 14px;
  /* -0.875rem */
}
.-m-4 {
  margin: 16px;
  /* -1rem */
}
.-mx-4 {
  margin-left: 16px;
  margin-right: 16px;
  /* -1rem */
}
.-my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
  /* -1rem */
}
.-ms-4 {
  margin-inline-start: 16px;
  /* -1rem */
}
.-me-4 {
  margin-inline-end: 16px;
  /* -1rem */
}
.-mt-4 {
  margin-top: 16px;
  /* -1rem */
}
.-mr-4 {
  margin-right: 16px;
  /* -1rem */
}
.-mb-4 {
  margin-bottom: 16px;
  /* -1rem */
}
.-ml-4 {
  margin-left: 16px;
  /* -1rem */
}
.-m-5 {
  margin: 20px;
  /* -1.25rem */
}
.-mx-5 {
  margin-left: 20px;
  margin-right: 20px;
  /* -1.25rem */
}
.-my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
  /* -1.25rem */
}
.-ms-5 {
  margin-inline-start: 20px;
  /* -1.25rem */
}
.-me-5 {
  margin-inline-end: 20px;
  /* -1.25rem */
}
.-mt-5 {
  margin-top: 20px;
  /* -1.25rem */
}
.-mr-5 {
  margin-right: 20px;
  /* -1.25rem */
}
.-mb-5 {
  margin-bottom: 20px;
  /* -1.25rem */
}
.-ml-5 {
  margin-left: 20px;
  /* -1.25rem */
}
.-m-6 {
  margin: 24px;
  /* -1.5rem */
}
.-mx-6 {
  margin-left: 24px;
  margin-right: 24px;
  /* -1.5rem */
}
.-my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
  /* -1.5rem */
}
.-ms-6 {
  margin-inline-start: 24px;
  /* 24px */
}
.-me-6 {
  margin-inline-end: 24px;
  /* 24px */
}
.-mt-6 {
  margin-top: 24px;
  /* 24px */
}
.-mr-6 {
  margin-right: 24px;
  /* 24px */
}
.-mb-6 {
  margin-bottom: 24px;
  /* 24px */
}
.-ml-6 {
  margin-left: 24px;
  /* 24px */
}
.-m-7 {
  margin: 28px;
  /* -1.75rem */
}
.-mx-7 {
  margin-left: 28px;
  margin-right: 28px;
  /* -1.75rem */
}
.-my-7 {
  margin-top: 28px;
  margin-bottom: 28px;
  /* -1.75rem */
}
.-ms-7 {
  margin-inline-start: 28px;
  /* -1.75rem */
}
.-me-7 {
  margin-inline-end: 28px;
  /* -1.75rem */
}
.-mt-7 {
  margin-top: 28px;
  /* -1.75rem */
}
.-mr-7 {
  margin-right: 28px;
  /* -1.75rem */
}
.-mb-7 {
  margin-bottom: 28px;
  /* -1.75rem */
}
.-ml-7 {
  margin-left: 28px;
  /* -1.75rem */
}
.-m-8 {
  margin: 32px;
  /* -2rem */
}
.-mx-8 {
  margin-left: 32px;
  margin-right: 32px;
  /* -2rem */
}
.-my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
  /* -2rem */
}
.-ms-8 {
  margin-inline-start: 32px;
  /* -2rem */
}
.-me-8 {
  margin-inline-end: 32px;
  /* -2rem */
}
.-mt-8 {
  margin-top: 32px;
  /* -2rem */
}
.-mr-8 {
  margin-right: 32px;
  /* -2rem */
}
.-mb-8 {
  margin-bottom: 32px;
  /* -2rem */
}
.-ml-8 {
  margin-left: 32px;
  /* -2rem */
}
.-m-9 {
  margin: 36px;
  /* -2.25rem */
}
.-mx-9 {
  margin-left: 36px;
  margin-right: 36px;
  /* -2.25rem */
}
.-my-9 {
  margin-top: 36px;
  margin-bottom: 36px;
  /* -2.25rem */
}
.-ms-9 {
  margin-inline-start: 36px;
  /* -2.25rem */
}
.-me-9 {
  margin-inline-end: 36px;
  /* -2.25rem */
}
.-mt-9 {
  margin-top: 36px;
  /* -2.25rem */
}
.-mr-9 {
  margin-right: 36px;
  /* -2.25rem */
}
.-mb-9 {
  margin-bottom: 36px;
  /* -2.25rem */
}
.-ml-9 {
  margin-left: 36px;
  /* -2.25rem */
}
.-m-10 {
  margin: 40px;
  /* -2.5rem */
}
.-mx-10 {
  margin-left: 40px;
  margin-right: 40px;
  /* -2.5rem */
}
.-my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
  /* -2.5rem */
}
.-ms-10 {
  margin-inline-start: 40px;
  /* -2.5rem */
}
.-me-10 {
  margin-inline-end: 40px;
  /* -2.5rem */
}
.-mt-10 {
  margin-top: 40px;
  /* -2.5rem */
}
.-mr-10 {
  margin-right: 40px;
  /* -2.5rem */
}
.-mb-10 {
  margin-bottom: 40px;
  /* -2.5rem */
}
.-ml-10 {
  margin-left: 40px;
  /* -2.5rem */
}
.-m-11 {
  margin: 44px;
  /* -2.75rem */
}
.-mx-11 {
  margin-left: 44px;
  margin-right: 44px;
  /* -2.75rem */
}
.-my-11 {
  margin-top: 44px;
  margin-bottom: 44px;
  /* -2.75rem */
}
.-ms-11 {
  margin-inline-start: 44px;
  /* -2.75rem */
}
.-me-11 {
  margin-inline-end: 44px;
  /* -2.75rem */
}
.-mt-11 {
  margin-top: 44px;
  /* -2.75rem */
}
.-mr-11 {
  margin-right: 44px;
  /* -2.75rem */
}
.-mb-11 {
  margin-bottom: 44px;
  /* -2.75rem */
}
.-ml-11 {
  margin-left: 44px;
  /* -2.75rem */
}
.-m-12 {
  margin: 48px;
  /* -3rem */
}
.-mx-12 {
  margin-left: 48px;
  margin-right: 48px;
  /* -3rem */
}
.-my-12 {
  margin-top: 48px;
  margin-bottom: 48px;
  /* -3rem */
}
.-ms-12 {
  margin-inline-start: 48px;
  /* -3rem */
}
.-me-12 {
  margin-inline-end: 48px;
  /* -3rem */
}
.-mt-12 {
  margin-top: 48px;
  /* -3rem */
}
.-mr-12 {
  margin-right: 48px;
  /* -3rem */
}
.-mb-12 {
  margin-bottom: 48px;
  /* -3rem */
}
.-ml-12 {
  margin-left: 48px;
  /* -3rem */
}
.-m-14 {
  margin: 56px;
  /* -3.5rem */
}
.-mx-14 {
  margin-left: 56px;
  margin-right: 56px;
  /* -3.5rem */
}
.-my-14 {
  margin-top: 56px;
  margin-bottom: 56px;
  /* -3.5rem */
}
.-ms-14 {
  margin-inline-start: 56px;
  /* -3.5rem */
}
.-me-14 {
  margin-inline-end: 56px;
  /* -3.5rem */
}
.-mt-14 {
  margin-top: 56px;
  /* -3.5rem */
}
.-mr-14 {
  margin-right: 56px;
  /* -3.5rem */
}
.-mb-14 {
  margin-bottom: 56px;
  /* -3.5rem */
}
.-ml-14 {
  margin-left: 56px;
  /* -3.5rem */
}
.-m-16 {
  margin: 64px;
  /* -4rem */
}
.-mx-16 {
  margin-left: 64px;
  margin-right: 64px;
  /* -4rem */
}
.-my-16 {
  margin-top: 64px;
  margin-bottom: 64px;
  /* -4rem */
}
.-ms-16 {
  margin-inline-start: 64px;
  /* -4rem */
}
.-me-16 {
  margin-inline-end: 64px;
  /* -4rem */
}
.-mt-16 {
  margin-top: 64px;
  /* -4rem */
}
.-mr-16 {
  margin-right: 64px;
  /* -4rem */
}
.-mb-16 {
  margin-bottom: 64px;
  /* -4rem */
}
.-ml-16 {
  margin-left: 64px;
  /* -4rem */
}
.-m-20 {
  margin: 80px;
  /* -5rem */
}
.-mx-20 {
  margin-left: 80px;
  margin-right: 80px;
  /* -5rem */
}
.-my-20 {
  margin-top: 80px;
  margin-bottom: 80px;
  /* -5rem */
}
.-ms-20 {
  margin-inline-start: 80px;
  /* -5rem */
}
.-me-20 {
  margin-inline-end: 80px;
  /* -5rem */
}
.-mt-20 {
  margin-top: 80px;
  /* -5rem */
}
.-mr-20 {
  margin-right: 80px;
  /* -5rem */
}
.-mb-20 {
  margin-bottom: 80px;
  /* -5rem */
}
.-ml-20 {
  margin-left: 80px;
  /* -5rem */
}
.-m-24 {
  margin: 96px;
  /* -6rem */
}
.-mx-24 {
  margin-left: 96px;
  margin-right: 96px;
  /* -6rem */
}
.-my-24 {
  margin-top: 96px;
  margin-bottom: 96px;
  /* -6rem */
}
.-ms-24 {
  margin-inline-start: 96px;
  /* -6rem */
}
.-me-24 {
  margin-inline-end: 96px;
  /* -6rem */
}
.-mt-24 {
  margin-top: 96px;
  /* -6rem */
}
.-mr-24 {
  margin-right: 96px;
  /* -6rem */
}
.-mb-24 {
  margin-bottom: 96px;
  /* -6rem */
}
.-ml-24 {
  margin-left: 96px;
  /* -6rem */
}
.-m-28 {
  margin: 112px;
  /* -7rem */
}
.-mx-28 {
  margin-left: 112px;
  margin-right: 112px;
  /* -7rem */
}
.-my-28 {
  margin-top: 112px;
  margin-bottom: 112px;
  /* -7rem */
}
.-ms-28 {
  margin-inline-start: 112px;
  /* -7rem */
}
.-me-28 {
  margin-inline-end: 112px;
  /* -7rem */
}
.-mt-28 {
  margin-top: 112px;
  /* -7rem */
}
.-mr-28 {
  margin-right: 112px;
  /* -7rem */
}
.-mb-28 {
  margin-bottom: 112px;
  /* -7rem */
}
.-ml-28 {
  margin-left: 112px;
  /* -7rem */
}
.-m-32 {
  margin: 128px;
  /* -8rem */
}
.-mx-32 {
  margin-left: 128px;
  margin-right: 128px;
  /* -8rem */
}
.-my-32 {
  margin-top: 128px;
  margin-bottom: 128px;
}
.-ms-32 {
  margin-inline-start: 128px;
  /* -8rem */
}
.-me-32 {
  margin-inline-end: 128px;
  /* -8rem */
}
.-mt-32 {
  margin-top: 128px;
  /* -8rem */
}
.-mr-32 {
  margin-right: 128px;
  /* -8rem */
}
.-mb-32 {
  margin-bottom: 128px;
  /* -8rem */
}
.-ml-32 {
  margin-left: 128px;
  /* -8rem */
}
.-m-36 {
  margin: 144px;
  /* -9rem */
}
.-mx-36 {
  margin-left: 144px;
  margin-right: 144px;
  /* -9rem */
}
.-my-36 {
  margin-top: 144px;
  margin-bottom: 144px;
  /* -9rem */
}
.-ms-36 {
  margin-inline-start: 144px;
  /* -9rem */
}
.-me-36 {
  margin-inline-end: 144px;
  /* -9rem */
}
.-mt-36 {
  margin-top: 144px;
  /* -9rem */
}
.-mr-36 {
  margin-right: 144px;
  /* -9rem */
}
.-mb-36 {
  margin-bottom: 144px;
  /* -9rem */
}
.-ml-36 {
  margin-left: 144px;
}
.-m-40 {
  margin: 160px;
  /* -10rem */
}
.-mx-40 {
  margin-left: 160px;
  margin-right: 160px;
  /* -10rem */
}
.-my-40 {
  margin-top: 160px;
  margin-bottom: 160px;
  /* -10rem */
}
.-ms-40 {
  margin-inline-start: 160px;
  /* -10rem */
}
.-me-40 {
  margin-inline-end: 160px;
  /* -10rem */
}
.-mt-40 {
  margin-top: 160px;
  /* -10rem */
}
.-mr-40 {
  margin-right: 160px;
  /* -10rem */
}
.-mb-40 {
  margin-bottom: 160px;
  /* -10rem */
}
.-ml-40 {
  margin-left: 160px;
  /* -10rem */
}
.-m-44 {
  margin: 176px;
  /* -11rem */
}
.-mx-44 {
  margin-left: 176px;
  margin-right: 176px;
  /* -11rem */
}
.-my-44 {
  margin-top: 176px;
  margin-bottom: 176px;
  /* -11rem */
}
.-ms-44 {
  margin-inline-start: 176px;
  /* -11rem */
}
.-me-44 {
  margin-inline-end: 176px;
  /* -11rem */
}
.-mt-44 {
  margin-top: 176px;
  /* -11rem */
}
.-mr-44 {
  margin-right: 176px;
  /* -11rem */
}
.-mb-44 {
  margin-bottom: 176px;
  /* -11rem */
}
.-ml-44 {
  margin-left: 176px;
  /* -11rem */
}
.-m-48 {
  margin: 192px;
  /* -12rem */
}
.-mx-48 {
  margin-left: 192px;
  margin-right: 192px;
  /* -12rem */
}
.-my-48 {
  margin-top: 192px;
  margin-bottom: 192px;
  /* -12rem */
}
.-ms-48 {
  margin-inline-start: 192px;
  /* -12rem */
}
.-me-48 {
  margin-inline-end: 192px;
  /* -12rem */
}
.-mt-48 {
  margin-top: 192px;
  /* -12rem */
}
.-mr-48 {
  margin-right: 192px;
  /* -12rem */
}
.-mb-48 {
  margin-bottom: 192px;
  /* -12rem */
}
.-ml-48 {
  margin-left: 192px;
  /* -12rem */
}
.-m-52 {
  margin: 208px;
  /* -13rem */
}
.-mx-52 {
  margin-left: 208px;
  margin-right: 208px;
  /* -13rem */
}
.-my-52 {
  margin-top: 208px;
  margin-bottom: 208px;
  /* -13rem */
}
.-ms-52 {
  margin-inline-start: 208px;
  /* -13rem */
}
.-me-52 {
  margin-inline-end: 208px;
  /* -13rem */
}
.-mt-52 {
  margin-top: 208px;
  /* -13rem */
}
.-mr-52 {
  margin-right: 208px;
  /* -13rem */
}
.-mb-52 {
  margin-bottom: 208px;
  /* -13rem */
}
.-ml-52 {
  margin-left: 208px;
  /* -13rem */
}
.-m-56 {
  margin: 224px;
  /* -14rem */
}
.-mx-56 {
  margin-left: 224px;
  margin-right: 224px;
  /* -14rem */
}
.-my-56 {
  margin-top: 224px;
  margin-bottom: 224px;
  /* -14rem */
}
.-ms-56 {
  margin-inline-start: 224px;
  /* -14rem */
}
.-me-56 {
  margin-inline-end: 224px;
  /* -14rem */
}
.-mt-56 {
  margin-top: 224px;
  /* -14rem */
}
.-mr-56 {
  margin-right: 224px;
  /* -14rem */
}
.-mb-56 {
  margin-bottom: 224px;
  /* -14rem */
}
.-ml-56 {
  margin-left: 224px;
  /* -14rem */
}
.-m-60 {
  margin: 240px;
  /* -15rem */
}
.-mx-60 {
  margin-left: 240px;
  margin-right: 240px;
  /* -15rem */
}
.-my-60 {
  margin-top: 240px;
  margin-bottom: 240px;
  /* -15rem */
}
.-ms-60 {
  margin-inline-start: 240px;
  /* -15rem */
}
.-me-60 {
  margin-inline-end: 240px;
  /* -15rem */
}
.-mt-60 {
  margin-top: 240px;
  /* -15rem */
}
.-mr-60 {
  margin-right: 240px;
  /* -15rem */
}
.-mb-60 {
  margin-bottom: 240px;
  /* -15rem */
}
.-ml-60 {
  margin-left: 240px;
  /* -15rem */
}
.-m-64 {
  margin: 256px;
  /* -16rem */
}
.-mx-64 {
  margin-left: 256px;
  margin-right: 256px;
  /* -16rem */
}
.-my-64 {
  margin-top: 256px;
  margin-bottom: 256px;
  /* -16rem */
}
.-ms-64 {
  margin-inline-start: 256px;
  /* -16rem */
}
.-me-64 {
  margin-inline-end: 256px;
  /* -16rem */
}
.-mt-64 {
  margin-top: 256px;
  /* -16rem */
}
.-mr-64 {
  margin-right: 256px;
  /* -16rem */
}
.-mb-64 {
  margin-bottom: 256px;
  /* -16rem */
}
.-ml-64 {
  margin-left: 256px;
  /* -16rem */
}
.-m-72 {
  margin: 288px;
  /* -18rem */
}
.-mx-72 {
  margin-left: 288px;
  margin-right: 288px;
  /* -18rem */
}
.-my-72 {
  margin-top: 288px;
  margin-bottom: 288px;
  /* -18rem */
}
.-ms-72 {
  margin-inline-start: 288px;
  /* -18rem */
}
.-me-72 {
  margin-inline-end: 288px;
  /* -18rem */
}
.-mt-72 {
  margin-top: 288px;
  /* -18rem */
}
.-mr-72 {
  margin-right: 288px;
  /* -18rem */
}
.-mb-72 {
  margin-bottom: 288px;
  /* -18rem */
}
.-ml-72 {
  margin-left: 288px;
  /* -18rem */
}
.-m-80 {
  margin: 320px;
  /* -20rem */
}
.-mx-80 {
  margin-left: 320px;
  margin-right: 320px;
  /* -20rem */
}
.-my-80 {
  margin-top: 320px;
  margin-bottom: 320px;
  /* -20rem */
}
.-ms-80 {
  margin-inline-start: 320px;
  /* -20rem */
}
.-me-80 {
  margin-inline-end: 320px;
  /* -20rem */
}
.-mt-80 {
  margin-top: 320px;
  /* -20rem */
}
.-mr-80 {
  margin-right: 320px;
  /* -20rem */
}
.-mb-80 {
  margin-bottom: 320px;
  /* -20rem */
}
.-ml-80 {
  margin-left: 320px;
  /* -20rem */
}
.-m-96 {
  margin: 384px;
  /* -24rem */
}
.-mx-96 {
  margin-left: 384px;
  margin-right: 384px;
  /* -24rem */
}
.-my-96 {
  margin-top: 384px;
  margin-bottom: 384px;
  /* -24rem */
}
.-ms-96 {
  margin-inline-start: 384px;
  /* -24rem */
}
.-me-96 {
  margin-inline-end: 384px;
  /* -24rem */
}
.-mt-96 {
  margin-top: 384px;
  /* -24rem */
}
.-mr-96 {
  margin-right: 384px;
  /* -24rem */
}
.-mb-96 {
  margin-bottom: 384px;
  /* -24rem */
}
.-ml-96 {
  margin-left: 384px;
  /* -24rem */
}
.m-0 {
  margin: 0px !important;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.ms-0 {
  margin-inline-start: 0px;
}
.me-0 {
  margin-inline-end: 0px;
}
.mt-0 {
  margin-top: 0px;
}
.mr-0 {
  margin-right: 0px;
}
.mb-0 {
  margin-bottom: 0px;
}
.ml-0 {
  margin-left: 0px;
}
.m-px {
  margin: 1px;
}
.mx-px {
  margin-left: 1px;
  margin-right: 1px;
}
.my-px {
  margin-top: 1px;
  margin-bottom: 1px;
}
.ms-p {
  margin-inline-start: 1px;
}
.me-px {
  margin-inline-end: 1px;
}
.mt-px {
  margin-top: 1px;
}
.mr-px {
  margin-right: 1px;
}
.mb-px {
  margin-bottom: 1px;
}
.ml-px {
  margin-left: 1px;
}
.m-0\.5 {
  margin: 2px;
  /* 0.125rem */
}
.mx-0\.5 {
  margin-left: 2px;
  margin-right: 2px;
  /* 0.125rem */
}
.my-0\.5 {
  margin-top: 2px;
  margin-bottom: 2px;
  /* 0.125rem */
}
.ms-0\.5 {
  margin-inline-start: 2px;
  /* 0.125rem */
}
.me-0\.5 {
  margin-inline-end: 2px;
  /* 0.125rem */
}
.mt-0\.5 {
  margin-top: 2px;
  /* 0.125rem */
}
.mr-0\.5 {
  margin-right: 2px;
  /* 0.125rem */
}
.mb-0\.5 {
  margin-bottom: 2px;
  /* 0.125rem */
}
.ml-0\.5 {
  margin-left: 2px;
  /* 0.125rem */
}
.m-1 {
  margin: 4px;
  /* 0.25rem */
}
.mx-1 {
  margin-left: 4px;
  margin-right: 4px;
  /* 0.25rem */
}
.my-1 {
  margin-top: 4px;
  margin-bottom: 4px;
  /* 0.25rem */
}
.ms-1 {
  margin-inline-start: 4px;
  /* 0.25rem */
}
.me-1 {
  margin-inline-end: 4px;
  /* 0.25rem */
}
.mt-1 {
  margin-top: 4px;
  /* 0.25rem */
}
.mr-1 {
  margin-right: 4px;
  /* 0.25rem */
}
.mb-1 {
  margin-bottom: 4px;
  /* 0.25rem */
}
.ml-1 {
  margin-left: 4px;
  /* 0.25rem */
}
.m-1\.5 {
  margin: 6px;
  /* 0.375rem */
}
.mx-1\.5 {
  margin-left: 6px;
  margin-right: 6px;
  /* 0.375rem */
}
.my-1\.5 {
  margin-top: 6px;
  margin-bottom: 6px;
  /* 0.375rem */
}
.ms-1\.5 {
  margin-inline-start: 6px;
  /* 0.375rem */
}
.me-1\.5 {
  margin-inline-end: 6px;
  /* 0.375rem */
}
.mt-1\.5 {
  margin-top: 6px;
  /* 0.375rem */
}
.mr-1\.5 {
  margin-right: 6px;
  /* 0.375rem */
}
.mb-1\.5 {
  margin-bottom: 6px;
  /* 0.375rem */
}
.ml-1\.5 {
  margin-left: 6px;
  /* 0.375rem */
}
.m-2 {
  margin: 8px;
  /* 0.5rem */
}
.mx-2 {
  margin-left: 8px;
  margin-right: 8px;
  /* 0.5rem */
}
.my-2 {
  margin-top: 8px;
  margin-bottom: 8px;
  /* 0.5rem */
}
.ms-2 {
  margin-inline-start: 8px;
  /* 0.5rem */
}
.me-2 {
  margin-inline-end: 8px;
  /* 0.5rem */
}
.mt-2 {
  margin-top: 8px;
  /* 0.5rem */
}
.mr-2 {
  margin-right: 8px;
  /* 0.5rem */
}
.mb-2 {
  margin-bottom: 8px;
  /* 0.5rem */
}
.ml-2 {
  margin-left: 8px;
  /* 0.5rem */
}
.m-2\.5 {
  margin: 10px;
  /* 0.625rem */
}
.mx-2\.5 {
  margin-left: 10px;
  margin-right: 10px;
  /* 0.625rem */
}
.my-2\.5 {
  margin-top: 10px;
  margin-bottom: 10px;
  /* 0.625rem */
}
.ms-2\.5 {
  margin-inline-start: 10px;
  /* 0.625rem */
}
.me-2\.5 {
  margin-inline-end: 10px;
  /* 0.625rem */
}
.mt-2\.5 {
  margin-top: 10px;
  /* 0.625rem */
}
.mr-2\.5 {
  margin-right: 10px;
  /* 0.625rem */
}
.mb-2\.5 {
  margin-bottom: 10px;
  /* 0.625rem */
}
.ml-2\.5 {
  margin-left: 10px;
  /* 0.625rem */
}
.m-3 {
  margin: 12px;
  /* 0.75rem */
}
.mx-3 {
  margin-left: 12px;
  margin-right: 12px;
  /* 0.75rem */
}
.my-3 {
  margin-top: 12px;
  margin-bottom: 12px;
  /* 0.75rem */
}
.ms-3 {
  margin-inline-start: 12px;
  /* 0.75rem */
}
.me-3 {
  margin-inline-end: 12px;
  /* 0.75rem */
}
.mt-3 {
  margin-top: 12px;
  /* 0.75rem */
}
.mr-3 {
  margin-right: 12px;
  /* 0.75rem */
}
.mb-3 {
  margin-bottom: 12px;
  /* 0.75rem */
}
.ml-3 {
  margin-left: 12px;
  /* 0.75rem */
}
.m-3\.5 {
  margin: 14px;
  /* 0.875rem */
}
.mx-3\.5 {
  margin-left: 14px;
  margin-right: 14px;
  /* 0.875rem */
}
.my-3\.5 {
  margin-top: 14px;
  margin-bottom: 14px;
  /* 0.875rem */
}
.ms-3\.5 {
  margin-inline-start: 14px;
  /* 0.875rem */
}
.me-3\.5 {
  margin-inline-end: 14px;
  /* 0.875rem */
}
.mt-3\.5 {
  margin-top: 14px;
  /* 0.875rem */
}
.mr-3\.5 {
  margin-right: 14px;
  /* 0.875rem */
}
.mb-3\.5 {
  margin-bottom: 14px;
  /* 0.875rem */
}
.ml-3\.5 {
  margin-left: 14px;
  /* 0.875rem */
}
.m-4 {
  margin: 16px;
  /* 1rem */
}
.mx-4 {
  margin-left: 16px;
  margin-right: 16px;
  /* 1rem */
}
.my-4 {
  margin-top: 16px;
  margin-bottom: 16px;
  /* 1rem */
}
.ms-4 {
  margin-inline-start: 16px;
  /* 1rem */
}
.me-4 {
  margin-inline-end: 16px;
  /* 1rem */
}
.mt-4 {
  margin-top: 16px;
  /* 1rem */
}
.mr-4 {
  margin-right: 16px;
  /* 1rem */
}
.mb-4 {
  margin-bottom: 16px;
  /* 1rem */
}
.ml-4 {
  margin-left: 16px;
  /* 1rem */
}
.m-5 {
  margin: 20px;
  /* 1.25rem */
}
.mx-5 {
  margin-left: 20px;
  margin-right: 20px;
  /* 1.25rem */
}
.my-5 {
  margin-top: 20px;
  margin-bottom: 20px;
  /* 1.25rem */
}
.ms-5 {
  margin-inline-start: 20px;
  /* 1.25rem */
}
.me-5 {
  margin-inline-end: 20px;
  /* 1.25rem */
}
.mt-5 {
  margin-top: 20px;
  /* 1.25rem */
}
.mr-5 {
  margin-right: 20px;
  /* 1.25rem */
}
.mb-5 {
  margin-bottom: 20px;
  /* 1.25rem */
}
.ml-5 {
  margin-left: 20px;
  /* 1.25rem */
}
.m-6 {
  margin: 24px;
  /* 1.5rem */
}
.mx-6 {
  margin-left: 24px;
  margin-right: 24px;
  /* 1.5rem */
}
.my-6 {
  margin-top: 24px;
  margin-bottom: 24px;
  /* 1.5rem */
}
.ms-6 {
  margin-inline-start: 24px;
  /* 1.5rem */
}
.me-6 {
  margin-inline-end: 24px;
  /* 1.5rem */
}
.mt-6 {
  margin-top: 24px;
  /* 1.5rem */
}
.mr-6 {
  margin-right: 24px;
  /* 1.5rem */
}
.mb-6 {
  margin-bottom: 24px;
  /* 1.5rem */
}
.ml-6 {
  margin-left: 24px;
  /* 1.5rem */
}
.m-7 {
  margin: 28px;
  /* 1.75rem */
}
.mx-7 {
  margin-left: 28px;
  margin-right: 28px;
  /* 1.75rem */
}
.my-7 {
  margin-top: 28px;
  margin-bottom: 28px;
  /* 1.75rem */
}
.ms-7 {
  margin-inline-start: 28px;
  /* 1.75rem */
}
.me-7 {
  margin-inline-end: 28px;
  /* 1.75rem */
}
.mt-7 {
  margin-top: 28px;
  /* 1.75rem */
}
.mr-7 {
  margin-right: 28px;
  /* 1.75rem */
}
.mb-7 {
  margin-bottom: 28px;
  /* 1.75rem */
}
.ml-7 {
  margin-left: 28px;
  /* 1.75rem */
}
.m-8 {
  margin: 32px;
  /* 2rem */
}
.mx-8 {
  margin-left: 32px;
  margin-right: 32px;
  /* 2rem */
}
.my-8 {
  margin-top: 32px;
  margin-bottom: 32px;
  /* 2rem */
}
.ms-8 {
  margin-inline-start: 32px;
  /* 2rem */
}
.me-8 {
  margin-inline-end: 32px;
  /* 2rem */
}
.mt-8 {
  margin-top: 32px;
  /* 2rem */
}
.mr-8 {
  margin-right: 32px;
  /* 2rem */
}
.mb-8 {
  margin-bottom: 32px;
  /* 2rem */
}
.ml-8 {
  margin-left: 32px;
  /* 2rem */
}
.m-9 {
  margin: 36px;
  /* 2.25rem */
}
.mx-9 {
  margin-left: 36px;
  margin-right: 36px;
  /* 2.25rem */
}
.my-9 {
  margin-top: 36px;
  margin-bottom: 36px;
  /* 2.25rem */
}
.ms-9 {
  margin-inline-start: 36px;
  /* 2.25rem */
}
.me-9 {
  margin-inline-end: 36px;
  /* 2.25rem */
}
.mt-9 {
  margin-top: 36px;
  /* 2.25rem */
}
.mr-9 {
  margin-right: 36px;
  /* 2.25rem */
}
.mb-9 {
  margin-bottom: 36px;
  /* 2.25rem */
}
.ml-9 {
  margin-left: 36px;
  /* 2.25rem */
}
.m-10 {
  margin: 40px;
  /* 2.5rem */
}
.mx-10 {
  margin-left: 40px;
  margin-right: 40px;
  /* 2.5rem */
}
.my-10 {
  margin-top: 40px;
  margin-bottom: 40px;
  /* 2.5rem */
}
.ms-10 {
  margin-inline-start: 40px;
  /* 2.5rem */
}
.me-10 {
  margin-inline-end: 40px;
  /* 2.5rem */
}
.mt-10 {
  margin-top: 40px;
  /* 2.5rem */
}
.mr-10 {
  margin-right: 40px;
  /* 2.5rem */
}
.mb-10 {
  margin-bottom: 40px;
  /* 2.5rem */
}
.ml-10 {
  margin-left: 40px;
  /* 2.5rem */
}
.m-11 {
  margin: 44px;
  /* 2.75rem */
}
.mx-11 {
  margin-left: 44px;
  margin-right: 44px;
  /* 2.75rem */
}
.my-11 {
  margin-top: 44px;
  margin-bottom: 44px;
  /* 2.75rem */
}
.ms-11 {
  margin-inline-start: 44px;
  /* 2.75rem */
}
.me-11 {
  margin-inline-end: 44px;
  /* 2.75rem */
}
.mt-11 {
  margin-top: 44px;
  /* 2.75rem */
}
.mr-11 {
  margin-right: 44px;
  /* 2.75rem */
}
.mb-11 {
  margin-bottom: 44px;
  /* 2.75rem */
}
.ml-11 {
  margin-left: 44px;
  /* 2.75rem */
}
.m-12 {
  margin: 48px;
  /* 3rem */
}
.mx-12 {
  margin-left: 48px;
  margin-right: 48px;
  /* 3rem */
}
.my-12 {
  margin-top: 48px;
  margin-bottom: 48px;
  /* 3rem */
}
.ms-12 {
  margin-inline-start: 48px;
  /* 3rem */
}
.me-12 {
  margin-inline-end: 48px;
  /* 3rem */
}
.mt-12 {
  margin-top: 48px;
  /* 3rem */
}
.mr-12 {
  margin-right: 48px;
  /* 3rem */
}
.mb-12 {
  margin-bottom: 48px;
  /* 3rem */
}
.ml-12 {
  margin-left: 48px;
  /* 3rem */
}
.m-14 {
  margin: 56px;
  /* 3.5rem */
}
.mx-14 {
  margin-left: 56px;
  margin-right: 56px;
  /* 3.5rem */
}
.my-14 {
  margin-top: 56px;
  margin-bottom: 56px;
  /* 3.5rem */
}
.ms-14 {
  margin-inline-start: 56px;
  /* 3.5rem */
}
.me-14 {
  margin-inline-end: 56px;
  /* 3.5rem */
}
.mt-14 {
  margin-top: 56px;
  /* 3.5rem */
}
.mr-14 {
  margin-right: 56px;
  /* 3.5rem */
}
.mb-14 {
  margin-bottom: 56px;
  /* 3.5rem */
}
.ml-14 {
  margin-left: 56px;
  /* 3.5rem */
}
.m-16 {
  margin: 64px;
  /* 4rem */
}
.mx-16 {
  margin-left: 64px;
  margin-right: 64px;
  /* 4rem */
}
.my-16 {
  margin-top: 64px;
  margin-bottom: 64px;
  /* 4rem */
}
.ms-16 {
  margin-inline-start: 64px;
  /* 4rem */
}
.me-16 {
  margin-inline-end: 64px;
  /* 4rem */
}
.mt-16 {
  margin-top: 64px;
  /* 4rem */
}
.mr-16 {
  margin-right: 64px;
  /* 4rem */
}
.mb-16 {
  margin-bottom: 64px;
  /* 4rem */
}
.ml-16 {
  margin-left: 64px;
  /* 4rem */
}
.m-20 {
  margin: 80px;
  /* 5rem */
}
.mx-20 {
  margin-left: 80px;
  margin-right: 80px;
  /* 5rem */
}
.my-20 {
  margin-top: 80px;
  margin-bottom: 80px;
  /* 5rem */
}
.ms-20 {
  margin-inline-start: 80px;
  /* 5rem */
}
.me-20 {
  margin-inline-end: 80px;
  /* 5rem */
}
.mt-20 {
  margin-top: 80px;
  /* 5rem */
}
.mr-20 {
  margin-right: 80px;
  /* 5rem */
}
.mb-20 {
  margin-bottom: 80px;
  /* 5rem */
}
.ml-20 {
  margin-left: 80px;
  /* 5rem */
}
.m-24 {
  margin: 96px;
  /* 6rem */
}
.mx-24 {
  margin-left: 96px;
  margin-right: 96px;
  /* 6rem */
}
.my-24 {
  margin-top: 96px;
  margin-bottom: 96px;
  /* 6rem */
}
.ms-24 {
  margin-inline-start: 96px;
  /* 6rem */
}
.me-24 {
  margin-inline-end: 96px;
  /* 6rem */
}
.mt-24 {
  margin-top: 96px;
  /* 6rem */
}
.mr-24 {
  margin-right: 96px;
  /* 6rem */
}
.mb-24 {
  margin-bottom: 96px;
  /* 6rem */
}
.ml-24 {
  margin-left: 96px;
  /* 6rem */
}
.m-28 {
  margin: 112px;
  /* 7rem */
}
.mx-28 {
  margin-left: 112px;
  margin-right: 112px;
  /* 7rem */
}
.my-28 {
  margin-top: 112px;
  margin-bottom: 112px;
  /* 7rem */
}
.ms-28 {
  margin-inline-start: 112px;
  /* 7rem */
}
.me-28 {
  margin-inline-end: 112px;
  /* 7rem */
}
.mt-28 {
  margin-top: 112px;
  /* 7rem */
}
.mr-28 {
  margin-right: 112px;
  /* 7rem */
}
.mb-28 {
  margin-bottom: 112px;
  /* 7rem */
}
.ml-28 {
  margin-left: 112px;
  /* 7rem */
}
.m-32 {
  margin: 128px;
  /* 8rem */
}
.mx-32 {
  margin-left: 128px;
  margin-right: 128px;
  /* 8rem */
}
.my-32 {
  margin-top: 128px;
  margin-bottom: 128px;
  /* 8rem */
}
.ms-32 {
  margin-inline-start: 128px;
  /* 8rem */
}
.me-32 {
  margin-inline-end: 128px;
  /* 8rem */
}
.mt-32 {
  margin-top: 128px;
  /* 8rem */
}
.mr-32 {
  margin-right: 128px;
  /* 8rem */
}
.mb-32 {
  margin-bottom: 128px;
  /* 8rem */
}
.ml-32 {
  margin-left: 128px;
  /* 8rem */
}
.m-36 {
  margin: 144px;
  /* 9rem */
}
.mx-36 {
  margin-left: 144px;
  margin-right: 144px;
  /* 9rem */
}
.my-36 {
  margin-top: 144px;
  margin-bottom: 144px;
  /* 9rem */
}
.ms-36 {
  margin-inline-start: 144px;
  /* 9rem */
}
.me-36 {
  margin-inline-end: 144px;
  /* 9rem */
}
.mt-36 {
  margin-top: 144px;
  /* 9rem */
}
.mr-36 {
  margin-right: 144px;
  /* 9rem */
}
.mb-36 {
  margin-bottom: 144px;
  /* 9rem */
}
.ml-36 {
  margin-left: 144px;
  /* 9rem */
}
.m-40 {
  margin: 160px;
  /* 10rem */
}
.mx-40 {
  margin-left: 160px;
  margin-right: 160px;
  /* 10rem */
}
.my-40 {
  margin-top: 160px;
  margin-bottom: 160px;
  /* 10rem */
}
.ms-40 {
  margin-inline-start: 160px;
  /* 10rem */
}
.me-40 {
  margin-inline-end: 160px;
  /* 10rem */
}
.mt-40 {
  margin-top: 160px;
  /* 10rem */
}
.mr-40 {
  margin-right: 160px;
  /* 10rem */
}
.mb-40 {
  margin-bottom: 160px;
  /* 10rem */
}
.ml-40 {
  margin-left: 160px;
  /* 10rem */
}
.m-44 {
  margin: 176px;
  /* 11rem */
}
.mx-44 {
  margin-left: 176px;
  margin-right: 176px;
  /* 11rem */
}
.my-44 {
  margin-top: 176px;
  margin-bottom: 176px;
  /* 11rem */
}
.ms-44 {
  margin-inline-start: 176px;
  /* 11rem */
}
.me-44 {
  margin-inline-end: 176px;
  /* 11rem */
}
.mt-44 {
  margin-top: 176px;
  /* 11rem */
}
.mr-44 {
  margin-right: 176px;
  /* 11rem */
}
.mb-44 {
  margin-bottom: 176px;
  /* 11rem */
}
.ml-44 {
  margin-left: 176px;
  /* 11rem */
}
.m-48 {
  margin: 192px;
  /* 12rem */
}
.mx-48 {
  margin-left: 192px;
  margin-right: 192px;
  /* 12rem */
}
.my-48 {
  margin-top: 192px;
  margin-bottom: 192px;
  /* 12rem */
}
.ms-48 {
  margin-inline-start: 192px;
  /* 12rem */
}
.me-48 {
  margin-inline-end: 192px;
  /* 12rem */
}
.mt-48 {
  margin-top: 192px;
  /* 12rem */
}
.mr-48 {
  margin-right: 192px;
  /* 12rem */
}
.mb-48 {
  margin-bottom: 192px;
  /* 12rem */
}
.ml-48 {
  margin-left: 192px;
  /* 12rem */
}
.m-52 {
  margin: 208px;
  /* 13rem */
}
.mx-52 {
  margin-left: 208px;
  margin-right: 208px;
  /* 13rem */
}
.my-52 {
  margin-top: 208px;
  margin-bottom: 208px;
  /* 13rem */
}
.ms-52 {
  margin-inline-start: 208px;
  /* 13rem */
}
.me-52 {
  margin-inline-end: 208px;
  /* 13rem */
}
.mt-52 {
  margin-top: 208px;
  /* 13rem */
}
.mr-52 {
  margin-right: 208px;
  /* 13rem */
}
.mb-52 {
  margin-bottom: 208px;
  /* 13rem */
}
.ml-52 {
  margin-left: 208px;
  /* 13rem */
}
.m-56 {
  margin: 224px;
  /* 14rem */
}
.mx-56 {
  margin-left: 224px;
  margin-right: 224px;
  /* 14rem */
}
.my-56 {
  margin-top: 224px;
  margin-bottom: 224px;
  /* 14rem */
}
.ms-56 {
  margin-inline-start: 224px;
  /* 14rem */
}
.me-56 {
  margin-inline-end: 224px;
  /* 14rem */
}
.mt-56 {
  margin-top: 224px;
  /* 14rem */
}
.mr-56 {
  margin-right: 224px;
  /* 14rem */
}
.mb-56 {
  margin-bottom: 224px;
  /* 14rem */
}
.ml-56 {
  margin-left: 224px;
  /* 14rem */
}
.m-60 {
  margin: 240px;
  /* 15rem */
}
.mx-60 {
  margin-left: 240px;
  margin-right: 240px;
  /* 15rem */
}
.my-60 {
  margin-top: 240px;
  margin-bottom: 240px;
  /* 15rem */
}
.ms-60 {
  margin-inline-start: 240px;
  /* 15rem */
}
.me-60 {
  margin-inline-end: 240px;
  /* 15rem */
}
.mt-60 {
  margin-top: 240px;
  /* 15rem */
}
.mr-60 {
  margin-right: 240px;
  /* 15rem */
}
.mb-60 {
  margin-bottom: 240px;
  /* 15rem */
}
.ml-60 {
  margin-left: 240px;
  /* 15rem */
}
.m-64 {
  margin: 256px;
  /* 16rem */
}
.mx-64 {
  margin-left: 256px;
  margin-right: 256px;
  /* 16rem */
}
.my-64 {
  margin-top: 256px;
  margin-bottom: 256px;
  /* 16rem */
}
.ms-64 {
  margin-inline-start: 256px;
  /* 16rem */
}
.me-64 {
  margin-inline-end: 256px;
  /* 16rem */
}
.mt-64 {
  margin-top: 256px;
  /* 16rem */
}
.mr-64 {
  margin-right: 256px;
  /* 16rem */
}
.mb-64 {
  margin-bottom: 256px;
  /* 16rem */
}
.ml-64 {
  margin-left: 256px;
  /* 16rem */
}
.m-72 {
  margin: 288px;
  /* 18rem */
}
.mx-72 {
  margin-left: 288px;
  margin-right: 288px;
  /* 18rem */
}
.my-72 {
  margin-top: 288px;
  margin-bottom: 288px;
  /* 18rem */
}
.ms-72 {
  margin-inline-start: 288px;
  /* 18rem */
}
.me-72 {
  margin-inline-end: 288px;
  /* 18rem */
}
.mt-72 {
  margin-top: 288px;
  /* 18rem */
}
.mr-72 {
  margin-right: 288px;
  /* 18rem */
}
.mb-72 {
  margin-bottom: 288px;
  /* 18rem */
}
.ml-72 {
  margin-left: 288px;
  /* 18rem */
}
.m-80 {
  margin: 320px;
  /* 20rem */
}
.mx-80 {
  margin-left: 320px;
  margin-right: 320px;
  /* 20rem */
}
.my-80 {
  margin-top: 320px;
  margin-bottom: 320px;
  /* 20rem */
}
.ms-80 {
  margin-inline-start: 320px;
  /* 20rem */
}
.me-80 {
  margin-inline-end: 320px;
  /* 20rem */
}
.mt-80 {
  margin-top: 320px;
  /* 20rem */
}
.mr-80 {
  margin-right: 320px;
  /* 20rem */
}
.mb-80 {
  margin-bottom: 320px;
  /* 20rem */
}
.ml-80 {
  margin-left: 320px;
  /* 20rem */
}
.m-96 {
  margin: 384px;
  /* 24rem */
}
.mx-96 {
  margin-left: 384px;
  margin-right: 384px;
  /* 24rem */
}
.my-96 {
  margin-top: 384px;
  margin-bottom: 384px;
  /* 24rem */
}
.ms-96 {
  margin-inline-start: 384px;
  /* 24rem */
}
.me-96 {
  margin-inline-end: 384px;
  /* 24rem */
}
.mt-96 {
  margin-top: 384px;
  /* 24rem */
}
.mr-96 {
  margin-right: 384px;
  /* 24rem */
}
.mb-96 {
  margin-bottom: 384px;
  /* 24rem */
}
.ml-96 {
  margin-left: 384px;
  /* 24rem */
}
.m-auto {
  margin: auto;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
/************************************************
 * spacing
 ************************************************/
.space-x-0 > * + * {
  margin-left: 0px;
}
.space-y-0 > * + * {
  margin-top: 0px;
}
.space-x-0\.5 > * + * {
  margin-left: 0.125rem;
  /* 2px */
}
.space-y-0\.5 > * + * {
  margin-top: 0.125rem;
  /* 2px */
}
.space-x-1 > * + * {
  margin-left: 0.25rem;
  /* 4px */
}
.space-y-1 > * + * {
  margin-top: 0.25rem;
  /* 4px */
}
.space-x-1\.5 > * + * {
  margin-left: 0.375rem;
  /* 6px */
}
.space-y-1\.5 > * + * {
  margin-top: 0.375rem;
  /* 6px */
}
.space-x-2 > * + * {
  margin-left: 0.5rem;
  /* 8px */
}
.space-y-2 > * + * {
  margin-top: 0.5rem;
  /* 8px */
}
.space-x-2\.5 > * + * {
  margin-left: 0.625rem;
  /* 10px */
}
.space-y-2\.5 > * + * {
  margin-top: 0.625rem;
  /* 10px */
}
.space-x-3 > * + * {
  margin-left: 0.75rem;
  /* 12px */
}
.space-y-3 > * + * {
  margin-top: 0.75rem;
  /* 12px */
}
.space-x-3\.5 > * + * {
  margin-left: 0.875rem;
  /* 14px */
}
.space-y-3\.5 > * + * {
  margin-top: 0.875rem;
  /* 14px */
}
.space-x-4 > * + * {
  margin-left: 1rem;
  /* 16px */
}
.space-y-4 > * + * {
  margin-top: 1rem;
  /* 16px */
}
.space-x-5 > * + * {
  margin-left: 1.25rem;
  /* 20px */
}
.space-y-5 > * + * {
  margin-top: 1.25rem;
  /* 20px */
}
.space-x-6 > * + * {
  margin-left: 1.5rem;
  /* 24px */
}
.space-y-6 > * + * {
  margin-top: 1.5rem;
  /* 24px */
}
.space-x-7 > * + * {
  margin-left: 1.75rem;
  /* 28px */
}
.space-y-7 > * + * {
  margin-top: 1.75rem;
  /* 28px */
}
.space-x-8 > * + * {
  margin-left: 2rem;
  /* 32px */
}
.space-y-8 > * + * {
  margin-top: 2rem;
  /* 32px */
}
.space-x-9 > * + * {
  margin-left: 2.25rem;
  /* 36px */
}
.space-y-9 > * + * {
  margin-top: 2.25rem;
  /* 36px */
}
.space-x-10 > * + * {
  margin-left: 2.5rem;
  /* 40px */
}
.space-y-10 > * + * {
  margin-top: 2.5rem;
  /* 40px */
}
.space-x-11 > * + * {
  margin-left: 2.75rem;
  /* 44px */
}
.space-y-11 > * + * {
  margin-top: 2.75rem;
  /* 44px */
}
.space-x-12 > * + * {
  margin-left: 3rem;
  /* 48px */
}
.space-y-12 > * + * {
  margin-top: 3rem;
  /* 48px */
}
.space-x-14 > * + * {
  margin-left: 3.5rem;
  /* 56px */
}
.space-y-14 > * + * {
  margin-top: 3.5rem;
  /* 56px */
}
.space-x-16 > * + * {
  margin-left: 4rem;
  /* 64px */
}
.space-y-16 > * + * {
  margin-top: 4rem;
  /* 64px */
}
.space-x-20 > * + * {
  margin-left: 5rem;
  /* 80px */
}
.space-y-20 > * + * {
  margin-top: 5rem;
  /* 80px */
}
.space-x-24 > * + * {
  margin-left: 6rem;
  /* 96px */
}
.space-y-24 > * + * {
  margin-top: 6rem;
  /* 96px */
}
.space-x-28 > * + * {
  margin-left: 7rem;
  /* 112px */
}
.space-y-28 > * + * {
  margin-top: 7rem;
  /* 112px */
}
.space-x-32 > * + * {
  margin-left: 8rem;
  /* 128px */
}
.space-y-32 > * + * {
  margin-top: 8em;
  /* 128px */
}
.space-x-36 > * + * {
  margin-left: 9rem;
  /* 144px */
}
.space-y-36 > * + * {
  margin-top: 9rem;
  /* 144px */
}
.space-x-40 > * + * {
  margin-left: 10rem;
  /* 160px */
}
.space-y-40 > * + * {
  margin-top: 10rem;
  /* 160px */
}
.space-x-44 > * + * {
  margin-left: 11rem;
  /* 176px */
}
.space-y-44 > * + * {
  margin-top: 11rem;
  /* 176px */
}
.space-x-48 > * + * {
  margin-left: 12rem;
  /* 192px */
}
.space-y-48 > * + * {
  margin-top: 12rem;
  /* 192px */
}
.space-x-52 > * + * {
  margin-left: 13rem;
  /* 208px */
}
.space-y-52 > * + * {
  margin-top: 13rem;
  /* 208px */
}
.space-x-56 > * + * {
  margin-left: 14rem;
  /* 224px */
}
.space-y-56 > * + * {
  margin-top: 14rem;
  /* 224px */
}
.space-x-60 > * + * {
  margin-left: 15rem;
  /* 240px */
}
.space-y-60 > * + * {
  margin-top: 15rem;
  /* 240px */
}
.space-x-64 > * + * {
  margin-left: 16rem;
  /* 256px */
}
.space-y-64 > * + * {
  margin-top: 16rem;
  /* 256px */
}
.space-x-72 > * + * {
  margin-left: 18rem;
  /* 288px */
}
.space-y-72 > * + * {
  margin-top: 18rem;
  /* 288px */
}
.space-x-80 > * + * {
  margin-left: 20rem;
  /* 320px */
}
.space-y-80 > * + * {
  margin-top: 20rem;
  /* 320px */
}
.space-x-96 > * + * {
  margin-left: 24rem;
  /* 384px */
}
.space-y-96 > * + * {
  margin-top: 24rem;
  /* 384px */
}
.space-x-px > * + * {
  margin-left: 1px;
}
.space-y-px > * + * {
  margin-top: 1px;
}
/************************************************
 * width
 ************************************************/
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vh;
}
.w-min {
  width: min-content;
}
.w-max {
  width: max-content;
}
.w-fit {
  width: fit-content;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-full {
  min-width: 100%;
}
.min-w-screen {
  min-width: 100vh;
}
.min-w-min {
  min-width: min-content;
}
.min-w-max {
  min-width: max-content;
}
.min-w-fit {
  min-width: fit-content;
}
.max-w-0 {
  max-width: 0px;
}
.max-w-none {
  max-width: none;
}
.max-w-xs {
  max-width: 20rem;
  /* 320px */
}
.max-w-sm {
  max-width: 24rem;
  /* 384px */
}
.max-w-md {
  max-width: 28rem;
  /* 448px */
}
.max-w-lg {
  max-width: 32rem;
  /* 512px */
}
.max-w-xl {
  max-width: 36rem;
  /* 576px */
}
.max-w-2xl {
  max-width: 42rem;
  /* 672px */
}
.max-w-3xl {
  max-width: 48rem;
  /* 768px */
}
.max-w-4xl {
  max-width: 56rem;
  /* 896px */
}
.max-w-5xl {
  max-width: 64rem;
  /* 1024px */
}
.max-w-6xl {
  max-width: 72rem;
  /* 1152px */
}
.max-w-7xl {
  max-width: 80rem;
  /* 1280px */
}
.max-w-full {
  max-width: 100%;
}
.max-w-min {
  max-width: min-content;
}
.max-w-max {
  max-width: max-content;
}
.max-w-fit {
  max-width: fit-content;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-screen-sm {
  max-width: 640px;
}
.max-w-screen-md {
  max-width: 768px;
}
.max-w-screen-lg {
  max-width: 1024px;
}
.max-w-screen-xl {
  max-width: 1280px;
}
.max-w-screen-2xl {
  max-width: 1536px;
}
/************************************************
 * height
 ************************************************/
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.h-min {
  height: min-content;
}
.h-max {
  height: max-content;
}
.h-fit {
  height: fit-content;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.min-h-min {
  min-height: min-content;
}
.min-h-max {
  min-height: max-content;
}
.min-h-fit {
  min-height: fit-content;
}
.max-h-0 {
  max-height: 0px;
}
.max-h-none {
  max-height: none;
}
.max-h-xs {
  max-height: 20rem;
  /* 320px */
}
.max-h-sm {
  max-height: 24rem;
  /* 384px */
}
.max-h-md {
  max-height: 28rem;
  /* 448px */
}
.max-h-lg {
  max-height: 32rem;
  /* 512px */
}
.max-h-xl {
  max-height: 36rem;
  /* 576px */
}
.max-h-2xl {
  max-height: 42rem;
  /* 672px */
}
.max-h-3xl {
  max-height: 48rem;
  /* 768px */
}
.max-h-4xl {
  max-height: 56rem;
  /* 896px */
}
.max-h-5xl {
  max-height: 64rem;
  /* 1024px */
}
.max-h-6xl {
  max-height: 72rem;
  /* 1152px */
}
.max-h-7xl {
  max-height: 80rem;
  /* 1280px */
}
.max-h-none {
  max-height: none;
}
.max-h-full {
  max-height: 100%;
}
.max-h-min {
  max-height: min-content;
}
.max-h-max {
  max-height: max-content;
}
.max-h-fit {
  max-height: fit-content;
}
/************************************************
 * z-index
 ************************************************/
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-auto {
  z-index: auto;
}