@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&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: #ffae00;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
	color:#ff8400;
}
a:hover{
	text-decoration: none;
	color: #ff9000;
}
a:active {
	text-decoration: none;
	color: #ff8400;
}
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:#000;
	}
*{	
	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;
	}
	
/**/
body,a,bg{}
/*body{overflow:hidden;}*/
.logo{
	position:fixed;
	width:13.9%;/*278*/
	z-index:3;
	left:.5vw;/*10*/
	top:.5vw;/*10*/
	/**/
	transition: all .5s;
	}
.logo::before{
	position: relative;
	width:100%;/*278*/
	padding-bottom:43.165%;/*120*/
	content:"";
	display: block;
	/**/
	background-attachment: scroll;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-image:url(../images/logo.png);
	background-size:100% auto;
	/**/
	transition: all .5s;
	}
.logo.on{width:10.5%;/*210*/}
/*版宣*/
footer{
	position:relative;
	padding:5rem 0;/*3vw 60*/
	font-family:Arial,'微軟正黑體',sans-serif;
	font-size:1rem;
	line-height:1.5rem;
	color:#fff;
	background-color:#000;
	overflow:hidden;
	text-align:center;
	/**/
    display: flex;
    justify-content: center;
    align-items: center;
	/**/
	transition: all .5s;
	}	
footer .cybx{
	position:relative;
	display:block;
	font-size:1rem;
	color:#FFF;
	text-align:left;
	margin:0 auto;
	/**/
	transition: all .5s;
	}
footer .cybx  span{
	position:relative;
	display:inline-block;
	margin:0 .25rem;
	padding:0 56px 0 0;
	}
footer .cybx  span > p{
	display:block;
	padding-bottom:.25rem;
	}
footer .cybx img{
	display:block;
	/**/
	transition: all .5s;
	}
footer .gf2{position:relative;height:45px;margin:0 10px 0 0;}
footer .gr15{
	position:absolute;
	width:46px;/*58*/
	right:0;
	}
footer .cybx > div{
     position:relative;
	 /**/
      display:flex;
      justify-content: center;
      align-items: center;
	}
/**/
.spg{
	position:fixed;
	width:100%;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	background-color:rgba(25,24,23,1);
	z-index:100;
	display:none;/**/
	}
	
.mbbx{
	position: relative;
	width: 250px;
	/*height:300px;*/
	left: 50%;
	margin-left: -125px;
	top: 50%;
	margin-top: -90px;
	text-align: center;
	font-size: 1.2rem;
	color: #d9e6e8;
	font-weight:300;
	}
.mb{
	position:relative;
	width:30%;/*134*/
	padding-bottom:48.78%;/*218px 162.6*/
	display:block;
	background-attachment:scroll;	
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:100% auto;
	background-image: url(../images/mbbx.png);
	margin:0 auto 10px;
	animation:rotateAS 1.5s ease infinite alternate;
	}
@keyframes rotateAS{
        0%{transform: rotate(-90deg);}
        30%{transform: rotate(-90deg);}
        70%{transform: rotate(0);}
        100%{transform: rotate(0);}
    }
/**/
.loadbx{
	position:absolute;
	width:100%;
	height:100%;
	display:block;
	background-color:#101217;
	z-index:30;
	top:0;
	left:0;
	}
.load{
	position:absolute;
	width:27%;/*540*/
	padding-bottom:27%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/loadbg.png);
	background-size:100% auto;
	top:48%;
	left:50%;
	transform: translate(-50%,-50%);
	}
.load::before{
	position:absolute;
	width: 10.185%;/*55*/
	padding-bottom:10.185%;/*165*/
	display: block;
	content: "";
	/**/
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-image: url(../images/loading3.svg);
	background-size:100% auto;
	bottom:35%;
	left:50%;
	transform: translateX(-50%);
	}
	
		

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

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

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

}	
@media only screen and (max-width:780px){
/**/
.logo{
	position:fixed;
	width:37.435%;/*292*/
	left:0;
	top:1.282vw;/*10*/
	}
.logo.on{
	width:26.923%;/*210*/
	left:.512vw;/*4*/
	top:1.794vw;/*14*/
	}
.load{
	width:69%;/*540*/
	padding-bottom:69%;
	}	
}
@media only screen and (max-width:685px){ 
/**/
footer{
	padding:6vw 0;/*60*/
    display:block;
	}
footer .cybx{margin:0 auto;}
footer .cybx img{display:inline-block;}
footer .cybx > div{
	 /**/
      display:block;
	  text-align:center;
      justify-content: center;
      align-items: center;
	}
footer .cybx span{margin:1vw auto;padding:0; text-align:left;}
footer .gf2{display:inline-block;width:auto;margin:0 5px 0 0;}
footer .cybx img.gr15{position:relative;width:auto;height:31px;top:-7px;margin:0 3px 0 0;}	
}
@media only screen and (max-width:580px){
/**/	
}
@media only screen and (max-width:560px){
/**/
.load{
	width:90%;/*540*/
	padding-bottom:90%;
	}
}
@media only screen and (max-width:470px){
/**/
footer{padding:12vw 0;}
footer .cybx{font-size:.956rem;}/**/
footer .cybx  span > p{padding-bottom:.15rem;}
}

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

}
@media only screen and (max-width:360px){
/**/
footer .cybx span{
	width:305px;
	margin:1vw auto;
	}
	
}
@media only screen and (max-width:340px){
/**/
footer .cybx span{width:93%;}
footer .cybx img.gf2{height:41px;margin:0;}
footer .cybx img.gr15{height:28px;top:-5px;}

}
 
/* 螢幕高 */
@media only screen and (max-width:780px) and (max-height:440px){
/**/
}
@media screen and (orientation:landscape){
/**/    
.spg2{display:block;}
}

@media all and (orientation : portrait){
/**/ 
.spg2{ display: none;}
}