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

<BaseLayout primaryTitle="加入我们">
  <div class="container">
    <h2 class="life-at-apple__eyebrow">在 计算机协会</h2>
    <p class="t-hero-headline-oversized">
      <span
        class="t-hero-headline-oversized-span"
        aria-label="加入我们，共同创造我们的社区。"
      >
        <span class="gradient-warm">加入我们，共同创造我们的社区。</span>
      </span>
    </p>
    <div class="body-container">
      <p class="life-at-apple__body-text">九月二十五日，百团等你！</p>
    </div>
    <div class="learn-more-link-container">
      <a
        href="/careers/cn/life-at-apple.html"
        class="learn-more-link"
        aria-label="进一步了解 NBTCA 的社区和文化"
      >
        了解在 NBTCA
      </a>
      <a class="learn-more-link-after">&gt; </a>
    </div>
    <video width="640" height="360" autoplay muted>
      <source src={mp4} type="video/mp4" />
      你的浏览器不支持视频标签。
    </video>
  </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>