/*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;
		}
		/*fb-藍色*/
		.topBtn_list.whatsapp a{
			background-color: #25D366;
		}
		
		.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: clamp(1.0625rem,1.8229vw,2.1875rem) 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;
	}


}

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

}	



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

.footer_middleContent{
	/* padding: 35px 0px 0px; */
	padding: 20px 0px 20px 0px;
	background-color: white;
	background-color: #bfeffd;
}
.footer_middleContent .wrap{	
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	/* align-items: flex-end; */
	align-items: center;

}

	/* 版腳_資訊區塊 */
	.footer_information{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: clamp(1.25rem,2.0833vw,2.5rem);
	}
		.footer_information h3{
			display: block;
			width: 6.25rem;
		}
			.footer_information h3 a{
				display: block;
				position: relative;
				padding-top: 79.62%;
			}
			.footer_information h3 a img{
				width:100%;
				height:auto;
				transition: all 0.3s ease-out;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				float: none;
				width: 100% !important;
				height: 100% !important;
				object-fit: cover;
				transition: all 0.3s ease-out;
			}

			.footer_information a:hover{
				opacity: 0.5;
			}

		.footer_information ul{
			padding: 0;
			margin: 0;
			display: block;
			list-style-type: none;
			line-height: 14px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: .3125rem;
			font-size: clamp(.75rem,0.7292vw,.875rem);
		}
			.footer_information li{
				width: 100%;
				padding: 0;
				margin: 0;
				display: block;
				list-style-type: none;
				display: flex;				
				align-items: center;
				
				
			}
				/* .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: 990px){
	.footer_information h3{
		width: 4.375rem;
		padding: 0;
		margin: 0;
	}
	.footer_middleContent .wrap {
		justify-content: center;
		gap: 1.25rem;
	}
}



@media (max-width: 767px){

	

	.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%; */
	}
}

.footer_right_area{
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 40px;
}

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

.footerNavbar_area{
	max-width: 100%;
	box-sizing:border-box;
}

	.footer_navbar_center{
		display: flex;
		flex-wrap: wrap;
		gap: 1.25rem;
	}
		
		/* 版腳主按鍵 */
		.footer_nav_list{
			box-sizing: border-box;
			vertical-align: top;
			text-align: right;
		}

		.footer_nav_list>a{
			color: #000;
			font-weight: 400;
		}
		.footer_nav_list>a:hover{
			text-decoration: none;
			color: var(--primary_color);
		}

        .footer_nav:first-of-type{
        	padding-left: 0px;
        }				

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

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

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

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



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

		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: #000;	
		}



@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: #000;
	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: var(--primary_color);
	color: #ffffff;
	display: none;
	padding: 20px 0px;
}

.cookie.show{
	display: block;
}


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


			.cookie .button {
				padding-left: 20px;
				display:flex ;
			}
			
				.cookie .button input{
					width: 110px;
					border-radius: 3px;
					background-color: var(--notice_color);
					/* 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;
			}


/* =============================== */
/* 右側語系 */
/* =============================== */
.footer_lang_area{
	width: 30%;
}
.footer_lang_area:hover{
	cursor: pointer;
}
.footer_lang{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: .3125rem;
	position: relative;
	
}



.footer_lang::before{
	position: absolute;
    content: "";
    border-top: solid 7px #777;
    border-left: solid 4px rgba(255, 255, 255, 0);
    border-right: solid 4px rgba(255, 255, 255, 0);
    /* top: 50%; */
    top: 50%;
    right: -5%;
    transform: translateY(-50%) rotate(-180deg);
}

.footer_lang .lang_img{ 
	width: 20px;
}
.footer_lang .lang_img a{
	position: relative;
	display: block;

}
.footer_lang .lang_img a img{
    position: relative;
    width: 20px;
    /* height: 20px; */
	aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    display: inline-block;
    background: no-repeat 50% / cover;
    vertical-align: middle;
    box-sizing: border-box;
}
.footer_lang .lang_text{ 
	padding-right: .3125rem;
	width: fit-content;
}

.footer_language_list {
    position: absolute;
    width: 150px;
    bottom: 140px;
    right: 7%;
    -webkit-transform: translate(50%, 50%) scaleY(0);
    transform: translate(50%, 50%) scaleY(0);
    transform-origin: bottom; /* 從底部展開 */
    background-color: #fff;
    border-radius: 3px;
    margin: 5px 0px 0px;
	margin: 0;
    box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
    font-size: .875rem;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.footer_language_list.active {
    -webkit-transform: translate(50%, 50%) scaleY(1);
    transform: translate(50%, 50%) scaleY(1);
    opacity: 1;
    pointer-events: auto;
}


.footer_language_list_in  {
	padding: 10px;
}
.footer_language_list_in > a {
	color: #fff;
	color: #000;
	display: inline-block;
	text-decoration: none;
	font-size: 12px;
	line-height: 24px;
	text-decoration: none;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: .3125rem;
}
.footer_language_list_in > a img {
	position: relative;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    display: inline-block;
    background: no-repeat 50%/cover;
    vertical-align: middle;
}
.footer_language_list_in > a .lang_in_text {
	width: fit-content;
}



.language>a:hover,
.footer_language_list>a:hover {
	opacity: 0.5;
}



@media (max-width: 1280px){
	.footer_lang{
		right: 10%;
		
	}
}

@media (max-width: 1024px){


	.footer {
		
	}	
	
	
}



@media (max-width: 990px){
	.footer_lang_area{
		display: none;
	}
}


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

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