@charset "utf-8";

/*
base-color:#595757;  rgba(89,87,87, 1); 淺色
seconde-color:#3F3B3A;  rgba(63,59,58, 1); 重色
hover-color:#b79678 rgba(183,150,120, 1);
*/

body , .wrapper{color:#595757;}

/*a 鏈結字*/
a { color:#595757;}
a:hover, a:focus { color:#6d5a48;}


.mt{ margin-top:30px;}
.mb{ margin-bottom:30px;}
.mt-h{ margin-top:15px;}
.mb-h{ margin-bottom:15px;}
.mt-d{ margin-top:60px;}
.mb-d{ margin-bottom:60px;}

.pic img{ display:block; width:100%; height:auto;}
.maxpic img{ display:block; max-width:100%; height:auto;}

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

.col-gp{}
.col-gp:before, .col-gp:after{ display:table; content:" " }
.col-gp:after{ clear:both }

.col{ float:left; margin:0 2% 0px 0;}
.col img{ display:block; width:100%; height:auto;}

.cols02 > .col{width:49%;}
.cols03 > .col{width:32%;}
.cols04 > .col{width:23.5%;}

.cols02 > .col:nth-child(2n) , .cols03 > .col:nth-child(3n) ,
.cols04 > .col:nth-child(4n){ margin-right:0%;}

.cols02 > .col:nth-child(2n+1) , .cols03 > .col:nth-child(3n+1) , 
.cols04 > .col:nth-child(4n+1){ clear:both; float:left;}

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

/*叉叉圖示*/
.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;}

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

/*右側懸浮鈕*/
/*
.side-cart {
	position:fixed;
	right:5px;
	bottom:10%;
	z-index:99999;
	background:rgba(255,255,255,0.9);
	border:1px solid #cccccc;
	height:35px;
	width: 120px;
	overflow:hidden;
	transition:width 0.8s ease;	
}

.side-cart:hover { width:120px; }
.side-cart-wrap {
	position:absolute;
	top:2px;
	left:8px;
	width:120px;
}
*/
.side-cart {
	position:fixed;
	right:5px;
	bottom:10%;
	z-index:99999;
	background:rgba(255,255,255,0.9);
	border:1px solid #cccccc;
	height:35px;
	width: auto; /* 120px;*/
	overflow:hidden;
	transition:width 0.8s ease;	
	padding: .2em;
	border-radius: .5em;
	-webkit-border-radius: .2em;
	-moz-border-radius: .5em;
}
/*
.side-cart:hover { width:120px; }
*/
.side-cart-wrap {
	/*
	position:absolute;
	top:2px;
	left:8px;
	*/
	display: block;
	width: auto;
}

.side-cart-wrap .hide { display: none; }


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

.side-icon-badge i{
	color:#7b0000; 
	font-size:1.4em; 
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	transform:scaleX(-1);
}
.side-icon-badge .badge {color:#7b0000; font-size: .8em; }
.side-icon-badge .badge:hover{ text-decoration:underline;}

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

.side-check-btn{
	background:#7b0000;
	border-radius:3px;
	display:inline-block;
	vertical-align:text-top;
	font-size:0.8em;
	margin-left:5px;
}
.side-check-btn a{ display:block; padding:0px 10px; color:#ffffff;}

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

.header{
	border-top:30px solid #5A5858;
	padding:10px 0;
}

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

/* 最上方登入、註冊...等 列 */
.quicklink-list{ position:absolute; top:0; right:0px;}
.quicklink-list li{ position:relative; display:inline-block; margin-left:1.4em;}
.quicklink-list li a{ display:block; font-size:0.9em; /*padding:2px 1em;*/}
.quicklink-list li a:hover{ text-decoration:underline;}
.quicklink-list li:before{
	position:absolute;
	top:50%;
	right:-0.7em;
	width:1px;
	height:10px;
	margin-top:-5px;
	content:"";
	background:#cccccc;
}
.quicklink-list li:last-child:before{display:none;}

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

.quicklink-cart{position:absolute; top:40px; right:0;}
.quicklink-cart a .title{font-size:0.9em; }
.quicklink-cart a i , .quicklink-cart .badge {color:#7b0000; font-size: .8em;}
.quicklink-cart a i{ 
	font-size:1.6em;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	transform:scaleX(-1);
}
.quicklink-cart .badge{text-decoration:underline; margin-left:-2px;}

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

.logo{ text-align:center; margin:30px 0;}
.logo img{ display:liline-block; max-width:200px; height:auto;}

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

/*.page-banner{padding:5px 0;border-top:1px solid rgba(89,87,87, 0.1);}
.page-banner img{ display:block; width:100%; height:auto;}*/

#owl-banner .owl-controls{
	position:relative;
	z-index:1;
	margin-top: -35px;
	text-align: center;
}
#owl-banner .owl-page span{
	width: 15px;
	height: 15px;
	background: #5A5858;
	border:1px solid #ffffff;
}
#owl-banner .owl-page.active span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	background:rgba(0,0,0, 0.5);
}
#owl-banner.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	background:rgba(0,0,0, 0.9);
}

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

.main{ margin:30px 0;}

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

.footer{
	text-align:center;
	background:#eaeaea;
	letter-spacing:1px;
}
.footer-info{ padding:20px 0; /*font-size:0.9em;*/ }
.footer-info span{ display:inline-block; margin:0 10px;}

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

.footer-designer{
	padding:5px 0 10px 0;
	background:#5A5858;
	color:#ffffff;
	text-align:right;
	font-size:0.7em;
}
.footer-designer a{ color:#ffffff; }
.footer-designer a:hover{ color:#cccccc; }

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

.page-left , .page-right{float:left;}
.page-left{width:18%; margin-right:2%;}
.page-right{width:80%;}

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

.left-bd{ border-left:3px solid #8D8E8E; padding:0 10px;}

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

/*首頁 關於我們 聯絡我們資料*/
.info-list{/*color:#8D8E8E;*/}
.info-list .title{font-weight:600; font-size:1.2em;}
.info-list span{ display:block;}

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

.section-header{text-align:center; border-bottom:1px solid #ccc;}
.section-title , .section-subtitle{margin:0;  padding:0;}
.section-title{font-size:1.1em;}
.section-subtitle{ font-size:0.7em; text-transform:uppercase; padding-bottom:5px;}

.section-header.small{ border-bottom-color:rgba(102,102,102, 0.4);}
.section-header.small .section-title{font-weight:500;}

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

.back-line{text-align:left;}
.pageback-btn{ display:inline-block; vertical-align:top; font-size:0.85em;}
.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:#B79678;}
.pageback-btn:hover .pageback-btn-txt:before{border-right-color:#B79678;}

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

.breadcrumbs{
	font-size:0.85em;
	line-height:1.5;
	text-align:right;
}
.breadcrumbs span{margin-right:0px;}
.breadcrumbs span:after{
	content:">";
	margin-left:5px;
	font-size:10px;
}
.breadcrumbs span:last-child:after{display:none;}
.breadcrumbs span:last-child , .breadcrumbs a:hover{text-decoration:underline;}

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

.category-wrap{text-align:center;}
.category{
	display:inline-block; 
	border:1px solid #595757; 
	padding:0px 10px;
	border-radius:20px;
}
.category .title{font-size:0.9em; padding-right:10px; border-right:1px solid #cccccc;}
.category .input-selt{
	display:inline-block; 
	width:auto;
	font-size:0.9em;
	border-radius:20px;
	padding-right:30px;
	border-color:transparent;
	
	appearance:none;
    -webkit-appearance: none;/* Chrome */
    -moz-appearance: none;/* Firefox */
	background:url(../images/selt-arrow.png) no-repeat scroll right center transparent;
}
.category .input-selt::-ms-expand { display: none; } /*for ie*/

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

/*整個搜尋區塊*/
.search-fm{ display:inline-block; border:1px solid #595757; background:#ffffff; padding:0px;}
.search-fm:before, .search-fm:after{ display:table; content:" " }
.search-fm:after{ clear:both }

.search-input , .search-btn{
	border:1px solid #ffffff;
	background:#ffffff;
	float:left;
	font-size:0.85em;
	line-height:1; 
	height:30px;
	outline:none;
}
.search-input{ padding:0px 5px;  width:160px;}

.search-btn{ position:relative; cursor:pointer; text-align:center; width:35px;}

/*搜尋文字欄和按鈕間的線*/
.search-btn:before{
	position:absolute;
	top:20%;
	left:0;
	height:60%;
	width:1px;
	content:"";
	background:#cccccc;
}
.search-btn i{ color:#595757; font-size:1em; margin-bottom:3px;}
.search-btn:hover i{color:#9E095A;}

/*商品分頁*/
.col-sm-12 { width: 100%; }
.text-center { text-align: center; }
ul.pagination { display: inline-flex; flex-direction:row; justify-content:center; font-size: 1.1em; }

ul.pagination li { display: table-cell; width: 2em; text-align:center; border: #ccc 1px solid; }
ul.pagination li:first-child { border-top-left-radius: .3em; border-bottom-left-radius: .3em; }
ul.pagination li:last-child { border-top-right-radius: .3em; border-bottom-right-radius: .3em; }
ul.pagination li a { width: 100%; display:block; }
ul.pagination li.disabled a:link { color: #eee; }
ul.pagination li.disabled a:visited { color: #eee; }
ul.pagination li.active { background-color: #efefef; }
ul.pagination li.active a:link { color: #c00; font-weight: 600; }
ul.pagination li.active a:visited { color: #c00; font-weight: 600; }
/*================================================================================*/
/*================================================================================*/

/*關於我們*/
.about-icon { width: 100%; height:auto; text-align:right !important; padding: .5em; }
/*
.about-icon p { margin: 0; padding: 0; width: 100%; }
*/
.about-photo { width: 100%; height:auto; display: inline-block; }
.about-photo-pic { width: 40%; height:auto; float:left; }
.about-photo-info { width: 60%; height:auto; float:left; padding-left: 1em; }
.about-photo img, .about-intro img { max-width: 100%; height:auto; }

@media (max-width: 767px) {
	.about-photo-pic { width: 100%; height:auto; float:none; }
	.about-photo-info { width: 100%; height:auto; float:none; padding: 0; }
	
}