@charset "utf-8";
/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../../../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
/* .cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%} */

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
/* a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right}

.btn_submit {border:0;background:#3a8afd;color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:#2375eb}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa} */
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top}
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
/* a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle}
.btn_admin:hover, a.btn_admin:hover {color:#ff3746} */


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px}
.tbl_head01 thead th input {vertical-align:top}
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:1.4em;height:60px;word-break:break-all}
.tbl_head01 tbody tr:hover td {background:var(--td-hover)}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top}
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid var(--line);background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:34px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:60px;text-align:center}
.td_datetime {width:110px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:#3a8afd;border-color:#3a8afd;position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#3a8afd;background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .cert_btn {margin-bottom:30px;text-align:center}
.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}
/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}

/* 수영 */
/* 컬러팔레트 */
:root {
    --primary: #003BFF;             /* 강한 푸른색 */
    --text-emphasis: #5d89b3;       /* 밝은 블루톤 강조 텍스트 */
    --primary-btn-bg: #4065E0;      /* 버튼 기본 배경색 */
    --primary-btn-hover-bg: #6680d6;    /* 버튼 hover 시 좀 더 밝은 블루 */
    --primary-btn-text: #ffffff;
    --danger-btn-bg: #f03223;
    --danger-btn-hover-bg: #f5736a;
    --danger-btn-text: #ffffff;
    --excel-btn-bg: #206f44;
    --excel-btn-hover-bg: #448361;
    --pdf-btn-bg: #b22222;
    --pdf-btn-hover-bg: #d64545;
    /* 취소 */
    --red-bg: #ffe9e5;
    --red-text: #f8644a;
    /* 대기 */
    --yellow-bg: #fff6e3;
    --yellow-text: #f5ba3c;
    /* 진행중 */
    --blue-bg: #d2efff;
    --blue-text: #22afff;
    /* 완료 */
    --green-bg: #e6f2ea;
    --green-text: #28b446;
    --depth1: #fafafa;
    --depth2: #f1f1f1;
    --depth3: #e8e8e8;
    --text1: #333333;
    --text2: #555555;
    --text3: #777777;
    --text4: #cccccc;
    --bg: #f7fafc;
    --bg2: #ffffff;
    --th: #f2f5f8;
    --td-hover: #eef3f8;
    --line: #d4d4d4;
    --line2: #f4f4f4;
    --secondary-btn-bg: #4b5055;
    --secondary-hover-btn-bg: #6e7277;
    --secondary-disabled-btn-bg: #cfd7e2;
    --secondary-btn-text: #ffffff;
}

html[data-theme=dark] {
    --depth1: #1e1e1e;
    --depth2: #2a2a2a;
    --depth3: #2f3542;
    --text1: #f2f2f2;
    --text2: #c1c1c1;
    --text3: #8d8d8d;
    --text4: #7a7a7a;
    --bg: #121212;
    --bg2: #222222;
    --th: #2f2f2f;
    --td-hover: #3b4654;
    --line: #444444;
    --line2: #2a2a2a;
    --secondary-btn-bg: #ffffff;
    --secondary-hover-btn-bg: #ebebeb;
    --secondary-disabled-btn-bg: #ebebeb;
    --secondary-btn-text: #333333;
}

/* 초기화 */
@font-face {
    font-family: 'IBMPlexSansKR-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {padding: 0; margin: 0; box-sizing: border-box; font-family: 'IBMPlexSansKR-Regular'; scrollbar-width: thin; scrollbar-color: #B1C1D6 var(--bg2); --scrollbar-size: 5px;}

html{scroll-behavior: smooth;font-size: 16px;}
body{font-size: 1rem; background-color: var(--bg);}
html, body {line-height: 1.2; color: var(--text1); overflow-x: hidden;}
li {list-style: none;}
a {color: inherit; text-decoration: none; display: inline-block;}
span{display: inline-block;}
i {font-style: normal;}
h1,h2,h3,h4,h5 {font-weight: normal;}
button {background: inherit; border: none; box-shadow: none; border-radius: 0; padding: 0; overflow: visible; cursor: pointer;}
input[type="checkbox"]:not(.selec_chk){position: relative; width: 20px; height: 20px; border-radius: 50%;}
input[type="checkbox"]:not(.selec_chk):checked {accent-color: var(--primary);}
table {border-collapse: collapse;border-spacing: 0;width: 100%;}
table, th, td {border: none;padding: 0;margin: 0;}
input:focus, select:focus, textarea:focus{outline: none;}
input:placeholder, textarea:placeholder{color: var(--text4);}
input[readonly], textarea[readonly] {background-color: var(--bg);}
select {cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url(../img/select-arrow.svg); padding-right: 30px; background-repeat: no-repeat; background-position: right 10px center;}

/* 버튼 */
.btn_confirm{display: flex; align-items: center; column-gap: 0.5rem;}
.btn{font-size: 0.875rem; display: block; cursor: pointer; user-select: none; transition: background 0.3s; padding: 0 1rem; height: 34px; line-height: 34px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text);}
.btn:hover {background-color: var(--secondary-hover-btn-bg);}
.excel-btn,.pdf-btn{display: flex; align-items: center; column-gap: 5px;}
.excel-btn {background-color: var(--excel-btn-bg);}
.excel-btn:hover {background-color: var(--excel-btn-hover-bg);}
.pdf-btn {background-color: var(--pdf-btn-bg);}
.pdf-btn:hover {background-color: var(--pdf-btn-hover-bg);}
.hover-btn {width: 34px; height: 34px; padding: 8px; border-radius: 5px; position: relative;}
.hover-btn svg{width: 20px; height: 20px;}
.hover-btn:hover {background-color: var(--depth2);}
.hover-btn:hover .sound_only{display: flex !important; justify-content: center; align-items: center; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: auto; height: 24px; border-radius: 5px; padding: 5px 8px !important; background-color: var(--text1); color: #fff; font-size: 0.75rem; z-index: 999; white-space: nowrap;}
.btn_bo_user .hover-btn{border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;}

/* 페이징 */
.pg_wrap {display: flex; align-items: center; justify-content: center;}
.pg {display: flex; align-items: center; column-gap: 0.5rem;}
.pg_page, .pg_current {display:inline-block;vertical-align:middle; height:30px; width: 30px;}
.pg_page:not(.pg_start):not(.pg_end),.pg_current{display:inline-block; line-height: 28px; text-align: center; border:1px solid var(--line); border-radius:15px;}
.pg_current {background:var(--secondary-btn-bg); color:#fff; }
.pg_page:not(.pg_start):not(.pg_end) {color:var(--text3);}
.pg_page:not(.pg_start):not(.pg_end):hover {background-color:var(--secondary-disabled-btn-bg)}

.pg_start, .pg_prev, .pg_end, .pg_next {text-indent:-999px; overflow:hidden; padding:0; border: 0; opacity: 0.5;}
.pg_start {background:url('../img/btn_first.gif') no-repeat 50% 50%;}
.pg_prev {background:url('../img/btn_prev.gif') no-repeat 50% 50%;}
.pg_end {background:url('../img/btn_end.gif') no-repeat 50% 50%;}
.pg_next {background:url('../img/btn_next.gif') no-repeat 50% 50%;}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {opacity: 1;}

/* 레이아웃 */
header{border-bottom: 1px solid var(--line2); background-color: var(--bg2);}
#hd_wrapper{display: flex; padding: 1rem 2rem;justify-content: space-between; align-items: center;}
#hd_wrapper .all-menu-wrap {display: none;}
#logo a {display: flex; align-items: center; justify-content: center;}
#logo img{height: 40px;}
footer {display: none; padding: 1rem 2rem; text-align: center; border-top: 1px solid var(--line);}
#ft_copy a {text-decoration: underline;}
#wrapper{margin: 10px; width: calc(100% - 20px); height: calc(100vh - 20px - 77px); display: flex; overflow: hidden;}
#wrapper.use-dvh {height: calc(100dvh - 20px - 77px);}
#wrapper aside{position: relative; width: 220px; flex-shrink: 0;}
#gnb{display: flex; width: 100%; height: 100%; font-size: 0.875rem;}
#gnb_1dul{width: 100%; height: 100%; padding: 10px; background-color: var(--depth1); border: 1px solid var(--line); border-radius: 5px 0 0 5px; position: absolute; top: 0; left: 0; z-index: 99; overflow: auto;}
.gnb_1dli {border-radius: 10px;}
.gnb_1dli:hover,.gnb_1dli.on{background-color: var(--depth2);}
.gnb_1da {padding: 1rem 0.5rem; display: flex; align-items: center; justify-content: space-between;}
.gnb_2dul {display: none;}
.gnb_2dul_box {padding: 0 1rem 0.5rem;}
.gnb_2dli {border-radius: 10px;}
.gnb_2dli:hover,.gnb_2dli.on{background-color: var(--depth3);}
.gnb_2da {padding: 0.5rem 0.5rem 0.5rem 1rem; display: flex; align-items: center; justify-content: space-between;}
main {width: calc(100% - 220px); height: 100%; position: relative; border-radius: 0 5px 5px 0; border: 1px solid var(--line); border-left: 0; padding: 30px; background-color: var(--bg2);}
main .content-wrapper {width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden;}

/* 메인 */
.main-wrapper{display: flex; gap: 20px; flex-wrap: wrap;}
.main-box-wrap{width: calc(100% / 2 - 20px / 2); height: calc(100% / 2 - 20px / 2);}
.main-box-wrap.wrap1, .main-box-wrap.wrap2, .main-box-wrap.wrap3 {width: calc(100% / 3 - 40px / 3);}
.main-box-wrap h3 {font-size: 1.25rem; font-weight: bold; color: var(--text3); margin-bottom: 10px; padding: 0 1rem;}
.main-box,.main-box#calendar{height: calc(100% - 1.25rem - 14px); border-radius: 30px; padding: 30px; border: 1px solid var(--line);}
/* 메인 캘린더 */
#calendar.weekly-calendar {min-height: unset;}
#calendar.weekly-calendar .calendar-header {padding: 0; margin-bottom: 1.5rem;}
#calendar.weekly-calendar .calendar-header h4 {font-size: 1rem; color: var(--text3); display: flex; align-items: baseline; column-gap: 10px;}
#calendar.weekly-calendar .calendar-header h4 strong {font-size: 1.25rem; color: var(--text1);}
#calendar.weekly-calendar table {height: fit-content;  border-bottom: 1px solid var(--line2);}
#calendar.weekly-calendar thead{border-bottom: 0;}
#calendar.weekly-calendar th:not([role="presentation"]) {font-size: 0.875rem;}
#calendar.weekly-calendar #calendar-body tr {height: unset;}
#calendar.weekly-calendar #calendar-body td{padding-bottom: 1.25rem; cursor: pointer;}
#calendar.weekly-calendar #calendar-body td:hover{background-color: unset;}
#calendar.weekly-calendar #calendar-body td:not(.today):not(.selected):hover>span{background-color: var(--line2);}
#calendar.weekly-calendar #calendar-body td.today > span{background-color: var(--line); color: var(--text1);}
#calendar.weekly-calendar #calendar-body td.selected > span{background-color: var(--secondary-btn-bg); color: var(--bg2);}
#calendar.weekly-calendar .calendar-weekly-posts {padding-top: 1.25rem; height: calc(100% - 142px); overflow-y: auto;}
#calendar.weekly-calendar .daily-post-box {display: flex; flex-wrap: wrap;}
#calendar.weekly-calendar .daily-post-box > h4{width: 100%; padding: 10px;}
#calendar.weekly-calendar .daily-post-box > p, #calendar.weekly-calendar .daily-post-box .calendar-post-group{width: 50%; padding: 10px;}
#calendar.weekly-calendar .daily-post-box .calendar-post-group p {margin-bottom: 20px;}
#calendar.weekly-calendar .daily-post-box .calendar-post-group li:not(:last-child) {margin-bottom: 15px;}
#calendar.weekly-calendar .calendar-header button:not(#goThisWeek){display: flex; align-items: center; justify-content: center; transition: background 0.3s; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text);}
#calendar.weekly-calendar .calendar-header button:not(#goThisWeek):hover {background-color: var(--secondary-hover-btn-bg);}
#calendar.weekly-calendar .calendar-header #goThisWeek {transition: background 0.3s; padding: 0 1rem; height: 34px; line-height: 34px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--primary-btn-bg); color: var(--primary-btn-text);}
#calendar.weekly-calendar .calendar-header #goThisWeek:hover {background-color: var(--primary-btn-hover-bg);}
/* 메인 게시글 */
.main-bo-list {height: 100%; overflow-y: auto;}
.main-bo-list .main-bo-content {display: flex; align-items: center; column-gap: 5px; padding-left: 10px;}
.main-bo-list .main-bo-content .dot {flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin: 5px; background-color: var(--primary);}
.main-bo-list .no-report .dot {background-color: var(--line);}
.main-bo-list .main-bo-content p {width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-bo-list .main-bo-content.basic_li{justify-content: space-between;}
.main-bo-list .main-bo-content.basic_li a {padding: 10px 0; width: calc(100% - 100px); display: flex; align-items: center; column-gap: 5px;}
.main-bo-list a:hover p{text-decoration: underline;}
/* 일반유저 접근불가 */
.if-user {position: relative; overflow: hidden; border-radius: 25px;}
.if-user::after {content: '⛔본 항목은 관리자 전용입니다.'; padding: 1rem; display: block; width: calc(100% - 2rem); height: calc(100% - 2rem); background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); position: absolute; top: 0; left: 0;}

/* 공지사항 */
.notice-bo-list {display: flex; flex-direction: column; justify-content: space-around;}
/* 업무일지 */
.staff-report-list {padding: 10px;}
.staff-report-list li:not(:last-child) {margin-bottom: 20px;}
.staff-report-list li strong {display: inline-block; font-weight: normal; margin-bottom: 10px;}
.main-contract-list .basic_li a {width: 100%;}
/* 계약관리 */
.main-contract-list {padding: 10px;}
.main-contract-list .basic_li:not(:last-child) {margin-bottom: 20px;}
.main-contract-list .basic_li .contract-tit {margin-bottom: 20px;}

.main-contract-list .contract-info {width: 100%;}
.main-contract-list .contract-item {display: flex; margin-bottom: 10px; column-gap: 10px;}
.main-contract-list .contract-item:last-child {margin-bottom: 0;}
.main-contract-list .contract-item strong {display: inline-block; width: 60px; font-weight: normal; flex-shrink: 0;}

.main-contract-list .progress-wrap{display: flex; align-items: center; width: 100%; column-gap: 5px;}
.main-contract-list .progress-bar-container {width: 100%; height: 10px; border-radius: 5px; background-color: var(--line2); overflow: hidden;}
.main-contract-list .progress-bar {height: 100%; border-radius: 5px; background-color: var(--primary-btn-bg); transition: width 0.3s ease;}
.main-contract-list .progress-bar:hover {background-color: var(--primary-btn-hover-bg);}

/* 캘린더 */
#calendar{border-radius: 1rem; border: 1px solid var(--line); overflow: hidden; width: 100%; min-height: 100%;}
#calendar .calendar-header, .fc-header-toolbar{display: flex; align-items: center; column-gap: 0.5rem; padding: 1.25rem 1rem; margin-bottom: 1.25rem;}
#calendar #monthYear{font-size: 1.5rem; font-weight: bold; margin-right: 1.25rem;}
#calendar #prev, #calendar #next, .fc .fc-prev-button, .fc .fc-next-button {display: flex; align-items: center; justify-content: center; transition: background 0.3s; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text);}
#calendar #prev:hover, #calendar #next:hover, .fc .fc-prev-button:hover, .fc .fc-next-button:hover {background-color: var(--secondary-hover-btn-bg);}
#calendar #goToday, .fc .fc-today-button {transition: background 0.3s; padding: 0 1rem; height: 34px; line-height: 34px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--primary-btn-bg); color: var(--primary-btn-text);}
#calendar #goToday:hover, .fc .fc-today-button:hover {background-color: var(--primary-btn-hover-bg);}
#calendar table {width: 100%; height: calc(100% - 34px - 1.25rem - 1.25rem); text-align: center;}
#calendar thead {border-bottom: 1px solid var(--line);}
#calendar th:not([role="presentation"]) {font-size: 1.25rem; font-weight: normal; padding: 0.5rem 0;}
#calendar-body{height: 100%;}
#calendar-body tr {min-height: calc(100% / 5); height: 150px;}
#calendar-body td {width: calc(100% / 7); vertical-align: top; transition: background 0.3s; padding: 5px;}
#calendar-body td:hover ,.fc-daygrid-day-frame:hover {background-color: var(--line2);}
#calendar-body td>span, .fc-daygrid-day-top span {display: block; width: 30px; height: 30px; border-radius: 50%; margin: 5px auto; text-align: center; line-height: 32px; font-weight: bold;}
#calendar-body td.today>span,.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top span {background-color: var(--secondary-btn-bg); color: var(--bg2);}
#calendar-body td.after-month-date>span, #calendar-body td.before-month-date>span {color: var(--text3);}

.calendar-post-label {margin-bottom: 5px; width: 100%; padding: 4px 10px; font-size: 0.875rem; border-radius: 5px; cursor: pointer; position: relative; white-space: nowrap; border: 1px solid transparent;}
.calendar-post-label:last-child{margin-bottom: 0;}
.calendar-post-label>p{display: flex; align-items: center; justify-content: space-between;}
.calendar-post-label.work-logs-label {background-color: var(--yellow-bg); color: var(--yellow-text);}
.calendar-post-label.work-logs-label:hover{border: 1px solid var(--yellow-text);}
.calendar-post-label.leave-request-label {background-color: var(--blue-bg); color: var(--blue-text);}
.calendar-post-label.leave-request-label:hover{border: 1px solid var(--blue-text);}
.calendar-post-label.schedules-label {background-color: var(--green-bg); color: var(--green-text);}
.calendar-post-label.schedules-label:hover{border: 1px solid var(--green-text);}

#calendar-body tr:last-child .calendar-tooltip {top: unset; bottom: calc(100% + 0.75rem);}
.calendar-tooltip {display: none; position: absolute; top: calc(100% + 0.75rem); left: 50%; transform: translateX(-50%); z-index: 100; background: white; box-shadow: 0 0 10px rgba(0,0,0,0.25); padding: 1.25rem; border-radius: 1rem; white-space: normal; width: 15rem; text-align: left; color: var(--text1);}
.calendar-tooltip>p {margin-bottom: 1.25rem;}
.calendar-tooltip li {margin-bottom: 1rem; display: flex; align-items: baseline; column-gap: 5px;}
.calendar-tooltip li:last-child {margin-bottom: 0;}
.calendar-tooltip li p {width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.calendar-tooltip li span {flex-shrink: 0; font-size: 0.875rem; color: var(--text2);}
.calendar-post-label:hover .calendar-tooltip {display: block;}

/* Fullcalnedar */
.fc-header-toolbar {justify-content: space-between;}
.fc-toolbar-chunk {display: flex; align-items: center; column-gap: 0.5rem;}
.fc-toolbar-chunk .fc-toolbar-title{font-size: 1.5rem; font-weight: bold; margin-right: 1.25rem;}
.fc-button-group{display: flex; align-items: center; gap: 0.5rem;}
.fc-button-group .fc-button {transition: background 0.3s; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--secondary-btn-text); color: var(--secondary-btn-bg);}
.fc-button-group .fc-button:focus {outline: none;}
.fc-button-group .fc-button:hover {background-color: var(--secondary-disabled-btn-bg);}
.fc-button-group .fc-button.fc-button-active {background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text);}
.fc-dayGridMonth-button, .fc-dayGridWeek-button , .fc-dayGridDay-button {display: none;} /* 월,주,일단위 캘린더 보기 버튼 제거 */
.fc .fc-daygrid-day-top {justify-content: center;}

/* 계약관리 */
.management-list {width: 100%;}
.management-list .btn-wrap{margin-top: 0;}
.management-list .management-top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; background-color: var(--th); border-radius: 1rem; padding: 1.25rem 1rem; flex-wrap: wrap; gap: 1rem;}
.management-list .sch-form {display: flex; align-items: center; gap: 0.5rem;}
.management-list .sch-box {display: flex; border-radius: 5px; border: 1px solid var(--line); overflow: hidden; height: 34px;}
.management-list .sch-box select, .management-list .sch-box input {height: 34px; border-radius: 0; border: 0; font-size: 0.875rem;}
.management-list .sch-box select:focus, .management-list .sch-box input:focus {outline: none;}
.management-list .sch-box select {padding-left: 16px;}
.management-list .sch-box input {padding:0 12px; color: var(--text1);}
.management-list .sch-btn {transition: background 0.3s; height: 34px; padding: 0 10px; display: flex; align-items: center; column-gap: 5px; border: 1px solid var(--line); border-radius: 5px; background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text);}
.management-list .sch-btn:hover {background-color: var(--secondary-hover-btn-bg);}
.management-list .etc-wrap label{display: flex; align-items: center; column-gap: 0.5rem;}
.management-list .etc-wrap input{height: 34px; padding:0 12px; border-radius: 5px; border: 1px solid var(--line);}
.management-list .management-table-wrap:not(.performance-wrap){width: 100%; overflow-x: auto;}
.management-list .management-table-wrap .management-tit {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 1.25rem;}
.management-list .management-table-wrap .download-btn-wrap {display: flex; align-items: center; gap: 10px;}
.management-list .management-table {margin-bottom: 10px; min-width: 1000px;}
.management-list th {text-align: left; font-weight: normal; color: var(--text2); padding: 10px;}
.management-list td {text-align: left; padding: 10px; border: 1px solid var(--line);}
.management-list td:first-child{border-left: 0;}
.management-list td:last-child{border-right: 0;}
.management-list tr:hover td {background-color: var(--td-hover);}
.management-list .btn-group-row {display: flex; gap: 5px;}
.management-list td .btn-mini,
.management-list td .status-btn {height: 30px; padding: 0 10px; line-height: 30px; border-radius: 5px; border: 1px solid var(--line); background-color: var(--secondary-btn-bg); color: var(--secondary-btn-text);}
.management-list td .btn-mini:hover {background-color: var(--secondary-hover-btn-bg);}
.management-list td .status-btn.is-done{background-color: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-text);}
.management-list td .status-btn.is-progress{background-color: var(--blue-bg); color: var(--blue-text); border: 1px solid var(--blue-text);}
.management-list td .status-btn.is-waiting{background-color: var(--yellow-bg); color: var(--yellow-text); border: 1px solid var(--yellow-text);}
.management-list td .status-btn.is-cancel{background-color: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-text);}

.management-modal {display: none; position: absolute; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.management-modal .modal-content {background-color: #fff; margin: 30px; padding: 30px; border-radius: 8px; width: calc(100% - 60px); height: calc(100% - 60px); position: relative; overflow-y: auto;}
.management-modal .modal-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}
.management-modal .modal-body form {display: flex; flex-direction: column; row-gap: 2rem;}
.management-modal .modal-body fieldset {display: flex; flex-wrap: wrap; row-gap: 1rem;}
.management-modal .modal-body fieldset legend {display: block; width: 100%; border-top: 1px dashed var(--line); padding: 1.5rem 1rem 1.5rem; font-size: 1.25rem;}
.management-modal .modal-body fieldset:first-child legend {border-top: 0;}
.management-modal .modal-body fieldset label, .management-modal .modal-body fieldset input, .management-modal .modal-body fieldset select {width: calc(100% / 6);}
.management-modal .modal-body fieldset label {padding: 0.5rem 1rem;}
.management-modal .modal-body fieldset input, .management-modal .modal-body fieldset select, .management-modal .modal-body fieldset textarea{padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: 5px;}
.management-modal .modal-body fieldset textarea {resize: none;}
.management-modal .submit-btn,.management-modal .sms-btn {width: 100%; margin-top: 20px; background: var(--secondary-btn-bg); color: var(--secondary-btn-text); padding: 10px; border: none; cursor: pointer;}
.management-modal .submit-btn:hover,.management-modal .sms-btn:hover {background-color: var(--secondary-hover-btn-bg);}

.performance-modal .modal-content, .purchase-modal .modal-content, .employee-modal .modal-content, .inquiry-modal .modal-content {width: 60rem; height: fit-content; max-width: calc(100% - 60px); max-height: calc(100% - 60px); margin: 30px auto;}
.performance-modal .modal-body fieldset label, .purchase-modal .modal-body fieldset label, .employee-modal .modal-body fieldset label, .inquiry-modal .modal-body fieldset label {width: 30%;}
.performance-modal .modal-body fieldset input, .puperformancerchase-modal .modal-body fieldset select, .purchase-modal .modal-body fieldset input, .purchase-modal .modal-body fieldset select, .employee-modal .modal-body fieldset input, .employee-modal .modal-body fieldset select, .inquiry-modal .modal-body fieldset input, .inquiry-modal .modal-body fieldset select {width: 70%;}

/* 코멘트 */
.management-list .management-table .comment-count {display: inline-block; font-size: 0.75rem; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--primary); color: var(--bg2); line-height: 1rem; text-align: center; margin-left: 0.25rem;}
.management-modal .modal-body .comment-ul li {position: relative; display: block; width: calc(100% - 8px); margin: 10px 0 10px 8px; padding: 10px 15px; background: var(--line2); border-radius: 15px; font-size: 0.875rem;}
.management-modal .modal-body .comment-ul li::after { content: ""; position: absolute; top: 10px; left: -8px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--line2);}
.management-modal .modal-body .comment-ul li:nth-child(2n) { background: var(--blue-bg); margin: 10px 8px 10px 0;}
.management-modal .modal-body .comment-ul li:nth-child(2n)::after {left: auto; right: -8px; border-right: none; border-left: 8px solid var(--blue-bg);}
.management-modal .modal-body .comment-write-wrap {width: 100%; display: flex; flex-direction: column; border-radius: 5px; border: 1px solid var(--line); overflow: hidden;}
.management-modal .modal-body .comment-write-wrap textarea {border-radius: 0; border: 0;}
.management-modal .modal-body .comment-write-wrap > div {border-top: 1px dashed var(--line); padding: 0.5rem 0.75rem; display: flex; align-items: center; justify-content: flex-end;}
.management-modal .modal-body .comment-write-wrap > div p {font-size: 0.875rem; color: var(--text3);}
.management-modal .modal-body .comment-write-wrap .btn {border: 0;}

/* 매출현황 */
.sales-status-list .basic_li ul{display: flex; align-items: center; justify-content: space-between; background-color: var(--th); border-radius: 1rem; padding: 1.25rem 1rem; flex-wrap: wrap; gap: 1rem;}
.sales-status-list .basic_li .contract-tit {margin-bottom: 10px;}
.sales-status-list .basic_li:first-child {margin-bottom: 20px;}

/* 실적관리 */
.management-list .performance-wrap .performance-tit {margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: space-between; padding-right: 1rem;}
.management-list .performance-wrap .performance-tit h3{font-weight: bold;}
.management-list .performance-wrap .management-cont {width: 100%; display: flex;}
.management-list .performance-wrap .management-cont > div {width: 50%;}
.management-list .performance-wrap .management-cont.management-table-wrap {overflow-x: auto;}
.management-list .performance-wrap .month-select {min-width: 110px; border: 1px solid var(--line); padding-left: 12px; border-radius: 5px; height: 34px;}
.management-list .performance-wrap .month-select:hover {box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);}

/* 지은 */
/* mypage */
.mypage {width: 100%; border-radius: 5px; border: 1px solid var(--line); padding: 1.8em 2rem;}
.mypage .tit {font-size: 1.25rem; color: var(--text1); padding-bottom: 30px;}

/* input */
.input-wrap {display: flex; flex-direction: column; row-gap: 20px;}
.input-wrap .input-item-box > span {position: relative; padding-bottom: 4px;}
.input-wrap .input-item-box.must > span::after {position: absolute; display: block; top: 0; right: -10px; content: '*'; color: var(--danger-btn-bg);}
.input-wrap .input-item-box .input-item {width: 100%;}
.input-wrap .input-item-box .input-item input[type="text"],
.input-wrap .input-item-box .input-item input[type="password"] {width:100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;}
.input-wrap .input-item-box .input-item input[type="text"]:focus,
.input-wrap .input-item-box .input-item input[type="password"]:focus { border: 1px solid var(--text1);  transition: all 0.3s;}
.input-wrap .input-item-box .input-item input[readonly] {background-color: var(--depth2);}
.input-wrap .input-item-box .input-item input[readonly]:focus {border: 1px solid var(--line); background-color: var(--depth2); pointer-events: none;background-color: #f5f5f5; cursor: default;}
.input-wrap .input-item-box .input-item input[readonly]::placeholder {color: var(--text1);}

.checkbox-item input[type="checkbox"] {display:none;}
.checkbox-item input[type="checkbox"] + label{position: relative; cursor:pointer; color: var(--text1) !important; padding-left: 24px !important;}
.checkbox-item input[type="checkbox"] + label:hover {color: var(--primary) !important; transition: all 0.3s;}
.checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; width:16px; height:16px; border:1px solid var(--line); border-radius: 4px; left:0; top: 50%; transform: translate(0, -50%);}
.checkbox-item input[type="checkbox"]:checked + label:before{ content:""; background-color: var(--primary-btn-bg); border: 1px solid var(--primary-btn-bg); background-image: url('../img/chk.png'); background-repeat: no-repeat; background-position: 50%;}

/* login */
.login-wrap.mbskin {margin: 0 !important; width: auto !important; height: 100vh; display: flex; align-items: center; justify-content: center;}
.login-wrap.mbskin .mbskin_box {width: 420px; display: flex; flex-direction: column; row-gap: 60px;  padding: 60px 50px; border: 1px solid #d4d4d4; border-radius: 40px;}
.login-wrap.mbskin .mbskin_box .login-logo {width: 80%;}
.login-wrap.mbskin .mbskin_box #login_fs {padding: 0; border: 0;}
.login-wrap.mbskin .mbskin_box #login_fs .btn_submit {margin: 0 !important; background-color: var(--primary-btn-bg); color: var(--primary-btn-text); font-weight: normal;}
.login-wrap.mbskin .mbskin_box #login_fs .btn_submit:hover {background-color: var(--primary-btn-hover-bg);}
.login-wrap.mbskin .mbskin_box #login_fs #login_info {display: flex; flex-direction: column; row-gap: 8px;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info:after {display: none;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info .login_if_lpl {text-align: initial;}
.login-wrap.mbskin .mbskin_box #login_fs #login_info .login_if_lpl:hover a {color: var(--primary); transition: all 0.3s;}
.login-wrap.mbskin .input-wrap .input-item-box {display: flex; flex-direction: column; align-items: flex-start;}
.login-wrap.mbskin .input-wrap .input-item-box .input-item input {height: auto !important; margin: 0 !important; box-shadow: none;}
.login-wrap .btn-default {width: 100%; height: 44px !important; font-size: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 16px !important;}
.login-wrap .btn-default.join {border: 1px solid var(--line); background-color: var(--secondary-btn-bg); color: #fff;}
.login-wrap .btn-default.join:hover {background-color: var(--secondary-hover-btn-bg); transition: all 0.3s;}
.login-wrap .checkbox-wrap {padding: 0 4px;}
.login-wrap .btn-wrap {margin-top: 0;}

/* btn */
.btn-wrap {display: flex; column-gap: 10px; margin-top: 40px;}
.btn-sumit {background-color: var(--primary-btn-bg);}
.btn-sumit:hover {background-color: var(--primary-btn-hover-bg);}

/* 테이블 디자인 수정 */
.management-list th {background-color: var(--th);}
.management-list th:first-child {border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
.management-list th:last-child {border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.management-list td {border: 0; border-bottom: 1px solid var(--line2);}
.management-list td:first-child{border-left: 5px solid transparent;}
.management-list td:last-child{border-right: 0;}
.management-list tr:hover td:first-child{border-left: 5px solid #e2f0ff;}
.management-list tr:hover td {background-color: transparent;}

/* 반응형 */
@media screen and (max-width: 1600px) {
  /** 데스크탑1 1600*900 */
  .management-modal .modal-body fieldset label, .management-modal .modal-body fieldset input, .management-modal .modal-body fieldset select {width: calc(100% / 4);}
}
@media screen and (max-width: 1440px) {
  /** 데스크탑2 1440*900 */
  main {padding: 20px;}
  .main-box, .main-box#calendar{padding: 20px;}
  .main-box-wrap {min-height: 50%; height: 30vw;}
  .main-box-wrap.wrap1 {width: 100%; height: auto; min-height: unset;}
  .main-box-wrap.wrap1 .main-bo-list {overflow-y: hidden;}
  .main-box-wrap.wrap2, .main-box-wrap.wrap3 {width: calc(100% / 2 - 20px / 2);}
}
@media screen and (max-width: 1280px) {
    /** 타블렛 가로, 노트북 1280*800 */
    html{font-size: 15px;}
    #hd_wrapper .outlogin {flex: 1; display: flex; justify-content: flex-end;}
    #hd_wrapper .all-menu-wrap {display: block; flex: 1;}
    #hd_wrapper .all-menu-wrap .hover-btn:not(.close-btn) .close-menu,
    #hd_wrapper .all-menu-wrap .hover-btn .open-menu,
    #hd_wrapper .all-menu-wrap .hover-btn:not(.close-btn):hover .all-menu,
    #hd_wrapper .all-menu-wrap .close-btn .all-menu{display: none;}
    #hd_wrapper .all-menu-wrap .hover-btn:not(.close-btn):hover .open-menu{display: inline;}
    #hd_wrapper .all-menu-wrap .close-btn .close-menu {display: inline;}
    #wrapper{position: relative;}
    /* #wrapper.open {overflow-x: auto;} */
    #wrapper::after{transition: opacity 0.3s; opacity: 0; content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; border-radius: 5px; z-index: -1;}
    #wrapper.open::after{opacity: 1; z-index: 1;}
    #wrapper aside {position: absolute; height: 100%; left: -100%;}
    /* #wrapper aside #gnb_1dul {border-radius: 5px;} */
    #wrapper aside.open{left: 0;}
    main {position: absolute; width: 100%; border-left: 1px solid var(--line); border-radius: 5px;}
    /* main.open{left: 220px; border-radius: 0 5px 5px 0; border-left: 0;} */

}
@media screen and (max-width: 1024px) {
  /** 타블렛 가로, 노트북 1024*768 */
  /* main .content-wrapper:not(.main-wrapper) {overflow-x: auto;}
  main .content-wrapper:not(.main-wrapper) > div {min-width: 1000px;} */
  .main-box-wrap.wrap2, .main-box-wrap.wrap3, .main-box-wrap.wrap4, .main-box-wrap.wrap5 {width: 100%; height: auto; min-height: unset;}
  .main-box-wrap.wrap2,.main-box-wrap.wrap3 {max-height: 50vw;}
  .main-box-wrap:not(.wrap2):not(.wrap3) .main-bo-list {overflow-y: hidden;}
  .main-box-wrap .custom-calendar thead,
  .main-box-wrap .custom-calendar tbody,
  .main-box-wrap .custom-calendar tr {width: calc(100vw - 100px);}
  #bo_info{flex-direction: column; row-gap: 0.5rem;}
  .custom-calendar th{width: calc(100% / 7);}
  .custom-calendar thead, .custom-calendar tbody, .custom-calendar tr {width: calc(100vw - 74px);}
  .custom-calendar tr{display: flex;}
  .calendar-post-label {padding: 0.25rem;}
  .calendar-post-label > p span:not(.schedule-count) {font-size: 0;}
  .calendar-post-label > p span i {font-size: 0.875rem;}
  .management-list .sch-form {flex-wrap: wrap;}
  .management-list .sch-form,
  .management-list .etc-wrap label{width: 100%;}
  .fc-button-group {flex-wrap: wrap; justify-content: flex-end;}
  .management-list .etc-wrap label span{width: 30%;}
  .management-list .etc-wrap label input {width: 70%;}
  .management-list .performance-wrap .management-cont {flex-wrap: wrap;}
  .management-list .performance-wrap .management-cont > div {width: 100%;}
}
@media screen and (max-width: 768px) {
  /** 모바일 가로, 타블렛 세로 768*1280 */
  main{padding: 15px;}
  #logo img{height: 35px;}
  .main-box, .main-box#calendar {padding: 15px;}
  .main-box-wrap .custom-calendar thead,
  .main-box-wrap .custom-calendar tbody,
  .main-box-wrap .custom-calendar tr {width: calc(100vw - 83px);}
  #calendar.weekly-calendar .daily-post-box > p, #calendar.weekly-calendar .daily-post-box .calendar-post-group {width: 100%;}
  #ol_after_hd {width: 2rem; height: 2rem;}
  #calendar.weekly-calendar .calendar-header {padding: 10px; padding-bottom: 0;}
  .management-list .sch-btn {width: 34px; padding: 8px;}
  .management-list .sch-btn span {display: none;}
  .management-modal .modal-body fieldset label, .management-modal .modal-body fieldset input, .management-modal .modal-body fieldset select {width: calc(100% / 2);}
}
@media screen and (max-width: 480px) {
  /** 모바일 세로 480*800 */
  html{font-size: 0.875rem;}
  #calendar.weekly-calendar .calendar-header {justify-content: space-between;}
  #calendar.weekly-calendar .calendar-header #monthYear {margin-right: 0; flex:1;}
  #calendar.weekly-calendar .calendar-header #monthYear h4{flex-direction: column-reverse;}
  #calendar.weekly-calendar .calendar-header button {flex-shrink: 0;}
  .management-list .sch-box,
  .management-list .sch-box input {width: 100%;}
  .management-list .sch-form{justify-content: flex-end;}
  .mypage {border-radius: 0; border: 0;padding: 1em 0.8rem;}
  .mypage .btn-wrap {justify-content: flex-end;}
  .login-wrap.mbskin .mbskin_box {width: 100vw; height: 100vh; border: 0; border-radius: 0; justify-content: center; align-items: center; padding: 0px 20px 40vw 20px;}
  .login-wrap.mbskin .mbskin_box > form {width: 100%;}
}