@import url("reset.css");
@import url("styleShare.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');


*{box-sizing:border-box}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%;max-width: 100%; max-height: 100%;margin: 0;padding: 0}
body{font-size:2rem;background-color:rgba(0,0,0,1.00) }


/* 最外框 */
#WARPPER{ display:flex; width:100%;height:100%;max-height: 100%; align-items: center;flex-direction: column;}
#WARPPER::after{display:flex;content: "";width:100%;height:100%;background-attachment: fixed;background: url("../images/bg.png") center center no-repeat;background-size:cover;position: fixed;z-index: 0}
/*首頁*/
.IndexBox{display:flex;align-items: center;justify-content: center;padding: 4rem;position: relative;background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px);flex-direction: column;border-radius: 1rem;z-index: 100}
.IndexLogo{display:flex;align-items: center;font: 800 5rem "微軟正黑體", "新細明體", Arial;color: rgba(255,255,255,1);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5)}
.IndexLogo li{text-align: center;}
.IndexLogo img{width:20vw}
.IndexLogo span{display: flex;justify-content:center; width: 100%; font-size:1.5rem;text-align: justify;padding-bottom:1rem;margin-top:1rem; border-bottom: rgba(255,255,255,0.5) 1px solid}

/*選單*/
.menuLine{display: flex;align-items: center;justify-content: space-between;font: 300 1.8vw "微軟正黑體", "新細明體", Arial;width: 100%;}
.menuLine li{border-left: rgba(255,255,255,1) 1px solid;  flex: 1 0 25%}
.menuLine li:first-child{border: none}
.menuLine li a p{font-size:0.8vw}
.menuLineIcon{font-size:3vw}
.menuLine li a{display: flex;width: 100%;padding:4rem 0; flex-direction: column;align-items: center;justify-content: center; color: rgba(255,255,255,1);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2)}
.menuLine li:hover a{animation: flipInY 1s;background-color: rgba(255,255,255,0.8)}

.autobox{width: 100%; max-width:1440px;margin: auto; position: relative;}

/* 頁首 */
#HEADER{}

/*TOPBAR*/
#TOPBAR{ display:flex; width:100%;padding:0 2rem; background-color: rgba(0,0,0,0.4) ; position: fixed; top:0; left:0; z-index:10000;font:800 1.5rem "微軟正黑體", "新細明體", Arial;  color:rgba(255,255,255,0.80); line-height:4rem;justify-content:space-between;box-shadow: 0.5rem 0 5px rgba(0,0,0,0.3);}
#TOPLOGO{}
#TOPLOGO > span{ padding-left:1rem;}
#TOPBARUL{display: flex; }
#TOPBARUL li{display: flex;align-items: center; padding:0 1rem;}
#TOPBAR a{ color:rgba(255,255,255,0.80);}
#TOPBARUL li a{display: flex;align-items: center; color:rgba(255,255,255,0.80);}
#TOPBARUL li:hover{ border-bottom: 2px rgba(255,0,255,0.5) solid }
#TOPBARUL li img{width:3rem}


/*內頁*/
.MainBox{display: flex;align-items: flex-start; justify-content: space-between;width: 100%; max-width:1420px;margin: auto; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px);padding: 2rem 0;margin-top: 4rem;z-index:100 }
.MainLogo{display:flex;align-items: center;width: 50%;font: 800 3rem "微軟正黑體", "新細明體", Arial;color: rgba(255,255,255,1);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8)}
.MainLogo div b:first-child{padding-right: 1rem}
.MainLogo img{width:7vw;margin:0 2rem}
.MainLogo p{width: 100%; font-size:2rem;}
.MainLogo span{display: flex; width: 100%; font-size:1.5rem;padding-top:0.5rem;margin-top: 0.5rem; border-top: rgba(255,255,255,0.5) 1px solid}

/*選單*/
.menuMain{display: flex;align-items: center;justify-content: space-between;font: 300 1.2vw "微軟正黑體", "新細明體", Arial;width:50%;}
.menuMain li{border-left: rgba(255,255,255,1) 1px solid;  flex: 1 0 25%;padding: 1rem}
.menuMain li:first-child{border: none}
.menuMain li a p{font-size:0.5vw}
.menuMainIcon{font-size:2vw}
.menuMain li a{display: flex;width: 100%;padding:2rem 0; flex-direction: column;align-items: center;justify-content: center; color: rgba(255,255,255,1);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.2)}
.menuMain li:hover a{animation: flipInY 1s;background-color: rgba(255,255,255,0.8)}

.Smenu{display: none}

/* 內容 */
#CONTENT{display: flex;align-items: flex-start; width: 100%; max-width:1420px;height:100%;min-height: 800px; margin: auto;position: relative;z-index:100}

.LeftZone{display: flex;width:28rem;position: absolute; flex-direction: column; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px);padding: 2rem;margin-top: 1px;color: rgba(255,255,255,1.00);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);border-radius:0 0 1vw 1vw}
.LeftZone li{display: flex;align-items: center;line-height:2rem}

.LeftZone li a{width: 100%;color: rgba(255,255,255,1.00);padding:1rem 2rem;font-weight: 800}
.LeftZone li:hover a{animation: bounceIn 1.5s;background-color: rgba(38,57,118,0.80);border-radius:1rem}

.RightZone{display: flex;width:100%;min-height: 700px;margin-left:calc(28rem + 1px); flex-direction: column; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px);padding: 2rem 6rem;margin-top: 1px;}

.WordList{padding: 2rem 0;line-height:180%;margin-bottom: 5rem}
.WordList ul{padding-left: 2rem}
.WordList ol{padding-left: 4rem}
.WordList p{font-size:2.5rem;padding-top: 2rem}
.WordList div{display: flex;align-items: center;padding:2rem 0 1rem 0;margin-bottom: 1rem; border-bottom: rgba(0,0,0,0.2) 1px solid}
.WordList div span{padding-right: 1rem;}
.WordList div p{font-size: 1.5rem;padding-left: 1rem;padding-top: 0}

.wordbox table{margin-bottom: 4rem;font-size: 1.5rem;background-color: rgba(255,255,255,0.8);font-family: "微軟正黑體", "新細明體", Arial;}
.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:1rem 2rem;}
.wordbox td a{display: flex;width: 100%;}
.wordbox td img{background-color: rgba(255,255,255,1.00);border-radius:1rem;}
.wordbox tr:nth-child(odd){ background-color: rgba(48,113,184,0.1)}
.wordbox tr:hover{ background-color:rgba(0,0,0,0.05); color:rgba(0,0,0,1.00)}

.box2em{ width:2rem; text-align:center}
.box3em{ width:10rem; text-align:center}
.box5em{ width:15rem}

.fixed {position: fixed;top:4rem;}


/* 面包屑 */
.pos{ display:flex;align-items: center;justify-content: space-between; font:800 2.5rem  "微軟正黑體", "新細明體", Arial;padding-bottom: 2rem;border-bottom: rgba(255,255,255,0.5) 1px solid;width: 100%;color: rgba(255,255,255,1.00);text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);position: relative}
.pos span{font:800 1.5rem  "微軟正黑體", "新細明體", Arial;}
.pos span::before{content:"/";padding: 0 1rem;font-size: 2rem}



/* TOP */
.goTOP{display: flex;padding: 1rem;background-color:rgba(255,255,255,0.5);border-radius: 10rem;  position: fixed;right: 1rem;bottom: 1rem;z-index: 110}

/* 頁尾 */
footer{ display:flex; align-items: center;justify-content: center;width: 100%; flex-direction: column; color:rgba(255,255,255,0.80); bottom:0; font:300 1.3rem  Arial;z-index:9999;padding:1rem 2rem;position: fixed;margin: auto;text-shadow: 1px 1px 3px rgba(0,0,0,0.80);z-index:100}

.OpenClose{display: none;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);}

/*隱藏*/
.showhide{display:block}
.hideshow{display: none}
.menuMain2{display: none}



@media (max-width: 1023px) {
	
    /* 樣式適用於寬度介於 768 像素和 1023 像素之間的設備 */
}


@media (max-width: 767px) {
		/*隱藏*/
	.showhide{display:none}
	.hideshow{display:block }
	#TOPLOGO{display: none}
	#TOPBAR{ justify-content:center;padding: 0}
	
	.IndexBox{padding:2rem 1rem;width:90%;}
	.IndexLogo{flex-direction: column;font-size: 3rem;margin-bottom:2rem}
	.IndexLogo img{width:40%}
	.IndexLogo li{text-align: center}
	.IndexLogo span{font-size:1rem;}
	.menuLine {width: 80%;flex-wrap: wrap;font-size:2rem}
	.menuLine li{border: none;  flex: 1 0 50%;}
	.menuLine li a{padding:1rem 0}
	.menuLine li a p{font-size:1rem}
	.menuLineIcon{font-size:4rem}
	
	.MainBox{padding: 2rem;background-color: rgba(255,255,255,0)}
	.MainLogo{justify-content: center; width:100%;font: 800 3rem "微軟正黑體", "新細明體", Arial;flex-wrap: wrap;text-align: center;}
	.MainLogo div b:first-child{padding-right:0}
	.MainLogo div b{display: block} 
	.MainLogo img{width:10rem;margin:0}
	.MainLogo p{width: 100%; font-size:2rem;}
	.MainLogo span{display: block; width: 100%; font-size:1.2rem;text-align: center}
	
	.menuMain{display:none;}
	.menuMain2{display: flex; width:100%;height: 100%;justify-content: center;flex-direction: column;color: rgba(255,255,255,1.00); background-color: rgba(0,0,0,0.8);position: fixed;top: 0;left: 0;z-index:200;font-size:2.5rem;padding:2rem; backdrop-filter: blur(10px); opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}
	.menuMain2 a{color: rgba(255,255,255,1.00);font-size: 1.5rem}
	.menuMain2 div{display: flex;align-items: center}
	.menuMain2 div p{font-size: 1.2rem;padding-left: 1rem}
	.menuMain2 .menuMainIcon{font-size:3rem;padding-right: 1rem}
	.menuMain2 ol{display: flex; padding-bottom: 2rem;flex-wrap: wrap}
	.menuMain2 ol li{display: flex;align-items: center}
	.menuMain2 ol li::after{content: "/";padding: 0 1rem}
	.menuShow{opacity: 1;  visibility: visible;}
	
	
	.LeftZone{display: none}
	.RightZone{margin-left:0;  padding: 2rem;}
	.wordbox table{font-size: 1.5rem; margin-bottom:2rem}
	.wordbox tr{border-radius:1rem;}
	
	.OpenClose{display: flex; color: rgba(255,255,255,1.00);position: fixed;top:5rem;right:2rem;z-index:300;cursor: pointer}
	.OpenCloseIcon{font-size:5rem}
	
	.pos{ font-size: 2rem}
	.pos span{font:300 1.2rem  "微軟正黑體", "新細明體", Arial;}
	.pos span::before{font-size: 1.5rem}


	.btntype span:first-child{display:none; }
	.btntype span:last-child{display:block;animation: bounceIn 1s;}
	.goTOP{right: 1rem;bottom: 4rem;}
	
	
	
	
	footer{background-color: rgba(0,0,0,0.5);text-align: center;width: 100%;}

}