html{
  scroll-behavior: smooth;
}
body{
	font-family: 'Microsoft JhengHei',Arial, Helvetica, sans-serif;
	text-decoration: none;
  margin: 0;
}

table, th, td{
  border: 1px solid black;
  border-collapse: collapse;
}

table{
  margin-top: 16pt;
}

th{
  padding: 5px;
}

td{
  padding: 5px;
}

a {
  text-decoration: none;  
}

/* unvisited link */
a:link {
  color: darkcyan;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: brown;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: darkcyan;
  text-decoration: underline;
  
}

/* selected link */
a:active {
  color: darkcyan;
  text-decoration: underline;
}

li{
  padding: 2px 0;
}

p{
  line-height: 2em;
}

figcaption{
  display: block;
}

#myBtn { 
  /*回到頂端按鈕*/
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: steelblue;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 60px;
  opacity: 0.8;
}

#myBtn:hover {
  background-color: coral;
}

/* ------------- 標題欄 ---------------- */
#logo{
  font-family: 'Times New Roman', Times, serif;
  width: 80%;
}

#main-header{
  position:relative;
  top: 0%;
	text-align: left;
	background-color: steelblue;
	color: white;
	margin: 0;
  padding-left: 20px;
}

#main-header h1{
  margin: 0;
  padding: 10px 10px 0 10px;
}

#main-header h3{
  margin: 0;
  padding: 0 10px 10px 10px;
}

#main-header a{all:unset;cursor: pointer;}

#sub-header{
  text-decoration: none;
	text-align: right;
	color:steelblue;
}

#sub-header h5{
	margin: 0;
	padding: 5px;
}

#sub-header a {
	text-decoration: none;
	color: inherit;
}

/* -------------------- 導覽欄 ----------------- */

.Big-overlaynav{visibility: visible;}
.openoverlaynav, .overlaynav, .overlaynav-content, .closebtn{visibility: hidden;display: none;}

.Big-overlaynav-content {
    margin: 0px auto;
    background-color: steelblue;
    border-bottom: 2px solid white;
}

.Big-overlaynav-content a{
  text-align: center;
  color: white;
  display: inline-block;
  width: 11.5%;
  transition: width .4s ease-in-out;
  padding: 10px 0 10px 0;
  border-radius: 2px;
  font-size: larger;
}

.Big-overlaynav-content a:hover{
  text-decoration: none;
  background-color: coral;
  width: 12.0%;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  opacity: 0.9;
  display: block;
}

.sticky + .content {
  padding-top: 60px;
}

/* ---------------------------------------------------- 本文 ------------------------------------------------*/
.main {}

section {
  margin-left: 32pt;
  margin-right: 32pt;
}

/* Style buttons */
.btn {
  background-color: steelblue; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: 12px 16px; /* Some padding */
  font-size: 32px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */

  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 10px;
}

.btn a {
	text-decoration: none;
	color: inherit;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: darkcyan;

}

/* ------------------------------------------------ indexChs page ---------------------------------------------------------------*/


.midcontent {
  float: left;
  margin: 0 20px;
}

.midcontent table {
  border: 1px solid darkcyan;
}

.leftimg {
  margin:20px;
	float: left;
}

.leftimg img {
  vertical-align: middle;
  width: :auto;
  height: 135px;
}

.rightimg {
  margin-top: 20px;
	float: left;
}

.rightimg img {
  vertical-align: middle;
  width: :auto;
  height: 135px;
}

/*-- news page--*/
#news li{
  padding-top: 20px;
}

/*------------------SLIDESHOW IMGs---------------------------*/
/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: 50px auto;
  text-align: left;
}

.mySlides img{
  border-radius: 10px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 10px 10px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 10px 0 0 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
  text-decoration: none;
  color: white;
}


/* Caption text */
.text {
  text-shadow: 0 0 5px black;
  color: #f2f2f2;
  font-weight: bolder;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/5 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
  text-decoration: none;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/*---------End of SLIDESHOW------------*/



/* ------------------------------------------------ research --------------------------------------------------*/

#research td{
  text-align: center;
}

#research img{
  height: 150px;
}

/* ------------------------------------------ Clear floats after the columns -----------------------------------------*/
section:after {
  content:"";
  display:table;
  clear: both;
}

/* ------------------------------------------- footer ------------------------------------------------*/
#main-footer {
  position: relative;
  bottom: 0%;
	margin: 20px auto;
  background-color: white;
}

#main-footer p {
  margin-bottom: 10px; 
	text-align: center;	
	font-size: 10pt;
}



/*---------------------------------------------------RWD RESPONSIVE DESIGN -------------------------------------------------------*/

@media only screen and (max-width: 800px){
    #main-header h1{font-size: 1.2em;}

    .Big-overlaynav{display:none;visibility: hidden;}
    .openoverlaynav, .overlaynav, .overlaynav-content, .closebtn{display: block;visibility: visible;}

    .openoverlaynav{
      visibility: visible; 
      position: absolute; 
      top: 0%;  
      right: 0; 
      width: 20%; 
      font-size: 2em; 
      cursor:pointer; 
      margin: 10.8px 5px; 
      text-align: center; 
      color: lightblue;
    }
	#home-header {
		width: auto;
	}

	#home-header h1 {
		font-size: 1.5em;
	}
	 #sub-header {
    display: block !important;
    }

	.homecontent {
		bottom: 16.666%;
		width: 100%;
		display: flex;
		flex-direction: column;  /* 垂直排列按鈕 */
		align-items: center;     /* 置中 */
		gap: 12px;                /* 按鈕之間的間距 */
	}

	.homecontent a {
		margin: 0;        /* 移除多餘 margin */
		width: auto;
	}
    .openoverlaynav a:hover{color:white;text-decoration: none;}
    .overlaynav {
      height: 0%; 
      width: 100%; 
      position: fixed; 
      z-index: 1; 
      top: 0; 
      left: 0; 
      background-color: rgba(70,130,180,0.95);
      overflow-y: hidden; 
      transition: .4s;
    }

    .overlaynav-content {
      position: relative; 
      top: 12.5%; /*n個NAV連結項目, 比例設定成 100%/n */
      width:100%; 
      text-align: 
      center; 
      margin-top: 30px;}

    .overlaynav-content a {
      padding: 8px; 
      text-decoration: none;
      font-size: 1.5em; 
      color: lightblue; 
      display: block; 
      margin: 0 auto;
      width: 50%; 
      transition: width .4s ease-in-out;
    }
    .overlaynav a:hover, .overlaynav a:focus {color: #f1f1f1;}
    .overlaynav-content a:hover{background-color: coral; width: 60%;}
    .closebtn{position: absolute; top: 20px; right: 45px; font-size: 60px;}
    a.closebtn{color: lightblue; text-decoration: none}
    a.closebtn :hover{color:white;}

    section{margin: 10px;}
    table{width: 100%;}
    #research img{width: 100%;height: auto;}


}