body{
  margin:0;
  background:#f2f0f0;
  font-family:'Noto Sans TC', sans-serif;
}

.container{
  width:auto;
  margin: 24px;px 24px;
  background:#ffffff;
  border-radius:14px;
  padding:40px 40px;
  text-align:center;
}

h1{
  margin-bottom:10px;
  font-size:36px;
}

.subtitle{
  margin-bottom:50px;
  font-size:16px;
  color:#333;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
}

.card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  background:#f3f0d6;
  border-radius:16px;
  padding:60px 20px;
  transition:.25s;
  border:3px solid transparent;
}

.card:hover{
  transform:translateY(-6px);
  border-color:#d7c367;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.card-title{
  font-size:24px;
  font-weight:700;
  margin-bottom:12px;
  color:#222;
}

.card-sub{
  font-size:14px;
  color:#555;
}