@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');
/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/peggy/css/reset.css');

/* 表頭 top */
	header{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(255 255 255);
		transition: all .3s;
	}
	.topwrap_main{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.toplogo{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 250px;
		margin: 0 20px;
		transition: all .5s;
	}
	.toplogo > img:first-child{
		vertical-align: top;
		width: 100px;
		transition: all .5s;
	}
	.toplogo > img:nth-child(2){
		vertical-align: top;
		width: 150px;
		transition: all .5s;
	}
	.toplogo > span{
		display: block;
		text-align: center;
		color: #2f318b;
		font-weight: bold;
		font-size: 1.25rem;
	}

	/* 社群小圖示 */
		.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.25rem;
			box-sizing: border-box;
			font-size: 2rem;
			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: 2%;
			right: 0;
			cursor: pointer;
			background-color: #494848;
			color: rgba(255,255,255,0.85);
			transition: all .5s;
			display: none;
			border: none;
		}
		.toplink ul li .toplink_totop:hover{ background-color: #6B6B6B; }
@media all and (min-width: 1180px){
	/* 導覽列 */
		.topwrap{
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all .5s;
		}
		.topnav ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			list-style: none;
		}
		.topnav ul li{ position: relative; min-width: 110px;}

		.topnav ul li a{
			display: block;
			text-align: center;
			padding: 0.75rem 1rem;
			box-sizing: border-box;
			font-size: 1.2rem;
			position: relative;
			cursor: pointer;
			color: #000;
			font-weight: bold;
			transition: all .3s;
		}
		/*.topnav > ul > li > a:before{
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border-radius: 50%;
			background-color: #000;
	    	top: 10px;
			transition: all .3s;
			left: 0;
		}*/
		.topnav ul li:hover > a{ background-color: rgba(0,0,0,0.1); }
		/*.topnav ul li:hover > a:before{
			width: 10px;
			height: 10px;
		}*/
		.topnav > ul > li > a .toptxt_en{
			display: block;
			font-size: 1rem;
			font-weight: normal;
			font-family: 'Playball', cursive;
			color: #888;
		}
		.topnav > ul > li > a img{
			display: block;
			width: 35px;
			vertical-align: top;
			margin: 0 auto 5px;
			transition: all .3s;
		}
		.topnav ul li > .subnav{
			position: absolute;
			z-index: 999;
			top: 100%;
			left: 50%;
	    	transform: translate(-50%, 0);
			background-color: rgb(238 238 238 / 80%);
			width: 150%;
			text-align: center;
			display: none;
			box-shadow: 0 0 5px rgb(0 0 0 / 20%);
		}
		.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; }

		/*下滑時*/
			.header_2 .toplogo > span{ font-size: 1.15rem; }
			.header_2 .topnav ul li a{ font-size: 1.1rem; }
			.header_2 .topnav > ul > li > a img{ width: 30px; }
}
@media (max-width: 1179px)
{
	.topwrap_main{ justify-content: flex-start; }

	.topnav_btn{
		cursor: pointer;
		position: absolute;
		top: 5px;
		left: -50px;
		z-index: 10000;
		width: 40px;
		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;
		background-color: #444444;
	}
	.topnav_btn .line_btn_top{
		top: 10px;
	}
	.topnav_btn .line_btn_center{
		top: 20px;
	}
	.topnav_btn .line_btn_bottom{
		top: 30px;
	}
	.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 > a img{
		display: block;
		width: 35px;
		vertical-align: top;
		margin: 0 auto 5px;
		transition: all .3s;
	}
	.topnav > ul > li > a .toptxt_en{
		font-size: 1rem;
		font-weight: normal;
		font-family: 'Playball', cursive;
		color: #888;
	}
	.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: 200px; margin: 5px;}

	.toplogo > img:first-child{
		width: 80px;
	}
	.toplogo > img:nth-child(2){
		width: 120px;
	}

	.header_2{ border-bottom: 1px solid #eeeeee; }
	.header_2 .topnav_close .line_btn,
	.header_2 .topnav_close .line_btn_bottom{ background-color: #444444; }
}
@media (max-width: 768px)
{
	.toplink ul{
		position: fixed;
		bottom: 0;
		width: 100%;
		right: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.toplink ul li:first-child,
	.toplink ul li:nth-child(2),
	.toplink ul li:nth-child(3),
	.toplink ul li:nth-child(4){
		width: 25%;
	}
	.toplink ul li a{
		text-align: center;
		color: #fff;
		border-radius: 0;
		margin: 0;
		font-size: 1.5rem;
		padding: 0.5rem 0.25rem;
	}
	.toplink ul li .toplink_fb{
		background-color: #3B559F;
		color: #fff;
	}
	.toplink ul li .toplink_line{
		background-color: #4ECD00;
		color: #fff;
	}
	.toplink ul li .toplink_mail{
		background-color: #f44336;
		color: #fff;
	}
	.toplink ul li .toplink_phone{
		background-color: #ff9800;
		color: #fff;
	}
	.toplink ul li .toplink_totop{
		background-color: rgb(73 72 72 / 50%);
		font-size: 2rem;
    	padding: 0.25rem;
    	bottom: 44px;
	}
}
/* 表尾 under */
	footer{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
		position: relative;
		background-color: #EEE;
	}
	/* under logo */
		.underlogo{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			margin: 0 auto;
			width: 200px;
			transition: all .3s;
		}
		.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;
			border-radius: 10px;
		}
		.underlogo > img:first-child{
			width: 120px;
			border-radius: 10px 10px 0 0;
		}
		.underlogo > span{
			display: block;
			text-align: center;
			color: #2f318b;
			font-weight: bold;
			font-size: 1.5rem;
		}
	.underlogin{
		max-width: 160px;
		margin: 10px 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;
	}
	.under_ul{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		/*background: #f9f4c5;
		background: -webkit-linear-gradient(top, #f9f4c5 0%, #ca8217 100%);
		background: -o-linear-gradient(top, #D0AE6F 0%, #735726 100%);
		background: linear-gradient(to bottom, #f9f4c5 0%, #ca8217 100%);*/
		list-style: none;
		background-color: #8bc3fc;
	}
	.under_ul li{
		display: block;
		text-align: center;
	}
	.under_ul li a{
		display: block;
		width: 100%;
		color: #ffffff;
		background-color: #8bc3fc;
		padding: 10px 10px 10px 12px;
		box-sizing: border-box;
		font-size: 1rem;
		letter-spacing: 2px;
		transition: all .3s;
	}

	.under_ul li:hover > a{ background-color: #000000; }

	.under_company{
		width: 100%;
		max-width: 300px;
		margin: 0.5rem 0 0;
		transition: all .3s;
	}
	.under_company p{
		color: #333333;
		padding: 0.15rem 0;
		box-sizing: border-box;
		font-size: 0.9rem;
		text-align: center;
	}
	.under_company p span{
		display: inline-block;
	}
	.under_companybox{
		width: 95%;
		margin: 20px auto 0;
	}
	.under_contact{
		width: 100%;
		max-width: 350px;
		margin: 0.5rem 0 0;
		transition: all .3s;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.under_contact > div{
		width: 100%;
		margin: 10px 2.5%;
	}
	.under_contact > div h3{
		font-weight: normal;
		letter-spacing: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #666;
		margin-bottom: 10px;
		box-sizing: border-box;
		font-size: 1.15rem;
	}
	.under_contact ul{
		list-style: none;
	}
	.under_contact > ul > li{
		margin-bottom: 5px;
	}
	.under_contact > ul > li > a{
		display: block;
		font-size: 1rem;
		padding: 0 0.5rem;
		box-sizing: border-box;
		color: #000;
	}
	.under_contact > ul > li:hover > a{ text-decoration: underline; }

	.under_contact p{
		padding: 0 0 0 0.25rem;
		box-sizing: border-box;
	}
	.under_contact p span{
		display: inline-block;
		color: #000;
		margin-bottom: 5px;
		margin-right: 5px;
	}
	.under_contact p span a{ color: #000; transition: all .3s;}
	.under_contact p span a:hover{
		color: #ff0000;
	}

	.underlink > ul{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 0 0 0.25rem;
		box-sizing: border-box;
	}
	.underlink > ul li{
		display: inline-block;
		transition: all 1s;
	}
	.underlink > ul li a{
		display: inline-block;
		padding: 5px;
		font-size: 1.25rem;
		box-sizing: border-box;
		border-radius: 5px;
		margin-right: 5px;
		color: #fff;
		transition: all 1s;
	}
	.underlink > ul li .underlink_fb{ background-color: #3B559F; }
	.underlink > ul li .underlink_line{ background-color: #4ECD00; }
	.underlink > ul li .underlink_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%);
	}

	.underlink > ul li a:before{ transition: all 1s; }


	.underlink > ul li:hover a{
		transform: rotate3d(0, 1, 0, 360deg);
	}

	.fectechs{
		width: 100%;
		text-align: right;
		font-size: 0.7rem;
		color: #c6c6c6;
		padding: 0 5px;
		box-sizing: border-box;
	}
	.under_line{
		width: 100%;
		max-width: 150px;
		margin: 0.5rem 0 0;
		display: block;
	}
	.under_line > img{
		width: 100%;
		vertical-align: top;
		padding: 5px;
		box-sizing: border-box;
	}
@media (max-width: 768px)
{
	.under_ul li{
		width: 50%;
	}
	.under_ul li:last-child{
		width: 100%;
	}
	.under_company p{
		text-align: center;
	}
	.under_contact > div{
		width: 98%;
		margin: 10px auto;
	}
	.underlogo > img:first-child{
		width: 100px;
		border-radius: 10px 10px 0 0;
	}
	.underlogo > img:nth-child(2){
		width: 180px;
	}



}