@charset "UTF-8";
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09::v.0.1_안재민_수정
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* @import variables.scss */
/* 사이드 메뉴 열렸을 때의 너비 */
/* 사이드 메뉴 닫았을 때의 너비 */
/* 탑바메뉴 높이 */
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09

******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* @import mixins.scss */
/* 버튼칩 */
/* *****************************
* 초기화 : reset
******************************** */
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/*  @import reset.scss */
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Pretendard GOV", sans-serif;
  color: var(--krds-gray-90);
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
  word-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%;
}

body {
  font-size: var(--krds-fz-body-md);
  overflow-x: hidden;
}

*:focus {
  outline-offset: 0rem;
  outline: 1px solid rgba(36, 107, 235, 0.8);
}

::-moz-selection {
  background: var(--krds-secondary);
  color: var(--krds-white);
}

::selection {
  background: #003675;
  color: var(--krds-white);
}

body,
div,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
table,
th,
td,
form,
fieldset,
legend,
input,
textarea,
a,
button,
select,
ul,
li,
span,
em,
label,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  font-family: inherit;
  line-height: 1.5;
  letter-spacing: inherit;
}

pre {
  font-family: inherit;
}

input,
textarea,
a,
button,
select,
span,
label,
:before,
:after {
  font-size: inherit;
  font-weight: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 700;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img,
fieldset {
  border: 0;
}

fieldset {
  min-width: 100%;
}

img {
  max-width: 100%;
  vertical-align: top;
}

ul,
ol {
  list-style: none;
}

em,
address,
i {
  font-style: normal;
}

a,
a:hover,
a:active,
a:focus {
  color: inherit;
  text-decoration: none;
}

button,
input[type=submit],
input[type=button] {
  overflow: visible;
  margin: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

textarea {
  resize: none;
}

label {
  cursor: pointer;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type=text],
input[type=tel],
input[type=password],
input[type=file],
input[type=number],
input[type=email],
input[type=date],
input[type=datetime-local],
input[type=search],
textarea {
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

input[type=date] {
  position: relative;
}

caption {
  position: static !important;
  margin: 0 !important;
}

table {
  max-width: none;
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
}

[role=button] {
  cursor: pointer;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/*  @import root.scss */
:root {
  --sideMenu-width: 300px;
  /* **** 공통color_01 :: System_color : 시스템 색상 ****/
  --krds-primary: #246beb;
  --krds-secondary: #1fad1f;
  --krds-point: #e71825;
  --krds-gray: #8e8e8e;
  --krds-danger: #eb003b;
  --krds-warning: #ffb724;
  --krds-success: #008a1e;
  --krds-information: #2768ff;
  --krds-white: #fff;
  --krds-black: #000;
  /* **** 공통color_02 :: Primary_color : 주요 색상 ****/
  --krds-primary-0: #ffffff;
  --krds-primary-5: #eff5ff;
  --krds-primary-10: #d3e1fb;
  --krds-primary-20: #a7c4f7;
  --krds-primary-30: #7ca6f3;
  --krds-primary-40: #5089ef;
  --krds-primary-50: #246beb;
  --krds-primary-60: #1d56bc;
  --krds-primary-70: #16408d;
  --krds-primary-80: #0e2b5e;
  --krds-primary-90: #07152f;
  --krds-primary-100: #000000;
  /* **** 공통color_03 :: Secondary_color : 보조 색상 ****/
  --krds-secondary-0: #ffffff;
  --krds-secondary-5: #edf1f5;
  --krds-secondary-10: #cdd7e4;
  --krds-secondary-20: #b4c4d6;
  --krds-secondary-30: #99b0cb;
  --krds-secondary-40: #2a5c96;
  --krds-secondary-50: #2a5c96;
  --krds-secondary-60: #002b5e;
  --krds-secondary-70: #002046;
  --krds-secondary-80: #00162f;
  --krds-secondary-90: #000b17;
  --krds-secondary-100: #000000;
  /* **** 공통color_04 :: Point_color : 집중 색상 ****/
  --krds-point-5: #fdf2f3;
  --krds-point-10: #fad1d3;
  --krds-point-20: #f5a3a8;
  --krds-point-30: #f1747c;
  --krds-point-40: #ec4651;
  --krds-point-50: #ec4651;
  --krds-point-60: #b9131e;
  --krds-point-70: #8b0e16;
  --krds-point-80: #5c0a0f;
  --krds-point-90: #2e0507;
  /* **** 공통color_05 :: Grayscale : BG, Text, Line 색상 ****/
  --krds-gray-5: #f8f8f8;
  --krds-gray-10: #f0f0f0;
  --krds-gray-20: #e4e4e4;
  --krds-gray-30: #d8d8d8;
  --krds-gray-40: #c6c6c6;
  --krds-gray-50: #8e8e8e;
  --krds-gray-60: #717171;
  --krds-gray-70: #555555;
  --krds-gray-80: #2d2d2d;
  --krds-gray-90: #1d1d1d;
  --krds-gray-100: #000000;
  /* **** 공통color_06 :: danger : 오류,금지,위험 색상 ****/
  --krds-danger-5: #feecf0;
  --krds-danger-10: #fcd4de;
  --krds-danger-20: #f799b1;
  --krds-danger-30: #f36689;
  --krds-danger-40: #ef3e5e;
  --krds-danger-50: #eb003b;
  --krds-danger-60: #d50136;
  --krds-danger-70: #8d0023;
  --krds-danger-80: #5e0018;
  --krds-danger-90: #2f000c;
  /* **** 공통color_07 :: warning : 주의사항 색상 ****/
  --krds-warning-5: #fff8e9;
  --krds-warning-10: #ffeac1;
  --krds-warning-20: #ffe2a7;
  --krds-warning-30: #ffd47c;
  --krds-warning-40: #ffc550;
  --krds-warning-50: #ffb724;
  --krds-warning-60: #98690a;
  --krds-warning-70: #66490e;
  --krds-warning-80: #4d370b;
  --krds-warning-90: #332507;
  /* **** 공통color_08 :: success : 성공,완료,진행 색상 ****/
  --krds-success-5: #eef7f0;
  --krds-success-10: #cee9d4;
  --krds-success-20: #b2dcbb;
  --krds-success-30: #8cca99;
  --krds-success-40: #33a14b;
  --krds-success-50: #008a1e;
  --krds-success-60: #006e18;
  --krds-success-70: #005312;
  --krds-success-80: #00370c;
  --krds-success-90: #002207;
  /* **** 공통color_09 :: information : 정보제공 색상 ****/
  --krds-information-5: #e9f0ff;
  --krds-information-10: #d4e1ff;
  --krds-information-20: #a9c3ff;
  --krds-information-30: #7da4ff;
  --krds-information-40: #5286ff;
  --krds-information-50: #2768ff;
  --krds-information-60: #1f53cc;
  --krds-information-70: #173e99;
  --krds-information-80: #0c1f4d;
  --krds-information-90: #040a1a;
  /* **** 공통color_10 :: Text 색상 ****/
  --krds-text-title: #1d1d1d;
  --krds-text-detail: #555555;
  /* **** 공통color_11 :: background 색상 ****/
  --krds-background-base: #ffffff;
  --krds-background-layer-1: #f1f5f8;
  /* **** 공통shape_01 :: Font-size ****/
  --krds-fz-display-sm: 4rem;
  --krds-fz-display-md: 5rem;
  --krds-fz-display-lg: 6.6rem;
  --krds-fz-heading-sm: 3.2rem;
  --krds-fz-heading-md: 4rem;
  --krds-fz-heading-lg: 5rem;
  --krds-fz-title-xsm: 1.5rem;
  --krds-fz-title-sm: 1.7rem;
  --krds-fz-title-md: 1.9rem;
  --krds-fz-title-lg: 2.1rem;
  --krds-fz-title-xlg: 2.5rem;
  --krds-fz-title-xxlg: 3.2rem;
  --krds-fz-body-xsm: 1.3rem;
  --krds-fz-body-sm: 1.5rem;
  --krds-fz-body-md: 1.6rem;
  --krds-fz-body-lg: 1.9rem;
  --krds-fz-link-sm: 1.5rem;
  --krds-fz-link-md: 1.7rem;
  --krds-fz-link-lg: 1.9rem;
  --krds-fz-detail-sm: 1.3rem;
  --krds-fz-detail-md: 1.5rem;
  --krds-fz-detail-lg: 1.7rem;
  --krds-fz-label-xsm: 1.3rem;
  --krds-fz-label-sm: 1.5rem;
  --krds-fz-label-md: 1.7rem;
  --krds-fz-label-lg: 1.9rem;
  /* **** 공통shape_02 :: Border-radius  ****/
  --krds-rd-1: .1rem;
  --krds-rd-2: .2rem;
  --krds-rd-4: .4rem;
  --krds-rd-6: .6rem;
  --krds-rd-8: .8rem;
  --krds-rd-10: 1rem;
  --krds-rd-12: 1.2rem;
  --krds-rd-full: 100%;
  /* **** 공통shape_03 :: Button ****/
  --krds-btn-h-sm: 3rem;
  --krds-btn-h-md: 3.8rem;
  --krds-btn-h-lg: 4.8rem;
  --krds-btn-px-sm: 1.2rem;
  --krds-btn-px-md: 1.6rem;
  --krds-btn-px-lg: 2rem;
  --krds-btn-rd-sm: 6px;
  --krds-btn-rd-md: 6px;
  --krds-btn-rd-lg: 6px;
  --krds-btn-fz-sm: 1.7rem;
  --krds-btn-fz-md: 1.7rem;
  --krds-btn-fz-lg: 1.9rem;
  /* **** 공통shape_04 :: BtnChipFill ****/
  --krds-btnChipFill-h-md: 3.2rem;
  --krds-btnChipFill-h-lg: 3.6rem;
  --krds-btnChipFill-pd-md: 0rem 1.2rem;
  --krds-btnChipFill-pd-lg: 0rem 1.2rem;
  --krds-btnChipFill-rd-md: .6rem;
  --krds-btnChipFill-rd-lg: .6rem;
  --krds-btnChipFill-fz-md: 1.5rem;
  --krds-btnChipFill-fz-lg: 1.7rem;
  /* **** 공통shape_05 :: BtnChipOutline ****/
  --krds-btnChipOutline-h-md: 3.2rem;
  --krds-btnChipOutline-h-lg: 3.2rem;
  --krds-btnChipOutline-pd-md: 0rem 1.2rem;
  --krds-btnChipOutline-pd-lg: 0rem 1.2rem;
  --krds-btnChipOutline-rd-md: 10rem;
  --krds-btnChipOutline-rd-lg: 10rem;
  --krds-btnChipOutline-fz-md: 1.5rem;
  --krds-btnChipOutline-fz-lg: 1.7rem;
  --krds-btnChipOutline-gap-md: .2rem;
  --krds-btnChipOutline-gap-lg: .2rem;
  --krds-btnChipOutline-size-md: 1.2rem;
  --krds-btnChipOutline-size-lg: 1.6rem;
  /* **** 공통shape_06 :: Input ****/
  --krds-input-h-sm: 3.2rem;
  --krds-input-h-md: 3.8rem;
  --krds-input-h-lg: 4.8rem;
  --krds-input-px-sm: 1.2rem;
  --krds-input-px-md: 1.6rem;
  --krds-input-px-lg: 1.6rem;
  --krds-input-rd-sm: 6px;
  --krds-input-rd-md: 6px;
  --krds-input-rd-lg: 6px;
  --krds-input-fz-sm: 1.5rem;
  --krds-input-fz-md: 1.7rem;
  --krds-input-fz-lg: 1.9rem;
  /* **** 공통shape_07 :: Radiobox ****/
  --krds-rdo-size-sm: 1.6rem;
  --krds-rdo-size-md: 2rem;
  --krds-rdo-size-lg: 2.4rem;
  --krds-rdo-chk-sm: .8rem;
  --krds-rdo-chk-md: 1rem;
  --krds-rdo-chk-lg: 1.4rem;
  --krds-rdo-pos-sm: .2rem;
  --krds-rdo-pos-md: .5rem;
  --krds-rdo-pos-lg: 1rem;
  --krds-rdo-fz-sm: 1.5rem;
  --krds-rdo-fz-md: 1.7rem;
  --krds-rdo-fz-lg: 1.9rem;
  /* **** 공통shape_08 :: Checkbox ****/
  --krds-chk-size-sm: 1.6rem;
  --krds-chk-size-md: 2rem;
  --krds-chk-size-lg: 2.4rem;
  --krds-chk-primary-chk-sm: 1.2rem;
  --krds-chk-primary-chk-md: 1.6rem;
  --krds-chk-primary-chk-lg: 2rem;
  --krds-chk-secondary-chk-md: 2rem;
  --krds-chk-pos-md: .5rem;
  --krds-chk-fz-sm: 1.5rem;
  --krds-chk-fz-md: 1.7rem;
  --krds-chk-fz-lg: 1.9rem;
  /* **** 공통shape_09 :: Selectbox ****/
  --krds-select-h-sm: 3.2rem;
  --krds-select-h-md: 3.8rem;
  --krds-select-h-lg: 4.8rem;
  --krds-select-pd-sm: 0 1.2rem;
  --krds-select-pd-md: 0 1.2rem;
  --krds-select-pd-lg: 0 1.2rem;
  --krds-select-rd-sm: 6px;
  --krds-select-rd-md: 6px;
  --krds-select-rd-lg: 6px;
  --krds-select-fz-sm: 1.5rem;
  --krds-select-fz-md: 1.7rem;
  --krds-select-fz-lg: 1.9rem;
  --krds-select-rn-sm: 1.6rem;
  --krds-select-rn-md: 1.6rem;
  --krds-select-rn-lg: 1.6rem;
  --krds-select-bgs-sm: 2rem;
  --krds-select-bgs-md: 2rem;
  --krds-select-bgs-lg: 2.4rem;
  /* **** 공통shape_10 :: Switch ****/
  --krds-switch-h-md: 2rem;
  --krds-switch-h-lg: 2.4rem;
  --krds-switch-w-md: 3.2rem;
  --krds-switch-w-lg: 4rem;
  --krds-switch-b-md: 1.6rem;
  --krds-switch-b-lg: 2rem;
  --krds-switch-br-md: 0.2rem;
  --krds-switch-br-lg: 0.2rem;
  --krds-switch-pd-md: 0.8rem;
  --krds-switch-pd-lg: 0.8rem;
  --krds-switch-rd-md: 4rem;
  --krds-switch-rd-lg: 4rem;
  --krds-switch-fz-md: 1.7rem;
  --krds-switch-fz-lg: 1.9rem;
  /* **** 공통shape_11 :: Tab ****/
  --krds-tab-h-full: 5.6rem;
  --krds-tab-h-fill: 4.8rem;
  --krds-tab-h-line: 4.8rem;
  --krds-tab-fz-full: 1.9rem;
  --krds-tab-fz-fill: 1.9rem;
  --krds-tab-fz-ilne: 1.9rem;
  --krds-tab-px-full: 0;
  --krds-tab-px-fill: 1.6rem;
  --krds-tab-px-line: .2rem;
  --krds-tab-ml-full: 0;
  --krds-tab-ml-fill: .8rem;
  --krds-tab-ml-line: 1.6rem;
  --krds-tab-rd-full: .8rem;
  --krds-tab-rd-fill: .8rem;
  --krds-tab-rd-line: 0;
  /* **** 공통shape_12 :: Space ****/
  --krds-spacer-50: 20rem;
  --krds-spacer-49: 19.6rem;
  --krds-spacer-48: 19.2rem;
  --krds-spacer-47: 18.8rem;
  --krds-spacer-46: 18.4rem;
  --krds-spacer-45: 18rem;
  --krds-spacer-44: 17.6rem;
  --krds-spacer-43: 17.2rem;
  --krds-spacer-42: 16.8rem;
  --krds-spacer-41: 16.4rem;
  --krds-spacer-40: 16rem;
  --krds-spacer-39: 15.6rem;
  --krds-spacer-38: 15.2rem;
  --krds-spacer-37: 14.8rem;
  --krds-spacer-36: 14.4rem;
  --krds-spacer-35: 14rem;
  --krds-spacer-34: 13.6rem;
  --krds-spacer-33: 13.2rem;
  --krds-spacer-32: 12.8rem;
  --krds-spacer-31: 12.4rem;
  --krds-spacer-30: 12rem;
  --krds-spacer-29: 11.6rem;
  --krds-spacer-28: 11.2rem;
  --krds-spacer-27: 10.8rem;
  --krds-spacer-26: 10.4rem;
  --krds-spacer-25: 10rem;
  --krds-spacer-24: 9.6rem;
  --krds-spacer-23: 9.2rem;
  --krds-spacer-22: 8.8rem;
  --krds-spacer-21: 8.4rem;
  --krds-spacer-20: 8rem;
  --krds-spacer-19: 7.6rem;
  --krds-spacer-18: 7.2rem;
  --krds-spacer-17: 6.8rem;
  --krds-spacer-16: 6.4rem;
  --krds-spacer-15: 6rem;
  --krds-spacer-14: 5.6rem;
  --krds-spacer-13: 5.2rem;
  --krds-spacer-12: 4.8rem;
  --krds-spacer-11: 4.4rem;
  --krds-spacer-10: 4rem;
  --krds-spacer-9: 3.6rem;
  --krds-spacer-8: 3.2rem;
  --krds-spacer-7: 2.8rem;
  --krds-spacer-6: 2.4rem;
  --krds-spacer-5: 2rem;
  --krds-spacer-4: 1.6rem;
  --krds-spacer-3: 1.2rem;
  --krds-spacer-2: 0.8rem;
  --krds-spacer-1: 0.4rem;
  --krds-spacer-0: 0;
  --krds-spacer-default: .1rem;
  --krds-spacer-default2: .2rem;
  --krds-spacer-full: 100%;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/*  @import color.scss */
/* colors */
.text-primary {
  color: #246beb;
}

.bg-primary {
  background-color: #246beb;
}

.text-secondary {
  color: #1fad1f;
}

.bg-secondary {
  background-color: #1fad1f;
}

.text-point {
  color: #e71825;
}

.bg-point {
  background-color: #e71825;
}

.text-gray {
  color: #8e8e8e;
}

.bg-gray {
  background-color: #8e8e8e;
}

.text-danger {
  color: #eb003b;
}

.bg-danger {
  background-color: #eb003b;
}

.text-warning {
  color: #ffb724;
}

.bg-warning {
  background-color: #ffb724;
}

.text-success {
  color: #008a1e;
}

.bg-success {
  background-color: #008a1e;
}

.text-information {
  color: #2768ff;
}

.bg-information {
  background-color: #2768ff;
}

.text-white {
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

.text-black {
  color: #000;
}

.bg-black {
  background-color: #000;
}

/* primary-colors */
.text-primary-0 {
  color: #ffffff;
}

.bg-primary-0 {
  background-color: #ffffff;
}

.text-primary-5 {
  color: #eff5ff;
}

.bg-primary-5 {
  background-color: #eff5ff;
}

.text-primary-10 {
  color: #d3e1fb;
}

.bg-primary-10 {
  background-color: #d3e1fb;
}

.text-primary-20 {
  color: #a7c4f7;
}

.bg-primary-20 {
  background-color: #a7c4f7;
}

.text-primary-30 {
  color: #7ca6f3;
}

.bg-primary-30 {
  background-color: #7ca6f3;
}

.text-primary-40 {
  color: #5089ef;
}

.bg-primary-40 {
  background-color: #5089ef;
}

.text-primary-50 {
  color: #246beb;
}

.bg-primary-50 {
  background-color: #246beb;
}

.text-primary-60 {
  color: #1d56bc;
}

.bg-primary-60 {
  background-color: #1d56bc;
}

.text-primary-70 {
  color: #16408d;
}

.bg-primary-70 {
  background-color: #16408d;
}

.text-primary-80 {
  color: #0e2b5e;
}

.bg-primary-80 {
  background-color: #0e2b5e;
}

.text-primary-90 {
  color: #07152f;
}

.bg-primary-90 {
  background-color: #07152f;
}

.text-primary-100 {
  color: #000000;
}

.bg-primary-100 {
  background-color: #000000;
}

/* secondary-colors */
.text-secondary-0 {
  color: #ffffff;
}

.bg-secondary-0 {
  background-color: #ffffff;
}

.text-secondary-5 {
  color: #edf1f5;
}

.bg-secondary-5 {
  background-color: #edf1f5;
}

.text-secondary-10 {
  color: #cdd7e4;
}

.bg-secondary-10 {
  background-color: #cdd7e4;
}

.text-secondary-20 {
  color: #b4c4d6;
}

.bg-secondary-20 {
  background-color: #b4c4d6;
}

.text-secondary-30 {
  color: #99b0cb;
}

.bg-secondary-30 {
  background-color: #99b0cb;
}

.text-secondary-40 {
  color: #2a5c96;
}

.bg-secondary-40 {
  background-color: #2a5c96;
}

.text-secondary-50 {
  color: #2a5c96;
}

.bg-secondary-50 {
  background-color: #2a5c96;
}

.text-secondary-60 {
  color: #002b5e;
}

.bg-secondary-60 {
  background-color: #002b5e;
}

.text-secondary-70 {
  color: #002046;
}

.bg-secondary-70 {
  background-color: #002046;
}

.text-secondary-80 {
  color: #00162f;
}

.bg-secondary-80 {
  background-color: #00162f;
}

.text-secondary-90 {
  color: #000b17;
}

.bg-secondary-90 {
  background-color: #000b17;
}

.text-secondary-100 {
  color: #000000;
}

.bg-secondary-100 {
  background-color: #000000;
}

/* point-colors */
.text-point-5 {
  color: #fdf2f3;
}

.bg-point-5 {
  background-color: #fdf2f3;
}

.text-point-10 {
  color: #fad1d3;
}

.bg-point-10 {
  background-color: #fad1d3;
}

.text-point-20 {
  color: #f5a3a8;
}

.bg-point-20 {
  background-color: #f5a3a8;
}

.text-point-30 {
  color: #f1747c;
}

.bg-point-30 {
  background-color: #f1747c;
}

.text-point-40 {
  color: #ec4651;
}

.bg-point-40 {
  background-color: #ec4651;
}

.text-point-50 {
  color: #ec4651;
}

.bg-point-50 {
  background-color: #ec4651;
}

.text-point-60 {
  color: #b9131e;
}

.bg-point-60 {
  background-color: #b9131e;
}

.text-point-70 {
  color: #8b0e16;
}

.bg-point-70 {
  background-color: #8b0e16;
}

.text-point-80 {
  color: #5c0a0f;
}

.bg-point-80 {
  background-color: #5c0a0f;
}

.text-point-90 {
  color: #2e0507;
}

.bg-point-90 {
  background-color: #2e0507;
}

/* gray-colors */
.text-gray-5 {
  color: #f8f8f8;
}

.bg-gray-5 {
  background-color: #f8f8f8;
}

.text-gray-10 {
  color: #f0f0f0;
}

.bg-gray-10 {
  background-color: #f0f0f0;
}

.text-gray-20 {
  color: #e4e4e4;
}

.bg-gray-20 {
  background-color: #e4e4e4;
}

.text-gray-30 {
  color: #d8d8d8;
}

.bg-gray-30 {
  background-color: #d8d8d8;
}

.text-gray-40 {
  color: #c6c6c6;
}

.bg-gray-40 {
  background-color: #c6c6c6;
}

.text-gray-50 {
  color: #8e8e8e;
}

.bg-gray-50 {
  background-color: #8e8e8e;
}

.text-gray-60 {
  color: #717171;
}

.bg-gray-60 {
  background-color: #717171;
}

.text-gray-70 {
  color: #555555;
}

.bg-gray-70 {
  background-color: #555555;
}

.text-gray-80 {
  color: #2d2d2d;
}

.bg-gray-80 {
  background-color: #2d2d2d;
}

.text-gray-90 {
  color: #1d1d1d;
}

.bg-gray-90 {
  background-color: #1d1d1d;
}

.text-gray-100 {
  color: #000000;
}

.bg-gray-100 {
  background-color: #000000;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/*  @import font.scss */
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/pretendardGOV/PretendardGOV-Regular.subset.woff");
}
/* Bold */
@font-face {
  font-family: "Pretendard GOV";
  font-weight: 700;
  
  src: url("../fonts/pretendardGOV/PretendardGOV-Bold.subset.woff");
}
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-03-21
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* @import class.scss */
/* ************** 공통class_01 :: Flex **************/
/* flex-direction */
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}
.justify-around {
  justify-content: space-around;
}
.justify-between {
  justify-content: space-between;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-end {
  justify-content: flex-end;
}

.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}

.gap-1 {
  gap: var(--krds-spacer-1);
}
.gap-2 {
  gap: var(--krds-spacer-2);
}
.gap-3 {
  gap: var(--krds-spacer-3);
}
.gap-4 {
  gap: var(--krds-spacer-4);
}
.gap-5 {
  gap: var(--krds-spacer-5);
}
.gap-6 {
  gap: var(--krds-spacer-6);
}
.gap-7 {
  gap: var(--krds-spacer-7);
}
.gap-8 {
  gap: var(--krds-spacer-8);
}
.gap-9 {
  gap: var(--krds-spacer-9);
}
.gap-10 {
  gap: var(--krds-spacer-10);
}

/* ************** 공통class_02 :: Width / Height ************** */
.wd-100 {
  width: 100% !important;
}
.wd-90 {
  width: 90% !important;
}
.wd-80 {
  width: 80% !important;
}
.wd-70 {
  width: 70% !important;
}
.wd-60 {
  width: 60% !important;
}
.wd-50 {
  width: 50% !important;
}
.wd-40 {
  width: 40% !important;
}
.wd-33 {
  width: 33.33333% !important;
}
.wd-30 {
  width: 30% !important;
}
.wd-25 {
  width: 25% !important;
}
.wd-20 {
  width: 20% !important;
}
.wd-10 {
  width: 10% !important;
}

.ht-100 {
  height: 100% !important;
}
.ht-90 {
  height: 90% !important;
}
.ht-80 {
  height: 80% !important;
}
.ht-70 {
  height: 70% !important;
}
.ht-60 {
  height: 60% !important;
}
.ht-50 {
  height: 50% !important;
}
.ht-40 {
  height: 40% !important;
}
.ht-30 {
  height: 30% !important;
}
.ht-20 {
  height: 20% !important;
}
.ht-10 {
  height: 10% !important;
}

.wdht-100 {
  width: 100%;
  height: 100%;
}
.wdht-50 {
  width: 50%;
  height: 50%;
}
.wdht-33 {
  width: 33.3333333333%;
  height: 33.3333333333%;
}
.wdht-25 {
  width: 25%;
  height: 25%;
}
.wdht-20 {
  width: 20%;
  height: 20%;
}

/* ************** 공통class_03 :: Position ************** */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* ************** 공통class_04 :: Text ************** */
/* text-align / word-break / ellipsis / bold / underline / pointcolor */
.t-al {
  text-align: left;
}
.t-ar {
  text-align: right;
}
.t-ac {
  text-align: center;
}
.t-ba {
  word-break: break-all;
}
.t-ka {
  word-break: keep-all;
}
.t-el-1 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.t-el-2 {
  display: block;
  max-width: 100%;
  height: 68px;
  margin: 0 auto;
  
  
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-el-3 {
  display: block;
  max-width: 100%;
  height: 68px;
  margin: 0 auto;
  
  
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-bold {
  font-weight: 700;
}
.t-underline {
  text-decoration: underline;
}
.t-underline-hover:hover {
  text-decoration: underline;
}
.t-point-primary {
  color: var(--krds-primary);
}

/* ************** 공통class_05 :: scrollbar ************** */
.scroll-no {
  overflow: hidden;
}

.scr-bar {
  overflow-y: auto;
}
.scr-bar::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
.scr-bar::-webkit-scrollbar-thumb {
  background-color: var(--krds-gray-30);
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}
.scr-bar::-webkit-scrollbar-track {
  background-color: var(--krds-gray-5);
  box-shadow: inset 0px 0px 5px white;
}

/* ************** 공통class_06 :: Image ************** */
.img > img {
  display: block;
}
.img-wd-100 > img {
  width: 100%;
}
.img-ht-100 > img {
  height: 100%;
}
.img-wdht-100 > img {
  width: 100%;
  height: 100%;
}

/* ************** 공통class_07 :: ir기법 ************** */
.blind,
hr,
.sr-only,
legend,
caption {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 스크린리더기 인식x  / for 접근성 준수*/
.screen-out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

.hide {
  display: none !important;
}

.show {
  display: block !important;
}

/* ************** 공통class_08 :: pointer ************** */
.pointer-none {
  pointer-events: none;
}

.pointer {
  cursor: pointer !important;
}

/* ************** 공통class_09 :: 태그 ************** */
.btn-chip-fill.md {
  height: var(--krds-btnChipFill-h-md);
  padding: var(--krds-btnChipFill-pd-md);
  border-radius: var(--krds-btnChipFill-rd-md);
  font-size: var(--krds-btnChipFill-fz-md);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill.lg {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-fill {
  height: var(--krds-btnChipFill-h-lg);
  padding: var(--krds-btnChipFill-pd-lg);
  border-radius: var(--krds-btnChipFill-rd-lg);
  font-size: var(--krds-btnChipFill-fz-lg);
}
.btn-chip-fill:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline.md {
  height: var(--krds-btnChipOutline-h-md);
  padding: var(--krds-btnChipOutline-pd-md);
  border-radius: var(--krds-btnChipOutline-rd-md);
  font-size: var(--krds-btnChipOutline-fz-md);
}
.btn-chip-outline.md .btn-del {
  width: var(--krds-btnChipOutline-size-md);
  height: var(--krds-btnChipOutline-size-md);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline.lg {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline.lg .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

.btn-chip-outline {
  height: var(--krds-btnChipOutline-h-lg);
  padding: var(--krds-btnChipOutline-pd-lg);
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: var(--krds-btnChipOutline-fz-lg);
}
.btn-chip-outline .btn-del {
  width: var(--krds-btnChipOutline-size-lg);
  height: var(--krds-btnChipOutline-size-lg);
  background: url(../images/components/ico_chip_del.png) no-repeat 0 0;
  background-size: contain;
}
.btn-chip-outline .btn-del:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

/* ************** 공통class_10 :: 강조 ************** */
.requisite {
  color: var(--krds-point);
}

/* ************** 공통class_11 :: 상태 ************** */
.state {
  display: inline-block;
  width: auto;
  min-width: 70px;
  padding: 2px 5px;
  border-radius: 3px;
  text-align: center;
}
.state.cancel {
  background: #fdf2f3;
  color: var(--krds-danger-60);
}
.state.writing {
  background: #fff8e9;
  color: var(--krds-warning-60);
}
.state.ing {
  background: #eff5ff;
  color: var(--krds-primary-60);
}
.state.success {
  background: var(--krds-success-5);
  color: var(--krds-success-60);
}
.state.red {
  background: #fdf2f3;
  color: var(--krds-danger-60);
}
.state.green {
  background: var(--krds-success-5);
  color: var(--krds-success-60);
}
.state.blue {
  background: var(--krds-primary-5);
  color: var(--krds-primary);
}
.state.yellow {
  background: #fff8e9;
  color: var(--krds-warning-60);
}
.state.orange {
  background: #fff2e5;
  color: #e65100;
}
.state.purple {
  background: #f3e5f5;
  color: #6a1b9a;
}
.state.indigo {
  background: #e8eaf6;
  color: #283593;
}
.state.gray {
  background: #f5f5f5;
  color: #424242;
}
.state.brown {
  background: #efebe9;
  color: #5d4037;
}

/*  @import icon.scss */
/* *****************************
* 레이아웃 : layout
******************************** */
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* *******************************************************
* 파일이름 : header.scss
* 파일설명 : 공통 헤더 영역

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

******************************************************** */
/* **** 공통layout :: 헤더 영역  ****/
#header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background: var(--krds-white);
  border-bottom: 1px solid var(--krds-gray-20);
  z-index: 1000;
}

.top-bar {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--krds-white);
  padding: 0 var(--krds-spacer-5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.top-bar .logo {
  display: block;
  width: 243px;
  height: 50px;
}
.top-bar .logo a {
  display: block;
}
.top-bar .top-bar-menu {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-6);
  padding-right: var(--krds-spacer-4);
}
.top-bar .top-bar-menu li {
  position: relative;
  font-size: var(--krds-fz-label-sm);
}
.top-bar .top-bar-menu li:hover {
  position: relative;
}
.top-bar .top-bar-menu li:hover a {
  border: 1px solid var(--krds-primary);
  border-radius: 4px;
}

.top-bar .top-bar-menu li:hover a img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(51%) saturate(3580%) hue-rotate(211deg) brightness(96%) contrast(92%); 
}

.top-bar .top-bar-menu li:hover a:focus {
  filter: inherit !important;
}
.top-bar .top-bar-menu li:hover .menu-name {
  display: block;
}
.top-bar .top-bar-menu li:hover::after {
  content: "";
  position: absolute;
}
.top-bar .top-bar-menu li a {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-2);
  box-sizing:border-box;
  border: 1px solid transparent;
}
.top-bar .top-bar-menu li .menu-name {
  position: absolute;
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  background: var(--krds-primary);
  color: white;
  min-width: 65px;
  width: auto;
  height: 23px;
  line-height: 23px;
  text-align: center;
  border-radius: var(--krds-rd-4);
  font-size: 1.2rem;
}
.top-bar .top-bar-menu li .menu-name::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;
  border-bottom: 8px solid var(--krds-primary);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  /* border-bottom: 5px solid black; */
}
.top-bar .top-bar-menu li .new {
  position: absolute;
  top: 0px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: var(--krds-primary);
  border-radius: 100%;
  font-size: 8px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: var(--krds-white);
  cursor: pointer;
}

.mobile-menu-btn {
  display: none;
  width: 40px;
}
.mobile-menu-btn img {
  filter: grayscale(100%) brightness(0);
}

@media (max-width: 1024px) {
  .top-bar .logo {
    margin-left: 0;
  }
  .mobile-menu-btn {
    display: block;
  }
  .top-bar-menu {
    display: none !important;
  }
}
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* *******************************************************
* 파일이름 : container.scss
* 파일설명 : 공통 컨테이너/콘텐츠 영역

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

******************************************************** */
#wrap {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* ************** 공통Container_02 :: 컨테이너 영역 ************** */
iframe {
  border: 0px !important;
}

#fileFrame{
width:100%;
height:100%;
max-height:55px;
}

#container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}

#header + #container {
  height: calc(100% - 64px) !important;
}

[data-popup=true] #header + #container {
  width: 100vw !important;
  height: 100vh !important;
}

.scr-area .cke_screen_reader_only {
  display: none !important;
}

#contents {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-10);
  background: var(--krds-gray-5);
  overflow: hidden;
}
#contents .scr-area {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
#contents .scr-area .inner-area {
  position: relative;
  width: calc(100% - var(--krds-spacer-4) * 2);
  height: auto;
  min-height: calc(100% - var(--krds-spacer-4) * 2);
  background-color: var(--krds-white);
  border-radius: var(--krds-rd-4);
  margin: var(--krds-spacer-4) auto;
  background: var(--krds-white);
  padding: var(--krds-spacer-5);
}
#contents .scr-area .inner-area.main {
  height: calc(100% - var(--krds-spacer-4) * 2);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* *******************************************************
* 파일이름 : sidebar.scss
* 파일설명 : 공통 사이드메뉴 영역

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

******************************************************** */
.simplebar-scrollbar::before {
  background-color: #fff;
}

.side-menu-wrap .menu-open-btn {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

[data-device=pc][data-sidemenu-open=true] .side-menu-wrap .menu-open-btn {
  display: none;
}

[data-device=pc][data-sidemenu-open=false] .side-menu-wrap .menu-open-btn {
  display: block;
}

[data-device=mobile][data-sidemenu-open=true] .side-menu-wrap .menu-open-btn {
  display: none;
}

[data-device=mobile][data-sidemenu-open=false] .side-menu-wrap .menu-open-btn {
  display: none;
}

[data-device=pc][data-sidemenu-open=true] .side-menu-wrap {
  width: 300px !important; /* 사이드 메뉴가 열릴 때 */
}

[data-device=pc][data-sidemenu-open=true] #container > div {
  width: calc(100% - var(--sideMenu-width)) !important;
}

[data-device=pc][data-sidemenu-open=true] #container > .iframeBox {
  width: calc(100% - var(--sideMenu-width)) !important;
}

[data-device=pc][data-sidemenu-open=false] .side-menu-wrap {
  width: 80px !important; /* PC에서 사이드 메뉴가 닫힐 때 */
  transition: width 0.3s ease-in-out;
}

[data-device=pc][data-sidemenu-open=false] #container > div {
  width: calc(100% - 80px) !important;
}

[data-device=pc][data-sidemenu-open=false] #container > .iframeBox {
  width: calc(100% - 80px) !important;
}

[data-sidemenu-open=false] .side-menu-wrap .profile {
  display: none !important;
}

[data-sidemenu-open=false] .dropdown-ul > li > a {
  justify-content: center !important;
}

[data-sidemenu-open=false] .dropdown-ul > li > a > .arrow {
  display: none;
}

[data-sidemenu-open=false] .accordion-nav > li > a > .left-tit span {
  display: none;
}

[data-sidemenu-open=false] .accordion-nav {
  padding-top: 65px;
}

[data-sidemenu-open=false] .accordion-nav > li > .fold-name {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.15s ease-in-out;
  white-space: nowrap;
}

[data-sidemenu-open=false] .accordion-nav > li:hover > .fold-name {
  visibility: visible;
  opacity: 1;
  color: rgb(255, 255, 255);
  font-size: 13px;
}

[data-sidemenu-open=false] .accordion-nav li:hover .left-tit > .icon {
  visibility: hidden;
  opacity: 0;
}

[data-sidemenu-open=true] .side-menu-wrap .profile {
  display: flex !important;
}

[data-sidemenu-open=true] .accordion-nav > li > a > .left-tit span {
  display: block;
}

[data-sidemenu-open=true] .accordion-nav {
  padding-top: 0px;
}

[data-sidemenu-open=true] .accordion-nav > li > .fold-name {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.6);
}

/* ****************** #sideMenu ********************** */
.side-menu-wrap {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--krds-primary-50);
  z-index: 999;
}
.side-menu-wrap .dropdown-wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  /* 사이드메뉴 프로필 */
}
.side-menu-wrap .dropdown-wrap *:focus {
  outline-offset: 0rem !important;
  outline: 0px !important;
}
.side-menu-wrap .dropdown-wrap .profile {
  padding: 16px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: var(--krds-primary-0);
}
.side-menu-wrap .dropdown-wrap .profile .arrow {
  width: 24px;
  height: 24px;
  background: url(../images/components/ico_sidemenu_fold.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

/* 공통 디자인 */
.dropdown-ul {
  width: 100%;
}

.dropdown-ul > li {
  width: 100%;
  position: relative;
  z-index: 1000 !important;
}

.dropdown-ul > li > a {
  position: relative;
  padding: 1.4rem 1.6rem;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: rgba(255, 255, 255, 0.568);
}

/* 메뉴::제목 */
.dropdown-ul > li > a > .left-tit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: calc(100% - 15px);
}

.dropdown-ul > li > a span {
  display: block;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 메뉴::제목 앞 하이픈 */
.dropdown-ul > li > a::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 100%;
  border: 1px solid white;
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}

/* 메뉴::arrow */
.dropdown-ul > li > a .arrow {
  width: 15px;
  height: 15px;
  background-image: url(../images/components/ico_sidemenu_arr_down.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

/* div가 없는 경우 (JS에서 opacity: 0 적용됨) */
.dropdown-ul > li:not(:has(.accordion-cont),:has(.sub-accordion-cont), :has(.mid-accordion-cont), :has(.last-accordion-cont)) > a .arrow {
  opacity: 0;
}

/* 열려 있을 때 화살표 회전 */
.dropdown-ul > li.open > a .arrow {
  transform: rotate(180deg);
}

/* 2차이상 드롭다운 메뉴::default */
.dropdown-ul > li > div {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
}

/* 메뉴::evnet */
.dropdown-ul > li.open > a {
  color: rgb(255, 255, 255);
}

.dropdown-ul > li.open > a::before,
.dropdown-ul > li.hover > a::before {
  opacity: 1;
  background: white;
}

.dropdown-ul > li.open > a,
.dropdown-ul > li:hover > a {
  color: rgb(255, 255, 255);
  transition: color 0.15s ease-in;
}

.dropdown-ul > li.open > div {
  opacity: 1;
  visibility: visible;
  transition: max-height 0.3s ease-in-out;
}

.accordion-nav > li {
  position: relative;
}

.accordion-nav > li > a {
  font-size: 1.6rem;
}

.accordion-nav > li:hover > a,
.accordion-nav > li.open > a {
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.15s ease-in;
}

.accordion-nav > li > a::before {
  display: none;
}

.accordion-nav > li.open > a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: white;
  opacity: 1;
}

.accordion-nav > li > a span {
  padding-left: 0 !important;
}

.accordion-nav > li > a > .left-tit > .icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: opacity(0.5);
  transition: all 0.4s ease-in-out;
}

.accordion-nav li:nth-child(1) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_1.png);
}

.accordion-nav li:nth-child(2) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_2.png);
}

.accordion-nav li:nth-child(3) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_3.png);
}

.accordion-nav li:nth-child(4) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_4.png);
}

.accordion-nav li:nth-child(5) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_5.png);
}

.accordion-nav li:nth-child(6) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_6.png);
}

.accordion-nav li:nth-child(7) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_7.png);
}

.accordion-nav li:nth-child(8) .left-tit > .icon {
  background: url(../images/components/ico_sidemenu_8.png);
}

.sub-accordion-nav > li > a {
  background: var(--krds-primary-60);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sub-accordion-nav > li > a::before {
  left: 25px;
}

.sub-accordion-nav > li > a span {
  padding-left: 25px;
}

.mid-accordion-nav > li > a {
  background: var(--krds-primary-70);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mid-accordion-nav > li > a::before {
  left: 42px;
}

.mid-accordion-nav > li > a span {
  padding-left: 42px;
}

.last-accordion-nav > li > a {
  background: var(--krds-primary-80);
}

.last-accordion-nav > li.open > a {
  background: var(--krds-primary-90);
}

.last-accordion-nav > li > a span {
  padding-left: 42px;
}

.last-accordion-nav > li > a::before {
  left: 42px;
}

@media (max-width: 1024px) {
  /* 사이드 메뉴 닫았을 때의 너비 */
  [data-device=mobile] .side-menu-wrap {
    width: 0px !important; /* 모바일일 때 사이드 메뉴는 기본적으로 닫혀 있음 */
    transition: width 0.3s ease-in-out;
  }
  [data-device=mobile] #container > div {
    width: 100% !important;
  }
  [data-device=mobile] #container > .iframeBox {
    width: 100% !important;
  }
  [data-device=mobile][data-sidemenu-open=true] .side-menu-wrap {
    width: 300px !important; /* 모바일에서 사이드 메뉴가 열릴 때 */
    transition: width 0.3s ease-in-out;
  }
  [data-device=mobile][data-sidemenu-open=true] #container > div {
    width: 100% !important;
  }
  [data-device=mobile][data-sidemenu-open=true] #container > .iframeBox {
    width: 100% !important;
  }
  [data-device=mobile][data-sidemenu-open=false] .side-menu-wrap {
    width: 0px !important; /* 모바일에서 사이드 메뉴가 닫혔을 때 */
    transition: width 0.3s ease-in-out;
  }
  [data-device=mobile][data-sidemenu-open=false] #container > div {
    width: 100% !important;
  }
  [data-device=mobile][data-sidemenu-open=false] #container > .iframeBox {
    width: 100% !important;
  }
  .side-menu-wrap {
    order: 2 !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    transition: width 0.3s ease-in-out;
    width: 0;
  }
  .side-menu-wrap .menu-open-btn {
    display: none;
  }
  .profile .arrow {
    display: none;
  }
}
/* *****************************
* 모든 컴포넌트
******************************** */
#skipNav {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

#skipNav a {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50px;
  background: #000;
  color: #fff;
  text-align: center;
  line-height: 50px;
  transform: translateY(-100%);
}

#skipNav a:focus,
#skipNav a:active {
  transform: translateY(0);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* ** pagination ** */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--krds-spacer-2);
  width: 100%;
  padding: 1px;
  min-height: 37px;
}
.pagination .page-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: var(--krds-gray-70);
  min-width: 40px;
  height: 40px;
}
.pagination .page-jump:hover {
  border-radius: 0.6rem;
  background-color: var(--krds-primary-5);
  transition: 0.3s ease-in-out;
}
.pagination .page-jump:active {
  background-color: var(--krds-primary-10);
  transition: 0.3s ease-in-out;
}
.pagination .page-jump.prev {
  order: 1;
}
.pagination .page-jump.prev::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  content: "";
  width: 35px;
  height: 35px;
  background-image: url(../images/components/ico_page_jump_left.png);
  background-repeat: no-repeat;
  background-position: center;
}
.pagination .page-jump.next {
  order: 5;
}
.pagination .page-jump.next::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  content: "";
  width: 35px;
  height: 35px;
  background-image: url(../images/components/ico_page_jump_right.png);
  background-repeat: no-repeat;
  background-position: center;
}
.pagination .page-navi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: var(--krds-gray-70);
  min-width: 40px;
  height: 40px;
}
.pagination .page-navi:hover {
  border-radius: 0.6rem;
  background-color: var(--krds-primary-5);
  transition: 0.3s ease-in-out;
}
.pagination .page-navi:active {
  background-color: var(--krds-primary-10);
  transition: 0.3s ease-in-out;
}
.pagination .page-navi.prev {
  order: 1;
}
.pagination .page-navi.prev::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  content: "";
  width: 35px;
  height: 35px;
  background-image: url(../images/components/ico_page_arr_left.png);
  background-repeat: no-repeat;
  background-position: center;
}
.pagination .page-navi.next {
  order: 4;
}
.pagination .page-navi.next::after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  content: "";
  width: 35px;
  height: 35px;
  background-image: url(../images/components/ico_page_arr_right.png);
  background-repeat: no-repeat;
  background-position: center;
}
.pagination .page-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  order: 3;
  gap: var(--krds-spacer-2);
}
.pagination .page-links .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  color: var(--krds-gray-70);
  min-width: 35px;
  height: 35px;
  padding: 1rem;
}
.pagination .page-links .page-link:hover {
  border-radius: 0.6rem;
  background-color: var(--krds-primary-5);
  transition: 0.3s ease-in-out;
}
.pagination .page-links .page-link:active {
  background-color: var(--krds-primary-10);
  transition: 0.3s ease-in-out;
}
.pagination .page-links .page-link.active {
  font-weight: 700;
  color: var(--krds-white);
  border-radius: 6px;
  background-color: var(--krds-primary);
}
.pagination.m-page {
  display: none;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.fc-toolbar-chunk:nth-child(2) > div {
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  gap: 2rem;
}

.fc-scrollgrid-sync-table {
  border-right: 1px solid var(--krds-gray-30) !important;
}

.fc-dayGridMonth-button, .fc-timeGridDay-button {
  background: #fff !important;
  border: 1px solid var(--krds-gray-30) !important;
  color: var(--krds-gray-50) !important;
}

.fc-dayGridMonth-button:focus, .fc-timeGridDay-button:focus {
  outline: 0 !important; /* 포커스 상태에서 테두리 없애기 */
  border: none !important; /* 포커스 상태에서 테두리 없애기 */
}

.fc-dayGridMonth-button.fc-button-active, .fc-timeGridDay-button.fc-button-active {
  background: var(--krds-gray-5) !important;
  color: var(--krds-gray-90) !important;
}

.fc-prev-button, .fc-next-button {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  background: #fff !important;
  border: 1px solid var(--krds-gray-30) !important;
  color: var(--krds-gray-50) !important;
}
.fc-prev-button > .fc-icon, .fc-next-button > .fc-icon {
  width: 24px !important;
  height: 34px !important;
}

.fc-prev-button:focus, .fc-next-button:focus {
  outline: 0 !important; /* 포커스 상태에서 테두리 없애기 */
  border: none !important; /* 포커스 상태에서 테두리 없애기 */
}

.fc-today-button {
  background-color: var(--krds-gray-50) !important; /* 배경 색 변경 */
  color: white !important; /* 텍스트 색 변경 */
  border: none !important; /* 테두리 제거 */
}

.pop {
  position: absolute;
  width: 380px;
  height: auto;
  max-height: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-1);
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
  background: var(--krds-white);
  border-radius: 12px;
  border: 1px solid var(--krds-gray-30);
  z-index: 100;
  padding: 12px;
}
.pop.pop-2 {
  top: 62%;
  left: 50%;
  z-index: 10000 !important;
}
.pop.pop-2 .pop-nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}
.pop.pop-2 .pop-nav .date-tit {
  position: relative;
  font-weight: bold;
  font-size: var(--krds-fz-title-xsm);
}
.pop.pop-2 .pop-nav .date-tit.col-2 {
  display: flex;
  align-items: center;
}
.pop.pop-2 .pop-cont {
  width: 100%;
  height: calc(100% - 22px);
}
.pop.pop-2 .pop-cont .schedule {
  width: 100%;
  height: 100%;
  max-height: 130px;
  overflow: auto;
}
.pop.pop-2 .pop-cont .schedule li {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
  font-size: var(--krds-fz-detail-sm);
  padding: 3px 0;
  border-radius: var(--krds-rd-4);
}
.pop.pop-2 .pop-cont .schedule li img {
  display: block;
  width: 16px;
  height: 16px;
}
.pop.pop-2 .pop-cont .schedule li .tooltip {
  max-width: 180px;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}
.pop.pop-2 .pop-cont .schedule li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 100%;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.form-conts-group {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
}
.form-conts-group.column {
  flex-direction: column;
}

.form-conts {
  width: 250px;
  min-width: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
}

.form-conts.xlg,
.sch-input.xlg {
  width: 100% !important;
}

.form-conts.lg,
.sch-input.lg {
  width: 300px !important;
}

.form-conts.md,
.sch-input.md {
  width: 250px !important;
  min-width: 100px;
}

.form-conts.sm,
.sch-input.sm {
  width: 160px !important;
  min-width: 100px;
}

.form-conts.xsm,
.sch-input.xsm {
  width: 100px;
  min-width: 100px;
}

.form-conts.h-lg .form-control {
  height: var(--krds-input-h-lg);
  padding: 0 var(--krds-input-px-lg);
  font-size: var(--krds-input-fz-lg);
}

.form-conts.h-md .form-control {
  height: var(--krds-input-h-md);
  padding: 0 var(--krds-input-px-md);
  font-size: var(--krds-input-fz-md);
}

.form-conts.h-sm .form-control {
  height: var(--krds-input-h-sm);
  padding: 0 var(--krds-input-px-sm);
  font-size: var(--krds-input-fz-sm);
}
.form-conts.h-sm .form-control ~ .ico-sch {
  width: 2rem !important;
  height: 2rem;
}

.sch-input.h-lg .form-control {
  height: var(--krds-input-h-lg);
  font-size: var(--krds-input-fz-lg);
}

.sch-input.h-md .form-control {
  height: var(--krds-input-h-md);
  font-size: var(--krds-input-fz-md);
}

.sch-input.h-sm .form-control {
  height: var(--krds-input-h-sm);
  font-size: var(--krds-input-fz-sm);
}
.sch-input.h-sm .form-control ~ .ico-sch {
  width: 2rem !important;
  height: 2rem !important;
}

.form-control {
  position: relative;
  width: 100%;
  min-width: 100px;
  height: var(--krds-input-h-md);
  padding: 0 var(--krds-input-px-md);
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-30);
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--krds-input-fz-sm);
  color: var(--krds-gray-90);
  transition: 0.3s ease-in-out;
  box-sizing: border-box;
}
.form-control:focus {
  border-color: var(--krds-primary-40);
  border-width: 1px;
  outline: none;
}
.form-control:-moz-read-only {
  background-color: var(--krds-gray-10);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-90);
}
.form-control:read-only {
  background-color: var(--krds-gray-10);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-90);
}
.form-control:read-only::-webkit-input-placeholder {
  color: var(--krds-gray-30);
}
.form-control:disabled {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-60);
}
.form-control:disabled::-webkit-input-placeholder {
  color: var(--krds-gray-60);
}

.sch-input {
  display: inline-flex;
  position: relative;
}
.sch-input .form-control {
  padding: 0 var(--krds-spacer-10) 0 var(--krds-spacer-3);
}
.sch-input .form-control ~ .ico-sch {
  width: 2.4rem;
  height: 2.4rem;
}
.sch-input.xlg .form-control {
  padding: 0 var(--krds-spacer-10) 0 var(--krds-spacer-3);
}
.sch-input.xlg .form-control ~ .ico-sch {
  width: 2.4rem;
  height: 2.4rem;
}
.sch-input.lg .form-control {
  padding: 0 var(--krds-spacer-10) 0 var(--krds-spacer-3);
}
.sch-input.lg .form-control ~ .ico-sch {
  width: 2.4rem;
  height: 2.4rem;
}
.sch-input.md .form-control {
  padding: 0 var(--krds-spacer-10) 0 var(--krds-spacer-3);
}
.sch-input.md .form-control ~ .ico-sch {
  width: 2.4rem;
  height: 2.4rem;
}
.sch-input.sm .form-control {
  padding: 0 var(--krds-spacer-10) 0 var(--krds-spacer-3);
}
.sch-input.sm .form-control ~ .ico-sch {
  width: 2rem;
  height: 2rem;
}
.sch-input.xsm .form-control {
  padding: 0 var(--krds-spacer-10) 0 var(--krds-spacer-3);
}
.sch-input.xsm .form-control ~ .ico-sch {
  width: 2rem;
  height: 2rem;
}
.sch-input .ico-sch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--krds-spacer-4);
}
.sch-input .ico-del {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: var(--krds-spacer-11);
  width: 15px;
  height: 15px;
  background: var(--krds-gray-10);
  border-radius: 50%;
}
.sch-input .ico-del:focus {
  outline: none;
}
.sch-input .ico-del:active {
  background: var(--krds-gray-30);
}
.sch-input .ico-del:hover {
  background: var(--krds-gray-30);
}

.sch-label-chip-list {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-1);
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 55vw;
  overflow: auto;
}
.sch-label-chip-list.column {
  display: inline-flex;
  padding-left: var(--krds-spacer-3);
}
.sch-label-chip-list.row {
  display: flex;
  padding-top: var(--krds-spacer-2);
}
.sch-label-chip-list span {
  cursor: pointer;
}
.sch-label-chip-list span.active {
  background: var(--krds-gray-20);
}

.filter-list-box {
  width: 100%;
  max-width: 100% !important;
  flex-wrap: wrap;
  gap: var(--krds-spacer-2) !important;
}
.filter-list-box .btn-chip-outline {
  font-size: 14px !important;
  height: var(--krds-btnChipOutline-h-md) !important;
  padding: var(--krds-btnChipOutline-pd-md) !important;
  border-radius: var(--krds-btnChipOutline-rd-md) !important;
}
.filter-list-box .btn-chip-outline .chip-val {
  font-size: var(--krds-btnChipOutline-fz-md) !important;
}

.is-error .form-control {
  border-color: var(--krds-point);
  border-width: 1px;
}
.is-error .form-control:focus {
  border-color: var(--krds-point);
  border-width: 1px;
}

[class^=form-hint] {
  font-size: var(--krds-fz-label-sm);
  color: var(--krds-gray-70);
  padding-left: calc(2rem + var(--krds-spacer-1));
  padding-top: var(--krds-spacer-1);
  word-break: keep-all;
}
[class^=form-hint]::before {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  flex-grow: 0;
  content: "";
  margin-left: calc((2rem + var(--krds-spacer-1)) * -1);
  margin-right: var(--krds-spacer-1);
  vertical-align: top;
  background: url(../images/components/ico_hint.png) no-repeat center;
  background-size: contain;
}

.is-error ~ .form-hint {
  color: var(--krds-point);
}
.is-error ~ .form-hint::before {
  background-color: transparent;
  background-image: url(../images/components/ico_hint_error.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.form-conts {
  position: relative;
}

.data-group {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  align-items: center;
}
.data-group.col {
  flex-direction: column !important;
  align-items: start !important;
}

.date-area {
  width: 100%;
  max-width: 350px;
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  align-items: center;
}

input[type=number] {
  margin: 0;
}

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

input[type=text]::-ms-clear {
  display: none;
}

/* placeholder style */
.form-control::-webkit-input-placeholder {
  color: var(--krds-gray-50);
  font-weight: normal;
}

.form-control::-moz-placeholder {
  color: var(--krds-gray-50);
  font-weight: normal;
}

.form-control:-ms-input-placeholder {
  color: var(--krds-gray-50);
  font-weight: normal;
}

.form-control::-ms-input-placeholder {
  color: var(--krds-gray-50);
  font-weight: normal;
}

.form-control:-moz-placeholder-shown {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  
  
  font-weight: normal;
}

.form-control:placeholder-shown {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  
  
  font-weight: normal;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.form-box {
  padding: var(--krds-spacer-6);
  border-radius: var(--krds-rd-12);
  border: 1px solid var(--krds-gray-30);
  background: var(--krds-gray-5);
}
.form-box .form-tit {
  width: 100%;
  white-space: nowrap;
}
.form-box .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  width: 100%;
}
.form-box .form-group .form-conts {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  width: 100%;
}
.form-box .form-group .form-conts.keyword-sch {
  width: 58.8rem;
}
.form-box .form-group .form-conts .form-label {
  display: flex;
  font-size: var(--krds-fz-label-sm);
  width: 100%;
}
.form-box .form-group > p {
  width: 100%;
}
.form-box .form-group + .form-group {
  margin-top: var(--krds-spacer-4);
}

/* 신청하기 검색 폼 */
.search-top-box {
  position: relative;
  padding: var(--krds-spacer-4);
  border-radius: var(--krds-rd-4);
  background: var(--krds-primary-5);
}
.search-top-box .btn-area {
  position: absolute;
  bottom: 13%;
  right: 1.5%;
}
.search-top-box .sch-filter-box {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-5);
}
.search-top-box .sch-filter-box .filter-form {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--krds-spacer-6);
  flex-wrap: wrap;
  max-width: 93%;
}
.search-top-box .sch-filter-box .filter-form .filter-group {
  min-width: 32rem;
}
.search-top-box .sch-filter-box .filter-form > div {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--krds-spacer-3);
}
.search-top-box .sch-filter-box .filter-form .label {
  font-weight: 700;
  white-space: nowrap;
  min-width: 11rem;
}
.search-top-box .sch-filter-box .filter-form .form-select {
  width: 100%;
}
.search-top-box .sch-filter-box .filter-form .form-control {
  width: 100%;
  max-width: 19.8rem;
}
.search-top-box .sch-filter-box .filter-form .filter-group.xlg {
  min-width: 54.2rem;
}
.search-top-box .sch-filter-box .filter-form .filter-group.xlg .form-control {
  width: 100%;
  min-width: 100% !important;
}
.search-top-box .sch-filter-box .grid-filter-form {
  display: grid;
  max-width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.search-top-box .sch-filter-box .filter-chip {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--krds-spacer-4);
  margin-top: var(--krds-spacer-6);
  padding-top: var(--krds-spacer-6);
  border-top: 0.1rem solid var(--krds-gray-40);
}
.search-top-box .sch-filter-box .filter-chip dt {
  display: flex;
  align-items: center;
  font-weight: 700;
  white-space: nowrap;
  height: 3.2rem;
}
.search-top-box .sch-filter-box .filter-chip dt .num {
  color: var(--krds-primary-60);
}
.search-top-box .sch-filter-box .filter-chip dd {
  display: flex;
  gap: var(--krds-spacer-2);
  flex: 1;
}
.search-top-box .sch-filter-box .filter-chip dd .ico-refresh {
  flex-shrink: 0;
}
.search-top-box .sch-filter-box .filter-chip dd .chip-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--krds-spacer-2);
}

.search-top-box.one .btn-area {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  right: 1.5%;
}

.search-top-box.detail .label {
  font-weight: 700;
  white-space: nowrap;
  min-width: 6rem !important;
}

.info-top-box {
  width: 100%;
}
.info-top-box .info-top-tb {
  width: 100%;
  display: grid;
  border-top: 1px solid var(--krds-gray-30);
  background-color: var(--krds-white);
  border-radius: var(--krds-rd-4);
}
.info-top-box .info-top-tb .tr {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center; /* 세로 정렬 */
  border-bottom: 1px solid var(--krds-gray-30);
}
.info-top-box .info-top-tb .tr .td {
  width: auto;
  height: 100%;
  min-height: 54px;
  display: flex;
  flex-direction: row;
  align-items: center;
  word-break: keep-all;
  white-space: nowrap;
  font-size: var(--krds-fz-title-sm);
  text-align: left;
}
.info-top-box .info-top-tb .tr .td .hint {
  font-size: var(--krds-fz-label-sm);
  display: inline-block;
  color: var(--krds-primary);
  padding-top: 3px;
}
.info-top-box .info-top-tb .tr .td .label {
  min-width: 140px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: var(--krds-select-fz-sm);
  font-weight: bold;
  padding-left: var(--krds-spacer-3);
  background: var(--krds-gray-10);
  white-space: nowrap;
}
.info-top-box .info-top-tb .tr .td .cont {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
  padding: var(--krds-spacer-2);
}
.info-top-box .info-top-tb .tr .td .cont .form-conts {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
}
.info-top-box .info-top-tb .tr .td .cont .form-conts .s-tit {
  font-size: 15px;
  padding-left: 10px;
  font-weight: bold;
}
.info-top-box .info-top-tb .tr.one {
  grid-template-columns: 1fr;
}
.info-top-box .info-top-tb .tr.two {
  grid-template-columns: 1fr 1fr;
}
.info-top-box .info-top-tb .tr.three {
  grid-template-columns: 1fr 1fr 1fr;
}
.info-top-box .info-top-tb .tr.three-two {
  grid-template-columns: 1fr 2fr;
}
.info-top-box .info-top-tb .tr.two-three {
  grid-template-columns: 2fr 1fr;
}
.info-top-box .info-top-tb .tr.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.info-top-box.sm .tr .td {
  width: auto;
  height: 100%;
  min-height: 38px !important;
}

.img-viewer-list {
  width: 100%;
  overflow: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--krds-spacer-3);
  max-height: 140px;
}
.img-viewer-list .item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100px;
  overflow: hidden;
}
.img-viewer-list .item img {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.img-viewer-list .item .name {
  width: 100%;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--krds-fz-detail-sm);
  text-align: center;
}
.img-viewer-list .item .vol {
  width: 100%;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--krds-fz-detail-sm);
  color: var(--krds-gray-50);
  text-align: center;
}
.img-viewer-list .item button {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

.sms-area {
  width: 100%;
}
.sms-area .txt {
  display: inline-block;
  width: 100%;
  font-size: var(--krds-fz-detail-md);
  text-align: right;
  color: var(--krds-gray-50);
}

.sum {
  display: flex;
  align-items: flex-end;
  font-weight: initial;
  font-size: var(--krds-fz-body-sm);
}
.sum span {
  color: var(--krds-primary);
}

@media (max-width: 1600px) {
  .tr.three {
    grid-template-columns: 1fr 1fr !important;
  }
  .tr.three .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .tr.four {
    grid-template-columns: 1fr 1fr !important;
  }
  .tr.four .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .td .cont {
    padding-right: var(--krds-spacer-3);
  }
}
@media (max-width: 1440px) {
  .tr.two-three {
    grid-template-columns: 1fr !important;
  }
  .tr.two-three .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .tr.three-two {
    grid-template-columns: 1fr !important;
  }
  .tr.three-two .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
}
@media (max-width: 1280px) {
  .data-group {
    flex-direction: column !important;
    align-items: start;
  }
}
@media (max-width: 1024px) {
  .tr.one {
    grid-template-columns: 2fr;
  }
  .tr.two {
    grid-template-columns: 1fr !important;
  }
  .tr.two .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .tr.three {
    grid-template-columns: 1fr !important;
  }
  .tr.three .td {
    border-bottom: 0px solid var(--krds-gray-30);
  }
  .tr.four {
    grid-template-columns: 1fr 1fr !important;
  }
  .tr.four .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .tr.two-three {
    grid-template-columns: 1fr !important;
  }
  .tr.two-three .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .tr.three-two {
    grid-template-columns: 1fr !important;
  }
  .tr.three-two .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
  .tr.four {
    grid-template-columns: 1fr !important;
  }
  .tr.four .td {
    border-bottom: 1px solid var(--krds-gray-30);
  }
}
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.modal-back,
.modal {
  display: none;
  visibility: hidden;
  z-index: -1;
}
.modal-back.in,
.modal.in {
  visibility: visible;
}

.modal-back {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-back.in {
  display: block;
  z-index: 1000;
}

.modal {
  /*@include flex-layout($ai: center, $jc: center, $fd: column);*/
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-family: var(--krds--fz-body-md);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  transition: visibility 0.15s 0.3s, z-index 0s 0.3s, opacity 0.2s;
}
.modal > * {
  width: 100%;
}
.modal.in {
  z-index: 1010;
  transition-delay: 0s;
  opacity: 1;
}
.modal.shown {
  display: block;
}
.modal .modal-dialog {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  position: relative;
  z-index: 1020;
  width: auto;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modal .modal-dialog .modal-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-height: 100%;
  background-color: var(--krds-white);
  border-radius: var(--krds-rd-12);
  outline-color: transparent;
  transition: outline-color 0.1s;
}
.modal .modal-dialog .modal-content > * {
  width: 100%;
}
.modal .modal-dialog .modal-content .btn-area-center {
  padding-top: var(--krds-spacer-2);
  padding-bottom: var(--krds-spacer-5);
}
.modal .modal-dialog .modal-content .btn-area-center.gap-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.modal .modal-dialog .modal-header {
  width: 100%;
  padding: var(--krds-spacer-3) var(--krds-spacer-3);
  background-color: inherit;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  background: var(--krds-primary);
}
.modal .modal-dialog .modal-header .modal-title {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  
  
  font-size: var(--krds-fz-title-sm);
  font-weight: 700;
  color: var(--krds-white);
}
.modal .modal-dialog .modal-conts {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  position: relative;
  overflow-y: auto;
  width: 100%;
  padding: var(--krds-spacer-3);
  color: var(--krds-gray-90);
}
.modal .modal-dialog .modal-conts > * {
  width: 100%;
}
.modal .modal-dialog .modal-conts .conts-tit {
  font-size: var(--krds-fz-title-md);
  font-weight: 700;
}
.modal .modal-dialog .modal-conts .conts-area {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-spacer-3);
}
.modal .modal-dialog .modal-conts .conts-area > * {
  width: 100%;
}
.modal .modal-dialog .modal-conts .conts-area .table-scr-area {
  width: 100%;
  height: 100%;
  max-height: 40vh;
  overflow: auto;
}
.modal .modal-dialog .modal-conts .conts-area .info-top-box .info-top-tb .tr .td .label {
  min-width: 100px;
}
.modal .modal-dialog .modal-conts:focus {
  outline-offset: 0rem;
  outline: 2px solid white;
}
.modal .modal-dialog .modal-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 0.8rem;
  width: 100%;
  padding: var(--krds-spacer-3);
}
.modal .modal-dialog .modal-btn .btn {
  min-width: 9.2rem;
}
.modal .modal-dialog .btn-close {
  position: absolute;
  top: 0.33rem;
  right: 0.8rem;
  z-index: 901;
  width: 3.6rem;
  height: 3.6rem;
  background: url(../images/components/ico_close_modal.png) no-repeat center;
  background-size: 2rem;
  filter: brightness(0) invert(1);
}
.modal.alert .modal-dialog .modal-conts {
  gap: 2.4rem;
}
.modal.alert .modal-dialog .modal-btn .btn {
  min-width: 7.8rem;
}
.modal.search .modal-dialog .modal-conts {
  gap: 2.4rem;
}
.modal.search .modal-dialog .modal-btn .btn {
  min-width: 7.8rem;
}

/* modal open 시 contents (전체모달 아닌경우) */
.modal-open {
  /*padding-right: 17px;*/
  overflow: hidden;
}

.modal-divide-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-8);
}
.modal-divide-area .sect_01,
.modal-divide-area .sect_02 {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-5);
  height: 100%;
}
.modal-divide-area .sect_01 {
  position: relative;
}
.modal-divide-area .sect_01::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--krds-spacer-4) * -1);
  width: 1px;
  height: 100%;
  background: var(--krds-gray-30);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.accordion {
  width: 100%;
  border-top: 1px solid var(--krds-gray-40);
}
.accordion .accordion-item {
  border-bottom: 1px solid var(--krds-gray-40);
}
.accordion .accordion-item .accordion-collapse {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.accordion-item.active .accordion-collapse {
  height: auto;
  max-height: 1000vh;
  transition: max-height 1.5s ease-in-out;
}

.accordion-item .accordion-body {
  padding-top: var(--krds-spacer-1);
  padding-bottom: var(--krds-spacer-5);
}

.accordion-item .btn-accordion {
  position: relative;
  width: 100%;
  min-height: 2.4rem;
  font-size: var(--krds-fz-body-md);
  font-weight: initial;
  text-align: left;
  text-indent: var(--krds-spacer-8);
}

.accordion-item .btn-accordion::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background: url(../images/components/ico_select.png) no-repeat center;
  background-size: 2rem;
  transition: 0.4s ease-in-out;
  transform: rotate(0deg);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.side-info {
  /* 기본 날짜 스타일 수정 */
  /* 날짜 선택 시 배경색 없애기 */
  /* 날짜 선택 시 텍스트 색상 변경 */
  /* 토요일 날짜 색상 (파란색) */
  /* 일요일 날짜 색상 (빨간색) */
}
.side-info #datepicker {
  width: 100%; /* 화면 크기에 맞게 너비를 100%로 설정 */
  height: 30%;
  font-size: 14px;
  border: 0px !important;
}
.side-info .ui-widget-header {
  border: 0px;
  background: #fff;
  color: #333;
  font-weight: bold;
}
.side-info .ui-widget.ui-widget-content {
  border: 0px !important;
}
.side-info .ui-datepicker-year {
  font-size: 14px !important; /* 연도 글씨 크기 조정 */
}
.side-info .ui-datepicker-month {
  font-size: 14px !important; /* 월 글씨 크기 조정 */
}
.side-info .ui-datepicker-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.side-info .ui-datepicker-calendar td a {
  background-color: transparent;
  color: #000; /* 날짜 색상 설정 */
  border: none;
  text-align: center;
  display: block;
  border-radius: 3px;
}
.side-info .ui-state-active {
  background-color: #FFFADF !important;
}
.side-info .ui-state-hover {
  background-color: var(--krds-gray-10) !important;
}
.side-info .ui-state-active {
  color: #000 !important; /* 원하는 색상으로 설정 */
}
.side-info .ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(7) a {
  color: blue !important;
}
.side-info .ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a {
  color: red !important;
}
.side-info .ui-widget-header .ui-icon {
  background-image: url("../images/components/ico_datapicker.png");
}
.side-info .ui-icon-circle-triangle-e {
  background-position: -20px 0px;
  background-size: 36px;
}
.side-info .ui-icon-circle-triangle-w {
  background-position: 0px 0px;
  background-size: 36px;
}

.tree-list {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.tree-header{
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 8px;
  height: 30px;
}
.tree-item{
  white-space: nowrap;
}

.tree-item:first-child .tree-header{
  border-bottom: 1px dotted var(--krds-gray-30);
  margin-bottom: 5px;
}

.tree-item:last-child{
  padding-bottom:5px;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.tab > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  position: relative;
  width: 100%;
}
.tab button:focus {
  outline: 0px solid rgba(36, 107, 235, 0.8);
}
.tab li, .tab .btn-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  position: relative;
  white-space: nowrap;
}
.tab .btn-tab {
  width: 100%;
  height: 5vh !important;
  min-height: 40px;
  background-color: var(--krds-gray-5);
  border: 1px solid var(--krds-white);
  color: var(--krds-gray-50);
  font-weight: 700;
  transition: 0.4s ease-in-out;
}
.tab .btn-tab.sm {
  height: auto !important;
  min-height: auto;
  padding: 3px 0 !important;
  font-size: 14px;
  line-height: 24px;
}
.tab.full {
  width: 100%;
}
.tab.full > ul > li {
  flex: 1 1 0px;
  min-width: 0;
}
.tab.line .active .btn-tab {
  color: var(--krds-primary);
  border-bottom: 1px solid var(--krds-white);
  background-color: var(--krds-white);
}
.tab.line .active .btn-tab:before {
  position: absolute;
  left: 0;
  width: 100%;
}
.tab.line .btn-tab:before {
  position: absolute;
  top: 0;
  left: 50%;
  content: "";
  width: 0;
  height: 0.2rem;
  background-color: var(--krds-primary);
  transition: 0.4s ease-in-out;
}
.tab.line .btn-tab {
  padding-left: 0;
  padding-right: 0;
  border: 0;
  border-bottom: 1px solid var(--krds-gray-30);
  border-right: 1px solid var(--krds-gray-30);
  border-top: 1px solid var(--krds-gray-30);
}
.tab.separate ul {
  padding: var(--krds-spacer-3);
  background-color: var(--krds-gray-10);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--krds-spacer-3);
}
.tab.separate .btn-tab {
  border: 0;
  border: 1px solid var(--krds-gray-30);
  border-radius: var(--krds-rd-6);
  padding: var(--krds-spacer-3);
  min-width: 5vw;
}
.tab.separate .btn-tab:hover {
  color: var(--krds-primary);
}
.tab.separate .active .btn-tab {
  color: var(--krds-white);
  border-bottom: 1px solid var(--krds-white);
  background-color: var(--krds-primary);
}

.tab-conts-wrap.gap-none .tab-conts {
  margin-top: 0 !important;
}

.tab-conts-wrap.gap-none .tab-conts.active {
  gap: 0 !important;
}

.tab-conts {
  display: none;
  margin-top: var(--krds-spacer-5);
}
.tab-conts.active {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-spacer-10);
}

.tab-conts-wrap.gap-sm .tab-conts {
  margin-top: var(--krds-spacer-3);
}

.tab-area.list .btn-tab {
  height: 50px !important;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
table {
  width: 100%;
  word-break: keep-all;
  border-collapse: separate;
  border-spacing: 0;
}
table.t-al td {
  text-align: left;
}
table.t-al td.t-al {
  text-align: left !important;
}
table.t-al td.t-ac {
  text-align: center !important;
}
table.t-al td.t-ar {
  text-align: right !important;
}
table.t-ac td {
  text-align: center;
}
table.t-ac td.t-al {
  text-align: left !important;
}
table.t-ac td.t-ac {
  text-align: center !important;
}
table.t-ac td.t-ar {
  text-align: right !important;
}
table.t-ar td {
  text-align: right;
}
table.t-ar td.t-al {
  text-align: left !important;
}
table.t-ar td.t-ac {
  text-align: center !important;
}
table.t-ar td.t-ar {
  text-align: right !important;
}
table .group tr th {
  height: 38px;
  line-height: 32px;
  background-color: var(--krds-gray-5);
  border-top: 1px solid var(--krds-gray-30) !important;
  vertical-align: middle;
  font-size: var(--krds-fz-body-sm);
  padding: 0.5rem 1.2rem;
  text-align: center !important;
  box-sizing: border-box;
}
table .group tr th.add-row td {
  border: 0 !important;
}
table .group tr:first-child th {
  border-top: 1px solid var(--krds-gray-90) !important;
}
table .group tr:first-child th:nth-child(4) {
  border-left: 1px solid var(--krds-gray-30) !important;
  border-right: 1px solid var(--krds-gray-30) !important;
}
table .group tr:first-child th:last-child {
  border-right: 0px solid var(--krds-gray-30) !important;
}
table .group tr:nth-child(2) th {
  border-right: 1px solid var(--krds-gray-30) !important;
}
table .group tr:nth-child(2) th:first-child {
  border-left: 1px solid var(--krds-gray-30) !important;
}
table th {
  height: 38px;
  line-height: 32px;
  background-color: var(--krds-gray-5);
  border-top: 1px solid var(--krds-gray-90);
  vertical-align: middle;
  font-size: var(--krds-fz-body-sm);
  padding: 0.5rem 1.2rem;
  text-align: center !important;
  box-sizing: border-box;
}
table th.add-row td {
  border: 0 !important;
}
table tr:first-child td {
  border-top: 1px solid var(--krds-gray-30);
}
table td {
  height: 38px;
  line-height: 32px;
  border-bottom: 1px solid var(--krds-gray-30);
  vertical-align: middle;
  word-break: keep-all;
  padding: 0.5rem 1.2rem;
  font-size: var(--krds-fz-body-sm);
  text-align: left;
  width: auto;
  white-space: nowrap;
  box-sizing: border-box;
}
table td.tit {
  background: var(--krds-gray-10);
  font-weight: bold;
}
table td:last-child {
  border-right: 0px;
}
table td .btn {
  height: var(--krds-btn-h-sm);
  padding: 0 var(--krds-btn-px-sm);
  border-radius: var(--krds-btn-rd-sm);
  font-size: var(--krds-fz-body-sm);
}
table td .form-control {
  height: var(--krds-input-h-sm);
  padding: 0 var(--krds-input-px-sm);
  font-size: var(--krds-input-fz-sm);
}
table td .form-select {
  height: var(--krds-select-h-sm);
  padding: var(--krds-select-pd-sm);
  background-position: center right var(--krds-select-rn-sm);
  font-size: var(--krds-select-fz-sm);
}
table tfoot tr {
  background: var(--krds-gray-5);
  font-weight: bold;
}
table .readonly {
  color: transparent;
}
table .form-conts {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
}
table .sch-input .form-control ~ .ico-sch {
  width: 2rem;
  height: 2rem;
}

table.sm th {
  height: 30px;
  line-height: 30px;
  font-size: var(--krds-fz-body-xsm);
  padding: 0rem 0rem;
}
table.sm td {
  height: 30px;
  line-height: 30px;
  font-size: var(--krds-fz-body-xsm);
  padding: 0rem 0rem;
}

.cke_dialog table {
  width: inherit !important;
  max-width: inherit !important;
}

/* 테이블 타이틀 및 상단 버튼 */
.table-form-area {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  overflow: auto;
}
.table-form-area table,
.table-form-area .table-form {
  table-layout: auto;
}

.table-top-sch {
  display: inline-flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  justify-content: flex-end;
  align-items: center;
}
.table-top-sch label {
  font-weight: bold;
}

.table-info {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  justify-content: flex-end;
  align-items: flex-end;
}

.table-top-right-btn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.table-top-layout {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
}

.table-title {
  font-weight: 600;
  font-size: var(--krds-fz-title-sm);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.table-title button {
  min-width: 60px;
}

.table-scr-area {
  position: relative;
  width: 100%;
  height: 480px;
  min-height: 200px;
  max-height: 480px;
  overflow: auto;
  box-shadow: 0px 8px 5px -2px rgba(0, 0, 0, 0.05) !important;
}
.table-scr-area table,
.table-scr-area .table-form {
  table-layout: auto;
}
.table-scr-area table thead,
.table-scr-area .table-form thead {
  position: sticky;
  top: 0px;
  box-sizing: border-box;
  z-index: 10;
}
.table-scr-area table td:first-child input[type=checkbox],
.table-scr-area .table-form td:first-child input[type=checkbox] {
  z-index: 1; /* thead 아래로 배치되도록 낮은 z-index 설정 */
  position: relative;
}

.table-scr-area, .table-form-area {
  overflow-y: auto;
}
.table-scr-area::-webkit-scrollbar, .table-form-area::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}
.table-scr-area::-webkit-scrollbar-thumb, .table-form-area::-webkit-scrollbar-thumb {
  background-color: var(--krds-gray-30);
  border-radius: 10px;
  background-clip: padding-box;
  border: 2px solid transparent;
}
.table-scr-area::-webkit-scrollbar-track, .table-form-area::-webkit-scrollbar-track {
  background-color: var(--krds-gray-5);
  box-shadow: inset 0px 0px 5px white;
}

.table-scr-area.simplebar-scrollable-y::after {
  content: "↓ Scroll";
  text-align: center;
  width: 3.5vw;
  height: 3.5vw;
  line-height: 3.5vw;
  background: var(--krds-gray-40);
  position: absolute;
  top: calc(3% - 5px);
  left: calc(3% - 5px);
  border-radius: 50%;
  color: white;
  z-index: 11;
  font-size: 12px;
  animation: animation1 3.5s forwards;
  box-shadow: 0px 8px 5px -2px rgba(0, 0, 0, 0.05) !important;
  visibility: visible;
}

@keyframes animation1 {
  0% {
    top: calc(3% - 5px);
    opacity: 1;
  }
  30% {
    top: calc(7% - 5px);
    opacity: 1;
  }
  60% {
    top: calc(3% - 5px);
    opacity: 1;
  }
  100% {
    top: calc(7% - 5px);
    opacity: 0;
    visibility: hidden;
  }
}
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.btn-area {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-2);
}
.btn-area button {
  min-width: 6rem;
}

.btn-area-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--krds-spacer-2);
}
.btn-area-right button {
  min-width: 6rem;
}

.btn-area-left {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: var(--krds-spacer-2);
}
.btn-area-left button {
  min-width: 6rem;
}

.btn-area-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--krds-spacer-2);
}
.btn-area-center button {
  min-width: 6rem;
}

.btn-area-file-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--krds-spacer-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  height: var(--krds-btn-h-md);
  padding: 0 var(--krds-btn-px-md);
  background-color: var(--krds-primary);
  border: 1px solid var(--krds-primary);
  border-radius: var(--krds-btn-rd-md);
  font-size: var(--krds-fz-body-sm);
  color: var(--krds-white);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s ease-in-out;
}
.btn:hover {
  background-color: var(--krds-primary-60);
  border-color: var(--krds-primary-60);
}
.btn:active {
  background-color: var(--krds-primary-70);
  border-color: var(--krds-primary-70);
}
.btn:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(255, 255, 255, 0.1);
  transition: none;
}
.btn[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-30);
  color: var(--krds-gray-60);
  cursor: default;
}
.btn.lg {
  height: var(--krds-btn-h-lg);
  line-height: var(--krds-btn-h-lg);
  padding: 0 var(--krds-btn-px-lg);
  border-radius: var(--krds-btn-rd-lg);
  font-size: var(--krds-fz-body-lg);
}
.btn.md {
  height: var(--krds-btn-h-md);
  line-height: var(--krds-btn-h-md);
  padding: 0 var(--krds-btn-px-md);
  border-radius: var(--krds-btn-rd-md);
  font-size: var(--krds-fz-body-md);
}
.btn.sm {
  height: var(--krds-btn-h-sm);
  line-height: var(--krds-btn-h-sm);
  padding: 0 var(--krds-btn-px-sm);
  border-radius: var(--krds-btn-rd-sm);
  font-size: var(--krds-fz-body-sm);
}
.btn.primary {
  background-color: var(--krds-primary);
  border: 1px solid var(--krds-primary);
  color: var(--krds-white);
}
.btn.primary:hover {
  background-color: var(--krds-primary-60);
  border-color: var(--krds-primary-60);
}
.btn.primary:active {
  background-color: var(--krds-primary-70);
  border-color: var(--krds-primary-70);
}
.btn.primary[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-30);
  color: var(--krds-gray-60);
}
.btn.secondary {
  background-color: var(--krds-white);
  border: 1px solid var(--krds-primary);
  color: #1d56bc;
}
.btn.secondary:hover {
  background-color: var(--krds-primary-5);
}
.btn.secondary:active {
  background-color: var(--krds-primary-10);
}
.btn.secondary:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}
.btn.secondary[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-60);
}
.btn.secondary.ico-arr-down::after {
  background-image: url(../images/components/ico_select.png);
  background-size: contain;
  background-position: center;
}
.btn.secondary.active.ico-arr-down::after {
  transform: rotate(180deg);
}
.btn.tertiary {
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-90);
  color: var(--krds-gray-90);
}
.btn.tertiary:hover {
  background-color: var(--krds-gray-20);
}
.btn.tertiary:active {
  background-color: var(--krds-gray-20);
}
.btn.tertiary:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}
.btn.tertiary[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-60);
}
.btn.point {
  background-color: var(--krds-white);
  border: 1px solid var(--krds-point);
  color: var(--krds-point);
}
.btn.point:hover {
  background-color: var(--krds-point-5);
}
.btn.point:active {
  background-color: var(--krds-point-20);
}
.btn.point:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(231, 24, 37, 0.2);
}
.btn.point[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-60);
}
.btn[class*=ico-]::after {
  display: inline-flex;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-repeat: no-repeat;
  background-size: contain;
}
.btn[class*=ico-].ico-before::before {
  display: inline-flex;
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.btn[class*=ico-].ico-before::after {
  display: none;
}
.btn.ico-sch::before, .btn.ico-sch::after {
  background-image: url(../images/components/ico_sch.png);
}
.btn.ico-arr::before, .btn.ico-arr::after {
  background-image: url(../images/components/ico_arr_20_right.png);
}
.btn.ico-arr-up::after {
  background-image: url(../images/components/ico_arr_up.png);
}
.btn.ico-arr-down::after {
  background-image: url(../images/components/ico_arr_down.png);
}
.btn.ico-upload::before, .btn.ico-upload::after {
  background-image: url(../images/components/ico_upload_wh.png);
}
.btn.xsm[class*=ico-]::after {
  width: 1.6rem;
  height: 1.6rem;
}
.btn.sm .btn[class*=ico-]::after {
  width: 2rem;
  height: 2rem;
}

/* **** button : text button **** */
.btn-txt {
  color: inherit;
  border: 0;
  background-color: inherit;
  font-weight: bold;
  padding: var(--krds-spacer-default2) !important;
}
.btn-txt:hover, .btn-txt:active {
  background-color: inherit;
}
.btn-txt:hover {
  text-decoration: underline;
  color: var(--krds-primary);
}
.btn-txt:active {
  background-color: var(--krds-primary-10);
}
.btn-txt:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}
.btn-txt[disabled] {
  color: var(--krds-gray-50);
}
.btn-txt[class*=ico-]::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.btn-txt[class*=ico-].ico-before::before {
  display: inline-flex;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.btn-txt[class*=ico-].ico-before::after {
  display: none;
}
.btn-txt[class*=ico-].ico-call::before {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt[class*=ico-].ico-call::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt[class*=ico-].ico-faq::before {
  background-image: url(../images/components/ico_select.sv);
}
.btn-txt[class*=ico-].ico-faq::after {
  background-image: url(../images/components/ico_select.sv);
}
.btn-txt.underline {
  text-decoration: underline;
}
.btn-txt.link {
  height: auto;
  text-decoration: underline !important;
}
.btn-txt.ico-like::before, .btn-txt.ico-like::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-share::before, .btn-txt.ico-share::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-arr::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-more::after {
  background-image: url(../images/components/ico_arr1_right.png);
}
.btn-txt.ico-sch::before, .btn-txt.ico-sch::after {
  background-image: url(../images/components/ico_sch.png);
}
.btn-txt.ico-sch1::before, .btn-txt.ico-sch1::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-go::before, .btn-txt.ico-go::after {
  background-image: url(../images/components/ico_go.png);
}
.btn-txt.ico-down::before, .btn-txt.ico-down::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-filter {
  position: relative;
}
.btn-txt.ico-filter::before, .btn-txt.ico-filter::after {
  background-image: url(../images/components/ico_filter.png);
}
.btn-txt.ico-filter .num {
  display: inline-flex;
  position: absolute;
  right: 0.1rem;
  z-index: 1;
  height: 2rem;
  font-size: var(--krds-fz-label-sm);
  color: var(--krds-white);
  padding: 0 var(--krds-spacer-2);
  margin-top: -3rem;
  border-radius: 2rem;
  background-color: var(--krds-primary);
}
.btn-txt.ico-reset::before, .btn-txt.ico-reset::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-log::before, .btn-txt.ico-log::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-func {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-func::before, .btn-txt.ico-func::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-logout {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-logout::before, .btn-txt.ico-logout::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-email {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-email::before, .btn-txt.ico-email::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-print {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-print::before, .btn-txt.ico-print::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-scrap {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-scrap::before, .btn-txt.ico-scrap::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-del {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-del::before, .btn-txt.ico-del::after {
  background-image: url(../images/components/ico_del1.png);
}
.btn-txt.ico-plus {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-plus::before, .btn-txt.ico-plus::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-setting {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-setting::before, .btn-txt.ico-setting::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-link {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-link::before, .btn-txt.ico-link::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-comment {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-comment::before, .btn-txt.ico-comment::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.ico-prev {
  gap: var(--krds-spacer-2);
}
.btn-txt.ico-prev::before, .btn-txt.ico-prev::after {
  background-image: url(../images/components/ico_select.png);
}
.btn-txt.sm[class*=ico-]::before, .btn-txt.sm[class*=ico-]::after {
  width: 2rem;
  height: 2rem;
}
.btn-txt.xsm[class*=ico-] {
  gap: var(--krds-spacer-default2);
}
.btn-txt.xsm[class*=ico-]::before, .btn-txt.xsm[class*=ico-]::after {
  width: 1.6rem;
  height: 1.6rem;
}
.btn-txt.h-auto {
  height: auto;
  padding: var(--krds-spacer-default2) !important;
}

/* **** button : only icon **** */
.btn-ico {
  color: inherit;
  border: 0;
  background-color: inherit;
  box-sizing: border-box;
  padding: 0 !important;
}
.btn-ico:hover, .btn-ico:active {
  background-color: inherit;
}
.btn-ico:focus {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}
.btn-ico[class*=ico-] {
  width: 4rem;
  height: 4rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.btn-ico[class*=ico-]::after {
  display: none;
}
.btn-ico[class*=ico-].md {
  width: 2.4rem;
  height: 2.4rem;
}
.btn-ico[class*=ico-].sm {
  width: 2rem;
  height: 2rem;
}
.btn-ico[class*=ico-].sm-m {
  width: 2.4rem;
  height: 2.4rem;
}
.btn-ico[class*=ico-].sm-l {
  width: 3.2rem;
  height: 3.2rem;
}
.btn-ico[class*=ico-].xsm {
  width: 1.6rem;
  height: 1.6rem;
}
.btn-ico.ico-sch {
  background-image: url(../images/components/ico_sch.png);
}
.btn-ico.ico-del {
  border: 0.1rem solid var(--krds-gray-40);
  background-color: var(--krds-white);
  background-image: url(../images/components/ico_chip_del.png);
  background-size: 1.6rem;
}
.btn-ico.ico-new {
  background-image: url(../images/components/ico_new.png);
  background-size: 1.6rem;
}
.btn-ico.ico-notice {
  background-image: url(../images/components/ico_notice.png);
  background-size: 1.6rem;
}
.btn-ico.ico-lock {
  background-image: url(../images/components/ico_lock.png);
  background-size: 1.6rem;
}
.btn-ico.ico-file {
  background-image: url(../images/components/ico_file.png);
  background-size: 1.6rem;
}
.btn-ico.ico-hint {
  background-image: url(../images/components/ico_hint_blue.png);
  background-size: 1.6rem;
}
.btn-ico.ico-emergency {
  background-image: url(../images/components/ico_emergency.png);
  background-size: 1.6rem;
}
.btn-ico.ico-refresh {
  background-image: url(../images/components/ico_refresh.png);
  background-size: 1.6rem;
}
.btn-ico.ico-page-prev {
  border-radius: 10rem;
  border: 0.1rem solid var(--krds-gray-40);
  background-color: var(--krds-white);
  background-image: url(../images/components/ico_swiper_prev.png);
  background-size: 2.4rem;
}
.btn-ico.ico-page-prev.disabled {
  background-color: var(--krds-secondary-5);
}
.btn-ico.ico-page-next {
  border-radius: 10rem;
  border: 0.1rem solid var(--krds-gray-40);
  background-color: var(--krds-white);
  background-image: url(../images/components/ico_swiper_next.png);
  background-size: 2.4rem;
}
.btn-ico.ico-page-next.disabled {
  background-color: var(--krds-secondary-5);
}
.btn-ico.ico-address-book {
  background-image: url(../images/components/ico_address_book.png);
  background-size: 1.8rem;
}
.btn-ico.ico-address-book.line {
  border: 1px solid black;
  border-radius: var(--krds-rd-4);
}
.btn-ico.ico-address-book:hover {
  background-color: var(--krds-gray-20);
}
.btn-ico.ico-address-book:active {
  background-color: var(--krds-gray-20);
}
.btn-ico.ico-address-book:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}
.btn-ico.ico-address-book[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-60);
}
.btn-ico.ico-user-plus {
  background-image: url(../images/components/ico_user_plus.png);
  background-size: 1.8rem;
}
.btn-ico.ico-user-plus.line {
  border: 1px solid black;
  border-radius: var(--krds-rd-4);
}
.btn-ico.ico-user-plus:hover {
  background-color: var(--krds-gray-20);
}
.btn-ico.ico-user-plus:active {
  background-color: var(--krds-gray-20);
}
.btn-ico.ico-user-plus:focus {
  outline-offset: -0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}
.btn-ico.ico-user-plus[disabled] {
  background-color: var(--krds-gray-30);
  border-color: var(--krds-gray-40);
  color: var(--krds-gray-60);
}

/* **** button area **** */
.btn-wrap {
  width: 100%;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* 공통 :: 라디오버튼 & 체크박스 */
input[type=radio] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
input[type=radio]:focus ~ label {
  outline-offset: 0.4rem;
  outline: 2px solid rgba(36, 107, 235, 0.2);
}

/* radio checkbox */
.form-check input[type=radio],
.form-check input[type=checkbox] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.form-check input[type=radio] ~ label {
  position: relative;
  display: inline-flex;
  min-height: var(--krds-rdo-size-sm);
  padding-left: calc(var(--krds-rdo-size-sm) + var(--krds-spacer-2));
  font-size: var(--krds-rdo-fz-sm);
  line-height: var(--krds-rdo-size-sm);
}

.form-check input[type=radio] ~ label:before,
.form-check input[type=radio] ~ label:after {
  content: "";
  display: block;
  transition: 0.25s cubic-bezier(0.4, 0, 0.23, 1);
  box-sizing: border-box;
}

/* 큰 circle */
.form-check input[type=radio] ~ label:before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--krds-rdo-size-sm);
  height: var(--krds-rdo-size-sm);
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-60);
  border-radius: var(--krds-rd-full);
}

/* 작은 circle */
.form-check input[type=radio] ~ label:after {
  position: absolute;
  top: calc((var(--krds-rdo-size-sm) - var(--krds-rdo-chk-sm)) / 2);
  left: calc((var(--krds-rdo-size-sm) - var(--krds-rdo-chk-sm)) / 2);
  width: var(--krds-rdo-chk-sm);
  height: var(--krds-rdo-chk-sm);
  background-color: var(--krds-white);
  border-radius: var(--krds-rd-full);
}

/* circle z-index 작업 */
.form-check input[type=radio] ~ label:before {
  z-index: 3;
}

.form-check input[type=radio] ~ label:after {
  z-index: 4;
}

/* 선택된 라디오버튼 */
.form-check input[type=radio]:checked ~ label:after {
  background-color: var(--krds-primary);
}

.form-check input[type=radio]:checked ~ label:before {
  border-color: var(--krds-primary);
}

/* 비활성화 라디오버튼 */
.form-check input[type=radio]:disabled + label,
.form-check input[type=checkbox]:disabled + label {
  color: var(--krds-gray-50);
  cursor: default;
}

.form-check input[type=radio]:disabled ~ label:before {
  border-color: var(--krds-gray-40);
  background-color: var(--krds-gray-20);
}

.form-check input[type=radio]:disabled ~ label:after {
  display: none;
  background-color: var(--krds-gray-40);
}

/* 선택된 비활성화 라디오버튼 */
.form-check input[type=radio]:checked:disabled ~ label:after {
  display: block;
  background-color: var(--krds-gray-40);
}

/* === 라디오버튼 박스형  === */
.g-example {
  padding: var(--krds-spacer-10) var(--krds-spacer-10);
  background-color: #fff;
  border: 1px solid var(--krds-gray-40);
}

.chk-group-area .chk-group-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-spacer-6);
}

.chk-group-area .chk-group-wrap > li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-spacer-6);
  width: 100%;
  padding: var(--krds-spacer-6);
  border: 1px solid var(--krds-gray-40);
  border-radius: var(--krds-rd-12);
  transition: 0.25s ease-in-out;
}

.chk-group-area .chk-group-wrap > li.checked {
  border-color: var(--krds-primary);
}

.chk-group-area .chk-group-wrap > li.disabled {
  background-color: var(--krds-gray-5);
  border-color: var(--krds-gray-30);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* 공통 :: 라디오버튼 & 체크박스 */
.chk-area {
  display: flex;
  flex-wrap: wrap;
  gap: var(--krds-spacer-2);
}
.chk-area .flex-row {
  flex-wrap: wrap;
}
.chk-area .form-check input[type=checkbox] ~ label {
  position: relative;
  display: inline-flex;
  min-height: var(--krds-rdo-size-sm);
  padding-left: calc(var(--krds-rdo-size-sm) + var(--krds-spacer-2));
  font-size: var(--krds-rdo-fz-sm);
  line-height: var(--krds-rdo-size-sm);
}

.form-check {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--krds-spacer-1);
}

.form-check input[type=checkbox] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.form-check input[type=checkbox]:focus ~ label {
  
}

.form-check input[type=checkbox] ~ label {
  position: relative;
  display: inline-flex;
  min-height: var(--krds-rdo-size-sm);
  padding-left: calc(var(--krds-rdo-size-sm));
  font-size: var(--krds-rdo-fz-sm);
  line-height: var(--krds-rdo-size-sm);
}

.form-check input[type=checkbox] ~ label:before,
.form-check input[type=checkbox] ~ label:after {
  content: "";
  display: block;
  transition: 0.25s ease-in-out;
  box-sizing: border-box;
}

/* === 체크박스 === */
.form-check input[type=checkbox] ~ label:before {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--krds-chk-size-sm);
  height: var(--krds-chk-size-sm);
  background-color: var(--krds-white);
  border: 1px solid var(--krds-gray-60);
  border-radius: var(--krds-rd-4);
}

.form-check input[type=checkbox] ~ label:after {
  position: absolute;
  top: calc((var(--krds-chk-size-sm) - var(--krds-chk-primary-chk-sm)) / 2);
  left: calc((var(--krds-chk-size-sm) - var(--krds-chk-primary-chk-sm)) / 2);
  width: var(--krds-chk-primary-chk-sm);
  height: var(--krds-chk-primary-chk-sm);
  background: url(../images/components/ico_check_primary_checked.png) no-repeat 0 0;
  background-size: contain;
  opacity: 0;
}

.form-check input[type=checkbox]:checked ~ label:before {
  background-color: var(--krds-primary);
  border-color: var(--krds-primary);
}

.form-check input[type=checkbox]:checked ~ label:after {
  opacity: 1;
  transition-delay: 0.2s;
}

.form-check input[type=checkbox]:disabled ~ label:before {
  border-color: var(--krds-gray-40);
  background-color: var(--krds-gray-20);
}

.form-check input[type=checkbox]:disabled ~ label:after {
  background-image: url(../images/components/ico_check_primary_checked.png);
}

/* 크기별 */
.form-check.sm > [type=checkbox] ~ label {
  font-size: var(--krds-chk-fz-sm);
  line-height: var(--krds-chk-size-sm);
  min-height: var(--krds-chk-size-sm);
  padding-left: calc(var(--krds-chk-size-sm) + var(--krds-spacer-2));
}

.form-check.sm > [type=checkbox] ~ label::before {
  width: var(--krds-chk-size-sm);
  height: var(--krds-chk-size-sm);
}

.form-check.sm > [type=checkbox] ~ label::after {
  width: var(--krds-chk-primary-chk-sm);
  height: var(--krds-chk-primary-chk-sm);
}

.form-check.lg > [type=checkbox] ~ label {
  font-size: var(--krds-chk-fz-lg);
  line-height: var(--krds-chk-size-lg);
  min-height: var(--krds-chk-size-lg);
  padding-left: calc(var(--krds-chk-size-lg) + var(--krds-spacer-2));
}

.form-check.lg > [type=checkbox] ~ label::before {
  width: var(--krds-chk-size-lg);
  height: var(--krds-chk-size-lg);
}

.form-check.lg > [type=checkbox] ~ label::after {
  width: var(--krds-chk-primary-chk-lg);
  height: var(--krds-chk-primary-chk-lg);
}

.form-check.table {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.form-check.table input[type=checkbox] ~ label {
  padding-left: calc(var(--krds-chk-size-lg) - 4px) !important;
}

@media (max-width: 1024px) {
  .chk-area {
    flex-wrap: wrap;
  }
  .chk-area .flex-row {
    flex-wrap: wrap;
    gap: var(--krds-spacer-2) !important;
  }
}
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.form-select {
  width: 250px;
  height: var(--krds-select-h-md);
  padding: var(--krds-select-pd-md);
  background-color: var(--krds-white) !important;
  background-image: url(../images/components/ico_select.png);
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center right var(--krds-select-rn-md);
  border: 1px solid var(--krds-gray-30);
  border-radius: 6px;
  font-family: inherit;
  font-weight: 300;
  font-size: var(--krds-select-fz-sm);
  color: var(--krds-gray-90);
  opacity: 1;
  box-sizing: border-box;
}
.form-select:required:invalid {
  color: #909090;
}
.form-select option {
  color: #111;
}
.form-select:disabled {
  background-color: var(--krds-gray-30) !important;
}
.form-select.h-sm {
  height: var(--krds-select-h-sm);
  background-size: 18px 18px;
  font-size: var(--krds-select-fz-sm);
}
.form-select.h-md {
  height: var(--krds-select-h-md);
  font-size: var(--krds-select-fz-md);
}
.form-select.h-lg {
  height: var(--krds-select-h-lg);
  font-size: var(--krds-select-fz-lg);
}
.form-select.xlg {
  width: 100%;
}
.form-select.lg {
  width: 300px;
  padding: var(--krds-select-pd-lg);
  background-size: 18px 18px;
  background-position: center right var(--krds-select-rn-lg);
}
.form-select.md {
  width: 250px;
  min-width: 100px;
  padding: var(--krds-select-pd-md);
  background-size: 18px 18px;
  background-position: center right var(--krds-select-rn-md);
}
.form-select.sm {
  width: 160px;
  min-width: 100px;
  padding: var(--krds-select-pd-sm);
  background-size: 18px 18px;
  background-position: center right var(--krds-select-rn-sm);
}
.form-select.xsm {
  width: 100px;
  min-width: 100px;
  padding: 0 2rem 0 1rem;
  background-position: center right 5px;
}
.form-select.xxsm {
  width: 60px;
  height: 30px;
  min-width: 60px;
  padding: 0 2rem 0 0.8rem;
  background-position: center right 5px;
  border-radius: 3px;
}

.form-select.is-error {
  border-color: var(--krds-point);
  border-width: 1px;
}
.form-select.is-error:focus {
  border-color: var(--krds-point);
  border-width: 1px;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* **** button : chips **** */
.btn-chip-fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--krds-gray-10);
  color: var(--krds---krds-gray-90);
  font-size: var(--krds-fz-detail-md);
}
.btn-chip-fill:hover {
  background-color: var(--krds-secondary-5);
}
.btn-chip-fill:active {
  background-color: var(--krds-secondary-10);
}
.btn-chip-fill[disabled], .btn-chip-fill.disabled {
  background-color: var(--krds-gray-30);
}

.btn-chip-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 0.2rem;
  background-color: var(--krds-white);
  border: 0.1rem solid var(--krds-gray-40);
  color: var(--krds-gray-90);
  font-size: var(--krds-fz-detail-md);
}
.btn-chip-outline .chip-val {
  display: inline-block;
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
.btn-chip-outline:hover {
  background-color: var(--krds-secondary-5);
}
.btn-chip-outline:active {
  background-color: var(--krds-secondary-10);
}
.btn-chip-outline:disabled, .btn-chip-outline.disabled {
  background-color: var(--krds-gray-30);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.krds-tooltip-wrap {
  display: inline-flex;
  position: relative;
}
.krds-tooltip-wrap .tool-txt {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--krds-spacer-1);
  font-size: var(--krds-fz-body-sm);
}
.krds-tooltip-wrap .tool-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: var(--krds-spacer-1);
}
.krds-tooltip-wrap .tool-btn::after {
  display: inline-flex;
  content: "";
  width: 2rem;
  height: 2rem;
  background: url(../images/components/ico_tooltip.png) no-repeat center;
  background-size: contain;
}
.krds-tooltip-wrap .tool-in {
  display: none;
  position: absolute;
  z-index: 3;
  font-size: var(--krds-fz-body-sm);
  width: 56rem;
  padding: var(--krds-spacer-6);
  border-radius: var(--krds-rd-6);
  border: 0.1rem solid var(--krds-gray-40);
  background-color: var(--krds-white);
}
.krds-tooltip-wrap .tool-in::before {
  display: inline-flex;
  content: "";
  position: absolute;
  z-index: 4;
  width: 2.2rem;
  height: 1.2rem;
  background: url(../images/components/ico_tool_arr.png) no-repeat center;
  background-size: contain;
}
.krds-tooltip-wrap .tool-in .tool-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: var(--krds-spacer-4);
}
.krds-tooltip-wrap .tool-in .tool-tit {
  flex: 1;
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  
  
  padding-right: var(--krds-spacer-10);
}
.krds-tooltip-wrap .tool-in .tool-close {
  display: inline-flex;
  position: absolute;
  top: var(--krds-spacer-3);
  right: var(--krds-spacer-3);
  width: 4rem;
  height: 4rem;
  background: url(../images/components/ico_del.png) no-repeat center;
}
.krds-tooltip-wrap .tool-in .tool-cnt {
  display: flex;
  align-items: normal;
  justify-content: flex-start;
  flex-direction: column;
  gap: var(--krds-spacer-6);
  margin-top: var(--krds-spacer-4);
}
.krds-tooltip-wrap.left .tool-in {
  left: 0;
}
.krds-tooltip-wrap.left .tool-in::before {
  left: var(--krds-spacer-6);
}
.krds-tooltip-wrap.center .tool-in {
  left: 50%;
  transform: translateX(-50%);
}
.krds-tooltip-wrap.center .tool-in::before {
  left: 50%;
  margin-left: -1.1rem;
}
.krds-tooltip-wrap.right .tool-in {
  right: 0;
}
.krds-tooltip-wrap.right .tool-in::before {
  right: var(--krds-spacer-6);
}
.krds-tooltip-wrap.top .tool-in {
  bottom: 100%;
  margin-bottom: var(--krds-spacer-3);
}
.krds-tooltip-wrap.top .tool-in::before {
  top: 100%;
}
.krds-tooltip-wrap.bottom .tool-in {
  top: 100%;
  margin-top: var(--krds-spacer-3);
}
.krds-tooltip-wrap.bottom .tool-in::before {
  bottom: 100%;
  transform: rotate(-180deg);
}

.tooltip {
  width: auto;
  max-width: none;
  white-space: nowrap;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* 공통 :: input / 셀렉트박스 / 텍스트영역 */
textarea {
  background-color: #fff;
  border: 1px solid #ddd;
  vertical-align: middle;
  padding: var(--krds-spacer-1) var(--krds-spacer-2);
  font-size: 1.4rem;
  color: #333333;
  box-sizing: border-box;
  min-height: 80px;
  border-radius: 3px;
  width: 100%;
  height: 100%;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* 파일 업로드 */
.file-upload-form {
  width: auto;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-2);
}
.file-upload-form .top-tit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  font-size: var(--krds-fz-body-sm);
}
.file-upload-form .top-tit .volume {
  color: var(--krds-gray-50);
}
.file-upload-form .top-tit .btn-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
}
.file-upload-form .top-tit .btn-list button {
  position: relative;
  padding: 0 var(--krds-spacer-3) !important;
}
.file-upload-form .top-tit .top-down-info {
  color: var(--krds-gray-50);
  font-size: var(--krds-fz-body-sm);
}
.file-upload-form .down-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--krds-gray-30);
  border-radius: var(--krds-rd-4);
  padding: 4px 6px;
}
.file-upload-form .down-list li {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.file-upload-form .down-list.user .down-item .down-item-info {
  cursor: pointer;
}
.file-upload-form .down-list.user .down-item .down-item-info button {
  padding-right: var(--krds-spacer-1);
}
.file-upload-form .down-list.user .down-item .down-item-info button img {
  display: flex;
  width: 16px;
  height: 16px;
  display: inline-block;
}
.file-upload-form .down-list.user .down-item:hover {
  background: var(--krds-gray-5);
}
.file-upload-form .down-list .down-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.file-upload-form .down-list .down-item .down-item-info {
  width: 70%;
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-1);
  font-size: var(--krds-fz-body-sm);
}
.file-upload-form .down-list .down-item .down-item-info .down-link {
  width: 100%;
  max-width: 90%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  cursor: pointer;
}
.file-upload-form .down-list .down-item .down-item-info button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.file-upload-form .down-list .down-item .down-item-vol {
  color: var(--krds-gray-50);
  font-size: var(--krds-fz-body-xsm);
}
.file-upload-form .down-list .down-item:hover {
  background: var(--krds-gray-5);
}
.file-upload-form .down-list .none-file {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--krds-fz-body-sm);
  color: var(--krds-gray-50);
}
.file-upload-form .down-list.scr-box {
  overflow: auto;
  min-height: 5vh;
  max-height: 8vh;
}
.file-upload-form.row .top-tit {
  justify-content: flex-start;
  padding: 0 !important;
  align-items: center;
  gap: var(--krds-spacer-3);
}
.file-upload-form.row .top-tit .down-list {
  width: auto !important;
  border: 0px !important;
}
.file-upload-form.row .top-tit .down-list li span {
  cursor: pointer;
}
.file-upload-form.scr-row {
  width: 280px;
  flex-direction: row;
}
.file-upload-form.scr-row .top-tit {
  justify-content: flex-start;
  padding: 0 !important;
  align-items: center;
  gap: var(--krds-spacer-3);
}
.file-upload-form.scr-row .down-list.scr-box {
  overflow: auto;
  min-height: 32px !important;
  max-height: 60px;
  width: 100%;
}
.file-upload-form.scr-row .down-list li span {
  cursor: pointer;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.go-top {
  align-self: flex-end;
  position: sticky;
  bottom: 4rem;
  right: 0;
  visibility: hidden;
  z-index: -1;
  width: auto;
  height: auto;
  padding-top: var(--krds-spacer-6);
  padding-bottom: var(--krds-spacer-2);
  opacity: 0;
}
.go-top::after {
  position: absolute;
  top: var(--krds-spacer-1);
  left: 50%;
  content: "";
  width: 2rem;
  height: 2rem;
  background: url(../images/components/ico_select.png) no-repeat;
  background-size: contain;
  transform: translateX(-50%) rotate(180deg);
}
.go-top.active {
  visibility: visible;
  z-index: auto;
  opacity: 0.75;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.jqgfirstrow > td {
  padding: 0px 0 !important;
}

.ui-widget.ui-widget-content {
  border: 0px !important;
}

.ui-icon {
  color: #007bff;
}

.ui-jqgrid .s-ico {
  display: none !important;
}

.ui-icon-caret-1-n {
  background-image: url(../images/components/ico_jqgrid_folder.png) !important;
}

.ui-icon-caret-1-s {
  background-image: url(../images/components/ico_jqgrid_folder.png) !important;
}

.ui-icon-arrowthick-1-s {
  background: url(../images/components/ico_jqgrid_folder.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

.ui-icon-arrowthick-1-n {
  background: url(../images/components/ico_jqgrid_document.png) !important;
}

.ui-icon-triangle-1-s {
  background: url(../images/components/ico_jqgrid_folder_open.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

.ui-icon-triangle-1-e {
  background: url(../images/components/ico_jqgrid_folder.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

.ui-icon-document {
  background: url(../images/components/ico_jqgrid_document.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

.ui-icon-seek-next {
  background: url(../images/components/ico_page_arrow_right.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

.ui-icon-seek-end {
  background: url(../images/components/ico_page_arrow_double_right.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
}

.ui-icon-seek-prev {
  background: url(../images/components/ico_page_arrow_left.png) !important;
  background-position: center !important;
  background-size: 16px 16px !important;
}

.ui-icon-seek-first {
  background: url(../images/components/ico_page_arrow_double_left.png) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.ui-pg-input {
  border: 1px solid #ced4da !important;
  /* 입력란 테두리 */
  border-radius: 3px !important;
  padding: 2px 4px !important;
}

.ui-pg-selbox {
  border: 1px solid #ced4da;
  /* 페이지 번호 선택 테두리 */
  border-radius: 3px !important;
  padding: 2px 4px !important;
}

/* jqgrid 테이블 디자인 초기화 */
.ui-jqgrid-jquery-ui {
  width: 100% !important;
  overflow-x: auto;
}

.ui-jqgrid {
  font-family: "Pretendard GOV", sans-serif !important;
  font-size: 14px !important;
}

.ui-pg-table {
  background: #f8f8f8 !important;
}

.ui-pg-table tr {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
}

.ui-pg-table td {
  border-bottom: 0px !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
  border: 0px !important;
  background: inherit !important;
}

.ui-jqgrid > .ui-jqgrid-view > .ui-userdata {
  height: 0px !important;
  border: 0px !important;
}

/* jqgrid 테이블 커스텀 디자인 시작 */
.ui-jqgrid-hbox {
  width: 100% !important;
}

.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels th {
  background: #f8f8f8 !important;
  border-top: 1px solid var(--krds-gray-90) !important;
  border-right: 1px solid var(--krds-gray-10) !important;
  padding: 0px 0 !important;
  font-weight: 600 !important;
  height: 38px !important;
  box-sizing: border-box !important;
}

.ui-jqgrid tr.jqfoot > td,
.ui-jqgrid tr.jqgroup > td,
.ui-jqgrid tr.jqgrow > td,
.ui-jqgrid tr.ui-subgrid > td,
.ui-jqgrid tr.ui-subtblcell > td {
  border-top: 0 none !important;
  border-left: 0 none !important;
  border-right: 1px solid !important;
  padding: 0 1rem !important;
}

.ui-jqgrid .ui-jqgrid-bdiv {
  overflow: inherit !important;
}

.ui-jqgrid .ui-jqgrid-bdiv tr.ui-row-ltr > td {
  border-right-width: 1px !important;
  border-color: var(--krds-gray-10) !important;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid var(--krds-primary-5) !important;
  background: var(--krds-primary-5) !important;
  color: #2b2b2b !important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 0px solid transparent !important;
  background: var(--krds-primary-5) !important;
  color: #2b2b2b !important;
}

.ui-jqgrid .ui-pg-button:not(.ui-state-hover),
.ui-jqgrid-jquery-ui .jqgrow .ui-jqgrid-actions .ui-pg-div:not(.ui-state-hover) {
  border: 0px solid transparent !important;
}

.ui-jqgrid .tree-wrap .treeclick {
  cursor: pointer !important;
}

#pager {
  position: relative;
  bottom: 0;
  margin-top: 20px; /* 필요에 따라 간격 조정 */
  clear: both; /* 중간에 나타나는 문제 해결 */
}

/* 그리드의 전체 너비를 맞추기 위한 스타일 */
.ui-jqgrid {
  width: 100% !important;
}

.ui-jqgrid tr:first-child td {
  border-top: 0px !important;
}

/* 그리드 내부 데이터 영역의 높이를 고정하고 스크롤바를 추가 */
.ui-jqgrid-bdiv {
  overflow-y: scroll !important; /* 세로 스크롤 활성화 */
  overflow-x: auto !important; /* 가로 스크롤 활성화 */
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.chart-area .chart {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  padding: 2rem;
  border: 2px solid var(--krds-gray-30);
  display: flex;
  flex-direction: column;
  border-radius: var(--krds-rd-4);
  background: var(--krds-white);
}
.chart-area .chart > div {
  padding: 2rem;
}
.chart-area .chart-info-tb .highlight {
  text-decoration: underline;
  display: inline-block;
  padding: 0 var(--krds-spacer-1);
  background-color: var(--krds-warning-40);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.notice-form-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.notice-form-area .notice-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.notice-form-area .notice-info iframe {
  max-height: 80px;
}
.notice-form-area .notice-info .tit {
  font-size: var(--krds-fz-body-lg);
  font-weight: bold;
  padding-bottom: var(--krds-spacer-3);
  padding-left: var(--krds-spacer-3);
}
.notice-form-area .notice-info .more-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--krds-spacer-3);
  padding-bottom: var(--krds-spacer-5);
  border-bottom: 1px solid var(--krds-gray-30);
}
.notice-form-area .notice-info .more-info:has(iframe) {
  border-bottom: 1px solid var(--krds-gray-30);
}
.notice-form-area .notice-info .more-info .info-left {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  padding-left: var(--krds-spacer-3);
}
.notice-form-area .notice-info .more-info .info-left .list {
  display: inline-flex;
  flex-direction: row;
  font-size: var(--krds-fz-body-sm);
  gap: var(--krds-spacer-2);
}
.notice-form-area .notice-info .more-info .info-left .list .label {
  font-weight: bold;
}
.notice-form-area .notice-info .more-info .info-right {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  padding-right: var(--krds-spacer-3);
}
.notice-form-area .notice-info .more-info .info-right .list {
  display: inline-flex;
  flex-direction: row;
  font-size: var(--krds-fz-body-sm);
  gap: var(--krds-spacer-2);
}
.notice-form-area .notice-info .more-info .info-right .list .label {
  font-weight: bold;
  border-radius: var(--krds-rd-12);
  border: 1px solid var(--krds-gray-30);
  display: inline-block;
  padding: 0 var(--krds-spacer-2);
}
.notice-form-area .notice-cont {
  width: 100%;
  padding: 2rem 1.5rem 5rem;
  min-height: 200px;
  line-height: 1.2;
}
.notice-form-area .notice-chat {
  border-top: 1px solid var(--krds-gray-30);
  border-radius: var(--krds-rd-4);
  padding: var(--krds-spacer-3);
  display: flex;
  flex-direction: column;
}
.notice-form-area .notice-chat .name {
  padding-bottom: var(--krds-spacer-2);
}
.notice-form-area .notice-chat .enter-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 8vh;
  padding-bottom: var(--krds-spacer-3);
}
.notice-form-area .notice-chat .enter-box .input-box {
  width: 100%;
  height: 100%;
}
.notice-form-area .notice-chat .enter-box .input-box textarea {
  width: calc(100% - 20px);
  height: 100%;
  padding: 1rem;
}
.notice-form-area .notice-chat .enter-box button {
  padding: 0 3px;
  width: 60px;
  height: 100%;
  background: white;
  border: 1px solid var(--krds-gray-30);
}
.notice-form-area .notice-chat .chat-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.notice-form-area .notice-chat .chat-box .chat-list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: var(--krds-spacer-3);
  justify-content: space-between;
  border-bottom: 1px solid var(--krds-gray-30);
  background: var(--krds-gray-10);
}
.notice-form-area .notice-chat .chat-box .chat-list:first-child {
  margin-top: var(--krds-spacer-8);
}
.notice-form-area .notice-chat .chat-box .chat-list .left {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.notice-form-area .notice-chat .chat-box .chat-list .left .name {
  font-size: var(--krds-fz-body-sm);
  padding-bottom: var(--krds-spacer-2);
}
.notice-form-area .notice-chat .chat-box .chat-list .left .chat-txt {
  word-break: keep-all;
  font-size: var(--krds-fz-body-sm);
}
.notice-form-area .notice-chat .chat-box .chat-list .left .chat-txt textarea {
  height: 50px;
}
.notice-form-area .notice-chat .chat-box .chat-list .right {
  display: flex;
  flex-direction: column;
  width: 30%;
  text-align: right;
  font-size: var(--krds-fz-body-sm);
  color: var(--krds-gray-60);
  gap: 5px;
}
.notice-form-area .notice-chat .chat-box .chat-list .right .re-chat {
  text-align: right;
}
.notice-form-area .notice-chat .chat-box .chat-list .right .re-chat button {
  border-right: 1px solid var(--krds-gray-30);
  padding: 0 var(--krds-spacer-2);
  font-size: var(--krds-fz-body-sm);
}
.notice-form-area .notice-chat .chat-box .chat-list .right .re-chat button:last-child {
  border: 0px;
  padding-right: 0px;
}
.notice-form-area .notice-chat .chat-box .chat-list .right .re-chat button:hover {
  color: var(--krds-gray-90);
}
.notice-form-area .notice-chat .chat-box .chat-list:first-child {
  border-top: 1px solid var(--krds-gray-30);
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* 세로 스크롤바 트랙 스타일 */
.simplebar-track.simplebar-vertical {
  width: 10px; /* 세로 스크롤 트랙 너비 */
  background: rgba(240, 240, 240, 0); /* 트랙 배경색 */
}

/* 가로 스크롤바 트랙 스타일 */
.simplebar-track.simplebar-horizontal {
  height: 10px; /* 가로 스크롤 트랙 높이 */
  background: rgba(240, 240, 240, 0); /* 트랙 배경색 */
}

/* 가로 스크롤바 자체 스타일 */
.simplebar-scrollbar.simplebar-horizontal:before {
  height: 12px; /* 가로 스크롤바 두께 */
  background-color: var(--krds-gray-90); /* 스크롤바 색상 */
  border-radius: 6px; /* 모서리 둥글게 */
  transition: background-color 0.3s ease; /* 색상 전환 효과 */
  cursor: default;
}

/* 스크롤바가 활성화될 때(사용자가 드래그 중일 때) */
.simplebar-scrollbar.simplebar-visible:before {
  background-color: var(--krds-gray-90); /* 활성화된 스크롤바 색상 */
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.loading-area {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1100;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.loading-area .loading-img {
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  overflow: hidden;
  border: 2px solid white;
  background-image: url(../images//main/kr_loading.gif);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
.folder-area {
  position: relative;
  width: 100%;
  z-index: 10;
  padding-top: var(--krds-spacer-14);
}
.folder-area .toggle-button {
  content: "▼";
  position: absolute;
  z-index: 11;
  top: 10px;
  right: 0;
  width: auto;
  padding: 0 10px;
  height: 35px;
  line-height: 30px;
  background: var(--krds-gray-10);
  border: 1px solid var(--krds-gray-30);
  color: var(--krds-gray-60);
  font-size: 14px;
  cursor: pointer;
  text-align: center;
  border-radius: 3px;
}
.folder-area .toggle-button:hover {
  background: var(--krds-gray-60);
  color: var(--krds-white);
  border: 1px solid var(--krds-gray-30);
}

.folder-area > .info-top-box {
  height: 100%;
}

.folder-area.collapsed .toggle-button {
  background: var(--krds-primary);
  color: var(--krds-white);
  border: 1px solid var(--krds-primary);
}
.folder-area.collapsed .toggle-button:hover {
  background: var(--krds-primary-60);
  border: 1px solid var(--krds-primary);
}

.folder-area.collapsed > .info-top-box {
  height: 0 !important; /* Hide content when collapsed */
  visibility: hidden;
  transition: all 0.15s ease-in-out;
}
.folder-area.collapsed > .info-top-box .btn {
  transition: 0.1s ease-in-out;
}

/* *****************************
* 페이지 : pages
******************************** */
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* *******************************************************
* 파일이름 : home.scss
* 파일설명 : 메인화면 커스텀

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

******************************************************** */
/* *******************
 * 설명 : custom CSS
******************* */
/* ************** 콘텐츠 영역 ************** */
[data-page=main] .scr-area {
  overflow-y: hidden !important;
}
[data-page=main] .inner-area.main {
  gap: var(--krds-spacer-4);
}
[data-page=main] .inner-area.main .main-row {
  display: flex;
  flex-direction: column;
  gap: var(--krds--spacer-4);
  height: 100%;
}
[data-page=main] .inner-area.main .main-row .cont {
  display: flex;
  flex-direction: column;
  border: 1px solid #e9ebec;
  background: #fff;
}
[data-page=main] .inner-area.main .main-row .cont .top-tit {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--krds-spacer-3);
  border-bottom: 1px solid #e9ebec;
}
[data-page=main] .inner-area.main .main-row .cont .top-tit span {
  font-weight: bold;
  display: inline-block;
}
[data-page=main] .inner-area.main .main-row .cont .bottom-cont {
  width: 100%;
  height: calc(100% - 57px);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--krds-spacer-2);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-6);
  padding: var(--krds-spacer-4);
  border-bottom: 5px solid var(--krds-gray-5);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list .img-box {
  border-radius: 100%;
  overflow: hidden;
  display: block;
  width: 50px;
  height: 50px;
  background: url(../images/components/ico_profile.png) no-repeat center;
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list .info-box {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-1);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list .info-box .info-txt {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-4);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list .info-box .info-txt .name {
  font-weight: bold;
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list .info-box .info-txt .date {
  color: var(--krds-gray-50);
  font-size: var(--krds-fz-body-sm);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list .info-box .info-txt .state {
  font-size: var(--krds-fz-body-sm);
}
[data-page=main] .inner-area.main .main-row .cont .news_feed .news_feed_list:hover .text {
  display: inline-block;
  max-width: 80%;
}
[data-page=main] .inner-area.main .main-row .cont .visit_feed {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-2);
}
[data-page=main] .inner-area.main .main-row .cont .visit_feed table thead tr,
[data-page=main] .inner-area.main .main-row .cont .visit_feed .table-form thead tr {
  position: sticky;
  top: 0px;
  background-color: var(--krds-primary-5);
  border-top: 1px solid gray;
  box-sizing: border-box;
  z-index: 10;
}
[data-page=main] .inner-area.main .main-row .cont .visit_feed .table-form tr:hover td.t-al {
  cursor: pointer;
  text-decoration: underline;
}
[data-page=main] .inner-area.main .main-row .cont .visit_feed .table-form td {
  max-width: 300px;
}
[data-page=main] .inner-area.main .main-row .cont .visit_feed .table-form td .ico-new {
  width: 1.3rem;
  height: 1.3rem;
  background-size: cover;
}
[data-page=main] .inner-area.main .main-row:nth-child(1) {
  width: 30%;
}
[data-page=main] .inner-area.main .main-row:nth-child(1) .cont {
  width: 100%;
  height: 100%;
}
[data-page=main] .inner-area.main .main-row:nth-child(1) .cont .top-tit {
  border-bottom: 1px solid var(--krds-gray-90);
}
[data-page=main] .inner-area.main .main-row:nth-child(2) {
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--krds-spacer-4);
}
[data-page=main] .inner-area.main .main-row:nth-child(2) .cont {
  width: calc(50% - var(--krds-spacer-2));
  height: calc(50% - var(--krds-spacer-2));
}

@media (max-width: 1440px) {
  [data-page=main] .inner-area.main .main-row:nth-child(1) {
    width: 45%;
  }
  [data-page=main] .inner-area.main .main-row:nth-child(2) {
    width: 55%;
  }
  [data-page=main] .inner-area.main .main-row:nth-child(2) .cont {
    width: 100%;
  }
  [data-page=main] .inner-area.main .main-row:nth-child(2) .cont:nth-child(3), [data-page=main] .inner-area.main .main-row:nth-child(2) .cont:nth-child(4) {
    display: none;
  }
}
/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* *******************************************************
* 파일이름 : sub.scss
* 파일설명 : 서브화면 커스텀

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

******************************************************** */
/* ************** sub :: 공통 레이아웃 ************** */
.contents .inner-area {
  background: var(--krds-white);
  border-radius: var(--krds-rd-6);
}
.contents .inner-area .sect {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-6);
  width: 100%;
  overflow: hidden;
}
.contents .inner-area .sect .title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--krds-spacer-2);
  border-bottom: 1px solid var(--krds-gray-30);
}
.contents .inner-area .sect .title h2 {
  font-size: var(--krds-fz-title-lg);
  color: var(--krds-gray-90);
}
.contents .inner-area .sect .title .btn-area-right {
  padding-top: 0 !important;
}
.contents .inner-area .fix-area {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  width: 100%;
  height: 516px;
}
.contents .inner-area .divide-area + .btn-area-center {
  padding-top: var(--krds-spacer-3);
}
.contents .inner-area .calendar-area {
  width: 100%;
  height: 76.5vh;
  display: flex;
  flex-direction: row;
}
.contents .inner-area .calendar-area .side-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 220px;
  height: 100%;
  overflow: hidden;
}
.contents .inner-area .calendar-area .side-info .tree-area {
  width: 100%;
  height: calc(70% - 20px);
  border: 1px solid var(--krds-gray-30);
  font-size: 14px;
  box-sizing: border-box;
}
.contents .inner-area .calendar-area .calendar-container {
  display: flex;
  flex-direction: column;
  margin: 0 20px 0 20px;
  justify-content: space-around;
  width: calc(100% - 220px);
  height: 100%;
  overflow: hidden; /* 넘치는 부분 숨기기 */
}

.fix-area {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  width: 100%;
  height: 516px;
}

.divide-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-8);
}
.divide-area .sect_01,
.divide-area .sect_02 {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-5);
  height: 100%;
}
.divide-area .sect_01 {
  position: relative;
}
.divide-area .sect_01::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(var(--krds-spacer-4) * -1);
  width: 1px;
  height: 100%;
  background: var(--krds-gray-30);
}

/* ************** 00.업무포탈 ************** */
.tree-area {
  width: 100%;
  height: 100%;
  border: 1px solid var(--krds-gray-30);
  font-size: 14px;
}

.editor-area {
  width: 100%;
  height: 44vh;
  background: #eee;
}

.chip-list-box .chip-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--krds-spacer-3);
  padding: var(--krds-spacer-6) var(--krds-spacer-4);
  border-bottom: 1px solid var(--krds-gray-30);
  background: var(--krds-gray-5);
}
.chip-list-box .chip-list .item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--krds-white);
  border: 0.1rem solid var(--krds-gray-30);
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.08);
  color: var(--krds-gray-90);
  font-size: var(--krds-fz-detail-md);
  border-radius: var(--krds-rd-4);
  width: 80px;
  height: 70px;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.chip-list-box .chip-list .item .num {
  position: absolute;
  top: -10px;
  right: -10px;
  display: inline-block;
  width: 25px;
  height: 25px;
  line-height: 23px;
  background: var(--krds-gray-5);
  border: 1px solid var(--krds-gray-30);
  color: var(--krds-gray-50);
  border-radius: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  overflow: hidden;
}
.chip-list-box .chip-list .item.active {
  background: var(--krds-primary);
  color: var(--krds-white);
  border: 1px solid var(--krds-primary);
}
.chip-list-box .chip-list .item.active .num {
  background: var(--krds-primary-5);
  border: 1px solid var(--krds-primary-30);
  color: var(--krds-primary);
}
.chip-list-box .chip-list .item:hover {
  background: var(--krds-primary);
  border: 1px solid var(--krds-primary);
  color: var(--krds-white) !important;
}
.chip-list-box .chip-list .item:hover .num {
  background: var(--krds-primary-5);
  border: 1px solid var(--krds-primary-30);
  color: var(--krds-primary);
}

.folder-area + .chip-cont {
  height: 52vh;
}

.folder-area.collapsed + .chip-cont {
  height: 65vh !important;
}

.chip-cont .item {
  display: none;
}

.chip-cont .item.active {
  display: block;
}

.add-user-form {
  width: 100%;
  height: var(--krds-input-h-sm);
  border: 1px solid var(--krds-gray-30);
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100% !important;
  padding: 3px 6px;
}
.add-user-form .btn-chip-outline {
  height: 20px !important;
  padding: 0 10px !important;
  border-radius: var(--krds-btnChipOutline-rd-lg);
  font-size: 14px;
  background-color: var(--krds-gray-10);
  gap: 0px !important;
}
.add-user-form .btn-chip-outline .chip-val {
  padding-right: 5px;
}
.add-user-form .btn-chip-outline button {
  opacity: 0.5;
}
.add-user-form .btn-chip-outline button:hover {
  opacity: 1;
}

.btn-ico.ico-add-user {
  background-image: url(../images/components/ico_add_user.png);
}

.btn-chip-outline .btn-edit {
  width: 14px;
  height: 14px;
  background: url(../images/components/ico_edit.png) no-repeat 0 0;
  background-size: contain;
}

.btn-chip-outline .btn-del-1 {
  width: 14px;
  height: 14px;
  background: url(../images/components/ico_del1.png) no-repeat 0 0;
  background-size: contain;
}

/* ************** 01.사회공헌 ************** */
.sign-area {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  align-items: center;
  width: 100% !important;
  margin: 0 auto;
  border-radius: var(--krds-rd-4);
  padding: var(--krds-spacer-3);
}
.sign-area button.sign:hover {
  text-decoration: underline;
}
.sign-area .fund-chk {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  padding: var(--krds-spacer-3) 0;
}

.mileage-box {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  border-top: 1px solid var(--krds-gray-30);
  border-left: 1px solid var(--krds-gray-30);
}
.mileage-box .chart-legend {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: var(--krds-spacer-3);
  padding-bottom: var(--krds-spacer-3);
}
.mileage-box .chart-legend .legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
}
.mileage-box .chart-legend .legend .lb-chip {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.mileage-box .part {
  position: relative;
  width: auto;
  height: auto;
  min-height: 13vh;
  background: url(../images/sub/sub_01_bg-logo.png);
  background-position: left;
  background-repeat: no-repeat;
  border-right: 1px solid var(--krds-gray-30);
  border-bottom: 1px solid var(--krds-gray-30);
}
.mileage-box .part.part-1 {
  width: 100% !important;
  height: 25vh;
  background-size: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mileage-box .part.part-1 .name {
  font-size: var(--krds-fz-body-lg);
  font-weight: bold;
}
.mileage-box .part.part-1 .chart {
  width: 60%;
}
.mileage-box .part.part-1 .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-3);
  font-size: var(--krds-fz-body-sm);
  padding-top: var(--krds-spacer-5);
}
.mileage-box .part.part-1 .info .lb {
  border: 1px solid var(--krds-gray-30);
  border-radius: 50px;
  padding: 2px 8px;
  font-size: 14px;
}
.mileage-box .part.part-2 {
  width: 25%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--krds-spacer-8);
}
.mileage-box .part.part-2 .icon {
  width: 40px;
  height: 40px;
}
.mileage-box .part.part-2 .info {
  width: 60%;
  display: flex;
  flex-direction: column;
}
.mileage-box .part.part-2 .info .lb {
  font-size: var(--krds-fz-body-sm);
  font-weight: bold;
  color: var(--krds-gray-50);
}
.mileage-box .part.part-2 .info .point {
  font-size: var(--krds-fz-title-md);
  font-weight: bold;
  color: var(--krds-gray-50);
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end;
  gap: var(--krds-spacer-2);
}
.mileage-box .part.part-2 .info .point .num {
  color: var(--krds-gray-90);
  font-size: var(--krds-fz-body-lg);
}
.mileage-box .part.part-2 .info .point .unit {
  font-size: var(--krds-fz-body-lg);
}
.mileage-box .part.grade-green .icon {
  background: url(../images/sub/sub_01_grade_green.png);
  background-position: center;
  background-size: contain;
}
.mileage-box .part.grade-green .num {
  color: var(--krds-success-60) !important;
}
.mileage-box .part.grade-green .num::after {
  content: "green";
}
.mileage-box .part.grade-red .icon {
  background: url(../images/sub/sub_01_grade_red.png);
  background-position: center;
  background-size: contain;
}
.mileage-box .part.grade-red .num {
  color: var(--krds-danger-60) !important;
  text-transform: uppercase;
}
.mileage-box .part.grade-red .num::after {
  content: "red";
}
.mileage-box .part.grade-yellow .icon {
  background: url(../images/sub/sub_01_grade_yellow.png);
  background-position: center;
  background-size: contain;
}
.mileage-box .part.grade-yellow .num {
  color: var(--krds-warning-60) !important;
  text-transform: uppercase;
}
.mileage-box .part.grade-yellow .num::after {
  content: "yellow";
}
.mileage-box .part.state-off .icon {
  background: url(../images/sub/sub_01_state_off.png);
  background-position: center;
  background-size: contain;
}
.mileage-box .part.state-off .num {
  text-transform: uppercase;
}
.mileage-box .part.state-on .icon {
  background: url(../images/sub/sub_01_state_on.png);
  background-position: center;
  background-size: contain;
}
.mileage-box .part.state-on .num {
  text-transform: uppercase;
}

/* ************** 03.자원예약 ************** */
.room-list-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: var(--krds-spacer-5);
  margin: 0 10px 10px 0;
}
.room-list-box .item {
  display: flex;
  flex-direction: column;
  border-radius: var(--krds-rd-6);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.room-list-box .item .img-box {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}
.room-list-box .item .img-box img {
  display: block;
  width: 100%;
  height: 100%;
}
.room-list-box .item .img-box::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
  color: white;
}
.room-list-box .item .img-box .room-num {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--krds-fz-detail-lg);
  color: white;
  white-space: nowrap;
}
.room-list-box .item .img-box button {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.room-list-box .item .room-info {
  padding: var(--krds-spacer-5);
  background: var(--krds-white);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.room-list-box .item .room-info .detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--krds-spacer-2);
}
.room-list-box .item .room-info .detail .detail-label {
  font-size: var(--krds-fz-detail-sm);
  font-weight: bold;
  color: var(--krds-gray-50);
}
.room-list-box .item .room-info .detail .detail-cont {
  font-size: var(--krds-fz-detail-md);
  font-weight: bold;
}
.room-list-box .item .room-info .detail .detail-cont.allow {
  color: var(--krds-success-60);
}
.room-list-box .item .room-info .detail .detail-cont.deny {
  color: var(--krds-danger-60);
}

.calendar-area .sm-cal {
  width: 100%;
  display: flex;
}
.calendar-area .sm-cal table th,
.calendar-area .sm-cal table td {
  background-color: white !important;
  height: 15px !important;
  line-height: inherit;
  font-size: 12px !important;
}
.calendar-area .sm-cal table tr:first-child td {
  border-top: 0px !important;
}
.calendar-area .sm-cal .ui-datepicker-calendar > tbody > tr > td {
  padding: 0px !important;
}
.calendar-area .sm-cal .ui-state-highlight,
.calendar-area .sm-cal .ui-widget-content .ui-state-highlight,
.calendar-area .sm-cal .ui-widget-header .ui-state-highlight {
  padding-top: 0px;
  padding-bottom: 0px;
}

@media (max-width: 1440px) {
  /* ************** 03.자원예약 :: 자원정보관리 ************** */
  .room-list-box {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 1280px) {
  /* ************** 공통 ************** */
  .divide-area {
    flex-direction: column !important;
  }
  .divide-area .sect_01,
  .divide-area .sect_02 {
    width: 100% !important;
  }
  .divide-area .sect_01::after {
    width: 0px !important;
  }
  .divide-area .fix-area {
    height: auto !important;
  }
  [data-popup=true] .divide-area {
    flex-direction: row !important;
  }
  [data-popup=true] .divide-area .sect_01,
  [data-popup=true] .divide-area .sect_02 {
    width: auto;
  }
  [data-popup=true] .divide-area .sect_01::after {
    width: 1px !important;
  }
  /* **************  03.자원예약 :: 자원정보관리 ************** */
  .room-list-box {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 1024px) {
  .mileage-box .part-2 {
    width: 50% !important;
  }
  /* **************  03.자원예약 :: 자원정보관리 ************** */
  .room-list-box {
    grid-template-columns: 1fr 1fr;
  }
  /* **************  03.자원예약 :: 자원예약현황 ************** */
  .calendar-area .side-info {
    width: 25% !important;
  }
  .calendar-area .calendar-container {
    width: 75% !important;
  }

  /* //자원예약_기타부대시설_이미지 반응형 */
  .img-list .item {
    width: 100% !important;
  }
 /* //자원예약_기타부대시설_이미지 반응형 */
}

/* ************** 04.숙소관리 ************** */
.consent-form-wrap .top-info {
  margin-bottom: var(--krds-spacer-5);
}
.consent-form-wrap .top-info-2 {
  margin-top: var(--krds-spacer-8);
  margin-bottom: var(--krds-spacer-8);
  width: 100%;
  background: var(--krds-gray-10);
  display: inline-block;
  padding: var(--krds-spacer-3) var(--krds-spacer-4);
  border-radius: var(--krds-rd-6);
}
.consent-form-wrap .top-info-2 .chk-area {
  font-weight: bold;
}
.consent-form-wrap .top-info-2 .chk-area:hover {
  text-decoration: underline;
}
.consent-form-wrap .top-info-2 label {
  font-size: 1.6rem !important;
}
.consent-form-wrap .consent-form {
  border: 1px solid var(--krds-gray-30);
  padding-top: var(--krds-spacer-5);
  padding-left: 0;
  padding-right: var(--krds-spacer-5);
  padding-bottom: var(--krds-spacer-5);
  border-radius: var(--krds-rd-6);
}
.consent-form-wrap .hint {
  color: var(--krds-primary);
  font-size: var(--krds-fz-body-xsm);
}
.consent-form-wrap .info-text {
  margin-top: var(--krds-spacer-3);
}
.consent-form-wrap .info-text:first-child {
  margin-top: 0px;
}
.consent-form-wrap .info-text .sub-txt-2 {
  padding-left: 35px;
  margin-bottom: var(--krds-spacer-1);
  color: var(--krds-gray-70);
  font-weight: bold;
}
.consent-form-wrap .info-text .tb-txt {
  padding-left: 35px;
  margin-top: 10px;
}
.consent-form-wrap .info-text .consent-checkbox-item {
  margin-top: var(--krds-spacer-5);
}
.consent-form-wrap .info-text .consent-checkbox-item .consent-chkbox {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
  margin-left: 35px;
  border: 1px solid var(--krds-gray-30);
  padding: var(--krds-spacer-3);
  border-radius: var(--krds-rd-4);
  margin-top: 10px;
}
.consent-form-wrap .info-text .consent-checkbox-item .consent-chkbox .chk-area {
  font-weight: bold;
  color: #555;
}
.consent-form-wrap .info-text .consent-checkbox-item .consent-chkbox .chk-area:hover {
  text-decoration: underline;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* ************** 01.메인 ************** */
@keyframes animation2 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}
[data-page=user] .container.user {
  background-image: url(../images/main/user_main_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-page=user] .container.user .main-area {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  gap: var(--krds-spacer-8);
}
[data-page=user] .container.user .main-area h2 {
  color: var(--krds-white);
}
[data-page=user] .container.user .main-area .menu-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01, [data-page=user] .container.user .main-area .menu-area .menu-row-02 {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01, [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02, [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01, [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02 {
  background: var(--krds-white);
  border-radius: var(--krds-rd-6);
  padding: var(--krds-spacer-8);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 {
  width: 70%;
  margin: 0 auto;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  background-image: url(../images/main/user_main_request.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 button {
  max-width: 200px;
  width: 180px;
  border-radius: 30px;
  padding: var(--krds-spacer-5);
  margin-top: var(--krds-spacer-6);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 button img {
  animation: animation2 1.4s infinite;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 button:hover {
  background: var(--krds-primary) !important;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 button:hover img {
  filter: brightness(0) invert(1);
  animation: none;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  flex-wrap: wrap;
  padding-top: var(--krds-spacer-4);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-2);
  justify-content: center;
  align-items: center;
  min-width: 100px;
  height: 90px;
  padding: 0 var(--krds-spacer-3);
  background: var(--krds-primary-5);
  border-radius: var(--krds-rd-6);
  border: 1px solid transparent;
  cursor: pointer;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn span {
  color: var(--krds-gray-70);
  font-weight: bold;
  white-space: nowrap;
  font-size: 14px;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn:hover {
  background: var(--krds-white);
  border: 1px solid var(--krds-primary-60);
  transform: translateY(-10px);
  transition: transform 0.15s ease-in;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn:hover span {
  color: var(--krds-gray-90);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02 {
  width: 30%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../images/main/user_main_guide.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02 > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: var(--krds-white);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02 > div p {
  opacity: 0.7;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--krds-black);
  opacity: 0;
  border-radius: var(--krds-rd-6);
  transition: all 0.15s ease-in;
  z-index: 1;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02:hover::after {
  opacity: 0.3;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 {
  width: 70%;
  margin: 0 auto;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 {
  width: 70%;
  padding: 0px !important;
  display: flex;
  flex-direction: row;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .tit {
  width: 30%;
  background: var(--krds-primary-70);
  background-image: url(../images/sub/sub_01_bg-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: -30px 100%;
  border-top-left-radius: var(--krds-rd-6);
  border-bottom-left-radius: var(--krds-rd-6);
  border: 1px solid var(--krds-primary-70);
  box-sizing: border-box;
  padding: var(--krds-spacer-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--krds-spacer-2);
  color: var(--krds-white);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .tit span {
  opacity: 0.6;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .tit h3 {
  margin-bottom: var(--krds-spacer-8);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--krds-spacer-3);
  height: 150px;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area > div span {
  font-weight: bold;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area > div p {
  font-size: 12px;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02 {
  width: 30%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--krds-primary-80);
  background-image: url(../images/sub/sub_01_bg-logo.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: -50px 100%;
  cursor: pointer;
  color: var(--krds-white);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02 > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: var(--krds-white);
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--krds-black);
  opacity: 0;
  border-radius: var(--krds-rd-6);
  transition: all 0.15s ease-in;
  z-index: 1;
}
[data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02:hover::after {
  opacity: 0.3;
}

/* ************** 02.청사방문 ************** */
/* 사이드 메뉴 닫았을 때의 너비 */
[data-device=pc] .user-menu-wrap {
  width: 300px !important; /* 사이드 메뉴가 열릴 때 */
}
[data-device=pc] .user-menu-wrap > * {
  visibility: visible;
}

[data-device=mobile] .user-menu-wrap {
  width: 0 !important;
}
[data-device=mobile] .user-menu-wrap > * {
  visibility: hidden;
}

[data-page=user] .user-menu-wrap.open {
  width: 300px !important; /* 사이드 메뉴가 열릴 때 */
}
[data-page=user] .user-menu-wrap.open > * {
  visibility: visible;
}

[data-page=user] .user-menu-btn {
  display: none;
}

.user-menu-wrap {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--krds-gray-10);
  overflow: hidden;
  z-index: 999;
}
.user-menu-wrap .top-location {
  width: 100%;
  height: 80px;
  background: var(--krds-primary-70);
  background-image: url(../images/sub/sub_01_bg-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: var(--krds-fz-title-lg);
  color: var(--krds-white);
  font-weight: bold;
}
.user-menu-wrap .user-menu-nav > li {
  width: 100%;
  border-top: 1px solid var(--krds-gray-30);
}
.user-menu-wrap .user-menu-nav > li:first-child {
  border-top: 0px;
}
.user-menu-wrap .user-menu-nav > li > * {
  outline: 0px;
  outline-offset: 0px;
}
.user-menu-wrap .user-menu-nav > li > a {
  position: relative;
  padding: var(--krds-spacer-4);
  display: block;
  background: var(--krds-white);
}
.user-menu-wrap .user-menu-nav > li > a::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: #fff;
  border-radius: 100%;
}
.user-menu-wrap .user-menu-nav > li:hover > a {
  background: var(--krds-primary);
  color: var(--krds-white);
}
.user-menu-wrap .user-menu-nav > li.active > a {
  background: var(--krds-primary);
  color: var(--krds-white);
}

.top-info {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--krds-spacer-2);
  background: var(--krds-information-5);
  padding: var(--krds-spacer-2) var(--krds-spacer-4);
  border-radius: var(--krds-rd-6);
  font-size: var(--krds-fz-body-sm);
}

.agreement-area {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
}
.agreement-area .form-area {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-6);
}
.agreement-area .info-table-cont {
  border-top: 1px solid var(--krds-gray-30);
  border-bottom: 1px solid var(--krds-gray-30);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-4);
  padding: var(--krds-spacer-4);
  background: var(--krds-gray-5);
}
.agreement-area .info-table-cont .dl {
  display: flex;
  flex-direction: row;
}
.agreement-area .info-table-cont .dl .dt {
  width: 120px;
  font-weight: bold;
  display: inline-block;
}
.agreement-area .info-table-cont .dl .dd {
  width: 92%;
  display: inline-block;
}
.agreement-area .form-group {
  word-break: keep-all;
}
.agreement-area .form-group .form-detail {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-2);
  width: 100%;
  height: 20vh;
  border: 1px solid var(--krds-gray-30);
  padding: var(--krds-spacer-4) var(--krds-spacer-6);
  border-radius: var(--krds-rd-10);
}
.agreement-area .form-group .form-detail .tit {
  font-size: var(--krds-fz-body-md);
}
.agreement-area .form-group .form-detail dt {
  font-weight: bold;
  padding-top: var(--krds-spacer-2);
}
.agreement-area .form-group .form-detail dt:nth-of-type(1) {
  padding-top: 0px !important;
}
.agreement-area .form-group .chk-area {
  padding-top: var(--krds-spacer-8);
  padding-bottom: var(--krds-spacer-2);
  font-weight: bold;
}
.agreement-area .form-group .chk-area:hover {
  text-decoration: underline;
}
.agreement-area .hint {
  color: var(--krds-primary);
  font-size: var(--krds-fz-body-xsm);
}

.reserve-area {
  width: 100%;
  border: 1px solid var(--krds-gray-30);
  background: var(--krds-white);
  border-radius: var(--krds-rd-12);
  padding: var(--krds-spacer-8);
}
.reserve-area .table-title {
  padding-bottom: var(--krds-spacer-6);
}
.reserve-area .table-title .hint {
  font-size: var(--krds-fz-body-sm);
  font-weight: normal;
  color: var(--krds-danger);
}
.reserve-area .form-box {
  width: 100%;
  max-width: 650px;
  border: 0px solid var(--krds-gray-30);
  background: transparent;
  padding: 0 !important;
}
.reserve-area .form-box .form-group {
  padding-bottom: var(--krds-spacer-2);
}
.reserve-area .form-box .form-tit {
  font-size: var(--krds-fz-body-sm);
  font-weight: bold;
  color: var(--krds-gray-70);
}

.tit-box .sub-txt {
  position: relative;
  color: var(--krds-gray-50);
  padding-left: 3px;
}

.info-text {
  width: 65%;
  padding-bottom: var(--krds-spacer-3);
}
.info-text .sub-title {
  position: relative;
  padding-left: 20px;
  font-size: var(--krds-fz-title-md);
  font-weight: bold;
  margin-bottom: var(--krds-spacer-1);
  color: var(--krds-gray-80);
}
.info-text .sub-title::before {
  content: "◈";
  padding-right: 8px;
  color: var(--krds-gray-70);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.info-text .sub-txt, .info-text .sub-txt-ul {
  padding-left: 35px;
  margin-bottom: var(--krds-spacer-1);
  color: var(--krds-gray-70);
}
.info-text .sub-notice {
  font-weight: bold;
  padding-left: 25px;
  color: var(--krds-primary);
  margin-bottom: var(--krds-spacer-2);
}
.info-text .sub-txt {
  position: relative;
}
.info-text .sub-txt::before {
  content: "■";
  padding-right: 8px;
  font-size: 8px;
  color: var(--krds-gray-50);
}
.info-text .sub-txt.text-point {
  color: var(--krds-point) !important;
  font-weight: bold;
}
.info-text .sub-txt-ul li {
  position: relative;
  padding-left: 5px;
}
.info-text .sub-txt-ul li::before {
  content: "- ";
}
.info-text .step-area {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  justify-content: center;
  align-items: center;
  margin-left: 35px;
  padding: 3rem 2rem;
  border: 1.5px solid var(--krds-primary-30);
  border-radius: var(--krds-rd-6);
}
.info-text .step-area > div {
  max-width: 15vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.info-text .step-area > div img {
  width: 50px;
  height: 50px;
}
/* 자원예약_이용요금_테이블 반응형 */
.user-info-table {
  margin-left: 20px;
  border-top: 1px solid var(--krds-gray-90);
  width: calc(100% - 20px);
  min-height: auto !important;
}
/* //자원예약_이용요금_테이블 반응형 */

.user-info-table th {
  font-weight: bold;
  border-right: 1px solid var(--krds-gray-30);
  border-top: 1px solid var(--krds-gray-30) !important;
}
.user-info-table th:last-child {
  border-right: 0px;
}
.user-info-table td {
  border-right: 1px solid var(--krds-gray-30);
}
.user-info-table .tit {
  background: var(--krds-gray-5) !important;
}

.item-list {
  display: flex;
  flex-direction: row;
  gap: var(--krds-spacer-3);
  padding-left: 30px;
}

.img-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--krds-spacer-3);
  padding-left: 30px;
}
.img-list .item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--krds-spacer-2);
}

.login-area {
  width: 100%;
  border: 1px solid var(--krds-gray-30);
  background: var(--krds-gray-5);
  border-radius: var(--krds-rd-6);
  padding: var(--krds-spacer-8);
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--krds-spacer-4);
  background-image: url(../images/sub/sub_01_bg-logo.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
}
.login-area .img-box {
  width: 100%;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-area .img-box img {
  width: 110px;
}
.login-area .txt-box {
  border-bottom: 1px solid var(--krds-gray-30);
  padding-bottom: var(--krds-spacer-3);
}
.login-area button {
  min-width: 200px !important;
  max-width: 200px !important;
  display: block;
}

.notice-box:hover {
  text-decoration: underline;
  cursor: pointer;
}

.notice-box .tooltip {
  max-width: 50vw;
}

@media (max-width: 1440px) {
  [data-page=user] .container.user .main-area .menu-area .menu-row-01,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 {
    width: 90%;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list {
    flex-wrap: wrap;
  }
}
@media (max-width: 1280px) {
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area img {
    display: inline-block;
    width: 40px;
  }
}
@media (max-width: 1024px) {
  [data-page=user] .container.user {
    height: auto !important;
  }
  [data-page=user] .container.user .main-area {
    width: 100%;
    height: auto;
    gap: var(--krds-spacer-5);
    padding: var(--krds-spacer-5) 0;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 {
    width: 100%;
    height: auto;
    flex-direction: column !important;
    align-items: center;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 {
    width: 80%;
    height: auto;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02 {
    width: 80%;
    height: auto;
    min-height: 110px;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02 > div,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02 > div {
    flex-direction: row !important;
    gap: var(--krds-spacer-5);
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn {
    width: 20%;
  }
  .user-menu-wrap {
    order: 2 !important;
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    transition: width 0.3s ease-in-out;
  }
  [data-page=user] .user-menu-btn {
    display: block;
  }
  [data-page=user] .user-menu-btn img {
    filter: grayscale(100%) brightness(0);
  }
  .info-text {
    width: 100%;
  }
    /* 모달 반응형 */
    [data-page=user] .modal .modal-dialog{
      width: 85vw !important;
    }
    /* //모달 반응형 */

     
}
@media (max-width: 768px) {
  /* 사이드 메뉴 닫았을 때의 너비 */
  [data-page=user] .user-menu-wrap.open {
    width: 100vw !important; /* 사이드 메뉴가 열릴 때 */
  }
  [data-page=user] .user-menu-wrap.open > * {
    visibility: visible;
  }
  .top-info > button {
    display: none !important;
  }
  [data-page=user] .container.user {
    height: auto !important;
  }
  [data-page=user] .container.user .main-area .menu-area {
    height: auto;
    padding: var(--krds-spacer-5) 0;
  }
  [data-page=user] .container.user .main-area h2 {
    width: 80%;
    text-align: center;
    display: block;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02 > div > img {
    display: none;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .tit h3 {
    margin-bottom: 0;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 {
    width: 80%;
    height: auto;
    padding: 0px !important;
    display: flex;
    flex-direction: column !important;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .tit {
    width: 100%;
    border-radius: 0 !important;
    align-items: center;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area {
    flex-direction: column !important;
    height: auto;
    padding: var(--krds-spacer-5);
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area > .img-box {
    transform: rotate(90deg);
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 {
    width: 80%;
    height: auto;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02,
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-02 {
    width: 80%;
    height: auto;
    min-height: 110px;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-02 .row-item-01 .step-area > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--krds-spacer-3);
    height: auto;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list {
    justify-content: center;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn {
    width: 100%;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 .menu-list .menu-btn:hover {
    transform: none;
  }
  .reserve-area .form-box .form-group .form-detail {
    height: 20vh !important;
  }
  .reserve-area .form-box .form-group select {
    width: 100% !important;
  }
  .reserve-area .form-box .form-group .form-conts {
    width: 100% !important;
    flex-wrap: wrap;
  }
  .reserve-area .form-box .form-group .form-conts .sch-input {
    width: 100%;
  }
  .reserve-area .form-box .form-group .form-conts span {
    display: inline-block;
    width: 100%;
  }
  .reserve-area .form-box .form-group .form-conts input {
    width: 100% !important;
  }
  .reserve-area .form-box .form-group .form-conts select {
    width: 100% !important;
  }
  .reserve-area .form-box .form-group .file-upload-form .top-tit {
    flex-direction: column !important;
    align-items: start !important;
    gap: var(--krds-spacer-3);
  }
  .reserve-area .form-box .form-group .responsive {
    flex-wrap: nowrap;
  }
  .reserve-area .form-box .form-group .responsive span {
    display: inline-block;
    width: auto !important;
  }
  .reserve-area .form-box .form-group .responsive input {
    width: 100% !important;
  }
  .info-top-box .info-top-tb .tr .td {
    flex-direction: column !important;
  }
  .info-top-box .info-top-tb .tr .td .label {
    min-width: 140px;
    width: 100%;
    height: 100%;
    padding: var(--krds-spacer-3) 0;
    text-indent: var(--krds-spacer-3);
  }
  .info-top-box .info-top-tb .tr .td .btn-area-right {
    padding-top: var(--krds-spacer-3);
    padding-bottom: var(--krds-spacer-3);
  }
  .info-text .step-area {
    flex-direction: column !important;
  }
  .info-text .step-area .img-box {
    transform: rotate(90deg);
  }
  .info-text .step-area > div {
    max-width: 100% !important;
  }
}
@media (max-width: 480px) {
  [data-page=user] .container.user .main-area h2 {
    font-size: 2rem;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 {
    background: var(--krds-primary-80);
    background-image: url(../images/sub/sub_01_bg-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: -30px 100%;
    color: #fff;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-02 > div > p {
    display: none;
  }
  [data-page=user] .container.user .main-area .menu-area .menu-row-01 .row-item-01 > div {
    align-items: center;
  }
}
.error-box {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 81vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.error-box .error-img {
  width: 400px;
  height: 280px;
  overflow: hidden;
}

/* *******************************************************
* 파일이름 : main.css
* 파일설명 : import 통합 파일 
            (HTML파일에 이 main.css 파일만 단독으로 Link 해준다.)

=== 이 CSS 파일은 담당자만 수정, 추가, 삭제할 수 있습니다. ===

* 최종업데이트 : 2025-04-09
******************************************************** */
/* *****************************
* scss 전역변수 및 mixin
******************************** */
/* 로그인 */
/* ---------- 사용자_1_로그인 ------------- */
.login_bg {
  width: 100%;
  height: 100%;
  background: var(--krds-gray-5);
  overflow: hidden;
}

.login_box_wrap {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 23vw;
  height: 100%;
  margin: 0 auto;
}
.login_box_wrap .logo {
  padding-bottom: var(--krds-spacer-5);
  text-align: center;
}
.login_box_wrap .login_box {
  width: 100%;
  height: auto;
  background: var(--krds-white);
  border-radius: var(--krds-rd-12);
  padding: var(--krds-spacer-15);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.login_box_wrap .login_box h1 {
  padding-bottom: var(--krds-spacer-11);
}
.login_box_wrap .login_box .fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--krds-spacer-3);
}
.login_box_wrap .login_box .fieldset .login-form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--krds-spacer-2);
}
.login_box_wrap .login_box .fieldset .login-form-group .form-tit {
  color: var(--krds-gray-60);
  font-weight: 600;
}
.login_box_wrap .login_box .fieldset .link-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: end;
}
.login_box_wrap .login_box .fieldset .link-group li {
  position: relative;
}
.login_box_wrap .login_box .fieldset .link-group li::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: var(--krds-gray-30);
}
.login_box_wrap .login_box .fieldset .link-group li:last-child::after {
  display: none;
}
.login_box_wrap .login_box .fieldset .link-group li a {
  font-weight: initial !important;
}
.login_box_wrap .login_box .fieldset .link-group li a:hover {
  background: var(--krds-primary-5);
  color: var(--krds-primary);
}

/* ---------- 사용자_1_로그인 끝 ------------- */
/*------MYPAGE 청사방문--------*/
/* hoverText */
.hovertext {
  position: relative;
  overflow: visible !important;
  background-color:#fff;
}

.hovertext::before {
  content: attr(data-hover);
  visibility: visible;
  opacity: 0;
  width: auto;
  max-width: 80vw;
  min-width: 100px;
  padding: 2px;
  color: #fff;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  z-index: 1000;
  left: 15%;
  top: 98%;
  background-color:#fff;
}

.hovertext:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
  border: 1px solid #848484;
  color: #000;
  font-size: 1.3rem;
}

.font-size-xsm {
	font-size : 1.4rem;
}

.font-size-sm {
	font-size : 1.5rem;
}

.font-size-md {
	font-size : 1.6rem;
}

.font-size-lg {
	font-size : 1.8rem;
}