@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: #ff8400;
	text-decoration:none;
}
a:visited {
	text-decoration:none;
	color:#ff8400;
}
a:hover {
	text-decoration: none;
	color: #d23100;
}
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;
	/*
	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;
	}
/**/
.hall{
	position: relative;
	width:100%;
	overflow:hidden;
	background-color:#03060b;
	}
/* loading */
#loo{
	position:absolute;
	width:50px;/*32*/
	height:50px;
	left:50%;
	top: 50%;
	margin-left:-25px;
	margin-top: -25px;
	background-color:#000;
	background-image: url(../images/loading.gif);
	border-radius: 99px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	overflow:hidden;
}
#bacc{
	position: fixed;
	width:100%;
	height:100%;
	left:0;
	top:0;
	z-index:20;
	background-color:rgba(0,0,0,.8);
	}
/*版宣*/
#cy{
	position:fixed;
	width:100%;
	height:0;
	display:block;
	padding: 0 0 0 0;
	font-family:Arial,'微軟正黑體',sans-serif;
	font-size:0.916rem;/*0.916*/
	line-height: 1.3rem;
	color: #d2d2d2;
	background-color:#000;
	margin:0 auto;
	z-index:3;
	left:0;
	bottom:0;
	/**/
  	-webkit-filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  	filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#cy:hover{
	height:104px;
	/**/
  	-webkit-filter: drop-shadow(0 1rem 2.5rem rgba(0, 0, 0, .9));
  	filter: drop-shadow(0 1rem 2.5rem rgba(0, 0, 0, .9));
	}
.cyop{
	position: absolute;
	width:30px;
	padding-bottom:35px;
	display:block;
	cursor:pointer;
	background-color:#000;
	border-radius:99px 99px 0 0;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 20%;
	background-image:url(../images/cy.png);
	background-size:95% auto;
	right:5%;
	bottom:99.5%;
	}
#cy > div{
	width:990px;
	height:auto;
	margin:0 auto;
	padding: 20px 0 18px 0;
	overflow:hidden;
	/**/
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#cy div span,#cy div img{
	display:inline-block;
	transition: all .5s;
	-moz-transition: all .5s;
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	}
#cy div span{text-align:left;}
.tg{height:44px;overflow:hidden;padding:10px 0 0;}
.tg2{line-height:1.5rem;color:#898484;padding:0 0 0 5px;}
.cyou{}
.gf{}
.grading{float:right;}
/**/
.ctr{text-align: center;}
/**/
.spg{
	position:fixed;
	width:100%;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	background-color:#03060b;
	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:#cce0fa;
	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);}
    }
/**/			
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1000px){	
/*版宣*/
#cy > div{width:99%;}
	
}
@media only screen and (max-width:800px){
/**/
/*#cy > div{ padding-bottom:30px;}*/

}
@media only screen and (max-width:750px){
/*版宣*/
#cy{padding:0 10px 0 10px;text-align:center;}
#cy:hover{height:171px;}
#cy > div{padding: 20px 0 20px 0;}	
	
#cy div span{text-align:center;padding:10px 0 0 0;height:auto; display:block;}
.cyou,.gf,.grading{height:40px;}
.grading{float:none;}
}
@media only screen and (max-width:630px){
/**/


}
@media only screen and (max-width:580px){
	
}
@media only screen and (max-width:560px){
/*版宣*/
#cy div span{text-align:left;padding:10px 5px 0 5px;}
}
@media only screen and (max-width:450px){
/*版宣*/
.grading{ margin-left:5px; margin-right:17px;}
.cyop{
	width:28px;
	padding-bottom:33px;
	right:3%;
	bottom:99.5%;
	}
}
@media only screen and (max-width:418px){
/**/
#cy:hover{height:189px;}
}
@media only screen and (max-width:380px){
/**/
.cyop{
	width:25px;
	padding-bottom:29px;
	}
}
@media only screen and (max-width:360px){
/*版宣*/
.cyou,.gf,.grading{height:35px;}
#cy{padding:0 1px 0 1px;}
#cy:hover{height:180px;}
#cy > div{padding: 18px 1px;}	
}
@media only screen and (max-width:320px){
/**/
.cyou,.gf,.grading{height:10.9375vw;}
#cy:hover{height:auto;}
}

@media screen and (orientation:landscape){
/**/    
.spg2{display:block;}
}

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

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fir{
	animation:fadeInRight .6s ease;
	animation-fill-mode:forwards;
	-webkit-animation:fadeInRight .6s ease;
	-webkit-animation-fill-mode:forwards;
}

@keyframes brilla {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: .9;
    }
}

@keyframes tp {
   0% { bottom:0;}
   50% {bottom:8%;}
   100% {bottom:0;}
}