@charset "utf-8";

/*
base-color:#3E3A39
seconde-color:
hover-color:#898989 淡灰
*/

body , .wrapper{ color:#727171; background:#B84F13;}

/*a 鏈結字*/
a { color:#727171;}
a:hover, a:focus { color:#B84F13;}

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

/*叉叉圖示*/
.btn-close{ position:relative;}
.btn-close:before, .btn-close:after{
	position: absolute; top: 50%; left: 50%;
	background: rgba(128,128,128,0.8);
	content: '';
	display: inline-block;
	height: 3px;
	width: 26px;
	margin-top: -2px;
	margin-left: -13px;
	
	transition:All 0.5s ease;
	
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.btn-close:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.btn-close:hover:before, .btn-close:hover:after{background:#e6d9b4;}
.btn-close .icon-txt{ display:none;}

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

/*分頁*/
.page {
	margin:30px 0;
	font-size:0.95em;
	text-align:center;
}
.page_total , .page_info , .page_prev , .page_next , .page_item , .page_next_group{
	display:inline-block;
    padding:1px 5px;
	margin:0 2px;
	line-height:1.5;
	min-width:25px;
	text-align:center;
	border:1px solid #ccc;
}
.page_prev:hover , .page_item:hover , .page_next:hover , .page_next_group:hover{ 
	color: #B84F13; 
	border-color: #B84F13; 
}
/* 目前選中的分頁 */
.page_current {
	background: #727171;
	border:1px solid #727171;
	color: #fff; 
}
.page_current:hover{ color: #fff; border-color: #727171; }


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

/*右側懸浮鈕*/
.side-cart {
	position:fixed;
	right:1px;
	bottom:25%;
	z-index:100;
	background:#4F140D;
	font-size:0.7em;
	text-align:center;
}
.side-cart , .side-cart a{ color:#FFF; }
.side-cart a{ display:inline-block; padding:4px 7px; }
.side-cart .icon{ display:inline-block; vertical-align:text-bottom; width:15px; height:15px;}
.side-cart .icon img{ width:100%; height:auto;}
.side-check{
	border-top:1px solid rgba(255,255,255,0.2);
	padding:2px 2px 0px 2px;
	margin-top:5px; 
}
.side-check:hover , .side-cart a:hover{ color:#FFF; }
.side-cart:hover { background:#7b0000; }

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

.back-line{text-align:center; margin-bottom:15px;}

.pageback-btn{ display:inline-block; vertical-align:top; font-size:0.85em; line-height:1.5; color:#898989;}

.pageback-btn-txt{position:relative; padding-left:12px;}

.pageback-btn-txt:before{
	position:absolute;
	left:0;
	top:50%;
	margin-top:-4px;
	content:"";
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 8px solid #898989;
	border-bottom: 5px solid transparent;
}

.pageback-btn:hover{color:#B84F13;}

.pageback-btn:hover .pageback-btn-txt:before{border-right-color:#B84F13; }

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

.header{ background:#FFF;}

.header-top{
	position:relative;
	min-height:50px;
}

.logo{
	position:absolute;
	z-index:10;
	top:5px;
	left:0.5%;
	max-width:450px;	
}
.logo img{ width:100%; height:auto; }

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

.owl-banner{ margin-bottom:5px;}
.owl-banner img{ width:100%; height:auto;}
.owl-theme .owl-dots{ position:relative; z-index:3; text-align:right; margin-top:-40px; padding-right:30px;}
.owl-theme .owl-dots .owl-dot { display:inline-block; zoom:1 }
.owl-theme .owl-dots .owl-dot span {
	width:20px;
	height:20px;
	margin:5px 7px;
	background:rgba(0,105,52, 0.5);
	display:block;
	-webkit-backface-visibility:visible;
	transition:opacity .2s ease;
	border-radius:30px
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background:rgba(218,224,0, 0.5); }

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

.single_banner img{ width:100%; }


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

.quicklink-list{ text-align:right;}

.quicklink-list li{ display:inline-block; }

/* 最上方登入、註冊...等 列 */
.quicklink-btn{ display:inline-block; margin-left:2px;}
.quicklink-btn a{ 
	display:block;
	font-size:0.9em;
	color:#898989;
	padding:0px 7px;
	letter-spacing:0;
	line-height:22px; 
}
.quicklink-btn a:hover{ color:#B84F13; }

.quicklink-cart .badge{ display:inline-block; width: 21px; text-align:center;}

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

.main{ background:#FFF;}

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

.footer-top{ background:#fff; padding-top:30px; padding-bottom:30px; }


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

.fb-qrcode{
	position:absolute;
	bottom:10px;
	left:0;
}

.fb-photo , .fb-title{ display:inline-block; vertical-align:bottom; }
.fb-photo{ border:1px solid #ccc; margin-right:5px; }
.fb-title{ /*font-size:18px;*/ font-weight:600; color:#B84F13; }
.fb-photo img{ display:block; max-width:100px; }


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

.footer-menu{ text-align:right; margin-top:60px;}
.footer-menu li , .footer-menu li a{ display:inline-block;}
.footer-menu li a{ color:#727171; border-right:1px solid #727171; line-height:1; padding:0 10px 0 10px; font-size:0.75em;}
.footer-menu li:last-child a{ border-right-width:0px; padding-right:0;}
.footer-menu li a:hover{ color:#B84F13; }

/*------*/

.social-list{ text-align:right;  margin:10px 0px 0px 0px;}
.social-list li{ 
	display:inline-block; 
	margin-left:5px; 
	background:#000;
}
.social-list li img{ display:block; }
.social-list li , .social-list li img{
	-ms-border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	-o-bborder-radius:50%;
	border-radius:50%;
}
.social-list li:hover{ background:#B84F13; }

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

.footer-bottom .container{ margin-top:90px; margin-bottom:90px; }
.footer-bottom .qrcode{ position:absolute; top:5px; left:0;}
.foooter-info , .foooter-info a{ color:#FFF;}
.foooter-info a:hover{ color:#f2eaf1;}
.foooter-info{ position:relative; padding-left:120px; font-size:0.8em;}
.foooter-info li{ padding-left:13px;}
.foooter-info li.company-line{ padding-left:0px;}


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

.headline-area{ position:relative; z-index:7; border-bottom:1px solid #727171; margin-bottom:30px; padding-right:250px;}
.headline{ display:inline-block; font-size:1.2em; color:#727171; min-width:130px; padding-bottom:10px;}
.headline span:after{
	content:">";
	margin-left:8px;
	margin-right:4px;
	font-size:16px;
}
.headline span:last-child:after{ display:none; }

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

.breadcrumbs{
	position:absolute;
	z-index:5;
	bottom:8px;
	right:0;
	font-size:0.8em;
	line-height:1.5;
	text-align:right;
	color:#727171;
}
.breadcrumbs span{margin-right:0px;}
.breadcrumbs span:after{
	content:">";
	margin-left:5px;
	font-size:10px;
}
.breadcrumbs span:last-child:after{display:none;}

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

.secbox , .secbox a{ color:#727171; }
.secbox a:hover{ color:#B84F13; }

.secbox ul{ letter-spacing:2px;}
.secbox .heading{ margin-bottom:10px; font-size:1.1em;}

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

.sec-dec01{
	position:relative;
	margin:45px 0 45px 0;
	text-align:right;
}
.sec-dec01:before{
	position:absolute;
	bottom:7px;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#727171;
}
.sec-dec01 .photo{ display:inline-block; width:68%;}
.sec-dec01 .photo img{ display:block; width:100%; }

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


.sec-pro-list:before, .sec-pro-list:after{ display:table; content:" " }
.sec-pro-list:after{ clear:both }

.sec-pro-list li{ float:left; margin-right:2%; width:32%; margin-bottom:45px;}
.sec-pro-list li:last-child{ margin-right:0;}

.sec-pro-list .photo{
	position:relative;
	width:100%;
	height:350px;
	overflow:hidden;
	border:1px solid #ccc;
}
.sec-pro-list .photo img{
	width:auto;
	height:auto;
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sec-pro-list  li .title{ margin:10px 0; padding:0 5px;}
.sec-pro-list  li .title a{ position:relative;}
.sec-pro-list li:hover .title a{ color:#B84F13; }

.sec-pro-list li:hover .title a{ color:#B84F13; }

.sec-pro-list  li .title a:before{
	position:absolute;
	bottom:-5px;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#B84F13;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
	
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
}

.sec-pro-list li:hover .title a:before{
	-moz-transform:scale(1);
	-webkit-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}

.sec-pro-list  li .intro{
	font-size:0.85em;
	max-height:53px;
	overflow:hidden;
	padding:0 5px;
}


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

.section{ color:#727171; }
.sec-hr{ border: 0; height: 1px; background:#727171; }

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

.product-page{}
.product-page:before, .product-page:after{ display:table; content:" " }
.product-page:after{ clear:both }


.page-left , .page-right{float:left; padding-top:60px; }
.page-left{width:17%; margin-right:15%; margin-bottom:90px; }
.page-right{width:68%;}

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

.photo-list { text-align:center;}
.photo-list li{ display:inline-block; width:20%; margin:0 1%;}
.photo-list li .photo img{ width:100%;}

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

.link-list{ text-align:center; margin-bottom:15px;}
.link-list a:hover{ opacity:0.8; }

.link-list.link-left{ text-align:left;}

.sec-back-btn{
	position:relative;
	display:inline-block;
	padding:0 10px;
	margin-top:45px;
	margin-bottom:45px;
}

.sec-back-btn:before , .sec-back-btn:after{
	position:absolute;
	left:0;
	width:100%;
	height:1px;
	content:"";
	background:#999;
	
	transition:All 0.5s ease;
	-webkit-transition:All 0.5s ease;
	-moz-transition:All 0.5s ease;
	-o-transition:All 0.5s ease;
}

.sec-back-btn:before{ top:0;}
.sec-back-btn:after{ bottom:0; }
.sec-back-btn:hover:before , .sec-back-btn:hover:after{ 
	background:#B84F13; 
	-moz-transform:scale(0);
	-webkit-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
}