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

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

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

/* 以下是 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;
	}

	.topwrap{
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: rgba(0,0,0,.2);
		border-bottom: 1px solid rgba(255,255,255,.5);
		box-sizing: border-box;
	}

	/* MENU & LOGO */
		.topwrap_left{
			width: 30%;
			max-width: 400px;
			display: inline-flex;
			justify-content: flex-start;
			align-items: stretch;
		}

	/* MENU */
		.topnav_btn{
			max-width: 180px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: calc(50% - 1px);
			border-right: 1px solid rgba(255,255,255,.5);
			font-size: 1.75rem;
			color: #fff;
			box-sizing: border-box;
			font-family: 'Abril Fatface', cursive;
			cursor: pointer;
			transition: all .5s;
		}
		.topnav_btn:hover{
			background-color: #000;
		}

		.topnav_btn_txt{
			display: inline-block;
			padding-left: 5px;
			letter-spacing: 5px;
			box-sizing: border-box;
			font-family: 'Abril Fatface', cursive;
		}
		.topnav_btn:hover .topnav_btn_txt{
			position: relative;
			top: 5px;
		}
	/* LOGO */
		.toplogo{
			display: inline-flex;
			justify-content: flex-start;
			align-items: center;
			margin: 5px 0 5px 10px;
			position: relative;
			transition: all .3s;

		}
		.toplogo > img{
			vertical-align: top;
			width: 60px;
			transition: all .3s;
		}
		.toplogo_txt{
			display: inline-block;
			font-family: 'Courgette', cursive;
			font-size: 2rem;
			margin-top: 10px;
			margin-left: 10px;
			color: #fff;
		}
	/* 導覽列 */
		.topnav{
			background-color: rgba(0,0,0,0.5);
			position: fixed;
			z-index: 9999;
			top: 70px;
			left: -30%;
			width: 30%;
			box-sizing: border-box;
			height: calc(100% - 70px);
			transition: all .5s;

		}
		.topnav > ul{
			width: 100%;
			height: 100%;
			overflow: auto;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
		}
		.topnav ul li{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.topnav ul li a{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
			text-align: center;
			color: #FFF;
			font-size: 1.25rem;
			font-weight: bold;
			padding: 1rem;
			box-sizing: border-box;
			transition: all .5s;
			cursor: pointer;
			border-bottom: 1px solid rgba(255,255,255,.5);
		}
		.topnav > ul > li:hover > a{
			background-color: rgba(0,0,0,.8);
		}

		.topnav ul li .subnav{
			position: fixed;
			left: 30%;
			width: 20%;
			height: calc(100% - 70px);
			top: -100%;
			background-color: rgba(0,0,0,.3);
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: stretch;
			transition: all .5s;
			overflow: auto;
		}
		.topnav ul li .subnav li:hover a{
			background-color: rgba(0,0,0,.8);
		}
		.topnav ul li .subnav .back{ display: none; }
	/* 社群小圖示 */
		.toplink ul{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.toplink ul li a{
			display: block;
			padding: 0.5rem;
			box-sizing: border-box;
			font-size: 1.25rem;
			margin: 0.75rem 0.5rem;
			border-radius: 50%;
			transition: all .3s;
			transform: scale(1);
			color: #fff;
			border: 1px solid #fff;
		}
		.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;
		}
		.toplink ul li .toplink_totop:hover{ background-color: #6B6B6B; }
/* 表尾 under */

	footer{ width: 100%; position: relative;}
	.under_topbg{
		width: 100%;
	}
	.under_topbg > img{
		width: 100%;
		vertical-align: top;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: optimize-contrast;
		-ms-interpolation-mode: nearest-neighbor;
	}

	.under_main{
		width: 100%;
		color: #444;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-around;
		padding: 0 0 50px;
		box-sizing: border-box;
		position: relative;
		transition: all .5s;
		overflow: hidden;
		background-color: #efefef;
	}
	.underwrap{
		position: relative;
		z-index: 1;
		margin: 10px;
	}
	.underwrap > h3{
		margin: 0.25rem;
		font-size: 1.25rem;
		border-left: 5px solid;
		padding-left: 5px;
		box-sizing: border-box;
	}
	.underwrap_p{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		font-size: 1rem;
	}

	.underwrap_p > span{ display: inline-block; margin: 0.25rem;}

	.under_left .underwrap_p{
		background-color: #fff;
		border-radius: 5px;
		font-size: 1rem;
		margin-top: 5px;
	}
	/* LOGO */
		.underlogo{
			display: inline-flex;
			justify-content: flex-start;
			align-items: flex-end;
			position: relative;
			transition: all .3s;
		}
		.underlogo > img{
			vertical-align: top;
			width: 80px;
			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;
		}
		.underlogo_txt{
			display: inline-block;
			font-family: 'Courgette', cursive;
			font-size: 2rem;
			margin-top: 10px;
			margin-left: 10px;
			color: #fff;
			text-shadow: #acacac 0.05em 0.05em 0.05em;
		}
	/* QR */
		.underQR > a{
			display: inline-block;
			cursor: pointer;
			margin: 5px;
		}
		.underQR > a img{
			vertical-align: top;
			box-shadow: 0 0 5px rgb(0 0 0 / 40%);

		}
		.underQR > a:hover img{
			position: relative;
			bottom: 5px;
		}

	.fectechs{
		width: 100%;
		font-size: 0.7rem;
		color: rgba(0,0,0,.5);
		text-align: right;
		position: absolute;
		z-index: 1;
		bottom: 5px;
	}

	/* 向上 */
		.under_gotop{
			position: absolute;
			width: 100px;
			height: 100px;
			top: -40px;
			background-color: #ab787f;
			border-radius: 50%;
			left: 50%;
			transform: translate(-50%, 0);
			z-index: 99;
			cursor: pointer;
		}
		.under_gotop_arrow{
			width: 5px;
			height: 25px;
			background-color: rgb(220 192 183);
			position: absolute;
			top: 18px;
			left: calc(50% - 10px);
			transform: translate(-50%, 0)rotate(45deg);
		}
		.under_gotop_line{
			display: inline-block;
			width: 5px;
			height: 40px;
			background-color: #dcc0b7;
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0);
			top: 20px;
		}


@media all and (max-width: 979px){
	.topwrap_left{
		width: 100%;
		max-width: 100%;
	}
	.topnav{ 
		width: 50%;
		max-width: 180px;
		left: -50%;
	}

	.topnav ul li .subnav{
		width: 100%;
		left: -100%;
		height: 100%;
		top: 0;
		position: absolute;
	}
	.topnav ul li .subnav .back{
		position: absolute;
		font-size: 2.5rem;
		top: 0px;
		left: 10px;
		color: rgb(255, 255, 255);
		cursor: pointer;
		display: block;
	}

	.toplink ul{
		position: fixed;
		z-index: 999;
		bottom: 4rem;
		right: 0;
		display: block;
	}
	.toplink ul li a{ border: none; }
	.toplink ul li .toplink_fb{
		background-color: #3B559F;
	}
	.toplink ul li .toplink_line{
		background-color: #4ECD00;
	}
	.toplink ul li .toplink_ig{
		background: #E3297D;
	    background: -webkit-linear-gradient( -120deg, #7D36AE 0%, #D82F81 30%, #F80A00 70%, #F7D903 100% );
	    background: -o-linear-gradient( -120deg, #7D36AE 0%, #D82F81 30%, #F80A00 70%, #F7D903 100% );
	    background: linear-gradient( -120deg, #7D36AE 0%, #D82F81 30%, #F80A00 70%, #F7D903 100% );
	}
	.toplink ul li .toplink_phone{
		background-color: #4CDA64;
	}
}