@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hubot+Sans:wdth,wght@103.6,800&display=swap');
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
	list-style-type:none;
	}
a,img {
	outline: none;/* for Firefox */
    hlbr:expression(this.onFocus=this.blur()); /* for IE */	
	}
input,textarea{outline:none;} /*消除chrome黃色框*/
textarea{resize:none;} /*不要縮放*/	
img, div {border:0px;}
a:link {
	color: #ffc000;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
	color:#ffc000;
}
a:hover{
	text-decoration: none;
	color: #ff9000;
}
a:active {
	text-decoration: none;
	color: #ffc000;
}
html{font-size:75%;}
body{
	font-size:1rem;
	word-wrap:break-word;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	/**/
	-webkit-text-size-adjust:100%;
	/**/
	background-color:#0e0e0d;/*181615*/
	}
*{	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	}
.tas{
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
/**/
html {
  scrollbar-color:#ffc000 #0e0e0d;
  scrollbar-width: thin;
}
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
  width:10px; /*右側捲軸寬度*/
  height:10px; /*下方捲軸高度*/
	}
/* 軌道背景底色 */
::-webkit-scrollbar-track {
  background:#0e0e0d; 
	} 
/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
  background:#ffc000; 
	}
/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
  	background:#ffc000;
	}
/* 捲軸兩側頂端的按鈕 */
::-webkit-scrollbar-button {
  background-color:#0e0e0d; 
	}
/* 捲軸兩側頂端的按鈕滑鼠滑入時的顏色 */
::-webkit-scrollbar-button:hover {
  	background-color:#0e0e0d; 
	}

/**/
body.on{overflow:hidden;}
.rellax{transition-duration: 0.5s;}
.allbx{
	position:relative;
	width:100%;
	overflow:hidden;
	}
.con{
	position:relative;
	width:1540px;
	margin:0 auto;
	}
/**/
#htbx{
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index:3;
	}
.logo{
	position:absolute;
	width:82px;/*82 4.27%*/
	padding-bottom:95px;/*95 4.946%*/
	display:inline-block;
	cursor:pointer;
	/*background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/fafu_h.png);*/
	/**/
	mask-image: url(../images/fafu_h.png);
	mask-repeat: no-repeat;
	mask-position:50% 50%;
	mask-size: 0% auto;
	-webkit-mask-image: url(../images/fafu_h.png);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position:50% 50%;
	-webkit-mask-size:100% auto;
	/**/
	top:48px;/*48*/
	left:9.59vw;/*158 8.22 7.9 5.9%*/
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	/**/
	background-color:rgba(255,192,0,1);
	-webkit-filter:brightness(1)hue-rotate(0deg);
	filter:brightness(1)hue-rotate(0deg);/**/
	-webkit-backdrop-filter:invert(0%);
	backdrop-filter:invert(0%);
	}
#htbx.on .logo,#htbx.on.od .logo{
	/**/
	background-color:rgba(255,192,0,1);
	-webkit-filter:brightness(1)hue-rotate(0deg);
	filter:brightness(1)hue-rotate(0deg);/**/
	-webkit-backdrop-filter:invert(0%);
	backdrop-filter:invert(0%);
	}
#htbx.od .logo{
	background-color:rgba(255,192,0,0);
	-webkit-filter:brightness(1.3)hue-rotate(180deg);
	filter:brightness(1.3)hue-rotate(180deg);/**/
	-webkit-backdrop-filter:invert(80%);
	backdrop-filter:invert(80%);
	}
	
	
/*.logo::before{
	position:absolute;
	width:100%;
	height:100%;
	content:"";
	display:block;
	top:0;
	left:0;
	
	background-color:rgba(255,192,0,0);
	}*/
.mcbx{
	position:absolute;
	width:40px;
	padding-bottom:95px;
	top:48px;
	right:7.9%;
	}		
.mubx{
	position:absolute;
	width:40px;/*30*/
	padding-bottom:40px;
	cursor:pointer;
	top:50%;/*80 79px*/
	right:0;/*158 8.22 7.9%*/
	transform:translateY(-50%);
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.mubx::before{
	 position:absolute;
	 display:inline-block;
	 content:"";/*menu*/
	 top:48%;
	 right:115%;
 	 transform:translateY(-50%);
	 /*transition-duration: 0.35s;*/
	 /**/
	 font-size:12px;
	 color:#fff;
	 opacity:.5;
	}
.mubx.on::before{ content:"";/*close*/}
	
.mubx > li{
 position:absolute;
 width:100%;
 padding-bottom:10.66%;/*6.66*/
 background-color:#fff;
 left:0%;
 transform:translateY(-50%);
 /**/
 transition: all .35s;
 -moz-transition: all .35s;
 -webkit-transition: all .35s;
 -o-transition: all .35s;
 }
.mubx > li::before{
	position:absolute;
	width:0;
	height:100%;
	content: "";
	display:block;
	left:auto;
	right:0;
	top:0;
	background-color:#ffc000;
	/**/
	transition: all .3s;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	 }
.mubx:hover > li::before{
	width:100%;
	right:auto;
	left:0;
	}
.mubx > li:nth-child(2){top:50%;}
.mubx > li:first-child {top:22%;/*30*/}
.mubx > li:last-child {top:78%;/*70*/}
.mubx.on > li:nth-child(2){opacity:0;}
.mubx.on > li:first-child {
 	transform:rotate(-45deg);
	top:50%;
 }
.mubx.on > li:last-child {
	transform:rotate(45deg);
	top:50%;
  }
.menu{
	position:absolute;
	width:100%;
	height:100vh;
	height:calc(var(--vh, 1vh) * 100);
	top:-100vh;
	right:0;
	background-color:#0e0e0d;/*181615*/
	overflow:hidden;
	/**/
	transition: all .36s ease;
	-moz-transition: all .36s ease;
	-webkit-transition: all .36s ease;
	-o-transition: all .36s ease;
	}
.menu::before,.menu::after{
	position:relative;
	width:100%;
	padding-bottom:0;
	content: "";
	display:block;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
.menu > ul{
	position:absolute;
	width:87%;
	margin:0 auto;
	font-size:7rem;/*50*/
	line-height:7rem;/*70 11*/
	font-weight: bold;
	color: #FFF;
	text-align:center;
	/**/
	opacity:0;
	pointer-events:none; 
	/*
	text-transform:uppercase;*/
	}
.menu > ul > li{
	position:relative;
	/*width:25%;100*/
	min-height:65vh;
	display:inline-block;
	text-align:center;
	padding:1.5% 1.8vw;/*20*/
	overflow:hidden;
	/**/
	transition: all .5s;
	}
.showcase a{cursor:pointer;}
.menu > ul > li > .m1bx{
	position:relative;
	width:100%;
	display:block;
	overflow:hidden;
	}
.menu > ul > li > .m1bx > a{
	position:relative;
	display:inline-block;
	color:#fff;
	opacity:0;
	/**/
	transition: top .5s .5s ease,opacity .3s;
	top:160px;
	bottom:auto;
	}
#htbx.on.oa .menu > ul{
	position:relative;
	opacity:1;
	pointer-events:auto;
	}

	
#htbx.on.oa .menu > ul > li > .m1bx > a{
	top:0;
	opacity:1;
	}
.menu > ul > li > .m1bx > a::before{
	position:absolute;
	width:0%;
	height:6px;/*5.5%*/
	background-color:#FFF;
	content:"";
	/**/
	transition: width .5s ease;
	-moz-transition: width .5s ease;
	-webkit-transition: width .5s ease;
	-o-transition: width .5s ease;
	/**/
	left:auto;
	right:2%;
	bottom:0;
	}	
.menu > ul > li > .m1bx > a:hover::before{
	width:96%;
	right:auto;
	left:2%;
	}
.menu > ul > li.on > .m1bx > a{color:#ffc000;}
.menu > ul > li.on > .m1bx > a::before{background-color:#ffc000;}

/*2*/
.back_bx{
	position:absolute;
	width:87%;
	margin:0 auto;
	font-size:1.8rem;/*7*/
	line-height:3.5rem;/*7*/
	color: #FFF;
	text-align:center;
	overflow:hidden;
	/*top:50px;*/
	/**/
	opacity:0;
	pointer-events:none;
	}
.back_bx span{
	position:relative;
	display:inline-block;
	cursor:pointer;
	top:-50px;
	transition: all .5s;
	}
#htbx.on.ob .back_bx{
	position:relative;
	opacity:1;
	pointer-events:auto;
	}
.back_bx span::before{
	position:relative;
	width:40px;
	padding-bottom:28px;
	content:"";
	display:inline-block;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image:url(../images/back.png);
	background-size:100% auto;
	overflow:hidden;
	margin-right:8px;
	}
	
	
#htbx.on.ob .back_bx span{top:0;}
	
.mu2 > ul{
	position:absolute;
	width:87%;
	margin:0 auto;
	font-size:3.8rem;/*7 6*/
	line-height:5rem;/*7 6.5*/
	font-weight:bold;/*bold*/
	color: #FFF;
	padding:1.5vw 0;
	/**/
	opacity:0;
	pointer-events:none; 
	}
.mu2 > ul > li{
	position:relative;
	width:100%;
	text-align:center;
	padding:1.2% 0;
	overflow:hidden;
	/**/
	transition: all .5s;
	}
.mu2 > ul > li > a{
	position:relative;
	display:inline-block;
	color:#fff;
	opacity:0;
	/**/
	transition: top .8s .3s ease,opacity .3s;
	top:-160px;
	bottom:auto;
	}
#htbx.on .mu2 > ul{/*#htbx.on.ob*/
	position:relative;
	opacity:1;
	pointer-events:auto;
	}
#htbx.on .mu2 > ul > li > a{/*#htbx.on.ob*/
	top:0;
	opacity:1;
	}
.mu2 > ul > li > a::before{
	position:absolute;
	width:0%;
	height:4px;/*5.5%*/
	background-color:#FFF;
	content:"";
	/**/
	transition: width .5s ease;
	-moz-transition: width .5s ease;
	-webkit-transition: width .5s ease;
	-o-transition: width .5s ease;
	/**/
	left:auto;
	right:2%;
	bottom:0;
	}	
.mu2 > ul > li > a:hover::before{
	width:96%;
	right:auto;
	left:2%;
	}	
	
			

/**/	
#htbx.on .menu{
	top:100%;
	overflow:auto;
	}
#htbx.on .menu::before{padding-bottom:9%;}
#htbx.on .menu::after{padding-bottom:3%;}	
#htbx.on .logo,#htbx.od .logo{top:30px;}
#htbx.on .mcbx,#htbx.od .mcbx{top:61px;}
body#home .menu > ul > li.home{ display:none;}	
	
/*版宣*/
#footerbx{
	position:relative;
	display:block;
	}
footer{
	position:relative;
	height:280px;
	font-family:Arial,'Noto Sans TC','微軟正黑體',sans-serif;
	font-size:1.25rem;/*15*/
	line-height:2.5rem;/*30*/
	color:#fff;
	background-color:#0e0e0d;/*181615*/
	overflow:hidden;
	text-align:center;
	/**/
    display: flex;
    justify-content: center;
    align-items: center;
	}
.cybx{
	position:relative;
	display:block;
	text-align:center;
	}
.cybx > p{/*.cybx::before*/
	position:relative;
	width:4.15%;/*64*/
	padding-bottom:4.798%;/*74*/
	content: "";
	display:inline-block;
	cursor:pointer;
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image:url(../images/fafu_d.png);
	margin-right:1.68%;/*26*/
	}

.cybx a{
	position:relative;
	width:2.59%;/*40 2.59%*/
	padding-bottom:2.59%;
	display:inline-block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	}
.cybx a::before{
	position:absolute;
	width:100%;
	height:100%;
	content: "";
	display:block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	/**/
	top:0;
	left:0;
	opacity:0;
	/**/
	transition: all .5s;
	}
.cybx a:hover::before{opacity:1;}
.bt_fb{background-image:url(../images/bt_fb.png);}
.bt_fb::before{background-image:url(../images/bt_fb_h.png);}
.bt_in{
	background-image:url(../images/bt_in.png);
	margin:0 .84%;/*13*/
	}
.bt_in::before{background-image:url(../images/bt_in_h.png);}
.bt_yt{background-image:url(../images/bt_yt.png);}	
.bt_yt::before{background-image:url(../images/bt_yt_h.png);}		

@media only screen and (max-width:1540px){
/**/
.con{width:100%;}
.logo{top:2.6vw;/*48*/left:5.9%;}
.mcbx{top:2.6vw;/*75*/}
.menu > ul{
	font-size:4.85vw;/*84 5.45*/
	line-height:5.45vw;/*132 8.57*/
	}
.menu > ul > li{padding:1.5% 1.5vw;}
	
.mu2 > ul{
	font-size:2.9vw;/*84 4.45 45.6*/
	line-height:3.89vw;/*132 8.57 5.45 60*/
	}
	
#htbx.on .menu::before{padding-bottom:10%;}
#htbx.on .logo,#htbx.od .logo{top:1.9vw;}
#htbx.on .mcbx,#htbx.od .mcbx{top:1.9vw;}	
	
/*版宣*/
footer{
	height:18.18vw;/*280*/
	font-size:.974vw;/*15*/
	line-height:1.948vw;/*30*/
	}
	
}
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1200px){
/**/

}
@media only screen and (max-width:1000px){	
/**/
.menu > ul{
	font-size:5.1vw;/*84 8*/
	line-height:8vw;/*132 8.57*/
	}
.menu > ul > li{padding:2.5% 1vw;}	
.mu2 > ul{
	font-size:3.8vw;/*84 7  45.6 */
	line-height:5vw;/*132 8.57 60*/
	}

.mu2 > ul > li{padding: 2.5% 0;}
#htbx.on .menu::before{padding-bottom:15%;}
/*版宣*/
footer{
	height:28vw;/*280*/
	font-size:1.5vw;/*15*/
	line-height:3vw;/*30*/
	}
.cybx > p{/*.cybx::before*/
	width:6.4%;/*64*/
	padding-bottom:7.4%;/*74*/
	margin-right:2.6%;/*26*/
	}
.cybx a{
	width:4%;/*40*/
	padding-bottom:4%;
	}
.bt_in{margin:0 1.3%;/*13*/}	
	
	
}
@media only screen and (max-width:800px){
/**/

}	
@media only screen and (max-width:780px){
/**/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
  width:3px; /*右側捲軸寬度*/
  height:3px; /*下方捲軸高度*/
	}
/**/
.logo{
	width:70px;/*82*/
	padding-bottom:81px;/*95*/
	top:39px;/*48 5vw*/
	left:6%;
	}
.mcbx{
	width:35px;
	padding-bottom:81px;
	top:39px;
	right:6%;
	}
.mubx{
	width:35px;/*30*/
	padding-bottom:35px;
	/*top:64px;75 8.2vw*/
	/*right:6%;*/
	}
.menu > ul{
	font-size:12.5vw;/*84 9.5*/
	line-height:12.5vw;/*132 10vw 9.5*/
	}
.menu > ul > li{
	width:100%;
	min-height:inherit;
	padding:1% 0;/*3.5% 0*/
	}
.menu > ul > li > .m1bx{padding:2.5% 0;}
.mu2 > ul{
	font-size:5.8vw;/*84 9.5 45.6*/
	line-height:7.6vw;/*132 10vw 9.5 60*/
	padding: 2.5vw 0;
	}
.mu2 > ul > li{padding:2% 0;}
.menu > ul > li > .m1bx > a::before,.mu2 > ul > li > a::before{height:7.5%;}
	
#htbx.on .menu::before{padding-bottom:18%;}
#htbx.on .menu::after{padding-bottom:15%;}

#htbx.on .logo,#htbx.od .logo{top:30px;}/*30 3.8vw*/
#htbx.on .mcbx,#htbx.od .mcbx{top:30px;}/*57 7.3vw*/
	
	
/*版宣*/
footer{
	height:35.8vw;/*280*/
	font-size:1.92vw;/*15*/
	line-height:3.84vw;/*30*/
	}
.cybx > p{/*.cybx::before*/
	width:8.2%;/*64*/
	padding-bottom:9.48%;/*74*/
	margin-right:3.3%;/*26*/
	}
.cybx a{
	width:6.5%;/*40*/
	padding-bottom:6.5%;
	}
.bt_in{margin:0 1.6%;/*13*/}	
	
}

@media only screen and (max-width:685px){ 
/**/

}
@media only screen and (max-width:580px){
/**/	
}
@media only screen and (max-width:560px){
/**/

}
@media only screen and (max-width:470px){
/**/
.logo{
	width:65px;/*82*/
	padding-bottom:75px;/*95*/
	}
.mcbx{
	width:32px;
	padding-bottom:75px;
	}
.mubx{
	width:32px;/*30*/
	padding-bottom:32px;
	/**/
	/*top:63px;10.3vw*/
	}
#htbx.on .menu::before{padding-bottom:28%;}
.mu2 > ul > li{padding:3% 0;}
.menu > ul > li{padding:0 0;}
.menu > ul > li > .m1bx{padding:3.5% 0;}

.menu > ul > li > .m1bx > a::before{height:3px;/*8.5%*/bottom:-3px;}
.mu2 > ul > li > a::before{height:2px;/*8.5%*/bottom:-2px;}
#htbx.on .logo,#htbx.od .logo{top:18px;}/*18 3.8vw*/
#htbx.on .mcbx,#htbx.od .mcbx{top:18px;}/*35 7.3vw*/	
/*版宣*/
footer{
	height:59vw;/*280*/
	font-size:3.19vw;/*15*/
	line-height:6.38vw;/*30*/
	}
.cybx{ margin-bottom:1vw;}
.cybx > p{/*.cybx::before*/
	width:13.6%;/*64*/
	padding-bottom:15.725%;/*74*/
	margin-right:5.53%;/*26*/
	}
.cybx a{
	width:10%;/*40 8.5*/
	padding-bottom:10%;
	}
.bt_in{margin:0 2.76%;/*13*/}

	
}

@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/

}
@media only screen and (max-width:340px){
/**/

}