/* Modern presentation layer for the preserved Wanku theme. */
:root {
  --ink: #211d1a;
  --muted: #716a64;
  --accent: #ed5b35;
  --accent-dark: #a7371c;
  --cream: #fffaf5;
  --surface: rgba(255, 255, 255, .88);
  --line: rgba(43, 33, 26, .1);
  --shadow: 0 18px 55px rgba(62, 39, 25, .1);
  --radius: 22px;
}
html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; }
a, button, img { transition-timing-function: cubic-bezier(.2,.8,.2,1); }

/* Header */
.head {
  position: absolute;
  z-index: 1000;
  height: 124px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  border-bottom: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 35px rgba(41,27,18,.06);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  transition: box-shadow .3s ease, background .3s ease;
}
.head.is-scrolled { box-shadow: 0 12px 38px rgba(41,27,18,.13); background: rgba(255,255,255,.94); }
.heads { max-width: 1200px; width: calc(100% - 48px); margin: 0 auto; }
.logo img { max-width: 100%; height: auto; mix-blend-mode: multiply; }
.nav ul li a { font-size: 15px; letter-spacing: .02em; }
.nav ul li a:before { background: rgba(255,239,229,.82); border-color: rgba(237,91,53,.08); }

/* Hero */
.flash { min-height: 360px; background: #f2e9e2; }
.DB_tab25 .DB_bgSet li { cursor: pointer; transform: scale(1.015); transition: transform 10s linear; }
.DB_tab25 .DB_bgSet li[style*="display: block"] { transform: scale(1); }
.DB_tab25 .DB_prev, .DB_tab25 .DB_next {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.78); box-shadow: 0 8px 24px rgba(0,0,0,.14);
  backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.DB_tab25:hover .DB_prev, .DB_tab25:hover .DB_next { opacity: 1; }
.DB_tab25 .DB_prev:hover, .DB_tab25 .DB_next:hover { transform: translateY(-50%) scale(1.08); }
.DB_tab25 .DB_prev img, .DB_tab25 .DB_next img { max-width: 22px; max-height: 22px; }
.DB_tab25 .DB_menuWrap .DB_menuSet li img { width: 9px; height: 9px; opacity: .7; }

/* Intro and section rhythm */
.home-tagline { padding: 34px 0 38px; background: linear-gradient(135deg,#ffd9c4,#fff0e5 55%,#e9ded8); }
.home-tagline .pingpai { width: min(1200px, calc(100% - 40px)); height: auto; padding: 0; }
.home-tagline .pingpai h1, .home-tagline .pingpai h2 { width: auto; height: auto; margin: 0; }
.home-tagline .pingpai h1 { font-size: clamp(24px, 3vw, 38px); line-height: 1.35; letter-spacing: -.02em; }
.home-tagline .pingpai h2 { margin-top: 9px; font-size: 14px; line-height: 1.65; color: #554a43 !important; }
.home-services { padding: 74px 0 42px; }
.home-services:before { height: 28px; }
.home-services .Service, .home-services .Services { height: auto; min-height: 344px; }
.home-services .Services, .Case, .IndexNew, .WeBody, .IndexLinkBody { max-width: 1200px; width: calc(100% - 48px); margin-left: auto; margin-right: auto; }
.home-services .Services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home-services .ServiceList { top: -5px; width: auto; margin: 0; float: none; }
.home-services .ServiceList > a { display: block; width: 100%; height: 100%; }
.home-services .ServiceLists { box-sizing: border-box; width: 100%; margin: 0; background: var(--surface) !important; border: 1px solid rgba(255,255,255,.72); }
.home-services .ServiceLists .top { width: 100%; height: 100%; padding-top: 0; left: 0 !important; }
.home-services .ServiceLists .top img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.home-services .ServiceList:hover .top img { transform: scale(1.035); filter: saturate(1.08); }

/* Content cards */
.CaseBody.CaseSubBody { box-sizing: border-box; width: min(1200px, calc(100% - 48px)); margin-right: auto; margin-left: auto; }
.CaseBody.CaseSubBody > .archive-pagination-target { grid-column: 1 / -1; justify-self: end; }
.CaseBody.CaseSubBody > .archive-pagination-target .pagination { width: auto; margin: 18px 0 40px; }
.CaseBody.CaseSubBody > .archive-pagination-target .nav-links { justify-content: flex-end; }
.home-plays, .home-intro { padding: 40px 0 56px; overflow: hidden; }
.home-plays { margin-top: 0; background: linear-gradient(180deg, #fffaf8, #fff7f4); box-shadow: 0 0 0 100vmax #fff9f7; clip-path: inset(0 -100vmax); }
.home-plays.Case, .home-intro .Case { height: auto !important; }
.home-intro { background: linear-gradient(180deg,#f0f6f2,#f8fbf9); }
.CaseMore { width: 100%; height: 82px; }
.CaseMore a { border: 0 !important; width: max-content; min-width: 120px; font-weight: 700; letter-spacing: -.02em; }
.CaseMore .more-link { opacity: .72; }
.CaseBody { width: 100%; height: auto; padding: 8px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
.CaseBody .list { width: auto; height: auto; margin: 0; float: none; }
.CaseBody .lists { width: 100%; height: auto; min-height: 248px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px rgba(55,38,27,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.CaseBody .list:hover .lists { transform: translateY(-7px); box-shadow: var(--shadow); }
.CaseBody .lists .imgs { width: 100%; height: 158px; }
.CaseBody .lists img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.CaseBody .list:hover img { transform: scale(1.06); }
.CaseBody .lists .title, .CaseBody .lists .coms { box-sizing: border-box; width: 100%; left: auto; border: 0; background: #fff; }
.CaseBody .lists .title { height: 42px; padding: 3px 14px 0; }
.CaseBody .lists .coms { height: 48px; padding: 0 14px 10px; }
.CaseBody .lists .a1, .CaseBody .lists .a2, .CaseBody .lists .a3, .CaseBody .lists .a4, .CaseBody .lists .a5 { display: none; }

/* News, partners, footer */
.IndexNew { height: auto; padding: 0 0 76px; overflow: hidden; background: linear-gradient(180deg, #fffafb, #fff6f8); box-shadow: 0 0 0 100vmax #fff8fa; clip-path: inset(0 -100vmax); }
.IndexNewhead, .IndexNewBody { width: 100%; height: auto; }
.IndexNewBody { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 36px; }
.IndexNewBodys, .IndexNewBodys[style] { box-sizing: border-box; width: auto !important; height: auto; float: none; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 10px 34px rgba(48,34,24,.06); }
.IndexNewBodys:empty, .IndexNewBodys[style*="320px"] { display: none; }
.I_NewList a { transition: color .2s ease, padding-left .2s ease; }
.I_NewList a:hover { color: var(--accent); padding-left: 5px; }
.WeBody { height: auto; margin-bottom: 0; padding: 0 0 36px; overflow: hidden; background: linear-gradient(180deg, #edf6f1, #f7faf8); box-shadow: 0 0 0 100vmax #f2f8f5; clip-path: inset(0 -100vmax); }
.WeBodyHead { margin-top: 0; }
.WeBodyTop { width: 100%; }
.WeBodyHp { box-sizing: border-box; width: calc(100% - 64px); margin-right: auto; margin-left: auto; border: 0; }
.WeBodyHp ul { display: grid; grid-template-columns: repeat(7,1fr); gap: 12px; }
.WeBodyHp li { width: auto; float: none; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.WeBodyHp img { max-width: 100%; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.WeBodyHp ul li:hover a { transform: none; transition-delay: 0s; }
.WeBodyHp li:hover img { filter: none; opacity: 1; transform: scale(1.04); }
.IndexLink { height: auto; padding-top: 0; background: #28231f; color: rgba(255,255,255,.68); }
.IndexLinkBody { height: auto; }
.IndexLinkRight { display: none; }
.Indeexmenue { box-sizing: border-box; width: 100%; height: auto; float: none; padding: 18px 20px; text-align: center; }
.IndexLink a, .footer a { color: rgba(255,255,255,.78); }
.Indeexmenue a:hover, .Indeexmenue a:focus,
.ZyFooterMenus a:hover, .ZyFooterMenus a:focus { color: #ff7a32 !important; -webkit-text-fill-color: #ff7a32; }
.footer { height: auto; padding: 22px 0; background: #1d1916; color: rgba(255,255,255,.65); }
.footers { width: calc(100% - 40px); height: auto; padding: 0; }



@media (max-width: 980px) {
  .heads { width: calc(100% - 28px); }
  .banner { display: none; }
  .nav { width: calc(100% - 198px); }
  .nav ul { display: flex; justify-content: flex-end; }
  .nav ul li, .nav ul li a { width: auto; min-width: 76px; }
  .home-services .Services, .CaseBody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .WeBodyHp ul { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 680px) {
  .head { height: 96px; }
  .heads { width: calc(100% - 24px); height: 96px; }
  .HeadTopLeft, .HeadTopRight, .banner { display: none; }
  .logo { width: 140px; height: 58px; }
  .logo img { max-height: 58px; }
  .nav { width: 100%; height: 38px; overflow-x: auto; }
  .nav ul { justify-content: flex-start; width: max-content; }
  .nav ul li { height: 38px; }
  .nav ul li a { min-width: 72px; height: 32px; padding: 6px 8px 0; font-size: 13px; }
  .nav ul li a:before { top: 2px; height: 30px; }
  .nav ul li a:after { bottom: 1px; }
  .flash { padding-top: 96px; height: 45vw; min-height: 210px; }
  .DB_tab25 .DB_prev, .DB_tab25 .DB_next { display: none; }
  .home-services { padding-top: 55px; }
  .home-services .Services, .CaseBody, .IndexNewBody { grid-template-columns: 1fr; }
  .home-services .Services, .Case, .IndexNew, .WeBody, .IndexLinkBody { width: calc(100% - 28px); }
  .CaseBody.CaseSubBody { width: calc(100% - 28px); }
  .home-services .ServiceList { height: 260px; }
  .home-services .ServiceLists { height: 250px; }
  .home-services .ServiceLists .top { height: 250px; }
  .home-plays, .home-intro { padding: 27px 0 30px; }
  .CaseBody .lists .imgs { height: 52vw; max-height: 250px; }
  .IndexNewhead .IndexNewComs { display: none; }
  .WeBodyTopLeft { display: none; }
  .WeBodyTopRight { width: 100%; }
  .WeBodyHp { width: calc(100% - 28px); }
  .WeBodyHp ul { grid-template-columns: repeat(2,1fr); }
  .Indeexmenue { box-sizing: border-box; width: 100%; height: auto; padding: 20px; line-height: 2; text-align: center; }
  .F_nav { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

}