@charset "UTF-8";
/*********************
*   version : v3
*   수정불가 (수정이 필요할시 common.css에 override 형식으로 수정)
**********************/

/* 기본요소(form & 텍스트 / 버튼 & 태그 / 테이블 / 탭 / 팝업 / 기타(안내메시지, 메시지박스)) css */

@import 'root.css';
@import 'reset.css';
@import url('../fonts/pretendard/pretendard-gov-subset.css');
@import url('../lib/xeicon/xeicon.min.css');


/*** skip ***/
#skipnavi {overflow: hidden;position: relative;width: 100%;z-index: 2;}
#skipnavi a {display: block;overflow: hidden;width: 0rem;height: 0rem;margin: 0 -0.1rem -0.1rem 0;font-size: 0;line-height: 0;text-align: center;}
#skipnavi:focus {overflow: hidden;height: 10rem;font-size: 1.4rem;font-weight: 700;background: #0d2f51;}
#skipnavi a:focus, #skipnavi a:hover, #skipnavi a:active {width: auto;height: 3rem;margin: 0;padding: 0.8rem 0 0 1.5rem;font-size: 1.4rem;font-weight: bold;line-height: 1;color: #fff;background: #0d2f51;}



/*** form ***/
/* select, input, textarea */
input[type=text], input[type=tel], input[type=password], input[type=file], input[type=number], input[type=email], input[type=date], input[type=search], textarea, a {    -webkit-tap-highlight-color: transparent;}
select,
input:not([type="checkbox"], [type="radio"]),
textarea {width: auto;max-width: 100%;height: 4.8rem;border: 1px solid var(--bdr);border-radius: 0.8rem;font-family: inherit;font-size: 1.7rem;line-height: inherit;color: var(--dark);letter-spacing: -0.03em;transition: 0.1s color, 0.1s border-color;}
input:not([type="checkbox"], [type="radio"]) {padding: 0 1.6rem;}
textarea {padding: 1.6rem; display: block;width: 100%;min-height: 15rem;height: auto;}
select::placeholder,
input::placeholder,
textarea::placeholder {color: var(--plholder-font);}
select:focus,
input:focus,
textarea:focus {border: 2px solid var(--bdr-focus);transition: 0.1s color, 0.1s border-color;}
input:focus {padding:0 1.5rem;}
textarea:focus {padding: 1.5rem;}
select:focus {padding: 0 3.1rem 0 1.5rem; background-position: right 1.1rem center;}
select {min-width: 13rem;padding: 0 3.2rem 0 1.6rem;background: #fff url(../images/icon/i_sel.svg) no-repeat right 1.2rem center / 1.3rem;appearance: none; position: relative;}
select:not(:disabled) {cursor: pointer;}
input[type="password"] {letter-spacing: 0;}
input[readonly],
textarea[readonly] {background-color: var(--disabled-bg); color: var(--disabled-font); border-color: var(--disabled-bd);}
select[disabled],
input[disabled],
textarea[disabled] {color: var(--disabled-font2);background-color: var(--disabled-bg);  border-color: var(--disabled-bd);}
select[disabled] {opacity: 1;}
select.auto,
input.auto {width: auto !important;}
select.err,
input:not([type="checkbox"], [type="radio"]).err,
textarea.err {border: 2px solid var(--err-bdr); padding:0 1.5rem;}
select.err {padding: 0 3.1rem 0 1.5rem;}
textarea.err {padding: 1.5rem;}

/* custom select */
.selectbox {display: inline-block;position: relative;}
.selectbox .selected {display: inline-block;min-width: 13rem;width: auto;max-width: 100%;height: 4.8rem;padding: 0 3.2rem 0 1.6rem;border: 1px solid var(--bdr);border-radius: 0.8rem;font-family: inherit;font-size: 1.7rem;line-height: 4.6rem;color: var(--dark);letter-spacing: -0.03em;background: #fff;transition: 0.1s color, 0.1s border-color;}
.selectbox .selected::after {content: '';display: block;position: absolute;right: 1.2rem;top: 0;width: 1.3rem;height: 100%;background: url(../images/icon/i_sel.svg) no-repeat center / 1.3rem; transition: all 0.1s;}
.selectbox.on .selected::after {transform: rotate(180deg);}
.selectbox.on .selected,
.selectbox.err .selected {border-color: var(--bdr-focus); border-width: 2px; padding: 0 3.1rem 0 1.5rem;}
.selectbox:not(.disabled, .err) .selected:focus-visible {outline-color: var(--bdr-focus);}
.selectbox .selectoptions {width: 100%;display: none;position: absolute;left: 0rem;top: 3.6rem;padding: 0.5rem 0 0.3rem;border: 2px solid var(--bdr-focus);border-top: 0;border-radius: 0rem 0rem 0.8rem 0.8rem;background: #fff;z-index: 99;}
.selectbox .selectoptions .option a {display: block;width: 100%;height: 100%;padding: 0.6rem 1.6rem;font-size: 1.6rem;color: var(--dark);}
.selectbox .selectoptions .option a:hover,
.selectbox .selectoptions .option.on {font-weight: bold;text-decoration: underline;}
.selectbox.disabled .selected {color: var(--disabled-font2);background-color: var(--disabled-bg);  border-color: var(--disabled-bd); cursor: default;}
.selectbox.err .selected,
.selectbox.err .selectoptions {border: 2px solid var(--err-bdr);}
.selectbox.err .selectoptions {border-top: 0;}

/* multi select */
.multiSelect {display: inline-block;position: relative;width: 18rem;}
.multiSelect .multi_text {display: inline-block;min-width: 13rem;width: 18rem;max-width: 18rem;height: 4.8rem;padding: 1.2rem 3.2rem 0 1.6rem;border: 1px solid var(--bdr);border-radius: 0.8rem;font-family: inherit;font-size: 1.7rem;color: var(--dark);letter-spacing: -0.03em;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: #fff;transition: 0.1s color, 0.1s border-color;}
.multiSelect .multi_text::after {content: '';display: block;position: absolute;right: 1.2rem;top: 0;width: 1.3rem;height: calc(100% - 0.6rem);background: url(../images/icon/i_sel.svg) no-repeat center / 1.3rem; transition: all 0.1s;}
.multiSelect.on .multi_text {border-color: var(--bdr-focus); border-width: 2px; padding: 1.1rem 3.1rem 0 1.5rem;}
.multiSelect.on .multi_text::after {transform: rotate(180deg);}
.multiSelect .multi_option {display: none;position: absolute;left: 0rem;top: 4.1rem;width: 100%;padding: 0.5rem 0 0.3rem;border: 2px solid var(--bdr-focus);border-top: 0;border-radius: 0rem 0rem 0.8rem 0.8rem;background: #fff;z-index: 99;}
.multiSelect .multi_option li {padding: 0.6rem 1.2rem;}
.multiSelect .multi_option li label {font-size: 1.6rem;color: var(--dark);word-wrap: break-word;word-break: break-all;cursor: pointer;}
.multiSelect .multi_option li label:hover,
.multiSelect .multi_option li input:focus ~ label {font-weight: bold;text-decoration: underline;}
.multiSelect .multi_text span[class^="multi_group"] {position: relative;margin-right: 0.7rem;padding-right: 0.2rem;}
.multiSelect .multi_text span[class^="multi_group"]:last-child {margin-right: 0;padding-right: 0;}
.multiSelect .multi_text span[class^="multi_group"]::after {content: ',';}
.multiSelect .multi_text span[class^="multi_group"]:last-child::after {content: '';}

/* input, select size */
input:not([type="checkbox"], [type="radio"]).sml, select.sml, .selectbox.sml .selected, .multiSelect.sml .multi_text {height: 4rem; border-radius: 0.6rem; font-size: 1.5rem;}
.selectbox.sml .selectoptions {border-radius: 0 0 0.6rem 0.6rem;}
input:not([type="checkbox"], [type="radio"]).md, select.md, .selectbox.md .selected, .multiSelect.md .multi_text {height: 4.8rem; border-radius: 0.8rem; font-size: 1.7rem;}
input:not([type="checkbox"], [type="radio"]).lg, select.lg, .selectbox.lg .selected, .multiSelect.lg .multi_text {height: 5.6rem; font-size: 1.9rem;}
input:not([type="checkbox"], [type="radio"]).xlg, select.xlg, .selectbox.xlg .selected, .multiSelect.xlg .multi_text {height: 8rem; font-size: 2.5rem;}
select.sml, .selectbox.sml .selected::after, .multiSelect.sml .multi_text::after {background-size: 1.1rem;}
select.md, .selectbox.md .selected::after, .multiSelect.md .multi_text::after {background-size: 1.3rem;}
select.lg, .selectbox.lg .selected::after, .multiSelect.lg .multi_text::after {background-size: 1.5rem;}
select.xlg, .selectbox.xlg .selected::after, .multiSelect.xlg .multi_text::after {background-size: 1.7rem;}
.selectbox.sml .selected {line-height: 3.8rem;}
.selectbox.md .selected {line-height: 4.6rem;}
.selectbox.lg .selected {line-height: 5.4rem;}
.selectbox.xlg .selected {line-height: 7.8rem;}
.selectbox.sml .selected::after, .multiSelect.sml .multi_text::after {width: 1.1rem;}
.selectbox.md .selected::after, .multiSelect.md .multi_text::after {width: 1.3rem;}
.selectbox.lg .selected::after, .multiSelect.lg .multi_text::after {width: 1.5rem;}
.selectbox.xlg .selected::after, .multiSelect.xlg .multi_text::after {width: 1.7rem;}
.selectbox.sml .selectoptions .option a {font-size: 1.5rem;}
.selectbox.md .selectoptions .option a {font-size: 1.6rem;}
.selectbox.lg .selectoptions {top: 5rem;}
.selectbox.lg .selectoptions .option a {font-size: 1.8rem;}
.selectbox.xlg .selectoptions {top: 7.3rem;}
.selectbox.xlg .selectoptions .option a {font-size: 2.2rem;}
.multiSelect.sml .multi_option {top: 3.6rem;}
.multiSelect.sml .multi_option li label {font-size: 1.5rem;}
.multiSelect.sml .multi_text {padding: 1rem 3.2rem 0 1.6rem;}
.multiSelect.sml.on .multi_text {padding: 0.9rem 3.1rem 0 1.5rem;}
.multiSelect.md .multi_option li label {font-size: 1.6rem;}
.multiSelect.lg .multi_option li label {font-size: 1.8rem;}
.multiSelect.lg .multi_option {top: 5rem;}
.multiSelect.lg .multi_text {padding: 1.4rem 3.2rem 0 1.6rem;}
.multiSelect.lg.on .multi_text {padding: 1.3rem 3.1rem 0 1.5rem;}
.multiSelect.xlg .multi_option li label {font-size: 2.2rem;}
.multiSelect.xlg .multi_option {top: 7.3rem;}
.multiSelect.xlg .multi_text {padding: 2rem 3.2rem 0 1.6rem;}
.multiSelect.xlg.on .multi_text {padding: 1.9rem 3.1rem 0 1.5rem;}

/* chk */
span.chk {display: inline-block;font-size: 1.7rem;}
div.chk + div.chk {margin-top: 0.5rem;}
.chk input {opacity: 0;position: absolute;}
.chk > span {display: inline-block;margin-right:1.5rem;}
.chk > span:last-child {margin-right: 0;}
.chk > span label {display: inline-block;position: relative;line-height: 1;cursor: pointer;}
.chk label::before {margin-right: 0.8rem;vertical-align: bottom;}
.chk label:empty::before {margin-right: 0;}
.chk.sml {font-size: 1.5rem;}
.chk.md {font-size: 1.7rem;}
.chk.lg {font-size: 1.9rem;}

/* chk checkbox */
.chk .cbx label::before {content: '\e928';font-family: 'xeicon';display: inline-block;position: relative;width: 2rem;height: 2rem;border: 1px solid var(--bdr);border-radius: 0.4rem;font-size: 0;font-weight: 900;line-height: 1.8rem;color: var(--bdr);text-align: center;background: #FFFFFF; top: 0.1rem;}
.chk .cbx input:focus + label,
.chk .cbx input:focus-visible + label { outline: 0.2rem solid var(--blue); outline-offset: 0.2rem;}
.chk .cbx input:checked + label::before {border-color: var(--blue);font-size: 1.2rem;color: #FFFFFF;background: var(--blue);}
.chk .cbx input:disabled + label {color: #8E8E8E;cursor: auto;}
.chk .cbx input:disabled + label::before {border-color: #C6C6C6;background: #E4E4E4;}
.chk .cbx input:disabled[checked] + label::before {color: #C6C6C6;}
.chk .cbx input.err + label::before {border-color: var(--err-bdr); border-width: 2px;}
.chk .cbx input.err:checked + label::before {border-color:  var(--blue); background: var(--blue);}
.chk.sml .cbx label::before {width: 1.6rem; height: 1.6rem; top: -0.1rem; line-height: 1.4rem;}
.chk.sml .cbx input:checked + label::before {font-size: 1rem;}
.chk.md .cbx label::before {width: 2rem; height: 2rem; line-height: 1.8rem;}
.chk.md .cbx input:checked + label::before {font-size: 1.2rem;}
.chk.lg .cbx label::before {width: 2.4rem; height: 2.4rem; line-height: 2.2rem;}
.chk.lg .cbx input:checked + label::before {font-size: 1.4rem;}

/* chk radio */
.chk .radio label::before {content: '';display: inline-block;position: relative;width: 2rem;height: 2rem;border: 1px solid var(--bdr);border-radius: 50%;background: #FFFFFF;top: 0.1rem;}
.chk .radio input:focus + label,
.chk .radio input:focus-visible + label {outline: 0.2rem solid var(--blue); outline-offset: 0.2rem;}
.chk .radio input:checked + label::before {background: var(--blue); box-shadow: inset 0 0 0 4px #fff; border-color: var(--blue);}
.chk .radio input:disabled + label {color: #8E8E8E;cursor: auto;}
.chk .radio input:disabled + label::before {border-color: #C6C6C6;background: #E4E4E4;}
.chk .radio input:disabled[checked] + label::before {box-shadow: inset 0 0 0 4px #E4E4E4; border-color: #C6C6C6; background: #C6C6C6;}
.chk .radio input.err + label::before {border-color: var(--err-bdr); border-width: 2px;}
.chk .radio input.err:checked + label::before {border-color: var(--blue); border-width: 1px;}
.chk.sml .radio label::before {width: 1.6rem; height: 1.6rem; top: -0.1rem;}
.chk.sml .radio input:checked +label::before {box-shadow: inset 0 0 0 3px #fff;}
.chk.sml .radio input:disabled[checked] + label::before {box-shadow: inset 0 0 0 3px #E4E4E4;}
.chk.lg .radio label::before {width: 2.4rem; height: 2.4rem; }

/* on/off */
.chk .tgl label {font-size: 1.9rem;}
.chk .tgl input:focus + label,
.chk .tgl input:focus-visible + label {outline: 0.2rem solid var(--blue); outline-offset: 0.2rem;}
.chk .tgl label::before {content: '';display: inline-block;position: relative;width: 4rem;height: 2.4rem;border-radius: 100rem;background: #B4C4D6; top: 0.3rem;}
.chk .tgl label::after {content: '';position: absolute;left: 0.3rem;top: 0.5rem;width: 2rem;height: 2rem;border-radius: 100rem;background: #FFFFFF;transition: 0.3s ease;}
.chk .tgl input:checked + label::before {background: var(--blue);}
.chk .tgl input:checked + label::after {left: 1.7rem;}
.chk .tgl input:disabled + label {color: var(--bdr);cursor: auto;}
.chk .tgl input:disabled + label::before {background: #E4E4E4;}
.chk .tgl input:disabled + label::after {background: #C6C6C6;}
.chk .tgl input.err + label::before {background: var(--err-bdr);}
.chk .tgl input.err:checked + label::before {background: var(--blue);}
.chk.md .tgl label {font-size: 1.7rem;}
.chk.md .tgl label::before {width: 3.2rem; height: 2rem; top: 0.1rem;}
.chk.md .tgl label::after {top: 0.3rem; width: 1.6rem; height: 1.6rem; left: 0.3rem;}
.chk.md .tgl input:checked+label::after {left: 1.4rem;}

/* calendar */
.calendar_input {display: inline-block;position: relative;width: 16rem;}
.calendar_input.time {width: 24rem;}
.calendar_input input {width: 100%;padding-right: 3.8rem;background: #fff;}
.calendar_input .ui-datepicker-trigger {position: absolute;right: 1.3rem;top: 0;width: 1.8rem;height: 100%;background: url(../images/icon/i_cal.svg) no-repeat center / 1.5rem;text-indent: -999.9rem;cursor: pointer;}
.calendar_input .ui-monthpicker-trigger {position: absolute;right: 1.3rem;top: 0;width: 1.8rem;height: 100%;background: url(../images/icon/i_cal.svg) no-repeat center / 1.5rem;text-indent: -999.9rem;cursor: pointer;}
.calendar_input input[disabled] {color: var(--disabled-font2);background-color: var(--disabled-bg);  border-color: var(--disabled-bd);}
.calendar_input input[readonly] {background-color: var(--disabled-bg); color: var(--disabled-font); border-color: var(--disabled-bd);}

.calendar_input.sml {width: 15rem;}
.calendar_input.md {width: 16rem;}
.calendar_input.lg {width: 18rem;}
.calendar_input.xlg {width: 22rem;}
.calendar_input.sml input {height: 4rem; border-radius: 0.6rem; font-size: 1.5rem;}
.calendar_input.md input {height: 4.8rem; border-radius: 0.8rem; font-size: 1.7rem;}
.calendar_input.lg input {height: 5.6rem; font-size: 1.9rem;}
.calendar_input.xlg input {height: 8rem; font-size: 2.5rem;}
.calendar_input.sml .ui-datepicker-trigger {width: 1.5rem; background-size: 1.4rem;}
.calendar_input.md .ui-datepicker-trigger {width: 1.8rem; background-size: 1.5rem;}
.calendar_input.lg .ui-datepicker-trigger {width: 1.8rem; background-size: 1.5rem;}
.calendar_input.xlg .ui-datepicker-trigger {width: 2rem; background-size: 1.8rem;}
.calendar_input.sml.time {width: 22rem;}
.calendar_input.md.time {width: 24rem;}
.calendar_input.lg.time {width: 26rem;}

/** calendar **/
#ui-datepicker-div.ui-widget.ui-widget-content {width: 36rem;border: 1px solid #C6C6C6 !important;background: #fff;border-radius: 0.8rem;padding: 0;overflow: hidden;font-family: 'Pretendard';}
.ui-datepicker .ui-datepicker-title,
.ui-datepicker .ui-datepicker-header {margin: 0; padding:0;  line-height: 1; height: 6.4rem;background: transparent; font-family: inherit;}
.ui-datepicker .ui-datepicker-title {display: flex; align-items: center; justify-content: center;}
.ui-datepicker .ui-datepicker-header {background: #edf1f5;border: 0 !important;padding: 0 !important;}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-prev {left: 1.2rem; }
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-next {right: 1.2rem; }
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {border-color: transparent; background-color: #fff !important;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {cursor: pointer; width: 4rem; height: 4rem; background: url(../images/icon/i_cal_move.svg) no-repeat center; top: 1.1rem; border-radius: 100rem;}
.ui-datepicker .ui-datepicker-next {transform: rotate(180deg);}
#ui-datepicker-div.ui-datepicker select.ui-datepicker-month,
#ui-datepicker-div.ui-datepicker select.ui-datepicker-year {min-width: calc(50% - 5rem);width: auto !important;line-height: normal; height: 3.8rem; border: 1px solid transparent; font-size: 1.9rem; background-color: transparent; font-family: inherit; background-size: 1rem;}
#ui-datepicker-div.ui-datepicker select:hover {background-color:#CDD7E4 !important;}
#ui-datepicker-div.ui-datepicker select:focus {padding: 0 3.2rem 0 1.6rem;}
.ui-datepicker .ui-datepicker-header .m {position: absolute; visibility: hidden;}

.ui-datepicker table {width: calc(100% - 2.4rem); margin: 0 auto;}
.ui-datepicker th {padding: 0; height: 5.2rem; font-size: 1.7rem;}
.ui-datepicker td {padding: 0 !important;border: 0; background: #FFFFFF; height: 4.8rem; font-size: 1.7rem;}
.ui-datepicker td span,
.ui-datepicker td a {line-height: 4.6rem !important; border-radius: 100rem; padding: 0; border: 1px solid transparent;}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active {border: 0;}

#ui-datepicker-div .ui-state-default,
#ui-datepicker-div .ui-widget-content .ui-state-default,
#ui-datepicker-div .ui-widget-header .ui-state-default,
#ui-datepicker-div .ui-button,
html #ui-datepicker-div .ui-button.ui-state-disabled:hover,
html #ui-datepicker-div .ui-button.ui-state-disabled:active {border: 0 !important;line-height: 1;text-align: center;background: none !important;}
/* ui-state-highlight : 오늘 / ui-state-active : 선택된날 */
#ui-datepicker-div .ui-state-highlight {color: var(--dark) !important; background: transparent !important; border: 1px solid var(--bdr) !important;}
#ui-datepicker-div .ui-state-hover,
#ui-datepicker-div.ui-widget-content .ui-state-hover,
#ui-datepicker-div .ui-widget-header .ui-state-hover,
#ui-datepicker-div .ui-state-focus,
#ui-datepicker-div.ui-widget-content .ui-state-focus,
#ui-datepicker-div .ui-widget-header .ui-state-focus,
#ui-datepicker-div .ui-button:hover,
#ui-datepicker-div .ui-button:focus {color: var(--blue) !important;}
#ui-datepicker-div .ui-state-active,
#ui-datepicker-div.ui-widget-content .ui-state-active,
#ui-datepicker-div .ui-widget-header .ui-state-active,
#ui-datepicker-div a.ui-button:active,
#ui-datepicker-div .ui-button:active,
#ui-datepicker-div .ui-button.ui-state-active:hover {color: #fff !important; background: var(--blue) !important; border: 1px solid var(--blue) !important;}
#ui-datepicker-div .ui-state-highlight.ui-state-hover {color: var(--dark) !important; }
#ui-datepicker-div .ui-state-highlight.ui-state-hover.ui-state-active {color: #fff !important;}
.ui-widget select {color: #222;}

#ui-datepicker-div .ui-timepicker-div {border-top: 1px solid #C6C6C6; padding: 1rem 0 0.5rem; background: #f2f2f2;}
#ui-datepicker-div .ui-timepicker-div dl {font-size:1.5rem; display: flex; align-items: center; justify-content: center; gap: 0 0.5rem;}
#ui-datepicker-div .ui-timepicker-div dl dt {float: none; padding: 0 0.5rem;}
#ui-datepicker-div .ui-timepicker-div select.ui-state-default {border: 1px solid var(--bdr) !important; width: 7rem !important; min-width: 0; height: 3.5rem; border-radius: 0.6rem; text-align: left; background: #fff url(../images/icon/i_sel.svg) no-repeat right 1.2rem center / 1.3rem !important;}
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before, .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {font-size: 0; padding-right: 0.5rem;}
.ui-datepicker .ui-datepicker-buttonpane {margin: 0;border: 0;background: #f2f2f2 !important;display: flex;align-items: center;justify-content: flex-end;}
.ui-datepicker .ui-datepicker-buttonpane button {font-size: 1.3rem; display: inline-block; padding: 0.6rem 1rem; border-radius: 0.4rem; font-family: inherit;}
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-priority-secondary {border: 1px solid var(--blue) !important; background-color: #fff !important; color: var(--blue); font-weight:400;}
#ui-datepicker-div .ui-datepicker-buttonpane button.ui-priority-primary {background-color: var(--blue) !important; color: #fff !important; font-weight:400;}
.ui_tpicker_hour_slider::after,
.ui_tpicker_minute_slider::after,
.ui_tpicker_second_slider::after {content: '시'; display: inline-block; padding-left: 0.3rem;}
.ui_tpicker_minute_slider::after {content: '분';}
.ui_tpicker_second_slider::after {content: '초';}

#ui-monthpicker-div.ui-widget.ui-widget-content {width: 32rem;border: 1px solid #C6C6C6 !important;background: #fff;border-radius: 0.8rem;padding: 0;overflow: hidden;font-family: 'Pretendard';}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-year {width: auto !important;font-size: 1.9rem; background-color: transparent; font-family: inherit; background-size: 1rem; color: #333;}
#ui-monthpicker-div .ui-state-default,
#ui-monthpicker-div .ui-widget-content .ui-state-default,
#ui-monthpicker-div .ui-widget-header .ui-state-default,
#ui-monthpicker-div .ui-button,
html #ui-monthpicker-div .ui-button.ui-state-disabled:hover,
html #ui-monthpicker-div .ui-button.ui-state-disabled:active {border: 0 !important;line-height: 1;text-align: center;background: none !important;}
#ui-monthpicker-div .ui-state-highlight {color: var(--dark) !important; background: transparent !important; border: 1px solid var(--bdr) !important;}
#ui-monthpicker-div .ui-state-hover,
#ui-monthpicker-div.ui-widget-content .ui-state-hover,
#ui-monthpicker-div .ui-widget-header .ui-state-hover,
#ui-monthpicker-div .ui-state-focus,
#ui-monthpicker-div.ui-widget-content .ui-state-focus,
#ui-monthpicker-div .ui-widget-header .ui-state-focus,
#ui-monthpicker-div .ui-button:hover,
#ui-monthpicker-div .ui-button:focus {color: var(--blue) !important;}
#ui-monthpicker-div .ui-state-active,
#ui-monthpicker-div.ui-widget-content .ui-state-active,
#ui-monthpicker-div .ui-widget-header .ui-state-active,
#ui-monthpicker-div a.ui-button:active,
#ui-monthpicker-div .ui-button:active,
#ui-monthpicker-div .ui-button.ui-state-active:hover {color: #fff !important; background: var(--blue) !important; border: 1px solid var(--blue) !important;}
#ui-monthpicker-div .ui-state-highlight.ui-state-hover {color: var(--dark) !important; }
#ui-monthpicker-div .ui-state-highlight.ui-state-hover.ui-state-active {color: #fff !important;}

#ui-monthpicker-div .ui-timepicker-div {border-top: 1px solid #C6C6C6; padding: 1rem 0 0.5rem; background: #f2f2f2;}
#ui-monthpicker-div .ui-timepicker-div dl {font-size:1.5rem; display: flex; align-items: center; justify-content: center; gap: 0 0.5rem;}
#ui-monthpicker-div .ui-timepicker-div dl dt {float: none; padding: 0 0.5rem;}
#ui-monthpicker-div .ui-timepicker-div select.ui-state-default {border: 1px solid var(--bdr) !important; width: 7rem !important; min-width: 0; height: 3.5rem; border-radius: 0.6rem; text-align: left; background: #fff url(../images/icon/i_sel.svg) no-repeat right 1.2rem center / 1.3rem !important;}
#ui-monthpicker-div .ui-datepicker-buttonpane button.ui-priority-secondary {border: 1px solid var(--blue) !important; background-color: #fff !important; color: var(--blue); font-weight:400;}
#ui-monthpicker-div .ui-datepicker-buttonpane button.ui-priority-primary {background-color: var(--blue) !important; color: #fff !important; font-weight:400;}

#ui-monthpicker-div .ui-datepicker td span, .ui-datepicker td a {line-height: 3.4rem !important; border-radius: 100rem; padding: 0; border: 1px solid transparent;}

/* l/r side, gap(~) */
.lside, .rside {font-size: 1.7rem;color: var(--dark);}
.lside {margin-right: 0.5rem;}
.rside {margin-left: 0.5rem;}
.gap {margin: 0 0.2rem;vertical-align: middle;}

/* field */
.field {display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem;word-break: break-word;max-width: 100%;}
.field + .field {margin: 0.5rem 0 0 0 !important;}
.field > div:not(.selectbox, .multiSelect) {width: 100%;}
.field > *, .field .btn + .btn, .field .gap {margin: 0;}
th .field {padding: 0;}
/* phone & email & addr field style */
.phone {flex-wrap: nowrap;}
.phone input, .phone select,
.email input, .email select {width: calc(100% / 3);max-width: min(calc(100% / 3), 13rem);}
.addr input {width: 100%;}
.addr span {display: flex;align-items: center;gap: 0.5rem;max-width: 100%;word-break: break-word;}
.addr span input {width: 15rem;margin-top: 0;}
.addr span .btn {min-width: 9rem;}


/* interval */
td .btn + .btn {margin-left: 0.3rem;}
td > *:not(.gap):not([class$="_txt"]):not(div) ~ *:not(.gap):not([class$="_txt"]):not(div) {margin-left: 0.5rem;}
td > .gap + *:not(.gap) {margin-left: 0 !important;}
td .chk + input:not([type="hidden"]),
td .chk + select {margin-left: 1rem;}

/* custom file */
.filebox input[type="file"] {overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;border: 0;}
.filebox .upload_name {min-width: 30rem;width: auto;max-width: 100%;text-overflow: ellipsis; overflow: hidden;}
.filebox .info_txt {font-size: 1.7rem; padding-top: 1rem; }
.filebox .info_txt::before {content: "\e9a7"; font-family: 'xeicon'; font-size: 1.8rem; margin-right: 0.5rem; vertical-align: -0.1rem;}
.filebox input[type="file"]:focus + .btn,
.filebox input[type="file"]:focus-visible + .btn {border-color: var(--btn-blue-hover);background-color: var(--btn-blue-hover);outline: 0.2rem solid var(--blue);outline-offset: 0.2rem;}

/* file */
.file_wrap {position: relative;text-align: left;}
.file_wrap .file_upload {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4rem; border-radius: 1.2rem; border: 1px dashed #C6C6C6; background: #F0F0F0; padding: 6.4rem 4rem;}
.file_wrap .file_upload p {font-size: 1.9rem; text-align: center;}
.file_wrap .file_upload_result {margin-top: 2.4rem;}
.file_wrap .upload_top {display: flex; justify-content: space-between; align-items: center;}
.file_wrap .upload_top .total {font-weight: 700;}
.file_wrap .upload_top .total .current {color: var(--blue);}
.file_wrap .upload_top .total span {font-weight: normal; padding-left: 1rem;}
.file_wrap .btn_delete {background: none; font-size: 1.7rem; border: 0;}
.file_wrap .btn_delete i {vertical-align: -0.1rem; margin-right: 0.3rem;}
.file_wrap .btn_delete:focus,
.file_wrap .btn_delete:focus-visible {outline: 0.2rem solid var(--blue); outline-offset: 0.2rem;}
.file_wrap .upload_list {margin-top: 2.4rem;}
.file_wrap .upload_list .btn_area {margin: 0;}
.file_wrap .upload_list li {padding: 1.2rem 1.6rem; border-radius: 0.6rem; border: 1px solid #d8d8d8;}
.file_wrap .upload_list li + li {margin-top: 1.6rem;}
.file_wrap .upload_list li > div {display: flex; align-items: center; justify-content: space-between; gap: 1.6rem;}
.file_wrap .upload_list li.err {border: 2px solid var(--red); background: #FDF2F3;}
.file_wrap .upload_list li.err .err_txt {color: var(--red); border-top: 1px solid #d8d8d8; padding-top: 1.6rem; margin-top: 1.6rem;}
.file_wrap .upload_list li.err .btn_area .xi-error {color: var(--red); font-size: 2rem; margin-right: 1.2rem; vertical-align: -0.2rem;}


/* file img */
.file_thum::after {content: '';display: table;clear: both;}
.file_thum li {float: left;position: relative;width: 24rem;margin-right: 1rem;margin-bottom: 1rem;border: 1px solid #e1e1e1;border-radius: 0.8rem;overflow: hidden;}
.file_thum li:nth-child(5n) {margin-right: 0;}
.file_thum .file_img {width: 100%;height: 20rem;}
.file_thum .file_img img {width: 100%;height: 100%;}
.file_thum .file_btns_box {height: 5rem;padding: 1rem 1.2rem;border-top: 1px solid #e1e1e1;}
.file_thum .fr {text-align: right;vertical-align: baseline;}
.file_thum .btn {min-width: 0;width: 3rem;height: 3rem;padding: 0;background: none; border-radius: 0.5rem; font-size: 0;}
.file_thum .btn::before {font-size: 1.7rem;font-weight: 300;line-height: 3rem;}
.file_wrap .fake_btn::before {content: "\eb7e";font-family: 'xeicon';}
.file_wrap .btn_file_del {border-color: var(--red);}
.file_wrap .btn_file_del::before {content: "\e921";font-family: 'xeicon';font-size: 1.3rem;font-weight: bold;color: var(--red);vertical-align: top;}
.file_wrap .btn_file_del:hover, .file_wrap .btn_file_del:focus {background-color: var(--btn-bd-red-hover); border-color: var(--btn-red-hover); color: var(--btn-red-hover);}
.file_thum .fake_file {display: inline-block;position: relative;width: 3rem;height: 3rem;}
.file_thum .fake_btn {width: 100%;height: 100%;text-indent: 0;cursor: pointer; }
.file_thum .hidden_file {opacity: 0;position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: 0;cursor: pointer;filter: alpha(opacity=0);-moz-opacity: 0;}
.file_thum .file_btns_box .file_name {display: inline-block;max-width: 80%;padding-right: 0.6rem;font-size: 1.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;vertical-align: -0.6rem;}
.file_thum .btn_file_del {margin-left: 0 !important;}
.file_thum + .info_txt {font-size: 1.7rem; }
.file_thum + .info_txt::before {content: "\e9a7"; font-family: 'xeicon'; font-size: 1.8rem; margin-right: 0.5rem; vertical-align: -0.1rem;}

/* input_wrap */
.input_wrap {position: relative; border: 1px solid var(--bdr); border-radius: 0.8rem; display: inline-block; position: relative; padding-right: 4.8rem;}
.input_wrap select,
.input_wrap input,
.input_wrap .btn {border-color: transparent;}
.input_wrap .btn.ic {width: 4.8rem; height: 4.8rem; border-radius: 0rem 0.8rem 0.8rem 0; position: absolute; right: -0.1rem; top: 0;}
.input_wrap .btn.ic i {font-size: 2rem; line-height: 4.6rem;}
.input_wrap select:focus, .input_wrap input:focus {border: 2px solid var(--bdr-focus);}

/*** button ***/
.btn_area {margin-top: 2rem;text-align: right;}
.btn_area.left {text-align: left;}
.btn_area.center {text-align: center;}
.btn_area .btn + .btn {margin-left: 0.3rem;}

/* button size */
.btn {min-width: 9rem;height: 4.8rem;padding: 0 1.6rem;font-size: 1.7rem;line-height: 4.6rem; border-radius: 0.8rem; display: inline-block; margin: 0;border: 1px solid var(--btn-bdr);color: var(--dark);text-align: center;background-color: #fff;cursor: pointer;transition: 0.1s color, 0.1s border-color, 0.1s background-color;}
.btn:hover, .btn:focus {background-color: var(--btn-hover); border-color: #000;}
.btn:focus,
.btn:focus-visible {outline: 0.2rem solid var(--blue); outline-offset: 0.2rem;}
.btn.xsml {min-width: 4rem;height: 3.2rem;padding: 0 1rem;font-size: 1.5rem;line-height: 3rem; border-radius: 0.6rem;}
.btn.sml {min-width: 5rem;height: 4rem;padding: 0 1.2rem;font-size: 1.7rem;line-height: 3.8rem; border-radius: 0.6rem;}
.btn.md {min-width: 9rem;height: 4.8rem;padding: 0 1.6rem;font-size: 1.7rem;line-height: 4.6rem; border-radius: 0.8rem;} /* basic btn size */
.btn.lg {min-width: 11rem;height: 5.6rem;padding: 0 2rem;font-size: 1.9rem;line-height: 5.4rem; border-radius: 0.8rem;}
.btn.xlg {min-width: 13rem;height: 6.4rem;padding: 0 2.4rem;font-size: 1.9rem;line-height: 6.2rem; border-radius: 0.8rem;}

/* only icon button */
.btn.ic {min-width: 4rem;width: 4rem;height: 4rem;padding: 0;border: 1px solid var(--bdr);border-radius: 0.6rem;font-family: 'xeicon';font-size: 0;line-height: 3.8rem;color: var(--dark);letter-spacing: 0;}
.btn.ic:hover, .btn.ic:focus {background-color: var(--basic-bg);}
.btn.ic i {bottom: 0;font-size: 1.6rem;line-height: 3.8rem;}
.btn.ic + .btn.ic {margin-left: 0.5rem;}
.btn.ic.xsml {min-width: 2.8rem; width: 2.8rem; height: 2.8rem; line-height:2.6rem; border-radius: 0.4rem;}
.btn.ic.xsml i {line-height: 2.6rem;}
.btn.ic.sml {min-width: 3.5rem; width:3.5rem; height:3.5rem; line-height:3.2rem; border-radius: 0.4rem;}
.btn.ic.sml i {line-height:3.2rem;}
.btn.ic.md {min-width: 4rem; width:4rem; height:4rem; line-height:3.8rem; border-radius: 0.6rem;}
.btn.ic.md i {line-height:3.8rem;}
.btn.ic.lg {min-width: 5rem; width:5rem; height:5rem; line-height:4.8rem; border-radius: 0.8rem;}
.btn.ic.lg i {line-height:4.8rem; font-size: 1.9rem;}
.btn.ic.xlg {min-width: 6rem;  width:6rem; height:6rem; line-height:5.8rem; border-radius: 0.8rem;}
.btn.ic.xlg i {line-height:5.8rem; font-size: 2.1rem;}

/** set button color **/
/* blue */
.btn.blue, .btn.btn_save, .btn.btn_write {border-color: var(--blue);color: #FFFFFF;background-color: var(--blue);}
.btn.blue:hover, .btn.btn_save:hover, .btn.btn_write:hover,
.btn.blue:focus, .btn.btn_save:focus, .btn.btn_write:focus {border-color: var(--btn-blue-hover);background-color: var(--btn-blue-hover);}

/* red */
.btn.red, .btn.btn_del {border-color: var(--red);color: #FFFFFF;background-color: var(--red);}
.btn.red:hover, .btn.btn_del:hover,
.btn.red:focus, .btn.btn_del:focus {border-color: var(--btn-red-hover);background-color: var(--btn-red-hover);}

/* green */
.btn.green {border-color: var(--green);color: #FFFFFF;background-color: var(--green);}
.btn.green:hover, .btn.green:focus {border-color: var(--btn-green-hover);background-color: var(--btn-green-hover);}

/* yellow */
.btn.yellow {border-color: var(--yellow);color: var(--dark);background-color: var(--yellow);}
.btn.yellow:hover, .btn.yellow:focus {border-color: var(--btn-yellow-hover);background-color: var(--btn-yellow-hover); color: #fff;}

/* gray */
.btn.gray, .btn.btn_cancel, .btn.btn_list {border-color: var(--gray);color: #FFFFFF;background-color: var(--gray);}
.btn.gray:hover, .btn.btn_cancel:hover, .btn.btn_list:hover,
.btn.gray:focus, .btn.btn_cancel:focus, .btn.btn_list:focus {border-color: var(--btn-gray-hover);background-color: var(--btn-gray-hover);}

/* gray light */
.btn.gray.light {border-color: var(--gray-light);color: var(--dark);background-color: var(--gray-light);}
.btn.gray.light:hover, .btn.gray.light:focus {border-color: var(--btn-gray-light-hover);background-color: var(--btn-gray-light-hover);}

/* dark */
.btn.black {color: #FFFFFF;background-color: var(--black); border-color: var(--black);}
.btn.black:hover, .btn.black:focus {background-color: var(--dark);}

/* function button */
.btn.btn_excel {padding-left: 5.4rem; padding-right:2.5rem; background: url(../images/icon/file_excel.svg) no-repeat 2.4rem 50% / auto 2.2rem;}
.btn.btn_excel:hover, .btn.btn_excel:focus {background-color: var(--btn-hover);}

/* button border */
.btn.bd {background-color: transparent;}
.btn.bd.red {border-color: var(--red);color: var(--red);}
.btn.bd.red:hover, .btn.bd.red:focus {background-color: var(--btn-bd-red-hover); border-color: var(--btn-red-hover); color: var(--btn-red-hover);}
.btn.bd.green {border-color: var(--green);color: var(--green);}
.btn.bd.green:hover, .btn.bd.green:focus {background-color: var(--btn-bd-green-hover); border-color: var(--btn-green-hover); color: var(--btn-green-hover);}
.btn.bd.blue {border-color: var(--blue);color: var(--blue);}
.btn.bd.blue:hover, .btn.bd.blue:focus {background-color: var(--btn-bd-blue-hover); border-color: var(--btn-blue-hover); color: var(--btn-blue-hover);}
.btn.bd.yellow {border-color: var(--yellow);color: var(--yellow);}
.btn.bd.yellow:hover, .btn.bd.yellow:focus {background-color: var(--btn-bd-yellow-hover); border-color: var(--btn-yellow-hover); color: var(--btn-yellow-hover);}
.btn.bd.gray {border-color: var(--gray);color: var(--gray);}
.btn.bd.gray:hover, .btn.bd.gray:focus {background-color: var(--btn-bd-gray-hover); border-color: var(--btn-gray-hover); color: var(--btn-gray-hover);}

.btn.btn_rewrite {border-color: var(--blue);color: var(--blue);background-color: transparent;}
.btn.btn_rewrite:hover,
.btn.btn_rewrite:focus {background-color: var(--btn-bd-blue-hover);}
.btn.btn_del {border-color: var(--red);color: var(--red);background-color: transparent;}
.btn.btn_del:hover,
.btn.btn_del:focus {background-color: var(--btn-bd-red-hover);}

/** // set button color **/

/* icon button */
.btn i {position: relative; font-size: 1.6rem;color: inherit;}
.btn.icl i {margin-right: 0.6rem;}
.btn.icr i {margin-left: 0.6rem;}
.btn.sml.icl, .btn.sml.icr {padding: 0 1rem;}
.btn.xsml i {font-size: 1.4rem;}
.btn.sml i {font-size: 1.5rem;}
.btn.md i {font-size: 1.6rem;}
.btn.lg i {font-size: 1.7rem;}
.btn.xlg i {font-size: 1.9rem;}

/* disabled */
.btn:disabled, .btn.disabled, .btn.bd:disabled, .btn.bd.disabled {border: 1px solid var(--btn-disabled-bg) !important;color: var(--btn-disabled-font) !important;background-color: var(--btn-disabled-bg) !important; cursor: default !important;}

/* sidebyside */
.sidebyside {display: flex;justify-content: space-between;align-items: center;position: relative;}
.sidebyside > .left {display: flex;justify-content: flex-start;align-items: center;gap: 0.5rem;}
.sidebyside > .right {display: flex;justify-content: flex-end;align-items: center;gap: 0.5rem;text-align: right;}
.sidebyside .btn_area {display: inline-block;margin: 0;}

/* tag */
.state {display: inline-block;min-width: 7rem;height: 3.8rem;padding: 0 1.5rem;border-radius: 0.4rem;font-size: 1.6rem;font-weight: 400;line-height: 3.6rem;color: #FFFFFF;letter-spacing: -0.03em;text-align: center;border: 1px solid transparent;}
.state.red {background-color: var(--tag-red);}
.state.green {background-color: var(--tag-green);}
.state.blue {background-color: var(--tag-blue);}
.state.gray {background-color: var(--tag-gray);}
.state.black {background-color: var(--tag-black);}
.state.bd {background: #fff;}
.state.bd.red {border-color: var(--tag-red); color:var(--tag-red);}
.state.bd.green {border-color: var(--tag-green); color:var(--tag-green);}
.state.bd.blue {border-color: var(--tag-blue); color:var(--tag-blue);}
.state.bd.gray {border-color: var(--tag-gray); color:var(--tag-gray);}
.state.bd.black {border-color: var(--tag-black); color:var(--tag-black);}



/*** table ***/
table .no_data {text-align: center !important;}
table tr:hover .no_data {background: inherit !important;}
table .asterisk {margin-left: -1rem;}
td img {vertical-align: middle;}
.ellipsis {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
table a.ellipsis {display: inline-block;max-width: 95%;vertical-align: middle;}
table a.ellipsis + i {vertical-align: middle;}

/* asterisk(*) + form guide */
.asterisk {font-size:0; margin-right: 0.3rem;}
.asterisk::before {content: '*';display:inline-block;font-size: 1.4rem;font-weight: 600;color: var(--red);}
.form_guide {margin-bottom: 1rem;font-size: 1.6rem;font-weight: 400;text-align: right;}
.tbl_top .form_guide {margin-bottom: 0;}

/* table top */
.tbl_top {display: table;table-layout: fixed;width: 100%;margin-bottom: 1rem;}
.tbl_left {display: table-cell;color: #666666;vertical-align: middle;}
.tbl_right {display: table-cell;text-align: right;vertical-align: bottom;}
.tbl_right select + select,
.tbl_right .btn + select,
.tbl_right .btn + .btn {margin-left: 0.5rem;}

/* table style */
.data_tbl {border-top: 1px solid var(--black);}
.data_tbl > * > tr > th,
.data_tbl > * > tr > td {position: relative;height: 5.6rem;padding: 0.8rem 1rem;border-bottom: 1px solid var(--tbl-bdr);font-size: 1.7rem;font-weight: 400;color: var(--dark);text-align: center;background: #FFFFFF;}
.data_tbl > * > tr > th {font-weight: 500;background: var(--tbl-th);}
.data_tbl > * > tr > *:not(:last-child) {border-right: 1px solid var(--tbl-bdr);}
.data_tbl > tbody > tr > td + td[rowspan] {border-left: 1px solid var(--tbl-bdr);}
.data_tbl:not(.form) > tbody > tr:hover > td:not(.no_data) {background: var(--form-tbl-hover-bg);}

/* table border */
.data_tbl .bdt {border-top: 1px solid var(--tbl-bdr);}
.data_tbl .bdr {border-right: 1px solid var(--tbl-bdr);}
.data_tbl .bdb {border-bottom: 1px solid var(--tbl-bdr);}
.data_tbl .bdl {border-left: 1px solid var(--tbl-bdr);}

/* table form */
.data_tbl.form > * > tr > th,
.data_tbl.form > * > tr > td {height: 5.6rem;}
.data_tbl.form input[type="text"], .data_tbl.form input[type="password"], .data_tbl.form select {width: 100%;}
.data_tbl.form .btn {min-width: 5rem;}

/* scroll table */
.tbl_scroll {position: relative;}
.tbl_scroll tbody + tfoot tr:first-child td {border-top: 1px solid var(--tbl-bdr);}

/* horizontal scroll table */
.tbl_scroll.scr_h {overflow-x: auto;position: relative;}

/* vertical scroll table */
.tbl_scroll.scr_v {overflow-y: auto;position: relative;}
.tbl_scroll.scr_v table {border-collapse: separate;border-top: 0;}
.tbl_scroll.scr_v thead {position: sticky;left: 0;top: 0;z-index: 1;}
.tbl_scroll.scr_v thead tr:first-child th {border-top: 1px solid var(--black);}

/* horizontal + vertical scroll table */
.tbl_scroll.scr_hv {overflow: auto;position: relative;}
.tbl_scroll.scr_hv table {border-collapse: separate;border-top: 0;}
.tbl_scroll.scr_hv thead {position: sticky;left: 0;top: 0;z-index: 1;}
.tbl_scroll.scr_hv thead tr:first-child th {border-top: 1px solid var(--black);}

/* thead th + tbody th fix scroll table */
.tbl_scroll.scr_hv02 {overflow: auto;position: relative;}
.tbl_scroll.scr_hv02 table {border-collapse: separate;border-top: 0;}
.tbl_scroll.scr_hv02 thead {position: sticky;left: 0;top: 0;z-index: 2;}
.tbl_scroll.scr_hv02 thead th:first-child {z-index: 3;}
.tbl_scroll.scr_hv02 th:first-child {position: sticky;left: 0;z-index: 1;}
.tbl_scroll.scr_hv02 th.left_fixed {position: sticky;z-index: 1; }
.tbl_scroll.scr_hv02 thead tr:first-child th {border-top: 1px solid var(--black);}

/* ie */
@media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast: none) {
    .tbl_scroll.scr_h.scr_v table {border-top: 1px solid var(--black) !important;}
    .tbl_scroll.scr_h.scr_v table thead::before,
    .tbl_scroll.scr_h.scr_v table thead::after,
    .tbl_scroll.scr_h.scr_v table th:not(:last-child)::before,
    .tbl_scroll.scr_h.scr_v table th::after {display: none;}
}

/* 테이블 스크롤 커스터마이징 */
.tbl_scroll .simplebar-scrollable-y .simplebar-offset {padding-right: 2rem;} /* 세로 스크롤 */
.simplebar-scrollable-x {padding-bottom: 0.8rem;} /* 가로 스크롤 */
.tbl_scroll .simplebar-scrollable-y.simplebar-scrollable-x {padding-bottom: 0;} /* 상하좌우 스크롤 */
.tbl_scroll .simplebar-scrollable-y.simplebar-scrollable-x .simplebar-offset {padding-bottom: 0.8rem !important;} /* 상하좌우 스크롤 */
.tbl_scroll .simplebar-scrollable-y.simplebar-scrollable-x .simplebar-track.simplebar-horizontal {right: 2rem;} /* 상하좌우 스크롤 */
.tbl_scroll .simplebar-track {opacity: 0.8;transition: opacity .1s linear;}
.tbl_scroll .simplebar-scrollable-y:hover .simplebar-track,
.tbl_scroll .simplebar-scrollable-x:hover .simplebar-track {opacity: 1;}
.tbl_scroll .simplebar-track.simplebar-vertical {right: 0.7rem;top: 0rem;bottom: 0rem;width: 0.8rem !important;border-radius: 1rem;background: #cfcfcf;}
.tbl_scroll .simplebar-track.simplebar-vertical .simplebar-scrollbar::before {left: 0;right: 0;top: 0;bottom: 0;width: 0.8rem !important;}
.tbl_scroll .simplebar-track.simplebar-horizontal {left: 0rem;right: 0rem;bottom: 0rem;height: 0.8rem !important;border-radius: 1rem;background: #cfcfcf;}
.tbl_scroll .simplebar-track.simplebar-horizontal .simplebar-scrollbar::before {left: 0;right: 0;top: 0;bottom: 0;}

/* tbl scroll plugin 중첩형 */
.tbl_scroll.scrollon {border-bottom: 0;}
.tbl_scroll.scrollon > .data_tbl {position: relative;width: calc(100% - 1.5rem);}
.tbl_scroll.scrollon > .data_tbl::before {content: '';display: block;position: absolute;right: -1.5rem;top: -0.1rem;width: calc(100% + 1.5rem);height: 4.3rem;border-top: 1px solid var(--black);border-bottom: 1px solid var(--bdr);background: var(--tbl-th);z-index: -1;}
.tbl_scroll.scrollon .scr_box {padding-right: 1.5rem;}
.tbl_scroll.scrollon .scr_box .data_tbl tbody tr:last-child td {border-bottom: 1px solid var(--bdr);}



/*** tab ***/
.tab > .tab_menu {display: flex;}
.tab > .tab_menu li {font-size: 1.7rem;font-weight: 400;color: var(--dark);text-align: center;}
.tab > .tab_menu li a {display: inline-block;height: 100%;}
.tab > .tab_cont {margin-top: 3rem;}

/* line */
.tab.line > .tab_menu {border-bottom: 0.2rem solid var(--bdr);}
.tab.line > .tab_menu li {position: relative;min-width: 8rem;}
.tab.line > .tab_menu li:has(.on) {font-weight: 500;}
.tab.line > .tab_menu li:has(.on)::before {content: '';position: absolute;left: 0;bottom: -0.2rem;width: 100%;height: 0.2rem;background: var(--black);}
.tab.line > .tab_menu li a {padding: 1rem 1.5rem;}

/* box */
.tab.box > .tab_menu {border-bottom: 1px solid var(--bdr);}
.tab.box > .tab_menu li {min-width: 8rem;margin-bottom: -0.1rem;}
.tab.box > .tab_menu li:has(.on) {border: 1px solid var(--bdr);border-bottom: 1px solid #FFFFFF;border-radius: 0.4rem 0.4rem 0 0;font-weight: 500;}
.tab.box > .tab_menu li a {padding: 1rem 1.5rem;}
.tab.box > .tab_cont {margin-top: 0;padding: 2rem;border: 1px solid var(--bdr);border-top: 0;border-radius: 0 0.4rem 0.4rem 0.4rem;}

/* wide */
.tab.wide > .tab_menu {display: flex;}
.tab.wide > .tab_menu li {width: 100%;height: 6.5rem;border: 1px solid var(--bdr);border-left: 0;border-bottom-color: var(--black);font-size: 1.7rem;color: #696969;letter-spacing: -0.03em;text-align: center;background: var(--basic-bg);}
.tab.wide > .tab_menu li:first-child {border-left: 1px solid var(--bdr);}
.tab.wide > .tab_menu li:has(.on) {border-color: var(--dark);border-bottom-color: #FFFFFF;color: var(--dark);background: #FFFFFF;}
.tab.wide > .tab_menu li:has(.on):nth-child(n+2) {border-left: 0;}
.tab.wide > .tab_menu li a {display: flex;justify-content: center;align-items: center;height: 100%;padding: 0.5rem;font-weight: 500;}

/* balloon tab */
.tab.balloon > .tab_menu::after {content: '';display: block;clear: both;}
.tab.balloon > .tab_menu li {position: relative;min-width: 10rem;height: 4rem;border: 1px solid var(--bdr);border-radius: 1.8rem;line-height: 3.8rem;}
.tab.balloon > .tab_menu li:not(:last-child) {margin-right: 1rem;}
.tab.balloon > .tab_menu li:has(.on) {border: 0;line-height: 4rem;color: #FFFFFF;background: var(--blue);}
.tab.balloon > .tab_menu li:has(.on)::after {content: '';display: block;position: absolute;left: 50%;bottom: -0.5rem;width: 0;height: 0;margin-left: -0.5rem;border-left: 0.5rem solid transparent;border-right: 0.5rem solid transparent;border-top: 0.5rem solid var(--blue);}
.tab.balloon > .tab_menu li a {padding: 0 2rem;}

/* first tab */
.tab.f_tab > .tab_menu {position: relative;height: 4.5rem;font-size: 1.7rem;}
.tab.f_tab > .tab_menu::after {content: '';display: block;clear: both;}
.tab.f_tab > .tab_menu li {float: left;width: 12rem;height: 100%;border: 1px solid var(--bdr);border-left: 0;line-height: 4.5rem;text-align: center;}
.tab.f_tab > .tab_menu li:first-child {border-left: 1px solid var(--bdr);}
.tab.f_tab > .tab_menu li:has(.on) {border-color: var(--blue);color: #FFFFFF;background: var(--blue);}
.tab.f_tab > .tab_menu li a {display: block;}

/* second tab */
.tab.s_tab > .tab_menu {padding: 1.5rem 3.5rem;border-bottom: 1px solid var(--bdr);font-size: 1.5rem;background: var(--form-tbl-hover-bg);}
.tab.s_tab > .tab_menu::after {content: '';display: block;clear: both;}
.tab.s_tab > .tab_menu li {float: left;position: relative;margin-right: 2.2rem;padding-left: 1rem;}
.tab.s_tab > .tab_menu li::after {content: '';position: absolute;left: 0;top: 50%;width: 0.4rem;height: 0.4rem;background: #797979;transform: translateY(-50%);}
.tab.s_tab > .tab_menu li:has(.on) {color: var(--blue);text-decoration: underline;text-underline-position: under;}
.tab.s_tab > .tab_menu li:has(.on)::after {background: var(--blue);}
.tab.s_tab > .tab_menu li a {display: block;}

/* third tab */
.tab.t_tab > .tab_menu {height: 4.5rem;padding: 0 4.5rem;border-bottom: 1px solid var(--bdr);font-size: 1.5rem;line-height: 4.5rem;color: var(--dark);}
.tab.t_tab > .tab_menu::after {content: '';display: block;clear: both;}
.tab.t_tab > .tab_menu li {float: left;position: relative;}
.tab.t_tab > .tab_menu li:nth-child(n+2) {margin-left: 2.4rem;}
.tab.t_tab > .tab_menu li:nth-child(n+2)::after {content: '';position: absolute;left: -1.3rem;top: 50%;width: 0.1rem;height: 1.5rem;background: var(--bdr);transform: translateY(-50%);}
.tab.t_tab > .tab_menu li:has(.on) {font-weight: 700;}
.tab.t_tab > .tab_menu li a {display: block;}



/*** loading ***/
/* loading - 부분화면 */
.loading_wrap.partial {display: block;position: absolute;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: 9999;}
.loading_wrap.partial .loading_box {display: block;position: absolute;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 9999;}
.loading_wrap.partial .loading_box::after {content: '';display: block;position: absolute;left: 50%;top: 50%;width: 5rem;height: 5rem;margin-left: -2.5rem;margin-top: -2.5rem;border: 0.7rem solid rgba(255, 255, 255, 0.5);border-top-color: #fff;border-radius: 50%;-webkit-animation: spin 0.7s infinite linear;animation: spin 0.7s infinite linear;}
@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* loading - 전체화면 */
.loading_wrap.entire {display: block;position: fixed;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.7);z-index: 9999;}
.loading_wrap.entire .loading_box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align: center;z-index: 99;}
.loading_wrap.entire .loading_box b {display: block;font-size: 2.5rem;font-weight: 500;color: #222;}
.loading_wrap.entire .loading_box b::after {content: ' .';position: relative;left: -0.5rem;animation: loading_dots 1s steps(5, end) infinite;}
.loading_wrap.entire .loader {-webkit-animation: loading_rotator 1.4s linear infinite;animation: loading_rotator 1.4s linear infinite;}
.loading_wrap.entire .loader .path {transform-origin: center;stroke: var(--blue);stroke-dasharray: 180;stroke-dashoffset: 0;-webkit-animation: loading_dash 1.4s ease-in-out infinite;animation: loading_dash 1.4s ease-in-out infinite;}
@keyframes loading_dots {
    0%, 20% {color: rgba(0, 0, 0, 0);text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);}
    40% {color: #000;text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);}
    60% {text-shadow: .25em 0 0 #000, .5em 0 0 rgba(0, 0, 0, 0);}
    80%, 100% {text-shadow: .25em 0 0 #000, .5em 0 0 #000;}
}
@keyframes loading_rotator {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(270deg);}
}
@keyframes loading_dash {
    0% {stroke-dashoffset: 180;}
    50% {stroke-dashoffset: 45;transform: rotate(135deg);}
    100% {stroke-dashoffset: 180;transform: rotate(450deg);}
}



/*** progress ***/
.progress_bar {width: 100%;height: 3rem;border-radius: 0.5rem;background: var(--bdr);}
.progress_bar .bar {position: relative;width: 0;height: 100%;border-radius: 0.5rem;background: var(--blue);}
.progress_bar .txt {position: absolute;font-size: 1.5rem;font-weight: 600;}
.progress_bar.typeA .txt {right: 0;top: 0;padding-right: 1rem;line-height: 3rem;color: #fff;}
.progress_bar.typeB .txt {right: 0;top: 3.5rem;line-height: 1;text-align: right;}
.progress_bar.animate .txt {opacity: 0;transition: all 0.2s;transition-delay: 0.7s;}
.progress_bar.animate .bar {transition: width 0.5s;}



/*** popup ***/
.popup_bg {display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);z-index: 5000;}
/* layer popup */
.layer_pop {visibility: hidden;overflow: hidden;position: absolute;left: 0;top: 0;border-radius: 0 0 0.5rem 0.5rem;z-index: -1; width: 100rem;}
.layer_pop * {visibility: hidden;}
.layer_pop.on * {visibility: visible;}
.layer_pop .pop_header {display: flex;justify-content: space-between;align-items: center;position: relative;height: 6.2rem;padding: 1.3rem 2rem;border-bottom: 1px solid var(--bdr);border-radius: 0.5rem 0.5rem 0 0;background: #FFFFFF;}
.layer_pop .pop_header h2 {font-size: 2.2rem;font-weight: 500;}
.layer_pop .pop_close {height: 2.4rem;margin: 0;border: 0;font-size: 0;background: transparent;}
.layer_pop .pop_close i::before {font-size: 2.4rem;color: var(--dark);}
.layer_pop .pop_content {overflow-y: auto;position: relative; padding: 2.5rem 2rem;background: #FFFFFF; font-size: 1.7rem; max-height: 80vh;}
.layer_pop .pop_footer {padding: 1.5rem;text-align: right;background: var(--basic-bg);}
.simplebar-wrapper:focus,
.simplebar-wrapper:focus-visible,
.simplebar-content-wrapper:focus,
.simplebar-content-wrapper:focus-visible,
.simplebar-content:focus,
.simplebar-content:focus-visible {outline: none !important;}

/* main popup */
.main_pop {overflow: hidden;position: absolute;left: 0;top: 0;border-radius: 0.5rem;box-shadow: 0rem 0.5rem 1rem rgba(0, 0, 0, 0.2);z-index: 9999;}
.main_pop .pop_header {display: flex;justify-content: space-between;align-items: center;position: relative;min-height: 6.2rem;height: auto;padding: 1rem 2rem;line-height: 1.3;color: #fff;background: var(--blue);}
.main_pop .pop_header h2 {font-size: 2rem;font-weight: 500;}
.main_pop .pop_close {height: 2.4rem;margin: 0;border: 0;font-size: 0;background: transparent;}
.main_pop .pop_close i::before {font-size: 2.4rem;color: #fff;}
.main_pop .pop_content {overflow-y: auto;position: relative;max-height: 30rem;padding: 2.5rem 2rem;background: #FFFFFF; font-size: 1.7rem;}
.main_pop .pop_content .mCSB_scrollTools_vertical,
.main_pop .pop_content .mCSB_dragger_bar,
.main_pop .pop_content .mCSB_draggerRail {width: 0.5rem !important;margin: 0 !important;}
.main_pop .pop_content .mCSB_dragger_bar {background-color: #6B6B6B !important;}
.main_pop .pop_content .mCSB_scrollTools .mCSB_draggerRail {background-color: #ECECEC !important;}
.main_pop .pop_content .mCSB_container {margin-right: 1.5rem !important;}
.main_pop .pop_content .mCSB_container.mCS_y_hidden {margin-right: 0 !important;}
.main_pop .pop_footer {display: flex;justify-content: space-between;align-items: center;padding: 1rem 1.5rem;font-size: 1.4rem;background: var(--basic-bg);}


/*** text ***/
/* h */
h1 {font-size: 5rem;font-weight: 700;}
h2 {font-size: 4rem;font-weight: 700;}
h3 {font-size: 3.2rem;font-weight: 700;}
h4 {font-size: 2.5rem;font-weight: 700;}
h5 {font-size: 2.1rem;font-weight: 700;}

/* basic text */
.ft_basic {font-size: 1.7rem;font-weight: normal;}

/* txt color */
.red_txt {color: var(--ft_red)!important;}
.green_txt {color: var(--ft_green) !important;}
.blue_txt {color: var(--ft_blue) !important;}

/* error_txt */
.error_txt {margin-top: 0.3rem;font-size: 1.5rem !important;color: var(--ft_red) !important;font-weight: 500; padding-left: 2.4rem; position: relative;}
.error_txt.disin {margin-left: 1rem;margin-top: 0;}
.error_txt::before {font-family: 'xeicon'; color: var(--ft_red); content: "\e9aa"; position:absolute; left: 0; top: -0.1rem; font-size: 1.7rem;}

/* info text */
table .info_txt {margin-top: 0.3rem;}
.info_txt {font-size: 1.7rem;letter-spacing: -0.03em;text-align: left;}
.info_txt + .info_txt {margin-top: 0.2rem;}
.info_txt > span {position: relative;padding-left: 2.3rem;}
.info_txt > span::before {content: '\e9a7';font-family: 'xeicon';position: absolute;left: 0;top: -0.2rem;color: var(--gray);}
.info_txt .btn {min-width: auto;height: 2.4rem;margin-left: 0.5rem;padding: 0 0.5rem;font-size: 1.4rem;line-height: 2.2rem; border-radius: 0.4rem;}
.info_txt .btn + .btn {margin-left: 0.2rem;}
.info_txt .btn i {font-size: 1.3rem;}
.info_txt .btn.icl {padding-left: 0.3rem;}
.info_txt .btn.icr {padding-right: 0.3rem;}

/* warnning box */
.warn_box {padding: 1.5rem 2rem;border: 1px solid var(--bdr);font-size: 1.4rem;color: var(--dark);letter-spacing: -0.03em;background: var(--basic-bg);}
.warn_box .tit {position: relative;margin-bottom: 1rem;padding-left: 2.5rem;font-size: 1.8rem;font-weight: 500;color: #285094;}
.warn_box .tit::before {content: '\ea2d';font-family: 'xeicon';position: absolute;left: 0;top: 0rem;color: #2d5294;}
.warn_box ul {padding-left: 1.5rem;}
.warn_box ul li {position: relative;padding-left: 0.7rem;line-height: 1.5;font-size: 1.6rem;}
.warn_box ul li:not(:last-child) {margin-bottom: 0.6rem;}
.warn_box ul li::before {content: '';position: absolute;left: 0;top: 1rem;width: 0.3rem;height: 0.3rem;background: var(--dark);}
.warn_box li .btn {min-width: auto;height: 2.4rem;margin-left: 0.5rem;padding: 0 0.5rem;font-size: 1.4rem;line-height: 2.2rem; border-radius: 0.4rem;}
.warn_box li .btn + .btn {margin-left: 0rem;}
.warn_box li .btn i {font-size: 1.3rem;}
.warn_box li .btn.icl {padding-left: 0.3rem;}
.warn_box li .btn.icr {padding-right: 0.3rem;}

/* message box */
.msg_box {margin-bottom: 2rem;}
.msg_box {position: relative;padding: 1.5rem 4rem 1.5rem 2rem;border: 1px solid var(--msg-bdr);border-radius: 0.5rem;color: var(--dark);background: var(--msg-bg);}
.msg_box .title {font-size: 1.9rem;font-weight: 500;line-height: 1.3;}
.msg_box p {padding-top: 1rem;font-size: 1.6rem;font-weight: 400;line-height: 1.3;word-break: break-all;}
.msg_box .btn_close {position: absolute;right: 1rem;top: 0.5rem;width: 2.4rem;height: 2.4rem;border: 0;font-size: 2.6rem;color: inherit;background: none;opacity: 0.7;transition: .1s;}
.msg_box .btn_close:hover {opacity: 1;}
.msg_box.red {border-color: var(--msg-red-bdr);color: var(--msg-red-font);background: var(--msg-red-bg);}
.msg_box.yellow {border-color: var(--msg-yellow-bdr);color: var(--msg-yellow-font);background: var(--msg-yellow-bg);}
.msg_box.green {border-color: var(--msg-green-bdr);color: var(--msg-green-font);background: var(--msg-green-bg);}
.msg_box.blue {border-color: var(--msg-blue-bdr);color: var(--msg-blue-font);background: var(--msg-blue-bg);}