@charset "utf-8";
#modalBody{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
#modalBody.active{
  display: block;
}
.closeBtn{
  position: absolute;
  top: 3px;
  left: 4px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
/* .closeBtn{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: 40px;
  cursor: pointer;
} */
.slide_wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 40%;
  max-width: 765px;
  /* overflow: hidden; */
}
#modalBody .slider {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* 슬라이드 개별 항목 */
.slide {
  display: none; /* 기본적으로 슬라이드는 보이지 않음 */
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.slide.active {
  display: block; /* 활성화된 슬라이드만 표시 */
}

/* 슬라이드 이미지 */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지가 슬라이드 크기에 맞게 조정됨 */
}

/* 화살표 스타일 */
.arrow > div{
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  color: white;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 9;
}


/* 이전 버튼 */
.prev-btn {
  left: -50px;
}

/* 다음 버튼 */
.next-btn {
  right: -50px;
}

.prev-btn::before {
  content: ''; /* 왼쪽 화살표 */
  width: 48px;
  height: 48px;
  background: url(../img/left.png) no-repeat center center/cover;
}

.next-btn::before {
  content: ''; /* 오른쪽 화살표 */
  width: 48px;
  height: 48px;
  background: url(../img/right.png) no-repeat center center/cover;
}


#iframeModal{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
#iframeModal.active{
  display: block;
}
.iframe_wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  height: 90%;
  max-width: 1350px;
  max-height: 800px;
  /* overflow: hidden; */
  background: #fff;
  border-radius: 20px;
  padding: 20px;
}
.iframe_wrapper .tit{
  font-size: 24px;
  color: #000;
  font-weight: 700;
  margin-bottom: 16px;
}
#iframeCon{
  width: 100%;
  height: 94%;
}
#iframeCon iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.iframe_wrapper .closeBtn{
  left: unset;
  right: 12px;
  top: 18px;
}