/*modify by pekey 20190523*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Setting Start-------------------------------*/

/*================*/
/*-- loading --*/
/*================*/

.loading {
 	position: fixed;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    background: #FFF;
	text-align:center;
	
	/*新增by pekey 20171211*/
	padding-top:250px;
 } 
 
	
	/*Loading畫面CSS開始*/
	#circularG{
		position:relative;
		width:58px;
		height:58px;
		margin: auto;
	}
	
	.circularG{
		position:absolute;
		background-color:rgb(201,9,21);  /*此為Loding的點點顏色*/
		width:14px;
		height:14px;
		border-radius:9px;
			-o-border-radius:9px;
			-ms-border-radius:9px;
			-webkit-border-radius:9px;
			-moz-border-radius:9px;
		animation-name:bounce_circularG;
			-o-animation-name:bounce_circularG;
			-ms-animation-name:bounce_circularG;
			-webkit-animation-name:bounce_circularG;
			-moz-animation-name:bounce_circularG;
		animation-duration:1.1s;
			-o-animation-duration:1.1s;
			-ms-animation-duration:1.1s;
			-webkit-animation-duration:1.1s;
			-moz-animation-duration:1.1s;
		animation-iteration-count:infinite;
			-o-animation-iteration-count:infinite;
			-ms-animation-iteration-count:infinite;
			-webkit-animation-iteration-count:infinite;
			-moz-animation-iteration-count:infinite;
		animation-direction:normal;
			-o-animation-direction:normal;
			-ms-animation-direction:normal;
			-webkit-animation-direction:normal;
			-moz-animation-direction:normal;
	}
	
		#circularG_1{
			left:0;
			top:23px;
			animation-delay:0.41s;
				-o-animation-delay:0.41s;
				-ms-animation-delay:0.41s;
				-webkit-animation-delay:0.41s;
				-moz-animation-delay:0.41s;
		}
		
		#circularG_2{
			left:6px;
			top:6px;
			animation-delay:0.55s;
				-o-animation-delay:0.55s;
				-ms-animation-delay:0.55s;
				-webkit-animation-delay:0.55s;
				-moz-animation-delay:0.55s;
		}
		
		#circularG_3{
			top:0;
			left:23px;
			animation-delay:0.69s;
				-o-animation-delay:0.69s;
				-ms-animation-delay:0.69s;
				-webkit-animation-delay:0.69s;
				-moz-animation-delay:0.69s;
		}
		
		#circularG_4{
			right:6px;
			top:6px;
			animation-delay:0.83s;
				-o-animation-delay:0.83s;
				-ms-animation-delay:0.83s;
				-webkit-animation-delay:0.83s;
				-moz-animation-delay:0.83s;
		}
		
		#circularG_5{
			right:0;
			top:23px;
			animation-delay:0.97s;
				-o-animation-delay:0.97s;
				-ms-animation-delay:0.97s;
				-webkit-animation-delay:0.97s;
				-moz-animation-delay:0.97s;
		}
		
		#circularG_6{
			right:6px;
			bottom:6px;
			animation-delay:1.1s;
				-o-animation-delay:1.1s;
				-ms-animation-delay:1.1s;
				-webkit-animation-delay:1.1s;
				-moz-animation-delay:1.1s;
		}
		
		#circularG_7{
			left:23px;
			bottom:0;
			animation-delay:1.24s;
				-o-animation-delay:1.24s;
				-ms-animation-delay:1.24s;
				-webkit-animation-delay:1.24s;
				-moz-animation-delay:1.24s;
		}
		
		#circularG_8{
			left:6px;
			bottom:6px;
			animation-delay:1.38s;
				-o-animation-delay:1.38s;
				-ms-animation-delay:1.38s;
				-webkit-animation-delay:1.38s;
				-moz-animation-delay:1.38s;
		}
		
		
		
		@keyframes bounce_circularG{
			0%{
				transform:scale(1);
			}
		
			100%{
				transform:scale(.3);
			}
		}
		
		@-o-keyframes bounce_circularG{
			0%{
				-o-transform:scale(1);
			}
		
			100%{
				-o-transform:scale(.3);
			}
		}
		
		@-ms-keyframes bounce_circularG{
			0%{
				-ms-transform:scale(1);
			}
		
			100%{
				-ms-transform:scale(.3);
			}
		}
		
		@-webkit-keyframes bounce_circularG{
			0%{
				-webkit-transform:scale(1);
			}
		
			100%{
				-webkit-transform:scale(.3);
			}
		}
		
		@-moz-keyframes bounce_circularG{
			0%{
				-moz-transform:scale(1);
			}
		
			100%{
				-moz-transform:scale(.3);
			}
		}
	/*Loading畫面CSS結束*/

.loading_tit{
	padding:20px 0px 0px 15px;
	display:inline-block;
	font-size: clamp( .875rem, 2.1333vw, 1rem ); /* 14 16 */
	font-weight:bold;
	color:#333;
	font-family:微軟正黑體;
	text-align:center;
}


/*/////////////////////////////////////////////////////////*/
/*-------版頭--------*/
/*/////////////////////////////////////////////////////////*/

.header {
    width: 100%;
    height: 50px;
	position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

/*浮動*/
/*.header.fixed{
}*/

	/*右側*/
	.header > .right{
		width: 100%;
		height: 50px;
		padding-left: 285px;
		box-sizing: border-box;
		background-color: #fff;
		/*border-bottom: 1px solid #E5E9EC;*/
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
		
		position: relative;
	}
		.header > .right .wrap{
		}
		
			/*主功能項目選單按鈕*/
			.main_menuButton {
				display: none;
				
				position: absolute;
				left: 0;
				top: 0px;
				z-index: 999;
				padding: 10px 10px;
				width: 50px;
				height: 50px;
				font-size: 14px;
				color: #fff;
				border: none;
				border-radius: 0;
				outline: none;
				background-color: #333f48;
				box-sizing: border-box;
			}
				
				.main_menuButton button{
					background-color: transparent;
					margin: 0px;
					border: 0px;
					padding: 0px;
					width: 100%;
    				height: 100%;
				}
				
				.main_menuButton .open{
				}
				.main_menuButton.active .open{
					display: none;
				}
				
				.main_menuButton .close{
					display: none;
				}
				
				/*active*/
				.main_menuButton.active .close{
					display: block;
				}
					
					.main_menuButton i{
						color: #fff;
					}
					
					
			/*次功能項目選單按鈕*/
			.second_menuButton{
				display: none;
			}
				.second_menuButton .more{
				}
					.second_menuButton i{
						color: #fff;
					}
			
			
			
			/*次功能項目區塊*/
			.secondContent_Bg{
				height: 50px;
			}
				.secondContent_Bg > .left{
					float: left;
				}
				.secondContent_Bg > .right{
					float: right;
					
					min-width: 175px;
				}
					.secondContent_Bg > .right .user_area{
						display: flex;
						align-items: center;
					}
					.secondContent_Bg > .right .user{
						height: 50px;
						box-sizing: border-box;
					}
						
						.user.logout a{
							display: block;
							text-decoration: none;
							color: #000;
							height: 100%;
							box-sizing: border-box;
						}
							.user.logout .title{
								padding: 9px 0px 0px;
								height: 50px;
								box-sizing: border-box;
							}
								.user.logout .title i{
									color: #000;
									position: relative;
									top: 6px;
								}
						
						/*下拉選單*/
						.user.logout .selectOpenBg{
							display:none;
							width: 100%;
							margin:0px;
							z-index: 10000;
						}
						/*當前模式*/
						.user.logout.active .selectOpenBg{
							display:block;
						}
							.user.logout .selectOpen{
								position: relative;
								background-color: #fff;
								-webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
								box-shadow: 0 6px 12px rgba(0,0,0,0.175);
								background-clip: padding-box;
							    border: 1px solid #ccc;
								
								border-left: 0;
    							border-bottom: 0;
							}
								.user.logout .select_list {
									text-align: left;
								}
									.user.logout .select_list a {
										display: block;
										box-sizing: border-box;
										font-size: 14px;
										line-height: 18px;
										color: #000;
										padding: 13px 15px;
										transition: 0.3s ease all;
										text-decoration: none;
										word-break: break-all;
									}
									.user.logout .selectOpen .select_list a:hover {
										color: #fff;
										background-color: #666f76
									}
			.header_cart{
				padding-left: 10px;
				cursor: pointer;
				display: flex;
				align-items: center;
			}
			.cart_num{
				display: inline-block;
				padding: 5px 3px;
				border-radius: 3px;
				background-color: var(--primary_color);
				color: #fff;
				margin-left: 5px;
			}
	
	/*左側*/
	.header > .left{
		width: 270px;
		height: 50px;
		background-color: #333f48;
		/*background-color: #ca0000;*/
		position: absolute;
		left: 0;
		top: 0px;
		z-index: 1;
	}
		.header > .left .wrap{
		}
					
			.logo{
				height: 50px;
			}
				.logo a{
					display: block;
					height: 100%;
					line-height: 50px;
					padding-top: 13px;
					box-sizing: border-box;				
				}
					.logo img{
						/*width: 100%;*/
						width: 110px;
						height: auto;
						vertical-align: baseline;
						line-height: 50px;
						opacity: 0.8;
					}


@media (max-width: 1024px){
	
	/*左側*/
	.header > .left{
		left: -270px;
		
		transition: 0.3s ease all;
	}
	.header > .left.active{
		left: 0px;
		
		transition: 0.3s ease all;
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	}
	
	/*主功能項目選單按鈕*/
	.main_menuButton{
		display: block;
	}
	.main_menuButton.active{
		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
	}
	
	/*右側*/
	.header > .right{
		margin-left: 0;
		padding-left: 0;
		width: 100%;
		
		transition: 0.3s ease all;
	}
	.header > .right.active{
		margin-left: 270px;
		
		transition: 0.3s ease all;
	}
	
}

@media (max-width: 768px){
	
}


@media (max-width: 640px){
	
		/*手機menu按鍵*/
		.menu_btn {
			left: 15px;
		}
}




/*================*/
/*----- 主按鍵 -----*/
/*================*/