@charset "utf-8";

.backend-frame{
	color:#333;
	font-size:15px;
	margin:0 auto;
	padding:40px 10px;
	text-align:left;
	letter-spacing:1px;
}
.backend-frame a{ color:#595757; text-decoration:none; }
.backend-frame a:hover{ color:#333; }

.login-frame , .forgot-password-frame , .change-password-frame , .order-report-frame{ max-width:400px;}
.revise-frame{ max-width:600px;}
.register-frame , .center-frame{ max-width:700px;}
.cart-frame , .cart-confirm-frame , .checkout-frame , .order-frame , .order-view-frame { max-width:900px;}
@media (max-width:960px) {
	.backend-frame{ padding:20px 5px; }
}


/*大標*/
.backend-hedline{
	position:relative;
	z-index:1;
	padding:5px 5px;
	margin-bottom:20px;
}
.backend-hedline:before{
	position:absolute;
	z-index:-1;
	bottom:-12px;
	left:10px;
	width:0;
	height:0;
	content:"";
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	border-top:15px solid #fff;
}
.backend-hedline.pink-bg{ background:#F3A6B1; }
.backend-hedline.pink-bg:before{ border-top-color:#F3A6B1; }
.backend-hedline.blue-bg{ background:#7F9FCF; }
.backend-hedline.blue-bg:before{ border-top-color:#7F9FCF; }
.backend-hedline.green-bg{ background:#90BBA3; }
.backend-hedline.green-bg:before{ border-top-color:#90BBA3; }


.backend-hedline .title{
	display:block;
	text-align:center;
	font-size:1.5em; 
	font-weight:bolder;
	color:#fff;
	border-top:1px dashed #fff;
	border-bottom:1px dashed #fff;
	padding:5px 0;
}
@media (max-width:768px){
	.backend-hedline{ margin-bottom:35px; padding-top:3px; padding-bottom:3px; }
	.backend-hedline:before{ left:5px; }
	.backend-hedline .title{ padding:2px 0; }
}



/*導覽路徑*/
.backend-breadcrumb{
	position:absolute;
	bottom:9px;
	right:5px;
	font-size:0.8em;
	line-height:1.5;
}
.backend-breadcrumb li{ display:inline-block; }
.backend-breadcrumb span:after{ content:"/"; font-size:10px; margin-left:5px; }
.backend-breadcrumb span:last-child:after{display:none;}
.backend-breadcrumb , .backend-breadcrumb a{ color:#fff; }
.backend-breadcrumb a:hover{ color:#333; }

@media (max-width:768px){ 
	.backend-breadcrumb{
		bottom:-27px; 
		right:0;
		width:100%;
		margin-top:20px; 
		text-align:center;
	}
	.backend-breadcrumb , .backend-breadcrumb a{ color:#666; }
	.backend-breadcrumb a:hover{ color:#5d9dcb; }
}






/*分類區塊*/
.modal-wrap{ margin-bottom:45px; }
.modal-wrap-border{ 
	border:1px solid #ccc; 
	padding:15px 20px 10px 20px;
	
	-ms-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-o-bborder-radius:4px;
	border-radius:4px;
}
.modal-headline{ margin-bottom:15px; }
.modal-icon{
	display:inline-block;
	vertical-align:middle;
	background:#333;
	width:17px;
	height:17px;
	padding:1px;
}
.modal-icon img{ display:block; max-width:100%; height:auto; }
.modal-heading{
	display:inline-block; 
	vertical-align:middle; 
	font-size:15px; 
	font-weight:600;
}
.modal-subheading{
	display:inline-block; 
	vertical-align:middle; 
	font-size:12px;
	font-weight:600;
}
@media (max-width:768px) { .modal-wrap-border{ border-width:0px; padding:0px; } }


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



/*購物車等頁面-表單元件基本設定*/
.backend-frame input[type="text"] , .backend-frame input[type="password"] , .backend-frame input[type="date"] , 
.backend-frame select , .backend-frame textarea , .backend-frame input[type="button"]{
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
	color: #333;
	font-size: 1em;
	line-height: 1.4;
	padding: 6px 10px;
	vertical-align:middle;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.backend-frame input::-webkit-input-placeholder , .backend-frame textarea::-webkit-input-placeholder{ color: rgba(51,51,51, 0.6); font-size:0.95em;}
.backend-frame input::-moz-placeholder , .backend-frame textarea::-moz-placeholder { color: rgba(51,51,51, 0.6); font-size:0.95em;}
.backend-frame input::-ms-input-placeholder , .backend-frame textarea::-ms-input-placeholder { color: rgba(51,51,51, 0.6); font-size:0.95em;}
.backend-frame input::-moz-placeholder , .backend-frame textarea::-moz-placeholder { color: rgba(51,51,51, 0.6); font-size:0.95em;}

.backend-frame input:focus , select:focus{ 
	border-color: rgba(13,105,231, 0.2);
    box-shadow: 0 1px 1px rgba(13,105,231, 0.075) inset, 0 0 5px rgba(13,105,231, 0.1);
    outline: 0 none;
}

.backend-frame input[type="button"]{ cursor:pointer; }

.backend-frame select{
	appearance:none;
	background:url(../images/selt-arrow.png) no-repeat scroll right 5px center transparent;
	padding-right:25px;
	-webkit-appearance: none;
    -moz-appearance: none;
}
.backend-frame select::-ms-expand { display: none; }

.backend-frame label{ line-height:1.4; }

.backend-frame button , .backend-btn{
	background: #4d4d4d;
	border: 1px solid #4d4d4d;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	min-width:120px;
	margin-bottom:15px;
	padding: 6px 15px;
}
.backend-frame button:hover , .backend-btn:hover{
	background:#5e5e5e; 
	border-color:#5e5e5e; 
	color:#ffffff; 
	outline: none;
}

.backend-btn{ margin:0px 12px; font-size:1.05em;}

/*返回或取消用淺按鈕*/
.backend-btn.back-btn{ background:transparent; color: #999; border-color: #999; }
.backend-btn.back-btn:hover{ background:transparent; color: #666; border-color: #666; }

/*結帳最後紅底提醒*/
.backend-btn.end-btn:hover{ border-color:#810000; background:#810000; color:#FFF; }


/*按鈕列，不在form中*/
.backend-btn-line{ text-align:center; margin:30px 0; }


/*粉色按鈕按鈕*/
.backend-btn.pink-btn{ background:#F3A6B1; color:#fff; border-color: #F3A6B1; }
.backend-btn.pink-btn:hover{ background:#f5b7c0; color: #fff; border-color: #f5b7c0; }

/*綠色按鈕按鈕*/
.backend-btn.green-btn{ background:#90BBA3; color:#fff; border-color: #90BBA3; }
.backend-btn.green-btn:hover{ background:#a6c8b5; color: #fff; border-color: #a6c8b5; }

/*藍色按鈕按鈕*/
.backend-btn.blue-btn{ background:#7F9FCF; color:#fff; border-color: #7F9FCF; }
.backend-btn.blue-btn:hover{ background:#98b2d8; color: #fff; border-color: #98b2d8; }




/*核取方塊*/
.checkbox-group {
    position:relative;
	display:inline-block;
    padding-left:18px;
}
.checkbox-group input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    margin: auto;
}
.checkbox-group input[type=checkbox] + .checkbox-title{ display:inline-block; height:25px; line-height:22px; }



/*表單基本排版設定*/
.form .form-line{ margin-bottom:20px; }
.form .form-inline{ margin-bottom:15px; display:inline-block; }
.form .form-btn-line{ margin:30px 0; text-align:center; } /*按鈕列*/
.form .control-label{ margin-bottom:2px; }
.form .control-remind{ color:#999; font-size:12px; }/*文字欄位說明提醒*/

.form-line.center-line{ text-align:center; }
.form-line.right-line{ text-align:right; }


/*表單固定標題px寬之水平設定*/
.form-inline-set .form-line{ display: table; border-collapse:separate; width:100%;}
.form-inline-set .control-label{
	display: table-cell;
	min-width: 82px;
    white-space: nowrap;
	vertical-align:top;
	padding-top:6px;
	padding-right:10px;
}
.form-inline-set .control-wrap{ display: table-cell; width: 100%; }
.form-inline-set .control-input{ width:100%;}
@media (max-width:768px) { 
	.form-inline-set .control-label , .form-inline-set .control-wrap{ display:block; }
	.form-inline-set .control-label{ margin-bottom:5px; }
}


/*必填提醒*/
.form .require-remind-line{ font-size: 0.9em; margin:0px 0 2px 0; text-align:right; }
.require-mark{ color:red; display:inline-block; vertical-align:text-top; width:8px; font-size:0.85em; }


/*區分標題之後有必填提醒，則縮減間距*/
.modal-headline + .require-remind-line{ margin-top:-15px;}



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

/*表格*/
.tbset{
	border: 1; 
	border-collapse: collapse;/*讓表格間無間隔*/
	width:100%;
}
.tbset td{ padding:10px 5px;}
.tbset thead{ font-size:0.95em; }


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


/*會員登入*/
.login-help-wrap{ margin-top:20px; text-align:center; }
.help-box{
	display:inline-block; 
	margin:0 10px 15px 10px;
	text-align:center;
	vertical-align:middle;  
}
.help-box .help-btn{
	background:transparent;
	border:1px solid #999;
	color:#999;
	display:inline-block;
	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:#666; color:#666; }


/*忘記密碼*/
.fgt-pwd-input{ width:250px;}


/*註冊*/
.register-explain{ margin-bottom:30px; border:1px solid #ccc; padding:10px; color:#333; }



/*會員中心*/
.center-list{ padding:80px 0; }
.center-list li{ display:inline-block; margin:10px 40px; }
.center-item{ text-align:center; }
.center-item .photo{ max-width:100px; margin-bottom:5px; }
.center-item .photo img{ display:block; max-width:100%; height:auto; }
.center-item .title a{ font-size:0.95em; }

.center-item:hover .photo{ opacity:0.9; }
.center-item:hover .title a{ color:#5d9dcb; }
@media (max-width:768px) {
	.center-list li{ margin-left:20px; margin-right:20px; } 
}
@media (max-width:640px) { 
	.center-list{ padding:20px 0; }
}




/*訂單查詢-查詢區塊*/
.order-search .form-inline{ margin-bottom:5px; }
.order-search .control-input{ max-width:180px; }

/*訂單查詢-訂單列表*/
.order-list{ border: 1px solid #ccc; padding:20px; }
@media (max-width:768px) { .order-list{ border-width:0px; padding:0px; } }

.tb-order thead , .tb-order tr{ border-bottom: 1px solid #e5e5e5; }
.tb-order tr:last-child{ border-bottom-width: 0px; }
.tb-order td{ text-align:center; min-width:45px; }

.tb-order a{ color:#000000; font-weight:600;}
.tb-order a:hover{color:#810000;}




/*填寫付款資訊*/
.order-rpt-note{ text-align:center; margin:60px 0; }
.order-rpt-note .icon{ 
	display:inline-block; 
	width:30px;
	height:30px;
	border:1px solid #666;
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
	color:#666;
	margin-right:10px;
	vertical-align:top;
	font-weight:600;
	
}






/*購物流程*/
.shop-process-area{ margin-bottom:15px; text-align:center; }
.shop-process-list{ display:inline-block; }
.shop-process-list li{ display:inline-block; }
.shop-process-item{
	position:relative;
	display:inline-block;
	width:135px; 
	border:1px solid #ccc; 
	padding:2px 5px; 
	border-radius:3px; 
	margin:0 5px 15px 5px;
	background:#fff;
	color:#ccc;
	font-size:12px;
}
.shop-process-item:before, .shop-process-item:after{ display:table; content:" " }
.shop-process-item:after{ clear:both }
.shop-process-item:before{
	position:absolute;
	top:50%;
	right:-6px;
	width:10px;
	height:10px;
	margin-top:-5px;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-radius:3px; 
	background:#fff;
	content:"";
	
	transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.shop-process-list li:last-child .shop-process-item:before{ display:none; }

.shop-process-step , .shop-process-box{ display:inline-block; vertical-align:bottom; line-height:1.2; }

.step-txt , .step-num{ display:block; width:42px; font-weight:600; }
.step-num{ font-size:28px;}

.shop-process-photo{ width:35px; background:#ccc; }
.shop-process-photo img{ display:block; max-width:100%; height:auto; }
.shop-process-tilte{ margin-top:2px; letter-spacing:0px; }

.shop-process-list li.cart-checked .shop-process-item{ color: #666; border-color: #666;  }
.shop-process-list li.cart-checked .shop-process-item:before{ border-color: #666; }
.shop-process-list li.cart-checked .shop-process-photo{ background:#666; }

.shop-process-list li.active .shop-process-item{ color: #5d9dcb; border-color: #5d9dcb;  }
.shop-process-list li.active .shop-process-item:before{ border-color: #5d9dcb; }
.shop-process-list li.active .shop-process-photo{ background:#5d9dcb; }
@media (max-width:640px) {
	.shop-process-list li{ float:left; display:block; width:50%; text-align:left; }
	.shop-process-item{ text-align:left; }
	.shop-process-list li:nth-child(2n) .shop-process-item:before{ display:none; }
	.shop-process-list li:nth-child(2n+1){ text-align:right; }
}
@media (max-width:300px) {
	.shop-process-item{ margin-left:2px; margin-right:2px; }
	.shop-process-item:before{ display:none; }
}




/*購物車-選擇方式*/
.choose-list{ margin-bottom:30px; }
.choose-item{ display: table; border-collapse: separate; width:100%; }
.choose-item{ border-top:1px solid #e5e5e5;}
.choose-item:last-child{ border-bottom:1px solid #e5e5e5;}
.choose-btn , .choose-title , .choose-sepec{ display: table-cell; padding:6px 10px;}
.choose-btn{ min-width:40px; border-right:1px solid #e5e5e5; background:#f4f4f4; text-align:center; }
.choose-title{ min-width:100px; border-right:1px solid #e5e5e5;  }
.choose-sepec{ width:100%; }


/*購物車列表區塊*/
.cart-item-list{ border: 1px solid #e5e5e5; padding:20px; }
@media (max-width:768px) { .cart-item-list{ border-width: 0px; border-top-width:1px; padding:0px; } }


/*購物車列表-表格*/
.tb-cart{ margin-bottom:5px; }
.tb-cart tr{ border-bottom: 1px solid #e5e5e5; }
.tb-cart td{ text-align:center; min-width:45px; }
.tb-cart td:nth-child(2){ text-align:left; }
.tb-cart td:nth-child(5){ text-align:right; }
.tb-cart td:nth-child(6){ width:45px; }
@media (max-width:768px) { .tb-cart td:nth-child(1){ display:none; } }
@media (max-width:640px) { .tb-cart td:nth-child(3){ display:none; } }

.mobile-cart-photo{ display:none; }
@media (max-width:768px) { .mobile-cart-photo{ display:block; } }

.cart-pro-name a{ color:#5d9dcb; }
.cart-pro-name a:hover{ color:#F29465; }


/*購物車數量*/
.tb-cart-qtybox{ display:inline-block; min-width:100px;}
.tb-cart-qtybox .control-num{ padding: 3px 5px; width:80px; text-align:center; }
.tb-cart-qtybox .qtyminus{ padding: 3px 8px; }
@media (max-width:768px) {
	.tb-cart-qtybox{ min-width:auto; width:90px;}
	.tb-cart-qtybox .control-num{ width:100%; margin-bottom:5px; }
	.tb-cart-qtybox .qtyminus{ padding-top:5px; padding-bottom:5px; width:42px; }
}


/*購物車-刪除之叉叉圖示*/
.cart-delete-btn{ position:relative; display:inline-block; min-width:25px; height:25px;}
.cart-delete-btn:before, .cart-delete-btn:after{
	position: absolute; top: 50%; left: 50%;
	background: rgba(128,128,128,1);
	content: '';
	display: inline-block;
	height: 3px;
	margin-top: 2px;
	margin-left: -7px;
	width: 15px;
	border-radius:2px;
	transition:All 0.5s ease;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.cart-delete-btn:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.cart-delete-btn:hover:before, .cart-delete-btn:hover:after{ background:#000; }
.cart-delete-btn .icon-txt{ display:none;}


/*購物車-總額*/
.cart-total-area{ padding-right:5px; padding-bottom:30px; margin-top:10px; }
.cart-total-area.pdright{ padding-right:45px; }
.cart-total-area:before, .cart-total-area:after{ display:table; content:" " }
.cart-total-area:after{ clear:both }
.cart-total-list{ float:right; display:inline-block; }
.cart-total-line{
	display: table; 
	border-collapse: separate;
	width:100%;
	text-align:right;
	margin-bottom:10px;
}
.cart-total-name , .cart-total-dollar{ display: table-cell; }
.cart-total-name{ width:100%; padding-right:10px; }
.cart-total-dollar{ min-width:140px;}

.cart-total-area .redtxt{ color:red; }
.cart-total-line.endtotal-line{ border-top: 1px solid #e5e5e5; margin-top:5px; padding-top:5px; }
.endtotal-line .cart-total-dollar{ font-weight:600; color:red; }
@media (max-width:768px) { .cart-total-area.pdright{ padding-right:0px;} }


/*購物車-說明*/
.cart-axplain .title {
    display: inline-block;
    background: #333;
    color: #ffffff;
    padding: 1px 5px;
    line-height: 1.4;
}
















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



/*響應式表格*/
@media (max-width:768px) {
	.rwd-tb , .rwd-tb thead , .rwd-tb tbody , .rwd-tb th , .rwd-tb td , .rwd-tb tr {display: block;}
	
	/* 隱藏 table headers (but not display: none;, for accessibility) */
	.rwd-tb thead tr { position: absolute; top: -9999px; left: -9999px;}
	
	.rwd-tb thead , .rwd-tb tr{ border-width:0px; }
	
	/*讓每列表格全寬100%*/
	.rwd-tb td{
		border: 1px solid #e5e5e5;
		border-bottom:0px solid transparent;
		position: relative;
		padding:7px 10px 7px 120px;
		text-align:left;
		width:100%;
	}
	.rwd-tb td:last-child{border-bottom:1px solid #E6E6E6;}
	
	/*每個項目*/
	.rwd-tb tr{margin-bottom:15px;}
	
	.rwd-tb tr:nth-of-type(even) td{ background:rgba(209,209,209, 0.2); }
	
	/*螢幕縮小後的標題*/
	.rwd-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: "詳細資訊"; }

}


/*填寫付款資訊*/
.order-report-txt{ padding:3px 0; }


/*訂單詳細資訊*/
.order-view-heading{font-size: 1.05em; color:#AD0506; margin-bottom:15px; }
.order-view-list{ margin-bottom:30px; }
.order-view-line{ display: table; width:100%; margin-bottom:15px; }
.order-view-title , .order-view-txt{ display: table-cell;}
.order-view-title{ min-width:80px;}
.order-view-txt{ width:100%; }