@charset "UTF-8";
/****************************************/
/* *** public_html ***
/*  Name : byWIND
/*  PART : sub.css
/*  Version : 2.0
/*  Author : 이소망
/*  Modify : 
/****************************************/

/**
 ** Table 종류 [목록/등록/상세]
 * 0. base-table (기본테이블)
 * 1. list-form (목록) 
 * 2. registration-form (등록)
 * 3. view-form (상세)
*/

/*************************************
    base-table (기본테이블)
*************************************/
/* 모든 테이블 hover 그림자 효과 */
.base-table tbody tr:hover {
  box-shadow: 0 8px 11px -6px rgba(0, 0, 0, 0.1);
}
.base-table tbody tr:hover td {
  color: #334fd6;
}

/* tr-active 효과 */
.base-table tr.tr-active * {
  color: #334fd6;
  font-weight: 600;
}
.base-table tr.tr-active {
  box-shadow: 0 8px 11px -6px rgba(0, 0, 0, 0.1);
}

.base-table {
  overflow: overlay;
  font-family: var(--font-be-vietnam-pro);
}
.base-table table {
  width: 100%;
  text-align: left;
  font-weight: 300;
}

.base-table th {
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
}
.base-table th:not(.sort) {
  cursor: default;
}
.base-table td:not(.flexbox) {
  border-bottom: 1px solid var(--table-border);
}
.base-table td.flexbox.last {
  border-bottom: 1px solid var(--table-border);
}
.base-table tbody th[scope='row'] {
  background: #f7f7f7;
  font-size: 0.75rem;
}
.base-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 0 0.8rem;
  height: 36px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #a0a6ad;
  background: #f7f7f7;
}
.base-table tbody {
  height: 1px;
}
.base-table tbody:not(.hidden-form) {
  border-top: 2px solid var(--table-border);
}
.base-table tr.border-top {
  border-top: 2px solid #e1e1e1;
}
.base-table td {
  padding: 0.33rem 0.8rem;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  font-weight: 500;
  box-sizing: border-box;
  word-break: break-all;
}

/* 글씨 넘칠때 적용 */
.base-table td .overflow1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
} /*1줄컷*/
.base-table td .overflow2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
} /*2줄컷*/
.base-table td .overflow3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
} /*3줄컷*/

.base-table tbody th.head {
  border-right: 1px solid var(--table-border);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.base-table table .tit {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.base-table .case {
  color: #c8c8ca !important;
  font-size: 0.65rem;
}
.base-table .lst-item > *:not(:first-child)::before {
  content: '\f105';
  font-family: var(--lineawesome);
  font-size: 14px;
  font-weight: bold;
  padding-right: 5px;
}

.base-table .back {
  background: #f7f7f7;
}
.base-table tr.tr-disabled {
  background: #f8f8f8;
}
.base-table tr.tr-disabled:hover {
  box-shadow: none;
}
.base-table tr.tr-disabled td,
.base-table tr.tr-disabled:hover td {
  color: #bababf;
}

.base-table.visible-table {
  overflow: visible;
}
.base-table.visible-table td {
  overflow: visible;
}

/* custom-table1 */
.base-table.custom-table1 td.blank {
  padding: 0 !important;
  width: 20px;
}
.base-table.custom-table1 td.blank + td {
  padding: 0.6rem 0;
}

/* base-table2 */
.base-table2 table {
  border-collapse: initial;
}
.base-table2 thead::after {
  content: '';
  border-bottom: 3px solid var(--table-border);
}
.base-table2 thead th[scope='col'] {
  background: #e5e5eb;
  color: #7c8187;
  font-weight: 700;
  border-bottom: 2px solid #fff;
}
.base-table2 thead th.subtit {
  top: 36px;
  background: #f5f5f8;
  color: #a0a6ad;
}
.base-table2 thead th.border-left {
  border-left: 2px solid #fff;
}
.base-table2 thead th.border-right {
  border-right: 2px solid #fff;
}
.view-form .base-table2 th {
  padding: 0 1rem !important;
}

/* 추후 확인후 수정 예정 */
table .border-right {
  border-right: 1px solid #efeff1;
}
table .border-left {
  border-left: 1px solid #efeff1;
}

/**
  ※ 최상위 테이블 'base-table'의 속성들 상속받음
**/
tr.hidden-table.hide > td {
  display: none;
}
.hidden-table > td {
  height: 0px !important;
}
.hidden-table:hover .hidden-table-wrap table tr td {
  color: #777 !important;
}
.hidden-table-wrap thead tr:hover,
.hidden-table-wrap tbody tr:hover {
  box-shadow: none !important;
}
.hidden-table-wrap {
  margin: 25px;
}
.hidden-table-wrap table {
  text-align: center;
}
.hidden-table-wrap td {
  height: 54px;
}
.hidden-btn::before {
  content: '\f067';
  font-family: var(--lineawesome);
  font-size: 0.8rem;
  color: #333;
  font-weight: bold;
}
.hidden-btn.active::before {
  content: '\f068';
}

tr.hidden-table-bottom td {
  height: 10px;
  padding: 0;
  border-bottom: none !important;
}

/**
  ※ sort + "up" : 화살표↑
  ※ sort + "down" : 화살표↓
**/
table .sort {
  cursor: pointer;
}
table .sort::after,
table .sort.up::after,
table .sort.down::after {
  font-family: var(--xeicon);
  font-size: 0.7rem;
  color: #b3b6ba;
  display: inline-block;
  margin-left: 3px;
  vertical-align: middle;
}
table .sort::after {
  content: '\ea5d';
  transform: rotate(90deg);
}
table .sort.up::after {
  content: '\e945';
  transform: rotate(0);
  color: #475df1;
}
table .sort.down::after {
  content: '\e942';
  transform: rotate(0);
  color: #475df1;
}

/* center table */
.center-table th,
.center-table td {
  text-align: center;
}

/* 1. table-foot-area (table 아래 영역) */
.table-foot-area {
  position: relative;
  overflow: hidden;
  padding-top: 15px;
  min-height: 48px;
}

/* 1-1. 정렬 select */
.sort-length {
  float: left;
}
.sort-length .select-group {
  min-width: 85px;
  height: 33px;
}

/* 1-2. pager */
.pager {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
}
.pager > * {
  position: relative;
  display: inline-block;
  margin: 0 0.25rem;
  overflow: hidden;
  width: 25px;
  height: 25px;
  line-height: 25px;
  vertical-align: top;
  color: #a0a6ad;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 300;
  transition: color 0.3s;
}
.pager .active {
  font-weight: 700;
  color: #334fd6;
}
.pager .arr {
  position: relative;
  margin: 0 0.1rem;
}
.pager .arr.prev {
  margin-right: 0.5rem;
}
.pager .arr.next {
  margin-left: 0.5rem;
}
.pager .arr::before {
  content: '\f104';
  font-family: var(--lineawesome);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  font-size: 0.7rem;
  font-weight: bold;
  color: #a0a6ad;
}
.pager .arr.next::before {
  content: '\f105';
} /*다음*/

.pager .arr.frst::before {
  content: '\f100';
}
.pager .arr.last::before {
  content: '\f101';
}
.pager .arr.dot::before {
  content: '...';
}

/* 1-3. foot-btn */
.foot-btn {
  overflow: hidden;
  float: right;
}

/*************************************
    list-form (목록) - 추가됨
*************************************/
/* list-form
1. list-form으로 감싼 후 
2. 자식 table의 colgroup col style="width"값 설정
3. td안에 들어갈 긴 텍스트들을 p태그로 감싸면 (길어질것으로 예상되는것들도 포함)
4. 자동으로 말줄임 처리가 됩니다.
*/

.list-form .base-table td > p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

/*************************************
    registration-form (등록)
*************************************/
.register-write {
  display: inline-block;
}
.register-write .calendar-picker {
  height: 45px;
  line-height: 45px;
}
.registration-form .base-table tr:hover {
  box-shadow: none;
} /* 그림자 제거 */
.registration-form .base-table tbody tr:hover td:not(.case) {
  color: #777;
}
.registration-form .base-table th {
  border-bottom: 1px solid #efeff1;
  border-top: 1px solid #efeff1;
}
.registration-form .base-table tbody th,
.registration-form .base-table tbody th[scope='row'],
.registration-form .base-table td {
  padding: 0.6rem 1rem;
  min-height: 70px;
  height: 70px;
}
.registration-form .base-table td.map {
  padding: 1rem;
}

.base-table img + .register-write,
.base-table img + .input-group {
  margin-top: 0.8rem;
}
.row-btn-wrap {
  display: inline-block;
}
.row-btn-wrap em {
  margin-left: 18px;
}
.row-btn-wrap .btn3 {
  margin: 0 28px 0 8px;
}
.row-btn-wrap .checkbox-radio-group label {
  vertical-align: middle;
  margin-left: 5px;
}
.row-chk-wrap {
  display: inline-block;
  margin-left: 38px;
}
.row-chk-wrap em {
  display: inline-block;
}
.row-chk-wrap em:not(:last-child) {
  margin-right: 38px;
}
.row-chk-wrap .checkbox-radio-group label {
  vertical-align: middle;
  margin-left: 5px;
}
.row-select-wrap {
  position: absolute;
  right: 0;
  top: -26px;
}
.register-write + .unit {
  display: inline-block;
  margin-left: 5px;
  font-size: 14px;
  vertical-align: bottom;
  white-space: nowrap;
}
.register-write + .register-write {
  margin-left: 7px;
}
.select-group + .select-group {
  margin-left: 7px;
}
.select-group + .calendar-picker {
  margin-left: 7px;
}

.input-lst-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
}
.input-lst-wrap .input-group {
  width: 143px;
}
.input-lst-wrap .input-group + .input-group {
  margin-left: 16px;
}
.input-lst-wrap .hyphen {
  margin: 0 5px;
}

.value_period {
  margin-left: 14px;
  padding: 8px 14px;
  border-left: 1px solid #efeff1;
}
.value_period .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding: 0.3rem 0;
}

.value_period .delete-btn i {
  color: #777;
}
.value_period .add-btn i {
  color: #475df1;
}

/*************************************
    view-form (상세)
*************************************/
.view-form .base-table tr:hover {
  box-shadow: none;
} /* 그림자 제거 */
.view-form .base-table tbody tr:hover td {
  color: #777;
}
.view-form .base-table th {
  padding: 0.38rem 1rem;
  border-bottom: 1px solid #efeff1;
}
.view-form .base-table tbody th [scope='row'],
.view-form .base-table td {
  padding: 0.38rem 1rem;
}
.view-form .base-table td.map {
  padding: 1rem;
}
.view-form .base-table td.flexbox .tit {
  height: 40px;
  line-height: 40px;
}
.view-form .base-table td.flexbox.last .tit {
  border-bottom: none;
}
.view-form .base-table td > img {
  margin: 0.6rem 0;
}
.view-form .item-lst span {
  display: inline-block;
  min-width: 85px;
}

.detail-form {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #e9e9f0;
  min-height: auto;
}
.detail-form .left {
  width: calc(100% - 620px);
  padding-right: 36px;
}
.detail-form .right {
  width: 620px;
  padding-left: 36px;
  border-left: 1px solid #efeff1;
}
.detail-form textarea {
  width: 100%;
  color: #000;
  font: 15px var(--font-be-vietnam-pro);
}

.view-form .base-table td.description {
  height: 80px;
  vertical-align: top;
}

/* 참고영상,첨부파일
--------------------------------------------- */
.detail-info-wrap {
  padding-bottom: 20px;
  border-bottom: 1px solid #efeff1;
}
.detail-info-wrap li {
  line-height: 2;
}
.detail-info-wrap li .tit,
.detail-info-wrap li .txt {
  display: inline-block;
  font-size: 14px;
  font-family: var(--font-be-vietnam-pro);
  vertical-align: middle;
}
.detail-info-wrap li .tit {
  margin-right: 8px;
  min-width: 65px;
  color: #333;
  font-weight: 800;
}
.detail-info-wrap li .txt {
  font-weight: 500;
}
.detail-info-wrap li .totalTime::before {
  content: '';
  display: inline-block;
  margin: 0 7px;
  vertical-align: middle;
  width: 2px;
  height: 10px;
  background: #e6e6e6;
}
.detail-info-wrap li .totalTime strong {
  color: #334fd6;
}
.detail-info-wrap ~ .detail-cont-wrap {
  margin-top: 35px;
} /* 위에 detail-info-wrap 가 있을 시 */
.detail-cont-wrap:last-of-type {
  margin-bottom: 35px;
}
.detail-cont-wrap .tit {
  color: #222;
  border-bottom: 2px solid #e1e1e1;
  padding-bottom: 14px;
  font: 500 17px var(--font-be-vietnam-pro);
}
.detail-cont-wrap.attach .tit {
  border-bottom: none;
}
.detail-cont-wrap ul.download-lst {
  margin: 0;
  max-height: 150px;
  border-bottom: 1px solid #efeff1;
  overflow: auto;
}
.detail-cont-wrap ul.download-lst li {
  position: relative;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  padding: 0 0 0 38px;
}
.download-lst .attach-video,
.download-lst .download-btn {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: #898989;
  cursor: pointer;
}
.download-lst .attach-video:hover,
.download-lst .download-btn:hover {
  color: #000;
}
.download-lst .attach-video i,
.download-lst .download-btn i {
  vertical-align: middle;
}
.download-lst .attach-video i {
  font-size: 22px;
}
.download-lst .download-btn i {
  font-size: 18px;
}
.detail-graph-wrap {
  margin: 35px 0;
}
.detail-graph-wrap .graph {
  float: left;
  width: 49%;
  box-sizing: border-box;
}
.detail-graph-wrap .graph:not(:last-child) {
  margin-right: 2%;
}
.detail-graph-wrap .graph .box {
  height: 508px;
  border: 1px solid #eaeaf2;
}

/*************************************
    공통
*************************************/
/* 상단 범례 */
.legend-custom {
  text-align: right;
}
.legend-custom li {
  display: inline-block;
}
.legend-custom li + li {
  margin-left: 25px;
}
.legend-custom li i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.legend-custom li span {
  font-size: 16px;
  color: #222;
  font-weight: 500;
}

/* ================================================================= */

/*************************************
    1. 모니터링[monitor]
*************************************/

/* 모니터링[monitor] progress nav
--------------------------------------------- */
.progress-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  margin-top: 35px;
  width: 100%;
}
.progress-nav.fixed {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  padding: 25px 50px 0px;
  background: #fff;
  margin-top: 0;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}
.progress-nav.fixed li,
.progress-nav.fixed li .num {
  box-shadow: 0 4px 12px -5px rgb(0 0 0 / 15%);
}
.progress-nav li {
  position: relative;
  cursor: pointer;
}
.progress-nav li:not(.finish-btn) {
  flex: 1;
}
.progress-nav li.finish-btn {
  width: 50px;
}
.progress-nav li.finish-btn i {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.98rem;
  color: #626262;
}
.progress-nav .step3 .stepbar {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.progress-nav .num {
  position: absolute;
  left: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 51px;
  height: 39.5px;
  line-height: 39.5px;
  text-align: center;
  background: #fff;
  color: #555;
  border-radius: 5px;
  border: 1px solid #ebebed;
}
.progress-nav .stepbar {
  display: flex;
  padding-left: 77px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #ebebed;
}
.progress-nav .stepbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 0;
  height: 100%;
  background: #475df1;
  border-radius: 8px;
}
.progress-nav li.on .stepbar::before {
  width: 100%;
  transition: width 800ms cubic-bezier(0.57, 0.26, 0, 0.74);
}
.progress-nav .txt {
  color: #3a3952;
  font-size: 14px;
  font-weight: 600;
}
.progress-nav li.on .num {
  background: #1d41cc;
  color: #fff;
  border-color: #1d41cc;
  height: 38px;
  line-height: 38px;
  box-shadow: 0 4px 12px -5px rgb(0 0 0 / 15%);
}
.progress-nav li.finish-btn.on i {
  color: #fff;
}
.progress-nav li.on .txt {
  color: #fff;
}

/* 모니터링[monitor] progress 공통 레이아웃
--------------------------------------------- */
.progress-cont {
  overflow: hidden;
}
.progress-cont ~ .progress-cont {
  margin-top: 50px;
}
.progress-cont section:not(:last-child) {
  margin-bottom: 30px;
}
.progress-cont .section1 article {
  padding-top: 45px;
}
.progress-cont .section2 article,
.progress-cont .section3 article {
  padding-top: 21px;
}
.progress-cont article h3 {
  font-weight: 500;
}
.progress-cont .top-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.progress-cont .tit-area {
  display: flex;
  align-items: center;
  position: relative;
}
.progress-cont .tit-area::before {
  content: '';
  margin-right: 10px;
  width: 34px;
  height: 34px;
  line-height: 33px;
  border-radius: 50%;
  text-align: center;
  font-family: var(--xeicon);
  font-size: 1rem;
  color: #fff;
  background: #475df1;
}
.progress-cont .section1 .tit-area::before {
  content: '\ea2d';
} /*section1*/
.progress-cont .section2 .tit-area::before {
  content: '\ea98';
} /*section2*/
.progress-cont .section3 .tit-area::before {
  content: '\e99b';
} /*section3*/
.progress-cont .tit-area h2 {
  font-size: 40px;
  font-weight: 500;
}
.progress-cont .tit-area h2 .th1 {
  color: #a7a7a7;
}
.progress-cont .tit-area h2 .th2 {
  color: #434343;
}
.progress-cont .section2 .tit-area h2,
.progress-cont .section3 .tit-area h2 {
  color: #434343;
  font-weight: 600;
}
.progress-cont .tit-area .alarm-name {
  display: flex;
  align-items: center;
  font-size: 27px;
  font-weight: 700;
  color: #434343;
}
.progress-cont .tit-area .alarm-name::before {
  content: '';
  margin: 0 15px 0 19px;
  width: 9px;
  height: 34px;
  background: #475cef;
  transform: skew(-20deg);
}
.progress-cont .tit-area .date-time {
  padding: 7px 0 0 20px;
}
.progress-cont .tit-area .date-time * {
  font-size: 14px;
  font-weight: 500;
}
.progress-cont .tit-area .time {
  padding-left: 10px;
}
.progress-cont .top-area .left .txt {
  padding-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #5d5d5d;
}

/* 모니터링[monitor] progress - section1 
--------------------------------------------- */
.section1 .top-area .info-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.section1 .top-area .info-wrap .info1,
.section1 .top-area .info-wrap .info2 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}
.section1 .top-area .info-wrap .info1 {
  align-items: flex-end;
}
.section1 .top-area .info-wrap .info2 {
  gap: 1rem;
}
.section1 .top-area .info-wrap .tb-model {
  padding-right: 13px;
  color: #1d41cc;
  font-size: 40px;
  letter-spacing: -1.5px;
}
.section1 .top-area .info-wrap .tb-model::before {
  content: '\eb59';
  font-family: var(--xeicon);
  font-size: 1.2rem;
  color: #8597ff;
  margin-right: 3px;
}
.section1 .top-area .info-wrap .location {
  padding-bottom: 2px;
}
.section1 .top-area .info-wrap .location li {
  font-size: 16px;
  font-weight: 500;
  color: #5d5d5d;
}

.weather-lst * {
  font-size: 16px;
  font-weight: 700;
  color: #8597ff;
}
.weather-lst .highest {
  color: #f86d6b;
}
.weather-lst .highest * {
  color: #f86d6b;
}
.weather-lst .bar {
  display: inline-block;
  vertical-align: middle;
  font-size: 0.6rem;
  font-weight: 800;
  color: #a7a7a7;
}
.weather-lst .txt {
  padding-right: 10px;
  font-weight: 500;
  color: #5d5d5d;
}
.weather-lst .icon::before {
  content: '*';
  font-family: var(--xeicon);
  font-size: 1.3rem;
  color: #a7a7a7;
  font-weight: initial;
  display: inline-block;
  vertical-align: sub;
}
.weather-lst .icon1::before {
  content: '\eba0';
}
.weather-lst .icon2::before {
  content: '\ebaa';
}
.weather-lst .icon3::before {
  content: '\ebae';
}
/* @parkjk */
/* .weather-lst .icon3::after {content: "\e90a"; font-family: 'xeicon'; font-size: 1.1rem; color: #8597ff; font-weight: initial; display: inline-block; vertical-align: sub;} */
.weather-lst .wind-direction::after {
  content: '\e90a';
  font-family: var(--xeicon);
  font-size: 1.1rem;
  color: #8597ff;
  font-weight: initial;
  display: inline-block;
  vertical-align: sub;
}
.weather-lst .S::after {
  transform: rotate(0deg);
}
.weather-lst .SSW::after {
  transform: rotate(22.5deg);
}
.weather-lst .SW::after {
  transform: rotate(45deg);
}
.weather-lst .WSW::after {
  transform: rotate(67.5deg);
}
.weather-lst .W::after {
  transform: rotate(90deg);
}
.weather-lst .WNW::after {
  transform: rotate(112.5deg);
}
.weather-lst .NW::after {
  transform: rotate(135deg);
}
.weather-lst .NNW::after {
  transform: rotate(157.5deg);
}
.weather-lst .N::after {
  transform: rotate(180deg);
}
.weather-lst .NNE::after {
  transform: rotate(202.5deg);
}
.weather-lst .NE::after {
  transform: rotate(225deg);
}
.weather-lst .ENE::after {
  transform: rotate(247.5deg);
}
.weather-lst .E::after {
  transform: rotate(270deg);
}
.weather-lst .ESE::after {
  transform: rotate(292.5deg);
}
.weather-lst .SE::after {
  transform: rotate(315deg);
}
.weather-lst .SSE::after {
  transform: rotate(337.5deg);
}
/* //@parkjk */

.head-wrap {
  display: flex;
  align-items: baseline;
  padding-bottom: 10px;
}
.head-wrap h3 {
  padding-bottom: 0 !important;
}
.article1-1 .head-wrap {
  justify-content: space-between;
}
.article1-1 .head-wrap .toggle {
  width: 27px;
  height: 27px;
  border-radius: 3px;
  border: 1px solid #dcdcdc;
  text-align: center;
  line-height: 27px;
  display: inline-block;
  transition: all 0.3s;
}
.article1-1 .head-wrap .toggle::before {
  content: '\f068';
  font-family: var(--lineawesome);
  font-size: 0.8rem;
  font-weight: bold;
  color: #777;
} /* - 아이콘*/
.article1-1 .head-wrap .toggle.active::before {
  content: '\f067';
} /* + 아이콘*/
.article1-1 .go-btn i {
  vertical-align: top;
  font-size: 1.15rem;
  color: #777;
}
.article1-2 .base-table tbody {
  border-top: none;
}
.article1-2 .base-table tbody th[scope='row'] {
  background: #f6f7fa;
  text-align: center;
}
.article1-2 table {
  border: 1px solid #f4f4f4;
}
.article1-2 table td {
  padding: 0.8rem 1.5rem !important;
  font-weight: 600;
  line-height: 1.5;
}
.article1-2 table span {
  color: #5d5d5d;
}
.article1-2 .reset-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
}
.article1-2 .reset-area.output .inner {
  width: 100%;
}
.article1-2 .reset-area .inner {
  display: flex;
  align-items: center;
  padding: 0 22px;
  width: calc(100% - 80px);
  height: 57px;
  background: #f6f7fa;
  border-radius: 3px;
}
.article1-2 .reset-area .tit {
  font-size: 12px;
  margin-right: 5px;
}
.article1-2 .reset-area .d2 .tit {
  margin-right: 13px;
}
.article1-2 .reset-area .d2 {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.article1-2 .reset-area .d2.d2-view span {
  padding-top: 3px;
  font-family: var(--font-be-vietnam-pro);
  font-weight: 700;
  font-size: 14px;
  color: #5d5d5d;
}
.article1-2 .reset-area .d2.d2-view span ~ * {
  margin-left: 4px;
}

.article1-3 ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.article1-3 ul li {
  position: relative;
  padding: 15px;
  height: 490px;
  background: #fff;
  border: 1px solid #e3e3e4;
  border-left: none;
  border-right: none;
  border-top-width: 3px;
}
.article1-3 ul li img {
  display: block;
  margin: auto;
}
.article1-3 ul li:nth-child(1) {
  width: 30%;
}
.article1-3 ul li:nth-child(2) {
  width: 50%;
}
.article1-3 ul li:nth-child(3) {
  width: 20%;
}

.article1-4 .sensor-item-area {
  display: flex;
  align-items: center;
}
.article1-4 .sensor-lst-wrap {
  position: relative;
  display: flex;
  width: calc(100% - 207px);
  height: 57px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #f6f7fa;
}
.article1-4 .sensor-lst {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 28px;
  padding: 0 12px;
  border-radius: 3px;
}

.article1-4 .sensor-lst li {
  position: relative;
  flex: 0 0 auto;
  border-radius: 30px;
  cursor: pointer;
  border: 2px solid #fff;
  background: #fff;
}
.article1-4 .sensor-lst li span {
  padding: 0 15px 0 10px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  color: #777;
  font-weight: 600;
}
.article1-4 .sensor-lst li span::before {
  content: '\f058';
  font-family: var(--lineawesome);
  font-size: 1rem;
  display: inline-block;
  vertical-align: middle;
  padding-right: 7px;
}
/* @parkjk 수정 */
/* .article1-4 .sensor-lst li.type1 {border-color: #475df1;} */
/* .article1-4 .sensor-lst li.type1 span {color: #475df1;} */
/* .article1-4 .sensor-lst li.type1 span::before {color: #475df1;} */
/* .article1-4 .sensor-lst li.type2 {border-color: #f27e0d;} */
/* .article1-4 .sensor-lst li.type2 span {color: #f27e0d;} */
/* .article1-4 .sensor-lst li.type2 span::before {color: #f27e0d;} */
/* .article1-4 .sensor-lst li.type3 {border-color: #ee2a82;} */
/* .article1-4 .sensor-lst li.type3 span {color: #ee2a82;} */
/* .article1-4 .sensor-lst li.type3 span::before {color: #ee2a82;} */
/* .article1-4 .sensor-lst li.type4 {border-color: #59c1d3;} */
/* .article1-4 .sensor-lst li.type4 span {color: #59c1d3;} */
/* .article1-4 .sensor-lst li.type4 span::before {color: #59c1d3;} */
.article1-4 .sensor-lst li.type0 {
  border-color: #777;
}
.article1-4 .sensor-lst li.type0 span {
  color: #777;
}
.article1-4 .sensor-lst li.type0 span::before {
  color: #777;
}
.article1-4 .sensor-lst li.type1 {
  border-color: #475cef;
}
.article1-4 .sensor-lst li.type1 span {
  color: #475cef;
}
.article1-4 .sensor-lst li.type1 span::before {
  color: #475cef;
}
.article1-4 .sensor-lst li.type2 {
  border-color: #cb8b00;
}
.article1-4 .sensor-lst li.type2 span {
  color: #cb8b00;
}
.article1-4 .sensor-lst li.type2 span::before {
  color: #cb8b00;
}
.article1-4 .sensor-lst li.type3 {
  border-color: #ff1b00;
}
.article1-4 .sensor-lst li.type3 span {
  color: #ff1b00;
}
.article1-4 .sensor-lst li.type3 span::before {
  color: #ff1b00;
}
.article1-4 .sensor-lst li.type4 {
  border-color: #258b94;
}
.article1-4 .sensor-lst li.type4 span {
  color: #258b94;
}
.article1-4 .sensor-lst li.type4 span::before {
  color: #258b94;
}
.article1-4 .sensor-lst li.type5 {
  border-color: #c592e5;
}
.article1-4 .sensor-lst li.type5 span {
  color: #c592e5;
}
.article1-4 .sensor-lst li.type5 span::before {
  color: #c592e5;
}

.article1-4 .sensor-lst li.inactive {
  border-color: #e0e0e0;
}
.article1-4 .sensor-lst li.inactive span {
  color: #e0e0e0;
}
.article1-4 .sensor-lst li.inactive span::before {
  color: #e0e0e0;
}
/* //@parkjk 수정 */

.article1-4 .sensor-item-area .add-btn {
  margin-left: 10px;
  padding: 0 19px;
  white-space: nowrap;
}
.article1-4 .sensor-item-area .add-btn i {
  font-size: 0.7rem;
}
.article1-4 .sensor-item-area .fixed-wrap {
  padding: 0 14px;
  height: 57px;
  line-height: 57px;
  background: #f6f7fa;
  text-align: right;
}
.article1-4 .sensor-item-area .fixed-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: #7f7f7f;
  text-align: center;
}
.article1-4 .sensor-item-area .fixed-icon i {
  color: #fff;
}

.article1-4 .sensor-lst .del-btn {
  position: absolute;
  right: -6px;
  top: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #5d5d5d;
}
.article1-4 .sensor-lst .del-btn::after {
  content: '\f00d';
  font-family: var(--lineawesome);
  font-size: 0.8rem;
  font-weight: bold;
  font-size: 0.5rem;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.article1-4 .sensor-lst .reset-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: #353d6b;
  text-align: center;
}
.article1-4 .sensor-lst .reset-btn i {
  color: #fff;
  transform: rotate(171deg) rotateX(187deg) translateY(1px);
}
.chart-area {
  position: relative;
  padding-top: 30px;
}
/* @parkjk */
/* .chart-area .legend-wrap {position: absolute; right: 0;} */
.chart-area .legend-wrap {
  display: block;
  text-align: right;
}
/* //@parkjk */
.chart-area .legend-wrap span {
  display: inline-block;
  margin-left: 25px;
  font-size: 13px;
  font-weight: 600;
  color: #5d5d5d;
  cursor: default;
}
.chart-area .legend-wrap span::before {
  content: '';
  font-family: var(--xeicon);
  font-size: 0.95rem;
  display: inline-block;
  vertical-align: middle;
  padding-right: 4px;
}
.chart-area .legend-wrap span.icon1::before {
  content: '\ea1e';
  color: #f8554e;
}
.chart-area .legend-wrap span.icon2::before {
  content: '\e99b';
  color: #8597ff;
}
.chart-area .legend-wrap span.icon3::before {
  content: '\ea97';
  color: #5ab97e;
}
.chart-area .legend-wrap .capture-btn:hover {
  background: #475df1;
  color: #fff;
  border-color: #475df1;
}
.chart-area .chart-graph {
  padding-top: 43px;
}
.chart-graph img {
  width: 100%;
}

/* @parkjk - 추가 */
/* 알람발생 */
.chart-area .legend-wrap span.status1::before {
  content: '\e9ab';
  color: #f8554e;
}
/* 계획완료 */
.chart-area .legend-wrap span.status2::before {
  content: '\e9a4';
  color: #e89253;
}
/* 작업시작 */
.chart-area .legend-wrap span.status3::before {
  content: '\e99b';
  color: #475df1;
}
/* 작업완료 */
.chart-area .legend-wrap span.status4::before {
  content: '\ea8c';
  color: #4ca672;
}
/* 처리완료 */
.chart-area .legend-wrap span.status5::before {
  content: '\e92c';
  color: #7f8192;
}
/* //@parkjk - 추가 */

/* 모니터링[monitor] progress - section2 
--------------------------------------------- */
.section2 .top-area .check-wrap {
  padding: 10px 0 0 26px;
}
.section2 .top-area label {
  display: inline-block;
  font-size: 15px;
  color: #363636;
  cursor: pointer;
}
.section2 .top-area label,
.section2 .top-area input[type='checkbox'] {
  cursor: pointer;
}
.section2 .top-area input[type='checkbox']::before {
  content: '\f058';
  font-family: var(--lineawesome);
  font-size: 22px;
}
.section2 .top-area input[type='checkbox']:checked {
  color: #4052f0 !important;
}
.section2 .top-area input[type='checkbox']:checked + label {
  color: #4052f0;
}
.plan-board1 .base-table tbody th.bright {
  background: #f2f3fe;
}

.current-lst {
  display: flex;
  align-items: center;
  margin-left: 5px;
}
.current-lst .badge-custom {
  padding: 0 10px;
}
.current-lst i.la-plus {
  font-size: 0.5rem;
}
.current-lst i.xi-check-thin {
  font-size: 0.65rem;
}

.plan-history li {
  display: flex;
  align-items: center;
  height: 66px;
  line-height: 66px;
}
.plan-history li:not(:first-child) {
  margin-top: 8px;
}
.plan-history li .inner {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #f5f5f8;
  border-radius: 3px;
  padding: 0 30px;
  height: inherit;
}
.plan-history li.add {
  height: 53px;
  line-height: 53px;
}
.plan-history li.add .inner {
  justify-content: center;
  align-items: center;
}
.plan-history .front strong,
.plan-history .front span {
  color: #424242;
  font-size: 17px;
}
.plan-history .front span {
  padding-left: 28px;
}
.plan-history .front span::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin-right: 28px;
  width: 2px;
  height: 19px;
  background: #d3d4d7;
}
.plan-history .front .mark {
  display: inline-block;
  vertical-align: middle;
  background: #cfd0dc;
  color: #5a5a5a;
  padding: 0 6px;
  height: 17px;
  line-height: 17px;
  border-radius: 3px;
  font-size: 12px;
  margin-left: 10px;
  cursor: default;
}
.plan-history .check-btn {
  display: inline-block;
  vertical-align: middle;
}
.plan-history .check-btn::before {
  content: '\f058';
  font-family: var(--lineawesome);
  font-size: 1.2rem;
  font-weight: bold;
  color: #acacac;
  margin-right: 16px;
}
.plan-history .end .date {
  margin-right: 18px;
  color: #898989;
}

.plan-history .common-btn {
  padding: 3px 10px;
  font-size: 13px;
  color: #828282;
  border: 1px solid #dcdcdc;
  border-radius: 15px;
  background: #fff;
}
.plan-history .common-btn ~ .common-btn {
  margin-left: 8px;
}
.plan-history .common-btn::before {
  content: '';
  font-family: var(--lineawesome);
  font-size: 0.8rem;
  font-weight: bold;
  display: inline-block;
  padding-right: 3px;
}
.plan-history .modify-btn::before {
  content: '\f303';
}
.plan-history .del-btn::before {
  content: '\f2ed';
}

.plan-history li .side-btn {
  display: inline-block;
  width: 0;
  height: 100%;
  background: #475df1;
  color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 14px;
  transition: width 0.3s, visibility 0.3s;
  visibility: hidden;
}
.plan-history li.active .side-btn {
  visibility: visible;
  margin-left: 7px;
  width: 96px;
}
.plan-history li.active .check-btn::before {
  color: #475df1;
}
.no-content .cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  height: 182px;
  border: 1px solid #f5f5f8;
}
.no-content span {
  color: #5d5d5d;
}
.no-content.disabled {
  cursor: default;
  pointer-events: none;
  touch-action: none;
}
.no-content.disabled span {
  color: #b9b9b9;
}
.no-content.disabled a {
  background: #d0d0d0;
  color: #a2a1a1;
  pointer-events: none !important;
  touch-action: none;
}

/* 모니터링[monitor] progress - section3 
--------------------------------------------- */
.section3 .tit-area .mark {
  padding: 0 12px;
  min-width: 39px;
  height: 39px;
  line-height: 39px;
  background: #353d6b;
  color: #fff;
  border-radius: 21px;
  text-align: center;
  font-size: 15px;
}
.section3 .tit-area > div {
  margin-left: 12px;
}

.report-history {
  cursor: default;
}
.report-history .chk-btn {
  color: #c7c7dd;
  transition: all 0.3s;
}
.report-history .chk-btn i {
  font-size: 23px;
}
.report-history .mark {
  display: inline-block;
  vertical-align: middle;
  min-width: 76px;
  height: 17px;
  line-height: 19px;
  background: #7f8192;
  color: #fff;
  border-radius: 15px;
  text-align: center;
  font-size: 12px;
  transition: all 0.3s;
}
.report-history tr:hover .mark {
  background: #3a54e7;
}
.report-history tr:hover .btns,
.report-history tr:hover .chk-btn {
  color: #3a54e7 !important;
}

.report-history tr.active td,
.report-history tr.active .btns,
.report-history tr.active .chk-btn {
  color: #3a54e7;
}
.report-history tr.active .mark {
  background: #3a54e7;
}

/* 모니터링[monitor] 센서데이터 설정 
--------------------------------------------- */
.sensor-cont .tab2 {
  border-top: 1px solid #efeff1;
  border-bottom: 3px solid #e1e1e1;
}
.sensor-cont .fixed-search-form {
  margin: 30px 0 -19px;
}
.sensor-cont .tab-content {
  padding: 14px 0 0;
}
.sensor-cont .inner {
  display: flex;
  align-items: center;
  gap: 25px;
}
.sensor-cont .inner > div {
  height: 515px;
  border-top: 1px solid #e3e3e4;
  border-bottom: 1px solid #e3e3e4;
}
.sensor-cont .cont1 {
  position: relative;
  width: calc(100% - 55%);
  overflow: hidden;
}
.sensor-cont .cont2 {
  padding: 14px;
  width: 55%;
  overflow-y: auto;
}
.sensor-cont ~ .sensor-cont {
  margin-top: 35px;
}
.sensor_table ~ .sensor_table {
  margin-top: 15px;
}
.sensor-cont.real-time .head-wrap {
  justify-content: space-between;
}
.sensor-cont.real-time .btn10 i {
  color: #777;
}
.sensor_table .register-write {
  width: 100%;
}
.sensor_table .register-write .input-group {
  min-width: auto;
}
.sensor_table table {
  border: 1px solid #efeff1;
}
.sensor_table thead th {
  position: relative;
  padding: 0 0.8rem;
  height: 37px;
  color: #363636;
  background: #f4f5f7;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
  border-top: 2px solid #ebebed;
  border-bottom: 1px solid #ebebed;
}
.sensor_table td {
  padding: 0.6rem 0.8rem;
  height: 65px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  font-weight: 500;
  box-sizing: border-box;
  word-break: break-all;
  border-bottom: 1px solid #efeff1;
  border-left: 1px solid #efeff1;
}
.sensor_table td:first-child {
  border-left: none;
}
.sensor_table td.tit:not(:first-child) {
  border-left-width: 2px;
}

.sensor_table .util-wrap {
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
}
.sensor_table .util-wrap .unit {
  padding-right: 15px;
  font-size: 13px;
  color: #777;
}
.sensor_table .util-wrap .unit span {
  padding-left: 3px;
}
.sensor_table .util-wrap .btns i {
  font-size: 24px;
  line-height: 1.3;
  color: #000;
}

.sensor_table .output-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.sensor_table .output-wrap span {
  color: #5d5d5d;
  display: inline-block;
}
.sensor_table .output-wrap .num {
  font-size: 20px;
  margin-right: 7px;
  font-weight: 600;
}
.sensor_table .output-wrap .unit {
  font-size: 14px;
}
.sensor_table .output-wrap .bar {
  position: relative;
  margin-left: 10px;
  width: 11px;
  height: 29px;
  border-radius: 4px;
  background: #cbcdd2;
}
.sensor_table .output-wrap.warn .bar {
  background: #f8554e;
}
.sensor_table .output-wrap.warn .bar::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  animation: spread 2s infinite both;
  border-radius: 4px;
}
.sensor_table .output-wrap.warn .num {
  color: #c92018;
}

@keyframes spread {
  0% {
    box-shadow: 0px 0px 10px rgba(248, 85, 78, 0.6);
  }
  100% {
    box-shadow: 0px 0px 18px rgba(248, 85, 78, 0.8);
  }
}

.sensor-check {
  display: inline-block;
}
.sensor-check label {
  cursor: pointer;
}
.sensor-check input[type='checkbox']:checked + label {
  font-weight: 600;
}
/* @parkjk 수정 */
/* .sensor-check.model1 input[type="checkbox"]:checked + label {color: #59b7c7;} */
/* .sensor-check.model2 input[type="checkbox"]:checked + label {color: #475df1;} */
/* .sensor-check.model3 input[type="checkbox"]:checked + label {color: #ee2a82;} */
.sensor-check.model0 input[type='checkbox']:checked + label {
  color: #777;
}
.sensor-check.model1 input[type='checkbox']:checked + label {
  color: #475cef;
}
.sensor-check.model2 input[type='checkbox']:checked + label {
  color: #cb8b00;
}
.sensor-check.model3 input[type='checkbox']:checked + label {
  color: #ff1b00;
}
.sensor-check.model4 input[type='checkbox']:checked + label {
  color: #258b94;
}
.sensor-check.model5 input[type='checkbox']:checked + label {
  color: #c592e5;
}
/* //@parkjk 수정 */

.sensor-check input[type='checkbox']:checked + label::before {
  content: '\f058';
  font-family: var(--lineawesome);
  font-size: 1.2rem;
  color: #777;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  margin-right: 6px;
}
/* .sensor-check.model1 input[type="checkbox"]:checked + label::before {color: #59b7c7;} */
/* .sensor-check.model2 input[type="checkbox"]:checked + label::before {color: #475df1;} */
/* .sensor-check.model3 input[type="checkbox"]:checked + label::before {color: #ee2a82;} */
.sensor-check.model0 input[type='checkbox']:checked + label::before {
  color: #777;
}
.sensor-check.model1 input[type='checkbox']:checked + label::before {
  color: #475cef;
}
.sensor-check.model2 input[type='checkbox']:checked + label::before {
  color: #cb8b00;
}
.sensor-check.model3 input[type='checkbox']:checked + label::before {
  color: #ff1b00;
}
.sensor-check.model4 input[type='checkbox']:checked + label::before {
  color: #258b94;
}
.sensor-check.model5 input[type='checkbox']:checked + label::before {
  color: #c592e5;
}

.sensor-cont .sensor-lst {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  height: 47px;
  background: #f5f5f8;
  border-radius: 5px;
}
.sensor-cont .sensor-lst li {
  padding: 0 12px;
  height: 23px;
  border-radius: 15px;
  background: #ccc;
  color: #fff;
  cursor: default;
}
.sensor-cont .sensor-lst li.model1 {
  background: #59c1d3;
}
.sensor-cont .sensor-lst li.model2 {
  background: #475df1;
}
.sensor-cont .sensor-lst li.model3 {
  background: #ee2a82;
}
.sensor-cont .sensor-lst li span {
  font-size: 12px;
}

.sensor-point {
  position: absolute;
  top: 0;
  left: 0;
}
/* .sensor-point span {position: relative;} */
.sensor-point span {
  position: absolute;
}
.sensor-point em {
  font-size: 11px;
}

/* .sensor-point .dot {width: 8px; height: 8px; border-radius: 50%;background: #000; position: absolute; z-index: 2; top: 40px;  left: 91px;} */
.sensor-point .dot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #000;
}

/* .sensor-point .name {padding: 3px 10px; background: #ddd; border-radius: 15px; cursor: default; color: #fff; position: relative;} */
/* .sensor-point .name::after {content: ""; width: 0; height: 0;border-style: solid;border-width: 6px 5px 0 5px; border-color: #333 #0000 #0000 #0000;  position: absolute; left: 50%; bottom: -6px;} */
.sensor-point .name {
  position: absolute;
  padding: 3px 10px;
  background: #ddd;
  border-radius: 15px;
  cursor: default;
  color: #fff;
}
.sensor-point .name {
  transform: translate(-44%, -140%);
}
.sensor-point .name::after {
  content: '';
  position: absolute;
  bottom: -6px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 5px 0 5px;
  border-color: #333 #0000 #0000 #0000;
}
.sensor-point .name::after {
  left: 42%;
}

.top .name::after {
  top: -6px;
  left: 50%;
  transform: rotate(180deg);
}
.left .name::after {
  top: 8px;
  left: 96%;
  transform: rotate(-90deg);
}
.right .name::after {
  top: 34%;
  left: -3%;
  transform: rotate(90deg);
}

/* @parkjk 수정 */
/* .sensor-point .model1 .name::after {border-block-color: #59c1d3;} */
/* .sensor-point .model2 .name::after {border-block-color: #475df1;} */
/* .sensor-point .model3 .name::after {border-block-color: #ee2a82;} */

/* .sensor-point .model1 .name, */
/* .sensor-point .model1 .dot {background: #59c1d3;} */
/* .sensor-point .model2 .name, */
/* .sensor-point .model2 .dot {background: #475df1;} */
/* .sensor-point .model3 .name, */
/* .sensor-point .model3 .dot {background: #ee2a82;} */

/* .sensor-point .model1 {top: 144px; left: 339px;} */
/* .sensor-point .model1 .name::after {left: 56%;} */
/* .sensor-point .model2 {top: 235px; left: 274px;} */
/* .sensor-point .model2.top .name::after {left: 31%;} */
/* .sensor-point .model2 .dot {top: -21px;left: 49px;} */
/* .sensor-point .model3 {top: 90px; left: 173px;} */
/* .sensor-point .model3 .dot {left: 107px;} */

.sensor-point .dot {
  background: #f8554e;
}

.sensor-point .name {
  background: #cbcdd2;
}
.sensor-point .name::after {
  border-block-color: #cbcdd2;
}
.sensor-point .model0 .name {
  background: #777;
}
.sensor-point .model0 .name::after {
  border-block-color: #777;
}
.sensor-point .model1 .name {
  background: #475cef;
}
.sensor-point .model1 .name::after {
  border-block-color: #475cef;
}
.sensor-point .model2 .name {
  background: #cb8b00;
}
.sensor-point .model2 .name::after {
  border-block-color: #cb8b00;
}
.sensor-point .model3 .name {
  background: #ff1b00;
}
.sensor-point .model3 .name::after {
  border-block-color: #ff1b00;
}
.sensor-point .model4 .name {
  background: #258b94;
}
.sensor-point .model4 .name::after {
  border-block-color: #258b94;
}
.sensor-point .model5 .name {
  background: #c592e5;
}
.sensor-point .model5 .name::after {
  border-block-color: #c592e5;
}
/* //@parkjk 수정 */
.sensor-point .signal .dot {
  background: #f8554e;
  animation: pulseAnim 1.5s infinite;
  box-shadow: 0 0 0 0 rgb(248 85 78 / 80%);
}

@keyframes pulseAnim {
  0% {
    box-shadow: 0 0 0 0 rgb(248 85 78 / 40%);
  }
  70% {
    box-shadow: 0 0 0 18px rgb(248 85 78 / 0%);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(248 85 78 / 0%);
  }
}

.compare-cont .tab-content .select-wrap {
  display: flex;
  align-items: center;
  padding-bottom: 18px;
  line-height: 1;
}
.compare-cont .tab-content .select-wrap .name {
  color: #555;
  font-weight: 600;
}
.compare-cont .tab-content .chk-wrap {
  position: relative;
  margin-left: 43px;
}
.compare-cont .tab-content .chk-wrap::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 19px;
  background: #cacaca;
}

.compare-cont .fixed-search-form2 .tb-area .chip-lst ul li::after {
  width: 1px;
  height: 17px;
  background: #dcdcdc;
}
.compare-cont .fixed-search-form2 .chip-lst .add-btn {
  margin-left: 0;
}

/* ================================================================= */

/*************************************
    2. 작업[report]
*************************************/

.full-page .left-area {
  float: none;
  padding-right: 0;
  margin-top: 0;
  width: 100%;
}
.full-page .left-area::after {
  content: none;
}
.report-page.full-page .download-lst {
  border-top: 1px solid #eaeaf2;
  border-bottom: 1px solid #eaeaf2;
}

.report-page .red-bold {
  font-size: 14px;
  font-weight: 700;
  color: #c64944;
}
.report-page .bolder,
.report-page .bolder * {
  margin-left: 4px;
  font-size: 17px;
  font-weight: 700;
  color: #303030;
}
.report-page .no-content {
  height: 123px;
  line-height: 123px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
  border-top: 2px solid #eaeaf2;
  border-bottom: 1px solid #efeff1;
}
.report-page .no-content2 {
  height: 90px;
  line-height: 90px;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 500;
}

.weather-table thead th {
  background: #f5f5f8;
  color: #777;
}
.base-table.weather-table table {
  border-top: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
}
.base-table.weather-table th,
.base-table.weather-table td {
  padding: 0;
  border-bottom: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  line-height: 1.3;
}

.base-table.weather-table td {
  padding: 11px 0;
}
.weather-table .tr1 th:is(:nth-of-type(3), :nth-of-type(4)),
.weather-table td:is(:nth-of-type(3), :nth-of-type(4), :nth-of-type(6), :nth-of-type(7), :nth-of-type(8)) {
  border-left: none;
}
.weather-table .tr1 th:first-child,
.weather-table td:first-child {
  padding: 11px 15px;
  text-align: left;
}
.weather-table td:first-child .date {
  margin-right: 5px;
}
.weather-table .state-style {
  min-width: 46px;
  font-size: 12px;
  line-height: 1.5;
}
.weather-table .input-group.w-input-group {
  width: 72%;
  min-width: 58px;
  min-height: 24px;
}
.weather-table .input-group.w-input-group input[type='text'] {
  text-align: center;
}
.base-table.weather-table td.no-error {
  padding: 0 !important;
}
.weather-table .no-error {
  position: relative;
  width: 50px;
  height: 48px;
  background: #f2f2f2;
}
.weather-table .no-error::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 31px;
  height: 31px;
  background: url(../../img/sub/symbol-2.png) no-repeat;
}
.weather-table td.error {
  padding: 0;
  min-width: 50px;
}
.weather-table .error .select-group {
  display: block;
  height: 100%;
  min-width: 50px;
}
.weather-table .error .select-group select {
  padding: 0 0.5rem;
  border: none;
  font-size: 0.55rem;
  color: #777;
}
.weather-table .error .select-group::after {
  font-size: 0.5rem;
  color: #777;
}

.report-page .area-tit {
  padding: 35px 0 0;
  font: 500 20px/1.2 var(--font-be-vietnam-pro);
  color: #222;
  letter-spacing: 0;
}
.report-page .border-table thead {
  border-top: 1px solid var(--table-border);
}
.report-page .border-table th:not(:first-child),
.report-page .border-table td:not(:first-child) {
  border-left: 1px solid var(--table-border);
}
.report-page .border-table td.border-left {
  border-left: 1px solid var(--table-border);
}
.report-page .border-table th,
.report-page .border-table td {
  padding: 0 1rem;
}

.report-page .download-lst li {
  display: flex;
}
.report-page .download-lst li .info {
  display: inherit;
}
.report-page .foot-btn-area button {
  margin: 0 1px;
}
.report-page .chat-history {
  position: relative;
  padding: 18px 0 18px 0;
  border: 2px solid #eaeaf2;
  border-left: none;
  border-right: none;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
}
.chat-history li {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 24px;
  min-height: 43px;
  background: #f2f2f2;
  border-radius: 25px;
  line-height: 1.45;
}
.chat-history li ~ li {
  margin-top: 29px;
}
.chat-history li.chat-right {
  background: #eceefe;
}
.chat-history li.chat-right::after {
  content: url(../../img/sub/tail.png);
  position: absolute;
  right: 15px;
  bottom: -17px;
} /*말풍선꼬리*/
.chat-history li.chat-left::before {
  content: url(../../img/sub/tail2.png);
  position: absolute;
  left: 15px;
  bottom: -17px;
} /*말풍선꼬리*/
.chat-history li *:not(button) {
  font-family: var(--font-be-vietnam-pro);
  font-weight: 500;
}
.chat-history li .txt {
  max-width: 87%;
  font-size: 14px;
  color: #222;
}
.chat-history li .info {
  font-size: 13px;
  color: #8b8b8b;
}
.chat-history li .info em {
  margin-right: 7px;
}
.chat-history li .info em:first-child {
  margin-right: 18px;
}
.chat-history li .info em:last-child {
  margin-right: 0;
}
.chat-history .btns {
  color: #8b8b8b;
}
.chat-history .btns::before {
  font-family: var(--lineawesome);
  font-size: 1.15rem;
}
.chat-history .modify-btn::before {
  content: '\f303';
  margin-left: 11px;
}
.chat-history .remove-btn::before {
  content: '\f2ed';
  margin-left: 7px;
}
.chat-message {
  display: flex;
  gap: 14px;
  padding-top: 16px;
}
.chat-message .input-group {
  width: calc(100% - 48px);
}
.chat-message button {
  margin-left: 0;
}

.report-page .unit {
  align-items: baseline;
  align-self: flex-end;
}
.report-page .row-remove-btn i {
  width: 17px;
  height: 17px;
  line-height: 17px;
  font-size: 13px;
}
.report-page .row-remove-btn:hover i {
  background: #e9e9e9;
}

.report-page .table-wrap {
  display: flex;
  gap: 50px;
}
.report-page .table-wrap .base-table:not(.sign) {
  width: calc(100% - 460px);
}
.report-page .sign {
  width: 460px;
}
.report-page .sign table {
  border-left: 1px solid var(--table-border);
  border-right: 1px solid var(--table-border);
}
.report-page .sign .hd {
  font-size: 0.7rem;
  color: #222;
}
.report-page .sign .sub {
  font-size: 0.7rem;
}
.report-page .sign .sign-box {
  width: 100%;
  height: 156px;
  line-height: 156px;
  box-sizing: border-box;
}

.download-lst-custom {
  margin: 0;
  max-width: 360px;
}
.download-lst-custom.download-lst li {
  border-bottom: 0;
  height: 38px;
  line-height: 38px;
}

.total-hour {
  position: relative;
  margin-left: 21px;
  padding-left: 18px;
}
.total-hour * {
  color: #475df1;
  font-weight: 800;
}
.total-hour::before {
  content: '';
  width: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 46px;
  background: #eaeaf2;
}
.view-form .total-hour::before {
  height: 15px;
}
/* @parkjk */
.stop-yn {
  position: relative;
  margin-left: 21px;
  padding-left: 18px;
}
.stop-yn * {
  color: red;
  font-weight: 800;
}
.stop-yn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 46px;
  background: #eaeaf2;
}
/* //@parkjk */

/* 작업[report] 블레이드 점검보고서
--------------------------------------------- */
.blade-report-page img {
  display: block;
  margin: 0 auto;
}

.blade-info-area {
  margin-top: 35px;
}
.blade-info-area ul {
  display: flex;
  gap: 13px;
}
.blade-info-area ul > li {
  flex: 1;
}
.blade-info-area ul > li .base-table thead th {
  border-top: 2px solid #e1e1e1;
  border-bottom: 0;
  font-size: 0.7rem;
  font-weight: 600;
}
.blade-info-area ul > li .base-table tbody {
  border-top: 0;
}
.blade-info-area img {
  width: 100%;
}
.blade-info-area .viewer {
  position: relative;
  display: flex;
  align-items: center;
  height: 190px;
}
.blade-info-area .viewer .sensor-point {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: spread-2 1.7s infinite both;
  top: 90px;
  left: 170px;
  background: #f8554e;
}
.sensor-tooltip {
  position: absolute;
  top: 52px;
  left: 154px;
  z-index: 1;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  background: #f27e0d;
  border-radius: 15px;
  animation: floating 2s linear infinite;
}
.sensor-tooltip::before {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 26%;
  z-index: -1;
  height: 8px;
  width: 8px;
  background: #f27e0d;
  transform: translate(-50%) rotate(45deg);
}

@keyframes spread-2 {
  0%,
  100% {
    background: #f8554e;
    box-shadow: 0px 0px 13px 7px #f8554e;
  }
  50% {
    background: rgba(248, 84, 78, 0.4);
    box-shadow: 0px 0px 13px 7px rgba(248, 84, 78, 0.2);
  }
}

@keyframes floating {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, -5px);
  }
}

.drone-img-box {
  height: 186px;
}
.drone-img-box .blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  height: 100%;
  border-radius: 3px;
  font-weight: 600;
}

.flight-area .base-table {
  position: relative;
  overflow: visible;
  padding-top: 56px;
}
.flight-area .base-table .btn-wrap {
  position: absolute;
  top: 10px;
  right: 0;
}

.flight-area .base-table:nth-of-type(2) {
  padding-top: 0px;
}
.flight-area .base-table:nth-of-type(2) .btn-wrap {
  top: -46px;
}

.flight-area2 .base-table:nth-child(n + 3) {
  padding-top: 15px;
} /* @parkjk */

/* 작업[report] 타임라인 (css 변경할 예정)
--------------------------------------------- */
/* 현재 상태일 경우 년도/월/일 숫자 컬러 */
.timeline-group.current .timeline-date strong {
  color: #475df1;
}

/* 내용이 없을 경우 */
.timeline-group.blank::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 9px;
  height: 9px;
  background: #aeaeae;
  border-radius: 50%;
}
.timeline-group.blank .timeline-date i.total::before {
  content: none;
}

/* 하이라이트 */
.timeline-page .highlight {
  display: inline-block;
  background: #475df1;
  color: #fff;
}

/* ============================================ */

/* 범주 */
.timeline-page .legend-area {
  display: flex;
  align-items: center;
  padding: 0 0 46px;
}
.timeline-page .legend-area * {
  font-weight: 500;
  text-align: center;
}
.timeline-page .legend-area .tit {
  font-size: 16px;
  color: #222;
}

/* 범주 - 전체버튼 */
.timeline-page .legend-area .all {
  padding: 6px 46px;
  margin-left: 14px;
  border: 1px solid #e4e4ea;
  border-radius: 5px;
  height: 32px;
  line-height: 1;
  transition: 0.2s;
  cursor: pointer;
}
.timeline-page .legend-area .all.on {
  background: #475df1;
  color: #fff;
}
.timeline-page .legend-area .all.off {
  background: #fff;
  color: #475df1;
}

.timeline-page .legend-area .all.on:hover {
  opacity: 0.8;
}
.timeline-page .legend-area .all.off:hover {
  background: #475df1;
  color: #fff;
}

/* 범주 - 상태별 버튼 */
.timeline-page .legend-area ul {
  display: flex;
  align-items: center;
  width: 100%;
}
.timeline-page .legend-area ul::before {
  content: '';
  display: inline-block;
  margin: 0 7px;
  width: 1px;
  height: 32px;
  background: #efeff1;
}
.timeline-page .legend-area ul > li {
  flex: 1;
  padding: 8px 22px;
  border-radius: 5px;
  font-size: 14px;
  color: #222;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  height: 32px;
  line-height: 1;
  transition: all 0.2s;
}
.timeline-page .legend-area ul > li + li {
  margin-left: 5px;
}
.timeline-page .legend-area ul > li span::before {
  content: '';
  display: inline-block;
  margin-right: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
}

/* 범주 - 상태별 버튼 off */
.timeline-page .legend-area ul > li.off {
  border: 1px solid #e4e4ea;
}
.timeline-page .legend-area ul > li.off.state1 span::before {
  background: #d44f4f;
}
.timeline-page .legend-area ul > li.off.state2 span::before {
  background: #a0c382;
}
.timeline-page .legend-area ul > li.off.state3 span::before {
  background: #6b5b9a;
}
.timeline-page .legend-area ul > li.off.state4 span::before {
  background: #d294c8;
}
.timeline-page .legend-area ul > li.off.state5 span::before {
  background: #475df1;
}
.timeline-page .legend-area ul > li.off.state6 span::before {
  background: #29315f;
}
.timeline-page .legend-area ul > li.off.state7 span::before {
  background: #ee803d;
}
.timeline-page .legend-area ul > li.off.state8 span::before {
  background: #5f9b8c;
}
.timeline-page .legend-area ul > li.off.state9 span::before {
  background: #b69ab0;
}
.timeline-page .legend-area ul > li.off.state10 span::before {
  background: #7dbacf;
}
.timeline-page .legend-area ul > li.off.state11 span::before {
  background: #d8d8d8;
}

.timeline-page .legend-area ul > li.off:hover span {
  color: #fff;
}
.timeline-page .legend-area ul > li.off:hover span::before {
  background: #fff;
}
.timeline-page .legend-area ul > li.off.state1:hover {
  background: #d54f50;
}
.timeline-page .legend-area ul > li.off.state2:hover {
  background: #a0c381;
}
.timeline-page .legend-area ul > li.off.state3:hover {
  background: #6b5b9a;
}
.timeline-page .legend-area ul > li.off.state4:hover {
  background: #d294c8;
}
.timeline-page .legend-area ul > li.off.state5:hover {
  background: #475df1;
}
.timeline-page .legend-area ul > li.off.state6:hover {
  background: #29315f;
}
.timeline-page .legend-area ul > li.off.state7:hover {
  background: #ef7f3d;
}
.timeline-page .legend-area ul > li.off.state8:hover {
  background: #5e9b8c;
}
.timeline-page .legend-area ul > li.off.state9:hover {
  background: #b599af;
}
.timeline-page .legend-area ul > li.off.state10:hover {
  background: #7cb8d0;
}
.timeline-page .legend-area ul > li.off.state11:hover {
  background: #d8d8d8;
}

/* 범주 - 상태별 버튼 on */
.timeline-page .legend-area ul > li.on span {
  color: #fff;
}
.timeline-page .legend-area ul > li.on span::before {
  content: none;
}
.timeline-page .legend-area ul > li.on.state1 {
  background: #d54f50;
}
.timeline-page .legend-area ul > li.on.state2 {
  background: #a0c381;
}
.timeline-page .legend-area ul > li.on.state3 {
  background: #6b5b9a;
}
.timeline-page .legend-area ul > li.on.state4 {
  background: #d294c8;
}
.timeline-page .legend-area ul > li.on.state5 {
  background: #475df1;
}
.timeline-page .legend-area ul > li.on.state6 {
  background: #29315f;
}
.timeline-page .legend-area ul > li.on.state7 {
  background: #ef7f3d;
}
.timeline-page .legend-area ul > li.on.state8 {
  background: #5e9b8c;
}
.timeline-page .legend-area ul > li.on.state9 {
  background: #b599af;
}
.timeline-page .legend-area ul > li.on.state10 {
  background: #7cb8d0;
}
.timeline-page .legend-area ul > li.on.state11 {
  background: #d8d8d8;
}

.timeline-page .legend-area ul > li.on:hover {
  opacity: 0.8;
}

/* ============================================ */

.timeline-group {
  position: relative;
  overflow: hidden;
}
.timeline-group + .timeline-group {
  padding-top: 19px;
}

.timeline-group .timeline-date {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.timeline-group .timeline-date strong {
  font-family: var(--poppins);
  font-weight: 300;
  font-size: 50px;
  color: #a4a4b4;
  letter-spacing: -2px;
  line-height: 1;
}
.timeline-group .timeline-date span em {
  font-family: var(--font-be-vietnam-pro);
  font-size: 14px;
  font-weight: 600;
}
.timeline-group .timeline-date span em + em::before {
  content: '-';
}
.timeline-group .timeline-date i.total {
  display: inline-block;
  margin: 15px 0 11px;
  padding: 0 10px;
  min-width: 58px;
  height: 22px;
  line-height: 22px;
  border-radius: 15px;
  border: 1px solid #a8a8a8;
  text-align: center;
  font-family: var(--font-be-vietnam-pro);
  font-size: 14px;
  font-weight: 600;
}
.timeline-group .timeline-date i.total::before {
  content: '+';
}

.timeline-group .section-wrap {
  position: relative;
  overflow: hidden;
  padding: 12px 0 18px;
}
.timeline-group .section-wrap::before {
  content: '';
  width: 9px;
  height: 9px;
  background: #aeaeae;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.timeline-group .section-wrap::after {
  content: '';
  width: 1px;
  height: 100%;
  background: #a8a8a8;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.timeline-group section {
  width: calc(100% / 2 - 29px);
}
.timeline-group section.timeline-left {
  float: left;
}
.timeline-group section.timeline-right {
  float: right;
}

.timeline-ul {
  font-family: var(--font-be-vietnam-pro);
}
.timeline-ul > li {
  border-radius: 5px;
  border: 1px solid #dcdcdc;
  transition: all 0.15s;
}
.timeline-ul > li + li {
  margin-top: 13px;
}
.timeline-ul > li:hover {
  box-shadow: 1px 1px 18px 1px rgb(85 85 85 / 15%);
}
.timeline-ul > li .li-wrap {
  padding: 14px 18px;
}

.timeline-tit-wrap {
  display: flex;
  align-items: center;
}
.timeline-tit-wrap .alarm,
.timeline-tit-wrap .tit {
  display: inline-block;
  position: relative;
  font-weight: 600;
  color: #222;
  transform: skew(-0.1deg, -0.1deg);
}
.timeline-tit-wrap .tit {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.timeline-tit-wrap .alarm {
  padding-right: 9px;
  margin-right: 8px;
}
.timeline-tit-wrap .alarm::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 17px;
  background: #dcdcdc;
}

.timeline-txt {
  margin: 3px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  font-size: 12px;
  font-weight: 700;
}

.timeline-info .info:last-child {
  text-align: right;
  flex: none;
}
.timeline-info .info:last-child .date::before {
  margin-right: 0;
}
.timeline-info *:not(.turbine-model) {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.timeline-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 10px;
}
.timeline-info :is(.worker, .turbine-lst, .date)::before {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  font-family: var(--lineawesome);
  font-weight: bold;
  font-size: 1.05rem;
  color: #b3b3b3;
}

.timeline-info .worker::before {
  content: '\f807';
}
.timeline-info .turbine-lst::before {
  content: '\f041';
}
.timeline-info .date::before {
  content: '\f017';
}
.timeline-info .date.vessel::before {
  content: '\f21a';
}
.timeline-info .worker li {
  display: inline-block;
}
.timeline-info .worker li:not(:first-child)::before {
  content: ',';
  margin-right: 4px;
}

.timeline-info .turbine-lst {
  display: flex;
  align-items: center;
}
.timeline-info .turbine-lst .turbine-model {
  margin-right: 6px;
  font-size: 16px;
  font-weight: 800;
  color: #475df1;
}
.timeline-info .turbine-lst ul li {
  display: inline-block;
}
.timeline-info .turbine-lst ul li:not(:first-child)::before {
  content: '>';
  color: #777;
  margin: 0 3px;
}

.timeline-info .date li {
  display: inline-block;
}
.timeline-info .date li + li {
  margin-left: 3px;
}

.timeline-ul .btn {
  display: block !important;
  padding: 8px 0;
  color: #555;
  text-align: center;
  font-weight: 500;
  border-top: 1px solid #dcdcdc;
}
.timeline-ul .btn i {
  margin-right: 2px;
  font-size: 1.1rem;
  font-weight: bold;
}
.timeline-ul .btn i.la-download {
  font-size: 1rem;
  vertical-align: baseline;
}
.timeline-ul .btn:hover {
  color: #475df1;
}

/* 상태별 스타일링 */
li.state6 .timeline-tit-wrap .tit {
  color: #c12620;
}
.timeline-ul > li.state5 .li-wrap {
  background: #f5f5f8;
}
li.state5 .timeline-tit-wrap .alarm,
li.state5 .timeline-tit-wrap .tit,
li.state5 .timeline-info,
li.state5 .timeline-info :is(.worker, .turbine-lst, .date)::before,
li.state5 .timeline-info .turbine-lst ul li:not(:first-child)::before,
li.state5 .timeline-info .turbine-lst .turbine-model {
  color: #b3b3b3;
}

/* 상태별 아이콘 변경 */
li.state1 .timeline-info .date::before {
  content: '\f071';
}

/* 상태별 뱃지 */
*:not([class^='timeline-badge']) + [class^='timeline-badge'] {
  margin-left: 5px;
}
[class^='timeline-badge'] {
  display: inline-block;
  align-self: flex-start;
  flex: none;
  padding: 0 7px;
  min-width: 52px;
  height: 17px;
  line-height: 18px;
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  border-radius: 3px;
  text-align: center;
}
[class^='timeline-badge'] + [class^='timeline-badge'] {
  margin-left: 4px;
}

/* (이전 디자인) 상태별 뱃지 */
.timeline-badge.state1 {
  background: #e99f00;
}
.timeline-badge.state2 {
  background: #475df1;
}
.timeline-badge.state3 {
  background: #35a5ce;
}
.timeline-badge.state4 {
  background: #353d6b;
}
.timeline-badge.state5 {
  background: #a0a0a0;
}
.timeline-badge.state6 {
  background: #f8554e;
}

/* 10단계 상태별 뱃지 클래스
1. 계획필요 : timeline-badge-state1
2. 계획등록완료 : timeline-badge-state2
3. 계획보완요청 : timeline-badge-state3
4. 작업대기 : timeline-badge-state4
5. 작업중 : timeline-badge-state5
6. 보고서작성필요 : timeline-badge-state6
7. 보고서등록완료 : timeline-badge-state7
8. 보고서보완요청 : timeline-badge-state8
9. 보고서승인대기 : timeline-badge-state9
10. 보고서승인완료 : timeline-badge-state10 */

.timeline-badge-state1 {
  background: #d44f4f;
}
.timeline-badge-state2 {
  background: #a0c382;
}
.timeline-badge-state3 {
  background: #6b5b9a;
}
.timeline-badge-state4 {
  background: #475df1;
}
.timeline-badge-state5 {
  background: #29315f;
}
.timeline-badge-state6 {
  background: #ee803d;
}
.timeline-badge-state7 {
  background: #5f9b8c;
}
.timeline-badge-state8 {
  background: #b69ab0;
}
.timeline-badge-state9 {
  background: #7dbacf;
}
.timeline-badge-state10 {
  background: #d8d8d8;
}

/* ================================================================= */

/*************************************
    3. 분석[analyze]
*************************************/

/* 분석[analyze] 가동률, 이용률 
--------------------------------------------- */
.all-rate-area .select-group {
  margin-bottom: 9px;
  min-width: 87px;
  height: 31px;
  vertical-align: inherit;
}
.all-rate-area .select-group select {
  color: #777;
}

/* 분석[analyze] 범례
--------------------------------------------- */
.fixed-search-form2 .legend-wrap {
  position: absolute;
  right: 0;
  bottom: 5px;
}
.fixed-search-form2 .legend-wrap span {
  margin-left: 35px;
  font-size: 15px;
  font-weight: 500;
  color: #222;
}
.fixed-search-form2 .legend-wrap span:first-child {
  margin-left: 0;
}
.fixed-search-form2 .legend-wrap span::before {
  content: '';
  display: inline-block;
  margin-right: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #475df1;
}
.fixed-search-form2 .legend-wrap span.s2::before {
  background: #cd8800;
}
.fixed-search-form2 .legend-wrap span.s3::before {
  background: #871511;
}

.legend-wrap em {
  position: relative;
  margin-left: 25px;
  font-weight: 500;
  color: #222;
}
.legend-wrap span {
  font-size: 12px;
}
.legend-wrap em::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 14px;
  background: #ccc;
  border-radius: 3px;
}
.legend-wrap.type1 em.top::before {
  background: linear-gradient(180deg, rgba(39, 58, 190, 1) 0%, rgba(71, 93, 241, 1) 100%);
}
.legend-wrap.type1 em.down::before {
  background: linear-gradient(333deg, rgba(89, 3, 0, 1) 0%, rgba(135, 21, 17, 1) 100%);
}

.legend-wrap.type2 em {
  position: relative;
  margin-left: 38px;
  font-weight: 500;
  color: #222;
}
.legend-wrap.type2 span {
  font-size: 12px;
}
.legend-wrap.type2 em::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #d7d8e1;
  border-radius: 50%;
}
.legend-wrap.type2 em.a::before {
  background: #475df1;
}
.legend-wrap.type2 em.b::before {
  background: #e49f16;
}
.legend-wrap.type2 em.c::before {
  background: #871511;
}

.legend-wrap.type3 em {
  font-size: 12px;
  color: #828282;
}
.legend-wrap.type3 em.a::before {
  background: #475df1;
}
.legend-wrap.type3 em.b::before {
  background: #e49f16;
}
.legend-wrap.type3 em.c::before {
  background: #871511;
}
.legend-wrap.type3 em.d::before {
  background: #d7d8e1;
}

.legend-wrap.type4 em {
  margin-left: 47px;
}
.legend-wrap.type4 em.a::before {
  background: #050b3b;
}
.legend-wrap.type4 em.b::before {
  background: #e19964;
}
.legend-wrap.type4 em.c::before {
  background: #6c81e2;
}
.legend-wrap.type4 em.d::before {
  background: #ce8d96;
}

.legend-wrap.type5 em::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  background: inherit;
  border-radius: inherit;
}
.legend-wrap.type5 em.a::before {
  width: 18px;
  height: 18px;
  background: #e7d0cf;
  border-radius: 3px;
  left: -22px;
}
.legend-wrap.type5 em.b::before {
  width: 12px;
  height: 12px;
  background: #475df1;
  border-radius: 50%;
}

.legend-wrap.type6 em {
  font-size: 13px;
}
.legend-wrap.type6 em.a::before {
  background: #dadffc;
}

.analyze-table .name,
.analyze-table .sub {
  font-family: var(--nanumsquare);
  font-weight: 900;
  color: #222;
}
.analyze-table .name {
  font-size: 20px;
}
.analyze-table .sub {
  font-size: 16px;
  font-weight: 900;
}

.analyze-table .toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: #b5b5b9;
}
.analyze-table .toggle-btn::before {
  content: '\f107';
  font-family: var(--lineawesome);
  font-size: 0.75rem;
  font-weight: bold;
  color: #fff;
}
.analyze-table .toggle-wrap span {
  font-size: 14px;
  font-weight: 600;
  color: #353d6b;
}
.analyze-table .toggle-btn.active {
  background: #353d6b;
}
.analyze-table .toggle-btn.active::before {
  content: '\f106';
}
.hidden-inner {
  padding: 0 !important;
  overflow: hidden;
} /*숨겨진테이블감쌈*/

.hidden-table {
  display: none;
}
.hidden-table table {
  table-layout: fixed;
} /*너비 부모값으로 고정*/
.analyze-table tr:last-child {
  border-bottom: 1px solid #dcdce1;
}
.analyze-table td {
  padding: 14px 38px;
  border-right: 1px solid #efeff1;
  border-top: 1px solid #dcdce1;
  text-align: left;
}
.analyze-table td:last-child {
  border-right-style: none;
}
.analyze-table td.f-child {
  padding: 14px 38px 14px 18px;
}
.analyze-table td.last-child {
  padding: 14px 0 14px 38px;
}
.analyze-table td .tit {
  font-size: 12px;
  color: #a0a6ad;
}

.graph-group2 li {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 24px;
}
.graph-group2 li .bar-track {
  width: calc(100% - 55px);
  min-width: 209px;
  height: 18px;
  background: #f5f5f8;
  border-radius: 3px;
  overflow: hidden;
}
.graph-group2 li .bar-track .bar {
  display: inline-block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease-in;
}
.analyze-table .val {
  font-size: 17px;
  font-weight: 500;
  color: #a4a4b4;
}
.analyze-table .val .num {
  margin-right: 1px;
  font-size: 24px;
  font-weight: 700;
}
.analyze-table .graph-group2 .val {
  width: 55px;
  text-align: right;
}
.analyze-table .symbol {
  background: url(../../img/sub/symbol.png) no-repeat;
  width: 9px;
  height: 13px;
}
.chk-group {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 13px;
  padding: 8px 0;
}
.graph-group3 {
  display: flex;
  align-items: center;
  height: 87px;
}
.graph-group3 li {
  width: calc(100% / 5);
}
.graph-group3 ~ .graph-group3 {
  border-top: 1px solid #efeff1;
}
.graph-group3 .val-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 3px;
}
.graph-group3 .val-wrap .val:nth-child(3) {
  color: #475df1;
}

.graph-group2 li.normal .bar-track .bar {
  background: #a4a4b4;
} /* normal */
.graph-group2 .up .val {
  color: #475df1;
} /* 상향 */
.graph-group2 li.up .bar-track .bar {
  background: linear-gradient(270deg, rgba(39, 58, 190, 1) 0%, rgba(71, 93, 241, 1) 100%);
}
.graph-group2 .down .val {
  color: #5a0300;
} /* 하향 */
.graph-group2 li.down .bar-track .bar {
  background: linear-gradient(270deg, rgba(89, 3, 0, 1) 0%, rgba(135, 21, 17, 1) 100%);
}
.graph-group3 .val-wrap .val:nth-child(3).down {
  color: #851410;
} /* 하향 */

.search-result-area .chart-result .down-btn {
  margin-left: 11px;
}
[class*='tag-type-'] {
  display: block;
  padding-left: 76px;
  text-align: left;
}
[class*='tag-type-']::before {
  content: '';
  display: inline-block;
  margin-right: 7px;
  width: 12px;
  height: 11px;
  border-radius: 3px;
  background: #ccc;
}
.tag-type-a::before {
  background: #475df1;
}
.tag-type-b::before {
  background: #d89000;
}
.tag-type-c::before {
  background: #871511;
}
.search-result-area .chart-result .badge-custom {
  min-width: 37px;
  vertical-align: baseline;
  font-size: 12px;
  font-weight: 600;
}
.search-result-area .chart-result .figure,
.search-result-area .chart-result .figure em {
  font-weight: 600;
}
.search-result-area .chart-result .figure.down {
  color: #ed6653;
}
.search-result-area .chart-result .figure.up {
  color: #475df1;
}
.search-result-area .chart-result .flexWrap + .flexWrap {
  margin: 16px 0 10px;
}
.search-result-area .legend-wrap .unit,
.search-result-area .chart-result [class*='heading'] + .unit {
  margin-left: 5px;
  font-size: 14px;
  font-weight: 500;
  color: #5d5d5d;
}
.search-result-area .chart-result .hd-legend {
  margin-right: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #828282;
}
.search-result-area .chart-result .hd-legend::before {
  content: '';
  display: inline-block;
  margin: 0 6px 1px 0;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #c8cad9;
}

.fixed-search-area {
  position: relative;
}
.fixed-search-area .hidden-detail {
  display: none;
  width: 100%;
  position: absolute;
  top: 109px;
  left: 0;
  z-index: 100;
  padding: 0 20px 24px;
  border-radius: 3px;
  border: 1px solid #efeff1;
  background: #fff;
  box-shadow: 1px 5px 20px 0 rgb(0 0 0 / 6%);
}
.hidden-detail .analyze-table td.t-border {
  border-top: none;
}
.hidden-detail .analyze-table td.r-border {
  border-right: none;
}
.hidden-detail .analyze-table .name,
.hidden-detail .analyze-table .sub {
  font-size: 16px;
  font-weight: 900;
  font-family: var(--nanumsquare);
}
.hidden-detail .analyze-table .name {
  font-weight: 700;
}
.hidden-detail .analyze-table td {
  padding: 19px 27px;
}
.hidden-detail .analyze-table td.f-child {
  padding: 10px 27px 10px 18px;
}
.hidden-detail .analyze-table td.last-child {
  padding: 10px 0 10px 22px;
}
.hidden-detail .toggle-wrap .badge-custom {
  font-size: 13px;
  background: #dadffc;
  color: #3a4ed8;
}
.hidden-detail .toggle-wrap .badge-custom em {
  font-weight: 600;
}
.hidden-detail .toggle-wrap .badge-custom i {
  font-size: 0.75rem;
  vertical-align: middle;
}
.hidden-detail .toggle-wrap .badge-custom .num {
  vertical-align: text-top;
}
.hidden-detail .checkbox-radio-group label.th1 {
  font-size: 16px;
  color: #222;
  font-weight: 500;
}

.hidden-detail .chk-area li {
  float: left;
  margin: 6px 0;
  min-width: 147px;
}

/* 분석[analyze] 에러이벤트 - analyze-error-page
--------------------------------------------- */
.analyze-error-page .analyze-table td:not(.last-child) > .tit,
.analyze-fail-page .analyze-table td:not(.last-child) > .tit {
  margin-bottom: 12px;
}
.analyze-error-page .graph-group2 li,
.analyze-fail-page .graph-group2 li {
  align-items: baseline;
  justify-content: space-between;
}
.graph-group2 li .case {
  position: relative;
}
.graph-group2 li .case i {
  position: absolute;
  top: -14px;
  width: 100px;
  font-weight: 600;
  font-size: 14px;
  color: #222;
}
.graph-group2 li .case .txt {
  margin-left: -5px;
  font-size: 20px;
  font-weight: 400;
}
.graph-group2 li .case1 .num,
.graph-group2 li .case2 .num {
  font-size: 31px;
  font-weight: 600;
}
.graph-group2 li .case2 .num.up::before {
  content: '+';
}
.graph-group2 li .case2 .num.down::before {
  content: '-';
}
.graph-group2 li .case3 .num {
  display: inline-block;
  vertical-align: sub;
  font-size: 58px;
  line-height: 1;
}
.graph-group2 li .case3 .txt {
  font-size: 25px;
}
.graph-group2 li .case.arrow::after {
  content: '';
  background: url(../../img/sub/symbol.png) no-repeat;
  width: 9px;
  height: 13px;
  position: absolute;
  right: -30px;
  top: 11px;
}
.graph-group2 li .case:nth-of-type(2).arrow::after {
  top: -3px;
}
.analyze-error-page .analyze-table td.f-child .flexWrap,
.analyze-fail-page .analyze-table td.f-child .flexWrap {
  align-items: initial;
}
.analyze-error-page .analyze-table td.f-child .flexWrap.vertical,
.analyze-fail-page .analyze-table td.f-child .flexWrap.vertical {
  gap: 50px;
}

.analyze-error-page td.f-child .graph-group2 li .case i,
.analyze-fail-page td.f-child .graph-group2 li .case i {
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
}
.analyze-error-page .analyze-table .val,
.analyze-fail-page .analyze-table .val {
  font-size: 14px;
}
.analyze-error-page .analyze-table .val .num,
.analyze-fail-page .analyze-table .val .num {
  font-weight: 600;
}

.style1 .graph-group3 .val-wrap .val:nth-child(3) {
  color: #050b3b !important;
}
.style2 .graph-group3 .val-wrap .val:nth-child(3) {
  color: #c8804a !important;
}
.style3 .graph-group3 .val-wrap .val:nth-child(3) {
  color: #6c81e2 !important;
}
.style4 .graph-group3 .val-wrap .val:nth-child(3) {
  color: #ce8d96 !important;
}

.color1 {
  color: #666983 !important;
}
.color2 {
  color: #750e0a !important;
}
.color3 {
  color: #050b3b !important;
}
.color4 {
  color: #a99b91 !important;
}
.color5 {
  color: #00149a !important;
}
.color6 {
  color: #c8804a !important;
}
.color7 {
  color: #8a91b5 !important;
}
.color8 {
  color: #6c81e2 !important;
}
.color9 {
  color: #ce8d96 !important;
}
.color10 {
  color: #b1b1bf !important;
}
.color11 {
  color: #475df1 !important;
}

/* @parkjk */
.color-ly {
  color: #a4a4b4 !important;
}
.color-up {
  color: #851410 !important;
}
.color-down {
  color: #475df1 !important;
}
/* //@parkjk */

/* 분석[analyze] analyze-table2
--------------------------------------------- */
.analyze-table2 thead th {
  background: #d5d7da;
  color: #363636;
}
.analyze-table2.base-table tbody {
  border-top: none;
}
.analyze-table2 td {
  padding: 0.6rem 1rem;
}
.analyze-table2 tr.hide td {
  height: 0 !important;
}
.analyze-table2 tr.active td {
  background: #f4f5f7;
}
.analyze-table2 .toggle-btn::before {
  content: '\f107';
  font-family: var(--lineawesome);
  font-weight: bold;
}
.analyze-table2 tr.active .toggle-btn::before {
  content: '\f106';
}
.analyze-table2 th:first-child {
  padding-left: 58px;
}
.analyze-table2 [class*='tag-type-'].hd {
  padding-left: 38px;
}
.analyze-table2 [class*='tag-type-']:not(.hd) {
  padding-left: 78px;
}

.analyze-error-page .search-result-area .chart-result .increase {
  font-size: 14px;
  color: #ed6653;
  font-weight: 700;
}
.analyze-error-page .search-result-area .chart-result .increase .num {
  font-weight: inherit;
}

/* 분석[analyze] - 고장률 - analyze-fail-page
--------------------------------------------- */
.analyze-fail-page .analyze-table td .tit {
  display: inline-block;
}

/* tooltip */
.t-icon {
  position: relative;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  cursor: pointer;
}
.t-icon::before {
  content: '\e9ac';
  font-family: var(--xeicon);
  font-size: 1rem;
  color: #4f4f4f;
}
.t-icon:active,
.t-icon:hover::before {
  content: '\e9ad';
}
.t-icon:hover .tooltip {
  display: flex;
}
.tooltip {
  display: none;
  position: absolute;
  top: 10px;
  left: -16px;
  z-index: 1;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  transition: transform 0.3s;
  animation: tooltip-fadein-up 0.3s forwards;
} /*위치:왼쪽기준(디폴트)*/
.tooltip:after {
  content: '';
  position: absolute;
  left: 18px;
  top: -12px;
  transform: rotate(180deg);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 9px 0 9px;
  border-color: #4f4f4f #0000 #0000 #0000;
} /*화살표위치-왼쪽 상단(디폴트)*/
.tooltip.type2 {
  left: auto;
  right: -16px;
} /*위치-오른쪽 기준*/
.tooltip.type2::after {
  left: auto;
  right: 18px;
} /*화살표위치-오른쪽 상단*/
.t-icon.bottom .tooltip::after {
  bottom: -6px;
  left: 50%;
  transform: rotate(180deg);
} /*화살표위치-아래*/
.t-icon.left .tooltip::after {
  top: 40%;
  left: -15px;
  transform: rotate(90deg);
} /*화살표위치-왼쪽*/
.t-icon.right .tooltip::after {
  top: 47%;
  left: 99.4%;
  transform: rotate(270deg);
} /*화살표위치-오른쪽*/

@keyframes tooltip-fadein-up {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(28px);
  }
}

.tooltip > div {
  padding: 17px;
  min-width: 255px;
}
.analyze-fail-page2 .tooltip > div {
  min-width: 274px;
}
.tooltip .left-inner {
  background: #4f4f4f;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.tooltip .right-inner {
  background: #414141;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.tooltip h5 {
  padding-bottom: 3px;
  font-size: 15px;
  font-weight: 700;
}
.tooltip ul ~ ul {
  margin-top: 12px;
}
.tooltip ul li {
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #6e6e6e;
}
.tooltip ul li .date {
  font-weight: 300;
}
.tooltip .more::before {
  content: '\e949';
  font-family: var(--xeicon);
  font-size: 1.5rem;
  display: block;
  margin-top: 12px;
  text-align: center;
  color: #8c8c8c;
}

.analyze-table3 td {
  padding: 12px 0;
}
.analyze-table3 strong {
  font-family: var(--nanumsquare);
  font-size: 20px;
  font-weight: 900;
}
.analyze-table3 .name::before {
  content: '';
  display: inline-block;
  margin-right: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #475df1;
}
.analyze-table3 .hd-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.analyze-table3 .hd-wrap .name strong::after {
  content: '\e93f';
  font-family: var(--xeicon);
  font-size: 1.3rem;
  margin: auto -4px;
  vertical-align: middle;
}
.analyze-table3 .hd-wrap .name strong:last-of-type::after {
  content: none;
}
.analyze-table3 .badge-custom {
  vertical-align: middle;
}
.analyze-table3 .box-wrap {
  display: grid;
  grid-template-columns: repeat(5, 307px);
  gap: 18px;
  padding: 7px 0;
}
.analyze-table3 .box .title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analyze-table3 .box .title,
.analyze-table3 .box ul li span {
  font-family: var(--font-be-vietnam-pro);
}
.analyze-table3 .box ul {
  padding: 5px 14px;
  margin-top: 7px;
  height: 343px;
  overflow: hidden;
  border: 1px solid #efeff1;
  border-radius: 3px;
  font-size: 16px;
  color: #222;
}
.analyze-table3 .box ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.analyze-table3 .box ul li span {
  line-height: 2.3;
}
.analyze-table3 .box ul li .info {
  display: inline-block;
  max-width: 152px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.analyze-table3 .box > .flexWrap {
  padding-right: 14px;
}
.analyze-table3 + .btn-wrap {
  padding-top: 54px;
}

/* @parkjk */
.analyze-table3 .name.type0::before {
  background: #777;
}
.analyze-table3 .name.type1::before {
  background: #475cef;
}
.analyze-table3 .name.type2::before {
  background: #cb8b00;
}
.analyze-table3 .name.type3::before {
  background: #ff1b00;
}
.analyze-table3 .name.type4::before {
  background: #258b94;
}
.analyze-table3 .name.type5::before {
  background: #c592e5;
}
/* //@parkjk */

/* 분석[analyze] 고장빈도 - analyze-fail-page2
--------------------------------------------- */
.analyze-fail-page2 .tooltip {
  font-size: 12px;
}
.analyze-fail-page2 .tooltip strong {
  font-size: 14px;
}
.analyze-fail-page2 .tree-table2 .last-child {
  border-right-width: none;
}
.analyze-fail-page2 .tree-table2 .toggle {
  margin-left: 26px;
  width: 34px;
  height: 34px;
  border-radius: 3px;
  background: #b5b5b9;
}
.analyze-fail-page2 .tree-table2 .v2 > td:nth-child(2) {
  border-right: none;
}
.analyze-fail-page2 .tree-table2 .v2 > td:nth-child(3) {
  text-align: right;
}
.analyze-fail-page2 .tree-table2 .v2 .toggle {
  width: 26px;
  height: 26px;
}
.analyze-fail-page2 .tree-table2.analyze-table3 .v2 > td:not(:last-child) {
  padding: 0 21px;
  height: 42px;
  line-height: 42px;
}
.analyze-fail-page2 .tree-table2 .toggle::before {
  content: none;
}
.analyze-fail-page2 .tree-table2 .toggle::after {
  content: '\f107';
  font-family: var(--lineawesome);
  font-size: 0.75rem;
  color: #fff;
  font-weight: bold;
}
.analyze-fail-page2 .tree-table2 .unfold.toggle {
  background: #353d6b;
}
.analyze-fail-page2 .tree-table2 .unfold.toggle::after {
  content: '\f106';
}
.fail-graph-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
} /*그래프*/
/* @parkjk */
.fail-graph-group .front-num {
  width: 25px;
  text-align: right;
}
/* //@parkjk */
.fail-graph-group .front-num,
.fail-graph-group .end-num,
.fail-graph-group .end-num strong {
  color: #475df1;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--poppins);
}
.fail-graph-group .end-num {
  width: 49px;
  max-width: 49px;
  text-align: right;
}
.fail-graph-group .graph-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  width: 100%;
  overflow: hidden;
}
.fail-graph-group .value {
  display: flex;
  width: 100%;
}
.fail-graph-group .value li {
  flex: 1;
  line-height: 1;
}
.fail-graph-group .value em {
  font-size: 12px;
  color: #828282;
}
.fail-graph-group .bar-track {
  position: relative;
  width: calc(100% + 20%);
  height: 9px;
  border-radius: 8px;
  background: #f5f5f8;
}
.fail-graph-group .bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 9px;
  border-radius: inherit;
  animation: graph-bar 1.5s forwards ease-out;
  background: linear-gradient(90deg, rgba(71, 93, 241, 1) 0%, rgba(39, 58, 190, 1) 100%);
}

@keyframes graph-bar {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

.analyze-fail-page2 .analyze-table3 td {
  border-top-color: #efeff1;
}
.analyze-fail-page2 .analyze-table3 .v3 > td {
  padding: 18px;
}
.analyze-fail-page2 .result-info-area {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 17px;
} /*그래프 info */
.analyze-fail-page2 .info-table {
  font-family: var(--font-be-vietnam-pro);
}
.analyze-fail-page2 .info-table thead th {
  padding: 0 5px;
  height: 28px;
  background: #f5f5f8;
  border-top: 1px solid var(--table-border);
  border-bottom: 2px solid var(--table-border);
  font-size: 11px;
  font-weight: 400;
  color: #a0a6ad;
  box-sizing: content-box;
}
.analyze-fail-page2 .info-table td {
  padding: 7px 5px;
  font-size: 13px;
  border-bottom: 1px solid #efeff1;
  line-height: 1;
  border-right: none;
  box-sizing: content-box;
}

/* ================================================================= */

/*************************************
    4. 예측[predict]
*************************************/

.si-cont {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
}
.si-cont :is(.si-viewer, .si-info, .si-lst) {
  border-top: 2px solid #e1e1e1;
}
.si-cont .wrap:first-child {
  flex: 1;
}
.si-cont .wrap:last-child {
  flex: 1;
  max-width: 650px;
}

.si-viewer {
  border-bottom: 1px solid #e1e1e1;
}
.si-viewer .si-viewer-fix {
  position: relative;
  width: 806px;
  margin: auto;
}
.si-viewer img {
  display: block;
  margin: auto;
  height: 100%;
}

/* si-tooltip 툴팁 */
.si-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 2px 8px;
  border-radius: 13px;
  text-align: center;
  font-size: 18px;
  background: #fff;
  color: #475df1;
  border: 2px solid #475df1;
}
.on.si-tooltip {
  animation: floating 2s linear infinite;
  background: #475df1;
  color: #fff;
}
.si-tooltip .sub-txt {
  display: block;
  font-size: 14px;
}

/* si-tooltip 툴팁 - 화살표 */
.si-tooltip::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #475df1 #0000 #0000 #0000;
}
.si-tooltip.top::after {
  top: -10px;
  left: 50%;
  transform: translateX(-50%) scaleY(-1);
}
.si-tooltip.bottom::after {
  bottom: -9px;
  left: 50%;
  transform: rotate(0deg) translateX(-50%);
}
.si-tooltip.left::after {
  top: 35%;
  left: -12px;
  transform: rotate(90deg) translateY(-35%);
}
.si-tooltip.right::after {
  top: 35%;
  left: initial;
  right: -12px;
  transform: rotate(270deg) translateY(-35%);
}

.si-info {
  min-width: 411px;
  margin-top: 28px;
  border-bottom: 1px solid #e1e1e1;
}
.si-info .registration-form .base-table tbody th,
.si-info .registration-form .base-table tbody th[scope='row'],
.si-info .registration-form .base-table td {
  height: 58px;
}
.si-info td .value {
  font-family: var(--poppins);
  text-align: right;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.si-info-days {
  font-size: 40px;
  color: #696969;
  font-weight: 200;
  text-align: center;
  line-height: 1.84;
}
.si-info-days .value {
  font-size: 105px;
  color: #475df1;
  margin-right: 20px;
  font-weight: 400;
  letter-spacing: -8px;
}
.si-data-page .fixed-search-form4 {
  margin: 34px 0 40px;
}

.si-lst {
  position: relative;
}
.si-lst::before {
  content: '';
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 9px;
  background: linear-gradient(to bottom, #fff 20%, #fafafa00 100%);
}
.si-lst ul {
  padding: 0 5px 0 9px;
  min-height: 305px;
  max-height: 305px;
  overflow-y: auto;
}
.si-lst ul li {
  margin-top: 9px;
  padding: 9px 20px;
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}
.si-lst ul li:last-child {
  margin-bottom: 9px;
}
.si-lst ul li:hover {
  box-shadow: 1px 1px 8px -1px rgb(85 85 85 / 37%);
}
.si-lst ul li.checked {
  box-shadow: 1px 1px 8px -1px rgb(85 85 85 / 37%);
  border: 2px solid #475df1;
}
.si-lst ul li .tit-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.si-lst ul li .tit-area .tit {
  max-width: calc(100% - 145px);
  font-size: 22px;
  color: #222;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}
.si-lst ul li .info-area .txt {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.si-lst ul li .checkbox-radio-group {
  margin-right: 17px;
}
.si-lst ul li .li-wrap {
  width: 100%;
}
.si-lst .btn-wrap {
  display: flex;
  gap: 10px;
  padding-top: 9px;
  border-top: 1px solid #e1e1e1;
}
.si-lst .btn-wrap button {
  flex: 1;
  font-size: 20px;
  font-weight: 300;
}
.si-chart-area .si-chart-graph {
  position: relative;
  height: 355px;
}
.si-lst .no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 305px;
  font-size: 0.7rem;
}

/* 계산식 */
.si-calculation {
  padding-top: 66px;
}
.si-calculation .tit {
  display: inline-block;
  font-size: 24px;
  font-weight: 800;
  color: #222;
}
.si-calculation-wrap {
  display: flex;
  gap: 50px;
  padding-top: 20px;
}
.si-calculation-wrap .heading5 {
  display: block;
  margin-bottom: 8px;
}
.si-calculation-left {
  min-width: 770px;
}
.si-calculation-left .base-table {
  max-height: 325px;
}
.si-calculation-left .base-table .tr-nodata td {
  padding: 4.54rem 0.8rem;
}

.si-calculation-right .registration-form {
  border-top: 2px solid var(--table-border);
}
.si-calculation-right .registration-form .base-table td {
  padding: 10px 8px;
  height: auto;
}
.si-calculation-right .registration-form .base-table td:last-child {
  padding-right: 20px;
}
.si-calculation-right .base-table {
  max-height: 392px;
}
.si-calculation-right {
  flex: 1;
}
.si-calculation-right .data {
  display: inline-block;
  padding: 8px;
  min-width: 52px;
  border-radius: 14px;
  background: #f5f5f8;
  color: #222;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  letter-spacing: 1px;
}
.si-calculation-right .data-name {
  font-family: var(--poppins);
  font-size: 15px;
  font-weight: 600;
  color: #222;
  letter-spacing: -0.2px;
}
.si-calculation-right [class^='badge'] {
  display: inline-block;
  margin-left: 11px;
  padding: 5px;
  min-width: 56px;
  border-radius: 5px;
  line-height: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.si-calculation-right .badge1 {
  color: #475df1;
  background: #dadffc;
}
.si-calculation-right .badge2 {
  color: #4f4f4f;
  background: #f2f2f2;
}
.si-calculation-right .input-group {
  min-width: 133px;
  min-height: 39px;
}
.si-calculation-right .input-btn,
.si-calculation-right .delete-btn {
  margin-left: 5px;
  height: 39px;
  background: #f5f5f8;
  font-size: 14px;
  color: #7d7d7d;
  text-align: center;
  border-radius: 3px;
}
.si-calculation-right .input-btn {
  width: 82px;
  font-weight: 500;
}
.si-calculation-right .delete-btn {
  width: 42px;
}
.si-calculation-right .delete-btn::before {
  content: '\e921';
  font-family: var(--xeicon);
  font-size: 16px;
}

.si-calculation-right button:hover,
.si-calculation-right button:active {
  background: #e9e9ec;
}

.si-calculation-right .registration-form .base-table .tr-nodata td {
  padding: 143px 8px;
  font-size: 0.7rem;
}

/* 계산식 에디터 */
.si-calculation-editor {
  display: flex;
  padding-top: 40px;
  gap: 15px;
}
.si-editor-wrap {
  width: calc(100% - 172px);
}
.si-editor-wrap .tit-wrap {
  align-items: end;
  margin-bottom: 8px;
}

.si-editor-menu button {
  width: 74px;
  height: 34px;
  border-radius: 3px;
  background: #f5f5f8;
  color: #7d7d7d;
  font: 600 18px/1 var(--font-be-vietnam-pro);
}
.si-editor-menu button + button {
  margin-left: 8px;
}
.si-editor-menu button:hover,
.si-editor-menu button:active {
  background: #e9e9ec;
}
.si-editor-menu button:active {
  transform: translateY(1px);
}

.si-editor {
  padding: 14px 20px;
  width: 100%;
  min-height: 135px;
  border: 1px solid #efeff1;
  border-top: 2px solid #e1e1e1;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 2.2;
  font-family: var(--poppins);
}
.si-editor:focus {
  outline: none;
}
.si-editor .active {
  font-size: 17px;
  font-weight: 700;
  color: #222;
}
.si-editor .data {
  padding: 4px 13px;
  border-radius: 14px;
  background: #f5f5f8;
  text-align: center;
  letter-spacing: 0.5px;
  font-size: 15px;
  font-weight: 600;
}

.si-btn-wrap {
  padding-top: 42px;
  width: 166px;
}
.si-btn-wrap button {
  width: 100%;
  min-height: 60px;
  border-radius: 3px;
  font-size: 20px;
  font-weight: 300;
}
.si-btn-wrap button + button {
  margin-top: 15px;
}
.si-btn-wrap button .xi-refresh {
  font-size: 21px;
  transform: rotate(315deg);
  transition: all 0.2s;
}
.si-btn-wrap button:hover .xi-refresh {
  transform: rotate(560deg);
}

/* ================================================================= */

/*************************************
    5. 기자재[asset]
*************************************/
.asset-page .d-day-wrap {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  min-width: 89px;
}
.asset-page .d-day-wrap::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 11px;
  background: #d6d6d6;
  margin: 0 5px;
}
.asset-page .d-day::before {
  content: '\f073';
  font-family: var(--lineawesome);
  font-size: 0.9rem;
  color: #bfbfbf;
  display: inline-block;
  margin-right: 3px;
  vertical-align: bottom;
}
.asset-page .d-day.finish::before {
  content: '\f272';
}
.asset-page .d-day-wrap .day {
  margin: 0 0 0 -3px;
}
.asset-page .inventory-wrap {
  display: block;
  text-align: right;
}
.asset-page .asset-img-wrap img {
  display: inline-block;
  margin: 8px;
  height: 309px;
  border: 1px solid #e3e3e3;
}

.current-state * {
  font-size: 14px;
}
.current-state .state {
  position: relative;
  padding-left: 20px;
}
.current-state .state::before {
  content: '';
  font-family: var(--xeicon);
  font-size: 0.85rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.current-state .approval::before {
  content: '\e92b';
  color: #475df1;
}
.current-state .reject::before {
  content: '\e924';
  color: #f8554e;
}
.current-state .num {
  margin-left: 4px;
  font-weight: 500;
}
.current-state .approval .num {
  color: #475df1;
}
.current-state .reject .num {
  color: #f8554e;
}
.current-state .approval::after {
  content: '';
  display: inline-block;
  margin: 0 5px 0 11px;
  vertical-align: middle;
  width: 1px;
  height: 12px;
  background: #c6c6c6;
}

/* 기자재[asset] - 목록화면 아이콘 픽스
--------------------------------------------- */
.stock-btn::after {
  font-family: var(--lineawesome);
  content: '\f05a';
} /*재고정보*/
.warn-btn {
  color: #f8554e;
}
.warn-btn::after {
  font-family: var(--lineawesome);
  content: '\f071';
} /*부족*/
.inventory-btn::after {
  font-family: var(--lineawesome);
  content: '\f466';
} /*보관함*/
.info-btn::after {
  font-family: var(--lineawesome);
  content: '\f15c';
} /* 정보 */
.base-table .lock::after {
  font-family: var(--lineawesome);
  content: '\f023';
  color: #8d8d8d;
  font-size: 16px;
  font-weight: bold;
}

/* 기자재[asset] - 답변폼
--------------------------------------------- */
.answer-form .answer-group ~ .answer-group {
  margin-top: 20px;
}
.answer-form .tit-wrap {
  justify-content: flex-start;
  align-items: baseline;
}
.answer-form .tit-wrap .current {
  display: inline-block;
  margin-left: 7px;
  padding: 0 5px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  cursor: default;
  background: #dadffc;
}
.answer-form .tit-wrap .current em {
  font-size: 0.6rem;
  font-weight: 500;
  color: #3a4ed8;
}
.answer-form .tit-wrap .current::before {
  font-family: var(--lineawesome);
  content: '\f4ad';
  font-size: 0.75rem;
  color: #3a4ed8;
  display: inline-block;
  vertical-align: middle;
}
.answer-form .top {
  display: flex;
  align-items: center;
}
.answer-form .top .view,
.answer-form .top .toggle-btn {
  height: 100%;
  border-radius: 3px;
  height: 47px;
  line-height: 47px;
  font-size: 0.7rem;
}
.answer-form .top .view {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 140px);
  padding: 0 24px;
  color: #777;
  background: #efeff1;
  cursor: default;
  font-weight: 600;
}
.answer-form .top .view .state {
  color: #475df1;
  font-weight: 600;
}
.answer-form .top .view .company {
  margin-left: 18px;
  font-weight: 600;
}
.answer-form .toggle-btn {
  margin-left: 9px;
  width: 140px;
  background: #475df1;
  text-align: center;
  color: #fff;
}
.answer-form .toggle-btn::after {
  content: '옵션 전체보기';
}
.answer-form .toggle-btn::before {
  content: '\f107';
  font-family: var(--lineawesome);
  color: #fff;
  font-size: 0.7rem;
  font-weight: bold;
  margin-right: 5px;
}
.answer-form .toggle-btn.active {
  background: #7f8192;
}
.answer-form .toggle-btn.active::before {
  content: '\f106';
}
.answer-form .toggle-btn.active::after {
  content: '닫기';
}
.answer-form .hidden-wrap {
  position: relative;
  padding: 30px 18px 18px;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid #efeff1;
  border-radius: 3px;
}
.answer-form .hidden-wrap .ok-btn {
  position: absolute;
  top: 10px;
  right: 18px;
  z-index: 100;
}

/* ================================================================= */

/*************************************
    6. 선박[vessel]
*************************************/

/* 운항일정 */
.task-style-on {
  border-left-color: #475df1;
  background: #eceefe;
  color: #475df1;
}
.task-style-off {
  border-left-color: #808080;
  background: #f6f6f7;
  color: #808080;
}

.cal-task .lst-item {
  max-width: 89%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-task[class*='task-style-'] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 5px;
}
.cal-task[class*='task-style-'] .lst-item::before {
  content: '\f21a';
  font-family: var(--lineawesome);
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
}
.task-style-on .lst-item::before {
  color: #475df1;
}
.task-style-off .lst-item::before {
  color: #808080;
}
.cal-task[class*='task-style-'] .item {
  vertical-align: middle;
}
.cal-task .num::before {
  content: '\f0ad';
  font-family: var(--lineawesome);
  font-size: 14px;
  font-weight: bold;
  padding-right: 3px;
}

.item-lst-wrap {
  display: flex;
  align-items: center;
}
.item-lst-wrap small.tit {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: #959595;
  font-weight: 600;
}
.item-lst-wrap li.hyphen {
  flex-shrink: 0;
  margin: 23px 10px 0;
}
.item-lst-wrap .input-group {
  min-width: 150px;
}
.item-lst-wrap + button {
  align-self: flex-end;
}

.item-lst-wrap2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.item-lst-wrap2 small.tit {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: #b7b7b7;
  font-weight: 600;
}
.item-lst-wrap2 li {
  flex: 1;
}
.item-lst-wrap2 li .register-write {
  width: 100%;
}
.item-lst-wrap2 li.btn {
  align-self: end;
  flex: initial;
}
.item-lst-wrap2 button {
  margin: initial;
}
.item-lst-wrap2 + .item-lst-wrap2 small {
  margin-top: 10px;
}

/* ================================================================= */

/*************************************
    7. 교육[edu]
*************************************/

/* ================================================================= */

/*************************************
    8. 커뮤니티[commu]
*************************************/

/* 커뮤니티[commu] - 답변폼
--------------------------------------------- */
.detail-form .answer-wrap .tit-wrap {
  display: flex;
  justify-content: space-between;
}
.detail-form .answer-wrap .tit-wrap .tit {
  font-weight: 700;
  font-size: 0.8rem;
  color: #222;
}
.detail-form .answer-wrap .tit-wrap .tit.success {
  color: #475df1;
}
.detail-form .answer-wrap .tit-wrap .info span {
  font-family: var(--font-be-vietnam-pro);
  font-weight: 600;
  font-size: 0.6rem;
  color: #777;
}
.detail-form .answer-wrap .answer-txt {
  position: relative;
  padding-top: 8px;
  word-break: break-all;
  font: 500 15px/1.6 var(--font-be-vietnam-pro);
  color: #000;
}
.detail-form .answer-wrap .answer-txt::before {
  content: '\f01e';
  font-family: var(--lineawesome);
  font-weight: bold;
  color: #777;
  position: absolute;
  top: 8px;
  left: -22px;
}

/* ================================================================= */

/*************************************
    9. 계약[contract]
*************************************/
.view-tab-wrap .tab2 {
  margin-bottom: 15px;
  border-bottom: 1px solid #efeff1;
}
.view-tab-wrap .tab2 li a {
  background: #f6f6f6;
  min-width: 130px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  font-weight: 600;
  transition: font-weight 0.2s;
  border-top: 1px solid #f0f0f2;
  border-left: 1px solid #f0f0f2;
}
.view-tab-wrap .tab2 li a:last-child {
  border-right: 1px solid #f0f0f2;
}
.view-tab-wrap .tab2 li a::after {
  height: 2px;
}
.view-tab-wrap .tab2 li.current a {
  background: #fff;
  font-weight: 600;
}

.view2-tab-wrap .tab2 {
  margin: 15px 0;
  border-bottom: 3px solid #e1e1e1;
  border-top: 1px solid #efeff1;
}
.view2-tab-wrap table td.border-right {
  border-right: 1px solid var(--table-border);
}

/* ================================================================= */

/*************************************
    10. 시스템[system]
*************************************/
.system-page .view-form .logo-box {
  display: inline-block;
}
.system-page .view-form .logo-box span {
  display: inline-block;
}
.system-page .view-form .logo-box .img {
  vertical-align: middle;
}
.system-page .view-form .logo-box .name::before {
  content: '/';
  margin-right: 5px;
}
.system-page .map-container {
  height: 450px;
}

/* 시스템[system] code-manage-area 코드관리
--------------------------------------------- */
.code-manage-area {
  display: flex;
  min-height: 70vh;
  overflow: hidden;
}
.code-manage-area .list-wrap {
  padding-right: 52px;
  width: 694px;
  border-right: 1px solid #e6e6e6;
}
.code-manage-area .detail-wrap {
  padding-left: 52px;
  width: calc(100% - 694px);
}
.code-manage-area .tit-wrap {
  align-items: flex-end;
  margin-bottom: 10px;
  height: 35px;
}
.code-manage-area .tit-wrap .heading2 {
  margin-bottom: 0;
  font-weight: 500;
}

.code-manage-area .cover {
  padding: 36px 50px;
  height: calc(100% - 36px);
  background: #f5f5f8;
}
.code-manage-area .list-wrap .cover {
  padding: 36px 30px 36px 50px;
} /*스크롤영역*/
.code-manage-area .tit-header {
  display: block;
  padding-bottom: 18px;
  font-size: 30px;
  font-weight: 600;
  color: #455eee;
  border-bottom: 1px solid #dddddf;
  overflow: hidden;
}
.code-manage-area .tit-header span {
  position: relative;
  margin-left: 10px;
}
.code-manage-area .tit-header span::before {
  content: '';
  display: inline-block;
  margin-right: 10px;
  width: 1px;
  height: 19px;
  background: #c0c7f5;
}

/* 시스템[system] inner
--------------------------------------------- */
.code-manage-area .inner {
  padding: 24px 0;
}
.code-manage-area .inner .tit {
  position: relative;
  margin-bottom: 5px;
  padding-left: 25px;
  font-size: 18px;
  color: #6b6b6b;
  font-weight: 600;
}
.code-manage-area .inner .txt {
  font-size: 15px;
  font-weight: 500;
  color: #6b6b6b;
  line-height: 1.6;
}
.code-manage-area .inner .tit.tit1 + .txt {
  color: #475df1;
  font-weight: 700;
}
.code-manage-area .inner .tit.tit2 {
  margin-top: 40px;
}
.code-manage-area .inner .tit::before {
  content: '';
  font-family: var(--lineawesome);
  font-size: 1.3rem;
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 3px;
}
.code-manage-area .inner .tit.tit1::before {
  content: '\f1c9';
}
.code-manage-area .inner .tit.tit2::before {
  content: '\f15c';
}
.code-manage-area .no-code {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.code-manage-area .no-code i {
  margin-bottom: 5px;
  font-size: 3rem;
}
.code-manage-area .no-code p {
  font-size: 0.7rem;
}
.code-manage-area .select-group {
  margin-bottom: 17px;
  min-width: 126px;
  height: 34px;
}
.code-manage-area .select-group select {
  font-weight: 600;
  color: #000;
  border-color: #eaeaf2;
  border-radius: 5px;
}

/* 시스템[system] code-list
--------------------------------------------- */
.code-scroll-wrap {
  max-height: 52vh;
  overflow-y: auto;
}
.code-list {
  padding-right: 25px;
}
.code-list li.dropdown > a::before {
  content: '';
  position: absolute;
  left: -2px;
  width: 5px;
  height: 100%;
  background: #475df1;
}
.code-list a.form {
  position: relative;
  z-index: 10;
  padding: 0 15px;
  margin-bottom: 12px;
  display: block;
  height: 34px;
  line-height: 34px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #eaeaf2;
  border-left: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #000;
  transition: all 0.3s;
  overflow: hidden;
}
.code-list a.form span {
  position: relative;
  padding-left: 18px;
}
.code-list a.form span::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 8px;
  width: 1px;
  height: 10px;
  background: #c0c7f5;
}
.code-list em.mark {
  margin-left: 8px;
  padding: 0 8px;
  border-radius: 15px;
  background: #ccc;
  font-size: 0.5rem;
  color: #fff;
  vertical-align: middle;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}
.code-list em.mark.mark1 {
  background: #455eee;
} /*part*/
.code-list em.mark.mark2 {
  background: #313340;
} /*tool*/
.code-list em.mark.mark3 {
  background: #ffaa3b;
} /*PPE*/
.code-list em.mark.mark4 {
  background: #7b51b3;
} /*equipment*/
.code-list em.mark.mark5 {
  background: #777c9f;
} /*expendable*/
.code-list em.mark.mark6 {
  background: #ee7945;
} /*no-name*/
.code-list em.mark.mark7 {
  background: #5fb2b9;
} /*no-name*/
.code-list em.mark.mark8 {
  background: #49aa8d;
} /*no-name*/

.code-list a.form::after {
  content: '\f061';
  font-family: var(--lineawesome);
  font-size: 0.9rem;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  height: 34px;
  transition: all 0.3s;
}
.code-list a.form:hover::after,
.code-list a.active::after {
  right: 15px;
}
.code-list a.form:hover,
.code-list ul.sub a.form:hover {
  background: #475df1;
  color: #fff;
}
.code-list a.form:hover em.mark,
.code-list a.active em.mark {
  background: #fff;
  color: #000;
} /*mark*/
.code-list a.active {
  background: #475df1;
  color: #fff !important;
}

.code-list ul.sub {
  display: none;
  margin-left: 34px;
}
.code-list ul.sub li {
  position: relative;
}
.code-list ul.sub li::before {
  content: '';
  position: absolute;
  top: -29px;
  left: -25px;
  width: 25px;
  height: 47px;
  border-left: 1px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
}
.code-list ul.sub a.form {
  color: #8b8b8b;
  font-weight: 400;
}

/*************************************
    캘린더 
*************************************/
.calendar {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(107px, 1fr));
  grid-template-rows: 50px;
  grid-auto-rows: 107px;
  border-top: 1px solid #eaeaf2;
}
.calendar-contain {
  margin: auto;
  width: 100%;
  background: #fff;
}
.calendar-header {
  position: relative;
  display: flex;
  padding: 0 0 20px;
  background: #fff;
}
.calendar-header h1 {
  display: inline-block;
  vertical-align: middle;
  font-size: 26px;
  font-weight: 600;
  color: #1c1d21;
}
.calendar-header .task-legend {
  position: absolute;
  right: 0;
  bottom: 16px;
}
.calendar-header .task-legend li {
  float: left;
}
.calendar-header .task-legend li + li {
  margin-left: 15px;
}
.calendar-header .task-legend li::before {
  content: '';
  display: inline-block;
  margin-right: 4px;
  width: 11px;
  height: 11px;
  background: #ccc;
  vertical-align: middle;
}
.calendar-header .task-legend li.th1::before {
  background: #51b35f;
}
.calendar-header .task-legend li.th2::before {
  background: #7b51b3;
}
.calendar-header .task-legend li.th3::before {
  background: #ffc342;
}
.calendar-header .task-legend li.th4::before {
  background: #5fb2b9;
}
.calendar-header .task-legend li.th5::before {
  background: #e871cb;
}
.calendar-header .task-legend li.th6::before {
  background: #9cb95f;
}
.calendar-header .task-legend li.th7::before {
  background: #5168dd;
}
.calendar-header .task-legend li.th8::before {
  background: #f8655f;
}
.calendar-header .task-legend li.th9::before {
  background: #ff9460;
}
.calendar-header .task-legend li.th10::before {
  background: #8e8e8e;
}
.calendar-header .task-legend li a {
  font-size: 12px;
  color: #1c1d21;
}

.calendar-header .arrow-wrap {
  margin: 0 25px 0 13px;
}
.calendar-header .arrow {
  position: relative;
  width: 31px;
  height: 31px;
  line-height: 31px;
  border: 1px solid #efeff5;
  border-radius: 3px;
  background: #fff;
  transition: background 0.3s;
}
.calendar-header .arrow + .arrow {
  margin-left: 4px;
}
.calendar-header .arrow:hover,
.calendar-header .arrow:active {
  background: #f7f7f7;
}
.calendar-header .arrow:hover i,
.calendar-header .arrow:active i {
  font-size: 0.75rem;
}
.calendar-header .arrow i {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9rem;
  color: #1c1d21;
}
.calendar-header .select-group {
  height: 32px;
  min-width: 151px;
}
.calendar-header .select-group select {
  border-color: #efeff5;
}

.cal-day {
  position: relative;
  border-bottom: 1px solid #eaeaf2;
  border-right: 1px solid #eaeaf2;
  font-size: 12px;
  box-sizing: border-box;
  color: #222;
}
.cal-day.holiday .holiday-txt {
  display: inline-block;
  margin: 8px;
  float: right;
  color: #f8554e;
  font-size: 14px;
}
.cal-day.holiday:not(.today) {
  color: #f8554e;
}
.cal-day.today > div {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #f8554e;
  color: #fff;
  text-align: center;
}
.cal-day > div:not(.task-more-popup) {
  display: inline-block;
  margin: 8px;
}
.cal-day:nth-of-type(7n + 7) {
  border-right: 0;
}
.cal-day:nth-of-type(n + 1):nth-of-type(-n + 7) {
  grid-row: 2;
}
.cal-day:nth-of-type(n + 8):nth-of-type(-n + 14) {
  grid-row: 3;
}
.cal-day:nth-of-type(n + 15):nth-of-type(-n + 21) {
  grid-row: 4;
}
.cal-day:nth-of-type(n + 22):nth-of-type(-n + 28) {
  grid-row: 5;
}
.cal-day:nth-of-type(n + 29):nth-of-type(-n + 35) {
  grid-row: 6;
}
.cal-day:nth-of-type(7n + 1) {
  grid-column: 1/1;
}
.cal-day:nth-of-type(7n + 2) {
  grid-column: 2/2;
}
.cal-day:nth-of-type(7n + 3) {
  grid-column: 3/3;
}
.cal-day:nth-of-type(7n + 4) {
  grid-column: 4/4;
}
.cal-day:nth-of-type(7n + 5) {
  grid-column: 5/5;
}
.cal-day:nth-of-type(7n + 6) {
  grid-column: 6/6;
}
.cal-day:nth-of-type(7n + 7) {
  grid-column: 7/7;
}

.day-name {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  text-align: center;
  border-bottom: 2px solid #eaeaf2;
  line-height: 50px;
}
.day-name.active,
.day-name.today {
  border-bottom-color: #f8554e;
}
.day--disabled {
  color: #777;
  background: #e5e5e526;
}
.cal-task {
  position: relative;
  z-index: 99;
  padding: 4px 12px;
  display: block;
  width: 100%;
  overflow: hidden;
  border-left-style: solid;
  border-left-width: 3px;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-task * {
  font-size: inherit;
  font-weight: inherit;
}
.cal-task + .cal-task {
  margin-top: 2px;
}
.cal-task .name {
  margin-right: 3px;
}
.cal-task i {
  margin: 0 3px;
}

.task-style1 {
  border-left-color: #51b35f;
  background: #edf7ef;
  color: #51b35f;
}
.task-style2 {
  border-left-color: #7b51b3;
  background: #f2edf7;
  color: #7b51b3;
}
.task-style3 {
  border-left-color: #ffc851;
  background: #fff9ec;
  color: #ffc342;
}
.task-style4 {
  border-left-color: #5fb2b9;
  background: #eff7f8;
  color: #5fb2b9;
}
.task-style5 {
  border-left-color: #e871cb;
  background: #fdf6fc;
  color: #e871cb;
}
.task-style6 {
  border-left-color: #9cb95f;
  background: #f6f8f0;
  color: #9cb95f;
}
.task-style7 {
  border-left-color: #5168dd;
  background: #f1f2fa;
  color: #5168dd;
}
.task-style8 {
  border-left-color: #f8655f;
  background: #f8efee;
  color: #f8655f;
}
.task-style9 {
  border-left-color: #ff9460;
  background: #fdf3ed;
  color: #ff9460;
}
.task-style10 {
  border-left-color: #8e8e8e;
  background: #ececec;
  color: #8e8e8e;
}

.task-more {
  margin: 5px 0;
  display: block;
  text-align: center;
  font-size: 12px;
}
.task-more em {
  margin: 0 3px;
}
.task-more:hover {
  font-weight: 500;
}

.task-more-popup {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  padding-bottom: 23px;
  width: 278px;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #eaeaf2;
  animation: task-more-ani 0.5s ease-in-out;
  box-shadow: 1px 1px 12px 3px rgba(24, 24, 57, 0.1);
}
.task-more-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 15px 7px;
}
.task-more-header .close-btn {
  position: relative;
}
.task-more-header .close-btn::before {
  content: '\f00d';
  font-family: var(--lineawesome);
  font-size: 0.85rem;
  color: #a7a7a7;
  font-weight: bold;
  transform: rotate(0);
  transition: all 0.3s;
}
.task-more-header .close-btn::after {
  content: '';
  opacity: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4f4f4;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.task-more-header .close-btn:hover::after {
  opacity: 1;
}

@keyframes task-more-ani {
  0% {
    transform: translate(-50%, -35%);
    opacity: 0;
  }
  80% {
    transform: translate(-50%, -55%);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%);
  }
}

/* ================================================================= */
/* 발전량 페이지 (demo-power-page)*/

/* 발전량페이지 - 선택된 아이템 스타일링 */
.demo-power-page .fixed-search-form2 .chip-lst ul {
  gap: 63px;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li::after {
  right: -35px;
  width: 2px;
  height: 38px;
  background: #dcdcdc;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li:last-child::after {
  content: none;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type0 {
  border-color: #777;
} /* @parkjk #fff; */
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type1 {
  border-color: #475cef;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type2 {
  border-color: #cb8b00;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type3 {
  border-color: #ff1b00;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type4 {
  border-color: #258b94;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type5 {
  border-color: #c592e5;
} /* @parkjk */
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type0::before {
  color: #777;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type1::before {
  color: #475cef;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type2::before {
  color: #cb8b00;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type3::before {
  color: #ff1b00;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type4::before {
  color: #258b94;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type5::before {
  color: #c592e5;
} /* @parkjk */
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type0 span {
  color: #777;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type1 span {
  color: #475cef;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type2 span {
  color: #cb8b00;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type3 span {
  color: #ff1b00;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type4 span {
  color: #258b94;
}
.demo-power-page .fixed-search-form2 .chip-lst ul li .item.type5 span {
  color: #c592e5;
} /* @parkjk */

/* 발전량페이지 - 그래프 범례 */
.demo-power-page .legend-wrap em {
  font-size: 14px;
}
.demo-power-page .legend-wrap em ~ em {
  margin-left: 25px;
}
.demo-power-page .legend-wrap em::before {
  content: '';
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #d7d8e1;
  border-radius: 50%;
}
.demo-power-page .chart-result .badge-custom {
  min-width: 47px;
  background: #d7d8e1;
}

/*@parkjk */
.demo-power-page .legend-wrap em.a::before {
  background-color: #777;
}
.demo-power-page .legend-wrap em.b::before {
  background-color: #475cef;
}
.demo-power-page .legend-wrap em.c::before {
  background-color: #cb8b00;
}
.demo-power-page .legend-wrap em.d::before {
  background-color: #ff1b00;
}
.demo-power-page .legend-wrap em.e::before {
  background-color: #258b94;
}
.demo-power-page .legend-wrap em.f::before {
  background-color: #c592e5;
}
/*//@parkjk */

/* 발전량페이지 - 결과 테이블 범례 */
.demo-power-page .legend {
  display: inline-block;
  vertical-align: middle;
  color: #5d5d5d;
}
.demo-power-page .legend .machine::before {
  content: '>';
  margin: 0 3px;
  font-size: 12px;
}
.demo-power-page .legend::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 2px 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
}
.demo-power-page .legend.a::before {
  background-color: #475df1;
}
.demo-power-page .legend.b::before {
  background-color: #edaf2b;
}
.demo-power-page .legend.c::before {
  background-color: #5fb2b9;
}
.demo-power-page .legend.d::before {
  background-color: #c592e5;
}
.demo-power-page .legend.e::before {
  background-color: #f6604e;
}
/* @@parkjk */
th.th-legend::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 2px 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
}
th.th-legend.a::before {
  background-color: #777;
}
th.th-legend.b::before {
  background-color: #475cef;
}
th.th-legend.c::before {
  background-color: #cb8b00;
}
th.th-legend.d::before {
  background-color: #ff1b00;
}
th.th-legend.e::before {
  background-color: #258b94;
}
th.th-legend.f::before {
  background-color: #c592e5;
}
/* //@@parkjk */

/* 발전량페이지 - 결과 테이블 숫자 스타일링 */
.demo-power-page .chart-result .base-table td > .num {
  display: inline-block;
  min-width: 30px;
  text-align: right;
}
.demo-power-page .chart-result .base-table th:first-child,
.demo-power-page .chart-result .base-table td:first-child {
  padding-left: 44px;
}

/* ================================================================= */

/* 반응형 데스크탑(2560px) */
@media screen and (min-height: 1215px) and (max-height: 1440px) {
  .code-manage-area {
    height: 78vh;
  }
  .code-scroll-wrap {
    max-height: calc(100% - 5vh);
  }
  .blade-damage-area .download-lst-area .download-lst {
    max-height: 400px;
  }
}