.researcher-area {
  .researcher {
    > .researcher-group {
      display: flex; gap: 20px; flex-wrap: wrap;
      .box {
        width: calc(50% - 10px); padding:25px 20px; border:1px solid var(--line-color);
      }
    }
    .profil-section {
      height: 100%;
      .profil-area {
        position: relative; display: flex; gap: 15px; min-height: 140px;
        .profil-left {
          position: relative; width: 105px; height: 130px;
          .img-area {
            position: relative; overflow: hidden; width: 100%; height: 100%;
            img {
              position: absolute; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);
            }
          }
        }
        .profil-right {
          width: calc(100% - 120px);
          .name {
            font-size: 1.7rem; font-weight: 600; color: #20368a; margin: 0 0 15px 0; 
            .faculty {
              font-size: 1.2rem; color: #707070; display: inline-block;
            }
          }
          .info {
            dl {
              position: relative; display: flex; flex-wrap: wrap; gap: 7px 6px;
              .item {
                width:calc(50% - 3px); display: flex; flex-wrap: wrap; line-height: 1.5;
                &.full-width {
                  width: 100%;
                }
                dt.tit {
                  width: 45px; font-weight: 500;
                }
                dd.txt {
                  width: calc(100% - 45px); word-break: break-all;
                }
                &.email {
                  display: inline-block; position: absolute; top: -43px; right: 0; width: auto;
                  .btn-wrap {
                    button {
                      font-size: 1.1rem;
                      .material-icons {
                        font-size: 13px; margin-right: 5px;
                      }
                    }
                  }
                }
              }
            }
            .left-txt {
              width: 100px; font-weight: 500;
            }
            .right-txt {
              width: 100%; padding-left: 10px; word-break: break-all; line-height: 1.5;
            }
          }
        }
      }
      .profil-bottom {
        padding-top: 10px; height: calc(100% - 135px);
        .txt-box {
          height: 100%;
          .tab-area {
            display: flex; gap: 15px; margin: 15px 0 10px;
            .title { 
              position: relative; padding: 0 0 5px; font-size: 1.4rem; font-weight: 500; color: #c6c6c6; 
              &:not(.disabled):hover,
              &.on { 
                color: #2d2d2d; font-weight: 600; cursor: pointer; 
                &:after {
                  content: ''; display: block; position: absolute; bottom: 0; left:0; width: 100%; height: 1px; background: #000; 
                }
              }
              &.disabled {
                cursor: no-drop;
              }
            }
          }
          .txt-area {
            padding: 10px 0; border-bottom: 1px dashed var(--line-color);
            .reacher-txt {
              text-overflow: ellipsis; overflow: hidden; white-space: nowrap; display: inline-block; word-break: break-word; font-size: 1.3rem; width: 100%;
              position: relative; padding-left: 10px;
              &:after {
                content: ''; width: 4px; height: 4px; border-radius: 5px; background: #6f6f6f; position: absolute; top: 6px; left: 0;
              }
              &:hover {
                text-decoration: underline;
              }
            }
            .label-txt {
              display: inline-block; padding-right: 7px; font-weight: 900; font-size: 1.2rem;
              &.ntis {
                color: #f27221;
              }
              &.kci {
                color: var(--main-color);
              }
            }
          }
          .empty-area {
            text-align: center; position: relative; background: #f7f7f7; height: calc(100% - 45px); padding: 25px 0;
            .txt {
              @include alignCenter; font-size: 1.2rem; color: #666;
            }
          }
        }
      }
    }
  }
}


.researcher-pop {
  .popup {
    height: 840px !important; max-height: 85vh;
    .modal-text-area {
      padding: 20px;
    }
  }
}



@media(max-width:1024px) {
  .researcher-area {
    .researcher {
      > .researcher-group {
        .box {
          padding: 20px 15px;
        }
      }
      .profil-section {
        .profil-area {
          .profil-right {
            .info {
              dl {
                .item {
                  width: 100%;
                  &.email {
                    position: static; width: 100%; padding-top: 5px;
                  }
                }
              }
            }
          }
        }
        .profil-bottom {
          height: auto;
          .txt-box {
            height: auto;
            .empty-area {
              height: auto;
            }
          }
        }
      }
    }
  }
}

@media(max-width:768px) {
  .researcher-area {
    .researcher {
      .researcher-group {
        display: block;
        .box {
          width:100%; margin-bottom: 20px; padding:12px;
          .profil-section {
            .profil-area {
              .profil-right {
                .info {
                  dl {
                    font-size: 1.2rem; gap: 4px;
                  }
                }
              }
            }
            .profil-bottom {
              .txt-box {
                .tab-area {
                  .title {
                    font-size: 1.3rem; text-align: center; font-weight: 600; line-height: 1.6;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}