body{
	background:#daf2fd;
	margin:0;
	padding: 0;
	height:inherit;
	max-height:100%;
	min-width:850px;
	}
/* 加载动画的样式 */
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    .loading .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;

    }

    /* 动画的关键帧 */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
	  100% {
        transform: rotate(720deg);
      }  
    }
     /* 图片或视频的样式 */
    .media {
	  display:none;
    opacity: 0; /* 默认透明 */
    transition: opacity 2s ease-in-out; /* 过渡效果 */
    }
	  .media.show {
      opacity: 1; /* 渐变显示 */
    }

/*標題*/
.top-of-page{
	position:relative;
	max-width:95%;
	margin-bottom: 10px auto;
	}
table{
	border:none;
	background-color:#FFF;
	}
th{
	border:none
		}
ul{
	list-style-type: none;
	margin: 0;
	padding: 1;
	overflow: hidden;
}
li{
	float: left;

}

li a {
	color:#000;
	padding:16px 18px;
	display: inline-block;
	text-decoration:none;
}
li>a.active{
		background-color:#CCC;
}

li>a:hover:not(a.active),
.dropbtn:hover {
	background-color:#555;
}

.dropdown-content {
	display:none;
	position:absolute;
	background-color:#f9f9f9;
	min-width:100px;
	box-shadow : 0 8px 16px rgba(0,0,0,.2);
	z-index:100;}

.dropdown-content a{
	color:blcak;
	display: block;
	
}

.dropdown-content a:hover {
     background-color: #f1f1f1;
     color: deepskyblue;
 }
.dropdown:hover .dropdown-content {
     display: block;
}
/*檔案*/

/*圖片展示*/
* {
	box-sizing: border-box;
}
.mySlides {display: none}
img {
	vertical-align: middle;
	z-index:99;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  z-index:99;  
  }
.photo-backgroud{
	width:100%;
	background-color:rgba(140, 140, 140, 0.062);
	z-index:98; 
	}

/* 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: 16px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color:rgb(128,128,128,0.15);
}

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

/* 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);
}
/* > 反方向
.prev{
	-moz-transform:scaleX(-1);
	-webkit-transform:scalex(-1);
	-o-transform:scalex(-1);
	transform: scaleX(-1);
} */

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  user-select: none;
}

/* Number text (1/3 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;
}

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

@keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/* Calender*/
    table {
		border:none;
      	border-collapse: collapse;
      	width: 100%;
    }
    th, td {
      padding: 10px;
      text-align: center;
      border: 1px solid #ccc;
    }
    th {
      background-color: #f2f2f2;
      font-weight: bold;
    }
    td {
      cursor: pointer;
    }
    td:hover {
      background-color: #e6e6e6;
    }
    td.current-day {
      background-color: #ccc;
      color: white;
      font-weight: bold;
    }
    .event {
      font-weight: bold;
      padding: 5px;
      margin-bottom: 5px;
    }
    .event-red {
      background-color: #54f3eb;
      color: #000000;
    }
    .delete-button {
      cursor: pointer;
      color: #ff0000;
      font-weight: bold;
      font-size: small;     
    }
#calender01 {
	font-family: Georgia, Times New Roman, Times, serif;
	min-width:250px;
}
#prevMonthButton{
	-moz-transform:scaleX(-1);
	-webkit-transform:scalex(-1);
	-o-transform:scalex(-1);
	transform: scaleX(-1);
}

/*常用網站*/

.websitelink {
	color: rgba(0, 119, 255, 0.925);
	font-size: 20px;
	position: relative;
	text-align: left;
	border:0;
	scroll-padding: 0;
	border-spacing: 0;
	bottom: inherit;
	min-width: 650px;	
  user-select: none;
   }
.button-icon{
	max-width: 85px;
  max-height: 70px;
	border:none;
	box-align: absmiddle;
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:relative;
	white-space:nowrap;
	overflow:auto;
  border-radius: 10px;
		}
.button01{
	cursor:pointer;
	}
.button01:hover{
	background-color:#aabaca;
}
	
.table-link{
	background:#daf2fd;
  	width:85%;
	position: relative;

}
.link-button01{
	height:100px;
	justify-content: center;
  display: inline-flex;
	}

.copyright{
	background-color: #3F6E9A;
	color:#3F6E9A;
  user-select: none;
		}
.righthandside{
	position: relative;
	}