@charset "UTF-8";
:root {
  --sidebar-width: 275px;
  --sidebar-width-collapse: 60px;
  --header-nav-height: 60px;
  --header-util-height: 48px;
  --min-container-width: 768px;
  --max-container-width: 1020px;
  --myspace-max-container-width: 1512px;
  --footer-height: 200px;
  --container-padding: 12px;
  --font-default: sans-serif;
  --font-webfont: Pretendard;
  /***************** 기본 사이즈 변수 *****************/
  /* component height */
  --height-xxs: 20px;
  --height-xs: 28px;
  --height-sm: 32px;
  --height-md: 40px;
  --height-lg: 48px;
  /* component padding */
  --spacing-xxxs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;
  --spacing-minus--xxxs: -2px;
  --spacing-minus--xxs: -4px;
  --spacing-minus--xs: -8px;
  --spacing-minus--sm: -12px;
  --spacing-minus--md: -16px;
  --spacing-minus--lg: -20px;
  --spacing-minus--xl: -24px;
  --spacing-minus--xxl: -32px;
  --spacing-minus--xxxl: -40px;
  /* gap */
  --row-col-gap: 12px;
  /* box Style */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 14px;
  /* font size */
  --font-size-xxxxxl: 36px;
  --font-size-xxxxl: 32px;
  --font-size-xxxl: 24px;
  --font-size-xxl: 22px;
  --font-size-xl: 20px;
  --font-size-lg: 18px;
  --font-size-md: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 11px;
  /* font weight */
  --font-weight-black: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --icon-size-xs: 20px;
  --icon-size-sm: 28px;
  --icon-size-md: 32px;
  --icon-size-lg: 40px;
  --icon-size-xl: 48px;
  /***************** color와 컴포넌트 사이즈는 lite 기준으로 작성 *****************/
  /****** color code ******/
  --lite-color-red: #FF4F79;
  --lite-color-red-light: #FFF1F4;
  --lite-color-red-dark: #FF006B;
  --lite-color-orange: #FF971C;
  --lite-color-orange-dark: #FF7300;
  --lite-color-blue: #0075FF;
  --lite-color-green: #00C86A;
  --lite-color-shadow: rgba(0, 0, 0, 0.25);
  --color-default: var(--color-black);
  --color-primary: var(--lite-color-main);
  --color-primary-dark: var(--lite-color-main-dark);
  --color-secondary: var(--lite-color-white);
  --color-secondary-dark: var(--lite-color-gray-50);
  --color-white: var(--lite-color-white);
  --color-black: var(--lite-color-black);
  --color-rgb-black: 0,0,0;
  --color-rgb-white: 255,255,255;
  --color-danger: var(--lite-color-red);
  --color-danger-light: var(--lite-color-red-light);
  --color-danger-dark: var(--lite-color-red-dark);
  --color-warning: var(--lite-color-orange);
  --color-warning-dark: var(--lite-color-orange-dark);
  --color-shadow: var(--lite-color-shadow);
  --color-error: var(--lite-color-red-dark);
  --color-label: var(--color-black);
  /*** lite color ***/
  --lite-color-main: #00C2FF;
  --lite-color-main-dark: #00afe6;
  --lite-color-main-20: rgba(0, 194, 255, 0.20);
  --lite-color-sub: var(--lite-color-green);
  --lite-color-gpt: #7C52F1;
  --lite-color-gpt-light: #F1F1FF;
  --lite-color-white: #fff;
  --lite-color-black: #3E4448;
  --lite-color-gray-50: #F4F4F4;
  --lite-color-black-5: rgba(39, 39, 44, 0.05);
  --lite-color-black-15: rgba(39, 39, 44, 0.15);
  --lite-color-black-30: #fafafa;
  --lite-color-black-50: #f4f4f4;
  --lite-color-black-100: #E9E9EA;
  --lite-color-black-200: #DCDCDC;
  --lite-color-black-300: #C6C6C6;
  --lite-color-black-400: #A9A8AA;
  --lite-color-black-500: #939395;
  --lite-color-black-600: #7D7D80;
  --lite-color-black-700: #656567;
  --lite-color-gray-800: #363636;
  /****** checkbox, radio ******/
  --mhu-checkbox-line-color: var(--lite-color-black-400);
  --mhu-checkbox-color: var(--color-primary);
  --mhu-checkbox-disabled-color: var(--lite-color-black-100);
  --mhu-checkbox-size: 20px;
  --mhu-checkbox-radius: var(--border-radius-sm);
  --mhu-radio-line-color: var(--lite-color-black-400);
  --mhu-radio-color: var(--color-primary);
  --mhu-radio-disabled-color: var(--lite-color-black-100);
  --mhu-radio-size: 20px;
  --mhu-formControlCheck-gap: 32px;
  --mhu-formControlCheck-label-color: var(--color-label);
  --mhu-formControlCheck-label-font-size: var(--font-size-sm);
  --mhu-formControlCheck-label-font-weight: var(--font-weight-bold);
  --mhu-checkbox-label-gap: var(--spacing-sm);
  /****** button ******/
  --mhu-btn-height: var(--height-md);
  --mhu-btn-font-size: var(--font-size-md);
  --mhu-btn-font-weight: var(--font-weight-medium);
  --mhu-btn-padding: 0 var(--spacing-md);
  --mhu-btn-radius: var(--border-radius-md);
  --mhu-btn-height-sm: var(--height-sm);
  --mhu-btn-font-size-sm: var(--font-size-sm);
  --mhu-btn-font-weight-sm: var(--font-weight-bold);
  --mhu-btn-padding-sm: 0 var(--spacing-sm);
  /*** button color 추가 가능 ***/
  --mhu-btn-primary: var(--color-primary);
  --mhu-btn-primary-text: var(--color-white);
  --mhu-btn-primary-hover: var(--color-primary-dark);
  --mhu-btn-secondary: var(--color-secondary);
  --mhu-btn-secondary-text: var(--color-black);
  --mhu-btn-secondary-hover: var(--color-secondary-dark);
  --mhu-btn-danger: var(--color-danger);
  --mhu-btn-danger-text: var(--color-white);
  --mhu-btn-danger-hover: var(--color-danger-dark);
  --mhu-btn-text-hover: var(--color-secondary-dark);
  --mhu-btn-disabled-bg: var(--lite-color-gray-50);
  --mhu-btn-disabled-text: var(--lite-color-black-400);
  --mhu-btn-spacing-x-minus: var(--spacing-minus--xxs);
  --mhu-btn-spacing-x: var(--spacing-xxs);
  --mhu-btn-spacing-y: var(--spacing-sm);
  --mhu-btn-icon-size: var(--height-xxs);
  /****** accordion ******/
  --mhu-accordion-radius: var(--border-radius-md);
  --mhu-accordion-active-bg: var(--lite-color-black-100);
  --mhu-accordion-gap: var(--spacing-sm);
  --mhu-accordion-item-border-color: "transparent";
  --mhu-accordion-header-padding-left: var(--spacing-lg);
  --mhu-accordion-header-padding-right: var(--spacing-sm);
  --mhu-accordion-header-padding-y: var(--spacing-xs);
  --mhu-accordion-header-font-size: var(--font-size-sm);
  --mhu-accordion-header-font-weight: var( --font-weight-bold);
  --mhu-accordion-header-line-height: 24px;
  --mhu-accordion-header-bg: var(--lite-color-gray-50);
  --mhu-accordion-header-text-color: var(--color-black);
  --mhu-accordion-header-icon-size: var(--icon-size-xs);
  --mhu-accordion-header-icon-bg: var(--lite-color-black-600);
  --mhu-accordion-header-icon-image: var(--svg-icon-chevron);
  --mhu-accordion-body-padding-y: var(--spacing-sm);
  --mhu-accordion-body-padding-x: var(--spacing-lg);
  --mhu-accordion-body-text-color: var(--color-black);
  /****** form ******/
  --mhu-form-control-field-height: var(--height-md);
  --mhu-form-control-field-font-size: var(--font-size-md);
  --mhu-form-control-field-padding: 7px var(--spacing-md);
  --mhu-form-control-field-padding-side: var(--spacing-md);
  --mhu-form-control-field-height-sm: var(--height-sm);
  --mhu-form-control-field-font-size-sm: var(--font-size-sm);
  --mhu-form-control-field-padding-sm: 7px var(--spacing-sm);
  --mhu-form-control-field-padding-side-sm: var(--spacing-sm);
  --mhu-form-control-field-margin: var(--spacing-xs);
  --mhu-form-control-field-margin2: var(--spacing-sm);
  --mhu-form-control-field-margin3: 28px;
  --mhu-form-control-field-icon-size: var(--icon-size-xs);
  --mhu-form-control-field-radius: var(--border-radius-md);
  --mhu-textarea-height: 115px;
  --mhu-form-control-field-gap: var(--spacing-lg);
  --mhu-input-validation-font-size: var(--font-size-md);
  --mhu-input-validation-font-weight: var(--font-weight-medium);
  --mhu-input-validation-icon-size: var(--height-xxs);
  --mhu-select-padding-right: var(--spacing-sm);
  --mhu-select-padding-left: var(--spacing-xs);
  /*** form color ***/
  --mhu-input-placeholder: var(--lite-color-black-400);
  --mhu-input-text: var(--color-black);
  --mhu-input-arrow-color: var(--lite-color-black-600);
  --mhu-input-bg: var(--color-white);
  --mhu-input-disabled-bg: var(--lite-color-gray-50);
  --mhu-input-disabled-text: var(--lite-color-black-400);
  --mhu-input-disabled-line: var(--lite-color-gray-50);
  --mhu-input-line: var(--lite-color-black-100);
  --mhu-input-line-hover: var(--lite-color-black-400);
  --mhu-input-line-focus: var(--color-black);
  --mhu-input-type-line: var(--color-black);
  --mhu-input-type-line-hover-bg: var(--lite-color-gray-50);
  --mhu-input-type-line-disabled: var(--lite-color-black-400);
  --mhu-input-validation: var(--color-black);
  --mhu-input-validation-error: var(--color-error);
  /* table */
  --mhu-table-text-color: var(--color-default);
  --mhu-table-head-line-color: var(--color-default);
  --mhu-table-body-line-color: var(--lite-color-black-400);
  --mhu-table-padding-x: var(--spacing-sm);
  --mhu-table-padding-y: var(--spacing-xs);
  --mhu-table-head-font-size: var(--font-size-md);
  --mhu-table-head-font-weight: var(--font-weight-bold);
  --mhu-table-body-font-size: var(--font-size-md);
  --mhu-table-body-font-weight: var(--font-weight-medium);
  /* pagination */
  --mhu-pagination-margin-top: 28px;
  --mhu-pagination-icon-size: var(--icon-size-xs);
  --mhu-pagination-icon-color: var(--lite-color-black-600);
  --mhu-pagination-number-size: var(--height-xs);
  --mhu-pagination-number-padding: 10px;
  --mhu-pagination-gap: var(--spacing-sm);
  --mhu-pagination-font-size: var(--font-size-md);
  --mhu-pagination-text-color: var(--color-default);
  --mhu-pagination-active-bg-color: var(--color-primary);
  --mhu-pagination-active-text-color: var(--color-white);
  --mhu-pagination-active-radius: var(--border-radius-md);
  --mhu-pagination-active-font-weight: var(--font-weight-regular);
  --mhu-pagination-hover-bg-color: var(--lite-color-black-15);
  /* switch */
  --mhu-switch-width: 40px;
  --mhu-switch-height: 24px;
  --mhu-switch-radius: 24px;
  --mhu-switch-label-gap: var(--spacing-xs);
  --mhu-switch-bg-color: var(--lite-color-black-100);
  --mhu-switch-default-btn-color: var(--lite-color-black-400);
  --mhu-switch-label-color: var(--lite-color-black-400);
  --mhu-switch-label-font-size: var(--font-size-sm);
  --mhu-switch-label-font-weight: var(--font-weight-bold);
  --mhu-switch-hover-btn-color: var(--lite-color-black-500);
  --mhu-switch-hover-label-color: var(--lite-color-black-500);
  --mhu-switch-hover-bg-color: var(--lite-color-black-100);
  --mhu-switch-hover-active-btn-color: var(--color-primary-dark);
  --mhu-switch-hover-active-label-color: var(--color-primary-dark);
  --mhu-switch-hover-active-bg-color: var(--lite-color-black-100);
  --mhu-switch-active-label-color: var(--color-primary);
  --mhu-switch-active-btn-color: var( --color-primary);
  --mhu-switch-active-bg-color: var(--lite-color-black-100);
  --mhu-switch-disabled-label-color: var(--lite-color-black-400);
  --mhu-switch-disabled-bg-color: var(--lite-color-black-100);
  --mhu-switch-disabled-btn-color: var(--lite-color-gray-50);
}
body div, body p, body nav, body aside, body article {
  scrollbar-color: #D9D9D9 transparent;
  scrollbar-width: thin;
  /* 스크롤바의 폭 너비 */
}
body div::-webkit-scrollbar, body p::-webkit-scrollbar, body nav::-webkit-scrollbar, body aside::-webkit-scrollbar, body article::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
body div::-webkit-scrollbar-thumb, body p::-webkit-scrollbar-thumb, body nav::-webkit-scrollbar-thumb, body aside::-webkit-scrollbar-thumb, body article::-webkit-scrollbar-thumb {
  background: #F4F4F4; /* 스크롤바 색상 */
  border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
body div:hover::-webkit-scrollbar-thumb, body p:hover::-webkit-scrollbar-thumb, body nav:hover::-webkit-scrollbar-thumb, body aside:hover::-webkit-scrollbar-thumb, body article:hover::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
}
body div::-webkit-scrollbar-track, body p::-webkit-scrollbar-track, body nav::-webkit-scrollbar-track, body aside::-webkit-scrollbar-track, body article::-webkit-scrollbar-track {
  background: transparent; /*스크롤바 뒷 배경 색상*/
}
body, table, input, textarea, select, button {
  font-family: var(--font-webfont), var(--font-default);
  font-size: 16px;
  color: var(--lite-color-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
textarea::-webkit-input-placeholder, input:not([type=checkbox])::-webkit-input-placeholder, input:not([type=radio])::-webkit-input-placeholder, textarea::placeholder, input:not([type=checkbox])::placeholder, input:not([type=radio])::placeholder {
  color: var(--mhu-input-placeholder);
}
/* 모션 클래스 안내
 @ 스크롤 모션 대상 클래스: mhuTarget-motion
 @ 스크롤 모션이 적용된 클래스: mhuTarget-animate
 @ 모션 스타일 클래스
   mhuTrans-up : 하단에서 상단으로 등장
   mhuTrans-fadein : 제자리에서 등장
   mhuTrans-delay-[1~4] : 모션 딜레이 시간 4단계
*/
.mhuTrans-up {
  transition: transform 0.5s cubic-bezier(0.65, 0.05, 0.36, 1), opacity 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  transform: translateY(20px);
  opacity: 0;
}
.mhuTrans-fadein {
  transition: opacity 0.5s cubic-bezier(0.65, 0.05, 0.36, 1);
  opacity: 0;
}
.mhuState-animate .mhuTrans-up {
  transform: translateY(0);
  opacity: 1;
}
.mhuState-animate .mhuTrans-fadein {
  opacity: 1;
}
.mhuTrans-delay-1 {
  transition-delay: 0.25s;
}
.mhuTrans-delay-2 {
  transition-delay: 0.5s;
}
.mhuTrans-delay-3 {
  transition-delay: 0.75s;
}
.mhuTrans-delay-4 {
  transition-delay: 0.9s;
}
.mhuStyle-cursor {
  cursor: pointer !important;
}
.mhuStyle-text-underline {
  text-decoration: underline !important;
}
.mhuStyle-bg-transparent {
  background-color: transparent !important;
}
.mhuStyle-mt-0 {
  margin-top: 0 !important;
}
.mhuStyle-mt-1 {
  margin-top: 4px !important;
}
.mhuStyle-mt-2 {
  margin-top: 8px !important;
}
.mhuStyle-mt-3 {
  margin-top: 12px !important;
}
.mhuStyle-mt-4 {
  margin-top: 16px !important;
}
.mhuStyle-mt-5 {
  margin-top: 20px !important;
}
.mhuStyle-mt-6 {
  margin-top: 24px !important;
}
.mhuStyle-mt-7 {
  margin-top: 28px !important;
}
.mhuStyle-mt-8 {
  margin-top: 32px !important;
}
.mhuStyle-mt-9 {
  margin-top: 36px !important;
}
.mhuStyle-mt-10 {
  margin-top: 40px !important;
}
.mhuStyle-mb-0 {
  margin-bottom: 0 !important;
}
.mhuStyle-mb-1 {
  margin-bottom: 4px !important;
}
.mhuStyle-mb-2 {
  margin-bottom: 8px !important;
}
.mhuStyle-mb-3 {
  margin-bottom: 12px !important;
}
.mhuStyle-mb-4 {
  margin-bottom: 16px !important;
}
.mhuStyle-mb-5 {
  margin-bottom: 20px;
}
.mhuStyle-mb-6 {
  margin-bottom: 24px !important;
}
.mhuStyle-mb-7 {
  margin-bottom: 28px !important;
}
.mhuStyle-mb-8 {
  margin-bottom: 32px !important;
}
.mhuStyle-mb-9 {
  margin-bottom: 36px !important;
}
.mhuStyle-mb-10 {
  margin-bottom: 40px !important;
}
.mhuStyle-my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.mhuStyle-my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}
.mhuStyle-my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}
.mhuStyle-my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}
.mhuStyle-my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.mhuStyle-my-5 {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.mhuStyle-my-6 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.mhuStyle-my-7 {
  margin-top: 28px !important;
  margin-bottom: 28px !important;
}
.mhuStyle-my-8 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}
.mhuStyle-my-9 {
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}
.mhuStyle-my-10 {
  margin-top: 40px !important;
  margin-bottom: 40px !important;
}
.mhuStyle-mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.mhuStyle-mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}
.mhuStyle-mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}
.mhuStyle-mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
.mhuStyle-mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}
.mhuStyle-mx-5 {
  margin-left: 20px !important;
  margin-right: 20px !important;
}
.mhuStyle-mx-6 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}
.mhuStyle-mx-7 {
  margin-left: 28px !important;
  margin-right: 28px !important;
}
.mhuStyle-mx-8 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}
.mhuStyle-mx-9 {
  margin-left: 36px !important;
  margin-right: 36px !important;
}
.mhuStyle-mx-10 {
  margin-left: 40px !important;
  margin-right: 40px !important;
}
.mhuStyle-pt-0 {
  padding-top: 0 !important;
}
.mhuStyle-pt-1 {
  padding-top: 4px !important;
}
.mhuStyle-pt-2 {
  padding-top: 8px !important;
}
.mhuStyle-pt-3 {
  padding-top: 12px !important;
}
.mhuStyle-pt-4 {
  padding-top: 16px !important;
}
.mhuStyle-pt-5 {
  padding-top: 20px !important;
}
.mhuStyle-pt-6 {
  padding-top: 24px !important;
}
.mhuStyle-pt-7 {
  padding-top: 28px !important;
}
.mhuStyle-pt-8 {
  padding-top: 32px !important;
}
.mhuStyle-pt-9 {
  padding-top: 36px !important;
}
.mhuStyle-pt-10 {
  padding-top: 40px !important;
}
.mhuStyle-pb-0 {
  padding-bottom: 0 !important;
}
.mhuStyle-pb-1 {
  padding-bottom: 4px !important;
}
.mhuStyle-pb-2 {
  padding-bottom: 8px !important;
}
.mhuStyle-pb-3 {
  padding-bottom: 12px !important;
}
.mhuStyle-pb-4 {
  padding-bottom: 16px !important;
}
.mhuStyle-pb-5 {
  padding-bottom: 20px !important;
}
.mhuStyle-pb-6 {
  padding-bottom: 24px !important;
}
.mhuStyle-pb-7 {
  padding-bottom: 28px !important;
}
.mhuStyle-pb-8 {
  padding-bottom: 32px !important;
}
.mhuStyle-pb-9 {
  padding-bottom: 36px !important;
}
.mhuStyle-pb-10 {
  padding-bottom: 40px !important;
}
.mhuStyle-py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.mhuStyle-py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.mhuStyle-py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.mhuStyle-py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.mhuStyle-py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.mhuStyle-py-5 {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.mhuStyle-py-6 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
.mhuStyle-py-7 {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}
.mhuStyle-py-8 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.mhuStyle-py-9 {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}
.mhuStyle-py-10 {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.mhuStyle-px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mhuStyle-px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.mhuStyle-px-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.mhuStyle-px-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.mhuStyle-px-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.mhuStyle-px-5 {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.mhuStyle-px-6 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.mhuStyle-px-7 {
  padding-left: 28px !important;
  padding-right: 28px !important;
}
.mhuStyle-px-8 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.mhuStyle-px-9 {
  padding-left: 36px !important;
  padding-right: 36px !important;
}
.mhuStyle-px-10 {
  padding-left: 40px !important;
  padding-right: 40px !important;
}