/* ===== C10 : 원장님 소개 섹션 ===== */

.c10 {
  background:#ffffff;
  word-break: keep-all;
}

.c10-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding:200px 20px 100px;
}

.c10-row {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.c10-card {
  flex: 0 1 450px;
  text-align: center;

  /* 애니메이션 기본값(공통) */
  opacity: 0;
  transform: translate(0, 0);
  transition:
    opacity 0.7s ease-out,
    transform 0.7s ease-out;
}

/* 시작 위치 : 왼쪽 원장님 → 왼쪽아래에서 */
.c10-card--left {
  transform: translate(-40px, 40px);
}

/* 시작 위치 : 오른쪽 원장님 → 오른쪽아래에서 */
.c10-card--right {
  transform: translate(40px, 40px);
}

/* 화면에 보일 때(스크립트에서 붙여주는 클래스) */
.c10-card.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* 사진 영역 */
.c10-photo-wrap {
  border-radius: 8px;
  overflow: hidden;
  background:#f8f9fb;
}

.c10-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* 캡션(이름) */
.c10-caption {
  margin-top: 12px;
  font-size: 25px;
  color:#222;
  font-weight: 700;

}

.c10-name {
  color:#10578e;      /* 이름만 파란색 */
  font-weight: 700;
}

/* 반응형 */
@media (max-width:900px){
  .c10-inner {
    max-width: 100%;}
}
@media (max-width: 768px) {
  .c10-inner {
    padding: 60px 16px 80px;
  }

  .c10-row {
    gap: 28px;
  }

  .c10-card {
    flex: 0 1 100%;
  }
}