@charset "UTF-8";
/* CSS Document */
/* ===CSS reset & default ===================================================== */
* { padding:0; margin:0; box-sizing:border-box; }
html, body { height:100%; }
body { width:100%; color:#333; font-family: "Microsoft JhengHei", "New MingLiu", Verdana, Arial, sans-serif; font-size:15px; position:relative; }
h1, h2, h3, h4, h5, h6 { font-weight:bold; padding:1% 1% 0 0; margin-bottom:10px; }
p { line-height:1.5em; text-align:justify; /*word-break:break-all;*/ margin-bottom:10px;}
	p.headline { font-weight:bold; padding:5px 0; }
	p.headline1 { font-size:1.6em; color:#346464; }
	p.headline1:before { float:left; content:""; display:block; width:10px; height:1.6em; margin-right:15px; background-color:#346464; }
	p.headline2 { font-size:1.4em; }
	p.headline3 { font-size:1.2em; }
ul, ol, li { /*list-style:none;*/ text-align:justify; } 
ol#e1 { list-style-type: decimal; }
ol#e2 { list-style-type: Lower-roman; }
a { /*text-decoration:none;*/ }
i { margin-left:10px; }
:focus { outline:none; } 
img { width:100%; height:auto; }
.notice { font-weight:bold; color:#F00; }
a.versionLink { font-size: 20px; font-weight: bold; }
a.applyBtn { float:right; padding:20px 30px; font-size:20px; text-align:center; background-color:#F60; color:#FFF; color:#FFF; text-decoration:none; }
a.applyBtn:hover { background-color:#F00; }

.fz-14 { font-size:14px; }
.fw-bold { font-weight:bold; }
.news { padding:10px; background-color:#F66; color:#FFF; }
.annDate { font-size:14px; color:#666; }

.w20ptg { width:20%; margin:0 auto; }
.w25ptg { width:25%; margin:0 auto; }
.w30ptg { width:30%; margin:0 auto; }
.w70ptg { width:70%; margin:0 auto; }
.w75ptg { width:75%; margin:0 auto; }
.w80ptg { width:80%; margin:0 auto; }
.w90ptg { width:90%; margin:0 auto; }


table { display:table; width:95%; margin:0 auto; border-collapse:collapse; }  
tr { display:table-row;  }
th, td { display:table-cell; padding:10px; }  
th { width:30%; }
th img { width:90%; height:auto; margin:0 auto; }


/* === header ===================================================== */
#nav { padding-block:10px; padding-right:5%; text-align: right; background-color:#E7E7E7; }
#nav a { background-color:#797979; color:#FFF; padding-inline: 20px; text-decoration:none; border-radius: 10px; }
#nav a:visited { color:#FFF; }
#nav a:hover { color:#333; }
header { /*background-color:#E7E7E7;*/ }

							  


/* === main ===================================================== */
#main { /*min-height:100%;*/ overflow:hidden; width:90%; min-height:100%; margin:0 auto; }

	#mainContent { /*background-color:#FCF;*/ float:left; width:60%; padding:3% 3% 3% 5%; position:relative; }
		#mainContent img#QRcode { position:absolute; right:15px; top:15px; width:100px; height:auto; }
		#mainContent img#mobileQRcode { display:none; }
		
	section { padding:10px 10px 20px 10px; }
			

ol {
  display: block;
  list-style-type:cjk-ideographic;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 30px;
}
ul { padding-left: 30px; }	
ol li ol {
  display: block;
  list-style-type:decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
}		
	
ol li { padding:5px 0; }
ol li ul { padding-left:10px; }

.newsList { background-color:#FFE2E8; }
.newsList ul li { padding-block:10px; }
	
	
	aside { background-color:#E7E7E7; float:right; width:40%; height:100%; padding:3%; }
	
		.PIBlock { width:100%; overflow:hidden; border:1px dotted #999; padding:5px; margin-bottom:5px; }	
			.imgSubBlock { float:left; width:20%; }
				.imgSubBlock img { width:100%; height:auto; } 
			.infoSubBlock { float:right; width:75%; } 
				.infoSubBlock .PIname { font-size:16px; font-weight:bold; }		
		
		
		
	#asideMobile { /**/display:none; padding:3%; }
		#asideMobile section { overflow:hidden; }
		#asideMobile section .PIBlock { float:left; margin:1%; border:1px dotted #999; padding:5px; }





/* footer ============================================================== */

footer { background-color:#000; color:#FFF; border-top:3px #000 solid; padding:1% 0; }
	#footerInfo { overflow:hidden; width:80%; margin:0 auto; padding:1%; font-size:13px; }
		#contactInfo { width:48%; float:left; }
			#contactInfo p.contactPerson { font-size:16px; }
		#location { width:48%; float:right; text-align:left; }
			#location iframe { width:100%; max-height:120px; }


@media (max-width:1024px){ #mainContent { width:60%; } 
							aside { width:40%; } } 

@media (max-width:768px){  #nav { padding-right:2%; }
							#main { width:95%; }
							#mainContent { width:100%; padding:3% 2%; }
							aside { display:none; } 
							#asideMobile { display:block; }
							#asideMobile section .PIBlock { width:calc(100%); } 
							#contactInfo { width:100%; margin-bottom:20px; }
							#location { width:100%; } 
							#bootcamp { display:none; } 
							#mainContent img#QRcode { display:none; }
							#mainContent img#mobileQRcode { display:block; width:100px; height:auto; } }




/* Form的表格設定 ==============================================================*/


textarea { 
	width:100%; 
	padding:5px; 
	border:1px solid #ccc; 
	border-radius:4px; 
	resize:vertical; 
}

input[type=text], input[type=email], select { 
	padding:5px; 
	border:1px solid #ccc; 
	border-radius:4px; 
	resize:vertical; 
}

label { 
	padding:12px 12px 12px 0; 
	display:inline-block; 
}

input[type=submit] {
/*	width:50%;
	display:block;
	margin:0 auto;
*/	background-color:#4CAF50; 
	color:white; 
	padding:12px 20px; 
	border:none; 
	border-radius:4px; 
	cursor:pointer; 
}

input[type=submit]:hover { 
	background-color:#45a049; 
	
}



/* 設定為table */
.container { 
	border-radius:5px; 
	/* background-color:#f2f2f2; */
	padding:20px; 
}

/* Clear floats after the columns */

.row { padding:5px 0; }

.row:after {
  content:"";
  display:table;
  clear:both;
}

/* 欄的設定 */
.col-25 {
  float:left;
  width:25%;
  text-align:right;
  padding-right:10px;
}

.col-75 {
  float:left;
  width:75%;
}

.required { color:#F00; font-weight:bold; }

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 768px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  .col-25 { text-align:left; }}
  
  
  
  
/* === for bootcamp ===================================================== */
#bootcamp, #bootcampMobile { background-color:#E6F7FF; border:1px solid #75B8B2; border-radius:15px; }		



/* === for bootcamp ===================================================== */