@font-face {
  font-family: "JXF-Inner-Banner-CN";
  src: url("assets/1bc4319704-SourceHanSansCN-Bold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "JXF-Inner-Banner-EN";
  src: url("assets/84e22249c1-PlusJakartaSans-Medium.ttf") format("truetype");
  font-display: swap;
}

:root {
  --jxf-inner-banner-height: 500px;
  --jxf-inner-banner-title-size: 60px;
  --jxf-inner-banner-eyebrow-size: 16px;
}

.jxf-inner-banner {
  position: relative;
  z-index: 0;
  width: 100%;
  height: var(--jxf-inner-banner-height);
  min-height: var(--jxf-inner-banner-height);
  overflow: hidden;
  isolation: isolate;
  background: #0054c3;
  color: #fff;
}

.jxf-inner-banner__media,
.jxf-inner-banner__overlay {
  position: absolute;
  inset: 0;
}

.jxf-inner-banner__media {
  z-index: -3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1.015);
}

.jxf-inner-banner__overlay {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0, 46, 88, .82) 0%, rgba(0, 69, 132, .54) 48%, rgba(0, 47, 88, .18) 100%),
    linear-gradient(45deg, rgba(0, 84, 195, .42) 0%, rgba(0, 0, 0, 0) 66%, rgba(126, 216, 94, .2) 100%);
}

.jxf-inner-banner__inner {
  box-sizing: border-box;
  width: min(88%, 1440px);
  height: 100%;
  margin: 0 auto;
  padding-top: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.jxf-inner-banner__eyebrow {
  margin: 0 0 22px;
  padding: 5px 18px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: 999px;
  color: rgba(255, 255, 255, .92);
  font: 500 var(--jxf-inner-banner-eyebrow-size)/1.45 "JXF-Inner-Banner-EN", "Microsoft YaHei", sans-serif;
  letter-spacing: .02em;
}

.jxf-inner-banner__title {
  max-width: 920px;
  margin: 0;
  color: #fff;
  font: 700 var(--jxf-inner-banner-title-size)/1.1 "JXF-Inner-Banner-CN", "Microsoft YaHei", sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

@media (max-width: 750px) {
  :root {
    --jxf-inner-banner-height: 350px;
    --jxf-inner-banner-title-size: 42px;
    --jxf-inner-banner-eyebrow-size: 14px;
  }

  .jxf-inner-banner__inner {
    width: calc(100% - 40px);
    padding-top: 60px;
  }

  .jxf-inner-banner__eyebrow {
    margin-bottom: 18px;
    padding: 4px 14px;
  }
}