html,
body {
	font-family: 'Lato', 'Noto Sans TC', sans-serif;
	margin: 0;
	padding: 0;
	color: #333333;
	background-color: #f6f7f8;
}

body {
	background-color: #56335d;
}

main {
	max-width: 600px;
	margin: auto;
}

h3 {
	margin-top: 0px;
	font-size: 1.2em;
	font-weight: 500; /* 字體粗細 */
}

p {
	color: #666666;
}

a {
	background-color: #64287f;
	color: white;
	padding: 0.6em 1em;
	margin: 1em auto;
	border-radius: 2em;
	font-size: 1.2em;
	font-weight: 400;
}

.name {
	color: #d3da5e;
	font-size: 2em;
	font-weight: 500;
	margin: 0 0 8px;
	text-align: center;
}

.description {
	font-size: 1.2em;
	padding: 1em 1em 0px 1em;
	color: #3e3e3e;
	font-weight: 400;
}

.title-info {
	overflow: auto;
	padding: 2em 0 2em;
}

.main-info {
	margin: 1em;
	background-color: #ffffff;
	border-radius: 10px;
}

.ways-section {
	padding: 0.5em 1em;
}

.ways {
	display: flex; /* 讓容器成為 flex 排列系統 */
	flex-direction: column;
	justify-content: space-between; /* 水平分散 */
	background-color: #efefef;
	border-bottom: 20px solid #ffffff;
}

.ways-title {
	background-color: #cfdc51;
	border-radius: 0px 0px 300px 0px / 300px;
	color: #683861;
	display: inline-block;
	max-width: 3em;
	padding: 0.5em 1em;
	margin-bottom: 0;
}

h3.ways-name {
	color: #303030;
	font-weight: 500;
	padding: 0.5em;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}

.footer {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 40px;
	text-align: center;
}

.footer img {
	max-width: 100%;
	width: 400px;
}