/* ===== 全局重置 ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Noto Sans SC','Source Han Sans CN',"Source Han Sans",'source-han-sans',PingFang SC,-apple-system,Arial,sans-serif,Helvetica,system-ui,Segoe UI,Roboto,Ubuntu,Noto Sans;font-weight:normal;
}
/* ===== 页面滚动条 ===== */
body::-webkit-scrollbar {
width: 7px;
height: 1px;
}
body::-webkit-scrollbar-thumb {
background: #2b72c2;
border-radius:0px;
}
body::-webkit-scrollbar-track {
background: #052852;
}
/* webfont：Outfit（英文数字）+ SourceHanSansCN 思源黑体（中文） */
/* 已转为 woff2，与 fonts/ 目录文件对应；Outfit 与思源黑体均为 SIL OFL 1.1 开源协议 */
@font-face {
    font-family: "Outfit";
    src: url("fonts/Outfit-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("fonts/Outfit-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: "Outfit";
    src: url("fonts/Outfit-Light.woff2") format("woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: "Source Han Sans CN";
    src: url("fonts/SourceHanSansCN-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
/* 页面引用（中文缺字时回退系统字体） */
/* 标题字重与官网一致 */
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    font-weight: 600;
}
body {
color: #333;
background-color: #f2f2f2;
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: #1565c0;
--dark-blue: #2b72c2;
--deep-navy: #053a73;
--light-blue: #eef4fc;
--orange: #ff7800;
--orange-deep: #e06c00;
--gray-text: #666;
--white: #fff;
--shadow: 0 4px 15px rgba(18, 123, 229, 0.12);
--radius: 10px;
--tag-radius: 100px;
--transition: all 0.3s ease;
--border-light: #d0d7e3;
--border-focus: #127be5;
--glow-blue: 0 0 0 3px rgba(18, 123, 229, 0.14);
--glow-orange: 0 6px 22px rgba(255, 120, 0, 0.30);
}
/* ===== 通用容器 ===== */
.container {
width: 100%;
max-width: 1640px;
margin: 0 auto;
padding: 0 20px;
}
.section-padding {
padding:50px 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-nav {
background: #127be5;
height:80px;
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:70px;
height:70px;
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:30px;
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;
text-align:left;
}
/* ---- 主导航 ---- */
.nav-list {
display: flex;
align-items: center;
}
.nav-list>li {
position: relative;
display: flex;
align-items: center;
}
.nav-list>li>a {
color: var(--white);
padding: 0 25px;
line-height: 75px;
display: inline-block;
font-size: 18px;
font-weight:600;
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: 14px;
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:160px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(18, 123, 229, 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:10px 25px;
color: #333;
font-size: 15px;
text-align:center;
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: 15px 20px;
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: #333;
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:5px;
}
/* ===== 移动端导航（抽屉）- 彻底修复可点击性 ===== */
.mobile-nav {
display: none;
position: absolute;
top: 75px;
left: 0;
width: 100%;
background: #127be5;
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: 10px 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: 860px;
min-height: 640px;
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(18, 123, 229, 0.42), rgba(5, 58, 115, 0.36));
}
.banner-item:nth-child(1) {
background-image: url("../images/banner/home1.jpg");
}
.banner-item:nth-child(2) {
background-image: url("../images/banner/home2.jpg");
}
.banner-item:nth-child(3) {
background-image: url("../images/banner/home3.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-scroll {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 12px;
letter-spacing: 3px;
text-align: center;
opacity: 0.85;
z-index: 3;
animation: bannerScroll 2s ease-in-out infinite;
}
.banner-scroll i {
display: block;
margin-top: 4px;
font-size: 15px;
}
@keyframes bannerScroll {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 8px); }
}
@media screen and (max-width: 480px) {
.banner-scroll { display: none; }
}
.banner-dots {
position: absolute;
bottom: 100px;
left: 36px;
transform: none;
display: flex;
flex-direction: column;
gap: 12px;
z-index: 3;
}
@media (max-width: 768px) {
.banner-dots { bottom: 78px; left: 16px; gap: 9px; }
.banner-dots .dot { width: 9px; height: 9px; }
}
.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: #333;
}
.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(18, 123, 229, 0.08);
border-color: var(--orange);
color: var(--orange);
}
/* ===== 产品与案例 操作区 ===== */
.home-actions {
text-align: center;
margin: -6px 0 30px;
}
.home-btn {
display: inline-block;
padding: 10px 30px;
border-radius:50px;
font-size: 15px;
color: #fff;
margin: 0 10px;
text-decoration: none;
transition: all 0.3s ease;
letter-spacing: 1px;
}
.home-btn-blue {
background: #127be5;
}
.home-btn-blue:hover {
background: #053a73;
}
.home-btn-green {
background: #16a34a;
}
.home-btn-green:hover {
background: #0f7a37;
}
.home-more {
text-align: center;
margin-top:50px;
}
.home-more a {
display: inline-block;
color: #127be5;
font-size: 15px;
text-decoration: none;
border: 1px solid #127be5;
padding:10px 30px;
border-radius:50px;
transition: all 0.3s ease;
}
.home-more a:hover {
background: #127be5;
color: #fff;
}
/* ===== 产品卡片 ===== */
.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(18, 123, 229, 0.15);
}
.product-img {
height: 252px;
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: 16px;
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(4, 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: 253px; */
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: #333;
margin-bottom: 8px;
font-size: 17px;
}
/* ===== 走进博远 ===== */
#about {
position: relative;
background: #f2f6fd;
}
#about::before {
content: "";
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(0deg,transparent,transparent 38px,rgba(18, 123, 229, 0.06) 38px,rgba(18, 123, 229, 0.06) 39px),repeating-linear-gradient(90deg,
transparent,transparent 38px,rgba(18, 123, 229, 0.06) 38px,rgba(18, 123, 229, 0.06) 39px);pointer-events: none;z-index: 0;}
.about-wrap {
display: flex;
gap:20px;
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(18, 123, 229, 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);
border: 1px solid rgba(255, 255, 255, 0.10);
}
.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-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(18, 123, 229, 0.10);
border: 1px solid rgba(18, 123, 229, 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;
}
/* ================================================================
===== ★ 右侧浮动按钮 =====
================================================================ */
.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: #0a65d6;
transform: translateX(-4px) scale(1.08);
box-shadow: 0 8px 24px rgba(18, 123, 229, 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(18, 123, 229, 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, 58, 115, 0.94);
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: #127be5;
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: #127be5;
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: 14px;
letter-spacing: 0.4px;
border-top:0px 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);
}
.case-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,
.nav-list {
display: none !important;
}
.menu-toggle {
display: block !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: 76vh;
min-height: 500px;
}
.banner-item:nth-child(1) {
background-image: url("../images/banner/home1-mobile.jpg");
}
.banner-item:nth-child(2) {
background-image: url("../images/banner/home2-mobile.jpg");
}
.banner-item:nth-child(3) {
background-image: url("../images/banner/home3-mobile.jpg");
}
.banner-item {
align-items: flex-start;
}
.banner-text {
margin-top: 7vh;
}
.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: repeat(2, 1fr);
}
.about-wrap {
flex-direction: column;
}
.about-left {
padding: 25px 20px;
}
.form-row {
flex-direction: column;
gap: 0;
}
.form-box {
padding: 28px 18px;
}
.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;
}
.case-wrap {
grid-template-columns: 1fr;
}
.adv-wrap {
grid-template-columns: 1fr;
}
.banner-box {
height: 55vh;
min-height: 340px;
}
.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;
}
.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:58px !important; line-height:1.25; letter-spacing:0px; margin-bottom:18px; text-shadow: 3px 0 10px rgb(22 78 145 / 40%);font-family:"Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;font-weight: bold;}
.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 { }
.banner-item.active .banner-text .banner-en { animation: heroFade 1s .15s both; }
.banner-item.active .banner-text .banner-desc { animation: heroFade 1s .55s both; }
@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 {
position: relative;
overflow: hidden;
background-color: #f2f7fd;
background-image: url("../images/banner/about-bg.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.about-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(10,75,156,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(10,75,156,.028) 1px, transparent 1px);
background-size: 44px 44px;
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
pointer-events: none;
}
.about-section .section-title h2 { color: var(--main-blue); }
.about-section .section-title p { color: #666; }
.about-left {
flex: 2;
background: rgba(255,255,255,.94);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(10,75,156,.10);
border-radius: var(--radius);
padding: 40px 38px;
box-shadow: 0 18px 45px rgba(10,75,156,.12);
transition: var(--transition);
}
.about-left:hover {
background: #fff;
box-shadow: 0 22px 55px rgba(10,75,156,.16);
}
.about-brand { margin-bottom: 18px; }
.about-brand-en {
display: inline-block;
font-size: 13px;
letter-spacing: 5px;
color: var(--orange);
border: 1px solid rgba(255,120,0,.35);
padding: 4px 14px;
border-radius: 30px;
margin-bottom: 12px;
background: rgba(255,120,0,.05);
}
.about-brand h3 {
font-size: 30px;
font-weight: 700;
color: var(--main-blue);
letter-spacing: 2px;
margin: 0;
}
.about-text p {
font-size: 15px;
color: #444;
line-height: 1.9;
margin-bottom: 12px;
text-indent: 2em;
}
.about-text p:hover { color: var(--main-blue); 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(10,75,156,.05);
border: 1px solid rgba(10,75,156,.08);
border-radius: 10px;
transition: var(--transition);
}
.about-stats .stat:hover {
transform: translateY(-3px);
background: rgba(10,75,156,.09);
}
.about-stats .num {
font-size: 28px;
font-weight: 700;
color: var(--orange);
line-height: 1;
}
.about-stats .label {
font-size: 12px;
color: #777;
margin-top: 6px;
letter-spacing: 1px;
}
.about-right {
flex: 1;
background: linear-gradient(180deg, #f7f9fc, #eef4fc);
border: 1px solid rgba(10,75,156,.10);
border-radius: var(--radius);
padding: 30px 25px;
box-shadow: 0 14px 32px rgba(10,75,156,.08);
}
.about-right h3 { color: var(--main-blue); border-bottom-color: rgba(10,75,156,.14); }
.about-right li { color: #555; }
.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; }
}
/* ============ v5 改造样式 ============ */
/* 1. 主导航白底 + 字体色 */
.header-nav { background: #ffffff; box-shadow: 0 2px 14px rgba(18,123,229,.10); border-bottom: 1px solid #eaf1fa; }
.nav-list>li>a { color: #333333; }
.nav-list>li>a:hover { color: var(--main-blue); }
.logo-text .line-ch { color: #333;}
.logo-text .line-en { color: #8a93a6;}
/* 6. h2/h3 统一 #333333 */
h2, h3 { color: #333333; }
.section-title h2 { color: #333333; }
.about-section .section-title h2 { color: #333333;}
.about-right h3 { color: #333333; }
.product-info h3 { color: #333333; }
/* 移动导航白底 */
.mobile-nav { background: #ffffff; box-shadow: 0 12px 30px rgba(0,0,0,.14); }
.mobile-nav > li { border-bottom: 1px solid #eef2f7; }
.mobile-nav > li > a { color: #333333 !important; }
.mobile-nav > li > a:active { background: #f0f6ff !important; }
.mobile-nav .dropdown-mobile { background: #f5f9ff; }
.mobile-nav .dropdown-mobile li { border-bottom: 1px solid #e6eef8; }
.mobile-nav .dropdown-mobile li a { color: #333333 !important; }
.mobile-nav .dropdown-mobile li a:active { background: #e8f1fd !important; color: #333333 !important; }
/* 5. 首页产品与案例：白底全屏 + 轮播 */
.pc-section { background: #ffffff; }
.pc-box { overflow: hidden; }
.pc-track { display: flex; transition: transform .5s ease; }
.pc-page { flex: 0 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pc-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top:40px; }
.pc-btn { width: 44px; height: 44px; border: 1px solid var(--main-blue); color: var(--main-blue); background: #fff; border-radius: 50%; cursor: pointer; font-size: 15px; transition: all .3s; display: inline-flex; align-items: center; justify-content: center; }
.pc-btn:hover { background: var(--main-blue); color: #fff; }
.pc-btn:disabled { opacity: .3; cursor: default; }
.pc-dots { display: flex; gap: 8px; }
.pc-dot { width: 10px; height: 10px; border-radius: 5px; background: #c9d6e8; cursor: pointer; transition: all .3s; }
.pc-dot.active { width: 26px; background: var(--main-blue); }
@media (max-width: 1100px) { .pc-page { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 600px) { .pc-page { grid-template-columns: repeat(2, 1fr); gap: 14px; } .pc-page .product-img { height: 150px; } }
@media (max-width: 400px) { .pc-page { grid-template-columns: 1fr; gap: 14px; } }
/* 2. Banner 左右翻页箭头（中下部位置） */
.banner-arrow { position: absolute; bottom: 120px; z-index: 20; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 18px; cursor: pointer; transition: all .3s; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.banner-arrow:hover { background: rgba(255,255,255,.32); }
.banner-prev { left: auto; right: 258px; bottom: 132px; }
.banner-next { right: 190px; bottom: 132px; }
@media (max-width: 768px) { .banner-arrow { width: 40px; height: 40px; font-size: 14px; bottom: 96px; } .banner-prev { left: auto; right: 150px; } .banner-next { right: 94px; } }
/* ===== 3. Banner 右侧大圆按钮 ===== */
.banner-circle-btn {
position: absolute;
right: 64px;
bottom: 110px;
width: 96px;
height: 96px;
border-radius: 50%;
background: rgba(255,255,255,.12);
border: 2px solid rgba(255,255,255,.55);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
z-index: 20;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: all .3s ease;
box-shadow: 0 8px 26px rgba(0,0,0,.18);
}
.banner-circle-btn i { font-size: 22px; margin-bottom: 2px; }
.banner-circle-btn span { font-size: 13px; letter-spacing: 3px; }
.banner-circle-btn:hover { background: var(--main-blue); border-color: var(--main-blue); transform: scale(1.06); box-shadow: 0 10px 32px rgba(18,123,229,.45); }
@media (max-width: 768px) {
.banner-circle-btn { right: 16px; bottom: 82px; width: 62px; height: 62px; }
.banner-circle-btn i { font-size: 16px; }
.banner-circle-btn span { font-size: 10px; letter-spacing: 2px; }
}
/* ===== 5. 手机模式独立 Banner 图片（竖版 900x1200）===== */
@media (max-width: 768px) {
.banner-item:nth-child(1) { background-image: url("../images/banner/home1-mobile.jpg"); }
.banner-item:nth-child(2) { background-image: url("../images/banner/home2-mobile.jpg"); }
.banner-item:nth-child(3) { background-image: url("../images/banner/home3-mobile.jpg"); }
.banner-item { background-position: 70% center; }
.banner-item::before { background: linear-gradient(90deg, rgba(18,123,229,.55), rgba(5,58,115,.25)); }
}
/* ===== 首页"产品与案例"模块：标题白底全屏 + 产品区灰底 ===== */
#product { background: #ffffff; }
#product .section-title { padding: 56px 20px 36px; }
#product .section-title h2 { color: #333333; }
#product .section-title p { color: #666; max-width: 1000px; margin: 12px auto 0; }
#product .pc-zone { background: #f2f2f2; padding: 48px 0 70px; }
/* ===== 产品列表分页条 ===== */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.pager-btn { min-width: 44px; height: 40px; padding: 0 16px; border: 1px solid #d5e2f2; background: #fff; color: #333; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all .25s; }
.pager-btn:hover { border-color: var(--main-blue); color: var(--main-blue); }
.pager-btn.active { background: var(--main-blue); color: #fff; border-color: var(--main-blue); }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn:disabled:hover { border-color: #d5e2f2; color: #333; }
.pager-num { min-width: 40px; width: 40px; padding: 0; }
.pager-info { font-size: 13px; color: #888; margin-left: 6px; }
@media (max-width: 600px) { .pager { gap: 7px; } .pager-btn { min-width: 38px; height: 36px; padding: 0 12px; font-size: 13px; } .pager-info { width: 100%; text-align: center; margin-top: 6px; } }
/* ===== 详情页"资料更新中"空态 ===== */
.detail-empty { grid-column: 1 / -1; text-align: center; padding: 70px 20px; }
.detail-empty i { font-size: 64px; color: #c9d6e8; margin-bottom: 18px; display: block; }
.detail-empty h3 { font-size: 22px; color: #333; margin-bottom: 10px; }
.detail-empty p { font-size: 14px; color: #888; line-height: 1.9; margin-bottom: 24px; }
/* ================================================================
===== ★ v10 移动端优化（用户 8 项要求） =====
================================================================ */
/* ---- 1. 手机导航栏高度收窄 ---- */
@media screen and (max-width: 768px) {
  .header-nav { height: 56px; }
  .logo-img { width: 34px; height: 34px; }
  .logo-img img { width: 34px; height: 34px; }
  .logo-text .line-ch { font-size:18px; letter-spacing:6px; }
  .logo-text .line-en { font-size:9px; letter-spacing: 0.3px;}
  .menu-toggle { font-size: 22px; padding: 12px 14px; margin: -12px -14px; }
  .mobile-nav { top: 56px; max-height: calc(100vh - 56px); }
  .mobile-nav > li > a { padding: 15px 20px !important; font-size:15px !important; }
  .mobile-nav .dropdown-mobile li a { padding: 13px 18px 13px 36px !important; font-size: 14px !important; }
}
/* ---- 2. 手机 Banner：大标题居中，显示小标题；图片自适应 ---- */
@media screen and (max-width: 768px) {
  .banner-box { height: 64vh; min-height: 460px; }
  .banner-item { background-size: cover; background-position: 62% center; }
  .banner-item::before { background: linear-gradient(90deg, rgba(18,123,229,.60), rgba(5,58,115,.28)); }
  .banner-text-wrap { justify-content: center !important; align-items: center !important; padding-left: 22px !important; padding-right: 22px !important; }
  .banner-text { text-align: center !important; max-width: 100%; margin-top: 4vh; }
  .banner-text .banner-en { display: block !important; font-size: 12px; letter-spacing: 3px; color: #9cc8f5; margin-bottom: 10px; }
  .banner-text h1 { font-size: 24px !important; margin-bottom: 10px; line-height: 1.4; letter-spacing: 1px; }
  .banner-text .banner-desc { display: block !important; font-size: 13px; line-height: 1.75; opacity: .92; margin-bottom: 16px; }
  .banner-text .btn { margin-top: 2px; padding: 9px 20px; font-size: 13px; }
  .banner-circle-btn { right: 12px; bottom: 64px; width: 56px; height: 56px; }
  .banner-arrow { bottom: 72px; }
  .banner-prev { right: 118px; }
  .banner-next { right: 66px; }
  .banner-dots { bottom: 56px; }
}
@media screen and (max-width: 480px) {
  .banner-box { height: 56vh; min-height: 400px; }
  .banner-text h1 { font-size: 21px !important; }
  .banner-text .banner-desc { font-size: 12px; }
}
/* ---- 3. 产品与案例 section-title 手机尺寸 ---- */
@media screen and (max-width: 768px) {
  .section-title { margin-bottom: 16px; }
  .section-title h2 { font-size: 22px; padding-bottom: 8px; }
  .section-title h2::after { width: 56px; height: 2px; }
  .section-title p { font-size: 13px; line-height: 1.7; margin-top: 8px; }
  #product .section-title { padding: 30px 16px 20px; }
  #product .section-title p { max-width: 100%; margin: 8px auto 0; }
  #product .pc-zone { padding: 26px 0 40px; }
  .pc-section { padding: 0; }
}
/* ---- 4. 首页产品：手机一排 2 个 + 翻动按钮 ---- */
@media screen and (max-width: 480px) {
  .pc-page { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .pc-page .product-img { height: 108px; }
  .pc-page .product-info { padding: 9px 10px 12px; }
  .pc-page .product-info h3 { font-size: 13px; margin-bottom: 5px; line-height: 1.4; }
  .pc-page .product-info p { font-size: 11px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .pc-nav { margin-top: 20px; gap: 10px; }
  .pc-btn { width: 34px; height: 34px; font-size: 13px; }
  .pc-dot { width: 8px; height: 8px; }
  .pc-dot.active { width: 20px; }
}
/* ---- 5. 首页案例：手机做成产品式轮播，减少下滑 ---- */
.case-box { overflow: hidden; }
@media screen and (max-width: 768px) {
  #caseWrap.case-mobile { display: flex; gap: 0; transition: transform .5s ease; }
  #caseWrap.case-mobile .case-page { display: grid; grid-template-columns: 1fr; flex: 0 0 100%; width: 100%; flex-shrink: 0; }
  #caseWrap.case-mobile .case-card { width: 100%; margin-bottom: 0; }
  #caseNav { display: flex; }
  #caseWrap.case-mobile .case-img { height: 180px; overflow: hidden; }
  #caseWrap.case-mobile .case-text { padding: 14px 16px; }
  #caseWrap.case-mobile .case-text h3 { font-size: 15px; margin-bottom: 8px; line-height: 1.4; }
  #caseWrap.case-mobile .case-text p { font-size: 13px; line-height: 1.6; color: #666; }
}
@media screen and (max-width: 480px) {
  #caseWrap.case-mobile .case-img { height: 160px; }
  #caseWrap.case-mobile .case-text { padding: 12px 14px; }
  #caseWrap.case-mobile .case-text h3 { font-size: 14px; }
  #caseWrap.case-mobile .case-text p { font-size: 12px; }
}

/* ================================================================
===== ★ v11 移动端优化（手机端显示精简） =====
================================================================ */
@media screen and (max-width: 768px) {
  /* 右侧浮动按钮栏：只保留电话和邮箱，隐藏二维码和回到顶部 */
  .side-float-btn.btn-qrcode,
  .side-float-btn.btn-top { display: none !important; }

  /* Banner模块：隐藏右侧产品大圆按钮和左右翻页箭头 */
  .banner-circle-btn,
  .banner-arrow { display: none !important; }
}