@charset "UTF-8";
/* 以上是 聲明 css編碼 */

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');

/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');

/* 表頭 top */
	header{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .3s;
		box-shadow: 0 0 4px rgb(0 0 0 / 28%);
		background-color: #fff;
	}
	.toplogo{
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		margin: 5px;
		position: relative;
		transition: all .3s;
	}
	.toplogo > img{
		vertical-align: top;
		width: 35px;
		transition: all .3s;
		image-rendering: -moz-crisp-edges;
	    image-rendering: -o-crisp-edges;
	    image-rendering: -webkit-optimize-contrast;
	    image-rendering: optimize-contrast;
	    -ms-interpolation-mode: nearest-neighbor;
	}
	.toplogo > span{
		display: inline-block;
	    font-size: 1.5rem;
	    color: #000;
	}

	/* 下滑時header_2 */
	.header_2 .topnav ul li a{ font-size: 1.05rem;}
	/* 表頭按鈕 */
		.topUp_link{
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			right: 0;
			top: 50%;
			transform: translate(0, -50%);
		}
	/* 社群小圖示 */
		.toplink ul{
			list-style: none;
			position: fixed;
			z-index: 99;
			bottom: 70px;
			right: 0;
			transition: all .5s;
		}
		.toplink ul li a{
			display: block;
			padding: 0.5rem;
			box-sizing: border-box;
			font-size: 2rem;
			border-radius: 50%;
			transition: all .3s;
			color: #fff;
			margin: 5px;

		}
		.toplink ul li .toplink_fb{
			background-color: #3B559F;
		}
		.toplink ul li .toplink_line{
			background-color: #4ECD00;
		}
		.toplink ul li .toplink_mail{
			background-color: #f44336;
		}
		.toplink ul li .toplink_phone{
			background-color: #ff9800;
		}
		.toplink ul li:hover a{
			transform: scale(1.05);
		}
		.toplink ul li .toplink_totop{
			width: 50px;
			height: 50px;
			padding: 5px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			letter-spacing: 2px;
			font-family: 'Crete Round', serif;
			font-style: normal;
			cursor: pointer;
			box-sizing: border-box;
			color: #FFF;
			font-weight: bold;
			font-size: 1.15rem;
			border-radius: 50%;
			transition: all .5s;
			background-color: #888;
			margin-top: 10px;
		}
		.toplink ul li .toplink_totop:hover{ background-color: #6B6B6B; }
	/* 購物車 */

		.shopcart_btn{
			display: block;
			text-align: center;
			color: #000;
			padding: 0.5rem;
			box-sizing: border-box;
			font-size: 1.5rem;
			position: relative;
			transition: all .3s;
			cursor: pointer;
			transition: all.5s;
		}

		.shopcart_btn:before{
			position: absolute;
			content: '';
			width: 0;
			height: 5px;
			background-color: #3b3b3b;
			top: 90%;
			transition: all .3s;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.shopcart_btn:hover{ background-color: rgba(0,0,0,0.2); }


		.shopcart_btn:hover:before{
			width: 100%;
		}

	/* 購物車 */
	.topshopping{
		
	}
	.topshopping_main{
		position: relative;
	}
	.topshopping_main > a{
		position: absolute;
		right: 0;
		top: -5px;

	}
	.topshopping_main > a > i{
		
	}
	.topshopping_main > a > span{
		color: #F44336;
		margin: 0 5px;
		transition: all.5s;
		font-size: 0.8rem;
	}
	.shopcart_cross > i{
		display: inline-block;
		text-align: center;
		color: #3b3b3b;
		padding: 0.5rem;
		box-sizing: border-box;
		font-size: 1.5rem;
		position: relative;
		transition: all .3s;
		cursor: pointer;
	}

	/* 購物車清單 */
		.shopcart_menu_list{
			background-color: #fbfbfb;
			position: fixed;
			z-index: 9999;
			top: 0;
			right: -200px;
			width: 200px;
			box-sizing: border-box;
			height: 100vh;
		}
		.shopcart_menu_list > form{
			padding-top: 40px;
		}
		.shopcart_menu_list ul{
			display: block;
			max-height: 390px;
			overflow: auto;
			-webkit-overflow-scrolling: touch;
		}
		.shopcart_menu_list ul li{
			border-bottom: 1px silver dashed;
			padding: 10px;
			box-sizing: border-box;
			position: relative;
		}
		.shopcart_menu_list ul .empty{
			border: 0;
		}
		.shopcart_menu_list_title{
			display: block;
			color: #F37B1D;
		}
		.shopcart_menu_list_price{ color: #A9A9A9; }
		.shopcart_menu_list_icon{
			display: inline-block;
			background-image: url(/webobj/Shopping/images/trash.svg);
			width: 15px;
			height: 15px;
			position: absolute;
			right: 0;
			bottom: 12px;
			cursor: pointer;
		}
		.shopcart_menu_list_icon:hover{ bottom: 14px; }
		.shopcart_menu_list_totalFee{
			color: #C30D07;
			font-size: 1.25rem;
			text-align: right;
			display: block;
			padding: 10px 5px;
			box-sizing: border-box;
		}
		.shopcart_menu_list_unit{
			display: inline-block;
			font-size: 12px;
			margin-left: 2px;
			color: #000;
		}
		.shopcart_menu_list_total{
			text-align: center;
			margin: 5px 0;
		}
		.shopcart_menu_list_botton{
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			text-align: center;
			padding: 10px;
			box-sizing: border-box;
			background-color: #222222;
			color: #fff;
			font-size: 1.25rem;
		}
		.shopcart_menu_list_botton > span{
			z-index: 2;
			display: block;
			position: relative;
		}
		.shopcart_menu_list_botton:before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 0%;
			height: 100%;
			z-index: 1;
			opacity: 0;
			background-color: #FFCC00;
			transition: all 0.3s;
		}
		.shopcart_menu_list_botton:hover::before{
			opacity: 1;
			width: 100%;
		}
@media (min-width: 1030px)
{
	header{
		border-top: 5px solid #0B344E;
    	box-sizing: border-box;
	}
	.topwrap{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.topnav ul{
		display: flex;
		align-items: center;
		justify-content: center;		
	}
	.topnav ul li{ position: relative; }

	.topnav ul li a{
		display: block;
		text-align: center;
		color: #444444;
		padding: 1rem 0.5rem;
		box-sizing: border-box;
		font-size: 1.25rem;
		position: relative;
		transition: all .3s;
	}
	.topnav > ul > li > a:before{
		position: absolute;
		content: '';
		width: 0;
		height: 5px;
		background-color: #d52d82;
    	top: 90%;
		transition: all .3s;
		left: 0;
	}
	/*.topnav > ul > li > a:after{
		position: absolute;
		content: '';
		width: 20px;
		height: 15px;
		background: #d52d82;
		border-radius: 0 0 15px 15px;
		top: calc(100% - 1px);
		left: 50%;
		transform: scale(0) translate(-50%, 0);
		z-index: 9999;
		transition: all .3s;
	}*/
	.topnav ul li:hover > a{ background-color: rgba(0,0,0,0.2); }
	.topnav ul li:hover > a:before{
		width: 100%;
	}
	/*.topnav ul li:hover > a:after{
		transform: scale(1) translate(-50%, 0);
	}*/
	

	.topnav ul li > .subnav{
		position: absolute;
		z-index: 999;
		top: 100%;
		left: 50%;
    	transform: translate(-50%, 0);
		background-color: #EEE;
		width: 150%;
		text-align: center;
		display: none;
	}
	.topnav ul li > .subnav li{
		display: block;
	}
	.topnav ul li > .subnav li a{ color: #333; }

	.topnav ul li > .subnav li:hover > a{ background-color: rgba(0,0,0,0.1); }

	.topnav ul li:hover > .subnav{ display: block; }

	.topnav ul li > .subnav li > .thirdnav{
		position: absolute;
		top: 0;
		left: 100%;
		background-color: #DDD;
		min-width: 125%;
		display: none;
	}
	.topnav ul li > .subnav li > .thirdnav li{ display: block; }

	.topnav ul li > .subnav li > .thirdnav li a{ white-space: nowrap; }

	.topnav ul li > .subnav li:hover > .thirdnav{ display: block; }
}
@media (max-width: 1029px)
{

	header{
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.topnav_btn{
		cursor: pointer;
		position: absolute;
		top: 10px;
		left: -40px;
		z-index: 10000;
		width: 30px;
		height: 25px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.topnav_btn .line_btn{
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 5px;
		transition: all .3s;
	}
	.topnav_btn .line_btn_top{
		top: 0;
		background-color: #ffab2f;
	}
	.topnav_btn .line_btn_center{
		top: 10px;
		background-color: #795548;
	}
	.topnav_btn .line_btn_bottom{
		top: 20px;
		background-color: #ffab2f;
	}
	.topnav_close .line_btn_top{
		transform: rotate(25deg);
		top: 20px;
		background-color: #ffab2f;
	}
	.topnav_close .line_btn_center{
		display: none;
	}
	.topnav_close .line_btn_bottom{
		transform: rotate( -25deg);
		top: 20px;
		background-color: #ffab2f;
	}

	.topnav{
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -70%;
		width: 70%;
		padding-top: 100px;
		box-sizing: border-box;
		height: 100%;
	}
	.topnav ul{
		width: 90%;
		max-width: 500px;
		margin: 0.25rem auto;
		height: 95%;
		overflow: auto;
	}
	.topnav ul li a{
		display: block;
		width: 100%;
		text-align: center;
		color: #FFF;
		border-bottom: 1px solid rgba(255,255,255,0.3);
		font-size: 1.25rem;
		font-weight: bold;
		padding: 1rem;
		box-sizing: border-box;
	}
	.topnav ul li:last-child > a{ border-bottom: none; }

	.topnav ul li .subnav{
		width: 90%;
		background-color: rgba(0,0,0,0.2);
	}
	.topnav ul li .subnav li .thirdnav{
		width: 95%;
		background-color: rgba(0,0,0,0.5);
	}
	.topnav ul li .subnav li .thirdnav li > a{ color: #FFF; }

	.header_2 .topnav ul li a{ color: #fff; font-size: 1.25rem;}

}
/* 表尾 under */
	footer{ 
		width: 100%; 
		position: relative;
		background-color: #ffffff;
		border-top: 1px solid #c0c0c0;
		box-sizing: border-box;

	}
	.under_main{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		color: #3b3b3b;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
    	justify-content: center;
		padding: 20px 0;
		box-sizing: border-box;
		position: relative;
		transition: all .5s;
		overflow: hidden;
	}
	.underlogo{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: relative;
		margin: 0 auto;
		width: 200px;
		transition: all .3s;
		text-align: center;	
	}
	.underlogo > span{
		display: inline-block;
		color: #000;
		font-size: 1.5rem;
	}
	/*.underlogo > img{
		vertical-align: top;
		width: 100%;
		transition: all .3s;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: optimize-contrast;
		-ms-interpolation-mode: nearest-neighbor;
	}*/
	.underwrap{
		position: relative;
		z-index: 1;
		/*margin: 10px;*/
	}
	.underwrap > h3{
		margin: 0.25rem;
		font-size: 1.5rem;
	}
	.underwrap_p{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
	}
	.underwrap_p > span{ margin: 0.25rem;}

	.fectechs{
		width: 100%;
		font-size: 0.7rem;
		color: #536f81;
		text-align: right;
		position: absolute;
		z-index: 1;
		bottom: 5px;
		padding: 0 10px;
    	box-sizing: border-box;
	}
	.underlogin{
		max-width: 160px;
		margin: 0 auto;
		display: block;
		background-color: #fff;
		border-radius: 5px;
		letter-spacing: 5px;
		padding: 5px 0 5px 5px;
		box-sizing: border-box;
		color: #ffffff;
		text-align: center;
		background-color: #F44336;
		cursor: pointer;
		transition: all .5s;
	}
	.underlogin:hover{
		background-color: #03a9f4;
	}
@media all and (max-width: 980px){
	.under_main .underwrap:first-child{
		width: 100%;
	}
}
@media all and (max-width: 680px){
	.under_main .underwrap{
		width: 100%;
	}
	.underwrap_p{ justify-content: center; }
}