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

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





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

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

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

	/*浮動按鍵*/
	.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: 50px;
			height: 50px;
			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;
			}


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



/*================*/
/*-- 浮動top鍵 --*/
/*================*/
.topBtn_area{
	position:fixed;
	right:14px;
	bottom:0px;
	z-index: 10;
	transform: scale(0.84);
	transition:0.3s ease all;
}
	
	.topBtn {
		position: fixed;
		bottom: -70px;
		right: 14px;
		z-index: 99;
		/*z-index:3;*/
	}
		.topBtn a {
			display:block;
			text-align:center;
			box-sizing:border-box;
			width: 50px;
			height: 50px;
			border: solid 2px #50a45d;
			position:relative;
			text-decoration:none;
			transition:0.3s ease all;
			border-radius:100%;
			background-color:#ffffff;
			padding: 25px 0px 0px;
			color:#2a3035;
		}
			.topBtn a:before {
				position:absolute;
				content:'';
				border-bottom: solid 12px #50a45d;
				border-left: solid 8px rgba(0,0,0,0);
				border-right: solid 8px rgba(0,0,0,0);
				top: 8px;
				left: 15px;
			}
			.topBtn a span {
				font-size: 0.75em;
				display: block;
				color:#33a0da;
			}
				/*hover*/
				.topBtn a:hover {
					border: solid 2px #50a45d;
					background-color:#50a45d;
					box-shadow:0px 0px 10px rgba(0,0,0,0.2);
					color: #ffffff;
				}
					.topBtn a:hover:before {
						border-bottom: solid 12px #ffffff;
					}
				
				.topBtn a:hover span {
					color: #ffffff;
				}	

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

			
@media (max-width: 641px) {
	.topBtn a {
		width: 40px;
		height: 40px;
		padding: 18px 0px 0px;
	}

		.topBtn a:before {
			border-bottom: solid 8px #50a45d;
			border-left: solid 5px rgba(0,0,0,0);
			border-right: solid 5px rgba(0,0,0,0);
			top: 6px;
			left: 13px;
		}
		.topBtn a:hover:before {
			border-bottom: solid 8px #ffffff;
		}
}


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

.footer {

}

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

}

	/* 版腳_上方內容區塊 */
	.footer_topContent {
		padding: 35px 0px;
		background-color: #b0b0b0;
	}

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

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

}	



/*/////////////////////////////////*/
/*------- 右下角_內容區塊 --------*/
/*/////////////////////////////////*/		
.footer .top_rightContent{
	float: right;
	box-sizing: border-box;
	/* width: 35%; */
}

@media (max-width: 1181px){	
	.footer .top_rightContent{
		/* width: 45%; */
	}
}

@media (max-width: 1023px){
	
	.footer .top_rightContent {
		float: none;
		width: 100%;
		/* padding: 0 0 40px; */
	}
	
}


/*/////////////////////////////////*/
/*------- 右下角_內容區塊 --------*/
/*/////////////////////////////////*/		
.bottom_rightContent{
	float: right;
	width: 60%;
}


@media (max-width: 1023px){
	
	.footer .bottom_rightContent {
		display: block;
		float: none;
		width: 100%;
		padding: 15px 0px 0px;
	}
	
}

/*///////////////////////////*/
/*------- 訂閱電子報 --------*/
/*///////////////////////////*/

.newsLetter_bg {
	display: none;
}

	/*標題*/
	/* .newsLetter_bg .title {
		color: #fff;
		font-size: 16px;
	} */
	
	/*內容*/
	/* .newsLetter_bg .conetnt {
		padding: 10px 0 0;
		position: relative;
	} */

		/* 輸入框 */
		/* .newsLetter_bg .input{
			padding: 0;
			padding-right: 85px;
		}
			.newsLetter_bg .input input[type="text"]{
				background-color: #fff;
				color: #666;
				margin: 0;
				padding: 0;
				outline: none;
				vertical-align: middle;
				width: 100%;
				height: 42px;
				line-height: 42px;
				transition: 0.2s ease all;
				padding: 3px 10px 0px;
				box-sizing: border-box;
				border-radius: 3px;
				border: solid 0px #aeaeae;
			}	 */
			
		/* 按鈕 */
		/* .newsLetter_bg .button{
			vertical-align: top;
			position: absolute;
			right: 0;
			top: 10px;
			width: 70px;
			height: 42px;
		}	
			.newsLetter_bg .button input{
				width: 100%;
				height: 42px;
				line-height: 42px;
				font-size: 16px;
				padding: 2px 3px 0px;
				border-radius: 3px;
				box-sizing: border-box;
				text-align: center;
				color: #fff;
				background-color: #888888;
			} 
				


@media (max-width: 321px){
	.newsLetter_bg .title{
		font-size: 14px;
		line-height: 20px;
	}
}*/

/*///////////////////////////*/
/*------- 社群連結區塊 --------*/
/*///////////////////////////*/		

.sns_linkBg {
	font-size: 0px;
	max-width: 190px;
	/* padding: 15px 0px 0px; */
}

	.sns_linkBg .list_area{
		margin: 0px -5px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
		
		.sns_linkBg .list {
			/* display: inline-block;
			vertical-align: top; */

			/* float: left; */
			width: 50px;
    		padding: 2px 5px;
			box-sizing: border-box;
		}

			.sns_linkBg .list  a {
				display: block;
				transition: 0.3s ease all;
				text-decoration: none;
				border-radius: 100%;
				background: #888888;
				padding: 7px;
			}
		
				.sns_linkBg .list a img {
					width: 100%;
					height: auto;
					/* opacity: 0.7; */
					transition: 0.3s ease all;
				}
				
				/* hover */
				.sns_linkBg .list a:hover {
					opacity: 0.7;
				}



.footer .bottom_rightContent .sns_linkBg{
	display: none;
}



@media (max-width: 1023px){


/*------- 社群連結區塊 --------*/

.sns_linkBg {
	/* font-size: 0px;
	padding: 15px 0px 0px; */
}

	.sns_linkBg .list_area{
		justify-content: unset;
	}


	.footer .top_rightContent .sns_linkBg {
		display: none;
	}

	.footer .bottom_rightContent .sns_linkBg{
		display: block;
		float: none;
		padding: 0;
		max-width: unset;
	}
		.sns_linkBg .list a {
			background-color: #b0b0b0;
		}
	
}



@media (max-width: 767px){
	.sns_linkBg .list {
		width: 42px;
		padding: 0px 3px;
	}
}
	
/*///////////////////////////*/
/*------- 版腳主按鍵區塊 --------*/
/*///////////////////////////*/

.footerNavbar_bg{
	float: left;
	max-width: calc(100% - 200px);
	width: 820px;
	/* width: 50%; */
	box-sizing:border-box;
}

	.footer_navbar {
		display: flex;
		flex-wrap: wrap;
	}
		
		/* 版腳主按鍵 */
		.footer_nav{
			/* width: 33%; */
			/* float: left; */
			box-sizing: border-box;
			width: 20%;
		}

		/* .footer_nav:last-of-type{
			padding-right: 0%;
		} */

			/* 標題 */
			.footer_nav .title{
				font-size: 20px;
				line-height: 26px;
				color:#fff;
				/* font-weight: bold; */
			}
				.footer_nav .title > a{
					color:#fff;
					text-decoration: none;
					display: inline-block;
				}

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



@media (max-width: 1023px){

	.footerNavbar_bg{
		float: none;
		width: 100%;
		max-width: unset;
	}
	
		/*版腳主按鍵*/
		.footer_nav {
			padding-right: 5px;
		}	
		
			/* 標題 */
			.footer_nav .title{
				font-size: 17px;
				line-height: 1.5;
			}
			/* 選單 */
			.footer_navOpen{
				margin: 5px 0px 0px;
				/* margin: 10px 0px 0px; */
			}
				.footer_navOpen_list{
					box-sizing: border-box;
					font-size: 14px;
					line-height: 1.5;
				}
}


@media (max-width: 769px){	
	
	.footerNavbar_bg{
		/*display:none;*/
	}	

		.footer_navbar{
			float: none;
		}
		
			/*版腳主按鍵*/
			.footer_nav {
				float: none;
				width: 100%;
				/* border-bottom: 1px #ffffff solid; 
				cursor: pointer;*/
				padding: 20px 0 10px;			
			}	
			.footer_nav2 {
				border-bottom: 1px #cfcfcf solid;
				cursor: pointer;
			}
			.footer_nav:nth-of-type(1) {
				margin: 0;
			}

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

					font-size: 16px;
					line-height: 22px;
				}
					.footer_nav2 .title:before{
						position: absolute;
						content: "";
						border-top: solid 8px #ffffff;
						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_nav2.active .title:before{
						transform: rotate(180deg);
						transition: 0.3s ease all;
					}
					
				/* 選單 */
				.footer_navOpen{
					display: none;
				}
					.footer_navOpen_list{
						margin-bottom: 10px;
					}
					.footer_navOpen_list a{
						/* display: block; */
						font-size: 14px;
						line-height: 20px;
					}
		
	
}



/*///////////////////////////*/
/*------- 公司資訊 --------*/
/*///////////////////////////*/	

.company_information {
	float: left;
	width: 30%;
}
	.company_information .information_list {
		font-size: 14px;
		line-height: 20px;
		color: #ffffff;

		padding: 2px 0px;
	}	
	.company_information .information_list a{
		color: #ffffff;
		text-decoration: none;
		display: inline-block;
	}

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

@media (max-width: 1023px){
	
	.company_information {
		float: none;
		width: 100%;
	}
}

	
@media (max-width: 641px){	
	.company_information .information_list {
		font-size: 12px;
		line-height: 18px;
	}
}


	

/*///////////////////////////*/
/*------- 版權宣告 --------*/
/*///////////////////////////*/		  

.copyright{
	text-align: right;

	font-size: 14px;
	line-height: 20px;
	color: #ffffff;

	padding: 15px 0px 0px;
	font-family: 'Nunito', sans-serif;
}
	.copyright a{
		font-size: 14px;
		line-height: 20px;
		color: #ffffff;
	}
	

@media (max-width: 1023px){

	.copyright {
		text-align: left;
		padding: 15px 0px 0px;
	}

}

	
@media (max-width: 641px){	
		
	/*版權宣告*/
	.copyright{
		font-size: 12px;
		line-height: 18px;
	}
		.copyright a{
			font-size: 12px;
			line-height: 18px;
		}
				
}	

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

.browser{
	color: #ffffff;
	text-align: right;
	font-size: 13px;
	line-height: 19px;
	padding-top: 5px;
}
	

	
@media (max-width:1023px){	
		
	.browser{
		text-align: left;
	}
				
}			
@media (max-width: 641px){	
		
	.browser{
		font-size: 12px;
		line-height: 18px;
	}
				
}			



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

.cookie{
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    margin: 0 auto;
    opacity: 1;
    z-index: 101;
    -webkit-transition: 1s;
    transition: 1s;
	background-color:#50a45d;
	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: #ffffff;
					color: #50a45d;
				}
				
		
			

@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;
	}

}

/* modify by pekey 20210521*/
/*///////////////////////////*/
/*------- 版腳浮動搜尋區塊 --------*/
/*///////////////////////////*/
.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; */ /* modify by pekey 20210727 */
			border-radius: 0;
			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="search"]{
					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;

                    /* 修改結構 modify by pekey 20210728 */
					cursor: pointer;
				}
					.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: 100;
    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: #33a0da;
					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){
	
}