.pageContent_product{
    padding: 25px 0;
  }
  
  
  
  
  .swiper_bg{
      width: 100%;
      height: 60vh;
      /* padding: 20px 0px; */
      position: relative;
      box-sizing: border-box;
  }
  
  
  
  .index_product_list{
      height: 60vh;
      position: relative; /* 确保伪元素相对于此容器定位 */
      overflow: hidden; /* 确保内容不会溢出 */
      transition: 0.3s ease all;
  }
  
  .index_product_list::before {
      content: ''; /* 创建一个伪元素 */
      position: absolute;
      top: 0; /* 设置遮罩的顶部位置 */
      left: 0; /* 设置遮罩的左侧位置 */
      width: 100%;
      height: 100%; /* 使用全高 */
      background-color: rgba(255, 255, 255, 0.7); /* 遮罩颜色和透明度 */
      /* background: #333; */
      opacity: 1; /* 默认遮罩可见 */
      z-index: 2; /* 确保遮罩层在最上方 */
      /* 新增取消before影響觸控 modify by william 20240823 start*/
      pointer-events: none;
      /* 新增取消before影響觸控 modify by william 20240823 end*/
  }
  
  
      .index_product_list a{
          text-decoration: none;
          display: block;
      }
          .product_name{
              font-size: 18px;
              color: black;
              font-weight: 700;
              text-align: center;
              border-left: 4px solid black;
              /* margin-top: 20px; */
              position: relative;
              z-index: 3;
          }
  
  
  
          .product_img{
  
  display: flex;
  
  height: inherit;
  
  transition: 0.3s ease all;
  
  }
          .product_img span {
              position: relative;
              /* height: inherit; */
              padding-top: 60vh;
              display: block;
              overflow: hidden;
              width: 100%;
              margin: auto;
              transition: 0.3s ease all;
          }
  
              .product_img img {
                  /* width: 100%; */
                  /* height: 100%; */
                  object-fit: cover;
                  position: absolute;
                  top: 0;
                  left: 0;
                  bottom: 0;
                  right: 0;
                  float: none;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: 0.3s ease all;
                  /* transition: opacity 0.3s ease; */ /* 添加图片的过渡效果 */
                  /* transform: scale(1); */ /*預設*/
              }
  
              
  
  .index_product_list:hover::before {    
      opacity: 0; /* 鼠标悬停时隐藏遮罩 */   
  }
  
  .index_product_list:hover .product_img img {
      /*opacity: 1;*/ /* 鼠标悬停时调整图片的透明度 */
      /*height: 20%;*/ /* 鼠标悬停时调整图片的高度 */
  }
  
  .index_product_list:hover  .product_img {
      /*transform: scale(0.5);*/ /*預設*/
  }
      .index_product_list:hover  .product_img span{
          /*transform: scale(0.5);*/ /*預設*/
          /* padding-top: 52%; */
          padding-top: 100%;
      }
  
  
  .index_product_list:hover .product_name {
      color: var(--primary_color); /* 鼠标悬停时改变文本颜色 */
      border-color: var(--primary_color); /* 鼠标悬停时改变边框颜色 */
  }
  
.swiper-button-prev,
.swiper-button-next {
    color: black;
    z-index: 3;
    opacity: 1;
    visibility: visible;
    background-position: center;
    object-fit: cover;
}

.swiper-button-prev {
    left: -60px;
    background: url(../images/left_arrow3.svg);
    
    background-repeat: no-repeat;   
}



.mySwiper4_area{
    position: relative;
}
.mySwiper4_area .swiper-button-prev02 ,
.mySwiper4_area .swiper-button-next02{
    width:40px;
    height: auto;
    aspect-ratio: 1 / 1.46;
    top:55%;
    transform: translate(0% , -55%);
    background-repeat: no-repeat;
    background-size:40px;
}
.mySwiper4_area .swiper-button-next02{
    /* width:60px;
    height:60px;
    top:55%; */
    right: calc(-40px + 10px);
    /* transform: translate(0% , -55%); */
    background-image: url(../images/right_arrow5.svg);
}
.mySwiper4_area .swiper-button-prev02{
    /* width:60px;
    height:60px;
    top:55%; */
    left: calc(-40px + 10px);
    /* transform: translate(0% , -55%); */
    background-image: url(../images/left_arrow5.svg);
}


@media(max-width:1200px){
    .mySwiper4_area .swiper-button-next02{
        width:30px;
        height:30px;
        height: auto;
        aspect-ratio: 1 / 1.46;
        top:55%;
        right: calc(-30px + 2px);
        transform: translate(0% , -55%);
        background-size:30px;
        /* right:180px !important; */
    }
    .mySwiper4_area .swiper-button-prev02{
        width:30px;
        height:30px;
        height: auto;
        top:55%;
        left: calc(-30px + 2px);
        transform: translate(0% , -55%);
        background-size:30px;
        /* left: 500px !important; */
    }
}



.mySwiper3_area{
    position: relative;
}
.pA_productArea .swiper-button-next ,
.pA_productArea .swiper-button-prev{
	z-index: 2;
	top: 55%;
    aspect-ratio: 1 / 1.46;
	bottom:unset;
	-webkit-transform: translate(0% , -55%);
	transform: translate(0% , -55%);
	background-size: 40px;
	width: 40px;
	height: 40px;
    height: auto;
}


.swiper-button-next {
    right: 0px;
    background: url(../images/right_arrow3.svg);
    
    background-repeat: no-repeat;   
}
.pA_productArea .swiper-button-next {
    right:calc(-40px + 10px);
    height: auto;
	background-image: url(../images/right_arrow4.svg);
    aspect-ratio: 1 / 1.46;
}
.pA_productArea .swiper-button-prev{
	left:0px;
    left: calc(-40px + 10px);
	background-image: url(../images/left_arrow4.svg);
    aspect-ratio: 1 / 1.46;
}
@media(max-width:1200px){
    .pA_productArea .swiper-button-next {
        width: 30px;
	    height: 40px;
        right:calc(-30px + 2px);
        height: auto;
        background-image: url(../images/right_arrow4.svg);
        aspect-ratio: 1 / 1.46;
        background-size:30px;
    }
    .pA_productArea .swiper-button-prev{
        width: 30px;
        left: calc(-30px + 2px);
        background-image: url(../images/left_arrow4.svg);
        aspect-ratio: 1 / 1.46;
        background-size:30px;
    }
}
/* @media (max-width: 1500px){
	.pA_productArea .swiper-button-next ,
	.pA_productArea .swiper-button-prev{
		width: 60px;
		height: 60px;
		background-size: 60px;
	}
	.pA_productArea .swiper-button-next {
		right:0px;
	}
	.pA_productArea .swiper-button-prev{
		left:0px;
	}
} */
@media(max-width:1280px){
    .swiper-button-next {
        right: 0px;
    }
    .swiper-button-prev {
        left: 0px;
    }
}
@media(max-width:990px){
    .swiper-button-next {
        display: none;
    }
    .swiper-button-prev {
        display: none;
    }
}
  
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* ----------------複選頁面---------------- */

  .productPage{
    margin: 0;
  }

  .filter_Bg {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
      gap: 10px 5px;
      margin-top: 10px;
  }
  .filter_box.width4 {
      /* width: 46%; */
      width: 100%;
  }
  .filter {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 5px;
      border-radius: 10px;
      background: white;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      /* box-shadow: rgba(0, 0, 0, 0.32) 0px 5px 15px; */
      padding: 10px;
      /* height: calc(100% - 40px); */
      flex-direction: column;
  }
    .filter_title{
    font-weight: 700;
    }
  .ms_btn{
      grid-column-start: 4;
      grid-column-end: 5;
      /* width: 100%; */
      display: flex;
      /* align-items: center; */
      /* padding: 10px 0 0 0; */
      justify-content: flex-end;
  }
  .ms_btn button{
          background-color: var(--primary_color); /* Remove default background color */
          border: none; /* Remove default border */
          color: white; /* Set text color */
          padding: 0px 5px; /* Set padding */
          cursor: pointer; /* Pointer cursor on hover */
          font-size: 16px; /* Set font size */
          border-radius: 3px;
          min-width: 100px;
          line-height: 42px;
          /* margin-left: auto; */
  }
  .ms_btn button:hover{
    opacity: 0.5;
  }


@media (max-width: 1280px){

    .filter_Bg {
        /* grid-template-columns: repeat(2, 1fr); */
    }

}


@media (max-width: 990px){
    .filter_Bg{        
        /* grid-template-columns: repeat(1, 1fr); */

        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px 0;
        margin: 10px 0px 0;
    }
        .filter_box.width4 {
            width: 49%;
            padding: 0 0px;
        }

}
@media (max-width: 860px){
    .rightTopArea.productPage{
        display: flex;
    }   
    .filter_Bg {
        margin: 20px 20px 10px 20px;
    }
}
@media (max-width: 768px){

    .filter_Bg{   
        flex-direction: column;
        justify-content: unset;
        gap: 5px 0;
        margin: 10px 0px 0;
    }
        .filter_box.width4 {
            width:100%;
        }
        .ms_btn button {
            width: 100%;
        }
}
  
  
  /* -----------------選單區----------------- */ 
  .left_title{
      background-color: var(--primary_color); /* 修改顏色 modify by peggy 20240925 */
      font-size: 20px;
      line-height: 25px;
      word-break: break-word;
      padding: 15px 10px;
      color: #ffffff;
  }
  .left_title:hover{
      cursor: pointer;
  }
  
  
  /*新增 modify by william 20240823*/
  .index_product_list:hover{
      cursor:pointer;
  }
  .index_product_list a{
      display: block;
      width: 100%;
      height: 100%;
  }

  /*/////////////////////////////////////////////////////////*/
/*-------pdf 20241125--------*/
/*/////////////////////////////////////////////////////////*/

.pdf_Bg{
	/* position: relative;
	padding-top: 80%; */
}
	.pdf_Bg .pdf-viewer{
		width: 100%;
	}
		.pdf_Bg .pdf-viewer canvas{
			width: 100%;
           
		}



.pdf_Bg embed{
	/* position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover; */
}

@media (max-width: 990px) {
	.pdf_Bg embed{
		/* height: 450px !important; */
	}
}