/* 手機（小於 768px） */
@media screen and (min-width:0px) and (max-width:768px){ 
/* 頁面基本設置 */
		html {
		  scroll-behavior: smooth;
		}        
		body {
            margin: 0;
            overflow-x: hidden;
			padding-top: 15%;
			background-color:#fcfaf6;
			font-family: 'Noto Sans TC', sans-serif;
        }

        .closecontent{
           background-color: #ffffff9c;
           padding: 1% 25% 1% 25%;
        }
		


        /* 背景圖片設置 */
        .banner {
            position: fixed;  /* 固定背景 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh; /* 使用視窗高度 */                 
            background-size: contain; /* 確保圖片完全顯示且不會被裁切 */
            background-repeat: no-repeat; /* 不重複顯示背景圖片 */
            background-position: top center; /* 圖片從頂部居中顯示 */
            z-index: -1;  /* 確保背景在內容區下層 */
        }
        .toplogo{
		width: 100%;
		max-width: 97%;
		margin: 0 auto;
		}
	    .toplogo2{
		width: 100%;
		max-width: 97%;
		margin: 5% auto 0 auto;
		}
        .top-image{
		width:100%;
		}
		.form-title-tip {
        padding: 6px 10px;
        background-color: #f0f7ff;
        border: 1px solid #d1e4ff;
        border-radius: 4px;
        color: #2b5a9b;
        font-size: 13px;
        line-height: 1.4;
        white-space: normal; /* 允許自動換行 */
        width: 60%;
        overflow-wrap: break-word;
        word-break: break-all;
		}

        /* 商品介紹區域 */
        #wrapper {
            width: 100%;
            max-width: 97%;
            margin: -7px auto;
            padding: 60px 0px 60px 0px; /* 上方留空避免與背景重疊 */
            background-color: rgba(255, 255, 255, 1); /* 透明白色背景，避免和背景圖片太過融合 */
			border-radius: 0px 0px 10px 10px; /*左上 右上*/
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
        }
		/* 商品區域 */
		#wrapper2 {
			width: 100%;
			max-width: 97%;
			margin: -5px auto;
			padding: 20px 0px 60px 0px;
			background-color: rgba(255, 255, 255, 1); /* 白色背景 */
			border-radius: 0px 0px 10px 10px;
			position: relative;  /* 確保它是父元素，並且擁有背景 */
		}

		#wrapper2::after {
			content: "";
			display: block;
			clear: both;  /* 清除浮動，防止背景顯示異常 */
		}

        .block1title{
			margin-top: -8%;
			color: #3D3934;
			font-size: 30px;
			text-align: center;
			font-family: 'Noto Sans TC', sans-serif;
			font-weight: 800; 
			padding-left: 2%;
			padding-right: 2%;
		} 
		.block1title2{
			
			color: #666666;
			font-size: 20px;
			text-align: center;
			font-family: "Montserrat-Bold", sans-serif;
			line-height: 27.6px;
			letter-spacing: 1.5px;
			font-weight: 700;
			position: relative;
			padding-top: 3%;
			padding-left: 2%;
			padding-right: 2%;
			
			/*height: 35px;
			margin: 9px 0px 26px 0px;
			padding: 0 8px 0 8px;*/
		}
		.block1title3{
		  margin: 0px 10px 20px 10px;
		  font-size:28px;
		  text-align: center;		
		  color: #3d3934;
		  text-align: center;
		  font-family: "Montserrat-Black", sans-serif;
		  line-height: 30px;
		  letter-spacing: 1.5px;
		  font-weight: 900;
		  position: relative;
		  height: 35px;		
		}
		.block1title4{
		  margin: 30px 10px 20px 10px;
		  font-size:28px;
		  text-align: center;
		  width:100%;
		  color: #3d3934;
		  text-align: center;
		  font-family: "Montserrat-Black", sans-serif;
		  line-height: 30px;
		  letter-spacing: 1.5px;
		  font-weight: 900;
		  position: relative;
		  align-self: stretch;
		  height: 35px;					
		}
		.buylist{
		width:90%;
        margin-bottom: 2%;	
		}
		.block{
		margin-top:10px;
		}
        /* 內容區域內的文本 */
        #wrapper h1 {
            font-size: 36px;
            margin-bottom: 20px;
			
        }
        
        #wrapper p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* 滾動區域 */
        .scroll-area {
            height: auto; /* 避免設置固定高度 */
        }
		
		/* 按鈕容器 */

		.button-container { 
			background-color: #F6F6F6;  
			height: 43px;  
			display: flex;
			justify-content: flex-start; /* 按鈕左對齊 */
			gap: 6%; /* 按鈕間距 */
			overflow-x: auto;  /* 允許容器在水平方向滾動 */
			padding: 10px 0;  /* 上下內邊距，讓按鈕更顯示 */
			white-space: nowrap;  /* 防止按鈕換行 */
			margin-top: 3%; 
		}

		/* 按鈕容器內的超鏈接樣式 */
		.button-container a {
			background-color: #F6F6F6;
			color: #000000;
			font-size: 18px;
			border: none;
			cursor: pointer;
			font-family: "Montserrat-Black", sans-serif;
		}

		/* 按鈕樣式 */
		.btn {
			background-color: #F6F6F6;  /* 按鈕背景顏色 */
			color: #000000;  /* 文字顏色 */
			padding: 17px 20px;  /* 按鈕內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;
			border-radius: 60px;  /* 按鈕圓角 */
			cursor: pointer;  /* 鼠標懸停時顯示為指針 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
			white-space: nowrap; /* 防止文字換行 */
		}

		/* 按鈕被選中的樣式 */
		.btnactive {
			background-color: #756C61;  /* 按鈕背景顏色 */
			color: #ffffff;  /* 文字顏色 */
			padding: 17px 25px;  /* 按鈕內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;
			border-radius: 60px;  /* 按鈕圓角 */
			cursor: pointer;  /* 鼠標懸停時顯示為指針 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
		}


		/* 調整按鈕的大小 */
		.btn, .btnactive {
			font-size: 14px;  /* 調整按鈕文字大小 */
			padding: 12px 18px;  /* 調整按鈕的內邊距 */
		}

		.block1content{
			padding: 2% 6% 1% 6%;
			font-size:1em;
		}
		.block1content img{
		 width:100% !important;
         height: auto !important;
		}

        .product-id{
			display:none;
		}
		
        /* 商品區域 */
        #prductarea {
             display: flex; /* 使用 flexbox */
			justify-content: center; /* 水平置中 */
			align-items: flex-start; /* 垂直置頂，這樣商品區塊不會在容器內居中，保持左對齊 */
			flex-wrap: wrap; /* 使商品區塊自動換行 */
			padding: 0px;
			gap: 0px; /* 商品間隔 */
        }

        .product {
			margin-top: 10px;
		    float:left;
            background-color: #fff;
            border-radius: 10px;
            border: 1px solid #ddd;
            padding: 10px;			
            width: 88%;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .product img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .product-name {
		    margin-top: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
			text-align: left;
			height: 135px;
        }

        .product-price {
          margin-top: 5px;
		  text-align: right;
		  color: #42392f;
		  text-align: right;
		  font-family: "Montserrat-ExtraBold", sans-serif;
		  font-size: 24px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 800;
		  position: relative;
		  align-self: stretch;
        }

        .product-original-price {
              margin-top: 5px;
			  text-align: right;
			  color: #a7a7a7;
			  text-align: right;
			  font-family: "Montserrat-Regular", sans-serif;
			  font-size: 16px;
			  line-height: 28px;
			  letter-spacing: 0.05em;
			  font-weight: 400;
			  text-decoration: line-through;
			  position: relative;
			  align-self: stretch;
        }

		.quantity-controls {
			display: flex;
			justify-content: space-between; /* 將按鈕兩端對齊 */
			align-items: center; /* 垂直居中 */
			margin-top: 15px;
			gap: 10px; /* 按鈕之間的間隔 */
			border: 1px solid #A7A7A7;
		}

		.quantity-btn {
			background-color: #f7f7f7;
			border-color: #e2e2e2;
			color: #626262;
			padding: 10px 5px 10px 5px;
			font-size: 18px;
			cursor: pointer;			
			transition: background-color 0.3s;
			width: 47px;
			border-bottom: none;
            
		}


		.quantity-display {
			font-size: 18px;
			font-weight: bold;
			margin: 0 10px; /* 加一些間隔以避免和按鈕擠在一起 */
		}

		.add-to-cart-btn {
			background-color: #756C61;  /* 按鈕背景顏色 */
			color: white;  /* 文字顏色 */
			padding: 10px 20px;  /* 內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;  /* 去除邊框 */
			border-radius: 5px;  /* 圓角 */
			cursor: pointer;  /* 鼠標懸停時變為手型 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
			margin-top: 15px;  /* 上方間距 */
			width: 100%;  /* 使按鈕寬度填滿商品區塊 */
		}

		.add-to-cart-btn:hover {
			background-color: #d32f2f;  /* 懸停效果：顏色變深 */
		}
		.line1{
			width:100%;
			float: left;
			line-height:35px;
			margin-top: 20px;
		}
		.line2{
			width: 100%;
			float: left;
			line-height: 35px;
			margin-top: 3px;
			margin-bottom: 6px;
		}
		.line3{
			width:100%;
			float: left;
			line-height:35px;
			margin-bottom: 20px;
		}
        .cart-item{
		width:100%;	
		float: left;
        border-bottom: 1px solid #cecbcb;		
		}		
		.cart-item-name{			
        width: 70%;
        float: left;
        font-size: 16px;
        color: #42392f;
        text-align: left;
        font-family: "Montserrat-Regular", sans-serif;
        line-height: 22px;
        letter-spacing: 0.05em;
        font-weight: 400;
        position: relative;

		}
		.cart-item-subtotal{
		  width:30%;
		  float: left;
		  text-align: right;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 18px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;
		}
		.cart-item-price{
		  float: left;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 22px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;		
		}
		.cart-item-original-price{
		  margin-left:5px;	
		  float: left;
		  color: #a7a7a7;
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  font-size: 16px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  text-decoration: line-through;
		  position: relative;		
		}
		.cart-item-quantity{
	    width:50%;
		float: left;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		gap: 10px;
		border: 1px solid #A7A7A7;		
		}
		.removebotton{
	    width:49%;
		float: left;	
		}
		.remove-item {
		  width: 100px; /* 调整按钮宽度 */
		  height: 46px; /* 调整按钮高度 */
		  margin-top: 15px; /* 顶部间距 */
		  padding: 10px 15px; /* 内边距，调整按钮内容的间距 */
		  font-size: 14px; /* 设置字体大小 */
		  font-weight: bold; /* 设置字体加粗 */
		  text-align: center; /* 文本居中 */
		  color: #fff; /* 字体颜色 */
		  background-color: #756c61; /* 背景颜色 */
		  border: none; /* 去掉默认边框 */
		  border-radius: 0px 5px 5px 0px; /* 圆角边框 */
		  cursor: pointer; /* 鼠标悬停时变为手形 */
		  transition: all 0.3s ease; /* 添加过渡效果，使样式变化更加平滑 */
		}

		/* 鼠标悬停时的效果 */
		.remove-item:hover {
		  background-color: #e53935; /* 悬停时的背景颜色 */
		  transform: translateY(-3px); /* 鼠标悬停时轻微向上移动 */
		  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
		}

		/* 鼠标点击时的效果 */
		.remove-item:active {
		  background-color: #d32f2f; /* 点击时的背景颜色 */
		  transform: translateY(0); /* 点击时恢复位置 */
		}

		.total-price{
			text-align: right;
			font-size: 16px;
			font-weight: 700;
			position: relative;
			width: 90%;
		}
		
		
		/* Toast 訊息的基本樣式 */
		.toast {
			visibility: hidden; /* 預設為隱藏 */
			min-width: 250px; /* 訊息的最小寬度 */
			margin-left: -125px; /* 訊息居中 */
			background-color: #333; /* 背景色 */
			color: #fff; /* 文字顏色 */
			text-align: center; /* 文字居中 */
			border-radius: 2px; /* 邊角圓滑 */
			padding: 16px; /* 內邊距 */
			position: fixed; /* 固定定位 */
			z-index: 9999; /* 讓它顯示在最上層 */
			left: 50%; /* 顯示在屏幕中間 */
			bottom: 30px; /* 顯示在頁面底部 */
			font-size: 17px; /* 文字大小 */
			opacity: 0; /* 初始透明度為 0 */
			transition: opacity 0.5s ease-in-out; /* 透明度過渡效果 */
		}

		/* Toast 顯示時的樣式 */
		.toast.show {
			visibility: visible;
			opacity: 1; /* 顯示時透明度為 1 */
		}
		.formdata{
		   width:90%;
           margin-bottom: 2em;		   
		}
		.formtitle{
		  
		  width:100%;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 18px;
		  line-height: 32px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;		   
		}
		.formfit{
		   padding-top:10px;	
		   font-size:18px;		
		   width:100%;			
		}
		/* 設置每個選項的間距 */
		.magic-radio + label {
			margin-right: 20px; /* 可以根據需要調整此數值 */
		}

		/* 如果要設置上方和下方的間距，可以調整 label 的 margin */
		.magic-radio + label {
			margin-top: 5px;    /* 上方間距 */
			margin-right: 5px; /* 右方間距 */
			margin-bottom: 5px; /* 下方間距 */
		}
		.inputtext{
			width: 90%;
            height: 2.4em;
			font-weight:400;
		}
		.inputaddress{
			width: 90%;
            height: 3em;
			font-weight:400;
			margin: 10px 0 0 0;
		}
		input::placeholder {
		  font-size: 18px; /* 设置字型大小 */
		  color: #888;     /* 设置字体颜色 */
		 
		}
		select {
		  width: 150px;
		  height: 40px;
		  background-color: #ffffff;
		  font-size: 16px;
		  padding: 5px 10px;
		  border: 1px solid #ccc;
		  border-radius: 3px;
		  appearance: none; /* 去除系统默认样式 */
		  -webkit-appearance: none; /* 针对 WebKit 引擎（包括 Safari 和 Chrome） */
		  -moz-appearance: none; /* 针对 Firefox */
		}
		select:focus {
		  border-color: #007BFF;
		  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
		}
		select:hover {
		  border-color: #0056b3;
		}
		.city{
		height: 2.85em;	
		}
		.district
		{
		height: 2.85em;	
		}
		.magic-radio2{
		  margin-top:20px;	
		  color: var(--black, #272727);
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  font-size: 16px;
		  line-height: 15.6px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  position: relative;			
		}

        .linepayicon{
			margin-top:5px;
		}
		.botton_div{
		   width:90%;
		   border-bottom:1px solid #b5b5b5;
		   margin-bottom:4%;
		}
		.shipfeeshow{
			width:90%;
			margin-bottom: 2%;
		}
		.shipfeeshow_left{
			width:70%;
			text-align: right;
			  color: #a7a7a7;			  
			  font-family: "Montserrat-SemiBold", sans-serif;
			  font-size: 18px;
			  line-height: 24px;
			  letter-spacing: 0.05em;
			  font-weight: 600;
			  float: left;
		}
		.shipfeeshow_right{
			width:30%;
			text-align: right;
			color: #3d3934;
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 20px;
			letter-spacing: 0.01em;
			font-weight: 600;
			float: left;
		}
		.subtotalshow{
			width:90%;
			margin-bottom: 1%;
		}
		.subtotalshow_left{
			width:70%;
			text-align: right;
			color: #a7a7a7;			  
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 18px;
			line-height: 24px;
			letter-spacing: 0.05em;
			font-weight: 600;
			float: left;
		}
		.subtotalshow_right{
			width:30%;
			color: #3d3934;
			text-align: right;
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 20px;
			letter-spacing: 0.01em;
			font-weight: 600;
			float: left;
		}
		.totalshow{
			width:90%;
            margin-bottom: 4%;
		}
		.totalshow_left{
			width:70%;
			text-align: right;
			color: #a7a7a7;			  
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 18px;
			line-height: 40px;
			letter-spacing: 0.05em;
			font-weight: 600;
			float: left;
			
		}
		.totalshow_right{
		  width:30%;
		  color: #3d3934;
		  text-align: right;
		  font-family: "Montserrat-ExtraBold", sans-serif;
		  font-size: 25px;
		  letter-spacing: 0.01em;
		  font-weight: 800;
          float: left;		  
		}
		.inputarea{
		  width: 100%;
          height: 90px
		}
        .contact{
         width:90%;
        }
        .contactcontent{

	    }
        .contactcontent_space{
          width:10%;
          float: left;
          height:150px;
        }
        .contactcontent_middle{
          width:80%; 
	      color: #3d3934;			 
		  font-family: "Montserrat-Medium", sans-serif;
		  font-size: 16px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 500;
		  float: left;
 
        }
        .button_checkout{
		  background: #756c61;
		  border-radius: 41px;
		  padding: 15px 25px 15px 25px;
		  display: flex;
          color:#FFFFFF;
		  flex-direction: row;
		  gap: 10px;
		  align-items: center;
		  justify-content: center;
		  flex-shrink: 0;
          font-size: 18px;
          line-height: 30px;
          width:300px;
        }

        #deliver_home{
        display:none;
        }
 
        #mobilebarcodeshow{
          display:none;
        }
        #invoicenoshow{
          display:none;
        }
        #invoicetitleshow{
          display:none;
        }
		.fixed-buttons {
        position: fixed;
        right: 3px;
        bottom: 100px;
        display: flex;
        flex-direction: column;
        gap: 10px;
		}

		.button {
		  width: 50px; /* 增大圓形尺寸 */
		  height: 50px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  border-radius: 50%;
		  background-color: #756C61;
		  color: white;
		  font-size: 12px;
		  text-align: center;
		  cursor: pointer;
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加陰影 */
		  transition: all 0.3s ease;
		  animation: shake 10s infinite; /* 添加動畫效果 */
		}

		.button:hover {
		  transform: translateY(-3px); /* 鼠標懸停效果 */
		}

		#btn3 {
		  border: 2px solid #756C61;
		  background-color: #ffffff;
		  color: #756C61;
		  font-size: 24px; /* 增大箭頭的大小 */
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 為箭頭圓圈加陰影 */
		}

		#btn0 span,#btn1 span, #btn2 span {
		  font-size: 12px; /* 調整文本大小 */
		}

		#btn3 span {
		  font-size: 26px; /* 增大箭頭圖示 */
		}

		/* 去除<a>標籤的底線 */
		#btn0 a,#btn1 a, #btn2 a{
		  color: inherit; /* 繼承父元素顏色 */
		  text-decoration: none; /* 去除底線 */
		  font-size: 12px;
		}
		#btn3 a {
		  color: inherit; /* 繼承父元素顏色 */
		  text-decoration: none; /* 去除底線 */
		  font-size: 24px;
		}		
		
		#txtDate{
			font-size: 18px;
			height: 35px;
			padding: 2px 5px;
			border-radius: 4px;
			border: 1px solid #ccc;
			box-sizing: border-box;
		}

		/* 設置 placeholder 的字體大小和顏色 */
		#txtDate::placeholder, textarea::placeholder {
			font-size: 18px; /* 提示字體大小 */
			color: #999; /* 提示字顏色 */
		}

		/* 定義動畫效果 */
		@keyframes shake {
		  0% {
			transform: translateY(0); /* 初始位置 */
		  }
		  25% {
			transform: translateY(-10px); /* 向上移動 */
		  }
		  50% {
			transform: translateY(0); /* 回到原來位置 */
		  }
		  75% {
			transform: translateY(10px); /* 向下移動 */
		  }
		  100% {
			transform: translateY(0); /* 回到原來位置 */
		  }
		}	
		.address img{
			width:16% !important;
			vertical-align:middle;
		}
		a{
			text-decoration: none;
			color:#3d3934;
		}
		.checkout{
		margin-top: 24px;				
		}
}

/* 平板（768px 到 1024px 之間） */
@media screen and (min-width:769px) and (max-width:1024px){ 

		html {
		  scroll-behavior: smooth;
		}        
		body {
            margin: 0;
            overflow-x: hidden;
			padding-top: 15%;
			background-color:#fcfaf6;
			font-family: 'Noto Sans TC', sans-serif;
        }

        .closecontent{
           background-color: #ffffff9c;
           padding: 1% 25% 1% 25%;
        }

        /* 背景圖片設置 */
        .banner {
            position: fixed;  /* 固定背景 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh; /* 使用視窗高度 */                 
            background-size: contain; /* 確保圖片完全顯示且不會被裁切 */
            background-repeat: no-repeat; /* 不重複顯示背景圖片 */
            background-position: top center; /* 圖片從頂部居中顯示 */
            z-index: -1;  /* 確保背景在內容區下層 */
        }
        .toplogo{
		width: 100%;
		max-width: 95%;
		margin: 0 auto;
		}
	    .toplogo2{
		width: 100%;
		max-width: 95%;
		margin: 5% auto 0 auto;
		}
        .top-image{
		width:100%;
		}

		.form-title-tip {
		  padding: 6px 10px;
		  background-color: #f0f7ff; /* 柔和藍色背景 */
		  border: 1px solid #d1e4ff; /* 淺藍色邊框 */
		  border-radius: 4px; /* 圓角 */
		  color: #2b5a9b; /* 深藍色文字 */
		  font-size: 13px; /* 稍小的字體 */
		  line-height: 1.4; /* 行高 */
		  white-space: nowrap; /* 防止文字換行 */
		}
        /* 商品介紹區域 */
        #wrapper {
            width: 100%;
            max-width: 95%;
            margin: -5px auto;
            padding: 60px 0px 60px 0px; /* 上方留空避免與背景重疊 */
            background-color: rgba(255, 255, 255, 1); /* 透明白色背景，避免和背景圖片太過融合 */
			border-radius: 0px 0px 10px 10px; /*左上 右上*/
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
        }
		/* 商品區域 */
		#wrapper2 {
			width: 100%;
			max-width: 95%;
			margin: -5px auto;
			padding: 60px 0px 60px 0px;
			background-color: rgba(255, 255, 255, 1); /* 白色背景 */
			border-radius: 0px 0px 10px 10px;
			position: relative;  /* 確保它是父元素，並且擁有背景 */
		}

		#wrapper2::after {
			content: "";
			display: block;
			clear: both;  /* 清除浮動，防止背景顯示異常 */
		}

        .block1title{
		margin-top: -2%;
		color:#3D3934;
		font-size:40px;
		text-align: center;
		font-family: 'Noto Sans TC', sans-serif;
		font-weight: 800; 
		} 
		.block1title2{
		  margin:40px 10px 40px 10px;
		  color:#666666;
		  font-size:24px;
		  text-align: center;
		  font-family: "Montserrat-Bold", sans-serif;
		  line-height: 27.6px;
		  letter-spacing: 1.5px;
		  font-weight: 700;
		  position: relative;
		  height: 35px;
          padding: 0 40px 0 40px;
		}
		.block1title3{
		margin: 0px 10px 20px 10px;
		  font-size:28px;
		  text-align: center;		
		  color: #3d3934;
		  text-align: center;
		  font-family: "Montserrat-Black", sans-serif;
		  line-height: 30px;
		  letter-spacing: 1.5px;
		  font-weight: 900;
		  position: relative;
		  height: 35px;		
		}
		.block1title4{
		  margin: 30px 10px 20px 10px;
		  font-size:28px;
		  text-align: center;
		  width:100%;
		  color: #3d3934;
		  text-align: center;
		  font-family: "Montserrat-Black", sans-serif;
		  line-height: 30px;
		  letter-spacing: 1.5px;
		  font-weight: 900;
		  position: relative;
		  align-self: stretch;
		  height: 35px;					
		}
		.buylist{
		width:90%;
        margin-bottom: 2%;	
		}
		.block{
		margin-top:10px;
		}
        /* 內容區域內的文本 */
        #wrapper h1 {
            font-size: 36px;
            margin-bottom: 20px;
			
        }
        
        #wrapper p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* 滾動區域 */
        .scroll-area {
            height: auto; /* 避免設置固定高度 */
        }
		
		.button-container { 
			background-color: #F6F6F6;  
			height: 68px;  
			display: flex;
			justify-content: flex-start; /* 按鈕左對齊 */
			gap: 6%; /* 按鈕間距 */
			overflow-x: auto;  /* 允許容器在水平方向滾動 */
			padding: 10px 0;  /* 上下內邊距，讓按鈕更顯示 */
			white-space: nowrap;  /* 防止按鈕換行 */
			margin-top: 3%; 
		}

		/* 按鈕容器內的超鏈接樣式 */
		.button-container a {
			background-color: #F6F6F6;
			color: #000000;
			font-size: 18px;
			border: none;
			cursor: pointer;
			font-family: "Montserrat-Black", sans-serif;
		}

		/* 按鈕樣式 */
		.btn {
			background-color: #F6F6F6;  /* 按鈕背景顏色為白色 */
			color: #000000;  /* 文字顏色為紅色 */
			padding: 17px 20px;  /* 按鈕內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;
			border-radius: 60px;  /* 按鈕圓角 */
			cursor: pointer;  /* 鼠標懸停時顯示為指針 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
		}
		.btnactive {
			background-color: #756C61;  /* 按鈕背景顏色為白色 */
			color: #ffffff;  /* 文字顏色為紅色 */
			padding: 17px 25px;  /* 按鈕內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;
			border-radius: 60px;  /* 按鈕圓角 */
			cursor: pointer;  /* 鼠標懸停時顯示為指針 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
		}
		.block1content{
		padding: 1% 6% 1% 6%;
		font-size:20px;
		}
		.block1content img{
		 width:100% !important;
         height: auto !important;
		}

        .product-id{
			display:none;
		}
		
        /* 商品區域 */
        #prductarea {
             display: flex; /* 使用 flexbox */
			justify-content: center; /* 水平置中 */
			align-items: flex-start; /* 垂直置頂，這樣商品區塊不會在容器內居中，保持左對齊 */
			flex-wrap: wrap; /* 使商品區塊自動換行 */
			padding: 0px;
			gap: 0px; /* 商品間隔 */
        }

        .product {
			float: left;
			background-color: #fff;
			border-radius: 10px;
			border: 1px solid #ddd;
			padding: 30px;
			margin: 8px;
			width: 39%;
			text-align: center;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .product img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .product-name {
		    margin-top: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
			text-align: left;
			height: 171px;
        }

        .product-price {
          margin-top: 5px;
		  text-align: right;
		  color: #42392f;
		  text-align: right;
		  font-family: "Montserrat-ExtraBold", sans-serif;
		  font-size: 24px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 800;
		  position: relative;
		  align-self: stretch;
        }

        .product-original-price {
              margin-top: 5px;
			  text-align: right;
			  color: #a7a7a7;
			  text-align: right;
			  font-family: "Montserrat-Regular", sans-serif;
			  font-size: 16px;
			  line-height: 28px;
			  letter-spacing: 0.05em;
			  font-weight: 400;
			  text-decoration: line-through;
			  position: relative;
			  align-self: stretch;
        }

		.quantity-controls {
			display: flex;
			justify-content: space-between; /* 將按鈕兩端對齊 */
			align-items: center; /* 垂直居中 */
			margin-top: 15px;
			gap: 10px; /* 按鈕之間的間隔 */
			border: 1px solid #A7A7A7;
		}

		.quantity-btn {
			background-color: #f7f7f7;
			border-color: #e2e2e2;
			color: #626262;
			padding: 10px 5px 10px 5px;
			font-size: 18px;
			cursor: pointer;			
			transition: background-color 0.3s;
			width: 47px;
			border-bottom: none;
            
		}


		.quantity-display {
			font-size: 18px;
			font-weight: bold;
			margin: 0 10px; /* 加一些間隔以避免和按鈕擠在一起 */
		}

		.add-to-cart-btn {
			background-color: #756C61;  /* 按鈕背景顏色 */
			color: white;  /* 文字顏色 */
			padding: 10px 20px;  /* 內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;  /* 去除邊框 */
			border-radius: 5px;  /* 圓角 */
			cursor: pointer;  /* 鼠標懸停時變為手型 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
			margin-top: 15px;  /* 上方間距 */
			width: 100%;  /* 使按鈕寬度填滿商品區塊 */
		}

		.add-to-cart-btn:hover {
			background-color: #d32f2f;  /* 懸停效果：顏色變深 */
		}
		.line1{
			width:100%;
			float: left;
			line-height:35px;
			margin-top: 20px;
		}
		.line2{
			width: 100%;
			float: left;
			line-height: 35px;
			margin-top: 3px;
			margin-bottom: 6px;
		}
		.line3{
			width:100%;
			float: left;
			line-height:35px;
			margin-bottom: 20px;
		}
        .cart-item{
		width:100%;	
		float: left;
        border-bottom: 1px solid #cecbcb;		
		}		
		.cart-item-name{			
		  width:78%;
		  float: left;
		  font-size: 22px;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  line-height: 32px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  position: relative;
		  align-self: stretch;

		}
		.cart-item-subtotal{
		  width:22%;
		  float: left;
		  text-align: right;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 24px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;
		}
		.cart-item-price{
		  float: left;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 22px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;		
		}
		.cart-item-original-price{
		  margin-left:5px;	
		  float: left;
		  color: #a7a7a7;
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  font-size: 16px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  text-decoration: line-through;
		  position: relative;		
		}
		.cart-item-quantity{
	    width:50%;
		float: left;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		gap: 10px;
		border: 1px solid #A7A7A7;		
		}
		.removebotton{
	    width:49%;
		float: left;	
		}
		.remove-item {
		  width: 100px; /* 调整按钮宽度 */
		  height: 45px; /* 调整按钮高度 */
		  margin-top: 15px; /* 顶部间距 */
		  padding: 10px 15px; /* 内边距，调整按钮内容的间距 */
		  font-size: 14px; /* 设置字体大小 */
		  font-weight: bold; /* 设置字体加粗 */
		  text-align: center; /* 文本居中 */
		  color: #fff; /* 字体颜色 */
		  background-color: #756c61; /* 背景颜色 */
		  border: none; /* 去掉默认边框 */
		  border-radius: 0px 5px 5px 0px; /* 圆角边框 */
		  cursor: pointer; /* 鼠标悬停时变为手形 */
		  transition: all 0.3s ease; /* 添加过渡效果，使样式变化更加平滑 */
		}

		/* 鼠标悬停时的效果 */
		.remove-item:hover {
		  background-color: #e53935; /* 悬停时的背景颜色 */
		  transform: translateY(-3px); /* 鼠标悬停时轻微向上移动 */
		  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
		}

		/* 鼠标点击时的效果 */
		.remove-item:active {
		  background-color: #d32f2f; /* 点击时的背景颜色 */
		  transform: translateY(0); /* 点击时恢复位置 */
		}
		.total-price{
			text-align: right;
			font-size: 25px;
			font-weight: 700;
			position: relative;
			width: 90%;
		}
		
		
		/* Toast 訊息的基本樣式 */
		.toast {
			visibility: hidden; /* 預設為隱藏 */
			min-width: 250px; /* 訊息的最小寬度 */
			margin-left: -125px; /* 訊息居中 */
			background-color: #333; /* 背景色 */
			color: #fff; /* 文字顏色 */
			text-align: center; /* 文字居中 */
			border-radius: 2px; /* 邊角圓滑 */
			padding: 16px; /* 內邊距 */
			position: fixed; /* 固定定位 */
			z-index: 9999; /* 讓它顯示在最上層 */
			left: 50%; /* 顯示在屏幕中間 */
			bottom: 30px; /* 顯示在頁面底部 */
			font-size: 17px; /* 文字大小 */
			opacity: 0; /* 初始透明度為 0 */
			transition: opacity 0.5s ease-in-out; /* 透明度過渡效果 */
		}

		/* Toast 顯示時的樣式 */
		.toast.show {
			visibility: visible;
			opacity: 1; /* 顯示時透明度為 1 */
		}
		.formdata{
		   width:90%;
           margin-bottom: 2em;		   
		}
		.formtitle{
		  
		  width:100%;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 18px;
		  line-height: 32px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;		   
		}
		.formfit{
		   padding-top:10px;	
		   font-size:18px;		
		   width:100%;			
		}
		/* 設置每個選項的間距 */
		.magic-radio + label {
			margin-right: 20px; /* 可以根據需要調整此數值 */
		}

		/* 如果要設置上方和下方的間距，可以調整 label 的 margin */
		.magic-radio + label {
			margin-top: 5px;    /* 上方間距 */
			margin-right: 20px; /* 右方間距 */
			margin-bottom: 5px; /* 下方間距 */
		}
		.inputtext{
			width: 50%;
            height: 2.4em;
			font-weight:400;
		}
		.inputaddress{
			width: 50%;
            height: 2.4em;
			font-weight:400;
		}


		.city{
		height: 2.85em;	
		}
		.district
		{
		height: 2.85em;	
		}
		.magic-radio2{
		  margin-top:20px;	
		  color: var(--black, #272727);
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  font-size: 16px;
		  line-height: 15.6px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  position: relative;			
		}
        .linepayicon{
			margin-top:5px;
		}
		.botton_div{
		   width:90%;
		   border-bottom:1px solid #b5b5b5;
		   margin-bottom:4%;
		}
		.shipfeeshow{
			width:90%;
			margin-bottom: 2%;
		}
		.shipfeeshow_left{
			width:91%;
			text-align: right;
			  color: #a7a7a7;			  
			  font-family: "Montserrat-SemiBold", sans-serif;
			  font-size: 18px;
			  line-height: 22px;
			  letter-spacing: 0.05em;
			  font-weight: 600;
			  float: left;
		}
		.shipfeeshow_right{
			width:9%;
			text-align: right;
			color: #3d3934;
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 20px;
			letter-spacing: 0.01em;
			font-weight: 600;
			float: left;
		}
		.subtotalshow{
			width:90%;
			margin-bottom: 1%;
		}
		.subtotalshow_left{
			width:91%;
			text-align: right;
			color: #a7a7a7;			  
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 18px;
			line-height: 22px;
			letter-spacing: 0.05em;
			font-weight: 600;
			float: left;
		}
		.subtotalshow_right{
			width:9%;
			color: #3d3934;
			text-align: right;
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 20px;
			letter-spacing: 0.01em;
			font-weight: 600;
			float: left;
		}
		.totalshow{
			width:90%;
            margin-bottom: 4%;
		}
		.totalshow_left{
			width:83.5%;
			text-align: right;
			color: #a7a7a7;			  
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 18px;
			line-height: 55px;
			letter-spacing: 0.05em;
			font-weight: 600;
			float: left;
			
		}
		.totalshow_right{
		  width:16.5%;
		  color: #3d3934;
		  text-align: right;
		  font-family: "Montserrat-ExtraBold", sans-serif;
		  font-size: 32px;
		  letter-spacing: 0.01em;
		  font-weight: 800;
          float: left;		  
		}
		.inputarea{
		  width: 100%;
          height: 90px
		}
        .contact{
         width:90%;
        }
        .contactcontent{

	    }
        .contactcontent_space{
          width:35%;
          float: left;
          height:150px;
        }
        .contactcontent_middle{
          width:30%; 
	      color: #3d3934;			 
		  font-family: "Montserrat-Medium", sans-serif;
		  font-size: 16px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 500;
		  float: left;
 
        }
        .button_checkout{
		  background: #756c61;
		  border-radius: 41px;
		  padding: 15px 25px 15px 25px;
		  display: flex;
          color:#FFFFFF;
		  flex-direction: row;
		  gap: 10px;
		  align-items: center;
		  justify-content: center;
		  flex-shrink: 0;
          font-size: 18px;
          line-height: 30px;
          width:300px;
        }

        #deliver_home{
        display:none;
        }
 
        #mobilebarcodeshow{
          display:none;
        }
        #invoicenoshow{
          display:none;
        }
        #invoicetitleshow{
          display:none;
        }
		.fixed-buttons {
		  position: fixed;
		  right: 20px;
		  bottom: 20px;
		  display: flex;
		  flex-direction: column;
		  gap: 10px;
		}

		.button {
		  width: 60px; /* 增大圓形尺寸 */
		  height: 60px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  border-radius: 50%;
		  background-color: #756C61;
		  color: white;
		  font-size: 14px;
		  text-align: center;
		  cursor: pointer;
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加陰影 */
		  transition: all 0.3s ease;
		  animation: shake 10s infinite; /* 添加動畫效果 */
		}

		.button:hover {
		  transform: translateY(-3px); /* 鼠標懸停效果 */
		}

		#btn3 {
		  border: 2px solid #756C61;
		  background-color: #ffffff;
		  color: #756C61;
		  font-size: 24px; /* 增大箭頭的大小 */
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 為箭頭圓圈加陰影 */
		}


		#btn0 span,#btn1 span, #btn2 span {
		  font-size: 14px; /* 調整文本大小 */
		}

		#btn3 span {
		  font-size: 28px; /* 增大箭頭圖示 */
		}

		/* 去除<a>標籤的底線 */
		#btn0 a,#btn1 a, #btn2 a, #btn3 a {
		  color: inherit; /* 繼承父元素顏色 */
		  text-decoration: none; /* 去除底線 */
		}

		/* 定義動畫效果 */
		@keyframes shake {
		  0% {
			transform: translateY(0); /* 初始位置 */
		  }
		  25% {
			transform: translateY(-10px); /* 向上移動 */
		  }
		  50% {
			transform: translateY(0); /* 回到原來位置 */
		  }
		  75% {
			transform: translateY(10px); /* 向下移動 */
		  }
		  100% {
			transform: translateY(0); /* 回到原來位置 */
		  }
		}	
		.address img{
			width:8% !important;
			vertical-align:middle;
		}
		a{
			text-decoration: none;
			color:#3d3934;
		}
		.checkout{
		margin-top: 24px;				
		}
}

/* 電腦（大於 1024px） */
@media screen and (min-width:1025px) and (max-width:10000px){ 
/* 頁面基本設置 */
		html {
		  scroll-behavior: smooth;
		}        
		body {
            margin: 0;
            overflow-x: hidden;
			padding-top: 15%;
			background-color:#fcfaf6;
			font-family: 'Noto Sans TC', sans-serif;
        }

        .closecontent{
           background-color: #ffffff9c;
           padding: 1% 25% 1% 25%;
        }

        /* 背景圖片設置 */
        .banner {
            position: fixed;  /* 固定背景 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh; /* 使用視窗高度 */           
            background-size: contain; /* 確保圖片完全顯示且不會被裁切 */
            background-repeat: no-repeat; /* 不重複顯示背景圖片 */
            background-position: top center; /* 圖片從頂部居中顯示 */
            z-index: -1;  /* 確保背景在內容區下層 */
        }
        .toplogo{
		width: 100%;
		max-width: 88%;
		margin: 0 auto;
		}
	    .toplogo2{
		width: 100%;
		max-width: 88%;
		margin: 5% auto 0 auto;
		}
        .top-image{
		width:100%;
		}

		.form-title-tip {
		  padding: 6px 10px;
		  background-color: #f0f7ff; /* 柔和藍色背景 */
		  border: 1px solid #d1e4ff; /* 淺藍色邊框 */
		  border-radius: 4px; /* 圓角 */
		  color: #2b5a9b; /* 深藍色文字 */
		  font-size: 13px; /* 稍小的字體 */
		  line-height: 1.4; /* 行高 */
		  white-space: nowrap; /* 防止文字換行 */
		}

        /* 商品介紹區域 */
        #wrapper {
            width: 100%;
            max-width: 88%;
            margin: -5px auto;
            padding: 60px 0px 60px 0px; /* 上方留空避免與背景重疊 */
            background-color: rgba(255, 255, 255, 1); /* 透明白色背景，避免和背景圖片太過融合 */
			border-radius: 0px 0px 10px 10px; /*左上 右上*/
            /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
        }
		/* 商品區域 */
		#wrapper2 {
			width: 100%;
			max-width: 88%;
			margin: -5px auto;
			padding: 10px 0px 60px 0px;
			background-color: rgba(255, 255, 255, 1); /* 白色背景 */
			border-radius: 0px 0px 10px 10px;
			position: relative;  /* 確保它是父元素，並且擁有背景 */
		}

		#wrapper2::after {
			content: "";
			display: block;
			clear: both;  /* 清除浮動，防止背景顯示異常 */
		}

        .block1title{
		margin-top: -2%;
		color:#3D3934;
		font-size:40px;
		text-align: center;
		font-family: 'Noto Sans TC', sans-serif;
		font-weight: 800; 
		} 
		.block1title2{
		  margin:40px 10px 40px 10px;
		  color:#666666;
		  font-size:24px;
		  text-align: center;
		  font-family: "Montserrat-Bold", sans-serif;
		  line-height: 27.6px;
		  letter-spacing: 1.5px;
		  font-weight: 700;
		  position: relative;
		  height: 35px;
          padding: 0 40px 0 40px;
		}
		.block1title3{
		margin: 0px 10px 20px 10px;
		  font-size:28px;
		  text-align: center;		
		  color: #3d3934;
		  text-align: center;
		  font-family: "Montserrat-Black", sans-serif;
		  line-height: 30px;
		  letter-spacing: 1.5px;
		  font-weight: 900;
		  position: relative;
		  height: 35px;		
		}
		.block1title4{
		  margin: 30px 10px 20px 10px;
		  font-size:28px;
		  text-align: center;
		  width:100%;
		  color: #3d3934;
		  text-align: center;
		  font-family: "Montserrat-Black", sans-serif;
		  line-height: 30px;
		  letter-spacing: 1.5px;
		  font-weight: 900;
		  position: relative;
		  align-self: stretch;
		  height: 35px;					
		}
		.buylist{
		width:90%;
        margin-bottom: 2%;	
		}
		.block{
		margin-top:10px;
		}
        /* 內容區域內的文本 */
        #wrapper h1 {
            font-size: 36px;
            margin-bottom: 20px;
			
        }
        
        #wrapper p {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* 滾動區域 */
        .scroll-area {
            height: auto; /* 避免設置固定高度 */
        }
		
		/* 按鈕容器 */
		.button-container {
			margin: 30px 50px 30px 50px;   
			background-color: #F6F6F6; 	
			height: 60px;	
			border-radius: 60px;  /* 圓角效果 */
			display: flex;
			justify-content: center; /* 按鈕水平居中 */
			gap: 4%; /* 按鈕間距 */
		}
        .button-container a{
			background-color: #F6F6F6;
			color: #000000;
			font-size: 18px;
			border: none;
			cursor: pointer;
            font-family: "Montserrat-Black", sans-serif;
        }

		/* 按鈕樣式 */
		.btn {
			background-color: #F6F6F6;  /* 按鈕背景顏色為白色 */
			color: #000000;  /* 文字顏色為紅色 */
			padding: 17px 20px;  /* 按鈕內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;
			border-radius: 60px;  /* 按鈕圓角 */
			cursor: pointer;  /* 鼠標懸停時顯示為指針 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
		}
		.btnactive {
			background-color: #756C61;  /* 按鈕背景顏色為白色 */
			color: #ffffff;  /* 文字顏色為紅色 */
			padding: 17px 25px;  /* 按鈕內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;
			border-radius: 60px;  /* 按鈕圓角 */
			cursor: pointer;  /* 鼠標懸停時顯示為指針 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
		}
		.block1content{
		padding: 1% 6% 1% 6%;
		font-size:20px;
		}
		.block1content img{
		 width:100% !important;
         height: auto !important;
		}

        .product-id{
			display:none;
		}
		
        /* 商品區域 */
        #prductarea {
             display: flex; /* 使用 flexbox */
			justify-content: center; /* 水平置中 */
			align-items: flex-start; /* 垂直置頂，這樣商品區塊不會在容器內居中，保持左對齊 */
			flex-wrap: wrap; /* 使商品區塊自動換行 */
			padding: 20px;
			gap: 0px; /* 商品間隔 */
        }

        .product {
		    float:left;
            background-color: #fff;
            border-radius: 10px;
            border: 1px solid #ddd;
            padding: 20px;
			margin:20px;
            width: 40%;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .product img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }

        .product-name {
		    margin-top: 10px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-top: 10px;
			text-align: left;
			height: 135px;
        }

        .product-price {
          margin-top: 5px;
		  text-align: right;
		  color: #42392f;
		  text-align: right;
		  font-family: "Montserrat-ExtraBold", sans-serif;
		  font-size: 24px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 800;
		  position: relative;
		  align-self: stretch;
        }

        .product-original-price {
              margin-top: 5px;
			  text-align: right;
			  color: #a7a7a7;
			  text-align: right;
			  font-family: "Montserrat-Regular", sans-serif;
			  font-size: 16px;
			  line-height: 28px;
			  letter-spacing: 0.05em;
			  font-weight: 400;
			  text-decoration: line-through;
			  position: relative;
			  align-self: stretch;
        }

		.quantity-controls {
			display: flex;
			justify-content: space-between; /* 將按鈕兩端對齊 */
			align-items: center; /* 垂直居中 */
			margin-top: 15px;
			gap: 10px; /* 按鈕之間的間隔 */
			border: 1px solid #A7A7A7;
		}

		.quantity-btn {
			background-color: #f7f7f7;
			border-color: #e2e2e2;
			color: #626262;
			padding: 10px 5px 10px 5px;
			font-size: 18px;
			cursor: pointer;			
			transition: background-color 0.3s;
			width: 47px;
			border-bottom: none;
            
		}


		.quantity-display {
			font-size: 18px;
			font-weight: bold;
			margin: 0 10px; /* 加一些間隔以避免和按鈕擠在一起 */
		}

		.add-to-cart-btn {
			background-color: #756C61;  /* 按鈕背景顏色 */
			color: white;  /* 文字顏色 */
			padding: 10px 20px;  /* 內邊距 */
			font-size: 18px;  /* 文字大小 */
			border: none;  /* 去除邊框 */
			border-radius: 5px;  /* 圓角 */
			cursor: pointer;  /* 鼠標懸停時變為手型 */
			transition: background-color 0.3s;  /* 增加過渡效果 */
			margin-top: 15px;  /* 上方間距 */
			width: 100%;  /* 使按鈕寬度填滿商品區塊 */
		}

		.add-to-cart-btn:hover {
			background-color: #d32f2f;  /* 懸停效果：顏色變深 */
		}
		.line1{
			width:100%;
			float: left;
			line-height:35px;
			margin-top: 20px;
		}
		.line2{
			width: 100%;
			float: left;
			line-height: 35px;
			margin-top: 3px;
			margin-bottom: 6px;
		}
		.line3{
			width:100%;
			float: left;
			line-height:35px;
			margin-bottom: 20px;
		}
        .cart-item{
		width:100%;	
		float: left;
        border-bottom: 1px solid #cecbcb;		
		}		
		.cart-item-name{			
		  width:78%;
		  float: left;
		  font-size: 22px;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  line-height: 32px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  position: relative;
		  align-self: stretch;

		}
		.cart-item-subtotal{
		  width:22%;
		  float: left;
		  text-align: right;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 24px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;
		}
		.cart-item-price{
		  float: left;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 22px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;		
		}
		.cart-item-original-price{
		  margin-left:5px;	
		  float: left;
		  color: #a7a7a7;
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  font-size: 16px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  text-decoration: line-through;
		  position: relative;		
		}
		.cart-item-quantity{
	    width:50%;
		float: left;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 15px;
		gap: 10px;
		border: 1px solid #A7A7A7;		
		}
		.removebotton{
	    width:49%;
		float: left;	
		}
		.remove-item {
		  width: 100px; /* 调整按钮宽度 */
		  height: 45px; /* 调整按钮高度 */
		  margin-top: 15px; /* 顶部间距 */
		  padding: 10px 15px; /* 内边距，调整按钮内容的间距 */
		  font-size: 14px; /* 设置字体大小 */
		  font-weight: bold; /* 设置字体加粗 */
		  text-align: center; /* 文本居中 */
		  color: #fff; /* 字体颜色 */
		  background-color: #756c61; /* 背景颜色 */
		  border: none; /* 去掉默认边框 */
		  border-radius: 0px 5px 5px 0px; /* 圆角边框 */
		  cursor: pointer; /* 鼠标悬停时变为手形 */
		  transition: all 0.3s ease; /* 添加过渡效果，使样式变化更加平滑 */
		}

		/* 鼠标悬停时的效果 */
		.remove-item:hover {
		  background-color: #e53935; /* 悬停时的背景颜色 */
		  transform: translateY(-3px); /* 鼠标悬停时轻微向上移动 */
		  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
		}

		/* 鼠标点击时的效果 */
		.remove-item:active {
		  background-color: #d32f2f; /* 点击时的背景颜色 */
		  transform: translateY(0); /* 点击时恢复位置 */
		}
		.total-price{
			text-align: right;
			font-size: 25px;
			font-weight: 700;
			position: relative;
			width: 90%;
		}
		
		
		/* Toast 訊息的基本樣式 */
		.toast {
			visibility: hidden; /* 預設為隱藏 */
			min-width: 250px; /* 訊息的最小寬度 */
			margin-left: -125px; /* 訊息居中 */
			background-color: #333; /* 背景色 */
			color: #fff; /* 文字顏色 */
			text-align: center; /* 文字居中 */
			border-radius: 2px; /* 邊角圓滑 */
			padding: 16px; /* 內邊距 */
			position: fixed; /* 固定定位 */
			z-index: 9999; /* 讓它顯示在最上層 */
			left: 50%; /* 顯示在屏幕中間 */
			bottom: 30px; /* 顯示在頁面底部 */
			font-size: 17px; /* 文字大小 */
			opacity: 0; /* 初始透明度為 0 */
			transition: opacity 0.5s ease-in-out; /* 透明度過渡效果 */
		}

		/* Toast 顯示時的樣式 */
		.toast.show {
			visibility: visible;
			opacity: 1; /* 顯示時透明度為 1 */
		}
		.formdata{
		   width:90%;
           margin-bottom: 2em;		   
		}
		.formtitle{
		  
		  width:100%;
		  color: #42392f;
		  text-align: left;
		  font-family: "Montserrat-Bold", sans-serif;
		  font-size: 18px;
		  line-height: 32px;
		  letter-spacing: 0.05em;
		  font-weight: 700;
		  position: relative;		   
		}
		.formfit{
		   padding-top:10px;	
		   font-size:18px;		
		   width:100%;			
		}
		/* 設置每個選項的間距 */
		.magic-radio + label {
			margin-right: 20px; /* 可以根據需要調整此數值 */
		}

		/* 如果要設置上方和下方的間距，可以調整 label 的 margin */
		.magic-radio + label {
			margin-top: 5px;    /* 上方間距 */
			margin-right: 20px; /* 右方間距 */
			margin-bottom: 5px; /* 下方間距 */
		}
		.inputtext{
			width: 50%;
            height: 2.4em;
			font-weight:400;
		}
		.inputaddress{
			width: 50%;
            height: 2.4em;
			font-weight:400;
		}


		.city{
		height: 2.85em;	
		}
		.district
		{
		height: 2.85em;	
		}
		.magic-radio2{
		  margin-top:20px;	
		  color: var(--black, #272727);
		  text-align: left;
		  font-family: "Montserrat-Regular", sans-serif;
		  font-size: 16px;
		  line-height: 15.6px;
		  letter-spacing: 0.05em;
		  font-weight: 400;
		  position: relative;			
		}
        .linepayicon{
			margin-top:5px;
		}
		.botton_div{
		   width:90%;
		   border-bottom:1px solid #b5b5b5;
		   margin-bottom:4%;
		}
		.shipfeeshow{
			width:90%;
			margin-bottom: 2%;
		}
		.shipfeeshow_left{
			width:80%;
			text-align: right;
			  color: #a7a7a7;			  
			  font-family: "Montserrat-SemiBold", sans-serif;
			  font-size: 18px;
			  line-height: 22px;
			  letter-spacing: 0.05em;
			  font-weight: 600;
			  float: left;
		}
		.shipfeeshow_right{
			width:20%;
			text-align: right;
			color: #3d3934;
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 20px;
			letter-spacing: 0.01em;
			font-weight: 600;
			float: left;
		}
		.subtotalshow{
			width:90%;
			margin-bottom: 1%;
		}
		.subtotalshow_left{
			width:80%;
			text-align: right;
			color: #a7a7a7;			  
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 18px;
			line-height: 22px;
			letter-spacing: 0.05em;
			font-weight: 600;
			float: left;
		}
		.subtotalshow_right{
			width:20%;
			color: #3d3934;
			text-align: right;
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 20px;
			letter-spacing: 0.01em;
			font-weight: 600;
			float: left;
		}
		.totalshow{
			width:90%;
            margin-bottom: 4%;
		}
		.totalshow_left{
			width:80%;
			text-align: right;
			color: #a7a7a7;			  
			font-family: "Montserrat-SemiBold", sans-serif;
			font-size: 18px;
			line-height: 55px;
			letter-spacing: 0.05em;
			font-weight: 600;
			float: left;
			
		}
		.totalshow_right{
		  width:20%;
		  color: #3d3934;
		  text-align: right;
		  font-family: "Montserrat-ExtraBold", sans-serif;
		  font-size: 32px;
		  letter-spacing: 0.01em;
		  font-weight: 800;
          float: left;		  
		}
		.inputarea{
		  width: 100%;
          height: 90px
		}
        .contact{
         width:90%;
        }
        .contactcontent{

	    }
        .contactcontent_space{
          width:32%;
          float: left;
          height:150px;
        }
        .contactcontent_middle{
          width:36%; 
	      color: #3d3934;			 
		  font-family: "Montserrat-Medium", sans-serif;
		  font-size: 16px;
		  line-height: 28px;
		  letter-spacing: 0.05em;
		  font-weight: 500;
		  float: left;
 
        }
        .button_checkout{
		  background: #756c61;
		  border-radius: 41px;
		  padding: 15px 25px 15px 25px;
		  display: flex;
          color:#FFFFFF;
		  flex-direction: row;
		  gap: 10px;
		  align-items: center;
		  justify-content: center;
		  flex-shrink: 0;
          font-size: 18px;
          line-height: 30px;
          width:300px;
        }

        #deliver_home{
        display:none;
        }
 
        #mobilebarcodeshow{
          display:none;
        }
        #invoicenoshow{
          display:none;
        }
        #invoicetitleshow{
          display:none;
        }
		.fixed-buttons {
		  position: fixed;
		  right: 20px;
		  bottom: 20px;
		  display: flex;
		  flex-direction: column;
		  gap: 10px;
		}

		.button {
		  width: 60px; /* 增大圓形尺寸 */
		  height: 60px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  border-radius: 50%;
		  background-color: #756C61;
		  color: white;
		  font-size: 14px;
		  text-align: center;
		  cursor: pointer;
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加陰影 */
		  transition: all 0.3s ease;
		  animation: shake 10s infinite; /* 添加動畫效果 */
		}

		.button:hover {
		  transform: translateY(-3px); /* 鼠標懸停效果 */
		}

		#btn3 {
		  border: 2px solid #756C61;
		  background-color: #ffffff;
		  color: #756C61;
		  font-size: 24px; /* 增大箭頭的大小 */
		  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 為箭頭圓圈加陰影 */
		}

		#btn0 span,#btn1 span, #btn2 span {
		  font-size: 14px; /* 調整文本大小 */
		}

		#btn3 span {
		  font-size: 28px; /* 增大箭頭圖示 */
		}

		/* 去除<a>標籤的底線 */
		#btn0 a,#btn1 a, #btn2 a, #btn3 a {
		  color: inherit; /* 繼承父元素顏色 */
		  text-decoration: none; /* 去除底線 */
		}

		/* 定義動畫效果 */
		@keyframes shake {
		  0% {
			transform: translateY(0); /* 初始位置 */
		  }
		  25% {
			transform: translateY(-10px); /* 向上移動 */
		  }
		  50% {
			transform: translateY(0); /* 回到原來位置 */
		  }
		  75% {
			transform: translateY(10px); /* 向下移動 */
		  }
		  100% {
			transform: translateY(0); /* 回到原來位置 */
		  }
		}
		.address img{
			width:6% !important;
			vertical-align:middle;
		}
        a{
			text-decoration: none;
			color:#3d3934;
		}
        .checkout{
		margin-top: 24px;				
		}		
	
}