@charset "utf-8";

:root {
    --main-color: #1090CB;
    --secondary-color: #A6DEF8;
    --main-hover-color: #0579af;  
    --font-color: #141414; 
    --white-color: #ffffff;
    --red-color: #ff0000; 
    --left-side-bg: #E8F4FA; 
    --box-border: #e9e9e9;
    --table-hover-grey: #F4F4F4;
    --table-border: #c9c9c9;
    --light-grey: #C0C0C0;
    --dark-grey: #CCD2E3;
    --deep-grey: #AAAAAA;
    --board-hr-grey: #e9e9e9;
    --hover-grey: #eeeeee9f;
    --main-border: 1px solid var(--main-color);
    --input-border-grey: 1px solid var(--light-grey);
<<<<<<< HEAD
    --bg-black-op-5: #00000080;
=======
    --input-placeholder: #999;
    --bg-black-op-5: #00000080; 
>>>>>>> Prod2-Master
    --bg-black-op-3: #00000041;
    --shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    --icon-color: #a9a9a9;

    --todo-tag-color: #FEFCE8;
    --todo-tag-font-color: #A16207;

    --on-plan-tag-color: #EFF6FF;
    --on-plan-tag-font-color: #2563EB;

    --on-design-tag-color: #FFEFEF;
    --on-design-tag-font-color: #EB2525;

    --on-develop-tag-color: #F0FDF4;
    --on-develop-tag-font-color: #047857;

    --on-test-tag-color: #E1FFFF;
    --on-test-tag-font-color: #00046A;

    --done-tag-color: #F8F0FD;
    --done-tag-font-color: #6F0478;

    --project-inprogress-tag-color: #31CD6F;
    --project-done-tag-color: #C16ADF;
    --project-onhold-tag-color: #eeeeee;

    --schedule-color01: #FEB55C;
    --schedule-color02: #1BB3FF;
    --schedule-color03: #2ACB10;

    --approval-color01: #5A5A5A;
    --approval-color02: #2D9DD2;
    --approval-color03: #D94242;
    --approval-color04: #2ABD88;
    --approval-bg-color01: #F8F8F8;
    --approval-bg-color02: #F1F6F8;
    --approval-bg-color03: #FFF0F0;
    --approval-bg-color04: #F5F8F1;

    --working-edit-color: #FF9A3E;

}

body {
    font-size: 15px;
    color: var(--font-color);
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: -0.5px;
    -ms-overflow-style: none;
    background-color: var(--white-color);
    height: 100vh;
    overflow: hidden;
}

button {
    cursor: pointer;
}

input::placeholder,
input[type=date] {
    font-family: 'Pretendard', sans-serif;

}

textarea::placeholder {
    font-family: 'Pretendard', sans-serif;
}

.show {
    display: block !important;
}

#modal_common {
    position: absolute;
    z-index: 999;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
b,
table,
th,
tr,
td,
strong,
footer,
div,
input,
button,
select,
textarea,
label,
dd,
dl,
dt {
    font-family: 'Pretendard';
    letter-spacing: -0.5px;
}

.btn_cancle+button {
    margin-left: 30px;
}

.hidden {
    display: none;
}

select.form_control.arrow {
    min-width: 100px;
    display: block;
    line-height: 1.5;
    background-clip: padding-box;
    background: url(https://s3.unipware.com/unipware/images/arrow_down_black.png) calc(100% - 0.3rem) center no-repeat;
    background-color: var(--white-color);
    background-size: 9px;
    background-position: 92% 50%;
    outline: none;
}

/* 메인 페이지 */
#header {
    position: relative;
    width: 100%;
    height: 90px;
    /* overflow: hidden; */
    /* border-bottom: 1px solid var(--light-grey); */
    background-color: var(--white-color);
    z-index: 100;
}

#index_header {
    position: relative;
    width: 100%;
    height: 90px;
    z-index: 100;
}

.img_index {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    min-width: 400px;
}

.img_m_index {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: url(https://s3.unipware.com/unipware/images/img_m_index.jpg) 30% center no-repeat;
}

.main_copy {
    width: 80%;
    position: absolute;
    top: 20%;
    left: 15%;
}

.main_copy .thin {
    font-weight: 100;
    margin-bottom: -30px;
    font-size: clamp(40px, 6vw, 90px);
}

.main_copy .bold {
    font-weight: 600;
    margin-bottom: -30px;
    font-size: clamp(40px, 6vw, 90px);
}

.main_sub {
    font-size: clamp(15px, 4vw, 20px);
}

.header_wrap {
    height: 90px;
    margin: 0 40px;
}

.logo>div {
    width: 180px;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.logo>div>svg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.logo {
    cursor: pointer;
}

.m_logo {
    display: none;
    width: 50px;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.m_logo>img {
    width: 30px;
}

.nav_login>img {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    height: 100%;
    padding: 10px 0px;

}

nav.pc_nav>ul {
    height: 80px;
    display: flex;
    justify-content: center;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

nav.pc_nav>ul>li:last-child {
    color: var(--font-color);
}

nav.pc_nav>ul>li {
    position: relative;
    display: flex;
    align-items: center;
}

nav.pc_nav>ul>li:hover {
    background: var(--left-side-bg);
}

nav.pc_nav>ul>li>a {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0px 23px;
    height: 85px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.2px;
    word-break: keep-all;
}

.second_menu {
    width: 130px;
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    color: var(--font-color);
    text-align: center;
    background-color: var(--white-color);
    padding-bottom: 10px;
    letter-spacing: -0.3px;
    z-index: 100;
}

.second_menu>li:hover {
    color: var(--main-color);
    font-weight: 600;
}

.second_menu>li {
    border-top: 0;
    height: 33px;
    font-size: 15px;
    line-height: 15px;
    align-items: center;
    display: grid;
}

.lnb_active {
    color: var(--main-color) !important;
    font-weight: 400;
    position: relative;
}

.lnb_active_line {
    width: 100%;
    background: var(--main-color);
    height: 3px;
    position: absolute;
    bottom: 0;
}

.login {
    width: 120px;
    height: 40px;
    margin-top: 25px;
    border-radius: 20px;
    background-color: var(--main-color);
    color: var(--white-color);
    font-size: 16px;
}

.m_login {
    opacity: 0;
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background-color: var(--main-color);
    color: var(--white-color);
    font-size: 16px;
}

.m_login:after {
    display: block;
    content: "";
    width: 25px;
    height: 20px;
    background: url('https://s3.unipware.com/unipware/images/ico_login.svg') no-repeat center;
    background-size: contain;
    margin-left: 8px;
    margin-bottom: 2px;
}

.m_menu {
    cursor: pointer;
    width: 24px;
    margin: auto 0;
}

#mobile_nav_area {
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

.mobile_nav {
    padding: 55px 0px 0px 30px;
}

.mobile_nav_bg {
    width: 220px;
    height: 100vh;
    background-color: var(--white-color);
    margin: 0 0 0 auto;
    position: relative;
}

.m_close {
    position: absolute;
    top: 20px;
    right: 16px;
    cursor: pointer;
    width: 18px;
    fill: var(--icon-color);
}

.mobile_nav>li {
    padding: 10px 0;
}

.mobile_nav>li>a {
    display: flex;
    align-items: center;
}

.m_menu_icon {
    width: 15px;
    margin-right: 15px;
    fill: var(--light-grey);
}

.m_menu_icon_active {
    width: 15px;
    margin-right: 15px;
    filter: invert(46%) sepia(28%) saturate(1772%) hue-rotate(158deg) brightness(95%) contrast(95%);
}

.m_sub_menu {
    font-weight: normal;
    font-size: 14px;
}

.m_sub_menu>li {
    width: 100%;
    padding: 4px 0;
    padding-left: 31px;
}

.m_sub_menu>li>a {
    display: block;
}

.m_sub_menu {
    display: none;
}

.m_btn_login {
    text-align: center;
}

.mobile_signout_menu {
    position: absolute;
    bottom: 30px;
    left: 20px;
    color: #9c9c9c;
    font-weight: normal;
    font-size: 15px;
}

.mobile_signout_menu svg {
    fill: #9c9c9c;
}

/* 로그인 시 헤더 */
/* .profile_area {
    cursor: pointer;
    font-size: 18px;
    margin: auto 0;
    margin-left: 25px;
    position: relative;
    font-weight: bold;
}

.profile_click_show {
    display: none;
    position: absolute;
    top: 57.5px;
    right: -40px;
    background-color: var(--white-color);
    border: 1px solid var(--light-grey);
    text-align: center;
    width: 140px;
    z-index: 100;
    font-size: 15px;
}
.profile_click_show>div{
    padding: 4px 10px;
    border-bottom: 1px solid var(--light-grey);
    font-weight: normal;
}
.profile_click_show>div:last-of-type{
    border-bottom: 0;
} */

/* common footer */
footer#footer {
    width: 100%;
    height: 48px;
    border-top: 1px solid #D2D2D2;
    padding-top: 10px;
    font-size: 13px;
    color: #686868;
    text-align: center;
    background-color: var(--white-color);
    position: fixed;
    bottom: 0;
}

/* common left aside */
#left_aside {
    position: absolute;
    width: 240px;
    height: 100%;
    background-color: var(--left-side-bg);
    /* z-index: -1; */
}

.left_aside_menu,
.my_left_signout {
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
    padding: 7px 9px 7px 26px;
    color: var(--main-color);
}

.left_aside_menu.left_aside_active {
    color: var(--white-color);
    background-color: var(--main-color);
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.left_aside_menu:first-of-type {
    margin-top: 80px;
}

.my_left_signout {
    position: absolute;
    bottom: 17%;
    left: 0;
}

.aside_icon {
    width: 24px;
}

.aside_menu_title {
    width: 90px;
}

.right_arrow_icon {
    visibility: hidden;
    width: 39px;
    height: 39px;
    background-color: var(--white-color);
    border-radius: 100%;
    text-align: center;
    position: relative;
}

.right_arrow_icon>img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* common popup style */
.modal_popup {
    display: none;
    position: fixed;
    width: 100%;
    /* height: 100vh; */
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    background: var(--bg-black-op-5);
    z-index: 201;
}

.modal_toast {
    display: none;
    position: absolute;
    top: 132px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 20px;
    color: var(--white-color);
    background: #222;
    border-radius: 4px;
    z-index: 999;
}

.modal_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    min-height: 100px;
    overflow-y: auto !important;
    /* padding: 30px 16px; */
    background: var(--white-color);
    z-index: 101;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, .5);
}

.modal_wrap_line {
    border-bottom: 0.5px solid var(--icon-color);
    width: 100%;
}

.modal_form_control {
    display: block;
    padding: 5px 13px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 3px;
}

.modal_wrap_sm,
.modal_wrap_smd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    padding: 0px 16px 20px 16px;
    background: var(--white-color);
    z-index: 101;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, .5);
}

.modal_top_w_sm {
    padding: 15px 0px;
    background: var(--white-color);
}

.modal_top_w_share {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px 15px 20px;;    
}

.modal_wrap_smd {
    max-width: 350px;
    width: 100%;
}

.modal_wrap_md {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 550px;
    width: 100%;
    background: var(--white-color);
    z-index: 101;
    /* padding: 13px 0px; */
}

.modal_top_w {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px 15px 20px;
    background: var(--white-color);
}

.modal_title {
    font-weight: 600;
    font-size: 20px;
    color: var(--font-color);
}

.modal_control {
    width: 15px;
    cursor: pointer;
    margin-top: 5px;
}

.modal_scroll {
    padding: 0px 40px 20px 40px;
    max-height: 760px !important;
    /* height: 76vh; */
    overflow-y: auto;
    overflow-x: hidden;
}

.modal_scroll::-webkit-scrollbar {
    width: 6px;
    margin-right: 20px;
}

.modal_scroll::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    border-radius: 10px;
    margin-right: 20px;
}

.modal_scroll::-webkit-scrollbar-track {
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin-right: 20px;
}

.modal_wrap_lg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 900px;
    width: 100%;
    min-height: 50%;
    max-height: 90%;
    padding: 50px 60px;
    background: var(--white-color);
    z-index: 101;
}

.modal_contents_title {
    text-align: start;
    font-weight: 500;
    color: var(--main-color);
    font-size: 16px;
}

.modal_wrap.modal_wrap_md.document_upload {
    max-width: 450px;
}

.document_upload_w .modal_contents_title {
    width: 25%;
}

.document_tag+.document_tag {
    margin-right: 10px;
}

.document_tag:first-child {
    margin-right: 10px;
}

.document_tag {
    padding: 8px 10px;
    border: 1px solid var(--main-color);
    border-radius: 30px;
    color: var(--main-color);
    font-size: 14px;
    font-weight: 600;
}

.document_tag.choose_tag {
    background: var(--white-color);
    border: 1px solid var(--main-color);
}

.document_tag.choose_tag img {
    width: 15px;
    height: 15px;
}

.select_tag_bubble {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    background: var(--white-color);
    min-width: 250px;
    border-radius: 10px;
    padding: 10px;
}

.select_tag_bubble.active {
    display: block;
}

.select_tag_bubble .tag01 {
    color: #FF9E45;
}

.select_tag_bubble .tag02 {
    color: #FDD441;
}

.select_tag_bubble .tag03 {
    color: #35A600;
}

.select_tag_bubble .tag04 {
    color: #1366B6;
}

.select_tag_bubble .tag01::before {
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    margin-right: 10px;
    background: #FF9E45;
}

.select_tag_bubble .tag02::before {
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    margin-right: 10px;
    background: #FDD441;
}

.select_tag_bubble .tag03::before {
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    margin-right: 10px;
    background: #35A600;
}

.select_tag_bubble .tag04::before {
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    border-radius: 50%;
    margin-right: 10px;
    background: #1366B6;
}

.select_tag_bubble .icon_w img {
    width: 20px;
}

.select_tag_bubble .sel {
    padding: 4px 2px;
}

.select_tag_bubble .sel:hover {
    background: #f3f3f3;
    border-radius: 5px;
}

.select_tag_bubble .tag_line {
    border-top: 2px solid #f3f3f3;
    border-bottom: 0;
}

.btn_document_upload {
    width: 90px;
    padding: 8px 10px;
    background: var(--main-color);
    border-radius: 5px;
    color: var(--white-color);
    font-size: 16px;
}

.add_tag_text {
    color: var(--light-grey);
    text-align: left;
    font-size: 14px;
}

.btn_add_tag {
    width: 30px;
}

/* .modal_wrap>.modal_button {
    margin-top: 40px !important;
} */

/* .modal_button>button {
    width: 100px;
} */
.modal_btn_w {
    margin-top: 30px !important;
    width: 100%;
    justify-content: center;
}

.modal_btn_w button {
    margin: 3px;
    padding: 5px 20px;
    border-radius: 3px;
}

.modal_btn_w .btn_close_modal {
    background: var(--white-color);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

.modal_btn_ok,
.modal_btn_edit {
    background: var(--main-color);
    color: var(--white-color);
}

.modal_btn_delete {
    background: var(--on-design-tag-font-color);
    color: var(--white-color);
}

.modal_btn_close {
    background: var(--white-color);
    border: 1.5px solid var(--light-grey);
}

/* common main contents */
#main_contents {
    width: calc(100% - 240px);
    height: calc(100vh - 138px);
    overflow-y: auto !important;
    margin-left: 240px;
}

.wrap {
    width: 100%;
    height: 100%;
    margin-top: 85px;
    padding: 0 60px;
    /* padding-bottom: 100px; */
}

.wrap.console {
    margin-top: 65px;
}

/* index page */
.hero_image {
    width: 100%;
    height: 62vh;
    background: url('https://s3.unipware.com/unipware/images/hero_img.svg') no-repeat;
    background-position: center;
    background-size: cover;
}

.main_contact {
    position: absolute;
    width: 100%;
    bottom: 10%;
    text-align: center;
    font-size: 14px;
    line-height: 2;
    margin: 20px 0;
}

.contact_title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 17px;
}

.sns_icons {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.sns_icons>div {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: var(--white-color);
    box-shadow: var(--shadow);
    padding: 10px;
    margin: 0 5px;
    fill: var(--font-color);
}

.sns_icons svg {
    width: 17px;
}

/* pagination */
/* .pagination {
    display: flex;
    font-size: 15px;
    padding: 0 0 90px 0;
} */
.pagination ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.pagination .init {
    background: url(https://s3.unipware.com/unipware/images/ico_arrow_double_left.svg) no-repeat right;
}

.pagination .prev {
    background: url(https://s3.unipware.com/unipware/images/ico_arrow_left.svg) no-repeat center;
}

.pagination li.is-active {
    border-radius: 100%;
    border: 1px solid var(--main-color);
    color: var(--font-color);
    font-weight: 600;
}

.pagination li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    text-align: center;
}

.pagination li {
    display: inline-block;
    color: #a3a3a3;
    cursor: pointer;
}

.pagination .next {
    background: url(https://s3.unipware.com/unipware/images/ico_arrow_left.svg) no-repeat center;
    transform: rotate(180deg);
}

.pagination .last {
    background: url(https://s3.unipware.com/unipware/images/ico_arrow_double_right.svg) no-repeat left;
}






/* 로그인 */

main#login_wrap {
    width: 100%;
    height: 100%;
    position: relative;

    section {
        position: absolute;
        top: 40%;
        left: 50%;
        min-width: 750px;
        margin: 0 auto;
        background-color: var(--white-color);
        padding: 50px 80px 50px 50px;
        box-shadow: -3px 3px 15px #BBDBEA;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-between;
        border-radius: 30px;
        transition: all 0.3s;
    }
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.empty_box,
.img_login01,
.img_login02 {
    opacity: 0;
    animation: slideUp 0.8s ease forwards;
}

.empty_box {
    animation-delay: 0.2s;
}

.img_login01 {
    animation-delay: 0.4s;
}

.img_login02 {
    animation-delay: 0.6s;
}

@keyframes slideIn {
    0% {
        transform: translateX(-50px);
        /* 왼쪽에서 시작 */
        opacity: 0;
        /* 처음에는 투명 */
    }

    100% {
        transform: translateX(0);
        /* 제자리로 이동 */
        opacity: 1;
        /* 완전하게 나타남 */
    }
}

.login_w {
    opacity: 0;
    /* 기본적으로 요소를 숨김 */
    animation: slideIn 0.8s ease forwards;
    /* 애니메이션 적용 */
    animation-delay: 1.2s;
    /* 애니메이션 시작 전에 딜레이 추가 (원하는 만큼 조정 가능) */
}

.bg_gradient {
    position: absolute;
    width: 100%;
    height: 90%;
    z-index: -1;
    bottom: 0;
    background: linear-gradient(270deg, #F3FBFF, #D6F2FF, #A9E6FF, #F3FBFF);
    /* 그라데이션 색상 */
    background-size: 400% 400%;
    /* 애니메이션이 부드럽게 변하게 하기 위해 사이즈 확장 */
    animation: gradientAnimation 8s ease infinite;
    /* 울렁이는 효과 */
    filter: blur(10px);
    -webkit-filter: blur(100px);
}

.login_img_w {
    .empty_box {
        width: 143px;
        height: 143px;
        background: var(--main-color);
        border-radius: 30px;
        color: var(--white-color);
        font-size: 20px;
        font-weight: 200;
    }

    .img_login01 {
        width: 143px;
    }

    .img_login02 {
        width: 310px;
    }
}

.login_w {
    text-align: center;
    align-self: center;

    label {
        font-size: 24px;
        font-weight: 400;
    }

    .form_control {
        padding: 7px 16px;
        border-radius: 20px;
    }

    input:hover,
    input:focus {
        box-shadow: -2px 2px 6px #BBDBEA;
        border: 1px solid var(--main-color);
    }

    button {
        padding: 12px 16px;
        background: var(--main-color);
        color: var(--white-color);
        border-radius: 20px;
        width: 100%;
    }
}

.f_login_w {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 150px;
    background: url(https://s3.unipware.com/unipware/images/hero_img.jpg) no-repeat;
    background-position: center;
    background-size: cover;
}

.f_login_area {
    display: flex;
    width: 700px;
    height: 450px;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow);
    margin-bottom: 30px;
}

.img_face_login {
    position: relative;
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.img_face_login>img:first-child {
    position: absolute;
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.img_face_login>img:nth-child(2) {
    position: absolute;
    width: 275px;
    height: 244px;
}

.img_face_login>img:nth-child(3) {
    position: absolute;
    width: 275px;
    height: 244px;
    display: none;
}

.btn_face_login_area {
    position: absolute;
    width: 700px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
}

.btn_face_login {
    position: absolute;
    /* background: var(--main-color); */
    width: 270px;
    height: 270px;
    border-radius: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

.icon_face_login {
    margin-bottom: 20px;
}

.text_face_login {
    color: var(--main-color);
    font-size: 18px;
}

.btn_movetologin {
    background: var(--main-color);
    padding: 10px 20px;
    color: #fff;
    border-radius: 20px;
}


.login_area {
    width: 90%;
    max-width: 360px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
}

.h2_title {
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 40px;
}

.btn_login {
    width: 75%;
    max-width: 360px;
    height: 45px;
    border-radius: 6px;
    background-color: var(--main-color);
    color: var(--white-color);
    transition: background-color 0.3s;
}

.btn_login:hover {
    background-color: var(--main-hover-color);
    transition: background-color 0.3s;
}


/* 체크박스 */
.checks {
    position: relative;
    display: flex;
}

.checks input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.checks input[type="checkbox"]+label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.checks input[type="checkbox"]+label:before {
    /* 가짜 체크박스 */
    content: '\2714';
    color: var(--secondary-color);
    display: inline-block;
    font-size: 0.8rem;
    /* padding-left: 2px; */
    width: 17px;
    height: 17px;
    line-height: 18px;
    margin: 0px 8px 0 0;
    text-align: center;
    vertical-align: middle;
    background: var(--white-color);
    transition: all 0.3s;
    border-color: var(--light-grey) !important;
    border: 1px solid;
    border-radius: 3px;
}

.checks input[type="checkbox"]:checked+label:before {
    /* 체크박스를 체크했을때 */
    content: '\2714';
    /* 체크표시 유니코드 사용 */
    color: var(--white-color);
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
    transition: all 0.3s;
}


/* 콘솔 */
.table_wrap {
    max-width: 1440px;
    margin: 0 auto;
    white-space: nowrap;
    /* overflow: auto !important; */
}

.table_wrap table {
    border-bottom: 2px solid var(--light-grey) !important;
}

.table th {
    text-align: center;
    background-color: #f1f1f1;
    border-top: 0;
}

.data_table th {
    background: var(--white-color);
    border-top: 2px solid var(--main-color);
    border-bottom: 2px solid var(--main-color) !important;
}

.table-hover tbody tr:hover {
    color: var(--font-color);
    background-color: var(--left-side-bg);
}

.btn_correction,
.btn_delete,
.btn_edit,
.btn_position {
    cursor: pointer;
    width: 25px;
}

.data_table>tbody>tr>td {
    text-align: center;
}

/* 데이터베이스 */
.bg_database_add {
    position: absolute;
    z-index: -1;
    bottom: 0
}

.data_table>tbody>tr>td:last-of-type {
    text-align: end;
}

.database_wrap {
    position: relative;
    /* width: 80vw; */
    height: 65vh;
    margin: 0 auto;
    background-color: var(--white-color);
    padding: 30px;
    box-shadow: -3px 3px 15px #BBDBEA;
}

.input_div .top_fixed_cont {
    width: 100%;
}

.input_div .top_fixed_wrap {
    margin-bottom: 12px;
    color: var(--main-color);
    font-weight: 600;
    font-size: 16px;

    lable {
        line-height: 16px;
    }
}

.input_div .title {
    color: var(--main-color);
    font-weight: 400;
    white-space: nowrap;
}

.input_div .title::before {
    content: '';
    background-color: var(--main-color);
    height: 100%;
    padding: 2px;
    margin-right: 15px;
}

.input_div .title span {
    color: var(--on-design-tag-font-color);
}

.input_div .form_control {
    max-width: 400px;
    width: 100%;
}

.input_div .form_control.error {
    border: 1px solid var(--on-design-tag-font-color);
}

.database_wrap.api_add .form_control.error {
    border: 1px solid var(--on-design-tag-font-color);
}

select.form_control.arrow {
    min-width: 80px;
    display: block;
    line-height: 1.5;
    background-clip: padding-box;
    background: url(https://s3.unipware.com/unipware/images/arrow_down_black.png) calc(100% - 0.3rem) center no-repeat;
    background-color: var(--white-color);
    background-size: 9px;
    background-position: 95% 50%;
    outline: none;
}

.input_div textarea {
    max-width: 400px;
    width: 100%;
    min-height: 150px;
    resize: none;
}

.input_div .form_control:focus,
.modal_scroll input:focus,
.modal_scroll textarea:focus {
    border-color: var(--main-color);
    box-shadow: 1px 1px 5px #BBDBEA;
}

.database_wrap.add .contents {
    min-width: 550px;
    align-self: center;
}

.database_wrap.add>.input_div.query {
    align-items: start;
}

.database_wrap.add>.input_div>div:first-of-type {
    width: 180px;
}

.database_wrap.add>.input_div>textarea {
    width: calc(100% - 180px);
    min-height: 200px;
}

/* 데이터베이스 상세보기 */
.contents hr {
    border-top: 2px solid var(--main-color);
    border-bottom: 0px;
}

.database_wrap.detail .contents {
    min-width: 300px;
}

.detail_title_w>div {
    color: var(--main-color);
    font-size: 18px;
}

.detail_title_w img {
    width: 30px;
}

.database_wrap.detail .title {
    color: var(--main-color);
    white-space: nowrap;
    width: 40%;
}

.database_wrap.detail .content {
    width: 60%;
    max-width: 200px;
}

.text-overflow {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data_detail_table {
    text-align: left;
    position: relative;
}

.data_detail_table th {
    text-align: left;
    background: none;
    border-bottom: 2px solid var(--main-color) !important;
    white-space: nowrap;
    color: var(--main);
}

.data_detail_table .btn_w img {
    width: 30px;
}

.data_detail_table>tbody>tr>td,
.data_table>tbody>tr>td {
    vertical-align: middle;
    padding: 0.4rem 0.7rem;
}

.data_table.query>tbody>tr>td,
.data_table.distribution>tbody>tr>td,
.data_table.resource>tbody>tr>td,
.data_table.api>tbody>tr>td {
    padding: 0.6rem 0.7rem;
}

.data_detail_table>tbody {
    border-bottom: 1px solid var(--table-border);
}

.btn_add_table,
.btn_add_column {
    position: absolute;
    cursor: pointer;
    border: 1px solid var(--main-color);
    padding: 6px 10px;
    border-radius: 20px;
    background-color: var(--white-color);
    white-space: nowrap;
    color: var(--main-color);
    font-size: 13px;
    top: -10px;
    right: 10px;
    z-index: 1;
}

.btn_add_table::before,
.btn_add_column::before {
    content: '';
    width: 10px;
    height: 10px;
    display: flex;
    background: url(https://s3.unipware.com/unipware/images/ico_plus.svg) 50% 50% no-repeat;
    background-size: contain;
    margin-right: 6px;
}

.database_wrap.detail .pagination {
    padding-top: 0px;
}

.database_wrap.detail .btn_back {
    position: absolute;
    bottom: 0;
}

.modal_wrap.table_add {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 350px;
    width: 100%;
    background: var(--white-color);
    z-index: 101;
}

.modal_wrap.table_add .title {
    text-align: start;
    font-weight: 500;
    color: var(--main-color);
}

.modal_wrap.table_add input {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 6px;
    resize: none;
    width: 100%;
}

.modal_wrap.table_add textarea {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 6px;
    resize: none;
    width: 100%;
    min-height: 200px;
}

#descriptionTextarea,
#DBTableDesctiprion {
    min-height: 250px;
    border-radius: 5px;
    resize: none;
    padding: 5px 8px;
}

/* 쿼리관리 */

/* 쿼리 등록 */
/* .contents.query_add>div{
    max-width: 350px;
} */
.database_wrap.add.query_add.query_wrap {
    padding: 3.888% 10.256%;
}

.query_wrap .query_inputs_wrap {
    width: 100%;
}

.query_wrap .query_inputs_wrap .query_inputs_container {
    width: 48%;
}

.query_wrap .query_inputs_container.q_txtarea_wrap {
    min-width: unset;
}

.query_wrap .query_inputs_container.q_txtarea_wrap .title {
    min-width: 16.1%;
}

.query_wrap .query_inputs_wrap .query_inputs_container.q_column {
    flex-direction: column;
    align-self: start;
    min-width: unset;
}

.query_wrap .query_inputs_wrap .q_column li {
    margin-bottom: 1.5rem;
}

.query_wrap .add .contents {
    width: 100%
}

.query_wrap .query_inputs_wrap .input_div .form_control {
    max-width: 53.763%;
}

.contents.query_add .title {
    min-width: 33.602%;
}

/* .contents.query_add>div .form_control.arrow,
.contents.query_add>div .form_control{
    max-width: 230px;
} */
.contents.query_add textarea {
    max-width: unset;
    min-height: 190px;
}

.contents.query_add.query>div {
    max-width: none;
}



/* 쿼리 상세보기 */
.database_wrap.detail.query .contents {
    min-width: 800px;
}

.database_wrap.detail.query .btn_back {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
}

.database_wrap.detail.query .query_w {
    min-width: 400px;
}

.database_wrap.detail.query .title {
    width: 20%;
}

.database_wrap.detail.query .content {
    width: 80%;
    max-width: 280px;
}

/* 리소스관리 */
.mapping_table thead tr th {
    background-color: #f1f1f1;
}

/* API 추가 */
.api_add .title {
    color: var(--main-color);
    white-space: nowrap;
    width: 30%;
    margin-right: 20px;
}

.api_add .content {
    width: 100%;
}

.api_add span {
    color: var(--on-design-tag-font-color);
}

.database_wrap.api_add table>tbody>tr>td {
    padding: 0.6rem 0.7rem;
}

.database_wrap.api_add table thead tr th,
.database_wrap.api_add tbody tr td {
    text-align: center;
}

.database_wrap.api_add table thead tr th {
    color: var(--main-color);
}

.database_wrap.api_add table tbody tr.selected_row {
    background: var(--main-color);
    color: var(--white-color);
}

.database_wrap.api_add input,
.database_wrap.api_add textarea {
    width: 100%;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 3px;
    resize: none;
}

.database_wrap.api_add textarea {
    min-height: 200px;
}

.database_wrap.api_add textarea.short {
    min-height: 150px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox  */
input[type='number'] {
    -moz-appearance: textfield;
}

.database_wrap.api_add input::placeholder,
.database_wrap.api_add textarea::placeholder {
    color: var(--table-hover-grey);
    font-size: 14px;
}

.database_wrap.api_add .serch {
    padding: 8px 8px 8px 38px;
}

.database_wrap.api_add .search_delete_icon {
    top: 13px;
}

.database_wrap.api_add .btn_w button {
    padding: 0.4vw 1.5vw;
}

.data_search_area.add_api {
    position: absolute;
    min-width: 17vw;
    bottom: -5px;
}

.data_search_area.add_api {

    .btn_select,
    .select_item {
        min-width: 150px;
        border-radius: 3px;
    }

    .select_item {
        bottom: 50px;
        top: auto;
    }

    input {
        padding: 11px 8px 11px 38px !important;
    }
}

.pagination.add_api {
    li {
        width: 28px;
        height: 28px;
        line-height: 28px;
    }
}




.max_width_300 {
    max-width: 300px;
    width: 100%;
}

.max_width_600 {
    max-width: 600px;
    width: 100%;
}

.btn_modify,
.btn_save {
    cursor: pointer;
    color: var(--font-color);
    padding: 4px 16px;
    border-radius: 6px;
    background-color: var(--white-color);
    white-space: nowrap;
    border: 1px solid var(--dark-grey);
}

.database_table_icon>div {
    display: flex;
    justify-content: right;
}

.database_table_icon .btn_edit,
.database_table_icon .btn_position_change {
    width: 19px;
}

.database_table_icon .add_icon {
    width: 30px;
}

.input_distribution {
    display: block;
    /* height: calc(1.5em + 0.75rem + 2px); */
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    /* border-radius: 6px; */
}

table .middle td {
    vertical-align: middle;
}

.middle input:focus {
    box-shadow: inset 0 0 1px 1px var(--main-color);
}

.input_notice {
    color: #E60303;
    font-size: 13px;
    display: none;
}

.data_search_area {
    min-width: 400px;
    position: relative;
}

.data_search_area.wide {
    max-width: 500px;
    width: 100%;
    position: relative;
}

.data_form_control {
    display: block;
    padding: 8px 16px 8px 45px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    border: 1px solid #dedede;
    border-radius: 6px;
}

.data_form_control:focus {
    border: 2px solid var(--main-color);
    margin: -1px;
}

.btn_cancle {
    cursor: pointer;
    border: 2px solid var(--main-color);
    padding: 8px 35px;
    border-radius: 20px;
    background-color: var(--white-color);
    white-space: nowrap;
    color: var(--main-color);
    font-size: 16px;
}

.btn_back {
    cursor: pointer;
    border: 1px solid var(--main-color);
    padding: 8px 20px;
    border-radius: 20px;
    background-color: var(--white-color);
    white-space: nowrap;
    color: var(--main-color);
    font-size: 16px;
}

.btn_back::before {
    content: '';
    width: 15px;
    height: 15px;
    display: flex;
    background: url(https://s3.unipware.com/unipware/images/ico_back.svg) 50% 50% no-repeat;
    background-size: contain;
    margin-right: 10px;
}

.btn_console {
    cursor: pointer;
    color: var(--font-color);
    padding: 8px 35px;
    border-radius: 20px;
    background-color: var(--main-color);
    white-space: nowrap;
    color: var(--white-color);
    font-size: 16px;
}

/* (수정) 리소스 관리 - 241105 */
.api_mapping {
    margin-top: 40px;
    display: flex;
    height: 72dvh;

   .s_description {
        padding-right: 2%;
        width: 20%;
        border-right: 1px solid var(--board-hr-grey);
        flex-grow: 1;

        dl {
            dt {
                font-size: 16px;
                font-weight: 500;
                color: var(--main-color);
            }
            dd {
                font-size: 22px;
                font-weight: 500;
                word-break: break-all;
            }
        }
   }

   .s_resource {
        padding: 0 4%;
        width: 80%;

        .data_search_area {
            width: 400px;
        }
   }

   .api_wrap {
        position: relative;
        padding: 0 6px;
        max-height: 576px;

        ul {
            display: flex;
            padding: 10px 8px 10px 16px;
            width: 100%;

            li {
                text-align: center;

                img {
                    width: 12px;
                }

                img.btn {
                    width: 25px;
                }

                img.btn+img.btn {
                    margin-left: 5px;
                }
            }

            li:nth-of-type(1) {
                width: 30%;
                display: flex;
                justify-content: start;

            }
        
            li:nth-of-type(2) {
                    width: 10%
            }
            
            li:nth-of-type(3) {
                    width: 30%
            }
        
            li:nth-of-type(4) {
                    width: 15%
            }
        
            li:nth-of-type(5) {
                    width: 10%
            }
        
            li:nth-of-type(6) {
                    width: 5%
            }
        }

        .head {
                ul {
                    width: 100%;
                    color: var(--main-color);
                    font-weight: 500;

                    li:nth-of-type(1) {
                        justify-content: center;
                    }
            }
        }
        
        .ul_outline {
            box-shadow: 0px 0px 5px 1px rgba(16, 144, 203, 0.2);

            ul:not(:last-of-type) {
                border-bottom: 1px solid #e0e0e0;
            }

            ul.tree_top.active {
                background: var(--left-side-bg);
            }

            ul.tree.second {
                flex-wrap: wrap;

                li:nth-of-type(1) {
                    padding-left: 20px;
                }
            }

            ul.tree.third {
                flex-wrap: wrap;

                li:nth-of-type(1) {
                    padding-left: 40px;
                    white-space: wrap;
                    word-break: break-all;
                }
            }

            ul {
                li {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        transition: all 0.4s 0s;
                    }

                    img.rotate {
                        transform: rotate(90deg);
                        transition: all 0.4s 0s;
                    }

                    img.third {
                        transform: rotate(90deg);
                    }
                }

                li:nth-of-type(1){
                    justify-content: start;
                }
            }

            .query {
                justify-content: space-between;
                align-items: start;
                padding: 12px 0 4px 40px;

                textarea {
                    width: calc(100% - 66px);
                    height: 190px;
                    resize: none;
                }

                textarea:focus {
                    border-color: var(--main-color);
                    box-shadow: 1px 1px 5px #BBDBEA;
                }

                img {
                    width: 24px;
                }
                
            }

            ul:hover {
                background: #f8f8f8;
            }

        }

        p.query_alert {
            display: none;
            position: fixed;
            right: 33%;
            bottom: 160px;
            padding: 6px 32px;
            color: var(--white-color);
            font-weight: 600;
            background: #222;
            border-radius: 4px;
        }
   }
}

/* select */
.year {
    position: relative;
}

.year.active {
    z-index: 1;
}

.year.active .sel {
    border-radius: 5px 5px 0 0;
}

.year.active .sel:before {
    transform: rotate(180deg)
}

.year.active .lSel,
.year.active .sel_w {
    display: block;
}

.year>.sel {
    min-width: 140px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    position: relative;
    border: var(--input-border-grey);
    background-color: var(--white-color);
    border-radius: 5px;
    vertical-align: top;
    padding: 10px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
}

.year>.sel:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -5px;
    background: url(https://s3.unipware.com/unipware/images/ico_select2.svg) 50% 50% no-repeat;
    width: 10px;
    height: 10px;
    transition: all 0.4s 0s;
}

.lSel,
.sel_w {
    padding: 20px;
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    background-color: #fff;
    border: var(--input-border-grey);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 0 3px 3px;
    width: 100%;
    max-height: 153px;
    overflow: hidden;
    overflow-y: auto;
}

.modal_select>.sel {
    color: #7B7B7B;
    display: block;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 3px;
    text-align: left;
    position: relative;
    vertical-align: top;
    appearance: none;
}

.modal_select .lSel,
.modal_select .sel_w {
    top: 30px;
}

.modal_select.color>.sel {
    width: 90px !important;
    min-width: 0;
}

.modal_select .sel.disable {
    background-color: #D8D8D8 !important;
    color: #7B7B7B;
}

.lSel::-webkit-scrollbar {
    width: 5px;
    height: 2px;
}

.lSel::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 3px;
}

.lSel::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 2px;
    height: 10%;
}

.lSel::-webkit-scrollbar-thumb:hover {
    background: #d2d2d2;
}

.lSel button,
.sel_w button {
    text-align: left;
    display: block;
    border-radius: 5px;
    background-color: var(--white-color);
    font-size: 15px;
    font-weight: normal;
    padding: 6px 13px;
    width: 100%;
    transition: all 0.4s 0s;
}

.lSel button+button,
.sel_w button+button {
    margin-top: 3px;
}

.sel_w button:hover,
.sel_w button.active {
    background-color: var(--left-side-bg);
}

.sel_w button:hover,
.sel_w button.active {
    background-color: var(--left-side-bg);
}

/* 콘솔메뉴 */



/* 문서관리 */
.m_contents_top {
    height: 50px;
    background-color: var(--left-side-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.main_contents_top {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.m_contents_top>.title {
    font-size: 18px;
    font-weight: 600;
    display: flex;
}

.m_contents_top>.title div {
    margin-right: 12px;
    font-size: clamp(13px, 4vw, 16px);
}

.m_contents_top>.title div:last-child {
    margin-right: 0;
}

.unip_breadcrumb_arrow svg {
    width: 20px;
    fill: var(--light-grey)
}

.pc_breadcrumb {
    display: flex;
    padding: 20px 60px 0;
}

.pc_breadcrumb div {
    margin-right: 12px;
    color: #797979;
}

.pc_breadcrumb div:last-child {
    margin-right: 0;
    color: var(--main-color);
}

.upload_icon {
    width: 30px;
}

.select_tag,
.select_progess {
    width: 180px;
    min-width: 200px;
}

.select2 {
    width: 100% !important;
}

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important
}

.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 10px 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--light-grey) !important;
    border-radius: 10px;
}

.select_w {
    position: relative;
}

.btn_select {
    border: 1px solid var(--light-grey);
    background: var(--white-color);
    padding: 7.5px 10px;
    line-height: 1.5;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px;
    font-weight: 500;
    border-radius: 6px;
    position: relative;
}

.btn_select.doc {
    padding: 10px;
}

.btn_select::after {
    display: block;
    content: "";
    background: url(https://s3.unipware.com/unipware/images/ico_arrow.svg) 50% 50% no-repeat;
    width: 13px;
    height: 15px;
    transition: all 0.4s 0s;
    background-size: contain;
    margin: 0 6px;
}

.select_item {
    display: none;
    position: absolute;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, .5);
    background: var(--white-color);
    top: 40px;
    padding: 5px 0;
    max-height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 1;
    min-width: 200px;
}

.select_w.active .select_item {
    display: block;
}

.select_item button {
    background: var(--white-color);
    color: #000;
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px;
}

.select_item button:hover {
    background: var(--left-side-bg);
}

.select_w.active .btn_select::after {
    transform: rotate(180deg);
}


.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    border: 1px solid #d2d6de;
    padding: 10px 10px;
    height: 34px
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid var(--light-grey) !important;
    border-radius: 10px !important;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 10px
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
    height: auto;
    margin-top: -3px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--font-color);
    line-height: 25px
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    position: relative;
    border: 1px solid var(--light-grey);
    border-radius: 6px !important;
    padding: 10px 10px;
    height: 45px !important
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 6px !important;
    right: 1px;
    width: 20px
}

.select2-container--open .select2-dropdown--below {
    margin-top: 10px;
    border-radius: 6px !important;
    padding: 0 4px 4px 4px;
    width: 150px !important;
}

.select2-search--dropdown {
    text-align: center;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.select2-results__option {
    padding-left: 10px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--left-side-bg);
    color: var(--font-color);
    border-radius: 6px;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--left-side-bg);
    color: var(--font-color);
    font-weight: bold;
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 13px;
    height: 15px;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    right: 16px;
    background: url(https://s3.unipware.com/unipware/images/ico_arrow.svg) 50% 50% no-repeat;
    background-size: contain;
}

.select2-container--default .select2-results__option[aria-selected=true]::after {
    content: ' \2713';
    color: var(--main-color);
    float: right;
    margin-right: 10px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 0;
}

.select2-dropdown {
    border: 1px solid var(--light-grey) !important;
}

.form-group {
    margin-bottom: 0;
}

.tag_add_area {
    display: none;
    position: absolute;
    top: 54px;
    left: 0;
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 6px;
    padding: 20px 16px;
    z-index: 1;
}

.search_btn_area>div:first-of-type {
    margin-right: 21px;
}

.search_area {
    max-width: 400px;
    width: 100%;

    position: relative;
}

.search_area>input {
    display: block;
    padding: 10px 16px 10px 45px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    border: 1px solid var(--light-grey);
    border-radius: 6px;
}

.modal_form_control.share {
    display: block;
    width: 100%;
    height: 34px;
    padding: 10px 10px 10px 40px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid var(--light-grey) !important;
    border-radius: 10px;
}

.search_area>input::placeholder {
    color: #727272;
}

.search_icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    /* margin-top: 10px;
    margin-right: 8px; */
}

.search_delete_icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.btn_share_down {
    display: flex;
    cursor: pointer;
    width: 200px;
}

.btn_share_down div:hover,
.btn_notice_add:hover {
    background: var(--secondary-color);
}

.btn_add_down {
    display: flex;
    cursor: pointer;
    width: 150px;
    height: 45px;
}

.btn_add_down div {
    display: flex;
    justify-content: center;
}

.btn_add_down div:hover {
    background: var(--secondary-color);
    border: 0px;
    fill: var(--white-color);
}

.btn_upload,
.btn_download,
.btn_share,
.btn_document_delete,
.btn_poject_add {
    width: 45px;
    height: 45px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
}

.btn_notice_add {
    width: 40px;
    height: 40px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
}

.btn_share_down img,
.btn_notice_add img {
    width: 16px;
}

.card_wrap {
    width: 100%;
    margin-top: 40px;
}

.card_style {
    width: 100%;
    height: calc(100% - 20px);
    border: 1px solid var(--dark-grey);
    border-radius: 6px;
    padding: 15px 20px;
    margin-bottom: 20px;
    cursor: pointer;
}

.card_style.clicked {
    border-color: var(--main-color);
    box-shadow: 1px 1px 5px #BBDBEA;
}

.upload_date {
    font-size: 12px;
}

.document_title_edit_icon {
    width: 100%;
    display: flex;
    margin: 6px 0;
}

.document_title {
    font-size: 22px;
    max-width: calc(100% - 75px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--main-color);
}

.edit_icon {
    cursor: pointer;
    width: 30px !important;
    margin-right: 7px;
    display: flex;
}

.delete_icon {
    width: 30px;
}

.tag_area .document_tag {
    text-align: center;
    padding: 1px 10px;
    font-size: 13px;
    width: fit-content;
}

.tag_design {
    background: #FDD441;
}

.tag_develop {
    background: #35A600;
    ;
}

/* pagination */
.pagination {
    width: 100%;
    display: flex;
    font-size: 15px;
    padding: 15px 0;
}

.pagination ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.pagination li {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 2px;
    color: #a3a3a3;
    cursor: pointer;
}

.pagination li {
    width: 35px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    text-align: center;
}

.pagination li.is-active {
    border-radius: 100%;
    color: var(--font-color);
    font-weight: 600;
}

.pg_arrow {
    width: 35px;
}

.pg_arrow>svg>g>path {
    fill: #a3a3a3 !important;
}

.pg_arrow_right {
    transform: rotate(180deg);
}


/* 문서 업로드 */

.document_upload_w {
    width: 100%;
}

.document_upload_w>div>div.title {
    width: 150px;
    text-align: left;
}

.document_upload_w>div>div.contents {
    width: 100%;
}

.document_upload_w .document_tag {
    background: var(--light-grey);
    border: 0;
    color: var(--white-color);
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.add_schedule_wrap .document_tag {
    background: var(--light-grey);
    border: 0;
    color: var(--white-color);
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 300;
    display: flex;
    align-items: center;
}

/* .document_upload_w .document_tag:after, .add_schedule_wrap .document_tag:after{
    content: "";
    display: block;
    width: 15px;
    height: 15px;
    background: url(https://s3.unipware.com/unipware/images/ico_charge_cancle_s.svg) 50% 50% no-repeat;
    margin-left: 5px;
    cursor: pointer;
} */
.document_tag img {
    width: 10px;
    height: 10px;
    margin-left: 5px;
    cursor: pointer;
}

.people_sel.document {
    left: 0;
    width: 100%;
}

.document_upload_w textarea {
    min-height: 100px;
    resize: none;
}

.upload_tag_area {
    display: flex;
    text-align: center;
}

.upload_tag_area>button {
    min-width: 80px;
    margin-right: 10px;
    padding: 4px 12px;
    border-radius: 4px;
}

.btn_tag_01 {
    background: var(--dark-grey);
    border: 2px solid var(--dark-grey);
}

.btn_tag_01.active {
    border: 2px solid #a1a7b8;
}

.btn_tag_02 {
    background: #E49595;
    border: 2px solid #E49595;
}

.btn_tag_02.active {
    border: 2px solid rgb(153, 75, 75);
}

.btn_tag_03 {
    background: #A6DEF8;
    border: 2px solid #A6DEF8;
}

.btn_tag_03.active {
    border: 2px solid #88c1db;
}

.upload_area {
    cursor: pointer;
    width: 100%;
    height: 250px;
    border: 2px dashed var(--dark-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.upload_area svg {
    width: 55px;
    fill: var(--main-color);
}

.upload_area>div {
    text-align: center
}

.upload_text {
    color: #7B7B7B;
    font-size: 14px;
}

.upload_progress {
    text-align: left;
    font-size: 12px;
}

.progress_w {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.progress_area {
    width: 100%;
}

.progress {
    width: 100%;
    height: 5px;
    margin: 6px 0;
}

.progress-bar {
    background-color: #00DEA9;
}

.capacity_text {
    font-size: 10px;
    color: #AAAAAA;
    text-align: right;
}

.send_icon {
    width: 18px;
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
}

.send_icon svg {
    fill: var(--font-color);
}

/* 문서 상세보기 */
.detail_tag_area .document_tag {
    width: fit-content;
    padding: 4px 16px;
    margin-bottom: 5px;
}

.detail_tag_area>button {
    min-width: 80px;
    margin-right: 10px;
    padding: 4px 12px;
    border-radius: 4px;
}

.contents.file_upload_area {
    width: 100%;
    height: 127px;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    padding: 20px;
    border-style: dashed;
}

.contents.file_upload_area:hover {
    background: var(--left-side-bg);
}

.contents.file_info_area {
    display: none;
    width: 100%;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    padding: 20px;
}

.contents.file_info_area:hover {
    background: var(--left-side-bg);
}

.file_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.file_upload_area img {
    width: 30px;
}

.file_preview {
    max-width: 150px;
    height: 85px;
    background: var(--light-grey);
    border: 1px solid var(--light-grey);
}

.file_preview img {
    background-size: contain;
}

.file_name {
    text-decoration: underline;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-width: 250px;
}

.file_volume,
.upload_date {
    font-size: 13px;
}

.file_delete {
    width: 15px;
}

.comment.title {
    color: var(--main-color);
    font-weight: 500;
}

.comment.title::before {
    content: '';
    background-color: var(--main-color);
    height: 100%;
    padding: 2px;
    margin-right: 10px;
}

.document_detail_w>div.document_name {
    font-size: 23px;
}

.document_detail_w>div>div.contents {
    width: 100%;

}

.document_detail_w>div>div.title {
    width: 150px;
    text-align: left;
}

.document_detail_w>div>div.preview {
    width: 150px;
    text-align: left;
    margin-top: 10px;
}

.btn_share_download {
    display: flex;
    justify-content: end;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(-40%) translateX(-10%);
}

.preview_area {
    position: relative;
    width: 100%;
    min-height: 300px;
    border: 2px solid var(--dark-grey);
    margin: 10px 0;
}

.document_detail_w>div>div.text-left {
    width: 150px;
    text-align: left;
    margin-top: 5px;
}

.comment_wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-left: 5px;
}

.comment_wrap>div {
    align-items: start;
}

.comment_wrap .name {
    font-weight: 700;
}

.commenterName {
    font-weight: 500;
    color: var(--main-color);
}

.comment_wrap .date {
    font-size: 12px;
    color: #AAAAAA;
}

.comment_btn_w img {
    width: 25px;
}

.comment_file {
    display: none;
}

.comment_file .file_name {
    position: absolute;
    background: #5555554b;
    width: max-content;
    padding: 3px 10px;
    border-radius: 5px;
    right: 0;
    top: -41px;
    text-decoration: none;
}

.remove_file {
    width: 12px !important;
    margin-left: 8px;
    cursor: pointer;
}

.comment_file .triangle {
    position: absolute;
    width: 0px;
    height: 0;
    left: 3px;
    top: -13px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #5555554b;
}

.btn_comment_edit_file,
.btn_comment_edit_con,
.btn_comment_edit_cancel {
    display: none;
}

.btn_edit_con,
.btn_edit_cancel {
    display: none;
}

.btn_edit_con,
.btn_edit_cancel {
    width: 25px;
}

.comment_wrap_line {
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.comment_contents {
    font-size: 14px;
    width: 100%;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.cancel_comment_edit {
    display: none;
    width: 13px !important;
    position: absolute;
    top: 38px;
    right: 7px;
    z-index: 1000;
}

.comment_contents>input {
    padding: 4px;
}

.comment_contents textarea {
    width: 100%;
    padding: 5px;
    font-size: 14px;
    border: 1px solid var(--light-grey);
    border-radius: 4px;
    resize: none;
    margin-top: 2px;
    box-sizing: border-box;
    height: auto;
}

.comment_contents textarea:focus {
    box-shadow: none;
}

.comment.file_info_area {
    width: 100%;
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    padding: 10px;
}

.comment.file_info_area:hover {
    background: var(--left-side-bg);
}

.profile_icon,
.img_recomment {
    width: 30px;
    vertical-align: sub;
}

.detail_comment_input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--light-grey);
    padding: 8px 12px;
    resize: none;
    height: 35px;
    overflow: hidden;
    /* Ensure the content does not overflow */
}

.detail_comment_input:focus {
    border-color: var(--main-color);
    box-shadow: 1px 1px 5px #BBDBEA;
}


.detail_comment_inpute_icon {
    position: absolute;
    top: 8px;
    right: 10px;
}

.detail_comment_inpute_icon img {
    width: 15px;
}

.comment_file_bubble {
    position: absolute;
    padding: 5px 10px;
    top: -35px;
    right: 0;
    border-radius: 10px;
    text-decoration: underline;
    font-size: 14px;
    color: var(--main-color);
}

.btn_comment_file_bubble_delete {
    width: 10px;
}

/* modal share */
.tab_area {
    text-align-last: left;
    display: flex;
    padding: 0 20px;
}

.team_area {
    width: 100px;
    cursor: pointer;
    justify-content: space-between;
}

.team_area>div.active {
    color: var(--main-color);
    font-weight: 600;
}

.team_area>div {
    margin-bottom: 3px;
}

.vertical_line {
    width: 1.5px;
    background: #b2b2b2;
}

.name_area {
    width: 100%;
    padding: 0px 15px;
}

.name_area>.checks {
    margin-bottom: 3px;
}

.name_area_02,
.name_area_03,
.name_area_04 {
    display: none;
}

.selected_people_show_area {
    width: 100%;
    text-align: left;
    padding: 10px;
    border: 1px solid #eee;
    margin-top: 10px;
    min-height: 66px;
}






/* 프로젝트 목록 */
.wrap.project {
    margin-top: 65px;
}

.sel.project {
    padding: 7px 15px;
    min-width: 120px;
    font-size: 14px;
}

.lSel.project button {
    font-size: 14px;
}

.tag_progress_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.all_my_radio {
    display: flex;
    margin-bottom: 12px;
}

.all_my_radio>div {
    padding: 2px 14px;
    background-color: #C6C6C6;
    border-radius: 20px;
    cursor: pointer;
    color: var(--white-color);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0px;
}

.all_my_radio>div.active {
    background-color: var(--main-color);
}

.card_wrap.project .card_style {
    padding: 13px 20px;
}

.pj_tag {
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 13px;
    margin-top: 10px;
}

.pj_tag.on_01 {
    background: var(--on-plan-tag-color);
    color: var(--on-plan-tag-font-color);
}

.pj_tag.on_02 {
    background: var(--on-design-tag-color);
    color: var(--on-design-tag-font-color);
}

.pj_tag.on_03 {
    background: var(--on-develop-tag-color);
    color: var(--on-develop-tag-font-color);
}

/* (수정) 프로젝트 등록 - 241102 */
.main_contents_top_wrap {
    z-index: 99;
    position: sticky;
    top: 0;
    padding-bottom: 20px;
    background: var(--white-color);
}

/* 프로젝트 등록 */
#modalProjectAdd .project_progress button {
    font-size: 15px;
    font-weight: 500;
}

#modalProjectAdd .project_progress .todo {
    background: var(--on-design-tag-color);
    color: var(--on-design-tag-font-color);
}

#modalProjectAdd .project_progress .on {
    background: var(--on-develop-tag-color);
    color: var(--on-develop-tag-font-color);
}

#modalProjectAdd .project_progress .done {
    background: var(--on-plan-tag-color);
    color: var(--on-plan-tag-font-color);
}

.project_add_w>div>div.contents {
    width: 100%;
}

.project_add_w .modal_contents_title {
    width: 38%
}

.btn_find_customer {
    background: var(--main-color);
    border-radius: 4px;
    padding: 5px 5px;
    width: 35px;
}

.btn_find_customer img {
    width: 18px;
}

.project_add_w .lSel button {
    font-size: 14px;
}

.project_add_w .sel.project {
    padding: 5px 10px;
    color: #000;
    font-weight: 500;
}

.project_add_w .people_sel.document {
    top: 35px;
}

.charge_selectbox {
    min-width: 140px;
    padding: 6px 13px;
    font-size: 14px;
    border: 1px solid var(--light-grey);
    box-sizing: border-box;
    border-radius: 3px;
    text-align: left;
    background-color: var(--white-color);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
}

.form_bottom {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--dark-grey);
    height: 100%;
}

.project_add_w .form_bottom:focus {
    box-shadow: none;
}

.project_add_w .document_tag {
    border: 0;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.charge_list {
    position: absolute;
    display: none;
    width: 30%;
    top: 67px;
    border: 1px solid var(--light-grey);
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    z-index: 1;
}

.charge_list li button:hover,
.charge_list li button:focus {
    background-color: var(--main-color);
    color: var(--white-color);
}

.charge_name_w>input {
    width: 100%;
}

.img_plus {
    position: absolute;
    width: 18px;
    top: 60%;
    transform: translateY(-50%);
    right: 0;
    cursor: pointer;
}

.selected_charge {
    background: #ececec;
    padding: 5px 8px;
    border-radius: 7px;
    margin-right: 10px;
    font-size: 12px;
}

.calendar_area {
    display: flex;
    justify-content: space-between;
}

.project_add_w hr {
    width: 15%;
    height: 1px;
    border: none;
    background-color: var(--light-grey);
}

.project_summary {
    min-height: 70px;
    resize: none;
}

/* 프로젝트 등록 > 고객사 선택 */
.table_wrap.customer .table th {
    padding: 0.4rem 0.7rem;
}

.table_wrap.customer .data_table>tbody>tr>td:last-of-type {
    text-align: center;
}

.modal_wrap.customer .pagination {
    padding: 10px 0;
}

/* 프로젝트 상세보기 */
.pro_detail .pj_tag {
    margin-top: 0;
}

.pro_detail_modal_title {
    display: flex;
    align-items: center;
}

.charge_w_inner {
    display: flex;
    flex-wrap: wrap;
}

.charge_title {
    width: 120px;
    text-align: left;
    font-weight: 400;
    font-size: 16px;
    color: var(--main-color);
}

.pro_detail .document_tag {
    border: 0;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    padding: 3px 10px;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.charge_title>li {
    margin-bottom: 12px;
}

.charge_contents {
    text-align: left;
    font-size: 16px;
}

.charge_contents>li {
    margin-bottom: 12px;
}

.project_detail_w .project_tag_w {
    display: flex;
}

.pro_detail_title {
    width: 25%;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
}

.pro_detail_history_w img {
    width: 30px;
}

.pro_detail .scroll {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pro_detail_history_area {
    padding: 15px;
    box-shadow: 2px 2px 8px #BBDBEA;
    margin-bottom: 15px;
}

.btn_add_history {
    box-shadow: none;
    border: 1px solid var(--main-color);
    margin: 10px 0;
    border-radius: 10px;
    padding: 10px;
}

.btn_add_history:hover {
    background: var(--left-side-bg);
}

.btn_add_history:hover img {
    transform: rotate(90deg);
}

.btn_add_history .add_history {
    width: 30px;
    transition: transform 0.3s ease;
}

.pro_detail_history_area:hover {
    transform: scale(1.03);
    transition: all 0.3s;
}

.pro_detail_history_area .profile {
    width: 20px;
}

.pro_detail_history_area .name {
    color: var(--main-color);
}

.pro_detail_history_area .date {
    font-size: 12px;
    color: var(--icon-color);
}

.pro_detail_history_area .content {
    text-align: left;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
}

.history_content img {
    width: 15px;
}

.history_content {
    .file_name {
        text-decoration: none;
        max-width: 300px;
    }

    .comment_file_w {
        font-size: 13px;
        color: #5d5d5d;
    }
}

.pro_detail_history_title {
    width: 30%;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    margin-right: 10px;
}

.pro_detail_history_name {
    width: 13%;
}

.pro_detail_history_date {
    width: 25%;
}

.pro_detail_history_comment_w {
    display: flex;
    justify-content: end;
    width: 30%;
}

.pro_detail_history_comment {
    margin-right: 10px;
}

.pro_detail_history_comment {
    min-width: 50px;
    border: 1px solid var(--dark-grey);
    border-radius: 20px;
    display: flex;
    padding: 3px;
    justify-content: center;
}

.pro_detail_history_file {
    min-width: 55px;
    border: 1px solid var(--dark-grey);
    border-radius: 20px;
    display: flex;
    padding: 3px 3px 3px 5px;
}

.pro_detail_history_comment div,
.pro_detail_history_file div {
    width: 13px;
    display: flex;
    align-items: center;
    margin-right: 2px;
}

.pro_detail_history_comment svg {
    margin-bottom: 1.5px;
}

.pro_detail_history_line {
    border-bottom: 1px solid var(--light-grey);
    margin: 13px 0px;
    width: 100%;
}

.project_detail_w .project_tag_w button,
.project_detail_w .range_3step,
.project_detail_w .pro_detail_progress,
.project_detail_w .range-labels {
    pointer-events: none;
}

/* 프로젝트 > HISTORY 등록 팝업 */
.history_upload_w .modal_contents_title {
    width: 30%;
}

.history_contents input {
    min-height: 140px;
}

.btn_file_upload_w {
    text-align: start;
    display: flex;
    align-items: center;
}

.btn_file_upload {
    display: flex;
    padding: 5px 10px;
    border-radius: 3px;
    background: var(--left-side-bg);
    color: var(--font-color);
    margin-right: 15px;
    align-items: center;
}

.btn_file_upload svg {
    width: 25px;
    fill: var(--font-color);
}

<<<<<<< HEAD
/* 프로젝트 등록 - 241016 */
=======
/* (수정) 프로젝트 등록 - 241016 */
>>>>>>> Prod2-Master
.wrap.project_detail_wrap {
    margin-top: 8px;
}

.project_info,
.project_history,
<<<<<<< HEAD
.history_view {
    height: 748px;
    background: var(--white-color);
    box-shadow: 0px 4px 4px rgba(16, 144, 203, 0.25);
}

.project_info {
    width: 23.076%;
=======
.history_view,
.manage_view {
    height: 80dvh;
    background: var(--white-color);
    box-shadow: 0px -1px 5px 1px rgba(16, 144, 203, 0.25);
}

.project_info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 26%;
>>>>>>> Prod2-Master
    padding: 20px;
}

.project_info h3 {
    font-size: 22px;
    font-weight: 600;
<<<<<<< HEAD
    line-height: 1;
=======
    line-height: 1.3;
>>>>>>> Prod2-Master
    overflow: hidden;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}

.project_info .pj_tag {
    width: fit-content;
    margin-bottom: 12px;
}

<<<<<<< HEAD
.project_info .dev-project-tags {
    margin-bottom: 36px;
    height: 116px;
=======
.project_info .pj_tag.project_progress.on {
    background: var(--on-develop-tag-color);
    color: var(--on-develop-tag-font-color);
}

.project_info .dev-project-tags {
    margin-bottom: 24px;
    max-height: 116px;
}

.project_info .tabs {
    cursor: pointer;
    position: absolute;
    top: 18px;
    right: 18px;

    li {
        padding: 2px 8px;
        color: var(--main-color);
        font-size: 14px;
        border-radius: 4px;
        border: 1px solid var(--main-color);
    }

    li:hover {
        background: #f9f9f9;
    }

    li:first-of-type {
        margin-right: 6px;
    }

    li.active {
        color: var(--white-color);
        background: var(--main-color);
    }
>>>>>>> Prod2-Master
}


.s_hover.scroll::-webkit-scrollbar-track,
.s_hover.scroll::-webkit-scrollbar-thumb {
    visibility: hidden;
}

.s_hover.scroll:hover::-webkit-scrollbar-thumb {
    visibility: visible;
}


.project_info .document_tag {
    padding: 2px 8px;
<<<<<<< HEAD
    margin: 0 2px 2px 0;
=======
    margin: 0 4px 4px 0;
    font-size: 13px;
>>>>>>> Prod2-Master
}

.project_info img.buttons {
    cursor: pointer;
    margin-left: 12px;
    width: 24px;
<<<<<<< HEAD
=======
    height: 24px;
>>>>>>> Prod2-Master
}

.project_info .info_txt h4 {
    padding-left : 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 17px;
    color: var(--main-color);
    border-left: 3px solid var(--main-color);
}

.project_info .info_txt > p {
    padding-left: 12px;
    margin: 6px 0 16px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

<<<<<<< HEAD
.project_info .info_txt .btn_file_upload {
    padding: 6px 12px;
    margin-right: 0;
=======
.project_info .info_txt .figma_wrap {
    position: relative;
    margin:  0 4px 0 auto;

    .btn_goto_figma {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: var(--white-color);
        border: 1px solid #dbdbdb;
        border-radius: 4px;
    
        img {
            width: 12px;
        }
    }

    .btn_goto_figma:hover {
        background: #f9f9f9;
    }
    
    span {
        display: none;
        position: absolute;
        top: 38px;
        right: 0;
        padding: 4px 0;
        width: 130px;
        background: #333;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        color: var(--white-color);
        border-radius: 4px;
        z-index: 100;
    }
}

.project_info .info_txt .figma_wrap:hover span {
    display: block;
}




.project_info .info_txt .btn_file_upload {
    padding: 0 12px;
    align-self: end;
    margin-right: 0;
    height: 30px;
>>>>>>> Prod2-Master
    font-size: 14px;
    color: var(--white-color);
    border-radius: 4px;
    background: var(--main-color);
}

.project_info .info_txt ul {
<<<<<<< HEAD
    margin: 12px 0 36px 0;
    height: 106px;
=======
    margin: 12px 0 24px 0;
    height: 108px;
>>>>>>> Prod2-Master
    overflow-y: auto;
    border: 1px solid #DBDBDB;
    border-radius: 12px;
}

.project_info .info_txt ul li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 5px 6px;
    border-bottom: 1px solid #DBDBDB;
}

<<<<<<< HEAD
=======
.project_info .info_txt ul li.no_contents {
    padding: 40px 0 0 0;
    justify-content: center;
    font-size: 15px;
    color: var(--light-grey);
    border: none;
}

.project_info .info_txt ul li:hover.no_contents {
    background: var(--white-color);
}

>>>>>>> Prod2-Master
.project_info .info_txt ul li:hover,
.project_info .info_txt ul li:hover button {
    background: var(--left-side-bg);
}

.project_info .info_txt ul li:hover .type {
    background: var(--white-color);
}

.project_info .info_txt ul li .type {
<<<<<<< HEAD
    width: 68px;
    padding: 2px 6px;
    margin-right: 8px;
    font-size: 14px;
=======
    width: fit-content;
    padding: 2px 6px;
    margin-right: 8px;
    font-size: 14px;
    text-align: center;
>>>>>>> Prod2-Master
    color: var(--main-color);
    border-radius: 4px;
    background: #EBF6FB;
}

<<<<<<< HEAD
.project_info .info_txt ul li .type.long_txt {
    padding: 2px 0;
    width: 92px;
    text-align: center;
}

.project_info .info_txt ul li .txt_wrap {
    width: 90%;
=======
.project_info .info_txt ul li .txt_wrap {
    width: 60%;
>>>>>>> Prod2-Master
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

.project_info .info_txt ul li button {
    position: absolute;
    right: 62px;
    padding: 0 4px;
    width: 32px;
    z-index: 99;
    background: var(--white-color);
}

.project_info .info_txt ul li button:hover .tooltip {
    display: block;
}

.project_info .info_txt ul li .tooltip {
    display: none;
    position: absolute;
    padding: 6px 0;
    width: 64px;
    background: #333;
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    border-radius: 4px;
    z-index: 99;
}

.project_info .info_txt ul li .txt_wrap p {
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    display: inline-block;
    white-space: nowrap;
}

.project_info .info_txt ul li .txt_wrap.hover p {
    animation: scrollText 5s linear infinite;  
}

@keyframes scrollText {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }




.project_info .info_txt ul li .date {
    margin-left: auto;
    font-size: 12px;
    color: #7A7A7A;
}

<<<<<<< HEAD
.project_info button.go_to_list {
    padding: 6px 8px;
=======
.go_to_list {
    padding: 6px 8px;
    width: fit-content;
>>>>>>> Prod2-Master
    font-size: 14px;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 6px;
    background: var(--white-color);
}

<<<<<<< HEAD
.project_info button.go_to_list img {
=======
.go_to_list img {
>>>>>>> Prod2-Master
    width: 10px;
}

.project_history {
<<<<<<< HEAD
    width: 22.307%;
=======
    width: 30%;
>>>>>>> Prod2-Master
}

.project_history h3 {
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
}

.project_history .btn_history_add {
    margin-right: 20px;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    background: var(--white-color);
    box-shadow: 0px 0px 8px rgba(16, 144, 203, 0.4);
    transition: transform 0.3s ease;
}

.project_history .btn_history_add:hover {
    transform: rotate(90deg);
}

.project_history .history_contents {
    display: none;
<<<<<<< HEAD
    height: 600px;

=======
    height: calc(100% - 102px)
>>>>>>> Prod2-Master
}

.project_history .history_contents.on {
    display: block;
}

.project_history .history_contents ul li:hover {
    background: var(--left-side-bg);
}

<<<<<<< HEAD
=======
.project_history .history_contents ul li.no_comment {
    cursor: default;
    text-align: center;
    color: var(--light-grey);
    border-bottom: none;
}

.project_history .history_contents ul li:hover.no_comment {
    background: none;
}

>>>>>>> Prod2-Master
.project_history > ul {
    padding-left: 8px;
    border-bottom: 1px solid #F1F1F1;
}

.project_history > ul li {
    cursor: pointer;
    padding: 0 12px 6px;
    color: #828282;
    font-weight: 500;
}

.project_history > ul li.on {
    color: var(--main-color);
    font-weight: 700;
    border-bottom: 2px solid var(--main-color);
}

.project_history .history_contents ul li {
    cursor: pointer;
    padding: 16px 20px 10px; 
    border-bottom: 1px solid #DBDBDB;
}

<<<<<<< HEAD
=======
.project_history .history_contents ul li:last-of-type {
    border-bottom: 0;
}

>>>>>>> Prod2-Master
.project_history .history_contents ul li.on {
    background: var(--left-side-bg);
}

.project_history .history_contents ul li .d-flex p {
    margin: 0 8px;
<<<<<<< HEAD
    font-size: 16px;
=======
    font-size: 14px;
>>>>>>> Prod2-Master
    font-weight: 600;
}

.project_history .history_contents ul li .date {
    margin-left: auto;
    font-size: 14px;
    color: #ccc;
}

<<<<<<< HEAD
.project_history .history_contents ul li .comment {
=======
.project_history .history_contents ul li span.comment {
>>>>>>> Prod2-Master
    position: relative;
    padding-left: 20px;
    color: #9A9A9A;
}

.project_history .history_contents ul li p {
    margin: 10px 0;
    font-weight: 500;
<<<<<<< HEAD
}

.project_history .history_contents ul li .comment::before {
=======
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.project_history .history_contents ul li span.comment::before {
>>>>>>> Prod2-Master
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 10px;
    background: url('https://s3.unipware.com/unipware/images/ico_bubble.svg') no-repeat;
    background-size: 20px 9px;
}

<<<<<<< HEAD
=======
.project_history .history_contents ul li span.file {
    position: relative;
    padding-left: 20px;
    margin-left: 4px;
    max-width: 85%;
    font-size: 14px;
    color: #777;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.project_history .history_contents ul li span.file::before {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 15px;
    background: url('https://s3.unipware.com/unipware/images/ico_comment_edit_file.svg') no-repeat;
    background-size: 20px 15px;
}


>>>>>>> Prod2-Master
.project_history .history_contents ul li img.profile,
.history_view ul li img.profile {
    width: 20px;
}

.project_history .history_contents ul li .type {
    padding: 1px 6px;
    font-size: 14px;
    color: #fff;
    border-radius: 4px;
    background: var(--main-color);
}

.history_view {
    display: none;
    padding: 20px 28px;
<<<<<<< HEAD
    width: 48.978%;
=======
    width: 66%;
>>>>>>> Prod2-Master
}

.history_view.on {
    display: block;
}

.history_view > .d-flex {
    flex-direction: column;
    height: 100%;
}

<<<<<<< HEAD
.history_view > p {
    line-height: 1.8;
=======
.history_view .view_content {
    line-height: 1.7;
    max-height: 100px;
>>>>>>> Prod2-Master
}

.history_view h3 {
    margin-right: 8px;
    font-size: 22px;
    font-weight: 600;
<<<<<<< HEAD
=======
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
>>>>>>> Prod2-Master
}

.history_view .meeting_link p {
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history_view .meeting_link img {
    width: 16px;
}

.history_view .btn_meeting_detail {
    padding: 8px 12px;
    color: var(--main-color);
    font-size: 15px;
    font-weight: 600;
    background: var(--white-color);
    border: 1px solid #D9D9D9;
    border-radius: 4px;
}

.history_view .btn_meeting_detail:hover {
    background: #f9f9f9;
}


.file_attached {
    margin-top: 20px;
    padding: 8px 12px;
    width: fit-content;
    max-width: 520px;
    border: 1px solid #d8d8d8;
    border-radius: 8px;
}

.file_attached:hover {
    background: var(--left-side-bg);   
}

.file_attached p {
    margin-right: 12px;
    font-size: 14px;
    text-decoration: underline;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.file_attached span {
    font-size: 13px;
    color: #7a7a7a;
}

.file_attached .d-flex {
    margin-left: auto;
}

.file_attached img {
    width: 15px;
}

<<<<<<< HEAD
=======
.history_view .tit_wrap {
    align-items: center;
}

>>>>>>> Prod2-Master
.history_view h4 {
    margin: 36px 0 28px;
    padding-left: 8px;
    height: fit-content;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-color);
    border-left: 4px solid var(--main-color);
}

.history_view .comment_container {
<<<<<<< HEAD
    height: 312px;
=======
    height: 268px;
>>>>>>> Prod2-Master
    overflow-y: auto;
}

.history_view .comment_container .no_comment {
    text-align: center;
    color: var(--deep-grey);
}

.history_view .comment_container .comment_wrap {
    width: initial;
}

<<<<<<< HEAD
=======
#historyMeetingView .comment_container {
    height: 272px;
}

>>>>>>> Prod2-Master
.history_view .input_wrap {
    position: relative;
}

.history_view .input_wrap input {
    border: 1px solid #d8d8d8;
}

.historyt_view .input_wrap button {
    position: absolute;
    right: 0;
}

.detail_comment_input.history_view_input {
    max-height: 82px;
    overflow-y: auto;
}

.history_view.write {
    padding-right: 80px;
}

.history_view.write h3 {
    margin-bottom: 32px;
    font-size: 20px;
    font-weight: 500;
}

.history_view.write .contents {
    margin-bottom: 32px;
}

.history_view.write .contents .title {
    width: 30%;
    text-align: start;
    font-weight: 500;
    color: var(--main-color);
    font-size: 16px;
}

.history_view.write .contents .text {
    display: block;
    padding: 5px 13px;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 3px;
}

<<<<<<< HEAD
=======
.history_view.write .contents .detail_txtarea {
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--light-grey);
    padding: 8px 12px;
    resize: none;
    height: 220px;
    overflow: hidden;
}

.history_view.write .meeting_registered {
    display: none;
}

.history_view.write .meeting_registered p {
    width: 85%;
    font-size: 16px;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


>>>>>>> Prod2-Master
.file_uploader {
    width: 100%;
    align-items: center;
}

.btn_file {
    padding: 6px 16px;
    font-size: 15px;
    border-radius: 4px;
    background: var(--main-color);
    color: var(--white-color);
    word-break: keep-all;
    min-width: 90px;
    font-size: 14px;    
}

<<<<<<< HEAD
.file_uploader p {
    text-decoration: underline;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

=======
>>>>>>> Prod2-Master
.file_uploader img.file_cancel {
    margin-left: 8px;
    width: 12px;
}

.file_uploader .no_file {
    color: #777;
    text-decoration: none;
}

<<<<<<< HEAD
.history_view.write .contents .btn_meeting_add {
=======
.history_view.write .contents .btn_meeting_add button {
>>>>>>> Prod2-Master
    padding: 16px 0;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    background: var(--white-color);
}

<<<<<<< HEAD
=======
.history_view.write .contents .btn_meeting_add button:hover {
    background: #f8f8f8;
}

>>>>>>> Prod2-Master
.meeting_add .file_upload p {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}


.history_view.write .contents .btn_meeting_add:hover {
    background: #f9f9f9;
}

.history_view.write .contents .btn_meeting_add img {
    width: 14px;
}

.modal_popup .modal_wrap_md.meeting_add {
    max-width: 880px;
}

.modal_popup .new_history.link {
    display: none;
}

.modal_popup .meeting_add .divide:first-of-type {
    width: 35%;
    margin-right: 3%;
}

.modal_popup .meeting_add .divide:last-of-type {
    width: 62%;
}

<<<<<<< HEAD
.modal_popup .meeting_add .participant {
    margin: 0;
    height: 116px;
}

.modal_popup .meeting_add .participant > span {
=======
.modal_popup .participant > span {
>>>>>>> Prod2-Master
    display: flex;
    align-items: center;
    padding: 2px 6px;
    margin: 0 4px 4px 0;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
<<<<<<< HEAD
}

.modal_popup .meeting_add .participant {
    display: flex;
    flex-wrap: wrap;
}

.modal_popup .meeting_add .participant > span .delete {
=======
    color: var(--main-color);
    background: #EBF6FB;
}

.modal_popup .participant {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    max-height: 116px;
}

.modal_popup .participant > span .delete {
>>>>>>> Prod2-Master
    cursor: pointer;
    position: relative;
}

<<<<<<< HEAD
.modal_popup .meeting_add .participant > span .delete::before {
    display: block;
    content: '';
    background: url('../images/ico_participant_del.svg') no-repeat;
=======
.modal_popup .participant > span .delete::before {
    display: block;
    content: '';
    background: url('https://s3.unipware.com/unipware/images/ico_participant_del.svg') no-repeat;
>>>>>>> Prod2-Master
    background-size: 10px;
    width: 10px;
    height: 10px;
    
}

.modal_popup .meeting_add .filter_area {
    display: block;
    margin-top: 0;
}


<<<<<<< HEAD
.modal_popup .meeting_add .people_sel button b {
=======
.modal_popup .people_sel button b {
>>>>>>> Prod2-Master
    font-weight: 600;
    color: var(--main-color);
}

.modal_popup .meeting_add .input_participant {
    position: relative;
}

.modal_popup .meeting_add .input_participant img {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    width: 16px;
}

<<<<<<< HEAD
.modal_popup .meeting_add .participant span.inside {
=======
.modal_popup .participant span.inside {
>>>>>>> Prod2-Master
    color: #D89F10;
    background: #F9EDD6;
}

<<<<<<< HEAD
.modal_popup .meeting_add .participant span.external {
=======
.modal_popup .participant span.external {
>>>>>>> Prod2-Master
    background: #EAF9D6;
    color: #267638;
}

.modal_popup .meeting_add .detail {
    resize: none;
}

.modal_popup .meeting_add .detail.meeting {
    height: 260px;
}

.modal_popup .meeting_add .detail.extra {
    height: 96px;
}

.modal_popup .meeting_add .btn_previous,
.history_upload_w .btn_previous,
<<<<<<< HEAD
.history_view.write .btn_previous {
=======
.history_view.write .btn_previous,
.meeting_add.view .btn_meeting_modal_edit {
    width: auto;
>>>>>>> Prod2-Master
    background: var(--white-color);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

.modal_popup .meeting_add.view .modal_contents_title {
<<<<<<< HEAD
=======
    width: 100%;
>>>>>>> Prod2-Master
    padding-left: 12px;
    font-weight: 600;
    line-height: 17px;
    color: var(--main-color);
    border-left: 3px solid var(--main-color);
}

.modal_popup .meeting_add.view .contents > p {
    font-size: 16px;
    font-weight: 500;
}

.modal_popup .meeting_add.view .contents .time {
    padding: 2px 4px;
    color: #000;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
}

.modal_popup .meeting_add.view .content_container {
    padding: 16px;
    width: 100%;
    height: 260px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
}

.modal_popup .meeting_add.view .content_container.short {
    height: 96px;
}

.modal_popup .meeting_add.view .content_container pre {
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
}

<<<<<<< HEAD

=======
.modal_popup .meeting_add.view .btn_close_modal.close {
    background: var(--main-color);
    color: var(--white-color);
}

/* (수정) 프로젝트 상세보기 - 241104 */
#section_history {
    width: 71%;
    display: flex;
    justify-content: space-between;
}


/* task */
#section_manage {
    width: 79%;

    .top_button.close,
    .top_button.open {
        margin-right: 16px;
    }

    .division {
        display: flex;

        li {
            cursor: pointer;
            padding: 5px 0;
            width: 60px; 
            text-align: center;
            font-size: 16px;
            font-weight: 700;
            border: 1px solid #d3d3d3;
            border-radius: 6px;
        }

        li:not(:last-of-type) {
            margin-right: 5px;
        }
        
        li:hover {
            background: #f8f8f8;
        }
        
        li.active {
            color: var(--main-color);
            background: #eef5f9;
            border: 1px solid #bad3e2;
        }
    }

    .data_form_control {
        padding: 6px 16px 6px 45px;
    }

    .filter_area {
        margin: 0 0 0 6px;
        z-index: 99;

        .main_sel {
            padding: 9px 10px 9px 10px;
            width: 120px;
            border-color: #d4d4d4;
        }

        .sel {
            top: 33px;
        }

        .dropdown {
            margin-right: 16px;
        }
    }

    .table_cont {
    
        .table_wrap {
            display: flex;
            flex-direction: column;
            position: relative;
            overflow-x: auto;
            margin: 0;
            max-width: initial;

            .scroll_none {
                overflow-x: clip;
            }
    
            
            .table_outline {
                height: 590px;
                border-bottom: 2px solid var(--light-grey) !important;
                position: relative;
                
                table {
                    width: 100%;
                    table-layout: fixed;
                }
            }
    
            .head {
                position: sticky;
                margin: 0;
                top: 0;
                width: 100%;
                table-layout: fixed; 
                background-color: var(--white-color);
                z-index: 98;
                overflow-x: auto; /* 테이블 내용이 클 경우 가로 스크롤 허용 */
                box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 테이블 상단 그림자 추가 */
    
                table {
                    width: 100%;
                }
            }
    
            .table {
                border-bottom: none !important;
                margin-bottom: 0;
                table-layout: fixed;
    
                tr:first-of-type td {
                    border-top: none;
                }
                
                tr:last-of-type td {
                    border-bottom: 1px solid #dee2e6;
                }
    
                th {
                    text-align: left;
                    font-weight: 600;
                    background: var(--white-color);
                    border-top: 2px solid var(--main-color);
                    border-bottom: 2px solid var(--main-color);
                }

                th.filter {
                    img {
                        width: 12px;
                        transition: all 0.4s ease;
                    }

                    img.flipped {
                        transform: rotate(-180deg);
                        transition: all 0.4s ease;
                    }
                }
    
                th:first-of-type {
                    text-align: center;
                }
    
                td {
                    padding: 0.75rem 0.4rem;
                    text-align: left;
                    overflow: hidden;
                    font-size: 15px;
                    text-overflow: ellipsis;
                    line-height: 25px;
    
                    input {
                        width: 100%;
                        border: 1px solid var(--light-grey);
                        padding: 3px;
                        height: 28px;
                        border-radius: 5px;
                        font-size: 14px;
                    }
    
                    img {
                        margin-bottom: -8px;
                        width: 25px;
                    }
                }
                
                td.link:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
    
                td.date {
                    position: relative;
                }
    
                td:first-of-type {
                    text-align: center;
                }
    
                td.buttons {
                    text-align: center;
                    width: 100px;
                }
    
                td.progress_wrap {
                    position: relative;
                    overflow: visible; /* 부모 영역을 벗어날 수 있도록 설정 */
                }

                td.empty_wrap {
                    display: table-cell;
                    vertical-align: middle;
                    height: 588px;
                    border-bottom: 0 !important;
        
                    img {
                        margin-bottom: 8px;
                        width: 65px;
                    }
                }
    
                .progress {
                    width: fit-content;
                    position: relative;
                    margin: 0;
                    padding: 0 8px 0 24px;
                    height: 27px;
                    line-height: 27px;
                    font-size: 15px;
                    font-weight: 500;
                    border-radius: 14px;
                    border: 1px solid #d9d9d9;
                    background: var(--white-color);
                }
    
                .progress::before {
                    position: absolute;
                    top: 50%;
                    left: 4px;
                    transform: translateY(-50%);
                    content: '';
                    width: 14px;
                    height: 14px;
                    border-radius: 7px;
                }
    
                .progress.before::before {
                    background: #d9d9d9;
                }
    
                .progress.inprogress::before {
                    background: #8ADEAA;
                }
    
                .progress.complete::before {
                    background: #76D1FF;
                }
    
                .progress.complete {
                    padding: 0 8px 0 28px;
                }
    
                .dropmenu {
                    display: none;

                    ul {
                        display: flex;
                        border: 1px solid #d9d9d9;
                        border-radius: 20px;
                        background: var(--white-color);
                        z-index: 999;
                        position: absolute; 
                        top: 49%;
                        right: -216px;
                        transform: translateY(-50%);
                        box-shadow: 3px 3px 3px var(--bg-black-op-3);
        
                        li {
                            position: relative;
                            padding: 2px 8px 2px 32px;
                            font-size: 15px;
                        }
        
                        li:hover {
                            background: #f5f5f5;
                            border-radius: 20px;
                        }
        
                        li::before {
                            position: absolute;
                            content: '';
                            top: 50%;
                            left: 10px;
                            transform: translateY(-50%);
                            width: 14px;
                            height: 14px;
                            border-radius: 7px;
                        }
        
                        li.before::before {
                            background: #d9d9d9;
                        }
        
                        li.inprogress::before {
                            background: #8ADEAA;
                        }
        
                        li.complete::before {
                            background: #76D1FF;
                        }
                    }
        
                }

                
            }
    
            .progress_wrap:hover .dropmenu {
                display: block;
                z-index: 10;
            }
        }

        .table_wrap.fixed_table {
            padding-top: 100px
        }

        
    }

    .data_search_area {
        min-width: 188px;
    }

}

.task_manager {
    width: 22px;
    margin-left: 24px;
}

.project_list {
    width: 18%;
    transition: all 0.5s ease;

    .tit_wrap {
        position: relative;
        margin: 2px 0 0 0;

        .data_search_area.task {
            min-width: initial;
            width: 80%;
            margin: -3px 0 3px;

            .data_form_control {
                padding: 6px 16px 6px 45px;
            }
        }
    }

    h3 {
        font-size: 20px;
        font-weight: 600;
        height: 36.5px;
        line-height: 36.5px;
    }

    .top_button.search {
        position: absolute;
        top: -1px;
        right: 0;
    }

    ul.list {
        margin-top: 14px;
        height: 640px;
        border-top: 2px solid var(--main-color);
        border-bottom: 2px solid var(--light-grey);

        li {
            cursor: pointer;
            position: relative;
            padding: 10px 12px;

            p {
                font-size: 16px;
                font-weight: 600;
            }

            > span {
                color: #777;
                font-size: 13px;
            }

            .fixed {
                position: absolute;
                top: 18px;
                right: 12px;

                span {
                    right: 0;
                }
            }
        }

        li.empty_wrap {
            align-content: center;

            img {
                margin-bottom: 16px;
            }

            .empty {
                font-size: 15px;
                color: var(--light-grey);
            }
        }

        li.empty_wrap:hover {
            cursor: initial;
            background: var(--white-color);
        }

        li.empty_wrap.active {
            background: var(--white-color);
        }

        li:not(:last-of-type) {
            border-bottom: 1px solid #dee2e6;
        }

        li.active {
            background: #F7FAFC;

            p {
                color: var(--main-color);
                font-weight: 600;
            }

            > span {
                color: #508BA6;
            }

        }

        li.entire {
            padding: 20px 12px;
        }

        li:hover {
            background: #F7FAFC;
        }
    }
}

button.regist {
    padding: 8px 12px;
    background-color: var(--main-color);
    color: var(--white-color);
    border-radius: 4px;
}

#section_manage .top_button {
    button {
        position: initial;

        img {
            transform: scaleX(-1);
        }
    }

    .tooltip {
        top: 44px;
        width: 120px;
    }
}

#section_manage .top_button.toggle.open {
    img {
        transform: scaleX(1);
    }

}
>>>>>>> Prod2-Master



/* 고객사 */
.data_table.customer>tbody>tr>td {
    cursor: pointer;
    padding: 0.75rem 8px;
    text-align: left;
}

.data_table.customer>tbody>tr>td:first-of-type {
    text-align: center;
}

.address_wrap {
    display: flex;
}

.address_input {
    max-width: 375px;
    width: 100%;
}

/* (수정) 고객사 - 241024 */
.project_info.customer_info_wrap::-webkit-scrollbar {
    display: none;
}

.customer_list {
    .table thead th {
        text-align: left;
        font-weight: 600;
    }

    .table thead th:first-of-type {
        text-align: center;
    }
}

.customer_wrap {
    padding: 3% 10.256%;
}

.customer_input_wrap {
    .btn.address {
        padding: 6px 16px;
        font-size: 15px;
        border-radius: 4px;
        background: var(--main-color);
        color: var(--white-color);
        word-break: keep-all;
        min-width: 90px;
        font-size: 14px;
    }

    .input_div {
        .title.sub_tit::before {
            display: none;
        }

        .title span.word-break {
            color: var(--main-color);
        }
        
        .title span.word-break br {
            display: none;
        }

    }

    .q_column.c_column li.input_div {
        margin-bottom: 28px;
    }

    .q_column.c_column li.input_div:last-of-type {
        margin-bottom: 0;
    }

    .q_column.c_column li.input_div.address {
        margin-top: 10px;
    }


    ul.file_uploader_container {
        width: 100%;

        li {
            grid-template-columns : 1fr 3fr;

        }

        .title {
            align-self: center;
        }

        .file_uploader_wrap {
            width: 100%;
        }

        .file_uploader_wrap .file_uploader {
            grid-template-columns : 2fr 1fr; 
        }

        .file_uploader_wrap .file_uploader .btn_file {
            justify-self: end;
        }

        .file_uploader_wrap .file_name_wrap > .d-grid .file_name {
            align-self: center;
        }

        .file_name_wrap > .d-grid {
            grid-template-columns: auto 1fr; 
            gap: 4px;
        }

        .file_name_wrap > .d-grid  img {
            align-self: center;
        }

    }
}

.customer_wrap {
    .customer_input_wrap {
        .input_section {
            width: 48%;
            flex-direction: column;

            h3 {
                margin-bottom: 30px;
                color: var(--main-color);
                font-size: 18px;
                font-weight: 500;
                border-bottom: 2px solid var(--secondary-color);
            }
        }

        .input_div .form_control {
            padding: 6px 10px;
            max-width: 80%;
        }

        .query_inputs_container.c_column {
            width: 100%;
        }

        .input_div .form_control.textarea {
            min-height: 100px;
        }

        .input_div .form_control.address {
            max-width: none;
        }
    }
}

.project_info.customer_info_wrap {
    padding: 28px;
    flex-direction: column;
    width: 100%;

    .section_cont {
        width: 48%;

        .customer_tit {
            h3 {
                margin: 0 8px 0 0;
                max-width: 60%;
                font-size: 24px;
                font-weight: 700;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;

            }
        
            p {
                margin-left: 16px;
                font-size: 16px;
                font-weight: 600;
        
                span {
                    padding: 3px 6px;
                    margin-right: 4px;
                    font-size: 15px;
                    border-radius: 4px;
                    color: var(--white-color);
                    background: var(--main-color);
                }
            }
    
            .btns {
                margin-left:  auto;
            }
        }

        .customer_info {
            margin: 28px 0 32px;

            dl {
                width: 49%;

                dd {
                    padding-left: 8px;
                    font-size: 15px;
                    color: #444;
                    font-weight: 500;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;

                    button {
                        position: relative;
                        background: var(--white-color);

                        img {
                            width: 24px;
                        }

                        .tooltip {
                            display: none;
                            position: absolute;
                            padding: 6px 0;
                            width: 80px;
                            text-align: center;
                            background: #333;
                            font-size: 14px;
                            font-weight: 500;
                            color: var(--white-color);
                            border-radius: 4px;
                            z-index: 99;
                        }
                    }

                    button:hover .tooltip {
                        display: block;
                    }
                }

                dd.overflow_none {
                    overflow: initial;
                }
            }
        }

        .all_download {
            float: right;
            padding: 6px 10px;
            font-size: 15px;
            border-radius: 4px;
            color: var(--white-color);
            background: var(--main-color);

            img {
                width: 18px;
            }
        }

        .images_wrap {
            li {
                width: 49%;  
                
                .img_cont {
                    position: relative;
                    overflow: hidden;
                    height: 130px;
                    background: #444;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    text-align: center;

                    .zoom {
                        display: none;
                        cursor: pointer;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        height: fit-content;
                        transform: translate(-50%, -50%);
                        
                        .tools {
                            display: flex;

                            > div {
                                width: 36px;
                                height: 36px;
                                border-radius: 18px;
                                background: rgb(0 0 0 / 50%);
                            }

                            img {
                                width: 16px;
                                height: 16px;
                            }
                        }

                    }

                    img {
                        width: auto;
                        height: 130px;
                    }
                }

                .img_cont:hover .zoom {
                    display: block;
                }

                .card_tit {
                    .card_download {
                        width: 24px;
                        height: 24px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        text-align: center;
    
                        img {
                            width: 14px;
                            
                        }
                    }

                    p {
                        color: #444;
                        font-size: 16px;
                        font-weight: 500;
                    }
                }
                
            }

            li:not(:last-of-type) {
                margin-right: 2%;
            } 
        }

        h4.manager {
            position: relative;
            padding-left: 12px;
            font-size: 20px;
            color: var(--main-color);
            font-weight: 700;
        }

        h4.manager::before {
            content: '';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
            width: 3px;
            height: 20px;
            background: var(--main-color);
        }

        .manager_list  {
            max-height: 564px;
            border-top: 1px solid #C2C2C2;

                li {
                    grid-template-columns: 0.7fr 1.8fr 1fr 0.001fr;
                    padding: 22px 4px;
                    border-bottom: 1px solid #C2C2C2;

                .name {
                    flex-direction: column;
                    
                    span {
                        color: #8e8e8e;
                        font-size: 14px;
                        font-weight: 500;
                    }

                    p {
                        font-size: 18px;
                        font-weight: 700;
                    }
                }
            }

            li.no_contents {
                text-align: center;
                color: var(--light-grey);
                border: none;
            }

            .info {
                dl {
                    grid-template-columns: 0.2fr 1fr;

                    dt {
                        font-size: 15px;
                        font-weight: 700;
                    }

                    dd {
                        font-weight: 400;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        color: #444;

                        button {
                            position: relative;
                            background: var(--white-color);
    
                            img {
                                width: 24px;
                            }
    
                            .tooltip {
                                display: none;
                                position: absolute;
                                padding: 6px 0;
                                width: 80px;
                                text-align: center;
                                background: #333;
                                font-size: 14px;
                                font-weight: 500;
                                color: var(--white-color);
                                border-radius: 4px;
                                z-index: 99;
                            }
                        }

                        img {
                            width: 24px;
                        }
                    }

                    dd.overflow_none {
                        overflow: initial;
                    }

                    button:hover .tooltip {
                        display: block;
                    }
                }
                
            }

            .business_card {
                align-self: center;
                padding: 0 12px;

                .img_cont {
                    display: flex;
                    align-items: center;
                    position: relative;
                    overflow: hidden;
                    height: 88px;
                    background: #444;
                    border: 1px solid #ddd;
                    border-radius: 6px;
                    text-align: center;
                }

                .zoom {
                    display: none;
                    cursor: pointer;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    height: fit-content;
                    transform: translate(-50%, -50%);
                    
                    .tools {
                        display: flex;

                        > div {
                            width: 36px;
                            height: 36px;
                            border-radius: 18px;
                            background: rgb(0 0 0 / 50%);
                        }

                        img {
                            width: 16px;
                            height: 16px;
                        }
                    }

                }

                .img_cont:hover .zoom {
                    display: block;
                }
    
            }

            .more_wrap {
                display: grid;

                .more {
                    position: relative;
                    justify-self: end;
    
                    img {
                        width: 13px;
                        
                    }
    
                    .more_list {
                        position: absolute;
                        top: -1px;
                        left: -64px;
                        padding: 4px;
                        width: 56px;
                        text-align: center;
                        background-color: var(--white-color);
                        border-radius: 4px;
                        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                        z-index: 99;
    
                        li {
                            width: auto;
                            cursor: pointer;
                            padding: 2px 0;
                            font-weight: 500;
                            border: none;
                        }
    
                        li:hover {
                            background: var(--left-side-bg);
                        }
                    }
                }
            }
           
        }
    }

    .btn_add {
        padding: 12px 0;
        font-size: 15px;
        font-weight: 700;
        background: var(--white-color);
        color: var(--main-color);
        border: 1px solid var(--main-color);
        border-radius: 6px;
    }

    .btn_add:hover {
        background: #f8f8f8;
    }
}

.item_tit {
    padding: 4px 12px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 4px;
    color: var(--main-color);
    background: var(--left-side-bg);
}

.fixed {
    position: relative;
    width: 16px;
    height: 16px;
    margin-bottom: 6px;

    img {
        cursor: pointer;
        width: 16px;
    }
    
    .tooltip {
        display: none;
        position: absolute;
        top: 24px;
        padding: 4px 0;
        width: 64px;
        text-align: center;
        background: #333;
        font-size: 14px;
        font-weight: 500;
        color: var(--white-color);
        border-radius: 4px;
        z-index: 99;
    }
}

.fixed:hover .tooltip {
    display: block;
}

/* 홈페이지 바로가기 버튼 */
.home_wrap {
    position: relative;

    .btn_goto_home {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background: var(--white-color);
        border: 1px solid #dbdbdb;
        border-radius: 4px;
    
        img {
            width: 16px;
        }
    }
    
    .btn_goto_home:hover {
        background: #f9f9f9;
    }

    span {
        display: none;
        position: absolute;
        top: 36px;
        left: 0;
        padding: 4px 0;
        width: 116px;
        background: #333;
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        color: var(--white-color);
        border-radius: 4px;
        z-index: 100;
    }
}

.home_wrap:hover span {
    display: block;
}

#modalCustomerManagerAdd .modal_wrap .contents textarea {
    resize: none;
    height: 68px;
}

#modalCustomerImgSlide, #modalCustomerImgView  {
    .customer_img_slide {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 800px;
        z-index: 99;

        .swiper {
            .swiper-wrapper {
                
                display: flex;
                align-items: center;
    
                .swiper-slide {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: fit-content;
                    background: #444;
                    
                    img {
                            max-width: 800px;
                            width: auto;
                            height: auto;
                        }
                    
                    .btn_close_modal {
                        position: absolute;
                        top: 12px;
                        right: 12px;
                        width: 32px;
                    }
                }
            }

            .swiper-button-next {
                background: url(https://s3.unipware.com/unipware/images/customer_slide_next.svg) no-repeat center center;
                
            }
            
            .swiper-button-prev {
                background: url(https://s3.unipware.com/unipware/images/customer_slide_prev.svg) no-repeat;
                
            }

            .swiper-button-next::after,
            .swiper-button-prev::after {
                display: none;
            }
        }
       
    }
}

#modalCustomerImgView  {
    .customer_img_slide {
        width: 600px;

        .img_cont {
            .img_wrap {
                display: flex;
                align-items: center;
        
                .img_viewer {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: fit-content;
                    background: #444;
        
                    img {
                        max-width: 100%;
                        width: auto;
                        height: auto;
                    }
        
                    .btn_close_modal {
                        position: absolute;
                        top: 12px;
                        right: 12px;
                        width: 32px;
                    }
                }
            }
        }
    }

}

/* 마이 프로필 */
.profile_input_cont {
    margin-top: 8px;
}

.profile_input_wrap {
    display: flex;
    flex-direction: row;
    padding: 0;
    border-radius: 8px;

    section.input_cont {
        justify-content: initial;
        padding: 40px 80px 40px 40px;
        width: 100%;

        .mobile_button {
            display: none;
            text-align: right;

            button {
                
                padding: 10px 15px;
                width: 80px;
                text-align: center;
                font-size: 15px;
                color: var(--white-color);
                border-radius: 4px;
                background: var(--main-color);
            }
        }
    }

    h3 {
        margin-bottom: 20px;
        font-size: 20px;
        color: var(--main-color);
    }

    .form_control {
        padding: 6px 16px;
    }

    .input_wrap {
        display: flex;
        justify-content: space-between;
    
        > div {
            width: 49%;
        }
    
        .edu {
            margin-top: 44px;
        }
    }
}

.profile_form {
    padding: 0 20px 8px;

    .btn {
        padding: 6px 16px;
        font-size: 15px;
        height: 36px;
        border-radius: 4px;
    }

    .btn.address {
        background: var(--main-color);
        color: var(--white-color);
        word-break: keep-all;
    }

    .btn.password {
        color: var(--main-color);
        border: 1px solid var(--main-color);
        background: var(--white-color);
    }

    .btn.password:hover {
        background: var(--hover-grey);
    }

    .input_gmail {
        width: 188px;
    }
}

.info_side {
    flex-direction: column;
    align-items: center;
    padding: 80px 0 20px;
    width: 232px;
    height: 100%;
    color: #424C62;
    background: #F7FAFC;

    .mobile_tit {
        display: none;
    }

    .profile_img {
        width: 116px;
        border: 2px solid #BED0D9;
        border-radius: 58px;
    }

    p {
        margin-right: -12px;
        font-size: 20px;
        font-weight: 700;

        img {
            cursor: pointer;
            margin-left: 4px;
            width: 13px;
        }
    }

    .name_modify {
        
        .input_wrap {
            position: relative;
        }

        input {
            padding: 8px;
            width: 116px;
            font-size: 16px;
            font-weight: 500;
            border: 0;
            border-bottom: 1px solid #D3D7DF;
            background: #F7FAFC;
        }

        ul {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);

            li {
                 width: 20px;
                 height: 20px;

                 img {
                    width: 20px;
                    height: 20px;
                 }
            }
        }
    }

    .profile_edit {
        cursor: pointer;
        position: absolute;
        bottom: 12px;
        right: 0;
        width: 32px;
        border: 2px solid #DEE2E6;
        border-radius: 50%;
        filter: drop-shadow(3px 3px 3px rgba(48, 114, 145, 0.1));
    }

    button {
        padding: 10px 15px;
        width: 80px;
        text-align: center;
        font-size: 15px;
        color: var(--white-color);
        border-radius: 4px;
        background: var(--main-color);
    }
}

.profile_info {
    flex-direction: column;
}

.id_wrap {
    display: flex;
    margin-top: 8px;
    width: fit-content;

    li {
        font-weight: 500;
    }

    li:first-of-type {
        margin-right: 4px;
    }
}

.input_profile {
    color: var(--deep-grey);
    font-weight: 400;
    white-space: nowrap;

    .title {
        width: 28%;
    }

    .title::before {
        display: none;
    }

    .filter_area {
        margin-top: 0;
    }

    .txt {
        color: var(--font-color);
    }
}

.input_profile:not(:last-of-type) {
    margin-bottom: 16px;
}

.filter_area.career {
    justify-content: initial;
    
    input[type='number'] {
        width: 100px;
    }

    label {
        color: var(--font-color);
        line-height: 36px;
    }

    .sel {
        max-height: 84px;
    }
}

.document_upload  {
    .password {
        .modal_contents_title {
            width: 40%;
        }
    }
    
    .password.confirm {
        img {
            margin-top: 20px;
            width: 52px;
        }
        
        p {
            margin-top: 12px;
            font-size: 18px;
            font-weight: 500;
            word-break: keep-all;
        }

        /* .btn_close_modal {
            color: var(--white-color);
            background: var(--main-color);
        } */
    }

}






/* 메신저 */
#messenger_left_aside {
    position: absolute;
    width: 380px;
    height: 100%;
    background-color: var(--left-side-bg);
}

#messenger_main_contents {
    width: calc(100% - 380px);
    height: calc(100vh - 138px);
    overflow-y: auto !important;
    margin-left: 380px;
}

.messenger_profile_icon_w {
    width: 100px;
    margin: 30px auto 0;
    position: relative;
}

.messenger_profile_icon {
    width: 100px;
    margin-bottom: 10px;
}

.messenger_profile_icon svg {
    fill: var(--main-color);
}

.messenger_alarm {
    padding: 3px 8px;
    background-color: #fb4c4c;
    position: absolute;
    border-radius: 30px;
    color: var(--white-color);
    font-size: 11px;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
}

.profile_name {
    text-align: center;
    color: #6B7A99;
    font-size: 17px;
}

.profile_email {
    text-align: center;
    color: #ADB8CC;
    font-size: 15px;
}

.messenger_tab {
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-weight: 600;
    font-size: 17px;
}

.messenger_tab>div {
    width: 33%;
    text-align: center;
    cursor: pointer;
}

.messenger_tab>div.active {
    border-bottom: 2px solid var(--main-color);
}

.search_friend_area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search_friend {
    width: 280px;
    border: none;
    padding: 7px 11px;
    border-radius: 10px;
}

.add_friend_icon {
    width: 30px;
    cursor: pointer;
}

.add_friend_icon svg {
    fill: var(--main-color);
}

.messenger_friend {
    padding: 10px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.messenger_friend_area {
    display: flex;
    align-items: center;
}

.friend_profile_image {
    display: flex;
}

.friend_profile_image svg {
    width: 40px;
    fill: var(--main-color);
}

.status_online {
    color: #1090CB;
}

.status_offline {
    color: #9C9C9C;
}

.status_online::before,
.status_offline::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid #9C9C9C;
    position: absolute;
    border-radius: 10px;
    top: 50%;
    left: -15px;
    transform: translateY(-50%);
}

.status_online::before {
    border-color: #1090CB;
}

.chating_list {
    display: none;
}

.messenger_chat {
    cursor: pointer;
    width: 100%;
    padding: 10px 30px;
    display: flex;
}

.messenger_chat.active {
    background-color: #1090cb2f;
}

.chat_profile_image_w {
    width: 35%;
}

.chat_profile_image svg {
    fill: var(--main-color);
}

.chat_contents {
    width: 65%;
}

.party_list {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat_profile_image {
    display: flex;
    margin-right: 20px;
}

.right_chat_area>.chat_profile_image {
    margin-right: 0;
    margin-left: 20px;
}

.chat_profile_image svg {
    width: 46px;
}

.friend_profile_image>div {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--dark-grey);
    transform: translateX(-40%);
    line-height: 38px;
    text-align: center;
}

.chat_text_time_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #5e5e5e;
}

.messenger_header {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid var(--light-grey);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.messenger_header_inner_01,
.messenger_header_inner_02 {
    display: flex;
}

.messenger_search_w {
    display: none;
    width: 50%;
    position: relative;
}

.messenger_search_input {
    width: 100%;
    border: 1px solid var(--light-grey);
    border-radius: 30px;
    padding: 3px 12px;
}

.ms_search_icon {
    cursor: pointer;
    width: 20px;
    position: absolute;
    top: 0;
    right: 10px;
    margin-top: 4px;
}

.ms_search_close_icon {
    cursor: pointer;
    width: 20px;
    position: absolute;
    top: 0;
    right: -30px;
    margin-top: 4px;
}

.messenger_header_profile_image {
    width: 30px;
    margin-right: 10px;
}

.messenger_header_profile_image svg {
    fill: var(--main-color);
}

.header_status {
    font-size: 14px;
    color: #1090CB;
}

.messenger_party {
    display: flex;
    position: relative;
    margin-right: 10px;
}

.messenger_party svg {
    width: 30px;
    fill: var(--main-color);
}

.messenger_party svg:nth-of-type(2) {
    transform: translateX(-40%);
}

.messenger_party svg:nth-of-type(3) {
    transform: translateX(-80%);
}

.messenger_party svg:nth-of-type(4) {
    transform: translateX(-120%);
}

.messenger_party_num {
    padding: 1px 5px;
    background-color: var(--dark-grey);
    position: absolute;
    border-radius: 30px;
    font-size: 11px;
    top: 10px;
    right: 5px;
    transform: translateY(-50%);
}

.messenger_header_icons {
    display: flex;
}

.messenger_header_icons svg {
    width: 22px;
    margin-left: 8px;
    cursor: pointer;
    fill: var(--icon-color);
    margin-right: 8px;
}

.messenger_header_icons>svg:nth-child(2) path {
    fill: var(--main-color);
}


.chating_area_no {
    display: none;
    background-color: #fafafa;
    width: 100%;
    overflow-y: none;
    height: calc(100vh - 198px);
    font-size: 24px;
    color: #00000073;
}

.chating_area_no>div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.chating_area {
    background-color: #fafafa;
    width: 100%;
    max-height: 583px;
    overflow-y: auto;
    height: calc(100vh - 260px);
    padding: 20px 30px;
}

.left_chat_area {
    display: flex;
    align-items: start;
    margin-bottom: 5px;
}

.chat_area_text {
    max-width: 300px;
    background-color: #F4F4F7;
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 16px;
    margin-bottom: 12px;
}

.chat_area_time {
    color: #00000073;
    font-size: 12px;
}

.right_chat_area {
    text-align: left;
    display: flex;
    justify-content: end;
    align-items: start;
    margin-bottom: 5px;
}

.right_chat_area div.chat_area_time {
    text-align: right;
}

.chat_area_date {
    position: relative;
    padding: 10px;
    margin: 26px 0;
}

.chat_area_date>div {
    background-color: #fafafa;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    padding: 0 10px;
    color: #00000073;
}

.chat_area_date::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    border-bottom: 1px solid #ccc;
}

.messenger_send_area {
    background-color: var(--white-color);
}

.messenger_send_icons {
    display: flex;
    padding: 4px 16px;
    border-bottom: 1px solid var(--light-grey);
}

.messenger_send_icons>div>svg {
    width: 26px;
    height: 25px;
    cursor: pointer;
    fill: var(--icon-color);
}

.messenger_send_button {
    padding: 12px 16px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.messenger_send_button>div {
    display: flex;
    width: 100%;
}

.messenger_send_textarea {
    width: 100%;
    min-height: 70px;
    margin-right: 10px;
    border: var(--input-border-grey);
    padding: 10px;
    border-radius: 6px;
}

/* 화면공유 팝업 */
.modal_screen_share,
.modal_window_screen_share {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.modal_window_screen_share {
    max-width: 550px;
}

.modal_screen_share>div,
.modal_window_screen_share>div {
    width: 150px;
    border: 1px solid var(--left-side-bg);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    margin-top: 10px;
}

.modal_screen_share>div:hover {
    background-color: var(--left-side-bg);
    transition: all 0.15s;
}

.modal_window_screen_share>div:hover {
    border: 0;
    box-shadow: 0 0 0 2px var(--main-color) inset;
    transition: box-shadow 0.15s;
}

.modal_screen_share>div svg,
.modal_window_screen_share>div svg {
    width: 100px;
    height: 100px;
}

.btn_top_close_modal {
    position: absolute;
    top: 20px;
    right: 20px;
}

.btn_top_close_modal>svg {
    width: 20px;
    cursor: pointer;
}

.mt_100 {
    margin-top: 100px;
}

.messenger_share_icon {
    position: relative;
}

.modal_url_share {
    display: none;
    position: absolute;
    text-align: left;
    border: 1px solid var(--light-grey);
    padding: 6px 10px;
    border-radius: 6px;
    background-color: var(--white-color);
    top: -100px;
    left: 0;
}

.share_copy_icon>svg {
    width: 20px;
    cursor: pointer;
}

.modal_url_share_okay {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 14px;
}

.modal_view_screen_share {
    width: 600px;
    height: 400px;
    background-color: #eee;
    margin: 0 auto;
}

/* 화상채팅 */
.my_camera_preview_area {
    max-width: 1200px;
    height: 600px;
    margin: 100px auto 0;
    background-color: var(--dark-grey);
    border-radius: 20px;
}

.setting_icons_enter_icon {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 50px auto 0;
    justify-content: space-between;
}

.setting_icons_enter_icon>div:nth-child(2) {
    display: flex;
}

.video_setting_icons:nth-child(2)>div:nth-child(2) {
    margin: 0 40px;
}

.audio_icon,
.video_icon,
.signal_icon {
    width: 80px;
    height: 80px;
    background-color: var(--main-color);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 100px;
}

.audio_icon>svg,
.video_icon>svg,
.audio_off_icon>svg {
    margin-top: 20px;
    height: 40px;
    width: 40px;
}

.video_off_icon>svg {
    margin-top: 20px;
    margin-right: 2px;
    height: 42px;
    width: 42px;
} 

.signal_icon>svg {
    margin-top: 18px;
    height: 50px;
    width: 45px;
}

.signal_off_icon>svg {
    margin-top: 17px;
    height: 50px;
    width: 45px;
}

.audio_icon>svg>path,
.video_icon>svg>path,
.signal_icon>svg>path,
.audio_off_icon>svg>path,
.video_off_icon>svg>path,
.signal_off_icon>svg>path {
    fill: var(--white-color);
}

.audio_off_icon,
.video_off_icon,
.signal_off_icon {
    display: none;
    width: 80px;
    height: 80px;
    background-color: #EB5757;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 100px;
}

.btn_enter_video_chat {
    display: flex;
    padding: 15px 25px 15px 16px;
    background-color: var(--dark-grey);
    border-radius: 6px;
    cursor: pointer;
}

.btn_enter_video_chat div {
    display: flex;
    align-items: center;
}

.enter_icon>svg {
    width: 25px;
    margin-right: 10px;
}

.video_chatting_w_area {
    width: 100%;
    display: flex;
}

.my_camera_area {
    max-width: 1200px;
    height: 460px;
    margin: 70px auto 0;
    background-color: var(--dark-grey);
    border-radius: 20px;
    position: relative;
}

.video_area {
    width: calc(100% - 400px);
}

.chatting_area {
    width: 400px;
    height: 100vh;
    background-color: #FAFAFA;
}

.talking {
    box-shadow: 0 0 0 5px #1FDD00 inset;
}

.time_fullscreenview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video_chatting_time {
    padding: 8px 20px;
    padding-left: 40px;
    background-color: var(--bg-black-op-5);
    border-radius: 50px;
    color: var(--white-color);
}

.video_chatting_time::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #E60303;
    border-radius: 50%;
    display: inline-block;
    margin-left: -20px;
    margin-right: 10px;
}

.full_screen_view {
    cursor: pointer;
    padding: 8px 5px;
    background-color: var(--bg-black-op-5);
    border-radius: 50px;
}

.full_screen_view>svg {
    width: 30px;
    fill: var(--white-color);
}

.video_signal_icon>svg {
    width: 50px;
    fill: #fd6072
}

.name_icon_area {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    bottom: 0;
}

.video_user_name {
    padding: 6px 15px;
    background-color: var(--bg-black-op-5);
    border-radius: 50px;
    color: var(--white-color);
    display: flex;
    align-items: center;
}

.video_activation_icon {
    padding: 5px 4px;
    background-color: var(--main-color);
    border-radius: 50px;
}

.video_activation_icon>svg {
    width: 30px;
    height: 25px;
    fill: var(--white-color);
    margin-bottom: -5px;
}

.video_un_activation_icon {
    display: none;
    padding: 5px 4px;
    background-color: #EB5757;
    border-radius: 50px;
}

.video_un_activation_icon>svg {
    width: 30px;
    height: 25px;
    fill: var(--white-color);
    margin-bottom: -5px;
}

.other_people_camera_area {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    display: flex;
    padding-bottom: 30px;
    margin-top: 30px;
}

.other_people_camera_area>div {
    min-width: 277px;
    height: 200px;
    position: relative;
    background-color: var(--dark-grey);
    margin-right: 30px;
    border-radius: 20px;
}

.other_people_camera_area>div:last-child {
    margin-right: 0;
}

.other_people_camera_area::-webkit-scrollbar {
    width: 6px;
}

.other_people_camera_area::-webkit-scrollbar:horizontal {
    height: 6px;
}

.other_people_camera_area::-webkit-scrollbar-thumb {
    background-color: #1090CB;
    border-radius: 10px;
}

.other_people_camera_area::-webkit-scrollbar-track {
    background-color: #DEE1E7;
    border-radius: 10px;
}

.other_people_camera_area::-webkit-scrollbar-button:start {
    width: 170px;
    background-color: transparent;
}

.other_people_camera_area::-webkit-scrollbar-button:end {
    width: 170px;
    background-color: transparent;
}

.my_video_setting_icons div {
    width: 50px;
    height: 50px;
    background-color: var(--main-color);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    line-height: 50px;
    margin-right: 12px;
}

.my_video_setting_icons>div:last-child {
    margin-right: 0;
}

.my_mic_icon>svg,
.my_video_icon>svg,
.my_mic_off_icon>svg {
    width: 30px;
    height: 30px;
    fill: var(--white-color);
    margin-bottom: -10px;
}

.my_video_off_icon>svg {
    width: 32px !important;
    height: 30px;
    margin-bottom: -10px;
}

.my_mic_off_icon,
.my_video_off_icon,
.my_signal_off_icon {
    display: none;
    background-color: #EB5757 !important;
}

.my_signal_icon>svg,
.my_signal_off_icon>svg {
    width: 35px;
    margin-bottom: -7px;
}

.my_share_icon>svg {
    width: 35px;
    fill: var(--main-color);
}

.my_add_person_icon>svg {
    width: 35px;
    fill: var(--main-color);
    margin-bottom: -4px;
}

.my_share_icon,
.my_add_person_icon {
    background-color: #DFEBFF !important;
}

.btn_out_video_chat {
    cursor: pointer;
    padding: 12px 40px;
    color: var(--white-color);
    background-color: #EB5757;
    border-radius: 50px;
}

.chatting_party_people {
    margin-top: 40px;
    padding: 0px 20px;
}

.chatting_party_people>.messenger_party>svg {
    width: 40px;
}

.messenger_party .video_chat_party_people {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: var(--main-color);
    border-radius: 50%;
    background-color: #DFEBFF;
    transform: translateX(-150%);
}

.chatting_inside {
    padding: 10px 20px;
    margin-top: 10px;
    padding-top: 30px;
    height: 730px;
    overflow-y: auto;
}

.chat_person_name {
    margin-bottom: 4px;
    font-size: 15px;
}

.video_chat_send {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid var(--dark-grey);
}

.chatting_inside::-webkit-scrollbar {
    width: 6px;
}

.chatting_inside::-webkit-scrollbar-thumb {
    background-color: var(--light-grey);
    border-radius: 10px;
}

.chatting_inside::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
}

/* my board */

.my_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.appr_progress_wrap{
    width: 100%;
}
.appr_progress {
    flex: 1;
}

/* mypage > 마이보드(관리자) myboard(admin) */
.approval_wrap {
    flex-grow: 1;
    flex-direction: column;
    display: flex;
}

.approval_wrap .appr_progress li {
    display: flex;
    box-shadow: 1px 6px 5px 0px rgb(163 182 190 / 18%);
    border: 1px solid var(--box-border)
}

.approval_wrap .appr_progress li a {
    width: 100%;
    height: 100%;
    flex-direction: column;
    padding: 18px 6.655%;
}

.my_wrap_02_1 .approval_wrap .appr_progress li a>span {
    width: 100%;
    justify-content: center;
}

/* 마이보드 > 스켸쥴 */
#calendarYM {
    font-size: 30px;
    color: var(--main-color);
    font-weight: 600;
}

.ico_pre_next_month img {
    width: 40px;
    cursor: pointer;
}

.select_schedule_w {
    button {
        background: var(--white-color);
        padding: 5px 15px;
        min-width: 50px;
        border-radius: 20px;
        font-weight: 600;
        font-size: 14px;
        background: var(--white-color);
    }

    button+button {
        margin-left: 5px;
    }

    .all {
        border: 1px solid var(--schedule-color01);
        color: var(--schedule-color01);
    }

    .all:hover {
        background: #FEE6C9;
    }

    .all.active {
        background: var(--schedule-color01);
        color: var(--white-color);
    }

    .individual {
        border: 1px solid var(--schedule-color02);
        color: var(--schedule-color02);
    }

    .individual:hover {
        background: #1bb3ff57;
    }

    .individual.active {
        background: var(--schedule-color02);
        color: var(--white-color);
    }

    .team {
        border: 1px solid var(--schedule-color03);
        color: var(--schedule-color03);
    }

    .team:hover {
        background: #29cb103f;
    }

    .team.active {
        background: var(--schedule-color03);
        color: var(--white-color);
    }
}

.btn_today {
    border: 1px solid var(--main-color);
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--main-color);
    font-weight: 500;
    font-size: 14px;
}

.btn_today:hover {
    background: var(--main-color);
    color: var(--white-color);
}

#calendar tr:not(.calendar_top):not(.day_of_the_week) td:hover {
    background: var(--left-side-bg);
}

#calendar .day_of_the_week {
    border-bottom: 1px solid var(--table-border);
}

#calendar.schedule tr td.today {
    border: 2px solid var(--main-color);
}

section.schedule #calendar tr td.today .label_today {
    position: absolute;
    top: 9px;
    right: 9px;
    background: var(--main-color);
    color: var(--white-color);
    border-radius: 10px;
    padding: 2px 8px;
    font-size: 12px;
}

section.schedule #calendar tr td .label_schedule_w {
    max-height: 77px;
    overflow-y: scroll;
    margin: 5px 0;
}

section.schedule #calendar tr td .label_schedule+.label_schedule {
    margin-top: 5px;
}

section.schedule #calendar tr td .label_schedule.color01 {
    font-size: 12px;
    font-weight: 500;
    background: #feb55c4b;
    border-left: 4px solid var(--schedule-color01);
    padding-left: 5px;
    color: #000;
}

section.schedule #calendar tr td .label_schedule.color02 {
    font-size: 12px;
    font-weight: 500;
    background: #1bb3ff40;
    border-left: 4px solid var(--schedule-color02);
    padding-left: 5px;
    color: #000;
}

section.schedule #calendar tr td .label_schedule.color03 {
    font-size: 12px;
    font-weight: 500;
    background: #29cb102d;
    border-left: 4px solid var(--schedule-color03);
    padding-left: 5px;
    color: #000;
}

.calendar_year-month {
    color: var(--main-color);
    font-weight: 700;
}

.calendar_wrap>table {
    width: 100%;
}

.calendar_wrap>table tr td {
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.calendar_wrap>table tr:not(:nth-child(1)) td {
    padding: 2.147%;
}

.calendar_wrap>table tr:nth-child(2) td {
    padding: 3.581%;
    color: #888;
    font-size: 12px;
    font-weight: 700;
}

.calendar_wrap>table tr:nth-child(2) td:nth-child(n+2):nth-child(-n+6) {
    color: var(--font-color);
}

.calendar_wrap>table tr td.today {
    color: var(--main-color);
}

.calendar_wrap>table tr td.today::before {
    content: '';
    width: 34px;
    height: 34px;
    left: 50%;
    top: 50%;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border: 1px solid var(--main-color)
}

.holiday {
    color: var(--on-design-tag-font-color);
}

.saturday {
    color: var(--main-color);
}

.calendar_pick {
    cursor: pointer;
    white-space: nowrap;
}

.calendar_date {
    display: none;
    width: 180px;
    position: absolute;
    top: 50px;
    left: -5px;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px 0px;
    background-color: var(--white-color);
    z-index: 10;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
}

.calendar_date_form_control {
    display: block;
    /* height: calc(1.5em + 0.75rem + 2px); */
    padding: 10px 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    background-color: var(--white-color);
    border: var(--input-border-grey);
    border-radius: 6px;
    margin-left: 15px;
}

select.calendar_date_form_control.arrow {
    min-width: 80px;
    display: block;
    line-height: 1.5;
    background-clip: padding-box;
    background: url(https://s3.unipware.com/unipware/images/arrow_down_black.png) calc(100% - 0.3rem) center no-repeat;
    background-color: var(--white-color);
    background-size: 9px;
    background-position: 92% 50%;
    outline: none;
}

.calendar_close {
    cursor: pointer;
    position: absolute;
    right: 14px;
    top: 14px;
    width: 13px;
}

.calendar_month {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

.calendar_month>div {
    cursor: pointer;
    width: 25%;
    text-align: center;
    padding: 8px;
    position: relative;
}

.calendar_month>div.active {
    color: var(--main-color);
}

.calendar_month>div.active::before {
    content: '';
    width: 34px;
    height: 34px;
    left: 50%;
    top: 50%;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background-color: var(--white-color);
    border: 1px solid var(--main-color);
}

.btn_calendar_okay {
    font-size: 13px;
    margin-top: 10px;
    padding: 4px 12px;
    background: var(--main-color);
    border-radius: 5px;
    margin-right: 10px;
    color: var(--white-color);
}

.icon_bell {
    position: relative;
    cursor: pointer;
    width: 16px;
}

/* .icon_bell::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--red-color);
    border: 1px solid var(--white-color);
    position: absolute;
    top: 1px;
    left: 10px;
} */

.calendar_comment_view {
    display: none;
    position: absolute;
    width: 300px;
    min-height: 184px;
    background-color: var(--white-color);
    right: 0;
    top: 0;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
    text-align: left;
    z-index: 10;
    box-shadow: -3px 3px 15px #BBDBEA;
}

.calendar_comment_view>div {
    position: relative;
    cursor: pointer;
    font-size: 14px;
    padding-left: 10px;
}

.calendar_comment_view>div::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 0;
    width: 4px;
    height: 15px;
    background: var(--main-color);
}

.comment_delete_all {
    cursor: pointer;
    display: block;
    font-size: 12px !important;
    color: #b4b4b4;
    text-align: right;
}

.view_more {
    display: flex;
    cursor: pointer;
    color: #666666;
    font-size: 14px;
}

.ico_view_more {
    width: 20px;
    height: 20px;
    margin-bottom: -5px;
    margin-left: 5px;
}

.color_01 {
    color: #9386FF;
}

.color_01 svg path {
    fill: #9386FF;
}

.color_02 {
    color: #1090CB;
}

.color_02 svg path {
    fill: #1090CB;
}

.color_03 {
    color: #858585;
}

.color_03 svg path {
    fill: #858585;
}

.my_board_w {
    display: flex;
    justify-content: space-between;
}

/* .my_board_w>div.title{
    font-size: 20px;
}
.my_board_w>div.title>span{
    padding: 3px 6px;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 13px;
}
.my_board_w>div.title>span.blue{
    background-color: #E7EFF3;
    color: #1090CB;
}
.my_board_w>div.title>span.grey{
    background-color: #F3F3F3;
    color: #858585;
} */
.working_hour_bg {
    margin-top: 10px;
    height: calc(100% - 20px);
    background-color: #F6F5FE;
    border-radius: 20px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    /* background-image: url('https://s3.unipware.com/unipware/images/working_hour_bg.png') ; */
    /* background-repeat: no-repeat; */
    /* background-position: right 50px bottom; */
    /* background-size: 230px; */
}

.working_hour_area {
    width: 80%;
}

.working_hour_bg>div:first-child {
    padding: 30px 70px 0px 30px;
    /* max-width: 600px; */
    width: 70%;
}

.working_hour_bg>div:nth-child(2) {
    width: 30%;
    background: #fff;
    border-radius: 20px;
    padding: 20px 10px;
    min-height: 182px;
}

.working_hour_bg>div>div>div>div:nth-of-type(1) {
    font-size: 16px;
}

.working_hour_bg>div>div>div>div:nth-of-type(2) {
    font-size: 43px;
}

.working_hour_bg .time01 {
    color: #5B74B6;
}

.working_hour_bg .time02 {
    color: #655BB6;
}

.working_hour_bg .time03 {
    color: #9386FF;
}

.work_btn_area>button {
    padding: 10px 26px;
    font-size: 19px;
    color: var(--white-color);
    border-radius: 6px;
}

.work_btn_area>button svg {
    fill: var(--white-color);
    width: 16px;
}

.work_btn_area>button:nth-of-type(1) {
    margin-right: 40px;
    background-color: #9386FF;
}

.work_btn_area>button:nth-of-type(2) {
    background-color: #B8B8B8;
}


.working_hour_team {
    display: grid;
    width: 35%;
    padding-right: 15px;
}

.working_hour_team>button {
    background: none;
    font-size: 15px;
    text-align: left;
    color: #797979;
    padding-left: 10px;
}

.working_hour_team>button.active {
    background: #9386FF;
    color: #fff;
    border-radius: 15px;
}

.working_hour_name {
    width: 65%;
    padding: 0px 13px 0px 20px;
}

.working_hour_name>.name_w {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.working_hour_name>.name_w>.name {
    font-size: 15px;
    color: #797979;
}

.working_hour_name>.name_w>.state {
    border-radius: 20px;
    padding: 3px 13px;
    font-size: 13px;
    font-weight: 500;
    min-width: 60px;
}

.working_hour_name>.name_w>.state.working {
    border: 2px solid #9386FF;
    color: #9386FF;
}

.working_hour_name>.name_w>.state.none {
    background: #CDCDCD;
    color: #fff;
}

.to_do_wrap ul {
    width: 100%;
    height: 200px;
    margin-bottom: 12px;
}

.to_do_wrap ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #F8F8F8;
    border-radius: 4px;
    font-size: 14px;
}

.to_do_wrap ul li span.to_do_txt {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 18px;
    max-height: 40px;
    word-wrap: break-word;
}

.to_do_wrap ul li span.to_do_date {
    font-size: 12px;
    color: #bababa;
    margin-right: 0.5rem;
}

.to_do_wrap ul li span button {
    background: none;
}

.to_do_wrap input {
    border: 1px solid var(--box-border);
}

.to_do_bg {
    height: 239.5px;
    margin-top: 10px;
    background-color: #F5FBFE;
    border-radius: 20px;
    padding: 20px;
    position: relative;
}

.to_do_edit_text {
    cursor: pointer;
}

.todo_date {
    font-size: 13px;
    color: #BABABA;
}

.delete_todo {
    fill: var(--icon-color);
    width: 15px;
    margin-bottom: 3px;
    margin-left: 5px;
    cursor: pointer;
}

.todo_input {
    width: 100%;
    position: absolute;
    bottom: 20px;
    display: flex;
    align-items: center;
}

.todo_input input {
    width: calc(100% - 80px);
}

.icon_todo_add svg path {
    cursor: pointer;
    fill: var(--main-color);
}

.my_project_bg {
    margin-top: 10px;
    background-color: #F3F3F3;
    border-radius: 20px;
    padding: 20px;
}

.working_hour_bg>div>div {
    text-align: center;
}

.my_pro_card {
    width: 33%;
    cursor: pointer;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--white-color);
    margin-right: 20px;
}

.my_pro_card:last-of-type {
    margin-right: 0;
}

.my_pro_card>.document_title {
    font-size: 22px;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document_title:hover {
    text-decoration: underline;
}

.my_pro_card>.date {
    color: #BABABA;
    font-size: 13px;
}

.my_pro_card>.who {
    color: #5E5E5E;
    font-size: 14px;
}

.to_do_edit {
    position: absolute;
    top: 0;
    z-index: 1;
    height: 120%;
    left: 23px;
    margin-top: -2px;
    display: none;
}

.to_do_edit>input {
    padding: 3px 5px;
    font-size: 13px;
    font-weight: 400;
}

.to_do_edit>svg {
    width: 10px;
    position: absolute;
    top: 40%;
    right: 5%;
    z-index: 1;
    cursor: pointer;
}



/* admin board */
.attendance_bg {
    height: 239.5px;
    margin-top: 10px;
    background-color: #F6F5FE;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice_contents {
    font-size: 14px;
    margin-top: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.notice_writer {
    margin-top: 20px;
}

.notice_card.active {
    box-shadow: 0 0 0 2px #cfcfcf inset;
}

.add_notice {
    background-color: #B8B8B8;
    color: var(--white-color);
    font-size: 15px;
    padding: 3px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}





/* 마이보드 > 스케쥴 */
section.schedule {
    overflow-x: hidden;
}

.my_wrap {
    padding: 1vw 4vw;
    width: 100%;
}

.schedule_wrap {
    max-width: 900px !important;
    width: 100%;
    height: 100%;
    margin-right: 40px;
}

.schedule_wrap>table {
    width: 100%;
}

.add_schedule {
    position: absolute;
    cursor: pointer;
    width: 65px;
    right: 0;
    bottom: 0;
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

.add_schedule:hover {
    animation: bounce 1.5s ease-in-out;
}

#modalAddSchedule .add_schedule_wrap .time .sel {
    min-width: 50px;
}

#modalAddSchedule .add_schedule_wrap .sel_w button {
    padding: 6px;
}

#modalAddSchedule .add_schedule_wrap .year>.sel:before {
    right: 5px;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    20% {
        transform: translateY(-15px);
    }

    50% {
        transform: translateY(0);
    }

    70% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

.schedule_wrap>table tr:nth-of-type(3) td,
.schedule_wrap>table tr:nth-of-type(4) td,
.schedule_wrap>table tr:nth-of-type(5) td,
.schedule_wrap>table tr:nth-of-type(6) td,
.schedule_wrap>table tr:nth-of-type(7) td {
    vertical-align: top;
    text-align: left;
    padding: 9px 10px;
    width: 14.2%;
    height: 120px;
    cursor: pointer;
    font-size: 16px;
}

.day_of_the_week td {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 500;
}

.day_of_the_week td:first-child {
    color: var(--on-design-tag-font-color);
}

.day_of_the_week td:last-child {
    color: var(--main-color);
}

.schedule_wrap>table tr td.active {
    background: var(--left-side-bg);
}

.schedule_wrap>table tr td.today::before {
    display: none;
}

.schedule_detail_wrap {
    max-width: 26vw;
    width: 100%;
    position: relative;
}

.bg_schedule_detail_wrap {
    position: absolute;
    background: #F4FBFF;
    width: 100%;
    height: 100%;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    z-index: -1;
    right: -18%;
}

.current_date {
    padding: 35px 0px 35px 120px;
    font-size: 30px;
    font-weight: 600;
    color: var(--main-color);
}

.current_date::before {
    content: '';
    background-color: var(--main-color);
    height: 100%;
    padding: 2px;
    margin-right: 20px;
}

.schedule_list_w {
    max-height: 570px;
    overflow: hidden;
}

.schedule_list_w.scroll::-webkit-scrollbar-thumb {
    background: rgba(244, 251, 255, 0);
}

.schedule_list_w.scroll::-webkit-scrollbar-track {
    background: rgba(244, 251, 255, 0);
}

.schedule_w {
    background: var(--white-color);
    border-left: 10px solid var(--schedule-color01);
    padding: 15px 20px;
    max-width: 400px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, .1);
}

.schedule_w:hover {
    animation: grow 0.6s ease-in-out;
}

.schedule_w.nd {
    border-left: 10px solid var(--schedule-color02);
}

.schedule_w.rd {
    border-left: 10px solid var(--schedule-color03);
}

.schedule_w>.sch_title {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--schedule-color01);
}

.schedule_w.nd>.sch_title {
    color: var(--schedule-color02);
}

.schedule_w.rd>.sch_title {
    color: var(--schedule-color03);
}

.sch_title>div {
    font-weight: 600;
}

.icon_sch_edit,
.icon_sch_delete {
    cursor: pointer;
}

.shc_inner_icon {
    width: 16px;
}

.shc_inner>div {
    display: flex;
}

.shc_inner>div>div>svg>path {
    fill: #C6C6C6;
}

/* schedule_w 오른쪽에서 나타나는 애니메이션 */
.schedule_w {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.schedule_w.active {
    opacity: 1;
    transform: translateX(0);
}

.modal_wrap_md.schedule {
    max-width: 470px;
}

.people.active {
    z-index: 1;
}

.people.active .input_people {
    border-radius: 5px 5px 0 0;
}

.people.active .people_sel {
    display: block;
}

.people>.input_people {
    position: relative;
}

.people_sel {
    padding: 20px;
    display: none;
    position: absolute;
    top: 30px;
    left: 50px;
    background-color: #fff;
    border: var(--input-border-grey);
    border-top: 0;
    border-radius: 0 0 5px 5px;
    padding: 0 3px 3px;
    width: calc(100% - 50px);
    max-height: 153px;
    overflow: hidden;
    overflow-y: auto;
}

.people_sel button:hover,
.people_sel button.active {
    background-color: var(--left-side-bg);
}

.people_sel button {
    text-align: left;
    display: block;
    border-radius: 5px;
    background-color: var(--white-color);
    font-size: 15px;
    font-weight: normal;
    padding: 6px 13px;
    width: 100%;
    transition: all 0.4s 0s;
}

.schedule.mini .add_schedule_wrap>div {
    display: block;
}

.schedule.mini .icon_area {
    background-size: 20px;
    width: 40px;
}

.schedule.mini {
    white-space: nowrap;
    display: none;
}

.schedule.mini .input_calendar {
    max-width: 100px;
    font-size: 13px;
}

.schedule.mini .select_time .sel {
    min-width: 50px;
    font-size: 13px;
}

.schedule.mini .ico_charge_add {
    top: 41px;
}

.schedule.mini .people_sel {
    top: 65px;
    left: 0;
    width: 100%;
}

.schedule.mini .selected_charge_w.schedule {
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
}









/* 마이보드 > working hour */
.my_wrap.working_hour {
    padding: 1vw 7vw;
}

.wh_div {
    max-width: 600px;
    width: 100%;
    margin-top: 30px;
}

.wh_div .title_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.wh_div .title_area>div:first-of-type {
    font-size: 20px;
    font-weight: 600;
}

.wh_div .chart_area {
    min-height: 250px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
}

.chart_area {
    width: 300px;
}

.text_area {
    width: 280px;
}

.text_area_02 {
    width: 250px;
}

.chart_area .text_area>div {
    display: flex;
    align-items: center;
    padding: 0px 15px;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.chart_area .text_area>div:last-of-type {
    margin-bottom: 0px;
}

.chart_area .text_area>div>div:nth-of-type(1) {
    font-size: 17px;
}

.chart_area .text_area>div>div:nth-of-type(2) {
    font-size: 30px;
    text-align: right;
}

.chart_area .text_area>div:nth-of-type(1)>div:nth-of-type(2) {
    color: #1090CB;
}

.chart_area .text_area>div:nth-of-type(2)>div:nth-of-type(2) {
    color: #3A7996;
}

.chart_area .text_area>div:nth-of-type(3)>div:nth-of-type(2) {
    color: #20A1FF;
}

.chart_area .text_area_02>div:nth-of-type(1)>div:nth-of-type(2) {
    color: #2AB4BD;
}

.chart_area .text_area_02>div:nth-of-type(2)>div:nth-of-type(2) {
    color: #2C989F;
}

.chart_area .text_area_02>div:nth-of-type(3)>div:nth-of-type(2) {
    color: #2A6EBD;
}

.chart_area .text_area_02>div:nth-of-type(4)>div:nth-of-type(2) {
    color: #2ABD88;
}

.vacation_contents {
    height: 200px;
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
}

.working_hour .calendar_area hr {
    width: 8px;
    height: 1px;
    margin: 0 8px;
    border: none;
    background-color: var(--light-grey);
}

.calendar_area .btn_find_customer {
    height: 35px;
}

/* progress */
.pj_progress {
    width: 200px;
    height: 200px;
    background: none;
    position: relative;
}

.pj_progress::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 20px solid #eee;
    position: absolute;
    top: 0;
    left: 0;
}

.pj_progress>span {
    width: 50%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 1;
}

.pj_progress .pj_progress_left {
    left: 0;
}

.pj_progress .pj_progress_bar {
    width: 100%;
    height: 100%;
    background: none;
    border-width: 20px;
    border-style: solid;
    position: absolute;
    top: 0;
}

.pj_progress .pj_progress_left .pj_progress_bar {
    left: 100%;
    border-top-right-radius: 180px;
    border-bottom-right-radius: 180px;
    border-left: 0;
    -webkit-transform-origin: center left;
    transform-origin: center left;
    border-color: var(--main-color);
}

.pj_progress .pj_progress_left .pj_progress_bar_02 {
    border-color: #2AB4BD;
}

.pj_progress .pj_progress_right {
    right: 0;
}

.pj_progress .pj_progress_right .pj_progress_bar {
    left: -100%;
    border-top-left-radius: 180px;
    border-bottom-left-radius: 180px;
    border-right: 0;
    -webkit-transform-origin: center right;
    transform-origin: center right;
    border-color: var(--main-color);
}

.pj_progress .pj_progress_right .pj_progress_bar_02 {
    border-color: #2AB4BD;
}

.pj_progress .pj_progress_value {
    position: absolute;
    top: 0;
    left: 0;
}

.pj_progress_num {
    font-size: 40px;
    color: var(--main-color);
}

.pj_progress_num_02 {
    color: #2AB4BD;
}

/* table */
.table_w {
    max-height: 332px;
    overflow: auto !important;
    width: 100%;
    white-space: nowrap;
    border-bottom: 2px solid var(--font-color-2);
}

.table_w.Employees {
    max-height: 600px;
}

.table_w::-webkit-scrollbar,
.table_notice_w::-webkit-scrollbar {
    width: 6px;
}

.table_w::-webkit-scrollbar:horizontal,
.table_notice_w::-webkit-scrollbar:horizontal {
    height: 6px;
}

.table_w::-webkit-scrollbar-thumb,
.table_notice_w::-webkit-scrollbar-thumb {
    background-color: rgba(149, 149, 149, 0.1);
    border-radius: 10px;

}

.table_w::-webkit-scrollbar-track,
.table_notice_w::-webkit-scrollbar-track {
    background-color: rgba(106, 106, 106, 0.05);
}

.table_working_hour_01>thead th {
    background-color: #E8F4FA;
}

.table_working_hour_01 thead th,
.table_working_hour_02 thead th {
    border-bottom: 0;
}

.table_working_hour_02>thead th {
    background-color: #EAF8F9;
}

.table_working_hour_01 td,
.table_working_hour_02 td {
    border-top: 0;
    border-bottom: 1px solid #dee2e6;
    text-align: center;
}

.table_working_hour_01,
.table_working_hour_02 {
    max-height: 100px !important;
    overflow-y: auto;
}

.table_w .table_thead {
    background-color: var(--table-grey);
    position: sticky !important;
    top: 0;
    font-weight: 600;
}

.btn_conmment_delete {
    cursor: pointer;
    background-color: var(--main-color);
    padding: 2px 7px 2px 4px;
    color: var(--white-color);
    border-radius: 5px;
}

.btn_vacation_notice,
.btn_vacation_upload {
    cursor: pointer;
    background-color: #2AB4BD;
    padding: 5px 3px 5px 4px;
    color: var(--white-color);
    border-radius: 5px;
    margin-right: 8px;
}

.icon_vacation_notice {
    width: 16px;
    margin-bottom: -3px;
    margin-right: 2px;
}

.ico_info {
    width: 15px;
}

.bubble_info {
    display: none;
    position: absolute;
    font-size: 13px;
    white-space: nowrap;
    background: var(--white-color);
    padding: 5px 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    top: 30px;
    left: -3px;
}

.ico_info:hover+.bubble_info {
    display: block;
}

.modal_notice_wrap {
    font-size: 16px;
}

.modal_notice_wrap>div::before {
    content: '';
    width: 5px;
    height: 5px;
    background-color: var(--font-color);
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 3px;
}

.modal_notice_wrap>div {
    margin-bottom: 8px;
}

.add_schedule_wrap>div {
    display: flex;
    width: 100%;
    align-items: center;
    color: #7B7B7B;
}

.add_schedule_wrap input::placeholder {
    color: #7B7B7B;
}

.add_schedule_wrap input.w_fit {
    width: calc(100% - 50px);
}

.icon_calendar {
    background: url(https://s3.unipware.com/unipware/images/calendar.svg);
}

.icon_clock {
    background: url(https://s3.unipware.com/unipware/images/clock.svg);
}

.icon_location {
    background: url(https://s3.unipware.com/unipware/images/location.svg);
    background-size: 21px !important;
}

.icon_person {
    background: url(https://s3.unipware.com/unipware/images/person.svg);
}

.icon_pencil {
    background: url(https://s3.unipware.com/unipware/images/pencil.svg);
}

.icon_area {
    color: transparent;
    font-size: 22px;
    width: 50px;
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;

    /* 필수값 */
    .r_value {
        font-size: 16px;
        vertical-align: super;
    }
}

select.arrow_svg {
    padding-right: 34px;
    background: url(https://s3.unipware.com/unipware/images/input_arrow_down.svg) no-repeat;
    background-color: var(--white-color);
    background-size: 16px;
    background-position: calc(100% - 10px);
    outline: none;
}

select.arrow_svg:disabled {
    background: url(https://s3.unipware.com/unipware/images/input_arrow_down_dark.svg) no-repeat;
    background-color: #D8D8D8;
    background-size: 16px;
    background-position: calc(100% - 10px);
    outline: none;
    opacity: 1;
}

/* .opt_color {
    display: flex;
}
.opt_color::after {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: transparent;
    display: block;
}
.opt_color_01::after {
    background-color: var(--schedule-color01);
}
.opt_color_02::after {
    background-color: var(--schedule-color02);
}
.opt_color_03::after {
    background-color: var(--schedule-color03);
} */
#modalAddSchedule .sel {
    display: flex;
    align-items: center;
}

.sel_color {
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border-radius: 50%;
    display: inline-block;
}

.opt_color_01 {
    background-color: var(--schedule-color01);
}

.opt_color_02 {
    background-color: var(--schedule-color02);
}

.opt_color_03 {
    background-color: var(--schedule-color03);
}

.input_calendar {
    cursor: default;
    width: 140px;
    padding-right: 34px;
    background: url(https://s3.unipware.com/unipware/images/input_calendar.svg) no-repeat;
    background-color: var(--white-color);
    background-size: 20px;
    background-position: calc(100% - 10px);
    outline: none;
}

.input_calendar:disabled {
    background-color: #D8D8D8;
    background-image: url(https://s3.unipware.com/unipware/images/input_calendar_dark.svg);
    background-repeat: no-repeat;
}

.input_calendar[value],
.arrow_svg {
    color: #7B7B7B;
    font-weight: 400;
}

.toggle_switch {
    width: 48px;
    height: 24px;
    display: block;
    position: relative;
    border-radius: 30px;
    background-color: #D9D9D9;
    cursor: pointer;
}

.toggle_switch .toggle_button {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
}

#toggle:checked~.toggle_switch {
    background: var(--main-color);
}

#toggle:checked~.toggle_switch .toggle_button {
    left: calc(100% - 22px);
    background: #fff;
}

.toggle_switch,
.toggle_button {
    transition: all 0.2s ease-in;
}

.selected_charge_w.schedule {
    width: auto;
    margin-left: 50px;
    margin-top: -15px;
}

.ico_charge_cancle {
    width: 7px;
}

.ico_charge_add {
    position: absolute;
    width: 17px;
    top: 7px;
    right: 10px;
}




/* 휴가 신청 팝업 */
.modal_input_title {
    width: 10%;
}

.modal_input_title.title_top {
    padding-top: 8px;
}

.add_schedule_wrap>div.title_top {
    align-items: start;
}

.title_top>textarea {
    font-weight: 400;
    font-size: 16px;
}

.title_center {
    display: flex;
    align-items: center;
}

/* notice */
.my_wrap.my_notice{
<<<<<<< HEAD
    justify-content: center;
=======
    justify-content: space-between;
    margin-bottom: 0;
    flex-wrap: nowrap;
>>>>>>> Prod2-Master
}
.table_notice_w {
    /* max-height: 700px;
    overflow: auto !important; */
    width: 100%;
    /* white-space: nowrap;
    border-bottom: 2px solid var(--font-color-2); */
}

.icon_delete svg {
    width: 19px;
    fill: var(--white-color);
    margin-bottom: -1px;
}

.select_box::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    border: 1.5px solid #c3c3c3;
    border-radius: 5px;
}

.select>.select_box::after {
    content: " ";
    display: none;
}

.select>.select_box::after {
    content: "✓";
    color: var(--white-color);
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    background-color: var(--main-color);
    border-radius: 5px;
}

.select {
    background: var(--left-side-bg);
}

.select>.select_box::before {
    display: none;
}

.unchecked {
    font-weight: 800;
}

.checked {
    color: var(--icon-color);
    font-weight: 400;
}

.table_notice td,
.table_notice_2 td {
    border-top: 0;
    border-bottom: 1px solid #dee2e6;
}

.table_notice_2 td:first-child {
    text-align: center;
}

.table_notice_2 tr:hover {
    background: #E1EFF0;
}



.notice_table_num>div>div:nth-child(2) {
    color: var(--main-color);
    font-weight: 600;
}

.notice_table {
    border-top: 2px solid var(--main-color);
    border-bottom: 2px solid var(--main-color);
    text-align: center;
}

.notice_table tr {}

.notice_table tr:hover {
    background-color: var(--left-side-bg);
}


.notice_table td:nth-child(2) {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    font-size: 16px;
    padding-left: 30px;
    
}


.notice_table td.active {
    color: var(--main-color);
    font-weight: 700;
}

.notice_table_w {
    max-width: 1440px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: auto !important;
}

.notice_table .notice_table_date::before {
    content: "\2003\2003";
    background: url(https://s3.unipware.com/unipware/images/icon_calendar.png);
    background-repeat: no-repeat;
}

.notice_table .notice_table_writer::before {
    content: "\2003\2003";
    background: url(https://s3.unipware.com/unipware/images/icon_pencil.png);
    background-repeat: no-repeat;
}

.notice_fixed {
    background: #F1F4F5;
}

.notice_fixed>td:first-child>div {
    border: 2px solid var(--main-color);
    color: var(--main-color);
    font-weight: 600;
    background: #fff;
}

.notice_fixed>td>div {
    min-width: 50px;
}

/* (수정) 공지사항 - 241031 */

#main_contents.notice_contents {
    scroll-behavior: smooth;
}

.wrap.notice_wrap {
    margin-bottom: 40px;
}

.my_notice {
    position: relative;
    overflow: hidden;

    .notice_detail {
        position: relative;
        order: 2;
        height: 0;
        margin-top: 89px;
        border-top: 2px solid var(--main-color);
        width: 0;
        opacity: 0;
        transition: all 1s ease;       

        .top_button {
            position: absolute;
            right: 0;
            top: -48px;
        
            .tooltip {
                position: absolute;
                top: 40px;
                right: 0;
                left: initial;
                width: 110px;
                text-align: center;
            }   
        }

        .title {
            padding: 16px 0 12px;
            border-bottom: 1px solid #dee2e6;

            .tit_btn_wrap {
                width: 100%;
                align-items: start;
                height: 100%;
            
                .btns {
                    align-items: start;
                }

                .h3_wrap {
                    width: 98%;
                    align-items: start;
                }

                h3 {
                    max-width: 100%;
                    font-size: 18px;
                    font-weight: 600;
                    color: var(--main-color);
      
    
                }

                span.array {
                    width: 48px;
                    padding: 2px 0;
                    text-align: center;
                    font-size: 14px;
                    border: 1px solid var(--main-color);
                    color: var(--main-color);
                    font-weight: 600;
                }
    
                ul {
    
                    li {
                        font-size: 14px;
                        font-weight: 500;
                    }
    
                    li:first-of-type {
                        padding-right: 12px;
                        
                        font-weight: 500;
                    }
    
                    li:last-of-type {
                        position: relative;
                        padding-left: 12px;
                        color: #888;
                    }
    
                    li:last-of-type::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 0;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 12px;
                        background: #d9d9d9;
                    }
                }
            }

            .dates {
                padding-left: 56px;
                margin-top: 8px;
            }
        }

        .view_contents {
            padding: 20px 0 0;

            pre {
                padding: 0 12px;
                font-size: 15px;
                line-height: 1.7;
                text-wrap: wrap;
            }
        }

        .comment.title {
            border: none;
        }

        .comment_wrap {
            margin: 0;

            .comment_array {
                align-items: center;

                .contents {
                    width: 100%;
                    align-items: center;
    
                    .name, .date {
                        width: 100%;
                    }
    
                    pre.comment_contents {
                        font-size: 14px;
                        text-wrap: wrap;
                        width: auto;

                        textarea {
                            margin: 0 4px;
                            width: 620px;
                        }
                    }
                }

                .tools_wrap {
                    margin-top: 20px;
                    align-self: start;
                }
            }

            .comment_wrap_line {
                margin: 12px 0;
            }
        }

        .comment_container {
            height: 192px;
        }
    }  
}

.top_button {
    position: relative;

    button {
        width: 34px;
        height: 34px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background: var(--white-color);

        img {
            width: 16px;
            margin-top: 1px;
        }
    }
    
    button:hover {
        background: #f8f8f8;
    }

    .tooltip {
        display: none;
        position: absolute;
        top: -12px;
        left: 0;
        padding: 6px 10px;
        width: fit-content;
        background: #333;
        font-size: 14px;
        font-weight: 500;
        color: var(--white-color);
        border-radius: 4px;
        z-index: 102;
    }
    
}

.top_button:hover .tooltip {
    display: block;
    z-index: 102;
}

.goto_bottom_wrap {
    display: none;
}

.goto_bottom {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            left: 60%;
            bottom: 80px;
            transform: translateX(-50%);
            padding: 0 20px;
            width: fit-content;
            height: 44px;
            background: var(--white-color);
            border-radius: 24px;
            box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
            transition: all 0.1s ease-in-out;
            z-index: 99;

            p {
                color: 000;
                font-weight: 600;
            }

            img {
                width: 12px;
            }
            
            img.hover {
                display: none;
            }

            
        }

.goto_bottom:hover {
    background: var(--main-color);

    p {
        color: var(--white-color);
    }

    img.hover {
        display: block;
    }

    img.none_hover {
        display: none;
    }
}

.notice_add {
    .contents {
        min-width: 900px;

        .input_div  {
            .title {
                width: 20%;
            }

            .form_control {
                max-width: 900px;
            } 
        }
    }
        
    .input_div {
        .editor_wrap {
            flex-direction: column;
            width: 100%;

            #noticeEditor {
                max-width: 900px;
                height: 248px;
                
                strong {
                    font-weight: bold;
                }

                em {
                    font-style: italic
                }
            } 

            .ql-size-small {
                font-size: 10px; /* 작은 폰트 사이즈 */
            }
            
            .ql-size-normal {
                font-size: 14px; /* 기본 폰트 사이즈 */
            }
            
            .ql-size-large {
                font-size: 18px; /* 큰 폰트 사이즈 */
            }
            
            .ql-size-huge {
                font-size: 24px; /* 매우 큰 폰트 사이즈 */
            }
            
        }
    }

}





/* s:datepicker */
.ui-widget.ui-widget-content {
    border: 0;
}

.ui-datepicker {
    width: 250px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    border: 0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 5px;
    padding: 0 5px;
    z-index: 1200 !important;
}

.ui-datepicker table {
    width: 100%;
    height: 200px;
    margin: 7px 0;
    font-size: .9em;
    border-collapse: collapse;
}

.ui-datepicker .ui-datepicker-header {
    background: var(--main-color);
    margin: 0 -5px;
    text-align: center;
    display: flex;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    display: flex;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    line-height: 46px;
    height: 46px;
}

.ui-datepicker .ui-datepicker-title {
    margin: auto;
    /* line-height: 1.8em; */
    text-align: center;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    margin: 0;
    padding: 0;
    min-width: auto;
    width: auto;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select option {
    color: #000;
    font-weight: normal;
    font-size: 13px;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select.ui-datepicker-month {
    margin-left: 6px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 0;
    left: 0;
    border: 0;
    cursor: pointer;
    width: 35px;
    height: 46px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;

}

.ui-datepicker .ui-datepicker-prev .ui-icon {
    background: url(https://s3.unipware.com/unipware/images/icon_cal_pre.svg) 50% 50% no-repeat;
    display: flex;
    height: 100%;
    font-size: 0;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
    background: url(https://s3.unipware.com/unipware/images/icon_cal_next.svg) 50% 50% no-repeat;
    display: flex;
    height: 100%;
    font-size: 0;
}

.ui-datepicker .ui-datepicker-next {
    left: auto;
    right: 0;
}

.ui-datepicker th {
    font-weight: 500;
    padding: 7px 0 4px;
}

.ui-datepicker th span {
    color: rgba(0, 0, 0, 0.3);
    font-size: 14px;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 0.2em;
    text-decoration: none;
    line-height: 26px;
    text-align: center;
}

.ui-datepicker td span,
.ui-datepicker td a:hover {
    background-color: #ececec;
    border-radius: 50%;
    ;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
    vertical-align: middle;
}

.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active {
    background-color: var(--left-side-bg);
    border-radius: 50%;
    ;
}

.ui-datepicker .mtz-monthpicker,
.ui-datepicker .ui-state-default {
    font-size: 13px;
    color: #000;
}

.ui-datepicker .ui-datepicker-buttonpane {
    display: flex;
    border: 0;
    justify-content: space-between;
    padding: 0 10px 0 10px;
}

.ui-datepicker .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    display: inline-block;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 27px;
    font-size: 0;
    font-weight: normal;
    padding: 5px 15px 5px 15px;
    margin: 0 0 13px;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    background-color: #fff;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:before {
    content: "오늘";
    color: var(--main-color);
}

.ui-datepicker .ui-datepicker-buttonpane button:before {
    content: "확인";
    font-size: 13px;
    color: #fff;
}

/* e:datepicker */


/* mypage > 결재(Approval) */
/* 결재 진행상태 */
.appr_progress li {
    position: relative;
    width: 23.624%;
    border-radius: 8px;
    box-shadow: -3px 7px 19px 2px rgb(163 182 190 / 18%);
}

.appr_progress li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 6.655%;
}

.appr_progress li a span {
    display: flex;
}

.appr_progress li a .status {
    flex-grow: 1;
    margin-right: auto;
    font-size: 18px;
    font-weight: 800;
    color: var(--approval-color01);
}

.appr_progress li a .status span {
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10.916%;
    border-radius: 8px;
}

.appr_progress li a .status span img {
    width: 24px;
}

.appr_progress li.active:before {
    content: '';
    position: absolute;
    width: 4px;
    height: 100%;
    border-radius: 12px 0 0 12px;
    opacity: 50%;
}

.appr_progress li:first-of-type.active:before {
    background-color: var(--approval-color01);
}

.appr_progress li:nth-child(2).active:before {
    background-color: var(--approval-color02);
}

.appr_progress li:nth-child(3).active:before {
    background-color: var(--approval-color03);
}

.appr_progress li:nth-child(4).active:before {
    background-color: var(--approval-color04);
}

.appr_progress li:nth-child(2) a .status {
    color: var(--approval-color02);
}

.appr_progress li:nth-child(3) a .status {
    color: var(--approval-color03);
}

.appr_progress li:nth-child(4) a .status {
    color: var(--approval-color04);
}

.appr_progress li:first-child a .status span {
    background: var(--approval-bg-color01);
}

.appr_progress li:nth-child(2) a .status span {
    background: var(--approval-bg-color02);
}

.appr_progress li:nth-child(3) a .status span {
    background: var(--approval-bg-color03);
}

.appr_progress li:nth-child(4) a .status span {
    background: var(--approval-bg-color04);
}

.appr_progress li a span:nth-of-type(2) {
    font-weight: 600;
}

.appr_progress li a span:nth-of-type(2) b {
    margin-right: 8px;
    font-size: 24px;
    color: #000;
}

.appr_slide_top,
.appr_admin_top {
    margin-top: 52px;
    width: 100%;
}

.appr_slide_top .dropdown {
    position: relative;
}

.appr_slide_top .dropdown .dropdown_menu {
    position: absolute;
    top: 70px;
    display: none;
    width: 100%;
    padding: 8px;
    background-color: var(--white-color);
    z-index: 99;
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

.appr_slide_top .dropdown .dropdown_menu a {
    display: block;
    text-align: center;
    padding: 12px 48px;
    font-size: 16px;
    font-weight: 600;
}

.appr_slide_top .dropdown .dropdown_menu a:hover {
    background-color: var(--main-color);
    border-radius: 8px;
    color: var(--white-color);
}

.appr_slide_top .controller button {
    width: 48px;
    height: 48px;
    border: 1px solid var(--box-border);
    background: var(--white-color);
    border-radius: 24px;
    background-position: center center;
    background-repeat: no-repeat;
}

.appr_slide_top .controller button.prev_arrow {
    margin-right: 4px;
    background-image: url('https://s3.unipware.com/unipware/images/appr_slide_prev.svg');
}

.appr_slide_top .controller button.next_arrow {
    background-image: url('https://s3.unipware.com/unipware/images/appr_slide_next.svg');
}

.appr_slide_top .controller button.prev_arrow.slick-disabled {
    background-image: url('https://s3.unipware.com/unipware/images/appr_slide_prev_disable.svg') !important;
}

.appr_slide_top .controller button.next_arrow.slick-disabled {
    background-image: url('https://s3.unipware.com/unipware/images/appr_slide_next_disable.svg') !important;
}

.appr_slide_top .dropdown button {
    padding: 16px 64px;
    color: var(--font-color);
    font-weight: 700;
    border-radius: 28px;
    border: 1px solid var(--box-border);
    background: var(--white-color);
}

.appr_slide_top .dropdown button .appr_slide_btn_hover {
    display: none;
}

.appr_slide_top .dropdown button:hover {
    color: var(--white-color);
    border: 1px solid var(--main-color);
    background: var(--main-color);
    box-shadow: 2px 7px 19px 2px rgb(16 144 203 / 32%)
}

.appr_slide_top .dropdown button:hover .appr_slide_btn {
    display: none;
}

.appr_slide_top .dropdown button:hover .appr_slide_btn_hover {
    display: block
}

.appr_slide_top .dropdown button img {
    width: 16px;
    margin-right: 8px;
}

.appr_slide {
    width: 100%;
    margin-top: 2.114%;
}

.appr_slide .slick-slide {
    width: 30%;
    height: 275px;
    padding: 40px;
    cursor: pointer;
    border: 1px solid var(--box-border) !important;
    margin-right: 28px;
    border-radius: 12px;
}

.appr_slide .slick-slide:hover,
.appr_slide dl.appr_post:hover {
    box-shadow: 9px 0px 16px 0px rgb(163 182 190 / 18%);
}

.appr_slide .slick-slide:hover dl dt,
.appr_slide dl.appr_post:hover dt .tit {
    text-decoration: underline 1px var(--font-color);
}

/* hover.css 라이브러리 : Reveal */
.hvr-reveal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden;
}

.hvr-reveal:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-color: #eee;
    border-style: solid;
    border-width: 0;
    -webkit-transition-property: border-width;
    transition-property: border-width;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.hvr-reveal:hover:before,
.hvr-reveal:focus:before,
.hvr-reveal:active:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-width: 3px;
    border-radius: 12px;
}

.appr_slide .status {
    font-size: 16px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.appr_slide .status.wait {
    color: var(--approval-color02);
    background: var(--approval-bg-color02);
}

.appr_slide .status.refuse {
    color: var(--approval-color03);
    background: var(--approval-bg-color03);
}

.appr_slide .status.complete {
    color: var(--approval-color04);
    background: var(--approval-bg-color04);
}

.appr_slide ul.date li {
    color: #bababa;
}

.appr_slide dl dt {
    font-size: 20px;
    color: var(--font-color);
    font-weight: 600;
    margin-bottom: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.appr_slide dl dd:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    color: #5a5a5a;
    font-weight: 600;
    margin-bottom: 16px;
}

.appr_slide dl dd:nth-of-type(2) {
    font-size: 16px;
    color: #727272;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.appr_board_sort {
    display: flex;
    width: fit-content;
    padding: 2px 8px;
    border: 1px solid var(--box-border);
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
}

.appr_board_sort img {
    width: 16px;
    margin-right: 4px;
}

/* 슬라이드 프로그레스바 */
.appr_progressBar_cont {
    width: 100%;
    height: 3px;
    background: #e0e0e0;
    margin-top: 52px;
}

.appr_progressBar_cont .appr_progressBar {
    height: 100%;
    width: 0;
    background: #000;
    transition: width 0.6s;
}

.slick-list {
    width: 100% !important
}

/* 슬라이드 세개 이하일때 슬라이드 왼쪽 정렬 */
.single-slide .slick-list .slick-track {
    display: flex;
    width: 100% !important;
}

/* 결재(Approval) 페이지 자체 팝업 세로값 */
.modal_popup_appr {
    max-height: 75vh !important;
}

/* 휴가신청서 작성 팝업 */
.modal_popup .appr_vacation_tab {
    display: flex;
    padding: 1.08%;
    background: #F1F6F8;
    font-size: 16px;
    font-weight: 700;
    border-radius: 8px;
}

.modal_popup .appr_vacation_tab li {
    cursor: pointer;
    width: 50%;
    padding: 8px 0;
    color: #7895A3;
    border-radius: 4px;
}

.modal_popup .appr_vacation_tab li.active {
    color: var(--main-color);
    background: var(--white-color);
    border: 1px solid #D7E8EF;
    box-shadow: 1px 2px 2px #D7E8EF;
}

.modal_popup .appr_vacation_tab_content textarea {
    resize: none;
    height: 80px;
}

.modal_popup .appr_vacation_tab_content.dayoff .date_wrap {
    position: relative;
}

.modal_popup .appr_vacation_tab_content.dayoff .date_wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 1px;
    background: #d9d9d9;
}

.modal_popup .appr_vacation_tab_content.dayoff .date_wrap input {
    width: 45%;
}

.modal_popup .appr_vacation_tab_content.half hr {
    width: 1px;
    height: 12px;
    border: none;
    background: #d9d9d9;
    margin: 10px auto;
}

.modal_popup .appr_vacation_tab_content.half .date_wrap input,
.modal_popup .appr_vacation_tab_content.half .modal_select {
    width: 49%;
}

/* 기안 게시글 slide 상세 팝업 */
.modal_popup .appr_board_view h2 {
    text-align: left;
    font-size: 20px;
    font-weight: 600;
}

.modal_popup .appr_board_view .info {
    display: flex;
    justify-self: start;
}

.modal_popup .appr_board_view .info .date,
.time {
    color: #bababa;
}

.modal_popup .appr_board_view .info .date {
    margin: 0 4px 0 16px;
}

.modal_popup .appr_board_view .period {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #d9d9d9;
    padding: 14px 4%;
    font-weight: 600;
    color: #6a6a6a;
    border-radius: 8px;
}

.modal_popup .appr_board_view .period img {
    width: 14px;
    margin-right: 4%;
}

.modal_popup .appr_board_view .period hr {
    width: 4%;
    height: 1px;
    background: #d9d9d9;
    border: none;
    margin: 0 4%;
    box-shadow: none;
}

.modal_popup .appr_board_view .appr_txt_area {
    padding: 16px;
    height: 100px;
    font-size: 16px;
    text-align: left;
    background: #f8f8f8;
}

.modal_popup .appr_board_view .appr_view_status {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 700;

}

.modal_popup .appr_board_view .appr_view_status img {
    width: 24px;
}

.modal_popup .appr_board_view .appr_view_status.wait {
    color: var(--approval-color02);
    background: var(--approval-bg-color02);
}

.modal_popup .appr_board_view .appr_view_status.refuse {
    color: var(--approval-color03);
    background: var(--approval-bg-color03);
}

.modal_popup .appr_board_view .appr_view_status.complete {
    color: var(--approval-color04);
    background: var(--approval-bg-color04);
}

/* 휴가신청서(반차) 상세 팝업 */
.modal_popup .appr_board_view .period p span {
    color: #000;
    margin-left: 3%;
}

/* 지출결의서 작성 팝업 */
.modal_popup .spending_write .date_money_wrap .contents {
    flex-shrink: 0;
    width: 48.37%;
}

.modal_popup .spending_write .date_money_wrap .contents input {
    width: 100%;
}

.modal_popup .spending_write .date_money_wrap .contents .spending_input_wrap {
    position: relative;
}

.modal_popup .spending_write .date_money_wrap .contents .spending_input_costTxt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    font-weight: 600;
}

/* 지출결의서 상세 팝업 */
.modal_popup .spending_cost {
    font-size: 18px;
    font-weight: 800;
    color: var(--font-color);
}

.modal_popup .spending_cost span {
    font-size: 16px;
    font-weight: 400;
}

.modal_popup .spending_item .appr_txt_area {
    height: 70px;
}


/* mypage > 결재(관리자) Approval(admin) */
/* board */
.approval_wrap .appr_slide_top.appr_slide_top {
    position: initial;
}

.appr_admin_board {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.appr_admin_board .appr_post_wrap {
    padding-right: 8px;
    padding-left: 8px;
    display: flex;
    flex-grow: 1;
}

.appr_admin_board .appr_post {
    width: 100%;
    padding: 24px;
    margin-bottom: 16px;
    cursor: pointer;
    border: 1px solid var(--box-border);
    border-radius: 12px;
}

.appr_slide dl.appr_post dt {
    font-size: 18px;
    margin-bottom: 12px;
}

.appr_slide dl.appr_post dt .status {
    margin-right: 2.677%;
}

.appr_slide dl.appr_post dd:nth-of-type(1) {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}

.appr_slide dl.appr_post dd:nth-of-type(1) .appr_post_date {
    font-size: 14px;
    color: #dadada;
    font-weight: 400;
}

.appr_slide dl.appr_post .appr_board_sort {
    margin: 0 2.677%;
}

.appr_slide dl.appr_post .appr_detail_preview span {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 1.785%;
    background: #f8f8f8;
    border-radius: 20px;
}

.appr_slide dl.appr_post .appr_detail_preview span b {
    color: #000;
}

/* 팝업 */
.modal_popup_appr .appr_decision {
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #444;
    border: 1px solid #E6ECEB;
    border-radius: 8px;
}

.modal_popup_appr .appr_decision input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-right: 12px;
    border: 1.5px solid #dadada;
    border-radius: 8px;
    background: #f8f8f8;
}

.modal_popup_appr .appr_decision label {
    display: flex;
    align-items: center;
    flex-grow: 1;
    text-align: left;
    cursor: pointer;
}

.modal_popup_appr .appr_decision.confirm {
    color: var(--approval-color04);
    border-color: var(--approval-color04);
    background: var(--approval-bg-color04);
}

.modal_popup_appr .appr_decision.confirm input[type='radio']:checked {
    background-color: var(--approval-color04);
    border: 3px solid var(--approval-bg-color04);
    box-shadow: 0 0 0 1.5px var(--approval-color04)
}

.modal_popup_appr .appr_decision.refuse {
    color: var(--approval-color03);
    border-color: var(--approval-color03);
    background: var(--approval-bg-color03);
}

.modal_popup_appr .appr_decision.refuse input[type='radio']:checked {
    background-color: var(--approval-color03);
    border: 3px solid var(--approval-bg-color03);
    box-shadow: 0 0 0 1.5px var(--approval-color03)
}

.modal_popup_appr .refuse_reason textarea {
    resize: none;
    height: 80px;
}


/* admin_board */
.admin_wrap {
    padding: 40px 80px 0 80px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.admin_wrap_top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
}

.admin_wrap_bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.admin_board {
    position: relative;
    height: calc(100% - 30px);
    border-radius: 20px;
    padding: 30px 110px;
}

.admin_board.bg01 {
    background-color: #F6F5FE;
}

.admin_notice_board.bg02 {
    background-color: #F5FEF5;
}

.admin_calendar_w {
    width: 23%;
}

.admin_EM_wrap,
.admin_notice_wrap {
    width: 34%;
}

.admin_calendar_w>table {
    width: 100%;
}

.admin_calendar_w>table tr:first-of-type td {
    text-align: left;
}

.admin_calendar_w>table tr td {
    text-align: center;
    padding: 7px;
}

.admin_calendar_w>table tr:nth-of-type(2) td {
    border-bottom: 1px solid #E1E1E1;
}

.admin_calendar_w>table tr td {
    position: relative;
}

.admin_calendar_w>table tr td.today {
    color: var(--white-color);
}

.admin_calendar_w>table tr td.today::before {
    content: '';
    width: 34px;
    height: 34px;
    left: 50%;
    top: 50%;
    z-index: -1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    background-color: var(--main-color);
    color: var(--white-color);
}

.admin_board>div:nth-child(1),
.admin_board>div:nth-child(2),
.admin_board>div:nth-child(3) {
    align-items: center;
    justify-content: space-between;
    height: 33%;
}

.admin_board>div>div:first-child {
    font-size: 21px;
}

.EM_color_01,
.EM_color_02,
.EM_color_03 {
    font-size: 35px;
    font-weight: 700;
}

.EM_color_01 {
    color: #5B74B6;
}

.EM_color_02 {
    color: #655BB6;
}

.EM_color_03 {
    color: #9386FF;
}

.admin_board svg {
    width: 15px;
    cursor: pointer;
}

.state_hover {
    background: #fff;
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: 0px 5px 9px rgba(0, 0, 0, .3);
    z-index: 1;
    display: none;
}

.state_hover.in_people {
    position: absolute;
    top: 20%;
    right: -10%;
    font-weight: 300;
}

.state_hover.out_people {
    position: absolute;
    top: 50%;
    right: -10%;
}

.state_hover.vacation_people {
    position: absolute;
    top: 75%;
    right: -10%;
}

.state_hover>.name_w {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.state_hover>.name_w>.name {
    font-size: 16px;
    color: #797979;
}

.state_hover>.name_w>.state {
    border-radius: 20px;
    padding: 2px 13px;
    font-size: 12px;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
}

.state_hover>.name_w>.state.working {
    border: 2px solid #9386FF;
    color: #9386FF;
}

.state_hover>.name_w>.state.none {
    background: #CDCDCD;
    color: #fff;
}

.admin_notice_board {
    height: calc(100% - 30px);
    border-radius: 20px;
    padding: 40px;
}

.color_04 {
    color: #62B762;
}

.color_04 svg {
    fill: #62B762;
}

.list_vacation>div:first-child {
    font-size: 18px;
    margin-bottom: 15px;
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    cursor: pointer;
}

.list_vacation>div:nth-child(2) {
    color: var(--icon-color);
    font-size: 16px;
}

.admin_to_do_wrap {
    max-width: 350px;
    margin-right: 65px;
}

.admin_my_project_wrap {
    max-width: 1600px;
}

/* 관리자 > 직원 관리*/
.admin_wrap.working_hour {
    display: block;

    .tap_area {
        display: inline-block;
        position: relative;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    .tap_area label {
        color: var(--light-grey);
        font-size: clamp(16px, 4vw, 18px);
        cursor: pointer;
        font-weight: 500;
        position: relative;
        cursor: pointer;
    }

    .tap_area label.active {
        color: var(--main-color);
    }

    .underline {
        position: absolute;
        top: 35px;
        bottom: 0;
        height: 3px;
        background-color: var(--main-color);
        width: 0;
        transition: all 0.3s ease;
    }
}

.tap_area_wrap {
    position: relative;
    overflow: hidden;
    height: 700px;

    .admin_working_hour_wrap {
        transform: translateX(0);
    }

    .admin_working_hour_wrap,
    .admin_employees_wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease;
        padding: 0 20px 0 0;
<<<<<<< HEAD
        overflow-y: auto;
=======
        /* overflow-y: auto; */
>>>>>>> Prod2-Master
    }

    .admin_employees_wrap {
        transform: translateX(100%);
    }
}
.admin_employees_wrap .filter_area,
.admin_working_hour_wrap .filter_area{
    flex-wrap: wrap;
}
.filter_area {
    display: flex;
    margin-top: 70px;
    justify-content: space-between;

    .dropdown {
        position: relative;
    }

    .dropdown.active {
        z-index: 1;
    }

    .dropdown.active .main_sel {
        border-radius: 5px 5px 0 0;
    }

    .dropdown.active .main_sel:before {
        transform: rotate(180deg)
    }

    .dropdown.active .sel {
        display: block;
    }

    .dropdown>.main_sel {
        min-width: 140px;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        position: relative;
        border: var(--input-border-grey);
        background-color: var(--white-color);
        border-radius: 5px;
        padding: 10px 16px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .dropdown.years>.main_sel {
        min-width: 100px;
    }

    .dropdown.month>.main_sel {
        min-width: 80px;
    }

    .dropdown>.main_sel:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -5px;
        background: url(https://s3.unipware.com/unipware/images/ico_select2.svg) 50% 50% no-repeat;
        width: 10px;
        height: 10px;
    }

    .sel {
        padding: 20px;
        display: none;
        position: absolute;
        top: 36px;
        left: 0;
        background-color: #fff;
        border: var(--input-border-grey);
        border-top: 0;
        border-radius: 0 0 5px 5px;
        padding: 0 3px 3px;
        width: 100%;
        max-height: 153px;
        overflow: hidden;
        overflow-y: auto;
    }

    .sel button {
        text-align: left;
        display: block;
        border-radius: 5px;
        background-color: var(--white-color);
        font-size: 14px;
        font-weight: normal;
        padding: 6px 13px;
        width: 100%;
        transition: all 0.3s 0s;
    }

    .sel button:hover {
        background-color: var(--left-side-bg);
    }

    .search_area input {
        padding: 7px 16px 7px 45px;
        border-radius: 5px;
        box-sizing: border-box;
    }

    .search_area input::placeholder {
        font-size: 14px;
    }
}

.table_header {
    table {
        width: 100%;
    }

    thead tr th {
        background-color: var(--left-side-bg);
        border-bottom: 1px solid var(--table-border);
        font-size: clamp(10px, 4vw, 15px);
        padding: 12px 0;
    }
}

.admin_working_hour_wrap .table_body {
    max-height: 470px;
}

.table_body {
    width: 100%;
    max-height: 400px;
    overflow-y: auto;

    table {
        width: 100%;
    }

    tbody tr td {
        border-top: 0;
        border-bottom: 1px solid var(--table-border);
        text-align: center;
        padding: 12px 0;
    }

    tbody tr:hover {
        background: var(--table-hover-grey);
        cursor: pointer;
    }

    .name {
        font-weight: 600;
    }
}

.right_aside_bg.admin_working_hour.active,
.right_aside_bg.admin_employees.active {
    visibility: visible;
    opacity: 1;
}

.right_aside_bg.active.admin_working_hour .right_aside,
.right_aside_bg.active.admin_employees .right_aside {
    transform: translateX(0);
}

.right_aside_bg.admin_working_hour {
    visibility: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    background: var(--bg-black-op-3);
    z-index: 201;

    .right_aside {
        width: 720px;
        height: 100%;
        background: var(--white-color);
        position: absolute;
        right: 0;
        padding: 30px 50px;
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
    }

    .close {
        width: 100%;
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
    }

    .close img {
        width: 20px;
        cursor: pointer;
    }

    .profile_area {
        display: flex;
    }

    .profile_area .profile {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 15px;
    }

    .profile_area dt {
        font-size: 13px;
        color: var(--light-grey);
    }

    .profile_area dd {
        font-weight: 600;
        font-size: 18px;
    }

    .tap_area {
        display: inline-block;
        position: relative;
        margin: 30px 0;
    }

    .tap_area label {
        color: var(--light-grey);
        font-size: 18px;
        cursor: pointer;
        font-weight: 500;
        position: relative;
        cursor: pointer;
    }

    .tap_area label.active {
        color: var(--main-color);
    }

    .underline {
        position: absolute;
        top: 30px;
        bottom: 0;
        height: 3px;
        background-color: var(--main-color);
        width: 0;
    }

    .filter_area {
        margin-top: 0;
        justify-content: left;
    }

    .summary_box {
        width: 100%;
        box-shadow: 0px 0px 10px #BBDBEA;
        display: flex;
        justify-content: space-between;
        padding: 20px 30px;
        margin: 30px 0;
    }

    .summary_box dl {
        text-align: center;
    }

    .summary_box dt {
        color: var(--main-color);
        font-weight: 600;
        font-size: 16px;
        margin-bottom: 15px;
    }

    .summary_box dd {
        font-size: 15px;
    }

    .btn_edit {
        margin-bottom: -8px;
    }

    .working_hour_edit {
        color: var(--working-edit-color);
        font-weight: 500;
    }

    .table_body table tbody tr td {
        cursor: auto;
        vertical-align: middle;
    }

    .overflow_text {
        display: block;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        max-width: 150px;
        text-overflow: ellipsis;
        cursor: pointer;
    }

    .overflow_text span {
        display: inline-block;
        position: relative;
    }

    .tap_area label {
        cursor: pointer;
    }

    .details {
        position: relative;
        overflow: hidden;
        height: 100%;
    }

    .working_hours_detail,
    .vacaion_detail {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: transform 0.5s ease;
        padding: 0 20px 0 10px;
    }

    .working_hours_detail {
        transform: translateX(0);
    }

    .vacaion_detail {
        transform: translateX(100%);
    }
}

.right_aside_bg.admin_employees {
    visibility: hidden;
    position: fixed;
    width: 100%;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    overflow: hidden;
    background: var(--bg-black-op-3);
    z-index: 201;

    .right_aside {
        width: 550px;
        height: 100%;
        background: var(--white-color);
        position: absolute;
        right: 0;
        padding: 30px 50px;
        transform: translateX(100%);
        transition: transform 0.5s ease-in-out;
    }

    .close {
        width: 100%;
        display: flex;
        justify-content: end;
        margin-bottom: 10px;
    }

    .close img {
        width: 20px;
        cursor: pointer;
    }

    .profile_area {
        display: flex;
        justify-content: center;
    }

    .profile_area .profile_w {
        text-align: center;
        position: relative;
    }

    .profile_area .profile {
        width: 75px;
        border-radius: 50%;
        display: block;
    }

    .profile_edit {
        position: absolute;
        bottom: 32px;
        right: 0;
        width: 25px;
        border-radius: 50%;
        box-shadow: 0 0 10px #00000042;
        cursor: pointer;
    }

    .profile_area label {
        font-weight: 600;
        font-size: 18px;
    }

    .section_contents_wrap {
        max-height: 700px;
        overflow-x: hidden;
        padding-right: 10px;
    }

    .section_contents_wrap.scroll {
        margin: 0 -10px;
    }

    .section_title {
        color: var(--main-color);
        font-size: 18px;
        font-weight: 500;
    }

    .section img {
        width: 18px;
        cursor: pointer;
    }

    .section hr {
        border: 1px solid var(--secondary-color);
        margin: 10px 0;
    }

    .section dl {
        display: flex;
        font-size: 16px;
    }

    .section dl+dl {
        margin-top: 10px;
    }

    .section dt {
        min-width: 110px;
        font-weight: 300;
        color: var(--deep-grey);
    }

    .section dd {
        color: #000;
    }
<<<<<<< HEAD
=======
    .section dd button{
        padding: 3px 15px;
        font-size: 13px;
        border-radius: 4px;
        background: var(--white-color);
        border: 1px solid var(--main-color);
        color: var(--main-color);
    }
    .section dd button:hover{
        background: var(--main-color);
        color: var(--white-color);
    }
    .section dd span.annual_salary{
        display: none;
    }

>>>>>>> Prod2-Master

    .copy_w {
        height: 10px;
        position: relative;
    }

    .copy_w img {
        width: 13px;
        cursor: pointer;
    }

    .copy_w label {
        display: none;
        position: absolute;
        background: var(--bg-black-op-5);
        color: var(--white-color);
        padding: 3px;
        border-radius: 5px;
        width: 75px;
        text-align: center;
        top: -30px;
        right: -30px;
        font-size: 14px;
        font-weight: 300;
    }

    .copy_w:hover label {
        display: block;
    }

    .close_section {
        transition: transform 0.3s ease;
    }

    .close_section.rotate {
        transform: rotate(180deg);
    }

    .btn_w {
        display: flex;
        justify-content: center;
    }

    .btn_w .btn {
        padding: 6px 20px;
        font-size: 15px;
        border-radius: 4px;
        background: var(--white-color);
    }

    .btn_w .btn.delete,
    .btn_w .cancel {
        border: 1px solid var(--approval-color03);
        color: var(--approval-color03);
    }

    .btn_w .btn.edit,
    .btn_w .ok {
        border: 1px solid var(--main-color);
        color: var(--main-color);
    }

    .btn_w .btn.delete:hover,
    .btn_w .btn.cancel:hover {
        background: var(--approval-color03);
        color: var(--white-color);
    }

    .btn_w .btn.edit:hover,
    .btn_w .btn.ok:hover {
        background: var(--main-color);
        color: var(--white-color);
    }

    .btn_w button+button {
        margin-left: 10px;
    }
}

section.employee_info_edit {
    display: none;

    .profile_w {
        display: flex;
        justify-content: center;
    }

    .profile_edit {
        bottom: 0 !important;
        right: 55px !important;
    }

    .profile_area input,
    .section_contents_wrap input {
        padding: 6px 10px;
        border: 1px solid var(--light-grey);
        border-radius: 4px;
    }

    .profile_area input:hover,
    .section_contents_wrap input:hover,
    .profile_area input:focus,
    .section_contents_wrap input:focus {
        border: 1px solid var(--main-color);
    }

    .section_contents_wrap input {
        width: 100%;
    }

    .section dl {
        align-items: center;
    }

    .btn.address {
        padding: 6px 16px;
        font-size: 15px;
        border-radius: 4px;
        background: var(--main-color);
        color: var(--white-color);
        word-break: keep-all;
        min-width: 90px;
        font-size: 14px;
    }

    .filter_area {
        margin-top: 0;
        align-items: center;
    }

    .dropdown>.main_sel {
        padding: 6px 16px;
        min-width: 100px;
    }

    .dropdown>.sel {
        top: 29px;
    }

    label {
        word-break: keep-all;
    }

    .main_sel.short {
        min-width: 80px;
    }

    .w_40 {
        width: 40% !important;
    }

    input[type="checkbox"] {
        width: 30px;
    }

    .resign_date {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.5s ease;
    }

    #mCheck:checked~.resign_date {
        visibility: visible;
        opacity: 1;
    }
}

.working_hours_detail {
    .edit_working_hours {
        position: absolute;
        background: var(--white-color);
        width: 95%;
        padding: 10px;
        z-index: 203;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.421);
        border: 0;
        border-radius: 10px;
    }

    label {
        color: var(--main-color);
        font-weight: 600;
    }

    input {
        border: 1px solid var(--light-grey);
        padding: 3px;
        border-radius: 5px;
        font-size: 14px;
    }

    input:focus {
        border: 1px solid var(--main-color);
    }

    input[type="text"] {
        width: 68%;
    }

    input[type="time"] {
        font-size: 14px;
    }

    .edit_con,
    .edit_cancel {
        width: 20px;
    }
    .reason_input{
        min-width: 100px;
    }
    .edit_con, .edit_cancel {
        width: 23px;
        margin-bottom: -4px;
    }
}

.vacaion_detail {
    .summary_box {
        display: block !important;
    }

    .summary_box>div {
        display: flex;
        justify-content: space-between;
    }

    dl {
        display: flex;
    }

    dt {
        margin-bottom: 0 !important;
        min-width: 70px;
        text-align: left;
    }

    dd {
        min-width: 30px;
        text-align: right;
    }
}

.admin_employees_wrap {
    .add_employee {
        background: var(--main-color);
        color: var(--white-color);
        border-radius: 4px;
        font-size: 15px;
        display: flex;
        align-items: center;
        padding: 10px 15px;
    }

    .add_employee:hover::before {
        transform: rotate(180deg);
    }

    .add_employee::before {
        content: "";
        display: block;
        width: 18px;
        height: 18px;
<<<<<<< HEAD
        background-image: url(../../unipware/images/ico_add_w.svg);
=======
        background-image: url(https://s3.unipware.com/unipware/images/ico_add_w.svg);
>>>>>>> Prod2-Master
        margin-right: 5px;
        background-size: cover;
        transition: all 0.5s ease;
    }
}

.employees_card_wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, 330px);
    justify-content: space-between;
    grid-gap: 40px;
    padding: 5px;
    max-height: 500px;
    transition: all 0.3s ease-in-out;

    .employees_card {
        box-shadow: 0px 0px 10px #BBDBEA;
        padding: 20px;
        border-radius: 10px;
        cursor: pointer;
    }

    .employees_card:hover {
        box-shadow: inset 0px 0px 10px #BBDBEA;
    }

    .profile_area {
        display: flex;
        align-items: center;
    }

    .profile_area .profile {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 15px;
    }

    .profile_area dt {
        font-size: 13px;
        color: var(--light-grey);
    }

    .employees_card dd {
        font-weight: 600;
        font-size: clamp(14px, 3vw, 18px);
    }

    .profile_contents dd {
        font-weight: 400;
        font-size: clamp(13px, 3vw, 15px);

    }

    hr {
        border: 1px solid var(--secondary-color);
        margin: 15px 0;
    }

    .profile_contents img {
        width: 15px;
    }

    .profile_contents dl {
        display: flex;
    }

    .copy_w {
        height: 10px;
        position: relative;
    }

    .copy_w label {
        display: none;
        position: absolute;
        background: var(--bg-black-op-5);
        color: var(--white-color);
        padding: 3px;
        border-radius: 5px;
        width: 75px;
        text-align: center;
        top: -30px;
        left: -20px;
        font-size: 14px;
        font-weight: 300;
    }

    .copy_w:hover label {
        display: block;
    }

    .profile_contents .copy_mail {
        width: 13px;
        cursor: pointer;
    }

    .profile_contents dl+dl {
        margin-top: 10px;
    }
}

.my_board_area {
    .my_board_wrap {
        padding: 1vw 4vw;
        transition: all 0.3s ease-in-out;
    }
    .my_board_wrap01,
    .my_board_wrap02 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .board_bg {
        position: absolute;
        z-index: -1;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #ffffff, #F3FBFF);
    }
    label.box_title {
        font-size: clamp(16px, 4vw, 20px);
        color: var(--main-color);
        font-weight: 500;
    }
    .board_event, .board_calender {
        width: 25%;
    }
    .board_attendance, .board_working_hour {
        width: 20%;
    }
    .board_notice, .board_to_do, .board_project {
        width: 30%;
    }
}

.box_wrap {
    flex-direction: column;
    width: 100%;
    border-radius: 10px;
    background-color: var(--white-color);
    box-shadow: 2px 2px 8px #0000002c;
    margin-top: 15px;
    margin-bottom: 30px;
    padding: 5px;

    .icon {
        width: 30px;
<<<<<<< HEAD
        margin-right: 13px;
=======
        margin-right: 0.5vw;
>>>>>>> Prod2-Master
    }
    hr {
        border: 1px solid var(--board-hr-grey);
    }
    li {
        display: flex;
    }
    li.content {
<<<<<<< HEAD
        padding: 10px 20px;
=======
        padding: 10px 0.8vw;
>>>>>>> Prod2-Master
    }
    li.content span.title {
        color: #000;
        font-size: 15px;
        font-weight: 500;
    }
    li span {
        color: var(--deep-grey);
        display: block;
        font-size: 13px;
    }
    .list_title_date{
        display: flex;
        justify-content: space-between;
    }
}
<<<<<<< HEAD

=======
.notice_content{
    width: 89%;
}
>>>>>>> Prod2-Master
.box_wrap.top {
    height: 330px;

    .scroll {
        height: 320px;
    }
}

.box_wrap.bottom {
    height: 260px;

    .scroll {
        height: 250px;
    }
}

.box_wrap.event {
    li {
        cursor: pointer;
    }

    li:hover {
        background: var(--hover-grey);
    }
}

.calender_wrap {
    padding: 10px 20px;
    border-radius: 10px;

    #calendar {
        width: 100%;
    }

    #calendar tbody tr td {
        text-align: center;
        padding: 9px 0;
        font-size: 14px;
    }

    #calendar tbody tr:not(.calendar_top):not(.day_of_the_week) td:hover {
        background: none !important;
    }

    #calendarYM {
        color: #000;
        font-size: 18px;
    }

    .pre_month,
    .next_month {
        width: 15px;
        cursor: pointer;
    }

    .pre_month {
        transform: rotate(90deg);
    }

    .next_month {
        transform: rotate(-90deg);
    }

    #calendar.schedule tr td.board_today {
        color: var(--main-color);
    }

    #calendar.schedule tr td .board_today_line {
        width: 40px;
        height: 40px;
        bottom: 0;
        left: 50%;
        position: absolute;
        border: 2px solid var(--main-color);
        border-radius: 50%;
        transform: translateX(-50%);
    }

    #calendar.schedule tr td .event_schedule {
        width: 40px;
        height: 40px;
        bottom: 0;
        left: 50%;
        position: absolute;
        background-color: #fff7003e;
        border-radius: 50%;
        transform: translateX(-50%);
        cursor: pointer;
    }

    #calendar.schedule tr td .event_hover { 
        position: absolute;
        background: #00000072;
        color: var(--white-color);
        border-radius: 5px;
        padding: 3px 5px;
        white-space: nowrap;
        text-align: left;
        display: none;
        line-height: 1.3;
        left: 30px;
        z-index: 20;
    }

    #calendar.schedule tr td .event_schedule:hover+.event_hover {
        display: block;
    }

    #calendar .day_of_the_week {
        border-bottom: 0px;
    }
}

.box_wrap.attendance {
    .tab_list li {
        width: 100%;
        height: 41px;
        padding: 0;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        background: #f8f8f8;
    }

    .tab_list li a {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tab_list li:not(:last-child) {
        margin-right: 10px;
    }

    .tab_list li.active {
        color: #40C5C5;
        background: #fff;
        border: 2px solid #40C5C5;
    }

    .attendance_list ul {
        height: 260px;
    }

    .attendance_list li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
    }

    .attendance_list li:not(:last-child) {
        border-bottom: 1px solid var(--box-border);
    }

    .attendance_list li.active {
        background: #EBFAFA;
    }

    .attendance_list span {
        padding: 2px;
        width: 70px;
        text-align: center;
        color: #BABABA;
        border: 1px solid #BABABA;
        border-radius: 35px;
    }

    .attendance_list li.active span {
        color: #fff;
        border: 0;
        background: #40C5C5;
    }

    .tab_list {
        padding: 10px;
        color: var(--dark-grey);
    }

    .dropdown {
        position: relative;
    }

    .dropdown.active {
        z-index: 1;
    }

    .dropdown.active .main_sel {
        border-radius: 5px 5px 0 0;
    }

    .dropdown.active .main_sel:before {
        transform: rotate(180deg)
    }

    .dropdown.active .sel {
        display: block;
    }

    .dropdown>.main_sel {
        min-width: 90px;
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        position: relative;
        border: var(--input-border-grey);
        background-color: var(--white-color);
        border-radius: 5px;
        padding: 8px 16px 8px 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .dropdown>.main_sel:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        margin-top: -5px;
        background: url(https://s3.unipware.com/unipware/images/ico_select2.svg) 50% 50% no-repeat;
        width: 10px;
        height: 10px;
    }

    .sel {
        padding: 20px;
        display: none;
        position: absolute;
        top: 33px;
        left: 0;
        background-color: #fff;
        border: var(--input-border-grey);
        border-top: 0;
        border-radius: 0 0 5px 5px;
        padding: 0 3px 3px;
        width: 100%;
        max-height: 153px;
        overflow: hidden;
        overflow-y: auto;
    }

    .sel button {
        text-align: left;
        display: block;
        border-radius: 5px;
        background-color: var(--white-color);
        font-size: 14px;
        font-weight: normal;
        padding: 6px 13px;
        width: 100%;
        transition: all 0.3s 0s;
    }

    .sel button:hover {
        background-color: var(--left-side-bg);
    }

    .all_list,
    .strategy_list,
    .design_list,
    .development_list {
        display: none;
    }

    .all_list.active,
    .strategy_list.active,
    .design_list.active,
    .development_list.active {
        display: block;
    }
}

.box_wrap.working_hour {
    margin-bottom: 10px;
    label{
        word-break: keep-all;
    }
    .today_wrap img {
        width: 70px;
        margin-right: 0;
    }
    .icon {
        margin-bottom: -5px;
    }
    .today_wrap {
        padding: 33px 30px;
        text-align: left;
    }
    .today_wrap.admin {
        padding: 20px 30px;
        text-align: left;
    }
    .btn_work_on {
        cursor: pointer;
        position: relative;
    }
    .today_wrap .time {
        font-size: 35px;
    }
    .today_wrap label {
        display: block;
    }
    .screen_off,
    .screen_on {
        display: none;
    }
    .screen_off.active,
    .screen_on.active {
        display: block;
    }
    .screen_off {
        position: absolute;
        width: 48px;
        height: 35px;
        top: 7px;
        left: 8px;
        border-radius: 3px;
    }
    .screen_off dt {
        background: var(--deep-grey);
        width: 100%;
        height: 100%;
    }
    .screen_off dd {
        position: absolute;
        color: #717171;
        font-size: 17px;
        font-weight: 700;
        top: 7px;
        left: 8px;
    }
    .screen_on {
        position: absolute;
        width: 48px;
        height: 35px;
        top: 7px;
        left: 8px;
        border-radius: 3px;
    }
    .screen_on dt {
        background: var(--white-color);
        width: 100%;
        height: 100%;
    }
    .screen_on dd {
        position: absolute;
        color: var(--main-color);
        font-size: 17px;
        font-weight: 700;
        top: 7px;
        left: 10px;
    }
    li {
        padding: 10px;
    }
    label.today {
        font-weight: 600;
    }
    label.time {
        font-size: 25px;
        font-weight: 500;
    }
    label.time.remaining {
        color: var(--main-color);
    }
    label.time.duty {
        color: #40C5C5;
    }
    label.time.vacation {
        color: #80A054;
    }
}

.box_wrap.notice {
    li {
        cursor: pointer;
    }

    li:hover {
        background: var(--hover-grey);
    }

    span.title {
        max-width: 260px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    span {
        max-width: 360px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.box_wrap.to_do {
    .to_do_txt {
        color: #000;
        font-size: 14px;
        font-weight: 400;
    }

    .delete {
        width: 10px;
        cursor: pointer;
    }

    li {
        justify-content: space-between;
        align-items: center;
        padding: 4px 5px;
    }

    .scroll {
        height: 200px;
        margin-bottom: 10px;
    }

    .to_do_input input {
        width: 100%;
        height: 35px;
        padding-left: 3.292%;
        margin-right: 4px;
        border-radius: 10px;
        border: 1px solid var(--box-border);
    }

    .to_do_input button {
        width: 35px;
        background-color: var(--white-color);
        border: 1px solid var(--box-border);
        border-radius: 10px;
    }

    .to_do_input button img {
        width: 12px;
        height: 12px;
    }
}

.box_wrap.project {
    label {
        padding: 3px 5px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 4px;
    }

    label.on {
        background: #ECFBEC;
        color: #41CE3E;
    }

    label.before {
        background: #FFE8E8;
        color: #FF1818;
    }

    label.done {
        background: #E9F2FF;
        color: #4371E9;
    }

    li {
        cursor: pointer;
    }

    li:hover {
        background: var(--hover-grey);
    }
}
.box_wrap.approval{
    height: 150px;
    position: relative;
    padding: 0;
    .approval_item_wrap{
        height: 50%;
    }
    label{
        font-weight: 600;
        font-size: 14px;
    }
    label.all{
        color: var(--approval-color01);
    }
    label.wait{
        color: var(--approval-color02);
    }
    label.resignation{
        color: var(--approval-color03);
    }
    label.approval{
        color: var(--approval-color04);
    }
    span{
        font-size: 18px;
        font-weight: 600;
    }
    img{
        width: 18px;
        margin-right: 5px;
    }
    .approval_box{
        width: 50%;
        text-align: center;
        cursor: pointer;
        width: 100%;
        padding: 12px 0;
    }
    .approval_box:hover{
        background: var(--hover-grey);
    }
}
.box_wrap.approval::before, 
.box_wrap.approval::after {
    content: '';
    position: absolute;
    background-color: var(--board-hr-grey);
}

.box_wrap.approval::before {
    width: 100%;
    height: 1px; 
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.box_wrap.approval::after {
    height: 100%; 
    width: 1px; 
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.empty_wrap{
    display: flex;
    align-items: center;
    justify-content: center;
    div{
        text-align: center;
    }
    height: 100%;
    img{
        width: 65px;
        margin-bottom: 10px;
    }
    span{
        display: block;
        color: var(--light-grey);
    }
}
.empty_wrap.todo{
    height: 85%;
}


.table_em01,
.table_em02 {
    max-height: 100px !important;
    overflow-y: auto;
}

.table_em01 thead th {
    background: #fff;
    border-bottom: 0px;
    color: var(--main-color);
}

.table_em01 td,
.table_em02 td {
    cursor: pointer;
}

.table_em01 td {
    border-top: 0px;
    text-align: center;
}

.table_em01 tbody>tr>td:first-child {
    font-weight: 700;
}

.table_em02 thead th {
    background: #fff;
    border-bottom: 0px;
    color: #2AB4BD;
}

.table_em02 td {
    border-top: 0px;
    text-align: center;
}

.table_em02 tbody>tr>td:first-child {
    font-weight: 700;
}

.table_em02_bg {
    background: #EAF8F9;
}

.icon_arrow {
    position: relative;
}

.icon_arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -20px;
    margin-top: -5px;
    background: url(https://s3.unipware.com/unipware/images/icon_select.svg) 50% 50% no-repeat;
    width: 13px;
    height: 10px;
    transition: all 0.4s 0s;
    cursor: pointer;
}

/* select */
.icon_arrow {
    position: relative;
}

.icon_arrow.active {
    z-index: 1;
}

.icon_arrow.active:after {
    transform: rotate(180deg)
}

.icon_arrow.active .management_vaca_w {
    display: block;
}

.icon_arrow>.management_vaca_w {
    position: absolute;
    min-width: 120px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    border: var(--input-border-grey);
    background-color: var(--white-color);
    border-radius: 5px;
    vertical-align: top;
    padding: 7px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    display: none;
}

.management_vaca_w::-webkit-scrollbar {
    width: 5px;
    height: 2px;
}

.management_vaca_w::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 3px;
}

.management_vaca_w::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 2px;
    height: 10%;
}

.management_vaca_w::-webkit-scrollbar-thumb:hover {
    background: #d2d2d2;
}

.management_vaca_w button {
    text-align: left;
    display: block;
    border-radius: 5px;
    background-color: var(--white-color);
    font-size: 15px;
    font-weight: normal;
    padding: 5px 8px;
    /* width:100%; */
    transition: all 0.4s 0s;
}

.management_vaca_w button+button {
    margin-top: 3px;
}

.management_vaca_w button.active {
    background-color: #2AB4BD;
    color: #fff;
}

.management_vaca_w button:hover {
    background-color: #E1EFF0;
}

.period_chart {
    max-width: 900px;
    width: 100%;
    max-height: 260px;
    min-height: 260px;
}

.period_chart>canvas {
    max-width: 900px !important;
    width: 100% !important;
    max-height: 260px !important;
    min-height: 260px !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}

input[type="time"]::-webkit-inner-spin-button {
    display: none;
}

input[type="time"] {
    appearance: textfield;
    font-size: 15px;
    font-weight: 400;
}

/* 연차 상세 팝업 */
.modal_title_name02 {
    display: flex;
    align-items: center;
    background: #2AB4BD;
    color: #fff;
    padding: 0px 8px;
    border-radius: 8px;
    margin-left: 10px;
    margin-top: 2px;
    font-weight: 200;
}

.table_working_detail02 thead th {
    background: #fff;
    border-bottom: 0px;
    color: #2AB4BD;
}

.table_working_detail02 td {
    border-top: 0px;
}

.select_employees {
    position: relative;
    background: var(--main-color);
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
}

.pointer {
    cursor: pointer;
}

.all_check {
    font-weight: 700;
    color: var(--main-color);
}

.name_area_01.active .checks input[type="checkbox"]+label:before,
.name_area_02.active .checks input[type="checkbox"]+label:before,
.name_area_03.active .checks input[type="checkbox"]+label:before,
.name_area_04.active .checks input[type="checkbox"]+label:before {
    /* 체크박스를 체크했을때 */
    content: '\2714';
    /* 체크표시 유니코드 사용 */
    color: var(--white-color);
    background-color: var(--main-color);
    border-color: var(--main-color) !important;
    transition: all 0.3s;
}

.modal_list_ok {
    background: var(--main-color);
    color: var(--white-color);
}

.long_modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 290px;
    background: var(--white-color);
    z-index: 101;
}

.personal_vacation_wrap>div {
    display: flex;
    width: 100%;
    align-items: center;
}

.personal_vacation_wrap>div>div:first-child {
    width: 35%;
    font-size: 17px;
    font-weight: 600;
}

/* 관리자 > 공지사항 */
.wh_div_admin {
    width: 30%;
    margin-top: 60px;
}

.wh_div_admin .title_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.wh_div_admin .title_area>div:first-of-type {
    font-size: 20px;
    font-weight: 600;
}

.modal_top_title_w {
    display: flex;
    align-items: center;
}

.top_fixed {
    padding: 10px 0px 25px 45px;
}

.top_fixed::before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 19px;
    border: 1.5px solid #c3c3c3;
    border-radius: 5px;
    margin-right: 5px;
}

.top_fixed.active::before {
    content: "✓";
    border: 1.5px solid var(--main-color);
    color: #fff;
    background-color: var(--main-color);
}

#modalNotice .modal_wrap_md {
    max-width: 400px;
}

#modalNotice .modal_scroll {
    max-height: 400px !important;
}

/* 공유 팝업 */
.modal_wrap_md.share {
    max-width: 450px;

    .scroll {
        margin: 0;
    }

    .rotate {
        transform: rotate(90deg);
        transition: transform ease 0.4s;
        width: 12px;
    }

    .rotate.active {
        transform: rotate(-90deg);
        transition: transform ease 0.4s;
    }

    .options {
        padding: 16px 20px;
        background: #f8f8f8;
        border-radius: 4px;
    }

    
    hr {
        margin: 24px 0;
        border-top: 1px solid #d9d9d9;
    }
    
    .error {
        .options.active {
            padding: 16px 20px 36px;
        }
    }
}

.share_input_wrap {
    input {
        padding: 6px 13px;
    }

    .btn {
        width: 100px;
        border: 1px solid var(--main-color);
        border-radius: 4px;
        color: var(--main-color);
        background: var(--white-color);
    }

    .btn:hover {
        background: #EBF6FB;
    }
}

.share_period {
    position: relative;

    .period_txt {
        font-size: 14px;
        cursor: pointer;

        b {
            color: var(--red-color);
        }
    }

    .dropmenu {
        display: none;
        position: absolute;
        top: 28px;
        right: 0;
        padding: 12px 16px;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        background: var(--white-color);
        z-index: 99;
        text-align: left;

        li {
            cursor: pointer;
        }

        li.active {
            color: var(--main-color);
            font-weight: 500;
        }
    }
}

.share_password_wrap {
    position: relative;
    text-align: left;
    
    .share_password {
        display: none;
        position: absolute;
        top: -6px;
        left: 64px;
        width: 200px;
    }

    .share_password.active {
        display: block;
    }

    .error_message {
        display: none;
    }
}

.share_password.error {    
    .error {
        border-color: var(--red-color);
    }

    .error_message {
        display: block;
        color: var(--red-color);
        font-size: 12px;
        text-align: left;
    }
}


/* 외부 공유 페이지 */
#main_contents.external {
    margin-left: 0;
    width: 100%;
}

.wrap.external {
    margin: 44px auto 0;
    width: 1380px;
}

#header.external {
    border-bottom: 1px solid #ededed;
}

.external_share_wrap {
    margin-bottom: 20px;

    h1 {
        font-size: 24px;
        color: var(--main-color);
        font-weight: 700;
    }
}

.external_share {
    align-items: center;
}

.expire_date {
    dt {
        padding: 2px 8px;
        color: var(--main-color);
        background: var(--left-side-bg);
        border-radius: 14px;
        font-weight: 600;
    }

    dd {
        b {
            color: var(--red-color);
        }
    }
}

.share_owner {
    width: 252px;
    height: fit-content;
    padding: 6px 0;
    text-align: center;
    border: 1px solid var(--box-border);
    border-radius: 4px;

    b {
        color: var(--main-color);
        font-weight: 600;
    }
}

.btn_external_download {
    padding: 8px 0;
    width: 100px;
    font-size: 16px;
    font-weight: 500;
    color: var(--white-color);
    border-radius: 4px;
    background: var(--main-color);
}

.share_table_wrap {
    .table {
        margin: 16px 0 0;
    }

    colgroup {
        col:first-of-type {
            width: 3%;
        }

        col:nth-of-type(2) {
            width: 88%;
        }

        col:nth-of-type(3) {
            width: 9%;
        }
    }

    th:last-of-type {
        padding-right: 24px;
    }

    .head table th {
        font-weight: 600;
        border-top: 1px solid #DCDDE3;
        border-bottom: 1px solid #DCDDE3;
        background: #F0F4F6;
    }

    .table_outline {
        height: 60dvh;
        border-bottom: 1px solid #DCDDE3;

        tr {
            border-bottom: 1px solid #DCDDE3;
        }

        tr:hover {
            background: #f8f9fa;
        }

        td {
            padding: 0.75rem;
        }
        
        p:not(:last-of-type) {
            width: fit-content;
            max-width: 1000px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        p:not(:last-of-type):hover {
            cursor: pointer;
            text-decoration: underline;
        }

        td:last-of-type {
            padding-right: 16px;
        }
    }

    .table_outline::-webkit-scrollbar {
        display: none;
    }

    .capacity {
        color: #8a8a8a;
    }
    
    .mobile_capacity {
        display: none;
        color: #8a8a8a;
    }
}

/* 신규회원 - 휴대폰 번호 인증 */
.phone_auth_wrap {
    width: 100%;

    h1 {
        font-size: 26px;
        font-weight: 600;
        color: var(--main-color);
    }

    p {
        margin-top: 8px;
        font-size: 15px;        
        color: #666;
    } 

    h2 {
        margin-top: 20px;
        font-size: 16px;
        font-weight: 600;
    }

    .input_wrap {
        margin: 16px auto 20px;
        width: 100%;
    }

    input {
        height: 38px;
    }

    input::placeholder {
        font-size: 14px;
        color: #999;
    }

    .error input {
        border-radius: 20px;
    }

    .error span {
        padding-left: 8px;
    }
}

.phone_auth {
    margin-bottom: 8px;

    button {
        width: 96px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--main-color);
        background: var(--white-color);
        color: var(--main-color);
    }
}

.phone_auth.error {
    width: 100%;
}

.phone_auth_entry {
    position: relative;

    .countdown {
        display: none;
        position: absolute;
        top: 8px;
        right: 20px;
        color: red;
    }
}

.login_w.phone_auth_wrap {
    opacity: 1;
    animation: none;
}

.input_wrap.new_pw {
    width: 341px;

    input {
        width: 100%;
    }    
}

.input_wrap.error {
    width: 341px;

    input {
        border: 1px solid var(--red-color);
    }
    
    input::placeholder {
        color: var(--red-color);
    }
}

/*scroll*/
.scroll {
    margin: 0 2px;
    overflow-y: auto;
}

.scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

.scroll::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 5px;
}

.scroll::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 5px;
    height: 10%;
}

.scroll::-webkit-scrollbar-thumb:hover {
    background: #d2d2d2;
}

/* 필수값 */ 
.r_value {
    color: var(--on-design-tag-font-color);
}














































/* 미디어쿼리 */
@media (max-height:770px) {
    .modal_scroll {
        height: 76vh;
    }

    .modal_wrap_md.share .modal_scroll {
        height: inherit;
    }

    .project_info, .project_history, .history_view, .manage_view {
        height: 75dvh;
    }

    .modal_toast {
        top: unset;
        bottom: 316px;
    }
}

@media (max-height:640px) {
    .project_info, .project_history, .history_view {
        height: 71dvh;
    }

    .modal_toast {
        bottom: 264px;
    }
}

@media (max-width:1670px) {
    .working_hour_bg {
        padding: 0 20px;
    }

    .working_hour_bg>div:first-child {
        width: 60%;
        padding: 30px 50px 0px 30px;
    }

    .working_hour_bg>div:nth-child(2) {
        width: 40%;
    }

    .working_hour_bg>div>div>div>div:nth-of-type(2) {
        font-size: 30px;
    }

    .admin_wrap_top {
        display: block;
    }

    .admin_EM_wrap,
    .admin_notice_wrap {
        min-width: 500px;
    }

    .admin_EM_wrap,
    .admin_calendar_w {
        margin-bottom: 40px;
    }

    .admin_wrap_bottom {
        display: block;
    }

    .working_hour_wrap>ul>li:not(:nth-child(1)) span {
        display: none;
    }

    .working_hour_wrap>ul>li ul {
        flex-wrap: wrap;
        margin-bottom: 0 !important;
    }

    .working_hour_wrap>ul>li:nth-child(1) ul li:nth-child(2) {
        line-height: 32px;
        margin-bottom: 12px;
    }

    .approval_wrap .appr_progress li a .status {
        width: 100%;
        margin-left: -5%;
    }

    .approval_wrap .appr_progress li a span:nth-of-type(2) {
        width: 100%;
        margin: 4px 0 0 0;
    }

    .approval_wrap .appr_progress li a>span {
        justify-content: center;
    }

    .project_info {
        width: 30%;
    }

    .project_history {
<<<<<<< HEAD
        width: 30.063%;
    }

    .history_view {
        width: 38%;
=======
        width: 36%;
    }

    #section_history {
        width: 67%;
    }

    .history_view {
        width: 60%;
    }

    .customer_wrap {
        height: fit-content;
        margin-bottom: 30px;
    }

    .notice_top {
        .data_search_area {
            min-width: 57%;
        }

      }  

    #section_manage {
        .my_notice {
            .notice_detail {
                top: 128px;
            }
        }
    }
    
    #section_manage .table_cont .table_wrap {
        overflow-x: auto;
        
    }

    #section_manage .table_cont .table_wrap table {
        width: 1440px; /* 고정된 너비 설정 */
        table-layout: fixed; /* 열 너비 고정 */
    }

    #section_manage .table_cont .table_wrap .head {
        overflow-x: auto;
    }

    #section_manage .table_cont .table_wrap .head::-webkit-scrollbar {
        display: none;
    }

    #section_manage .table_cont .table_wrap .head .table {
        width: 1440px; /* .table_outline과 동일한 너비 설정 */
        table-layout: fixed; /* 열 너비 고정 */
    }

    #section_manage .table_cont .table_wrap .table_outline {
        overflow-x: auto;
        cursor: grab;
    }

    #section_manage .table_cont .table_wrap .table_outline.active {
        cursor: grabbing;
    }

    #section_manage .table_cont .table_wrap .table_outline .table {
        width: 1440px; /* .head와 동일한 너비 설정 */
        table-layout: fixed; /* 열 너비 고정 */
    }

    .profile_input_wrap {
        section.input_cont {
            padding: 40px;
        }
    }

    .wrap.external {
        width: 100%;
>>>>>>> Prod2-Master
    }
}

@media (max-width:1600px) {
        .database_wrap.add.query_add {
            height: 60vh;
            padding: 10px 1.9354% 30px;
            margin-bottom: 30px;
            height: fit-content;
        }
        .database_wrap.add.query_add>.q_txtarea_wrap>div {
            flex-wrap: wrap;
            transition: 0.3s ease-in-out;
        }
        .database_wrap.add.query_add.query_wrapp {
            padding: 3.888% 10.256%;
        }
        .query_wrap .query_inputs_container.q_txtarea_wrap .title {
            margin-bottom: 16px;
        }

        .customer_wrap {
            padding: 3.888% 10.256%;
        }

        .customer_input_wrap {
            ul.file_uploader_container li {
                grid-template-columns: none;
                grid-template-rows: 1fr 1fr;
            }
        }

        .project_info.customer_info_wrap .section_cont .manager_list {
            max-height: 664.5px;

            li {
                position: relative;
                grid-template-columns: 2fr 1fr 0.1fr; 
                grid-template-rows: auto; 
                gap: 10px;
        
                .name {
                    grid-column: 1 / -1
                }
        
                .info {
                    grid-column: 1;
                }
        
                .business_card {
                    grid-column: 2;
                }
        
                .more_wrap {
                    position: absolute;
                    top: 20px;
                    right: 12px;
                }
        
            }
        } 

           
        .my_notice {
            .title {
                .tit_btn_wrap {
                    .h3_wrap {
                        width: 90%;
                        flex-wrap: wrap;
                    }

                    .btns {
                        
                    }
                }

                .dates {
                    padding-left: 0;
    
                }
            }
        }
}
    

@media (max-width:1580px) {
    .my_notice {
        .title {
            .tit_btn_wrap {
                .btns {
                    margin-top: 28px !important;
                }
            }
        }
    }
<<<<<<< HEAD
    .database_wrap.add.query_add>.q_txtarea_wrap>div {
        flex-wrap: wrap;
        transition: 0.3s ease-in-out;
    }
    .database_wrap.add.query_add.query_wrapp {
        padding: 3.888% 10.256%;
    }
    .query_wrap .query_inputs_container.q_txtarea_wrap .title {
        margin-bottom: 16px;
    }
=======

    .project_info.customer_info_wrap {
        .section_cont {
            .customer_tit {
                h3 {
                    max-width: 48%;
                    overflow: initial;
                    text-overflow: initial;
                    white-space: wrap;
                    -webkit-line-clamp: none;
                }

                p {
                    margin-left: 8px;
                }
            }
        }
    }
    
    
    .profile_input_wrap {
        position: relative;

        .input_wrap {
            flex-direction: column;
            
            > div {
                width: 100%;
            }
    
            .job {
                margin-top: 56px;
            }

            .edu {
                margin: 56px 0;
            }
        }
    }

    .info_side {
        position: sticky;
        top: 0;
        right: 0;
    }

    .profile_form {
        padding: 0 32px 0 16px;
    }
}


@media (max-width:1480px) {
    .project_info .dev-project-tags {
        max-height: 86px;
        margin-bottom: 28px;
    }
    
    .project_info .info_txt ul li .type {
        padding: 2px 6px;
    }

    .project_info .info_txt ul {
        margin: 12px 0 12px 0;
    }

    .project_history .history_contents ul li p {
        margin: 6px 0;
    }

    .project_history .history_contents ul li .comment {
        font-size: 14px;
    }

    .history_view .comment_container {
        height: 200px;
    }

    #historyView .comment_container {
        height: 216px;
    }

    .customer_input_wrap .contents.query_add .title {
        min-width: 40%;
    }

    .project_info .tabs {
        position: initial;
        margin: 12px 0 16px;

        li {
            width: 48%;
            text-align: center;
        }
    }

    .notice_add {
        height: 76vh;

        .contents {
            min-width: 80%;

            .input_div  {
                justify-content: start !important;
    
                .title {
                    width: 20%;
                }

                .top_fixed_cont {
                    width: 80%;
                }

                .editor_wrap {
                    max-width: 80%;
    
                    #noticeEditor {
                        max-width: 100%
                    }
                }
            }
        }
    }                
>>>>>>> Prod2-Master
}

@media (max-width:1480px) {
    .project_info .dev-project-tags {
        height: 86px;
        margin-bottom: 28px;
    }

    .project_info .info_txt ul {
        height: 108px;
    }
    
    .project_info .info_txt ul li .type {
        padding: 2px 6px;
    }

    .project_info .info_txt ul {
        margin: 12px 0 12px 0;
    }

    .project_history .history_contents ul li p {
        margin: 6px 0;
    }

    .project_history .history_contents ul li .comment {
        font-size: 14px;
    }

    .history_view .comment_container {
        height: 200px;
    }
}


@media (max-width:1440px) {
    main#main_contents {
        max-width: 1440px;
    }
    .database_wrap.detail .contents:first-child {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        transition: 0.3s ease-in-out;
    }
    .my_wrap {
        flex-direction: column;
        padding: 20px 30px 30px;
        transition: 0.3s ease-in-out;
    }
    .my_wrap {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 2.150%;
    }
    .calendar_wrap,
    .to_do_wrap {
        height: unset;
        padding: 2.809%;
        margin-top: 0 !important;
    }
    .calendar_wrap {
        min-width: 38.88%;
        margin-right: 2.809%;
    }
    .bg_schedule_detail_wrap {
        width: 50%;
        transition: 0.3s ease-in-out;
    }
    .current_date {
        padding: 35px 0px 35px 35px;
        font-size: 20px;
        transition: 0.3s ease-in-out;
    }
    .my_wrap.schedule {
        flex-direction: inherit;
    }

    .my_board_area {
        .board_event, .board_calender, .board_attendance, .board_working_hour, .board_notice, .board_to_do, .board_project{
            width: 45%;
        }
    }

<<<<<<< HEAD

=======
>>>>>>> Prod2-Master
    .schedule_detail_wrap {
        max-width: 15vw;
    }
    .schedule_list_w {
        position: absolute;
        right: -200px;
        min-width: 350px;
    }
    .schedule_list_w:hover {
        right: -0px;
        transition: 0.3s ease-in-out;
    }
    .schedule_list_w {
        animation: bounce_right 2s ease-in-out;
    }
    @keyframes bounce_right {
        25% {
            transform: translateX(0);
        }
        50% {
            transform: translateX(0px);
        }
        60% {
            transform: translateX(-20px);
        }
        70% {
            transform: translateX(0px);
        }
        80% {
            transform: translateX(-20px);
        }
        100% {
            transform: translateX(0px);
        }
    }

    .appr_progress li a {
        flex-direction: column;
    }

    .appr_progress li a>span {
        justify-content: center;
    }

    .appr_progress li a .status {
        width: 100%;
        margin-left: -5%;
    }

    .appr_progress li a .status span {
        margin-right: 5.139%;
    }

    .appr_progress li a span:nth-of-type(2) {
        width: 100%;
        margin: 6px 0 0 0;
    }

    .database_wrap.add.query_add.query_wrap {
        padding: 6.365% 7.276%;
    }

    .query_wrap .query_inputs_wrap .q_column li {
        margin-bottom: 12px;
    }

    .approval_wrap .appr_progress li a {
        padding: 7.931%;
    }

    .employees_card_wrap {
        grid-template-columns: repeat(auto-fill, 450px);
    }
    
    .history_view.write {
        padding-right: 28px;
    }

<<<<<<< HEAD
}



=======
    .customer_wrap {
        padding: 6.365% 7.276%;
    }

   .my_notice {
    .title { 

                .tit_btn_wrap {
                    width: 100%;
                    margin-bottom: 4px;
                    
                .btns {
                    margin-top: 28px !important;
                }
            }
        }
    }
    
    .api_mapping {
        flex-direction: column;

        .api_wrap {
            width: 100%;
            padding-bottom: 32px;
            overflow-x: scroll;

            .head,
            .ul_outline {
                width: 1064px;
            }
        }

        .s_description {
            padding: 0;
            width: 100%;
            border: none;
        }

        .s_resource {
            width: 100%;
            padding: 40px 0 0;
        }
    }

    #section_manage {
        width: 72%;

        .data_search_area {
            min-width: initial;
            width: 200px;
        }
    }

    .project_list {
        width: 25%;  
    }

    .task_manager {
        display: none;
    }

    .share_table_wrap .table_outline {
        p:not(:last-of-type) {
            max-width: 70dvw;
        }
    }
}

>>>>>>> Prod2-Master
@media (max-width:1280px) {
    .appr_admin_board .appr_post_wrap {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .wrap.project_detail_wrap {
        padding-bottom: 32px;
    }

    .project_detail_wrap > .d-flex {
        flex-wrap: wrap;
    }

<<<<<<< HEAD
=======
    .project_detail_wrap > .d-flex.customer_info_wrap {
        flex-wrap: nowrap;
    }

    #section_history {
        width: 100%;
    }

>>>>>>> Prod2-Master
    .project_info {
        margin-bottom: 20px;
        width: 100%;
    }

    .project_history {
        width: 39.130%;
    }

    .project_history .history_contents ul li .type {
        margin-right: 8px;
    }

    .project_history .history_contents ul li .date {
        margin-left: inherit;
    }

    .history_view {
        width: 58.695%;
    }

    .project_info .dev-project-tags {
        height: auto;
    }

<<<<<<< HEAD
    .history_view .comment_container {
        height: 260px;
        margin-bottom: 32px;
    }

=======
    #historyView .comment_container {
        height: 180px;
        margin-bottom: 32px;
   }

   .customer_wrap {
        .customer_input_wrap {
            flex-direction: column;

            .input_section {
                width: 100%;
            }

            .contents.query_add .title {
                min-width: 30%;
            }

            .query_inputs_container.c_column {
                width: 100%;
            }

            .input_div .form_control {
                max-width: 100%;
            }

            ul.file_uploader_container li {
                grid-template-columns: 1fr 3fr;
                grid-template-rows: none;
            }

            .input_div .title span.word-break {
                display: block;
                padding-left: 18px;
            }
            
        }

        .query_inputs_wrap .query_inputs_container.query_inputs_container.q_column.c_column {
            width: 100%;

            li {
                width: 100%;
            }
        }
    }

    .project_info .tabs {
        position: absolute;
        margin: 0;
    }

    .customer_input_wrap {
        .q_column.c_column li.input_div:last-of-type {
            margin-bottom: 24px;
        }
    }

    #section_manage {
        .top_button.close,
        .top_button.open {
            margin-right: 10px;
        }

        .data_form_control {
            padding: 6px 16px 6px 36px;
        }

        .data_search_area {
            width: 148px;
        }

        .filter_area {
            .main_sel {
                width: 100px;
            }
        }

        .division {
            li {
                width: 52px;
            }
        }
    }

    #section_manage {
        .table_cont {
            .table_wrap {
                table {
                    td.empty_wrap {
                        padding-right: 844px;
                    }
                }
            }
        }
    }
>>>>>>> Prod2-Master
}

@media (max-width:1240px) {
    .appr_progress li a {
        padding: 28px 8.639%;
    }

    .appr_slide .slick-slide {

        padding: 1.132%;
    }

    .appr_slide dl dt {
        margin-bottom: 1.398%;
        font-size: 18px;
    }

    .appr_slide dl dd:nth-of-type(1) {
        flex-direction: column;
        margin-bottom: 3.721%;
        font-size: 16px;
        text-align: left;
    }

    .appr_slide dl dd:nth-of-type(1) span {
        margin: 8px 0 !important;
    }

    .appr_progressBar_cont {
        margin-top: 3.404%;
    }

    .query_wrap .query_inputs_wrap .query_inputs_container.q_column {
        width: 46%;
    }

    .query_wrap .query_inputs_wrap .query_inputs_container.q_column li {
        justify-content: space-between !important;
    }

    .appr_admin_board .appr_post:nth-child(2n+0) {
        margin-right: 0;
    }

    .appr_slide.appr_admin_board dl.appr_post dd:nth-of-type(1) {
        flex-direction: row;
    }

    .appr_slide dl dd:nth-of-type(1) span {
        margin: 0 2.677% !important;
    }

    .appr_admin_board dl.appr_post dd:nth-of-type(1) .appr_post_date {
        flex-grow: 1;
    }
}

@media (max-width:1200px) {
    .calendar_wrap>table tr:nth-child(2) td {
        padding: 0 1.468%;
    }

    .to_do_wrap ul {
        height: 200px;
    }

    .database_wrap.detail {
        display: block !important;
        height: 100%;
        margin-bottom: 40px;
        transition: 0.3s ease-in-out;
    }

    .database_wrap .contents {
        max-width: 100% !important;
    }

    .database_wrap.detail .content {
        max-width: none;
    }

    .database_wrap.detail .contents:first-child {
        margin-bottom: 70px;
    }

    .database_wrap.detail .btn_back {
        position: inherit;
        margin-top: 30px;
    }

    .main_contents_top {
        justify-content: left;
        display: block;
    }

    .main_contents_top>div:not(.main_contents_top .btn_share_down) {
        margin-bottom: 10px;
    }

    .btn_select.doc {
        min-width: 400px;
    }

    .query_contents_area {
        display: block !important;
    }

    .database_wrap.detail.query .contents {
        min-width: auto;
    }

    .database_wrap.api_add {
        display: block !important;
        min-height: 1200px;
        margin-bottom: 30px;
    }

    .database_wrap.api_add .btn_w {
        margin-bottom: 30px;
    }

    .pagination.add_api {
        justify-content: center !important;
    }

    .data_search_area.add_api {
        position: inherit;
    }

    .appr_admin_board dl.appr_post .appr_detail_preview {
        display: block;
        text-overflow: unset;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
    }

    .appr_admin_board dl.appr_post .appr_detail_preview span {
        display: inline-block;
        padding: 2px 10px;
        margin: 0 2px 4px 0;
    }

    .goto_wrap .goto_work ul li br {
        display: block;
    }

    .customer_info_wrap .info_wrap {
        flex-direction: column;
        height: fit-content;

        .section_cont {
            width: 100%;

            .manager_list {
                max-height: none;

                .info dl {
                    grid-template-columns: 0.15fr 1fr;
                }

                .business_card .img_cont {
                    height: auto;
                }
            } 

            .btn_add {
                margin-bottom: 16px;
            }
            
        }

        .section_cont:first-of-type {
            margin-bottom: 32px;
        }
    }

    .project_info.customer_info_wrap {
        & .section_cont {
            & .customer_tit {
                flex-wrap: wrap;
                position: relative;

                h3 {
                    max-width: 90%;
                    overflow: auto;
                    max-width: initial;
                    text-overflow: initial;
                    white-space: wrap;
                }

                p {
                    margin: 8px 0 0 0;
                    width: 100%;
                }

                .btns {
                    position: absolute;
                    top: -12px;
                    right: 0;
                }
            }
        }
    }
    
    .main_contents_top_wrap {
        .main_contents_top {
            display: flex;
            
            .btn_select.doc {
                min-width: 152px
            }

            .search_area {
                max-width: initial;
                flex-grow: 1;
                width: auto;
            }

            .btn_share_down {
                width: fit-content;
            }
        }   
    }
}

@media (max-width:1100px) {
    .working_hour_wrap>ul>li:not(:nth-child(1)) ul {
        padding: 0;
        border: none;
    }

    .img_index {
        opacity: 0;
        transition: 0.5s ease-in-out;
    }

    .img_m_index {
        opacity: 1;
        transition: 0.5s ease-in-out;
    }

    .login {
        display: none;
    }

    .m_login {
        opacity: 1;
    }

    .my_schedule_wrap {
        display: block;
        transition: 0.4s ease-in-out;
    }

    .schedule_wrap {
        margin-right: 0;
    }

    .appr_progress li a {
        padding: 11% 0;
    }

    .appr_progress li a .status span {
        width: 28px;
        height: 28px;
    }

    .appr_progress li a .status span img {
        width: 18px;
    }

    .appr_progress li a span:nth-of-type(2) b {
        font-size: 20px;
    }

    .appr_slide_top .dropdown button {
        padding: 12px 44px;
    }

    .appr_slide_top .dropdown .dropdown_menu a {
        padding: 8px 13.045%;
    }

    .appr_slide .slick-slide {
        height: auto;
    }

    .appr_progressBar_cont {
        margin-top: 5%;
    }

    .filter_area {
        justify-content: end;
    }

    .filter_area>div {
        width: 100%;
        margin-bottom: 10px;
    }

    .filter_area .search_area {
        max-width: none;
    }

    .filter_area .search_area input {
        min-width: auto;
    }

    .filter_area .dropdown,
    .filter_area .main_sel {
        width: 100%;
    }

    .table_header {
        margin-top: 1rem !important;
        min-width: 750px;
    }

    .table_body {
        min-width: 750px;
    }

    .admin_working_hour_wrap .table_body {
        max-height: 430px;
    }

    .table_header_body {
        white-space: nowrap;
        min-width: 750px;
    }

    .employees_card_wrap {
        margin-top: 1rem !important;
    }

    .employees_card_wrap {
        grid-template-columns: repeat(auto-fill, 95%);
    }

<<<<<<< HEAD
    .project_history .history_contents ul li .date {
        margin-left: auto;
    }
=======
    #section_history {
        flex-wrap: wrap;
    }

    .project_history {
        width: 100%;
        margin-bottom: 20px;
    }

    .history_view {
        width: 100%;
    }

    .project_history .history_contents ul li .date {
        margin-left: auto;
    }

    .my_wrap.my_notice {
        flex-wrap: wrap;
    }

    .my_notice {
            .notice_detail {
                order: 1;
                opacity: 1 !important;
                height: fit-content !important;
                margin: 0 !important;
                margin-left: 0 !important;
                width: 100% !important;
            }

            .comment_container {
                height: 240px;
            }

            .comment_wrap {
                .comment_array {
                    .contents {
                        width: 100%;

                        pre.comment_contents {
                            width: 90%;

                            textarea {
                                margin: 0 4px;
                                width: 100%;
                            }
                        }
                    }
                }
        }

        .table_notice_w {
            order: 2;
            width: 100% !important;
            margin-right: 0 !important;
        }

        .goto_bottom_wrap {
            display: block;
            
        }

        .title {
            .tit_btn_wrap {
                width: 90%;
                margin-bottom: 4px;

        }

    }

    #left_aside.notice_aside {
        height: 88%;
    }

    .project_info,
    .project_history,
    .manage_view {
        height: fit-content;
    }
    
    }

    .my_notice {
        .title {
            .tit_btn_wrap {
                width: 100%;
                margin-bottom: 4px;
            }
        }
    }

    .top_button {
        button {
            display: none;
        }

        .tooltip {
            display: none;
        }
    }

    .top_button.search {
        button {
            display: block;
        }
    }

    .my_wrap.task {
        flex-wrap: wrap;

        #section_manage {
            width: 100% !important;

            .top_button.toggle {
                display: none;
            }
        }

        .project_list {
            margin-bottom: 68px;

            ul.list {
                height: fit-content;
                max-height: 292px;

                li.empty_wrap {
                    padding: 60px 0;
                }
            }

            .data_search_area.task {
                width: calc(100% - 84px);
            }
        }

        .project_list,
        .project_list h3 {
            width: 100% !important;
            height: fit-content !important;
            opacity: 1 !important;
        }

        .project_list h3 {
            font-size: 20px !important;
        }
    }

    #section_manage {
        .filter_area {
            .dropdown {
                margin: 0 8px 0 0;
                margin-bottom: 0;
            }
        }

        .division {
            li {
                width: 56px;
            }
        }

        .table_cont .table_wrap .table_outline {
            height: fit-content;

            td.empty_wrap {
                padding-right: 0;
                padding-right: 100vw;
            }
        }
    }
    
    .input_profile {
        .filter_area {
            .dropdown {
                margin-bottom: 0;
            }
        }
    }

    .share_owner {
        width: 280px;
    }
>>>>>>> Prod2-Master
}

@media (max-width:1024px) {
    .logo {
        display: none !important;
    }

    .m_logo {
        display: block;
    }

    .my_project_bg>div {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .my_pro_card {
        width: 48%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .my_pro_card:last-of-type {
        margin-bottom: 0;
    }

    .my_wrap {
        margin: 0 0 4.293% 0
    }

    .calendar_wrap {
        width: 100%;
    }

    .calendar_wrap,
    .to_do_wrap,
    .working_hour_wrap,
    .attendance_wrap,
    .my_project_wrap {
        padding: 2.762%;
    }

    .my_wrap.schedule {
        flex-direction: column;
    }

    .schedule_detail_wrap {
        max-width: 100%;
    }

    .bg_schedule_detail_wrap {
        display: none;
    }

    .schedule_list_w {
        max-height: none;
        position: initial;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .schedule_w {
        margin: 10px;
    }

    .current_date {
        padding: 35px 10px;
    }

    .schedule_list_w {
        animation: none;
    }

    .query_wrap .query_inputs_wrap {
        flex-direction: column;
    }

    .query_wrap .query_inputs_wrap .input_div .form_control {
        max-width: unset;
    }

    .query_wrap .query_inputs_wrap .query_inputs_container.q_column {
        width: 100%;
    }

    .query_wrap .query_inputs_wrap .query_inputs_container.q_column li {
        justify-content: start !important;
        width: 100%;
    }

    .my_wrap_02_1 {
        flex-wrap: wrap;
    }

    .goto_wrap {
        width: 100%;
        margin: 0 0 24px 0 !important;
    }

    .goto_wrap .goto_work {
        padding: 3.522% 3.521%;
    }

    .goto_wrap .goto_work ul li br {
        display: none;
    }

    .goto_wrap .goto_work ul li:nth-of-type(1) {
        text-align: right;
        padding-right: 16px;
        font-size: 18px;
    }

<<<<<<< HEAD
    .project_history {
        width: 100%;
        margin-bottom: 20px;
    }

    .history_view {
        width: 100%;
=======
    .table_wrap.customer_list {
        overflow-x: scroll;
        max-width: 600px;
    }

    .history_view {
        height: auto;
>>>>>>> Prod2-Master
    }
}

@media (max-width:991px) {
    .database_wrap.detail {
        background: none;
        box-shadow: none;
        padding: 0px;
    }

    #calendar tr:first-child td>div {
        margin-bottom: 10px
    }

    .working_hour_bg {
        display: block;
    }

    .working_hour_bg>div:first-child {
        margin-bottom: 20px;
        width: 100%;
    }

    .working_hour_bg>div:nth-child(2) {
        width: 50%;
    }

    .working_hour_wrap>ul {
        flex-wrap: wrap;
    }

    .working_hour_wrap>ul>li {
        width: 48.56%;
        padding: 3.473%;
    }

    .working_hour_wrap>ul>li:nth-child(n+1):nth-child(-n+2) {
        margin: 0 0 2.869% 0;
    }

    .database_wrap.detail.query .btn_back {
        bottom: 0;
    }

    .appr_admin_board .appr_post_wrap {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .appr_admin_board dl.appr_post dd:nth-of-type(1) .appr_post_date {
        width: 100%;
    }

    .appr_admin_board dl.appr_post dd:nth-of-type(1) .appr_post_date span:first-of-type {
        margin: 0 !important;
    }

    .customer_wrap {
        .customer_input_wrap {
            ul.file_uploader_container li {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr 1fr;
            }
        }
    }

    .customer_info_wrap .info_wrap {
        .section_cont .manager_list {
            .business_card  {
                padding: 0 2px;
            }

            li {
                grid-template-columns: 1.5fr 1.5fr 0.1fr;
            }
        }
        
    }

    #modalCustomerImgSlide {
            .customer_img_slide {
                max-width: 90%;

            .swiper {
                .swiper-wrapper {

                    .swiper-slide {
                        img {
                            max-width: 90%;
                        }
                    }
                }
            }
        }
    }

    #modalCustomerImgView .customer_img_slide {
        width: 80%;
    }

    .project_info.customer_info_wrap {
        & .section_cont {
            & .customer_tit {
                margin-top: 36px;

                h3 {    
                    overflow: auto;
                    max-width: initial;
                    text-overflow: initial;
                    white-space: wrap;
                }

                .btns {
                    top: -40px;
                }
            }
        }
    }

    .home_wrap {
        position: absolute;
        top: -40px;
    }

    .card_wrap {
        padding-bottom: 40px;
    }

    .profile_input_wrap {
        flex-direction: column;

        section.input_cont {
            order: 2;
            padding: 28px;

            h3 {
                display: none;
            }

            .mobile_button {
                display: block;
            }
        }
    }

    .info_side {
        order: 1;
        position: initial;
        padding: 32px 28px 0;
        width: 100%;
        background: var(--white-color);

        .mobile_tit {
            display: block;
            margin-bottom: 8px;
            width: 100%;
            text-align: left;
        }
        
        button {
            position: absolute;
            display: none;
        }
    }

    
    .name_modify {
        .input_wrap {
            input {
                background: var(--white-color);
            }
        }
    }

    .input_profile {
        flex-direction: column;
        text-align: left;

        .title {
            width: 100%;
            margin-bottom: 8px;
            font-size: 16px;
            font-weight: 500;
        }
    }

    .share_table_wrap .table_outline {
        p:not(:last-of-type) {
            max-width: 60dvw;
        }
    }    
}

@media (max-width:859px) {
    nav.pc_nav>ul>li>a {
        padding: 0px 16px;
    }

    .database_detail_wrap>.input_div>textarea {
        min-width: 100%;
    }

    .my_wrap {
        display: block;
    }

    .calendar_wrap,
    .to_do_wrap {
        min-width: 100%;
    }

    .calendar_wrap,
    .to_do_wrap,
    .working_hour_wrap,
    .attendance_wrap,
    .my_project_wrap,
    .approval_wrap,
    .goto_wrap {
        padding: 4.293%;
    }

    .calendar_wrap,
    .attendance_wrap {
        margin-bottom: 4.293%;
    }

    .attendance_wrap,
    .my_project_wrap {
        max-width: 100%;
    }

    .schedule_w {
        width: 100%;
        max-width: 100%;
    }

    .database_wrap.add.query_add.query_wrap {
        padding: 8.820%;
    }

    .appr_admin_board,
    .appr_slide_top,
    .appr_admin_top {
        margin-top: 32px;
    }

    .appr_admin_board .appr_post {
        width: 100%;
        margin-right: 0;
    }

    .appr_admin_board .appr_post:nth-child(3n+0),
    .appr_admin_board .appr_post:nth-child(6n+0) {
        margin-right: 0;
    }

    .appr_admin_board dl.appr_post dd:nth-of-type(1) .appr_post_date {
        width: auto;
    }

    .approval_wrap .appr_progress {
        flex-wrap: wrap;
    }

    .approval_wrap .appr_progress li {
        width: 48.898%;
    }

    .approval_wrap .appr_progress li:nth-child(-n+2) {
        margin-bottom: 2.203%;
    }

    .approval_wrap .appr_progress li a {
        padding: 9.417%;
    }

    main#login_wrap {
        section {
            padding: 30px 30px 30px 30px;
            min-width: 310px;
            justify-content: center;
        }

        .login_img_w {
            display: none;
        }
    }
<<<<<<< HEAD
=======

    .customer_wrap {
        padding: 8.820%;
    }

    .api_mapping {
        .s_resource{
            padding: 40px 0 48px;

            .data_search_area {
                width: 50%;
                min-width: initial;
            }   
        }

        .s_description {
            padding-top: 12px;
        }
        
    }
    
    .table_wrap.customer_list {
        .btn_console {
            margin-top: 12px;
        }
    }

    .main_contents_top_wrap {
        .main_contents_top {
            flex-wrap: wrap;

            .select_add_tag {
                min-width: initial;
                width: 100%;
                

                .btn_select.doc {
                    min-width: initial;
                    width: 100%;
                }
            }
        }
    }

    #section_manage {
        .buttons_wrap {
            margin-top: 12px;
            justify-content: start !important;
            width: 100%;
        }

        .data_search_area {
            flex-grow: 1;
        }
    }

    .share_table_wrap {
        colgroup {
            col:first-of-type {
                width: 3%;
            }

            col:nth-of-type(2) {
                width: 50%;
            }

            col:nth-of-type(3) {
                width: 42%;
            }
        }
    }
>>>>>>> Prod2-Master
}

@media (max-width:767px) {
    #header {
        height: 65px;
        transition: 0.5s ease-in-out;
    }

    .login {
        margin-top: 15px;
        width: 80px;
    }

    .header_wrap {
        height: 65px;
        margin: 0 16px;
        transition: 0.5s ease-in-out;
    }

    .main_copy .thin {
        margin-bottom: -10px !important;
        transition: all 0.3s;
    }

    #left_aside,
    #messenger_left_aside {
        display: none;
        transition: 0.5s ease-in-out;
    }

    main#main_contents,
    main#messenger_main_contents {
        width: 100%;
        margin-left: 0;
        height: calc(100vh - 113px);
    }

    .wrap {
        margin-top: 16px;
        padding: 0 16px;
    }

    .database_wrap {
        box-shadow: none;
        width: 100%;
        transition: 0.5s ease-in-out;
    }

    .database_wrap.add .contents {
        min-width: 280px;
    }

    .database_wrap.add .contents.database_add {
        margin-top: 50px;
    }

    .input_div .title {
        margin-bottom: 20px;
    }

    .database_wrap.add .contents div {
        display: block !important;
    }

    .database_wrap.add .contents.query_add {
        margin-right: 0;
        width: 100%;
    }

    .database_wrap.add.query_add>.query_add {
        padding-bottom: 50px;
        margin-top: 0 !important;
    }

    .main_contents_top {
        max-width: 767px !important;
        justify-content: center;
    }

    .search_area {
        margin-right: 0 !important;
    }

    .modal_wrap {
        width: 95%;
        overflow-x: hidden;
    }

    .modal_wrap_md {
        width: 95%;
        padding: 5px 5px;
        overflow-x: hidden;
    }

    .messenger_search_w {
        width: 94%;
    }

    .chating_area_no {
        height: calc(100vh - 173px);
    }

    .modal_scroll {
        padding: 5px 20px 10px 20px;
    }

    .upload_tag_area {
        display: block;
        text-align: start;
    }

    .upload_tag_area button {
        margin-bottom: 10px;
    }

    .detail_tag_area button {
        margin-bottom: 10px;
    }

    .pc_breadcrumb {
        display: none;
    }

    #modalHistoryUpload .modal_scroll {
        height: 45vh;
    }

    .calendar_wrap,
    .to_do_wrap {
        flex-direction: column;
        width: 100%;
        height: 100%;
        margin-right: 24px;
        border: 1px solid var(--box-border);
        border-radius: 20px;
    }

    .working_hour_bg>div {
        padding: 20px;
    }

    .work_btn_area>button {
        padding: 7px 15px;
    }

    .my_wrap {
        margin-top: 4.293%;
    }

    .schedule_wrap {
        margin-bottom: 50px;
    }

    .schedule_detail_wrap {
        padding: 0;
        width: 100%;
    }

    .select_search_w {
        display: block;
    }

    .select_w,
    .data_search_area.wide {
        margin-bottom: 10px;
    }

    .btn_add_table,
    .btn_add_column {
        top: -30px;
    }

    .label_today {
        display: none;
    }

    .database_wrap.api_add {
        padding: 10px;
    }

    .database_wrap.api_add .data_search_area {
        margin-bottom: 30px;
    }

    .database_wrap.api_add .btn_w button {
        padding: 5px 20px;
    }

    /* 쿼리 등록 */
    .database_wrap.add.query_add>.query_add.query_inputs_wrap {
        padding-bottom: 0;
    }

    .database_wrap.add.query_add>.query_add.q_txtarea_wrap {
        min-width: unset;
        padding-bottom: 0;
    }

    .database_wrap.add .contents.query_inputs_container>div {
        display: flex !important;
    }

    .serch_pagination_w {
        display: block !important;
    }

    .serch_pagination_w .data_search_area {
        margin-right: 0 !important;
    }

    .admin_wrap {
        padding: 20px;
        overflow: hidden;
    }

    .filter_area {
        margin-top: 0px;
    }

    .tap_area_wrap {
        margin-top: 30px;
        height: 650px;
    }

    main#main_contents,
    main#messenger_main_contents {
        height: calc(100vh - 90px);
    }

    .admin_working_hour_wrap .table_body {
        max-height: 360px;
    }
    .filter_area .search_area input:focus {
        border: 1px solid var(--main-color);
        box-shadow: none;
        margin: 0;
    }
    .my_board_wrap{
        .board_event, .board_calender{
            margin-top: 20px;
        }
    }
    .box_wrap {
        .list_title_date {
            display: block;
        }
    }
<<<<<<< HEAD
=======

>>>>>>> Prod2-Master
    .box_wrap.notice {
        span {
            max-width: 200px;
        }
    }

    .project_history {
        margin-bottom: 0;
        width: 45.170%;
    }

    .history_view {
        width: 52.087%;
    }

    .wrap.project_detail_wrap {
        padding:16px 16px 44px 16px;
    }

    .project_history .history_contents ul li .type {
        padding: 0 5px;
        font-size: 12px;
    }

    .history_view.write .contents {
        flex-wrap: wrap;
        margin-bottom: 12px;
    }    

    .history_view.write .contents .title {
        margin-bottom: 8px;
    }

    .history_view.write .contents .btn_meeting_add {
        padding: 12px 0;   
    }
<<<<<<< HEAD
=======

    .customer_wrap .customer_input_wrap .contents.query_add .title {
        margin-bottom: 0;
    }

    .project_info.customer_info_wrap {
        margin-bottom: 0;
        height: auto;
    }

    .customer.pagination {
        margin-bottom: 20px;
    }

    .goto_bottom {
        left: 50%;
    }

    .notice_add {
        align-items: start !important;
        margin-top: 52px;
        padding: 0 30px;
    }

    .table_wrap.customer_list {
        .btn_console {
            margin-top: 0;
        }
    }

    .main_contents_top_wrap {
        .main_contents_top {
            .select_add_tag {
                .select_w {
                    margin-bottom: 0;
                }
            }

            .search_area {
                margin-right: 8px !important;
            }
        }
    }

    .project_detail_wrap > .d-flex.customer_info_wrap {
        box-shadow: none;
    }

    #section_manage {
        .table_cont .table_wrap .table_outline {

            td.empty_wrap {
                transform: translateX(0vw);
        }
    }
    }

    .profile_input_wrap {
        box-shadow: none; 

        section.input_cont {
            padding: 10px;
        }
    }

    .info_side {
        .id_wrap {
            margin-bottom: 20px;
        }
    }

    .api_mapping {
        .api_wrap {
            p.query_alert {
                right: 40%;
            }
        }
    }

    .wrap.external {
        width: 94%;
    }

    .share_owner {
        width: 320px;
    }
>>>>>>> Prod2-Master
}

@media (max-width:680px) {
    .project_history {
        margin-bottom: 20px;
        width: 100%;
    }

    .history_view {
        width: 100%;
    }
}


@media (max-width:620px) {
    .wh_div .chart_area {
        display: block;
    }

    .wh_div .chart_area>div {
        margin: 0 auto;
    }

    .wh_div .chart_area>div:nth-of-type(2) {
        margin-top: 20px;
    }

    .chart_area .text_area {
        max-width: 300px;
        width: 100%;
    }

    .working_hour_bg>div:first-child {
        width: 100%;
        padding: 10px;
    }

    .working_hour_bg>div:nth-child(2) {
        width: 100%;
    }

    .admin_EM_wrap,
    .admin_notice_wrap {
        min-width: 350px;
    }

    .admin_board.bg01 {
        padding: 20px;
    }

    .admin_notice_board.bg02 {
        padding: 20px;
    }

    .admin_board>div>div:first-child {
        font-size: 17px;
    }

    .admin_board>div>div:nth-child(2) {
        font-size: 20px;
    }

    .list_vacation>div:first-child {
        font-size: 14px;
    }

    .list_vacation>div:nth-child(2) {
        font-size: 12px;
    }

    .notice_table_num {
        display: block !important;
    }

    .appr_progress {
        flex-wrap: wrap;
        margin-top: 10px !important;
    }

    .appr_progress li {
        width: 48.928%;
    }

    .appr_progress li:not(:nth-child(3)):not(:nth-child(4)) {
        margin-bottom: 12px;
    }

    .appr_progress li a {
        padding: 7.2% 0;
    }

    .appr_progress li a span:nth-of-type(2) {
        margin-top: 4px;
    }

    .appr_progress li a .status span {
        margin-right: 2.919%;
    }

    .appr_slide .status_date_wrap {
        align-items: center;
    }

    .appr_slide_top {
        position: sticky;
        top: -1px;
        padding: 4px 0;
        background: var(--white-color);
        z-index: 99;
    }

    .appr_slide_top .controller button.prev_arrow,
    .appr_slide_top .controller button.next_arrow {
        transform: rotate(90deg);
    }

    .appr_slide .slick-slide {
        padding: 6.438%;
        margin-right: 0;
        margin-bottom: 20px;
        min-height: 275px;
    }
    .my_board_area {
        .board_event, .board_calender, .board_attendance, .board_working_hour, .board_notice, .board_to_do, .board_project {
            width: 100%;
        }
    }
    .box_wrap.notice {
        span {
            max-width: 180px;
        }
    }
<<<<<<< HEAD
=======

    #section_manage {
        .table_cont .table_wrap .table_outline {
            td.empty_wrap {
                transform: translateX(-12%);
            }
        }
    }

    .external_share {
        align-items: baseline;
        flex-direction: column;

        dl {
            margin-top: 4px;
        }
    }

    .share_owner {
        width: 380px;
    }
>>>>>>> Prod2-Master
}

@media (max-width:540px) {
    .database_wrap.detail .contents:first-child {
        min-width: auto;
    }

    .select_progess {
        width: 100%;
        margin-right: 0 !important;
    }

    .search_area,
    .search_area>input {
        width: 100% !important;
    }

    .my_wrap {
        padding: 0px 20px 30px;
    }

    .working_hour_bg>div>div>div>div:nth-of-type(1) {
        font-size: 16px;
    }

    .working_hour_bg>div>div>div>div:nth-of-type(2) {
        font-size: 40px;
    }

    .working_hour .title_area {
        flex-wrap: wrap;
    }

    .working_hour .calendar_area {
        width: 100%;
        margin: 20px 0 16px;
    }

    .working_hour .calendar_area input {
        width: calc((100% - 63px) / 2)
    }

    .data_form_control {
        margin-bottom: 10px;
    }

    .table_wrap.customer_list {
        .data_form_control {
            margin-bottom: 0;
        }

        .btn_console {
            margin-top: 12px;
        }
    }

    .calendar_wrap,
    .to_do_wrap,
    .working_hour_wrap,
    .attendance_wrap,
    .my_project_wrap {
        padding: 4.8%;
    }

    .my_wrap {
        padding: 20px 20px 30px;
    }

    .serch_notice {
        max-width: 100%;
    }

    .data_search_area.notice {
        min-width: auto;
    }

    .search_icon {
        top: 50%;
    }

    .btn_select.doc,
    .search_area>input {
        min-width: 280px;
    }

    .filter_area>div {
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .filter_area .dropdown {
        margin-right: 0 !important;
        margin-bottom: 10px;
    }

    .filter_area .search_area input {
        width: 100%;
    }

    .filter_area .search_area .search_icon {
        top: 40%;
    }

    .add_employee {
        justify-content: center;
        width: 100%;
    }

    .admin_employees_wrap {
        overflow-y: hidden !important;
    }

    .filter_area .search_area input:focus {
        margin-bottom: 10px;
    }

    .modal_popup .meeting_add .divide_wrap{
        flex-wrap: wrap;
    }

    .modal_popup .meeting_add .divide:first-of-type,
    .modal_popup .meeting_add .divide:last-of-type {
        width: 100%;
        margin: 0;
    }

    .modal_popup .meeting_add .divide:last-of-type {
        margin-top: 16px;
    }
<<<<<<< HEAD
=======

    .notice_add {
        .buttons {
            margin-top: 24px !important;
        }
    }
        
    .s_resource .data_form_control {
        margin-bottom: 0;
    }

    .main_contents_top_wrap {
        .main_contents_top {
            .search_area {
                width: 80% !important;
            
                input {
                    min-width: initial;
                }

                .data_form_control {
                    margin-bottom: 0;
                }
            }
        }
    }

    .project_list {
        .data_search_area.task {
            .data_form_control {
                margin-bottom: 0;
            }
        }
    }

    #section_manage {
        .data_form_control {
            margin-bottom: 0;
        }

        .filter_area {
            .dropdown {
                margin-right: 6px !important;
            }
        }
    }

    .profile_form {
        .filter_area .dropdown {
            margin-right: 8px !important;
        }
    }
>>>>>>> Prod2-Master
}

@media (max-width:500px) {
    .working_hour_bg {
        padding: 30px 16px;
    }

    .working_hour_bg>div>div>div>div:nth-of-type(1) {
        font-size: 15px;
    }

    .my_pro_card {
        width: 100%;
    }

    .f_login_w {
        padding: 150px 0 0 0;
    }

    .add_schedule_wrap input.w_fit,
    .input_calendar {
        width: 100%;
    }

    .modal_wrap_md.schedule {
        display: none;
    }

    .modal_wrap_md.schedule.mini {
        display: block;
    }

    .api_add .title {
        min-width: 100px;
    }

    .query_wrap .query_inputs_wrap .query_inputs_container.q_column li {
        flex-direction: column;
        margin-bottom: 24px;
    }

    .contents.query_add .title {
        width: 100%;
        min-width: unset;
        margin-bottom: 12px;
    }

    .project_add_w>div>div,
    .project_add_w .content {
        display: block !important;
        text-align: left;
    }

    .project_add_w hr {
        display: none;
    }

    .project_add_w .modal_contents_title {
        width: 100%;
    }

    .charge_w_inner {
        display: block;
    }

    .appr_admin_board .appr_post {
        padding: 4.166%;
    }

    .goto_wrap .goto_work {
        padding: 5.564%;
    }

    .customer_wrap .customer_input_wrap .input_div .title span.word-break {
        display: initial;
        padding-left: 0;

        br {
            display: none;
        }
    }
    
    .customer_wrap .customer_input_wrap .contents.query_add .title {
        margin-bottom: 12px;
    }

    .customer_wrap .customer_input_wrap .contents.query_add .file_uploader_container .title {
        margin-bottom: 0;
    }

    .project_info.customer_info_wrap .section_cont {
        .manager_list li {            
            grid-template-rows: 0.5fr 1fr 0.1fr;
            grid-template-columns: 1fr;

            .name {
                margin-bottom: 12px;
            }

            .info {
                dl {
                    grid-template-columns: 1fr;
                    grid-template-rows: 1fr 1fr;
                    margin-bottom: 16px;
                }
    
                dl.note {
                    grid-template-rows: 0.6fr 1fr;
                }
            }

            .business_card {
                grid-column: 1;
            }

        }
    
            .customer_info .m_info {
                display: block !important;
        
                dl {
                    width: 100%;
                }
        
                dl:first-of-type {
                    margin-bottom: 20px;
                }
            }
    }

    .notice_add {
        height: 728px;

        .contents {
            .input_div {
                flex-direction: column;
                justify-content: start;

                .title {
                    width: 100%;
                }

                .top_fixed_cont {
                    width: 100%;
                }

                .form_control {
                    max-width: 100%;
                }

                .editor_wrap {
                    max-width: 100%;
                }

                .editor_wrap {
                    #noticeEditor {
                        height: 360px;
                    }
                }
            }

        }
    }
        
    #section_manage {
        .buttons_wrap {
            flex-wrap: wrap;
            justify-content: end !important;
        }

        .data_search_area {
            flex-grow: initial;
            margin-bottom: 8px;
            width: 100%;
        }

        .filter_area {
            margin: 0 0 0 10px;

            .dropdown {
                margin-right: 16px !important;
            }
        }
    }

    .task_manager {
        display: block;
    }

    .wrap.external {
        margin: 36px auto 0;
    }

    .external_share_wrap {
        flex-direction: column;
    }

    .share_owner {
        padding: 6px 16px;
        margin-top: 12px;
        width: fit-content;
        text-align: left;
    }

    .external_share_wrap {
        position: relative;
    } 

    .external_share {
        margin-bottom: 52px;
    }

    .share_owner {
        position: absolute;
        bottom: 0px;
    }

    .share_table_wrap {
        th {
            color: transparent;
        }

        td {
            width: 100%;
        }

        .capacity {
            display: none;
        }

        .mobile_capacity {
            display: block;
        }

        .table_outline {
            p:not(:last-of-type) {
                max-width: 65dvw;
            }
        }
    }

    .phone_auth {
        flex-wrap: wrap;

        input {
            width: 100%;
        }

        button {
            margin: 4px 0 0;
            width: 100%;
        }
    }

    .input_wrap.new_pw,
    .input_wrap.error {
        width: 250px;
    }
}

@media (max-width:425px) {
    .modal_wrap_smd {
        width: 95%;
    }

    .pro_detail_history_area {
        font-size: 13px;
        width: 100%;
    }

    .charge_selectbox_w {
        display: block !important;
        text-align: start;
    }

    .charge_selectbox.on+.charge_list {
        min-width: 100px;
    }

    .charge_name_w {
        margin-left: 0;
    }

    .selected_charge_w {
        width: 50%;
    }

    .img_plus {
        top: 75px;
    }

    .calendar_w hr {
        display: none;
    }

    .calendar_s {
        width: 100%;

        margin-bottom: 10px;
    }

    .calendar_e {
        width: 100%;
    }

    .address_wrap {
        display: block;
    }

    .address_wrap>button {
        margin-top: 13px;
    }

    .working_hour_bg>div>div>div>div:nth-of-type(2) {
        font-size: 30px;
    }

    .working_hour_wrap>ul {
        flex-direction: column;
    }

    .working_hour_wrap>ul>li {
        width: 100%;
        padding: 5.970%
    }

    .working_hour_wrap>ul>li:not(:last-child) {
        margin-bottom: 3.582%;
    }

    .data_search_area.wide {
        min-width: 250px;
    }

    .calendar_wrap,
    .to_do_wrap,
    .working_hour_wrap,
    .attendance_wrap,
    .my_project_wrap,
    .approval_wrap,
    .goto_wrap {
        padding: 6.233%;
    }

    .modal_wrap.table_add {
        max-width: 280px;
    }

    .appr_progress li {
        width: 100%;
        box-shadow: 0 0px 16px 2px rgb(163 182 190 / 18%);
    }

    .appr_progress li:nth-child(n+1):nth-child(-n+3) {
        margin-bottom: 1.578%;
    }

    .appr_progress li a {
        flex-direction: row;
        padding: 2.105% 4.210%;
    }

    .appr_progress li a .status,
    .approval_wrap .appr_progress li a>span,
    .my_wrap_02_1 .approval_wrap .appr_progress li a>span {
        margin: 0;
        justify-content: start;
        font-size: 16px;
    }

    .appr_progress li a span:nth-of-type(2),
    .my_wrap_02_1 .approval_wrap .appr_progress li a>span:nth-of-type(2) {
        justify-content: end;
    }

    .appr_progress li a span:nth-of-type(2) b {
        font-size: 16px;
    }

    .modal_popup .appr_board_view .period {
        flex-wrap: wrap;
    }

    .approval_wrap .appr_progress li {
        width: 100%;
    }

    .approval_wrap .appr_progress li a {
        flex-direction: row;
        padding: 2.903% 3.484%;
    }

    .approval_wrap .appr_progress li a .status {
        margin: 0;
    }

    .project_info.customer_info_wrap .section_cont {
        ul.images_wrap {
            flex-direction: column;
            margin-top: 24px;
    
            li {
                width: 100%;
                margin-top: 16px;
            }
        }

        .customer_tit {
            position: relative;
            flex-direction: column;
            align-items: start !important;

            p {
                margin: 12px 0 0 0 !important;
            }

            .btns {
                position: absolute;
                right: 0;
            }
        }
    }
    
    .api_mapping .s_resource {
        .data_search_area {
            width: 100%;
            margin-bottom: 16px;
        }

        > div {
            flex-direction: column;
        }

        div:nth-of-type(2) {
            justify-content: end;
        }
    }

    .share_password_wrap {        
        .share_password {
            width: 100%;
            top: 32px;
            left: 0;
        }
    }

   .modal_wrap_md.share {
        .options.active {
            padding: 16px 20px 60px;
        }

        .error {
            .options.active {
                padding: 16px 20px 76px;
            }
        }
   }
}

@media (max-width:375px) {
    .calendar_comment_view {
        width: 250px;
    }

    .working_hour_bg>div>div {
        flex-wrap: wrap;
    }

    .working_hour_bg>div>div>div {
        width: 100%;
        margin-bottom: 10px;
    }

    .working_hour_bg>div>div>div>div:nth-of-type(1) {
        font-size: 16px;
    }

    .work_btn_area>button:nth-of-type(1) {
        margin-right: 20px;
    }

    .working_hour .calendar_area input {
        padding: 5px 1.240%;
    }

    .calendar_date {
        width: 290px;
        left: -16px;
    }

    .to_do_edit>input {
        max-width: 150px;
    }

    .appr_admin_board .appr_post {
        padding: 7.164%;
        margin-bottom: 4.776%;
    }

    .appr_admin_board dl.appr_post dd:nth-of-type(1) .appr_post_date {
        width: 100%;
        margin-top: 8px;
    }

    .goto_wrap .goto_work {
        padding: 7.191%;
    }

    .goto_wrap .goto_work ul li:nth-of-type(1) {
        font-size: 16px;
    }

    .profile_area .profile {
        width: 30px !important;
        height: 30px !important;
    }

    .employees_card {
        padding: 10px;
    }

    .employees_card_wrap {
        padding-bottom: 30px;

        hr {
            margin: 8px 0;
        }

        .profile_contents dd {
            word-break: break-all;
        }

        .profile_contents img {
            width: 12px;
        }

        .profile_contents .copy_mail {
            width: 10px;
        }
    }

    .admin_wrap.working_hour {
        .underline {
            top: 28px;
        }
    }

    .project_info,
    .history_view {
        padding: 16px;
    }
<<<<<<< HEAD
=======

    .project_info.customer_info_wrap .section_cont {
        .manager_list li {            
            grid-template-rows: 0.5fr 1fr 0.7fr;
        }
    }

    .my_notice {
        .title {
            ul {
                margin-top: 10px;
            }
        }
    }

    .notice_add {
        .buttons {
            .btn_cancle+button {
                margin-left: 16px;
            }
        }
    }

    .project_info .tabs {
        position: initial;
        display: block;
        margin: 12px 0 16px;;
    }

    #section_manage {
        .table_cont .table_wrap .table_outline {
            td.empty_wrap {
                transform: translateX(-25%);
            }
        }
    }

    .project_info.profile_input_wrap {
        padding: 0;

        section.input_cont {
            padding: 0;
        }

        .profile_form {
            .filter_area.career {
                input[type='number'] {
                    width: 72px;
                }
            }
        }
    } 

    .info_side {
        padding: 20px 20px 16px;

        .mobile_tit {
            margin-bottom: 16px;
        }

        .id_wrap {
            margin-bottom: 16px;
        }

    }

    .api_mapping {
        .api_wrap {
            p.query_alert {
                right: 25%;
            }
        }
    }

    .wrap.external {
        width: 96%;
    }
>>>>>>> Prod2-Master
}

@media (max-width:320px) {
    .working_hour .calendar_area input {
        width: calc((100% - 53px) / 2);
    }

    .working_hour .calendar_area hr {
        width: 6px;
        margin: 0 4px;
    }

    .project_info .info_txt ul li p {
        max-width: 50%;
    }
}