@charset "UTF-8";
@import "reset.css";


/* input style */
input[type="text"],
input[type="number"],
input[type="password"],
input[type="id"],
select,
.input_txt{border:1px solid var(--color-input-border); border-radius: 4px; color: var(--color-input-txt);padding: 12px 16px; background-color: var(--color-white);}
input:read-only, input:disabled { color: var(--color-input-place); background-color: var(--color-input-dis);}
input::placeholder{color: var(--color-input-place);}

/* radio */
.value_radio{display: flex; align-items: center;margin-top: 30px;}
.value_radio .radio_contain{margin-right: 20px;}
.radio_contain{position: relative;}
.radio_contain input[type="radio"]{ opacity: 0; left: 0;  top: 50%; transform: translateY(-50%);box-sizing: border-box;cursor: pointer; position: absolute; width: 24px; height: 24px; padding: 0;border: 0; overflow: hidden; margin: -1px;  clip-path: inset(50%);border-radius: 50%;}
.radio_contain input[type="radio"] + label{position: relative;}
.radio_label_box {display: flex; align-items: center; position: relative;}
.radio_icon::before {  content: ""; position: absolute;  box-sizing: border-box; transition: all .3s;  left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);  background-color:transparent; border-radius: 50%;  width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-white); border: 1px solid var(--color-radio-border); position: absolute; left: 0; top: 50%; transform: translateY(-50%);transition: all .3s;display: inline-block;}
.radio_icon::after {display: none;  content: ""; position: absolute;  box-sizing: border-box; transition: all .3s; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);  background-color:transparent; border-radius: 50%;  width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-white); border: 1px solid var(--color-radio-border); position: absolute; left: 6px; top: 50%; transform: translateY(-50%);transition: all .3s;display: inline-block;}
.radio_label_box label { padding-left: 32px; position: relative; cursor: pointer;line-height: 24px;}
.radio_contain input[type="radio"]:checked + .radio_label_box .radio_icon::before { border-color:  var(--color-main); background-color: var(--color-white);}
.radio_contain input[type="radio"]:checked + .radio_label_box .radio_icon::after  {  background-color: var(--color-main); display: block;border-color:  var(--color-main); }
.radio_contain input[type="radio"]:disabled + .radio_label_box .radio_icon::before { border-color:  var(--color-radio-border); background-color: var(--color-radio-bg); }
.radio_contain input[type="radio"]:disabled + .radio_label_box .radio_icon::after {  background-color: var(--color-radio-bg); }
.radio_contain input[type="radio"]:checked:disabled + .radio_label_box .radio_icon::after {  background-color: var(--color-input-place);  display: block;}

/* select */
select {appearance: none; -webkit-appearance: none;  -moz-appearance: none; background-image: url('../img/arrow_down.png');  background-repeat: no-repeat; background-position: right 5px center; background-size: 20px; text-overflow: ellipsis; white-space: nowrap;}
option { padding: 10px;}

/* checkbox_only*/
.check_contain{position: relative;display: flex; align-items: center;justify-content: center;}
.check_contain input[type="checkbox"]{opacity: 0; left: 0;box-sizing: border-box;cursor: pointer; position: absolute; width: 1px;height: 1px; padding: 0;border: 0; overflow: hidden; margin: -1px;  clip-path: inset(50%);}
.check_contain label { position: relative; cursor: pointer;line-height: 24px;min-width: 24px; min-height: 24px;border-radius: 4px; background-color: var(--color-white); border: 1px solid var(--color-input-border); transition: all .3s ease-in;}
.check_icon::before {  content: ""; position: absolute;  box-sizing: border-box;width: 36%; height: 55%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-70%) rotateZ(40deg);  border-right: 2px solid transparent ; border-bottom: 2px solid  transparent; transition: all .3s ease-in;}
.check_contain input[type="checkbox"]:checked +  .check_icon { border-color:  var(--color-main); background-color:var(--color-main);}
.check_contain input[type="checkbox"]:checked +  .check_icon::before {border-color: var(--color-white) ;}
.check_contain input[type="checkbox"]:disabled +  .check_icon { border-color:  var(--color-input-border); background-color:var(--color-input-bg);}
.check_contain input[type="checkbox"]:disabled +  .check_icon::before {border-color: transparent ;}
.check_contain input[type="checkbox"]:checked:disabled +  .check_icon { border-color:  var(--color-input-border); background-color:var(--color-radio-bg);}
.check_contain input[type="checkbox"]:checked:disabled +  .check_icon::before {border-color: var(--color-radio-bg) ;}

/* button style */
button{padding: 8px 24px; font-size: 15px; font-weight: bold; border: 1px solid transparent;}
/* large-size */
.large{font-size: 16px; padding: 16px 24px; border-radius: 4px;}
.small{font-size: 13px; padding: 6px 15px; font-weight: normal;}
/* button-size */
.full{width: 100%;}

/* primery */
.btn_primery{border-color: var(--color-main); background-color: var(--color-main); color: var(--color-white);}
.btn_primery_line{border-color: var(--color-main); background-color: var(--color-white); color: var(--color-main);}
/* sub-gray */
.btn_subgray{border-color: var(--color-login-border); background-color: var(--color-btn-bg); color: var(--color-input-btn);}
.btn_subgray_line{border-color: var(--color-input-btn); color: var(--color-input-btn);}
.btn_subdarkgray{background-color: var(--color-input-btn); color: var(--color-white);}
/* gray */
.btn_gray_default{border-color: var(--color-btn-gray); background-color: var(--color-btn-gray); color: var(--color-white);}
.btn_gray_line{border-color: var(--color-btn-gray); color: var(--color-btn-gray);}

/* earror */
.error_btn{border-color: var(--color-sub-red) !important;}
.error_txt{color: var(--color-sub-red);}

/* tab */
/* tab_box */
.tab_box{display: flex; align-items: center; justify-content: center;width: 100%;}
.tab_box li{border-radius: 4px; border: 1px solid var(--color-black5);}
.tab_box li:first-child{border-top-right-radius: 0;border-bottom-right-radius: 0;}
.tab_box li:nth-child(2){border-radius: 0 ; border-left: 0;}
.tab_box li:last-child{border-top-left-radius: 0;border-bottom-left-radius: 0;border-left: 0;}
.tab_box li.active{border-color: var(--color-main);background-color: var(--color-blue5); }
.tab_box li.active a{ color: var(--color-main);}
.tab_box li.active:nth-child(2){border:1px solid var(--color-main);}
.tab_box li.active:last-child{border:1px solid var(--color-main);}
.tab_box li a{display: block; font-size: 16px; color: var(--color-black5);width: 100%; padding: 12px 16px;font-weight: bold;}

/* tab_sub_box */
.tab_sub_box{display: flex; align-items: center; justify-content: center;}
.tab_sub_box li{border-radius: 4px; border: 1px solid var(--color-black5);}
.tab_sub_box li:first-child{border-top-right-radius: 0;border-bottom-right-radius: 0;}
.tab_sub_box li:last-child{border-top-left-radius: 0;border-bottom-left-radius: 0;}
.tab_sub_box li.active{border-color: var(--color-main);background-color: var(--color-blue5);}
.tab_sub_box li a{display: block; font-size: 16px; color: var(--color-black5);padding: 12px 16px;font-weight: bold;}
.tab_sub_box li.active a{ color: var(--color-main);}

/* tab_line_box */
.tab_line_box{display: flex; align-items: center; justify-content: center;}
.tab_line_box li{ border-bottom: 2px solid var(--color-black5);font-weight: bold;font-size: 16px; color: var(--color-black5);padding: 12px 20px; text-align: center;cursor: pointer;}
.tab_line_box li.active{border-color: var(--color-main);color: var(--color-black1);}

/* page */
.page_num ul{display: flex; align-items: center; justify-content: center;}
.page_num ul li{width: 30px; height: 30px; margin-right: 10px;transition: background-color 0.3s; border-radius: 4px;}
.page_num ul li:last-child{margin-right: 0;}
.page_num ul li.on,.page_num ul li:hover{background-color: var(--color-main); }
.page_num ul li.on a,.page_num ul li:hover a{ color: var(--color-white);}
.page_num ul li.page_first,
.page_num ul li.page_prev,
.page_num ul li.page_next,
.page_num ul li.page_last{font-size: 0; text-indent: -9999999px; background-size: 30px 30px; background-position: center center; background-repeat: no-repeat;}
.page_num ul li.page_first{ background-image: url(../img/page_frist.png);}
.page_num ul li.page_prev{background-image: url(../img/page_prev.png);}
.page_num ul li.page_next{background-image: url(../img/page_next.png);}
.page_num ul li.page_last{background-image: url(../img/page_last.png);}
.page_num ul li a{font-size: 13px; color: var(--color-loc-txt); width: 100%;  text-align: center; line-height: 30px;display: block; transition: color 0.3s;}

/* table */
table{border-top: 2px solid var(--color-table-border1); background: var(--color-white); margin: 30px 0;}
table thead th{padding: 15px 0; text-align: center; background-color: var(--color-table-bg );}
table tbody tr{border-top: 1px solid var(--color-table-border2);}
table tbody tr:hover{background-color: #fffcec;}
table tbody tr td{padding: 15px 10px; font-size: 13px; text-align: center;}

/* calendar */
.ui-datepicker-trigger{cursor:pointer;}
.inputst_box01{display:flex; align-items: center;}
.inputst_box01 #datetimepicke,
.inputst_box01 #date_timepicker_start,
.inputst_box01 #date_timepicker_end {width:150px;font-size:14px; background-color: var(--color-white); background-image: url(../img/ico_calendar.png); background-size: 20px 20px; background-repeat: no-repeat; background-position: 95% center; border: 1px solid var(--color-input-border);}
.inputst_box01 .dset{display:block; position: relative; }
.inputst_box01 .demi{ display:block; width: 23px;text-align: center;}
.xdsoft_datetimepicker .xdsoft_calendar td{background-color: var(--color-white) !important;}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current{background-color: var(--color-radio-bg) !important; box-shadow: none !important;}
.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover{ background-color: var(--color-main) !important; color: var(--color-white) !important;}

/* text */
.text_left{text-align: left !important;}

/* width */
.w100{width: 100% !important;}

/* margin */
.ml10{margin-left: 10px !important;}

/* layput */
body.hidden{overflow: hidden; height: 100%;}
body{overflow: auto; background-color: var(--color-body-bg); min-width: 1280px; }

/* header */
.header_wrap{background-color: var(--color-white);}
.top_header{min-width: 1240px;max-width: 1240px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;}
.top_header .left_logo{ width: 120px;} 
.top_header .gnb{display: flex;align-items: center;}
.top_header .gnb ul{display: flex;align-items: center;}
.top_header .gnb ul li{padding: 0px 15px; border-left: 1px solid var(--color-black-txt);}
.top_header .gnb ul li:first-child{border-left:0;}
.top_header .gnb button{border-radius: 50px;font-weight: 500;}
.menu_wrap{background-color: var(--color-header-bg); position: relative;}
.menu_wrap .menu{min-width: 1240px; max-width: 1240px; margin: 0 auto;}
.menu_wrap .menu ul{ display: flex; align-items: center;  position: relative; /* 추가 X : li에서 제어 */}

.menu_wrap .menu ul li{ width: 100%; position: relative; /* 추가 */}
.menu_wrap .menu ul li a{color: var(--color-header-txt); transition: color 0.3s; display: block;line-height: 52px;text-align: center;}
.menu_wrap .menu ul li.on{background-color: var(--color-header-bg2);}
.menu_wrap .menu ul li.on a, .menu_wrap .menu ul li:hover a{color: var(--color-white);}

.menu_wrap .menu ul li .sub_menu {
    display: none;
    position: absolute;
    left: 10%;
    width: 80%;
    background-color: var(--color-white); 
    /* background-color: var(--color-red); */
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.menu_wrap .menu ul li .sub_menu ul {
    display: flex;
    flex-direction: column; /* 세로정렬 */
    width: 100%;
    margin: 0;
    align-items: flex-start;
    justify-content: flex-start;
   
}
.menu_wrap .menu ul li:hover .sub_menu,
.menu_wrap .menu ul li.on .sub_menu {
    display: block;
}
.menu_wrap .menu ul li .sub_menu li {
	top: 100%;       /* 상위 메뉴 바로 아래 */
    width: 100%;
    height: 52px;
    padding: 0 0px;
   	position: relative;
}
.menu_wrap .menu ul li .sub_menu li a{color: var(--color-black-txt);}
.menu_wrap .menu ul li .sub_menu li.on{background-color: var(--color-white);}
.menu_wrap .menu ul li .sub_menu li.on a,.menu_wrap .menu ul li .sub_menu li:hover a{color: var(--color-main);}

/* footer */
footer{background-color: var( --color-footer-bg);padding:30px 0; border-top: 1px solid var( --color-footer-border);}
footer .footer_wrap{ min-width: 1240px;max-width: 1240px;  margin: 0 auto;}
footer .footer_top ul{display: flex; align-items: center; justify-content: center;}
footer .footer_top ul:last-of-type{margin-top: 10px;}
footer .footer_top ul li{color: var( --color-footer-txt); font-size: 13px; padding: 0 20px; border-right: 1px solid var( --color-footer-txt);}
footer .footer_top ul li:last-child{border: 0;}


/* layer popup */
/* .layer_popup{display: none;} */
.layer_popup{ position: fixed; left: 0; top: 0;width: 100%;height: 100%;background-color: rgba(18, 25, 44, 0.5); display: none; z-index: 10000 !important; }
.layer_popup.on{display: block;}
.layer_popup .layer_contain{position: absolute;  top: 50%; min-width: 400px; max-height: 800px; height: auto; background: var(--color-white); padding: 30px; border-radius: 0px; left: 50%; transform: translate(-50%, -50%);}
.layer_contain header{ display: flex; justify-content: space-between; align-items: center;margin-bottom: 30px; }
.layer_contain header h2{font-weight: 700; font-size: 22px; text-align: left;} 
.layer_contain header button{width: 32px; height: 32px; background-image: url(../img/popup_close.png); background-position: center; background-size: contain; background-repeat: no-repeat; text-indent: -99999px; font-size: 0;}
.layer_contain section{padding: 0; min-height: auto; }
.layer_contain .btn_con{padding: 40px 0 10px; width: 100%;}
.layer_contain .btn_con.two{display: flex; justify-content: center;}
.layer_contain .btn_con.two button{margin-left:10px;}
.layer_contain .btn_con.two button:nth-of-type(1){margin-left: 0;}
.layer_contain .table_list{width: 1000px;}
.layer_contain  .layer_table_wrap{border-top: 2px solid var(--color-table-border1);}
.layer_contain  .layer_table_wrap .table_list { max-height:400px;
    overflow-y: auto;}
.layer_contain  .layer_table_wrap .table_list .popup_sub_txt{padding-top: 5px;}
.layer_contain  .layer_table_wrap .table_list .popup_sub_txt:last-of-type{margin-bottom: 50px;}
.layer_contain  .layer_table_wrap.small_table .table_list {width: 760px;}
.layer_contain  .layer_table_wrap .table_list table{border:0; margin-top: 0; margin-bottom: 0;}
.layer_contain .table_list table thead{position: sticky; top: 0px; z-index: 2;}
.layer_contain  .table_list table tbody tr:hover{background-color: white; cursor: default;}
.layer_contain .table_list table td{padding:10px 4px;}
.layer_contain  .table_list table tbody th{ text-align: center; background-color: var(--color-table-bg); font-weight: bold;}
.layer_contain .table_list table td button{margin-left: 5px;padding: 4px 20px;
    font-size: 14px;}
.layer_contain .table_list table td.input_two div{display: flex; align-items: center;}
.layer_contain .table_list table td.input_two select{width: 40%;margin-right: 8px; }
.layer_contain .table_list table td.input_two input{width: 60%; }
.layer_contain .table_list table input, .layer_contain .table_list table select{padding: 5px; width: 100%;}
.layer_contain .table_list table input.input03{width: 30%;}
.layer_contain .table_list table select.input03{width: 30%;}
.layer_contain  .layer_table_wrap.login_table .table_list {width: 460px;}
.layer_contain h3{font-size: 16px; margin-bottom: 20px; display: flex; align-items:center;}
.layer_contain h3::before{content: ''; display: block; width: 4px; height: 4px;border-radius: 4px; background-color: var(--color-main); margin-right: 5px;}


/*KIM 추가 */
.status-btns {
  display: flex;
  align-items: center;
  gap: 8px; /* 요소 간 여백 */
}

/* 상태 select와 버튼 높이 및 폰트 맞춤 */
.status-btns select,
.status-btns button {
  height: 36px; /* select box 높이에 맞춤, 필요시 32~40px 내에서 조정 */
  min-width: 80px;  /* 버튼 너비 기본값, 너무 넓으면 70~80px 정도로 조절 */
  padding: 0 16px;
  font-size: 15px;
  box-sizing: border-box;
  border-radius: 4px;
}

/* 버튼마다 색상만 다르게 (기존 클래스 스타일 유지) */
.status-btns .btn_primery_line {
  border: 1px solid #e65b4d;
  background: #fff;
  color: #e65b4d;
}

.status-btns .btn_subdarkgray {
  border: 1px solid #888;
  background: #f5f5f5;
  color: #444;
}
.status-row {
  display: flex;
  align-items: center;
  gap: 8px;   /* 요소간 여백 */
  height: 40px; /* 셀 높이 맞춤(입력창 높이에 따라 조정) */
}

.status-row select,
.status-row button {
  height: 36px;    /* input/select box 높이와 동일하게 */
  font-size: 15px; /* input과 동일하게 */
  box-sizing: border-box;
  line-height: 36px; /* 필요시 추가 */
  padding: 0 16px;  /* 버튼/셀렉트 안쪽 여백 */
  border-radius: 4px;
}

/* 버튼 min-width 지정 시 가로 통일감 부여 */
.status-row button {
  min-width: 60px;
}
/* 동그라미 */
.popup_box_row {
    background: #f9fbfd;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    padding: 6px 8px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    box-shadow: 0 1px 4px 0 rgba(40,70,120,0.03);
}

.popup_box_row .input_txt,
.popup_box_row select {
    height: 20px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid #d0d5db;
    padding: 0 10px;
}

.box_btns {
    display: flex;
    align-items: center;
    justify-content: center;
}
 .box_btns .btn_remove {
    transition: background 0.2s, color 0.2s;
    padding: 4px 10px !important;
    font-size: 13px !important;
    border-color: var(--color-btn-gray);
    color: var(--color-btn-gray);
}

.btn_remove:hover {
    border-color: var(--color-btn-gray);
    color: var(--color-btn-gray);
    background-color: var(--color-black8);
}
/* 네모네모 */
.popup_box_row {
    background: #f9fbfd;
    border: 1.5px solid #dbe4ee;
    border-radius: 12px;
    padding: 10px 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    box-shadow: 0 2px 8px 0 rgba(40,70,120,0.06);
    width: fit-content;
}

.popup_box_row .input_txt,
.popup_box_row select {
    height: 28px;
    font-size: 15px;
    border-radius: 5px;
    border: 1px solid #d0d5db;
    padding: 0 10px;
    background: #fff;
}

/* 답변 줄의 전체 td(답변 내용)도 좌측정렬, 패딩 넉넉히 */
 .faq-answer td {
    text-align: left !important;
    padding: 24px 36px;
    background: #f7fafc;
    font-size: 1.12em;
    line-height: 1.7;
    color: #333;
}

.left { text-align:left !important; }
th.center { text-align: center !important; }

/* 0917 추가 */
.table_list_main .biz_mod_list, .table_list_main .biz_use_list{width: 24px; height: 24px; background-image: url(../img/biz_mod_list.png);background-repeat: no-repeat; background-size: contain; background-position: center center; }
.table_list_main .biz_use_list{background-image: url(../img/biz_use_list.png);}
.search_box .input_box select.input03{ width: 23%;}
.search_box .input_box .input03{ width: 27%; margin-left: 10px;}
.popup_sub_txt{padding-top:30px; font-size: 12px; color: var(--color-footer-txt);}