/* 公用样式 */
#c-placeholder {height: 1.2rem;}
header {position: fixed; left: 0; top: 0; z-index: 99; width: 100%; transition: .6s; }
.headBox {transition: .5s; height: 1rem; position: relative; z-index: 1; width: 14rem; margin: 0 auto;}
.headBox .logo {padding:.1rem 0;height: 100%;}
.headBox .logo img {max-width: 100%; height: .73rem; max-height: 100%; object-fit: contain;}
.headBox .logo .logob {display: none;}
.headBox .le {height: 100%; flex-shrink: 0; width: auto;}
.headBox .le .logo a {height: 100%; display: flex; align-items: center;}
.headBox .re {height: 100%;gap: 1rem;}
/* 导航 */
nav {height: 100%;flex: 1;}
nav > ul {display: flex; height: 100%; align-items: center;}
nav > ul > li {height: 100%; display: flex; align-items: center; position: relative;margin: 0 auto;}
nav > ul > li > a { color: #fff; transition: all 0.4s; font-size: var(--font18); position: relative;}
nav > ul > li > a:hover { color: red;}
/* nav > ul > li > a::after {content: ''; opacity: 0; display: block; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: .12rem; height: .14rem; background: #23dae0; transition: all 0.4s; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);} */
nav > ul > li.on > a { color: #E72211;}
@media (any-hover: hover) {
nav > ul > li > a:hover::after { opacity: 1;}
}
/* 二级导航 */
.navTwo2 {display: none; position: absolute; left: 50%; transform: translateX(-50%); top: 100%;background: #fff; }
.navTwo2 dl {border-top: 2px solid #23dae0; background: #fff; min-width: 1.5rem; padding: .1rem; border-radius: 0 0 .1rem .1rem; top: 100%; box-shadow: 0 .1rem .2rem 0 rgba(0, 0, 0, 0.06);}
.navTwo2 dl dd { border-bottom: 1px solid #dbdbdb; text-align: center;}
.navTwo2 dl dd:last-child {border-bottom: none;}
.navTwo2 dl dd > a {padding: .08rem .1rem; display: block; position: relative;}
.navTwo2 dl dd > a::after {content: ""; position: absolute; bottom: 0; left: 0; height: 1px; width: 0; transition: .5s; background: #23dae0; }
.navTwo2 dl dd > a:hover {color: #23dae0 !important; background: none !important;}
.navTwo2 dl dd > a:hover::after {width: 100%;}
/* 产品中心二级导航 */
nav ul li .navTwo {position: fixed; border-top: 1px solid #eee; left: 0; background: #ffffff; box-shadow: 0px .313rem .625rem -0.313rem rgba(0,0,0,0.12); top: 1.5rem; width: 100%; display: none;}
.navbox{justify-content: space-between;}
.nav-left{width: 20%; padding-top: .72rem;}
.nav-left strong{ color: #333;}
.nav-middle {width: 28%; padding: .74rem .6rem .6rem; border-left: .01rem solid #eee; border-right: .01rem solid #eee;}
.nav-middle dl dt{ padding-bottom: 0.01rem; margin-bottom: 0.15rem;}
.nav-middle dl dt a{ display: block;font-size: var(--font20)!important;color: #434343!important;border-bottom: .01rem solid #eee;position: relative;padding-left: .21rem!important;padding-bottom: .16rem!important;margin-bottom: .17rem!important;cursor: pointer;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.nav-middle dl dt a::after {position: absolute;left: 0ex;top: .07rem;width: .04rem;height: .16rem;background: #B8B8B8;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;content: "";display: block;}
.nav-middle dl dt a::before {position: absolute;left: 0px;bottom: -1px;height: .01rem;width: 0%;background: #23dae0;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;content: "";display: block;}
@media (any-hover: hover) {
.nav-middle dl dt a:hover{color: #23dae0!important;}
.nav-middle dl dt a:hover::after{ background: #23dae0;}
.nav-middle dl dt a:hover::before{ width: 80%;}
}
.nav-middle dl dt.active a{color: #23dae0!important;}
.nav-middle dl dt.active a::after{ background: #23dae0;}
.nav-middle dl dt.active a::before{ width: 80%;}
.nav-right {width: 40%;padding: .8rem 0px .3rem 0px;margin-left:.94rem;}
.nav-pic img{display: block; width: 100%;}
/* 搜索 */
.head_search {cursor: pointer; position: relative;}
.search-dropdown {position: absolute;top: 110%;right: 0;width: 3.5rem;background: #fff;box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.1);padding: .2rem;border-radius: .1rem;margin-top: .15rem;opacity: 0;visibility: hidden;transform: translateX(3%);transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);z-index: 100;}
.search-dropdown.active {opacity: 1;visibility: visible;}
/* 小三角 */
.search-dropdown::before {content: "";position: absolute;bottom: 100%;right: .15rem;border-width: .1rem;border-style: solid;border-color: transparent transparent #fff transparent;}
.search-dropdown .search-form {display: flex;align-items: center;background: #f5f5f5;border-radius: .5rem;padding: .05rem .15rem;border: 1px solid transparent;transition: all 0.3s;width: 100%;}
.search-dropdown .search-form:focus-within {background: #fff;border-color: #0056FF;box-shadow: 0 0 .1rem rgba(102, 45, 145, 0.1);}
.search-dropdown .search-input {flex: 1;border: none;background: transparent;padding: .1rem;font-size: var(--font14);color: #333;outline: none;}
.search-dropdown .search-submit {background: transparent;border: none;color: #0056FF;font-size: var(--font18);cursor: pointer;display: flex;align-items: center;justify-content: center;transition: transform 0.3s;}
.search-dropdown .search-submit:hover {transform: scale(1.1);}
@media screen and (max-width: 767px) {
.search-dropdown {position: fixed;top: 1.2rem; left: 5%;right: 5%;width: 90%;margin-top: 0; transform: translateX(0%);}
.search-dropdown::before {display: none;}
}
@media (any-hover: hover) {
/* header:hover{background: #fff; box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.1);} */
/* header:hover .headBox .logo .logoa {display: none;}
header:hover .headBox .logo .logob {display: block;}
header:hover nav > ul > li > a {color: #3d3d3d;}
header:hover .searchBtn i {color: #3d3d3d;}
header:hover .head_luang a {color: #3d3d3d;} */
.head_luang a:hover {color: #0056FF !important;}
}
header.c-style1 {background: #fff; box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.05);}
header.c-style1 .headBox .logo .logoa {display: none;}
header.c-style1 .headBox .logo .logob {display: block;}
header.c-style1 nav > ul > li > a {color: #3d3d3d;}
header.c-style1 nav > ul > li.on > a {color: #E72211;}
header.c-style1 nav > ul > li > a:hover {color: #E72211;}
header.c-style1 .searchBtn i {color: #3d3d3d;}
header.c-style1 .head_luang a {color: #3d3d3d;}
header.c-style2 {background: #fff; box-shadow: 0 0 .1rem rgba(0, 0, 0, 0.05);}
header.c-style2 .headBox {height: 1.2rem;}
header.c-style2 .headBox .logo .logoa {display: none;}
header.c-style2 .headBox .logo .logob {display: block;}
header.c-style2 nav > ul > li > a {color: #3d3d3d;}
header.c-style2 .searchBtn i {color: #3d3d3d;}
header.c-style2 .head_luang a {color: #3d3d3d;}
header.c-style2 .navTwo {top: 1.2rem;}
header.c-style3 {}
header.c-style3 .headBox .logo .logoa {display: none;}
header.c-style3 .headBox .logo .logob {display: block;}
header.c-style3 .searchBtn img{-webkit-filter: brightness(1) invert(1); filter: brightness(1) invert(1);}
header.c-style3 nav > ul > li > a {color: #3d3d3d;}
header.c-style3 .searchBtn i {color: #3d3d3d;}
header.c-style3 .head_luang a {color: #3d3d3d;}
/* header.c-style3 .navTwo {top: 1.2rem;} */
/* =================头部 end!!!=================== */
/* ===============公用css star!!!!===================*/
.more2 {display: inline-flex; border-radius: 100px; background: #001e62; color: #fff; padding: .15rem .24rem; transition: .5s;}
.more2 i {font-size: var(--font14); margin-left: .1rem; font-weight: 600; transform: rotate(145deg); display: inline-block; transition: .5s;}
.getcase { display: flex; position: relative; z-index: 2;}
.getcase a { height: .5rem; display: flex; align-items: center; min-height: 36px; padding: 0 .25rem 0 .23rem; position: relative;}
.getcase a::before { content: ''; width: 100%; height: 100%; background: #e72211; transition: all 0.4s; position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: -1; pointer-events: none;}
.getcase a span {transition: all 0.4s;}
.getcase a i {margin-left: .1rem; width: .23rem; height: .23rem; border-radius: 50%; display: flex; justify-content: center; align-items: center;transition: all 0.4s; overflow: hidden;}
.getcase a i::before { animation: arrowRun 5s infinite;}
@media (any-hover: hover) {
/*.getcase a:hover::before { width: .5rem;}*/
/*.getcase a:hover i { transform: translateX(.12rem);}*/
}
/* 鼠标跟随按钮 */
.explore-cursor {z-index: 111; position: absolute;top: 0;left: 0;width: 1.6rem;height: 1.6rem;background: #23dae0;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;pointer-events: auto;z-index: 100;opacity: 0;transform: scale(0);transition: opacity 0.3s, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);white-space: nowrap;text-decoration: none;will-change: transform;}
/* ===============公用css end!!!!===================*/
/* ======首页======= */
.indexMain {position: relative;}
.indexMain > .indexBanner {height: 100vh; position: relative; overflow: hidden; z-index: 2;}
.indexMain > div > .bjBox {height: 100%;position: absolute; width: 100%;left: 0;top: 0; z-index: -1;}
.indexMain > div > .bjBox > img {width: 100%; height: 100%; object-fit: cover; display: block;}
/* 第一屏 */
.indexBanner { position: relative; top: 0; overflow: hidden; height: 100%;}
.indexBanner .swiper,
.indexBanner .swiper-wrapper,
.indexBanner .slide {height: 100%;}
.indexBanner .swiper {position: relative;}
.indexBanner .slide {overflow: hidden;}
.indexBanner .slide .imgBox {position: absolute; inset: 0; height: 100%;}
.indexBanner .slide .imgBox::after {content: ""; position: absolute; inset: 0; background: rgba(0, 28, 82, .15); pointer-events: none;}
.indexBanner .slide .imgBox video{display: block; width: 100%; height: 100%; }
.indexBanner .slide .imgBox img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: 1s linear 2s;transform: scale(1.1, 1.1);}
/* 当前 */
.indexBanner .swiper-slide-active .imgBox img, .indexBanner .swiper-slide-duplicate-active .imgBox img {transition: 6s linear;transform: scale(1, 1);}
.indexBanner .slide .box {position: relative; z-index: 2; width: 100%; height: 100%;}
.indexBanner .slide .box .more {margin-top: .75rem;}
/* 控件 */
.indexBanner .swiper-pagination {left: 5%; bottom: 6.6%; width: auto; display: flex; align-items: center; gap: .15rem;}
.indexBanner .swiper-pagination-bullet {position: relative; width: .4rem; height: .4rem; margin: 0 !important; display: flex; align-items: center; justify-content: center; background: transparent; opacity: 1;}
.indexBanner .swiper-pagination-bullet svg {position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); opacity: 0; transition: opacity .3s;}
.indexBanner .swiper-pagination-bullet circle {fill: none; stroke-width: 1.4; stroke-linecap: round;}
.indexBanner .swiper-pagination-bullet .progress-bg {stroke: rgba(255,255,255,.28);}
.indexBanner .swiper-pagination-bullet .progress-bar {stroke: #23d8e8; stroke-dasharray: 113.1; stroke-dashoffset: 113.1;}
.indexBanner .swiper-pagination-bullet i {position: relative; z-index: 1; width: 5px; height: 5px; border-radius: 50%; background: #fff; display: block;}
.indexBanner .swiper-pagination-bullet-active svg {opacity: 1;}
.indexBanner .swiper-pagination-bullet-active .progress-bar {animation: bannerProgress 5s linear forwards;}
.indexBanner .banner-nav {position: absolute; right: 5.8%; bottom: 6.6%; z-index: 5; display: flex; align-items: center; gap: 12px;}
.indexBanner .con{
margin-top: 2.72rem;
}
.indexBanner .swiper-button-prev,
.indexBanner .swiper-button-next {position: static; width: .78rem; height: .78rem; margin: 0; border-radius: 50%; color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.03); transition: all .3s;}
.indexBanner .swiper-button-prev::after,
.indexBanner .swiper-button-next::after {display: none;}
.indexBanner .swiper-button-prev::before,
.indexBanner .swiper-button-next::before {content: ""; display: block; width: 9px; height: 9px; border-top: 2px solid #fff; border-right: 2px solid #fff;}
.indexBanner .swiper-button-prev::before {transform: rotate(-135deg); margin-left: 4px;}
.indexBanner .swiper-button-next::before {transform: rotate(45deg); margin-right: 4px;}
.swiper-sign{position: absolute;bottom: .37rem;right: 0.68rem;z-index: 9;display: flex;flex-direction: column;align-items: center;}
.swiper-text{display: flex;flex-direction: column;color: #fff;font-size: var(--font17);}
@media (any-hover: hover) {
.indexBanner .swjt:hover {border-color: #23d8e8; background: #23d8e8;}
}
@keyframes bannerProgress {
from {stroke-dashoffset: 113.1;}
to {stroke-dashoffset: 0;}
}
.con-title {font-size: .64rem;position: relative;}
.con-title::after{content: "";width: 5.41rem;height: 0.12rem;background: #E72211;position: absolute;top: .72rem;left: 0;z-index: -1;}
.swiper-point{position: absolute;left: 2.46rem;bottom: 1.08rem;display: flex;z-index: 9;}
.swiper-point div{
font-weight: normal;
font-size: var(--font22);
color: #78787A;
line-height: 30px;
cursor: pointer;
}
.swiper-point div.active{
font-weight: bold;
font-size: var(--font36);
color: #FFFFFF;
line-height: 30px;
}
.swiper-point span{
font-weight: normal;
font-size: var(--font22);
color: #78787A;
line-height: 30px;
}
/* 第二屏 */
.indexOne {position: relative; background: #F1F5F9; display: flex;align-items: center}
.about-section {
width: 100%;
min-height: 7.83rem;
background: #F1F5F9;
display: flex;
align-items: center;
justify-content: center;
/* padding: 0 0.8rem; */
}
/* 内容内层容器 */
.about-container {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
/* 顶部栏：标题 + 详情按钮 */
.about-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.about-title {
font-size: var(--font48);
font-weight: 700;
color: #0F172A;
line-height: 1.2;
}
.detail-btn {
display: inline-flex;
align-items: center;
gap: 0.08rem;
padding: 0.08rem 0.16rem;
border: 1px solid #a9a9a9;
color: #333;
text-decoration: none;
font-size: var(--font16);
line-height: 1.5;
transition: all 0.3s ease;
}
.detail-btn:hover {
border-color: #E72211;
color: #fff;
background: #E72211;
}
/* 默认隐藏hover箭头 */
.arrow-icon-yes {
display: none;
}
/* hover时切换箭头显示 */
.detail-btn:hover .arrow-icon-no {
display: none;
}
.detail-btn:hover .arrow-icon-yes {
display: block;
}
/* 箭头图标 - 黑色背景替代 */
.arrow-icon {
width: 0.21rem; /* 21px */
height: 0.15rem; /* 15px */
display: flex;
justify-content: center;
align-items: center;
}
/* 主体内容区：左文字 + 右图片 */
.about-body {
display: flex;
justify-content: space-between;
gap: 0.6rem;
align-items: flex-start;
}
.about-content {
flex: 1;
min-width: 0;
max-width: 100%;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.about-text {
display: flex;
flex-direction: column;
gap: 0.24rem;
}
.about-text p {
font-size: var(--font16);
color: #334155;
line-height: 1.8;
overflow-wrap: break-word;
word-wrap: break-word;
}
/* 数据卡片组 */
.about-stats {
display: flex;
width: 100%;
gap: 0.08rem;
}
.stat-card {
flex: 1;
/* padding: 0.32rem 0.24rem; */
height: 1.74rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
background: #fff;
border-right: 1px solid #F1F5F9;
}
.stat-card:last-child {
border-right: none;
}
/* 功能图标 - 黑色背景替代 */
.stat-icon {
width: 0.69rem; /* 69px */
height: 0.69rem; /* 69px */
/* background: #000; */
flex-shrink: 0;
border-radius: 4px;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 0.08rem;
}
.stat-value {
font-size: var(--font36);
font-weight: 700;
color: #0F172A;
line-height: 1;
}
.stat-name {
text-align: right;
font-size: var(--font14);
color: #64748B;
}
/* 右侧大图 - 黑色背景替代 */
.about-image {
width: 39%;
flex-shrink: 0;
}
/* 第三屏 indexTwo */
/* 外层模块 */
.indexTwo{
padding: 1rem 0;
}
/* 轮播容器（按钮+轮播区横向布局） */
.indexTwo .indexTwo-swiper-container{
display: flex;
align-items: center;
gap: .37rem;
margin: .51rem 0;
}
/* 左右切换按钮 */
.indexTwo-swiper-btn-pre,
.indexTwo-swiper-btn-next{
width: .36rem;
height: .61rem;
flex-shrink: 0; /* 防止按钮被压缩变形 */
cursor: pointer;
transition: opacity .3s ease;
}
.indexTwo-swiper-btn-pre:hover,
.indexTwo-swiper-btn-next:hover{
opacity: 0.7;
}
.indexTwo-swiper-btn-pre img,
.indexTwo-swiper-btn-next img{
width: 100%;
height: 100%;
display: block;
}
/* Swiper轮播核心区 */
.indexTwo .indexTwo-swiper-container .indexTwo-swiper{
flex: 1;
overflow: hidden; /* 轮播必需：隐藏溢出的滑块 */
}
.indexTwo .indexTwo-swiper .swiper-wrapper{
display: flex;
align-items: stretch;
}
/* 产品卡片 */
.indexTwo .indexTwo-swiper-item{
height: 4.37rem;
background: #F6F6F6;
display: flex;
flex-direction: column;
}
/* 产品图区域 */
.indexTwo .indexTwo-swiper-item .indexTwo-product-img{
height: 2.82rem;
padding: .2rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.indexTwo .indexTwo-swiper-item .indexTwo-product-img img{
max-width: 100%;
max-height: 100%;
object-fit: contain; /* 保证产品图不变形、完整显示 */
display: block;
}
/* 底部标签栏 */
.indexTwo .indexTwo-swiper-item .indexTwo-product-label{
flex: 1; /* 自动占满剩余高度 */
border-top: 1px solid #EAEAEA; /* 设计图分隔线 */
box-sizing: border-box;
}
.indexTwo .indexTwo-swiper-item .indexTwo-product-label a{
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0 .3rem;
color: #333;
font-size: var(--font28);
text-decoration: none;
}
.indexTwo .indexTwo-swiper-item .indexTwo-product-label a img{
width: .32rem;
height: .32rem;
display: block;
}
/* 底部分页器自定义样式 */
.indexTwo-swiper-pagination{
display: flex;
justify-content: center;
gap: .16rem;
margin-top: .2rem;
}
.indexTwo-swiper-pagination .swiper-pagination-bullet{
width: .16rem;
height: .16rem;
background: #D9D9D9;
opacity: 1;
border-radius: 50%;
transition: background .3s ease;
}
.indexTwo-swiper-pagination .swiper-pagination-bullet-active{
background: #FF3333; /* 选中态红色，匹配设计图箭头色 */
}
/* 第四屏 indexThre - 应用案例 */
/* 基础容器 */
.indexThre {
position: relative;
overflow: hidden;
height: 8.6rem;
}
.indexThre .thre-container {
width: 100%;
height: 100%;
display: flex;
margin: 0 auto;
box-sizing: border-box;
}
/* 左侧蓝色图文区（原样式完整保留） */
.ther-point {
box-sizing: border-box;
flex: 0 0 40%;
width: 40%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 0.8rem 0.7rem 0.8rem 2.5rem;
box-sizing: border-box;
position: relative;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
background: #14609A;
}
.ther-point > img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.ther-c{
position: relative;
z-index: 2;
}
.ther-point::before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 2rem;
height: 2rem;
background: radial-gradient(circle at right top, rgba(35, 218, 224, .25) 0%, transparent 70%);
pointer-events: none;
}
.ther-point::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 3rem;
height: 3rem;
background: radial-gradient(circle at left bottom, rgba(35, 218, 224, .18) 0%, transparent 70%);
pointer-events: none;
}
.ther-title h3 {
font-size: var(--font48);
color: #fff;
font-weight: 500;
letter-spacing: 0.04rem;
margin: 0;
position: relative;
z-index: 2;
}
.ther-icon {
margin-top: 0.9rem;
margin-bottom: 0.23rem;
width: 0.32rem;
height: 0.32rem;
}
.ther-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.ther-company {
font-size: var(--font32);
font-weight: 800;
color: #fff;
line-height: 1.2;
margin: 0 0 0.3rem;
letter-spacing: 0.02rem;
}
.ther-desc {
font-size: 0.16rem;
color: rgba(255, 255, 255, .82);
line-height: 1.9;
margin: 0 0 0.4rem;
text-align: justify;
}
/* 红色查看更多按钮 */
.ther-more {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.15rem 0.32rem;
background: #E72211;
color: #fff;
font-size: 0.16rem;
transition: all 0.4s;
position: relative;
z-index: 2;
gap: 0.08rem;
margin-top: 0.9rem;
text-decoration: none;
}
@media (any-hover: hover) {
.ther-more:hover {
background: #E72211;
transform: translateX(3px);
}
}
/* 页码 + 翻页控制区 */
.ther-page {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
font-size: 0.22rem;
color: #fff;
gap: 0.15rem;
position: relative;
z-index: 2;
}
.ther-page .cur {
font-size: 0.36rem;
font-weight: 700;
color: #fff;
}
.ther-page em {
margin: 0 0.08rem;
color: rgba(255,255,255,.5);
font-style: normal;
}
.ther-page .total {
color: rgba(255,255,255,.7);
}
.ther-line {
flex: 1;
height: 1px;
background: #FFFFFF;
}
.ther-nav {
display: flex;
align-items: center;
gap: 0.1rem;
}
.ther-nav span {
width: 0.38rem;
height: 0.38rem;
border-radius: 50%;
background-color: #fff;
position: relative;
cursor: pointer;
transition: all 0.4s;
}
.ther-nav span::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
border-top: 2px solid #333;
border-right: 2px solid #333;
}
.ther-nav .ther-prev::before {
transform: translate(-40%, -50%) rotate(-135deg);
}
.ther-nav .ther-next::before {
transform: translate(-60%, -50%) rotate(45deg);
}
@media (any-hover: hover) {
.ther-nav span:hover {
background: #E72211;
}
.ther-nav span:hover::before {
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
}
/* ========== 右侧轮播核心样式 ========== */
.thre-swiper {
flex: 1;
width: 46%;
height: 100%;
overflow: hidden;
position: relative;
}
.thre-swiper-wrapper {
display: flex;
height: 100%;
}
.thre-swiper-item {
position: relative;
flex-shrink: 0;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-decoration: none;
}
.thre-swiper-item img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s ease;
}
.thre-swiper-item .thre-info {
padding: 0 0.22rem;
color: #fff;
z-index: 3;
transition: all 0.4s ease;
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.thre-swiper-item .thre-ic {
width: 0.52rem;
height: 0.52rem;
/*background: rgba(255,255,255,.2);*/
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.18rem;
transition: all 0.4s;
}
.thre-swiper-item .line{
width: .38rem;
height: .02rem;
background: #FFFFFF;
margin: 0 auto;
margin-top: .67rem;
}
.thre-swiper-item .thre-ic img {
width: 0.72rem;
height: 0.72rem;
object-fit: contain;
}
.thre-swiper-item .thre-info h4 {
font-size: var(--font24);
font-weight: 600;
margin-top: .24rem;
color: #fff;
}
.thre-swiper-item .thre-info p {
font-size: var(--font14);
color: rgba(255,255,255,.72);
margin: 0;
margin-top: .13rem;
line-height: 1.5;
}
.thre-swiper-item .thre-mask {
position: absolute;
inset: 0;
background: rgba(0, 0, 0,.4);
z-index: 2;
transition: background 0.4s;
pointer-events: none;
}
@media (any-hover: hover) {
.thre-swiper-item:hover img {
transform: scale(1.08);
}
.thre-swiper-item:hover .thre-info {
transform: translateY(-6px);
}
.thre-swiper-item:hover .thre-ic {
/*background: #E72211;*/
}
.thre-swiper-item:hover .thre-mask {
background:rgba(0, 0, 0,0) ;
}
}
/* ========== 全端响应式适配 ========== */
/* 中屏：显示2个轮播项 */
@media screen and (max-width: 1200px) {
.ther-point {
flex: 0 0 50%;
width: 50%;
padding: 0.6rem 0.5rem;
}
.thre-swiper {
width: 50%;
}
.ther-title h3 {
font-size: var(--font40);
}
.ther-company {
font-size: var(--font28);
}
}
/* 小屏：显示1个轮播项，轮播区占满全宽 */
@media screen and (max-width: 992px) {
.indexThre {
height: auto;
min-height: auto;
}
.thre-container {
flex-direction: column;
}
.ther-point {
flex: none;
width: 100%;
padding: 0.6rem 0.4rem;
}
.thre-swiper {
width: 100%;
height: 5rem;
}
.ther-icon {
width: .8rem;
height: .8rem;
margin-top: 0.5rem;
}
.ther-nav{
gap: .2rem;
}
.ther-nav span,.ther-next span{
width: .5rem;
height: .5rem;
}
.ther-more {
margin-top: 0.5rem;
}
}
/* 移动端 */
@media screen and (max-width: 768px) {
.ther-title h3 {
font-size: var(--font36);
}
.ther-company {
font-size: var(--font24);
}
.ther-desc {
font-size: var(--font14);
}
.thre-swiper {
height: 4.5rem;
}
}
.indexFour { background: #fff; position: relative; z-index: 2; padding: 1rem 0; }
.indexFour .container { z-index: 2; display: flex; flex-direction: column; justify-content: center; }
/* ========= 新闻中心整体布局 ========= */
.news-list { margin-top: .4rem; display: flex; gap: .32rem; align-items: stretch; flex-wrap: nowrap; }
.news-item { border: 1px solid #E6E6E6;overflow: hidden; transition: all 0.4s ease; display: flex; flex-direction: column; box-sizing: border-box; }
.news-item a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
/* 左侧大图卡片：宽 673px，高 381px，等比自适应（保持 673:381 比例） */
.news-item.large { flex: 0 0 auto; width: 6.73rem; max-width: 48%; min-width: 0; }
.news-item.large .imgBox { width: 100%; overflow: hidden; }
.news-item.large .imgBox figure { position: relative; width: 100%; padding-bottom: 56.612%; /* 381 / 673 ≈ 56.612% */ margin: 0; }
.news-item.large .imgBox figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: 0.5s; display: block; }
.news-item.large .con { padding: .2rem .2rem .25rem; flex: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: .15rem; }
.news-item.large h3 { font-size: var(--font22); color: #333; transition: 0.3s; font-weight: 600; line-height: 1.5; margin: 0; }
.news-item.large .more-link { flex-shrink: 0; color: #666; transition: 0.3s; display: flex; align-items: center; padding-top: .05rem; }
.news-item.large .more-link img { width: .3rem; height: .15rem; }
.news-item.large:hover .imgBox img { transform: scale(1.05); }
/* 右侧小图区：3 条小新闻 */
.news-right { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.news-item.small { flex: 1; padding: .22rem; border: 1px solid #e6e6e6; }
.news-item.small a { display: flex; flex-direction: row; align-items: center; gap: .22rem; width: 100%; height: 100%; }
/* 小项：日期（竖向） + 小图 175×109 + 标题（自动换行最多 2 行） */
.news-item.small .new-date { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; min-width: .55rem; }
.news-item.small .new-date .daily { font-weight: 700; font-size: var(--font32); line-height: 1; color: #333; }
.news-item.small .new-date .date { font-weight: 400; font-size: var(--font14); color: #333; }
/* 小图 175×109：保持比例，响应式下宽度等比缩放 */
.news-item.small .new-img { flex-shrink: 0; width: 1.75rem; max-width: 28%; aspect-ratio: 175 / 109; overflow: hidden; }
.news-item.small .new-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: 0.5s; }
/* 标题：默认即自动换行，最多 2 行 */
.news-item.small .new-title { flex: 1; font-size: var(--font16); color: #333; font-weight: 500; line-height: 1.55; margin: 0; transition: 0.3s; min-width: 0;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; }
/* 公共：最多 2 行（public.css 已有 .line2，这里补充一些细节） */
.news-item .line2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; word-break: break-word; }
/* hover 效果 */
@media (any-hover: hover) {
.news-item.small:hover { background: #fff; border-color: #1383C1; }
.news-item.small:hover .new-img img { transform: scale(1.08); }
.news-item.small:hover .new-title { color: #1383C1; }
.news-item.large:hover h3 { color: #1383C1; }
.news-item.large:hover { background: #fff; }
}
.indexFive { }
.indexFive .container {height: 100%; padding-top: 1rem; z-index: 2; display: flex; flex-direction: column; justify-content: center;}
.indexFive .box {margin-top:.6rem; position: relative; overflow: hidden; border-radius: .3rem;}
.indexFive .box .imgBox img {min-height: 3rem;}
.indexFive .numlist {padding: .5rem .8rem; position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: space-between; align-items: flex-end; gap: .5rem;}
.indexFive .num {font-size:var(--font76); color: #fff;display: flex; font-weight: 700; line-height: 1.2;}
.indexFive .txt {font-size:var(--font22); color: #fff; }
.indexSix { }
.indexSix .container {height: 100%; padding-top: 1rem; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.indexSix .list {display:flex; justify-content: space-between; margin-top: 1rem; gap: .6rem;}
.indexSix .list .item {text-align: center; flex: 1;}
.indexSix .list .item .icBox {width: 40px; height: 40px; margin: auto; display: flex; justify-content: center; align-items: center;}
.indexSix .list .item .icBox img {max-width: 100%; max-height: 100%; object-fit: contain;}
.indexSix .list .item .tit {font-size: var(--font30); color: #333; margin-top: .2rem; font-weight: 700;}
.indexSix .list .item .txt {margin-top: .1rem; color: #666;}
/* ======================================================================================================底部*/
/* 总高度 422px(4.22rem)，最大宽度 1400px(14rem)，字体以 16/18px(0.16/0.18rem) 为主 */
.footer {
background: #0a0a0a;
height: auto;
overflow: hidden;
color: #fff;
}
.footer .container {
height: 100%;
padding: 0 0.45rem;
max-width: 16rem;
width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.footer-main { padding: 0.4rem 0 0; flex: 1; display: flex; flex-direction: column; }
/* 主体内容区：左 LOGO + 社交、中 导航、右 联系信息 */
.footer .main_box {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 0.4rem;
flex: 1;
}
/* 左侧 LOGO 与 社交 */
.f-info {
flex: 0 0 auto;
width: 2.8rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
/* LOGO 块：图片替换为黑色背景 + 文字 */
.f-logo {
width: 2.6rem;
height: 0.7rem;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font18);
font-weight: 700;
letter-spacing: 0.02rem;
border-radius: 0.04rem;
padding: 0 0.15rem;
}
/* 社交 */
.f-social {
display: flex;
align-items: center;
gap: 0.1rem;
margin-top: 0.08rem;
}
.f-social a {
width: 0.4rem;
height: 0.4rem;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 50%;
color: #fff;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font16);
text-decoration: none;
opacity: 0.6;
}
.f-social a i {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font16);
}
.f-social a i svg { width: 70%; height: 70%; }
.f-social a svg path { fill: #fff; }
/* 二维码提示（图片用黑色背景块替代） */
.f-social .f-weixin { position: relative; }
.f-social .weixin-code {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 1.5rem;
background: #fff;
padding: 0.12rem;
border-radius: 0.08rem;
box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.2);
visibility: hidden;
opacity: 0;
transition: all 0.4s ease;
text-align: center;
z-index: 99;
}
.f-social .weixin-code::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -0.08rem;
border-width: 0.08rem;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
.f-social .weixin-code .weixin-img {
width: 100%;
aspect-ratio: 1 / 1;
background: #000;
border-radius: 0.04rem;
margin-bottom: 0.08rem;
}
.f-social .weixin-code p {
color: #333;
font-size: var(--font14);
margin: 0;
line-height: 1.2;
white-space: nowrap;
}
.f-social .f-weixin:hover .weixin-code {
visibility: visible;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* 中部导航 */
.foternav {
flex: 1;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin: 0 0.4rem;
gap: 0.2rem;
flex-wrap: wrap;
}
.foternav dl {
flex: 1;
min-width: 0.8rem;
margin: 0;
}
.foternav dl dt {
font-size: var(--font18);
font-weight: 500;
margin-bottom: 0.18rem;
}
.foternav dl dt a { color: #fff; text-decoration: none; }
.foternav dl dd { margin-bottom: 0.08rem; line-height: 1.6; }
.foternav dl dd a {
color: #fff;
transition: 0.3s;
font-size: var(--font16);
position: relative;
opacity: 0.5;
text-decoration: none;
}
.foternav dl dd a::after {
content: '';
position: absolute;
left: 0;
bottom: -0.02rem;
width: 0;
height: 0.01rem;
background: #fff;
transition: 0.3s;
}
/* 右侧联系信息 */
.f-contact {
flex: 0 0 auto;
width: 2.6rem;
min-width: 0;
}
.f-contact h4 {
color: #fff;
font-size: var(--font18);
font-weight: 500;
margin: 0 0 0.08rem 0;
opacity: 0.9;
}
.f-contact .item { margin-bottom: 0.18rem; }
.f-contact .item:last-child { margin-bottom: 0; }
.f-contact p { margin: 0.04rem 0; color: #fff; }
.f-phone-num { font-size: var(--font18); font-weight: 700; }
.f-phone-time { font-size: var(--font16); opacity: 0.55; }
.f-email-link {
color: #fff;
font-size: var(--font18);
font-weight: 700;
text-decoration: none;
}
.f-address-txt { font-size: var(--font16); opacity: 0.6; line-height: 1.6; }
/* 版权栏 */
.footer-copy {
padding: 0.18rem 0;
margin-top: 0.15rem;
color: rgba(255, 255, 255, 0.55);
font-size: var(--font16);
border-top: 1px solid rgba(216, 216, 216, 0.18);
text-align: center;
line-height: 1.6;
}
.footer-copy p { margin: 0; }
.footer-copy a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.footer-copy a:hover { color: #fff; }
@media (any-hover: hover) {
.f-social a:hover { opacity: 1; border-color: #285FDD; background: #285FDD; }
.foternav dl dd a:hover::after { width: 100%; }
.foternav dl dd a:hover { color: #fff; opacity: 1; }
.f-contact .more-contact:hover { color: #fff; }
.f-email-link:hover { color: #285FDD; }
}
/* ======================================================================================================内页 */
/* 内页公用样式 */
.ny-banner {position: relative; overflow: hidden;max-height: 558px; }
.ny-banner .box .con {}
.ny-banner .box .con h2{text-align: center}
.ny-banner .imgBox img {width: 100%; height: 100%; display: block;object-fit: contain;}
.ny-nav {position: absolute; background: rgba(0,0,0,.1); width: 100%; left: 0; bottom: 0; overflow: hidden; padding: .25rem 0 .4rem;}
.ny-nav ul {display: flex; justify-content: center; gap: 1rem;}
.ny-nav ul > li > a { color: #fff; transition: all 0.4s; font-size: var(--font18); position: relative;}
.ny-nav ul > li > a::after {content: ''; opacity: 0; display: block; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: .12rem; height: .14rem; min-width: 8px; min-height: 10px; background: #23dae0; transition: all 0.4s; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
.ny-nav ul > li.on > a::after {opacity: 1; animation: myfirst 3s linear infinite;}
@media (any-hover: hover) {
.ny-nav ul > li > a:hover::after { opacity: 1;}
}
/* 面包屑 */
.mbx {display: flex; align-items: flex-start; padding: .2rem 0; top: auto; bottom: 0;}
.mbx .icBox {margin-right: .1rem;transform:translateY(-.02rem);}
.mbx a {position: relative; color: #fff;}
.mbx a::after {content: ">";margin: 0 .1rem;}
.mbx a:last-child::after {display: none;}
.mbx a:hover {color: #23dae0 !important;}
.mbx a:hover::after {color: #fff;}
/* 内页公用样式 end!! */
/* ==========关于我们 */
.aboutTle h3 {line-height: 1;}
.aboutOne {position: relative; overflow: hidden;}
.aboutOneCon { position: relative; overflow: hidden; background-color: #F1F5F9;}
.aboutOneCon .about-section{ position: relative; overflow: hidden; }
.aboutOne-header { align-items: flex-start; position: relative; z-index: 2;}
.aboutOne-header .le { width: 35%;}
.aboutOne-header .re { width: 60%;}
.aboutOne-text p { text-align: justify; line-height: 1.8;}
.aboutOne-stats { margin-top: 2rem; border-bottom: 1px solid #eee; position: relative; z-index: 2;}
.aboutOne-stats .item {position: relative; transition: .3s;}
.aboutOne-stats .item .num {font-size: var(--font80); transition: .3s;}
.aboutOne-video { position: relative; width: 100%; overflow: hidden;}
.aboutOne-video .imgBox { width: 100%; height: 100%; cursor: pointer;}
.aboutOne-video .imgBox img { width: 100%; height: 100%; object-fit: cover;}
.aboutOne-video .video-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1rem; height: 1rem; transition: .3s; z-index: 3;}
.aboutOne-video .video-btn:hover { transform: translate(-50%, -50%) scale(1.1);}
@media (max-width: 992px) {
.aboutOne{
height: auto;
}
.aboutOneCon{
padding: .4rem 0;
}
}
.aboutTwo {min-height: 7.75rem;position: relative;display: flex;justify-content: center;align-items: center;padding: .8rem 0;}
.aboutTwo h2{
font-weight: bold;
font-size: var(--font48);
color: #FFFFFF;
position: relative;
z-index: 2;
text-align: center;
margin-bottom: .97rem;
}
.aboutTwo .bg{position: absolute;inset: 0;z-index: 1;}
.aboutTwo .bg img{width: 100%;height: 100%;object-fit: cover;display: block;}
.aboutTwoGrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; position: relative; align-items: center;z-index: 2;}
.aboutTwoGrid .aboutTwoItem{min-height: 4.6rem;position: relative;
overflow: hidden !important;transition: transform 0.3s ease;}
.aboutTwoGrid .aboutTwoItem:hover{transform: translateY(-0.1rem);}
.aboutTwoGrid .aboutTwoItem .aboutCircle{height: 1.8rem;width:1.8rem;background-color: #fff;border-radius: 50%;
margin: 0 auto -.9rem;
z-index: 10;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.aboutTwoGrid .aboutTwoItem .aboutCircle img{width: .73rem; height: .73rem; object-fit: cover;}
.aboutTwoGrid .aboutTwoItem .aboutTwoItemCard{min-height: 3.7rem;background-color: #fff;border-radius: .1rem;padding: 0.4rem 0.4rem 0.3rem;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;position: relative;overflow: hidden;}
.aboutTwoGrid .aboutTwoItem .aboutTwoItemCard .card-content{flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top: .9rem;}
.aboutTwoGrid .aboutTwoItem .aboutTwoItemCard .title{font-size: var(--font38);font-weight: 700;color: #333;margin-bottom: 0.2rem;line-height: 1.2;}
.aboutTwoGrid .aboutTwoItem .aboutTwoItemCard .text{font-size: var(--font18);color: #333;line-height: 1.7;text-align: center;flex: 1;}
.aboutTwoGrid .aboutTwoItem .aboutTwoItemCard h2{font-size: var(--font24);font-weight: 700;color: #E5E5E5;letter-spacing: 0.04rem;margin: 0.1rem 0 0;padding: 0;text-align: center;line-height: 1;position: relative;z-index: 1;user-select: none;}
.aboutTwoGrid .aboutTwoItem .aboutLine{height: 0.09rem;width: 0;background: #C72A29;
position: absolute;left: 0;bottom: 0;transition: width 0.4s ease;}
.aboutTwoGrid .aboutTwoItem:hover .aboutLine{width: 100%;}
/* 父容器 */
.aboutThree {
width: 100%;
min-height: 7.75rem;
background-color: #ffffff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0.8rem;
box-sizing: border-box;
font-family: "Microsoft YaHei", system-ui, sans-serif;
}
/* 标题 */
.chronicleSectionTitle {
display: flex;
font-size: var(--font48);
font-weight: 700;
color: #1a1a2e;
margin: 0 0 0.6rem 0;
text-align: center;
line-height: 1.2;
}
/* 卡片轮播外层 */
.chronicleCardWrapper {
display: flex;
position: relative;
width: 100%;
flex: 1;
/*padding: 0 0.4rem;*/
box-sizing: border-box;
}
.chronicleCardWrapper .container{
display: flex;
align-items: center;
justify-content: space-between;
}
/* 左右切换按钮 */
.chroniclePrevBtn,
.chronicleNextBtn {
width: 0.65rem;
height: 0.65rem;
background-color: #d0d7e3;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font30);
color: #000000;
transition: background-color 0.3s ease;
flex-shrink: 0;
padding: 0;
}
.chroniclePrevBtn:hover,
.chronicleNextBtn:hover {
background-color: #C72A29;
color: #fff;
}
.chroniclePrevBtn span,
.chronicleNextBtn span {
line-height: 1;
}
/* 卡片轮播轨道 - 滚动布局 */
.chronicleCardTrack {
flex: 1;
height: 100%;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
margin: 0 0.4rem;
gap: 0;
}
.chronicleCardTrack::-webkit-scrollbar {
display: none;
}
/* 单个卡片项 */
.chronicleCardItem {
flex: 0 0 100%;
height: 100%;
scroll-snap-align: center;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
box-sizing: border-box;
}
/* 卡片文字内容 */
.chronicleCardContent {
flex: 1;
padding-left: 0.8rem;
box-sizing: border-box;
}
.chronicleCardYear {
font-size: var(--font80);
font-weight: 700;
color: #1a1a2e;
margin-bottom: 0.3rem;
line-height: 1;
}
.chronicleCardDesc {
font-size: var(--font20);
color: #333333;
line-height: 1.6;
max-width: 4rem;
margin: 0;
}
/* 卡片图片区 */
.chronicleCardImgWrap {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chronicleCardImgWrap img {
width: 100%;
max-width: 6rem;
height: auto;
max-height: 3.5rem;
object-fit: cover;
}
/* 时间轴外层 - 可滚动容器 */
.chronicleTimelineWrapper {
width: 100%;
max-width: 14rem;
height: 1.2rem;
position: relative;
margin-bottom: 0.4rem;
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
box-sizing: border-box;
padding: 0 0.2rem;
}
.chronicleTimelineWrapper::-webkit-scrollbar {
display: none;
}
.chronicleTimelineWrapper:active {
cursor: grabbing;
}
/* 时间轴轨道 */
.chronicleTimelineTrack {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
gap: 1rem;
position: relative;
flex-shrink: 0;
padding: 0.3rem 0;
margin: 0 auto;
}
/* 连接线 */
.chronicleTimelineTrack::before {
content: '';
position: absolute;
top: 50%;
left: 0.06rem;
right: 0.06rem;
height: 0.02rem;
/* 虚线写法 */
border-bottom: .03rem dotted #333;
transform: translateY(-50%);
pointer-events: none;
}
/* 时间轴节点 */
.chronicleTimelineDot {
position: relative;
width: 0.12rem;
height: 0.12rem;
border-radius: 50%;
background-color: #1a1a2e;
cursor: pointer;
transition: all 0.3s ease;
z-index: 2;
flex-shrink: 0;
}
.chronicleTimelineDot.active {
background-color: #1a5fb4;
transform: scale(1.2);
}
/* 激活节点下方三角标 */
.chronicleTimelineDot.active::after {
content: '';
position: absolute;
bottom: -0.32rem;
left: 50%;
transform: translateX(-50%) rotateZ(180deg);
width: 0;
height: 0;
border-left: 0.08rem solid transparent;
border-right: 0.08rem solid transparent;
border-top: 0.12rem solid #1a5fb4;
}
/* 时间轴年份文本 */
.chronicleTimelineYear {
position: absolute;
top: 0.25rem;
left: 50%;
transform: translateX(-50%);
font-size: var(--font18);
color: #333333;
white-space: nowrap;
line-height: 1;
}
/* 激活状态年份样式 */
.chronicleTimelineDot.active .chronicleTimelineYear {
top: -0.41rem;
color: #013A95;
font-size: var(--font36);
font-weight: 600;
}
/* 关于我们 - 发展历程 */
.aboutFour {height: 5.88rem;background: #F1F5F9;}
/* 父容器：通栏背景，固定高度 */
.ambientExhibit {
width: 100%;
height: 5.58rem; /* 558px */
background-color: #F1F5F9;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: "Microsoft YaHei", system-ui, sans-serif;
}
/* 内容区域：最大14rem，小屏自适应 */
.ambientContentBox {
max-width: 16rem;
width: 100%;
margin: 0 auto;
padding: 0 0.3rem;
box-sizing: border-box;
position: relative;
}
/* 标题：47px */
.ambientSectionTitle {
font-size: var(--font48);
font-weight: 700;
color: #000;
text-align: center;
margin: 0 0 0.5rem 0;
line-height: 1.2;
}
/* 轮播外层：相对定位，用于按钮绝对定位 */
.ambientSliderContainer {
width: 100%;
position: relative;
}
/* 可视窗口：超出隐藏，保证滑块完整显示不裁切 */
.ambientSliderViewport {
width: 100%;
overflow: hidden;
}
/* 左右切换按钮：57px*57px 圆形，默认可滑动状态 */
.ambientPrevBtn,
.ambientNextBtn {
width: 0.57rem;
height: 0.57rem;
border-radius: 50%;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
font-size: var(--font20);
transition: background-color 0.2s ease;
background-color: #C72A29; /* 可滑动时背景 */
color: #fff;
}
/* 不可滑动状态：背景与模块背景一致 */
.ambientPrevBtn.is-disabled,
.ambientNextBtn.is-disabled {
background-color: #C2C2C2;
cursor: default;
}
/* 箭头图标：可滑动状态白色 */
.ambientArrowIcon {
display: block;
width: 0.16rem;
height: 0.16rem;
border-left: 0.03rem solid #ffffff;
border-bottom: 0.03rem solid #ffffff;
}
/* 不可滑动状态箭头改为灰色，保证辨识度 */
.ambientPrevBtn.is-disabled .ambientArrowIcon,
.ambientNextBtn.is-disabled .ambientArrowIcon {
border-color: #B0B8C1;
}
.ambientArrowLeft {
transform: rotate(45deg);
margin-left: 0.04rem;
}
.ambientArrowRight {
transform: rotate(-135deg);
margin-right: 0.04rem;
}
/* 左按钮：默认在内容区左侧外 */
.ambientPrevBtn {
left: -0.85rem;
}
/* 右按钮：默认在内容区右侧外 */
.ambientNextBtn {
right: -0.85rem;
}
/* 轮播轨道 */
.ambientSliderTrack {
display: flex;
width: fit-content;
will-change: transform;
}
/* 单张图片：444px*304px，固定尺寸完整显示 */
.ambientSlideItem {
flex-shrink: 0;
width: 4.44rem;
height: 3.04rem;
overflow: hidden;
}
.ambientSlideItem img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
/* object-fit: cover; */
display: block;
border-radius: 0.04rem;
}
/* ========== 响应式适配 ========== */
/* 中屏：按钮移入内容区边缘，显示2张完整图 */
@media (max-width: 1200px) {
.ambientPrevBtn {
left: 0.2rem;
}
.ambientNextBtn {
right: 0.2rem;
}
.ambientSlideItem {
width: calc((100% - 0.34rem) / 2);
height: auto;
aspect-ratio: 444 / 304;
}
}
/* 小屏：显示1张完整图，按钮缩小 */
@media (max-width: 768px) {
.ambientPrevBtn,
.ambientNextBtn {
width: 0.48rem;
height: 0.48rem;
}
.ambientSlideItem {
width: 100%;
height: auto;
aspect-ratio: 444 / 304;
}
}
/* 父容器：固定高度，白色背景 */
.qualificationShow {
width: 100%;
height: 9.53rem; /* 953px */
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: "Microsoft YaHei", system-ui, sans-serif;
}
/* 标题 */
.qualSectionTitle {
font-size: var(--font48);
font-weight: bold;
color: #000;
text-align: center;
margin: 0 0 0.8rem 0;
line-height: 1.2;
}
/* 轮播可视区：超出隐藏，支持拖拽 */
.qualSliderViewport {
width: 100%;
max-width: 14rem;
overflow: hidden;
cursor: grab;
user-select: none;
touch-action: pan-y;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.qualSliderViewport:active {
cursor: grabbing;
}
/* 轮播轨道 */
.qualSliderTrack {
display: flex;
gap: 0.3rem;
width: fit-content;
transition: transform 0.3s ease-out;
will-change: transform;
}
/* 证书卡片外框：321*458px */
.qualCardItem {
flex-shrink: 0;
width: 3.21rem;
height: 4.58rem;
background-color: #ffffff;
box-shadow: 0 0px 12px rgba(0, 0, 0, .4);
border-radius: 0.04rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.295rem 0.19rem;
box-sizing: border-box;
}
/* 证书内部图片区：283*399px */
.qualCardInner {
width: 2.83rem;
height: 3.99rem;
background-color: #CBD5E1;
overflow: hidden;
}
.qualCardInner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 底部进度条容器 */
.qualProgressWrap {
width: 8rem;
margin-top: 0.8rem;
}
/* 进度条轨道 */
.qualProgressTrack {
width: 100%;
height: 0.06rem;
background-color: #E2E8F0;
border-radius: 0.03rem;
position: relative;
}
/* 进度条填充 */
.qualProgressThumb {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 0.08rem;
width: 0%;
background-color: #0F4C81;
border-radius: 0.04rem;
transition: width 0.3s ease;
pointer-events: none;
}
/* ========== 响应式适配 ========== */
@media (max-width: 1200px) {
.qualSliderViewport {
/* max-width: 10rem; */
}
.qualProgressWrap {
width: 6rem;
}
}
@media (max-width: 768px) {
.qualSliderViewport {
max-width: 7rem;
}
.qualProgressWrap {
width: 5rem;
margin-top: 0.5rem;
}
}
/* 父容器：固定高度，白色背景 */
.qualificationShow {
width: 100%;
height: 9.53rem; /* 953px */
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
font-family: "Microsoft YaHei", system-ui, sans-serif;
}
/* ========== 核心修改：可视区加左右padding预留阴影空间 ========== */
.qualSliderViewport {
width: 100%;
max-width: 16rem;
overflow: hidden;
cursor: grab;
user-select: none;
touch-action: pan-y;
-webkit-user-select: none;
-webkit-touch-callout: none;
/* 左右各0.2rem空间，容纳卡片阴影（阴影扩散约0.12rem） */
padding: 0.2rem 0.2rem;
box-sizing: border-box;
/* 上下也加少量padding，避免垂直阴影被裁 */
margin: -0.2rem auto;
}
.qualSliderViewport:active {
cursor: grabbing;
}
/* 轮播轨道 */
.qualSliderTrack {
display: flex;
gap: 0.3rem;
width: fit-content;
transition: transform 0.3s ease-out;
will-change: transform;
}
/* 证书卡片外框：321*458px */
.qualCardItem {
flex-shrink: 0;
width: 3.21rem;
height: 4.58rem;
background-color: #ffffff;
box-shadow: 0 0.02rem 0.12rem rgba(0, 0, 0, 0.4);
border-radius: 0.04rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.295rem 0.19rem;
box-sizing: border-box;
}
.qualCardItem:last-child{
margin-right: 0.3rem;
}
/* 证书内部图片区：283*399px */
.qualCardInner {
width: 2.83rem;
height: 3.99rem;
background-color: #CBD5E1;
overflow: hidden;
}
.qualCardInner img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 底部进度条容器 */
.qualProgressWrap {
width: 8rem;
margin: 0 auto;
margin-top: 0.8rem;
}
/* 进度条轨道 */
.qualProgressTrack {
width: 100%;
height: 0.06rem;
background-color: #E2E8F0;
border-radius: 0.03rem;
position: relative;
}
/* 进度条填充 */
.qualProgressThumb {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
height: 0.08rem;
width: 0%;
background-color: #0F4C81;
border-radius: 0.04rem;
transition: width 0.3s ease;
pointer-events: none;
}
/* ========== 响应式适配 ========== */
@media (max-width: 1200px) {
.qualSliderViewport {
/* max-width: 10rem; */
}
.qualProgressWrap {
width: 6rem;
}
}
@media (max-width: 768px) {
.qualSliderViewport{
max-width: 7rem;
padding: 0.15rem 0.15rem;
}
.qualProgressWrap {
width: 5rem;
margin-top: 0.5rem;
}
}
/* ==========关于我们-----企业文化 */
.cultureOne {padding: 1rem 0; padding-bottom: 0;}
.cultureOne .list .item {display: flex; justify-content: space-between; margin-bottom: 1rem;}
.cultureOne .list .item:nth-child(even) {flex-direction: row-reverse;}
.cultureOne .item .left {width: 50%; padding: .2rem 1rem; display: flex; flex-direction: column; justify-content: center;}
.cultureOne .item .right {width: 50%;}
.cultureOne .item .right img {width: 100%; height: 100%; object-fit: cover;}
.cultureOne .item .text {margin-top: .5rem;}
.cultureOne .item .text p {text-align: justify; line-height: 1.8; color: #666;}
.cultureTwo {background: url(../images/indexSix-bg.webp) no-repeat center; background-size: cover; padding: 0 0 1.4rem;}
/* ==========关于我们----荣誉资质 */
.honorsMain {padding: 1rem 0; padding-bottom: 2rem;}
.honorsBox .box {display: flex; justify-content: space-between; align-items: flex-start;}
.honorsnav {width: 15%; position: sticky; top: 1.4rem;}
.honorsnav .ctitle1 > ul > li {margin-top: .2rem;}
.honorsnav .ctitle1 > ul > li .menu-li {display: flex; align-items: center; justify-content: space-between; padding: .14rem .25rem; transition: .5s; background: #f9f9f9; cursor: pointer; border-radius: 50px;}
.honorsnav .ctitle1 > ul > li .menu-li a {color: #333; font-size: var(--font18);transition: .5s;}
.honorsnav .ctitle1 > ul > li .menu-li i { color: #333; font-size: var(--font20); transform: rotate(-90deg); flex-shrink: 0; margin-left: .2rem; transition: .5s;}
.honorsnav .ctitle1 > ul > li .menu-li.on {background: #050a7a;}
.honorsnav .ctitle1 > ul > li .menu-li.on a {color: #fff;}
.honorsnav .ctitle1 > ul > li .menu-li.on i {transform: rotate(0deg); color: #fff;}
.honorsnav .ctitle2 {display: none;}
.honorsnav .ctitle2 ul {padding:.1rem;}
.honorsnav .ctitle2 ul li {padding: .17rem .1rem; border-bottom: 1px solid rgba(221, 221, 221,.74);}
.honorsnav .ctitle2 ul li:last-child {border: 0;}
.honorsnav .ctitle2 ul li a {color: #555555; display: block; transition: .5s;}
.honorsnav .ctitle2 ul li:hover a {color: #050a7a;}
.honorsnav .ctitle2 ul li.on a {color: #050a7a;}
.honorsnav .ctitle1 > ul > li.on .ctitle2 {display: block;}
.honorslist {width: 80%;}
.honorslist ul {display: grid; grid-template-columns: repeat(3,1fr);gap: .8rem;}
.honorslist ul li .imgBox {position: relative; padding-bottom: 17%; text-align: center;}
.honorslist ul li .imgBox::after {content: ""; background: url(../images/honer-img-icon.png) no-repeat bottom; background-size: 100%; z-index: 0; bottom: 0; width: 100%; height: 100%; position: absolute; left: 0;}
.honorslist ul li .picImg {display: inline-block; position: relative;width: 80%;}
.honorslist ul li .picImg::after {content: ""; left: 0; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0,.5) url(../images/fdj-icon2.png) no-repeat center; transition: .5s; opacity: 0;}
.honorslist ul li .picImg img {padding: .1rem; box-sizing: border-box;background: #f5f5f5;width: 100%; }
.honorslist ul li .con {border-bottom: 1px solid #dddddd; padding: 0 .15rem; padding-bottom: .15rem; margin-top: .1rem;}
.honorslist ul li .con span {font-size: var(--font16); color: #666666; font-family: Arial, Arial-Regular; display: block; background: url(../images/fdj-icon.png) no-repeat right; padding-right: 35px;}
.honorslist ul li:hover .con span {color: #ba0703;}
.honorslist ul li:hover .picImg::after {opacity: 1;}
/* ==========产品中心 */
.proOne {padding: 1rem 0 1.5rem;}
.proOne-title {margin-bottom: .8rem;}
.proOne-title h3 {margin-bottom: .4rem;}
.proOne-title p { width: 13rem;max-width: 100%;line-height: 1.8;}
.proOne-list {gap: .24rem;}
.proOne-list .item {background: #f8f8f8;padding: .8rem .45rem;padding-bottom: 2.5rem;border-radius: .2rem;transition: .4s;position: relative;}
.proOne-list .item-box {}
.proOne-list .item-box .txt h4 {margin-bottom: .3rem;}
.proOne-list .item-box .txt p {}
.proOne-list .item-box .btns {position: absolute;bottom: .6rem;margin-top: .8rem;gap: .1rem;}
.proOne-list .item-box .btns > a {padding: .1rem .2rem;border-radius: 100px;transition: .4s;}
.proOne-list .item-box .btn-more {background: #050a7a;color: #fff;}
.proOne-list .item-box .btn-more:hover {background: #0056FF;}
.proOne-list .item-box .btn-ask {color: #999;border: 1px solid #999;}
.proOne-list .item-box .btn-ask:hover {color: #04376F;}
@media (any-hover: hover) {
.proOne-list .item:hover {box-shadow: 0 .1rem .4rem rgba(0,0,0,.08);transform: translateY(-10px);background: #fff;}
.proOne-list .item-box .btns > a:hover{background: #23dae0; color: #fff; border-color: transparent;}
}
/* ==========产品详情 */
.prodate_banner .mbx img {filter: brightness(0); -webkit-filter:brightness(0);}
.prodate_banner .mbx a {color: #333;}
.prodate_banner .mbx a::after {color: #333;}
.prodate_banner {position: relative; overflow: hidden;}
.prodate_banner .box {min-height: 8rem; display: flex; flex-direction: column; justify-content: center;}
.prodate_banner .tle {line-height: 1.2;}
.prodate_banner .text {width: 6rem; max-width: 100%;}
.prodate_banner .more {margin-top: .5rem;}
.prodate_banner .more a {display: inline-flex; transition: .5s; border: 1px solid #050a7a; align-items: center; gap: .1rem; padding: .1rem .25rem; border-radius: 100px; color: #050a7a;}
.prodate_banner .more a i {font-size: var(--font20);}
.prodate_banner .more a span {font-size: var(--font16);}
@media (any-hover: hover) {
.prodate_banner .more a:hover {background: #050a7a; color: #fff; border-color: transparent;}
}
.prodate-nav {position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid #eee; box-shadow: none;}
/* .prodate-nav.fixed {position: fixed; top: 1.2rem; bottom: auto; left: 0; width: 100%; ; z-index: 98;} */
.prodate-nav ul li a {color: #333;}
.prodate-content .tab-item {padding: 1rem 0;}
.prodate-content .title {margin-bottom: .4rem;}
.proinfo {}
.proinfo-nav .proinfo-prev,
.proinfo-nav .proinfo-next {width: .5rem;height: .5rem;border-radius: 50%;background-color: #f5f5f5;color: #999;cursor: pointer;transition: all 0.3s ease;}
.proinfo-nav .proinfo-prev:hover,
.proinfo-nav .proinfo-next:hover {background-color: #050B7A;color: #fff;}
.proinfo-nav .swiper-button-disabled {opacity: 0.5;cursor: not-allowed;}
.proinfo-nav .swiper-button-disabled:hover {background-color: #f5f5f5;color: #999;}
.proinfo-nav i {font-size: var(--font24);}
.proinfo-swiper {width: 100%;overflow: hidden; margin-top: .5rem;}
.proinfo-swiper .imgBox {width: 100%;padding-bottom: 66%; /* adjust based on aspect ratio, approx 3:2 */position: relative;border-radius: .2rem;overflow: hidden;}
.proinfo-swiper .imgBox img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
@media (any-hover: hover) {
.proOne-list.proinfo-swiper .item:hover {box-shadow: none;transform: translateY(-10px);background: #fff;}
}
/* ==========创新研发 */
.innovateOne {padding: 1.2rem 0;}
.innovateOne h3 {margin-bottom: .6rem;}
.innovateOne .text {line-height: 1.8;width: 8rem;max-width: 100%;margin: 0 auto;}
.innovateOne .down-icon {margin-top: 1.4rem;width: .5rem;height: .5rem;border-radius: 50%;background: #050a7a;color: #fff;font-size: var(--font30);}
.innovateOne .down-icon i {animation: shubiao2 1s infinite;}
.innovateTwo {padding: 1.2rem 0;background: url(../images/innovateTwo-bg.webp) no-repeat center;background-size: cover;position: relative;overflow: hidden;}
.innovateTwo .container {position: relative;z-index: 2;}
.innovateTwo .title-box {margin-bottom: 1rem;}
.innovateTwo .title-box h3 {margin-bottom: .4rem;}
.innovateTwo .title-box p { width: 8rem;max-width: 100%;line-height: 1.8;margin: 0 auto;}
.innovateTwo .list {margin-top: .6rem;gap: .6rem;}
.innovateTwo .list .item {padding: .45rem;padding-bottom: .6rem;border-radius: .2rem;background: rgba(7, 11, 93,.25);}
.innovateTwo .list .item .icBox {width: .6rem;height: .6rem;margin-bottom: .2rem; display: flex; justify-content: center;align-items: center; }
.innovateTwo .list .item .icBox img {max-width: 100%; max-height: 100%; height: auto;object-fit: contain;}
.innovateTwo .list .item h4 {margin-bottom: .2rem;}
.innovateTwo .list .item p {line-height: 1.8; color: #fff;}
.innovateThree {padding: 1.2rem 0;}
.innovateThree .title-box {margin-bottom: 1rem;}
.innovateThree .title-box p {width: 10rem;max-width: 100%;line-height: 1.8;margin: 0 auto;}
.innovateThree .list {margin-top: 1.1rem;gap: .8rem;}
.innovateThree .list .item {text-align: center;}
.innovateThree .list .item .circle-box {width: 1.6rem;height: 1.6rem;border-radius: 50%;margin: auto;margin-bottom: .3rem;}
.innovateThree .list .item .inner-circle {width: 100%;height: 100%;border-radius: 50%;background: #f4f6f9;font-size: var(--font46);color: #050a7a;font-weight: 700;}
.innovateThree .list .item:hover .inner-circle {background: #050a7a;color: #fff;transition: .4s;}
.innovateFour {padding: 1.2rem 0;background: #f8f9fb url(../images/innovateFour-bg.webp) no-repeat center;background-size: cover;}
.innovateFour .title-box {margin-bottom: .8rem;}
.innovateFour .list {gap: .24rem; display: flex; justify-content: space-between;}
.innovateFour .list .item {flex: 1; width: calc(33.33% - .4rem);background: rgba(255, 255, 255,.8);padding: .6rem .4rem;border-radius: .1rem;box-shadow: 0 0 .3rem rgba(0,0,0,.05);transition: .4s;}
.innovateFour .card-box {height: 100%;display: flex;flex-direction: column; }
.innovateFour .card-box .info {margin-top: .4rem;}
.innovateFour .dot-list {overflow-y: auto; max-height: 3rem; padding-right: .2rem;}
.innovateFour .dot-list li {position: relative;padding-left: .25rem;margin-bottom: .1rem;}
.innovateFour .dot-list li::before {content: "";position: absolute;left: 0;top: .12rem;width: .08rem;height: .08rem;background: #0056ff;border-radius: 50%;}
.innovateFour .certificate-swiper {width: 100%;}
.innovateFour .certificate-swiper .imgBox {aspect-ratio: 4/3;display: flex;align-items: center;justify-content: center;}
.innovateFour .certificate-swiper .imgBox img {max-width: 100%;max-height: 100%;object-fit: contain;}
.innovateFour .swiper-pagination {position: static;width: auto;}
.innovateFour .swiper-pagination-bullet {width: .1rem;height: .1rem;background: #d2d2d2;opacity: 1;margin: 0 .05rem !important; transition: .3s; border-radius: .05rem;}
.innovateFour .swiper-pagination-bullet-active {background: #050a7a;}
.innovateFour .swiper-counter .current {color: #333;}
.innovateFour .swiper-footer {padding-top: .3rem;}
@media (any-hover: hover) {
.innovateFour .list .item:hover {transform: translateY(-.1rem); box-shadow: 0 .1rem .4rem rgba(0,0,0,.1);}
}
.innovateFive {padding: 1.2rem 0; background: #fff;}
.innovateFive .tab-box .item {padding: .12rem .4rem; border: 1px solid #666; border-radius: .4rem; cursor: pointer; transition: .4s; font-size: var(--font18); color: #333;}
.innovateFive .tab-box .item.active {background: #1fd3db; border-color: #1fd3db; color: #fff;}
.innovateFive .lab-swiper {display: none; padding-bottom: .6rem;}
.innovateFive .lab-swiper.active {display: block;}
.innovateFive .lab-swiper .swiper-slide { overflow: hidden;}
.innovateFive .lab-swiper .imgBox { padding-bottom: 64.25%; overflow: hidden;}
.innovateFive .lab-swiper .imgBox img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: .5s;}
.innovateFive .lab-swiper .swiper-pagination {bottom: 0;}
.innovateFive .lab-swiper .swiper-pagination-bullet {width: 10px; height: 10px; background: #d2d2d2; opacity: 1; transition: .3s; margin: 0 5px !important;}
.innovateFive .lab-swiper .swiper-pagination-bullet-active {background: #050a7a;}
@media (any-hover: hover) {
.innovateFive .lab-swiper .swiper-slide .imgBox:hover img {transform: scale(1.05);}
}
/* ==========交付保障 */
.deliveryOne {padding-top: 1.2rem;}
.deliveryOne .top {align-items: flex-end;}
.deliveryOne .le { }
.deliveryOne .re { width: 50%; }
.deliveryOne .re p { line-height: 1.8; }
.deliveryTwo {padding: .8rem 0 1.5rem;}
.stats-list { width: 100%; }
.stats-list li { width: 18%; text-align: center; }
.stats-list li h4 { position: relative; display: inline-block; }
.stats-list li p { line-height: 1.4; }
.deliveryThree {padding: 1.2rem 0; background: url(../images/deliveryThree-bg.webp) no-repeat center; background-size: cover;}
.deliveryThree .le {width: 40%;}
.deliveryThree .re {width: 50%;}
.deliveryThree .le .text {margin-top: .5rem;}
.deliveryThree .le .text p { line-height: 1.8; }
.deliveryThree .re .imgBox { position: relative; padding: 0.2rem; }
.deliveryThree .re .imgBox img {width: 100%;}
.deliveryFour {padding: 1rem 0;}
.delivery-swiper-box { position: relative; }
.delivery-swiper {width: 100%; }
.delivery-swiper .swiper-slide { height: auto; }
.delivery-swiper .imgBox {width: 100%; height: 100%; overflow: hidden; border-radius: 0.1rem; position: relative;}
.delivery-swiper .imgBox::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 1; transition: .5s; }
.delivery-swiper .imgBox img {width: 100%; height: 100%; object-fit: cover; }
.delivery-swiper .swiper-slide-active .imgBox::before {opacity: 0;}
.deliveryFour .swiper-button-prev,
.deliveryFour .swiper-button-next {width: .5rem;height: .5rem; font-size: var(--font24); background: #fff;border-radius: 50%;color: #333; transition: .5s;}
.deliveryFour .swiper-button-prev { left: 20%; }
.deliveryFour .swiper-button-next { right: 20%; }
.deliveryFour .swiper-button-prev:after,
.deliveryFour .swiper-button-next:after {background: #0056FF;color: #fff;}
@media (any-hover: hover) {
.deliveryFour .swiper-button-prev:hover,
.deliveryFour .swiper-button-next:hover {background: #0056FF;color: #fff;}
}
/* ==========新闻动态 */
.news-csr { padding: 1rem 0; background: rgba(240, 240, 240, 0.88);}
.news-csr .csr-box {overflow: hidden; margin-top: .6rem; background: #fff;}
.news-csr .csr-box .le { width: 50%; }
.news-csr .csr-box .le .imgBox { width: 100%; height: 100%; }
.news-csr .csr-box .le .imgBox img { width: 100%; height: 100%; object-fit: cover; }
.news-csr .csr-box .re { width: 50%; padding: .6rem .8rem; }
.news-csr .btn-more {margin-top: 1rem; display: inline-flex; background: #050a7a; color: #fff; padding: .15rem .45rem; border-radius: 100px; transition: .4s; }
.news-csr .btn-more:hover { background: #23dae0; }
.news-list-wrap {padding: 1rem 0; overflow: hidden;}
.news-list-wrap .list {margin-top: .5rem;}
.news-list-wrap .item { padding: .6rem 0; border-bottom: 1px solid #eee; position: relative; z-index: 1;}
.news-list-wrap .item::after {content: ''; position: absolute; inset: 0; width: 200vw; left: -100vw; height: 100%; background: rgba(240, 240, 240, 0.8784); opacity: 0; transition: .5s; z-index: -1;}
.news-list-wrap .item:first-child { border-top: 1px solid #eee; }
.news-list-wrap .item .date { flex-shrink: 0; }
.news-list-wrap .item .imgBox { width: 5.3rem; height: 3.36rem; overflow: hidden; margin: 0 .5rem 0 2rem; }
.news-list-wrap .item .imgBox img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.news-list-wrap .item .info { flex: 1; margin-top: .3rem; position: relative; padding-bottom: .8rem;}
.news-list-wrap .item .info h4 a:hover { color: #19448B; }
.news-list-wrap .item .info .more { position: absolute; bottom: .3rem; left: 0; color: #333; font-weight: 700; transition: .3s; }
.news-list-wrap .item .info .more:hover { color: #19448B; }
@media (any-hover: hover) {
.news-list-wrap .item:hover .date {color: #19448B; }
.news-list-wrap .item:hover::after {opacity: 1;}
.news-list-wrap .item:hover .imgBox img { transform: scale(1.05); }
}
/* =====新闻详情===== */
.newsDateOne {background: #f5f5f5; padding-bottom: 1rem;}
.newsDateOne .mbx a {color: #333;}
.newsDateOne .mbx a::after {color: #333;}
.newsDateOne .mbx .icBox img {filter: brightness(0); -webkit-filter:brightness(0);}
.newsDateOne .box {margin-top: .48rem; align-items: flex-start;}
.newsDateOne .le {width: 72%; background: #fff; padding: .6rem;}
.newsDateOne .re {width: 26%; position: sticky; top: 1.5rem;}
.newsDateOne .le .tle {padding-bottom: .24rem; border-bottom: 1px solid #eee;}
.newsDateOne .le .tle .tit {line-height: 1.3;}
.newsDateOne .le .tle .time {margin-top: .15rem; color: #666;}
.newsDateOne .le .con {padding: .28rem 0;}
.newsDateOne .re .re_recomd {background: #fff; margin-bottom: .24rem; padding: .28rem;}
.newsDateOne .re .tit {border-bottom: 1px solid #DEDEDE; padding-bottom: .2rem; font-size: var(--font24); font-weight: 700; color: #333;}
.newsDateOne .re .list li {padding: .2rem 0; border-bottom: 1px solid #D2D2D2;}
.newsDateOne .re .list li:last-child {border-bottom: 0; padding-bottom: 0;}
.newsDateOne .re .list li a {display: flex; align-items: center; gap: .2rem;}
.newsDateOne .re .list li .imgBox {width: 40%; padding-bottom: 35%; background: #fff; border-radius: .1rem; position: relative; flex-shrink: 0; overflow: hidden;}
.newsDateOne .re .list li .imgBox img {width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: .5s;}
@media (any-hover: hover) {
.newsDateOne .re .list li:hover .imgBox img {transform: scale(1.1);}
}
.newsDateOne .re .re_recomd2 .list li .imgBox img {object-fit: contain;}
/* 新闻分页 */
.newsxq-page {display: flex; justify-content: space-between; align-items: center; margin-top: .48rem; padding-top: .48rem; border-top: 1px solid #F2F2F2; }
.newsxq-page a {display: flex; align-items: center; gap: .1rem;}
.news-prev,.news-next{transition:0.6s; display: flex; align-items: center; justify-content: center; min-width: 30px;min-height: 30px; border: 1px solid #eeeeee;border-radius: .03rem;}
.news-prev i,.news-next i {font-size: var(--font14);}
.newsxq-page .back-link {display: inline-flex; }
.newsxq-page .back-link i {transform: rotate(0deg);}
@media (any-hover: hover) {
.prev-link:hover .news-prev {background: #001a66; border-color: #001a66;}
.prev-link:hover .news-prev i {color: #fff;}
.next-link:hover .news-next {background: #001a66; border-color: #001a66;}
.next-link:hover .news-next i {color: #fff;}
}
/* ==========人力资源 */
.humanOne { padding: 1.2rem 0; background: #fff; }
.humanOne .human-title { margin-bottom: .6rem; }
.policy-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem .4rem; }
.policy-item { background: #f8f9fb; border-radius: .15rem; padding: .5rem .4rem; display: flex; align-items: flex-start; gap: .3rem; transition: .4s; }
.policy-item .icon-box { width: .5rem; height: .5rem; min-height: 40px; min-width: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.policy-item .icon-box img {max-width: 100%; max-height: 100%;}
.policy-item .info h3 {margin-bottom: .05rem;}
.humanTwo { padding: 0 0 1rem; background: #fff; }
.humanTwo-list { display: flex; gap: .15rem; height: 5.86rem; margin-top: .7rem; }
.humanTwo-list .item { position: relative; flex: 1; height: 100%; overflow: hidden; border-radius: .2rem; transition: flex .7s cubic-bezier(.22, .61, .36, 1); cursor: pointer; }
.humanTwo-list .item .imgBox { position: absolute; inset: 0; z-index: 1; }
.humanTwo-list .item .imgBox img { width: 100%; height: 100%; object-fit: cover; transition: .8s ease; }
.humanTwo-list .item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%); z-index: 2; transition: .5s; }
.humanTwo-list .item-inner {opacity: 0; padding: .4rem; padding-bottom: 1rem; position: absolute; left: 0; bottom: 0; width: 100%; transition: .5s; z-index: 3; }
.humanTwo-list .item .desc {margin-top: .2rem;}
.humanTwo-list .item .item-tit {color: #fff; font-size: var(--font24); font-weight: 700; position: absolute; width: 100%; padding: 0 .2rem; text-align: center; bottom: .4rem; z-index: 3; transition: .5s; }
.humanTwo-list .item.active .item-inner {opacity: 1; transition-delay: .5s;}
.humanTwo-list .item.active { flex: 2.8; }
.humanTwo-list .item.active::after {background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%); }
.humanTwo-list .item.active .desc { }
.humanTwo-list .item.active .item-tit {opacity: 0;}
@media (any-hover: hover) {
.humanTwo-list .item:hover .imgBox img { transform: scale(1.05); }
}
.humanThree { padding: 1.2rem 0; background: url(../images/humanThree-bg.webp) no-repeat center/cover; background-attachment: fixed; position: relative; }
.humanThree .container { position: relative; z-index: 2; }
.humanThree .human-title { margin-bottom: 1.2rem; }
.planning-cards {gap: .5rem; margin-bottom: .5rem; }
.planning-cards .item {min-height: 2.6rem; background: rgba(255, 255, 255, 0.1); padding: .5rem .3rem; border-radius: .2rem; display: flex; flex-direction: column; }
.planning-cards .item .phase { }
.planning-cards .item .desc {margin-top: .2rem;}
.planning-cards .item:last-child .desc {margin-top: .45rem;}
.planning-timeline { position: relative; }
.planning-timeline .line { height: 1px; background: rgba(255, 255, 255, 0.4); position: relative; margin-bottom: .6rem; }
.planning-timeline .line::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 20px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.planning-timeline .milestones { padding: 0 .2rem; padding-right: 1.5rem;}
.planning-timeline .milestone { font-weight: 500; }
.planning-timeline .arrow { color: #fff; font-size: var(--font20); display: flex; align-items: center; }
.humanFour { padding: 1.2rem 0; background: #fff; }
.humanFour .human-title { margin-bottom: .6rem; }
.job-list { display: flex; flex-direction: column; gap: .2rem; }
.job-item { background: #fff; border-radius: .15rem; border: 1px solid #eee; overflow: hidden; transition: all .3s; }
.job-item .job-header { padding: .3rem .4rem; cursor: pointer; transition: all .3s; border-bottom: 1px solid transparent;}
.job-item .job-info-main { gap: .6rem; flex: 1; }
.job-item .job-name { color: #333; }
.job-item .job-tags { gap: .4rem; flex: 1; margin: 0 2rem; justify-content: space-between;}
.job-item .tag { color: #333; font-size: var(--font18); gap: .1rem; }
.job-item .tag i { font-size: var(--font20); color: #ccc; }
.job-item .job-arrow { font-size: var(--font24); color: #333; transition: transform .3s; }
.job-item .job-content {background: #F9F9F9; padding: .5rem; overflow: hidden; display: none;}
.job-item .content-inner {padding: 0;}
.job-item .detail-block { margin-top: .4rem; }
.job-item .detail-title { font-size: var(--font18); color: #333; margin-bottom: .15rem; }
.job-item .detail-list { color: #666; font-size: var(--font16); line-height: 1.8; }
.job-item .job-apply { margin-top: .6rem; }
.job-item .apply-btn { display: inline-block; padding: .15rem .4rem; background: #0C2287; color: #fff; border-radius: .5rem; font-size: var(--font18); transition: all .3s;padding: .1rem .4rem; }
.job-item .apply-btn:hover { background: #001e62; transform: translateY(-3px); box-shadow: 0 .05rem .15rem rgba(0, 30, 98, 0.3); }
.job-item.active .job-header {background: #F9F9F9; border-color: #D8D8D8;}
.job-item.active .job-arrow { transform: rotate(180deg); }
.job-item.active { border-color: #D8D8D8; }
/* ==========联系我们-联系我们 */
.contact-title h2{display: block; font-size: var(--font42); font-weight: 500; margin-bottom: .6rem;}
.ny-contact .tact-box {padding: 1rem 0 1.2rem;}
.ny-contact .tact-box .info{width: 40%;}
.ny-contact .tact-box .text{line-height: 2;}
.ny-contact .tact-box .text b{display: block;}
.ny-contact .tact-box .text a{color: #3D3D3D;}
@media (any-hover: hover) {
.ny-contact .tact-box .text a:hover {color: #0056FF;}
}
.follow {margin-top: .5rem;}
.follow dt {flex-shrink: 0;}
.follow dl {display: flex; align-items: center;}
.follow dl .ddbox {display: flex;}
.follow dl dd {margin-right: .2rem; position: relative;}
.follow dl dd .icBox {width: .6rem; height: .6rem; min-height: 40px; min-width: 40px; border-radius: 50%;background: #D8D8D8;display: flex; align-items: center; justify-content: center;}
.follow dl dd .icBox svg {width: 40%; height: 40%; object-fit: contain; }
.follow dl dd .icBox svg path {}
.follow dl dd:hover .icBox svg path {opacity: 1;}
.follow dl dd.hover_code .code {width: auto; box-shadow: 0 0 .1rem rgba(0,0,0,.1); position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%); background: #fff; padding: .1rem; border-radius: .1rem; opacity: 0; transition: .5s; pointer-events: none; visibility: hidden;}
.follow dl dd.hover_code .code span {display: block; margin-top: .05rem;}
.follow dl dd.hover_code .code img {width: 1rem;}
.follow dl dd.hover_code .code::after {content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 0; height: 0; border: .1rem solid transparent; border-top-color: #fff;}
/* @media (any-hover: hover) { */
.follow dl dd.hover_code:hover .icBox{background: #0056FF;}
.follow dl dd.hover_code:hover .icBox svg path {fill: #fff;}
.follow dl dd.hover_code:hover .code {opacity: 1; bottom: 130%; visibility: visible; pointer-events: auto;}
/* } */
.ny-contact .tact-box .pic{width: 53.375%; position: relative;}
.ny-contact .tact-box .pic img{display: block; width: 100%; object-fit: cover; min-height: 4rem; border-radius: .24rem;}
.maps-cirle {position: absolute;top: 55%;left: 50.5%;transform: translate(-50%,-50%);}
.maps-cirle i {width: .25rem; height: .25rem; border-radius: 50%; display: block;background: rgba(80, 80, 80, 1); position: relative; z-index: 2;}
.maps-cirle::after {background: rgba(64,64,64,1); position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%;height: 100%;border-radius: 50%;content: ''; z-index: 1; animation: scale 2s infinite;}
@keyframes scale {0% {transform:translate(-50%, -50%) scale(1); opacity: .9; } 100% { transform:translate(-50%, -50%) scale(4); opacity: 0;}}
.message-bg{background: #F6F6F6; padding: 1rem 0;}
.message-bg .form .form_box {display: flex; justify-content: space-between;}
.message-bg .form .form_box .form_left {width: 49.25%;}
.message-bg .form .form_box .form_right {width: 49.25%;}
.message-bg .form .form_box .inBox {margin-bottom: .2rem;}
.message-bg .form .form_box input {height: .56rem;min-height: 36px; background: #ececec; width: 100%; padding: 0 .2rem;}
.message-bg .form .form_box input::-webkit-input-placeholder {color: #999999;}
.message-bg .form .form_box input::-moz-placeholder {color: #999999;}
.message-bg .form .form_box input::-ms-input-placeholder {color: #999999;}
.message-bg .form .form_box textarea {height: 100%; background: #ececec; width: 100%; padding: .2rem; box-sizing: border-box; resize: none;}
.message-bg .form .form_box textarea::-webkit-input-placeholder {color: #999999;}
.message-bg .form .form_box textarea::-moz-placeholder {color: #999999;}
.message-bg .form .form_box textarea::-ms-input-placeholder {color: #999999;}
.message-bg .form .form_box .intent {height: calc(.56rem + .56rem + .56rem + .4rem);}
.message-bg .form .form_box .incode {position: relative;}
.message-bg .form .form_box .incode img {position: absolute;right: .1rem; top: 50%; transform: translateY(-50%); height: 90%; width: 1rem; object-fit: contain;}
.message-bg .form .insub {margin-top: .2rem;}
.message-bg .form .insub button {width: 1.4rem; height: .56rem; min-height: 36px; background: #999999; color: #fff; border: 0; margin: 0 .1rem; font-size: var(--font16);}
.layui-form-select dl {top: 100%; }
.layui-form-select dl dd {line-height: initial; padding: .1rem;}
/* 分页器 */
/* .pagination{width: 100%;display: flex;justify-content: center;}
.pagination button{width: .4rem;height: .4rem;border: 0.01rem solid #999999;} */
.section1{
position: relative;
overflow: hidden;
}
.section1 img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.section1 h1{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
font-weight: bold;
font-size: var(--font54);
color: #FFFFFF;
}
/* 父容器 */
.section2 {
width: 100%;
height: auto;
padding: 0.6rem 0;
box-sizing: border-box;
background: #fff; /* 与截图匹配的浅蓝背景，可按需修改 */
position: relative;
}
.section2-container {
max-width: 16rem;
margin: 0 auto;
padding: 0 0.2rem;
box-sizing: border-box;
}
/* 单个模块项：左图右文布局 */
.section2-item {
display: flex;
align-items: center;
margin-bottom: 0.54rem;
gap: .54rem;
}
.section2-item:last-child {
margin-bottom: 0;
}
/* 图片容器 */
.section2-img-box {
flex-shrink: 0; /* 禁止图片被压缩 */
overflow: hidden;
border-radius: 0.04rem;
}
.section2-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 右侧文字内容 */
.section2-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
}
/* 标题样式 */
.section2-title {
margin: 0;
font-size: var(--font26);
color: #333;
font-weight: 600;
line-height: 1.4;
}
/* 正文文本样式 */
.section2-desc {
margin: 0;
font-size: var(--font16);
color: #000;
line-height: 1.6;
opacity: 0.85;
}
/* 按钮基础样式 */
.section2-btn {
border: 1px solid #A9A9A9;
background: transparent;
font-size: var(--font14);
color: #333;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.08rem;
transition: all 0.3s ease;
padding: .2rem;
}
.section2-btn a{
display: flex;
gap: .1rem;
justify-content: center;
align-items: center;
color: inherit;
text-decoration: none;
}
/* 按钮 hover 效果 */
.section2-btn:hover {
background-color: #013A95;
border-color: #013A95;
color: #fff;
}
/* 箭头图标：21px * 15px = 0.21rem * 0.15rem */
.btn-icon {
display: inline-block;
width: 0.21rem;
height: 0.15rem;
position: relative;
transition: transform 0.3s ease;
}
.btn-icon img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.3s ease;
}
.btn-icon img:first-child{opacity: 1;}
.btn-icon img:last-child{opacity: 0;}
.section2-btn:hover .btn-icon{transform: rotate(-45deg);}
.section2-btn:hover .btn-icon img:first-child{opacity: 0;}
.section2-btn:hover .btn-icon img:last-child{opacity: 1;}
/* ---------- 响应式适配 ---------- */
/* 平板端 */
@media screen and (max-width: 992px) {
.section2-img-box {
width: 5.5rem;
height: auto;
aspect-ratio: 830 / 354; /* 保持图片比例不变形 */
}
}
/* 移动端：图文改为上下布局 */
@media screen and (max-width: 768px) {
.section2-item {
flex-direction: column;
gap: 0.3rem;
}
.section2-img-box {
width: 100%;
height: auto;
}
.section2-content {
width: 100%;
align-items: center;
text-align: center;
}
}
.download-two{padding: .88rem 0 0 0;}
.download-two .container{display: flex;flex-direction: column;justify-content: center;align-items: center}
.download-two .part1{display: grid;grid-template-columns: repeat(2, 1fr);gap: 0.22rem;width: 90%;max-width: 14rem;}
.download-two .part1 .grid-item{width: 100%;display: flex;justify-content: space-between;border: 0.01rem solid #CECECE;min-height: 1.03rem;height: auto;align-items: center;padding:0.22rem .32rem;box-sizing: border-box;}
.download-two .part1 .grid-item:hover{border: 1px solid #013A95;}
.download-two .part1 .grid-item .left{flex: 1;min-width: 0;}
.download-two .part1 .grid-item .left .title
{
font-weight: bold;
font-size: var(--font24);
color: #333333;
line-height: 1.3;
word-break: break-all;
}
.download-two .part1 .grid-item .left .info{display: flex;justify-content: flex-start;gap: 0.25rem;margin-top: .15rem;font-size: var(--font18);color: #333333;flex-wrap: wrap;}
.download-two .part1 .grid-item .right{flex-shrink: 0;margin-left: 0.2rem;}
.download-two .part1 .grid-item .right .download-link{display: block;width: .36rem;height: .32rem;background: url('/images/icons/download.png') no-repeat center;background-size: contain;}
.download-two .part1 .grid-item:hover .right .download-link{background-image: url('/images/icons/download_active.png');}
.download-two .part2{width: 90%;max-width: 14rem;margin-top: 0.4rem;}
.download-two .part2 img{width: 100%;height: auto;display: block;}
.download-two .pagination{display: flex;gap: .21rem;margin-top: 0.4rem;flex-wrap: wrap;}
.download-two .pagination button{width: .4rem;height: .4rem;border: 0.01rem solid #999999;display: flex;justify-content: center;align-items: center;background: #fff;cursor: pointer;}
.download-two .pagination button img{width: 0.14rem;height: 0.14rem;}
.download-two .pagination .pagination-list{display: flex;gap: .21rem;flex-wrap: wrap;}
.download-two .pagination .pagination-list span{width: .4rem;height: .4rem;border: 0.01rem solid #999999;display: flex;justify-content: center;align-items: center;cursor: pointer;font-size: var(--font16);color: #666;}
.download-two .pagination .pagination-list span.active{background: #013A95;color: #fff;border-color: #013A95;}
.section1.recruit {
position: relative;
overflow: hidden;
height: 6rem;
width: 100%;
}
.section1.recruit img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.section1.recruit h1 {
position: absolute;
left: 3.08rem;
top: 50%;
transform: translateY(-50%);
font-size: var(--font60);
font-weight: 700;
color: #fff;
letter-spacing: .04rem;
}
.recruit .tab{display: flex;position: absolute;left: 3.08rem;bottom: .23rem;gap: .2rem;z-index: 2;}
.recruit .tab button,.recruit .tab a{min-width: 1.77rem;width: auto;padding: 0 .2rem;height: .57rem;color: #fff;font-size: var(--font20);cursor: pointer;background: transparent;border-radius: .3rem;transition: all 0.3s ease;white-space: nowrap;text-decoration:none;border:1px solid rgba(255,255,255,0.5);display:inline-flex;align-items:center;justify-content:center;}
.recruit .tab button:hover,.recruit .tab a:hover{background-color: rgba(1, 58, 149, 0.7);border-color: #013A95;}
.recruit .tab button.active,.recruit .tab a.active{background-color: #013A95;border-color: #013A95;box-shadow: 0 0.04rem 0.15rem rgba(1, 58, 149, 0.4);}
/* 大屏适配 (≥1600px) */
@media (min-width: 1600px) {
.section1.recruit{height: 7rem;}
.section1.recruit h1{font-size: var(--font70);}
.recruit .tab button,.recruit .tab a{height: .6rem;font-size: var(--font22);}
}
/* 平板端适配 1024px ~ 1280px */
@media (max-width: 1280px) and (min-width: 1025px) {
.section1.recruit{height: 5.5rem;}
.section1.recruit h1{left: 1.8rem;font-size: var(--font50);}
.recruit .tab{left: 1.8rem;gap: .15rem;}
.recruit .tab button,.recruit .tab a{min-width: 1.5rem;height: .5rem;font-size: var(--font18);}
}
/* 小平板端适配 769px ~ 1024px */
@media (max-width: 1024px) and (min-width: 769px) {
.section1.recruit{height: 4.8rem;}
.section1.recruit h1{left: 5%;font-size: var(--font44);}
.recruit .tab{left: 5%;bottom: .2rem;gap: .15rem;}
.recruit .tab button,.recruit .tab a{min-width: 1.4rem;height: .46rem;font-size: var(--font18);}
}
/* 大手机端适配 577px ~ 768px */
@media (max-width: 768px) and (min-width: 577px) {
.section1.recruit{height: 4rem;}
.section1.recruit h1{left: 50%;transform: translate(-50%,-50%);font-size: var(--font38);text-align: center;width: 90%;}
.recruit .tab{left: 50%;bottom: .18rem;transform: translateX(-50%);gap: .15rem;justify-content: center;width: 90%;flex-wrap: wrap;}
.recruit .tab button,.recruit .tab a{min-width: 1.4rem;height: .48rem;padding: .12rem .18rem;font-size: var(--font18);border-width: 1px;}
}
/* 手机端适配 ≤576px */
@media (max-width: 576px) {
.section1.recruit{height: 3.5rem;}
.section1.recruit h1{left: 50%;top: 45%;transform: translate(-50%,-50%);font-size: var(--font32);text-align: center;width: 90%;letter-spacing: .02rem;}
.recruit .tab{left: 50%;bottom: .15rem;transform: translateX(-50%);gap: .1rem;justify-content: center;width: 92%;flex-wrap: wrap;}
/* .recruit .tab button{min-width: 1.3rem;height: .44rem;padding: 0 .14rem;font-size: var(--font16);border-width: 1px;border-radius: .3rem;} */
}
/* 小手机端适配 ≤380px */
@media (max-width: 380px) {
.section1.recruit{height: 3rem;}
.section1.recruit h1{font-size: var(--font28);}
/* .recruit .tab{gap: .08rem;width: 96%;} */
/* .recruit .tab button{min-width: 1.2rem;height: .4rem;padding: 0 .12rem;font-size: var(--font14);} */
}
/* 通用大标题：50px */
.section-title {
font-size: var(--font50);
font-weight: 600;
color: #333;
text-align: center;
margin-bottom: 0.28rem;
margin-top: .76rem;
}
/* ========== 模块1：为什么选择我们 ========== */
.section-advantage {
background: #fff;
padding: 0.8rem 0 1rem;
width: 100%;
box-sizing: border-box;
}
.advantage-list {
display: flex;
justify-content: space-between;
gap: 0.25rem;
flex-wrap: wrap;
}
.advantage-item {
flex: 1 1 22%;
min-width: 0;
background: #fff;
border: 0.01rem solid #e5e5e5;
border-radius: 0.08rem;
padding: 0.4rem 0.25rem;
text-align: center;
transition: all 0.3s ease;
box-sizing: border-box;
box-shadow: 0 5px 10px rgba(0, 0, 0,.25);
}
.advantage-item:hover {
box-shadow: 0 0.04rem 0.15rem rgba(1, 58, 149, 0.15);
border-color: #013A95;
transform: translateY(-3px);
}
/* 图标：可使用 img 或 background-image */
.advantage-icon {
width: 0.6rem;
height: 0.6rem;
margin: 0 auto 0.2rem;
display: flex;
align-items: center;
justify-content: center;
}
.advantage-icon img {
display: block;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.advantage-item-title {
font-size: var(--font22);
font-weight: 600;
color: #333;
margin-bottom: 0.15rem;
line-height: 1.3;
}
.advantage-item-desc {
font-size: var(--font15);
color: #666;
line-height: 1.7;
}
/* 大屏优化 (≥1600px) */
@media (min-width: 1600px) {
.advantage-item-title {font-size: var(--font24);}
.advantage-item-desc {font-size: var(--font16);}
.advantage-icon {width: .7rem;height: .7rem;}
.advantage-item {padding: .5rem .3rem;}
}
/* 中等屏幕：3列 */
@media (max-width: 1280px) and (min-width: 993px) {
.advantage-icon {width: .55rem;height: .55rem;}
.advantage-item-title {font-size: var(--font20);}
.advantage-item-desc {font-size: var(--font14);}
}
/* 小平板 / 大屏手机：2列 */
@media (max-width: 992px) and (min-width: 577px) {
.advantage-list {gap: .2rem;}
.advantage-item {flex: 1 1 45%;padding: .35rem .2rem;}
.advantage-icon {width: .5rem;height: .5rem;}
.advantage-item-title {font-size: var(--font22);margin-bottom: .12rem;}
.advantage-item-desc {font-size: var(--font14);line-height: 1.6;}
}
/* 手机端：1列 */
@media (max-width: 576px) {
.section-advantage {padding: .6rem 0 .7rem;}
.advantage-list {gap: .15rem;}
.advantage-item {flex: 1 1 100%;padding: .3rem .2rem;}
.advantage-icon {width: .45rem;height: .45rem;margin-bottom: .15rem;}
/* .advantage-item-title {font-size: var(--font18);margin-bottom: .1rem;} */
.advantage-item-desc {font-size: var(--font14);line-height: 1.6;}
}
/* ========== 模块2：公司介绍 ========== */
.section-company {
padding: 0;
width: 100%;
}
.company-banner {
width: 100%;
min-height: 3rem;
position: relative;
display: flex;
overflow: hidden;
}
.company-bg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* z-index: 9; */
}
.company-bg img{
width: 100%;
height: 100%;
object-fit: cover;
}
.company-info {
position: relative;
width: 50%;
height: 100%;
/* padding: 0.5rem 0.5rem; */
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
box-sizing: border-box;
background: linear-gradient(90deg, #013A95 0%, #013A95 75%, rgba(1, 58, 149, 0) 100%);
/* min-height: 3rem; */
}
.company-title {
font-size: var(--font32);
font-weight: 600;
margin-bottom: 0.2rem;
line-height: 1.3;
}
.company-desc {
font-size: var(--font15);
line-height: 1.8;
margin-bottom: 0.15rem;
opacity: 0.92;
text-align: justify;
}
.company-desc:last-child {
margin-bottom: 0;
}
/* 大屏优化 (≥1600px) */
@media (min-width: 1600px) {
.company-banner {min-height: 3.5rem;}
.company-info {}
.company-title {font-size: var(--font36);}
.company-desc {font-size: var(--font16);}
}
/* 平板端 */
@media (max-width: 1280px) and (min-width: 993px) {
.company-info {width: 55%;padding: .45rem .6rem;min-height: 2.8rem;}
.company-title {font-size: var(--font28);}
.company-desc {font-size: var(--font14);}
}
/* 小平板 */
@media (max-width: 992px) and (min-width: 769px) {
.company-info {width: 65%;padding: .4rem .5rem;min-height: 2.6rem;}
.company-title {font-size: var(--font26);margin-bottom: .16rem;}
.company-desc {font-size: var(--font14);line-height: 1.7;}
}
/* 手机端：改为全宽纯色块，不需要渐变遮罩 */
@media (max-width: 768px) {
.company-banner {min-height: auto;}
.company-info {
position: relative;
width: 100%;
padding: .4rem .24rem;
background: none;
min-height: auto;
}
.company-title {font-size: var(--font28);margin-bottom: .15rem;text-align: center;}
.company-desc {font-size: var(--font14);line-height: 1.7;text-align: left;}
}
/* 小手机 */
@media (max-width: 480px) {
/* .company-info {padding: .35rem .2rem;} */
/* .company-title {font-size: var(--font20);margin-bottom: .12rem;} */
.company-desc {font-size: var(--font14);line-height: 1.65;}
}
/* ========== 模块3：热招岗位 ========== */
.section-jobs {
background: #fff;
padding: 0 0 1rem;
width: 100%;
box-sizing: border-box;
}
.job-table {
width: 100%;
border: 0.01rem solid #e5e5e5;
border-radius: 0.08rem;
overflow: hidden;
}
/* 表头 */
.job-header {
display: flex;
background: #013A95;
color: #fff;
padding: 0.18rem 0.25rem;
font-size: var(--font18);
font-weight: 500;
align-items: center;
}
.job-col {
flex: 1;
display: flex;
align-items: center;
min-width: 0;
box-sizing: border-box;
}
.job-col-name {
flex: 2.5;
}
/* 表头右侧预留位置给展开箭头，视觉上与内容行对齐 */
.job-header::after {
content: "";
display: block;
width: 0.28rem;
flex-shrink: 0;
}
/* 岗位行 */
.job-row {
border-bottom: 0.01rem solid #e5e5e5;
cursor: pointer;
transition: background 0.3s ease;
background: #fff;
}
.job-row:last-child {
border-bottom: none;
}
.job-row:hover {
/*background: #f5f8ff;*/
}
.job-row-main {
display: flex;
padding: 0.22rem 0.25rem;
font-size: var(--font16);
color: #333;
align-items: center;
flex-wrap: nowrap;
gap: 0;
}
.job-row-main .job-col-name {
font-weight: bold;
color: #333333;
}
/* 箭头图标（使用 Remix Icon ri-arrow-right-s-line） */
.arrow-icon {
/* display: inline-block; */
transition: transform 0.3s ease, color 0.3s ease;
flex-shrink: 0;
color: #666;
line-height: 1;
}
.arrow-icon i {
font-size: var(--font24);
vertical-align: middle;
transition: transform 0.3s ease;
display: inline-block;
line-height: 1;
}
.job-row-active .arrow-icon {
color: #013A95;
}
.job-row-active .arrow-icon i {
transform: rotate(90deg);
}
/* 独立展开图标：桌面端贴在右侧，固定大小，不被挤压 */
.row-expand {
width: 0.32rem;
height: 0.32rem;
margin-left: 0.12rem;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 50%;
/*background: #f5f8ff;*/
/*border: 1px solid #dde3f3;*/
color: #555;
}
.row-expand i {
font-size: var(--font24);
transition: transform 0.3s ease;
display: block;
line-height: 1;
}
.row-expand:hover {
/*background: #eef2ff;*/
/*border-color: #c5d0ee;*/
color: #013A95;
}
.job-row-active .row-expand {
color: #013A95;
/*background: #eaf0ff;*/
/*border-color: #b7c5ea;*/
}
.job-row-active .row-expand i {
transform: rotate(90deg);
}
/* 展开详情 */
.job-detail {
display: none;
padding: 0.1rem 0.25rem 0.25rem;
font-size: var(--font16);
color: #555;
line-height: 1.8;
background: #f9f9f9;
border-top: 1px solid #d5ddee;
}
.job-row-active .job-detail {
display: block;
}
.detail-block {
margin-bottom: 0.15rem;
}
.detail-block h4 {
font-size: var(--font20);
color: #333;
font-weight: 600;
margin-bottom: 0.06rem;
}
/* 投递按钮 */
.apply-btn {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.1rem 0.22rem;
background: #013A95;
color: #fff;
border: none;
border-radius: 0.3rem;
/* font-size: 0.14rem; */
cursor: pointer;
transition: all 0.3s ease;
line-height: 1.5;
}
.apply-btn a{color: #fff;}
.apply-btn:hover {
background: #012e72;
transform: translateY(-2px);
box-shadow: 0 0.04rem 0.12rem rgba(1,58,149,.25);
}
.mail-icon {
width: 0.18rem;
/* height: 0.14rem; */
/* background: url('data:image/svg+xml;utf8,') center / contain no-repeat; */
flex-shrink: 0;
}
/* ===== 响应式：热招岗位 ===== */
/* 中大屏：微调 */
@media (max-width: 1280px) and (min-width: 993px) {
.job-header {padding: .16rem .2rem;font-size: .16rem;}
/* .job-row-main {padding: .2rem;font-size: .14rem;} */
/* .apply-btn {font-size: .13rem;padding: .09rem .2rem;} */
}
/* 平板端（992px 以下）：保留表格布局，缩小字号和间距 */
@media (max-width: 992px) and (min-width: 769px) {
.job-header {padding: .14rem .16rem;font-size: .15rem;}
/* .job-row-main {padding: .16rem;font-size: .13rem;flex-wrap: wrap;gap: .08rem;} */
.job-row-main .job-col {flex: 1 1 20%;}
/* .job-row-main .job-col-name {flex: 1 1 100%;margin-bottom: .05rem;font-size: .15rem;} */
/* .apply-btn {font-size: .13rem;padding: .08rem .18rem;} */
/* .job-detail {padding: .1rem .16rem .18rem;font-size: .13rem;} */
/* .detail-block h4 {font-size: var(--font16);} */
}
/* 手机端（≤768px）：彻底转为卡片布局，隐藏表头 */
@media (max-width: 768px) {
.job-table {
border: 1px solid #e5e5e5;
background: #fff;
border-radius: 0.06rem;
}
.job-header {
display: none;
}
.job-row {
border-bottom: 1px solid #e5e5e5;
/*background: #fff;*/
}
.job-row:last-child {
border-bottom: none;
}
.job-row-main {
position: relative;
flex-wrap: wrap;
padding: .18rem .18rem;
padding-right: .5rem;
gap: .06rem .12rem;
/* font-size: .14rem; */
align-items: flex-start;
}
/* 职位名：全宽大字体 */
.job-col-name {
flex: 0 0 100% !important;
width: 100%;
font-size: var(--font17) !important;
font-weight: 600;
color: #013A95;
margin-bottom: .06rem;
line-height: 1.4;
}
/* 其他列：两列显示，带 label 前缀 */
.job-col {
flex: 1 1 45%;
font-size: var(--font14);
color: #555;
align-items: flex-start;
padding: .04rem 0;
word-break: break-all;
}
.job-col-salary::before,
.job-col-address::before,
.job-col-num::before,
.job-col-time::before {
color: #999;
margin-right: .04rem;
/* font-size: .12rem; */
flex-shrink: 0;
}
.job-col-salary::before {content: "薪资：";}
.job-col-address::before {content: "地点：";}
.job-col-num::before {content: "人数：";}
.job-col-time::before {content: "发布：";}
/* 时间列不再含箭头，保持文字左对齐 */
.job-col-time {justify-content: flex-start;}
/* 手机端：展开箭头固定贴在右上角，不与任何文字冲突 */
.row-expand {
position: absolute;
top: .18rem;
right: .18rem;
width: .34rem;
height: .34rem;
margin-left: 0;
border-radius: 50%;
color: #555;
}
.row-expand i {
/* font-size: 0.24rem; */
}
.job-row-active .row-expand i {
transform: rotate(90deg);
}
.job-detail {
padding: .12rem .18rem .2rem;
/* font-size: .13rem; */
line-height: 1.7;
background: #fafcff;
}
.detail-block {margin-bottom: .12rem;}
/* .detail-block h4 {font-size: .14rem;margin-bottom: .04rem;} */
/* .apply-btn {
font-size: .13rem;
padding: .09rem .18rem;
border-radius: .3rem;
} */
/* .mail-icon {width: .16rem;height: .12rem;} */
}
/* 小手机（≤480px）：更紧凑 */
@media (max-width: 480px) {
.section-jobs .container {width: 94%;}
/* .job-row-main {padding: .16rem .14rem;font-size: .13rem;padding-right: .48rem;} */
.job-col-name {font-size: var(--font18) !important;}
/* .job-col {font-size: .12rem;flex: 1 1 100%;} */
.job-col-salary, .job-col-address {flex: 1 1 45%;}
.job-col-num, .job-col-time {flex: 1 1 45%;}
/* .job-detail {padding: .1rem .14rem .16rem;font-size: .12rem;} */
/* .detail-block h4 {font-size: .13rem;} */
/* .apply-btn {font-size: .12rem;padding: .08rem .16rem;} */
.row-expand {top: .14rem;right: .14rem;width: .3rem;height: .3rem;}
/* .row-expand i {font-size: 0.22rem;} */
}
/* 极小手机（≤380px） */
@media (max-width: 380px) {
/* .job-row-main {padding: .14rem .12rem;padding-right: .5rem;} */
/* .job-col-name {font-size: var(--font15) !important;} */
/* .job-col {flex: 1 1 100%;font-size: .12rem;} */
/* .job-detail {font-size: .12rem;line-height: 1.65;} */
.row-expand {top: .12rem;right: .12rem;width: .28rem;height: .28rem;}
/* .row-expand i {font-size: 0.2rem;} */
}
/* 小屏手机：基础字号收敛，避免元素过大 */
@media screen and (max-width: 480px) {
/* 不直接修改 html font-size，以避免影响全局模块 */
}
/* 模块整体容器 */
.section-concept {
width: 100%;
height: 8.37rem; /* 837px 总高度 */
/*background-color: #f3f3f3;*/
display: flex;
align-items: center;
}
/* 标题区 */
.section-header {
text-align: center;
margin-bottom: 0.54rem;
}
.section-subtitle {
font-size: var(--font22);
color: #666;
line-height: 1.5;
}
/* 卡片列表 */
.concept-list {
display: flex;
gap: 0.3rem;
justify-content: center;
}
/* 通用卡片样式 */
.concept-item {
flex: 1;
height: 5rem; /* 500px 卡片高度 */
background-color: #f3f3f3;
padding: 0.6rem 0.4rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.3s ease;
}
/* 中间高亮卡片 */
.concept-item-active {
background-color: #013A95;
}
.concept-item:hover {
background-color: #013A95;
}
.concept-item-active .concept-icon{
filter: brightness(100);
-webkit-filter:brightness(100);
}
.concept-icon img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
.concept-item:hover .concept-icon{
filter: brightness(100);
-webkit-filter:brightness(100);
}
/* 图标：纯背景SVG实现 */
.concept-icon {
width: 0.6rem;
height: 0.6rem;
margin-bottom: 0.4rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.icon-tech {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-value {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-iterate {
background-image: url('data:image/svg+xml;utf8,');
}
/* 卡片标题 */
.concept-item-title {
font-size: var(--font24);
font-weight: 600;
margin-bottom: 0.54rem;
color: #333;
}
.concept-item-active .concept-item-title {
color: #fff;
}
.concept-item:hover .concept-item-title {
color: #fff;
}
/* 卡片正文 */
.concept-item-desc {
font-size: var(--font16);
line-height: 1.8;
color: #333333;
}
.concept-item-active .concept-item-desc {
color: rgba(255, 255, 255, 0.9);
}
.concept-item:hover .concept-item-desc {
color: rgba(255, 255, 255, 0.9);
}
/* ---------- 响应式适配 ---------- */
/* 平板端 */
@media screen and (max-width: 992px) {
.section-concept {
height: auto;
padding: 0.6rem 0;
}
.concept-list {
flex-wrap: wrap;
}
.concept-item {
flex: 0 0 48%;
height: auto;
min-height: 4rem;
padding: 0.4rem 0.3rem;
}
.concept-item-active {
order: -1;
}
}
/* 移动端 */
@media screen and (max-width: 768px) {
.section-title {
font-size: var(--font38);
}
.section-subtitle {
/* font-size: 0.18rem; */
}
.concept-item {
flex: 0 0 100%;
min-height: auto;
}
.concept-item-active {
order: 0;
}
}
#part1{
display: none;
}
/*联系我们*/
/* 模块整体容器 */
.section-contact {
width: 100%;
height: 8.18rem; /* 总高度 818px */
background: #fff;
display: flex;
align-items: center;
}
/* 内容显示区域 1400px */
.contact-container {
/* width: 14rem; */
margin: 0 auto;
display: flex;
gap: .85rem;
padding: 1rem 0;
/* padding: 0 0.2rem; */
box-sizing: border-box;
}
/* 左侧联系方式 */
.contact-info {
flex: 0 0 35%;
}
.contact-title {
font-size: 0.4rem; /* 大标题 40px */
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.info-list {
list-style: none;
}
.info-item {
display: flex;
align-items: center;
/* gap: 0.15rem; */
margin-bottom: 0.35rem;
font-size: var(--font20); /* 联系方式字号 24px */
color: #333;
line-height: 1.5;
white-space: nowrap;
}
.info-item a{
color: #333;
}
.info-item:last-child {
margin-bottom: 0;
}
/* 图标：纯背景SVG实现 */
.info-icon {
width: 0.4rem;
/* height: 0.32rem; */
flex-shrink: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.info-icon a{
color: #333;
}
.icon-phone {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-email {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-address {
background-image: url('data:image/svg+xml;utf8,');
}
/* 右侧表单区域 */
.contact-form-wrap {
flex: 1;
}
/* 覆盖 Layui 默认样式，适配 rem 与设计风格 */
.layui-form-item {
margin-bottom: 0.25rem;
display: flex;
gap: .1rem;
}
.layui-form-item .layui-inline{
flex: 1;
margin-bottom: 0;
}
.layui-inline input{box-sizing: border-box; padding-left: .3rem;}
.layui-select-title input{box-sizing: border-box; padding-left: .3rem;}
.captcha-item input{box-sizing: border-box; padding-left: .3rem;}
.layui-form-select{width: 100%}
.layui-anim-upbit{height: 6rem}
.layui-input, .layui-select, .layui-textarea {
/* height: 0.48rem; */
/* line-height: 0.48rem; */
font-size: var(--font16); /* 表单字号 16px */
background: #fafafa;
border: 1px solid #f0f0f0;
border-radius: 0.02rem;
padding: 0 0.15rem;
}
.layui-textarea {
min-height: 1.5rem;
line-height: 1.6;
padding: 0.12rem 0.15rem;
resize: none;
}
.layui-form-select dl dd, .layui-form-select dl dt {
font-size: var(--font16);
}
.layui-form-required:before {
color: #f00;
margin-right: 0.04rem;
}
/* 必填字段红色星号标记 */
.required-star {
position: absolute;
left: 0.08rem;
top: 50%;
transform: translateY(-50%);
color: #E72211;
font-size: 0.2rem;
font-weight: bold;
z-index: 1;
pointer-events: none;
line-height: 1;
}
/* 验证码行 */
.captcha-item {
display: flex;
gap: 0.15rem;
align-items: center;
}
.captcha-input {
flex: 1;
}
.captcha-img {
width: 1.2rem;
height: 0.48rem;
flex-shrink: 0;
cursor: pointer;
overflow: hidden;
border-radius: 0.02rem;
}
.captcha-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 提交按钮 */
.submit-btn {
width: 1.5rem;
/* height: 0.56rem; */
background: #222;
color: #fff;
font-size: var(--font16);
border-radius: 0.04rem;
border: none;
cursor: pointer;
transition: opacity 0.3s ease;
padding: 0;
}
.submit-btn:hover {
opacity: 0.85;
background: #222;
}
/* ---------- 响应式全端适配 ---------- */
@media screen and (max-width: 1400px) {
.contact-container {
width: 95%;
max-width: 16rem;
}
}
@media screen and (max-width: 992px) {
.section-contact {
height: auto;
padding: 0.6rem 0;
}
.contact-container {
flex-direction: column;
gap: 0.6rem;
}
.contact-info {
flex: none;
width: 100%;
}
}
@media screen and (max-width: 768px) {
.contact-title {
font-size: 0.32rem;
}
.info-item {
/* font-size: 0.18rem; */
}
.contact-container{
padding: 1rem 0;
}
.layui-inline {
width: 100%;
margin-bottom: 0.2rem;
}
.layui-inline:last-child {
margin-bottom: 0;
}
}
@media screen and (max-width: 480px) {
}
.map-link{
/* margin-bottom: 1rem; */
}
.map-link .container{
/*width: 14rem;*/
margin: 0 auto;
}
.map-link img{
width: 100%;
height: auto;
background-size: cover;
}
/*产品详情*/
/* 整体容器 */
.section-product {
width: 100%;
padding: 0.3rem 0;
background: #f8f8f8;
}
.section-product .container {
/* max-width: 16rem;
margin: 0 auto; */
display: flex;
gap: 0.3rem;
/*padding: 0 0.2rem;*/
}
/* ========== 左侧侧边栏 ========== */
.product-sidebar {
flex: 0 0 2.8rem;
/*background: #fff;*/
padding: 0.2rem;
height: fit-content;
}
/* 搜索框 */
.search-box {
position: relative;
margin-bottom: 0.3rem;
}
.search-input {
width: 100%;
height: 0.4rem;
border: 0.01rem solid #e5e5e5;
padding: 0 0.4rem 0 0.15rem;
font-size: 0.14rem;
outline: none;
transition: border-color 0.3s;
}
.search-input:focus {
border-color: #013A95;
}
.search-icon {
position: absolute;
right: 0.12rem;
top: 50%;
transform: translateY(-50%);
width: 0.3rem;
height: 0.3rem;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* 分类标题 */
.category-title {
font-size: 0.32rem;
font-weight: bold;
color: #333;
margin-bottom: 0.15rem;
padding-bottom: 0.1rem;
border-bottom: 0.01rem solid #e5e5e5;
}
/* 分类父项 */
.category-item {
padding: 0 !important;
border-bottom: 0.01rem solid #eee;
}
.category-header {
/* height: 0.48rem; */
display: flex;
align-items: center;
justify-content: space-between;
padding: .15rem 0.15rem;
font-size: var(--font20);
font-weight: bold;
color: #333;
cursor: pointer;
transition: all 0.3s;
}
.category-header:hover {
color: #013A95;
/*background: #f5f8ff;*/
}
/* 折叠箭头 */
.category-arrow {
/* width: 0.12rem;
height: 0.12rem; */
/*border-right: 0.01rem solid #999;*/
/*border-bottom: 0.01rem solid #999;*/
/*transform: rotate(45deg);*/
transition: all 0.3s;
}
/* 子分类列表 */
.category-children {
display: none;
/* background: #fafafa; */
padding: 0.08rem 0;
}
.category-active .category-children {
display: block;
}
.child-item {
padding: 0.15rem 0.3rem;
/* font-size: var(--font14) !important; */
color: #666;
cursor: pointer;
transition: all 0.3s;
}
.child-item:hover {
color: #013A95;
}
.child-active {
background: #013A95;
color: #fff;
}
.child-active a{
color: #fff;
}
.child-active:hover {
color: #fff;
}
/* ========== 右侧主内容 ========== */
.product-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
/* 面包屑 */
.breadcrumb {
height: 0.4rem;
display: flex;
align-items: center;
gap: 0.1rem;
font-size: var(--font14);
color: #666;
/*background: #fff;*/
padding: 0 0.2rem;
}
.breadcrumb-home {
width: 0.16rem;
height: 0.16rem;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.breadcrumb-sep {
color: #999;
}
.breadcrumb-current {
color: #013A95;
}
/* 产品信息区 */
.product-info {
/*background: #fff;*/
/* padding: 0.3rem; */
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.product-img-box {
width: 4.8rem;
height: 4.13rem;
border: 0.01rem solid #B7B7B7;
display: flex;
align-items: center;
justify-content: center;
}
.product-img {
width: 80%;
height: 80%;
}
.product-img img{
max-width: 100%;
max-height: 100%;
}
.product-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.product-name {
font-size: var(--font38);
font-weight: 600;
color: #333;
}
.product-desc {
font-size: var(--font18);
color: #666;
line-height: 1.8;
margin: 0.44rem 0 .34rem 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.product-contact {
display: flex;
flex-direction: column;
gap: 0.12rem;
/* font-size: 0.14rem; */
color: #666;
}
.product-contact p {
display: flex;
align-items: center;
gap: 0.3rem;
}
.contact-icon {
width: 0.18rem;
/* height: 0.18rem; */
flex-shrink: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-right: .1rem;
}
.icon-phone {
background-image: url('data:image/svg+xml;utf8,');
}
.icon-email {
background-image: url('data:image/svg+xml;utf8,');
}
/* 立即咨询按钮 */
.consult-btn {
width: 100%;
height: 0.44rem;
background: #013A95;
color: #fff;
border: none;
font-size: 0.14rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.08rem;
transition: opacity 0.3s;
border-radius: 0.07rem;
}
.consult-btn:hover {
opacity: 0.9;
}
.consult-icon {
width: 0.16rem;
height: 0.16rem;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* 详情标签栏 */
.detail-tab {
height: 0.48rem;
background: #f2f2f2;
display: flex;
align-items: center;
gap: 0.12rem;
/*padding: 0 0.2rem;*/
}
.tab-line {
width: 0.06rem;
height: 100%;
background: #013A95;
}
.tab-text {
font-size:var(--font38);
font-weight: 600;
color: #333;
}
/* 详情内容区 */
.detail-content {
background: #fff;
min-height: 8.83rem;
font-size: .22rem;
padding: 0.6rem 0.3rem;
display: flex;
flex-direction: column;
gap: .15rem;
/* align-items: center;
justify-content: center; */
}
.detail-content img{
width: 100%;
}
.detail-placeholder {
font-size: 0.36rem;
color: #333;
font-weight: 500;
}
/* ========== 响应式适配 ========== */
/*案例详情*/
/* 外层整体背景 #f9f9f9 */
.example-prod-detail-section {
width: 100%;
min-height: 8rem;
background-color: #f9f9f9;
padding: 0.3rem 0 0.6rem;
padding-top: 1.5rem;
}
/* 面包屑 */
.example-prod-breadcrumb {
font-size: var(--font16);
color: #666;
margin-bottom: 0.3rem;
}
.example-prod-breadcrumb a {
color: #666;
text-decoration: none;
}
.example-prod-breadcrumb .example-sep {
margin: 0 0.08rem;
color: #999;
}
.example-prod-breadcrumb .example-cur {
color: #013A95;
}
/* 左右布局 */
.example-prod-layout {
display: flex;
gap: 0.3rem;
align-items: flex-start;
}
/* 左侧主列 */
.example-main-col {
flex: 2;
min-width: 0;
}
/* 白色内容盒子 */
.example-detail-card {
width: 100%;
background-color: #fff;
border-radius: 0.2rem;
padding: 0.35rem;
border: 1px solid #f0f0f0;
}
.example-card-header {
padding-bottom: 0.2rem;
border-bottom: 1px solid #e5e5e5;
margin-bottom: 0.35rem;
}
.example-card-title {
font-size: var(--font32);
font-weight: 600;
color: #333;
}
.example-card-body {
/* min-height: 10.39rem; */
padding: .1rem;
box-sizing: border-box;
font-size: 0.22rem;
color: #333;
/*background: #fafafa;*/
/*border: 1px dashed #eee;*/
}
.example-card-body img{
width: 100%;
}
/* 分页行：在白色盒子外 */
.example-pagination-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.25rem;
}
/* 分页按钮默认样式：灰色箭头，hover变蓝 */
.example-page-btn {
display: inline-flex;
align-items: center;
gap: 0.08rem;
height: 0.4rem;
padding: 0 0.18rem;
/*background: #fff;*/
/*border: 1px solid #dcdcdc;*/
color: #666;
font-size: var(--font16);
cursor: pointer;
transition: all 0.25s ease;
}
.example-page-btn a{
display: flex;
align-items: center;
gap: .1rem;
}
/* 箭头图标：默认灰色 */
.example-arrow-icon {
width: 0.5rem;
height: 0.5rem;
background-color: #D8D8D8;
color: #fff;
transition: all 0.25s ease;
display: flex;
justify-content: center;
align-items: center;
font-size: .26rem;
}
.example-prev-btn .example-arrow-icon {
/*transform: rotate(-135deg);*/
}
.example-next-btn .example-arrow-icon {
/*transform: rotate(45deg);*/
}
/* hover 状态：箭头与边框同步变蓝 */
.example-page-btn:hover .example-arrow-icon {
background: #013A95;
}
.example-page-btn:hover .example-arrow-icon {
border-color: #fff;
}
/* 右侧边列 */
.example-side-col {
flex: 1;
flex-shrink: 0;
}
/* 右侧白色推荐卡片 */
.example-recommend-card {
/* width: 4rem; */
background-color: #fff;
border-radius: 0.3rem;
padding: 0.25rem;
border: 1px solid #f0f0f0;
}
.example-recom-title {
font-size: 0.25rem;
font-weight: 600;
color: #333;
margin-bottom: 0.2rem;
padding-bottom: 0.08rem;
/* border-bottom: 1px solid #f0f0f0; */
}
.example-recom-list {
list-style: none;
}
.example-recom-item {
display: flex;
gap: 0.12rem;
padding: 0.12rem 0;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background 0.2s ease;
align-items: center;
}
.example-recom-item:last-child {
border-bottom: none;
}
.example-recom-item:hover {
background: #f9f9f9;
}
/* 推荐图固定 173px * 128px */
.example-recom-img {
width: 1.73rem;
height: 1.28rem;
flex-shrink: 0;
overflow: hidden;
background: #f5f5f5;
border: 1px solid #eee;
}
.example-recom-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.example-recom-text {
flex: 1;
font-size: var(--font16);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ---------- 响应式适配 ---------- */
@media screen and (max-width: 992px) {
.example-prod-layout {
flex-direction: column;
}
.example-side-col {
width: 100%;
}
.example-recom-list {
display: flex;
flex-wrap: wrap;
gap: 0.15rem;
}
.example-recom-item {
flex: 0 0 calc(50% - 0.075rem);
flex-direction: column;
align-items: flex-start;
}
.example-recom-img {
width: 100%;
height: 1.28rem;
}
.example-main-col,.example-recommend-card{width: 100%;}
}
@media screen and (max-width: 768px) {
.example-card-body {
min-height: 2.5rem;
font-size: var(--font22);
}
.example-recom-item {
flex: 0 0 100%;
flex-direction: row;
align-items: center;
}
.example-recom-img {
width: 1.73rem;
height: 1.28rem;
}
}
/* 模块外层容器 */
.news-container {
/* padding:0 0 .6rem 0; */
margin-bottom: 1rem;
background: #ffffff;
}
/* 顶部分类tab */
.nwsnav-tabwrap {
display: flex;
justify-content: center;
margin-bottom: .4rem;
}
.nwsnav-tabitem {
min-width: 1.8rem;
padding: .12rem .3rem;
text-align: center;
font-size: var(--font18);
color: #333333;
background: #ffffff;
border: 1px solid #e5e5e5;
cursor: pointer;
transition: all .3s ease;
}
.nwsnav-tabitem:first-child {
border-radius: 4px 0 0 4px;
}
.nwsnav-tabitem:last-child {
border-radius: 0 4px 4px 0;
}
.nwsnav-tabitem + .nwsnav-tabitem {
border-left: none;
}
/* tab选中态 */
.nwsnav-tabitem.nwsnav-cur {
background: #013A95;
color: #ffffff;
border-color: #013A95;
}
.nwsnav-tabitem:hover{
background: #013A95;
color: #ffffff;
border-color: #013A95;
}
/* 新闻卡片网格 */
.nwsgrid-mainbox {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .3rem;
}
/* 单个新闻卡片 */
.nwsgrid-cardcell {
display: block;
text-decoration: none;
background: #ffffff;
border: 1px solid #f0f0f0;
transition: all .3s ease;
overflow: hidden;
}
/* 鼠标移入蓝色交互 */
.nwsgrid-cardcell:hover {
/* border-color: #013A95; */
/* transform: translateY(-3px); */
/* box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1); */
}
/* 卡片图片区 */
.nwsgrid-thumbbox {
width: 100%;
overflow: hidden;
}
.nwsgrid-thumbbox img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease;
}
.nwsgrid-cardcell:hover .nwsgrid-thumbbox img {
transform: scale(1.05);
}
/* 卡片内容区 */
.nwsgrid-content {
padding: .2rem;
}
.nwsgrid-titletext {
margin: 0 0 .12rem 0;
font-size: var(--font22);
font-weight: 600;
color: #222222;
line-height: 1.4;
transition: color .3s ease;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 标题hover变蓝 */
.nwsgrid-cardcell:hover .nwsgrid-titletext {
color: #013A95;
}
.nwsgrid-desctext {
margin: 0 0 .15rem 0;
font-size: var(--font14);
color: #666666;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.nwsgrid-morelink {
font-size:var(--font13);
color: #999999;
transition: color .3s ease;
}
/* 更多文字hover变蓝 */
.nwsgrid-cardcell:hover .nwsgrid-morelink {
/* color: #013A95; */
}
/* 底部分页 */
.nwspage-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: .08rem;
margin-top: .5rem;
}
.nwspage-item {
min-width: .32rem;
height: .32rem;
padding: 0 .1rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: .14rem;
color: #666666;
border: 1px solid #e5e5e5;
text-decoration: none;
border-radius: 2px;
transition: all .3s ease;
}
.nwspage-item:hover {
color: #165DFF;
border-color: #165DFF;
}
.nwspage-item.nwspage-active {
background: #165DFF;
color: #ffffff;
border-color: #165DFF;
}
/* 平板端适配 */
@media screen and (max-width: 768px) {
.nwsgrid-mainbox {
grid-template-columns: repeat(2, 1fr);
gap: .2rem;
}
.nwsgrid-thumbbox {
}
}
/* 全手机端适配 */
@media screen and (max-width: 480px) {
.news-container {
padding: .4rem 0;
}
.nwsnav-tabwrap {
width: 100%;
}
.nwsgrid-mainbox {
grid-template-columns: 1fr;
gap: .25rem;
}
.nwsgrid-thumbbox {
}
.nwspage-item {
min-width: .36rem;
height: .36rem;
font-size: .14rem;
}
}