@charset "utf-8";
* {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;}
body {
    font-family: Inter, Roboto, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: #333;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.76;
    background-color: #fff;
    max-width: 1920px;
    margin: 0 auto;
    min-width: 320px;
    letter-spacing: 0.01em;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 {font-weight: 600;}
h1 {font-size: 2.0rem;}
h2 {font-size: 1.25rem;}
h3 {font-size: 1.0rem;}
h4 {font-size: 1.0rem;}

img {display: inline-block;border: none;}

p{letter-spacing: 1px;word-spacing: 1px;text-align: justify;}
ul, ol, menu {list-style: none;margin: 0;padding: 0;}

a {
	color: #0056a8;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}

a, a:active, a:focus {outline: none;}

table {border-collapse: collapse;border-spacing: 0;}

blockquote, q {quotes: none;}

address, em, i {font-style: normal;}

abbr, acronym {font-variant: normal;}

hr{display: block;height: 1px;border: 0;border-top: 1px solid #cccccc;margin: 1em 0;padding: 0;}

fieldset, a img, iframe {border: 0 none;}

input, select, button {vertical-align: middle;-webkit-appearance: none;}

input, textarea, select {*font-size: 100%;-webkit-appearance: none;}

button {overflow: visible;}

button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=file] > input[type=button]::-moz-focus-inner {border: 0 none;padding: 0;}

:active {outline: 0 none;}

::selection {background: #009944;color: white;}

blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
input,a {outline: none;}
input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;border-radius: 0;}
input:-webkit-autofill {-webkit-box-shadow: 0px 0px 1000px white inset;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #bbbbbb;}
input:-moz-placeholder, textarea:-moz-placeholder {color: #bbbbbb;}
input::-moz-placeholder, textarea::-moz-placeholder {color: #bbbbbb;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color: #bbbbbb;}

.disnone{display: none;}
.clearfix {display: inline-block;zoom: 1;}
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: ".";
	clear: both;
	height: 0;
}
.imWrap {width: 100%;padding-top: 67%;position: relative;overflow: hidden}
.imWrap img {display: block;position: absolute;width: 100%;z-index: 5;left: 0;top: 0;height: auto;min-height: 100%}
.container {
    width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 10px;
}
.topbar {
	width: 100%;
	line-height: 18px;
	margin: 1.5% 0;
	clear: both;
	overflow: hidden;
}
.topbar .path {font-size: 0.875rem;color: #888;}
.topbar .path img {margin-right: 5px;}
.path .fa-home {
	width: 30px;
	height: 30px;
	border-radius: 100%;
	background: #eeeeee;
	color: #d60000;
	margin-right: 8px;
	display: inline-block;
	line-height: 30px;
	text-align: center;
	font-size: 1.125rem;
	display: none;
}

.path a {margin: 0 5px;color: #888;}
.list-paddingleft-2 {padding-left: 1.5em;padding-bottom:1.0em}
.lazy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.lazy-img.loaded {opacity: 1;}
/* --- 1. 头部导航 --- */
header.scrolled {
    background-color: #ffffff; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    color: #333; 
}
.headbox {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}


.logo .logo-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.logo .logo-container img{max-height: 80px;}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 导航链接样式适配 */
nav ul li {padding: 0 1.0rem;}
nav ul{display: flex;align-items: center;}
.nav-links li a {
    text-decoration: none;
    color: inherit;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s, opacity 0.3s;
    position: relative;
    display: inline-block;
}

.nav-links li a:hover {
    color: #0056a8;
    opacity: 1;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: #0056a8;
    transform: scaleX(0); 
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

.nav-links li a:hover::after {transform: scaleX(1);}
.nav-links li a.active::after {transform: scaleX(1);}
.nav-links li a.active {color: #0056a8;}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: inherit;
}


@media (max-width: 1024px) {
    nav ul li{padding:0 0.6rem;}
    .nav-links{gap: 10px;}
}

@media (max-width: 768px) {
    .navbar {
        display: flex;
        justify-content: space-between; 
        align-items: center;
        position: relative;
    }

    .logo {order: 1;margin-right: auto;}
    .logo .logo-container img{max-height: 50px;}
    .menu-toggle {display: block;order: 2;}
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
        gap: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        transform: translateY(-20px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 9;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .nav-links li a {color: #333;}
    header .navbar {
        flex-direction: row !important; 
        justify-content: space-between !important;
    }
}


.swiper-container {position: relative;width: 100%;height: 100%;}
.swiper-container .slide-grid{display: grid;place-items: center;overflow: hidden;}
.swiper-container .swiper-slide img {max-width: 100%;width: 100%;height: 100%;object-fit: cover;display: block;grid-area: 1 / 1;}
.slide-text {
  grid-area: 1 / 1; 
  z-index: 10;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px 30px;
  border-radius: 16px;
  max-width: 80%;
  text-align: center;
  animation: fadeInUp 0.8s ease-out forwards; 
}
.slide-text p {
    color: #fff;
    margin: 0 0 10px 0;
    font-size: clamp(1.125rem, 4vw, 2.25rem);
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-shadow:0 1px 0 #ccc,0 2px 0 #bbb,0 3px 0 #aaa,0 4px 6px rgba(0, 0, 0, 0.5);
}

.slide-text span {
    color: #fff;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.25;
    opacity: 0.9;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
@keyframes fadeInUp {
  from {opacity: 0;transform: translateY(20px);}
  to {opacity: 1;transform: translateY(0);}
}

.wrapper {max-width: 1400px;margin: 0 auto;padding: 0 10px;}


.index-about{width: 100%;max-width: 1400px;margin: 0 auto;}
.index-about-cont {
	overflow: hidden;
	margin-top: 3vw;
	background-color: #f4f4f4;
	background-image: url(../images/bg01.jpg);
	background-repeat: no-repeat;
	background-position: 0 bottom;
	background-size: auto auto
}
.index-about-box{display: flex;flex-direction: row-reverse;}
.about-icon{flex:45%;}
.about-img{margin-top: 1.5rem;}
.about-img img{width: 100%;padding:0 20px;}
.about-icon-cont{padding: 1.5rem;}
.about-text{flex:55%;}
.about-text-cont{line-height: 2.2;padding: 1.5rem;margin-bottom: 3vw;}
.about-text-cont h1{font-size:1.5rem;}
.about-text-cont p{font-size:0.875rem;}

@media (max-width: 768px) {.index-about-box{flex-direction: column-reverse;}}

.solutions-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    padding-top:20px;
    flex-grow: 1;
}

 /* 单个场景卡片 */
.solution-card {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    gap: 10px;
}

.solution-card:hover {
    background-color: #f0f7ff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 86, 168, 0.1);
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 60%;
    background-color: #0056a8;
    transform: translateY(-50%);
    transition: width 0.3s ease;
    border-radius: 0 4px 4px 0;
}

.solution-card:hover::before {
    width: 4px;
}

.solution-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    color: #0056a8;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f0fa;
    border-radius: 50%;
    flex-shrink: 0;
}

.solution-card:hover .solution-icon {
    transform: scale(1.1);
    background: #0056a8;
    color: #ffffff;
}

.icon-index-about{
    width: 30px;
    height: 30px;
    background-color: rgba(0, 86, 168, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.solution-card:hover .icon-index-about{background-color:#fff;}
.solution-card:nth-child(1) .icon-index-about {-webkit-mask-image: url(/skin/images/huanjinganquan.svg);}
.solution-card:nth-child(2) .icon-index-about {-webkit-mask-image: url(/skin/images/nengyuanzhiyao.svg);}
.solution-card:nth-child(3) .icon-index-about {-webkit-mask-image: url(/skin/images/nongmushipin.svg);}
.solution-card:nth-child(4) .icon-index-about {-webkit-mask-image: url(/skin/images/shihuagongye.svg);}

.solution-title {
    font-size: 1.0rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
}

.solution-desc {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4;
}

.solution-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

 /* 响应式调整 */
@media (max-width: 992px) {
    .solutions-area {
        height: auto;
        grid-template-columns:1fr;
        gap: 15px;
        background-color: transparent;
        padding: 15px 0;
    }

    .solution-card {border: 1px solid #eef2f7;}
}

@media (max-width: 768px) {
    .solutions-area{grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
    .solutions-area {grid-template-columns: 1fr;}
    .solution-card {
        flex-direction: row;
        text-align: left;
        padding: 15px 20px;
        justify-content: flex-start;
        gap: 20px;
    }

    .solution-icon {
        margin-bottom: 0;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .solution-content {align-items: flex-start;}
    .solution-card::before {
        height: 4px;
        width: 0;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .solution-card:hover::before {width: 100%;height: 4px;
    }
}


.index-products{width: 100%;display: block;max-width: 1400px;margin:4vw auto 0;}
.index-products .index-products-tit{padding: 1vw 0;text-align: center;}
.index-products .index-products-tit h2{font-size: 1.8rem;line-height: 2em;color: #333;letter-spacing: 2px;}
.index-products-row{display: flex;column-gap:2.0vw;margin-bottom: 2.5vw;}
.index-products-row a{
    flex: 1;
    display: block;
    cursor: pointer;
    padding: 5px 0;
    background-color: #f6f6f6;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index-products-row a:hover{background-color:#0056a8;}
.index-products-row a h3{font-size:1.0rem;font-weight: 700;color: #333;line-height: 2;text-align: center;}
.index-products-row a:hover h3 {color: #fff;}

.index-products-swiper .topbox {background-color: #0056a8;overflow: hidden;display: flex;flex-direction: row;}
.index-products-swiper .topbox dl dd {color: #fff;line-height: 2.4;}
.index-products-swiper .topbox .big {flex:50%;float: left;display: block;background-color: #f6f6f6}
.index-products-swiper .topbox .wrap {flex: 50%;display: flex;align-items: center;overflow: hidden;}
.index-products-swiper .topbox .line {margin: 2vw 0;display: block}
.index-products-swiper .topbox .info {padding: 0 3vw}
.index-products-swiper .topbox .info dl {font-size: 14px;color: #fff;line-height: 2.4}
.index-products-swiper .topbox h3 {font-size: 1.15rem;color: #fff}
.index-products-swiper .topbox p.det {font-size: 1.0rem;color: #fff;line-height: 2.4;height: 12em;overflow: hidden}
.index-products-swiper .topbox .more {float: right;color: #fff;font-size: 1.0rem;margin-top: 1rem}
@media (max-width:768px) {
    .index-products-swiper .topbox {flex-direction: column;}
    .index-products-swiper .topbox h3 {font-size: 1.04545455rem}}
@media (max-width:640px) {
    .index-products-swiper .topbox .more {font-size: 13px}
    .index-products-swiper .topbox p.det {font-size: 13px}
}
@media screen and (max-width:767px) {
	.index-products-swiper .topbox .big {float: none;height: 62vw;width: 100%}
	.index-products-swiper .topbox .wrap {height: auto;padding: 5vw 2vw}
}

.index-products-list {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	margin-top: 1rem!important;
	padding: 7px!important;
	max-height: 250px
}

.index-products-list .big {
	box-shadow: 2px 3px 12px rgba(70, 70, 70, .13);
	box-sizing: border-box;
	border: 3px solid transparent;
	padding-top: 68.4%
}

.index-products-list strong {
	display: block;
	text-align: center;
	color: #333;
	font-size: 1.0rem;
	line-height: 3;
	padding-top: .5em;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.index-products-list .swiper-slide.selected .big {box-shadow: 2px 3px 12px #999;}
@media (max-width:768px) {.index-products-list strong {font-size: .88888889rem}}
@media (max-width:640px) {.index-products-list strong {font-size: 1rem}}
@media screen and (max-width:767px) {.index-products-list {display: none}}


.index-news{width: 100%;display: block;max-width: 1400px;margin:4vw auto 0;overflow: hidden;}
.index-news .index-news-tit{text-align: center;padding: 1vw 0 1.5vw;}
.index-news .index-news-tit h2{font-size: 1.8rem;line-height: 2em;color: #333;letter-spacing: 2px;}
.index-news-box{width: 100%;display: flex;flex-direction: row;gap: 20px;}
.index-news-box .box1,.index-news-box .box2 {flex: 1; position: relative;width: 50%;}
.box1-box{display: flex;height: 100%;}
.box1-img{width: 100%;overflow: hidden;}
.box1-img img{
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.box1 .date {
	line-height: 1.5;
	font-size: 1.0rem;
	color: #fff;
	background-color: #0056a8;
	display: inline-block;
	padding: .5rem 1rem;
	text-align: center;
	position: absolute;
	z-index: 55;
	left: 0;
	top: 0
}
.box1 .date p {font-size: 1.8rem;color: #fff;line-height: 1}
.box1 .date span {font-size: 1.0rem;color: #fff}
.box1-cont{
    color: #333;
	padding: 0.7rem 1rem;
	position: absolute;
    bottom: 0;
    background-color: #f6f6f6;
}
.box1-cont h3{
    font-size: 1.0rem;
    color: #333;
    margin-bottom: .5em;
    font-weight: bold;
}
.box1-cont p {
	font-size: 0.875rem;
	color: #666;
	height: 5em;
	line-height: 1.2rem;
}
.box2{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.box1 a:hover .box1-cont{background-color: #0056a8;}
.box1 a:hover .box1-cont h3{color:#fff;}
.box1 a:hover .box1-cont p{color:#fff;}
.box2 a:hover {background-color: #0056a8;}
.box2 a:hover h3{color:#fff;}
.box2 a:hover p{color:#fff;}
.box2 a:hover span{color:#fff;}

.newstop {
	display: block;
	overflow: hidden;
	background-color: #f6f6f6;
	padding: 1rem 1rem;
}

.newstop-l {
	float: left;
	text-align: center;
	width: 75px;
	border-right: 1px solid #ddd;
	margin-right: 1rem
}

.newstop-l p {
	font-size: 1.5rem;
	color: #666;
	line-height: 50px
}

.newstop-l span {
	font-size: 1.0rem;
	color: #666;
	display: block;
	text-align: left;
	padding-bottom: 1em
}

.newstop-r {display: block;overflow: hidden}
.newstop-r h3 {
	font-size: 1.0rem;
	color: #333;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: .5em;
	font-weight: bold;
}

.newstop-r p {
	font-size: 0.875rem;
	color: #666;
	display: block;
	overflow: hidden;
	height: 3.2em
}

.index-more .morebtn {
	color: #fff;
	font-size: 1.0rem;
	text-align: center;
	display: block;
	clear: both;
	width: 150px;
	line-height: 2.5;
	background: #adadac;
	border-radius: 20px;
	margin: 1rem auto 0;
}

@media (max-width:768px) {
    .index-news-box .box1, .index-news-box .box2 {width:100%;}
    .newstop-l p {font-size: 1.2rem}
    .index-news-box{flex-direction: column;}
}
@media (max-width:640px) {
    .newstop-l span {font-size: 0.8rem}
}

.footer {
	position: relative;
	padding-top: 2%;
	width: 100%;
	padding-bottom: 20px;
	color: #fff;
	font-size: 14px;
	margin-top: 3vw;
}
.footer .fn-col h3 {
	font-size: 1.0rem;
	color: #fff;
	margin-bottom: 15px;
	font-weight: bold;
}

.footer .fn-col a {color: #fff}
.footer .fn-col .btline {
	width: 20px;
	height: 2px;
	background: #0056a8;
	margin: 10px 0
}

.footer .fn-col ul li {line-height: 30px;}
.fn-bd {text-align: justify;padding-right: 5%;box-sizing: border-box;}
.fn-bd:after {
	content: "";
	width: 100%;
	display: inline-block;
	font-size: 0;
	line-height: 0;
}

.fn-col {margin-top: 10px;display: inline-block;vertical-align: top}
.fn-col:nth-child(4) ul{display: grid;grid-template-columns: repeat(2, 1fr);column-gap: 10px;}
.footer .contact p {line-height: 40px;}
.footer .contact h3 {font-size: 22px;color: #0056a8;font-weight: bold;margin-bottom: 27px;}
.footer .fa-phone {font-size: 1.0rem;width: 30px}
.footer .fa-envelope {font-size: 1.25rem;width: 30px}
.footer .fa-globe {font-size: 1.0rem;width: 30px}
.footer .fa-print {font-size: 1.0rem;width: 30px}
.footer .fa-map-marker {font-size: 1.0rem;width: 30px}
.footer .contact .num {font-size: 26px;font-family: Arial, Helvetica, sans-serif;line-height: 30px}
.footer .contact .num span {display: inline-block;margin-left: 30px}
.code img {margin-top: 10px;}
.code p {font-size:0.875rem;margin-top: 8px;text-align: center}
.frendlink {margin: 4px 0 0;line-height: 26px;font-size: 0.875rem;}
.frendlink .fa-chain {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	background: #555555;
	color: #aaa;
	margin-right: 8px;
	line-height: 26px;
	text-align: center;
	font-size: 14px
}

.frendlink a {margin: 0 5px;color: #aaa;}
.footbar {line-height: 40px;background: #333333;font-size: 14px;}
.copyright {width: 100%;border-top: 1px solid #555;display: flex;justify-content: space-between;}
.copyright a {color: #fff;}
.copyright {padding: .5rem 0;color: #f7f7f7}
.footer .fn-col .contact {line-height: 30px}
.fixed-b {
	position: fixed;
	width: 100%;
	background: #d60000;
	bottom: 0;
	left: 0;
	display: none;
	z-index: 999;
	font-size: 1.25rem;
}

.fixed-b li {
	width: 25%;
	text-align: center;
	color: #fff;
	float: left;
}

.fixed-b li a {
	display: block;
	border-right: 1px solid #fff;
	color: #fff;
	padding: 2px 0;
}

.fixed-b li:last-of-type a {border-right: 0 none;}

.fixed-b li a .txt {display: block;margin-top: 5px;}
.suport a{font-size: 0.625rem;}
@media only screen and (max-width: 1400px) {
}

@media only screen and (max-width: 1200px) {
}

@media only screen and (max-width: 1000px) {
	.fixed-b {display: block;}
	.footer {display: none}
	.footbar {background: #222222;margin-top: 5vw;}
	.copyright {padding-bottom: 40px;}
	.homemain .title h2 {font: 600 28px "Microsoft Yahei";}
}

@media only screen and (max-width: 640px) {
	.copyright {
		height: auto;
		padding-top: 15px;
		line-height: 1.9em;
		text-align: center;
		flex-direction: column;
		align-items: center;
	}
	.frendlink {margin: 4px 0 0;line-height: 26px;font-size: 0.8rem;}

	.skip .fr {margin-left: 10px;float: left;}
	.copyright a {float: none;}
	.fixed-b {display: block;}
	.footer {display: none}
	.homemain .title h2 {font: 600 22px "Microsoft Yahei"}
}

@media only screen and (max-width: 480px) {
	.fixed-b {display: block;}
	.footer {display: none}
}



.big {overflow: hidden;position: relative;}
.big img {
	width: 100%;
	display: block;
	transform: translateX(-50%);
	transition: .1s transform;
	transform: translateZ(0);
	min-height: 100%;
	transition: .3s transform
}

.subbanner {
	overflow: hidden;
	position: relative;
	width: 100%;
	text-align: center
}
.subbanner img {
	display: block;
	max-width: 100%;
}

.abs {position: absolute;width: 100%;height: 100%;z-index: 5;left: 0;top: 0}
.subbanner .wrapper {height: 100%;}
.subbanner .imgcon {
	height: 100%;
	background: rgba(0,0,0,0.4);
	width: 300px;
}

.subbanner .dib {
    display: inline-block;
	vertical-align: middle;
}

.subbanner h2 {
    font-size:clamp(1.125rem, calc(1rem + 0.65vw), 1.75rem);
	color: #fff;
	letter-spacing: 3px;
	text-shadow: 0 0 5px rgb(0,0,0,0.5);
}

.subbanner small {
	color: #fff;
	letter-spacing: 2px;
	margin-bottom: 10px;
	display: block;
}
.imgcon {display: flex;flex-direction: column;align-items: center;justify-content: center;}
.imgcon img {display: inline-block;vertical-align: middle;max-width: 50%}


.innernav {
	font-size: 0;
	text-align: center;
	background: #f5f5f5;
	width: 100%
}

.innernav a {
	display: inline-block;
	font-size: 1.0rem;
	color: #696969;
	line-height: 3rem;
	padding: 0 2.8vw;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	margin-right: -1px
}


.innernav a.act {
    color: #fff;
	background-color: #0056a8;
	border-color: #0056a8;
	position: relative;
	z-index: 8
}
.innernav a:hover{color: #fff;background-color: #0056a8;border-color: #0056a8;}
@media (max-width: 768px) {
    .subbanner .imgcon{width: 50%;}
    .imgcon img {max-width: 30%;}
}
/* 关于我们 about */
/* 1. 顶部横幅 */
.about-hero {
    background: linear-gradient(135deg, #0056a8 0%, #003d7a 100%);
    color: #ffffff;
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.about-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 20px;
    }
/* 标题样式 */
.section-title {
    text-align: center;
    margin: 40px 0;
}

.section-title h2 {
    font-size: 32px;
    color: #0056a8;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-title h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #0056a8;
    margin: 10px auto 0;
}

.section-title p {
    color: #666666;
    font-size: 1.0rem;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.section {
    padding: 80px 0;
}
.about-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 20%),
                          radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 20%);
    pointer-events: none;
}

.about-hero h1 {
    color: #fff;
    font-size: 2.0rem;
    margin-bottom: 20px;
    font-weight: 700;
    letter-spacing: 1px;
}

.about-hero p {
    font-size: 1.125rem;
    opacity: 0.9;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

    /* 2. 公司简介 (Company Profile) */
.company-profile {
    background-color: #ffffff;
}

.profile-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.profile-text {
    flex: 1;
    min-width: 300px;
}

.profile-text h3 {
    font-size: 24px;
    color: #0056a8;
    margin-bottom: 20px;
    border-left: 4px solid #0056a8;
    padding-left: 15px;
}

.profile-text p {
    font-size: 1.0rem;
    margin-bottom: 15px;
    text-align: justify;
    color: #555555;
}

.profile-image {
    flex: 1;
    min-width: 300px;
    height: 350px;
    background-color: #eef4fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 86, 168, 0.1);
    overflow: hidden;
}

.profile-image img{width:100%;opacity: 0.8;}
    /* 模拟质谱仪抽象图 SVG */
.profile-image svg {
    width: 80%;
    height: 80%;
    fill: #0056a8;
    opacity: 0.8;
}

    /* 3. 发展历程 (History) */
.nc-milestone-wrapper {
    background-color: #f9fbfd;
    padding: 80px 0;
    overflow: hidden;
 /* 防止溢出 */
}

.nc-container-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

    /* 标题部分 */
.nc-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.nc-section-header h2 {
    font-size: 32px;
    color: #0056a8;
    font-weight: 700;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.nc-section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #0056a8;
    margin: 10px auto 0;
}

.nc-section-header p {
    text-align: center;
    color: #666666;
    font-size: 1.0rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

    /* 步骤条容器 - 横向布局核心 */
.nc-steps-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-top: 40px;
}

    /* 单个步骤项 */
.nc-step-item {
    position: relative;
    flex: 1;
    text-align: center;
    z-index: 2;
    padding: 0 10px;
    min-width: 180px;
 /* 防止过度压缩 */
}

    /* 标记区域 (年份 + 圆点) */
.nc-step-marker {
    position: relative;
    height: 60px;
 /* 给年份和圆点留出空间 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    /* 年份标签 */
.nc-year-label {
    display: inline-block;
    background-color: #ffffff;
    color: #0056a8;
    border: 1px solid #0056a8;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.75rem;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0, 86, 168, 0.1);
    position: relative;
    z-index: 3;
}

    /* 圆点 */
.nc-dot-circle {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    border: 3px solid #0056a8;
    border-radius: 50%;
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

    /* 激活状态圆点 (用于未来或当前) */
.nc-dot-active {
    background-color: #0056a8;
    box-shadow: 0 0 0 4px rgba(0, 86, 168, 0.2);
}

    /* 连接线 */
.nc-connector-line {
    position: absolute;
    top: 28px;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    width: 100%;
 /* 默认占满，后面用伪元素或宽度控制 */
    height: 2px;
    background-color: #e0e6ed;
    z-index: 1;
    pointer-events: none;
}

.nc-connector-line {
    position: absolute;
    top: 42px;
    top: 46px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #e0e6ed;
    z-index: 1;
    transform: translateX(-50%);
 /* 居中于该item，但实际上我们需要它连接到下一个 */
}

.nc-connector-line {
    left: 50%;
    width: 100%;
 /* 占据剩余空间 */
    top: 46px;
    background-color: #e0e6ed;
    height: 2px;
    position: absolute;
    z-index: 1;
}

    /* 最后一个节点隐藏连线 */
.nc-step-item:last-child .nc-dot-circle{background-color: #0056a8;box-shadow: 0 0 0 4px rgba(0, 86, 168, 0.2);}
.nc-step-item:last-child .nc-connector-line {opacity:0;}
    
    /* 内容卡片 */
.nc-step-content {
    background: #ffffff;
    padding: 25px 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 3px solid transparent;
}

.nc-step-item:hover .nc-step-content {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0, 86, 168, 0.15);
    border-top-color: #0056a8;
}

.nc-step-content h3 {
    font-size: 1.125rem;
    color: #0056a8;
    margin-bottom: 12px;
    font-weight: 700;
}

.nc-step-content p {
    font-size:0.875rem;
    color: #666666;
    line-height: 1.6;
    text-align: left;
 /* 内容左对齐更易读 */
}

    /* 响应式设计：移动端变为垂直列表 */
@media screen and (max-width: 992px) {
    .nc-steps-container {
        flex-direction: column;
        align-items: center;
    }

    .nc-step-item {
        width: 100%;
        max-width: 500px;
        margin-bottom: 40px;
        text-align: left;
        padding-left: 20px;
        position: relative;
    }

    .nc-step-marker {
        flex-direction: row;
        height: auto;
        margin-bottom: 15px;
        align-items: center;
    }

    .nc-year-label {
        margin-bottom: 0;
        margin-right: 15px;
    }

        /* 移动端连线改为左侧垂直线 */
    .nc-connector-line {
        width: 2px;
        height: 100%;
        left: 27px;
 /* 对齐圆点中心：20px padding + 16px/2 */
        top: 40px;
 /* 从圆点下方开始 */
        transform: none;
        background-color: #e0e6ed;
    }
        
        /* 调整圆点位置以适应左侧线 */
    .nc-step-marker {
        position: absolute;
        left: 0;
        top: 0;
        width: 60px;
 /* 预留空间 */
    }

    .nc-step-content {
        margin-left: 60px;
 /* 给左侧标记留出空间 */
        text-align: left;
    }

        /* 最后一个节点的线隐藏 */
    .nc-step-item:last-child .nc-connector-line {
        display: block;
 /* 在垂直模式下，线应该在内容结束前停止，或者隐藏 */
        height: 0;
 /* 隐藏最后一段多余的线 */
    }
}

    /* 针对移动端的更稳健的重写媒体查询 */
@media screen and (max-width: 768px) {
    .nc-steps-container {
        flex-direction: column;
        gap: 40px;
    }

    .nc-step-item {
        width: 100%;
        text-align: left;
        padding: 0;
        display: flex;
        align-items: flex-start;
    }

    .nc-step-marker {
        flex-direction: column;
        height: auto;
        margin-bottom: 0;
        margin-right: 20px;
        position: relative;
        min-width: 40px;
        align-items: center;
    }

    .nc-year-label {
        margin-bottom: 10px;
        margin-right: 0;
        font-size: 12px;
        padding: 2px 8px;
    }

    .nc-dot-circle {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

        /* 垂直连接线 */
    .nc-connector-line {
        position: absolute;
        top: 35px;
 /* 年份下 + 圆点上 */
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: calc(100% + 40px);
 /* 延伸到下一个卡片 */
        background-color: #e0e6ed;
    }

    .nc-step-item:last-child .nc-connector-line {
        display: none;
    }

    .nc-step-content {
        flex: 1;
        margin-left: 0;
        padding: 20px;
    }

    .nc-step-content h3 {
        font-size: 17px;
    }
}

    /* 4. 企业文化 (Culture) */
.culture-section {background-color: #ffffff;}
.culture-paddin{padding: 4vw 0;}
.culture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.culture-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    padding: 40px 30px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.culture-card:hover {
    border-color: #0056a8;
    box-shadow: 0 10px 25px rgba(0, 86, 168, 0.15);
    transform: translateY(-5px);
}

.culture-card:nth-child(1) .culture-icon {-webkit-mask-image: url(/skin/images/wh1.svg);}
.culture-card:nth-child(2) .culture-icon {-webkit-mask-image: url(/skin/images/wh2.svg);}
.culture-card:nth-child(3) .culture-icon {-webkit-mask-image: url(/skin/images/wh3.svg);}
.culture-card:nth-child(4) .culture-icon {-webkit-mask-image: url(/skin/images/wh4.svg);}
.culture-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background-color: #0056a8;
}

.culture-card h3 {
    font-size: 1.25rem;
    color: #333333;
    margin-bottom: 15px;
}

.culture-card p {
    color: #666666;
    font-size: 0.875rem;
}

    /* 5. 荣誉资质 (Honors) */
.honors-section {
    background-color: #f0f4f8;
    padding-bottom: 40px;
}

.honors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.honor-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
}

.honor-item:nth-child(1) .honor-icon {-webkit-mask-image: url(/skin/images/zs1.svg);}
.honor-item:nth-child(2) .honor-icon {-webkit-mask-image: url(/skin/images/zs2.svg);}
.honor-item:nth-child(3) .honor-icon {-webkit-mask-image: url(/skin/images/zs3.svg);}
.honor-item:nth-child(4) .honor-icon {-webkit-mask-image: url(/skin/images/zs4.svg);}
.honor-icon {
    width: 50px;
    height: 50px;
    background-color: #d4af37;
    margin-bottom: 15px;
}

.honor-item h4 {
    font-size: 1.0rem;
    color: #333333;
    font-weight: 600;
}

.honor-item span {
    font-size: 0.875rem;
    color: #999999;
    margin-top: 5px;
}

.honors-section .section-title {
    padding-top: 40px;
}

    /* 6. 合作伙伴 (Partners) */
.partners-section {
    background-color: #ffffff;
    padding-bottom: 60px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    align-items: center;
}

.partner-logo {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.partner-logo img {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    opacity: 0.6;
    cursor: pointer;
    transform: scale(1) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    will-change: transform;
}

.partner-logo:hover img{opacity: 0.8;overflow: hidden;cursor: pointer;transform: scale(1.02) translateZ(0);}

    /* 响应式调整 */
@media screen and (max-width: 768px) {
    .about-hero h1 {
        font-size: 32px;
    }

    .timeline::after {
        left: 31px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-item::after {
        left: 23px;
    }

    .left {
        text-align: left;
    }

    .left .year-badge {
        float: none;
        display: inline-block;
        margin-right: 10px;
    }

    .right {
        left: 0%;
    }

    .profile-content {
        flex-direction: column;
    }

    .profile-image {
        width: 100%;
        height: 250px;
    }
}


.about-com-container{max-width: 1200px;margin: 0 auto;padding: 60px 20px;}
.about-com-tit{text-align: center;margin-bottom: 50px;}
.about-com-tit h1 {
        font-size: 2.0rem;
        font-weight: 700;
        color: #555;
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
    }
.about-com-tit h1::after {
        content: '';
        display: block;
        width: 60px;
        height: 4px;
        background-color: #0056a8;
        margin: 10px auto 0;
        border-radius: 2px;
    }
.about-com-tit img{max-width:300px;width:100%;}
.about-com-main p{font-size: 1.0rem;line-height: 1.6rem;padding:2vw;margin-bottom:2vw;box-shadow: 8px 8px 8px 2px rgba(0, 0, 0, 0.05);}
.about-com-main img{width:100%;max-width:480px;}
.glow-style {
    margin: 50px auto;
    padding: 4vw;
    background-color: #fff;
    font-family: sans-serif;
    background: linear-gradient(to right, 
            #0056a8 0%, 
            #0056a8 2px, 
            transparent 2px, 
            transparent 98%, 
            #0056a8 98%, 
            #0056a8 100%);
    box-shadow: 0 0 15px rgba(0, 86, 168, 0.2);
    position: relative;
}

.glow-style::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    width: 12px;
    height: 12px;
    background: #0056a8;
    border-radius: 50%;
    box-shadow: 0 0 10px #0056a8;
}

.glow-style::before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 12px;
    height: 12px;
    background: #0056a8;
    border-radius: 50%;
    box-shadow: 0 0 10px #0056a8;
}


/* 发展历程 */
.timeline-section *, .timeline-section *::before, .timeline-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.timeline-section {
    line-height: 1.6;
    color: #333333;
    padding: 60px 20px;
    width: 100%;
    overflow-x: hidden;
}

    /* 头部样式 */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h1 {
    font-size: 2.0rem;
    color: #555;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

    /* 标题下划线 - 品牌色 #0056a8 */
.section-header h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #0056a8;
    margin: 10px auto 0;
    border-radius: 2px;
}

.section-header p {
    text-align: center;
    color: #555;
    font-size: 0.875rem;
    max-width: 600px;
    margin: 0 auto;
}

    /* 时间轴容器 */
.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

    /* 中间竖线 - 品牌色线条，灰色背景线可选，这里用浅灰做底，品牌色做点 */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #dddddd;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 2px;
}

    /* 单个时间项 - 使用 Flex 布局确保对齐 */
.timeline-item {
    position: relative;
    width: 100%;
    padding: 20px 0;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    animation: fadeInUp 0.8s ease forwards;
    justify-content: flex-start;
}

.timeline-item:nth-child(2n){justify-content: flex-end;}
.timeline-item:nth-child(2n) .timeline-content-wrapper{text-align: left;}
    /* 左侧项布局 */
.timeline-item.left {
    justify-content: flex-start;
}

.timeline-item .timeline-content-wrapper {
    width: 45%;
    padding-right: 40px;
    text-align: right;
    position: relative;
}

    /* 右侧项布局 */
.timeline-item.right {
    justify-content: flex-end;
}

.timeline-item.right .timeline-content-wrapper {
    width: 45%;
    padding-left: 40px;
    text-align: left;
    position: relative;
}

    /* 时间轴圆点 - 品牌色 #0056a8 */
.timeline-item::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45px;
 /* 根据 padding 调整垂直位置 */
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border: 4px solid #0056a8;
    border-radius: 50%;
    z-index: 2;
    transition: background-color 0.3s;
}

.timeline-item:hover::after {
    background-color: #0056a8;
}

    /* 内容卡片 */
.timeline-content {
    padding: 25px;
    background-color: #ffffff;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    display: inline-block;
        /* 顶部边框 - 品牌色 #0056a8 */
    border-top: 4px solid #0056a8;
    text-align: inherit;
    max-width: 100%;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
}

    /* 年份 - 品牌色 #0056a8 */
.timeline-year {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0056a8;
    margin-bottom: 10px;
    display: block;
}

.timeline-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #555;
}

.timeline-desc {
    font-size: 0.875rem;
    color: #555;
    line-height: 1.6;
}

    /* 箭头指示器 */
.timeline-content::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    border: medium solid #ffffff;
}

    /* 左侧箭头 */
.timeline-item.left .timeline-content::before {
    right: -10px;
    left: auto;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ffffff;
}

    /* 右侧箭头 */
.timeline-item.right .timeline-content::before {
    left: -10px;
    right: auto;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ffffff transparent transparent;
}

    /* 动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    /* 响应式设计：屏幕宽度小于 768px */
@media screen and (max-width: 768px) {
        /* 竖线移到左侧固定位置 */
    .timeline-container::after {
        left: 30px;
        transform: none;
    }

        /* 所有项靠左对齐 */
    .timeline-item {
        justify-content: flex-start;
        padding-left: 70px;
 /* 留出竖线和圆点空间 */
        padding-right: 0;
        text-align: left;
    }

    .timeline-item:nth-child(2n) {justify-content: flex-start;}
    .timeline-item .timeline-content-wrapper {
        width: 100%;
        padding: 0;
        text-align: left;
    }

        /* 圆点对齐左侧竖线 */
    .timeline-item::after {
        left: 30px;
        transform: translateX(-50%);
        top: 45px;
    }

        /* 移动端隐藏箭头 */
    .timeline-content::before {display: none;}

    .section-header h1 {font-size: 2rem;}
}

/*企业文化*/
.layout-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

    /* 装饰性竖线 - 贯穿页面的品牌色线条 */
.vertical-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e0e0e0;
    z-index: -1;
    transform: translateX(-50%);
}

@media (max-width: 768px) {
    .vertical-line {display: none;}
    .layout-wrapper {padding: 0 20px;}
}


.intro-section {
    padding: 3vw 0;
    text-align: center;
    border-bottom: 4px solid #0056a8;
}

.intro-label {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #0056a8;
    margin-bottom: 20px;
    font-weight: 700;
}

.intro-title {
    font-size: 2.0rem;
    font-weight: 900;
    color: #555;
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.intro-text {
    text-align: center;
    font-size: 0.875rem;
    color: #555555;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 300;
}

.principles-section {
    padding: 100px 0;
    background-color: #f9f9f9;
}


.grid-system {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
        /* 在 HTML 中直接设置 max-width，或者在这里加也可以，为了灵活性放在 HTML style 中或此处 */
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.grid-item {
    padding: 60px 40px;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    background-color: #ffffff;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

.grid-item:hover {
    background-color: #f0f4f8;
}

.grid-number {
    font-size: 60px;
    font-weight: 900;
    color: #e6e6e6;
    line-height: 1;
    margin-bottom: 20px;
    display: block;
}

.grid-item:hover .grid-number {
    color: #0056a8;
}

.grid-title {
    font-size: 24px;
    font-weight: 700;
    color: #0056a8;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.grid-desc {
    font-size: 0.875rem;
    color: #666666;
    line-height: 1.8;
}

    /* 第三部分：左右交错图文 */
.story-section {padding: 100px 0;position: relative;}

.story-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
    gap: 60px;
}

.story-row:nth-child(even) {
    flex-direction: row-reverse;
}

.story-content {
    flex: 1;
}

.story-heading {
    font-size: 1.8rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

.story-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    bottom: 5px;
    width: 4px;
    background-color: #0056a8;
}

.story-text {
    font-size: 0.875rem;
    color: #555555;
    text-align: justify;
}

.story-visual {
    flex: 1;
    height: 300px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.story-visual img{width:100%;height:auto;opacity: 0.4;transition: all 0.5s linear;overflow:hidden;}
.story-row:hover .story-visual{opacity: 0.8;transition: all 0.5s linear;overflow:hidden;}

    /* CSS 绘制的抽象图形 */
.shape-circles {
    width: 200px;
    height: 200px;
    border: 2px solid #0056a8;
    border-radius: 50%;
    position: relative;
}

.shape-circles::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid #cccccc;
    border-radius: 50%;
}

.shape-circles::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #0056a8;
    border-radius: 50%;
}

.shape-squares {
    width: 180px;
    height: 180px;
    background-color: #0056a8;
    position: relative;
    opacity: 0.9;
}

.shape-squares::after {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 180px;
    height: 180px;
    border: 4px solid #333333;
    background-color: transparent;
}

    /* 第四部分：数据/引用 */
.quote-section {
    background-color: #0056a8;
    color: #ffffff;
    padding: 80px 0;
    text-align: center;
}

.quote-box {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.quote-mark {
    font-size: 80px;
    font-family: Georgia, serif;
    line-height: 0.5;
    display: block;
    margin-bottom: 20px;
    opacity: 0.3;
}

.quote-text {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 30px;
    font-style: italic;
}

.quote-author {
    font-size: 1.0rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-top: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
    padding-top: 20px;
}

    /* 第五部分：页脚行动点 */
.action-section {
    padding: 100px 0;
    text-align: center;
    border-top: 1px solid #eeeeee;
}

.action-title {
    font-size: 2.0rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 40px;
}

.btn-classic {
    display: inline-block;
    padding: 18px 50px;
    background-color: transparent;
    color: #0056a8;
    border: 2px solid #0056a8;
    font-size: 1.0rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-classic:hover {
    background-color: #0056a8;
    color: #ffffff;
}

    /* 响应式调整 */
@media (max-width: 768px) {
    .intro-title {font-size: 32px;}

    .grid-system {grid-template-columns: 1fr;}
    .story-row, .story-row:nth-child(even) {flex-direction: column;gap: 30px;}
    .story-visual {width: 100%;height: 250px;}
    .quote-text {font-size: 1.25rem;}
    .layout-wrapper {padding: 0 20px;}
    .grid-item {padding: 40px 20px;}
}

/* 荣誉资质 */
.honor-section {
    color: #555;
    line-height: 1.6;
    background-color: #f9fbfd;
    padding: 60px 20px;
    box-sizing: border-box;
    width: 100%;
}

.honor-section *, .honor-section *::before,.honor-section *::after {box-sizing: border-box;}

    /* 容器 */
.honor-container {
    max-width: 1200px;
    margin: 0 auto;
}

    /* 标题区域 */
.honor-header {
    text-align: center;
    margin-bottom: 50px;
}

.honor-title {
    font-size: 2.0rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

    /* 标题下划线装饰 */
.honor-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #0056a8;
    margin: 10px auto 0;
    border-radius: 2px;
}

.honor-subtitle {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    max-width: 700px;
    margin: 0 auto;
}

    /* 网格布局 */
.honor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: 30px;
}

    /* 证书卡片 */
.honor-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 86, 168, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    border: 1px solid #eef2f7;
}

.honor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 86, 168, 0.15);
    border-color: #0056a8;
}

    /* 图片容器 */
.honor-img-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background-color: #f0f4f8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.honor-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.honor-card:hover .honor-img-wrapper img {
    transform: scale(1.05);
}

    /* 提示图标 (可选) */
.zoom-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(0, 86, 168, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.zoom-icon::before {
    content: '+';
    color: #fff;
    font-size: 24px;
    font-weight: 300;
}

.honor-card:hover .zoom-icon {
    opacity: 1;
}

    /* 文字描述 */
.honor-info {
    padding: 20px;
    text-align: center;
}

.honor-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.honor-year {
    font-size: 14px;
    color: #0056a8;
    font-weight: 500;
    background-color: #eef6ff;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
}

    /* 灯箱 (Lightbox) 样式 */
.honor-lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.honor-lightbox.active {
    display: flex;
    opacity: 1;
}

.honor-lightbox-img {
    max-width: 90%;
    max-height: 80vh;
    border: 4px solid #fff;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.honor-lightbox.active .honor-lightbox-img {
    transform: scale(1);
}

.honor-lightbox-caption {
    color: #fff;
    margin-top: 15px;
    font-size: 1.125rem;
    text-align: center;
    padding: 0 20px;
}

.honor-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
    line-height: 1;
}

.honor-lightbox-close:hover {
    color: #0056a8;
}

    /* 响应式调整 */
@media (max-width: 768px) {
    .honor-section {padding: 40px 15px;}
    .honor-title {font-size: 28px;}
    .honor-grid {grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));gap: 20px;}
    .honor-img-wrapper {height:auto;}
}



/* 合作伙伴 */
.partner-section-wrapper {
    color: #333333;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f9fbfd;
}

.partner-section-wrapper *, 
    .partner-section-wrapper *::before, 
    .partner-section-wrapper *::after {
    box-sizing: inherit;
}

.partner-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
}

    /* 头部区域 */
.partner-header {
    text-align: center;
    margin-bottom: 50px;
}

.partner-header h1 {
    font-size: 2.0rem;
    font-weight: 700;
    color: #555;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

    /* 标题下划线装饰 */
.partner-header h1::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #0056a8;
    margin: 10px auto 0;
    border-radius: 2px;
}

.partner-header p {
    text-align: center;
    font-size: 0.875rem;
    color: #666666;
    max-width: 700px;
    margin: 0 auto;
}

    /* 网格布局系统 */
.partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

    /* 合作伙伴卡片样式 */
.partner-card {
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}

    /* 顶部品牌色条装饰 */
.partner-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #0056a8;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: left;
}

    /* 悬停效果 */
.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 86, 168, 0.15);
    border-color: #0056a8;
}

.partner-card:hover::before {
    transform: scaleX(1);
}

    /* 模拟Logo区域 (实际使用时可替换为 img 标签) */
.partner-logo-placeholder img{
    width: 200px;
    height: 100px;
    background-color: #f0f4f8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #0056a8;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}

.partner-card img {
    max-width: 100%;
    height: auto;
    max-height: 100px;
    opacity: 0.7;
    transition: all 0.3s;
}

.partner-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.partner-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.partner-desc {
    font-size: 14px;
    color: #777;
    margin-bottom: 0;
}

    /* 合作类型标签 */
.partner-tag {
    display: inline-block;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    background-color: #f0f7ff;
    color: #0056a8;
 /* 品牌主题色文字 */
    margin-top: 15px;
    font-weight: 600;
}

    /* 底部行动号召 (可选) */
.partner-cta {
    text-align: center;
    margin-top: 60px;
}

.btn-become-partner {
    display: inline-block;
    background-color: #0056a8;
 /* 品牌主题色背景 */
    color: #ffffff;
    padding: 14px 35px;
    font-size: 1.0rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, transform 0.2s;
    border: none;
    cursor: pointer;
}

.btn-become-partner:hover {
    background-color: #004488;
 /* 稍深的品牌色 */
    transform: translateY(-2px);
}

    /* 响应式调整 */
@media (max-width: 768px) {
    .partner-container {
        padding: 40px 15px;
    }

    .partner-header h1 {
        font-size: 28px;
    }

    .partner-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }
}


/* 服务体系 */
.ncs-service-wrapper {
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}
.ncs-service-wrapper *, .ncs-service-wrapper *::before, .ncs-service-wrapper *::after {box-sizing: inherit;}
.ncs-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}
.ncs-bg-light {
    background-color: #f9fbfd;
}

/* Banner Section */
.ncs-banner {
    background: linear-gradient(135deg, #0056a8 0%, #003d7a 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
}
.ncs-banner-title {
    color: #fff;
    font-size: 2.0rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.ncs-banner-subtitle {
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 300;
}
.ncs-banner-line {
    width: 60px;
    height: 3px;
    background-color: #fff;
    margin: 20px auto 0;
}

/* Navigation Grid */
.ncs-nav-grid {
    padding: 40px 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-bottom: 40px;
}
.ncs-nav-grid .ncs-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
.ncs-grid-item {
    flex: 1 1 150px;
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    border: 1px solid #eee;
}
.ncs-grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,86,168,0.15);
    border-color: #0056a8;
}
.ncs-icon-box {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
}
.ncs-icon-box .fa{font-size: 48px;color: #0056a8;}
.ncs-icon-box svg {
    width: 100%;
    height: 100%;
}
.ncs-grid-item h3 {
    font-size: 1.125rem;
    color: #0056a8;
    margin: 0 0 8px;
}
.ncs-grid-item p {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

/* Sections General */
.ncs-section {
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}
.ncs-section:last-child {
    border-bottom: none;
}
.ncs-section-header {
    text-align: center;
    margin-bottom: 40px;
}
.ncs-section-header h2 {
    font-size: 28px;
    color: #0056a8;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}
.ncs-divider {
    display: block;
    width: 40px;
    height: 2px;
    background-color: #0056a8;
    margin: 0 auto;
}
.ncs-section-desc {
    text-align: center;
    color: #666;
    margin-top: 10px;
    font-size: 15px;
}

/* Service System Styles */
.ncs-text-block p {
    font-size: 0.875rem;
    color: #444;
    margin-bottom: 30px;
    text-align: justify;
}
.ncs-feature-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}
.ncs-feature-item {
    flex: 1 1 300px;
    background: #fff;
    padding: 25px;
    border-left: 4px solid #0056a8;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.ncs-feature-item h4 {
    color: #0056a8;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.125rem;
}
.ncs-feature-item p {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0;
    text-align: left;
}

/* Tech Support Styles */
.ncs-flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    padding: 0 40px;
}
.ncs-text-col {flex: 1 1 500px;}
.ncs-text-col p{font-size:0.875rem;}
.ncs-img-col {flex: 1 1 400px;}
.ncs-tech-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}
.ncs-tech-list li {
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    font-size: 0.875rem;
    color: #444;
}
.ncs-tech-list li::before {
    content: "•";
    color: #0056a8;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}
.ncs-placeholder-img {
    display: flex;
    width: 100%;
    height: auto;
}
.ncs-placeholder-img img {width:100%;height:auto;transition: all 0.5s linear;overflow: hidden;}

/* After Sales Cards */
.ncs-service-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}
.ncs-s-card {
    flex: 1 1 250px;
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #eef2f7;
    transition: all 0.3s;
}
.ncs-s-card:hover {
    border-color: #0056a8;
    box-shadow: 0 5px 15px rgba(0,86,168,0.1);
}
.ncs-s-num {
    font-size: 32px;
    font-weight: 700;
    color: #0056a8;
    margin-bottom: 10px;
}
.ncs-s-card h4 {
    font-size: 1.0rem;
    margin: 0 0 10px;
    color: #333;
}
.ncs-s-card p {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
}

/* FAQ Styles */
.ncs-faq-list {
    max-width: 900px;
    margin: 0 auto;
}
.ncs-faq-item {
    background: #fff;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 1px solid #e1e1e1;
    overflow: hidden;
}
.ncs-faq-item summary {
    font-size: 1.0rem;
    padding: 15px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    list-style: none;
    position: relative;
    background-color: #fcfcfc;
}
.ncs-faq-item summary::-webkit-details-marker {
    display: none;
}
.ncs-faq-item summary::after {
    content: "+";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    color: #0056a8;
    font-weight: 300;
}
.ncs-faq-item[open] summary::after {
    content: "-";
}
.ncs-faq-item p {
    padding: 20px;
    margin: 0;
    color: #555;
    font-size: 0.875rem;;
    border-top: 1px solid #f0f0f0;
    background-color: #fff;
}

/* Form Styles */
.ncs-form {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.ncs-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.ncs-form-group {
    flex: 1 1 300px;
    margin-bottom: 20px;
}
.ncs-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}
.ncs-required {
    color: #d9534f;
    margin-left: 3px;
}
.ncs-form-group input,
.ncs-form-group select,
.ncs-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s;
}
.ncs-form-group input:focus,
.ncs-form-group select:focus,
.ncs-form-group textarea:focus {
    outline: none;
    border-color: #0056a8;
    box-shadow: 0 0 0 3px rgba(0,86,168,0.1);
}
.ncs-form-submit{display: flex;gap: 20px;margin-bottom: 20px;flex-direction: row;}
.ncs-submit-btn {
    display: block;
    width: 100%;
    padding: 14px;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1.0rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}
.btn-bglan{background-color: #0056a8;}
.btn-bghui{background-color: #999;}
.ncs-submit-btn:hover {background-color: #003d7a;}
.checkcode{display: flex;flex-direction: row;align-items: center;}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .ncs-banner-title {font-size: 28px;}
    .ncs-nav-grid .ncs-container {justify-content: center;}
    .ncs-feature-list, .ncs-service-cards {flex-direction: column;}
    .ncs-feature-item, .ncs-s-card {flex: 1 1 100%;}
    .ncs-form-row {flex-direction: column;gap: 0;}
    .ncs-form-group {flex: 1 1 100%;}
}
@media (max-width: 480px) {
    .ncs-nav-grid .ncs-container {gap: 10px;}
    .ncs-grid-item {flex: 1 1 30%;padding: 10px;}
    .ncs-section {padding: 40px 0;}
    .ncs-icon-box{width: 32px;height: 32px;margin: 0 auto 10px;}
    .ncs-icon-box .fa {font-size: 30px;}
}



.innertit {
	text-align: center;
	margin: 2rem 0;
}

.innertit h3 {
	font-size: 1.4rem;
	line-height: 2.5;
}

.innertit small {
	font-size: 0.875rem;
	color: #666;
	display: block;
	line-height: 1.7;
}

.innertit h3::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	background: #008b32;
	margin: 0 auto;
}

.innertit2 {
	border-bottom: 1px solid #dddddd;
	margin-bottom: 1rem;
}

.innertit2 h1 {
	font-size: 1.25rem;
	color: #333;
	display: inline-block;
	line-height: 2em;
	padding-bottom: 5px;
	margin-bottom: -1px;
}

.innertit strong {
	font-size: 1.8rem;
	display: block;
	color: #333;
	text-align: center;
	letter-spacing: 4px;
}


.tell-body{
    display: flex;
    width: 100%;
    min-height: 300px;
    overflow: hidden;
    box-sizing: border-box; 
}
.tell-info {
	width: 40%;
    flex-shrink: 0;
    padding: 20px;
    box-sizing: border-box;
	padding: 2.3rem 1rem;
	background: #f5f5f5;
}

.tell-info h3 {
	font-size: 1.25rem;
	color: #333;
	font-weight: 400;
	line-height: 2;
}

.tell-info strong {color: #0056a8}

.tell-info p {
    height: 40px;
    line-height: 20px;
	font-size:1.0rem;
	color: #666;
	padding: 5px 0
}

.tell-info p i{width: 22px;}
.tell-info .fa {
    display: inline-block;
	color: #0056a8;
	font-size: 1rem;
	text-align: center;
}
.tell-info p span{margin-left:10px;}
.tell-info .ewm {
	display: block;
	margin: 2rem auto 0 auto;
	width: 7rem;
	height: 7rem
}

.tell-img {
    width: 60%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.tell-img img {
    display: block;
    width: auto;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
@media (max-width: 768px) {
    .tell-body {flex-direction: column;}
    .tell-info, .tell-img {width: 100%;}
    .tell-img {height: 480px;}
}

.message {
	width: 100%;
	padding: 2% 0;
	margin: 0 auto;
	font-size: 1.0rem;
	background: #f8f8f8;
	margin-bottom: -3vw;
	margin-top: 5vw;
}
.field {
	margin: 20px 0 0;
	text-align: justify;
}
.field:after {
	content: "";
	width: 100%;
	display: inline-block;
	font-size: 0;
	line-height: 0;
}

.field li {
	float: left;
}

.field .ui-input {
	display: inline-block;
	width: 30%;
	line-height: 36px;
	border: 1px solid #dddddd;
	padding-left: 10px;
	color: #333;
	font-size: 1.0rem;
}

.field input:last-child {
	margin-right: 0
}

.message .ui-textarea {
	margin-bottom: 2vw;
	width: 99%;
	height: 150px;
	border: 1px solid #dddddd;
	padding-left: 10px;
	font-family: "microsoft yahei";
	font-size: 1.0rem;
	padding-top: 8px;
}

.message .ui-btn1 {
	background: #0056a8;
	border: none;
	color: #fff;
	width: 120px;
	padding: 10px;
	margin-right: 30px;
	margin-bottom: 3vw;
	cursor: pointer;
}

.message .ui-btn2 {
	background: #bbbbbb;
	border: none;
	color: #fff;
	width: 120px;
	margin-bottom: 3vw;
	padding: 10px;
	cursor: pointer;
}

.message .mod3 {
	text-align: center
}

.mes_txt {
	color: #333;
	line-height: 3.4;
	margin-top: -2px;
}

.mes_txt::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	background: #008b32;
}
@media (max-width:768px) {
    .innertit strong {font-size: 1.8rem}
    .innertit {margin: 1.5rem 0;}
    .tell_info h3 {font-size: 1.09090909rem}
    .tell_info strong {font-size: .94444444rem}
}
@media (max-width:640px) {.tell_info p {font-size: 13px}}


/* 产品中心 */
.products-flex{display: flex;column-gap: 40px;}
.leftbox{flex: 30%;min-width: 200px;max-width: 300px;}
.leftbox i{padding-right: 10px;font-size: 10px;}
.left-fiexd{position: sticky;top: 1px;}
.left-tit{text-align: center;background: #f5f5f5;}
.left-tit h2{font-size: 1.25rem;color: #666;line-height: 2.8rem;}
.boxone {margin-bottom: 40px;}
.boxone ul{box-shadow: 2px 3px 12px rgba(70, 70, 70, .13);}
.boxone ul li{border-top: 1px solid #f5f5f5;border-left: 1px solid #f5f5f5;border-right: 1px solid #f5f5f5;}
.boxone ul li:last-child{border-bottom: 1px solid #f5f5f5;}
.boxone ul li a{color: #333333;font-size:0.875rem;line-height: 2.6rem;margin-left: 20px;}
.boxone ul li.act a,.boxone ul li.act i {color: #0056a8;font-weight: 600;}
.boxone ul li:hover a,.boxone ul li:hover i {color: #0056a8;font-weight: 600;}
.boxtwo {box-shadow: 2px 3px 12px rgba(70, 70, 70, .13);}
.boxtwo ul{padding: 20px 20px;}
.boxtwo ul li{overflow: hidden;text-overflow: ellipsis;}
.boxtwo ul li a{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size:0.875rem;
    color: #333;
    line-height: 2.7;
}
.boxtwo ul li a:hover{color:#0056a8;}

.rightbox{flex:auto;width: 100%;}
.productslist li{border-bottom: 1px solid #ddd;padding: 2rem 0;}
.productslist li a:hover .list-team .team-img img{overflow: hidden;transform: scale(1.08) translateZ(0);}
.productslist li a:hover .list-team .team:nth-child(2) {background-color: #0056a8;color:#fff;transition: background-color 0.5s ease;}
.productslist li a:hover .team-txt h2{color:#fff;}
.productslist li a:hover .team-txt h2::after {background-color: #fff}
.productslist li a:hover .team-txt dl{color:#fff;}
.productslist li a:hover .team-txt .more{color:#fff;border: 1px solid #fff;}
.list-team{display: flex;flex-direction: row;align-items: stretch;gap: 20px;}
.list-team .team{flex: 1;overflow: hidden;background: #fff;}
.list-team .team-img{
    width: 100%;
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}
.list-team .team-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.list-team .team-img:hover img {transform: scale(1.1);}

.list-team .team-listimg {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.list-team .team-listimg img {
    width: 23%; /* 4张图，每张约占23% */
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.7;
}
.list-team .team-listimg img:hover,
.list-team .team-listimg img.active {
    opacity: 1;
    border-color: #0056a8;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.image-modal {
    display:  none;
    position:  fixed;
    z-index:  9999;
    left:  0;
    top:  0;
    width:  100%;
    height:  100%;
    background-color:  rgba(0, 0, 0, 0.9);
    justify-content:  center;
    align-items:  center;
    animation:  fadeIn 0.3s ease;
}
.modal-content {
    position:  relative;
    max-width:  90%;
    max-height:  90%;
    line-height:  0;
    z-index:  1;
    pointer-events:  auto;
}
.modal-content img {
    width:  100%;
    height:  auto;
    max-height:  90vh;
    border-radius:  4px;
    display:  block;
}

.modal-btn {
    position:  fixed;
    z-index:  10000;
    cursor:  pointer;
    pointer-events:  auto;
    color:  #fff;
    font-size:  30px;
    font-weight:  bold;
    background:  rgba(0, 0, 0, 0.5);
    width:  50px;
    height:  50px;
    border-radius:  50%;
    display:  flex;
    align-items:  center;
    justify-content:  center;
    transition:  all 0.3s ease;
    text-decoration:  none;
}
.modal-btn:hover {
    background: rgba(255, 50, 50, 0.9);
    transform: scale(1.1);
}
.close-btn {
    top:  20px;
    right:  20px;
    font-size:  28px;
}
.prev {
    left:  20px;
    top:  50%;
    margin-top:  -25px;
}
.next {
    right:  20px;
    top:  50%;
    margin-top:  -25px;
}

@media (max-width:  768px) {
    .prev {
        left:  10px;
        width:  40px;
        height:  40px;
        font-size:  24px;
        margin-top:  -20px;
    }
    .next {
        right:  10px;
        width:  40px;
        height:  40px;
        font-size:  24px;
        margin-top:  -20px;
    }
    .close-btn {
        top:  10px;
        right:  10px;
        width:  40px;
        height:  40px;
        font-size:  24px;
    }
}

.list-team .team-txt{padding: 20px;transition: all 0.5s ease;}
.list-team .team-txt h1{
    font-size: 1.75rem;
    color: #333;
    border-bottom: 1px solid #ddd;
    line-height: 1.5;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}
.list-team .team-txt h2 {
    font-size: 1.25rem;
    color: #333;
    line-height:1.5;
    margin-bottom: 1.2rem;
    transition: all 0.5s ease;
}
.list-team .team-txt h2::after {
    background-color: #0056a8;
    display: block;
    content: "";
    width: 2rem;
    height: 4px;
}
.list-team .team-txt p{font-size: 1.125rem;font-weight: 600;}
.list-team .team-txt dl {
    font-size: 0.85rem;
    color: #666;
    line-height: 2;
    transition: all 0.5s ease;
}
.list-team .team-txt .more {
    display: inline-block;
    color: #666;
    font-size: 0.8rem;
    text-align: center;
    width: 6rem;
    line-height: 1.6rem;
    border: 1px solid #666;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.5s ease;
}
@media (max-width:768px) {.leftbox{display:none;}}
@media (max-width:640px) {.list-team{display: flex;flex-direction: column;align-items: flex-start;gap: 20px;}}

.products-preview{width:100%;}
.preview-img{box-sizing: border-box;border: 1px solid #ddd;}
.products-details{width:100%;}
.details-tit{margin-top: 2vw;padding: 16px;background: linear-gradient(to right, #f7f7f7, #9dcaff);}

.article {margin-bottom: 20px;line-height: 25px}
.article img {text-align: center;height: auto !important;}
.article p{font-size: 0.875rem;padding-bottom: 10px;text-indent: 2em;}
.article p img{display: block;margin: 0 auto;padding: 40px 0; max-width: 100%;}
.article h2{font-size: 1.25rem;font-weight: 900;padding:20px 0 10px 0;}
.article h3{
    font-size: 1.25rem;
    font-weight: 900;
    padding:20px 10px;
    position: relative;
    color: #003d7a;
    border-left: 5px solid #0056a8;
    margin: 30px 0 20px;
    letter-spacing: 1px;
}
.article h3::before{
    content: '';
    position: absolute;
    width: 50%;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to right, #0056a8, #4a90e2);
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);
    opacity: 0.1;
}
.article h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, transparent, #0056a8, #4a90e2, #0056a8, transparent);
}
.article h4{font-size: 1.0rem;padding: 10px 0;}
.article > p:first-of-type{padding-top:20px;}
.article p span{color: #0056a8;font-weight: 600;}
.article .slogan-title{
    width: 70%;
    background-color: #0056a8;
    color: #ffffff;
    padding: 20px 4%;;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 40px auto 15px auto;
    box-shadow: 0 4px 10px rgba(0, 86, 168, 0.3);
    letter-spacing: 1px;
    text-indent: 0;
    text-align: center;
    line-height: 1.6;
}
.article .slogan-subtitle{color: #0056a8;font-weight: 600;font-size: 1.25rem;text-indent: 0;text-align: center;padding: 20px 0;}

.products-skip {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 20px 0;
    box-sizing: border-box;
}

.skip-item {
    flex: 1;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
}


.skip-link {
    text-decoration: none;
    color: #333;
    display: block;
    display: flex;
    align-items: center;
}


.skip-item .label {
    font-size: 0.875rem;
    color: #555;
    flex-shrink: 0;
}

.skip-item .title {
    color: #555;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skip-item:hover {
    background-color: #f0f7ff;
    border-color: #0056a8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.item-right .skip-link {justify-content: flex-end;}



@media screen and (min-width: 768px) {
    .products-skip { flex-direction: row;justify-content: space-between;}
    .skip-item .title {white-space: normal;}
}
@media (max-width:640px) {
    .article .slogan-title{font-size: 1.25rem;width: 90%;}
    .item-right .skip-link {justify-content: flex-start;}
}

.products-relate {display: flex;padding: 30px 0;flex-direction: column;gap: 20px;}
.products-relate .tit h3 {
	font-size:20px;
	float: left;
	color: #333333;
	margin-bottom: 10px;
	padding-left: 0.5em;
	border-left: 4px solid #0056a8;
	line-height: 1;
}
.products-relate .relate-grid{display: grid;grid-template-columns: repeat(4, 1fr);gap:20px;}
.grid-team{display:flex;flex-direction: column;}
.grid-team a{font-size: 0.875rem;color:#888;text-align: center;}
.grid-team img{width:100%;box-sizing: border-box;border: 1px solid #f4f4f4;}
.grid-team:hover{background-color:#0056a8;}
.grid-team:hover a{color:#fff;}

/* 资讯 */
.news-flex{display: flex;column-gap: 40px;}
.newslist{display: flex;flex-direction: column;gap: 20px;}
.newslist li {
    display: flex;
    visibility: visible;
	padding: 1.5rem 21px;
	overflow: hidden;
	border-bottom: 1px solid #e4e4e4;
	box-sizing: border-box;
}


.newslist li:hover {
	box-shadow: 2px 3px 12px rgba(70,70,70,.13);
	border: none;
	margin-top: -1px;
	background: #fff;
	margin-bottom: 1px;
	transition: all 0.3s ease;
}
.newslist li:hover .imgarea img{overflow: hidden;transform: scale(1.08) translateZ(0);}
.newslist .news-listteam{display:flex;flex-direction: row;gap: 20px;}
.newslist .imgarea {
	flex: 25%;
	overflow: hidden;
}

.newslist .imgarea img {
	width: 100%;
	height:auto;
	transform: scale(1) translateZ(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0s;
    will-change: transform;
}

.newslist .date {
    font-size: 0.875rem;
	margin: 0 20px 0 0;
	display: inline-block;
	color: #666666
}

.newslist .tag {
	margin: 0 0;
	display: inline-block;
	color: #666666
}

.newslist .tag a {
	color: #666666
}


.newslist .txtarea {
	flex: 75%;
	width: calc(100% - 280px);
}

.newslist .txtarea h2 {
    color: #333;
	font-size: 1.25rem;
	margin-bottom: 10px;
	line-height: 1.7;
	transition: all 0.5s ease;
}

.newslist .txtarea .desc {
    font-size: 0.875rem;
	margin-top: 5px;
	word-break: break-all;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #666666;
	line-height: 1.76;
	padding-top: 5px;
}

.newslist .txtarea .fa-tag {
	color: #999999;
	margin-right: 5px;
	font-size: 16px
}

.newslist .txtarea .fa-clock-o {
	color: #999999;
	font-size: 17px
}

.newslist .tag:hover .fa-tag {
	color: #f5aa00
}

.newslist .txtarea .more {
    font-size: 0.875rem;
	display: inline-block;
	padding: 3px  2em;
	bottom: 30px;
	color: #fff;
	margin-top: 15px;
	background: #999999;
	line-height: 2;
	float: right;
	transition: all 0.5s ease;
}

.newslist li:hover .more {background: #0056a8;}
.newslist li:hover .txtarea h2 {color: #0056a8;}
.news-main {border: 1px solid #ddd;padding: 0 2vw;}
.news-title{text-align: center;padding: 20px 0;line-height: 30px;}
.news-title h1{font-size:1.375rem;margin-bottom: 10px;margin-top: 10px;}
.news-time{
    font-size: 0.875rem;
    color: #777;
    border-bottom: 1px dashed #ddd;
    padding: 5px 0;line-height: 1.5rem;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}


.news-skip{
    display: flex;
    flex-direction: row;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    gap: 20px;
}
.news-skip .skipteam{flex:1;line-height: 1.0rem;font-size: 0.8rem;}
.news-skip .skipteam:nth-of-type(2){text-align: right;}
.news-skip .skipteam span{font-size:0.8rem;color:#999;}
.news-skip .skipteam a{font-size:0.8rem;color:#333;}
.bottom-like{border: 1px solid #ddd;margin-top:3vw;}
.news-relate .tit{background: #f5f5f5;padding: 12px;}
.news-relate .tit h3{
    font-size: 1.0rem;
    font-weight: normal;
    border-left: 4px solid #0056a8;
    line-height: 1;
    padding-left: 12px;
}
.news-relate .relate-grid{display: grid;grid-template-columns: repeat(2, 1fr);row-gap: 10px;column-gap: 40px;padding: 20px;}
.news-relate .relate-grid li{display: flex;justify-content: space-between;flex-direction: row;white-space: nowrap;overflow: hidden;}
.news-relate .relate-grid li a{
    font-size:0.875rem;
    color:#333;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 10px;
}
.news-relate .relate-grid li:hover a{color:#0056a8;}
.news-relate .relate-grid li span{font-size:0.875rem;color:#999;flex-shrink: 0;}
@media screen and (max-width: 1024px) {
    .news-skip{flex-direction: column;}
    .news-skip .skipteam:nth-of-type(2){text-align: left;}
    .news-relate .relate-grid{grid-template-columns: repeat(1, 1fr);}
}


/* 应用样式 */
.app-section-container {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px;
    background-color: #f9fbfd;
    color: #333333;
    box-sizing: border-box;
}

.app-section-container *, 
.app-section-container *::before, 
.app-section-container *::after {
    box-sizing: border-box;
}

/* 头部样式 */
.app-header {
    text-align: center;
    margin-bottom: 50px;
}

.app-header h1 {
    font-size: 2.0rem;
    font-weight: 700;
    color: #0056a8;
    margin: 0 0 15px 0;
    letter-spacing: 1px;
}

.app-header p {
    text-align: center;
    font-size: 1.0rem;
    color: #666666;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}
.app-nav{display: grid;grid-template-columns: repeat(8, 1fr);gap:2%;margin-bottom: 3vw;}
.icon-name{display: flex;flex-direction: column;align-items: center;}
.icon-box {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    background-color: rgba(0, 86, 168, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.icon-name:hover .icon-box{background-color: rgba(0, 86, 168);}
.app-nav a:nth-child(1) .icon-box {-webkit-mask-image: url('/skin/images/icon-1.svg');}
.app-nav a:nth-child(2) .icon-box {-webkit-mask-image: url('/skin/images/icon-2.svg');}
.app-nav a:nth-child(3) .icon-box {-webkit-mask-image: url('/skin/images/icon-3.svg');}
.app-nav a:nth-child(4) .icon-box {-webkit-mask-image: url('/skin/images/icon-4.svg');}
.app-nav a:nth-child(5) .icon-box {-webkit-mask-image: url('/skin/images/icon-5.svg');}
.app-nav a:nth-child(6) .icon-box {-webkit-mask-image: url('/skin/images/icon-6.svg');}
.app-nav a:nth-child(7) .icon-box {-webkit-mask-image: url('/skin/images/icon-7.svg');}
.app-nav a:nth-child(8) .icon-box {-webkit-mask-image: url('/skin/images/icon-8.svg');}
.icon-on{background-color: rgba(0, 86, 168)!important;}
.app-nav .icon-name h2{
    font-size: 1.125rem;
    font-weight: 700;
    color: #0056a8;
    margin: 0 0 12px 0;
}


/* 网格布局 - 响应式核心 */
.app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 默认每行两列 */
    gap: 30px;
}

/* 卡片通用样式 */
.app-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 86, 168, 0.08);
    border: 1px solid #eef2f7;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: row; /* 上下布局 */
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 86, 168, 0.15);
    border-color: #0056a8;
}



.card-left .desc {
    font-size: 13px;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 限制显示行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-right {
    flex: 65%;
    padding: 25px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
}

.article-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.article-list .list-box{flex: 55%;}
.article-list .list-box h3{color:#333;font-size: 1.0rem;}
.article-list .list-img{
    flex: 45%;
    width: 100%;
    max-height: 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-color: #858585;
}
.article-list .list-img img{width: 100%;height: auto;overflow: hidden;transition: all 0.3s;}

.card-right a{
    text-decoration: none;
    color: #333333;
    font-size: 0.8rem;
    line-height: 1.5;
    display: block;
    transition: color 0.2s;
    font-weight: 500;
}

.card-right a:hover .article-list .list-box h3{color: #0056a8;}
.card-right a:hover .article-list .list-img img{overflow: hidden;transition: all 0.3s linear;transform: scale(1.1);}
.card-right .desc {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 限制显示行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-top: 10px;
}
.article-list .date {
    display: block;
    font-size: 12px;
    color: #999999;
    margin-bottom: 4px;
    font-weight: normal;
}
.app-grid .app-card:nth-child(3) .article-list,
.app-grid .app-card:nth-child(4) .article-list,
.app-grid .app-card:nth-child(7) .article-list,
.app-grid .app-card:nth-child(8) .article-list{flex-direction: row-reverse;}
/* 响应式设计 */
/* 平板及以下 (小于 1024px)：改为单列布局，卡片内部改为上下结构或保持左右但调整比例 */

/* 手机及以下 (小于 768px)：卡片内部改为上下结构 */
@media (max-width: 768px) {
    .app-header h1 {font-size: 28px;}
    .app-grid {grid-template-columns: repeat(1, 1fr);}
    .app-card {flex-direction: column;}
    .card-left {
        flex: auto;
        border-right: none;
        border-bottom: 1px solid #eef2f7;
        padding: 20px;
    }
    .card-left .desc {-webkit-line-clamp: 3;} /* 移动端减少描述行数 */
    .card-right {flex: auto;padding: 20px;}
    .icon-box {width: 40px;height: 40px;}
    .icon-box svg {width: 24px;height: 24px;}
}


/* 页码 */
.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 16px;
	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: #fff;
	background: #333;
	border: 1px solid #333;
}

.pagination a.page-num-current {
	color: #fff;
	background: #333;
	border: 1px solid #333;
}

.text-secondary {font-size: 1.0rem;text-align: center;padding: 20px 0}

/* 渐变动画背景 */
.gradient-bg {
    background-image: linear-gradient(-45deg,#333333,#1a1a1a,#666666,#333333,#000000);
    background-size: 400% 400%;
    animation: gradientFlow 15s ease infinite;
  }

@keyframes gradientFlow {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
  }
  
/* 上标下标样式 */
sup,sub{font-size: 60%;line-height: 0;position: relative;}
sup {
  font-variant-position: super;
  vertical-align: super;
}

sub {
  font-variant-position: sub;
  vertical-align: sub;
  bottom: 0.4em;;
}

/*toolbar*/

#toolbar {
	width: 100%;
	height: 48px;
	background: #0056a8;
	position: fixed;
	z-index: 10000;
	bottom: 0;
	left: 0;
	opacity: 0.9;
	display: none;
}

#toolbar ul li {
	float: left;
	width: 33.33333%;
	text-align: center;
	color: #fff;
}

#toolbar ul li:nth-child(2):before,
#toolbar ul li:nth-child(2):after {
	content: "";
	height: 19px;
	width: 1px;
	background: #fff;
	display: inline-block;
}

#toolbar .fa-phone:before {
	line-height: 32px;
	vertical-align: text-top;
	font-size: 26px;
}

#toolbar ul li:nth-child(2) a {width: 98%;}

#toolbar ul li a {
	width: 100%;
	color: #fff;
	padding-top: 10px;
	height: 22px;
	line-height: 0.8;
}

#toolbar ul li a span {
	font-size: 1.0rem;
	line-height: 34px;
	vertical-align: middle;
	margin-left: 10px;
	letter-spacing: 1px;
}

#nav {position: relative;}

#toolbar ul li ul li {width: 100%;border-bottom: 1px solid #fff;}
#toolbar ul li ul li a {
	width: 100%;
	padding: 0px;
	height: 28px;
	line-height: 28px;
}

/* --- 右侧固定卡片--- */
.side-card {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-btn {
    width: 50px;
    height: 50px;
    background-color: #666;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background-color 0.3s;
    position: relative;
}

.side-btn:hover {background-color: #0056a8;}

.phone-popover {
    position: absolute;
    right: 60px;
    top: 0;
    background-color: #0056a8;
    color: #fff;
    padding: 10px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.phone-popover::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent #0056a8;
}

.side-btn.phone:hover .phone-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#backToTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 768px) {.side-card {display:none;}}