/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; 
}
ol, ul, li{
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */
a { text-decoration:none;}

html {	
	-webkit-text-size-adjust:none;
}

body{
	font-family: Noto Sans TC,sans-serif;arial,"Microsoft JhengHei","微軟正黑體",sans-serif !important;
	margin-bottom:0;
	padding-bottom:0px;
	background:#003b70;
}

 	@media screen and ( max-width: 768px ){
		*{
			box-sizing:border-box; /* 讓 padding 與 width 解除關係 */
		}
		html,body{
			-webkit-text-size-adjust:none; /* iPhone 旋轉後 文字不要放大 */
		}
	}
	
/* --電腦版型------------------------------------- */

#WRAPPER{
	 width:100%; 
	 min-width:1000px; 
	 margin:0 auto;
	 overflow:hidden;
 }
 	@media screen and ( max-width: 768px ){
		#WRAPPER{ min-width:100%;}
	}
	
header{
	width:100%;
	height:200px;
	margin:0 auto;
	background: url(images/could.png) no-repeat ;
	 background-position:center 101px;
	}	
#pc{
	width:1000px;
	margin:0 auto;
}
MENU{
	width:600px;
	height:65px;
	position: absolute;
	top:25px;
	margin-left:220px;
	text-align:center;
}

MENU li{
	width:100px;
	height:55px;
	margin:0 10px 0 10px;
	float:left;
	font-size:20px;
	color:#fff100;
	font-weight:bold;
}
MENU li.active{
	color:#FFF;
	margin-top:10px;
}

MENU li span{
	border-bottom:2px solid #fff100;
	padding-bottom:3px;
	display:block;
	margin-bottom:8px;
	font-size:22px;
}
MENU li.active span{
	border-color:#FFF;
}

#mobile{
	display:none;
}

 	@media screen and ( max-width: 768px ){
 		#pc{
			display:none;
	 	}
		#mobile{
			display:block;
		}
		header{
			width:100%;
			height:125px;
			margin:0 auto;
			background: url(images/could_m.png) no-repeat ;
	 		background-position:100% 60px;
	 		background-size: 100% ;
		}	
		#TOP-MENU{
			display:block;
			width:100%;
		}
		
		#TOP-MENU img{
			width:20px;
			height:20px;
		}
		
		#TOP-MENU #BTN{ /* 製作手機版 左上角的按鈕 */
			position: absolute;
			top:100px;
			left:20px;
		}
		
		#SUBMENU{
			background:none;
			margin-top:22px;
			position:fixed; /* position 可以讓 div 跳脫原本在 HTML 內的位置 */
			top:100px;
			z-index:999;
			width:65%; /* 寬高 100% 整個蓋住 */
			height:768px;
			background-color:#d3edfb;
			display:none; /* 把主選單先關掉 */
			padding-top:30px;
			border-right:#999 solid 1px;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
			padding-left:15px;
			padding-right:15px;
			left:0;
		}
		#SUBMENU li{
			width:100%;
			margin:0;
			padding:15px;
			border-bottom:#FFF solid 1px;
		}
		#SUBMENU li:last-child{
			border-bottom:none;
		}
		
		
		#SUBMENU li a {
			font-size: 20px;
			color:#6d6d6d;	
			font-weight:bold;
			text-decoration:none;
		}
		

	}
	



article{
	width:100%;
	height:auto;
	overflow:hidden;
}
section{
	width:900px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
	background:#FFF;
	padding:0 50px 50px 50px;
}


h1{
	font-size:22px;	
	font-weight:bold;
	text-align:center;
	margin-bottom:35px;
	
}
h1 img{
	margin:0 5px;
}

#allbook{
	width:795px;
	height:290px;
	margin:0 auto 30px auto;
}
#allbook img{
	width:215px;
	height:290px;
	margin:0 37.5px 0 37.5px;
}
#allbook img:first-child{
	margin-left:0;
}
#allbook img:last-child{
	margin-right:0;
}


.page_font{
	width:795px;
	font-size:17px;
	color:#111;
	line-height:1.8;
	text-align:justify;
	margin:0 auto 0 auto;
	height:auto;
	overflow:hidden;
}

.page_font img{
	width:791px;
	height:auto;
	text-align:center;
	margin:0 auto 0 auto; 
	border:2px solid #CCC;
}

.page_font h2 {
	color:#ea5105;
	font-size:22px;
	font-weight:bold;
	padding-bottom:10px ;
}

.page_font p a{
	color:#8B4726;
}
.logout{
	background:#e6545e;
	color:#FFF;
	border-radius: 5px;
	font-size:15px;
	padding: 3px 5px;
	margin-left:5px;
}

.page_font h3 {
	width:550px;
	color:#111;
	font-size:16px;
	font-weight:bold;
	margin:2px auto;
	
}
.page_font h3 span{
	color:#d3252f;
	
}

.page_font h3 BR{
			display:none;
		}
		

iframe{
width:500px;
height:400px;
} 	


#BOX{
	width:380px;
	height:auto;
	float:left;
	margin:0 10px 0 0;
}

#BOX:last-child{
	width:380px;
	height:auto;
	float:right;
	margin:0 0 0 10px;
}

#BOX img{
	width:99%;
	height:auto;
	float:none;
	margin:0;
}

#resources_list
{
	width:480px;
	height:120px;
	overflow:hidden;
	text-align:center;
	margin:0 auto 0 auto; 
}

#resources_list li
{
	width:100px;
	float:left;
	font-size:13px;
	margin:0 10px;
	line-height:1.2;
}


#resources_list li img
{
	width:60px;
	height:60px;
	border:none;
	margin:0 0 5px 0;
}

#download{
	width:760px;
	height:auto;
	overflow:hidden;
	padding:0;
	margin:30px auto 10px auto;
}
.blue{
	background:#d3edfa;
}
.green{
	background:#d9ede2;
}
.pink{
	background:#eddfec;
}
#download img{
	width:200px;
	height:auto;
	float:left;
	margin-right:20px;
}

#download_list
{
	width:500px;
	height:auto;
	overflow:hidden;
	margin:10px ; 
	padding:5px 0 0 0;
}

#download_list span
{	
	font-size:18px;
	font-weight:bold;
}

#download_list ul
{
	width:500px;
	margin: 10px 0;
}

#download_list li 
{
	width:500px;
	height:50px;
	float:none;
	font-size:16px;
	margin:0 0 0 0;
	line-height:1;
	color:#214a80;
}
#download_list li a
{
	color:#214a80;
}

#download_list li a:hover
{
	text-decoration: underline;
}

#download_list li img
{
	width:40px;
	height:40px;
	border:none;
	float:left;
	margin:5px 10px 0 0;
}



HR{	
	width:100%;
	margin:25px 0 28px 0;
}

.TTM{
	font-style:italic;
	font-weight:bold;
}
.TTM_bold{
	font-weight:bold;
	font-size:19px;
}


footer{
	clear:both;
	width:100%;
	margin:0 auto;
	height:auto;
	padding:10px 0;
}

footer p{
	font-size:13px;
	text-align:center;
	line-height:1.8;
	color:#FFF;
}	
footer BR {
	display:none;
}
 

footer p a{
color:#FFF;
	}	
footer p a:hover{
text-decoration:underline;
	}	


.side-menu{
	position: fixed;
	width: 50px;
	top:85%;
	margin-left:895px;
	z-index:9999;	
}

 	@media screen and ( max-width: 768px ){
 	
		section{
			width:100%;
			padding:0 20px 20px 20px;
		}
				
		h1{
			font-size:19px;	
			margin-top:12px;
		}
		h1 img{
			width:15px;hieght:15px;
			margin:0 3px;
		}

		.TTM_bold{
			font-size:16px;
		}

		#allbook{
			width:100%;
			height:auto;
			overflow:hidden;
		}
		#allbook img{
			width:29%;
			height:auto;
			margin:0 3%;
		}	

		.page_font{
			width:100%;
			font-size:16px;
		}
		.page_font img{
			width:100%;
		}
		
		.page_font h3 {
			width:100%;
			font-size:15px;
		}
		
		.page_font h3 BR{
			display:block;
		}
		
		#BOX{
				width:100%;
				height:auto;
				float:none;
				margin:0 auto 0 auto;
			}
			
		#BOX:last-child{
				width:100%;
				height:auto;
				float:none;
				margin:0 auto 0 auto;
			}
	
		#BOX img{
				width:46%;
				height:auto;
				float:left;
				margin:0 2% 3% 2%;
				text-align:center;
			}
		#BOX img.one{
				width:50%;
				margin:0 auto 3% auto;
				text-align:center;
				float:none;
				display:block;
			}

			#resources_list
			{
				width:100%;
				height:auto;
				overflow:hidden;
				margin-bottom:25px;
			}
			
			#resources_list li
			{
				width:23%;
				font-size:12px;
				margin:0 1%;
			}
			
			
			#resources_list li img
			{
				width:40px;
				height:40px;
			}

			
			#download{
				width:100%;
				height:auto;
				overflow:hidden;
				padding:0;
				margin:30px auto;
			}
			
			#download img{
				width:auto;
				height:150px;
				margin-right:10px;
			}
			
			#download_list
			{
				width:auto;
				height:auto;
				overflow:hidden;
				margin:10px ; 
				padding:5px 0 3px 0;
			}
			
			#download_list span
			{	
				font-size:16px;
			}
			
			#download_list ul
			{
				width:100%;
				margin: 0 0;
			}
			
			#download_list li
			{
				width:auto;
				height:auto;
				font-size:15px;
				line-height:0.9;
				color:#214a80;
			}
			
			
			#download_list li img
			{
				display:none;
			}

		iframe{
			width:100%;
		} 	

		footer{
			padding:0 5px;
			margin:5px auto 5px auto;
		}

		footer p{
			font-size:12px;
		}	

		footer span {
			display:none;
		}
		footer BR {
			display:block;
		}
 
		.side-menu{
			position: fixed;
			width: 35px;
			top:80%;
			right:1px;
			z-index:9999;	
			margin-left:0;
		}
		.side-menu img{
			width: 35px;
			height:auto;
		}
}



/* form */


form{
	width:470px;
	height:auto;
	overflow:hidden;
	font-size:16px;
	margin:30px auto;
	border:1px solid #999;
	padding:30px 40px 30px 40px; 	/* 上 右 下 左 */
    }
    
form p{
	text-align:center;
	margin-bottom:3px;
	font-weight:bold;
} 

form p span{
	color:#d3252f;
} 

label{
	width:20%;
	padding-top:15px;
	text-align:left;
	float:left;
	font-weight:bold;
}


input[type=text], input[type=password] {
  width:80%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #999;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 80px;
  height:35px;
	font-size:1rem;
  margin:0 auto;
  background-color: #ea545d;
  color: #FFF;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  margin-top:10px;
  display:block;
}

#flag_div{
	width:100%;
	margin-top:8px;
}
#flag_div div{
	width:auto;
	float:left;
	margin-top:8px;
}

input[type=radio] {
  height: 15px;
  width: 15px;
  margin-right:5px;
}

form .col_other{
  width:100px;
  height:30px;
	margin-top:-8px;
  }
form .col_code{
  width:100px;
  }
form .code_img{
  width:65px;
  border:none;
  margin:-3px 10px;	/* 上 右 下 左 */
    }
	
 
.HR_p {
	display:block;
}

.HR_m {
	display:none;
}

 	@media screen and ( max-width: 768px ){
 		
	
form{
			width:100%;
		margin:20px 0; 	/* 上 右 下 左 */
		padding:3px 0; 	/* 上 右 下 左 */
			border:none;
			text-align:center;
		  font-size:14px;
		    }

form p{
	text-align:center;
	margin-bottom:3px;
	font-weight:bold;
} 

form p span{
	color:#d3252f;
} 
		    
		    
		label{display:none;}

#flag_div{
	width:80%;
	background:#e0f2fc;
	margin-left:10%;
	padding-top:10px;
	text-align:left;
			padding:5px;
}		 
#flag_div div{
	width:auto;
	float:none;
	margin-top:8px;
}

#flag_div input[type=radio] {
  height: 15px;
  width: 15px;
  margin-right:5px;
}		 
		 
input[type=submit] {
		display:block;
		  width: 60px;
		  height:30px;
		  margin:10px auto;
		  font-size:14px;
		}


form .col_other{
  height:20px;
  }
  
form .col_code{  
	width:40%;
	margin-left:-17%;
	margin-top:15px;
  }
  
  
form .code_img{
  width:50px;
    }
    
  
.HR_p {
	display:none;
}
.HR_m {
	display:block;
}
  
    
 	}