@charset "utf-8";

.backendpage .finput-list , .tbset{color:#333333; font-size:0.9em;}
.tbset thead td{ font-size:0.9em;} /*二級縮減*/

.section-backend{ max-width:1000px; margin-left:auto; margin-right:auto; }

/*================================================================================*/

.content-wrap.backendpage{
	margin-left:auto;
	margin-right:auto;
	width:80%;
}

/*---------------------*/

.backend-headline{ color:#333; font-weight:600;margin:15px 0; }
.backend-headline .title{position:relative; padding-left:25px;}
.backend-headline .title:before{
	position:absolute;
	top:50%;
	left:0;
	width:16px;
	height:16px;
	margin-top:-8px;
	content:"";
	background:#333333 url(../images/backend-arrow.png) no-repeat center;
	background-size:12px 12px;
}
.backend-arrow3 .title:before{
	background:#333333 url(../images/backend-arrow3.png) no-repeat center;
	background-size:12px 12px;
}

.backend-headline .subtitle{ margin-left:5px; font-size:0.7em;}

/*---------------------*/

.backend-box{}

/*---------------------*/

.border-pd{border:1px solid #e5e5e5; padding:30px;}
.border-pd > .backend-headline{ margin-top:0px; margin-right:0px;}


.backend-tips{ color:#999; font-size:0.9em; }


/* <<=== cart 購物車 =====================================================================================>> */

/*購物流程*/
.shopping-process-wrap{margin:30px 0 60px 0; text-align:center;}
.shopping-process-list li{
	position:relative;
	display:inline-block;
	margin:0 10px;
	color:#cccccc;
}
.shopping-process-list .photo , .shopping-process-list .tilte-box{
	display:inline-block;
	vertical-align:middle;
	margin:0px 3px;
	text-align:left;
}
.shopping-process-list .photo{ width:30px;}
.shopping-process-list .photo img{ display:block; width:100%; height:auto;}
.shopping-process-list .tilte-box .title , .shopping-process-list .tilte-box .subtitle{
	display:block; 
	width:100px; 
	line-height:1.4;
}
.shopping-process-list .tilte-box .subtitle{ font-size:0.9em;}
.shopping-process-list li:before{
	position:absolute;
	top:50%;
	right:-20px;
	width:14px;
	height:14px;
	margin-top:-7px;
	content:"";
	background:url(../images/icon-step-arrow.png) no-repeat center;
	background-size:cover;
}
.shopping-process-list li:last-child:before{ display:none;}

.shopping-process-list li.active .tilte-box .title , .shopping-process-list li.active .tilte-box .subtitle{ 
	color:#7b0000;
}
.shopping-process-list li.active:before{ 
	background:url(../images/icon-step-arrow-hover.png) no-repeat center;
	background-size:cover;
}

/*---------------------*/

/*付款方式*/
.payment-list{ font-size:0.9em;}
.payment-list li{ border-top:1px solid #e5e5e5;}
.payment-list li:last-child{ border-bottom:1px solid #e5e5e5;}

.payment-choose , .payment-title , .payment-txt { 
	display:inline-block; 
	vertical-align:middle; 
	padding:10px 0;
}
.payment-choose{ width:50px; text-align:center; background:#f4f4f4;}
.payment-title{ min-width:90px; padding:0 5px; border-right:1px solid #cccccc; }
.payment-txt { padding:0 10px;}

.shipment-list{ font-size:0.9em;}
.shipment-list li{ border-top:1px solid #e5e5e5;}
.shipment-list li:last-child{ border-bottom:1px solid #e5e5e5;}

.shipping-choose , .shipping-title , .shipping-txt { 
	display:inline-block; 
	vertical-align:middle; 
	padding:10px 0;
}
.shipping-choose{ width:50px; text-align:center; background:#f4f4f4;}
.shipping-title{ min-width:90px; padding:0 5px; border-right:1px solid #cccccc; }
.shipping-txt { padding:0 10px;}


/*---------------------*/

.tb-cart tr{ border-bottom: 1px solid #e5e5e5;}

.tb-cart .td-pic{ width:80px;}
.tb-cart .cart-pic{ display:inline-block;}
.tb-cart .cart-pic{ 
	display:inline-block; 
	position: relative;
	width: 50px;
	height: 50px;
	overflow: hidden;
}
.tb-cart .cart-pic img {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.tb-cart .td-name{ text-align:left;}

.tb-cart .td-num{ width:150px;}
.cart-qty-box:before, .cart-qty-box:after{ display:table; content:" " }
.cart-qty-box:after{ clear:both }
.cart-qty-box , .cart-refresh-btn{ display:inline-block; vertical-align:middle;}
.cart-qty-box .num-txt , .cart-qty-box .qtyminus{
	float:left;
	border:1px solid #cccccc;
	background:transparent;
	height:25px;
	text-align:center;
}
.cart-qty-box .num-txt{ 
	border-left-width:0px; 
	border-right-width:0px;
	padding:0 10px; 
	width:45px; 
	font-size:0.9em;
}
.cart-qty-box .qtyminus{ width:25px; cursor:pointer; color:#999}
.cart-qty-box .qtyminus:hover{ color:#000;}
.cart-refresh-btn{
	border:1px solid #cccccc;
	background:transparent;
	height:25px;
	padding:0 5px;
	cursor:pointer;
	color:#666666;
}
.cart-refresh-btn:hover{ border-color:#770000; background:#770000; color:#ffffff;}

.tb-cart .td-dollar{ width:80px;}

.tb-cart .td-price{ width:100px; text-align:right;}

.tb-cart .td-delete{ width: 50px;}
.delete-btn{display:inline-block; height:35px; width:35px;}
.delete-btn:before , .delete-btn:after{
	height: 3px;
	margin-top: 4px;
	margin-left: -7px;
	width: 15px;
}
.delete-btn:hover:before , .delete-btn:hover:after{background:#770000;}

/*---------------------*/

.total-area{ 
	position:relative; 
	font-size:0.9em; 
	text-align:right; 
	padding-right:55px;
	margin:10px 0;
 }
.total-list{ display:inline-block;}
.total-list li{ margin-bottom:5px;}
.total-list .price{ display:inline-block; width:100px;}
.total-list .redtxt{ color:red;}
.total-list .endtotal{ border-top:1px solid #cccccc; }
.total-list .endtotal .price{ font-size:1em; font-weight:600;}

.cart-axplain{ position:absolute; top:0; left:0; max-width:450px; text-align:left;}
.cart-axplain .title{ 
	display:inline-block; 
	background:#333; 
	color:#ffffff; 
	padding:1px 5px;
	line-height:1.4;
}

.cart-pro-info{ padding-left:15px; color:#666; font-size:0.85em; line-height:1.6;}



/* <<=== cart-confirm 購物車確認 ============================================================================>> */
.cart-confirm-set.total-area{padding-right:5px;}
.cart-confirm-set .payment-title{ font-weight:600;}


/* <<=== checkout 填寫配送資料 ============================================================================>> */
.chk-area{ font-size:0.8em; color:#666; display:inline-block; margin-left:25px;}
.chk-area .chkbtn , .chk-area .lab{ color:#333; vertical-align:middle;}


/* <<=== login 登入  =====================================================================================>> */
.fm-login{ max-width:350px;}

.fm-login .finput { padding-left:55px;}

.login-help-wrap{ text-align:center;}
.help-box{
	display:inline-block; 
	margin:0 10px 20px 10px;
	text-align:center;
	vertical-align:middle;  
}
.help-box .help-btn{
	background:transparent;
	border:1px solid #666666;
	color:#666666;
	display:inline-block;
	font-size:0.9em;
	padding:0em 1em;
	width:120px;
}
.help-box .help-info{ color:#999999; display:block; font-size:0.7em; margin-top:1px;}
.help-box:hover .help-btn{ border-color:#333; color:#333; }


/* <<=== register 註冊 ===================================================================================>> */
.fm-register{ max-width:800px;}

.agree-area{text-align:center;}
.agree-area , .agree-area a{}
.agree-area a{ font-weight:600;}
.agree-area a:hover{ color:#810000;}

.register-explain{ border:1px solid #ccc; padding:10px; margin-bottom:30px; }

/*-------------------------------*/

.address-box-list .ftext , .address-box-list .fselt{ margin-bottom:10px;}
.ftext.address-numbox{ display:inline-block; width:80px;}


/* <<=== forgot_password 修改密碼 =========================================================================>> */
.fm-forg-pwd{ max-width:400px; text-align:center;}
.fm-forg-pwd .ftext{ width:200px;}


/* <<=== center 會員中心 ==================================================================================>> */
.center-list{ text-align:center; }
.center-list li{ 
	display:inline-block;
	margin:0px 5px 20px 5px; 
	padding:5px; 
	text-align:center;
	width:150px; 
}
.center-item .pic{ 
	background:#000;  
	margin-bottom:10px; 
	border-radius:50%; 
	width:70px;
	margin:0 auto;
}
.center-item .pic img{ display:block; border-radius:50%;}
.center-item:hover .pic{ background:#B84F13; }
.center-item:hover .title a{ color:#B84F13;}


/* <<=== order 訂單查詢 ===================================================================================>> */
.orderpage-area{ max-width:960px; margin-left:auto; margin-right:auto;}
.orderpage-box{ padding-top:15px; padding-bottom:5px;}

.order-time-search .fline{ display:inline-block; margin-right:30px;}

.order-note{ font-size:0.7em; margin:30px 0 5px 0; color:#666; }

.tb-order a{ color:#000000; font-weight:600;}
.tb-order a:hover{color:#810000;}
.tb-order{ font-size:1em;}
.tb-order tr{ border-bottom: 1px solid #e5e5e5;}
.tb-order thead td{ font-size:0.9em;}

/*---------------------*/

.fm-order-rpt{ max-width:350px; }

/*---------------------*/
.order-ok-note{font-size:1em;color:#AD0506;margin:30px 0;}


/* <<=== revise 會員資料修改 ===============================================================================>> */
.fm-revise{ max-width:700px; }


/* <<=== change_password 修改密碼 =========================================================================>> */
.fm-change-pwd{ max-width:400px; }

.input-note{
	font-size:0.75em;
	color:#999;
	margin-top:4px;
}





/*地址套件 register.php, revise.php, checkout.php */
#twzipcode{
	margin-bottom:10px;
}

#twzipcode input , #twzipcode select{
	background: rgba(255,255,255,0);
	border: 1px solid #CCC;
	border-radius:1px;
	font-size:0.95em;
	height:30px;
	/*margin:5px 0;*/
	padding:0px 10px;
	width:auto;
	transition:All 0.5s ease;
	margin-right:5px;
}

#twzipcode input:focus , #twzipcode select:focus{ background-color: rgba(255,255,255,0); border-color:#999; outline: none;}

#twzipcode select{
	position:relative;
	padding-right:30px;
	min-width:100px;
	
	appearance:none;
    -webkit-appearance: none;
    -moz-appearance: none;
	background:url(../images/selt-arrow.png) no-repeat scroll right 10px center transparent;
}
#twzipcode select::-ms-expand { display: none; }


/*無匯款回報單提示*/
.register-wait{ text-align:center; margin:60px 0; color:#B84F13; }

.register-wait .icon{ 
	display:inline-block; 
	width:30px;
	height:30px;
	border:1px solid #B84F13;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	background:#B84F13;
	color:#fff;
	margin-right:10px;
	vertical-align:top;
	font-weight:600;
}


/* <<====================================================================>> */
/* <<====================================================================>> */

@media (max-width:1200px) {
	.backend-wrap{width:100%;}
	
	.content-wrap.backendpage{ width:100%; }
	
}

@media (max-width:960px) {

	.border-pd{padding:15px;}
	
	/*---------------------*/
	
	.payment-title{ border-right-color: transparent;}
	.payment-txt { display:block; padding:5px 0 5px 60px;}
	
	.cart-confirm-set .payment-txt { padding-left:5px;}
	
	/*---------------------*/
	
	.tb-cart-total{ width:60%;}
	.cart-axplain{ position:relative; margin-top:30px; width:100%;}
	
	/*---------------------*/
	
	.agree-area{ text-align:center;}
}


@media (max-width:768px) {
	
	.shopping-process-list li .photo {display:none;}
	.shopping-process-list li .tilte-box{ text-align:center;}
	
	/*.shopping-process li .icon , .shopping-process li .tilte-box{display:inline-block;}
	.shopping-process li .tilte-box{width:100px; text-align:left;}
	
	.cart-process li:nth-child(3) , .cart-process li:nth-child(4) , 
	.cart-confirm-process li:nth-child(1) , .cart-confirm-process li:nth-child(4) ,
	.checkout-process li:nth-child(1) , .checkout-process li:nth-child(2){ 
		display:none;
	}
	
	.cart-process li:nth-child(2):before , 
	.cart-confirm-process li:nth-child(3):before , 
	.checkout-process li:nth-child(4):before{ 
		display:none;
	}*/
	
	/*---------------------*/
	
	.tb-cart-total{ width:80%;}
	
	/*---------------------*/
	
	.cart-pro-info{ padding-left:0px;}
	
}


@media (max-width:640px) {
	.border-pd{border-color:transparent; padding:0px;}
	
	/*---------------------*/
	
	.tb-cart tr:nth-child(1){ border-top: 1px solid #e5e5e5;}
	
	.tb-cart .td-pic{ display:none;} /*購物車圖片欄位拿掉*/
	
	.tb-cart .td-num{/* width:100px;*/}
	.tb-cart .cart-refresh-btn{display:inline-block; margin-top:10px; width:85px;}
	
	.tb-cart .td-price{ width:65px; text-align:center;}
	
	.total-area{ padding-right:5px;}
	
	/*---------------------*/
	
	.center-list li{ display:block; width:100%; padding:10px 0; margin-left:0; margin-right:0;}
	.center-item{ position:relative; text-align:left; border:1px solid #999;}	
	.center-item .pic { 
		position:absolute; 
		top:5px; 
		left:5px; 
		width:50px; 
		height:50px; 
		background:#666666;
	}
	.center-item .title{ line-height:60px; padding-left:65px;}
	.center-item .title a{ display:block; }
	
	/*================================================================================*/
	
	.shopping-process-wrap{margin-bottom:45px;}
	.shopping-process-wrap:before , .shopping-process-wrap:after{ display:table; content:" " }
	.shopping-process-wrap:after{ clear:both }
	.shopping-process-list li{
		position:relative;
		float:left;
		display:block;
		width:48%;
		margin:10px 0 0 0;
		padding:0px;
		padding-left:26px;
		color:#999;
	}
	.shopping-process-list li:nth-child(1) , .shopping-process-list li:nth-child(3){ margin-right:4%;}
	.shopping-process-list li:before{ display:none;}
	.shopping-process-list .tilte-box{ display:block;}
	.shopping-process-list .tilte-box .title , .shopping-process-list .tilte-box .subtitle{ display:inline-block; width:auto; }
	
	.shopping-process-list .tilte-box .title .step-title{ display:none; }
	.shopping-process-list li .tilte-box .title{ position:absolute; top:1px; left:0; border:1px solid #e0e0e0; padding:2px 7px; }
	
	.shopping-process-list li.active .tilte-box .title{ background:#7b0000; color:#FFF;}
	.shopping-process-list li .tilte-box .subtitle{ display:block; border:1px solid #e0e0e0; padding:4px 5px; text-align:left; width:100%;}
	.shopping-process-list li.active .tilte-box .subtitle{ border-color:#7b0000; }
	
	
	
	
	
	
	/*================================================================================*/
	
	/*響應式表格*/
	/* Force table to not be like tables anymore */
	.res-tb , .res-tb thead , .res-tb tbody , .res-tb th , .res-tb td , .res-tb tr {display: block;}
	
	/* 隱藏 table headers (but not display: none;, for accessibility) */
	.res-tb thead tr {position: absolute; top: -9999px; left: -9999px;}
	
	.res-tb thead , .res-tb tr{border:0px solid transparent;}
	
	/*讓每列表格全寬100%*/
	.res-tb td{
		border:0px solid transparent;
		border: 1px solid #cccccc;
		border-bottom:0px solid transparent;
		position: relative;
		padding:7px 10px 7px 120px;
		text-align:left;
		width:100%;
	}
	
	.res-tb td:last-child{border-bottom:1px solid #E6E6E6;}
	
	/*每個項目*/
	.res-tb tr{margin-bottom:15px;}
	
	.res-tb tr:nth-of-type(even) td{background:rgba(209,209,209, 0.2); }
	
	/*螢幕縮小後的標題*/
	.res-tb td:after {
		position: absolute;
		top:50%;
		left: 6px;
		font-size:1em;
		line-height:2;
		margin-top:-16px;
		vertical-align:middle;
		white-space: nowrap;
		width: 80px;
	}
	
	/*訂單查詢*/
	.tb-order td:nth-of-type(1):after { content: "訂單編號"; }
	.tb-order td:nth-of-type(2):after { content: "訂購日期"; }
	.tb-order td:nth-of-type(3):after { content: "訂單總額"; }
	.tb-order td:nth-of-type(4):after { content: "處理進度"; }
	.tb-order td:nth-of-type(5):after { content: "付款回報"; }
	.tb-order td:nth-of-type(6):after { content: "詳細資訊"; }
	
	/*================================================================================*/
	/*================================================================================*/
	
	
}


@media (max-width:480px) {
	
	.backend-headline .subtitle{ display:none;}
	
	
	.tb-cart .td-dollar{display:none;} /*購物車單價欄位拿掉*/
	
	.chk-area{ display:block; margin-left:0px; margin-top:10px;}
	
	
	.finput-list .finput{ margin-bottom:30px;}
	
	.absolute-lab .flab{position:relative; display:inline-block; margin-bottom:5px;}
	.absolute-lab .finput{ padding-left:0px;}
	
	/*---------------------*/
	
	.tb-cart-total{ width:100%;}
	
	/*---------------------*/
	
	.cart-pro-info{ display:none; }
}