@charset "UTF-8";

/*        공통 css     */
@font-face {
	font-family: Noto Sans KR; src: url(/fonts/NotoSansKR-Light.woff) format("woff"); font-weight: 300; font-style: normal;
}
@font-face {
	font-family: Noto Sans KR; src: url(/fonts/NotoSansKR-Regular.woff) format("woff"); font-weight: 400; font-style: normal;
}
@font-face {
	font-family: Noto Sans KR; src: url(/fonts/NotoSansKR-Medium.woff) format("woff"); font-weight: 500; font-style: normal;
}
@font-face {
	font-family: Noto Sans KR; src: url(/fonts/NotoSansKR-Bold.woff) format("woff"); font-weight: 700; font-style: normal;
}
@font-face {
	font-family: Noto Sans KR; src: url(/fonts/NotoSansKR-Black.woff) format("woff"); font-weight: 900; font-style: normal;
}

*, ::after, ::before {
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    position: relative; min-height: 100%; margin: 0; text-align: left; line-height: 1; font-size: 1rem; font-weight: 300; color: #333; background-color: #fff; font-family:'Noto Sans KR', 'Malgun Gothic', dotum, sans-serif; word-break: keep-all;
}
html, h1, h2, h3, h4, h5, h6, p, form, fieldset, img {
    margin: 0; padding: 0; border: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block;
}
ul, dl, dt, dd {
    margin: 0; padding: 0; list-style: none;

}
label, input, textarea, select, button {
    display: inline-block; font-size: 1rem; outline: 0; font-family: 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
a, button {
    word-break: keep-all;
}
a {
    color: #212529; text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
button {
    padding: 10px 20px; font-size: 15px; line-height: 15px; color: #fff; background-color: #0059a6; border: none; border-radius: 7px;
}
button a {
    color: #fff;
}
button:hover {
    cursor: pointer;
}
input[type=text], input[type=email], input[type=password], label {
    padding: 10px 0; font-size: 15px; line-height: 15px; color: #333;
}
input[type=text], input[type=email], input[type=password] {
    padding-left: 20px; padding-right: 20px; border: none; border-bottom: 1px solid #ccc;
}
input:focus, a:focus, button:focus {
    outline: none;
}
input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset;
}
button:hover {
    background-color: #00a1b9; cursor: pointer;
}
button:disabled {
    background-color: #ccc; cursor: inherit;
}
button.outline {
    color: #0059a6; background-color: #fff; border: 1px solid #0059a6;
}
button.warning {
    background-color: red;
}
button.gray {
    color: #fff; background-color: #999;
}
button.small {
    padding: 7px 14px; font-size: 12px; line-height: 12px; border-radius: 5px;
}
.button.two-pairs {
    width: calc((100% - 10px) / 2);
}
.button.two-pairs:not(:first-child) {
    margin-left: 10px;
}
.button.three-pairs {
    width: calc((100% - 8px) / 3);
}
.button.three-pairs:not(:first-child) {
    margin-left: 4px;
}

table {
    width: 100%; border-spacing: 0;
}
table th, table td {
    height: 40px; padding: 5px; font-size: 0.9rem; text-align: center; border-bottom: 1px solid #ddd;
}
table th {
    font-weight: 500;
}
table td.left {
    padding-left: 20px; text-align: left;
}
table td.date {
    font-size: 0.7rem;
}
table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}
table th.order {
    position: relative; text-decoration: underline; cursor: pointer;
}
table th.order::after {
    content: '▼'; display: none; position: absolute; top: 12px; right: 5px;
}
table th.order.asc::after, table th.order.desc::after, table th.order:hover::after {
    display: block;
}
table th.order.desc::after, table th.order.asc:hover::after {
    content: '▼';
}
table th.order.asc::after, table th.order.desc:hover::after {
    content: '▲';
}
.row {
    display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.row.center {
    justify-content: center;
}
.wauto { width: auto; } .w5 { width: 5%; } .w15 { width: 15%; } .w25 { width: 25%; } .w35 { width: 35%; } .w45 { width: 45%; } .w55 { width: 55%; } .w65 { width: 65%; } .w75 { width: 75%; } .w85 { width: 85%; } .w95 { width: 95%; }
.w10 { width: 10%; } .w20 { width: 20%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } .w90 { width: 90%; } .w100 { width: 100%; }

.ml0 { margin-left: 0; } .mlauto { margin-left: auto; }
.ml5 { margin-left: 5%; } .ml15 { margin-left: 15%; } .ml25 { margin-left: 25%; } .ml35 { margin-left: 35%; } .ml45 { margin-left: 45%; } .ml55 { margin-left: 55%; } .ml65 { margin-left: 65%; } .ml75 { margin-left: 75%; } .ml85 { margin-left: 85%; } .ml95 { margin-left: 95%; }
.ml10 { margin-left: 10%; } .ml20 { margin-left: 20%; } .ml30 { margin-left: 30%; } .ml40 { margin-left: 40%; } .ml50 { margin-left: 50%; } .ml60 { margin-left: 60%; } .ml70 { margin-left: 70%; } .ml80 { margin-left: 80%; } .ml90 { margin-left: 90%; } .ml100 { margin-left: 100%; }
.mr0 { margin-right: 0; } .mrauto { margin-right: auto; }
.mr5 { margin-right: 5%; } .mr15 { margin-right: 15%; } .mr25 { margin-right: 25%; } .mr35 { margin-right: 35%; } .mr45 { margin-right: 45%; } .mr55 { margin-right: 55%; } .mr65 { margin-right: 65%; } .mr75 { margin-right: 75%; } .mr85 { margin-right: 85%; } .mr95 { margin-right: 95%; }
.mr10 { margin-right: 10%; } .mr20 { margin-right: 20%; } .mr30 { margin-right: 30%; } .mr40 { margin-right: 40%; } .mr50 { margin-right: 50%; } .mr60 { margin-right: 60%; } .mr70 { margin-right: 70%; } .mr80 { margin-right: 80%; } .mr90 { margin-right: 90%; } .mr100 { margin-right: 100%; }
.mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; }
.mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; }

.d-none { display: none; } .d-block { display: block; }
.t-center { text-align: center; } .t-left { text-align: left; } .t-right { text-align: right; }


.search-wrap {
    text-align: right;
}
.title-wrap .title {
    display: inline-block; margin: 15px 0; font-size: 1.2rem; font-weight: 500;
}
.title-wrap .left-btn {
    margin-left: 20px;
}
.title-wrap .right-btn {
    float: right; margin-top: 12px;
}
.file-link {
    margin-left: 10px;
}
.file-icon {
    margin-left: 10px; color: #888;
}
.action-link {
    color: #0059a6;
}
.upload-file-wrap {
    position: relative;
}
.upload-file-wrap .input-file {
    display: none;
}
.upload-file-wrap .filename {
    display: inline-block; width: 100%; padding: 10px 20px; font-size: 15px; line-height: 15px; color: #333; border: none; border-bottom: 1px solid #ccc;
}
.upload-file-wrap .btn-upload-file {
    position: absolute; top: 5px; right: 10px;
}
.upload-file-wrap .btn-del-file-wrap {
    position: absolute; top: 7px; left: -7px; font-size: 1.2rem; color: #0059a6;
}
.content section .list-wrap {
    margin-top: 10px;
}
.content section .paging-wrap {
    margin-top: 40px; text-align: center;
}
.content section .paging-wrap a {
    display: inline-block; margin: 0 10px; cursor: pointer;
}
.content section .paging-wrap a.on {
    color: #0059a6; font-weight: 500; cursor: text;
}
.content section .paging-wrap a.on:hover {
    text-decoration: none;
}
.content .row {
    display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px 0;
}
.row .inner-row {
    margin-right: 20px; padding: 10px 0; border-bottom: 1px solid #aaa;
}
.row .inner-row:first-child {
    padding-top: 0;
}
.row .inner-row:last-child {
    padding-bottom: 0; border-bottom: none;
}
.content section .comment-count {
    margin-left: 10px; color: #0059a6;
}


/*        상단 내비게이션 바     */
.navbar {
	position: fixed; top: 0; left: 0; z-index: 1030; width: 100%; align-items: center; background-color: #fff; border-bottom: 1px solid #b0b9c5;
}
.navbar .inner {
	-ms-flex-direction: row; flex-direction: row; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -ms-flex-pack: start;
	justify-content: flex-start; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center;
	align-items: center; width: 100%; max-width: 1180px; margin: 0 auto;
}
.navbar .inner .nav-logo {
	text-align: left;
}
.navbar .inner .logo {
	display: inline-block; padding-top: 10px; padding-bottom: 7px; line-height: inherit; white-space: nowrap;
}
.navbar .inner .logo.no-binder {
	padding-top: 24px; padding-bottom: 24px;
}
.navbar .inner .logo img {
	width: 150px; vertical-align: middle;
}
.navbar .inner .logo .logo-title {
	font-size: 1.6rem; color: #005a96; font-weight: 500; vertical-align: middle;
}
.navbar .inner .logo .logo-title:hover {
	text-decoration: none;
}
.navbar .inner .nav-logo .binder-title {
	display: block; margin-left: 10px; font-size: 1rem; padding-bottom: 15px;
}
.navbar .inner .nav {
	display: block;
}
.navbar .inner .nav-link {
	padding-top: 10px; color: #333; font-size: 1.2em; font-weight: bold;
}
.navbar .inner .member-popup-wrap, .navbar .inner .login-member-wrap {
    position: relative; margin-top: auto; padding: 15px 0;
}
.navbar .inner .member-popup-wrap {
    margin-left: 50px;
}
.navbar .inner .member-popup-wrap .member-count, .navbar .inner .login-member-wrap .login-member {
    display: inline-block; cursor: pointer;
}
.navbar .inner .member-popup-wrap .member-popup, .navbar .inner .login-member-wrap .login-popup {
    display: none; position: absolute; top: 40px; background-color: #fff; border: 1px solid #ddd;
}
.navbar .inner .member-popup-wrap .member-popup {
    left: -5px; width: 350px; padding-bottom: 15px;
}
.navbar .inner .member-popup-wrap .member-popup .head {
    margin: 0 20px; padding: 10px 0; text-align: right; border-bottom: 1px solid #ddd;
}
.navbar .inner .member-popup-wrap .member-popup .member-list {
    max-height: 300px; margin: 0 20px; overflow-y: auto;
}
.navbar .inner .member-popup-wrap .member-popup .member-list table tr:last-child td {
    border-bottom: none;
}
.navbar .inner .login-member-wrap {
	margin-left: auto;
}
.navbar .inner .login-member-wrap .login-popup {
    right: 0; width: 200px; padding: 15px;
}
.navbar .inner .login-member-wrap .login-popup .head {
    text-align: center;
}

.container {
	position: relative; width: 100%; max-width: 1180px; min-height: 100%; margin: 0 auto; padding: 83px 0 50px;
}
.container.no-header {
    padding-top: 0;
}
.container.no-footer {
    padding-bottom: 0;
}
.content {
	padding: 20px 10px;
}
.footer {
    position: absolute; bottom: 0; width: 100%; padding: 10px 0 20px 0; font-size: 0.9em;color: #666; text-align: center; border-top:1px solid #DDD; background-color: #FBFBFB;
}



/*        login page     */
.main-banner {
	position: relative; width: 100%; margin-bottom: 20px;
}
.main-banner.banner1 {
	background-color: #EFE9E4;
}
.main-banner.banner2 {
	background-color: #efefef;
}
.main-banner .inner {
	max-width: 1180px; height: 100%; margin: 0 auto; background-image: url('/images/1.png'); background-position: right bottom; background-repeat: no-repeat; background-size: 64.07%;
}
.main-banner.banner1 .inner {
	background-image: url('/images/1.png');
}
.main-banner.banner2 .inner {
	background-image: url('/images/2.png');
}
.main-banner .inner .text {
	max-width: 410px; padding: 50px 10px;
}
.main-banner .inner .text h1 {
	font-size: 1.3em; margin-bottom: 10px; font-weight: 900;
}
.main-banner .inner .text .sub-text {
	color: #333; font-size: 0.9em; line-height: 2.0em; word-break: keep-all;
}
.main-banner .inner .text .sub-text .emphasis {
	color: #001977;
}
.content.login {
    width: 300px; margin: 60px auto; padding: 0;
}
.content.login .login-form {
    width: 290px; margin: 0 5px;
}
.content.login .login-form .title {
    margin: 30px 0 20px; text-align: center;
}
.content.login .login-form input[type=text],
.content.login .login-form input[type=email],
.content.login .login-form input[type=password] {
    display: block; width: 100%; margin-bottom: 10px;
}
.content.login .login-form input[type=checkbox] {
    margin-bottom: 20px;
}
.content.login .login-form button[type=submit] {
    display: block; width: 100%; padding: 10px 20px;
}
.content.login .login-form .warning {
    visibility: hidden; text-align: center; color: red; font-weight: 500;
}


/*        구성원 추가 layer popup     */
.layer-popup .popup-header .btn-row-plus {
    margin-left: 20px; padding: 0; font-size: 20px; color: #0059a6; background-color: #fff;
}
.layer-popup .popup-content .add-member-row {
    margin-bottom: 10px;
}
.layer-popup .popup-content .add-member-row .add-member-input {
    width: 40%; margin: 5px 0; margin-left: 5%;
}
.layer-popup .popup-content .add-member-row .btn-row-minus {
    display: inline-block; width: 10%; text-align: center; font-size: 1.2rem; color: #0059a6;
}
.layer-popup .popup-content .btn-wrap {
    text-align: center;
}


/*        dashboard page     */
.dashboard section {
    display: inline-block; width: 100%; margin-bottom: 30px;
}
.dashboard section .title-wrap {
    position: relative;
}
.dashboard section .title-wrap .title .count {
    margin-left: 5px; color: #FF0040;
}
.dashboard section .title-wrap .more-link {
    font-size: 0.9rem; margin-left: 10px;
}
.dashboard section .title-wrap .right-btn {
    /*margin-top: -2px;*/
}
.dashboard section .list-wrap {
    margin-top: 0;
}
.dashboard section .list-wrap table {
    margin-bottom: 10px; border: 1px solid #ddd;
}
.dashboard section .list-wrap table th, .dashboard section .list-wrap table td {
    height: 30px;
}
.read-notification, .read-notification a {
    color: #aaa;
}
.dashboard .main-comment-section .list-wrap, .main-comment-list .list-wrap {
    border-top: 1px solid #ddd;
}
.dashboard .main-comment-section .list-wrap .inner-row, .main-comment-list .list-wrap .inner-row {
    padding-top: 20px; padding-bottom: 10px; border-bottom: 1px solid #aaa;
}
.dashboard .main-comment-section .comment-info, .main-comment-list .list-wrap .comment-info {
    margin-bottom: 20px; font-size: 0.9rem;
}
.dashboard .main-comment-section .comment-content, .main-comment-list .comment-content {
    text-indent: -2.5rem; margin-left: 2.5rem;
}
.dashboard .main-comment-section .comment-content:before, .main-comment-list .comment-content:before {
    content: '댓글 : ';
}
.dashboard .main-comment-section .comment-action, .main-comment-list .comment-action {
    margin-top: 10px;
}
.dashboard .main-comment-section .comment-action a, .main-comment-list .comment-action a {
    margin-left: 10px; font-size: 0.7rem;
}
.dashboard .main-comment-section .input-wrap .textarea-comment, .main-comment-list .input-wrap .textarea-comment {
    margin-top: 20px; padding: 10px; width: 100%; height: 100px; border: 1px solid #aaa;
}
.dashboard .main-comment-section .input-wrap .comment-action button, .main-comment-list .input-wrap .comment-action button {
    float: right;
}


/*        등록/수정 page         */
.content .input-section .row .upload-file-wrap {
    margin: 10px 0;
}
.content .input-section .row .upload-file-wrap .filename {
    width: calc(100% - 30px); margin-left: 30px;
}
.content .input-section .row .member-list-input {
    position: relative; width: 85%; min-height: 100px; border-bottom: 1px solid #ddd;
}
.content .input-section .row .member-list-input span {
    display: inline-block; margin: 10px; padding: 5px 10px; border: 1px solid #ddd; border-radius: 5px;
}
.content .input-section .row .btn-add-file, .content .input-section .row .btn-member-popup {
    margin-top: 7px; margin-left: 5px;
}
.content .input-section .member-popup,
.content .input-comment .member-popup {
    position: absolute; top: 50px; left: -10px; display: none; width: 300px; background-color: #fff; border: 1px solid #ddd; z-index: 1;
}
.content .input-section .member-popup .member-list {
    max-height: 300px; margin: 10px; overflow-y: auto;
}
.content .member-popup .member-list table tr:last-child td {
    border-bottom: none;
}
.content .input-section .uploaded-file-list {
    padding: 20px 0; border-bottom: 1px solid #ddd;
}
.content .input-section .uploaded-file-list .inner-row {
    position: relative; padding-left: 20px;
}
.content .input-section .uploaded-file-list .inner-row .btn-del-file-wrap {
    position: absolute; left: -7px; font-size: 1.2rem; color: #0059a6;
}


/*        파일 리스트 layer popup         */
.layer-popup.file-list .popup-content {
    max-height: calc(100vh - 450px);
}
.layer-popup.file-list .popup-content {
    padding-left: 10px; padding-right: 10px;
}
.layer-popup.file-list .popup-content .input-file-wrap {
    margin: 10px 0;
}


/*        파일 업로드 layer popup         */
.layer-popup.file-upload .inner {
    margin-top: 80px;
}
.layer-popup.file-upload .popup-content {
    padding-left: 10px; padding-right: 10px;
}
.layer-popup.file-upload .popup-content .upload-file-wrap {
    margin: 10px 0;
}


/*        회의 상세 page         */
.content .view-section .info-wrap {
    margin-top: 20px;
}
.content .view-section .info-wrap .row {
    border-bottom: 1px solid #aaa;
}
.content .view-section .info-wrap .row .member-list-wrap {
    position: relative;
}
.content .view-section .info-wrap .row .member-list-wrap .member-popup {
    position: absolute; top: 30px; left: -10px; display: none; width: 260px; background-color: #fff; border: 1px solid #ddd; z-index: 1;
}
.content .view-section .info-wrap .row .member-list-wrap .member-popup .member-list {
    padding: 10px;
}
.content .view-section .replay-frame {
    display: none; position: relative; margin-top: 20px; width: 100%;
}
.content .view-section .replay-frame iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; border: 1px solid #aaa;
}
.content .view-section .comment-info {
    margin-left: 10px;
}
.content .view-section .info-wrap .row .inner-row:not(:first-child) .comment-info {
    margin-top: 10px;
}
.content .view-section .comment-info .name {
    font-weight: 500;
}
.content .view-section .comment-info .date {
    margin-left: 20px; font-size: 0.8rem;
}
.content .view-section .comment-content {
    margin-top: 20px; padding: 20px; line-height: 1.5rem; background-color: #f0f0f0;
}
.content .view-section .comment-content .reply {
    color: #0059a6;
}
.content .view-section .comment-action {
    margin-top: 5px;
}
.content .view-section .comment-action a {
    margin-left: 10px; font-size: 0.7rem;
}
.content .view-section .input-comment {
    position: relative; margin-top: 20px;
}
.content .view-section .input-comment .btn-add-member {
    margin-left: 20px; font-size: 0.9rem; color: #0059a6; cursor: pointer;
}
.content .view-section .input-comment .member-popup {
    top: 20px; left: 110px;
}
.content .view-section .input-comment .comment-target {
    display: none; position: absolute; top: 0; left: -70px; color: #0059a6;
}
.content .view-section .input-comment .comment-target::before {
    content: '@';
}
.content .view-section .input-comment .textarea-comment {
    margin-top: 20px; padding: 20px; width: 100%; border: 1px solid #aaa;
}
.content .view-section .input-comment .comment-action {
    text-align: right;
}


/*         화상회의 입장 페이지         */
.content.room .room-section iframe {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
}