@import url("../homefile/AlibabaPuHuiTi-3-55-Regular/result.css");
@import url("../homefile/AlibabaPuHuiTi-3-75-SemiBold/result.css");
@import url("../homefile/AlibabaPuHuiTi-3-85-Bold/result.css");

/* T20 has no hero. Each artwork and its text share the 1920px reference coordinates. */
.t20-viewport[data-product="t20"] {
  width: 100%;
  overflow: hidden;
  background: #fff;
}
.telpo-product[data-product="t20"] {
  --u: min(0.0520833333vw, 1px);
  --body-font: "Alibaba PuHuiTi 3.0 55 Regular", sans-serif;
  --light-heading-font: "Alibaba PuHuiTi 3.0 85 Bold", var(--body-font);
  --heading-font: var(--light-heading-font);
  --heading-weight: 700;
  --dark-heading-font: "Alibaba PuHuiTi 3.0 75 SemiBold", var(--body-font);
  --ink: #333;
  --body: #59616c;
  --orange-metal: linear-gradient(
    #ff6c00 0%,
    #ff6c00 36%,
    #e36106 60%,
    #b9500e 87%,
    #ae4e14 100%
  );
  --silver: linear-gradient(
    #fff 0%,
    #fff 36%,
    #f5f5f5 49%,
    #dededf 66%,
    #bcbcc0 85%,
    #a8a8ac 100%
  );
  --orange-light: linear-gradient(
    #ff6c00 0%,
    #ff6c00 36%,
    #ff8950 65%,
    #ffb595 100%
  );
  --graphite: linear-gradient(#333 0%, #333 33%, #606060 60%, #a8a8a8 100%);
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  background: #fff;
  color: var(--ink);
  font: 400 calc(22 * var(--u))/1.65 var(--body-font);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.telpo-product[data-product="t20"],
.telpo-product[data-product="t20"] *,
.telpo-product[data-product="t20"] *::before,
.telpo-product[data-product="t20"] *::after {
  box-sizing: border-box;
}
.telpo-product[data-product="t20"] :is(h1, h2, h3, p, dl, dt, dd, figure) {
  margin: 0;
}
.telpo-product[data-product="t20"] :is(h1, h2, h3) {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  font-size: calc(60 * var(--u));
  line-height: 1.116667;
}
.telpo-product[data-product="t20"] img {
  display: block;
  max-width: 100%;
  height: auto;
}
.telpo-product[data-product="t20"] .artwork {
  position: relative;
}
.telpo-product[data-product="t20"] .art {
  width: 100%;
}
.telpo-product[data-product="t20"] .dark {
  --heading-font: var(--dark-heading-font);
  --heading-weight: 600;
  --body: #c4c4c6;
  color: #fff;
  background: #171c26;
}
.telpo-product[data-product="t20"] .copy {
  position: absolute;
}
.telpo-product[data-product="t20"] .copy p {
  font-size: calc(22 * var(--u));
  line-height: 1.75;
  margin-top: calc(27 * var(--u));
  color: var(--body);
}
.telpo-product[data-product="t20"] h2 > span,
.telpo-product[data-product="t20"] h3 > span {
  display: block;
  width: fit-content;
}
.telpo-product[data-product="t20"] :is(h2, h3) > span + span {
  margin-top: calc(4 * var(--u));
}
.telpo-product[data-product="t20"] .gradient {
  width: fit-content;
  color: #ff6c00;
}
.telpo-product[data-product="t20"] .silver {
  color: #eee;
}
.telpo-product[data-product="t20"] .graphite {
  color: #333;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .telpo-product[data-product="t20"] .gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-size: 100% calc(0.9em);
    background-position: left calc(0.13em);
    background-repeat: no-repeat;
    background-color: #ff6c00;
  }
  .telpo-product[data-product="t20"] .orange-metal {
    background-image: var(--orange-metal);
    background-color: #b44f13;
  }
  .telpo-product[data-product="t20"] .orange-light {
    background-image: var(--orange-light);
    background-color: #ffb595;
  }
  .telpo-product[data-product="t20"] .silver {
    background-image: var(--silver);
    background-color: #b6b6b9;
  }
  .telpo-product[data-product="t20"] .graphite {
    background-image: var(--graphite);
    background-color: #a8a8a8;
  }
}
.telpo-product[data-product="t20"] .features {
  height: calc(396 * var(--u));
}
.telpo-product[data-product="t20"] .feature-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 80.729167%;
  margin: 0 auto;
  padding-top: calc(128 * var(--u));
}
.telpo-product[data-product="t20"] .feature {
  text-align: center;
}
.telpo-product[data-product="t20"] .feature-icon {
  height: calc(88 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.telpo-product[data-product="t20"] .feature-icon img {
  width: auto;
  max-width: none;
  height: auto;
  max-height: 100%;
}
.telpo-product[data-product="t20"] .feature:nth-child(1) img {
  width: calc(77 * var(--u));
}
.telpo-product[data-product="t20"] .feature:nth-child(2) img {
  width: calc(79 * var(--u));
}
.telpo-product[data-product="t20"] .feature:nth-child(3) img {
  width: calc(77 * var(--u));
}
.telpo-product[data-product="t20"] .feature:nth-child(4) img {
  width: calc(71 * var(--u));
}
.telpo-product[data-product="t20"] .feature:nth-child(5) img {
  width: calc(70 * var(--u));
}
.telpo-product[data-product="t20"] .feature:nth-child(6) img {
  width: calc(58 * var(--u));
}
.telpo-product[data-product="t20"] .feature p {
  font-size: calc(28 * var(--u));
  margin-top: calc(20 * var(--u));
  color: #939393;
}
.telpo-product[data-product="t20"] .face-copy {
  left: 17.552083%;
  top: 34.368932%;
}
.telpo-product[data-product="t20"] .face-payment {
  background: #ff8e0a;
  --body: #fff;
}
.telpo-product[data-product="t20"] .face-copy h2 {
  letter-spacing: 0;
}
.telpo-product[data-product="t20"] .face-copy p {
  margin-top: calc(20 * var(--u));
}
.telpo-product[data-product="t20"] .qr-copy {
  left: 20.3125%;
  top: 45.925926%;
}
.telpo-product[data-product="t20"] .nfc-copy {
  left: 68.541667%;
  top: 23.08642%;
}
.telpo-product[data-product="t20"] .qr-nfc .copy {
  font-size: calc(22 * var(--u));
}
.telpo-product[data-product="t20"] .qr-nfc .copy p {
  margin-top: calc(28 * var(--u));
}
.telpo-product[data-product="t20"] .display {
  padding: calc(100 * var(--u)) 11.875%;
}
.telpo-product[data-product="t20"] .display-panel {
  border-radius: calc(18 * var(--u));
  overflow: hidden;
}
.telpo-product[data-product="t20"] .display-copy {
  left: 11.748634%;
  top: 23.974359%;
}
.telpo-product[data-product="t20"] .display-copy p {
  line-height: 1.75;
  color: #555;
}
.telpo-product[data-product="t20"] .protection {
  background: #ff8e0a;
  --body: #fff;
}
.telpo-product[data-product="t20"] .protection-copy {
  left: 17.604167%;
  top: 21.604938%;
}
.telpo-product[data-product="t20"] .protection-copy p {
  margin-top: calc(19 * var(--u));
}
.telpo-product[data-product="t20"] .protection-grid {
  position: absolute;
  left: 17.708333%;
  top: 43.950617%;
  display: grid;
  grid-template-columns: repeat(4, calc(140 * var(--u)));
  gap: calc(27 * var(--u));
}
.telpo-product[data-product="t20"] .protection-card {
  --card-u: var(--u);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(140 * var(--card-u));
  min-width: 0;
  padding: calc(14 * var(--card-u)) calc(8 * var(--card-u))
    calc(10 * var(--card-u));
  border: calc(3 * var(--card-u)) solid #ffdda6;
  border-radius: calc(20 * var(--card-u));
  background: linear-gradient(#fff 0%, #fffcf7 48%, #fff3df 100%);
  box-shadow: 0 calc(8 * var(--card-u)) calc(12 * var(--card-u))
    rgb(178 87 0 / 24%);
  text-align: center;
}
.telpo-product[data-product="t20"] .protection-card dd {
  order: 0;
  width: 100%;
}
.telpo-product[data-product="t20"] .protection-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(108 * var(--card-u));
}
.telpo-product[data-product="t20"] .protection-icon::after {
  content: "";
  position: absolute;
  bottom: calc(5 * var(--card-u));
  left: 50%;
  width: calc(38 * var(--card-u));
  height: calc(5 * var(--card-u));
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgb(167 121 63 / 24%);
  filter: blur(calc(3 * var(--card-u)));
}
.telpo-product[data-product="t20"] .protection-icon img {
  flex: none;
  width: auto;
  height: calc(94 * var(--card-u));
  max-width: 100%;
  object-fit: contain;
}
.telpo-product[data-product="t20"] .protection-value {
  display: block;
  width: 100%;
  font-family: var(--light-heading-font);
  font-weight: 700;
  font-size: calc(28 * var(--card-u));
  line-height: calc(38 * var(--card-u));
  color: #ff8900;
  white-space: nowrap;
}
.telpo-product[data-product="t20"] .protection-card dt {
  order: 1;
  width: 100%;
  font-size: calc(22 * var(--card-u));
  color: #bc6a42;
  line-height: calc(32 * var(--card-u));
  white-space: nowrap;
}
.telpo-product[data-product="t20"] .performance-copy {
  left: 59.427083%;
  top: 26.296296%;
}
.telpo-product[data-product="t20"] .performance-copy p {
  margin-top: calc(19 * var(--u));
  color: #eee;
}
.telpo-product[data-product="t20"] .performance-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(170 * var(--u)));
  gap: calc(33 * var(--u));
  margin-top: calc(58 * var(--u));
  text-align: center;
  margin-left: calc(-28 * var(--u));
}
.telpo-product[data-product="t20"] .performance-grid img {
  width: calc(105 * var(--u));
  margin: 0 auto;
}
.telpo-product[data-product="t20"] .performance-grid dd {
  font-size: calc(22 * var(--u));
  line-height: 1.6;
  margin-top: calc(18 * var(--u));
}
.telpo-product[data-product="t20"] .connectivity-copy {
  left: 20.885417%;
  top: 21.464646%;
}
.telpo-product[data-product="t20"] .connectivity-copy p {
  margin-top: calc(28 * var(--u));
  color: #555;
}
.telpo-product[data-product="t20"] .connectivity-copy p + p {
  margin-top: calc(44 * var(--u));
}
.telpo-product[data-product="t20"] .audio-copy {
  left: 21.041667%;
  top: 20.769231%;
}
.telpo-product[data-product="t20"] .audio-copy p {
  margin-top: calc(28 * var(--u));
}
.telpo-product[data-product="t20"] .audio-copy .indicator {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  margin-top: calc(54 * var(--u));
  color: #58ee00;
  font-size: calc(28 * var(--u));
}
.telpo-product[data-product="t20"] .indicator svg {
  width: calc(74 * var(--u));
  height: calc(56 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.telpo-product[data-product="t20"] .installation {
  background: #f2f2f2;
}
.telpo-product[data-product="t20"] .installation h2 {
  position: absolute;
  left: 16.666667%;
  top: 41.297935%;
  font-size: calc(55 * var(--u));
  line-height: 1.3;
}
.telpo-product[data-product="t20"] .mobile-note {
  display: none;
}
.telpo-product[data-product="t20"] .scenarios {
  padding: calc(124 * var(--u)) 0 calc(160 * var(--u));
  text-align: center;
}
.telpo-product[data-product="t20"] .scenarios > h2 {
  font-size: calc(55 * var(--u));
}
.telpo-product[data-product="t20"] .scenario-grid {
  width: calc(1390 * var(--u));
  max-width: calc(100% - 48px);
  margin: calc(86 * var(--u)) auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(20 * var(--u));
  row-gap: calc(22 * var(--u));
  align-items: start;
}
.telpo-product[data-product="t20"] .scenario-grid figure {
  min-width: 0;
}
.telpo-product[data-product="t20"] .scenario-grid img {
  width: 100%;
  border-radius: calc(16 * var(--u));
}
.telpo-product[data-product="t20"] .scenario-grid figcaption {
  font-family: var(--body-font);
  font-size: calc(24 * var(--u));
  line-height: 1.5;
  margin-top: calc(13 * var(--u));
}
.telpo-product[data-product="t20"] .scenario-tall {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.telpo-product[data-product="t20"] .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (min-width: 1900px) {
  .t20-viewport[data-product="t20"] > .telpo-product[data-product="t20"] {
    --u: 1px;
    width: 1920px;
    max-width: none;
    margin-left: calc((100% - 1920px) / 2);
    margin-left: round(nearest, calc((100% - 1920px) / 2), 1px);
    margin-right: 0;
  }
}
@media (max-width: 1279px) {
  .telpo-product[data-product="t20"] {
    font-size: 16px;
  }
  .telpo-product[data-product="t20"] .copy p {
    font-size: 16px;
    line-height: 1.65;
  }
  .telpo-product[data-product="t20"] .feature p {
    font-size: 18px;
  }
  .telpo-product[data-product="t20"] .performance-copy {
    left: 58%;
  }
  .telpo-product[data-product="t20"] .performance-copy p {
    font-size: 14px;
  }
  .telpo-product[data-product="t20"] .performance-grid dd {
    font-size: 14px;
  }
}
@media (max-width: 1023px) {
  .telpo-product[data-product="t20"] {
    --u: 0.0520833333vw;
  }
  .telpo-product[data-product="t20"] :is(h2, h3) {
    font-size: 30px;
  }
  .telpo-product[data-product="t20"] .features {
    height: auto;
    padding: 35px 20px;
  }
  .telpo-product[data-product="t20"] .feature-grid {
    width: 100%;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 12px;
  }
  .telpo-product[data-product="t20"] .feature-icon {
    height: 48px;
  }
  .telpo-product[data-product="t20"] .features .feature .feature-icon img {
    width: auto;
    max-width: 48px;
    max-height: 48px;
  }
  .telpo-product[data-product="t20"] .feature p {
    font-size: 16px;
    margin-top: 12px;
  }
  .telpo-product[data-product="t20"]
    :is(
      .face-payment,
      .qr-nfc,
      .protection,
      .performance,
      .connectivity,
      .audio,
      .installation
    ) {
    display: flex;
    flex-direction: column;
  }
  .telpo-product[data-product="t20"] .copy {
    position: static;
    padding: 32px 24px;
  }
  .telpo-product[data-product="t20"] .copy p {
    margin-top: 18px;
  }
  .telpo-product[data-product="t20"] .face-copy {
    order: -1;
  }
  .telpo-product[data-product="t20"] .face-copy h2 {
    font-size: 28px;
    letter-spacing: 0;
  }
  .telpo-product[data-product="t20"] .face-payment .copy p {
    max-width: 30em;
  }
  .telpo-product[data-product="t20"] .qr-nfc {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .telpo-product[data-product="t20"] .qr-nfc > .art {
    grid-column: 1/-1;
  }
  .telpo-product[data-product="t20"] .qr-nfc .copy {
    padding: 24px 18px 32px;
  }
  .telpo-product[data-product="t20"] .qr-nfc h3 {
    font-size: 26px;
  }
  .telpo-product[data-product="t20"] .qr-nfc .copy p {
    font-size: 15px;
    margin-top: 18px;
  }
  .telpo-product[data-product="t20"] .display {
    padding: 32px 20px;
  }
  .telpo-product[data-product="t20"] .display-panel {
    border-radius: 12px;
    background: #f4f5f5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .telpo-product[data-product="t20"] .display-copy {
    order: -1;
    padding: 24px;
  }
  .telpo-product[data-product="t20"] .protection-copy {
    order: -1;
  }
  .telpo-product[data-product="t20"] .protection-grid {
    position: static;
    grid-template-columns: repeat(4, minmax(0, 140px));
    justify-content: center;
    gap: 8px;
    padding: 0 12px 24px;
    margin-top: 12px;
  }
  .telpo-product[data-product="t20"] .protection-card {
    --card-u: min(calc((100vw - 48px) / 560), 1px);
    width: 100%;
  }
  .telpo-product[data-product="t20"] .performance-copy {
    padding-bottom: 36px;
  }
  .telpo-product[data-product="t20"] .performance-copy p {
    font-size: 16px;
  }
  .telpo-product[data-product="t20"] .performance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
  }
  .telpo-product[data-product="t20"] .performance-grid img {
    width: 62px;
  }
  .telpo-product[data-product="t20"] .performance-grid dd {
    font-size: 14px;
    margin-top: 12px;
  }
  .telpo-product[data-product="t20"] .connectivity-copy {
    order: -1;
  }
  .telpo-product[data-product="t20"] .connectivity-copy p + p {
    margin-top: 24px;
  }
  .telpo-product[data-product="t20"] .audio-copy {
    order: -1;
  }
  .telpo-product[data-product="t20"] .audio-copy .indicator {
    font-size: 20px;
    margin-top: 24px;
    gap: 10px;
  }
  .telpo-product[data-product="t20"] .indicator svg {
    width: 44px;
    height: 34px;
  }
  .telpo-product[data-product="t20"] .installation h2 {
    position: static;
    order: -1;
    padding: 32px 24px 0;
  }
  .telpo-product[data-product="t20"] .installation h2,
  .telpo-product[data-product="t20"] .scenarios > h2 {
    font-size: 30px;
  }
  .telpo-product[data-product="t20"] .installation h2 br {
    display: none;
  }
  .telpo-product[data-product="t20"] .mobile-note {
    display: block;
    padding: 0 24px 24px;
    font-size: 14px;
    color: #59616c;
  }
  .telpo-product[data-product="t20"] .scenarios {
    padding: 40px 20px 50px;
  }
  .telpo-product[data-product="t20"] .scenario-grid {
    width: 100%;
    max-width: none;
    margin-top: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }
  .telpo-product[data-product="t20"] .scenario-tall {
    grid-column: 1/-1;
    grid-row: auto;
    max-width: 300px;
    justify-self: center;
  }
  .telpo-product[data-product="t20"] .scenario-grid figcaption {
    font-size: 16px;
    margin-top: 10px;
  }
  .telpo-product[data-product="t20"] .scenario-grid img {
    border-radius: 10px;
  }
}