@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');

/* 表頭 top */
	header{
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000;
	}
	.toplogo{
		display: inline-block;
		margin: 0 10px;
	}
	.toplogo > img{
		vertical-align: top;
		transition: all .3s;
	}
	.toplink{ margin: 0 10px; }

	.toplink ul{
		min-width: 130px;
		display: flex;
		align-items:center;
		justify-content:center;
		list-style: none;
	}
	.toplink ul li a{
		display: block;
		font-size: 1.5rem;
		padding: 0.25rem;
		box-sizing: border-box;
		margin: 0.25rem;
		color: #A18650;
		border-radius: 5px;
		transition: all .3s;
	}
	.toplink ul li:hover > a{ color: #FFF; }

/* 右邊社群連結 */

	.toplink2{
		position: fixed;
	    z-index: 999;
	    bottom: 20%;
	    right: 2%;
	}
	.toplink2 ul{ list-style: none; }
	.toplink2 ul li a{
		display: inline-block;
		cursor: pointer;
	    border-radius: 10px;
	    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05), 0 2px 5px rgba(0, 0, 0, 0.3);
	    padding: 0.5rem;
	    margin: 0.25rem 0;
	    font-size: 2.2rem;
	    box-sizing: border-box;
	    color: #C1A160;
	    background-color: #fff;
	}
	.toplink2 ul li .toplink_grp{
		width: 52px;
		height: 52px;
		font-size: 1rem;
		padding: 0.25rem;
		text-align: center;
		color: #fff;
	    background-color: #C1A160;
	}
	.toplink2 ul li .toplink_grp span{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		width: 36px;
		height: 36px;
	}
	.toplink2 ul li .toplink_mail2{ background-color: #CC0000; }
	.toplink2 ul li .toplink_fb2{ background-color: #3B559F; }
	.toplink2 ul li .toplink_phone2{ background-color: #4CDA64; }
	.toplink2 ul li .toplink_line2{ background-color: #4ECD00; }

	.toplink2 ul .toplink2_li a{
		color: #fff;
	}
	.toplink2 ul li .toplink_totop2{
		
	}


@media all and (min-width: 980px)
{
	.topwrap{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.topnav{
		width: 100%;
		max-width: 800px;
	}
	.topnav ul{
		display: flex;
		align-items: center;
		justify-content: center;
		list-style: none;
	}
	.topnav ul li{ position: relative; }
	
	.topnav ul li > a{
		white-space: nowrap;
		display: block;
		font-size: 1.2rem;
		font-weight: bold;
		color: #FFF;
		padding: 0.75rem;
		box-sizing: border-box;
		transition: all .3s;
	}
	.topnav ul li:hover > a{
		background-color: #000;
		color: #FFD700;
	}
	.topnav ul li .subnav{
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translate(-50%,0);
		border-radius: 15px;
		background-color: #FFF;
		box-shadow: 2px 3px 3px rgba(0,0,0,0.25);
		display: none;
	}
	.topnav ul li:hover > .subnav{ display: flex; }
	/* 團體行程 */
	.topnav ul li > .grptour{
		align-items: stretch;
		border: 1px solid #EEE;
		padding: 1rem;
		box-sizing: border-box;
	}
	.topnav ul li .grptour > li{
		padding: 0.25rem 1rem;
		box-sizing: border-box;
	}
	/*.topnav ul li .grptour > li:last-child{ border-left: 1px solid #888; }*/
	.topnav ul li .grptour > li{ border-left: 1px solid #888; }
	.topnav ul li .grptour > li:first-child{ border-left: none; }

	.topnav ul li .grptour li > h3{
		width: 100%;
		padding: 0.25rem 0 1rem;
		box-sizing: border-box;
		color: #CC0000;
	}
	.topnav ul li .grptour li > .thirdnav{
		display: block;
	}
	.topnav ul li .grptour li .thirdnav > li{
		padding: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.topnav ul li .grptour li .thirdnav > li:last-child{ border-left: none; }

	.topnav ul li .grptour li .thirdnav > li:before{
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0.25rem 0 0.25rem 0.35rem;
		border-color: transparent transparent transparent #CC0000;
		margin: 0 0.25rem 0 0;
	}
	.topnav ul li .grptour li .thirdnav li > a{
		font-size: 0.9rem;
		font-weight: normal;
		color: #44448F;
		padding: 0;
	}
	.topnav ul li .grptour li .thirdnav li > a:after{ content: "："; }

	.topnav ul li .grptour li .thirdnav li:hover > a{
		background-color: transparent;
		color: #333;
	}
	.topnav ul li .grptour li .thirdnav li .fourthnav > li{
		padding: 0.25rem 0;
		box-sizing: border-box;
	}
	.topnav ul li .grptour li .thirdnav li .fourthnav > li:last-child{ border-left: none; }

	.topnav ul li .grptour li .thirdnav li .fourthnav > li:before{ display: none; }

	.topnav ul li .grptour li .thirdnav li .fourthnav li > a{
		border-right: 1px solid #888;
		padding: 0 0.5rem;
	}
	.topnav ul li .grptour li .thirdnav li .fourthnav li > a:after{ content: ""; }

	.topnav ul li .grptour li .thirdnav li .fourthnav li:hover > a{
		background-color: rgba(0,0,0,0.1);
		color: #333;
	}
	.topnav ul li .grptour li .thirdnav li .fourthnav li:last-child > a{ border-right: none; }

	.topnav ul li .grptour li .thirdnav .taiwan{
		align-items: baseline;
	}
	.topnav ul li .grptour li .thirdnav .taiwan .taiwanmain{
		flex-wrap: wrap;
	}

	.topnav ul li .grptour li .thirdnav li .fourthnav li > .taiwan_1{ border-right: none; }

	/* 會員登入 */
	.topnav2{ width: 100%; }
	.topnav2 ul{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		list-style: none;
	}
	.topnav2 ul li{
		position: relative;
		padding: 0.25rem 0;
		box-sizing: border-box;
	}
	.topnav2 ul li a{
		display: block;
		text-align: center;
		font-size: 1.2em;
		padding: 0.75rem;
		box-sizing: border-box;
		color: #fff;
    	font-weight: bold;
		transition: all .3s;
	}
	.topnav2 ul li:last-child a{ border-right: none; }

	.topnav2 ul li > .topnav2_subnav{
		position: absolute;
		z-index: 1;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 120%;
		flex-direction: column;
		background-color: #FFF;
    	box-shadow: 2px 3px 3px rgb(0 0 0 / 25%);
		display: none;
	}
	.topnav2 ul li > .topnav2_subnav li a{
		display: block;
		padding: 0.1rem 1rem;
		box-sizing: border-box;
		text-align: center;
		font-size: 0.9em;
		color: #44448F;
		font-weight: normal;
	}
	.topnav2 ul li > .topnav2_subnav li:hover a{
		background-color: rgba(0,0,0,0.1);
		color: #333;
	}
}
@media all and (max-width: 979px)
{
	header{ justify-content: space-between; }
	
	.toplink{ margin: 0; }

	.toplink ul{ min-width: 0; }
	
	.toplogo{ margin: 0 0 0 70px; }

	.topnav_btn{
		cursor: pointer;
		position: absolute;
		top: 10px;
		right: -55px;
		z-index: 10000;
		width: 35px;
		height: 35px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	.topnav_open{ background-image: url(/webeip/HT00100/becky/icon/menubtn_open_blod_W.svg); }

	.topnav_close{ background-image: url(/webeip/HT00100/becky/icon/menubtn_close_blod_w.svg); }

	.topwrap{

	}

	.topnav{
		background-color: rgba(255,171,0,0.9);
		position: fixed;
		z-index: 9999;
		top: 0;
		left: -70vw;
		width: 70vw;
		padding-top: 100px;
		box-sizing: border-box;
		height: 100%;
	}
	.topnav > ul{
		width: 95%;
		max-width: 300px;
		margin: 0.25rem auto;
		height: 95%;
		overflow: auto;
		list-style: none;
	}
	.topnav ul > li{
		border-bottom: 1px solid rgba(255,255,255,0.5);
		box-sizing: border-box;
	}
	.topnav ul > li:last-child{ border-bottom: none; }

	.topnav ul li > a{
		display: block;
		width: 100%;
		text-align: center;
		color: #333;
		font-size: 1.25rem;
		font-weight: bold;
		padding: 0.5rem 0.1rem;
	}
	.topnav ul li > .subnav{
		width: 95%;
		margin: 0.25rem auto;
		background-color: rgba(0,0,0,0.1);
		display: none;
	}
	.topnav ul li .grptour li > h3{
		width: 100%;
		text-align: center;
		padding: 0.5rem 0.1rem;
		box-sizing: border-box;
		color: #CC0000;
		background-color: rgba(255,255,255,0.5);
	}
	.topnav ul li .grptour > li{ border-bottom: 1px solid rgba(0,0,0,0.1); }
	.topnav ul li .grptour > li:last-child{ border-bottom: none; }
	.topnav ul li .grptour li > .thirdnav{
		width: 98%;
		margin: 0.25rem auto;
		background-color: rgba(0,0,0,0.25);
		display: none;
	}
	.topnav ul li .grptour li .thirdnav > li{ padding: 0 0 0.25rem 0; }

	.topnav ul li .grptour li .thirdnav li > a{ color: #FFF; }

	.topnav ul li .grptour li .thirdnav li > .fourthnav{
		width: 95%;
		margin: 0.25rem auto;
		background-color: rgba(255,255,255,0.4);
		display: none;
	}

	.topnav ul li .grptour li .thirdnav li .fourthnav li > a{ color: #555; }


	.topnav2_subnav{
		width: 95%;
		margin: 0.25rem auto;
		background-color: rgba(0,0,0,0.1);
	}
	.topnav ul .topnav2 ul li .topnav2_subnav li{
		border-bottom: 1px solid rgba(0,0,0,0.1);
    	box-sizing: border-box;
	}
	.topnav ul .topnav2 ul li .topnav2_subnav li a{
		width: 100%;
	    text-align: center;
	    padding: 0.5rem 0.1rem;
	    box-sizing: border-box;
	    color: #CC0000;
	    background-color: rgba(255,255,255,0.5);
	}
}

/* 表尾 under */
	footer{
		width: 100%;
		background-color: #1E1E1E;
	}
	.under_link{
		width: 100%;
		background-color: #C1A160;
	}
	.under_link > ul{
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}
	.under_link > ul li{
		width: calc(100% / 5);
		text-align: center;
	}

	.under_link > ul li a{
		display: block;
		width: 100%;
		color: #C1A160;
		letter-spacing: 3px;
		padding: 5px;
		box-sizing: border-box;
		transition: all .5s;
		border: 1px solid #C1A160;
		color: #000;
	}
	.under_link > ul li a:hover{
		background-color: #ffffff;
	}
	.underwarp{
		width: 95%;
		max-width: 1300px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
		position: relative;
	}

	.under_company{
		width: 58%;
		margin: 0.5rem 0 0;
		transition: all .3s;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		padding-top: 30px;
	}
	.under_companydown{
		width: 60%;
    	margin-left: 5%;
	}
	.under_company h1{
		width: 100%;
		font-size: 1rem;
		color: #FFDF9D;
		margin-bottom: 8px;
		letter-spacing: 2px;
		padding-left: 2px;
		box-sizing: border-box;
		padding-top: 8px;
	}
	.under_company p{
		color: #FFCC66;
		padding: 0.15rem 0;
		box-sizing: border-box;
	}
	.under_company  p > span{
		display: inline-block;
		color: #C0C0C0;
		margin: 0.15rem 0.25rem;
	}
	.under_company  p > span > a{ color: #C0C0C0; }

	.under_company .under_companydown h1{ position: relative; }
 
	.under_company .under_companydown h1:after{
		position: absolute;
		content: '';
		display: block;
		width: 30%;
		height: 1px;
		background: #FFDF9D;
		top: 18px;
		left: 140px;
	}

	.under_contact{
		width: 42%;
		margin: 0.5rem 0 0;
		transition: all .3s;
		padding: 0 30px;
		box-sizing: border-box;
	}
	.underlink{
		width: 100%;
		max-width: 370px;
		padding: 1rem 0;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		list-style: none;
		position: relative;
    	left: -10px;
	}
	.underlink li{
		display: inline-block;
	}
	.underlink li a{
		width: 55px;
		display: block;
		padding: 0.5rem;
		box-sizing: border-box;
		color: #FFDF9D;
		transition: all .5s;
	}
	.underlink li a img{
		width: 100%;
		vertical-align: top;
	}
	.underlink li:hover > a{
		color: #fff;
	}
	.underline{
		width: 1px;
		height: 80%;
		background: #ffdf9d;
		position: absolute;
		left: 58%;
		top: 50%;
		transform: translate(0, -50%);
	}

	.under_ul{
		width: 100%;
		list-style: none;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.under_ul li{
		display: block;
		width: calc(95% / 3);
		margin: 5px calc(5% / 6);
	}

	.under_ul li a{
		display: block;
		width: 100%;
		color: #FFDF9D;
		padding: 5px;
		box-sizing: border-box;
		font-size: 0.95rem;
	}

	.under_ul li:hover > a{ text-decoration: underline; }

	.fectechs{
		width: 100%;
		text-align: right;
		font-size: 0.7rem;
		color: rgba(255,255,255,0.1);
	}

@media all and (max-width: 1075px)
{
	.under_company{
		width: 100%;
		justify-content: flex-start;
		padding: 82px 70px 0 70px;
	}
	.underline{ display: none; }
	.under_contact{
		width: 100%;
	}
	.under_companydown{ width: 100%; margin-left: 0;}
}
@media all and (max-width: 768px)
{
	.toplogo > img{ width: 130px; }

	.under_link{
		background-color: transparent;
	}


	.under_link > ul li{
		width: calc(95% / 2);
        margin: 5px calc(5% / 4);
	}

	.under_link > ul li a{ color: #C1A160; }

	.under_companyTop{ margin-bottom: 20px; }

	.under_company, .under_contact{
		padding: 10px;
	}

}