---
import BaseLayout from "../layouts/BaseLayout.astro"
import logoAnimated from "./_assets/nbtca.gif";
---

<BaseLayout primaryTitle="加入我们">
  <div class="container pt-16 pb-40 box-border">
    <img src={logoAnimated.src} class="" alt="" />
    <div class="flex flex-col items-center">
      <div class="text-3xl md:text-4xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-[#00ccc7] to-[#9583ef]">
        <div>
          加入协会
        </div>
        <div>
          共同创造我们的社区
        </div>
      </div>
      <div class="text-lg md:text-xl mt-4 pl-2">
        九月二十五日，百团等你！
      </div>
      <div class="mt-2">
        <a
          href="/posts/%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%8D%8F%E4%BC%9A%E5%85%A5%E7%A4%BE%E6%8C%87%E5%8D%97"
          aria-label="进一步了解 NBTCA 的社区和文化"
        >
          进一步了解我们
        </a>
      </div>
      <div class="mt-14">
        <a
          href="/freshman/join"
          aria-label="申请加入 NBTCA"
          class="text-xl"
        >
          立即登记信息 {">"}
        </a>

      </div>
    </div>
  </div>
</BaseLayout>

<style>
  @media screen and (min-width: 680px) {
    /*PC*/
    .container {
      width: 682px;
      margin: 0 auto;
    }
    .gradient-warm {
      -webkit-text-size-adjust: 100%;
      --r-globalmessage-segment-height: 0px;
      --r-globalnav-segmentbar-height: 0px;
      --r-globalnav-height: 48px;
      --rem: 16;
      --r-globalnav-background-opened: #fafafc;
      --r-globalnav-background-opened-dark: #161617;
      --sk-focus-color: #0071e3;
      --sk-focus-color-alt: rgb(0, 0, 0);
      --sk-focus-offset: 1px;
      --sk-focus-offset-container: 3px;
      color: #333333;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      direction: ltr;
      --body-container-width: 645px;
      text-align: center;
      font-size: 75px;
      line-height: 1.06667;
      font-weight: 600;
      letter-spacing: 0;
      font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
        "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
      quotes: "“" "”";
      font-style: normal;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
      background: url(https://www.apple.com/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
      background-size: 200% 100%;
      -webkit-background-clip: text;
    }
  }
  @media screen and (max-width: 680px) {
    /*Mobile*/
    .gradient-warm {
      -webkit-text-size-adjust: 100%;
      --r-globalmessage-segment-height: 0px;
      --r-globalnav-segmentbar-height: 0px;
      --r-globalnav-height: 48px;
      --r-globalnav-background-opened: #fafafc;
      --r-globalnav-background-opened-dark: #161617;
      --sk-focus-color: #0071e3;
      --sk-focus-color-alt: rgb(0, 0, 0);
      --sk-focus-offset: 1px;
      --sk-focus-offset-container: 3px;
      color: #333333;
      font-synthesis: none;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      direction: ltr;
      --body-container-width: 645px;
      text-align: center;
      font-size: 38px;
      line-height: 1.10538;
      font-weight: 600;
      letter-spacing: 0;
      font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
        "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
      quotes: "“" "”";
      font-style: normal;
      -webkit-text-fill-color: transparent;
      -webkit-box-decoration-break: clone;
      background: url(/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
      background-size: 200% 100%;
      -webkit-background-clip: text;
    }
  }
  .body-container {
    -webkit-text-size-adjust: 100%;
    color: #333333;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.82353;
    --body-container-width: 645px;
    text-align: center;
    letter-spacing: 0;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    quotes: "“" "”";
    font-style: normal;
    margin-bottom: 60px;
    width: 100%;
  }
  .life-at-apple__body-text {
    -webkit-text-size-adjust: 100%;
    --r-globalnav-height: 44px;
    --r-globalmessage-segment-height: 0px;
    --r-globalnav-segmentbar-height: 0px;
    --r-globalnav-background-opened: #fafafc;
    --r-globalnav-background-opened-dark: #161617;
    --sk-focus-color: #0071e3;
    --sk-focus-color-alt: rgb(0, 0, 0);
    --sk-focus-offset: 1px;
    --sk-focus-offset-container: 3px;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    --body-container-width: 645px;
    text-align: center;
    padding: 0;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    quotes: "“" "”";
    font-style: normal;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
    color: #000;
    margin: 20px 0 40px;
    margin-top: 0;
    margin-bottom: 0;
  }
  .life-at-apple__eyebrow {
    -webkit-text-size-adjust: 100%;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    --body-container-width: 645px;
    text-align: center;
    padding: 0;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    quotes: "“" "”";
    font-style: normal;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
    color: #000;
    margin: 60px 0 0;
    margin-bottom: 0;
  }
  .t-hero-headline-oversized {
    -webkit-text-size-adjust: 100%;
    color: #333333;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    --body-container-width: 645px;
    text-align: center;
    padding: 0;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    quotes: "“" "”";
    font-style: normal;
    font-size: 75px;
    line-height: 1.06667;
    letter-spacing: 0;
    font-weight: 600;
    margin: 20px 0 40px;
  }
  .t-hero-headline-oversized-span {
    -webkit-text-size-adjust: 100%;
    color: #333333;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    --body-container-width: 645px;
    text-align: center;
    font-size: 75px;
    line-height: 1.06667;
    font-weight: 600;
    letter-spacing: 0;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    quotes: "“" "”";
    font-style: normal;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    background: url(https://www.apple.com/careers/images/fy21/apple_jobs_gradient-final_Apple_Jobs_Gradients_Warm/desktop@2x.png);
    background-size: 200% 100%;
    -webkit-background-clip: text;
  }

  .learn-more-link-after {
    content: ">";
    margin-left: 2.5px;
    font-size: 20px;
    transform: scaleX(0.5);
    text-decoration: none;
  }
  .learn-more-link {
    -webkit-text-size-adjust: 100%;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    direction: ltr;
    --body-container-width: 645px;
    text-align: center;
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC",
      "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
    quotes: "“" "”";
    font-style: normal;
    color: #0070c9;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 0;
  }
  .learn-more-link-container {
    display: flex;
    justify-content: center;
    height: 100px;
  }
</style>