﻿@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=Great+Vibes&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%;
	}
*{	
	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;
	}
.great-vibes-regular {
	font-family: "Great Vibes", cursive;
	font-weight: 400;
	font-style: normal;
	}
	
	
/**/
body,a,bg{/*cursor:url(../images/mous1.png),auto;cursor: pointer;*/}
/*.swiper-pagination-clickable .swiper-pagination-bullet{cursor:url(../images/mous1.png),auto;}*/
/*#mous{
	position:absolute;
	width:30px;
	height:30px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/mous1.png);
	transition-duration:0.1s;
	z-index:10;
	}*/
#mous{
	position:absolute;
	width:30px;
	height:30px;
	pointer-events:none;
	/*background-attachment: scroll;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/mous1.png);*/
	transition-duration:0.15s;
	z-index:10;
	}
#mous::before{
	position:absolute;
	content:"";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/mous1.png);
	left:0;
	top:0;
	/*
	-moz-animation: ob5 .3s linear infinite;
	-webkit-animation: ob5 .3s linear infinite;
	-o-animation: ob5 .3s linear infinite;
	-ms-animation: ob5 .3s linear infinite;
	animation: ob5 .3s linear infinite;*/
	}
#mous2{
	position:absolute;
	pointer-events:none;
	width:15px;
	height:15px;
	transition-duration:0.35s;
	/*
	top:50%;
	left:50%;
	transform:translate(-50% ,-50%);*/
	z-index:10;
	}
#mous2::before{
	position:absolute;
	pointer-events:none;
	content:"";
	width:100%;
	height:100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position:50% 50%;
	background-size:100% auto;
	background-image: url(../images/mous1.png);
	left:0;
	top:0;
	/*
	-moz-animation: ob5 .3s linear infinite;
	-webkit-animation: ob5 .3s linear infinite;
	-o-animation: ob5 .3s linear infinite;
	-ms-animation: ob5 .3s linear infinite;
	animation: ob5 .3s linear infinite;*/
	}
	
	
		
.bg{
	position:relative;
	width:100%;
	overflow:hidden;
	}
/**/

/*版宣*/
footer{
	position:relative;
	padding:3vw 0;
	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 .downloadbx{
	position:relative;
	text-align:right;
	/**/
    display: flex;
    justify-content: center;
    align-items: center;
	/**/
	transition: all .5s;
	}
footer .downloadbx > a{
	position: relative;
	width:12vw;/*240 :12vw*/
	padding-bottom:3.2vw;/*64 3.2vw*/
	display: inline-block;
	background-color: #000;
	border-radius:99px;
	margin: 0 4px;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 100%;
	border:1px solid #9d9d9d;
	/**/
	transition: all .5s;
	}
footer .downloadbx > a.ios{background-image: url(../images/ios.png);}	
footer .downloadbx > a.google{background-image: url(../images/google.png);}	
footer .cybx{
	position:relative;
	display:inline-block;
	font-size:1rem;
	color:#FFF;
	text-align:left;
	margin:0 0 0 2rem;
	/**/
	transition: all .5s;
	}
footer .cybx > span{
	position:relative;
	display:inline-block;
	margin:0 .25rem;
	}
footer .cybx img{
	position:relative;
	/*margin:0 5px;*/
	/**/
	transition: all .5s;
	}
footer .gf{width:6.9vw;/*138*/ margin:0 10px 0 0;}
footer .gf2{display:none;}
footer .gr15{width:2.5vw;/*58*/  margin:0 0 0 10px;}
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:#bb9962;
	}
.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:1600px){
/**/

	
	
}
@media only screen and (max-width:1400px){
/**/
}
@media only screen and (max-width:1200px){
/**/
footer{padding:5vw 0;/*60*/}
footer .downloadbx > a{
	width:20vw;/*240*/
	padding-bottom:5.3vw;/*64*/
	margin: 0 .333vw;/*4px*/
	}
footer .cybx{margin:0 0 0 2vw;/*24*/}
footer .cybx img{/*margin:0 .416vw;5*/}
footer .gf{width:12.5vw;/*138 11.5*/margin:0 .8vw 0 0;}
footer .gr15{width:4.83vw;/*58*/margin:0 0 0 .8vw;}
footer .cybx  span{margin:0 .25vw;}
	
}
@media only screen and (max-width:1000px){	
/**/

}
@media only screen and (max-width:800px){
/**/

}	
@media only screen and (max-width:780px){
/**/
#mous,#mous2{ display:none;}
/**/
footer{
	padding:7.692vw 0;/*60*/
    display:block;
	}
footer .downloadbx{}
footer .downloadbx > a{
	width:30.76923vw;/*240*/
	padding-bottom:8.205vw;/*64*/
	margin: 0 .5128vw 3.2vw;/*4px*/
	}
footer .cybx {margin:0 auto;}
footer .cybx span{display:block;margin:1vw 5px 0; text-align:left;}
footer .gf{width: auto;/*138*/ height:9.4vw;/*50 6.4*/}
footer .gr15{width: auto;/*58*/height:6.4vw;/*50 6.4*/}
	
}

@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){
/**/
footer{padding:12.7659vw 0;/*60*/}
footer .downloadbx > a{
	width:45%;/*240*/
	padding-bottom:12%;/*64*/
	margin:0 1% 5.2vw;/*4px*/
	}
footer .cybx > div{display:block;}
footer .cybx img{margin:0 auto;}
footer .cybx img.gf{height:45px;/*45*/ margin-left:33px; display:none;}
footer .cybx img.gf2{display:block;height:45px;margin-left:5%;}
footer .cybx img.gr15{
	position:absolute;
	height:40px;/*45*/
	top:2.5px;
	right:0;
	margin-right:5%;/*66*/
	}
}

@media only screen and (max-width:380px){
/**/

}
@media only screen and (max-width:360px){
/**/

}
@media only screen and (max-width:340px){
/**/
footer .cybx img.gf2{height:40px;margin-left:1%;}
footer .cybx img.gr15{
	position:absolute;
	height:35px;/*45*/
	top:2.5px;
	right:0;
	margin-right:2%;/*66*/
	}
}
 
/* 螢幕高 */
@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;}
}



