@charset "utf-8";
/* CSS Document */
/*桌機板*/
.head{ width:100%; padding:1%; height:auto;
		text-align:center;	font-weight:bold;
	background-color:#000000;  }


.head a{  padding:1%; 
		font-size:24px;text-decoration:none;
		text-align:center;	font-weight:bold;
 color:#FFFFFF;}

.head a:hover{ 
    transform:translate(0,5px); color:#EDDB5F;
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}

/*圖片切換*/
.head .pic{
	width:100%;
	margin:0 auto;
	max-width: 1200px;
	padding:0;
	text-align:center;}
	
.head .pic-m{
	width:0;
	height:0;
	overflow:hidden;}

/*網路商成套版*/
.footer{
	padding-top:2%;
	width:100%;
	text-align:center;
	color:#666;
	background-color:#FFF;
	overflow:hidden;
	padding-bottom: 5%;
	margin: 0 auto;
}

.footer2 {
    justify-content: center; /* 將文本置中對齊 */
		margin:0 auto;
	text-align: center;
width:100%;
	max-width:1200px;
}

.container {
    display: flex; /* 使用 Flexbox 佈局 */
    justify-content: center; /* 內容水平置中對齊 */
    flex-wrap: wrap; /* 允許元素換行 */
		margin:0 auto;
	align-items:center;
}

.item {
    display: flex; /* 使用 Flexbox 佈局 */
    align-items: center; /* 垂直對齊 */
    margin-bottom: 20px; /* 可根據需要調整 item 之間的間距 */
	margin-top:1%; 
    flex: 0 0 calc(50% - 20px); /* 設置 item 寬度為容器的一半，減去間距 */
    max-width: calc(50% - 20px); /* 設置最大寬度為容器的一半，減去間距 */
    box-sizing: border-box; /* 讓寬度計算包含 padding 和 border */
	text-align: center;
	padding: 0 0 0 6%;
	justify-content: center;
}

.item .img {
    flex: 0 0 10%; /* 設置圖片容器的寬度 */
}

.item .img img {
    width: 100%; /* 圖片寬度填滿其容器 */
    height: auto; /* 自動調整圖片高度以保持比例 */
}

.item .text {
    flex: 1; /* 文字容器佔據剩餘空間 */
    padding-left: 2px; /* 可根據需要調整文字與圖片之間的間距 */
    font-size: 24px;
    color: #000000;
    font-weight: bold;
	text-align: left;
}


.shop_center{
	width:96%;
	max-width:980px;
	margin:0 auto;
	text-align: center;
	overflow:hidden;}
.shop_center .tri{
	width:100%;
	margin:0 auto;
	overflow:hidden;}


.shop_center .tri_area{
	width:33%;
	display: inline-block;
	text-align:center;}
.shop_center .tri_area .text{/*按鈕下的說明文字*/
	text-align:left;
	font-size:16px;
	color:#000000;
	padding-top:3%;
	padding-left:14%;}
.shop_center .tri_area .text li{
	list-style-type: square;
	list-style-image: url(../images/tri.png);
	vertical-align:middle;}
.shop_center .tri_area .onlineshop_btn{
	width:96%;
	margin:0 auto;}
.shop_center .tri_area .onlineshop_btn img{
	max-width:255px;}
.shop_center .tri_area p{
	line-height: 0.5em;
	}
/*購買方式*/	
.footer .content{
	padding:0;
	line-height:2em;
	overflow:hidden;}
.footer .content a{
	color:#666;
	text-decoration:none;}
.footer .content a:hover{
	color:#090;
	text-decoration:underline;}
.footer .content .subtitle{
	background-color:#CCCCCC;
	text-align:center;
	width:200px;
	margin:0 auto 10px;
	font-weight:bolder;
	font-size:18px;}
.about{
	float:left;
	width:33%;
	text-align:center;
	padding:10px 0;}
.howtobuy{
	float:left;
	width:33%;
	padding:10px 0;}
.howtobuy .payway{
	float:left;
	width:50%;}
.howtobuy .online{
	float:left;
	width:50%;}
.service{
	float:left;
	width:33%;
	padding:10px 0;}
.image{
	float:left;
	width:33%;
	padding:10px 0;}
	
@media screen and (max-width:767px){
/*網路商成套版*/
.footer{
	padding-top:20px;
	width:100%;
	text-align:center;
	color:#666;
	overflow:hidden;}
.shop_center{
	width:100%;
	height:auto;
	margin-bottom: 8vh;
	text-align: center;}
.shop_center .title{
	font-size:30px;
	font-weight:bolder;
	text-align:center;
	background-color:#02558B;/*標題底色改這*/
	color:#FFF;
	margin:1%;
	padding:1%;}
.shop_center .tri{
	width:90%;
	margin:0 auto;
	overflow:hidden;}
.shop_center .tri_area{
	width:100%;
	margin: 3% 0 1%;
	text-align:center;}
.shop_center .tri_area .text{/*按鈕下的說明文字*/
	text-align:left;
	color:#000000;
	padding-top:3%;
	margin:0px auto 15px;
	width:250px;}
.shop_center .tri_area p{/*按鈕下的說明文字*/
	font-size: clamp(1.5rem, 2.5vw, 2.5rem);
	margin: 3% 0 0 0;
	line-height: 0.6em;
	}	
.shop_center .tri_area .onlineshop_btn{
	width: 40vw;
	max-width:260px;
	margin:0 auto;}	
/*購買方式*/	
.footer .content{
	padding:0;
	line-height:2em;
	overflow:visible;
	display:block;
	width:100%;
	height:auto;
	margin:0;}
.footer .content a{
	color:#666;
	text-decoration:none;}
.footer .content a:hover{
	color:#090;
	text-decoration:underline;}
.footer .content .subtitle{
	border-top-width: 1px;
font-size: clamp(1.5rem, 2vw, 2rem);
	border-top-style: dashed;
	border-top-color: #666;
	text-align:center;
	width:70vw;
	padding: 1% 0;
	margin:0 auto;}

.about{
	width:100%;
	text-align:center;
	padding:10px 0;
	border:none;}
.howtobuy{ 
	width:100%;
	padding:10px 0;
	border:none;}
.howtobuy .payway{
	float:left;
	width:50%;}
.howtobuy .online{
	float:left;
	width:50%;}
.service{ 
	width:100%;
	padding:10px 0;
	border:none;}
.image{
	width:100%;
	padding:10px 0;
	border:none;}
.head{ width:100%; padding:1%;
	height:auto;
		text-align:center;
	font-weight:bold;
	background-color:#000000;  }

.head a{  padding:1vw; 
		font-size:4.5vw;
	line-height: 7vw;
		text-decoration:none;
		text-align:center;	
		font-weight:bold;
 color:#FFFFFF;}
.head .pic{
	width:0;
	height:0;
	overflow:hidden;}
.head .pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}
.head a:hover{ 
    transform:translate(0,5px); color:#EDDB5F;
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}

	
.footer2 {
    justify-content: center; /* 將文本置中對齊 */
		margin:0 auto 0;
	text-align: center;
}

.container {
    display: flex; /* 使用 Flexbox 佈局 */
    justify-content: center; /* 內容水平置中對齊 */
    flex-wrap: wrap; /* 允許元素換行 */
align-items:center;
}

.item {
    display: flex; /* 使用 Flexbox 佈局 */
    align-items: center; /* 垂直對齊 */
    margin-bottom: 1%; /* 可根據需要調整 item 之間的間距 */
	margin-top:1%; 
    flex: 0 0 calc(50% - 20px); /* 設置 item 寬度為容器的一半，減去間距 */
    max-width: calc(50% - 20px); /* 設置最大寬度為容器的一半，減去間距 */
    box-sizing: border-box; /* 讓寬度計算包含 padding 和 border */
	text-align: center;
	justify-content: center;
	padding: 0 1% 0 0;
}

.item .img {
    flex: 0 0 25%; /* 設置圖片容器的寬度 */
}

.item .img img {
    width: 100%; /* 圖片寬度填滿其容器 */
    height: auto; /* 自動調整圖片高度以保持比例 */
}

.item .text {
    flex: 1; /* 文字容器佔據剩餘空間 */
    padding-left: 3px; /* 可根據需要調整文字與圖片之間的間距 */
    font-size: 1.1em;
    color: #000000;
    font-weight: bold;
	text-align: left;
}
}