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

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

/*================*/
/*-- 浮動top鍵 --*/
/*================*/
.topBtn_area{
	position:fixed;
	right: 14px;
	bottom: -200px;
	z-index: 99;
	transform: scale(0.84);
	transition:0.3s ease all;
}
	/*浮動按鍵*/
	.topBtn_list {
		margin: 7px 0px;
		position: relative;
	}
		
		.topBtn_list a {
			display: flex;
			transition:0.3s ease all;
			text-decoration:
			none;
			font-size:12px;
			line-height: 12px;
			text-align:
			center;
			width: 42px;
			height: 42px;
			box-sizing:
			border-box;
			border-radius:100%;
			color:#000000;
			background: #fff;
			box-shadow:0px 0px 10px
			rgba(0,0,0,0.5);
			position:
			relative;
		}
		
		/*line-綠色*/
		.topBtn_list.green a{
			background-color: #00b900;
		}
		/*fb-藍色*/
		.topBtn_list.blue a{
			background-color: #4267b2;
		}
		
		.topBtn_list.pink a{
			background: -webkit-linear-gradient(#9836ba,#f05c37);
			background: -o-linear-gradient(#9836ba,#f05c37);
			background: -moz-linear-gradient(#9836ba,#f05c37);
			background: linear-gradient(#9836ba,#f05c37);
		}
			
			.topBtn_list a i {
				font-size: 40px;
				margin: -3px 0px -9px;
			}
			.topBtn_list img{
				width: 27px;
				height: auto;
				margin: auto;
				/* position:
				absolute; */
				/* top:8px; */
				/* right:7px; */
			}
				/*hover*/
				.topBtn_list:hover {
				}
					.topBtn_list:hover a {
						box-shadow:0px 0px 10px rgba(0,0,0,0.1);
					}
					
			/*標籤說明*/		
			.tab_description{
				display: none;
				position: absolute;
				left: -95px;
				top: 50%;
				margin: -16px 0px 0px;
				background: rgba(0,0,0,0.6);
				color: #fff;
				padding: 10px 10px;
				font-size: 13px;
    			transition: 0.3s ease all;
				width: 70px;
				text-align: center;
			}

			/*hover*/
			.topBtn_list:hover .tab_description{
				display: block;
    			transition: 0.3s ease all;
			}



	
	/*回最上面*/
	.topBtn {
		margin: 7px 0px;
		position: relative;
	}
		.topBtn a {
			display:block;
			text-align:center;
			box-sizing:border-box;
			width: 50px;
			height: 50px;
			
			border: solid 2px #f8b62d;
			position:relative;
			text-decoration:none;
			transition:0.3s ease all;
			border-radius:100%;
			background:#fff;
			padding: 25px 0px 0px;
			color:#f8b62d;
		}
				
		/*hover*/
		.topBtn a:hover {
			border-color:#fff;
			box-shadow:0px 0px 10px rgba(0,0,0,0.2);
			color: #f8b62d;
		}

			.topBtn a:before {
				position:absolute;
				content:'';
				border-bottom: solid 12px #f8b62d;
				border-left: solid 8px rgba(0,0,0,0);
				border-right: solid 8px rgba(0,0,0,0);
				top: 8px;
				left: 15px;
			}

			/*hover*/
			.topBtn a:hover:before {
				border-bottom: solid 12px #f8b62d;
			}

				.topBtn a span {
					display: block;
					font-size: 0.75em;
					color: #f8b62d;
					letter-spacing: 0;
				}

			/*hover*/
			.topBtn:hover .tab_description{
				display: block;
				transition: 0.3s ease all;
			}	
					

			
@media (max-width: 641px) {

	.topBtn_area{
		right: 12px;
	}
	
	.topBtn_list a {
		/* width: 40px;
		height: 40px; */
		width: 33.6px;
		height: 33.6px
	}
		.topBtn_list img{
			width: 26px;
		}

	.topBtn a {
		width: 40px;
		height: 40px;
		padding: 18px 0px 0px;
	}
		.topBtn a:before {
			border-bottom: solid 8px #f8b62d;
			border-left: solid 5px rgba(0,0,0,0);
			border-right: solid 5px rgba(0,0,0,0);
			top: 6px;
			left: 13px;
		}
		
		/*hover*/
		.topBtn a:hover:before {
			border-bottom: solid 8px #f8b62d;
		}
}






		
/*/////////////////////////////////////////////////////////*/
/*-------右側浮動--------*/
/*/////////////////////////////////////////////////////////*/
	

/*-------浮動社群鍵-------*/

.CommunityBtn_area{
	position:fixed;
	right: 18px;
	bottom: 220px;
	transition:0.3s ease all;
	z-index: 201;
}
	


@media (max-width: 641px){
	.CommunityBtn_area {
		right: 15px;
	}	
}










/*/////////////////////////////////////////////////////////*/
/*-------版腳--------*/
/*/////////////////////////////////////////////////////////*/

.footer {
}

/* 當前模式 active */
.footer.active{

}

	/* 版腳_上方內容區塊 */
	.footer_topContent {
		padding: 35px 0px;
		background-color: white;
		border-top: 1px #e4e3e1 solid;
	}
		.footer_topContent > .wrap{
			position: relative;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
		}

	/* 版腳_下方內容區塊 */
	.footer_bottomContent {
		padding: 25px 0px;
		background-color: #efefef;
	}



/* @media (max-width: 990px){ */
@media (max-width: 1280px){
/* @media (max-width: 1023px){ */

	.footer_topContent > .wrap {
		flex-wrap: wrap;
	}

	.footer_topContent {
		margin-top: 30px;
		padding: 35px 0 20px;
	}
}

@media (max-width: 767px){
	
	/* 當前模式 active */
	/* 版腳浮動選單，後台需可設定參數讓使用者自由開啟 */
	.footer.active .footer_bottomContent.active {
		padding: 25px 0px 75px;
	}

}	



	
	
/*///////////////////////////*/
/*-- 版腳_中方內容區塊 --*/
/*///////////////////////////*/

.footer_middleContent{	
	padding: 35px 0px 0px;
	background-color: white;
	background-color: #efefef;
}

	/* 版腳_資訊區塊 */
	.footer_information{		
	}
		.footer_information h3{
			padding: 0;
			margin: 0;
			display: block;
			font-size: 17px;
			line-height: 17px;
			margin-bottom: 5px;
		}
			.footer_information h3 a{
				display: block;
				text-decoration: none;
				color: #333;
				padding: 5px 0;
			}

			.footer_information a:hover{
				opacity: 0.5;
			}

		.footer_information ul{
			padding: 0;
			margin: 0;
			display: block;
			list-style-type: none;
			font-size: 14px;
			line-height: 14px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
			.footer_information li{
				padding: 0;
				margin: 0;
				display: block;
				list-style-type: none;
				display: flex;				
				align-items: center;
				padding: 5px 0;
				padding-right: 15px;
			}
				/* .footer_middleContent i{
					font-size: 15px;
					line-height: 15px;
					color: #fff;
					margin-right: 5px;
					box-sizing: border-box;
					background-color: #7d7d7d;
					border-radius: 50%;
					padding: 5px;
					display: block;
				} */
				.footer_information .icon{
					background-color: #7d7d7d;
					border-radius: 50%;
					padding: 5px;
					margin-right: 5px;
					box-sizing: border-box;
				}
					.footer_information img{
						width: 14px;
						height: 14px;
						display: block;
					}

				.footer_information a{
					display: block;
					text-decoration: none;
					color: #333;
				}
			


@media (max-width: 767px){

	.footer_information h3 {
		font-size: 15px;
		line-height: 20px;
		/* margin-bottom: 5px; */
	}

	.footer_information ul{		
		font-size: 12px;
		line-height: 12px;
		display: block;
		flex-wrap: unset;
		align-items: unset;
	}
	.footer_information img {
		width: 10px;
		height: 10px;
	}
}




@media (max-width: 641px){

	.footer_information .icon {
		display: none;
	}

}








	
/*///////////////////////////*/
/*-- 版腳qrcode區塊 --*/
/*///////////////////////////*/

.qrcode_Page{
	box-sizing: border-box;
	width: 150px;
	display:none
	/* margin: 0 20px; */
}
	.qrcode_Page a{
		display: block;
	}
		.qrcode_Page img{
			width: 100%;
			height: auto;
		}


/* @media (max-width: 1280px){ */
@media (max-width: 1600px){

	.qrcode_Page{
		width: 120px;
		/* padding-left: 20px; */
	}
	/* .qrcode_Page{
		order: 0;
	} */

}


@media (max-width: 769px){

	.qrcode_Page{
		/* width: 50px; */
	}

}

@media (max-width: 425px){
	.qrcode_Page{
		width: 50%;
		margin: 40px auto 0;
	}	
}




/*///////////////////////////*/
/*-- fb粉絲專頁區塊 --*/
/*///////////////////////////*/

.fb_fanPage{
	/* position: absolute; */
	width: 360px;
	/* min-width: 360px; */
	max-width: 100%;
	box-sizing:
	border-box;
}
	.fb_fanPage iframe{
		width: 100%;
	}
	
@media (max-width: 769px){

	.fb_fanPage {
		/*width: 250px;*/
		min-width:unset;
	}
}


@media (max-width: 425px){
	.fb_fanPage {
		width: 100%;
		/* min-width:unset;
		max-width: 100%; */
	}
}



/*///////////////////////////*/
/*------- 版腳主按鍵區塊 --------*/
/*///////////////////////////*/

.footerNavbar_bg{
	width: 630px;
	max-width: 100%;
	box-sizing:
	border-box;
	/* width: calc(100% - 515px); */
}

	.footer_navbar{
		text-align: center;
		/* text-align: right; */
		display: flex;
		/* justify-content: center; */
		/* justify-content: flex-end; */
		/*width: 816px;*/
	}
		
		/* 版腳主按鍵 */
		.footer_nav{
			box-sizing: border-box;
			vertical-align: top;
			text-align: left;
			padding-left: 25px
			/* width: 16.6%; */
			/*padding-left: 160px;*/
			/* padding-left: 4%; */
		}
        .footer_nav:first-of-type{
        	padding-left: 0px;
        }
		/* .footer_nav:nth-of-type(5) ,
		.footer_nav:nth-of-type(6) {
			display:none
		} */


			/* 標題 */
			.footer_nav .title{
				font-size: 20px;
				line-height: 26px;
				color: #000000;
				font-weight: bold;
			}
			.footer_nav .title > a{
				display: block;
				color: #000000;
				padding: 0 0 15px;
				text-decoration: none;
			}
			.footer_nav .title > a:hover{
				opacity:0.5;
				transition:0.3s ease all;
			}


			/* 選單 */
			.footer_navOpen{
				margin: 15px 0px 0px;
			}
				.footer_navOpen_list{
					box-sizing: border-box;
					font-size: 16px;
					line-height: 22px;
					letter-spacing: 0px;
					color: #f8b62d;
					margin-bottom: 5px;
				}
				.footer_navOpen_list a{
					display: inline-block;
					text-decoration:none;
					color: #8c8783;
					/*color: #f8b62d;*/
				}						
			
				/* hover */
				.footer_navOpen_list a:hover{
					opacity:0.5;
					transition:0.3s ease all;
				}					




@media (max-width: 1600px){
	
	.footer_topContent > .wrap {
		/* width:95%; */
	}	
		
	/* 版腳主按鍵 */
	.footer_navbar{
		/*width: 500px;*/
	}
		
		/* 版腳主按鍵 */
		.footer_nav{
			/* padding-left: 14.5%; */
		}

}



@media (max-width: 1500px){
/* @media (max-width: 1280px){ */

	/*.footerNavbar_bg {
		order: 2;
		margin: 40px 0 0;
	}*/
	
	/* .footerNavbar_bg{
		width: calc(100% - 380px);
	} */
		/* 版腳主按鍵 */
		/* .footer_nav{
			 padding-left: 5.5%;
		} */
	
}

@media (max-width: 1280px){
/* @media (max-width: 990px){	 */
	
	.footerNavbar_bg{
		width: 100%;
	}
		.footer_navbar{
			float: none;
			display: block;
			justify-content:unset;
		}
		
			/*版腳主按鍵*/
			.footer_nav {
				float: none;
				width: 100%;
				border-bottom: 1px #bcbcbc solid;
				padding: 20px 0;
				cursor: pointer;
			}	
			.footer_nav2{
				padding: 0;
				border-bottom: 0px #bcbcbc solid;
			}
			.footer_nav:nth-of-type(1) {
				margin: 0;
			}


				/* 標題 */
				.footer_nav .title{
					position: relative;
					padding-right: 20px;

					font-size: 16px;
					line-height: 22px;
				}
				.footer_nav .title > a {
					padding: 0;
				}
				.footer_nav2 .title{
					padding: 0;					
				}
					.footer_nav2 .title > a{
						padding: 20px 0;
						border-bottom: 1px #bcbcbc solid;
					}
					.footer_nav .title:before{
						position: absolute;
						content: "";
						border-top: solid 8px #bcbcbc;
						border-left: solid 5px rgba(0,0,0,0);
						border-right: solid 5px rgba(0,0,0,0);
						right: 0px;
						/* top: 3px; */
						top: 8px;
						transition: 0.3s ease all;
					}
					.footer_nav.active .title:before{
						transform: rotate(180deg);
						transition: 0.3s ease all;
					}
					.footer_nav2 .title:before{
						display: none;
					}
					
				/* 選單 */
				.footer_navOpen{
					display: none;
				}
					.footer_navOpen_list{
						margin-bottom: 10px;
					}
					.footer_navOpen_list a{
						/* display: block; */
						font-size: 14px;
						line-height: 20px;
					}
		
	
}



/*///////////////////////////*/
/*------- 版權宣告 --------*/
/*///////////////////////////*/		  
.copyright {
}
	.copyright .copyright_list {
		font-size: 12px;
		line-height: normal;
		color: #808080;

		display: inline-block;
		vertical-align: middle;
	}	
	.copyright .copyright_list:nth-of-type(2) {
		padding-left: 5px;
	}	
		.copyright .copyright_list a {
			font-size: 12px;
			line-height: normal;
			color: #808080;	
		}



@media (max-width: 1081px){
	.copyright{
		width: 35%;
	}
}

@media (max-width: 1023px){
	
	.copyright {
		float: none;
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 767px){	

	.copyright {
		text-align: left;
	}

}

@media (max-width: 641px){	

	.copyright .copyright_list {
		display: block;
	}

	.copyright .copyright_list:nth-of-type(2){
		padding-left: 0;
		padding-top: 5px;
	}
}






/*///////////////////////////*/
/*----- 瀏覽器警示標語 ------*/
/*///////////////////////////*/

.browser{
	color: #808080;
	text-align: left;
	font-size: 12px;
	line-height: normal;
	padding-top: 5px;
}
	

	
@media (max-width:1023px){	
		
	.browser{
		text-align: center;
	}
				
}	
@media (max-width:767px){	
		
	.browser{
		text-align: left;
	}
				
}			
@media (max-width: 641px){	
		
	.browser{
		padding-top: 15px;
	}
				
}			



/*///////////////////////////*/
/*------- 版腳cookie --------*/
/*///////////////////////////*/		  

.cookie{
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: 0 auto;
    opacity: 1;
    z-index: 100;
    -webkit-transition: 1s;
    transition: 1s;
	/* background-color:#f8b62d; */
	background-color: #b3b3b3;
	color: #ffffff;
	display: none;
	padding: 20px 0px;
}

.cookie.show{
	display: block;
}


	.cookie .wrap{
	}
	
		.cookie .content{
			display: flex;
			align-items: center;
			
		}
			.cookie .content span{
				color: #ffffff;
				font-size: 14px;
				line-height: 20px;
			}


			.cookie .button {
				padding-left: 20px;
				display:flex ;
			}
			
				.cookie .button input{
					width: 110px;
					border-radius: 3px;
					background-color: #7d7d7d;
					/* background-color: #deb267; */
				}
				
		
			

@media (max-width: 1023px){

	.cookie .button input {
		margin: 5px 0px;
	}
}

@media (max-width: 641px){

	
	.cookie .content span{
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 0;
	}

}



/*///////////////////////////*/
/*------- 版腳浮動搜尋區塊 --------*/
/*///////////////////////////*/
.fixedSearch_bg {
	display: none;
	position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
	height: 100%;
    z-index: 100;
    background: rgba(255,255,255,0.95);
    box-sizing: border-box;
    transition: 0.3s ease all;
}

/* 當前模式 class 加 show */
.fixedSearch_bg.show{
	display: block;
}

	.fixedSearch_bg .in{
		position: relative;
		width: 100%;
		height: 100%;
	}

		/* 搜尋區塊 */
		.fixedSearch_bg .search_bg{
			display: block;
			position: absolute;
			left: 50%;
			top: 35%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			width: 60%;

			overflow: hidden;
			background: transparent;
			border: unset;
			box-shadow: unset;
			border-bottom: 1px solid #cccccc;

			box-sizing: border-box;
			padding: 0px;
			border-radius: 3px;
			z-index: 15;
			-webkit-transition: top .2s;
			transition: top .2s;
		}

			.fixedSearch_bg .search_bg .search_in{
				position: relative;
				width: 100%;
				padding: 0px 70px 0px 37px;
				box-sizing: border-box;
			}

				/* icon */
				.fixedSearch_bg .search_bg .icon{
					position: absolute;
					left: 7px;
					top: 50%;
					-webkit-transform:  translateY(-50%);
					transform:  translateY(-50%);

					width: 20px;
					height: 20px;
					line-height: 39px;
				}

				/* 輸入框 */
				.fixedSearch_bg .search_bg input[type="text"]{
					background: transparent;
					border: 0px;
					background-color: transparent;
					font-size: 15px;
					/* font-weight: bold; */
					line-height: 40px;
					height: 40px;
					padding: 0px;
					width: 100%;
					border-bottom: unset;
					border-radius: 0;
					color: #999999;
				}

				.fixedSearch_bg .search_bg input[type="submit"]{	
					position: absolute;
					right: 0px;
					top: 50%;
					-webkit-transform:  translateY(-50%);
					transform:  translateY(-50%);


					width: 60px;
					height: 32px;
					line-height: 35px;
					font-size: 14px;
					color: #ffffff;
					background-color: #555555;
					border-radius: 32px;
					z-index: 2002;
					text-align: center;
					letter-spacing: 0;
					
					z-index: 2002;
				}

				.fixedSearch_bg #searchClose_MB{	
					position: absolute;
					right: 11px;
   					top: 13px;
					text-decoration: none;
					z-index: 2002;
					color: #000000;
				}
					.fixedSearch_bg #searchClose_MB span{
						
					}
						.fixedSearch_bg .searchClose_MB{
							font-size: 45px;
							font-weight: lighter;
						}	

@media (max-width: 767px) {

	/* 版腳浮動搜尋區塊 */
	.fixedSearch_bg {
	}
}

@media (max-width: 641px) {

	/* 搜尋區塊 */
	.fixedSearch_bg .search_bg{
		width: 90%;
	}

	.fixedSearch_bg .in {
		padding: 0px 15px;
		box-sizing: border-box;
	}
}


/*///////////////////////////*/
/*------- 版腳浮動選單 --------*/
/*///////////////////////////*/		  

.fixedMenu_bg{
	display: none;
	position: fixed;
    left: 0px;
    width: 100%;
    z-index: 99;
    background: #ffffff;
    box-sizing: border-box;
    transition: 0.3s ease all;
    bottom: 0px;
	border-top: 1px solid #d8d8d8;
}
	.fixedMenu_bg .list{
		float: left;
		width: 25%;
		box-sizing: border-box;
	}
		.fixedMenu_bg .list a{
			display: block;
			text-decoration: none;
			text-align: center;
			padding: 5px;
			box-sizing: border-box;
		}

			/* 圖片 */
			.fixedMenu_bg .list .icon{
				width: 20px;
				margin: 0px auto;
				position: relative;
			}

				.fixedMenu_bg .list .icon img{
					width: 100%;
					height: auto;
				}
				.fixedMenu_bg .list img.after{
					display: none;
				}

				/* active */
				.fixedMenu_bg .list.active img.before{
					display: none;
				}
				.fixedMenu_bg .list.active img.after{
					display: block;
				}


				/* 數量 */
				.fixedMenu_bg .list.cart .icon .quantity{
					position: absolute;
					top: -5px;
					right: -20px;
					width: 20px;
					line-height: 20px;
					border-radius: 20px;
					background-color: #636363;
					color:#ffffff;
					text-align:center;
					font-size:12px;
					letter-spacing:0px;
		
					display:inline-block;
					vertical-align: middle;	
					transition: 0.3s ease all;
				}


			/* 標題 */
			.fixedMenu_bg .list .title{
				font-size: 12px;
				color: #a1a1a1;
				padding-top: 7px;
				letter-spacing: 0;
			}

			/* active */
			.fixedMenu_bg .list.active .title{
				color: #555555;
			}


@media (max-width: 1024px){


	.footer {
		
	}	
	
	
}



@media (max-width: 767px){
	
			
	/* 當前模式 active */
	/* 版腳浮動選單，後台需可設定參數讓使用者自由開啟 */
	.footer.active .fixedMenu_bg.show{
		display: block;
	}
	
	
}

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