@charset "utf-8";
@import url("reset.min.1.2.css");
/*@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;700;800;900&display=swap');*/
*{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
*::after,*::before{ pointer-events:none;}
.m, .s{ display:none;}
a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0.05);}
a:hover{ cursor:pointer;}
[class*="btn-"] a, ul[class*="menu-"] a{ width:100%; height:100%; display:block;}
img{ width:100%; height:auto; font-size:0;}
input,button,select,textarea{ outline:none;}/*去除藍框*/
::selection{ background:#a3956e; color:#fff; text-shadow:none;}
::-moz-selection{ background:#a3956e; color:#fff; text-shadow:none;}
html,body{ width:100%; overflow-x:hidden;}
body{ font-family:sans-serif; font-size:12px; background-color:#1f0405; -webkit-text-size-adjust:none; position:relative;}
body::-webkit-scrollbar{ width:7px;}
body:hover::-webkit-scrollbar-thumb{ cursor:pointer;}	
body::-webkit-scrollbar-thumb{ background-color:#867d61;/* 滾動條 */}
body:hover::-webkit-scrollbar-thumb{ background-color:#867d61;}
body::-webkit-scrollbar-track{ background-color:#000;/* 滾動條軌道 */}	
.wrapper{ width:100%; height:auto; overflow:hidden; position:relative;}

.particles-eff{ width:100%;	height:100vw;
				overflow:hidden; pointer-events:none;
				position:fixed; top:0; left:0; z-index:1; 
			   }	
#confetti-canvas{ position:absolute; top:0; left:0;  pointer-events:none;}	

:root{
		/* con FontSize */
		--FontSize-ttl-h1:1.5rem;
		--FontSize-ttl-h2:1.2rem;
		--FontSize-ttl-h3:1.2rem;
		--FontSize-page-con:0.91rem;

		--FontSize-card:0.79rem;

		/* footer FontSize */
		--FontSize-cr:0.7rem;
      }       
@media (max-width:900px){
				:root{
						/* con FontSize */
						--FontSize-ttl-h1:min(4.15vw,1.5rem);
						--FontSize-ttl-h2:min(3.55vw, 1.22rem);
						--FontSize-ttl-h3:min(3.55vw, 1.22rem);
						--FontSize-page-con:min(2.95vw, 0.93rem);
				      }
}
@media (max-width:760px){
				:root{
						/* con FontSize */
						--FontSize-ttl-h1:min(4.2vw,1.35rem);
						--FontSize-ttl-h2:min(3.8vw, 1.25rem);
						--FontSize-ttl-h3:min(3.8vw, 1.25rem);
						--FontSize-page-con:min(3.05vw, 0.93rem);

						/* footer FontSize */
						--FontSize-cr:min(2.25vw, 0.7rem);
					}
}


/* 19th logo --------------------------------------- */
.logo-anniv-block{ width:37%; max-width:428px; aspect-ratio:814 / 741; margin-inline:auto; position:relative; }
.logo-anniv-block__item,
.logo-anniv-block__item .logo-anniv-cut02{ background-position:top center; background-size:100% auto; background-repeat:no-repeat; position:absolute; inset:0; }
.logo-anniv-block__item.logo-anniv{ width:100%; height:100%; background-image:url(../images/logo-19th.webp); position:relative; }
.logo-anniv-block__item.btn{ background-image:none; }
.logo-anniv-block__item .logo-anniv-cut02{ background-image:url(../images/logo-19th-cut02.webp);
											animation-name:logo-anniv-cut02_an;
											animation-duration:0.95s;
											animation-timing-function:ease-in-out; 
											animation-iteration-count:infinite;
											}
.logo-anniv-block__item.ef-cut01{ background-image:url(../images/logo-anniv-ef-cut01.webp);
								  animation-name:ef-cut01_an;
								  animation-duration:1.12s;
								  animation-timing-function:ease-in-out; 
								  animation-iteration-count:infinite;
								  }
.logo-anniv-block__item.ef-cut02{ background-image:url(../images/logo-anniv-ef-cut02.webp); 
								  animation-name:ef-cut02_an;
								  animation-duration:1.12s;
								  animation-timing-function:ease-in-out; 
								  animation-iteration-count:infinite;
								}		   
/* logo anime */
@keyframes logo-anniv-cut02_an{ 0%, 100%{ opacity:0;}
				          50%{ opacity:1;}
                        }	

@keyframes ef-cut01_an{ 0%, 100%{ opacity:1;}
				          50%{ opacity:0.05;}
                        }

@keyframes ef-cut02_an{ 0%, 100%{ opacity:0.05;}
				          50%{ opacity:1;}
                        }	


@media (max-width:900px){

						.vision-con .logo-anniv-block{ width:62.35%; margin-top:54.5vw;}

						.logo-anniv-block__item.shadow{ background-image:url(../images/logo-19th-shadow-s.webp); }

}


/* 版權 footer --------------------------------------- */
footer{ width:100%; 
		--FontColor:#b4aca6; --BorderColor:#333; 
		color:var(--FontColor); 
		font-family:Arial, sans-serif; font-weight:300; font-style:normal;
		position:relative; z-index:10;
       }

footer.index::before{ content:""; width:100%; height:321px; background:url(../images/bg-cr.webp) repeat-x center bottom / auto 100%; 
					 position:absolute; left:0; bottom:0; z-index:-1;	 
					}  

.footer-con{ width:100%; margin-inline:auto; padding:0;}

.footer-con article{ display:flex; align-items:center; justify-content:center;}
.footer-con article.cr-block{ width:100%; padding:0.5rem 5% 1.5rem 5%;}


.cr-uj{ width:100%; max-width:fit-content; display:flex;}
.cr-uj img{ width:auto; height:2.5rem; max-height:95px; 
			filter:drop-shadow( 0px 0px 10px rgba(31, 4, 5, 0.6)) drop-shadow( 0px 1px 1px rgba(19, 2, 3, 0.5)); 
		  }
.cr-uj img:not(:first-of-type){ margin-left:1.2rem;}
ul.cr-txt{ max-width:fit-content; font-size:var(--FontSize-cr); line-height:1.55; padding-top:0.5rem;
	      }
ul.cr-txt li{ max-width:fit-content;  padding-left:1.2rem; white-space:nowrap; 
			  filter:drop-shadow( 0px 0px 10px rgba(31, 4, 5, 0.6)) drop-shadow( 0px 1px 1px rgba(19, 2, 3, 0.5)); 
			}


@media (max-width:900px){

		footer.index::before{ display:none;}  
  
		.footer-con article.cr-block{ flex-direction:column; justify-content:center; align-items:center; }
		.footer-con article.cr-block{ padding:min(3.5vw, 1.5rem) 5% min(4vw, 1.8rem) 5%; }

		.cr-uj{ text-align:center;}
		.cr-uj img{ height:2.85rem; }
		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{ max-width:100%; padding-left:0; text-align:center;}
}

@media (max-width:760px){

        .cr-uj img{ height:7.1vw;}

}
@media (max-width:500px){

		ul.cr-txt{ padding-top:min(2.5vw, 0.5rem);}

}


/* 版頭選單 nav --------------------------------------- */
nav{ width:100%; --NavHeight:71px; --NavHeightPadding:calc( var(--NavHeight) + 1.1rem * 2 ); 
	 position:fixed; left:0; z-index:99;
	}
nav#headmenu.fixed{ position:fixed;}	 

.bg-nav{ width:100%; height:var(--NavHeightPadding); background-color:#000; 
         background:linear-gradient(to bottom, rgba(29,18,0,1) 0%,rgba(24,14,0,1) 20%,rgba(2,1,0,1) 68%,rgba(0,0,0,1) 100%); 
		 filter:drop-shadow( 0px 0px 5px rgba(0, 0, 0, 0.6)) drop-shadow( 0px 0px 1px rgba(0, 0, 0, 0.5)); 
	     position:absolute; left:0; top:0;
}
.bg-nav::before{ content:""; width:100%; height:1px; 
				 background-color:#ffed54;
				 position:absolute; bottom:-1px; left:0; 
				}

.headmenu-con{ height:var(--NavHeightPadding); display:flex; align-items:center; justify-content:center;}

.menu-con{ display:flex; }
.menu-main-block{ width:fit-content; margin-left:1.5rem; display:flex;}

/* ul.menu-main */
ul.menu-main{ display:flex;}
ul.menu-main li{ display:flex; align-items:center; position:relative;}
ul.menu-main li.dec{ width:20px; aspect-ratio:24 / 25;
					  background:url(../images/menu-dec.webp) no-repeat center center / 100% auto;
			        }	
ul.menu-main li.dec{ margin-inline:0.08rem;}				   
ul.menu-main li[class*="btn-event"]{ height:var(--NavHeight); aspect-ratio:130 / 71;
									 background-position:center center; 
					                 background-size:auto 100%; 
					                 background-repeat:no-repeat;
			                         }							 
ul.menu-main li[class*="btn-event"]::before{ content:""; 
											background-position:center center; 
											background-size:auto 100%; 
											background-repeat:no-repeat; 
											opacity:0; transition:opacity 0.5s; 
											position:absolute; inset:0; 
										   }
ul.menu-main li[class*="btn-event"]:hover::before{ opacity:1;}	
				 
ul.menu-main li.btn-event01{ background-image:url(../images/btn-event01.webp);}								
ul.menu-main li.btn-event01::before{ background-image:url(../images/btn-event01-ov.webp);}	
ul.menu-main li.btn-event02{ background-image:url(../images/btn-event02.webp);}								
ul.menu-main li.btn-event02::before{ background-image:url(../images/btn-event02-ov.webp);}	
ul.menu-main li.btn-event03{ background-image:url(../images/btn-event03.webp);}								
ul.menu-main li.btn-event03::before{ background-image:url(../images/btn-event03-ov.webp);}
ul.menu-main li.btn-event04{ background-image:url(../images/btn-event04.webp);}								
ul.menu-main li.btn-event04::before{ background-image:url(../images/btn-event04-ov.webp);}
ul.menu-main li.btn-event05{ background-image:url(../images/btn-event05.webp);}								
ul.menu-main li.btn-event05::before{ background-image:url(../images/btn-event05-ov.webp);}

/* btn-logo */
.btn-logo{ width:287px; margin-bottom:auto;
		   aspect-ratio:574 / 298;
		   background:url(../images/btn-logo.webp) no-repeat center top / 100% auto; transition:filter 0.5s;
		   position:relative; 
		   left:0rem; top:0.21rem; z-index:1;
		 }
.btn-logo:hover{ filter:brightness(1.2);}	


/* btn-menu 漢堡選單 */
.btn-menu{ height:var(--NavHeight); aspect-ratio:162 / 152;
		   transition:filter 0.5s;
		   position:absolute; right:0; top:0;
		 }
.btn-menu:hover{filter:drop-shadow( 0px 0px 5px rgba(224, 135, 0, 0.7)) drop-shadow( 0px 0px 1px rgb(255, 174, 0, 1));}
.btn-menu:hover::before{ background-color:#fff; }

.btn-menu::before{ content:""; 
				   -webkit-mask-size:auto min(7.5vw, 2.5rem);
					mask-size:auto min(7.5vw, 2.5rem);
					-webkit-mask-position:center center;
					mask-position:center center; 
					-webkit-mask-repeat: no-repeat;
					mask-repeat:no-repeat;
				    background-color:#fff177;
				   	transition:background-color 0.5s;
					position:absolute; inset:0; 
				  }
.btn-menu.list::before{ -webkit-mask-image:url(../images/btn-menu_list.webp);
			             mask-image:url(../images/btn-menu_list.webp);
				       }
.btn-menu.close::before{ -webkit-mask-image:url(../images/btn-menu_close.webp);
				         mask-image:url(../images/btn-menu_close.webp);
				        }
/* btn-top */
.btn-top-block{ width:65px; max-width:var(--Width-px); aspect-ratio:var(--Width) / 142; 
	            --Width:119; --Width-px:calc(var(--Width) * 1px); 
	            transition:transform 0.5s,filter 0.5s; 
	            position:fixed; bottom:2%; left:50%; 
				display:none; z-index:90;
               }
.btn-top_mob{ width:100%; aspect-ratio:var(--Width) / 138; 
			  background:url(../images/btn-top_mob.webp) no-repeat center center / 100% auto;
			}
.btn-top_txt{ width:100%; aspect-ratio:var(--Width) / 31; 
			  background:url(../images/btn-top_txt.webp) no-repeat center center / 91% auto;
			  position:absolute; left:0; bottom:0;
             }	
.btn-top-block:hover{ filter:brightness(1.15);}	

@media (hover){
		.btn-top-block:hover .btn-top_mob{ animation-name:btn-top_an; 
										   animation-duration:1s;
										   animation-timing-function:ease-in-out; 
										   animation-iteration-count:infinite;
										}	
}	
@keyframes btn-top_an{ 0%, 100%{ transform:translateY(1.5%);}
                       50%{ transform:translateY(-1.5%);}
                      }


@media (max-width:1350px){

						/* 版頭選單 nav --------------------------------------- */
						nav{ --NavHeight:min(6.25vw, 71px);}
						.menu-main-block{ margin-left:min(1.1vw, 1.5rem); }

						.btn-logo{ width:27vw; max-width:287px; 
								   left:min(0.95vw, 1rem); top:min(1vw, 0.7rem);
								  }
										
}
@media (max-width:1000px){


						/* 版頭選單 nav --------------------------------------- */
						nav{ --NavHeight:min(8.3vw, 65px); }
						.bg-nav{ height:var(--NavHeight); }

                        /* btn-menu */
                        .btn-menu.s{ display:block; z-index:50;}
						/*點擊後動態在 body 加上 class */
						.menu_show .menu-main-block{ display:block; animation:.65s menu_show;}
						@keyframes menu_show{
												0%{ opacity:0; transform:translateX(40%);}
												100%{ opacity:1; transform:translateX(0%);} 
									        }

						.headmenu-con{ width:100%; justify-content:center; position:relative;}
						.menu-main-block{ width:30%; max-width:15.25rem; margin-left:0; 
							              padding-top:min(4vw, 2.5rem);
							              padding-bottom:min(4.6vw, 2.2rem);
							              flex-direction:column;
										  background-color:rgba(14, 6, 0, 0.8);
										  -webkit-backdrop-filter:blur(6px);
										  backdrop-filter:blur(6px);
							              position:absolute; top:var(--NavHeight); right:0; z-index:-1; 
										  display:none;
										  height:calc(100dvh - var(--NavHeight)); overflow-y:auto;
						                  }
						@supports (-moz-appearance:none) {/* firefox */
							.menu-main-block{ height:calc(100vh - var(--NavHeight));}
							.menu-main-block{ scrollbar-color:rgba(255, 255, 255, 0.18) rgba(0, 0, 0, 0);
											  scrollbar-width:thin;
											}				 
						}   				  
						.menu-main-block::-webkit-scrollbar{ width:7px;}
						.menu-main-block:hover::-webkit-scrollbar-thumb{ cursor:pointer;}	
						.menu-main-block::-webkit-scrollbar-thumb{ /* 滾動條 */
							background-color: rgba(255, 255, 255, 0.18);
						}
						.menu-main-block:hover::-webkit-scrollbar-thumb{
							background-color: rgba(255, 255, 255, 0.22);
						}
						.menu-main-block::-webkit-scrollbar-track{ /* 滾動條軌道 */
							background-color: rgba(0, 0, 0, 0);
						}				

						/* ul.menu-main */
                        ul.menu-main{ width:fit-content; margin-inline:auto; flex-direction:column;}	
						ul.menu-main li{ width:fit-content; margin-inline:auto; text-align:center;
							             justify-content:center;
						                }	

						ul.menu-main li[class*="btn-event"]{ height:min(14vw, 4rem); }
						ul.menu-main li.dec{width:17px; margin-inline:auto; margin-block:min(1.5vw, 0.5rem);}	

						.btn-logo{ width:240px; position:absolute; top:0.5rem; left:min(0.95vw, 1rem);}


						.btn-menu::before{ -webkit-mask-size:auto min(7.5vw, 1.85rem);
											mask-size:auto min(7.5vw, 1.85rem);
										 }
						
						/* btn-top */
						.btn-top-block{ left:auto; right:1%; }
										 
}
@media (max-width:900px){

						.menu-main-block{ padding-top:min(5vw, 2.5rem); padding-bottom: min(6.5vw, 2.75rem);}

						ul.menu-main li[class*="btn-event"]{ height:min(11.5vw, 4rem);}
                        ul.menu-main li.dec{ margin-block:min(1.2vw, 0.5rem);}	

						.logo-anniv-block__item.ef-cut01{ background-image:url(../images/logo-anniv-ef-cut01-s.webp);}
						.logo-anniv-block__item.ef-cut02{ background-image:url(../images/logo-anniv-ef-cut02-s.webp);}

}
@media (max-width:760px){

						/* 版頭選單 nav --------------------------------------- */
						nav{ --NavHeight:min(11.5vw, 70px); }


						.menu-main-block{ width:38.5vw; max-width:none; }

                        ul.menu-main li.dec{ width:3vw; }	

						.btn-menu::before{ -webkit-mask-size:auto min(5.9vw, 2.5rem);
											mask-size:auto min(5.9vw, 2.5rem);
									    }
						.btn-logo{ width:40vw; top:min(1vw, 0.7rem);}


						/* btn-top */
						.btn-top-block{ width:11.3vw; }
						

}
@media (max-width:600px){

						.menu-main-block{ padding-top:min(7.5vw, 2.5rem);
							              padding-bottom: min(9.1vw, 2.8rem);
										}
}
@media (max-width:480px){

						.menu-main-block{ padding-bottom:min(7.8vw, 2rem);}

}