* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #1a1a1a;
  background: #f6f7f6;
  line-height: 1.65;
}
a { color: #1a6b72; text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 920px; margin: 0 auto; padding: 0 20px; }
header {
  background: #1a6b72;
  color: #fff;
  padding: 18px 0;
}
header .brand { font-size: 20px; font-weight: 700; color: #fff; text-decoration: none; }
header nav { float: right; }
header nav a { color: #fff; margin-left: 18px; font-size: 14px; }
header:after { content: ""; display: block; clear: both; }
.hero { background: #1a6b72; color: #fff; padding: 36px 0 40px; }
.hero h1 { margin: 0 0 10px; font-size: 28px; }
.hero p { margin: 0; max-width: 640px; opacity: 0.92; }
section { background: #fff; margin: 20px 0; padding: 22px 24px; border: 1px solid #e6e8e6; }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 16px 0 8px; font-size: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { border: 1px solid #e6e8e6; padding: 8px 10px; text-align: left; }
th { background: #f0f3f2; }
.muted { color: #666; font-size: 13px; }
footer {
  padding: 28px 0 40px;
  color: #555;
  font-size: 13px;
}
footer a { color: #1a6b72; }
.note { background: #fff8e8; border: 1px solid #ead8a4; padding: 12px 14px; font-size: 14px; }
ul { padding-left: 18px; }