@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/cwtexyen.css);
/* font-family:'cwTeXYen', Calibri, sans-serif; */
/* 綠色 #2b8f47  rgba(43, 143, 71, 0.7) */
/* 橘色 #ce554d rgba(206, 85, 77, 0.7) */ 
/* 藍色 #0069a7 rgba(0, 105, 167, 0.7) */
/* 藍色 #1b8ecb  rgba(27, 142, 203, 0.7) */

/* CSS reset & default ============================================================================================== */
* { padding:0; margin:0; }
html, body { height:100%; /*高度滿版設定*/ }
body { color:#333; background-image:url(../images/light_grey.png); }
h1, h2, h3, h4 { font-family:'cwTeXYen', Calibri, sans-serif; font-weight:bold; line-height:1.5em; margin:10px 0; }
h1 { font-size:1.6em; color:#292e8c; text-align:left; }
h2 { font-size:1.4em; }
h3 { font-size:1.2em; }
h4 { }
p { line-height:1.5em; margin:5px 0; }
ul, ol, li { list-style-type:none; padding:8px 0; } 
ul { padding-left:20px; }
a { text-decoration:none; color:#0069a7; }
a.link { color:#0069a7; }
a:hover { color:#F30; }
i { /*margin-right:10px;*/ }
i.news { width:15px; text-align:center; }
:focus { outline:none;/*清除點選連結時出現的外框。若設計無障礙網頁，則不可設定此項*/ } 



/* <header> ============================================================================================== */
header { position:relative; z-index:99; background-color:rgba(255,255,255,0.5); border-bottom:10px solid #cbb013; padding:2%; height:120px; }
	/* <div id="logo"> =================================== */
	header #logo { width:80%; margin:0 auto; }
	header #logo2 { position:absolute; bottom:-20px; right:12%; }
	header #logo2 #logoAFOSR, header #logo2 #logoAFRL, header #logo2 #logoAOARD { position:absolute; width:90px; height:auto; bottom:-20px; }
	header #logo2 #logoAFOSR { right:260px; }
	header #logo2 #logoAFRL { right:130px; }
	header #logo2 #logoAOARD { right:0; }
	header #logo img { width:auto; height:80%; max-height:120px; }
	/* <div id="mainNav"> =================================== */
	header #mainNav { position:absolute; bottom:2px; right:calc(12% + 390px); }
	header #mainNav a { display:inline-block; height:30px; line-height:30px; font-family:'cwTeXYen', Calibri, sans-serif; color:#369; font-size:1.4em; }

@media(max-width:1280px){ header #logo img { max-height:120px; } }	
@media(max-width:1024px){ header { padding:1%; }
						  header #logo { width:90%; } 
						  header #logo img { max-height:110px; }
						  header #logo2 { right:7%; }
						  header #logo2 #logoAFRL { right:110px; }
						  header #logo2 #logoAFOSR { right:220px; } 
						  header #logo2 #logoAFOSR, header #logo2 #logoAFRL, header #logo2 #logoAOARD { width:70px; }
						  header #mainNav { bottom:0; right:calc(12% + 280px); }  }	
@media(max-width:768px){ header { padding:10px; height:110px; }
						 header #logo img { max-height:100px; }  
						 header #logo2 #logoAFOSR, header #logo2 #logoAFRL, header #logo2 #logoAOARD { width:60px; }
						 header #logo2 #logoAFRL { right:80px; }
						  header #logo2 #logoAFOSR { right:160px; }
						  header #mainNav { right:calc(12% + 210px); } 
						  header #mainNav a { font-size:1.2em; }}	
@media(max-width:640px){ header { height:100px; }
						header #logo { width:100%; }
						header #logo img { max-height:90px; }  }	     
@media(max-width:560px){ header { padding:5px; }
						header #logo img { max-height:80px; }  }	
@media(max-width:480px){ header { height:90px; }
						header #logo img { max-height:60px; }  }	

/* <div id="main"> ============================================================================================== */
#main{ overflow:hidden; width:80%; margin:0 auto; padding:1%; min-height:500px; }
		
	#main section { padding:2%; }
		#main section img { float:left; margin:0 3% 1% 0; width:55%; height:auto; border-radius:10px; }
		#main section h1 { margin-bottom:20px; }
		#main section h1:before { float:left; content:""; display:block; width:10px; height:1.5em; margin-right:15px; background-color:#292e8c; }
		/*#main section h1:after { float:right; content:""; display:block; width:60%; height:1px; background-color:#369; margin-top:18px; }*/
		#main section p { text-align:justify; }
			#main section p span.tag { background-color:#CCC; padding:5px; border-right:1px #333 solid; font-weight:bold; }
		#main section li.cjk-ideographic { list-style-type:cjk-ideographic; }
		#main section li.decimal { list-style-type:decimal; }
		#main section li.lower-latin { list-style-type:lower-latin; }
		#main section li.circle { list-style-type:circle; }
/*		#main section a { display:block; width:calc(100% - 22px); padding:10px; background-color:#E7E7E7; border:1px solid #CCC; font-size:1.2em; font-family:'cwTeXYen', Calibri, sans-serif; font-weight:bold; }
*/


		#main section .table { display:table; /*overflow-x:auto;*/width:96%; }
		#main section .tableMobile { display:none; } 		
		#main section .table .tr { display:table-row; }
		#main section .table .tr:hover { background-color:#E6E6E6; }
		#main section .table .th { display:table-cell; padding:10px; border-bottom:1px dotted #CCC; width:10%; }
		#main section .table .td { display:table-cell; padding:10px; border-bottom:1px dotted #CCC; }

		#main section .table .time { width:15%; }
		#main section .table .subject { width:20%; }

@media(max-width:768px){ #main section img { display:block; float:none; width:95%; margin:0 auto 20px auto; } }


	/* ==== 圖文區 ===================================================================================== */
	.figureArea { overflow:hidden; padding:2%; }
		.figureArea .imgArea { float:left; width:60%; }
		/* <div class="video-container"> 嵌入Youtube影片(RWD) http://eddychang.me/blog/18-joomla/47-iframe-rwd.html =====*/
		.figureArea .imgArea .video-container {  position:relative; padding-bottom:56.25%; padding-top:30px; height:0; overflow:hidden; }
		.figureArea .imgArea .video-container iframe, #pressRelease .video-container object, #pressRelease .video-container embed {
		position:absolute; top:0; left:0; width:100%; height:100%; }
		.figureArea .imgArea img { width:98%; height:auto; margin:0 auto; }
		/*.figureArea .imgArea img.character { max-width:130px; border-radius:10px; }
		.figureArea .imgArea img.markProduct { width:auto; max-height:250px; }*/
		.figureArea .imgArea figcaption { width:100%; line-height:40px; font-family:'cwTeXYen', Calibri, sans-serif; font-size:20px; font-weight:bold; text-align:center; }		
		.figureArea .textArea { float:right; width:38%; }
		.figureArea .textArea a { display:block; padding:10px; text-align:center; /*border:1px solid #CCC;*/ background-color:#CCC; }

@media(max-width:768px){ .figureArea .imgArea { width:96%; padding:2%; }
						 .figureArea .textArea { width:96%; padding:2%; } }	


	/* ===== <div id="flexBlock"> 區塊設定 ===== */
	#flexBlock { display:flex; flex-wrap:wrap; /*background-color:#9F6;*/ }
		#flexBlock .subBlock { position:relative; display:flex; flex-direction:column; align-items:stretch; margin:1%; padding:2% 1%; background-color:#FFF; }
		#flexBlock .subBlock img { width:100%; margin:0 auto 5px; height:auto; }
		#flexBlock .subBlock img.committee { max-width:130px; } /* for Committee */
		#flexBlock .subBlock img.lecturer { width:80%; } /* for Lecture Series */
		#flexBlock .subBlock .textArea { width:80%; margin:0 auto; display:flex; flex-direction:column; flex:1 1 auto; text-align:center; }
		#flexBlock .subBlock .textArea a { display:block; margin-top:auto; padding:10px; text-align:center; background-color:#fff; }
		#flexBlock .subBlock .textArea a.lectureSeries { background-color:rgba(206, 85, 77, 0.7); color:#FFF; }
		#flexBlock .subBlock .yearBlock { position:absolute; top:-10px; left:-10px; width:60px; height:45px; border-radius:50%; background-color:rgba(206, 85, 77, 0.7); border:rgba(27, 142, 203, 0.9); font-family:'cwTeXYen', Calibri, sans-serif; font-size:24px; font-weight:bold; color:#FFF; text-align:center; padding-top:15px; } /* for Lecture Series */

		#flexBlock .subBlock_2column { width:46%; } /* for Lecture Series */
		#flexBlock .subBlock_3column { width:29.3%; } /* for Lecture Series */
		#flexBlock .subBlock_4column { width:21%; } /* for Committee */



@media(max-width:1024px) { #main { width:96%; } }
@media(max-width:768px) { #flexBlock .subBlock_3column { width:46%; }
						  #flexBlock .subBlock_4column { width:29.3%; } }
@media(max-width:640px){ section h1:before, section h1:after { width:20%; }	}
@media(max-width:480px) { #flexBlock .subBlock_3column { width:96%; }
						  #flexBlock .subBlock_4column { width:46%; } }



/* <footer> ============================================================================================== */
footer { overflow:hidden; background-image:url(../images/bg.jpg); padding:20px 8%; background-color:#cbb013; color:#FFF; min-height:200px; }

	footer .subBlock { float:left; width:46%; padding:1%; margin:0 1%;}	
	footer .subBlock img {  }	
	
@media (max-width:768px){  }
@media (max-width:640px){ footer .subBlock { width:98%; } }
	


/* <div id="copyright"> ============================================================================================== */
#copyright { height:40px; background-color:#a7793b; color:#FFF; text-align:center; padding-top:10px; }