@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');

/* ================================================================== CSS reset & default ============================ */
* { padding:0; margin:0; box-sizing:border-box; }
html, body { height:100%; }
body { width:100%; margin:0 auto; background:url(../images/light_grey.png) repeat; color:#333;}
h1, h2, h3, h4, h5 { font-family:'Montserrat', Calibri, sans-serif; font-weight:bold; padding:1% 1% 1% 0; }
h1 { font-size:24px; color:#514fa2; }
h2 { font-size:22px; color:#333; }
h3 { font-size:20px; }
h4 { font-size:18px; color:#600; }
h5 { font-size:16px; }
p {line-height:1.5em; text-align:justify; word-break:break-all;/**/ }
ul, ol, li { list-style:none; } 
a { text-decoration:none; }
i { margin-right:10px; }
t-red { color:#F00; }
t-bold { font-weight:bold; }

#wrapper { position:relative; width:100%; min-height:100%; margin:0 auto; padding-bottom:140px; }
#mainLink { font-size:14px; text-align:right; padding:5px 10px 0 0; }

#header {  }
	#header #webname { width:40%; max-width:600px; height:auto; padding:0 0 10px 30px; }
		
	@media (max-width:1024px){ #header #webname { width:50%; } }
	@media (max-width:768px){ #header #webname { width:75%; padding:0 0 10px 0;} }
	@media (max-width:480px){ #header #webname { width:100%; } }

/* === nav ===================================================== */
#globalNav { }
#globalNav ul { overflow:hidden; width:100%; background-color:#CCC; height:40px; }
#globalNav ul li { float:left; width:calc(100% / 6); border-right:#FFF 1px solid; }
#globalNav ul li:last-child { border-right:none; }
#globalNav ul li a { display:block; width:100%; height:100%; padding:0 10px; line-height:40px; text-align:center; color:#333; }
#globalNav ul li a:hover { color:#FFF; background-color:#333; }

	
	#nav4Mobile { display:none; }
						  
	@media (max-width:768px){ 
	#globalNav { display:none; }
	#nav4Mobile { display:block; position:relative; }
	#menuList { position:absolute; bottom:-30px; right:30px; }
	#menuList a { display:block; width:50px; height:50px; padding:8px 11px; text-align:center; line-height:50px; color:#FFF; background-color:rgba(51,51,51,0.9); border-radius:5px; border:1px #FFF solid; }
	#menuList a:hover { background-color:#346464; }
	#mobileNav { background-color:#999; display:none; }
	#mobileNav li a  { display:block; height:45px; border-top:solid 1px #FFF; padding:10px 10px 10px 20px; color:#FFF; }
	#mobileNav li a:hover  { background-color:#333; } }


/* main ============================================================================================== */

#main { overflow:hidden; width:80%; margin:0 auto; padding:2%; }
	
	#navBar { font-size:14px; color:#CCC; border-bottom:1px solid #CCC; margin-bottom:10px; }
		#navBar .thisPage { font-size:15px; font-weight:bold; color:#369; }

	#content { }
		#content section { padding-left:2%; }	
		
		#content article { padding-left:2%; }
			#content article img.cleanroom { width:48%; height:auto; }	
			#content article h2 { color:#003; margin-bottom:10px; }
			#content article h2:before { content:""; float:left; width:5px; height:30px; background-color:#003; margin-right:10px; }
			#content article h3 { color:#369; margin-bottom:10px; }
			#content article h3:before { content:""; float:left; width:3px; height:25px; background-color:#369; margin-right:10px; }
			
			#content article .newsTable { overflow:hidden; }
			#content article .newsTable .newsContent { float:left; width:65%; }
			#content article .newsTable .newsList { float:right; width:30%; padding:1%; }
			
			#content article .table {}
			#content article .table .tr { padding:5px; }
			#content article .table .tr .td {}
			#content article .table .tr .td span.news_date { font-size:14px; color:#999; }


			#content article #facility { height:300px; width:auto;/*width:60%; height:auto; max-width:400px; border-radius:10px;*/ }
			#content article a { text-decoration:underline; }
			#content article ol { list-style-type:decimal-leading-zero; padding:5px 0 5px 20px; }					
				#content article ol li { list-style-type:disc; padding:5px 0 5px 0; }	
				#content article ul li { padding:5px 0 5px 0; }			  

	/* for 簡介頁面之最新消息 ==========================================================  */
	#news .newsIcon { padding:2px 10px; background-color:#F99; border-radius:20px; color:#FFF; font-size:15px; }
	#news .annDate { font-size:13px; font-style:italic; color:#999; padding-left:10px; }
	ul#newsList  { padding-left:30px; }
	ul#newsList li { list-style-type:disc; }

	/* for 簡介頁面之儀器設備 ========================================================== 

	.facilityIntro { display:flex; justify-content:flex-start; align-content:space-around; flex-wrap:wrap; }
	.facilityIntro .subFacility { width:18%; margin:1%; position:relative; overflow:hidden; cursor:pointer; }
	.facilityIntro .subFacility a.more { position:absolute; left:0; top:45px; height:30px; background-color:rgba(235,150,138,0.8); color:#FFF; line-height:30px; font-size:15px; font-weight:bold; padding:2px 10px; border-top-right-radius:15px; border-bottom-right-radius:15px; }
	.facilityIntro .subFacility a:visited { color:#FFF; }
	.facilityIntro .subFacility img { width:100%; height:auto; }
	.facilityIntro .subFacility div { position:absolute; left:0; bottom:-40px; width:100%; height:40px; background-color:rgba(0,0,0,0.5); color:#FFF;
			  padding:5px; }
	.facilityIntro .subFacility div a.reservation { color:#FFF; }
	.facilityIntro .subFacility div a:visited { color:#FFF; }*/
	
	/* for 簡介頁面之儀器設備 ========================================================== */

	.facilityIntro { display:flex; justify-content:flex-start; align-content:space-around; flex-wrap:wrap; }
	.facilityIntro .subFacility { width:18%; margin:1%; position:relative; overflow:hidden; cursor:pointer; }
	.facilityIntro .subFacility p { position:absolute; left:0; top:45px; height:26px; background-color:rgba(235,150,138,0.8); color:#FFF; line-height:30px; font-size:15px; font-weight:bold; padding:2px 10px; border-top-right-radius:15px; border-bottom-right-radius:15px; }

	/* for 連絡我們 ========================================================== */
	#category { display:flex; justify-content:flex-start; align-content:space-around; flex-wrap:wrap; }
		#category .cat01 { background-color:#FFC; }
		#category .cat02 { background-color:#CFC; }
		#category .cat03 { background-color:#FCF; }
		#category .cat04 { background-color:#B4EBF4; }
		#category .facilities { width:31%; min-height:250px; margin:1%; }
			#category .facilities .labName { font-size:20px; font-weight:bold; color:#FFF; text-align:center; padding:3px; background-color:#999; }
			#category .facilities .facName { padding:10px; }
			#category .facilities .facName a { display:block; padding:5px;}



@media (max-width:1400px){ .facilityIntro .subFacility { width:23%; }}

@media (max-width:1024px){ #main { width:90%; margin:auto; }
						  #category .facilities { width:48%; } 
						  .facilityIntro .subFacility { width:31%; }}

@media (max-width:768px){ #main { width:100%; } 
							.facilityIntro .subFacility { width:48%; } }
@media (max-width:480px){ #category .facilities { width:100%; margin-bottom:10px; } 
						#menuList { bottom:-30px; right:10px; }
						#menuList a { width:50px; height:50px; padding:7px 8px; line-height:50px; }
						.facilityIntro .subFacility { width:98%; } }
						  
						  

/* footer ============================================================================================== */
#footer { position:absolute; left:10%; bottom:0; width:80%; }
	#footerInfo { width:100%; margin:0 auto; padding:1%; font-size:13px; text-align:center; border-top:5px #333 solid; height:120px; }
		#contactInfo { width:48%; float:left; text-align:right; }
		#location { width:48%; float:right; text-align:left; }
			#location iframe { width:100%; max-height:90px; }


@media (max-width:768px){ #footer { left:0; width:100%; } }
@media (max-width:480px){ #contactInfo { width:98%; float:left; text-align:right; }
						#location { width:98%; float:right; text-align:left; } 
						#wrapper { padding-bottom:180px; } }



#spcmenu {
	position: fixed;  
	top: 100px;
	right: 0;
	/*background-color:#1AFF00;*/
	width: 50px;
	height: 185px;	 
}
#spcmenu a {
	display: block;
	background-color:#FF0000;
	widhth: 40px;
	height: 40px;
	margin: 5px;
}