:root {
	/* Color */
	--brand-primary: #EF7898;
	--brand-hover: #c24e6e;
	--brand-secondary: #333333;
	--basic-black: #000;
	--basic-darkgray: #434343;
	--basic-middlegray: #7b7b7b;
	--basic-lightgray: #c4c4c4;
	--basic-pale: #f5f5f5;
	--basic-white: #fff;
	--basic-border: #ddd;
	--basic-border2: #ffe7ed;
	--basic-bg: #f9f9f9;
	--basic-bg2: #fff6f9;

	--primary-primary100: #ffe9ef;
	--primary-primary200: #fddbe5;
	--primary-primary300: #fbcdda;
	--primary-primary400: #f7b1c4;
	--primary-primary500: #f395ae;
	--primary-primary700: #d15c7c;
	--primary-primary800: #c24e6e;
	--primary-primary900: #b2405f;

	--state-info: #4c88fb;
	--state-success: #0ec174;
	--state-warning: #020201;
	--state-error: #F93337;

	--badge-re-bg: #ffe9e9;
	--badge-re-color: #ed1418;
	--badge-or-bg: #FEF6EE;
	--badge-or-color: #ff5310;
	--badge-ye-bg: #FEFBE8;
	--badge-ye-color: #CA8504;
	--badge-gr-bg: #EDFCF2;
	--badge-gr-color: #0b9b5d;
	--badge-bl-bg: #EFF8FF;
	--badge-bl-color: #175CD3;
	--badge-nv-bg: #EEF4FF;
	--badge-nv-color: #3538CD;
	--badge-pp-bg: #F9F5FF;
	--badge-pp-color: #6941C6;
	--badge-pk-bg: #FDF2FA;
	--badge-pk-color: #C11574;
	--badge-bk-bg: #f1f1f1;
	--badge-bk-color: #414651;	

	--pastel-re: #F6B0B0;
	--pastel-or: #F6C1A2;
	--pastel-ye: #FAE8A4;
	--pastel-gr: #D4E6A5;
	--pastel-bl: #BFE3E0;
	--pastel-ny: #A7C7E7;
	--pastel-pp: #D2B8E2;
	--pastel-pk: #F5A6A6;
	--pastel-bk: #B0B0B0;

	/* Typography */
	--56_display_r: 400 3.5rem/1.286 'Pretendard', sans-serif;
	--56_display_m: 500 3.5rem/1.286 'Pretendard', sans-serif;
	--56_display_sb: 600 3.5rem/1.286 'Pretendard', sans-serif;
	--56_display_b: 700 3.5rem/1.286 'Pretendard', sans-serif;

	--40_display_r: 400 2.5rem/1.3 'Pretendard', sans-serif;
	--40_display_m: 500 2.5rem/1.3 'Pretendard', sans-serif;
	--40_display_sb: 600 2.5rem/1.3 'Pretendard', sans-serif;
	--40_display_b: 700 2.5rem/1.3 'Pretendard', sans-serif;

	--36_title_r: 400 2.25rem/1.334 'Pretendard', sans-serif;
	--36_title_m: 500 2.25rem/1.334 'Pretendard', sans-serif;
	--36_title_sb: 600 2.25rem/1.334 'Pretendard', sans-serif;
	--36_title_b: 700 2.25rem/1.334 'Pretendard', sans-serif;

	--32_title_r: 400 2rem/1.334 'Pretendard', sans-serif;
	--32_title_m: 500 2rem/1.334 'Pretendard', sans-serif;
	--32_title_sb: 600 2rem/1.334 'Pretendard', sans-serif;
	--32_title_b: 700 2rem/1.334 'Pretendard', sans-serif;

	--30_title_r: 400 1.875rem/1.334 'Pretendard', sans-serif;
	--30_title_m: 500 1.875rem/1.334 'Pretendard', sans-serif;
	--30_title_sb: 600 1.875rem/1.334 'Pretendard', sans-serif;
	--30_title_b: 700 1.875rem/1.334 'Pretendard', sans-serif;

	--28_title_r: 400 1.75rem/1.358 'Pretendard', sans-serif;
	--28_title_m: 500 1.75rem/1.358 'Pretendard', sans-serif;
	--28_title_sb: 600 1.75rem/1.358 'Pretendard', sans-serif;
	--28_title_b: 700 1.75rem/1.358 'Pretendard', sans-serif;

	--24_title_r: 400 1.5rem/1.334 'Pretendard', sans-serif;
	--24_title_m: 500 1.5rem/1.334 'Pretendard', sans-serif;
	--24_title_sb: 600 1.5rem/1.334 'Pretendard', sans-serif;
	--24_title_b: 700 1.5rem/1.334 'Pretendard', sans-serif;
	
	--22_heading_r: 400 1.375rem/1.364 'Pretendard', sans-serif;
	--22_heading_m: 500 1.375rem/1.364 'Pretendard', sans-serif;
	--22_heading_sb: 600 1.375rem/1.364 'Pretendard', sans-serif;
	--22_heading_b: 700 1.375rem/1.364 'Pretendard', sans-serif;

	--20_heading_r: 400 1.25rem/1.4 'Pretendard', sans-serif;
	--20_heading_m: 500 1.25rem/1.4 'Pretendard', sans-serif;
	--20_heading_sb: 600 1.25rem/1.4 'Pretendard', sans-serif;
	--20_heading_b: 700 1.25rem/1.4 'Pretendard', sans-serif;

	--18_headline_r: 400 1.125rem/1.445 'Pretendard', sans-serif;
	--18_headline_m: 500 1.125rem/1.445 'Pretendard', sans-serif;
	--18_headline_sb: 600 1.125rem/1.445 'Pretendard', sans-serif;
	--18_headline_b: 700 1.125rem/1.445 'Pretendard', sans-serif;

	--17_headline_r: 400 1.063rem/1.412 'Pretendard', sans-serif;
	--17_headline_m: 500 1.063rem/1.412 'Pretendard', sans-serif;
	--17_headline_sb: 600 1.063rem/1.412 'Pretendard', sans-serif;
	--17_headline_b: 700 1.063rem/1.412 'Pretendard', sans-serif;

	--16_body_normal_r: 400 1rem/1.4 'Pretendard', sans-serif;
	--16_body_normal_m: 500 1rem/1.4 'Pretendard', sans-serif;
	--16_body_normal_sb: 600 1rem/1.4 'Pretendard', sans-serif;
	--16_body_normal_b: 700 1rem/1.4 'Pretendard', sans-serif;

	--16_body_read_r: 400 1rem/1.6 'Pretendard', sans-serif;
	--16_body_read_m: 500 1rem/1.6 'Pretendard', sans-serif;
	--16_body_read_sb: 600 1rem/1.6 'Pretendard', sans-serif;
	--16_body_read_b: 700 1rem/1.6 'Pretendard', sans-serif;

	--15_body_normal_r: 400 0.938rem/1.467 'Pretendard', sans-serif;
	--15_body_normal_m: 500 0.938rem/1.467 'Pretendard', sans-serif;
	--15_body_normal_sb: 600 0.938rem/1.467 'Pretendard', sans-serif;
	--15_body_normal_b: 700 0.938rem/1.467 'Pretendard', sans-serif;

	--15_body_read_r: 400 0.938rem/1.6 'Pretendard', sans-serif;
	--15_body_read_m: 500 0.938rem/1.6 'Pretendard', sans-serif;
	--15_body_read_sb: 600 0.938rem/1.6 'Pretendard', sans-serif;
	--15_body_read_b: 700 0.938rem/1.6 'Pretendard', sans-serif;

	--14_label_normal_r: 400 0.875rem/1.429 'Pretendard', sans-serif;
	--14_label_normal_m: 500 0.875rem/1.429 'Pretendard', sans-serif;
	--14_label_normal_sb: 600 0.875rem/1.429 'Pretendard', sans-serif;
	--14_label_normal_b: 700 0.875rem/1.429 'Pretendard', sans-serif;

	--14_label_read_r: 400 0.875rem/1.571 'Pretendard', sans-serif;
	--14_label_read_m: 500 0.875rem/1.571 'Pretendard', sans-serif;
	--14_label_read_sb: 600 0.875rem/1.571 'Pretendard', sans-serif;
	--14_label_read_b: 700 0.875rem/1.571 'Pretendard', sans-serif;

	--13_label_r: 400 0.813rem/1.385 'Pretendard', sans-serif;
	--13_label_m: 500 0.813rem/1.385 'Pretendard', sans-serif;
	--13_label_sb: 600 0.813rem/1.385 'Pretendard', sans-serif;
	--13_label_b: 700 0.813rem/1.385 'Pretendard', sans-serif;

	--12_caption_r: 400 0.75rem/1.334 'Pretendard', sans-serif;
	--12_caption_m: 500 0.75rem/1.334 'Pretendard', sans-serif;
	--12_caption_sb: 600 0.75rem/1.334 'Pretendard', sans-serif;
	--12_caption_b: 700 0.75rem/1.334 'Pretendard', sans-serif;

	--11_caption_r: 400 0.688rem/1.273 'Pretendard', sans-serif;
	--11_caption_m: 500 0.688rem/1.273 'Pretendard', sans-serif;
	--11_caption_sb: 600 0.688rem/1.273 'Pretendard', sans-serif;
	--11_caption_b: 700 0.688rem/1.273 'Pretendard', sans-serif;

	--10_caption_r: 400 0.625rem/1.273 'Pretendard', sans-serif;
	--10_caption_m: 500 0.625rem/1.273 'Pretendard', sans-serif;
	--10_caption_sb: 600 0.625rem/1.273 'Pretendard', sans-serif;
	--10_caption_b: 700 0.625rem/1.273 'Pretendard', sans-serif;

	/* Transition */
	--transition: all 0.4s ease;

	/* Shadow */
	--box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.08)
}
  
  
/* common */
* { margin: 0; padding: 0; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
body {margin: 0; padding: 0; -ms-overflow-style: none; scrollbar-width: none; min-width: 1280px;}
body::-webkit-scrollbar {display: none;}
html { scroll-behavior: smooth; }
/*
html, body {font: 400 16px/1.3 'Pretendard', sans-serif;  color: var(--basic-black); width: 100%; position: relative;}
*/
html, body {font: 400 16px/1.3 'Pretendard', sans-serif;  color: var(--basic-black); width: 100%; }
ul, li {list-style: none;}
a {text-decoration: none; color: inherit; -webkit-tap-highlight-color: transparent;}
img {max-width: 100%;}
button { font-family: inherit; border: none; background-color: transparent; outline: 0;  cursor: pointer; }
input,textarea,button,select {font-family: inherit;}
::-webkit-scrollbar {width: 0.75rem; height: 0.75rem;}
::-webkit-scrollbar-track {background: var(--basic-white);}
::-webkit-scrollbar-thumb {background: var(--basic-middlegray); border-radius: 6.25rem; border: 2px solid var(--basic-white); cursor: pointer;}

body.hidden { overflow: hidden;}
body::before { content: "";  position: fixed;  left: 0;  top: 0;  width: 100%;  height: 100%; background-color: rgba(0,0,0,0.25); z-index: 99;  transition: all 0.4s ease; opacity: 0; pointer-events: none;cursor: pointer;}
body.hidden::before { opacity: 1;  pointer-events: auto;}
  
  
.fs_12 { font-size: 12px !important; }
.wrap {width: 100%; position: relative;}
.container {position: relative; width: 100%; } 


/* form */
.form {position: relative; width: 100%;}
.form_tit {font:var(--20_heading_sb); color: var(--basic-darkgray);}
.form_box {width: 100%; display: flex; flex-direction: column; gap: 1.25rem;}
.form_box.gap_lg {gap: 1.5rem;}
.form_box.gap_lg2 {gap: 2.5rem;}
.form_box.gap_sm {gap: 1rem;}
.form_box.flex_wrap {flex-wrap: wrap; flex-direction: row; gap: 1.5rem 1.25rem;}
.form_box .form_item {width: calc((100% - 1.5rem)/2);}
.form_box .form_item.full {width: 100%;}
.form_box .form_item.wid33 {width: calc((100% - 1.5rem*2)/3);}
.form_box .form_item.wid25 {width: calc((100% - 1.5rem*3)/4);}
.form_box .form_item.wid20 {width: calc((100% - 1.5rem*4)/5);}


/* inputs */
.input_box {width: 100%; position: relative; display: flex; flex-direction: column; gap: 0.625rem;}
.input_box.gap_sm {gap: 0.375rem;}
.input_box.auto {width: auto;}
.input_box.flex { flex-direction: row; align-items: center; gap: 0.75rem;}
.input_box .label_text {font: var(--16_body_normal_m);letter-spacing: 0.01em;color: var(--basic-darkgray); margin-bottom: 0;}
.input_box .label_text.required {position: relative; padding-left: 0.625rem;}
.input_box .label_text.required::before { content: ""; position: absolute;  left: 0;  top: 0; width: 0.375rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--brand-primary);}
.input_box .label_text.input_txt {color: var(--basic-darkgray);}
.input_box .input_text {border: 1px solid var(--basic-border); border-radius: 0.625rem;
padding: 0 1rem; background: var(--basic-white); width: 100%; height: 2.75rem; font: var(--16_body_normal_r); letter-spacing: 0.01em; color: var(--basic-darkgray); transition: var(--transition); text-overflow: ellipsis;}
.input_box .input_text:focus {border-color: var(--basic-darkgray);}
.input_box .input_text:read-only { border-color: var(--basic-lightgray);  color: var(--basic-darkgray); background: var(--basic-pale);}
.input_box .input_text::placeholder {color: var(--basic-lightgray); transition: var(--transition);}
.input_box.flex .input_text {flex: 1;}
.input_box textarea.input_text {height: 12.5rem; padding: 0.75rem 1rem; resize: none;}
.input_box .input_text.icon_ver {background: no-repeat right 1rem center/1rem auto var(--basic-white); padding-right: 2.5rem; cursor: pointer;}
.input_box .input_text.icon_ver.icon_edit {background-image: url(../img/ic_edit.png) ;}
.input_box .input_text.icon_ver.icon_date {background-image: url(../img/ic_datepicker.png);}
.input_box .input_text.align_left {text-align: left;}
.input_box .input_text.align_center {text-align: center;}
.input_box .input_text.align_right {text-align: right;}
.input_box .input_text.point {background: var(--primary-primary100); color: var(--basic-darkgray);}

.input_box .input_status {font:var(--14_label_normal_m); letter-spacing: 0.01em; color: var(--basic-middlegray); text-align: left; word-break: keep-all;}
.input_box .input_status.success {color: var(--state-success);}
.input_box .input_status.warning {color: var(--state-warning);}
.input_box .input_status.error {color: var(--state-error);}
.input_box .input_status.point {color: var(--brand-primary);}
.input_box .input_btn{font: var(--16_body_read_m);letter-spacing: 0.01em;color: var(--basic-white); background: var(--basic-black); border-radius: 0.625rem; padding: 0 1rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;} 

.input_flex {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.625rem;}
.input_flex.wrap {flex-wrap: wrap;}
.input_flex .input_text {flex: 1;}
.input_flex .full {flex: 1;}
.input_flex .nofull {flex: unset; width: auto;}
.input_flex .input_text.wid80 {flex: unset; width: 5.125rem;}
.input_flex .input_box .input_text {flex:unset}

.input_sch_box {position: relative;}
.input_sch_box .input_text { background: var(--basic-bg); padding: 0 1.25rem; height: 3rem;  padding-right: 3rem; border-radius: 6.25rem; border-color: transparent;}
.input_sch_box .input_text:focus {background: var(--basic-white);}
.input_sch_box .input_text.ver2 {background: var(--basic-white);border: 1px solid var(--basic-border);}
.input_sch_box .sch_btn { background: url(../img/ic_serach.png) no-repeat center / contain; width: 1.25rem;  aspect-ratio: 1 / 1;  position: absolute;  right: 1.25rem;  top: 50%;  transform: translateY(-50%);}

.input_file_wrap {display: flex; flex-direction: column; gap: 0.5rem;}
.input_file_box .input_file {display: none;}
.input_file_box .label_file {flex: 1; border: 1px solid var(--basic-border); border-radius: 0.625rem; padding: 0 1rem; background: var(--basic-white); width: 100%; height: 2.75rem; font: var(--16_body_normal_r); letter-spacing: 0.01em; color: var(--basic-lightgray); transition: var(--transition); text-overflow: ellipsis; display: flex; align-items: center; cursor: pointer;}
.input_file_box .label_file.attached { color: var(--basic-darkgray);}

.input_file_box .label_file.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 0.625rem; border-radius: 0.375rem;}
.input_file_box .label_file.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 0.625rem;  border-radius: 0.375rem;}
.input_file_box .file_data { font: var(--14_label_normal_r);  letter-spacing: 0.01em;    color: var(--basic-darkgray); display: flex; align-items: center; gap: 0.375rem;}
.input_file_box .file_data .icon{ width: 1rem;}
.input_file_box .file_data .txt{white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis; display: inline-block;}
.input_file_box .file_data .delete_btn{font-size: 1rem; display: flex; align-items: center; justify-content: center; color: var(--brand-primary);}
.input_file_box .file_preview {display: flex;}
.input_file_box .file_preview.mw100 {max-width: 10rem; }
.input_file_box .file_preview .img{width: 100%; object-fit: contain;}
.input_file_box .file_preview .img.auto {width: auto;}

.input_box .input_color {position: relative; appearance: none; border: none; padding: 0;margin: 0; width: 1.5rem; aspect-ratio: 1/1; height: auto; cursor: pointer; border-radius: 0.25rem;}
.input_box .input_color::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);width: calc(100% - 2px);height: calc(100% - 2px);     border: 1px solid var(--basic-border); border-radius: 0.25rem;}
.input_box .input_color::-webkit-color-swatch-wrapper {padding: 0;} 
.input_box .input_color::-webkit-color-swatch {border: none;}
.input_box .input_color::-moz-color-swatch {border: none;}

.input_sch_box .input_text.size_md ~ .sch_btn { width: 0.875rem;  right: 0.625rem; }
.input_sch_box .input_text.size_sm ~ .sch_btn { width: 0.875rem;  right: 0.625rem; }
.input_box .label_text.size_title {font: var(--18_headline_sb);}
.input_box .label_text.size_md {font: var(--14_label_normal_r);}
.input_box .label_text.size_sm {font: var(--13_label_r);}

.input_box .input_text.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 0.625rem; border-radius: 0.375rem;}
.input_box .input_text.size_md.icon_ver {padding: 0 2rem 0 0.625rem; background-position: right 0.625rem center;  background-size: 0.875rem;}
.input_box .input_text.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 0.625rem;  border-radius: 0.375rem;}
.input_box .input_text.size_sm.icon_ver {padding: 0 2rem 0 0.625rem;  background-position: right 0.625rem center; background-size: 0.875rem;}

.input_box textarea.input_text.h_auto {height: unset;}
.input_box textarea.input_text.size_md {padding: 0.625rem;}
.input_box textarea.input_text.size_sm {padding: 0.625rem;}

.input_box .input_btn.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 0.625rem; border-radius: 0.375rem;}
.input_box .input_btn.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 0.625rem;  border-radius: 0.375rem;}


/* datepicker */
#datepicker:focus>.ui-datepicker { display: block; }
.ui-datepicker { font-family: inherit; display: none; margin-top: 0.75rem; margin-left: 0px; margin-right: 0px;  width: auto;  box-shadow: 0 0.25rem 1.25rem 0 rgba(0, 0, 0, 0.1); border: 1px solid var(--basic-pale); border-radius: 1rem; padding: 1.25rem 0.5rem 1rem;  background: var(--basic-white);}
.ui-widget.ui-widget-content {border: 1px solid var(--basic-pale);}
.ui-datepicker .ui-datepicker-header { position: relative; padding: 0 0.625rem; display: flex;  align-items: center; border-radius: 0; background: #fff; margin-bottom: 1rem;  border: 0;}
.ui-datepicker .ui-datepicker-title { flex: 1;  margin: 0;  padding: 0;  text-align: left; order: 1;  font: var(--14_label_normal_sb); letter-spacing: 0.01em;  color: var(--basic-black);}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: relative; width: 1rem  !important; height: auto !important; left: auto; right:auto; top: auto; aspect-ratio: 1 / 1; display: flex; cursor: pointer;}
.ui-datepicker .ui-datepicker-prev {order: 2; margin-right: 0.5rem;}
.ui-datepicker .ui-datepicker-next {order: 3;}
.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span { background: no-repeat center / contain; width: 100%; height: 100%;}
.ui-datepicker .ui-datepicker-prev span{ background-image: url(/niabbs5/erp/img/datepicker_prev.png);}
.ui-datepicker .ui-datepicker-next span{ background-image: url(/niabbs5/erp/img/datepicker_next.png);}
.ui-datepicker-calendar { width: 100%; }  
.ui-datepicker table {margin: 0;}
.ui-datepicker-calendar>thead>tr>th { width: 1.875rem; height: 1.875rem;  padding: 0;  }
.ui-datepicker-calendar>thead>tr>th span {font: var(--14_label_normal_m); letter-spacing: 0.01em; color: var(--basic-black);}
.ui-datepicker-calendar>thead>tr>th span[title="일요일"] {color: var(--state-error);}
.ui-datepicker-calendar>thead>tr>th span[title="토요일"] {color: var(--state-info);}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: none; background-color: transparent;text-align: center; width: 1.875rem; height: 1.875rem; padding: 0; font: var(--14_label_normal_m);    display: flex;  align-items: center; justify-content: center;letter-spacing: 0.01em;color: var(--basic-darkgray);}
.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,
.ui-button:hover,.ui-button:focus { border: none; background-color: transparent;text-align: center; width: 1.875rem; height: 1.875rem; padding: 0; font: var(--14_label_normal_m);   display: flex;  align-items: center; justify-content: center;letter-spacing: 0.01em;color: var(--basic-darkgray);}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {position: relative; font-weight: 600; color: var(--brand-primary); }
.ui-state-highlight::before, .ui-widget-content .ui-state-highlight::before, .ui-widget-header .ui-state-highlight::before { content: ""; border-radius: 0.5rem; color: var(--brand-primary); background: var(--primary-primary100);  width: 1.875rem; aspect-ratio: 1 / 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {border: none; background: transparent; position: relative; color: #fff}
.ui-state-active::before, .ui-widget-content .ui-state-active::before, .ui-widget-header .ui-state-active::before, a.ui-button:active::before, .ui-button:active::before, .ui-button.ui-state-active:hover::before { content: ""; border-radius: 0.5rem; background: var(--brand-primary);  width: 1.875rem; aspect-ratio: 1 / 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1;}
.ui-state-disabled { cursor: auto; color: #cccccc;}    
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {cursor: auto;  background-color: #fff; }  
.ui-state-disabled, .ui-widget-content .ui-state-disabled , .ui-widget-header .ui-state-disabled { opacity: 1;}
.ui-state-disabled, .ui-widget-content .ui-state-disabled span, .ui-widget-header .ui-state-disabled span { color: var(--basic-lightgray);}


/* select */
.select_box {position: relative; padding: 5px; border-radius: 5px; }
.select_box.full {width: 100%; flex: 1;}
/*
.select_box .select { appearance: none; width: 100%; height: 2.75rem; font: var(--16_body_normal_r);  letter-spacing: 0.01em;  color: var(--basic-darkgray);  background: url(../img/select_arrow.png) no-repeat right 1rem center / 1rem var(--basic-white); border: 1px solid var(--basic-border); border-radius: 0.625rem; padding: 0 2.5rem 0 1rem; transition: var(--transition); cursor: pointer;text-overflow: ellipsis;}
.select_box .select:disabled { border-color: var(--basic-lightgray);  color: var(--basic-darkgray); background-color: var(--basic-pale);}

.select_box .select.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 2rem 0 0.625rem; background-position: right 0.625rem center;  background-size: 0.875rem; border-radius: 0.375rem;}
.select_box .select.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 2rem 0 0.625rem;  background-position: right 0.625rem center; background-size: 0.75rem; border-radius: 0.375rem;}
.select_box .select.point {background-color: var(--primary-primary100); color: var(--basic-darkgray); }
.select_box .select.typeB { height: unset;padding: 0.5rem; background: #fff;}
.select_box .select.typeB option {padding: 0.25rem 0.5rem; transition: var(--transition);}
.select_box .select.typeB option.tit { color: var(--brand-primary); font-weight: 800;  border-bottom: 1px solid var(--basic-border); margin-bottom: 0.5rem;}
.select_box .select.typeB option:hover {background: var(--primary-primary200); color: var(--brand-primary); }
.select_box .select.typeB option:checked {background: var(--brand-primary); color: var(--basic-white);}

.select { appearance: none; width: 100%; height: 2.75rem; font: var(--16_body_normal_r);  letter-spacing: 0.01em;  color: var(--basic-darkgray);  background: url(../img/select_arrow.png) no-repeat right 1rem center / 1rem var(--basic-white); border: 1px solid var(--basic-border); border-radius: 0.625rem; padding: 0 2.5rem 0 1rem; transition: var(--transition); cursor: pointer;text-overflow: ellipsis;}
*/
.select { appearance: none; max-width: 100%; height: 2.75rem; font: var(--16_body_normal_r);  letter-spacing: 0.01em;  color: var(--basic-darkgray);  background: url(../img/select_arrow.png) no-repeat right 1rem center / 1rem var(--basic-white); border: 1px solid var(--basic-border); border-radius: 0.625rem; padding: 0 2.5rem 0 1rem; transition: var(--transition); cursor: pointer;text-overflow: ellipsis;}
.select:disabled { border-color: var(--basic-lightgray);  color: var(--basic-darkgray); background-color: var(--basic-pale);}

.select.size_md {height: 2.25rem;  font: var(--14_label_normal_r); padding: 0 2rem 0 0.625rem; background-position: right 0.625rem center;  background-size: 0.875rem; border-radius: 0.375rem;}
.select.size_sm {height: 2rem; font: var(--13_label_r); padding: 0 2rem 0 0.625rem;  background-position: right 0.625rem center; background-size: 0.75rem; border-radius: 0.375rem;}
.select.point {background-color: var(--primary-primary100); color: var(--basic-darkgray); }
.select.typeB { height: unset;padding: 0.5rem; background: #fff;}
.select.typeB option {padding: 0.25rem 0.5rem; transition: var(--transition);}
.select.typeB option.tit { color: var(--brand-primary); font-weight: 800;  border-bottom: 1px solid var(--basic-border); margin-bottom: 0.5rem;}
.select.typeB option:hover {background: var(--primary-primary200); color: var(--brand-primary); }
.select.typeB option:checked {background: var(--brand-primary); color: var(--basic-white);}
/* 공통 - select2 */
.select2-container .selection {width: 100%; display: block;}
.select2-container--default .select2-selection--single {  width: 100%;   height: 2.25rem; border: 1px solid var(--basic-border);  border-radius: 0.375rem; padding: 0 0.625rem;  transition: var(--transition);  cursor: pointer;  text-overflow: ellipsis;  display: flex;  align-items: center; gap: 1rem; text-align: left;}
.select2-container--default .select2-selection--single .select2-selection__rendered {  font-size: 0.875rem;  letter-spacing: 0.01em;  line-height: 100%;  color: var(--basic-darkgray); padding: 0;  flex: 1;}
.select2-container--default .select2-selection--single .select2-selection__rendered > span {display: flex; align-items: center; gap: 0.5rem;}
.select2-container--default .select2-selection--single .select2-selection__rendered .icon { width: 1rem !important; height: 1rem !important; margin: 0 !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered .txt {  flex: 1;  overflow: hidden; text-overflow: ellipsis;}
.select2-container--default .select2-selection--single .select2-selection__arrow {   position: relative; height: auto; top: auto; transform: none;  width: 0.875rem;  aspect-ratio: 1 / 1;  background: url(../img/select_arrow.png) no-repeat center / contain;  transition: all 0.4s;}
.select2-container--default .select2-selection--single .select2-selection__arrow b {display: none;}
.select2-container--default .select2-search--dropdown {display: none;}
.select2-container--default .select2-dropdown--below { border: 1px solid var(--basic-border); border-radius: 0 0 0.375rem 0.375rem; min-width: min-content !important; overflow: hidden;}
.select2-container--default .select2-results>.select2-results__options { max-height: 25rem;}
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {display: none;}
.select2-results__option--selectable {  font: var(--14_label_normal_r);  color: var(--basic-darkgray); padding: 0.375rem 0.625rem; transition: var(--transition);}
.select2-results__option--selectable > span {display: flex; align-items: center; gap: 0.375rem;}
.select2-results__option--selectable .icon { width: 1.75rem; height: 1.75rem;}
.select2-results__option--selectable .txt {flex: 1; white-space: nowrap;}
.select2-container--open .select2-selection--single .select2-selection__arrow {  transform: rotate(180deg);}
.select2-container--default .select2-results__option--selected { background-color: var(--primary-primary500); color: var(--basic-white);}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--basic-bg); color: var(--basic-black);}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selected { background-color: var(--primary-primary500); color: var(--basic-white);}

.select2-container--default .input_ver .select2-search--dropdown {display: block;}
.select2-container--default .select2-search--dropdown .select2-search__field {  border: 1px solid var(--basic-border); border-radius: 0.25rem; padding: 0 0.5rem;  background: var(--basic-white); width: 100%; height: 1.875rem; font: var(--13_label_r);  letter-spacing: 0.01em; color: var(--basic-darkgray); transition: var(--transition);}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {    border-color: var(--basic-darkgray);}
.select2-results__option.select2-results__message { font: var(--14_label_normal_r);   color: var(--basic-middlegray);  transition: var(--transition);  padding: 2rem 0.625rem;  text-align: center;}

/* .select2-container--default.ver2[data-class="typeA"] .select2-selection--single { border-color: #01a4ff; background: #dcf2ff;}
.select2-container--default.ver2[data-class="typeA"] .select2-selection--single .select2-selection__rendered {color: #01a4ff;} */


/* checkbox */
.check_wrap {position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1.25rem;}
.check_box {display: flex; align-items: center; gap: 0.5rem;}
.check_box.align_start {align-items: flex-start;}
.check_box .input_check{position: relative; appearance: none; border: 1px solid var(--basic-border); border-radius: 0.25rem; width: 1.25rem; height: 1.25rem; background: var(--basic-white); transition: var(--transition); cursor: pointer;}
.check_box .input_check::before{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(../img/ic_check_off.png) no-repeat center/contain; width: 0.75rem; aspect-ratio: 1/1; transition: var(--transition); }
.check_box .input_check:checked{background:  var(--brand-primary); border-color:  var(--brand-primary);}
.check_box .input_check:checked::before{background-image: url(../img/ic_check_on.png);}
.check_box .label_check{font: var(--16_body_normal_r);letter-spacing: 0.01em;color: var(--basic-darkgray); cursor: pointer; margin-bottom: 0;}
.check_box .input_check:disabled {pointer-events: none;}
.check_box .input_check:disabled + .label_check{color: var(--basic-lightgray);pointer-events: none;}
.check_box .label_check img {display: inline-block; vertical-align: middle;}
.check_box .label_check .point {color: var(--brand-primary);}
.check_box .label_check .underline {text-decoration: underline;text-decoration-skip-ink: none;font-weight: 600; text-underline-offset: 3px;}
.check_box .label_check .imgbadge {height: 1.25rem;}
.check_box .label_check.flexible { display: flex; align-items: center; gap: 0.5rem;}

.check_box.size_md {gap: 0.375rem;}
.check_box.size_md .input_check  { width: 1.125rem; height: 1.125rem;}
.check_box.size_md .input_check::before {  width: 0.625rem;}
.check_box.size_md .label_check {font: var(--14_label_normal_r);}
.check_box.size_md .label_check.flexible { gap: 0.375rem;}
.check_box.size_sm {gap: 0.25rem;}
.check_box.size_sm .input_check  { width: 1rem; height: 1rem;}
.check_box.size_sm .input_check::before {  width: 0.625rem;}
.check_box.size_sm .label_check {font: var(--13_label_r);}
.check_box.size_sm .label_check.flexible { gap: 0.25rem;}


/* radio Button */
.radio_wrap {position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1.25rem;}
.radio_wrap.gap2 {gap: 0.375rem 0.625rem;}
.radio_box {display: flex; align-items: center; gap: 0.5rem;}
.radio_box.align_start {align-items: flex-start;}
.radio_box .input_radio{position: relative; appearance: none; width: 1.25rem; height: 1.25rem; border: 1px solid var(--basic-border);transition: var(--transition); cursor: pointer; border-radius: 50%; margin: 0; padding: 0; background: var(--basic-white);} 
.radio_box .input_radio::before{content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; width: 70%; aspect-ratio: 1/1; background: var(--basic-border); transition: var(--transition); opacity: 0;}
.radio_box .input_radio:checked{border-color:  var(--brand-primary);}
.radio_box .input_radio:checked::before{background: var(--brand-primary); opacity: 1;}
.radio_box .label_radio{font: var(--16_body_normal_r);letter-spacing: 0.01em;color: var(--basic-darkgray); cursor: pointer;}
.radio_box .label_radio img {display: inline-block; vertical-align: middle;}
.radio_box .label_radio .point {color: var(--brand-primary); font-weight: 500;}
.radio_box .label_radio .imgbadge {height: 1.25rem;}
.radio_box .input_radio:disabled {pointer-events: none;}
.radio_box .input_radio:disabled + .label_radio{color: var(--basic-lightgray);pointer-events: none;}

.radio_box.size_md {gap: 0.375rem;}
.radio_box.size_md .input_radio { width: 1rem; height: 1rem;}
.radio_box.size_md .label_radio {font: var(--14_label_normal_r);}
.radio_box.size_sm {gap: 0.25rem;}
.radio_box.size_sm .input_radio { width: 0.875rem; height: 0.875rem;}
.radio_box.size_sm .label_radio {font: var(--13_label_r);}


/* switch Button */
.switch_box {position: relative; display: flex; align-items: center; gap:0.5rem;}
.switch_box .input_switch{position: relative; appearance: none; width: 2.75rem; height: 1.5rem; background: var(--basic-border); border-radius: 6.25rem; cursor: pointer; transition: var(--transition);}
.switch_box .input_switch::before{ content: ""; position: absolute; left: 0.125rem;  top: 50%; transform: translateY(-50%); width: 1.25rem; aspect-ratio: 1 / 1; border-radius: 6.25rem; background: var(--basic-white); transition: var(--transition);}
.switch_box .input_switch:checked{background: var(--brand-primary);}
.switch_box .input_switch:checked::before{left: calc(100% - 1.25rem - 0.125rem);}
.switch_box .label_switch{font: var(--16_body_normal_r);letter-spacing: 0.01em;color: var(--basic-darkgray); cursor: pointer; margin-bottom: 0;}
.switch_box.reverse { flex-direction: row-reverse;}


/* tab */
.tab_wrap {position: relative; display: flex; flex-direction: column; gap: 2.5rem;}
.tab_navbox {position: relative; display: flex;background: var(--basic-white);}
.tab_navbox::before {position: relative; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.188rem; background:  var(--basic-pale); transition: var(--transition);} 
.tab_navbox .tab_nav {position: relative; flex: 1; font: var(--16_body_normal_r); letter-spacing: 0.01em;  text-align: center;  color: var(--basic-middlegray);  cursor: pointer; transition: var(--transition);}
.tab_navbox .tab_nav.on { color: var(--brand-primary); font-weight: 600;}
.tab_navbox .tab_nav::after { content: ""; position: absolute; left: 50%; bottom: 0;  transform: translateX(-50%);  width: 100%; height: 0.188rem;  background: var(--brand-primary); opacity: 0; transition: var(--transition);}
.tab_navbox .tab_nav.on::after {opacity: 1;}
.tab_navbox .tab_nav .link {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;  padding-bottom: 0.625rem;}
.tab_navbox .tab_nav .link:hover {text-decoration: none;}
.tab_contbox { position: relative; margin-bottom: 20px;}
.tab_contbox .tab_cont { display: none; animation: 1.2s ease 0s fadeIn;}
.tab_contbox .tab_cont.on {display: block;}
@keyframes fadeIn {	0% {opacity:0} 100% {opacity:1;} }

.tab_navbox.round_ver { gap: 0.625rem; background: none;}
.tab_navbox.round_ver .tab_nav { flex: unset;  background: var(--basic-white);  font: var(--15_body_normal_m); letter-spacing: 0.01em;  color: var(--basic-middlegray);   border: 1px solid var(--basic-border); height: 2.25rem;  border-radius: 6.25rem;}
.tab_navbox.round_ver::before,
.tab_navbox.round_ver .tab_nav::after {display: none}
.tab_navbox.round_ver .tab_nav.on { box-shadow: 0 0 1.25rem 0 rgb(239, 120, 152, 0.3);  background: var(--brand-primary); border-color: var(--brand-primary); color: var(--basic-white);}
.tab_navbox.round_ver .tab_nav .link {padding: 0 1.5rem;}

.tab_navbox.tabs_ver {position: relative; border: 1px solid var(--brand-primary); border-radius: 0.625rem; overflow: hidden;}
.tab_navbox.tabs_ver::before {display: none}
.tab_navbox.tabs_ver .tab_nav{position: relative; color: var(--brand-primary);}
.tab_navbox.tabs_ver .tab_nav::after {display: none}
.tab_navbox.tabs_ver .tab_nav::before {content: ""; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background: var(--brand-primary); opacity: 1; pointer-events: none;}
.tab_navbox.tabs_ver .tab_nav:last-child::before {display: none;}
.tab_navbox.tabs_ver .tab_nav.on{background : var(--brand-primary); color: var(--basic-white);}
.tab_navbox.tabs_ver .tab_nav .link { padding: 0.5rem 1rem; white-space: nowrap;}

.tab_wrap.size_md .tab_navbox .tab_nav { font: var(--14_label_normal_r); height: 2.125rem;}
.tab_wrap.size_md .tab_navbox.tabs_ver { border-radius: 0.375rem;}

.tab_swiper {width: 100%;}
.tab_swiper .swiper-slide {width: auto; white-space: nowrap;}
/* .tab_swiper .swiper-slide:last-child {margin-right: 0;} */


/* pagination */
.pagination {display: flex; align-items: center; justify-content: center; gap: 1rem;}
.pagination.mt {margin-top: 2.5rem;}
.pagination .page {border: 1px solid var(--basic-border);border-radius: 0.5rem; min-width: 2rem; aspect-ratio: 1/1;display: flex; align-items: center; justify-content: center;  background-color: var(--basic-white); overflow: hidden; }
.pagination .page_btn{position: relative;}
.pagination .page_btn.prev{margin-left: -0.5rem;}
.pagination .page_btn.next{margin-right: -0.5rem;}
.pagination .page_btn::after {content: ""; background: no-repeat center/contain; width: 0.875rem; aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.pagination .page_btn.start::after{background-image: url(../img/page_start.png);}
.pagination .page_btn.prev::after{background-image: url(../img/page_prev.png);}
.pagination .page_btn.next::after{background-image: url(../img/page_next.png);}
.pagination .page_btn.end::after{background-image: url(../img/page_end.png);}
.pagination .page_link{font: var(--14_label_normal_r);letter-spacing: 0.01em;text-align: center;color: var(--basic-darkgray);}
.pagination .page_link.active{color: var(--basic-white); font-weight: 600;background: var(--brand-primary); border-color: var(--brand-primary);}
.pagination .page a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative;}


/* button */
.button_wrap {position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1.25rem;}
.button {display: flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 0.625rem; height: 3.125rem; width: 12.5rem; padding: 0 5rem; font: var(--18_headline_m);letter-spacing: 0.01em;color: var(--basic-white); transition: var(--transition);}
.button.typeA {border: 1px solid var(--brand-primary); background: var(--brand-primary); color: var(--basic-white);}
.button.typeA:hover { box-shadow: 0 0 0.5rem rgb(239, 120, 152, 0.5)}
.button.typeB {border: 1px solid var(--brand-primary); background: var(--basic-white); color: var(--brand-primary);}
.button.typeB:hover { box-shadow: 0 0 0.5rem rgb(239, 120, 152, 0.5)}
.button.typeC {border: 1px solid var(--basic-black); background: var(--basic-black); color: var(--basic-white);}
.button.typeC:hover { box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);}
.button.typeD {border: 1px solid var(--basic-middlegray); background: var(--basic-white); color: var(--basic-darkgray);}
.button.typeD:hover { box-shadow: 0 0 0.5rem rgba(123, 123, 123, 0.25);}
.button.typeE {border: 1px solid var(--brand-hover); background: var(--brand-hover); color: var(--basic-white);}
.button.typeE:hover { box-shadow: 0 0 0.5rem rgb(194, 78, 110, 0.5)}
.button.typeF {border: 1px solid var(--brand-hover); background: var(--basic-white); color: var(--brand-hover);}
.button.typeF:hover { box-shadow: 0 0 0.5rem rgb(194, 78, 110, 0.5)}
.button.typeG {border: 1px solid var(--basic-white); color: var(--basic-white);}
.button.typeG:hover { box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.5)}
.button.typeH {border: 1px solid var(--basic-border); background: var(--basic-white); color: var(--basic-darkgray);}
.button.typeH:hover { box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);}
.button.type_success {background: var(--state-success); color: var(--basic-white); border-color: var(--state-success);}
.button.type_info {background: var(--state-info); color: var(--basic-white); border-color: var(--state-info);}
.button.type_warning {background: var(--state-warning); color: var(--basic-white);border-color: var(--state-warning);}
.button.type_error {background: var(--state-error); color: var(--basic-white); border-color: var(--state-error);}
.button:disabled {border: 1px solid var(--basic-pale); background: var(--basic-pale); color: var(--basic-lightgray);}
.button.round {border-radius: 6.25rem;}
.button.auto {width: auto;}
.button.full {width: 100%;}
.button.size_md { font: var(--16_body_normal_m); height: 2.5rem;  border-radius: 0.5rem; padding: 0 1.25rem; gap: 0.375rem; }
.button.size_sm { font: var(--14_label_normal_m); height: 2.25rem;  border-radius: 0.375rem; padding: 0 1rem; gap: 0.375rem }
.button .icon {width: 1.25rem; font-size: 1.375rem;}
.button .icon.color { color: var(--brand-primary);}
.button.size_md .icon {width: 1.125rem; font-size: 1.25rem;}
.button.size_sm .icon {width: 1rem; font-size: 1.125rem;}

.icon_button { display: inline-flex; align-items: center;  justify-content: center; vertical-align: bottom;}
.icon_button .icon {width: 1.25rem; font-size: 1.375rem; color: var(--brand-primary);}
.icon_button .icon.ver2 {color: var(--basic-darkgray);}
.icon_button.size_md .icon {width: 1.125rem; font-size: 1.25rem;}
.icon_button.size_sm .icon {width: 1rem; font-size: 1.125rem;}


/* tags */
.tagsbox {display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 1rem;}
.tag{font: var(--14_label_normal_r); display: flex; align-items: center; justify-content: center;letter-spacing: 0.01em; border: 1px solid transparent; border-radius: 0.25rem; padding: 0.375rem 0.625rem;}
.tag.typeA {background: var(--brand-primary); color: var(--basic-white);border-color: var(--brand-primary);} 
.tag.typeB {background: var(--basic-white); color: var(--brand-primary); border-color: var(--brand-primary);}
.tag.typeC {background: var(--state-success); color: var(--basic-white); border-color: var(--state-success);}
.tag.typeD {background: var(--state-info); color: var(--basic-white); border-color: var(--state-info);}
.tag.typeE {background: var(--state-warning); color: var(--basic-white);border-color: var(--state-warning);}
.tag.typeF {background: var(--state-error); color: var(--basic-white); border-color: var(--state-error);}
.tag.typeG {background: var(--basic-lightgray);color: var(--basic-white) ;border-color: var(--basic-lightgray);}
.tag.typeH {background: var(--basic-black);color: var(--basic-white); border-color: var(--basic-black);}


/* badge */
.badgebox {display: flex; align-items: center; flex-wrap: wrap; gap: 0.625rem 1rem;}
.badge {display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; font: var(--12_caption_m); letter-spacing: 0.03em; border: 1px solid var(--basic-border); border-radius: 0.313rem; padding: 0.188rem 0.375rem; text-transform: uppercase;}
.badge .icon {width: 0.75rem; display: inline-block; vertical-align: middle;}
.badge .icon[class^="ph"] { width: auto; font-size: 0.75rem;}
.badge .picpon {font-size: 0.75rem; display: inline-block; vertical-align: middle;}

.badge.pointer {cursor: pointer;}
.badge.size_sm { font:var(--10_caption_m); border-radius: 0.25rem; padding: 0.125rem 0.313rem; gap: 0.125rem;}
.badge.size_bg { font:var(--14_label_read_m); border-radius: 0.375rem; padding: 0.188rem 0.375rem; gap: 0.5rem;}
.badge.size_button { font:var(--14_label_read_m); height: 2.25rem; border-radius: 0.375rem; padding: 0 0.75rem; gap: 0.5rem;}
.badge.size_sm .icon {width: 0.625rem;}
.badge.size_sm .picpon {font-size: 0.75rem;}
.badge.size_bg .icon {width: 0.875rem;}
.badge.size_bg .picpon {font-size: 1rem;}
.badge.size_button .icon {width: 0.875rem;}
.badge.size_button .picpon {font-size: 0.875rem;}
.badge.full {width: 100%;}

.badge.typeA {background: var(--state-info);color: var(--basic-white);border-color: var(--state-info);} 
.badge.typeB {background: var(--basic-white); color: var(--state-error);border-color: var(--state-error);}
.badge.typeC {background: var(--state-error);color: var(--basic-white); border-color: var(--state-error);}
.badge.typeD {background: var(--brand-primary);color: var(--basic-white);border-color: var(--brand-primary);}
.badge.typeE {background: var(--basic-white); color: var(--brand-primary);border-color: var(--brand-primary);}
.badge.typeF {background: var(--basic-black);color: var(--basic-white);border-color: var(--basic-black);}

.badge.type_re {background: var(--badge-re-bg); color: var(--badge-re-color); border-color: var(--badge-re-bg);} 
.badge.type_or {background: var(--badge-or-bg); color: var(--badge-or-color); border-color: var(--badge-or-bg);} 
.badge.type_ye {background: var(--badge-ye-bg); color: var(--badge-ye-color); border-color: var(--badge-ye-bg);} 
.badge.type_gr {background: var(--badge-gr-bg); color: var(--badge-gr-color); border-color: var(--badge-gr-bg);} 
.badge.type_bl {background: var(--badge-bl-bg); color: var(--badge-bl-color); border-color: var(--badge-bl-bg);}
.badge.type_nv {background: var(--badge-nv-bg); color: var(--badge-nv-color); border-color: var(--badge-nv-bg);}
.badge.type_pp {background: var(--badge-pp-bg); color: var(--badge-pp-color); border-color: var(--badge-pp-bg);}
.badge.type_pk {background: var(--badge-pk-bg); color: var(--badge-pk-color); border-color: var(--badge-pk-bg);}
.badge.type_bk {background: var(--badge-bk-bg); color: var(--badge-bk-color); border-color: var(--badge-bk-bg);}

.imgbadge {display: inline-block; vertical-align: middle; height: 18px; }

.iconbadge {background: no-repeat center/contain; width: 1.5rem; aspect-ratio: 1/1; border-radius: 6.25rem; display: inline-block; vertical-align: middle;}
.iconbadge.success {background-image: url(../img/ic_success.png); background-color: var(--state-success);}
.iconbadge.warning {background-image: url(../img/ic_warning.png); background-color: var(--state-warning);}
.iconbadge.error {background-image: url(../img/ic_error.png); background-color: var(--state-error);}
.iconbadge.reset {background-image: url(../img/ic_reset.png); background-color: var(--state-info);}
.iconbadge.size_md {width: 1.25rem;}
.iconbadge.size_sm {width: 1.125rem;}

.numberbadge {font:var(--14_label_normal_r); letter-spacing: 0.01em; color: var(--brand-primary); background: var(--primary-primary200); border-radius: 6.25rem;
padding: 0.125rem 0.5rem;}
.topbadge { display: inline-flex;  align-items: center;  justify-content: center;   border: 1px solid var(--basic-border);  padding: 0.5rem 0.625rem;  border-radius: 0.375rem; color: var(--basic-darkgray); background: var(--basic-white); font: var(--14_label_normal_r);}
.topbadge b {font-weight: 600;}

.part_icon { max-height: 1.125rem; max-width: 3.125rem; object-fit: contain;}


/* table */
.tbl_title {color: var(--basic-black); font: var(--16_body_normal_sb);}
.tbl_title.mb {margin-bottom: 1rem;}
.tbl_title.color {color: var(--brand-primary);}
.tbl_title .big {font-size: 1.2em;}
.tbl_title .point {color: var(--brand-primary);}
.tbl_title .desc {color: var(--basic-darkgray); font-weight: 400;}
.tbl_title.flex {display: flex; align-items: center; gap: 0.625rem;}
.tbl_title.flex .bar {opacity: 0.25;}

.tbl_top {width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; font:var(--14_label_normal_r); color: var(--basic-darkgray); white-space: nowrap; position: relative;}
.tbl_top.column {flex-direction: column; align-items: unset; gap: 0.25rem;}
.tbl_top.bottom_ver {margin-bottom: 0; margin-top: 1.5rem;}
.tbl_top .leftbox {display: flex; align-items: center; gap: 0.5rem; max-width: 100%;}
.tbl_top .rightbox {display: flex; align-items: center; gap: 0.5rem; max-width: 100%; position: relative;}
.tbl_top .title {color: var(--basic-black);  font:var(--16_body_normal_sb)}
.tbl_top .title_size_bg {font:var(--20_heading_sb); margin-right: 0.5rem;}
.tbl_top .total {color: var(--basic-black);}
.tbl_top .total .color{color: var(--brand-primary); font-weight: 700;}
.tbl_top .note_txt {width: 100%; font:var(--14_label_normal_r); color: var(--state-error); display: flex; align-items: center; gap: 0.25rem;}
.tbl_top .note_txt .icon{font-size: 1.125rem; color: var(--state-error);}
.tbl_top .note_txt .txt {flex: 1;}
.tbl_top  .typebox {  height:2.25rem; display: flex; align-items: center;  gap: 0.75rem;  background: var(--basic-white); padding: 0.5rem 1rem; border: 1px solid var(--basic-border);  border-radius: 0.5rem; font: var(--14_label_normal_r); color: var(--basic-darkgray);}
.tbl_top .typebox .item {display: flex;align-items: center;gap: 0.25rem;}
.tbl_top .typebox .item .color{width: 1rem; aspect-ratio: 1/1; border-radius: 0.25rem; opacity: 0.5;}
.tbl_top .typebox .item .txt{line-height: 1; white-space: nowrap;}

.tbl_bottom {display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 2.5rem;}
.tbl_bottom.mt1 {margin-top: 1rem;}
.tbl_bottom .button.mn100 {min-width: 6.25rem;}

.tbl_area { position: relative; display: flex; align-items: flex-start;  box-shadow: var(--box-shadow); border: 1px solid var(--basic-border);}
.tbl_area .tbl_box + .tbl_box {border-left: 1px solid var(--basic-border)}
.tbl_area .tbl_box.wid50 {width: 50%;}
.tbl_area .tbl_box.wid33 {width: 33.333%;}
.tbl_area .tbl_box.wid25 {width: 25%;}
.tbl_area .tbl_box.wid20 {width: 20%;}

.tbl_area.gap {gap: 1rem; box-shadow: none; border: none;}
.tbl_area .tbl_cont.wid60 {width: 60%;}
.tbl_area .tbl_cont.wid50 {width: 50%;}
.tbl_area .tbl_cont.wid40 {width: 40%;}
.tbl_area .tbl_cont.wid33 {width: 33.333%;}
.tbl_area .tbl_cont.wid25 {width: 25%;}
.tbl_area .tbl_cont.wid20 {width: 20%;}

.tbl_wrap { position: relative; width: 100%; display: flex; flex-direction: column; gap: 2.5rem;}
.tbl_wrap.gap0 {gap: 0;}
.tbl_wrap + .tbl_wrap {margin-top: 2.5rem;}

.tbl_box { position: relative; width: 100%; overflow: auto; border: 1px solid var(--basic-border); border-radius: 0.625rem;}
.tbl_box.ver2 {border: none; box-shadow: none; border-radius: 0;}
.tbl_box.ver3 {border: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--basic-black);border-bottom: 1px solid var(--basic-border);}
.tbl_box.ver3 .tbl thead tr th, 
.tbl_box.ver3 .tbl tbody tr th, 
.tbl_box.ver3 .tbl tbody tr td {padding: 1rem;}

.tbl_box .tbl { width: 100%; border-collapse: collapse; font: var(--14_label_normal_r); word-break: keep-all; }

.tbl_box .tbl thead { background: var(--basic-bg); border-bottom: 1px solid var(--basic-border);}
.tbl_box .tbl thead tr th {padding: 1rem 0.25rem; font-weight: 600; letter-spacing: 0.01em;color: var(--basic-darkgray); text-align: center;border-right: 1px solid var(--basic-border); }
.tbl_box .tbl thead tr th:last-child {border-right: 0;}
.tbl_box .tbl thead tr th:last-child.border {border-right: 1px solid var(--basic-border); }
.tbl_box .tbl thead tr:not(:first-child) th {border-top: 1px solid var(--basic-border);}
.tbl_box .tbl thead tr th.point {color: var(--brand-primary);}
.tbl_box .tbl thead tr th .point {color: var(--brand-primary);}
.tbl_box .tbl thead tr td{position: relative; letter-spacing: 0.01em; color: var(--basic-darkgray); padding: 0.75rem; height: 3rem; border-right: 1px solid var(--basic-border);}
.tbl_box .tbl tbody tr { border-bottom: 1px solid var(--basic-border);}
.tbl_box .tbl tbody tr:last-child {border-bottom: 0;}
.tbl_box .tbl tbody tr.selected th,
.tbl_box .tbl tbody tr.selected td {background: var(--primary-primary200); color: var(--brand-primary);}
.tbl_box .tbl tbody tr th, .tbl_box .tbl tbody tr td{position: relative; letter-spacing: 0.01em; color: var(--basic-darkgray); padding: 0.75rem; height: 3rem; border-right: 1px solid var(--basic-border);}
.tbl_box .tbl tbody tr th:last-child, 
/* .tbl_box .tbl tbody tr td:last-child {border-right:0} */
.tbl_box .tbl tbody tr th:last-child.border, 
.tbl_box .tbl tbody tr td:last-child.border  {border-right: 1px solid var(--basic-border); }
.tbl_box .tbl tbody tr th {text-align: left; background: var(--basic-bg); font-weight: 600;}
.tbl_box .tbl tbody tr.thead th {text-align: center;}
.tbl_box .tbl tbody tr th.point {color: var(--brand-primary);}
.tbl_box .tbl tbody tr th .point {color: var(--brand-primary);}
.tbl_box .tbl tbody tr th .point_error {color: var(--state-error);}
.tbl_box .tbl tbody tr th .required {position: relative; padding-right: 0.5rem;}
.tbl_box .tbl tbody tr th .required::before { content: ""; position: absolute;  right: 0;  top: 0; width: 0.25rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--brand-primary);}
.tbl_box .tbl tbody tr th .desc {font-size:0.85em; word-break: keep-all;}
.tbl_box .tbl tbody tr th.align_left {text-align: left;}
.tbl_box .tbl tbody tr th.align_center {text-align: center;}
.tbl_box .tbl tbody tr th.align_right {text-align: right;}
.tbl_box .tbl tbody tr th.align_top {vertical-align: top;}
.tbl_box .tbl tbody tr td {text-align: center; word-break: break-all;}
.tbl_box .tbl tbody tr td.align_left {text-align: left;}
.tbl_box .tbl tbody tr td.align_center {text-align: center;}
.tbl_box .tbl tbody tr td.align_right {text-align: right;}
.tbl_box .tbl tbody tr td.align_top {vertical-align: top;}
.tbl_box .tbl tbody tr td .point {color: var(--brand-primary);}
.tbl_box .tbl tbody tr td .opt {color: var(--state-info);}
.tbl_box .tbl tbody tr td .point_error {color: var(--state-error);}
.tbl_box .tbl tbody tr td.break_word {word-break: break-word;}
.tbl_box .tbl tbody.hover + tbody.hover { border-top: 1px solid var(--basic-border); }
.tbl_box .tbl tbody.hover tr td:not(.no_hover) {cursor: pointer;}
.tbl tbody.hover:hover tr td:not(.no_hover) {background: var(--basic-bg2);}
.tbl_box .tbl tbody tr.note td {background: var(--basic-bg2); color: var(--brand-hover);   font-weight: 600;}
.tbl_box .tbl tbody tr.line td {background: var(--basic-bg);}
.tbl_box .tbl tbody tr.line td::after {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 1px; background: var(--state-error);}
.tbl_box .tbl tbody tr td.point {background: #fbfbfb; color: var(--brand-primary);}
.tbl_box .tbl tbody tr .tbl_content {text-align: left;}
.tbl_box .tbl tbody tr .tbl_inline {display: flex; align-items: center; gap: 0.5rem;}
.tbl tbody tr .tbl_inline.wrap {flex-wrap: wrap;}
.tbl tbody tr .tbl_inline.gap2 {gap: 1rem;}
.tbl tbody tr .tbl_inline.gap3 {gap: 2rem;}
.tbl tbody tr .tbl_inline.align_top{align-items: flex-start;}
.tbl tbody tr .tbl_inline.align_middle{align-items: center;}
.tbl tbody tr .tbl_inline.align_bottom{align-items: flex-end;}
.tbl tbody tr .tbl_inline.align_left{justify-content: flex-start;}
.tbl tbody tr .tbl_inline.align_center{justify-content: center;}
.tbl tbody tr .tbl_inline.align_right{justify-content: flex-end;}
.tbl tbody tr .tbl_inline.between{justify-content: space-between;}
.tbl tbody tr .tbl_inline.column_ver {flex-direction: column; gap: 0.25rem; }
.tbl tbody tr .tbl_inline.column_ver.gap2 {flex-direction: column; gap: 0.625rem; }
.tbl tbody tr .tbl_inline.column_ver.gap3 {flex-direction: column; gap: 1.25rem; }
.tbl tbody tr .tbl_inline.column_ver.align_left {align-items: flex-start;}
.tbl tbody tr .tbl_inline.column_ver.align_center {align-items: center;}
.tbl tbody tr .tbl_inline.column_ver.align_right {align-items: flex-end;}
.tbl tbody tr .tbl_inline .input_box {flex:1}
.tbl tbody tr .tbl_inline .flex_auto {flex:unset; width: auto;}
.tbl tbody tr .tbl_inline .w100 {width: 100%;}
.tbl tbody tr .tbl_inline .w50 {width: calc((100% - 0.5rem)/2);}
.tbl tbody tr .tbl_inline .w33 {width: calc((100% - 0.5rem*2)/3);}
.tbl tbody tr .tbl_inline .w25 {width: calc((100% - 0.5rem*3)/4);}
.tbl tbody tr .tbl_inline .w20 {width: calc((100% - 0.5rem*4)/5);}
.tbl tbody tr .tbl_btnbox {display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.tbl tbody tr .tbl_btnbox.center {justify-content: center;}
.tbl tbody tr .tbl_btnbox .button {padding: 0 0.75rem;}
.tbl tbody tr .tbl_btnbox .button.size_sm {height: 2rem;}
.tbl tbody tr .tbl_btnbox .button .txt {white-space: nowrap;}
.tbl tbody tr .tbl_btnbox .badge.size_bg {height: 2rem;}
.tbl tbody tr .tbl_icon { width: 0.875rem; display: inline-flex;  vertical-align: middle;}
.tbl thead tr .tbl_picon,
.tbl tbody tr .tbl_picon {font-size: 1.125rem; display: inline-flex;  vertical-align: middle;}
.tbl tbody tr .tbl_img {display: flex; align-items: center; justify-content: center;}
.tbl tbody tr .tbl_img .img {width: 100%; height: 100%; object-fit: cover;}
.tbl tbody tr td .tbl_link {color: var(--basic-black); transition: var(--transition); cursor: pointer;}
.tbl tbody tr td .tbl_link:hover {color: var(--brand-primary);}
.tbl tbody tr .tbl_nopost { padding: 2rem; color: var(--basic-middlegray); font: var(--16_body_read_r); display: flex; flex-direction: column; align-items: center; gap: 0.625rem;}
.tbl tbody tr .tbl_nopost .icon {font-size: 2rem; display: flex;}
.tbl tbody tr .bold {font-weight: 600;}
.tbl tbody tr .red {color: var(--state-error);}
.tbl tbody tr .blue {color: var(--state-info);}
.tbl tbody tr:nth-last-child(-n+1) .opt_popup {top: auto;bottom: 1rem}

.tbl_box .tbl tfoot tr { border-bottom: 1px solid var(--basic-border);}
.tbl_box .tbl tfoot tr:last-child {border-bottom: 0;}
.tbl_box .tbl tfoot tr.selected th,
.tbl_box .tbl tfoot tr.selected td {background: var(--primary-primary200); color: var(--brand-primary);}
.tbl_box .tbl tfoot tr th, .tbl_box .tbl tfoot tr td{position: relative; letter-spacing: 0.01em; color: var(--basic-darkgray); padding: 0.75rem; height: 3rem; border-right: 1px solid var(--basic-border);}
.tbl_box .tbl tfoot tr th:last-child, 
.tbl_box .tbl tfoot tr td:last-child {border-right:0}
.tbl_box .tbl tfoot tr th:last-child.border, 
.tbl_box .tbl tfoot tr td:last-child.border  {border-right: 1px solid var(--basic-border); }
.tbl_box .tbl tfoot tr th {text-align: left; background: var(--basic-bg); font-weight: 600;}
.tbl_box .tbl tfoot tr.thead th {text-align: center;}
.tbl_box .tbl tfoot tr th.point {color: var(--brand-primary);}
.tbl_box .tbl tfoot tr th .point {color: var(--brand-primary);}
.tbl_box .tbl tfoot tr th .point_error {color: var(--state-error);}
.tbl_box .tbl tfoot tr th .required {position: relative; padding-right: 0.5rem;}
.tbl_box .tbl tfoot tr th .required::before { content: ""; position: absolute;  right: 0;  top: 0; width: 0.25rem; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--brand-primary);}
.tbl_box .tbl tfoot tr th .desc {font-size:0.85em; word-break: keep-all;}
.tbl_box .tbl tfoot tr th.align_left {text-align: left;}
.tbl_box .tbl tfoot tr th.align_center {text-align: center;}
.tbl_box .tbl tfoot tr th.align_right {text-align: right;}
.tbl_box .tbl tfoot tr th.align_top {vertical-align: top;}
.tbl_box .tbl tfoot tr td {text-align: center; word-break: keep-all;}
.tbl_box .tbl tfoot tr td.align_left {text-align: left;}
.tbl_box .tbl tfoot tr td.align_center {text-align: center;}
.tbl_box .tbl tfoot tr td.align_right {text-align: right;}
.tbl_box .tbl tfoot tr td.align_top {vertical-align: top;}
.tbl_box .tbl tfoot tr td .point {color: var(--brand-primary);}
.tbl_box .tbl tfoot tr td .point_error {color: var(--state-error);}
.tbl_box .tbl tfoot tr td.break_word {word-break: break-word;}
.tbl_box .tbl tfoot.hover + tbody.hover { border-top: 1px solid var(--basic-border); }
.tbl_box .tbl tfoot.hover tr td:not(.no_hover) {cursor: pointer;}
.tbl tfoot.hover:hover tr td:not(.no_hover) {background: var(--basic-bg2);}
.tbl_box .tbl tfoot tr.note td {background: var(--basic-bg2); color: var(--brand-hover);   font-weight: 600;}
.tbl_box .tbl tfoot tr.line td {background: var(--basic-bg);}
.tbl_box .tbl tfoot tr.line td::after {content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 1px; background: var(--state-error);}
.tbl_box .tbl tfoot tr td.point {background: #fbfbfb; color: var(--brand-primary);}
.tbl_box .tbl tfoot tr .tbl_content {text-align: left;}
.tbl_box .tbl tfoot tr .tbl_inline {display: flex; align-items: center; gap: 0.5rem;}
.tbl tbody tr .tbl_inline.wrap {flex-wrap: wrap;}
.tbl tbody tr .tbl_inline.gap2 {gap: 1rem;}
.tbl tbody tr .tbl_inline.gap3 {gap: 2rem;}
.tbl tbody tr .tbl_inline.align_top{align-items: flex-start;}
.tbl tbody tr .tbl_inline.align_middle{align-items: center;}
.tbl tbody tr .tbl_inline.align_bottom{align-items: flex-end;}
.tbl tbody tr .tbl_inline.align_left{justify-content: flex-start;}
.tbl tbody tr .tbl_inline.align_center{justify-content: center;}
.tbl tbody tr .tbl_inline.align_right{justify-content: flex-end;}
.tbl tbody tr .tbl_inline.between{justify-content: space-between;}
.tbl tbody tr .tbl_inline.column_ver {flex-direction: column; gap: 0.25rem; }
.tbl tbody tr .tbl_inline.column_ver.gap2 {flex-direction: column; gap: 0.625rem; }
.tbl tbody tr .tbl_inline.column_ver.gap3 {flex-direction: column; gap: 1.25rem; }
.tbl tbody tr .tbl_inline.column_ver.align_left {align-items: flex-start;}
.tbl tbody tr .tbl_inline.column_ver.align_center {align-items: center;}
.tbl tbody tr .tbl_inline.column_ver.align_right {align-items: flex-end;}
.tbl tbody tr .tbl_inline .input_box {flex:1}
.tbl tbody tr .tbl_inline .flex_auto {flex:unset; width: auto;}
.tbl tbody tr .tbl_inline .w100 {width: 100%;}
.tbl tbody tr .tbl_inline .w50 {width: calc((100% - 0.5rem)/2);}
.tbl tbody tr .tbl_inline .w33 {width: calc((100% - 0.5rem*2)/3);}
.tbl tbody tr .tbl_inline .w25 {width: calc((100% - 0.5rem*3)/4);}
.tbl tbody tr .tbl_inline .w20 {width: calc((100% - 0.5rem*4)/5);}
.tbl tbody tr .tbl_btnbox {display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.tbl thead tr .tbl_btnbox {display: flex; align-items: center; justify-content: center; gap: 0.5rem;}
.tbl tbody tr .tbl_btnbox.center {justify-content: center;}
.tbl tbody tr .tbl_btnbox .button {padding: 0 0.75rem;}
.tbl tbody tr .tbl_btnbox .button.size_sm {height: 2rem;}
.tbl tbody tr .tbl_btnbox .button .txt {white-space: nowrap;}
.tbl tbody tr .tbl_btnbox .badge.size_bg {height: 2rem;}
.tbl tbody tr .tbl_icon { width: 0.875rem; display: inline-flex;  vertical-align: middle;}
.tbl thead tr .tbl_picon,
.tbl tbody tr .tbl_picon {font-size: 1.125rem; display: inline-flex;  vertical-align: middle;}
.tbl tbody tr .tbl_img {display: flex; align-items: center; justify-content: center;}
.tbl tbody tr .tbl_img .img {width: 100%; height: 100%; object-fit: cover;}
.tbl tbody tr td .tbl_link {color: var(--basic-black); transition: var(--transition); cursor: pointer;}
.tbl tbody tr td .tbl_link:hover {color: var(--brand-primary);}
.tbl tbody tr .tbl_nopost { padding: 2rem; color: var(--basic-middlegray); font: var(--16_body_read_r); display: flex; flex-direction: column; align-items: center; gap: 0.625rem;}
.tbl tbody tr .tbl_nopost .icon {font-size: 2rem; display: flex;}
.tbl tbody tr .bold {font-weight: 600;}
.tbl tbody tr .red {color: var(--state-error);}
.tbl tbody tr .blue {color: var(--state-info);}
.tbl tbody tr:nth-last-child(-n+1) .opt_popup {top: auto;bottom: 1rem}
.tbl.space_auto thead tr th {padding: 0.75rem 1rem;}
.tbl.space_auto tbody tr th, 
.tbl.space_auto tbody tr td {height: unset;}
.tbl.space_md thead tr th,
.tbl.space_md tbody tr th, 
.tbl.space_md tbody tr td {padding: 0.5rem 1rem;}
.tbl.space_sm thead tr th,
.tbl.space_sm tbody tr th, 
.tbl.space_sm tbody tr td {padding: 0.375rem 1rem;}

.tbl.ver2 thead { border-top: 2px solid var(--brand-primary); background: none}
.tbl.ver2 thead tr th {border-right: 0; text-align: left; background: var(--basic-white);}
.tbl.ver2 thead tr th:nth-child(1) {border-left: 0; }
.tbl.ver2 tbody tr th, .tbl.ver2 tbody tr td { height: auto; border-right: 0; text-align: left; padding: 1rem;}
.tbl.ver2 tbody tr th:nth-child(1), .tbl.ver2 tbody tr td:nth-child(1) {border-left: 0;}
.tbl.ver2 tbody tr td:nth-child(1) {border-left: 0;}

.tbl [data-th="checkbox"] {text-align: center;}
.tbl [data-th="checkbox"] .check_box { display: inline-flex;text-align: center; vertical-align: middle;}
.tbl .check_box.inline { display: inline-flex; vertical-align: middle;} 
.tbl .check_box.auto {margin: 0 auto;}

.tbl.min1700 {min-width: 1700px;}
.tbl.min2200 {min-width: 2200px;}


/* modal */
.modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; background: rgba(0, 0, 0, 0.5); transition: all 0.4s ease; pointer-events: none; opacity: 0;}
.modal.show { pointer-events: auto; opacity: 1;}
.modal .modal_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 1.5rem; background: var(--basic-white); box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1); padding: 3rem 2rem 2rem; min-width: 500px;  max-width: 90%; max-height: 90%; display: flex; flex-direction: column;  align-items: center; transition: var(--transition); margin-top: 2.5rem; opacity: 0; overflow: hidden;}
.modal.show .modal_box { margin-top: 0; opacity: 1;}
.modal .modal_box .modal_img {width: 3.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 1.125rem;}
.modal .modal_box .modal_tit { font: var(--22_heading_sb); letter-spacing: -0.02em;   text-align: center; color: var(--basic-black);}
.modal .modal_box .modal_desc { font: var(--16_body_normal_r); letter-spacing: 0.01em;  text-align: center;  color: var(--basic-darkgray);}
.modal .modal_box .modal_tit + .modal_desc {margin-top: 0.625rem;}
.modal .modal_box .modal_btnbox { width: 100%; display: flex; justify-content: center;  gap: 0.625rem;  margin-top: 2.25rem;}
.modal .modal_box .modal_btnbox .modal_btn { font: var(--16_body_normal_m);  letter-spacing: 0.01em; min-width: 6rem;  max-width: calc((100% - 0.5rem) / 2);  padding: 0 1.5rem; border-radius: 0.625rem; height: 2.75rem; display: flex; align-items: center; gap: 0.25rem;}
.modal .modal_box .modal_btnbox .modal_btn [class^="ph"] {font-size: 1.125rem;}
.modal .modal_box.ver2 { min-width: 25rem;align-items: unset;padding: 0;background: none; border-radius: 1.25rem;}
.modal .modal_box .modal_head { display: flex; align-items: center; justify-content: space-between;  gap: 1.25rem; background: var(--basic-darkgray); padding: 1rem;}
.modal .modal_box .modal_head .tit{font: var(--18_headline_m); color: var(--basic-white);}
.modal .modal_box .modal_head .modal_close{background: url(../img/modal_close.png) no-repeat center/contain; width: 1.25rem; aspect-ratio: 1/1; transition: var(--transition); filter: invert(10);} 
.modal .modal_box .modal_body {display: flex; flex-direction: column; align-items: center;padding: 1.875rem; background: var(--basic-white); overflow: auto;}

.modal.size_md .modal_box {width: 50rem;}
.modal.size_lg .modal_box {width: 80rem;}

.modal .modal_searchbox { width: 100%; background: var(--basic-bg2); padding: 1rem; border: 1px solid var(--basic-border2); border-radius: 0.625rem;}
.modal .modal_searchbox .input_flex {justify-content: center;}
.modal .modal_searchbox .input_flex .calender_btn {max-width: 10rem;}
.modal .tab_wrap {width: 100%;}
  

/* popup */
.popup { position: absolute;  top: calc(100% + 0.25rem);  right: 0;  min-width: 120px; max-width: 90vw; max-height: 90vh;   background: var(--basic-white);  box-shadow: 0 1px 5px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);   border: 1px solid var(--basic-border2); border-radius: 0.625rem;  overflow: hidden;  z-index: 50; transition: var(--transition); opacity: 0;  pointer-events: none; display: flex; flex-direction: column; gap: 1rem;}
.popup.show {opacity: 1; pointer-events: unset;}
.popup .pop_head { background: var(--basic-darkgray); padding: 0.5rem 1rem;}
.popup .pop_head .pop_tit{ color: var(--basic-white); font: var(--14_label_normal_m);}
.popup .pop_head .pop_close {background: url(../img/pop_close.png) no-repeat center / contain; width: 2.4rem; aspect-ratio: 1 / 1; display: flex;  position: absolute;  right: 1.6rem; top: 1.4rem; display: none;}
.popup .pop_body { flex: 1; padding: 0.5rem 0; overflow: auto; font-size: 0.833333rem; color: var(--basic-darkgray);}
.popup .pop_body::-webkit-scrollbar {display: none;}
.opt_box { display: inline-block; position: relative;}
.opt_box .opt_btn {width: 2rem; aspect-ratio: 1 / 1;  font-size: 1.25rem;  display: inline-flex;  align-items: center;  justify-content: center;  border: 1px solid var(--basic-border2); border-radius: 0.375rem; color: var(--brand-primary); background: var(--basic-white);} 
.opt_popup { gap: 0.25rem;  min-width: 8rem; border-radius: 0.5rem; top: 1rem;  right: 3rem;  padding: 0.25rem 0;  box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.08);  border: none;}
.opt_popup .opt_list { width: 100%; display: flex; flex-direction: column; gap: 0.25rem;}
.opt_popup .opt_list > .item { width: 100%;}
.opt_popup .opt_list .opt_popbtn { width: 100%;  display: flex;    align-items: center;  gap: 0.375rem;  padding: 0.25rem 0.5rem;  transition: var(--transition);  text-align: left;  font-size: var(--13_label_r); color: var(--basic-darkgray);}
.opt_popup .opt_list .opt_popbtn .icon { width: 1.25rem; font-size: 1.125rem; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;}
.opt_popup .opt_list .opt_popbtn .txt { flex: 1;}


/* calender popup */
.calender_popup { position: fixed; top: unset;  right: unset; min-width: unset;  margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.875rem; padding: 1.25rem; transition: opacity 0.4s ease;}
.calender_popup .cal_head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.375rem;}
.calender_popup .cal_head .leftbox {display: flex; align-items: center;justify-content: flex-start;}
.calender_popup .cal_head .leftbox .cal_date { font:var(--16_body_normal_sb); letter-spacing: 0.01em;color: var(--basic-black);}
.calender_popup .cal_head .rightbox {display: flex; align-items: center;justify-content: flex-end;}
.calender_popup .cal_head .rightbox .paging_box {display: flex; align-items: center; gap: 0.5rem;}
.calender_popup .cal_head .rightbox .paging_box .paging_btn { width: 1rem;  aspect-ratio: 1 / 1;  font-size: 1rem;  display: flex; align-items: center; justify-content: center;  color: var(--basic-middlegray); transition: var(--transition);}
.calender_popup .cal_head .rightbox .paging_box .paging_btn:hover {color: var(--basic-black);}
.calender_popup .cal_body { font: var(--16_body_normal_m);  line-height: 1.5;  letter-spacing: 0.01em; color: var(--basic-darkgray); display: flex; flex-direction: column; gap: 0.125rem;}
.calender_popup .cal_body .week_day,
.calender_popup .cal_body .week_date { display: flex; gap: 0.313rem;}
.calender_popup .cal_body .week_day .day { width: 1.875rem; aspect-ratio: 1 / 1;  display: flex; align-items: center;  justify-content: center; color: var(--basic-black);}
.calender_popup .cal_body .week_day .day.red{color: var(--state-error);}
.calender_popup .cal_body .week_day .day.blue{color: var(--state-info);}
.calender_popup .cal_body .week_date .date { width: 1.875rem;  aspect-ratio: 1 / 1;   overflow: hidden; display: flex; align-items: center;  justify-content: center;  border-radius: 0.5rem; cursor: pointer;}
.calender_popup .cal_body .week_date .date.red{color: var(--state-error);}
.calender_popup .cal_body .week_date .date.blue{color: var(--state-info);}
.calender_popup .cal_body .week_date .date.disabled{opacity: 0.2; pointer-events: none; }
.calender_popup .cal_body .week_date .date.today{color: var(--brand-primary); font-weight: 600; background: var(--primary-primary100);}
.calender_popup .cal_body .week_date .date.selected { background: var(--brand-primary);  color: var(--basic-white);}


/* header */
.header { position: relative; width: 100%;  z-index: 50; background: var(--brand-secondary);}
.header .h_inner { height: 100%; display: flex; align-items: center;  justify-content: space-between; padding: 0.5rem 2.5rem;}
.header .h_leftbox .h_title { font: var(--14_label_normal_m); color: var(--basic-white);}
.header .h_rightbox { display: flex; align-items: center; justify-content: flex-end;  gap: 0.875rem;}
.header .h_rightbox .greeting { display: flex; align-items: center;  gap: 0.5rem;   font: var(--12_caption_r); color: var(--basic-white);}
.header .h_rightbox .greeting .thum { position: relative; width: 1.375rem;  aspect-ratio: 1 / 1;  overflow: hidden; border-radius: 50%;  display: flex;  align-items: center;   justify-content: center; background: var(--primary-primary100); border: 1px solid var(--primary-primary100);  color: var(--brand-primary);}
.header .h_rightbox .greeting .thum::before { font-size: 1rem;}
.header .h_rightbox .greeting .thum .img { width: 100%; height: 100%; object-fit: cover;  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.header .h_rightbox .greeting .txt .name {color: var(--primary-primary500);}
.header .h_rightbox .btnbox {display: flex; align-items: center; gap: 0.25rem;}
.header .h_rightbox .button { height: auto; font: var(--12_caption_m);  border-radius: 0.25rem; padding: 0.125rem 0.5rem;}


/* topnav */
.topnav {position: relative;}
.topnav .navbox {display: flex; border-bottom: 1px solid var(--basic-border2);}
.topnav .navbox > li{width: calc(100%/11);}
.topnav .navbox > li .link {position: relative; display: flex;flex-direction: column; align-items: center;  justify-content: center; gap: 0.313rem;  padding: 0.5rem; background: var(--basic-bg2);  font: var(--13_label_m);  color: var(--basic-darkgray);  transition: var(--transition);}
.topnav .navbox > li .link::before {content: "";  position: absolute;  right: 0;  top: 50%;  transform: translateY(-50%);  width: 1px;  height: 2.5rem;  background: var(--basic-border2);  transition: var(--transition);}
.topnav .navbox > li:last-child .link::before {display: none;}
.topnav .navbox > li .link .icon {position: relative; width: 1.125rem; aspect-ratio: 1/1;}
.topnav .navbox > li .link .icon path {transition: var(--transition); fill: var(--basic-darkgray);}
.topnav .navbox > li:hover .link{ color:var(--brand-primary);}
.topnav .navbox > li:hover .link .icon path {fill:var(--brand-primary);}
.topnav .navbox > li.on .link::before {background: var(--brand-primary);}
.topnav .navbox > li.on .link{background: var(--brand-primary); color: var(--basic-white);}
.topnav .navbox > li.on .link .icon path {fill: var(--basic-white);}


/* footer */
.footer { position: relative;  width: 100%; background: var(--basic-middlegray); margin-top: 8rem;}
.footer .f_inner { display: flex; align-items: center; justify-content: center; padding: 0.825rem 1.25rem;}
.footer .f_copy { font: var(--14_label_normal_r);  color: var(--basic-white);}


/* top button */
.top_button {position: fixed; right: 1.25rem;  bottom: 4rem;  width: 3rem;   aspect-ratio: 1 / 1;  background: var(--brand-primary);  display: flex;  align-items: center;  justify-content: center;  border-radius: 50%; font-size: 1.5rem;  color: var(--basic-white); transition: var(--transition); cursor: pointer; box-shadow: 0 0 0.75rem rgb(0, 0, 0, 0.2)}
.top_button:hover { box-shadow: 0 0 0.75rem rgb(239, 120, 152, 0.5)}


/* page layout 
.page_wrap {display: flex; flex-direction: column; min-height: 100vh;}
*/
.page_wrap {display: flex; flex-direction: column;}
.page_layout { flex: 1; display: flex; flex-direction: column;}
.page_sidenav {width: 15.625rem;}
/*
.page_section {position: relative; flex: 1; max-width: calc(100% - 15.625rem); margin-bottom: 80px;}
*/
.page_section {position: relative; flex: 1; max-width: calc(100% - 15.625rem); }
.page_section.full {max-width: 100%;}

.page_section.sb { margin-bottom: 0 !important; }
.page_section .inner {position: relative; width: 100%; padding: 0 2.5rem;}
.page_section .inner.full {flex: 1; display: flex; flex-direction: column;}


.page_section .page_descbox { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem;}
.page_section .page_descbox .desctit { font: var(--16_body_normal_sb);  color: var(--brand-primary);}
.page_section .page_descbox .descont { font: var(--14_label_normal_r);  color: var(--basic-darkgray);}

.page_section .page_top { display: flex; align-items: flex-start; justify-content: space-between;  padding: 0.5rem 0;}
.page_section .page_top.align_center {align-items: center;}
.page_section .page_top.mb {margin-bottom: 1rem;}
.page_section .page_top.ver2 {}
.page_section .page_top	.leftbox{}
.page_section .page_top	.rightbox{}

.page_section .page_tabs {}
.page_section .page_tabs .tab_nav {flex: unset;}
.page_section .page_tabs .tab_nav .link { padding: 0.625rem 1.25rem;}

.page_section .page_titbox { padding-bottom: 0.625rem;  border-bottom: 1px solid var(--basic-border); margin-bottom: 1.25rem;}
.page_section .page_titbox .page_title { font: var(--22_heading_b);  color: var(--basic-darkgray);}

.page_section .page_search { margin-bottom: 2rem;}
.page_section .page_search .tbl .search_date { flex: unset; width: auto;}
.page_section .page_search .tbl .search_date .input_text { max-width: 10rem;}
.page_section .page_search .tbl .search_select { min-width: 7.5rem;}
.page_section .page_search .tbl .search_input { flex: unset; max-width: 25rem;}
.page_section .page_search .tbl .mx240 {flex: unset; width: 15rem;}
.page_section .page_search .tbl .mx160 {flex: unset; width: 10rem;}
.page_section .page_search .tbl tbody tr td {background: var(--basic-bg); position: relative;}
.page_section .search_bottom { display: flex;  align-items: center; justify-content: space-between;  margin-top: 0.625rem;}
.page_section .search_bottom .leftbox,
.page_section .search_bottom .rightbox{display: flex; align-items: center; gap: 0.75rem;}
.page_section .search_bottom .rightbox{justify-content: flex-end;}
.page_section .search_bottom .note_txt { font: var(--14_label_normal_r); color:var(--basic-middlegray);}

.page_section .page_addtbl {margin-bottom: 2rem;}
.page_section .page_addtbl.mb0 {margin-bottom: 0;}



.page_section .page_result { position: relative;  background: var(--basic-white);   border: 1px solid var(--basic-border);  border-radius: 0.625rem;  padding: 1.125rem 1rem;  font: var(--14_label_normal_r); color: var(--basic-darkgray); margin-bottom: 2rem; }
.page_section .page_result .cont_area {display: flex; flex-wrap: wrap; gap: 0.5rem;}
.page_section .page_result .cont_area .bar { font: var(--14_label_normal_r);  color: var(--basic-lightgray);}
.page_section .page_result .cont_area .text {display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem;}
.page_section .page_result .cont_area .text [class^="ph"] {font-size: 1.125rem; color: var(--brand-primary);}
.page_section .page_result .cont_area .bold {font-weight: 600;}
.page_section .page_result .radio_area { gap: 0.25rem 1rem;}
.page_section .page_result .radio_area .radio_wrap { gap: 0.5rem 0.5rem;}
.page_section .page_result .radio_area .radio_box { gap: 0.375rem;}
.page_section .page_result .check_area { gap: 0.25rem 1rem;}
.page_section .page_result .check_area .check_wrap { gap: 0.5rem 0.5rem;}
.page_section .page_result .check_area .check_box { gap: 0.375rem;}
.page_section .page_result .flex_area {align-items: center; justify-content: space-between;}
.page_section .page_result .flex_area .leftbox{display: flex; align-items: center; gap: 0.25rem 0.5rem;}
.page_section .page_result .flex_area .rightbox{display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem 0.5rem;}
.page_section .page_result .flex_area .rightbox .blue {color: var(--state-info);}
.page_section .page_result .flex_area .rightbox .red {color: var(--state-error);}
.page_section .page_result .flex_area .centerbox {flex: 1; display: flex; align-items: center; justify-content:center; gap: 0.25rem 0.5rem;}

.page_section .page_cont {position: relative;}

.page_section .page_cont .gallery {display: flex; flex-wrap: wrap; gap: 3rem 1.25rem;}
.page_section .page_cont .gallery .gall_item { width: calc((100% - 1.25rem * 4) / 5);   display: flex;  flex-direction: column;  gap: 1rem;}
.page_section .page_cont .gallery .gall_item .imgbox { width: 100%;  height: 12.5rem;  display: flex; align-items: center; justify-content: center; overflow: cover; border: 1px solid var(--basic-border);}
.page_section .page_cont .gallery .gall_item .imgbox .img{width: 100%; height: 100%; object-fit: cover;}
.page_section .page_cont .gallery .gall_item .imgbox .img.ver2{object-fit: contain;}
.page_section .page_cont .gallery .gall_item .txtbox {border-bottom: 1px solid var(--basic-border); padding-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem;}
.page_section .page_cont .gallery .gall_item .txtbox .tit {  font: var(--15_body_normal_sb);  color: var(--basic-black);}
.page_section .page_cont .gallery .gall_item .txtbox .desc {  font: var(--14_label_read_m);  color: var(--basic-darkgray);}

/* SMS 발송 팝업 */
#smsSend_modal .modal_box {width: 52.5rem;}

.center { text-align: center; }
/* loading */
.loading { position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  background: var(--basic-white);  display: flex;  flex-direction: column;  align-items: center; justify-content: center;  gap: calc(1.125rem + 1rem); transition: all 1s ease;}
.loading.hide {opacity: 0; pointer-events: none;}
.loading .dot_spin {position: relative; width: 0.625rem; aspect-ratio: 1/1; border-radius: 0.313rem; background-color: transparent; color: transparent;
  box-shadow:  0 -1.125rem 0 0 var(--brand-primary), 0.795rem -0.795rem 0 0 var(--brand-primary),  1.125rem 0 0 0 var(--brand-primary),  0.795rem 0.795rem 0 0 rgba(152, 128, 255, 0),  0 1.125rem 0 0 rgba(152, 128, 255, 0),  -0.795rem 0.795rem 0 0 rgba(152, 128, 255, 0),  -1.125rem 0 0 0 rgba(152, 128, 255, 0),   -0.795rem -0.795rem 0 0 rgba(152, 128, 255, 0); animation: dot-spin 1.5s infinite linear;}
.loading .text { font: var(--20_heading_b);  color: var(--brand-primary);  text-transform: uppercase;  letter-spacing: 0.25em;}


/* 버스좌석배치도 */
.seat_wrap {position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2em 0; font-size: 16px;}
.seat_wrap .seat_area {position: sticky; top: 1.25em; display: flex; flex-direction: column; align-items: center; gap: 1.25em; width: 22.25em;}
.seat_wrap .seat_area .seat_label {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75em; padding: 0.875em 1em; background: var(--basic-pale); border-radius: 0.625em;}
.seat_wrap .seat_area .seat_label > .item {display: flex; align-items: center; gap: 0.25em; width: calc((100% - 0.75em*3)/3);} 
.seat_wrap .seat_area .seat_label > .item .color {border-radius: 0.25em; width: 0.875em; aspect-ratio: 1/1;}
.seat_wrap .seat_area .seat_label > .item .color1 {background: #fff; border: 0.125em solid #c4c4c4;}
.seat_wrap .seat_area .seat_label > .item .color2 {background: #ccc; border: 0.125em solid #7b7b7b;}
.seat_wrap .seat_area .seat_label > .item .color3 { background: #ffd7e1; border: 0.125em solid #EF7898;}
.seat_wrap .seat_area .seat_label > .item .color4 {background: #d8e6ff; border: 0.125em solid #9ec2ff;}
.seat_wrap .seat_area .seat_label > .item .color5 {background: #d0f0c0; border: 0.125em solid #7fd28f;}
.seat_wrap .seat_area .seat_label > .item .color6 {background: #ffe4b3; border: 0.125em solid #ffb347;}
.seat_wrap .seat_area .seat_label > .item .txt {text-align: center; font: 500 0.75em/1.334 'Pretendard', sans-serif; color: var(--basic-darkgray);}
.seat_wrap .seat_area .seat_tit {font: 600 1.25em / 1.4 'Pretendard', sans-serif; color: var(--basic-darkgray); text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.5em;}
.seat_wrap .seat_area .seat_pic {border-radius: 3.5em 3.5em 1.5em 1.5em; padding: 2em 1.5em 1.5em; background: var(--basic-white); border: 0.125em solid var(--basic-border); display: flex; flex-direction: column; gap: 0.5em;}
.seat_wrap .seat_area .seat_pic .top_row {display: flex; justify-content: space-between;}
.seat_wrap .seat_area .seat_pic .top_row .driver {border-radius: 1.25em 0.375em 0.375em 0.375em; width: 7.25em; height: 2.75em; background: var(--basic-pale); padding: 0.375em 0; display: flex; align-items: center; justify-content: center;}
.seat_wrap .seat_area .seat_pic .top_row .driver::before {content: ""; background: url(/niabbs5/erp/img/seat_wheel.png) no-repeat center/contain; width: 1.75em; aspect-ratio: 1/1;}
.seat_wrap .seat_area .seat_pic .top_row .exit {border-radius: 0.375em 1.25em 0.375em 0.375em; padding: 0.375em 0; width: 3.375em; height: 2.75em; background: var(--basic-pale); display: flex; align-items: center; justify-content: center;}
.seat_wrap .seat_area .seat_pic .top_row .exit::before {content: ""; background: url(/niabbs5/erp/img/seat_exit.png) no-repeat center/contain; width: 1.5em; aspect-ratio: 1/1;}
.seat_wrap .seat_area .seat_pic .top_txt {display: flex; padding: 0.25em 0;}
.seat_wrap .seat_area .seat_pic .top_txt .txt {flex: 1; text-align: center; font: 600 0.938em/1.467 'Pretendard', sans-serif; color: var(--basic-darkgray);}
.seat_wrap .seat_area .seat_pic .row {display: flex; gap: 0.5em;}
.seat_wrap .seat_area .seat_pic .row .item {position: relative; width: 3.375em; aspect-ratio: 1/1; padding: 0.25em; cursor: pointer; --seat-bg: var(--basic-white); --seat-border: var(--basic-border);}
.seat_wrap .seat_area .seat_pic .row .item.seat {padding: 0 0.375em;}
.seat_wrap .seat_area .seat_pic .row .item.seat::before, .seat_wrap .seat_area .seat_pic .row .item.seat::after {content: ""; z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); display: block; width: 0.675em; aspect-ratio: 1/3.5; border: 0.125em solid var(--seat-border); background-color: var(--seat-bg); border-radius: 6.25em; pointer-events: none; transition: var(--transition); box-sizing: border-box;}
.seat_wrap .seat_area .seat_pic .row .item.seat::before {left: 0;}
.seat_wrap .seat_area .seat_pic .row .item.seat::after {right: 0;}
.seat_wrap .seat_area .seat_pic .row .item.seat .seat_base {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin-inline: auto; border: 0.125em solid var(--seat-border); border-radius: 0.625em; padding-bottom: 0.675em; background-color: var(--seat-bg); transition: var(--transition);}
.seat_wrap .seat_area .seat_pic .row .item.seat .seat_base::before {content: ""; z-index: 2; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; height: 1.013em; border: 0.125em solid var(--seat-border); background-color: var(--seat-bg); pointer-events: none; border-radius: 0.375em 0.375em 0.75em 0.75em; transition: var(--transition); box-sizing: border-box;}
.seat_wrap .seat_area .seat_pic .row .item.seat .seat_base .num {position: relative; text-align: center; font: 600 1em/1.4 'Pretendard', sans-serif; line-height: 100%; color: var(--basic-darkgray); width: 100%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; transition: var(--transition); --size:1em}
.seat_wrap .seat_area .seat_pic .row .item.seat:hover {--seat-bg: var(--basic-bg2); --seat-border: var(--primary-primary300);}
.seat_wrap .seat_area .seat_pic .row .item.seat:hover .num {color: var(--brand-primary);}
.seat_wrap .seat_area .seat_pic .row .item.seat.guide {--seat-bg: #d8e6ff; --seat-border: #9ec2ff; pointer-events: none;}
.seat_wrap .seat_area .seat_pic .row .item.seat.guide .num { color: #5e88cf; font-weight: 700;}
.seat_wrap .seat_area .seat_pic .row .item.seat.guide .num::after { content: "G";  font-size: 1em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--seat-bg);}
.seat_wrap .seat_area .seat_pic .row .item.seat.selected {--seat-bg: var(--primary-primary200); --seat-border: var(--primary-primary500); pointer-events: none;}
.seat_wrap .seat_area .seat_pic .row .item.seat.selected .num {color: var(--brand-primary); font-weight: 700;}
.seat_wrap .seat_area .seat_pic .row .item.seat.disabled {--seat-bg: #e0e0e0; --seat-border: #bdbdbd; }
.seat_wrap .seat_area .seat_pic .row .item.seat.disabled .num::after {content: ""; background: url( /niabbs5/erp/img/seat_disabled.png) no-repeat center/contain var(--seat-bg); font-size: 1em; width: 1.25em; aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.seat_wrap .seat_area .seat_pic .row .item.seat.boarded {--seat-bg: #d0f0c0; --seat-border: #7fd28f; pointer-events: none;}
.seat_wrap .seat_area .seat_pic .row .item.seat.boarded .num::after {content: ""; background: url(/niabbs5/erp/img/seat_boarded.png) no-repeat center/contain var(--seat-bg); font-size: 1em; width: 1.25em; aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.seat_wrap .seat_area .seat_pic .row .item.seat.not_boarded {--seat-bg: #ffe4b3; --seat-border: #ffb347; pointer-events: none;}
.seat_wrap .seat_area .seat_pic .row .item.seat.not_boarded .num::after {content: ""; background: url(/niabbs5/erp/img/seat_not_boarded.png) no-repeat center/contain var(--seat-bg); font-size: 1em; width: 1.25em; aspect-ratio: 1/1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.seat_wrap .seat_area .seat_pic .row .item.arrow {position: relative;}
.seat_wrap .seat_area .seat_pic .row .item.arrow::before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(/niabbs5/erp/img/seat_arrow.png) no-repeat center/contain; width: 1.5em; aspect-ratio: 1/1;}


/* 버스좌석배치도 Tablet & mobile */
@media screen and (max-width: 1024px) {
  	.seat_wrap {font-size: 3vw !important;} 	
}

@media screen and (max-width: 720px) {
	.seat_wrap {font-size: 4vw !important;} 	
	.seat_wrap .seat_area .seat_pic,
	.seat_wrap .seat_area .seat_pic .row .item.seat::before, 
	.seat_wrap .seat_area .seat_pic .row .item.seat::after,
	.seat_wrap .seat_area .seat_pic .row .item.seat .seat_base,
	.seat_wrap .seat_area .seat_pic .row .item.seat .seat_base::before {border-width: 0.14em;}
}

/* 버스좌석배치도 Tablet & mobile (가로모드) */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  .seat_wrap {font-size: 2.2223vw !important;}
}

#ui-datepicker-div { z-index: 9 !important; }