/* ===== 全局重置 ===== */
body::-webkit-scrollbar {
width: 7px;
height: 1px;
}
body::-webkit-scrollbar-thumb {
background: #f6b93b;
border-radius: 10px;
}
body::-webkit-scrollbar-track {
background: #052852;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft Yahei", "PingFang SC", sans-serif;
}
body {
color: #333;
background-color: #f7f9fc;
overflow-x: hidden;
}
ul {
list-style: none;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0.1);
touch-action: manipulation;
}
img {
max-width: 100%;
display: block;
}
html {
scroll-behavior: smooth;
}
/* ===== CSS变量 ===== */
:root {
--main-blue: #0a4b9c;
--dark-blue: #052852;
--light-blue: #eef4fc;
--orange: #ff7800;
--orange-deep: #e06c00;
--gray-text: #666;
--white: #fff;
--shadow: 0 4px 15px rgba(10, 75, 156, 0.10);
--radius: 10px;
--tag-radius: 100px;
--transition: all 0.3s ease;
--border-light: #d0d7e3;
--border-focus: #0a4b9c;
--glow-blue: 0 0 0 3px rgba(10, 75, 156, 0.12);
--glow-orange: 0 6px 22px rgba(255, 120, 0, 0.30);
}
/* ===== 通用容器 ===== */
.container {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 0 20px;
}
.section-padding {
padding: 60px 0;
}
.section-title {
text-align: center;
margin-bottom:30px;
}
.section-title h2 {
font-size: 30px;
color: var(--main-blue);
position: relative;
padding-bottom: 12px;
display: inline-block;
}
.section-title h2::after {
content: "";
width: 80px;
height: 3px;
background: var(--orange);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
border-radius: 2px;
}
.section-title p {
margin-top: 12px;
color: var(--gray-text);
}
/* ===== 按钮 ===== */
.btn {
padding: 12px 30px;
background: var(--orange);
color: var(--white);
border-radius: 50px;
display: inline-block;
transition: var(--transition);
border: none;
cursor: pointer;
font-size: 15px;
font-weight: 500;
}
.btn:hover {
background: var(--orange-deep);
transform: translateY(-3px);
box-shadow: var(--glow-orange);
}
.btn-blue {
background: var(--white);
color: var(--main-blue);
margin-left: 15px;
}
.btn-blue:hover {
background: #f0f6ff;
}
/* ===== 顶部通栏 ===== */
.header-top {
background: var(--main-blue);
color: var(--white);
padding: 10px 0;
font-size: 14px;
}
.header-top .container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.header-top a {
color: #fff;
text-decoration: none;
}
.header-top a:hover {
text-decoration: underline;
}
/* ================================================================
===== ★ 导航栏（含二级菜单） =====
================================================================ */
.header-nav {
background: #0c58b7;
height: 75px;
position: sticky;
top: 0;
z-index: 9999;
box-shadow: var(--shadow);
}
.header-nav .container {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.logo-wrap {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.logo-img {
width: 60px;
height: 60px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: var(--main-blue);
font-weight: bold;
}
.logo-img img {
width: 60px;
height: 60px;
object-fit: contain;
border-radius: 6px;
}
.logo-text {
display: flex;
flex-direction: column;
align-items: stretch;
}
.logo-text .line {
display: block;
text-align: center;
width: 100%;
}
.logo-text .line-ch {
font-size: 24px;
font-weight: 700;
color: var(--white);
line-height: 1.2;
letter-spacing: 2px;
}
.logo-text .line-en {
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, 0.80);
line-height: 1.2;
letter-spacing: 0.5px;
}
/* ---- 主导航 ---- */
.nav-list {
display: flex;
align-items: center;
height: 75px;
}
.nav-list>li {
position: relative;
height: 75px;
display: flex;
align-items: center;
}
.nav-list>li>a {
color: var(--white);
padding: 0 22px;
height: 75px;
line-height: 75px;
display: inline-block;
font-size: 17px;
transition: var(--transition);
position: relative;
white-space: nowrap;
}
.nav-list>li>a::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: 0;
height: 3px;
background: var(--orange);
transition: var(--transition);
border-radius: 2px;
}
.nav-list>li>a:hover::after {
width: 60%;
}
/* ---- 下拉箭头 ---- */
.nav-list>li.has-dropdown>a .arrow-icon {
font-size: 12px;
margin-left: 4px;
opacity: 0.6;
transition: var(--transition);
}
.nav-list>li.has-dropdown:hover>a .arrow-icon {
opacity: 1;
transform: rotate(180deg);
}
/* ---- 二级菜单容器 ---- */
.nav-list .dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(12px);
background: #fff;
border-radius: var(--radius);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
padding: 10px 0;
min-width: 210px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(10, 75, 156, 0.08);
z-index: 1000;
}
.nav-list>li.has-dropdown:hover>.dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* ---- 二级菜单项 ---- */
.nav-list .dropdown li {
display: block;
}
.nav-list .dropdown li a {
display: block;
padding: 9px 24px;
color: #333;
font-size: 15px;
transition: var(--transition);
border-left: 3px solid transparent;
white-space: nowrap;
}
.nav-list .dropdown li a:hover {
background: #f0f6ff;
color: var(--main-blue);
border-left-color: var(--orange);
padding-left: 28px;
}
/* ---- 产品系列：宽下拉 + 两列网格 ---- */
.nav-list .dropdown.dropdown-grid {
min-width: 680px;
padding: 14px 18px;
left: 50%;
transform: translateX(-50%) translateY(12px);
}
.nav-list>li.has-dropdown.dropdown-wide:hover>.dropdown.dropdown-grid {
transform: translateX(-50%) translateY(0);
}
.nav-list .dropdown-grid-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px 12px;
}
.nav-list .dropdown-grid-inner li a {
white-space: nowrap;
padding: 7px 16px 7px 12px;
font-size: 14px;
border-left: 3px solid transparent;
border-radius: 4px;
}
.nav-list .dropdown-grid-inner li a:hover {
background: #f0f6ff;
color: var(--main-blue);
border-left-color: var(--orange);
padding-left: 16px;
}
/* ---- 移动端汉堡菜单 - 确保可点击 ---- */
.menu-toggle {
display: none;
color: white;
font-size: 28px;
cursor: pointer;
padding: 15px 20px;
margin: -15px -20px;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
z-index: 10001;
position: relative;
line-height: 1;
pointer-events: auto;
}
.menu-toggle:active {
opacity: 0.6;
background: rgba(255,255,255,0.1);
border-radius: 4px;
}
/* ===== 移动端导航（抽屉）- 彻底修复可点击性 ===== */
.mobile-nav {
display: none;
position: absolute;
top: 75px;
left: 0;
width: 100%;
background: #0c58b7;
padding: 0;
z-index: 9998;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30);
max-height: calc(100vh - 75px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
pointer-events: auto;
}
.mobile-nav.show {
display: block !important;
}
.mobile-nav > li {
margin: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
pointer-events: auto;
}
.mobile-nav > li > a {
color: #fff !important;
font-size: 17px !important;
display: flex !important;
justify-content: space-between;
align-items: center;
padding: 18px 20px !important;
font-weight: 500;
letter-spacing: 0.5px;
cursor: pointer !important;
position: relative;
pointer-events: auto !important;
line-height: 1.4;
background: transparent;
border: none;
width: 100%;
text-align: left;
}
.mobile-nav > li > a:active {
background: rgba(255,255,255,0.15) !important;
}
/* 移动端二级菜单 */
.mobile-nav .dropdown-mobile {
display: none;
padding: 0;
margin: 0;
background: rgba(0,0,0,0.2);
pointer-events: auto;
}
.mobile-nav .dropdown-mobile li {
border-bottom: 1px solid rgba(255,255,255,0.05);
pointer-events: auto;
}
.mobile-nav .dropdown-mobile li:last-child {
border-bottom: none;
}
.mobile-nav .dropdown-mobile li a {
color: rgba(255, 255, 255, 0.9) !important;
font-size: 15px !important;
padding: 16px 20px 16px 40px !important;
display: block !important;
transition: var(--transition);
cursor: pointer !important;
pointer-events: auto !important;
line-height: 1.4;
}
.mobile-nav .dropdown-mobile li a:active {
background: rgba(255,255,255,0.1) !important;
color: #fff !important;
}
/* 移动端箭头 */
.mobile-nav .menu-arrow {
font-size: 14px;
transition: transform 0.3s ease;
opacity: 0.8;
margin-left: 10px;
flex-shrink: 0;
padding: 5px;
}
.mobile-nav li.open > a .menu-arrow {
transform: rotate(180deg);
}
.mobile-nav li.open > .dropdown-mobile {
display: block !important;
}
/* ================================================================
===== Banner轮播 =====
================================================================ */
.banner-box {
width: 100%;
height: 600px;
position: relative;
overflow: hidden;
}
.banner-wrap {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s ease;
}
.banner-item {
flex: 0 0 100%;
height: 100%;
display: flex;
align-items: center;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
.banner-item::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, rgba(10, 75, 156, 0.38), rgba(5, 40, 82, 0.32));
}
.banner-item:nth-child(1) {
background-image: url("../images/banner/ban1.jpg");
}
.banner-item:nth-child(2) {
background-image: url("../images/banner/ban2.jpg");
}
.banner-item:nth-child(3) {
background-image: url("../images/banner/ban3.jpg");
}
.banner-text-wrap {
width: 100%;
max-width:1400px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 2;
}
.banner-text {
max-width: 700px;
color: #fff;
}
.banner-text h1 {
font-size: 36px;
margin-bottom: 16px;
line-height: 1.3;
}
.banner-text p {
font-size: 18px;
line-height: 1.8;
margin-bottom: 28px;
opacity: 0.95;
}
.banner-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 3;
}
.dot {
width: 12px;
height: 12px;
border-radius:50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: var(--transition);
}
.dot.active {
background: var(--orange);
transform: scale(1.2);
}
/* ===== 企业优势 ===== */
.advantage-bg {
background: var(--light-blue);
}
.adv-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.adv-item {
text-align: center;
padding: 30px 20px;
background: #fff;
border-radius: var(--radius);
box-shadow: var(--shadow);
transition: var(--transition);
}
.adv-item:hover {
transform: translateY(-6px);
}
.adv-icon {
width: 64px;
height: 64px;
margin: 0 auto 16px;
background: var(--main-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
}
.adv-item h4 {
font-size: 18px;
margin: 12px 0 10px;
color: var(--main-blue);
}
.adv-item p {
font-size: 14px;
color: #999;
line-height: 1.7;
margin: 0;
}
/* ===== 产品分类标签 ===== */
.product-tab-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 40px;
}
.product-tab-item {
padding: 10px 20px;
border: 1px solid #dfdfdf;
border-radius: var(--tag-radius);
color: #555;
cursor: pointer;
transition: var(--transition);
font-size: 15px;
background: #fff;
}
.product-tab-item:hover {
background: rgba(10, 75, 156, 0.08);
border-color: var(--orange);
color: var(--orange);
}
/* ===== 产品卡片 ===== */
.product-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 26px;
}
.product-card {
background: var(--white);
box-shadow: var(--shadow);
border-radius: var(--radius);
overflow: hidden;
transition: var(--transition);
}
.product-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 25px rgba(10, 75, 156, 0.15);
}
.product-img {
height: 220px;
background: #d6e4f5;
display: flex;
align-items: center;
justify-content: center;
color: var(--main-blue);
font-size: 20px;
font-weight: 500;
}
.product-info {
padding: 20px;
}
.product-info h3 {
font-size: 17px;
margin-bottom: 10px;
color: var(--main-blue);
}
.product-info p {
font-size: 14px;
color: var(--gray-text);
line-height: 1.65;
}
/* ===== 应用案例 ===== */
.case-wrap {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.case-card {
background: var(--white);
box-shadow: var(--shadow);
border-radius: var(--radius);
overflow: hidden;
transition: var(--transition);
}
.case-card:hover {
transform: translateY(-5px);
}
.case-img {
height: 260px;
background: #c9daf0;
display: flex;
align-items: center;
justify-content: center;
color: var(--main-blue);
font-weight: 500;
}
.case-text {
padding: 20px;
}
.case-text p {
font-size: 14px;
color: var(--gray-text);
line-height: 1.65;
}
.case-text h3 {
color: var(--main-blue);
margin-bottom: 8px;
font-size: 17px;
}
/* ===== 走进融电 ===== */
#about {
position: relative;
}
#about::before {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(10, 75, 156, 0.06) 38px,rgba(10, 75, 156, 0.06) 39px),repeating-linear-gradient(90deg,
transparent,transparent 38px,rgba(10, 75, 156, 0.06) 38px,rgba(10, 75, 156, 0.06) 39px);pointer-events: none;z-index: 0;}
.about-wrap {
display: flex;
gap: 40px;
align-items: flex-start;
opacity: 0;
transform: translateY(40px);
transition: all 0.8s ease-out;
position: relative;
z-index: 1;
}
.about-wrap.show-animate {
opacity: 1;
transform: translateY(0);
}
.about-left {
flex: 2;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(2px);
padding: 35px;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid rgba(255, 255, 255, 0.6);
transition: var(--transition);
}
.about-left:hover {
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 8px 30px rgba(10, 75, 156, 0.12);
}
.about-text p {
font-size: 16px;
color: #333;
line-height: 1.8;
margin-bottom: 10px;
text-indent: 2em;
transition: var(--transition);
}
.about-text p:hover {
color: var(--main-blue);
padding-left: 6px;
}
.about-right {
flex: 1;
background: var(--main-blue);
color: var(--white);
padding: 30px 25px;
border-radius: var(--radius);
position: sticky;
top: 90px;
box-shadow: var(--shadow);

}
.about-right h3 {
margin-bottom: 20px;
font-size: 20px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.about-right li {
margin:25px 0;
font-size: 16px;
opacity: 0.9;
transition: var(--transition);
cursor: pointer;
}
.about-right li:hover {
padding-left: 8px;
color: var(--orange);
}
.about-right li i {
margin-right: 10px;
width: 18px;
text-align: center;
}
/* ===== 需求表单 ===== */
.form-bg {
background: linear-gradient(180deg, #eef4fc 0%, #f7f9fc 100%);
}
.form-box {
width: 100%;
max-width: 1400px;
margin: 0 auto;
background: var(--white);
padding: 45px 40px;
border-radius: var(--radius);
box-shadow: 0 8px 35px rgba(10, 75, 156, 0.10);
border: 1px solid rgba(10, 75, 156, 0.06);
}
.form-row {
display: flex;
gap: 20px;
margin-bottom: 22px;
}
.form-item {
flex: 1;
position: relative;
}
.form-item label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 6px;
letter-spacing: 0.3px;
}
.form-item label .required-star {
color: var(--orange);
margin-left: 2px;
}
.form-item input,
textarea {
width: 100%;
height: 45px;
padding: 0 16px;
border: 1px solid var(--border-light);
border-radius: 5px;
font-size: 16px;
transition: var(--transition);
background: #fafbfd;
color: #333;
}
.form-item input:focus,
textarea:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: var(--glow-blue);
background: #fff;
}
textarea {
height: 130px;
padding-top: 14px;
resize: none;
line-height: 1.7;
}
.form-item.important-field input {
border-color: #7aacdf;
border-left: 4px solid var(--main-blue);
background: #fdfeff;
font-weight: 500;
}
.form-item.important-field input:focus {
border-color: var(--main-blue);
border-left: 4px solid var(--main-blue);
box-shadow: var(--glow-blue);
background: #fff;
}
.form-item.important-field label {
color: var(--main-blue);
font-weight: 700;
}
.submit-btn {
width: 100%;
height: 50px;
background: linear-gradient(135deg, #ff7800 0%, #ff8c26 100%);
color: var(--white);
border: none;
font-size: 17px;
font-weight: 600;
cursor: pointer;
border-radius: 50px;
transition: var(--transition);
letter-spacing: 1px;
margin-top: 8px;
}
.submit-btn:hover {
background: linear-gradient(135deg, #e06c00 0%, #f07810 100%);
box-shadow: var(--glow-orange);
transform: translateY(-3px);
}
.submit-btn:active {
transform: scale(0.97);
}
/* ================================================================
===== ★ 右侧浮动按钮 =====
================================================================ */
.side-float-bar {
position: fixed;
right: 16px;
top: 50%;
transform: translateY(-50%);
z-index: 950;
display: flex;
flex-direction: column;
gap: 10px;
}
.side-float-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.13);
color: #fff;
font-size: 20px;
text-decoration: none;
overflow: visible;
border: none;
background: transparent;
-webkit-tap-highlight-color: transparent;
}
.side-float-btn.btn-phone {
background: var(--main-blue);
}
.side-float-btn.btn-phone:hover {
background: #0e5db8;
transform: translateX(-4px) scale(1.08);
box-shadow: 0 8px 24px rgba(10, 75, 156, 0.35);
}
.side-float-btn.btn-email {
background: #1565c0;
}
.side-float-btn.btn-email:hover {
background: #1a74d6;
transform: translateX(-4px) scale(1.08);
box-shadow: 0 8px 24px rgba(10, 75, 156, 0.35);
}
.side-float-btn.btn-qrcode {
background: #07c160;
font-size: 20px;
animation: pulse-qrcode 2.8s ease-in-out infinite;
}
.side-float-btn.btn-qrcode:hover {
background: #06ad56;
transform: translateX(-4px) scale(1.10);
box-shadow: 0 8px 28px rgba(7, 193, 96, 0.45);
animation: none;
}
@keyframes pulse-qrcode {
0%,
100% {
box-shadow: 0 4px 16px rgba(7, 193, 96, 0.28);
}
50% {
box-shadow: 0 4px 28px rgba(7, 193, 96, 0.55), 0 0 0 8px rgba(7, 193, 96, 0.08);
}
}
.side-float-btn.btn-top {
background: #3a3f47;
font-size: 17px;
opacity: 0;
visibility: hidden;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.side-float-btn.btn-top.visible {
opacity: 1;
visibility: visible;
}
.side-float-btn.btn-top:hover {
background: #2a2f36;
transform: translateX(-4px) scale(1.08);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.30);
}
.side-float-btn .float-tooltip {
position: absolute;
right: 62px;
white-space: nowrap;
background: rgba(5, 40, 82, 0.92);
color: #fff;
font-size: 13px;
padding: 7px 14px;
border-radius: 20px;
pointer-events: none;
opacity: 0;
transform: translateX(8px);
transition: all 0.3s ease;
letter-spacing: 0.4px;
font-weight: 500;
}
.side-float-btn:hover .float-tooltip {
opacity: 1;
transform: translateX(0);
}
/* ================================================================
===== ★ 二维码弹窗 =====
================================================================ */
.qrcode-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
z-index: 99999;
justify-content: center;
align-items: center;
padding: 20px;
}
.qrcode-modal.active {
display: flex;
}
.qrcode-modal-content {
background: #fff;
border-radius: 20px;
padding: 20px 25px 25px;
max-width: 300px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
position: relative;
animation: modalFadeIn 0.3s ease;
}
@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.92) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.qrcode-modal-close {
position: absolute;
top: 12px;
right: 18px;
font-size: 28px;
color: #aaa;
cursor: pointer;
transition: var(--transition);
background: none;
border: none;
line-height: 1;
-webkit-tap-highlight-color: transparent;
padding: 8px;
margin: -8px;
}
.qrcode-modal-close:hover {
color: #333;
transform: rotate(90deg);
}
.qrcode-modal .qr-image {
width: 160px;
height: 160px;
margin: 10px auto 20px;
background: #e8f0fe;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: #0a4b9c;
font-weight: 500;
border: 2px dashed #b0c8e0;
overflow: hidden;
}
.qrcode-modal .qr-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.qrcode-modal .qr-text {
font-size: 18px;
font-weight: 600;
color: #0a4b9c;
letter-spacing: 1px;
}
.qrcode-modal .qr-sub {
font-size: 14px;
color: #666;
margin-top: 6px;
}
/* ===== 极简页脚 ===== */
.footer-minimal {
background: var(--dark-blue);
color: #a0b8d6;
padding: 20px 0;
text-align: center;
font-size: 13px;
letter-spacing: 0.4px;
border-top: 2px solid #15407a;
}
.footer-minimal .container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 6px 16px;
}
.footer-minimal span {
opacity: 0.85;
}
/* ================================================================
===== ★ 响应式 =====
================================================================ */
@media screen and (max-width: 1100px) {
.product-wrap {
grid-template-columns: repeat(3, 1fr);
}
.adv-wrap {
grid-template-columns: repeat(2, 1fr);
}
.nav-list .dropdown.dropdown-grid {
min-width: 520px;
}
}
@media screen and (max-width: 768px) {
#about,
#demand {
display: none !important;
}
.nav-list {
display: none !important;
}
.menu-toggle {
display: block !important;
}
/* 手机模式顶部通栏只显示公司名称，隐藏电话邮箱 */
.header-top .container > div:last-child {
display: none !important;
}
.header-top .container {
justify-content: center !important;
}
.logo-img {
width: 40px;
height: 40px;
}
.logo-img img {
width: 40px;
height: 40px;
}
.logo-text .line-ch {
font-size: 20px;
}
.logo-text .line-en {
font-size: 11px;
}
.banner-box {
height: 380px;
}
.banner-item:nth-child(1) {
background-image: url("../images/banner/ban1-mobile.jpg");
}
.banner-item:nth-child(2) {
background-image: url("../images/banner/ban2-mobile.jpg");
}
.banner-item:nth-child(3) {
background-image: url("../images/banner/ban3-mobile.jpg");
}
.banner-text h1 {
font-size: 24px;
}
.banner-text p {
font-size: 15px;
margin-bottom: 20px;
}
.banner-text {
max-width: 100%;
}
.btn {
padding: 10px 22px;
}
.btn-blue {
margin-left: 8px;
}
.product-wrap {
grid-template-columns: repeat(2, 1fr);
}
.case-wrap {
grid-template-columns: 1fr;
}
.about-wrap {
flex-direction: column;
}
.about-left {
padding: 25px 20px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-box {
padding: 28px 18px;
}
.header-top .container {
flex-direction: column;
text-align: center;
}
.product-tab-list {
gap: 8px;
}
.product-tab-item {
padding: 8px 12px;
font-size: 13px;
}
.banner-item {
padding: 30px 0 50px;
}
#about::before {
opacity: 0.5;
}
.side-float-bar {
right: 8px;
gap: 7px;
}
.side-float-btn {
width: 40px;
height: 40px;
font-size: 16px;
}
.side-float-btn.btn-qrcode {
font-size: 17px;
}
.side-float-btn .float-tooltip {
display: none;
}
.side-float-btn.btn-top {
font-size: 14px;
}
.footer-minimal {
font-size: 11px;
padding: 14px 0;
}
.qrcode-modal-content {
padding: 30px 20px 25px;
}
.qrcode-modal .qr-image {
width: 160px;
height: 160px;
}
.qrcode-modal .qr-text {
font-size: 16px;
}
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
}
@media screen and (max-width: 480px) {
.product-wrap {
grid-template-columns: 1fr;
}
.adv-wrap {
grid-template-columns: 1fr;
}
.banner-box {
height: 300px;
}
.banner-text h1 {
font-size: 20px;
}
.banner-text p {
font-size: 14px;
}
.form-box {
padding: 22px 14px;
}
.section-title h2 {
font-size: 24px;
}
.adv-icon {
width: 56px;
height: 56px;
font-size: 24px;
}
.side-float-bar {
right: 6px;
gap: 5px;
}
.side-float-btn {
width: 36px;
height: 36px;
font-size: 14px;
}
.side-float-btn.btn-qrcode {
font-size: 15px;
}
.side-float-btn.btn-top {
font-size: 12px;
}
.submit-btn {
font-size: 15px;
height: 44px;
}
.qrcode-modal .qr-image {
width: 140px;
height: 140px;
}
}
/* ===== 首页产品卡片真实图片支持 ===== */
.product-img { overflow: hidden; position: relative; }
.product-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-img img { transform: scale(1.06); }
a.product-card { cursor: pointer; text-decoration: none; color: inherit; display: block; }

/* ===== Banner 文字层次动画 ===== */
.banner-item.active .banner-text h1 { animation: heroH1 1s .3s both; }
.banner-item.active .banner-text p { animation: heroFade 1s .6s both; }
.banner-item.active .banner-text .btn { animation: heroFade 1s .9s both; }
@keyframes heroH1 {
  0% { opacity:0; transform:translateY(40px) scale(.92); letter-spacing:2px; }
  60% { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1); letter-spacing:6px; }
}
@keyframes heroFade {
  from { opacity:0; transform:translateY(24px); }
  to { opacity:1; transform:translateY(0); }
}

/* ===== Banner 参考效果 ===== */
.banner-item { background-size:cover; background-position:center; }
.banner-text-wrap { justify-content:flex-start !important; padding-left:1% !important; }
.banner-text { text-align:left !important; max-width:1200px; }
.banner-text .banner-en { font-size:14px; letter-spacing:4px; color:#7fb3e8; margin-bottom:18px; font-weight:400; }
.banner-text h1 { font-size:52px !important; line-height:1.25; letter-spacing:4px; margin-bottom:18px; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.banner-text .banner-desc { font-size:17px; line-height:1.9; opacity:.9; margin-bottom:28px; }
.banner-text .btn { display:inline-block; }
@media(max-width:768px){
  .banner-text h1 { font-size:30px !important; letter-spacing:2px; }
  .banner-text .banner-desc { font-size:14px; }
  .banner-text-wrap { padding-left:24px !important; }
}

/* ===== Banner Ken Burns 缩放 + 文字渐显（配合轮播 JS 的 active 类） ===== */
.banner-item.active {
animation: kenburns 7s ease-out forwards;
}
.banner-item.active .banner-text .banner-en { animation: heroFade 1s .15s both; }
.banner-item.active .banner-text .banner-desc { animation: heroFade 1s .55s both; }
@keyframes kenburns {
from { background-size: 100%; background-position: center; }
to { background-size: 112%; background-position: center; }
}
@media (prefers-reduced-motion: reduce) {
.banner-item.active { animation: none; }
.banner-item.active .banner-text h1,
.banner-item.active .banner-text p,
.banner-item.active .banner-text .banner-en { animation: none; }
.banner-wrap { transition: none; }
}

/* ===== 走进融电模块：大气深蓝版 ===== */
.about-section {
background: linear-gradient(135deg, #052852 0%, #0a4b9c 55%, #1768bd 100%);
position: relative;
overflow: hidden;
}
.about-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
}
.about-section .section-title h2 { color: #fff; }
.about-section .section-title p { color: rgba(255,255,255,.72); }
.about-left {
flex: 2;
background: rgba(255,255,255,.07);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--radius);
padding:35px 30px;
box-shadow: 0 20px 50px rgba(0,0,0,.18);
transition: var(--transition);
}
.about-left:hover {
background: rgba(255,255,255,.10);
box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.about-brand { margin-bottom:18px; }
.about-brand-en {
display: inline-block;
font-size: 13px;
letter-spacing: 5px;
color: #ffb74d;
border: 1px solid rgba(255,183,77,.4);
padding: 4px 14px;
border-radius: 30px;
margin-bottom: 12px;
}
.about-brand h3 {
font-size: 30px;
font-weight: 700;
color: #fff;
letter-spacing: 2px;
margin: 0;
}
.about-text p {
font-size: 15px;
color: rgba(255,255,255,.88);
line-height: 1.9;
margin-bottom: 12px;
text-indent: 2em;
}
.about-text p:hover { color: #fff; padding-left: 6px; }
.about-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 22px;
}
.about-stats .stat {
text-align: center;
padding: 16px 8px 13px;
background: rgba(255,255,255,.08);
border-radius: 10px;
border: 1px solid rgba(255,255,255,.10);
transition: var(--transition);
}
.about-stats .stat:hover {
transform: translateY(-3px);
background: rgba(255,255,255,.13);
}
.about-stats .num {
font-size: 28px;
font-weight: 700;
color: #ffb74d;
line-height: 1;
}
.about-stats .label {
font-size: 12px;
color: rgba(255,255,255,.72);
margin-top: 6px;
letter-spacing: 1px;
}
.about-right {
flex: 1;
background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.12));
border: 1px solid rgba(255,255,255,.14);
color: var(--white);
padding: 30px 20px;
border-radius: var(--radius);
}
.about-right h3 { color: #fff; border-bottom-color: rgba(255,255,255,.28); }
.about-right li { color: rgba(255,255,255,.92); }
.about-right li:hover { color: var(--orange); }
@media screen and (max-width: 768px) {
.about-stats { grid-template-columns: repeat(2, 1fr); }
.about-left { padding: 28px 22px; }
.about-brand h3 { font-size: 24px; }
}