/* ---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;
	 scroll-behavior: smooth;
}

body{
	font-family:Helvetica,Arial,sans-serif;
	margin-bottom:0;
	padding-bottom:0px;
	background:#f4f0e4;
}

 	@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:auto;
	overflow:hidden;
	background:#fecb10;
	margin:0 auto 10px auto;
	}	
header div {
	width:350px;
	margin:0 auto ;
	padding:8px 0;
	}	
header div img{
	width:350px;
	}	

	@media screen and ( max-width: 768px ){

	header div {
		width:100%;
		text-align:center;
	}	
	header div img{
		width:150px;
		margin:0 auto ;
	}	

	}

article{
	width:100%;
	height:auto;
	overflow:hidden;
	margin:20px auto 20px auto;
	padding:20px 0;
}
section{
	width:900px;
	height:auto;
	overflow:hidden;
	margin:0 auto;
}
section div{
	width:430px;
	height:auto;
	overflow:hidden;
	background:#FFFAFA;
	border-radius:10px;
	float:left;
	padding:15px 5px;
} 

section div:last-child{
	float:right;
} 

h1{
	font-size:28px;
  text-align: center;
	margin:0 auto 20px auto;
	letter-spacing: 1px;
	color:#104E8B;
	font-weight:bold;	
}

section div:last-child h1{
	color:#CD3278;
} 

ul{
	width:860px;
	padding:0 0 0 10px;
	margin:0 0 5px 0;
	line-height:1.5;
}
li{
	margin:10px 0;
	font-size:20px;
}



	@media screen and ( max-width: 768px ){
		article{
			width:100%;
			margin:10px auto 10px auto;
			padding:10px 0;
}
		section{
			width:100%;
		}
		section div{
			width:95%;	
			float:none;
			margin:5px auto 20px auto;
		} 
		section div:last-child{
			float:none;
			margin:5px auto;
		} 
		h1{
			font-size:23px;
			margin:0 auto 10px auto;
		}
		
		ul{
			width:90%;
			padding:0 5px;
			margin:0 auto;
		}
		li{
			margin:10px 0;
			font-size:16px;
		}

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

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

footer p a{
color:#111;
	}	
footer p a:hover{
text-decoration:underline;
	}
		
	@media screen and ( max-width: 768px ){
		footer{
			margin:5px auto 5px auto;
		}

		footer p{
			font-size:12px;
	line-height:1.5;
		}	

		footer span {
			display:none;
		}
		footer BR {
			display:block;
		}
}



/*表格*/
.funtable{
border:1px solid #FFF; 
width:100%;
height:auto;
overflow:hidden;
border-collapse:collapse; 
margin:0 auto 5px auto;
}

.funtable td{
width:auto;
border:3px solid #FFF;
line-height:1.3;
padding:8px 5px;
font-size:18px; 
vertical-align: middle; 
}


.blue{ 
	background:#d7e8fd;
}
.blue .headerrow td{ 
 	background:#8290a6;
}

.pink{ 
	background:#FFE4E1;
}
.pink .headerrow td{ 
 	background:#EEA9B8;
}

select {
  width:90%;
  padding: 5px ;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
	font-size:18px;
  margin: 5px 0;
}


input[type=text], input[type=password]{
  width:90%;
  padding: 10px;
  margin: 5px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
	font-size:18px;
}

.funtable tr:last-child{
	width:300px;
font-size:18px; 
  text-align: center;
}

.css_button {
   border: 1px solid #FFFFFF;
   background: #36648B;
   border-radius: 8px;
   color: #FFFFFF;
     font-size: 19px;
    font-weight: bold;
  letter-spacing: 3px;
    transition-duration: 0.4s;
    padding: 5px 20px;
    box-shadow: 0 5px 15px #4F94CD;
  letter-spacing: 3px;
   margin:10px auto;
   cursor: pointer;
   }
.pink_btn{

    background: #CD3278;
    box-shadow: 0px 2px 10px 5px #DB7093;

}

.css_button:hover {
    background: #8B4789;
    box-shadow: 0px 2px 10px 5px #8B668B;
}


	@media screen and ( max-width: 768px ){

		.funtable{
		width:95%;
		margin:0 auto 5px auto;
		}
		
		.funtable td{
		width:auto;
		font-size:15px; 
		padding:5px; 
		}

		.css_button {
		font-size:16px; 
		   }
}