.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* 배경색과 투명도 조정 가능 */
  z-index: 999; /* 모달 팝업보다 앞에 오도록 설정 */
  display: none; /* 초기에는 숨김 */
}

/* 모달 스타일 */
.modal {
  display: none; /* 모달 초기에는 숨김 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: auto;
}

.modal.active {
  display: block; /* 활성화될 때 보이도록 설정 */
}

#modalcenter,
#modalcenter_photo {
  /* 모달 가운데 정렬 */
  display: flex;
  justify-content: center; /* 수평 가운데 정렬 */
  align-items: center; /* 수직 가운데 정렬 */
  width: 100vw;
  height: 100vh; /* 높이를 전체 화면 높이로 설정합니다. */
}
.modalsize_photo {
  width: 70vw;
  /* 모달 사이즈 조절  */
}

@media (orientation: portrait) {
  /* 핸드폰 세로 모드 */
  .modalsize {
    width: 100%;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  /* 핸드폰 가로 모드 */
  .modalsize,
  .modalsize_photo {
    width: 70%;
  }
}

@media (min-width: 1025px) {
  /* 데스크탑 */
  .modalsize {
    width: 80%;
  }
}

.modal-content {
  padding: 56.25% 0 0 0;
  position: relative;
}
.modal-content_photo {
  height: 90vh; /* 화면 높이의 80% */
  position: relative;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}