@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;}
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"] {-webkit-appearance: none;background-image: -webkit-linear-gradient(transparent, transparent); appearance: none; -moz-appearance: none;height: 46px; text-align: left;text-align-last: left;}

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: 11px 10px; width: 340px; max-width: 100%; line-height: 22px; font-size: 12px; color: #343445; font-weight: 400; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; 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;}


/* checkbox - custom */
.check-wrap {display: flex; gap: 10px; width: 100%;}
.check-wrap.justify {justify-content: space-between;}

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

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

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


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

.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: 11px 10px; width: 100%; line-height: 22px; font-size: 12px; color: #343445; cursor: pointer; user-select: none; text-align: left; box-sizing: border-box;}

.custom-select .select-selected {position: relative; padding-right: 40px; color: #969bb5; background-color: #fff; border: 1px solid #d9dceb; border-radius: 6px; 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: 100%; background: #fff url(../images/mob_select_default.svg) 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(../images/mob_select_default_onclick.svg);}

.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 .textarea {height: 180px;}
 
.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 .err-msg {position: absolute; top: 100%; left: 0; width: 100%; font-size: 10px; color: #ee4f4f; font-weight: 400;}

.form .input.icon-clock {padding-right: 40px; background: #fff url(../images/mob_icon_clock.svg) right center no-repeat;}
.form .input.icon-date {padding-right: 40px; background: #fff url(../images/mob_icon_date.svg) right center no-repeat;}

.form.pw-change .button {padding: 9px 10px;}


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

.icon-lock:before {background-image: url(../images/mob_icon_lock.svg);}


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

.button {display: block; position: relative; padding: 12px 10px; width: 120px; line-height: 22px; 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: 10px 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: 400;}
.btn-icon:before {display: block; content: ''; width: 24px; height: 24px; background-position: center center; background-repeat: no-repeat;}

.btn-public:before {background-image: url(../images/mob_icon_public.svg);}
.btn-private:before {background-image: url(../images/mob_icon_private.svg);}
.btn-delete:before {background-image: url(../images/mob_icon_delete.svg);}
.btn-edit:before {background-image: url(../images/mob_icon_edit.svg);}
.btn-admin:before {background-image: url(../images/mob_icon_admin.svg);}


/* switch */
.switch-wrap {display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f4f4fa;}
.switch-text {font-size: 14px; color: #343445; font-weight: 500;}

.switch {position: relative; height: 24px;}
.switch input {position: absolute; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
.switch_label {display: inline-block; position: relative; width: 46px; height: 24px; background-color: #e3e3e9; border: 0; border-radius: 20px; box-sizing: border-box; transition: 0.2s; cursor: pointer;}
.switch .onf_btn {display: inline-block; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: 0.2s;}
.switch input:checked + .switch_label {background-color: #9797ff;}
.switch input:checked + .switch_label .onf_btn {left: 23px;}


/* header */
.header {position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; box-sizing: border-box; z-index: 50;}
.header:after {display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #e3e3e9;}
.header a {color: inherit;}
.header .logo {display: flex; align-items: center; justify-content: center; height: 60px;}
.header .logo a:before {display: block; content: ''; width: 116px; height: 20px; background: url(../images/logo_uniport_black.svg) center center no-repeat;}
.header .title {display: flex; align-items: center; justify-content: center; height: 60px; font-size: 18px; color: #343445; font-weight: 500;}
.header .btn-nav,
.header .btn-prev,
.header .btn-close {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; width: 64px; height: 60px;}
.header .btn-nav,
.header .btn-prev {left: 0;}
.header .btn-close {right: 0;}
.header .btn-nav:before {background-image: url(../images/mob_header_nav.svg);}
.header .btn-prev:before {background-image: url(../images/mob_header_prev.svg);}
.header .btn-close:before {background-image: url(../images/mob_header_close.svg);}


/* container */
.container {position: relative; padding: 60px 0 86px; min-height: 100vh; min-height: 100dvh; background-color: #fff; box-sizing: border-box;}
.container.pd-b0 {padding-bottom: 0;}

.container h3.title {font-size: 18px; color: #343445; font-weight: 500;}


/* cont */
.cont {position: relative; padding: 0 20px; min-height: calc(100vh - 146px); min-height: calc(100dvh - 146px); box-sizing: border-box;}
.container.pd-b0 .cont {min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px);}
.cont.bg {background-color: #f4f4fa;}


/* file */
.file-box .file-info {display: flex; gap: 4px; position: relative;}
.file-box .file-info .name {display: block; white-space: nowrap; text-overflow: ellipsis; max-width: calc(100% - 50px); font-size: 12px; color: #4e4e69; font-weight: 500; overflow: hidden;}
.file-box .file-info .size {display: block; width: 42px; font-size: 12px; color: #a5a5ba; font-weight: 400;}

.file {position: relative; width: 100%;}
.file .file-box {position: relative; padding: 10px 34px 10px 10px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file .file-box .size {font-size: 10px;min-width: 50px;max-width: 75px;}
.file .file-box .btn-file-down {position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.file .file-box .btn-file-down:before {background-image: url(../images/mob_file_download.svg);}

.file-add {position: relative; margin-top: 10px; width: 100%;}
.file-add .btn-file {display: flex; justify-content: center; align-items: center; position: relative; padding: 10px; width: 100%; height: 46px; font-size: 12px; color: #4f31d4; background-color: #f4f4fa; border: 1px dashed #9797ff; border-radius: 6px; box-sizing: border-box;}
.file-add .btn-file:before {display: block; content: ''; width: 24px; height: 24px; background: url(../images/mob_file_add.svg) center center no-repeat;}

.file-add .file-box {display: flex; align-items: center; position: relative; margin-top: 15px; padding: 15px 34px 15px 10px; width: 100%; height: 46px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.file-add .file-info {padding-left: 24px; width: 100%; box-sizing: border-box;}
.file-add .file-info:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/mob_file_document.svg) center center no-repeat;}

.file-add .file-box .btn-file-delete {position: absolute; top: 50%; right: 10px; transform: translateY(-50%);}
.file-add .file-box .btn-file-delete:before {background-image: url(../images/mob_file_delete.svg);}


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

.blank {display: block; padding: 40px 20px; font-size: 16px; color: #a5a5ba; font-weight: 500; text-align: center;}

.url {word-wrap: break-word}

.selected-wrap {display: flex; gap: 15px; justify-content: space-between; flex-wrap: wrap; padding: 10px 10px 20px;}
.selected-wrap .item {display: flex; gap: 10px;}
.selected-wrap .btn-select-delete:before {margin-top: 1px; width: 18px; height: 18px; background-image: url(../images/mob_icon_delete_x.svg);}


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


/* state */
.state-wrap {display: flex; gap: 10px;}
.state .item {display: block; margin-bottom: 10px; padding: 0 5px; width: 47px; height: 20px; line-height: 18px; font-size: 10px; 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;}


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

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

.table .info {display: flex; align-items: center; width: 100%; font-size: 12px; color: #a5a5ba; font-weight: 400;}
.table .writer {display: flex; gap: 0 4px; align-items: center;}
.table .profile-img {width: 14px; height: 14px;}
.table .info > span:before {display: inline-block; content: ''; margin: 0 8px; width: 1px; height: 10px; background-color: #e3e3e9;}


/* table - list */
.table-list {margin: 0 -20px;}
.table-list ul {list-style: none;}
.table-list li {border-bottom: 1px solid #f4f4fa;}
.table-list a {display: block; padding: 20px; color: inherit; box-sizing: border-box;}

.table-list .subject {font-size: 0;}
.table-list .subject-text {display: inline-block; position: relative; max-width: calc(100% - 30px); font-size: 16px; color: #343445; font-weight: 500; vertical-align: top; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.table-list .subject .icon-lock {margin-left: 4px;}

.table-list .info {margin-top: 10px;}

.table-list li.hide a {background-color: #f4f4fa;}
.table-list li.hide .subject-text {color: #a5a5ba;}

.table-list li.read .subject-text {font-weight: 400;}
.table-list li.unread .subject-text {padding-right: 18px;}
.table-list li.unread .subject-text: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 - detail */
.table-detail {padding-top: 30px;}

.table-detail a {color: inherit;}
.table-detail .subject {line-height: 1.5; font-size: 18px; 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 .btn-more {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.table-detail .btn-more:before {background-image: url(../images/mob_btn_more.svg);}

.table-detail .thead {margin-top: 20px; border-top: 1px solid #343445;}
.table-detail .tr {position: relative;}
.table-detail .th,
.table-detail .td {line-height: 22px; font-size: 14px; color: #343445; font-weight: 400; box-sizing: border-box;}
.table-detail .thead .tr {padding: 9px 0;}
.table-detail .tbody .tr {padding: 20px 0; border-top: 1px solid #e3e3e9;}
.table-detail .tbody .tr.pd-40 {padding: 40px 0;}
.table-detail .tbody .th {margin-bottom: 10px; font-weight: 500;}

.table-detail .text-box {padding: 20px 0;}
.table-detail .text-box .image {display: block; margin-bottom: 10px; width: 600px; max-width: 100%; box-sizing: border-box;}

.table-detail .row {display: flex; gap: 10px; margin-top: 20px; width: 100%;}
.table-detail .row:first-child {margin-top: 0;}
.table-detail .row .th {margin-bottom: 0; width: 72px;}
.table-detail .row .td {width: calc(100% - 82px); color: #4e4e69;}


/* table - regist */
.table-regist {padding-top: 20px;}
.table-regist .tr {margin-top: 20px;}
.table-regist .tr:first-child {margin-top: 0 !important;}

.table-regist .th {display: flex; gap: 6px; align-items: baseline; width: 100%; line-height: 20px; font-size: 14px; color: #343445; font-weight: 500;}      
.table-regist .td {margin-top: 10px; line-height: 22px; font-size: 14px; color: #343445; font-weight: 400;}

.table-regist .sns-onoff {position: relative; width: 100%;}
.table-regist .sns-box {display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px; height: 46px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box;}
.table-regist .sns-box .label {display: flex; gap: 5px; align-items: center; font-size: 14px; color: #4e4e69; font-weight: 500;}
.table-regist .sns-box .label.microsoft:before {display: block; content: ''; width: 14px; height: 14px; background: url(../images/sns_microsoft.svg) center center no-repeat; background-size: 14px 14px;}
.table-regist .sns-box .state {font-size: 12px; color: #4f31d4; font-weight: 400;}


/* reply */
.reply {padding-top: 40px; border-top: 1px solid #e3e3e9;}
.reply .total {font-size: 14px; color: #343445; font-weight: 400;}
.reply .total em {color: #4f31d4; font-style: normal;}
.reply-box {position: relative; margin-top: 10px; box-sizing: border-box;}
.reply-box ul {list-style: none;}
.reply-box li {display: flex; gap: 10px; position: relative; padding: 20px 0; border-top: 1px solid #f4f4fa;}
.reply-box li:first-child {border-top: 0;}
.reply-box li .img {position: relative; width: 34px; height: 34px; 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: 10px 6px; flex-wrap: wrap; width: calc(100% - 74px); font-size: 12px; color: #343445;}
.reply-box li .info .name {font-weight: 500;}
.reply-box li .info .time {color: #a5a5ba;}
.reply-box li .info .text {width: 100%; line-height: 1.6; font-size: 14px;}
.reply-box li .btn-reply-delete {position: absolute; top: 20px; right: 0;}
.reply-box li .btn-reply-delete:before {width: 24px; height: 24px; background-image: url(../images/mob_icon_delete_x.svg);}

.reply-box .write {position: relative; padding-bottom: 40px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 6px; box-sizing: border-box; overflow: hidden;}
.reply-box .write .textarea {height: 60px; border: 0; border-radius: 6px 6px 0 0;}
.reply-box .write .button {position: absolute; bottom: 10px; right: 10px; padding: 4px; width: 60px; font-size: 12px;}


/* bottom */
.bottom {position: fixed; left: 0; bottom: 0; padding: 20px; width: 100%; height: 86px; background-color: #fff; box-sizing: border-box; z-index: 30;}
.bottom .button {font-size: 16px;}


/* floating */
.floating {position: fixed; left: 20px; bottom: 20px; width: calc(100% - 40px); box-sizing: border-box; z-index: 30;}
.floating .button {font-size: 16px;}

.floating .btn-schedule {position: fixed; bottom: 20px; right: 20px; justify-content: center; width: 50px; height: 50px; background-color: #4f31d4; border-radius: 50%;}
.floating .btn-schedule:before {background-image: url(../images/mob_btn_schedule.svg);}


/* 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; left: 0; bottom: 0; width: 100%; background-color: #fff; border-radius: 16px 16px 0 0;}

.popup-head {display: flex; align-items: center; justify-content: center; position: relative; padding: 0 20px; height: 60px;}
.popup-head .title {font-size: 18px; color: #343445; font-weight: 500;}
.popup-head .btn-close {position: absolute; top: 18px; right: 20px;}
.popup-head .btn-close:before {background-image: url(../images/mob_icon_close.svg);}

.popup-cont {padding: 20px 20px 30px; box-sizing: border-box;}
.popup-head + .popup-cont {padding-top: 10px;}

.popup .button-list .btn-icon {gap: 8px; margin-top: 10px; width: 100%; height: 52px; font-size: 16px;}
.popup .button-list .btn-icon:first-child {margin-top: 0;}


/* page */
.page {padding-top: 100px; min-height: 100vh; min-height: 100dvh; background-color: #f4f4fa; box-sizing: border-box;}
.page ul {list-style: none;}
.page a {color: inherit;}

.page-center {padding: 0 20px;}

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

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

.page-form {position: relative;}
.page-form .input-box {position: relative; margin-top: 20px;}
.page-form .input-box + .input-box {margin-top: 20px;}
.page-form .input {width: 100%;}
.page-form .button {margin-top: 30px; width: 100%; font-size: 16px;}
.page-form .error-msg {display: block; position: absolute; top: 100%; left: 0; padding-left: 10px; width: 100%; font-size: 10px; color: #ee4f4f; text-align: left;}

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

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

.page-sns-login {margin-top: 30px;}
.page-sns-login .button {display: flex; gap: 6px; align-items: center; justify-content: center; width: 100%; height: 46px; font-size: 16px; color: #4e4e69; background-color: #f4f4fa;}
.page-sns-login .button:before {display: block; content: ''; width: 14px; height: 14px; background-position: center center; background-repeat: no-repeat;}
.page-sns-login .btn-microsoft:before {background-image: url(../images/sns_microsoft.svg); background-size: 14px 14px;}

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

.page-error {display: flex; align-items: center; justify-content: center; padding: 0 20px;}
.page-error-img {display: block; margin-bottom: 40px; text-align: center;}

.page-bottom {position: fixed; left: 0; bottom: 0; padding: 20px; width: 100%; height: 86px; background-color: #f4f4fa; box-sizing: border-box; z-index: 30;}
.page-bottom .button {font-size: 16px;}

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


/* status label */
.status-label {display: inline-block; padding: 3px 14px; line-height: 15px; font-size: 10px; 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;}


/* head */
.head {position: relative; margin: 0 -20px; padding: 20px; background-color: #fff;}


/* board */
.board {position: relative; margin: 0 -20px; padding: 20px; background-color: #f4f4fa;}
.board .box-wrap {display: flex; gap: 11px;}
.board .box {flex: 1; display: flex; align-items: center; justify-content: center; padding: 10px; height: 100px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 10px; box-shadow: 0 2px 6px 0 rgb(85 85 110 / 10%); box-sizing: border-box;}
.board .box .label {line-height: 1.2; font-size: 12px; color: #4e4e69; font-weight: 400;}
.board .box span {display: block; text-align: center;}
.board .box .number {margin-top: 10px; font-size: 20px; font-weight: 500;}

.board .total-box {border-color: #4f31d4;}
.board .total-box .number {color: #4f31d4;}


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

.tab-item {display: none;}
.tab-item.active {display: block;}


/* box list */
.box-list {position: relative; margin: 0 -20px; padding: 20px;}
.box-list .box {position: relative; margin-top: 20px; padding: 20px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 10px; box-sizing: border-box;}
.box-list .box:first-child {margin-top: 0;}
.box-list .box-top {display: flex; align-items: center; justify-content: space-between; line-height: 23px; font-size: 14px; color: #4e4e69; font-weight: 400;}
.box-list .box-top .label {display: flex; gap: 6px; align-items: center; line-height: 23px; font-size: 16px; color: #343445; font-weight: 500;}

.box-list ul {list-style: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid #f4f4fa;}
.box-list li {display: flex; align-items: center; justify-content: space-between; margin-top: 5px; font-size: 12px; color: #4e4e69; font-weight: 400;}
.box-list li:first-child {margin-top: 0;}
.box-list li .left {font-weight: 500;}
.box-list li .color {color: #4f31d4;}

.box-list .button-wrap {margin-top: 20px;}
.box-list .button {padding: 9px 10px;}


/* schedule head */
.cal-head {display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -20px; padding: 20px; background-color: #fff;}
.cal-head .month {position: relative; padding-left: 30px; line-height: 40px; font-size: 18px; color: #343445; font-weight: 500;}
.cal-head .month:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 24px; height: 24px; background: url(../images/mob_icon_calendar.svg) center center no-repeat;}
.cal-head .today {position: absolute; top: 24px; right: 20px; padding: 5px; width: 62px; font-size: 12px; letter-spacing: normal;}
.cal-head .week {margin-top: 10px; width: 100%;}
.cal-head .week ul {display: flex; gap: 9px; list-style: none;}
.cal-head .week li {flex: 1;}
.cal-head .week li a {display: flex; gap: 10px; align-items: center; align-content: center; flex-wrap: wrap; height: 68px; border-radius: 50px; box-sizing: border-box;}
.cal-head .week li span {width: 100%; text-align: center;}
.cal-head .week li .day {line-height: 1.2; font-size: 12px; color: #4e4e69; font-weight: 400;}
.cal-head .week li .date {list-style: 1.1; font-size: 16px; color: #343445; font-weight: 500;}
.cal-head .week li.sat .date {color: #9797ff;}
.cal-head .week li.sun .date {color: #ee4f4f;}
.cal-head .week li.active a {background-color: #4f31d4;}
.cal-head .week li.active .day,
.cal-head .week li.active .date {color: #fff;}

.cal-body {margin: 0 -20px; padding: 20px 10px;}


/* main */
.main .header {background-color: #1d1d26;}
.main .header:after {display: none;}
.main .header .logo a:before {background-image: url(../images/logo_uniport.svg);}
.main.invert .header {background-color: #fff;}
.main.invert .header:after {display: block;}
.main.invert .header .logo a:before {background-image: url(../images/logo_uniport_black.svg);}

.main .container {padding-bottom: 0;}
.main .container .cont {min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px);}

.main .cont-top {position: relative; margin: 0 -20px; padding: 30px 20px 40px; background-color: #1d1d26;}
.main .cont-top:after {display: block; content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 30px; background-color: #1d1d26;}

.main .my-box {margin-bottom: 20px;}
.main .my-info {display: flex; gap: 10px; align-items: center; margin-bottom: 20px;}
.main .my-info .profile-img {width: 34px; height: 34px;}
.main .my-info .text {font-size: 18px; color: #a5a5ba; font-weight: 500;}
.main .my-info .text em {color: #fff; font-style: normal;}
.main .my-board {padding: 14px 0; height: 80px; background-color: #343445; border: 1px solid #4e4e69; border-radius: 12px; box-sizing: border-box;}
.main .my-board .box-wrap {display: flex;}
.main .my-board .box {flex: 1; display: flex; align-items: center; position: relative; padding: 4px 20px; box-sizing: border-box;}
.main .my-board .box:before {display: block; content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: 50px; background-color: #4e4e69;}
.main .my-board .box:first-child::before {display: none;}
.main .my-board .box .label {line-height: 14px; font-size: 12px; color: #a5a5ba; font-weight: 400;}
.main .my-board .box span {display: block;}
.main .my-board .box .number {margin-top: 6px; line-height: 22px; font-size: 18px; color: #fff; font-weight: 500;}

.main .notice {display: flex; gap: 10px; align-items: center; position: relative; padding: 10px 86px 10px 14px; height: 46px; line-height: 18px; font-size: 12px; color: #a5a5ba; border: 1px solid #343445; border-radius: 10px; box-sizing: border-box;}
.main .notice .cate {flex: none; font-weight: 500;}
.main .notice .subject {display: block; white-space: nowrap; text-overflow: ellipsis; position: relative; font-size: 14px; color: #fff; overflow: hidden;}
.main .notice .subject.unread {padding-right: 12px;}
.main .notice .subject.unread: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%;}

.main .notice .date {position: absolute; top: 50%; right: 14px; transform: translateY(-50%);}

.main .sticky {position: relative; margin: 0 -20px; background-color: #fff; border-radius: 20px 20px 0 0; box-sizing: border-box; overflow-y: auto; z-index: 5;}
.main.invert .sticky {border-radius: 0;}
.main .sticky.maxh {max-height: calc(100vh - 50px); max-height: calc(100dvh - 50px); }
.main .sticky ul {list-style: none;}

.main .calendar {padding: 20px;}

.main .cal-head {margin: 0; padding: 0;}
.main .cal-list {margin-top: 20px;}
.main .cal-list > ul > li:nth-child(n+4) {display: none;}
.main .cal-list.all > ul > li:nth-child(n+4) {display: block;}

.main .cal-label-box {position: relative; margin-top: 6px;}
.main .cal-label-box:first-child {margin-top: 0;}

.main .cal-label {display: flex; gap: 5px; align-items: center; justify-content: space-between; padding: 8px 14px; width: 100%; height: 40px; font-size: 12px; font-weight: 500; background-color: #fff; border: 1px solid #000; border-radius: 20px; box-sizing: border-box;}
.main .cal-label-color {color: #4f31d4; background-color: #dedeff; border-color: #9797ff;}
.main .cal-label-orange {color: #f3870c; background-color: #fff0df; border-color: #f8d6b0;}
.main .cal-label-green {color: #2a9a6d; background-color: #e2fbf1; border-color: #a3dfc7;}
.main .cal-label-blue {color: #2c86cd; background-color: #dbeefd; border-color: #90c2e9;}
.main .cal-label-purple {color: #a04ac2; background-color: #f6dfff; border-color: #ddb1ee;}

.main .cal-waiting .cal-label {color: #4e4e69; background-color: #e3e3e9; border-color: #a5a5ba;}
.main .cal-waiting-text {font-weight: 400;}

.main .cal-people {flex: auto;}
.main .cal-people ul {display: flex; align-items: center; justify-content: flex-end; list-style: none;}
.main .cal-people ul li {margin-left: -3px;}
.main .cal-people ul li:first-child {margin-left: 0;}
.main .cal-profile-img {display: inline-block; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; vertical-align: top; overflow: hidden;}
.main .cal-profile-img img {vertical-align: top;width: 100%;height: 100%;}
.main .cal-profile-more {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 10px; color: #fff; font-weight: 500; background-color: #9797ff;}

.main .btn-cal-more {display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 30px;}
.main .btn-cal-more:before {background-image: url(../images/mob_btn_cal_more.svg);}
.main .cal-list.all .btn-cal-more:before {background-image: url(../images/mob_btn_cal_more_close.svg);}


.main .conference {padding: 20px 20px 26px; border-top: 10px solid #f4f4fa;}

.main .conference-box {position: relative; margin-top: 14px;}
.main .conference-box .label {display: flex; gap: 0 13px; justify-content: space-between; padding: 11px 14px; width: 100%; line-height: 20px; font-size: 14px; color: #343445; font-weight: 500; background-color: #fff; border: 1px solid #9797ff; border-radius: 10px; box-sizing: border-box;}
.main .conference-box .info {display: flex; gap: 0 3px; flex-direction: column; width: calc(100% - 60px);}
.main .conference-box .info span {padding: 2px 0; white-space: nowrap;}
.main .conference-box .info .label-text {flex: none; overflow: hidden;}
.main .conference-box .info .label-time {line-height: 14px; font-size: 12px; color: #a5a5ba; font-weight: 400;}

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

.main .conference .button {margin-top: 10px; padding: 9px 10px; background-color: #f4f4fa; border-radius: 10px;}

.main .conference .blank {margin-top: 20px; padding: 19px 20px; font-size: 14px; font-weight: 400; background-color: #f4f4fa; border-radius: 10px;}


/* popup - schedule */
.popup .sch-box {position: relative;}
.popup .sch-box-head {display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: #a5a5ba; font-weight: 400;}
.popup .sch-box-head .sch-label {color: #343445; font-weight: 500;}

.popup .sch-people-list {display: flex; gap: 20px; align-content: flex-start; flex-wrap: wrap; margin-top: 10px; padding: 20px; width: 100%; /*height: 182px; */border: 1px solid #e3e3e9; border-radius: 6px; list-style: none; box-sizing: border-box; overflow-y: auto;}

.popup .sch-people-list li {display: flex; gap: 10px; align-items: center; width: calc(50% - 10px);}
.popup .sch-people-list .profile-img {width: 34px; height: 34px;}


/* nav */
.nav {display: none; position: fixed; top: 0; left: 0; padding-top: 180px; width: 100%; height: 100%; background-color: #1d1d26; box-sizing: border-box; z-index: 500;}
.nav.active {display: block;}
.nav .nav-head {position: fixed; top: 0; left: 0; width: 100%;}
.nav .logo {display: flex; align-items: center; justify-content: center; height: 60px;}
.nav .logo a:before {display: block; content: ''; width: 116px; height: 20px; background: url(../images/logo_uniport.svg) center center no-repeat;}
.nav .btn-nav-close,
.nav .btn-alarm {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; width: 64px; height: 60px;}
.nav .btn-nav-close {left: 0;}
.nav .btn-nav-close:before {background-image: url(../images/mob_btn_nav_close.svg);}
.nav .btn-alarm {right: 0;}
.nav .btn-alarm:before {background-image: url(../images/mob_btn_alarm.svg);}
.nav .btn-alarm.active:before {background-image: url(../images/mob_btn_alarm_on.svg);}

.nav .user {position: fixed; top: 60px; left: 0; margin-bottom: 20px; padding: 27px 20px; width: 100%; height: 100px; box-sizing: border-box;}
.nav .user:after {display: block; content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; width: calc(100% - 40px); height: 1px; background-color: #343445;}

.nav .user-profile {display: flex; gap: 10px; align-items: center; position: relative; padding-right: 39px; width: 100%; height: 46px; box-sizing: border-box;}
.nav .user .img {width: 42px; height: 42px; border-radius: 50%; overflow: hidden; }
.nav .user .img img {vertical-align: top;width: 100%;height: 100%}
.nav .user .info {display: flex; flex-wrap: wrap; width: calc(100% - 56px);}
.nav .user .info .name {line-height: 27px; font-size: 18px; color: #fff; font-weight: 500;}
.nav .user .info .mail {display: block; margin-top: 3px; width: 100%; line-height: 14px; font-size: 12px; color: #a5a5ba; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.nav .user .btn-logout {display: block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 34px; height: 34px;}
.nav .user .btn-logout:before {display: block; content: ''; width: 100%; height: 100%; background: url(../images/mob_btn_logout.svg) center center no-repeat;}

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

.nav .menu {position: relative; padding-bottom: 68px; max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); overflow-y: auto; box-sizing: border-box;}
.nav .menu li {padding: 2px 8px;}
.nav .menu li a {display: flex; align-items: center; position: relative; padding: 8px 12px 8px 56px; height: 64px; font-size: 18px; color: #fff; font-weight: 400; border-radius: 10px; box-sizing: border-box;}

.nav .menu li a:before {display: block; content: ''; position: absolute; top: 15px; left: 12px; width: 34px; height: 34px; background-position: center center; background-repeat: no-repeat;}
.nav .menu li a.icon-notice:before {background-image: url(../images/mob_nav_notice.svg);}
.nav .menu li a.icon-vacation-history:before {background-image: url(../images/mob_nav_vacation_history.svg);}
.nav .menu li a.icon-qna:before {background-image: url(../images/mob_nav_qna.svg);}
.nav .menu li a.icon-conference:before {background-image: url(../images/mob_nav_conference.svg);}
.nav .menu li a.icon-buy:before {background-image: url(../images/mob_nav_buy.svg);}
.nav .menu li a.icon-vacation-approve:before {background-image: url(../images/mob_nav_vacation_approve.svg);}
.nav .menu li a.icon-vacation-status:before {background-image: url(../images/mob_nav_vacation_status.svg);}
.nav .menu li a.icon-work:before {background-image: url(../images/mob_nav_work.svg);}

.nav .menu li.active a {color: #fff; background-color: #4f31d4;}
.nav .menu li.active a.icon-notice:before {background-image: url(../images/mob_nav_notice_onclick.svg);}
.nav .menu li.active a.icon-vacation-history:before {background-image: url(../images/mob_nav_vacation_history_onclick.svg);}
.nav .menu li.active a.icon-qna:before {background-image: url(../images/mob_nav_qna_onclick.svg);}
.nav .menu li.active a.icon-conference:before {background-image: url(../images/mob_nav_conference_onclick.svg);}
.nav .menu li.active a.icon-buy:before {background-image: url(../images/mob_nav_buy_onclick.svg);}
.nav .menu li.active a.icon-vacation-approve:before {background-image: url(../images/mob_nav_vacation_approve_onclick.svg);}
.nav .menu li.active a.icon-vacation-status:before {background-image: url(../images/mob_nav_vacation_status_onclick.svg);}
.nav .menu li.active a.icon-work:before {background-image: url(../images/mob_nav_work_onclick.svg);}

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

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


/* alarm */
.alarm-list {margin: 0 -20px; padding: 0 20px; color: #4e4e69; font-weight: 400;}
.alarm-list .day {padding: 20px 0 10px;}
.alarm-list .date {display: block; margin-bottom: 10px; font-size: 16px; text-align: center;}

.alarm-list ul {list-style: none;}
.alarm-list li {margin-top: 10px; padding: 20px; background-color: #fff; border: 1px solid #e3e3e9; border-radius: 10px; box-sizing: border-box;}
.alarm-list li:first-child {margin-top: 0;}
.alarm-list .flex {display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; line-height: 19px;}
.alarm-list .label {font-size: 18px; color: #4f31d4; font-weight: 500;}
.alarm-list .subject {max-width: 100%;color:#4E4E69;}
.alarm-list .profile-img {margin-right: 4px;}
.alarm-list .time {font-size: 12px; color: #a5a5ba;}


/* profile */
.profile {}
.profile-photo {text-align: center;}
.profile-photo a {display: block; position: relative; margin: 0 auto; width: 62px; height: 62px;}
.profile-photo a:after {display: block; content: ''; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; background: url(../images/mob_icon_photo.svg) center center no-repeat;}
.profile-photo .profile-img {width: 100%; height: 100%;}
.profile-photo .btn-delete {margin-top: 10px; font-size: 12px; color: #4e4e69; font-weight: 400;}

.profile-info {margin-top: 20px; padding: 20px; background-color: #f4f4fa; border: 1px solid #e3e3e9; border-radius: 10px; box-sizing: border-box;}
.profile-info ul {list-style: none;}
.profile-info li {display: flex; align-items: center; justify-content: space-between; margin-top: 10px; line-height: 1.2; font-size: 12px; color: #4e4e69; font-weight: 400;}
.profile-info li:first-child {margin-top: 0;}


/* layer */
.layer {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; z-index: 501;}
.layer.active {display: block;}
.layer .header {background-color: #fff;}
.layer .header:after {display: block; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #e3e3e9;}
.layer .container {padding-bottom: 86px;}
.layer .selected-wrap {justify-content: flex-start;}


.sch-box + .sch-box {
    margin-top: 20px;
}