/* ==========================================================================
Ronghai New Design System - Brand Rose Theme
Brand primary: #e8397c / pop #ff2093 | Secondary blue: #3372e7 / #052f9b
Large areas use light rose/blue tints + neutral grays; avoid heavy saturation
========================================================================== */
/* ---------- CSS Variables ---------- */
:root {
--rh-primary: #e8397c;
--rh-primary-dark: #e8397c;
--rh-primary-light: #ff2093;
--rh-primary-50: #fef5fa;
--rh-primary-100: #fdebf4;
--rh-primary-200: #fbd0e3;
--rh-primary-300: #f9a8cc;
--rh-pop: #ff2093;
--rh-secondary: #3372e7;
--rh-secondary-dark: #052f9b;
--rh-accent: #3372e7;
--rh-text-dark: #1A1A2E;
--rh-text-body: #4A4A6A;
--rh-text-light: #8888A0;
--rh-bg-white: #FFFFFF;
--rh-bg-soft: #f4f8ff;
--rh-bg-gray: #f6f7f9;
--rh-border: #eceaf0;
--rh-border-light: #f4f2f6;
--rh-radius-sm: 8px;
--rh-radius: 14px;
--rh-radius-lg: 22px;
--rh-radius-xl: 32px;
--rh-shadow-sm: 0 2px 8px rgba(232,57,124,0.06);
--rh-shadow: 0 4px 20px rgba(232,57,124,0.10);
--rh-shadow-lg: 0 12px 40px rgba(232,57,124,0.14);
--rh-shadow-xl: 0 20px 60px rgba(232,57,124,0.18);
--rh-font: 'Gilroy Bold', 'Gilroy', 'Helvetica Neue', Arial, sans-serif;
--rh-transition: 0.28s cubic-bezier(.18,.89,.32,1.28);
--rh-navy: #052f9b;
--rh-gold: #e8397c;
--rh-pink: #ff2093;
--rh-muted: #5a6070;
--rh-maxw: 1400px;
}
/* ---------- Reset Base Overrides ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--rh-font);
color: var(--rh-text-body);
background: var(--rh-bg-white);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
a { color: var(--rh-primary); text-decoration: none; transition: color var(--rh-transition); }
a:hover { color: var(--rh-primary-dark); }
img { max-width: 100%; height: auto; display: block; }
/* ---------- Container ---------- */
.rh-container {
max-width: var(--rh-maxw);
margin: 0 auto;
padding: 0 24px;
}
.rh-section {
padding: 100px 0;
position: relative;
}
.rh-section-soft { background: var(--rh-bg-soft); }
.rh-section-gray { background: var(--rh-bg-gray); }
/* ---------- Section Title ---------- */
.rh-section-head {
text-align: center;
margin-bottom: 64px;
}
.rh-section-eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--rh-secondary);
padding: 6px 18px;
background: #eaf2ff;
border-radius: 999px;
margin-bottom: 16px;
}
.rh-section-title {
font-size: 48px;
font-weight: 800;
line-height: 1.2;
color: var(--rh-text-dark);
margin: 0 0 14px;
}
.rh-section-title span {
background: linear-gradient(135deg, #1a202c 0%, #1a202c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rh-section-desc {
font-size: 17px;
color: var(--rh-text-body);
max-width: 620px;
margin: 0 auto;
}
/* ---------- Buttons ---------- */
.rh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 15px 36px;
border-radius: 999px;
font-size: 15px;
font-weight: 700;
text-decoration: none !important;
transition: all var(--rh-transition);
cursor: pointer;
border: none;
gap: 8px;
}
.rh-btn-primary {
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
color: #fff !important;
box-shadow: 0 8px 24px rgba(232,57,124,0.30);
}
.rh-btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(232,57,124,0.42);
color: #fff !important;
}
.rh-btn-outline {
background: transparent;
color: var(--rh-text-dark) !important;
border: 2px solid var(--rh-text-dark);
}
.rh-btn-outline:hover {
background: var(--rh-text-dark);
color: #fff !important;
transform: translateY(-3px);
}
.rh-btn-ghost {
background: rgba(255,255,255,0.15);
color: #fff !important;
border: 2px solid rgba(255,255,255,0.4);
backdrop-filter: blur(8px);
}
.rh-btn-ghost:hover {
background: rgba(255,255,255,0.28);
color: #fff !important;
border-color: rgba(255,255,255,0.7);
transform: translateY(-3px);
}
.rh-btn-sm { padding: 11px 24px; font-size: 14px; }
/* ==========================================================================
HEADER - Brand Rose nav / Blue secondary icons / Hot-pink CTA pop
========================================================================== */
.rh-header {
--rh-nav: #052f9b;
--rh-nav-dark: #052f9b;
--rh-teal: #3372e7;
--rh-teal-dark: #052f9b;
--rh-teal-deep: #052f9b;
--rh-orange: #ff2093;
--rh-orange-dark: #e8397c;
--rh-header-h: 202px;
position: relative;
z-index: 999;
background: #fff;
}
.rh-header-inner {
max-width: var(--rh-maxw);
margin: 0 auto;
padding: 0 24px;
}
/* ---- Top utility bar ---- */
.rh-topbar {
background: #f6f7f9;
color: #052f9b;
}
.rh-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
}
.rh-topbar-slogan {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.3px;
white-space: nowrap;
}
.rh-topbar-info {
display: flex;
align-items: stretch;
align-self: stretch;
}
.rh-topbar-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: #052f9b !important;
font-size: 15px;
font-weight: 600;
padding: 0 20px;
transition: color 0.25s;
white-space: nowrap;
}
.rh-topbar-item svg {
width: 19px;
height: 19px;
fill: none;
flex-shrink: 0;
}
.rh-topbar-item:hover { color: #3372e7 !important; }
.rh-topbar-search {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
background: none;
border: 0;
color: #052f9b;
cursor: pointer;
transition: color 0.22s, background 0.22s;
}
.rh-topbar-search svg { width: 20px; height: 20px; }
.rh-topbar-search:hover { color: #3372e7; background: rgba(51,114,231,.08); }
/* ---- Main row ---- */
.rh-header-main {
background: #fff;
box-shadow: 0 2px 10px rgba(26,26,46,0.08);
position: relative;
z-index: 2;
}
.rh-main-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 16px;
}
.rh-logo img { height: 100px; width: auto; }
.rh-header-side {
display: flex;
align-items: center;
gap: 42px;
}
.rh-header-contact {
display: flex;
align-items: center;
gap: 14px;
}
.rh-contact-wa {
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--rh-teal);
color: #fff !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.28s;
}
.rh-contact-wa svg { width: 30px; height: 30px; }
.rh-contact-wa:hover {
background: var(--rh-orange);
color: #fff !important;
transform: scale(1.07);
}
.rh-contact-txt { line-height: 1.25; }
.rh-contact-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #6b7280;
}
.rh-contact-label em {
color: #1a202c;
font-style: normal;
font-weight: 800;
}
.rh-contact-phone {
display: block;
font-size: 22px;
font-weight: 800;
color: #1a202c !important;
letter-spacing: 0.4px;
}
.rh-contact-phone:hover { color: var(--rh-orange) !important; }
.rh-quote-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ff2093 0%, #e8397c 100%);
color: #fff !important;
font-size: 20px;
font-weight: 700;
padding: 10px 22px;
border-radius: 999px;
box-shadow: 0 8px 22px rgba(232,57,124,0.32);
transition: all 0.28s;
white-space: nowrap;
}
.rh-quote-btn:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #e8397c 0%, #e8397c 100%);
color: #fff !important;
box-shadow: 0 13px 28px rgba(232,57,124,0.42);
}
/* ---- Primary navigation ---- */
.rh-navbar {
position: sticky;
top: 0;
z-index: 1000;
background-color: var(--rh-nav);
/* background-image: repeating-linear-gradient(-45deg,
rgba(255,255,255,0.055) 0,
rgba(255,255,255,0.055) 8px,
rgba(0,0,0,0.055) 8px,
rgba(0,0,0,0.055) 16px);
box-shadow: 0 3px 10px rgba(0,0,0,0.14); */
}
.rh-nav {
display: flex;
align-items: stretch;
justify-content: center;
list-style: none;
margin: 0;
padding-left: 200px;
}
.rh-nav > li { position: relative; display: flex; margin-right: 50px;}
.rh-navbar .rh-header-inner { position: relative; }
.rh-nav > li.rh-has-mega { position: static; }
.rh-nav-link {
display: flex;
align-items: center;
color: #fff !important;
font-family: "Gilroy Bold", Gilroy, Helvetica, Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: 1.2px;
text-transform: uppercase;
padding: 0 28px;
min-height: 54px;
position: relative;
white-space: nowrap;
transition: background 0.25s, color 0.25s;
}
/* hot-pink pop hover bar on navy nav */
.rh-nav-link::before {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
height: 3px;
background: var(--rh-orange);
transform: scaleX(0);
transition: transform 0.25s;
}
.rh-nav > li:hover > .rh-nav-link,
.rh-nav > li.current > .rh-nav-link {
background: rgba(0,0,0,0.12);
color: #ffd3e6 !important;
}
.rh-nav > li:hover > .rh-nav-link::before,
.rh-nav > li.current > .rh-nav-link::before { transform: scaleX(1); }
/* dropdown caret */
.rh-nav > li.has-child > .rh-nav-link { padding-right: 42px; }
.rh-nav > li.has-child > .rh-nav-link::after {
content: '';
position: absolute;
right: 20px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2.5px solid rgba(255,255,255,0.85);
border-bottom: 2.5px solid rgba(255,255,255,0.85);
transform: translateY(-65%) rotate(45deg);
transition: all 0.25s;
}
.rh-nav > li.has-child:hover > .rh-nav-link::after {
border-color: #ffd3e6;
transform: translateY(-35%) rotate(45deg);
}
/* ---- Mobile hamburger (hidden on desktop) ---- */
.rh-mobile-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: none;
border: none;
color: var(--rh-teal);
cursor: pointer;
padding: 0;
}
.rh-mobile-toggle svg { width: 30px; height: 30px; }
/* ---- Fullscreen search ---- */
.rh-search-overlay {
position: fixed;
inset: 0;
z-index: 10002;
background: rgba(5,47,155,0.96);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
}
.rh-search-overlay.open { opacity: 1; visibility: visible; }
.rh-search-form {
display: flex;
width: min(760px, 90%);
border-bottom: 2px solid rgba(255,255,255,0.35);
padding-bottom: 6px;
}
.rh-search-input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
outline: 0;
color: #fff;
font-size: 22px;
font-weight: 600;
padding: 14px 6px;
}
.rh-search-input::placeholder { color: rgba(255,255,255,0.55); }
.rh-search-submit {
align-self: center;
height: 50px;
margin-left: 16px;
background: var(--rh-orange);
color: #fff;
border: 0;
border-radius: 999px;
padding: 0 36px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.25s;
}
.rh-search-submit:hover { background: var(--rh-orange-dark); }
.rh-search-close {
position: absolute;
top: 22px;
right: 40px;
background: none;
border: 0;
color: #fff;
font-size: 48px;
line-height: 1;
cursor: pointer;
opacity: 0.8;
transition: all 0.25s;
}
.rh-search-close:hover { opacity: 1; color: var(--rh-orange); transform: rotate(90deg); }
@media (max-width: 1200px) {
.rh-topbar-slogan { font-size: 14px; }
.rh-topbar-item { padding: 0 14px; font-size: 14px; }
.rh-header-side { gap: 24px; }
.rh-logo img { height: 100px; }
.rh-contact-wa { width: 46px; height: 46px; }
.rh-contact-wa svg { width: 26px; height: 26px; }
.rh-contact-label { font-size: 12.5px; }
.rh-contact-phone { font-size: 18px; }
.rh-quote-btn { font-size: 16px; padding: 8px 12px; }
.rh-nav-link { font-size: 14.5px; padding: 0 20px; letter-spacing: 0.6px; }
.rh-nav > li.has-child > .rh-nav-link { padding-right: 34px; }
.rh-nav > li.has-child > .rh-nav-link::after { right: 15px; }
}
/* .rh-header-main 默认隐藏，仅 ≤1024px 显示 */
.rh-header-main { display: none; }
@media (max-width: 1024px) {
.rh-header-main { display: block; }
.rh-topbar { display: none; }
.rh-navbar { display: none; }
.rh-header-contact { display: none; }
.rh-quote-btn { display: none; }
.rh-mobile-toggle { display: flex; }
.rh-main-inner { padding: 12px 0; }
.rh-logo img { height: 74px; }
}
@media (max-width: 767px) {
.rh-search-close { top: 16px; right: 20px; font-size: 40px; }
.rh-search-input { font-size: 17px; }
.rh-search-submit { padding: 0 22px; height: 44px; font-size: 14px; }
}
/* Mega Menu - Products */
.rh-mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
background: #fff;
border-radius: 0 0 var(--rh-radius-lg) var(--rh-radius-lg);
box-shadow: var(--rh-shadow-lg);
opacity: 0;
visibility: hidden;
transition: all var(--rh-transition);
z-index: 100;
}
.rh-nav > li:hover .rh-mega,
.rh-nav > li:focus-within .rh-mega,
.rh-nav > li > .rh-nav-link:hover ~ .rh-mega {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.rh-mega-products {
width: min(1280px, calc(100vw - 48px));
padding: 28px 32px 32px;
}
.rh-mega-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 20px;
border-bottom: 1px solid var(--rh-border-light);
}
.rh-mega-eyebrow {
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--rh-teal);
}
.rh-mega-all {
font-size: 13px;
font-weight: 700;
color: var(--rh-text-dark);
}
.rh-mega-all:hover { color: var(--rh-orange); }
.rh-mega-grid5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.rh-mega-col {
display: flex;
flex-direction: column;
}
.rh-mega-img {
position: relative;
display: block;
aspect-ratio: 4/3;
border-radius: var(--rh-radius);
overflow: hidden;
margin-bottom: 14px;
background: var(--rh-bg-gray);
box-shadow: var(--rh-shadow-sm);
}
.rh-mega-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.rh-mega-img:hover img { transform: scale(1.08); }
.rh-mega-name {
position: absolute;
left: 0; right: 0; bottom: 0;
display: block;
padding: 10px 12px 8px;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%);
color: #fff;
font-size: 13px;
font-weight: 800;
line-height: 1.25;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.rh-mega-sub {
list-style: none;
margin: 0;
padding: 0 4px;
display: flex;
flex-direction: column;
gap: 2px;
}
.rh-mega-sub li a {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 0;
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
color: var(--rh-text-body);
border-bottom: 1px solid var(--rh-border-light);
transition: all var(--rh-transition);
}
.rh-mega-sub li a::before {
content: '›';
color: var(--rh-orange);
font-weight: 800;
font-size: 16px;
line-height: 1;
}
.rh-mega-sub li:last-child a { border-bottom: none; }
.rh-mega-sub li a:hover {
color: var(--rh-orange-dark);
padding-left: 6px;
}
@media (max-width: 1280px) {
.rh-mega-products { width: min(1100px, calc(100vw - 32px)); padding: 24px; }
.rh-mega-grid5 { gap: 14px; }
.rh-mega-sub li a { font-size: 12px; padding: 5px 0; }
}
@media (max-width: 1024px) {
.rh-mega-products {
width: calc(100vw - 24px);
padding: 18px;
}
.rh-mega-grid5 {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 767px) {
.rh-mega { display: none; }
}
/* Simple Dropdown */
.rh-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #fff;
border-radius: 0 0 var(--rh-radius) var(--rh-radius);
box-shadow: var(--rh-shadow);
padding: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: all var(--rh-transition);
list-style: none;
margin: 0;
}
.rh-nav > li:hover > .rh-dropdown,
.rh-nav > li:focus-within > .rh-dropdown,
.rh-nav > li > .rh-nav-link:hover ~ .rh-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.rh-dropdown a {
display: block;
padding: 10px 16px;
font-family: "Gilroy", Gilroy, Helvetica, Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--rh-text-body);
border-radius: var(--rh-radius-sm);
}
.rh-dropdown a:hover {
background: #fef5fa;
color: var(--rh-orange-dark);
}
/* ==========================================================================
HERO - Full-width Banner Carousel
========================================================================== */
.rh-hero {
position: relative;
min-height: max(520px, calc(100vh - 502px));
overflow: hidden;
background: #052f9b;
}
.rh-hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
display: flex;
align-items: center;
}
.rh-hero-slide.active { opacity: 1; z-index: 2; }
.rh-hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.rh-hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(26,26,46,0.85) 0%, rgba(26,26,46,0.55) 45%, rgba(26,26,46,0.25) 100%);
}
.rh-hero-content {
position: relative;
z-index: 3;
max-width: var(--rh-maxw);
margin: 0 auto;
padding: 0 24px;
width: 100%;
color: #fff;
}
.rh-hero-eyebrow {
display: inline-block;
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: #c7dbfb;
padding: 8px 22px;
background: rgba(51,114,231,0.20);
border: 1px solid rgba(155,193,246,0.45);
border-radius: 999px;
margin-bottom: 28px;
}
.rh-hero-title {
font-size: clamp(26px, 6vw, 52px);
font-weight: 800;
line-height: 1.15;
margin: 0 0 24px;
max-width: 800px;
}
.rh-hero-desc {
font-size: clamp(15px, 1.6vw, 19px);
line-height: 1.7;
max-width: 560px;
margin: 0 0 40px;
opacity: 0.9;
}
.rh-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
/* Hero Nav Arrows */
.rh-hero-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.25);
color: #fff;
width: 54px; height: 54px;
border-radius: 50%;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 22px;
transition: all var(--rh-transition);
}
.rh-hero-nav:hover {
background: #ff2093;
border-color: #ff2093;
transform: translateY(-50%) scale(1.08);
}
.rh-hero-prev { left: 28px; }
.rh-hero-next { right: 28px; }
/* Hero Dots */
.rh-hero-dots {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 12px;
}
.rh-hero-dot {
width: 44px; height: 4px;
background: rgba(255,255,255,0.3);
border-radius: 999px;
cursor: pointer;
transition: all var(--rh-transition);
border: none;
padding: 0;
}
.rh-hero-dot.active {
background: #ff2093;
width: 64px;
}
/* ==========================================================================
FEATURES BAR (below hero)
========================================================================== */
.rh-features {
background: linear-gradient(135deg, #eaf2ff 0%, #dbe6ff 100%);
padding: 20px 0;
position: relative;
z-index: 5;
overflow: hidden;
}
.rh-features::before,
.rh-features::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 60px;
pointer-events: none;
z-index: 6;
}
.rh-features::before {
left: 0;
background: linear-gradient(to right, #eaf2ff, transparent);
}
.rh-features::after {
right: 0;
background: linear-gradient(to left, #eaf2ff, transparent);
}
.rh-features-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.rh-feature {
display: flex;
align-items: center;
gap: 16px;
padding: 15px 15px;
background: #fff;
border-radius: 16px;
border: 1px solid rgba(5,47,155,.10);
box-shadow: 0 4px 16px rgba(5,47,155,.06);
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
white-space: nowrap;
}
.rh-feature:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(5,47,155,.14);
border-color: rgba(5,47,155,.25);
}
.rh-feature-icon {
width: 40px; height: 40px;
border-radius: 14px;
background: linear-gradient(135deg, #052f9b, #3372e7);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
color: #fff;
box-shadow: 0 6px 16px rgba(5,47,155,.22);
transition: transform .28s ease, box-shadow .28s ease;
}
.rh-feature:hover .rh-feature-icon {
transform: scale(1.08);
box-shadow: 0 10px 22px rgba(5,47,155,.32);
}
.rh-feature-icon svg { width: 20px; height: 20px; }
.rh-feature-text {
font-size: 17px;
font-weight: 700;
color: #052f9b;
letter-spacing: .2px;
}
/* 桌面/平板只显示第一行 5 项，复制的后 5 项仅手机 marquee 使用 */
@media (min-width: 768px) {
.rh-features-grid > .rh-feature:nth-child(n+6) { display: none; }
}
/* ==========================================================================
ABOUT / COMPANY INTRO
========================================================================== */
.rh-about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.rh-about-img {
position: relative;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--rh-shadow-lg);
}
.rh-about-img img { width: 100%; height: 100%; object-fit: cover; }
.rh-about-img-badge {
position: absolute;
bottom: -24px; right: -24px;
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
color: #fff;
padding: 28px 32px;
border-radius: var(--rh-radius-lg);
box-shadow: var(--rh-shadow-lg);
}
.rh-about-img-badge strong {
display: block;
font-size: 36px;
font-weight: 800;
line-height: 1;
}
.rh-about-img-badge span {
font-size: 13px;
opacity: 0.9;
letter-spacing: 1px;
}
.rh-about-text .rh-section-title { text-align: left; }
.rh-about-desc {
font-size: 16px;
color: var(--rh-text-body);
line-height: 1.8;
margin-bottom: 30px;
}
.rh-about-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 36px;
}
.rh-stat {
text-align: center;
padding: 24px 16px;
background: #f4f8ff;
border-radius: var(--rh-radius);
}
.rh-stat-num {
font-size: 32px;
font-weight: 800;
color: var(--rh-secondary);
line-height: 1;
}
.rh-stat-label {
font-size: 12px;
font-weight: 600;
color: var(--rh-text-light);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 6px;
}
/* ==========================================================================
PRODUCTS - Showcase
========================================================================== */
.rh-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.rh-product-card {
background: #fff;
border-radius: var(--rh-radius-lg);
overflow: hidden;
transition: all var(--rh-transition);
border: 1px solid var(--rh-border-light);
}
.rh-product-card:hover {
transform: translateY(-8px);
box-shadow: var(--rh-shadow-lg);
border-color: var(--rh-primary-200);
}
.rh-product-img {
aspect-ratio: 1/1;
background: var(--rh-bg-gray);
overflow: hidden;
position: relative;
}
.rh-product-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.rh-product-card:hover .rh-product-img img { transform: scale(1.08); }
.rh-product-body { padding: 22px; text-align: center; }
.rh-product-title {
font-size: 16px;
font-weight: 700;
color: var(--rh-text-dark);
margin: 0 0 4px;
line-height: 1.4;
}
.rh-product-title a { color: inherit; }
.rh-product-title a:hover { color: var(--rh-primary); }
/* ==========================================================================
PRODUCTS - Hotspot Grid (ref: gsyuan.com)
========================================================================== */
.rh-hot-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.rh-hot-card {
position: relative;
display: block;
overflow: hidden;
background: var(--rh-primary-50);
text-decoration: none !important;
}
.rh-hot-card:nth-child(1) {
grid-column: span 4;
aspect-ratio: 2 / 1;
}
.rh-hot-card:nth-child(2) {
grid-column: span 2;
aspect-ratio: 1 / 1;
}
.rh-hot-card:nth-child(3),
.rh-hot-card:nth-child(4),
.rh-hot-card:nth-child(5) {
grid-column: span 2;
aspect-ratio: 1 / 1;
}
/* Gradient backgrounds — unified blue family (per user: no red, use last card as standard) */
.rh-hot-bg {
position: absolute;
inset: 0;
transition: transform 0.7s ease;
}
.rh-hot-card:nth-child(1) .rh-hot-bg,
.rh-hot-card:nth-child(2) .rh-hot-bg,
.rh-hot-card:nth-child(3) .rh-hot-bg,
.rh-hot-card:nth-child(4) .rh-hot-bg,
.rh-hot-card:nth-child(5) .rh-hot-bg {
background: linear-gradient(135deg, #EAF2FF 0%, #C7DBFB 60%, #9BC1F6 100%);
}
/* Decorative dashed ring */
.rh-hot-card::before {
content: '';
position: absolute;
width: 70%;
aspect-ratio: 1;
left: -12%;
bottom: -22%;
border: 2px dashed rgba(51,114,231,0.18);
border-radius: 50%;
transition: transform 0.7s ease;
}
.rh-hot-card:hover .rh-hot-bg { transform: scale(1.04); }
.rh-hot-card:hover::before { transform: rotate(20deg) scale(1.08); }
/* Product render image */
.rh-hot-product {
position: absolute;
left: 3%;
bottom: 5%;
height: auto;
width: auto;
max-height: 70%;
max-width: 98%;
object-fit: contain;
z-index: 2;
filter: drop-shadow(0 14px 24px rgba(5,47,155,0.22));
transition: transform 0.7s cubic-bezier(.18,.89,.32,1.28);
}
.rh-hot-card:nth-child(1) .rh-hot-product {
left: 7%;
bottom: 0;
height: 88%;
max-height: none;
max-width: 38%;
}
.rh-hot-card:hover .rh-hot-product { transform: translateY(-6px) rotate(-2deg); }
.rh-hot-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 45%);
transition: background var(--rh-transition);
}
.rh-hot-card:hover .rh-hot-overlay {
background: linear-gradient(180deg, rgba(51,114,231,0.10) 0%, rgba(51,114,231,0) 55%);
}
.rh-hot-info {
position: absolute;
top: 7%;
right: 5%;
text-align: right;
z-index: 3;
max-width: 53%;
}
.rh-hot-en {
margin: 0 0 6px;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0.5px;
color: var(--rh-teal);
}
.rh-hot-name {
margin: 0 0 12px;
font-size: 24px;
font-weight: 800;
line-height: 1.25;
color: var(--rh-text-dark);
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.rh-hot-card:nth-child(1) .rh-hot-en { font-size: 18px; }
.rh-hot-card:nth-child(1) .rh-hot-name { font-size: 34px; margin-bottom: 18px; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-en { font-size: 13px; margin-bottom: 4px; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-name { font-size: 21px; margin-bottom: 10px; line-height: 1.2; }
.rh-hot-btn {
display: inline-block;
padding: 9px 22px;
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
color: #fff !important;
font-size: 13px;
font-weight: 700;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(51,114,231,0.28);
transition: all var(--rh-transition);
}
.rh-hot-card:nth-child(1) .rh-hot-btn { padding: 12px 30px; font-size: 15px; }
.rh-hot-card:hover .rh-hot-btn {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(51,114,231,0.42);
}
/* ==========================================================================
SHOP BY CATEGORY (home #products — cat-* card)
========================================================================== */
.cat-section{
position:relative; overflow:hidden;
background:linear-gradient(180deg,#ffffff 0%,#f2f5fc 100%);
padding:84px 0 96px;
}
.cat-section::before{
content:''; position:absolute; top:-140px; left:-160px; width:440px; height:440px;
border-radius:50%;
/* background:radial-gradient(circle, rgba(51,114,231,.10), transparent 62%); */
}
.cat-section::after{
content:''; position:absolute; bottom:-180px; right:-150px; width:430px; height:430px;
border-radius:50%;
/* background:radial-gradient(circle, rgba(232,57,124,.09), transparent 62%); */
}
.cat-wrap{ position:relative; max-width:1280px; margin:0 auto; padding:0 28px; }
.cat-head{ text-align:center; margin-bottom:52px; }
.cat-kicker{
display:inline-flex; align-items:center; gap:10px;
font-size:15px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:#e8397c; margin-bottom:14px;
}
.cat-kicker::before, .cat-kicker::after{ content:''; width:30px; height:2px; background:#e8397c; }
.cat-head h2{
font-size:clamp(34px,4vw,48px); font-weight:800; letter-spacing:-.02em;
color:#052f9b; line-height:1.15;
}
.cat-head h2 em{ font-style:normal; color:#e8397c; }
.cat-head p{ max-width:760px; margin:14px auto 0; font-size:18px; color:#5b6b85; line-height:1.7; }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cat-card{
position:relative; background:#fff; border-radius:18px; overflow:hidden;
border:1px solid #e6ebf5;
box-shadow:0 14px 36px -22px rgba(5,47,155,.28);
transition:transform .28s ease, box-shadow .28s ease;
display:flex; flex-direction:column; text-decoration:none !important;
}
.cat-card:hover{ transform:translateY(-7px); box-shadow:0 26px 52px -24px rgba(5,47,155,.38); }
.cat-media{
position:relative; height:270px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(160deg,#eaf1fc 0%,#f8fafd 75%);
padding:24px; overflow:hidden;
}
.cat-media img{
max-width:82%; max-height:100%; height:auto; object-fit:contain;
filter:drop-shadow(0 18px 30px rgba(5,47,155,.20));
transition:transform .4s ease;
}
.cat-card:hover .cat-media img{ transform:scale(1.07); }
.cat-count{
position:absolute; top:14px; left:14px;
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:#052f9b; background:rgba(255,255,255,.9); border:1px solid #e6ebf5;
padding:5px 11px; border-radius:20px;
}
.cat-index{
position:absolute; right:10px; bottom:0; z-index:1;
font-size:80px; font-weight:800; line-height:1; color:rgba(5,47,155,.07);
pointer-events:none;
}
.cat-card:nth-child(2n) .cat-index{ color:rgba(232,57,124,.08); }
.cat-body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.cat-body h3{ font-size:23px; font-weight:800; color:#052f9b; line-height:1.25; margin-bottom:8px; }
.cat-body p{ font-size:15px; color:#5b6b85; line-height:1.65; margin-bottom:18px; }
.cat-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid #e6ebf5; }
.cat-link{
display:inline-flex; align-items:center; gap:7px;
font-size:14px; font-weight:700; color:#3372e7; text-decoration:none;
transition:color .2s ease;
}
.cat-link:hover{ color:#e8397c; }
.cat-link svg{ width:15px; height:15px; transition:transform .2s ease; }
.cat-link:hover svg{ transform:translateX(3px); }
.cat-bottom{ text-align:center; margin-top:52px; }
.cat-cta{
display:inline-block; background:linear-gradient(100deg,#052f9b,#3372e7);
color:#fff; font-size:16px; font-weight:700; text-decoration:none;
padding:15px 44px; border-radius:40px; letter-spacing:.02em;
box-shadow:0 16px 38px -14px rgba(5,47,155,.5);
transition:transform .2s ease, box-shadow .2s ease;
}
.cat-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -14px rgba(5,47,155,.55); }
/* ==========================================================================
FEATURED PRODUCTS (lists_product / lists_product_home — fp-* card)
========================================================================== */
.fp-section{
position:relative; overflow:hidden;
background:linear-gradient(180deg,#eef2fc 0%,#f7f9fd 100%);
padding:72px 0 84px;
}
.fp-section::before{
content:''; position:absolute; top:-160px; right:-160px; width:460px; height:460px;
border-radius:50%; background:radial-gradient(circle, rgba(232,57,124,.10), transparent 62%);
}
.fp-section::after{
content:''; position:absolute; bottom:-200px; left:-140px; width:420px; height:420px;
border-radius:50%; background:radial-gradient(circle, rgba(51,114,231,.10), transparent 62%);
}
.fp-wrap{ position:relative; max-width:1280px; margin:0 auto; padding:0 28px; }
.fp-head{ text-align:center; margin-bottom:48px; }
.fp-kicker{
display:inline-flex; align-items:center; gap:10px;
font-size:15px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
color:#e8397c; margin-bottom:14px;
}
.fp-kicker::before, .fp-kicker::after{ content:''; width:30px; height:2px; background:#e8397c; }
.fp-head h2{
font-size:clamp(30px,3.6vw,42px); font-weight:800; letter-spacing:-.02em;
color:#052f9b; line-height:1.15; margin-bottom:14px;
}
.fp-head h2 em{ font-style:normal; color:#e8397c; }
.fp-head p{ max-width:640px; margin:0 auto; font-size:17px; color:#5b6b85; line-height:1.7; }
.fp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.fp-card{
position:relative; background:#fff; border-radius:18px; overflow:hidden;
border:1px solid #e6ebf5;
box-shadow:0 14px 36px -22px rgba(5,47,155,.28);
transition:transform .28s ease, box-shadow .28s ease;
display:flex; flex-direction:column; text-decoration:none !important;
}
.fp-card:hover{ transform:translateY(-7px); box-shadow:0 26px 52px -24px rgba(5,47,155,.38); }
.fp-media{
position:relative; height:250px; display:flex; align-items:center; justify-content:center;
background:linear-gradient(160deg,#eef3fc 0%,#f8fafd 70%);
padding:22px;
}
.fp-media img{
max-width:88%; max-height:100%; height:auto; object-fit:contain;
filter:drop-shadow(0 18px 30px rgba(5,47,155,.20));
transition:transform .35s ease;
}
.fp-card:hover .fp-media img{ transform:scale(1.06); }
.fp-tag{
position:absolute; top:14px; left:14px; z-index:2;
font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
color:#fff; padding:5px 11px; border-radius:20px; background:#e8397c;
}
.fp-tag.blue{ background:#052f9b; }
.fp-tag.steel{ background:#3372e7; }
.fp-index{
position:absolute; right:10px; bottom:2px; z-index:2;
font-size:64px; font-weight:800; line-height:1; color:rgba(5,47,155,.07);
font-family:inherit; pointer-events:none;
}
.fp-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.fp-cat{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#3372e7; margin-bottom:7px; }
.fp-body h3{ font-size:21px; font-weight:800; color:#052f9b; line-height:1.3; margin-bottom:10px; }
.fp-specs{ list-style:none; margin:0 0 18px; padding:0; }
.fp-specs:empty{ display:none; }
.fp-specs > li,
.fp-specs > p{
display:flex; gap:8px; font-size:14px; color:#5b6b85; line-height:1.55; padding:2px 0; margin:0;
}
.fp-specs > li::before,
.fp-specs > p::before{
content:''; flex:0 0 6px; width:6px; height:6px; border-radius:50%;
background:#e8397c; margin-top:7px;
}
.fp-specs p{ margin:0 !important; padding:0; }
.fp-specs p li{ margin:0; padding:0; display:flex; gap:8px; font-size:14px; color:#5b6b85; line-height:1.55; }
.fp-specs p li::before{ content:''; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:#e8397c; margin-top:7px; }
/* 默认规格（JS 注入） */
.fp-specs.is-default{ margin-top:6px; }
.fp-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:14px; border-top:1px solid #e6ebf5; }
.fp-btn{
display:inline-flex; align-items:center; gap:7px;
background:#052f9b; color:#fff; text-decoration:none;
font-size:14px; font-weight:700; padding:10px 20px; border-radius:9px;
transition:background .2s ease;
}
.fp-btn:hover{ background:#e8397c; }
.fp-btn svg{ width:15px; height:15px; }
.fp-more{ font-size:13px; font-weight:700; color:#3372e7; text-decoration:none; letter-spacing:.02em; }
.fp-more:hover{ color:#e8397c; }
.fp-bottom{ text-align:center; margin-top:48px; }
.fp-cta{
display:inline-block; background:linear-gradient(100deg,#052f9b,#3372e7);
color:#fff; font-size:16px; font-weight:700; text-decoration:none;
padding:15px 44px; border-radius:40px; letter-spacing:.02em;
box-shadow:0 16px 38px -14px rgba(5,47,155,.5);
transition:transform .2s ease, box-shadow .2s ease;
}
.fp-cta:hover{ transform:translateY(-2px); box-shadow:0 22px 44px -14px rgba(5,47,155,.55); }
/* RESPONSIVE — cat & fp blocks */
@media (max-width:1080px){
.cat-section{ padding:68px 0 76px; }
.cat-wrap, .fp-wrap{ padding:0 24px; }
.cat-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
.fp-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
.cat-media{ height:240px; }
.fp-media{ height:230px; }
}
@media (max-width:640px){
.cat-section, .fp-section{ padding:52px 0 60px; }
.cat-head, .fp-head{ margin-bottom:40px; }
.cat-grid, .fp-grid{ grid-template-columns:1fr; }
.cat-media, .fp-media{ height:220px; }
.cat-head h2, .fp-head h2{ font-size:28px; }
}
/* ==========================================================================
CTA BANNER
========================================================================== */
.rh-cta-banner {
position: relative;
padding: 80px 0;
overflow: hidden;
background: #1a1a2e;
}
.rh-cta-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0.45) saturate(0.9);
}
.rh-cta-bg::after {
content: '';
position: absolute;
inset: 0;
background:linear-gradient(90deg, rgb(146 137 218 / 8%) 0%, rgb(185 164 172 / 5%) 40%, rgb(40 40 215 / 10%) 100%)
}
.rh-cta-banner .rh-container {
position: relative;
z-index: 2;
}
.rh-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.rh-cta-text {
flex: 1;
}
.rh-cta-text h2 {
font-size: 42px;
font-weight: 800;
color: #fff;
margin: 0 0 14px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.rh-cta-text p {
font-size: 18px;
color: rgba(255,255,255,0.9);
margin: 0;
line-height: 1.6;
}
.rh-cta-text p strong {
color: #fff;
font-weight: 700;
font-size: 20px;
}
.rh-cta-btn {
flex-shrink: 0;
}
.rh-cta-btn .rh-btn-primary {
background: linear-gradient(135deg, #fff 0%, #fff7fb 100%);
color: var(--rh-primary) !important;
box-shadow: 0 1px 1px rgba(207,57,124,0.45);
font-size: 16px;
padding: 18px 44px;
}
.rh-cta-btn .rh-btn-primary:hover {
background: linear-gradient(135deg, #fff 0%, #fef4f8 100%);
transform: translateY(-3px);
box-shadow: 0 1px 1px rgba(232,57,124,0.55);
}
@media (max-width: 1024px) {
.rh-cta-text h2 { font-size: 34px; }
.rh-cta-inner { gap: 28px; }
}
@media (max-width: 768px) {
.rh-cta-banner { padding: 60px 0; }
.rh-cta-inner { flex-direction: column; text-align: center; }
.rh-cta-text h2 { font-size: 28px; }
.rh-cta-text p { font-size: 16px; }
.rh-cta-btn .rh-btn-primary { padding: 14px 32px; font-size: 15px; }
}
/* ==========================================================================
SERVICES / SOLUTIONS (Accordion)
========================================================================== */
.rh-service {
padding: 100px 0;
background: var(--rh-bg-soft);
}
.rh-service-list { margin-top: 16px; }
.rh-service-list ul {
display: flex;
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
height: 480px;
}
.rh-service-card {
position: relative;
flex: 0 0 265px;
border-radius: 16px;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
transition: flex-basis 0.5s cubic-bezier(.22,.61,.36,1);
box-shadow: 0 8px 24px rgba(26,26,46,0.08);
}
.rh-service-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.75) 100%);
transition: background 0.4s ease;
}
.rh-service-card.active {
flex: 0 0 480px;
box-shadow: 0 16px 40px rgba(26,32,44,0.18);
}
.rh-service-card.active::before {
background: linear-gradient(180deg, rgba(5,47,155,0.35) 0%, rgba(5,47,155,0.62) 45%, #052f9b 100%);
}
.rh-service-head {
position: absolute;
left: 24px;
right: 24px;
bottom: 28px;
z-index: 3;
color: #fff;
transition: all 0.4s ease;
}
.rh-service-head h3 {
font-size: 18px;
font-weight: 700;
margin: 0 0 4px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rh-service-head span {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: rgba(255,255,255,0.85);
font-weight: 500;
opacity: 0.7;
}
.rh-service-head span i {
font-style: normal;
font-size: 14px;
transition: transform 0.3s ease;
}
.rh-service-card:hover .rh-service-head span i {
transform: translateX(4px);
}
.rh-service-body {
position: absolute;
inset: 0;
z-index: 4;
padding: 40px 36px;
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease 0.15s;
}
.rh-service-card.active .rh-service-body {
opacity: 1;
pointer-events: auto;
transition: opacity 0.4s ease 0.2s;
}
.rh-service-body h3 {
font-size: 28px;
font-weight: 800;
color: #fff;
margin: 0 0 14px;
line-height: 1.25;
}
.rh-service-desc {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.rh-service-desc p {
font-size: 15px;
color: rgba(255,255,255,0.9);
margin: 0 0 16px;
line-height: 1.65;
}
.rh-service-desc span {
display: inline-flex;
align-items: center;
gap: 6px;
align-self: flex-end;
font-size: 14px;
font-weight: 600;
color: #fff;
padding: 10px 22px;
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(232,57,124,0.35);
transition: all 0.28s ease;
}
.rh-service-desc span i {
font-style: normal;
transition: transform 0.28s ease;
}
.rh-service-desc span:hover {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(232,57,124,0.48);
}
.rh-service-desc span:hover i { transform: translateX(3px); }
.rh-service-url {
position: absolute;
inset: 0;
z-index: 5;
text-indent: -9999px;
overflow: hidden;
}
@media (max-width: 1280px) {
.rh-service { padding: 80px 0; }
.rh-service-list ul { height: 400px; gap: 12px; }
.rh-service-card { flex: 0 0 220px; }
.rh-service-card.active { flex: 0 0 380px; }
.rh-service-body h3 { font-size: 22px; }
}
@media (max-width: 1024px) {
.rh-service-list ul { flex-wrap: wrap; height: auto; }
.rh-service-card,
.rh-service-card.active {
flex: 0 0 calc(50% - 6px);
height: 280px;
}
.rh-service-card.active .rh-service-body { opacity: 1; }
.rh-service-body { padding: 28px 24px; }
.rh-service-head { left: 20px; right: 20px; bottom: 22px; }
}
@media (max-width: 768px) {
.rh-service { padding: 60px 0; }
.rh-service-list ul { gap: 12px; }
.rh-service-card,
.rh-service-card.active {
flex: 0 0 100%;
height: 240px;
}
.rh-service-body { padding: 22px 18px; }
.rh-service-head { left: 16px; right: 16px; bottom: 18px; }
.rh-service-head h3 { font-size: 16px; }
.rh-service-body h3 { font-size: 20px; }
.rh-service-desc p { font-size: 13px; margin-bottom: 12px; }
.rh-service-desc span { font-size: 13px; padding: 8px 18px; }
}
/* ==========================================================================
WHY US / OUR ADVANTAGES
========================================================================== */
.rh-why-full .rh-container {
max-width: none;
padding: 0 40px;
}
.rh-why-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.rh-why-card {
background: #fff;
border-radius: var(--rh-radius-lg);
padding: 40px;
border: 1px solid var(--rh-border-light);
transition: all var(--rh-transition);
position: relative;
overflow: hidden;
isolation: isolate;
}
.rh-why-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 0;
background: linear-gradient(180deg, var(--rh-secondary) 0%, #9bc1f6 100%);
transition: height 0.5s ease;
z-index: 2;
}
.rh-why-card::after {
content: '';
position: absolute;
inset: 0;
background-image: url('/template/pc/static/image/whybanner.png');
background-size: cover;
background-position: center;
opacity: 0.08;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}
.rh-why-card:hover {
transform: translateY(-6px);
box-shadow: var(--rh-shadow);
border-color: #c7dbfb;
}
.rh-why-card:hover::before { height: 100%; }
.rh-why-card:hover::after { opacity: 0.15; }
.rh-why-icon {
width: 64px; height: 64px;
border-radius: 18px;
background: linear-gradient(135deg, #f4f8ff 0%, #eaf2ff 100%);
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
position: relative;
z-index: 3;
}
.rh-why-icon svg { width: 32px; height: 32px; color: var(--rh-secondary); }
.rh-why-title {
font-size: 22px;
font-weight: 800;
color: var(--rh-text-dark);
margin: 0 0 12px;
position: relative;
z-index: 3;
}
.rh-why-desc {
font-size: 15px;
color: var(--rh-text-body);
line-height: 1.7;
margin: 0 0 18px;
position: relative;
z-index: 3;
}
.rh-why-list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
z-index: 3;
}
.rh-why-list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--rh-text-body);
}
.rh-why-list li::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rh-primary);
flex-shrink: 0;
}
@media (max-width: 768px) {
.rh-why-grid { grid-template-columns: 1fr; gap: 16px; }
.rh-why-full .rh-container { padding: 0 16px; }
.rh-why-card { padding: 28px; }
}
/* ==========================================================================
WHY CHOOSE US + OUR TESTIMONIAL (Combined - petreatsmachine style)
========================================================================== */
.rh-why-pm { position: relative; }
.rh-why-pm-top {
padding: 100px 0;
background-color: #f7f9fc;
/* background-image: url('../image/banner_bg.jpg'); */
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.rh-why-pm-top::before {
content: '';
position: absolute;
inset: 0;
background: rgba(247,249,252,0.87);
z-index: 0;
}
.rh-why-pm-top > .rh-container { position: relative; z-index: 1; }
.rh-why-pm-btm {
padding: 80px 0;
background-color: #052f9b;
background-image: url('../image/banner_bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.rh-why-pm-btm::before {
content: '';
position: absolute;
inset: 0;
background: rgba(5,47,155,0.87);
z-index: 0;
}
.rh-why-pm-btm > .rh-container { position: relative; z-index: 1; }
/* ---- Why Choose Us: single pre-made bento image, stretches to match right column ---- */
.rh-wcu-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
align-items: stretch;
}
.rh-wcu-imgs {
width: 100%;
height: 100%;
border-radius: 12px;
overflow: hidden;
line-height: 0;
min-height: 0;
margin-top: -45px;
}
.rh-wcu-imgs > img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rh-wcu-text {
position: relative;
display: flex;
flex-direction: column;
}
.rh-wcu-text > .rh-btn-primary {
margin-top: 24px;
margin-left: 0;
align-self: flex-start;
}
.rh-wcu-desc {
font-size: 15px;
color: var(--rh-text-body);
line-height: 1.7;
margin: 0 0 24px;
}
.rh-wcu-stats {
display: flex;
gap: 0;
margin: 0 0 24px;
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
overflow: hidden;
}
.rh-wcu-stat {
flex: 1;
text-align: center;
padding: 18px 12px;
position: relative;
}
.rh-wcu-stat + .rh-wcu-stat::before {
content: '';
position: absolute;
left: 0;
top: 22%;
bottom: 22%;
width: 1px;
background: rgba(15,23,42,.08);
}
.rh-wcu-stat strong {
display: block;
font-size: 26px;
font-weight: 800;
color: #052f9b;
line-height: 1.2;
margin-bottom: 4px;
}
.rh-wcu-stat span {
display: block;
font-size: 12.5px;
color: var(--rh-text-body);
line-height: 1.4;
}
@media (max-width: 768px) {
.rh-wcu-stat { padding: 14px 8px; }
.rh-wcu-stat strong { font-size: 20px; }
.rh-wcu-stat span { font-size: 11.5px; }
}
.rh-wcu-list {
list-style: none;
padding: 24px 28px;
margin: 28px 0 0;
display: flex;
flex-direction: column;
gap: 14px;
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.rh-wcu-list li {
position: relative;
padding-left: 28px;
font-size: 14px;
color: var(--rh-text-body);
line-height: 1.6;
}
.rh-wcu-list li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #e8397c;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 10px;
background-position: center;
background-repeat: no-repeat;
}
/* ---- Our Testimonial (dark teal bg + staggered cards) ---- */
.rh-tm-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: 40px;
align-items: start;
}
.rh-tm-eyebrow {
background: rgba(255,255,255,0.15);
color: #fff;
border: 1px solid rgba(255,255,255,0.3);
}
.rh-tm-title {
font-size: 32px;
font-weight: 800;
color: #fff;
margin: 14px 0 14px;
line-height: 1.25;
}
.rh-tm-desc {
font-size: 14px;
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin: 0 0 24px;
}
.rh-tm-btn {
border: 2px solid #fff !important;
color: #fff !important;
background: transparent !important;
}
.rh-tm-btn:hover {
background: #fff !important;
color: #052f9b !important;
}
/* Staggered testimonial cards - offset layout */
.rh-tm-cols {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
position: relative;
}
.rh-tm-card {
background: #fff;
border-radius: 18px;
padding: 32px 28px 28px;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
/* Staggered offsets - creates 错位感 */
.rh-tm-card-1 { transform: translateY(-20px); }
.rh-tm-card-2 { transform: translateY(20px); }
.rh-tm-card-3 { transform: translateY(-10px); }
.rh-tm-card-4 { transform: translateY(30px); }
.rh-tm-card:hover {
transform: translateY(0) !important;
box-shadow: 0 14px 34px rgba(0,0,0,0.22);
z-index: 10;
}
.rh-tm-quote {
position: absolute;
top: -12px;
right: 20px;
width: 40px;
height: 40px;
background: #e8397c;
color: #fff;
font-size: 28px;
font-weight: 700;
line-height: 40px;
text-align: center;
border-radius: 8px;
transform: rotate(8deg);
}
.rh-tm-text {
font-size: 14px;
color: var(--rh-text-body);
line-height: 1.75;
margin: 0 0 22px;
}
.rh-tm-meta {
display: flex;
align-items: center;
gap: 12px;
}
.rh-tm-meta strong {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--rh-text-dark);
}
.rh-tm-meta span {
font-size: 12px;
color: var(--rh-text-light);
}
.rh-tm-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 800;
flex-shrink: 0;
}
/* Combined section responsive */
@media (max-width: 1024px) {
.rh-wcu-grid { grid-template-columns: 1fr; gap: 40px; }
.rh-wcu-title { font-size: 30px; }
.rh-tm-grid { grid-template-columns: 1fr; gap: 32px; }
.rh-tm-title { font-size: 28px; }
}
@media (max-width: 768px) {
.rh-why-pm-top { padding: 72px 0; }
.rh-why-pm-btm { padding: 60px 0; }
.rh-wcu-title { font-size: 24px; }
.rh-tm-cols { grid-template-columns: 1fr; }
/* Reset staggered offsets on mobile - single column needs clean stacking */
.rh-tm-card-1, .rh-tm-card-2, .rh-tm-card-3, .rh-tm-card-4 {
transform: translateY(0) !important;
}
.rh-tm-title { font-size: 24px; }
}
/* ==========================================================================
WORK PROCESS
========================================================================== */
.rh-wp {
position: relative;
padding: 100px 0;
overflow: hidden;
}
.rh-wp-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.35);
z-index: 0;
}
.rh-wp-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(26,26,46,0.7) 0%, rgba(26,26,46,0.5) 50%, rgba(232,57,124,0.3) 100%);
background-image: url(/template/pc/static/image/oembanner.png);
background-repeat: no-repeat;
background-size: cover;
opacity: 0.63;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.rh-wp > .rh-container {
position: relative;
z-index: 2;
color: #fff;
}
.rh-wp-head {
text-align: center;
margin-bottom: 72px;
}
.rh-wp-eyebrow {
background: rgba(232,57,124,0.15);
color: var(--rh-primary-light);
border: 1px solid rgba(232,57,124,0.3);
}
.rh-wp-title {
font-size: 44px;
font-weight: 800;
color: #fff;
margin: 16px 0 0;
line-height: 1.2;
}
.rh-wp-title span {
background: linear-gradient(135deg, #fff 0%, #c7dbfb 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rh-wp-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
position: relative;
}
.rh-wp-steps::before {
content: '';
position: absolute;
top: 48px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.25) 0 10px, transparent 10px 20px);
z-index: 0;
}
.rh-wp-step {
text-align: center;
position: relative;
z-index: 1;
}
.rh-wp-circle {
position: relative;
width: 96px;
height: 96px;
border-radius: 50%;
margin: 0 auto 28px;
border: 2px dashed rgba(255,255,255,0.5);
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.05);
backdrop-filter: blur(6px);
transition: all 0.35s ease;
}
.rh-wp-circle svg {
width: 32px;
height: 32px;
color: rgba(255,255,255,0.85);
transition: color 0.35s ease;
}
.rh-wp-num {
position: absolute;
top: -8px;
right: -8px;
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
color: #fff;
font-size: 14px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(232,57,124,0.4);
z-index: 2;
}
.rh-wp-step:hover .rh-wp-circle {
border-color: var(--rh-primary);
background: rgba(232,57,124,0.15);
transform: scale(1.05);
}
.rh-wp-step:hover .rh-wp-circle svg {
color: #fff;
}
.rh-wp-step h4 {
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0 0 10px;
}
.rh-wp-step p {
font-size: 14px;
color: rgba(255,255,255,0.7);
margin: 0;
line-height: 1.6;
}
.rh-wp-cta {
text-align: center;
margin-top: 64px;
}
/* Work Process responsive */
@media (max-width: 1024px) {
.rh-wp-steps { grid-template-columns: repeat(2, 1fr); gap: 48px 32px; }
.rh-wp-steps::before { display: none; }
.rh-wp-title { font-size: 34px; }
}
@media (max-width: 768px) {
.rh-wp { padding: 72px 0; }
.rh-wp-steps { grid-template-columns: 1fr; gap: 40px; }
.rh-wp-title { font-size: 28px; }
.rh-wp-circle { width: 80px; height: 80px; }
.rh-wp-circle svg { width: 26px; height: 26px; }
.rh-wp-num { width: 28px; height: 28px; font-size: 12px; }
}
/* ==========================================================================
CERTIFICATIONS（首页：点缀小标识 + 证书图库点击放大）
========================================================================== */
.rh-cert-badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
margin-bottom: 44px;
}
.rh-cert-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--rh-border-light);
border-radius: 999px;
padding: 6px 18px 6px 6px;
transition: all var(--rh-transition);
}
.rh-cert-badge:hover { border-color: var(--rh-primary-200); box-shadow: var(--rh-shadow); }
.rh-cert-badge-img {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--rh-primary-50);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
flex: 0 0 auto;
}
.rh-cert-badge-img img { max-width: 62%; max-height: 62%; }
.rh-cert-badge-name {
font-size: 14px;
font-weight: 600;
color: var(--rh-text-dark);
white-space: nowrap;
}
/* 证书图库（参考 about 页 Certifications You Can Verify） */
.rh-certgal-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.rh-certgal-item {
background: #fff;
border-radius: var(--rh-radius);
overflow: hidden;
border: 1px solid var(--rh-border-light);
transition: transform .3s, box-shadow .3s;
cursor: zoom-in;
}
.rh-certgal-item:hover { transform: translateY(-6px); box-shadow: 0 24px 48px -16px rgba(5,47,155,.25); }
.rh-certgal-item .thumb {
width: 100%; height: 260px;
overflow: hidden;
background: #f8f9fc;
}
.rh-certgal-item .thumb img {
width: 100%; height: 100%;
object-fit: cover;
object-position: top center;
transition: transform .4s;
}
.rh-certgal-item:hover .thumb img { transform: scale(1.04); }
.rh-certgal-item .cap { padding: 16px 18px; border-top: 2px solid var(--rh-border-light); }
.rh-certgal-item .cap .ct { font-size: 18px; font-weight: 700; color: var(--rh-navy); }
.rh-certgal-item .cap .cs { font-size: 14px; color: var(--rh-muted); margin-top: 3px; }
/* 证书放大 LIGHTBOX */
.rh-cert-lightbox {
display: none;
position: fixed; inset: 0; z-index: 9999;
background: rgba(5,20,50,.92);
align-items: center; justify-content: center;
cursor: zoom-out;
padding: 40px;
}
.rh-cert-lightbox.open { display: flex; }
.rh-cert-lightbox img {
max-width: 90%; max-height: 88vh;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 40px 80px rgba(0,0,0,.5);
}
/* ==========================================================================
APPLICATION CASES (Infinite Scroll Strip)
========================================================================== */
.rh-case-strip {
padding: 80px 0 64px;
background: var(--rh-bg-gray, #f6f7f9);
overflow: hidden;
}
.rh-case-head { margin-bottom: 40px; text-align: center; }
.rh-case-scroll {
overflow: hidden;
width: 100%;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.rh-case-track {
display: flex;
gap: 24px;
width: max-content;
animation: rh-case-scroll 38s linear infinite;
}
.rh-case-scroll:hover .rh-case-track { animation-play-state: paused; }
@keyframes rh-case-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.rh-case-card {
flex: 0 0 380px;
background: #fff;
border-radius: 16px;
padding: 24px 26px;
box-shadow: 0 8px 30px rgba(15,23,42,.06);
border: 1px solid rgba(15,23,42,.05);
transition: all .3s ease;
}
.rh-case-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 40px rgba(15,23,42,.12);
border-color: var(--rh-primary-200, #fbd0e3);
}
.rh-case-top {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.rh-case-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #3372e7, #052f9b);
color: #fff;
font-weight: 700;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rh-case-top strong {
display: block;
font-size: 16px;
color: #1a202c;
margin-bottom: 4px;
}
.rh-case-stars i {
font-style: normal;
color: #3372e7;
font-size: 15px;
letter-spacing: 2px;
}
.rh-case-rows {
list-style: none;
margin: 0;
padding: 14px 0 0;
border-top: 1px dashed rgba(15,23,42,.08);
}
.rh-case-rows li {
font-size: 14px;
color: #4a4a6a;
line-height: 1.9;
}
.rh-case-rows b {
color: #1a202c;
font-weight: 600;
margin-right: 4px;
}
@media (max-width: 1024px) {
.rh-case-card { flex-basis: 320px; }
}
@media (max-width: 768px) {
.rh-case-strip { padding: 56px 0 44px; }
.rh-case-track { gap: 16px; }
.rh-case-card { flex-basis: 280px; padding: 20px; }
.rh-case-scroll { -webkit-mask-image: none; mask-image: none; }
}
/* ==========================================================================
TESTIMONIALS (Infinite Scroll Carousel)
========================================================================== */
.rh-reviews {
padding: 100px 0 80px;
background: var(--rh-bg-gray);
overflow: hidden;
}
.rh-reviews .rh-container .rh-section-head { margin-bottom: 56px; }
.rh-reviews-track {
position: relative;
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.rh-reviews-row + .rh-reviews-row { margin-top: 20px; }
.rh-reviews-row-inner {
display: inline-flex;
animation: rhReviewScrollLeft 40s linear infinite;
}
.rh-reviews-row-rev .rh-reviews-row-inner {
animation: rhReviewScrollLeft 60s linear infinite;
}
.rh-reviews-track:hover .rh-reviews-row-inner {
animation-play-state: paused;
}
@keyframes rhReviewScrollLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes rhReviewScrollRight {
0% { transform: translateX(0); }
100% { transform: translateX(50%); }
}
.rh-review-card {
flex: 0 0 340px;
margin-right: 20px;
background: #fff;
border-radius: 16px;
padding: 36px 32px;
box-shadow: 0 4px 20px rgba(26,26,46,0.06);
border: 1px solid var(--rh-border-light);
transition: all 0.28s ease;
}
.rh-review-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(232,57,124,0.1);
border-color: var(--rh-primary-100);
}
.rh-review-stars {
display: flex;
gap: 2px;
margin-bottom: 18px;
}
.rh-review-stars span {
color: #3372e7;
font-size: 18px;
letter-spacing: 2px;
}
.rh-review-text {
font-size: 15px;
line-height: 1.7;
color: var(--rh-text-body);
margin: 0 0 24px;
}
.rh-review-author {
display: flex;
align-items: center;
gap: 14px;
}
.rh-review-author h6 {
font-size: 15px;
font-weight: 700;
color: var(--rh-text-dark);
margin: 0 0 2px;
}
.rh-review-author span {
font-size: 12px;
color: var(--rh-text-light);
font-weight: 500;
}
.rh-review-avatar {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 800;
color: #fff;
letter-spacing: 0.5px;
}
.rh-av-1 { background: linear-gradient(135deg, #e8397c, #ff2093); }
.rh-av-2 { background: linear-gradient(135deg, #3372e7, #3372e7); }
.rh-av-3 { background: linear-gradient(135deg, #ff2093, #ff8fbe); }
.rh-av-4 { background: linear-gradient(135deg, #ff2093, #f9a8cc); }
.rh-av-5 { background: linear-gradient(135deg, #3372e7, #9bc1f6); }
.rh-av-6 { background: linear-gradient(135deg, #052f9b, #3372e7); }
.rh-av-7 { background: linear-gradient(135deg, #e8397c, #e8397c); }
.rh-av-8 { background: linear-gradient(135deg, #e8397c, #ff2093); }
@media (max-width: 1280px) {
.rh-review-card { flex: 0 0 300px; margin-right: 16px; padding: 30px 26px; }
}
@media (max-width: 768px) {
.rh-reviews { padding: 70px 0 50px; }
.rh-review-card { flex: 0 0 280px; margin-right: 12px; padding: 26px 22px; }
.rh-review-text { font-size: 14px; }
.rh-review-avatar { width: 42px; height: 42px; font-size: 13px; }
}
/* ==========================================================================
EXHIBITIONS
========================================================================== */
.rh-expo-featured {
position: relative;
border-radius: var(--rh-radius-xl);
overflow: hidden;
aspect-ratio: 21/9;
margin-bottom: 40px;
background-size: cover;
background-position: center;
}
.rh-expo-featured::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(26,26,46,0.88) 0%, rgba(26,26,46,0.5) 55%, rgba(26,26,46,0.2) 100%);
}
.rh-expo-featured-inner {
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px;
color: #fff;
max-width: 560px;
}
.rh-expo-featured .rh-section-eyebrow { background: rgba(255,255,255,0.15); color: #fff; }
.rh-expo-featured h3 {
font-size: 36px;
font-weight: 800;
margin: 16px 0 10px;
line-height: 1.25;
}
.rh-expo-featured p {
font-size: 15px;
opacity: 0.85;
margin: 0 0 28px;
}
.rh-expo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.rh-expo-card {
background: #fff;
border-radius: var(--rh-radius);
overflow: hidden;
border: 1px solid var(--rh-border-light);
transition: all var(--rh-transition);
}
.rh-expo-card:hover {
transform: translateY(-6px);
box-shadow: var(--rh-shadow);
border-color: var(--rh-primary-200);
}
.rh-expo-card-img {
aspect-ratio: 16/10;
overflow: hidden;
}
.rh-expo-card-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.rh-expo-card:hover .rh-expo-card-img img { transform: scale(1.08); }
.rh-expo-card-body { padding: 22px; }
.rh-expo-card-body h3 {
font-size: 16px;
font-weight: 700;
color: var(--rh-text-dark);
margin: 0;
line-height: 1.45;
}
/* ==========================================================================
VIDEO
========================================================================== */
.rh-vscroll {
overflow: hidden;
width: 100%;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.rh-vscroll-track {
display: flex;
gap: 24px;
width: max-content;
animation: rh-vscroll 32s linear infinite;
}
.rh-vscroll:hover .rh-vscroll-track {
animation-play-state: paused;
}
@keyframes rh-vscroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.rh-vcard {
flex: 0 0 360px;
background: #fff;
border-radius: var(--rh-radius-lg);
overflow: hidden;
border: 1px solid var(--rh-border-light);
box-shadow: 0 6px 20px rgba(26,26,46,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rh-vcard:hover {
transform: translateY(-6px);
box-shadow: var(--rh-shadow-lg);
}
.rh-vcard-link {
display: block;
text-decoration: none;
color: inherit;
}
.rh-vcard-img {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
}
.rh-vcard-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.rh-vcard:hover .rh-vcard-img img { transform: scale(1.06); }
.rh-vcard-free {
position: absolute;
top: 12px; left: 12px;
background: #ff2093;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
z-index: 2;
}
.rh-vcard-play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(232,57,124,0.92);
border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 2;
}
.rh-vcard-play svg {
width: 24px; height: 24px;
color: #fff;
margin-left: 3px;
}
.rh-vcard-play:hover {
transform: translate(-50%, -50%) scale(1.12);
background: var(--rh-primary);
}
.rh-vcard-title {
font-size: 16px;
font-weight: 700;
color: var(--rh-text-dark);
margin: 0;
padding: 18px 20px 22px;
line-height: 1.45;
}
/* ==========================================================================
BLOGS
========================================================================== */
.rh-blog-scroll {
overflow: hidden;
width: 100%;
position: relative;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.rh-blog-track {
display: flex;
gap: 28px;
width: max-content;
animation: rh-blog-scroll 30s linear infinite;
}
.rh-blog-scroll:hover .rh-blog-track {
animation-play-state: paused;
}
@keyframes rh-blog-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.rh-blog-card {
flex: 0 0 380px;
background: #fff;
border-radius: var(--rh-radius-lg);
overflow: hidden;
border: 1px solid var(--rh-border-light);
transition: all var(--rh-transition);
}
.rh-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--rh-shadow-lg);
border-color: var(--rh-primary-200);
}
.rh-blog-img {
aspect-ratio: 16/10;
overflow: hidden;
}
.rh-blog-img img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.rh-blog-card:hover .rh-blog-img img { transform: scale(1.08); }
.rh-blog-body { padding: 24px; }
.rh-blog-date {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--rh-text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 12px;
}
.rh-blog-date strong {
color: var(--rh-primary);
font-size: 28px;
font-weight: 800;
line-height: 1;
}
.rh-blog-title {
font-size: 17px;
font-weight: 700;
color: var(--rh-text-dark);
margin: 0 0 10px;
line-height: 1.5;
}
.rh-blog-title a { color: inherit; }
.rh-blog-title a:hover { color: var(--rh-primary); }
.rh-blog-excerpt {
font-size: 14px;
color: var(--rh-text-body);
line-height: 1.6;
margin: 0;
}
/* ==========================================================================
CONTACT FORM
========================================================================== */
#contact {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.rh-contact-wrap {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
/* 左侧解决方案卡（与 single_form.htm 一致，sf- 前缀） */
.sf-sol-card {
background: linear-gradient(160deg, #F2F6FA 0%, #E9F1FC 100%);
padding: 44px 40px;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
box-sizing: border-box;
}
.sf-sol-card .eyebrow {
font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
color: #3372e7; margin-bottom: 10px;
}
.sf-sol-card h2 {
color: #052f9b; font-size: 32px; line-height: 1.25; font-weight: 800; margin: 0 0 14px;
}
.sf-sol-card p.body { color: #6C7483; font-size: 15px; line-height: 2.2; margin: 0 0 14px; }
.sf-sol-card ul { list-style: none; margin: 8px 0 0; padding: 0; }
.sf-sol-card ul li {
display: flex; align-items: center; gap: 12px;
color: #052f9b; font-size: 17px; line-height: 3; font-weight: 400;
}
.sf-sol-card ul .tick {
color: #3372e7; font-weight: 800; font-size: 18px;
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; flex: 0 0 36px;
}
@media (max-width: 960px) {
.sf-sol-card { padding: 32px 24px; }
.sf-sol-card h2 { font-size: 26px; }
.sf-sol-card ul li { font-size: 15px; }
}
.rh-contact-form {
background: #fff;
border-radius: var(--rh-radius-xl);
padding: 44px;
box-shadow: var(--rh-shadow);
border: 1px solid var(--rh-border-light);
}
.rh-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
.rh-form-field label {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--rh-text-dark);
margin-bottom: 8px;
}
.rh-form-field input,
.rh-form-field select,
.rh-form-field textarea {
width: 100%;
padding: 14px 18px;
font-size: 15px;
font-family: inherit;
color: var(--rh-text-dark);
background: var(--rh-bg-soft);
border: 2px solid transparent;
border-radius: var(--rh-radius);
transition: all var(--rh-transition);
}
.rh-form-field input:focus,
.rh-form-field select:focus,
.rh-form-field textarea:focus {
outline: none;
background: #fff;
border-color: var(--rh-primary);
box-shadow: 0 0 0 4px var(--rh-primary-100);
}
.rh-form-field textarea { resize: vertical; min-height: 140px; }
.rh-form-field-full { margin-bottom: 18px; }
.rh-form-submit { margin-top: 28px; text-align: left; }
.rh-submit-btn {
display: inline-block;
width: auto;
padding: 17px 42px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
color: #fff;
font-size: 16px;
font-weight: 700;
font-family: inherit;
cursor: pointer;
box-shadow: 0 8px 24px rgba(232,57,124,0.30);
transition: all var(--rh-transition);
}
.rh-submit-btn:hover,
.rh-submit-btn:focus,
.rh-submit-btn:active {
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%) !important;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(232,57,124,0.42);
}
/* ==========================================================================
FOOTER
========================================================================== */
.rh-footer {
background: var(--rh-text-dark);
color: rgba(255,255,255,0.7);
padding: 80px 0 0;
}
.rh-footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 50px;
padding-bottom: 50px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.rh-footer-brand img { height: 46px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.rh-footer-brand p {
font-size: 14px;
line-height: 1.7;
margin: 0 0 24px;
max-width: 340px;
}
.rh-footer-social { display: flex; gap: 12px; }
.rh-footer-social a {
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.8);
transition: all var(--rh-transition);
}
.rh-footer-social a:hover {
background: var(--rh-primary);
color: #fff;
transform: translateY(-3px);
}
.rh-footer-social svg { width: 18px; height: 18px; }
.rh-footer-col h4 {
font-size: 15px;
font-weight: 700;
color: #fff;
margin: 0 0 20px;
}
.rh-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.rh-footer-col a {
font-size: 14px;
color: rgba(255,255,255,0.6);
transition: color var(--rh-transition);
}
.rh-footer-col a:hover { color: var(--rh-primary-light); }
.rh-footer-bottom {
padding: 22px 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: rgba(255,255,255,0.5);
}
/* ==========================================================================
PAGE BANNER (inner pages)
========================================================================== */
.rh-page-banner {
position: relative;
padding: 72px 0 64px;
background-size: cover;
background-position: center;
color: #fff;
text-align: center;
}
.rh-page-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(26,26,46,0.85) 0%, rgba(232,57,124,0.4) 100%);
}
.rh-page-banner .rh-container { position: relative; z-index: 2; }
.rh-page-banner h1 {
font-size: clamp(28px, 4vw, 48px);
font-weight: 800;
margin: 0;
line-height: 1.2;
}
.rh-breadcrumb {
font-size: 14px;
margin-top: 14px;
opacity: 0.85;
}
.rh-breadcrumb a { color: inherit; }
.rh-breadcrumb a:hover { color: var(--rh-primary-light); }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1024px) {
.rh-hero { min-height: max(460px, calc(100vh - 68px)); }
.rh-section { padding: 70px 0; }
.rh-section-title { font-size: 38px; }
.rh-features-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.rh-feature { padding: 14px 16px; gap: 12px; }
.rh-feature-icon { width: 40px; height: 40px; }
.rh-feature-icon svg { width: 20px; height: 20px; }
.rh-feature-text { font-size: 15px; }
.rh-products-grid { grid-template-columns: repeat(2, 1fr); }
.rh-hot-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rh-hot-card:nth-child(1) { grid-column: span 4; aspect-ratio: 21/9; }
.rh-hot-card:nth-child(2),
.rh-hot-card:nth-child(3),
.rh-hot-card:nth-child(4),
.rh-hot-card:nth-child(5) { grid-column: span 2; aspect-ratio: 1/1; }
.rh-certgal-grid { grid-template-columns: repeat(2, 1fr); }
.rh-about-grid { grid-template-columns: 1fr; gap: 40px; }
.rh-why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rh-why-full .rh-container { padding: 0 24px; }
.rh-expo-featured { aspect-ratio: 16/9; }
.rh-expo-featured-inner { padding: 32px; }
.rh-expo-featured h3 { font-size: 28px; }
.rh-expo-grid { grid-template-columns: repeat(2, 1fr); }
.rh-blog-card { flex: 0 0 320px; }
.rh-vcard { flex: 0 0 320px; }
.rh-contact-wrap { grid-template-columns: 1fr; gap: 40px; }
.rh-footer-top { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
.rh-container { padding: 0 18px; }
.rh-section { padding: 56px 0; }
.rh-section-head { margin-bottom: 40px; }
.rh-section-eyebrow { font-size: 11px; padding: 5px 14px; letter-spacing: 2px; }
.rh-section-title { font-size: 30px; }
.rh-section-desc { font-size: 15px; }
.rh-btn { padding: 13px 28px; font-size: 14px; }
.rh-hero { min-height: max(420px, calc(100vh - 68px)); }
.rh-hero-title { font-size: 36px; }
.rh-hero-btns { flex-direction: column; align-items: flex-start; }
.rh-hero-nav { width: 42px; height: 42px; font-size: 18px; }
.rh-hero-prev { left: 12px; }
.rh-hero-next { right: 12px; }
.rh-features {
padding: 10px 0;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.rh-features::before,
.rh-features::after { display: none; }
.rh-features-grid {
display: flex;
width: max-content;
gap: 12px;
animation: rh-feat-marquee 28s linear infinite;
}
.rh-features:hover .rh-features-grid {
animation-play-state: paused;
}
.rh-feature {
flex: 0 0 auto;
padding: 14px 18px;
gap: 12px;
min-width: 230px;
}
.rh-feature-icon { width: 44px; height: 44px; }
.rh-feature-icon svg { width: 24px; height: 24px; }
.rh-feature-text { font-size: 15px; }
.rh-about-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.rh-about-stats .rh-stat:last-child { grid-column: 1 / -1; }
.rh-stat { padding: 18px 10px; }
.rh-stat-num { font-size: 22px; }
.rh-stat-label { font-size: 11px; letter-spacing: 0.6px; }
.rh-products-grid { grid-template-columns: 1fr; gap: 16px; }
.rh-product-body { padding: 18px; }
.rh-hot-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.rh-hot-card:nth-child(1) { grid-column: span 2; aspect-ratio: 16/10; }
.rh-hot-card:nth-child(2),
.rh-hot-card:nth-child(3),
.rh-hot-card:nth-child(4),
.rh-hot-card:nth-child(5) { grid-column: span 1; aspect-ratio: 1/1; }
.rh-hot-info { top: 5%; right: 5%; max-width: 72%; }
.rh-hot-en { font-size: 10px; margin-bottom: 3px; }
.rh-hot-name { font-size: 15px; margin-bottom: 7px; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-en { display: none; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-name { font-size: 13px; margin-bottom: 8px; line-height: 1.25; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-info { max-width: 56%; top: 10%; }
.rh-hot-btn { padding: 5px 12px; font-size: 10px; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-btn { padding: 5px 11px; font-size: 10px; }
.rh-hot-card:nth-child(1) .rh-hot-en { font-size: 13px; }
.rh-hot-card:nth-child(1) .rh-hot-name { font-size: 20px; margin-bottom: 10px; }
.rh-hot-card:nth-child(1) .rh-hot-btn { padding: 8px 20px; font-size: 12px; }
.rh-hot-product { max-height: 54%; max-width: 30%; left: 3%; height: auto; }
.rh-hot-card:not(:nth-child(1)) .rh-hot-product { max-height: 50%; max-width: 30%; }
.rh-hot-card:nth-child(1) .rh-hot-product { height: 72%; max-height: none; max-width: 34%; left: 4%; }
.rh-hot-info { max-width: 62%; }
.rh-why-card { padding: 28px; }
.rh-why-title { font-size: 19px; }
.rh-certgal-grid { grid-template-columns: 1fr; gap: 16px; }
.rh-certgal-item .thumb { height: 220px; }
.rh-cert-badges { gap: 10px; margin-bottom: 32px; }
.rh-cert-badge { padding: 5px 14px 5px 5px; }
.rh-cert-badge-img { width: 34px; height: 34px; }
.rh-cert-badge-name { font-size: 13px; }
.rh-expo-featured-inner { padding: 24px; }
.rh-expo-featured h3 { font-size: 22px; }
.rh-expo-grid { grid-template-columns: 1fr; }
.rh-blog-card { flex: 0 0 280px; }
.rh-blog-track { gap: 16px; }
.rh-blog-scroll { -webkit-mask-image: none; mask-image: none; }
.rh-vcard { flex: 0 0 280px; }
.rh-vscroll-track { gap: 16px; }
.rh-vscroll { -webkit-mask-image: none; mask-image: none; }
.rh-contact-form { padding: 28px; }
.rh-form-row { grid-template-columns: 1fr; }
.rh-footer { padding: 50px 0 0; }
.rh-footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; }
.rh-footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}
/* ==========================================================================
MOBILE MENU DRAWER
========================================================================== */
.rh-mobile-drawer {
position: fixed;
top: 0; right: -100%;
width: 82%;
max-width: 360px;
height: 100vh;
background: #fff;
z-index: 10000;
transition: right 0.35s ease;
box-shadow: -10px 0 40px rgba(0,0,0,0.15);
display: flex;
flex-direction: column;
}
.rh-mobile-drawer.open { right: 0; }
.rh-mobile-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
background: #052f9b;
}
.rh-mobile-drawer-close {
background: none;
border: none;
font-size: 28px;
color: #fff;
cursor: pointer;
padding: 4px;
}
.rh-mobile-contact {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 24px;
background: #052f9b;
}
.rh-mobile-contact a {
color: rgba(255,255,255,0.9) !important;
font-size: 13.5px;
font-weight: 600;
word-break: break-all;
}
.rh-mobile-contact a:hover { color: #ffd3e6 !important; }
.rh-mobile-menu {
list-style: none;
padding: 10px 0;
margin: 0;
flex: 1;
overflow-y: auto;
}
.rh-mobile-menu > li { border-bottom: 1px solid var(--rh-border-light); }
.rh-mobile-menu > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 24px;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #1a202c;
}
.rh-mobile-menu .sub-menu {
list-style: none;
padding: 0;
margin: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: #f6f7f9;
}
.rh-mobile-menu > li.open .sub-menu { max-height: 500px; }
.rh-mobile-menu .sub-menu a {
display: block;
padding: 12px 24px 12px 40px;
font-size: 14px;
color: var(--rh-text-body);
font-weight: 600;
}
.rh-mobile-menu .sub-menu a:hover { color: #e8397c; }
/* View All link at top of mobile submenu */
.rh-mobile-menu .rh-mobile-all { border-top: 1px solid var(--rh-border-light); }
.rh-mobile-menu .rh-mobile-all a {
color: #e8397c !important;
font-weight: 700 !important;
text-transform: uppercase;
font-size: 13px !important;
letter-spacing: 0.5px;
background: #fef5fa;
border-left: 3px solid #e8397c;
}
.rh-mobile-menu .rh-mobile-all a:hover { background: #fdebf4; }
.rh-mobile-cta {
padding: 24px;
border-top: 1px solid var(--rh-border-light);
}
.rh-mobile-cta .rh-btn-primary {
background: linear-gradient(135deg, #ff2093 0%, #e8397c 100%) !important;
box-shadow: 0 8px 22px rgba(232,57,124,0.32) !important;
}
.rh-mobile-cta .rh-btn-primary:hover {
background: linear-gradient(135deg, #e8397c 0%, #e8397c 100%) !important;
}
.rh-mobile-overlay {
position: fixed;
inset: 0;
background: rgba(26,26,46,0.5);
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.rh-mobile-overlay.open {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
EyouCMS Overrides
========================================================================== */
.entry-content, .single-content { padding: 0; }
.content-wrap { padding: 0; }
.site-main { background: transparent; }
/* Form validation */
.rh-form-field .ey-form-error {
color: #e53e3e;
font-size: 12px;
margin-top: 6px;
}
/* ==========================================================================
PRODUCTS LIST PAGE (ref: gsyuan.com/products)
========================================================================== */
/* --- Banner --- */
.rh-pl-banner {
position: relative;
padding: 64px 0 56px;
background: linear-gradient(135deg, rgb(234, 242, 255) 0%, rgb(199, 219, 251) 60%, rgb(155, 193, 246) 100%);
text-align: center;
overflow: hidden;
}
.rh-pl-banner::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(51,114,231,0.10) 0%, transparent 70%);
pointer-events: none;
}
.rh-pl-banner-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--rh-primary);
padding: 6px 20px;
background: #fff;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(232,57,124,0.10);
margin-bottom: 18px;
}
.rh-pl-banner-title {
font-size: 52px;
font-weight: 800;
line-height: 1.15;
color: var(--rh-text-dark);
margin: 0 0 16px;
}
.rh-pl-banner-title span {
background: linear-gradient(135deg, #1a202c 0%, #1a202c 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.rh-pl-banner-desc {
font-size: 17px;
color: var(--rh-text-body);
max-width: 640px;
margin: 0 auto 24px;
}
/* --- Category Slider --- */
.rh-pl-cats {
padding: 36px 0 16px;
}
.rh-pl-cats-wrap {
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.rh-pl-cats-track {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-behavior: smooth;
flex: 1;
padding: 6px 2px;
scrollbar-width: none;
}
.rh-pl-cats-track::-webkit-scrollbar { display: none; }
.rh-pl-cat-item {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 22px 10px 10px;
background: #fff;
border: 2px solid var(--rh-border-light);
border-radius: 999px;
text-decoration: none !important;
transition: all var(--rh-transition);
}
.rh-pl-cat-item:hover {
border-color: var(--rh-primary-200);
transform: translateY(-2px);
box-shadow: var(--rh-shadow-sm);
}
.rh-pl-cat-item.active {
background: linear-gradient(135deg, var(--rh-primary) 0%, var(--rh-primary-dark) 100%);
border-color: transparent;
color: #fff;
box-shadow: 0 6px 20px rgba(232,57,124,0.28);
}
.rh-pl-cat-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--rh-primary-50);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-size: 18px;
color: var(--rh-primary);
flex-shrink: 0;
}
.rh-pl-cat-icon img {
width: 100%; height: 100%;
object-fit: cover;
}
.rh-pl-cat-item.active .rh-pl-cat-icon {
background: rgba(255,255,255,0.22);
color: #fff;
}
.rh-pl-cat-label {
font-size: 13.5px;
font-weight: 700;
color: var(--rh-text-dark);
white-space: nowrap;
}
.rh-pl-cat-item.active .rh-pl-cat-label { color: #fff; }
/* Arrows */
.rh-pl-cats-arrow {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--rh-border-light);
background: #fff;
color: var(--rh-text-dark);
font-size: 14px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--rh-transition);
}
.rh-pl-cats-arrow:hover {
background: var(--rh-primary);
border-color: var(--rh-primary);
color: #fff;
}
/* --- Products Grid --- */
.rh-pl-grid-wrap {
padding: 32px 0 80px;
background: var(--rh-bg-white);
}
.rh-pl-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
}
.rh-pl-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 380px;
padding: 26px 26px 22px;
border-radius: 20px;
overflow: hidden;
text-decoration: none !important;
transition: all var(--rh-transition);
}
.rh-pl-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}
/* --- Unified card background (light blue, per user spec) --- */
.rh-pl-card:nth-child(8n+1),
.rh-pl-card:nth-child(8n+2),
.rh-pl-card:nth-child(8n+3),
.rh-pl-card:nth-child(8n+4),
.rh-pl-card:nth-child(8n+5),
.rh-pl-card:nth-child(8n+6),
.rh-pl-card:nth-child(8n+7),
.rh-pl-card:nth-child(8n+8) { background: linear-gradient(135deg, #f4f8ff 0%, #eaf2ff 55%, #c7dbfb 100%); }
/* --- Card Content --- */
.rh-pl-card-title {
font-size: 20px;
font-weight: 800;
color: var(--rh-text-dark);
margin: 0;
line-height: 1.3;
position: relative;
z-index: 3;
}
.rh-pl-card-sub {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: var(--rh-text-body);
margin-top: 8px;
padding: 3px 10px;
background: rgba(255,255,255,0.65);
border-radius: 999px;
backdrop-filter: blur(4px);
position: relative;
z-index: 3;
align-self: flex-start;
}
/* --- Product Image (contain = full visible) --- */
.rh-pl-card-product {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 14px 10px 6px;
position: relative;
z-index: 2;
}
.rh-pl-card-product img {
max-width: 92%;
max-height: 220px;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 22px rgba(0,0,0,0.14));
transition: transform 0.6s ease;
}
.rh-pl-card:hover .rh-pl-card-product img {
transform: translateY(-3px) scale(1.04);
}
/* --- CTA Button (bottom-right) --- */
.rh-pl-card-cta {
position: relative;
z-index: 3;
align-self: flex-end;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 22px;
background: #fff;
color: var(--rh-primary);
font-size: 13px;
font-weight: 700;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0,0,0,0.08);
transition: all var(--rh-transition);
margin-top: auto;
}
.rh-pl-card-cta:hover {
background: var(--rh-primary);
color: #fff;
transform: translateX(2px);
}
/* --- Pagination (粉色系, 首页同款) --- */
.rh-pl-pagination {
margin-top: 50px;
text-align: center;
}
.rh-pl-pagination-list,
.rh-pl-pagination ul {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.rh-pl-pagination-list li,
.rh-pl-pagination li {
display: inline-flex;
list-style: none;
}
.rh-pl-pagination a,
.rh-pl-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
margin: 0 3px;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
background: #fff;
color: #e8397c;
border: 1px solid #fbd0e3;
text-decoration: none !important;
transition: all .25s ease;
box-sizing: border-box;
}
.rh-pl-pagination a:hover {
background: #fdebf4 !important;
border-color: #e8397c !important;
color: #e8397c !important;
transform: translateY(-1px);
}
.rh-pl-pagination .current,
.rh-pl-pagination span.current,
.rh-pl-pagination .active > a,
.rh-pl-pagination li.active > a,
.rh-pl-pagination li.current > a {
background: linear-gradient(135deg, #e8397c 0%, #ff2093 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 6px 18px rgba(232,57,124,0.28) !important;
}
/* 只有 1 页时 pagelist 退化成的纯文本提示 */
.rh-pl-pagination .rh-page-info,
.rh-pl-pagination > ul:only-child > li,
.rh-pl-pagination > ul:only-child {
color: #8898b4 !important;
font-size: 14px !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
min-width: auto !important;
box-shadow: none !important;
font-weight: 500 !important;
}
/* --- Responsive --- */
@media (max-width: 1280px) {
.rh-pl-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rh-pl-card { min-height: 360px; padding: 22px; }
}
@media (max-width: 1024px) {
.rh-pl-banner { padding: 52px 0 44px; }
.rh-pl-banner-title { font-size: 40px; }
.rh-pl-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rh-pl-card { min-height: 340px; padding: 20px; }
.rh-pl-card-title { font-size: 17px; }
.rh-pl-card-product img { max-height: 190px; }
}
@media (max-width: 767px) {
.rh-pl-banner { padding: 44px 0 36px; }
.rh-pl-banner-title { font-size: 30px; }
.rh-pl-banner-desc { font-size: 15px; }
.rh-pl-cats { padding: 24px 0 8px; }
.rh-pl-cats-arrow { width: 36px; height: 36px; font-size: 12px; }
.rh-pl-cat-item { padding: 8px 16px 8px 8px; }
.rh-pl-cat-icon { width: 30px; height: 30px; font-size: 15px; }
.rh-pl-cat-label { font-size: 12px; }
.rh-pl-grid { grid-template-columns: 1fr; gap: 14px; }
.rh-pl-card { min-height: 240px; padding: 18px 18px 16px; border-radius: 16px; }
.rh-pl-card-title { font-size: 16px; }
.rh-pl-card-sub { font-size: 11px; margin-top: 6px; padding: 3px 10px; }
.rh-pl-card-product img { max-height: 180px; width: auto; }
.rh-pl-card-cta { padding: 9px 18px; font-size: 13px; }
.rh-pl-pagination a,
.rh-pl-pagination span { min-width: 36px; height: 36px; font-size: 13px; padding: 0 10px; }
}
.oem-svc { padding:70px 0 80px; background:linear-gradient(180deg,#ffffff 0%,#f6f7fb 100%); }
.oem-svc .rh-container { max-width:1600px; margin:0 auto; padding:0 30px; }
.oem-svc-head { text-align:center; margin-bottom:14px; }
.oem-svc-eyebrow { display:inline-block; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:#e8397c; margin-bottom:10px; }
.oem-svc-head h2 { font-size:clamp(32px,3.4vw,46px); font-weight:800; color:#052f9b; line-height:1.2; margin:0 0 12px; }
.oem-svc-head p { font-size:17px; color:#64748B; max-width:760px; margin:0 auto; line-height:1.7; }
.oem-pipeline { margin:34px 0 44px; border-radius:18px; padding:26px 30px; background:linear-gradient(120deg,#052f9b 0%,#1e293b 55%,#334155 100%); display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 14px; box-shadow:0 18px 40px -22px rgba(15,23,42,.5); position:relative; overflow:hidden; }
.oem-pipeline::after { content:''; position:absolute; right:-60px; top:-80px; width:240px; height:240px; border-radius:50%; background:#e8397c; opacity:.14; filter:blur(60px); }
.oem-pl-label { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; color:#ff2093; margin-right:6px; }
.oem-pl-step { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; color:#fff; }
.oem-pl-step .n { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.14); color:#ff2093; font-size:12px; font-weight:800; }
.oem-pl-arrow { color:#475569; font-size:18px; font-weight:400; }
.oem-svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.oem-svc-card { position:relative; background:#fff; border-radius:18px; padding:34px 26px 30px; overflow:hidden; border:1px solid #EEF1F6; box-shadow:0 14px 34px -24px rgba(15,23,42,.25); transition:transform .25s ease, box-shadow .25s ease; }
.oem-svc-card:hover { transform:translateY(-6px); box-shadow:0 24px 44px -26px rgba(15,23,42,.35); }
.oem-svc-num { position:absolute; top:6px; right:14px; font-size:88px; font-weight:800; line-height:1; color:rgba(232,57,124,.12); font-family:inherit; }
.oem-svc-ico { width:54px; height:54px; border-radius:14px; background:#fef2f6; color:#e8397c; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.oem-svc-ico svg { width:28px; height:28px; }
.oem-svc-card h3 { font-size:20px; font-weight:800; color:#052f9b; margin:0 0 10px; }
.oem-svc-card p { font-size:15px; color:#64748B; line-height:1.75; margin:0; }
.oem-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
.oem-detail { background:#fff; border-radius:18px; border:1px solid #EEF1F6; box-shadow:0 14px 34px -26px rgba(15,23,42,.2); overflow:hidden; }
.oem-detail-head { padding:20px 26px; background:linear-gradient(120deg,#052f9b,#1e293b); color:#fff; display:flex; align-items:center; gap:12px; }
.oem-detail-head .ic { width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.12); color:#ff2093; display:flex; align-items:center; justify-content:center; }
.oem-detail-head .ic svg { width:18px; height:18px; }
.oem-detail-head h3 { font-size:17px; font-weight:800; margin:0; }
.oem-detail-head small { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:#94a3b8; margin-top:2px; }
.oem-detail-body { padding:22px 26px; }
.oem-detail-body ul { list-style:none; margin:0; padding:0; }
.oem-detail-body li { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#475569; line-height:1.65; padding:9px 0; border-bottom:1px dashed #EEF1F6; }
.oem-detail-body li:last-child { border-bottom:none; }
.oem-detail-body li .dot { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#e8397c; margin-top:8px; }
.oem-detail-body li .wstep { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:#fef2f6; color:#e8397c; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.oem-detail-body li b { color:#052f9b; font-weight:700; }
@media (max-width:1100px) { .oem-svc-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) { .oem-detail-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .oem-svc-grid { grid-template-columns:1fr; } .oem-pipeline { padding:22px 20px; } }
/* ==========================================================================
SINGLE-PAGE HERO (replaces banner.htm on lists_single_*.htm templates)
Scoped to body.rh-page to avoid conflict with homepage carousel hero
========================================================================== */
body.rh-page .rh-hero{
position:relative;overflow:hidden;color:#fff;
background:linear-gradient(135deg,#052f9b 0%,#052f9b 55%,#052f9b 100%);
background: linear-gradient(105deg, rgba(5,47,155,.93) 0%, rgba(5,47,155,.78) 55%, rgba(51,114,231,.55) 100%),
url('/template/pc/static/image/contact/factory-aerial.png') center/cover no-repeat;
padding:72px 0 64px;
}
body.rh-page .rh-hero::before,body.rh-page .rh-hero::after{
content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06);
}
body.rh-page .rh-hero::before{width:420px;height:420px;top:-160px;right:-100px}
body.rh-page .rh-hero::after{width:300px;height:300px;bottom:-140px;left:-80px}
body.rh-page .rh-hero-inner{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:0 24px}
body.rh-page .rh-hero-badge{
display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:1.5px;
font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
padding:7px 16px;border-radius:999px;text-transform:uppercase;
}
body.rh-page .rh-hero h1{color:#fff;font-size:42px;font-weight:800;line-height:1.25;margin:22px 0 14px;letter-spacing:.5px}
body.rh-page .rh-hero h1 span{color:#3372e7}
body.rh-page .rh-hero p{font-size:17px;max-width:720px;color:#d7e2ff;font-weight:400}
body.rh-page .rh-hero-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
body.rh-page .rh-hero-stat{
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
border-radius:12px;padding:14px 22px;min-width:130px;
}
body.rh-page .rh-hero-stat b{display:block;font-size:26px;font-weight:800;color:#fff}
body.rh-page .rh-hero-stat span{font-size:13px;color:#bcd0ff}
@media (max-width:900px){
body.rh-page .rh-hero h1{font-size:31px}
}
@media (max-width:767px){
body.rh-page .rh-hero{padding:56px 0 48px}
body.rh-page .rh-hero h1{font-size:26px}
body.rh-page .rh-hero p{font-size:15px}
body.rh-page .rh-hero-stats{gap:10px}
body.rh-page .rh-hero-stat{padding:12px 16px;min-width:110px}
body.rh-page .rh-hero-stat b{font-size:22px}
}
/* ==========================================================================
SOLUTIONS PAGE - 子栏目卡片网格 & 成功案例网格
========================================================================== */
.rh-sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
.rh-sol-card{
background:#fff;border:1px solid #e3ecff;border-radius:18px;padding:26px 24px 22px;
box-shadow:0 6px 20px -18px rgba(5,47,155,.35);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
text-decoration:none;color:inherit;display:block;
}
.rh-sol-card:hover{transform:translateY(-4px);border-color:#9bc1f6;box-shadow:0 14px 34px -22px rgba(5,47,155,.45)}
.rh-sol-ico{
width:50px;height:50px;border-radius:14px;background:linear-gradient(135deg,#052f9b,#052f9b);
color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.rh-sol-ico svg{width:24px;height:24px}
.rh-sol-card h3{font-size:18px;font-weight:800;color:#052f9b;margin:0 0 8px}
.rh-sol-card p{font-size:14px;color:#5b6b8c;line-height:1.65;margin:0}
/* Success Cases - grid for {eyou:artlist typeid='9'} */
.rh-casegallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.rh-cg-card{
background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px -16px rgba(5,47,155,.4);
transition:transform .25s ease,box-shadow .25s ease;text-decoration:none;color:inherit;display:block;
}
.rh-cg-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px -22px rgba(5,47,155,.45)}
.rh-cg-img{aspect-ratio:4/3;overflow:hidden;background:#f2f6ff}
.rh-cg-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.rh-cg-card:hover .rh-cg-img img{transform:scale(1.06)}
.rh-cg-body{padding:18px 20px 22px}
.rh-cg-body h3{font-size:15.5px;font-weight:700;color:#052f9b;margin:0 0 8px;line-height:1.45}
.rh-cg-body p{font-size:13.5px;color:#5b6b8c;line-height:1.65;margin:0}
.rh-cg-more{margin-top:34px;text-align:center}
@media (max-width:900px){
.rh-sol-grid{grid-template-columns:repeat(2,1fr)}
.rh-casegallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
.rh-sol-grid{grid-template-columns:1fr}
.rh-casegallery{grid-template-columns:1fr}
}
/* ==========================================================================
INDUSTRY TABS (Solutions page - 3 industries)
========================================================================== */
.rh-ind-tabs{display:flex;gap:8px;margin-top:34px;flex-wrap:wrap;border-bottom:2px solid #dbe6ff;padding-bottom:0}
.rh-ind-tab{
padding:14px 28px;border:none;background:none;font-size:15.5px;font-weight:700;
color:#5b6b8c;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;
transition:all .25s ease;font-family:inherit;white-space:nowrap;
}
.rh-ind-tab:hover{color:#052f9b}
.rh-ind-tab.active{color:#052f9b;border-bottom-color:#052f9b}
.rh-ind-panels{margin-top:34px}
.rh-ind-panel{display:none;animation:rh-ind-fade .35s ease}
.rh-ind-panel.active{display:block}
@keyframes rh-ind-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rh-ind-layout{display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:start}
.rh-ind-img{
aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#eaf2ff,#dbe6ff);
border:1px solid #c7dbff;box-shadow:0 10px 30px -24px rgba(5,47,155,.35);
}
.rh-ind-img img{width:100%;height:100%;object-fit:contain;padding:16px}
.rh-ind-sku{
background:#fff;border:1px solid #dbe6ff;border-radius:14px;padding:14px 18px;margin-top:16px;
box-shadow:0 4px 16px -16px rgba(5,47,155,.3);
}
.rh-ind-sku-label{font-size:11.5px;font-weight:700;color:#5b6b8c;text-transform:uppercase;letter-spacing:.12em;margin-bottom:4px}
.rh-ind-sku-val{font-size:22px;font-weight:800;color:#052f9b;line-height:1.2}
.rh-ind-sku-val small{font-size:13px;color:#5b6b8c;font-weight:500;margin-left:4px}
.rh-ind-sku-sub{font-size:12.5px;color:#8888a0;margin-top:2px}
.rh-ind-info h3{font-size:24px;font-weight:800;color:#052f9b;margin:0 0 12px;line-height:1.25}
.rh-ind-info p{font-size:15.5px;color:#5b6b8c;line-height:1.75;margin:0 0 20px}
.rh-ind-bullets{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:10px}
.rh-ind-bullets li{
display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:#4a4a6a;line-height:1.65;
}
.rh-ind-bullets li::before{
content:"";flex-shrink:0;width:20px;height:20px;border-radius:6px;margin-top:1px;
background:linear-gradient(135deg,#e8397c,#ff2093);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:12px;
}
@media (max-width:900px){
.rh-ind-layout{grid-template-columns:1fr;gap:28px}
.rh-ind-img{max-width:420px;margin:0 auto}
.rh-ind-tab{padding:12px 18px;font-size:14.5px}
}
@media (max-width:640px){
.rh-ind-tabs{gap:4px}
.rh-ind-tab{padding:10px 14px;font-size:13.5px}
}
/* ==========================================================================
GENERIC PAGE HERO (used by all list pages: products / news / images / etc.)
Uses header.rh-hero selector so it NEVER conflicts with the homepage's
slider hero (lines 677+).
========================================================================== */
header.rh-hero{
position:relative;overflow:hidden;color:#fff;
background:linear-gradient(135deg,#052f9b 0%,#052f9b 55%,#052f9b 100%);
padding:72px 0 64px;
}
header.rh-hero::before,header.rh-hero::after{
content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.06);
}
header.rh-hero::before{width:420px;height:420px;top:-160px;right:-100px}
header.rh-hero::after{width:300px;height:300px;bottom:-140px;left:-80px}
header.rh-hero .rh-hero-inner{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:0 24px}
header.rh-hero .rh-hero-badge{
display:inline-flex;align-items:center;gap:8px;font-size:13px;letter-spacing:1.5px;
font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
padding:7px 16px;border-radius:999px;text-transform:uppercase;
}
header.rh-hero h1{color:#fff;font-size:42px;font-weight:800;line-height:1.25;margin:22px 0 14px;letter-spacing:.5px}
header.rh-hero h1 span{color:#3372e7}
header.rh-hero p{font-size:17px;max-width:720px;color:#d7e2ff;font-weight:400;margin:0}
@media (max-width:900px){
header.rh-hero h1{font-size:31px}
}
@media (max-width:767px){
header.rh-hero{padding:56px 0 48px}
header.rh-hero h1{font-size:26px;margin:18px 0 10px}
header.rh-hero p{font-size:15px}
}
/* ==========================================================================
PRODUCT CATEGORY HOMEPAGE — 每个分类一段产品 + "View All" 按钮
========================================================================== */
.rh-pl-cat-wrap{padding:56px 0 40px}
.rh-pl-cat-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:22px;padding-bottom:18px;border-bottom:2px solid #e5ecff;
}
.rh-pl-cat-head h2{
font-size:26px;font-weight:800;color:#052f9b;margin:0;
}
.rh-pl-cat-more{
font-size:14px;font-weight:600;color:#052f9b;text-decoration:none;
padding:9px 20px;border-radius:999px;background:#eaf2ff;border:1px solid #c7dbff;
transition:all .25s ease;white-space:nowrap;
}
.rh-pl-cat-more:hover{background:#052f9b;color:#fff;border-color:#052f9b}
.rh-pl-cat-empty{
grid-column:1/-1;text-align:center;padding:40px 20px;color:#888;font-size:14px;
}
@media (max-width:767px){
.rh-pl-cat-wrap{padding:36px 0 24px}
.rh-pl-cat-head{flex-direction:column;gap:14px;align-items:flex-start}
.rh-pl-cat-head h2{font-size:21px}
.rh-pl-cat-more{font-size:13px;padding:7px 16px}
}
/* ==========================================================================
HERO BREADCRUMB — 所有 rh-hero 里的面包屑
========================================================================== */
.rh-hero-breadcrumb{
font-size:12.5px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;
color:rgba(255,255,255,.55);margin:0 0 18px;
display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.rh-hero-breadcrumb a{
color:rgba(255,255,255,.75);text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.15);transition:all .2s ease;
}
.rh-hero-breadcrumb a:hover{color:#9bc1f6;border-bottom-color:#9bc1f6}
.rh-hero-breadcrumb .rh-bc-sep{color:rgba(255,255,255,.35);font-size:10px}
.rh-hero-breadcrumb .rh-bc-cur{color:#9bc1f6;font-weight:600}
@media (max-width:767px){
.rh-hero-breadcrumb{font-size:11px;margin:0 0 12px;letter-spacing:1px}
}
/* ==========================================================================
RH-WHY-GRID — Force 1-column below 700px (mobile)
Overrides the 1024px→2-col and 768px transitions
========================================================================== */
@media (max-width: 700px) {
.rh-why-grid {
grid-template-columns: 1fr !important;
gap: 18px;
}
.rh-why-card {
padding: 24px 22px;
}
.rh-why-title {
font-size: 18px;
}
.rh-why-desc {
font-size: 14px;
}
.rh-why-icon {
width: 56px;
height: 56px;
border-radius: 14px;
}
.rh-why-icon svg,
.rh-why-icon strong {
width: 28px;
height: 28px;
font-size: 16px;
}
}
/* Captcha box */
.ronghai-captcha-box{display:flex;align-items:center;gap:12px}
.ronghai-captcha-input{flex:1;min-width:0;padding:11px 14px;font-size:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace,system-ui !important;letter-spacing:4px;text-align:center;border:1px solid #e5ecff;border-radius:10px;background:#fafbff;color:#0f172a;transition:border-color .2s,box-shadow .2s,background-color .2s}
.ronghai-captcha-input:focus{outline:none;border-color:#052f9b;box-shadow:0 0 0 3px rgba(5,47,155,.12);background:#fff}
.ronghai-captcha-input::placeholder{color:#a5b4cf;letter-spacing:0;text-transform:none;font-family:inherit}
.ronghai-captcha-img{width:120px;height:42px;border-radius:8px;border:1px solid #e5ecff;cursor:pointer;object-fit:cover;background:#f4f8ff;flex-shrink:0;transition:transform .2s,box-shadow .2s}
.ronghai-captcha-img:hover{opacity:.9;transform:scale(1.04);box-shadow:0 4px 12px -4px rgba(5,47,155,.28)}
.ronghai-captcha-refresh{font-size:12px;color:#052f9b;text-decoration:none;white-space:nowrap;transition:color .2s}
.ronghai-captcha-refresh:hover{color:#3372e7;text-decoration:underline}
@media (max-width:480px){.ronghai-captcha-img{width:100px}.ronghai-captcha-input{letter-spacing:2px;padding:10px 12px;font-size:13px}}
/* Modal forms need box-sizing */
.vp-modal .ronghai-captcha-box{gap:10px}
.vp-modal .ronghai-captcha-input{letter-spacing:3px}
/* Features bar marquee animation (mobile only) */
@keyframes rh-feat-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ===== SHIPPING LOGS (Live Deliveries Marquee) ===== */
.rh-shipping{
padding:72px 0 64px;
background:linear-gradient(180deg, #f4f8ff 0%, #eaf2ff 60%, #dbe6ff 100%);
overflow:hidden;
position:relative;
}
.rh-shipping-head{ text-align:center; margin-bottom:44px; }
.rh-shipping-kicker{
display:inline-block; font-size:14px; font-weight:700; letter-spacing:.24em;
text-transform:uppercase; color:#e8397c; margin-bottom:14px;
padding:5px 16px; border:1px solid #fbd0e3; border-radius:30px; background:#fff;
}
.rh-shipping-title{
font-size:clamp(30px,4.2vw,46px); font-weight:800; color:#052f9b;
letter-spacing:-.02em; margin:0 0 12px; line-height:1.15;
}
.rh-shipping-title span{ color:#e8397c; }
.rh-shipping-desc{ color:#5b6b85; font-size:17px; max-width:620px; margin:0 auto; }
.rh-shipping-track-wrap{
overflow:hidden;
mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
padding:8px 0;
}
.rh-shipping-track{
display:flex; flex-wrap:nowrap; gap:20px; width:max-content;
animation:rh-ship-marquee 60s linear infinite;
}
.rh-shipping-track-wrap:hover .rh-shipping-track{ animation-play-state:paused; }
.rh-shipping-card{
flex:0 0 320px; width:320px; background:#fff; border-radius:16px;
box-shadow:0 4px 18px -8px rgba(5,47,155,.15); overflow:hidden;
transition:transform .3s ease, box-shadow .3s ease;
border:1px solid #eef2fb;
}
.rh-shipping-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 40px -16px rgba(5,47,155,.28);
}
.rh-shipping-card img{
width:100%; height:190px; object-fit:cover; display:block;
background:#eaf2ff;
}
.rh-shipping-body{ padding:16px 18px 18px; }
.rh-shipping-loc{
font-size:16px; font-weight:700; color:#052f9b; margin-bottom:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rh-shipping-prod{
font-size:14px; color:#3372e7; font-weight:500; margin-bottom:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rh-shipping-date{ font-size:13px; color:#8898b0; }
@keyframes rh-ship-marquee{
0%{ transform:translateX(0); }
100%{ transform:translateX(-50%); }
}
@media (max-width:1024px){
.rh-shipping{ padding:56px 0 48px; }
.rh-shipping-card{ flex-basis:280px; width:280px; }
.rh-shipping-card img{ height:160px; }
.rh-shipping-track{ gap:16px; animation-duration:50s; }
}
@media (max-width:768px){
.rh-shipping{ padding:44px 0 36px; }
.rh-shipping-card{ flex-basis:240px; width:240px; }
.rh-shipping-card img{ height:140px; }
.rh-shipping-body{ padding:12px 14px 14px; }
.rh-shipping-loc{ font-size:14px; }
.rh-shipping-prod{ font-size:13px; }
.rh-shipping-track{ gap:14px; animation-duration:42s; }
.rh-shipping-track-wrap{
mask-image:linear-gradient(90deg, #000 0, #000 100%);
-webkit-mask-image:linear-gradient(90deg, #000 0, #000 100%);
}
}
/* ===== Logo align left in navbar (2026-10-16 add) ===== */
.rh-navbar-logo {
position: absolute;
left: max(0px, calc((100% - var(--rh-maxw)) / 2 + 24px));
top: 50%;
transform: translateY(-50%);
z-index: 1001;
display: flex;
align-items: center;
pointer-events: auto;
}
.rh-navbar-logo img {
height: 60px;
width: auto;
filter: brightness(0) invert(1);
object-fit: contain;
}
@media (max-width: 1024px) {
.rh-navbar-logo { display: none; }
}
/* ===== Why Choose Us - button left align PC, center mobile + title bigger (2026-10-19) ===== */
.rh-section-eyebrow {
display: inline-block !important;
width: fit-content !important;
}
.rh-wcu-title {
font-size: 44px;
font-weight: 800;
line-height: 1.15;
color: var(--rh-text-dark);
margin: 0 0 14px;
letter-spacing: -0.02em;
}
@media (max-width: 768px) {
.rh-wcu-text > .rh-btn-primary {
align-self: center;
}
.rh-about-cta {
display: block;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
}