@media (max-width: 768px) {
html {
font-size: calc(100vw / 18);
}
}
@media (min-width: 768px) and (max-width: 1921.99px) {
html {
font-size: calc(100vw / 19.2);
}
}
@media (min-width: 1922px) and (max-width: 2558.99px) {
html {
font-size: calc(100vw / 22.4);
}
}
@media (min-width: 2559px) and (max-width: 4000px) {
html {
font-size: calc(100vw / 25.6);
}
}
/* 手机 */
@media (max-width: 768px) {
/* banner */
.wp-banner-section {
position: relative;
width: 100%;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg {
width: 100%;
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center bottom;
transform: scale(1.04);
transition: transform 5s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg .pcshcuashci {
display: none;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg .shoujishcuashci {
display: block;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content {
position: relative;
z-index: 3;
width: 100%;
height: 100%;
padding: 0 5%;
margin: 0 auto;
padding-top: 20vh;
text-align: center;
color: #fff;
box-sizing: border-box;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content h3 {
margin: 0;
text-align: left;
font-size: 1rem;
line-height: 1.6;
font-weight: 700;
color: #fff;
text-shadow: 0 0.13333333rem 0.2rem rgba(35, 88, 145, 0.22);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content p {
margin: 0.66666667rem 0 0;
font-size: 0.66666667rem;
text-align: left;
line-height: 1.8;
font-weight: 400;
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 0.13333333rem 0.13333333rem rgba(35, 88, 145, 0.18);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns {
display: flex;
justify-content: left;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
/* 蓝色块：默认只在右侧 */
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 4rem;
height: 1.26666667rem;
padding: 0 0.4rem;
border-radius: 0.33333333rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.53333333rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.13333333rem 0.2rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.53333333rem;
height: 0.53333333rem;
transform: rotate(45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.26666667rem;
height: 0.26666667rem;
right: 0.16666667rem;
top: 0.16666667rem;
border-top: 0.06666667rem solid #fff;
border-right: 0.06666667rem solid #fff;
box-sizing: border-box;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.2rem;
right: 0.26666667rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.26666667rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide.swiper-slide-active .wp-banner-bg img {
transform: scale(1);
}
.wp-banner-section .wp-banner-swiper .wp-banner-nav {
position: absolute;
top: 50%;
z-index: 10;
width: 1.33333333rem;
height: 1.33333333rem;
margin-top: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(0.66666667rem);
-webkit-backdrop-filter: blur(0.66666667rem);
border: 0.06666667rem solid rgba(255, 255, 255, 0.42);
cursor: pointer;
transform: translateY(0.66666667rem);
transition: all 0.35s ease;
}
.wp-banner-section .wp-banner-swiper .wp-banner-prev {
left: 0.66666667rem;
}
.wp-banner-section .wp-banner-swiper .wp-banner-next {
right: 0.66666667rem;
}
.wp-banner-section .wp-banner-swiper .wp-banner-nav::before {
content: "";
position: absolute;
width: 0.26666667rem;
height: 0.26666667rem;
top: 50%;
left: 50%;
border-top: 0.06666667rem solid #fff;
border-right: 0.06666667rem solid #fff;
}
.wp-banner-section .wp-banner-swiper .wp-banner-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.wp-banner-section .wp-banner-swiper .wp-banner-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.wp-banner-section .wp-banner-swiper.is-single .wp-banner-nav {
display: none !important;
}
.wp-banner-section .wp-banner-swiper {
user-select: none;
}
.wp-banner-section .wp-banner-swiper * {
user-select: none;
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide .wp-banner-content h3 {
animation: wpBannerFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide .wp-banner-content p {
animation: wpBannerFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns {
animation: wpBannerFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes wpBannerFadeUp {
from {
opacity: 0;
transform: translateY(2.33333333rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide.swiper-slide-active .wp-banner-bg img {
transform: scale(1);
}
/* 产品展示 */
.wp-product-section {
position: relative;
width: 100%;
padding: 10% 0;
background: #fff;
overflow: hidden;
}
.wp-product-section .wp-product-bg-text {
position: absolute;
top: 1.46666667rem;
left: 19%;
z-index: 1;
font-size: 2rem;
line-height: 1;
font-weight: 700;
color: rgba(10, 35, 70, 0.035);
pointer-events: none;
white-space: nowrap;
}
.wp-product-section .wp-product-title {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 1.33333333rem;
}
.wp-product-section .wp-product-title h2 {
margin: 0;
font-size: 0.9rem;
font-weight: 500;
color: #222;
}
.wp-product-section .wp-product-title span {
display: block;
width: 3.2rem;
height: 0.13333333rem;
margin: 0.66666667rem auto 0;
background: #033e80;
}
.wp-product-section .wp-product-wrap {
position: relative;
z-index: 3;
width: 100%;
border-top: 0.06666667rem solid #d8d8d8;
border-bottom: 0.06666667rem solid #d8d8d8;
border-left: 0;
}
.wp-product-section .wp-product-wrap .wp-product-swiper {
width: 100%;
overflow: hidden;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card {
position: relative;
height: 14.66666667rem;
padding: 0.66666667rem;
background: #fff;
border-left: 0.06666667rem solid #d8d8d8;
box-sizing: border-box;
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.42s ease;
overflow: hidden;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-hot {
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 2.66666667rem;
height: 2.66666667rem;
background: #033e80;
color: #fff;
font-size: 0.53333333rem;
font-weight: 600;
line-height: 1;
clip-path: polygon(0 0, 100% 0, 0 100%);
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-hot span {
position: absolute;
top: 0.66666667rem;
left: 0.13333333rem;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-logo {
position: relative;
z-index: 2;
width: 3.33333333rem;
height: 1.33333333rem;
display: flex;
justify-content: right;
float: right;
align-items: center;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-logo img {
width: 100%;
height: 100%;
text-align: right;
object-fit: contain;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-img {
height: 6.66666667rem;
width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-img img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-line {
width: 100%;
height: 0.03333333rem;
margin: 0.33333333rem auto 0.8rem;
background: #03366c;
transition: background 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-meta {
position: relative;
padding-left: 0.33333333rem;
margin-bottom: 0.66666667rem;
font-size: 0.53333333rem;
line-height: 1.4;
color: #777;
transition: all 0.5s;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-meta::before {
content: "";
position: absolute;
left: 0;
top: 0.33333333rem;
width: 0.13333333rem;
height: 0.13333333rem;
border-radius: 50%;
background: #0357b1;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-name {
display: block;
font-size: 0.66666667rem;
line-height: 1.6;
font-weight: 600;
color: #222;
text-decoration: none;
transition: color 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-more {
margin-top: 0.66666667rem;
display: inline-flex;
align-items: center;
gap: 0.33333333rem;
font-size: 0.53333333rem;
color: #888;
text-decoration: none;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-more::after {
content: "→";
font-size: 0.53333333rem;
line-height: 1;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-more:hover {
color: #000;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card::before {
content: "";
position: absolute;
inset: 0;
border-top: 0 solid #033e80;
pointer-events: none;
transition: border 0.35s ease;
}
.wp-product-section .wp-product-bottom {
position: absolute;
z-index: 4;
width: 100%;
top: 50%;
padding: 0 2%;
}
.wp-product-section .wp-product-bottom .wp-product-bottom-line {
display: none;
}
.wp-product-section .wp-product-bottom .wp-product-arrows {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.33333333rem;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow {
position: relative;
width: 1.33333333rem;
height: 1.33333333rem;
border: none;
border-radius: 50%;
background: #ffffff54;
backdrop-filter: blur(0.66666667rem);
-webkit-backdrop-filter: blur(0.66666667rem);
box-shadow: 0 0.33333333rem 1rem rgba(0, 73, 135, 0.12);
cursor: pointer;
transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow::before {
content: "";
position: absolute;
width: 0.26666667rem;
height: 0.26666667rem;
top: 50%;
left: 50%;
border-top: 0.06666667rem solid #033e80;
border-right: 0.06666667rem solid #033e80;
transition: border-color 0.35s ease;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow:hover {
background: #033e80;
box-shadow: 0 0.33333333rem 1rem rgba(0, 73, 135, 0.25);
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow:hover::before {
border-color: #fff;
}
/* 产品中心 */
.lc-product-section {
position: relative;
overflow: hidden;
min-height: 100vh;
padding: 10% 5%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.lc-product-section .lc-product-inner {
position: relative;
z-index: 2;
width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 1.33333333rem;
}
.lc-product-section .lc-product-inner .lc-product-left {
width: 100%;
position: relative;
z-index: 3;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-section-kicker {
margin-bottom: 2rem;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-section-kicker span {
position: relative;
display: inline-block;
font-size: 0.9rem;
line-height: 1.6;
color: #222;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-section-kicker span::after {
content: "";
position: absolute;
left: 0.13333333rem;
bottom: -0.66666667rem;
width: 3.2rem;
height: 0.13333333rem;
background: #115aa0;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-title {
margin: 0;
color: #2f3944;
font-size: 1.06666667rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-title * {
font-size: 0.9rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns {
display: flex;
margin-top: 2rem;
/* 蓝色块：默认只在右侧 */
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 4rem;
height: 1.26666667rem;
padding: 0 0.4rem;
border-radius: 0.33333333rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.53333333rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.13333333rem 0.2rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.53333333rem;
height: 0.53333333rem;
transform: rotate(45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.26666667rem;
height: 0.26666667rem;
right: 0.16666667rem;
top: 0.16666667rem;
border-top: 0.06666667rem solid #fff;
border-right: 0.06666667rem solid #fff;
box-sizing: border-box;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.2rem;
right: 0.26666667rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.26666667rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features {
margin-top: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item {
display: flex;
align-items: center;
gap: 0.66666667rem;
margin-bottom: 1.33333333rem;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-icon {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(180deg, #84b7ec 0%, #09398d 100%);
box-shadow: 0 0.66666667rem 1.33333333rem rgba(25, 91, 158, 0.22);
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-icon .icon {
display: block;
width: 1rem;
height: 1rem;
fill: #fff;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-text h3 {
margin: 0 0 0.66666667rem;
color: #04376d;
font-size: 0.8rem;
line-height: 1.2;
font-weight: 400;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-text p {
margin: 0;
color: #333;
font-size: 0.66666667rem;
line-height: 1.7;
}
.lc-product-section .lc-product-inner .lc-product-right {
width: 100%;
position: relative;
height: 100%;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col {
position: relative;
width: 47%;
height: 100%;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card {
position: relative;
display: block;
width: 100%;
height: 8rem;
margin-bottom: 0.66666667rem;
border-radius: 0.33333333rem;
box-shadow: 0 0.33333333rem 0.66666667rem rgba(20, 55, 92, 0.15);
transform: translateZ(0);
overflow: hidden;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card img {
object-fit: cover;
overflow: hidden;
width: 100%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card .lc-card-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 67, 123, 0.84);
color: #fff;
font-size: 0.66666667rem;
line-height: 1;
font-weight: 700;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card:hover img {
transform: scale(1.08);
filter: saturate(1.08) contrast(1.04);
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col-left {
padding-top: 0;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col-right {
padding-top: 0;
}
/* 关于望鹏 */
.wp-about-section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wp-about-section .wp-about-bg {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}
.wp-about-section .wp-about-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
display: block;
}
.wp-about-section .wp-about-blue {
opacity: 0.85;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #09398d 0%, #093f97 70%, #0262c6 100%);
}
.wp-about-section .wp-about-container {
position: relative;
z-index: 4;
width: 100%;
min-height: 100%;
padding: 10% 5%;
margin: 0 auto;
}
.wp-about-section .wp-about-container .wp-about-content {
width: 100%;
color: #fff;
}
.wp-about-section .wp-about-container .wp-about-content .wp-section-label {
margin-bottom: 2rem;
}
.wp-about-section .wp-about-container .wp-about-content .wp-section-label span {
position: relative;
display: block;
font-size: 0.9rem;
line-height: 1.4;
font-weight: 500;
}
.wp-about-section .wp-about-container .wp-about-content .wp-section-label span::after {
content: "";
position: absolute;
left: 0.13333333rem;
bottom: -0.66666667rem;
width: 3.2rem;
height: 0.13333333rem;
background: rgba(255, 255, 255, 0.9);
}
.wp-about-section .wp-about-container .wp-about-content .wp-about-title {
width: 100%;
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
font-weight: 700;
}
.wp-about-section .wp-about-container .wp-about-content .wp-about-desc {
width: 100%;
margin: 2rem 0 0;
color: #fff !important;
font-size: 0.66666667rem !important;
line-height: 1.8 !important;
}
.wp-about-section .wp-about-container .wp-about-content .wp-about-desc * {
color: #fff !important;
font-size: 0.66666667rem !important;
line-height: 1.8 !important;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns {
display: flex;
margin-top: 2rem;
/* 蓝色块：默认只在右侧 */
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 4rem;
height: 1.26666667rem;
padding: 0 0.4rem;
border-radius: 0.33333333rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.53333333rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.13333333rem 0.2rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.53333333rem;
height: 0.53333333rem;
transform: rotate(45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.26666667rem;
height: 0.26666667rem;
right: 0.16666667rem;
top: 0.16666667rem;
border-top: 0.06666667rem solid #fff;
border-right: 0.06666667rem solid #fff;
box-sizing: border-box;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.2rem;
right: 0.26666667rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.26666667rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 荣誉资质 */
.cnsaunciaz {
width: 100%;
height: 22rem;
padding: 10% 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.cnsaunciaz .wcainc {
width: 100%;
padding: 0 5%;
margin: 0 auto;
}
.cnsaunciaz .wcainc .wp-section-label {
margin-bottom: 2rem;
}
.cnsaunciaz .wcainc .wp-section-label span {
position: relative;
display: block;
font-size: 0.9rem;
line-height: 1.4;
font-weight: 500;
}
.cnsaunciaz .wcainc .wp-section-label span::after {
content: "";
position: absolute;
left: 0.13333333rem;
bottom: -1.13333333rem;
width: 3.2rem;
height: 0.13333333rem;
background: #115aa0;
}
.cnsaunciaz .wcainc .wp-about-title {
width: 100%;
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
font-weight: 700;
}
.cnsaunciaz .travel-section {
position: relative;
}
.cnsaunciaz .travel-section .travel-wrap {
width: 100%;
margin: 0 auto;
position: absolute;
top: 2rem;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper {
overflow: visible;
transition-timing-function: linear !important;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper {
align-items: center;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide {
width: 100%;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card {
position: relative;
width: 100%;
height: 10rem;
overflow: hidden;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
transition: box-shadow 0.35s ease;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card .travel-card__img {
width: 100%;
height: 10rem;
overflow: hidden;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card .travel-card__img img {
width: 100%;
height: 100%;
object-fit: contain;
}
.cnsaunciaz .travel-section .travel-nav {
position: absolute;
top: 6.66666667rem;
left: 51%;
width: 90%;
transform: translate(-50%, -50%);
z-index: 10;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev,
.cnsaunciaz .travel-section .travel-nav .travel-next {
position: absolute;
top: 50%;
z-index: 10;
width: 1.33333333rem;
height: 1.33333333rem;
margin-top: -2rem;
border-radius: 50%;
background: #ffffff57;
backdrop-filter: blur(0.66666667rem);
-webkit-backdrop-filter: blur(0.66666667rem);
border: 0.06666667rem solid rgba(233, 233, 233, 0.42);
cursor: pointer;
transform: translateY(0.66666667rem);
transition: all 0.35s ease;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev {
left: 0;
}
.cnsaunciaz .travel-section .travel-nav .travel-next {
right: 0;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev::before,
.cnsaunciaz .travel-section .travel-nav .travel-next::before {
content: "";
position: absolute;
width: 0.33333333rem;
height: 0.33333333rem;
top: 50%;
left: 50%;
border-top: 0.06666667rem solid #03366c;
border-right: 0.06666667rem solid #03366c;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.cnsaunciaz .travel-section .travel-nav .travel-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.cnsaunciaz .travel-section .travel-nav .travel-prev:hover,
.cnsaunciaz .travel-section .travel-nav .travel-next:hover {
background-color: #03366c;
transition: all 0.35s ease;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev:hover::before,
.cnsaunciaz .travel-section .travel-nav .travel-next:hover::before {
border-top: 0.06666667rem solid #fff;
border-right: 0.06666667rem solid #fff;
transition: all 0.35s ease;
}
/* 新闻中心 */
.news {
width: 100%;
min-height: 30rem;
padding: 10% 5%;
background-color: #fff;
position: relative;
overflow: hidden;
}
.news .wcainc {
width: 100%;
margin: 0 auto;
position: relative;
}
.news .wcainc .wp-section-label {
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.news .wcainc .wp-section-label span {
position: relative;
display: block;
font-size: 0.9rem;
line-height: 1.4;
font-weight: 500;
}
.news .wcainc .wp-section-label span::after {
content: "";
position: absolute;
left: 0.13333333rem;
bottom: -1.13333333rem;
width: 3.2rem;
height: 0.13333333rem;
background: #115aa0;
}
.news .wcainc .acsaifenehudeb {
display: flex;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.news .wcainc .acsaifenehudeb .wp-about-title {
width: 100%;
margin: 0;
font-size: 0.9rem;
line-height: 1.6;
font-weight: 700;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns {
width: 100%;
display: flex;
margin-top: 2rem;
/* 蓝色块：默认只在右侧 */
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 4rem;
height: 1.26666667rem;
padding: 0 0.4rem;
border-radius: 0.33333333rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.53333333rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.13333333rem 0.2rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.53333333rem;
height: 0.53333333rem;
transform: rotate(45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.26666667rem;
height: 0.26666667rem;
right: 0.16666667rem;
top: 0.16666667rem;
border-top: 0.06666667rem solid #fff;
border-right: 0.06666667rem solid #fff;
box-sizing: border-box;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.2rem;
right: 0.26666667rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 0.26666667rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.news .wcainc .section-energy {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.news .wcainc .section-energy .energy-inner {
width: 100%;
margin: 0 auto;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs {
position: relative;
width: 19rem;
height: 19rem;
margin: 0 auto;
transition: all 0.5s;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs .scsasimgbg {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
margin: -1.66666rem 0 0 -11rem;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs .indexBdd1 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: haha1 10s linear infinite;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs .indexBdcca {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: haha2 10s linear infinite;
}
.news .lx-news-section {
width: 100%;
position: absolute;
top: 14.66666667rem;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap {
position: relative;
width: 100%;
margin: 0 auto;
}
.news .lx-news-section .lx-news-wrap .lx-news-source {
display: none;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper {
width: 100%;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide {
width: 44%;
flex-shrink: 0;
height: 12rem;
transition: width 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
border-radius: 0.33333333rem;
overflow: hidden;
cursor: pointer;
transition: flex 0.62s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-img {
position: absolute;
inset: 0;
z-index: 1;
transform: scale(1.06);
transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.55s ease;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content {
position: relative;
z-index: 3;
height: 100%;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal {
display: none;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active {
position: absolute;
inset: 0;
padding: 0.66666667rem;
transition: opacity 0.26s ease 0.08s, visibility 0.26s ease 0.08s;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .lx-news-active-date {
position: absolute;
right: 0.66666667rem;
top: 1rem;
text-align: center;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .lx-news-active-date span {
display: block;
margin-bottom: 0.13333333rem;
font-size: 0.66666667rem;
color: rgba(255, 255, 255, 0.78);
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .lx-news-active-date strong {
display: block;
font-size: 0.8rem;
color: #fff;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active h3 {
position: absolute;
left: 0.33333333rem;
bottom: 2rem;
margin: 0;
font-size: 0.666666rem;
line-height: 1.8;
font-weight: 700;
color: #fff;
width: 90%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .moredun {
position: absolute;
left: 0.33333333rem;
bottom: 1rem;
font-size: 0.5rem;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
white-space: nowrap;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev,
.news .lx-news-section .lx-news-wrap .lx-news-next {
display: none;
}
}
/* pc */
@media (min-width: 768px) {
/* banner */
.wp-banner-section {
position: relative;
width: 100%;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg {
width: 100%;
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center bottom;
transform: scale(1.04);
transition: transform 5s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg .pcshcuashci {
display: block;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-bg .shoujishcuashci {
display: none;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content {
position: relative;
z-index: 3;
width: 15.2rem;
height: 100%;
margin: 0 auto;
padding-top: 30vh;
text-align: center;
color: #fff;
box-sizing: border-box;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content h3 {
margin: 0;
font-size: 0.6rem;
line-height: 1.6;
font-weight: 700;
color: #fff;
text-shadow: 0 0.05rem 0.1rem rgba(35, 88, 145, 0.22);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content p {
margin: 0.3rem 0 0;
font-size: 0.3rem;
line-height: 1.8;
font-weight: 400;
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 0.06rem 0.1rem rgba(35, 88, 145, 0.18);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 0.4rem;
/* 蓝色块：默认只在右侧 */
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 1.6rem;
height: 0.5rem;
padding: 0 0.14rem 0 0.22rem;
border-radius: 0.15rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.16rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.05rem 0.15rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.32rem;
height: 0.32rem;
transform: rotate(-45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn i::before {
content: "";
position: absolute;
width: 0.17rem;
height: 0.02rem;
right: 0.11rem;
top: 0.15rem;
background: #fff;
transition: width 0.35s ease;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.11rem;
height: 0.11rem;
right: 0.11rem;
top: 0.1rem;
border-top: 0.02rem solid #fff;
border-right: 0.02rem solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.08rem;
right: 0.15rem;
width: 0.35rem;
height: 0.35rem;
border-radius: 0.1rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn:hover {
color: #fff;
transform: translateY(-0.02rem);
box-shadow: 0 0.1rem 0.25rem rgba(0, 73, 135, 0.26);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn:hover span {
color: #fff;
transform: translateX(0.05rem);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn:hover i {
transform: rotate(0deg);
transform: translateX(-0.05rem);
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn:hover i::before {
width: 0.14rem;
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns .wp-banner-btn:hover::before {
top: 0.08rem;
right: 0.08rem;
width: calc(100% - (16rem / 100));
}
.wp-banner-section .wp-banner-swiper .swiper-wrapper .wp-banner-slide.swiper-slide-active .wp-banner-bg img {
transform: scale(1);
}
.wp-banner-section .wp-banner-swiper .wp-banner-nav {
position: absolute;
top: 50%;
z-index: 10;
width: 0.5rem;
height: 0.5rem;
margin-top: -0.3rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.22);
backdrop-filter: blur(0.1rem);
-webkit-backdrop-filter: blur(0.1rem);
border: 0.01rem solid rgba(255, 255, 255, 0.42);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(0.1rem);
transition: all 0.35s ease;
}
.wp-banner-section .wp-banner-swiper .wp-banner-prev {
left: 1.1rem;
}
.wp-banner-section .wp-banner-swiper .wp-banner-next {
right: 1.1rem;
}
.wp-banner-section .wp-banner-swiper .wp-banner-nav::before {
content: "";
position: absolute;
width: 0.1rem;
height: 0.1rem;
top: 50%;
left: 50%;
border-top: 0.02rem solid #fff;
border-right: 0.02rem solid #fff;
}
.wp-banner-section .wp-banner-swiper .wp-banner-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.wp-banner-section .wp-banner-swiper .wp-banner-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.wp-banner-section .wp-banner-swiper .wp-banner-nav:hover {
background: rgba(0, 73, 135, 0.72);
border-color: rgba(255, 255, 255, 0.65);
}
.wp-banner-section .wp-banner-swiper.is-multiple:hover .wp-banner-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.wp-banner-section .wp-banner-swiper.is-single .wp-banner-nav {
display: none !important;
}
.wp-banner-section .wp-banner-swiper {
user-select: none;
}
.wp-banner-section .wp-banner-swiper * {
user-select: none;
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide .wp-banner-content h3 {
animation: wpBannerFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide .wp-banner-content p {
animation: wpBannerFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide .wp-banner-content .wp-banner-btns {
animation: wpBannerFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes wpBannerFadeUp {
from {
opacity: 0;
transform: translateY(0.35rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wp-banner-section .wp-banner-slide.swiper-slide-active .swiper-wrapper .wp-banner-slide.swiper-slide-active .wp-banner-bg img {
transform: scale(1);
}
/* 产品展示 */
.wp-product-section {
position: relative;
width: 100%;
padding: 1rem 0 0.65rem;
background: #fff;
overflow: hidden;
}
.wp-product-section .wp-product-bg-text {
position: absolute;
top: -0.8rem;
left: 5%;
z-index: 1;
font-size: 1.9rem;
line-height: 1;
font-weight: 700;
color: rgba(10, 35, 70, 0.035);
pointer-events: none;
white-space: nowrap;
}
.wp-product-section .wp-product-title {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 0.5rem;
}
.wp-product-section .wp-product-title h2 {
margin: -0.2rem 0 0;
font-size: 0.24rem;
font-weight: 500;
color: #222;
}
.wp-product-section .wp-product-title span {
display: block;
width: 0.48rem;
height: 0.02rem;
margin: 0.14rem auto 0;
background: #033e80;
}
.wp-product-section .wp-product-wrap {
position: relative;
z-index: 3;
width: 100%;
border-top: 0.01rem solid #d8d8d8;
border-bottom: 0.01rem solid #d8d8d8;
border-left: 0;
}
.wp-product-section .wp-product-wrap .wp-product-swiper {
width: 100%;
overflow: hidden;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card {
position: relative;
height: 5.9rem;
padding: 0.4rem;
background: #fff;
border-left: 0.01rem solid #d8d8d8;
box-sizing: border-box;
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s cubic-bezier(0.22, 1, 0.36, 1), background 0.42s ease;
overflow: hidden;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-hot {
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 0.8rem;
height: 0.7rem;
background: #033e80;
color: #fff;
font-size: 0.16rem;
font-weight: 600;
line-height: 1;
clip-path: polygon(0 0, 100% 0, 0 100%);
opacity: 0;
transition: opacity 0.5s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-hot span {
position: absolute;
top: 0.13rem;
left: 0.07rem;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-logo {
position: relative;
z-index: 2;
width: 1.2rem;
height: 0.3rem;
display: flex;
justify-content: right;
float: right;
align-items: center;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-logo img {
width: 100%;
height: 100%;
text-align: right;
object-fit: contain;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-img {
height: 3.5rem;
width: 3.5rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-img img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-line {
width: 100%;
height: 0.01rem;
margin: 0.08rem auto 0.25rem;
background: #333;
transition: background 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-meta {
position: relative;
padding-left: 0.1rem;
margin-bottom: 0.18rem;
font-size: 0.18rem;
line-height: 1.4;
color: #777;
transition: all 0.5s;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-meta::before {
content: "";
position: absolute;
left: 0;
top: 0.09rem;
width: 0.04rem;
height: 0.04rem;
border-radius: 50%;
background: #0357b1;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-name {
display: block;
min-height: 0.24rem;
font-size: 0.16rem;
line-height: 1.6;
font-weight: 600;
color: #222;
text-decoration: none;
transition: color 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-more {
position: absolute;
right: 0.28rem;
bottom: 0.34rem;
display: inline-flex;
align-items: center;
gap: 0.06rem;
font-size: 0.16rem;
color: #888;
text-decoration: none;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-more::after {
content: "→";
font-size: 0.16rem;
line-height: 1;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card .wp-product-more:hover {
color: #000;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card::before {
content: "";
position: absolute;
inset: 0;
border-top: 0 solid #033e80;
pointer-events: none;
transition: border 0.35s ease;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card:hover {
z-index: 5;
transform: translateY(0);
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.16);
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card:hover .wp-product-hot {
opacity: 1;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card:hover .wp-product-img img {
transform: translateY(-0.08rem) scale(1.04);
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card:hover .wp-product-meta {
color: #000;
transition: all 0.5s;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card:hover .wp-product-line {
background: #0455ad;
transition: all 0.5s;
}
.wp-product-section .wp-product-wrap .wp-product-swiper .swiper-wrapper .wp-product-card:hover .wp-product-name {
color: #03366c;
transition: all 0.5s;
}
.wp-product-section .wp-product-bottom {
position: relative;
z-index: 4;
width: 14rem;
margin: 0.5rem auto 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.3rem;
}
.wp-product-section .wp-product-bottom .wp-product-bottom-line {
flex: 1;
height: 0.01rem;
background: #4b4b4b;
}
.wp-product-section .wp-product-bottom .wp-product-arrows {
display: flex;
align-items: center;
gap: 0.15rem;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow {
position: relative;
width: 0.3rem;
height: 0.3rem;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: 0 0.05rem 0.15rem rgba(0, 73, 135, 0.12);
cursor: pointer;
transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow::before {
content: "";
position: absolute;
width: 0.06rem;
height: 0.06rem;
top: 50%;
left: 50%;
border-top: 0.02rem solid #033e80;
border-right: 0.02rem solid #033e80;
transition: border-color 0.35s ease;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow:hover,
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow.is-active {
background: #033e80;
box-shadow: 0 0.05rem 0.15rem rgba(0, 73, 135, 0.25);
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow:hover::before,
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow.is-active::before {
border-color: #fff;
}
.wp-product-section .wp-product-bottom .wp-product-arrows .wp-product-arrow:hover {
transform: translateY(-0.02rem);
}
/* 产品中心 */
.lc-product-section {
position: relative;
overflow: hidden;
min-height: 100vh;
padding: 1rem 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.lc-product-section .lc-product-inner {
position: relative;
z-index: 2;
width: 14rem;
margin: 0 auto;
display: flex;
align-items: center;
gap: 0.8rem;
}
.lc-product-section .lc-product-inner .lc-product-left {
width: 4.5rem;
position: relative;
z-index: 3;
transform: translateY(-0.1rem);
}
.lc-product-section .lc-product-inner .lc-product-left .lc-section-kicker {
margin-bottom: 0.7rem;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-section-kicker span {
position: relative;
display: inline-block;
font-size: 0.24rem;
line-height: 1.6;
color: #222;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-section-kicker span::after {
content: "";
position: absolute;
left: 0.02rem;
bottom: -0.17rem;
width: 0.48rem;
height: 0.02rem;
background: #115aa0;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-title {
margin: 0;
color: #2f3944;
font-size: 0.36rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-title * {
font-size: 0.36rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns {
display: flex;
margin-top: 1rem;
/* 蓝色块：默认只在右侧 */
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 1.6rem;
height: 0.5rem;
padding: 0 0.14rem 0 0.22rem;
border-radius: 0.15rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.16rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.05rem 0.15rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.32rem;
height: 0.32rem;
transform: rotate(-45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn i::before {
content: "";
position: absolute;
width: 0.17rem;
height: 0.02rem;
right: 0.11rem;
top: 0.15rem;
background: #fff;
transition: width 0.35s ease;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.11rem;
height: 0.11rem;
right: 0.11rem;
top: 0.1rem;
border-top: 0.02rem solid #fff;
border-right: 0.02rem solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.08rem;
right: 0.15rem;
width: 0.35rem;
height: 0.35rem;
border-radius: 0.1rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn:hover {
color: #fff;
transform: translateY(-0.02rem);
box-shadow: 0 0.1rem 0.25rem rgba(0, 73, 135, 0.26);
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn:hover span {
color: #fff;
transform: translateX(0.05rem);
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn:hover i {
transform: rotate(0deg);
transform: translateX(-0.05rem);
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn:hover i::before {
width: 0.14rem;
}
.lc-product-section .lc-product-inner .lc-product-left .wp-banner-btns .wp-banner-btn:hover::before {
top: 0.08rem;
right: 0.08rem;
width: calc(100% - (16rem / 100));
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item {
display: flex;
align-items: center;
gap: 0.2rem;
margin-bottom: 0.6rem;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-icon {
flex: 0 0 0.55rem;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(180deg, #84b7ec 0%, #09398d 100%);
box-shadow: 0 0.1rem 0.2rem rgba(25, 91, 158, 0.22);
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-icon .icon {
display: block;
width: 0.3rem;
height: 0.3rem;
fill: #fff;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-text h3 {
margin: 0 0 0.3rem;
color: #04376d;
font-size: 0.22rem;
line-height: 1.2;
font-weight: 400;
}
.lc-product-section .lc-product-inner .lc-product-left .lc-product-features .lc-feature-item .lc-feature-text p {
margin: 0;
color: #333;
font-size: 0.18rem;
line-height: 1.7;
}
.lc-product-section .lc-product-inner .lc-product-right {
width: 9.5rem;
position: relative;
height: 8.5rem;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col {
position: relative;
height: 100%;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card {
position: relative;
display: block;
width: 4rem;
height: 3rem;
margin-bottom: 1rem;
border-radius: 0.15rem;
box-shadow: 0 0.1rem 0.3rem rgba(20, 55, 92, 0.15);
transform: translateZ(0);
overflow: hidden;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card img {
object-fit: cover;
overflow: hidden;
width: 100%;
height: 100%;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card .lc-card-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
height: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 67, 123, 0.84);
color: #fff;
font-size: 0.18rem;
line-height: 1;
font-weight: 700;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col .lc-product-card:hover img {
transform: scale(1.08);
filter: saturate(1.08) contrast(1.04);
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col-left {
padding-top: 2.2rem;
}
.lc-product-section .lc-product-inner .lc-product-right .lc-product-columns .lc-product-col-right {
padding-top: 0;
}
/* 关于望鹏 */
.wp-about-section {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.wp-about-section .wp-about-bg {
position: absolute;
inset: 0;
z-index: 1;
}
.wp-about-section .wp-about-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center right;
display: block;
}
.wp-about-section .wp-about-blue {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 56%;
height: 100%;
background: linear-gradient(180deg, #09398d 0%, #093f97 70%, #0262c6 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.wp-about-section .wp-about-container {
position: relative;
z-index: 4;
width: 14rem;
min-height: 100vh;
margin: 0 auto;
display: flex;
align-items: center;
}
.wp-about-section .wp-about-container .wp-about-content {
width: 4.5rem;
color: #fff;
}
.wp-about-section .wp-about-container .wp-about-content .wp-section-label {
margin-bottom: 1rem;
}
.wp-about-section .wp-about-container .wp-about-content .wp-section-label span {
position: relative;
display: block;
font-size: 0.24rem;
line-height: 1.4;
font-weight: 500;
}
.wp-about-section .wp-about-container .wp-about-content .wp-section-label span::after {
content: "";
position: absolute;
left: 0.02rem;
bottom: -0.17rem;
width: 0.48rem;
height: 0.02rem;
background: rgba(255, 255, 255, 0.9);
}
.wp-about-section .wp-about-container .wp-about-content .wp-about-title {
width: 76%;
margin: 0;
font-size: 0.36rem;
line-height: 1.6;
font-weight: 700;
}
.wp-about-section .wp-about-container .wp-about-content .wp-about-desc {
width: 5.2rem;
margin: 0.8rem 0 0;
color: #fff !important;
font-size: 0.2rem !important;
line-height: 1.8 !important;
}
.wp-about-section .wp-about-container .wp-about-content .wp-about-desc * {
color: #fff !important;
font-size: 0.2rem !important;
line-height: 1.8 !important;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns {
display: flex;
margin-top: 1rem;
/* 蓝色块：默认只在右侧 */
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 1.6rem;
height: 0.5rem;
padding: 0 0.14rem 0 0.22rem;
border-radius: 0.15rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.16rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.05rem 0.15rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.32rem;
height: 0.32rem;
transform: rotate(-45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn i::before {
content: "";
position: absolute;
width: 0.17rem;
height: 0.02rem;
right: 0.11rem;
top: 0.15rem;
background: #fff;
transition: width 0.35s ease;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.11rem;
height: 0.11rem;
right: 0.11rem;
top: 0.1rem;
border-top: 0.02rem solid #fff;
border-right: 0.02rem solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.08rem;
right: 0.15rem;
width: 0.35rem;
height: 0.35rem;
border-radius: 0.1rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn:hover {
color: #fff;
transform: translateY(-0.02rem);
box-shadow: 0 0.1rem 0.25rem rgba(0, 73, 135, 0.26);
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn:hover span {
color: #fff;
transform: translateX(0.05rem);
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn:hover i {
transform: rotate(0deg);
transform: translateX(-0.05rem);
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn:hover i::before {
width: 0.14rem;
}
.wp-about-section .wp-about-container .wp-about-content .wp-banner-btns .wp-banner-btn:hover::before {
top: 0.08rem;
right: 0.08rem;
width: calc(100% - (16rem / 100));
}
/* 荣誉资质 */
.cnsaunciaz {
width: 100%;
height: 100%;
padding: 1rem 0;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.cnsaunciaz .wcainc {
width: 14rem;
margin: 0 auto;
}
.cnsaunciaz .wcainc .wp-section-label {
margin-bottom: 0.6rem;
}
.cnsaunciaz .wcainc .wp-section-label span {
position: relative;
display: block;
font-size: 0.24rem;
line-height: 1.4;
font-weight: 500;
}
.cnsaunciaz .wcainc .wp-section-label span::after {
content: "";
position: absolute;
left: 0.02rem;
bottom: -0.17rem;
width: 0.48rem;
height: 0.02rem;
background: #115aa0;
}
.cnsaunciaz .wcainc .wp-about-title {
width: 3.5rem;
margin: 0;
font-size: 0.36rem;
line-height: 1.6;
font-weight: 700;
}
.cnsaunciaz .travel-section {
position: relative;
height: 5.7rem;
}
.cnsaunciaz .travel-section .travel-wrap {
width: 100%;
margin: 0 auto;
position: absolute;
top: 1.9rem;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper {
overflow: visible;
transition-timing-function: linear !important;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper {
align-items: center;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide {
width: 3rem;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
/* JS 自动添加：上浮 */
/* JS 自动添加：下沉/正常 */
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card {
position: relative;
width: 100%;
height: 4rem;
overflow: hidden;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
transition: box-shadow 0.35s ease;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card .travel-card__img {
width: 3rem;
height: 4rem;
overflow: hidden;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card .travel-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card.is-up {
transform: translate3d(0, -1.2rem, 0);
}
.cnsaunciaz .travel-section .travel-wrap .travel-swiper .swiper-wrapper .swiper-slide .travel-card.is-down {
transform: translate3d(0, -0.2rem, 0);
}
.cnsaunciaz .travel-section .travel-nav {
position: absolute;
top: 2.5rem;
left: 51%;
width: 90%;
transform: translate(-50%, -50%);
z-index: 8;
pointer-events: none;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev,
.cnsaunciaz .travel-section .travel-nav .travel-next {
position: absolute;
top: 50%;
z-index: 10;
width: 0.5rem;
height: 0.5rem;
margin-top: -0.3rem;
border-radius: 50%;
background: #ffffff54;
backdrop-filter: blur(0.1rem);
-webkit-backdrop-filter: blur(0.1rem);
box-shadow: 0 0.05rem 0.2rem 0 #0000001e;
border: 0.01rem solid rgba(231, 231, 231, 0.11);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(0.1rem);
transition: all 0.35s ease;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev {
left: 0;
}
.cnsaunciaz .travel-section .travel-nav .travel-next {
right: 0;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev::before,
.cnsaunciaz .travel-section .travel-nav .travel-next::before {
content: "";
position: absolute;
width: 0.1rem;
height: 0.1rem;
top: 50%;
left: 50%;
border-top: 0.02rem solid #03366c;
border-right: 0.02rem solid #03366c;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev::before {
transform: translate(-35%, -50%) rotate(-135deg);
}
.cnsaunciaz .travel-section .travel-nav .travel-next::before {
transform: translate(-65%, -50%) rotate(45deg);
}
.cnsaunciaz .travel-section .travel-nav .travel-prev:hover,
.cnsaunciaz .travel-section .travel-nav .travel-next:hover {
background-color: #03366c;
transition: all 0.35s ease;
}
.cnsaunciaz .travel-section .travel-nav .travel-prev:hover::before,
.cnsaunciaz .travel-section .travel-nav .travel-next:hover::before {
border-top: 0.02rem solid #fff;
border-right: 0.02rem solid #fff;
transition: all 0.35s ease;
}
.cnsaunciaz .travel-section:hover .travel-nav .travel-prev {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
.cnsaunciaz .travel-section:hover .travel-nav .travel-next {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
}
/* 新闻中心 */
.news {
width: 100%;
min-height: 9.7rem;
padding: 1rem 0;
background-color: #fff;
position: relative;
}
.news .wcainc {
width: 14rem;
margin: 0 auto;
position: relative;
}
.news .wcainc .wp-section-label {
margin-bottom: 0.6rem;
position: relative;
z-index: 1;
}
.news .wcainc .wp-section-label span {
position: relative;
display: block;
font-size: 0.24rem;
line-height: 1.4;
font-weight: 500;
}
.news .wcainc .wp-section-label span::after {
content: "";
position: absolute;
left: 0.02rem;
bottom: -0.17rem;
width: 0.48rem;
height: 0.02rem;
background: #115aa0;
}
.news .wcainc .acsaifenehudeb {
display: flex;
justify-content: space-between;
align-items: flex-start;
position: relative;
z-index: 1;
}
.news .wcainc .acsaifenehudeb .wp-about-title {
width: 2.5rem;
margin: 0;
font-size: 0.36rem;
line-height: 1.6;
font-weight: 700;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns {
display: flex;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
width: 1.6rem;
height: 0.5rem;
padding: 0 0.14rem 0 0.22rem;
border-radius: 0.15rem;
background: rgba(255, 255, 255, 0.94);
color: #1e1e1e;
font-size: 0.16rem;
font-weight: 400;
text-decoration: none;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 0.05rem 0.15rem rgba(17, 74, 128, 0.14);
transition: color 0.38s ease, transform 0.38s ease, box-shadow 0.38s ease;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn span {
position: relative;
z-index: 2;
white-space: nowrap;
transition: color 0.35s ease, transform 0.35s ease;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn i {
position: relative;
z-index: 2;
width: 0.32rem;
height: 0.32rem;
transform: rotate(-45deg);
transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn i::before {
content: "";
position: absolute;
width: 0.17rem;
height: 0.02rem;
right: 0.11rem;
top: 0.15rem;
background: #fff;
transition: width 0.35s ease;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn i::after {
content: "";
position: absolute;
width: 0.11rem;
height: 0.11rem;
right: 0.11rem;
top: 0.1rem;
border-top: 0.02rem solid #fff;
border-right: 0.02rem solid #fff;
transform: rotate(45deg);
box-sizing: border-box;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn::before {
content: "";
position: absolute;
top: 0.08rem;
right: 0.15rem;
width: 0.35rem;
height: 0.35rem;
border-radius: 0.1rem;
background: #033e80;
z-index: 1;
transition: width 0.46s cubic-bezier(0.22, 1, 0.36, 1), height 0.46s cubic-bezier(0.22, 1, 0.36, 1), top 0.46s cubic-bezier(0.22, 1, 0.36, 1), right 0.46s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn:hover {
color: #fff;
transform: translateY(-0.02rem);
box-shadow: 0 0.1rem 0.25rem rgba(0, 73, 135, 0.26);
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn:hover span {
color: #fff;
transform: translateX(0.05rem);
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn:hover i {
transform: rotate(0deg);
transform: translateX(-0.05rem);
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn:hover i::before {
width: 0.14rem;
}
.news .wcainc .acsaifenehudeb .wp-banner-btns .wp-banner-btn:hover::before {
top: 0.08rem;
right: 0.08rem;
width: calc(100% - (16rem / 100));
}
.news .wcainc .section-energy {
position: absolute;
z-index: 0;
top: 0;
left: 22%;
width: 8.3rem;
height: 8.3rem;
margin: 0 auto;
display: flex;
justify-content: center;
overflow: hidden;
}
.news .wcainc .section-energy .energy-inner {
width: 100%;
margin: 0 auto;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs {
position: relative;
width: 7.2rem;
height: 7.2rem;
margin: 0 auto;
transition: all 0.5s;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs .scsasimgbg {
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
margin: -2.6rem 0 0 -3.56rem;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs .indexBdd1 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: haha1 10s linear infinite;
}
.news .wcainc .section-energy .energy-inner .center-wrap .indexB-bmarginT0 .indsccs .indexBdcca {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: haha2 10s linear infinite;
}
.news .lx-news-section {
width: 100%;
position: absolute;
top: 3.7rem;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap {
position: relative;
width: 14rem;
margin: 0 auto;
}
.news .lx-news-section .lx-news-wrap .lx-news-source {
display: none;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper {
width: 100%;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide {
width: 3.45rem;
flex-shrink: 0;
height: 5rem;
transition: width 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card {
position: relative;
flex: 1;
min-width: 0;
height: 100%;
border: 0.01rem solid #a9a9a9;
border-radius: 0.15rem;
background: #fff;
overflow: hidden;
cursor: pointer;
transition: flex 0.62s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-img {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
visibility: hidden;
transform: scale(1.06);
transition: opacity 0.45s ease, visibility 0.45s ease, transform 0.55s ease;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content {
position: relative;
z-index: 3;
height: 100%;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal {
position: absolute;
inset: 0;
padding: 0.34rem 0.3rem;
display: flex;
flex-direction: column;
opacity: 1;
visibility: visible;
transition: opacity 0.22s ease, visibility 0.22s ease;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal p {
margin: 0 0 0.4rem;
font-size: 0.16rem;
line-height: 1;
color: #03366c;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal h3 {
margin: 0;
font-size: 0.22rem;
line-height: 1.8;
font-weight: 400;
color: #333;
width: 2.8rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal .lx-news-bottom {
margin-top: auto;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.2rem;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal .lx-news-bottom .csakcona span {
display: block;
margin-bottom: 0.15rem;
font-size: 0.16rem;
color: #333;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal .lx-news-bottom .csakcona strong {
display: block;
font-size: 0.3rem;
color: #333;
text-align: center;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-normal .lx-news-bottom .csnuaca {
font-size: 0.16rem;
color: rgba(0, 0, 0, 0.65);
text-decoration: none;
white-space: nowrap;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active {
position: absolute;
inset: 0;
padding: 0.28rem 0.34rem 0.34rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.26s ease 0.08s, visibility 0.26s ease 0.08s;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .lx-news-active-date {
position: absolute;
right: 0.34rem;
top: 0.28rem;
text-align: center;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .lx-news-active-date span {
display: block;
margin-bottom: 0.15rem;
font-size: 0.16rem;
color: rgba(255, 255, 255, 0.78);
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .lx-news-active-date strong {
display: block;
font-size: 0.3rem;
color: #fff;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active h3 {
position: absolute;
left: 0.5rem;
bottom: 0.75rem;
margin: 0;
font-size: 0.22rem;
line-height: 1.8;
font-weight: 700;
color: #fff;
width: 4rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide .lx-news-card .lx-news-content .lx-news-active .moredun {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
font-size: 0.16rem;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
white-space: nowrap;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card {
width: 5rem;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card .lx-news-card.lx-is-active {
flex: 2;
border-color: transparent;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card .lx-news-card.lx-is-active .lx-news-img {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card .lx-news-card.lx-is-active .lx-news-content .lx-news-normal {
opacity: 0;
visibility: hidden;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card .lx-news-card.lx-is-active .lx-news-content .lx-news-active {
opacity: 1;
visibility: visible;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card .lx-news-card.lx-is-active::after {
opacity: 1;
visibility: visible;
}
.news .lx-news-section .lx-news-wrap .lxNewsSwiper .swiper-wrapper .swiper-slide.lx-slide-active-card .lx-news-card::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
visibility: hidden;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.78) 100%);
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev,
.news .lx-news-section .lx-news-wrap .lx-news-next {
position: absolute;
top: 50%;
z-index: 20;
width: 0.36rem;
height: 0.36rem;
border-radius: 50%;
transform: translateY(-50%);
cursor: pointer;
background: #ffffff54;
backdrop-filter: blur(0.1rem);
-webkit-backdrop-filter: blur(0.1rem);
box-shadow: 0 0.05rem 0.2rem 0 #0000001e;
border: 0.01rem solid rgba(231, 231, 231, 0.11);
transition: transform 0.3s ease;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev {
left: -0.52rem;
}
.news .lx-news-section .lx-news-wrap .lx-news-next {
right: -0.52rem;
background: #003b66;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev:hover,
.news .lx-news-section .lx-news-wrap .lx-news-next:hover {
transform: translateY(-50%) scale(1.08);
background: #003b66;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev:hover::before,
.news .lx-news-section .lx-news-wrap .lx-news-next:hover::before {
border-color: #fff;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev::before,
.news .lx-news-section .lx-news-wrap .lx-news-next::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0.08rem;
height: 0.08rem;
border-top: 0.02rem solid #03366c;
border-left: 0.02rem solid #03366c;
}
.news .lx-news-section .lx-news-wrap .lx-news-prev::before {
transform: translate(-35%, -50%) rotate(-45deg);
}
.news .lx-news-section .lx-news-wrap .lx-news-next::before {
border-color: #fff;
transform: translate(-65%, -50%) rotate(135deg);
}
}
@-webkit-keyframes haha1 {
0% {
-webkit-transform: rotate(0deg);
}
25% {
-webkit-transform: rotate(90deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(270deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes haha2 {
0% {
-webkit-transform: rotate(360deg);
}
25% {
-webkit-transform: rotate(270deg);
}
50% {
-webkit-transform: rotate(180deg);
}
75% {
-webkit-transform: rotate(90deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}