@charset "utf-8";

.pic{ display:block; width:100%; height:auto;}

/*a 鏈結字*/
a { color:#333333;}
a:hover, a:focus { color:#9E095A;}


/*右側懸浮鈕*/
.side-float-area {
	position:fixed;
	right:5px;
	bottom:50px;
	z-index:99999;
	
	background:rgba(255,255,255,0.9);
	border:1px solid #cccccc;
	padding:5px 2px;
	text-align:center;
	
	-ms-border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-o-bborder-radius:3px;
	border-radius:3px;
}

.side-float-area p{
	font-size:0.8em;
	line-height:1.4;
	padding:0px 1px;
	text-align:center;
	width:20px;
}

.side-cart-qty{ color:#F00;}

.side-check-btn{
	background:rgba(164,163,163, 1);
	color:#ffffff;
	display:block;
	line-height:1.8;
	margin-top:5px;
	padding:1px 0px;
}
.side-check-btn:hover{background:#F00; color:#FFF;}

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

.header{
	background:#FFF;
}

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

/*頁面最上方列*/
.header-top-wrap{
	text-align:right;
	margin:0px 0 30px 0;
	padding-top:10px
}

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

/* 最上方登入、註冊...等 列 */
.quicklink-bar{display:inline-block;}

.quicklink-list li{display:inline-block; vertical-align:middle; position:relative;}

.quicklink-list li a{
	background:#e6e6e6;
	color:#333;
	display:block;
	font-size:0.8em;
	line-height:1.6em;
	letter-spacing:1px;
	padding:1px 1em;
}

.quicklink-list li a:hover{background:#9E095A; color:#ffffff;}

.quicklink-list li > ul{
	display:none;
}

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

/*整個搜尋區塊*/
.search-bar{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	margin-left:12px;
}

/*搜尋區塊下拉按鈕*/
.togglesearch , .togglequicklink{
	position: relative;
	z-index: 10;
	top: 0px;
	border:1px solid #eaeaea;
	cursor:pointer;
	display:none;
	text-align:center;
	height: 35px;
	width: 35px;
	
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-bborder-radius:5px;
	border-radius:5px;
}

/*放大鏡圖示*/
.togglesearch-icon , .togglequicklink-icon{ font-size:18px; color:#595656;}


/*叉叉圖示*/
.togglesearch:before, .togglesearch:after , .togglequicklink:before , .togglequicklink:after{
	/* close icon */
	position: absolute; top: 50%; left: 50%;
	background: #595656;
	content: '';
	display: inline-block;
	height: 3px;
	width: 22px;
	margin-top: -2px;
	margin-left: -11px;
	opacity: 0;
	
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}
.togglesearch:before , .togglequicklink:before {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.togglesearch:after , .togglequicklink:after {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.togglesearch.search-is-visible .togglesearch-icon , .togglequicklink.is-visible .togglequicklink-icon {
	opacity: 0;/* hide search icon */
}
.togglesearch.search-is-visible:before , .togglesearch.search-is-visible:after ,
.togglequicklink.is-visible:before , .togglequicklink.is-visible:after {
	opacity: 1;/* show close icon */
}

.togglesearch.search-is-visible:before , .togglequicklink.is-visible:before {
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}
.togglesearch.search-is-visible:after , .togglequicklink.is-visible:after {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

/*-----*/

.search-fm{border:1px solid #cccccc; background:#ffffff; padding:0px;}

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

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

/*搜尋文字欄和按鈕間的線*/
.search-btn:before{
	position:absolute;
	top:20%;
	left:0;
	height:60%;
	width:1px;
	content:"";
	background:#cccccc;
}

.search-btn i{ color:#999; font-size:1em; margin-bottom:3px;}
.search-btn:hover i{color:#9E095A;}


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

.quicklink-cart{ 
	position:relative; 
	display:inline-block; 
	vertical-align:middle; 
	margin-left:10px;
	margin-right:25px;
	width:25px;
	height:25px;
}

.quicklink-cart .icon{
	display:inline-block;
	width:25px;
	height:25px;
	background:#9E095A url(../images/icon-cart.png) no-repeat center;
	background-size:cover;
}

/*購物車iocn旁小數量提示*/
.quicklink-cart .badge{
	position:absolute;
	top:3px;
	left:110%;
	border:1px solid #9E095A;
	background:transparent;
	color:#9E095A;
	display:inline-block;
	font-size:0.75em;
	min-width:22px;
	line-height:1.7;
	text-align:center;
	border-radius:3px;
}

.quicklink-cart .badge:before{
	position:absolute;
	top:50%;
	left:-4px;
	width:6px;
	height:6px;
	margin-top:-3px;
	content:"";
	border-top:1px solid #9E095A; 
	border-left:1px solid #9E095A;
	background:#FFF;
	
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.quicklink-cart:hover .badge{ background:#9E095A; color:#fff; }
.quicklink-cart:hover .badge:before{ background:#9E095A;}

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


.logo-flex{  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
.logo-flex > .flex-left , .logo-flex > .flex-center , .logo-flex > .flex-right{ width:33%; width:calc( 100% / 3); }
.logo-flex > .flex-left{ text-align:left; }
.logo-flex > .flex-center{ text-align:center; }
.logo-flex > .flex-right{ text-align:right; }
.logo-flex img{ display:inline-block; }


.logo{margin:30px auto 0px auto; text-align:center;}

.logo img{width:100%; max-width:500px; height:auto;}

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


/*小螢幕的 menu 按鈕*/
.togglemenu{
	position:relative;
	background: #9E085A;
	color: #ffffff;
	cursor: pointer;
	display: none;
	font-weight: 700;
	font-size: 1.1em;
	letter-spacing: 1px;
	padding: 10px 20px;
	text-transform: uppercase;
	width: 100%;
}

/*小螢幕的 menu 按鈕旁的三條槓*/
.togglemenu-icon{
	position:relative;
	display:inline-block;
	border-top:2px solid #ffffff;
	border-bottom:2px solid #ffffff;
	height:12px;
	width:15px;
}
.togglemenu-icon:before{
	position:absolute;
	top:50%;
	left:0;
	margin-top:-1px;
	content:"";
	background:#ffffff;
	height:2px;
	width:100%;
}

.togglemenu:hover , .togglemenu:focus{color: #ffffff;}

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

.nav{
	padding:30px 0;
	text-align:center;
}

/*選單列*/
.menu {display:none; *zoom: 1;} 

.menu li {position:relative;}

/*第一層選單*/
.menu > li {display:inline-block; width:auto;}

/*第一層選單文字*/
.menu > li > a {
	position:relative;
	color:#595757;
	display: block;
	font-size:1.1em;
	line-height:2;
	letter-spacing:1px;
	padding:0 20px;
}

.menu > li > a:before , .menu > li:last-child > a:after{
	position:absolute;
	top:0;
	width:2px;
	height:100%;
	content:"";
	background:#C9CACA;
}
.menu > li > a:before {left:-3px;}
.menu > li:last-child > a:after {right:-3px;}

.menu > li > a:hover { background:#EFEFEF; color:#9E085A; }


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

/*主內容區*/
.main{background:#ffffff; }

.main-top{
	position:relative;
	z-index:2;
	-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05) , 0px 3px 10px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:  0px 1px 5px rgba(0, 0, 0, 0.05), 0px 3px 10px rgba(0, 0, 0, 0.2);
	-o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05), 0px 3px 10px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.05), 0px 3px 10px rgba(0, 0, 0, 0.2);
}

.main-bottom{
	position:relative;
	z-index:2;
	padding:0px 0 0px 0;
	/*text-align:center;*/
}

/*有背景圖的主內容區*/
/*.main-bg .container{background:#ffffff url(../images/page-bg.png) repeat; padding:0px 0 30px 0;}*/

.main-bottom img{
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
}


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

.banner{ min-height:50px;}

#owl-banner img{ width:100%; height:auto;}

#owl-banner .owl-controls{
	position:relative;
	z-index:500;
	margin-top: -35px;
	text-align: center;
}

#owl-banner .owl-page span{
	width: 10px;
	height: 10px;
	background: rgba(179,179,179, 1);
	border:1px solid rgba(179,179,179, 1);
}

#owl-banner .owl-page.active span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	background: rgba(179,179,179, 0);
}

#owl-banner.clickable .owl-page:hover span{
	filter: Alpha(Opacity=100);/*IE7 fix*/
	background:rgba(179,179,179, 0.5)
}


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

.footer{
	background:#f5f5f5;
	color:#9E085A; 
	font-size:0.8em;
	padding:20px 0;
}

.footer-left{float:left; width:20%;}

.footer-right{/*float:right;*/ /*width:80%;*/ text-align:center;}


.footer-designer , .footer-rule{color:#595656;}
.footer-designer a , .footer-rule a{color:#595656;}
.footer-designer a:hover , .footer-rule a:hover{color:#9E085A; }


.footer-designer{margin-left:15px;}


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

/*每頁內容上方的icon*/
.page-iocn{
	margin:30px 0; 
	text-align:center;
	color:#862056;
	font-size:1.3em;
	font-weight:600;
}

.page-title{
	display:inline-block;
	vertical-align:middle;
}

.page-iocn img{ display:inline-block; height:auto; max-width:100%; vertical-align:middle;}

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

/*分類*/
.category{ width:1000px; text-align:center; margin:30px auto;}

.category li{display:inline-block; margin:0px 10px 20px 10px; min-width:250px;}


.category li a{
	border:1px solid #b3b3b3;
	color:#7f7f7f;
	padding:4px 60px;
	display:block;
	margin:0 20px;
	text-align:center;
	transition:All 1s ease;
	-webkit-transition:All 1s ease;
	-moz-transition:All 1s ease;
	-o-transition:All 1s ease;
}

.category li a:hover , .category li.active a{border:1px solid #9E095A; color:#9E095A;}

/*.category li:nth-child(3n+1){ clear:both; float:left;}*/

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

.content{ margin:0 0 30px 0; }

.content-left , .content-right{float:left;width:100%;}

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

.half-box{
	margin:0 auto;
	text-align:center;
}

.half-box-left{
	float:left;
	position:relative;
	width:50%;
}

.half-box-right{
	float:right;
	position:relative;
	width:50%;
}

.half-box img{
	display:block;
	margin:0 auto;
	max-width:100%;
	height:auto;
}


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

.back-line{text-align:center;}

.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:#9E095A;}

.pageback-btn:hover .pageback-btn-txt:before{border-right-color:#9E095A}

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

/*分頁*/
.page{
	padding:30px 0px 60px 0px;
	font-size:0.8em;
	text-align:center;
}
.page , .page a{ color: #666; }
.page a:hover{ border-color:#9D245E; color: #694b2f; }

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