//====
//
//  common
//
//====
@import url('./color.less?v=1.0.0');
@import url('./shadow.less');
@import url('./transition.less');

//==== container ====
	@break_point_sm 	: 576px;
	@break_point_md 	: 768px;
	@break_point_lg 	: 992px;
	@break_point_xl 	: 1200px;

	@container_sm_w 	: 540px;
	@container_md_w 	: 720px;
	@container_lg_w 	: 960px;
	@contianer_xl_w 	: 1140px; 

//==== other ====
	@unit 				: 8px;

//====
//
//  component
//
//====
@import url('./index.less?d=20220426-1410');
@import url('./nav2.less');
@import url('./news.less');
@import url('./news_detail.less?d=20220512-1400');
@import url('./member.less');
@import url('./member_register.less');
@import url('./member_pw.less');
@import url('./member_modify.less');
@import url('./member_info.less');
@import url('./member_shopping.less');
@import url('./member_order.less');
@import url('./member_order_detail.less');
@import url('./shopping_cart.less');
@import url('./shopping_cart_detail.less?d=20181113-1600');
@import url('./shopping_cart_ok.less');
@import url('./product.less');
@import url('./product_detail.less?d=20220505-1336');
@import url('./location.less');
@import url('./material.less');
@import url('./video.less');

//====
//
//  rwd
//
//====
@top_menu_h : 50px;
@nav_h 		: 120px;
body{
	padding 		: @top_menu_h 0px 0px 0px;
	background-color: @bg-color;
}
.top_menu{
	height 	: @top_menu_h; 
	width 	: 100%;
	padding : 0px;
	margin 	: 0px; 
	position: fixed;
	position: expression(fixed);
	top 	: 0px;
	left 	: 0px;
	display 		: flex;
	display 		: -webkit-flex;
	flex-direction 	: row;
	z-index 		: 100;
	background      : linear-gradient(0deg, #2D2E33 0%, #595D65 65%);
	border-style: solid;
	border-width: 0px 0px 2px 0px;
	border-color: #CCC0A9;
	@shadow-2;
	//
	.container{
		padding: 0px;
	}
	.left{
		height 			: 100%; 
		padding 		: 0px;
		display 		: flex;
		flex-direction 	: row;
		//
		.title{
			height 			: 100%;
			//
			a{
				width 			: 100%;
				height 			: 100%;
				display 		: block;
				padding 		: 0px 8px; 
				display 		: flex;
				justify-content : center;
				align-items 	: center;	
				text-decoration : none;
				color 			: #fff4d5;//#fff4d5;
				font-size 		: 16px;
				font-weight 	: 600; 
				line-height 	: 20px; 
				margin-top 		: -1px; 
				//
				&:hover{
					color 		: #fff;		
				}
			}
		}
	}
	.right{
		height 			: 100%; 
		padding 		: 0px;
		display 		: flex;
		flex-direction 	: row;
		justify-content : flex-end;
		//
		#i_cart{
			.icon-shopping-cart{
				font-size 	: 20px; 
				margin-right: 10px;
			}
		}
		#i_cart_All{
			width 		: 0px; 
			margin 		: 0px; 
			border-width: 0px;
			//
			#i_cart_Show{
				top 			: 60px;
				right 			: 0px;
				box-shadow 		: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
				background 		: none;
				background-color: white;
				border-radius 	: 2px;
				position 		: absolute;
				//
				#i_cart_close{
					position 	: absolute;
					right 		: 15px;
					top 		: 15px;
					font-size 	: 15px;
					padding 	: 7px;    
					margin-right: -7px;
				} 
				.s_tit{
					width 		: 100%;
					padding 	: 15px;
					margin 		: 0px;   
				}
			}
		}
	}
	.menu-item{
		height 			: 100%;	
		//
		a{
			width 			: 100%;
			height 			: 100%;
			display 		: block;
			padding 		: 0px 8px; 
			display 		: flex;
			justify-content : center;
			align-items 	: center;	
			text-decoration : none;
			color 			: #CCC0A9;
			line-height 	: 20px; 
			font-size 		: 12px; 
			//
			&:hover{
				color 		: #fff;
			    background 	: #c2bfb6;
			    background 	: -moz-linear-gradient(top, #c2bfb6 0%, #b7b5b0 26%, #96948a 100%);
			    background 	: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c2bfb6), color-stop(26%,#b7b5b0), color-stop(100%,#96948a));
			    background 	: -webkit-linear-gradient(top, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
			    background 	: -o-linear-gradient(top, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
			    background 	: -ms-linear-gradient(top, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
			    background 	: linear-gradient(to bottom, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
			    filter 		: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2bfb6', endColorstr='#96948a',GradientType=0 );
			}
		}	
	}
	.separate{
		height 			: 100%;
		border-right 	: 1px solid #a2a095;
	}
	&.menu-mobile{
		@left_w 	: 50px;
		@right_w 	: 50px;
		float : left;
		//
		.left{
			width  			: @left_w;
			height 			: 100%;
			float 			: left;
			display 		: flex;
			justify-content : center;
			align-items 	: center;
		}
		.center{
			width  			: calc(~"100%" - (@left_w + @right_w));
			height 			: 100%;
			float 			: left;
			display 		: flex;
			justify-content : center;
			align-items 	: center;
			//
			a{
				height: 100%;
				padding: 5px 0px;
				//
				img{
					height: 100%;
				}
			}
		}
		.right{
			width  			: @right_w;
			height 			: 100%;
			float 			: left;
			display 		: flex;
			justify-content : center;
			align-items 	: center;
			//
			.btn-group{
				//
				ul.shopping-cart{
					display: none;
					right: 0px;
					left : auto;
				}
				&.open{
					ul.shopping-cart{
						display: block;
						//
						li{
							margin: auto;
							display: block;
							font-size: 14px;
							//
							&.product-item{
								display: flex;
								flex-direction: row;
								padding: 5px 20px 0px 20px;
								margin-top: 5px;
								border-style: solid;
								border-color: @primary-10;
								border-width: 1px 0px 0px 0px;
								//
								h1{
									font-size 	: 12px;
									padding 	: 0px 0px 0px 10px;
									margin 		: 0px;  
									//
									.product-num{
										margin: 10px 0px 0px 0px; 
									}
								}
							}
						}
						.divider{
							margin: 9px 0px;
						}
					}
				}
			}
		}
	}
}
.in_block{
	margin 	: 0px;
	width 	: 100%;
}
.inline_block_box{
	margin: 30px auto;
	width : 100%;
	//
}
#nav{	
	width 			: 100%;
	height  		: @nav_h;
	position 		: relative;
	left 			: 0px; 
	z-index 		: 5; 
	//
	.nav-bone{
		width 			: 100%;
		height  		: 100%;
	}
	.nav-face{
		width 			: 100%;
		height  		: @nav_h;
		position 		: fixed;
		top 			: @top_menu_h;	
		//
		.nav-background{
			width 			: 100%;
			height  		: 100%;
			background-color: @bg-color;
			opacity 		: 0.9; 
			position 		: absolute;
			top 			: 0px;
			left 			: 0px; 
		}
	}
	.container{
		padding 		: 0px; 
		position: relative;
		//
		#logo{
			height 		: @nav_h;
			width 		: 200px;  
			position 	: absolute;
			top 		: -4px;
			left 		: -30px;
			overflow 	: hidden;
			//
			img{
				position: absolute;
				
			} 
		}
		.navbar{
			width 			: 100%; 
			padding 		: 0px 0px 8px 160px;
			margin 			: 0px; 
			position 	 	: absolute;
			top 			: 90px;
			display 		: flex;
			flex-direction 	: row;  
			min-height 		: 0px; 
			border-style 	: solid;
			border-width 	: 0px 0px 2px 0px;
			border-color 	: #675E53;
			//
			.nav-item{
				position: relative;			
				//
				a{
					padding 		: 10px;
					text-decoration : none;
					color 			: #675E53;
					//
					&:hover{
						color 		: #fff;
					    background 	: #c2bfb6;
					    background 	: -moz-linear-gradient(top, #c2bfb6 0%, #b7b5b0 26%, #96948a 100%);
					    background 	: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c2bfb6), color-stop(26%,#b7b5b0), color-stop(100%,#96948a));
					    background 	: -webkit-linear-gradient(top, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
					    background 	: -o-linear-gradient(top, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
					    background 	: -ms-linear-gradient(top, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
					    background 	: linear-gradient(to bottom, #c2bfb6 0%,#b7b5b0 26%,#96948a 100%);
					    filter 		: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c2bfb6', endColorstr='#96948a',GradientType=0 );
					}
					.label-new{
						font-weight: 300;
						font-size: 3px;
						padding: 1px 3px;
						margin-right: 10px;
					}
				}
				ul{
			        position 		: absolute;
			        z-index 		: -99;
			        left 			: 0px;
			        top 			: 30px;   
			       	overflow 		: hidden;
			       	background-color: white;
			       	padding 		: 15px 0px; 
			       	opacity 		: 0; 
			       	display 		: none; 
			       	border-radius 	: 2px; 
			       	box-shadow 		: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
			       	.transition( all; 0.5s; ease; 0s );
			       	//
			       	li{
			       		margin 		: 0px;
  						padding 	: 0px;
  						list-style 	: none;
  						//
  						a{
  							width 			: 100%; 
  							padding 		: 10px 15px;
							text-decoration : none;
							color 			: #675E53;
							display 		: block; 
							.transition( all; 0.2s; ease; 0s );
							//
							&:hover{
								color 			: #fff;
								background 		: none;
							    background-color: @second-50;
							}
  						}
			       	}
			    }
			 	&:hover {
			 		//
			 		ul{
			 			display 		: block;
				 		z-index 		: 99; 
				 		min-width 		: 152px;
				 		opacity 		: 1;

				 	}
			 	}
			}
		}
	}
}
.path{
	padding: 30px 15px 15px 15px;
}
#sidebar{
	//
	.sb-background{
		width 			: 100%;
		height 			: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position 		: fixed;
		top 			: 0px;
		left 			: 0px;
		opacity 		: 0; 
		z-index 		: -100;
		.transition( all; 0.5s; ease; 0s );
	}
	.sb-content{
		width  			: 230px;
		height 			: 100%; 
		background-color: rgba(0, 0, 255, 0.5);
		position 		: fixed;
		padding-bottom 	: 50px; 
		top 			: 0px;
		left 			: -250px;
		z-index 		: 101; 
		overflow-y 		: auto;
		// background 		: url(../img/bg_menu.jpg) no-repeat top left;
		background      : linear-gradient(0deg, #2D2E33 0%, #595D65 65%);
		.shadow-5;
		.transition( all; 0.5s; ease; 0s );
		//
		#btn-close{
			position 		: absolute;
			top 			: 10px;
			right 			: 10px;
			color 			: white;
			background-color: transparent;
			//
			&:hover{
				color 		: @second-50;
				border-color: @second-50;
			}
		}
		#item-group{
			//
			.panel{
				border-top: 1px solid #595D65;
				margin-top: 0px;
				//
				.panel-heading{
					color 			: white;
					background-color: #607D8B;
					padding 		: 0px;
					height 			: auto; 
					border-radius 	: 0px; 
					.transition( all; 0.5s; ease; 0s );
					//
					.panel-title{
						background-image: url(''); 
						line-height 	: 25px;
						position 		: relative; 
						//
						a{
							padding 		: 10px; 
							text-decoration : none;
						}
						.glyphicon{
							position: absolute;
							right : 10px;
							top 	: 15px;
						}
					}
					&:hover{
						//color 			: #463a2e;
						background-color: #4b636f;
					}
				}
				.panel-collapse{
					//
					background-color: #595D65;
					color : #fff;
						//
						.item{
							width 	: 100%;
							//
							a{
								padding 		: 10px 20px;
								display 		: block;
								text-decoration : none;
								color : #fff;
								//
								&:hover{
									color 		: #fff;
					    			background-color: #595D65;
								}
							} 
						}	
				}
			}
		}
		.group-company{
			margin-top 	: 30px;
			padding 		: 10px 20px;
			//
			.menu-item{
				//
				a{
					display: block;
					padding: 5px 0px;
					color 	: #fff4d5;
					text-decoration : none;
					cursor: pointer;
					//
					&:hover{
						color 		: @bg-color;
					}
				} 
			}		
		}
	}	
	&.sidebar-show .sb-content, {
		left 			: 0px;
	}
	&.sidebar-show .sb-background, {
		opacity 		: 1; 
		z-index 		: 100;
	}
}
#footer{
	//background-color: @primary-50;
	padding 		: 56px 0px; 
	margin-top 		: 0px; 
	font-size 		: 13px; 
	background      : linear-gradient(0deg, #2D2E33 0%, #595D65 65%);
	border-style: solid;
	border-width: 3px 0px 0px 0px;
	border-color: #CCC0A9;
	//
	.footer-block{
		margin-bottom 	: 15px;
		padding 		: 0px 30px; 
		//
		.header{
			font-size 	: 18px;
			color 		: #ff9a27;
			//
			a{
				color 		: #ff9a27;
				text-decoration : none;
				//
				&:hover{
					color 		: @bg-color;
				}
			}
		}
		.item{
			//
			a{
				display: block;
				padding: 5px 0px;
				color 	: #fff4d5;
				text-decoration : none;
				cursor: pointer;
				//
				&:hover{
					color 		: @bg-color;
				}
			} 
		}

	}
	.block-no-header{
		margin-top: 30px;
	}
	#contact{
		margin-top: 30px;
		text-align: right;
		//
		.info-item{
			font-size 	: 12px; 
			padding 	: 2px 0px;	
			color 		: @bg-color;
		}
	}
}
.main-content.container{
	padding: 0px;
	z-index: 3;
		
	//==== 聯絡我們 contact.php ====
		&#main_contact{
			background-color: white;
			.content-header{
				position: relative;
				//
				.header-bg{
					width 	: 100%;
					height 	: 100%;
					position: absolute;
					top 	: 0px;
					left 	: 0px;
					overflow: hidden;
					opacity : 0.5; 
					//
					img{
						width 	: 100%;
					}
				}
				.header-content{
					padding : 50px 0px; 
					position: relative;
					top 	: 0px;
					left 	: 0px;
					text-align: center;
					font-size: 20px;
				}
			}
			.content-body{
				padding 	: 30px 0px;
				.row{
					margin 	: 0px;
					//

					.orange-star{
						color: #FF8000;
					}
					.input_m{
						width : 100%;
						margin-left: 0px;	
					}
					.input_m2{
						width : 100%;
						margin-left: 0px;
					}
				}
			}
		}
	//==== 銷售據點 location.php ====
		&#main_location{
			padding-bottom: 30px;
		}
	//==== 購物須知 notice.php ====
		&#main_notice{
			//
			.notice_in{
				width 		: 100%; 
				margin 		: 0 auto; 
				min-height 	: 100px;
			}
			.notice_in h2{font-weight:bold; font-size:1.2em;padding-left:50px;padding-right:50px;}
			.notice_in p{line-height:1.5em;padding-left:50px;padding-right:50px;}
			.notice_in h2 b{ color:#FF8100;}
			.notice_in p b{ color:#FF8100;}
			.notice_in h1{font-weight:bold; font-size:1.3em;padding-left:50px;padding-right:50px;color:#665F52;}
			.notice_in h1 b{ font-size:0.85em; font-weight:normal;color:#665F52;}
			
			@media (min-width:768px) {
			   	
		  		.notice_in{ 
		  			width:50%; 
		  			float:left; 
		  			margin-top:0 auto;
		  		}
			}					
		}
	//==== member_register.php ====
		.flow_box{ border-radius:4px; border:1px solid #D8D8D7;padding:10px;width:24.5%;height:90px;display:inline-block;margin:0;}
		.flow_box h1{ color:#FF7E00;font-size:3.7em;float:left;margin-left:15px;font-family: 'Lato', sans-serif;margin-top:5px;}
		.flow_box h2{ font-size:1.1em;font-weight:bold;float:left;margin-left:10px;margin-top:15px;}
		.flow_box p{ float:left;margin-left:10px;margin-top:-10px;}

		.flow_box2{ 
			border-radius:4px; border:1px solid #D8D8D7;padding:10px;width:24.5%;height:90px;
		  	display:inline-block; background:url(../img/olpng.png) no-repeat right center #FF7E00;
		  	margin:0;
		}
		.flow_box2:last-child{margin-right:0px;}
		.flow_box2 h1{ color:#fff;font-size:3.7em;float:left;margin-left:15px;font-family: 'Lato', sans-serif;margin-top:5px;}
		.flow_box2 h2{ font-size:1.1em;font-weight:bold;float:left;margin-left:10px;margin-top:15px;color:#fff;}
		.flow_box2 p{ float:left;margin-left:10px;margin-top:-10px;color:#fff;}
	//==== product.php ====
		.row-product{
			padding 	: 0px 0px 15px 0px;
			margin 		: 0px;
			background-color: @bg-color;
		}
		.product-card{
			padding 	: 0px;
			margin 		: 0px;
			border-color: rgba(0, 0, 0, 0.5);
			border-style: solid;
			border-width: 0px;
			overflow 	: hidden;
			position 	: relative; 
			.transition( all; 0.5s; ease; 0s );
			//
			.product-bone{
				width 	: 100%;
				position: relative;
				.transition( all; 0.5s; ease; 0s );
			}
			.product-face{
				width 	: 100%;
				height 	: 100%;
				padding : 15px; 
				overflow: hidden;
				position: absolute;
				top 	: 0px;
				left 	: 0px;  
				//
				.product-border{
					width 			: 100%;
					height 			: 100%;
					background-color: white;
					overflow 		: hidden;
					border-radius 	: 2px; 
					position 		: relative; 
					border 			: 1px solid @primary-10;  
					.shadow-1;
					.transition( all; 0.5s; ease; 0s );
					//
					&:hover{
						.shadow-2;
					}
					.product-img{
						width 			: 100%;
						height 			: 100%;
						overflow 		: hidden;
						display 		: flex;
						justify-content : center;
						align-items 	: flex-start; 
						//
						img{
							border 		: 0px solid #fff;
							max-width 	: 100%;
							width  		: 100%;
						}
					}
					.product-info{
						width 	 		: 100%;
						height 	 		: 33.3%;
						padding 		: 10px; 
						position 		: absolute;
						bottom 	 		: 0px;
						left 	 		: 0px;
						background-color: rgba(255, 255, 255, 0.3);
						font-size 		: 14px; 
						display 		: flex;
						justify-content : flex-end;
						align-items 	: center; 
						flex-direction 	: column;
						text-shadow 	: 2px 2px 3px #ffffffdb;
						//
						.product-name{
							width 		: 100%;	
							min-height 	: 21px; 
							color 		: @primary-50;
							text-align 	: center; 
							font-weight : 500;
							font-size 	: 15px;  
							overflow 	: hidden;
							text-overflow: ellipsis; 
							white-space: nowrap;
						}
						.price-1{
							width 		: 100%;	
							min-height 	: 21px;
							color 		: @secondary-50;
							text-align 	: center;
							font-size 	: 13px;
							font-weight : 300;
						}
						.price-2{
							width 		: 100%;	
							min-height 	: 21px;
							color 		: @primary-50;
							text-align 	: center;
							font-size 	: 13px;
							font-weight : 300;
						}
					}
				}
			}
		}
}
.formError{
	left: auto;
	right: 0px !important;
	//
	.formErrorContent{
		margin-left: -100px;
	}
}
.label-discount{
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 3px 5px;
	border-radius: 2px;
	background-color: #FF9800;
	color: #fff;
	opacity: 0.9;
}