@charset "utf-8";

/* 대시보드 */
.dashboard-wrap .cont {
  padding: 70px 50px 30px;
}
.left-area {
  float: left;
  position: relative;
  width: 640px;
  height: 100%;
}
.left-area .cont-box {
  clear: both;
}
.left-area .history-table .scroll-wrap {
  height: 280px;
}
.left-area .eq-area {
  margin-top: 20px;
  background: #fff;
  border: 1px solid #d2d8e9;
  box-shadow: 0 0 0 5px #e7e9f4;
  border-radius: 8px;
}
.left-area .eq-area.disabled { opacity: 0.5; pointer-events: none;}

.left-area .eq-area .img-area {
  position: relative;
  float: left;
  padding: 50px;
  text-align: center;
}
.left-area .eq-area .img-area img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}
.left-area .eq-area .img-area .svg {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  padding: 55px;
}
.left-area .eq-area .img-area h4 {
  position: relative;
  display: inline-block;
  font-size: 1.5rem;
  color: #444;
  margin-top: 30px;
  font-weight: 600;
}
.left-area .eq-area .img-area h4 .t-label {
  font-weight: 500;
  font-size: 12px;
  padding: 0 10px 1px 7px;
  background: #12144d;
  margin-right: 5px;
  border-radius: 20px;
  display: inline-block;
  color: #fff;
}
.left-area .eq-area .img-area h4 .t-label .material-icons {
  font-size: 13px;
  position: relative;
  top: 2px;
  margin-right: 3px;
}
.left-area .eq-area .img-area h4 .cctv {
  display: block;
  margin-top: 15px;
}
.left-area .eq-area .img-area h4 .cctv a.videocam {
  display: inline-block;
  border-radius: 30px;
  background: #e7e9f4;
  font-size: 12px;
  line-height: 25px;
  font-weight: 400;
  padding: 0 15px;
  color: #989ac6;
  margin: 0 2px;
  transition: background 0.25s, color 0.25s;
}

.left-area .eq-area .img-area h4 .cctv a.videocam span.material-icons {
  font-size: 19px;
  position: relative;
  top: 5px;
}
.left-area .eq-area .img-area h4 .cctv a.videocam:hover {
  background: #d3d8e8;
}

.left-area .eq-area .img-area h4 .cctv a.videocam:hover {
  background: #d3d8e8;
}

.left-area .eq-area .img-area .select-wrap {
  margin-bottom: 20px;
}
.left-area .eq-area .img-area .select-wrap .selectbox {
  float: none;
}
.left-area .eq-area .img-area .legend {
  margin-top: 20px;
}
.left-area .eq-area .img-area .legend ul li {
  position: relative;
  display: inline-block;
  color: #a5a8b5;
  padding-left: 15px;
  margin: 0 5px;
  font-size: 12px;
}
.left-area .eq-area .img-area .legend ul li:after {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: red;
}
.left-area .eq-area .img-area .legend ul li.lg-01:after {
  background: #4caf50;
}
.left-area .eq-area .img-area .legend ul li.lg-02:after {
  background: #ffbe00;
}
.left-area .eq-area .img-area .legend ul li.lg-03:after {
  background: #ff3b3b;
}
.status-list {
  text-align: center;
  padding-top: 30px;
}
.status-list ul li {
  position: relative;
  text-align: center;
  margin-bottom: 10px;
  background: #e7e9f4;
  border-radius: 8px;
  float: left;
  width: calc(50% - 10px);
  margin-right: 10px;
}
.status-list ul li:nth-child(2n) {
  margin-right: 0;
}
.status-list ul li .wrap {
  padding: 25px;
}
.status-list ul li .wrap h4 {
  font-size: 2.2rem;
  font-weight: 600;
}
.status-list ul li .wrap p {
  font-size: 1.1rem;
  margin-top: 7px;
  display: inline-block;
  padding: 0 10px 2px;
  border-radius: 10px;
}
.status-list ul li .wrap .normal {
  border: 1px solid #4caf50;
  color: #4caf50;
}
.status-list ul li .wrap .check {
  border: 1px solid #d89a00;
  color: #d89a00;
}
.status-list ul li .wrap .error {
  border: 1px solid #dc4747;
  color: #dc4747;
}
.left-area .eq-area .status-list .btn-list {
  text-align: center;
}
.left-area .eq-area .status-list .btn-list .left,
.left-area .eq-area .status-list .btn-list .right {
  display: inline-block;
  color: #12144d;
  cursor: pointer;
  transition: color 0.3s ease;
  border-radius: 50%;
  padding: 4px 4px 0 4px;
  background: #e7e9f4;
}
.left-area .eq-area .status-list .btn-list span.material-icons {
  font-size: 28px;
}
.left-area .eq-area .status-list .btn-list .left.off,
.left-area .eq-area .status-list .btn-list .right.off {
  color: #bbbed1;
  cursor: no-drop;
}
.left-area .eq-area .status-list .btn-list .left:not(.off):hover,
.left-area .eq-area .status-list .btn-list .right:not(.off):hover {
  color: #212d61;
}
.video-cam-wrap {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
}
.videocam-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 750px;
  height: 500px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: 0 0 50px rgba(17, 26, 89, 0.3);
  background: #fff;
  z-index: 999;
}
.video-cam-wrap.on {
  display: block;
}
.videocam-pop .video-area {
  width: 100%;
  height: 100%;
}
.videocam-pop a.close {
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -25px;
  color: #12144d;
  opacity: 0.7;
}
.videocam-pop a.close:hover {
  opacity: 0.9;
}
.videocam-pop a.close span {
  font-size: 40px;
}

.right-area {
  float: left;
  position: relative;
  width: calc(100% - 685px);
  margin-left: 45px;
  height: 100%;
}
.right-area .cont-title.tab {
  position: relative;
  width: 100%;
}
.right-area .cont-title.tab h4 {
  display: block;
}
.right-area .cont-title.tab a.more span.material-icons {
  font-size: 1.5rem;
  position: relative;
  top: 3px;
  margin-left: 4px;
}
.right-area .monitoring-table {
  height: 865px;
  overflow: hidden;
  margin-top: 10px;
}
.scroll-wrap .scroll-area.sticky-table {
  border-top: 1px solid #b6b8c3;
  margin-top: 10px;
}
.scroll-wrap.monitoring-table .scrollbar {
  margin-top: 50px;
}
.right-area .monitoring-table table {
  border-top: 0;
  margin-top: 0;
}
.right-area .monitoring-table table {
  position: relative;
}
.right-area .monitoring-table table thead {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2;
  background: #f6f7fc;
}
.right-area .monitoring-table table tbody tr {
  position: relative;
}
.right-area .monitoring-table table tbody tr .load-wrapp {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 11px;
  left: 60px;
  text-align: center;
}
.right-area .monitoring-table table tbody tr td span.status {
  position: relative;
  padding-left: 14px;
}
.right-area .monitoring-table table tbody tr td span.st01 {
  color: #4caf50;
}
.right-area .monitoring-table table tbody tr td span.st02 {
  color: #dc4747;
}
.right-area .monitoring-table table tbody tr td span.status:after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}
.right-area .monitoring-table table tbody tr td span.st01:after {
  background: #4caf50;
}
.right-area .monitoring-table table tbody tr td span.st02:after {
  background: #dc4747;
}
.right-area .monitoring-table table tbody tr.select {
  background: #d3d8e8;
}
.right-area .monitoring-table table tbody tr td span.material-icons {
  cursor: pointer;
}
.right-area .monitoring-table table tbody tr td i.fa-caret-up,
.right-area .monitoring-table table tbody tr td i.fa-caret-down {
  font-size: 15px;
  margin-left: 5px;
  opacity: 0.8;
}
.right-area .monitoring-table table tbody tr td i.fa-caret-up {
  color: #dc4747;
}
.right-area .monitoring-table table tbody tr td i.fa-caret-down {
  color: #7fdf83;
}
.right-area .monitoring-table table tbody tr td i.fa-minus {
  font-size: 11px;
  margin-left: 5px;
  opacity: 0.7;
}

/* empty */
.right-area .monitoring-table.empty {
  height: auto;
}
.right-area .monitoring-table.empty .scrollbar {
  display: none;
}
.right-area .monitoring-table .empty-area {
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 35px 10px;
  background: #eeeff6;
  border-radius: 8px;
  margin-top: 5px;
}
.right-area .monitoring-table .empty-area p {
  color: #b1b1b1;
}
.right-area .monitoring-table .empty-area span.material-icons {
  display: block;
  margin-bottom: 15px;
  font-size: 2.7rem;
}

.dashboard-wrap .normal-table table tbody tr {
  background: #e7e9f4;
  border-bottom: 4px solid #f6f7fc;
  transition: background 0.25s ease;
}
.dashboard-wrap .normal-table table tbody tr:hover {
  background: #d3d8e8;
}
.dashboard-wrap .normal-table table tbody tr td:first-child {
  border-radius: 8px 0 0 8px;
}
.dashboard-wrap .normal-table table tbody tr td:last-child {
  border-radius: 0 8px 8px 0;
}

.dashboard-wrap .normal-table table tbody tr td .table-button-area { position: relative;
  top: 2px;}
.dashboard-wrap .normal-table table tbody tr td .table-button-area .button-img { width: 12px; height: auto; opacity: 0.5; cursor: pointer;}

.dashboard-wrap .normal-table table tbody tr td .table-button-area .button-img:hover { opacity: 1;}

.letter {
  display: inline-block;
  font-size: 10px;
  color: #c1c1c1;
}

.load-6 .letter {
  animation-name: loadingF;
  animation-duration: 1.6s;
  animation-iteration-count: infinite;
  animation-direction: linear;
}

.l-1 {
  animation-delay: 0.48s;
}
.l-2 {
  animation-delay: 0.6s;
}
.l-3 {
  animation-delay: 0.72s;
}
.l-4 {
  animation-delay: 0.84s;
}
.l-5 {
  animation-delay: 0.96s;
}
.l-6 {
  animation-delay: 1.08s;
}
.l-7 {
  animation-delay: 1.2s;
}
.l-8 {
  animation-delay: 1.32s;
}
.l-9 {
  animation-delay: 1.44s;
}
.l-10 {
  animation-delay: 1.56s;
}

@keyframes loadingF {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 탭메뉴 */
ul.cont-tab {
  margin-top: 15px;
}

/* 뒤로 돌아가기 버튼 */
.back-btn {
  position: absolute;
  top: -3px;
  left: calc(100% + 20px);
}
.back-btn button {
  display: inline-block;
  border-radius: 3px;
  font-size: 11px;
  background: #fff;
  border: 0;
  padding: 3px 10px 4px 10px;
  font-weight: 600;
  border: 1px solid #d0d5dc;
  color: #858597;
  transition: border 0.2s;
}
.back-btn button:hover {
  border-color: #abaac8;
}
.back-btn button .material-icons {
  font-size: 14px;
  position: relative;
  top: 2px;
}


@media (max-width: 1700px) {
  .info-detail .info-table table tr td .search-txt-input.g-code {
    width: calc(100% - 13%);
  }
}


@media (max-width: 1500px) { 
  .info-detail .info-table table tr td .search-txt-input { width: calc(100% - 22%);}
  .tab-toggle-section { position: relative; top: -50px;}
  .info-detail .info-table table tr td .search-txt-input.g-code {
    width: calc(100% - 14%);
  }
}


@media (max-width: 1400px) {
  .left-area {  width: calc(100% - 55%); }
  .right-area { width: calc(100% - 50%); float: left; }
  .progess-wrap .porogess-text-wrap .progess-text { flex-direction: column;}
  .left-area .eq-area .img-area .select-wrap .selectbox { margin-right: 0;}
}


@media (max-width: 1280px) {
  .left-area { width: 350px; }
  .right-area { width: calc(100% - 395px); float: left; }

}

.sec-top-wrap {  position: absolute; bottom: 0px; right: 0; border: 0; margin: 0;}
.sec-top-wrap.top { position: absolute;bottom: 20px;right: 0;border: 0;margin: 0;}