@charset "utf-8";
/*#################### RESET ####################*/
* {margin: 0; padding: 0; box-sizing: border-box; font-family: "NotoSansKR";}
html {width: 100%; height: 100%; font-style: normal; color: var(--neutral900);}
html::-webkit-scrollbar {width: 10px; height: 10px;}
html::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral200); border-radius: 6px;}
html::-webkit-scrollbar-track {background: var(--neutral50); border-radius: 6px;}
body {width: 100%; height: 100%; background-color: #F4F7FC;}
li {list-style: none; }
a:visited, a:link { text-decoration: none; color: var(--neutral900);}
button {border: none; outline: none; cursor: pointer;}
input, select, textarea { border: none; outline: none;}
table {border-spacing: 0px; border-collapse: collapse;}
body.hidden {overflow: hidden;}
p {color: var(--neutral900);}

:root {
  /* color */
  --main: #FF4700;
  --neutral900 : #101828;
  --neutral800 : #1D2939;
  --neutral700 : #344054;
  --neutral500 : #667085;
  --neutral400 : #98A2B3;
  --neutral300 : #D0D5DD;
  --neutral200 : #E4E7EC;
  --neutral100 : #F2F4F7;
  --neutral50 : #F9FAFB;
  --white: #fff;
  --error: #ff0101;
  --success: #00a63a;
  --blue: #2E90FA;

  /* label color */
  /* project lable */
  --project_si : #f097c9;
  --project_own : #579DFF;
  /* dept label */
  --dept_hq : #4BCE97;
  --dept_planning : #6CC3E0;
  --dept_design : #FEA362;
  --dept_development : #94C748;
  --dept_system : #9F8FEF;
  /* label */
  --label_request : #C9372C;
  --label_wait : #98A2B3;
  --label_ing : #4286F5;
  --label_done : #66BD7D;

  /* font */
  --kor: "NotoSansKR";
  --eng: "Montserrat";
}
/* font-face */
@font-face { font-family: "NotoSansKR"; src: url("./fonts/NotoSansKR-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; }
@font-face { font-family: "NotoSansKR"; src: url("./fonts/NotoSansKR-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; }
@font-face { font-family: "NotoSansKR"; src: url("./fonts/NotoSansKR-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Montserrat"; src: url("./fonts/Montserrat-Regular.ttf") format("opentype"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Montserrat"; src: url("./fonts/Montserrat-Medium.ttf") format("opentype"); font-weight: 500; font-style: normal; }
@font-face { font-family: "Montserrat"; src: url("./fonts/Montserrat-SemiBold.ttf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Montserrat"; src: url("./fonts/Montserrat-Bold.ttf") format("opentype"); font-weight: 700; font-style: normal; }
.eng { font-family: "Montserrat"; }


/* #################### COMPONENTS #################### */

.service_direct_link{display:block; padding:10px; text-align:center; border-radius:8px; background-color:#fff; font-size:14px; font-weight:500; color:#000; box-shadow:inset -1px -1px 2px rgb(0 0 0 / 40%), inset 1px 1px 2px rgb(0 0 0 / 40%); transition:background 0.3s;}
.service_direct_link:hover{background-color:#f0f0f0;}

/* wrap */
.wrap {position: relative; top: 0; width: 100%; height: 100%;}
.wrap.main {overflow-y: hidden;}

/* btn */
.button_box {display: flex;}
/* 버튼 크기/기능별 구분 */
button[type="button"] {cursor: pointer; border-radius: 6px; font-size: 14px; font-weight: 400;}
button.btn {width: 100%; padding: 10px;}
button.basic {width: 200px; padding: 10px 0;}
button.works {min-width: max-content; height: 34px; padding: 6px 8px;}
button.log {width: 80px; font-size: 12px;}
button.add {padding: 2px 10px 4px; font-size: 12px !important;}
button.del {width: 30px; height: 30px; padding: 2px;}
button.del img {width: 100%; height: 100%; object-fit: contain;}
button.icon {width: 36px; height: 36px; padding: 5px;}
button.icon.mini {width: 24px; height: 24px; padding: 3px; border-radius: 4px !important;}
button.statusbar {height: 36px; padding: 0 10px; display: flex; justify-content: center; align-items: center; gap: 6px; background: var(--neutral50);}
button.popup_btn {padding: 10px 50px;}

button.stop {padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; border: 1px solid var(--error); background: var(--error); color: var(--white);}
button.header {padding: 8px 20px 10px; border-radius: 999px; background: var(--neutral900); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.03); font-size: 12px; font-weight: 500; color: var(--white);}

.change_password_button {border:none; background-color:#ff8000; color:#fff; box-shadow:inset -2px -2px 4px rgb(0 0 0 / 30%), inset 2px 2px 4px rgb(0 0 0 / 30%); font-size:12px; font-weight:500; cursor:pointer; transition:background 0.3s;}
.change_password_button:hover {background-color:#e17202;}

/* 버튼 색상 별 구분*/
button.main {border: 1px solid var(--main); background-color: var(--main); color: var(--white);}
button.error {border: 1px solid var(--error); color: #fff; background-color:var(--error);}
button.cancel {border: 1px solid var(--neutral100); color: var(--neutral900); background-color: var(--white);}
button.border {border: 1.5px solid var(--neutral200); background-color: var(--white);}
button.disabled {border: 1px solid var(--neutral200); color: #fff; background-color: var(--neutral200);}
button.success {border: 1px solid var(--success); color: #fff; background-color: var(--success);}
button.black {border: 1px solid var(--neutral900); color: #fff; background-color: var(--neutral900);}
button.blue {border: 1px solid var(--blue); background-color: var(--white);}
button.red:disabled {background-color:var(--error); color:#fff;}

/* 버튼 사이즈 별 구분 */
button[type="button"].mini{padding: 4px 8px 5px; white-space: nowrap;}
button[type="button"].small{padding: 10px;}
button[type="button"].medium{padding: 8px 16px;}


/* label */
.label {display: block;}
.label .text {display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label .desc {display: block; font-size: 14px; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--neutral100); background-color: #fff; color: #1A3353; height: 40px; }
.label .help {display: block; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label input, .design_input {width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--neutral100); height: 40px; }
.label input::placeholder{font-size: 12px; font-weight: 400; color: var(--neutral200); }
.label input[readonly], .readonlybox {background-color: #ededed; font-size: 14px; font-weight: 400; border: none; }
.label input[readonly].readonly {border: 1px solid var(--neutral100); background-color: #fff; border-radius: 6px; font-size: 14px; font-weight: 500; }
.label.horizontal {display: flex; align-items: center; }
.label.horizontal .text {flex: none; margin-bottom: 0px; margin-right: var(--label-button-gap); min-width:130px; }
.label_toggle {display: block; position: relative; }
.label_toggle .text {display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label_toggle .desc {display: block; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--neutral100); background-color: #fff; }
.label_toggle .help {display: block; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label_toggle input {width: 100%; padding: 10px 16px; font-size: 14px; font-weight: 400; border-radius: 6px; border: 1px solid var(--neutral200); }
.label_toggle input::placeholder {font-size: 12px; font-weight: 400; color: var(--neutral200);}
.label_toggle img {position: absolute; right: 16px; top: 12px; cursor: pointer; }
.label_toggle img.index {top: 42px;}

/* tab_box */
.tab_box{display:flex; padding-left:12px; gap:4px; margin-bottom:1px; }
.tab_box button{border-radius:0; border-top-left-radius:10px; border-top-right-radius:10px; padding:8px 16px;}
.tab_box button.edit{box-shadow:inset 1px 2px 8px rgb(0 0 0 / 10%), inset -1px -2px 7px rgb(0 0 0 / 20%);}

/* input_box */
.input_box {width: 100%; position: relative;}
/* input_box horizontal */
.input_box.horizontal {display: flex; align-items: center;}
.input_box.horizontal .label {margin-bottom: 0px; margin-right: 20px; flex: none; width: 70px;}
/* input */
input.mini {width: 80px;}
input.small {width: 150px;}
input.medium {width: 300px;}
input.long {width: 500px;}
/* input text */
input[type="text"] {padding: 10px 16px; font-size: 14px; font-weight: 400; background: var(--white); border: 1px solid var(--neutral200); border-radius: 6px;}
input[type="text"].works {width: 100%; padding: 6px 10px; font-size: 14px; font-weight: 400; border: 1px solid var(--neutral200); border-radius: 6px;}
input[type="text"].link {width: 100%; padding: 6px 70px 6px 10px; font-size: 14px; font-weight: 400; border: 1px solid var(--neutral200); border-radius: 6px;}
input[type="text"].edit {width: 100%;}
input[type="text"].minw476 {min-width: 476px !important;}
input[type="text"].date_view {padding: 10px 0; width: 100%; border: none;}

input[type="text"].payment {width: 100%; padding: 6px 10px; font-size: 14px; font-weight: 400; border: 1px solid var(--neutral200); border-radius: 6px; color: var(--error);}
input[type="text"].label_project {width: 100%; padding: 6px 10px; font-size: 12px; font-weight: 400; border: none; border-radius: 6px;}
input[type="text"]::placeholder {font-size: 12px; font-weight: 400; color: var(--neutral200);}
input[type="text"]:disabled, input[type="text"]:read-only {background: var(--neutral200); border: 1px solid var(--neutral300);}
input[type="text"]:disabled::placeholder, input[type="text"]:read-only::placeholder {color:var(--neutral400);}
input[type="text"].works:disabled, input[type="text"].works:read-only {background: var(--neutral100) !important; border: 1px solid var(--neutral200) !important; color: var(--neutral500) !important; cursor:inherit;}
input[type="text"].date_view:disabled, input[type="text"].date_view:read-only {background: transparent; border: none;}
input[type="text"].date_view:disabled::placeholder, input[type="text"].date_view:read-only::placeholder {color: var(--neutral200);}

input[type="text"].payment:disabled, input[type="text"].payment:read-only {background: var(--neutral100) !important; border: 1px solid var(--neutral200) !important; color: var(--success) !important;}
input[type="text"].input_datepicker.disabled {background: var(--neutral200) !important; border: 1px solid var(--neutral200) !important;}
input[type="text"].input_datepicker.disabled::placeholder {color:var(--neutral300) !important;}
input[type="text"].hidden {width: 100%; height: 100%; padding: 0; border: none; cursor: pointer;}
input[type="text"].hidden.schedule {min-width: 72px; max-width: 72px; text-align: center; background: transparent !important;}
input[type="text"].hidden.schedule_request {width: auto; max-width: 72px; text-align: center; background: transparent !important;}
input[type="text"].hidden.schedule::placeholder {text-align: center;}
input[type="text"].hidden.pay::placeholder {color: var(--error);}
input[type="text"].hidden:read-only {background: #fff; border: none;}
input[type="text"].joindate:read-only {background: #fff !important; border: 1px solid var(--neutral200) !important;}

.btn_remove_value {width: 34px; height: 100%; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; cursor: pointer;}
.btn_remove_value img {width: 60%; height: 60%; padding-top: 2px;}
.pay_maintenance_txt {position: absolute; top: 50%; left: 10px; transform: translateY(-50%); font-size: 14px; font-weight: 400; color: var(--neutral500)}
.datepicker_cal {position: absolute; top: 50%; left: 10px; transform: translateY(-50%);}

/* radio_box */
.radio_box {width: 100%;}
input[type="radio"]{-webkit-appearance: none; width: 16px; height: 16px; border: 2px solid var(--neutral200); border-radius: 50%; flex: none;}
input[type="radio"]:checked{-webkit-appearance: none; border: 2px solid var(--main); border-radius: 50%;}
input[type='radio']:before {content:''; display: block; width: 50%; height: 50%; margin: 25% auto; border-radius: 50%;}
input[type='radio']:checked:before {background:var(--main);}
.radio_box label {min-width: 40px; font-size: 14px; font-weight: 400;}
.radio_box.status {width: 33.33%;}
.radio_box.custom {min-width: 70px; border-radius: 10px; cursor: pointer;}
input[type="radio"].period {display: none;}
.radio_box.custom > label{width: 100%; height: -webkit-fill-available; margin: 0 auto; padding: 10px 16px; display: block; border: 1px solid var(--neutral200); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--fran_inactive); text-align: center; cursor: pointer;}
.radio_box.custom .period:checked + label{background: var(--main); border: none; color: var(--white);}

/* check_box */
.check_box {width: auto}
.check_box.horizontal {min-width: 80px; height: 100%; display: flex; align-items: center; gap: 6px;}
.check_box.alone {height: 100%; display: flex; justify-content: center; align-items: center; border: none;}
.check_box.chk_bg {margin-right: 40px; padding: 6px 0 8px; justify-content: center; background-color: var(--neutral100); border-radius: 6px;}
input[type="checkbox"] {-webkit-appearance: none; position: relative; width: 16px; min-width: 16px; height: 16px; cursor: pointer; outline: none; border: 2px solid var(--neutral300); border-radius: 4px;}
input[type="checkbox"].card_chkbox {border: 1px solid var(--neutral200);}
input[type="checkbox"]::before {background-image: url("../img/svg/icon_chk.svg"); width: 70%; height: 70%; background-repeat: no-repeat; background-position: center; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
input[type="checkbox"]:checked { background-color: var(--main); border: none; }
.check_box label {font-size: 14px;}
.check_box.leader input[type="checkbox"] {border: 2px solid var(--error);}
.check_box.leader label {color: var(--error);}

/* file_box */
.file_box {width: 100%;}
.file_box.file_box_contract {width: 500px; height: 42px; display: flex; align-items: center; gap: 10px;}
input[type="file"] {width: 0; height: 0; padding: 0; position: absolute; border: 0; overflow: hidden;}
input.upload_file_name {width: 100%; padding: 10px 16px; font-size: 14px; font-weight: 400; background: var(--white); border: 1px solid var(--neutral200); border-radius: 6px; cursor:inherit;}
input.upload_file_name::placeholder {font-size: 12px; font-weight: 400; color: var(--neutral200);}
.file_box label {cursor: pointer; padding: 10px; display: flex; justify-content: center; align-items: center; background: var(--white); border: 1px solid var(--neutral200); border-radius: 6px; font-size: 14px; font-weight: 400;}
.file_box label.file_contract {width: 100%; height: 100%; padding: 0; border: 1px solid var(--blue); color: var(--blue);}
.file_box label.file_contract.file_change {background: var(--neutral50); border: 1px solid var(--neutral200); color: var(--neutral900);}
.file_remove {display: flex; align-items: center;}

/* datepicker */
input.input_datepicker{cursor: pointer;}
.datepicker, .datepicker2, .datepicker_own {width: 100%; margin: 0 5px 10px 0;}

/* timepicker */
input.timepicker{width: 40% !important; cursor: pointer;}

/* input_search_box */
.search_box {position: relative;}
.search_box img {position: absolute; top: 5px; right: 8px; cursor: pointer;}
.search_box input {width: 100%; border-radius: 6px; border: 1px solid var(--neutral200); font-weight: 400;}
.search_box input.list_search {min-width: 300px; height: 30px; padding: 4px 34px 4px 8px; font-size: 12px;}
.search_box input::placeholder { font-size: 12px; font-weight: 400; color: var(--neutral200); }
/* input */
input.search { padding: 8px 16px; height: 42px; border: 1px solid var(--neutral100); border-radius: 8px; font-size: 14px; font-weight: 500; }
input.search::placeholder { font-size: 14px; font-weight: 500; color: var(--neutral200); }
input.search:focus { border-color: var(--main); }
input.search_account { min-width: 300px; }

/* textarea_box */
.textarea_box {width: 100%;}
.textarea_box.horizontal {display: flex; align-items: start;}
textarea {width: 100%; height: auto; min-height: 200px; padding: 10px; border-radius: 6px;}
textarea::placeholder {font-size: 12px; font-weight: 400; color: var(--neutral200);}
textarea.readonly {-ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; cursor: inherit;}
textarea.notice {min-height: 500px; border: 1px solid var(--neutral200);}

/* toggleSlideButton */
.toggleSlideButton { position: relative; display: inline-block; width: 60px; height: 30px; padding: 2px; border: 1px solid #f1f1f1; border-radius: 30px; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.03); cursor: pointer; transition: all 0.3s; flex: none; }
.toggleSlideButton:after { content: ""; display: block; width: 24px; height: 24px; border-radius: 24px; background-color: #dadada; transition: all 0.3s; }
.toggleSlideButton:before { content: "OFF"; display: block; font-size: 12px; font-weight: bold; font-style: normal; position: absolute; right: 6px; top: 50%; transform: translate(0, -50%); transition: all 0.3s; }
.toggleSlideButton.active { background-color: #1a73e8; }
.toggleSlideButton.active:before { content: "ON"; transform: translate(-28px, -50%); color: #fff; }
.toggleSlideButton.active:after { background-color: #fff; transform: translateX(30px); }
.toggleSlideButton input[type="checkbox"] { display: none; }
.toggleSlideButton_guide { position: relative; display: inline-block; width: 60px; height: 30px; padding: 2px; border: 1px solid #f1f1f1; border-radius: 30px; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.03); cursor: pointer; transition: all 0.3s; flex: none; }
.toggleSlideButton_guide:after { content: ""; display: block; width: 24px; height: 24px; border-radius: 24px; background-color: #dadada; transition: all 0.3s; }
.toggleSlideButton_guide:before { content: ""; display: block; font-size: 12px; font-weight: bold; font-style: normal; position: absolute; right: 6px; top: 50%; transform: translate(0, -50%); transition: all 0.3s; }
.toggleSlideButton_guide.active { background-color: #1a73e8; }
.toggleSlideButton_guide.active:before { content: ""; transform: translate(-28px, -50%); color: #fff; }
.toggleSlideButton_guide.active:after { background-color: #fff; transform: translateX(30px); }
.toggleSlideButton_guide input[type="checkbox"] { display: none; }

/* select */
select {font-size: 14px; font-weight: 400; border-radius: 6px; cursor: pointer;}
select.basic {min-width: 140px; padding: 10px; border: 1px solid var(--neutral200);}
select.num {height: 30px; padding: 4px 6px; background: #fff !important; border: 1px solid var(--neutral500); border-radius: 6px; font-size: 12px;}
select.medium {min-width: 200px; padding: 10px; border: 1px solid var(--neutral200);}
select.long {min-width: 500px; padding: 10px 16px; border: 1px solid var(--neutral200); background: #fff !important;}
select.list {min-width: 100px; height: 30px; padding: 4px 20px 4px 8px; background: #fff !important; border: 1px solid var(--neutral200); font-size: 12px;}
select.statusbar {min-width: 240px; height: 36px; padding: 0 6px; background: var(--neutral50);}
select.edit {min-width: 400px; height: 42px; padding: 10px 16px; border: 1px solid var(--neutral200); font-size: 14px; background: #fff !important;}
select.edit2 {min-width: 200px; height: 42px; padding: 10px 16px; border: 1px solid var(--neutral200); font-size: 14px; background: #fff !important;}
select:disabled {color: var(--neutral900);}
select.disabled {background: var(--neutral100) !important; border: 1px solid var(--neutral200) !important; color: var(--neutral500) !important;}
select.disabled2 {background: var(--neutral200) !important; border: 1px solid var(--neutral300) !important; cursor:inherit;}

/* breadcrumb */
.breadcrumb {width: 100%; display: flex; padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #ccc; }
.breadcrumb li { display: flex; font-weight: 500; }
.breadcrumb li:first-child { font-size: 16px; font-weight: 700; }
.breadcrumb li:first-child:after { content: "-"; display: block; margin: 0 8px; }
.breadcrumb li:after { content: ">"; display: block; margin: 0 8px; }
.breadcrumb li:last-child:after { content: ""; display: none; }

/* pagination */
.pagination {padding: 0 10px; display: flex; justify-content: flex-end; align-items: center; gap: 4px; width: 100%;}
.pagination li {width: 30px; height: 30px; border: 1px solid var(--neutral200); border-radius: 6px;}
.pagination li a {width: 100%; height: 100%; padding-bottom: 2px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 400; cursor: pointer;}
.pagination .item.active {background-color: var(--main); color:var(--white);}
.pagination .item.active a {color:var(--white);}

.pagination .prev a{width: 100%; height: 100%; padding-bottom: 0; background: url("../img/svg/ic-arrow_left_active.svg") no-repeat center;}
.pagination .prev.disable a {background: url("../img/svg/ic-arrow_left.svg") no-repeat center;}
.pagination .next a {width: 100%; height: 100%; padding-bottom: 0; background: url("../img/svg/ic-arrow_right_active.svg") no-repeat center;}
.pagination .next.disable a {background: url("../img/svg/ic-arrow_right.svg") no-repeat center;}

.pagination .first a{width: 100%; height: 100%; padding-bottom: 0; background: url("../img/svg/icon_arrow_left_double_active.svg") no-repeat center;}
.pagination .first.disable a{width: 100%; height: 100%; padding-bottom: 0; background: url("../img/svg/icon_arrow_left_double.svg") no-repeat center;}
.pagination .last a {width: 100%; height: 100%; padding-bottom: 0; background: url("../img/svg/icon_arrow_right_double_active.svg") no-repeat center;}
.pagination .last.disable a {width: 100%; height: 100%; padding-bottom: 0; background: url("../img/svg/icon_arrow_right_double.svg") no-repeat center;}


/* table */
table {width: 100%;}
/* table, th, td {border: none;} */
thead tr {border-bottom: 2px solid var(--neutral200);}
th {width: max-content; padding: 12px; text-align: center; font-size: 14px; font-weight: 500; white-space: nowrap;}
th.mini, td.mini {width: 50px;}
th.small, td.small {width: 80px;}
th .icon_box {width: 20px; height: 20px;}
th .icon_box_mini {width: 12px; height: 8px;}
th .icon_box > img {width: 100%; height: 100%; object-fit: contain;}
tbody tr {border-bottom: 1px solid var(--neutral100);}
td {width: max-content; padding: 12px; font-size: 14px; font-weight: 400; text-align: center; color: var(--neutral700);}
td.null_data {height: 300px;}
td .icon_box {width: 20px; height: 20px; cursor: pointer; margin: 0 auto;}
td .icon_box > img {width: 100%; height: 100%; object-fit: contain;}

.account_list tbody tr:hover {background: var(--main); cursor: pointer;}
.account_list tbody tr:hover td {color: #fff;}
.card.main_notice table {margin-top: 6px; border-top: 2px solid var(--neutral200); border-bottom: 2px solid var(--neutral200);}
.card.main_notice th, .card.main_notice td {padding: 8px 10px;}
.main_notice_title {width: 250px !important; max-width: 250px; text-align: left !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
td.new {width: 70px; height: 100%;}
td.new > span{padding: 1px 4px 2px; background: var(--error); border-radius: 4px; font-size: 10px; font-weight: 400; color: #fff;}

.work_request_list {min-width: 1200px;}
.th_first, .td_first {min-width: 300px; text-align: left;}
.th_title, .td_title {min-width: 600px; text-align: left;}
.notice_list th, .notice_list td {padding: 6px 12px !important;}

.admin_table table, .admin_table th, .admin_table td {border: 1px solid var(--neutral100);}
.admin_table th {background: var(--neutral50);}
.authority th > div {display: flex; justify-content: center; align-items: center; gap: 6px;}
.authority td {padding: 6px !important;}
.authority td > div {display: flex; justify-content: center; align-items: center; gap: 6px;}

#calendar table tbody tr:hover, .notice_list table tbody tr:hover {background: none !important;}
#calendar table tbody tr:hover td, .notice_list table tbody tr:hover td {color: var(--neutral900) !important;}

#fullcalendar table {background: var(--white) !important;}
#fullcalendar th, #fullcalendar td {border: 1px solid var(--neutral100) !important;}

.contract_order_receive tbody tr, .contract_order_place tbody tr, .notice_list tbody tr {cursor: pointer !important;}

/* #################### ATOMIC CSS #################### */

/* display */
.d_none {display: none !important;}
.d_block {display: block !important;}
.d_inlineblock {display: inline-block;}
.d_flex {display: flex !important;}
.d_grid {display: grid;}
.display_none {display: none !important;}
.display_block {display: block !important;}

/* grid */
.grid_2 {grid-template-columns: repeat(2, 1fr);}
.grid_3 {grid-template-columns: repeat(3, 1fr);}
.grid_4 {grid-template-columns: repeat(4, 1fr);}
.grid_5 {grid-template-columns: repeat(5, 1fr);}
.grid_6 {grid-template-columns: repeat(6, 1fr);}
.grid_7 {grid-template-columns: repeat(7, 1fr);}
.grid_8 {grid-template-columns: repeat(8, 1fr);}
.grid_gap_10 {grid-gap: 10px;}
.grid_gap_20 {grid-gap: 20px;}
.grid_gap_30 {grid-gap: 30px;}
.grid_gap_40 {grid-gap: 40px;}
.grid_col_1 {grid-column: span 1;}
.grid_col_2 {grid-column: span 2;}
.grid_col_3 {grid-column: span 3;}
.grid_col_4 {grid-column: span 4;}
.grid_col_5 {grid-column: span 5;}
.grid_col_6 {grid-column: span 6;}

/* flex */
.flex {display: flex;}
.flex_basic {display: flex; align-items: center;}
.flex_center {display: flex; justify-content: center; align-items: center;}
.flex_between {display: flex; justify-content: space-between; align-items: center;}
.flex_around {display: flex; justify-content: space-around; align-items: center;}
.flex_evenly {display: flex; justify-content: space-evenly; align-items: center;}
.flex_start {display: flex; justify-content: flex-start; align-items: center;}
.flex_end {display: flex; justify-content: flex-end; align-items: center;}
.flex_none {flex: none; }
.flex_col {display: flex; flex-direction: column;}
.flex_wrap {display: flex; flex-wrap: wrap;}
.flex_start_start {display: flex; justify-content: flex-start; align-items: start;}
.flex_start_end {display: flex; justify-content: flex-start; align-items: end;}
.flex_center_start {display: flex; justify-content: center; align-items: start;}
.flex_center_end {display: flex; justify-content: center; align-items: end;}
.flex_between_start {display: flex; justify-content: space-between; align-items: start;}
.flex_between_end {display: flex; justify-content: space-between; align-items: end;}

/* float */
.float_left {float: left;}

/* gap */
.gap4{gap:4px;}
.gap6{gap:6px;}
.gap10{gap:10px;}
.gap20{gap:20px;}
.gap30{gap:30px;}
.gap40{gap:40px;}
.gap50{gap:50px;}
.gap100{gap:100px;}

.grid_itmes_center {place-items: center;}

/* position */
.position_relative {position: relative;}
.position_center {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

/* color */
.color_main {color: var(--main) !important;}
.color_neutral900 {color: var(--neutral900);}
.color_neutral500 {color: var(--neutral500);}
.color_neutral400 {color: var(--neutral400);}
.color_neutral300 {color: var(--neutral300);}
.color_neutral200 {color: var(--neutral200);}
.color_neutral100 {color: var(--neutral100);}
.color_white {color: var(--white);}
.color_error {color: var(--error) !important;}
.color_success {color: var(--success) !important;}
.color_blue {color: var(--blue) !important;}
.color_link {color:blue;}

.color_si {color: var(--project_si);}
.color_own {color: var(--project_own);}

/* label color */
/* dept label */
.label_dept_hq {background: var(--dept_hq); color: var(--white);}
.label_dept_planning {background: var(--dept_planning); color: var(--white);}
.label_dept_design {background: var(--dept_design); color: var(--white);}
.label_dept_development {background: var(--dept_development); color: var(--white);}
.label_dept_system {background: var(--dept_system); color: var(--white);}
/* label */
.label_request {background: var(--label_request); color: var(--white);}
.label_hold {background: var(--label_wait); color: var(--white);}
.label_wait {background: var(--label_wait); color: var(--white);}
.label_ing {background: var(--label_ing); color: var(--white);}
.label_done {background: var(--label_done); color: var(--white);}

/* border color */
.border_request {border-color: var(--label_request) !important; box-shadow: 0 0 2px 1px var(--label_request) !important;}
.border02 {border-color: var(--label02); box-shadow: 0 0 2px 1px var(--label02);}
.border03 {border-color: var(--label03); box-shadow: 0 0 2px 1px var(--label03);}

/* bg */
.bg_black {background-color: var(--neutral900);}
.bg_white {background-color: var(--white);}
.bg_neutral400 {background-color: var(--neutral400) !important;}

/* text */
.error_txt{font-size: 12px; font-weight: 400; color: var(--error);}
.success_txt{font-size: 12px; font-weight: 400; color: var(--success);}

/* text-decoration */
.line_through {text-decoration: line-through}

/* pointer */
.cursor_pointer {cursor: pointer;}

/* font-size */
.font_10 {font-size: 10px;}
.font_11 {font-size: 11px;}
.font_12 {font-size: 12px;}
.font_13 {font-size: 13px;}
.font_14 {font-size: 14px !important;}
.font_15 {font-size: 15px;}
.font_16 {font-size: 16px !important;}
.font_17 {font-size: 17px;}
.font_18 {font-size: 18px;}
.font_19 {font-size: 19px;}
.font_20 {font-size: 20px;}
.font_24 {font-size: 24px;}
.font_26 {font-size: 26px;}

/* font-weight */
.thin { font-weight: 100 !important; }
.light { font-weight: 300 !important; }
.regular { font-weight: 400 !important; }
.medium { font-weight: 500 !important; }
.semi_bold { font-weight: 600 !important; }
.bold { font-weight: 700 !important; }

/* text-align */
.text_center {text-align: center;}
.text_left {text-align: left;}
.text_right { text-align: right;}
.underline {text-decoration: underline;}

/* width */
.w_max {width: max-content;}
.w_15 {width: 15%;}
.w_25 {width: 25%;}
.w_33 {width: 33%;}
.w_50 {width: 50%;}
.w_100 {width: 100%;}
.w70 {width: 70px !important;}
.w80 {width: 80px;}
.w90 {width: 90px;}
.w100 {width: 100px;}
.w200 {width: 200px;}
.w210 {width: 210px !important;}
.w300 {width: 300px !important;}
.w400 {width: 400px;}
.w500 {width: 500px;}
.w600 {width: 600px;}
.minw0 {min-width: 0 !important;}
.minw30 {min-width: 30px !important;}
.minw40 {min-width: 40px !important;}
.minw50 {min-width: 50px !important;}
.minw60 {min-width: 60px;}
.minw70 {min-width: 70px;}
.minw80 {min-width: 80px;}
.minw100 {min-width: 100px;}
.minw120 {min-width: 120px !important;}
.minw150 {min-width: 150px;}
.minw160 {min-width: 160px;}
.minw180 {min-width: 180px;}
.minw300 {min-width: 300px !important;}
.minw400 {min-width: 400px !important;}
.minw600 {min-width: 600px !important;}
.minw800 {min-width: 800px !important;}
.maxw50 {max-width: 50px !important;}
.maxw400 {max-width: 400px;}
.maxw500 {max-width: 500px;}
.maxw1000 {max-width: 1200px;}

/* height */
.h_auto {height: auto;}
.h_100 {height: 100%;}
.h_100svh {height: calc(100svh - 100px);}
.h30 {height: 30px;}
.h34 {height: 34px;}
.minh500 {min-height: 500px;}

/* margin */
.m0auto{margin: 0 auto !important;}
.m0{margin: 0 !important;}
.m10{margin: 10px;}
.m20{margin: 20px;}
.m30{margin: 30px;}
.m40{margin: 40px;}
.mt2{margin-top: 2px;}
.mt4{margin-top: 4px;}
.mt6{margin-top: 6px;}
.mt10{margin-top: 10px;}
.mt14{margin-top: 14px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt80{margin-top: 80px;}
.mb2{margin-bottom: 2px}
.mb4{margin-bottom: 4px}
.mb10{margin-bottom: 10px}
.mb20{margin-bottom: 20px}
.mb30{margin-bottom: 30px}
.mb40{margin-bottom: 40px}
.mb50{margin-bottom: 50px}
.ml4{margin-left: 4px;}
.ml10{margin-left: 10px;}
.ml14{margin-left: 14px;}
.ml20{margin-left: 20px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.mr4{margin-right: 4px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}
.mr80{margin-right: 80px;}
.mx10{margin: 0 10px;}
.mx20{margin: 0 20px;}
.mx30{margin: 0 30px;}
.mx40{margin: 0 40px;}
.mx50{margin: 0 50px;}
.my6{margin: 6px 0;}
.my10{margin: 10px 0;}
.my14{margin: 14px 0;}
.my20{margin: 20px 0;}
.my30{margin: 30px 0;}
.my40{margin: 40px 0;}
.my50{margin: 50px 0;}

/* padding */
.p0 {padding: 0;}
.p6 {padding: 6;}
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p30 {padding: 30px;}
.p40 {padding: 40px;}
.pt6 {padding-top: 6px;}
.pt10 {padding-top: 10px;}
.pt14 {padding-top: 14px;}
.pt20 {padding-top: 20px;}
.pt30 {padding-top: 30px;}
.pb2 {padding-bottom: 2px}
.pb10 {padding-bottom: 10px}
.pb20 {padding-bottom: 20px}
.pb30 {padding-bottom: 30px}
.pb40 {padding-bottom: 40px}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl40 {padding-left: 40px !important;}
.pr5 {padding-right: 5px;}
.pr10 {padding-right: 10px;}
.pr20 {padding-right: 20px;}
.pr30 {padding-right: 30px;}
.px4 {padding-left: 4px !important; padding-right: 4px !important;}
.px10 {padding-left: 10px !important;; padding-right: 10px !important;;}
.px20 {padding-left: 20px; padding-right: 20px;}
.px30 {padding-left: 30px; padding-right: 30px;}
.px40 {padding-left: 40px; padding-right: 40px;}
.px50 {padding-left: 50px; padding-right: 50px;}
.py4 {padding-top: 4px !important;; padding-bottom: 4px !important;;}
.py10 {padding-top: 10px; padding-bottom: 10px;}
.py14 {padding-top: 14px; padding-bottom: 14px;}
.py20 {padding-top: 20px; padding-bottom: 20px;}
.py30 {padding-top: 30px; padding-bottom: 30px;}

/* border */
.border_t {border-top: 1px solid var(--neutral100);}
.border_b {border-bottom: 1px solid var(--neutral100);}

/* ellipsis */
.ellipsis {overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap;}
.ellipsis2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* overflow */
.of_hidden {overflow: hidden;}
.white_space_nowrap {white-space: nowrap;}

/* rotate */
.rotate_180 {transform: rotate(180deg) !important;}

/* #################### common component #################### */


/* header section */
.header_box {width: 100%; height: 60px; padding: 0 12px; position: fixed; top: 0; z-index: 600; background-color: #fff; border-bottom: 1px solid var(--neutral100);}

/* header */
.header_wrap {width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; position: relative;}
.gnb_logo{width: auto; height: 100%; cursor: pointer;}
.gnb_logo img{width: 30px; display: block; object-fit: cover;}
.logo_text {font-size: 20px; font-weight: 500; color: var(--main); text-align: center;}
.nav_bar {display: flex; justify-content: end; align-items: center; gap: 20px;}
.nav_bar > li {cursor: pointer;}
.nav_icon {width: 24px; height: 24px;}
.nav_icon.contract {background: url(../img/svg/clipboard.svg);}
.nav_bar > li.active .nav_icon.contract {background: url(../img/svg/clipboard_active.svg);}
.nav_icon.project {background: url(../img/svg/3-layers.svg);}
.nav_bar > li.active .nav_icon.project {background: url(../img/svg/3-layers_active.svg);}
.nav_icon.workspaces {background: url(../img/svg/layout.svg) no-repeat 50% 50%;}
.nav_bar > li.active .nav_icon.workspaces {background: url(../img/svg/layout_active.svg);}
.nav_icon.request {background: url(../img/svg/inbox.svg);}
.nav_bar > li.active .nav_icon.request {background: url(../img/svg/inbox_active.svg);}
.nav_icon.payment {background: url(../img/svg/pie-chart.svg);}
.nav_bar > li.active .nav_icon.payment {background: url(../img/svg/pie-chart_active.svg);}
.nav_icon.payment {background: url(../img/svg/pie-chart.svg);}
.nav_bar > li.active .nav_icon.payment {background: url(../img/svg/pie-chart_active.svg);}
.nav_icon.notice_board {background: url(../img/svg/list.svg);}
.nav_bar > li.active .nav_icon.notice_board {background: url(../img/svg/list_active.svg);}
.nav_bar > li.active > p {color: var(--blue);}
.nav_side_icon {width: 30px; height: 30px; cursor: pointer; position: relative;}
.nav_side_icon > img {width: 100%; height: 100%; object-fit: contain;}
.nav_alarm_num {width: 20px; height: 20px; position: absolute; bottom: -4px; right: -4px; display: flex; justify-content: center; align-items: center; background: var(--error); border-radius: 100px;}
.nav_alarm_num > p {font-size: 10px; font-weight: 400; color: #fff;}

/* slider section */
#incb {height: 100%; min-height: calc(100svh - 60px); background: var(--neutral800); box-shadow: 0px 0px 5px #444; position: fixed; top: 60px; left: 0; bottom: 0; z-index: 400; transition: left 1s 0.2s;}
#incb.active {left: -210px; transition: left 1s 0.2s;}
/* slider */
.slider_wrap {min-width: 220px; width: 220px; height: 100% !important;}
.slider_info {padding: 10px; display: flex; align-items: center; gap: 10px; background: var(--neutral700);}
.slider_info .info_img {width: 50px; height: 50px; border: 2px solid var(--main); border-radius: 999px;}
.slider_info .info_img > img {width: 100%; height: 100%; border-radius: 999px; object-fit: cover;}
.slider_info .info_txt > p {font-size: 14px; font-weight: 500; color: #fff;}
.slider_menu {padding: 10px; background: var(--neutral800)}
.slider_menu > li.active {overflow: hidden;}
.slider_menu .slider_main {padding: 10px; display: flex; justify-content: space-between; align-items: center; cursor: pointer;}
.slider_menu > li.active .slider_main {background-color: var(--main); border-radius: 4px;}
.slider_menu .slider_main > img {transform: rotate(0deg); transition: all 500ms;}
.slider_menu .slider_main_icon {width: 24px; height: 24px;}
.slider_menu .slider_main p {font-size: 14px; font-weight: 400; color: var(--white);}
.slider_menu .slider_sub {margin-left: 40px; padding-left: 4px; border-left: 2px solid var(--white);}
.slider_menu .slider_sub > li {padding: 6px 10px; display: flex; align-items: center; gap: 10px; border-radius: 4px; cursor: pointer;}
.slider_menu .slider_sub > li.active {background-color: var(--neutral500);}
.slider_menu .slider_sub > li > p {font-size: 14px; font-weight: 400; color: #fff;}
.slider_menu .slider_line {width: 100%; height: 1px; margin: 10px 0; background: var(--white);}
.slider_toggle_btn {width: 30px; height: 30px; padding: 5px 6px 5px 4px; position: absolute; top: 30px; right: -15px; border-radius: 999px; background: var(--neutral900); box-shadow: 0px 0px 3px 1px var(--neutral100); cursor: pointer; transition: transform 1s 0.2s;}
.slider_toggle_btn.active {transform: rotate(180deg);}

/* right slider section */
#incb_right {height: calc(100svh - 60px); min-height: calc(100svh - 60px); background: var(--neutral800); box-shadow: 0px 0px 5px #444; position: fixed; top: 60px; right: -220px; bottom: 0; z-index: 550; transition: right 1s 0.2s;}
#incb_right.active {right: 0px; transition: right 1s 0.2s;}
.right_slider_section {height: 100%;}
/* right slider */
.right_slider_wrap {min-width: 220px; width: 230px; height: 100% !important; overflow: hidden;}
.right_slider_info {padding: 12px; display: flex; align-items: center; flex-direction: column; background: var(--neutral700);}
.right_slider_member_list {height: calc(100% - 136px); padding: 10px 4px 10px 10px; background: var(--neutral800);}
.right_slider_member_list > ul {height: 100%; padding-right: 6px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto;}
.right_slider_member_list > ul::-webkit-scrollbar {width: 4px;}
.right_slider_member_list > ul::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral400); border-radius: 10px;}
.right_slider_member_list > ul::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
.right_slider_toggle_btn {width: 30px; height: 30px; padding: 5px 6px 5px 4px; position: absolute; top: 30px; left: -15px; border-radius: 999px; background: var(--neutral900); box-shadow: 0px 0px 3px 1px var(--neutral100); cursor: pointer; transition: transform 1s 0.2s;}
.right_slider_toggle_btn.active {transform: rotate(180deg);}

/* status bar */
/* .status_bar {width: calc(100% - 220px); height: 70px; padding: 4px 24px; margin-left: 220px; transition: width 1s 0.2s, margin-left 1s 0.2s; background: var(--neutral200); display: flex;  align-items: center; justify-content: space-between; gap: 50px;} */
.status_bar {width: 100%; height: 70px; padding-right: 32px; position: sticky; top: 60px; z-index: 500; display: flex; align-items: center; justify-content: space-between; gap: 50px; background: var(--neutral200);}
.status_bar.active {width: calc(100% - 10px); margin-left: 10px; transition: width 1s 0.2s, margin-left 1s 0.2s;}
.status_my_info {min-width: 200px; height: 70px; padding: 10px; display: flex; align-items: center; gap: 10px; background: var(--neutral700);}
.status_my_info .info_txt > p {font-size: 14px; font-weight: 400; color: #fff;}
.status_area {padding-left: 14px; display: flex; flex-direction: column; gap: 4px;}
.status_area2 {padding-left: 14px; display: flex; align-items: center; gap: 20px;}
.status_bar ul > li {font-size: 14px; font-weight: 400;}
.status_bar .project_label {padding: 4px 10px; display: flex; justify-content: center; align-items: center; border-radius: 6px; font-size: 10px; font-weight: 400;}

/* content */
.content {width: 100%; height: auto; position: relative; background-color: var(--neutral100);}
/* .content_inner {width: calc(100% - 220px); min-height: calc(100svh - 60px); margin-left: 220px; transition: width 1s 0.2s, margin-left 1s 0.2s; padding: 20px 24px; height: auto; position: relative; overflow: auto;} */
.content_inner {width: 100%; height: auto; min-height: calc(100svh - 70px); padding: 80px 34px 50px 24px; position: relative; overflow: auto;}
.content_inner.right {width: calc(100% - 220px); min-height: calc(100svh - 60px); height: auto; margin-right: 220px; transition: margin-right 1s 0.2s; padding: 20px 24px; position: relative; overflow: auto;}
.content_inner.active {width: calc(100% - 10px); margin-left: 10px; transition: width 1s 0.2s, margin-left 1s 0.2s;}
.content_inner.request_board {display: flex; align-items: start; gap: 50px;}
.content_inner.project_board > div {width: 1500px; min-width: 1500px;}
.content_inner.contract_edit, .content_inner.project_edit {width: 1400px; min-width: 1400px;}
.content_inner.calendar {min-height: calc(100svh - 70px); display: flex; padding: 0;}
.content_inner::-webkit-scrollbar {height: 6px;}
.content_inner::-webkit-scrollbar-thumb {background: var(--neutral500); border-radius: 6px;}
.content_inner::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 6px;}
.content_title {width: 100%; margin-bottom: 10px; font-size: 16px; font-weight: 500;}
.content_intro {height: calc(100svh - 100px); display: flex; justify-content: center; align-items: center; gap: 50px;}
.right_area {min-width: 400px;}
.calendar_section_left {width: 300px; min-width: 300px; min-height: calc(100svh - 130px); padding: 70px 10px 10px; background: #fff;}
.calendar_section_right {width: 100%; min-width: calc(100% - 300px); padding: 80px 30px 40px 20px;}

/* footer */
.footer_box {width: 500px; height: 20px; position: absolute; left: 20px; bottom: 0;}
.footer_box.calendar {left: 320px;}
.footer {position: absolute; bottom: 10px;}
.footer_inner {width: 100%; margin: auto;}
.footer_common_layout {padding: 0 20px;}

/* card */
.card {min-width: 1300px; background-color: #fff; border-radius: 8px; box-shadow: 0px 0px 4px 2px var(--neutral100);}
.card.null {height: 60px; display: flex; justify-content: center; align-items: center; border: 1.5px dashed var(--neutral300); box-shadow: none; background: transparent; font-size: 14px; font-weight: 400;}
.card.main {min-width: 1100px;}
.card.main:first-child {margin-top: 6px;}
.card.main_right {min-width: 400px;}
.card.list {width: 100% !important; min-width: max-content !important;}
.card.contract, .card.project {width: 100%; min-width: 0;}
.card.right {min-width: 400px; padding: 6px 14px; border: 1px solid var(--neutral300);}
.card.works {float: left; margin-right: 20px; cursor: pointer;}
.card.works:last-child {margin-right: 0;}
.card.right_member {width: 100%; min-width: 0; margin-bottom: 0; padding: 10px; box-shadow: 0px 0px 2px 1px var(--neutral100); cursor: pointer;}
.card.setting {min-width: 1000px; width: 1000px;}
.card.calendar {width: 1000px; min-width: 1000px; padding: 6px 10px !important; display: flex; justify-content: space-between; align-items: center;}
.card_inner {width: 100%; height: 100%; padding: 10px;}
.card_inner.list {padding: 10px 16px;}
.card_inner.close_confirm {padding: 24px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between;}
.card_title {padding: 10px 10px 6px; position: relative; font-size: 14px; font-weight: 500; border-bottom: 1px solid var(--neutral100);}
.card_title.min {padding: 0 4px 6px 10px; display: flex; justify-content: space-between; align-items: center;}
.card_title.popup_title {padding: 10px 4px 6px 10px; display: flex; justify-content: space-between; align-items: center;}
.card_title.receive {color: var(--neutral50);}
.card_title.project_wait {padding: 0 10px; display: flex; justify-content: space-between; align-items: center; border-bottom: none;}
.card_title.project {padding: 0 4px 6px 10px; display: flex; justify-content: space-between; align-items: center;}
.card_title.project .btn_resize_project {width: 27px; height: 24px; cursor: pointer;}
.card_title.project .btn_resize_project > img {width: 100%; height: 100%; object-fit: contain;}
.card_content {width: 100%; padding: 20px;}
.divide2 {display: flex; align-items: center; gap: 30px;}
.divide2 .right_area  {display: flex; align-items: center;}
.divide3 {display: flex; align-items: center; gap: 20px;}
.card_content .card_sub_content {width: 100%; display: flex; align-items: center;}
.card_content .card_sub_content.align_start {align-items: start;}
.card_content .card_sub_content > p {white-space: nowrap;}
.card_content .card_sub_content > textarea {width: 100%; min-height: 180px; max-height: 180px; padding: 10px 16px; border: 1px solid var(--neutral200); border-radius: 6px; resize: none;}
.card_content .card_sub_content_list {width: 100%; display: flex; flex-direction: column; gap: 10px;}
.card_content img {width: 20px; height: 20px;}
.payment_icon {padding: 8px 10px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.card_bottom {padding: 10px 10px; display: flex; justify-content: end; align-items: center; gap: 10px; border-top: 1px solid var(--neutral100);}

/* card contract */
.search_date {min-width: max-content; height: 30px; margin: 0 auto; padding: 6px 10px 6px 8px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--neutral200); border-radius: 6px; cursor: pointer;}
.search_date > img {width: 18px; height: 18px;}
.search_date > p {font-size: 14px; font-weight: 400;}
.search_placeholder {font-size: 12px !important; font-weight: 400; color: var(--neutral200) !important;}
.del_txt {position: absolute; top: 50%; transform: translateY(-50%); right: 10px;cursor: pointer;}
.del_txt img {display: block;}
/* card project */
.card_project_status {width: 100%; padding: 2px 10px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--neutral100); border: none; border-radius: 6px;}
.card_project_status > div {width: 76%;}
.card_project_status > ul {width: 20%; white-space: nowrap;}
.card_project_status > ul > li {display: flex; align-items: center; gap: 4px; font-size: 14px;}
.card_project_status > ul > li > p:last-child {font-size: 24px;}
.card_project_status progress {width: 100%; height: 6px; appearance: none;}
.card_project_status progress::-webkit-progress-bar {border-radius: 20px; background-color: var(--neutral200);}
.card_project_status progress::-webkit-progress-value {border-radius: 20px; background-color: var(--main);}
.card_project_content {width: 100%; padding: 10px 0 4px 0; display: none;}
.card_project_content .card_project_summary_box {width: 100%; padding: 4px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--neutral100); border: none; border-radius: 6px;}
.card_project_content .card_project_summary {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; cursor: pointer;}
.card_project_content .card_project_summary_percent {display: flex; align-items: center; gap: 6px;}
.card_project_content .card_project_summary_percent > p {white-space: nowrap;}
.card_project_content .card_project_summary_percent progress {width: 200px; height: 6px; appearance: none;}
.card_project_content .card_project_summary_percent progress::-webkit-progress-bar {border-radius: 20px; background-color: var(--neutral200);}
.card_project_content .card_project_summary_percent progress::-webkit-progress-value {border-radius: 20px; background-color: var(--main);}
.card_project_content .card_project_summary_list {width: 100%; padding: 4px 10px; display: flex; justify-content: space-between; align-items: center; background: var(--white); border: none; border-radius: 4px;}
.card_project_content .card_project_summary_list > p {font-size: 14px; font-weight: 400;}
/* card project edit */
.project_date, .contract_date, .hosting_date, .maintenance_date {width: 100%; height: 42px; padding: 10px 16px; display: flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--neutral200); border-radius: 6px; cursor: pointer;}
.project_date.null, .contract_date.null,
.hosting_date.null, .maintenance_date.null {height: auto; padding: 0; display: block; border: none;}
.project_date.disabled, .contract_date.disabled,
.hosting_date.disabled, .maintenance_date.disabled {background: var(--neutral100) !important; border: 1px solid var(--neutral200) !important; color: var(--neutral500) !important;}
.project_date.disabled input, .contract_date.disabled input,
.hosting_date.disabled input, .maintenance_date.disabled input {color: var(--neutral500) !important;}
.hosting_contract_hidden, .maintenance_contract_hidden {margin-top: 10px; padding: 10px 20px; background: var(--neutral50); border-radius: 4px;}

/* contract project edit */
.contract_sub_title, .project_sub_title {min-width: 150px; width: 150px; display: flex; white-space: nowrap; font-size: 14px; font-weight: 400; color: var(--neutral500);}
.contract_sub_title.right, .project_sub_title.right {min-width: 150px;}

/* card list */
.card_list_title {min-width: 100px; display: flex; justify-content: end; font-size: 14px; font-weight: 400;}
.card_list_content {font-size: 14px; font-weight: 400; position: relative;}
.card_list_content .disc {list-style-type: disc; list-style-position: inside;}
.card_list_content .card_list_img {width: 200px; height: 200px;}
.card_list_content .card_list_img > img {width: 100%; height: 100%; object-fit: contain;}
.card_list_content .card_img_upload {width: 300px; height: 300px; position: relative; border-radius: 6px; border: 1px solid var(--neutral200);}
.card_list_content .card_img_upload.id {width: 210px; height: 280px;}
.card_list_content .upload_file{width: 100%; height: 100%; padding: 10px; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer;}
.card_list_content .upload_file.null > img {width: 40px; height: 40px; margin-bottom: 10px;}
.card_list_content .upload_file.null .uploaded_file {width: 100%; height: 100%; margin-bottom: 0;}
.card_list_content .upload_file.img_preview {display: none; object-fit: contain;}

/* card works */
.card_works_content {width: 100%; margin: 20px 0 10px; display: flex; flex-direction: column; gap: 16px;}
.card_works_content .card_works_box {padding: 6px 10px; background: var(--white); border-width: 1px; border-style: solid; border-color: var(--neutral300); box-shadow: 0 0 1px 0px var(--neutral300); border-radius: 6px; cursor: pointer;}
.card_works_content .card_works_box.null {height: 80px; display: flex; justify-content: center; align-items: center; background: transparent; border-width: 1.5px; border-style: dashed; box-shadow: none;}
.card_works_content .card_works_box_title {margin-bottom: 6px; font-size: 14px; font-weight: 400;}
.card_works_content .card_works_time {padding: 4px; display: flex; align-items: center; gap: 6px; border-radius: 6px; font-size: 14px;}
.card_works_content .card_works_time.list {max-width: 90px;}
.card_works_content .card_works_time.ing {background: var(--neutral200);}
.card_works_content .card_works_time.ing > p {color: var(--neutral500);}
.card_works_content .card_works_time.ing .card_works_time_icon {background: url(../img/svg/clock_ing.svg) no-repeat 50% 50%; width: 20px; height: 20px;}
.card_works_content .card_works_time.over {background: #ffafa8;}
.card_works_content .card_works_time.over > p {color: #ff0000;}
.card_works_content .card_works_time.over .card_works_time_icon {background: url(../img/svg/clock_over.svg) no-repeat 50% 50%; width: 20px; height: 20px;}
.card_works_content .card_works_time.done {background: #66BD7D;}
.card_works_content .card_works_time.done > p {color: var(--white);}
.card_works_content .card_works_time.done .card_works_time_icon {background: url(../img/svg/clock_done.svg) no-repeat 50% 50%; width: 20px; height: 20px;}
.input_works_title01, .input_works_title02 {margin: 20px 0 10px; display: none; align-items: center; gap: 6px;}
.btn_add_works {position: absolute; top: -2px; right: 4px;}
.btn_add_works_box {display: flex; align-items: center; gap: 0; cursor: pointer;}

/* card notice */
.notice_date {width: max-content; height: 24px; padding: 4px 6px; display: flex; align-items: center; gap: 6px; background: var(--neutral200); border-radius: 6px;}
.notice_date > p {font-size: 14px; color: var(--neutral500);}
/* card member - right slider */
.card_member_work_status {width: 100%; margin-top: 6px; padding: 4px 8px; display: flex; justify-content: space-between; gap: 6px; background: var(--neutral100); border-radius: 6px;}
.card_member_work_status li {display: flex; align-items: center; gap: 2px;}
.card_member_work_status p:first-child {font-size: 10px; font-weight: 400;}
.card_member_work_status p:last-child {font-size: 14px; font-weight: 400;}
/* popup */
.popup {position: fixed; display: none; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.6); z-index: 5000; width: 100%; height: 100%;}
.popup.popup_schedule_search {position: absolute; top: 200px; right: 300px; display: none; z-index: 5000; width: 300px; height: 500px; background: #fff; border-radius: 10px; box-shadow: 0px 0px 2px 1px var(--neutral100);}
.popup_card {width: 800px; height: 600px; position: relative; background-color: #fff; margin-bottom: 10px; border-radius: 10px; box-shadow: 0px 0px 2px 1px var(--neutral100);}
.popup_card.small {width: 400px; height: 200px;}
.popup_card.popup_work_view {width: 500px; }
.popup_card.popup_datepicker {width: 300px; height: max-content; background: #fff; border-radius: 10px; box-shadow: 0px 0px 2px 1px var(--neutral100); position: absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.popup_sub {position: absolute; display: none; width: 300px; background: #fff; border-radius: 10px; box-shadow: 0px 0px 2px 1px var(--neutral100); z-index: 5000;}

body.hidden {
  overflow: hidden;
}

.popup_sub.popup_member {top: 134px; right: -62px; height: 500px;}
.popup_sub.popup_worklabel {top: 134px; right: -62px; height: 200px;}
.popup_sub.popup_schedule {top: 180px; right: -62px; height: 500px;}
.popup_sub.popup_attachedlink {top: 316px; right: -62px; height: 200px;}
.popup_sub.popup_receiver {top: 180px; right: -62px; height: 440px;}
.popup_sub.popup_deadline {top: 224px; right: -62px; height: 500px;}
.popup_sub.popup_deadline_change {top: 180px; right: -62px; height: 500px;}
.popup_sub.popup_dept {top: 134px; right: -62px; height: 330px;}
.popup_sub.popup_project_type {top: 134px; right: -62px; height: 300px;}
.popup_sub.popup_orderer {top: 180px; right: -62px; height: 430px;}
.popup_sub.popup_orderer2 {top: 270px; right: -62px; height: 430px;}
.popup_sub.popup_date {top: 60px; right: -62px; height: 540px;}
.popup_sub.popup_request_change_schedule {width: 600px; top: 60px; right: -62px; height: 540px;}
.popup_sub.popup_request_change_member {top: 100px; right: -62px; height: 500px;}
.popup_sub.popup_change_schedule {top: 40px; right: -62px; height: 560px;}
.popup_sub.popup_join_date {bottom: -80px; right: -310px; height: 410px;}
.popup_close {position: absolute; right: 20px; top: 20px; cursor: pointer;}
.popup_txt {padding: 24px; display: flex; flex-direction: column;}
.popup_btn {width: 100%; padding: 0 24px 24px;}

/* project : work view popup */
.popup_content {height: calc(100% - 40px); padding: 20px 0  0 10px;}
.popup_content.request {padding: 10px 0 0 10px;}
.popup_content > ul {height: 100%; padding-right: 10px; overflow-y: auto;}
.popup_content > ul::-webkit-scrollbar {width: 6px;}
.popup_content > ul::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.popup_content > ul::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}

/* works */
/* .popup_content {height: calc(100% - 40px); padding: 20px 10px 0;} */
/* popup left */
.popup_left {width: 70%; height: 100%; float: left;}
.popup_left > ul {height: calc(100% - 40px); padding-right: 10px; overflow-y: auto;}
.popup_left.project > ul {height: 100%;}
.popup_left > ul::-webkit-scrollbar {width: 6px;}
.popup_left > ul::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.popup_left > ul::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
.works_card {margin-bottom: 14px;}
.works_card.worklabel, .works_card.receiver, .works_card.member, .works_card.schedule,
.works_card.schedule_request, .works_card.date_request, .works_card.date_read,
.works_card.schedule_confirmed, .works_card.date_done {display: flex; align-items: center; gap: 20px;}
.works_card .works_title {display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400;}
.works_card .works_title_schedule {padding-left: 34px; font-size: 14px; font-weight: 400;}
.works_card.member .works_title_icon {background: url(../img/svg/users.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.worklabel .works_title_icon {background: url(../img/svg/tag.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.title .works_title_icon {background: url(../img/svg/bookmark.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.schedule .works_title_icon {background: url(../img/svg/calendar.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.description .works_title_icon {background: url(../img/svg/align-left.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.checklist .works_title_icon {background: url(../img/svg/check-square.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.attachedlink .works_title_icon {background: url(../img/svg/paperclip.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.record .works_title_icon {background: url(../img/svg/list.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.worktitle .works_title_icon {background: url(../img/svg/clipboard.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.receiver .works_title_icon {background: url(../img/svg/users.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.deadline .works_title_icon {background: url(../img/svg/calendar.svg) no-repeat 50% 50%; width: 24px; height: 24px;}
.works_card.attachedlink > div:nth-child(2) {position: relative;}
.works_card.attachedlink .btn_move {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); align-items: center; gap: 4px; cursor: pointer;}
.project_card {margin-bottom: 14px;}
.project_card.pj_category {margin: 20px 0 30px; display: flex; flex-direction: column; align-items: center;}
.project_card:last-child {margin-bottom: 4px;}
.project_card .project_title {font-size: 14px; font-weight: 400;}
/* popup right */
.popup_right {width: 30%; height: 100%; padding-left: 10px; float: left;}
.popup_right.works, .popup_right.project {display: flex; justify-content: space-between; flex-direction: column;}
.popup_right_box {height: calc(100% - 100px);}
.popup_right .works_request_box {margin-bottom: 20px;}
.btn_add_works_card_wrap {display: flex; flex-direction: column; gap: 6px;}
.btn_add_works_card {width: 100%; height: 40px; padding: 0 10px; display: flex; align-items: center; gap: 6px; background: var(--neutral100); border-radius: 6px; cursor: pointer;}
.btn_add_works_card > img:nth-child(2) {display: none;}
.btn_add_works_card > p {font-size: 14px;}
.btn_add_works_card_wrap.disabled p {color: var(--neutral300);}
.btn_add_works_card.disabled > img:nth-child(1) {display: none;}
.btn_add_works_card.disabled > img:nth-child(2) {display: block !important;}
.btn_add_works_card.disabled p {color: var(--neutral300);}
.btn_pj_contract, .btn_pj_manager {display: none;}
.select_pj_member {height: calc(100% - 70px); margin-top: 20px;}
.select_pj_member > div {height: calc(100% - 30px); overflow-y: auto;}
.select_pj_member > div::-webkit-scrollbar {width: 4px;}
.select_pj_member > div::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.select_pj_member > div::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
.view_pj_member {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between;}
.view_pj_member_list {margin-bottom: 10px; padding-bottom: 10px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--neutral100);}
.btn_view_pj_member, .btn_request {display: flex; flex-direction: column; gap: 6px;}

/* myaccount popup */
.popup.popupmy {width: 300px; height: 250px; padding: 20px; position: absolute; right: 2px; top: 54px; z-index: 700; background: #fff; box-shadow: 0px 0px 2px 1px var(--neutral100); border-radius: 10px;}
.popup.popupmy .close_popup {position: absolute; top: 10px; right: 10px; cursor: pointer;}
.myinfo_wrap {width: 100%; height: 100%; display: flex; justify-content: space-between; flex-direction: column;}
.myinfo_img {width: 90px; height: 120px; padding: 4px; border: 1px solid var(--neutral200); border-radius: 4px;}
.myinfo_img > img {width: 100%; height: 100%; border-radius: 4px; object-fit: cover;}

/* member */
.works_member {display: flex; justify-content: center; align-items: center; border-radius: 6px; cursor: pointer; white-space: nowrap;}
.works_member.mini {width: max-content; min-width: 42px; height: 24px; padding: 2px 4px 3px; font-size: 12px; font-weight: 400; letter-spacing: 0.2px;}
.works_member.mini span {margin-bottom: 1px;}
.works_member.small {width: max-content; min-width: 60px; height: 34px; padding: 4px 6px 5px; font-size: 14px; font-weight: 400; letter-spacing: 0.2px;}
.works_member.large {width: max-content; min-width: 65px; padding: 6px 10px 7px; font-size: 16px; font-weight: 500;}
.works_member img {width: 100%; height: 100%; object-fit: cover; border-radius: 999px;}
.works_member.add img {width: 20px; height: 20px;}
/* work label */
.works_label {position: relative; width: max-content;}
.works_label .works_label_txt {position: absolute; top: 3px; left: 24px; font-size: 12px; font-weight: 400; color: var(--white);}
.works_label.own .works_label_bg  {background: url(../img/svg/subtract_own.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.works_label.si .works_label_bg  {background: url(../img/svg/subtract_si.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.works_label.basic {padding: 2px 6px 3px; border-radius: 4px; font-size: 12px;}

.status_label {position: relative; width: max-content;}
.status_label .status_label_txt {position: absolute; top: 3px; left: 24px; font-size: 12px; font-weight: 400; color: var(--white);}
.status_label.wait .status_label_bg {background: url(../img/svg/subtract_wait.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.status_label.hold .status_label_bg {background: url(../img/svg/subtract_wait.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.status_label.reject .status_label_bg {background: url(../img/svg/subtract_reject.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.status_label.approve .status_label_bg {background: url(../img/svg/subtract_approve.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.status_label.ing .status_label_bg {background: url(../img/svg/subtract_ing.svg)no-repeat 50% 50%; width: 64px; height: 24px;}
.status_label.done .status_label_bg {background: url(../img/svg/subtract_approve.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.status_label.instruct .status_label_bg {background: url(../img/svg/subtract_request.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.status_label.instruct2 .status_label_bg {background: url(../img/svg/subtract_wait.svg)no-repeat 50% 50%; width: 56px; height: 24px;}

.department_label {position: relative;}
.department_label .department_label_txt {position: absolute; top: 3px; left: 24px; font-size: 12px; font-weight: 400; color: var(--white);}
.department_label.all .department_label_bg {background: url(../img/svg/subtract_all.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.department_label.hq .department_label_bg {background: url(../img/svg/subtract_hq.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.department_label.planning .department_label_bg {background: url(../img/svg/subtract_planning.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.department_label.design .department_label_bg {background: url(../img/svg/subtract_design.svg)no-repeat 50% 50%; width: 64px; height: 24px;}
.department_label.development .department_label_bg {background: url(../img/svg/subtract_development.svg)no-repeat 50% 50%; width: 56px; height: 24px;}
.department_label.system .department_label_bg {background: url(../img/svg/subtract_system.svg)no-repeat 50% 50%; width: 64px; height: 24px;}

/* work schedule */
.works_schedule {width: 120px; padding: 4px 6px 4px 8px; display: flex; justify-content: start; align-items: center; gap: 6px; background: var(--neutral200); border-radius: 6px;}
.works_schedule.nobg {padding: 0 10px 0 6px; background: var(--white);}
.works_schedule_view {display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 14px; color: var(--neutral500);}
.works_schedule_view > input {font-size: 14px; color: var(--neutral500);}
/* work description */
.wokrs_description {min-height: 100px; background: var(--white); border: 1px solid var(--neutral200); resize: none;}
.wokrs_description:disabled {background: var(--neutral100);}
/* work checklist */
.works_checklist {border: none;}
.works_checklist progress {width: 100%; height: 6px; appearance: none;}
.works_checklist progress::-webkit-progress-bar {border-radius: 20px; background-color: var(--neutral100);}
.works_checklist progress::-webkit-progress-value {border-radius: 20px; background-color: var(--main);}
.works_checklist_box {margin: 6px 0 0 30px; display: flex; flex-direction: column; gap: 6px;}
.checklist_tile {display: flex; justify-content: space-between; align-items: center;}
/* work attachedlink */
.works_attachedlink {width: 100%; display: flex; flex-direction: column; gap: 6px;}
.works_attachedlink .attachedlink_view_box {display: flex; justify-content: space-between; align-items: center; gap: 6px;}
.works_attachedlink .attachedlink_view {width: 100%; min-height: 34px; padding: 6px 10px; font-size: 14px; font-weight: 400; background: var(--neutral50); border: 1px solid var(--neutral200); border-radius: 6px;}
/* work record */
.works_log_list {padding: 6px 0; margin-bottom: 10px; display: none; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--neutral100);}
.works_record {width: 100%; padding-left: 0; display: flex; flex-direction: column; gap: 6px;}
.works_record_list {display: flex; flex-direction: column; gap: 6px;}
.works_record_input, .works_record_list > li {display: flex; align-items: center; gap: 6px;}
.btn_works_record {width: 50px; height: 34px; display: flex; justify-content: center; align-items: center; background: var(--neutral200); border-radius: 6px; cursor: pointer;}
/* work request change schedule */
.request_change_schedule_content {height: calc(100% - 170px);}
.change_schedule_reason {width: 100%; height: 100%;}
.change_schedule_reason > textarea {height: 370px; margin-top: 6px; border: 1px solid var(--neutral200); resize: none;}
/* work request change schedule */
.request_change_member_content {height: calc(100% - 150px); padding: 0 10px;}
.request_change_member_content > textarea {height: 100%; border: 1px solid var(--neutral200); resize: none;}
/* work request change schedule */
.change_schedule_content {height: calc(100% - 170px);}


/* project development / hosting / maintenance */
.project_development_list, .project_hosting_list, .project_maintenance_list {margin-top: 6px; display: flex; flex-direction: column; gap: 6px;}
.project_development_item, .project_hosting_item, .project_maintenance_item {display: flex; align-items: center; gap: 6px;}
.project_development_item > input:first-child, .project_hosting_item > input:first-child, .project_maintenance_item > input:first-child {width: 100%;}
.project_development_item > input:last-child, .project_hosting_item > input:last-child, .project_maintenance_item > input:last-child {width: 44%;}
/* project contract manager */
.project_manager_list {margin-top: 6px; display: flex; flex-direction: column; gap: 6px;}
.project_manager_item > input:nth-child(1) {width: 20%;}
.project_manager_item > input:nth-child(2) {width: 30%;}
.project_manager_item > input:nth-child(3) {width: 48%;}
/* project cost / hosting / maintenance */
.project_cost, .project_hosting_cost, .project_maintenance_cost {margin-top: 6px; display: flex; align-items: center; gap: 6px;}
.project_cost_date, .project_hosting_date, .project_maintenance_date {width: 100%; height: 34px; padding: 6px 10px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--neutral200); border-radius: 6px; cursor: pointer;}
.project_cost_date.null, .project_hosting_date.null, .project_maintenance_date.null {height: auto; padding: 0; display: block; border: none;}
.project_cost_date.disabled, .project_hosting_date.disabled, .project_maintenance_date.disabled {background: var(--neutral100) !important; border: 1px solid var(--neutral200) !important; color: var(--neutral500) !important;}
.project_cost_date.disabled input, .project_hosting_date.disabled input, .project_maintenance_date.disabled input {color: var(--neutral500) !important;}
.project_placeholder, .project_placeholder_schedule {font-size: 12px !important; font-weight: 400; color: var(--neutral200) !important;}
/* project hosting / maintenance */
/* .project_hosting_cost, .project_maintenance_cost {display: flex; flex-direction: column; gap: 6px;} */
/* project department */
.project_dept_list {margin-top: 6px; display: flex; align-items: center; gap: 10px;}
/* project_schedule */
.project_schedule {margin-top: 6px; display: flex; align-items: center; gap: 6px;}
.pj_schedule_box {display: none; align-items: center; gap: 6px;}
.pj_schedule_box.view {display: flex;}
#pj_schedule_start, #pj_schedule_end, #pj_schedule_start_view, #pj_schedule_end_view {width: 74px; background: var(--neutral100);}
.schedule_view {background: var(--neutral100);}
.schedule_view .pj_schedule_box input {color: var(--neutral500);}
/* project info */
.pj_info textarea {min-height: 200px; border: 1px solid var(--neutral200) !important; resize: none; color: var(--neutral900);}
.pj_info textarea:disabled {background: var(--neutral100); color: var(--neutral500);}

/* popup sub */
/* add member */
.member_list {height: calc(100% - 90px); padding: 10px 0 10px 10px; overflow-y: hidden; display: flex; flex-direction: column; gap: 20px;}
.member_list div {height: 100%;}
.member_list ul {height: calc(100% - 30px); padding-right: 10px; overflow-y: auto;}
.member_list ul::-webkit-scrollbar {width: 6px;}
.member_list ul::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.member_list ul::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
.member_list label {word-break: break-all;}
.btn_member {width: 24px; height: 24px; cursor: pointer;}
.btn_member.plus {background: url(../img/svg/plus-square.svg) no-repeat 50% 50%;}
.btn_member.minus {background: url(../img/svg/minus-square.svg) no-repeat 50% 50%;}
/* add label */
.add_label_box {padding: 4px 10px 0; height: calc(100% - 160px); overflow-y: auto;}
.add_label_box.receiver {margin: 10px 0; height: calc(100% - 100px);}
.add_label_box::-webkit-scrollbar {width: 6px;}
.add_label_box::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.add_label_box::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
.add_label_project {padding-top: 10px; border-top: 1px solid var(--neutral100);}
.add_label_project input[type="checkbox"] {min-width: 18px; height: 18px;}
.btn_add_label {width: 24px; height: 24px; background: url(../img/svg/edit.svg)no-repeat 50% 50%; cursor: pointer;}
/* add schedule */
.schedule_content {height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;}
.schedule_content::-webkit-scrollbar {width: 6px;}
.schedule_content::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.schedule_content::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
/* add attached link */
.attachedlink_content {padding: 0 10px 10px;}
/* add receiver */
.receiver_list {padding: 20px 0 10px; display: flex; flex-direction: column; gap: 20px;}
.dept_list {height: calc(100% - 80px); padding: 10px; display: flex; flex-direction: column; justify-content: space-between;}
.btn_member {width: 24px; height: 24px; cursor: pointer;}
.btn_member.plus {background: url(../img/svg/plus-square.svg) no-repeat 50% 50%;}
.btn_member.minus {background: url(../img/svg/minus-square.svg) no-repeat 50% 50%;}
/* add deadline */
.deadline_content {height: calc(100% - 50px); overflow-y: auto; overflow-x: hidden;}
.deadline_content::-webkit-scrollbar {width: 6px;}
.deadline_content::-webkit-scrollbar-thumb {height: 30%; background: var(--neutral300); border-radius: 10px;}
.deadline_content::-webkit-scrollbar-track {background: var(--neutral100); border-radius: 10px;}
/* add project type */
.project_type_content {height: calc(100% - 50px); display: flex; flex-direction: column; justify-content: space-between;}
/* add orderer  */
.orderer_content {}
/* add join date */
.join_date_content {height: calc(100% - 46px); display: flex; flex-direction: column; justify-content: space-between;}


/* calendar custom */
/* 시간 행과 열을 숨기는 CSS */
/* .fc-theme-standard .fc-scrollgrid {border: none;} */
/* .fc-timegrid-axis {display: none;}
.fc-timegrid-slot-label-cushion
.fc-timegrid-slot-lane {display: none;}
.fc-timegrid-col-frame {height: auto !important;}
.fc-timegrid-body {display: none;}
.fc-timegrid .fc-timegrid-divider {display: none;}
.fc-col-header th {height: 35px;}
.fc-scroller-harness {height: 100%;}
.fc-scroller-harness div {height: 100%;}
.fc-scroller-harness .fc-scrollgrid-sync-table {height: 400px;}
.fc-scrollgrid-sync-table tr, .fc-scroller-harness td {height: 400px;}
colgroup {display: none;}
.fc-scrollgrid-sync-inner {display: flex; justify-content: center; align-items: center;} */

.cursor_view { text-decoration: underline; color: var(--main) !important; cursor: pointer;}

/* swal2 */
.swal2-popup {width:400px !important;}
.swal2-container {z-index: 6000 !important;}
.swal2-confirm {background-color: var(--main);}
.title_sweet {font-size: 20px !important;}
.desc_sweet {font-size: 16px !important;}
button.swal2-styled {padding: 8px 20px !important; box-shadow: 0 0 0 0 #fff !important;}