@charset "UTF-8";

/* CSS Document */

/*header 開始*/
.logo-head{
	margin: 0 30px;
}
.mobile_menu_box a , .main-font-color a{
	text-decoration: none;
}
.Scroll-Top{
	cursor: pointer;
	position:fixed;
	bottom: 50px;
	right: 50px;
	width:60px;
	height:60px;
	border:0px #999 solid;
	border-radius: 50%;
	background:#fff;
	font-size: 16px;
	line-height: 62px;
	color:#777;
	font-weight: 700;
	text-align: center;	
	box-shadow:1px 3px 8px rgba(0,0,0,0.5);
	display: none;
	z-index: 3;
	opacity: 0.8;
	transition: 0.5s all;
	}

	.Scroll-Top:hover{
		opacity: 1;
	}

.main-bg-color{
	background: #333;
}

@media screen and (max-width: 767px) {

	.Scroll-Top{
		bottom: 80px;
		right: 20px;
		width:40px;
		height:40px;
		font-size: 14px;
		line-height: 35px;
		}

	}	

	/* navbar-top Start */

.navbar-top{
	height: 30px;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	background-color: #d6ab41;
	}	

.navbar-top ul{
	}

.navbar-top ul li{
	float: right;
	}
	
.navbar-top ul li a span{
	padding: 0 10px;
	color: #252525;
	font-size: 0.85em;
	line-height: 30px;
	}

	.navbar-top ul li a span:hover{
		opacity: 0.8;
	}

@media screen and (max-width: 767px) {

	.navbar-top ul{
		margin-right: 10px;
		}

	.navbar-top ul li a span{
		padding: 0 13px;
		font-size: 1em;
		}

	.logo-head{
		display: none;
	}	

}

	/* navbar-top End */

	/* login and join lightbox Start */

.lightbox-header{
	width: 100%;
	height: 60px;
	font-size: 16px;
	font-weight: 600;
	line-height: 60px;
	letter-spacing: 0.05em;
	text-align: center;	
    margin-bottom: 20px;  
    border-bottom: 2px solid #333;  
	}

.lightbox-content{
   	padding:10px 20px;
	}

.lightbox-footer{
	width: 100%;
	height: 50px;
	background:#eee;
	border-radius: 0 0 5px 5px;
	}

.lightbox-footer ul{
	float: right;
	margin-right: 18px;
	}

.lightbox-footer ul li{
	display: inline-block;
	}

.lightbox-footer ul li a{
	line-height: 50px;
	font-size: 14px;
	padding: 0 6px;
	color: #333;
	}

.lightbox-footer ul li a:hover{
	text-decoration:none;
	color: #000;
	}

.facebook-btn{
	width: 100%;
	height: 42px;
	line-height: 42px;
    background: #658AD0;
    color: #FFFFFF;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
	}

.facebook-btn:hover{
	background: #3b67b9;
    color: #FFFFFF;
	text-decoration:none;
	}

.google-btn{
	width: 100%;
	height: 42px;
	line-height: 42px;
    background: #db4a3d;
    color: #FFFFFF;
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
	}

.google-btn:hover{
	background: #d04538;
    color: #FFFFFF;
	text-decoration:none;
	}

.join-text{
	font-size: 12px;
	color: #777;
	text-align: center;
	letter-spacing: 0.05;
	line-height: 20px;
	}

.remember{
	font-size: 14px;
	color: #777;
	letter-spacing: 0.05
	}

.ok-btn{
	width: 100%;
	height: 45px;
	display: block;
	border:none;
	border-radius: 4px;
    font-size: 16px;
    line-height:45px;
    letter-spacing: 0.05em;
    color: #fff;
    transition: all 0.5s;
    }


.go-login{
	display: block;;
	line-height: 50px;
	font-size: 14px;
	text-align: center;
	transition: all 0.5s;
	}

.ok-btn:hover, .go-login:hover{
	opacity: 0.5;
	color: #fff
    }

	/* login and join lightbox End */

	/* Logo-box Start */
	
.logo-box{
	width: 100%;
	height: auto;
	padding: 10px 0 0 0;
	background: #252525;
	}

.logo{
	display: block;
	text-align: left;
	}

.mobile-logo{
	display: none;
}

	/* Logo-box End */

	/* menuer Start */ 

.mobile_menu{
	width: 100%;
	height: 0px;
	line-height: 50px;
	position: relative;
	z-index: 5;
	}

.mobile_menu_box{
	display: none;
	}

.search-btn{
	line-height: 50px;
	color: #333;
	float: right;
	font-size: 16px;
	margin-left: 20px;
	}

.cart-btn{
	line-height: 50px;
	color: #333;
	float: right;
	font-size: 14px;
	margin-left: 10px;
	letter-spacing: 0.05em;
	position: relative;
	}

.search-btn:hover, .cart-btn span:hover{
	opacity: 0.5;
	}

.search-btn span,
.cart-btn span{
	display:inline-block;
	line-height: 50px;
	}

.menu-btn,
.search-mobile-btn,
.cart-mobile-btn{
	color: #333;
	display: inline-block;
	line-height: 50px;
	float: right;
	font-size: 20px;
	margin:0 20px 0 0;
	}

.gocart{
	cursor: pointer;
	}

@media screen and (max-width: 767px) {

	.mobile_menu{
		height: 50px;
		}

	.mobile_menu_box{
		width: 100%;
		height: 50px;
		background: #fff;
		box-shadow:3px 3px 3px rgba(0,0,0,0.2);
		display: block;
		z-index: 3;
		position:fixed;
		top:30px;
		left:0;
		}

	.logo {
		width: 45px;
    	float: left;
    	margin-left: 10px;
	}

	.logo-box{
		position: fixed;
		z-index: 6;
		background: none;
		padding: 2px 0;
		width: auto;
		}

	.mobile-logo{
		display: inline-block;
		}
		
	.not-for-mobile-logo{
		display: none;
		}

	}

		/* search-bar Start */ 

.search-bar{
	display: none;
	position: relative;
	}

.search-box{
	position: absolute;
	top: -20px;
	width: 100%;
	height: 52px;
	background: #333;
	z-index: 5555;
	}

.search-input{
	float: right;
	width:150px;
	height:50px;
	font-size: 20px;
	line-height: 50px;
	letter-spacing: 0.1em;
	color:#ccc;
	background:none;
	border:0px;
	}

.search-ok-btn{
	float: right;
	border:0px;
	height:50px;
	margin-right: 20px;
	line-height: 50px;
	background: none;
	color: #ccc;
	font-size: 20px;
	}

.search-no-btn{
	display: block;
	height:50px;
	float: right;
	}

.search-no-btn span{
	display:block;
	line-height: 50px;
	color: #fff;
	font-size: 20px;
	}

@media screen and (max-width: 767px) {
	
	.search-no-btn{
		width: 40px;
		line-height: 45px;
		}

	.search-ok-btn{
		width: 30px;
		}

	.search-ok-btn span{
		line-height: 45px;
		height: 50px;
		}

	}

		/* search-bar End */ 

		/* menu-cart-box Start */ 

.menu-cart-box{
	width: 400px;
	font-size: 14px;
	line-height: 18px;
	letter-spacing: 0.05em;
	color:#333;
	background: #fff;
	position: absolute;
	top: 50px;
	right: 0;
	1px #ccc solid;
	box-shadow:3px 3px 12px rgba(0,0,0,0.5);
	z-index: 1111111110;
	display: none;
	border-radius: 5px;
	}

.mobile-car-title{
	display: block;
	font-size: 16px;
	line-height: px;
	letter-spacing: 0.05em;
	font-weight: 700;
	color:#333;
	padding: 0 20px;
	}

.menu-cart-table-box{
	width: 100%;
	height:220px;
	background: #fff;
	overflow-y:auto;	
	overflow-x:hidden;
	border-bottom:1px #999 solid;
	}

.menu-cart-table-box tr{
	border-bottom:1px #ccc solid;
	}

.menu-cart-table-box tr td{
	padding: 7px 0 7px 0;
	}

.menu-cart-table-box tr td span{
	padding: 7px 0 7px 0;
	}

.menu-cart-table-box img{
	display: block;
	margin:5px 10px;
	}

.product-name-box{
	width: 200px;
	padding-left: 10px;
	line-height: 24px;
	}

.product-name{
	display: block;
	color: #555;
	}

.product-name a{
	display: block;
	color: #555;
	width: 165px;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	overflow:hidden;	
	}

.product-price{
	display: block;
	}

.cart-quantity{
	width: 50px;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	}

.cart-quantity span{
	font-size: 12px;
	font-weight: 600;
	padding-right: 5px;
	}

.cart-all-price{
	width: 50px;
	color: #f50058;
	}

.cart-remove{
	width: 30px;
	text-align: center;
	}

.cart-remove-btn{
	cursor: pointer;
	}

.cart-remove-btn{
	cursor: pointer;
	color: #333;
	}

.cart-total-price{
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    line-height: 50px;
	margin:0 5% ;
	}

.cart-checkout-btn{
	display: block;
	width: 90%;
	margin:0 5% ;
	height: 36px;
	font-size: 16px;
	line-height: 36px;
	letter-spacing: 0.05em;
	color:#fff;
	background:#333;
	text-align: center;
	border-radius: 4px;
	}

.cart-checkout-btn:hover{
	color: #fff;
	opacity: 0.5;
	}

.cart-close{
	display: none;
	}

@media screen and (max-width: 767px) {

	.menu-cart-box{
		width:100%;
		position: fixed;
		top: 0px;
		/*right: 50%;
		margin: 0 -150px 0 0;
		*/
		display: none;
		}

	.menu-cart-table{
		width: 100%;
	}

	.product-name-box{
		width: 100px;
		}

	.product-name a{
		width: 80px;
		white-space:pre-wrap;
		line-height: 18px;
		}

	.cart-quantity{
		width: 20px;
		}

	.cart-remove{
		width: 40px;
		text-align: center;
		}

	.cart-close{
		display: block;
	    width: 90%;
	    margin: 0 5%;
	    height: 36px;
	    font-size: 16px;
	    line-height: 36px;
	    letter-spacing: 0.05em;
	    color: #fff;
	    background: #333;
	    text-align: center;
	    border-radius: 4px;
	    margin-bottom: 40px;
		}

	.cart-close span{
		line-height: 40px;
		font-size: 24px;
		color: #999;
		}

	.cart-close-bg{
		width:100%;
		height:100%;
		background: #000;
		opacity: 0.5;
		position: fixed;
		top: 0;
		left: 0;
	    display: none;
		}

	}

		/* menu-cart-box End */ 

		/* NAV Start */ 

nav{
	background:#252525;
	position: relative;
	z-index: 100; 
	box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
	}

nav .container{
	position: relative;
	}

.nav_bg{
	display: none;
	}

.menuer{
	position: relative;
	width: 100%;
	float: left;
	text-align: center;
	padding-bottom: 10px;
	}



@media screen and (max-width: 1200px) {
	.menuer{
		width: 100%;
		}
	}

@media screen and (max-width: 991px) {
	.menuer{
		width: 100%;
		}
	}

@media screen and (max-width: 750px) {
	.menuer{
		width: 100%;
		}
	}



.menuer li{
	display: inline-block;
	}

.menuer li a{
	display:block;
	height: 60px;
	padding: 0 18px;
	color: #d6ab41;
	line-height: 62px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	margin: 0 20px;
}

	.menuer li a:first-child{
		padding: 0 18px 0 0;
	}

.menuer li a:hover {
	opacity: 0.8;
	}

			/* submenu_box 開始 */

.submenu_box_content{
	text-align: left;
	font-size: 16px;
	color: #333;
	display: none;
	}

.menuer li.submenu_box ul{
	position: absolute;;
	top: 50px;
	left: 0px;
	max-width: 1000px;
	background:#fff;
	padding:5px 20px 20px 20px;
	z-index: 3;
	border:1px #ccc solid;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.3);
	border-radius: 5px;
	}


.menuer li.submenu_box ul li a{
	height: auto;
	padding: 20px 0px 5px 0;
	font-weight: 900;
	font-size: 14px;	
	line-height: 20px;
	color: #000;
	}

.menuer li.submenu_box ul li a:hover{
	color: #fa4004;
	}

.menuer li.submenu_box ul li ul{
	width:100%;
	position:relative;
	left: 0;
	top: 0;
	border:0px;
	box-shadow:none;
	padding: 0;
	}

.menuer li.submenu_box ul li ul li{
	display: -webkit-box;
    -webkit-line-clamp: 1; /*選單子項目超過一行就變...*/
    -webkit-box-orient: vertical;
    overflow: hidden;	
	}

.menuer li.submenu_box ul li ul li a{
	width: 100%;
	height: auto;
	padding: 6px 0 0 0;
	border-bottom:0px #ccc solid;
	font-weight: 100;
	font-size: 14px;
	line-height: 20px;
	color: #999;
	}

.menuer li.submenu_box ul li ul li a:hover{
	color: #fa4004;
	}

			/* submenu_box 結束 */

			/* submenu_down 開始 */

.menuer li.	{
	position:relative;
	}

.menuer li.submenu_down{
	position: relative;
	}

.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	position: absolute;

}

.submenu_box_content .arrow-up{
	top: -10px;
	left: 95px;
	border-bottom: 10px solid #fff;
}

.menu-cart-box .arrow-up{
	top: -10px;
	right: 50px;
	border-bottom: 10px solid #fff;
}

.menuer li.submenu_down ul{
	width: 200px;
	position: absolute;;
	top: 65px;
    left: -45px;
	z-index: 3;
	border-radius: 10px;
	background: #fff;
	}

.menuer li.submenu_down ul li{
	display: block;
	border-bottom: 1px solid #fff;
	}

	.menuer li.submenu_down ul li:last-child{
	border: none;
	}


.menuer li.submenu_down ul li a{
    display: block;
    height: auto;
    padding: 15px 15px;
    color: #252525;
    line-height: 20px;
    font-size: 14px;
    font-weight: 700;
    }

.menuer li.submenu_down ul li a:hover{
	padding-left: 25px;
	opacity: 0.8;
	}

.menuer li.submenu_down ul li ul{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	background: #fff;
	padding:0px;
	box-shadow:0px 0px 0px rgba(0,0,0,0.5);
	border-radius: 0;
	border: none;
	}

.menuer li.submenu_down ul li ul li{
	border: none;
	}

.menuer li.submenu_down ul li ul li a{
	padding: 5px 20px;
	color: #999;
	}

.menuer li.submenu_down ul li ul li:first-child{
	border-top: 1px solid #ccc;
	padding-top: 5px;
	}

.menuer li.submenu_down ul li ul li:last-child{
	padding-bottom: 5px;		
	}

.menuer li.submenu_down ul li ul li:hover{
	color: #fff;
	background: #d63703;
}

			/* submenu_down 結束 */

.submenu a span{
	font-size: 12px;
	padding-left: 5px;
}

@media screen and (max-width: 767px) {

	.container{
		padding: 0;
		}

	nav{
		background: #333;
		width: 80%;
		height: 100%;
		position:fixed;
		top: 0;
		left: -80%;
		z-index: 100;
		overflow-y:visible;
		}
	
	.nav-scroll{
		width: 100%;
		height: 100%;
		overflow-y:auto;
		padding: 30px 0;
		}

	.menu-open .nav_bg{
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		position: fixed;
		background:#000;
		display: block;
		opacity: 0.5;
		}

	.menuer li{
		display: block;
		}

	.menuer li a{
		width: 100%;
		white-space:nowrap;
		text-overflow:ellipsis;
		-o-text-overflow:ellipsis;
		overflow:hidden;	
		color: #fff;
		margin-left: 10px;
		}

	.menuer li.submenu_box ul.submenu_box_content,
	.menuer li.submenu_down ul.submenu_box_content {
		width: 100%;
		height: auto;
		padding: 20px 0;
		background:#444;
		border-radius: 0;
		}

			/* submenu_box 開始 */

	.menuer li.submenu_box ul{
		position: relative;
		top: 0px;
		left: 0px;
		width:100%;
		background:none;
		padding-bottom:0px;
		border:none;
		}

	.menuer li.submenu_box ul li a{
		height: 36px;
		background: #444;
		font-size: 16px;	
		line-height: 36px;
		color: #ccc;
		text-align: left;
		font-weight: 100;
		padding: 0 0 0 35px;
		border-bottom:0px;
		white-space:nowrap;
		text-overflow:ellipsis;
		-o-text-overflow:ellipsis;
		overflow:hidden;	
		}

	.menuer li.submenu_box ul li a:hover{
		color: #fff;
		}

	.menuer li.submenu_box ul li ul li a{
		height: 36px;
		background: #444;
		font-size: 16px;
		line-height:36px;
		color: #aaa;
		font-weight: 100;
		padding: 0 0 0 55px;
		border-bottom:0px;
		}

	.menuer li.submenu_box ul li ul li a:hover{
		color: #fff;
		}

			/* submenu_box 結束 */

			/* submenu_down 開始 */

	.menuer li.submenu_down ul{
		width: 100%;
		position: relative;
		top: 0px;
		left: 0px;
		border:0px;
		background:none;
		box-shadow:none;
		}

	.menuer li.submenu_down ul li a{
	    height: 36px;
		background: #444;
	    font-size: 16px;
	    line-height: 36px;
	    color: #ccc;
	    font-weight: 100;
	    text-align: left; 
	    border-bottom:0px;
		padding: 0 0 0 30px;
		white-space:nowrap;
		text-overflow:ellipsis;
		-o-text-overflow:ellipsis;
		overflow:hidden;
		
	    }

	.menuer li.submenu_down ul li a:hover{
		color: #fff;
	    }

	.menuer li.submenu_down ul li ul{
		background: none;
		}	

	.menuer li.submenu_down ul li ul li a{
		height: 36px;
		background: #444;
		color: #aaa;
		line-height:36px;
		padding: 0 0 0 60px;
		}

	.menuer li.submenu_down ul li ul li a:hover{
		color: #fff;
		}
	.menuer li.submenu_down ul li ul li:first-child, .menuer li.submenu_down ul li{
		border: none;
		}

	.arrow-up{
		display: none;
		}
	
	.menuer{
		text-align: left;
	}
}



			/* submenu_down 結束 */

			/* menu-open and menu-close 開始 */

nav.menu-open{
	  -webkit-animation: 0.5s  menu_open normal 1 forwards ease-out;
	     -moz-animation: 0.5s  menu_open normal 1 forwards ease-out;
	       -o-animation: 0.5s  menu_open normal 1 forwards ease-out;
	  	      animation: 0.5s  menu_open normal 1 forwards ease-out;
	}

@keyframes menu_open{
	  0% { left: -80%; }
	100% { left:   0%; }
	} 

@-webkit-keyframes  menu_open {
	  0% { left: -80%;  }
	100% { left:   0%;  }
	}

@-moz-keyframes menu_open{
	  0% { left: -80%;  }
	100% { left:   0%;  }
	}

@-o-keyframes menu_open{
	  0% { left: -80%;  }
	100% { left:   0%;  }
	}

nav.menu-close{
	  -webkit-animation: 0.5s  menu_close normal forwards ease-out;
	     -moz-animation: 0.5s  menu_close normal forwards ease-out;
	       -o-animation: 0.5s  menu_close normal forwards ease-out;
	  	      animation: 0.5s  menu_close normal forwards ease-out;
	}

@keyframes menu_close{
	  0% { left:   0%;  }
	100% { left: -80%;  }
	}

@-webkit-keyframes  menu_close{
	  0% { left:   0%;  }
	100% { left: -80%;  }
	}

@-moz-keyframes menu_close{
	  0% { left:   0%;  }
	100% { left: -80%;  }
	}

@-o-keyframes menu_close{
	  0% { left:   0%;  }
	100% { left: -80%;  }
	}

			/* menu-open and menu-close End */

		/* NAV End */ 

	/* menuer End */

/* header 結束 */	


/*新增大標*/

.big_title {
    color: #d6ab41;
    font-size: 2em;
    font-weight: 500;
    text-decoration: none;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 9999;
}

@media screen and (max-width: 1200px) {
    .big_title {left: 1%;}
}

@media screen and (max-width: 991px) {
    .big_title {display: none;}
}

@media screen and (max-width: 767px) {
    .big_title {display: block;
    position: relative;
    top: 0px;
    }
}


/*新增大標*/