 <style>
    html { font-size: 0.78125vw; }
    * { box-sizing: border-box; }
    body { margin: 0; background: #D5D7DD; color: rgba(16, 61, 100, 0.59); font-family: "Microsoft YaHei", Arial, sans-serif; }
    svg { display: block; }
    header, main, footer { width: 100%; }
    header { height: 61rem; color: #FFFFFF; text-align: center; position: relative; }
    .banner { position: absolute; width: 100%; height: 100%; }
    nav { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; padding: 1.5rem 2.8rem; text-align: right; font-size: 1.5rem; }
    nav a { color: #FFFFFF; text-decoration: none; margin-left: 1.5rem; }
    header h1 { position: relative; margin: 0; padding-top: 30rem; font-size: 3.8rem; font-weight: normal; letter-spacing: 0.3rem; }
    header p { position: relative; font-size: 2.6rem; line-height: 1.5; margin: 1.8rem 0; }
    section { text-align: center; padding: 5.5rem 3.5rem; }
    h2 { font-size: 3.9rem; font-weight: normal; margin: 1.5rem 0; }
    h3 { font-size: 2.9rem; font-weight: normal; margin: 1.8rem 0; }
    p { font-size: 2.8rem; line-height: 1.35; }
    hr { border: 0; border-top: 0.3rem solid rgba(16, 61, 100, 0.59); width: 85%; margin: 4.5rem auto; }
    .tag { width: 36rem; height: 4.5rem; margin: auto; }
    .treasures { height: 92rem; padding-top: 3.5rem; }
    .treasures h3 { margin-top: 10rem; }
    .treasures figure { display: inline-block; width: 24%; margin: 0 0.5%; vertical-align: middle; }
    .treasures figure:nth-of-type(2) { width: 43%; }
    .treasures figure:first-of-type, .treasures figure:last-of-type { border-bottom: 0.3rem solid rgba(16, 61, 100, 0.59); padding-bottom: 3rem; }
    .treasures hr { display: none; }
    .treasures figcaption { font-size: 2.1rem; margin: 1.5rem 0; }
    .treasures .piece { width: 100%; }
    .history { height: 82rem; padding: 7.5rem 8rem 0; }
    .history p { max-width: 98rem; margin: 2rem auto; }
    .gallery { height: 83rem; padding: 10.5rem 1rem 0; position: relative; }
    .gallery figure { display: inline-block; width: 17%; margin: 0 3%; vertical-align: top; position: relative; z-index: 1; }
    .gallery figure:nth-of-type(2) { margin-top: -5.5rem; }
    .gallery figure:nth-of-type(3) { margin-top: 8.5rem; }
    .gallery figure:nth-of-type(4) { margin-top: -2rem; }
    .gallery figure .photo { width: 100%; height: 56.5rem; border-radius: 4.5rem; }
    .gallery .ornament { position: absolute; width: 18%; top: 16rem; }
    .gallery .left { left: -9%; transform: rotate(90deg); }
    .gallery .right { right: -9%; transform: rotate(-90deg); }
    .gallery figcaption { position: absolute; bottom: 1.2rem; left: 10%; width: 80%; padding: 0.8rem; color: #FFFFFF; font-size: 2.3rem; }
    .poem { height: 72rem; padding: 2rem 8rem 1.5rem; }
    .poem p { max-width: 97rem; margin: 2.5rem auto; }
    .photos { padding: 0; height: 59rem; position: relative; overflow: hidden; }
    .photos svg { width: 100%; height: 100%; }
    .photos p { position: absolute; left: 0; bottom: 0; width: 29%; margin: 0; color: #FFFFFF; padding: 0 2rem 2.5rem; text-align: right; }
    .after-photos { height: 51rem; text-align: left; padding: 4.5rem 8% 1rem; }
    .after-photos p { max-width: 100rem; }
    .today { height: 132rem; padding: 2.5rem 0 0; position: relative; overflow: hidden; }
    .today article { position: relative; z-index: 2; width: 54%; padding: 3rem 0 0 9%; text-align: center; }
    .today article p { margin: 2.2rem 0; }
    .today .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    footer { height: 32.5rem; color: #FFFFFF; text-align: center; position: relative; font-size: 3rem; }
    footer svg { position: absolute; width: 100%; height: 100%; }
    footer p { position: relative; margin: 0; padding-top: 12.5rem; color: #FFFFFF; font-size: 3rem; }
  </style>