@import url("reset.css");
@import url("styleShare.css");
@import url("animate.css");
@import url("tableCss.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&family=Noto+Sans+TC:wght@100..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;
}
.noto-sans-tc-<uniquifier> {
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  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:"Noto Sans TC", "微軟正黑體", "新細明體", Arial}
body{font-size:1rem;background:rgba(10,56,85,1.00) url("../images/bg.jpg") center no-repeat ;background-size:cover;background-attachment: fixed}

.bgbox{background-color:  rgba(24,28,23,0.80)}

#LOADING{display: flex;width: 100%;height: 100%;flex-direction: column; position: fixed;align-items: center;justify-content: center; background-color: rgba(0,0,0,1.00);z-index: 3000;color: rgba(255,255,255,0.2);font-size: 0.8rem }
#LOADING li:first-child{font-size: 1.8rem;font-weight: 800;padding-bottom: 1rem}

/* 最外框 */
#WARPPER{ width: 100%;}
.no-scroll { overflow: hidden;height: 100%;}


/* 頁首 */
#TOPBAR{display: block; width: 100%;position:fixed;top: 0;left: 0;padding:1rem 2rem;z-index:1001;}
#TOPBAR a{font-size: 1.5rem;color: rgba(255,255,255,1.00)}

#TOPBAR br{display: none}

#HEADERBAR{display: flex;align-items: center;justify-content: center; width: 100%;height: 100%;min-height:600px;position: relative;}
#HEADERBAR li:first-child{flex:0 1 40%}
#HEADERBAR li:last-child{flex:0 1 60%}

.H1{display:flex;flex-direction: column; align-items: center;height: auto;margin:auto;color: rgba(255,255,255,1.00);text-shadow: 1px 1px 5px rgba(0,0,0,1.00) }
.H1 p{display:flex;width: 100%; flex-direction: column;align-items: center;font-size:2.4vw;}
.H1 p span{ font-size: 1.4vw;}
.H1>span{font-size: 2vw;padding-top:1vw}
.H1 img{width:100%;max-width:50rem;padding-bottom:1rem}



.wordbox{display: block; margin:auto;width: 90%; padding-bottom: 10rem; z-index:49;}
.wordbox table{font-size: 1.6rem;color: rgba(255,255,255,1.00);background-color: rgba(56,4,42,0.80);border-radius:3rem;overflow: hidden}
.wordbox table a{display: block; width: 100%;height: 100%; color: rgba(255,255,255,1.00)}
.wordbox table tr:nth-child(odd){background-color: rgba(255,255,255,0.2)}
.wordbox table tr:hover{background-color: rgba(91,13,60,0.05)}
.wordbox td .en{ font-size: 1.5rem}
.wordbox td .en p{padding-bottom:1rem}


#demo-table td,
.css-table .td{
	
}

#demo-table th,
.css-table .th{
	background-color:rgba(0,0,0,0.5);
	color:#ccc;
	font-size: 1.8rem;
	text-align: center;
	background-repeat: repeat-x;
}



/*選單開關*/
.menuW {
   position: fixed;
	top: 6rem;
  right: 4rem;
  margin: auto;
  width:30px;
  height:30px;
  cursor: pointer;z-index: 2000;
}



.menu-wrapper {
	position: relative;
   margin: auto;
	top:13px;
  width:30px;
  height:5px;
}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
  width:30px;
  height:5px;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);
}



.MAIN_NAV div{display: flex;flex-wrap: wrap; width:90%;padding:4rem 2rem;}
.MAIN_NAV div a{display: flex;flex-direction: column; align-items: center; justify-content:flex-start;width:20%;height: 100%; color: rgba(255,255,255,1.00);text-shadow:1px 2px 3px rgba(0,0,0,0.8);padding:1vh 1vw;font-size:1vw;font-family: Noto Sans TC}
.MAIN_NAV div a span{font-size: 1.1rem;color: rgba(255,255,255,0.9);text-align: center}
.MAIN_NAV div a img{margin: auto; width:100%;max-width:10rem;margin-bottom: 1rem;border-radius:50%;border: rgba(255,255,255,0.5) 0.8rem solid}
.MAIN_NAV div a:hover{transform: scale(1.2)}



.MAIN_NAV.active {display: flex;align-items: center;justify-content: center; position: fixed;width:100%;height: 100%; background-color:rgba(0,0,0,0.8);z-index: 1000;opacity: 1;  transform: translateY(0);  pointer-events: auto;}
.MAIN_NAV.active div{width: auto}


#BGANI{display:flex;justify-content: center;align-items: center; width: 100%; height: 100%;position: absolute; top: 0;left: 0;overflow: hidden;z-index:9 }

/* 內容 */
#CONTENT{}

.tdeng td{font-size:1.3rem}
.tdeng td:first-child{font-size:1.8rem}
.tdeng td:nth-child(5) p{padding-bottom:0.8rem;}

/*回上一頁*/
.goBACK{ display:block;  width:45px; height:45px;  border-left:#ccc 1px solid; padding-left:20px;}

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

/* 頁尾 */

footer{display: flex;flex-direction: column; width: 100%;justify-content: center;text-align: center; font-size: 1.3rem;color: rgba(255,255,255,0.8);position: fixed;bottom:0;padding: 1rem;}
footer br{display: none}

.footerHeigh{height:8rem;position: fixed;left: 0; bottom: 0;z-index:50;}



/*分享*/
ul.share-buttons{
	display: flex; margin-top: 2rem
}

ul.share-buttons li{
	line-height: 32px; padding: 0 5px;}

ul.share-buttons .sr-only{
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.title {display: flex;align-items: center;font-size:2.5rem;color: rgba(255,255,255,1.00);padding-top: 2rem;text-shadow: 0 1px 3px rgba(0,0,0,1.00);margin-bottom: 1rem}
.title img{width: 5rem; height:5rem;margin-right:1rem;border-radius:50%;border: rgba(99,27,101,0.5) 0.8rem solid}
.title span { font:1.5rem Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;padding-left: 1rem}
.no1 {  border-radius: 10px;width: 12rem}
.no2 {  border-radius: 50%; width:4rem;height:4rem;position: absolute;right: -2rem;top:-1rem;border: rgba(255,255,255,1.00) 2px solid;cursor: pointer}


.goTOP{ color: rgba(255,255,255,0.6); position:fixed; right:2rem; bottom:0; z-index:3000}
.goTOP span{font-size:5rem;}




.Awards{display: flex;align-items: center;justify-content: center; width: 100%;border-radius:5px;border: rgba(76,89,124,1.00) 1px solid;padding: 1rem;background:rgba(255,255,255,1.00) url("../images/BG.jpg") center no-repeat;background-size:cover;font-size: 1.8rem;font-weight: 800;margin: 0.5rem 0;text-shadow: 0 1px 3px rgba(0,0,0,1.00)}

.fontSize_E td:nth-child(3){font-size: 1.3rem}
.fontSize_E td:nth-child(4){font-size: 1.3rem}
.fontSize_E td:nth-child(5){font-size: 1.3rem}


@media (min-width: 1366px)  {
	.H1width{width: 100%; flex-direction:row; position: fixed;left: 0; top:3.7rem; z-index:500;padding-bottom: 2rem}
.H1width p{align-items: center; width: auto; font-size:1.12vw;}
.H1width p span{ font-size:0.63vw;}
.H1width>span{padding: 0 0 0 2rem}
.H1width img{max-width:12rem;padding: 0 2rem}
	

}






@media (max-width:1366px) and (max-height:768px)   {
	#H1{}
	
	
	
}




@media (max-width: 1024px) and (max-height:768px)   {
	#H1{}
	
	
	
	
}






@media (max-width: 500px)  {
	
	#TOPBAR a{font-size: 1rem;line-height: 150%}
	#TOPBAR br{display: block}
	#HEADERBAR{flex-direction: column;max-height: 100%}
	#HEADERBAR li{flex:0 1 100%}
	.menuW{top:2rem;right:2rem;}
	.goTOP{font-size:3rem; right:1rem;}
	footer{font-size:1rem;padding: 1rem 2rem;text-align: left}	
	footer br{display: block}
	
	.wordbox{width:calc(100% - 2rem); margin:0 1rem 0 1rem;padding-bottom: 1rem}
	.Awards{background-position: center right}
	.H1 p{font-size:3rem;}
	.H1 p span{font-size:2rem;}

	.H1>span{font-size:2.5rem;padding-top:1rem}
	.H1 img{max-width:30rem;}
	
	.MAIN_NAV {display: none}
	.MAIN_NAV div{width:100%;padding:1rem;justify-content: center}
.MAIN_NAV div a{width:30%;padding:1rem;font-size:1.3rem;text-align: center}
	.MAIN_NAV div a img{max-width:5rem}
	.MAIN_NAV div a span{display: none}
	
	.title span{display: none}

	
	
	
}