@charset "utf-8";

/*-------------- Label : form -----------*/
.lb { display: inline-block; font-size: 1.4rem; font-weight: 300; color: #000; }  /* Label */

/*-------------- status icon : 전체리스트 상태 컬럼 값 앞에 표시 -----------*/
.status_icon { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 0.2rem; margin-top: -0.3rem; margin-right: 0.2rem; }
.list_status_icon { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 0.2rem; margin-right: 0.2rem; }


/*-------- INTPUT - Home Page 상단 검색 필드 : Text, Password, Number, Date, Time, Datetime-local ------*/
input[type="text"].search_big, input[type="password"].search_big, input[type="number"].search_big, input[type="date"].search_big, input[type="time"].search_big, input[type="datetime-local"].search_big { 
    height: 5rem; line-height: 1; border-bottom: 0.3rem solid #000; font-weight: 300; color: #000; padding: 0 1rem; background-color: rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
input[type="text"].search_big:hover, input[type="password"].search_big:hover, input[type="number"].search_big:hover,  /* 마우스 오버 및 포커싱 */
input[type="date"].search_big:hover, input[type="time"].search_big:hover, input[type="datetime-local"].search_big:hover,
input[type="text"].search_big:focus, input[type="password"].search_big:focus, input[type="number"].search_big:focus, 
input[type="date"].search_big:focus, input[type="time"].search_big:focus, input[type="datetime-local"].search_big:focus { border-bottom: 0.3rem solid #4054AF; background-color: rgba(255, 255, 255, 0.3); }
input[type="text"].search_big::placeholder, input[type="password"].search_big::placeholder, input[type="number"].search_big::placeholder, input[type="date"].search_big::placeholder, /* 플레이스 홀더 */
input[type="time"].search_big::placeholder, input[type="datetime-local"].search_big::placeholder { color: #b1b1b1; } 

input[type="text"].search_big:disabled, input[type="password"].search_big:disabled, input[type="number"].search_big:disabled, input[type="date"].search_big:disabled,  /* 디세이블 */
input[type="time"].search_big:disabled, input[type="datetime-local"].search_big:disabled { background-color: #eee; border-bottom: 0.1rem solid #bdbdbd; } 
input[type="text"].search_big:read-only, input[type="password"].search_big:read-only, input[type="number"].search_big:read-only, input[type="date"].search_big:read-only, /* 읽기 전용 */
input[type="time"].search_big:read-only, input[type="datetime-local"].search_big:read-only { background-color: #eee; border-bottom: 0.1rem solid #666; } 

/*-------- INTPUT : Text, Password, Number, Date, Time, Datetime-local ------*/
input[type="text"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], input[type="datetime-local"] { 
    height: 4rem; line-height: 1; border-bottom: 0.1rem solid #999999; font-weight: 300; color: #000; padding: 0 1rem; background-color: transparent;
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
input[type="text"]:hover, input[type="password"]:hover, input[type="number"]:hover,  /* 마우스 오버 및 포커싱 */
input[type="date"]:hover, input[type="time"]:hover, input[type="datetime-local"]:hover,
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, 
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus { border-bottom: 0.1rem solid #000; }
input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="number"]::placeholder, input[type="date"]::placeholder, /* 플레이스 홀더 */
input[type="time"]::placeholder, input[type="datetime-local"]::placeholder { color: #7b7b7b; } 
input[type="text"]:disabled, input[type="password"]:disabled, input[type="number"]:disabled, input[type="date"]:disabled,  /* 디세이블 */
input[type="time"]:disabled, input[type="datetime-local"]:disabled { background-color: #eee; border-bottom: 0.1rem solid #bdbdbd; opacity: 0.5; } 
input[type="text"]:read-only, input[type="password"]:read-only, input[type="number"]:read-only, input[type="date"]:read-only, /* 읽기 전용 */

input[type="time"]:read-only, input[type="datetime-local"]:read-only { background-color: transparent; border-bottom: 0.1rem solid #999; color: #666; } 
/*-------- INTPUT : 나의 정보 수정 ------*/
input[type="text"].user_info:read-only, input[type="password"].user_info:read-only, input[type="number"].user_info:read-only, input[type="date"].user_info:read-only, /* 읽기 전용 */
input[type="time"].user_info:read-only, input[type="datetime-local"].user_info:read-only { background-color: #eee; border-bottom: 0.1rem solid #999; color: #666; } 

/*-------------- Button : small -----------*/
.btn_small { 
    padding: 0 12px; height: 2.8rem; line-height: 2.8rem; color: #fff; background: #2c2c2c; font-size: 1.2rem; font-weight: 300;
    border: 0; cursor: pointer; transition: all 0.3s; cursor: pointer; opacity: 0.9; border-radius: 0.2rem;
}
.btn_small:hover { opacity: 1; box-shadow: 0 0.3rem 1rem 0.2rem rgba(0, 0, 0, 0.2);  cursor: pointer; }
.btn_small:active { box-shadow: none; } 
.btn_small:disabled { opacity: 0.4; box-shadow: none; cursor: default; }


/*-------------- Button : Basic -----------*/
.btn_basic { 
    padding: 0 12px; height: 4rem; line-height: 4rem; color: #fff; background: #2c2c2c; font-size: 1.4rem; font-weight: 300;
    border: 0; cursor: pointer; transition: all 0.3s; cursor: pointer; opacity: 0.9; border-radius: 0.2rem;
}
.btn_basic:hover { opacity: 1; box-shadow: 0 0.3rem 1rem 0.2rem rgba(0, 0, 0, 0.2);  cursor: pointer; }
.btn_basic:active { box-shadow: none; } 
.btn_basic:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

/*-------------- Button : Normal -----------*/
.btn_normal { 
    padding: 0 12px; height: 4.8rem; line-height: 4.8rem; color: #fff; background: #2c2c2c; font-size: 1.6rem; font-weight: 300;
    border: 0; cursor: pointer; transition: all 0.3s; cursor: pointer; opacity: 0.9; border-radius: 0.2rem;
}
.btn_normal:hover { opacity: 1; box-shadow: 0 0.3rem 1rem 0.2rem rgba(0, 0, 0, 0.2);  cursor: pointer; }
.btn_normal:active { box-shadow: none; } 
.btn_normal:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

/*-------------- Button : BIG -----------*/
.btn_big { 
    padding: 0 12px; height: 6rem; line-height: 6rem; color: #fff; background: #2c2c2c; font-size: 1.8rem; font-weight: 300;
    border: 0; cursor: pointer; transition: all 0.3s; cursor: pointer; opacity: 0.9; border-radius: 0.2rem;
}
.btn_big:hover { opacity: 1; box-shadow: 0 0.3rem 1rem 0.2rem rgba(0, 0, 0, 0.2);  cursor: pointer; }
.btn_big:active { box-shadow: none; } 
.btn_big:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

/*-------------- Button Color -----------*/
.btn_gray { background-color: #666; }  /* Gray color */
.btn_dark { background-color: #2c2c2c; }  /* Dark color */
.btn_blue { background-color: #4054AF; }  /* Blur color */
.btn_light { background-color: #f9f9f9; border: 0.1rem solid #ccc; color: #333; padding: 0 1rem; }     /* light gray color */

/*-------------- Button : Login (Blue) -----------*/
.btn_login { 
    padding: 0 12px; height: 13.5rem; line-height: 13.5rem; color: #fff; background: #4054AF; font-size: 1.8rem; font-weight: 300;
    border: 0; cursor: pointer; transition: all 0.3s; cursor: pointer; opacity: 0.9; border-radius: 0.2rem;
}
.btn_login:hover { opacity: 1; box-shadow: 0 0.3rem 1rem 0.2rem rgba(0, 0, 0, 0.2);  cursor: pointer; }
.btn_login:active { box-shadow: none; } 
.btn_login:disabled { opacity: 0.4; box-shadow: none; cursor: default; }

/*-------- 접기 V 버튼  ------*/
.btn_fold { 
    display: inline-block; width: 3rem; height: 3rem; line-height: 3rem; font-size: 3rem; font-weight: 900; color: #666; 
    transform: rotateZ(90deg); background-color: transparent; text-align: center; cursor: pointer; }
.btn_fold:hover { color: #000; }

/*-------------- Top Menu 2분할 -----------*/
.topmenu2 { width: 100%; }  /* 메뉴 너비 (100rem) */
.topmenu2 ul { overflow: hidden; }
.topmenu2 ul li { float: left; width: 50%; }  /*  메뉴 가로 정렬 및 개별 너비   */
.topmenu2 ul li a {     /* 개별 메뉴 스타일 */
    position: relative; display: inline-block; width: 100%; padding: 2rem 0; text-align: center; border-left: 0.1rem solid #DADADA; background-color: #f9f9f9; 
    font-size: 1.8rem; font-weight: 300; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.topmenu2 ul li:last-child a { border-right: 0.1rem solid #DADADA; }
.topmenu2 ul li a:hover { color: #000; background-color: #fff; }  /* 메뉴 마우스 오버 스타일 */
.topmenu2 ul li a.on { color: #fff; background-color: #343434; }   /* 메뉴 선택 스타일 */
.topmenu2 ul li a.on::before {     /* 삼각 돗 */
    content: ""; position: absolute; left: 24rem; bottom: -1rem; width: 1.5rem; height: 1.5rem; background-color: #fff; z-index: 5; transform: rotateZ(-45deg); }  

/*-------------- Top Menu 3분할 -----------*/
.topmenu3 { width: 100%; }  /* 메뉴 너비 (100rem) */
.topmenu3 ul { overflow: hidden; }
.topmenu3 ul li { float: left; width: 33.333%; }  /*  메뉴 가로 정렬 및 개별 너비   */
.topmenu3 ul li a {     /* 개별 메뉴 스타일 */
    position: relative; display: inline-block; width: 100%; padding: 2rem 0; text-align: center; border-left: 0.1rem solid #DADADA; background-color: #f9f9f9; 
    font-size: 1.8rem; font-weight: 300; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.topmenu3 ul li:last-child a { border-right: 0.1rem solid #DADADA; }
.topmenu3 ul li a:hover { color: #000; background-color: #fff; }  /* 메뉴 마우스 오버 스타일 */
.topmenu3 ul li a.on { color: #fff; background-color: #343434; }   /* 메뉴 선택 스타일 */
.topmenu3 ul li a.on::before {     /* 삼각 돗 */
    content: ""; position: absolute; left: 15.6rem; bottom: -1rem; width: 1.5rem; height: 1.5rem; background-color: #fff; z-index: 5; transform: rotateZ(-45deg); }  

/*-------------- Top Menu 4분할 -----------*/
.topmenu4 { width: 100%; }  /* 메뉴 너비 (100rem) */
.topmenu4 ul { overflow: hidden; }
.topmenu4 ul li { float: left; width: 25% }  /*  메뉴 가로 정렬 및 개별 너비   */
.topmenu4 ul li a {     /* 개별 메뉴 스타일 */
    position: relative; display: inline-block; width: 100%; padding: 2rem 0; text-align: center; border-left: 0.1rem solid #DADADA; background-color: #f9f9f9; 
    font-size: 1.8rem; font-weight: 300; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.topmenu4 ul li:last-child a { border-right: 0.1rem solid #DADADA; }
.topmenu4 ul li a:hover { color: #000; background-color: #fff; }  /* 메뉴 마우스 오버 스타일 */
.topmenu4 ul li a.on { color: #fff; background-color: #343434; }   /* 메뉴 선택 스타일 */
.topmenu4 ul li a.on::before {     /* 삼각 돗 */
    content: ""; position: absolute; left: 11.8rem; bottom: -1rem; width: 1.5rem; height: 1.5rem; background-color: #fff; z-index: 5; transform: rotateZ(-45deg); }      

/*-------- 라디오 버튼 ------*/
.rbtn { display: inline-block; height: 1.6rem !important; line-height: 1.6rem; }  /* 라디오버튼 전체 감싸는 영역 */
.rbtn input[type="radio"] { position: relative; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; } /* 원본 라디오 버튼 - 숨김 */
.rbtn input[type="radio"] + label { display: inline-block; width: auto !important; padding-left: 2rem; padding-right: 1rem; font-weight: 300; vertical-align: middle; text-align: left; }  /* 레이블 텍스트 스타일 */
.rbtn input[type="radio"]:checked + label { color: #000; }  /* 체크된 레이블 */
.rbtn input[type="radio"]::before { content: ''; position: absolute; left: 0; top: -10px; width: 1.4rem; height: 1.4rem; background: #fff; border: 0.1rem solid #666; border-radius: 50%; } /* 가상 라디오 버튼 */
.rbtn input[type="radio"]:checked::before { border: 0.1rem solid #4054AF; } /* 체크 테두리색 */
.rbtn input[type="radio"]:checked::after { content: ''; position: absolute; left: 0.4rem; top: -0.6rem; width: 0.8rem; height: 0.8rem; background: #4054AF; border-radius: 50%; } /* 체크 안쪽원 */
.rbtn input[type="radio"]:disabled { opacity: 0.5; } 

/*-------------- 체크박스 -----------*/
.cbx { display: inline-block; height: 1.6rem !important; line-height: 1.6rem; }  /* 체크박스 전체 감싸는 영역 */
.cbx input[type="checkbox"] { position: relative; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; }  /*  원본 체크박스 버튼 */
.cbx input[type="checkbox"] + label { display: inline-block; width: auto !important; padding-left: 2.2rem; padding-right: 1rem; font-weight: 300; vertical-align: middle; }  /* 레이블 텍스트 스타일 */
.cbx input[type="checkbox"]:checked + label { color: #000; }  /* 체크된 레이블 */
.cbx input[type="checkbox"]::before { content: ''; position: absolute; left: 0; top: -0.9rem; width: 1.4rem; height: 1.4rem;  /* 가상 체크박스 버튼 */
    background: #fff; border: 0.1rem solid #666; border-radius: 0.1rem; } 
.cbx input[type="checkbox"]:checked::before { border: 0.1rem solid #4054AF; } /* 체크 테두리색 */
/* .cbx input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 0.35rem; top: -0.5rem; width: 0.8rem; height: 0.8rem; background: #4054AF; border-radius: 0.1rem; } /* 체크 안쪽 네모 */
.cbx input[type="checkbox"]:checked::after {    /* 체크 안쪽 네모 */
    content: ''; position: absolute; left: 0.1rem; top: -0.8rem; width: 1.4rem; height: 1.4rem; background: #4054AF url("../img/check_on.png") no-repeat left top/14px 14px; border-radius: 0.1rem; 
}
.cbx input[type="checkbox"]:disabled { opacity: 0.5; } 

/*----------------- TextArea --------------*/
textarea { 
    background-color: #fff; border: 1px solid #999; line-height: 1.5;
    padding: 10px; box-sizing: border-box; color: #000; overflow-y: auto; font-size: 1.4rem; font-weight: 300; resize: vertical;
}
textarea:focus, textarea:hover { border: 1px solid #000; }
textarea:read-only { background-color: #eee; }  /* 수정불가 읽기만 */
textarea:disabled { background-color: #eee; opacity: 0.5; }
textarea::placeholder { color: #7b7b7b; }

/*-------- SELECT (Drop Down) 메뉴 ------*/
.select_menu { position: relative; display: inline-block; border: 0; background-color: transparent; }  
.select_menu select {     
    height: 4rem; line-height: 1; border-radius: 0; border-bottom: 0.1rem solid #999; padding: 0 1rem; 
    font-size: 1.4rem; font-weight: 300; color: #000; background-color: transparent; 
    filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; 
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
.select_menu select::-ms-expand { display: none; }   /* 화살표 없애기 for IE10, 11 */
.select_menu select:hover { border-bottom: 0.1rem solid #000; }
.select_menu::before {     /* triangle dot */
    content: ""; position: absolute; top: 1.7rem; right: 0.8rem; width: 0; height: 0; 
    border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.5rem solid #2c3342; }
.select_menu select:disabled { background-color: #eee; cursor: default; border-bottom: 0.1rem solid #bdbdbd; opacity: 0.5; }
.select_menu select.readonly { background-color: transparent !important; border-bottom: 0.1rem solid #999 !important; color: #666 !important; }  /* 읽기전용 색상 설정 */
.select_menu.multi::before { opacity: 0; }

/*-------- Editable SELECT box ------*/
.select-editable { position: relative; display: inline-block; border: 0; background-color: transparent; }  
.select-editable select {     
    height: 4rem; line-height: 1; border-radius: 0; border-bottom: 0.1rem solid #999; padding: 0 1rem; 
    font-size: 1.4rem; font-weight: 300; color: #000; background-color: transparent; 
    filter:alpha(opacity=0); -webkit-appearance: none; -moz-appearance: none; appearance: none; 
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
.select-editable select::-ms-expand { display: none; }   /* 화살표 없애기 for IE10, 11 */
.select-editable select:hover { border-bottom: 0.1rem solid #000; }
.select-editable::before {     /* triangle dot */
    content: ""; position: absolute; top: 1.7rem; right: 0.8rem; width: 0; height: 0; 
    border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.5rem solid #2c3342; }
.select-editable select:disabled { background-color: #eee; cursor: default; border-bottom: 0.1rem solid #bdbdbd; opacity: 0.5; }
.select-editable select.readonly { background-color: transparent !important; border-bottom: 0.1rem solid #999 !important; color: #666 !important; }  /* 읽기전용 색상 설정 */

/*-------- 스위치 버튼 : Switch Style  ------*/
.btn_switch { display: inline-block; }  /* 감싸는 div */
.btn_switch .switch { position: relative; display: inline-block; width: 5.4rem; height: 2.4rem; vertical-align: middle; margin: 0 0 0 -1rem; } /* label , 전체 크기 */
.btn_switch .switch input[type=checkbox] { display: none !important; }      /*  Hide default HTML checkbox */
.btn_switch .switch input[type=checkbox]:checked + .slider { background-color: #458aeb; }    /* 체크시 스위치 버튼 배경 */
.btn_switch .switch input[type=checkbox]:focus + .slider { background-color: #458aeb; }  /* 포커스 온 상태 시 스위치 버튼 배경 */
.btn_switch .switch input[type=checkbox]:checked + .slider:before { -webkit-transform: translateX(2rem); -ms-transform: translateX(2rem); transform: translateX(2rem); } /* 체크 시 핸들이동 */
.btn_switch .switch .slider { position: absolute; cursor: pointer; top: 0; left: 1rem; right: 0; bottom: 0; background-color: #cbd3e0; -webkit-transition: .3s; transition: .3s; }  /* OFF 시 slider 배경색상 */
.btn_switch .switch .slider.round { border-radius: 2.4rem; }     /* 스위치 전체 타원 반지름 - 스위치 높이와 동일 */
.btn_switch .switch .slider:before {    /* OFF 시 슬라이더 안쪽 원 */ 
    position: absolute; content: ""; height: 2rem; width: 2rem; left: 0.2rem; bottom: 0.2rem; background-color: #fff; -webkit-transition: .3s; transition: .3s; border-radius: 50%; }
.btn_switch p:first-child { display: inline-block; font-size: 1.4rem; font-weight: 300; vertical-align: middle !important; color: #6c727e; vertical-align: top; }    /* OFF 글자 스타일  */
.btn_switch p:last-child { display: inline-block; font-size: 1.4rem; font-weight: 300; vertical-align: middle !important; color: #458aeb; vertical-align: top; }    /* ON 글자 스타일  */
.btn_switch .switch input[type=checkbox]:disabled + .slider { opacity: 0.5; cursor: default; }   /* disabled input + slider */

/*-------- Table : 컬럼 너비와 내용 너비 일치하는 테이블 ------*/
.table_parent { overflow-x: auto; } /* 테이블의 상위 요소에 적용 , 테이블에만 가로 스크롤 생성 */
.table_widthsync { width: 100%; overflow: auto; min-width: 100rem; table-layout: fixed; word-break: break-all; }    /* 테이블 전체, min-width 이하에서 테이블에 가로스크롤 생성  */
.table_widthsync thead tr { background-color: #eaeaea; border: 0.1rem solid #dadada; } 
.table_widthsync thead tr th {       /*   컬럼 헤더 */
    color: #000; font-size: 1.4rem; font-weight: 400; text-align: center; padding: 0.7rem 0.5rem; border-right: 0.1rem solid #dadada; white-space: nowrap; } 
.table_widthsync thead th:last-child { border-right: 0; }   /*   마지막 컬럼 헤드 분리 라인 안보이게  */
.table_widthsync tbody tr { border-bottom: 0.1rem solid #dadada; }    /* 줄 아래 선  */
.table_widthsync tbody td { font-size: 1.4rem; color: #666; padding: 1rem 0.5rem; text-align: center;  }   /* 개별 셀 스타일 */
.table_widthsync tbody tr:nth-child(2n) { background-color: #f5f5f5; }  /*  한줄 걸러 다른색  */
.table_widthsync tbody tr:hover { background-color: #f9fcff; }  /*  마우스 오버시  다른색  */
.table_widthsync > thead > tr > th > div.cbx  { margin-left: -1.5rem; }  /* 테이블 헤더에 있는 체크버튼의 중앙정렬 */
.table_widthsync > tbody > tr > td > div.cbx  { margin-left: -1.5rem; }  /* 테이블 헤더에 있는 체크버튼의 중앙정렬 */

/*-------- Table : Basic ------*/
.table_basic { width: 100%; overflow: scroll; table-layout: fixed; }    /* 테이블 전체  */
.table_basic thead tr { background-color: #eaeaea; z-index: 100; border: 0.1rem solid #dadada;  }    /* 컬럼 헤더 전체 */
.table_basic thead tr th {       /*   컬럼 헤더 */
    color: #000; font-size: 1.4rem; font-weight: 300; text-align: center; padding: 0.5rem 0.5rem; border-right: 0.1rem solid #dadada; position: sticky; top: 0;  /*  테이블 컬럼 고정 */
} 
.table_basic thead th:last-child { border-right: 0; }   /*   마지막 컬럼 헤드 분리 라인 안보이게  */
.table_basic tbody tr { border-bottom: 0.1rem solid #dadada; }    /* 줄 아래 선  */
.table_basic tbody td { font-size: 1.4rem; color: #666; padding: 0.5rem 0.5rem; text-align: center;  }   /* 개별 셀 스타일 */
.table_basic tbody tr:nth-child(2n) { background-color: #f5f5f5; }  /*  한줄 걸러 다른색  */
.table_basic tbody tr:hover { background-color: #eff1f8; }  /*  마우스 오버시  다른색  */
.table_basic > thead > tr > th > div.cbx  { margin-left: -1.5rem; }  /* 테이블 헤더에 있는 체크버튼의 중앙정렬 */
.table_basic > tbody > tr > td > div.cbx  { margin-left: -1.5rem; }  /* 테이블 헤더에 있는 체크버튼의 중앙정렬 */

/*-------- Table : Basic ------*/
.table_basic_list { width: 100%; overflow: scroll;}    /* 테이블 전체  */
.table_basic_list thead tr { background-color: #eaeaea; z-index: 100; border: 0.1rem solid #dadada;  }    /* 컬럼 헤더 전체 */
.table_basic_list thead tr th {       /*   컬럼 헤더 */
    color: #000; font-size: 1.4rem; font-weight: 300; text-align: center; padding: 0.5rem 0.5rem; border-right: 0.1rem solid #dadada; position: sticky; top: 0;  /*  테이블 컬럼 고정 */
}
.table_basic_list thead th:last-child { border-right: 0; }   /*   마지막 컬럼 헤드 분리 라인 안보이게  */
.table_basic_list tbody tr { border-bottom: 0.1rem solid #dadada; }    /* 줄 아래 선  */
.table_basic_list tbody td { font-size: 1.4rem; color: #666; padding: 0.5rem 0.5rem; text-align: center;  }   /* 개별 셀 스타일 */
.table_basic_list tbody tr:nth-child(2n) { background-color: #f5f5f5; }  /*  한줄 걸러 다른색  */
.table_basic_list tbody tr:hover { background-color: #eff1f8; }  /*  마우스 오버시  다른색  */
.table_basic_list > thead > tr > th > div.cbx  { margin-left: -1.5rem; }  /* 테이블 헤더에 있는 체크버튼의 중앙정렬 */
.table_basic_list > tbody > tr > td > div.cbx  { margin-left: -1.5rem; }  /* 테이블 헤더에 있는 체크버튼의 중앙정렬 */

/*-------- Table : Tbody Scroll ------*/
.scrolltbody { border-collapse: collapse; margin: 0 auto; overflow: hidden; border-bottom: 0.1rem solid #dadada; }
.scrolltbody thead { float: left; width: 100%; }
.scrolltbody thead tr { display: table; width: 100%; }
.scrolltbody tbody { float: left; width: 100%; overflow-y: auto; overflow-x: hidden; }
.scrolltbody tbody tr { display: table; width: 100%; border-bottom: 1px solid #ccc;}
.scrolltbody tbody tr:last-child { border-bottom: none; }

/*-------- Table : Tbody Scroll 2 ------*/
.scrolltbody2 { border: 0.1rem solid #dadada; overflow-y: auto; margin-top: -1.5rem; }
.scrolltbody2::-webkit-scrollbar { width: 0.6rem; } /* 스크롤 바 */
.scrolltbody2::-webkit-scrollbar-track { background-color:#dadada; } /* 스크롤 바 밑의 배경 */
.scrolltbody2::-webkit-scrollbar-thumb { background: #999; } /* 실질적 스크롤 바 */
.scrolltbody2::-webkit-scrollbar-thumb:hover { background: #666; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
.scrolltbody2::-webkit-scrollbar-thumb:active { background: #999; } /* 실질적 스크롤 바를 클릭할 때 */
.scrolltbody2::-webkit-scrollbar-button { display: none; } /* 스크롤 바 상 하단 버튼 */

/*----------------- 페이지 내비게이션 --------------*/
.pagenavi { width: 100%; padding: 20px; }
.pagenavi > ul { overflow: hidden; text-align: center; }
.pagenavi > ul > li { display: inline-block; }
.pagenavi > ul > li > a { display: inline-block; color: #666; padding: 0.5rem 0.8rem; border-radius: 0.2rem; }
.pagenavi > ul > li > a:hover { color: #000; background-color: #DADADA; }
.pagenavi > ul > li > a.on { color: #fff; background-color: #2c2c2c; }

/*----------------- 문의상세 상단 TAB 메뉴 --------------*/
.tabmenu { width: 100%; position: relative; text-align: center; } /* 전체영역 */
.tabmenu > ul.tabul { width: 100%; height: 3.2rem; text-align: center; } /* 탭 영역 너비 */
.tabmenu > ul.tabul > li { position: relative; display: inline-block;  padding-right: 0.5rem; }  /* 탭 목록 가로 정렬 */

.tabmenu > ul.tabul > li > a:first-child {   /* 탭 메뉴 스타일 */ 
    display: block; width: 20rem; padding: 0 2rem 0 0.8rem; height: 3.2rem; line-height: 3.2rem; font-size: 1rem;
    font-size: 1.3rem; font-weight: 200; color: #fff; text-align: left;
    background-color: #7a87c6; border-radius: 0.3rem 0.3rem 0 0;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;   /* 말줄임 */
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; 
} 
.tabmenu > ul.tabul > li > a:first-child.on { color: #000; background-color: #fff; }     /* 선택된 탭 스타일 */
.tabmenu > ul.tabul > li > a:first-child.on:hover { color: #000; background-color: #fff; }     /* 선택된 탭 스타일 */
.tabmenu > ul.tabul > li > a:first-child:hover { cursor: pointer; background-color: #8592d0;  }    /* 선택된 탭에 마우스 오버 스타일 */
.tabmenu > ul.tabul > li > a:first-child.dis, .tabmenu > ul.tabul > li > a:first-child.dis:hover { cursor: default; opacity: 0.4; }   /* disabled 스타일 */

.tabmenu > ul.tabul > li > a.tab_close { position: absolute; right: 0.8rem; top: 0.3rem; color: #4054AF; }  /* 탭 닫기 버튼 */ 

.tabmenu > div.tabdiv { clear: both; width: 100%; text-align: center; margin-top: 3rem; }   /* 전체 컨텐츠 블럭 설정 , 탭의 전체 너비 설정 */ 
.tabmenu > div.tabdiv > div { position: relative; display: none; width: 110rem; margin: 0 auto; text-align: left; }  /*  실제 컨텐츠 너비, 처음에 모두 숨김 */ 
.tabmenu > div:nth-child(2) > div:nth-child(1) { display: block; overflow: hidden; }  /* 첫번째 탭 컨텐츠만 보이게 함 */

/*----------------- 문의상세 중간 글작성 TAB 메뉴 --------------*/
.tab_write { width: 100%; margin: 2.5rem 0; padding: 0; }  /* 전체 감싸는 영역 */  
.tab_write .tab_menu_container { display:flex; }   /* 탭 메뉴 배치 정렬 */
.tab_write button {  padding: 1rem 1.5rem; min-width: 11rem; font-size: 1.4rem; color: #666; text-decoration: none; outline:0; cursor:pointer;       /* 탭 메뉴 스타일  */
border: 0.1rem solid #DADADA; border-radius: 0.3rem 0.3rem 0 0; background-color: #f9f9f9; text-align: center; margin-right: 0.5rem;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }

.tab_write .tab_menu_btn.on { color: #000; background-color: #fff; border-bottom: 0.1rem solid #FFF; }    /* 탭 메뉴 활성화 */
.tab_write .tab_menu_btn:hover { color: #000; background-color: #fff; }   /* 탭 메뉴 마우스 오버  */
.tab_write .tab_box {  display: none; padding: 1rem; border: 0.1rem solid #DADADA; margin-top: -0.1rem; }      /* 컨텐츠 영역 스타일 */
.tab_write .tab_box.on { display: block; }   /* 컨텐츠 블럭 활성화 스타일 */
.tab_write .tab_box_container .tab_box textarea { width: 100%; height: 20rem; overflow-x: auto; margin-bottom: 1rem; }  /* textarea */

/*----------------- 문의상세 하단 글목록 TAB 메뉴 --------------*/
.tab_writelist { width: 100%; margin: 2.5rem 0; padding: 0; }  /* 전체 감싸는 영역 */  
.tab_writelist .tab_menu_container { display: flex; }   /* 탭 메뉴 배치 정렬 */
.tab_writelist button {  padding: 1rem 1.5rem; min-width: 11rem; font-size: 1.4rem; color: #666; text-decoration: none; outline:0; cursor:pointer;       /* 탭 메뉴 스타일  */
border: 0.1rem solid #DADADA; border-radius: 0.3rem 0.3rem 0 0; background-color: #f9f9f9; text-align: center; margin-right: 0.5rem;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }

.tab_writelist .tab_menu_btn.on { color: #000; background-color: #fff; border-bottom: 0.1rem solid #FFF; }    /* 탭 메뉴 활성화 */
.tab_writelist .tab_menu_btn:hover { color: #000; background-color: #fff; }   /* 탭 메뉴 마우스 오버  */
.tab_writelist .tab_box {  display: none; padding: 1rem 0; border: 0.1rem solid #DADADA; margin-top: -0.1rem; }      /* 컨텐츠 영역 스타일 */
.tab_writelist .tab_box.on { display: block; }   /* 컨텐츠 블럭 활성화 스타일 */
.tab_writelist .tab_box_container .tab_box textarea { width: 100%; height: 20rem; overflow-x: auto; margin-bottom: 1rem; }  /* textarea */

/*----------- TREE VIEW --------------*/
.tree_box { width: 100%; height: 540px; overflow-y: auto; border: 1px solid #bdbdbd; background-color: #fff; }    /* 트리메뉴 영역 */ 
.tree { color: #2c3342; padding: 10px; background-color: #fff; }
.tree ul { list-style: none; padding-left: 16px;  }  /* Depth 들여쓰기 */ 
.tree ul:first-child { padding-left: 0; }    /* 젤 상위 노드 들여쓰기 제거  */ 
.tree label { display: inline-block; padding: 5px 0 5px 10px; vertical-align: middle; font-weight: 400; cursor: pointer; }     /* 하위 노드 포함한 노드 텍스트 */
.tree span { position: relative; display: inline-block; padding: 5px 0 5px 10px; vertical-align: middle; font-weight: 400; }  /* 하위 노드 없는 노드 텍스트 */
.tree span::before { content: "\f15b"; position: absolute; display: inline-block; left: 1px; top: 6px; font-size: 0.8rem; color: #666; }     /* 하위 노드 없는 텍스트 가상 문서 아이콘 */
.tree a { padding: 0 5px; } .tree a:hover { color: #367bc1; }
.tree a.on { color: #fff; background-color: #367bc1; }    /* 선택 노드 색상과 배경 */
.tree input[type="checkbox"] {      /* 체크박스 원본 */
    position: relative; vertical-align: middle; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;  /* 숨김 */
} 
.tree input[type="checkbox"]::before { content: "\f146"; position: absolute; left: 0; top: -9px; display: inline-block; font-size: 0.8rem; color: #2c3342; }  /* 가상의 체크박스 및 "-" icon */
.tree input[type="checkbox"]:checked:before { content:'\f0fe'; }  /*   체크 시 "+" 아이콘 */
.tree input[type="checkbox"]:checked ~ ul { display: none; }   /*  체크 시 하위링크 접기 */

/*-------------- ToolTip : 툴팁 -----------*/
[data-tooltip] { position: relative; z-index: 10; line-height: 1; }
  /* 툴팁 위치와 모양 설정 - 방향설정 없으면 top 으로 위치 설정됨 */
[data-tooltip]:before, [data-tooltip]:after { position: absolute; visibility: hidden; opacity: 0; left: 50%; bottom: calc(100% + 0.5rem); pointer-events: none; transition: 0.2s; will-change: transform; }
/* 동적 너비 설정 */
[data-tooltip]:before { 
    content: attr(data-tooltip); padding: 1rem 1rem; min-width: 5rem; max-width: 30rem; width: max-content; width: -moz-max-content; border-radius: 0.5rem; font-size: 1.2rem; font-weight: 200;
    background-color: rgba(59, 72, 80, 0.9); background-image: linear-gradient( 30deg, rgba(59, 72, 80, 0.44), rgba(59, 68, 75, 0.44), rgba(60, 82, 88, 0.44) );
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2); color: #fff; text-align: left; line-height:1.5; white-space: pre-wrap; transform: translate(-50%, -0.5rem) scale(0.5); }
/* 화살표 */
[data-tooltip]:after { 
    content: ""; border-style: solid; border-width: 0.5rem 0.5rem 0 0.5rem; border-color: rgba(55, 64, 70, 0.9) transparent transparent transparent; transition-duration: 0s;  /* 마우스 벗어나면 화살표 효과 없어짐 */
    transform-origin: top; /* 슬라이드 방향 설정 */  transform: translateX(-50%) scaleY(0);  }
/* 마우스 오버 시  */
[data-tooltip]:hover:before, [data-tooltip]:hover:after { visibility: visible; opacity: 1; }
/* 커지는 효과 */
[data-tooltip]:hover:before { transition-delay: 0.1s; transform: translate(-50%, -0.5rem) scale(1); }
/* 안쪽에 마우스 들어올때 슬라이드 다운 효과  */
[data-tooltip]:hover:after { transition-delay: 0.2s; /* Starting after the grow effect */ transition-duration: 0.2s; transform: translateX(-50%) scaleY(1); }
/*==  LEFT 방향 ==*/
[data-tooltip-location="left"]:before, [data-tooltip-location="left"]:after { left: auto; right: calc(100% + 0.5rem); bottom: 50%; } /* Tooltip + arrow */
/* Tooltip */
[data-tooltip-location="left"]:before { transform: translate(-0.5rem, 50%) scale(0.5); }
[data-tooltip-location="left"]:hover:before { transform: translate(-0.5rem, 50%) scale(1); }
/* Arrow */
[data-tooltip-location="left"]:after { border-width: 0.5rem 0 0.5rem 0.5rem; border-color: transparent transparent transparent rgba(55, 64, 70, 0.9); transform-origin: left; transform: translateY(50%) scaleX(0); }
[data-tooltip-location="left"]:hover:after { transform: translateY(50%) scaleX(1); }
/*== RIGHT 방향 ==*/
[data-tooltip-location="right"]:before, [data-tooltip-location="right"]:after { left: calc(100% + 0.5rem); bottom: 50%; }
[data-tooltip-location="right"]:before { transform: translate(0.5rem, 50%) scale(0.5); }
[data-tooltip-location="right"]:hover:before { transform: translate(0.5rem, 50%) scale(1); }
[data-tooltip-location="right"]:after { border-width: 0.5rem 0.5rem 0.5rem 0; border-color: transparent rgba(55, 64, 70, 0.9) transparent transparent; transform-origin: right; transform: translateY(50%) scaleX(0); }
[data-tooltip-location="right"]:hover:after { transform: translateY(50%) scaleX(1); }
/*== BOTTOM 방향 ==*/ 
[data-tooltip-location="bottom"]:before, [data-tooltip-location="bottom"]:after { top: calc(100% + 0.5rem); bottom: auto; }
[data-tooltip-location="bottom"]:before { transform: translate(-50%, 0.5rem) scale(0.5); }
[data-tooltip-location="bottom"]:hover:before { transform: translate(-50%, 0.5rem) scale(1); }
[data-tooltip-location="bottom"]:after { border-width: 0 0.5rem 0.5rem 0.5rem; border-color: transparent transparent rgba(55, 64, 70, 0.9) transparent; transform-origin: bottom; }

/*-----------------  프로그레스 바 Progressbar  --------------*/
progress::-webkit-progress-bar {  /* 프로그레스바 기본 스타일 */
    background-color: #f9f9f9; border-radius: 0.2rem; box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25) inset;
} 
progress[value] {    /* 프로그래스바 전체 가로 세로 길이 */
    width: 25rem; height: 1.5rem; background-color: #fff; position: relative;
    -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; /* 파이어폭스용 */
} 
progress::-webkit-progress-value {      /* 값 막대 스타일 - 플랫 바 */
    background-image:
        /* -webkit-linear-gradient( -45deg, transparent 10%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 10%, transparent 0% ),  /* 사선 라인 검정 투명 */
        -webkit-linear-gradient( top, rgba(255, 255, 255, .5), rgba(0, 0, 0, .2) ),  /* 흰색에서 검은색 볼륨 처리  */
        -webkit-linear-gradient( left, #12af92, #4054AF );  /* 색상 좌우 처리 */

    border-radius: 0.2rem;     
    -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; 
}
/*
progress::-webkit-progress-value {      /* 값 막대 스타일 - 사선 그라데이션 */
    /* background-image: */
        /* -webkit-linear-gradient( -45deg, transparent 10%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 10%, transparent 0% ),  사선 라인 검정 투명 */
        /* -webkit-linear-gradient( top, rgba(255, 255, 255, .5), rgba(0, 0, 0, .2) ),  흰색에서 검은색 볼륨 처리  */
        /* -webkit-linear-gradient( left, #12af92, #4054AF );  색상 좌우 처리 */

    /* border-radius: 0.2rem;      */
    /* background-size: 35px 20px, 100% 100%, 100% 100%; */
/* } */
/* progress[value]::-webkit-progress-value {
    position: relative;
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius:3px;
    animation: animate-stripes 5s linear infinite;
} */


/*----------------- 멀티 셀렉트 박스  --------------*/
.dropdown { position: relative; display: inline-block; }
.dropdown::before {     /* triangle dot */
    content: ""; position: absolute; top: 1.7rem; right: 0.8rem; width: 0; height: 0; 
    border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; border-top: 0.5rem solid #2c3342; }
.dropdown dd, .dropdown dt { margin: 0; padding: 0; }
.dropdown ul { margin: -1px 0 0 0; }
.dropdown dd { position: relative; }
.dropdown a, .dropdown a:visited { color: #666; text-decoration: none; outline: none; }  /* 선택한 것 표시되는 부분 기본 스타일 */
.dropdown dt a { 
    background-color: #fff; display: block; padding: 0.8rem 2rem 0.5rem 1rem; min-height: 2.5rem; font-size: 1.4rem; /* 표시되는 텍스트 크기  */
    line-height: 2.4rem; overflow: hidden; border-bottom: 0.1rem solid #999;   /* 전체 너비 설정하는 부분 */
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; }
.dropdown dt a:hover { border-bottom: 0.1rem solid #000; }
.dropdown dt a span, .multiSel span { cursor: pointer; display: inline-block; padding: 0 0.3rem 0.2rem 0; } /* 추가되는 레이블 스타일  */
.dropdown dd ul {   /* 하단 펼쳐진 영역 스타일 */
    position: absolute; display: none; left: 0; top: 0.2rem; background-color: #fff; border: 0.1rem solid #dadada; color: #666; padding: 0.2rem 1.5rem 0.2rem 0.5rem; 
    list-style: none; height: 10rem; overflow: auto; z-index: 2; }  /* 보이는 높이 100 */
.dropdown span.value { display: none; }
.dropdown dd ul li { padding: 0.5rem; display: block; }
.dropdown dd ul li:hover { width: 100%; background-color: #f9f9f9; }
.dropdown dd ul li a:hover { background-color: #fff; }

/*----------------- 멀티 셀렉트 박스 width 태그  --------------*/
.autocomplete-select { position: relative; }
.autocomplete-select > span { position: absolute; left: 3rem; bottom: 1rem; color: #666; z-index: 2; }  /* placeholder 문구 스타일 */
.multi-select__select {  /* 멀티셀렉트 박스 전체 영역 */
    position: relative; margin: 0 auto; align-items: center; cursor: pointer; padding: 0.5rem 0.5rem;
    display: flex; font-size: 1.4rem; font-weight: 300; justify-content: left; min-height: 10rem; /* 최소 높이 */
    width: 32.8rem; height: 12rem; border: 0.1rem solid #dadada; background-color: #fff; color: #666;
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s;
}
.multi-select__select:hover { border: 0.1rem solid #000; }  /* 멀티셀렉트 전체 박스 마우스 오버 시 */
/* .multi-select__autocomplete::placeholder { color: red; } */
.multi-select__options {   /* 드롭다운 박스 영역 */
    position: absolute; border-radius: 0.2rem; border: 0.1rem solid #000; font-size: 1.2rem; color: #666; left: 0; top: 12rem; max-height: 20rem; 
    width: 100%; z-index: 5; overflow-y: scroll; background-color: #fff; display: none;
}
.multi-select__option:hover { background-color: #f9f9f9; }  /* 옵션 메뉴 마우스 오버 시 배경색 */
.multi-select__select--opened .multi-select__options { display: block; }  /* 옵션 메뉴 박싱화 */
.multi-select__option { background-color: #fff; border-bottom: 0.1rem solid #dadada; height: 4rem; line-height: 3rem; padding: 0.5rem 1rem; }  /* 옵션 메뉴 개별 스타일 */
.multi-select__option-active { background-color: #e8eaf5 !important;  color: #000; }  /* 선택 시 */
.multi-select__option--selected { color: #e4e4e4;  cursor: initial;
    pointer-events: none;
}

.multi-select__option--hidden {
    display: none;
}

.multi-select__selected-label {
    background: #58d8d3;
    border-radius: 4px;
    color: #fff;
    cursor: initial;
    display: inline-block;
    margin: 5px;
    padding: 3px 7px;
    font-size: 12px;
}

.multi-select__selected-label:last-of-type {
    margin-right: 0;
}

.multi-select__selected-label i {
    cursor: pointer;
    display: inline-block;
    margin-left: 7px;
}

.multi-select__selected-label i:hover {
    color: #e4e4e4;
}

.multi-select__autocomplete {
    background: #f9f9f8;
    border-bottom: 1px solid #e4e4e4;
    border-left: none;
    border-right: none;
    border-top: none;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    padding: 10px;
    width: 100%;
}

/*-------------- 수신자 보기 팝업창 -----------*/
.popup_receiver {    /* 전체 영역*/
    position: absolute; width: 370px !important; top: 3rem; left: 13rem; display: none; z-index: 20;
    background-color: #fff; border-radius: 0.5rem; color: #fff; text-align: left; line-height: 1; border: 0.1rem solid #cbd3e0;
    -webkit-box-shadow: 0 0 0.8rem 0.3rem rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.8rem 0.3rem rgba(0, 0, 0, 0.1); /* 그림자: x, y, blur, spread, color */
    -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.popup_receiver::after { content: ""; position: absolute; top: 4.5rem; left: -2rem; margin-left: 0; border-width: 1rem; border-style: solid; border-color: transparent #cbd3e0 transparent transparent; } /* < 화살표 */
.popup_receiver h3 { position: relative; font-size: 1.5rem; font-weight: 500; width: 100%; padding: 0.5rem 1rem; color: #000; background-color: #cbd3e0; border-radius: 0.2rem 0.2rem 0 0; }  /* 타이틀 */
.popup_receiver .receiver_list { padding: 1rem; min-width: 30rem; }  /* 리스트 전체 */
.popup_receiver p { color: #666; }   /* 리스트 한줄 */ 
.popup_receiver a.close_x { position: absolute; display: inline-block; right: 1rem; top: 0.5rem; transition: all 0.3s; background-color: transparent; } /* X 버튼 영역 */
.popup_receiver a.close_x:hover { cursor: pointer; }   /* 마우스 오버시 커서 */

/*-------- INTPUT Focus Calendar ------*/
div.inputCalendar { position: relative; display: inline-block; }
div.inputCalendar i { position: absolute; right: 0.5rem; top: 1.3rem; }