/******電腦版樣式******/
@media screen and (min-width: 1024px){
	html{
		margin: 0;
		padding: 0; 
	}
	body{
		font-family: "微軟正黑體",  "sans-serif";
		color: #2b2b2b;
	}
	.Header_Desktop{
		display:block;
	}
	.Header_Mobile{
		display:none;
	}
	.Footer_Desktop{
		display:block;
	}
	.Footer_Mobile{
		display:none;
	}
	.H1Tag{
		display:inline;
		font-size:16px;
		color:#959393
	}
	.topmenuTD {
		border:1px solid #e3e3e3; 
		border-bottom-style:dashed; 
		padding-top:5px; 
		padding-bottom:5px;
	}
	.topmenu {
		font-family: Arial, Helvetica, sans - serif;
		font-size: 14px;
		color: #4f4f4f;
		text-align:center;
		vertical-align:middle;
		text-decoration:none;
		padding:7px
	}
	a.topmenu:link{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#4f4f4f;
		text-align:center;
		vertical-align:middle;
		text-decoration:none;
		padding:7px
	}
	a.topmenu:visited {
		font-family:Arial,Helvetica,sans - serif;
		font-size:14px;
		color:#4f4f4f;
		text-align:center;
		vertical-align:middle;
		text-decoration:none;
		padding:7px
	}
	a.topmenu:active{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;color:#4f4f4f;
		text-align:center;
		vertical-align:middle;
		text-decoration:none;
		padding:7px
	}
	a.topmenu:hover{
		color:#a53f53;
		text-decoration:underline;
		padding:7px
	}
	.content {
		color:#383838
	}
	a.content:link{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#5b5b5b;
		text-align:center;
		vertical-align:middle;
		text-decoration:none
	}
	a.content:visited{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#5b5b5b;
		text-align:center;
		vertical-align:middle;
		text-decoration:none
	}
	a.content:active{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#5b5b5b;
		text-align:center;
		vertical-align:middle;
		text-decoration:none
	}
	a.content:hover{
		color:#8A8A8A;
		font-size:14px;
		text-decoration:underline
	}
	.SearchFormTable{

	}
	.SelectElement{
		background-color:#ffffff;
	}
	.btnGreen{
		font-size:20px;
		font-weight:bold;
		color:#ffffff;
		padding-top:20px;
		padding-bottom:20px;
		width:200px;
		background-color:#4CAF50;
	}
	.menu_left{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		height:40px;
		color:#ffffff;
		vertical-align:middle;
		background-color:#ffffff;
	}
	a.menu_left:link{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#745656;
		vertical-align:middle;
		text-decoration:none
	}
	a.menu_left:visited{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#745656;
		vertical-align:middle;
		text-decoration:none
	}
	a.menu_left:active{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#745656;
		vertical-align:middle;
		text-decoration:none
	}
	a.menu_left:hover{
		color:#a53f53;
		text-decoration:underline
	}
	.menu_left_gray{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		height:40px;
		color:#745656;
		vertical-align:middle;
		background-color:#edecec;
		text-decoration:none
	}
	a.menu_left_gray:link{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#745656;
		vertical-align:middle;
		text-decoration:none
	}
	a.menu_left_gray:visited{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#745656;
		vertical-align:middle;
		text-decoration:none
	}
	a.menu_left_gray:active{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		color:#745656;
		vertical-align:middle;
		text-decoration:none
	}
	a.menu_left_gray:hover{
		color:#a53f53;
		text-decoration:underline
	}
	.prd_nameDiv{
		width:250px;
		height:26px;
		text-align:left;
		overflow:hidden;
		margin-bottom:10px;
	}
	.prd_name{
		font-family:Arial,Helvetica,sans-serif;
		font-size:16px;font-weight:400;
		line-height:16px;color:#383838;
		text-align:left;padding:5px 0px 0px 0px
	}
	a.prd_name:link{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		font-weight:400;
		color:#5b5b5b;text-align:left;
		vertical-align:middle;text-decoration:none
	}
	a.prd_name:visited{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;font-weight:400;
		color:#5b5b5b;text-align:left;
		vertical-align:middle;
		text-decoration:none
	}
	a.prd_name:active{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;
		font-weight:400;
		color:#5b5b5b;
		text-align:left;
		vertical-align:middle;text-decoration:none
	}
	a.prd_name:hover{
		color:#8A8A8A;
		text-decoration:underline
	}
	.DispatchBox{
	
	}
	.ProdNameBox{
		width:400px;
		height:20px;
		text-align:left;
		overflow:hidden;
	}
	.ProdNameBox1{
		width:300px;
		height:20px;
		text-align:left;
		overflow:hidden;
	}
	.prize{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:16px;color:#e03243;padding:0 0 0 5px
	}
	a.prize:link{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#e03243;text-align:center;vertical-align:middle;text-decoration:underline
	}
	a.prize:visited{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#e03243;text-align:center;vertical-align:middle;text-decoration:underline
	}
	a.prize:active{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#e03243;text-align:center;vertical-align:middle;text-decoration:underline
	}
	a.prize:hover{
		color:#f17682;text-decoration:underline
	}
	
	#DeskMenu{
		display:block;
	}
	.PromoProd {
		width:260px;
		height:260px;
	}
	.ProdListDesk{
		display:block;	
	}
	.ProdListMobile{
		display:none;
	}
	.ProdListPic {
		width:390px;
		height:390px;
	}
	.ProdListPic1 {
		width:300px;
		height:300px;
	}
	.DeliverTypeStyle{
		display:inline
	}
	
	.DisplaySwitchMobile{
		display:none;
	}
	.DisplaySwitchDesk{
		display:block;
	}

	.outerBox{
		border:1px solid #ccc;
		text-align:left;
		background-color:#FFF
	}
	.HomeADPicture{
		width:816px;
		height:auto;
	}
	.tablehead {
		background-color: #777777;
		height:25px;
		font-size: 14px;
		color:#ffffff;
	}
	.td_orange {
		border:#E5950F 1px solid;
		vertical-align: middle;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
	} 
	.td_gray {
		border:#848484 1px solid;
		vertical-align: middle;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
	} 
	.td05 {
		vertical-align: middle;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #5b5b5b;
	} 
	.td05_S {
		vertical-align: top;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #5b5b5b;
	} 

	/* 產品頁xa.asp顯示圖片窗 2026-02-24 */
	/* The Modal (background) */
	.modal {
		display: none;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		max-height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		align-items: center;
		justify-content: center;
		transition: opacity 0.5s ease;
	}

	/* Modal content (image) */
	.modal-content {
		position: relative;
		width:200px;
		height:200px;
		max-height: 95%;
		border-radius: 5px;
		overflow: hidden;
		animation: zoomIn 0.5s;
	}

	@keyframes zoomIn {
		from {transform: scale(0.6);}
		to {transform: scale(1);}
	}

	.modal.show {
		display: flex;
		opacity: 1;
	}
	
	/* Close button */
	.close {
		position: absolute;
		z-index: 1100;
		top: 10px;
		right: 15px;
		color: #ffffff;
		font-size: 35px;
		font-weight: bold;
		cursor: pointer;
		transition: transform 0.3s;
	}
}

/*******手機樣式******/
@media screen and (max-width: 1024px){
	body{
		font-family: "微軟正黑體",  "sans-serif";
		color: #2b2b2b;
	}
	input{
		border-color:#999;
	}
	.Header_Desktop{
		display:none;
	}
	.Header_Mobile{
		display:block;
	}
	.Footer_Desktop{
		display:none;
	}
	.Footer_Mobile{
		display:block;
	}
	.H1Tag{
		display:inline;
		font-size:16px;
		color:#959393;
	}
	.topmenu {
		font-size:12px;
		width:70px;
		border:solid 1px #444444;
		border-radius:3px;
		color:#444444;
		text-decoration:none;
		padding:3px 5px 3px 5px;
	}
	.content {
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		line-height:16px;
		color:#5b5b5b;
		vertical-align:middle;
		text-decoration:none;
	}
	a.content:link{
		color:#5b5b5b;
		text-align:center;
	}
	a.content:visited{
		color:#5b5b5b;
		text-align:center;
		vertical-align:middle;
		text-decoration:none
	}
	a.content:active{
		color:#5b5b5b;
		text-align:center;
		vertical-align:middle;
		text-decoration:none
	}
	a.content:hover{
		color:#8A8A8A;
		font-size:14px;
		text-decoration:underline
	}
	.content_info{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		line-height:16px;
		color:#e5004a
	}
	.SearchFormTable{
		padding:4px;
	}
	.SelectElement{
		background-color:#ffffff;
	}
	.btnGreen{
		font-size:20px;
		font-weight:bold;
		color:#ffffff;
		padding-top:20px;
		padding-bottom:20px;
		width:200px;
		background-color:#4CAF50;
	}

	.CatalogStyle{
		position:fixed;
		width:100%;
		height:100%;
		z-index:99;
		top:180px;
		display:none;
		-webkit-overflow-scrolling: touch;  
		overflow-y: scroll;  
	}

	.CatalogStyle iframe{
		height:90%;
		width:85%;
	}
	.ClassStyle{
		position:fixed;
		width:100%;
		height:100%;
		z-index:99;
		top:180px;
		display:none;
		-webkit-overflow-scrolling: touch;  
		overflow-y: scroll;  
	}

	.ClassStyle iframe{
		height:90%;
		width:85%;
	}
	.prd_nameDiv{
		height:50px; text-align:left;
	}
	.prd_name{
		font-family:Arial,Helvetica,sans-serif;
		font-size:16px;
		font-weight:400;
		line-height:16px;
		color:#383838;
		text-align:left;
		padding:5px 0px 0px 0px;
		text-decoration:none
	}
	a.prd_name:link{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;

		font-weight:400;
		color:#5b5b5b;
		text-align:left;
		vertical-align:middle;
		text-decoration:none
	}
	a.prd_name:visited{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		font-weight:400;
		color:#5b5b5b;text-align:left;
		vertical-align:middle;
		text-decoration:none
	}
	a.prd_name:active{
		font-family:Arial,Helvetica,sans-serif;
		font-size:14px;
		font-weight:400;
		color:#5b5b5b;
		text-align:left;
		vertical-align:middle;
		text-decoration:none
	}
	a.prd_name:hover{
		color:#8A8A8A;
		text-decoration:underline
	}
	.DispatchBox{
		max-width:200px;
	}
	.ProdNameBox{
		width:160px;
		height:70px;
		text-align:left;
	}

	.prize{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:16px;color:#e03243;padding:0 0 0 5px
	}
	a.prize:link{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#e03243;text-align:center;vertical-align:middle;text-decoration:underline
	}
	a.prize:visited{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#e03243;text-align:center;vertical-align:middle;text-decoration:underline
	}
	a.prize:active{
		font-family:Arial,Helvetica,sans-serif;font-size:14px;color:#e03243;text-align:center;vertical-align:middle;text-decoration:underline
	}
	a.prize:hover{
		color:#f17682;text-decoration:underline
	}
	#DeskMenu{
		display:none;
	}
	.PromoProd {
		width:180px;
		height:180px;
	}
	/*搜尋商品列表區塊桌機版*/
	.ProdListDesk{
		display:none;	
	}
	/*搜尋商品列表區塊手機版*/
	.ProdListMobile{
		display:block;
	}
	.ProdListPic {
		width:180px;
		height:180px;
	}
	.ProdListPic1 {
		width:180px;
		height:180px;
	}
	.DeliverTypeStyle{
		display:block;
	}
	
	.DisplaySwitchMobile{
		display:block;
	}
	.DisplaySwitchDesk{
		display:none;
	}

	.btn-group .button {
	background-color: #4CAF50;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	cursor: pointer;
	float: left;
	}

	.btn-group .button:hover {
		background-color: #3e8e41;
	} 
	.HomeADPicture{
		width:100%;
		height:auto;
	}
	.tablehead {
		background-color: #777777;
		height:25px;
		font-size: 14px;
		color:#ffffff;
	}
	.td_orange {
		border:#E5950F 1px solid;
		vertical-align: middle;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
	} 
	.td_gray {
		border:#848484 1px solid;
		vertical-align: middle;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
	} 
	.td05 {
		vertical-align: middle;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #5b5b5b;
	} 
	.td05_S {
		vertical-align: top;padding:5px 5px 5px 5px;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 16px;
		color: #5b5b5b;
	} 
	/* 產品頁xa.asp顯示圖片窗 2026-02-24 */
	/* The Modal (background) */
	.modal {
		display: none;
		position: fixed;
		z-index: 1000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		align-items: center;
		justify-content: center;
		transition: opacity 0.5s ease;
	}

	/* Modal content (image) */
	.modal-content {
		position: relative;
		width:200px;
		height:200px;
		max-width: 95%;
		border-radius: 5px;
		overflow: hidden;
		animation: zoomIn 0.5s;
	}

	@keyframes zoomIn {
		from {transform: scale(0.6);}
		to {transform: scale(1);}
	}

	.modal.show {
		display: flex;
		opacity: 1;
	}
	
	/* Close button */
	.close {
		position: absolute;
		background-color:#333333;
		z-index: 1100;
		top: 10px;
		right: 15px;
		color: #ffffff;
		font-size: 35px;
		font-weight: bold;
		cursor: pointer;
		transition: transform 0.3s;
	}
}