@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');
.showpost_content table{
	width: 100%;
	max-width: 1100px;
}
/* 表頭 top */
	header{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
		transition: all .3s;
		box-shadow: 0 0 4px rgb(0 0 0 / 30%);
		background-color: #fff;
	}
	.toplogo{
		display: inline-block;
		margin: 5px;
		position: relative;
		max-width: 100px;
		transition: all .3s;
	}
	.toplogo > 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;
	}

	/* 下滑時header_2 */
	.header_2 .toplogo{ max-width: 80px; }
	.header_2 .topnav ul li a{ font-size: 1.05rem;}
	.header_2 .topshopping{ top: 10px; }

/* 社群小圖示 */
	.toplink ul{
		position: fixed;
		z-index: 999;
		bottom: 4rem;
		right: 0;
	}
	.toplink ul li a{
		display: block;
		padding: 0.25rem;
		box-sizing: border-box;
		font-size: 1.5rem;
		margin: 0.25rem;
		border-radius: 50%;
		transition: all .3s;
		transform: scale(1);
		background-color: transparent;
		border: 2px solid transparent;
	}
	.toplink ul li .toplink_fb{
		color: #3B559F;
	}
	.toplink ul li .toplink_line{
		color: #4ECD00;
	}
	.toplink ul li .toplink_mail{
		color: #f44336;
	}
	.toplink ul li .toplink_phone{
		color: #ff9800;
	}
	.toplink ul li:hover a{
		transform: scale(1.25);
	}
	.toplink ul li .toplink_totop{
		position: fixed;
		z-index: 99;
		bottom: 0;
		right: 0;
		cursor: pointer;
		background-color: #494848;
		color: rgba(255,255,255,0.85);
		transition: all .5s;
		display: none;
		padding: 0.5rem;
    	font-size: 1.5rem;
    	box-sizing: border-box;
	}
	.toplink ul li .toplink_totop:hover{ background-color: #6B6B6B; }
@media (min-width: 950px)
{
	.topwrap{
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.topnav ul{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20px;	
	}
	.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;
		font-weight: bold;
		transition: all .3s;
	}
	.topnav > ul > li > a:before{
		position: absolute;
		content: '';
		width: 0;
		height: 5px;
		background-color: #e79608;
    	top: 90%;
		transition: all .3s;
		left: 0;
	}

	.topnav ul li:hover > a{ background-color: rgba(0,0,0,0.2); }
	.topnav ul li:hover > a:before{
		width: 100%;
	}
	

	.topnav ul li > .subnav{
		position: absolute;
		z-index: 999;
		top: 100%;
		left: 50%;
    	transform: translate(-50%, 0);
		background-color: #fff;
		width: 155%;
		text-align: center;
		display: none;
		box-shadow: 0 0 4px rgb(0 0 0 / 30%)
	}
	.topnav > ul > li > .subnav:after{
		position: absolute;
		content: '';
		top: calc(0% - 1px);
		left: 50%;
		transform: scale(0) translate(-50%, 0);
		z-index: 9999;
		transition: all .3s;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 15px 15px 0 15px;
		border-color: #e79608 transparent transparent transparent;
	}
	.topnav ul li > .subnav li{
		display: block;
	}
	.topnav ul li > .subnav li a{
		color: #333;
		font-size: 1rem;
		text-align: left;
	}

	.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:hover > .subnav:after{
		transform: scale(1) translate(-50%, 0);
	}

	.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; }
	.toplogo{ max-width: 100px; }
}
@media (max-width: 949px)
{

	header{
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}
	.topnav_btn{
		cursor: pointer;
		position: absolute;
		top: 20px;
		left: -70px;
		z-index: 10000;
		width: 50px;
		height: 40px;
		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: 10px;
		background-color: #1e711e;
	}
	.topnav_btn .line_btn_center{
		top: 20px;
		background-color: #479047;
	}
	.topnav_btn .line_btn_bottom{
		top: 30px;
		background-color: #77af77;
	}
	.topnav_close .line_btn_top{
		transform: rotate(25deg);
		top: 20px;
	}
	.topnav_close .line_btn_center{
		display: none;
	}
	.topnav_close .line_btn_bottom{
		transform: rotate( -25deg);
		top: 20px;
	}

	.topnav{
		background-color: rgb(255 255 255 / 95%);
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -70%;
		width: 70%;
		padding-top: 100px;
		box-sizing: border-box;
		height: 100%;
		box-shadow: 0 0 4px rgb(0 0 0 / 28%);
	}
	.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: #000;
		border-bottom: 1px solid rgba(0,0,0,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.1);
	}
	.topnav ul li .subnav li .thirdnav{
		width: 95%;
		background-color: rgba(0,0,0,0.1);
	}
	.topnav ul li .subnav li .thirdnav li > a{ color: #FFF; }

	.toplogo{ width: 100px; }

	.header_2 .toplogo{ width: 80px }

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

	.topshopping{ top: 100%; }

	.header_2 .topshopping{ top: 100%; }
}
/* 表尾 */
	footer{
		position: relative;
		background-color: #c1c1c1;
		box-shadow: 0 0 4px rgb(0 0 0 / 30%);
		box-sizing: border-box;
	}
	/* 上方連結 */
		.undernav{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.undernav ul li{
			display: inline-block;
			margin: 5px;
		}
		.undernav ul li a{
			display: block;
			color: #fff;
			padding: 5px 10px;
			background-color: #f87729;
			box-sizing: border-box;
			border-radius: 5px;
			transition: all .3s;
		}
		.undernav ul li:last-child a{
			background-color: #009688;
		}
		.undernav ul li a:hover{
			background-color: #77af77;
		}

	
	.underwrap{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
		padding: 1em 0;
		box-sizing: border-box;
	}
	.underwrap_box, .underwrap_box2{
		margin-right: 1em;
		padding-right: 1em;
		box-sizing: border-box;
	}
	.underwrap_title{
		border-bottom: 1px solid lightgray;
		box-sizing: border-box;
		margin-bottom: 0.5em;
		font-size: 1.1em;
		font-weight: bold;
	}
	.underwrap_boxDown{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: end;
	}
	.underwrap_p{
		padding: 0.25em 0;
		line-height: 1.5em;
	}
	.underwrap_p span{ display: inline-block; }
	.underwrap_p span img{
		height: 25px;
		vertical-align: top;
	}
	.underwrap_p > a{
		color: #f60;
	}
	.underwrap_p > a:hover{
		text-decoration: underline;
	}
	.underwrap_span{
		display: inline-block;
		color: #000;
		margin-right: 1em;
	}
	.under_ul_title{
		width: 100%;
		border-bottom: 1px solid lightgray;
		padding: 0.25em 0;
		line-height: 1.5em;
		font-size: 1.1em;
		font-weight: bold;
		padding-left: 1em;
		box-sizing: border-box;
		margin-bottom: 0.5em;
	}
	.under_ul{
		width: 200px;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	}
	.under_ul li{
		width: 45%;
		margin: 0.5em 2.5%;
	}
	.under_ul li a{
		display: block;
		width: 100%;
		padding: 0.25em 0.5em;
		box-sizing: border-box;
		color: #FFFFFF;
		border: 1px solid #FFFFFF;
		text-align: center;

		transition: all .5s;
	}
	.under_ul li:hover a{
		background-color: #FFFFFF;
		color: #0068b7;
	}
	.undernav ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 1em 0;
		box-sizing: border-box;
	}

	.undernav ul li a span{ margin-right: 0.5em; }


	.underwrap_ecpay{
		width: 195px;
		display: block;
		background-color: #fff;
		padding: 3px;
		box-sizing: border-box;
		border-radius: 10px;
		text-align: center;
	}
	.underwrap_ecpay > img{
		width: 60px;
		vertical-align: top;
	} 
	/* 綠視界 */
	.fectechs{
		font-size: 0.7em;
		color: #999;
		padding: 0.25em;
		box-sizing: border-box;
		text-align: right;
	}
@media screen and (max-width: 980px)
{
	.undernav ul li{
		width: 45%;
		margin: 0.5em 2.5%;
	}
	/*.undernav ul li:last-child{
		width: 100%;
	}*/
	.undernav ul li a{
		display: block;
		width: 100%;
		text-align: center;
		padding: 0.5em 1em;
		box-sizing: border-box;
		background-color: #f87729;
		color: #fff;
		border-radius: 15px;
	}
	.underwrap_box, .underwrap_box2{
		width: 95%;
		max-width: 400px;
		margin-right: 0;
    	padding-right: 0;
	}
	.under_ul{
		padding: 0.5em 0 1.5em;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: center;
	}
	.under_ul_title{
		width: 80%;
		border-bottom: 1px solid lightgray;
		padding-bottom: 0.5em;
		box-sizing: border-box;
		margin-bottom: 0.5em;
		font-size: 1.1em;
		font-weight: bold;
		text-align: center;
	}
	.under_ul li{
		width: 40%;
		margin: 0.5em;
	}
	.underwrap_ecpay{
		margin-top: 10px;
	}

}