/* ============================================================
   modern.css  —  脉动科技 DocCms 全新现代主题 (v2)
   色系：翡翠绿/青 + 琥珀金点缀，深墨绿页头页脚
   特性：SVG 图标(mask 继承文字色)、渐变描边、装饰元素、
         入场/悬停动效、字体统一。加载于 style.css 之后。
   ============================================================ */

:root{
  --font:"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;

  --bg:#eaf3f0;
  --surface:#ffffff;
  --surface-2:#f5faf8;
  --ink:#082523;
  --text:#33484a;
  --muted:#6f8688;

  --pri:#0d9488;
  --pri-d:#0a6b62;
  --pri-l:#14b8a6;
  --mint:#5eead4;
  --acc:#f59e0b;
  --acc-d:#d97706;

  --line:#d7e7e2;
  --radius:20px;
  --radius-sm:12px;
  --grad:linear-gradient(135deg,#0d9488 0%,#0a6b62 100%);
  --grad-acc:linear-gradient(135deg,#f59e0b 0%,#ea7c0c 100%);
  --grad-ink:linear-gradient(120deg,#082523 0%,#0e3a37 60%,#0b4a44 100%);
  --sh-sm:0 4px 14px rgba(8,45,43,.08);
  --sh:0 14px 40px rgba(8,45,43,.14);
  --sh-lg:0 26px 60px rgba(8,45,43,.20);

  /* ---- feather-style SVG icons (used with CSS mask, inherit color) ---- */
  --ic-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --ic-building:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17M16 9h3a1 1 0 0 1 1 1v11M3 21h18M8 7h3M8 11h3M8 15h3'/%3E%3C/svg%3E");
  --ic-news:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h11v14H6a2 2 0 0 1-2-2zM15 8h3a2 2 0 0 1 2 2v7a1 1 0 0 1-2 0M7 8h4M7 11h4M7 14h4'/%3E%3C/svg%3E");
  --ic-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8l9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E");
  --ic-award:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.5 8 21l4-2 4 2-1-7.5'/%3E%3C/svg%3E");
  --ic-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
  --ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.1 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --ic-leaf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13C4 7 11 4 20 4c0 9-3 16-9 16zM4 20c3-3 6-5 10-6'/%3E%3C/svg%3E");
  --ic-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --ic-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* ---------- BASE ---------- */
body{
  font-family:var(--font) !important;
  background:
    radial-gradient(1200px 400px at 100% -50px, rgba(20,184,166,.10), transparent 60%),
    radial-gradient(900px 380px at -100px 200px, rgba(245,158,11,.07), transparent 60%),
    var(--bg) !important;
  color:var(--text) !important;
  font-size:15.5px !important;
  line-height:1.85 !important;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pri);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--pri-d);}
img{max-width:100%;height:auto;}

/* ---------- NEUTRALIZE LEGACY WRAP ---------- */
#container{width:100% !important;max-width:1080px !important;margin:0 auto !important;background:transparent !important;}
#top-container,#top-container-inner,#glow-bg,#glow-bg-inner{background:transparent !important;background-image:none !important;box-shadow:none !important;}
#header-container,#header-container-inner{background-image:none !important;max-width:1080px !important;width:100% !important;}
#slideshow-shadow{display:none !important;}

/* ---------- FIXED HEADER ---------- */
#menu-wrapper{
  background:var(--grad-ink) !important;background-image:var(--grad-ink) !important;
  box-shadow:0 6px 24px rgba(8,45,43,.28) !important;
  position:fixed !important;width:100% !important;
  border-bottom:1px solid rgba(94,234,212,.18);
  transition:background .3s ease,box-shadow .3s ease;
}
#menu-wrapper::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--grad);}
#menu-wrapper.scrolled{background:rgba(8,37,35,.9) !important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#menu-container{max-width:1080px !important;width:100% !important;}
#logo{margin:11px 26px 0 0 !important;}
#logo img{max-height:44px !important;width:auto !important;}

#mainmenu{margin:16px 22px 0 0 !important;width:auto !important;}
#mainmenu ul{float:right !important;letter-spacing:0 !important;}
#mainmenu ul li{color:#bfe9df !important;text-shadow:none !important;padding:3px 15px 8px 15px !important;}
#mainmenu ul li a,#mainmenu ul li a:visited{color:#eafaf6 !important;width:auto !important;font-weight:600;font-size:15px;position:relative;}
#mainmenu ul li a:hover,#mainmenu ul li.current a,#mainmenu ul li.current_page_item a,#mainmenu ul li a.selt{color:#ffffff !important;}
/* underline grow */
#mainmenu ul li a::after{content:"";position:absolute;left:50%;right:50%;bottom:-6px;height:2px;background:var(--acc);border-radius:2px;transition:left .28s ease,right .28s ease;}
#mainmenu ul li a:hover::after,#mainmenu ul li.current a::after,#mainmenu ul li.current_page_item a::after,#mainmenu ul li a.selt::after{left:8%;right:8%;}
/* nav icons (mask → inherit link color) */
#mainmenu ul li a::before{content:"";display:inline-block;width:15px;height:15px;margin:0 7px -3px 0;background-color:currentColor;vertical-align:baseline;opacity:.92;}
#mainmenu a[href="/"]::before{ -webkit-mask:var(--ic-home) center/contain no-repeat;mask:var(--ic-home) center/contain no-repeat;}
#mainmenu a[href="?p=1"]::before{-webkit-mask:var(--ic-building) center/contain no-repeat;mask:var(--ic-building) center/contain no-repeat;}
#mainmenu a[href="?p=2"]::before{-webkit-mask:var(--ic-news) center/contain no-repeat;mask:var(--ic-news) center/contain no-repeat;}
#mainmenu a[href="?p=3"]::before{-webkit-mask:var(--ic-box) center/contain no-repeat;mask:var(--ic-box) center/contain no-repeat;}
#mainmenu a[href="?p=4"]::before{-webkit-mask:var(--ic-award) center/contain no-repeat;mask:var(--ic-award) center/contain no-repeat;}
#mainmenu a[href="?p=5"]::before{-webkit-mask:var(--ic-chat) center/contain no-repeat;mask:var(--ic-chat) center/contain no-repeat;}
#mainmenu a[href="?p=6"]::before{-webkit-mask:var(--ic-phone) center/contain no-repeat;mask:var(--ic-phone) center/contain no-repeat;}

/* dropdowns — pure CSS hover, gap-free (JS menu handler removed) */
#menu li{position:relative;}
#menu ul{
  position:absolute !important;top:100% !important;left:0 !important;
  display:none !important;visibility:hidden;opacity:0;transform:translateY(6px);
  margin:0 !important;padding:8px !important;min-width:196px !important;width:auto !important;
  background:#0e3a37 !important;background-image:none !important;
  border:1px solid rgba(94,234,212,.18) !important;box-shadow:var(--sh) !important;border-radius:14px !important;
  z-index:300;transition:opacity .18s ease,transform .18s ease;
}
#menu li:hover > ul,#menu li:focus-within > ul{display:block !important;visibility:visible;opacity:1;transform:none;}
/* invisible hover bridges so the pointer never leaves a hoverable zone */
#menu > li > ul::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
#menu ul ul::before{content:"";position:absolute;top:0;left:-14px;width:14px;bottom:0;}
/* nested flyouts open to the right, touching the parent (no gap) */
#menu ul ul{top:0 !important;left:100% !important;}
#menu ul li{background-image:none !important;background:transparent !important;border-radius:10px;padding:0 !important;float:none !important;position:relative;}
#menu ul li:hover{background:rgba(94,234,212,.14) !important;}
#menu li ul a,#menu li ul a:visited{color:#d6f3ec !important;width:auto !important;display:block !important;float:none !important;line-height:34px !important;padding:2px 14px !important;font-size:14px !important;text-decoration:none !important;}
#menu li ul a::before{display:none !important;}
#menu li ul a::after{display:none !important;}
#menu li ul a:hover{color:#ffffff !important;}
/* small chevron on items that have a sub-menu */
#menu ul li:hover > a::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-right:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg);}
#menu ul ul li > a::after{transform:rotate(-45deg);}

/* CTA button — removed (duplicates the 联系我们 nav item) */
#login-wrapper{display:none !important;}
#login-wrapper a.popup-logout,#login-wrapper .popup-logout{
  display:inline-block;position:relative;overflow:hidden;background:var(--grad-acc);color:#fff !important;
  padding:9px 22px;border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.3px;
  box-shadow:0 8px 20px rgba(217,119,6,.4);transition:transform .2s ease,box-shadow .2s ease;
}
#login-wrapper a.popup-logout::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);}
#login-wrapper a.popup-logout:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(217,119,6,.5);}
#login-wrapper a.popup-logout:hover::after{animation:shine 1s ease;}
#login-wrapper span{color:#fff !important;}

/* ---------- HOME HERO ---------- */
#slideshow-wrapper{
  position:relative !important;
  background:var(--grad-ink) !important;background-image:var(--grad-ink) !important;
  border-radius:26px !important;box-shadow:var(--sh-lg) !important;
  max-width:1040px !important;width:100% !important;overflow:hidden;
}
#slideshow-wrapper::before,#slideshow-wrapper::after{content:"";position:absolute;border-radius:50%;filter:blur(6px);opacity:.5;pointer-events:none;}
#slideshow-wrapper::before{width:340px;height:340px;top:-120px;right:-60px;background:radial-gradient(circle,#14b8a6,transparent 70%);animation:blob 14s ease-in-out infinite;}
#slideshow-wrapper::after{width:280px;height:280px;bottom:-120px;left:30%;background:radial-gradient(circle,#f59e0b,transparent 70%);opacity:.35;animation:blob 18s ease-in-out infinite reverse;}
ul#slide-main,ul#slide-title{max-width:1040px !important;width:100% !important;}
.slide-text1 h2,.slide-text4 h2{color:#fff !important;text-shadow:none !important;font-weight:800 !important;letter-spacing:.5px;animation:fadeUp .8s ease both;}
.slide-text1 p,.slide-text1{color:rgba(234,250,246,.95) !important;font-size:15.5px;line-height:2;animation:fadeUp .9s .1s ease both;}
ul#slide-title{background-image:none !important;background:rgba(0,0,0,.22) !important;}

/* ---------- INNER PAGE TITLE BANNER ---------- */
#pagetitle-wrapper{
  position:relative !important;
  background:var(--grad) !important;background-image:var(--grad) !important;
  border-radius:22px !important;box-shadow:var(--sh) !important;
  max-width:1040px !important;width:100% !important;overflow:hidden;
}
#pagetitle-wrapper::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 90% -40%,rgba(255,255,255,.22),transparent 60%);}
#pagetitle-wrapper::after{content:"";position:absolute;width:150px;height:150px;right:-30px;top:-40px;background:radial-gradient(circle,rgba(245,158,11,.5),transparent 70%);border-radius:50%;}
#pagetitle-wrapper h1{position:relative;color:#fff !important;text-shadow:none !important;font-weight:800 !important;letter-spacing:.5px;}
#pagetitle-wrapper h1::before{content:"";display:inline-block;width:22px;height:22px;margin:0 12px -3px 0;background-color:var(--mint);-webkit-mask:var(--ic-leaf) center/contain no-repeat;mask:var(--ic-leaf) center/contain no-repeat;}
#breadcumb{background-image:none !important;background:rgba(0,0,0,.18) !important;color:rgba(255,255,255,.92) !important;border-radius:0 0 22px 22px;max-width:1040px;width:100%;position:relative;}
#breadcumb a,#breadcumb .breadcrumbs{color:rgba(255,255,255,.95) !important;}
#breadcumb a:hover{color:#fff !important;}

/* ---------- CONTENT CARD ---------- */
#conten{width:1040px !important;max-width:100% !important;float:none !important;margin:0 auto !important;background:transparent;}
.maincontent-inner{
  position:relative !important;
  background:var(--surface) !important;border:1px solid var(--line) !important;
  border-radius:var(--radius) !important;box-shadow:var(--sh) !important;
  padding:38px 40px !important;width:1040px !important;max-width:100% !important;float:none !important;
  margin:0 auto 34px !important;min-height:320px;box-sizing:border-box;overflow:hidden;
}
.maincontent-inner::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--grad);}
#home{background:transparent !important;width:100% !important;float:none !important;}

/* unified fonts for all content (overrides inline Word fonts) */
.maincontent-inner, .maincontent-inner *{font-family:var(--font) !important;}
.maincontent-inner p,.maincontent-inner li,.maincontent-inner td,.maincontent-inner th,.maincontent-inner div,.maincontent-inner span{
  font-family:var(--font) !important;color:var(--text) !important;line-height:1.95;
}
.maincontent-inner span{background-color:transparent !important;}
.maincontent-inner hr{border:0 !important;height:4px !important;border-radius:4px;background:var(--grad);margin:26px 0 !important;}

.maincontent-inner h1,.maincontent-inner h2,.maincontent-inner h3,.maincontent-inner h4{
  color:var(--ink) !important;font-weight:800 !important;line-height:1.35 !important;margin:22px 0 14px !important;letter-spacing:.2px;
}
.maincontent-inner h2{font-size:24px !important;}
.maincontent-inner h3{
  font-size:20px !important;color:var(--pri-d) !important;border-left:0 !important;padding:0 0 10px !important;margin:6px 0 20px !important;position:relative;
}
.maincontent-inner h3::before{content:"";display:inline-block;width:20px;height:20px;margin:0 10px -3px 0;background-color:var(--pri);-webkit-mask:var(--ic-leaf) center/contain no-repeat;mask:var(--ic-leaf) center/contain no-repeat;}
.maincontent-inner h3::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:4px;border-radius:4px;background:var(--grad-acc);}
.maincontent-inner a{color:var(--pri);font-weight:600;}
.maincontent-inner a:hover{color:var(--pri-d);text-decoration:none;}
.maincontent-inner img{border-radius:12px;}
.maincontent-inner table{border-collapse:separate;border-spacing:0;width:100%;margin:14px 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.maincontent-inner table td,.maincontent-inner table th{border:0;border-bottom:1px solid var(--line);padding:11px 14px;}
.maincontent-inner table th{background:var(--surface-2);color:var(--ink);font-weight:700;}
.maincontent-inner ul li{list-style:none;position:relative;padding-left:26px;margin:8px 0;}
.maincontent-inner ul li::before{content:"";position:absolute;left:0;top:.55em;width:16px;height:16px;background-color:var(--pri-l);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat;}

/* ---------- FOOTER ---------- */
#bottom-wrapper{background:var(--grad-ink) !important;background-image:var(--grad-ink) !important;color:#bfe0d9 !important;max-width:100% !important;position:relative;}
#bottom-wrapper::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);}
#bottom-content{max-width:1080px !important;width:100% !important;margin:0 auto;padding:34px 20px;}
#bottom-content a{color:#bfe0d9 !important;transition:color .2s,padding .2s;}
#bottom-content a:hover{color:#fff !important;padding-left:4px;}
.footerlogo{max-height:46px !important;width:auto !important;opacity:.92;}
#copyright-text{background:#061a19 !important;background-image:none !important;color:#7fa79f !important;max-width:100% !important;}
#copyright-text a{color:#9ec9c0 !important;}
#copyright-text a:hover{color:#fff !important;}
#copyright-text p{color:#6f978f;}

/* ---------- BROKEN IMAGE PLACEHOLDER ---------- */
img.mdk-broken{object-fit:contain !important;background:#eef4f2 !important;border-radius:12px !important;}

/* ============================================================
   PRODUCT LIST  —  #piclist / .picmain  (ACTIVE)
   ============================================================ */
.picmain{width:100% !important;}
#piclist{width:100% !important;max-width:1000px !important;margin:0 auto !important;}
#piclist ul{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) !important;gap:26px !important;width:100% !important;}
#piclist ul li{
  list-style:none !important;float:none !important;background:#fff !important;background-image:none !important;
  width:auto !important;padding:0 !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;
  box-shadow:var(--sh-sm) !important;overflow:hidden !important;position:relative;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease;
}
#piclist ul li::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);opacity:0;transition:opacity .3s;}
#piclist ul li:hover{transform:translateY(-8px);box-shadow:var(--sh-lg) !important;border-color:var(--pri-l) !important;}
#piclist ul li:hover::before{opacity:1;}
#piclist ul li a{display:block;text-decoration:none;}
#piclist ul li img{
  width:100% !important;height:190px !important;float:none !important;object-fit:contain !important;
  background:linear-gradient(180deg,#f5faf8,#eef4f2);display:block;padding:16px;box-sizing:border-box;
  transition:transform .4s ease;
}
#piclist ul li:hover img{transform:scale(1.05);}
#piclist ul li h5{
  padding:16px 16px 20px !important;float:none !important;font-size:16px !important;font-family:var(--font) !important;
  text-align:center;color:var(--ink) !important;font-weight:700;position:relative;
}
#piclist ul li h5::after{content:"";display:block;width:0;height:3px;background:var(--grad-acc);border-radius:3px;margin:10px auto 0;transition:width .3s ease;}
#piclist ul li:hover h5::after{width:44px;}
#piclist ul li h5 a{color:var(--ink) !important;}
#piclist ul li h5 a:hover{color:var(--pri) !important;}
#articeBottom{text-align:center !important;width:100% !important;font-size:14px !important;padding:20px 0 0 !important;}

/* ============================================================
   PRODUCT DETAIL GALLERY  —  #rg-gallery
   ============================================================ */
#rg-gallery{width:100% !important;}
.rg-image-wrapper{background:var(--surface-2);border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:16px;box-shadow:var(--sh-sm);}
.rg-image{min-height:360px;background:#eef4f2 url(../images/img-not-found.png) center 40%/220px no-repeat;border-radius:14px;}
.rg-loading{display:none !important;}
.rg-image img{border-radius:14px;background:#fff;}
.es-carousel-wrapper{background:var(--grad-ink) !important;border-radius:14px;}
.es-carousel ul li img{border-radius:8px !important;background:#fff;}
.rg-caption p{color:#fff;}

/* ============================================================
   alt product variants (kept for safety)
   ============================================================ */
#productlist{width:100% !important;max-width:1000px !important;}
#productlist .probox{background:#fff !important;background-image:none !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;box-shadow:var(--sh-sm) !important;width:290px !important;height:auto !important;margin:16px !important;padding:16px !important;transition:transform .28s,box-shadow .28s;}
#productlist .probox:hover{transform:translateY(-6px);box-shadow:var(--sh-lg) !important;}
#productlist .probox img{width:100% !important;height:180px !important;object-fit:contain;background:var(--surface-2);border-radius:12px;}
#productlist .probox h3{height:auto !important;font-size:16px !important;font-weight:700 !important;text-align:center !important;}
#productlist .detail{background:var(--grad) !important;color:#fff !important;width:auto !important;height:auto !important;display:inline-block !important;padding:8px 22px !important;border-radius:999px !important;}

.probox{height:auto !important;min-height:332px;padding-left:440px !important;}
.pro_img{width:420px !important;}
#main1 ul li img{border:1px solid var(--line) !important;border-radius:16px !important;background:var(--surface-2) !important;object-fit:contain;}
#menu1 li{display:inline-block !important;margin:0 10px 10px 0 !important;}
#menu1 li img{border:2px solid var(--line) !important;border-radius:10px !important;width:66px !important;height:66px !important;object-fit:cover;background:#fff;cursor:pointer;transition:border-color .2s,transform .2s;}
#menu1 li img:hover{transform:translateY(-2px);}
#menu1 li.hover img{border-color:var(--pri) !important;}
.pro_txt h2{color:var(--ink) !important;font-size:24px !important;font-weight:800 !important;}
.pro_txt .details{border:1px solid var(--line) !important;border-radius:14px !important;background:var(--surface-2) !important;padding:16px 18px !important;height:auto !important;color:var(--text) !important;}
.prointr{border:1px solid var(--line) !important;border-radius:16px !important;overflow:hidden;margin:22px 0 !important;box-shadow:var(--sh-sm);}
.prointr h2{background:var(--grad) !important;background-image:var(--grad) !important;color:#fff !important;font-weight:700 !important;text-shadow:none !important;height:auto !important;padding:14px 18px !important;}
.prointr p{color:var(--text) !important;line-height:1.95 !important;padding:16px 18px !important;text-indent:0 !important;}
.xgprlist h3{background:var(--surface-2) !important;color:var(--pri-d) !important;font-weight:700 !important;height:auto !important;padding:14px 18px !important;border-radius:12px !important;border-left:4px solid var(--pri);}
.xgprlist ul li a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;transition:transform .25s,box-shadow .25s;}
.xgprlist ul li a:hover{transform:translateY(-5px);box-shadow:var(--sh);}
.xgprlist ul li img{border:none !important;background:var(--surface-2);border-radius:10px;object-fit:contain;}
.endPageNum a{border:1px solid var(--line) !important;color:var(--pri) !important;background:#fff !important;border-radius:10px !important;padding:8px 14px !important;float:none !important;display:inline-block !important;margin:3px !important;transition:all .2s;}
.endPageNum a:hover{background:var(--grad) !important;color:#fff !important;border-color:transparent !important;transform:translateY(-2px);}
.endPageNum .s2{background:var(--grad) !important;color:#fff !important;border-color:transparent !important;}

/* ---------- reveal animation (JS adds .reveal) ---------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

/* ---------- keyframes ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes blob{0%{transform:translate(0,0) scale(1)}33%{transform:translate(24px,-30px) scale(1.12)}66%{transform:translate(-18px,16px) scale(.94)}100%{transform:translate(0,0) scale(1)}}
@keyframes shine{0%{left:-120%}100%{left:130%}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  #container,#menu-container,#header-container,#header-container-inner,#conten,.maincontent-inner,#slideshow-wrapper,#pagetitle-wrapper,#breadcumb,#bottom-content,#copyright-text,#productlist,#piclist{max-width:100% !important;}
  #conten,.maincontent-inner{width:100% !important;box-sizing:border-box;}
  .maincontent-inner{margin-left:12px !important;margin-right:12px !important;padding:26px 20px !important;}
}
@media (max-width:760px){
  #menu-wrapper{position:static !important;}
  #top-container,#header-container,#slideshow-wrapper{height:auto !important;}
  .probox{padding-left:0 !important;}
  .pro_img{position:static !important;width:100% !important;margin-bottom:16px;}
  #piclist ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;gap:14px !important;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .reveal{opacity:1 !important;transform:none !important;}
}