body {padding-top: 80px}
a:hover {
text-decoration: none !important;
}
/********************************* 首页 **********************************/
.wrap {margin-bottom: 50px;}
/**nybanner**/
.ny-banner{width:100%; position:relative; height:390px; min-height:390px; z-index:98}
@media (max-width:1380px) {
.ny-banner{height:350px; min-height:350px;}
.wrap {margin-bottom: 40px;}
}
@media (max-width:1024px) {
.ny-banner{height:300px; min-height:300px;}
.wrap {margin-bottom: 35px;}
}
@media (max-width:920px) {
.ny-banner{height:200px; min-height:200px;}
.wrap {margin-bottom: 35px;}
}
@media (max-width:540px) {
.ny-banner{height:150px; min-height:150px;}
.wrap {margin-bottom: 30px;}
}
@media (max-width:420px) {
.ny-banner{height:100px; min-height:100px;}
.wrap {margin-bottom: 30px;}
}
/**内页**/
.ny_title{height:70px; line-height:70px; float:right; margin-right:10%}
.ny_title p{float:right; color:#999; font-size:14px}
.ny_title i{font-size:18px; padding-right:5px; color:#bbb}
.ny_title span{color:#333}
.ny_title a{color:#999}
.ny_box{width:100%; overflow:hidden; padding:120px 0;}
.ny_left{width:14%; float:left}
.ny_right{width:84%; overflow:hidden; float:right}
@media (max-width:1780px) {
.ny_title{margin-right:8%}
}
@media (max-width:1440px) {
.ny_title{margin-right:7%}
}
@media (max-width:1380px) {
.ny_title{margin-right:3%}
.ny_box{padding:100px 0;}
.ny_left{width:14%;}
.ny_right{width:85%;}
}
@media (max-width:1280px) {
.ny_box{padding:80px 0;}
}
@media (max-width:1024px) {
.ny_box{padding:60px 0;}
}
@media (max-width:920px) {
.ny_title{display:none}
}
@media (max-width:780px) {
.ny_box{padding:50px 0;}
}
@media (max-width:540px) {
.ny_box{padding:40px 0;}
.ny_left{width:100%;}
.ny_right{width:100%;}
}
@media (max-width:420px) {
.ny_box{padding:30px 0;}
}
/**内页导航**/
.left_menu{background:#fff; width:92%; float:right; margin-top:-35px; border-bottom:1px solid #eee; position:relative; z-index:99}
.left_menu .categoryDiv{width:60%; float:left}
.left_menu .categoryDiv .hd{ display:none}
.left_menu .categoryDiv .bd{ text-align:center; height:70px; overflow:hidden}
.left_menu .categoryDiv .bd ul{}
.left_menu .categoryDiv .bd li{width:20%; height:70px; line-height:70px; position:relative; text-align:center; cursor:pointer; float:left; border-right:1px solid #eee}
.left_menu .categoryDiv .bd li:after {content:""; position:absolute; left:0; right:0; bottom:-70px; width:100%; height:70px; background:#2563eb; transition:all 0.2s ease-out; z-index:9}
.left_menu .categoryDiv .bd li.active:after{bottom:0px;}
.left_menu .categoryDiv .bd li:hover:after{bottom:-65px;}
.left_menu .categoryDiv .bd li a{display:block; color:#444; font-size:16px; height:70px; line-height:70px; position:absolute; z-index:10; text-align:center; width:100%}
.left_menu .categoryDiv .bd li.active{border-right:1px solid #2563eb}
.left_menu .categoryDiv .bd li.active a{color:#fff;}
.left_menu .categoryDiv .bd li:hover a{color:#2563eb;}
.left_menu .categoryDiv .bd li.active:hover:after{bottom:0px;}
.left_menu .categoryDiv .bd li.active:hover a{color:#fff;}
.left_menu .categoryDiv .pro li:nth-child(1){display:block}
.left_menu .categoryDiv .pro li{display:none}
.left_menu .categoryDiv.case{width:75%;}
.left_menu .categoryDiv.case .bd li{width:12.5%;}
.pro_menu{width:100%}
.pro_menu .categoryDiv .hd{background:#222; height:60px; line-height:60px; color:#fff; font-size:16px; padding-left:20px;}
.pro_menu .categoryDiv .bd{border:1px solid #eee;}
.pro_menu .categoryDiv .bd li{width:100%; height:60px; line-height:60px; position:relative; cursor:pointer; border-bottom:1px solid #eee; padding-left:20px; }
.pro_menu .categoryDiv .bd li:last-child{border-bottom:none;}
.pro_menu .categoryDiv .bd li a{display:block; color:#666; font-size:15px}
.pro_menu .categoryDiv .bd li:hover a{color:#2d5d5d;}
.pro_menu .categoryDiv .bd li.active{background:#f5f5f5}
.pro_menu .categoryDiv .bd li.active a{color:#222;}
.pro_menu .categoryDiv .bd li:hover{background:#f5f5f5}
@media (max-width:1780px) {
.left_menu{width:94%;}
}
@media (max-width:1440px) {
.left_menu{width:96%;}
}
@media (max-width:1380px) {
.left_menu{width:97%;}
}
@media (max-width:1180px) {
.left_menu .categoryDiv .bd li a{ font-size:14px}
}
@media (max-width:1024px) {
.pro_menu .categoryDiv .hd{height:50px; line-height:50px; font-size:16px; padding-left:15px;}
.pro_menu .categoryDiv .bd li{padding-left:15px; height:45px; line-height:45px;}
.pro_menu .categoryDiv .bd li a{font-size:14px;}
}
@media (max-width:920px) {
.pro_menu .categoryDiv .hd{font-size:16px; height:40px; line-height:40px; padding-left:15px}
.pro_menu .categoryDiv .bd li{height:40px; line-height:40px; padding-left:15px}
.pro_menu .categoryDiv .bd li a{font-size:14px}
.left_menu .categoryDiv.case{ width:100%;}
.left_menu .categoryDiv{width:100%;}
}
@media (max-width:540px) {
.left_menu{width:100%; margin:0 auto; border-bottom:none; float:none}
.left_menu .categoryDiv{width:100%;}
.left_menu .categoryDiv .pro li:nth-child(1){display:none}
.left_menu .categoryDiv .pro li{display:block}
.pro_menu{display:none}
.twoMenuDiv{position:relative}
.twoMenuDiv .categoryDiv .hd{ display:block; text-align:center; font-size:18px; color:#fff; height:50px; line-height:50px; background:#2d5d5d; padding-left:0}
.twoMenuDiv .categoryDiv .hd i{font-family: "iconfont" !important;font-size:15px; font-style: normal; margin-left:10px}
.twoMenuDiv .categoryDiv .bd {width:100%; height:auto; display:none; position:absolute}
.twoMenuDiv .categoryDiv .bd ul{width:100%; overflow:hidden; border-top:none; border-bottom:none;}
.twoMenuDiv .categoryDiv .bd ul li{width:100%; height:50px; line-height:50px; float:left; background:#f5f5f5; text-align:center; padding-left:0;}
.twoMenuDiv .categoryDiv .bd ul li a {height:50px; line-height:50px; font-size:16px; width:100%; border-bottom:1px solid #eee; position: relative; color:#666;}
.twoMenuDiv .categoryDiv .bd li:after{display:none}
.twoMenuDiv .categoryDiv .bd li.active a,.twoMenuDiv .categoryDiv .bd li:hover a{color:#2d5d5d;}
.twoMenuDiv .categoryDiv .bd li.active{border-right:none}
.left_menu .categoryDiv.case .bd li{width:100%; height:50px; line-height:50px;}
}
/*banner轮播*/
.banner-wrap {
width: 100%;
overflow: hidden;
}
.banner-swiper {
width: 100%;
height: 520px;
position: relative;
}
.banner-list {
width: 100%;
height: 100%;
}
.banner-item {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* banner 图片：改用 ![]()
承载，利于 SEO/懒加载/LCP，object-fit 等价于原 background cover */
.banner-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
display: block;
}
/* Ken Burns：当前 slide 背景缓慢推近提升质感；非激活态自然静止，纯CSS不依赖JS */
@keyframes bannerKenBurns {
from { transform: scale(1); }
to { transform: scale(1.08); }
}
.swiper-slide-active .banner-img {
animation: bannerKenBurns 6s ease-out both;
will-change: transform;
}
/* 文字入场：标题/副标题/按钮依次淡入上浮；keyframe+both 保证默认态可见，Swiper未初始化也不会隐藏内容 */
@keyframes bannerTextUp {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
.swiper-slide-active .banner-text-box h2 {
animation: bannerTextUp .7s cubic-bezier(.22, 1, .36, 1) .1s both;
}
.swiper-slide-active .banner-text-box p {
animation: bannerTextUp .7s cubic-bezier(.22, 1, .36, 1) .25s both;
}
.swiper-slide-active .banner-text-box .tel-btn {
animation: bannerTextUp .7s cubic-bezier(.22, 1, .36, 1) .4s both;
}
/* 文字样式 纯白标题清晰可见 */
.banner-text-box {
width: 55%;
position: absolute;
left: 8%;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
.banner-text-box h2 {
font-size: 32px;
margin: 0 0 16px;
line-height: 1.4;
font-weight: 600;
color: #ffffff; /* 纯白标题，解决看不清 */
}
.banner-text-box p {
font-size: 16px;
line-height: 1.8;
margin: 0 0 24px;
color: #E0E7FF;
}
.tel-btn {
display: inline-block;
padding: 12px 32px;
background: #2563eb;
color: #fff;
border-radius: 6px;
font-size: 16px;
text-decoration: none;
}
@media (max-width:767px){
.banner-text-box p{
display: none !important;
}
}
/* ========== 箭头核心修复样式 ========== */
.swiper-button-prev,
.swiper-button-next {
width: 48px !important;
height: 48px !important;
border-radius: 50%;
background: rgba(0,0,0,0.45) !important;
color: #fff !important;
font-size: 24px !important;
display: flex !important;
align-items: center;
justify-content: center;
z-index: 9999 !important; /* 拉满层级，不会被遮挡 */
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background: #2563eb !important;
}
/* 清除swiper默认箭头图标 */
.swiper-button-prev::after,
.swiper-button-next::after {
display: none !important;
}
/* 箭头内联SVG：去除inline基线间隙、固定尺寸；pointer-events:none 让点击落到按钮本身 */
.swiper-button-prev svg,
.swiper-button-next svg {
display: block;
width: 22px;
height: 22px;
pointer-events: none;
}
/* 分页圆点 */
.banner-dot {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
}
.banner-dot span {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.4);
margin: 0 6px;
}
.banner-dot span.swiper-pagination-bullet-active {
background: #fff;
}
/* 移动端适配 */
@media screen and (max-width:768px) {
.banner-swiper { height: 400px; }
.banner-text-box { width: 85%; left: 5%; }
.banner-text-box h2 { font-size: 22px; }
.swiper-button-prev,
.swiper-button-next {
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
}
}
/* 全局容器统一宽度，和网站其他板块对齐 */
.index-container{
/*width: 1200px;*/
margin: 0 auto;
padding: 0 15px;
position: relative;
z-index: 2;
}
.about-section {
padding: 80px 0;
position: relative;
overflow: hidden;
background-color: #ffffff;
}
/* 关于我们：左文 + 右数据面板，flex 两栏垂直居中 */
.about-section .containe {
display: flex;
align-items: center;
gap: 5%;
}
.about-left-box {
flex: 1 1 55%;
min-width: 0;
display: flex;
flex-direction: column;
}
.about-right-box {
flex: 0 0 40%;
min-width: 0;
}
/* 品牌蓝数据信任面板 */
.about-panel {
position: relative;
border-radius: 18px;
overflow: hidden;
color: #fff;
background: linear-gradient(150deg, #2563eb 0%, #1e40af 55%, #172554 100%);
box-shadow: 0 20px 50px rgba(37, 99, 235, 0.28);
}
.about-panel::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
.panel-hero {
position: relative;
padding: 38px 32px 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.hero-num {
font-size: 64px;
font-weight: 700;
line-height: 1;
letter-spacing: -1px;
}
.hero-num i {
font-size: 22px;
font-style: normal;
font-weight: 600;
margin-left: 6px;
opacity: 0.9;
}
.hero-label {
margin-top: 10px;
font-size: 15px;
color: rgba(255, 255, 255, 0.85);
}
.hero-range {
display: inline-block;
margin-top: 16px;
padding: 6px 16px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
font-size: 13px;
letter-spacing: 2px;
}
.panel-stats {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.panel-stats .stat {
padding: 22px 28px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.panel-stats .stat:nth-child(even) {
border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.panel-stats .stat:nth-child(-n+2) {
border-top: none;
}
.panel-stats .stat b {
display: block;
font-size: 30px;
font-weight: 700;
line-height: 1.1;
}
.panel-stats .stat span {
display: block;
margin-top: 4px;
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
}
.panel-stats .stat em {
display: block;
margin-top: 6px;
font-size: 12px;
font-style: normal;
line-height: 1.5;
color: rgba(255, 255, 255, 0.55);
}
.panel-foot {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(0, 0, 0, 0.10);
font-size: 13px;
color: rgba(255, 255, 255, 0.85);
}
.panel-foot .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #7dd3fc;
flex: 0 0 auto;
}
.panel-foot .line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(125, 211, 252, 0.6), rgba(255, 255, 255, 0.15));
}
.about-left-box h1 {
font-size: 20px;
color: #333;
font-weight: 500;
line-height: 1.7;
margin: 0 0 26px;
position: relative;
}
.about-section .title {
order: -1;
font-size: 32px;
color: #111;
margin: 0 0 30px;
font-weight: 600;
position: relative;
}
.about-section .title::after {
content: "";
width: 60px;
height: 3px;
background: #2563eb;
position: absolute;
left: 0;
bottom: -12px;
}
.about-text {
font-size: 16px;
color: #444;
line-height: 1.8;
margin-bottom: 50px;
}
.about-text p {
margin-bottom: 16px;
text-indent: 2em;
}
.advantage-list {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.advantage-list .item {
width: calc(50% - 10px);
padding: 26px 18px;
border: 1px solid #eee;
border-radius: 10px;
box-sizing: border-box;
transition: all 0.3s ease;
cursor: pointer;
}
.advantage-list .item:hover {
border-color: #2563eb !important;
background-color: #f5f9ff !important;
box-shadow: 0 4px 15px rgba(37, 99, 235, 0.15) !important;
}
.advantage-list .item:hover h3 {
color: #2563eb;
}
.advantage-list .item h3 {
font-size: 20px;
color: #111;
margin: 0 0 12px;
transition: color 0.3s;
}
.advantage-list .item p {
font-size: 15px;
color: #666;
line-height: 1.7;
margin: 0;
}
/* advantage-list item hover悬浮动画 */
/*.advantage-list .item {*/
/* transition: all 0.3s ease;*/
/* transform: translateY(0);*/
/*}*/
.advantage-list .item:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}
@media screen and (max-width: 768px) {
.about-section {
padding: 50px 0;
}
.about-section .containe {
flex-direction: column;
align-items: stretch;
gap: 32px;
}
.about-left-box,
.about-right-box {
flex: 1 1 auto;
width: 100%;
}
.about-section .title {
font-size: 26px;
}
.advantage-list .item {
width: calc(50% - 10px);
}
}
@media screen and (max-width: 480px) {
.about-text p {
text-indent: 0;
}
.advantage-list .item {
width: 100%;
}
}
/* 业务板块全局样式 */
.service-section {
padding: 80px 0;
background-color: #e7e9ed;
}
/* 板块标题区域 */
.section-head {
text-align: center;
margin-bottom: 50px;
}
.service-section .title {
font-size: 32px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
position: relative;
display: inline-block;
}
.service-section .title::after {
content: "";
width: 60px;
height: 3px;
background: #2563eb;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
}
.sub-text {
font-size: 16px;
color: #666;
margin: 0;
}
/* 业务列表布局：Grid 精确分栏，避免 flex+calc 亚像素溢出错误换行 */
.service-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.service-item {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"ico title"
"desc desc";
column-gap: 16px;
row-gap: 16px;
align-items: center;
padding: 30px 28px;
background: #fff;
border: 1px solid rgba(17, 34, 68, 0.05);
border-radius: 14px;
box-sizing: border-box;
box-shadow: 0 6px 18px rgba(17, 34, 68, 0.05);
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
}
.service-item:hover {
background-color: #f8fbff !important;
border-color: rgba(37, 99, 235, 0.35) !important;
box-shadow: 0 16px 36px rgba(37, 99, 235, 0.16) !important;
transform: translateY(-6px);
}
/* 服务图标徽标：位于标题左侧 */
.svc-ico {
grid-area: ico;
width: 56px;
height: 56px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
background: #eaf1ff;
color: #2563eb;
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-ico svg {
display: block;
}
.service-item:hover .svc-ico {
background: #2563eb;
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 18px rgba(37, 99, 235, 0.3);
}
.service-item h3 {
grid-area: title;
font-size: 20px;
color: #111;
margin: 0;
font-weight: 600;
line-height: 1.4;
transition: color 0.3s;
}
.service-item:hover h3 {
color: #2563eb;
}
.service-item p {
grid-area: desc;
font-size: 15px;
color: #555;
line-height: 1.75;
margin: 0;
}
/* 响应式适配 */
@media screen and (max-width: 992px) {
.service-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media screen and (max-width: 768px) {
.service-section {
padding: 50px 0;
}
.service-section .title {
font-size: 26px;
}
.service-item {
padding: 24px 20px;
column-gap: 14px;
row-gap: 14px;
}
.svc-ico {
width: 48px;
height: 48px;
border-radius: 13px;
}
.svc-ico svg {
width: 24px;
height: 24px;
}
.service-item h3 {
font-size: 18px;
}
}
@media screen and (max-width: 480px) {
.service-list {
grid-template-columns: 1fr;
}
}
/* 自研成品系统板块 */
.product-section {
padding: 80px 0;
background: #ffffff;
}
.section-head {
text-align: center;
margin-bottom: 50px;
}
.product-section .title {
font-size: 32px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
position: relative;
display: inline-block;
}
.product-section .title::after {
content: "";
width: 60px;
height: 3px;
background: #2563eb;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
}
.sub-text {
font-size: 16px;
color: #666;
margin: 0;
}
.product-list {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.product-item {
width: calc(33.333% - 16px);
padding: 35px 25px;
border: 1px solid #eee;
border-radius: 12px;
box-sizing: border-box;
transition: all 0.3s ease;
cursor: pointer;
}
/* 悬浮交互效果 */
.product-item:hover {
border-color: #2563eb !important;
background-color: #f5f9ff !important;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12) !important;
transform: translateY(-5px);
}
.product-item h3 {
font-size: 20px;
color: #111;
margin: 0 0 15px;
transition: color 0.3s;
}
.product-item:hover h3 {
color: #2563eb;
}
.product-item p {
font-size: 15px;
color: #555;
line-height: 1.7;
margin: 0;
}
/* 查看更多按钮样式 */
.product-more {
text-align: center;
}
.more-btn {
display: inline-block;
padding: 14px 36px;
border: 1px solid #2563eb;
color: #2563eb;
border-radius: 8px;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
}
.more-btn:hover {
background-color: #2563eb;
color: #fff;
}
/* 响应式适配 */
@media screen and (max-width: 992px) {
.product-item {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 768px) {
.product-section {
padding: 50px 0;
}
.product-section .title {
font-size: 26px;
}
.product-item {
width: calc(50% - 12px);
padding: 25px 20px;
}
.more-btn {
padding: 12px 28px;
}
}
@media screen and (max-width: 480px) {
.product-item {
width: 100%;
}
}
/* 行业解决方案板块 */
.solution-section {
padding: 80px 0;
background-color: #e7e9ed;
}
.section-head {
text-align: center;
margin-bottom: 50px;
}
.solution-section .title {
font-size: 32px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
position: relative;
display: inline-block;
}
.solution-section .title::after {
content: "";
width: 60px;
height: 3px;
background: #2563eb;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
}
.sub-text {
font-size: 16px;
color: #666;
margin: 0;
}
.solution-list {
display: flex;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 40px;
}
.solution-item {
width: calc(33.333% - 16px);
padding: 35px 25px;
background: #fff;
border-radius: 12px;
box-sizing: border-box;
transition: all 0.3s ease;
cursor: pointer;
}
/* 悬浮交互 */
.solution-item:hover {
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12) !important;
transform: translateY(-5px);
}
.solution-item h3 {
font-size: 20px;
color: #111;
margin: 0 0 15px;
transition: color 0.3s;
}
.solution-item:hover h3 {
color: #2563eb;
}
.solution-item p {
font-size: 15px;
color: #555;
line-height: 1.7;
margin: 0;
}
/* 查看更多按钮 */
.solution-more {
text-align: center;
}
.more-btn {
display: inline-block;
padding: 14px 36px;
border: 1px solid #2563eb;
color: #2563eb;
border-radius: 8px;
font-size: 16px;
text-decoration: none;
transition: all 0.3s ease;
}
.more-btn:hover {
background-color: #2563eb;
color: #ffffff;
}
/* 响应式适配 */
@media screen and (max-width: 992px) {
.solution-item {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 768px) {
.solution-section {
padding: 50px 0;
}
.solution-section .title {
font-size: 26px;
}
.solution-item {
width: calc(50% - 12px);
padding: 25px 20px;
}
.more-btn {
padding: 12px 28px;
}
}
@media screen and (max-width: 480px) {
.solution-item {
width: 100%;
}
}
/* 企业优势板块 */
.advantage-section {
padding: 80px 0;
background: #ffffff;
}
.section-head {
text-align: center;
margin-bottom: 50px;
}
.advantage-section .title {
font-size: 32px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
position: relative;
display: inline-block;
}
.advantage-section .title::after {
content: "";
width: 60px;
height: 3px;
background: #2563eb;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
}
.sub-text {
font-size: 16px;
color: #666;
margin: 0;
}
.advantage-item {
width: calc(33.333% - 16px);
padding: 35px 25px;
border: 1px solid #eee;
border-radius: 12px;
box-sizing: border-box;
transition: all 0.3s ease;
cursor: pointer;
}
.advantage-item:hover {
border-color: #2563eb !important;
background-color: #f5f9ff !important;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12) !important;
transform: translateY(-5px);
}
.advantage-item h3 {
font-size: 20px;
color: #111;
margin: 0 0 15px;
transition: color 0.3s;
}
.advantage-item:hover h3 {
color: #2563eb;
}
.advantage-item p {
font-size: 15px;
color: #555;
line-height: 1.7;
margin: 0;
}
/* 响应式适配 */
@media screen and (max-width: 992px) {
.advantage-item {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 768px) {
.advantage-section {
padding: 50px 0;
}
.advantage-section .title {
font-size: 26px;
}
.advantage-item {
width: calc(50% - 12px);
padding: 25px 20px;
}
}
@media screen and (max-width: 480px) {
.advantage-item {
width: 100%;
}
}
/* 联系我们板块全局样式 */
.contact-section {
padding: 80px 0;
background-color: #e7e9ed;
}
.section-head {
text-align: center;
margin-bottom: 50px;
}
.contact-section .title {
font-size: 32px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
position: relative;
display: inline-block;
}
.contact-section .title::after {
content: "";
width: 60px;
height: 3px;
background: #2563eb;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -12px;
}
.sub-text {
font-size: 16px;
color: #666;
margin: 0;
}
/* 左右布局容器 */
.contact-box {
display: flex;
gap: 40px;
align-items: flex-start;
}
.contact-info {
flex: 1;
}
.info-block {
margin-bottom: 26px;
}
.info-block h4 {
font-size: 18px;
color: #222;
margin: 0 0 8px;
font-weight: 500;
}
.info-block p {
font-size: 16px;
color: #555;
margin: 0;
line-height: 1.75;
}
.info-block a {
color: #2563eb;
font-size: 18px;
font-weight: 500;
text-decoration: none;
}
.call-btn {
display: inline-block;
margin-top: 10px;
padding: 14px 38px;
background-color: #2563eb;
color: #fff;
border-radius: 8px;
text-decoration: none;
font-size: 16px;
transition: all 0.3s ease;
}
.call-btn:hover {
background-color: #1d5fd8;
}
/* 右侧表单卡片样式 */
.contact-card {
flex: 0 0 440px;
background: #fff;
padding: 40px 30px;
border-radius: 16px;
box-shadow: 0 4px 25px rgba(37, 99, 235, 0.08);
}
.contact-card h4 {
font-size: 22px;
color: #111;
margin: 0 0 12px;
}
.contact-card p {
color: #666;
line-height: 1.7;
margin: 0 0 25px;
}
/* 表单输入框样式 */
.form-item {
margin-bottom: 18px;
}
.form-item input,
.form-item textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 14px 16px;
font-size: 15px;
outline: none;
transition: border 0.3s;
}
.form-item input:focus,
.form-item textarea:focus {
border-color: #2563eb;
}
.form-item textarea {
min-height: 110px;
resize: none;
}
.submit-btn {
width: 100%;
padding: 15px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
background-color: #1d5fd8;
}
/* 全局容器适配 */
/* 平板、手机自适应上下排列 */
@media screen and (max-width: 768px) {
.contact-section {
padding: 50px 0;
}
.contact-section .title {
font-size: 26px;
}
.contact-box {
flex-direction: column;
}
.contact-card {
width: 90%;
flex: unset;
}
}
@media screen and (max-width: 480px) {
.contact-card {
padding: 30px 20px;
}
.call-btn {
width: 82%;
text-align: center;
}
}
#header {background-color: #fff;width: 100%;position: fixed;height: 80px;top: 0;left: 0;z-index: 180;box-shadow: 0 0 4px silver}
#navbar .logo {float: left;position: relative;display: inline-block;z-index: 50;padding-top: 10px}
#navbar .logo img{ height:60px; display:block}
#navbar .logo h1 {display: none}
.small_a{float: right;margin-left: 1rem;margin-top: 28px;}
.small_a a{ font-size: 13px;
color: #aaa;
display: inline-block;
line-height: 1;}
.small_a a:hover{color: #0e4081;}
.small_a a.mid{ border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
padding: 0 0.5rem;
margin: 0 0.5rem;}
.tellNum { font-size: 1rem;
letter-spacing: .5px;
font-family: arial;
height: 2rem;
color: #333;
float: right;
margin-top: 22px;
font-weight: bold;}
@media (max-width:768px) {
.tellNum {font-size: 1.13043478rem}
.small_a{display: none;}
}
.tellNum img {vertical-align: bottom;height: 1.6rem}
.tellNum i {font-size: .9rem;vertical-align: top;line-height: 1.7em}
#Nav {display: block;overflow: hidden;font-size: 0;text-align: right}
#Nav li {display: inline-block;position: relative;text-align: right;padding-left:18px;padding-right:18px;}
#Nav li a {display: inline-block;font-size: .9rem;color: #333;position: relative;box-sizing: border-box;line-height: 78px;transition: none;white-space: nowrap;height: 80px}
@media (max-width:768px) {#Nav li a {font-size: .94444444rem}
}
#Nav li a.act,
#Nav li:hover>a {color: #0e4081;border-bottom: 3px solid #0e4081;font-weight: bold;}
.scroll#header {box-shadow: 0 0 12px silver;height: 56px}
.scroll #navbar .logo {padding-top: 6px}
.scroll #navbar .logo img {height: 42px}
.scroll #Nav li a {height: 56px;line-height: 59px}
.scroll .tellNum {margin-top: 14px}
.adminbuy_banner {position: relative}
.adminbuy_banner .banner {width: 100%;height: 100%}
.adminbuy_banner .banner ul.bb {position: relative;margin: 0;padding: 0;width: 100%;height: 100%;z-index: 5}
.adminbuy_banner .banner ul.bb .bb_li {position: absolute;width: 100%;height: 100%;z-index: 5;left: 0;top: 0;display: none}
.adminbuy_banner .banner ul.bb .bb_li>img {width: 100%}
.adminbuy_banner .banner .num {text-align: center;position: absolute;width: 100%;height: .3rem;right: 2px;bottom: 4%;z-index: 100;opacity: .8}
.adminbuy_banner .banner .num li {display: inline-block;background-color: #fff;margin-right: 8px}
.adminbuy_banner .banner .num li a {text-align: center;color: #fff;overflow: hidden;display: inline-block;text-decoration: none;cursor: pointer;width: 40px;height: 4px;text-indent: -100px;opacity: 1}
.adminbuy_banner .banner .num li.num_hover {background-color: #0e4081}
#board {overflow: hidden;background-color: #f7f8fa;border-top: 1px solid #0e4081;line-height: 60px;height: 60px}
#board h3 {font-size: 14px;color: #333;float: left;line-height: 60px;padding: 0 1.5rem;background-image: url(../images/i02.png);background-repeat: no-repeat;background-position: 0 center;background-size: auto}
@media (max-width:640px) {#board h3 {font-size: 13px}
}
#board ul li {display: inline-block;float: left;box-sizing: border-box;border-left: 1px solid #bbb;width: 33%;padding: 0 15px}
#board ul li a {color: #666;font-size: 14px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: block}
@media (max-width:640px) {#board ul li a {font-size: 13px}
}
#board ul li a:hover {color: #0e4081}
#board ul li span {font-size: 12px;margin-right: 20px}
#board ul li:first-child {border: none}
#adminbuy_part4 {box-sizing: border-box;overflow: hidden;display: flex;flex-flow: row wrap;justify-content: space-around;box-shadow: 0 0 27px rgba(0, 0, 0, .13)}
#adminbuy_part4 * {box-sizing: border-box}
#adminbuy_part4 a {display: block}
#adminbuy_part4 .part {width: 25%;float: left;text-align: center;position: relative;background-color: #fff;flex: 1 1 150px}
#adminbuy_part4 .part:first-child {border: none;background-color: #f6f6f6}
#adminbuy_part4 .part:nth-child(3) {background-color: #f7f5f6}
@media (max-width:500px) {#adminbuy_part4 .part {flex-basis: 30%}
}
#adminbuy_part4 h2 {font-size: 1rem;color: #222;display: inline-block;line-height: 1.5em;border-bottom: 1px solid #222;margin-top: 1rem}
#adminbuy_part4 h2 small {display: block;font-size: 14px;color: #666;font-weight: 400;font-family: FontBlar}
@media (max-width:640px) {#adminbuy_part4 h2 small {font-size: 13px}
}
#adminbuy_part4 .imWrap {padding-top: 110%}
#adminbuy_part4 .imWrap img {min-height: initial;max-width: 86%}
#adminbuy_part4 .abs {opacity: 0;filter: alpha(opacity=0);transition: all .6s ease-in-out}
#adminbuy_part4 .abs img {max-height: 15%}
#adminbuy_part4 .part:hover .abs {background-color: rgba(1, 71, 157, .4);opacity: 1;filter: alpha(opacity=100)}
#adminbuy_part4 .con {width: 100%;height: 80%;display: table}
#adminbuy_part4 .cell {display: table-cell;vertical-align: middle}
#adminbuy_part4 h3 {font-size: 1rem;color: #fff;line-height: 2em}
#adminbuy_part4 p {font-size: .8rem;color: #fff;min-height: 50%;line-height: 2em}
@media (max-width:768px) {#adminbuy_part4 p {font-size: .88888889rem}
}
@media (max-width:640px) {#adminbuy_part4 p {font-size: 1rem}
}
#adminbuy_part4 .h50 {height: 50%;background-color: #01479d}
#adminbuy_part4 .h50:first-child {background-color: #22ad38}
@media (max-width:640px) {#adminbuy_part4 .h50 {height: auto;width: 50%;float: left}
#adminbuy_part4 .h50 .inner {width: 90%;padding: 1rem 0}
#adminbuy_part4 .h50 .inner img {width: 23%}
}
#adminbuy_part4 .inner {display: inline-block;vertical-align: middle}
#adminbuy_part4 .inner p {height: auto}
.matter_con .imgcon {position: absolute;width: 100%;height: 100%;left: 0;top: 0;z-index: 0;transform-origin: center bottom;opacity: 0;transform: scaleY(.5);transition: all .7s ease-in-out .2s}
.matter_con::after {display: block;content: " ";height: 100%;width: 19rem;z-index: 0;position: absolute;left: 0;top: 0;background-color: transparent;transition: all 1s ease-in-out .5s}
.swiper-slide-text {float: left;width: 18rem;z-index: 1;position: relative}
.swiper-slide-text .slide-title {font-size: 1.6rem;font-weight: 700;color: #fff;margin-bottom: 1rem;line-height: 1em;transform: translateY(-20px);opacity: 0;filter: alpha(opacity=0);transition: all .7s ease-in-out .1s}
@media (max-width:768px) {.swiper-slide-text .slide-title {font-size: 1.23076923rem}
}
.swiper-slide-text .slide-descrition {margin-bottom: 1em}
.swiper-slide-text .slide-descrition span {display: block;color: #333;padding: .2rem 0;font-size: .8rem}
.radiu-button {display: block;position: relative;overflow: hidden;background-color: #fff;text-align: center;color: #333;z-index: 2;width: 10rem;font: 700 .8rem/3em Arial;border: 1px solid #fff;border-radius: 1.5rem;transform: translateY(20px);opacity: 0;filter: alpha(opacity=0);transition: all 1.2s ease-in-out .3s}
.radiu-button:hover {color: #fff;background-color: #000;border-color: #000}
.radiu-button:hover:after {transform-origin: center bottom;transform: scaleY(1)}
.swiper-pagination-bullet i {text-align: right;display: inline-block;font-size: 12px;position: absolute;z-index: 5;right: 1rem;top: 0;width: 13rem;line-height: 1em}
#adminbuy_part5 .swiper-container {width: 100%;height: 400px;margin: 20px auto}
#adminbuy_part5 .swiper-wrapper {transition-delay: .3s}
#adminbuy_part5 .swiper-pagination-bullets {border-right: 1px solid rgba(186, 186, 186, .3);right: 2rem}
#adminbuy_part5 .swiper-pagination-bullet {position: relative;margin: 18px -7px 18px 0;background-color: transparent;width: 13px;height: 13px}
#adminbuy_part5 .swiper-pagination-bullet:before {content: '';position: absolute;top: 50%;left: 50%;display: block;width: 5px;height: 5px;margin: -2.5px 0 0 -2.5px;background: #bababa;border-radius: 100%;transition: all .5s ease-in-out}
#adminbuy_part5 .swiper-pagination-bullet:after {content: '';position: absolute;display: block;width: 9px;height: 9px;border: 2px solid #666;border-radius: 100%;transform: scale(0);transition: all .5s ease-in-out}
#adminbuy_part5 .swiper-pagination-bullet-active:before {background: #666}
#adminbuy_part5 .swiper-pagination-bullet-active:after {transform: scale(1)}
#adminbuy_part5 .swiper-slide {background-color: #fff;box-sizing: border-box;padding: 2.5vw 4vw}
#adminbuy_part5 .slide-descrition p {transform: translateX(-200px);opacity: 0;transition: all .7s ease-in-out .1s;color: #fff}
#adminbuy_part5 .ani-slide p {transform: translateX(0);opacity: 1}
#adminbuy_part5 .ani-slide .radiu-button,
#adminbuy_part5 .ani-slide .slide-title {opacity: 1;transform: translateY(0)}
#adminbuy_part5 .ani-slide .imgcon {opacity: 1;transform: scaleY(1)}
#adminbuy_part5 .ani-slide::after {background-color: rgba(0, 0, 0, .3)}
#adminbuy_part5 .swiper-button-next,
#adminbuy_part5 .swiper-button-prev {top: 90%;width: 1rem;height: 1rem;transform: rotate(90deg);right: 1rem;background-color: #fff;padding: 10px;border-radius: 70px;background-size: 1rem 1.5rem}
#adminbuy_part5 .swiper-button-prev {left: auto;top: 78%}
.adminbuy_tit {text-align: center;position: relative;margin: 2vw 0;padding-bottom: 15px}
.adminbuy_tit h2 {font-size: 1.8rem;line-height: 2em;color: #252424}
@media (max-width:768px) {.adminbuy_tit h2 {font-size: 1.28571429rem}
}
.adminbuy_tit small {font-size: .8rem;display: block;color: #252424}
@media (max-width:768px) {.adminbuy_tit small {font-size: .88888889rem}
}
@media (max-width:640px) {.adminbuy_tit small {font-size: 1rem}
}
.adminbuy_tit.bg small {color: #fff}
.adminbuy_tit.bg h2 {color: #0e4081}
.adminbuy_tit.bg2 h2 {color: #fff}
.adminbuy_tit.bg2 small {color: #999}
.adminbuy_tit::after {display: block;content: "";height: 4px;width: 61px;z-index: 5;background-color: #0e4081;position: absolute;left: 50%;bottom: 0;margin-left: -30px}
.adminbuy_pro {width: 101%}
.adminbuy_pro li {text-align: center;float: left;width: 24%;margin-right: 1%;margin-bottom: 20px}
.adminbuy_pro li a {display: block}
.adminbuy_pro li .imWrap {margin: 10px 0 18px;box-shadow: 0 0 12px silver}
.adminbuy_pro li h3 {display: block;background-color: #000;color: #fff;font-size: 1rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 2.5em}
.adminbuy_pro li p {display: none;text-align: left;position: absolute;width: 100%;height: 100%;z-index: 5;left: 0;top: 0;color: #fff;box-sizing: border-box;background-color: rgba(0, 0, 0, .5);padding: 25px 15px;line-height: 24px}
.adminbuy_pro li:hover p {display: block}
.inner_tit {text-align: center;position: relative;margin: 3vw 0;padding-bottom: .5rem}
.inner_tit h2 {font-size: 1.5rem;font-weight: 400;line-height: 1.5em;color: #252424}
@media (max-width:768px) {.inner_tit h2 {font-size: 1.2rem}
}
.inner_tit small {font-size: .9rem;display: block;font-family: '宋体';color: #999;line-height: 1.5em}
@media (max-width:768px) {.inner_tit small {font-size: .94444444rem}
}
.inner_tit p {font-size: .9rem;display: block;color: #999;line-height: 1.5em}
@media (max-width:768px) {.inner_tit p {font-size: .94444444rem}
}
.inner_tit.bg p,
.inner_tit.bg small {color: #fff}
.inner_tit.bg h2 {color: #0e4081}
.inner_tit.bg2 h2 {color: #fff}
.inner_tit.bg2 small {color: #999}
.inner_tit::after {background-color: #0e4081;display: block;content: "";height: 4px;width: 61px;z-index: 5;position: absolute;left: 50%;bottom: 0;margin-left: -30px}
.design_range ul {width: 103%;padding: 0 15px;margin-left: -15px}
.design_range li {text-align: left;float: left;width: 30%;margin-right: 3%;margin-bottom: 3%;background-color: #fbfbfb}
.design_range li a {display: block;position: relative}
.design_range li .btn {border-color: #0e4081;color: #0e4081;float: right;width: 100px;margin-top: 8px}
.design_range li .con {padding: .75rem}
.design_range li h3 {display: block;font-size: .9rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #252424;line-height: 1.5em}
@media (max-width:768px) {.design_range li h3 {font-size: .94444444rem}
}
.design_range li p {color: #999;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.design_range li:hover {box-shadow: 0 0 12px silver}
.imgDiv .abs {text-align: center}
.imgDiv .abs::after {display: inline-block;font-size: 0;height: 100%;vertical-align: middle;content: ".";clear: both;width: 0}
.imgDiv .adminbuy_tit {display: inline-block;vertical-align: middle;margin: 0}
.design_advant {overflow: hidden;min-height: 600px;position: relative;background-image: url(../images/10.jpg);background-repeat: no-repeat;background-position: center 0;background-size: 1920px 100%}
.design_advant .bg {width: 100%;float: right;max-width: 960px;background: rgba(255, 255, 255, .75)}
.design_advant .box {width: 100%;float: left;max-width: 700px;padding: 2rem}
.design_advant li {margin-bottom: 1rem}
.design_advant img {float: left;margin-right: 1rem;margin-top: .5rem;width: 3.2rem}
.design_advant h3 {font-size: 1.5rem;color: #000;display: inline-block;line-height: 1.5em;border-bottom: 3px solid #0e4081;margin-bottom: 30px}
@media (max-width:768px) {.design_advant h3 {font-size: 1.2rem}
}
.design_advant h4 {font-size: 1rem;color: #333;font-weight: 400;line-height: 2em}
.design_advant p {color: #666;display: block;line-height: 25px;min-height: 3em}
.design_process {overflow: hidden;text-align: center}
.design_process li {display: table;float: left;width: 20%;height: 10rem;background-image: url(../images/process_03.jpg);background-repeat: no-repeat;background-position: 0 center;background-size: auto auto}
.design_process li:nth-child(2) {background-image: url(../images/process_04.jpg)}
.design_process li:nth-child(3) {background-image: url(../images/process_05.jpg)}
.design_process li:nth-child(4) {background-image: url(../images/process_06.jpg)}
.design_process li:nth-child(5) {background-image: url(../images/process_07.jpg)}
.design_process li:nth-child(6) {background-image: url(../images/process_09.jpg)}
.design_process li:nth-child(7) {background-image: url(../images/process_10.jpg)}
.design_process li:nth-child(8) {background-image: url(../images/process_11.jpg)}
.design_process li:nth-child(9) {background-image: url(../images/process_12.jpg)}
.design_process li:nth-child(10) {background-image: url(../images/process_13.jpg)}
.design_process li img {width: 32.5%}
.design_process li p {font-size: 1.1rem;color: #fff;margin-top: 10px}
@media (max-width:768px) {.design_process li p {font-size: 1.04761905rem}
}
.design_process a {vertical-align: middle;display: table-cell}
.design_combo ul {display: flex;flex-flow: row wrap;justify-content: space-around}
.design_combo li {background-color: #f6f6f6;padding: 1.5rem;box-sizing: border-box;max-width: 320px;flex-basis: 24%}
.design_combo h3 {font-size: 1.3rem;color: #252424;line-height: 1em}
@media (max-width:768px) {.design_combo h3 {font-size: 1.13043478rem}
}
.design_combo h3 small {font-size: 14px;color: #666}
@media (max-width:640px) {.design_combo h3 small {font-size: 13px}
}
.design_combo p {font-size: 14px;color: #666;line-height: 25px;margin-bottom: .5rem}
@media (max-width:640px) {.design_combo p {font-size: 13px}
}
.design_combo .red {color: #0e4081}
.design_combo .more {display: block;width: 100%;text-align: center;color: #fff;line-height: 2rem;background-color: #252424;margin-bottom: 1em}
.design_combo .more.red {background-color: #0e4081;margin-bottom: 0;margin-top: 1em}
.design_combo h4 {font-size: .8rem;color: #333;font-weight: 400;line-height: 2.5em}
@media (max-width:768px) {.design_combo h4 {font-size: .88888889rem}
}
@media (max-width:640px) {.design_combo h4 {font-size: 1rem}
}
.design_relate .swiper-container {padding-bottom: 3rem}
.design_relate .swiper-slide {float: left;overflow: hidden;box-sizing: border-box;padding: 1rem;background-color: #f7f7f7}
.design_relate .swiper-slide .big {float: left;width: 7rem;height: 5rem;margin-right: 1.2rem}
@media (max-width:640px) {.design_relate .swiper-slide .big {float: none;margin-bottom: 1rem}
}
.design_relate .swiper-slide h4 {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px;color: #333;font-weight: 400;line-height: 1em;margin-bottom: 10px}
@media (max-width:640px) {.design_relate .swiper-slide h4 {font-size: 13px}
}
.design_relate .swiper-slide p {font-size: 13px;color: #666;overflow: hidden;line-height: 2em;height: 4em}
.design_relate .swiper-slide .date {font-size: 12px;color: #888;line-height: 1.5em}
.design_relate .swiper-slide.hover {background-color: #f6f7fb}
.design_relate .swiper-slide.hover h4,
.design_relate .swiper-slide.hover p {color: #fff}
.tit_h2 {text-align: center;border-bottom: 1px solid #ddd;height: 20px;overflow: visible;margin: 3vw 0}
.tit_h2 h2 {background-color: #fff;font-size: 1.8rem;color: #333;display: inline-block;font-weight: 400;padding: 0 30px;line-height: 36px}
@media (max-width:768px) {.tit_h2 h2 {font-size: 1.28571429rem}
}
.tit_h3 h3 {font-size: 1.2rem;color: #000;display: inline-block;line-height: 1.5em;border-bottom: 3px solid #0e4081}
@media (max-width:768px) {.tit_h3 h3 {font-size: 1.09090909rem}
}
.about_intro {color: #666;line-height: 25px}
.about_intro .tit_h3 {margin-bottom: 30px}
.about_intro .big {float: right;width: 42%;margin-left: 2%;display: none}
.about_intro p {text-indent: 2em}
@media (max-width:1400px) {.about_intro .wrap {overflow: visible}
}
@media (max-width:640px) {.about_intro .big {width: 100%;margin-bottom: .5rem}
}
.about_culture {overflow: hidden;background-color: #f7f7f7;padding-top: 2vw}
.about_culture .cul_icon {float: left;margin: 0 10%;width: 26%}
.about_culture li {float: left;width: 50%;margin-bottom: 1vw}
.about_culture .num {display: inline-block;background-color: #0e4081;color: #fff;font-family: '宋体';font-size: 1.6rem;font-style: italic;float: left;padding: .4rem .7rem .4rem .3rem;margin-right: .8rem}
@media (max-width:768px) {.about_culture .num {font-size: 1.23076923rem}
}
.about_culture h4 {font-size: 1.2rem;color: #333;font-weight: 400;line-height: 1.8em;padding-bottom: .5rem}
@media (max-width:768px) {.about_culture h4 {font-size: 1.09090909rem}
}
.about_culture p {color: #333;display: block;overflow: hidden;height: 3.8em}
.about_help img.tit {width: 31%;display: block;margin-left: auto;margin-right: auto;min-width: 145px}
.about_help ul {width: 991px;font-size: 0;overflow: visible;margin: 3vw 0 6vw 246px}
.about_help li {display: inline-block;box-sizing: border-box;padding: 30px;width: 141px;height: 141px;background-image: url(../images/i19.png);background-repeat: no-repeat;background-position: center center;background-size: auto auto;margin: 6px;margin-bottom: -56px}
@media (min-width:1200px) {.about_help li:nth-child(7) {margin-left: -70px}
.about_help li:nth-child(13) {margin-right: -20px}
.about_help li:nth-child(20) {margin-left: -70px}
.about_help li:nth-child(26) {margin-right: -20px}
}
.about_help .imgcon {width: 100%;height: 100%}
.market_care ul {padding-bottom: 3vw;background-image: url(../images/i20.png);background-repeat: no-repeat;background-position: center 0;background-size: auto auto}
@media (max-width:960px) {.market_care ul {background: 0 0}
}
.market_care li {float: left;border-bottom: 1px dotted #0e4081;width: 50%;max-width: 377px;padding: 1rem 0;clear: left}
.market_care li:nth-child(even) {float: right;clear: right}
.market_care .num {font-size: .85rem;color: #fff;float: left;background-image: url(../images/i21.png);background-repeat: no-repeat;background-position: 0 center;background-size: 100%;padding: .2rem 1.2rem .2rem .6rem;margin-right: 1rem}
@media (max-width:768px) {.market_care .num {font-size: .94444444rem}
}
@media (max-width:640px) {.market_care .num {font-size: 1.0625rem}
}
.market_care h4 {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: .9rem;color: #0e4081;height: 2rem}
@media (max-width:768px) {.market_care h4 {font-size: .94444444rem}
}
.market_care .con {color: #666;height: 3rem}
.market_do {background-color: #000;overflow: hidden}
.market_do ul {width: 103%}
.market_do li {float: left;width: 31%;margin-right: 2%;margin-bottom: 3.3rem}
.market_do .ico {float: left;width: 4.45rem;height: 4.45rem;margin-right: 1.3rem}
.market_do h3 {font-size: 1rem;position: relative;line-height: 1rem;padding-bottom: .5rem;margin-bottom: .5rem;color: #0e4081}
.market_do h3::after {display: block;background-color: #0e4081;content: " ";height: 4px;width: 2rem;z-index: 5;position: absolute;left: 0;bottom: 0}
.market_do .con {color: #fff;height: 3rem;width: 10rem}
.market_service ul {display: flex;flex-flow: row wrap;justify-content: space-between}
.market_service li {text-align: center;box-sizing: border-box;padding: 1rem;width: 20%;border-radius: 1rem;background-color: #f3f3f3}
.market_service li h4 {font-size: 1.2rem;color: #0e4081;padding-bottom: .3rem;line-height: 2rem}
@media (max-width:768px) {.market_service li h4 {font-size: 1.09090909rem}
}
.market_service li .con {color: #333}
@media (max-width:960px) {.market_service li {width: 24%}
}
@media (max-width:640px) {.market_service li {width: 48%;margin-bottom: 1rem}
}
.market_service .bot {margin-top: 1.5rem}
.market_service .skyimg {float: left;width: 30.7%;margin-right: 1rem}
@media (max-width:960px) {.market_service .skyimg {display: none}
}
.market_service dl {overflow: hidden;text-align: center}
.market_service dd {display: inline-block;background-color: #f3f3f3;width: 56%;margin-bottom: 1rem}
.market_service dd:first-of-type {float: right}
.market_service dd:last-of-type {float: left}
.market_service dd .num {background-color: #0e4081;font-size: 1.8rem;color: #fff;font-family: '宋体';float: left;display: block;width: 5rem;line-height: 5.3rem;margin-right: .6rem}
@media (max-width:768px) {.market_service dd .num {font-size: 1.28571429rem}
}
.market_service dd h4 {font-size: .9rem;color: #0e4081}
@media (max-width:768px) {.market_service dd h4 {font-size: .94444444rem}
}
.market_service dd .wrap {text-align: left;padding: .4rem}
.market_service dd .con {color: #666;height: 3rem;overflow: hidden}
.market_tel {text-align: center;background-image: url(../images/19.jpg);background-repeat: no-repeat;background-position: 0 center;background-size: auto auto;padding: 3vw 0}
.market_tel .con {display: inline-block;background-image: url(../images/i23.png);padding: .8rem 1.5rem;background-repeat: no-repeat;background-position: 0 center;background-size: 100% 100%}
.market_tel h3 {font-size: 1.5rem;color: #fff;letter-spacing: .5rem;line-height: 3rem}
@media (max-width:768px) {.market_tel h3 {font-size: 1.2rem}
}
.market_tel p {font-size: .9rem;color: #fff;font-family: '宋体';letter-spacing: 1px}
@media (max-width:768px) {.market_tel p {font-size: .94444444rem}
}
.market_tel span {font-size: 1.4rem;color: #0e4081;line-height: 2rem}
@media (max-width:768px) {.market_tel span {font-size: 1.16666667rem}
}
.market_support ul {width: 103%}
.market_support li {float: left;width: 22%;margin-right: 3%;margin-bottom: 2%}
.market_support .imWrap {padding-top: 71%}
.market_support .con {text-align: center;position: absolute;width: 100%;height: 100%;z-index: 5;left: 0;top: 0;background-color: rgba(0, 0, 0, .5)}
.market_support .con::after {display: inline-block;font-size: 0;content: ".";clear: both;height: 100%;width: 0;vertical-align: middle}
.market_support .con p {font-size: 1rem;color: #fff;display: inline-block;vertical-align: middle}
.market_case .imWrap {padding-top: 77%}
.market_case .con {overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.case_categories {margin: 3vw 0;border: 1px solid #bbb;border-bottom: none}
.case_categories .row {position: relative;border-bottom: 1px solid #bbb}
.case_categories .row .tit {position: absolute;width: 9rem;height: 100%;z-index: 5;left: 0;top: 0;background-color: #f3f3f3;color: #333;font-size: 15px;text-align: center;line-height: 3rem;border-right: 1px solid #bbb}
@media (max-width:640px) {.case_categories .row .tit {font-size: 1rem}
}
@media (max-width:479px) {.case_categories .row .tit {position: relative;width: 100%;display: block;text-align: left;border-bottom: 1px solid #bbb;padding-left: 1em}
}
.case_categories .row .wrap {padding: .7rem 1rem .7rem 9rem}
@media (max-width:479px) {.case_categories .row .wrap {padding: .7rem 1rem .7rem 0}
}
.case_categories .row a {color: #333;font-size: 14px;display: inline-block;margin-left: 1rem}
@media (max-width:640px) {.case_categories .row a {font-size: 13px}
}
.case_categories .row a.act {color: #0e4081}
.more_add {text-align: center;width: 80%;margin: 2vw auto;padding: 1.3rem 0;background: #f4f4f4}
.more_add a {display: inline-block;border: 1px solid #cacaca;font-size: 14px;color: #777;line-height: 2rem;width: 9rem}
@media (max-width:640px) {.more_add a {font-size: 13px}
}
.gf7 {background: #f7f7f7;margin-bottom: -3vw;overflow: hidden;}
.gf7::after {display: block;position: relative;clear: both;content: " ";height: 1px;width: 100%;z-index: 5}
.Rside {float: right;position: relative;width: 340px;margin-left: 2rem}
.Rside .rtop {display: block;margin-bottom: 1.5rem;max-width: 100%}
.Rside h2 {font-size: .8rem;text-align: left;position: relative;box-sizing: border-box;font-weight: 400;color: #252424;text-indent: 2em;line-height: 3rem;
background-color: #fff;}
.Rside h2::before{display:inline-block;content: " ";height:90% ;width: 3px ;background-color:#0e4081;z-index: 5 ;position: absolute;top: 0;left:0;}
.Rside h2 .change-tag-btn {float: right;margin-right: 20px;color: #e70012;}
@media (max-width:768px) {.Rside h2 {font-size: .88888889rem}
}
@media (max-width:640px) {.Rside h2 {font-size: 1rem}
}
.Rside h2+ul {box-sizing: border-box;background-color: #fff;padding: 0 1rem;}
.Rside h2+ul li {overflow: hidden;display: block;border-top: 1px dashed #dfdfdf}
.Rside h2+ul li:first-child {border-top: 1px solid #ddd;}
.fix {width: 100%;transition: all .5s ease-in-out}
.iauth a {padding-left:1rem;line-height: 3.3em;color: #333;position: relative;display: block;font-size: 15px;
}
.iauth a::after{
display: block;
position: absolute;right: 0;top: 5px;color: #333;font-size: 16px;
content: "→";z-index: 5 ;}
.iauth a.act,
.iauth a:hover {color: #0e4081}
.news_pre {margin-bottom: 1.5rem;}
.news_pre li {padding: 0.5rem 0;}
.news_pre .imgcon {float: left;margin-right: .8rem;width: 100px;height: 75px}
.news_pre .imgcon img {min-height: 100%}
.news_pre h4 {font-size: 14px;color: #333;font-weight: 400;overflow: hidden;height: 3em;line-height: 1.5em;margin-bottom: .5em}
@media (max-width:640px) {.news_pre h4 {font-size: 13px}
}
.news_pre h4:hover {color: #0e4081}
.news_pre .date {font-size: 12px;color: #666}
.likeme {text-align: center;box-sizing: border-box;background-color: #fff;border: 1px solid #dfdfdf;margin-bottom: 1.5rem;padding-top: .7rem;display: none}
.likeme .hate,
.likeme .like {border: none;display: inline-block;width: 4.7rem;height: 2.3rem;background-image: url(../images/i29.png);background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;margin: .5rem}
.likeme .hate {background-image: url(../images/i30.png)}
.rcase_top {box-sizing: border-box;background-color: #fff;border: 1px solid #dfdfdf;margin-bottom: 1.5rem;padding: 0 1rem .5rem 1rem;transition: all .3s ease-out .1s;z-index: 20;right: 0;display: none;}
.rcase_top h3 {text-align: center;font-size: 2rem;font-weight: 700;border-bottom: 1px solid #dfdfdf;color: #29313e;line-height: 2.5em}
@media (max-width:768px) {.rcase_top h3 {font-size: 1.33333333rem}
}
.rcase_top p {display: block;border-bottom: 1px solid #dfdfdf;line-height: 1.5em;padding: .5rem 0}
.rcase_top ul {display: flex;flex-flow: row wrap;justify-content: space-around;margin: 1rem 0 .5rem}
.rcase_top li {flex-basis: 33%;text-align: center}
.rcase_top li img {max-width: 100%;display: inline-block}
.rcase_top .a4 {display: block;text-align: center}
.rcase_top .a4 img {display: inline-block}
.gdimg{margin-bottom: 1.5rem;}
.inner_learn {width: 102%}
.inner_learn li {float: left;width: 31%;margin-right: 2%;margin-bottom: 1rem;background: #eee}
.inner_learn li a {display: block;position: relative}
.inner_learn li .imWrap {padding-top: 74.6%}
.inner_learn li .con {padding: 0 .7rem}
.inner_learn li h3 {text-align: center;display: block;font-size: .8rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #000;border-bottom: 1px solid #bbb;line-height: 2.5em;margin-bottom: .5rem}
@media (max-width:768px) {.inner_learn li h3 {font-size: .88888889rem}
}
@media (max-width:640px) {.inner_learn li h3 {font-size: 1rem}
}
.inner_learn li h3:hover {color: #0e4081}
.inner_learn li p {color: #666;line-height: 1.8em;font-size: 13px;height: 3.5em;overflow: hidden}
.inner_learn li .date {font-size: 13px;color: #666;background-image: url(../images/i25.png);background-repeat: no-repeat;background-position: right center;background-size: auto auto; padding:5px 0 10px}
.inner_learn li:hover .abs {display: block}
.inner_learn li:hover .con {border-color: #0e4081}
@media (max-width:640px) {.inner_learn li {width: 48%}
}
.fenye {border: 1px solid #cacaca;background: #f3f3f3;color: #666;padding: 0 1em;margin: 3vw 0 5vw}
.inner_news li {overflow: hidden;margin-bottom: 1rem}
.inner_news li a {display: block;position: relative}
.inner_news li .imgcon {float: left;overflow: hidden;width: 208px;height: 150px;margin-right: 1.2rem}
.inner_news li .imgcon img {min-height: 100%}
.inner_news li .con {overflow: hidden;padding: 0 .7rem}
.inner_news li h3 {display: inline-block;font-size: .85rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width: 100%;border-bottom: 1px solid #ccc;line-height: 2.5em;margin-bottom: 2px;color: #000;padding-right: 2rem}
@media (max-width:768px) {.inner_news li h3 {font-size: .94444444rem}
}
@media (max-width:640px) {.inner_news li h3 {font-size: 1.0625rem}
}
.inner_news li h3:hover {color: #0e4081}
.inner_news li p {display: block;color: #999;line-height: 1.9em;font-size: 14px;height: 3.5em;overflow: hidden}
@media (max-width:640px) {.inner_news li p {font-size: 13px}
}
.inner_news li .date {font-size: 1rem;color: #666}
.inner_news li:hover .abs {display: block}
.inner_news li:hover .con {border-color: #0e4081}
.newscon {background-color: #fff;box-sizing: border-box;padding: 1.5rem;margin-bottom: 4vw}
#icon1 {display: inline-block;vertical-align: top}
.guide {background: #f7f7f7;color: #999;padding: .5rem .8rem;font-size: 14px;margin: -.5em 0 1rem}
@media (max-width:640px) {.guide {font-size: 13px}
}
.red {color: #0e4081}
.guide_bot {background: #f7f7f7;color: #999;padding: .5rem;font-size: 14px;margin-top: 1.5rem;line-height: 1.6em}
@media (max-width:640px) {.guide_bot {font-size: 13px}
}
.skip {margin-top: 2rem;border-bottom: 1px dashed #ddd;}
.skip a { color: #333;
display: block;
line-height: 1.8em;
text-overflow: ellipsis;
overflow: hidden;}
.maylike {border: 1px dashed #ddd;padding: .7rem 1rem 1rem;margin-top: 1.5rem}
.maylike li {float: left;box-sizing: border-box;border-bottom: 1px dashed #ddd;width: 43%;margin-right: 7%;padding-left: 20px;background-image: url(../images/i26.png);background-repeat: no-repeat;background-position: 0 center;background-size: auto auto;line-height: 3.2;}
.maylike li a {color: #555;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis}
.maylike h3 {display: inline-block;border-bottom: 4px dotted #333;font-size: .95rem;color: #555;margin-bottom: .5rem}
.commentArea {width: 100%;max-width: 979px;margin-top: 1.5rem}
.commentArea h2 {font-size: .8rem;color: #e50012}
@media (max-width:768px) {.commentArea h2 {font-size: .88888889rem}
}
@media (max-width:640px) {.commentArea h2 {font-size: 1rem}
}
.commentArea img {display: block;max-width: 100%}
.commentArea textarea {display: block;border: none;box-sizing: border-box;width: 100%;border-left: 1px solid #4e9eee;border-right: 1px solid #4e9eee;padding: 0 .5rem}
.commentArea input[type=submit] {border: none;float: right;width: 6.4rem;height: 1.7rem;background-image: url(../images/i27.png);background-color: transparent;color: transparent;background-repeat: no-repeat;background-position: 0 0;background-size: 100%}
.commentArea .guide_bot {text-align: center}
.commentArea .txtBot {margin-bottom: .5rem}
.inner_tit_h1 {display: inline-block;font-weight: 400;border-bottom: 3px solid #dd1b1b;font-size: .8rem;margin-bottom: .5rem;color: #e32235}
@media (max-width:768px) {.inner_tit_h1 {font-size: .88888889rem}
}
@media (max-width:640px) {.inner_tit_h1 {font-size: 1rem}
}
.case_pre_tit {border-bottom: 1px solid #bfbfbf;position: relative;color: #333;padding: 0 1em;margin: 3vw 0 1rem;font-size: 1rem;font-weight: bold;line-height: 3;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.case_pre_tit::before{display: block;content: " ";height: 60%;width: 3px;background-color: #0e4081;z-index: 5;position: absolute;left: 0;top: 10px}
.case_pre #demoo .container a {width: 250px}
.case_pre .imWrap {box-sizing: border-box;padding-top: 72%;border: 1px solid #ccc}
.case_pre .con {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #fff !important;background-color: #333}
.contact_top {border-bottom: 1px solid #bbb;padding: 2vw 0;margin-bottom: 2vw}
.contact_top h1 {font-size: 1.5rem;color: #333;text-align: center}
@media (max-width:768px) {.contact_top h1 {font-size: 1.2rem}
}
.contact_3s {padding: 0 15px;margin-left: -15px;display: flex;padding: 15px;margin: 2vw auto;flex-flow: row nowrap;justify-content: space-between}
.contact_3s dd {box-sizing: border-box;position: relative;width: 30%;text-align: center;display: block;flex: 1 1 30%;max-width: 410px;padding: 4vw 0 3vw;margin: 5px;background-color: #f7f7f7;transform: translateY(-50px);opacity: 0;transition: all 1.2s ease-out .1s}
.contact_3s dd img {display: inline-block}
.contact_3s dd h3 {font-size: .9rem;color: #0e4081;font-weight: 700;line-height: 1em;padding: 15px 0}
@media (max-width:768px) {.contact_3s dd h3 {font-size: .94444444rem}
}
.contact_3s dd p {max-width: 85%;margin-left: auto;margin-right: auto;font-size: .8rem;color: #333;line-height: 26px}
@media (max-width:768px) {.contact_3s dd p {font-size: .88888889rem}
}
@media (max-width:640px) {.contact_3s dd p {font-size: 1rem}
}
@media (max-width:650px) {.contact_3s {flex-wrap: wrap}
.contact_3s dd {flex-basis: 200px;max-width: 100%}
}
.contact_3s.active dd {opacity: 1;transform: translateY(0)}
.articleTit {font-size: 1.3rem}
@media (max-width:768px) {.articleTit {font-size: 1.13043478rem}
}
.paths {overflow: hidden}
.paths .w50 {float: left;text-align: right;width: 48%;margin-right: 2%}
.paths .w50 img {max-width: 47vw}
@media (max-width:767px) {.paths .w50 {float: none;text-align: center}
.paths .w50 img {max-width: 95vw}
}
.paths img.tit {width: 13.25rem}
.paths dl {box-sizing: border-box;border: 1px solid #d0d0d0;background-color: #f7f7f7;padding: 1rem;width: 29rem;max-width: 47vw}
@media (max-width:767px) {.paths dl {max-width: 100%;width: 100%}
}
.paths dt {font-size: .9rem;color: #0e4081;padding-left: 1.8rem;line-height: 2.5em;margin-top: .3rem;background-image: url(../images/i37.png);background-repeat: no-repeat;background-position: 0 center;background-size: 1.3rem auto}
@media (max-width:768px) {.paths dt {font-size: .94444444rem}
}
.paths dd {padding-left: 1.8rem;font-size: 14px;color: #666}
@media (max-width:640px) {.paths dd {font-size: 13px}
}
.paths dd span {font-size: .8rem;color: #333}
@media (max-width:768px) {.paths dd span {font-size: .88888889rem}
}
@media (max-width:640px) {.paths dd span {font-size: 1rem}
}
#toolbar {display: none;width: 100%;height: 55px;background: #fff;position: fixed;z-index: 10000;bottom: 0;left: 0;border-top: 1px solid #E5E9F2;}
@media (max-width:767px) {#toolbar {display: block}
}
#toolbar ul li {float: left;width:25%;text-align: center;position: relative}
#toolbar ul li a {width: 100%;color: #1b2c42; line-height: 23px;padding-top: 7px;position: relative;}
#toolbar ul li a span {font-size: 13px;display: block;}
#nav {position: relative}
/*#toolbar ul li:nth-child(2)::after,
#toolbar ul li:nth-child(2)::before {display: block;content: " ";height: 15px;width: 1px;background-color: #a0a0a0;z-index: 5;position: absolute;left: 0;top: 16px}*/
#toolbar ul li:nth-child(2)::after {left: initial;right: 0}
#toolbar ul li ul li {width: 100%;border-bottom: 1px solid #fff}
#toolbar ul li ul li a {width: 100%;padding: 0;height: 28px;line-height: 28px}
#toolbar ul li:hover a{color: #d40314;}
#toolbar ul li:hover a::after{
content: '';
height: 2px;
border-radius: 0 0 10px 10px;
display: block;
background: #d40314;
position: absolute;
left: 0;
top: 0;
right: 0;
}
.adminbuy_cn img{ max-width:100% !important; height:auto !important;display:inline-block;}
.adminbuy_cn p{text-wrap: inherit !important; line-height:30px}
.adminbuy_cn p span{text-wrap: inherit !important;}
body.sidebarActive {
overflow: hidden; }
.sidebarWrapper {
width: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 11000;
overflow: auto;
display: none;
background: rgba(0, 0, 0, 0.5); }
.sidebarWrapper .overlay {
position: fixed;
left: 250px;
right: 0;
top: 0;
bottom: 0; }
.sidebar {
background: #fff;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.15);
width: 250px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
z-index: 3;
overflow: auto;font-size: 16px;
left: -90%;
transition: 0.2s all; }
.sidebar .profilebox {
padding: 20px; }
.sidebar .profilebox .avatar {
max-width: 126px;
max-height: 48px;
margin-bottom: 12px; }
.sidebar .profilebox .title {
font-size: 16px;
font-weight: 700;
letter-spacing: 0;
color: #1B2C42;
margin: 0 0 6px 0; }
.sidebar .profilebox .lead {
font-size: 14px;
color: #8D95A0;
font-weight: 400;
margin: 0; }
.sidebar .profilebox .button {
position: absolute;
right: 15px;
top: 20px;
font-size: 20px; }
.sidebar .profilebox .button a {
display: inline-block;
padding: 4px 5px;
margin-left: 5px;
color: #1B2C42; }
.sidebar .bottomButton {
position: absolute;
left: 0; }
.sidebarMenu {
padding: 0;
margin: 0 0 20px 0; }
.sidebarMenu > li {
display: block; }
.sidebarMenu > li > a {
display: block;
color: #1B2C42;
padding: 12px 40px 12px 20px;
position: relative; }
.sidebarMenu > li > a .badge {
position: absolute;
right: 20px;
top: 15px;
padding: 2px 6px; }
.sidebarMenu > li > a i.icon {
text-align: center;
font-size: 26px;
position: absolute;
left: 20px;
top: 5px; }
.sidebarMenu > li > a .avatar {
width: 26px;
height: 26px;
position: absolute;
left: 20px;
top: 11px;
border-radius: 100px; }
.sidebarMenu > li > a:active {
background: rgba(229, 233, 242, 0.4); }
.sidebarMenu li.title {
padding-left: 20px;
font-size: 14px;
color: #8D95A0;
font-weight: 500;
padding-bottom: 10px; }
.sidebar.is-active {
left: 0; }
#adminbuy_corp {text-align: center}
.adminbuy_corp {display: block;width: 102%}
.adminbuy_corp li{float: left;
text-align: center;
display: inline-block;
box-sizing: border-box;
width: 13.2%;
margin-right: 1%;
border: 1px solid #e6e6e6;
padding: 0 2%;
margin-bottom: 1%;}
.adminbuy_corp li a {display: block}
.adminbuy_corp li .imWrap {padding-top: 61%}
.adminbuy_corp li img {transition: all .5s linear 10ms;transform: rotateY(0)}
.adminbuy_corp li:hover {border-color: #0e4081}
.cont .back{ float: right;
display: inline-block;
background: #000;
color: #fff;
padding: 0 1.2em;
line-height: 2.2;
margin-top: 6px;}
.cont .back .fa{font-size: 12px;
display: inline-block;
vertical-align: middle;
line-height: 10px;
padding-left: 5px;
position: relative;
height: 14px;
overflow: hidden;}
.flow.right_side{position:fixed;width:60px;height:275px;right:0;top:50%;transform: translateY(-50%);z-index:100;z-index: 999;}
.flow ul{overflow: visible;}
.flow ul li{width:60px;height:60px;float:left;position:relative;margin-bottom: 2px;}
.flow ul li .sidebox{position:absolute;border-radius: 5px;width:60px;height:60px;top:0;right:0;transition:all 0.3s;background:rgba(210, 5, 21,0.7);color:#fff;font:15px/60px;overflow:hidden;}
.flow ul li .sidetop,.flow ul li .wx{width:60px;height:60px;border-radius: 5px;display:block;background:rgba(210, 5, 21,0.7);transition:all 0.3s;}
.flow ul li i{display: inline-block;width: 60px;line-height: 60px;color: #fff;font-size: 30px;text-align: center;vertical-align: middle;}
.flow .wx{position: relative;}
.flow .wx .wx_code{position: absolute;width: 120px;height: 120px;background: rgba(210, 5, 21,0.5);padding: 4px;left: -130px;top: 50%;display: none;transform: translateY(-50%);}
.flow .wx .wx_code img{max-width: 100%;}
.flow .wx:hover .wx_code{display: block;}
.flow ul li .sidetop:hover,.flow ul li .sidebox:hover,.flow .wx:hover{background:rgba(210, 5, 21,0.5);}
/* 留言 */
#dialogBg{width:100%;height:100%;background-color:#000000;opacity:.6;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:9999;display:none;}
#dialog{width:700px;display:none;background:url(../images/mess_bg.png)center no-repeat;background-size: 100% 100%;position:fixed;z-index:10000;padding:0 30px 20px 30px;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.dialogTop{letter-spacing:1px;padding:10px 0 0;text-align:right;}
.dialogTop a{color: #fff;font-size: 15px;}
.dialogIco{width:50px;height:50px;position:absolute;top:-25px;left:50%;margin-left:-25px;}
#dialog h4{font-size: 30px;font-weight: bold;text-align: center;padding-bottom: 10px;color: #fff;}
.message2 .txt{display: inline-block;width: 100px;padding-left: 20px;box-sizing: border-box;color: #fff;}
.message2 .txt .red{color: #0e4081;}
.message2 .mod1{width: 100%;}
.message2 .mod1 .ui-input{width: calc(100% - 120px);}
.message2 .mod .field{width: 50%;float: left;}
.message2 .mod .field .ui-input{width: calc(100% - 120px);}
.message2 #verify { height: 35px; box-sizing: border-box;border: 1px solid #ddd;padding-left: 1%;margin-bottom: 20px;}
.message2 #code_img {width: 100px;height: 35px;cursor: pointer;border: 1px solid #e2e2e2;box-sizing: border-box;margin-bottom: 20px;}
.message2 .ui-input {line-height: 35px;padding-left:1%;color: #666;margin-bottom: 20px;margin-right: 2%;box-sizing: border-box;}
.message2 .ui-textarea{margin-bottom: 15px;height: 80px;padding-left: 1%;font-family: "microsoft yahei";width: calc(100% - 120px);padding-top: 5px;color: #666;}
.message2 .ui-btn1 { background:#f8c325;border: none;color: #fff;width: 120px;padding: 10px;margin-right: 30px;}
.message2 .ui-btn2 {background:#bbbbbb;border: none;color: #fff;width: 120px;padding:10px;}
.message2 .code_fr{width: 48%;float: right;}
.message2 .code_fr li{width: 50%;text-align: center;color: #666;margin-top: 20px;float: left;}
.message2 .code_fr li img{max-width: 100%;}
.message2 .txt2{color: #0e4081;padding-top: 10px;}
@media only screen and (max-width: 1000px){
.right_side.flow{display: none;}
}
.adminbuy_img img{ display:block}
.lyonline{
width: 60px;height: 60px;
position: fixed;bottom: 20px;right:28px;z-index: 55;background-color: #0e4081;box-shadow:2px 2px 12px rgba(70,70,70,.5);text-align: center; border-radius: 30px;
}
.lyonline i{color: #fff;
border-radius: 27px;
font-size: 30px;
line-height: 60px;}
.lyonline .icon-guanbidanchuang{display: none;}
.lyonline.act .icon-youjian{display: none;}
.lyonline.act .icon-guanbidanchuang{display: block;}
#lytable{border-radius: 8px;
overflow: hidden;z-index: 1000;
position: fixed;bottom:100px;right: 20px;
width: 350px;border: 1px solid #fff;
background-color: #fff;display: none;
}
#lytable .top1{text-indent: 18px;
height: 60px;
background: #e60517;}
#lytable .top1 i{ font-size: 30px;
color: #fff;
line-height: 60px;}
#lytable .title{ height: 39px;
text-align: center;
color: #fff;
line-height: 23px;
background: #e60517;
font-size: 15px;}
.formFrame {
border: 1px solid #e4e4e4;
border-radius: 3px;
padding: 16px 15px 0; margin: 20px 20px 0;
}
.formFrame input{ box-shadow: none;
height:42px;
border-style: solid; margin-bottom: 11px;
border-color: #d0d0d0;
box-sizing: border-box;
display: inline-block;
padding-left: 11px;
border-width: 2px;
color: #656565;
font-weight: 700;
border-radius: 5px;
width: 100%;}
.formFrame textarea{ box-shadow: none;
border-style: solid; margin-bottom: 11px;
border-color: #d0d0d0;
box-sizing: border-box;
display: inline-block;
padding-left: 11px;
border-width: 2px;
color: #656565;
font-weight: 700;
border-radius: 5px;
width: 100%;}
.formFrame input.tijiao{ background: #e60517;
color: #fff;
border-color: #e60517;
margin: -4px 0 18px;}
.formFrame+.subtxt{display: block;
text-align: center;
line-height: 2.5;
padding-bottom: 8px;}
/* AB模板网新增分页样式 www.admibnuy.cn */
.pagebar { padding:20px; overflow:hidden; clear:both}
.pagebar .pagination {
display: flex;
justify-content: center;
margin-top: 10px;
}
.pagination a {
background: #fff;
border: 1px solid #ccc;
color: #333;
font-size: 12px;
padding: 8px 10px;
margin: 0 2px;
border-radius: 3px; line-height:100%
}
.pagination span {
color: #333;
font-size: 12px;
padding: 7px 2px;
margin: 0 2px;
border-radius: 3px;
}
.pagination a:hover {
color: #333;
border: 1px solid #333;
}
.pagination a.page-num-current {
color: #fff;
background: #333;
border: 1px solid #333;
}
.pagination .st{ font-family:宋体}
.text-secondary{ text-align:center; padding:20px 0}
/* ========== 文章详情页美化样式 ========== */
.article-box {
background: #fff;
border-radius: 8px;
padding: 40px 50px;
margin-bottom: 30px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.article-box .article-title {
font-size: 26px;
font-weight: 600;
color: #1a1a1a;
text-align: center;
line-height: 1.5;
margin: 0 0 25px;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
letter-spacing: 0.5px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.article-box .article-content {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 16px;
line-height: 1.9;
color: #333;
text-align: justify;
letter-spacing: 0.3px;
}
.article-box .article-content p {
margin-bottom: 1.5em;
text-indent: 2em;
}
.article-box .article-content h2 {
font-size: 20px;
font-weight: 600;
color: #1a1a1a;
margin: 2em 0 1em;
padding-left: 15px;
border-left: 4px solid #0e4081;
line-height: 1.4;
letter-spacing: 0.3px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.article-box .article-content h3 {
font-size: 17px;
font-weight: 600;
color: #333;
margin: 1.8em 0 0.8em;
line-height: 1.4;
letter-spacing: 0.2px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.article-box .article-content img {
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.article-box .article-content ul,
.article-box .article-content ol {
margin: 1.5em 0;
padding-left: 2.5em;
}
.article-box .article-content li {
margin-bottom: 0.8em;
line-height: 1.8;
}
.article-box .article-content blockquote {
margin: 1.5em 0;
padding: 15px 20px;
background: #f8f9fa;
border-left: 4px solid #0e4081;
color: #555;
font-style: italic;
}
.article-box .article-content a {
color: #0e4081;
text-decoration: none;
border-bottom: 1px dashed #0e4081;
}
.article-box .article-content a:hover {
color: #d40314;
border-bottom-color: #d40314;
}
.article-box .article-content .table-wrap {
margin: 1.5em 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.article-box .article-content table {
width: 100%;
border-collapse: collapse;
margin: 1.5em 0;
font-size: 15px;
line-height: 1.7;
background: #fff;
border: 1px solid #d9e1ec;
}
.article-box .article-content .table-wrap > table {
margin: 0;
}
.article-box .article-content table th,
.article-box .article-content table td {
border: 1px solid #d9e1ec;
padding: 12px 14px;
text-align: left;
vertical-align: top;
word-break: break-word;
}
.article-box .article-content table thead th {
background: #0e4081;
border-color: #0e4081;
color: #fff;
font-weight: 600;
}
.article-box .article-content table tbody tr:nth-child(even) {
background: #f7f9fc;
}
.article-box .article-content table tbody tr:hover {
background: #eef3fb;
}
.article-box .article-content table td:first-child {
color: #1a1a1a;
font-weight: 600;
}
.article-box .article-tags {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.article-box .article-tags a {
display: inline-block;
padding: 5px 15px;
margin: 0 8px 8px 0;
background: #f5f5f5;
color: #666;
border-radius: 20px;
font-size: 13px;
text-decoration: none;
transition: all 0.3s ease;
}
.article-box .article-tags a:hover {
background: #0e4081;
color: #fff;
}
.article-box .article-nav {
margin-top: 25px;
padding: 20px;
background: #f8f9fa;
border-radius: 6px;
}
.article-box .article-nav p {
margin: 8px 0;
font-size: 14px;
color: #666;
line-height: 1.6;
}
.article-box .article-nav a {
color: #0e4081;
text-decoration: none;
}
.article-box .article-nav a:hover {
color: #d40314;
}
@media (max-width: 768px) {
.article-box {
padding: 20px 16px;
border-radius: 0;
box-shadow: none;
margin-bottom: 0;
}
.article-box .article-title {
font-size: 18px;
margin-bottom: 16px;
padding-bottom: 14px;
line-height: 1.5;
letter-spacing: 0;
}
.article-box .article-content {
font-size: 15px;
line-height: 1.85;
letter-spacing: 0;
}
.article-box .article-content h2 {
font-size: 17px;
margin: 1.5em 0 0.8em;
padding-left: 12px;
}
.article-box .article-content h3 {
font-size: 15px;
margin: 1.3em 0 0.6em;
}
.article-box .article-content img {
margin: 15px auto;
border-radius: 4px;
box-shadow: none;
}
.article-box .article-content p {
margin-bottom: 1.2em;
}
.article-box .article-content ul,
.article-box .article-content ol {
padding-left: 2em;
}
.article-box .article-content blockquote {
padding: 12px 15px;
margin: 1.2em 0;
}
.article-box .article-tags {
margin-top: 20px;
padding-top: 14px;
}
.article-box .article-tags a {
padding: 4px 12px;
font-size: 12px;
margin: 0 6px 6px 0;
}
.article-box .article-nav {
margin-top: 16px;
padding: 14px;
}
.article-box .article-nav p {
font-size: 13px;
line-height: 1.7;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.guide_bot {
font-size: 12px;
padding: 8px 12px;
margin-top: 0;
}
.maylike {
margin-top: 10px;
padding: 10px 14px 14px;
}
.maylike h3 {
font-size: 14px;
}
.maylike li {
line-height: 2.8;
font-size: 14px;
}
.article-box .article-content table {
font-size: 14px;
}
.article-box .article-content table th,
.article-box .article-content table td {
padding: 9px 10px;
}
.article-box .article-content .table-wrap > table.table-wide {
min-width: 600px;
}
}
@media (max-width: 480px) {
.article-box {
padding: 16px 12px;
}
.article-box .article-title {
font-size: 18px;
line-height: 1.45;
margin-bottom: 14px;
padding-bottom: 12px;
}
.article-box .article-content {
font-size: 15px;
line-height: 1.8;
}
.article-box .article-content p {
text-indent: 0;
margin-bottom: 1em;
}
.article-box .article-content h2 {
font-size: 16px;
margin: 1.3em 0 0.6em;
}
.article-box .article-content h3 {
font-size: 15px;
margin: 1.2em 0 0.5em;
}
.article-box .article-content img {
margin: 12px auto;
}
.article-box .article-nav p {
font-size: 12px;
}
.maylike li {
line-height: 2.6;
font-size: 13px;
}
.article-box .article-content table {
font-size: 13px;
}
.article-box .article-content table th,
.article-box .article-content table td {
padding: 8px 9px;
}
}
/* ===== 首页 文章&公告 板块 ===== */
.news-section {
padding: 80px 0;
background-color: #f5f9ff;
}
.news-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 40px;
}
.news-card {
display: flex;
align-items: flex-start;
gap: 16px;
width: calc(33.333% - 16px);
padding: 24px;
box-sizing: border-box;
background-color: #fff;
border: 1px solid #eee;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}
.news-card:hover {
border-color: #2563eb;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.12);
transform: translateY(-5px);
}
.news-date {
flex: 0 0 auto;
width: 62px;
text-align: center;
padding: 8px 0;
border-radius: 8px;
background: linear-gradient(135deg, #2563eb, #4f83f1);
color: #fff;
}
.news-date .d {
display: block;
font-size: 26px;
font-weight: 700;
line-height: 1.1;
}
.news-date .ym {
display: block;
font-size: 12px;
opacity: 0.9;
margin-top: 2px;
}
.news-info {
flex: 1 1 auto;
min-width: 0;
}
.news-title {
font-size: 17px;
color: #111;
line-height: 1.5;
margin: 0 0 8px;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.3s;
}
.news-card:hover .news-title {
color: #2563eb;
}
.news-desc {
font-size: 14px;
color: #777;
line-height: 1.7;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-more {
text-align: center;
}
/* ===== 首页 公网安备 图标 ===== */
.ga-beian {
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: middle;
}
.ga-beian-icon {
flex: 0 0 auto;
}
/* ===== 文章&公告 响应式 ===== */
@media screen and (max-width: 992px) {
.news-card {
width: calc(50% - 12px);
}
}
@media screen and (max-width: 768px) {
.news-section {
padding: 50px 0;
}
.news-list {
gap: 16px;
margin-bottom: 30px;
}
.news-card {
width: 100%;
padding: 18px;
gap: 14px;
}
.news-date {
width: 56px;
padding: 6px 0;
}
.news-date .d {
font-size: 22px;
}
.news-title {
font-size: 16px;
margin-bottom: 6px;
}
.news-desc {
font-size: 13px;
}
}
/* ===== AOS 滚动动画丝滑优化 2026-09-05 ===== */
/* 用真正的 easeOutQuint 曲线替换 AOS 默认（其 ease-out-cubic 实为平庸的 easeOutQuad） */
body[data-aos-easing] [data-aos][data-aos] {
transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}
/* 缩短 fade-up 位移：100px → 36px，避免长距离漂浮感 */
[data-aos][data-aos="fade-up"] {
transform: translate3d(0, 36px, 0);
}
/* 统一时长为 700ms，消除 service-item 800/900/1000 的不一致拖沓 */
[data-aos][data-aos][data-aos-duration] {
transition-duration: .7s;
}
/* 网格卡片逐张错峰入场（步长 70ms），按 section 作用域，避免影响 about 区自带 delay 的 .item */
.service-section .service-list > [data-aos]:nth-child(2),
.product-section .product-list > [data-aos]:nth-child(2),
.solution-section .solution-list > [data-aos]:nth-child(2),
.advantage-section .advantage-list > [data-aos]:nth-child(2),
.news-section .news-list > [data-aos]:nth-child(2) {
transition-delay: .07s;
}
.service-section .service-list > [data-aos]:nth-child(3),
.product-section .product-list > [data-aos]:nth-child(3),
.solution-section .solution-list > [data-aos]:nth-child(3),
.advantage-section .advantage-list > [data-aos]:nth-child(3),
.news-section .news-list > [data-aos]:nth-child(3) {
transition-delay: .14s;
}
.service-section .service-list > [data-aos]:nth-child(4),
.product-section .product-list > [data-aos]:nth-child(4),
.solution-section .solution-list > [data-aos]:nth-child(4),
.advantage-section .advantage-list > [data-aos]:nth-child(4),
.news-section .news-list > [data-aos]:nth-child(4) {
transition-delay: .21s;
}
.service-section .service-list > [data-aos]:nth-child(5),
.product-section .product-list > [data-aos]:nth-child(5),
.solution-section .solution-list > [data-aos]:nth-child(5),
.advantage-section .advantage-list > [data-aos]:nth-child(5),
.news-section .news-list > [data-aos]:nth-child(5) {
transition-delay: .28s;
}
.service-section .service-list > [data-aos]:nth-child(6),
.product-section .product-list > [data-aos]:nth-child(6),
.solution-section .solution-list > [data-aos]:nth-child(6),
.advantage-section .advantage-list > [data-aos]:nth-child(6),
.news-section .news-list > [data-aos]:nth-child(6) {
transition-delay: .35s;
}
.product-section .product-list > [data-aos]:nth-child(7) {
transition-delay: .42s;
}
.product-section .product-list > [data-aos]:nth-child(8) {
transition-delay: .49s;
}
.product-section .product-list > [data-aos]:nth-child(9) {
transition-delay: .56s;
}
/* 悬浮时重置过渡：避免入场错峰 delay 拖慢 hover 反馈，保证悬浮跟手 */
.service-item:hover,
.product-item:hover,
.solution-item:hover,
.advantage-item:hover,
.advantage-list .item:hover,
.news-card:hover {
transition: all .3s ease !important;
}
/* ============ /service/ 开发服务页（kaifa.html） ============ */
.titdiv_01.svc-head {
margin: 4vw 0 2.2vw;
transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1);
}
.titdiv_01.svc-head h3 {
position: relative;
display: inline-block;
padding-bottom: 16px;
color: #111;
}
.titdiv_01.svc-head h3::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 56px;
height: 3px;
border-radius: 2px;
background: #2563eb;
}
.titdiv_01.svc-head .sub {
display: block;
max-width: 860px;
margin: 18px auto 0;
color: #666;
line-height: 1.9;
}
.svc-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.svc-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"ico title"
"ico body";
column-gap: 18px;
row-gap: 10px;
align-items: start;
padding: 28px 26px;
background: #fff;
border: 1px solid rgba(17, 34, 68, .06);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(17, 34, 68, .05);
text-decoration: none;
transition: all .35s cubic-bezier(.22, 1, .36, 1);
}
.svc-card:hover {
transform: translateY(-6px);
border-color: rgba(37, 99, 235, .35);
background: #f8fbff;
box-shadow: 0 18px 40px rgba(37, 99, 235, .16);
}
.svc-card-ico {
grid-area: ico;
width: 56px;
height: 56px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
background: #eaf1ff;
color: #2563eb;
transition: all .35s cubic-bezier(.22, 1, .36, 1);
}
.svc-card:hover .svc-card-ico {
background: #2563eb;
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 8px 18px rgba(37, 99, 235, .3);
}
.svc-card-title {
grid-area: title;
margin: 0;
font-size: 19px;
font-weight: 600;
line-height: 1.4;
color: #111;
transition: color .3s;
}
.svc-card:hover .svc-card-title {
color: #2563eb;
}
.svc-card-body {
grid-area: body;
min-width: 0;
}
.svc-card-body p {
margin: 0 0 14px;
font-size: 14.5px;
line-height: 1.85;
color: #555;
text-align: left;
}
.svc-card-tags {
display: inline-block;
padding: 7px 13px;
font-size: 13px;
line-height: 1.5;
color: #2563eb;
background: #eaf1ff;
border-radius: 8px;
}
@media screen and (max-width: 992px) {
.svc-cards {
grid-template-columns: 1fr;
gap: 18px;
}
}
@media screen and (max-width: 768px) {
.titdiv_01.svc-head {
margin: 6vw 0 4vw;
}
.svc-card {
grid-template-areas:
"ico title"
"body body";
column-gap: 14px;
row-gap: 14px;
align-items: center;
padding: 22px 20px;
border-radius: 14px;
}
.svc-card-ico {
width: 48px;
height: 48px;
border-radius: 13px;
}
.svc-card-ico svg {
width: 24px;
height: 24px;
}
.svc-card-title {
font-size: 17px;
}
.svc-card-body p {
font-size: 14px;
margin-bottom: 12px;
}
}
/* /service/ 文章正文排版（仅 kaifa.html，scoped 到 .svc-article） */
.svc-article .ny_aboutus_wz {
max-width: 1000px;
margin: 0 auto;
}
.svc-article .ny_aboutus_wz img {
float: none;
display: block;
width: 100%;
height: auto;
margin: 24px 0;
border-radius: 12px;
}
.svc-article .ny_aboutus_wz h2 {
margin: 40px 0 18px;
padding-left: 14px;
border-left: 4px solid #2563eb;
font-size: 23px;
font-weight: 700;
line-height: 1.4;
color: #111;
}
.svc-article .ny_aboutus_wz h3 {
margin: 26px 0 12px;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
color: #2563eb;
}
.svc-article .ny_aboutus_wz p {
margin: 0 0 16px;
font-size: 15.5px;
line-height: 1.95;
color: #555;
}
.svc-article .ny_aboutus_wz a:not(.call-btn) {
color: #2563eb;
text-decoration: none;
transition: color .25s;
}
.svc-article .ny_aboutus_wz a:not(.call-btn):hover {
color: #1e40af;
text-decoration: underline;
}
.svc-article .ny_aboutus_wz a.call-btn {
display: block;
width: 100%;
box-sizing: border-box;
text-align: center;
color: #fff;
}
.svc-article .ny_aboutus_wz a.call-btn:hover {
color: #fff;
}
.svc-article .ny_aboutus_wz hr {
border: none;
border-top: 1px solid #eee;
margin: 36px 0;
}
@media screen and (max-width: 768px) {
.svc-article .ny_aboutus_wz h2 {
font-size: 20px;
margin: 30px 0 14px;
}
.svc-article .ny_aboutus_wz h3 {
font-size: 16.5px;
}
.svc-article .ny_aboutus_wz p {
font-size: 14.5px;
line-height: 1.85;
}
.svc-article .ny_aboutus_wz img {
margin: 18px 0;
border-radius: 10px;
}
}
/* ===== FAQ 问答手风琴 ===== */
.faq-list {
list-style: none;
margin: 30px 0 0;
padding: 0;
counter-reset: faq-num;
}
.faq-item {
border: 1px solid #d9e1ec;
border-radius: 10px;
margin-bottom: 14px;
background: #fff;
overflow: hidden;
transition: box-shadow .3s ease, border-color .3s ease;
counter-increment: faq-num;
}
.faq-item:hover {
border-color: #0e4081;
box-shadow: 0 4px 16px rgba(14, 64, 129, .1);
}
.faq-item.active {
border-color: #0e4081;
box-shadow: 0 4px 16px rgba(14, 64, 129, .1);
}
.faq-q {
display: flex;
align-items: center;
padding: 18px 22px;
cursor: pointer;
user-select: none;
gap: 14px;
transition: background .25s ease;
}
.faq-q:hover {
background: #f7f9fc;
}
.faq-item.active .faq-q {
background: #f0f5fb;
}
.faq-icon {
flex: 0 0 30px;
width: 30px;
height: 30px;
border-radius: 50%;
background: #0e4081;
color: #fff;
font-size: 20px;
font-weight: 300;
line-height: 30px;
text-align: center;
transition: transform .3s ease, background .3s ease;
}
.faq-item.active .faq-icon {
transform: rotate(45deg);
background: #d40314;
}
.faq-q-text {
flex: 1;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
line-height: 1.6;
}
.faq-q-text::before {
content: counter(faq-num) ". ";
color: #0e4081;
font-weight: 700;
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
.faq-item.active .faq-a {
max-height: 600px;
}
.faq-a-inner {
padding: 0 22px 20px 66px;
font-size: 15px;
line-height: 1.85;
color: #555;
}
@media screen and (max-width: 768px) {
.faq-list {
margin-top: 20px;
}
.faq-item {
border-radius: 8px;
margin-bottom: 10px;
}
.faq-q {
padding: 14px 16px;
gap: 10px;
}
.faq-icon {
flex: 0 0 26px;
width: 26px;
height: 26px;
font-size: 18px;
line-height: 26px;
}
.faq-q-text {
font-size: 15px;
}
.faq-a-inner {
padding: 0 16px 16px 52px;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.faq-q {
padding: 12px 14px;
gap: 8px;
}
.faq-icon {
flex: 0 0 24px;
width: 24px;
height: 24px;
font-size: 16px;
line-height: 24px;
}
.faq-q-text {
font-size: 14px;
}
.faq-a-inner {
padding: 0 14px 14px 14px;
font-size: 14px;
}
}
/* ===== GEO 优化落地页 ===== */
.geo-page { padding: 0; }
/* the calc(percentage - gap) grid math below assumes padding/border are inside the width */
.geo-page, .geo-page *, .geo-page *::before, .geo-page *::after { box-sizing: border-box; }
.geo-section { padding: 80px 0; }
.geo-section.alt { background: #f7f9fc; }
/* Hero — geometry ported 1:1 from ads.kuaijing.net/changwen shortcodes.css */
.geo-hero {
background: #f8f8fe;
padding: 225px 0 214px;
color: #030014;
position: relative;
overflow: hidden;
}
/* hero keeps the reference's 1320px container: its absolute visual offsets are tuned for a 630px column */
.geo-hero .containe {
max-width: 1320px;
padding: 0;
}
.geo-hero-blur {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 0;
}
.geo-blur-1 {
position: absolute;
bottom: 295px; left: -59px;
width: 160px; height: 29px;
transform: rotate(-20.673deg);
background: #61FF00;
filter: blur(40px);
}
.geo-blur-2 {
position: absolute;
bottom: -69px; left: 668px;
width: 102px; height: 102px;
border-radius: 50%;
background: #00FFF0;
filter: blur(50px);
}
.geo-blur-3 {
position: absolute;
top: -27px; right: 438px;
width: 160px; height: 29px;
transform: rotate(-20.673deg);
background: #FF00E5;
filter: blur(40px);
}
.geo-blur-4 {
position: absolute;
bottom: 191px; right: -189px;
width: 223px; height: 223px;
border-radius: 50%;
background: #ECE30A;
filter: blur(50px);
}
.geo-hero-grid {
display: flex;
align-items: stretch;
position: relative;
z-index: 1;
}
.geo-hero-left {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
box-sizing: border-box;
min-width: 0;
}
.geo-hero-right {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
box-sizing: border-box;
min-width: 0;
position: relative;
}
/* all visual children are absolute, so the box stretches to the left column height */
.geo-hero-visual {
position: absolute;
top: 0; bottom: 0; left: 15px; right: 15px;
}
.geo-hero-title {
font-size: 50px;
font-weight: 700;
line-height: 75px;
letter-spacing: -1.95px;
margin-bottom: 24px;
color: #030014;
}
.geo-hero-title .hl {
color: #0e4081;
font-style: normal;
font-size: 50px;
}
.geo-rotate-wrap {
display: inline-block;
position: relative;
vertical-align: bottom;
overflow: hidden;
}
.geo-rotate-inner {
display: inline-block;
position: relative;
text-align: left;
}
.geo-rotate-item {
display: block;
position: absolute;
top: 0; left: 0;
white-space: nowrap;
opacity: 0;
color: #0e4081;
transform: translateY(100%);
transition: all .5s cubic-bezier(.4,0,.2,1);
}
.geo-rotate-item.is-visible {
position: relative;
opacity: 1;
transform: translateY(0);
}
.geo-rotate-item.is-hidden {
opacity: 0;
transform: translateY(-100%);
}
.geo-hero-steps-inline {
margin-bottom: 39px;
}
.geo-hero-steps-inline p {
font-size: 20px;
line-height: 36px;
color: #444;
margin: 0;
}
.geo-hero-steps-inline .hl {
color: #0e4081;
font-weight: 700;
}
.geo-hero-btns {
display: flex;
gap: 25px;
flex-wrap: wrap;
}
.geo-btn-primary, .geo-btn-dark {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px 30px;
height: 51px;
border-radius: 14px;
font-size: 16px;
font-weight: 700;
line-height: 11px;
color: #fff;
text-decoration: none;
transition: all .3s ease;
box-sizing: border-box;
}
.geo-btn-primary { background: #0e4081; }
.geo-btn-primary:hover {
background: #0a2a5e;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(14,64,129,.3);
}
.geo-btn-dark { background: #030014; }
.geo-btn-dark:hover {
background: #444;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(3,0,20,.25);
}
/* 正文里的联系按钮组（关于我们 / 开发服务及其子栏目共 10 篇）来自 CMS 内容而非模板：
外层是无类名的 ，第二个按钮带 inline
margin-left:12px。那个 margin 只在两个按钮同一行时成立——手机内容区最宽 398px，
而两个按钮加间距要 401px，必然换行，换行后第二行被这 12px 推偏约 9px，看着就是错位。
改成与 .case-cta-btns 同一套写法：行内间距仍是 12px，桌面外观不变；换行后每行各自居中。
全站 11 个居中 div 的直接子元素只有
，没有 img/p/table，转 flex 不会误伤别的内容。
inline 样式优先级最高，margin-left 只能用 !important 压掉。
两种拼写都要匹配：后台重新保存正文或浏览器序列化 style 属性时，
text-align:center 会变成 text-align: center，只写一种会让规则静默失效。 */
.sv-content div[style*="text-align:center"],
.sv-content div[style*="text-align: center"] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.sv-content div[style*="text-align:center"] > .geo-btn-dark,
.sv-content div[style*="text-align: center"] > .geo-btn-dark { margin-left: 0 !important; }
.geo-hero-dashed {
position: absolute;
top: -14px; left: 161px;
width: 436px; height: 489px;
border-radius: 20px;
border: 2px dashed #ddd;
}
.geo-hero-box2 {
position: absolute;
bottom: -33px; right: -79px;
z-index: 5;
box-sizing: border-box;
border-radius: 15px;
border: 1px solid #aebde5;
background: #fff;
box-shadow: 0 10px 50px rgba(52,104,240,.20);
padding: 26px 70px 26px 60px;
animation: geoToRight 7s linear infinite;
}
.geo-box2-label {
display: block;
width: max-content;
color: #000;
font-size: 18px;
font-weight: 500;
line-height: 13px;
letter-spacing: -.54px;
}
.geo-hero-box2 img {
position: absolute;
right: 5px; bottom: -33px;
width: 46px; height: 74px;
}
.geo-ellipse, .geo-ellipse-1, .geo-ellipse-2 {
position: absolute;
border-radius: 50%;
}
.geo-ellipse {
top: 15px; left: 17px;
width: 15px; height: 15px;
background: #FC8800;
}
.geo-ellipse-1 {
bottom: 10px; left: 27px;
width: 25px; height: 25px;
background: #FC8800;
}
.geo-ellipse-2 {
top: 12px; right: 24px;
width: 42px; height: 42px;
box-sizing: border-box;
background: rgba(14,64,129,.2);
border: 6px solid rgba(14,64,129,.2);
}
.geo-wrap-user {
position: absolute;
width: 290px;
box-sizing: border-box;
border: 1px solid #fff;
border-radius: 20px;
background: linear-gradient(180deg, rgba(254,254,254,.60) 0%, rgba(248,248,254,.80) 100%);
box-shadow: 0 10px 60px rgba(0,0,0,.25);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
padding: 26px 37px 29px 38px;
z-index: 3;
}
.geo-wrap-user h4 {
font-size: 20px;
font-weight: 700;
color: #030014;
letter-spacing: -.66px;
margin: 0 0 -3px;
}
.geo-wrap-user p {
color: #444;
font-size: 16px;
font-weight: 400;
line-height: 28px;
margin: 0 0 35px;
}
.geo-wu-img {
position: relative;
}
.geo-wu-img img {
width: 215px;
height: 215px;
max-width: 100%;
}
.geo-wu-1 {
left: 45px; bottom: -86px;
animation: geoToBottom 7s linear infinite;
}
.geo-wu-2 {
left: 230px; bottom: 18px;
animation: geoToTop 7s linear infinite;
}
.geo-wu-3 {
top: -50px; right: -116px;
animation: geoToBottom 7s linear infinite;
}
@keyframes geoToBottom {
0%,100% { transform: translateY(0); }
50% { transform: translateY(15px); }
}
@keyframes geoToTop {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
@keyframes geoToRight {
0%,100% { transform: translateX(0); }
50% { transform: translateX(15px); }
}
/* Section titles */
.geo-sec-title {
text-align: center;
margin-bottom: 50px;
}
.geo-sec-title h2 {
font-size: 32px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
}
.geo-sec-title h2::after {
content: "";
display: block;
width: 60px;
height: 3px;
background: #0e4081;
margin: 14px auto 0;
}
.geo-sec-title p {
font-size: 16px;
color: #666;
margin: 10px 0 0;
}
/* Feature cards */
.geo-features {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-feat-card {
width: calc(25% - 18px);
padding: 35px 24px;
background: #fff;
border-radius: 12px;
text-align: center;
border: 1px solid #e8ecf1;
transition: all .3s;
}
.geo-feat-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(14,64,129,.1);
border-color: #0e4081;
}
.geo-feat-icon {
width: 64px;
height: 64px;
margin: 0 auto 18px;
background: linear-gradient(135deg, #e8f0fe, #d0e2ff);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #0e4081;
}
.geo-feat-card h3 {
font-size: 18px;
color: #111;
margin: 0 0 10px;
font-weight: 600;
}
.geo-feat-card p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
}
/* Agent benefits */
.geo-benefits {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-benefit-card {
width: calc(33.333% - 16px);
padding: 35px 25px;
background: #fff;
border-radius: 12px;
border: 1px solid #e8ecf1;
transition: all .3s;
}
.geo-benefit-card:hover {
border-color: #0e4081;
box-shadow: 0 8px 25px rgba(14,64,129,.08);
transform: translateY(-3px);
}
.geo-benefit-icon {
width: 50px;
height: 50px;
background: #0e4081;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
margin-bottom: 18px;
}
.geo-benefit-card h3 {
font-size: 18px;
color: #111;
margin: 0 0 10px;
font-weight: 600;
}
.geo-benefit-card p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
}
/* Process steps */
.geo-steps {
display: flex;
gap: 20px;
justify-content: center;
position: relative;
}
.geo-step {
flex: 1;
text-align: center;
padding: 30px 20px;
position: relative;
}
.geo-step-num {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #0e4081, #1a5cb0);
color: #fff;
font-size: 24px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
}
.geo-step h3 {
font-size: 18px;
color: #111;
margin: 0 0 10px;
font-weight: 600;
}
.geo-step p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0;
}
/* GEO FAQ */
.geo-faq-list {
max-width: 800px;
margin: 0 auto;
}
.geo-faq-item {
border: 1px solid #e8ecf1;
border-radius: 10px;
margin-bottom: 12px;
background: #fff;
overflow: hidden;
transition: all .3s;
}
.geo-faq-item:hover {
border-color: #0e4081;
box-shadow: 0 4px 15px rgba(14,64,129,.08);
}
.geo-faq-q {
display: flex;
align-items: center;
padding: 18px 22px;
cursor: pointer;
user-select: none;
gap: 14px;
transition: background .25s;
}
.geo-faq-q:hover { background: #f7f9fc; }
.geo-faq-item.active .geo-faq-q { background: #f0f5fb; }
.geo-faq-ico {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: #0e4081;
color: #fff;
font-size: 18px;
font-weight: 300;
line-height: 28px;
text-align: center;
transition: transform .3s, background .3s;
}
.geo-faq-item.active .geo-faq-ico {
transform: rotate(45deg);
background: #d40314;
}
.geo-faq-q span:last-child {
flex: 1;
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
}
.geo-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease;
}
.geo-faq-item.active .geo-faq-a { max-height: 300px; }
.geo-faq-a-inner {
padding: 0 22px 20px 64px;
font-size: 15px;
line-height: 1.8;
color: #555;
}
/* Process flow timeline */
.geo-process {
max-width: 750px;
margin: 0 auto;
}
.geo-proc-step {
display: flex;
align-items: flex-start;
gap: 22px;
padding: 22px 0;
border-bottom: 1px solid #eef1f5;
transition: background .2s;
}
.geo-proc-step:last-child { border-bottom: none; }
.geo-proc-step:hover { background: #f7f9fc; border-radius: 10px; padding-left: 15px; }
.geo-proc-num {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #0e4081, #1a5cb0);
color: #fff;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.geo-proc-body h3 {
font-size: 17px;
color: #111;
margin: 0 0 6px;
font-weight: 600;
}
.geo-proc-body p {
font-size: 14px;
color: #666;
line-height: 1.6;
margin: 0;
}
.geo-proc-body .hl {
color: #0e4081;
font-weight: 600;
}
/* Platform tags */
.geo-plat-group { margin-bottom: 35px; }
.geo-plat-group:last-child { margin-bottom: 0; }
.geo-plat-group h3 {
font-size: 18px;
color: #111;
margin: 0 0 16px;
font-weight: 600;
text-align: center;
}
.geo-plat-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.geo-plat-tag {
padding: 8px 20px;
background: #fff;
border: 1px solid #d9e1ec;
border-radius: 6px;
font-size: 14px;
color: #444;
transition: all .25s;
cursor: default;
}
.geo-plat-tag:hover {
border-color: #0e4081;
color: #0e4081;
background: #f0f5fb;
transform: translateY(-2px);
}
/* Stats bar */
.geo-stats {
display: flex;
justify-content: center;
gap: 50px;
padding: 50px 0;
flex-wrap: wrap;
}
.geo-stat {
text-align: center;
min-width: 120px;
}
.geo-stat .num {
font-size: 40px;
font-weight: 700;
color: #0e4081;
line-height: 1;
}
.geo-stat .num em {
font-style: normal;
font-size: 22px;
}
.geo-stat .label {
font-size: 14px;
color: #666;
margin-top: 8px;
}
/* Feature detail section (AI training / batch creation) */
.geo-detail {
display: flex;
gap: 50px;
align-items: center;
}
.geo-detail.reverse { flex-direction: row-reverse; }
.geo-detail-visual {
flex: 0 0 630px;
/* source artwork is 1440x1060 — matching it keeps object-fit:cover from cropping */
aspect-ratio: 1440 / 1060;
background: linear-gradient(135deg, #e8f0fe, #d0e2ff);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
}
.geo-detail-body { flex: 1; }
.geo-detail-body h3 {
font-size: 26px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
}
.geo-detail-body > p {
font-size: 15px;
color: #666;
line-height: 1.7;
margin: 0 0 20px;
}
.geo-detail-list {
list-style: none;
padding: 0;
margin: 0;
}
.geo-detail-list li {
padding: 8px 0;
font-size: 15px;
color: #444;
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.6;
}
.geo-detail-list .ck {
color: #0e4081;
font-weight: 700;
flex: 0 0 18px;
margin-top: 2px;
}
/* Benefit cards (redesigned) */
.geo-use-cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-use-card {
width: calc(33.333% - 16px);
padding: 35px 25px;
background: #fff;
border-radius: 12px;
border: 1px solid #e8ecf1;
transition: all .3s;
text-align: center;
}
.geo-use-card:hover {
border-color: #0e4081;
box-shadow: 0 8px 25px rgba(14,64,129,.1);
transform: translateY(-4px);
}
.geo-use-ico {
width: 60px;
height: 60px;
margin: 0 auto 18px;
background: linear-gradient(135deg, #0e4081, #1a5cb0);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: #fff;
}
.geo-use-card h3 {
font-size: 18px;
color: #111;
margin: 0 0 10px;
font-weight: 600;
}
.geo-use-card p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
}
/* GEO workflow 6 steps */
.geo-wf-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.geo-wf-card {
width: calc(33.333% - 14px);
padding: 30px 22px;
background: #fff;
border-radius: 12px;
border: 1px solid #e8ecf1;
transition: all .3s;
position: relative;
}
.geo-wf-card:hover {
border-color: #0e4081;
box-shadow: 0 8px 20px rgba(14,64,129,.08);
transform: translateY(-3px);
}
.geo-wf-num {
position: absolute;
top: 14px;
right: 18px;
font-size: 36px;
font-weight: 800;
color: #eef1f5;
line-height: 1;
}
.geo-wf-card h3 {
font-size: 17px;
color: #111;
margin: 0 0 10px;
font-weight: 600;
position: relative;
}
.geo-wf-card p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
position: relative;
}
/* Section h6 heading (reference style) */
.geo-sec-h6 {
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
color: #0e4081;
font-weight: 700;
text-align: center;
margin: 0 0 8px;
}
.geo-sec-sub {
font-size: 22px;
color: #111;
text-align: center;
margin: 0 0 40px;
font-weight: 400;
line-height: 1.5;
}
.geo-section.alt .geo-sec-sub { color: #111; }
/* Feature cards with images (reference style) */
.geo-func-cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-func-card {
width: calc(25% - 18px);
min-width: 240px;
background: #fff;
border-radius: 16px;
border: 1px solid #fff;
overflow: hidden;
transition: all .3s;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
}
.geo-func-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 70px rgba(14,64,129,.15);
}
.geo-func-card a {
text-decoration: none;
color: inherit;
display: block;
position: relative;
}
.geo-func-img {
width: 100%;
height: 200px;
overflow: hidden;
background: #f0f4f8;
}
.geo-func-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
.geo-func-card:hover .geo-func-img img {
transform: scale(1.05);
}
.geo-func-body {
padding: 25px 30px 30px;
}
.geo-func-body h3 {
font-size: 17px;
color: #111;
margin: 0 0 10px;
font-weight: 600;
}
.geo-func-body p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0 0 12px;
}
.geo-func-more {
font-size: 14px;
color: #0e4081;
font-weight: 600;
}
.geo-func-num {
position: absolute;
top: 14px;
right: 16px;
font-size: 36px;
font-weight: 800;
color: rgba(255,255,255,.7);
line-height: 1;
text-shadow: 0 1px 4px rgba(0,0,0,.15);
}
/* 五大核心业务卡片（/service/ 总览页）。横幅素材是 5.29:1 且自带烧录标题，
所以卡头按原始比例整幅铺满（height:auto）不裁切——任何断点都不会切掉标题文字。
5 张卡桌面 3+2 居中；992 档 2+2+末张通栏，避免落单；767 单列。 */
.geo-svc-cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-svc-card {
width: calc(33.333% - 16px);
background: #fff;
border-radius: 16px;
overflow: hidden;
transition: all .3s;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
}
.geo-svc-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 70px rgba(14,64,129,.15);
}
.geo-svc-card > a {
display: block;
position: relative;
text-decoration: none;
color: inherit;
}
.geo-svc-img { background: #0e2a52; }
.geo-svc-img img {
display: block;
width: 100%;
height: auto;
border: 0;
}
.geo-svc-body { padding: 22px 26px 26px; }
.geo-svc-body h3 {
font-size: 17px;
font-weight: 600;
color: #111;
line-height: 1.5;
margin: 0 0 10px;
}
.geo-svc-body p {
font-size: 14px;
color: #666;
line-height: 1.75;
margin: 0 0 10px;
text-align: justify;
}
.geo-svc-body .geo-detail-list { margin: 0 0 14px; }
.geo-svc-body .geo-detail-list li { padding: 5px 0; font-size: 13.5px; }
/* Logo grid (CMS / media / authoritative) */
.geo-logo-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.geo-logo-item {
flex: 0 0 auto;
width: calc(16.6667% - 16.67px);
text-align: center;
text-decoration: none;
color: #444;
transition: all .3s;
padding: 35px 5px 27px;
border-radius: 15px;
border: 1px solid rgba(14,64,129,.15);
background: #eef2fb;
}
.geo-logo-item:hover {
border-color: #0e4081;
background: #e0e8f7;
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(14,64,129,.12);
}
.geo-logo-item img {
width: 56px;
height: 56px;
object-fit: contain;
margin-bottom: 8px;
display: block;
margin-left: auto;
margin-right: auto;
}
.geo-logo-item span {
font-size: 13px;
color: #555;
display: block;
}
/* 权威媒体 section: white cards on the #f7f9fc band */
#admedia .geo-logo-item {
background: #fff;
border-color: rgba(14,64,129,.12);
box-shadow: 0 2px 10px rgba(14,64,129,.06);
}
#admedia .geo-logo-item:hover {
background: #fff;
border-color: #0e4081;
box-shadow: 0 8px 22px rgba(14,64,129,.16);
}
/* Workflow cards (6-step GEO) */
.geo-wf-cards {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-wf-cards .geo-wf-card {
width: calc(33.333% - 16px);
padding: 40px 35px;
background: #fff;
border-radius: 16px;
border: 1px solid #fff;
transition: all .3s;
position: relative;
box-shadow: 0 10px 60px rgba(0,0,0,.08);
}
.geo-wf-cards .geo-wf-card:hover {
box-shadow: 0 15px 70px rgba(14,64,129,.12);
transform: translateY(-4px);
}
.geo-wf-cards .geo-wf-card a {
text-decoration: none;
color: inherit;
}
.geo-wf-cards .geo-wf-num {
position: absolute;
top: 14px;
right: 18px;
font-size: 40px;
font-weight: 800;
color: #eef1f5;
line-height: 1;
}
.geo-wf-cards .geo-wf-card h3 {
font-size: 17px;
color: #111;
margin: 0 0 12px;
font-weight: 600;
position: relative;
padding-right: 40px;
}
.geo-wf-cards .geo-wf-card p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
position: relative;
}
/* Benefit row (3 cards with images) */
.geo-benefit-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
.geo-benefit-item {
width: calc(33.333% - 16px);
background: #f5f6fe;
border-radius: 20px;
border: 1px solid #e5e1f5;
overflow: hidden;
transition: all .3s;
}
.geo-benefit-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(14,64,129,.12);
border-color: #0e4081;
}
.geo-benefit-item a {
text-decoration: none;
color: inherit;
display: block;
}
.geo-benefit-img {
width: 100%;
height: 180px;
overflow: hidden;
background: #f0f4f8;
}
.geo-benefit-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
.geo-benefit-item:hover .geo-benefit-img img {
transform: scale(1.05);
}
.geo-benefit-item h3 {
font-size: 17px;
color: #111;
margin: 0;
padding: 25px 30px 10px;
font-weight: 600;
}
.geo-benefit-item p {
font-size: 14px;
color: #666;
line-height: 1.7;
margin: 0;
padding: 0 30px 25px;
}
/* 正好 4 张卡片的组四张平分一行，不要落成 3+1。
用 :first-child:nth-last-child(4) 数兄弟而不是 :has()，老浏览器也认；
必须套 min-width:993px —— 这个选择器比下面断点里的 .geo-benefit-card 更具体，
不圈起来会把 ≤992 的 2+2 和 ≤768 的单列一起顶掉，而那两档本来就是对的。 */
@media screen and (min-width: 993px) {
.geo-benefit-card:first-child:nth-last-child(4),
.geo-benefit-card:first-child:nth-last-child(4) ~ .geo-benefit-card,
.geo-wf-cards .geo-wf-card:first-child:nth-last-child(4),
.geo-wf-cards .geo-wf-card:first-child:nth-last-child(4) ~ .geo-wf-card {
width: calc(25% - 18px);
}
}
/* ===== Responsive ===== */
/* reference hides the decorative blur layer at <=1440px */
@media screen and (max-width: 1440px) {
.geo-hero-blur { display: none; }
}
/* reference hides the hero visual column at <=1180px */
@media screen and (max-width: 1180px) {
.geo-hero { padding: 125px 0 100px; }
.geo-hero-right { display: none; }
.geo-hero-left { flex: 0 0 100%; max-width: 100%; }
.geo-hero-title { font-size: 42px; line-height: 62px; }
.geo-hero-title .hl { font-size: 42px; }
.geo-hero-steps-inline p { font-size: 18px; line-height: 32px; }
}
@media screen and (max-width: 992px) {
.geo-feat-card { width: calc(50% - 12px); }
.geo-benefit-card { width: calc(50% - 12px); }
.geo-steps { flex-wrap: wrap; }
.geo-step { flex: 0 0 calc(50% - 10px); }
.geo-detail { flex-direction: column !important; }
.geo-detail-visual { flex: unset; width: 100%; max-width: 630px; height: auto; margin: 0 auto; }
.geo-use-card { width: calc(50% - 12px); }
.geo-wf-card { width: calc(50% - 10px); }
.geo-stats { gap: 30px; }
.geo-func-card { width: calc(50% - 12px); min-width: unset; }
.geo-svc-card { width: calc(50% - 12px); }
.geo-svc-card:nth-child(5):last-child { width: 100%; }
.geo-logo-item { width: calc(25% - 15px); padding: 22px 8px 18px; }
.geo-logo-item img { width: 48px; height: 48px; }
.geo-wf-cards .geo-wf-card { width: calc(50% - 12px); }
.geo-benefit-item { width: calc(50% - 12px); }
}
@media screen and (max-width: 768px) {
.geo-hero { padding: 70px 0 60px; }
.geo-hero-title { font-size: 36px; line-height: 52px; letter-spacing: -1px; }
.geo-hero-title .hl { font-size: 36px; }
.geo-hero-steps-inline { margin-bottom: 30px; }
.geo-hero-steps-inline p { font-size: 15px; line-height: 28px; }
.geo-hero-btns { gap: 15px; }
.geo-section { padding: 50px 0; }
.geo-sec-title { margin-bottom: 30px; }
.geo-sec-title h2 { font-size: 24px; }
.geo-feat-card { width: 100%; }
.geo-benefit-card { width: 100%; }
.geo-steps { flex-direction: column; }
.geo-step { flex: unset; }
.geo-faq-q { padding: 14px 16px; }
.geo-faq-a-inner { padding: 0 16px 16px 52px; font-size: 14px; }
.geo-proc-step { gap: 14px; }
.geo-proc-num { flex: 0 0 36px; width: 36px; height: 36px; font-size: 15px; }
.geo-proc-body h3 { font-size: 15px; }
.geo-detail-body h3 { font-size: 22px; }
.geo-detail-visual { font-size: 56px; }
.geo-use-card { width: 100%; }
.geo-wf-card { width: 100%; }
.geo-stats { gap: 20px; padding: 35px 0; }
.geo-stat .num { font-size: 32px; }
.geo-func-card { width: 100%; min-width: unset; }
.geo-svc-card { width: 100%; }
.geo-svc-body { padding: 18px 20px 22px; }
.geo-logo-grid { gap: 12px; }
.geo-logo-item { width: calc(33.3333% - 8px); padding: 16px 6px 14px; }
.geo-logo-item img { width: 40px; height: 40px; }
.geo-logo-item span { font-size: 11px; }
.geo-wf-cards .geo-wf-card { width: 100%; }
.geo-benefit-item { width: 100%; }
}
@media screen and (max-width: 480px) {
.geo-hero { padding: 60px 0 50px; }
.geo-hero-title { font-size: 26px; line-height: 40px; }
.geo-hero-title .hl { font-size: 26px; }
.geo-hero-steps-inline p { font-size: 14px; line-height: 26px; }
.geo-btn-primary, .geo-btn-dark { padding: 14px 24px; font-size: 14px; height: 46px; }
.geo-sec-title h2 { font-size: 22px; }
.geo-plat-tag { padding: 6px 14px; font-size: 13px; }
.geo-logo-grid { gap: 10px; }
.geo-logo-item { width: calc(50% - 5px); padding: 14px 4px 12px; }
.geo-logo-item img { width: 36px; height: 36px; }
}
/* ===== WeChat QR popup (opened by every 咨询 button + the hero AI GEO chip) ===== */
.geo-wx-mask {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(3,0,20,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
/* visibility flips instantly on open, but waits out the fade before hiding on close */
transition: opacity .32s ease, visibility 0s linear .32s;
}
.geo-wx-mask.is-open {
opacity: 1;
visibility: visible;
transition: opacity .32s ease, visibility 0s;
}
.geo-wx-box {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 380px;
max-height: 100%;
overflow-y: auto;
padding: 40px 30px 28px;
border-radius: 20px;
background: #fff;
text-align: center;
box-shadow: 0 24px 70px rgba(3,0,20,.35);
opacity: 0;
transform: translateY(30px) scale(.9);
transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
.geo-wx-mask.is-open .geo-wx-box {
opacity: 1;
transform: translateY(0) scale(1);
}
.geo-wx-close {
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: #f2f4fa;
color: #666;
font-size: 24px;
line-height: 34px;
cursor: pointer;
transition: background .25s, color .25s, transform .3s;
}
.geo-wx-close:hover {
background: #0e4081;
color: #fff;
transform: rotate(90deg);
}
.geo-wx-box h3 {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: #030014;
}
.geo-wx-box > p {
margin: 0 0 20px;
font-size: 14px;
line-height: 24px;
color: #666;
}
.geo-wx-qr {
padding: 12px;
border-radius: 16px;
border: 1px solid rgba(14,64,129,.12);
background: #f7f9fc;
}
.geo-wx-qr img {
display: block;
width: 100%;
max-width: 230px;
height: auto;
margin: 0 auto;
border-radius: 8px;
}
.geo-wx-tip {
display: block;
margin-top: 16px;
font-size: 13px;
color: #888;
}
.geo-wx-open { cursor: pointer; }
@media screen and (max-width: 480px) {
.geo-wx-mask { padding: 16px; }
.geo-wx-box { max-width: 100%; padding: 34px 18px 22px; border-radius: 16px; }
.geo-wx-box h3 { font-size: 19px; }
.geo-wx-box > p { font-size: 13px; line-height: 22px; margin-bottom: 16px; }
.geo-wx-qr { padding: 10px; border-radius: 12px; }
.geo-wx-qr img { max-width: 190px; }
.geo-wx-tip { font-size: 12px; margin-top: 14px; }
.geo-wx-close { width: 40px; height: 40px; line-height: 38px; }
}
/* ===== 联系我们页（沿用 GEO 落地页视觉语言） ===== */
.ct-page { padding: 0; }
.ct-page, .ct-page *, .ct-page *::before, .ct-page *::after { box-sizing: border-box; }
/* 两级选择器：压过后加载的 reset.css 里 .containe{max-width:1600px} 和 response.css 的 13px 边距 */
.ct-page .ct-wrap { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
.ct-section { padding: 80px 0; }
.ct-section.alt { background: #f7f9fc; }
.ct-kicker {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: #0e4081;
}
/* Hero */
.ct-hero {
position: relative;
overflow: hidden;
/* body 已有 padding-top:80px（手机 52px）撑起固定头部，这里只加 hero 自己的留白 */
padding: 104px 0 84px;
background: #f8f8fe;
color: #030014;
}
.ct-hero-blur { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; }
.ct-blob { position: absolute; border-radius: 50%; }
.ct-blob-1 { top: -70px; left: -90px; width: 280px; height: 280px; background: #61FF00; opacity: .38; filter: blur(80px); animation: ctDrift 13s ease-in-out infinite; }
.ct-blob-2 { bottom: -100px; left: 42%; width: 220px; height: 220px; background: #00FFF0; opacity: .34; filter: blur(70px); animation: ctDrift 16s ease-in-out infinite reverse; }
.ct-blob-3 { top: -30px; right: -80px; width: 260px; height: 260px; background: #FF00E5; opacity: .26; filter: blur(80px); animation: ctDrift 19s ease-in-out infinite; }
@keyframes ctDrift {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(28px, -22px, 0); }
}
.ct-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.ct-hero-title {
margin: 0 0 22px;
font-size: 48px;
font-weight: 700;
line-height: 1.32;
letter-spacing: -1.5px;
color: #030014;
}
.ct-hero-title .hl { color: #0e4081; }
.ct-hero-sub { margin: 0 0 34px; font-size: 17px; line-height: 2; color: #555; }
.ct-hero-sub strong { font-weight: 400; }
.ct-hero-sub a { color: #0e4081; font-weight: 600; text-decoration: none; transition: color .25s; }
.ct-hero-sub a:hover { color: #0a2a5e; text-decoration: underline; }
.ct-hero-btns { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.ct-hero-btns .geo-btn-primary, .ct-hero-btns .geo-btn-dark { gap: 8px; }
.ct-hero-btns .iconfont { font-size: 19px; line-height: 1; }
.ct-hero-meta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ct-hero-meta span {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border: 1px solid #e8ecf1;
border-radius: 999px;
background: #fff;
font-size: 14px;
color: #555;
box-shadow: 0 4px 18px rgba(14,64,129,.05);
}
.ct-hero-meta .iconfont { font-size: 16px; color: #0e4081; }
/* Section title */
.ct-sec-title { margin-bottom: 46px; text-align: center; }
.ct-sec-title h2 { margin: 0; font-size: 32px; font-weight: 600; color: #111; }
.ct-sec-title h2::after { content: ""; display: block; width: 60px; height: 3px; margin: 14px auto 0; background: #0e4081; }
.ct-sec-title p { margin: 16px 0 0; font-size: 16px; line-height: 1.8; color: #666; }
/* Contact cards */
.ct-cards { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.ct-card {
display: flex;
flex-direction: column;
align-items: center;
width: calc(25% - 18px);
padding: 36px 22px 30px;
border: 1px solid #e8ecf1;
border-radius: 16px;
background: #fff;
text-align: center;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ct-card:hover { transform: translateY(-6px); border-color: #0e4081; box-shadow: 0 15px 70px rgba(14,64,129,.15); }
.ct-card-ico {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 18px;
border-radius: 16px;
background: linear-gradient(135deg, #e8f0fe, #d0e2ff);
font-size: 28px;
color: #0e4081;
transition: transform .35s ease;
}
.ct-card:hover .ct-card-ico { transform: scale(1.08) rotate(-4deg); }
.ct-card-label { margin-bottom: 10px; font-size: 14px; color: #888; }
.ct-card-val { margin-bottom: 12px; font-size: 19px; font-weight: 700; line-height: 1.5; color: #111; word-break: break-word; }
.ct-card-val a { color: #111; text-decoration: none; transition: color .25s; }
.ct-card:hover .ct-card-val a { color: #0e4081; }
/* margin-top:auto 让说明文字贴底，四张卡文案长短不一时底部仍对齐 */
.ct-card-note { margin-top: auto; font-size: 13px; line-height: 1.7; color: #999; }
/* Scope + WeChat */
.ct-split { display: flex; gap: 32px; align-items: stretch; }
.ct-scope {
flex: 1 1 auto;
min-width: 0;
padding: 44px 46px;
border: 1px solid #fff;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
}
.ct-content h4 { margin: 0 0 18px; font-size: 24px; font-weight: 600; color: #111; }
.ct-content h4:not(:first-child) { margin-top: 28px; }
.ct-content h4::after { content: ""; display: block; width: 60px; height: 3px; margin: 14px 0 0; background: #0e4081; }
.ct-content p { margin: 0 0 14px; font-size: 15px; line-height: 2.1; color: #555; text-align: justify; }
.ct-content p:last-child { margin-bottom: 0; }
.ct-scope-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; padding-top: 26px; border-top: 1px dashed #e2e7ef; }
.ct-scope-tags span {
padding: 7px 16px;
border-radius: 999px;
background: #f5f7fc;
font-size: 13px;
color: #0e4081;
transition: background .25s, color .25s;
}
.ct-scope-tags span:hover { background: #0e4081; color: #fff; }
.ct-qr-card {
flex: 0 0 340px;
display: flex;
flex-direction: column;
align-items: center;
padding: 44px 30px 38px;
border: 1px solid #fff;
border-radius: 16px;
background: #fff;
text-align: center;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
transition: transform .3s ease, box-shadow .3s ease;
}
.ct-qr-card:hover { transform: translateY(-6px); box-shadow: 0 15px 70px rgba(14,64,129,.15); }
.ct-qr-card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #030014; }
.ct-qr-card > p { margin: 0 0 22px; font-size: 14px; line-height: 1.8; color: #666; }
.ct-qr { width: 100%; padding: 14px; border: 1px solid rgba(14,64,129,.12); border-radius: 16px; background: #f7f9fc; }
.ct-qr img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; border-radius: 8px; }
.ct-qr-tip { display: block; margin-top: 16px; font-size: 13px; color: #888; }
.ct-qr-btn { margin-top: 22px; }
/* 入场动画：animation 用 backwards 而非 forwards，播完即还给 :hover 的 transform */
.ct-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.ct-reveal.is-in { opacity: 1; transform: none; }
.ct-cards:not(.is-in) .ct-card,
.ct-split:not(.is-in) .ct-scope,
.ct-split:not(.is-in) .ct-qr-card { opacity: 0; }
.ct-cards.is-in .ct-card,
.ct-split.is-in .ct-scope,
.ct-split.is-in .ct-qr-card { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.ct-cards.is-in .ct-card:nth-child(2) { animation-delay: .1s; }
.ct-cards.is-in .ct-card:nth-child(3) { animation-delay: .2s; }
.ct-cards.is-in .ct-card:nth-child(4) { animation-delay: .3s; }
.ct-split.is-in .ct-qr-card { animation-delay: .15s; }
@keyframes ctUp {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
@media screen and (max-width: 1199px) {
.ct-hero-title { font-size: 42px; }
}
@media screen and (max-width: 992px) {
.ct-hero { padding: 76px 0 64px; }
.ct-hero-title { font-size: 38px; margin-bottom: 18px; }
.ct-hero-sub { font-size: 16px; margin-bottom: 28px; }
.ct-section { padding: 64px 0; }
.ct-sec-title { margin-bottom: 36px; }
.ct-sec-title h2 { font-size: 28px; }
.ct-card { width: calc(50% - 12px); }
.ct-split { flex-direction: column; gap: 24px; }
.ct-scope { padding: 36px 30px; }
.ct-qr-card { flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto; padding: 36px 26px 32px; }
}
@media screen and (max-width: 767px) {
.ct-page .ct-wrap { padding: 0 16px; }
/* 手机端 body padding-top 变 52px，hero 留白同步收窄 */
.ct-hero { padding: 48px 0 44px; }
.ct-hero-title { font-size: 29px; letter-spacing: -.5px; margin-bottom: 16px; }
.ct-hero-sub { font-size: 14px; line-height: 1.95; margin-bottom: 24px; }
.ct-hero-btns { gap: 12px; margin-bottom: 22px; }
/* 只改宽度，字号和内边距交给 main.css:4527 的 geo 手机端按钮规则，两页保持一致 */
.ct-hero-btns .geo-btn-primary, .ct-hero-btns .geo-btn-dark { width: 100%; max-width: 330px; }
.ct-hero-meta { gap: 10px; }
.ct-hero-meta span { padding: 7px 14px; font-size: 13px; }
.ct-section { padding: 46px 0; }
.ct-sec-title { margin-bottom: 28px; }
.ct-sec-title h2 { font-size: 23px; }
.ct-sec-title p { margin-top: 12px; font-size: 14px; }
.ct-kicker { font-size: 12px; }
.ct-cards { gap: 14px; }
.ct-card { width: calc(50% - 7px); padding: 26px 14px 22px; }
.ct-card-ico { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; font-size: 24px; }
.ct-card-label { font-size: 13px; }
.ct-card-val { font-size: 15px; margin-bottom: 10px; }
.ct-card-note { font-size: 12px; }
.ct-scope { padding: 28px 20px; }
.ct-content h4 { font-size: 20px; }
.ct-content p { font-size: 14px; line-height: 2; }
.ct-scope-tags { margin-top: 22px; padding-top: 20px; gap: 8px; }
.ct-scope-tags span { padding: 6px 13px; font-size: 12px; }
.ct-qr-card { padding: 30px 20px 26px; }
.ct-qr-card h3 { font-size: 20px; }
.ct-qr img { max-width: 200px; }
}
@media screen and (max-width: 479px) {
.ct-hero-title { font-size: 25px; }
.ct-card { width: 100%; }
}
/* ===== 文章列表页 /news/（沿用 GEO 落地页视觉语言） ===== */
.nl-page { padding: 0; }
.nl-page, .nl-page *, .nl-page *::before, .nl-page *::after { box-sizing: border-box; }
/* 两级选择器：压过后加载的 reset.css 里 .containe{max-width:1600px} 和 response.css 的 13px 边距 */
.nl-page .nl-wrap { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
.nl-section { padding: 80px 0; }
.nl-section.alt { background: #f7f9fc; }
.nl-kicker {
margin: 0 0 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: #0e4081;
}
.nl-kicker-left { text-align: left; }
/* Hero */
.nl-hero {
position: relative;
overflow: hidden;
/* body 已有 padding-top:80px（手机 52px）撑起固定头部，这里只加 hero 自己的留白 */
padding: 96px 0 76px;
background: #f8f8fe;
color: #030014;
}
.nl-hero-blur { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; }
.nl-blob { position: absolute; border-radius: 50%; }
.nl-blob-1 { top: -70px; left: -90px; width: 280px; height: 280px; background: #61FF00; opacity: .38; filter: blur(80px); animation: ctDrift 13s ease-in-out infinite; }
.nl-blob-2 { bottom: -100px; left: 42%; width: 220px; height: 220px; background: #00FFF0; opacity: .34; filter: blur(70px); animation: ctDrift 16s ease-in-out infinite reverse; }
.nl-blob-3 { top: -30px; right: -80px; width: 260px; height: 260px; background: #FF00E5; opacity: .26; filter: blur(80px); animation: ctDrift 19s ease-in-out infinite; }
.nl-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; text-align: center; }
.nl-hero-title {
margin: 0 0 18px;
font-size: 52px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -1.5px;
color: #030014;
}
/* 面包屑放在 hero 内、标题下方（对齐开发服务页的 .sv-hero-crumb）；
这里夹在标题与副标题之间，下边距比 .sv-hero-crumb 的 30px 收紧到 24px */
.nl-hero-crumb { margin: 0 0 24px; font-size: 14px; line-height: 1.8; color: #888; }
.nl-hero-crumb a { color: #0e4081; text-decoration: none; transition: color .25s; }
.nl-hero-crumb a:hover { color: #0a2a5e; text-decoration: underline; }
.nl-hero-sub { margin: 0 0 32px; font-size: 17px; line-height: 2; color: #555; }
.nl-hero-stats { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nl-hero-stats span {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 10px 22px;
border: 1px solid #e8ecf1;
border-radius: 999px;
background: #fff;
font-size: 14px;
color: #666;
box-shadow: 0 4px 18px rgba(14,64,129,.05);
}
.nl-hero-stats strong { font-size: 20px; font-weight: 700; color: #0e4081; }
/* 文章行 */
.nl-list { margin: 0; padding: 0; list-style: none; }
.nl-item { margin: 0 0 18px; }
.nl-item > a {
display: flex;
align-items: center;
gap: 26px;
padding: 28px 32px;
/* 静止态左侧 3px 淡品牌色条，hover 时加深成 #0e4081 */
border: 1px solid #e8ecf1;
border-left: 3px solid #d7e3f4;
border-radius: 16px;
background: #fff;
text-decoration: none;
/* 透明零阴影而不是 none：保证 hover 的 box-shadow 能平滑插值 */
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.nl-item > a:hover {
transform: translateY(-4px);
border-left-color: #0e4081;
box-shadow: 0 15px 60px rgba(14,64,129,.13);
}
/* 固定方块：stretch 会把它拉成与卡片等高的色块（实测 86x131），10 行并排非常突兀 */
.nl-date {
flex: 0 0 78px;
width: 78px;
height: 78px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #e4edfb;
transition: background .3s ease;
}
.nl-date strong { font-size: 32px; font-weight: 700; line-height: 1.1; color: #0e4081; transition: color .3s ease; }
/* 底色加深到 #e4edfb 后 #4a6fa8 只剩 4.31:1，压到 #3d5f92 恢复到 5.48:1（AA） */
.nl-date span { margin-top: 5px; font-size: 13px; color: #3d5f92; transition: color .3s ease; }
.nl-item > a:hover .nl-date { background: #0e4081; }
.nl-item > a:hover .nl-date strong { color: #fff; }
.nl-item > a:hover .nl-date span { color: rgba(255,255,255,.82); }
.nl-body { flex: 1 1 auto; min-width: 0; }
.nl-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
line-height: 1.5;
color: #111;
transition: color .25s;
}
.nl-item > a:hover .nl-title { color: #0e4081; }
.nl-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* 描述长短不一（实测 1~2 行）会让卡片高度参差（189/162），预留两行取齐 */
min-height: 3.8em;
margin: 0 0 14px;
font-size: 14px;
line-height: 1.9;
color: #777;
}
.nl-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-top: 14px;
border-top: 1px dashed #eef1f6;
}
.nl-meta-src {
min-width: 0;
overflow: hidden;
font-size: 13px;
color: #999;
white-space: nowrap;
text-overflow: ellipsis;
}
.nl-more { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #0e4081; }
.nl-arrow { font-style: normal; transition: transform .3s ease; }
.nl-item > a:hover .nl-arrow { transform: translateX(5px); }
.nl-empty { margin: 0; padding: 60px 0; font-size: 15px; color: #999; text-align: center; }
/* 分页：{page:numbar} 直接吐 .page-num / .page-num-current，包在 .nl-pager 里重写，不套 .pagination 就不会吃到旧规则 */
.nl-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 46px; }
.nl-pager a, .nl-pager span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 14px;
border: 1px solid #e8ecf1;
border-radius: 12px;
background: #fff;
font-size: 15px;
color: #555;
text-decoration: none;
transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}
.nl-pager a:hover { border-color: #0e4081; color: #0e4081; transform: translateY(-2px); }
.nl-pager .page-num-current { background: #0e4081; border-color: #0e4081; color: #fff; font-weight: 700; }
.nl-pager .nl-pginfo { border-color: transparent; background: transparent; color: #999; font-size: 14px; }
/* 热门文章 + 微信 */
/* flex-start：stretch 会把二维码卡拉到与热门列表等高（实测都是 725px），卡内多出约 300px 空白 */
.nl-split { display: flex; gap: 32px; align-items: flex-start; }
.nl-hot {
flex: 1 1 auto;
min-width: 0;
padding: 40px 44px;
border: 1px solid #fff;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
}
.nl-hot h3 { margin: 0 0 24px; font-size: 24px; font-weight: 600; color: #111; }
.nl-hot h3::after { content: ""; display: block; width: 60px; height: 3px; margin: 14px 0 0; background: #0e4081; }
.nl-hot-list { margin: 0; padding: 0; list-style: none; counter-reset: nlhot; }
.nl-hot-list li { counter-increment: nlhot; }
.nl-hot-list a {
display: flex;
align-items: center;
gap: 14px;
padding: 13px 0;
border-bottom: 1px dashed #e6ebf2;
text-decoration: none;
}
.nl-hot-list li:last-child a { border-bottom: none; }
/* 序号用 CSS 计数器，不依赖模板标签 */
.nl-hot-list a::before {
content: counter(nlhot);
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 8px;
background: #f0f4fa;
font-size: 13px;
font-weight: 700;
line-height: 26px;
text-align: center;
color: #8895a7;
transition: background .25s, color .25s;
}
.nl-hot-list li:nth-child(-n+3) a::before { background: #0e4081; color: #fff; }
.nl-hot-title {
flex: 1 1 auto;
min-width: 0;
font-size: 15px;
line-height: 1.6;
color: #444;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color .25s;
}
.nl-hot-list a:hover .nl-hot-title { color: #0e4081; }
.nl-qr-card {
flex: 0 0 340px;
display: flex;
flex-direction: column;
align-items: center;
padding: 44px 30px 38px;
border: 1px solid #fff;
border-radius: 16px;
background: #fff;
text-align: center;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
transition: transform .3s ease, box-shadow .3s ease;
}
.nl-qr-card:hover { transform: translateY(-6px); box-shadow: 0 15px 70px rgba(14,64,129,.15); }
.nl-qr-card h3 { margin: 0 0 10px; font-size: 22px; font-weight: 700; color: #030014; }
.nl-qr-card > p { margin: 0 0 22px; font-size: 14px; line-height: 1.8; color: #666; }
.nl-qr { width: 100%; padding: 14px; border: 1px solid rgba(14,64,129,.12); border-radius: 16px; background: #f7f9fc; }
.nl-qr img { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; border-radius: 8px; }
.nl-qr-tip { display: block; margin-top: 16px; font-size: 13px; color: #888; }
.nl-qr-btn { margin-top: 22px; }
/* 入场动画：复用 ctUp / ctDrift，animation 用 backwards，播完即把 transform 还给 :hover */
.nl-list:not(.is-in) .nl-item,
.nl-split:not(.is-in) .nl-hot,
.nl-split:not(.is-in) .nl-qr-card { opacity: 0; }
.nl-list.is-in .nl-item,
.nl-split.is-in .nl-hot,
.nl-split.is-in .nl-qr-card { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.nl-list.is-in .nl-item:nth-child(2) { animation-delay: .06s; }
.nl-list.is-in .nl-item:nth-child(3) { animation-delay: .12s; }
.nl-list.is-in .nl-item:nth-child(4) { animation-delay: .18s; }
.nl-list.is-in .nl-item:nth-child(5) { animation-delay: .24s; }
.nl-list.is-in .nl-item:nth-child(6) { animation-delay: .3s; }
.nl-list.is-in .nl-item:nth-child(7) { animation-delay: .36s; }
.nl-list.is-in .nl-item:nth-child(8) { animation-delay: .42s; }
.nl-list.is-in .nl-item:nth-child(9) { animation-delay: .48s; }
.nl-list.is-in .nl-item:nth-child(10) { animation-delay: .54s; }
.nl-split.is-in .nl-qr-card { animation-delay: .15s; }
@media screen and (max-width: 1199px) {
.nl-hero-title { font-size: 44px; }
}
@media screen and (max-width: 992px) {
.nl-hero { padding: 72px 0 60px; }
.nl-hero-title { font-size: 38px; }
.nl-hero-sub { font-size: 16px; margin-bottom: 26px; }
.nl-section { padding: 64px 0; }
.nl-hero-crumb { margin-bottom: 20px; }
.nl-item > a { gap: 20px; padding: 24px; }
.nl-date { flex-basis: 70px; width: 70px; height: 70px; }
.nl-date strong { font-size: 28px; }
.nl-title { font-size: 18px; }
/* 转成 column 后必须收回 stretch：flex-start 会让交叉轴（横向）缩成内容宽，.nl-hot 没有显式宽度会被压扁 */
.nl-split { flex-direction: column; align-items: stretch; gap: 24px; }
.nl-hot { padding: 34px 28px; }
.nl-qr-card { flex: 0 0 auto; width: 100%; max-width: 420px; margin: 0 auto; padding: 36px 26px 32px; }
}
@media screen and (max-width: 767px) {
.nl-page .nl-wrap { padding: 0 16px; }
/* 手机端 body padding-top 变 52px，hero 留白同步收窄 */
.nl-hero { padding: 46px 0 42px; }
.nl-hero-title { font-size: 28px; letter-spacing: -.5px; margin-bottom: 14px; }
.nl-hero-crumb { margin-bottom: 18px; font-size: 13px; }
.nl-hero-sub { font-size: 14px; line-height: 1.95; margin-bottom: 22px; }
.nl-hero-stats { gap: 10px; }
.nl-hero-stats span { padding: 8px 16px; font-size: 13px; }
.nl-hero-stats strong { font-size: 17px; }
.nl-kicker { font-size: 12px; }
.nl-section { padding: 46px 0; }
.nl-item { margin-bottom: 12px; }
/* 手机端日期条改成整行横排，卡片转单列 */
/* align-items 必须收回 stretch：桌面端的 center 会让 .nl-body 缩成内容宽 */
.nl-item > a { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; border-radius: 14px; }
/* height:auto 覆盖桌面端固定的 78px 方块，否则整宽日期条会变成 78px 高 */
.nl-date { flex: 0 0 auto; width: 100%; height: auto; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 9px 14px; border-radius: 11px; }
.nl-date strong { font-size: 19px; }
.nl-date span { margin-top: 0; font-size: 12px; }
.nl-title { font-size: 16px; margin-bottom: 8px; }
.nl-desc { font-size: 13px; line-height: 1.85; margin-bottom: 12px; }
.nl-meta { gap: 10px; padding-top: 12px; }
.nl-meta-src { font-size: 12px; }
.nl-more { font-size: 13px; }
.nl-pager { gap: 7px; margin-top: 32px; }
.nl-pager a, .nl-pager span { min-width: 36px; height: 36px; padding: 0 10px; font-size: 13px; border-radius: 10px; }
.nl-pager .nl-pginfo { display: none; }
.nl-hot { padding: 26px 20px; }
.nl-hot h3 { font-size: 20px; margin-bottom: 18px; }
.nl-hot-list a { gap: 11px; padding: 11px 0; }
.nl-hot-list a::before { flex: 0 0 23px; width: 23px; height: 23px; line-height: 23px; font-size: 12px; }
.nl-hot-title { font-size: 14px; }
.nl-qr-card { padding: 30px 20px 26px; }
.nl-qr-card h3 { font-size: 20px; }
.nl-qr img { max-width: 200px; }
}
@media screen and (max-width: 479px) {
.nl-hero-title { font-size: 24px; }
.nl-hero-stats span { padding: 8px 13px; }
}
/* ===== 开发服务页（沿用 GEO 落地页视觉语言） ===== */
.sv-page { padding: 0; }
.sv-page, .sv-page *, .sv-page *::before, .sv-page *::after { box-sizing: border-box; }
/* 两级选择器：压过后加载的 reset.css 里 .containe{max-width:1600px} 和 response.css 的 13px 边距 */
.sv-page .sv-wrap { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
.sv-section { padding: 0; }
.sv-section.alt { background: #f7f9fc; }
.sv-kicker {
margin: 0 0 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: #0e4081;
}
/* Hero */
.sv-hero {
position: relative;
overflow: hidden;
/* body 已有 padding-top:80px（手机 52px）撑起固定头部，这里只加 hero 自己的留白 */
padding: 88px 0 66px;
background: #f8f8fe;
color: #030014;
}
.sv-hero-blur { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; }
.sv-blob { position: absolute; border-radius: 50%; }
.sv-blob-1 { top: -70px; left: -90px; width: 280px; height: 280px; background: #61FF00; opacity: .38; filter: blur(80px); animation: ctDrift 13s ease-in-out infinite; }
.sv-blob-2 { bottom: -100px; left: 42%; width: 220px; height: 220px; background: #00FFF0; opacity: .34; filter: blur(70px); animation: ctDrift 16s ease-in-out infinite reverse; }
.sv-blob-3 { top: -30px; right: -80px; width: 260px; height: 260px; background: #FF00E5; opacity: .26; filter: blur(80px); animation: ctDrift 19s ease-in-out infinite; }
.sv-hero-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; text-align: center; }
.sv-hero-title {
margin: 0 0 14px;
font-size: 52px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -1.5px;
color: #030014;
}
.sv-hero-crumb { margin: 0 0 30px; font-size: 14px; line-height: 1.8; color: #888; }
.sv-hero-crumb a { color: #0e4081; text-decoration: none; transition: color .25s; }
.sv-hero-crumb a:hover { color: #0a2a5e; text-decoration: underline; }
.sv-hero-btns { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-bottom: 34px; }
.sv-hero-btns .geo-btn-primary, .sv-hero-btns .geo-btn-dark { gap: 8px; }
.sv-hero-btns .iconfont { font-size: 19px; line-height: 1; }
/* hero 走纯 CSS 入场，不依赖 IntersectionObserver，首屏永不空屏 */
.sv-hero-inner > * { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.sv-hero-inner > *:nth-child(2) { animation-delay: .07s; }
.sv-hero-inner > *:nth-child(3) { animation-delay: .14s; }
.sv-hero-inner > *:nth-child(4) { animation-delay: .21s; }
.sv-hero-inner > *:nth-child(5) { animation-delay: .28s; }
/* 子栏目快捷入口：由 {pboot:nav} 输出，序号用 CSS counter 生成 */
.sv-pills {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
counter-reset: svpill;
}
.sv-pills li { margin: 0; padding: 0; list-style: none; counter-increment: svpill; }
.sv-pills a {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 22px;
border: 1px solid #e8ecf1;
border-radius: 999px;
background: #fff;
font-size: 15px;
line-height: 1.4;
color: #333;
text-decoration: none;
box-shadow: 0 4px 18px rgba(14,64,129,.05);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease, background .3s ease;
}
.sv-pills a:hover {
transform: translateY(-3px);
border-color: #0e4081;
color: #0e4081;
box-shadow: 0 12px 34px rgba(14,64,129,.14);
}
.sv-pills a.is-active { border-color: #0e4081; background: #0e4081; color: #fff; }
.sv-pill-n {
padding: 2px 7px;
border-radius: 6px;
background: #eef3fb;
font-size: 12px;
font-weight: 800;
letter-spacing: .5px;
line-height: 1.6;
color: #0e4081;
}
.sv-pill-n::before { content: counter(svpill, decimal-leading-zero); }
.sv-pills a.is-active .sv-pill-n { background: rgba(255,255,255,.22); color: #fff; }
.sv-pills a:hover .sv-pill-n { background: #dfe9f8; }
.sv-pills a.is-active:hover .sv-pill-n { background: rgba(255,255,255,.3); }
/* CMS 正文外壳（{content:content}，无内容时整块塌陷，alt 底色不留空带）。
宽度交给 .sv-wrap（1320px）：叙述文字收进 .sv-prose 的 1000px 阅读栏，
.geo-* 组件作为 .sv-prose 的兄弟节点拿整幅宽度。正文排版全部挂在 .sv-prose 上，
否则同权重的 .sv-content x 会凭源码顺序压过 .geo-* 组件自己的排版 */
.sv-content {
padding: 62px 0 84px;
}
.sv-content:empty { display: none; }
.sv-content > * + * { margin-top: 56px; }
/* 标题独占一个分区时，sub 的 40px 下边距会和 56px 兄弟节奏叠成 96px */
.sv-content > div > .geo-sec-sub:last-child { margin-bottom: 0; }
/* 全宽横幅图：素材自带标题文字，按原始比例铺满不裁切 */
.sv-banner {
display: block;
width: 100%;
height: auto;
border: 0;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(14,64,129,.1);
}
.sv-prose {
max-width: 1000px;
margin: 0 auto;
font-size: 16px;
line-height: 2;
color: #555;
/* 正文里常有整条案例 URL（apps.apple.com/… 这类不可断行 token），
不断行会把 li 撑到 600px+ 顶出横向滚动条，手机上尤其明显 */
overflow-wrap: break-word;
word-break: break-word;
}
.sv-prose p { margin: 0 0 16px; font-size: 16px; line-height: 2; color: #555; text-align: justify; }
.sv-prose p:last-child { margin-bottom: 0; }
.sv-prose strong { font-weight: 700; color: #111; }
.sv-prose a { color: #0e4081; font-weight: 600; text-decoration: none; transition: color .25s, background .25s; }
.sv-prose a:hover { color: #0a2a5e; text-decoration: underline; }
/* 编辑器把字号写死在标题内的 span 上，必须用 !important 才能压过内联样式 */
.sv-prose h2 span, .sv-prose h3 span { font-size: inherit !important; }
.sv-prose h2 {
position: relative;
margin: 56px 0 24px;
padding-left: 18px;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
color: #111;
}
.sv-prose h2::before {
content: "";
position: absolute;
top: 9px;
bottom: 9px;
left: 0;
width: 5px;
border-radius: 3px;
background: linear-gradient(180deg, #0e4081, #4a86d8);
}
.sv-prose h2:first-child { margin-top: 0; }
.sv-prose h3 {
margin: 30px 0 16px;
padding: 15px 20px;
border: 1px solid #e8ecf1;
border-left: 4px solid #0e4081;
border-radius: 12px;
background: #fff;
font-size: 19px;
font-weight: 700;
line-height: 1.65;
color: #0e4081;
box-shadow: 0 6px 24px rgba(14,64,129,.06);
}
.sv-prose h3 strong { color: inherit; }
.sv-prose hr {
height: 1px;
margin: 48px 0;
border: 0;
background: linear-gradient(90deg, transparent, #d8e0ec 18%, #d8e0ec 82%, transparent);
}
.sv-prose img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
border: 0;
border-radius: 14px;
box-shadow: 0 10px 40px rgba(14,64,129,.1);
}
.sv-prose ul, .sv-prose ol { margin: 0 0 16px; padding-left: 24px; }
.sv-prose li { margin-bottom: 8px; line-height: 1.95; }
/* 「了解详情」按钮：沿用全局 .call-btn 结构，配色换成品牌蓝 */
.sv-prose a.call-btn {
padding: 13px 32px;
border-radius: 14px;
background: #0e4081;
font-size: 15px;
box-shadow: 0 8px 26px rgba(14,64,129,.22);
}
.sv-prose a.call-btn:hover { background: #0a2a5e; text-decoration: none; transform: translateY(-2px); }
.sv-prose a.call-btn strong { color: #fff; font-weight: 600; }
/* 编辑器在标题与按钮后遗留的换行会撑出空白行；正文里合法的换行都在 span 内，不受影响 */
.sv-prose h2 span > br:last-child { display: none; }
.sv-prose p > br:last-child,
.sv-prose p > br:nth-last-child(2) { display: none; }
/* 正文表格：CMS 直出裸 ，common.js 会包一层 .table-wrap 供手机横向滚动，
列数≥4 的再加 .table-wide（配合下面的 min-width，手机上滑动查看而不是挤成一团） */
.sv-prose .table-wrap {
margin: 24px 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.sv-prose table {
width: 100%;
border-collapse: collapse;
margin: 24px 0;
font-size: 15px;
line-height: 1.7;
background: #fff;
border: 1px solid #d9e1ec;
}
.sv-prose .table-wrap > table { margin: 0; }
.sv-prose table th,
.sv-prose table td {
border: 1px solid #d9e1ec;
padding: 12px 14px;
text-align: left;
vertical-align: top;
word-break: break-word;
}
.sv-prose table thead th {
background: #0e4081;
border-color: #0e4081;
color: #fff;
font-weight: 600;
}
.sv-prose table tbody tr:nth-child(even) { background: #f7f9fc; }
.sv-prose table tbody tr:hover { background: #eef3fb; }
.sv-prose table td:first-child { color: #1a1a1a; font-weight: 600; }
.sv-prose blockquote {
margin: 24px 0;
padding: 18px 22px;
border-left: 4px solid #0e4081;
border-radius: 0 12px 12px 0;
background: #f7f9fc;
font-size: 15.5px;
line-height: 1.95;
color: #555;
}
.sv-prose blockquote p:last-child { margin-bottom: 0; }
/* 入场动画 */
.sv-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .65s cubic-bezier(.22,1,.36,1); }
.sv-reveal.is-in { opacity: 1; transform: none; }
/* 块内卡片逐张错峰：animation 播完即还给 :hover 的 transform（同 .ct-cards 的写法），
所以入场不能占用 transition。父块未点亮前子卡保持隐藏，避免「块还没到、卡先露」。
刻意不加任何媒体查询 / prefers-reduced-motion 门控：手机端要有一样的动画。 */
.sv-reveal:not(.is-in) .geo-benefit-card,
.sv-reveal:not(.is-in) .geo-wf-card,
.sv-reveal:not(.is-in) .geo-func-card,
.sv-reveal:not(.is-in) .geo-svc-card,
.sv-reveal:not(.is-in) .geo-step,
.sv-reveal:not(.is-in) .geo-stat { opacity: 0; }
.sv-reveal.is-in .geo-benefit-card,
.sv-reveal.is-in .geo-wf-card,
.sv-reveal.is-in .geo-func-card,
.sv-reveal.is-in .geo-svc-card,
.sv-reveal.is-in .geo-step,
.sv-reveal.is-in .geo-stat { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.sv-reveal.is-in .geo-benefits > :nth-child(2),
.sv-reveal.is-in .geo-wf-cards > :nth-child(2),
.sv-reveal.is-in .geo-func-cards > :nth-child(2),
.sv-reveal.is-in .geo-svc-cards > :nth-child(2),
.sv-reveal.is-in .geo-steps > :nth-child(2),
.sv-reveal.is-in .geo-stats > :nth-child(2) { animation-delay: .08s; }
.sv-reveal.is-in .geo-benefits > :nth-child(3),
.sv-reveal.is-in .geo-wf-cards > :nth-child(3),
.sv-reveal.is-in .geo-func-cards > :nth-child(3),
.sv-reveal.is-in .geo-svc-cards > :nth-child(3),
.sv-reveal.is-in .geo-steps > :nth-child(3),
.sv-reveal.is-in .geo-stats > :nth-child(3) { animation-delay: .16s; }
.sv-reveal.is-in .geo-benefits > :nth-child(4),
.sv-reveal.is-in .geo-wf-cards > :nth-child(4),
.sv-reveal.is-in .geo-func-cards > :nth-child(4),
.sv-reveal.is-in .geo-svc-cards > :nth-child(4),
.sv-reveal.is-in .geo-steps > :nth-child(4),
.sv-reveal.is-in .geo-stats > :nth-child(4) { animation-delay: .24s; }
.sv-reveal.is-in .geo-benefits > :nth-child(5),
.sv-reveal.is-in .geo-wf-cards > :nth-child(5),
.sv-reveal.is-in .geo-func-cards > :nth-child(5),
.sv-reveal.is-in .geo-svc-cards > :nth-child(5),
.sv-reveal.is-in .geo-steps > :nth-child(5),
.sv-reveal.is-in .geo-stats > :nth-child(5) { animation-delay: .32s; }
.sv-reveal.is-in .geo-benefits > :nth-child(6),
.sv-reveal.is-in .geo-wf-cards > :nth-child(6),
.sv-reveal.is-in .geo-func-cards > :nth-child(6),
.sv-reveal.is-in .geo-svc-cards > :nth-child(6),
.sv-reveal.is-in .geo-steps > :nth-child(6),
.sv-reveal.is-in .geo-stats > :nth-child(6) { animation-delay: .4s; }
@media screen and (max-width: 1199px) {
.sv-hero-title { font-size: 44px; }
}
@media screen and (max-width: 992px) {
.sv-hero { padding: 70px 0 54px; }
.sv-hero-title { font-size: 38px; letter-spacing: -1px; }
.sv-hero-crumb { margin-bottom: 24px; }
.sv-hero-btns { gap: 14px; margin-bottom: 28px; }
.sv-pills a { padding: 11px 18px; font-size: 14px; }
.sv-content { padding: 52px 0 66px; }
.sv-content > * + * { margin-top: 46px; }
.sv-prose h2 { margin: 46px 0 20px; font-size: 24px; }
.sv-prose h3 { font-size: 18px; padding: 14px 18px; }
.sv-prose hr { margin: 40px 0; }
}
@media screen and (max-width: 767px) {
.sv-page .sv-wrap { padding: 0 16px; }
.sv-hero { padding: 46px 0 40px; }
.sv-hero-inner { max-width: 100%; }
.sv-hero-title { font-size: 28px; letter-spacing: -.5px; margin-bottom: 12px; }
.sv-hero-crumb { margin-bottom: 22px; font-size: 13px; }
.sv-hero-btns { gap: 12px; margin-bottom: 24px; }
.sv-pills { gap: 9px; }
.sv-pills a { gap: 7px; padding: 9px 15px; font-size: 13.5px; }
.sv-pill-n { font-size: 11px; padding: 1px 6px; }
.sv-content { padding: 40px 0 52px; }
.sv-content > * + * { margin-top: 38px; }
/* 5:1 的横幅在手机上只剩 60px 高的细条，裁成固定窗口保住素材里的标题文字 */
.sv-banner { height: 132px; object-fit: cover; object-position: left top; border-radius: 12px; }
.sv-prose { font-size: 15px; }
.sv-prose p { font-size: 15px; line-height: 1.95; margin-bottom: 14px; }
.sv-prose h2 { margin: 38px 0 16px; padding-left: 14px; font-size: 21px; }
.sv-prose h2::before { top: 7px; bottom: 7px; width: 4px; }
.sv-prose h3 { margin: 24px 0 13px; padding: 12px 14px; font-size: 16px; border-radius: 10px; }
.sv-prose img { border-radius: 10px; }
.sv-prose hr { margin: 32px 0; }
.sv-prose a.call-btn { padding: 11px 24px; font-size: 14px; }
.sv-prose .table-wrap { margin: 18px 0; }
.sv-prose table { font-size: 14px; margin: 18px 0; }
.sv-prose table th,
.sv-prose table td { padding: 9px 10px; }
.sv-prose .table-wrap > table.table-wide { min-width: 600px; }
.sv-prose blockquote { margin: 18px 0; padding: 14px 16px; font-size: 14px; }
}
@media screen and (max-width: 479px) {
.sv-hero-title { font-size: 24px; }
.sv-pills a { width: 100%; justify-content: center; }
.sv-prose h2 { font-size: 19px; }
.sv-prose h3 { font-size: 15px; }
.sv-prose table { font-size: 13px; }
.sv-prose table th,
.sv-prose table td { padding: 8px 9px; }
}
/* ===== 资质荣誉 /about/certificate/ ===== */
/* 骨架直接复用关于我们其余三页的 .sv-*（hero + alt 分区 + 逐块入场），
这里只加证书墙专用类，且一律挂在 .cert-page 下，不碰其它页面。
.geo-sec-title 的 margin / 字号在 992、480 档已有自己的收紧规则，
这里刻意不再写 margin-bottom —— 两级选择器会在所有断点压掉那两条。 */
.cert-page .cert-grid {
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
/* common.css 有条全局 ul{overflow:hidden}，会把卡片 hover 光圈沿网格四边
切成直线（实测 computed overflow=hidden，来源就是它）。这里走 flex，
不靠 overflow 清浮动，显式放开 */
overflow: visible;
}
.cert-page .cert-card {
/* 桌面 2 张一行：现有素材就 2 张，正好铺满不留空档；后台再加证书自然续排 */
position: relative;
width: calc(50% - 14px);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 16px;
overflow: hidden;
/* 静止态零阴影而不是 0 10px 60px：大卡片配 60px 模糊会糊成一圈脏灰边。
写透明零值而非 none，hover 的 box-shadow 才能平滑插值（同 .nl-item > a） */
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cert-page .cert-card:hover {
/* 抬到兄弟卡片之上：否则自己的光圈会被 DOM 顺序靠后的卡片白底盖住，
又变成一条硬切边 */
z-index: 2;
transform: translateY(-5px);
border-color: #c9d8ee;
box-shadow: 0 15px 60px rgba(14,64,129,.13);
}
.cert-page .cert-card > a {
display: block;
position: relative;
color: inherit;
text-decoration: none;
}
.cert-page .cert-frame {
display: block;
padding: 14px;
background: #f0f4f8;
overflow: hidden;
}
/* 证书扫描件是 800x565（√2 横幅），四边都有印章、编号与落款文字，
所以按原始比例整幅显示（height:auto）——object-fit:cover 的固定窗口
总会在某个断点切掉边缘文字，同 .geo-svc-img 的处理理由 */
.cert-page .cert-frame img {
display: block;
width: 100%;
height: auto;
border: 0;
border-radius: 8px;
background: #fff;
/* 光圈必须收在 .cert-frame 的 14px 内边距之内：frame 带 overflow:hidden，
原来的 0 4px 18px 最大伸到约 22px，四边都被切出一条硬边。
offset 2 + blur 10 ≈ 12px < 14px，装裱感保住且不再被裁 */
box-shadow: 0 2px 10px rgba(14,64,129,.10);
transition: transform .4s ease;
}
.cert-page .cert-card:hover .cert-frame img { transform: scale(1.03); }
.cert-page .cert-body {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px 20px;
border-top: 1px solid #eef2f7;
}
.cert-page .cert-name {
flex: 1 1 auto;
min-width: 0;
font-size: 17px;
font-weight: 600;
line-height: 1.6;
color: #111;
}
.cert-page .cert-zoom {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #0e4081;
white-space: nowrap;
opacity: .7;
transition: opacity .25s ease;
}
.cert-page .cert-card:hover .cert-zoom { opacity: 1; }
.cert-page .cert-zoom .fa { font-size: 14px; line-height: 1; }
/* 入场：与 .geo-*-card 同一套写法。animation 播完即把 transform 还给
:hover 的抬升，所以入场不能占用 transition；父块未点亮前证书卡先藏住。
同样不加任何媒体查询 / prefers-reduced-motion 门控，手机端要有一样的动画。 */
.cert-page .sv-reveal:not(.is-in) .cert-card { opacity: 0; }
.cert-page .sv-reveal.is-in .cert-card { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.cert-page .sv-reveal.is-in .cert-grid > :nth-child(2) { animation-delay: .08s; }
.cert-page .sv-reveal.is-in .cert-grid > :nth-child(3) { animation-delay: .16s; }
.cert-page .sv-reveal.is-in .cert-grid > :nth-child(4) { animation-delay: .24s; }
.cert-page .sv-reveal.is-in .cert-grid > :nth-child(5) { animation-delay: .32s; }
.cert-page .sv-reveal.is-in .cert-grid > :nth-child(6) { animation-delay: .4s; }
/* 证书大图灯箱：视觉沿用 .geo-wx-mask，只是盒子换成横图比例。
自带实现而不是 jquery-rebox —— 那套的样式全在 style.css 里，
geo 页面不加载 style.css，为它把整份旧主题拖进来不值当 */
.cert-page .cert-lb {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background: rgba(3,0,20,.8);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .32s ease, visibility 0s linear .32s;
}
.cert-page .cert-lb.is-open {
opacity: 1;
visibility: visible;
transition: opacity .32s ease, visibility 0s;
}
.cert-page .cert-lb-box {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 1040px;
max-height: 100%;
overflow-y: auto;
/* 顶部留出 54px 白边放关闭钮，不压住证书右上角的印章 */
padding: 54px 18px 16px;
border-radius: 18px;
background: #fff;
text-align: center;
box-shadow: 0 24px 70px rgba(3,0,20,.45);
opacity: 0;
transform: translateY(26px) scale(.94);
transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
.cert-page .cert-lb.is-open .cert-lb-box { opacity: 1; transform: translateY(0) scale(1); }
.cert-page .cert-lb-img img {
display: block;
width: 100%;
height: auto;
border: 0;
border-radius: 8px;
background: #f0f4f8;
}
.cert-page .cert-lb-cap { margin: 14px 0 2px; font-size: 15px; font-weight: 600; color: #111; }
.cert-page .cert-lb-close {
position: absolute;
top: 10px; right: 12px;
width: 36px; height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: #f2f4fa;
color: #666;
font-size: 24px;
line-height: 34px;
cursor: pointer;
transition: background .25s, color .25s, transform .3s;
}
.cert-page .cert-lb-close:hover { background: #0e4081; color: #fff; transform: rotate(90deg); }
@media screen and (max-width: 992px) {
.cert-page .cert-grid { gap: 20px; }
.cert-page .cert-card { width: calc(50% - 10px); }
.cert-page .cert-frame { padding: 10px; }
.cert-page .cert-body { gap: 12px; padding: 14px 16px 16px; }
.cert-page .cert-name { font-size: 15.5px; }
.cert-page .cert-lb { padding: 18px; }
.cert-page .cert-lb-box { padding: 48px 12px 12px; border-radius: 14px; }
}
@media screen and (max-width: 767px) {
/* 单列：375px 下两列只剩 150px 宽的证书图，字全糊掉 */
.cert-page .cert-grid { gap: 16px; }
.cert-page .cert-card { width: 100%; }
.cert-page .cert-frame { padding: 9px; }
.cert-page .cert-body { padding: 13px 15px 15px; }
.cert-page .cert-name { font-size: 15px; }
.cert-page .cert-zoom { font-size: 12.5px; }
.cert-page .cert-lb { padding: 12px; }
.cert-page .cert-lb-box { padding: 44px 9px 10px; border-radius: 12px; }
.cert-page .cert-lb-cap { margin-top: 11px; font-size: 14px; }
}
@media screen and (max-width: 479px) {
.cert-page .cert-name { font-size: 14.5px; }
.cert-page .cert-zoom .fa { display: none; }
}
/* ===== 开发流程页 /process/ ===== */
/* 沿用 contact/geo 的 .ct-* 视觉语言，这里只新增流程专用类 */
.lc-page { padding: 0; }
/* 流程总览：八格轨道 */
.lc-rail { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lc-rail-item {
position: relative;
flex: 1 1 calc(25% - 11px);
min-width: 0;
padding: 22px 16px 20px;
border: 1px solid #e8ecf1;
border-radius: 14px;
background: #fff;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,.05);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lc-rail-item:hover { transform: translateY(-5px); border-color: #0e4081; box-shadow: 0 15px 50px rgba(14,64,129,.14); }
.lc-rail-n { display: block; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #b9c6da; }
.lc-rail-item .iconfont { display: block; margin: 8px 0 10px; font-size: 30px; line-height: 1; color: #0e4081; transition: transform .35s ease; }
.lc-rail-item:hover .iconfont { transform: scale(1.12); }
.lc-rail-t { display: block; font-size: 16px; font-weight: 600; color: #111; }
.lc-rail-d { display: block; margin-top: 6px; font-size: 12px; color: #999; }
.lc-rail:not(.is-in) .lc-rail-item { opacity: 0; }
.lc-rail.is-in .lc-rail-item { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.lc-rail.is-in .lc-rail-item:nth-child(2) { animation-delay: .06s; }
.lc-rail.is-in .lc-rail-item:nth-child(3) { animation-delay: .12s; }
.lc-rail.is-in .lc-rail-item:nth-child(4) { animation-delay: .18s; }
.lc-rail.is-in .lc-rail-item:nth-child(5) { animation-delay: .24s; }
.lc-rail.is-in .lc-rail-item:nth-child(6) { animation-delay: .3s; }
.lc-rail.is-in .lc-rail-item:nth-child(7) { animation-delay: .36s; }
.lc-rail.is-in .lc-rail-item:nth-child(8) { animation-delay: .42s; }
/* 阶段详情：竖向时间轴 */
.lc-timeline { position: relative; }
/* 竖线必须穿过编号圈圆心：78/2=39，断点改圈径时 left 要同步 62/2、46/2、40/2 */
.lc-timeline::before {
content: "";
position: absolute;
top: 12px;
bottom: 40px;
left: 39px;
width: 2px;
background: linear-gradient(#0e4081 0%, #7fa3d6 70%, rgba(127,163,214,0) 100%);
}
/* align-items 必须显式写 flex-start：默认 stretch 会把编号圈拉成整条卡片高 */
.lc-step { position: relative; display: flex; align-items: flex-start; gap: 26px; margin-bottom: 20px; }
.lc-step:last-child { margin-bottom: 0; }
.lc-step-n {
position: relative;
z-index: 1;
flex: 0 0 78px;
display: flex;
align-items: center;
justify-content: center;
width: 78px;
height: 78px;
border: 2px solid #fff;
border-radius: 50%;
background: #0e4081;
font-size: 26px;
font-weight: 700;
color: #fff;
box-shadow: 0 10px 30px rgba(14,64,129,.28);
}
.lc-step-body {
flex: 1 1 auto;
min-width: 0;
padding: 26px 30px 24px;
border: 1px solid #e8ecf1;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,.05);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lc-step:hover .lc-step-body { transform: translateX(6px); border-color: #c9d8ee; box-shadow: 0 15px 55px rgba(14,64,129,.12); }
.lc-step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.lc-step-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 21px; font-weight: 600; color: #111; }
.lc-step-head h3 .iconfont { font-size: 22px; color: #0e4081; }
.lc-step-dur {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 999px;
background: #f2f6fc;
font-size: 13px;
font-weight: 600;
color: #0e4081;
white-space: nowrap;
}
.lc-step-dur .iconfont { font-size: 14px; }
.lc-step-body > p { margin: 0 0 16px; font-size: 15px; line-height: 2; color: #666; text-align: justify; }
.lc-step-out { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px dashed #e2e7ef; }
.lc-step-out-k { padding: 4px 11px; border-radius: 6px; background: #0e4081; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: #fff; }
.lc-step-out span:not(.lc-step-out-k) { padding: 4px 12px; border-radius: 6px; background: #f5f7fc; font-size: 13px; color: #4a6fa8; }
@media screen and (max-width: 992px) {
/* 轨道保持基准的 4 列：实测 768 起 4 列（166px/格）标题与周期都不溢出，
而 3 列会让末行 2 格被 flex-grow 拉到 452px、比上面 296px 明显宽一截 */
.lc-step { gap: 18px; }
.lc-step-n { flex-basis: 62px; width: 62px; height: 62px; font-size: 21px; }
.lc-timeline::before { left: 31px; }
.lc-step-body { padding: 22px 22px 20px; }
.lc-step-head h3 { font-size: 19px; }
}
@media screen and (max-width: 767px) {
.lc-rail { gap: 10px; }
.lc-rail-item { flex: 1 1 calc(50% - 5px); padding: 16px 10px 14px; }
.lc-rail-item .iconfont { margin: 6px 0 8px; font-size: 25px; }
.lc-rail-t { font-size: 14px; }
.lc-step { gap: 14px; margin-bottom: 14px; }
.lc-step-n { flex-basis: 46px; width: 46px; height: 46px; font-size: 17px; }
.lc-timeline::before { top: 8px; bottom: 28px; left: 23px; }
.lc-step-body { padding: 18px 16px 16px; border-radius: 14px; }
.lc-step-head { gap: 10px; margin-bottom: 10px; }
.lc-step-head h3 { font-size: 17px; }
/* 保留 margin-left:auto：375 下标题+胶囊约 188px，容器内宽 242px，仍够右对齐排一行 */
.lc-step-dur { padding: 4px 11px; font-size: 12px; }
.lc-step-body > p { margin-bottom: 13px; font-size: 14px; line-height: 1.95; }
.lc-step-out { gap: 6px; padding-top: 12px; }
.lc-step-out span:not(.lc-step-out-k) { padding: 3px 9px; font-size: 12px; }
}
@media screen and (max-width: 479px) {
/* 轨道保持 767 档的 2 列：实测 1 列会把总览拉成 8 行、与下方时间轴重复 */
.lc-step-n { flex-basis: 40px; width: 40px; height: 40px; font-size: 15px; }
.lc-timeline::before { left: 20px; }
/* 320 下 h3(100) + gap(10) + 「15-40 天」胶囊(93) = 203，比 202 的内容宽多 1px 会折行；
收到 8px + 胶囊左右各减 2px 后八个步骤头部统一 37px 单行，360 及以上看不出差别 */
.lc-step-head { gap: 8px; }
.lc-step-dur { padding: 4px 9px; }
}
/* ===== 客户案例页 /case/ ===== */
/* 骨架复用 .sv-*（hero + alt 分区 + .sv-reveal 逐块入场）与 .nl-pager / .nl-empty，
这里只加案例墙专用类，一律挂在 .case-page 下，不碰其它页面。
模板是新建的 casegeo.html，只切给 5 个案例栏目；旧的 caselist.html
还服务成品软件 + 解决方案共 15 个栏目，不能就地改。 */
/* hero 多了一行副标题，.sv-hero-inner 的错峰只写到 :nth-child(5)，补第 6 个 */
.case-page .sv-hero-inner > *:nth-child(6) { animation-delay: .35s; }
.case-page .case-hero-sub {
max-width: 720px;
margin: 0 auto 30px;
font-size: 16px;
line-height: 1.95;
color: #555;
}
.case-page .case-grid {
display: flex;
flex-wrap: wrap;
gap: 28px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
/* 同 .cert-grid：common.css 的全局 ul{overflow:hidden} 会把 hover 光圈
沿网格四边切成直线，这里走 flex 不靠它清浮动，显式放开 */
overflow: visible;
}
.case-page .case-card {
/* 桌面 3 张一行。案例图比例不齐（实测 1000x1000 与 1000x637 混着），
所以走固定比例窗口；行高统一，也不会像 height:auto 那样排出参差不齐的锯齿行 */
position: relative;
width: calc((100% - 56px) / 3);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 16px;
overflow: hidden;
/* 静止态零阴影（透明零值而非 none，hover 才能平滑插值），同 .nl-item / .cert-card */
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.case-page .case-card:hover {
/* 抬到兄弟卡片之上，否则光圈被 DOM 顺序靠后的卡片白底盖出一条硬切边 */
z-index: 2;
transform: translateY(-5px);
border-color: #c9d8ee;
box-shadow: 0 15px 60px rgba(14,64,129,.13);
}
.case-page .case-card > a {
/* flex 列 + height:100%：同一行卡片本来就被 stretch 拉成等高，
这样标题折行数不同时「查看案例详情」也能齐在底边 */
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.case-page .case-shot {
display: block;
position: relative;
/* 1:1 而不是 4:3：素材以 1000x1000 方形合成图为主（3 个案例里占 2 个），
方形图在 1:1 窗口里正好铺满、零裁切零留白；1000x637 的宽截图改用
contain 上下各留 18% 底色，比 4:3+cover 把它横向切掉 15%、
或 1:1+cover 切掉 36% 都更能交代清楚截图内容 */
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f0f4f8;
}
.case-page .case-shot img {
display: block;
width: 100%;
height: 100%;
border: 0;
/* contain：任何比例的封面都完整显示，不切掉手机样机或截图边缘 */
object-fit: contain;
transition: transform .4s ease;
}
/* 1.03 而不是 1.05：contain 下图片已经贴着窗口，放太大会把刚保证的
「完整显示」又裁掉一圈 */
.case-page .case-card:hover .case-shot img { transform: scale(1.03); }
.case-page .case-chip {
position: absolute;
top: 14px; left: 14px;
max-width: calc(100% - 28px);
padding: 5px 12px;
border-radius: 999px;
background: rgba(3,0,20,.62);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
font-size: 12.5px;
font-weight: 600;
line-height: 1.6;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.case-page .case-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 20px 22px 22px;
}
.case-page .case-title {
display: block;
font-size: 17px;
font-weight: 600;
line-height: 1.55;
color: #111;
transition: color .25s ease;
}
.case-page .case-card:hover .case-title { color: #0e4081; }
/* 后台描述长短差三倍（实测 59 / 153 / 157 字），夹两行让三张卡正文齐高 */
.case-page .case-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 9px 0 16px;
font-size: 14px;
line-height: 1.85;
color: #666;
}
.case-page .case-more {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
/* auto：把 .case-body 里的剩余高度全吃掉，「查看案例详情」永远齐在底边 */
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #eef2f7;
font-size: 13.5px;
font-weight: 600;
color: #0e4081;
}
.case-page .case-arrow {
font-style: normal;
transition: transform .3s ease;
}
.case-page .case-card:hover .case-arrow { transform: translateX(4px); }
/* 入场：与 .cert-card 同一套写法。.sv-reveal 自己走 transition 淡入整块，
块内卡片再用 animation 逐张错峰 —— animation 播完即把 transform 还给
:hover 的抬升，所以入场不能占用 transition。
同样不加任何媒体查询 / prefers-reduced-motion 门控，手机端要有一样的动画。 */
.case-page .sv-reveal:not(.is-in) .case-card { opacity: 0; }
.case-page .sv-reveal.is-in .case-card { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(2) { animation-delay: .08s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(3) { animation-delay: .16s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(4) { animation-delay: .24s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(5) { animation-delay: .32s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(6) { animation-delay: .4s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(7) { animation-delay: .48s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(8) { animation-delay: .56s; }
.case-page .sv-reveal.is-in .case-grid > :nth-child(9) { animation-delay: .64s; }
/* 收尾 CTA：视觉量级照 .nl-hot（40/44 内边距 + 16px 圆角 + 同一层投影） */
.case-page .case-cta {
display: flex;
align-items: center;
gap: 40px;
padding: 40px 44px;
border: 1px solid #fff;
border-radius: 16px;
background: #fff;
box-shadow: 0 10px 60px rgba(0,0,0,.1);
}
.case-page .case-cta-txt { flex: 1 1 auto; min-width: 0; }
.case-page .case-cta-txt h3 {
margin: 0 0 24px;
font-size: 24px;
font-weight: 600;
color: #111;
}
.case-page .case-cta-txt h3::after {
content: '';
display: block;
width: 60px;
height: 3px;
margin: 14px 0 0;
border-radius: 2px;
background: #0e4081;
}
.case-page .case-cta-txt > p {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.95;
color: #666;
}
.case-page .case-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.case-page .case-cta-btns .geo-btn-primary,
.case-page .case-cta-btns .geo-btn-dark { gap: 8px; }
.case-page .case-cta-btns .iconfont { font-size: 19px; line-height: 1; }
.case-page .case-cta-qr { flex: none; width: 190px; text-align: center; }
.case-page .case-cta-qr img {
display: block;
box-sizing: border-box;
width: 168px;
height: 168px;
margin: 0 auto 12px;
padding: 8px;
border: 1px solid #e8ecf1;
border-radius: 14px;
background: #fff;
object-fit: contain;
}
.case-page .case-cta-qr span {
display: block;
font-size: 12.5px;
line-height: 1.7;
color: #888;
}
@media screen and (max-width: 992px) {
/* 仍保持 3 列：992 下卡片 302px、768 下 228px，缩略窗按 1:1 跟着收窄；
改 2 列会把现有的 3 个案例排成 2+1，正是要避开的那种缺角 */
.case-page .case-hero-sub { margin-bottom: 26px; font-size: 15px; }
.case-page .case-grid { gap: 20px; }
.case-page .case-card { width: calc((100% - 40px) / 3); }
.case-page .case-chip { top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 4px 10px; font-size: 12px; }
.case-page .case-body { padding: 16px 17px 18px; }
.case-page .case-title { font-size: 15.5px; }
.case-page .case-desc { margin-top: 7px; font-size: 13.5px; line-height: 1.8; }
.case-page .case-more { margin-top: 13px; padding-top: 12px; font-size: 13px; }
.case-page .case-cta { gap: 28px; padding: 34px 28px; }
.case-page .case-cta-txt h3 { margin-bottom: 20px; font-size: 21px; }
.case-page .case-cta-txt > p { margin-bottom: 20px; font-size: 14.5px; }
.case-page .case-cta-qr { width: 168px; }
.case-page .case-cta-qr img { width: 148px; height: 148px; }
}
@media screen and (max-width: 767px) {
/* 单列：375 下三列每格只剩 103px，截图细节全糊；两列每格 163px 也好不到哪去，
而且 3 个案例会排成 2+1 缺角 */
.case-page .case-hero-sub { margin-bottom: 22px; font-size: 14px; line-height: 1.95; }
.case-page .case-grid { gap: 16px; }
.case-page .case-card { width: 100%; }
.case-page .case-chip { top: 12px; left: 12px; padding: 5px 11px; font-size: 12.5px; }
.case-page .case-body { padding: 17px 18px 19px; }
.case-page .case-title { font-size: 16px; }
.case-page .case-desc { margin-top: 8px; font-size: 14px; }
.case-page .case-cta { flex-direction: column; gap: 24px; padding: 26px 20px; text-align: center; }
.case-page .case-cta-txt h3 { margin-bottom: 18px; font-size: 19px; }
.case-page .case-cta-txt h3::after { margin: 12px auto 0; }
.case-page .case-cta-txt > p { margin-bottom: 20px; font-size: 14px; }
.case-page .case-cta-btns { justify-content: center; gap: 12px; }
.case-page .case-cta-qr { width: 100%; max-width: 260px; }
.case-page .case-cta-qr img { width: 156px; height: 156px; }
}
@media screen and (max-width: 479px) {
.case-page .case-title { font-size: 15.5px; }
.case-page .case-desc { font-size: 13.5px; }
}
/* ===== 案例详情页（casecontent.html） ===== */
/* 案例标题比栏目名长得多（实测 22 字），52px 会在 980px 的 hero 栏里折成两行大块头，
所以整条阶梯各收一档。.casedtl-page .sv-hero-title 是 (0,2,0)，分档里的
.sv-hero-title 只有 (0,1,0)，被它整条压住，必须五档都写全，
否则手机上仍显示桌面字号（本文件 clamp() 用了 0 处，全站走显式分档） */
.casedtl-page .sv-hero-title { max-width: 900px; margin-left: auto; margin-right: auto; font-size: 40px; }
@media screen and (max-width: 1199px) {
.casedtl-page .sv-hero-title { font-size: 36px; }
}
@media screen and (max-width: 992px) {
.casedtl-page .sv-hero-title { font-size: 32px; }
}
@media screen and (max-width: 767px) {
.casedtl-page .sv-hero-title { max-width: 100%; font-size: 26px; }
}
@media screen and (max-width: 479px) {
.casedtl-page .sv-hero-title { font-size: 22px; }
}
/* 封面整幅完整显示：width/height 都给 auto，再用 max-width + max-height 双约束，
浏览器会按比例同时满足两者，任何比例的图都不裁切（列表页缩略图才需要固定窗口） */
.casedtl-page .casedtl-cover { max-width: 880px; margin-left: auto; margin-right: auto; padding: 22px;
border: 1px solid #e8ecf1; border-radius: 20px; background: #fff;
/* fit-content：外框跟着封面比例收，不留死白。实测 1000x1000 封面被 max-height
压到 520 高后，固定 880 宽的框会在图两侧各留 158px 空白；fit-content 收到 566px
正好只剩 22px 内边距，而 1000x637 的宽截图仍撑到 862px。
不支持 fit-content 的浏览器丢掉这条声明，退回 880px 满宽，不会塌 */
width: fit-content; }
.casedtl-page .casedtl-cover img { display: block; width: auto; max-width: 100%; height: auto;
max-height: 520px; margin: 0 auto; border: 0; border-radius: 14px; }
.casedtl-page .casedtl-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 10px; margin-top: 20px; }
.casedtl-page .casedtl-chip { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 999px;
background: #eef3fb; font-size: 13px; font-weight: 600; line-height: 1.6; color: #0e4081;
text-decoration: none; transition: background .25s ease, color .25s ease; }
.casedtl-page a.casedtl-chip:hover { background: #0e4081; color: #fff; }
.casedtl-page .casedtl-chip.is-plain { background: #f4f6f9; color: #6b7480; }
/* 上/下一个案例：flex 等分，静止零阴影 + hover 抬升，与 .cert-card / .case-card 同一套值 */
.casedtl-page .casedtl-nav { display: flex; gap: 24px; max-width: 1000px; margin-left: auto; margin-right: auto; }
.casedtl-page .casedtl-navitem { flex: 1 1 0; min-width: 0; display: block; padding: 22px 26px;
border: 1px solid #e8ecf1; border-radius: 16px; background: #fff; text-decoration: none;
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.casedtl-page .casedtl-navitem:hover { transform: translateY(-4px); border-color: #c9d8ee;
box-shadow: 0 15px 60px rgba(14,64,129,.13); }
.casedtl-page .casedtl-navdir { display: block; margin-bottom: 9px; font-size: 12.5px; font-weight: 700;
letter-spacing: .5px; color: #8a94a6; }
.casedtl-page .casedtl-navtit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; font-size: 15.5px; font-weight: 600; line-height: 1.7; color: #111;
transition: color .25s ease; }
.casedtl-page .casedtl-navitem:hover .casedtl-navtit { color: #0e4081; }
.casedtl-page .casedtl-navitem.is-next { text-align: right; }
/* 到头/到尾时 ParserController 的 prelink/nextlink 回退成 javascript:;，
用属性选择器把那一格压成不可点的灰态，省得再套一层 pboot:if */
.casedtl-page .casedtl-navitem[href="javascript:;"] { opacity: .45; pointer-events: none; }
/* 相关案例复用 .case-grid / .case-card，这里只把区块标题的下边距从 50px 收到 40px：
详情页这一段在 CTA 之前，50px 会和上面正文的间距撞在一起显得空 */
.casedtl-page .casedtl-related .geo-sec-title { margin-bottom: 40px; }
@media screen and (max-width: 992px) {
.casedtl-page .casedtl-cover { max-width: 100%; padding: 18px; }
.casedtl-page .casedtl-cover img { max-height: 440px; }
.casedtl-page .casedtl-nav { gap: 18px; }
.casedtl-page .casedtl-navitem { padding: 18px 20px; }
}
@media screen and (max-width: 767px) {
.casedtl-page .casedtl-cover { padding: 14px; border-radius: 16px; }
.casedtl-page .casedtl-cover img { max-height: 340px; border-radius: 12px; }
.casedtl-page .casedtl-cap { gap: 8px; margin-top: 16px; }
.casedtl-page .casedtl-chip { padding: 6px 13px; font-size: 12.5px; }
/* 窄屏并排两格每格只剩 ~150px，案例标题折三行都放不下，改上下堆叠 */
.casedtl-page .casedtl-nav { flex-direction: column; gap: 14px; }
.casedtl-page .casedtl-navitem.is-next { text-align: left; }
.casedtl-page .casedtl-navtit { font-size: 15px; }
.casedtl-page .casedtl-related .geo-sec-title { margin-bottom: 30px; }
}
/* ===== 案例图片画廊灯箱（casecontent.html） =====
视觉沿用同站已有的 .cert-lb / .geo-wx-mask：同一层遮罩、同样的弹性进场、同样的圆形关闭钮。
正文图片全部来自后台富文本，模板里写不死，所以 .case-lb-src 这个类是渲染后由 JS 补的。
盒子用 flex 纵排、图片区自己滚：后台常整页贴一张长截图，不滚就会把关闭钮顶出屏幕。 */
.casedtl-page .case-lb-src { cursor: zoom-in; }
.casedtl-page .case-lb {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background: rgba(3,0,20,.86);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .32s ease, visibility 0s linear .32s;
}
.casedtl-page .case-lb.is-open {
opacity: 1;
visibility: visible;
transition: opacity .32s ease, visibility 0s;
}
.casedtl-page .case-lb-box {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 1040px;
max-height: 100%;
/* 顶部留 54px 放关闭钮，和 .cert-lb-box 一致 */
padding: 54px 18px 16px;
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 70px rgba(3,0,20,.45);
opacity: 0;
transform: translateY(26px) scale(.94);
transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
.casedtl-page .case-lb.is-open .case-lb-box { opacity: 1; transform: translateY(0) scale(1); }
.casedtl-page .case-lb-stage {
flex: 1 1 auto;
/* flex 子项默认 min-height:auto，长图会把盒子撑破，必须显式归零才能内部滚动 */
min-height: 0;
width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
/* 横向手势留给脚本切图，纵向仍交给浏览器滚长图 */
touch-action: pan-y;
text-align: center;
}
.casedtl-page .case-lb-stage img {
display: block;
max-width: 100%;
height: auto;
/* 这里故意不写 max-height：限高由 casecontent.html 的画廊脚本按运行时量到的可用高度
写成行内 px。百分比在这儿是无效的——盒子高度靠 max-height:100% 撑出来，对子元素不确定，
img 上的 max-height:100% 会解析成 none；写死各断点的数值又会在改边距后失准。 */
margin: 0 auto;
border: 0;
border-radius: 8px;
background: #f0f4f8;
}
.casedtl-page .case-lb-stage img.is-from-right { animation: caseLbFromRight .28s ease; }
.casedtl-page .case-lb-stage img.is-from-left { animation: caseLbFromLeft .28s ease; }
@keyframes caseLbFromRight {
from { opacity: .25; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes caseLbFromLeft {
from { opacity: .25; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
.casedtl-page .case-lb-nav {
position: absolute;
top: 50%;
z-index: 2;
width: 44px; height: 44px;
/* 用负 margin 而不是 translateY 居中，把 transform 让给 hover 的位移 */
margin-top: -22px;
padding: 0;
border: none;
border-radius: 50%;
background: #f2f4fa;
color: #444;
font-size: 19px;
line-height: 44px;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
user-select: none;
transition: background .25s, color .25s, transform .25s;
}
.casedtl-page .case-lb-nav:hover { background: #0e4081; color: #fff; }
.casedtl-page .case-lb-nav.is-prev { left: 14px; }
.casedtl-page .case-lb-nav.is-next { right: 14px; }
.casedtl-page .case-lb-nav.is-prev:hover { transform: translateX(-3px); }
.casedtl-page .case-lb-nav.is-next:hover { transform: translateX(3px); }
.casedtl-page .case-lb-close {
position: absolute;
top: 10px; right: 12px;
z-index: 3;
width: 36px; height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: #f2f4fa;
color: #666;
font-size: 24px;
line-height: 34px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .25s, color .25s, transform .3s;
}
.casedtl-page .case-lb-close:hover { background: #0e4081; color: #fff; transform: rotate(90deg); }
.casedtl-page .case-lb-bar {
flex: none;
box-sizing: border-box;
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
width: 100%;
margin-top: 13px;
padding: 0 46px;
font-size: 14px;
color: #666;
}
.casedtl-page .case-lb-count { flex: none; font-size: 15px; font-weight: 700; letter-spacing: .5px; color: #0e4081; }
.casedtl-page .case-lb-cap {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.casedtl-page .case-lb-hint { flex: none; margin-top: 5px; font-size: 12px; color: #98a1ad; }
@media screen and (max-width: 992px) {
.casedtl-page .case-lb { padding: 18px; }
.casedtl-page .case-lb-box { padding: 48px 12px 12px; border-radius: 14px; }
.casedtl-page .case-lb-nav { width: 40px; height: 40px; margin-top: -20px; line-height: 40px; }
.casedtl-page .case-lb-nav.is-prev { left: 10px; }
.casedtl-page .case-lb-nav.is-next { right: 10px; }
.casedtl-page .case-lb-bar { padding: 0 40px; }
}
@media screen and (max-width: 767px) {
.casedtl-page .case-lb { padding: 10px; }
.casedtl-page .case-lb-box { padding: 44px 8px 10px; border-radius: 12px; }
/* 窄屏图片会铺满盒宽，浅色钮压在图上看不清，换成半透明深色 */
.casedtl-page .case-lb-nav {
width: 38px; height: 38px;
margin-top: -19px;
background: rgba(3,0,20,.45);
color: #fff;
font-size: 17px;
line-height: 38px;
}
.casedtl-page .case-lb-nav:hover { background: rgba(14,64,129,.85); }
.casedtl-page .case-lb-nav.is-prev { left: 8px; }
.casedtl-page .case-lb-nav.is-next { right: 8px; }
.casedtl-page .case-lb-close { width: 34px; height: 34px; font-size: 22px; line-height: 32px; }
.casedtl-page .case-lb-bar { gap: 8px; margin-top: 10px; padding: 0 6px; font-size: 13px; }
.casedtl-page .case-lb-count { font-size: 13.5px; }
.casedtl-page .case-lb-hint { font-size: 11.5px; }
.casedtl-page .case-lb-stage img { border-radius: 6px; }
}
/* ===== 文章详情页 /news/article-*.html（news.html） =====
hero、正文、上下篇、CTA、相关阅读 全部复用 .sv-* / .casedtl-* / .case-cta / .nl-item，
这里只有三处是文章页专属：长标题的字号阶梯、标签+免责声明的合并页脚、免责声明本身。
标题阶梯必须逐档写：.casedtl-page .sv-hero-title 同为 (0,2,0)，靠源码顺序压过它。 */
.newsdtl-page .sv-hero-title { max-width: 940px; margin-left: auto; margin-right: auto; font-size: 34px; letter-spacing: -.8px; }
@media screen and (max-width: 1199px) {
.newsdtl-page .sv-hero-title { font-size: 32px; }
}
@media screen and (max-width: 992px) {
.newsdtl-page .sv-hero-title { font-size: 29px; }
}
@media screen and (max-width: 767px) {
.newsdtl-page .sv-hero-title { max-width: 100%; font-size: 22px; letter-spacing: -.3px; }
.newsdtl-page .newsdtl-note { margin-top: 18px; padding-top: 16px; font-size: 12px; }
}
@media screen and (max-width: 479px) {
.newsdtl-page .sv-hero-title { font-size: 20px; }
}
/* 标签与免责声明合成一个 .sv-content 子节点，否则会各吃一次 56px 兄弟间距 */
.newsdtl-page .newsdtl-foot { max-width: 1000px; margin-left: auto; margin-right: auto; text-align: center; }
.newsdtl-page .newsdtl-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.newsdtl-page .newsdtl-note {
margin: 22px 0 0;
padding-top: 20px;
border-top: 1px dashed #dfe5ee;
font-size: 13px;
line-height: 1.9;
color: #98a1ad;
word-break: break-all;
}
/* ===== 成品软件聚合页 /product/（productgeo.html） =====
骨架沿用 case-page 的 .sv-* 与 .case-cta，这里只写产品墙本身。
列数刻意取 4 / 2 / 1：8 个产品在三档都是整除的，不会排出缺角的一行。 */
.prod-page .prod-sec .geo-stats { padding: 0 0 40px; }
.prod-page .prod-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
/* common.css 给所有 ul 加了 overflow:hidden，会把卡片的悬浮光晕裁掉 */
overflow: visible;
counter-reset: prodn;
}
.prod-page .prod-card {
position: relative;
width: calc((100% - 72px) / 4);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
counter-increment: prodn;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.prod-page .prod-card:hover {
z-index: 2;
transform: translateY(-5px);
border-color: #c9d8ee;
box-shadow: 0 15px 60px rgba(14,64,129,.13);
}
.prod-page .prod-card > a { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.prod-page .prod-top { position: relative; display: block; height: 148px; overflow: hidden; background: #f0f4f8; }
/* 后台没传栏目 ico 时的兜底版面：编号 + 英文牌。编号走 CSS 计数器，
增删产品会自动重排，不用在模板里手写 01-08 */
.prod-page .prod-plate {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
overflow: hidden;
background: linear-gradient(135deg, #f4f8fd 0%, #e7eef9 52%, #dbe6f6 100%);
}
.prod-page .prod-plate::before {
content: counter(prodn, decimal-leading-zero);
font-size: 62px;
font-weight: 800;
line-height: 1;
letter-spacing: -2px;
color: rgba(14,64,129,.14);
}
.prod-page .prod-plate em {
max-width: 88%;
font-style: normal;
font-size: 12px;
font-weight: 700;
letter-spacing: .7px;
line-height: 1.55;
text-align: center;
text-transform: uppercase;
color: rgba(14,64,129,.5);
}
/* 不给底色：截图比例和窗口不一致时，letterbox 露出的是上面的字母牌而不是白边 */
.prod-page .prod-shot {
position: absolute;
top: 0; left: 0;
display: block;
width: 100%; height: 100%;
border: 0;
object-fit: contain;
transition: transform .4s ease;
}
.prod-page .prod-card:hover .prod-shot { transform: scale(1.03); }
.prod-page .prod-chip {
position: absolute;
top: 12px; left: 12px;
max-width: calc(100% - 24px);
padding: 4px 11px;
border-radius: 999px;
background: #0e4081;
font-size: 12px;
font-weight: 600;
line-height: 1.6;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 4px 14px rgba(3,0,20,.18);
}
.prod-page .prod-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 20px 20px; }
.prod-page .prod-title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; color: #111; transition: color .25s ease; }
.prod-page .prod-card:hover .prod-title { color: #0e4081; }
.prod-page .prod-desc {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 9px 0 0;
font-size: 13.5px;
line-height: 1.85;
color: #666;
}
.prod-page .prod-spec { display: block; margin-top: 12px; font-size: 12.5px; line-height: 1.75; color: #7a8494; }
.prod-page .prod-spec i {
display: inline-block;
margin-right: 6px;
padding: 1px 7px;
border-radius: 5px;
background: #f2f5fa;
font-style: normal;
font-size: 11.5px;
font-weight: 700;
color: #8a94a6;
}
/* 卡片内只保留这一条横线：终端构成再加分隔线的话两条线只隔 14px，看着像排版事故 */
.prod-page .prod-more {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
margin-top: auto;
padding-top: 13px;
border-top: 1px solid #eef2f7;
font-size: 13.5px;
font-weight: 600;
color: #0e4081;
}
.prod-page .prod-arrow { font-style: normal; transition: transform .3s ease; }
.prod-page .prod-card:hover .prod-arrow { transform: translateX(4px); }
.prod-page .sv-reveal:not(.is-in) .prod-card { opacity: 0; }
.prod-page .sv-reveal.is-in .prod-card { animation: ctUp .6s cubic-bezier(.22,1,.36,1) backwards; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(2) { animation-delay: .07s; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(3) { animation-delay: .14s; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(4) { animation-delay: .21s; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(5) { animation-delay: .28s; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(6) { animation-delay: .35s; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(7) { animation-delay: .42s; }
.prod-page .sv-reveal.is-in .prod-grid > :nth-child(8) { animation-delay: .49s; }
@media screen and (max-width: 1199px) {
/* 这一档卡片宽到 500px 以上，竖排会让正文行长失控，所以翻成左图右文 */
.prod-page .prod-grid { gap: 20px; }
.prod-page .prod-card { width: calc((100% - 20px) / 2); }
.prod-page .prod-card > a { flex-direction: row; align-items: stretch; }
.prod-page .prod-top { width: 40%; height: auto; min-height: 210px; flex: none; }
.prod-page .prod-body { flex: 1 1 auto; padding: 22px 24px 24px; }
.prod-page .prod-title { font-size: 18px; }
.prod-page .prod-desc { font-size: 14px; }
.prod-page .prod-chip { top: 14px; left: 14px; }
}
@media screen and (max-width: 991px) {
.prod-page .prod-sec .geo-stats { padding-bottom: 32px; }
}
@media screen and (max-width: 767px) {
.prod-page .prod-grid { gap: 16px; }
.prod-page .prod-card { width: 100%; }
.prod-page .prod-card > a { flex-direction: column; }
.prod-page .prod-top { width: 100%; height: 150px; min-height: 0; }
.prod-page .prod-body { padding: 17px 18px 19px; }
.prod-page .prod-title { font-size: 16.5px; }
.prod-page .prod-desc { font-size: 13.5px; }
.prod-page .prod-plate::before { font-size: 56px; }
}
@media screen and (max-width: 479px) {
.prod-page .prod-top { height: 132px; }
.prod-page .prod-title { font-size: 16px; }
.prod-page .prod-plate em { font-size: 11px; }
}
/* ===== 成品软件详情页（productcontent.html，单页栏目） =====
封面、正文、相关切换、底部 CTA 全部复用 .casedtl-* / .sv-pills / .case-cta，
这里只有页首那条三格参数带是新组件。
居中只能用 margin-left/right：.sv-content > * + * 的 56px 节奏是 (0,1,0)，
本条是 (0,2,0)，写成 margin 简写会把上边距清零。 */
.proddtl-page .proddtl-spec {
display: flex;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border: 1px solid #e8ecf1;
border-radius: 16px;
background: #fff;
box-shadow: 0 6px 24px rgba(14,64,129,.06);
overflow: hidden;
}
.proddtl-page .proddtl-spec-i { flex: 1 1 0; min-width: 0; padding: 22px 26px; }
.proddtl-page .proddtl-spec-i + .proddtl-spec-i { border-left: 1px solid #eef2f7; }
.proddtl-page .proddtl-spec-k { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .5px; color: #8a94a6; }
.proddtl-page .proddtl-spec-v { display: block; font-size: 15px; font-weight: 600; line-height: 1.7; color: #111; }
@media screen and (max-width: 767px) {
.proddtl-page .proddtl-spec { flex-direction: column; }
.proddtl-page .proddtl-spec-i { padding: 16px 18px; }
.proddtl-page .proddtl-spec-i + .proddtl-spec-i { border-left: 0; border-top: 1px solid #eef2f7; }
}
/* ===== 预约演示弹窗：扫码 + 电话 + 地址（.geo-wx-* 同一套写法，多一列联系方式） ===== */
.prod-pv-mask {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(3,0,20,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
transition: opacity .32s ease, visibility 0s linear .32s;
}
.prod-pv-mask.is-open { opacity: 1; visibility: visible; transition: opacity .32s ease, visibility 0s; }
.prod-pv-box {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 420px;
max-height: 100%;
overflow-y: auto;
padding: 40px 30px 26px;
border-radius: 20px;
background: #fff;
text-align: center;
box-shadow: 0 24px 70px rgba(3,0,20,.35);
opacity: 0;
transform: translateY(30px) scale(.9);
transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
.prod-pv-mask.is-open .prod-pv-box { opacity: 1; transform: translateY(0) scale(1); }
.prod-pv-close {
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: #f2f4fa;
color: #666;
font-size: 24px;
line-height: 34px;
cursor: pointer;
transition: background .25s, color .25s, transform .3s;
}
.prod-pv-close:hover { background: #0e4081; color: #fff; transform: rotate(90deg); }
.prod-pv-box h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; line-height: 1.5; color: #030014; }
.prod-pv-box > p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.85; color: #666; }
.prod-pv-qr { padding: 12px; border-radius: 16px; border: 1px solid rgba(14,64,129,.12); background: #f7f9fc; }
.prod-pv-qr img { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; border-radius: 8px; }
.prod-pv-list { margin: 16px 0 0; padding: 0; list-style: none; text-align: left; }
.prod-pv-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0;
padding: 11px 0;
border-top: 1px solid #eef2f7;
list-style: none;
font-size: 13.5px;
line-height: 1.7;
}
.prod-pv-list .iconfont { flex: none; margin-top: 2px; font-size: 17px; line-height: 1.4; color: #0e4081; }
.prod-pv-k { flex: none; width: 46px; font-weight: 700; color: #8a94a6; }
.prod-pv-v { flex: 1 1 auto; min-width: 0; color: #333; word-break: break-all; }
a.prod-pv-v { color: #0e4081; font-weight: 700; text-decoration: none; transition: color .25s; }
a.prod-pv-v:hover { color: #0a2a5e; text-decoration: underline; }
.prod-pv-tip { display: block; margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: #888; }
.prod-pv-open { cursor: pointer; }
@media screen and (max-width: 480px) {
.prod-pv-mask { padding: 16px; }
.prod-pv-box { max-width: 100%; padding: 34px 18px 20px; border-radius: 16px; }
.prod-pv-box h3 { font-size: 18px; }
.prod-pv-box > p { font-size: 13px; margin-bottom: 14px; }
.prod-pv-qr { padding: 10px; border-radius: 12px; }
.prod-pv-qr img { max-width: 176px; }
.prod-pv-list { margin-top: 14px; }
.prod-pv-list li { gap: 8px; padding: 10px 0; font-size: 13px; }
.prod-pv-k { width: 40px; }
.prod-pv-tip { font-size: 12px; }
.prod-pv-close { width: 40px; height: 40px; line-height: 38px; }
}
/* =====================================================================
===== 首页整站重设计（index.html） =====
全部挂在 .hp-page 下，不外溢到其它页面。视觉语言沿用 geo 那一套：
品牌蓝 #0e4081、边框 #e8ecf1、悬浮 #c9d8ee、静止态零透明度阴影、
悬浮 translateY(-5px) + 0 15px 60px rgba(14,64,129,.13)、alt 分区 #f7f9fc。
列数按后台实测条数配平，任何一档都不会排出缺角的最后一行：
关于入口 4 / 优势 chips 4 / 服务 6 / 产品 8 / 案例 3 /
方案 5 个栏目 + 1 张固定的「查看全部」入口卡 = 6 /
资质 2（线上 3）/ 流程 5 / 文章 6 / 数据带 4。
===================================================================== */
/* --- 骨架 --- */
/* 两级选择器：压过后加载的 reset.css .containe{max-width:1600px} 与 response.css 的边距 */
.hp-page .hp-wrap { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
.hp-page .sv-section { padding: 92px 0; }
.hp-page .hp-more { text-align: center; margin-top: 44px; }
.hp-page .hp-more .geo-btn-dark { min-width: 210px; }
/* --- 站点主张 + 数据带 --- */
.hp-page .hp-lead {
padding: 74px 0 66px;
background: linear-gradient(180deg, #f7f9fd 0%, #ffffff 68%);
text-align: center;
}
.hp-page .hp-lead-title {
max-width: 1000px;
margin: 0 auto 20px;
font-size: 38px;
font-weight: 700;
line-height: 1.45;
letter-spacing: -.6px;
color: #030014;
}
.hp-page .hp-lead-sub {
max-width: 920px;
margin: 0 auto;
font-size: 15px;
line-height: 2.05;
color: #5a6472;
}
.hp-page .hp-stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 44px auto 0;
padding: 38px 0 0;
border-top: 1px solid #eaeef5;
list-style: none;
}
.hp-page .hp-stat {
/* 4 项等分：靠 flex-basis 0 + grow 平分，条数变了也永远铺满一行 */
flex: 1 1 0;
min-width: 0;
margin: 0;
padding: 0 12px;
list-style: none;
text-align: center;
}
.hp-page .hp-stat + .hp-stat { border-left: 1px solid #eaeef5; }
.hp-page .hp-stat .num {
font-size: 42px;
font-weight: 800;
line-height: 1;
letter-spacing: -1px;
color: #0e4081;
}
.hp-page .hp-stat .num em {
margin-left: 3px;
font-size: 19px;
font-style: normal;
font-weight: 700;
}
.hp-page .hp-stat .label {
margin-top: 11px;
font-size: 13.5px;
line-height: 1.6;
color: #7b8798;
}
.hp-page .hp-lead-btns {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin-top: 38px;
}
.hp-page .hp-lead-btns .geo-btn-primary,
.hp-page .hp-lead-btns .geo-btn-dark { gap: 8px; }
.hp-page .hp-lead-btns .iconfont { font-size: 19px; line-height: 1; }
/* --- 关于树叶科技 --- */
.hp-page .hp-about-grid { display: flex; gap: 56px; align-items: stretch; }
.hp-page .hp-about-txt { flex: 1 1 56%; min-width: 0; }
.hp-page .hp-about-txt > p {
margin: 0 0 16px;
font-size: 15px;
line-height: 2.05;
color: #555;
}
.hp-page .hp-chips {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}
.hp-page .hp-chips > li {
margin: 0;
padding: 15px 17px;
list-style: none;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 12px;
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hp-page .hp-chips > li:hover {
transform: translateY(-3px);
border-color: #c9d8ee;
box-shadow: 0 12px 40px rgba(14,64,129,.10);
}
.hp-page .hp-chip-k {
display: block;
margin-bottom: 5px;
font-size: 14.5px;
font-weight: 700;
line-height: 1.5;
color: #0e4081;
}
.hp-page .hp-chip-v { display: block; font-size: 13px; line-height: 1.78; color: #7b8798; }
.hp-page .hp-about-links { display: flex; gap: 12px; margin-top: 26px; }
.hp-page .hp-about-links a {
/* 4 个入口等分一行：flex 平分而不是 auto 宽，换行/缺角都不会出现 */
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 13px 8px;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 12px;
text-align: center;
text-decoration: none;
transition: background .28s ease, border-color .28s ease, transform .28s ease;
}
.hp-page .hp-about-links a:hover {
transform: translateY(-3px);
border-color: #0e4081;
background: #0e4081;
}
.hp-page .hp-al-n {
display: block;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .5px;
line-height: 1.5;
text-transform: uppercase;
color: #a3aec2;
transition: color .28s ease;
}
.hp-page .hp-al-t {
display: block;
font-size: 14.5px;
font-weight: 600;
line-height: 1.5;
color: #222;
transition: color .28s ease;
}
.hp-page .hp-about-links a:hover .hp-al-n { color: rgba(255,255,255,.66); }
.hp-page .hp-about-links a:hover .hp-al-t { color: #fff; }
/* 右侧品牌蓝数据信任面板：与旧 .about-panel 同一套配色，保持用户已认可的观感 */
.hp-page .hp-about-panel {
position: relative;
flex: 1 1 44%;
min-width: 0;
display: flex;
flex-direction: column;
border-radius: 18px;
overflow: hidden;
color: #fff;
background: linear-gradient(150deg, #2563eb 0%, #1e40af 55%, #172554 100%);
box-shadow: 0 20px 50px rgba(37,99,235,.28);
}
.hp-page .hp-about-panel::before {
content: "";
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
.hp-page .hp-panel-hero {
position: relative;
padding: 38px 32px 30px;
border-bottom: 1px solid rgba(255,255,255,.16);
}
.hp-page .hp-hero-num { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.hp-page .hp-hero-num i { margin-left: 6px; font-size: 22px; font-style: normal; font-weight: 600; opacity: .9; }
.hp-page .hp-hero-label { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.85); }
.hp-page .hp-hero-range {
display: inline-block;
margin-top: 16px;
padding: 6px 16px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 999px;
background: rgba(255,255,255,.12);
font-size: 13px;
letter-spacing: 2px;
}
.hp-page .hp-panel-stats { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); }
.hp-page .hp-pstat { padding: 22px 28px; border-top: 1px solid rgba(255,255,255,.14); }
.hp-page .hp-pstat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); }
.hp-page .hp-pstat:nth-child(-n+2) { border-top: none; }
.hp-page .hp-pstat b { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; }
.hp-page .hp-pstat span { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.75); }
.hp-page .hp-pstat em {
display: block;
margin-top: 6px;
font-size: 12px;
font-style: normal;
line-height: 1.5;
color: rgba(255,255,255,.55);
}
.hp-page .hp-panel-foot {
position: relative;
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 16px 28px;
border-top: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.10);
font-size: 13px;
color: rgba(255,255,255,.85);
}
.hp-page .hp-panel-foot .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #7dd3fc; }
.hp-page .hp-panel-foot .line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(125,211,252,.6), rgba(255,255,255,.15));
}
/* --- 通用卡片栅格 --- */
.hp-page .hp-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
/* common.css 给所有 ul 加了 overflow:hidden，会把卡片悬浮光晕沿网格四边切成直线 */
overflow: visible;
counter-reset: hpnum;
}
.hp-page .hp-grid-3 > .hp-card { width: calc((100% - 48px) / 3); }
.hp-page .hp-grid-4 > .hp-card { width: calc((100% - 72px) / 4); }
.hp-page .hp-card {
position: relative;
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
counter-increment: hpnum;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 16px;
overflow: hidden;
/* 静止态零阴影（透明零值而非 none，hover 才能平滑插值） */
box-shadow: 0 0 0 rgba(14,64,129,0);
/* .sv-reveal 由 JS 加在同一元素上，这里把 opacity/transform 一并接管，
入场与悬浮共用一条 transition，不会互相打断 */
transition: opacity .55s ease,
transform .55s cubic-bezier(.22,1,.36,1),
box-shadow .3s ease,
border-color .3s ease;
}
.hp-page .hp-card:hover {
/* 抬到兄弟卡片之上，否则光圈被 DOM 顺序靠后的卡片白底盖出一条硬切边。
(0,3,0) 压得过 .sv-reveal.is-in 的 transform:none (0,2,0) */
z-index: 2;
transform: translateY(-5px);
border-color: #c9d8ee;
box-shadow: 0 15px 60px rgba(14,64,129,.13);
/* 悬浮走短时长，入场那条 .55s 只用于滚动揭示 */
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* 同一行卡片错峰入场；transition 简写会把 hover 的 delay 归零，不影响手感 */
.hp-page .hp-grid > .hp-card:nth-child(2) { transition-delay: .07s; }
.hp-page .hp-grid > .hp-card:nth-child(3) { transition-delay: .14s; }
.hp-page .hp-grid > .hp-card:nth-child(4) { transition-delay: .21s; }
.hp-page .hp-card > a {
display: flex;
flex-direction: column;
height: 100%;
padding: 30px 26px 26px;
color: inherit;
text-decoration: none;
}
/* 编号牌：走 CSS 计数器，后台增删栏目自动重排，不用在模板里手写序号 */
.hp-page .hp-plate {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, #f4f8fd 0%, #e7eef9 52%, #dbe6f6 100%);
}
.hp-page .hp-plate::before {
content: counter(hpnum, decimal-leading-zero);
font-size: 19px;
font-weight: 800;
line-height: 1;
letter-spacing: -.5px;
color: rgba(14,64,129,.58);
}
/* 解决方案卡换成实心蓝牌，和上面服务区的浅牌区分开，避免三段栅格长得一模一样 */
.hp-page .hp-sol-card .hp-plate { background: linear-gradient(135deg, #0e4081 0%, #1d4ed8 100%); }
.hp-page .hp-sol-card .hp-plate::before { color: rgba(255,255,255,.94); }
/* 第 6 格「查看全部」入口卡：它不是第 6 个方案，所以不参与编号（否则会印出 06），
牌头换成箭头，底色加一层极淡的蓝，让人一眼看出这是入口不是内容。
counter-increment 能压住 .hp-card 那条，是因为两条权重相同而这条在文件里更靠后。 */
.hp-page .hp-sol-more {
counter-increment: none;
background: linear-gradient(165deg, #f8fbfe 0%, #edf3fc 100%);
}
.hp-page .hp-sol-more .hp-plate::before { content: '\2192'; font-size: 23px; letter-spacing: 0; }
.hp-page .hp-card-kicker {
display: block;
margin-top: 18px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .7px;
line-height: 1.5;
text-transform: uppercase;
color: #a3aec2;
}
.hp-page .hp-card-title {
display: block;
margin-top: 8px;
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: #111;
transition: color .25s ease;
}
.hp-page .hp-card:hover .hp-card-title { color: #0e4081; }
.hp-page .hp-card-desc {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 12px;
font-size: 13.5px;
line-height: 1.9;
color: #6b7684;
}
.hp-page .hp-card-more {
display: flex;
align-items: center;
gap: 6px;
/* margin-top:auto：同一行卡片被 stretch 拉成等高后，这行永远齐在底边 */
margin-top: auto;
padding-top: 18px;
border-top: 1px solid #f0f3f8;
font-size: 13px;
font-weight: 600;
color: #0e4081;
opacity: .74;
transition: opacity .25s ease, gap .25s ease;
}
.hp-page .hp-card-more i { font-style: normal; font-size: 15px; line-height: 1; }
.hp-page .hp-card:hover .hp-card-more { opacity: 1; gap: 10px; }
/* --- GEO 深色带 --- */
.hp-page .hp-geo {
position: relative;
overflow: hidden;
padding: 96px 0;
background: #030014;
color: #fff;
}
.hp-page .hp-geo-blur { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; }
/* 复用 .sv-blob 的漂移，但底色是近黑，原来的 .38/.34 会糊成一片，压到 .22/.18 */
.hp-page .hp-geo-blur .sv-blob-1 { opacity: .22; }
.hp-page .hp-geo-blur .sv-blob-2 { opacity: .18; }
.hp-page .hp-geo-inner { position: relative; z-index: 1; display: flex; gap: 60px; align-items: center; }
.hp-page .hp-geo-txt { flex: 1 1 54%; min-width: 0; }
.hp-page .hp-geo-kicker { margin-bottom: 14px; text-align: left; color: #7ee0ff; }
.hp-page .hp-geo-txt h2 {
margin: 0 0 20px;
font-size: 36px;
font-weight: 700;
line-height: 1.36;
letter-spacing: -.6px;
color: #fff;
}
.hp-page .hp-geo-txt > p { margin: 0 0 14px; font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.72); }
.hp-page .hp-geo-points {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 13px 24px;
margin: 24px 0 0;
padding: 0;
list-style: none;
}
.hp-page .hp-geo-points li {
position: relative;
margin: 0;
padding-left: 20px;
list-style: none;
font-size: 13.5px;
line-height: 1.8;
color: rgba(255,255,255,.82);
}
.hp-page .hp-geo-points li::before {
content: "";
position: absolute;
top: 9px; left: 0;
width: 7px; height: 7px;
border-radius: 50%;
background: #00fff0;
box-shadow: 0 0 10px rgba(0,255,240,.7);
}
.hp-page .hp-geo-side { flex: 1 1 46%; min-width: 0; }
.hp-page .hp-geo-card {
padding: 26px 26px 22px;
border: 1px solid rgba(255,255,255,.14);
border-radius: 18px;
background: rgba(255,255,255,.06);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.hp-page .hp-geo-q {
display: block;
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,.12);
font-size: 15px;
font-weight: 600;
line-height: 1.75;
color: #fff;
}
.hp-page .hp-geo-q::before {
content: "用户提问";
display: inline-block;
margin-right: 10px;
padding: 3px 10px;
border-radius: 999px;
background: rgba(0,255,240,.16);
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
line-height: 1.7;
color: #7ef3ea;
vertical-align: 2px;
}
.hp-page .hp-geo-a { display: block; font-size: 13.5px; line-height: 1.95; color: rgba(255,255,255,.78); }
.hp-page .hp-geo-a b { font-weight: 700; color: #fff; }
.hp-page .hp-geo-src {
display: block;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed rgba(255,255,255,.18);
font-size: 12px;
letter-spacing: .4px;
color: #7ee0ff;
}
.hp-page .hp-geo-btn { width: 100%; margin-top: 22px; gap: 8px; }
.hp-page .hp-geo-btn i { font-style: normal; font-size: 16px; line-height: 1; }
/* --- 成品软件：4 列，顶部渐变牌头 ---
a 自身不留 padding，牌头渐变才能通到卡片边；内边距全部交给 .hp-prod-body，
这样各断点只要改一处。body 同时是竖排 flex 容器，
.hp-card-more 的 margin-top:auto 才有地方生效、把「预约演示」钉在底边。 */
.hp-page .hp-prod-card > a { padding: 0; }
.hp-page .hp-prod-top {
display: flex;
flex: none;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 22px;
height: 106px;
background: linear-gradient(135deg, #f4f8fd 0%, #e7eef9 52%, #dbe6f6 100%);
}
.hp-page .hp-prod-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
/* 上 20px 接回牌头原来的 margin-bottom，加上标题自带的 8px 共 28px */
padding: 20px 22px 22px;
}
.hp-page .hp-prod-tag {
max-width: 58%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px 12px;
border-radius: 999px;
background: rgba(14,64,129,.09);
font-size: 12px;
font-weight: 700;
letter-spacing: .3px;
color: #0e4081;
}
.hp-page .hp-prod-card .hp-card-kicker { margin-top: 7px; }
.hp-page .hp-prod-term {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 13px;
font-size: 13px;
line-height: 1.85;
color: #6b7684;
}
/* --- 客户案例：3 列，封面走 1:1 + contain 不裁切 --- */
.hp-page .hp-case-card > a { padding: 0; }
.hp-page .hp-case-shot {
display: block;
position: relative;
/* 1:1 跟 /case/ 列表页对齐：后台封面是 1000x1000 与 1000x637 混着的，
方窗 + contain 让方图像素级铺满（零裁切零留白），宽截图改成上下各留一条底色。
换 cover 的话方图会被竖向切掉、宽截图会被横向切掉，都丢内容。
原先这里写的是 4:3，理由是「首页卡片小，方图太占竖向空间」——
但 3 列一直到 768 才降单列，卡片最窄也有 224px，方图完全放得下，
而 4:3 会把方图上下各切掉 12.5%，用户点名要「正方形显示完整」。 */
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f0f4f8;
}
.hp-page .hp-case-shot img {
display: block;
width: 100%;
height: 100%;
border: 0;
object-fit: contain;
transition: transform .45s ease;
}
.hp-page .hp-case-card:hover .hp-case-shot img { transform: scale(1.03); }
.hp-page .hp-case-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 0; }
.hp-page .hp-case-body .hp-card-kicker { margin-top: 0; }
/* 案例标题强制一行：三张卡原本一张 1 行、两张 2 行（768 下甚至是 1 行 + 3 行），
同一行的 desc 和「查看案例详情」被顶到不同高度，看着就是歪的。
案例标题是「【外贸网站建设】深圳市金盈丰电子科技有限公司」这类长句，
截成省略号跟新闻标题一个道理；服务/产品/方案那几组是短栏目名，
截了会丢意思（实测它们本来就恒为 1 行），所以这条只挂在案例卡上。
选择器多带一层 .hp-case-body 是为了压过基础规则 .hp-page .hp-card-title。 */
.hp-page .hp-case-body .hp-card-title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* CTA 上下各 18px：案例卡的 是 padding:0（好让方形封面铺到边），
而 .hp-case-body 的下内边距也是 0，结果「查看案例详情」只剩 1px 就贴到卡片底边——
同一页其它卡实测 svc/sol 27px、prod 23px，只有案例卡是 1px，看着就是掉下去了。
别指望 margin-top:auto 来居中：实测每种卡 slack 都是 0（三张案例卡内容等高，
行高就等于内容高），auto 算出来是 0px，压根没有可分配的空间。
所以只能用对称的 padding 把空间造出来：文字在「分隔线 ↔ 卡片底边」之间正好居中，
18px 也跟基础规则的 padding-top 对齐。
margin-bottom 刻意留 0 不留 auto——万一以后 CMS 描述长短不一让某一行真出现 slack，
margin-top:auto 还能把三张卡的 CTA 一起钉在底边保持对齐。 */
.hp-page .hp-case-card .hp-card-more { margin: auto 22px 0; padding: 18px 0; }
/* --- 实力佐证：资质荣誉 + 开发流程 --- */
.hp-page .hp-proof-grid { display: flex; gap: 28px; align-items: stretch; }
.hp-page .hp-proof-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
padding: 30px 30px 26px;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 18px;
}
.hp-page .hp-proof-h {
margin: 0 0 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eef2f7;
font-size: 19px;
font-weight: 700;
line-height: 1.5;
color: #111;
}
.hp-page .hp-proof-h::before {
content: "";
display: inline-block;
width: 4px; height: 16px;
margin-right: 10px;
border-radius: 2px;
background: #0e4081;
vertical-align: -2px;
}
/* 固定每行 2 张：6 张证书排成整齐的 3 行。
原来写的是 flex:1 1 0 + min-width:96px，靠 min-width 反推每行几张 ——
实测 1920 下栏内可用宽 569px，6 张会算成 4+2，正是用户明令禁止的残行。
改成百分比 basis 后每行恒为 2 张，跟张数无关。
max-width 是给奇数张兜底的：万一张数变成 5 或 7，最后那张只会占半宽，
配合 strip 的 justify-content:center 居中，不会被 flex-grow 拉成整行宽的大块头。
calc(50% - 7px) 这个值线上已验证过（≤767 档一直在用，324px 栏内两张各 155px，
155*2+14 正好等于栏宽，不会因为四舍五入多挤出一行）。 */
.hp-page .hp-cert-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hp-page .hp-cert {
flex: 1 1 calc(50% - 7px);
max-width: calc(50% - 7px);
min-width: 0;
display: block;
overflow: hidden;
border: 1px solid #e8ecf1;
border-radius: 12px;
background: #fbfcfe;
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hp-page .hp-cert:hover {
z-index: 2;
transform: translateY(-4px);
border-color: #c9d8ee;
box-shadow: 0 12px 40px rgba(14,64,129,.12);
}
.hp-page .hp-cert img {
display: block;
width: 100%;
/* 线上 scode 23 实测 6 张（2026-09-12 上传）：营业执照 1000x726 是横版，
另外 5 张软著/商标证书全是竖版 —— 742x999、739x1000、732x999、703x1000、732x1000。
所以这里原先写死的 800/565（横版 1.416）连同「证书原图 800x565」那句注释都已经失真：
竖版图塞进横版窗，contain 之后左右各留一大条白，看着像没加载完。
改 4/3 是折中：横版执照 277x208 里渲染 277x201（上下各 3px，几乎像素级铺满），
竖版渲染 152x208 居中，两侧白边对称，读作装裱留白而不是残缺。
想给竖版开 3/4 的窗得让格子涨到 370px 高、整栏破 1200px，
隔壁开发流程列要被拉出 500px 空洞，代价比留白大得多。
max-height 只在 768–992 竖排档咬：那时栏是全宽，格子会算到 439x329，
三行就把这一块顶到 1180px 高；封顶 220 之后回到 3x220，1920/1200 下不受影响
（277x208、247x186 都在封顶以下）。 */
aspect-ratio: 4 / 3;
max-height: 220px;
border: 0;
object-fit: contain;
background: #fff;
}
/* .hp-proof-grid 是 align-items:stretch，两栏等高由高的那栏决定。
资质荣誉改成 3 行证书之后自然高约 817px，开发流程只有 643px，
被拉伸后多出来的 170px 原本会被 .hp-proof-link 的 margin-top:auto 吞掉，
表现成「列表和底部链接之间一大块空白」—— 框没排满。
让列表自己生长吃掉这段高度，5 个步骤等分，链接的 auto 外边距自然归零。
竖排档（≤992）里栏高是按内容算的、没有剩余空间可分，这几条不产生任何效果。 */
.hp-page .hp-flow {
flex: 1 1 auto;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.hp-page .hp-flow > li {
/* align-content:center 必须写：li 是 flex-wrap 的两行结构（编号+标题 / 描述），
默认 align-content 是 stretch，行被拉高之后标题行和描述行会朝两头分开，
中间裂开一道大缝。center 让两行作为整体居中，行内间距维持原样。 */
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: 14px;
margin: 0;
padding: 13px 0;
border-top: 1px solid #f0f3f8;
list-style: none;
}
.hp-page .hp-flow > li:first-child { padding-top: 0; border-top: 0; }
.hp-page .hp-flow-n {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 10px;
background: linear-gradient(135deg, #f4f8fd 0%, #dbe6f6 100%);
font-size: 13px;
font-weight: 800;
letter-spacing: -.3px;
color: #0e4081;
}
.hp-page .hp-flow-t { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; color: #111; }
/* 描述独占一行并缩进到标题下方，比和标题挤在一行好读 */
.hp-page .hp-flow-d { flex: 1 1 100%; padding-left: 48px; font-size: 13px; line-height: 1.8; color: #7b8798; }
.hp-page .hp-proof-link {
display: inline-flex;
align-items: center;
gap: 6px;
/* margin-top:auto：两列内容长短不一，链接仍然齐在底边 */
margin-top: auto;
padding-top: 22px;
font-size: 13.5px;
font-weight: 600;
color: #0e4081;
text-decoration: none;
transition: gap .25s ease;
}
.hp-page .hp-proof-link i { font-style: normal; font-size: 15px; line-height: 1; }
.hp-page .hp-proof-link:hover { gap: 10px; text-decoration: underline; }
/* --- 文章 & 公告 --- */
.hp-page .hp-news-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
overflow: visible;
}
.hp-page .hp-news-list > li {
width: calc((100% - 48px) / 3);
min-width: 0;
margin: 0;
padding: 0;
list-style: none;
}
.hp-page .hp-news-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 24px 24px 22px;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 16px;
color: inherit;
text-decoration: none;
box-shadow: 0 0 0 rgba(14,64,129,0);
transition: opacity .55s ease,
transform .55s cubic-bezier(.22,1,.36,1),
box-shadow .3s ease,
border-color .3s ease;
}
.hp-page .hp-news-card:hover {
z-index: 2;
transform: translateY(-5px);
border-color: #c9d8ee;
box-shadow: 0 15px 60px rgba(14,64,129,.13);
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hp-page .hp-news-list > li:nth-child(2) .hp-news-card { transition-delay: .07s; }
.hp-page .hp-news-list > li:nth-child(3) .hp-news-card { transition-delay: .14s; }
.hp-page .hp-news-date {
align-self: flex-start;
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 7px 13px;
border-radius: 10px;
background: #f4f8fd;
}
.hp-page .hp-news-date .d { font-size: 19px; font-weight: 800; line-height: 1; color: #0e4081; }
.hp-page .hp-news-date .ym { font-size: 11.5px; line-height: 1; color: #8494ab; }
.hp-page .hp-news-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 16px;
font-size: 16px;
font-weight: 600;
line-height: 1.62;
color: #111;
transition: color .25s ease;
}
.hp-page .hp-news-card:hover .hp-news-title { color: #0e4081; }
.hp-page .hp-news-desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-top: 10px;
font-size: 13px;
line-height: 1.85;
color: #7b8798;
}
.hp-page .hp-news-arrow {
align-self: flex-end;
display: flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
/* margin-top:auto + align-self:flex-end：贴到卡片右下角，两行标题与一行标题都对齐 */
margin-top: auto;
border: 1px solid #e8ecf1;
border-radius: 50%;
font-size: 14px;
line-height: 1;
color: #a3aec2;
transition: background .28s ease, border-color .28s ease, color .28s ease, transform .28s ease;
}
.hp-page .hp-news-card:hover .hp-news-arrow {
background: #0e4081;
border-color: #0e4081;
color: #fff;
transform: translateX(3px);
}
/* --- 联系我们 --- */
.hp-page .hp-contact-box { display: flex; gap: 28px; align-items: stretch; }
.hp-page .hp-contact-info,
.hp-page .hp-contact-card {
min-width: 0;
padding: 36px 36px 32px;
background: #fff;
border: 1px solid #e8ecf1;
border-radius: 18px;
}
.hp-page .hp-contact-info { flex: 1 1 52%; }
.hp-page .hp-contact-card { flex: 1 1 48%; }
.hp-page .hp-info-block { padding: 18px 0; border-top: 1px solid #eef2f7; }
.hp-page .hp-info-block:first-child { padding-top: 0; border-top: 0; }
.hp-page .hp-info-block h4 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
color: #0e4081;
}
.hp-page .hp-info-block p { margin: 0 0 6px; font-size: 14px; line-height: 1.95; color: #5a6472; }
.hp-page .hp-info-block p:last-child { margin-bottom: 0; }
.hp-page .hp-info-block a { font-weight: 600; color: #0e4081; text-decoration: none; transition: color .25s ease; }
.hp-page .hp-info-block a:hover { color: #0a2a5e; text-decoration: underline; }
.hp-page .hp-call-btn { width: 100%; margin-top: 26px; }
.hp-page .hp-contact-card h4 { margin: 0 0 8px; font-size: 22px; font-weight: 700; line-height: 1.45; color: #111; }
.hp-page .hp-contact-tip { margin: 0 0 24px; font-size: 13.5px; line-height: 1.7; color: #7b8798; }
.hp-page .hp-form-item { margin-bottom: 14px; }
.hp-page .hp-form input,
.hp-page .hp-form textarea {
display: block;
width: 100%;
padding: 13px 16px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fbfcfe;
font-size: 14px;
font-family: inherit;
line-height: 1.6;
color: #222;
outline: none;
box-sizing: border-box;
transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.hp-page .hp-form input:focus,
.hp-page .hp-form textarea:focus {
border-color: #0e4081;
background: #fff;
box-shadow: 0 0 0 3px rgba(14,64,129,.08);
}
.hp-page .hp-form textarea { min-height: 104px; resize: vertical; line-height: 1.8; }
.hp-page .hp-form-code { display: flex; gap: 12px; align-items: stretch; }
.hp-page .hp-form-code input { flex: 1 1 auto; min-width: 0; }
/* 120x45 是 core/code.php 里写死的出图尺寸，按原比例给框，图不会被拉伸 */
.hp-page .hp-code-img {
flex: none;
width: 120px;
height: 45px;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #fff;
cursor: pointer;
object-fit: cover;
align-self: center;
}
.hp-page .hp-submit-btn {
display: block;
width: 100%;
margin-top: 20px;
padding: 0 24px;
height: 51px;
border: 0;
border-radius: 14px;
background: #0e4081;
font-size: 16px;
font-weight: 700;
font-family: inherit;
color: #fff;
cursor: pointer;
transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.hp-page .hp-submit-btn:hover {
background: #0a2a5e;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(14,64,129,.3);
}
/* --- 微信扫码弹窗：与 .geo-wx-mask 同一套动效 --- */
.hp-wx-mask {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(3,0,20,.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
opacity: 0;
visibility: hidden;
/* 打开时 visibility 立刻翻转，关闭时等淡出走完再隐藏 */
transition: opacity .32s ease, visibility 0s linear .32s;
}
.hp-wx-mask.is-open { opacity: 1; visibility: visible; transition: opacity .32s ease, visibility 0s; }
.hp-wx-box {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 380px;
max-height: 100%;
overflow-y: auto;
padding: 40px 30px 28px;
border-radius: 20px;
background: #fff;
text-align: center;
box-shadow: 0 24px 70px rgba(3,0,20,.35);
opacity: 0;
transform: translateY(30px) scale(.9);
transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .28s ease;
}
.hp-wx-mask.is-open .hp-wx-box { opacity: 1; transform: translateY(0) scale(1); }
.hp-wx-close {
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
padding: 0;
border: none;
border-radius: 50%;
background: #f2f4fa;
color: #666;
font-size: 24px;
line-height: 34px;
cursor: pointer;
transition: background .25s, color .25s, transform .3s;
}
.hp-wx-close:hover { background: #0e4081; color: #fff; transform: rotate(90deg); }
.hp-wx-box h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; line-height: 1.5; color: #030014; }
.hp-wx-box > p { margin: 0 0 18px; font-size: 13.5px; line-height: 1.85; color: #666; }
.hp-wx-qr { padding: 12px; border: 1px solid rgba(14,64,129,.12); border-radius: 16px; background: #f7f9fc; }
.hp-wx-qr img { display: block; width: 100%; max-width: 210px; height: auto; margin: 0 auto; border-radius: 8px; }
.hp-wx-tip { display: block; margin-top: 14px; font-size: 12.5px; line-height: 1.7; color: #888; }
.hp-wx-tel { margin-top: 10px; font-size: 13.5px; color: #555; }
.hp-wx-tel a { font-weight: 700; color: #0e4081; text-decoration: none; }
.hp-wx-tel a:hover { text-decoration: underline; }
.hp-wx-open { cursor: pointer; }
/* ===== 首页响应式 =====
断点跟全站一致：1199 / 992 / 767 / 479。
每一档都重新配平列数，绝不让最后一行只剩一张卡。 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
.hp-page .hp-wrap { padding: 0 24px; }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
.hp-page .hp-wrap { padding: 0 30px; }
}
@media screen and (max-width: 1199px) {
.hp-page .sv-section { padding: 74px 0; }
.hp-page .hp-lead { padding: 58px 0 52px; }
.hp-page .hp-lead-title { font-size: 31px; }
.hp-page .hp-about-grid { gap: 36px; }
.hp-page .hp-geo { padding: 74px 0; }
.hp-page .hp-geo-inner { gap: 38px; }
.hp-page .hp-geo-txt h2 { font-size: 30px; }
/* 8 个产品：4 列在 1024 下每张只剩 ~215px，英文副名被切掉 4 个，改 2 列（4 行整除）。
这里刻意不学 /product/ 翻成「左牌头右正文」：那边牌头放的是产品截图，
首页牌头只有一个 52px 编号牌 + 分类胶囊，40% 宽全是空渐变；
实测翻横排后 992 下切 2/8 个英文副名、768 下牌头只剩 138px 要切 5/8。
竖排时正文最窄也有 304px，8 个全放得下。 */
.hp-page .hp-grid-4 > .hp-card { width: calc((100% - 24px) / 2); }
/* 2 列后单张宽到 348~558px，106px 的牌头会细成一条，按比例加高 */
.hp-page .hp-prod-top { height: 132px; }
.hp-page .hp-prod-body { padding: 22px 24px 24px; }
.hp-page .hp-hero-num { font-size: 54px; }
}
@media screen and (max-width: 992px) {
/* 卡片栅格（服务 6 / 方案 5 / 案例 3 / 文章 6）保持 3 列一直到 768：
992 下每张 ~298px、768 下 ~224px 都够用。
降成 2 列会剩单张，降成 1 列更糟 —— 992 下案例卡宽 944px，
4:3 的 contain 封面直接顶到 ~708px 高。 */
.hp-page .hp-about-grid { flex-direction: column; gap: 30px; }
/* 子项原本是百分比 flex-basis（.hp-proof-col 更是 1 1 0），
那是给横排用的；翻成竖排后 basis 作用到高度上，1 1 0 还会把内容高度算没，
所以一律改回 flex:none + 满宽，让每块按自己的内容撑高。 */
.hp-page .hp-about-txt,
.hp-page .hp-about-panel,
.hp-page .hp-geo-txt,
.hp-page .hp-geo-side,
.hp-page .hp-proof-col,
.hp-page .hp-contact-info,
.hp-page .hp-contact-card { flex: none; width: 100%; }
.hp-page .hp-geo-inner { flex-direction: column; gap: 30px; align-items: stretch; }
.hp-page .hp-geo-points { grid-template-columns: 1fr; }
.hp-page .hp-proof-grid { flex-direction: column; gap: 20px; }
.hp-page .hp-contact-box { flex-direction: column; gap: 20px; }
}
@media screen and (max-width: 767px) {
.hp-page .hp-wrap { padding: 0 16px; }
.hp-page .sv-section { padding: 56px 0; }
.hp-page .hp-more { margin-top: 32px; }
.hp-page .hp-lead { padding: 44px 0 42px; }
.hp-page .hp-lead-title { font-size: 25px; line-height: 1.55; letter-spacing: 0; }
.hp-page .hp-lead-sub { font-size: 14px; line-height: 1.95; }
.hp-page .hp-stats { margin-top: 32px; padding-top: 28px; }
.hp-page .hp-stat { flex: 1 1 40%; padding: 6px 4px; }
/* 4 项数据在窄屏排 2x2，分隔线只留横向，竖线会切到第二行 */
.hp-page .hp-stat + .hp-stat { border-left: 0; }
.hp-page .hp-stat:nth-child(n+3) { border-top: 1px solid #eaeef5; }
.hp-page .hp-stat:nth-child(2n) { border-left: 1px solid #eaeef5; }
.hp-page .hp-stat .num { font-size: 30px; }
.hp-page .hp-stat .num em { font-size: 15px; }
.hp-page .hp-stat .label { margin-top: 7px; font-size: 12.5px; }
.hp-page .hp-lead-btns { gap: 12px; margin-top: 28px; }
.hp-page .hp-lead-btns .geo-btn-primary,
.hp-page .hp-lead-btns .geo-btn-dark { flex: 1 1 100%; }
.hp-page .hp-about-txt > p { font-size: 14px; line-height: 1.95; }
.hp-page .hp-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.hp-page .hp-chips > li { padding: 13px 14px; }
.hp-page .hp-about-links { flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.hp-page .hp-about-links a { flex: 1 1 calc(50% - 5px); }
.hp-page .hp-panel-hero { padding: 28px 22px 24px; }
.hp-page .hp-hero-num { font-size: 46px; }
.hp-page .hp-pstat { padding: 18px 20px; }
.hp-page .hp-pstat b { font-size: 25px; }
.hp-page .hp-panel-foot { padding: 14px 20px; font-size: 12px; }
/* 所有栅格一律单列：条数是多少都能整除，不存在缺角 */
.hp-page .hp-grid { gap: 16px; }
.hp-page .hp-grid-3 > .hp-card,
.hp-page .hp-grid-4 > .hp-card { width: 100%; }
.hp-page .hp-card > a { padding: 24px 20px 20px; }
.hp-page .hp-card-title { font-size: 18px; }
.hp-page .hp-geo { padding: 56px 0; }
.hp-page .hp-geo-kicker { text-align: center; }
.hp-page .hp-geo-txt h2 { font-size: 25px; }
.hp-page .hp-geo-txt > p { font-size: 14px; line-height: 1.95; }
.hp-page .hp-geo-card { padding: 22px 20px 18px; }
/* padding:0 是为了压住上面 .hp-card > a 那条 24px 20px 20px ——
两条权重相同，靠后的赢；不留 0 的话牌头渐变通不到卡片边 */
.hp-page .hp-prod-card > a { padding: 0; }
.hp-page .hp-prod-top { height: 92px; padding: 0 18px; }
.hp-page .hp-prod-body { padding: 18px; }
.hp-page .hp-case-card > a { padding: 0; }
.hp-page .hp-case-body { padding: 18px 18px 0; }
.hp-page .hp-case-card .hp-card-more { margin: auto 18px 0; }
.hp-page .hp-proof-col { padding: 24px 20px 20px; }
.hp-page .hp-flow-d { padding-left: 0; }
.hp-page .hp-news-list { gap: 16px; }
.hp-page .hp-news-list > li { width: 100%; }
.hp-page .hp-news-card { padding: 20px 18px 18px; }
.hp-page .hp-contact-info,
.hp-page .hp-contact-card { padding: 26px 20px 24px; }
.hp-page .hp-contact-card h4 { font-size: 19px; }
.hp-wx-mask { padding: 16px; }
.hp-wx-box { max-width: 100%; padding: 34px 18px 20px; border-radius: 16px; }
.hp-wx-box h3 { font-size: 18px; }
.hp-wx-box > p { font-size: 13px; margin-bottom: 14px; }
.hp-wx-qr { padding: 10px; border-radius: 12px; }
.hp-wx-qr img { max-width: 176px; }
}
@media screen and (max-width: 479px) {
.hp-page .hp-lead-title { font-size: 21px; }
.hp-page .hp-chips { grid-template-columns: 1fr; }
/* 320px 下英文副名会把 4 个入口撑破，只留中文 */
.hp-page .hp-al-n { display: none; }
.hp-page .hp-about-links a { padding: 11px 8px; }
.hp-page .hp-geo-txt h2 { font-size: 22px; }
.hp-page .hp-geo-q { font-size: 14px; }
.hp-page .hp-hero-num { font-size: 40px; }
.hp-page .hp-prod-top { height: 82px; }
.hp-page .hp-plate { width: 46px; height: 46px; border-radius: 12px; }
.hp-page .hp-form-code { flex-direction: column; }
.hp-page .hp-code-img { width: 120px; align-self: flex-start; }
}