@charset "UTF-8";

/**********************************************************************************
    form component
**********************************************************************************/
/* label */
.label_txt { display:inline-block; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); word-wrap: break-word; word-break: keep-all;}
.label_txt .sub_script { display:inline-block; color:#888;vertical-align: middle;}
.label_txt.is_req::after { content:"*"; display:inline-block; margin-left:0.2rem; font-size:var(--f_size); line-height: 2.6rem; color:var(--clr_red); font-weight:700; vertical-align: baseline;}

/* select */
.sel_defalut { display:inline-block; padding:0.2rem 3.0rem 0.2rem 1.0rem; height:2.6rem; min-width:0; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); background:url(../images/common/ico_arrow_down.png) no-repeat right 1.2rem center; background-color: #fff; border:var(--bd_basic); transition:var(--tran_basic); vertical-align: middle; }
.sel_defalut:focus { border-color:#3a6ac4;}
.sel_defalut option { font-size:var(--f_size); font-weight: 400; line-height:var(--f_line); }
.sel_defalut:focus { outline:0 none; border-color:#84a3cc;}
.sel_defalut:disabled { color:var(--t_clr_light); background-color:#f1f1f5; border-color:#e5e5ec;}
.sel_defalut:disabled[value] {color:var(--t_clr_light)}
.sel_defalut.is_readonly { background-color:#f1f1f5; pointer-events: none;}
.sel_defalut:required,
.sel_defalut.is_req { border-color:#c5c9d6; background-color:#f8fafe; }
.sel_defalut.is_error { border-color:#dc0000; background-color:#fff1f0; color:#dc0000;}
.sel_defalut.is_error option {color:#dc0000;}

/* checkbox */
.checkbox::after { content:""; display: block; clear: both;}
.checkbox { position:relative; transition: all .35s ease-in-out;}
.checkbox input[type=checkbox]  { position: absolute; width:1px; height:1px; margin:-1px; padding:0; clip:rect(0,0,0,0); border:0 none; overflow:hidden; }
.checkbox input[type=checkbox]+label {  margin-right:1.2rem; font-size:var(--f_size); line-height:2.6rem; cursor: pointer;}
.checkbox[class *= 'col'] { width:100%; align-items: flex-start;}
.checkbox[class *= 'col'] > * { flex-shrink: 0; flex-basis:auto}
.checkbox.col2 > * { min-width: calc(50% - 4.6rem); }
.checkbox.col3 > * { min-width: calc(33.333333% - 4.6rem);}

.check_defalut+label { font-size:var(--f_size); line-height:2.6rem; vertical-align: middle;}
.check_defalut+label::before { content:""; margin-top:0.4rem; margin-right:0.3rem; display:flex; align-items: center; justify-content: center; float:left; width:1.8rem; height:1.8rem; line-height:2.6rem; border:var(--bd_basic); border-radius: 0.3rem; background-color:#fff; overflow:hidden; vertical-align: middle;}
.check_defalut:checked+label::before { border-color:#3a6ac4; background:url(../images/common/ico_check.png) no-repeat center center; background-color:#3a6ac4; }
.check_defalut:focus+label::before {border-color:#3a6ac4;}
.check_defalut:disabled+label::before { color:var(--t_clr_light); background-color:#f1f1f5;}
.check_defalut:disabled:checked+label::before { border-color:#84a3cc; background:url(../images/common/ico_check.png) no-repeat center center; background-color:rgba(58,106,196,0.5);}

/* radio */
.radio::after { content:""; display: block; clear: both;}
.radio { position:relative; transition: all .35s ease-in-out;}
.radio input[type=radio] { position: absolute; width:1px; height:1px; margin:-1px; padding:0; clip:rect(0,0,0,0); border:0 none; overflow:hidden; }
.radio input[type=radio]+label { margin-right:1.2rem; font-size:var(--f_size); line-height:2.6rem; cursor: pointer;}
.radio[class *= 'col'] { width:100%; align-items: flex-start;}
.radio[class *= 'col'] > * { flex-shrink: 0; flex-basis:auto}
.radio.col2 > * { min-width: calc(50% - 4.6rem); }
.radio.col3 > * { min-width: calc(33.333333% - 4.6rem);}

.radio_defalut+label { font-size:var(--f_size); line-height:2.6rem; vertical-align: middle;}
.radio_defalut+label::before { content:""; margin-top:0.5rem; margin-right:0.3rem; display:flex; align-items: center; justify-content: center; float:left; width:1.7rem; height:1.7rem; line-height:2.6rem; border:0.1rem solid #c5c9d6; background-color:#fff; overflow:hidden; border-radius:50% 50%; vertical-align: middle;}
.radio_defalut:checked+label::before {border:0.5rem solid #3a6ac4; background-color:#fff; }
.radio_defalut:focus+label::before {border-color:#3a6ac4;}
.radio_defalut:disabled+label::before { color:var(--t_clr_light); background-color:#f1f1f5; }
.radio_defalut:disabled:checked+label::before { background-color:#f9f9f9; border:0.5rem solid rgba(58,106,196,0.5);}

/* input */
.inp_defalut { display:inline-block; width:auto; height:2.6rem; padding:0.2rem 1.0rem; min-width:0; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); background-color: #fff;  border:var(--bd_basic);}
.inp_defalut:focus { outline:0 none; border-color:#84a3cc;}
.inp_defalut::placeholder { color:var(--t_clr_light);}
.inp_defalut:read-only,
.inp_defalut.is_readonly { background-color:#f1f1f5;}
.inp_defalut:read-only[value] {color:var(--clr_basic)}
.inp_defalut:disabled { color:var(--t_clr_light); background-color:#f1f1f5; border-color:#e5e5ec;}
.inp_defalut:disabled[value] {color:var(--t_clr_light)}
.inp_defalut:required,
.inp_defalut.is_req { border-color:#c5c9d6; background-color:#f8fafe; }
.inp_defalut.is_error { border-color:#dc0000; background-color:#fff1f0; color:#dc0000;}
.inp_defalut.is_error::placeholder {color:#dc0000;}

/* input - 달력 */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field { font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); background-color:transparent}

.inp_calendar { position:relative; padding:0.2rem 3.0rem 0.2rem 1.0rem; height:2.6rem; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); border-radius: 0.3rem; border:var(--bd_basic);  cursor: pointer;}
.inp_calendar::-webkit-clear-button,
.inp_calendar::-webkit-outer-spin-button,
.inp_calendar::-webkit-inner-spin-button { -webkit-appearance: none;}
.inp_calendar::-webkit-datetime-edit-fields-wrapper { width:100%; height:100%; z-index:2;}
.inp_calendar::-webkit-calendar-picker-indicator { position:absolute; left:0rem; top:0rem; display:block; box-sizing: border-box; width:100%; height:100%; background:none; background-color:transparent; border:0.2rem solid transparent; cursor: pointer; z-index: 3;}
.inp_calendar:disabled::-webkit-calendar-picker-indicator { border-color:#e5e5ec;}
.inp_calendar::after { content:"달력보기버튼"; position:absolute; top:0; right:0; display:block; font-size:0; width:2.2rem; height:2.6rem; background:url(../images/common/ico_input_calendar.png) no-repeat 0.3rem 45%;  background-color:#fff; pointer-events:none; z-index:1}
.inp_calendar:disabled::after {background-color:#f2f2f2}

/*.inp_calendar { display:inline-block; width:auto; height:2.6rem; padding:0.2rem 3.0rem 0.2rem 1.0rem; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); border-radius: 0.3rem; background:url(../images/common/ico_input_calendar.png) no-repeat right 0.7rem center; background-color:#fff; border:var(--bd_basic);  cursor: pointer;}*/
.inp_calendar { display:inline-block; width:auto; background:url(../images/common/ico_input_calendar.png) no-repeat right 0.7rem center; background-color:#fff;}
.inp_calendar:focus { outline:0 none; border-color:#84a3cc;}
.inp_calendar::placeholder { font-size:var(--f_size); line-height:var(--f_line); color:var(--t_clr_light);}
.inp_calendar:read-only,
.inp_calendar.is_readonly { background-color:#f1f1f5;}
.inp_calendar:read-only[value] {color:var(--clr_basic)}
.inp_calendar:read-only:focus { background-color:#f1f1f5;}
.inp_calendar:read-only::after,
.inp_calendar.is_readonly::after { background-color:#f1f1f5;}
.inp_calendar:disabled { color:var(--t_clr_light); background-color:#f1f1f5; border-color:#e5e5ec;}
.inp_calendar:disabled[value] {color:var(--t_clr_light)}
.inp_calendar:disabled:focus { background-color:#f1f1f5;}
.inp_calendar:disabled::after { background-color:#f1f1f5;}
.inp_calendar:required,
.inp_calendar.is_req { border-color:#c5c9d6; background-color:#f8fafe; }
.inp_calendar:required::after,
.inp_calendar.is_req::after {background-color:#f8fafe; }
.inp_calendar:required:focus,
.inp_calendar.is_req:focus { background-color:#f8fafe;}
.inp_calendar.is_error { border-color:#dc0000; background-color:#fff1f0; color:#dc0000;}
.inp_calendar.is_error::placeholder {color:#dc0000;}
.inp_calendar.is_error:focus{ border-color:#dc0000; background-color:#fff1f0; }
.inp_calendar.is_error::after {background-color:#fff1f0; }

.inp_calendar.type_year { /* 년 */ }
.inp_calendar.type_yearmonth { /* 년월 */ }
.inp_calendar.type_time { /* 시간 */ }

.inp_calendar.date_start { /*시작일*/ }
.inp_calendar.date_end { /*종료일*/ }

/* input - 입력용 + 검색 */
input.inp_w_search { display:inline-block; width:auto; height:2.6rem; padding:0.2rem 1.0rem; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); background-color: #fff;  border:var(--bd_basic);}
input.inp_w_search { margin-right:0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right:0 none;}
.inp_btn_search { display:inline-block; width:3.0rem; height:2.6rem; border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; border-top:var(--bd_basic); border-bottom:var(--bd_basic); border-right:var(--bd_basic); background:url(../images/common/ico_btn_search_black.png) no-repeat center center; background-color: #fff;}
.inp_btn_search { font-size:0; line-height:2.6rem; color:transparent; vertical-align: bottom;}
.inp_btn_search > .btn_txt { font-size:0; color:transparent; opacity: 0;}

.inp_w_search:focus { outline:0 none; border-color:#84a3cc;}
.inp_w_search::placeholder { color:var(--t_clr_light);}
.inp_w_search:read-only,
.inp_w_search.is_readonly { background-color:#f1f1f5;}
.inp_w_search:read-only[value] {color:var(--clr_basic)}
.inp_w_search:disabled { color:var(--t_clr_light); background-color:#f1f1f5; border-color:#e5e5ec;}
.inp_w_search:disabled[value] {color:var(--t_clr_light)}
.inp_w_search:required,
.inp_w_search.is_req { border-color:#c5c9d6; background-color:#f8fafe; }
.inp_w_search.is_error { border-color:#dc0000; background-color:#fff1f0; color:#dc0000;}
.inp_w_search.is_error::placeholder {color:#dc0000;}
.inp_w_search + .inp_btn_search { margin-left:-0.5rem; }
.inp_w_search:focus + .inp_btn_search { outline:0 none; border-color:#84a3cc;}
.inp_w_search:read-only + .inp_btn_search,
.inp_w_search.is_readonly + .inp_btn_search { background-color:#f1f1f5;}
.inp_w_search:disabled + .inp_btn_search { color:var(--t_clr_light); background-color:#f1f1f5; border-color:#e5e5ec;}
.inp_w_search:required + .inp_btn_search,
.inp_w_search.is_req + .inp_btn_search { border-color:#c5c9d6; background-color:#f8fafe; }
.inp_w_search.is_error + .inp_btn_search { border-color:#dc0000; background-color:#fff1f0; color:#dc0000;}

/* textarea */
.textarea_defalut { display:block; padding:1.0rem; width:100%; height:12.0rem; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_basic); border:var(--bd_basic); background-color:#fff;  }
.textarea_defalut::placeholder { color:var(--t_clr_light);}
.textarea_defalut:focus {border-color:#84a3cc;}
.textarea_defalut:disabled { color:var(--t_clr_light); background-color:#f1f1f5; border-color:#ddd;}
.textarea_defalut:disabled[value] { color:var(--t_clr_light)}
.textarea_defalut:required,
.textarea_defalut.is_req { border-color:#c5c9d6; background-color:#f8fafe; }
.textarea_defalut.no_h { height:auto}
.textarea_defalut.h200 { height:20.0rem}
.textarea_defalut.h250 { height:25.0rem}
.textarea_defalut.h300 { height:30.0rem}
.textarea_defalut.h350 { height:35.0rem}
.textarea_defalut.h400 { height:40.0rem}

/* 각 엘리먼트 group화 강제 처리 시 type_grop */
.type_grp { display:flex; align-items: center; flex-direction: row; flex-wrap: nowrap;justify-content:flex-start; }
.type_grp > *:not(.hdn) { flex-shrink: 1; flex-grow: 1; flex-basis: auto; margin-right:0.4rem;}
.type_grp > *:last-child:not(.hdn) { margin-right:0;}
.type_grp > *[class *= "btn_"]:not(.hdn) { flex-grow: 0; flex-shrink: 0; flex-basis: unset;}
.type_grp > *:only-child:not(.hdn) { flex-basis: 100%; margin-right:0; }
.type_grp > *[class *= "w10"], 
.type_grp > *[class *= "w15"],
.type_grp > *[class *= "w20"],
.type_grp > *[class *= "w25"],
.type_grp > *[class *= "w30"],
.type_grp > *[class *= "w35"],
.type_grp > *[class *= "w40"],
.type_grp > *[class *= "w45"],
.type_grp > *[class *= "w50"],
.type_grp > *[class *= "w55"],
.type_grp > *[class *= "w60"],
.type_grp > *[class *= "w65"],
.type_grp > *[class *= "w70"],
.type_grp > *[class *= "w75"],
.type_grp > *[class *= "w80"],
.type_grp > *[class *= "w85"],
.type_grp > *[class *= "w90"],
.type_grp > *[class *= "w95"],
.type_grp > *[class *= "w100"] { flex-shrink: 0; flex-grow: 0; flex-basis: unset;}
.type_grp[class *= "col"] { flex-wrap: wrap;}
.type_grp .inner_txt { flex-grow: 0; flex-shrink: 0; flex-basis: unset;  }
.type_grp[class *= "checkbox"] > *, 
.type_grp[class *= "radio"] > * { flex-grow: 0;}
.type_grp.col0 > *:not(.check_defalut, .radio_defalut) { min-width: calc(100% - 1.2rem);}
.type_grp.col2 > *:not(.check_defalut, .radio_defalut) { min-width: calc(50% - 1.2rem);}
.type_grp.col3 > *:not(.check_defalut, .radio_defalut) { min-width: calc(33.3% - 1.2rem);}
.type_grp.col4 > *:not(.check_defalut, .radio_defalut) { min-width: calc(25% - 1.2rem);}

/**********************************************************************************
    btn
**********************************************************************************/
*[class *="btn_"] { text-align:center; border-radius: 0.2rem; box-shadow:0 0 0.05rem rgba(0,0,0,0.8) inset, 0 0 0.05rem rgba(0,0,0,0.1); transition:var(--tran_basic)}
*[class *="btn_"] > .btn_txt { display:inline-block; font-size:var(--f_size); font-weight: 700; line-height:var(--f_line); box-shadow: none; }

/* btn defalut */
.btn_defalut { display:inline-block; width:auto; padding:0.2rem 1.0rem; min-width:6.0rem; min-height:2.6rem; text-align: center; border:0.1rem solid transparent; background-color:var(--clr_main);  }
.btn_defalut > .btn_txt { color:#fff;}
.btn_defalut:hover,
.btn_defalut:focus { background-color:var(--clr_main_dark)}
input.btn_defalut  {width:auto; padding:0.2rem 1.0rem; min-width:6.0rem; min-height:2.6rem; font-size:var(--f_size); line-height:var(--f_line); color:#fff; background-color:var(--clr_main);  }

.btn_defalut_nobg { display:inline-block; width:auto; padding:0.2rem 1.0rem; min-width:6.0rem; min-height:2.6rem; text-align: center; border:0.1rem solid #1350c2; background-color:#fff;  }
.btn_defalut_nobg > .btn_txt { color:var(--clr_main);}
.btn_defalut_nobg:hover,
.btn_defalut_nobg:focus { background-color:#e9eefc}
input.btn_defalut_nobg  {width:auto; padding:0.2rem 1.0rem; min-width:6.0rem; min-height:2.6rem; font-size:var(--f_size); line-height:var(--f_line); color:var(--clr_main); background-color:#fff;  }

/* btn defalut - type warring */
.btn_defalut.type_warring { background-color:var(--clr_red);}
.btn_defalut.type_warring:hover,
.btn_defalut.type_warring:focus { background-color:#c91818}
input.btn_defalut.type_warring { background-color:var(--clr_red);}
.btn_defalut_nobg.type_warring { border-color:var(--clr_red); }
.btn_defalut_nobg.type_warring:focus,
.btn_defalut_nobg.type_warring:hover { background-color:#ffecec}
.btn_defalut_nobg.type_warring > .btn_txt { color:var(--clr_red);}
input.btn_defalut_nobg.type_warring { color:var(--clr_red);}

/* btn defalut - type cancle */
.btn_defalut.type_cancle { border-color:var(--t_clr_light); background-color:var(--t_clr_light); }
.btn_defalut.type_cancle  > .btn_txt { color:#fff;}
.btn_defalut.type_cancle:hover,
.btn_defalut.type_cancle:focus { background-color:var(--t_clr_gray);}
input.btn_defalut.type_cancle { color:#fff; background-color:var(--t_clr_light); }
.btn_defalut_nobg.type_cancle {border-color:var(--t_clr_light);}
.btn_defalut_nobg.type_cancle {border-color:var(--t_clr_light);}
.btn_defalut_nobg.type_cancle > .btn_txt { color:var(--t_clr_gray);}
.btn_defalut_nobg.type_cancle:hover { background-color:#f3f3f3;}
.btn_defalut_nobg.type_cancle > .btn_txt {  color:var(--t_clr_gray);}
input.btn_defalut_nobg.type_cancle { background-color:var(--t_clr_light); color:var(--t_clr_gray);}

/* btn defalut - type close */
.btn_defalut.type_close { background-color:var(--clr_basic);}
.btn_defalut.type_close:hover,
.btn_defalut.type_close:focus { background-color:var(--clr_basic);}
input.btn_defalut.type_close { background-color:var(--clr_basic);}
.btn_defalut_nobg.type_close { border-color:var(--clr_basic); }
.btn_defalut_nobg.type_close:focus,
.btn_defalut_nobg.type_close:hover { background-color:#fff}
.btn_defalut_nobg.type_close > .btn_txt { color:var(--clr_basic);}
input.btn_defalut_nobg.type_close { color:var(--clr_basic);}

/* btn defalut - type state */
.btn_defalut.type_state { border-color:var(--clr_basic); color:var(--clr_basic); background-color:#fff; }
.btn_defalut.type_state  > .btn_txt { color:var(--clr_basic);}
.btn_defalut.type_state:hover,
.btn_defalut.type_state:focus { background-color:#e9eefc}
input.btn_defalut.type_state { color:var(--clr_basic); background-color:#fff; }
.btn_defalut_nobg.type_state { border-color:var(--clr_basic); }
.btn_defalut_nobg.type_state:focus,
.btn_defalut_nobg.type_state:hover { background-color:#e9eefc}
.btn_defalut_nobg.type_state > .btn_txt { color:var(--clr_basic);}
input.btn_defalut_nobg.type_state { color:var(--clr_basic);}

/* btn defalut - type intb */
.btn_defalut.type_intb { background-color:#e1e6ef; border:var(--bd_basic)}
.btn_defalut.type_intb  > .btn_txt { color:var(--clr_main_dark);}
.btn_defalut.type_intb:hover,
.btn_defalut.type_intb:focus { background-color:#eff2f6}
input.btn_defalut.type_intb {  background-color:#e1e6ef;}
.btn_defalut_nobg.type_intb { border:var(--bd_basic) }
.btn_defalut_nobg.type_intb:focus,
.btn_defalut_nobg.type_intb:hover { background-color:#eff2f6}
.btn_defalut_nobg.type_intb > .btn_txt {  color:var(--clr_main_dark);}
input.btn_defalut_nobg.type_intb {  color:var(--clr_main_dark);}

/* (별도) 조회영역 전용버튼 */
.btn_topsearch { display:inline-block; width:auto; padding:0.2rem 1.0rem; min-width:7.0rem; min-height:2.6rem; text-align: center; border:0.1rem solid transparent; background-color:var(--clr_main_dark); }
.btn_topsearch > .btn_txt { color:#fff;}
.btn_topsearch:hover,
.btn_topsearch:focus { background-color:#024295}
.btn_topsearch.type_sm { min-width:0}

/* (별도) 좌우영역 화살표 */
.btn_space_arrow { display:inline-block; width:3.0rem; height:3.0rem; text-align: center; background-color:var(--clr_main_dark); }
.btn_space_arrow > *,
.btn_space_arrow > .btn_txt  { font-size:0; line-height:0; opacity: 0; visibility: hidden;}
.btn_space_arrow.is_left { background:url(../images/common/ico_btn_ly_arrow_left.png) no-repeat center center;  background-color:var(--clr_main_dark);}
.btn_space_arrow.is_right { background:url(../images/common/ico_btn_ly_arrow_right.png) no-repeat center center;  background-color:var(--clr_main_dark);}
.btn_space_arrow.is_top { background:url(../images/common/ico_btn_ly_arrow_left.png) no-repeat center center;  background-color:var(--clr_main_dark); transform: rotate(45deg); }
.btn_space_arrow.is_bottom { background:url(../images/common/ico_btn_ly_arrow_right.png) no-repeat center center;  background-color:var(--clr_main_dark); transform: rotate(45deg); }
.btn_space_arrow:hover,
.btn_space_arrow:focus { background-color:var(--clr_main_dark); }

/* (별도) more(더보기) 전용버튼 */
.btn_list_more { display:inline-block; width:auto; padding:0.2rem 1.0rem; min-width:6.0rem; min-height:2.6rem; text-align: center; border:var(--bd_basic); background-color: #eff2f6; }
.btn_list_more > * { vertical-align: middle;}
.btn_list_more > .btn_txt { color:var(--t_clr_basic);}
.btn_list_more > .btn_txt::after { content:"\002B"; display: inline-block; margin-left:0.4rem; font-size:1.2rem; font-weight: 700; color:var(--t_clr_basic); }
.btn_list_more:hover,
.btn_list_more:focus { background-color:#e1e6ef}

/* 텍스트 + 아이콘 버튼 */
.btn_txt_ico { display:inline-block; width:auto; padding:0.2rem 1.0rem; text-align: center; border:0.1rem solid #000; background-color:#fff}
.btn_txt_ico > .btn_txt { color:#000; vertical-align: middle;}
.btn_txt_ico > .btn_txt::after { content:""; display: inline-block; margin-left:0.2rem; width:1.4rem; height:1.4rem; line-height: var(--f_line); background-repeat: no-repeat; background-position: center center; vertical-align: middle;}
.btn_txt_ico.xls_up > .btn_txt::after { background-image: url(../images/common/ico_btn_xls_up.png);}
.btn_txt_ico.xls_down > .btn_txt::after { background-image: url(../images/common/ico_btn_xls_down.png);}
.btn_txt_ico.xls_up:focus, .btn_txt_ico.xls_up:hover,
.btn_txt_ico.xls_down:focus, .btn_txt_ico.xls_down:hover { background-color:#e9eefc}
.btn_txt_ico.xls_up:disabled > .btn_txt::after { background-image: url(../images/common/ico_btn_xls_up_dis.png);}
.btn_txt_ico.xls_down:disabled > .btn_txt::after { background-image: url(../images/common/ico_btn_xls_down_dis.png);}
.btn_txt_ico.file_up { border-color:transparent; background-color:var(--clr_main)}
.btn_txt_ico.file_up > .btn_txt { color:#fff; }
.btn_txt_ico.file_up > .btn_txt::after {  background-image: url(../images/common/ico_btn_file_up.png);opacity: 0.65;}
.btn_txt_ico.file_up:disabled > .btn_txt::after { opacity: 0.35;}
.btn_txt_ico.file_up:hover {background-color:var(--clr_main_dark)}
.btn_txt_ico.file_down { border-color:transparent; background-color:var(--clr_main)}
.btn_txt_ico.file_down > .btn_txt { color:#fff; }
.btn_txt_ico.file_down > .btn_txt::after { background-image: url(../images/common/ico_btn_file_down.png);opacity: 0.65;}
.btn_txt_ico.file_down:disabled > .btn_txt::after { opacity: 0.35;}
.btn_txt_ico.file_down:hover {background-color:var(--clr_main_dark)}
.btn_txt_ico.file_cancel { border-color:transparent; background-color:var(--t_clr_light);}
.btn_txt_ico.file_cancel > .btn_txt { color:#fff; }
.btn_txt_ico.file_cancel > .btn_txt::after { background-image: url(../images/common/ico_btn_cancel.png); opacity: 0.65;}
.btn_txt_ico.file_cancel:hover,
.btn_txt_ico.file_cancel:focus { background-color:var(--t_clr_gray);}
.btn_txt_ico.file_cancel:disabled > .btn_txt::after { opacity: 0.35;}
.btn_txt_ico.file_delete { border-color:transparent; background-color:var(--clr_red);}
.btn_txt_ico.file_delete > .btn_txt { color:#fff; }
.btn_txt_ico.file_delete > .btn_txt::after { background-image: url(../images/common/ico_btn_file_delete.png); opacity: 0.65;}
.btn_txt_ico.file_delete:hover,
.btn_txt_ico.file_delete:focus { background-color:#c91818}
.btn_txt_ico.file_delete:disabled > .btn_txt::after { opacity: 0.35;}

/* 아이콘 버튼 */
.btn_icon { display:inline-block; width:2.6rem; height:2.6rem;  border:0.1rem solid #7f97b7; background-position: center center; background-repeat: no-repeat; background-color:#fff; }
.btn_icon > *,
.btn_icon > .btn_txt { font-size:0; line-height:0; opacity: 0; visibility: hidden;}
.btn_icon:hover,
.btn_icon:focus { background-color:#e5e8f1 }

.btn_icon.reload_search { background-image:url(../images/common/ico_btn_reload_color.png);}
.btn_icon.list_open,
.btn_icon.opt_open { background-image:url(../images/common/ico_btn_tgl_open.png);}
.btn_icon.list_close,
.btn_icon.opt_close { background-image:url(../images/common/ico_btn_tgl_close.png);}
.btn_icon.list_open:focus, .btn_icon.list_open:hover,
.btn_icon.list_close:focus, .btn_icon.list_close:hover,
.btn_icon.opt_open:focus, .btn_icon.opt_open:hover,
.btn_icon.opt_close:focus, .btn_icon.opt_close:hover { background-color:#e9eefc}
.btn_icon.list_open:disabled, .btn_icon.list_close:disabled,
.btn_icon.opt_open:disabled, .btn_icon.opt_close:disabled { background-image:url(../images/common/ico_btn_tgl_open_dis.png);}

.btn_icon.folder { background-image:url(../images/common/ico_btn_folder.png); background-color:var(--clr_main); border-color:transparent}
.btn_icon.folder:hover,
.btn_icon.folder:focus { background-color:var(--clr_main_dark)}
.btn_icon.reload { background-image:url(../images/common/ico_btn_reload.png); background-color:var(--clr_main_dark);border-color:transparent}
.btn_icon.puls { background-image:url(../images/common/ico_btn_rowplus.png); background-color:#7f97b7;border-color:transparent}
.btn_icon.minus { background-image:url(../images/common/ico_btn_rowminus.png); background-color:#7f97b7;border-color:transparent}
.btn_icon.puls:hover, .btn_icon.puls:focus,
.btn_icon.minus:hover, .btn_icon.minus:focus { background-color:#587cac;}
.btn_icon.pop { background-image:url(../images/common/ico_btn_pop.png); background-color:var(--clr_main);border-color:transparent}
.btn_icon.pop:hover,
.btn_icon.pop:focus { background-color:var(--clr_main_dark)}
.btn_icon.del { background-image:url(../images/common/ico_btn_del.png); background-color:var(--clr_red);border-color:transparent}
.btn_icon.del:hover,
.btn_icon.del:focus { background-color:#c91818}
.btn_icon.folder:disabled { background-image:url(../images/common/ico_btn_folder_dis.png);}
.btn_icon.reload:disabled { background-image:url(../images/common/ico_btn_reload_dis.png);}
.btn_icon.puls:disabled { background-image:url(../images/common/ico_btn_rowplus_dis.png);} 
.btn_icon.minus:disabled { background-image:url(../images/common/ico_btn_rowminus_dis.png);} 
.btn_icon.pop:disabled { background-image:url(../images/common/ico_btn_pop_dis.png)}
.btn_icon.del:disabled { background-image:url(../images/common/ico_btn_del_dis.png)}
.btn_icon.tree_allclose { background-image:url(../images/common/ico_btn_tree_down.png); background-color:#999; border-color:transparent}
.btn_icon.tree_allopen { background-image:url(../images/common/ico_btn_tree_up.png); background-color:var(--clr_main); border-color:transparent}
.btn_icon.close {position: relative; background-color:var(--clr_basic); border-color:transparent}
.btn_icon.close:before, 
.btn_icon.close:after { content:""; position:absolute; left:50%; top:50%; width:0.1rem; height:1.2rem; background-color:#fff;}
.btn_icon.close:before { transform: translate(-50%, -50%) rotate(45deg);}
.btn_icon.close:after {transform: translate(-50%, -50%) rotate(-45deg);}
.btn_icon.close:hover,
.btn_icon.close:focus { background-color:var(--clr_basic);}
.btn_icon.del_file { width:1.8rem; height:1.8rem; background-image:url(../images/common/ico_btn_del_m.png); background-size:1.2rem auto; background-color:var(--clr_red);border-color:transparent}
.btn_icon.del_file:hover,
.btn_icon.del_file:focus { background-color:#c91818}

/* btn group area */
.btns_grp { display:flex; align-items: center; justify-content: flex-start; width:100%; margin-top:2.0em;}
.btns_grp > * {margin-right:0.5rem}
.btns_grp > *:last-child { margin-right:0; }
.btns_grp.type_right { justify-content: flex-end; }
.btns_grp.type_left { justify-content: flex-start; }
.btns_grp.type_center { justify-content: center; }
.btns_grp.type_space { justify-content: space-between; }

/* btn color 강제처리 */
.bgc_white { background-color:#fff;}
.bgc_gray { background-color:#b9b9b9;}
.bgc_blue { background-color:var(--clr_main)}
.bgc_dark_blue { background-color:var(--clr_main_dark)}
.bgv_red { background-color:var(--clr_red)}
.bgc_black { background-color:var(--clr_basic);}

/* btn_ disabled 일괄선언 */
*[class *="btn_"]:disabled,
*[class *="btn_"]:disabled:hover,
*[class *="btn_"]:disabled:focus { background-color:#f1f1f5; border-color: #ddd;}
*[class *="btn_"]:disabled > .btn_txt { color:var(--t_clr_light) }
*[class *="btn_icon"]:disabled { background-color:#f1f1f5}

/* btn 강제 is_active 처리 (배경색 변경) */
.btn_defalut.is_active { background-color:var(--clr_main)}
.btn_defalut.is_active > .btn_txt { color:#fff}

/* btn 강제 is_disabled 처리 (이벤트제거 및 배경색, 글씨조절) */
*[class *="btn_"].is_disabled { pointer-events: none !important; background-color:#f1f1f5!important; border-color: #ddd!important;}
*[class *="btn_"].is_disabled > .btn_txt{ color:var(--t_clr_light)!important;}

/**********************************************************************************
    text tag
**********************************************************************************/
.tag_default { display:inline-block; padding-left:0.8rem; padding-right:0.8rem; width:auto; border:0.1rem solid transparent; background-color:transparent; vertical-align: middle;}
.tag_default > * { font-size:1.1rem; line-height:2.4rem; font-weight:700; }

.tag_default.bgc_white { color:var(--t_clr_basic); background-color:#f9f9f9; border-color:#f9f9f9}
.tag_default.bgc_white > * {color:var(--t_clr_basic);}
.tag_default.bgc_white_blue { color:var(--t_clr_main); background-color:#e3ebfb; border-color:#e3ebfb}
.tag_default.bgc_white_blue > * {color:var(--t_clr_main);}
.tag_default.bgc_white_red { color:var(--clr_red); background-color:#fae8e8; border-color:#fae8e8}
.tag_default.bgc_white_red > * {color:var(--clr_red);}
.tag_default.bgc_gray { color:var(--t_clr_basic); background-color:#b9b9b9; border-color:#b9b9b9}
.tag_default.bgc_gray > * {color:var(--t_clr_basic);}
.tag_default.bgc_blue { color:#fff; background-color:var(--clr_main); border-color:var(--clr_main); opacity: 0.8;}
.tag_default.bgc_blue > * {color:#fff;}
.tag_default.bgc_dark_blue { color:#fff; background-color:var(--clr_main_dark); border-color:var(--clr_main_dark)}
.tag_default.bgc_dark_blue > * {color:#fff;}
.tag_default.bgv_red { color:#fff; background-color:var(--clr_red); border-color:var(--clr_red)}
.tag_default.bgv_red > * {color:#fff;}
.tag_default.bgc_black { color:#fff; background-color:var(--clr_basic); border-color:var(--clr_basic)}
.tag_default.bgc_black > * {color:#fff;}

/**********************************************************************************
    ico tag
**********************************************************************************/
.tag_ico_lock { display:inline-block; width:1.8rem; height:1.8rem; line-height:1.8rem; background:url(../images/common/ico_tag_lock.png) no-repeat center center; background-color:#696969; border-radius: 50% 50%; vertical-align: middle;font-size:0; color:transparent; opacity: 0.75;}
.tag_ico_unlock { display:inline-block;  width:1.8rem; height:1.8rem; line-height:1.8rem; background:url(../images/common/ico_tag_unlock.png) no-repeat center center; background-color:#1350c2; border-radius: 50% 50%; vertical-align: middle;font-size:0; color:transparent; opacity: 0.75;}
.tag_ico_new { display:inline-block;  width:1.8rem; height:1.8rem; line-height:1.8rem; background:url(../images/common/ico_tag_new.png) no-repeat center center; background-color:#ff6c00; border-radius: 50% 50%; vertical-align: middle; font-size:0; color:transparent}

/**********************************************************************************
    title
**********************************************************************************/
*[class *= page_tit_] {display:block; position: relative;}
*[class *= page_tit_]  > .tit_name { display:inline-block; color:var(--clr_basic); vertical-align: middle;}
*[class *= page_tit_] .sub_script { display:inline-block; margin-left:0.4rem; font-size:var(--f_size); line-height: inherit; color:#888;vertical-align: middle;}
*[class *= page_tit_] .sub_script .em_num { color:var(--clr_main); font-weight: 700;}

.page_tit_lg { padding-left:1.4rem; margin-top:0.5rem; margin-bottom:0.5rem; /*margin-top:0.85rem; margin-bottom:0.85rem */}
.page_tit_lg > .tit_name { font-size:1.65em; line-height:3.7rem; font-weight: 700;}
.page_tit_lg::before { content:""; position:absolute; left:0; top: 1.0rem; display:inline-block; width:0.5rem; height:1.7rem; background-color:var(--clr_main_dark)}

.page_tit_md { padding-left:1.2rem; margin-top:0.5rem; margin-bottom:0.5rem; /*margin-top:0.85rem; margin-bottom:0.85rem */}
.page_tit_md > .tit_name { font-size:1.7rem; line-height:3.7rem; font-weight: 700;}
.page_tit_md::before { content:""; position:absolute; left:0; top: 1.4rem; display:inline-block; width:0.9rem; height:0.9rem; border-radius:50% 50%; border:0.3rem solid var(--clr_main)}

.page_tit_sm { padding-left:1.2rem; margin-top:0.5rem; margin-bottom:0.5rem; /*margin-top:0.85rem; margin-bottom:0.85rem */}
.page_tit_sm > .tit_name { font-size:1.6rem; line-height:3.7rem; font-weight: 700;}
.page_tit_sm::before { content:""; position:absolute; left:0.1rem; top: 1.6rem; display:inline-block; width:0.6rem; height:0.6rem; background-color: var(--clr_main); transform: rotate(45deg); }

/**********************************************************************************
    text
**********************************************************************************/
*[class *= "txt_descript_"] { position:relative; display:block; font-size:var(--f_size); line-height:var(--f_line); word-break: keep-all;}
*[class *= "txt_descript_"] > * {font-size:var(--f_size); line-height:var(--f_line); vertical-align: middle; }
.txt_descript_d { color:var(--clr_basic);}
.txt_descript_sm,
.txt_descript_sm > * { font-size:1.2rem; line-height:2.0rem; color:var(--clr_basic);}

/* 알림 텍스트 */
.txt_notice { display:inline-block; margin-left:1.2rem; width:auto; font-size:3.3rem; font-weight: 300; line-height:var(--f_line); color:var(--clr_red); vertical-align:middle;}
.txt_notice::before { content:"\203B"; display:inline-block; margin-right:0.8rem; font-size:3.3rem; font-weight: 400; line-height:var(--f_line); color:var(--clr_red); vertical-align: text-bottom;}

/**********************************************************************************
    tab
**********************************************************************************/
/* 최상위 탭 */
.tab { width:100%; margin-top:0.8rem}
.tab > ul { display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; }
.tab > ul > li { display:block; z-index:1}
.tab .tab_list { position:relative; display:block; width:auto; padding:0.8rem 3.6rem; border-top:0.1rem solid #e1e6ef; border-left:0.1rem solid #e1e6ef; border-bottom:0.1rem solid #e1e6ef; background-color:#f2f4f8 }
.tab .tab_list::after { content:""; display:none; position:absolute; top:0; right:0; width:0.4rem; height:100%; background-color:transparent; border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem; }
.tab .tab_list::before { content:""; display:none; position:absolute; top:0; left:0; width:0.4rem; height:100%; background-color:transparent; border-top-left-radius: 0.4rem; border-bottom-left-radius: 0.4rem; }
.tab .tab_list:first-of-type { border-top-left-radius: 0.4rem; border-bottom-left-radius: 0.4rem;}
.tab .tab_list:last-of-type { border-right:0.1rem solid #e1e6ef; border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem;}
.tab .tab_list.is_active {  border-radius:0.4rem; background-color:var(--clr_main_dark); border-color:var(--clr_main_dark); z-index:3}
.tab .tab_list.is_active::before { display:block; background-color:var(--clr_main_dark);}
.tab .tab_list.is_active::after { display:block; background-color:var(--clr_main_dark);}
.tab .tab_item {display:block; width:100%; height:100%;}
.tab .tab_item > * { font-size:var(--f_size_b); line-height:var(--f_line); font-weight:700; color:var(--clr_main_dark);}
.tab .tab_list.is_active .tab_item > * { color:#fff;}

/* 서브 탭 */
.tab_sub { width:100%; margin-top:0.8rem}
.tab_sub > ul { display:flex; width:100%; border-bottom:0.1rem solid #ebeef4}
.tab_sub > ul > li { display:block;}
.tab_sub .tab_list { position:relative; display:block; width:auto; padding:0.6rem 3.0rem; border-top-right-radius: 0.4rem; border-top-left-radius: 0.4rem; border-top:0.1rem solid transparent; border-left:0.1rem solid transparent; border-right:0.1rem solid transparent; background-color:transparent }
.tab_sub .tab_list.is_active { background-color:#f2f4f8; border-color:#ebeef4; }
.tab_sub .tab_item {display:block; width:100%; height:100%;}
.tab_sub .tab_item > * { font-size:var(--f_size); line-height:var(--f_line); font-weight:700; color:var(--t_clr_gray);}
.tab_sub .tab_list.is_active .tab_item > * { color:var(--clr_main_dark);}

.tab_contents_area { display:block; margin-top:1.0rem; width:100%; height:auto; overflow: hidden; transition: var(--tran_basic);}
.tab_contents_area > * { display:block; width:100%; height:0; opacity: 0; visibility: hidden; color:transparent; transition: var(--tran_basic);}
.tab_contents_area .is_active { height:auto; opacity: 1; visibility: visible;}
.tab_contents_area .tab_contents > .conbox_area { margin-top:0 }

/**********************************************************************************
    list
**********************************************************************************/
*[class *= "txt_list_"] { display:block; width:100%;}
*[class *= "txt_list_"] > li { position: relative; padding-top:0.3rem; padding-bottom:0.3rem;}
*[class *= "txt_list_"] > li::before { content:""; position: absolute; display:block;}
*[class *= "txt_list_"] > li * { word-wrap: break-word; word-break: keep-all;}
.txt_list_d > li { padding-top:0.3rem; padding-bottom:0.3rem;}
.txt_list_d > li * { font-size:var(--f_size); line-height:var(--f_line); color:var(--t_clr_basic)}

.txt_list_dot > li { padding-top:0.3rem; padding-bottom:0.3rem; padding-left:1.6rem;}
.txt_list_dot > li::before { left:0.3rem; top:1.1rem; width:0.28rem; height:0.28rem; background-color:var(--clr_main)}
.txt_list_dot > li * { font-size:var(--f_size); line-height:var(--f_line); color:var(--t_clr_basic)}

/**********************************************************************************
    faq
**********************************************************************************/
/* faq */
.faq { width:100%; margin-top:0.8rem}
.faq .faq_list { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; width:100%; background-color:#fff; border-top:0.1rem solid var(--clr_main); }
.faq .faq_list .faq_item { background-color: #fff; margin-top:-0.1rem}
.faq .faq_list .faq_item .faq_title { box-sizing:border-box; position:relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width:100%; padding:1.3rem 7.0rem 1.3rem 2.3rem; border-top:0.1rem solid #eee; border-bottom:0.1rem solid #eee; cursor: pointer; transition: all .2s ease-in-out;}
.faq .faq_list .faq_item .faq_view { box-sizing:border-box; display:block; width:100%; transition: var(--tran_basic);}
.faq .faq_list > .faq_item:first-of-type { margin-top:0;}
.faq .faq_list > .faq_item:first-of-type .faq_title { border-top:0 none;}
.faq .faq_list > .faq_item:last-of-type .faq_title { border-bottom:0.1rem solid #eee; }

.faq_item .faq_title * { line-height: var(--f_line); color:var(--t_clr_basic);  word-wrap: break-word; word-break: keep-all;}
.faq_item .faq_title > * {display:block;}
.faq_item .faq_title .f_div_type { flex-shrink: 0; padding-top:0.5rem; width:12%; min-width:6.0rem; }
.faq_item .faq_title .f_div_type * { display:inline-block; vertical-align: middle; width:auto; font-size:var(--f_size_m); color:var(--t_clr_light); font-weight: 700;}
.faq_item .faq_title .f_div_type::after { content:""; display:none; margin-left:0.5rem; margin-right:2.0rem; width:0.5rem; height:0.5rem; line-height: var(--f_line); border-radius: 50% 50%; vertical-align: top; opacity: 0; visibility: hidden;}
.faq_item .faq_title .f_subject { padding-top:0.5rem; font-size:var(--f_size_b); font-weight: 700;}
.faq_item .faq_title .f_date { display:block; width:100%; font-size:var(--f_size_b);}
.faq_item .faq_title .f_writer { display:block; width:100%; font-size:var(--f_size_b);}
.faq_item .faq_title .f_view_action { position:absolute; right:1.5rem; top:1.5rem;}

.faq_item .faq_view > .f_content { display:flex; width:100%; padding:1.5rem; background-color:#f7f9fc;}
.faq_item .faq_view > .f_content * { font-size: var(--f_size); line-height: var(--f_line); color:var(--t_clr_basic); word-wrap: break-word; word-break: keep-all;}

.faq_item[open] .faq_title .f_div_type * { color:var(--t_clr_basic)}
.faq_item[open] .faq_title .f_div_type::after { display:inline-block; background-color: #000; opacity: 1; visibility:visible; }

.faq_item summary { margin-bottom:0;}
.faq_item summary ~ * { animation:faq_close 0.15s ease-in-out}
.faq_item[open] summary ~ * { animation:faq_open 0.15s ease-in-out}
@keyframes faq_open{
    0% { opacity: 0; transform: translateY(-10px); transition: all .2s ease-in-out;}
    100% { opacity: 1; transform: translateY(0); transition: all .2s ease-in-out;}
}
@keyframes faq_close{
    0% { opacity: 1; transform: translateY(0); transition: all .2s ease-in-out;}
    100% { opacity: 0; transform: translateY(-10px); transition: all .2s ease-in-out;}
}

/* qna type */
.faq.type_qna .faq_item .faq_title .f_div_type { width:auto; min-width:5.0rem}
.faq.type_qna .faq_item .faq_title .f_div_type * { font-size:2.0rem; font-weight:700; color:var(--clr_main_dark); }
.faq.type_qna .faq_item .faq_title .f_div_type::after { padding-top:0; padding-right:0; }
.faq.type_qna .faq_item[open] .faq_title .f_div_type::after { display: none;}
.faq.type_qna .faq_item .faq_view > .f_content { flex-direction: row; flex-wrap: wrap; align-content: space-between; justify-content: flex-start;}
.faq.type_qna .faq_item .faq_view > .f_content .f_con_tit { flex-shrink: 0; padding-top:0; width:auto; min-width:6.0rem; }
.faq.type_qna .faq_item .faq_view > .f_content .f_con_tit::before { content:""; display: inline-block; margin-left:0.8rem; margin-right:0.6rem; width:1.0rem; height:1.0rem; line-height:var(--f_line); border-left:0.1rem solid #ccc; border-bottom:0.1rem solid #ccc; vertical-align: super; }
.faq.type_qna .faq_item .faq_view > .f_content .f_con_tit * { display:inline-block; font-size:2.0rem; font-weight:700;  color:var(--clr_red); }
.faq.type_qna .faq_item .faq_view > .f_content .f_con_tit + * { flex-shrink: 0; max-width:calc(100% - 6.0rem); }
.faq.type_qna .faq_item .faq_view > .f_content .f_con_date { flex-shrink: 0; display: block; width:100%; font-size:var(--f_size_b);}

/**********************************************************************************
    process
**********************************************************************************/
.process_bar { display:block; width:100%; margin-top:0.8rem; padding:1.4rem 2.4rem 1.0rem 2.4rem; background-color:#fff; border-radius: 0.5rem; border:0.1rem solid #e5e5ec; box-shadow: 0 0 0.5rem rgba(0,0,0,0.1); }
.process_bar ol { display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; justify-content: space-between; counter-reset:step_info_number;}
.process_bar ol > li { flex:1 1 auto;}
.process_bar .p_step { counter-increment:step_info_number; position:relative; padding-bottom:2.0rem; display:flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: center; text-align: center; z-index:1}
.process_bar .p_step > * { margin:0.2rem 0; font-weight:700;}
.process_bar .p_step * { word-wrap: break-word; word-break: keep-all;}
.process_bar .p_step .step_title { display:flex; flex-direction: column; flex-wrap: nowrap; align-items: center;}
.process_bar .p_step .step_title::before { content:"STEP" counter(step_info_number); display:block; width:auto; height:var(--f_line); margin-bottom:0.4rem; padding-left:1.0rem; padding-right:1.0rem; font-size:1.1rem; line-height:var(--f_line); color:#fff; border-radius: 1.0rem; background-color:var(--t_clr_light)}
.process_bar .p_step .step_title::after { content:""; position:absolute; left:50%; bottom:0.5rem; display:block; margin-left:-0.6rem; width:1.1rem; height:1.1rem; border-radius: 50% 50%;; background-color:var(--t_clr_light); z-index:3}
.process_bar .p_step .step_title .tit_name { font-size:var(--f_size_b); line-height:2.6rem; color:var(--t_clr_light) }
.process_bar .p_step::after,
.process_bar .p_step::before { content:""; position:absolute; display: block; width:50%; height:0.1rem; background-color:var(--t_clr_light)}
.process_bar .p_step::before { left:0; bottom:1.0rem;}
.process_bar .p_step::after { right:0; bottom:1.0rem;}

.process_bar .p_step.is_complete::before,
.process_bar .p_step.is_complete::after { background-color:var(--t_clr_main)}
.process_bar .p_step.is_complete .step_title .tit_name { color:var(--clr_basic)}
.process_bar .p_step.is_complete .step_title::after,
.process_bar .p_step.is_complete .step_title::before { background-color:#7f97b7}

.process_bar .p_step.is_active::before  { background-color:var(--t_clr_main)}
.process_bar .p_step.is_active .step_title .tit_name { color:var(--clr_main_dark)}
.process_bar .p_step.is_active .step_title::before  { background-color:var(--t_clr_main)}
.process_bar .p_step.is_active .step_title::after { background-color:#fff; border: 0.3rem solid var(--t_clr_main)}

.process_bar .p_step:first-of-type::before,
.process_bar .p_step:last-of-type::after { background-color:transparent}



/**********************************************************************************
    paging info
**********************************************************************************/
/* 페이징 */
.paging { display:flex; width:auto;}
.paging > * { display:block; width:auto; min-width:2.8rem; height:2.8rem; font-size:var(--f_size); font-weight:700; line-height:2.5rem; text-align: center; border-radius: 0.2rem;}
@supports (gap:0.4rem) {
    .paging {gap:0.4rem;}
}
@supports not (gap:0.4rem) {
    .paging {margin: -0.2rem; }
    .paging > * {margin: 0.2rem !important;}
}
.paging *[class *="p_arrow_"] { padding:0 1.0rem; background-color:#e1e6ef; border:var(--bd_basic)}
.paging *[class *="p_arrow_"] > .btn_txt { color:var(--clr_main_dark);}
.paging *[class *="p_arrow_"]:hover,
.paging *[class *="p_arrow_"]:focus { background-color:#eff2f6}
.paging *[class *="p_arrow_"]:disabled {  background-color:#f1f1f5; }
.paging *[class *="p_arrow_"]:disabled > .btn_txt { color:var(--t_clr_light);}
.paging .p_num { width:2.8rem; color:var(--t_clr_gray); background-color:#fff; border:0.1rem solid transparent}
.paging .p_num:focus { border-color:var(--t_clr_gray)}
.paging .p_num.is_select { color:#fff; background-color:var(--clr_main_dark); pointer-events: none;}

/* 페이지 정보 */
.page_info { display:block }
.page_info::before { content:""; display: inline-block; width:2.8rem; height:2.8rem; margin-right:0.2rem; line-height:2.8rem; vertical-align: middle; border-radius: 50% 50%; background:url(../images/common/ico_page.png) no-repeat center center; background-color:var(--clr_main_dark); }
.page_info > * { display: inline-block; vertical-align: middle; margin-right:0.4rem; font-size:var(--f_size); font-weight:700; line-height:2.8rem; color:var(--t_clr_gray)}
.page_info > *:last-child:not(.hdn) { margin-right:0;}
.page_info .this_page { color:var(--clr_main);vertical-align: middle; }
.page_info .this_page::after { content:"\002F"; display: inline-block; margin:0 0.2rem; font-size:var(--f_size); font-weight:700; color:var(--clr_main);line-height:2.8rem; vertical-align: middle;}

/* 페이지 이동 */
.page_move {  display:flex; align-items: center; flex-direction: row; flex-wrap: nowrap;justify-content:flex-start;}
.page_move > * {font-size:var(--f_size); color:var(--t_clr_gray); margin-left:0.2rem; margin-right:0.2rem; }
.page_move > *:last-child:not(.hdn) { margin-right:0;}
.page_move input[type=number], 
.page_move input[type=text] { padding:0.2rem 0.6rem; height:2.8rem; min-width:0; width:5.0rem}

/**********************************************************************************
    table
**********************************************************************************/
/* search table (common) */
*[class *="search_area_"] { display:flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; margin-top:0.8rem; padding:1.0rem 0 1.0rem 1.0rem; width:100%; height:auto; overflow: hidden;  border-radius: 0.2rem;}
*[class *="search_area_"] > .searchForm { display:flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;  }
*[class *="search_area_"] table { table-layout: fixed;  width:calc(100% - 17.0rem);}
*[class *="search_area_"] .search_btn_grp {display:flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; width:17.0rem; margin-top:0.3rem; padding-right:1.5rem; padding-bottom:0.5rem; box-shadow: none;}
*[class *="search_area_"] .search_btn_grp > * { margin-left:0.4rem}
*[class *="search_area_"] table th,
*[class *="search_area_"] table td { padding:0.3rem 1.0rem; font-size:var(--f_size); text-align: left; vertical-align: top; }
*[class *="search_area_"] .tb_label { font-weight: 700;}
*[class *="search_area_"] .tb_label,
*[class *="search_area_"] .tb_value { line-height: var(--f_line);}
*[class *="search_area_"] .is_req > .label_txt::after { content:"*"; display:inline-block; margin-left:0.4rem; font-size:var(--f_size); line-height: 2.6rem; color:var(--clr_red);font-weight:700; vertical-align: baseline;}
*[class *="search_area_"] .label_txt { font-weight: 700;}
*[class *="search_area_"] .label_txt.is_req::after  { margin-left:0.4rem;}
*[class *="search_area_"] table td > .inp_defalut:only-child { width:100%;}
*[class *="search_area_"] table td > .inp_w_search:only-of-type { width:calc(100% - 3.0rem);}
*[class *="search_area_"] table td > .sel_defalut:only-child { width:100%;}
*[class *="search_area_"] table td > .textarea_defalut.no_h:only-child { width:100%; height:100%; }
*[class *="search_area_"] table td > .inp_calendar:only-child { width:100%;}
*[class *="search_area_"] table td .type_grp { width:100%; }
*[class *="search_area_"] table td .type_grp > .inp_defalut { width:1%; /* input width 미정의 시 이슈 있음*/}
*[class *="search_area_"] table .is_noview { display:block; height:0; opacity: 0; visibility: hidden;  transition: var(--tran_basic);} /* (미노출 항목들 : tr에 지정해줌) */
*[class *="search_area_"] table .is_view { display: table-row; height:auto; opacity: 1; visibility: visible;  transition: var(--tran_basic);}
*[class *="search_area_"] table th,
*[class *="search_area_"] table td,  
*[class *="search_area_"] table th > *,
*[class *="search_area_"] table td > * { word-wrap: break-word; word-break: keep-all;} 
form > *[class *="search_area_"]:first-of-type,
form > *[class *="search_area_"]:only-of-type ,
fieldset > *[class *="search_area_"]:first-of-type,
fieldset > *[class *="search_area_"]:only-of-type { margin-top:0.2rem}
.box_rowfit + *[class *="search_area_"]  { margin-top:0.2rem}
.conbox_area + *[class *="search_area_"]  { margin-top:0.2rem}
@media (max-width:767px) {
    *[class *="search_area_"] table th,
    *[class *="search_area_"] table td,  
    *[class *="search_area_"] table th > *,
    *[class *="search_area_"] table td > * { word-break: break-all;}
}

/* search table (top) */
.search_area_top {background-color:#f6f7fa; border:0.1rem solid #e1e6ef}
.search_area_top table th,
.search_area_top table td { color:var(--clr_basic); }

/* search table (contents) */
.search_area_con {background-color:#fff; border:0.1rem solid #7f97b7}
.search_area_con .tb_label { color:var(--clr_main_dark); }
.search_area_con .label_txt { color:var(--clr_main_dark); }
.search_area_con table td { color:var(--clr_basic); }
.modal_inner_popup .search_area_con { margin-top:0; padding:1.0rem 0 1.0rem 1.0rem;}
.modal_inner_popup .search_area_con table th,
.modal_inner_popup .search_area_con table td { padding:0.4rem; font-size:1.2rem; }
.modal_inner_popup .search_area_con table th > *,
.modal_inner_popup .search_area_con table td > * {font-size:1.2rem;}

/* table */
.data_table { margin-top:0.8rem; }
.data_table > table { table-layout: fixed; width:100%; border-top: 0.1rem solid var(--clr_blue);}
.data_table > table th,
.data_table > table td { padding:0.7rem 1.0rem; font-size:var(--f_size); line-height: var(--f_line); color:var(--clr_basic);  vertical-align: top; border-left:0.1rem solid #dedede}
.data_table > table th *,
.data_table > table td * { word-wrap: break-word; word-break: keep-all;} 
.data_table > table tr > *:first-child { border-left-color: transparent;}
.data_table > table thead th { font-weight: 700; text-align:center;   border-bottom:0.1rem solid #4f6a84; background-color:#f7f9fc}
.data_table > table tbody th,
.data_table > table tbody td,
.data_table > table tfoot th,
.data_table > table tfoot td { border-bottom:0.1rem solid #dedede;}
.data_table > table tbody th { text-align:left; background-color:#f7f9fc;  font-weight: 700;}
.data_table > table .tb_label,
.data_table > table .tb_value { line-height: var(--f_line);}
.data_table > table .is_req > .label_txt::after { content:"*"; display:inline-block; margin-left:0.6rem; font-size:var(--f_size); line-height: 2.6rem; color:var(--clr_red);font-weight:700; vertical-align: baseline;}
.data_table > table .label_txt { font-weight: 700;}
.data_table > table .label_txt.is_req::after  { margin-left:0.6rem;}
.data_table > table tr.type_sum_last > * { background-color:#fdefef}
.data_table > table tr.type_sum_sub > * { background-color:#effded}
.data_table > table .type_clr1,
.data_table > table tr.type_clr1 > * { background-color:#f2f9ff}
.data_table > table .type_clr2,
.data_table > table tr.type_clr2 > * { background-color:#fffdf7}
.data_table .ta_l {text-align:left }
.data_table .ta_c {text-align:center}
.data_table .ta_r {text-align:right }
.data_table table td > .inp_defalut:only-child { width:100%;}
.data_table table td > .inp_w_search:only-of-type { width:calc(100% - 3.0rem);}
.data_table table td > .sel_defalut:only-child { width:100%;}
.data_table table td > .textarea_defalut.no_h:only-child { width:100%; height:100%; }
.data_table table td > .inp_calendar:only-child { width:100%;}
.data_table table td .type_grp { width:100%; }
.data_table table td .type_grp > .inp_defalut { width:1%; /* input width 미정의 시 이슈 있음*/}
.data_table table .is_noview { display:block; height:0; opacity: 0; visibility: hidden; transition: var(--tran_basic);} /* (미노출 항목들 : tr에 지정해줌 */
.data_table table .is_view { display: table-row; height:0; opacity: 1; visibility: visible; transition: var(--tran_basic);}
.data_table table th,
.data_table table td,  
.data_table table th > *,
.data_table table td > * { word-wrap: break-word; word-break: keep-all;} 
.box_rowfit + .data_table { margin-top:0.2rem}
.conbox_area + .data_table { margin-top:0.2rem}
.box_row .data_table { margin-top:0}

form > .data_table:first-of-type,
form > .data_table:only-of-type,
fieldset >  .data_table:first-of-type,
fieldset > .data_table:only-of-type { margin-top:0.2rem}
@media (max-width:767px) {
    .data_table > table th *,
    .data_table > table td * { word-break: break-all;}
 }

/**********************************************************************************
    grid
**********************************************************************************/
.grid_board { display:block; width:100%;}
.box_rowfit + .grid_board { margin-top:0.2rem}
.conbox_area + .grid_board { margin-top:0.2rem}

/* grid 내 옵션 토글 */
.fw_view { display:none; position:absolute; width:auto; min-width:16.0rem; height:auto; padding:1.5rem 1.8rem; background-color:#fff; box-shadow: 0 0 0.5rem rgba(0,0,0,0.3); border-radius:0.4rem; z-index:20 }.fw_view
.fw_view .fwv_tab { display:block; width:100%; }
.fw_view .openBtns { display:flex;flex-direction: row; flex-wrap: nowrap; justify-content: space-between; width:100%; }
.fw_view .openBtns .btns { flex:1 1 auto; display:block; width:auto; height:2.6rem; margin:0 0.1rem; padding: 0.2rem 0.4rem; font-size:1.0rem; line-height:var(--f_line); font-weight:700; text-align: center; color:var(--clr_main_dark);background-color:#e1e6ef; border:var(--bd_basic); word-break: keep-all;}
.fw_view .openBtns .btns:hover,
.fw_view .openBtns .btns:focus { background-color:#eff2f6}
.fw_view .fwv_tab ul { display:block; width:100%; padding:0.5rem 0;}
.fw_view .fwv_tab ul > li { line-height:var(--f_line);}
.fw_view .fwv_tab ul > li input[type=checkbox] { position: absolute; width:1px; height:1px; margin:-1px; padding:0; clip:rect(0,0,0,0); border:0 none; overflow:hidden; }
.fw_view .fwv_tab ul > li input[type=checkbox]+label { margin-right:1.2rem; font-size:var(--f_size); line-height:var(--f_line); vertical-align: middle; cursor: pointer; }
.fw_view .fwv_tab ul > li input[type=checkbox]+label::before { content:""; margin-top:0.1rem; margin-right:0.4rem; display:flex; align-items: center; justify-content: center; float:left; width:1.8rem; height:1.8rem; line-height:var(--f_line); border:var(--bd_basic); border-radius: 0.3rem; background-color:#fff; overflow:hidden; vertical-align: middle;}
.fw_view .fwv_tab ul > li input[type=checkbox]:checked+label::before { border-color:#3a6ac4; background:url(../images/common/ico_check.png) no-repeat center center; background-color:#3a6ac4; }
.fw_view .fwv_tab ul > li input[type=checkbox]:focus+label::before {border-color:#3a6ac4;}
.fw_view .fwv_tab ul > li input[type=checkbox]:disabled+label::before { color:var(--t_clr_light); background-color:#f1f1f5;}
.fw_view .fwv_tab ul > li input[type=checkbox]:disabled:checked+label::before { border-color:#84a3cc; background:url(../images/common/ico_check.png) no-repeat center center; background-color:rgba(58,106,196,0.5);}
.fw_view.is_active { display:block;}
.fw_view.is_active_modal { display:block; right:1.5rem; } 

/* grid 내 공통요소들 redesign */
.grid_board  .inp_btn_search { margin-left:0.4rem; width:2.2rem; height:2.2rem; line-height: 2.4rem; border:var(--bd_basic); background-size:1.2rem auto; vertical-align:middle;  }


.sub-srch {
    font-size: 0;
    line-height: 0;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    position: relative;
}

.mg_b32 {
    margin-bottom: 32px !important;
}
.fc_primary {
    color: #18469c;
}
.fw_500 {
    font-weight: 500;
}

.fl_r {
    position: relative;
    float: right;
}

.sub-srch .sa_l .sal_l {
    left: 0px;
    top: 0;
}


.sub-srch .sa_l .sal_r {
    padding: 4px;
    font-size: 12px;
    line-height: 20px;
}

.sub-srch .sa_l .sa_title {
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: 0.01em;
    word-break: break-all;
    text-align: right;
    white-space: nowrap;
}

.sub-srch .sa_l > table > tbody > tr > td {
    padding: 4px;
    font-size: 12px;
    line-height: 20px;
    border:none;
}

.sub-srch .btn-area{
	text-align: right;
    vertical-align: middle;
} 
    
.searchTopBox .sa_l > table {
    table-layout: fixed;
    border-collapse: separate;
    width: 100%;
    border-spacing: 0;
}

.sub-srch .sa_l > table > tbody > tr > th{
	position: relative;
    background: #fff;
    text-align: left;
    padding: 4px 8px;
    border:none;
}

.form_xs input[type="date"], .form_xs input[type="datetime"], .form_xs input[type="datetime-local"], .form_xs input[type="email"], .form_xs input[type="file"], .form_xs input[type="month"], .form_xs input[type="number"], .form_xs input[type="password"], .form_xs input[type="search"], .form_xs input[type="tel"], .form_xs input[type="text"], .form_xs input[type="time"], .form_xs input[type="url"], .form_xs input[type="week"], .form_xs select, .form_xs textarea {
    font-size: 14px;
    line-height: 20px;
    padding: 5px 5px;
    height: 30px;
    border-radius: 3px;
}

.grid_board .tui-grid-header-area th {
	background-color: #f4f4f4 !important ;
	border-color: #fff !important;
}

.grid_board .tui-grid-body-area td {
    border-width: 1px;
    border-style: solid;
    border-top-width: 1px;
    background-color: #fff;
    border-bottom-width: 1px;
    background-color: #fff !important;
}

#loading {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	display: block;
	opacity: 0.8;
	background: #e1e6ef;
	z-index: 99;
	text-align: center;
}

#loading > img {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 5em;
     z-index: 100;
}
#loading > .loading_msg{
    position: absolute;
    top: 55%;
    left: 50%;
    font-size: 18px;
    font-weight: bold;
}

body.loading .modal_bg {display: flex;align-items: center;}
.modal_bg {display: none;top: 0;left: 0;	right: 0;	bottom: 0;	width: 100%;	height: 100%;	z-index: 1000;	position: fixed;background: #fff; background: rgba(255, 255, 255, .8)  url(../imgs/loading.gif) 50% 45% no-repeat; background-size: 50px;} 
.modal_bg:before {content: '';top: 50%;left: 50%;height: 3px;width: 194px;display: block;position: absolute;border-radius: 2px;background: #f0f0f0;margin-top: 40px;margin-left: -87px;}
.modal_bg:after {content: '';left: 50%;top: 50%;height: 3px;z-index: 100;margin-top: 40px;margin-left: -87px;position: absolute;border-radius: 2px;animation: loader 2s;-webkit-animation: loader 2s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;background: linear-gradient(to right, #24629f, #3d8ab1, #56b1c3, #75e1d8);}

.hdn {position:absolute!important; left:0 !important; top:0 !important; width:0 !important; height:0 !important; overflow:hidden !important;}