@charset "UTF-8";

/** Front style define **/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");

html, body {font-family: 'Noto Sans KR', sans-serif; font-size: 14px; color: #333; }

body {background: #ffffff;  overflow-x:hidden; }


/* Layout */
.wrapper {width: 100%; min-width: 1200px; display: flex; flex-direction: column; min-height: 100vh; overflow-x:hidden;}

.header {position: relative; z-index: 10; display: flex; justify-content: flex-start; align-items: center; height: 61px; margin: 0 0; padding: 0 20px 0 0; border-bottom: 1px solid #e2e5ed; background: #fff;}
.header .btn-menu {display: block; width: 48px; height: 60px; line-height: 61px; padding-left: 20px; color: #000; background: #fff;}
.header .btn-menu i {color: #000;}
.header h1 {margin: 0 0 0 0; width: 192px; padding-left: 40px; height: 60px; background: #fff;}
.header h1 a {display: block; height: 60px; padding-top: 12px;}
.header h1 img {width: 140px; vertical-align: top;}
.header .search-box {display: flex; flex: 0 1 30%; height: 58px; padding-left: 30px; align-items: center;}
.header .user-function {height: 58px; margin-left: auto; line-height: 58px; flex: 0 1 auto; display: flex; justify-content: flex-end; align-items: center;}
.header .user-function .user-name {font-size: 14px; color: #616161;}

@media screen and (max-width: 1460px) {.header .user-function .user-name{display: none;}}
.header .user-function button {border: 0; margin: 0 0 0 12px; padding: 0 0; background: transparent; vertical-align: middle; color: #567293;}
.header .user-function button.user {width: 22px; height: 22px; border: 2px solid #567293; border-radius: 100%;}
.header .user-function button.user .ri-lg {font-size: 1.2em; line-height: 1;}
.header .user-function button i {line-height: 1;}

.header .user-function .input-group {width: 244px; margin-right: 24px; padding-right: 14px; background: #f2f4f4; color: #333;}
.header .user-function .input-group .form-control {width: 180px; border: 0; background: #f2f4f4;}
.header .user-function .input-group i {color: #333; font-size: 1.3em;}


@media screen and (max-width: 768px) {
.header h2 {display: none;}
.header .user-function {margin-left: 16px; flex: ;}
}

.top-navigation .nav-list {display: flex; justify-content: flex-start; margin-left: 0; border-right: 1px solid #e2e5ed;}
.top-navigation .nav-list > li {position: relative; width: 120px; height: 60px; flex: 0 1 180px; border-left: 1px solid #e2e5ed;}
.top-navigation .nav-list > li > a {display: block; height: 60px; padding: 0 10px 0 10px; line-height: 60px; letter-spacing: -0.049em; text-align: center; font-size: 15px; color: #333;}
.top-navigation .nav-list > li:hover > a,
.top-navigation .nav-list > li > a:hover,
.top-navigation .nav-list > li > a.active {color: #b2006d; text-decoration: none; border-bottom: 1px solid #fff; background: #f4f5f9;}
.top-navigation .nav-list > li > a:hover span,
.top-navigation .nav-list > li > a.active span {border-bottom: 4px solid #b2006d;}
.top-navigation .nav-list > li > ul {position: absolute; width: 180px; right: 0; left: 0; display: none; padding: 8px 0;}
.top-navigation .nav-list > li > ul li a {display: block; padding: 0 10px 0 30px; line-height: 30px; color: #333; font-size: 15px;}
.top-navigation .nav-list > li > ul li a:hover,
.top-navigation .nav-list > li > ul li a.active {color: #b2006d;}
.top-navigation .nav-list > li:hover > ul {display: block; background: #f4f5f9;}

.main-section {position: relative; z-index: 0; min-height: calc(100vh - 140px); padding: 0 0 0 0;}
.sub-section {position: relative; z-index: 0; min-height: calc(100vh - 61px); display: flex; flex-direction: column; padding: 30px 30px 0 270px;}
body.aside-fold .sub-section {padding-left: 110px;}

.sub-section .contents {margin: 0 0 0 0; padding-bottom: 0px; min-height: 120vh;}

.contents-inner {padding: 30px 0 0 0; background-color: #ffffff;}
.search-field {max-width: 760px; margin: 0 auto;}
.search-field .form-control {height: 52px; border-radius: 26px; padding-left: 40px;}
.search-field .form-control::placeholder {color: #999;}
.search-field .btn-outline-secondary {width: 137px; color: #fff; border-radius: 26px; background: #02296d;}
.search-field .btn-outline-secondary i {vertical-align: -.167em;;}

.aside-menu {position: absolute; top: 0; bottom: 0; left: 0; z-index: 100; width: 80px; min-height: 1100px; padding-top: 30px; background: #272e48;}
.aside-menu.open {position: absolute; top: 0; bottom: 0; left: 0; z-index: 100; width: 240px; padding-top: 30px; transition: all 0.3s;}

.aside-menu .nav-list > li {margin-bottom: 24px;}
.aside-menu .nav-list > li > a {display: block; line-height: 44px; padding: 0 0 0 30px; color: #fff; font-size: 0;}
.aside-menu.open .nav-list > li > a {background: url('../images/subnav-arrow.png') no-repeat right 22px top 50%; font-size: 16px; white-space: nowrap;}
.aside-menu .nav-list > li > a.active {background: url('../images/subnav-arrow-on.png') no-repeat right 22px top 50% #272e48;}
.aside-menu .nav-list > li > a.active + ul {display: block;}
.aside-menu .nav-list > li > a img {vertical-align: middle; margin-top: -3px; margin-right: 6px;}
.aside-menu.open .nav-list > li > a img {margin-top: -7px;}
.aside-menu .nav-list > li > .nav-child {display: none; padding-left: 59px; background: #1f2439;}
.aside-menu .nav-list > li > .nav-child a {line-height: 40px; color: #fff; font-size: 15px;}
.aside-menu.open .nav-list > li > a .menu {display: inline-block; width: 80%;}

/* left icon click */
.aside-menu .nav-list > li.open {width: 220px; background: #272e48;}
.aside-menu .nav-list > li.open > a {background: url('../images/subnav-arrow.png') no-repeat right 22px top 50%; font-size: 16px; white-space: nowrap;}
.aside-menu .nav-list > li.open:hover > a {background: url('../images/subnav-arrow-on.png') no-repeat right 22px top 50% transparent;}
.aside-menu .nav-list > li.open > a img {margin-top: 12px;}
.aside-menu.open .nav-list > li.open > a img {margin-top: 12px;}
.aside-menu .nav-list > li.open > .nav-child {display: block !important;}
.aside-menu .nav-list > li.open > a .menu {display: inline-block; width: 80%;}


.footer {margin: auto -30px 0 -30px; height: 50px; line-height: 50px; text-align: center; font-size: 13px; color: #8c94b4; background: #e9eaed;}
.footer2 { height: 50px; line-height: 50px; text-align: left; font-size: 13px; color: #8c94b4; background: #e9eaed;}

.navigation {margin-top: 20px;}
.navigation > li {padding: 0 0;}
.navigation > li > ul {display: none; margin-top: 4px; padding-left: 24px; padding-top: 12px; padding-bottom: 12px;}
.navigation > li > a {display: block; height: 40px; border-left: 4px solid #3b4a51; line-height: 40px; padding: 0 0 0 20px; color: #fff; font-size: 13px;}
.navigation > li > a:hover,
.navigation > li > a.active {color: #ffa49f; border-left: 4px solid #ffa49f; }
.navigation > li > a.active + ul {display: block;}
.navigation > li > ul {background: #354248;}
.navigation > li > ul li a {padding-left: 16px; display: block; line-height: 24px; font-size: 13px;color: #fff;}
.navigation a i {vertical-align: middle;}


/* Login */
body.login-page {background: #ffffff;}
.small-logo {display: block; width: 1077px; margin: 189px auto 0 auto; padding-left: 28px;}
.login-section {position: relative; z-index: 100; padding-left: 626px; height: 451px; margin: 22px auto 0 auto; background: url('../images/bg-login-box.png') no-repeat left top; border-radius: 26px; box-shadow: 8px 12px 24px #d0d6dc;}
.login-section .login-form {display: flex; flex-direction: column; justify-content: flex-start; width: 406px; height: 451px; margin: 0 0 0 0; padding-top: 45px; border-top-right-radius: 26px; border-bottom-right-radius: 26px; background-color: #fff;}
.login-section .login-form h1 {margin: 0 0; text-align: center;}
.login-fieldset {padding: 0 60px; margin-top: 40px;}
.login-fieldset .form-control {height: 34px; border: 1xp solid #e2e5ed; border-radius: 2px; padding-left: 32px;}
.login-fieldset .form-control::placeholder {color: #999;}
.login-fieldset .form-check-input {border-radius: 0; border: 2px solid #b2006d; border-radius: 2px;}
.login-fieldset button[type="submit"].btn-primary {width: 100%; height: 56px; margin-top: 24px; background-color: #b2006d; border-color: #b2006d;}
.login-section .foot-copy {margin-top: 28px; padding-bottom: 0; text-align: center; font-size: 12px; color: #889296;}
.login-section i {color: #b2b2b2; position: absolute; left: 12px;}
.login-section label {padding-bottom: 6px; color: #999; font-size: 13px;}

@media screen and (max-width: 1024px) {
  .small-logo {display: block; width: auto; margin: 99px auto 0 auto; padding-left: 0;}
  .login-section { overflow: hidden; padding-left: 0; height: 451px; margin: 22px auto 0 auto; background: #fff; border-radius: 26px; box-shadow: 8px 12px 24px #d0d6dc;}
}

@media screen and (max-width: 480px) {
.login-section .login-form {width: 340px;}
.login-section .login-form .login-fieldset {padding: 0 24px;}
}

/* Contents */
.page-heading {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #888888; margin-right: 0; padding-bottom: 16px;}
.page-heading2 {display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #888888; margin: 0 0; padding-bottom: 16px;}
.page-heading h2 {margin: 0 0; font-size: 24px;}
.page-heading .breadcrumb {margin: 0 0; background: #fff;}
.page-heading .breadcrumb li,
.page-heading .breadcrumb li a {font-size: 13px; color: #999;}
.page-heading .breadcrumb li.active {color: #333; text-decoration: underline;}
.breadcrumb-item+.breadcrumb-item::before {content: ">"; font-family: 'remixicon';}
.page-heading .breadcrumb li i {margin-right: 4px; vertical-align: middle; color: #000;}

.date-info {width: 320px; height: 45px; margin-top: 38px; line-height: 43px; border: 1px solid #223fac; border-radius: 22px; color: #223fac; text-align: center;}

.main-monitoring {display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; padding-bottom: 45px; padding-left: 70px; padding-right: 24px;}
.main-monitoring h3 {flex: 1 1 100%; margin-top: 40px; margin-bottom: 12px; font-size: 20px; color: #333;}
.main-monitoring .monitoring-box {display: flex; flex: 1; flex-direction: column; height: 160px; color: #fff; margin-left: 30px; margin-right:"30px"; padding: 20px; border-radius: 6px; background-color: #407ef7; cursor: pointer;}
.main-monitoring .monitoring-box h4 {padding-bottom: 16px; border-bottom: 1px solid #fff; font-size: 20px;}

.main-monitoring .monitoring-box .state {margin-top: auto; text-align: right;}
.main-monitoring .monitoring-box .value {font-size: 40px; font-weight: 700;}
.main-monitoring h3 + .monitoring-box {margin-left: 0;}

.sub-monitoring {overflow: hidden; margin-left: -40px; padding: 50px 0 80px 40px; background-color: #f0f3f8;}
.sub-monitoring .monitor-group {float: left; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 632px;}
.sub-monitoring .monitor-group + .monitor-group {margin-left: 30px;}
.sub-monitoring .monitor-group h3 {flex: 1 1 100%; font-size: 20px; margin-bottom: 20px;}
.sub-monitoring .monitor-group .monitoring-box {flex: 0 1 200px; cursor: pointer; width: 200px; border: 2px solid #0c3987; height: 126px; margin: 0 0 20px 15px; border-radius: 6px; background-color: #fff;}
.sub-monitoring .monitor-group .monitoring-box:nth-child(2) {margin-left: 0;}
.sub-monitoring .monitor-group .monitoring-box:nth-child(5) {margin-left: 0;}
.sub-monitoring .monitor-group .monitoring-box:nth-child(8) {margin-left: 0;}
.sub-monitoring .monitor-group .monitoring-box:nth-child(11) {margin-left: 0;}
.sub-monitoring .monitor-group .monitoring-box .title {height: 52px; padding-left: 20px; letter-spacing: -1px; line-height: 52px; color: #fff; font-size: 18px; font-weight: 500; background-color: #0c3987;}
.sub-monitoring .monitor-group .monitoring-box .state {height: 70px;;}
.sub-monitoring .monitor-group .monitoring-box .state .value {padding-left: 22px; font-size: 40px; color: #427fea;}

.sub-monitoring .monitor-group .monitoring-box.color-1 {border: 2px solid #0c3987;}
.sub-monitoring .monitor-group .monitoring-box.color-2 {border: 2px solid #3d62f5;}
.sub-monitoring .monitor-group .monitoring-box.color-3 {border: 2px solid #20a5dd;}
.sub-monitoring .monitor-group .monitoring-box.color-4 {border: 2px solid #6631d0;}
.sub-monitoring .monitor-group .monitoring-box.color-5 {border: 2px solid #5b9bd5; background-color: #deebf7;}
.sub-monitoring .monitor-group .monitoring-box.color-6 {border: 2px solid #5b9bd5; background-color: #fff2cc;}

.sub-monitoring .monitor-group .monitoring-box.color-1 .title {background-color: #0c3987;}
.sub-monitoring .monitor-group .monitoring-box.color-2 .title {background-color: #3d62f5;}
.sub-monitoring .monitor-group .monitoring-box.color-3 .title {background-color: #20a5dd;}
.sub-monitoring .monitor-group .monitoring-box.color-4 .title {background-color: #6631d0;}
.sub-monitoring .monitor-group .monitoring-box.color-5 .title {background-color: #5b9bd5;}
.sub-monitoring .monitor-group .monitoring-box.color-6 .title {background-color: #5b9bd5;}

.monitoring-section {min-width: 1200px;display: flex; justify-content: space-between; align-items: flex-start; margin: 0 24px 0 110px;}
/* .monitoring-section .state-area {display: flex; flex: 0 1 1077px; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 1077px;} */
/* .monitoring-section .state-area {display: flex; flex: 0 1 800px; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 1077px;} */
.monitoring-section .state-area {display: flex; flex: 0 1 800px; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 1077px;}
.monitoring-section .state-area .info-box {position: relative; display: flex; flex-direction: column; flex: 0 1 calc(260px); width: 260px; height: 216px; margin-bottom: 10px; border: 1px solid #dbdfe7; padding: 18px; border-radius: 6px; background: #ffffff; box-shadow: 2px 4px 4px #dbdfe7;}
.monitoring-section .state-area .info-box h4 {font-size: 18px; letter-spacing: -1px; color: #567293; font-weight: 400;}
.monitoring-section .state-area .info-box h4 a {color: #567293; font-weight: 400;}
.monitoring-section .state-area .info-box h4 a span {font-weight: 400;}
.monitoring-section .state-area .info-box h4 a span i {vertical-align: -.267em; margin-left: 4px; color: #c3c3c3; font-weight: 300;}
.monitoring-section .state-area .info-box .count {margin-top: 12px; text-align: right; font-size: 24px; color: #567293;}
.monitoring-section .state-area .info-box .count b {padding-right: 4px; font-size: 66px; font-family: Arial, Helvetica, sans-serif; color: #567293; letter-spacing: -1px;}
.monitoring-section .state-area .info-box .count b.red {color: #ff0000;}
.monitoring-section .state-area .info-box .count b.blue {color: #427fea;}
.monitoring-section .state-area .info-box a.view {position: absolute; right: 28px; bottom: 28px; color: #567293;}
.monitoring-section .state-area .info-box i {position: absolute; left: 22px; bottom: 20px; color: #e5eff8;}

.monitoring-section .state-area .info-box:hover {background: #5364a3; color: #fff;}
.monitoring-section .state-area .info-box:hover * {color: #fff !important;}

.monitoring-section .state-area .info-box.row2 {position: relative; display: flex; flex-direction: column; flex: 0 1 calc(260px); width: 260px; height: 216px; margin-bottom: 10px; border: 1px solid #dbdfe7; padding: 18px; border-radius: 6px; background: #ffffff; box-shadow: 2px 4px 4px #dbdfe7;}
.monitoring-section .state-area .info-box.row2 h4 {font-size: 18px; letter-spacing: -1px; color: #a8127c; font-weight: 400;}
.monitoring-section .state-area .info-box.row2 h4 a {color: #a8127c; font-weight: 400;}
.monitoring-section .state-area .info-box.row2 h4 a span {font-weight: 400;}
.monitoring-section .state-area .info-box.row2 h4 a span i {vertical-align: -.267em; margin-left: 4px; color: #c3c3c3; font-weight: 300;}
.monitoring-section .state-area .info-box.row2 .count {margin-top: 12px; text-align: right; font-size: 24px; color: #a8127c;}
.monitoring-section .state-area .info-box.row2 .count b {padding-right: 4px; font-size: 66px; font-family: Arial, Helvetica, sans-serif; color: #a8127c; letter-spacing: -1px;}
.monitoring-section .state-area .info-box.row2 .count b.red {color: #ff0000;}
.monitoring-section .state-area .info-box.row2 .count b.blue {color: #427fea;}
.monitoring-section .state-area .info-box.row2 a.view {position: absolute; right: 28px; bottom: 28px; color: #a8127c;}
.monitoring-section .state-area .info-box.row2 i {position: absolute; left: 22px; bottom: 20px; color: #e5eff8;}

.monitoring-section .state-area .info-box.row2:hover {background: #9b3a7e; color: #fff;}
.monitoring-section .state-area .info-box.row2:hover * {color: #fff !important;}

/* .monitoring-section .menulink-section {width: calc(100% - 1087px); min-height: 442px; border: 1px solid #dbdfe7; padding: 20px 10px 0 10px; border-radius: 6px; background: #ffffff; box-shadow: 2px 4px 4px #dbdfe7;} */
/* .monitoring-section .menulink-section {width: calc(100% - 810px); min-height: 442px; border: 1px solid #dbdfe7; padding: 20px 10px 0 10px; border-radius: 6px; background: #ffffff; box-shadow: 2px 4px 4px #dbdfe7;} */
.monitoring-section .menulink-section {width: calc(100% - 810px); min-height: 442px; border: 1px solid #dbdfe7; padding: 20px 10px 0 10px; border-radius: 6px; background: #ffffff; box-shadow: 2px 4px 4px #dbdfe7;}
.monitoring-section .menulink-section h3 {font-size: 18px; color: #333; font-weight: 500; padding: 0 0 20px 21px; margin: 0 -10px; border-bottom: 1px solid #e8e9ed}

@media screen and (max-width: 1680px) {
.monitoring-section {flex-wrap: wrap; min-width: calc(100% - 134px); margin-bottom: 8px;}
.monitoring-section .state-area {width: 100%; flex: 0 1 100%; justify-content: flex-start;}
.monitoring-section .state-area .info-box {margin-right: 8px;}
.monitoring-section .menulink-section {width: 100%;}
}

@media screen and (max-width: 1024px) {
.monitoring-section {flex-wrap: wrap; min-width: calc(100% - 48px); margin: 0 24px 8px 24px;}
}


@media screen and (max-width: 768px) {
.monitoring-section {min-width: calc(100% - 48px); margin: 0 24px 8px 24px; flex-wrap: wrap;}
.monitoring-section .state-area .info-box {margin-right: 0;}
.monitoring-section .state-area {justify-content: space-between;}
}


.search-data-section { margin: 0 24px 0 110px; border: 1px solid #dbdfe7; padding: 24px 20px 45px 20px; border-radius: 6px; background: #ffffff; box-shadow: 2px 4px 4px #dbdfe7;}
.search-data-section h3 {font-size: 18px;;}
.search-data-section .table {margin-top: 16px;}

@media screen and (max-width: 768px) {
.search-data-section {overflow: hidden; overflow-x: auto; margin: 0 24px 0 24px;}
.search-data-section table {width: 200%;}
}

.badge {width: 100%; line-height: 24px; text-transform: uppercase; font-weight: 400;}

.page-heading h2,
.page-heading nav {flex: 0 1 auto; width: auto;}
.page-heading nav a {color: #8e8e8e;}

.head-info-box {margin: 0 0; padding: 0 0; border-bottom: 1px solid #cfcfcf;}

.datepicker td, .datepicker th {font-size: 12px;}

.table tr th, .table tr td {border-color: #e5e5e5;}
tbody, td, tfoot, th, thead, tr {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
.table thead tr th {border-top: 1px solid #999; border-bottom: 0; padding-top: 24px; padding-bottom: 24px; text-align: center; font-weight: 400;}
.table tbody tr th,
.table tbody tr td { text-align: center}
.table tbody tr:first-child td,
.table tbody tr:first-child th {border-top: 1px solid #e5e5e5;}

.table tbody tr th span.req:after {content:"*";color:#ff0000;display:inline-block;margin-left:5px;}

.contents-wrap {padding-right: 40px;}

.table.data-type thead tr th {text-align: left; padding: 8px; font-size: 14px; font-weight: 400; text-align: center; background-color: #f1f4fb; vertical-align: middle;}
.table.data-type tbody tr th {text-align: left; padding-left: 16px; font-size: 14px; font-weight: 400; background-color: #f1f4fb; vertical-align: middle;}
.table.data-type tbody tr td {text-align: left; padding-left: 16px; font-size: 14px; vertical-align: middle;}

.table.list-type1 {margin-top: 8px; border-top: 2px solid #7c91a2;}
.table.list-type1 thead tr th {border-left: 1px solid #e4e4e4; border-bottom: 1px solid #7c91a2; padding: 10px 6px; font-size: 13px; color: #333; letter-spacing: -1px;}
.table.list-type1 tbody tr td {border-left: 1px solid #e4e4e4; border-bottom: 1px solid #c6c6c6; font-size: 13px; color: #767676; letter-spacing: -1px; vertical-align: middle;}
.table.list-type1 thead tr th:first-child,
.table.list-type1 tbody tr td:first-child {border-left: 1; border-right: 1;}
.table.list-type1 td.brd-l {border-left: 1px solid #e5e5e5 !important;}
.table.list-type1 tr.total td {background: #f0f0f0;}
.table.list-type1 .check {width: 40px;}

.table.list-type2 {border-top: 2px solid #7c91a2;}
.table.list-type2 thead tr th {text-align: center; border: 1px solid #ccc; padding: 8px; font-size: 14px; font-weight: 400; text-align: center; background-color: #f1f4fb; vertical-align: middle;}
.table.list-type2 tbody tr th {text-align: center; border: 1px solid #ccc; font-size: 14px; font-weight: 400; background-color: #f1f4fb; vertical-align: middle;}
.table.list-type2 tbody tr td {text-align: center; border: 1px solid #ccc; font-size: 14px; vertical-align: middle;}
.table.list-type2 tbody tr.sub-head td {background-color: #f1f1f1;}

table.tbody-scroll {border-top: 0 !important;}
table.tbody-scroll tbody {
display: block;
height: 240px;
overflow: auto;
border-bottom: 1px solid #c6c6c6;
}
table.tbody-scroll thead,
table.tbody-scroll tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
table.tbody-scroll thead {width: calc( 100% - 17px )}
table.tbody-scroll thead th {border-top: 2px solid #7c91a2 !important;}

input[type="checkbox"] + label {margin-left: 4px;}




.memo-list {margin-top: 40px;}
.memo-list .memo-box {width: calc(20% - 10px); border: 1px solid #88adbf; margin-bottom: 15px;}
.memo-list .memo-box h4 {padding: 12px 0 14px 20px; font-size: 1vw; background: #dfebf1;}
.memo-list .memo-box textarea {height: 284px; width: calc(100% - 40px); resize: none; border: 0; margin: 15px 20px; background: #f8f8f8; vertical-align: top;}
.memo-list .memo-box2 {width: calc(50% - 10px); border: 1px solid #88adbf; padding-right: 0; padding-left: 0; margin-top: 20px;}
.memo-list .memo-box2 h4 {padding: 12px 0 14px 20px; font-size: 1vw; background: #dfebf1;}
.memo-list .memo-box2 textarea {height: 150px; width: calc(100% - 0px); resize: none; border: 0; background-color: #f8f8f8; vertical-align: top;}
.memo-list .memo-box3 {width: calc(100% - 80px); border: 1px solid #88adbf; padding-right: 0; padding-left: 0; margin-top: 10px; margin-left: 40px;  margin-right: 20px;}
.memo-list .memo-box3 h4 {padding: 12px 0 14px 20px; font-size: 1vw; background: #dfebf1;}
.memo-list .memo-box3 textarea {height: 150px; width: calc(100% - 0px); resize: none; border: 0; background-color: #f8f8f8; vertical-align: top;}
.memo-list .memo-box .photo-box {position: relative; display: flex; justify-content: center; align-items: center; height: 284px; width: calc(100% - 40px); border: 0; margin: 15px 20px; background: #f8f8f8;}
.memo-list .memo-box .photo-box .delete {position: absolute; right: 0; top: 0; border: 0; margin: 0 0; padding: 0 0; background: transparent;}
.memo-list .memo-box .photo-box img {width: 80%;}
.memo-list .memo-box .photo-box .add-photo {position: absolute; top: 50%; left: 50%; width: 80px; margin: -40px 0 0 -40px; cursor: pointer;}
.memo-list .memo-box .photo-box .add-photo img {width: 100%;}

.nav-tabs .nav-item .nav-link {min-width: 120px; height: 44px; border-radius: 0; color: #97a6b1; border-bottom: 1px solid #dce1e5; background-color: #f0f0f0;}
.nav-tabs .nav-item .nav-link.active {color: #000; border-bottom: 1px solid #fff; background-color: #fff;}

.table.list-type1 td.order-info {padding: 16px 22px 10px 22px;}
.order-no {font-size: 13px; color: #999;}
.order-no .num {display: inline-block; border: 1px solid #ed2b03; height: 23px; margin-left: 6px; line-height: 21px; min-width: 88px; text-align: center; color: #ed2b03; letter-spacing: -0.06em;}
.order-no .num2 {display: inline-block; border: 1px solid #000; height: 23px; margin-left: 6px; line-height: 21px; min-width: 88px; text-align: center; color: #000; letter-spacing: -0.06em;}
.order-no .num2.none {border-color: #ccc; color: #ccc;}
.hospital-info {display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #dce1e5;}
.hospital-info .hos-name {font-size: 18px; font-weight: 700; color: #000;}
.hospital-info .customer-name {color: #999;  font-size: 14px;}
.hospital-info .customer-name b {display: inline-block; vertical-align: top; margin-right: 4px; font-size: 15px; color: #000;}

.schedule-info {display: flex; justify-content: space-between; align-items: center; padding-top: 10px; font-size: 14px; color: #999;}

.scan-list {display: flex; justify-content: flex-start; align-items: center;}
.scan-list li {position: relative; flex: 0 1 80px; width: 80px; height: 80px; overflow: hidden; margin-right: 10px; border-radius: 8px;}
.scan-list li img {width: 100%; height: 100%;}
.scan-list li label {cursor: pointer;}
.scan-list li button.del {position: absolute; top: 4px; right: 4px; overflow: hidden; width: 24px; height: 24px; margin: 0 0; border: 0; border-radius: 100%; padding: 0 0; background: #fff;}
.scan-list li button.del img {width: 28px; height: 28px; margin: -2px 0 0 -2px;}

.modal-header {background-color: #4d515a; color: #fff;}
.modal-header .btn-close {background: #4d515a; color: #fff; opacity: 1;}
#itmModal {height: 700px;}
#csrModal {height: 400px;}
#itmModalSub {height: 700px;}
#custNmModal {height: 700px;}
#custNmModalSub {height: 700px;}
#loadingleModal {z-index: 10000;pointer-events: none;}
#scmPoEnrollFormModal {height: 700px;}
#partnerSearchFormModal{height: 700px;}


.modal-footer .btn-primary {width: 110px;}
.modal-footer .btn-light {width: 110px; background: #a7a7a7; color: #fff;}

.tooth-array .tooth label {display: inline-block; width: 40px; height: 49px; border-radius: 6px; border: 2px solid #9e9e9e; margin-left: -2px; background: #fff; text-align: center; line-height: 44px; border-top-left-radius: 18px;  border-top-right-radius: 18px; cursor: pointer;}
.tooth-array.bottom-tooth .tooth label {border-top-left-radius: 6px;  border-top-right-radius: 6px; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;}
.tooth-array .tooth input[type="checkbox"]:checked + label {background: #9cc6ff;}

.add-order {margin-top: -30px; text-align: center;}
.add-order button {border: 0; margin: 0 0; padding: 0 0; background: transparent;}
.order-fold {margin-top: -30px; text-align: center;}
.order-fold button {border: 0; margin: 0 0; padding: 0 0; background: transparent;}

.print-frame {margin: 12px 16px; border: 2px solid #000;}
.print-frame > .table.table-bordered tbody tr td:last-child,
.print-frame > .table.table-bordered tfoot tr td:last-child {border-right: 0;}
.print-frame > .table.table-bordered tbody tr th:first-child,
.print-frame > .table.table-bordered tbody tr td:first-child,
.print-frame > .table.table-bordered tfoot tr td:first-child {border-left: 0;}
.print-frame > .table.table-bordered {border-top: 1px solid #000 !important;}
.print-frame > .table.table-bordered tbody tr:first-child th,
.print-frame > .table.table-bordered tbody tr:first-child td {border-top: 0 !important;}
.print-header {padding: 30px 20px;}
.print-header .bar-code-area span {display: inline-block; width: 60px; text-align: center;}
.print-header .bar-code-area img {margin-top: 5px;}
.print-header h2 {font-size: 30px; color: #000;}

.table.table-etc1 th {background-color: #767171 !important; border: 1px solid #fff; border-bottom: 8px solid #fff; text-align: center !important; color: #fff;}
.table.table-etc1 td {background-color: #d0cece !important; border: 1px solid #fff; color: #000; text-align: center !important;}


.modal-footer {justify-content: center !important;}

.table td.text-start {text-align: left !important;}
.table td.text-center {text-align: center !important;}
.table td.text-end {text-align: right !important;}

.table.table-bordered tfoot tr td {background-color: #f8f8f8; border-top: 1px solid #000;}


.bold-heading {height: 36px; margin-bottom: 8px; text-align: center; background-color: #777671; color: #fff; line-height: 36px; font-size: 15px;}

@media screen and (max-width: 1600px) {
  /* .main-monitoring {flex: 1 1 autocalc(25% - 30px); margin-left: 30px; margin-bottom: 24px;  width: 100%;} */
  .main-monitoring .monitoring-box {flex: 1;/* calc(20% - 30px) */; margin-left: 30px; margin-bottom: 24px;}
  /* .monitoring-box {flex: 1 1 autocalc(25% - 30px); margin-left: 30px; margin-bottom: 24px; width: 20%;} */
 /*  .monitoring-box {width: 25%;} */
  .sub-monitoring .monitor-group + .monitor-group {margin-left: 0;}
  .top-navigation .nav-list > li {width: 100px;}
}

@media screen and (max-width: 1024px) {
  .wrapper {min-width: 100%;}
  .main-section {padding-left: 0px;}
  .top-navigation {display: none;}
  .search-field {width: 680px;}
  .monitoring-section .state-area {float: none; margin: 0 auto; flex: 0 1 100%;}
  .header .user-function .user-name {display: inline-block;}

  .aside-menu .nav-list > li > a.active + ul {display: none;}

  .monitoring-section .menulink-section {float: none; margin: 0 auto; width: 100%;}

  .monitoring-section .state-area .info-box {width: calc(50% - 8px); flex: 0 1 calc(50% - 8px);}

  .search-data-section {overflow: hidden; overflow-x: auto; padding: 40px 16px; margin: 0 24px;}
  .search-data-section .table {width: 200%;}
  .search-data-section .table .btn {padding: .375rem .25rem; font-size: 13px; width: 72px;}

  .table thead tr th {font-size: 14px;}
  .table tbody tr th,
  .table tbody tr td {font-size: 14px;}

  .table-scroll-area {overflow: hidden; overflow-x: auto;}
  .table-scroll-area .table {width: 200%;}

  .page-heading {margin-right: 24px;}
/*   .sub-section {padding-left: 80px;} */
/*   .sub-section .contents {margin-left: 24px;} */
/*   .sub-section .aside-menu {width: 220px;} */
/*   .sub-section .aside-menu.open {width: 80px;} */
/*   .sub-section .aside-menu .nav-list > li > a { */
/*     background: url(../images/subnav-arrow.png) no-repeat right 22px top 50%; */
/*     font-size: 16px; */
/*     white-space: nowrap; */
/*   } */
/*   .sub-section .aside-menu.open .nav-list > li > a {background: transparent;} */
/*   .sub-section .aside-menu .nav-list > li > a .menu {display: inline-block;} */
/*   .sub-section .aside-menu.open .nav-list > li > a .menu {display: none;} */
  .main-monitoring {padding-right: 24px; }
  .main-monitoring .monitoring-box {flex: 1; margin-left: 0; margin-bottom: 24px;}
  .sub-monitoring .monitor-group {float: none; margin-bottom: 24px;}
  .sub-monitoring .monitor-group + .monitor-group {margin-left: 0;}
}

.blue {color: #3090d6 !important;}
.orange {color: #ff6c00 !important;}
.black {color: #000 !important;}

.fs-15 {font-size: 15px !important;}
.fs-13 {font-size: 13px !important;}
.fs-12 {font-size: 12px !important;}

.form-control,
.form-select {border-radius: 0;}
.btn {border-radius: 2px;}
.btn-primary {background-color: #3090d6; border-color: #3090d6;}
.btn-secondary {background-color: #525f78; border-color: #525f78;}

.btn-outline-primary {border-color: #3090d6; color: #3090d6;}

.form-button-group .btn {min-width: 88px;}
.form-button-group .btn2 {min-width: 10%; text-align: center;}
.form-table-group {min-width: 88px;}
.form-table-group-oil {min-width: 350px; margin: 0px 20px 0px 0px;}
.form-table-group-tab {min-width: 200px;}
.form-table-group-tab2 {min-width: 1000px;}

.pagination i {vertical-align: -.227em;}
.page-item .page-link {color: #c0c5d1;}
.page-item.active .page-link {background-color: #707070; border-color: #707070;}
.page-item:first-child .page-link,
.page-item:last-child .page-link {border-radius: 0;}

.bd-s {border-left: 1px solid #e5e5e5 !important;}
.bd-e {border-right: 1px solid #e5e5e5 !important;}

/* 작업상태 태그 */
.state-tooltip {display: inline-block; vertical-align: middle; height: 16px; padding: 0 4px; color: #fff; background-color: #a22231; font-size: 11px; line-height: 14px;}
.order-confirm {display: inline-block; vertical-align: middle; height: 16px; padding: 0 4px; color: #fff; background-color: #1397d4; font-size: 11px; line-height: 14px;}
.state-gold {display: inline-block; vertical-align: middle; height: 16px; padding: 0 4px; color: #000; background-color: #ffa800; font-size: 11px; line-height: 14px;}



.state-tag {vertical-align: middle; display: inline-block; width: 60px; height: 26px; text-align: center; border-radius: 2px; font-size: 13px; line-height: 24px;}
.state-tag-1 {vertical-align: middle; display: inline-block; width: 120px; height: 26px; text-align: center; border-radius: 2px; font-size: 13px; line-height: 24px;}
.state-1 {border: 1px solid #1397d4; color: #1397d4; background-color: #fff;}
.state-2 {border: 1px solid #1397d4; color: #fff; background-color: #1397d4;}
.state-3 {border: 1px solid #002e66; color: #fff; background-color: #002e66;}
.state-4 {border: 1px solid #06a6b4; color: #fff; background-color: #06a6b4;}
.state-5 {border: 1px solid #25ad00; color: #fff; background-color: #25ad00;}
.state-6 {border: 1px solid #000000; color: #fff; background-color: #000000;}
.state-7 {border: 1px solid #ff8e08; color: #fff; background-color: #ff8e08;}
.state-8 {border: 1px solid #f10303; color: #fff; background-color: #f10303;}


@media print {
  table tr th, table tr td {border-color: #000 !important; color: #000 !important;}
}

/* cursor */
.cursor{position:fixed; top:-13px; left:-13px; z-index: 110; width:26px; height:26px; pointer-events:none; border:1px solid rgba(0,0,0,.2); border-radius:50%; color:#fff; transform:translate(-50%,-50%);
  transition:width 0.5s cubic-bezier(0.02, 0.02, 0.35, 1.08),height 0.5s cubic-bezier(0.02, 0.02, 0.35, 1.08);
}
.cursor.scale{transform:translate(-50%,-50%) scale(2); /* mix-blend-mode: difference; background:#fff; */}

/* more */
.cursor.more{display:flex; flex-direction: column; justify-content: center; align-items: center; width:100px; height:100px; box-shadow: -10px 0 15px 0 rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.2); border:0;}
.cursor.more:before{content:""; display:block; width:20px; height:20px; background:url(/asset/img/ico-cursor-more.png) no-repeat top left;}
.cursor.more:after{content:"자세히 보기"; display:block; margin-top:5px; font-size:13px; color:#fff;}

/* plus */
.cursor.plus{width:60px; height:60px; background: rgba(27, 27, 27, 0.15) url(/asset/img/ico-cursor-plus.png) no-repeat center; border:0;}

/* back */
.cursor.back{display:flex; flex-direction: column; justify-content: center; align-items: center; width:100px; height:100px; box-shadow: -10px 0 15px 0 rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.2); border:0;}
.cursor.back:before{content:""; display:block; width:20px; height:20px; background:url(/asset/img/ico-cursor-back.png) no-repeat top left;}
.cursor.back:after{content:"뒤로가기"; display:block; margin-top:5px; font-size:13px; color:#fff;}

/* play */
.cursor.play{display:flex; flex-direction: column; justify-content: center; align-items: center; width:100px; height:100px; border-radius:50%; font-size:13px; color:#fff; background:rgba(255,255,255,.3); text-align:center;}
.cursor.play:before{content:""; display:block; width:16px; height:17px; margin:0 auto 5px; background:url(/asset/img/ico-play-video.png) no-repeat top left;}
.cursor.play:after{content:"홍보영상 보기"; display:block; white-space: nowrap;}

/* drag */
.cursor.drag{display:flex; flex-direction: column; justify-content: center; align-items: center; width:100px; height:100px; border-radius:50%; font-size:13px; color:rgba(0,0,0,.4); background:rgba(255,255,255,.3); text-align:center;}
/* .cursor.drag:before{content:""; display:block; width:16px; height:17px; margin:0 auto 5px; background:url(/asset/img/ico-play-video.png) no-repeat top left;} */
.cursor.drag:after{content:"< DRAG >"; display:block; white-space: nowrap;}

/* cursor */
/* .cursor{position:fixed; top:-13px; left:-13px; pointer-events:none; mix-blend-mode: difference; z-index:1000;}
.cursor .c_pointer{width:26px; height:26px; border:1px solid rgba(0,0,0,.2); border-radius:50%;} */

/* hero area */
.page-hero{position:absolute; top:0; left:0; width:100%; height:600px; z-index: 0;}
.page-hero.fixed{position:fixed; height:100%;}

.btn-search {border: 0; margin: 0 0; padding: 0 0; vertical-align: middle;}

.form-inline input[type="text"].form-control {width: calc(100% - 29px);}
.form-inline label + input[type="text"].form-control {width: calc(50% - 29px);}

/* 페이지네이션 */
.tabulator .tabulator-footer {
   justify-content: center!important;
   display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .25rem;
}
.tabulator .tabulator-footer .tabulator-paginator, .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages {
   display: flex;
}
.tabulator .tabulator-footer .tabulator-page {
   position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #c0c5d1;
    background-color: #fff;
    border: 1px solid #dee2e6;
}
.tabulator .tabulator-footer .tabulator-page.active {
   background-color: #707070;
    border-color: #707070;
    color: #fff;
}

/* ************************css 추가사항********************************* */