@charset "UTF-8";

/*        공통 css     */
*, ::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: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
a {
    color: #212529; text-decoration: none;
}
button {
    padding: 10px 20px; font-size: 15px; line-height: 15px; color: #fff; background-color: #0059a6; border: none; border-radius: 17.5px;
}
input[type=text], input[type=number], input[type=email], input[type=password], label, select {
    padding: 10px 0; font-size: 15px; line-height: 15px; color: #333;
}
input[type=text], input[type=number], input[type=email], input[type=password], select {
    padding-left: 20px; padding-right: 20px; border: 1px solid #ccc; border-radius: 17.5px;
}
input[type=checkbox] {
    margin: 10px 10px 10px 0;
}
input:focus, a:focus, button:focus {
    outline: none;
}
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.small {
    padding: 7px 14px; font-size: 12px; line-height: 12px; border-radius: 13px;
}
table {
    width: 100%; border-spacing: 0;
}
table th, table td {
    height: 40px; padding: 5px; font-size: 1rem; text-align: center;
}
table th {
    font-weight: 500; border-bottom: 1px solid #ddd;
}
table td.left {
    padding-left: 20px; text-align: left;
}
table td.date {
    font-size: 0.7rem;
}
.list-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}
.list-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.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; } .mt30 { margin-top: 30px; } .mt40 { margin-top: 40px; }
.mb10 { margin-bottom: 10px; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; }

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


.popup.on {
    display: block !important;
}


/*        상단 내비게이션 바     */
.navbar {
	position: fixed; top: 0; left: 0; z-index: 1030; width: 100%; padding: 0 30px; 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%; margin: 0 auto;
}
.navbar .inner .logo {
	padding-top: 9px; padding-bottom: 9px; line-height: inherit; white-space: nowrap;
}
.navbar .inner .logo img {
	width: 170px;
}
.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 {
    position: relative; margin-left: 20px; padding: 10px 0;
}
.navbar .inner .member-popup-wrap .member-count {
    display: inline-block; cursor: pointer;
}
.navbar .inner .member-popup-wrap .member-popup {
    display: none; position: absolute; top: 40px; left: -5px; width: 350px; padding-bottom: 15px; background-color: #fff; border: 1px solid #ddd; border-radius: 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; overflow-y: auto;
}
.navbar .inner .login-member {
	margin-left: auto; margin-right: 20px;
}
.navbar .inner .logout {
	margin-right: 20px; font-size: 0.8rem;
}

.container {
	position: relative; width: 100%; min-height: 100vh; margin: 0 auto; padding: 60px 0 50px; background-color: #fcfcfc;
}
.content {
	margin-left: 0; padding: 20px 50px 20px 40px; transition: all 0.3s; transform-origin: top left;
}
.container.active-left .content {
    margin-left: 270px;
}
.content .title-wrap .title {
    display: inline-block; font-size: 1.2rem; margin-bottom: 15px;
}
.content .title-wrap .left-btn {
    margin-left: 20px; margin-top: 12px;
}
.content .title-wrap .right-btn {
    float: right; margin-top: 12px;
}
.content .search-wrap {
    text-align: right; margin: 10px 0 20px;
}
.content section .list-wrap {
    margin-top: 10px;
}
.content section .list-wrap th.order {
    position: relative; text-decoration: underline; cursor: pointer;
}
.content section .list-wrap th.order::after {
    content: '▼'; display: none; position: absolute; top: 10px; right: 5px;
}
.content section .list-wrap th.order.asc::after, .content section .list-wrap th.order.desc::after,
.content section .list-wrap th.order:hover::after {
    display: block;
}
.content section .list-wrap th.order.desc::after, .content section .list-wrap th.order.asc:hover::after {
    content: '▼';
}
.content section .list-wrap th.order.asc::after, .content section .list-wrap th.order.desc:hover::after {
    content: '▲';
}
.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:hover {
    text-decoration: underline;
}
.content section .paging-wrap a.on {
    color: #0059a6; font-weight: 500; cursor: text;
}
.content section .paging-wrap a.on:hover {
    text-decoration: none;
}
.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;
}

.layer-popup {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; overflow: auto; background-color: rgba(0, 0, 0, 0.3);
}
.layer-popup .inner {
    position: relative; max-width: 500px; margin: 100px auto 50px; padding: 20px; background-color: #fff; border-radius: 15px;
}
.layer-popup .popup-close {
    position: absolute; top: 15px; right: 25px; font-size: 1.5rem; cursor: pointer;
}
.layer-popup .popup-header {
    margin-bottom: 20px; font-size: 1.2rem;
}
.layer-popup .popup-footer {
    margin-top: 20px; text-align: right;
}


/*        좌측 메뉴바     */
.leftmenu {
    position: fixed; width: 270px; height: 100%; background-color: #fff; border-right: 1px solid #ddd; transition: all 0.3s; transform: scale(0, 1); transform-origin: top left;
}
.container.active-left .leftmenu {
    transform: scale(1, 1);
}
.leftmenu > ul {
    list-style: none; padding: 0; margin: 0;
}
.leftmenu > ul > li {
    position: relative; margin: 0; padding: 20px 20px 0 20px;
}
.leftmenu > ul > li > a {
    display: block; padding: 0 0 20px 20px; border-bottom: 1px solid #eee; transition: all .3s;
}
.leftmenu > ul > li.on {
    background-color: #0059a6;
}
.leftmenu > ul > li.on > a {
    color: #fff; font-weight: 500; border-bottom: none;
}
.leftmenu > ul > li:before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: rgba(0, 86, 169, 1); transition: all .3s; z-index: -1;
}
.leftmenu > ul > li:hover:before {
    width: 100%;
}
.leftmenu > ul > li:hover > a {
    color: #fff; border: none;
}
.toggle-leftmenu {
    position: absolute; top: 150px; left: 0; width: 25px; height: 40px; color: #666; background-color: #fff; text-align: center; line-height: 40px;
    border: 1px solid #ddd; border-left: none; border-top-right-radius: 5px; border-bottom-right-radius: 5px; cursor: pointer; transition: all 0.3s;
}
.toggle-leftmenu:hover {
    color: #fff; background-color: #0059a6; border-color: #0059a6;
}
.container.active-left .toggle-leftmenu {
    left: 270px;
}


/*        login page     */
.content.login {
    width: 300px; margin: 0 auto;
}
.content.login .login-form {
    position: absolute; top: calc(50vh - 210px); width: 290px; margin: 0 5px;
}
.content.login .login-form .title {
    margin-bottom: 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;
}


.dashboard table tr:hover {
    background-color: #eee;
}
.dashboard select {
    padding: 5px 10px; border-radius: 5px;
}
.last-update-time {
    float: right; margin-top: 12px; font-size: 14px; font-weight: 300;
}
.dashboard-table1 th {
    text-align: left; border: none;
}
.dashboard-table2 td {
    position: relative;
}
.dashboard-table2 td .user-list-toggle {
    cursor: pointer;
}
.dashboard-table2 td .user-list {
    position: absolute; top: 15px; left: 0; visibility: hidden; width: 100%; z-index: 1; background-color: #fff; border: 1px solid #ddd; list-style: none;
}
.dashboard-table2 td .user-list-toggle:hover .user-list {
    visibility: visible;
}
.dashboard-table2 td .user-list li {
    padding: 10px; font-size: 14px; font-weight: 400; text-align: left;
}