@font-face{
  font-family:"Zhizheng Brush";
  src:url("../fonts/zhizheng-slogan.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
html.slogan-loading [data-brand-slogan]{visibility:hidden}
html.slogan-font-fallback .brand-slogan[data-brand-slogan] .brand-slogan-title{font-family:"STKaiti","KaiTi",serif!important}
/* The slogan layer sits above each banner wash, beneath the site navigation. */
.home-page .hero-brand-slogan .hero-banner-inner,
.overview-brand-banner .brand-slogan-stage{
  position:absolute;z-index:2;inset:0;display:flex;align-items:center;justify-content:center;
  max-width:none;padding:0 32px;transform:translateY(18%);pointer-events:none;
}
.home-page .hero-brand-slogan .hero-banner-copy,
.overview-brand-banner .brand-slogan{
  position:relative;width:max-content;max-width:calc(100vw - 64px);text-align:center;
  color:#fffdf6;pointer-events:auto;outline:none;
  transform:translate3d(var(--slogan-x,0px),var(--slogan-y,0px),0);
  transition:transform .65s cubic-bezier(.16,1,.3,1);
}
.home-page .hero-brand-slogan .hero-banner-copy:before,
.overview-brand-banner .brand-slogan:before{
  position:absolute;z-index:-1;inset:-45% -22%;content:"";pointer-events:none;
  background:radial-gradient(ellipse,rgba(14,42,52,.56),rgba(14,42,52,.25) 45%,transparent 72%);
}
.home-page .hero-brand-slogan .hero-banner-copy h1,
.overview-brand-banner .brand-slogan-title{
  display:block;max-width:none;margin:0;padding:8px 0;color:#fffdf6;
  font-family:"Zhizheng Brush","STKaiti","KaiTi",serif!important;
  font-size:clamp(38px,4.7vw,70px)!important;font-weight:400!important;
  line-height:1.3;letter-spacing:.05em;white-space:nowrap;text-wrap:initial;
  text-shadow:0 3px 5px rgba(10,33,43,.25),0 8px 24px rgba(10,33,43,.42);
}
.brand-slogan-title .slogan-phrase{display:inline-block}
.brand-slogan-title .slogan-pause{display:inline-block;width:.48em;font-size:.6em;vertical-align:.08em}
.brand-slogan-title .slogan-phrase:last-child{
  color:#ffeac0;
}
.home-page .hero-brand-slogan .hero-banner-lead,
.overview-brand-banner .brand-slogan-subtitle{
  max-width:none;margin:10px 0 0;color:#fffdf7;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  font-size:clamp(17px,1.75vw,26px)!important;font-weight:400;line-height:1.6;
  letter-spacing:.28em;text-shadow:0 2px 8px rgba(9,29,38,.68);
}
.brand-slogan-subtitle:after{
  display:block;width:84px;height:1px;margin:19px auto 0;content:"";
  background:linear-gradient(90deg,transparent,#e5c58d 25%,#e5c58d 75%,transparent);
  transform:scaleX(.72);transition:transform .65s cubic-bezier(.16,1,.3,1);
}
.brand-slogan:hover .brand-slogan-subtitle:after,
.brand-slogan:focus-visible .brand-slogan-subtitle:after{transform:scaleX(1.65)}
.brand-slogan:focus-visible{outline:1px solid #eed6a5!important;outline-offset:16px}
.home-page .hero-brand-slogan .hero-banner-wash{
  top:var(--hero-image-gap,0px);bottom:var(--hero-image-gap,0px);
  background:linear-gradient(180deg,transparent 32%,rgba(13,39,49,.08) 48%,rgba(13,39,49,.15) 75%,rgba(13,39,49,.1));
}
.overview-brand-banner .overview-banner-shade{
  background:linear-gradient(180deg,rgba(13,39,49,.04),rgba(13,39,49,.1) 48%,rgba(13,39,49,.15));
}
.overview-brand-banner:hover .overview-banner-shade{opacity:1}
.overview-brand-banner .brand-slogan [data-banner-visible="0"]{display:none!important}
@keyframes slogan-ink-reveal{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.975)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes slogan-caption-reveal{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(prefers-reduced-motion:no-preference){
  .overview-brand-banner.is-slogan-visible .brand-slogan.is-slogan-ready .slogan-phrase{
    animation:slogan-ink-reveal 1.15s cubic-bezier(.16,1,.3,1) both;
  }
  .overview-brand-banner.is-slogan-visible .brand-slogan.is-slogan-ready .slogan-phrase:last-child{animation-delay:.14s}
  .overview-brand-banner.is-slogan-visible .brand-slogan.is-slogan-ready .brand-slogan-subtitle{
    animation:slogan-caption-reveal 1s .24s cubic-bezier(.16,1,.3,1) both;
  }
}
.overview-brand-banner .brand-slogan-stage{transform:translateY(26%)}
@media(max-width:760px){
  .home-page .hero-brand-slogan .hero-banner-inner,
  .overview-brand-banner .brand-slogan-stage{padding:0 18px;transform:translateY(18%)}
  .home-page .hero-brand-slogan .hero-banner-copy,
  .overview-brand-banner .brand-slogan{max-width:calc(100vw - 36px)}
  .home-page .hero-brand-slogan .hero-banner-copy h1,
  .overview-brand-banner .brand-slogan-title{padding:3px 0;font-size:clamp(23px,6.1vw,43px)!important;letter-spacing:.01em;line-height:1.25}
  .home-page .hero-brand-slogan .hero-banner-lead,
  .overview-brand-banner .brand-slogan-subtitle{margin-top:4px;font-size:clamp(12px,3.15vw,19px)!important;line-height:1.5;letter-spacing:.15em}
  .brand-slogan-subtitle:after{width:58px;margin-top:10px}
  .overview-brand-banner .brand-slogan-stage{transform:translateY(20%)}
}
@media(prefers-reduced-motion:reduce){
  .brand-slogan,.brand-slogan-subtitle:after{animation:none!important;transition:none!important;transform:none!important}
  .slogan-phrase,.brand-slogan-subtitle{animation:none!important}
}
