@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;}

.register_button {
	position:relative;
	
}
.register_button:before {
	content:'';
	position:absolute;
	top:20px;
	left:5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	border-color: transparent transparent #000 transparent;
	animation: shake1 1.5s infinite;
	-webkit-animation: shake1 1.5s infinite;
}
.register_button:after {
	animation: shake2 1.5s infinite;
	-webkit-animation: shake2 1.5s infinite;
	content:attr(data-label);
	position:absolute;
	top:25px;
	left:0;
	background:rgba(0,0,0, 0.9);
	padding:2px 8px;
	border-radius:8px;
	font-size:0.7em;
	color:#FFF;
	white-space: nowrap
}
@keyframes shake1 {
    0% {
        /*transform: translate(0px, 0px);*/
        top:20px;
    }
    50% {
        /*transform: translate(0px, 6px);*/
        top:25px;
    }
    100% {
        /*transform: translate(0px, 0px);*/
        top:20px;
    }
}
@keyframes shake2 {
    0% {
        /*transform: translate(0px, 0px);*/
        top:25px;
    }
    50% {
        /*transform: translate(0px, 6px);*/
        top:30px;
    }
    100% {
        /*transform: translate(0px, 0px);*/
        top:25px;
    }
}

.promotion_text {
	/*color:#f74877 !important;*/
}
.promotion {
	position:relative;
}
.promotion:before {
	content:'';
	position:absolute;
	top:-13px;
	left:50%;
	/*margin-left:-2px;*/
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0px 8px 8px;
	border-color: transparent transparent #f74877 transparent;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
.promotion:after {
    content: attr(data-label1);
    font-family: Poppins-Regular;
	font-weight:normal;
    font-size: 10px;
    line-height: 15px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    display: block;
    position: absolute;
    top: -15px;
    left: 50%;
	margin-left:-16px;
    height: 15px;
    min-width: 32px;
    border-radius: 3px;
    padding: 0 4px;
    background-color: #f74877;
}


.product-items .owl-prev{
	position:absolute;
	left:-12px;
	top:50%;
	margin-top:-17.5px;
	background:rgba(0,0,0, 0.95) !important;
	padding:5px 5px !important;
}
.product-items .owl-next{
	position:absolute;
	right:-12px;
	top:50%;
	margin-top:-17.5px;
	background:rgba(0,0,0, 0.95) !important;
	padding:5px 5px !important;
}



.cate_click {
	display:none;
}

#cate {
	
	position:fixed;
	overflow-y:auto;
	top:0;
	left:-70%;
	bottom:0;
	width:70%;
	z-index:950;
	background:#FFF;

	transition: left 0.2s;
	-moz-transition: left 0.2s;
	-webkit-transition: left 0.2s;
	-o-transition: left 0.2s;
}
#cate ul {
	/*font-size:0.95rem;*/
}
#cate ul ul{
	background:#f5f8fb;
	display:none;
}
#cate ul ul ul {
	background:#d2d2d2;
	display:none;
}
.has_child {
	z-index:5;
	position:relative;
}
.has_child:after {
	position:absolute;right:10px;top:12px;
    z-index: 0;
    width: 4px;
    height: 4px;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    content: "";
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
	color:#FFF;
}
#cate ul ul li a {
	padding-left:20px;
}
#cate ul ul ul li a {
	padding-left:40px;
}
#cate ul li a, #cate ul li.title{
	padding:8px 12px;
	display:block;
}
#cate ul li.title {
	background:#CCC;
}
#cate ul li a:hover{
	background:#EFEFEF;
	color:#000;
}
.cate_open {
	left:0 !important;
}



#quick_tool {
	display:none;
	position:fixed;bottom:20px;right:8%;background:#333;
	border-radius:5px;
	padding:8px;
	z-index:280;
	font-size:0.9em;
}
#quick_tool a {
	padding:5px 6px;
	color:#FFFFFF;
}

#quick_tool a i{
	margin-right:5px;
}
#quick_tool a:after {
	padding-left:16px;
	content:'';
	border-right:1px solid #777;
}
#quick_tool a:last-child:after {
	padding-left:0px;
	content:'';
	border-right:0;
}
#quick_tool .cart-qty {
	background:red;padding:0px 5px;color:#FFFFFF;border-radius:3px;
	margin-left:5px;
}

#quick_tool a[href^="center.php"], #quick_tool a[href^="index.php"] {
	display:none;
}


.cd-dropdown .has-children {
	position:relative;
}
.cd-dropdown .has-children:after {
	    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -2px;
    width: 0;
    height: 0;
    content: "";
    border-left: 4px solid transparent;
    border-top: 5px solid #595757;
    border-right: 4px solid transparent;
}

.cd-dropdown-content li:hover ul {
	display:block;
	position:absolute;
	left:0;
	top:28px;
	/*padding-top:30px;*/
	text-align:left;
	white-space:nowrap;
	z-index:500;
	font-size:0.9em;
	min-width:150px;
	overflow:auto;
	max-height:400px;
	box-shadow: 2px 2px 4px 0px #636363;;
}
.cd-dropdown-content li ul li {
	background:#FFF;
	padding:5px 0;
}


.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:20%;
	z-index:230;
	background:rgba(255,255,255,0.9);
	border:1px solid #cccccc;
	height:35px;
	overflow:hidden;
	transition:width 0.8s ease;	
}
/*
.side-cart:hover {width:115px;}
.side-cart-wrap{
	position:absolute;
	top:2px;
	left:8px;
	width:110px;
}*/

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

.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; }
.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;}

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

/*分頁*/
.page{
	padding:30px 60px;
	margin-bottom:60px;
	font-size:0.8em;
	text-align:center;
}

.page a , .page span{
	display:inline-block;
	border: 1px solid #999;
    padding: 4px 4px 4px 4px;
	line-height:1.2;
	min-width:30px;
	text-align:center;
	color:#333;
	margin-right:8px;
}
.page span{ background: #999; border-color:#999; color: #fff; }

.page .info { background:none;color:#777;border:0 }
.page a:hover{ border-color:#666; color: #666; }


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

.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;}
.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:150px;*/ 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 .container{
	/*border-top:1px solid #CCC;*/
	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:23%; margin-right:2%;}
.page-right{width:75%;}

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

.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;}

.back-line.pdleft{ width:80%; margin-left:auto; margin-right:auto; }

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

.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-bar{ position:relative; display:inline-block; border:1px solid #ccc; background:#ffffff; padding-right:45px; width:220px; }
.search-bar:before, .search-bar:after{ display:table; content:" " }
.search-bar: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:100%;}

.search-btn{ /*position:relative;*/ position:absolute; top:0; right:0; cursor:pointer; text-align:center; width:35px; padding:5px 0 0 0;}

/*搜尋文字欄和按鈕間的線*/
.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;}

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

.desc-content video, .desc-content iframe{
	max-width:100% !important;
}


.module_index .main {
	margin:0 !important;
}