body{
	background-color:rgb(15, 16, 53);
	margin:0;
	padding: 0;
	width: 100vmax;
	overflow-x: hidden;
}
body::-webkit-scrollbar {
	width: 7px;
}
body::-webkit-scrollbar-thumb {
	background-color: rgba(128, 128, 128, 0.6);
	border-radius: 6px;
}
body::-webkit-scrollbar-thumb:hover {
	background-color: rgba(128,243,243);
}

body::-webkit-scrollbar-track {
	background-color: rgba(128, 128, 128, 0.2);
	border-radius: 6px;}

  /* 載入動畫的樣式 */
 .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

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

    /* 動畫的關鍵幀 */
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
	  100% {
        transform: rotate(1080deg);
      }
    }
     /* 圖片或影片的樣式 */
    .media {
      display: none; /* 默认隐藏 */
	  opacity: 0; /* 默认透明 */
      transition: opacity 0.5s ease-in-out; /* 过渡效果 */
    }
	.media.show {
      opacity: 1; /* 渐变显示 */
    }

/*標題*/

table{
	border:none;
	background-color:rgb(220, 242, 241);
	}
th{
	border:none
		}
ul{
	list-style-type: none;
	margin: 0;
	padding: 1;
	overflow: hidden;
}
li{
	float: left;

}

li a {
	color:rgb(127, 199, 217);
	padding:16px 18px;
	display: inline-block;
	text-decoration:none;
}
li>a.active{
		background-color:rgb(15, 16, 53);
}

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);
	}
.dropdown-content a{
	color:blcak;
	display: block;
}

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

/*photoshare*/
.Title{
	left: 10%;
	width:20%;
	position: relative;
	font-family: "新細明體";
	color:rgb(220, 242, 241);
	user-select: none;
	}
.Subtitle{
	position:relative;
	width:20%;
	left:10%;
	color:rgb(127, 199, 217);
	user-select: none;
}

.gallery{
	left: 10%;
	max-width:80%;
  	position:relative;
	white-space: nowrap;
	overflow: auto;
}

.gallery img {
  margin: 10px;
  cursor: pointer;
  border-width: 3px 2px 6px;
  border-color: #FFFFFF;
}

.gallery::-webkit-scrollbar {
  width: 4px;
  height:8px;
}

.gallery::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.6);
  border-radius: 6px;
}

.gallery::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128,243,243);
}

.gallery::-webkit-scrollbar-track {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 6px;
}

/*Slideshow */
.Slideshow{
	width:800px;
	height:450px;
	margin:50px auto;
	transform-style:preserve-3d;
	/*增加動畫*/
	animation: rotate 43s linear infinite ;
	

}
.Slideshow:hover{
	animation-play-state:paused;
}

@keyframes rotate {
	0% {
		transform: rotateY(0);

	}

	100%{
		transform: rotateY(360deg);
	}
}

.Slideshow-photo{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
	#photo1{
	transform:translateZ(800px);
	}
	#photo2{
	/*先轉後移動*/
	transform: rotateY(60deg)translateZ(800px);
	}
	#photo3{
	/*先轉後移動*/
	transform: rotateY(120deg)translateZ(800px);
	}
	#photo4{
		/*先轉後移動*/
		transform: rotateY(180deg)translateZ(800px);
	}
	#photo5{
		/*先轉後移動*/
		transform: rotateY(240deg)translateZ(800px);
	}
	#photo6{
		/*先轉後移動*/
		transform: rotateY(300deg)translateZ(800px);
	}


	.copyright{
		background-color: rgb(15, 16, 53);
		color:rgb(220, 242, 241);
	  user-select: none;
			}