/* LEMI custom style v1 - 外贸获客型覆盖样式 */
html, body.lemi-site-body { background:#ffffff !important; color:#1f2933; font-family: Arial, Helvetica, sans-serif; }
a { transition: all .25s ease; }
.page-width { max-width: 1200px; width: 94%; margin-left:auto; margin-right:auto; }
.lemi-wrapper { background:#fff; overflow:hidden; }
.lemi-topbar { background:#0b1220; color:#cbd5e1; font-size:13px; line-height:38px; }
.lemi-topbar span { float:left; }
.lemi-topbar a { float:right; color:#cbd5e1; margin-left:24px; }
.lemi-topbar a:hover { color:#fff; }
.lemi-header { position:relative; z-index:200; background:#fff; box-shadow:0 10px 30px rgba(15,23,42,.08); }
.lemi-nav-wrap { height:82px; }
.lemi-logo { float:left; padding:12px 0; }
.lemi-logo img { width:200px; height:auto; max-height:58px; object-fit:contain; }
.lemi-main-nav { float:right; }
.lemi-main-nav .main-nav > ul > li > a.first-level { height:82px; line-height:82px; padding:0 16px; color:#1e293b; font-size:15px; text-transform:none; }
.lemi-main-nav .main-nav > ul > li.current > a,
.lemi-main-nav .main-nav > ul > li:hover > a { color:#0ea5e9; }
.lemi-main-nav .sf-menu li { background:transparent; }
.lemi-main-nav .sf-menu a { border:0; }
.lemi-main-nav .sf-menu ul { background:#fff; border-radius:12px; box-shadow:0 18px 45px rgba(15,23,42,.14); overflow:hidden; padding:8px 0; width:220px; }
.lemi-main-nav .sf-menu ul li a { color:#334155; padding:11px 18px; line-height:1.35; border:0; }
.lemi-main-nav .sf-menu ul li a:hover { background:#f1f5f9; color:#0284c7; }
.lemi-nav-quote a { background:#0ea5e9; color:#fff !important; border-radius:999px; height:42px !important; line-height:42px !important; margin-top:20px; margin-left:10px; }
.lemi-mobile-header .touch-logo img { max-height:52px; width:auto; }
.lemi-section { padding:76px 0; }
.lemi-section-title { text-align:center; max-width:780px; margin:0 auto 38px; }
.lemi-section-title p, .lemi-eyebrow { color:#0ea5e9; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; font-size:13px; margin-bottom:10px; }
.lemi-section-title h2 { color:#0f172a; font-size:36px; line-height:1.2; margin:0 0 12px; font-weight:700; }
.lemi-section-title span { color:#64748b; font-size:16px; line-height:1.7; }
.lemi-title-with-more { display:flex; align-items:end; justify-content:space-between; text-align:left; max-width:none; }
.lemi-title-with-more h2 { margin-bottom:0; }
.lemi-link-more { color:#0ea5e9; font-weight:bold; border-bottom:2px solid #0ea5e9; padding-bottom:5px; white-space:nowrap; }
.lemi-btn { display:inline-block; padding:13px 25px; border-radius:999px; font-size:15px; font-weight:bold; line-height:1; text-align:center; }
.lemi-btn-primary { background:#0ea5e9; color:#fff !important; box-shadow:0 12px 24px rgba(14,165,233,.25); }
.lemi-btn-primary:hover { background:#0284c7; text-decoration:none; }
.lemi-btn-light { background:#fff; color:#0f172a !important; }
.lemi-btn-light:hover { background:#e0f2fe; text-decoration:none; }
.lemi-btn-border { border:1px solid #cbd5e1; color:#0f172a !important; background:#fff; }
.lemi-btn-border:hover { border-color:#0ea5e9; color:#0ea5e9 !important; text-decoration:none; }
.lemi-btn-outline-light { border:1px solid rgba(255,255,255,.55); color:#fff !important; margin-left:10px; }
.lemi-btn-outline-light:hover { background:#fff; color:#0f172a !important; text-decoration:none; }
.lemi-hero { position:relative; min-height:680px; overflow:hidden; background:#0b1220; }
.lemi-hero-slider, .lemi-hero-slider .carousel-item, .lemi-hero-slider .carousel-img, .lemi-hero-slider img { height:680px !important; width:100%; }
.lemi-hero-slider img { object-fit:cover; }
.lemi-hero-overlay { position:absolute; left:0; top:0; right:0; bottom:0; background:linear-gradient(90deg, rgba(2,6,23,.82), rgba(2,6,23,.45), rgba(2,6,23,.15)); z-index:2; }
.lemi-hero-content { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:3; color:#fff; }
.lemi-hero-content h1 { font-size:58px; line-height:1.08; max-width:760px; margin:0 0 22px; font-weight:800; color:#fff; }
.lemi-hero-subtitle { max-width:680px; font-size:20px; line-height:1.7; color:#e2e8f0; margin-bottom:28px; }
.lemi-hero-actions .lemi-btn { margin-right:12px; }
.lemi-hero-points { margin-top:30px; padding:0; list-style:none; }
.lemi-hero-points li { display:inline-block; color:#e2e8f0; margin-right:18px; padding-left:18px; position:relative; }
.lemi-hero-points li:before { content:""; width:7px; height:7px; background:#38bdf8; border-radius:50%; position:absolute; left:0; top:8px; }
.lemi-category-section { background:#f8fafc; }
.lemi-category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lemi-category-card { display:block; padding:28px 24px; background:#fff; border:1px solid #e2e8f0; border-radius:18px; box-shadow:0 12px 35px rgba(15,23,42,.05); color:#334155; min-height:170px; }
.lemi-category-card h3 { font-size:20px; color:#0f172a; margin:0 0 12px; font-weight:700; }
.lemi-category-card p { line-height:1.6; color:#64748b; margin-bottom:18px; }
.lemi-category-card span { color:#0ea5e9; font-weight:bold; }
.lemi-category-card:hover { transform:translateY(-4px); border-color:#bae6fd; text-decoration:none; }
.lemi-product-grid { padding:0; margin:0 -12px; list-style:none; }
.lemi-product-card { float:left; width:25%; padding:0 12px; box-sizing:border-box; margin-bottom:28px; }
.lemi-product-card > .lemi-product-img, .lemi-product-img { display:block; background:#f8fafc; border:1px solid #e2e8f0; border-radius:18px 18px 0 0; overflow:hidden; aspect-ratio:1/1; }
.lemi-product-img img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.lemi-product-card:hover .lemi-product-img img { transform:scale(1.06); }
.lemi-product-info { border:1px solid #e2e8f0; border-top:0; border-radius:0 0 18px 18px; padding:20px; min-height:190px; background:#fff; box-shadow:0 12px 35px rgba(15,23,42,.05); }
.lemi-product-info h3 { font-size:17px; line-height:1.4; font-weight:700; margin:0 0 10px; }
.lemi-product-info h3 a { color:#0f172a; }
.lemi-product-info h3 a:hover { color:#0ea5e9; text-decoration:none; }
.lemi-product-info p { color:#64748b; line-height:1.6; min-height:45px; margin-bottom:13px; }
.lemi-product-meta { margin:0 0 14px; padding:0; list-style:none; }
.lemi-product-meta li { font-size:12px; color:#475569; margin-bottom:4px; padding-left:14px; position:relative; }
.lemi-product-meta li:before { content:""; width:5px; height:5px; border-radius:50%; background:#0ea5e9; position:absolute; left:0; top:7px; }
.lemi-product-actions { display:flex; gap:8px; }
.lemi-product-actions a { flex:1; display:block; text-align:center; padding:10px 8px; border-radius:999px; font-weight:bold; font-size:13px; background:#f1f5f9; color:#0f172a; }
.lemi-product-actions a:last-child { background:#0ea5e9; color:#fff; }
.lemi-product-actions a:hover { text-decoration:none; opacity:.88; }
.lemi-why-section { background:#0f172a; color:#fff; }
.lemi-why-section .lemi-section-title h2 { color:#fff; }
.lemi-why-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.lemi-why-grid div { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:26px; }
.lemi-why-grid strong { display:block; color:#fff; font-size:20px; margin-bottom:12px; }
.lemi-why-grid span { color:#cbd5e1; line-height:1.7; }
.lemi-application-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.lemi-application-grid span { background:#f8fafc; border:1px solid #e2e8f0; border-radius:999px; text-align:center; padding:17px 10px; color:#334155; font-weight:bold; }
.lemi-about-strip { background:linear-gradient(135deg,#e0f2fe,#f8fafc); }
.lemi-about-text { float:left; width:58%; }
.lemi-about-text h2 { font-size:38px; line-height:1.2; color:#0f172a; margin-bottom:18px; }
.lemi-about-text p { font-size:16px; line-height:1.8; color:#475569; }
.lemi-about-stats { float:right; width:35%; display:grid; grid-template-columns:1fr; gap:16px; }
.lemi-about-stats div, .lemi-about-highlights div { background:#fff; border-radius:18px; padding:22px; box-shadow:0 12px 35px rgba(15,23,42,.06); }
.lemi-about-stats strong, .lemi-about-highlights strong { display:block; color:#0ea5e9; font-size:30px; margin-bottom:6px; }
.lemi-news-grid { margin:0 -12px; }
.lemi-news-card { float:left; width:33.333%; padding:0 12px; box-sizing:border-box; }
.lemi-news-card > a, .lemi-news-img { display:block; border-radius:18px 18px 0 0; overflow:hidden; aspect-ratio:1.45/1; background:#f1f5f9; }
.lemi-news-img img { width:100%; height:100%; object-fit:cover; display:block; }
.lemi-news-card div { background:#fff; border:1px solid #e2e8f0; border-top:0; border-radius:0 0 18px 18px; padding:22px; min-height:145px; }
.lemi-news-card h3 { font-size:18px; line-height:1.4; margin:0 0 10px; }
.lemi-news-card h3 a { color:#0f172a; }
.lemi-news-card p { color:#64748b; line-height:1.7; }
.lemi-cta-section { padding:64px 0; background:linear-gradient(135deg,#0284c7,#0f172a); color:#fff; text-align:center; }
.lemi-cta-section h2 { color:#fff; font-size:36px; line-height:1.2; margin-bottom:14px; }
.lemi-cta-section p { max-width:780px; margin:0 auto 24px; color:#e2e8f0; font-size:17px; line-height:1.7; }
.lemi-inner-banner { position:relative; height:420px; background:#0f172a; overflow:hidden; }
.lemi-inner-slider, .lemi-inner-slider .carousel-item, .lemi-inner-slider .carousel-img, .lemi-inner-slider img { height:420px !important; width:100%; }
.lemi-inner-slider img { object-fit:cover; }
.lemi-inner-banner:after { content:""; position:absolute; inset:0; background:rgba(2,6,23,.62); z-index:2; }
.lemi-inner-banner-content { position:absolute; z-index:3; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-align:left; }
.lemi-inner-banner-content p { color:#38bdf8; text-transform:uppercase; font-weight:bold; letter-spacing:.08em; }
.lemi-inner-banner-content h1 { color:#fff; font-size:46px; line-height:1.15; margin:8px 0 12px; }
.lemi-inner-banner-content span { color:#e2e8f0; font-size:18px; }
.lemi-products-layout { background:#fff; }
.lemi-sidebar { float:left; width:260px; }
.lemi-main-content { margin-left:300px; }
.lemi-sidebar-box, .lemi-sidebar-quote, .lemi-contact-form-card, .lemi-about-card { border:1px solid #e2e8f0; border-radius:18px; background:#fff; box-shadow:0 12px 35px rgba(15,23,42,.05); padding:24px; margin-bottom:22px; }
.lemi-sidebar-box h3, .lemi-sidebar-quote h3 { font-size:20px; color:#0f172a; margin-bottom:16px; }
.lemi-sidebar-box ul { margin:0; padding:0; list-style:none; }
.lemi-sidebar-box li a { display:block; color:#475569; padding:10px 0; border-bottom:1px solid #f1f5f9; }
.lemi-sidebar-box li.current > a, .lemi-sidebar-box li a:hover { color:#0ea5e9; text-decoration:none; }
.lemi-sidebar-box ul ul { padding-left:14px; display:block; }
.lemi-sidebar-box ul ul a { font-size:13px; padding:7px 0; }
.lemi-sidebar-quote { background:#0f172a; color:#cbd5e1; }
.lemi-sidebar-quote h3 { color:#fff; }
.lemi-sidebar-quote p { line-height:1.7; margin-bottom:18px; }
.lemi-sidebar-quote a { display:block; text-align:center; background:#0ea5e9; color:#fff; border-radius:999px; padding:12px; font-weight:bold; margin-top:10px; }
.lemi-sidebar-quote a.email { background:#fff; color:#0f172a; }
.lemi-list-intro { margin-bottom:24px; border-bottom:1px solid #e2e8f0; padding-bottom:20px; }
.lemi-list-intro h2 { font-size:32px; color:#0f172a; margin-bottom:8px; }
.lemi-list-intro p { color:#64748b; font-size:16px; line-height:1.7; }
.lemi-main-content .lemi-product-card { width:33.333%; }
.lemi-pagination { clear:both; padding-top:20px; }
.lemi-pagination a, .lemi-pagination span { border-radius:999px !important; margin:0 3px; }
.lemi-breadcrumb { padding:26px 0 12px; color:#64748b; }
.lemi-breadcrumb a { color:#0ea5e9; }
.lemi-product-detail-section { padding-bottom:60px; background:#fff; }
.lemi-product-detail-top { display:flex; gap:42px; align-items:flex-start; }
.lemi-product-gallery { width:48%; }
.lemi-product-summary { width:52%; }
.lemi-main-product-img { border:1px solid #e2e8f0; border-radius:22px; background:#f8fafc; overflow:hidden; }
.lemi-main-product-img img { width:100%; display:block; height:auto; }
.lemi-thumb-list { margin:14px -5px 0; padding:0; list-style:none; }
.lemi-thumb-list li { float:left; width:20%; padding:5px; box-sizing:border-box; }
.lemi-thumb-list img { width:100%; border:1px solid #e2e8f0; border-radius:10px; display:block; }
.lemi-product-summary h1 { font-size:42px; line-height:1.2; color:#0f172a; margin:0 0 16px; }
.lemi-product-desc { color:#64748b; font-size:16px; line-height:1.8; }
.lemi-quick-specs { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0; }
.lemi-quick-specs div { background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:16px; }
.lemi-quick-specs strong { display:block; color:#0f172a; margin-bottom:6px; }
.lemi-quick-specs span { color:#64748b; line-height:1.5; }
.lemi-detail-actions .lemi-btn { margin-right:10px; margin-bottom:10px; }
.lemi-inquiry-note { background:#eff6ff; color:#1e40af; border-radius:14px; padding:14px 16px; line-height:1.6; margin-top:12px; }
.lemi-detail-content-grid { margin-top:48px; }
.lemi-detail-content-main { float:left; width:70%; }
.lemi-detail-sidebar { float:right; width:27%; }
.lemi-detail-sidebar .sticky { position:sticky; top:20px; }
.lemi-detail-block { margin-bottom:34px; padding-bottom:26px; border-bottom:1px solid #e2e8f0; }
.lemi-detail-block h2 { color:#0f172a; font-size:28px; margin-bottom:18px; }
.lemi-spec-table { width:100%; border-collapse:collapse; }
.lemi-spec-table th, .lemi-spec-table td { border:1px solid #e2e8f0; padding:14px 16px; line-height:1.6; }
.lemi-spec-table th { width:210px; background:#f8fafc; color:#0f172a; font-weight:bold; }
.lemi-feature-list { padding-left:0; list-style:none; }
.lemi-feature-list li { padding:12px 0 12px 28px; position:relative; color:#475569; line-height:1.7; border-bottom:1px solid #f1f5f9; }
.lemi-feature-list li:before { content:"✓"; position:absolute; left:0; top:12px; color:#0ea5e9; font-weight:bold; }
.lemi-faq-block h3 { font-size:18px; color:#0f172a; margin:18px 0 8px; }
.lemi-faq-block p { color:#64748b; line-height:1.7; }
.lemi-related-section { background:#f8fafc; }
.lemi-about-layout { display:flex; gap:36px; align-items:flex-start; }
.lemi-about-main { flex:1; }
.lemi-about-main h2 { font-size:38px; color:#0f172a; line-height:1.2; margin-bottom:18px; }
.lemi-about-main p { font-size:16px; line-height:1.85; color:#475569; }
.lemi-about-highlights { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; }
.lemi-about-card { width:340px; }
.lemi-about-card h3 { font-size:22px; color:#0f172a; margin-bottom:14px; }
.lemi-about-card ul { padding-left:18px; line-height:1.9; color:#475569; }
.lemi-about-card a { display:inline-block; margin-top:15px; color:#fff; background:#0ea5e9; border-radius:999px; padding:12px 22px; font-weight:bold; }
.lemi-cms-content { max-width:960px; margin:0 auto; }
.lemi-contact-section { background:#f8fafc; }
.lemi-contact-info { float:left; width:54%; }
.lemi-contact-info h2 { font-size:40px; line-height:1.2; color:#0f172a; margin-bottom:18px; }
.lemi-contact-info p { color:#475569; font-size:16px; line-height:1.8; }
.lemi-contact-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.lemi-contact-list a { display:block; background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; color:#334155; }
.lemi-contact-list strong { display:block; color:#0ea5e9; margin-bottom:6px; }
.lemi-contact-list span { word-break:break-word; }
.lemi-contact-form-card { float:right; width:36%; }
.lemi-contact-form-card h3 { font-size:24px; color:#0f172a; margin-bottom:12px; }
.lemi-contact-form-card p, .lemi-contact-form-card li { color:#475569; line-height:1.75; }
.lemi-contact-form-card ul { padding-left:18px; margin-bottom:20px; }
.lemi-footer { background:#0b1220; color:#cbd5e1; padding-top:62px; }
.lemi-footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.15fr; gap:36px; }
.lemi-footer h3 { color:#fff; font-size:20px; margin-bottom:18px; }
.lemi-footer p { line-height:1.75; margin-bottom:12px; }
.lemi-footer ul { margin:0; padding:0; list-style:none; }
.lemi-footer li { margin-bottom:10px; }
.lemi-footer a { color:#cbd5e1; }
.lemi-footer a:hover { color:#38bdf8; text-decoration:none; }
.lemi-footer-social a { display:inline-block; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:8px 13px; margin:6px 6px 0 0; }
.lemi-footer-quote { display:inline-block; background:#0ea5e9; color:#fff !important; border-radius:999px; padding:12px 22px; font-weight:bold; margin-top:10px; }
.lemi-footer-bottom { margin-top:46px; border-top:1px solid rgba(255,255,255,.1); padding:18px 0; color:#94a3b8; }
.lemi-footer-bottom p { margin:0; }
.lemi-floating-contact { position:fixed; right:18px; bottom:90px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.lemi-floating-contact a { display:block; padding:12px 16px; border-radius:999px; color:#fff; font-weight:bold; box-shadow:0 10px 24px rgba(15,23,42,.22); }
.lemi-floating-whatsapp { background:#16a34a; }
.lemi-floating-email { background:#0ea5e9; }
@media (max-width: 1024px){
.lemi-category-grid{grid-template-columns:repeat(2,1fr)}.lemi-product-card,.lemi-main-content .lemi-product-card{width:50%}.lemi-why-grid{grid-template-columns:repeat(2,1fr)}.lemi-application-grid{grid-template-columns:repeat(3,1fr)}.lemi-footer-grid{grid-template-columns:repeat(2,1fr)}.lemi-sidebar{float:none;width:auto}.lemi-main-content{margin-left:0}.lemi-product-detail-top{display:block}.lemi-product-gallery,.lemi-product-summary{width:100%}.lemi-product-summary{margin-top:28px}.lemi-detail-content-main,.lemi-detail-sidebar{float:none;width:auto}.lemi-contact-info,.lemi-contact-form-card{float:none;width:auto}.lemi-contact-form-card{margin-top:24px}.lemi-about-layout{display:block}.lemi-about-card{width:auto;margin-top:24px}
}
@media (max-width: 768px){
.lemi-topbar{display:none}.lemi-section{padding:52px 0}.lemi-section-title h2{font-size:28px}.lemi-title-with-more{display:block;text-align:center}.lemi-link-more{display:inline-block;margin-top:12px}.lemi-hero,.lemi-hero-slider,.lemi-hero-slider .carousel-item,.lemi-hero-slider .carousel-img,.lemi-hero-slider img{height:560px!important;min-height:560px}.lemi-hero-content h1{font-size:38px}.lemi-hero-subtitle{font-size:16px}.lemi-hero-points li{display:block;margin-bottom:8px}.lemi-category-grid{grid-template-columns:1fr}.lemi-product-card,.lemi-main-content .lemi-product-card{width:100%;float:none}.lemi-product-info{min-height:auto}.lemi-why-grid{grid-template-columns:1fr}.lemi-application-grid{grid-template-columns:1fr 1fr}.lemi-about-text,.lemi-about-stats{float:none;width:auto}.lemi-about-stats{margin-top:24px}.lemi-news-card{float:none;width:100%;margin-bottom:20px}.lemi-inner-banner,.lemi-inner-slider,.lemi-inner-slider .carousel-item,.lemi-inner-slider .carousel-img,.lemi-inner-slider img{height:320px!important}.lemi-inner-banner-content h1{font-size:32px}.lemi-quick-specs{grid-template-columns:1fr}.lemi-product-summary h1{font-size:30px}.lemi-detail-actions .lemi-btn{display:block;margin-right:0}.lemi-spec-table th,.lemi-spec-table td{display:block;width:auto}.lemi-contact-list{grid-template-columns:1fr}.lemi-about-highlights{grid-template-columns:1fr}.lemi-footer-grid{grid-template-columns:1fr}.lemi-floating-contact{right:10px;bottom:72px}.lemi-floating-contact a{padding:10px 12px;font-size:13px}.lemi-btn-outline-light{margin-left:0;margin-top:10px}
}
/* =========================================================
V2 导航栏修复：解决旧模板 menu.css / superfish 对新导航的覆盖
问题表现：下拉白条跑到导航中间、顶部小三角显示、Get Quote 被挤压。
========================================================= */
.lemi-nav-wrap .page-width{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
align-items:center;
justify-content:space-between;
height:82px;
overflow:visible;
}
.lemi-logo{
float:none!important;
flex:0 0 auto;
width:auto!important;
margin:0!important;
padding:0!important;
}
.lemi-logo a,
.lemi-logo img{
display:block;
}
.lemi-logo img{
width:auto!important;
max-width:190px!important;
height:auto!important;
max-height:64px!important;
}
.lemi-main-nav{
float:none!important;
flex:1 1 auto;
min-width:0;
display:flex;
justify-content:flex-end;
overflow:visible!important;
}
.lemi-main-nav .main-nav{
float:none!important;
width:auto!important;
height:82px;
overflow:visible!important;
}
.lemi-main-nav .main-nav > ul.sf-menu{
display:flex!important;
align-items:center;
justify-content:flex-end;
height:82px;
margin:0!important;
padding:0!important;
line-height:normal!important;
overflow:visible!important;
}
.lemi-main-nav .sf-menu,
.lemi-main-nav .sf-menu *{
box-sizing:border-box;
}
.lemi-main-nav .sf-menu li{
float:none!important;
position:relative!important;
width:auto!important;
height:auto!important;
background:transparent!important;
white-space:nowrap;
overflow:visible!important;
}
.lemi-main-nav .sf-menu a,
.lemi-main-nav .sf-menu a:visited{
border:0!important;
text-decoration:none!important;
background:transparent!important;
}
.lemi-main-nav .main-nav > ul.sf-menu > li > a.first-level{
display:flex!important;
align-items:center;
height:82px!important;
line-height:82px!important;
padding:0 13px!important;
color:#1e293b!important;
font-size:15px!important;
font-weight:700!important;
background:transparent!important;
}
.lemi-main-nav .main-nav > ul.sf-menu > li > a.first-level strong{
font-weight:700!important;
line-height:1!important;
}
.lemi-main-nav .main-nav > ul.sf-menu > li.current > a.first-level,
.lemi-main-nav .main-nav > ul.sf-menu > li:hover > a.first-level,
.lemi-main-nav .main-nav > ul.sf-menu > li.sfHover > a.first-level{
color:#0ea5e9!important;
background:transparent!important;
}
/* 隐藏 superfish 自动生成的小三角和模板里空 i，避免截图里每个菜单上方出现灰色箭头 */
.lemi-main-nav .sf-sub-indicator,
.lemi-main-nav .sf-menu li > i{
display:none!important;
visibility:hidden!important;
}
/* 下拉菜单必须从导航条下方开始，不能使用 menu.css 里的 top:2.4em */
.lemi-main-nav .sf-menu ul{
position:absolute!important;
left:0!important;
top:82px!important;
width:220px!important;
min-width:220px!important;
height:auto!important;
margin:0!important;
padding:8px 0!important;
background:#fff!important;
border:1px solid #e2e8f0!important;
border-radius:14px!important;
box-shadow:0 18px 45px rgba(15,23,42,.16)!important;
z-index:9999!important;
overflow:hidden!important;
}
.lemi-main-nav .sf-menu li:hover > ul,
.lemi-main-nav .sf-menu li.sfHover > ul{
top:82px!important;
left:0!important;
}
.lemi-main-nav .sf-menu ul ul,
.lemi-main-nav .sf-menu li li:hover > ul,
.lemi-main-nav .sf-menu li li.sfHover > ul{
top:0!important;
left:220px!important;
}
.lemi-main-nav .sf-menu ul li{
display:block!important;
width:100%!important;
background:#fff!important;
}
.lemi-main-nav .sf-menu ul li a,
.lemi-main-nav .sf-menu ul li a:visited{
display:block!important;
width:100%!important;
padding:11px 18px!important;
line-height:1.35!important;
color:#334155!important;
font-size:14px!important;
background:#fff!important;
}
.lemi-main-nav .sf-menu ul li a:hover,
.lemi-main-nav .sf-menu ul li.sfHover > a{
color:#0284c7!important;
background:#f1f5f9!important;
}
.lemi-main-nav .lemi-nav-quote{
flex:0 0 auto;
margin-left:12px!important;
}
.lemi-main-nav .lemi-nav-quote > a.first-level{
display:flex!important;
align-items:center!important;
justify-content:center!important;
height:44px!important;
line-height:44px!important;
margin:0!important;
padding:0 24px!important;
border-radius:999px!important;
background:#0ea5e9!important;
color:#fff!important;
box-shadow:0 12px 26px rgba(14,165,233,.28)!important;
}
.lemi-main-nav .lemi-nav-quote > a.first-level:hover{
background:#0284c7!important;
color:#fff!important;
}
.lemi-main-nav .lemi-nav-quote > ul{
display:none!important;
}
@media (max-width:1180px){
.lemi-logo img{max-width:160px!important;}
.lemi-main-nav .main-nav > ul.sf-menu > li > a.first-level{padding:0 9px!important;font-size:14px!important;}
.lemi-main-nav .lemi-nav-quote > a.first-level{padding:0 18px!important;}
}
/* =========================================================
V3 导航空下拉修复：没有子菜单时不显示白色空块
========================================================= */
.lemi-main-nav .sf-menu ul:empty,
.lemi-main-nav .sf-menu li.lemi-no-sub > ul{
display:none!important;
visibility:hidden!important;
width:0!important;
height:0!important;
padding:0!important;
border:0!important;
box-shadow:none!important;
}
.lemi-main-nav .sf-menu li > a:not(.sf-with-ul) .sf-sub-indicator{
display:none!important;
}
/* =========================================================
V4 首页/产品列表卡片高度修复
问题：产品标题或描述字数不一致时，float 布局会导致下一行产品被顶下去，出现空白洞。
方案：产品网格改成 flex-wrap，每个卡片内部等高排列，行与行自然对齐。
========================================================= */
.lemi-product-grid{
display:flex!important;
flex-wrap:wrap!important;
align-items:stretch!important;
margin-left:-12px!important;
margin-right:-12px!important;
padding:0!important;
}
.lemi-product-grid:before,
.lemi-product-grid:after{
display:none!important;
content:none!important;
}
.lemi-product-card,
.lemi-main-content .lemi-product-card{
float:none!important;
display:flex!important;
flex-direction:column!important;
width:25%!important;
padding:0 12px!important;
box-sizing:border-box!important;
margin-bottom:28px!important;
clear:none!important;
}
.lemi-main-content .lemi-product-card{
width:33.333333%!important;
}
.lemi-product-card .lemi-product-img{
flex:0 0 auto!important;
}
.lemi-product-info{
flex:1 1 auto!important;
display:flex!important;
flex-direction:column!important;
min-height:210px!important;
}
.lemi-product-info h3{
min-height:48px!important;
display:-webkit-box!important;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden!important;
}
.lemi-product-info p{
min-height:52px!important;
display:-webkit-box!important;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden!important;
}
.lemi-product-actions{
margin-top:auto!important;
}
@media (max-width:1024px){
.lemi-product-card,
.lemi-main-content .lemi-product-card{
width:50%!important;
}
}
@media (max-width:768px){
.lemi-product-grid{
display:block!important;
margin-left:0!important;
margin-right:0!important;
}
.lemi-product-card,
.lemi-main-content .lemi-product-card{
width:100%!important;
padding:0!important;
display:block!important;
}
.lemi-product-info{
min-height:auto!important;
display:block!important;
}
.lemi-product-info h3,
.lemi-product-info p{
min-height:auto!important;
display:block!important;
-webkit-line-clamp:unset;
overflow:visible!important;
}
}
/* =========================
V6 首页轮播图完整显示修复
你的首页 banner 图片是 1920x600，比例约 16:5。
之前使用 object-fit: cover + 680px 高度，会把图片放大并裁切。
这里改为按图片原比例显示，并把营销文案移动到轮播图下方，避免遮挡图片。
========================= */
.lemi-home-page .lemi-hero-image-only,
.lemi-home-page .lemi-hero {
min-height: 0 !important;
height: clamp(300px, 31.25vw, 600px) !important;
overflow: hidden !important;
background: #fff !important;
}
.lemi-home-page .lemi-hero-slider,
.lemi-home-page .lemi-hero-slider .caroufredsel_wrapper,
.lemi-home-page .lemi-hero-slider #carousel-126493,
.lemi-home-page .lemi-hero-slider .carousel-item,
.lemi-home-page .lemi-hero-slider .carousel-img {
width: 100% !important;
height: 100% !important;
}
.lemi-home-page .lemi-hero-slider .carousel-img img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: contain !important;
object-position: center center !important;
background: #fff !important;
}
.lemi-home-page .lemi-hero-overlay,
.lemi-home-page .lemi-hero-content {
display: none !important;
}
.lemi-home-page .lemi-hero .carousel-btn-fixed {
bottom: 14px !important;
z-index: 20 !important;
}
.lemi-home-page .lemi-hero .carousel-btn a {
width: 10px !important;
height: 10px !important;
background: rgba(255,255,255,.75) !important;
border: 1px solid rgba(15,23,42,.22) !important;
}
.lemi-home-page .lemi-hero .carousel-btn a.selected {
background: #0ea5e9 !important;
border-color: #0ea5e9 !important;
}
.lemi-hero-intro {
padding: 44px 0 36px;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-bottom: 1px solid #e5e7eb;
}
.lemi-hero-intro h1 {
max-width: 980px;
margin: 0 auto 18px;
font-size: 46px;
line-height: 1.16;
color: #0f172a;
font-weight: 800;
}
.lemi-hero-intro p:not(.lemi-eyebrow) {
max-width: 850px;
margin: 0 auto 24px;
font-size: 18px;
line-height: 1.75;
color: #475569;
}
.lemi-btn-dark {
background: #0f172a;
color: #fff !important;
}
.lemi-btn-dark:hover {
background: #020617;
color: #fff !important;
}
@media (max-width: 768px) {
.lemi-home-page .lemi-hero-image-only,
.lemi-home-page .lemi-hero {
height: clamp(180px, 31.25vw, 260px) !important;
}
.lemi-hero-intro {
padding: 30px 16px 28px;
}
.lemi-hero-intro h1 {
font-size: 30px;
}
.lemi-hero-intro p:not(.lemi-eyebrow) {
font-size: 15px;
}
.lemi-hero-intro .lemi-btn {
display: block;
margin: 10px auto 0 !important;
max-width: 240px;
}
}
/* =========================
V7 全站内页轮播图完整显示修复
首页已按 1920x600 修复；这里处理产品、新闻、关于、联系我们、团队、项目等内页 banner。
原模板很多内页写死 height:500px 或使用 object-fit:cover，会把 1920x500 / 1920x600 的图片放大裁切。
这里统一改为 contain，不裁切图片，并按宽度自动压缩高度。
========================= */
#main:not(.lemi-home-page) .lemi-inner-banner,
#main:not(.lemi-home-page) #main-content > .header,
#main:not(.lemi-home-page) #main-content > .header .module-default,
#main:not(.lemi-home-page) #main-content > .header .module-inner,
#main:not(.lemi-home-page) #main-content > .header .module-content,
#main:not(.lemi-home-page) #main-content > .header .slideshow,
#main:not(.lemi-home-page) #main-content > .header .slideshow-min,
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel {
height: clamp(220px, 26.04vw, 500px) !important;
min-height: 0 !important;
overflow: hidden !important;
background: #fff !important;
}
#main:not(.lemi-home-page) .lemi-inner-slider,
#main:not(.lemi-home-page) .lemi-inner-slider .caroufredsel_wrapper,
#main:not(.lemi-home-page) .lemi-inner-slider > div,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-item,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-img,
#main:not(.lemi-home-page) #main-content > .header .caroufredsel_wrapper,
#main:not(.lemi-home-page) #main-content > .header .slideshow > div,
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel > div,
#main:not(.lemi-home-page) #main-content > .header .carousel-item,
#main:not(.lemi-home-page) #main-content > .header .carousel-img {
width: 100% !important;
height: 100% !important;
}
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-img img,
#main:not(.lemi-home-page) #main-content > .header .carousel-img img,
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
object-fit: contain !important;
object-position: center center !important;
background: #fff !important;
}
/* 内页新模板的标题遮罩减淡，避免图片已经带文字时被压得太黑 */
#main:not(.lemi-home-page) .lemi-inner-banner:after {
background: rgba(2,6,23,.32) !important;
}
@media (max-width: 768px) {
#main:not(.lemi-home-page) .lemi-inner-banner,
#main:not(.lemi-home-page) #main-content > .header,
#main:not(.lemi-home-page) #main-content > .header .module-default,
#main:not(.lemi-home-page) #main-content > .header .module-inner,
#main:not(.lemi-home-page) #main-content > .header .module-content,
#main:not(.lemi-home-page) #main-content > .header .slideshow,
#main:not(.lemi-home-page) #main-content > .header .slideshow-min,
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel {
height: clamp(150px, 31.25vw, 260px) !important;
}
#main:not(.lemi-home-page) .lemi-inner-banner-content h1 {
font-size: 26px !important;
}
#main:not(.lemi-home-page) .lemi-inner-banner-content span {
font-size: 14px !important;
}
}
/* =========================
V9 内页轮播闪现后消失修复
说明：V8 用 JS 自动判断“无图片 banner”并隐藏空 header。
现场发现有些内页轮播图在 carouFredSel 初始化前后会被误判，出现图片闪现一下又消失。
本版取消自动隐藏逻辑，只负责让真实图片完整显示，不再通过 JS 或 :has 强行 display:none。
========================= */
#main:not(.lemi-home-page) #main-content > .header,
#main:not(.lemi-home-page) .lemi-inner-banner {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
#main:not(.lemi-home-page) #main-content > .header.lemi-empty-banner,
#main:not(.lemi-home-page) .lemi-inner-banner.lemi-empty-banner {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: clamp(220px, 26.04vw, 500px) !important;
}
/* =========================
V10 内页轮播闪现后消失最终修复
说明：内页不再依赖 carouFredSel 插件。老插件在固定高度、contain 图片、响应式宽度混用时，
会在初始化后把轮播容器高度或 item 状态计算错，导致图片闪现后消失。
本版用静态定位 + 简单淡入淡出，确保图片一直存在。
========================= */
#main:not(.lemi-home-page) #main-content > .header,
#main:not(.lemi-home-page) .lemi-inner-banner {
display:block !important;
visibility:visible !important;
opacity:1 !important;
height: clamp(220px, 26.04vw, 500px) !important;
min-height: 0 !important;
overflow:hidden !important;
background:#fff !important;
}
#main:not(.lemi-home-page) #main-content > .header .slideshow,
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel,
#main:not(.lemi-home-page) .lemi-inner-slider,
#main:not(.lemi-home-page) .lemi-static-banner {
position:relative !important;
display:block !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
overflow:hidden !important;
background:#fff !important;
}
#main:not(.lemi-home-page) #main-content > .header .slideshow > div[id^="carousel-"],
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel > div[id^="responsive-"],
#main:not(.lemi-home-page) .lemi-inner-slider > div[id^="carousel-"],
#main:not(.lemi-home-page) .lemi-inner-slider > div[id^="responsive-"] {
position:relative !important;
display:block !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
}
#main:not(.lemi-home-page) #main-content > .header .carousel-item,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-item {
position:absolute !important;
left:0 !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
float:none !important;
display:block !important;
width:100% !important;
height:100% !important;
opacity:0;
z-index:1;
margin:0 !important;
padding:0 !important;
}
#main:not(.lemi-home-page) #main-content > .header .carousel-item:first-child,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-item:first-child,
#main:not(.lemi-home-page) #main-content > .header .carousel-item.lemi-active,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-item.lemi-active {
opacity:1;
z-index:2;
}
#main:not(.lemi-home-page) #main-content > .header .carousel-img,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-img {
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
background:#fff !important;
}
#main:not(.lemi-home-page) #main-content > .header .carousel-img img,
#main:not(.lemi-home-page) #main-content > .header .responsive-carousel img,
#main:not(.lemi-home-page) .lemi-inner-slider .carousel-img img {
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
max-height:none !important;
object-fit:contain !important;
object-position:center center !important;
background:#fff !important;
}
#main:not(.lemi-home-page) #main-content > .header .caroufredsel_wrapper {
position:relative !important;
display:block !important;
width:100% !important;
height:100% !important;
overflow:hidden !important;
}
@media (max-width:768px){
#main:not(.lemi-home-page) #main-content > .header,
#main:not(.lemi-home-page) .lemi-inner-banner {
height: clamp(150px, 31.25vw, 260px) !important;
}
}
/* ===== LEMI top contact bar upgrade v20260511 ===== */
.lemi-topbar-pro {
background: linear-gradient(90deg, #f8fbff 0%, #eef7ff 50%, #f8fbff 100%) !important;
border-bottom: 1px solid #e2e8f0;
color: #475569 !important;
font-size: 13px;
line-height: normal !important;
box-shadow: 0 1px 0 rgba(15, 23, 42, .03);
}
.lemi-topbar-pro .lemi-topbar-inner {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.lemi-topbar-pro .lemi-topbar-left,
.lemi-topbar-pro .lemi-topbar-right {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
/* Override old topbar float style */
.lemi-topbar-pro span,
.lemi-topbar-pro a {
float: none !important;
margin-left: 0 !important;
}
.lemi-topbar-pro .lemi-topbar-left span {
display: inline-flex;
align-items: center;
padding: 7px 13px;
background: #ffffff;
border: 1px solid #dbe7f3;
border-radius: 999px;
color: #334155;
font-weight: 600;
line-height: 1;
box-shadow: 0 5px 14px rgba(15, 23, 42, .045);
}
.lemi-topbar-pro .lemi-topbar-left span:before {
content: "";
width: 6px;
height: 6px;
margin-right: 8px;
border-radius: 50%;
background: #0ea5e9;
display: inline-block;
}
.lemi-topbar-pro .lemi-topbar-right a {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 15px;
border-radius: 999px;
background: #ffffff;
border: 1px solid #dbe7f3;
color: #0f172a !important;
font-weight: 600;
line-height: 32px;
text-decoration: none;
box-shadow: 0 5px 14px rgba(15, 23, 42, .045);
}
.lemi-topbar-pro .lemi-topbar-right a:hover {
background: #0ea5e9;
border-color: #0ea5e9;
color: #ffffff !important;
text-decoration: none;
transform: translateY(-1px);
}
.lemi-topbar-pro .lemi-topbar-whatsapp {
background: #ecfdf5 !important;
border-color: #bbf7d0 !important;
color: #15803d !important;
}
.lemi-topbar-pro .lemi-topbar-whatsapp:hover {
background: #16a34a !important;
border-color: #16a34a !important;
color: #ffffff !important;
}
@media (max-width: 1024px) {
.lemi-topbar-pro .lemi-topbar-inner {
min-height: auto;
padding: 8px 0;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.lemi-topbar-pro .lemi-topbar-left,
.lemi-topbar-pro .lemi-topbar-right {
width: 100%;
}
}
@media (max-width: 768px) {
.lemi-topbar-pro .lemi-topbar-left {
display: none;
}
.lemi-topbar-pro .lemi-topbar-inner {
padding: 7px 0;
}
.lemi-topbar-pro .lemi-topbar-right {
justify-content: center;
gap: 8px;
}
.lemi-topbar-pro .lemi-topbar-right a {
height: 30px;
line-height: 30px;
padding: 0 11px;
font-size: 12px;
}
.lemi-topbar-pro .lemi-topbar-mail,
.lemi-topbar-pro .lemi-topbar-whatsapp {
max-width: 48%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
/* =========================
V14 移动端首页轮播空白修复
原因：手机端老轮播插件会生成固定高度 wrapper，但图片没有正常显示，页面顶部就会留出大空白。
处理：手机端静态显示第一张轮播图；没有真实图片时直接隐藏轮播区域。
========================= */
@media (max-width: 768px) {
.lemi-home-page .lemi-hero-image-only.lemi-mobile-hero-empty,
.lemi-home-page .lemi-hero.lemi-mobile-hero-empty {
display: none !important;
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
.lemi-home-page .lemi-hero-image-only,
.lemi-home-page .lemi-hero,
.lemi-home-page .lemi-hero-image-only.lemi-mobile-hero-fixed,
.lemi-home-page .lemi-hero.lemi-mobile-hero-fixed {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
}
.lemi-home-page .lemi-hero-slider,
.lemi-home-page .lemi-hero-slider .caroufredsel_wrapper,
.lemi-home-page .lemi-hero-slider #carousel-126493 {
position: relative !important;
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
left: auto !important;
top: auto !important;
overflow: hidden !important;
background: #ffffff !important;
}
.lemi-home-page .lemi-hero-slider .carousel-item {
position: relative !important;
float: none !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
opacity: 1 !important;
visibility: visible !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1 !important;
}
.lemi-home-page .lemi-hero-slider .carousel-item:not(:first-child) {
display: none !important;
}
.lemi-home-page .lemi-hero-slider .carousel-item:first-child {
display: block !important;
}
.lemi-home-page .lemi-hero-slider .carousel-img {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: hidden !important;
background: #ffffff !important;
}
.lemi-home-page .lemi-hero-slider .carousel-img img {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: 210px !important;
min-height: 0 !important;
object-fit: contain !important;
object-position: center center !important;
background: #ffffff !important;
}
.lemi-home-page .lemi-hero .carousel-btn-fixed,
.lemi-home-page .lemi-hero .carousel-direction {
display: none !important;
}
.lemi-hero-intro {
padding-top: 26px !important;
}
}
@media (max-width: 480px) {
.lemi-home-page .lemi-hero-slider .carousel-img img {
max-height: 180px !important;
}
.lemi-hero-intro {
padding-top: 24px !important;
padding-bottom: 26px !important;
}
}
/* =========================
V15 首页 Custom Packaging / Sustainable 模块美化修复
说明：如果只上传了新版首页 HTML，但 CSS 没有同步，这两个模块会变成普通文字并出现大空白。
========================= */
.lemi-custom-service-section {
background: #ffffff !important;
position: relative;
overflow: hidden;
}
.lemi-custom-service-section:before {
content: "";
position: absolute;
left: -160px;
top: -180px;
width: 360px;
height: 360px;
border-radius: 50%;
background: rgba(14, 165, 233, .06);
pointer-events: none;
}
.lemi-custom-service-section:after {
content: "";
position: absolute;
right: -180px;
bottom: -200px;
width: 420px;
height: 420px;
border-radius: 50%;
background: rgba(34, 197, 94, .055);
pointer-events: none;
}
.lemi-custom-service-section .page-width {
position: relative;
z-index: 2;
}
.lemi-service-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
margin-top: 34px;
}
.lemi-service-card {
position: relative;
min-height: 210px;
padding: 30px 24px 26px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 22px;
box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
transition: all .28s ease;
overflow: hidden;
}
.lemi-service-card:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #0ea5e9, #22c55e);
}
.lemi-service-card:hover {
transform: translateY(-5px);
border-color: #bae6fd;
box-shadow: 0 20px 46px rgba(15, 23, 42, .10);
}
.lemi-service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 18px;
border-radius: 16px;
background: linear-gradient(135deg, #e0f2fe, #ecfdf5);
color: #0284c7;
font-style: normal;
font-weight: 800;
letter-spacing: .04em;
}
.lemi-service-card strong {
display: block;
color: #0f172a;
font-size: 20px;
line-height: 1.3;
margin-bottom: 12px;
}
.lemi-service-card span {
display: block;
color: #64748b;
font-size: 15px;
line-height: 1.75;
}
.lemi-service-note {
margin-top: 26px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
background: linear-gradient(90deg, #eff6ff, #f8fafc);
border: 1px solid #bfdbfe;
border-radius: 20px;
color: #1e3a8a;
box-shadow: 0 12px 28px rgba(30, 64, 175, .06);
}
.lemi-service-note strong {
color: #0f172a;
white-space: nowrap;
}
.lemi-service-note span {
flex: 1;
color: #334155;
line-height: 1.6;
}
.lemi-service-note .lemi-btn {
white-space: nowrap;
padding: 12px 22px;
}
.lemi-sustainable-section {
background: #f8fafc !important;
padding-top: 72px !important;
padding-bottom: 72px !important;
}
.lemi-sustainable-panel {
position: relative;
padding: 46px;
border-radius: 30px;
background: linear-gradient(135deg, #ecfdf5 0%, #eef7ff 52%, #ffffff 100%);
border: 1px solid #dbeafe;
box-shadow: 0 18px 50px rgba(15, 23, 42, .07);
overflow: hidden;
}
.lemi-sustainable-panel:before {
content: "";
position: absolute;
width: 320px;
height: 320px;
right: -110px;
top: -140px;
border-radius: 50%;
background: rgba(14, 165, 233, .10);
}
.lemi-sustainable-panel:after {
content: "";
position: absolute;
width: 240px;
height: 240px;
left: -90px;
bottom: -120px;
border-radius: 50%;
background: rgba(34, 197, 94, .10);
}
.lemi-sustainable-text,
.lemi-sustainable-list {
position: relative;
z-index: 2;
}
.lemi-sustainable-text {
float: left;
width: 42%;
}
.lemi-sustainable-text h2 {
color: #0f172a;
font-size: 38px;
line-height: 1.18;
margin: 0 0 18px;
font-weight: 800;
}
.lemi-sustainable-text p:not(.lemi-eyebrow) {
color: #475569;
font-size: 16px;
line-height: 1.85;
margin-bottom: 24px;
}
.lemi-sustainable-list {
float: right;
width: 52%;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.lemi-sustainable-list div {
min-height: 135px;
padding: 24px 22px;
background: rgba(255, 255, 255, .88);
border: 1px solid #dbeafe;
border-radius: 20px;
box-shadow: 0 12px 30px rgba(15, 23, 42, .055);
transition: all .25s ease;
}
.lemi-sustainable-list div:hover {
transform: translateY(-4px);
border-color: #86efac;
box-shadow: 0 18px 40px rgba(15, 23, 42, .09);
}
.lemi-sustainable-list strong {
display: block;
position: relative;
padding-left: 18px;
color: #065f46;
font-size: 19px;
line-height: 1.35;
margin-bottom: 10px;
}
.lemi-sustainable-list strong:before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
}
.lemi-sustainable-list span {
display: block;
color: #475569;
font-size: 15px;
line-height: 1.7;
}
@media (max-width: 1024px) {
.lemi-service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lemi-service-note {
align-items: flex-start;
flex-direction: column;
}
.lemi-sustainable-text,
.lemi-sustainable-list {
float: none;
width: auto;
}
.lemi-sustainable-list {
margin-top: 28px;
}
}
@media (max-width: 768px) {
.lemi-custom-service-section,
.lemi-sustainable-section {
padding-top: 44px !important;
padding-bottom: 44px !important;
}
.lemi-service-grid,
.lemi-sustainable-list {
grid-template-columns: 1fr !important;
gap: 14px;
}
.lemi-service-card {
min-height: auto;
padding: 24px 20px;
border-radius: 18px;
}
.lemi-service-card strong {
font-size: 18px;
}
.lemi-service-note {
padding: 18px;
border-radius: 18px;
}
.lemi-service-note strong {
white-space: normal;
}
.lemi-service-note .lemi-btn {
width: 100%;
box-sizing: border-box;
}
.lemi-sustainable-panel {
padding: 26px 20px;
border-radius: 22px;
}
.lemi-sustainable-text h2 {
font-size: 28px;
}
.lemi-sustainable-list div {
min-height: auto;
padding: 20px;
border-radius: 18px;
}
}
/* ===== V17 mobile home hero layout stability fix =====
手机端不让老轮播插件反复计算高度，避免首页 banner 滑动时下面内容闪动/被顶动。 */
@media (max-width: 768px) {
.lemi-home-page .lemi-hero-image-only,
.lemi-home-page .lemi-hero-image-only .lemi-hero-slider,
.lemi-home-page .lemi-hero-image-only .caroufredsel_wrapper,
.lemi-home-page .lemi-hero-image-only #carousel-126493 {
height: 260px !important;
min-height: 260px !important;
max-height: 260px !important;
overflow: hidden !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
left: auto !important;
top: auto !important;
}
.lemi-home-page .lemi-hero-image-only .carousel-item {
width: 100% !important;
height: 260px !important;
min-height: 260px !important;
max-height: 260px !important;
overflow: hidden !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
left: 0 !important;
top: 0 !important;
}
.lemi-home-page .lemi-hero-image-only .carousel-img,
.lemi-home-page .lemi-hero-image-only .carousel-img img {
width: 100% !important;
height: 260px !important;
min-height: 260px !important;
max-height: 260px !important;
display: block !important;
}
.lemi-home-page .lemi-hero-image-only .carousel-img img {
object-fit: cover !important;
object-position: center center !important;
}
.lemi-home-page .lemi-mobile-hero-stable .carousel-btn,
.lemi-home-page .lemi-mobile-hero-stable .carousel-btn-fixed,
.lemi-home-page .lemi-mobile-hero-stable .carousel-direction {
display: none !important;
}
.lemi-home-page .lemi-hero-intro {
margin-top: 0 !important;
padding-top: 42px !important;
}
}
@media (max-width: 480px) {
.lemi-home-page .lemi-hero-image-only,
.lemi-home-page .lemi-hero-image-only .lemi-hero-slider,
.lemi-home-page .lemi-hero-image-only .caroufredsel_wrapper,
.lemi-home-page .lemi-hero-image-only #carousel-126493,
.lemi-home-page .lemi-hero-image-only .carousel-item,
.lemi-home-page .lemi-hero-image-only .carousel-img,
.lemi-home-page .lemi-hero-image-only .carousel-img img {
height: 230px !important;
min-height: 230px !important;
max-height: 230px !important;
}
}
/* =========================
V24 Mobile left drawer final fix
基于 V17 稳定版：只重做手机端左侧抽屉菜单，修复 V21/V22/V23 菜单内容错位、顶部联系区域异常。
========================= */
@media (max-width: 768px) {
.desktops-section .lemi-topbar,
.desktops-section .lemi-topbar-pro {
display: none !important;
}
.lemi-drawer-mobile-header {
display: block !important;
position: relative !important;
z-index: 10020 !important;
background: #ffffff !important;
box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
}
.lemi-drawer-mobile-header .touch-top-wrapper {
height: 74px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
.lemi-drawer-mobile-header .touch-logo {
float: none !important;
height: 74px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
.lemi-drawer-mobile-header .touch-logo img {
display: block !important;
max-width: 168px !important;
max-height: 48px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
.lemi-drawer-mobile-header .touch-navigation {
display: block !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
.lemi-drawer-mobile-header .touch-toggle {
position: static !important;
right: auto !important;
top: auto !important;
margin: 0 !important;
padding: 0 !important;
}
.lemi-drawer-mobile-header .touch-toggle ul,
.lemi-drawer-mobile-header .touch-toggle li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
float: none !important;
height: auto !important;
background: transparent !important;
}
.lemi-drawer-trigger {
width: 48px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, .06) !important;
text-decoration: none !important;
}
.lemi-drawer-trigger span { display: none !important; }
.lemi-drawer-trigger .touch-icon-menu {
position: relative !important;
display: block !important;
width: 24px !important;
height: 2px !important;
margin: 0 !important;
border-radius: 999px !important;
background: #1e293b !important;
background-image: none !important;
box-shadow: none !important;
overflow: visible !important;
}
.lemi-drawer-trigger .touch-icon-menu:before,
.lemi-drawer-trigger .touch-icon-menu:after {
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
border-radius: 999px;
background: #1e293b;
}
.lemi-drawer-trigger .touch-icon-menu:before { top: -8px; }
.lemi-drawer-trigger .touch-icon-menu:after { top: 8px; }
.lemi-drawer-mask {
position: fixed !important;
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 10030 !important;
background: rgba(15, 23, 42, .42) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity .22s ease, visibility .22s ease !important;
}
.lemi-drawer-mask.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.lemi-drawer-panel {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
right: auto !important;
bottom: 0 !important;
width: 84vw !important;
max-width: 370px !important;
height: 100vh !important;
z-index: 10040 !important;
padding: 0 !important;
margin: 0 !important;
background: #ffffff !important;
border-radius: 0 22px 22px 0 !important;
box-shadow: 24px 0 60px rgba(15, 23, 42, .24) !important;
overflow: hidden !important;
transform: translateX(-108%) !important;
transition: transform .26s ease !important;
}
.lemi-drawer-panel.active {
transform: translateX(0) !important;
}
body.lemi-drawer-open { overflow: hidden !important; }
.lemi-drawer-head {
flex: 0 0 74px !important;
height: 74px !important;
padding: 0 18px 0 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-bottom: 1px solid #edf2f7 !important;
background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%) !important;
box-sizing: border-box !important;
}
.lemi-drawer-logo img {
display: block !important;
max-width: 170px !important;
max-height: 44px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
}
.lemi-drawer-close {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #0f172a !important;
background: #f1f5f9 !important;
font-size: 28px !important;
line-height: 38px !important;
font-weight: 300 !important;
text-decoration: none !important;
}
.lemi-drawer-panel .drawer-section-menu {
flex: 1 1 auto !important;
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
padding: 8px 0 12px !important;
margin: 0 !important;
background: #ffffff !important;
border: 0 !important;
box-sizing: border-box !important;
}
.lemi-drawer-menu,
.lemi-drawer-menu ul {
display: block !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: transparent !important;
}
.lemi-drawer-menu li {
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
list-style: none !important;
}
.lemi-drawer-menu > ul > li > a {
position: relative !important;
min-height: 54px !important;
padding: 0 22px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
color: #0f172a !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
font-size: 16px !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
font-weight: 650 !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.lemi-drawer-menu > ul > li.current > a,
.lemi-drawer-menu > ul > li.open > a,
.lemi-drawer-menu > ul > li > a:hover {
color: #0284c7 !important;
background: #f0f9ff !important;
}
.lemi-drawer-menu > ul > li.current > a:before,
.lemi-drawer-menu > ul > li.open > a:before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 4px;
border-radius: 0 999px 999px 0;
background: #0ea5e9;
}
.lemi-drawer-menu a span,
.lemi-drawer-menu a strong {
display: inline-block !important;
color: inherit !important;
font-weight: inherit !important;
letter-spacing: 0 !important;
}
.lemi-drawer-menu li ul {
display: none;
padding: 8px 0 9px !important;
background: #f8fafc !important;
border-bottom: 1px solid #eef2f7 !important;
}
.lemi-drawer-menu li.open > ul { display: block; }
.lemi-drawer-menu li ul li a {
position: relative !important;
display: block !important;
min-height: 0 !important;
padding: 11px 22px 11px 38px !important;
color: #475569 !important;
background: transparent !important;
border: 0 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
.lemi-drawer-menu li ul li a:before {
content: "";
position: absolute;
left: 24px;
top: 18px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #38bdf8;
}
.lemi-drawer-menu li ul li a:hover,
.lemi-drawer-menu li ul li.current > a {
color: #0284c7 !important;
background: #e0f2fe !important;
}
.lemi-drawer-menu .touch-arrow-down,
.lemi-drawer-menu .touch-arrow-up {
flex: 0 0 auto !important;
display: inline-block !important;
width: 9px !important;
height: 9px !important;
margin-left: 12px !important;
border-right: 2px solid #94a3b8 !important;
border-bottom: 2px solid #94a3b8 !important;
background: none !important;
background-image: none !important;
transform: rotate(-45deg) !important;
transition: transform .2s ease, border-color .2s ease !important;
}
.lemi-drawer-menu li.open > a .touch-arrow-down,
.lemi-drawer-menu li.open > a .touch-arrow-up {
transform: rotate(45deg) !important;
border-color: #0284c7 !important;
}
.lemi-drawer-foot {
flex: 0 0 152px !important;
height: 152px !important;
padding: 16px 20px 18px !important;
border-top: 1px solid #edf2f7 !important;
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
box-sizing: border-box !important;
}
.lemi-drawer-quote {
height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 12px 24px rgba(14, 165, 233, .24) !important;
}
.lemi-drawer-contact-row {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.lemi-drawer-contact-row a {
height: 38px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #ffffff !important;
border: 1px solid #dbe7f3 !important;
color: #0f172a !important;
font-size: 13px !important;
font-weight: 650 !important;
text-decoration: none !important;
}
.lemi-drawer-contact-row .lemi-drawer-wa {
color: #15803d !important;
background: #ecfdf5 !important;
border-color: #bbf7d0 !important;
}
body.lemi-drawer-open .lemi-floating-contact,
body.lemi-drawer-open .gotop-wrapper {
display: none !important;
}
.lemi-floating-contact {
right: 14px !important;
bottom: 96px !important;
gap: 10px !important;
z-index: 9999 !important;
}
.lemi-floating-contact a {
min-width: 96px !important;
height: 42px !important;
padding: 0 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
font-size: 14px !important;
line-height: 42px !important;
}
.gotop-wrapper {
right: 18px !important;
bottom: 30px !important;
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
z-index: 9998 !important;
background: rgba(15, 23, 42, .46) !important;
}
.gotop-wrapper a.fixed-gotop,
.gotop-wrapper a.gotop {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
background-size: 16px 16px !important;
}
}
@media (min-width: 769px) {
.lemi-drawer-mask,
.lemi-drawer-panel {
display: none !important;
}
}
/* =========================
V25 mobile drawer small tune
1) Move hamburger trigger closer to the right edge
2) Products/About submenus are collapsed by default and can be toggled closed
========================= */
@media (max-width: 768px) {
.lemi-drawer-mobile-header .touch-top-wrapper {
width: 100% !important;
max-width: none !important;
padding-left: 18px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
position: relative !important;
}
.lemi-drawer-mobile-header .touch-navigation {
margin-left: auto !important;
flex: 0 0 auto !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
}
.lemi-drawer-trigger {
width: 46px !important;
height: 46px !important;
border-radius: 16px !important;
margin-left: auto !important;
}
.lemi-drawer-menu > ul > li > ul {
display: none !important;
}
.lemi-drawer-menu > ul > li.open > ul {
display: block !important;
}
.lemi-drawer-menu > ul > li.current:not(.open) > a {
color: #0f172a !important;
background: #ffffff !important;
}
.lemi-drawer-menu > ul > li.current:not(.open) > a:before {
display: none !important;
}
}
/* =========================
V26 mobile product page cleanup
- Hide in-page product category sidebar on mobile
- Product categories are handled by the left drawer menu
- Drawer opens current top navigation section automatically
========================= */
@media (max-width: 768px) {
.lemi-product-list-page .lemi-products-layout .lemi-sidebar,
.lemi-product-list-page .lemi-sidebar-box,
.lemi-product-list-page .lemi-sidebar-quote {
display: none !important;
}
.lemi-product-list-page .lemi-products-layout {
padding-top: 34px !important;
}
.lemi-product-list-page .lemi-main-content {
margin-left: 0 !important;
width: 100% !important;
}
.lemi-product-list-page .lemi-list-intro {
margin-bottom: 18px !important;
padding: 22px 20px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
background: #ffffff !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, .045) !important;
}
.lemi-product-list-page .lemi-list-intro h2 {
font-size: 26px !important;
line-height: 1.22 !important;
margin-bottom: 8px !important;
}
.lemi-product-list-page .lemi-list-intro p {
font-size: 14px !important;
line-height: 1.65 !important;
margin-bottom: 0 !important;
}
.lemi-drawer-menu > ul > li.current.open > a {
color: #0284c7 !important;
background: #f0f9ff !important;
}
}
/* =========================
V27 drawer current category active state
- Highlight current child category in mobile left drawer
- Keep the drawer positioned around the current category
========================= */
@media (max-width: 768px) {
.lemi-drawer-menu li ul li.current > a,
.lemi-drawer-menu li ul li.active > a,
.lemi-drawer-menu li ul li.current > a:hover,
.lemi-drawer-menu li ul li.active > a:hover {
position: relative !important;
color: #0284c7 !important;
background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%) !important;
font-weight: 800 !important;
border-radius: 14px !important;
margin: 4px 16px !important;
padding-left: 42px !important;
box-shadow: inset 4px 0 0 #0ea5e9, 0 8px 18px rgba(14, 165, 233, .10) !important;
}
.lemi-drawer-menu li ul li.current > a:before,
.lemi-drawer-menu li ul li.active > a:before {
left: 22px !important;
top: 50% !important;
width: 8px !important;
height: 8px !important;
margin-top: -4px !important;
background: #0ea5e9 !important;
box-shadow: 0 0 0 5px rgba(14, 165, 233, .14) !important;
}
.lemi-drawer-menu > ul > li.current.open > a {
color: #0284c7 !important;
background: #f0f9ff !important;
font-weight: 800 !important;
}
.lemi-drawer-menu > ul > li.current.open > a:after {
content: "Current";
margin-left: auto;
margin-right: 12px;
padding: 4px 9px;
border-radius: 999px;
background: #e0f2fe;
color: #0284c7;
font-size: 11px;
line-height: 1;
font-weight: 800;
letter-spacing: .02em;
}
.lemi-drawer-menu > ul > li.current.open > a .touch-arrow-down,
.lemi-drawer-menu > ul > li.current.open > a .touch-arrow-up {
margin-left: 6px !important;
}
}
/* =========================================================
LEMI V28 - Hide top contact bar on all devices
Reason: keep desktop/mobile header clean. Contact entry remains in nav CTA, floating buttons, footer and contact page.
========================================================= */
.lemi-topbar-pro,
.lemi-topbar {
display: none !important;
}
/* Header polish after removing the top contact bar */
.lemi-header {
border-bottom: 1px solid rgba(226, 232, 240, .9);
}
@media (min-width: 1025px) {
.lemi-nav-wrap {
height: 88px;
}
.lemi-logo {
padding: 15px 0;
}
.lemi-main-nav .main-nav > ul > li > a.first-level {
height: 88px;
line-height: 88px;
}
.lemi-nav-quote a {
margin-top: 23px;
}
}
@media (max-width: 1024px) {
.lemi-mobile-header {
border-bottom: 1px solid rgba(226, 232, 240, .9);
}
}
/* =========================================================
LEMI V29 - Desktop current dropdown item active state
Reason: when visitors are inside a product category, highlight the current category in the desktop Products dropdown.
Based on V28 stable version.
========================================================= */
@media (min-width: 1025px) {
.lemi-main-nav .sf-menu > li.current > a.first-level {
color: #0284c7 !important;
}
.lemi-main-nav .sf-menu > li.current > a.first-level strong {
font-weight: 800 !important;
}
.lemi-main-nav .sf-menu > li.current > a.first-level:after {
content: "";
position: absolute;
left: 50%;
bottom: 20px;
width: 22px;
height: 3px;
margin-left: -11px;
border-radius: 999px;
background: #0ea5e9;
box-shadow: 0 4px 10px rgba(14, 165, 233, .28);
}
.lemi-main-nav .sf-menu > li > a.first-level {
position: relative;
}
.lemi-main-nav .sf-menu ul li.current > a,
.lemi-main-nav .sf-menu ul li.active > a,
.lemi-main-nav .sf-menu ul li.current > a:hover,
.lemi-main-nav .sf-menu ul li.active > a:hover {
position: relative !important;
margin: 5px 10px !important;
padding: 13px 18px 13px 36px !important;
border-radius: 12px !important;
color: #0284c7 !important;
background: linear-gradient(90deg, #e0f2fe 0%, #f0f9ff 100%) !important;
font-weight: 800 !important;
box-shadow: inset 4px 0 0 #0ea5e9, 0 8px 18px rgba(14, 165, 233, .10) !important;
}
.lemi-main-nav .sf-menu ul li.current > a:before,
.lemi-main-nav .sf-menu ul li.active > a:before {
content: "";
position: absolute;
left: 18px;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3.5px;
border-radius: 50%;
background: #0ea5e9;
box-shadow: 0 0 0 5px rgba(14, 165, 233, .14);
}
.lemi-main-nav .sf-menu ul li.current > a strong,
.lemi-main-nav .sf-menu ul li.active > a strong {
font-weight: 800 !important;
}
.lemi-main-nav .sf-menu ul li.current > a:after,
.lemi-main-nav .sf-menu ul li.active > a:after {
content: "Current";
float: right;
margin-left: 16px;
padding: 4px 8px;
border-radius: 999px;
background: #ffffff;
color: #0284c7;
font-size: 11px;
line-height: 1;
font-weight: 800;
letter-spacing: .02em;
box-shadow: 0 3px 8px rgba(14, 165, 233, .12);
}
.lemi-main-nav .sf-menu ul {
padding: 10px 0 !important;
}
}
/* =========================================================
LEMI V35 - Desktop Products Alibaba Cloud style real mega menu
Base: V29 stable. Fix: old Superfish dropdown is hidden; Products uses a static CMS-rendered mega panel.
========================================================= */
@media (min-width: 1025px) {
/* Hide old Products dropdown to avoid the old 2-level/3-level superfish menu showing at the same time */
.lemi-main-nav .sf-menu > li:nth-child(2) > ul,
.lemi-main-nav .sf-menu > li:nth-child(2):hover > ul,
.lemi-main-nav .sf-menu > li:nth-child(2).sfHover > ul {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
top: -999em !important;
left: -999em !important;
}
.lemi-header {
overflow: visible !important;
}
.lemi-nav-wrap,
.lemi-nav-wrap .page-width,
.lemi-main-nav,
.lemi-main-nav .main-nav,
.lemi-main-nav .sf-menu {
overflow: visible !important;
}
.lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level,
.lemi-header.lemi-v35-mega-open .lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level {
color: #0284c7 !important;
}
.lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level:after,
.lemi-header.lemi-v35-mega-open .lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level:after,
.lemi-main-nav .sf-menu > li:nth-child(2).current > a.first-level:after {
content: "";
position: absolute;
left: 50%;
bottom: 20px;
width: 26px;
height: 3px;
margin-left: -13px;
border-radius: 999px;
background: #0ea5e9;
box-shadow: 0 4px 10px rgba(14, 165, 233, .28);
}
.lemi-desktop-products-mega-v35 {
display: none;
position: absolute;
left: 50%;
top: 100%;
z-index: 99999;
width: 980px;
max-width: calc(100vw - 80px);
transform: translateX(-50%);
padding-top: 14px;
}
.lemi-header.lemi-v35-mega-open .lemi-desktop-products-mega-v35 {
display: block;
}
.lemi-v35-mega-inner {
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
min-height: 430px;
border: 1px solid rgba(203, 213, 225, .85);
border-radius: 26px;
background: rgba(255, 255, 255, .98);
box-shadow: 0 30px 90px rgba(15, 23, 42, .20);
overflow: hidden;
backdrop-filter: blur(8px);
}
.lemi-v35-mega-inner:before {
content: "";
position: absolute;
top: 4px;
left: 50%;
width: 18px;
height: 18px;
margin-left: -9px;
transform: rotate(45deg);
background: #fff;
border-left: 1px solid rgba(203, 213, 225, .85);
border-top: 1px solid rgba(203, 213, 225, .85);
}
.lemi-v35-mega-left {
position: relative;
z-index: 2;
padding: 18px 14px;
background: linear-gradient(180deg, #f8fbff 0%, #eef7ff 100%);
border-right: 1px solid #e2e8f0;
max-height: 520px;
overflow-y: auto;
}
.lemi-v35-left-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 48px;
padding: 0 14px;
margin-bottom: 6px;
border-radius: 15px;
color: #334155 !important;
text-decoration: none !important;
font-size: 15px;
font-weight: 750;
line-height: 1.3;
transition: all .18s ease;
}
.lemi-v35-left-item span {
flex: 0 0 auto;
width: 8px;
height: 8px;
border-radius: 50%;
background: #7dd3fc;
box-shadow: 0 0 0 5px rgba(14, 165, 233, .10);
}
.lemi-v35-left-item strong {
flex: 1;
font-weight: 800;
}
.lemi-v35-left-item em {
font-size: 20px;
color: #94a3b8;
transition: all .18s ease;
}
.lemi-v35-left-item:hover,
.lemi-v35-left-item.active,
.lemi-v35-left-item.is-current {
background: #ffffff;
color: #0284c7 !important;
box-shadow: 0 12px 28px rgba(14, 165, 233, .12), inset 4px 0 0 #0ea5e9;
}
.lemi-v35-left-item:hover span,
.lemi-v35-left-item.active span,
.lemi-v35-left-item.is-current span {
background: #0ea5e9;
box-shadow: 0 0 0 6px rgba(14, 165, 233, .16);
}
.lemi-v35-left-item:hover em,
.lemi-v35-left-item.active em,
.lemi-v35-left-item.is-current em {
color: #0284c7;
transform: translateX(2px);
}
.lemi-v35-mega-right {
position: relative;
padding: 26px 30px 30px;
background: #ffffff;
min-height: 430px;
}
.lemi-v35-right-panel {
display: none;
}
.lemi-v35-right-panel.active {
display: block;
}
.lemi-v35-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
padding-bottom: 18px;
border-bottom: 1px solid #e2e8f0;
}
.lemi-v35-panel-head h3 {
margin: 0;
color: #0f172a;
font-size: 25px;
line-height: 1.25;
font-weight: 850;
}
.lemi-v35-panel-head a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 0 15px;
border-radius: 999px;
background: #f0f9ff;
border: 1px solid #bae6fd;
color: #0284c7 !important;
font-size: 13px;
font-weight: 800;
text-decoration: none !important;
white-space: nowrap;
}
.lemi-v35-panel-head a:hover {
background: #0ea5e9;
color: #fff !important;
border-color: #0ea5e9;
}
.lemi-v35-panel-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.lemi-v35-sub-card {
display: flex;
align-items: center;
min-height: 58px;
padding: 14px 16px;
border-radius: 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
color: #334155 !important;
text-decoration: none !important;
transition: all .2s ease;
box-sizing: border-box;
}
.lemi-v35-sub-card span {
width: 8px;
height: 8px;
margin-right: 12px;
border-radius: 50%;
background: #bae6fd;
box-shadow: 0 0 0 5px rgba(14, 165, 233, .08);
flex: 0 0 auto;
}
.lemi-v35-sub-card strong {
font-size: 14px;
line-height: 1.45;
font-weight: 780;
}
.lemi-v35-sub-card:hover,
.lemi-v35-sub-card.is-current {
background: linear-gradient(90deg, #e0f2fe 0%, #f8fbff 100%);
border-color: #7dd3fc;
color: #0284c7 !important;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(14, 165, 233, .12);
}
.lemi-v35-sub-card:hover span,
.lemi-v35-sub-card.is-current span {
background: #0ea5e9;
box-shadow: 0 0 0 6px rgba(14, 165, 233, .16);
}
.lemi-v35-view-all-card {
background: #fff !important;
border-style: dashed !important;
}
}
@media (max-width: 1024px) {
.lemi-desktop-products-mega-v35 {
display: none !important;
}
}
/* =========================================================
LEMI V36 - Desktop Products menu refine
Base: V35 static mega panel.
Fixes:
1) Home and Products should not both look selected on homepage.
2) Product major categories in mega panel are clickable.
3) Selected style is cleaner: no left blue bar, no Current/Selected pill.
========================================================= */
@media (min-width: 1025px) {
/* Products should not be forced active on every page. Only active when real current or when mega panel is open. */
.lemi-main-nav .sf-menu > li:nth-child(2):not(.current) > a.first-level {
color: #1e293b !important;
}
.lemi-main-nav .sf-menu > li:nth-child(2):not(.current) > a.first-level:after {
content: none !important;
display: none !important;
}
.lemi-header.lemi-v35-mega-open .lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level,
.lemi-main-nav .sf-menu > li:nth-child(2).current > a.first-level {
color: #0284c7 !important;
}
.lemi-header.lemi-v35-mega-open .lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level:after,
.lemi-main-nav .sf-menu > li:nth-child(2).current > a.first-level:after {
content: "" !important;
display: block !important;
position: absolute;
left: 50%;
bottom: 20px;
width: 24px;
height: 3px;
margin-left: -12px;
border-radius: 999px;
background: #0ea5e9;
box-shadow: 0 4px 10px rgba(14, 165, 233, .22);
}
/* Clean top navigation active state */
.lemi-main-nav .sf-menu > li.current > a.first-level {
color: #0284c7 !important;
}
.lemi-main-nav .sf-menu > li.current > a.first-level:after {
width: 24px !important;
height: 3px !important;
bottom: 20px !important;
background: #0ea5e9 !important;
box-shadow: 0 4px 10px rgba(14, 165, 233, .22) !important;
}
/* Make the panel more menu-like and less decorative */
.lemi-desktop-products-mega-v35 {
width: 940px !important;
max-width: calc(100vw - 90px) !important;
padding-top: 10px !important;
}
.lemi-v35-mega-inner {
grid-template-columns: 260px minmax(0, 1fr) !important;
min-height: 390px !important;
border-radius: 22px !important;
box-shadow: 0 24px 72px rgba(15, 23, 42, .18) !important;
}
.lemi-v35-mega-left {
padding: 16px 12px !important;
background: #f8fafc !important;
}
.lemi-v35-left-item {
min-height: 46px !important;
margin-bottom: 5px !important;
padding: 0 14px !important;
border: 1px solid transparent !important;
border-radius: 14px !important;
background: transparent !important;
color: #334155 !important;
box-shadow: none !important;
font-size: 15px !important;
letter-spacing: .01em;
}
.lemi-v35-left-item span {
display: none !important;
}
.lemi-v35-left-item strong {
font-weight: 760 !important;
}
.lemi-v35-left-item em {
color: #94a3b8 !important;
font-size: 18px !important;
}
.lemi-v35-left-item:hover,
.lemi-v35-left-item.active,
.lemi-v35-left-item.is-current {
background: #eaf7ff !important;
border-color: #bae6fd !important;
color: #0284c7 !important;
box-shadow: 0 8px 20px rgba(14, 165, 233, .08) !important;
}
.lemi-v35-left-item:hover em,
.lemi-v35-left-item.active em,
.lemi-v35-left-item.is-current em {
color: #0284c7 !important;
transform: translateX(2px);
}
.lemi-v35-left-item:before,
.lemi-v35-left-item:after {
content: none !important;
display: none !important;
}
.lemi-v35-mega-right {
min-height: 390px !important;
padding: 24px 28px 28px !important;
background: #fff !important;
}
.lemi-v35-panel-head {
margin-bottom: 20px !important;
padding-bottom: 16px !important;
}
.lemi-v35-panel-head h3 {
font-size: 23px !important;
font-weight: 820 !important;
}
.lemi-v35-panel-head a {
background: #ffffff !important;
border-color: #cbd5e1 !important;
color: #334155 !important;
}
.lemi-v35-panel-head a:hover {
background: #0ea5e9 !important;
border-color: #0ea5e9 !important;
color: #ffffff !important;
}
.lemi-v35-panel-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.lemi-v35-sub-card {
min-height: 54px !important;
padding: 13px 15px !important;
border-radius: 14px !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
box-shadow: none !important;
transform: none !important;
}
.lemi-v35-sub-card span {
width: 6px !important;
height: 6px !important;
margin-right: 11px !important;
background: #bae6fd !important;
box-shadow: none !important;
}
.lemi-v35-sub-card strong {
font-weight: 720 !important;
}
.lemi-v35-sub-card:hover,
.lemi-v35-sub-card.is-current {
background: #f0f9ff !important;
border-color: #7dd3fc !important;
color: #0284c7 !important;
box-shadow: 0 10px 24px rgba(14, 165, 233, .10) !important;
transform: translateY(-1px) !important;
}
.lemi-v35-sub-card:hover span,
.lemi-v35-sub-card.is-current span {
background: #0ea5e9 !important;
box-shadow: 0 0 0 4px rgba(14, 165, 233, .12) !important;
}
.lemi-v35-sub-card:after {
content: none !important;
display: none !important;
}
.lemi-v35-view-all-card {
background: #f8fafc !important;
border-style: dashed !important;
}
}
/* =========================================================
LEMI V39 - Unified desktop dropdown style + simplified mobile active state
Base: V38 stable Products dropdown + mobile drawer.
Goals:
1) Keep Products dropdown working.
2) Apply the same clean visual language to every desktop dropdown.
3) Remove heavy left blue bars, Current/Selected labels and strong markers.
4) Simplify mobile drawer active state.
========================================================= */
@media (min-width: 1025px) {
/* Top nav: one simple active rule for all main menu items */
.lemi-main-nav .sf-menu > li > a.first-level {
position: relative !important;
color: #0f172a !important;
}
.lemi-main-nav .sf-menu > li:hover > a.first-level,
.lemi-main-nav .sf-menu > li.current > a.first-level,
.lemi-header.lemi-v35-mega-open .lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level {
color: #0284c7 !important;
}
.lemi-main-nav .sf-menu > li > a.first-level:after {
content: "" !important;
position: absolute !important;
left: 50% !important;
bottom: 18px !important;
width: 0 !important;
height: 3px !important;
margin-left: 0 !important;
border-radius: 999px !important;
background: #0ea5e9 !important;
box-shadow: none !important;
transition: all .22s ease !important;
display: block !important;
}
.lemi-main-nav .sf-menu > li:hover > a.first-level:after,
.lemi-main-nav .sf-menu > li.current > a.first-level:after,
.lemi-header.lemi-v35-mega-open .lemi-main-nav .sf-menu > li:nth-child(2) > a.first-level:after {
width: 26px !important;
margin-left: -13px !important;
}
/* Hide the old Products dropdown, keep the independent Products panel */
.lemi-main-nav .sf-menu > li.lemi-products-trigger-v35 > ul,
.lemi-main-nav .sf-menu > li:nth-child(2) > ul {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* General desktop dropdown: used by Product Catalog / Company Info / Blog / About Us etc. */
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) > ul {
top: 82px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 260px !important;
min-width: 230px !important;
padding: 12px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
background: rgba(255, 255, 255, .98) !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, .16) !important;
overflow: visible !important;
z-index: 9998 !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) > ul:before {
content: "" !important;
position: absolute !important;
top: -8px !important;
left: 50% !important;
width: 16px !important;
height: 16px !important;
margin-left: -8px !important;
background: #ffffff !important;
border-left: 1px solid #e2e8f0 !important;
border-top: 1px solid #e2e8f0 !important;
transform: rotate(45deg) !important;
border-radius: 4px 0 0 0 !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li {
float: none !important;
display: block !important;
width: 100% !important;
background: transparent !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li a {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 44px !important;
padding: 0 14px !important;
margin: 2px 0 !important;
border: 1px solid transparent !important;
border-radius: 13px !important;
background: transparent !important;
color: #334155 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
letter-spacing: 0 !important;
box-shadow: none !important;
text-decoration: none !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li a:hover,
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li.current > a,
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li.active > a {
background: #f0f9ff !important;
border-color: #bae6fd !important;
color: #0284c7 !important;
box-shadow: none !important;
padding-left: 14px !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li.current > a:before,
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li.active > a:before,
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li.current > a:after,
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul li.active > a:after {
content: none !important;
display: none !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul ul {
top: -12px !important;
left: calc(100% + 12px) !important;
width: 250px !important;
padding: 12px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 18px !important;
background: rgba(255, 255, 255, .98) !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, .15) !important;
overflow: visible !important;
}
.lemi-main-nav .sf-menu > li:not(.lemi-products-trigger-v35) ul ul:before {
content: none !important;
display: none !important;
}
/* Products independent panel: keep it, but make the active style clean and unified */
.lemi-desktop-products-mega-v35 {
width: 940px !important;
max-width: calc(100vw - 96px) !important;
padding-top: 8px !important;
}
.lemi-v35-mega-inner {
border: 1px solid #e2e8f0 !important;
border-radius: 22px !important;
box-shadow: 0 24px 72px rgba(15, 23, 42, .16) !important;
overflow: hidden !important;
}
.lemi-v35-mega-left {
background: #f8fafc !important;
padding: 15px 12px !important;
}
.lemi-v35-left-item,
.lemi-v35-sub-card {
border: 1px solid transparent !important;
box-shadow: none !important;
color: #334155 !important;
background: transparent !important;
}
.lemi-v35-left-item span,
.lemi-v35-left-item:before,
.lemi-v35-left-item:after,
.lemi-v35-sub-card span,
.lemi-v35-sub-card:before,
.lemi-v35-sub-card:after {
content: none !important;
display: none !important;
}
.lemi-v35-left-item:hover,
.lemi-v35-left-item.active,
.lemi-v35-left-item.is-current,
.lemi-v35-sub-card:hover,
.lemi-v35-sub-card.is-current {
background: #f0f9ff !important;
border-color: #bae6fd !important;
color: #0284c7 !important;
box-shadow: none !important;
transform: none !important;
}
.lemi-v35-left-item {
min-height: 44px !important;
padding: 0 14px !important;
margin: 3px 0 !important;
border-radius: 13px !important;
}
.lemi-v35-sub-card {
min-height: 50px !important;
padding: 12px 15px !important;
border-radius: 13px !important;
}
.lemi-v35-panel-head a {
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
color: #334155 !important;
}
.lemi-v35-panel-head a:hover {
background: #0ea5e9 !important;
border-color: #0ea5e9 !important;
color: #ffffff !important;
}
/* Disable old V29 heavy labels globally */
.lemi-main-nav .sf-menu ul li.current > a:before,
.lemi-main-nav .sf-menu ul li.active > a:before,
.lemi-main-nav .sf-menu ul li.current > a:after,
.lemi-main-nav .sf-menu ul li.active > a:after {
content: none !important;
display: none !important;
}
}
@media (max-width: 768px) {
/* Mobile drawer: simplified selected state, no left blue bar, no Current tag, no dot marker. */
.lemi-drawer-menu > ul > li.current > a,
.lemi-drawer-menu > ul > li.open > a,
.lemi-drawer-menu > ul > li.current.open > a {
color: #0284c7 !important;
background: #f0f9ff !important;
font-weight: 760 !important;
}
.lemi-drawer-menu > ul > li.current > a:before,
.lemi-drawer-menu > ul > li.open > a:before,
.lemi-drawer-menu > ul > li.current.open > a:before,
.lemi-drawer-menu > ul > li.current.open > a:after {
content: none !important;
display: none !important;
}
.lemi-drawer-menu li ul li a {
padding-left: 28px !important;
}
.lemi-drawer-menu li ul li a:before,
.lemi-drawer-menu li ul li.current > a:before,
.lemi-drawer-menu li ul li.active > a:before {
content: none !important;
display: none !important;
}
.lemi-drawer-menu li ul li.current > a,
.lemi-drawer-menu li ul li.active > a,
.lemi-drawer-menu li ul li.current > a:hover,
.lemi-drawer-menu li ul li.active > a:hover {
margin: 3px 16px !important;
padding: 11px 16px !important;
border: 1px solid #bae6fd !important;
border-radius: 13px !important;
color: #0284c7 !important;
background: #f0f9ff !important;
font-weight: 760 !important;
box-shadow: none !important;
}
.lemi-drawer-menu li ul li a:hover {
background: #f8fafc !important;
color: #0284c7 !important;
}
.lemi-drawer-menu > ul > li.current.open > a .touch-arrow-down,
.lemi-drawer-menu > ul > li.current.open > a .touch-arrow-up {
margin-left: 12px !important;
}
}
/* =========================================================
LEMI V40 - Desktop floating contact / back-to-top spacing fix
Reason: keep WhatsApp / Email buttons and back-to-top button from overlapping on desktop.
Scope: desktop only. Mobile drawer and mobile floating layout keep V39 behavior.
========================================================= */
@media (min-width: 769px) {
.lemi-floating-contact {
right: 24px !important;
bottom: 124px !important;
gap: 12px !important;
z-index: 9998 !important;
}
.lemi-floating-contact a {
min-width: 132px !important;
height: 46px !important;
padding: 0 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
font-size: 15px !important;
line-height: 46px !important;
font-weight: 800 !important;
box-shadow: 0 14px 34px rgba(15, 23, 42, .18) !important;
transform: translateZ(0);
}
.lemi-floating-contact a:hover {
transform: translateY(-2px) !important;
text-decoration: none !important;
}
.gotop-wrapper {
position: fixed !important;
right: 34px !important;
bottom: 34px !important;
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
overflow: hidden !important;
z-index: 9997 !important;
background: rgba(15, 23, 42, .48) !important;
box-shadow: 0 12px 30px rgba(15, 23, 42, .16) !important;
}
.gotop-wrapper:hover {
background: #0ea5e9 !important;
box-shadow: 0 14px 34px rgba(14, 165, 233, .28) !important;
}
.gotop-wrapper a.fixed-gotop,
.gotop-wrapper a.gotop {
width: 48px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
background-image: none !important;
background-color: transparent !important;
text-decoration: none !important;
}
.gotop-wrapper a.fixed-gotop:before,
.gotop-wrapper a.gotop:before {
content: "" !important;
display: block !important;
width: 13px !important;
height: 13px !important;
border-top: 3px solid #ffffff !important;
border-left: 3px solid #ffffff !important;
transform: rotate(45deg) translate(2px, 2px) !important;
box-sizing: border-box !important;
}
}
/* =========================================================
LEMI V41 - Desktop floating contact compact refinement
Based on V40 stable version.
Reason: desktop WhatsApp / Email floating buttons were too long and visually heavy.
Scope: desktop only. Mobile layout keeps V40 behavior.
========================================================= */
@media (min-width: 769px) {
.lemi-floating-contact {
right: 26px !important;
bottom: 126px !important;
gap: 10px !important;
align-items: flex-end !important;
z-index: 9998 !important;
}
.lemi-floating-contact a,
.lemi-floating-contact a:link,
.lemi-floating-contact a:visited {
width: 166px !important;
min-width: 166px !important;
max-width: 166px !important;
height: 48px !important;
min-height: 48px !important;
padding: 0 18px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
font-size: 15px !important;
line-height: 48px !important;
font-weight: 800 !important;
letter-spacing: .2px !important;
text-align: center !important;
white-space: nowrap !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, .14) !important;
}
.lemi-floating-contact a:hover {
transform: translateY(-2px) !important;
box-shadow: 0 14px 32px rgba(15, 23, 42, .18) !important;
text-decoration: none !important;
}
.gotop-wrapper {
right: 34px !important;
bottom: 34px !important;
}
}
/* =========================================================
LEMI V42 - Floating contact compact + cache version fix
Reason: V41 visual change may not appear because header still used v40 CSS query string.
Scope: desktop compact buttons only; mobile remains stable.
========================================================= */
@media (min-width: 769px) {
body .lemi-floating-contact {
right: 28px !important;
bottom: 120px !important;
gap: 9px !important;
align-items: flex-end !important;
z-index: 9998 !important;
}
body .lemi-floating-contact > a,
body .lemi-floating-contact > a.lemi-floating-whatsapp,
body .lemi-floating-contact > a.lemi-floating-email,
body .lemi-floating-contact > a:link,
body .lemi-floating-contact > a:visited {
width: 142px !important;
min-width: 142px !important;
max-width: 142px !important;
height: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
padding: 0 14px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
font-size: 14px !important;
line-height: 44px !important;
font-weight: 800 !important;
letter-spacing: .1px !important;
text-align: center !important;
white-space: nowrap !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, .13) !important;
}
body .lemi-floating-contact > a:hover {
transform: translateY(-2px) !important;
box-shadow: 0 12px 28px rgba(15, 23, 42, .17) !important;
text-decoration: none !important;
}
body .gotop-wrapper {
right: 34px !important;
bottom: 34px !important;
z-index: 9997 !important;
}
}
/* =========================================================
V43 Pagination UI polish
Based on V42 stable version.
Goal: replace old heavy black pagination with clean blue-white B2B style.
========================================================= */
.pagination,
.lemi-pagination,
.pagination-default {
clear: both !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
margin: 34px 0 24px !important;
padding: 0 !important;
font-size: 0 !important;
text-align: center !important;
}
.pagination a,
.pagination span,
.lemi-pagination a,
.lemi-pagination span,
.pagination-default a,
.pagination-default span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 42px !important;
height: 42px !important;
line-height: 1 !important;
padding: 0 16px !important;
margin: 0 !important;
border-radius: 999px !important;
border: 1px solid #dbe7f2 !important;
background: #fff !important;
color: #334155 !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: .01em !important;
text-decoration: none !important;
box-sizing: border-box !important;
box-shadow: 0 6px 18px rgba(15, 23, 42, .04) !important;
transition: all .22s ease !important;
}
.pagination a:hover,
.lemi-pagination a:hover,
.pagination-default a:hover {
background: #eff8ff !important;
border-color: #37a8e8 !important;
color: #0788cf !important;
box-shadow: 0 10px 22px rgba(14, 165, 233, .12) !important;
transform: translateY(-1px) !important;
}
.pagination .current,
.pagination span.current,
.pagination a.current,
.lemi-pagination .current,
.lemi-pagination span.current,
.lemi-pagination a.current,
.pagination-default .current,
.pagination-default span.current,
.pagination-default a.current {
background: linear-gradient(135deg, #18a9ed, #0788d4) !important;
border-color: #139fe5 !important;
color: #fff !important;
box-shadow: 0 10px 24px rgba(14, 165, 233, .24) !important;
cursor: default !important;
}
/* Total pages info should look like a light information chip, not a heavy button. */
.pagination .pageinfo,
.pagination a.pageinfo,
.pagination span.pageinfo,
.lemi-pagination .pageinfo,
.lemi-pagination a.pageinfo,
.lemi-pagination span.pageinfo,
.pagination-default .pageinfo,
.pagination-default a.pageinfo,
.pagination-default span.pageinfo {
background: #f6f9fc !important;
border-color: #e3edf6 !important;
color: #66788a !important;
box-shadow: none !important;
font-weight: 500 !important;
cursor: default !important;
}
.pagination .disabled,
.pagination a.disabled,
.pagination span.disabled,
.lemi-pagination .disabled,
.lemi-pagination a.disabled,
.lemi-pagination span.disabled,
.pagination-default .disabled,
.pagination-default a.disabled,
.pagination-default span.disabled {
background: #f8fafc !important;
border-color: #e8eef5 !important;
color: #a8b3c1 !important;
box-shadow: none !important;
cursor: not-allowed !important;
transform: none !important;
}
/* Prev / Next / Last buttons: keep them readable, but lighter than primary CTA. */
.pagination .page-prev,
.pagination .page-next,
.lemi-pagination .page-prev,
.lemi-pagination .page-next,
.pagination-default .page-prev,
.pagination-default .page-next {
min-width: 88px !important;
padding: 0 20px !important;
}
@media (max-width: 768px) {
.pagination,
.lemi-pagination,
.pagination-default {
gap: 8px !important;
margin: 24px 0 18px !important;
justify-content: center !important;
}
.pagination a,
.pagination span,
.lemi-pagination a,
.lemi-pagination span,
.pagination-default a,
.pagination-default span {
min-width: 38px !important;
height: 38px !important;
padding: 0 13px !important;
font-size: 13px !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, .04) !important;
}
.pagination .pageinfo,
.lemi-pagination .pageinfo,
.pagination-default .pageinfo {
width: 100% !important;
max-width: 220px !important;
margin-bottom: 2px !important;
}
.pagination .page-prev,
.pagination .page-next,
.lemi-pagination .page-prev,
.lemi-pagination .page-next,
.pagination-default .page-prev,
.pagination-default .page-next {
min-width: 72px !important;
width: auto !important;
border-radius: 999px !important;
}
}
/* =========================================================
V44 Pagination active + mobile layout fix
Based on V43. Fix current page not obvious and mobile wrapping.
========================================================= */
.pagination,
.lemi-pagination,
.pagination-default {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
/* Reset every pagination item first, especially old mobile width rules. */
.pagination > a,
.pagination > span,
.lemi-pagination > a,
.lemi-pagination > span,
.pagination-default > a,
.pagination-default > span {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
white-space: nowrap !important;
}
/* Current page in XunRui can be span.current OR a plain span without class. */
.pagination > .current,
.pagination > span.current,
.pagination > a.current,
.pagination > span:not([class]),
.lemi-pagination > .current,
.lemi-pagination > span.current,
.lemi-pagination > a.current,
.lemi-pagination > span:not([class]),
.pagination-default > .current,
.pagination-default > span.current,
.pagination-default > a.current,
.pagination-default > span:not([class]) {
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
border-color: #0284c7 !important;
color: #ffffff !important;
box-shadow: 0 10px 26px rgba(2, 132, 199, .26) !important;
transform: translateY(-1px) !important;
}
/* Keep total info and disabled from being mistaken for current. */
.pagination > .pageinfo,
.pagination > a.pageinfo,
.pagination > span.pageinfo,
.lemi-pagination > .pageinfo,
.lemi-pagination > a.pageinfo,
.lemi-pagination > span.pageinfo,
.pagination-default > .pageinfo,
.pagination-default > a.pageinfo,
.pagination-default > span.pageinfo {
background: #f4f8fc !important;
border-color: #dfeaf4 !important;
color: #64748b !important;
box-shadow: none !important;
transform: none !important;
}
.pagination > .disabled,
.pagination > a.disabled,
.pagination > span.disabled,
.lemi-pagination > .disabled,
.lemi-pagination > a.disabled,
.lemi-pagination > span.disabled,
.pagination-default > .disabled,
.pagination-default > a.disabled,
.pagination-default > span.disabled {
background: #f8fafc !important;
border-color: #e8eef5 !important;
color: #a8b3c1 !important;
box-shadow: none !important;
transform: none !important;
}
.pagination > .page-prev,
.pagination > .page-next,
.pagination > .page-last,
.pagination > .page-first,
.lemi-pagination > .page-prev,
.lemi-pagination > .page-next,
.lemi-pagination > .page-last,
.lemi-pagination > .page-first,
.pagination-default > .page-prev,
.pagination-default > .page-next,
.pagination-default > .page-last,
.pagination-default > .page-first {
min-width: 92px !important;
padding: 0 20px !important;
}
@media (max-width: 768px) {
.pagination,
.lemi-pagination,
.pagination-default {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
margin: 22px auto 16px !important;
padding: 0 14px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.pagination > a,
.pagination > span,
.lemi-pagination > a,
.lemi-pagination > span,
.pagination-default > a,
.pagination-default > span {
flex: 0 0 auto !important;
width: auto !important;
min-width: 40px !important;
max-width: none !important;
height: 40px !important;
padding: 0 13px !important;
font-size: 13px !important;
line-height: 1 !important;
border-radius: 999px !important;
}
.pagination > .pageinfo,
.pagination > a.pageinfo,
.pagination > span.pageinfo,
.lemi-pagination > .pageinfo,
.lemi-pagination > a.pageinfo,
.lemi-pagination > span.pageinfo,
.pagination-default > .pageinfo,
.pagination-default > a.pageinfo,
.pagination-default > span.pageinfo {
width: auto !important;
min-width: 156px !important;
max-width: calc(100vw - 40px) !important;
margin: 0 !important;
padding: 0 16px !important;
}
.pagination > .page-prev,
.pagination > .page-next,
.pagination > .page-last,
.pagination > .page-first,
.lemi-pagination > .page-prev,
.lemi-pagination > .page-next,
.lemi-pagination > .page-last,
.lemi-pagination > .page-first,
.pagination-default > .page-prev,
.pagination-default > .page-next,
.pagination-default > .page-last,
.pagination-default > .page-first {
width: auto !important;
min-width: 96px !important;
padding: 0 17px !important;
}
.pagination > .current,
.pagination > span.current,
.pagination > a.current,
.pagination > span:not([class]),
.lemi-pagination > .current,
.lemi-pagination > span.current,
.lemi-pagination > a.current,
.lemi-pagination > span:not([class]),
.pagination-default > .current,
.pagination-default > span.current,
.pagination-default > a.current,
.pagination-default > span:not([class]) {
min-width: 40px !important;
width: 40px !important;
padding: 0 !important;
color: #fff !important;
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
border-color: #0284c7 !important;
box-shadow: 0 9px 20px rgba(2, 132, 199, .25) !important;
}
}