@import url("reset.css");
@import url("styleShare.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css");
@import url("https://unpkg.com/swiper/swiper-bundle.min.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&display=swap');
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 2.4rem;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.chiron-goround-tc-<uniquifier> {
  font-family: "Chiron GoRound TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

*{box-sizing:border-box;transition-duration:0.3s;}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%;font-family: "微軟正黑體", "新細明體", Arial}
body{font-size:1rem;}


/* 最外框 */
#WARPPER{ display:block; width:100%;height: 100%;}
.autobox{width: 100%; max-width:1600px;margin: auto; position: relative;}

/* 頁首 */
#TOPBAR{ display:flex; width:100%;padding:2rem; position: fixed; top:0; left:0; z-index:1100;}
#TOPBAR a{font:800 1.5rem "微軟正黑體", "新細明體", Arial;  color:rgba(255,255,255,1)}
#TOPBAR a br{display: none}


#INDEX_MAIN{display: flex;width: 100%;height: 100%;}
#INDEX_MAIN>li{display: flex;align-items:center;justify-content: center; width: 50%; height: 100%;padding:0 1vw}
#INDEX_MAIN>li:first-child{display: flex; background: rgba(14,30,95,1.00) url("../images/bg.jpg") center bottom repeat-x;background-size: cover;position: relative;border-radius: 0 0 30rem 0;overflow: hidden}
.img65{padding-bottom:6vw;width: 100%;max-width: 600px;height: auto; max-height:70%; object-fit: contain;  }
.bgbl{position: absolute;bottom: 0;width:auto;max-width:90%; object-fit: contain;}
.SCIENCE_L{display: none}

/* 選單 */
#INDEXNAV{display: flex; flex-wrap: wrap;justify-content: space-between; width: 100%;max-width:494px;}
#INDEXNAV a{margin:0.8vh 0}
#INDEXNAV a img{ width: 100%;max-width:494px;}

.btnbg{display: flex;flex-direction: column;justify-content: center; background-image: url("../images/menuBg.png");width: 100%;font: 700 3vw "Chiron GoRound TC", Arial;color:rgba(255,255,255,1.00);padding:1.2vh 2rem;text-shadow:5px 5px 1px rgba(0,0,0,0.2); font-size: clamp(16px, 3vw, 3rem);}
.btnbg p{font-size: clamp(1.2rem, 1.5vw, 1.5rem);}
.menu1{max-width:100vw;background-color:rgba(243,153,15,1.00);background-position:40% center;padding-left:20%;animation-delay: 0.6s;}
.menu2{max-width:100vw;background-color:rgba(238,136,157,1.00);background-position:70% center;padding-left:55%;animation-delay: 0.5s;}
.menu3{max-width:100vw;background-color:rgba(201,168,123,1.00);background-position:30% center;padding-left:5vw;animation-delay: 0.3s;}
.menu4{max-width:49%;background-color:rgba(134,205,201,1.00);animation-delay:0.1s;}
.menu5{max-width:49%;background-color:rgba(116,116,116,1.00);animation-delay: 0s;}

.scienceTitle{display: flex;align-items: flex-end;justify-content: space-between; width: 100%;max-width:494px;padding-bottom:2vh;;animation-delay: 0.7s;}

.scienceTitle img{width: 100%;max-width:200px;}
.scienceTitle .SCIENCE{display: flex;flex-wrap: wrap; font: 600 3vw "Chiron GoRound TC", Arial;color: rgba(89,86,86,1.00);}
.scienceTitle .SCIENCE span p{width: 100%;font: 800 1.5vw "微軟正黑體", "新細明體", Arial;text-align: justify;}
.scienceTitle .SCIENCE span {display: flex;flex-direction: column;align-items: center; font-size: 1vw; color: rgba(232,50,32,1.00);padding:0 1rem 1rem 0}

#MAIN_L{display: flex;flex-direction: column; background:rgba(0,104,183,1.00) url("../images/bg.jpg") center bottom repeat-x;background-size: cover;position: relative;width:24%; height: 100%; padding:14rem 1vw 0 2vw;position: fixed}
#MAIN_R{display: block; background-color: rgba(255,255,255,1.00);border-radius:2rem 0 0 0;flex: 1 1 0;padding:2vw;margin:14rem 0 0 24%}

.img65_main{width: 100%;max-width:300px;}

header{display: flex; background:rgba(0,104,183,1.00) url("../images/topBg.png") center 65% no-repeat;width: 100%;padding:6rem 0 2rem 2rem ;position: fixed;left: 0;top: 0;z-index:1000;}
header h3{font:600 4rem "Chiron GoRound TC", Arial;padding-left: 1rem;color: rgba(255,255,255,1.00);text-shadow: 2px 4px 1px rgba(0,0,0,0.1)}
header ul{display: flex;font:600 2rem "Chiron GoRound TC", Arial;;position: absolute;right: 0;bottom: 0;}
header ul li {margin:1vw 0.5vw;}
header ul li a{color: rgba(255,255,255,1.00);padding:0.5vw;text-shadow: 2px 4px 1px rgba(0,0,0,0.1)}
header>a{display: flex; color: rgba(255,255,255,1.00);text-shadow: 2px 4px 1px rgba(0,0,0,0.1)}
.headerFix{padding:5.5rem 0 1.5rem 2rem ;box-shadow: 0 2px 5px rgba(0,0,0,0.2)}
.headerFix .img65_main{max-width:220px;}
.headerFix  h3{font-size: 2.5rem}

#MAINNAV{background-color: rgba(255,255,255,1.00);border-radius: 2rem;padding:1vw;}
#MAINNAV > li{padding: 0.5rem 0}
#MAINNAV ol {display:flex;font-size:1.5rem;flex-wrap: wrap}
#MAINNAV ol li{padding:0 0.5rem;margin: 0.5rem 0; border-right: rgba(0,0,0,1.00) 1px solid}
#MAINNAV ol li:last-child{border-right: none}
.set1 ,.set2,.set3,.set4,.set5{display: flex;align-items: flex-end; font:600 2.4rem "Chiron GoRound TC", Arial;padding: 0 0 0.5rem 0}
.set1 p,.set2 p,.set3 p,.set4 p,.set5 p{font-size:1.2rem;padding-left: 1rem}
.set1{color:rgba(243,153,15,1.00)}
.set2{color:rgba(238,136,157,1.00)}
.set3{color:rgba(201,168,123,1.00)}
.set4{color:rgba(134,205,201,1.00)}
.set5{color:rgba(116,116,116,1.00)}

#TOPNAV{ display: flex;flex-wrap: wrap }
#TOPNAV a{display:block; color:rgba(0,0,0,0.9);}
#TOPNAV li{ padding:0 1.5rem 1.5rem 0;font:800 1.4rem "微軟正黑體", "新細明體", Arial; position:relative;line-height: 1.2rem;}
#TOPNAV ol{ display:none;position:absolute; background-color:#008cd6 ; top:calc(2rem + 10px); left:-10px;padding:0 0 0.5rem 0;border-radius: 0px 0px 5px 5px;min-width: 10rem }
#TOPNAV ol li {display: block;width: 100%; max-width:300px; padding:0.4rem 1rem;white-space:nowrap;}
#TOPNAV ol li a{ font:1rem "微軟正黑體", "新細明體", Arial; line-height:1.1rem;color:rgba(255,255,255,0.9);filter:alpha(opacity=100); /* IE */-moz-opacity:1; /* Moz + FF */opacity:1; }
#TOPNAV ol li:hover{background-color:rgba(0,93,143,1) ; }




/* 內容 */
#CONTENT{}
.wordbox{ display:flex;flex-direction: column; padding:3rem 5rem 10rem 5rem;  font:1.5rem "微軟正黑體", "新細明體", Arial; line-height:2rem; box-shadow: 0.5rem 0.5rem 1px rgba(0,0,0,0.2);position: relative; width:100%;background-color: rgba(255,255,255,1.00)}
.wordbox th{ border:rgba(51,108,30,1.00) 1px dotted;background-color:rgba(48,113,184,1.00); padding:5px 10px; color:rgba(255,255,255,1.00)}
.wordbox td{ border:rgba(51,108,31,1.00) 1px dotted; padding:5px 10px;}
.wordbox tr:nth-child(odd){ background-color: rgba(48,113,184,0.1)}
.wordbox tr:hover{ background-color:rgba(255,0,4,0.05); color:rgba(0,0,0,1.00)}
.box2em{ width:2rem; text-align:center}
.box3em{ width:10rem; text-align:center}
.box5em{ width:25rem}
.photoImg{ width:100%;}

.wordboxP p{font:600 2rem "Chiron GoRound TC", Arial;color:rgba(243,153,15,1.00)}
.wordboxP>ul {padding: 2rem}
.wordboxP>ul>li{padding-bottom: 1rem;}

.ullist{display: flex;flex-wrap: wrap}
.ullist li{display: flex;align-items: center; border: rgba(0,0,0,0.2) 1px solid;border-radius: 5px; padding:1rem;margin:0.5rem}

/* 面包屑 */
#POS{ display:block;  font:0.8rem  Arial , "新細明體";line-height:40px;}

/* 頁尾 */
footer{display: flex;justify-content: space-between; background-color: rgba(0,0,0,0.5);width: 100%; padding: 0.5rem 1rem 0.5rem 2rem;color: rgba(255,255,255,1.00);font-size: 1.5rem;position: fixed;bottom: 0;}
footer a{color: rgba(255,255,255,1.00);padding: 0 1rem}

/*回最上頁*/
.goTOP{ display: flex; font-size:5rem; color:rgba(116,116,116,1.00); position:fixed; right:1rem; bottom:4rem; opacity: 0.5; z-index:1002}

/*隱藏*/
.hideshow{display: none}

.Stitle{ display:flex;  font:600 3rem "Chiron GoRound TC", Arial;  padding:20px 0 0 0;margin-bottom: 8px; border-bottom: 1px rgba(0,0,0,0.5) dotted;}
.Stitle span{ font-size: 1rem;padding-left: 1rem; line-height: 3rem}
.Stitle img{width:3.5rem; margin-right:0.5rem}
.Stitle i{ padding-right:10px;}



/* 獎品 */
.Rank {display: flex;align-items: center;justify-content: center;font-size: 1.5rem;font-weight: 800;color: rgba(255,255,255,1.00); width: 100%;border: rgba(255,255,255,0.2) 1px dotted;background: rgba(96,173,103,1.00) url("../images/menuBg.png");white-space:nowrap;padding: 0.5rem 1rem;border-radius:1rem;font-family: "Chiron GoRound TC", Arial;text-shadow:1px 2px 1px rgba(0,0,0,0.4);}


/*選單XX*/
.menu-wrapper {
  display: none;
  position: fixed;
	top: 4rem;
  right: 2rem;
  margin: auto;
  width: 40px;
  height:2px;
  cursor: pointer;
}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
  width: 40px;
  height: 3px;border-radius: 10px
}

.hamburger-menu {
 
  background:  rgba(134,205,201,1.00);
  transition: all 0ms 300ms;
}
.hamburger-menu.animate {
  background: rgba(255, 255, 255, 0);
}

.hamburger-menu:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  background:  rgba(134,205,201,1.00);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu:after {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  background:  rgba(134,205,201,1.00);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}





@media (max-width: 1024px) {
	#TOPBAR a{font-size: 1.3rem}
	#TOPBAR a span{display: block}
	#INDEX_MAIN>li{padding:0 2vw}
	#INDEX_MAIN>li:first-child{border-radius: 0 0 10rem 0}
	.set1 p,.set2 p,.set3 p,.set4 p,.set5 p{display: none}


}


@media (max-width: 767px) { 
	#TOPBAR a{display: flex;flex-direction: column; font-size: 1.2rem;}
	#TOPBAR a br{display: block}
	.menu-wrapper {display: block;z-index:4000;}
	.img65{padding-bottom:4vw;width:80%;}
	#INDEX_MAIN{flex-wrap: wrap;position: relative}

	#INDEX_MAIN>li{width:100%; height:100%;position: absolute;left: 0;top: 0;flex-direction: column;}
	#INDEX_MAIN>li:first-child{border-radius: 0 0 10rem 0}

	nav {opacity: 0;transform: translateY(-20px); transition: all 0.3s ease;  pointer-events: none; /* 不可點擊 */  background-color: rgba(255,255,255,0.9);padding:4rem 2rem;border-radius: 10px;z-index: 2000}
	
	nav.active {opacity: 1;  transform: translateY(0);  pointer-events: auto;}
	
	.btnbg{ font-size:3rem}
	.menu1,.menu2,.menu3,.menu4,.menu5{max-width:100%;background-position:38%;padding-left:2rem}
	.SCIENCE_L{display: flex;flex-direction: column;; font: 400 3.5rem "Chiron GoRound TC", Arial;;color: rgba(255,255,255,1.00)}
	.SCIENCE_L span{display: flex;flex-direction: column; font-size: 3vw;}
	
	.scienceTitle .SCIENCE{font-size:4rem;width: 100%}
	.scienceTitle .SCIENCE span p{font-size:2rem}
	.scienceTitle .SCIENCE span {font-size:1.35rem;justify-content: center}
	.scienceTitle img{width:20vw; position: absolute;right:-3rem;top:-8rem;z-index: 10}
	
	header ul{display: none}
	
	#MAIN_L{display: none;width:100%; height:100%;background-image:none;background-color:rgba(0,0,0,0.5);padding:0;z-index:3000}
	#MAIN_L nav{display: flex;align-items: center;justify-content: center; width: 100%;height: 100%;background-color: transparent;}
	#MAIN_L .bgbl{display: none}
	#MAIN_R{padding:5vw;margin-left:0;border-radius: 0}
	
	#MAINNAV{border-radius:0;padding:2rem;width: 100%;}
	#MAINNAV ol li{padding:0 0.5rem;margin: 0.5rem 0; }
	
	.hideshow{display: block}
	.showhide{display: none}
	
	.img65_main{max-width:200px;height: auto}
	header{background-image: none;padding:8rem 0 2rem 2rem;border-radius: 0 0 5rem 0}
	header h3{font:600 2.5rem "Chiron GoRound TC", Arial;}
	.headerFix{padding:7.5rem 0 1.5rem 2rem }
	.headerFix .img65_main{max-width:200px;}
	.headerFix  h3{font-size: 2rem}
	
	.Stitle{ font-size:2rem}

}

@media (max-height:800px) {
	.scienceTitle img{max-width:150px;}
	.bgbl{max-width:60%}

}
/* 螢幕閱讀器專用文字（視覺隱藏但可被輔助科技讀取） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
@media print {
    /* 樣式適用於列印時的樣式設定 */
}

.goTOP{ display: flex; font-size:5rem; color:rgba(116,116,116,1.00); position:fixed; right:1rem; bottom:4rem; opacity: 0.5; z-index:1002}
.goTOP:focus-visible{
  outline: 3px solid #ffffff;
  outline-offset: 4px;
  opacity: 1;
}

/* 焦點可見性（避免 reset.css 移除 outline 造成鍵盤無法辨識） */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}