/*202003 by pekey*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Reset 開始-------------------------------*/



/*/////////////////////////////////////////////////////////*/
/*-------主內容區塊--------*/
/*/////////////////////////////////////////////////////////*/

.main.home_main{
	
}

	/*首頁內容區塊*/	
	.mainContent{
		
	}

	
@media (max-width: 1023px){
	
	.main {
		
	}	
}


/*///////////////////////////*/
/*------- 廣告圖區塊 --------*/
/*///////////////////////////*/
.ad_mainBg {
}

	/* 列表區塊 */
	.ad_mainBg .list_area{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-items: flex-start;
		margin: 0 -12px;
		padding: 24px 0 0 ;
	}

	.ad_mainBg .list {
		width: 33.3%;
		box-sizing: border-box;
		padding: 0px 12px 24px;
	}
		.ad_mainBg .list a {
			display: block;
			text-decoration: none;
		}
		
		.ad_mainBg .list a:hover {
			transition:0.3s ease all;
			opacity: 0.7;
		}
			.ad_mainBg .list a img {
				width: 100%;
				height: auto;
			}
			
			
@media (max-width: 767px){

	.ad_mainBg .list_area{
		margin: 0 -4px;
		padding: 8px 0 0;
	}
		.ad_mainBg .list {
			width: 50%;
			padding: 0px 4px 8px;
		}
}




/*///////////////////////////*/
/*------- 產品區塊 --------*/
/*///////////////////////////*/
.product_mainBg{
	margin: 0 0 50px;
}


/*商品上方選單*/
.product_mainBg .tag_listArea{
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    margin: 50px 0 0;
}
	.product_mainBg .tag_listArea .list{
		box-sizing:border-box;
		text-align:center;
	} 
		.product_mainBg .tag_listArea .list a{
			display:block;
			text-decoration:none;
			background-color: #888888;
    		padding: 10px 12px;
			font-size: 16px;
			line-height: 24px;
			color:#fff;
		}  
		
		/* active */
		.product_mainBg .tag_listArea .list.active a {
			background-color: #bdbdbd;
		}	 

		/* hover */
		.product_mainBg .tag_listArea .list a:hover{
			transition: all 0.3s ease-out;
			background-color: #404040;
			opacity:0.5;
		} 		


@media (max-width: 769px){

	/*商品上方選單*/
	.product_mainBg .tag_listArea {
		margin: 30px 0 0;
	}
		.product_mainBg .tag_listArea .list a{
			padding: 8px 10px;
			font-size: 14px;
			line-height: 20px;
		}    
}


@media (max-width: 641px){
	.product_mainBg .tag_listArea .list {
		width: 25%;
	}   
		.product_mainBg .tag_listArea .list a{
			padding: 8px 4px;
		}    
} 



/* 產品列表區塊		 */
.product_mainBg .prodict_listArea.B_type{
	margin: 0px -10px;
}

	/* 列表 */
	.product_mainBg .prodict_list.B_type{
		padding: 15px 10px;
	}


		/* 品名 */
		.product_mainBg .prodict_list .name a{
			font-size: 22px;
			line-height: 28px;
			font-weight: normal;
		}


		.product_mainBg .prodict_list.B_type .price{
			text-align: right;
		}
			.product_mainBg .prodict_list.B_type .price .content{
				float: none;
				padding-top: 15px;
			}

				/* 會員價.優惠價 */
				.product_mainBg .prodict_list.B_type .member_price{
					font-size: 22px;
					line-height: 28px;
					padding-right: 0;
					float: none;
				}

				/* 原價 */
				.product_mainBg .prodict_list.B_type .orignal_price{
					font-size: 18px;
					line-height: 24px;
					float: none;
				}

				
			
@media (max-width: 769px){

.product_mainBg .prodict_listArea.B_type{
	margin: 0px -4px;
}

	/* 列表 */
	.product_mainBg .prodict_list.B_type{
		padding: 15px 4px;
	}

	/* 品名 */
	.product_mainBg .prodict_list .name a{
		font-size: 18px;
		line-height: 24px;
	}

		.product_mainBg .prodict_list.B_type .price .content{
			padding-top: 10px;
		}

			/* 會員價.優惠價 */
			.product_mainBg .prodict_list.B_type .member_price{
				font-size: 18px;
				line-height: 24px;
			}

			/* 原價 */
			.product_mainBg .prodict_list.B_type .orignal_price{
				font-size: 14px;
				line-height: 20px;
			}

}

@media (max-width: 641px){


/* 品名 */
.product_mainBg .prodict_list .name a{
	font-size: 14px;
	line-height: 20px;
}
	.product_mainBg .prodict_list.B_type .price .content {
		padding-top: 5px;
	}

	/* 會員價.優惠價 */
	.product_mainBg .prodict_list.B_type .member_price{
		font-size: 16px;
		line-height: 22px;
	}

	/* 原價 */
	.product_mainBg .prodict_list.B_type .orignal_price{
		font-size: 14px;
		line-height: 20px;
	}
}



















/*///////////////////////////*/
/*------- 首頁網編燈箱 --------*/
/*///////////////////////////*/

.lightTextArea{	
	display: none ;
}
.lightTextArea.active{	
	display: block;
}
	.lightTextArea .lightboxMain {
		background: #fff;
		height: auto;
		/* transform: scale(0); */
	}
	.lightTextArea.active .lightboxMain {
		/* transform: scale(1); */
	}

		.lightTextArea .lightboxContentArea {
			/* height: 100%; */
			height: calc(80vh - 50px * 2);
			padding: 50px;
		}
			.lightTextArea .text_area{
				overflow-x: hidden;
				overflow-y: auto;
				max-height: 100%;
				/* max-height: calc(80vh - 50px * 2); */
				padding-right:10px;	
			}
					  
			.lightTextArea .text_area::-webkit-scrollbar {/*滾動條整體樣式*/
				width: 5px;     /*高寬分別對應橫豎滾動條的尺寸*/
				height: 1px;
			}
			.lightTextArea .text_area::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
				border-radius: 5px;
				 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				/*background: #535353;*/
				background-image: linear-gradient(to top, #afafaf 0%, #e5e5e5 100%);	
			}
			.lightTextArea .text_area::-webkit-scrollbar-track {/*滾動條裡面軌道*/
				-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
				border-radius: 5px;
				background: #EDEDED;
			}





		/*關閉燈箱按鍵*/
		.lightTextArea .lightboxCloseBtn {
			position: absolute;
			font-size: 15px;
			font-weight: bold;
			letter-spacing: 0px;
			text-align: center;
			width: 34px;
			height: 34px;
			line-height: 34px;
			color: #333;
			background: #515151;
			right: 20px;
			top: 20px;
			border: solid #515151 1px;
			box-shadow: 0px 0px 6px rgb(0 0 0 / 10%);
			cursor: pointer;
			transition: 0.3s ease all;
			display: flex;
			transition: 0.3s ease all;
		}
		.lightTextArea .lightboxCloseBtn svg{
			fill: #fff;
			width: 25px;
			height: 25px;
			margin: auto;
			transition: 0.3s ease all;
		}
			.lightTextArea .lightboxCloseBtn:hover {
				background: #71b057;
				border-color: #71b057;
				transition: 0.3s ease all;
			}
			.lightTextArea .lightboxCloseBtn:hover svg{
				fill: #333;
				transform: rotate(15deg);
				transition: 0.3s ease all;
			}







@media (max-width: 600px){	

	/*關閉燈箱按鍵*/
	.lightTextArea .lightboxCloseBtn {
		right: 0px;
		top: 0px;
	}

	
	.lightTextArea .lightboxContentArea {
		height: calc(80vh - 20px * 2);
		padding: 20px;
	}
		.lightTextArea .text_area{
			/* max-height: calc(80vh - 20px * 2); */
			padding-right:5px;	
		}

}