// CanvasPage
// .canvas-wrap{
//     height: calc(100vh - 47px);
//     display: flex;
//     flex-direction: column;
//     .canvas-content{
//         flex: 1 1 auto;
//         .canvas-layout{
//             height: 100%;
//         }
//     }
//     &.sub-wrap{
//         overflow: hidden;
//         .canvas-content{
//             height: calc(100% - 47px);
//         }
//     }
// }
// CanvasMenu
.canvas-menu-wrap {
  position: fixed;
  top: 46px;
  left: 0;
  display: block;
  width: 100%;
  min-width: 1280px;
  padding-bottom: 0;
  background-color: #383838;
  transition: padding 0.17s ease-in-out;
  z-index: 999;

  .canvas-menu-inner {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 40px 0 20px;
    background-color: #2c2c2c;
    height: 46.8px;
    z-index: 999;

    .canvas-menu-list {
      display: flex;
      align-items: center;
      height: 100%;

      .canvas-menu-item {
        display: flex;
        align-items: center;
        height: 100%;

        button {
          display: flex;
          align-items: center;
          font-size: 12px;
          height: 100%;
          color: #fff;
          font-weight: 600;
          padding: 15px 20px;
          opacity: 0.55;
          transition: all 0.17s ease-in-out;

          .menu-icon {
            display: block;
            width: 14px;
            height: 14px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            margin-right: 10px;

            &.con00 {
              background-image: url(/static/images/canvas/menu_icon00.svg);
            }

            &.con01 {
              background-image: url(/static/images/canvas/menu_icon01.svg);
            }

            &.con02 {
              background-image: url(/static/images/canvas/menu_icon02.svg);
            }

            &.con03 {
              background-image: url(/static/images/canvas/menu_icon03.svg);
            }

            &.con04 {
              background-image: url(/static/images/canvas/menu_icon04.svg);
            }

            &.con05 {
              background-image: url(/static/images/canvas/menu_icon05.svg);
            }

            &.con06 {
              background-image: url(/static/images/canvas/menu_icon06.svg);
            }
          }
        }

        &.active {
          background-color: #383838;

          button {
            opacity: 1;
          }
        }
      }
    }

    .canvas-side-btn-wrap {
      display: flex;
      align-items: center;
      margin-left: auto;

      .select-box {
        width: 124px;
        margin: 0 5px;
        height: 30px;

        > div {
          width: 100%;
        }
      }

      .btn-from {
        display: flex;
        align-items: center;
        gap: 5px;

        button {
          display: block;
          width: 30px;
          height: 30px;
          border-radius: 2px;
          background-color: #3d3d3d;
          background-position: center;
          background-repeat: no-repeat;
          background-size: 15px 15px;
          transition: all 0.17s ease-in-out;

          &.btn01 {
            background-image: url(../../public/static/images/canvas/side_icon03.svg);
          }

          &.btn02 {
            background-image: url(../../public/static/images/canvas/side_icon02.svg);
          }

          &.btn03 {
            background-image: url(../../public/static/images/canvas/side_icon01.svg);
          }

          &.btn04 {
            background-image: url(../../public/static/images/canvas/side_icon04.svg);
          }

          &.btn05 {
            background-image: url(../../public/static/images/canvas/side_icon05.svg);
          }

          &.btn06 {
            background-image: url(../../public/static/images/canvas/side_icon06.svg);
          }

          &.btn07 {
            background-image: url(../../public/static/images/canvas/side_icon07.svg);
          }

          &.btn08 {
            background-image: url(../../public/static/images/canvas/side_icon08.svg);
          }

          &.btn09 {
            background-image: url(../../public/static/images/canvas/side_icon09.svg);
          }

          &.btn10 {
            background-image: url(../../public/static/images/canvas/side_icon10.svg);
            background-size: 15px 14px;
          }

          &:hover {
            background-color: #1083e3;
          }

          &.active {
            background-color: #1083e3;
          }
        }
      }

      .ico-btn-from {
        display: flex;
        align-items: center;
        gap: 5px;

        button {
          .ico {
            display: block;
            width: 15px;
            height: 15px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;

            &.ico01 {
              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
            }

            &.ico02 {
              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
            }

            &.ico03 {
              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
            }

            &.ico04 {
              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
            }
          }

          .name {
            font-size: 12px;
            color: #fff;
          }
        }

        &.form06 {
          .name {
            font-size: 13px;
          }
        }
      }

      .vertical-horizontal {
        display: flex;
        min-width: 170px;
        height: 28px;
        margin-right: 5px;
        border-radius: 2px;
        background: #373737;
        line-height: 28px;
        overflow: hidden;

        span {
          padding: 0 10px;
          font-size: 13px;
          color: #fff;
        }

        button {
          margin-left: auto;
          height: 100%;
          background-color: #4b4b4b;
          font-size: 13px;
          font-weight: 400;
          color: #fff;
          padding: 0 7.5px;
          transition: all 0.17s ease-in-out;
        }

        &.on {
          button {
            background-color: #1083e3;
          }
        }
      }

      .size-control {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        background-color: #3d3d3d;
        border-radius: 2px;
        width: 100px;
        height: 30px;
        margin: 0 5px;

        span {
          font-size: 13px;
          color: #fff;
          cursor: pointer;
        }

        .control-btn {
          display: block;
          width: 12px;
          height: 12px;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;

          &.minus {
            background-image: url(../../public/static/images/canvas/minus.svg);
          }

          &.plus {
            background-image: url(../../public/static/images/canvas/plus.svg);
          }
        }
      }
    }
  }

  .canvas-depth2-wrap {
    position: absolute;
    top: -100%;
    left: 0;
    background-color: #383838;
    width: 100%;
    height: 50px;
    transition: all 0.17s ease-in-out;

    .canvas-depth2-inner {
      display: flex;
      align-items: center;
      padding: 0 40px;
      height: 100%;

      .canvas-depth2-list {
        display: flex;
        align-items: center;
        height: 100%;

        .canvas-depth2-item {
          display: flex;
          align-items: center;
          margin-right: 26px;
          height: 100%;

          button {
            position: relative;
            opacity: 0.55;
            color: #fff;
            font-size: 12px;
            font-weight: normal;
            height: 100%;
            padding-right: 12px;
          }

          &.active {
            button {
              opacity: 1;
              font-weight: 600;

              &:after {
                content: '';
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                width: 5px;
                height: 8px;
                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
              }
            }
          }
        }
      }

      .canvas-depth2-btn-list {
        display: flex;
        align-items: center;
        margin-left: auto;
        height: 100%;

        .depth2-btn-box {
          display: flex;
          align-items: center;
          margin-right: 34px;
          height: 100%;
          transition: all 0.17s ease-in-out;

          button {
            position: relative;
            font-size: 12px;
            font-weight: 400;
            height: 100%;
            color: #fff;
            padding-right: 12px;

            &:after {
              content: '';
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
              width: 5px;
              height: 8px;
              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
            }
          }

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

          &.mouse {
            opacity: 0.55;
          }
        }
      }
    }

    &.active {
      top: 47px;
    }
  }

  &.active {
    padding-bottom: 50px;
  }
}

// canvas-layout
.canvas-content {
  padding-top: 46.8px;
  transition: all 0.17s ease-in-out;

  .canvas-frame {
    height: calc(100vh - 129.3px);
  }

  &.active {
    padding-top: calc(46.8px + 50px);

    .canvas-frame {
      height: calc(100vh - 179.4px);
    }
  }
}

.canvas-layout {
  padding-top: 37px;

  .canvas-page-list {
    position: fixed;
    top: 92.8px;
    left: 0;
    display: flex;
    background-color: #1c1c1c;
    border-top: 1px solid #000;
    width: 100%;
    min-width: 1280px;
    transition: all 0.17s ease-in-out;
    z-index: 99;

    &.active {
      top: calc(92.8px + 50px);
    }

    .canvas-plane-wrap {
      display: flex;
      align-items: center;
      max-width: calc(100% - 45px);

      .canvas-page-box {
        display: flex;
        align-items: center;
        background-color: #1c1c1c;
        padding: 9.6px 20px;
        border-right: 1px solid #000;
        min-width: 0;
        transition: all 0.17s ease-in-out;

        span {
          display: flex;
          align-items: center;
          width: 100%;
          font-size: 12px;
          font-family: 'Pretendard', sans-serif;
          color: #aaa;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .close {
          flex: none;
          display: block;
          width: 7px;
          height: 8px;
          margin-left: 15px;
          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
          background-size: cover;
        }

        &.on {
          background-color: #fff;

          span {
            font-weight: 600;
            color: #101010;
          }

          .close {
            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
          }

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

        &:hover {
          background-color: #000;
        }
      }
    }

    .plane-add {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      padding: 13.5px 0;
      background-color: #1c1c1c;
      border-right: 1px solid #000;
      transition: all 0.17s ease-in-out;

      span {
        display: block;
        width: 9px;
        height: 9px;
        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
        background-size: cover;
      }

      &:hover {
        background-color: #000;
      }
    }
  }
}

.canvas-frame {
  position: relative;
  // height: calc(100% - 36.5px);
  background-color: #f4f4f7;
  overflow: auto;
  transition: all 0.17s ease-in-out;
  // &::-webkit-scrollbar {
  //     width: 10px;
  //     height: 10px;
  //     background-color: #fff;
  // }
  // &::-webkit-scrollbar-thumb {
  //     background-color: #C1CCD7;
  //     border-radius: 30px;
  // }
  // &::-webkit-scrollbar-track {
  //     background-color: #fff;
  // }
  .canvas-container {
    margin: 0 auto;
    background-color: #fff;
  }

  canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

// sub-page
.sub-header {
  position: fixed;
  top: 46px;
  left: 0;
  width: 100%;
  min-width: 1280px;
  height: 46px;
  border-bottom: 1px solid #000;
  background: #2c2c2c;
  z-index: 999;

  .sub-header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 100px;

    .sub-header-title-wrap {
      display: flex;
      align-items: center;

      .title-item {
        position: relative;
        padding: 0 24px;

        a {
          display: flex;
          align-items: center;

          .icon {
            width: 22px;
            height: 22px;
            margin-right: 8px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;

            &.drawing {
              background-image: url(../../public/static/images/main/drawing_icon.svg);
            }
          }
        }

        &:after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 1px;
          height: 16px;
          background-color: #d9d9d9;
        }

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;

          &:after {
            display: none;
          }
        }
      }
    }

    .sub-header-title {
      font-size: 16px;
      color: #fff;
      font-weight: 600;
    }

    .sub-header-location {
      margin-left: auto;
      display: flex;
      align-items: center;

      .location-item {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 10px;

        span {
          display: flex;
          font-size: 12px;
          color: #aaa;
          font-weight: normal;
          cursor: default;
        }

        &:after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 4px;
          height: 6px;
          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
        }

        &:first-child {
          padding-left: 0;
        }

        &:last-child {
          padding-right: 0;

          span {
            color: #fff;
          }

          &:after {
            display: none;
          }
        }
      }
    }
  }
}

// sub content
.sub-content {
  padding-top: 46px;

  .sub-content-inner {
    max-width: 1760px;
    margin: 0 auto;
    padding: 20px 20px 0;

    .sub-content-box {
      margin-bottom: 20px;

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

  &.estimate {
    display: flex;
    flex-direction: column;
    padding-top: 0;

    .sub-content-inner {
      flex: 1;
      width: 100%;
    }
  }
}

.sub-table-box {
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #e9eaed;
  background: #fff;
  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);

  .table-box-title-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .title-wrap {
      display: flex;
      align-items: center;

      h3 {
        display: block;
        font-size: 15px;
        color: #101010;
        font-weight: 600;
        margin-right: 14px;

        &.product {
          margin-right: 10px;
        }
      }

      .product_tit {
        position: relative;
        font-size: 15px;
        font-weight: 600;
        color: #1083e3;
        padding-left: 10px;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 1px;
          height: 11px;
          background-color: #d9d9d9;
        }
      }

      .option {
        padding-left: 5px;
        font-size: 13px;
        color: #101010;
        font-weight: 400;
      }

      .info-wrap {
        display: flex;
        align-items: center;

        li {
          position: relative;
          padding: 0 6px;
          font-size: 12px;
          color: #101010;
          font-weight: normal;

          span {
            font-weight: 600;

            &.red {
              color: #e23d70;
            }
          }

          &:after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            width: 1px;
            height: 11px;
            background-color: #d9d9d9;
          }

          &:first-child {
            padding-left: 0;
          }

          &:last-child {
            padding-right: 0;

            &::after {
              display: none;
            }
          }
        }
      }
    }
  }

  .left-unit-box {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .promise-gudie {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #101010;
    margin-bottom: 20px;
  }

  .important {
    color: #f00;
  }

  .sub-center-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }

  .sub-right-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
  }
}

.pagination-wrap {
  margin-top: 24px;
}

.infomation-wrap {
  margin-bottom: 30px;
}

.infomation-box-wrap {
  display: flex;
  gap: 10px;

  .sub-table-box {
    flex: 1;
  }

  .info-title {
    font-size: 14px;
    font-weight: 500;
    color: #344356;
    margin-bottom: 10px;
  }

  .info-inner {
    position: relative;
    font-size: 13px;
    color: #344356;

    .copy-ico {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
      background-size: cover;
    }
  }
}

// 견적서
.estimate-list-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  &.one {
    .estimate-box {
      &:last-child {
        min-width: unset;
      }
    }
  }

  .estimate-box {
    flex: 1;
    display: flex;
    align-items: center;

    &:last-child {
      flex: none;
      min-width: 220px;
    }

    .estimate-tit {
      width: 105px;
      height: 30px;
      line-height: 30px;
      background-color: #f4f4f7;
      border-radius: 100px;
      text-align: center;
      font-size: 13px;
      font-weight: 500;
      color: #344356;
    }

    .estimate-name {
      font-size: 13px;
      color: #344356;
      margin-left: 14px;
      font-weight: 400;

      &.blue {
        font-size: 16px;
        font-weight: 700;
        color: #1083e3;
      }

      &.red {
        font-size: 16px;
        font-weight: 700;
        color: #d72a2a;
      }
    }
  }

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

// file drag box
.drag-file-box {
  padding: 10px;

  .btn-area {
    padding-bottom: 15px;
    border-bottom: 1px solid #ecf0f4;

    .file-upload {
      display: inline-block;
      height: 30px;
      background-color: #94a0ad;
      padding: 0 10px;
      border-radius: 2px;
      font-size: 13px;
      line-height: 30px;
      color: #fff;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s ease-in-out;

      &:hover {
        background-color: #607f9a;
      }
    }
  }

  .drag-file-area {
    position: relative;
    margin-top: 15px;

    p {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 13px;
      color: #ccc;
      font-weight: 400;
      cursor: default;
    }
  }

  .file-list {
    .file-item {
      margin-bottom: 15px;

      span {
        position: relative;
        font-size: 13px;
        color: #45576f;
        font-weight: 400;
        white-space: nowrap;
        padding-right: 55px;

        button {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          width: 15px;
          height: 15px;
          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
          background-size: cover;
        }
      }

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

.estimate-arr-btn {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #94a0ad;
  border: 1px solid #94a0ad;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../../public/static/images/canvas/estiment_arr.svg);
  background-size: 11px 7px;
  border-radius: 2px;

  &.up {
    rotate: 180deg;
  }

  &.on {
    background-color: #fff;
    border-color: #c2d0dd;
    background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
  }
}

.estimate-check-wrap {
  .estimate-check-inner {
    display: block;
  }

  &.hide {
    border-bottom: 1px solid #ecf0f4;
    margin-bottom: 15px;

    .estimate-check-inner {
      display: none;
    }
  }
}

.special-note-check-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-radius: 3px;
  margin-bottom: 30px;

  .special-note-check-item {
    padding: 14px 10px;
    border: 1px solid #ecf0f4;
    margin-top: -1px;
    margin-right: -1px;

    &.act {
      background-color: #f7f9fa;
    }
  }
}

.calculation-estimate {
  border: 1px solid #ecf0f4;
  border-radius: 3px;
  padding: 24px;
  max-height: 350px;
  overflow-y: auto;
  margin-bottom: 30px;

  dl {
    margin-bottom: 35px;

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

    dt {
      font-size: 13px;
      font-weight: 600;
      color: #1083e3;
      margin-bottom: 15px;
    }

    dd {
      font-size: 12px;
      font-weight: 400;
      color: #45576f;
      margin-bottom: 8px;

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

  &::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #d9dee2;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
}

.esimate-wrap {
  margin-bottom: 20px;
}

.estimate-product-option {
  display: flex;
  align-items: center;
  margin-bottom: 15px;

  .product-price-wrap {
    display: flex;
    align-items: center;

    .product-price-tit {
      font-size: 13px;
      font-weight: 400;
      color: #45576f;
      margin-right: 10px;
    }

    .select-wrap {
      width: 110px;
    }
  }

  .product-edit-wrap {
    display: flex;
    align-items: center;
    margin-left: auto;

    .product-edit-explane {
      display: flex;
      align-items: center;
      margin-right: 15px;

      .explane-item {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 400;

        span {
          width: 20px;
          height: 20px;
          margin-right: 5px;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }

        &:before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
          width: 1px;
          height: 12px;
          background-color: #d9d9d9;
        }

        &:first-child {
          padding-left: 0;

          &::before {
            display: none;
          }
        }

        &:last-child {
          padding-right: 0;
        }

        &.item01 {
          color: #3bbb48;

          span {
            background-image: url(../../public/static/images/sub/open_ico.svg);
          }
        }

        &.item02 {
          color: #909000;

          span {
            background-image: url(../../public/static/images/sub/change_ico.svg);
          }
        }

        &.item03 {
          color: #0191c9;

          span {
            background-image: url(../../public/static/images/sub/attachment_ico.svg);
          }
        }

        &.item04 {
          color: #f16a6a;

          span {
            background-image: url(../../public/static/images/sub/click_check_ico.svg);
          }
        }
      }
    }

    .product-edit-btn {
      display: flex;
      align-items: center;

      button {
        display: flex;
        align-items: center;

        span {
          width: 13px;
          height: 13px;
          margin-right: 5px;
          background-size: cover;

          &.plus {
            background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
          }

          &.minus {
            background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
          }
        }
      }
    }
  }
}

// 발전시물레이션
.chart-wrap {
  display: flex;
  gap: 20px;
  width: 100%;

  .sub-table-box {
    height: 100%;
  }

  .chart-inner {
    flex: 1;

    .chart-box {
      margin-bottom: 30px;
    }
  }

  .chart-table-wrap {
    display: flex;
    flex-direction: column;
    flex: none;
    width: 650px;

    .sub-table-box {
      flex: 1;

      &:first-child {
        margin-bottom: 20px;
      }
    }
  }
}

.chart-month-table {
  table {
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid #ecf0f4;
    border-radius: 4px;

    thead {
      th {
        padding: 4.5px 0;
        border-bottom: 1px solid #ecf0f4;
        text-align: center;
        font-size: 13px;
        color: #45576f;
        font-weight: 500;
        background-color: #f8f9fa;
      }
    }

    tbody {
      td {
        font-size: 13px;
        color: #45576f;
        text-align: center;
        padding: 4.5px 0;
      }
    }
  }
}

.simulation-guide-wrap {
  display: flex;
  padding: 20px;

  .simulation-tit-wrap {
    flex: none;
    padding-right: 40px;
    border-right: 1px solid #eeeeee;

    span {
      display: block;
      position: relative;
      padding-left: 60px;
      font-size: 15px;
      color: #14324f;
      font-weight: 600;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
        background-size: cover;
      }
    }
  }

  .simulation-guide-box {
    flex: 1;
    padding-left: 40px;

    dl {
      margin-bottom: 25px;

      dt {
        font-size: 13px;
        color: #101010;
        font-weight: 600;
        margin-bottom: 5px;
      }

      dd {
        font-size: 12px;
        color: #45576f;
        font-weight: 400;
        line-height: 24px;
      }

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

    ul,
    ol {
      list-style: unset;
    }
  }
}

.module-total {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 9px 0;
  margin-right: 4px;
  border: 1px solid #ecf0f4;
  border-top: none;

  .total-title {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #344356;
    font-weight: 500;
  }

  .total-num {
    flex: none;
    width: 121px;
    text-align: center;
    font-size: 15px;
    color: #344356;
    font-weight: 500;
  }
}

// 물건상세
.information-help-wrap {
  display: flex;
  padding: 24px;
  background-color: #f4f4f4;
  border-radius: 4px;
  margin-bottom: 15px;

  .information-help-tit-wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 40px;
    border-right: 1px solid #e0e0e3;

    .help-tit-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
      background-size: 20px 20px;
    }

    .help-tit {
      font-size: 13px;
      font-weight: 600;
      color: #45576f;
    }
  }

  .information-help-guide {
    padding-left: 40px;

    span {
      display: block;
      font-size: 12px;
      font-weight: 400;
      color: #45576f;
      margin-bottom: 7px;

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

.community-search-warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 30px 0;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 24px;

  .community-search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 580px;
    height: 45px;
    padding: 0 45px 0 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    border: 1px solid #101010;

    .community-input {
      width: 100%;
      height: 100%;
      font-size: 13px;
      font-weight: 400;
      color: #101010;

      &::placeholder {
        color: #c8c8c8;
      }
    }

    .community-search-ico {
      position: absolute;
      top: 50%;
      right: 20px;
      transform: translateY(-50%);
      flex: none;
      width: 21px;
      height: 100%;
      background: url(../../public/static/images/sub/community_search.svg) no-repeat center;
      background-size: 21px 21px;
      z-index: 3;
    }
  }

  .community-search-keyword {
    font-size: 13px;
    font-weight: 400;
    color: #45576f;

    span {
      font-weight: 600;
      color: #f16a6a;
    }
  }
}

// 자료 다운로드
.file-down-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;

  .file-down-item {
    display: flex;
    align-items: center;
    padding: 24px;
    border-radius: 4px;
    border: 1px solid #e5e5e5;
    background: #fff;
    transition: all 0.15s ease-in-out;

    .file-item-info {
      .item-num {
        display: inline-block;
        padding: 6px 17.5px;
        border-radius: 60px;
        background-color: #f4f4f7;
        font-size: 13px;
        font-weight: 600;
        color: #101010;
        margin-bottom: 15px;
      }

      .item-name {
        font-size: 16px;
        color: #101010;
        font-weight: 500;
        margin-bottom: 13px;
      }

      .item-date {
        font-size: 13px;
        font-weight: 400;
        color: #344356;
      }
    }

    .file-down-box {
      display: flex;
      align-items: center;
      flex: none;
      margin-left: auto;
      height: 100%;

      .file-down-btn {
        width: 36px;
        height: 36px;
        background: url(../../public/static/images/sub/file_down_btn.svg) no-repeat center;
        background-size: cover;
      }
    }

    &:hover {
      background-color: #f4f4f7;
    }
  }
}

.file-down-nodata {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 148px;
  padding: 24px;
  border-radius: 4px;
  border: 1px solid #e5e5e5;
  font-size: 16px;
  font-weight: 500;
  color: #344356;
}

//신규물건 등록
.product-input-wrap {
  display: flex;
  align-items: center;
  width: 200px;
  height: 30px;
  background-color: #fafafa;
  border: 1px solid #eee;
  padding: 0 10px;

  input {
    font-size: 13px;
    font-weight: 400;
    color: #999999;
    padding: 0;
    width: 100%;
    height: 100%;
    flex: 1;
    background-color: inherit;
  }

  .product-delete {
    flex: none;
    display: block;
    width: 15px;
    height: 100%;
    background: url(../../public/static/images/sub/product-del.svg) no-repeat center;
    background-size: 15px 15px;
  }
}

@media screen and (max-width: 1800px) {
  .canvas-menu-wrap {
    .canvas-menu-inner {
      .canvas-menu-list {
        .canvas-menu-item button {
          .menu-icon {
            margin-right: 5px;
          }
        }

        .canvas-menu-item {
          button {
            padding: 15px 15px;
            font-size: 11px;
          }
        }
      }
    }

    .canvas-depth2-wrap {
      .canvas-depth2-inner {
        .canvas-depth2-list {
          .canvas-depth2-item {
            button {
              font-size: 11px;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1600px) {
  .canvas-menu-wrap {
    .canvas-menu-inner {
      .canvas-menu-list {
        .canvas-menu-item button {
          .menu-icon {
            display: none;
          }
        }
      }
    }
  }
  .canvas-content {
    .canvas-frame {
      height: calc(100vh - 129.5px);
    }

    &.active {
      .canvas-frame {
        height: calc(100vh - 179.5px);
      }
    }
  }
}

@media screen and (max-width: 1500px) {
  .canvas-menu-wrap {
    .canvas-menu-inner {
      .canvas-menu-list {
        .canvas-menu-item {
          button {
            padding: 15px 10px;
            font-size: 10px;
          }
        }
      }

      .canvas-side-btn-wrap {
        .btn-from {
          gap: 3px;
        }

        .vertical-horizontal {
          margin-right: 3px;
          min-width: 150px;
        }

        .select-box {
          width: 100px;
          margin: 0 3px;
        }

        .size-control {
          width: 90px;
          margin: 0 3px;
        }
      }
    }
  }
  .sub-header {
    .sub-header-inner {
      .sub-header-title {
        font-size: 15px;
      }

      .sub-header-title-wrap {
        .title-item {
          a {
            .icon {
              width: 20px;
              height: 20px;
            }
          }
        }
      }
    }
  }
}