@charset "utf-8";
/* CSS Document */

body{
	font-family: 'Roboto', sans-serif;
}

.container{
	max-width:1000px;
	margin: auto;
	padding: 0px 0px;
}

main .about{
	max-width:1000px;
	margin:auto;
	padding: 20px 20px;
	background-position:center center;
	background-size:cover;
	position:relative;
	text-align: center;
	font-size: 25px;
}

div.paragraph {
    font-size: 1em;
    line-height: 1.5;
	padding: 20px 50px;
    margin: 20px auto 1.6em;
}
	

header{
	background-color: #cdd1c4;
	padding: 20px 0;
}
header .logo{
	float:left;
	margin: 0px 10px;
}
header nav{
	float: right;
}

header nav a{
	color:#30323d;
	text-decoration: none;
	display: inline-block;
	margin:0 10px;
}
header nav a.current{
	color:#FF0;
}

a:hover {
  color: #5c80bc;
}

main{}
main .map{
	height: 400px;
}
main .info{
	padding:40px 20px;
	line-height: 250%;
}

main .banner{
	height:300px;
	background-position:center center;
	background-size:cover;
	position: relative;
}
main .banner>.slogan{
	color:#FFF;
	font-size: 20px;
	position: absolute;
	left:10%;
	top:15%;
	font-family: 'Noto Sans TC', sans-serif;
}

main .intro{
	
	padding:20px 40px;
	background-color: #4d5061;
	color: #CDD1C4;
	text-align: justify;
	line-height: 1.5;
		display:flex;
	flex-wrap:wrap;
}

main .intro_text {
	
	width:500px;
}

#recuit {
	padding:10px 40px;
	
		width:300px;
		}

.title {
		padding:20px 50px;
  text-align: center;
  font-family:  Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 30px;
	
}	

 #timetable td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 1px;
	 
}

#timetable th {
	font-weight: bold;
}

#timetable {
  padding:10px 10px;
  width: 70%;
  border: 2px solid #C9CDCF;
  border-spacing: 5;
 }

 #timetable td:first-of-type {
    background-color: #cdd1c4;
}

 #timetable	.paragraph {
    font-size: 1em;
    line-height: 1.5;
	padding: 20px 20px;
    margin: 20px auto 1.6em;
	}


introtitle {
	font-size: 20px;
	font-style: italic;
}



main .news{
	padding:20px;
	display:flex;
	flex-wrap:wrap;
}


main .news>.item{
	width:400px;
	margin:20px 10px;
}
main .news>.item>h1{
	font-size: 24px;
	font-weight: 700;
}
main .news>.item>img{
	max-width:100%;
	margin:8px 0;
}
main .news>.item>p{
	color:#999;
	line-height: 140%;
	
}

#form{
	margin:30px 0;
}
#form .container{
	max-width: 500px;
	padding:0 20px;
}

#form h1{
	font-size: 2em;
	color:#069;
	text-align: center;
	padding:12px;
	border-bottom: dashed 1px #CCC;
	margin-bottom: 20px;
}
fieldset{
	margin-bottom: 20px;
}
fieldset label{
	display: block;
	margin-bottom: 4px;
}
input[type=text],input[type=password],textarea{
	width:100%;
	padding:8px;
	font-size: 1em;
	border:solid 1px #999;
	color:#666;
}
textarea{
	height: 200px;
}
.btns>input,.btns>a{
	background-color: transparent;
	border:solid 1px #999;
	padding:10px 15px;
	font-size: 1em;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	color:#666;
	line-height: 130%;
}
.btns>input:hover,.btns>a:hover{
	background-color: #999;
	color:#FFF;
}
.form-error{
	color:#F00;
}
footer{
	background-color: #333;
	color:#CCC;
	text-align: center;
	padding:20px;
	font-size: 20px;
}

#member_news{}
#member_news .item{
	padding:50px 20px;
	border-bottom:dashed 1px #DDD;
}
#member_news .item h1{
	font-size: 1.5em;
	color:#069;
	line-height: 125%;
}
#member_news .item h5{
	font-size: 0.85em;
	color:#999;
}
#member_news .item img{
	margin:20px 0;
	max-width: 100%;
}
#member_news .item p{
	color:#666;
	line-height: 150%;
}


@media (max-width:480px){
body{}

.container{
	width:100%;
}

header{
	text-align: center;
}
header .logo{
	float:none;
	font-size: 70px;
}
header nav{
	float: none;
	margin-top: 10px;
}
	
main{}

main .intro{
	 padding:20px 20px;
	}
main .intro_text {
	
	width:350px;
}
	

	
main .banner{
	height: 260px;
}
main .banner>.slogan{
	left:0;
	width: 100%;
	top:9%;
	font-size: 15px;
	text-align: center;
}

	
 #timetable	.paragraph {
    font-size: 1em;
    line-height: 1.5;
	padding: 10px 10px;
    margin: 10px auto 1.6em;
	}
	
	#recuit {
	padding:10px 10px;
	
		width:280px;
		}
	
	main .news{
	padding:0;
}
main .news>.item{
	width:100%;
	margin:0;
	padding:40px 20px;
	border-bottom: dashed 1px #DDD;
}
main .news>.item>h1{}
main .news>.item>img{}
main .news>.item>p{}

footer{}
}