<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>中華民國國慶籌備委員會</title>

    <link rel="icon" href="/images/favicon.svg" />
    <link rel="shortcut icon" href="/images/favicon.svg" />
    <link rel="bookmark" href="/images/favicon.svg" />

    <style>
      body {
        margin: 0;
      }

      .home-main {
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        background: url(./static/static-bg.svg) 50% 50%/cover no-repeat;
      }

      .home-main .main-logo {
        position: absolute;
        top: clamp(16px,4vw,32px);
        left: clamp(16px,4vw,32px);
        width: clamp(180px,40vw,360px);
        height: auto;
      }

      .main-center-group{
        position: absolute;
        left: 50%;
        top: 50%;
        transform:translate(-50%, -50%);
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
        gap:clamp(12px,4vw,60px);
        max-width:100vw;
        white-space:nowrap;
      }

      .center-mark {
        display: block;
        width: clamp(220px,22vw,420px);
        height: auto;
      }

      .center-text {
        font-family:"Microsoft JhengHei","微軟正黑體",sans-serif;
        font-size:clamp(28px,4vw,64px);
        font-weight:700;
        line-height:1.15;
        color:#2c2c2c;
        text-align:left;
        white-space:nowrap;
      }

      .center-text p {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body lang="ZH-TW" style="tab-interval: 24.0pt">
    <section class="home-main">
      <img class="main-logo" src="./static/static-logo.svg" alt="首頁左上Logo" />

      <div class="main-center-group">
        <img class="center-mark" src="./static/static-center-logo.svg" alt="視覺圖示" />
        <div class="center-text">
          <p>晚會活動</p>
          <p>　敬請期待</p>
        </div>
      </div>
    </section>
  </body>
</html>