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

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

@import url('https://fonts.googleapis.com/css2?family=Rajdhani&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;
    left: 0;
    top: 0;
    background-color: #fff;
    height: 100%;
	max-width: 180px;
	box-shadow: 0 0 5px rgb(0 0 0 / 10%);
}
.toplogo{
	display: inline-block;
	margin: 20px 15px;
	font-size: 1.35rem;
	position: relative;
	padding: 20px 0;
	text-align: center;
}
/*.toplogo:after{
	position: absolute;
    content: '';
    width: 90%;
    clip-path: circle(50% at 50% 50%);
    height: 90%;
    background: linear-gradient(to right, #fff59e 0%, #fffef9 100%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    z-index: -99;
}
.toplogo > span{
	display: block;
    text-align: center;
    font-weight: bold;
    color: #000;
    letter-spacing: 1.5px;
    padding-left: 1.5px;
    box-sizing: border-box;
}
.toplogo > span:first-child{
	font-size: 2.5rem;
    background: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}*/
.toplogo img{
	width: 150px;
}
.gotop{
	cursor: pointer;
	position: fixed;
	bottom: 0;
	left: 180px;
	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{
		position: fixed;
	    right: 1%;
	    top: 30px;	
	}
	.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: 10px;
		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;
	}
/* 表頭資訊 */
	.topinfo{
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 5px;
		box-sizing: border-box;
		max-width: 180px;
		z-index: 9;

	}
	.topinfo > h3{
		display: flex;
		justify-content: flex-start;
		align-items: flex-end;
	}
	.topinfo > p{
		font-size: 0.9rem;
		margin: 5px 0;
	}
	.topinfo > p a{ color: #333; transition: all .3s;}
	.topinfo > p a:hover{ color: #ff0000; }
	.topinfo > p a span{ margin-right: 5px; }
	.topinfo h3 span{
		font-size: 1rem;
		border-left: 2px solid #444;
	    padding-left: 5px;
	    box-sizing: border-box;
	}
	.topinfo img{
		width: 40px;
		vertical-align: top;
	}
/*表頭*/
@media all and (min-width: 1100px)
{

	.topwrap{
		width: 100%;
	    box-sizing: border-box;
	    background-color: #fff;
	}
	/* 導覽列 */
		.topnav ul li{
			position: relative;
			box-sizing: border-box;
			display: block;
			text-align: center;
		}
		.topnav ul li a{
			color: #444;
			font-weight: bold;
			margin: 0.9em;
			display: inline-block;
			position: relative;
		}
		.topnav ul li a:before{
			content: '';
		    position: absolute;
		    height: 3px;
		    width: 3px;
		    bottom: -5px;
		    display: block;
		    background-color: #444;
		    opacity: 0;
		    transition: all .3s ease;
		}
		.topnav ul li:hover a:before{
			opacity: 1;
			width: 50%;
		}
		.topnav ul li > .subnav{
			display: none;
			position: absolute;
		    width: 100%;
		    top: 0;
		    left: 100%;
		    border: 2px solid #444;
		    background-color: #fff;
		    border-radius: 0 5px 5px 5px;
		    opacity: 0;
		}
		.topnav ul li > .subnav:before{
			position: absolute;
			content: '';
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px 0 0 20px;
			border-color: transparent transparent transparent #444;
			top: 2px;
			left: -12px;
	    	transform: rotate(45deg);
		}
		.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: #444;
			color: #fff;
		}
		.topnav ul li > .subnav li a:before{ display: none; }


		/* topUTF8表頭 */
			.topUTF8{
				width: 100%;
				max-width: 100%;
		    	height: auto;
		    	display: flex;
			    justify-content: center;
			    align-items: center;
			}
			.topUTF8 .toplogo{
				margin: 5px;
				display: flex;
				justify-content: center;
				align-items: baseline;
				width: 100%;
				max-width: 210px;
			}
			.topUTF8 .toplogo:after{
				width: 80px;
				height: 80px;
				left: 0;
				transform: translate(0, -50%) rotate(60deg);
			}
			.topUTF8 .toplogo > span{ display: inline-block; }
			.topUTF8 .toplogo{
				padding: 0;
			}
			.topUTF8 .toplogo img{ width: 100px; }
			.topUTF8 .topwrap{
				display: flex;
			    justify-content: center;
			    align-items: center;
			}
			.topUTF8 .topwrap .topnav > ul{ display: flex; }


			.topUTF8 .topnav ul li{ padding: 0; }

			.topUTF8 .topnav ul li a{
				margin: 0.5rem;
				font-size: 1.15rem;
			}
			.topUTF8 .topwrap .topnav ul li > .subnav{
				top: 100%;
		    	left: 0;
		    	width: 150%;
			}
			.topUTF8 .topnav ul li > .subnav:before{ display: none; }

			.topUTF8 .topwrap .topnav ul li:hover > .subnav{ display: block;}
			.topUTF8 .toplink{ top: 5px; }

			.topUTF8 .topinfo{ display: none; }
			.topUTF8 .gotop{ left: 0; }
		/* 下滑社群 */
			.header_2 .toplink{
				top: 50%;
			}
			.header_2 .toplink ul{ display: inline-block; }
			.header_2 .toplink ul li a{
				padding: 5px;
				font-size: 1.25rem;
			}
}
@media all and (max-width: 1099px){
	header{ width: 100%; height: auto; max-width: 100%;}
	.topwrap{
		
	}
	.topnav_btn{
		width: 40px;
		height: 40px;
		position: absolute;
		top: 15px;
		left: 120px;
		z-index: 10000;
		cursor: pointer;
	}
	.topnav_btn .line_btn{
		position: absolute;
		display: inline-block;
		width: 80%;
		height: 5px;
		transition: all .3s;
		background-color: #ff9800;
		left: 50%;
		transform: translate(-50%, 0);
	}
	.topnav_btn .line_btn_top{
		top: 7px;
	}
	.topnav_btn .line_btn_center{
		top: 17px;
	}
	.topnav_btn .line_btn_bottom{
		top: 27px;
	}
	.topnav_close{
		left: auto;
		right: 140px;
	}
	.topnav_close .line_btn{
		background-color: #fff;
	}
	.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);
	}

	.topnav{
		position: fixed;
		z-index: 99;
		top: 0;
		right: -200px;
		width: 200px;
		padding-top: 70px;
		height: 100%;
		box-sizing: border-box;
	}

	.topnavBg{
		position: absolute;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 60%);
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		z-index: 9;
		background-color: rgb(0 0 0);
	}
	.topnavMenuBg{
		position: absolute;
		clip-path: polygon(0 0, 60% 0, 100% 100%, 0% 100%);
		top: 0;
		left: -100%;
		width: 100%;
		height: 100vh;
		z-index: 9;
		background-color: rgb(255 152 0 / 30%);
	}
	.topnav .topscoll{
		height: 60%;
		overflow: auto;
	}
	.topnav ul{
		width: 90%;
		max-width: 250px;
		margin: 0.25rem auto;
		height: 90%;
    	overflow: auto;
	}
	.topnav ul li{ width: 100%; }
	.topnav ul li a{
		display: block;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 1rem;
		font-weight: bold;
		padding: 1rem;
		box-sizing: border-box;
	}
	.topnav ul li .subnav{
		width: 90%;
		background-color: rgba(255,255,255,0.2);
	}
	.topinfo{
		left: -100%;
		bottom: 50px;
		background-color: rgb(0 0 0 / 50%);
		border-radius: 20px 0 20px 0;
		color: #e8e8e8;
	}
	.topinfo img{
		display: block;
	}
	.topinfo > p a{ color: #e8e8e8; }

	.toplink{
		top: 20px;
	}
	.toplink ul li a{
		margin: 2.5px;
	    padding: 5px;
	    font-size: 1.5rem;
	    border: none;
	}

	/*.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{
		padding: 10px 0;
		margin: 5px;
		font-size: 1.15rem;
	}
	.toplogo > span:first-child{
		font-size: 1.75rem;
	}
	.toplogo{ padding: 0; }
	.topUTF8 .toplogo img,
	.toplogo img{ width: 100px; }

	.gotop{ left: 0; }
}
/*表尾*/
	footer{
		width: 100%;
		background-color: #444;
		color: #ddd;
		position: relative;
	}
	.underwrap{
		width: 100%;
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 30px 0 20px;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	}
	.underwrap_box{
		width: 100%;
		max-width: 280px;
		text-align: center;
	}
	.underwrap_box h2{
		font-weight: 500;
    	font-size: 1.25rem;
    	margin-bottom: 10px;
	}
	.underwrap_box h2 span{
		margin-left: 0.25rem;
		font-family: 'Rajdhani', sans-serif;
	}
	.underwrap_box p{
		font-size: 0.95rem;
		padding: 0.25rem 0;
		box-sizing: border-box;
	}
	.underwrap_box p a{ color: #ddd; }
	.underwrap_box p span{ margin-right: 0.25rem; }
	.underwrap_box_rwd{
		display: none;	
	}
	.underwrap_box_img{ text-align: center; }
	.underwrap_box_img > img{
		width: 80px;
		border-radius: 20px;
		vertical-align: text-bottom;
	}
	.fectechs{
		width: 100%;
		font-size: 0.7rem;
		color: rgb(116 116 116);
		text-align: right;
		display: block;
		box-sizing: border-box;
	}
@media all and (max-width: 1099px){
	.underwrap_box_rwd{
		display: block;	
	}
	.underwrap{
		flex-wrap: wrap;
		flex-direction: column;
	}
	.underwrap_box{
		width: 90%;
		margin: 10px auto 40px;
	}

}
	/* 隱私權政策 */
	.privacy_fixed_main{
		position: fixed;
		z-index: 99999;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		background-color: #FFF6BF;
		border: 1px solid #FFD324;
		padding: 10px;
		box-sizing: border-box;
	}
	.privacy_fixed_btn_close{
		cursor: pointer;
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 1.25rem;
		color: #D86711;
	}
	.privacy_fixed_main form{
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		margin-top: 10px;
	}
	.privacy_fixed_main form div{
		font-weight: bold;
		color: #D86711;
	}
	.privacy_fixed_main form input[type="button"]{
		cursor: pointer;
		border: 0;
		display: inline-block;
		padding: 0.25rem 1rem;
		box-sizing: border-box;
		background-color: #D86711;
		color: #FFF;
		margin: 10px;
		font-size: 1rem;
		border-radius: 2px;
		transition: all .5s;
	}