@font-face {
    font-family : 'Noto Sans KR';
    font-weight: 300;
    src : url(../font/NotoSansKR-Regular.otf) format("opentype");
}
@font-face {
    font-family : 'Noto Sans KR';
    font-weight: 400;
    src : url(../font/NotoSansKR-Medium.otf) format("opentype");
}

* {padding: 0; margin: 0; box-sizing: border-box;}
:after, :before {box-sizing: border-box; flex-shrink: 0;}
:root {-webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: break-word; word-break: break-word; tab-size: 4;}
ul, ol, li, dl {list-style: none;}
a, a:link, a:visited {color: inherit; text-decoration: none; cursor: pointer;}
input, select, button, textarea {outline: 0; border: 0; vertical-align: middle;}
img, picture, video, canvas, svg {display: block; max-width: 100%;}
table {border-collapse: collapse; border-spacing: 0;}
html, body {height: 100%;}
/* body {font-size: 15px; font-weight: 300; color: #212121; line-height: 1.5; font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.4px; background-color: #F6F5F8;} */
body {font-size: 14px; font-weight: 500; line-height: 1.5; font-family:'naR', '맑은 고딕','Malgun Gothic','돋움',Dotum,sans-serif; letter-spacing: 0px; background-color: #F6F5F8;}

textarea {font-weight: 300; color: #313131; font-size: 15px;}
i {padding-bottom: 2px;}
section {width: 100%; min-width: 1200px; height: 100vh;}
.header {z-index: 99; position: fixed; width: 100%; min-width: 1200px; top: 0; left: 0; background-color: #fff;}
.container {height: auto; min-height: 905px; padding-top: 56px; background-color: #F6F5F8;}
.container_r {position: relative; min-height: calc(100vh - 56px); /* padding-bottom: 56px; */ margin-left: 230px;}

/*header_top_bar*/
.top_bar {width: 100%; height: 56px;}
.logo {width: 230px; height: 100%; float: left; background-color: rgb(255, 255, 255);/* background-color: #37414B; */}
.logo img {width: 190px; margin: 0 auto; margin-top: 16px;}
.top_nav {display: flex; height: 100%; line-height: 60px; /* color: #767383; */ border-bottom: 1px solid #ededed;}
.toggle_btn {cursor: pointer; padding: 4px; margin-left: 16px; color: #37414B;}
.toggle_btn.active {background-color: #37414C; color: #fff; border-radius: 4px;}
.top_nav ul, .top_nav ul li {display: flex; align-items: center;}
.top_project_title {font-size: 18px; font-weight: 400; color: #37414B; margin-left: 16px;}
.top_nav ul li a {padding: 0px 20px;}
.top_nav .info {margin-left: auto;}
.top_nav .info li {padding: 0 8px;}
.top_nav .info li:first-child {padding-left: 28px;}
.top_nav .info li:last-child {padding-right: 0;}
.top_nav .info a {padding: 0 20px 0 0;}

/*side_nav*/
.side_nav {z-index: 99; position: fixed; width: 230px; height: 100%; background-color: #37414B;}
.menu_title {cursor: pointer;}
.menu_title:hover {background-color: #2e373f;}
.menu_title:hover > p {color: #fff!important;}
.menu_title a, .menu_title p {display: block; font-weight: bold; padding: 16px 20px; color: #6e7b87; border-bottom: 1px solid #2e373f;}
.menu_title > a:hover, .menu_title.active > a, .menu_title.active > p {color: #fff; background-color: #2e373f;}
/* .menu_title a.active, .menu_title p.active {color: #fff;} */
.menu_title a i, .menu_title p i {vertical-align: middle; margin-right: 5px; padding-bottom: 3px; font-size: 16px;}

.menu_title ul {display: none;}
.menu_title.open ul {display: block;}

.menu_sub {background-color: #262e3d;}
.menu_sub_title > a {padding-left: 40px;}
.menu_sub_title > a:hover, .menu_sub_title > a.active {color: #fff;}

/*search_bar*/
.search_bar {width: 100%; background-color: #fff; padding: 20px; border-bottom: 1px solid #ededed; box-shadow: 0 0 10px 0 rgb(41 48 66 / 10%);}
.page_title_wrap {display: flex; align-items: center; margin-bottom: 12px;}
.page_title_wrap span {font-size: 20px; font-weight: bold; /* color: #37414B; */ margin-right: auto;}
.page_title_wrap span.title i {padding: 0 4px 6px 0;}
.page_title_wrap div span {font-size: 14px; font-weight: 400; /* color: #515151; */}
.page_title_wrap div i {font-size: 16px; /* color: #515151; */}

/*content*/
.row {display: flex; flex-direction: row;}
.col {flex-direction: column;}
.content {display: flex; padding: 10px; /* min-height: 733px; */}
.content.col {min-height: 775px;}
.project_content {height: initial; min-height: 849px; padding-top: 68px;}
.item_wrap {display: flex; padding-bottom: 20px;}
.item_wrap:last-child {padding-bottom: 0;}
.item {width: 100%; height: 100%; padding: 16px; border-radius: 4px; box-shadow: 0 0 10px 0 rgb(41 48 66 / 10%); margin-right: 20px; background-color: #fff;}

.item_w20 {width: 20%; padding: 10px;}
.item_w30 {width: 30%; padding: 10px;}
.item_w50 {width: 50%; padding: 10px;}
.item_w70 {width: 70%; padding: 10px;}
.item_w80 {width: 80%; padding: 10px;}
.item_w100 {width: 100%; padding: 10px;}
.p_0 {padding: 0;}
.txt_center {text-align: center;}

.project_search {z-index: 98; position: fixed; width: calc(100% - 230px); padding: 12px 20px; background-color: #fff; text-align: right; box-shadow: 0 0 10px 0 rgb(41 48 66 / 10%);}
.project_search input {width: 300px;}
.project_item {position: relative; display: inline-flex; flex-direction: column; width: 254px; height: 256px; max-height: 256px; padding: 50px 30px 25px 30px; margin: 10px; border-radius: 30px; text-align: center; cursor: pointer}
.project_item:nth-child(6n) {margin-right: 0;}
.project_item.project_item_new {cursor: default;}
.project_item .project_btn {position: absolute; top: 20px; right: 20px; border-radius: 100px; font-size: 30px; color: #37414B; cursor: pointer; font-size: 20px;}
.project_title {width: 100%; height: 60px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 20px; font-weight: 400;}
.project_item div {margin-top: auto; text-align: left;}
.project_item div i {font-size: 70px; color: #70af9f;}
.project_item_new div {text-align: center;}
.labeling_file:nth-child(4) {width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.upload_file .number, .labeling_file .number {color: #70af9f; font-weight: 400;}

.container_r.active .project_item {width: 247px;}
.container_r.active .project_item:nth-child(6n) {margin-right: 10px;}
.container_r.active .project_item:nth-child(7n) {margin-right: 0;}

/*image_text_labeling*/
.image_top, .text_top {margin-bottom: 16px;}
.text_top {font-size: 17px; font-weight: 400; color: #37414B;}
.text_top label {line-height: 2.2; margin-right: 4px;}
.text_top label input {margin-left: 4px;}

.float_r {float: right;}
.image_top .btn {padding: 4px 6px 6px 6px; background-color: #37414B; color: #fff; margin-left: 4px;}
.image_box {width: 100%; height: 616px; border-radius: 4px; background-color: #e0e4e8;}
.image_box .container {padding-top: 0 !important; min-height: 0 !important;}

.labeling_wrap {overflow-y: scroll; height: 654px; padding-top: 8px;}
.labeling_group {margin-bottom: 16px;}
.labeling_group:last-child {margin-bottom: 0;}
.group_title {font-weight: 400; margin-bottom: 8px;}
.labeling_btn_wrap {line-height: 46px; margin-bottom: 10px;}
.labeling_btn_wrap:last-child {margin-bottom: 0;}
.labeling_btn_wrap .btn {display: inline-block; min-width: 104px; height: 46px; background-color: #e0eae9; color: #515151; margin: 0 8px 10px 0; padding: 0 16px; font-size: 16px;}
.labeling_btn_wrap .btn:hover, .labeling_btn_wrap .btn.active {background-color: #70af9f; color: #fff;}

.labeling_bottom {border-top: 1px solid #e0e4e8; padding: 20px 20px 10px 20px; margin-top: 14px; text-align: right;}
.labeling_bottom .btn {display: inline-block; margin-left: 4px; width: 90px; height: 36px; line-height: 36px; background-color: #37414B; color: #fff; border: 1px solid #37414B;}
.labeling_bottom .btn:first-child {background-color: #fff; border: 1px solid #37414B; color: #37414B;}

.text_wrap .content_table-btn {margin-top: 20px;}
.text_wrap .data-grid-body {overflow-y: scroll; height: 216px;}
.text_box textarea, .text_box p {width: 100%; height: 309px; resize: none; font-size: 15px; padding: 14px; border-radius: 4px; border: 1px solid #e0e4e8; background-color: #fff; line-height: 1.4;}
.text_box p {overflow-y: scroll; line-height: 1.6; cursor: text;}

.text_box.box02 p {height: initial; overflow: initial;}

/*input*/
table input, table select {width: 100%; border-radius: 0; margin-right: 0; padding: 2px 4px; vertical-align: bottom;}
table input[type="checkbox"] {vertical-align: middle;}
.input_txt {margin-right: 6px; vertical-align: middle;}
input, select {width: 150px; height: 30px; border: 1px solid #e3e3e3; padding: 6px; border-radius: 4px; margin-right: 6px; font-size: 14px; color: #313131;}
.search-box input[type="date"], .search-box input[type="month"] {width: 120px;}
input[type="checkbox"] {width: initial; height: initial; margin-right: 0; cursor: pointer;}
.search-box input[name="userName"], .search-box input[name="subjectName"] {width: 100px;}
.search-box select[name="gender"] {width: 70px;}
.readonly {background-color: #ededed;}
.form_error_message {color: #ed1c2a;}
td.column-textbox.error input, td.column-textbox.error select {border-color: #ed1c2a;}
/*button*/
.btn {text-align: center; vertical-align: middle; cursor: pointer; border-radius: 4px; transition: 0.5s;}
.logout_btn {height: 30px; line-height: 22px; background-color: #70af9f; color: #fff; padding: 4px 16px; margin: 0 20px 0 16px;}
.input_btn, .project_search .btn {height: 30px; padding: 3px 16px; font-size: 16px; color: #fff; background-color: #70af9f;}

/*content_table*/
.content_table {width: 100%; border-collapse: collapse; line-height: 30px; color: #313131; margin-top: 20px;}
.content_table thead {color: #fff;}
.content_table thead tr {border-bottom: 2px solid #70af9f;}
.content_table tbody tr {background-color: #F3F6F8;}
.content_table tbody tr:nth-child(2n) {background-color: #fff;}
.content_table tbody tr.selected {background-color: #d4f1ed !important;}
.content_table th, .content_table td {padding: 2.4px; text-align: center;}
.content_table th {height: 50px; border: 1px solid #ededed; background-color: #fff; color: #3a8773; font-weight: 400;}
.content_table td {height: 80px; border: 1px solid #ddd; line-height: 1.5;}

.content_table b {font-weight: 400; color: #3a8773;}
.content_table em {display: inline-block; width: 50px; border-bottom: 1px solid #666666;}
.content_table textarea {width: 100%; height: 100px; padding: 4px; border: 1px solid #e3e3e3; resize: none;}

.content_table.table02 td {text-align: left; padding: 20px;}
.content_table.table02 .td_list {margin-top: 20px;}
.content_table.table02 td .td_list:first-child {margin-top: 0;}
.content_table.table02 .td_list i {color: #6b6b6b; margin-left: -8px;}
.content_table.table02 textarea {height: 140px;}

/*footer*/
.footer {position: absolute; bottom: 0; width: 100%; height: 56px; padding: 20px; display: flex; justify-content: center; align-items: center; background-color: #e5eaef; border-top: 1px solid #ededed;}
.footer span {margin-right: 10px; font-size: 13px; color: #616161;}
.footer img {width: 100px;}

/**/
.task-detail span {font-weight: 400;}
.task-detail-title {display: flex; align-items: center; font-weight: 400; border-bottom: 1px solid #ddd; margin-bottom: 12px; padding-bottom: 6px;}
.task-detail-title li:nth-child(1) {margin-right: auto; color: #14adea;}
.task-detail div {margin-top: 2px;}
.task-detail div ul {line-height: 1.5; color: #616161;}
.btn-start-task {font-weight: 300;}

/*calendar*/
.calendar_wrap .date_c01 {color: #212121; font-weight: 400;}
.calendar_wrap em {font-style: initial;}
.calendar_wrap em.op5 {opacity: 0.5;}
.calendar_wrap em.c_gray {text-decoration: line-through; opacity: 0.5;}
.calendar_wrap em.c_red {color: red; text-decoration: line-through; opacity: 0.5;}

.calendar_wrap .calendar_header {
    width: 100%;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    line-height: 3rem;
}
.calendar_wrap .calendar_header .calendar_month {position: relative; width: 230px; float: left;}
.calendar_wrap .calendar_header .btn {
    position: absolute;
    top: 0;
    width: 2.8rem;
    height: 2.8rem;
    background-repeat: no-repeat;
    font-size: 0;
    background-position: center;
    cursor: pointer;
}
.calendar_wrap .calendar_header .date-prev {
    height: 100%;
    left: 0;
    background-color: initial;
}
.calendar_wrap .calendar_header .date-next {
    height: 100%;
    right: 0;
    background-color: initial;
}
.calendar_wrap .calendar_header .date-next::before, .calendar_wrap .calendar_header .date-prev::before {content: "\f137"; font-family: "Font Awesome 5 Free"; font-size: 26px; font-weight: 600; color: #199586;}
.calendar_wrap .calendar_header .date-next::before {content: "\f138";}
.calendar_wrap .calendar_header .calendar_title {
    display: inline-block;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
}
.calendar_wrap .calendar_header .calendar_status {float: right; margin-top: 1.1rem; font-size: 1.3rem;}
.calendar_status span {margin-left: 0.4rem;}
.calendar_status span::before {content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #424242; margin: 0 0.4rem 0.2rem 0;}
.calendar_wrap .calendar_body .calendar_t {
    margin-top: 14px;
    box-sizing: border-box;
    border-spacing: 0;
    border-collapse: collapse;
    padding: 0;
    border: 0;
    width: 100%;
}
.calendar_wrap .calendar_body .calendar_t th {
    width: 14%;
    border: 0.1rem solid #d7d8d9;
    height: 2.4rem;
    font-size: 15px;
    background-color: #eff0f6;
    font-weight: 400;
}
.calendar_wrap .calendar_body .calendar_t .c_red {color: #e60012 !important; font-size: 17px; font-weight: 300 !important;}
.calendar_wrap .calendar_body .calendar_t .c_blue {color: #296ddd; font-weight: 300 !important;}
.calendar_wrap .calendar_body tbody {display: table-row-group; vertical-align: middle; border-color: inherit;}
.calendar_wrap .calendar_body tbody td {
    font-size: 17px;
    vertical-align: top;
    border: 0.1rem solid #d7d8d9;
    background-color: #fff;
}
.calendar_wrap .calendar_body tbody td.off {background-color: #fff7f7; color: #333;}
.calendar_wrap .calendar_body tbody td .num {
    height: 2.6rem;
    line-height: 2.6rem;
    position: relative;
    background-color: #fff;
    border-bottom: 0.1rem solid #dadada;
    padding: 0 0.8rem;
}
.calendar_wrap .calendar_body tbody td .num.on {color: #282828;}
.calendar_wrap .calendar_body tbody td .num button {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    display: inline-block;
    vertical-align: middle;
    display: inline-block;
    color: #fff;
    padding: 0.2rem 0.8rem;
    -webkit-border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    border-radius: 0.3rem;
    cursor: pointer;
    background-color: #70af9f;
    font-weight: 300;
    font-size: 16px;
}
.calendar_wrap .calendar_body tbody td .reservation_box {
    padding: 8px;
    position: relative;
    min-height: 9rem;
    vertical-align: middle;
    font-size: 15px;
    color: #e60012;
    letter-spacing: -0.3px;
    line-height: 1.8;
}
.calendar_wrap .calendar_body tbody td .reservation_item {cursor: pointer;}

.btn, .btn-span {font-weight: bold;}