body {
	margin: 0;
	text-align: center;
	font-family: Agency FB, SimHei, STHeiti, Microsoft JhengHei, Eurostile;
	font-size: 14px;
	line-height: 24px;
	color: #FFFFFF;
	background: #072621;
}


a {
	outline: none; 
	text-decoration: none;
	color: #8E0101;
	display: block;
	color: #f5deb3;
	padding: 0;
	font-weight: bold;
}

a:hover {
	color: #939598;
	font-weight: bold;
}

a:active {
	color: white;
	font-weight: bold;
}

a:visited {
	color: white;
	font-weight: bold;
}

h1 {
	font-size: 2.0em;
	font-weight: bold;
	color: #FFFFFF;
}


h2 {
	font-size: 1.2em;
	font-weight: bold;
}

h3 {
	font-size: 1.35em;
	line-height: 23px;
}

ol {
	margin:  5px 0 0 20px;
	padding:  3px 0 3px 0;

}

ul {
	color: #ff7e00;
	list-style: square;
	margin:  0 0 0 20px;
	padding:  3px 0 0 0;
	font-weight: bold;

}

li {
	text-align: left;
	margin: 0;
	padding: 0 0 0 0;
}




/* whole */
#whole
{
	width: 1100px;
	margin: 0 auto;
}

.content-menu {
	width: 190px;
	margin: 380px 0 0 0;
	padding: 0;
	height: auto;
	font-family: Agency FB, SimHei, STHeiti, Microsoft JhengHei, Eurostile;
	font-size:120%;
}

/*Photo */
#photo {
	
	float: left;
	width: 342px;
	margin: 30px 0 0 0;
}


#top
{
	width: 750px;
	height: 76px;
	margin: 10px 0 0 200px;
	padding: 0;
	background: url(main/superconductor.png) top no-repeat;
	background-position: 180px 12px;
}



/* Page */

#page {
	width: 750px; 
	margin: 5px 0 50px 200px;
	padding: 0;
	text-align: left;
	border: 1px white solid;
}

.page-up {
	height: 100px;
	margin: 5px auto;
	padding:0;
	background: url(main/laboratory.png) no-repeat top;
	background-position: 280px 0;
}

.page-menu-L {
	float: left;
	with: 80px;
	margin: 0 0 30px 10px;
	padding: 0;
	font-family: Agency FB, SimHei, STHeiti, Microsoft JhengHei, Eurostile;
	font-size:130%;
}

.page-menu-R {
	position: relative;
	with: 80px;
	margin: 0 300px 30px 350px;
	padding: 0;
	font-family: Agency FB, SimHei, STHeiti, Microsoft JhengHei, Eurostile;
	font-size:130%;
}

.page-content {
	margin: 100px 30px 50px 100px;
	padding: 0;
	height: auto;
	font-family: Agency FB, SimHei, STHeiti, Calibri, Times New Roman, SimHei, STHeiti, Microsoft JhengHei, Eurostile;
	font-size:120%;
}



#page ul {
	list-style: none;
	margin:  0;
	padding:  0;
}

#page li {
	text-align: left;
	margin:  0;
	padding:  5px 0 0 0;
}

#page a {
	outline: none; 
	display: block;
	color: #FFB700;
	text-decoration: none;
	padding: 0;
	font-weight: bold;
}  


#page a:hover {
	color: #deb887;
	font-weight: bold;
} 


#page a:active {
	color: #939598;
	font-weight: bold;
}


#page a:visited {
	color: #f5deb3;
	font-weight: bold;
}


.smallfont {
	font-size: 90%;
	line-height: 16px;
} 

.mfont {
	color: #00C3FF;
} 

.table {
	width: 570px; 
	margin: 0 0 0 30px;
	padding: 0;
	height: auto;
	font-size: 0.9em;

}

.table td {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	border-bottom-color: #00C3FF;
}


/*CSS 區塊*/
.anime{
  position: relative;
  height:300px;
  margin-top:20px;
}

.anime h1{
  	font-size: 2.0em;
	font-weight: bold;
	font-family: Agency FB, SimHei, STHeiti, Microsoft JhengHei, Eurostile;
	color: #FFFFFF;
}
 
.anime a{
  display: block;
  position: absolute;
  top:20%;
  opacity: 0;
  filter: alpha(opacity=0);
  /*動畫全長時間設定*/
  -webkit-animation: slider 48s linear infinite;
  animation: slider 48s linear infinite;
}
 
/*動畫關鍵影格, slider動畫名字*/
/*影格的時間是以百分比表示。若以 「進退場 0.5 秒」+「一張圖片顯示3秒」，一共有5張圖片輪撥的狀況下，共需20秒。
100%/20=5%  (5% = 1秒)，所以關鍵影格中的三個關鍵數值就會是 2.5%(0~0.5秒)；17.5%(0.5秒~3.5秒)；20%(3.5秒~4秒)*/

  @-webkit-keyframes slider {
    2.1% {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    8.4% {
    opacity: 1;
    filter: alpha(opacity=100);
    }
   10.5% {
    opacity: 0;
    filter: alpha(opacity=0);
    }
  }
  @keyframes slider {
    2.1% {
      opacity: 1;
      filter: alpha(opacity=100);
    }
    8.4% {
    opacity: 1;
    filter: alpha(opacity=100);
    }
    10.5% {
    opacity: 0;
    filter: alpha(opacity=0);
    }
  }
 
/*每個圖片相隔4秒*/
 .anime a:nth-child(1) {	 -webkit-animation-delay: 0s;	animation-delay: 0s;	}
 .anime a:nth-child(2) {	 -webkit-animation-delay: 4s;	animation-delay: 4s;	}
 .anime a:nth-child(3) {	 -webkit-animation-delay: 8s;	animation-delay: 8s;	}
 .anime a:nth-child(4) {	 -webkit-animation-delay: 12s;	animation-delay: 12s;	}
 .anime a:nth-child(5) {	 -webkit-animation-delay: 16s;	animation-delay: 16s;	}
 .anime a:nth-child(6) {	 -webkit-animation-delay: 20s;	animation-delay: 20s;	}
 .anime a:nth-child(7) {	 -webkit-animation-delay: 24s;	animation-delay: 24s;	}
 .anime a:nth-child(8) {	 -webkit-animation-delay: 28s;	animation-delay: 28s;	}
 .anime a:nth-child(9) {	 -webkit-animation-delay: 32s;	animation-delay: 32s;	}
 .anime a:nth-child(10) {	 -webkit-animation-delay: 36s;	animation-delay: 36s;	}
 .anime a:nth-child(11) {	 -webkit-animation-delay: 40s;	animation-delay: 40s;	}
 .anime a:nth-child(12) {	 -webkit-animation-delay: 44s;	animation-delay: 44s;	}
 
/*當滑鼠移動到圖片的區塊時，動畫暫停*/
  .anime a:hover{
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  }