@charset "utf-8";
/* CSS Document */
@import url("reset.min.1.2.css");
*{margin:0;
  padding:0;
  box-sizing: border-box;}

html{ scroll-behavior: smooth;}
html,body{width:100%;font-size:16px;height:vh;font-family: "ar-fangxinshuh7b5std", sans-serif;
font-weight: 900;font-style: normal;background-color:#07050b ;color: #FFFFFF;}

img{width:100%; height:auto;border:0px;}

a{width:100%; height:100%; color:#8f5720;text-decoration: underline;}
a:hover{cursor:pointer;}
ul{list-style-type:none}

.inline{display:inline-block;}
.txt_shadow{text-shadow:0 0 14px rgba(24, 13, 2, 1),0 0 10px rgba(24, 13, 2, 1),0 0 8px rgba(24, 13, 2, 0.9),0 0 4px rgba(24, 13, 2, 1), 0 0 6px rgba(24, 13, 2, 0.9), 0 0 2px rgba(24, 13, 2, 1); }

.txt_bold{font-weight:bolder;}
.txt15{font-size: 1.5rem;}

.toplogo{position:fixed;width:15%;max-width:220px;top:0;left:0;z-index: 33;}
.toplogo img{width:100%;transition:all 0.3s ease-out;}


/*-----------社群選單---------*/
.snsblock{position:fixed;top:4px;right:4px;z-index: 33;}
.snsblock>ul{position: relative;display:flex;flex-direction:row;}
.snsblock>ul>li{max-width: 60px;margin: 2px;}
.snsblock>ul>li,.snsblock>ul>li a{transition:all 0.5s;display: block;position:relative;}

.snsblock li.btn-bgm{background:url("../images/btn_music.png") no-repeat left top;background-size: contain;
  }						
.snsblock li.btn-bgm.on{background:url("../images/btn_music_on.png") no-repeat left top;background-size: contain;
	  }	
.bgm-hide{ pointer-events:none; opacity:0; position:absolute; top:0; right:0; z-index:-5;}

.menu_in {
	animation:fadeRight 0.7s forwards ease-out; 
  }
  @keyframes fadeRight {
	0% {transform: translateX(100%);}
  
	100% {transform: translateX(0);}
  }


  .menu_out {
	animation:fadeLeft 0.7s forwards ease-out; 
  }
  @keyframes fadeLeft {
	0% {transform: translateX(0);}
  
	100% {transform: translateX(100%);}
  }  



@keyframes icon_down {
	0% {transform:translateY(0);}
	50% {transform:translateY(-5%);}
	}


/*-----------右MYCARD---------*/
.rightmenu{width:15%;max-width:200px;position:fixed;top:40vh;right:-1%;z-index: 33;transition:all 0.3s;}



.top_bg{width:100%;position: fixed;top:0;left:0;z-index: 30; background:url("../images/top_bg.png") no-repeat center top;background-size:cover;display: none;}
.wrapper{width:100%;margin: 0 auto;position:relative;overflow: hidden;}


/*-----------封面---------*/
.cover_shadow{width:100%;position:relative;-webkit-filter: drop-shadow(9px 9px 7px rgba(0, 0, 0, 0.6));filter: drop-shadow(9px 9px 7px rgba(0, 0, 0, 0.6));z-index:4;}
.cover_block{width:100%;margin: 0 auto;position: relative; overflow: hidden;z-index:2;background:url("../images/cover_bg.webp") no-repeat center top;background-size:cover;}
.cover_main{width:100%;max-width: 1280px;position: relative;margin:0 auto;z-index: 7;padding-bottom: 3rem; }

.maintxt{width:94%;max-width:920px;position:relative;margin: 50vh auto 0; animation: maintxt 1s forwards ;opacity:0;}
.maintxt_light{position:absolute;top:0;left:0;z-index: 3;animation:shinya 3s infinite ease-out;opacity:0;}

@keyframes  maintxt{
    0% {opacity:0;filter:brightness(50%);transform: scale(0.4,0.4) ;}
	50% {animation-timing-function: ease-in;filter:brightness(115%);transform: translate(0,20%) scale(1,.6) perspective(90px) rotateX(10deg);}/*曲線移動*/
	100% {animation-timing-function: ease-in;filter:brightness(100%);transform: translate(0,0) scale(1,1);opacity:1;}
}

.app_block{width: 96%;max-width:700px;position:relative;margin: -1% auto 0;}
.app_block ul{position: relative;display:flex;flex-direction:row;justify-content:center;}
.app_block li{width:33%;max-width:330px;margin: 1%; transition:all 0.3s;}
.app_gp,.app_ios{display: none;}

.fire{width: 100%;height: auto;position:absolute;bottom: 0;left: 0; z-index: 999;	mix-blend-mode: screen; pointer-events: none;overflow: hidden;}

/*-----------動態---------*/

@keyframes move_up {
	0% {transform: translateY(-100%);opacity:0;}
	100% {transform: translateY(0%);opacity:1;}	  
	}


@keyframes shinya {
	0% {opacity:0;}
	45% {opacity:1;}
	90% {opacity:0;}
	}

@keyframes shinyb {
	0% {opacity:0;}
	30% {opacity:1;}
	60% {opacity:0;}
	}

@keyframes shinyc {
	0% {filter:brightness(100%);}
	40% {filter:brightness(120%);}
	80% {filter:brightness(100%);}
	}


/* 版權 footer --------------------------------------- */
footer{ width:100%; 
		--FontColor:#bfbab6; --BorderColor:#333; 
		color:var(--FontColor); 
		font-family:source-han-sans-traditional, sans-serif; font-weight:600; font-style:normal;font-size: 12px;
		border-top: 1px solid #000; background-color:#000;
		position:relative; z-index:10;
       }
.footer-con{ width:100%; margin-inline:auto; padding:0;}
.footer-con > div{ width:100%;}

.footer-con div article{ display:flex; align-items:center; justify-content:center;}
.footer-con div article.link-block{ padding:0.4rem 0 0.4rem 0;
									border-bottom:1px solid var(--BorderColor);
								}
.footer-con div article.cr-block{ width:100%; padding:1rem 5% 1rem 5%;}
.footer-con div article.rank-block{ width:100%; padding:0.9rem 5% 1.8rem 5%;}
.footer-con > article{ width:100%; padding:0.45rem 5% 0.45rem 5%; text-align:center; font-size:var(--FontSize-rank); line-height:1.8;
						border-top:1px solid var(--BorderColor);
						}

ul.menu-link{ width:100%; margin-inline:auto; 
			 font-size:var(--FontSize-footerlink); line-height:1.8;
			 display:flex; align-items:center; justify-content:center; 
			 }
ul.menu-link li{ position:relative;font-size: 14px;}
ul.menu-link li a{ margin-inline:1rem; color:var(--FontColor); white-space:nowrap;/*不換行*/}


ul.menu-link li:not(:last-of-type)::before{ content:""; width:1px; height:100%; 
											background-color:var(--BorderColor);
											position:absolute; top:0; right:0%; 
											}

.cr-uj{ width:100%; max-width:150px;}
ul.cr-txt{ max-width:fit-content; font-size:var(--FontSize-cr); line-height:1.55; padding-top:0.5rem;
	       display:flex;
	      }
ul.cr-txt li{ max-width:fit-content; padding-left:2%; white-space:nowrap;}
ul.cr-txt span:not(:first-of-type){ padding-left:2%;}

.rank-icon{ width:100%; max-width:42px; text-align:right;}
ul.rank-txt{ width:100%; max-width:fit-content; font-size:var(--FontSize-rank); line-height:1.48; margin-left:1%; 
			display:flex; flex-direction:column; align-items:flex-start; 
			}
ul.rank-txt li{ max-width:fit-content; padding-left:0.47rem; background:url(../images/rank_pic.webp) no-repeat left center / auto;}


@media (max-width:950px){
  
		.footer-con div article.cr-block{ flex-direction:column; justify-content:center; align-items:center;	 
										 }
		.footer-con > article{ padding:min(4.2vw, 1.8rem) 5% min(3.2vw, 1.5rem) 5%;}
		.footer-con > article br.m{ display:block;}

		.footer-con div article.cr-block{
			padding:min(4.2vw, 1.8rem) 5% min(3.2vw, 1rem) 5%;
		}
		.footer-con div article.rank-block{
			padding:min(3.2vw, 0.9rem) 5% min(4.2vw, 1.8rem) 5%;
		}

		ul.rank-txt{ margin-left:1.4%; line-height:1.7;}
		ul.rank-txt li{ padding-left:0.48rem;}

		.cr-uj{ text-align:center;}
		ul.cr-txt{ padding-top:min(1.55vw, 0.7rem); line-height:1.6; 
				   flex-direction:column; justify-content:center; align-items:center; 
				  }
		ul.cr-txt li:nth-of-type(1){ padding-left:0; text-align:center;}

}

@media (max-width:760px){

		.footer-con{ padding-bottom:var(--Padding-bottom-footer);}

		 ul.menu-link li a{ margin-inline:min(3.15vw, 1rem);}

}

@media (max-width:560px){

		ul.cr-txt li span:nth-of-type(3){ display:block;}

}

@media (max-width:500px){

		.footer-con{ --Article-padding:min(3.2vw, 1.1rem);}

		.footer-con > article br.m{ display:none;}
		.footer-con > article{ padding:var(--Article-padding) 10% var(--Article-padding) 10%;}

		.footer-con div article:nth-of-type(1){ margin-bottom:var(--Article-padding);}

		.cr-uj{ width:37vw;}
		.rank-icon{ width:10vw;}

		ul.cr-txt{ padding-top:min(2.5vw, 0.5rem);}
		ul.rank-txt{ margin-left:3%;}

}


/*/ 按鈕HOVER不在手機啟動變成按兩次，把hover寫在這裡 /*/
@media (hover) {
	.toplogo img:hover{filter:brightness(120%);}
	.snsblock>ul>li a:hover{transform:scale(1.1);}
	.rightmenu:hover{transform:scale(1.05);}
	.rightmenu ul li:hover{transform:translateX(-5%);filter:brightness(120%);}
	.rightmenu_x:hover{filter:brightness(120%);}
	.app_block li:hover{transform: scale(1.07);filter: brightness(1.2);}
	ul.menu-link li a:hover{ text-decoration:underline;}
}



/*-----------自訂Scrollbar樣式---------*/
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
  width: 10px; /*右側捲軸寬度*/
  height: 10px; /*下方捲軸高度*/
}
/* 軌道背景底色 */
::-webkit-scrollbar-track {
  background: #000000; 
}
 
/* 滑桿顏色 */
::-webkit-scrollbar-thumb {
  background: #b49f6e; 
}
/* 滑桿滑鼠滑入時的顏色 */
::-webkit-scrollbar-thumb:hover {
  background: #c6b285; 
}
/* 捲軸兩側頂端的按鈕 */
::-webkit-scrollbar-button {
  background-color: #b49f6e;
}
/* 捲軸兩側頂端的按鈕滑鼠滑入時的顏色 */
::-webkit-scrollbar-button:hover {
  background-color: #420100;
}


/*-----------RWD---------*/


@media (max-width:737px){
	.cover_block{background:url("../images/cover_bg_737.webp") no-repeat center top;background-size:100% auto;}
	.top_bg{display:block;}
	.toplogo{width:25%;}
	.maintxt{margin: 118% auto 0;}
	.rightmenu{width:25%;}
	.rightmenu_logo{width:100%}
	.rightmenu_x{width:33%;}

	}



@media (max-width:640px){
	
	.snsblock{width:44%;}
	
	.cover_main{padding-bottom: 2rem; }
}


@media (max-width:444px){
	.fire{display: none;}
	.rightmenu{top:30vh;}
	footer{ width:96%; margin: 0 auto;overflow: hidden;}
	ul.menu-link li{ position:relative;font-size: 12px;}

}