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

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@500&display=swap');

/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/becky/css/reset.css');
header{
	position: fixed;
    z-index: 999;
	box-shadow: 0 0 5px rgb(0 0 0 / 10%);
	width: 100%;
	display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255 255 255 / 90%);
}
.toplogo{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: all .5s;
	margin-left: 10px;
}
.toplogo > span{
	margin-left: 5px;
	display: block;
	font-size: 1.5rem;
	color: #67bebb;
	letter-spacing: 2.5px;
	padding-left: 2.5px;
	box-sizing: border-box;
	font-weight: bolder;

}
.toplogo > img{
	vertical-align: top;
	width: 40px;
	transition: all .5s;
	background-color: #67bebb;
	border-radius: 50%;
	padding: 5px;
	box-sizing: border-box;

}
.gotop{
	cursor: pointer;
	position: fixed;
	bottom: 0;
	right: 0;
	font-size: 1.5rem;
	background-color: rgba(0,0,0,0.8);
	opacity: .4;
	border: none;
	margin: 0;
	border-radius: 0;
	padding: 5px;
	box-sizing: border-box;
	color: #fff;
	display: none;
}
/* 社群連結 */
	.toplink{
	
	}
	.toplink ul{
		display: flex;
		flex-wrap: wrap;
	    justify-content: center;
	    align-items: center;
	    flex-wrap: wrap;
	}
	.toplink ul li{ display: block; }
	.toplink ul li a{
		display: inline-block;
		margin: 5px;
		padding: 5px;
		border: 2px solid #444;
		box-sizing: border-box;
		color: #444;
		cursor: pointer;
		font-size: 1.75rem;
		transition: all .5s;
		background-color: rgba(255,255,255,.5);
		border-radius: 50%;
	}
	.toplink ul li .toplink_fb:hover{
		border: 2px solid #3B559F;
		color: #fff;
		background-color: #3B559F;
	}
	.toplink ul li .toplink_line:hover{
		border: 2px solid #4ECD00;
		color: #fff;
		background-color: #4ECD00;
	}
	.toplink ul li .toplink_ig:hover{
		border: 2px solid #E3297D;
		color: #fff;
		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:hover{
		border: 2px solid #4ECD00;
		color: #fff;
		background-color: #4ECD00;
	}
@media all and (min-width: 1100px)
{
	.topwrap{
	    box-sizing: border-box;
	    display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 導覽列 */
		.topnav{
			margin-right: 50px;
		}
		.topnav ul{
			display: flex;
		}

		.topnav ul li{
			position: relative;
			box-sizing: border-box;
			display: block;
			text-align: center;
		}
		.topnav ul li a{
			color: #444;
			font-weight: bold;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			position: relative;
			margin: 0.5rem 0.75rem;
			font-size: 1.15rem;
			padding: 15px 0;
			transition: all .3s ease;
		}
		.topnav ul > li > a{
			color: #67bebb;
		}

		.topnav > ul > li > a .topnav_icondown{
			display: inline-block;
			margin-left: 5px;
			color: #444;
			font-size: 14px;
		}
		.topnav > ul > li:hover > a{
			color: #444;
		}
		.topnav ul li > .subnav{
			display: block;
			position: absolute;
		    background-color: #fff;
		    box-shadow: 0 0 5px rgb(0 0 0 / 10%);
		    opacity: 0;
		    top: 100%;
		    left: 0;
		    width: 150%;
		}
		.topnav ul li:hover .subnav{ 
			/*display: block;*/
			opacity: 1;
		}
		.topnav ul li > .subnav li a{
			margin: 0;
		    display: block;
		    text-align: center;
		    padding: 10px;
		    box-sizing: border-box;
		    transition: all .3s ease;
		    color: #444;
		}
		.topnav ul li > .subnav li:hover a{
			background-color: #67bebb;
			color: #fff;
		}

		.toplogo{
			margin-left: 50px;
		}
}
@media all and (max-width: 1099px){
	header{ width: 100%; height: auto; max-width: 100%; background-color: #fff;}
	.topwrap{
		
	}
	.topnav_btn{
		width: 40px;
        height: 19px;
        position: absolute;
        top: 15px;
        right: 35px;
        z-index: 99;
        cursor: pointer;
        text-align: justify;
	}
	.topnav_btn .line_btn{
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 3px;
		transition: all .3s;
		background-color: #67bebb;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.topnav_btn .line_btn_top{
		top: 0;
	}
	.topnav_btn .line_btn_center{
		top: 8px;
	}
	.topnav_btn .line_btn_bottom{
		top: 16px;
		width: 75%;
		right: 0;
		left: auto;
		transform: translate(0, 0);
	}

	.topnav_cross_btn{
		width: 40px;
        height: 15px;
        position: absolute;
        top: 20px;
        right: 35px;
        z-index: 99;
        cursor: pointer;
        text-align: justify;
	}
	.topnav_cross_btn .line_cross_btn{
		position: absolute;
		display: inline-block;
		width: 100%;
		height: 3px;
		transition: all .3s;
		background-color: #67bebb;
		left: 0;
		top: 5px;
	}
	.topnav_cross_btn .line_cross_btn_top{
		transform: rotate(15deg);
	}
	.topnav_cross_btn .line_cross_btn_bottom{
		transform: rotate(-15deg);
	}

	/*.topnav_close{
		left: auto;
		right: 140px;
	}
	.topnav_close .line_btn_top{
		top: 10px;
    	width: 60%;
		transform: translate(-50%, 0) rotate(45deg);
	}
	.topnav_close .line_btn_center{
		top: 17px;
	    width: 80%;
	    left: calc(50% - 10px);
	}
	.topnav_close .line_btn_bottom{
		top: 25px;
    	width: 60%;
		transform: translate(-50%, 0) rotate(135deg);
	}*/

	.topnavMenuBg{
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgb(0 0 0 / 30%);
		left: -100%;
		top: 0;
		z-index: 100;
	}

	.topnav{
		position: fixed;
		z-index: 100;
		top: 0;
		left: -300px;
		width: 80%;
        max-width: 300px;
		padding-top: 50px;
		height: 100%;
		box-sizing: border-box;
		box-shadow: 0 0 5px rgb(0 0 0 / 10%);
		background-color: #fff;
		border-radius: 0 50px 0 0;
	}
	.topnav ul{
		width: 90%;
		margin: 0.25rem auto;
		height: 90%;
    	overflow: auto;
	}
	.topnav ul li{ width: 100%; }
	.topnav ul li a{
		display: block;
		width: 100%;
		text-align: left;
		color: #000;
		font-size: 1rem;
		font-weight: bold;
		padding: 1rem;
		box-sizing: border-box;
	}
	.topnav > ul > li > a .topnav_icondown{
		display: inline-block;
		margin-left: 5px;
		color: #444;
		font-size: 14px;
	}

	.topnav ul li .subnav{
		width: 90%;
		background-color: rgb(136 136 136 / 20%);
		border-radius: 0 30px 0 0;
	}

	.toplink{
		position: fixed;
		right: 0;
		bottom: 5px;
		z-index: 9999;
	}
	.toplink ul{
		display: block;
	}
	.toplink ul li a{
		
	}

	/*.toplink ul li .toplink_fb{
		color: #3B559F;
	}
	.toplink ul li .toplink_line{
		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% );
	    -webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
	}
	.toplink ul li .toplink_phone{
		color: #4ECD00;
	}*/

	.toplogo{
		margin: 5px 5px 5px 35px;
	}


}

/* 表尾 under */
	footer{
		width: 100%;
		position: relative;
		background-color: #ABDADA;
	}
	.under_wrap{
		width: 95%;
		max-width: 1200px;
		margin: 0 auto;
	}
	.under_main{
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;
		transition: all .5s;
		padding: 40px 0;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.underlogo{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 20px;
		transition: all .5s;
	}
	.underlogo > span{
		margin-left: 5px;
		display: block;
		font-size: 1.5rem;
		color: #67bebb;
		letter-spacing: 2.5px;
		padding-left: 2.5px;
		box-sizing: border-box;
		font-weight: bolder;

	}
	.underlogo > img{
		vertical-align: top;
		width: 40px;
		transition: all .5s;
		background-color: #67bebb;
		border-radius: 50%;
		padding: 5px;
		box-sizing: border-box;

	}
	.underbox{
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.underbox > div{
		width: 98%;

	}
	.underbox > div span{
		display: block;
		margin-bottom: 10px;
		color: #487a78;
		font-size: 14px;
	}
	.underbox > div span i{
		font-style: normal;
		display: inline-block;
		margin-right: 10px;
		font-size: 1.25rem;
	}
	.underbox > h3{
		width: 100%;
		display: block;
		color: #fff;
		font-size: 1.15rem;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 5px;
		border-bottom: 1px solid #fff;
	}
	.underbox > div a{
		display: block;
		margin-bottom: 5px;
		padding-bottom: 5px;
		box-sizing: border-box;
		position: relative;
		transition: all .4s;
		color: #487a78;
		transform: scale(1.0);
		font-size: 14px;
	}

	.underbox > div a:hover{
		letter-spacing: 3px;
		transform: scale(1.1);
		color: #fff;
	}

	.underlink{
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.underlink > h3{
		width: 100%;
		display: block;
		color: #fff;
		font-size: 1.15rem;
		margin-bottom: 20px;
		box-sizing: border-box;
		padding-top: 10px;
		padding-bottom: 5px;
		border-bottom: 1px solid #fff;
	}

	
	.underlink ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.underlink ul li{
		display: inline-block;
		margin-right: 15px;
	}
	.underlink ul li:first-child,
	.underlink ul li:nth-child(2){
		display: block;
		margin-right: 0;
		width: 100%;
		margin-bottom: 5px;
		padding-bottom: 5px;
	}
	.underlink ul li:last-child{ margin-right: 0; }
	.underlink ul li a{
		display: flex;
	    justify-content: flex-start;
	    align-items: center;
		box-sizing: border-box;
		font-size: 1.25rem;
		transition: all .4s;
		color: #487a78;
		transform: scale(1.0);
	}
	.underlink ul li:last-child a{
		border-right: none;
	}
	.underlink ul li:hover a{
		color: #ffffff;
		transform: scale(1.1);
	}
	.underlink ul li a > span{
		display: inline-block;
		margin-right: 5px;
	}
	.underlink ul li a > p{
		font-size: 14px;
	}
	.fectechs{
		font-size: 0.7rem;
		text-align: right;
		padding: 10px 5px;
		box-sizing: border-box;
		color: #ffffff;
		background-color: #487a78;
	}

@media all and (max-width: 1089px){
	.under_wrap{ text-align: center; }
	.under_main{ flex-wrap: wrap; justify-content: center;}
	.underbox:first-child{
		width: 100%;
		margin-right: 0;
		justify-content: center;
		margin-bottom: 20px;
	}
	.underlink ul{
		justify-content: center;
	}

	.underlink ul li a{
		justify-content: center;
	}

	
}
@media all and (max-width: 560px){
	.underbox{ width: 100%;}
	.underlink{ width: 100%;}
}