@charset "UTF-8";
/*
> 主要swiperSlider 必加樣式 Start ==========================================================================
*/
#prod_imgSWIP img {
  width: 100%;
  cursor: pointer;
}
#prod_imgSWIP .gallery-thumbs {
  margin-bottom: 2rem;
}

/* ? Swiper 11版要加這行 */
#prod_imgSWIP .gallery-top,
#prod_imgSWIP .gallery-thumbs {
  overflow: hidden;
}

#prod_imgSWIP .gallery-top {
  position: relative;
  text-align: center;
}
#prod_imgSWIP .gallery-top img {
  width: 100%;
}
@media (max-width: 767px) {
  #prod_imgSWIP .gallery-top img {
    width: max-content;
  }
}
@media (max-width: 470px) {
  #prod_imgSWIP .gallery-top img {
    width: 100%;
  }
}

.modal_swiperContainer_01 {
  padding-right: 0;
}
.modal_swiperContainer_01 img {
  width: 100%;
  max-height: 600px;
  -o-object-fit: contain;
  object-fit: contain;
}
.modal_swiperContainer_01 .modal-thumbs {
  cursor: pointer;
  overflow: hidden;
}
.modal_swiperContainer_01 .modal-header {
  border-bottom: none;
}
.modal_swiperContainer_01 .modal-body {
  padding: 15px 15px 35px;
}
.modal_swiperContainer_01 .swiper-wrapper {
  justify-content: center;
}

/*縮圖列表 樣式*/
#prod_imgSWIP .gallery-thumbs {
  margin: 1.6rem auto;
}
#prod_imgSWIP .gallery-thumbs .swiper-slide,
.modal_swiperContainer_01 .modal-thumbs .swiper-slide {
  border-radius: 5px;
  outline: 1px solid #c5c5c5;
  outline-offset: 2px;
  transform: scale(0.9);
}

/*縮圖列表 active樣式*/
#prod_imgSWIP .swiper-slide-thumb-active,
.modal_swiperContainer_01 .swiper-slide-thumb-active {
  border: 2px solid #232429;
  padding: 3px;
}

/*
> 主要swiperSlider 必加樣式 End ==========================================================================
*/
/*
> Modal ==========================================================================
*/
/* modal close 樣式修改*/
.modal_swiperContainer_01 .close {
  font-size: 25px;
  opacity: 1;
  width: 30px;
  height: 30px;
  color: #232429;
  text-shadow: none;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 2;
}

.modal_swiperContainer_01 .close::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: #232429;
  transform: scale(0);
  transition: transform 0.3s ease-in-out;
}
.modal_swiperContainer_01 .close:hover {
  color: #fff;
}
.modal_swiperContainer_01 .close:hover::after {
  transform: scale(1);
}

/*
> 其他元件 ==========================================================================
*/
/*左右箭頭 -------------*/
#prod_imgSWIP .swiper-button-prev,
#prod_imgSWIP .swiper-button-next,
.modal_swiperContainer_01 .swiper-button-prev,
.modal_swiperContainer_01 .swiper-button-next {
  background-image: none !important;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}
#prod_imgSWIP .swiper-button-prev:focus,
#prod_imgSWIP .swiper-button-next:focus,
.modal_swiperContainer_01 .swiper-button-prev:focus,
.modal_swiperContainer_01 .swiper-button-next:focus {
  display: none !important;
}
#prod_imgSWIP .swiper-button-prev::after,
#prod_imgSWIP .swiper-button-next::after,
.modal_swiperContainer_01 .swiper-button-prev::after,
.modal_swiperContainer_01 .swiper-button-next::after {
  font-weight: bolder;
  color: #232429;
  background: #fff;
  border-radius: 50%;
  font-size: 25pt;
}
#prod_imgSWIP .swiper-button-prev:active::after,
#prod_imgSWIP .swiper-button-next:active::after,
.modal_swiperContainer_01 .swiper-button-prev:active::after,
.modal_swiperContainer_01 .swiper-button-next:active::after {
  color: rgb(96, 96, 99);
}
#prod_imgSWIP .swiper-button-prev::after,
.modal_swiperContainer_01 .swiper-button-prev::after {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'><path d='M35.2567 0C35.6639 0 36.0804 0.160969 36.3929 0.473391C37.0177 1.09823 37.0177 2.12072 36.3929 2.74556L15.0058 24.142L36.0804 45.2166C36.7053 45.8415 36.7053 46.864 36.0804 47.4888C35.4556 48.1137 34.4331 48.1137 33.8083 47.4888L11.5977 25.2782C10.9728 24.6533 10.9728 23.6308 11.5977 23.006L34.1207 0.473438C34.4331 0.161016 34.8496 9.375e-05 35.2568 9.375e-05L35.2567 0Z' fill='black'/></svg>")
    no-repeat center;
  background-size: contain;
}
#prod_imgSWIP .swiper-button-next::after,
.modal_swiperContainer_01 .swiper-button-next::after {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none'><path d='M35.2567 0C35.6639 0 36.0804 0.160969 36.3929 0.473391C37.0177 1.09823 37.0177 2.12072 36.3929 2.74556L15.0058 24.142L36.0804 45.2166C36.7053 45.8415 36.7053 46.864 36.0804 47.4888C35.4556 48.1137 34.4331 48.1137 33.8083 47.4888L11.5977 25.2782C10.9728 24.6533 10.9728 23.6308 11.5977 23.006L34.1207 0.473438C34.4331 0.161016 34.8496 9.375e-05 35.2568 9.375e-05L35.2567 0Z' fill='black'/></svg>")
    no-repeat center;
  background-size: contain;
  transform: rotate(180deg);
}
.modal_swiperContainer_01 .swiper-container:hover .swiper-button-prev,
.modal_swiperContainer_01 .swiper-container:hover .swiper-button-next,
#prod_imgSWIP .gallery-top:hover .swiper-button-prev,
#prod_imgSWIP .gallery-top:hover .swiper-button-next {
  opacity: 1;
}