@charset "utf-8";

* {
	box-sizing:border-box;
}

body {
	background:#DFFFC5;
}

h1,h2,h3 {
	margin-top:0;
	padding-top:0;
	margin-bottom:0;
	padding-bottom:0;
}

p {
	margin-left:12px;
}

a {text-decoration:none;}
a:link {color:black;}
a:visited {color:black;}
a:hover {font-size:1.15rem; color:red; background:cyan;}

#handphone {
	padding-top:5px;
	padding-bottom:5px;
}

a:active {color:black;}

.ycsaudimenu {
	width:90%;
}

.ychkmenu {
	width:80%;
	text-align:center;
	color:white;
	background-color:navy;
	margin-left:10px;
}

.ycflagshow {
	width:25px;
	height:20px;
}

.ychktype {
	width:15px;
	height:15px;
}

.container {
	max-width:900px;
	margin:0 auto;
	display:flex;
	flex-flow:row wrap;
}

.y1, .y2, .y3, .y4, .y5, .y6, .y7, .y8, .y9, .y10 {
	width:100%;
}

.y1 {
	font-family:標楷體;
	font-size:1.5rem;
	color:blue;
	text-align:center;
}

.y2 {
	font-family:微軟正黑體;
	font-size:0.85rem;
	font-weight:bold;
	line-height:30px;
	padding-left:25px;
	margin-bottom:5px;
}

.y2-title {
	background-color:#DFFFC5;
	width:80px;
	line-height:25px;
	display:inline-block;
}

.y3 {
	font-family:微軟正黑體;
	font-size:0.85rem;
	font-weight:bold;
	line-height:30px;
	padding-left:10px;
	margin-bottom:5px;
}

.y3-title {
	background-color:#DFFFC5;
	width:105px;
	line-height:25px;
	display:inline-block;
}

.y4 {
	font-family:標楷體;
	color:red;
	background-color:yellow;
	font-size:0.7rem;
	text-align:center;
	border:7px solid;
	border-color:limegreen darkgreen darkgreen limegreen;
	margin-left:7%;
	margin-right:7%;
	margin-bottom:5px;
}

.y4-wauto, .y4-wauto1 {
	background-color:yellow;
	width:auto;
	display:inline-block;
}

.y5 {
	font-family:標楷體;
	color:blue;
	background-color:yellow;
	font-size:1rem;
	font-weight:bold;
	text-align:center;
	border:2px solid;
	border-style:ridge;
	border-color:gray;
	margin-left:15%;
	margin-right:15%;
	margin-bottom:5px;
}

.y6, .y7, .y8, .y9 {
	font-family:微軟正黑體;
	font-size:1.1rem;
	font-weight:bold;
	line-height:45px;
	padding-left:10px;
}

.y10 {
	font-family:微軟正黑體;
	font-size:0.7rem;
	color:green;
	text-align:center;
}

.y10-title {
	background-color:#DFFFC5;
	width:150px;
	display:inline-block;
}

/* media query */
@media (max-width: 799px) {
	.y1 {
		width:100%;
	}

	.y2 {
		font-size:0.8rem;
		width:50%;
	}

	.y2-title {
		background-color:#DFFFC5;
		width:75px;
		line-height:25px;
		display:inline-block;
	}

	.y3 {
		font-size:0.68rem;
		width:50%;
	}

	.y3-title {
		background-color:#DFFFC5;
		width:85px;
		line-height:25px;
		display:inline-block;
	}

	.y4 {
		margin-left:18%;
		margin-right:18%;
		width:100%;
	}

	.y4-wauto {
		width:100%;
	}

	.y5 {
		margin-left:10%;
		margin-right:10%;
		width:100%;
	}

	.y6, .y7, .y8, .y9 {
		width:25%;
	}

	.y6 a:hover, .y7 a:hover, .y8 a:hover, .y9 a:hover {
		text-decoration: none;
		font-size:1.1rem;
		width:25%;
	}

	.ycsaudimenu, .ychkmenu {
		font-size:0.9rem;
	}

	.ycsaudimenu a:hover {
		font-size:0.9rem;
	}

	.y10 {
		width:100%;
	}
}

@media (max-width: 480px) {
	.y5 {
		display:none;
	}

	.y2, .y3 {
		font-size:0.8rem;
		padding-left:10px;
		width:100%;
	}

	.y2-title {
		background-color:white;
		width:100%;
	}

	.y3-title {
		background-color:white;
		font-size:1rem;
		width:100%;
	}

	.y4 {
		margin-left:2%;
		margin-right:2%;
		width:100%;
	}

	.y4-wauto, .y4-wauto1 {
		width:100%;
	}

	.y6, .y7, .y8, .y9 {
		font-size:0.95rem;
		width:50%;
	}

	.ycsaudimenu {
		font-size:0.88rem;
	}

	.ychkmenu {
		font-size:0.86rem;
	}

	.y10, .y10-title {
		width:100%;
	}
}

@media (min-width: 800px) {
	.y1 {
		width:100%;
	}

	.y2 {
		width:45%;
	}

	.y3 {
		width:55%;
	}

	.y4 {
		width:100%;
	}

	.y5 {
		width:100%;
	}

	.y6, .y7, .y8, .y9 {
		width:25%;
	}

	.y10 {
		width:100%;
	}
}