influence/assets/scss/mode-w-m.scss

@charset "UTF-8";
/**********************************************
| 2024-08-26 김민정 :
**********************************************/

// ========== 검색 영역 스타일 (cs--list 내부) ==========
.cs--search-area {
  background: linear-gradient(#f0f4ff 0%, #ffffff 100%);
  padding: 1.25rem;

  .search-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;

    .search-filter {
      min-width: 120px;
      
      .v-select {
        .v-field {
          background: white;
          border-radius: 8px;
          border: 1px solid #dee2e6;
          
          &:hover {
            border-color: #adb5bd;
          }
          
          &.v-field--focused {
            border-color: #0d6efd;
          }
        }
      }
    }

    .search-input {
      flex: 1;
      min-width: 250px;
      
      .v-text-field {
        .v-field {
          background: white;
          border-radius: 8px;
          border: 1px solid #dee2e6;
          
          &:hover {
            border-color: #adb5bd;
          }
          
          &.v-field--focused {
            border-color: #0d6efd;
          }
        }
        
        .v-field__prepend-inner {
          .mdi-magnify {
            color: #6c757d;
            opacity: 0.7;
          }
        }
      }
    }

    .search-actions {
      display: flex;
      gap: 0.5rem;

      .btn--pp{
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      .v-btn {
        border-radius: 8px;
        font-weight: 500;
        text-transform: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
        font-size: 1rem;
        &:hover {
          transform: translateY(-1px);
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}

// ========== 아이템 추가 페이지 스타일 ==========
.modern-item-add {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e3f2fd 100%);

  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3rem 2rem 2rem 2rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
      pointer-events: none;
    }

    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      z-index: 2;

      .title-section {
        .page-title {
          color: white;
          font-size: 2.5rem;
          font-weight: 700;
          margin: 0 0 0.5rem 0;
          letter-spacing: -0.02em;
        }

        .page-subtitle {
          color: rgba(255,255,255,0.8);
          font-size: 1.1rem;
          margin: 0;
          font-weight: 300;
        }
      }

      .breadcrumb-section {
        .breadcrumb {
          display: flex;
          align-items: center;
          background: rgba(255,255,255,0.1);
          backdrop-filter: blur(10px);
          border-radius: 25px;
          padding: 0.75rem 1.25rem;
          border: 1px solid rgba(255,255,255,0.2);

          .breadcrumb-item {
            color: rgba(255,255,255,0.8);
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;

            &.active {
              color: white;
              font-weight: 600;
            }
          }

          .breadcrumb-divider {
            color: rgba(255,255,255,0.5);
            margin: 0 0.75rem;
            font-size: 1rem;
          }
        }
      }
    }
  }

  .main-content {
    .form-container {
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      overflow: hidden;
      margin-bottom: 2rem;

      .modern-form {
        .form-section {
          padding: 2rem;

          .section-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 1.25rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #e2e8f0;

            i {
              color: #667eea;
              font-size: 1.5rem;
            }
          }
          .form-field-group{
            display: flex;
            width: 100%;
            gap: 1rem;
            &.group--2{
              .form-field{
                width: calc(50% - 0.5rem);
              }
            }
          }

          .form-field {
            margin-bottom: 20px;

            .field-label {
              display: block;
              font-size: 1rem;
              font-weight: 600;
              color: #374151;
              margin-bottom: 0.75rem;

              .required-mark {
                color: #ef4444;
                margin-left: 0.25rem;
                font-weight: 700;
              }
            }

            .field-content {
              &.df--type{
                display: flex;
                gap: 1rem;
              }
              &.w--50{
                width: calc(50% - 0.5rem);
              }
              .display-value {
                padding: 0.875rem 1rem;
                background: #f8fafc;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                color: #374151;
                font-weight: 500;

                &.date-range {
                  display: flex;
                  width: 100%;
                  align-items: center;
                  gap: 0.5rem;
                  &.w--50{
                    width: calc(50% - 0.5rem);
                  }
                  i {
                    color: #667eea;
                  }
                }

                &.link-display {
                  .external-link {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    color: #667eea;
                    text-decoration: none;
                    font-weight: 500;
                    transition: all 0.3s ease;

                    &:hover {
                      color: #764ba2;
                      text-decoration: underline;
                    }

                    i {
                      font-size: 1.1rem;
                    }
                  }

                  .no-data {
                    color: #9ca3af;
                    font-style: italic;
                  }
                }
              }

              .modern-input {
                .v-field {
                  border-radius: 8px;
                  border: 2px solid #e5e7eb;
                  background: #fafafa;
                  transition: all 0.3s ease;

                  &:hover {
                    border-color: #d1d5db;
                    background: #fff;
                  }

                  &.v-field--focused {
                    border-color: #667eea;
                    background: #fff;
                    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
                  }
                }
              }

              .date-picker-wrapper {
                .date-picker-group {
                  display: flex;
                  align-items: center;

                  .date-picker-item {
                    .modern-date-picker {
                      width: 100%;
                      
                      .dp__input {
                        border: 2px solid #e5e7eb;
                        border-radius: 8px;
                        font-size: 16px;
                        padding: 16px;
                        background: #fafafa;
                        transition: all 0.3s ease;

                        &:hover {
                          border-color: #d1d5db;
                          background: #fff;
                        }

                        &:focus {
                          border-color: #667eea;
                          background: #fff;
                          box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
                        }
                      }
                    }
                  }

                  .date-separator {
                    color: #6b7280;
                    font-weight: 600;
                    padding: 0 0.5rem;
                  }
                }
              }

              .selector-wrapper {
                display: flex;
                align-items: center;
                gap: 1rem;

                .selector-input {
                  flex: 1;
                }

              }
              .selector-btn {
                height: 100%;
                border-radius: 8px;
                font-weight: 600;
                padding: 0.8rem 1.5rem;
                white-space: nowrap;
                border: 2px solid #667eea;
                
                i {
                  margin-right: 0.5rem;
                }

                &:hover {
                  color: white;
                  transform: translateY(-1px);
                  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
                }
              }
              .closed-btn {
                height: 100%;
                border-radius: 8px;
                font-weight: 600;
                padding: 0.8rem 1.5rem;
                white-space: nowrap;
                background: white !important;
                color: #b00020 !important;
                border: 2px solid #b00020 !important;
                transition: all 0.3s ease;
                
                i {
                  margin-right: 0.5rem;
                }

                &:hover {
                  transform: translateY(-1px);
                  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
                }
              }
            }
          }
        }
      }
      .v-field__outline__start{
        border: none;
      }
      .v-field__outline__end{
        border: none;
      }
    }

    .action-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .button-group {
        display: flex;
        gap: 1rem;

        .action-btn {
          border-radius: 8px;
          font-weight: 600;
          height: auto;
          padding: 0.8rem 1.5rem;
          background-color: #fff;
          transition: all 0.3s ease;

          i {
            margin-right: 0.5rem;
          }

          &.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;

            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
            }
          }

          &.secondary {
            &:hover {
              background: #f3f4f6;
              transform: translateY(-1px);
            }
          }

          &.danger {
            &:hover {
              background: #fef2f2;
              transform: translateY(-1px);
            }
          }
        }
      }
    }
  }

}

// ========== 인플루언서 모달 전역 스타일 ==========
.modern-modal {
  .modal-card {
    border-radius: 16px !important;
    overflow: hidden;

    .modal-header {
      font-size: 1rem;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
      color: white !important;
      padding: 1.2rem 1.2rem !important;
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;

      .modal-title {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;

        i {
          font-size: 1.2rem !important;
        }
      }

      .close-btn {
        color: rgba(255,255,255,0.8) !important;
        
        &:hover {
          color: white !important;
          background: rgba(255,255,255,0.1) !important;
        }
      }
    }

    .modal-content {
      padding: 1.2rem !important;

      .search-section {
        margin-bottom: 1.2rem;

        .v-field__outline__start{
          border: none;
        }
        .v-field__outline__end{
          border: none;
        }

        .search-input {
          .v-field {
            border-radius: 12px !important;
            border: 2px solid #e5e7eb !important;
            background: #fafafa !important;
            transition: all 0.3s ease !important;

            &:hover {
              border-color: #d1d5db !important;
              background: #fff !important;
            }

            &.v-field--focused {
              border-color: #667eea !important;
              background: #fff !important;
              box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
            }
          }
        }
      }

      .empty-state {
        text-align: center !important;
        padding: 3rem 2rem !important;

        i {
          font-size: 4rem !important;
          color: #e5e7eb !important;
          margin-bottom: 1rem !important;
        }

        h4 {
          color: #6b7280 !important;
          margin-bottom: 0.5rem !important;
        }

        p {
          color: #9ca3af !important;
          font-size: 0.9rem !important;
        }
      }

      .influencer-list-container {
        max-height: 400px !important;
        overflow-y: auto !important;

        .influencer-list-item {
          display: flex !important;
          align-items: center !important;
          padding: 0.75rem !important;
          border-radius: 12px !important;
          cursor: pointer !important;
          transition: all 0.3s ease !important;
          border: 2px solid #e5e7eb !important;
          margin-bottom: 0.75rem !important;
          position: relative !important;

          &:last-child{
            margin-bottom: 0!important;
          }

          &:hover {
            background: #f8fafc !important;
            border-color: #667eea !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1) !important;
          }

          &.selected {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
            border-color: #667eea !important;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
          }

          .item-avatar {
            min-width: 50px;
            margin-right: 0.5rem !important;
            width: 50px !important;
            height: 50px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            border-radius: 50% !important;

            i {
              font-size: 1.75rem !important;
              color: white !important;
            }
          }

          .item-info {
            display: flex;
            width: 100%;
            .nickname {
              color: #374151 !important;
              font-size: 1rem !important;
              font-weight: 600 !important;
            }

            .name {
              color: #6b7280 !important;
              font-size: 0.9rem !important;
            }

            .sns-info {
              margin-left: auto;
              display: flex !important;
              align-items: center !important;
              gap: 0.5rem !important;
              color: #9ca3af !important;
              font-size: 0.85rem !important;

              i {
                font-size: 1rem !important;
                color: #667eea !important;
              }
            }
          }

          .item-check {
            width: 24px !important;
            height: 24px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;

            i {
              font-size: 1.5rem !important;
              color: #667eea !important;
            }
          }
        }

        &::-webkit-scrollbar {
          width: 6px !important;
        }

        &::-webkit-scrollbar-track {
          background: #f1f5f9 !important;
          border-radius: 3px !important;
        }

        &::-webkit-scrollbar-thumb {
          background: #cbd5e1 !important;
          border-radius: 3px !important;
          
          &:hover {
            background: #94a3b8 !important;
          }
        }
      }
    }

    .modal-actions {
      padding: 1.5rem 2rem !important;
      border-top: 1px solid #e5e7eb !important;
      background: #f8fafc !important;
      display: flex !important;
      align-items: center !important;

      .action-info {
        color: #6b7280 !important;
        font-size: 0.9rem !important;

        strong {
          color: #374151 !important;
        }
      }

      .modal-btn {
        border-radius: 8px !important;
        font-weight: 600 !important;
        padding: 0 1.5rem !important;
        height: 40px !important;

        &.confirm {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
          border: none !important;
          color: white !important;

          &:hover:not(:disabled) {
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
            transform: translateY(-1px) !important;
          }

          &:disabled {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
          }
        }

        &.cancel {
          margin-right: 0.75rem !important;

          &:hover {
            background: #f3f4f6 !important;
          }
        }
      }
    }
  }

  .influencer-modal-card {
    max-width: 700px !important;
  }
}
.mt--125rem{
  margin-top: 1.25rem;
}
.mt--1rem{
  margin-top: 1rem;
}

// header
.container {
  .new--header {
    gap: 20px;
    background: #ffffff;
    /*height:calc(1vh * (90 / 10.8));*/
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-shrink: 0;
    position: relative;
    width: 340px;
    padding: 20px;
    z-index: 22;
    .pro--wrap{
      z-index: 30;
      border: 1px solid #cccccc;
      border-radius: 30px;
      padding: 30px;
      width: 100%;
      height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .pro--img{
        width: 96px;
        height: 96px;
        background-image: url(../img/pf_sample.svg);
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        margin-bottom: 20px;
      }
      .pro--id{
        cursor: pointer;
        position: relative;
        font-size: 1rem;
        font-weight: 500;
        margin-bottom: 20px;
        line-height: 1;
        .ico{
          font-style: normal;
          transform: rotate(90deg);
          display: inline-block;
          &.on{
            transform: rotate(270deg);
          }
        }
        .id--box{
          position: absolute;
          right: -50%;
          top: 100%;
          display: flex;
          z-index: 12;
          padding: 20px;
          flex-direction: column;
          white-space: nowrap;
          border-radius: 10px;
          border: 1px solid #cccccc;
          background-color: #fff;
          button{
            font-size: 0.8rem;
            padding: 10px;
          }
          // .btn-logout {
          //   width: 1.5rem;
          //   height: 1.5rem;
          //   background: url("../img/ico_logout.svg") no-repeat center / 100%;
          // }
        }
      }
      .pro--info{
        padding: 10px 30px;
        border-radius: 10px;
        color: #ffffff;
        font-weight: 500;
        line-height: 1;
        font-size: 0.8rem;
        background-color: #9475EC;
        pointer-events: none;
        margin:0 auto;
        &.inf{
          background-color: #F74F78;
        }
      }
    }

    .gnb {
      z-index: 10;
      border: 1px solid #cccccc;
      border-radius: 30px;
      padding: 30px;
      width: 100%;
      height: calc(100% - 320px);


      &:hover {
        .gnb-bg {
          height: 16rem;
        }

        .depth1 {
          >li {
            .depth2 {
              height: 16rem;
            }
          }
        }
      }

      .depth1 {
        display: flex;
        flex-direction: column;
        height: 100%;

        >li {
          position: relative;
          width:100%;
          >button {
            /* width: calc(1vw * (180 / 19.2)); */
            /* height:calc(1vh * (90 / 10.8)); */
            /* min-height:90px; */
            position: relative;
            padding-left: 2rem;
            width: 100%;
            text-align: left;
            height: 3.75rem;
            display: inline-block;
            color: #000000;
            font-size: 1rem;
            font-weight: 600;
            &:hover{
              background-color: #f2f7ff;
            }
            &.actv{
              &::before{
                content: '';
                position: absolute;
                left: 10px;
                top: calc(50% - 0.75rem);
                background-size: 100%;
                background-position: center;
                background-repeat: no-repeat;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16.3818 5C17.1394 5 17.8321 5.42793 18.1709 6.10547L19.7754 9.31543L23 11.4648V16C23 17.1046 22.1046 18 21 18H19.8262C19.4141 19.1647 18.3059 20 17 20C15.6941 20 14.5859 19.1647 14.1738 18H9.82617C9.41406 19.1647 8.30585 20 7 20C5.69415 20 4.58594 19.1647 4.17383 18H3C1.89543 18 1 17.1046 1 16V7C1 5.89543 1.89543 5 3 5H16.3818ZM7 16C6.44772 16 6 16.4477 6 17C6 17.5523 6.44772 18 7 18C7.55228 18 8 17.5523 8 17C8 16.4477 7.55228 16 7 16ZM17 16C16.4477 16 16 16.4477 16 17C16 17.5523 16.4477 18 17 18C17.5523 18 18 17.5523 18 17C18 16.4477 17.5523 16 17 16ZM3 16H4.17383C4.58594 14.8353 5.69415 14 7 14C8.30585 14 9.41406 14.8353 9.82617 16H14.1738C14.5859 14.8353 15.6941 14 17 14C18.3059 14 19.4141 14.8353 19.8262 16H21V12.5352L18.2246 10.6846L16.3818 7H3V16Z' fill='black'/%3E%3C/svg%3E");
                width: 1.5rem;
                height: 1.5rem;
              }

            }
          }

          .depth2 {
            position: absolute;
            overflow: hidden;
            height: 0;
            z-index: 10;
            width: 100%;
            transition: 0.5s 0s;

            ul {
              padding-top: 1.88rem;

              li {
                color: #333;
                font-size: 0.88rem;
                font-weight: 400;
                display: block;
                margin-bottom: 1.88rem;
                cursor: pointer;
                text-align: center;

                &.active {
                  color: #064F9E;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }

      .gnb-bg {
        position: fixed;
        /* top:calc(1vh * (90 / 10.8)); */
        top: 3.75rem;
        left: 0;
        right: 0;
        width: 100vw;
        background: #fff;
        z-index: 8;
        height: 0;
        transition: 0.5s 0s;
        box-shadow: 0 0.25rem 0.63rem 0 rgba(0, 0, 0, 0.25);
      }
    }

    .util {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      margin-left: auto;
      flex-shrink: 0;

      .ico {
        font-size: 0;
      }

      .btn-setting{
        width: 1.625rem;
        height: 1.625rem;
        background: no-repeat center / 100%;
        background-image: url(../img/ico_setting.svg);
      }

      .btn-alarm {
        width: 2rem;
        height: 2rem;
        position: relative;
        

        &.type1 {
          .ico {
            width: 2rem;
            height: 2rem;
            background-image: url("../img/ico_alarm4.svg");
            background-size: cover!important;
          }
        }

        &.type2 {
          .ico {
            width: 2rem;
            height: 2rem;
            background-image: url("../img/ico_alarm3.svg");
            background-size: cover!important;
          }
        }

        .ico {
          position: relative;
          width: 1.625rem;
          height: 1.625rem;
          background: no-repeat center / 100%;

          .dot {
            position: absolute;
            background: #E42325;
            width: 0.44rem;
            height: 0.44rem;
            border-radius: 100%;
            right: 0;
            top: 0;
          }
        }

        .alarm-detail {
          position: absolute;
          width: 8.75rem;
          height: 4.44rem;
          top: 3.00rem;
          left: 50%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          transform: translateX(-50%);
          padding: 1.31rem 1.25rem 1rem 1.25rem;
          background: url("../img/bg_tooltip.svg") no-repeat center / 100%;

          strong {
            color: #222222;
            font-size: 0.81rem;
            font-weight: 600;
          }

          .v-switch {
            width: 2.25rem;
            flex: 0 0 auto;

            .v-switch__track {
              background: #ECECEC;
              height: 0.75rem;
              width: 2.25rem;
              opacity: 1;
            }

            .v-switch__thumb {
              box-shadow: none;
              background: #92989E;
              width: 1.13rem;
              height: 1.13rem;
            }

            .v-selection-control {
              &.v-selection-control--dirty {
                .v-switch__track {
                  background: #D7E4F1;
                }

                .v-switch__thumb {
                  background: #064f9e;
                }
              }
            }

            .v-selection-control__input {
              &::before {
                display: none;
              }
            }

            .v-ripple__container {
              display: none;
            }
          }
        }
      }

      .btn-mode {
        position: relative;

        &.type1 {
          .ico {
            background-image: url("../img/ico_mode_white.svg");
          }
        }

        &.type2 {
          .ico {
            background-image: url("../img/ico_mode_dark.svg");
          }
        }

        .ico {
          width: 1.625rem;
          height: 1.625rem;
          background: no-repeat center / 100%;
        }

        .mode-detail {
          position: absolute;
          top: 3rem;
          left: 50%;
          transform: translateX(-50%);
          width: 12.63rem;
          height: 9.75rem;
          padding: 2.06rem 1.25rem 1.25rem 1.56rem;
          background: url("../img/bg_tooltip2.svg") no-repeat center / 100%;

          .custom-radio {
            .v-input__control {
              .v-selection-control-group {
                gap: 0.94rem;

                .v-radio {
                  position: relative;
                  height: 2.50rem;
                  margin: 0;
                  padding-left: 5.63rem;
                  flex: auto;

                  .v-selection-control__wrapper {
                    .v-selection-control__input {
                      width: 1.06rem;
                      height: 1.06rem;

                      .v-icon {
                        border-color: #c0c0c0;

                        &.mdi-radiobox-marked {
                          border-color: #007AFF;
                          background-color: #007AFF;
                          box-shadow: inset 0 0 0 0.13rem #fff
                        }
                      }
                    }
                  }

                  .v-label {
                    margin-left: 0.75rem;

                    .img {
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: 4.38rem;
                      height: 2.5rem;
                      background: no-repeat center / 100%;

                      &.img1 {
                        background-image: url("../img/img_mode_white.svg");
                      }

                      &.img2 {
                        background-image: url("../img/img_mode_dark.svg");
                      }
                    }

                    strong {
                      color: #333333;
                      font-size: 0.75rem;
                      font-weight: 400;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .btn-lang {
        position: relative;
        width: 1.625rem;
        height: 1.625rem;

        .ico {

          /*width: 2rem;
          height: 2rem;
          border: 0.06rem solid #fff;
          background-color: #0B318B;
          border-radius: 100%;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
          font-size: 0.81rem;*/
          &.KR {
            background-image: url(../img/ico_lang_korea2.svg);
            width: 1.625rem;
            height: 1.625rem;
            background-size: cover;
            display: inline-block;
            background-position: center;
          }

          &.EN {
            background-image: url(../img/ico_lang_english.svg);
            width: 1.625rem;
            height: 1.625rem;
            background-size: cover;
            display: inline-block;
            background-position: center;
          }
        }

        .lang-detail {
          position: absolute;
          top: 3rem;
          left: 50%;
          width: 9.75rem;
          height: 7.31rem;
          transform: translateX(-50%);
          background: url("../img/bg_tooltip3.svg") no-repeat center / 100%;
          padding: 1.63rem 1.25rem 1.25rem 1.56rem;

          .custom-radio {
            .v-input__control {
              .v-selection-control-group {
                gap: 0.94rem;

                .v-radio {
                  height: 1.63rem;
                  margin: 0;

                  .v-selection-control__wrapper {
                    .v-selection-control__input {
                      width: 1.06rem;
                      height: 1.06rem;

                      .v-icon {
                        border-color: #c0c0c0;

                        &.mdi-radiobox-marked {
                          border-color: #007AFF;
                          background-color: #007AFF;
                          box-shadow: inset 0 0 0 0.13rem #fff
                        }
                      }
                    }
                  }

                  .v-label {
                    margin-left: 0.75rem;

                    .img {
                      width: 1.63rem;
                      height: 1.63rem;
                      display: inline-block;
                      background: no-repeat center / 100%;

                      &.img1 {
                        background-image: url("../img/ico_lang_korea.svg");
                      }

                      &.img2 {
                        background-image: url("../img/ico_lang_english.svg");
                      }
                    }

                    strong {
                      color: #333333;
                      font-size: 0.75rem;
                      font-weight: 400;
                      margin-left: 0.63rem;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .divider {
        width: 0.06rem;
        height: 1.88rem;
        margin: 0 0.815rem;
        background: rgba(255, 255, 255, 0.5);
      }

      .user-info-wrap{
        display: flex;
        align-items: center;
        .user-info {
          display: flex;
          position: relative;
  
          .ico {
            width: 1.625rem;
            height: 1.625rem;
            background: #fff;
            border-radius: 100%;
            color: #438DFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
          }
  
          .info-detail {
            position: absolute;
            top: 2.7rem;
            left: 50%;
            width: 11.88rem;
            // height: 12.25rem;
            padding: 1.25rem;
            // background: url("../img/bg_tooltip4.svg") no-repeat center / 100%;
            transform: translateX(-50%);
            background: #FFF;
            border:1px solid #ddd;
            box-shadow:0px 4px 4px rgba(0, 0, 0, 0.20);          
            border-radius: 0.625rem;
            &:after{
              content: '';
              display: block;
              width: 0;
              height: 0;
              border-left: 0.40625rem solid transparent;
              border-right: 0.40625rem solid transparent;
              border-bottom: 0.6875rem solid #fff;
              position: absolute;
              top:-0.5875rem;
              left:50%;
              transform: translateX(-50%);
            }
            &:before{
              content: '';
              display: block;
              width: 0;
              height: 0;
              border-left: 0.40625rem solid transparent;
              border-right: 0.40625rem solid transparent;
              border-bottom: 0.6875rem solid #ddd;
              position: absolute;
              top:-0.6875rem;
              left:50%;
              transform: translateX(-50%);
            }
  
            .custom--btn--wrap{
              display: flex;
              flex-direction: column;
              gap:0.5rem;
            }
  
            p {
              color: #111;
              font-size: 0.94rem;
              font-weight: 700;
              margin-bottom: 0.94rem;
  
              span {
                font-weight: 600;
              }
            }
  
            ul {
              padding-bottom: 1.25rem;
              margin-bottom: 0.94rem;
              border-bottom: 0.06rem solid #e1e1e1;
              display: flex;
              flex-direction: column;
              gap: 0.25rem;
  
              li {
                color: #444444;
                font-size: 0.81rem;
                font-weight: 400;
              }
  
  
              &.nw--btn--text--type{
                gap:0.6rem;
                border-bottom:0px;
              }
            }
  
            .custom-btn.v-btn.v-btn--density-default {
              border: 0.06rem solid #D0DDEA;            
              border-radius: 0.31rem;
              width: 100%;
              height: 2.5rem;
              min-height: 2.5rem;
  
              .v-btn__content {
                color:#798592;              
                font-size: 0.75rem;
                font-weight: 600;
                letter-spacing: -0.01rem;
              }
  
  
              &:hover{
                .v-btn__content {
                  color: #064F9E!important;
                }              
                border: 0.06rem solid rgba(6, 79, 158, 0.5);
              }
            }
          }
        }
      }

      .user-name {
        color: #fff;
        font-size: 0.81rem;
        padding: 0 0.815rem;
        font-weight: 700;
        cursor: pointer;
      }
    }
  }
}

/**********************************************
| css 오버라이딩
**********************************************/
.ag-sort-indicator-icon{
  background-image: url(../img/bg_login.svg);
}

.tbl-list-top {
  margin-bottom: 1.25rem;

  .total {
    .total-num {
      strong {
        color: #444444;
        font-size: 0.875rem;
        font-weight: 400;

        span {
          color: #438dff;
          font-size: 0.875rem;
          font-weight: 700;
        }
      }

      .total-slt {
        &::before {
          margin: 0 0.75rem;
          background-color: #8e8e8e;
        }

        .custom-select {
          &.v-input {
            .v-input__control {
              .v-field {
                .v-field__field {
                  .v-field__input {
                    .v-select__selection {
                      margin-right: 0.5rem;

                      .page-list-item {
                        color: #444444;
                        font-size: 0.875rem;
                        font-weight: 700;

                        .page {
                          color: #444444;
                          font-weight: 400;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .grid-tit{
      color: #222;
      font-size: 0.9375rem;
      font-style: normal;
      margin-top: 1.2rem;
      line-height: 2.25rem;
      font-weight: 700;
      letter-spacing: -0.00938rem;
      text-transform: uppercase;
    }

    .total-btn {
      .custom-btn {
        &.v-btn {
          &.v-btn--density-default {
            &.btn-evt{
              width: 7.8125rem;
              border: 1px solid #afbece;
              background-color: #ffffff;
              .v-btn__content{
                color: #6F8AA6;
                .ico{
                  background-image: url(../img/ico_cal.svg);
                  width: 1.125rem;
                  height: 1.125rem;
                  background-size: cover;
                }
              }
              &.v-btn--disabled{
                background-color: #fbfbfb!important;
                border: 1px solid #e0e0e0;
                .v-btn__content{
                  color: #E0E0E0!important;
                  .ico{
                    background-image: url(../img/ico_cal_dis.svg);
                    width: 1.125rem;
                    height: 1.125rem;
                    background-size: cover;
                  }
                }
              }
            }

            &.btn-del {
              background-color: #6f8aa6;
              width: 5.25rem;

              &:hover {
                background-color: #adbfd2;
                box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
              }

              .v-btn__content {
                font-size: 0.875rem;
                font-weight: 600;

                .ico {
                  margin-right: 0.375rem;
                }
              }

              &.v-btn--disabled {
                .v-btn__content {
                  .ico {
                    background-image: url(../img/ico_del_disabled.svg);
                  }
                }
              }
            }

            &.v-btn--disabled {
              background: #e0e0e0 !important;

              .v-btn__content {
                color: #8e8e8e !important;
              }
            }
          }
        }
      }
      .custom-check {
        &.v-input {
          &.type2 {
            .v-input__control {
              .v-selection-control {
                .v-label {
                  padding-left: 0.37rem;
                  color: #444444;
                  font-size: 0.875rem;
                  font-weight: 500;
                  span{
                    color: #111111;
                    font-weight: 700;
                  }
                }
                .v-selection-control__wrapper{
                  .v-selection-control__input{
                    .v-icon{
                      background-size: cover;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .excel-search {
    gap: 0.5rem;

    .custom-btn {
      &.v-btn {
        &.v-btn--density-default {
          &.btn-excel {
            width: 8.56rem;
            border-radius: 0.5rem;
            background-color: #ffffff;

            .v-btn__content {
              font-size: 0.875rem;
            }

            &.v-btn--disabled {
              background-color: #fbfbfb !important;
              border: 1px solid #e0e0e0 !important;

              .v-btn__content {
                color: #e0e0e0 !important;

                .ico {
                  background-image: url(../img/ico_excel_d.svg);
                }
              }

              &.up {
                .v-btn__content {
                  .ico {
                    background-image: url(../img/ico_excel_d.svg) !important;
                  }
                }
              }
            }
          }
        }
      }
    }

    .custom-input {
      .v-input__control {
        .v-field__field {
          .v-field__input {
            width: 17.3125rem;
            padding-left: 0.75rem;
            font-size: 0.75rem !important;
            font-weight: 400 !important;

            &::placeholder {
              font-size: 0.75rem;
              font-weight: 400;
              color: #8e8e8e;
            }
          }
        }
      }
    }
  }
}

.view-btm-btn {
  >div {
    gap: 0.5rem;
  }

  .custom-btn {
    &.v-btn {
      &.v-btn--density-default {
        width: 5.25rem;
        height: 2.25rem;

        &.btn-list {
          width: 5.25rem;
          height: 2.25rem;
          border: 1px solid #e0e0e0;


          .v-btn__content {
            color: #8e8e8e;
            font-size: 0.875rem;
            font-weight: 600;

            .ico {
              width: 1.25rem;
              height: 1.25rem;
              margin-right: 0.38rem;
              background-image: url(../img/ico_view_list2.svg);
            }
          }


          &:hover {
            box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
          }
        }

        &.btn-del {
          width: 5.25rem;
          height: 2.25rem;
          border: none;
          background: #6F8AA6;

          .v-btn__content {
            color: #ffffff;
            font-size: 0.875rem;
            font-weight: 600;

            .ico {
              width: 1.125rem;
              height: 1.125rem;
              margin-right: 0.38rem;
              background-image: url(../img/ico_del2.svg);
            }
          }

          &:hover {
            background: #adbfd2;
            box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
          }

          &.v-btn--disabled {
            background-color: #e0e0e0 !important;

            .v-btn__content {
              color: #8e8e8e !important;

              .ico {
                background-image: url(../img/ico_del_disabled2.svg);
              }
            }
          }
        }

        &.btn-gray-bor2 {
          background-color: #6f8aa6;
          border: none;

          .v-btn__content {
            color: #ffffff;

            .ico {
              width: 1.25rem;
              margin-right: 0.38rem;
              height: 1.25rem;
              background-image: url(../img/ico_cancel.svg);
            }
          }

          &:hover {
            background-color: #adbfd2;
            box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
          }

          &.v-btn--disabled {
            background-color: #e0e0e0 !important;
            border: none;

            .v-btn__content {
              color: #8E8E8E !important;

              .ico {
                background-image: url(../img/ico_cancel_disabled.svg);
              }
            }
          }
        }

        &.btn-blue2 {
          background-color: #438dff;

          &:hover {
            background: #90BCFF;
            box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
          }

          &.v-btn--disabled {
            background-color: #e0e0e0 !important;

            .v-btn__content {
              color: #8e8e8e !important;

              .ico {
                background-image: url(../img/ico_save_disabled.svg);
              }
            }
          }

          .v-btn__content {
            .ico {
              width: 1.25rem;
              height: 1.25rem;
              margin-right: 0.37rem;
              background-image: url(../img/ico_save.svg);
            }
          }
        }
      }
    }
  }
}

.custom-dialog {
  border-radius: 0.5rem;

  .modal-desc {
    padding: 1.25rem;

    >strong {
      color: #000000;
      font-weight: 500;
      font-size: 0.875rem;
      line-height: 0.875rem;
    }
  }

  .modal-desc2 {
    padding: 0.65rem 1.25rem 0.65rem 1.25rem;

    ul {
      li {
        padding-left: 1.2rem;
        position: relative;
        color: #555555;
        font-size: 0.875rem;
        font-weight: 400;
        margin-bottom: 1rem;

        &:last-child {
          margin-bottom: 0;
        }

        &::before {
          width: 0.2rem;
          height: 0.2rem;
          display: inline-block;
          background-color: #555555;
          position: absolute;
          width: 0.31rem;
          height: 0.31rem;
          left: 0;
          top: 0.38rem;
          background: #C0C0C0;
          border-radius: 100%;
          content: "";
        }
      }
    }
  }

  .modal-tit {
    height: 4rem;
    padding: 1.25rem;
    border-bottom: none;

    >strong {
      font-size: 1rem;
      color: #000000;
      font-weight: 700;
      letter-spacing: -0.02rem;
    }

    .modal--btn--wrap{
      display: flex;
      margin-left: auto;
      gap: 1.25rem;
      .btn-bar{
        width: 1.5rem;
        height: 1.5rem;
        background-size: cover;
        background-image: url(../img/ico_bar.svg);
      }
      .btn-square{
        width: 1.5rem;
        height: 1.5rem;
        background-size: cover;
        background-image: url(../img/ico_square.svg);
      }
    }
    .btn-close {
      background-image: url(../img/ico_close.svg);
    }

  }

  .v-common-dialog-content {
    padding: 0.38rem 1.25rem 1.25rem 1.25rem;

    .info-mod {
      padding-bottom: 0;

      .mod-txt {
        font-size: 0.9375rem;
        margin-top: 1.56rem;
        margin-bottom: 1.94rem;
      }

      .txt-field-box {
        .custom-input {
          &.v-text-field {
            min-height: 2.25rem;

            .v-input__control {
              height: 2.25rem;

              .v-field__field {
                .v-field__input {
                  height: 2.25rem;
                  min-height: 2.25rem;
                  padding: 0 0.75rem;
                }
              }
            }
          }
        }
      }

      .error-txt {
        margin: 0.8rem 0 0 !important;
      }
    }

    .txt-field-box {
      &.error {
        .ico {
          right: 0.75rem;
        }
      }
    }

    .otp-reg {
      margin-top: 0;
      .otp-set-step{
        .otp-set-box{
          .tit{
            .num{
              background-color: #0B318B;
            }
          }
        }
      }
      .otp-box {
        .otp-certify {
          background-color: #F1F7FF;
          border-radius: 0.5rem;
          border: none;
          padding: 1.38rem 0;

          .error-txt {
            width: 15.625rem;
          }

          .certify-logo {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 0.94rem;

            .logo {
              width: 1.625rem;
              height: 1.625rem;
              background-image: url(../img/ico_logo.svg);
              background-size: cover;
            }

            >p {
              color: #333;
              font-size: 0.9375rem;
              font-style: normal;
              font-weight: 700;
              line-height: 100%;
              /* 0.9375rem */
            }
          }
z
          .txt-field-box {
            width: 15.625remf;

            &:nth-child(3) {
              margin-bottom: 0;
            }

            .v-input {
              &.v-text-field {
                &.custom-input {
                  &.mini {
                    min-height: 2.25rem;

                    .v-input__control {
                      height: 2.25rem;

                      .v-field__field {
                        .v-field__input {
                          height: 2.25rem;
                          min-height: 2.25rem;
                          padding: 0 0.75rem;
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .custom-btn {
            &.v-btn {
              &.v-btn--density-default {
                &.btn-blue-bor {
                  width: 15.625rem;
                  background-color: #0B318B;
                  border-radius: 0.5rem;
                  border: none;

                  &:hover {
                    background-color: #4875DE !important;
                    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.20);
                  }

                  .v-btn__content {
                    font-size: 0.9375rem !important;
                    font-weight: 700 !important;
                    letter-spacing: -0.02813rem !important;
                    color: #ffffff;
                  }

                  &.v-btn--disabled {
                    background-color: #e0e0e0 !important;

                    .v-btn__content {
                      color: #8e8e8e !important;
                    }
                  }
                }
              }
            }
          }
          .otp--certify--2{
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            >p{
              color: #0B318B;
              text-align: center;
              font-size: 1.125rem;
              font-weight: 700;
              margin-bottom: 0.94rem;
              letter-spacing: -0.01125rem;
            }
            >span{
              color: #444;
              text-align: center;
              font-size: 0.9375rem;
              font-weight: 400;
              letter-spacing: -0.00938rem;
              display: inline-block;
              margin-bottom: 1.87rem;
            }
            .txt-field-box{
              display: flex;
              align-items: center;
              width: 80%;
              justify-content: center;
              gap: 0.6rem;
              .v-btn {
                &.v-btn--density-default {
                  margin-top: 0;
                  &.btn-password {
                    background-color: #6f8aa6;
                    height: 2.25rem;
                    width: 6.875rem;
                    &.v-btn--disabled {
                      background-color: #fff !important;
                      border: 1px solid #CCC;
  
                      .v-btn__content {
                        color: #8e8e8e !important;
                      }
                    }
                  }
                  &.btn-blue{
                    width: 3.5rem;
                    height: 2.25rem;
                    &.v-btn--disabled {
                      background-color: #e0e0e0 !important;
                      .v-btn__content {
                        color: #8e8e8e !important;
                      }
                    }
                  }
                }
              }
            }
            .error-txt{
              width: 80%;
            }
          }
          .otp--certify--y{
            padding: 2.37rem 0;
            display: flex;
            flex-direction: column;
            gap: 1.88rem;
            align-items: center;
            justify-content: center;
            .ico{
              width: 5rem;
              height: 5rem;
              border-radius: 50%;
              background-color: #fff;
              background-position: center;
              background-size: 2.25rem 3rem;
              background-image: url(../img/ico_certify_y2.svg);
            }
            > p{
              color: #000;
              font-size: 0.9375rem;
              font-style: normal;
              font-weight: 500;
              line-height: 100%;
              letter-spacing: -0.00938rem;
              > span{
                color: #034ea2;
                font-size: 0.9375rem;
                font-style: normal;
                font-weight: 500;
                line-height: 100%;
                letter-spacing: -0.00938rem;
              }
            }
          }
        }
        .otp-chk{
          .v-input{
            .v-input__control{
              .v-selection-control{
                .v-label{
                  padding-left: 0.38rem;
                }
                .v-selection-control__wrapper{
                  .v-selection-control__input{
                    .v-icon{
                      background-size: cover;
                    }
                  }
                }
              }
            }
          }
        }
        .otp-reg-step{
          ul{
            li{
              .numbering{
                border-radius: 6.25rem;
              }
            }
          }
        }
      }
    }

    .form-style1 {
      &.shadow--type {
        border-radius: 0.5rem;
        background: #FFF;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
        padding: 1.25rem;

        &.col4 {
          margin-top: 0px;
        }

        table {
          tbody {
            tr {
              border-top: 1px solid #e0e0e0;

              th {
                padding: 0.62rem;
                color: #444444;
                font-size: 0.875rem;

                .cir {
                  width: 0.3125rem;
                  height: 0.3125rem;
                  display: inline-block;
                  background-color: #ff4f60;
                  border-radius: 50%;
                  margin-left: 0.37rem;
                  vertical-align: 2px;
                }
              }

              td {
                padding: 0.62rem;
                color: #444444;
                font-size: 0.875rem;

                &.critical{
                  color:#E1473D;
                }
                &.major{
                  color:#438DFF;
                }
                &.minor{
                  color:#848BA4;
                }

                .custom-btn {
                  &.v-btn {
                    &.v-btn--density-default {
                      &.btn-password {
                        background: #6f8aa6;
                        height: 2.25rem;
                        width: 6.875rem;
                      }

                      &.btn-black {
                        background: #6f8aa6;
                        font-weight: 600 !important;

                        &.v-btn--disabled {
                          background-color: #e0e0e0 !important;

                          .v-btn__content {
                            color: #8e8e8e !important;
                          }
                        }
                      }
                    }
                  }
                }

                .custom-input {
                  .v-input__control {
                    height: 2.25rem;

                    .v-field__field {
                      .v-field__input {
                        padding: 0 0.75rem;

                        &::placeholder {
                          color: #8e8e8e;
                          font-weight: 400;
                        }
                      }
                    }
                  }

                  &.v-text-field {
                    &.mini2 {
                      min-height: 2.25rem;

                      .v-input__control {
                        height: 2.25rem;

                        .v-field__field {
                          .v-field__input {
                            padding: 0 0.75rem;
                            color: #000000;
                            height: 2.25rem;
                            font-size: 0.875rem;
                            font-weight: 400;
                            min-height: 2.25rem;

                            &::placeholder {
                              color: #8e8e8e;
                              font-size: 0.875rem;
                              font-weight: 400;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .alert-txt{
      .color--red{
        color: #E1473D;
        font-weight: 700;
      }
    }

    &.type--l{
      padding: 1.25rem;
      .agree--contents{
        height: calc(100vh - 30rem);
        overflow-y: auto;
        &.border--top{
          border-top: 1px solid #e8e8e8;
        }
      }
    }

    &.chart{
      max-height: calc(100vh - 10rem);
      padding: 0 1.25rem 1.25rem 1.25rem;
      .dialog-chart-tab{
        padding-bottom: 1.25rem;
        display: flex;
        justify-content: flex-start;
        .v-input{
          flex: none;
          margin-right: 1.88rem;
        }
        .v-selection-control-group{
          gap: 0.63rem;
          display: flex;
          flex-direction: row;

          .v-selection-control{
            width: 5.1875rem;
            height: 2.25rem;
            flex: none;
            background-color: black;
            text-align: center;
            border-radius: 0.375rem;
            background-color: #E0E0E0;
            color: #8e8e8e;
            &.v-selection-control--dirty{
              background-color: #6F8AA6;
              color: #ffffff;
            }
          }
          .v-selection-control__wrapper{
            display: none;
          }
          .v-label{
            width: 100%;
            display: flex;
            justify-content: center;
            opacity: 1;
            font-size: 0.875rem;
            font-weight: 500;
          }
        }
        .total-wrap{
          display: flex;
          gap: 0.1rem;
          margin-right: 1.87rem;
          color: #8E8E8E;
          font-size: 0.8125rem;
          font-style: normal;
          align-items: center;
          font-weight: 400;
          span{
            color: #438DFF;
            font-weight: 900;
          }
        }
        .btn-wrap{
          padding: 0;
          gap: 0.5rem;
          .v-input{
            margin-right: 0;
          }
          .custom-btn{
            &.btn-list{
              width: 2.25rem;
              height: 2.25rem;
              min-width: 2.25rem;
              background: #ffffff;
              border: 1px solid #d9d9d9;
              .v-btn__content{
                .ico{
                  width: 1.25rem;
                  background-size: cover;
                  height: 1.25rem;
                  background-image: url(../img/ico_list.svg);
                }
              }
              &.active{
                background: #438DFF;
                .v-btn__content{
                  .ico{
                    background-image: url(../img/ico_list_white.svg);
                  }
                }
              }
            }
          }
          &.trend--list--wrap{
            position: relative;
            .trend--list--pop{
              position: absolute;
              z-index: 100;
              width: 26.375rem;
              top: 3rem;
              background-color: #ffffff;
              box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
              border-radius: 0.625rem;
              .modal-tit{
                height: 3.125rem;
                .btn-close{
                  &.mini{
                    width: 1rem;
                    height: 1rem;
                  }
                }
              }
              .modal-cont{
                padding: 0.94rem 1.25rem;
                height: 60vh;
                overflow-y: auto;
                display: grid;
                grid-template-columns: repeat(2, 1fr); /* 2열 레이아웃 */
                gap: 0.62rem;
                align-content: start;
                .custom-check{
                  &.v-input{
                    width: 100%;
                    height: 2.5rem;
                    display: inline-block;
                    border-radius: 0.3125rem;
                    border: 1px solid #DFDFDF;
                    &.type3{
                      .v-input__control{
                        width: 100%;
                        padding: 0 0.94rem;
                        height: 2.5rem;
                        .v-checkbox-btn{
                        }
                        .v-label{
                          width: 100%;
                          display: inline-block;
                        }
                        .v-selection-control{
                          .v-selection-control__wrapper{
                            .v-selection-control__input{
                              .v-icon{
                                background-size: cover;
                                background-image: url(../img/ico_chk_off.svg);
                                min-width: 1rem;
                                width: 1rem;
                                height: 1rem;
                                border: 0;
                                &.mdi-checkbox-marked{
                                  background-image: url(../img/ico_chk_on.svg);
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
              .btn-wrap{
                padding: 1.25rem;
              }
            }
          }
        }
      }
      .dialog-chart-wrap{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        overflow-y: auto;
        height: 75vh;
        .dialog-chart{
          display: flex;
          justify-content: space-between;
          flex-direction: row;
          width: 100%;
          // height: calc((100vh - 10rem) / 3);
          height: 25vh;
          gap: 1.25rem;
          .chart-wrap{
            height: 100%;
            width: calc(100% / 3);
            gap: 2.5rem;
            border-radius: 0.625rem;
            border: 1px solid #efefef;
            flex-direction: column;
            padding: 1.2rem 1.2rem 0 1.2rem;
            &::after{
              display: none;
            }
            .chart-total{
              margin: 0;
              p{
                width: 100%;
              }
              .ico{
                width: 0.875rem;
                height: 0.875rem;
                background-image: url(../img/ico_set.svg);
                display: inline-block;
                background-size: cover;
                cursor: pointer;
                float: right;
              }
            }
            .chart-con{
              width: 100%;
              height: 80%;
              .chart-wrap-fix{
                left: 1rem;
                top: auto;
                > div{
                }
              }
              .chart-in{
                height: 100%;
                z-index: 10;
                position: relative;
                > div{
                  height: 100%;
                }
                .chart--legend{
                  height: auto;
                  display: flex;
                  position: absolute;
                  right: 50%;
                  transform: translateX(50%);
                  top: -1.25rem;
                  .legend{
                    display: flex;
                    align-items: center;
                    .line{
                      margin-left: 1.25rem;
                      width: 0.9375rem;
                      height: 0.1875rem;
                      border-radius: 6.25rem;
                      display: inline-block;
                    }
                    p{
                      color: #333;
                      font-size: 0.8125rem;
                      font-style: normal;
                      margin-left: 0.75rem;
                      font-weight: 400;
                      letter-spacing: -0.00813rem;
                    }
                    &:first-child{
                      .line{
                        background-color: #FF531E;
                      }
                    }
                    &:nth-child(2){
                      .line{
                        background-color: #44C5FF;
                      }
                    }
                    &:nth-child(3){
                      .line{
                        background-color: #FF00C7;
                      }
                    }
                    &:nth-child(4){
                      .line{
                        background-color: #AF70FF;
                      }
                    }
                    &:nth-child(5){
                      .line{
                        background-color: #4862FF;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .core--list--component{
      h2{
        &.fw--500{
          font-weight: 500;
          > span{
            font-weight: 700;
          }
          &.mb--125rem{
            margin-bottom: 1.25rem;
          }
        }
      }
      .event--stat{
        padding-top: 1.25rem;
        display: flex;
        gap: 0.62rem;
        justify-content: space-between;
        > li{
          width: 100%;
          border-radius: 62.5rem;
          height: 2.375rem;
          color: #ffffff;
          font-size: 0.8125rem;
          font-weight: 500;
          padding: 0 1.12rem;
          display: flex;
          align-items: center;
          line-height: 2.375rem;
          .ico{
            background-image: url(../img/ic_tenant01.svg);
            margin-right: 0.62rem;
            width: 1rem;
            display: inline-block;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            height: 1rem;
          }
          span{
            &:last-child{
              margin-left: auto;
              font-weight: 900;
            }
          }
          &.critical{
            background-color: #E1473D;
          }
          &.major{
            background-color: #438DFF;
          }
          &.minor{
            background-color: #C3C8D8;
          }
          &.disconnected{
            background-color: #fff;
            border: 1px solid #ffc7c3;
            color: #333333;
            .ico{
              background-image: url(../img/ico_ban.svg);
            }
            span{
              &:last-child{
                color: #E1473D;
              }
            }
          }
        }
      }
      .map--area{
        border-radius: 0.9375rem;
        border: 1px solid #DFDFDF;
        overflow: hidden;
        height: 12rem;
        position: relative;
        .side--title{
          position: absolute;
          border-radius: 0.4375rem;
          border: 1px solid #848484;
          background: rgba(0, 0, 0, 0.50);
          top: 0.94rem;
          left: 0.94rem;
          padding: 0.5rem 0.75rem;
          color: #ffffff;
          text-align: center;
          font-size: 0.75rem;
          font-weight: 500;
        }
        .area--info{
          position: absolute;
          padding: 1rem 1.25rem;
          border-radius: 0.625rem;
          border: 1px solid #E3E3E3;
          width: 12.5rem;
          background: #FFF;
          .area--info--title{
            display: flex;
            justify-content: space-between;
            margin-bottom: 1rem;
            p{
              color: #222;
              font-size: 0.9375rem;
              font-weight: 700;
            }
            .btn-close{
              background-image: url(/_nuxt/assets/img/ico_close_gray.svg);
              width: 1rem;
              height: 1rem;
              background-repeat: no-repeat;
              background-size: cover;
            }
          }
          ul{
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            li{
              display: flex;
              align-items: center;
              .ico{
                width: 0.625rem;
                height: 0.625rem;
                border-radius: 50%;
                display: inline-block;
                margin-right: 0.5rem;
                &.green{
                  background-color: #55E074;
                }
                &.red{
                  background-color: #E1473D;
                }
              }
              span{
                &:nth-child(2){
                  color: #222;
                  font-size: 0.75rem;
                  font-weight: 500;
                }
                &:nth-child(3){
                  color: #222;
                  font-size: 0.75rem;
                  font-weight: 400;
                  margin-left: auto;
                  &.active{
                    font-weight: 700;
                  }
                }
              }
            }
          }
        }
        &.big--map{
          height: 22rem;
        }
      }
    }
    .core--list--component--grid{
      .title{
        h2{
          font-weight: 500;
          span{
            font-weight: 700;
          }
        }
      }      
    }
  }

  .btn-wrap {
    justify-content: flex-end;
    padding: 1.25rem 1.25rem 1.25rem 1.25rem;

    .custom-btn {
      &.v-btn {
        &.v-btn--density-default {
          width: 5.25rem;
          height: 2.25rem;
          border: none;

          &.btn-blue {
            &:hover {
              box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
            }

            &.v-btn--disabled {
              background: #e0e0e0 !important;

              .v-btn__content {
                color: #8e8e8e !important;

                .ico {
                  background-image: url(../img/ico_chk_circle_disabled.svg);
                }
              }
            }

            .v-btn__content {
              .ico {
                width: 1.25rem;
                height: 1.25rem;
                margin-right: 0.37rem;
                background-image: url(../img/ico_chk_circle.svg);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
              }
            }

            &.btn-id {
              width: 7.5625rem;

              .ico {
                background-image: url(../img/ico_id_on.svg);
                width: 1.125rem;
                height: 1.125rem;
              }

              &.v-btn--disabled {
                .ico {
                  background-image: url(../img/ico_id_off.svg);
                }
              }
            }

            &.btn-pw {
              width: 9.1875rem;

              .ico {
                background-image: url(../img/ico_id_on.svg);
                width: 1.125rem;
                height: 1.125rem;
              }

              &.v-btn--disabled {
                .ico {
                  background-image: url(../img/ico_id_off.svg);
                }
              }
            }

            &.btn-ext{
              .v-btn__content{
                .ico{
                  background-image: url(../img/ico_time.svg);
                }
              }
              &.v-btn--disabled {
                .ico {
                  background-image: url(../img/ico_time_disabled.svg);
                }
              }
            }
          }

          &.btn-pink{
            background-color: #F74F78;
          }

          &.btn-white {
            background-color: #6f8aa6;

            &:hover {
              background-color: #adbfd2;
              box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
            }

            &.v-btn--disabled {
              background: #e0e0e0 !important;

              .v-btn__content {
                color: #8e8e8e !important;

                .ico {
                  background-image: url(../img/ico_cancel_disabled.svg);
                }
              }
            }

            .v-btn__content {
              color: #ffffff;

              .ico {
                width: 1.25rem;
                height: 1.25rem;
                margin-right: 0.37rem;
                background-image: url(../img/ico_cancel.svg);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
              }
            }
          }

          &.btn-blue2 {
            background-color: #438dff;

            &.btn-mod{
              .v-btn__content {
                .ico{
                  background-image: url(../img/ico_mod2.svg);
                }
              }
            }

            &:hover {
              background: #90BCFF;
              box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
            }

            &.v-btn--disabled {
              background-color: #e0e0e0 !important;

              .v-btn__content {
                color: #8e8e8e !important;

                .ico {
                  background-image: url(../img/ico_save_disabled.svg);
                }
              }

              &.btn-mod{
                .v-btn__content {
                  .ico{
                    background-image: url(../img/ico_mod_disabled.svg);
                  }
                }
              }
            }

            .v-btn__content {
              .ico {
                width: 1.25rem;
                height: 1.25rem;
                margin-right: 0.37rem;
                background-size: cover;
                background-image: url(../img/ico_save.svg);
              }
            }
          }
        }
      }
    }
  }
}

.container {
  .content {
    .content-tit {
      margin-bottom: 1.25rem;

      .location {
        gap: 0.37rem;

        >span {
          font-size: 0.875rem;
          color: #444444;
          letter-spacing: -0.0175rem;

          &.now {
            font-weight: 700;
          }
        }
      }

      h2 {
        //color: #444;
        font-size: 1.125rem;
        color: #000;
        font-weight: 400;
      }

      >span {
        color: #8e8e8e;
        font-size: 0.875rem;
        font-weight: 400;

        &::before {
          background-color: #8e8e8e;
        }

        &.arr{
          color: #0B318B;
          font-size: 1.125rem;
          font-style: normal;
          margin-right: 0.62rem;
          font-weight: 700;
          line-height: 100%; /* 1.125rem */
          &::before {
            background-color: transparent;
            background-image: url(../img/ico_tit_arr.svg);
            width: 1.1875rem;
            height: 1.1875rem;
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0 0.62rem;
          }
        }
      }
      .ico{
        width: 1.375rem;
        height: 1.375rem;
        background-image: url(../img/ico_set_blue.svg);
        background-size: cover;
        cursor: pointer;
      }
    }

    .search-wrap {
      .search-btn {
        .v-btn {
          width: 5.25rem !important;
        }
      }

      .custom-btn {
        &.v-btn {
          &.v-btn--density-default {
            &.btn-gray-bor {
              border: 1px solid #cccccc;
              color: #8e8e8e;
              font-size: 0.875rem;
              font-weight: 600;

              &:hover {
                box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
              }
            }
          }
        }
      }

      .perfor-tab {
        margin-right: 1.87rem;
        padding-right: 1.87rem;
        border-right: 1px solid #e4e4e4;
        width: auto;
        .v-radio-group {
          width: 6.5625rem;
          .v-input__control {
            width: 6.5625rem;
            .v-radio {
              &:hover {
                .v-label {
                  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.15);
                }
              }

              &.v-selection-control--dirty {
                .v-label {
                  color: #000000;
                  border: 1px solid #a5a5a5;
                }
              }

              .v-label {
                background-color: #ffffff;
                border-radius: 0.375rem;
                font-size: 0.8125rem;
                font-weight: 600;
                letter-spacing: -0.00813rem;
                color: #949494;
                border: 1px solid #e0e0e0;
              }
            }
          }
        }
      }

      .search-line-wrap {
        gap: 1rem;

        .search-line {
          gap: 2.5rem;
          align-items: center;

          .search-box {
            >strong {
              margin-right: 0.5rem;
              width: 5.875rem;
              margin-left: 0;
              font-size: 0.875rem;
              font-weight: 700;
              color: #444444;
              &.op--3{
                opacity: 0.3;
              }
            }

            .info{
              width: 1rem;
              height: 1rem;
              background-image: url(../img/ico_info.svg);
              background-size: cover;
              background-repeat: no-repeat;
              margin-left: 0.3rem;
              position: relative;
              cursor: pointer;
              .info--tt{
                position: absolute;
                top: -3.5rem;
                left: -11.8rem;
                display: inline-block;
                font-style: normal;
                font-weight: 500;
                color: #fff;
                background-color: rgba(67, 141, 255, 0.70);
                padding: 0.9375rem 1.5625rem 1.0625rem 1.5625rem;
                border-radius: 0.625rem;
                width: 25rem;
                text-align: center;
                display: none;
                z-index: 30;
                &::after{
                  content: '';
                  background-image: url(../img/ico_tool.svg);
                  width: 0.875rem;
                  height: 0.625rem;
                  display: inline-block;
                  position: absolute;
                  bottom: -0.625rem;
                  left: 50%;
                  transform: translateX(-50%);
                }
              }
              &:hover{
                .info--tt{
                  display: block;
                }
              }
            }

            .search-box-in {
              margin-left: 0;

              .custom-select {
                &.v-input {
                  .v-input__control {
                    .v-field {
                      .v-field__field {
                        padding-left: 0.75rem;
                      }
                      &.v-field--disabled{
                        .v-field__input{
                          .v-select__selection{
                            .v-select__selection-text{
                              color: #e0e0e0!important;
                            }
                          }
                        }
                      }

                      .v-field__append-inner {
                        .v-icon {
                          margin-right: 0.75rem;
                        }
                      }

                      .v-field__outline {}
                    }
                  }
                  &.v-input--disabled{
                    .v-input__control{
                      .v-field{
                        background-color: #fbfbfb;
                        opacity: 1;
                      }
                      .v-field__outline{
                        border: 1px solid #ccc;
                      }
                    }
                  }
                }
              }

              .custom-input {
                &.v-text-field {
                  .v-input__control {
                    .v-field__field {
                      .v-field__input {
                        padding: 0 0.75rem;

                        &:read-only {
                          color: #000000 !important;
                          font-weight: 400 !important;
                          background: #ffffff;
                        }
                      }
                    }
                  }
                }
              }

              .custom-radio {
                .v-selection-control--disabled{
                  opacity: 1;
                }
                &.picker-terms {
                  width: auto;

                  .v-input__control {
                    .v-selection-control-group {
                      gap: 0.5rem;

                      .v-selection-control {
                        &.v-radio {
                          width: 2.8125rem;
                        }
                      }
                    }
                  }
                }
              }

              .calendar-wrap {
                margin-left: 0.5rem;

                .calendar {
                  width: 12.5rem;

                  .dp__input_wrap {
                    &::before {
                      right: 0.75rem;
                    }

                    .dp__input {
                      color: #8e8e8e;
                      font-size: 0.875rem;

                      &::placeholder {
                        color: #8e8e8e;
                        font-size: 0.875rem;
                      }

                      &.dp__disabled{
                        border: 1px solid #CCC;
                        background-color: #FBFBFB;
                        &::placeholder{
                          color: #e0e0e0!important;
                        }
                      }
                    }
                  }

                  .dp__main{
                    .dp--menu-wrapper{
                      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
                      border-radius: 1.25rem;
                      overflow: hidden;
                      z-index: 2;
                      .dp__menu{
                        .dp__arrow_top{
                          display: none;
                        }
                      }
                    }
                  }

                }

                .custom-btn{
                  &.btn-refresh{
                    width: 2.25rem;
                    height: 2.25rem;
                    padding: 0;
                    .v-btn__content{
                      .ico{
                        background-image: url(../img/ico_backup1.svg);
                      }
                    }
                  }
                  &.btn-ref{
                    width: 2.25rem;
                    min-width: 2.25rem;
                    height: 2.25rem;
                    padding: 0;
                    border-radius: 0.375rem;
                    border: 1px solid #CCC;
                    margin-left: 0.3rem;
                    .v-btn__content{
                      .ico{
                        display: inline-block;
                        width: 0.875rem;
                        height: 0.875rem;
                        background-size: cover;
                        background-image: url(../img/ico_refresh.svg);
                      }
                    }
                    &.v-btn--disabled{
                      border: 1px solid #E7E7E7;
                      background-color: #ffffff!important;
                      .v-btn__content{
                        .ico{
                          background-image: url(../img/ico_refresh_dis.svg);
                        }
                      }
                    }
                  }
                }

                .text {
                  color: #8e8e8e;
                }
              }
            }
          }
        }
      }
    }

    .chart-wrap {
      background-color: #ffffff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
      border-radius: 0.5rem;
      padding: 1.88rem;
      flex-direction: column;

      .no--data{
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--gray2, #444);
        font-size: 0.875rem;
        font-weight: 700;
        height: 100%;
        .ico{
          width: 1.25rem;
          height: 1.25rem;
          margin-right: 0.62rem;
          background-size: cover;
          background-image: url(../img/ico_no_data_nw.svg);
        }
      }

      .chart-total {
        margin-top: 0;
        font-size: 0.9375rem;
        z-index: 1;
        background-color: #ffffff;
        margin-bottom: 1rem;

        >p {
          font-size: 0.9375rem;
          font-weight: 700;
        }

        .legend-area {
          justify-content: center;
          gap: 1.56rem;

          .legend-box {
            color: #333333;
            font-weight: 400;
            font-size: 0.8125rem;
            &.none--atv{
              color: rgba(68, 68, 68, 0.30);
              .cir{
                background-color: rgba(68, 68, 68, 0.30)!important;
              }
            }
            .cir {
              width: 0.9375rem;
              height: 0.1875rem;
              border-radius: 6.25rem;

              &.cir1 {
                background-color: #FF531E;
              }

              &.cir2 {
                background-color: #44C5FF;
              }

              &.cir3 {
                background-color: #FF00C7;
              }
              &.cir4 {
                background-color: #AF70FF;
              }
              &.cir5 {
                background-color: #4862FF;
              }
              &.cir6 {
                background-color: #6ACB52;
              }
              &.cir7 {
                background-color: #00D47B;
              }
            }
          }
        }
      }

      .chart-wrap-fix {
        left: 1.5rem;
        width: 100%;
        height: 100%;
        top: 4rem;
      }

      .scrl-chart {
        margin-left: 0;
        padding-bottom: 0;
        height: 100%;
        .scrl-in{
          height: 100%;
          div{
            height: 100%;
          }
        }
      }
    }

    .view-wrap {
      .view-box {
        .view-box-btm {
          .form-style1 {
            table {
              tbody {
                tr {
                  border-top: 1px solid #e0e0e0;

                  th {
                    padding: 0.62rem;
                    color: #444444;
                    font-size: 0.875rem;

                    .cir {
                      width: 0.3125rem;
                      height: 0.3125rem;
                      display: inline-block;
                      background-color: #ff4f60;
                      border-radius: 50%;
                      margin-left: 0.37rem;
                      vertical-align: 2px;
                    }
                  }

                  td {
                    padding: 0.62rem;
                    color: #444444;
                    font-size: 0.875rem;
                    .status{
                      display: inline-block;
                      border: 1px solid #B8D4FF;
                      padding: 0.5rem 0.62rem;
                      border-radius: 6.25rem;
                      color: #438DFF;
                      font-size: 0.75rem;
                      font-style: normal;
                      font-weight: 400;
                      .ico{
                        display: inline-block;
                        width: 0.75rem;
                        margin-right: 0.62rem;
                        height: 0.75rem;
                        background-color: #438dff;
                        border-radius: 50%;
                      }
                      &.discon{
                        border: 1px solid #E8E7ED;
                        color: #A5A3AE;
                        .ico{
                          background-color: #D8D7DC;
                        }
                      }
                    }

                    .custom-btn {
                      &.v-btn {
                        &.v-btn--density-default {
                          &.btn-password {
                            background: #6f8aa6;
                            height: 2.25rem;
                            width: 6.875rem;
                          }

                          &.btn-black {
                            background: #6f8aa6;

                            &.v-btn--disabled {
                              background-color: #e0e0e0 !important;

                              .v-btn__content {
                                color: #8e8e8e !important;
                              }
                            }
                          }
                        }
                      }
                    }

                    .custom-input {
                      &.v-text-field {
                        &.mini {
                          .v-input__control {
                            .v-field__field {
                              .v-field__input {
                                padding: 0 0.75rem;
                                color: #000000;
                                height: 2.25rem;
                                font-size: 0.875rem;
                                font-weight: 400 !important;
                                min-height: 2.25rem;

                                &::placeholder {
                                  color: #8e8e8e;
                                  font-size: 0.875rem;
                                  font-weight: 400 !important;
                                }
                              }
                            }
                          }
                          .v-input__details{
                            overflow: visible;
                            .v-messages__message{
                              padding: 0;
                            }
                          }
                        }

                        &.mini2 {
                          min-height: 2.25rem;

                          .v-input__control {
                            height: 2.25rem;

                            .v-field__field {
                              .v-field__input {
                                padding: 0 0.75rem;
                                color: #000000;
                                height: 2.25rem;
                                font-size: 0.875rem;
                                font-weight: 400;
                                min-height: 2.25rem;

                                &::placeholder {
                                  color: #8e8e8e;
                                  font-size: 0.875rem;
                                  font-weight: 400;
                                }
                              }
                            }
                          }
                        }
                      }
                    }

                    .custom-radio {
                      &.v-input {
                        &.type2 {
                          .v-input__control {
                            .v-selection-control-group {
                              .v-radio {
                                .v-label {
                                  padding-left: 0.56rem;
                                  font-weight: 500;
                                }

                                .v-selection-control__wrapper {
                                  .v-selection-control__input {
                                    width: 1rem;
                                    height: 1rem;

                                    .v-icon {
                                      border: 1px solid #C0C0C0;

                                      &.mdi-radiobox-marked {
                                        border: 1px solid #C0C0C0;
                                        background-color: #438dff;
                                      }
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .content--db--wrap{
      display: flex;
      gap: 1.25rem;
      .content--inner{
        .content--inner--title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          h3{
            color: #222;
            font-size: 1rem;
            font-weight: 700;
          }
          .d--day{
            border-radius: 6.25rem;
            border: 1px solid #AFCFFF;
            color: #438DFF;
            font-size: 0.8125rem;
            font-weight: 700;
            padding: 0.5rem 0.94rem 0.62rem;
            span{
              font-weight: 400;
            }
          }
          .status--wrap{

          }
        }
      }
      .content--l{
        background-color: #fff;
        width: 28.125rem;
        height: 52.8125rem;
        padding: 1.25rem;
        border-radius: 1.25rem;
        .content--inner{
          .content--inner--content{
            .db--chart--wrap{
              display: flex;
              align-items: center;
              justify-content: center;
              padding:3rem 0rem 3rem 0rem;
              .db--chart{              
                position: relative;
                width:12.5rem;
                height:12.5rem;
                max-width:12.5rem;
                max-height:12.5rem;
                canvas{
                  position: relative;
                  z-index: 3;
                }
                &:after{
                  content:'';
                  display: block;
                  width:12.5rem;
                  height:12.5rem;
                  position: absolute;
                  top:50%;
                  left:50%;
                  transform: translate(-50%, -50%);
                  background:#EAEAEA;
                  border-radius: 12.5rem;
                  z-index: 1;
                }
                &:before{
                  content:'';
                  display: block;
                  width:7.5rem;
                  height:7.5rem;
                  position: absolute;
                  top:50%;
                  left:50%;
                  transform: translate(-50%, -50%);
                  background:#fff;
                  border-radius: 12.5rem;
                  z-index: 2;
                }
              }
            }
            .db--table{
              table{
                width: 100%;
                margin-top: 1.75rem;
                tbody{
                  tr{
                    border-top: 1px solid #e0e0e0;
                    th{
                      text-align: left;
                      padding: 1.12rem 0.62rem;
                      font-size: 0.875rem;
                      color: #444444;
                      font-weight: 700;
                    }
                    td{
                      color: #444444;
                      font-size: 0.875rem;
                      font-weight: 400;
                      span{
                        font-weight: 700;
                        color: #438dff;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .content--r{
        display: flex;
        flex-direction: column;
        width: calc(100% - 28.14rem);
        gap: 1.25rem;
        .content--r--t{
          background-color: #fff;
          width: 100%;
          border-radius: 1.25rem;
          height: 27.625rem;
          padding: 1.25rem;
          .content--inner{
            height: 100%;
            .content--inner--title{
              margin-bottom: 1.12rem;
              .status--wrap{
                display: flex;
                gap: 1.88rem;
                .status{
                  display: flex;
                  position: relative;
                  gap: 0.63rem;
                  align-items: center;
                  .status--card{
                    padding: 0.5rem 0.75rem;
                    border-radius: 6.25rem;
                    display: flex;
                    align-items: center;
                    span{
                      color: #111;
                      font-size: 0.8125rem;
                      font-weight: 500;
                      letter-spacing: -0.00813rem;
                      margin-right: 1.5rem;
                      &.count{
                        margin-right: 0;
                        font-weight: 700;
                      }
                    }
                    .ico{
                      background-repeat: no-repeat;
                      background-position: center;
                      background-size: cover;
                      width: 0.875rem;
                      height: 0.875rem;
                      margin-right: 0.63rem;
                    }
                    &.con{
                      border: 1px solid #a1c6ff;
                      .ico{
                        background-image: url(../img/ico_status1.svg);
                      }
                      .count{
                        color: #438DFF;
                      }
                    }
                    &.dis--con{
                      border: 1px solid #F6A19B;
                      .ico{
                        background-image: url(../img/ico_status2.svg);
                      }
                      .count{
                        color: #E1473D;
                      }
                    }
                    &.active{
                      border: 1px solid #a1c6ff;
                      .ico{
                        background-image: url(../img/ico_status1.svg);
                      }
                      .count{
                        color: #438DFF;
                      }
                    }
                    &.issue{
                      border: 1px solid #F6A19B;
                      .ico{
                        background-image: url(../img/ico_status3.svg);
                      }
                      .count{
                        color: #E1473D;
                      }
                    }
                  }
                }
                .map{
                  position: relative;
                  .custom-btn{
                    &.btn-map{
                      // width: 4.5625rem;
                      width: 6.75rem;
                      height: 1.875rem;
                      border-radius: 6.25rem;
                      .v-btn__content{
                        font-size: 0.8125rem!important;
                        .ico{
                          width: 0.875rem;
                          height: 0.875rem;
                          background-image: url(../img/ico_map.svg);
                          background-repeat: no-repeat;
                          background-position: center;
                          background-size: cover;
                          margin-right: 0.31rem;
                        }
                      }
                    }
                  }
                  // &::before{
                  //   width: 0.0625rem;
                  //   height: 1.125rem;
                  //   top: 50%;
                  //   transform: translateY(-50%);
                  //   background-color: #e0e0e0;
                  //   content: '';
                  //   position: absolute;
                  //   left: -0.94rem;
                  // }
                }
              }
            }
            .content--inner--content{
              .db--status{
                .equip--card--wrap{
                  display: flex;
                  align-items: flex-end;
                  width: 100%;
                  height: 19.5rem;
                  .equip--card{
                    width: 100%;
                    height: 18rem;
                    background-color: #f1f7ff;
                    border-radius: 0.9375rem;
                    border: 1px solid #D4E7FF;
                    padding: 2.25rem 1.88rem 1.25rem 1.88rem;
                    display: flex;
                    justify-content: center;
                    gap: 1.37rem;
                    position: relative;
                    flex-direction: column;
                    .equip--t{
                      display: flex;
                      align-items: center;
                      gap: 0.94rem;
                      justify-content: flex-start;
                    }
                    .equip--icon{
                      background-color: #fff;
                      width: 2.5rem;
                      height: 2.5rem;
                      border-radius: 6.25rem;
                      background-image: url(../img/ico_equip.svg);
                      background-size: 1.25rem 1.25rem;
                      background-position: center;
                    }
                    .equip--txt{
                      p{
                        color: #222;
                        font-size: 1rem;
                        font-weight: 700;
                        margin-bottom: 0.2rem;
                      }
                      span{
                        color: #8C8C8C;
                        font-size: 0.6875rem;
                        font-weight: 400;
                        letter-spacing: -0.00688rem;
                      }
                    }
                    .equip--st{
                      width: 100%;
                      display: flex;
                      flex-direction: column;
                      gap: 0.75rem;
                      li{
                        display: flex;
                        align-items: center;
                        .circle{
                          border-radius: 50%;
                          width: 0.5625rem;
                          height: 0.5625rem;
                          margin-right: 0.94rem;
                          vertical-align: -0.1rem;
                          background-color: #55E074;
                          &.critical{
                            background-color:#E1473D;
                          }
                        }
                        p{
                          color: #222;
                          font-size: 0.6875rem;
                          font-weight: 500;
                        }
                        span{
                          color: #222;
                          font-size: 0.6875rem;
                          font-weight: 500;
                          margin-left: auto;
                          &.active{
                            font-weight: 700;
                            color: #111111;
                          }
                        }
                      }
                    }
                    &::before{
                      position: absolute;
                      content: 'Connected';
                      left: 0.62rem;
                      top: -0.69rem;
                      color: #438DFF;
                      text-align: center;
                      font-size: 0.6875rem;
                      font-weight: 500;
                      border-radius: 6.25rem;
                      border: 1px solid #9BC2FF;
                      background: #FFF;
                      padding: 0.38rem 0.62rem 0.5rem;
                      z-index: 2;
                    }
                    &.dis{
                      &::before{
                        border: 1px solid #F6A19B;
                        color: #E1473D;
                        content: 'Disconnected';
                      }
                      &::after{
                        position: absolute;
                        content: '';
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 100%;
                        border: 1px solid #f4a19c;
                        background-color: #06102780;
                        border-radius: 0.9375rem;
                        background-image: url(../img/ico_wifi.svg);
                        background-position: center;
                        background-size: 2.5rem 2.5rem;
                      }
                    }
                  }
                }
              }
              .swiper{
                padding-bottom: 3.25rem;
                .swiper-controls{
                  display: flex;
                  margin-top: 1.25rem;
                  align-items: center;
                  gap: 1.25rem;
                  height: 2rem;
                  justify-content: center;
                  .swiper-button-prev{
                    position: static;
                    margin-top: 0;
                    width: 2rem;
                    height: 2rem;
                    background-image: url(../img/ico_arrow_prev.svg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    &::after{
                      content: none;
                    }
                    &.swiper-button-disabled{
                      
                    }
                  }
                  .swiper-button-next{
                    position: static;
                    width: 2rem;
                    height: 2rem;
                    margin-top: 0;
                    background-image: url(../img/ico_arrow_next.svg);
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: cover;
                    &::after{
                      content: none;
                    }
                  }
                  .swiper-pagination{
                    position: static;
                    width: auto;
                    .swiper-pagination-bullet{
                      margin-left: 0;
                      margin-right: 0.63rem;
                      width: 0.75rem;
                      height: 0.75rem;
                      background-color: #E9E9E9;
                      opacity: 1;
                      &.swiper-pagination-bullet-active{
                        background-color: #6F8AA6;
                      }
                      &:last-child{
                        margin-right: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .content--r--b{
          background-color: #fff;
          width: 100%;
          height: 23.9375rem;
          border-radius: 1.25rem;
          padding: 1.25rem;
          .content--inner{
            height: 100%;
            gap: 3rem;
            display: flex;
            flex-direction: column;
            &::after{
              display: none;
            }
            .content--inner--title{
              margin: 0;
              justify-content: flex-start;
              p{
                color: #222222;
                font-weight: 700;
                font-size: 1rem;
                margin-right: 2.5rem;
              }
              .ico{
                width: 0.9375rem;
                height: 0.9375rem;
                margin-right: 2.5rem;
                margin-left: 0.75rem;
                background-image: url(../img/ico_set.svg);
                display: inline-block;
                background-size: cover;
                cursor: pointer;
              }
              .btn-wrap{
                margin-left: auto;
                .custom-btn{
                  &.btn-pip{
                    margin-left: 0.94rem;
                    width: 6.75rem;
                    height: 2.25rem;
                    padding: 0;
                    .v-btn__content{
                      color: #8E8E8E;
                      font-size: 0.875rem;
                      font-weight: 500;
                      letter-spacing: -0.00875rem;
                      .ico{
                        width: 1.25rem;
                        height: 1.25rem;
                        display: inline-block;
                        background-image: url(../img/ico_pip2.svg);
                        background-size: cover;
                        background-repeat: no-repeat;
                        margin-right: 0.38rem;
                        margin-left: 0;
                        background-position: center;
                      }
                    }
                  }
                }
              }
              .select--wrap{
                display: flex;
                gap: 0.63rem;
                align-items: center;
                .custom-btn{
                  &.v-btn{
                    &.btn-blue{
                      width: 5.25rem;
                    }
                  }
                }
              }
            }
            .chart--con{
              width: 100%;
              height: 100%;
              .chart--in{
                height: calc(100% - 1rem);
                z-index: 10;
                position: relative;
                > div{
                  height: 100%;
                }
                .chart--legend{
                  height: auto;
                  display: flex;
                  position: absolute;
                  right: 50%;
                  transform: translateX(50%);
                  top: -2.5rem;
                  .legend{
                    display: flex;
                    align-items: center;
                    .line{
                      margin-left: 1.25rem;
                      width: 0.9375rem;
                      height: 0.1875rem;
                      border-radius: 6.25rem;
                      display: inline-block;
                      background-color: #55E074;
                    }
                    p{
                      color: #333;
                      font-size: 0.8125rem;
                      font-style: normal;
                      margin-left: 0.75rem;
                      font-weight: 400;
                      letter-spacing: -0.00813rem;
                    }
                    &:first-child{
                      .line{
                        background-color: #FF531E;
                      }
                    }
                    &:nth-child(2){
                      .line{
                        background-color: #44C5FF;
                      }
                    }
                    &:nth-child(3){
                      .line{
                        background-color: #FF00C7;
                      }
                    }
                    &:nth-child(4){
                      .line{
                        background-color: #AF70FF;
                      }
                    }
                    &:nth-child(5){
                      .line{
                        background-color: #4862FF;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .content--inner--content{
        &.no--data{
          display: flex;
          justify-content: center;
          align-items: center;
          color: var(--gray2, #444);
          font-size: 0.875rem;
          font-weight: 700;
          height: 100%;
          .ico{
            width: 1.25rem;
            height: 1.25rem;
            margin-right: 0.62rem;
            background-size: cover;
            background-image: url(../img/ico_no_data_nw.svg);
          }
        }
      }
    }

    // dashboard components
    .dash--board--wrapper{
      &.none--title{
        height: calc(100vh - 6.5rem);
      }
      .dash--board--contents{
        &.type3{          
          .core--component--wrap{
            height: 100%;
            &.user--list{
              > div{                
                &:nth-of-type(1){                  
                  height:auto;
                  .inner--content{
                    height:100%;
                    .oper--stat{
                      height:calc( ( ( 100% / 3 ) * 2 ) - 3.75rem  );
                      .card--alarm{
                        .card{
                          .ico{
                            width:2rem;
                            height:2rem;
                          }
                          .alarm--txt{
                            display: flex;
                            flex-direction: column;
                            gap:.3rem;
                          }
                        }
                      }
                      &:nth-of-type(2){
                        height:calc( ( 100% / 3 ) - 0.625rem );
                      }
                    }
                  }
                }
                &:nth-of-type(2){                  
                  padding-top:1.25rem;                                                      
                  height:calc(100% - 15.7rem);
                  .inner--content{
                    height:calc(100% - 1rem);                    
                    .swiper{
                      height:100%;
                      .swiper-wrapper{
                        height:100%;
                        .swiper-slide{                        
                          height:100%;
                          .tenant--card--wrap{
                            display: flex;
                            flex-wrap: wrap;                            
                            flex-direction: row;
                            height:100%;
                            .tenant--card{
                              width:calc(50% - 0.25rem);
                              height: calc( (100% - ((0.25rem * 6) + 1.6rem)) / 7);
                              display: flex;
                              flex-direction: column;
                              justify-content: space-between;
                            }
                          }

                          .user--list--contents{
                            width:100%;
                            padding-top:0px;
                            height:100%;
                            > ul{
                              width:100%;
                              height:100%;
                              gap:0.62rem;
                              >li{
                                padding: 0.54rem;
                                width:calc( (100% - 0.62rem) / 2);                              
                                height:calc( (100% - ( 0.62rem * 3 ) ) / 4);
                                .chart--box{
                                  margin-top:.5rem;
                                  width:calc(100% - 6.2rem);       
                                  height:50%;
                                }

                                &.critical{
                                  .current--value--ps{
                                    color:#f00!important;
                                  }
                                }
                                &.major{
                                  .current--value--ps{
                                    color:#C96103!important;
                                  }
                                }
                                &.minor{
                                  .current--value--ps{
                                    color:#DDA405!important;
                                  }
                                }
                                &.normal{
                                  .current--value--ps{
                                    color:#2D8CFA!important;
                                  }
                                }
                              }
                            }
                          }
                        }  
                      }                    
                    }
                  }
                }
              }
            }
            &.core--tp{
              > div{
                &:nth-of-type(1){                  
                  height:50%;
                  &.no--data{
                    height: 100%;
                  }
                  .inner--content{
                    height:100%;
                    >div{
                      height:calc( (100% - (0.25rem * 2)) / 3);
                      display:flex;
                      flex-direction: column;
                      justify-content: space-between;

                      &:nth-of-type(2){
                        height:calc( ( (100% - (0.25rem * 2)) / 3 ) - 1.2rem );
                      }

                      &:nth-of-type(3){
                        height:calc( ( (100% - (0.25rem * 2)) / 3 ) - 2.5rem );
                      }
                    }
                  }
                }
                &:nth-of-type(2){
                  height:50%;
                  .inner--content{                    
                    height:100%;
                    .swiper{                                            
                      height:100%;
                      .swiper-wrapper{
                        height:calc(100% - 1rem);
                        .swiper-slide{       
                          height:100%;                          
                          .equip--card--wrap{
                            height:100%;
                            .equip--card{
                              height: calc( 100% / 4)!important;
                            }
                          }                                           
                        }
                      }                      
                    }
                  }
                }
              }
            }
            

            .inner--header--wrap{
              &.mt--15rem{
                margin-top: 1rem;
              }
              .inner--component--title{
                &.none--after{
                  &::after{
                    display: none;
                  }
                }
              }
              .inner--component--date{
                color: #8E8E8E;
                font-size: 0.8125rem;
                font-style: normal;
                font-weight: 400;
              }
              .inner--component--total{
                color: #8E8E8E;
                font-size: 0.8125rem;
                font-weight: 400;
                span{
                  color: #438DFF;
                  font-weight: 900;
                }
              }
            }
            .inner--content{
              gap: 0.5rem;
              &.df--block{
                display: block;
              }
              &.pt--125rem{
                padding-top: 0.75rem;
              }
              &.pt--1rem{
                padding-top: 0.75rem;
              }
              .oper--stat{
                border-radius: 0.625rem;
                border: 1px solid #EFEFEF;
                background: #FFF;
                width: 100%;
                padding: 0.75rem 1rem;
                .card--title{
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 0.75rem;
                  h3{
                    color: #111;
                    font-size: 0.7rem;
                    font-style: normal;
                    font-weight: 700;
                  }
                  p{
                    color: #555;
                    font-size: 0.7rem;
                    font-weight: 400;
                    span{
                      color: #111;
                      font-weight: 500;
                    }
                  }
                }
                .card--cont{
                  display: flex;
                  justify-content: space-between;
                  gap: 2.12rem;
                  .card{
                    display: flex;
                    width: calc(100% / 3);
                    flex-direction: column;
                    gap: 0.5rem;
                    .card--count{
                      padding: 0.25rem 0.75rem;
                      border-radius: 6.25rem;
                      background-color: #eff2f4;
                      color: #444;
                      font-size: 0.6rem;
                      font-weight: 400;
                      text-align: center;
                      width: 5rem;
                      span{
                        font-weight: 700;
                      }
                    }
                    .card--txt{
                      display: flex;
                      justify-content: space-between;
                      color: #333;
                      font-size: 0.7rem;
                      align-items: center;
                      font-weight: 400;
                      span{
                        color: #333;
                        font-size: 1.12rem;
                        font-weight: 900;
                        position: relative;
                        &::after{
                          content: '';
                          width: 0.0625rem;
                          height: 1.0625rem;
                          background-color: #d2d2d2;
                          position: absolute;
                          right: -1.1rem;
                          top: 0.2rem;
                        }
                      }
                    }
                    &:last-child{
                      .card--txt{
                        span{
                          &::after{
                            display: none;
                          }
                        }
                      }
                    }
                  }
                }
                .card--alarm{
                  display: flex;
                  gap: 3.12rem;
                  &.gap--0{
                    gap: 0;
                  }
                  &.mb--1rem{
                    margin-bottom: 0.94rem;
                  }
                  .card{
                    display: flex;
                    width: 50%;
                    gap: 0.94rem;
                    align-items: center;
                    position: relative;
                    .ico{
                      background-color: #E4EFFF;
                      border-radius: 50%;
                      width: 2.2rem;
                      height: 2.2rem;
                      background-image: url(../img/ico_core_alarm1.svg);
                      background-position: center;
                      background-repeat: no-repeat;
                      background-size: 1rem 1rem;
                    }
                    &.tenant1{
                      .ico{
                        background-image: url(../img/ico_tenant1.svg);
                      }
                    }
                    &.tenant2{
                      .ico{
                        background-image: url(../img/ico_tenant2.svg);
                      }
                    }
                    &.tenant3{
                      .ico{
                        background-image: url(../img/ico_tenant3.svg);
                      }
                    }
                    &.tenant4{
                      .ico{
                        background-image: url(../img/ico_tenant4.svg);
                      }
                    }
                    &.license1{
                      .ico{
                        background-image: url(../img/ico_certify_y3.svg);
                      }
                    }
                    &.license2{
                      .ico{
                        background-image: url(../img/ico_certify_n.svg)!important;
                      }
                    }
                    .alarm--txt{
                      p{
                        color: #222;
                        font-size: 0.65rem;
                        font-weight: 400;
                      }
                      span{
                        color: #438DFF;
                        font-size: 0.8rem;
                        font-weight: 700;
                      }
                    }
                    &:first-child{
                      &::after{
                        content: '';
                        width: 0.0625rem;
                        height: 1.5rem;
                        background-color: #d2d2d2;
                        position: absolute;
                        right: -1.56rem;
                        top: 0.5rem;
                      }
                    }
                    &.no--alarm{
                      .ico{
                        background-color: #FFEBEA;
                        background-image: url(../img/ico_core_alarm2.svg);
                      }
                      .alarm--txt{
                        span{
                          color: #E1473D;
                        }
                      }
                    }
                    &.gray--alarm{
                      .ico{
                        background-color: #F5F5F5;
                      }
                      .alarm--txt{
                        span{
                          color: #333333;
                        }
                      }
                    }
                  }
                }
              }
              .link--stat{
                margin-bottom: 1rem;
                width: 100%;
                padding: 0.75rem 1rem;
                border-radius: 0.625rem;
                .card--title{
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 0.75rem;
                  h3{
                    color: #111;
                    font-size: 0.7rem;
                    font-style: normal;
                    font-weight: 700;
                  }
                }
                .card--cont{
                  display: flex;
                  align-items: center;
                  .ico{
                    width: 1.25rem;
                    height: 1.25rem;
                    background-position: center;
                    background-size: cover;
                    margin-right: 0.75rem;
                    background-repeat: no-repeat;
                  }
                  p{
                    color: #222;
                    font-size: 0.7rem;
                    font-weight: 400;
                  }
                  span{
                    margin-left: auto;
                    color: #E1473D;
                    font-size: 1.12rem;
                    font-weight: 700;
                  }
                }
                &.discon{
                  border: 1px solid #F4A19C;
                  background: #FFF4F3;
                  .card--cont{
                    .ico{
                      background-image: url(../img/ico_link.svg);
                    }
                  }
                }
              }
              .swiper{
                .swiper-wrapper{
                  .equip--card--wrap{
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    .equip--card{
                      border-radius: 0.625rem;
                      position: relative;
                      border: 1px solid #EFEFEF;
                      /*height: 4rem;*/
                      // height: calc( (50vh / 4.8));
                      display: flex;
                      align-items: center;
                      width: 100%;
                      padding: 0 1.5rem;
                      &.critical{
                        border: 1px solid #F4A19C;
                        background-color: #FFF4F3
                      }
                      &.major{
                        border: 1px solid #FFD3AC;
                        background-color: #FFF6EE;
                      }
                      &.minor{
                        border: 1px solid #FFE6A5;
                        background-color: #FFF7E2;
                      }
                      &.normal{
                        border: 1px solid #E3E3E3;
                        background-color: #ffffff;
                      }
                      // &:hover{
                      //   &::after{
                      //     background-color: rgba(67, 141, 255, 0.20)!important;
                      //     content: '';
                      //     width: 100%;
                      //     height: 100%;
                      //     border-radius: 0.625rem;
                      //     position: absolute;
                      //     top: 0;
                      //     left: 0;
                      //   }
                      // }
                      &.discon{
                        position: relative;
                        &::after{
                          content:'';
                          width: 100%;
                          height: 100%;
                          background-color: rgba(255, 0, 0, 0.50);
                          border-radius: 0.625rem;
                          position: absolute;
                          top: 0;
                          left: 0;
                          background-image: url(../img/ico_wifi.svg);
                          background-size: 2.5rem 2.5rem;
                          background-position: center;
                        }
                      }
                      .equip--name{
                        color: #222;
                        font-size: 0.75rem;
                        font-style: normal;
                        font-weight: 700;
                        width: 7%;
                        margin-right: 1.5rem;
                      }
                      .equip--st{
                        display: flex;
                        flex-wrap: wrap;
                        width: 93%;
                        row-gap: 1rem;
                        column-gap: 1.88rem;
                        > li{
                          width: calc(50% - 1rem);
                          display: flex;
                          align-items: center;
                          .circle{
                            width: 0.5625rem;
                            height: 0.5625rem;
                            border-radius: 50%;
                            margin-right: 0.62rem;
                            background-color: #55E074;
                            &.critical{
                              background-color: #FF0000;
                            }
                            &.major{
                              background-color: #C96103;
                            }
                            &.minor{
                              background-color: #DDA405;
                            }
                            &.warning{
                              background-color: #D1B568;
                            }
                            &.normal{
                              background-color: #2D8CFA;
                            }
                          }
                          > p{
                            color: #222;
                            font-size: 0.55rem;
                            font-weight: 500;
                          }
                          span{
                            color: #222;
                            font-size: 0.55rem;
                            font-weight: 500;
                            margin-left: auto;
                            &.active{
                              font-weight: 700;
                            }
                          }
                        }
                      }
                    }
                      
                  }
                  .tenant--card--wrap{
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    .tenant--card{
                      border-radius: 0.625rem;
                      border: 1px solid #EFEFEF;
                      background: #F8F8F8;
                      padding: 0.6rem 1rem;
                      .tenant--name{
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 0.25rem;
                        p{
                          color: #222;
                          font-size: 0.7rem;
                          line-height: 0.8125rem;
                          font-weight: 500;
                          letter-spacing: -0.00813rem;
                        }
                        .ico{
                          width: 0.875rem;
                          height: 0.875rem;
                          background-image: url(../img/ico_pin_off.svg);
                          background-repeat: no-repeat;
                          background-size: cover;
                          cursor: pointer;
                          &.active{
                            background-image: url(../img/ico_pin_on.svg);
                          }
                        }
                      }
                      .tenant--per--wrap{ 
                        display: flex;
                        gap: 0.94rem;
                        justify-content: space-between;
                        .tenant--per--num{
                          span{
                            &:nth-child(1){
                              color: #438DFF;
                              font-size: 1rem;
                              font-weight: 900;
                              letter-spacing: -0.01125rem;
                              margin-right: 0.2rem;
                            }
                            &:nth-child(2){
                              color: #8C8C8C;
                              font-size: 0.7rem;
                              font-weight: 500;
                              letter-spacing: -0.0075rem;
                            }
                          }
                        }
                        .tenant--per--bar{
                          width: 100%;
                          position: relative;
                          .bg--bar{
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            background-color: #EAEAEA;
                            border-radius: 6.25rem;
                            height: 0.75rem;
                            .fill--bar{
                              height: 0.75rem;
                              line-height: 0.75rem;
                              background: #438DFF;
                              border-radius: 6.25rem;
                              color: #FFF;
                              text-align: center;
                              font-size: 0.625rem;
                              font-weight: 700;
                              letter-spacing: -0.00625rem;
                            }
                          }
                        }
                      }
                      &.discon{
                        .tenant--name{
                          p{
                            color: rgba(34, 34, 34, 0.3);
                            &::after{
                              content: '';
                              background-image: url(../img/ico_ban.svg);
                              width: 0.875rem;
                              height: 0.875rem;
                              background-size: cover;
                              position: absolute;
                              margin-left: 0.3rem;
                            } 
                          }
                        }
                      }
                      &.critical{
                        .tenant--per--wrap{
                          .tenant--per--num{
                            span{
                              &:first-child{
                                color: #f00;
                              }
                            }
                          }
                          .tenant--per--bar{
                            .bg--bar{
                              .fill--bar{
                                background-color: #f00;
                              }
                            }
                          }
                        }
                      }
                      &.major{
                        .tenant--per--wrap{
                          .tenant--per--num{
                            span{
                              &:first-child{
                                color: #C96103;
                              }
                            }
                          }
                          .tenant--per--bar{
                            .bg--bar{
                              .fill--bar{
                                background-color: #C96103;
                              }
                            }
                          }
                        }
                      }
                      &.minor{
                        .tenant--per--wrap{
                          .tenant--per--num{
                            span{
                              &:first-child{
                                color: #DDA405;
                              }
                            }
                          }
                          .tenant--per--bar{
                            .bg--bar{
                              .fill--bar{
                                background-color: #DDA405;
                              }
                            }
                          }
                        }
                      }
                      &.normal{
                        .tenant--per--wrap{
                          .tenant--per--num{
                            span{
                              &:first-child{
                                color: #2D8CFA;
                              }
                            }
                          }
                          .tenant--per--bar{
                            .bg--bar{
                              .fill--bar{
                                background-color: #2D8CFA;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
                .swiper-pagination{
                  position: static;
                  width: auto;
                  margin-top: 0.75rem;
                  .swiper-pagination-bullet{
                    margin-left: 0;
                    margin-right: 0.63rem;
                    width: 0.75rem;
                    height: 0.75rem;
                    background-color: #E9E9E9;
                    opacity: 1;
                    &.swiper-pagination-bullet-active{
                      background-color: #6F8AA6;
                    }
                    &:last-child{
                      margin-right: 0;
                    }
                  }
                }
              }
              &.swiper--view--2{
                .swiper{
                  .swiper-wrapper{
                    .swiper-slide{
                      display: flex;
                      gap: 0.5rem;
                      .equip--card--wrap{
                        width: 50%;
                        .equip--card{
                          padding: 0.5rem 0.94rem;
                          align-items: flex-start;
                          justify-content: space-between;
                          .equip--name{
                            font-size: 0.7rem;
                            font-style: normal;
                            font-weight: 700;
                            width: 25%;
                            word-break: keep-all;
                            margin-right: 0.5rem;
                          }
                          .equip--st{
                            display: flex;
                            flex-direction: column;
                            row-gap: 0.5rem;
                            width: calc(75% - 0.5rem);
                            > li{
                              width: 100%;
                              display: flex;
                              align-items: center;
                              .circle{
                                width: 0.375rem;
                                height: 0.375rem;
                              }
                              > p{
                                font-size: 0.6rem;
                              }
                              span{
                                font-size: 0.6rem;
                              }
                            }
                          }
                        }
                          
                      }
                    }
                    .tenant--card--wrap{
                      display: flex;
                      flex-direction: column;
                      gap: 0.62rem;
                      .tenant--card{
                        border-radius: 0.625rem;
                        border: 1px solid #EFEFEF;
                        background: #F8F8F8;
                        padding: 0.94rem 1.25rem;
                        .tenant--name{
                          display: flex;
                          justify-content: space-between;
                          margin-bottom: 0.62rem;
                          p{
                            color: #222;
                            font-size: 0.8125rem;
                            font-weight: 500;
                            letter-spacing: -0.00813rem;
                          }
                          .ico{
                            width: 0.875rem;
                            height: 0.875rem;
                            background-image: url(../img/ico_pin_off.svg);
                            background-repeat: no-repeat;
                            background-size: cover;
                            cursor: pointer;
                            &.active{
                              background-image: url(../img/ico_pin_on.svg);
                            }
                          }
                        }
                        .tenant--per--wrap{ 
                          display: flex;
                          gap: 0.94rem;
                          justify-content: space-between;
                          .tenant--per--num{
                            span{
                              &:nth-child(1){
                                color: #438DFF;
                                font-size: 1.125rem;
                                font-weight: 900;
                                letter-spacing: -0.01125rem;
                                margin-right: 0.2rem;
                              }
                              &:nth-child(2){
                                color: #8C8C8C;
                                font-size: 0.75rem;
                                font-weight: 500;
                                letter-spacing: -0.0075rem;
                              }
                            }
                          }
                          .tenant--per--bar{
                            width: 100%;
                            position: relative;
                            .bg--bar{
                              position: absolute;
                              bottom: 0;
                              width: 100%;
                              background-color: #EAEAEA;
                              border-radius: 6.25rem;
                              height: 0.75rem;
                              .fill--bar{
                                height: 0.75rem;
                                line-height: 0.75rem;
                                background: #438DFF;
                                border-radius: 6.25rem;
                                color: #FFF;
                                text-align: center;
                                font-size: 0.625rem;
                                font-weight: 700;
                                letter-spacing: -0.00625rem;
                              }
                            }
                          }
                        }
                        &.warning{
                          .tenant--per--wrap{
                            .tenant--per--num{
                              span{
                                &:first-child{
                                  color: #E1473D;
                                }
                              }
                            }
                            .tenant--per--bar{
                              .bg--bar{
                                .fill--bar{
                                  background-color: #e1473d;
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                  .swiper-pagination{
                    position: static;
                    width: auto;
                    margin-top: 0.75rem;
                    .swiper-pagination-bullet{
                      margin-left: 0;
                      margin-right: 0.63rem;
                      width: 0.75rem;
                      height: 0.75rem;
                      background-color: #E9E9E9;
                      opacity: 1;
                      &.swiper-pagination-bullet-active{
                        background-color: #6F8AA6;
                      }
                      &:last-child{
                        margin-right: 0;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        &.type2{
          .core--component--wrap{
            .inner--header--wrap{
              &.mt--15rem{
                margin-top: 1.56rem;
              }
              .inner--component--title{
                &.none--after{
                  &::after{
                    display: none;
                  }
                }
              }
              .pagenation--wrapper{
                .search--box{
                  display: flex;
                  padding-left: 1.25rem;
                  position: relative;
                  gap: 0.63rem;
                  &::before{
                    content: '';
                    width: 0.0625rem;
                    height: 1.125rem;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    background-color: #E0E0E0;
                  }
                  .custom-btn{
                    &.sort-btn{
                      width: 2.25rem;
                      height: 2.25rem;
                      min-width: 2.25rem;
                      border-radius: 0.3125rem;
                      border: 1px solid #D1D1D1;
                      background-color: #FFF;
                      padding: 0;
                      background-size: 0.875rem 0.875rem;
                      background-image: url(../img/ico_sort.svg);
                      background-repeat: no-repeat;
                      background-position: center;
                      
                    }
                  }
                  .sort--atv{
                    position: absolute;
                    right: 0;
                    background-color: #fff;
                    border-radius: 0.5rem;
                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
                    padding: 1.25rem 1.38rem;
                    z-index: 2;
                    top: 2.5rem;
                    ul{
                      display: flex;
                      flex-direction: column;
                      gap: 0.94rem;
                      li{
                        color: #000;
                        font-size: 0.8125rem;
                        font-style: normal;
                        font-weight: 400;
                        cursor: pointer;
                        &.atv{
                          font-weight: 700;
                        }
                      }
                    }
                  }
                }
              }
            }
            .inner--content{
              padding-top: 1rem;
              .ran--card{
                display: flex;
                gap: 0.94rem;
                flex-wrap: wrap;
                >li{
                  border-radius: 0.625rem;
                  border: 1px solid #EFEFEF;
                  background: #F8F8F8;
                  width: calc(100% / 9 - 0.84rem);
                  padding: 1rem;
                  height: 7rem;
                  &:hover{
                    border: 1px solid #b4d1ff;
                  }
                  .ran--title{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 0.5rem;
                    .ran--area{
                      color: #222;
                      font-size: 0.8rem;
                      font-weight: 700;
                    }
                    .more--btn{
                      width:0.875rem;
                      height:0.875rem;
                      min-width: 0.875rem;
                      padding: 0;
                      background: url(../img/ico_ran_arrow_gray.svg) no-repeat center;
                      background-size: cover;
                    }
                  }
                  .ran--stat{
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    p{
                      display: flex;
                      justify-content: space-between;
                      span{
                        color: #222;
                        font-size: 0.7rem;
                        font-weight: 500;
                        &:nth-child(2){
                          font-weight: 700;
                          color: #111111;
                        }
                      }
                    }
                  }
                  &.ran--blue{
                    border: 1px solid #1E76FF;
                    background: #438DFF;
                    .ran--title{
                      span{
                        color: #ffffff;
                      }
                      .more--btn{
                        background-image: url(../img/ico_ran_arrow_white.svg);
                      }
                    }
                    .ran--stat{
                      p{
                        span{
                          color: #ffffff;
                          &.color--yel{
                            color: #FAFF00;
                          }
                        }
                      }
                    }
                  }
                  &.ran--red{
                    border: 1px solid #BB251B;
                    background: #E1473D;
                    .ran--title{
                      span{
                        color: #ffffff;
                      }
                      .more--btn{
                        background-image: url(../img/ico_ran_arrow_white.svg);
                      }
                    }
                    .ran--stat{
                      p{
                        span{
                          color: #ffffff;
                          &.color--yel{
                            color: #FAFF00;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .core--card{
                row-gap: 0.5rem;
                > li{
                  .card--header{
                    h2{
                      font-size: 0.8rem;
                    }
                  }
                }
              }
            }
            &.small{
              .inner--content{
                .equip--card--wrap{
                  height: calc(100% - 1.6rem);
                }
              }
            }
          }
          .user--list--wrap{
            height: 100%;
            .current--value{
              right: -4rem;
              width: auto;
            }
          }
          .user--list--contents{
            height: 100%;
            .tbl-wrapper{
              box-shadow: none;
              .user--list--pin{
                color: transparent;
                background-image: url(../img/ico_pin_on.svg);
                width: 1rem;
                height: 1rem;
                background-size: cover;
                display: inline-block;
                line-height: 1rem;
                background-position: center;
              }
              .none--pin{
                color: #444444;
                font-size: 0.875rem;
                font-weight: 400;
              }
              .user--list--ban{
                color: rgba(34, 34, 34, 0.3);
                &::after{
                  content: '';
                  width: 0.875rem;
                  height: 0.875rem;
                  background-image: url(../img/ico_ban.svg);
                  display: inline-block;
                  background-size: cover;
                  margin-left: 0.5rem;
                }
              }
              .user--list--dis{
                color: rgba(34, 34, 34, 0.3);
              }
              .user--list--critical{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #f00;
                }
              }
              .user--list--major{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #C96103;
                }
              }
              .user--list--minor{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #DDA405;
                }
              }
              .user--list--normal{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #2D8CFA;
                }
              }
            }
          }
          .user--list--bar--graph{
            height: 100%;
            padding:1.25rem;
            .inner--header--wrap{
              display: flex;
              align-items: center;
              justify-content: space-between;
    
              
    
              .current--date{
                color: #8E8E8E;
                font-size: 0.8125rem;
                font-weight: 400;
              }
              .pagenation--wrapper{
                display: flex;
                align-items: center;
                gap:1.25rem;
            
                .total--wrapper{
                  color: #222;
                  font-size: 0.8125rem;      
                  font-weight: 400;      
                  .total--count{
                    color: #438DFF;
                    font-size: 0.8125rem;        
                    font-weight: 700;
                  }
                }
            
                .pager--btn--wrap{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  gap:0.94rem;
            
                  .page--numb{
                    height:1.625rem;
                    line-height: 1.625rem;;
                    display: flex;
                    align-items: center;
                    gap:0.1rem;
                    .current{
                      color: #333;
                      font-size: 0.8125rem;          
                      font-weight: 700;
                    }
                    color: #666;
                    font-size: 0.8125rem;      
                    font-weight: 400;
                  }
            
                  .page--btn{
                    border-radius: 0.5rem;
                    border: 1px solid #DDD!important;
                    background: #FFF;
                    width:1.625rem!important;
                    min-width:1.635rem!important;
                    height:1.625rem!important;
                    padding:0px!important;
            
                    &.prev--btn{
                      background:url(../img/ic_chv.svg) no-repeat center;
                    }
                    &.next--btn{
                      background:url(../img/ic_chv.svg) no-repeat center;
                      transform: rotate(180deg);
                    }
                  }
                }
    
                .search--box{
                  display: flex;
                  padding-left: 1.25rem;
                  position: relative;
                  gap: 0.63rem;
                  &::before{
                    content: '';
                    width: 0.0625rem;
                    height: 1.125rem;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    background-color: #E0E0E0;
                  }
                  .custom-btn{
                    &.sort-btn{
                      width: 2.25rem;
                      height: 2.25rem;
                      min-width: 2.25rem;
                      border-radius: 0.3125rem;
                      border: 1px solid #D1D1D1;
                      background-color: #FFF;
                      padding: 0;
                      background-size: 0.875rem 0.875rem;
                      background-image: url(../img/ico_sort.svg);
                      background-repeat: no-repeat;
                      background-position: center;
                      
                    }
                  }
                }
              }
            }
            
            .user--list--contents{
              height:calc(100% - 1.25rem);
              .data--list--content--modal{          
                width:100%;
                display: flex;
                align-items:flex-start;
                justify-content: flex-start;
                flex-wrap:wrap;
                padding:0;
                padding-bottom:1.25rem;
                padding-top: 0.8rem;
                gap:0.45rem;
                > li{
                  border-radius: 0.625rem;
                  border: 1px solid #EFEFEF;
                  background: #F8F8F8;
                  width:calc( (100% - (0.94rem * 3)) / 4);                  
                  padding:0.52rem;
            
                  >h2{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    span{
                      color: #222;
                      font-size: 0.75rem;
                      font-weight: 500;
                      letter-spacing: -0.0075rem;
                      display: flex;
                      align-items: center;
                      justify-content: space-between;
                      gap:0.31rem;
                      .ico--disconnected{
                        display: inline-flex;
                        min-width: 0.875rem;
                        min-height:0.8975rem;
                        width: 0.875rem;
                        height: 0.875rem;
                        background:url(../img/ic_ds.svg) no-repeat center;
                      }
                    }
            
                    .icon--control{
                      .pin--lock{
                        width: 0.875rem;
                        min-width:0.875rem;
                        height: 0.875rem;
                        padding:0px;
                        background: url(../img/ic_tack_off.svg) no-repeat center;
                        &.on{
                          background: url(../img/ic_tack_on.svg) no-repeat center;
                        }
                      }
                    }
                  }
                  .data--column{
                    padding-top:.25rem;
                    display: flex;
                    align-items: center;
                    width:100%;
                    gap:1rem;
                    .data--bar--chart{
                      width:100%;
                      .data--bar--wrap{
                        width:100%;
                        height: 0.75rem;
                        border-radius: 6.25rem;
                        background: #EAEAEA;
            
                        .data--bar--current{
                          color: #FFF;
                          font-size: 0.625rem;
                          height:0.75rem;
                          line-height: 0.75rem;              
                          font-weight: 700;
                          letter-spacing: -0.00625rem;
                          background:#55E074;
                          border-radius: 6.25rem;
                          padding:0rem 0.37rem;
                        }
                      }
                    }
            
                    .percent{
                      color: #43D263;
                      font-size: .9025rem;
                      font-weight: 900;
                      letter-spacing: -0.01125rem;
                      display: flex;
                      align-items: center;
                      gap:0.22rem;
                      .unit{
                        color: #8C8C8C;
                        font-size: 0.75rem;
                        font-weight: 500;
                        letter-spacing: -0.0075rem;
                        font-style: normal;
                      }
                    }
                  }

                  &.discon{
                    > h2{
                      > span{
                        color: rgba(34, 34, 34, 0.3);
                        &::after{
                          content: '';
                          width: 0.875rem;
                          height: 0.875rem;
                          background-image: url(../img/ico_ban.svg);
                          display: inline-block;
                          background-size: cover;
                        }
                      }
                    }
                  }
                  &.critical{
                    .data--column{
                      .percent{
                        color: #f00;            
                      }
                      .data--bar--chart{
                        .data--bar--wrap{
                          .data--bar--current{
                            background: #f00;
                          }
                        }
                      }
                    }
                  }
                  &.major{     
                    .data--column{
                      .percent{
                        color: #C96103;            
                      }
                      .data--bar--chart{
                        .data--bar--wrap{
                          .data--bar--current{
                            background: #C96103;
                          }
                        }
                      }
                    }
                  }     
                  &.minor{     
                    .data--column{
                      .percent{
                        color: #DDA405;            
                      }
                      .data--bar--chart{
                        .data--bar--wrap{
                          .data--bar--current{
                            background: #DDA405;
                          }
                        }
                      }
                    }
                  }   
                  &.normal{     
                    .data--column{
                      .percent{
                        color: #2D8CFA;            
                      }
                      .data--bar--chart{
                        .data--bar--wrap{
                          .data--bar--current{
                            background: #2D8CFA;
                          }
                        }
                      }
                    }
                  }  
                }
              }
      
            }
            &.small{
              height:100%;
              .data--list--content--modal{
                height:100%;
                > li{
                  width: calc((100% - (0.62rem * 3)) / 5);
                  height:calc( ( 100% - 2.5rem) / 4)!important;
                }
              }
              
            }
          }
          .pagenation--wrapper{
            display: flex;
            align-items: center;      
            gap:1.25rem;
      
            .btn--list--content{
              position: relative;
              display: flex;
              align-items: center;
              gap:0.62rem;
              margin-left:0.625rem;
              &:before{
                content:'';
                display: block;
                width: 0.0625rem;
                height: 1.125rem;
                background: #E0E0E0;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                left:-0.94rem;
              }
            }
      
      
      
            .shape--selector{
              display: flex;
              align-items: center;
              gap:0.62rem;
              position: relative;
              margin-left:0.625rem;
              &:before{
                content:'';
                display: block;
                width: 0.0625rem;
                height: 1.125rem;
                background: #E0E0E0;
                position: absolute;
                top:50%;
                transform: translateY(-50%);
                left:-0.94rem;
              }
              .v-btn{
                border-radius: 0.5rem;
                border: 1px solid #DDD;
                background: #FFF;
                width: 1.625rem;
                min-width:1.625rem!important;
                height: 1.625rem;
                padding:0px;
                &.card--type--btn{
                  background:url(../img/ic_card_off.svg) no-repeat center;
                  &.on{
                    background:#6F8AA6 url(../img/ic_card_on.svg) no-repeat center;
                  }
                }
                &.list--type--btn{            
                  background:url(../img/ic_list_off.svg) no-repeat center;
                  &.on{
                    background:#6F8AA6 url(../img/ic_list_on.svg) no-repeat center;
                  }
                }
              }
            }
      
      
            .all--view--btn{        
              display: flex;
              height: 1.875rem;
              padding: 0.625rem;
              align-items: center;
              padding:0px!important;        
              border-radius: 6.25rem;
              background: #438DFF;
              width:5.625rem;
              
              *{
                color: #FFF!important;
                font-size: 0.8125rem;
                font-weight: 500;
                letter-spacing: -0.00813rem;
              }
                
              
      
              .icon{
                width: 0.875rem;
                height: 0.875rem;
                background: url(../img/ic_allview.svg) no-repeat center;
                margin-right:0.3125rem;
              }
            }
      
            .issue--cont{
              display: flex;
              align-items: center;
              justify-content: center;
              color: #444;
              font-size: 0.8125rem;
              font-weight: 500;
              letter-spacing: -0.00813rem;
              border-radius: 6.25rem;
              border: 1px solid #EAB2AE;
              background: #FFF;
              height: 1.875rem;
              padding: 0.625rem;
              gap: 0.3125rem;
      
              .icon{
                width:0.875rem;
                height:0.875rem;
                background: url(../img/ic_issue_flag.svg) no-repeat center;
              }
              .current--value{
                color: #E1473D;
                font-size: 0.8125rem;
                font-weight: 700;
                letter-spacing: -0.00813rem;
              }
            }
        
            .total--wrapper{
              color: #222;
              font-size: 0.8125rem;      
              font-weight: 400;      
              .total--count{
                color: #438DFF;
                font-size: 0.8125rem;        
                font-weight: 700;
              }
            }
        
            .pager--btn--wrap{
              display: flex;
              align-items: center;
              justify-content: center;
              gap:0.94rem;
        
              .page--numb{
                height:1.625rem;
                line-height: 1.625rem;;
                display: flex;
                align-items: center;
                gap:0.1rem;
                .current{
                  color: #333;
                  font-size: 0.8125rem;          
                  font-weight: 700;
                }
                color: #666;
                font-size: 0.8125rem;      
                font-weight: 400;
              }
        
              .page--btn{
                border-radius: 0.5rem;
                border: 1px solid #DDD!important;
                background: #FFF;
                width:1.625rem!important;
                min-width:1.635rem!important;
                height:1.625rem!important;
                padding:0px!important;
        
                &.prev--btn{
                  background:url(../img/ic_chv.svg) no-repeat center;
                }
                &.next--btn{
                  background:url(../img/ic_chv.svg) no-repeat center;
                  transform: rotate(180deg);
                }
              }
            }
          }
        }
        &.type1{
          .core--component--wrap{
            .inner--header--wrap{
              .pagenation--wrapper{
                .search--box{
                  display: flex;
                  padding-left: 1.25rem;
                  position: relative;
                  gap: 0.63rem;
                  &::before{
                    content: '';
                    width: 0.0625rem;
                    height: 1.125rem;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                    background-color: #E0E0E0;
                  }
                  .custom-btn{
                    &.sort-btn{
                      width: 2.25rem;
                      height: 2.25rem;
                      min-width: 2.25rem;
                      border-radius: 0.3125rem;
                      border: 1px solid #D1D1D1;
                      background-color: #ffffff;
                      padding: 0;
                      background-size: 0.875rem 0.875rem;
                      background-image: url(../img/ico_sort.svg);
                      background-repeat: no-repeat;
                      background-position: center;

                    }
                  }
                  .sort--atv{
                    position: absolute;
                    right: 0;
                    background-color: #fff;
                    border-radius: 0.5rem;
                    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
                    padding: 1.25rem 1.38rem;
                    z-index: 2;
                    top: 2.5rem;
                    ul{
                      display: flex;
                      flex-direction: column;
                      gap: 0.94rem;
                      li{
                        color: #000;
                        font-size: 0.8125rem;
                        font-style: normal;
                        font-weight: 400;
                        cursor: pointer;
                        &.atv{
                          font-weight: 700;
                        }
                      }
                    }
                  }
                }
              }
            }
            .inner--content{
              padding-top: 0.8rem;
              height: 100%;
              .core--card{
                > li{}
              }
            }
            &.small{
              .inner--content{
                .equip--card--wrap{
                  .equip--card{
                    &.critical{
                      border: 1px solid #F4A19C;
                      background-color: #FFF4F3
                    }
                    &.major{
                      border: 1px solid #FFD3AC;
                      background-color: #FFF6EE;
                    }
                    &.minor{
                      border: 1px solid #FFE6A5;
                      background-color: #FFF7E2;
                    }
                    &.normal{
                      border: 1px solid #E3E3E3;
                      background-color: #ffffff;
                    }
                    // &:hover{
                    //   &::after{
                    //     background-color: rgba(67, 141, 255, 0.20)!important;
                    //     content: '';
                    //     width: 100%;
                    //     height: 100%;
                    //     border-radius: 0.625rem;
                    //     position: absolute;
                    //     top: 0;
                    //     left: 0;
                    //   }
                    // }
                    &.discon{
                      &::after{
                        content:'';
                        width: 100%;
                        height: 100%;
                        background-color: rgba(255, 0, 0, 0.50);
                        border-radius: 0.625rem;
                        position: absolute;
                        top: 0;
                        left: 0;
                        background-image: url(../img/ico_wifi.svg);
                        background-size: 2.5rem 2.5rem;
                        background-position: center;
                      }
                    }
                    .equip--st{
                      .circle{
                        &.critical{
                          background-color: #FF0000;
                        }
                        &.major{
                          background-color: #C96103;
                        }
                        &.minor{
                          background-color: #DDA405;
                        }
                        &.warning{
                          background-color: #D1B568;
                        }
                        &.normal{
                          background-color: #2D8CFA;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          .user--list--wrap{
            height: 100%;
            .current--value{
              right: -4rem;
              width: auto;
            }
          }
          .user--list--bar--graph{
            height: 100%;
          }
          .user--list--contents{
            height: 100%;
            .tbl-wrapper{
              box-shadow: none;
              .user--list--pin{
                color: transparent;
                background-image: url(../img/ico_pin_on.svg);
                width: 1rem;
                height: 1rem;
                background-size: cover;
                display: inline-block;
                line-height: 1rem;
                background-position: center;
              }
              .none--pin{
                color: #444444;
                font-size: 0.875rem;
                font-weight: 400;
              }
              .user--list--ban{
                color: rgba(34, 34, 34, 0.3);
                &::after{
                  content: '';
                  width: 0.875rem;
                  height: 0.875rem;
                  background-image: url(../img/ico_ban.svg);
                  display: inline-block;
                  background-size: cover;
                  margin-left: 0.5rem;
                }
              }
              .user--list--dis{
                color: rgba(34, 34, 34, 0.3);
              }
              .user--list--critical{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #f00;
                }
              }
              .user--list--major{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #C96103;
                }
              }
              .user--list--minor{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #DDA405;
                }
              }
              .user--list--normal{
                &::before{
                  content: '';
                  display: inline-block;
                  margin-right: 0.62rem;
                  border-radius: 50%;
                  width: 0.75rem;
                  height: 0.75rem;
                  background-color: #2D8CFA;
                }
              }
            }
          }
          .map--contents--wrap{
            .header--wrapper{
              .control--wrap{
                .custom-btn{
                  background-color: #d4d4d4;
                  &.on{
                    background-color: #438DFF;
                  }
                }
              }
            }
            .inner--content--wrapper{
              .map--sub--info{
                .status--row{
                  > ul{
                    > li{
                      .icon{
                        background-size: cover;
                      }
                    }
                  }
                }
                .status--list{
                  width: 15.625rem;
                  .drp--header{
                    &.active{
                      background-color: #6f8aa6;
                      > div{
                        color: #ffffff;
                        span{
                          color: #ffffff;
                        }
                        .drop--btn{
                          background-image: url(../img/ic_drop_down_on.svg);
                        }
                      }
                      .drp--titles{
                        &::before{
                          background-image: url(../img/ic_tenant_small_white.svg);
                        }
                      }
                    }
                    .drp--titles{
                      &::before{
                        background-size: cover;
                      }
                    }
                    .drp--current--data{
                      .drop--btn{
                        background-size: cover;
                      }
                    }
                  }
                  .drp--content{
                    border-top: none;
                    &.active{
                      height: auto;
                    }
                    ul{
                      padding: 0 1.25rem 1.25rem;
                      max-height: 20vh;
                      background-color: #F7F7F7;
                      overflow-y: auto;
                      li{
                        padding: 0.88rem 0;
                        border-bottom: 1px solid #E4E4E4;
                        &:last-child{
                          border-bottom: none;
                        }
                      }
                    }
                    &.type1{
                      li{
                        color: #333;
                        font-size: 0.8125rem;
                        font-weight: 400;
                        span{
                          color: #111;
                          font-weight: 500;
                          margin-left: 0.1rem;
                        }
                      }
                    }
                    &.type2{
                      li{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .li--l{
                          color: #333;
                          font-size: 0.8125rem;
                          width: 65%;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          font-weight: 500;
                        }
                        .li--r{
                          display: flex;
                          align-items: center;
                          gap: 0.94rem;
                          span{
                            color: #333;
                            font-size: 0.8125rem;
                            font-weight: 400;
                          }
                          .alarm{
                            width: 0.875rem;
                            height: 0.875rem;
                            background-size: cover;
                            display: inline-block;
                            background-image: url(../img/ico_alarm_gray.svg);
                            &.red{
                              background-image: url(../img/ico_alarm_red.svg);
                            }
                            &.green{
                              background-image: url(../img/ico_alarm_green.svg);
                            }
                            &.blue{
                              background-image: url(../img/ico_alarm_blue.svg);
                            }
                          }
                        }
                      }
                    }
                    &.type3{
                      li{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .li--l{
                          color: #333;
                          font-size: 0.8125rem;
                          font-weight: 500;
                          width: 65%;
                          white-space: nowrap;
                          overflow: hidden;
                          text-overflow: ellipsis;
                        }
                        .li--r{
                          color: #666;
                          font-size: 0.8125rem;
                          font-weight: 400;
                        }
                      }
                    }
                  }
                }
              }
            }
            .inner--content{
              padding-top: 1.25rem;
              .ran--card{
                display: flex;
                gap: 0.94rem;
                flex-wrap: wrap;
                >li{
                  display: flex;
                  flex-direction: column;
                  border-radius: 0.625rem;
                  border: 1px solid #EFEFEF;
                  background: #F8F8F8;
                  width: calc((100% - 2.82rem) / 4);
                  padding: 1.25rem;
                  height: calc((100vh - 23.3rem) / 5);
                  &:hover{
                    border: 1px solid #b4d1ff;
                  }
                  .ran--title{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 1rem;
                    .ran--area{
                      color: #222;
                      font-size: 0.8125rem;
                      font-weight: 700;
                    }
                    .more--btn{
                      width:0.875rem;
                      height:0.875rem;
                      min-width: 0.875rem;
                      padding: 0;
                      background: url(../img/ico_ran_arrow_gray.svg) no-repeat center;
                      background-size: cover;
                    }
                  }
                  .ran--stat{
                    display: flex;
                    flex-direction: column;
                    gap: 0.6rem;
                    p{
                      display: flex;
                      justify-content: space-between;
                      span{
                        color: #222;
                        font-size: 0.75rem;
                        font-weight: 500;
                        &:nth-child(2){
                          font-weight: 700;
                          color: #111111;
                        }
                      }
                    }
                  }
                  &.ran--blue{
                    border: 1px solid #1E76FF;
                    background: #438DFF;
                    .ran--title{
                      span{
                        color: #ffffff;
                      }
                      .more--btn{
                        background-image: url(../img/ico_ran_arrow_white.svg);
                      }
                    }
                    .ran--stat{
                      p{
                        span{
                          color: #ffffff;
                          &.color--yel{
                            color: #FAFF00;
                          }
                        }
                      }
                    }
                  }
                  &.ran--red{
                    border: 1px solid #BB251B;
                    background: #E1473D;
                    .ran--title{
                      span{
                        color: #ffffff;
                      }
                      .more--btn{
                        background-image: url(../img/ico_ran_arrow_white.svg);
                      }
                    }
                    .ran--stat{
                      p{
                        span{
                          color: #ffffff;
                          &.color--yel{
                            color: #FAFF00;
                          }
                        }
                      }
                    }
                  }
                  &.ran--all{
                    border: 1px solid #1E76FF;
                    background: #3f5984;
                    .ran--title{
                      span{
                        color: #ffffff;
                      }
                      .more--btn{
                        background-image: url(../img/ico_ran_arrow_white.svg);
                      }
                    }
                    .ran--stat{
                      p{
                        span{
                          color: #ffffff;
                          &.color--yel{
                            color: #FAFF00;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .menu-flex-wrap {
    gap: 1.88rem;

    .system-menu {
      width: 21.25rem;
      padding: 1.25rem;
      height: calc(100vh - 15rem);
      border-radius: 0.5rem;
      border: none;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
      background: #fff;

      .system-menu-tit {
        color: #111111;
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 100%;
        /* 0.9375rem */
        letter-spacing: -0.01875rem;
        background: #fff;
        border-bottom: 1px solid #0B318B;
        height: 2.8125rem;
        padding: 0 1.12rem;

        .ico {
          margin-right: 0.62rem;
          width: 0.875rem;
          height: 0.875rem;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          background-image: url(../img/ico_cate.svg);
        }
      }

      .system-menu-in {
        margin-top: 0;
        padding: 0;
        gap: 0;

        .system-box {
          .system-box-tit {
            padding: 1.12rem;
            font-size: 0.9375rem;
            font-weight: 600 !important;
            gap: 0.66rem;
            border-bottom: 1px solid #EBEBEB;
            color: #333333;
            position: relative;

            >button {
              &:first-child {
                background-image: none;
                width: 0.4375rem;
                height: 0.4375rem;
                background-color: #9c9c9c;
                border-radius: 50%;
              }

              &:nth-child(2) {
                background-image: url(../img/ico_plus.svg);
                width: 0.875rem;
                height: 0.875rem;
                position: absolute;
                right: 1.12rem;
              }
            }
          }

          &.on {
            .system-box-tit {
              font-weight: 700 !important;
              color: #0b318b;

              >button {
                &:first-child {
                  background-color: #0B318B;
                }

                &:nth-child(2) {
                  background-image: url(../img/ico_minus.svg);
                }
              }
            }
          }

          .system-box-sub {
            padding: 1.25rem 1.69rem;
            background: #F8FAFF;

            ul {
              gap: 1.5625rem;

              li {
                gap: 0;
                color: #000000;
                font-size: 0.8125rem;
                font-weight: 400;
                letter-spacing: -0.01625rem;
                line-height: 100%;

                &::before {
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    .menu-info {
      height: calc(100vh - 15rem);
      border: none;
      border-radius: 0.5rem;
      background-color: #fff;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);

      .info-tit {
        height: 4.6875rem;
        background-color: #fff;
        padding: 0 1.88rem;
        letter-spacing: -0.01875rem;
        font-size: 0.9375rem;
        color: #111111;
        border-radius: 0.5rem 0.5rem 0 0;
        border-bottom: 1px solid #e9e9e9;
      }

      .menu-info-view {
        padding: 1.25rem;
        margin-top: 0;
        height: calc(100vh - 19.6875rem);

        .info-tbl {
          .form-style2 {
            &.shadow--type {
              padding: 1.25rem 1.25rem 0.94rem 1.25rem;
              box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
              border-radius: 0.5rem;

              table {
                tr {
                  th {
                    background-color: #fff;
                    padding: 1.13rem 0.62rem 1.13rem 0.62rem;
                    color: #444;
                    font-weight: 700;
                    font-size: 0.875rem;
                    border-right: none;
                  }

                  td {
                    color: #444444;
                    font-size: 0.875rem;
                    font-weight: 400;
                    line-height: 100%;

                    .input-wrap {
                      flex-direction: column;
                      gap: 1.25rem;

                      .custom-check {
                        &.v-input {
                          &.type2 {
                            .v-input__control {
                              .v-selection-control {
                                .v-label {
                                  padding-left: 0.37rem;
                                  color: #444444;
                                  font-size: 0.875rem;
                                  font-weight: 600;
                                }

                                .v-selection-control__wrapper {
                                  .v-selection-control__input {
                                    .v-icon {
                                      background-size: cover;
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }

                  &:last-child {
                    th {
                      border-bottom: none;
                    }

                    td {
                      border-bottom: none;
                    }
                  }
                }
              }
            }
          }
        }

        .no-data {
          flex-direction: row;
          gap: 0.63rem;

          .ico {
            background-image: url(../img/ico_no_data2.svg);
            width: 1.25rem;
            height: 1.25rem;
          }

          >p {
            margin-top: 0;
            color: #444444;
            font-size: 0.875rem;
            font-weight: 700;
          }
        }
      }
    }
  }
}

.tbl-wrap {
  .ag-theme-quartz {
    &.ag--line--type {
      .ag-root-wrapper {
        .ag-header-group-cell {
          .ag-header-cell-comp-wrapper {
            justify-content: center;
            font-size: 0.875rem;
            color: #444444;
            font-weight: 700;
          }
        }

        .ag-header-row {
          .ag-header-cell {
            &:first-child {}

            &:nth-child(2) {}

            .ag-header-cell-resize {}
          }
        }

        .lock-pinned {
          background: #F2F7FF;
          font-size: 0.875rem;
          color: #444444;
          font-weight: 700;
          line-height: 2.55rem;
          padding: 0 1.25rem;
        }
      }
    }

    .ag-root-wrapper {
      .ag-root {
        .ag-sticky-bottom {
          width: 0 !important;
        }
      }
    }
  }
}

.custom-input{
  &.v-text-field{
    &.v-input--error{
      .v-input__details{
        padding-inline: 0;
        padding-top: 0.63rem;
        .v-messages{
          .v-messages__message{
            line-height: 100%;
            color: #e50a0a;
            font-size: 0.8125rem;
          }
        }
      }
    }
    .v-input__control{
      .v-field--error{
        .v-field__field{
          .v-field__input{
            border: 1px solid #FF8C8C!important;
            position: relative;
            background-image: url(../img/ico_error.svg);
            background-repeat: no-repeat;
            background-size: 0.875rem 0.875rem;
            background-position: right 0.75rem center;
          }
        }
      }
    }
  }
}

// 로그인
.login-wrap{
  .login--header{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.88rem;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    height: 4.75rem;
    z-index: 100;
    .login--header--l{
      display: flex;
      gap: 0.9375rem;
      align-items: center;
      .logo{        
        color:#fff;        
      }
      p{
        color: #ffffff;
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 100%;
      }
    }
    .login--header--r{
      .custom-select{
        &.v-input{
          .v-input__control{
            .v-field {
              border-radius: 0.375rem;
              .v-field__field{
                padding-left: 0.75rem;
              }
            }
          }
        }
      }
      &.dp--flex{
        display: flex;
        align-items: center;
        .user-info {
          display: flex;
          position: relative;
          .ico {
            width: 1.625rem;
            height: 1.625rem;
            background: #fff;
            border-radius: 100%;
            color: #438DFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
          }
  
          .info-detail {
            position: absolute;
            top: 2.7rem;
            left: 50%;
            width: 11.88rem;
            // height: 12.25rem;
            padding: 1.25rem;
            // background: url("../img/bg_tooltip4.svg") no-repeat center / 100%;
            transform: translateX(-50%);
            background: #FFF;
            border:1px solid #ddd;
            box-shadow:0px 4px 4px rgba(0, 0, 0, 0.20);          
            border-radius: 0.625rem;
            &:after{
              content: '';
              display: block;
              width: 0;
              height: 0;
              border-left: 0.40625rem solid transparent;
              border-right: 0.40625rem solid transparent;
              border-bottom: 0.6875rem solid #fff;
              position: absolute;
              top:-0.5875rem;
              left:50%;
              transform: translateX(-50%);
            }
            &:before{
              content: '';
              display: block;
              width: 0;
              height: 0;
              border-left: 0.40625rem solid transparent;
              border-right: 0.40625rem solid transparent;
              border-bottom: 0.6875rem solid #ddd;
              position: absolute;
              top:-0.6875rem;
              left:50%;
              transform: translateX(-50%);
            }
  
            .custom--btn--wrap{
              display: flex;
              flex-direction: column;
              gap:0.5rem;
            }
  
            p {
              color: #111;
              font-size: 0.94rem;
              font-weight: 700;
              margin-bottom: 0.94rem;
  
              span {
                font-weight: 600;
              }
            }
  
            ul {
              padding-bottom: 1.25rem;
              margin-bottom: 0.94rem;
              border-bottom: 0.06rem solid #e1e1e1;
              display: flex;
              flex-direction: column;
              gap: 0.25rem;
  
              li {
                color: #444444;
                font-size: 0.81rem;
                font-weight: 400;
              }
  
  
              &.nw--btn--text--type{
                gap:0.6rem;
                border-bottom:0px;
              }
            }
  
            .custom-btn.v-btn.v-btn--density-default {
              border: 0.06rem solid #D0DDEA;            
              border-radius: 0.31rem;
              width: 100%;
              height: 2.5rem;
              min-height: 2.5rem;
  
              .v-btn__content {
                color:#798592;              
                font-size: 0.75rem;
                font-weight: 600;
                letter-spacing: -0.01rem;
              }
  
  
              &:hover{
                .v-btn__content {
                  color: #064F9E!important;
                }              
                border: 0.06rem solid rgba(6, 79, 158, 0.5);
              }
            }
          }
        }
  
        .user-name {
          color: #fff;
          font-size: 0.81rem;
          padding: 0 0.815rem;
          font-weight: 700;
          cursor: pointer;
        }
  
        .btn-logout {
          width: 2rem;
          height: 2rem;
          background: url("../img/ico_logout.svg") no-repeat center / 100%;
        }
      }
    }
  }
  .login-box{
    .login-l{
      .login-l-center{
        text-align: center;
        .logo{
          background: none;
          font-size: 1.5625rem;
          font-weight: 700;
          letter-spacing: -0.04688rem;
          pointer-events: none;
          line-height: 100%;
          height: auto;
        }
        p{
          color: #333;
          text-align: center;
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 100%; /* 0.875rem */
          letter-spacing: -0.00875rem;
          pointer-events: none;
        }
      }
    }
    .login-r{
      .login-input-wrap{
        .txt-field-box{
          &:first-of-type{
            margin-bottom: 0.87rem;
          }
          .v-input{
            &.custom-input{
              &.v-text-field{
                min-height: 2.25rem;
                .v-input__control{
                  height: 2.25rem;
                  .v-field__field{
                    .v-field__input{
                      min-height: 2.25rem;
                      height: 2.25rem;
                      padding: 0 0.75rem;
                    }
                  }
                }
              }
            }
          }
          &.error{
            .v-input{
              &.custom-input{
                &.v-text-field{
                  .v-input__control{
                    .v-field--appended{
                      .v-field__append-inner{
                        right: 2.6rem;
                      }
                    }
                  }
                }
              }
            }
            .ico-eye{
              right: 2.5rem;
            }
          }
          .ico-eye{
            position: absolute;
            background-size: cover;
            background-image: url(../img/ico_eye.svg);
            width: 1.125rem;
            height: 1.125rem;
            right: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            &.eye-off{
              background-image: url(../img/ico_eye2.svg);
            }
          }
        }
      }
      .login-radio{
        margin-top: 1.87rem;
        .custom-radio{
          &.v-input{
            .v-input__control{
              .v-selection-control-group{
                .v-radio{
                  margin-right: 1.56rem;
                  .v-label{
                    margin-left: 0.38rem;
                    font-weight: 500;
                    color: #444444;
                    font-size: 0.875rem;
                  }
                  .v-selection-control__wrapper{
                    .v-selection-control__input{
                      .v-icon{
                        border: 1px solid #c0c0c0;
                        width: 1rem;
                        height: 1rem;
                        &.mdi-radiobox-marked{
                          background-color: #438dff;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
      .login-otp{
        margin-top: 1.87rem;
        gap: 0.5rem;
        .custom-input{
          &.v-text-field{
            min-height: 2.25rem;
            .v-input__control{
              height: 2.25rem;
              .v-field__field{
                .v-field__input{
                  min-height: 2.25rem;
                  height: 2.25rem;
                  padding: 0 0.75rem;
                }
              }
            }
          }
        }
        .btn-gray{
          width: 6.875rem;
          height: 2.25rem;
        }
      }
      .login-chk{
        margin: 1.88rem 0 0;
        .custom-check{
          &.v-input{
            .v-input__control{
              .v-selection-control{
                .v-selection-control__wrapper{
                  .v-selection-control__input{
                    .v-icon{
                      background-size: cover;
                    }
                  }
                }
                .v-label{
                  padding-left: 0.38rem;
                  color: #444444;
                  font-size: 0.875rem;
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
      .login-find{
        margin-top: 1.88rem;
        padding-top: 1.88rem;
      }
      .login-btn-wrap {
        .custom-btn {
          &.v-btn {
            &.v-btn--density-default {
              &.btn-blue {
                background-color: #0B318B;
                border-radius: 0.5rem;

                &:hover {
                  background-color: #4875DE !important;
                  box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.20);
                }

                .v-btn__content {
                  font-size: 0.9375rem !important;
                  font-weight: 700 !important;
                  letter-spacing: -0.02813rem !important;
                }

                &.v-btn--disabled {
                  background-color: #e0e0e0 !important;

                  .v-btn__content {
                    color: #8e8e8e !important;
                  }
                }
              }
            }
          }
        }
      }
      .login-find{
        > button{
          &.color--blue{
            color: #0b318b;
          }
          &.ml--auto{
            &::after{
              content: '';
              width: 0.0625rem;
              height: 0.875rem;
              background-color: #e3e3e3;
              margin-left: 0.94rem;
              margin-right: 0.94rem;
            }
          }
        }
      }
    }
  }
  .system--box{
    display: flex;
    align-items: center;
    flex-direction: column;
    .system--img{
      width: 7.5rem;
      height: 7.5rem;
      background-image: url(../img/img_system.svg);
      background-size: cover;
      margin-bottom: 2.19rem;
    }
    > h2{
      color: #111;
      text-align: center;
      font-size: 1.75rem;
      font-weight: 500;
      margin-bottom: 1.56rem;
    }
    > p{
      text-align: center;
      color: #333;
      text-align: center;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.7;
      margin-bottom: 1.87rem;
    }
    > span{
      color: #444;
      text-align: center;
      font-size: 0.9375rem;
      font-weight: 400;
    }
  }
  .login-footer{
    height: 5.5rem;
    display: flex;
    justify-content: space-between;
    padding: 1.56rem 1.88rem;
    .login--footer--l{
      display: flex;
      color: rgba(51, 51, 51, 0.8);
      flex-direction: column;
      gap: 0.6rem;
      p{

      }
    }
    .login--footer--r{
      display: flex;
      gap: 3.75rem;
      align-items: center;
      .txt--btn{
        > button{
          color: #222;
          font-size: 0.875rem;
          font-weight: 400;
          line-height: 100%; /* 0.875rem */
          margin-left: 0.9rem;
          &:first-child{
            margin-left: 0;
            &::after{
              content: '';
              width: 0.0625rem;
              height: 0.875rem;
              margin-left: 0.9rem;
              vertical-align: -0.1rem;
              background-color: #c5c5c5;
              display: inline-block;
            }
          }
        }
      }
      .logo--footer{
        display: flex;
        gap: 1.25rem;
        align-items: center;
        span{
          font-size: 0;
          display: inline-block;
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          &:first-child{
            width: 8.125rem;
            height: 0.9375rem;
            background-image: url(../img/logo_sams_sds.svg);
          }
          &:nth-child(2){
            width: 6.0625rem;
            height: 2rem;
            background-image: url(../img/logo_sams.svg);
          }
        }
      }
    }
  }
}

// 로그인 팝업
.v-common-dialog-wrapper{
  .v-common-dialog-content{
    .find-pwd {
      border-radius: 0.5rem;
      background: #FFF;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
      padding: 1.25rem;

      p{
        &.error-txt{
          margin: 0 0 0.63rem 9.875rem!important;
        }
      }

      .txt-field-box{
        border-top: 1px solid #e0e0e0;
        display: flex;
        margin-bottom: 0;
        &.error{
          .ico{
            right: 1rem;
          }
        }
        > p{
          width: 9.375rem;
          padding: 1.13rem 0.62rem;
          color: #444444;
          font-size: 0.875rem;
          font-weight: 700;
          line-height: 1.4;
          margin-bottom: 0;
          .cir {
            width: 0.3125rem;
            height: 0.3125rem;
            display: inline-block;
            background-color: #ff4f60;
            border-radius: 50%;
            margin-left: 0.37rem;
            vertical-align: 0.2rem;
          }
        }
        > div{
          width: 35.625rem;
          padding: 0.625rem 0.5rem;
          .custom-btn {
            &.v-btn {
              &.v-btn--density-default {
                &.btn-password {
                  background: #6f8aa6;
                  height: 2.25rem;
                  width: 6.875rem;
                }

                &.btn-black {
                  background: #6f8aa6;
                  font-weight: 600 !important;

                  &.v-btn--disabled {
                    background-color: #e0e0e0 !important;

                    .v-btn__content {
                      color: #8e8e8e !important;
                    }
                  }
                }
              }
            }
          }

          .custom-input{
            &.v-text-field{
              min-height: 2.25rem;
              .v-input__control{
                height: 2.25rem;
                .v-field__field{
                  .v-field__input{
                    padding: 0 0.75rem;
                    min-height: 2.25rem;
                    height: 2.25rem;
                    &::placeholder {
                      color: #8e8e8e;
                      font-weight: 400;
                    }
                  }
                }
              }
            }
            &.v-text-field {
              &.mini2 {
                min-height: 2.25rem;

                .v-input__control {
                  height: 2.25rem;

                  .v-field__field {
                    .v-field__input {
                      padding: 0 0.75rem;
                      color: #000000;
                      height: 2.25rem;
                      font-size: 0.875rem;
                      font-weight: 400;
                      min-height: 2.25rem;

                      &::placeholder {
                        color: #8e8e8e;
                        font-size: 0.875rem;
                        font-weight: 400;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .otp-box{
        gap:0;
        .txt-field-box{
          width: 100%;
          &.error{
            .ico{
              right: 8.5rem;
            }
          }
          > div{
            display: flex;
            gap: 0.63rem;
          }
        }
      }
    }
  }
}

.tab-style{
  .tab-style-h{
    button{
      &::after{
        background-size: cover!important;
      }
      .ico{
        background-size: 0.75rem 0.75rem;
      }
    }
  }
}


/**********************************************
| 2024-12-31 김민정 :
**********************************************/

.media--editor{
  .caution{
    color: #F00;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 10px;
  }
  .ql-snow{
    .ql-editor{
      p{
        img{
          max-width: 400px;
          max-height: 400px;
        }
      }
    }
  }
}

// 재무관리 테이블
.table--wrap{
  .bul{
    color: #f00;
  }
  .table--t{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    >span{
      font-size: 18px;
    }
  }
  table{
    width: 100%;
    border-top: 1px solid #3F3F3F;
    .custom-input{
      
      &.left{
        *{
          text-align: left;
        }
      }
    }
    th{
      &.bg{
        background-color: #f8f8f8;
      }
      &.le{
        text-align: left;
        padding: 30px;
      }
      vertical-align: middle;
      height: 50px;
      padding: 10px 30px;
      color: #000000;
      font-size: 18px;
      font-weight: 700;
      border-bottom: 1px solid #e2e2e2;
      border-right: 1px solid #E2E2E2;
      &.type2{
        border-right: 1px solid #3F3F3F;
        border-bottom: 1px solid #3f3f3f;
        &.fz--16{
          font-size: 16px;
        }
      }
      &:last-child{
        border-right: none;
      }
    }
    td{
      height: 50px;
      padding: 10px 30px;
      text-align: left;
      color: #000000;
      vertical-align: middle;
      border-bottom: 1px solid #e2e2e2;
      border-right: 1px solid #E2E2E2;
      white-space: pre-line;
      font-size: 18px;
      font-weight: 400;
      .dp--tp-wrap{
        display: none;
      }
      .input--wrap{
        display: flex;
        align-items: center;
        gap: 10px;
          .text {
            font-size: 0.75rem;
            color: #444;
            font-weight: 400;
          }
          .down--file{
            color: #444;
            cursor: pointer;
          }
      }
      &.bg{
        background-color: #f8f8f8;
      }
      &:last-child{
        border-right: none;
      }
      &.le{
        text-align: left;
        padding: 30px;
      }
    }
  }
  font-size: 24px;
}

// .ag-theme-alpine {
//   --ag-font-family: 'Arial', sans-serif; /* 또는 원하는 글꼴 */
// }
// .ag-icon {
//   font-family: 'Font Awesome 5 Free', sans-serif !important;
// }

.dp__input{
  &::placeholder{
    color: #b6b6b6!important;
  }
}
.dp__disabled{
  background-color: #f0f0f0!important;
  &.dp__input{
    color: #aaaaaa!important;
  }
}

.btn--wrap{
  &.evt--btn{
    display: flex;
    .custom-btn{
      &.v-btn{
        &.v-btn--density-default{
          width: fit-content;
          &.btn-sky{
            background-color: #42A5F5;
            height: 2.25rem;
            min-height: 2.25rem;
            .v-btn__content{
              color: #ffffff;
            }
          }
          &.btn-red{
            background-color: #DC143C;
            height: 2.25rem;
            min-height: 2.25rem;
            .v-btn__content{
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
.ms--pop{
  display: flex;
  gap: 30px;
  .ms--input--wrap{
    width: 60%;
  }
  .ms--desc--wrap{
    width: 40%;
    p{
      font-size: 1rem;
      font-weight: 200;
      line-height: 1.4;
      strong{
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 20px;
        display: inline-block;
      }
    }
  }
}
.tbl-wrapper{
  .tbl-wrap .ag-checkbox-input-wrapper{
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 1px solid #b0b0b0;
    &.ag-checked{
      &::after{
        display: block;
        width: 20px;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%230094FF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-position: center;
      }
    }
  }
  .tbl-wrap .ag-checkbox-input-wrapper:before,
  .tbl-wrap .ag-checkbox-input-wrapper:after{
    display: none;
  }
}

.sun-editor{
  width: 100%;
  text-align: left;
}

// CS 답변 관련 스타일
.answer-write-section {
  margin-top: 32px;
  padding: 24px;
  border: 2px solid #e8f4fd;
  border-radius: 12px;
  background: linear-gradient(135deg, #fafbff 0%, #f0f7ff 100%);
  box-shadow: 0 2px 8px rgba(0, 148, 255, 0.08);

  h4 {
    margin-bottom: 20px;
    color: #1a365d;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    
    &::before {
      content: "💬";
      font-size: 1.2rem;
    }
  }

  .answer-write-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .v-textarea {
      .v-field {
        background: white !important;
        border: 1px solid #e1e5e9 !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        
        &.v-field--focused {
          border-color: #667eea !important;
          box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
        }
      }
      
      textarea {
        resize: none !important;
        padding: 25px !important;
        line-height: 1.6 !important;
        color: #333 !important;
        font-size: 1rem !important;
        font-family: inherit !important;
        min-height: 120px !important;
        
        &::placeholder {
          color: #999;
          font-size: 1rem;
        }
      }
    }
  }

  .answer-actions {
    display: flex;
    justify-content: flex-end;
  }

  .submit-answer-btn {
    min-width: 130px;
    height: 44px;
    border-radius: 22px;
    box-shadow: 0 4px 12px rgba(0, 148, 255, 0.3);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 148, 255, 0.4);
    }
  }
}

// 송장번호 등록 버튼 스타일 개선
.item-content{
  padding-bottom: 20px;
}
.delivery-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border-radius: 25px !important;
  padding: 8px 20px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
  transition: all 0.3s ease !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100%!important;
  
  &:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    
    &::before {
      transform: translateX(100%) !important;
    }
  }
  
  &::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
    transition: transform 0.5s ease !important;
  }
  
  &:disabled {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    transform: none !important;
    box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2) !important;
    cursor: not-allowed !important;
    
    &:hover {
      transform: none !important;
      box-shadow: 0 2px 6px rgba(156, 163, 175, 0.2) !important;
    }
    
    &::before {
      display: none !important;
    }
  }
  
  .ico {
    width: 16px !important;
    height: 16px !important;
    background-image: url(../img/ico_delivery.svg) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin-right: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  
  .v-btn__content {
    display: flex !important;
    align-items: center !important;
    color: #fff!important;
    gap: 6px !important;
  }
}

// 마이페이지 스타일
.mypage-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  
  .mypage-header {
    position: relative;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 40px 40px;
    border-radius: 0 0 30px 30px;
    margin-bottom: 30px;
    overflow: hidden;
    
    .header-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="3" fill="rgba(255,255,255,0.08)"/><circle cx="40" cy="80" r="2" fill="rgba(255,255,255,0.12)"/></svg>');
      opacity: 0.3;
    }
    
    .header-content {
      position: relative;
      z-index: 2;
    }
    
    .profile-section {
      display: flex;
      align-items: center;
      gap: 30px;
    }
    
    .profile-avatar {
      .avatar-placeholder {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        border: 3px solid rgba(255, 255, 255, 0.3);
        
        i {
          font-size: 60px;
          color: rgba(255, 255, 255, 0.8);
        }
      }
    }
    
    .profile-info {
      flex: 1;
      
      .user-name {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 8px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      
      .user-type {
        font-size: 1.2rem;
        opacity: 0.9;
        margin-bottom: 20px;
      }
      
      .user-stats {
        display: flex;
        gap: 40px;
        
        .stat-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          .stat-number {
            font-size: 2rem;
            font-weight: 700;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          }
          
          .stat-label {
            font-size: 0.9rem;
            opacity: 0.8;
            margin-top: 4px;
          }
        }
      }
    }
  }
  
  .dashboard-section {
    padding: 0 40px 40px;
    
    .dashboard-cards {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 30px;
    }
    
    .dashboard-card {
      background: white;
      border-radius: 20px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      overflow: hidden;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
      }
      
      .card-header {
        padding: 25px 30px 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h3 {
          font-size: 1.3rem;
          font-weight: 600;
          color: #333;
        }
        
        i {
          font-size: 1.5rem;
          color: #667eea;
        }
      }
      
      .card-content {
        padding: 25px 30px 30px;
      }
    }
    
    .quick-actions {
      .action-buttons {
        display: flex;
        flex-direction: column;
        gap: 15px;
        
        .action-btn {
          background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%) !important;
          color: #667eea !important;
          border: 1px solid #e8f0fe !important;
          border-radius: 15px !important;
          padding: 20px !important;
          height: auto !important;
          display: flex !important;
          align-items: center !important;
          justify-content: flex-start !important;
          transition: all 0.3s ease !important;
          
          &:hover {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
            color: white !important;
            transform: translateX(5px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
          }
          
          i {
            font-size: 1.2rem;
            margin-right: 12px;
          }
          
          span {
            font-weight: 500;
          }
        }
      }
    }
    
    .recent-inquiries {
      .inquiry-list {
        .inquiry-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px 0;
          border-bottom: 1px solid #f5f5f5;
          cursor: pointer;
          transition: all 0.2s ease;
          
          &:hover {
            background: #f8faff;
            margin: 0 -15px;
            padding: 15px;
            border-radius: 10px;
          }
          
          &:last-child {
            border-bottom: none;
          }
          
          .inquiry-info {
            h4 {
              font-size: 1rem;
              font-weight: 500;
              color: #333;
              margin-bottom: 5px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              max-width: 200px;
            }
            
            p {
              font-size: 0.85rem;
              color: #888;
            }
          }
          
          .inquiry-status {
            .status-waiting,
            .status-completed {
              padding: 4px 12px;
              border-radius: 20px;
              font-size: 0.8rem;
              font-weight: 500;
            }
          }
        }
        
        .no-inquiries {
          text-align: center;
          padding: 40px 0;
          color: #999;
          
          i {
            font-size: 3rem;
            margin-bottom: 15px;
            display: block;
          }
        }
      }
      
      .view-all {
        text-align: center;
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid #f0f0f0;
      }
    }
    
    .notifications {
      .notification-list {
        .notification-item {
          display: flex;
          align-items: flex-start;
          gap: 15px;
          padding: 15px 0;
          
          .notification-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            
            i {
              color: white;
              font-size: 1.1rem;
            }
          }
          
          .notification-content {
            h4 {
              font-size: 1rem;
              font-weight: 500;
              color: #333;
              margin-bottom: 5px;
            }
            
            p {
              font-size: 0.9rem;
              color: #666;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
  
  // 반응형 디자인
  @media (max-width: 1200px) {
    .dashboard-section .dashboard-cards {
      grid-template-columns: 1fr 1fr;
      
      .notifications {
        grid-column: 1 / -1;
      }
    }
  }
  
  @media (max-width: 768px) {
    .mypage-header {
      padding: 40px 20px 30px;
      
      .profile-section {
        flex-direction: column;
        text-align: center;
        gap: 20px;
      }
      
      .profile-avatar .avatar-placeholder {
        width: 100px;
        height: 100px;
        
        i {
          font-size: 50px;
        }
      }
      
      .profile-info {
        .user-name {
          font-size: 2rem;
        }
        
        .user-stats {
          justify-content: center;
        }
      }
    }
    
    .dashboard-section {
      padding: 0 20px 40px;
      
      .dashboard-cards {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
  }
}