@charset "utf-8";


/* Default */
* {margin: 0; padding: 0;}
body {font-family: 'NotoSansKR', sans-serif; letter-spacing: -0.01em;}
header, footer, main, section, article, aside, nav, figure, figcaption {display: block;}
address {font-style: normal;}
fieldset, hr {display: block; margin: 0; padding: 0; border: 0 none;}
img {max-width: 100%; font-size: 0; border: 0; vertical-align: middle;}

table {width: 100%; border-spacing: 0; table-layout: fixed; word-break: break-all; border-collapse: collapse;}

input, select {max-width: 100%; vertical-align: middle;}
input, select, button, textarea, optgroup { margin: 0; font-family: inherit; font-size: inherit; color: inherit;}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {position: absolute; top: 0; right: 0; width: 40px; height: 100%; opacity: 0;}

select {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
select::-ms-expand {display: none;}

a {text-decoration: none;}
input[type='submit'] {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
button {text-decoration: none; background: none; border: 0; outline: 0; white-space: nowrap; cursor: pointer; letter-spacing: -0.04em;}

.hidden {display: none !important;}
.blind {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}


/* html, body */
html.smooth {scroll-behavior: smooth;}
body.mask {overflow: hidden;}
body.mask:after {display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 30%); z-index: 50;}


/* select, input */
.input,
.select,
.textarea {position: relative; padding: 8px 14px; width: 340px; max-width: 100%; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 4px; letter-spacing: -0.02em; box-sizing: border-box; outline: none !important;}
.input.full,
.select.full,
.textarea.full {width: 100% !important;}
.input::placeholder,
.textarea::placeholder {color: #a5a5ba;}
.input:focus,
.select:focus,
.textarea:focus {border-color: #4f31d4;}
.select option[value=""][disabled] {display: none;}
.textarea {height: 83px; resize: none;}
.input:disabled,
.input.disabled {background-color: #f4f4fa !important;}
.input.error {border-color: #ee4f4f;}

.err-msg {display: block; position: absolute; top: 100%; left: 0; width: 100%; font-size: 10px; color: #ee4f4f; font-weight: 400; text-align: left;}


/* checkbox - custom */
.check-wrap {display: flex; gap: 20px;}

.check-box {position: relative; min-width: 22px; min-height: 22px;}
.check-box input {display: none; width: 22px !important; min-height: 22px !important;}
.check-box input + label {display: inline-block; padding: 0 0 0 22px !important; min-height: 22px; line-height: 22px; font-size: 14px; background-size: 22px 22px !important; cursor: pointer;}
.check-text input + label {padding-left: 32px !important;}

.check-box input[type="checkbox"] + label {background: url(../img/check_none.png) 0 50% no-repeat;}
.check-box input[type="checkbox"]:checked + label {background: url(../img/check_on.png) 0 50% no-repeat;}

.check-box input[type="radio"] + label {background: url(../img/radio_none.png) 0 50% no-repeat;}
.check-box input[type="radio"]:checked + label {background: url(../img/radio_on.png) 0 50% no-repeat;}


/* select - custom */
.select-wrap {display: flex; gap: 20px;}

.custom-select {position: relative; width: 240px; max-width: 100%;}
.custom-select.full {width: 100% !important;}
.custom-select select {display: none;}
.custom-select .select-selected,
.custom-select .select-option button {padding: 8px 14px; width: 100%; line-height: 22px; font-size: 14px; color: #343445; cursor: pointer; user-select: none; text-align: left; box-sizing: border-box;}

.custom-select .select-selected {position: relative; padding-right: 30px; color: #969bb5; background-color: #fff; border: 1px solid #d9dceb; border-radius: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.custom-select.selected .select-selected {color: #3a3c46;}

.custom-select .select-selected:after {position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 40px; background: #fff url(../img/select_default.png) center center no-repeat;}

.custom-select .select-selected.active {color: #4f31d4; border-color: #4f31d4; z-index: 50;}
.custom-select .select-selected.active:after {background-image: url(../img/select_onclick.png);}

.custom-select .select-option {position: absolute; top: 100%; left: 0; right: 0; padding: 8px 6px; max-height: 200px; background-color: #fff; border: 0; border-radius: 6px; box-shadow: 0px 4px 6px 0px rgba(00, 0, 0, 0.1); z-index: 30; box-sizing: border-box; overflow-y: auto;}
.custom-select .select-hide {display: none;}
.custom-select .select-option button {margin: 2px 0; padding: 4px 8px;}
.custom-select .select-option button:hover {color: #4f31d4; background-color: #ebebff; border-radius: 6px;}

.custom-select.disabled .select-selected {color: #343445; background-color: #f4f4fa; border-color: #d9dceb;}
.custom-select.disabled .select-selected:after {display: none;}
.custom-select.disabled .select-option {display: none;}


/* form */
.form {position: relative; width: 100%;}
.form .input,
.form .select,
.form .textarea {padding: 13px 14px;}
.form .textarea {padding: 14px; height: 220px;}

.form .custom-select .select-selected {padding: 13px 40px 13px 14px;}
.form .custom-select .select-selected:after {height: 50px;}
.form .custom-select .select-option {padding: 5px 6px;}
.form .custom-select .select-option button {padding: 4px 8px; font-size: 12px;}

.form .row {display: flex; gap: 20px; align-items: center; position: relative; margin-top: 10px; width: 100%;}
.form .row:first-child {margin-top: 0 !important;}

.form .row-btn {width: calc(100% - 90px);}
.form .row-btn .button {width: 80px;}
.form .row-check {gap: 10px 20px;}
.form .row-check .input {width: calc(100% - 140px);}

.form .input.icon-clock {padding-right: 40px; background: #fff url(../img/icon_clock.png) 98.5% center no-repeat;}
.form .input.icon-clock:focus {background-image: url(../img/icon_clock_on.png);}

.form .input.icon-date {padding-right: 40px; background: #fff url(../img/icon_date.png) 98.5% center no-repeat;}

.form .check-wrap {align-items: center; min-height: 50px;}

.form .button {padding: 15px 10px;}


/* icon */
.icon {display: inline-block; position: relative; vertical-align: top;}
.icon:before {display: block; content: ''; width: 20px; height: 20px; background-position: center center; background-repeat: no-repeat;}

.icon-lock:before {background-image: url(../img/icon_lock.png);}


/* button */
.button-wrap {display: flex; gap: 20px;}

.button {display: block; position: relative; padding: 10px; width: 120px; line-height: 20px; font-size: 14px; color: #4f31d4; font-weight: 400; background-color: #ebebff; border: 0; border-radius: 6px; text-align: center; box-sizing: border-box; letter-spacing: -0.04em; overflow: hidden;}
.button.full {width: 100% !important;}
.button.color {color: #fff; background-color: #4f31d4;}
.button.gray {color: #fff; background-color: #a5a5ba;}
.button.color-border {padding: 9px; color: #4f31d4; background-color: #fff; border: 1px solid #4f31d4;}


/* button icon */
.btn-icon {display: flex; gap: 4px; align-items: center; position: relative; font-size: 12px; color: #4e4e69; font-weight: 500;}
.btn-icon:before {display: block; content: ''; width: 34px; height: 34px; background-position: center center; background-repeat: no-repeat;}

.btn-public:before {background-image: url(../img/icon_public.png);}
.btn-private:before {background-image: url(../img/icon_private.png);}
.btn-delete:before {background-image: url(../img/icon_delete.png);}
.btn-edit:before {background-image: url(../img/icon_edit.png);}
.btn-admin:before {background-image: url(../img/icon_admin.png);}
.btn-close:before {background-image: url(../img/icon_close.png);}
.btn-more:before {background-image: url(../img/icon_more.png);}


/* main */
.main-flex {padding-left: 240px;}


/* sidebar */
.sidebar {position: fixed; top: 0; left: 0; padding: 90px 0 253px; width: 240px; height: 100%; background-color: #1d1d26; box-sizing: border-box; z-index: 100;}

.sidebar .nav::-webkit-scrollbar {width: 14px; height: 12px;}
.sidebar .nav::-webkit-scrollbar-thumb {background-color: #c0c2d0; border: 4px solid transparent; border-radius: 7px; background-clip: padding-box ;}
.sidebar .nav::-webkit-scrollbar-track {background-color: #1d1d26;}

.sidebar ul {list-style: none;}
.sidebar a {color: inherit;}

.sidebar .logo {display: flex; align-items: center; position: absolute; top: 10px; left: 0; padding: 0 20px; width: 100%; height: 50px; box-sizing: border-box;}
.sidebar .logo a {padding: 6px;}
.sidebar .logo a:before {display: block; content: ''; width: 116px; height: 20px; background: url(../img/logo_uniport.png) center center no-repeat;}


.sidebar .section {margin: 10px; padding-top: 20px; font-size: 12px; color: #4e4e69; font-weight: 500; border-top: 1px solid #343445;}

.sidebar .nav {padding: 0 10px; max-height: 100%; box-sizing: border-box; overflow-y: auto;}
.sidebar .nav li:first-child {margin-top: 0;}
.sidebar .nav li {margin-top: 6px;}
.sidebar .nav li a {display: flex; align-items: center; position: relative; padding: 8px 10px 8px 48px; height: 44px; font-size: 14px; color: #a5a5ba; font-weight: 500; border-radius: 6px; box-sizing: border-box;}

.sidebar .nav li a:before {display: block; content: ''; position: absolute; top: 8px; left: 10px; width: 28px; height: 28px; background-position: center center; background-repeat: no-repeat;}
.sidebar .nav li a.icon-notice:before {background-image: url(../img/nav_notice.png);}
.sidebar .nav li a.icon-calendar:before {background-image: url(../img/nav_calendar.png);}
.sidebar .nav li a.icon-vacation-history:before {background-image: url(../img/nav_vacation_history.png);}
.sidebar .nav li a.icon-schedule:before {background-image: url(../img/nav_schedule.png);}
.sidebar .nav li a.icon-conference:before {background-image: url(../img/nav_conference.png);}
.sidebar .nav li a.icon-qna:before {background-image: url(../img/nav_qna.png);}
.sidebar .nav li a.icon-buy:before {background-image: url(../img/nav_buy.png);}

.sidebar .nav li a.icon-paycheck:before {background-image: url(../img/nav_paycheck.png);}
.sidebar .nav li a.icon-paycheck-history:before {background-image: url(../img/nav_paycheck_history.png);}
.sidebar .nav li a.icon-vacation-approve:before {background-image: url(../img/nav_vacation_approve.png);}
.sidebar .nav li a.icon-vacation-status:before {background-image: url(../img/nav_vacation_status.png);}
.sidebar .nav li a.icon-vacation:before {background-image: url(../img/nav_vacation.png);}
.sidebar .nav li a.icon-work:before {background-image: url(../img/nav_work.png);}
.sidebar .nav li a.icon-member:before {background-image: url(../img/nav_member.png);}
.sidebar .nav li a.icon-team:before {background-image: url(../img/nav_team.png);}
.sidebar .nav li a.icon-work-time:before {background-image: url(../img/nav_work_time.png);}

.sidebar .nav li a:hover {background-color: #343445;}
.sidebar .nav li.active a {color: #fff; background-color: #4f31d4;;}
.sidebar .nav li.active a.icon-notice:before {background-image: url(../img/nav_notice_onclick.png);}
.sidebar .nav li.active a.icon-calendar:before {background-image: url(../img/nav_calendar_onclick.png);}
.sidebar .nav li.active a.icon-vacation-history:before {background-image: url(../img/nav_vacation_history_onclick.png);}
.sidebar .nav li.active a.icon-schedule:before {background-image: url(../img/nav_schedule_onclick.png);}
.sidebar .nav li.active a.icon-conference:before {background-image: url(../img/nav_conference_onclick.png);}
.sidebar .nav li.active a.icon-qna:before {background-image: url(../img/nav_qna_onclick.png);}
.sidebar .nav li.active a.icon-buy:before {background-image: url(../img/nav_buy_onclick.png);}
.sidebar .nav li.active a.icon-paycheck:before {background-image: url(../img/nav_paycheck_onclick.png);}
.sidebar .nav li.active a.icon-paycheck-history:before {background-image: url(../img/nav_paycheck_history_onclick.png);}
.sidebar .nav li.active a.icon-vacation-approve:before {background-image: url(../img/nav_vacation_approve_onclick.png);}
.sidebar .nav li.active a.icon-vacation-status:before {background-image: url(../img/nav_vacation_status_onclick.png);}
.sidebar .nav li.active a.icon-vacation:before {background-image: url(../img/nav_vacation_onclick.png);}
.sidebar .nav li.active a.icon-work:before {background-image: url(../img/nav_work_onclick.png);}
.sidebar .nav li.active a.icon-member:before {background-image: url(../img/nav_member_onclick.png);}
.sidebar .nav li.active a.icon-team:before {background-image: url(../img/nav_team_onclick.png);}
.sidebar .nav li.active a.icon-work-time:before {background-image: url(../img/nav_work_time_onclick.png);}

.sidebar .nav li.unread a:after {display: block; content: ''; margin: -10px 0 0 2px; width: 6px; height: 6px; background-color: #ee4f4f; border-radius: 50%;}

.sidebar .nav li .badge {position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 0 7px; min-width: 20px; line-height: 20px; font-size: 12px; color: #fff; font-weight: 500; background-color: #4e4e69; border-radius: 10px; text-align: center; box-sizing: border-box;}
.sidebar .nav li.active .badge {color: #4f31d4; background-color: #fff;}



.sidebar .clean {position: absolute; bottom: 106px; left: 0; padding: 40px 20px; width: 100%;  height: 147px; box-sizing: border-box;}
.sidebar .clean .subject {display: flex; gap: 6px; position: relative; font-size: 12px; color: #a5a5ba; font-weight: 500;}
.sidebar .clean .subject:after {display: block; content: ''; width: 18px; height: 18px; background: url(../img/icon_clean.png) center center no-repeat;}
.sidebar .clean .week {display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 14px; height: 40px; background-color: #343445; border: 1px solid #4e4e69; border-radius: 6px; box-sizing: border-box;}
.sidebar .clean .week span {font-size: 10px; color: #a5a5ba; font-weight: 400;}
.sidebar .clean .week .name {color: #fff; font-weight: 500;}

.sidebar .user {position: absolute; bottom: 0; left: 0; padding: 40px 20px 20px; width: 100%; border-top: 1px solid #343445; box-sizing: border-box;}
.sidebar .user-profile {display: flex; gap: 10px; align-items: center; position: relative; padding-right: 39px; height: 46px;}
.sidebar .user .img {width: 34px; height: 34px; border-radius: 50%; overflow: hidden;}
.sidebar .user .img img {vertical-align: top;width: 100%;height: 100%;}
.sidebar .user .info {display: flex; flex-wrap: wrap; width: calc(100% - 44px);}
.sidebar .user .info .name {padding-bottom: 1px; line-height: 14px; font-size: 12px; color: #fff; border-bottom: 1px solid #fff;}
.sidebar .user .info .mail {display: block; margin-top: 3px; width: 100%; line-height: 14px; font-size: 10px; color: #a5a5ba; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.sidebar .user .btn-logout {display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%);  width: 34px; height: 34px;}
.sidebar .user .btn-logout:before {display: block; content: ''; width: 100%; height: 100%; background: url(../img/btn_logout.png) center center no-repeat;}


/* container */
.container {position: relative; padding: 120px 40px 80px; min-height: 100vh; min-height: 100dvh; background-color: #fff; box-sizing: border-box;}
.container.pd-r440 {padding-right: 440px;}


/* top */
.top {display: flex; justify-content: space-between; position: fixed; top: 0; left: 0; padding: 20px 40px 20px 280px; width: 100%; height: 80px; background-color: #fff; border-bottom: 1px solid #e3e3e9; box-sizing: border-box; z-index: 50;}
.top ul {list-style: none;}
.top a {color: inherit;}
.top .left,
.top .right {display: flex; gap: 20px; align-items: center;}
.top h2.title {font-size: 20px; color: #343445; font-weight: 500;}


/* cont */
.cont {position: relative;}
.cont.w1400 {width: 1400px;}

.cont h3.title {margin: 40px 0 20px; font-size: 18px; color: #343445; font-weight: 500;}
.cont h3.title:first-child {margin-top: 0;}


/* search */
.search {position: relative;}
.search .input {padding-right: 40px;}
.search .btn-search {position: absolute; top: 0; right: 0; z-index: 5;}
.search .btn-search:before {display: block; content: ''; width: 40px; height: 40px; background: url(../img/btn_search.png) center center no-repeat;}


/* state */
.state-wrap {display: flex; gap: 10px; position: relative;}
.state .item {display: block; padding: 2px 5px; width: 60px; height: 26px; line-height: 20px; font-size: 12px; color: #4e4e69; font-weight: 500; background-color: #f4f4fa; border: 1px solid #a5a5ba; border-radius: 13px; text-align: center; box-sizing: border-box;}
.state .item.end {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.state .text {font-size: 14px;}


/* file */
.file-box .info .name {font-size: 14px; color: #4e4e69; font-weight: 500;}
.file-box .info .size {font-size: 14px; color: #a5a5ba; font-weight: 400;}

.file {position: relative; width: 100%;}
.file .file-box {position: relative; padding: 8px 58px 8px 14px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file .file-box .info {display: flex; gap: 10px;}
.file .file-box .info .name {display: block; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 80px); overflow: hidden;}
.file .file-box .info .size {display: block; min-width: 50px; max-width: 75px;}
.file .file-box .btn-file-down {position: absolute; top: 50%; right: 14px; transform: translateY(-50%); background-image: url(../img/file_download.png);}


.file-add {display: flex; gap: 20px; position: relative; margin-top: 10px; width: 100%;}
.file-add .btn-file {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; padding: 20px 10px; width: 80px; height: 80px; font-size: 10px; color: #a5a5ba; background-color: #f4f4fa; border: 1px dashed #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file-add .btn-file:before {display: block; content: ''; width: 18px; height: 18px; background: url(../img/file_add.png) center center no-repeat;}
.file-add .btn-file:hover {color: #4f31d4; border-color: #9797ff;}
.file-add .btn-file:hover::before {background-image: url(../img/file_add_hover.png);}
.file-add .btn-file span {width: 100%;}

.file-add .file-box {display: flex; align-items: center; position: relative; padding: 10px 58px 10px 14px; width: 257px; height: 80px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file-add .file-box .info {position: relative; padding-left: 44px; width: 100%; box-sizing: border-box;}
.file-add .file-box .info:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 34px; height: 34px; background: url(../img/file_document.png) center center no-repeat;}
.file-add .file-box .info .name {display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.file-add .file-box .info .size {font-size: 12px;}

.file-add .file-box .btn-file-delete {position: absolute; top: 50%; right: 14px; transform: translateY(-50%);}
.file-add .file-box .btn-file-delete:before {background-image: url(../img/file_delete.png);}


/* etc */
.mark:after {display: inline-block; content: '*'; font-size: inherit; color: #ff4e4e; font-weight: 500; vertical-align: top;}

.selected-wrap {display: flex; gap: 10px 30px;}
.selected-wrap .item {display: flex; gap: 0 4px;}
.selected-wrap .btn-select-delete:before {margin-top: 1px; width: 20px; height: 20px; background-image: url(../img/icon_delete_x.png);}

.clean-out {position: relative; font-size: 16px; color: #343445; font-weight: 500;}
.clean-out .item {display: flex; gap: 0 10px; margin-top: 20px;}
.clean-out .item:first-child {margin-top: 0;}
.clean-out .btn-out-delete:before {margin-top: 1px; width: 20px; height: 20px; background-image: url(../img/icon_delete_x.png);}

.status-label {display: inline-block; padding: 5px 18px; line-height: 14px; font-size: 12px; font-weight: 500; background-color: #fff; border: 1px solid #000; border-radius: 30px; box-sizing: border-box;}
.status-label.color {color: #4f31d4; background-color: #dedeff; border-color: #9797ff;}
.status-label.green {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.status-label.gray {color: #4e4e69; background-color: #f4f4fa; border-color: #a5a5ba;}


/* profile */
.profile-img {display: inline-block; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; vertical-align: top; overflow: hidden;}
.profile-img img {width: 100%; height: 100%; vertical-align: top;}

.profile-text {font-size: 14px; color: #4e4e69;}

.profile {display: flex; gap: 0 20px; align-items: center; align-content: center; flex-wrap: wrap; position: relative; padding-left: 100px; height: 80px;}
.profile .profile-img {position: absolute; top: 0; left: 0; width: 80px; height: 80px;}
.profile .button-wrap {gap: 10px; margin-bottom: 10px; width: 100%;}
.profile .button {padding: 5px; width: 60px;}


/* people */
.people ul {display: flex; align-items: center; list-style: none;}
.people ul li {margin-left: -6px;}
.people ul li:first-child {margin-left: 0;}
.people ul .more {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 10px; color: #fff; font-weight: 500; background-color: #9797ff;}


/* head */
.head {display: flex; justify-content: space-between; position: relative; margin-bottom: 20px;}
.head .left,
.head .right {display: flex; gap: 20px; align-items: center;}

.work {display: flex; align-items: center;}
.work span {display: flex; align-items: center; font-size: 14px; color: #a5a5ba;}
.work span:after {display: block; content: ''; margin: 0 20px; width: 1px; height: 16px; background-color: #e3e3e9;}
.work span:last-child::after {display: none;}
.work span em {margin: 0 14px 0 4px; color: #4e4e69; font-style: normal;}
.work .icon:before {width: 34px; height: 34px;}
.work .icon_shift:before {background-image: url(../img/icon_shift.png);}
.work .icon_hours:before {background-image: url(../img/icon_hours.png);}

.head .total {font-size: 16px; color: #343445; font-weight: 400;}
.head .total em {color: #4f31d4; font-style: normal;}


/* table */
.table {position: relative;}
.table table {max-width: initial; text-align: left;}
.table caption {display: none;}

.table .tb-text {display: inline-block; padding: 10px 0; vertical-align: top;}
.table .tb-sub-text {font-size: 12px; color: #a5a5ba; font-weight: 400;}

.table .tr {display: flex; gap: 20px;}
.table .col {flex: 1;}


/* table list */
.table-list {border: 1px solid #e3e3e9; border-radius: 6px;}
.table-list a {position: relative; color: inherit;}

.table-list tr:hover {background-color: #f4f4fa;}
.table-list th {font-weight: 500; background-color: #f4f4fa;}
.table-list th,
.table-list td {padding: 8px 20px; height: 60px; line-height: 22px; font-size: 14px; border-bottom: 1px solid #e3e3e9; box-sizing: border-box;}
.table-list th {color: #4e4e69; font-weight: 500;}
.table-list tr:fist-child th:first-child {border-radius: 0 0 0 6px;}
.table-list td {color: #343445; font-weight: 400;}
.table-list tr:last-child td {border-bottom: 0;}

.table-list thead tr:first-child th:first-child {border-radius: 6px 0 0 0;}
.table-list thead tr:first-child th:last-child {border-radius: 0 6px 0 0;}
.table-list tbody tr:last-child td:first-child {border-radius: 0 0 0 6px;}
.table-list tbody tr:last-child td:last-child {border-radius: 0 0 6px 0;}

.table-list .subject a {display: inline-block; position: relative; max-width: calc(100% - 40px); vertical-align: top; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.table-list .state,
.table-list .control {text-align: center;}
.table-list .blank {height: 117px; font-size: 20px; color: #a5a5ba; font-weight: 500; background-color: #fff !important; text-align: center;}
.table-list .link a {margin-top: 1px;}
.table-list .link a:after {display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #343445;}
.table-list .link .profile-img + a {margin-left: 5px;}

.table-list .button-wrap,
.table-list .state-wrap {justify-content: center;}
.table-list .button-wrap.align-left {justify-content: left;}

.table-list .button-wrap.gap10 {gap: 10px;}
.table-list .button-wrap .button {padding: 5px; width: 60px;}

.table-list .depth2 .link a,
.table-list .depth3 .link a {color: #4f31d4;}

.table-list .depth2 td:first-child {position: relative; padding-left: 40px;}
.table-list .depth3 td:first-child {position: relative; padding-left: 60px;}
.table-list .depth2 td:first-child::before,
.table-list .depth3 td:first-child::before {display: block; content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 60px; background: url(../img/depth_arrow.png) right center no-repeat;}
.table-list .depth3 td:first-child::before {width: 50px;}

.table-list .depth2 .link a:after,
.table-list .depth3 .link a:after {background-color: #4f31d4;}

.table-list tr.read .subject {font-weight: 400;}
.table-list tr.unread .subject a {padding-right: 18px; font-weight: 500;}
.table-list tr.unread .subject a:after {display: block; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 1px; width: 8px; height: 8px; background-color: #9797ff; border-radius: 50%;}


/* table clean */
.table-clean th:last-child {text-align: center;}
.table-clean td:last-child {padding-left: 70px;}
.table-clean .select-wrap {gap: 0 40px;}
.table-clean .select-wrap .custom-select {width: 180px;}
.table-clean tr:hover {background-color: #fff;}


/* table regist */
.table-regist .tr {margin-top: 20px;}
.table-regist .tr:first-child {margin-top: 0 !important;}
.table-regist .th {display: flex; gap: 10px; align-items: baseline; width: 100%; height: 40px; line-height: 22px; font-size: 16px; color: #343445; font-weight: 500;}
.table-regist .td {line-height: 22px; font-size: 14px; color: #343445; font-weight: 400;}


/* table detail */
.table-detail a {color: inherit;}
.table-detail .subject {line-height: 1.2; font-size: 22px; color: #343445; font-weight: 500;}
.table-detail .subject strong {font-weight: inherit;}
.table-detail .subject .icon-lock {margin-top: 3px;}

.table-detail .gray {color: #a5a5ba;}

.table-detail .thead {margin-top: 13px; border-top: 1px solid #343445;}
.table-detail .tbody {padding: 30px 0; border-top: 1px solid #e3e3e9; border-bottom: 1px solid #e3e3e9;}

.table-detail .col {display: flex; width: 100%;}
.table-detail .col > div {width: calc(100% - 140px);}
.table-detail .col > div:first-child {width: 140px;}

.table-detail .col + .col {flex: none; width: 42.03%;}

.table-detail .tr {position: relative;}
.table-detail .th,
.table-detail .td {display: flex; align-items: center; padding: 9px 0; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; box-sizing: border-box;}
.table-detail .td {color: #4e4e69;}
.table-detail .align-top {align-items: baseline;}

.table-detail .writer {font-weight: 500;}

.table-detail .thead .th {align-items: center; height: 50px; color: #4e4e69;}
.table-detail .thead .button-wrap {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}

.table-detail .tbody .tr {padding-right: 20px;}
.table-detail .tbody .th,
.table-detail .tbody .td {font-size: 16px;}
.table-detail .tbody .th {font-weight: 500;}

.table-detail .text-box {padding: 14px; width: 100%; min-height: 140px; font-size: 14px; color: #343445; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.table-detail .text-box .image {display: block; margin-bottom: 10px; width: 600px; max-width: 100%; box-sizing: border-box;}
.table-detail .btn-admin {font-size: 14px;}


/* pagination */
.pagination {display: flex; gap: 10px; justify-content: center; position: relative; margin-top: 40px;}
.pagination button,
.pagination a {display: block; width: 40px; height: 40px; box-sizing: border-box;}

.pagination button:before {display: block; content: ''; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat;}

.pagination .btn-prev:before {background-image: url(../img/btn_prev.png);}
.pagination .btn-next:before {background-image: url(../img/btn_next.png);}
.pagination .btn-prev:disabled::before {background-image: url(../img/btn_prev_disabled.png);}
.pagination .btn-next:disabled::before {background-image: url(../img/btn_next_disabled.png);}

.pagination ul {display: flex; gap: 10px; list-style: none;}
.pagination li a {padding: 10px 5px; line-height: 20px; font-size: 14px; color: #4e4e69; border-radius: 6px; text-align: center;}
.pagination li a:hover {background-color: #f4f4fa;}
.pagination li.active a {color: #fff; background-color: #4f31d4;}


/* reply */
.reply {margin-top: 20px;}
.reply .total {font-size: 16px; color: #343445; font-weight: 400;}
.reply .total em {color: #4f31d4; font-style: normal;}
.reply-box {position: relative; margin-top: 8px; padding: 0 20px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.reply-box ul {list-style: none;}
.reply-box li {display: flex; gap: 10px; position: relative; padding: 25px 0; border-bottom: 1px solid #e3e3e9;}
.reply-box li .img {position: relative; width: 34px; height: 34px; border: 1px solid #e3e3e9; border-radius: 50%; box-sizing: border-box; overflow: hidden;}
.reply-box li .img img {vertical-align: top;width: 100%;height: 100%;}
.reply-box li .info {display: flex; gap: 5px 10px; flex-wrap: wrap; width: calc(100% - 74px); font-size: 14px; color: #343445;}
.reply-box li .info .name {font-weight: 500;}
.reply-box li .info .time {padding-top: 2px; font-size: 12px; color: #a5a5ba;}
.reply-box li .info .text {width: 100%;}
.reply-box li .btn-reply-delete {position: absolute; top: 25px; right: 0;}
.reply-box li .btn-reply-delete:before {width: 20px; height: 20px; background-image: url(../img/icon_delete_x.png);}

.reply-box .write {display: flex; align-items: center; padding: 30px 0;}
.reply-box .write .img {width: 34px; height: 34px; border: 1px solid #e3e3e9; border-radius: 50%; box-sizing: border-box; overflow: hidden;}
.reply-box .write .img img {vertical-align: top;width: 100%;height: 100%;}
.reply-box .write .input {margin: 0 20px 0 10px; width: calc(100% - 146px);}
.reply-box .write .button {width: 80px;}

.reply .pagination {margin-top: 20px;}


/* board */
.board {display: flex; position: relative; padding: 40px 40px 40px 0; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 10px; box-sizing: border-box;}
.board .left {width: 305px;}
.board .info {margin-bottom: 25px;}
.board .profile-img {display: block; margin: 0 auto 10px; width: 60px; height: 60px;}
.board .name {font-size: 0; text-align: center;}
.board .name span {display: inline-block; vertical-align: top;}
.board .name-ko {font-size: 18px; color: #343445; font-weight: 500;}
.board .name-en {margin: 3px 0 0 6px; font-size: 14px; color: #a5a5ba; font-weight: 400;}
.board .custom-select {margin: 0 auto; width: 160px;}
.board .custom-select .select-selected {border-radius: 8px;}

.board .box-wrap {flex: 1; display: flex; gap: 20px;}
.board .box {flex: 1; display: flex; justify-content: space-between; position: relative; padding: 20px 40px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 16px; box-sizing: border-box;}
.board .box .label {font-size: 18px; color: #343445; font-weight: 500;}
.board .box .label strong {display: block; margin-top: 8px; line-height: 1; font-size: 30px; color: #4e4e69; font-weight: 500;}
.board .box .label .color {color: #4f31d4;}
.board .box ul {list-style: none;}
.board .box li {display: flex; gap: 13px; align-items: center; justify-content: space-between; font-size: 16px; color: #4e4e69; font-weight: 400;}
.board .box li .justify {display: flex; justify-content: space-between; width: 65px;}


/* bottom */
.bottom {display: flex; justify-content: space-between; margin-top: 40px; width: 100%; box-sizing: border-box;}
.bottom ul {list-style: none;}
.bottom a {color: inherit;}


/* popup */
.popup {display: none; position: fixed; top: 0; left: 0; z-index: 200;}
.popup.active {display: block;}
.popup:before {display: block; content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 0 0 / 30%);}
.popup a {color: inherit;}

.popup-panel {position: fixed; right: 0; top: 0; padding: 80px 0 120px; width: 500px; height: 100%; background-color: #fff; box-sizing: border-box;}

.popup-top {display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; left: 0; padding: 20px 63px 20px 20px; width: 100%; height: 80px; background-color: #fff; border-bottom: 1px solid #a5a5ba; box-sizing: border-box;}
.popup-top h2.title {font-size: 20px; color: #343445; font-weight: 500;}
.popup-top .btn-close {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}

.popup-tab {position: relative;}
.popup-tab ul {display: flex; list-style: none;}
.popup-tab li {flex: 1;}
.popup-tab li a {display: flex; align-items: center; justify-content: center; position: relative; padding: 10px; height: 60px; font-size: 16px; color: #a5a5ba; font-weight: 400; border-bottom: 1px solid #e3e3e9; box-sizing: border-box;}
.popup-tab li.active a {color: #4f31d4; font-weight: 500;}
.popup-tab li.active a:after {display: block; content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #4f31d4;}

.popup-cont {position: relative; padding: 40px 20px; height: 100%; box-sizing: border-box; overflow-y: auto;}
.popup-tab + .popup-cont {height: calc(100% - 60px);}

.popup-bottom {position: absolute; bottom: 0; left: 0; width: 100%; padding: 40px 20px; background-color: #fff; box-sizing: border-box;}
.popup-bottom .button-wrap {justify-content: flex-end;}
.popup-bottom .button-wrap .button.color-border {position: absolute; top: 40px; left: 20px;}


/* popup - table edit */
.table-edit .col {display: flex;}
.table-edit .col > div {width: calc(100% - 140px);}
.table-edit .col > div:first-child {width: 140px;}
.table-edit .col > div.full {width: 100%;}

.table-edit .tr {position: relative; margin-top: 20px;}
.table-edit .tr:first-child {margin-top: 0;}
.table-edit .th,
.table-edit .td {display: flex; align-items: center; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; box-sizing: border-box;}
.table-edit .th {height: 50px;}
.table-edit .td {color: #4e4e69;}
.table-edit .align-top {align-items: baseline;}

.table-edit .tbody .th,
.table-edit .tbody .td {font-size: 16px;}
.table-edit .tbody .th {font-weight: 500;}

.table-edit .tbody .form .custom-select .select-option button {font-size: 14px;}

.table-edit .file-add {flex-wrap: wrap;}
.table-edit .file-button {display: flex; gap: 20px; align-items: center;}
.table-edit .file-button .text {flex: 1; font-size: 14px;}

.table-edit .selected-wrap {display: block; margin-top: 15px;}
.table-edit .selected-wrap .item {margin-top: 20px; color: #343445; font-weight: 500;}
.table-edit .selected-wrap .item:first-child {margin-top: 0;}


/* popup - schedule */
.sch-box {position: relative; margin-top: 20px; padding: 20px; line-height: 24px; font-size: 14px; color: #4e4e69; font-weight: 400; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.sch-box:first-child {margin-top: 0;}
.sch-box ul {list-style: none;}
.sch-box .profile-img {width: 18px; height: 18px; border: 0;}
.sch-box .date {font-size: 12px; color: #a5a5ba; font-weight: 400;}

.sch-box-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}

.sch-label {display: inline-block; padding: 2px 18px; height: 26px; line-height: 20px; font-size: 12px; font-weight: 500; background-color: #fff; border: 1px solid #000; border-radius: 18px; box-sizing: border-box;}


.sch-label-color {color: #4f31d4; background-color: #dedeff; border-color: #9797ff;}
.sch-label-orange {color: #f3870c; background-color: #fff0df; border-color: #f8d6b0;}
.sch-label-green {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.sch-label-blue {color: #2c86cd; background-color: #dbeefd; border-color: #90c2e9;}
.sch-label-purple {color: #a04ac2; background-color: #f6dfff; border-color: #ddb1ee;}
.sch-label-gray {color: #4e4e69; background-color: #f4f4fa; border-color: #a5a5ba;}

.sch-label.sch-waiting {color: #4e4e69; background-color: #e3e3e9; border-color: #a5a5ba;}

.sch-people-list {display: flex; gap: 10px; align-items: center; flex-wrap: wrap;}
.sch-people-list li {display: flex; gap: 3px; align-items: center;}

.sch-late-list li {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.sch-late-list li:first-child {margin-top: 0;}
.sch-late-list .left {display: flex; align-items: center;}
.sch-late-list .time {margin-right: 3px; font-weight: 500;}
.sch-late-list .late-hour {color: #343445;}


/* drawer */
.drawer {position: fixed; top: 0; right: 0; padding: 80px 0 60px; width: 400px; height: 100%; border-left: 1px solid #e3e3e9; box-sizing: border-box; z-index: 20;}
.drawer ul {list-style: none;}
.drawer a {color: inherit;}
.drawer h4.title {font-size: 16px; color: #343445; font-weight: 500;}
.drawer .subject {display: inline-block; line-height: 22px; font-size: 14px; color: #4e4e69; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.drawer .date {line-height: 22px; color: #a5a5ba; font-weight: 400;}

.drawer-cont {position: relative; padding-top: 160px; height: 100%; box-sizing: border-box;}
.drawer-box {position: relative; padding: 70px 20px 20px; border-top: 1px solid #e3e3e9; box-sizing: border-box;}
.drawer-box:first-child {border-top: 0;}
.drawer-box-head {display: flex; gap: 10px; align-items: center; position: absolute; top: 0; left: 0; padding: 0 20px; width: 100%; height: 60px; background-color: #fff; box-sizing: border-box;}
.drawer-box-head.justify {justify-content: space-between;}

.drawer-notice {position: absolute; top: 0; left: 0; width: 100%; height: 160px; box-sizing: border-box;}
.drawer-notice-list li {display: flex; gap: 20px; justify-content: space-between; margin-top: 20px;}
.drawer-notice-list li:first-child {margin-top: 0;}
.drawer-notice-list .subject {position: relative; max-width: calc(100% - 90px); font-weight: 500;}
.drawer-notice-list .date {width: 70px; font-size: 14px;}

.drawer-notice-list li.unread .subject {padding-right: 18px;}
.drawer-notice-list li.unread .subject:after {display: block; content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 1px; width: 8px; height: 8px; background-color: #9797ff; border-radius: 50%;}


.drawer-alarm {padding-bottom: 40px; max-height: 51.29%; height: 402px;}
.drawer-alarm .badge {padding: 0 7px; min-width: 20px; line-height: 20px; font-size: 12px; color: #fff; font-weight: 500; background-color: #ee4f4f; border-radius: 10px; text-align: center; box-sizing: border-box;}
.drawer-alarm-list {height: 100%; overflow-y: auto;}
.drawer-alarm-list::-webkit-scrollbar {width: 18px; height: 12px;}
.drawer-alarm-list::-webkit-scrollbar-thumb {background-color: #c0c2d0; border: 6px solid transparent; border-radius: 10px; background-clip: padding-box ;}
.drawer-alarm-list::-webkit-scrollbar-track {background-color: transparent;}
.drawer-alarm-list li {margin-top: 20px; padding: 11px 20px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.drawer-alarm-list li:first-child {margin-top: 0;}
.drawer-alarm-list .flex {display: flex; justify-content: space-between; margin-bottom: 10px;}
.drawer-alarm-list .label {width: 60%; font-size: 14px; color: #4f31d4; font-weight: 500;}
.drawer-alarm-list .subject {max-width: 100%;}
.drawer-alarm-list .profile-img {margin: 2px 3px 0 0; width: 18px; height: 18px; border: 0;}
.drawer-alarm-list .date {font-size: 12px;}

.drawer-event {max-height: 48.71%; height: 379px;}
.drawer-event .date {position: relative; padding: 0; font-size: 16px; border: 0; border-bottom: 1px solid #a5a5ba; border-radius: 0;}
.drawer-event .date input[type="date"] {padding: 0; width: 70px;}
.drawer-event .date input[type="date"]::-webkit-calendar-picker-indicator {width: 100%; opacity: 0;}
.drawer-event .profile-img {width: 34px; height: 34px;}

.drawer-out-list {max-height: 100%; overflow-y: auto;}
.drawer-out-list .label {display: flex; gap: 10px; align-items: center; justify-content: space-between; position: relative; margin-bottom: 5px; font-size: 12px; color: #4e4e69; font-weight: 500;}
.drawer-out-list .label:after {flex: 1 ;display: block; content: ''; width: 100%; height: 1px; background-color: #e3e3e9;}
.drawer-out-list .people + .label {margin-top: 20px;}

.drawer-late-list {max-height: 100%; font-size: 14px; color: #4e4e69; font-weight: 400; overflow-y: auto;}
.drawer-late-list li {display: flex; align-items: center; justify-content: space-between; margin-top: 10px;}
.drawer-late-list li:first-child {margin-top: 0;}
.drawer-late-list .left {display: flex; align-items: center;}
.drawer-late-list .time {margin: 0 3px 0 10px; font-weight: 500;}
.drawer-late-list .late-hour {color: #343445;}

.drawer-bottom {position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background-color: #fff; box-sizing: border-box;}
.drawer-bottom .button-wrap {justify-content: flex-end;}


/* page */
.page {display: flex; justify-content: center; padding: 320px 20px 0; min-height: 100vh; background: #f4f4fa url(../img/bg_u.png) center center no-repeat; box-sizing: border-box;}
.page.pd-t200 {padding-top: 200px;}
.page ul {list-style: none;}
.page a {color: inherit;}

.page-center {width: 440px;}

.page-logo {margin-bottom: 60px; text-align: center;}
.page-logo .logo {position: relative; margin-bottom: 20px;}
.page-logo .logo:before {display: block; content: ''; margin: 0 auto; width: 175px; height: 30px; background: url(../img/login_logo_uniport.png) center center no-repeat;}
.page-logo .welcome-text {font-size: 20px; color: #4e4e69; font-weight: 400;}

.page-head {text-align: center;}
.page-head .title {margin-bottom: 20px; line-height: 1; font-size: 22px; color: #1d1d26; font-weight: 500;}
.page-head p {font-size: 16px; color: #a5a5ba; font-weight: 400;}

.page-form {margin: 0 auto; width: 340px;}
.page-form .input-box {position: relative;}
.page-form .input-box + .input-box {margin-top: 20px;}
.page-form .input {padding: 13px 14px; width: 100%;}
.page-form .button {margin-top: 40px; padding: 15px 10px; width: 100%;}

.page-find {text-align: center;}
.page-find a {font-size: 14px; color: #4e4e69; font-weight: 400;}

.page-login + .page-find {margin-top: 10px;}
.page-head + .page-find {margin-top: 40px;}

.page-sns-login {margin: 20px auto 0; width: 340px;}
.page-sns-login .button {display: flex; gap: 4px; align-items: center; justify-content: center; width: 100%; height: 50px; color: #4e4e69; background-color: #f4f4fa;}
.page-sns-login .button:before {display: block; content: ''; width: 18px; height: 18px; background-position: center center; background-repeat: no-repeat;}
.page-sns-login .btn-microsoft:before {background-image: url(../img/sns_microsoft.png);}

.page-text {font-size: 16px; color: #4e4e69; font-weight: 400; text-align: center;}
.page-text .text {display: block;}
.page-text strong.text {line-height: 1.2; font-size: 30px; color: #343445; font-weight: 500;}
.page-text strong.text + .text {margin-top: 20px;}
.page-text .text.color {color: #4f31d4;}
.page-text .mg-t40 {margin-top: 40px;}

.page-bottom {position: fixed; bottom: 40px; left: 0; width: 100%;}

.page-error {padding-top: 340px; text-align: center;}
.page-error .mob-img {display: none;}

.page-bottom-logo {position: fixed; bottom: 40px; left: 0; width: 100%;}
.page-bottom-logo:before {display: block; content: ''; margin: 0 auto; width: 116px; height: 20px; background: url(../img/bottom_logo_uniport.png) center center no-repeat;}

/* 404, 505 */
@media (max-width: 1024px) {
    .page-error {padding-top: 0; align-items: center; justify-content: center; background-image: none;}
    .page-error-img {display: block; margin-bottom: 40px; text-align: center;}
    .page-error .pc-img {display: none;}
    .page-error .mob-img {display: inline-block;}
    .page-error .page-text strong.text {font-size: 20px;}

    .page-bottom-logo:before {width: 82px; height: 14px; background: url(../img/mob_bottom_logo_uniport.png) center center no-repeat;}
}


/* loading */
.loading {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; background-color: rgb(0 0 0 / 30%); z-index: 500;}
.spinner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px;
&:before {
     content: '';
     display: block;
     padding-top: 100%;
 }
}
.circular {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; animation: rotate 3s linear infinite; transform-origin: center center;}
.path {stroke-dasharray: 1, 200; stroke-dashoffset: 0; animation: dash 2.3s ease-in-out infinite, color 6s ease-in-out infinite; stroke-linecap: round;}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #4f31d4;
    }
}