/* ============================================================
   EEK site template · site frame styles (top bar / nav / footer / toolbar)
   —— Applies to the frame structure in base.html only, never to page content (content lives in sany.css)
   ============================================================ */

:root{
  --sy-red:#ed6a18;
  --sy-logo-red:#e60012;   /* Red reserved for the brand mark (EEK), kept separate from the site accent --sy-red so changes never affect each other */
  --sy-dark:#1a1a1a;
  --sy-gray:#666;
  --sy-gray-l:#999;
  --sy-light:#f5f5f5;
  --sy-border:#e5e5e5;
  --sy-max:1400px;
}

/* Browsers give body an 8px margin by default, which leaves an 8px white band around the whole page and
   shifts the mobile drawer and sticky header by 8px too (measured headerBottom 80 / navTop 72). Reset to zero here */
html,body{margin:0;padding:0;}
.sy-shell *{margin:0;padding:0;box-sizing:border-box;}
.sy-shell{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;color:#333;background:#fff;-webkit-font-smoothing:antialiased;}
.sy-shell a{text-decoration:none;color:inherit;}
.sy-shell ul,.sy-shell ol{list-style:none;}
.sy-shell img{max-width:100%;border:0;}
.sy-container{max-width:var(--sy-max);margin:0 auto;padding:0 20px;}
.sy-hide{display:none;}

/* ---------------- Top toolbar ---------------- */
.sy-top{background:var(--sy-dark);color:#fff;font-size:12px;height:34px;line-height:34px;}
.sy-top-inner{display:flex;justify-content:space-between;align-items:center;}
.sy-top-right{display:flex;align-items:center;}
.sy-top-right a{margin-left:18px;opacity:.8;transition:.2s;}
.sy-top-right a:hover{opacity:1;color:var(--sy-red);}
.sy-top-right .sy-lang{padding:0 10px;border-left:1px solid rgba(255,255,255,.2);opacity:.75;}
.sy-top-right .sy-lang.active{opacity:1;color:var(--sy-red);}

/* ---------------- Primary nav ---------------- */
.sy-header{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06);position:sticky;top:0;z-index:100;}
.sy-header-inner{display:flex;align-items:center;height:72px;gap:30px;}
.sy-logo{display:flex;align-items:center;gap:10px;flex:none;}
.sy-logo img{height:44px;width:auto;}
/* When no logo is uploaded in the admin, SiteLogo falls back to the site root URL (which follows the domain), so only logos with a "real image path" are kept:
   any src that does not start with /static/ or /uploads/ (i.e. holds no real image file) is hidden, leaving only the full company name as text */
.sy-logo img.sy-logo-img[src=""],
.sy-logo img.sy-logo-img[src="/"],
.sy-logo img.sy-logo-img:not([src*="/static/"]):not([src*="/uploads/"]):not([src*=".png"]):not([src*=".jpg"]):not([src*=".svg"]):not([src*=".webp"]){display:none;}
.sy-logo img.sy-logo-img[src="http://127.0.0.1:8301"],
.sy-logo img.sy-logo-img[src="http://127.0.0.1:8301/"]{display:none;}
/* Same for the QR code: when no WeChat QR code is uploaded in the admin, Qrcode falls back to the site root URL, so only real image files are shown here */
.sy-qr-img[src=""],
.sy-qr-img[src="/"]{display:none;}
.sy-qr-img:not([src*="/static/"]):not([src*="/uploads/"]):not([src*=".png"]):not([src*=".jpg"]):not([src*=".jpeg"]):not([src*=".svg"]):not([src*=".webp"]){display:none;}
/* Text logo: bold Chinese "EEK" plus light English "New partner", roughly 48px tall overall, centered in the 72px nav bar */
.sy-logo-text{
  font-size:30px;
  font-weight:800;
  color:var(--sy-red);
  letter-spacing:3px;
  line-height:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  white-space:nowrap;
  }
.sy-logo-text small{
  display:block;
  font-size:13px;
  color:var(--sy-dark);
  font-weight:500;
  letter-spacing:1.6px;
  text-transform:none;
  margin-top:6px;
  line-height:1;
  }

.sy-nav{flex:1;}
.sy-nav-list{display:flex;align-items:center;}
.sy-nav-list>li{position:relative;}
.sy-nav-list>li>a{display:block;padding:0 18px;height:72px;line-height:72px;font-size:16px;font-weight:600;white-space:nowrap;transition:.2s;border-bottom:3px solid transparent;}
.sy-nav-list>li>a:hover{color:var(--sy-red);border-bottom-color:var(--sy-red);}

/* Second- / third-level dropdown */
.sy-sub{position:absolute;top:72px;left:0;min-width:200px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;border-top:3px solid var(--sy-red);}
.sy-nav-list>li:hover .sy-sub{opacity:1;visibility:visible;transform:translateY(0);}
.sy-sub>li>a{display:block;padding:12px 20px;font-size:14px;border-bottom:1px solid var(--sy-border);white-space:nowrap;}
.sy-sub>li>a:hover{background:var(--sy-light);color:var(--sy-red);}
.sy-sub2{padding-left:0;}
.sy-sub2>li>a{display:block;padding:9px 20px 9px 34px;font-size:13px;color:#666;border-bottom:1px solid #f0f0f0;}
.sy-sub2>li>a:hover{color:var(--sy-red);background:#fafafa;}
/* Top-level items near the right edge (such as "Solutions") overflow the viewport when their dropdown opens; main.js measures them and adds this class to switch to right-aligned */
.sy-sub.sy-sub-right{left:auto;right:0;}

.sy-header-right{display:flex;align-items:center;gap:18px;flex:none;}
.sy-search{display:flex;align-items:center;height:36px;border:1px solid var(--sy-border);border-radius:18px;overflow:hidden;padding-left:14px;}
.sy-search input{border:none;outline:none;font-size:13px;width:130px;font-family:inherit;background:transparent;}
.sy-search button{border:none;background:var(--sy-light);height:36px;width:42px;cursor:pointer;color:#666;transition:.2s;font-size:14px;}
.sy-search button:hover{background:var(--sy-red);color:#fff;}
.sy-hotline{display:flex;align-items:center;gap:9px;color:var(--sy-red);}
.sy-hotline i{font-size:20px;}
.sy-hotline em{display:block;font-style:normal;font-size:11px;color:var(--sy-gray-l);letter-spacing:1px;}
.sy-hotline b{font-size:15px;letter-spacing:.5px;}
.sy-menu-btn{display:none;font-size:22px;color:#333;cursor:pointer;}

/* ---------------- Footer ---------------- */
.sy-footer{background:#141414;color:#999;font-size:13px;padding-top:56px;margin-top:0;}
.sy-footer-grid{display:grid;grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:30px;padding-bottom:44px;border-bottom:1px solid #2a2a2a;}
.sy-foot h2{color:#fff;font-size:15px;font-weight:700;margin-bottom:18px;}
.sy-foot li{margin-bottom:10px;}
.sy-foot a{transition:.2s;}
.sy-foot a:hover{color:var(--sy-red);}
.sy-foot p{margin-bottom:10px;line-height:1.7;}
.sy-foot p i{color:var(--sy-red);width:16px;display:inline-block;}
.sy-foot-qr img{width:110px;height:110px;background:#fff;padding:5px;border-radius:4px;}
/* When no WeChat QR code is uploaded in the admin, Qrcode falls back to the site root URL; hide that image here and keep only the WeChat ID / phone */
.sy-foot-qr img.sy-qr-img[src=""],
.sy-foot-qr img.sy-qr-img[src="/"],
.sy-foot-qr img.sy-qr-img:not([src*=".png"]):not([src*=".jpg"]):not([src*=".jpeg"]):not([src*=".webp"]):not([src*=".gif"]):not([src*=".svg"]),
.sy-foot-qr img.sy-qr-img[src="http://127.0.0.1:8301"],
.sy-foot-qr img.sy-qr-img[src="http://127.0.0.1:8301/"]{display:none;}
.sy-foot-qr-tip{margin-top:8px;font-size:12px;color:#777;}
.sy-foot-qr img.sy-qr-img[src=""]+.sy-foot-qr-tip,
.sy-foot-qr img.sy-qr-img[src="/"]+.sy-foot-qr-tip,
.sy-foot-qr img.sy-qr-img:not([src*=".png"]):not([src*=".jpg"]):not([src*=".jpeg"]):not([src*=".webp"]):not([src*=".gif"]):not([src*=".svg"])+.sy-foot-qr-tip,
.sy-foot-qr img.sy-qr-img[src="http://127.0.0.1:8301"]+.sy-foot-qr-tip,
.sy-foot-qr img.sy-qr-img[src="http://127.0.0.1:8301/"]+.sy-foot-qr-tip{display:none;}
.sy-foot-qr p{margin-bottom:10px;line-height:1.7;}
.sy-foot-qr p i{color:var(--sy-red);width:16px;display:inline-block;}
.sy-tool-pop em{max-width:120px;word-break:break-all;line-height:1.5;}
.sy-footer-bottom{padding:20px 0;text-align:center;color:#666;font-size:12px;}
.sy-footer-bottom a{color:#888;margin-left:10px;}
.sy-footer-bottom a:hover{color:var(--sy-red);}

/* ---------------- Floating right-hand toolbar ---------------- */
.sy-toolbar{position:fixed;right:16px;bottom:90px;z-index:90;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.14);border-radius:6px;overflow:visible;}
.sy-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:64px;padding:12px 4px;font-size:11px;color:#555;cursor:pointer;border-bottom:1px solid var(--sy-border);position:relative;text-align:center;transition:.2s;}
.sy-tool:last-child{border-bottom:none;}
.sy-tool i{font-size:19px;color:var(--sy-red);}
.sy-tool:hover{background:var(--sy-red);color:#fff;}
.sy-tool:hover i{color:#fff;}
.sy-tool-pop{position:absolute;right:74px;top:50%;transform:translateY(-50%);background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:10px;border-radius:6px;text-align:center;opacity:0;visibility:hidden;transition:.2s;width:150px;}
.sy-tool-pop img{width:120px;height:120px;}
/* Hide the placeholder image when no QR code is uploaded, falling back to the WeChat ID */
.sy-tool-pop img.sy-qr-img[src=""],
.sy-tool-pop img.sy-qr-img[src="/"],
.sy-tool-pop img.sy-qr-img:not([src*=".png"]):not([src*=".jpg"]):not([src*=".jpeg"]):not([src*=".webp"]):not([src*=".gif"]):not([src*=".svg"]),
.sy-tool-pop img.sy-qr-img[src="http://127.0.0.1:8301"],
.sy-tool-pop img.sy-qr-img[src="http://127.0.0.1:8301/"]{display:none;}
.sy-tool-pop em{display:block;font-style:normal;font-size:11px;color:#666;margin-top:6px;}
.sy-tool-wx:hover .sy-tool-pop{opacity:1;visibility:visible;}

/* ---------------- Responsive ---------------- */
/* Search / phone at the top of the drawer: shown only with the drawer nav (wide screens use the search box and hotline built into the header) */
.sy-nav-tools{display:none;}

/* Breakpoint order must not be reversed (later rules override earlier ones).
   The container content area caps at 1360px (--sy-max:1400 minus 20px padding on each side).
   At default spec the header needs 1622px (logo 88 + nav 1136 + right side 338 + spacing 60),
   and viewports of 1366 / 1440 / 1600 / 1700 measured 291 / 229 / 149 / 99px of horizontal overflow. */
@media (max-width:1900px){
  .sy-nav-list>li>a{padding:0 10px;font-size:15px;}
  .sy-search input{width:110px;}
  /* The header hotline does not fit inside the container, so hide it; the phone number is still in the top toolbar, drawer, footer and bottom action bar */
  .sy-hotline{display:none;}
}

/* ≤1280: the header switches to the drawer nav.
   The 12 top-level nav labels need about 660px even at their narrowest, and together with the logo and search box
   they do not fit in 1025–1280 viewports (the old 1024 breakpoint made this range overflow horizontally). */
@media (max-width:1750px){
  /* The top toolbar gives way to the drawer: otherwise the drawer, positioned at 72px, overlaps the header by 34px */
  .sy-top{display:none;}
  .sy-menu-btn{display:block;}
  /* Once the drawer nav leaves the document flow the right-hand group loses its natural stretch, so margin-left:auto is needed to pin the hamburger button to the right */
  .sy-header-right{margin-left:auto;}
  /* Drawer top aligns with the sticky header (72px): at any scroll position no page content is exposed between header and drawer */
  .sy-nav{position:fixed;top:72px;left:0;right:0;bottom:0;background:#fff;z-index:99;overflow-y:auto;display:none;padding:0 0 60px;}
  .sy-nav.open{display:block;}
  .sy-nav-tools{display:block;padding:14px 20px 2px;}
  .sy-nav-search{display:flex;align-items:center;height:40px;border:1px solid var(--sy-border);border-radius:20px;overflow:hidden;padding-left:14px;background:#fafafa;}
  .sy-nav-search input{flex:1;min-width:0;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;}
  .sy-nav-search button{border:none;background:var(--sy-light);height:40px;width:52px;cursor:pointer;color:#666;font-size:15px;}
  .sy-nav-tel{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;height:40px;border-radius:20px;background:var(--sy-red);color:#fff;font-size:15px;font-weight:600;}
  .sy-nav-tel i{font-size:15px;}
  .sy-nav-list{display:block;}
  .sy-nav-list>li{border-bottom:1px solid var(--sy-border);}
  .sy-nav-list>li>a{height:auto;line-height:1.4;padding:15px 20px;border-bottom:none;font-size:16px;}
  .sy-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:none;display:none;}
  .sy-nav-list>li.open .sy-sub{display:block;}
}

@media (max-width:1024px){
  .sy-logo-text{font-size:26px;letter-spacing:2px;}
  .sy-logo-text small{font-size:11px;letter-spacing:2.2px;margin-top:5px;}
  .sy-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
  .sy-toolbar{bottom:40px;right:8px;}
}

@media (max-width:640px){
  .sy-search{display:none;}
  .sy-logo-text{font-size:22px;letter-spacing:1.5px;}
  .sy-logo-text small{font-size:10px;letter-spacing:1.8px;margin-top:4px;}
  .sy-footer-grid{grid-template-columns:minmax(0,1fr);}
  .sy-top-right a{margin-left:10px;}
  /* On narrow screens the vertical floating toolbar on the right covers the body copy (52px wide ≈ 13% of the screen width, measured over body copy on the industries page).
     Switch it to a bottom-anchored horizontal action bar: nothing is covered, and it suits thumb reach better */
  .sy-shell{padding-bottom:54px;}
  .sy-toolbar{position:fixed;left:0;right:0;bottom:0;top:auto;display:flex;border-radius:0;box-shadow:0 -2px 12px rgba(0,0,0,.10);z-index:95;}
  .sy-tool{flex:1 1 0;flex-direction:row;gap:6px;width:auto;padding:12px 2px;border-bottom:none;border-right:1px solid var(--sy-border);font-size:12px;}
  .sy-tool:last-child{border-right:none;}
  .sy-tool i{font-size:17px;}
  .sy-tool-pop{left:50%;right:auto;top:auto;bottom:62px;transform:translateX(-50%);width:180px;}
  /* Touch screens have no hover, so the WeChat QR code toggles open/closed on tap (main.js toggles .open) */
  .sy-tool-wx.open .sy-tool-pop{opacity:1;visibility:visible;}
}

/* Footer site info links (Frequently asked questions / Glossary / Privacy Policy / Terms of Service) */
.sy-shell .sy-footer-links{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;}
.sy-shell .sy-footer-links a{color:inherit;opacity:.82;font-size:13px;text-decoration:none;}
.sy-shell .sy-footer-links a:hover{opacity:1;text-decoration:underline;color:#ed6a18;}


/* ==================== 英文站导航在中等宽度下收紧（2026-09-24） ====================
   英文站导航 12 个英文项在 1281–1600px 之间用默认间距会把右侧搜索框挤出屏幕
   （实测 1440px 下 .sy-header-right 排到 x=1603，整页出现横向滚动条）。
   这一段沿用 ≤1280px 的紧凑间距，让搜索框回到可视区。中文站标签更短，不受影响。 */
@media (min-width:1751px){
  /* 英文站 12 个导航项在 1360px 容器里放不下（实测需 1571px）：大屏时把头部容器放宽，
     并沿用紧凑导航；小于该宽度改用抽屉，避免搜索框被挤出屏幕。 */
  .sy-header .sy-container, .sy-header .container, .sy-header-inner{ max-width:1760px; }
  .sy-nav-list>li>a{ padding:0 8px; }

  .sy-nav-list>li>a{ padding:0 10px; font-size:15px; }
  .sy-search input{ width:110px; }
  }