/*銷售排行榜頁****************/

.rankingZone{padding:50px 0;}

/*大的銷售排行*******/
.rankPrdList2{justify-content:flex-start;}
.rankPrdList2 li{margin-bottom:50px; }
.rankPrdList2 li a{flex-direction:column;background:none;border-radius:0;}
.rankPrdList2 li aside{width:auto;height:200px}
.rankPrdList2 li article{background:none;text-align:center;}

.rankPrdList2 li a:hover{box-shadow:none;}

.rankPrdList2 li article h3{font-size:15px;}
.rankPrdList2 li article h4{font-size:18px;}



/*遊戲列表頁****************/
.prdListZone{padding:80px 0;}
.hotPrdList2{justify-content:flex-start;}
.hotPrdList2 li{width:20%;}

@media(max-width:960px){
	.hotPrdList2 li{width:25%;}
}

@media(max-width:767px){

	.prdListZone{padding:50px 0;}

	.rankPrdList2 li{width:50%;margin-bottom: 20px;}
  .rankPrdList2 li aside{height:auto;}

  .hotPrdList2 li{width:33.33%;padding:5px;}
  .hotPrdList2 li aside{padding:10px;}
  .hotPrdList2 li aside img{border-radius:10px;}

  .hotPrdList li aside h3{height:2em;font-size:13px;font-weight:700;letter-spacing:0}

}


/*序號領取頁****************/
.serialZone{padding:80px 0;}

.serialListZone{}
.serialList2 {justify-content:space-between;margin-bottom:50px;}
.serialList2 aside{width:500px;height:300px;}

.serialList2 article{
	  padding:20px 50px;    

  }
.serialList2 article p{font-size:13px;margin-bottom:20px;}
.serialList2 article h4{font-size:25px;font-weight:700;color:#38654C;letter-spacing:0;margin:.2em 0 .5em}
.serialList2 article h5{font-size:13px;font-weight:500;background:#333;display:inline-block;color:#fff;
	                              padding:.3em .5em;width:6em;border-radius:10px;
	                              text-align:center;
                               }


.serailGet{display:flex;flex-direction: column;}
.serailGet dl{background:#FFF;justify-content:flex-start;margin-bottom:2px;}
.serailGet dt{background:#208174;color:#fff;padding:1em;width:80px;text-align: center;}
.serailGet dd{padding-left:2em}

.serialHistory{}
.serialHistory table{}
.serialHistory table thead tr{background:var(--green) !important;color:#fff;}
.serialHistory table tbody{font-size:13px;}


.serialNumList{margin-top:40px !important;}
.serialNumList li{margin-bottom:.5em}
.serialNumList b{border: 1px solid #333;padding: .2em 1em}
.serialNumList button{line-height:1.8;min-width:auto;font-size:13px;background:#333;margin-left:.5em}


/*交易清單、紀錄**********/
.orderResult{margin-bottom:30px;}


.orderList{margin-bottom:30px;}

.orderListTxt{}
.orderListTxt li{justify-content:flex-start;margin-bottom:1em}
.orderListTxt li>div{align-items:stretch;}
.orderListTxt li>div input{width:3em;padding:0;text-align:center;}
.orderListTxt li>div button{min-width:1.5em;line-height:1.8;background:#666}


.paymentList{margin:30px 0;}
.paymentList li{
	flex:1;
	border:1px solid #ccc;border-radius:10px;margin:15px 5px;font-size:20px;
}
.paymentList li:hover{border-color:var(--green);}

.paymentList li input{width:30px;}
.paymentList li img{height:50px;flex:1;object-fit:contain;object-position:right;}
.paymentList li p{width:250px;}

.paymentList li>label{height:100px;padding:0 20px;cursor:pointer;}

/*訂單發票********/
.invoiceList{margin:30px auto;}
.invoiceList li{flex:0 0 33.33%;padding:0 5px;margin-bottom:30px;}
.invoiceList li h5{margin-bottom:.5em}

.invoiceList li.address{flex:100%}
.invoiceList li.address select{width:10em;}

.invoiceList li.phone{flex:100%}
.invoiceList li.phone select{width:10em;}


.invoiceWayList{margin:30px auto;}
.invoiceWayList>li + li{border-top:1px dashed #ccc;padding-top:2em;margin-top:2em}
.invoiceWayList h3{font-size:18px;}
.invoiceWayList input[type=radio]{margin-right:1em}

.invoiceWayList ol li b{white-space:nowrap;margin-right:1em}
.invoiceWayList ol li {margin-bottom:.5em;justify-content:flex-start;}
.invoiceWayList ol li  input[type=text]{padding:.8em;max-width:350px;}

.invoiceWayList .well{padding:.5em 2em;font-size:13px;}


@media(max-width:960px){
		.invoiceList li{flex:100%;}
		.invoiceList li.address>div{flex-wrap:wrap;}
		.invoiceList li.address select{flex:50%}

		.invoiceWayList ol li b{font-size:13px;}
		
	}


@media(max-width:767px){

	.invoiceWayList ol li {flex-direction: column;align-items:flex-start;}

	.serialList2 aside{
		width:100%;
		height:auto;
	}
   
  .serialHistory table th{
	   white-space: nowrap;
	}

	.paymentList {flex-direction:column;}



}


/*站內公告頁面**************/
.newsZone{padding:80px 0;}     

.newsContent{	
	max-width:1000px;
	margin:0 auto 30px;
}                          
.newsContent h2{color:var(--blue);font-size:25px;margin-bottom:1em}    

.newsContentEdit{
	border-top:2px dotted #eee;
	border-bottom:2px dotted #eee;
	padding:20px;
  
}       

.newsContentEdit h4{margin-bottom:.3em}
.newsContentEdit p{margin-bottom:.8em;font-weight:400}


/*QA頁面*****************************************/
.qaZone{padding:80px 0;}

.qaList{
	margin:auto;
	counter-reset: qa-counter; /* 初始化計數器 */
}
.qaList>li{
	counter-increment: qa-counter; /* 每個 li 自動 +1 */
	background-color:var(--green);    
	padding: 30px;
	border-radius: 35px;
	margin-bottom:30px;
}
.qaList li h5{color:#fff;font-size:20px;margin-bottom:.5em;padding-left:1em;}

.qaList li h5::before {
  content: "Q" counter(qa-counter) "："; /* 自動加上 Q1、Q2... */
  font-weight: bold;
  margin-right: 0em;
}

.qaList>li article{
	background-color:#EFFFF9;font-size:15px;
	padding: 20px 30px;
	border-radius: 30px;
	filter: var(--shadow);
}

.termList  li h5::before {
	content: counter(qa-counter) "、"; /* 自動加上 Q1、Q2... */
}

@media(max-width:767px){

	.qaList>li{margin-bottom:15px}
	.qaList li h5{ font-size: 20px; padding-left: 0.5em;}
	.qaList>li article{font-size:13px;padding:15px;    border-radius: 10px;}

}  




/*客服中心頁面*****************************************/
.serviceZone{padding:80px 0;}    
.serviceZone h3{font-size:20px;}

.serviceList{margin:50px auto 20px;}
.serviceList li{flex:50%;text-align:left;margin-bottom:20px;padding:0 15px;}
.serviceList li h5{margin-bottom:.3em;font-weight:700;font-size:15px;}
.serviceList li textarea{height:8em}

.serviceList li select{
    background-color: #a6d7d1;
    box-shadow: none;
    color: #fff;
    }

@media(max-width:767px){
	.serviceZone h3{margin-bottom:1em}
	.serviceZone p{font-size:13px;}

	.serviceList li{flex:100%}

}


/*會員登入頁面*****************************************/
.loginZone{padding:80px 0;}

.loginList{max-width:500px;}
.loginList li{margin-bottom:20px;padding:0 5px;}
.loginList li h5{margin-bottom:.3em;font-weight:700;font-size:15px;}

.loginZoneTxt {}
.loginZoneTxt .txtL{position:relative;}
.loginZoneTxt .txtL:after{
	content:"or";border-radius:15px;color:#fff;
	background: #646464;display:block;position:absolute;text-align:center;
	padding:20px 3px;right:0;top:50%;transform:translate3d(50%, -50%, 0px);
}

.loginZoneTxt .txtR{flex:1;}

.loginSocailBtn{}
.loginSocailBtn li{margin-bottom:20px;text-align:right;}
.loginSocailBtn li img{max-height:130px;}
.loginSocailBtn li img:hover {transform:translateY(10px);}

@media(min-width:768px){
	.loginZoneTxt .txtL{width:50%;border-right:1px solid #ccc;padding-right:50px;}
	.loginZoneTxt .txtR{padding-left:50px;}
}

@media(max-width:767px){
 .loginZone{padding:30px 0;}
 .loginZoneTxt .txtL{padding:0 30px 30px;border-bottom: 1px solid #ccc;}
 .loginZoneTxt .txtR{padding:50px 0 ;width: 90%;}

 .loginZoneTxt .txtL:after{right:50%;top:auto;bottom:0;transform:translate3d(50%, 50%, 0px);padding:2px 30px;}

 .txtR .btnAll{text-align:center;}
 .txtR .btnAll button{width:90%;margin-top:20px;}

}

/*消費紀錄頁面*****************************************/
.historyZone{padding:80px 0;} 
.historyZone h3{margin-bottom:10px;} 

.payHistoryList{}
.payHistoryList>li{
	display:flex;justify-content:space-between;align-items: flex-end;
	padding:30px 20px;border-bottom:2px dotted #999;
}

.payHistoryList>li .txtL h2{font-size:18px;margin-bottom:.2em}
.payHistoryList>li .txtL h3{font-size:16px}
.payHistoryList>li .txtL ul{margin:20px 0 0}
.payHistoryList>li .txtL ul>li{line-height:1;color:#444}

.payHistoryList>li .txtR{text-align:right;}
.payHistoryList>li .txtR button{font-size:15px;margin-bottom:.5em;line-height:2}
.payHistoryList>li .txtR h4{font-size:15px}

@media(max-width:767px){
	.historyZone{padding:30px 0;} 
	.payHistoryList>li{flex-direction: column;align-items: flex-start;}
	.payHistoryList>li .txtL{margin-bottom:20px;}

	.payHistoryList>li .txtR{text-align:left;}
}


/*產品品牌頁面*****************************************/
.brandPrdList{}
.brandPrdList li{flex:50%;padding:15px;}

.brandPrdList li>a{
		background:var(--green2);
		display: block;
		padding:25px;
		border-radius:15px;
}

.brandPrdList li aside{align-items: stretch;filter: var(--shadow);transition:all .3s;}
.brandPrdList li aside>img{width:130px;border-radius:15px 0 0 15px;}
.brandPrdList li aside>div{
	flex:1;background:#fff;border-radius:0 15px 15px 0;
	padding:15px;
	display:flex;
	justify-content: center;
  flex-direction: column;
}

.brandPrdList li aside:hover{transform:translateY(-5px);}

.brandPrdList li aside>div h3{font-size:15px;color:#333;font-weight:700;}
.brandPrdList li aside>div h4{font-size:25px;color:var(--red);font-weight:bold;margin-left:.5em}
.brandPrdList li aside>div h4:before{content: "NT$";font-size:.8em}
.brandPrdList li aside>div h4:after{content: "元";font-size:.8em}


.brandZone{margin-bottom:50px;}
.brandZone aside{width:40%;}
.brandZone article{padding:0 30px; flex: 1;}
.brandZone article h2{color:var(--blue);}
.brandZone article p{margin-bottom:1em;}
.brandZone article a{color:var(--org);}


@media(max-width:960px){
	.brandPrdList li{padding:5px;}
	.brandPrdList li>a{padding:15px;}
	.brandPrdList li aside>img{width:120px;}
}


@media(max-width:767px){
	.brandZone{flex-direction: column;}
	.brandZone aside{width:90%;margin-bottom:50px;}

	.brandPrdList li{padding: 10px;flex:100%;}
}	


/*產品列表******************************************/
.prdZone{}
.prdZone aside{width:50%;}
.prdZone aside img{max-width:400px;}

.prdZone article{padding:0 30px;flex:1}

.prdZone article .price {margin-bottom:10px;}
.prdZone article .price b{font-size:60px;color:var(--pink);vertical-align:middle;}
.prdZone article .price b:after{font-size:20px;content:"元"}

.prdZone article .price small{
	background:var(--pink);color:#fff;padding:.7em 1em;
	margin-right:30px;
	font-size:12px;vertical-align:middle;
	position:relative;
}

.prdZone article .price small:after{
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	content:"";
	display:inline-block;
	background:var(--pink);
	width: 20px;height:20px;
	position:absolute;
	right:-15px;top:5px;
}


.prdDetailZone{margin-top:-30px; padding-bottom:50px;}
.prdDetailZone .container{max-width:1100px;margin: auto;}

.prdDetailZone .prdEditor{padding:30px 20px;}
.prdDetailZone .prdEditor h4{font-weight:700;margin-bottom:.5em;}
.prdDetailZone .prdEditor ol,
.prdDetailZone .prdEditor p
{margin-bottom:2em;}

@media(max-width:960px){
	.prdZone aside {width:40%;}
	.prdZone article h2{font-size:25px;}
}


@media(max-width:767px){
   .prdZone{flex-direction:column;margin-bottom:20px;}
   .prdZone aside{width:80%;margin-bottom:30px}

   .prdZone article{padding:0;}
   .prdZone article h2{font-size:25px;font-weight:700;letter-spacing:0}

}

/*載具歸戶******************************************/
.invoiceZone>div{padding:50px 15px;margin:auto;max-width:1000px;}
.invoiceZone h3{margin-bottom:30px;}
.invoiceZone p{margin-bottom:15px;}

..invoiceList{margin-top:50px;max-width:1000px;}
..invoiceList li h5::before {
  content: "步驟" counter(qa-counter) "："; /* 自動加上 Q1、Q2... */
}



/*手機驗證******************************************/
.phoneVerifiedZone{margin:50px auto;max-width:600px;}
.phoneVerifiedZone ul{margin-bottom:50px;}
.phoneVerifiedZone ul li{margin-bottom:.5em;align-items: stretch;}
.phoneVerifiedZone ul li button{background:var(--org);}
.phoneVerifiedZone ul li button:disabled{background:#999;cursor:no-drop;}

.phoneVerifiedZone .well{font-size:13px;color:red;padding:.5em 1em;text-align: center;}