@import url(../style_tab/style_tab.css);
/*產品內頁 padding調整*/
.pageContent.product{
	padding: 0px 0px;
	position: relative;
}
	

	/*產品上方區塊 分左側輪播+小圖 右側產品介紹*/
	.productIn_topArea {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
			
		

			
			/*產品名*/
			.productIn_detail{
				position: relative;
				display: flex;
				flex-direction: column;
				gap: clamp(0.625rem, 0.7813vw, 0.9375rem); /* 10px , 0.7813vw , 15px */
			}
			
				/*產品品牌名*/
				.productIn_brandName{
					/* padding: 0 0 15px; */
					padding: 0;
					/* padding-bottom: 0.9375rem; */ /*15*/
					word-wrap: break-word;
					word-break: break-all;
				}
				.productIn_brandName a{
					font-size: clamp(1.25rem, 1.3542vw, 1.625rem); /* 20px , 1.3542vw , 26px */
					color: inherit;
					font-weight: bold;
					text-decoration: none;
					display: block;
					cursor: unset;
				}

				/*產品中文名*/
				.productIn_nameTW{
					/* font-size: 22px; */
					color: #000;
				}

				/*產品英文名*/
				.productIn_nameEN{
					/* font-size: 18px; */
					color: inherit;
					padding: 0;
					font-family: var(--foreign_font);
					/* display: none; */
					font-size: inherit;
				}
				.productIn_title{
					padding: 0;
					font-size: 1rem;
					color: inherit;
					font-weight: 700;
				}
				.productIn_title span{
					font-weight: 400;
					line-height: 1.5;
				}
				.productIn_title a{
					text-decoration: none;
					color: #fff;
					background-color: var(--primary_color);
					padding: 10px;
					display: inline-block;
					border-radius: 3px;
					font-weight: 400;
					font-size: 16px;
				}


/*商品內頁圖片區*/
/*-------↓↓↓↓↓↓↓--------------Judy修改20220704-------↓↓↓↓↓↓↓--------------*/	
/* 最外層 */
.product_imgArea{
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.product_imgArea .swiper {
	width: 100%;
	height: 100%;
  }

  .product_imgArea .swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;

	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
  }

  .product_imgArea .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

  
  .product_imgArea .swiper {
	width: 100%;
	/* height: 300px;
	margin-left: auto;
	margin-right: auto; */
  }

  .product_imgArea .swiper-slide {
	background-size: cover;
	background-position: center;
  }

  /* 大圖 */
  .product_imgArea .mySwiper2 {
	/* height: 80%;
	width: 100%; */

	max-width: calc(100% - 78px);
	width: 100%;
	height: 100%;
  }

  /* 小圖 */
  .product_imgArea .mySwiper {
	/* height: 20%; */
	box-sizing: border-box;
	padding: 10px 0;

	padding: 0;
	width: 78px;
	height: calc(72px * 8);
  }
  
  .product_imgArea .mySwiper .swiper-slide {
	/* width: 25%; */
	/* height: 100%; */
	opacity: 1;

	width: 100%;
	align-items: flex-start;
	height: auto !important;
  }
  .product_imgArea .mySwiper .swiper-slide-thumb-active {
	opacity: 1;
  }

  .product_imgArea .swiper-slide img {
	/* display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; */
	max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
	width:100%;
	height:auto;
	transition: all 0.3s ease-out;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	float: none;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	transition: all 0.3s ease-out;
  }
	


		/*輪播箭頭樣式調整*/
		.prevArea{
			 position: absolute;
			width: 10%;
			top: 0;
			height: 100%;		
			z-index: 13;
			/*background:rgba(255,255,255,0.5); */			
		}
		.prevArea:hover{
			 cursor: pointer;
			/*background:rgba(255,255,255,0.7); */
			transition: 0.3s ease all;
		}
		.prevArea > .swiper-button-prev{
			left: 0%;
			top: 50%;
		}

		.nextArea{
			position: absolute;
			width: 10%;
			right: 0;
			top: 0;
			height: 100%;
			/* background:rgba(255,255,255,0.5); */
			z-index: 13;			
		}
		.nextArea:hover{
			cursor: pointer;
			/* background:rgba(255,255,255,0.7); */
			transition: 0.3s ease all;
		}
		.nextArea > .swiper-button-next{
			right: 0%; 
		}

		
		@media (max-width: 1280px){
			  /* 小圖 */
			.product_imgArea .mySwiper {
				height: calc(72px * 5);
			}
		}
	@media(max-width:990px){
			/*產品上方區塊 分左側輪播+小圖 右側產品介紹*/
			.productIn_topArea {
				display: flex;
				flex-direction: column;
				gap: clamp(.625rem,1.0417vw,1.25rem);
				
			}
			/* 左側區塊 */
			.productTop_leftArea{
				width: 100%;
			}

			

		/* 最外層 */
		.product_imgArea{
			display: flex;
			flex-direction: column;
			
			
		}
			
			/* 小圖 */
			.product_imgArea .mySwiper {
				height: unset;
				width: 100%;
			}
		.product_imgArea .mySwiper2 .swiper-slide img {
			width: 100%;
		  }
	}
/* 圖片樣式------------------- */
.product_imgList{	
	overflow: hidden;
	width: 100%;
}
	.product_imgList a{	
		display: block;
		text-decoration: none;
		position: relative;
		padding-top: 100%;
	}
		.product_imgList img{
			/* position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			float: none;
			width: 100% !important;
			height: 100% !important;
			object-fit: cover;
			transition: 0.3s ease all;	 */
			max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
		}

/* 圖片當前樣式------------------- */
.smallProductImg .swiper-slide-thumb-active .product_imgList{
    border: 1px #000 solid;
}

/* 輪播左右鍵------------------- */
/* .big_imgArea .swiper-button-prev {
	position: absolute;
	top: 52%;
	margin: 0px;
	width: 25px;
	height: 25px;
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-transform: translateY(-50%);	
	border-radius: 50%;
}
.big_imgArea .swiper-button-next {
	position: absolute;
	top: 50%;
	margin: 0px;
	width: 25px;
	height: 25px;
	background-size: 25px;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-transform: translateY(-50%);	
	border-radius: 50%;
} */


.big_imgArea .swiper-button-prev{		
	/* background-image: url(../images/left_arrow.png);
	left: 18px; */
	/* background-image: none;
	content: '\F284';
	left: 18px; */
}
.big_imgArea .swiper-button-next{
	/* background-image: url(../images/left_arrow.png);
	right: 18px;
	transform: rotate(180deg); */
	/* background-image: none;
	content: '\F285';
    right: 18px;
    transform: rotate(180deg); */
}	
.big_imgArea .swiper-button-prev ,
.big_imgArea .swiper-button-next{
	position: relative;
    background-image: none;
    top: 50%;
    left: unset;
    right: unset;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
}
.big_imgArea .swiper-button-prev:before ,
.big_imgArea .swiper-button-next:before{
	position: absolute;
	font-family: 'Bootstrap-icons';
    font-size: 25px;
	top: 50%;
    left: 50%;
    color: #000;
    -webkit-transform: translate(-50% , -50%);
    transform:translate(-50% , -50%);
}

.big_imgArea .swiper-button-prev:before{		
    content: '\F284';    
}
.big_imgArea .swiper-button-next:before{
	content: '\F285';
}
/* =============================== */
/* 分享列表 */
/* =============================== */
/* -------------分享區塊------------------- */
.share_bg{
	padding-top: 20px;
}
	.share_bg .in{

	}
	
		/* 標題 */
		.share_bg .title{
			display: inline-block;
			vertical-align: middle;
			padding-right: 5px;
			font-size: 15px;
			/* font-weight: bold; */
		}
	
		/* 內容 */
		.share_bg .content{
			display: inline-block;
			vertical-align: middle;
		}
		
			.share_bg .list_area{
				margin: 0px -5px;
			}
				.share_bg .list{
					float: left;
					box-sizing: border-box;
					width: 45px;
					padding: 0px 5px;
				}
					.share_bg .list a{
						display: block;
						box-sizing: border-box;
						padding: 7px;
						border-radius: 30px;
						transition: 0.2s ease all;
						background-color: #000000;
					}
					/* hover */
					.share_bg .list a:hover{
						opacity: 0.7;
						transition: 0.2s ease all;
					}
					
					/* line */
					.share_bg .list.line a{
						/* background-color: #00b900; */
					}
					
					/* fb */
					.share_bg .list.fb a{
						/* background-color: #3b5998; */
					}
					
					/* link */
					.share_bg .list.link a{
						/* background-color: #555555; */
					}


						.share_bg .list img{
							width: 100%;
							height: auto;
						}

				/* 收藏愛心 */
				.favorite_heart {
					position: absolute;
					top: 16px;
					right: 42%;
					/* right: 22px;
					top: 15px; */
				}
				.favorite_heart.top{
					top: 0;
				}
					.favorite_heart a {
						display: block;
						text-decoration: none;
					}

						.favorite_heart i {
							font-size: 22px;
						}

						.favorite_heart i.before {
							color: #000;
						}

						.favorite_heart i.after {
							display: none;
							color: #E10005;
						}


						/* hover */
						.favorite_heart:hover i.before {
							display: none;
						}
						.favorite_heart:hover i.after {
							display: block;
						}

						/* active */
						.favorite_heart.active i.before {
							display: none;
						}
						.favorite_heart.active i.after {
							display: block;
						}

				/* 商品內頁右側 */
				/*價格區塊*/
				.productIn_priceArea{
					padding:10px 0;
				}
				
					/*會員價格*/
					.productIn_menberPrice{
						float: left;
						box-sizing: border-box;
						font-size: 20px;
						font-weight: bold;
						font-family: var(--foreign_foreign);
					}
					
					/*原始售價*/
					.productIn_price{
						float: left;
						box-sizing: border-box;
						padding: 2px 0px 0px 20px;
						text-decoration: line-through;
						font-family: var(--foreign_foreign);
						font-size: 15px;
						color: #888888;
						font-family: inherit;
						/* font-family: andy-money,Noto Sans TC,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; */
					}
				/* 數量 */
				.product_buyBg .quantity{
					/* display: table;
					display: inline-block; */
					width: 100%; 
					/* width: 25%; */
					height: 42px;
					border: 1px solid #000;
					box-sizing: border-box;
					position: relative;
				}

				.product_buyBg .quantity .content {
					/* padding-left: 60px; */
				}
					.product_buyBg .select .content_in {
						width: 100%;
						box-sizing: border-box;

						position: relative;
					}
						.product_buyBg .quantity_decrease{
							display: table-cell;
							vertical-align: middle;
							padding: 5px 10px;
							box-sizing: border-box;

							font-size: 14px;
							text-align: center;
							cursor: pointer;
							color: #AEAEAE;
							
							height: 42px;

							/* background-color: #cccccc;
							color: #ffffff;
							font-weight: bold;
							border: 1px solid #cccccc;
							border-top-left-radius: 3px;
							border-bottom-left-radius: 3px; */
						}
						td.cart_quantity.product_buyBg .quantity_decrease{
							
						}

						.product_buyBg .quantity_content {
							display: table-cell;
							vertical-align: middle;
							box-sizing: border-box;
							/* border: 1px solid #cccccc; */
							width: 100%;
							height: 36px;
						}
							.product_buyBg .quantity_content input{
								/* padding: 0 20px; */
								box-sizing: border-box;
								height: 36px;

								font-size: 16px;
								text-align: center;
								color: #000000;
								background-color: #ffffff;
								border: 0;
								border-radius: 0;
								cursor: pointer;

								/* modify by pekey 20221011 */
								padding: 0;
							}

						.product_buyBg .quantity_increase{
							display: table-cell;
							vertical-align: middle;
							padding: 5px 10px;
							box-sizing: border-box;
							
							font-size: 14px;
							text-align: center;
							cursor: pointer;
							color: #AEAEAE;
							
							height: 42px;

							/* background-color: #cccccc;
							color: #ffffff;
							font-weight: bold;
							border: 1px solid #cccccc;
							border-top-right-radius: 3px;
							border-bottom-right-radius: 3px; */
						}
						/*購物車按鈕*/
				.product_buyBg .button{
					/* padding-left: 15px;
					width: 75%; */

					/* modify by pekey 20221011 */
					box-sizing: border-box;

					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin: 0px -5px;
					padding-top: 5px;
				} 
				.product_buyBg .button .add_button , 
				.product_buyBg .button .buy_button , 
				.product_buyBg .button .soldout_button  ,
				.product_buyBg .button .commodity_button  ,
				.product_buyBg .button .collect_button {
					width: 50%; 
					padding: 5px 5px;
					box-sizing: border-box;
				}
				.product_buyBg .button .add_button input, 
				.product_buyBg .button .buy_button input, 
				.product_buyBg .button .soldout_button input ,
				.product_buyBg .button .commodity_button input ,
				.product_buyBg .button .collect_button input{
					box-sizing: border-box;
					border-radius: 3px;
					width: 100%;
					color: #fff;
					font-size: 14px;
					padding: 0 10px;
				}

				.product_buyBg .button .add_button:hover input, 
				.product_buyBg .button .buy_button:hover input, 
				.product_buyBg .button .soldout_button:hover input ,
				.product_buyBg .button .commodity_button:hover input ,
				.product_buyBg .button .collect_button:hover input {
					background-color: #A0A0A0;
				}



					/* 加入購物車_button */
					.add_button [type="submit"]{
						background-color: #000;					
					}
					/* 立即購買_button */
					.button .buy_button input{
						background-color: #E10005;
						/* color: #ffffff; */
					}
					/* 售完補貨中_button */
					.button .soldout_button input {
						background-color: #dbdbdb;
						cursor: auto;
					}
					/* 到貨通知_button */
					.button .commodity_button input{
						background-color: #515151;
						border-color: #515151;
						color: #ffffff;
					}
					/* 到貨通知_button */
					.button .collect_button input{ 
						/* background-color: #ffffff;
						border-color: #c1272d;
						border: solid 1px #c1272d;
						color: #c1272d; */
					}

/* =============================== */
/* 商品下側 */
/* =============================== */
.product_bottom{
	margin-top: clamp(.625rem,1.0417vw,1.25rem);
}

/* 產品內頁_左半部區塊 */
		.product_leftArea{
			float: left;
			/* width: 56%; */
			width: 40%;
			box-sizing: border-box;
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
			column-gap: 10px;
			display: grid;
			/* grid-template-columns: 140px auto; */
			grid-template-columns: 1fr  4.26fr;
		}
			

		.product_leftArea .swiper {
			width: 100%;
			height: 100%;
		  }
	
		  .product_leftArea .swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
	
			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		  }
	
		  .product_leftArea .swiper-slide img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		  }
	
		  
		  .product_leftArea .swiper {
			width: 100%;
			height: 300px;
			margin-left: auto;
			margin-right: auto;
			margin: 0;
			}
	
		  .product_leftArea .swiper-slide {
			background-size: cover;
			background-position: center;
			background: transparent;
			}
	
		  .product_leftArea .mySwiper2 {
			/* height: 80%; */
			/* width: 100%; */
			width: 100%;
			height: auto;
			}
	
		  .product_leftArea .mySwiper {
			/* height: 20%; */
			box-sizing: border-box;
			/* padding: 10px 0; */
			/* width: 20%; */
			/* height: auto; */
			/* width: 140px; */
			/* min-height: calc(150px * 4); */
			aspect-ratio: 1 / 4.28;
			height: 100%;
			height: fit-content;
			order: -1;
			}
	
		  .product_leftArea .mySwiper .swiper-slide {
			/* width: 25%; */
			height: 100%;
			opacity: 0.4;
			width: 100%;
			}
	
		  .product_leftArea .mySwiper .swiper-slide-thumb-active {
			opacity: 1;
		  }
	
		  /* 大圖列表 */
					.bigProduct_img {
						width: 100%;
						background-color: transparent;
					}
                    .bigProduct_img a{
						position: relative;
						/* padding-top: 100%; */
						/* border-radius: 10px; */
						aspect-ratio: 210 / 297;
						overflow: hidden;
						width: 100%;
						display: block;
						background-color: transparent;
					}
						#big_img1 {
							display:block;
						}
						.product_leftArea .swiper-slide img {
							display: block;
							width: 100%;
							height: 100%;
							object-fit: cover;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							float: none;
							width: 100% !important;
							height: 100% !important;
							object-fit: cover;
							transition: 0.3s ease all;
							/* background-color: transparent; */
						}


					/* 小圖區塊 */
					.product_leftArea .smallProduct_img{
						position: relative;
						/* padding-top: 100%; */
						/* border-radius: 5px; */
						overflow: hidden;
						width: 100%;
						/* margin: 0px;
						padding: 10px 15px 0px 15px; */
						
					}
						.product_leftArea .smallProduct_img a{
							display: block;
							padding: 50% 0;
							width: 100%;
							/* aspect-ratio: 210 / 297; */
						}
							.product_leftArea .smallProduct_img img {
								position: absolute;
								top: 0;
								left: 0;
								bottom: 0;
								right: 0;
								float: none;
								width: 100% !important;
								height: 100% !important;
								object-fit: cover;
								transition: 0.3s ease all;
							}





		  /* 左右鍵 */
		  .product_leftArea .swiper-button-prev, 
		  .product_leftArea .swiper-button-next {
			  width: 1.875rem;  /*30px*/
			  height: auto;  /*30px*/
			  width: clamp(1.875rem, 3.125vw, 3.75rem);  /* 最小值 30px、大小約 3.125vw、最大值 60px*/
			  height: auto;
			  aspect-ratio: 1 / 1;
			  /* background-size: 1.875rem; */  /*30px*/
			  /* background-size: 99%; */
			  background-position: center;
			  background-repeat: no-repeat;
			  background-color: rgb(255 255 255 / 70%);
			  border-radius: 50%;
			 }
		  .product_leftArea .swiper-button-prev{
			/* left: 0.625rem; */
			left: 0;
			/* background-image:url(../../../images/roundbutton_left.svg); */
		  }
		  .product_leftArea .swiper-button-next{
			/* right: 0.625rem; */
			right: 10px;
			/* background-image:url(../../../images/roundbutton_right.svg); */
			/* background-image:url(../index/images/right_arrow2.png); */
		  }

		  .product_leftArea .swiper-button-next:after, 
		  .product_leftArea .swiper-button-prev:after{
			display: none;
		}
		/*右側產品介紹區塊*/
		.productTop_rightArea{
			width: 55%;
			color: var(--dark_color);
			box-sizing: border-box;
		}
		
		@media (max-width: 990px){
			.product_leftArea{
				width: 100%;
			}
			/*右側產品介紹區塊*/
			.productTop_rightArea{
				width: 100%;
				padding-top: 1.5625rem;
			}
			.favorite_heart {
				position: absolute;
				top: 16px;
				right: 0%;
			}
		}

















/* =============================== */
/* 紀念品按鈕 */
/* =============================== */
/*購物車按鈕*/
				.product_buyBg .button{
					/* padding-left: 15px;
					width: 75%; */

					/* modify by pekey 20221011 */
					box-sizing: border-box;

					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin: 0px -5px;
					padding-top: 5px;
				} 
				.product_buyBg .button .add_button , 
				.product_buyBg .button .buy_button , 
				.product_buyBg .button .soldout_button  ,
				.product_buyBg .button .commodity_button  ,
				.product_buyBg .button .collect_button {
					width: 33.3%; 
					padding: 5px 5px;
					box-sizing: border-box;
				}
				.product_buyBg .button .add_button input, 
				.product_buyBg .button .buy_button input, 
				.product_buyBg .button .soldout_button input ,
				.product_buyBg .button .commodity_button input ,
				.product_buyBg .button .collect_button input{
					box-sizing: border-box;
					border-radius: 3px;
					width: 100%;
					color: #fff;
					font-size: 14px;
					padding: 0 10px;
				}

				.product_buyBg .button .add_button:hover input, 
				.product_buyBg .button .buy_button:hover input, 
				.product_buyBg .button .soldout_button:hover input ,
				.product_buyBg .button .commodity_button:hover input ,
				.product_buyBg .button .collect_button:hover input {
					background-color: #A0A0A0;
				}



					/* 加入購物車_button */
					.add_button [type="submit"]{
						background-color: var(--second_color);				
					}
					
					/* 售完補貨中_button */
					.button .soldout_button input {
						background-color: #dbdbdb;
						cursor: auto;
					}
					/* 到貨通知_button */
					.button .commodity_button input{
						background-color: #515151;
						border-color: #515151;
						color: #ffffff;
					}
					/* 到貨通知_button */
					.button .collect_button input{ 
						/* background-color: #ffffff;
						border-color: #c1272d;
						border: solid 1px #c1272d;
						color: #c1272d; */
					}