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

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/Peggy/fonticons/css/style.css');
@import url('https://fonts.googleapis.com/icon?family=Playball&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@1,500&display=swap');
/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/peggy/css/reset.css');

header ul, header ol,
footer ul, footer ol{
	list-style: none;
}

/* 表頭 top */
	.top_bgheight{
		visibility: hidden;
		width: 100%;
		/*height: 100vh;*/
	}
	header{
		width: 100%;
		margin: 0 auto;
		background-color: #FFF;
	}
	.headerfixed{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 50%;
		transform: translate(-50%,0);
	}
	.topwrap{
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #FFF;
		transition: all .5s;
	}
	.topwrapBox{
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.toplogo{
		display: inline-block;
		min-width: 250px;
		margin: 10px;
		transition: all .5s;
	}
	.toplogo > img{
		vertical-align: top;
		width: 100%;
		transition: all .5s;
		image-rendering: -moz-crisp-edges;
		image-rendering: -o-crisp-edges;
		image-rendering: -webkit-optimize-contrast;
		image-rendering: optimize-contrast;
		-ms-interpolation-mode: nearest-neighbor;
	}
	/*邁向50週年*/
		.toplogo_txt{
			font-family: DFKai-sb;
			font-weight: bold;
			color: #fff;
			/*background: linear-gradient(to right, #c87d0d 0%,#f4d501 51%,#c87d0d 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;*/
			font-size: 1.65rem;
			text-align: center;
			margin: -5px 0;
			transition: all .5s;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.toplogo_txt > img{
			width: 40px;
			vertical-align: top;
			margin-right: 5px;
			transform: rotate(-5deg);
		}
		.toplogo_txt span{
			display: inline-block;
			font-size: 2rem;
			margin: 0 2px;
			/*-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;*/
			transition: all .5s;
			font-family: DFKai-sb;
		}

	/* 下滑設定 */
		.topwrapfixed{
			position: fixed;
			z-index: 9999;
			top: 0;
			left: 0;
			box-shadow: 0 0 5px #d8d8d8;
		}
		.topwrapfixed .toplogo{
			max-width: 120px;
		}
		.topwrapfixed .topnav ul li a{
			font-size: 1.15rem;
		}
		.topwrapfixed .toplink ul li a{
			font-size: 1.75rem;
		}
		.topwrapfixed .toplogo_txt{
			font-size: 1.25rem;
		}
		.topwrapfixed .toplogo_txt span{
			font-size: 1.5rem;
		}
	/* 分館 */
		.topnav_outtour{
			width: 100%;
			margin: 0 auto;
			background-color: #FFF;
		}
		.outtour_ul{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
		}
		.outtour_ul li{ width: 20%; }

		.outtour_ul_txt{
			display: block;
			text-align: center;
			width: 100%;
			padding: 0.5rem 0.1rem;
			box-sizing: border-box;
			font-size: 1.25rem;
			color: #FFF;	
			transition: all .5s;
		}
		.outtour_ul li:first-child > a .outtour_ul_txt{ background-color: #aeb2de; }
		.outtour_ul li:nth-child(2) > a .outtour_ul_txt{ background-color: #5ab6ff; }
		.outtour_ul li:nth-child(3) > a .outtour_ul_txt{ background-color: #f7ca45; }
		.outtour_ul li:nth-child(4) > a .outtour_ul_txt{ background-color: #90c553; }
		.outtour_ul li:nth-child(5) > a .outtour_ul_txt{ background-color: #ff81ac; }

		.outtour_ul_img{
			display: block;
			width: 100%;
			height: 120px;
			overflow: hidden;
			position: relative;
		}
		.outtour_ul_img > img{
			vertical-align: top;
			width: 100%;
			opacity: 0.8;
			position: absolute;
		    left: 50%;
		    top: 50%;
		    transform: translate(-50%, -50%) scale(1.15);
			transition: all 1s;
		}
		.outtour_ul li:hover > a .outtour_ul_img img{
			transform: translate(-50%, -50%) scale(1);
			opacity: 1;
		}
	/* 社群小圖示 */
		.toplink ul{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.toplink ul li a{
			cursor: pointer;
			display: block;
			text-align: center;
			font-size: 2rem;
			padding: 0.35rem;
			box-sizing: border-box;
			transition: all .5s;
		}
		.toplink ul li .icon-facebook,
		.toplink ul li .icon-line,
		.toplink ul li .icon-users,
		.toplink ul li .icon-instagram3,
		.toplink ul li .material-icons,
		.toplink ul li .icon-media-mail10,
		.toplink ul li .icon-phone{
			background-color: rgba(0,0,0,0);
			color: #727171;
		}
		.toplink ul li .icon-facebook:hover{ color: #3B559F; }
		.toplink ul li .icon-line:hover{ color: #4ECD00; }
		.toplink ul li .icon-users:hover{ color: #FF0000; }
		.toplink ul li .icon-instagram3:hover{
			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 .icon-media-mail10:hover{ color: #f44336; }
		.toplink ul li .icon-phone:hover{ color: #4CDA64; }
		.toplink ul li .material-icons:hover{ color: #666666; }


		.toplink_gototop .toplink_totop{
			position: fixed;
			bottom: 20px;
			right: 5px;
			border: 2px solid #806B41;
			border-radius: 50%;
			color: #806B41;
			z-index: 9999;
			font-size: 1.75rem;
			padding: 0.35rem;
			box-sizing: border-box;
			cursor: pointer;
			background-color: #fff;
		}
@media all and (min-width: 1090px)
{
	.topnav{ width: 100%; }

	.topnav ul{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.topnav ul li{ position: relative; }

	.topnav ul li a{
		display: block;
		text-align: center;
		padding: 1rem 0.15rem;
		box-sizing: border-box;
		font-size: 1.25rem;
		color: #000;
	}
	.topnav > ul > li:first-child:hover > a{ color: #aeb2de; }
	.topnav > ul > li:nth-child(2):hover > a{ color: #5ab6ff; }
	.topnav > ul > li:nth-child(3):hover > a{ color: #f7ca45; }
	.topnav > ul > li:nth-child(4):hover > a{ color: #90c553; }
	.topnav > ul > li:nth-child(5):hover > a{ color:  #ff81ac; }
	.topnav > ul > li:last-child:hover > a{ color: #FD444B; }



	.topnav ul li > .subnav{
		position: absolute;
		z-index: 99;
		top: 100%;
		left: 50%;
		transform: translate(-50%,0);
		border-top: 1px solid #EEE;
		box-sizing: border-box;
		background-color: #FFF;
		width: 180%;
		display: none;
		box-shadow: 0 0 15px rgba(0,0,0,0.1);
	}

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

	.topnav ul li > .subnav li > .thirdnav{
		position: absolute;
		top: 0;
		left: 100%;
		background-color: #DDD;
		min-width: 125%;
		display: none;
	}
	.toplogo{ display: none; }
	.topUTF8 .toplogo{
		display: inline-block;
	}
	.topUTF8 .topwrap{ background-color: #8c1c40; }
	.topUTF8 .topnav > ul > li > a{
		color: #fff;
	}
	.topUTF8 .toplink ul li .material-icons, .topUTF8 .toplink ul li .icon-media-mail10, .topUTF8 .toplink ul li .icon-phone{
		background-color: transparent;
    	color: #fff;

	}
	.topUTF8 .topnav > ul > li:first-child:hover > a{ color: #fff; }
	.topUTF8 .topnav > ul > li:nth-child(2):hover > a{ color: #fff; }
	.topUTF8 .topnav > ul > li:nth-child(3):hover > a{ color: #fff; }
	.topUTF8 .topnav > ul > li:nth-child(4):hover > a{ color: #fff; }
	.topUTF8 .topnav > ul > li:nth-child(5):hover > a{ color: #fff; }
	.topUTF8 .topnav > ul > li:last-child:hover > a{ color: #fff; }
}
@media all and (max-width: 1089px)
{
	.topwrap{
		padding: 0;
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		right: 0;
		background-color: #8c1c40;
		box-shadow: 2px 3px 3px rgba(0,0,0,0.1);
	}
	.topnav_btn{
		width: 40px;
		height: 40px;
		position: absolute;
		top: 10px;
		left: -50px;
		z-index: 10000;
		cursor: pointer;
	}
	.topnav_btn .line_btn{
		position: absolute;
		display: inline-block;
		width: 80%;
		height: 5px;
		transition: all .3s;
		background-color: #fff;
		left: 50%;
		transform: translate(-50%, 0);
		border-radius: 5px;
	}
	.topnav_btn .line_btn_top{
		top: 7px;
		
	}
	.topnav_btn .line_btn_center{
		top: 17px;
	}
	.topnav_btn .line_btn_bottom{
		top: 27px;
	}
	.topnav_close{
		left: 20px;
	}
	.topnav_close .line_btn{
		background-color: #8c1c40;
	}
	.topnav_close .line_btn_top{
		transform: translate(-50%, 0) rotate(45deg);
	}
	.topnav_close .line_btn_center{
		display: none;
	}
	.topnav_close .line_btn_bottom{
		transform: translate(-50%, 0) rotate(45deg);
	}


	.topnav{
		background-color: rgba(255,255,255,0.7);
		position: fixed;
		z-index: 9999;
		top: 0;
		right: -60vw;
		width: 60vw;
		padding-top: 60px;
		box-sizing: border-box;
		height: 100%;
		box-shadow: 2px 3px 3px rgb(0 0 0 / 50%);
	}
	.topnav ul{
		display: block;
		widows: 95%;
		max-width: 300px;
		margin: 0 auto;
		height: 95%;
		overflow: auto;
	}
	.topnav ul li a{
		display: block;
		text-align: center;
		font-size: 1.1rem;
		font-weight: bold;
		color: #000;
		border-bottom: 1px solid #BBB;
		padding: 1rem 0.25rem;
		box-sizing: border-box;
	}
	.topnav ul li:last-child > a{ border-bottom: none; }

	.topnav ul li > .subnav{
		width: 90%;
		margin: 0.25rem auto;
		background-color: rgba(200,200,200,0.8);
		padding: 0.5rem 1rem;
		box-sizing: border-box;
		display: none;
	}
	.topnav ul li > .subnav li a{ padding: 0.5rem; }

	.topnav ul li > .subnav li .thirdnav{
		background-color: rgb(255 255 255 / 50%);
	}

	.toplogo_txt{
		font-size: 1.25rem;
	}
	.toplogo_txt span{
		font-size: 1.5rem;
	}

	/* 社群小圖示 */
	.toplink{ display: none; }
	
}

/* 表尾 under */
	footer{
		width: 100%;
		padding-top: 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
		position: relative;
	}
	footer:after{
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		clip-path: polygon(0 0, 70% 0, 80% 100%, 0% 100%);
		background-color: #f7f7f7;
		top: 0;
		z-index: -1;
		left: 0;
	}
	footer:before{
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		clip-path: polygon(85% 0, 100% 0, 100% 100%, 50% 100%);
		background-color: #ececec;
		top: 0;
		z-index: -1;
		right: 0;
	}
	/* under logo */
		.underlogo{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			margin: 0 auto;
			width: 220px;
			transition: all .3s;
			border-radius: 10px;
		}
		.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;
		}
		.underlogo > span{
			display: block;
			text-align: center;
			color: #2f318b;
			font-weight: bold;
			font-size: 1.5rem;
		}
	.under_ul{
		width: 100%;
		max-width: 300px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		list-style: none;
	}
	.under_ul li{
		width: 45%;
		display: block;
		margin: 0 2.5% 5px;
		text-align: center;
	}
	.under_ul li a{
		display: block;
		width: 100%;
		color: #ffffff;
		padding: 5px 5px 5px 7px;
		box-sizing: border-box;
		font-size: 1rem;
		letter-spacing: 2px;
		transition: all .3s;
		color: #000000;
		border-bottom: 2px dashed #adadad;
	}

	.under_ul li:hover > a{ letter-spacing: 3px; }

	.under_company{
		width: 100%;
		max-width: 250px;
		margin: 0.5rem 0 0;
		transition: all .3s;
		text-align: center;
	}
	.under_company > h1{
		width: 100%;
		color: #000;
		padding: 1rem 0;
		box-sizing: border-box;
	}
	.under_company > p{
		color: #333333;
		padding: 0.15rem 0;
		box-sizing: border-box;
	}
	.under_contact{
		margin: 0.5rem 0 0;
		transition: all .3s;
		padding: 0 20px;
		box-sizing: border-box;
	}
	.under_contact > p{
		
	}
	.under_contact > p > span{
		display: inline-block;
		color: #666666;
		margin: 0.15rem 0.25rem;
	}
	.under_contact > p > span > a{ color: #666666; transition: all .3s;}
	.under_contact > p > span > a:hover{
		color: #ff0000;
	}

	.fectechs{
		width: 100%;
		text-align: right;
		font-size: 0.7rem;
		color: #c6c6c6;
		padding: 0 5px;
		box-sizing: border-box;
	}
@media (max-width: 1096px)
{
	.under_ul{
		max-width: 100%;
	}
	.under_ul li{
		width: auto;
		margin: 10px;
	}
}
@media (max-width: 796px)
{
	.under_contact{ text-align: center; }
}
@media all and (max-width: 675px)
{
	.outtour_ul li{ width: 50%; }
	.outtour_ul li:nth-child(5){ width: 100%; }
	.outtour_ul_txt{ padding: 0.5rem 0.1rem; }
}
@media (max-width: 650px)
{
	.under_ul li{
		width: 45%;
		margin: 10px 2.5%;
	}
}