:root {
  --point-color: #407df1;
  --point-color-red: #f46363;
  --text-gray-600: #1a1818;
  --text-gray-500: #555;
  --text-gray-400: #999;
  --text-gray-300: #a8a9af;
  --text-wh: #fff;
  --bg-dark: #555;
  --bg-light: #f4f5f8;
  --line-box: #d6dae1;
  --line-divider: #e2e5ea;

  --color-green-500: #03cf5d;
  --color-green-600: #10a54c;

  --color-gray-900: #1a1818;
  --color-gray-700: #52545c;
  --color-gray-600: #6d717b;
  --color-gray-500: #8b9099;

  --expert-primary-purple-900: #1b162f;
  --expert-primary-purple-800: #362c5e;
  --expert-primary-purple-700: #50418e;
  --expert-primary-purple-600: #6b57bd;
  --expert-primary-purple-500: #866dec;
  --expert-primary-purple-400: #9e8af0;
  --expert-primary-purple-300: #b6a7f4;
  --expert-primary-purple-200: #cfc5f7;
  --expert-primary-purple-100: #e7e2fb;
  --expert-primary-purple-50: #f3f0fd;
  --expert-primary-purple-10: #f9f8fe;

  /* Colors */
  --white: #ffffff;

  /* GRAY */
  --gray-900-heading: #1a1818;
  --gray-800: #37383d;
  --gray-700-text: #52545c;
  --gray-600: #6d717b;
  --gray-500: #8b9099;
  --gray-400-placeholder: #acb1ba;
  --gray-300: #c8cdd5;
  --gray-200-divider: #e2e5ea;
  --gray-100: #edeef2;
  --gray-50-background: #f3f4f8;
  --gray-10: #f9fafd;

  /* BLUE */
  --primary-blue-900: #222244;
  --primary-blue-800: #363f5e;
  --primary-blue-700: #37498a;
  --primary-blue-600: #285ec5;
  --primary-blue-500-maincolor: #407df1;
  --primary-blue-400: #5b8cf2;
  --primary-blue-300: #81a8f6;
  --primary-blue-200: #aac4f8;
  --primary-blue-100: #bfd3fa;
  --primary-blue-50: #d4e1fc;
  --primary-blue-10: #e9f0fe;
  --secondary-blue-900: #11324b;
  --secondary-blue-800: #17496f;
  --secondary-blue-700: #1567a5;
  --secondary-blue-600: #248ad8;
  --secondary-blue-500-maincolor: #2ca4ff;
  --secondary-blue-400: #4cadff;
  --secondary-blue-300: #75c1ff;
  --secondary-blue-200: #a1d6ff;
  --secondary-blue-100: #b8e0ff;
  --secondary-blue-50: #cfeaff;
  --secondary-blue-10: #e7f5ff;

  /* RED */
  --primary-red-900: #571717;
  --primary-red-800: #792323;
  --primary-red-700: #ac2323;
  --primary-red-600: #e42e2e;
  --primary-red-500-maincolor: #ff4e4e;
  --primary-red-400: #ff6666;
  --primary-red-300: #ff8a8a;
  --primary-red-200: #ffafaf;
  --primary-red-100: #ffc3c3;
  --primary-red-50: #ffd7d7;
  --primary-red-10: #ffeaea;

  /* GREEN */
  --primary-green-900: #0d3c20;
  --primary-green-800: #10532c;
  --primary-green-700: #187340;
  --primary-green-600: #10a54c;
  --primary-green-500-maincolor: #03cf5d;
  --primary-green-400: #34d877;
  --primary-green-300: #62e399;
  --primary-green-200: #8fe9b6;
  --primary-green-100: #aaefc7;
  --primary-green-50: #c6f4da;
  --primary-green-10: #e2f9ec;

  /* YELLOW */
  --primary-yellow-900: #48390a;
  --primary-yellow-800: #5a4912;
  --primary-yellow-700: #7b651f;
  --primary-yellow-600: #d6a50b;
  --primary-yellow-500-maincolor: #ffca21;
  --primary-yellow-400: #ffd251;
  --primary-yellow-300: #ffda6f;
  --primary-yellow-200: #ffe79c;
  --primary-yellow-100: #ffecb4;
  --primary-yellow-50: #fff2cd;
  --primary-yellow-10: #fff9e6;

  /* OVERLAY */
  --overlay-white-4: rgba(255, 255, 255, 0.04);
  --overlay-white-8: rgba(255, 255, 255, 0.08);
  --overlay-white-12: rgba(255, 255, 255, 0.12);
  --overlay-white-16: rgba(255, 255, 255, 0.16);
  --overlay-priamry-4: rgba(64, 125, 241, 0.04);
  --overlay-priamry-8: rgba(64, 125, 241, 0.08);
  --overlay-priamry-12: rgba(64, 125, 241, 0.12);
  --overlay-priamry-16: rgba(64, 125, 241, 0.16);
  --overlay-gray-4: rgba(26, 24, 24, 0.04);
  --overlay-gray-8: rgba(26, 24, 24, 0.08);
  --overlay-gray-12: rgba(26, 24, 24, 0.12);
  --overlay-gray-16: rgba(26, 24, 24, 0.16);

  /* Fonts */
  --headline-large-700: 700 34px/34px 'Pretendard', sans-serif;
  --headline-medium-700: 700 28px/28px 'Pretendard', sans-serif;
  --headline-small-700-pc: 700 24px/24px 'Pretendard', sans-serif;
  --title-extra-large-700: 700 20px/20px 'Pretendard', sans-serif;
  --title-extra-large-600-pc: 500 20px/20px 'Pretendard', sans-serif;
  --title-large-700-pc: 700 18px/18px 'Pretendard', sans-serif;
  --title-large-600: 500 18px/18px 'Pretendard', sans-serif;
  --title-medium-700: 700 16px/16px 'Pretendard', sans-serif;
  --title-small-700: 700 14px/14px 'Pretendard', sans-serif;
  --body-large-600: 600 16px/16px 'Pretendard', sans-serif;
  --body-large-500: 500 16px/16px 'Pretendard', sans-serif;
  --body-large-400: 400 16px/16px 'Pretendard', sans-serif;
  --body-medium-600: 600 14px/14px 'Pretendard', sans-serif;
  --body-medium-500: 500 14px/14px 'Pretendard', sans-serif;
  --body-medium-400-pc: 400 14px/14px 'Pretendard', sans-serif;
  --body-small-600: 600 12px/12px 'Pretendard', sans-serif;
  --body-small-500: 500 12px/12px 'Pretendard', sans-serif;
  --body-small-400: 400 12px/12px 'Pretendard', sans-serif;
  --button-medium-600: 600 16px/16px 'Pretendard', sans-serif;
  --button-small-600: 600 14px/14px 'Pretendard', sans-serif;

  /* Effects */
  --bottom-sheet-box-shadow: 0px -10px 20px 0px rgba(34, 34, 68, 0.3);
  --primarycolor-cta-box-shadow: 5px 10px 10px 0px rgba(64, 125, 241, 0.2);

  /* BUTTON */
  --button-blue-hover: #3d75e0;
  --button-blue-press: #3a6dce;
  --button-blue-line-hover: #f0f5fe;
  --button-blue-line-press: #e0eafd;
  --button-gray-hover: #656870;
  --button-gray-press: #494a51;
  --button-gray-line-hover: #f9f9f9;
  --button-gray-line-press: #ededed;
}

/****  FONT  ****/
/* Font - NotoSansKRKR */
@font-face {
  font-family: 'notoSansKR';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/NotoSansKR-Regular.eot');
  src:
    url('../fonts/NotoSansKR-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansKR-Regular.woff') format('font-woff'),
    url('../fonts/NotoSansKR-Regular.woff2') format('woff2'),
    url('../fonts/NotoSansKR-Regular.otf') format('opentype'),
    url('../fonts/NotoSansKR-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'notoSansKR';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/NotoSansKR-Medium.eot');
  src:
    url('../fonts/NotoSansKR-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansKR-Medium.woff') format('font-woff'),
    url('../fonts/NotoSansKR-Medium.woff2') format('woff2'),
    url('../fonts/NotoSansKR-Medium.otf') format('opentype'),
    url('../fonts/NotoSansKR-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'notoSansKR';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/NotoSansKR-Bold.eot');
  src:
    url('../fonts/NotoSansKR-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NotoSansKR-Bold.woff') format('font-woff'),
    url('../fonts/NotoSansKR-Bold.woff2') format('woff2'),
    url('../fonts/NotoSansKR-Bold.otf') format('opentype'),
    url('../fonts/NotoSansKR-Bold.ttf') format('truetype');
  unicode-range: U+AC00-D7A3;
}

/* Font - Poppins */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Poppins-Regular.eot');
  src:
    url('../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Poppins-Regular.woff') format('woff'),
    url('../fonts/Poppins-Regular.woff2') format('woff2'),
    url('../fonts/Poppins-Regular.otf') format('opentype'),
    url('../fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/Poppins-SemiBold.eot');
  src:
    url('../fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Poppins-SemiBold.woff') format('woff'),
    url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
    url('../fonts/Poppins-SemiBold.otf') format('opentype'),
    url('../fonts/Poppins-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Poppins-Bold.eot');
  src:
    url('../fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Poppins-Bold.woff') format('woff'),
    url('../fonts/Poppins-Bold.woff2') format('woff2'),
    url('../fonts/Poppins-Bold.otf') format('opentype'),
    url('../fonts/Poppins-Bold.ttf') format('truetype');
}

/* Font - Pretendard */
/* eot IE8 */
@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 100;
  src:
    url('../fonts/pretendard/Pretendard-Thin.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-Thin.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-Thin.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 200;
  src:
    url('../fonts/pretendard/Pretendard-ExtraLight.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-ExtraLight.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-ExtraLight.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 300;
  src:
    url('../fonts/pretendard/Pretendard-Light.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-Light.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-Light.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  src:
    url('../fonts/pretendard/Pretendard-Regular.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-Regular.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-Regular.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  src:
    url('../fonts/pretendard/Pretendard-Medium.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-Medium.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-Medium.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 600;
  src:
    url('../fonts/pretendard/Pretendard-SemiBold.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-SemiBold.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 700;
  src:
    url('../fonts/pretendard/Pretendard-Bold.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-Bold.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-Bold.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 800;
  src:
    url('../fonts/pretendard/Pretendard-ExtraBold.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-ExtraBold.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-ExtraBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 900;
  src:
    url('../fonts/pretendard/Pretendard-Black.woff') format('woff'),
    url('../fonts/pretendard/Pretendard-Black.woff2') format('woff2'),
    url('../fonts/pretendard/Pretendard-Black.otf') format('opentype'),
    url('../fonts/pretendard/Pretendard-Black.ttf') format('truetype');
}

* {
  font-family: 'Pretendard', 'notoSansKR', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Icon */
*[class*='ico_'] {
  position: relative;
}

*[class*='ico_']::after {
  content: '';
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url('../img/icon/ico_sprite.png');
}

i[class*='ico_'] {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

i[class*='ico_16'] {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.ico_noti::after {
  background-position: 0 -24px;
}

.ico_organization::after {
  background-position: -24px -24px;
}

.ico_tooltip::after {
  background-position: -48px -24px;
}

.ico_cal::after {
  background-position: -72px -24px;
}

.ico_plus::after {
  background-position: -336px -24px;
}

.ico_minus::after {
  background-position: -360px -24px;
}

.ico_zoom::after {
  background-position: -384px -24px;
}

.ico_write::after {
  background-position: -408px -24px;
}

.ico_download::after {
  background-position: -432px -24px;
}

.ico_trash::after {
  background-position: -456px -24px;
}

.ico_close::after {
  background-position: -480px -24px;
}

.ico_input_show::after {
  background-position: -504px -24px;
}

.ico_input_hide::after {
  background-position: -528px -24px;
}

.ico_caution::after {
  background-position: -552px -24px;
}

.ico_mypage::after {
  background-position: -368px 0;
}

.ico_exist::after {
  background-position: -392px 0;
}

.ico_arrow_show:active::after,
.ico_arrow_show.active::after,
.ico_arrow_show::after {
  background-position: -96px -24px;
}

.ico_arrow_hide:active::after,
.ico_arrow_hide.active::after,
.ico_arrow_hide::after {
  background-position: -120px -24px;
}

.ico_arrow_front::after {
  background-position: -144px -24px;
}

.ico_arrow_front.active::after,
.ico_arrow_front:active::after {
  background-position: -168px -24px;
}

.ico_arrow_prev::after {
  background-position: -192px -24px;
}

.ico_arrow_prev.active::after,
.ico_arrow_prev:active::after {
  background-position: -216px -24px;
}

.ico_arrow_next::after {
  background-position: -240px -24px;
}

.ico_arrow_next.active::after,
.ico_arrow_next:active::after {
  background-position: -264px -24px;
}

.ico_arrow_back::after {
  background-position: -288px -24px;
}

.ico_arrow_back.active::after,
.ico_arrow_back:active::after {
  background-position: -312px -24px;
}

*[class*='ico_16']::after {
  width: 16px;
  height: 16px;
}

.ico_16_write:active::after,
.ico_16_write.active::after,
.ico_16_write::after {
  background-position: 0px -48px;
}

.ico_16_down_gray:active::after,
.ico_16_down_gray.active::after,
.ico_16_down_gray::after {
  background-position: -16px -48px;
}

.ico_16_up_gray:active::after,
.ico_16_up_gray.active::after,
.ico_16_up_gray::after {
  background-position: -32px -48px;
}

.ico_16_down:active::after,
.ico_16_down.active::after,
.ico_16_down::after {
  background-position: -48px -48px;
}

.ico_16_up:active::after,
.ico_16_up.active::after,
.ico_16_up::after {
  background-position: -64px -48px;
}

.ico_16_sort_down:active::after,
.ico_16_sort_down.active::after,
.ico_16_sort_down::after {
  background-position: -80px -48px;
}

.ico_16_sort_up:active::after,
.ico_16_sort_up.active::after,
.ico_16_sort_up::after {
  background-position: -96px -48px;
}

.ico_16_sort:active::after,
.ico_16_sort.active::after,
.ico_16_sort::after {
  background-position: -112px -48px;
}

.ico_16_more_blue:active::after,
.ico_16_more_blue.active::after,
.ico_16_more_blue::after {
  background-position: -128px -48px;
}

.ico_16_more_black:active::after,
.ico_16_more_black.active::after,
.ico_16_more_black::after {
  background-position: -144px -48px;
}

*[class*='ico_lnb']:hover::after,
*[class*='ico_lnb'].active::after {
  background-image: url('../img/icon/ico_sprite_active.png');
}

.ico_lnb_home:hover::after,
.ico_lnb_home.active::after,
.ico_lnb_home::after {
  background-position: 0 0;
}

.ico_lnb_setting:hover::after,
.ico_lnb_setting.active::after,
.ico_lnb_setting::after {
  background-position: -24px 0;
}

.ico_lnb_employee:hover::after,
.ico_lnb_employee.active::after,
.ico_lnb_employee::after {
  background-position: -48px 0;
}

.ico_lnb_timecard:hover::after,
.ico_lnb_timecard.active::after,
.ico_lnb_timecard::after {
  background-position: -72px 0;
}

.ico_lnb_annual:hover::after,
.ico_lnb_annual.active::after,
.ico_lnb_annual::after {
  background-position: -96px 0;
}

.ico_lnb_salary:hover::after,
.ico_lnb_salary.active::after,
.ico_lnb_salary::after {
  background-position: -120px 0;
}

.ico_lnb_timeoff:hover::after,
.ico_lnb_timeoff.active::after,
.ico_lnb_timeoff::after {
  background-position: -144px 0;
}

.ico_lnb_retire:hover::after,
.ico_lnb_retire.active::after,
.ico_lnb_retire::after {
  background-position: -168px 0;
}

.ico_lnb_doc:hover::after,
.ico_lnb_doc.active::after,
.ico_lnb_doc::after {
  background-position: -192px 0;
}

.ico_lnb_notice:hover::after,
.ico_lnb_notice.active::after,
.ico_lnb_notice::after {
  background-position: -216px 0;
}

.ico_lnb_file:hover::after,
.ico_lnb_file.active::after,
.ico_lnb_file::after {
  background-position: -240px 0;
}

.ico_lnb_contact:hover::after,
.ico_lnb_contact.active::after,
.ico_lnb_contact::after {
  background-position: -264px 0;
}

.ico_lnb_office_change:hover::after,
.ico_lnb_office_change.active::after,
.ico_lnb_office_change::after {
  background-position: -288px 0;
}

.ico_lnb_smile:hover::after,
.ico_lnb_smile.active::after,
.ico_lnb_smile::after {
  background-position: -416px 0;
}

.ico_lnb_chat:hover::after,
.ico_lnb_chat.active::after,
.ico_lnb_chat::after {
  background-position: -440px 0;
}

.ico_lnb_doc:hover::after,
.ico_lnb_doc.active::after,
.ico_lnb_doc::after {
  background-position: -464px 0;
}

.ico_lnb_alert:hover::after,
.ico_lnb_alert.active::after,
.ico_lnb_alert::after {
  background-position: -488px 0;
}

.ico_lnb_voucher:hover::after,
.ico_lnb_voucher.active::after,
.ico_lnb_voucher::after {
  background-position: -512px 0;
}

.ico_lnb_sign:hover::after,
.ico_lnb_sign.active::after,
.ico_lnb_sign::after {
  background-position: -536px 0;
}

.ico_lnb_end_tax::after {
  background: url(../img/gnb-ic-24.svg) center no-repeat;
}

.ico_lnb_end_tax:hover::after,
.ico_lnb_end_tax.active::after {
  background: url(../img/gnb-ic-24.svg);
  filter: brightness(0) invert(1);
}

.ico_lnb_my_info::after {
  background: url(../img/gnb-ic-my-info-24.svg) center no-repeat !important;
}

.ico_lnb_my_info:hover::after,
.lnb_list li:not(.depth_1):not(.none_active).on .ico_lnb_my_info::after {
  background: url(../img/gnb-ic-my-info-24.svg);
  filter: brightness(0) invert(1);
}

.ico_lnb_folder::after {
  background: url(../img/svg_icon/gnb-folder-24.svg) center no-repeat !important;
}

.ico_lnb_folder:hover::after,
.on .ico_lnb_folder::after {
  background: url(../img/svg_icon/gnb-folder-24.svg);
  filter: brightness(0) invert(1);
}

/* icon add */

*[class*='ico_rg']::after {
  content: '';
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url('../img/icon/ico_24.png?ver=20221026');
}

.ico_rg_more::after {
  background-position: 0 0;
}

.ico_rg_color_arrow_left::after {
  background-position: -24px 0;
}

.ico_rg_color_arrow_down::after {
  background-position: -48px 0;
}

.ico_rg_arrow_down::after {
  background-position: -72px 0;
}

.ico_rg_arrow_up::after {
  background-position: -96px 0;
}

.ico_rg_arrow_left::after {
  background-position: -120px 0;
}

.ico_rg_arrow_right::after {
  background-position: -144px 0;
}

.ico_rg_minus::after {
  background-position: -168px 0;
}

.ico_rg_plus::after {
  background-position: -192px 0;
}

.ico_rg_search::after {
  background-position: -216px 0;
}

.ico_rg_exist::after {
  background-position: -240px 0;
}

.ico_rg_price_check::after {
  background-position: -264px 0;
}

.ico_rg_price_check_white::after {
  background-position: -336px 0;
}

.ico_rg_check_circle::after {
  background-position: -96px -24px;
}

.ico_rg_clock_history::after {
  background-position: -120px -24px;
}

.ico_rg_setting::after {
  background-position: -336px -24px;
}

.ico_rg_alert::after {
  background-position: -360px -24px;
}

.ico_rg_cancel::after {
  background-position: -0px -48px;
}

.ico_rg_wait::after {
  background-position: -24px -48px;
}

.ico_rg_cancel_request::after {
  background-position: -48px -48px;
}

.ico_rg_check::after {
  background-position: -96px -48px;
}

.ico_rg_user::after {
  background-position: -48px -72px;
}

.ico_rg_info::after {
  background-position: -96px -72px;
}

.ico_rg_eye::after {
  background-position: -168px -72px;
}

.ico_rg_attach_file::after {
  background-position: -168px -72px;
}

.ico_rg_download::after {
  background-position: -217px -72px;
}

.ico_rg_sign::after {
  background-position: -457px -72px;
}

.ico_rg_file::after {
  background-position: -384px -72px;
}

.ico_rg_camera::after {
  background-position: -288px -72px;
}

.ico_rg_calendar::after {
  background: url(../img/svg_icon/cal.svg) center no-repeat;
}

.ico_rg_list::after {
  background-position: -480px -72px;
}

.ico_rg_user_outline::after {
  background-position: -504px -72px;
}

.ico_rg_question::after {
  background-position: -528px -72px;
}

.ico_rg_question_gray::after {
  background-position: -552px -72px;
}

.ico_rg_warning::after {
  background-position: 0 -96px;
}

.ico_rg_warning_color::after {
  background-position: -24px -96px;
}

.ico_rg_roll_back::after {
  background-position: -120px -96px;
}

.ico_rg_trash::after {
  background-position: -144px -96px;
}

.ico_rg_print::after {
  background-position: -168px -96px;
}

.ico_rg_write::after {
  background-position: -192px -96px;
}

.ico_rg_ring::after {
  background-position: -312px -96px;
}

.ico_rg_won::after {
  background-position: -408px -96px;
}

.ico_rg_cut::after {
  background-position: -432px -96px;
}

.ico_rg_report::after {
  background-position: -456px -96px;
}

.ico_rg_receipt::after {
  background-position: -480px -96px;
}

.ico_rg_copy::after {
  background-position: -504px -96px;
}

.ico_rg_email_fill::after {
  background-position: -528px -96px;
}

.ico_rg_email::after {
  background-position: -552px -96px;
}

.ico_rg_kakao::after {
  background-position: -576px -96px;
}

.ico_rg_copy::after {
  background-position: -600px -96px;
}

.ico_rg_dot::after {
  background-position: -624px -96px;
}

.ico_rg_reject::after {
  background-position: -648px -96px;
}

.ico_rg_email_2::after {
  background-position: -528px -120px;
}

.ico_rg_kakao_fill::after {
  background-position: -576px -120px;
}

/* *[class*='ico_20']::after { content: ''; display: block; position: absolute; width: calc(24px / 1.2); height: calc(24px / 1.2); top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../img/icon/ico_24.png"); background-size: calc(800px / 1.2 ) calc(150px / 1.2)} */
*[class*='ico_20'] {
  width: 20px !important;
  height: 20px !important;
}
*[class*='ico_20']::after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url('../img/icon/ico_24.png');
  background-size: calc(800px / 1.2) calc(150px / 1.2);
}

.ico_20_more::after {
  background-position: 0 0;
}

.ico_20_list::after {
  background-position: calc(-24px / 1.2) 0;
}

.ico_20_color_arrow_down::after {
  background-position: calc(-48px / 1.2) 0;
}

.ico_20_arrow_down::after {
  background-position: calc(-72px / 1.2) 0;
}

.ico_20_arrow_up::after {
  background-position: calc(-96px / 1.2) 0;
}

.ico_20_arrow_left::after {
  background-position: calc(-120px / 1.2) 0;
}

.ico_20_arrow_right::after {
  background-position: calc(-144px / 1.2) 0;
}

.ico_20_minus::after {
  background-position: calc(-168px / 1.2) 0;
}

.ico_20_plus::after {
  background-position: calc(-192px / 1.2) 0;
}

.ico_20_search::after {
  background-position: calc(-216px / 1.2) 0;
}

.ico_20_exist::after {
  background-position: calc(-240px / 1.2) 0;
}

.ico_20_price_check::after {
  background-position: calc(-264px / 1.2) 0;
}

.ico_20_price_check_white::after {
  background-position: calc(-336px / 1.2) 0;
}

.ico_20_cancel::after {
  background-position: 0 calc(-24px / 1.2);
}

.ico_20_wait::after {
  background-position: calc(-24px / 1.2) calc(-24px / 1.2);
}

.ico_20_cancel_request::after {
  background-position: calc(-48px / 1.2) calc(-24px / 1.2);
}

.ico_20_check_circle::after {
  background-position: calc(-96px / 1.2) calc(-24px / 1.2);
}

.ico_20_clock_history::after {
  background-position: calc(-120px / 1.2) calc(-24px / 1.2);
}

.ico_20_setting::after {
  background-position: calc(-336px / 1.2) calc(-24px / 1.2);
}

.ico_20_alert::after {
  background-position: calc(-360px / 1.2) calc(-24px / 1.2);
}

.ico_20_check::after {
  background-position: calc(-96px / 1.2) calc(-48px / 1.2);
}

.ico_20_user::after {
  background-position: calc(-48px / 1.2) calc(-72px / 1.2);
}

.ico_20_info::after {
  background-position: calc(-96px / 1.2) calc(-72px / 1.2);
}

.ico_20_eye::after {
  background-position: calc(-168px / 1.2) calc(-72px / 1.2);
}

.ico_20_attach_file::after {
  background-position: calc(-192px / 1.2) calc(-72px / 1.2);
}

.ico_20_download::after {
  background-position: calc(-217px / 1.2) calc(-72px / 1.2);
}

.ico_20_sign::after {
  background-position: calc(-457px / 1.2) calc(-72px / 1.2);
}

.ico_20_camera::after {
  background-position: calc(-288px / 1.2) calc(-72px / 1.2);
}

.ico_20_calendar::after {
  background: url(../img/svg_icon/cal.svg) center/contain no-repeat;
}

/* .ico_20_calendar::after {background-position: calc(-264px / 1.2) calc(-72px / 1.2);} */

.ico_20_file::after {
  background-position: calc(-384px / 1.2) calc(-72px / 1.2);
}

.ico_20_list::after {
  background-position: calc(-480px / 1.2) calc(-72px / 1.2);
}

.ico_20_user_outline::after {
  background-position: calc(-504px / 1.2) calc(-72px / 1.2);
}

.ico_20_question::after {
  background-position: calc(-528px / 1.2) calc(-72px / 1.2);
}

.ico_20_question_gray::after {
  background-position: calc(-552px / 1.2) calc(-72px / 1.2);
}

.ico_20_warning::after {
  background-position: 0 calc(-96px / 1.2);
}

.ico_20_warning_color::after {
  background-position: calc(-24px / 1.2) calc(-96px / 1.2);
}

.ico_20_roll_back::after {
  background-position: calc(-120px / 1.2) calc(-96px / 1.2);
}

.ico_20_trash::after {
  background-position: calc(-144px / 1.2) calc(-96px / 1.2);
}

.ico_20_print::after {
  background-position: calc(-168px / 1.2) calc(-96px / 1.2);
}

.ico_20_write::after {
  background-position: calc(-192px / 1.2) calc(-96px / 1.2);
}

.ico_20_ring::after {
  background-position: calc(-312px / 1.2) calc(-96px / 1.2);
}

.ico_20_won::after {
  background-position: calc(-408px / 1.2) calc(-96px / 1.2);
}

.ico_20_cut::after {
  background-position: calc(-432px / 1.2) calc(-96px / 1.2);
}

.ico_20_report::after {
  background-position: calc(-456px / 1.2) calc(-96px / 1.2);
}

.ico_20_receipt::after {
  background-position: calc(-480px / 1.2) calc(-96px / 1.2);
}

.ico_20_copy::after {
  background-position: calc(-504px / 1.2) calc(-96px / 1.2);
}

.ico_20_email_fill::after {
  background-position: calc(-528px / 1.2) calc(-96px / 1.2);
}

.ico_20_email::after {
  background-position: calc(-552px / 1.2) calc(-96px / 1.2);
}

.ico_20_kakao::after {
  background-position: calc(-576px / 1.2) calc(-96px / 1.2);
}

.ico_20_copy::after {
  background-position: calc(-600px / 1.2) calc(-96px / 1.2);
}

.ico_20_dot::after {
  background-position: calc(-624px / 1.2) calc(-96px / 1.2);
}

.ico_20_reject::after {
  background-position: calc(-648px / 1.2) calc(-96px / 1.2);
}

.ico_20_email_2::after {
  background-position: calc(-528px / 1.2) calc(-120px / 1.2);
}

.ico_20_kakao_fill::after {
  background-position: calc(-576px / 1.2) calc(-120px / 1.2);
}

*[class*='ico_sm'] {
  width: 16px !important;
  height: 16px !important;
}
*[class*='ico_sm']::after {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-image: url('../img/icon/ico_small.png');
}

.ico_sm_sort::after {
  background-position: -96px 0;
}

*[class*='ico_14'] {
  width: 14px !important;
  height: 14px !important;
}
*[class*='ico_14']::after {
  width: 14px !important;
  height: 14px !important;
}
.ico_14_delete::after {
  background: url(../img/icon_del.gif) no-repeat;
  background-size: 14px;
  padding-bottom: 4px;
}

/* svg icon */

.svg_icon_badge_new {
  display: inline-block;
  width: 41px;
  height: 22px;
  background: url(../img/svg_icon/badge_new.svg) no-repeat;
}

*[class^='svg_icon_32'] {
  display: inline-block;
  width: 32px;
  height: 32px;
}
.svg_icon_32_chevron_left {
  background: center/contain url(../img/svg_icon/chevron-left.svg) no-repeat;
}

*[class^='svg_icon_24'] {
  display: inline-block;
  width: 24px;
  height: 24px;
}

.svg_icon_24_complete {
  background: url(../img/svg_icon/complete.svg) no-repeat;
}

.svg_icon_24_cancel {
  background: url(../img/svg_icon/cancel.svg) no-repeat;
}

.svg_icon_24_expire {
  background: url(../img/svg_icon/expire.svg) no-repeat;
}

.svg_icon_24_send {
  background: url(../img/svg_icon/send.svg) no-repeat;
}

.svg_icon_24_send_wait {
  background: url(../img/svg_icon/send_wait.svg) no-repeat;
}

.svg_icon_24_send_fail {
  background: url(../img/svg_icon/send_fail.svg) no-repeat;
}

.svg_icon_24_wait {
  background: url(../img/svg_icon/wait.svg) no-repeat;
}

.svg_icon_24_write_sign {
  background: url(../img/svg_icon/writing-sign.svg) no-repeat;
}

.svg_icon_24_info {
  background: url(../img/svg_icon/info.svg) no-repeat;
}

.svg_icon_24_gray_info {
  background: url(../img/svg_icon/gray_info.svg?ver=0.1) no-repeat;
}

.svg_icon_24_open_up {
  background: url(../img/svg_icon/chevron-left.svg) no-repeat;
  transform: rotate(90deg);
}

.svg_icon_24_close_down {
  background: center/contain url(../img/svg_icon/chevron-left.svg) no-repeat;
  transform: rotate(-90deg);
}

.svg_icon_24_send_fill {
  background: url(../img/svg_icon/send-fill.svg) no-repeat;
}

.svg_icon_24_send_line {
  background: url(../img/svg_icon/send-line.svg) no-repeat;
}

.svg_icon_24_send_line_disabled {
  background: url(../img/svg_icon/send-line_disabled.svg) no-repeat;
}

.svg_icon_24_send_line_white {
  background: url(../img/svg_icon/send-line.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_sign_default {
  background: url(../img/svg_icon/sign_default.svg) no-repeat;
}

.svg_icon_24_sign_writing {
  background: url(../img/svg_icon/sign_writing.svg) no-repeat;
}

.svg_icon_24_sign_writing_white {
  background: url(../img/svg_icon/sign_writing.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_sign_white {
  background: url(../img/svg_icon/sign_default.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_arrow_right {
  background: url(../img/svg_icon/arrow-next.svg) no-repeat;
}

.svg_icon_24_arrow_prev {
  background: url(../img/svg_icon/arrow-next.svg) no-repeat;
  transform: rotate(180deg);
}

.svg_icon_24_pagination_arrow_back {
  background: url(../img/svg_icon/pagination-arrow-back.svg) no-repeat;
}

.svg_icon_24_pagination_arrow_next {
  background: url(../img/svg_icon/pagination-arrow-next.svg) no-repeat;
}

.svg_icon_24_pagination_arrow_prev {
  background: url(../img/svg_icon/pagination-arrow-prev.svg) no-repeat;
}

.svg_icon_24_pagination_arrow_front {
  background: url(../img/svg_icon/pagination-arrow-front.svg) no-repeat;
}

.svg_icon_24_upload {
  background: url(../img/svg_icon/upload.svg) no-repeat;
}

.svg_icon_24_write {
  background: url(../img/svg_icon/write.svg) no-repeat;
}

.svg_icon_24_trash {
  background: url(../img/svg_icon/trash.svg) no-repeat;
}

.svg_icon_24_warning {
  background: url(../img/svg_icon/warning.svg) no-repeat;
}

.svg_icon_24_download {
  background: url(../img/svg_icon/download.svg) no-repeat;
}

.svg_icon_24_download_white {
  background: url(../img/svg_icon/download.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_request {
  background: url(../img/svg_icon/request.svg) no-repeat;
}

.svg_icon_24_import {
  background: url(../img/svg_icon/import.svg) no-repeat;
}

.svg_icon_24_delete_line_white {
  background: url(../img/svg_icon/delete-line.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_delete_line {
  background: url(../img/svg_icon/delete-line.svg) no-repeat;
}

.svg_icon_24_check_circle {
  background: url(../img/svg_icon/check_circle.svg) no-repeat;
}

.svg_icon_24_check_wait {
  background: url(../img/svg_icon/check-wait.svg) no-repeat;
}

.svg_icon_24_check_return {
  background: url(../img/svg_icon/check-return.svg) no-repeat;
}

.svg_icon_24_check_write_empty {
  background: url(../img/svg_icon/check-write-empty.svg) no-repeat;
}

.svg_icon_24_check_write_complete {
  background: url(../img/svg_icon/check-write-green.svg) no-repeat;
}

.svg_icon_24_price_check_white {
  background: url(../img/svg_icon/price-check.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_price_check_gray {
  background: url(../img/svg_icon/price-check-gray.svg) no-repeat;
}

.svg_icon_24_price_check_green {
  background: url(../img/svg_icon/price-check-green.svg) no-repeat;
}

.svg_icon_24_profile {
  background: url(../img/svg_icon/profile.svg) no-repeat;
}

.svg_icon_24_close {
  background: url(../img/svg_icon/close-line.svg) no-repeat;
}

.svg_icon_24_copy {
  background: url(../img/svg_icon/copy.svg) no-repeat;
}

.svg_icon_24_law {
  background: url(../img/svg_icon/law.svg) no-repeat;
}

.svg_icon_24_delete_no_line {
  background: url(../img/svg_icon/delete_no_line.svg) no-repeat;
}

.svg_icon_24_delete_no_line_white {
  background: url(../img/svg_icon/delete_no_line.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_help_gray {
  background: url(../img/svg_icon/help-circle-gray.svg) no-repeat;
}

.svg_icon_24_sun_color {
  background: url(../img/svg_icon/suc-color.svg) no-repeat;
}

.svg_icon_24_link {
  background: url(../img/svg_icon/link.svg) no-repeat;
}

.svg_icon_24_user {
  background: url(../img/svg_icon/user.svg) no-repeat;
}

.svg_icon_24_user_bold {
  background: url(../img/svg_icon/user-bold.svg) no-repeat;
}

.svg_icon_24_user_fill {
  background: url(../img/svg_icon/user-filled.svg) no-repeat;
}

.svg_icon_24_secom_input {
  background: url(../img/svg_icon/secom-input.svg) no-repeat;
}

.svg_icon_24_plus_blue {
  background: url(../img/svg_icon/blue-plus.svg) no-repeat;
}

.svg_icon_24_plus_white {
  background: url(../img/svg_icon/plus.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_24_book_open {
  background: url(../img/svg_icon/book-open.svg) no-repeat;
}

.svg_icon_24_file {
  background: url(../img/svg_icon/file.svg) no-repeat;
}

.svg_icon_24_edit {
  background: url(../img/svg_icon/edit.svg) no-repeat;
}

.svg_icon_24_calculation {
  background: url(../img/svg_icon/calculation.svg) no-repeat;
}

*[class^='svg_icon_20'] {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.svg_icon_20_complete {
  background: center/contain url(../img/svg_icon/complete.svg) no-repeat;
}

.svg_icon_20_upload {
  background: center/contain url(../img/svg_icon/upload.svg) no-repeat;
}

.svg_icon_20_upload_white {
  background: center/contain url(../img/svg_icon/upload.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_delete {
  background: center/contain url(../img/svg_icon/delete.svg) no-repeat;
}

.svg_icon_20_download {
  background: center/contain url(../img/svg_icon/download.svg) no-repeat;
}

.svg_icon_20_download_white {
  background: center/contain url(../img/svg_icon/download.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_sign_white {
  background: center/contain url(../img/svg_icon/sign_default.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_sign_writing_white {
  background: center/contain url(../img/svg_icon/sign_writing.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_roll_back {
  background: center/contain url(../img/svg_icon/roll-back-ccw.svg) no-repeat;
}

.svg_icon_20_pdf {
  background: center/contain url(../img/svg_icon/file-pdf-outlined.svg) no-repeat;
}

.svg_icon_20_sign_writing {
  background: center/contain url(../img/svg_icon/sign_writing.svg) no-repeat;
}

.svg_icon_20_trash {
  background: center/contain url(../img/svg_icon/trash.svg) no-repeat;
}

.svg_icon_20_price_check_white {
  background: center/contain url(../img/svg_icon/price-check.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_price_check_gray {
  background: center/contain url(../img/svg_icon/price-check-gray.svg) no-repeat;
}

.svg_icon_20_price_check_black {
  background: center/contain url(../img/svg_icon/price-check-black.svg) no-repeat;
}

.svg_icon_20_plus_white {
  background: center/contain url(../img/svg_icon/plus.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_check_wait {
  background: center/contain url(../img/svg_icon/check-wait.svg) no-repeat;
}

.svg_icon_20_check_circle {
  background: center/contain url(../img/svg_icon/check_circle.svg) no-repeat;
}

.svg_icon_20_file {
  background: center/contain url(../img/svg_icon/file.svg) no-repeat;
}

.svg_icon_20_refresh {
  background: center/contain url(../img/svg_icon/refresh.svg) no-repeat;
}

.svg_icon_20_warning {
  background: center/contain url(../img/svg_icon/warning.svg) no-repeat;
}

.svg_icon_20_red_warning {
  background: center/contain url(../img/svg_icon/red_warning.svg) no-repeat;
}

.svg_icon_20_eye {
  background: center/contain url(../img/svg_icon/eye.svg) no-repeat;
}

.svg_icon_20_gray_info {
  background: center/contain url(../img/svg_icon/gray_info.svg) no-repeat;
}

.svg_icon_20_info {
  background: center/contain url(../img/svg_icon/info.svg) no-repeat;
}

.svg_icon_20_red_info {
  background: center/contain url(../img/svg_icon/info-red.svg) no-repeat;
}

.svg_icon_20_print {
  background: center/contain url(../img/svg_icon/print.svg) no-repeat;
}

.svg_icon_20_help {
  background: center/contain url(../img/svg_icon/help.svg) no-repeat;
}

.svg_icon_20_edit {
  background: center/contain url(../img/svg_icon/edit.svg) no-repeat;
}

.svg_icon_20_edit_white {
  background: center/contain url(../img/svg_icon/edit.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_user_edit {
  background: center/contain url(../img/svg_icon/edit.svg) no-repeat;
}

.svg_icon_20_write {
  background: center/contain url(../img/svg_icon/write.svg) no-repeat;
}

.svg_icon_20_list {
  background: center/contain url(../img/svg_icon/list.svg) no-repeat;
}

.svg_icon_20_user {
  background: center/contain url(../img/svg_icon/user.svg) no-repeat;
}

.svg_icon_20_user_bold {
  background: center/contain url(../img/svg_icon/user-bold.svg) no-repeat;
}

.svg_icon_20_user_fill {
  background: center/contain url(../img/svg_icon/user-filled.svg) no-repeat;
}

.svg_icon_20_plus {
  background: center/contain url(../img/svg_icon/plus.svg) no-repeat;
}

.svg_icon_20_money_won {
  background: center/contain url(../img/svg_icon/money-won.svg) no-repeat;
}

.svg_icon_20_scissor {
  background: center/contain url(../img/svg_icon/scissor.svg) no-repeat;
}

.svg_icon_20_law {
  background: center/contain url(../img/svg_icon/law.svg) no-repeat;
}

.svg_icon_20_pencil {
  background: center/contain url(../img/svg_icon/pencil-line.svg) no-repeat;
}

.svg_icon_20_pencil_white {
  background: center/contain url(../img/svg_icon/pencil-line.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_file_search {
  background: center/contain url(../img/svg_icon/file-search.svg) no-repeat;
}

.svg_icon_20_file_check {
  background: center/contain url(../img/svg_icon/file-check.svg) no-repeat;
}

.svg_icon_20_cancel {
  background: center/contain url(../img/svg_icon/close-line.svg) no-repeat;
}

.svg_icon_20_reject_circle {
  background: center/contain url(../img/svg_icon/minus-circle.svg) no-repeat;
}

.svg_icon_20_arrow_right {
  background: center/contain url(../img/svg_icon/arrow-next.svg) no-repeat;
}

.svg_icon_20_check_write_empty {
  background: center/contain url(../img/svg_icon/check-write-empty.svg) no-repeat;
}

.svg_icon_20_check_write_green {
  background: center/contain url(../img/svg_icon/check-write-green.svg) no-repeat;
}

.svg_icon_20_sun_color {
  background: center/contain url(../img/svg_icon/suc-color.svg) no-repeat;
}

.svg_icon_20_award {
  background: center/contain url(../img/svg_icon/award.svg) no-repeat;
}

.svg_icon_20_help_gray {
  background: center/contain url(../img/svg_icon/help-circle-gray.svg) no-repeat;
}

.svg_icon_20_cup {
  background: center/contain url(../img/svg_icon/cup.svg) no-repeat;
}

.svg_icon_20_copy {
  background: center/contain url(../img/svg_icon/copy.svg) no-repeat;
}

.svg_icon_20_copy_white {
  background: center/contain url(../img/svg_icon/copy.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.svg_icon_20_shield {
  background: center/contain url(../img/svg_icon/shield-tick.svg) no-repeat;
}

.svg_icon_20_secom_input {
  background: center/contain url(../img/svg_icon/secom-input.svg) no-repeat;
}

.svg_icon_20_calculation {
  background: center/contain url(../img/svg_icon/calculation.svg) no-repeat;
}

*[class^='svg_icon_18'] {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.svg_icon_18_delete {
  background: center/contain url(../img/svg_icon/delete.svg) no-repeat;
}

.svg_icon_18_search {
  background: center/contain url(../img/svg_icon/search.svg) no-repeat;
}

*[class^='svg_icon_16'] {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.svg_icon_16_caution {
  background: center/contain url(../img/svg_icon/caution.svg) no-repeat;
}

.svg_icon_16_info {
  background: center/contain url(../img/svg_icon/info.svg) no-repeat;
}

.svg_icon_16_gray_info {
  background: center/contain url(../img/svg_icon/gray_info.svg) no-repeat;
}

.svg_icon_16_unread {
  background: center/contain url(../img/svg_icon/unread.svg) no-repeat;
}

.svg_icon_16_user {
  background: center/contain url(../img/svg_icon/user.svg) no-repeat;
}

.svg_icon_16_mail {
  background: center/contain url(../img/svg_icon/mail.svg) no-repeat;
}

.svg_icon_16_phone {
  background: center/contain url(../img/svg_icon/phone.svg) no-repeat;
}

.svg_icon_16_filter {
  background: center/contain url(../img/svg_icon/filter-lines.svg) no-repeat;
}

.svg_icon_16_open_up {
  background: center/contain url(../img/svg_icon/acc-open.svg) no-repeat;
}

.svg_icon_16_close_down {
  background: center/contain url(../img/svg_icon/acc-close.svg) no-repeat;
}

.svg_icon_16_arrow_down {
  background: center/contain url(../img/svg_icon/arrow-down.svg?ver=0.1) no-repeat;
}

.svg_icon_16_filter_arrow_down {
  background: center/contain url(../img/svg_icon/arrow-down-2.svg) no-repeat;
}

.svg_icon_16_filter_arrow_up {
  background: center/contain url(../img/svg_icon/arrow-up-2.svg) no-repeat;
}

.svg_icon_16_filter_arrow_down_bold {
  background: center/contain url(../img/svg_icon/arrow-down-bold.svg) no-repeat;
}

.svg_icon_16_filter_arrow_up_bold {
  background: center/contain url(../img/svg_icon/arrow-up-bold.svg) no-repeat;
}

.svg_icon_16_arrow_up {
  background: center/contain url(../img/svg_icon/arrow-up.svg) no-repeat;
}

.svg_icon_16_arrow_more {
  background: center/contain url(../img/svg_icon/arrow-more.svg) no-repeat;
}

.svg_icon_16_arrow_more_gray {
  background: center/contain url(../img/svg_icon/arrow-more.svg) no-repeat;
  filter: invert(67%) saturate(0);
}

.svg_icon_16_arrow_list {
  background: center/contain url(../img/svg_icon/arrow-list.svg) no-repeat;
}

.svg_icon_16_close {
  background: center/contain url(../img/svg_icon/close-line.svg) no-repeat;
}

.svg_icon_16_sort {
  background: center/contain url(../img/svg_icon/arrow-sort.svg) no-repeat;
}

.svg_icon_16_help {
  background: center/contain url(../img/svg_icon/help.svg) no-repeat;
}

.svg_icon_16_check_return {
  background: center/contain url(../img/svg_icon/check-return.svg) no-repeat;
}

.svg_icon_16_check_return_color {
  background: center/contain url(../img/svg_icon/check-return-color.svg) no-repeat;
}

.svg_icon_16_check_circle {
  background: center/contain url(../img/svg_icon/check_circle.svg) no-repeat;
}

.svg_icon_16_check_wait {
  background: center/contain url(../img/svg_icon/check-wait.svg) no-repeat;
}

.svg_icon_16_check_circle_color {
  background: center/contain url(../img/svg_icon/check-circle-color.svg) no-repeat;
}

.svg_icon_16_red_warning {
  background: center/contain url(../img/svg_icon/red_warning.svg) no-repeat;
}

*[class^='svg_icon_14'] {
  display: inline-block;
  width: 14px;
  height: 14px;
}

.svg_icon_14_arrow_right {
  background: center/contain url(../img/svg_icon/arrow-next.svg) no-repeat;
}

.svg_icon_14_roll_back {
  background: center/contain url(../img/svg_icon/roll-back-ccw.svg) no-repeat;
}

*[class^='svg_icon_12'] {
  display: inline-block;
  width: 12px;
  height: 12px;
}

.svg_icon_12_chevron_down {
  background: center/contain url(../img/svg_icon/chevron-left.svg) no-repeat;
  transform: rotate(-90deg);
}

*[class^='rectangle_web'] {
  background: url(../img/svg_icon/rectangle_web.svg) no-repeat;
  width: 12px;
  height: 12px;
  z-index: 10;
}
.rectangle_web_top_right {
  position: absolute;
  top: 14px;
  right: 14px;
  transform: rotate(90deg);
}

.rectangle_web_top_left {
  position: absolute;
  top: 14px;
  left: 14px;
}

.rectangle_web_bottom_left {
  position: absolute;
  bottom: 14px;
  left: 14px;
  transform: rotate(270deg);
}
.rectangle_web_bottom_right {
  position: absolute;
  bottom: 14px;
  right: 14px;
  transform: rotate(180deg);
}

*[class^='rectangle_mobile'] {
  background: url(../img/svg_icon/rectangle_mobile.svg) no-repeat;
  width: 12px;
  height: 12px;
  z-index: 10;
}
.rectangle_mobile_top_right {
  position: absolute;
  top: 15px;
  right: 15px;
  transform: rotate(90deg);
}

.rectangle_mobile_top_left {
  position: absolute;
  top: 15px;
  left: 15px;
}

.rectangle_mobile_bottom_left {
  position: absolute;
  bottom: 15px;
  left: 15px;
  transform: rotate(270deg);
}
.rectangle_mobile_bottom_right {
  position: absolute;
  bottom: 15px;
  right: 15px;
  transform: rotate(180deg);
}

/* selectBox */
.select_wrap {
  background: #fff;
  transition: all ease-out 0.25s;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  border-radius: 5px;
}

.select_wrap.select_button {
  border: none;
}

.select_wrap:hover {
  background: var(--gray-10, #f9fafd);
}

.select_wrap:not(.select_button) {
  position: relative;
  min-width: 120px;
  height: 38px;
  user-select: none;
}

.select_wrap.select_sm {
  position: relative;
  min-width: 66px;
  height: 38px;
  user-select: none;
}

.select_wrap.disabled {
  pointer-events: none;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  background: var(--gray-50-background-divider, #f3f4f8);
}

.select_wrap .select_ul.none_border li {
  border-bottom: none !important;
}

.select_wrap .select_ul li.disabled_option {
  pointer-events: none;
}

.select_wrap .select_ul li.disabled_option .option {
  color: var(--text-gray-400);
}
.select_wrap .select_ul .next_day {
  pointer-events: none;
}

.select_wrap .select_ul .next_day .option {
  position: relative;
  justify-content: center;
}

.select_wrap .select_ul .next_day .option::before {
  position: absolute;
  content: '';
  width: 80px;
  height: 1px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--line-box);
}

.select_wrap .select_ul .next_day .option::after {
  position: absolute;
  content: '';
  width: 80px;
  height: 1px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--line-box);
}
.select_wrap.select_button {
  position: relative;
}

.select_wrap:not(.select_button) div {
  font-size: 14px;
}

.select_wrap:not(.select_button) .default_option {
  display: flex;
  align-items: center;
  height: 100%;
  background: #fff;
  position: relative;
  cursor: pointer;
  background: url(../img/svg_icon/arrow-down-2.svg) center right 8px no-repeat;
}

.select_wrap:not(.select_button) .default_option::after {
  /* content: "";
  position: absolute;
  width: 1px;
  height: 80%;
  background: var(--gray-200---divider, #E2E5EA);
  top: 50%;
  transform: translateY(-50%);
  right: 30px; */
}

.select_wrap:not(.select_button) .default_option li {
  display: flex;
  width: 100%;
  padding: 0 30px 0 12px;
}

.select_wrap:not(.select_button) .default_option li .option {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select_wrap:not(.select_button).select_sm .default_option li {
  padding: 0 8px 0 10px;
}

.select_wrap .select_ul {
  position: absolute;
  top: 38px;
  left: 0;
  margin-top: 4px;
  white-space: nowrap;
  min-width: 100%;
  max-height: 300px;
  background: #fff;
  border: 1px solid var(--line-box);
  border-radius: 5px;
  display: none;
  overflow-y: hidden;
  z-index: 1300;
}

.select_wrap .select_ul:hover {
  overflow-y: scroll;
}

.select_wrap .select_ul.start_right {
  left: auto;
  right: 0;
}

.select_wrap.select_button .select_ul {
  top: 50px;
}

.select_wrap .select_ul li .option {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  width: 100%;
}

.select_wrap:not(.dragging) .select_ul li.active,
.select_wrap:not(.dragging) .select_ul li:hover {
  background: #f4f7fa;
}

.select_wrap:not(.dragging) .select_ul li.active div,
.select_wrap:not(.dragging) .select_ul li:hover div,
.select_wrap:not(.dragging) .select_ul li.active a,
.select_wrap:not(.dragging) .select_ul li:hover a {
  color: var(--point-color);
  font-weight: 500;
}

.select_wrap .option {
  display: flex;
  align-items: center;
}

.select_wrap.active .select_ul {
  display: block;
}

.select_wrap .select_ul.right_start {
  left: auto;
  right: 0;
  width: 240px;
}

.select_wrap.no_event button {
  width: 100%;
}

/* selectBox multiple */
.select_wrap[multiple] {
  width: 120px;
}

.filter_input .select_wrap[multiple] {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.filter_input .select_wrap[multiple].active {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.select_wrap[multiple] .select_multi_content_box {
  position: relative;
  display: none;
}

.select_wrap[multiple].active .select_multi_content_box {
  display: block;
  width: 240px;
  height: 226px;
}

.select_wrap[multiple].active .select_multi_content_box .select_ul {
  top: 0;
  width: 100%;
  max-height: 178px;
}

.select_wrap[multiple].active .select_multi_content_box .select_ul.scroll-scrolly_visible {
  margin-top: 0;
}

.select_wrap[multiple] .select_ul li {
  display: flex;
  height: 38px;
  align-items: center;
}

.select_wrap[multiple] .select_ul li:not(:last-child) {
  border: none;
}

.select_wrap[multiple] .select_ul li:not(.active):hover .option {
  color: inherit;
  font-weight: 400;
}

.select_wrap[multiple] .select_multi_content_box .select_ul li .option {
  display: block;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  padding: 0;
}

.select_wrap[multiple] .select_multi_content_box .select_ul li .option::after {
  position: absolute;
  content: '';
  right: 20px;
  width: 24px;
  height: 24px;
  background: url(../img/svg_icon/price-check-gray.svg);
}

.select_wrap[multiple] .select_multi_content_box .select_ul li.active .option::after {
  position: absolute;
  content: '';
  right: 20px;
  width: 24px;
  height: 24px;
  background: url(../img/svg_icon/price-check-green.svg);
}

.select_wrap[multiple] .select_multi_content_box .select_ul li.active + .direct_age {
  display: flex;
}

.select_wrap[multiple] .select_multi_content_box .select_ul li.direct_age {
  display: none;
}

.select_wrap[multiple] .select_multi_content_box .select_ul li.direct_age:hover {
  background: inherit;
}

.select_wrap[multiple].active .select_multi_content_box .btn_multi_select {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
  font-size: 14px;
  line-height: 16px;
  background: var(--bg-light);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  z-index: 10;
}

.select_wrap.select_btn .option:disabled {
  border: none !important;
  background: #fff;
  color: var(--gray-400---placeholder, #acb1ba);
  cursor: default !important;
  pointer-events: none !important;
}

.select_cnt {
  margin-left: 4px;
  font-weight: 600;
  color: var(--point-color);
}

/* searchBox */
.search_box {
  position: relative;
  display: flex;
  align-items: center;
}

.search_box input {
  width: 100%;
  height: 38px;
  padding: 9px 40px 9px 12px;
  font-size: 14px;
  border: 1px solid var(--line-box);
  border-radius: 4px;
}

.search_box button {
  position: absolute;
  right: 0px;
  border: none;
  background: none;
  z-index: 1;
  padding: 0;
}

.search_box button.btn:hover {
  background: transparent;
}

.search_date_range {
  position: relative;
  display: flex;
  align-items: center;
  /* width: 320px; */
  height: 38px;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  border-radius: 6px;
  background: #fff;
}

.search_date_range:where(:hover, :focus) {
  border: 1px solid var(--primary-blue-500---main-color, #407df1);
}

.search_date_range input {
  border: none !important;
  height: 100% !important;
}

.search_date_range .last_input {
  padding-left: 12px !important;
}

/*.search_date_range .last_input:hover, .search_date_range .last_input:focus {*/
/*  padding-left: 11px !important;*/
/*}*/

.search_date_range input:not(.last_input):hover {
  border-radius: 6px 0 0 6px;
  border: none !important;
}

.search_date_range input:is(:hover, :focus) {
  border: none !important;
}

.search_date_range .date_del {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  margin-right: 6px;
}

.disabled .search_date_range {
  background: #f7f7f7;
}
.disabled .calendar_input_popup {
  background: #f7f7f7;
  pointer-events: none;
}

/* input style */
textarea:not(:read-only):hover,
textarea:not(:read-only):focus,
textarea:not(:read-only):active .select_wrap:not(.select_button):hover,
.select_wrap:not(.select_button):focus,
.select_wrap:not(.select_button).active,
input:hover,
input:focus,
input:active {
  caret-color: var(--point-color);
  outline: none !important;
  border: 1px solid var(--point-color) !important;
  border-radius: 5px;
}

textarea:focus-visible {
  outline: none;
}

textarea::placeholder {
  color: var(--text-gray-400);
}

/* button */
button {
  position: relative;
  border: none;
  background-color: white;
  cursor: pointer;
}

button:disabled {
  background: #f7f7f7;
  color: var(--text-gray-400);
  border: 1px solid #d6dae1 !important;
  cursor: default;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 120px;
  height: 50px;
  padding: 0 13px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid var(--line-box);
  background: #fff;
  transition: all ease-out 0.25s;
  cursor: pointer;
}

.btn_file:not(:disabled):hover,
.btn:not(:disabled):hover {
  background: var(--gray-100);
}

.btn_file.btn_bg_light:not(:disabled):hover,
.btn.btn_bg_light:not(:disabled):hover {
  background: #e9e9e9;
}

.btn img,
.btn i {
  margin-right: 5px;
}

.btn_img {
  padding: 0 !important;
}
.btn_img img,
.btn_img i {
  margin-right: 0;
}

.btn_i {
  display: flex;
  padding: 0;
  align-items: center;
}

.btn_i i {
  margin-right: 0;
}

.btn_primary {
  color: #fff;
  background: var(--point-color);
  border: 0px solid var(--line-box);
}

.btn_primary:not(:disabled):hover {
  background: #2d65c8;
}

.btn_dark {
  color: #fff;
  background: var(--gray-700-text);
  border: none;
}

.btn_dark:hover {
  background: var(--button-gray-hover) !important;
}

.btn_dark:active {
  background: var(--button-gray-press) !important;
}

.btn_border_color {
  color: #407df1;
  border: 1px solid #407df1;
}

.btn_border_color:hover {
  background: #f4f7fa;
}

.btn_red {
  color: #fff;
  border: none;
  background: var(--primary-red-500---main-color, #ff4e4e);
}

.btn_red:hover {
  background: #e42e2e !important;
}

.btn_disable {
  border: 1px solid var(--gray-200-divider, #e2e5ea) !important;
  background: var(--white, #fff) !important;
  pointer-events: none;
  color: var(--gray-300, #c8cdd5) !important;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px; /* 100% */
}

.btn_disable i {
  filter: invert(67%) saturate(0);
}

.btn_sm {
  min-width: 38px;
  height: 38px;
  font-size: 14px;
  font-weight: 400;
  flex-shrink: 0;
}

.btn_regular {
  min-width: 100px;
  height: 38px;
  font-size: 14px;
  font-weight: 400;
}

.btn_employee_add {
  gap: 8px;
}

.btn_employee_add img {
  margin-right: 0;
}

.btn_employee_add img.right {
  margin-top: 6px;
}

.btn_info {
  background: #fff7e0;
  border: 1px solid #fae5c6;
}

.btn_info:hover {
  background: #f6eac7;
}

.btn_info i:first-child {
  margin-right: 7px;
}

.btn_info i + i {
  margin-left: 14px;
}

.btn_none_border {
  border: none;
}

:is(.dropdown_button) {
  display: inline-flex;
  border-radius: 6px;
}

:is(.dropdown_button.dropdown_button_dark) {
  background: var(--gray-700-text);
}

:where(.dropdown_button) > .btn {
  position: relative;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

:where(.dropdown_button) > .btn::before {
  position: absolute;
  content: '';
  width: 1px;
  height: 60%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.4;
  background: var(--white, #fff);
}

:where(.dropdown_button .default_option) .btn {
  padding: 0;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

:where(.dropdown_button.active .default_option .btn) svg {
  transform: rotate(180deg);
}

/* table */
.table {
  border-top: 1px solid var(--line-divider);
}

.table thead .two_row {
  text-align: center;
  border-bottom: 1px solid #e2e5ea;
}

.table .thead_name {
  width: 90px;
}

.table .thead_name_icon {
  width: 120px;
}

.table span {
  font-size: 14px;
}

.table td {
  border-bottom: 1px solid var(--line-divider);
  vertical-align: middle;
}

.table th {
  vertical-align: middle;
}

.table thead {
  height: 60px;
  border-bottom: 1px solid var(--point-color);
}

.table thead tr th {
  padding: 10px;
}

.table thead tr :where(th, th span, th a, th div, th button) {
  text-align: left;
  font-size: 14px;
  color: var(--gray-600, #6d717b);
}

.table.cell_table tbody tr th {
  text-align: left;
  padding-left: 10px;
  width: 180px;
}

.table thead th .sort_box {
  display: flex;
  gap: 5px;
  align-items: center;
}

.table tbody tr {
  z-index: 0;
}

.table:not(.not_hover) tbody tr:not(:where(.table_hover_effect, .no_event)):hover {
  background: var(--gray-10, #f9fafd);
}

.table:not(.not_hover) tbody tr:hover .point_cell {
  background: transparent;
}

.table:not(.not_hover) tbody tr:not(:where(.table_hover_effect, .no_event)):hover {
  cursor: pointer;
}

.table tbody td {
  height: 65px;
  padding: 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-divider);
}
.table tbody td,
.table tbody td a {
  font-size: 14px;
}

.table .btn_wrap {
  display: flex;
  gap: 5px;
}

.table .btn_wrap a:hover,
.table .btn_wrap .select_wrap:hover {
  background: #fff;
  z-index: 1;
}

.section_title {
  display: flex;
  gap: 7px;
  align-items: center;
  margin-bottom: 30px;
}

.section_title h2 {
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 0;
}

.table_title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.table_top_section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px 0;
}
.table tfoot td {
  background: #f4f7fa;
}

.cell_table tbody td,
.cell_table tbody th,
.diary_table tbody td,
.diary_table tbody th {
  border-bottom: 1px solid var(--gray-50-background-divider, #f3f4f8);
}

.cell_table:not(.not_hover) tbody tr:hover,
.diary_table tbody tr:hover {
  background: inherit;
  cursor: default !important;
}

.diary_table td {
  height: 100px !important;
  vertical-align: top !important;
}

.table .two_rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.table .two_rows .span_div {
  display: inline-block;
  width: 100%;
  height: 1px;
  background: var(--line-divider);
}

.table_hover_btn tbody tr:hover {
  cursor: default;
  background: inherit;
}

.table_annual thead th,
.table_annual tbody td {
  padding: 10px 4px !important;
}

.table .active {
  background: var(--bg-light);
}

tr.group_tr:has(+ tr.group_child_tr) th,
tr.group_tr:has(+ tr.group_child_tr) td {
  border-bottom: none;
}

tr.group_child_tr:has(+ tr.group_child_tr) th,
tr.group_child_tr:has(+ tr.group_child_tr) td {
  border-bottom: none;
}

/* Pagination */
.pagination_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: 30px 0;
  height: 90px;
}

.pagination {
  list-style: none;
  display: inline-block;
  padding: 0;
}

.pagination li {
  display: inline;
  text-align: center;
}

.pagination li.arr a {
  cursor: default;
}

.pagination li.arr button i {
  vertical-align: middle;
}

.pagination li.arr a.active,
.pagination li.arr button.active {
  cursor: pointer;
}

.pagination li.prev a,
.pagination li.prev button {
  margin-right: 8px;
}

.pagination li.next a,
.pagination li.next button {
  margin-left: 8px;
}

.pagination li a {
  float: left;
  display: block;
  font-size: 14px;
  color: #999;
  border: 1px solid transparent;
  padding: 0 5px;
  width: 34px;
  height: 34px;
  line-height: 32px;
  border-radius: 3px;
  font-weight: 500;
}

.pagination li button {
  font-size: 14px;
  color: #999;
  border: 1px solid transparent;
  padding: 0 5px;
  width: 34px;
  height: 34px;
  line-height: 32px;
  border-radius: 3px;
}

.pagination li a:hover,
.pagination li button:hover,
.pagination li a.active,
.pagination li button.active,
.pagination li a:active,
.pagination li button:active {
  background-color: #407df1;
}

.pagination li a:hover span,
.pagination li button:hover,
.pagination li a.active span,
.pagination li button.active,
.pagination li a:active span,
.pagination li button:active {
  color: #ffffff;
}

.pagination li a.active,
.pagination li button.active {
  cursor: default;
  outline: none;
}

.pagination_wrap .table_sum {
  color: var(--text-gray-400);
}

.pagination_wrap .table_sum em {
  color: var(--text-gray-600);
}

/* input */
input[type='text'],
input[type='password'],
input[type='number'],
input[type='tel'] {
  height: 38px;
  font-family: 'NotoSans';
  padding-left: 12px;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  border-radius: 4px;
}

input.error {
  border: 1px solid #f46363 !important;
}

input:disabled,
input:read-only {
  background: var(--gray-50-background-divider, #f3f4f8);
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  cursor: default;
}

input.placeholder_right::placeholder {
  text-align: right;
  padding-right: 12px;
}

.none_warning {
  border: 1px solid #fae5c6;
  border-radius: 6px;
  background: #fff7e0;
  font-size: 14px;
  color: #555555;
  width: 406px;
  height: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  padding: 0 25px 0 20px;
  margin-top: 10px;
}

.index_warning {
  width: 100%;
  height: 65px;
  margin-top: 0;
  font-size: 16px;
}

.index_warning i {
  margin-right: 0 !important;
}

.index_warning span,
.index_warning strong,
.index_warning p {
  font-size: 16px;
}

.index_warning strong {
  font-weight: 700;
}

.input_email_wrap {
  display: flex;
  gap: 8px;
  width: 300px;
  height: 38px;
  padding: 0px 12px;
  background: #fff;
  border: 1px solid #d6dae1;
  border-radius: 4px;
  outline: none;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  text-align: left;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #1a1818;
  caret-color: #407df1;
  padding: 8px 12px;
}

.input_email_wrap .input_email {
  width: calc(100% / 2 - 4px);
  height: 100%;
  padding-left: 0px;
  border: none;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
}

.input_radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  text-indent: -9999px;
}

.input_radio_wrap {
  position: relative;
  display: inline-block;
  padding: 5px 0;
}

.input_radio_wrap + .input_radio_wrap {
  margin-left: 16px;
}

.input_radio + label {
  display: inline-block;
  position: relative;
  padding-left: 27px;
  height: 22px;
  cursor: pointer;
  color: #1a1818;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

/* .input_radio + label::before { display: block; content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; text-align: center; background: #ffffff; border: 1px solid #d6dae1; border-radius: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; } */
.input_radio + label::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  text-align: center;
  background: url('../img/svg_icon/radio-unchecked.svg') center no-repeat;
  border: 1px solid transparent;
}

/* .input_radio:checked + label::before { background: #407df1; border: 1px solid transparent; } */

.input_radio:checked + label::before {
  background: url('../img/svg_icon/radio-checked.svg') center no-repeat;
  border: 1px solid transparent;
}

/* .input_radio:checked + label::after { content: ''; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; background: #ffffff; border-radius: 100%; } */

.input_radio:disabled + label {
  cursor: default;
}

.input_radio:disabled + label::before {
  background-image: url('../img/svg_icon/radio-disabled.svg');
  background-position: center;
}

.input_radio:disabled:checked + label::before {
  background-image: url('../img/svg_icon/radio-disabled-checked.svg');
  background-position: center;
}

/* .input_radio:disabled + label::after { background-color: #d6dae1; } */

/* Checkbox Button */
.input_check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  text-indent: -9999px;
}

.input_check_wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 21px;
}

.input_check_wrap + .input_check_wrap {
  margin-left: 16px;
}

.input_check + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 26px;
  min-height: 18px;
  font-size: 14px;
  line-height: 21px;
}

.input_check + label::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  text-align: center;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d6dae1;
  background: #ffffff url('../img/svg_icon/check-unchecked.svg') center no-repeat;
}

.input_check:checked + label::before {
  background: url('../img/svg_icon/check-checked.svg') center no-repeat;
  background-color: #407df1;
  color: #a8a9af;
  border: 1px solid transparent;
}

.input_check:disabled + label {
  cursor: default;
}

.input_check:disabled + label::before {
  background-image: none;
  background-color: #f4f5f8;
  border: 1px solid #d6dae1;
}

/* .input_check:disabled:not(:checked) + label::before { background-image: none; background: #f4f5f8; } */

.input_check[disabled] + label::before {
  background-image: url('../img/svg_icon/check-disabled.svg');
  background-position: center;
}

.input_check[disabled]:checked + label::before {
  background-image: url('../img/svg_icon/check-disabled-checked.svg');
  background-position: center;
}

input::-moz-placeholder {
  color: #999999;
}

input::-webkit-input-placeholder {
  color: #999999;
}

input:-moz-placeholder {
  color: #999999;
}

input:-ms-input-placeholder {
  color: #999999;
}

/* textarea */
.text_area {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--line-box);
  border-radius: 6px;
  line-height: 20px;
}
.text_area_full {
  width: 100%;
}

.text_area:read-only {
  border: none;
}

textarea.no_resize {
  resize: none;
}

/* file */
.file_content {
  display: flex;
  align-items: center;
}

.file_content label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

input[type='file'] {
  width: calc(100% - 135px);
  padding: 4px 0 4px 12px;
  height: 38px;
  border: none;
  font-size: 14px;
}

input[type='file']:read-only {
  border: none !important;
  background: none;
}

input[type='file']::-webkit-file-upload-button {
  visibility: hidden;
  display: none;
}

.btn_file {
  display: inline-block;
  width: 120px !important;
  height: 38px;
  background: #ffffff;
  border: 1px solid #d6dae1;
  border-radius: 6px;
  cursor: pointer;
  line-height: 38px;
  transition: all ease-out 0.25s;
}

.btn_file + input[type='file'] {
  padding-left: 10px;
  cursor: pointer;
  pointer-events: none;
}

.file_content .input_hidden {
  position: absolute;
  visibility: hidden;
}

.file_content .download {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: 10px;
  border: 1px solid #d6dae1;
  border-radius: 6px;
  background: #fff;
}
.file_content .download img {
  vertical-align: middle;
}

.upload_file_del_checkbox {
  display: none;
}

.upload_file_del_checkbox:checked + label {
  display: none;
}

.upload_file_del_checkbox + label {
  cursor: pointer;
}

.upload_file_del_checkbox:checked ~ button {
  display: none;
}

/* Checkbox Button */
.input_check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  text-indent: -9999px;
}

.input_check_wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 21px;
}

.input_check_wrap + .input_check_wrap {
  margin-left: 16px;
}

.input_check + label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  padding-left: 26px;
  min-height: 18px;
  font-size: 14px;
  line-height: 21px;
}

.input_check + label::before {
  display: block;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  text-align: center;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d6dae1;
  background: #ffffff url('../img/svg_icon/check-unchecked.svg') center no-repeat;
}

.input_check:checked + label::before {
  background: url('../img/svg_icon/check-checked.svg') center no-repeat;
  background-color: #407df1;
  color: #a8a9af;
  border: 1px solid transparent;
}

.input_check:disabled + label {
  cursor: default;
}

.input_check:disabled + label::before {
  background-image: none;
  background-color: #f4f5f8;
  border: 1px solid #d6dae1;
}

/* .input_check:disabled:not(:checked) + label::before { background-image: none; background: #f4f5f8; } */

.input_check[disabled] + label::before {
  background-image: url('../img/svg_icon/check-disabled.svg');
  background-position: center;
}

.input_check[disabled]:checked + label::before {
  background-image: url('../img/svg_icon/check-disabled-checked.svg');
  background-position: center;
}

.checkbox_label_bar input {
  position: absolute;
  left: -10000px;
}

.checkbox_label_bar label {
  position: relative;
  display: block;
  width: 40px;
  height: 24px;
  background: var(--line-divider);
  border-radius: 24px;
  transition: all ease-out 0.25s;
  cursor: pointer;
}

.checkbox_label_bar input:disabled:not(:checked) + label {
  background: #edeef2;
  pointer-events: none;
}

.checkbox_label_bar input:checked + label {
  background: var(--point-color);
}

.checkbox_label_bar input:disabled:checked + label {
  background: #bfd3fa;
  pointer-events: none;
}

.checkbox_label_bar.expert input:checked + label {
  background: var(--expert-primary-purple-500);
}

.checkbox_label_bar label::after {
  position: absolute;
  display: block;
  content: '';
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
  background: #fff;
  border-radius: 16px;
  cursor: pointer;
  transition: left 0.25s ease-out;
}

.checkbox_label_bar input:checked + label::after {
  left: 20px;
}

.checkbox_label_chips input {
  position: absolute;
  left: -10000px;
}

.checkbox_label_chips input + label::before {
  position: absolute;
  content: '';
  width: 24px;
  height: 24px;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  background: center/contain url(../img/svg_icon/price-check-gray.svg) no-repeat;
}

.checkbox_label_chips input:checked + label::before {
  background: url(../img/svg_icon/price-check.svg) no-repeat;
  filter: brightness(0) invert(1);
}

.checkbox_label_chips label {
  position: relative;
  display: flex;
  height: 38px;
  padding: 10px 12px 10px 40px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 36px;
  background: var(--gray-50-background, #f3f4f8);

  color: var(--gray-400-placeholder, #acb1ba);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px; /* 100% */
  cursor: pointer;
}

.checkbox_label_chips input:checked + label {
  background: var(--primary-blue-500-main-color, #407df1);
  color: white;
}

/* date picker */
/* 날짜 피커와 셀렉트박스를 포함하는 컨테이너 */
.date-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-range-with-select {
  position: relative;
  display: flex;
  align-items: center;
}

.date-range-with-select .date_picker {
  display: flex;
  align-items: center;
}

.date-range-with-select .date_picker input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.date-range-with-select .date_picker input:disabled ~ .date-range-arrow-button {
  background: var(--gray-50-background-divider, #f3f4f8);
  pointer-events: none;
}

/* 드롭다운 셀렉트박스 스타일 */
.date-range-with-select .date-range-arrow-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  border-left: none;
  border-radius: 0 4px 4px 0;
  width: 38px;
  height: 38px;
  right: 0;
  top: 0;
  transition: background 0.3s ease;
}

.date-range-with-select .date_picker input ~ .date-range-arrow-button:hover {
  background: var(--gray-50-background-divider, #f3f4f8);
}

.date-range-with-select .date-range-dropdown {
  position: absolute;
  display: none;
  top: 42px;
  left: 0;
  width: 100%;
  padding: 4px 0;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 6px;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  background: var(--white, #fff);
  transition: background 0.3s ease;
  z-index: 1000;
}

.date-range-with-select.is-active .date-range-dropdown {
  display: flex;
}

.date-range-with-select .date-range-dropdown li {
  display: flex;
  height: 38px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
}

.date-range-with-select .date-range-dropdown li .option {
  padding: 14px 12px;
  width: 100%;
  text-align: left;
  cursor: pointer !important;
}

.date-range-with-select .date-range-dropdown li:hover {
  background: var(--gray-10, #f9fafd);
}

.date_picker {
  position: relative;
}

.date_picker.disabled {
  pointer-events: none;
}

.date_picker.disabled .calendar_input_popup {
  background: var(--gray-50-background-divider, #f3f4f8);
}

.date_picker .icon {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translateY(-50%);
  z-index: 1;
}

.date_picker .calendar_input_popup {
  width: 154px;
  position: relative;
  padding-left: 38px;
  cursor: pointer;
}

.date_picker .calendar_input_popup:hover,
.date_picker .calendar_input_popup:focus {
  padding-left: 38px;
}

.date_picker .calendar_input_popup::after {
  position: absolute;
  content: '';
  top: 50%;
  right: 0;
  width: 24px;
  height: 24px;
  background-image: url('../img/icon/ico_24.png');
  background-position: -264px -72px;
  transform: translateY(-50%);
}

.date_picker .calendar_datepicker_clear {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  display: none;
}

.date_picker .calendar_datepicker_popup {
  position: absolute;
  display: none;
  flex-direction: column;
  top: 44px;
  width: 320px;
  height: auto;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line-box);
  border-radius: 8px;
  z-index: 2;
}

.date_picker .calendar_datepicker_popup.above {
  top: auto;
  bottom: 110%;
}

.calendar_datepicker_popup.vanilla-calendar_year .vanilla-calendar-header .vanilla-calendar-month {
  display: none;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header {
  justify-content: center;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-box);
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-arrow_prev::before {
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-color: #fff;
  transform: rotate(0) translate(-50%, -50%);
  background-image: url('../img/icon/ico_24.png');
  background-position: -144px 0;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-arrow_prev::after {
  display: none;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-arrow_next::before {
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  background-color: #fff;
  transform: rotate(0) translate(-50%, -50%);
  background-image: url('../img/icon/ico_24.png');
  background-position: -144px 0;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-arrow_next::after {
  display: none;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-header__content {
  flex-grow: 0;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header span {
  display: inline-block;
  padding: 0 4px;
  font-size: 20px;
  font-weight: 500;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-year {
  padding-right: 0;
}
.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-year,
.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-month {
  font-size: 20px;
  font-weight: 500;
}

.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-year:hover,
.date_picker .calendar_datepicker_popup .vanilla-calendar-header .vanilla-calendar-month:hover {
  color: var(--point-color);
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month {
  width: 202px;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-header {
  margin-bottom: 20px;
}

.date_picker
  .calendar_datepicker_popup.vanilla-calendar_month
  .vanilla-calendar-header
  :where(.vanilla-calendar-header__content, .vanilla-calendar-header__content button) {
  color: var(--gray-900---heading, #1a1818);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-header .vanilla-calendar-arrow {
  width: 38px;
  height: 38px;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-months {
  justify-items: center;
  column-gap: 8px;
  row-gap: 20px;
}

/* 월 캘린더 월 제거 */
.date_picker
  .calendar_datepicker_popup.vanilla-calendar_month
  .vanilla-calendar-header
  .vanilla-calendar-header__content
  .vanilla-calendar-month {
  display: none;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-months__month {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 9px 0;
  justify-content: center;
  align-items: center;

  color: var(--gray-900---heading, #1a1818);
  text-align: center;

  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-months__month:hover {
  border-radius: 32px;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-months__month_selected {
  border-radius: 32px;
  color: var(--white, #fff);
  font-weight: 500;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-month-button {
  display: flex;
  height: 38px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex: 1 0 0;

  border-radius: 6px;
  border: 1px solid var(--gray-200---divider, #e2e5ea);
  background: var(--white, #fff);

  color: var(--gray-900---heading, #1a1818);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
}

.date_picker .calendar_datepicker_popup.vanilla-calendar_month .vanilla-calendar-months__month_disabled {
  color: var(--gray-400---placeholder, #acb1ba);
}

.date_picker
  .calendar_datepicker_popup.vanilla-calendar_year
  .vanilla-calendar-header
  .vanilla-calendar-header__content
  .btn {
  display: none;
}

.date_picker:hover .single_date_del {
  display: block;
}

.date_picker .single_date_del {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.vanilla-calendar-years__year,
.vanilla-calendar-months__month {
  color: var(--point-color);
}

.vanilla-calendar-years__year_selected,
.vanilla-calendar-months__month_selected {
  background: var(--point-color);
  color: #fff;
}

.vanilla-calendar-years__year_selected:hover,
.vanilla-calendar-months__month_selected:hover {
  color: #fff;
  background: var(--point-color);
}

.vanilla-calendar-week__day,
.vanilla-calendar-day__btn {
  font-size: 14px;
}

.vanilla-calendar-day__popup {
  display: none;
}
.vanilla-calendar-day__btn:hover + .vanilla-calendar-day__popup {
  display: inline-block;
  top: auto;
  bottom: 120%;
  min-width: 82px;
  width: auto;
  padding: 8px 9px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #fff;
  text-align: center;
  background: #555;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  word-break: keep-all;
}

.vanilla-calendar-day__popup::before,
.vanilla-calendar-day__btn:hover + .vanilla-calendar-day__popup::before {
  content: none !important;
  display: none !important;
}

.vanilla-calendar-day__btn:hover + .vanilla-calendar-day__popup::after {
  transform: translateX(-50%) rotate(180deg);
  top: auto;
  bottom: -8px;
  border-color: rgb(0 0 0 / 0%) rgb(0 0 0 / 0%) #555;
  border-style: solid;
  border-width: 0px 7px 8px;
}

/* flex_box */
.flex_box {
  display: flex;
  gap: 7px;
  align-items: center;
}

.flex_box.between {
  justify-content: space-between;
}

.flex_box.wrap {
  flex-wrap: wrap;
}

.flex_box.column {
  flex-direction: column;
  align-items: flex-start;
}

/* 부가 설명 */
.addition_msg {
  font-size: 14px;
  color: var(--primary-red-500---main-color, #ff4e4e);
}

.point_msg {
  font-size: 14px;
  color: var(--point-color);
}

.gray_msg {
  font-size: 14px;
  color: var(--color-gray-600);
}

/* btn_box */
.btn_box {
  display: flex;
  justify-content: center;
  margin: 60px auto;
  gap: 12px;
}

/* 로딩페이지 */
#loading {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  display: block;
  opacity: 0.7;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 99;
}

#loading-image {
  position: absolute;
  z-index: 100;
  width: 66px;
  height: 66px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* tooltip */
.tooltip {
  position: relative;
}

/* .tooltip:hover::after {
  position: absolute;
  content: "2022년 최저임금 미달";
  padding: 6px 15px; 
  bottom: 150%;
  left: 0;
  font-size: 14px; 
  text-align: left; 
  white-space: nowrap; 
  transform: translateX(-30%); 
  color: #ededed; 
  background: var(--bg-dark); 
  border-radius: 6px; 
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25); 
  z-index: 1;
} */

.tooltip i,
.tooltip img {
  cursor: pointer;
}

.tooltiptext {
  position: absolute;
  padding: 6px 15px;
  left: 50%;
  bottom: 140%;
  min-width: 60px;
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
  transform: translateX(-50%);
  visibility: hidden;
  color: #ededed;
  background: var(--bg-dark);
  border-radius: 6px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  z-index: 100;
  opacity: 0;
  line-height: 20px;
  transition: opacity 0.3s;
}

.tooltiptext.top_left {
  left: 0;
  transform: translateX(-10%);
}

.tooltiptext.bottom {
  top: 110%;
  bottom: auto;
}

.tooltiptext.bottom_left {
  left: 0;
  top: 110%;
  bottom: auto;
  transform: translateX(-10%);
}

.tooltiptext p {
  font-size: 14px;
  color: #ededed;
  line-height: 20px;
}

.tooltiptext p + p {
  padding-top: 16px;
}

.tooltiptext::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltiptext.top_left::after {
  left: 15%;
}

.tooltiptext.bottom::after {
  top: -25%;
  left: 87px;
  border-color: transparent transparent #555 transparent;
}

.tooltiptext.bottom_left::after {
  top: -25%;
  left: 13%;
  border-color: transparent transparent #555 transparent;
}

.tooltiptext.bottom.alert_setting::after {
  top: -7%;
  left: 23px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* 연속된 section*/
.section_div {
  width: calc(100% + 130px);
  height: 10px;
  margin-left: -40px;
  background: var(--bg-light);
}

.section {
  margin-bottom: 80px;
}

.section + .last_section {
  margin-bottom: 80px;
}

/* 알림 */
.alert_num {
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin-left: 6px;
  padding: 1px 6.5px 1px 5.5px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--primary-red-500---main-color, #ff4e4e);
  border-radius: 8.5px;
  line-height: 16px !important;
}

.page_tab_list .alert_num {
  position: relative;
  top: -2px;
}

/* snackbar */

#snackbar {
  visibility: hidden;
  position: fixed;
  left: 50%;
  bottom: 60px;
  display: flex;
  transform: translateX(-50%);
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-width: 150px;
  height: 45px;
  padding: 0 15px;
  text-align: center;
  border-radius: 40px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  background: #fff;
  z-index: 1200;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation:
    fadein 1s,
    fadeout 0.5s 2.5s;
  animation:
    fadein 1s,
    fadeout 0.5s 2.5s;
}

#snackbar.button_align {
  left: 56.5%;
}

@media (max-width: 576px) {
  #snackbar {
    height: 50px;
    min-width: 300px;
    white-space: pre-line;
  }
}

#snackbar.show span {
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

@-webkit-keyframes fadein {
  0% {
    bottom: 0;
    opacity: 0;
    display: none;
  }
  1% {
    bottom: 0;
    opacity: 0;
    display: flex;
  }
  100% {
    bottom: 60px;
    opacity: 1;
    display: flex;
  }
}

@keyframes fadein {
  0% {
    bottom: 0;
    opacity: 0;
    display: none;
  }
  1% {
    bottom: 0;
    opacity: 0;
    display: flex;
  }
  100% {
    bottom: 60px;
    opacity: 1;
    display: flex;
  }
}

@-webkit-keyframes fadeout {
  0% {
    bottom: 60px;
    opacity: 1;
    display: flex;
  }
  99% {
    bottom: 0;
    opacity: 0;
    display: flex;
  }
  100% {
    bottom: 0;
    opacity: 0;
    display: none;
  }
}

@keyframes fadeout {
  0% {
    bottom: 60px;
    opacity: 1;
    display: flex;
  }
  99% {
    bottom: 0;
    opacity: 0;
    display: flex;
  }
  100% {
    bottom: 0;
    opacity: 0;
    display: none;
  }
}

/* 테이블 row hover 버튼 */
.table_hover_effect {
  position: relative;
}
.table_hover_effect:hover .table_hover_btn_wrap {
  display: flex;
}

.no_event {
  cursor: default;
}

.table_hover_btn_wrap {
  position: absolute;
  display: none;
  right: 10px;
  top: -17px;
  transform: translateY(-50%);
  justify-content: flex-end;
  gap: 10px;
  background: var(--bg-light);
  z-index: 20;
  padding: 10px;
  border: 1px solid #d6dae1;
  border-radius: 12px;
}

/* .table_hover_btn_wrap {
  position: absolute;
  display: none;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  justify-content: flex-end;
  gap: 10px;
  background: transparent;
} */

/* input number arrow hide */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

/* 폰트 태그 컬러 변경 */
.font_color_change > font {
  color: var(--text-gray-600) !important;
}

.info_box {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  height: 65px;
  margin-bottom: 20px;
  background: #fff7e0;
  border: 1px solid #fae5c6;
  border-radius: 6px;
}

.info_box p {
  color: var(--gray-700-text, #52545c);
  /* body/medium-400 ✅(pc) */
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px; /* 100% */
}

.info_box.default {
  border: 1px solid var(--gray-200-divider, #e2e5ea);
  background: var(--white, #fff);
}

.info_box.info_box_sm {
  height: 36px;
  padding: 8px 16px;
}

/* modal*/
body.custom_alert {
  overflow: hidden;
}

.modal_background {
  opacity: 0;
  transition: all 0.15s;
}
.modal_background.on {
  position: fixed;
  height: 100%;
  inset: 0;
  z-index: 1000;
  background-color: #00000073;
  opacity: 1;
}

.modal_content {
  position: relative;
  top: 50%;
  left: 50%;
  width: 416px;
  padding: 30px;
  border: 1px solid var(--line-box);
  border-radius: 6px;
  transform: translate(-50%, -50%);
  background: #fff;
  z-index: 1000;
  overflow-wrap: break-word;
  opacity: 0;
  transition: all 0.15s;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}

@media (max-width: 576px) {
  .modal_content {
    width: 80%;
  }
}
.modal_background.on + div .modal_content {
  font-family: 'notoSansKR', sans-serif;
  opacity: 1;
  outline: 0;
}

.modal_content .modal_content_txt {
  font-family: 'notoSansKR', sans-serif;
  font-size: 14px;
  justify-content: center;
  text-align: center;
  color: var(--bg-dark);
  line-height: 20px;
  word-break: keep-all;
}

.modal_content .modal_content_txt.opt {
  font-family: 'notoSansKR', sans-serif;
  justify-content: center;
  flex-direction: column;
  color: var(--bg-dark);
  gap: 10px;
}

.modal_content .modal_content_txt.opt h2 {
  font-family: 'notoSansKR', sans-serif;
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--text-gray-600);
  font-size: 18px;
  font-weight: 700;
}

.modal_content .modal_content_btn {
  font-family: 'notoSansKR', sans-serif;
  display: flex;
  margin-top: 20px;
  justify-content: center;
  gap: 8px;
}

.modal_content .modal_content_btn button {
  min-width: 72px !important;
}

/* .modal_content .modal_content_body {
  position: relative;
  padding: 32px 32px 24px;
  background-color: rgb(255, 255, 255);
  border: 0px;
  border-radius: 2px;
  box-shadow: rgb(0 0 0 / 12%) 0px 3px 6px -4px, rgb(0 0 0 / 8%) 0px 6px 16px, rgb(0 0 0 / 5%) 0px 9px 28px 8px;
  pointer-events: auto;
} */

/* coach mark */
.coach_mark_background {
  position: fixed;
  inset: 0;
  z-index: 10;
}
.coach_mark_wrap {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e2e5ea;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 15px;
  z-index: 10000;
  padding: 20px;
}
.coach_mark_wrap.up::before {
  position: absolute;
  top: -8px;
  left: 20px;
  content: '';
  width: 14px;
  height: 14px;
  background-color: #fff;
  transform: rotate(45deg);
}
.coach_mark_wrap.up-center::before {
  position: absolute;
  top: -8px;
  left: 50%;
  content: '';
  width: 14px;
  height: 14px;
  background-color: #fff;
  transform: rotate(45deg);
}
.coach_mark_wrap::before {
  position: absolute;
  top: 24px;
  left: -8px;
  content: '';
  width: 14px;
  height: 14px;
  background-color: #fff;
  transform: rotate(45deg);
}

.coach_mark_wrap .coach_mark_txt {
  text-align: center;
}

.coach_mark_wrap .coach_mark_txt h2 {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
}

.coach_mark_wrap .coach_mark_txt p {
  margin: 20px 0;
  line-height: 20px;
}

.coach_mark_btn button.active_ani {
  animation: btnAni 0.85s ease-out;
}

@keyframes btnAni {
  0% {
    background: #fff;
  }
  5% {
    background: #b1edff;
  }
  100% {
    background: #b1edff00;
  }
}

/* 로딩 페이지 */
.loading_box {
  position: absolute;
  inset: 0;
  display: none;
  background: #f4f5f8;
  opacity: 0.5;
  z-index: 1000;
}

/* tippy */
.tippy-arrow {
  color: #555;
}

.tippy-box[data-theme~='tour'] {
  border-radius: 6px;
  background: var(--gray-700-text, #52545c);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.tippy-box[data-theme~='tour'] .tippy-content {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.tippy-box[data-theme~='tour'] .tippy-content .tour_title {
  flex: 1 0 0;
  color: var(--white, #fff);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
}

.tippy-box[data-theme~='tour'] .tippy-content .tour_content {
  flex: 1 0 0;
  color: var(--white, #fff);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.tippy-box[data-theme~='tour'] .tippy-content .tour_bottom {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.tippy-box[data-theme~='tour'] .tippy-content .tour_bottom .tour_step {
  color: var(--gray-400-placeholder, #acb1ba);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.tippy-box[data-theme^='tomato'] {
  padding: 10px !important;
  background-color: #555;
  border-radius: 6px;
}

.tippy-box[data-theme*='padding_16'] {
  padding: 16px !important;
  background-color: #555;
  border-radius: 6px;
}

.tippy-box[data-theme^='tomato'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #555;
}

.tippy-box[data-theme^='tomato'] .tippy-content {
  flex: 1 0 0;
  color: var(--white, #fff);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  padding: 0;
  letter-spacing: 0px;
}

.tippy-box[data-theme~='tomato_200'] {
  max-width: 200px;
  width: 200px;
  padding: 7px 14px;
  background-color: #555;
  border-radius: 6px;
}

.tippy-box[data-theme~='tomato_200'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: #555;
}

.tippy-box[data-theme~='tomato_200'] .tippy-content {
  font-size: 14px;
  font-weight: 400;
  color: var(--white, #fff);
  line-height: 20px;
}

.tippy_custom_content {
  color: var(--white, #fff);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.tippy-box[data-theme*='description'] {
  line-height: 1.5; /* ◀ 줄 높이 설정 (line-clamp 계산 기준) */
}

.tippy-box[data-theme*='description'] .tippy-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 30; /* ◀◀◀ 30줄 제한 */
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

/* label */
.label {
  display: inline-block;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d1d1d1;
  border-radius: 20px;
  color: #555;
  font-size: 12px;
  line-height: 22px;
}

.label * {
  color: #555;
  font-size: 12px;
  line-height: 12px !important;
}

.green_label {
  display: inline-flex;
  align-items: center;
  height: 28px;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 20px;
  color: var(--color-green-600);
  font-size: 12px !important;
  line-height: 12px !important;
  background: #e7ffe7;
}

.green_label * {
  color: var(--color-green-600);
  font-size: 12px !important;
  line-height: 12px !important;
}

.primary_label {
  display: inline-flex;
  height: 28px;
  padding: 8px 10px;
  align-items: flex-start;
  gap: 8px;
  border-radius: 20px;
  border: 1px solid var(--primary-blue-100, #bfd3fa);
  background: var(--primary-blue-10, #e9f0fe);
}

.primary_label * {
  color: var(--primary-blue-600, #285ec5);
  font-size: 12px;
  font-weight: 400;
  line-height: 12px; /* 100% */
}

/* empty area */
.empty_area {
  padding: 80px 0 !important;
  background: var(--bg-light);
  border-radius: 0px 0px 10px 10px;
  border-bottom: none !important;
  color: var(--text-gray-500);
  font-size: 16px !important;
  font-weight: 500;
  text-align: center;
}

/* 사원정보 뷰모드, 에딧 모드 */
:where(.view_mode_container, .edit_mode_container form) {
  display: flex;
  flex-direction: column;
  row-gap: 60px;
}

:is(.view_mode_container, .edit_mode_container) .mode_title {
  color: var(--gray-900-heading, #1a1818);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px; /* 100% */
}

:where(.view_mode_container, .edit_mode_container) .mode_sub_title {
  display: flex;
  align-items: center;
  height: 40px;
  color: var(--gray-900-heading, #1a1818);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px; /* 100% */
}

:where(.view_mode_container, .edit_mode_container) .view_mode_item_box {
  margin-top: 10px;
}
:where(.view_mode_container, .edit_mode_container) .view_mode_item_box .view_mode_item {
  display: flex;
  border-bottom: 1px solid var(--gray-50-background-divider, #f3f4f8);
}

:where(.view_mode_container, .edit_mode_container) .view_mode_item_box .view_mode_item > div {
  display: flex;
  column-gap: 10px;
  padding: 10px;
  min-height: 65px;
  flex: 1 0 0;
  align-items: center;
}

:where(.view_mode_container, .edit_mode_container) .view_mode_item_box .view_mode_item .view_mode_item_title {
  flex: 0 0 auto;
  width: 150px;
  color: var(--gray-600, #6d717b);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px; /* 100% */
}

:where(.view_mode_container, .edit_mode_container) .view_mode_item_box .view_mode_item span:not(.addition_msg) {
  color: var(--gray-900-heading, #1a1818);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px; /* 100% */
}

:where(.view_mode_container, .edit_mode_container) .view_mode_item_box .view_mode_item span.not_entered {
  color: var(--gray-400-placeholder, #acb1ba);
  font-size: 14px;
  font-weight: 400;
  line-height: 14px; /* 100% */
}

:where(.view_mode_container, .edit_mode_container) .view_mode_item_box .view_mode_item .empty_view {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: var(--gray-10, #f9fafd);

  color: var(--gray-700-text, #52545c);
  font-size: 14px;
  font-weight: 500;
  line-height: 14px; /* 100% */
}

.empty_view {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  background: var(--gray-10, #f9fafd);
  color: var(--gray-700-text, #52545c);
  text-align: center;

  font-size: 14px;
  font-weight: 500;
  line-height: 14px; /* 100% */
}

.download_text {
  display: inline-block;
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
}

/* END 사원정보 뷰모드, 에딧 모드 */

/* START openai 챗봇 */
.chat_body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 20;
  bottom: 120px;
  right: 30px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.title-text {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.title-text img {
  border-radius: 6px;
  background-color: #edeef2;
  padding: 8px;
}

.tmp_btn {
  width: 56px;
  height: 56px;
  background-color: #407de9;
  border-radius: 24px;
  position: fixed;
  z-index: 1;
  bottom: 100px;
  right: 30px;
  padding: 10px;
}
.chat_btn {
  background-image: url('/hulam/img/svg_icon/botLogo.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  cursor: pointer;
  width: 36px;
  height: 36px;
}
.chat-container {
  max-width: 1000px;
  margin: 50px auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-header {
  background-color: #407df1;
  color: #fff;
  padding: 15px;
  text-align: center;
  justify-content: center;
  display: flex;
}

.guide-messages {
  background-color: #ffeaea;
  margin: 0px 10px;
  border-radius: 8px;
  color: #52545c;
  padding: 10px;
  line-height: 19px;
  font-size: 12px;
  margin-bottom: 10px;
}

.beta {
  padding: 0 8px;
  background-color: #fff;
  width: fit-content;
  border-radius: 20px;
  margin-right: 10px;
  font-size: 12px;
  font-weight: 700;
  color: cornflowerblue;
}

.chat-messages {
  padding: 20px 10px 0 10px;
  width: 1000px;
  overflow-y: scroll;
  height: 590px;
}

.bot-message-main {
  margin-bottom: 15px;
}
.bot-message-main p,
.bot-message-main ul,
.bot-message-main ol,
.bot-message-main li,
.bot-message-main code,
.bot-message-main pre,
.bot-message-main strong,
.bot-message-main em,
.bot-message-main blockquote,
.bot-message-main h1,
.bot-message-main h2,
.bot-message-main h3,
.bot-message-main h4,
.bot-message-main h5,
.bot-message-main h6 {
  all: revert !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #222 !important;
  word-break: break-word !important;
  margin: 0 0 10px 0 !important;
}

.bot-message-main pre,
.bot-message-main code {
  background: #f5f5f5 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  overflow-x: auto !important;
  display: inline-block !important;
  font-family: monospace !important;
}

.bot-message-main pre {
  display: block !important;
  white-space: pre-wrap !important;
  margin-bottom: 10px !important;
}

.bot-message-main ul,
.bot-message-main ol {
  padding-left: 20px !important;
}

.bot-message-main li {
  list-style-type: disc !important;
}

.user-message {
  background-color: #407df1 !important;
  padding: 10px !important;
  border-radius: 8px;
  margin-left: auto;
  margin-right: 0;
  color: #fff;
  max-width: 850px;
}

.bot-message {
  background-color: #f4f7fa;
  padding: 10px;
  border-radius: 8px;
  max-width: 850px;
}

.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f3f4f8;
  /* border-top: 1px solid #ccc; */
}

.input-field {
  flex-grow: 1 !important;
  padding: 25px 10px 25px 18px !important;
  border: none !important;
  border-top-left-radius: 16px !important;
  border-bottom-left-radius: 16px !important;
  /* max-width: 330px !important; */
}

.input-field:is(:hover, :active, :focus) {
  color: none !important;
  border: none !important;
}

.button-box {
  height: 50px;
  width: 35px;
  background-color: #fff;
  align-items: center;
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}

.send-button {
  height: 20px;
  width: 20px;
  top: 15px;
  right: 0px;
  color: #fff;
  border: none;
  cursor: pointer;
  background-image: url('/hulam/img/svg_icon/sendButton.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
/* END openai 챗봇 */

/* DnD Drag and Drop */

.is_dragging {
  background: var(--gray-10, #f9fafd);
}

.dragging_tooltip {
  position: fixed;
  display: inline-flex;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(226, 229, 234, 0.8);
  background: rgba(243, 244, 248, 0.8);
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
  z-index: 99999;
}

.drag_up::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary-blue-500---main-color, #407df1);
}

.drag_down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary-blue-500---main-color, #407df1);
}

/*END DnD Drag and Drop */

.vacation_labor_disable_menu {
  opacity: 0.4;
  cursor: not-allowed !important;
}

.invisible-area {
  position: absolute !important;
  left: -9999999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

dialog {
  background: transparent;
  padding: 0;
  border: none;
}

dialog .dialog_content {
  border-radius: 10px 10px 0 0;
}

dialog .dialog_bottom {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  border-radius: 0 0 10px 10px;
  background: #f4f7fa;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.insurance-date-tooltip-wrapper :is(li, span) {
  color: var(--white, #fff);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.insurance-date-tooltip-wrapper li span.red_point {
  color: var(--primary-red-500---main-color, #ff4e4e);
}