/* director */
#director .width-wrap > h1 {
  margin: 16px 0 80px;
}
#director .width-wrap .bottom-area {
  display: grid;
  grid-template-columns: minmax(auto, 580px) auto;
  gap: 200px;
}
#director .width-wrap .bottom-area .img-zone {
  max-height: 650px;
  background: url(../img/screen/doctors/img_doctor_01.png?ver=0.0.1) no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
}
#director .width-wrap .bottom-area .text-zone {
  display: flex;
  flex-direction: column;
  gap: 60px;
}
#director .width-wrap .bottom-area .text-zone li.name {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  position: relative;
}
#director .width-wrap .bottom-area .text-zone li.name::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background: var(--gray);
  position: absolute;
  bottom: 0;
}
#director .width-wrap .bottom-area .text-zone li.name p {
  align-self: end;
}
#director .width-wrap .bottom-area .text-zone li.career {
  position: relative;
}
#director .width-wrap .bottom-area .text-zone li.career::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 4px;
  background: var(--po);
  position: absolute;
  top: 0;
}
#director .width-wrap .bottom-area .text-zone li.career p.tit {
  padding-top: 14px;
  margin-bottom: 24px;
}
#director .width-wrap .bottom-area .text-zone li.career p.item {
  display: flex;
  gap: 4px;
}
#director
  .width-wrap
  .bottom-area
  .text-zone
  li.career
  p.item:not(:last-child) {
  margin-bottom: 10px;
}
#director .width-wrap .bottom-area .text-zone li.sign {
  align-self: end;
}

/* doctors */
#doctors .width-wrap > h1 {
  margin: 16px 0 80px;
}
#doctors .width-wrap .bottom-area {
  display: flex;
  flex-direction: column;
  gap: 120px;
}
#doctors .width-wrap .bottom-area > li {
  display: flex;
  align-items: center;
  gap: 80px;
}
#doctors .width-wrap .bottom-area > li:nth-child(2n) {
  flex-direction: row-reverse;
}
#doctors .width-wrap .bottom-area > li .img-zone {
  width: 37.18%;
  height: 650px;
  border-radius: 16px;
  overflow: hidden;
  background: url(../img/screen/doctors/img_doctor_01.png?ver=0.0.1) no-repeat;
  background-size: cover;
}
#doctors .width-wrap .bottom-area > li:nth-child(2) .img-zone {
  background: url(../img/screen/doctors/img_doctor_02.png) no-repeat;
  background-size: cover;
}
#doctors .width-wrap .bottom-area > li:nth-child(3) .img-zone {
  background: url(../img/screen/doctors/img_doctor_03.png) no-repeat;
  background-size: cover;
}
#doctors .width-wrap .bottom-area > li .desc-zone {
  flex: 1;
}
#doctors .width-wrap .bottom-area > li .desc-zone li.name {
  display: flex;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 60px;
  position: relative;
}
#doctors .width-wrap .bottom-area > li .desc-zone li.name::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 1px;
  background: var(--gray);
  position: absolute;
  bottom: 0;
}
#doctors .width-wrap .bottom-area > li .desc-zone li.name p {
  align-self: end;
}
#doctors .width-wrap .bottom-area > li .desc-zone li.item {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
#doctors .width-wrap .bottom-area > li .desc-zone li.item:nth-of-type(6),
#doctors .width-wrap .bottom-area > li .desc-zone li.item:nth-of-type(8) {
  margin-bottom: 0;
}
#doctors .width-wrap .bottom-area > li .desc-zone li.item:nth-of-type(6) {
  margin-bottom: 40px;
}

/* fileter 박스 */
#filter-medical-team {
  display: none;
}

/* responsive */
@media all and (max-width: 1600px) {
  /* director */
  #director .width-wrap .bottom-area {
    gap: 100px;
  }
}
@media all and (max-width: 1450px) {
  /* director */
  #director .width-wrap > h1 {
    margin: 16px 0 70px;
  }
  #director .width-wrap .bottom-area {
    gap: 70px;
  }
  #director .width-wrap .bottom-area .img-zone {
    max-height: 550px;
  }
  #director .width-wrap .bottom-area .text-zone {
    gap: 50px;
  }

  /* doctors */
  #doctors .width-wrap > h1 {
    margin: 16px 0 70px;
  }
  #doctors .width-wrap .bottom-area > li {
    gap: 70px;
  }
  #doctors .width-wrap .bottom-area > li .img-zone {
    height: 550px;
  }
  #doctors .width-wrap .bottom-area > li .desc-zone li.name {
    margin-bottom: 50px;
  }
}
@media all and (max-width: 1200px) {
  /* director */
  #director .width-wrap .bottom-area .img-zone {
    max-height: 450px;
  }

  /* doctors */
  #doctors .width-wrap .bottom-area > li {
    gap: 51px;
  }
  #doctors .width-wrap .bottom-area > li .img-zone {
    height: 450px;
  }
}
@media all and (max-width: 1020px) {
  /* director */
  #director .width-wrap .bottom-area {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(auto, 700px) auto;
  }
  #director .width-wrap .bottom-area .img-zone {
    max-height: initial;
    height: 100%;
  }
}
@media all and (max-width: 900px) {
  /* doctors */
  #doctors .width-wrap .bottom-area {
    gap: 90px;
  }
  #doctors .width-wrap .bottom-area > li,
  #doctors .width-wrap .bottom-area > li:nth-child(2n) {
    flex-direction: column;
    align-items: initial;
  }
  #doctors .width-wrap .bottom-area > li .img-zone {
    width: 90%;
    height: 750px;
  }
}
@media all and (max-width: 800px) {
  /* director */
  #director .width-wrap .bottom-area {
    grid-template-rows: minmax(auto, 600px) auto;
  }

  /* doctors */
  #doctors .width-wrap .bottom-area > li .img-zone {
    height: 650px;
  }
}
@media all and (max-width: 600px) {
  /* doctors */
  #doctors .width-wrap .bottom-area > li .img-zone {
    height: 550px;
  }
}
@media all and (max-width: 500px) {
  /* director */
  #director .width-wrap > h1 {
    font-size: 24px;
    letter-spacing: -0.72px;
    margin: 10px 0 32px;
  }
  #director .width-wrap .bottom-area {
    gap: 32px;
    grid-template-rows: minmax(auto, 480px) auto;
  }
  #director .width-wrap .bottom-area .text-zone {
    gap: 32px;
  }
  #director .width-wrap .bottom-area .text-zone li.name {
    gap: 10px;
  }
  #director .width-wrap .bottom-area .text-zone li.name p {
    font-size: 14px;
    letter-spacing: -0.42px;
  }
  #director .width-wrap .bottom-area .text-zone li.career p.tit {
    margin-bottom: 20px;
  }
  #director
    .width-wrap
    .bottom-area
    .text-zone
    li.career
    p.item:not(:last-child) {
    margin-bottom: 6px;
  }
  #director .width-wrap .bottom-area .text-zone li.career p.item {
    font-size: 14px;
    letter-spacing: -0.42px;
  }
  #director .width-wrap .bottom-area .text-zone li.sign img {
    width: 84px;
  }

  /* doctors */
  #doctors .width-wrap > h1 {
    font-size: 24px;
    letter-spacing: -0.72px;
    margin: 10px 0 32px;
  }
  #doctors .width-wrap .bottom-area {
    gap: 48px;
  }
  #doctors .width-wrap .bottom-area > li {
    gap: 32px;
  }
  #doctors .width-wrap .bottom-area > li .img-zone {
    width: 100%;
    height: 500px;
  }
  #doctors .width-wrap .bottom-area > li .desc-zone li.name {
    gap: 10px;
    margin-bottom: 28px;
  }
  #doctors .width-wrap .bottom-area > li .desc-zone li.item {
    margin-bottom: 6px;
  }
  #doctors .width-wrap .bottom-area > li .desc-zone li.name p {
    font-size: 14px;
    letter-spacing: -0.42px;
  }
  #doctors .width-wrap .bottom-area > li .desc-zone li {
    font-size: 14px;
    letter-spacing: -0.42px;
  }
  #doctors .width-wrap .bottom-area > li .desc-zone li.item:nth-of-type(6) {
    margin-bottom: 24px;
  }
}
@media all and (max-width: 375px) {
  /* director */
  #director .width-wrap .bottom-area {
    grid-template-rows: minmax(auto, 400px) auto;
  }

  /* doctors */
  #doctors .width-wrap .bottom-area > li .img-zone {
    height: 400px;
  }
}