/* ============================================================
   WKUN Homepage Clone — recreated layout & visual style
   ============================================================ */

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; }
body {
  background-color: #d5d5d5;
  font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei",
               "Helvetica Neue", "Hiragino Sans GB", "微软雅黑",
               STHeiti, Arial, SimSun, sans-serif;
  color: #111;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
/*a:hover {     color: #13e0bc; }*/
.pc a {
      font-family: "PingFang SC", sans-serif;
    font-weight: 300;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 30px;
    background-color: rgb(0 0 0 / 0%);
    padding: 0 20px 0 20px;
    white-space: nowrap;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right 60px;
    transition: all 0.5s;
        border: 1px solid #24242400 !important;
}
img { border: none; max-width: 100%; display: block; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; background-color: #E3E3E3; }
::-webkit-scrollbar-track { background-color: #E3E3E3; }
::-webkit-scrollbar-thumb { background-color: #555; }
::-webkit-scrollbar-thumb:hover { background-color: #3B3B3B; }
::-webkit-scrollbar-corner { background-color: #d3d3d3; }
::selection { color: #F0F0F0; background: #444; }

:root {
  --font-display: "Inter", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --content-width: 2000px;
}

/* ---------- Background: radial overlay + floating spheres ---------- */

@keyframes zhezhao {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


header h1#logoqj{
  display: none;
  
}
.bar8{
      margin-top: 0px !important;
}
/*字体*/
@font-face
{
font-family: BrandonText-Medium;
src: url('../css/font/BrandonText-Medium.otf');
font-display: swap;
}
@font-face
{
font-family: BrandonText-Black;
src: url('../css/font/BrandonText-Black.otf');
font-display: swap;
}

/* Four floating 3D-ish spheres (original signature look) */
.sphere {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  position: fixed;
  background: linear-gradient(to bottom, #dedede, #ffffff);
  transform: translateZ(0);
}
.sphere-1 {
  width: 5%; top: 40%; left: 65%;
  z-index: -7;
  animation: circle1 15s infinite forwards;
}
.sphere-2 {
  width: 35%; bottom: -10%; left: -5%;
  z-index: -8;
  filter: blur(20px);
  animation: circle2 20s infinite forwards;
}
.sphere-3 {
  width: 45%; top: -15%; left: 65%;
  z-index: -9;
  filter: blur(15px);
  animation: circle3 25s infinite forwards;
}
.sphere-4 {
  width: 10%; top: -8%; left: 35%;
  z-index: -7;
  animation: circle4 10s infinite forwards;
}
@keyframes circle1 {
  from { transform: translateY(-50px) rotate(0deg); }
  50%  { transform: translateY(0px)  rotate(180deg); }
  to   { transform: translateY(-50px) rotate(360deg); }
}
@keyframes circle2 {
  from { transform: translateY(0px)   rotate(0deg); }
  50%  { transform: translateY(100px) rotate(180deg); }
  to   { transform: translateY(0px)   rotate(360deg); }
}
@keyframes circle3 {
  from { transform: translateY(0px)  rotate(0deg); }
  50%  { transform: translateY(30px) rotate(180deg); }
  to   { transform: translateY(0px)  rotate(360deg); }
}
@keyframes circle4 {
  from { transform: translateY(30px) rotate(0deg); }
  50%  { transform: translateY(0px)  rotate(180deg); }
  to   { transform: translateY(30px) rotate(360deg); }
}

/* ---------- Hero (replaced from oiloil-hero) ---------- */
.hero {
    --hl: #ffe28a;
    --ink: #1a1a1a;
    --t3: #999;
    --ease: cubic-bezier(.19, 1, .22, 1);
    --eye-x: 0px;
    --eye-y: 0px;
    position: relative;
    overflow: hidden;
    width: 1375px;
    margin: auto;
    border-radius: 20px;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 60px;
}
.centrals{
  width: 100%;
}

/* hero background layers (scoped inside .hero) */
.bg-grid,
.bg-fade,
 .field { position: absolute; inset: 0; }

.bg-fade {
  background: radial-gradient(80% 50% at 50% -10%, #ffe28a33, #0000 70%);
}
.field { opacity: .16; overflow: clip; }
.blob {
  background: radial-gradient(circle, #ffe28af5 0, #ffe28a94 45%, #ffe28a00 74%);
  border-radius: 50%;
  position: absolute;
}
.blob.b1 { width: 40vmax; height: 40vmax; animation: hero-float1 36s ease-in-out infinite alternate; top: -12vmax; left: -10vmax; }
.blob.b2 { width: 32vmax; height: 32vmax; animation: hero-float2 44s ease-in-out infinite alternate; top: 40vh; right: -12vmax; }


@keyframes hero-float1 { 0% { transform: translate(0); } to { transform: translate(10vmax, 8vmax); } }
@keyframes hero-float2 { 0% { transform: translate(0); } to { transform: translate(-8vmax, 10vmax); } }

.hero h1, .hero .sub { position: relative; z-index: 2; }
.hero h1 {
  letter-spacing: 0em;
  font-size: clamp(72px, 12vw, 140px);
  font-weight: 700;
  line-height: .94;
}
.hero h1 sup { vertical-align: super; font-size: .16em; font-weight: 400; }
.lmask {
  margin-top: 24px;
  margin-bottom: -.09em;
  padding-bottom: .09em;
  display: block;
  overflow: hidden;
}
/* logo 改为 CSS background-image 加载：浅色用 qjlogo.svg / qjlogo2.svg，深色切 _drak 版本 */
.qj-logo {
  display: block;
  height: .92em;
  max-width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.logo-qj { aspect-ratio: 586/133; background-image: url(qjlogo.svg); }
.logo-indesign { aspect-ratio: 602/130; background-image: url(qjlogo2.svg); }
html[data-theme="dark"] .logo-qj { background-image: url(qjlogo_drak.svg); }
html[data-theme="dark"] .logo-indesign { background-image: url(qjlogo2_drak.svg); }
.lmask > .qj-logo { display: block; transform: translateY(112%); }
/* logo 入场动画改为：仅当 #preload 演示结束（body.loaded）后才播放，
   避免刷新时 logo 在加载层还显示时就提前滑入 */
body.loaded .lmask > .qj-logo { animation: lift 1.5s var(--ease) forwards; }
.hero h1 .lmask:first-child > .qj-logo { animation-delay: .1s; }
.hero h1 .lmask:nth-child(2) > .qj-logo { animation-delay: .24s; }

/* mascot: person + dog + eyes */
.hero-illo {
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  /* 从上往下揭示：顶部保留、底部裁切 100% → 动画展开时内容自顶部向下显现；
     初始 translateY(-30px) 让人物自上方落入最终位，与包子掉落方向一致。 */
  clip-path: inset(0 0 100% 0);
  transform: translateY(-30px);
  transition: opacity .45s ease,
              clip-path .6s cubic-bezier(0.22, 1, 0.36, 1),
              transform .6s cubic-bezier(0.22, 1, 0.36, 1),
              top .25s ease, left .25s ease;
  width: min(36vw, 330px);
  display: block;
  position: absolute;
  bottom: -.7em;
  left: calc(4em - min(6.5vw, 21px));
}
/* 定位已在 preload 演示期间由 JS 轮询定好；.lmask(logo) 动画结束 + 定位稳定后脚本加 is-ready，
   触发「从上往下」落入式揭示（clip-path 自顶向下展开 + 轻微下落）。
   top/left 过渡仅作定位残差安全网（平滑归位，不硬跳）。 */
.hero-illo.is-ready { opacity: 1; clip-path: inset(0); transform: translateY(0); }
.hero-mascot-motion { aspect-ratio: 1086/1448; width: 100%; display: block; position: relative; }
.hero-illo img { width: 100%; display: block; position: absolute; inset: 0; }
.hero-person { transform-origin: 31% 82%; animation: person-breathe 5.4s ease-in-out infinite; filter: drop-shadow(0 10px 18px #00000014); }
/* 深浅模式人物图切换：两张图均 absolute inset:0 叠放，visibility 切换零重排、无闪烁 */
.hero-person-dark { visibility: hidden; }
html[data-theme="dark"] .hero-person-dark { visibility: visible; }
html[data-theme="dark"] .hero-person:not(.hero-person-dark) { visibility: hidden; }
.hero-eye {
  aspect-ratio: 1;
  z-index: 4;
  border-radius: 50%;
  width: 6.8%;
  position: absolute;
  transform: translate(-50%, -50%);
  /* 人物的眼睛（左右瞳孔），跟随光标位移；不要把 .hero-eye 当狗眼误隐藏。 */
}
.hero-eye.eye-left { top: 25.7%; left: 22.6%; }
.hero-eye.eye-right { top: 26.15%; left: 31.35%; }
.hero-eye i {
  aspect-ratio: 1;
  width: 34%;
  transform: translate3d(calc(-50% + var(--eye-x)), calc(-50% + var(--eye-y)), 0);
  border-radius: 50%;
  animation: blink-pupil 5.6s infinite;
  left: 50%;
  background: var(--ink);
  position: absolute;
  top: 50%;
}
.hero-eye:after {
  content: "";
  opacity: 0;
  border-radius: 2px;
  height: 1.5px;
  animation: blink-lid 5.6s infinite;
  left: 14%;
  right: 14%;
  transform: scaleX(.4);
  background: var(--ink);
  position: absolute;
  top: 50%;
}

/* subtitle */
.hero .sub {
  opacity: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
  margin-top: 40px;
  display: flex;
  transform: translateY(18px);
}
/* 副标题淡入改为：仅当 #preload 演示结束（body.loaded）后才播放 */
body.loaded .hero .sub { animation: fadeup 1.4s var(--ease) .15s forwards; }
.hero .zh {     letter-spacing: 0.3em;
    font-size: 14px;
    font-weight: 300;}
.hero .en { 
    letter-spacing: 0.15em;
    color: #999999c2;
    font-size: 14px;
    font-weight: 100;
}

@keyframes lift { to { transform: translateY(0); } }
@keyframes fadeup { to { opacity: 1; transform: translateY(0); } }
@keyframes person-breathe { 0%, to { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(-.25deg); } }
@keyframes blink-pupil { 0%, 45%, 48%, to { opacity: 1; scale: 1; } 46%, 47% { opacity: 0; scale: 1 .08; } }
@keyframes blink-lid { 0%, 45%, 48%, to { opacity: 0; transform: scaleX(.4); } 46%, 47% { opacity: 1; transform: scaleX(1); } }

/* ---------- Central cards ---------- */
.centrals {
margin: 0 auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: 1375px;
}
.design_card { border-radius: 20px; flex: 1 1 0; min-width: 280px; opacity: 0; -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);}
.design_card a {
    position: relative;
    display: block;
    height: 170px;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #fff;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
    transition: transform 300ms cubic-bezier(.215, .61, .355, 1), box-shadow 300ms ease-in-out, -webkit-transform 300ms cubic-bezier(.215, .61, .355, 1);
    text-decoration: none;
    border: 1px solid #ffffffeb !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: right 60px;
    background: linear-gradient(157.87deg, hsl(0deg 0% 100% / 40%), hsl(0deg 0% 100% / 40%));
}
.design_card a:hover {
      background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px);
}
.design_card h2 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  color: #111;
  letter-spacing: -0.5px;
}
.design_card p {
  font-size: 14px;
  color: #444;
  margin-top: 4px;
  font-weight: 200;
}
.design_card .count {
position: absolute;
    right: 30px;
    bottom: 24px;
    opacity: 0;
    transition: opacity .5s var(--ease), transform .7s var(--ease);
    font-size: 20px;
    transform: translate(-8px);
    -webkit-font-smoothing: antialiased;
    font-family: Helvetica Neue, -apple-system, PingFang SC, Noto Sans SC, sans-serif;
        transition: all 0.5s ease-in-out;
}

.design_card:hover .count{
  opacity: 1;
    transform: translate(0);
}
/* 中央卡片入场动画改为：仅当 #preload 演示结束（body.loaded）后才播放，
   卡片默认 opacity:0 隐藏（见 .design_card 基础规则），loaded 后逐张淡入上浮 */
body.loaded .design_card:nth-child(1) { animation: design_card 1s 1 both; }
body.loaded .design_card:nth-child(2) { animation: design_card 1.5s 1 both; }
body.loaded .design_card:nth-child(3) { animation: design_card 2.0s 1 both; }
body.loaded .design_card:nth-child(4) { animation: design_card 2.5s 1 both; }
@keyframes design_card {
  0%   { opacity: 0; transform: translateY(-30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Studio / contact row ---------- */
.studio {
margin: 0 auto;
    padding-top: 80px;
    min-height: 100px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    width: 1375px;
}
.studio_me {

    display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.04);
    padding: 0 30px 0 30px;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    border: 1px solid #ffffffad !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    background-position: right 60px;
    transition: all 0.5s;
}


.studio_me:hover {
    background-color: rgba(0, 0, 0, 0.08);
  }
.avatar {
  display: inline-block;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8e8e8 0%, #c9c9c9 100%);
  margin-right: 14px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar::after {
  content: "";
  position: absolute;
  left: 50%; top: 38%;
  transform: translateX(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #9a9a9a;
}
.avatar::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -12px;
  transform: translateX(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #9a9a9a;
}
.studio_me a {
font-family: var(--font-display);
    font-weight: 400;
    padding: 0 30px 0 30px;
    display: inline-flex;
    align-items: center;
 
}

.pill {

  margin-left: 25px;
    font-weight: 300;
      display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.04);
    padding: 0 30px 0 30px;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    border: 1px solid #ffffffad ;
    background-repeat: no-repeat ;
    background-size: contain ;
    background-position: right 60px;
        transition: all 0.5s;
}
.pill:hover {     background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px); }
.pill-mhy { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>"); }
.pill-xyk { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92V21a1 1 0 0 1-1.11 1 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 3.19 4.11 1 1 0 0 1 4.18 3h4.09a1 1 0 0 1 1 .75l1 4a1 1 0 0 1-.29 1L8.21 10.21a16 16 0 0 0 6 6l1.46-1.78a1 1 0 0 1 1-.29l4 1a1 1 0 0 1 .75 1z'/></svg>"); }

.about_me {
  display: flex;
  align-items: center;
  margin-left: 25px;
  gap: 25px;
}
.about_me dd {
  width: 60px; height: 60px;
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.04);
  background-repeat: no-repeat;
  background-size: 22px;
  background-position: center;
  transition: background-color 0.3s ease-in-out;
  position: relative;
  cursor: pointer;
      -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    text-decoration: none;
    border: 1px solid #ffffffad;
}
.about_me dd:hover {     background-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px); 
        transition: all 0.5s;
  }
.about_me dd.weixin {
 display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;

    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.04);
}
.about_me dd.weibo a  { 
 display: block;
    height: 60px;
    width: 60px;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    background-color: rgba(0, 0, 0, 0.04);
}
.about_me dd.qqchat a {
  display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
    background-size: 17px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;

}

/* WeChat QR popover */
.about_me dd.weixin .qr {
  position: absolute;
  left: 50%; top: -190px;
  transform: translateX(-50%) translateY(5px);
  width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: saturate(100%) blur(20px);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  padding: 13px;
  gap: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  pointer-events: none;
}
.about_me dd.weixin:hover .qr { 
opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    position: absolute;
    right: 0px;
    top: -180px;
    width: 160px;
    height: 160px;
    background-image: url(./images/xd_qrcode.svg);
    background-size: 134px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* transform: translateY(5px); */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
        background-color: rgb(237 239 242);
    border: 1px solid #fff;
    pointer-events: none;

}

.wechat dd.weixin .qr {
  position: absolute;
  left: 50%; top: -190px;
  transform: translateX(-50%) translateY(5px);
  width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  backdrop-filter: saturate(100%) blur(20px);
  -webkit-backdrop-filter: saturate(100%) blur(20px);
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  padding: 13px;
  gap: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
  pointer-events: none;
}

.wechat dd.weixin:hover .qr { 
opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    position: absolute;
    right: -122px;
    top: -180px;
    width: 160px;
    height: 160px;
    background-image: url(./images/wx_qrcode.svg);
    background-size: 134px;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    /* transform: translateY(5px); */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    backdrop-filter: saturate(100%) blur(20px);
    background-color: rgb(255 255 255 / 18%);
    border: 1px solid #fff;
    pointer-events: none;

}
.wechat dd.weixin:hover{ 
    background-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px);
    transition: all 0.5s;

}
.wechat dd a:hover{ 
    background-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 30px 28px -16px rgba(0, 0, 0, 0.26);
    transform: translate(0, -4px);
    transition: all 0.5s;

}
.qr span { background: #111; }
.qr span.off { background: transparent; }

/* Right-side mini-program / wechat public links */
.wechat {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0px;
  margin-right: -18px;
}
.wechat dd.weixin {
    font-weight: 300;
    font-size: 15px;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 60px;
    border-radius: 30px;
    padding: 0 20px 0 20px;
    white-space: nowrap;
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right 60px;
    transition: all 0.5s;
        border: 1px solid #24242400 !important;
}


/* ---------- Footer ---------- */
.copyrights {
    margin: 0 auto;
    padding: 20px 0 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 12px;
    color: #555;
    width: 1375px;
    font-weight: 200;
}
.copyrights dl { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.copyrights a { color: #555; transition: color 0.3s;     transition: all 0.5s ease-in-out;}
.copyrights a:hover { 
    color: #13e0bc;
    transition: all 0.5s ease-in-out;
        font-weight: 500;

}
.copyrights .sep { color: #ccc; }


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .zhezhao, .design_card { animation: none; opacity: 1; transform: none; }
  .sphere { animation: none; }
  .hero .lmask > .qj-logo,
  .hero-illo,
  .hero .sub { animation: none; transform: none; opacity: 1; clip-path: none; }
  .hero .blob, .hero-person, .hero-eye i, .hero-eye:after { animation: none; }
}



/* 加载层兜底：即使 CSS 动画未执行，也确保最终隐藏 */
#preload.is-hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #preload { animation: none !important; display: none !important; }
}

/* Preload 标题文字（替代原 img/index-title.png 绿底白字长条）
   与 index-title.css 的 #preload .title preload3 动画叠加，不冲突 */
#preload .title {
font-size: 15px;
    font-weight: 200;
    color: #000000;
    letter-spacing: 5px;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

.design_card h3.oilink {
display: inline-block;
    position: relative;
    background-image: linear-gradient(180deg, transparent 60%, #13e0bc 60%) !important;
    background-repeat: no-repeat !important;
    background-size: 0 100% !important;
    transition: background-size .45s cubic-bezier(.22, 1, .36, 1);
    cursor: pointer;
    margin-top: 0px;
    font-size: 2rem;
    font-family: BrandonText-Black, "Helvetica Neue", Arial, "PingFang SC", sans-serif;
}
.design_card:hover h3.oilink { background-size: 100% 100% !important; }


@media screen and (max-width: 1441px) {
.hero {
    width: 1253px;
}
.centrals {
    width: 1253px;
}
.studio {
    width: 1253px;
}
.copyrights {
    width: 1253px !important;
    min-width:1253px !important;
}

}
@media screen and (max-width: 1370px) {

.hero {
    width: 1161px;
}
.centrals {
    width: 1161px;
}
.studio {
    width: 1161px;
}
.design_card {
     flex: 1 1 40%;
}
.copyrights {
    width: 1161px !important;
    min-width:1161px !important;
}

  }

@media screen and (max-width: 1300px) {

.hero {
    width: 1075px;
}
.centrals {
     width: 1075px;
}
.studio {
     width: 1075px;
}
.copyrights {
    width: 1075px !important;
    min-width:1075px !important;
}


  }

@media screen and (max-width: 1250px) {

.hero {
    width: 90% !important;
}
.centrals {
     width: 90% !important;
}
.studio {
     width: 90% !important;
}
.copyrights {
    width: 90% !important;
    min-width:90% !important;
}

    }

/*@media (max-width: 1100px) {
    .hero-illo {
        bottom: -0.83em;
    }
}
@media (max-width: 1040px) {
    .hero-illo {
        bottom: -0.89em;
    }
}
@media (max-width: 1000px) {
    .hero-illo {
        bottom: -0.99em;
    }
}*/

.copyright_y {
   display: none;
}
/* 移动端隐藏整个桌面顶栏（避免与 .top#top 重复占位）
   注：media_time.css 的 @media(max-width:950px) 未隐藏 #header，故此处必需 */
@media screen and (max-width: 950px) {
  #header { display: none; }
  #top-theme-toggle{
            margin-right: 0px !important;
  }
  .jelly-bun-widget {
    z-index: 980;
}
}

/* ---------- Responsive ---------- */
@media screen and (max-width: 900px) {
  .hero, .centrals, .studio, .copyrights { width: 92%; }
  .studio { padding-top: 50px; }
  .pill, .about_me {  margin-top: 12px; }
  .wechat { margin-left: 0; margin-top: 12px; }
  .copyrights { padding-top: 50px; }

      .design_card {
        min-width: 280px;
    }
}
@media screen and (max-width: 700px) {
  .hero {         min-height: 50svh;
        padding: 0 10px;
        margin-top: 130px;}
  .hero h1 { font-size: clamp(58px, 19.5vw, 82px); }
  .hero .sub { gap: 12px; margin-top: 28px; }
  .hero .zh { font-size: 17px; }
  .hero .en { letter-spacing: .1em; font-size: 11px; line-height: 1.6; }
  .hero-illo { 
        width: min(97vw, 391px);
        bottom: -2.5em;
        left: 11.6em;
     }
         .centrals {
        width: 90% !important;
        margin-top: 40px;
    }
   #preload {
    display: none;
  }
  .qj-logo { height: auto; width: min(100%, 80vw); }
  .design_card { flex: 1 1 40%; }
  .design_card a { height: 140px; padding: 22px; }
  .design_card h2 { font-size: 22px; }
  .design_card .count { font-size: 24px; bottom: 18px; right: 22px; }
  .copyrights { flex-direction: column; }
  .copyrights_r { text-align: left; }
  .wechat dd.xcx,
  .wechat dd.gzh { display: none; }

}


@media screen and (max-width: 520px) {
    .copyrights {
        padding-top: 0px;
    }
    .studio {
    padding-top: 30px;
    width: 92% !important;
}
.about_me dd.weixin{
  display: none;
}
    .wechat {
        margin-left: 0;
        margin-top: 27px;
                display: none;
    }
        .hero {
              min-height: 60svh;
        padding: 0 10px;
        margin-top: 90px;
    }


    .hero .zh {
        font-size: 17px;
        width: 100%;
    }
    .hero .en {
        width: 100px;
    }

    .hero-illo {
        width: min(85vw, 373px);
        bottom: 0.1em;
        left: 2.3em;
    }
    .studio {
        padding-top: 30px;
    }

    .copyright_y {
    display: block !important;
        width: 100%;
}
.copyrights_l{
  display: none !important;
}

.copyrights_r{
  display: none !important;
}
    .copyright_y dd.c1 {
        display: block;
        font-size: 9px;
        font-family: PingFangSC-Light;
        float: right;
        padding-right: 0px;
    }
        .copyright_y dd.c2 {
        display: block;
        font-family: PingFangSC-Light;
        font-size: 9px;
    }
.copyrights dl {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between;
}
}


@media screen and (max-width: 500px) {
      .copyrights_l {
        display: none !important;
    }
      .copyrights_r {
        display: none !important;
    }    
.copyright_y {
    float: right;
    line-height: 50px;
    display: block;
}
.copyrights {
    padding: 0px 0 15px !important;

}

    .copyright_y dd.c2 {
        display: block;
        font-family: PingFangSC-Light;
        font-size: 9px;
    }
        .copyright_y dd.c1 {
        display: block;
        font-size: 9px;
        font-family: PingFangSC-Light;
        float: right;
        padding-right: 0px;
    }
    .copyright_y dl{
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        align-items: center;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    }