:root {
  --paper: #fffdf8;
  --blue-1: #ddefff;
  --blue-2: #bfdff7;
  --green-1: #ddf3e7;
  --green-2: #bfe8d3;
  --coral-1: #f5a38a;
  --coral-2: #f27d64;
  --ink: #24313a;
  --muted: #6c7a80;
  --soft: #9aa7ad;
  --line: rgba(36, 49, 58, .1);
  --glass: rgba(255, 253, 248, .72);
  --shadow: 0 30px 100px rgba(93, 119, 128, .10);
  --float-shadow: 0 24px 70px rgba(93, 119, 128, .08);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(191, 223, 247, .45), transparent 34rem),
    radial-gradient(circle at 82% 12%, rgba(221, 243, 231, .8), transparent 30rem),
    linear-gradient(180deg, #fffdf8 0%, #f8fcfb 48%, #fffdf8 100%);
  color: var(--ink);
  font-family: "HarmonyOS Sans SC", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.ambient {
  border-radius: 999px;
  filter: blur(10px);
  opacity: .78;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.ambient-blue {
  animation: drift 16s ease-in-out infinite;
  background: rgba(191, 223, 247, .72);
  height: 34vw;
  left: -12vw;
  top: 12vh;
  width: 34vw;
}

.ambient-green {
  animation: drift 18s ease-in-out infinite reverse;
  background: rgba(191, 232, 211, .7);
  height: 30vw;
  right: -10vw;
  top: 32vh;
  width: 30vw;
}

.ambient-coral {
  animation: breathe 9s ease-in-out infinite;
  background: rgba(245, 163, 138, .46);
  bottom: 10vh;
  height: 20vw;
  left: 52vw;
  width: 20vw;
}

.site-header {
  align-items: center;
  backdrop-filter: blur(20px);
  background: rgba(255, 253, 248, .68);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 999px;
  box-shadow: 0 18px 60px rgba(108, 122, 128, .12);
  display: flex;
  gap: 28px;
  justify-content: space-between;
  left: 50%;
  max-width: 1120px;
  padding: 12px 14px 12px 18px;
  position: fixed;
  top: 18px;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  z-index: 20;
}

.brand,
.nav,
.hero-actions,
.section-head {
  align-items: center;
  display: flex;
}

.brand {
  font-weight: 900;
  gap: 12px;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.brand-mark {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.brand-mark img {
  display: block;
  filter: drop-shadow(0 12px 24px rgba(37, 100, 235, .18));
  height: 48px;
  object-fit: contain;
  width: 48px;
}

.nav {
  color: var(--muted);
  flex: 1;
  font-size: 14px;
  gap: 24px;
  justify-content: center;
}

.nav a {
  transition: color .2s ease;
}

.nav a:hover {
  color: var(--coral-2);
}

.nav-cta,
.button {
  border-radius: 999px;
  font-weight: 800;
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.nav-cta {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  padding: 12px 18px;
}

main {
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 26px;
}

.eyebrow,
.section-kicker,
.product-type {
  color: var(--coral-2);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(62px, 10vw, 132px);
  letter-spacing: -.08em;
  line-height: .92;
  margin-top: 18px;
}

h1 span {
  background: linear-gradient(90deg, var(--ink), var(--coral-2));
  -webkit-background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(38px, 5vw, 72px);
  letter-spacing: -.06em;
  line-height: 1.02;
}

h3 {
  font-size: 26px;
  letter-spacing: -.04em;
}

p {
  color: var(--muted);
  line-height: 1.85;
}

.story-text {
  font-size: 18px;
  margin-top: 32px;
  max-width: 650px;
}

.hero-actions {
  gap: 14px;
  margin-top: 38px;
}

.button {
  display: inline-flex;
  justify-content: center;
  padding: 15px 24px;
}

.button.primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 20px 50px rgba(36, 49, 58, .18);
}

.button.secondary {
  background: rgba(255, 255, 255, .58);
  border: 1px solid var(--line);
  color: var(--ink);
}

.button:hover,
.nav-cta:hover {
  background: var(--coral-2);
  box-shadow: 0 18px 45px rgba(242, 125, 100, .2);
  color: #fff;
  transform: translateY(-2px);
}

.story-scroll {
  height: 340vh;
  margin: 0 calc(50% - 50vw);
  position: relative;
}

.story-pin {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  min-height: 100vh;
  overflow: hidden;
  padding: 150px max(26px, calc((100vw - 1180px) / 2 + 26px)) 76px;
  position: relative;
  position: sticky;
  top: 0;
}

.story-pin::before {
  background:
    linear-gradient(135deg, rgba(221, 239, 255, .86), rgba(221, 243, 231, .78)),
    radial-gradient(circle at 72% 26%, rgba(245, 163, 138, .5), transparent 16rem);
  border-radius: 52% 48% 46% 54%;
  box-shadow: var(--shadow);
  content: "";
  height: min(72vw, 720px);
  position: absolute;
  right: max(18px, calc((100vw - 1180px) / 2));
  top: 50%;
  transform: translateY(-48%) rotate(-4deg) scale(calc(.92 + var(--scene-progress, 0) * .16));
  transition: transform .72s cubic-bezier(.2, .8, .2, 1), border-radius .72s ease;
  width: min(72vw, 720px);
}

.story-pin[data-scene="1"]::before {
  border-radius: 42% 58% 50% 50%;
}

.story-pin[data-scene="2"]::before {
  border-radius: 58% 42% 48% 52%;
}

.story-copy,
.story-visual {
  position: relative;
  z-index: 2;
}

.story-copy {
  max-width: 650px;
}

.story-copy h1,
.story-copy .eyebrow,
.story-copy .story-text {
  transition: opacity .24s ease, transform .36s ease;
}

.story-copy.is-changing h1,
.story-copy.is-changing .eyebrow,
.story-copy.is-changing .story-text {
  opacity: .08;
  transform: translateY(12px);
}

.story-visual {
  aspect-ratio: 1;
  min-height: 540px;
  position: relative;
  width: 100%;
}

.story-logo,
.story-chip,
.story-orb {
  position: absolute;
  transition: opacity .82s cubic-bezier(.2, .8, .2, 1), transform .82s cubic-bezier(.2, .8, .2, 1);
}

.story-logo {
  filter: drop-shadow(0 26px 56px rgba(13, 111, 103, .18));
  overflow: hidden;
}

.story-logo img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.logo-brand {
  border-radius: 40px;
  height: 330px;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%) rotate(1deg) scale(.92);
  width: 330px;
}

.logo-tayu {
  border-radius: 30px;
  height: 116px;
  left: 10%;
  top: 17%;
  transform: translate(0, 0) rotate(-5deg) scale(.92);
  width: 218px;
}

.logo-city {
  border-radius: 34px;
  bottom: 10%;
  height: 146px;
  right: 5%;
  transform: rotate(5deg) scale(.9);
  width: 146px;
}

.story-orb {
  border-radius: 999px;
  filter: blur(2px);
  opacity: .55;
}

.orb-blue {
  background: rgba(191, 223, 247, .72);
  height: 180px;
  left: 4%;
  top: 47%;
  width: 180px;
}

.orb-green {
  background: rgba(191, 232, 211, .72);
  bottom: 8%;
  height: 230px;
  left: 32%;
  width: 230px;
}

.orb-coral {
  background: rgba(245, 163, 138, .42);
  height: 150px;
  right: 14%;
  top: 15%;
  width: 150px;
}

.story-chip {
  backdrop-filter: blur(18px);
  background: rgba(255, 253, 248, .62);
  border-radius: 999px;
  box-shadow: var(--float-shadow);
  font-weight: 900;
  padding: 13px 17px;
}

.chip-city {
  left: 2%;
  top: 34%;
}

.chip-info {
  right: 5%;
  top: 36%;
}

.chip-match {
  left: 18%;
  bottom: 14%;
}

.chip-news {
  right: 24%;
  bottom: 4%;
}

.chip-real {
  right: 2%;
  top: 66%;
}

.story-pin[data-scene="0"] .logo-brand {
  opacity: .34;
  transform: translate(-50%, -34%) rotate(5deg) scale(.74);
}

.story-pin[data-scene="0"] .logo-tayu,
.story-pin[data-scene="0"] .logo-city {
  opacity: .62;
}

.story-pin[data-scene="1"] .logo-brand {
  transform: translate(-26%, -42%) rotate(-7deg) scale(.78);
}

.story-pin[data-scene="1"] .logo-tayu {
  transform: translate(80px, 22px) rotate(-1deg) scale(1);
}

.story-pin[data-scene="1"] .logo-city {
  transform: translate(-98px, -12px) rotate(2deg) scale(1);
}

.story-pin[data-scene="1"] .chip-info,
.story-pin[data-scene="1"] .chip-real {
  transform: translate(-46px, -20px);
}

.story-pin[data-scene="2"] .logo-brand {
  transform: translate(-22%, -54%) rotate(0deg) scale(.68);
}

.story-pin[data-scene="2"] .logo-tayu {
  transform: translate(88px, 88px) rotate(-4deg) scale(1.08);
}

.story-pin[data-scene="2"] .logo-city {
  transform: translate(-132px, -72px) rotate(4deg) scale(1.16);
}

.story-pin[data-scene="2"] .chip-city {
  transform: translate(40px, 52px);
}

.story-pin[data-scene="2"] .chip-match {
  transform: translate(50px, -80px);
}

.story-steps {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.story-steps article {
  height: 108vh;
  opacity: 0;
}

.scene-dots {
  display: flex;
  gap: 9px;
  margin-top: 30px;
}

.scene-dots span {
  background: rgba(36, 49, 58, .18);
  border-radius: 999px;
  height: 8px;
  transition: width .28s ease, background .28s ease;
  width: 8px;
}

.scene-dots span.active {
  background: var(--coral-2);
  width: 36px;
}

.section-compact {
  padding: 88px 0;
}

.floating-pill {
  backdrop-filter: blur(18px);
  background: rgba(255, 253, 248, .62);
  box-shadow: var(--float-shadow);
  position: absolute;
}

.brand-logo-panel {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) rotate(2deg);
  width: min(360px, 78%);
}

.hero-logo {
  border-radius: 38px;
  filter: drop-shadow(0 24px 54px rgba(13, 111, 103, .22));
  opacity: .96;
  width: 100%;
}

.logo-caption {
  backdrop-filter: blur(16px);
  background: rgba(255, 253, 248, .58);
  border-radius: 999px;
  bottom: -16px;
  box-shadow: var(--float-shadow);
  display: grid;
  gap: 2px;
  left: 50%;
  min-width: 220px;
  padding: 12px 18px;
  position: absolute;
  text-align: center;
  transform: translateX(-50%);
}

.logo-caption span {
  color: var(--soft);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.logo-caption strong {
  font-size: 14px;
}

.mini-logo-card {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 253, 248, .62);
  border-radius: 26px;
  bottom: 10%;
  box-shadow: var(--float-shadow);
  display: flex;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  position: absolute;
  right: 2%;
}

.mini-logo-card img {
  border-radius: 18px;
  height: 58px;
  object-fit: cover;
  width: 58px;
}

.mini-logo-card span {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.floating-pill {
  border-radius: 999px;
  font-weight: 900;
  padding: 14px 18px;
}

.pill-city {
  left: 0;
  top: 24%;
}

.pill-chat {
  bottom: 18%;
  right: 0;
}

.line-dot {
  background: var(--coral-2);
  border: 8px solid rgba(255, 253, 248, .8);
  border-radius: 50%;
  box-shadow: 0 18px 40px rgba(242, 125, 100, .22);
  height: 30px;
  position: absolute;
  width: 30px;
}

.dot-one {
  right: 18%;
  top: 14%;
}

.dot-two {
  bottom: 12%;
  left: 20%;
}

.section {
  padding: 108px 0;
}

.section-grid,
.product-grid,
.focus-grid {
  display: grid;
  gap: 24px;
}

.section-grid {
  grid-template-columns: .85fr 1.15fr;
}

.copy-block {
  background:
    radial-gradient(circle at 88% 14%, rgba(221, 243, 231, .46), transparent 15rem),
    linear-gradient(145deg, rgba(255, 253, 248, .58), rgba(255, 253, 248, .22));
  border-radius: 38px;
  box-shadow: var(--float-shadow);
  padding: 36px;
}

.copy-block p + p {
  margin-top: 18px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.tags span,
.belief-lines span {
  background: rgba(221, 239, 255, .56);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  padding: 10px 14px;
}

.section-head {
  justify-content: space-between;
  margin-bottom: 30px;
}

.section-head p {
  max-width: 430px;
}

.product-grid {
  grid-template-columns: repeat(3, 1fr);
}

.product-card {
  background:
    radial-gradient(circle at 76% 10%, rgba(255, 255, 255, .74), transparent 14rem),
    linear-gradient(155deg, rgba(255, 253, 248, .62), rgba(221, 239, 255, .24));
  border-radius: 34px;
  box-shadow: var(--float-shadow);
  min-height: 410px;
  padding: 30px;
  position: relative;
  transition: transform .24s ease, box-shadow .24s ease;
}

.product-card::after,
.focus-grid article::after,
.news-item::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), transparent);
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: .42;
  pointer-events: none;
  position: absolute;
}

.product-card > *,
.focus-grid article > *,
.news-item > * {
  position: relative;
  z-index: 1;
}

.product-card:hover {
  box-shadow: 0 34px 90px rgba(93, 119, 128, .14);
  transform: translateY(-8px);
}

.product-card.warm {
  background:
    radial-gradient(circle at 82% 12%, rgba(245, 163, 138, .20), transparent 13rem),
    linear-gradient(155deg, rgba(255, 253, 248, .62), rgba(245, 163, 138, .10));
}

.product-card.green {
  background:
    radial-gradient(circle at 82% 12%, rgba(191, 232, 211, .42), transparent 13rem),
    linear-gradient(155deg, rgba(255, 253, 248, .62), rgba(191, 232, 211, .20));
}

.product-symbol {
  align-items: center;
  background: linear-gradient(135deg, var(--blue-1), var(--green-1));
  border-radius: 26px;
  display: flex;
  font-size: 34px;
  font-weight: 900;
  height: 78px;
  justify-content: center;
  margin-bottom: 26px;
  width: 78px;
}

.product-logo-wrap {
  align-items: center;
  background: rgba(13, 137, 126, .10);
  border-radius: 28px;
  display: flex;
  height: 92px;
  justify-content: center;
  margin-bottom: 24px;
  overflow: hidden;
  width: 118px;
}

.product-logo-wrap.light {
  background: rgba(255, 253, 248, .68);
}

.product-logo-wrap.tayu {
  background: rgba(13, 137, 126, .12);
  height: 84px;
  width: 158px;
}

.product-logo {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.product-logo.tongcheng {
  border-radius: 24px;
}

.tayu-logo {
  border-radius: 24px;
}

.product-card h3 {
  margin: 8px 0 16px;
}

.product-card strong {
  display: block;
  margin-top: 24px;
}

.focus h2 {
  max-width: 760px;
}

.focus-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 34px;
}

.focus-grid article {
  background:
    radial-gradient(circle at 82% 0%, rgba(221, 243, 231, .35), transparent 12rem),
    rgba(255, 253, 248, .46);
  border-radius: 28px;
  box-shadow: var(--float-shadow);
  padding: 28px;
  position: relative;
}

.focus-grid span {
  color: var(--coral-2);
  font-size: 13px;
  font-weight: 900;
}

.focus-grid h3 {
  font-size: 22px;
  margin: 20px 0 12px;
}

.belief-card {
  background:
    radial-gradient(circle at 88% 16%, rgba(245, 163, 138, .18), transparent 18rem),
    linear-gradient(135deg, rgba(255, 253, 248, .62), rgba(221, 239, 255, .22));
  border-radius: 44px;
  box-shadow: var(--float-shadow);
  padding: clamp(34px, 6vw, 70px);
}

.news-river {
  display: grid;
  gap: 18px;
  grid-template-columns: 1.2fr .9fr .9fr;
}

.news-item {
  background:
    radial-gradient(circle at 90% 10%, rgba(245, 163, 138, .14), transparent 12rem),
    linear-gradient(145deg, rgba(255, 253, 248, .52), rgba(221, 243, 231, .20));
  border-radius: 32px;
  box-shadow: var(--float-shadow);
  min-height: 240px;
  padding: 28px;
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease;
}

.news-item.featured {
  background:
    radial-gradient(circle at 92% 16%, rgba(13, 137, 126, .18), transparent 14rem),
    linear-gradient(145deg, rgba(221, 243, 231, .48), rgba(255, 253, 248, .45));
}

.news-item:hover {
  box-shadow: 0 30px 82px rgba(93, 119, 128, .13);
  transform: translateY(-6px);
}

.news-date {
  color: var(--coral-2);
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 18px;
}

.news-item h3 {
  font-size: 24px;
  margin-bottom: 14px;
}

.news-item span {
  background: rgba(255, 253, 248, .66);
  border-radius: 999px;
  bottom: 24px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  padding: 8px 12px;
  position: absolute;
}

.belief-card p {
  font-size: 17px;
  max-width: 830px;
}

.belief-card p + p {
  margin-top: 18px;
}

.belief-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

dl {
  margin: 0;
}

dl div {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: 90px 1fr;
  padding: 15px 0;
}

dt {
  color: var(--soft);
  font-size: 13px;
}

dd {
  color: var(--ink);
  font-weight: 800;
  margin: 0;
}

.full {
  margin-top: 28px;
  width: 100%;
}

.footer {
  background:
    radial-gradient(circle at 8% 16%, rgba(221, 239, 255, .48), transparent 22rem),
    radial-gradient(circle at 92% 0%, rgba(191, 232, 211, .45), transparent 18rem),
    rgba(255, 253, 248, .68);
  border-radius: 34px 34px 0 0;
  box-shadow: 0 -18px 70px rgba(93, 119, 128, .08);
  color: var(--muted);
  display: grid;
  gap: 22px;
  margin: 70px auto 0;
  max-width: 1180px;
  padding: 34px 26px 38px;
}

.footer-main {
  align-items: flex-start;
  display: flex;
  gap: 28px;
  justify-content: space-between;
}

.footer-brand {
  align-items: center;
  display: flex;
  gap: 16px;
  min-width: 220px;
}

.footer-logo {
  filter: drop-shadow(0 16px 28px rgba(37, 100, 235, .16));
  height: 76px;
  object-fit: contain;
  width: 76px;
}

.footer-brand strong {
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}

.footer-contact,
.footer-meta,
.footer-meta p {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.footer-contact {
  justify-content: flex-end;
  max-width: 760px;
}

.footer-contact span,
.footer-contact a,
.footer-meta span,
.footer-meta a {
  background: rgba(255, 253, 248, .54);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
}

.footer-meta {
  border-top: 1px solid rgba(36, 49, 58, .08);
  justify-content: space-between;
  padding-top: 18px;
}

.footer p {
  font-size: 13px;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes drift {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(40px, 28px, 0) scale(1.08);
  }
}

@keyframes breathe {
  0%, 100% {
    opacity: .35;
    transform: scale(.92);
  }
  50% {
    opacity: .66;
    transform: scale(1.08);
  }
}

@media (max-width: 920px) {
  .nav {
    display: none;
  }

  .story-pin,
  .section-grid {
    grid-template-columns: 1fr;
  }

  .story-scroll {
    height: 320vh;
  }

  .story-pin {
    gap: 16px;
    padding-top: 132px;
  }

  .story-visual {
    min-height: 420px;
    order: -1;
  }

  .story-pin::before {
    height: min(92vw, 560px);
    left: 50%;
    right: auto;
    top: 39%;
    transform: translate(-50%, -50%) rotate(-4deg) scale(calc(.9 + var(--scene-progress, 0) * .12));
    width: min(92vw, 560px);
  }

  .logo-brand {
    height: 250px;
    width: 250px;
  }

  .logo-tayu {
    height: 88px;
    width: 166px;
  }

  .logo-city {
    height: 112px;
    width: 112px;
  }

  .story-chip {
    font-size: 13px;
    padding: 10px 13px;
  }

  .product-grid,
  .focus-grid,
  .news-river {
    grid-template-columns: 1fr 1fr;
  }

  .news-item.featured {
    grid-column: 1 / -1;
  }

  .section-head,
  .footer-main,
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .footer-contact {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
  }

  .brand {
    font-size: 14px;
    gap: 8px;
  }

  .brand-mark {
    height: 40px;
    width: 40px;
  }

  .brand-mark img {
    height: 40px;
    width: 40px;
  }

  .nav-cta {
    font-size: 12px;
    padding: 10px 13px;
  }

  main {
    padding: 0 18px;
  }

  .story-scroll {
    height: 300vh;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .story-pin {
    min-height: 100svh;
    padding: 112px 18px 46px;
  }

  .story-visual {
    min-height: 300px;
  }

  .story-pin::before {
    top: 31%;
  }

  .story-text {
    font-size: 16px;
    margin-top: 24px;
  }

  .logo-brand {
    border-radius: 28px;
    height: 188px;
    width: 188px;
  }

  .logo-tayu {
    height: 62px;
    left: 0;
    top: 12%;
    width: 116px;
  }

  .logo-city {
    height: 82px;
    width: 82px;
  }

  .story-chip {
    font-size: 12px;
  }

  .chip-news,
  .chip-real {
    display: none;
  }

  .section {
    padding: 70px 0;
  }

  .product-grid,
  .focus-grid,
  .news-river {
    grid-template-columns: 1fr;
  }

  .product-card {
    min-height: auto;
  }

  dl div {
    grid-template-columns: 1fr;
  }
}