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

/* 以下是 圖示文字 的 CSS */
@import url('/webeip/HT00100/peggy/fonticons/css/style.css');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aleo:wght@500&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(0 0 0 / 20%);
		background-color: #fff;
	}
	.topwrap_main{
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.toplogo{
		display: inline-flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin: 5px;
		transition: all .5s;
	}
	.toplogo > span{
		margin-left: 5px;
		display: block;
		font-size: 1.5rem;
		color: #000;
		letter-spacing: 2.5px;
		padding-left: 2.5px;
		box-sizing: border-box;
		font-weight: normal;
	}
	.toplogo > img{
		vertical-align: top;
		width: 40px;
		transition: all .5s;
		background-color: #2196F3;
		padding: 3px;
		box-sizing: border-box;
		border-radius: 5px;
	}
/* 漢堡選單 */
	.topnav_btn{
		cursor: pointer;
		position: fixed;
		top: 22px;
		right: 10px;
		z-index: 10000;
		width: 80px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.topnav_btn .line_btn_txt{
		display: inline-block;
		margin-right: 5px;
		color: #b79d67;
		font-family: "Noto Serif TC", serif;
	}


	.topnav_btn .line_btnBox{
		width: 20px;
	    height: 10px;
	    position: relative;
	}

	.topnav_btn .line_btn{
		display: inline-block;
		width: 100%;
		height: 2px;
		transition: all .5s;
		background-color: #b79d67;
		position: absolute;
	}
	.topnav_btn .line_btn_top{
		top: 0;
	}

	.topnav_btn .line_btn_bottom{
		top: 10px;
	}

	.topnav_close .line_btnBox{
		height: 20px;
	}


	.topnav_close .line_btn_top{
		transform: rotate(45deg);
		top: 10px;
	}
	.topnav_close .line_btn_bottom{
		height: 2px;
		transform: rotate(135deg);
		top: 10px;
	}
/* topnav2 */
	.topnav2 {
		position: fixed;
		z-index: 9999;
		top: -100%;
		right: 0;
		width: 100%;
		box-sizing: border-box;
		height: 60%;
		background-color: #fff;
	}
	.topnav2 > ul{
		width: 95%;
		margin: 0.25rem auto;
		height: 95%;
		overflow: auto;
		display: flex;
		justify-content: center;
		align-items: stretch;
		padding-top: 70px;
		padding-bottom: 70px;
    	box-sizing: border-box;
	}

	.topnav2 ul li{
		display: flex;
	}

	.topnav2 ul li a{
		display: inline-block;
		font-family: "Noto Serif TC", serif;
		transition: all .5s;

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

	.topnav2 > ul > li > a{
		display: inline-block;
		padding: 0 10px;
		box-sizing: border-box;
		font-size: 1.25rem;
		letter-spacing: 10px;
		border-left: 1px solid #d7d7d7;
    	margin-right: 30px;
    	writing-mode: vertical-lr;
    	color: #000;
	}
	.topnav2 > ul > li > a > span{
		font-family: "Noto Serif TC", serif;
	    font-size: 0.8rem;
	    color: #c2c2c2;
	    letter-spacing: 2px;
	    margin-top: 10px;
	    display: inline-block;
	}
	.topnav2 > ul > li > ul li{
		align-items: flex-start;
    	justify-content: flex-start;
	}
	.topnav2 > ul > li > ul li:last-child{
		padding-right: 40px;
		box-sizing: border-box;
	}
	.topnav2 > ul > li > ul li a{
		display: inline-block;
		color: #666;
		padding: 0 5px;
    	box-sizing: border-box;
    	writing-mode: vertical-lr;
    	letter-spacing: 10px;
	}
	
	/* 預設收合 
	.topnav2 > ul > li > ul{
	    display: none;
	}*/

	.topnav2 > ul > li > .subnav2{
		display: flex;              /* 保持 flex */
		width: 0;
		overflow: hidden;
		/*opacity: 0;*/
		transition: all 1s;
		align-items: flex-start;
	}

	/* 展開 */
	.topnav2 > ul > li.open > .subnav2{
		width: auto;
	    /*opacity: 1;*/

	}




/* 社群小圖示 */
	.toplink ul{
		position: fixed;
		z-index: 999;
		bottom: 4rem;
		right: 0;
	}
	.toplink ul li a{
		display: block;
		padding: 0.5rem;
		box-sizing: border-box;
		font-size: 1.5rem;
		margin: 0.75rem 0.5rem;
		border-radius: 50%;
		transition: all .3s;
		transform: scale(1);
		background-color: transparent;
		color: #fff;
	    border: 2px solid transparent;
	    border-left: 2px solid #fff;
	    border-top: 2px solid #fff;
	}
	.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; }

	
@media (min-width: 980px)
{
	.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;
		
	}
	.topnav > ul{
		padding-right: 100px;
		box-sizing: border-box;	
	}
	.topnav ul li{ position: relative; }

	.topnav ul li a{
		display: block;
		text-align: center;
		padding: 20px 10px 20px 12px;
		box-sizing: border-box;
		font-size: 1.1rem;
		position: relative;
		cursor: pointer;
		color: #000;
		letter-spacing: 2px;
		transition: all .5s;
		font-family: "Noto Serif TC", serif;
	}
	.topnav > ul > li:hover > a{
		color: #b79d67;
	}


	.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{
		font-weight: normal;
	}

	.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;
		display: none;
	}



}
@media (max-width: 979px)
{
	.topnav_btn{
		top: 11px;
	}

	header{
		position: fixed;
		z-index: 9999;
		top: 0;
		left: 0;
		box-shadow: none;
		background-color: #f5f5f5;
	}
	.topwrap_main{ box-shadow: 0 0 5px rgb(0 0 0 / 20%); }
	
	.topnav ul{ display: none; }

	/*.topnav{
		position: fixed;
		z-index: 9999;
		top: 49px;
		right: -100%;
		width: 70%;
		box-sizing: border-box;
		height: calc(100% - 49px);
		background-color: #fff;
	}
	.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: left;
		color: #000;
		font-size: 1.15rem;
		letter-spacing: 5px;
		padding: 10px 10px 10px 15px;
		box-sizing: border-box;
	}
	.topnav ul li a span{
		display: inline-block;
		margin-right: 5px;
		display: none;
	}
	.topnav ul li:last-child > a{ border-bottom: none; }

	.topnav ul li .subnav{
		width: 90%;
		background-color: rgba(0,0,0,0.2);
		border-radius: 10px;
		margin: 0.25rem auto 20px;
	}
	.topnav ul li .subnav li a{
		max-width: 90%;
		background-color: transparent;
		border-bottom: 1px solid rgb(255 255 255 / 50%);
		border-radius: 0;
	}
	.topnav ul li .subnav li .thirdnav{
		width: 95%;
		background-color: rgba(0,0,0,0.5);
	}

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

	.toplink ul li a{
		background-color: rgba(0,0,0,30%);
		border: none;
	}*/

	
}
@media (max-width: 845px)
{
	.topnav2{ height: 100%; }
	.topnav2 > ul{
		display: block;
	}
	.topnav2 ul li{
		width: 100%;
		flex-wrap: wrap;
	}
	.topnav2 > ul > li > a{
		writing-mode: horizontal-tb;
		width: 100%;
		border-left: none;
		border-bottom: 1px solid #d7d7d7;
		margin-right: 0;
	}
	.topnav2 > ul > li > .subnav2{
		width: 95%;
        margin: 0 auto;
		flex-wrap: wrap;
	}
	.topnav2 > ul > li.open > .subnav2{
		width: 95%;
        margin: 0 auto;
	}
	.topnav2 > ul > li > ul li a{
		display: block;
		writing-mode: horizontal-tb;
		width: 100%;
		padding: 5px 0;
	}
	.topnav2 > ul > li > ul li:last-child{
		padding-right: 0;
	}
}
@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;
		padding-top: 80px;
		background-color: #222;
		color: #fff;
		padding-left: 5px;
    	padding-right: 5px;
    	box-sizing: border-box;
		padding-bottom: 20px;
	}
	.under_wrap{
		width: 95%;
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.under_main{
		width: 100%;
		box-sizing: border-box;
		position: relative;
		transition: all .5s;
		padding: 0 5px;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.underbox{
		
	}


	.underboxL_bottom{
		margin-top: 80px;
	}
	.underboxL_bottom > p{
		display: block;
		margin-bottom: 5px;
		box-sizing: border-box;
		letter-spacing: 2px;
		font-size: 0.95rem;
		color: #9e9e9e;
	}


    .underboxL ul{

		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;
    }

	.underboxL ul li{
		display: inline-block;
		margin-right: 20px;
	}
	.underboxL 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;
		writing-mode: vertical-rl;
		border-left: 1px solid #757575;

	}

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

	.underboxL ul li a span{
		display: inline-block;
		font-family: "Noto Serif TC", serif;
		letter-spacing: 5px;
		padding-top: 5px;
		box-sizing: border-box;
	}

	.underboxL ul li a span:nth-child(2){
		font-size: 0.8rem;
		color: #757575;
	}

	.under_mainR{ text-align: right; }

	.underboxR{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-end;
		flex-direction: column;
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.underboxR p{
		letter-spacing: 2px;
		padding-left: 2px;
		box-sizing: border-box;
		margin-bottom: 5px;
		font-size: 0.95rem;
	}
	.underboxR p span{
		display: inline-block;
		margin-left: 10px;
		color: #9E9E9E;
	}

	.underlogo{
		width: auto;
		display: inline-flex;
		justify-content: flex-start;
		align-items: center;
		margin: 0 auto;
		position: relative;
		transition: all .3s;
	}
	.underlogo > img{
		width: 50px;
		vertical-align: top;
		transition: all .3s;
		padding: 5px;
		box-sizing: border-box;
		border: 2px solid #fff;
		border-radius: 15px;
		margin-right: 5px;
	}
	.underlogo_txt{
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}
	.underlogo_txt_cn{
		font-size: 1.5rem;
		letter-spacing: 2.5px;
		padding-left: 2.5px;
		box-sizing: border-box;
		font-weight: normal;
	}
	.underlogo_txt_en{
		font-size: 12px;
		letter-spacing: 5px;
		padding-left: 5px;
		box-sizing: border-box;
		font-family: 'Playfair Display', serif;
	}

	.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;
		margin-bottom: 10px;
	}
	.underlink ul li a{
		display: block;
		padding: 0.5rem;
		box-sizing: border-box;
		font-size: 1.05rem;
		margin: 0.25rem;
		border-radius: 50%;
		transition: all .3s;
		background-color: #222222;
		color: #ffffff;
		border: 1px solid #9e9e9e;
	}
	.underlink ul li:hover a{
		color: #A8A8A8;
	}

	.underbottom_main{
		width: 95%;
		max-width: 1280px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.underbottom_box p{
		letter-spacing: 2px;
		padding-left: 2px;
		box-sizing: border-box;
		margin-bottom: 5px;
	}
	.underbottom_box p span{
		display: inline-block;
		margin-right: 10px;
	}
	
	.fectechs{
	    color: #656565;
	    font-size: 0.9rem;
	}

	.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: 768px){
	
	footer{
		padding-top: 20px;
	}
	.under_mainL{ display: none; }
	.under_mainR{ text-align: left; }
	.underboxR{
		align-items: flex-start;
	}
	.underlink{
		justify-content: flex-start;
	}
	.underbottom_box ul{
		margin-bottom: 20px;
	}
	.underbottom_box ul li{
		width: 48%;
		margin: 5px 1%;
	}
	.underbottom_box ul li a{
		padding: 5px;
		border-right: none;
		background-color: #b79d67;
		text-align: center;
	}
	.underbottom_main{
		flex-direction: column-reverse;
		padding-bottom: 0;
		align-items: center;
	}


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

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