.cont-box{display:flex;flex-direction:row;border:1px solid #D4D4D4;padding:2rem;margin:4rem 5rem;}
.cont-box>div{width:50%;text-align:center;align-content:center;}
.cont-box>div>img{height:300px;}
.cont-box>div>.t-row{display:flex;flex-direction:row;margin:1.8rem 0;}
.cont-box>div>.t-row>div{text-align:left;}
/* 컨테이너 높이(또는 aspect-ratio) 지정 + overflow 숨김 */
.pg-img-slide {
  margin: 0 auto;
  width: 90%;                 /* 기존 설정 유지 */
  max-width: 100%;
  overflow: hidden;           /* 부모에서 튀어나오는 부분 숨김 */
  position: relative;
  /* 고정 높이(원하시는 크기로 조정) 또는 aspect-ratio 사용 */
  height: 304px;              /* 예: 화면에 보이는 파란 영역 높이와 동일하게 */
  /* 또는 대신: aspect-ratio: 16 / 9; 를 사용 (브라우저 지원 확인) */
  background: #fff;           /* 배경색(선택) */
}

/* 슬라이드 자체가 부모 높이를 채우도록 함 */
.pg-img-slide .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
}

/* 이미지 크기를 부모 안에 맞추기 (튀어나오지 않도록) */
.pg-img-slide .swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain; /* contain: 전체 이미지가 보이도록 (원하시면 cover로 변경) */
}

/* 네비게이션(화살표) 위치 조정 - 컨테이너 안 우/좌 */
.pg-img-slide .swiper-button-prev,
.pg-img-slide .swiper-button-next {
  position: absolute;
  top: 50%;
/*   transform: translateY(-50%); */
  z-index: 20;
  width: 30px;
  height: 30px;
  /* 좌/우 위치 */
  outline: none;
}
.pg-img-slide .swiper-button-prev::after,
.pg-img-slide .swiper-button-next::after {
  content: none;
}
.pg-img-slide .swiper-button-prev::before,
.pg-img-slide .swiper-button-next::before {
  content: "";
  display: block;
  width: 40px;    /* 아이콘 크기(원하면 조정) */
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='15 5 8 12 15 19' stroke='%23acacac' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* 오른쪽 버튼은 같은 SVG를 180도 회전 */
.pg-img-slide .swiper-button-next::before {
  transform: rotate(180deg);
}
.pg-img-slide .swiper-button-prev { left: 8px; }
.pg-img-slide .swiper-button-next { right: 8px; }

/* 반응형: 작은 화면에서는 높이 줄이기 (원하면 조정) */
@media (max-width: 768px) {
	.cont-box>div{width:100%;}
	.cont-box{display:flex;flex-direction:column;margin:3rem 0;padding:3rem 2rem;}
	.cont-box>div>img{height:200px;}
  .pg-img-slide { height: 200px; }
}