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

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

@import url('https://fonts.googleapis.com');
@import url('https://fonts.gstatic.com" crossorigin');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap');

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


/* 表頭 top */
	header{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 9999;
		transition: all .5s;
		/*box-shadow: 0 0 5px rgb(255 255 255 / 20%);*/
		background-color: transparent;
		border-bottom: 1px solid rgb(255 255 255 / 30%);
	}
	.topwrap_main{
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.toplogo{
		width: 220px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		position: relative;
		transition: all .3s;
	}

	.toplogo > img{
		width: 70px;
		vertical-align: top;
		transition: all .8s;
		padding: 5px;
		box-sizing: border-box;
		border-radius: 50%;
		margin-right: 5px;
		background-color: transparent;
	}
	.toplogo_txt{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}
	.toplogo_txt_cn{
		font-size: 1.5rem;
		letter-spacing: 2.5px;
		padding-left: 2.5px;
		box-sizing: border-box;
		font-weight: normal;
		font-family: "Noto Serif TC", serif;
	}
	.toplogo_txt_en{
		font-size: 12px;
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		font-family: 'Playfair Display', serif;
	}


/* 社群小圖示 */
	.toplink ul{
		position: fixed;
		z-index: 999;
		bottom: 4rem;
		right: 0;
		bottom: 60px;
		display: block;
	}
	.toplink ul li a{
		display: block;
		padding: 0.65rem;
		box-sizing: border-box;
		font-size: 1.75rem;
		margin: 0.75rem 0.5rem;
		border-radius: 50%;
		transition: all .5s;
		transform: scale(1);
		color: #fff;
	    background-color: rgba(0,0,0,30%);
	}
	.toplink ul li:hover a{
		transform: scale(1.25);
	}
	.toplink ul li .toplink_totop{
		position: fixed;
		z-index: 99;
		bottom: 0;
		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; }

	/* 最新消息 站內活動快報 */
		.hotnews .ShowImgUrlLink_main{
			width: 95%;
			max-width: 1200px;
			margin: 0 auto 20px;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 20px 0;
		}
		.hotnews .ShowImgUrlLink_box{
			width: calc(95% / 3);
			margin: 0 calc(5% / 6);
		}
		.hotnews .ShowImgUrlLink_img{
			width: 100%;
			padding: 0 !important;
			margin-bottom: 10px;
			overflow: hidden;
		}
		.hotnews .ShowImgUrlLink_img_img img{
			width: 100%;
			vertical-align: top;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.hotnews .ShowImgUrlLink_img > div{
			vertical-align: top;
			width: 100%;
			height: 230px;
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
			-webkit-transition: all 0.4s ease;
			-text-decoration-linemoz-transition: all 0.4s ease;
			-o-transition: all 0.4s ease;
			transition: all 0.4s ease;
		}
		.hotnews .ShowImgUrlLink_title{
			padding: 0;
			box-sizing: border-box;
			font-family: "Noto Serif TC", serif;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.5;
			max-height: calc(1.5em * 2);
			font-size: 1.15rem;
		}

		.hotnews .ShowImgUrlLink_box:hover .ShowImgUrlLink_img > img,
		.hotnews .ShowImgUrlLink_box:hover .ShowImgUrlLink_img > div{
			-moz-transform: scale(1.1);
			-webkit-transform: scale(1.1);
			-o-transform: scale(1.1);
			-ms-transform: scale(1.1);
			transform: scale(1.1);
		}



	
@media (min-width: 1030px)
{
	.topwrap{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .5s;
	}
	.topnav{ width: 100%; }
	.topnav ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;		
	}

	.topnav ul li{ position: relative; }

	.topnav ul li a{
		display: block;
		text-align: center;
		padding: 25px 10px 25px 12px;
		box-sizing: border-box;
		font-size: 1.1rem;
		position: relative;
		cursor: pointer;
		color: #000;
		letter-spacing: 2px;
		transition: all .8s;
	}
	.topnav > ul > li > a{ color: #fff; position: relative;}
	.topnav > ul > li > a:after{
		position: absolute;
        content: '';
        width: 0;
        height: 2px;
        background-color: #fff;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
        transition: all .5s;
	}
	.topnav > ul > li:hover > a:after{
		width: 100%;
	}
	.topnav ul li a span{
		display: block;
		margin-bottom: 10px;
		font-size: 1.25rem;
		color: #666;
		transition: all .5s;
		
	}
	.topnav > ul > li > a > span{
		display: none;
	}
	.topnav > ul > li:hover > a span{
		color: #fff;
	}
	.topnav > ul{
		transition: .3s;
	}

	.topnav:has(li:hover > .subnav) > ul{
		background: #fff;
	}
	.topnav:has(li:hover > .subnav) > ul li a{
		color: #000;
	}

	.topnav:has(li:hover > .subnav) > ul .toplogo > img{
		width: 50px;
		background-color: #2196F3;
	}
	.topnav:has(li:hover > .subnav) > ul .toplogo_txt{
		color: #000;
	}


	.topnav ul li > .subnav{
		position: fixed;
		z-index: 999;
		height: 50%;
        top: 73px;
		left: 50%;
    	transform: translate(-50%, 0);
		background-color: rgb(238 238 238 / 80%);
		width: 100%;
		text-align: center;
		box-shadow: 0 0 5px rgb(0 0 0 / 20%);
		transition: all .5s;
		display: block;
		display: none;
		opacity: 0;
	}

	.topnav ul li > .subnav.twtour,
	.topnav ul li > .subnav.about{
		height: auto;
	}

	.topnav ul li > .subnav .subnav_bg{
		width: 100%;
	    height: 100%;
	    opacity: .6;
		background-image: url(/webeip/HT00426/img/topnav_hotnews.png);
	    position: absolute;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: cover;
	}

	.topnav ul li > .subnav .subnav_btn{
		position: relative;
		display: inline-block;

		padding: 5px 15px;

		border: 1px solid #c5b38c;

		color: #b79d67;

		overflow: hidden;

		transition: .4s ease-in-out;
	}
	
	.topnav ul li > .subnav .subnav_btn span{
		margin-bottom: 0;
		font-family: "Cormorant Garamond", serif;
		font-size: 1.15rem;
		letter-spacing: 1px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}
	.topnav ul li > .subnav .subnav_btn span:after{
		content: "";
		display: block;
		height: 1px;
		margin-left: 12px;
		transform-origin: left;
		transition: .4s ease-in-out;
		width: 15px;
		background: #b79d67;
	}
	.topnav ul li > .subnav .subnav_btn span:before{
		content: "\e670";
		font-family: 'icomoon' !important;
		left: 100%;
		display: block;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		transition: transform .4s ease-in-out;
	}


	/* hover */
	.topnav ul li > .subnav .subnav_btn:hover{
		background: #b79d67;
	}

	.topnav ul li > .subnav .subnav_btn:hover span{
		color: #fff;
	}

	.topnav ul li > .subnav .subnav_btn:hover span:after{
		transform: scaleX(0);
	}
	.topnav ul li > .subnav .subnav_btn:hover span:before{
		transform: translate(-30px, -50%);
	}


	.topnav ul li > .subnav.outtour,
	.topnav ul li > .subnav.twtour,
	.topnav ul li > .subnav.about{
		display:flex;
		flex-wrap:wrap;
		align-items: flex-start;
		justify-content: center;
	}

	.topnav ul li > .subnav.outtour > li{
		width: calc(100% / 8);
		padding: 0 10px;
		box-sizing: border-box;
	}

	.topnav ul li > .subnav.twtour > li{
		width: calc(100% / 5);
		padding: 0 10px;
		box-sizing: border-box;
	}

	.topnav ul li > .subnav.about > li{
		width: calc(100% / 4);
		padding: 0 10px;
		box-sizing: border-box;
	}

	
	
	

	.topnav ul li > .subnav li{
		display: block;
	}
	.topnav ul li > .subnav li a{
		font-weight: normal;
		text-align: left;
	}

	.topnav ul li > .subnav li a span{
		font-size: 14px;
        letter-spacing: 0px;
        text-align: left;
        display: block;
        color: #9d9d9d;
        font-family: "Cormorant Garamond", serif;
	}

	/*.topnav ul li:hover > .subnav{ display: block; }*/


	.topnav ul li > .subnav li > .thirdnav{
		display: block;
	}

	.topnav ul li > .subnav li > .thirdnav li a{
        display: block;
        padding: 5px;
        text-align: left;
        border-bottom: 1px solid #9d9d9d;
        transition: all .3s;
        box-sizing: border-box;
	}

	.topnav ul li > .subnav.twtour > li a,
	.topnav ul li > .subnav.about > li a{
		transition: all .3s;
	}

	.topnav ul li > .subnav.twtour > li a:hover,
	.topnav ul li > .subnav.about > li a:hover{
		color:#c59d5f;
		background:rgba(197,157,95,.08);
		padding-left:18px;
	}

	.topnav ul li > .subnav li > .thirdnav li a:hover{;
		color:#c59d5f;
		background:rgba(197,157,95,.08);
		padding-left:18px;
	}

	.toplogo.toplogo_RWD{ display: none; }
	.toplogobox{
		width: 100%;
		max-width: 300px;
		text-align: center;
	}


	.topSearch_btn{display: none;}
	


	/* 下滑 */

	.header_2{
		background-color: #fff;
	}
	.header_2 .toplogo > img{
		width: 50px;
		background-color: #2196F3;
	}
	.header_2 .toplogo_txt{
		color: #000;
	}

	.header_2 .topnav ul li a{
		color: #000;
		padding: 20px 10px 20px 12px;
	}

	.header_2 .topnav ul li > .subnav{
		top: 63px;
	}

	.header_2 .topnav ul li .hotnews .ShowImgUrlLink_title{
		padding: 0;
	}

	header.topUTF8{
	 	background-color: #fff;
	 }

	header.topUTF8 .toplogo > img{
		width: 50px;
		background-color: #2196F3;
	}
	header.topUTF8 .toplogo_txt{
		color: #000;
	}

	header.topUTF8 .topnav ul li a{
		color: #000;
	}

		
		



}
@media (max-width: 1029px)
{


	header{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		box-shadow: none;
		background-color: #f5f5f5;
		border-bottom: 1px solid rgb(211 211 211);
	}
	.topnav_btn{
		cursor: pointer;
		position: fixed;
		top: 12px;
		left: 10px;
		z-index: 10000;
		width: 40px;
		height: 35px;
	}

	.topnav_btn .line_btn{
		position: absolute;
		display: inline-block;
		width: 30px;
		height: 5px;
		transition: all .3s;
		background-color: #444444;
		left: 5px;
		border-radius: 5px;
	}
	.topnav_btn .line_btn_top{
		top: 5px;
	}
	.topnav_btn .line_btn_center{
		top: 15px;
	}
	.topnav_btn .line_btn_bottom{
		top: 25px;
	}

	.topnav_close .line_btn_top,
	.topnav_close .line_btn_bottom{
		display: none;
	}

	.topnav_close .line_btn{
		transform: rotate(90deg);
		width: 30px;
	}
	.topnav_close .line_btn_top{
		top: 10px;
	}

	.topnav{
		position: fixed;
		z-index: 9999;
		top: 61px;
		right: -100%;
		width: 100%;
		box-sizing: border-box;
		height: calc(100% - 61px);
		background-color: #fff;
	}

	.topnav_bg{
		width: 100%;
	    height: 100%;
	    opacity: .6;
		background-image: url(/webeip/HT00426/img/topnav_hotnews.png);
	    position: absolute;
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: cover;
	}
	.topnav > ul{
		width: 95%;
		margin: 0.25rem auto;
		height: 95%;
		overflow: auto;
		position: relative;
		z-index: 1;
	}
	.topnav ul li a{
		display: block;
		width: 100%;
		text-align: left;
		color: #000;
		font-size: 1.15rem;
		letter-spacing: 5px;
		padding: 10px 10px 10px 15px;
		box-sizing: border-box;
	}
	.topnav > ul > li > a{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.topnav ul li a span{
		display: inline-block;
		color: #505050;
		/*display: none;*/
	}
	.topnav ul li:last-child > a{ border-bottom: none; }

	.topnav ul li .subnav{
		width: 100%;
		background-color: rgb(255 255 255 / 50%);
		padding: 10px 0;
	}

	.topnav ul li > .subnav .subnav_btn{
		position: relative;
        display: block;
        padding: 5px 15px;
        border: 1px solid #c5b38c;
        color: #b79d67;
        max-width: 120px;
        margin: 0 auto;
	}

	.topnav ul li > .subnav .subnav_btn span{
		margin-bottom: 0;
		font-family: "Cormorant Garamond", serif;
		font-size: 1.15rem;
		letter-spacing: 1px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-style: italic;
	}
	.topnav ul li > .subnav .subnav_btn span:after{
		content: "";
		display: block;
		height: 1px;
		margin-left: 12px;
		transform-origin: left;
		transition: .4s ease-in-out;
		width: 15px;
		background: #b79d67;
	}

	.topnav ul li .subnav li a{
		max-width: 100%;
		border-bottom: 1px solid rgb(255 255 255 / 50%);
	}
	.topnav ul li .subnav li a span{
		color: #9d9d9d;
        font-size: 14px;
	}

	.topnav ul li .subnav li .thirdnav{
		width: 95%;
		margin: 0 auto;
        background-color: rgba(0, 0, 0, 0.3);
	}

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


	.topwrap_main{
		
	}

	.toplogo.toplogo_RWD{
		display: inline-flex;
		margin: 5px;
		padding-right: 40px;
	}

	.toplogobox{ display: none; }

	.toplogo > img{
		width: 50px;
		background-color: #2196F3;
	}
	.toplogo_txt{
		color: #000;
	}

	.hotnews .ShowImgUrlLink_main{
		margin: 0 auto;
		padding: 0;
	}

	.hotnews .ShowImgUrlLink_box{
		width: 95%;
		margin: 20px auto;
	}

	.hotnews .ShowImgUrlLink_img{
		border-radius: 10px;
	}
	.hotnews .ShowImgUrlLink_img > div{
		height: auto;
	}

	.toplink ul{
		bottom: 50px;
	}
	.toplink ul li a{
		padding: 0.5rem;
		font-size: 1.5rem;
	}


	.topSearch_btn{
		position: relative;
        display: block;
        padding: 5px 15px;
        color: #b79d67;
        max-width: 120px;
        position: absolute;
        right: 0;

	}

	.topSearch_btn span{
		margin-bottom: 0;
		font-family: "Cormorant Garamond", serif;
		font-size: 1.15rem;
		letter-spacing: 1px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-style: italic;
	}
	.topSearch_btn span:after{
		content: "";
		display: block;
		height: 1px;
		margin-left: 12px;
		transform-origin: left;
		transition: .4s ease-in-out;
		width: 15px;
		background: #b79d67;
	}


	
}
@media all and (max-width: 425px){

	.toplink ul li a{
		padding: 0.5rem;
		font-size: 1.25rem;
	}

	.topnav_btn{ top: 10px; }


}

/* 表尾 under */
	footer{
		width: 100%;
		position: relative;
		background-color: #222;
		color: #fff;
    	box-sizing: border-box;
	}
	.under_wrap{
		width: 100%;
		margin: 0 auto;
		text-align: center;
		padding-top: 60px;
		padding-bottom: 20px;
		border-bottom: 1px solid #515151;
	}

	.underlogo{
		display: inline-block;
		position: relative;
		transition: all .3s;
		text-align: center;
	}
	.underlogo > img{
		width: 80px;
		vertical-align: top;
		transition: all .3s;
		box-sizing: border-box;
		border: 2px solid #fff;
		border-radius: 50%;
		margin-bottom: 10px;
		padding: 5px;

	}
	.underlogo_txt{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}
	.underlogo_txt_cn{
		font-size: 1.75rem;
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		font-weight: normal;
		font-family: "Noto Serif TC", serif;
	}
	.underlogo_txt_en{
		font-size: 1.5rem;
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		font-family: 'Playfair Display', serif;
	}

	.underbox{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.underbox p{
		letter-spacing: 2px;
		padding-left: 2px;
		box-sizing: border-box;
		margin-bottom: 5px;
		font-size: 0.95rem;
		font-family: "Noto Serif TC", serif;
	}
	.underbox p span{
		display: inline-block;
		margin-left: 10px;
		color: #9E9E9E;
	}

	.underboxL{
		width: 100%;
		padding: 20px 0;
		border-bottom: 1px solid #515151;
		box-sizing: border-box;
	}

	.underboxL ul{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
    }

	.underboxL ul li{
		display: inline-block;
		margin: 0 10px;
	}
	.underboxL ul li a{
		display: block;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		color: #fff;
		transition: all .5s;
		font-family: "Noto Serif TC", serif;
		letter-spacing: 5px;
		font-size: 1.15rem;
		text-align: center;
	}

	.underboxL ul li:hover a{
		color: #b79d67;
	}

	.underbox_bottom{
		width: 100%;
		padding: 20px 0;
		box-sizing: border-box;
		border-bottom: 1px solid #515151;
	}

	.underbox_bottombox{
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.underbox_bottomL span{
		font-family: "Noto Serif TC", serif;
		display: inline-block;
		font-size: 0.9rem;
		margin: 2px;
		color: #bdbdbd;
	}


	.underlink{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
	}
	.underlink ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
	}
	.underlink ul li a{
		display: block;
		padding: 0.35rem;
		box-sizing: border-box;
		font-size: 1.15rem;
		margin: 0.25rem;
		transition: all .3s;
		background-color: #222222;
		color: #ffffff;
	}
	.underlink ul li:hover a{
		color: #A8A8A8;
	}

	
	.fectechs{
		width: 100%;
		padding: 20PX 0;
		text-align: right;
		background-color: #3b3b3b;
	}
	.fectechs p{
		max-width: 1280px;
		margin: 0 auto;
		color: #656565;
		font-size: 0.9rem;
		padding: 0 5px;
		box-sizing: border-box;
	}

	.underbottom_box ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}
	.underbottom_box ul li {
		display: inline-block;
	}
	.underbottom_box ul li a{
		display: block;
	    width: 100%;
	    padding: 0 10px;
	    box-sizing: border-box;
	    color: #fff;
	    transition: all .5s;
	    font-family: "Noto Serif TC", serif;
	    border-right: 1px solid #757575;
	}
	.underbottom_box ul li:hover a{
		color: #A8A8A8;
	}
	.underbottom_box ul li:last-child a{
		border-right: none;
	}

@media all and (max-width: 830px){
	.underboxL ul li{
		width: calc(90% / 3);
		margin: 0 calc(10% / 6);
	}

	.underbox_bottombox{
		justify-content: center;
	}
	


}
@media all and (max-width: 450px){

	.underboxL ul li a{
		font-size: 1rem;
		padding: 5px;
	}

}
/* 隱私權政策 */
	.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;
	}