.container.map {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
  position: relative;

  svg path:hover {
    opacity: 0.5;
  }

  svg {
    /* background: ##0080ff; */
  }

  svg * {
    cursor: default !important;

    font-size: 9px;
  }

  .shadow-wrap {
    box-shadow: inset 0px 0px 14px 5px #000000;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    pointer-events: none; /* 시각적으론 위에, 클릭은 아래로 전달 */
    width: 100%;
    height: 100%;
  }
}

.container.label-show-wrap {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0 auto 1rem;
}

.map-upload-title {
  font-size: 1.25rem;
  font-weight: bold;
  width: 100%;
  display: block;
  width: 100%;
  max-width: 500px;
  margin: 1rem auto;
}

.container.map-upload-wrap {
  display: flex;
  justify-content: center;

  .map-upload-wrap-in {
    position: relative;
  }

  .jphoto:empty {
    border: none;
    width: 100%;
    height: 100%;
  }
  .jphoto:empty:before {
    font-family: 'xeicon' !important;
    content: "\ea4e";
    font-size: 4em;
    color: #ddd;
  }
  .jcrop-area {
    position: static;
    display: block;
    border: none;
    background: none;
    width: 100%;
  }
  #image-cropper, #signature-pad {
    border: 1px solid #DDD;
    /* width: 100% !important */
  }
  #signature-pad {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #image-cropper-result {
    /* width: 100%;
    position: absolute;
    left: 0;
    top: 0; */
    max-width: 100%;
  }

  .frame {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    pointer-events: none; /* 시각적으론 위에, 클릭은 아래로 전달 */
  }
  .upload-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .real-width-wrap {}
  .button-wrap {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rotate-wrap {
      display: flex;
      gap: 0.5rem;
      justify-content: flex-start;
      align-items: center;
    }

    button {
      padding: 0.5rem 1rem;
      color: #fff;
      border-radius: 0.5rem;
      background: #333;
      border: none;
      border-radius: 0.25rem;

      &:hover {
        background: #292929;
      }
    }

  }

  #mysvg_2 {
    animation: border_animate 1s infinite;
    -moz-animation: border_animate 1s infinite; /* Firefox */
    -webkit-animation: border_animate 1s infinite; /* Safari and Chrome */
    -o-animation: border_animate 1s infinite; /* Opera */
  }

  #image-cropper-result, #image-base-src {
    display: none;
  }
}
@keyframes border_animate { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes border_animate { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes border_animate { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@-o-keyframes border_animate { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }




.project-list-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;

  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
    }

    .button-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;

      a {
        color: #fff;
        border-radius: 0.5rem;
        padding: 0.5rem;
        background: #333;

        &:hover {
          background: #292929;
        }
      }
    }
  }


  table {
    width: 100%;
    border: none;
    color: #fff;

    tr {
      border-bottom: 1px solid #222;
    }

    tbody tr:last-child {
      border-bottom: 0;
    }

    tbody tr:hover {
      background: #333;
      // border-right: 1px solid #333;
    }

    a {
      text-align: center;
      width: 100%;
      padding: 0.5rem;
      display: block;

      &:hover {
        background: inherit;
      }
    }

    * {
      text-align: center;
    }
  }

  .paginate-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .search-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .form-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .row {
      display: flex;
      align-items: center;

      .label {
        width: 15%;
        min-width: 90px;
      }
      .input {
        flex: 1;
      }
    }
  }
}

.container.map-view-wrap {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      font-size: 1.5rem;
      font-weight: bold;
      color: #fff;
    }
  }

  .label-show-wrap {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .button-wrap {
    gap: 0.5rem;
    display: flex;
  }
}

.project-layer-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 5;

  .project-layer-wrap-in {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // z-index: 6;
    position: relative;

    .project-form-wrap {
      min-width: 300px;
      width: 100%;
      max-width: 600px;

      padding: 1rem;
      background: #000;
      position: relative;
      border: 1px solid #333;

      .close-button {
        position: absolute;
        top: 0;
        right: -3.5rem;
        font-size: 1.5rem;
        padding: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.project-list-wrap {
  table {
    .mobile_show {
      display: none;
    }
  }
}

@media (max-width: 700px) {
  .project-list-wrap {
    table {
      .mobile_hide {
        display: none;
      }
      .mobile_show {
        display: flex;
        justify-content: space-between;

        .sub_title, .sub_title * {
          color: #999;
        }

        span:first-child {
          text-align: left;
        }
        span:last-child {
          text-align: right;
        }
      }
    }
  }
}

.help {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  font-sizes: 1.25rem;

  div {
    line-height: 1.25rem;
  }
}