.popup-wrap {
  .popup {
    &.department-pop {
      width: 900px; height: 700px;
      .modal-text-area {
        height: 600px;
        &.company-search {
          .search-wrap {
            border-bottom: none;
          }
        }
        .result-area {
          height: 100%;
        }
      }
    }
  }
  .choice-wrap {
    display: flex; gap: 20px; padding: 0 20px;
    &.empty {
      .department-list {
        .department {
          .empty-text {
            display: block;
          }
          .list {
            display: none;
          }
          .professor {
            display: none;
          }
        }
      }
    }
    .left-box {
      width: calc(100% - 20px);
    }
    .right-box {
      width: calc(100% - 20px);
    }
    .department-list {
      border-top: 1px solid #4a6feb;
      .head {
        position: relative; background: #6286fe; padding: 10px; border-bottom: 1px solid #aaa; text-align: center;
        .category-name {
          font-size: 1.4rem; font-weight: 500; color: #ffffff;
        }
      }
      .department {
        @include scrollbar; position: relative; height: 440px; overflow-y: auto; background: #efefef; border-bottom: 1px solid #dee3eb;
        &.result {
          padding: 20px;
        }
        .empty-text {
          display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 1.3rem; color: #8d8d8d; text-align: center;
        }
        .list {
          width: 100%; height: auto; background: #ffffff;
          li {
            font-size: 1.3rem; padding: 10px; word-break: break-all; color: #3e3e3e; text-align: left; cursor: pointer;  border-bottom:  1px solid var(--line-color); border-right:  1px solid var(--line-color); border-left:  1px solid var(--line-color); border-top:  1px solid #ffffff;
            &.select {
              border: 1px solid var(--main-color); color: var(--main-color); font-weight: 500;
            }
            &:hover {
              border: 1px solid var(--main-color); color: var(--main-color); font-weight: 500;
            }
          }
        }
        .professor {
          background: #fff; border: 1px solid var(--line-color); margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
          }
          .sub-head {
            display: flex; align-items: center; justify-content: space-between; padding: 10px; border-bottom: 1px solid #dee3eb;
            .name {
              display: inline-block; width: 57px; font-size: 1.3rem; font-weight: 600; color: var(--main-color);
            }
            .position {
              display: inline-block; font-size: 1.3rem; font-weight: 600; padding-right: 5px; color: #7f7f7f;
            }
          }
          .pop-table {
            width: 100%;
            tbody {
              tr {
                display: block; padding: 10px 10px 0 10px; vertical-align: top;
                &:last-child {
                  padding-bottom: 10px;
                }
                th {
                  width: 60px; font-size: 1.2rem; padding-right: 5px; color: #7f7f7f; font-weight: 600;
                }
                td {
                  font-size: 1.2rem; color: #7c7c7c; 
                }
              }
            }
          }
        }
      }
    }
  }
  .check-input {  
    input[type="radio"] {    
      & + label:before {
        background-image:url("../../../img/common/radio.svg");margin: 0px 7px 0 0; 
      }    
    }
  }
}



@media(max-width: 980px) {
  .popup-wrap {
    .popup {
      &.department-pop {
        width: calc(100% - 40px);
      }
    }
  }
}

@media(max-width:768px) {
  .popup-wrap {
    .choice-wrap {
      flex-direction: column;
      .left-box {
        width: 100%;
      }
      .right-box {
        width: 100%;
      }
    }
  }
}

@media(max-width: 400px) {
  .popup-wrap {
    .popup {
      &.department-pop {
        height: 500px;
        .modal-text-area {
          height: 430px;
        }
      }
    }
    .choice-wrap {
      .department-list {
        .department {
          .professor {
            .sub-head {
              display: block;
              .name-wrap {
                padding-bottom: 5px;
              }
            }
          }
        }
      }
    }
  }
}