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

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

/* 以下是 animate 的 CSS */
@import url('/webeip/HT00100/becky/css/animate.css');
/* 以下是 reset 的 CSS */
@import url('/webeip/HT00100/peggy/css/reset.css');

/* 公版電腦版設定 */
	.page_banner,
	.page_nav,
	.page_main,
	.travelwant_banner,
	.travelwant_nav,
	.contact_banner,
	.contact_nav{
		min-width: 1280px;
	}



/* 表頭 top */
	header{
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		min-width: 1280px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgb(255 255 255);
		transition: all .3s;
	}
	.topwrap_main{
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* top logo */
		.toplogo{
			width: 250px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			padding: 10px 0;
			transition: all .3s;
			border-radius: 10px;
		}
		.toplogo > 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;
			border-radius: 10px;
		}
		.toplogo_txt{
			display: flex;
			flex-direction: column;
			margin-left: 5px;
		}
		.toplogo_txt > span:first-child{
			display: inline-block;
			color: #1C1F87;
			font-size: 1.5rem;
			font-weight: bold;
			letter-spacing: 2px;
			padding-left: 2px;
			box-sizing: border-box;
		}
		.toplogo_txt > span:nth-child(2){
			color: #000;
			font-weight: bold;
			font-family: Microsoft JhengHei;
			text-align: center;
		}

	/* 社群小圖示 */
		.toplink ul{
			list-style: none;
		}
		.toplink ul li a{
			display: block;
			padding: 0.25rem;
			box-sizing: border-box;
			font-size: 1.5rem;
			margin: 0.25rem;
			border-radius: 50%;
			transition: all .3s;
			transform: scale(1);
			background-color: transparent;
			color: #1c1f87;
			border: 2px solid transparent;
		}
		.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; }

	/* 導覽列 */
		.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; }

		.topnav ul li a{
			display: block;
			text-align: center;
			padding: 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.2); }*/
		.topnav ul li:hover > a:before{
			width: 10px;
			height: 10px;
		}
		

		.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; }

		.toplink ul{
			right: 10px;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		/*下滑時*/
			.header_2{ background-color: rgba(255,255,255,80%); }
			.header_2 .toplogo img{ width: 60px; }
			.header_2 .topnav ul li a{ font-size: 1.1rem; }


/* 表尾 under */
	footer{
		width: 100%;
		min-width: 1280px;
		background-color: #e4e4e4;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
	}
	/* under logo */
		.underlogo{
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			padding: 10px 0;
			margin: 0 auto;
			transition: all .3s;
			border-radius: 10px;
		}
		.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;
			border-radius: 10px;
		}
		.underlogo_txt{
			display: flex;
			flex-direction: column;
			margin-left: 5px;
		}
		.underlogo_txt > span:first-child{
			display: inline-block;
			color: #1C1F87;
			font-size: 1.5rem;
			font-weight: bold;
			letter-spacing: 2px;
			padding-left: 2px;
			box-sizing: border-box;
		}
		.underlogo_txt > span:nth-child(2){
			color: #000;
			font-weight: bold;
			font-family: Microsoft JhengHei;
			text-align: center;
		}
	.under_ul{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		/*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;
	}
	.under_ul li{
		padding: 0.5rem 0 0.5rem 0.75rem;
		box-sizing: border-box;
	}
	.under_ul li a{
		display: block;
		width: 100%;
		color: #666666;
		border-right: 1px solid #666666;
		padding: 0 0.75rem 0 0;
		box-sizing: border-box;
		font-size: 1rem;
	}
	.under_ul li:last-child > a{ border-right: none; }

	.under_ul li:hover > a{ color: #e60012; }

	.under_company{
		width: 100%;
		max-width: 400px;
		margin: 0.5rem 0 0;
		transition: all .3s;
		text-align: center;
	}
	.under_company > h1{
		width: 100%;
		font-size: 1rem;
		color: #FFDF9D;
		padding: 1rem 0;
		box-sizing: border-box;
	}
	.under_company > p{
		color: #444444;
		padding: 0.15rem 0;
		box-sizing: border-box;
	}
	.under_contact{
		width: 100%;
		max-width: 600px;
		margin: 0.5rem 0 0;
		transition: all .3s;
	}
	.under_contact > ul{
		width: 100%;
		padding: 5px;
		margin: 0.5rem 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		list-style: none;
		background-color: #fff;
		border-radius: 10px;
	}
	.under_contact > ul li{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 5px;
	}
	.under_contact > ul li span{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-right: 5px;
	}
	.under_contact > ul li span i{
		display: inline-block;
		margin-right: 5px;
		font-size: 1.25rem;
	}
	.under_line{ color: #4ECD00; }
	.under_skype{ color: #00AEF3; }
	.under_mail{ color: #F44336; }

	.under_contact > ul li span a{ color: #000; }
	.under_contact > ul li span a:hover{ color: #e60012; }

	.under_contact > p{
		padding: 0 0 0 0.25rem;
		box-sizing: border-box;
	}
	.under_contact > p > span{
		display: inline-block;
		color: #666666;
		margin: 0.15rem 0.25rem;
	}

	.fectechs{
		width: 100%;
		text-align: right;
		font-size: 0.7rem;
		color: #c6c6c6;
	}
/* BBC */
	.top_hk,
	.under_hk{ min-width: 1002px; }

	.under_hk .under_company{ max-width: 380px; }