@media (max-width: 767px) {
  .btn-zoom-in,
  .btn-zoom-out {
    font-size: 100px; /* Increase the font size for mobile devices */
  }
}



.btn-zoom-in,
.btn-zoom-out {
  font-size: 40px; /* Increase the font size to make the buttons larger */
  color: #ff0000; /* Change the color to red */
}



.product-image {
  max-width: 100%;
  height: auto;
  overflow-x: auto; /* 가로 스크롤바 추가 */
}

/* 모바일 디바이스 */
@media only screen and (max-width: 767px) {
  .product-image {
    max-width: 100%;
    margin: 0 auto;
  }
}





/* 이미지 컨테이너 스타일링 */
.product-image-container {
  max-width: 100%;
  height: auto;
}

/* 모바일에서 이미지 컨테이너 크기 조정 */
@media only screen and (max-width: 767px) {
  .product-image-container {
    max-width: 350px;
  }
}

/* 이미지 스타일링 */
.product-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}











/* 가로 스크롤바 스타일링 */
.product-image::-webkit-scrollbar {
  height: 10px;
}

.product-image::-webkit-scrollbar-thumb {
  background-color: #ffffff; /* 블루색상으로 변경 */
  border-radius: 5px;
}

.product-image::-webkit-scrollbar-track {
  background-color: #eee;
}

/* 좌우 화살표 스타일링 */
.product-image::-webkit-scrollbar-button {
  background-color: transparent;
  display: block;
  height: 20px;
  width: 20px;
  touch-action: none; /* 모바일에서 스크롤바 버튼 터치 가능하도록 설정 */
}

.product-image::-webkit-scrollbar-button:start:decrement,
.product-image::-webkit-scrollbar-button:end:increment {
  background-color: transparent; /* 변경된 바 색상에 맞게 수정 */
}

.product-image::-webkit-scrollbar-button:start:decrement:before,
.product-image::-webkit-scrollbar-button:end:increment:before {
  content: '';
  height: 5px;
  width: 5px;

 border-bottom: 2px solid #007aff; /* 블루색상으로 변경 */
  border-right: 2px solid #ffffff; /* 블루색상으로 변경 */


  transform: rotate(-45deg);
}

.product-image::-webkit-scrollbar-button:end:increment:before {
  transform: rotate(135deg);
}