:root {
    --page-padding-top: var(--header-height-min);
}

section {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
 
/* ========== Banner ========== */
.banner {
    padding-bottom: calc(80 * var(--rpx));
    color: #fff;
    background: var(--theme-blue-dark);
}

.banner .slide-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.banner .slide-back img,
.banner .slide-back video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner .banner-bg-default {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #051838 0%, #0a2463 50%, #1e3a5f 100%);
}

.banner .banner-bg-default::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: calc(60 * var(--rpx)) calc(60 * var(--rpx)); 
    opacity: 0.8;
}

.banner > .text-layer,
.banner .swiper-slide .text-layer {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
    margin: 0 auto;
}

.banner .banner-text {
    position: relative;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}

/*.banner .banner-title {
    font-size: calc(80 * var(--rpx-50));
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 calc(24 * var(--rpx));
}*/

.banner .banner-subtitle {
    font-size: calc(20em / 16);
    line-height: 1.4;
}


.banner .banner-subtitle h1,
.banner .banner-subtitle h2{
    font-size: calc(80 * var(--rpx-50));
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 calc(24 * var(--rpx));
}

.banner .banner-subtitle h3{
    font-size: calc(56 * var(--rpx-50));
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 calc(20 * var(--rpx));
}

.banner .banner-rich-stack {
    position: relative;
    width: 100%;
}

/* 手机专用文案层：默认隐藏，与 .banner-subtitle--desktop 二选一 */
.banner .banner-subtitle--mobile {
    display: none;
}

.banner .banner-btn {
    display: inline-block;
    padding: calc(12 * var(--rpx-75)) calc(28 * var(--rpx));
    background: rgba(255,255,255,0.2);
    border: calc(1 * var(--rpx-75)) solid rgba(255,255,255,0.6);
    border-radius: calc(4 * var(--rpx-75));
    font-size: 0.9rem;
    transition: background 0.3s, border-color 0.3s;
}

.banner .banner-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.9);
}

.banner .banner-play-toggle {
    position: absolute;
    bottom: calc(100 * var(--rpx));
    right: calc(80 * var(--rpx));
    width: calc(48 * var(--rpx));
    height: calc(48 * var(--rpx));
    border: none;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
}

.banner .banner-play-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner .banner-play-toggle .icon-pause,
.banner .banner-play-toggle .icon-play {
    position: absolute;
    width: calc(18 * var(--rpx));
    height: calc(18 * var(--rpx));
}

.banner .banner-play-toggle .icon-pause::before {
    content: '';
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    height: 50%;
    background: currentColor;
    border-radius: calc(2 * var(--rpx-75));
}

.banner .banner-play-toggle .icon-pause::after {
    content: '';
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    width: 30%;
    height: 50%;
    background: currentColor;
    border-radius: calc(2 * var(--rpx-75));
}

.banner .banner-play-toggle .icon-play {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(9 * var(--rpx)) 0 calc(9 * var(--rpx)) calc(14 * var(--rpx));
    border-color: transparent transparent transparent currentColor;
    margin-left: calc(3 * var(--rpx-75));
}

.banner .banner-play-toggle .icon-play::before,
.banner .banner-play-toggle .icon-play::after { display: none; }

.banner .banner-play-toggle .icon-play { display: none; }
.banner .banner-play-toggle .icon-pause { display: block; }
.banner .banner-play-toggle.paused .icon-play { display: block !important; }
.banner .banner-play-toggle.paused .icon-pause { display: none; }

.banner-swiper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background: #000;
}

.banner-swiper .swiper-slide .slide-back {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.banner-swiper-indicator {
    position: absolute;
    right: var(--wrapper-margin);
    bottom: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(55 * var(--rpx));
    padding: calc(8 * var(--rpx-75)) calc(16 * var(--rpx));
    background: rgba(255,255,255,0.9);
    border-radius: calc(15 * var(--rpx)) 0 calc(15 * var(--rpx)) 0;

    width: calc(256 * var(--rpx-75));
    height: calc(85 * var(--rpx-75))
}

.banner .swiper-pagination {
    display: flex;
    align-items: center;
    gap: calc(6 * var(--rpx-75));
    position: relative;
}

.banner .swiper-pagination .current {
    font-size: calc(18em / 16);
    font-weight: 700;
    color: rgb(51, 51, 51);
}

.banner .swiper-pagination .total {
    font-size: calc(14em / 16);
    font-weight: 400;
    color: rgb(150, 150, 150);
}

.banner .swiper-pagination .sep,
.banner .swiper-nav-sep {
    font-size: 0.75rem;
    color: rgb(180, 185, 195);
}

.banner .swiper-nav {
    display: flex;
    align-items: center;
    gap: calc(10 * var(--rpx-75));
    color: #0004;
}

.banner .swiper-prev,
.banner .swiper-next {
    width: auto;
    height: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner .swiper-prev .icon-angle,
.banner .swiper-next .icon-angle {
    display: block;
    width: calc(10 * var(--rpx));
    height: calc(17 * var(--rpx));
}

.banner .swiper-prev:hover .icon-angle,
.banner .swiper-next:hover .icon-angle {
    opacity: 0.85;
}

/* ========== Sec2 航运五十人研究中心 ========== */
.sec2 {
    min-height: 60vh;
    background-color: #fff;
    color: #333;
    padding: calc(80 * var(--rpx)) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

.sec2 .inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sec2 .figure {
    width: calc(100% - 600 * var(--rpx));
}

.sec2 .figure picture {
    height: auto;
}

.sec2 .figure picture img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: 20% 0;
    display: block;
}

.sec2 .content {
    flex: 0 0 auto;
    width: calc(560 * var(--rpx));
    justify-self: start;
    text-align: left;
}

.sec2 .logo {
    margin-bottom: calc(16 * var(--rpx));
}

.sec2 .logo img {
    display: block;
    height: calc(48 * var(--rpx));
    width: auto;
}

.sec2 .title {
    font-size: calc(32 * var(--rpx));
    color: #292929;
    margin: 0 0 calc(8 * var(--rpx));
}

.sec2 .keyword {
    font-size: 1rem;
    color: #29292980;
    margin: 0 0 calc(24 * var(--rpx));
}

.sec2 .desc {
    font-size: calc(24 * var(--rpx));
    color: #29292980;
    margin-bottom: calc(68 * var(--rpx-50));
}

.sec2 .desc p {
    margin-bottom: 0.8em;
}

.sec2 .desc p:last-child {
    margin-bottom: 0;
}

/* ========== Sec3 标准服务+ ========== */
.sec3 {
    min-height: 60vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-title {
    font-size: calc(52 * var(--rpx));
    margin: 0 0 calc(40 * var(--rpx));
    display: flex;
    flex-direction: column;
    gap: calc(4 * var(--rpx-75));
    font-weight: normal;
}

.section-title .title-en {
    font-size: calc(40 * var(--rpx));
    color: rgba(0, 0, 0, .08);
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.section-title .title-cn{
    margin-top: -.6em;
    white-space: nowrap;
}


.section-title.light{
    color: #fff;
    font-weight: bold;
}
.section-title.light .title-en {
    color: rgba(255, 255, 255, .12);
}

.sec3 .content-ctn {
    display: flex;
    gap: calc(24 * var(--rpx));
}

.sec3 .block {
    flex: 1;
    position: relative;
    min-height: calc(470 * var(--rpx));
    overflow: hidden;
}

.sec3 .default-layer,
.sec3 .block-back.blur,
.sec3 .hover-layer {
    position: absolute;
    inset: 0;
    transition: opacity 0.35s ease;
}

.sec3 .default-layer {
    z-index: 210;
    opacity: 1;
}

.sec3 .block-back.blur {
    z-index: 205;
    opacity: 0;
}

.sec3 .hover-layer {
    z-index: 220;
    opacity: 0;
}

.sec3 .block:hover .default-layer {
    opacity: 0;
}

.sec3 .block:hover .block-back.blur {
    opacity: 1;
}

.sec3 .block:hover .hover-layer {
    opacity: 1;
}

.sec3 .block-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec3 .block-back.blur {
    filter: blur(36px);
    transform: scale(1.08);
}

.sec3 .default-label {
    position: absolute;
    bottom: calc(24 * var(--rpx));
    left: calc(24 * var(--rpx));
    display: inline-flex;
    align-items: center;
    gap: calc(8 * var(--rpx-75));
    color: #fff;
    font-size: calc(24 * var(--rpx));
}

.sec3 .icon-go{
    width: calc(18 * var(--rpx));
    height: calc(18 * var(--rpx));
    display: inline-block;
    vertical-align: middle;
    background: url("../images/icon_arr_go.svg") center/contain no-repeat;
}

.sec3 .hover-layer {
    display: flex;
    flex-direction: column;
    padding: calc(50 * var(--rpx-50)) calc(60 * var(--rpx-50)) calc(30 * var(--rpx-50));
    background: rgba(255, 255, 255, .8);
}

.sec3 .hover-title {
    position: relative;
    font-size: calc(24rem / 16);
    font-weight: 600;
    margin: 0 0 calc(30 * var(--rpx));
}

.sec3 .hover-desc {
    position: relative;
    flex: 0 1 auto;
    font-weight: 300;
    font-size: calc(18em / 16);
    line-height: 1.6;
    overflow: hidden;
}

.sec3 .hover-desc p {
    margin-bottom: 0.8em;
}

.sec3 .hover-desc p:last-child {
    margin-bottom: 0;
}

.sec3 .hover-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(6 * var(--rpx-75));
}

.btn-learn{
    display: flex;
    align-items: center;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
    font-size: calc(20 * var(--rpx));
    gap: calc(20 * var(--rpx));
    margin-top: calc(30 * var(--rpx));
    text-decoration: underline;
}

.btn-learn .icon-arrow{
    width: calc(40 * var(--rpx));
    height: calc(40 * var(--rpx));
    background: url("../images/icon_arr_right_circle.svg") center/contain no-repeat;
}

/* ========== Sec4 领航计划 ========== */
.sec4 {
    position: relative;
    min-height: auto;
    height: unset;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-bottom: calc(80 * var(--rpx-50));
    padding-top: var(--header-height);
}

.sec4 .part1 {
    position: relative;
    height: calc(600 * var(--rpx));
    display: flex;
    align-items: center;
    padding-bottom: calc(200 * var(--rpx));
}

.sec4 .part1 .back {
    position: absolute;
    inset: 0;
    z-index: 200;
}

.sec4 .part1 .wrapper { position: relative; z-index: 210;

}

.sec4 .blocks-ctn {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    gap: 0;
}

.sec4 .block-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: calc(8 * var(--rpx-75));
    padding-top: calc(20 * var(--rpx));
    padding-bottom: calc(20 * var(--rpx));
}

.sec4 .block-title {
    font-size: calc(50 * var(--rpx-50));
    font-weight: 300;
}

.sec4 .block-subtitle {
    font-weight: 300;
}

.sec4 .block-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.sec4 .part2 {
    margin-top: calc(-200 * var(--rpx));
    position: relative;
}

.sec4 .plan-ctn {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: calc(80 * var(--rpx));
    padding: calc(80 * var(--rpx)) calc(80 * var(--rpx)) calc(70 * var(--rpx));
}

.sec4 .plan-ctn .back {
    position: absolute;
    inset: 0;
    z-index: 200;
}

.sec4 .plan-ctn .back-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 26, 46, 0.3) 30%, rgba(8, 26, 46, 0.8) 60%, #081a2e 100%);
}

.sec4 .plan-ctn .back-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec4 .plan-ctn > .left,
.sec4 .plan-ctn > .right { position: relative; z-index: 210; }

.sec4 .plan-ctn .left {
    flex-shrink: 0;
}

.sec4 .plan-ctn .left .section-title {
    margin: 0;
    color: #fff;
}

.sec4 .plan-ctn .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--rpx));
}

.sec4 .plan-ctn .right .title {
    font-size: calc(24 * var(--rpx));
    line-height: 1.4;
}

.sec4 .plan-ctn .right .desc {
    font-weight: 300;
}

.sec4 .plan-ctn .btn-more { position: relative; z-index: 210; }

.sec4 .part1 .back-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 26, 46, 0.5) 100%);
}

.sec4 .part1 .back-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec4 .part1 .back,
.sec4 .plan-ctn .back {
    background: linear-gradient(180deg, #1a4a7a 0%, #0f2d4a 55%, #081a2e 100%);
}

.sec4 .plan-ctn .btn-more{
    align-self: flex-end;
    margin-top: auto;
    margin-bottom: 0;
}

/* ========== Sec5 专家观点 ========== */
.sec5 {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #f8fcff;
    display: flex;
    align-items: center;
    padding: calc(80 * var(--rpx)) 0;
}

.sec5 .back {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
}

.sec5 .back img {
    display: block;
    width: 100%;
    height: auto;
}

.sec5 .wrapper{
    position: relative;
}

.sec5 .content {
    position: relative;
    z-index: 210;
    max-width: calc(1000 * var(--rpx));
    display: flex;
    flex-direction: column;
    gap: calc(24 * var(--rpx));
}

.sec5 .content .sub-title {
    font-size: calc(32 * var(--rpx));
    line-height: 1.35;
}

.sec5 .content .desc {
    font-size: calc(24 * var(--rpx));
    color: #000a;
    line-height: 1.7;
}

.sec5 .content .desc p {
    margin-bottom: 0.8em;
}

.sec5 .content .desc p:last-child {
    margin-bottom: 0;
}

.sec5 .content .btn-more {
    margin-top: calc(50 * var(--rpx));
    align-self: flex-start;
}

/* ========== 行业新闻（复制自 related_news 样式） ========== */
.industry-news {
    height: auto;
    min-height: 100vh;
    padding: calc(100 * var(--rpx-50)) 0;
    background-color: #f5f5f5;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-dynamics .cd-swiper-mobile {
    display: none;
}

.industry-news .news-list.swiper,
.center-dynamics .news-list.swiper {
    overflow: visible;
}

.industry-news .swiper-slide,
.center-dynamics .swiper-slide {
    height: auto;
}

.industry-news .news,
.center-dynamics .news {
    display: block;
    position: relative;
    border: 1px solid #cdcdcd;
    box-shadow: 0 0 calc(200 * var(--rpx)) #5A565620;
}

.industry-news .news .default-layer,
.center-dynamics .news .default-layer {
    position: relative;
    z-index: 200;
}

.industry-news .news .top,
.center-dynamics .news .top {
    padding: calc(35 * var(--rpx)) calc(40 * var(--rpx)) calc(25 * var(--rpx));
}

.industry-news .news .line1,
.center-dynamics .news .line1 {
    font-size: calc(18rem / 16);
    display: flex;
    align-items: center;
    gap: .75em;
    font-weight: 300;
}

.industry-news .news .line1 .date,
.center-dynamics .news .line1 .date {
    color: #29292980;
}

.industry-news .news .line2,
.center-dynamics .news .line2 {
    margin-top: calc(12 * var(--rpx));
    font-size: calc(24 * var(--rpx));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 1.5em;
    height: 3em;
}

.industry-news .news .cover,
.center-dynamics .news .cover {
    width: 100%;
    aspect-ratio: 5/3;
    height: auto;
    background-color: #999;
}

.industry-news .news .cover img,
.center-dynamics .news .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.industry-news .news .bottom,
.center-dynamics .news .bottom {
    display: flex;
    height: calc(85 * var(--rpx));
    align-items: center;
    padding: calc(35 * var(--rpx));
}

.industry-news .news .bottom .arr,
.center-dynamics .news .bottom .arr {
    width: calc(15rem / 16);
    height: calc(11rem / 16);
    background: url("../images/icon_arr_news_right.svg") center/contain no-repeat;
    filter: url(#blue-overlay);
}

.industry-news .news .hover-layer,
.center-dynamics .news .hover-layer {
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    visibility: hidden;
    z-index: 220;
    opacity: 0;
    transition: .2s;
}

.industry-news .news:hover .hover-layer,
.center-dynamics .news:hover .hover-layer {
    visibility: visible;
    opacity: 1;
}

.industry-news .news .hover-layer .desc,
.center-dynamics .news .hover-layer .desc {
    padding: calc(20 * var(--rpx)) calc(40 * var(--rpx));
    color: #292929af;
}

.industry-news .news .hover-layer .link-more,
.center-dynamics .news .hover-layer .link-more {
    padding: calc(20 * var(--rpx)) calc(40 * var(--rpx));
}

.industry-news .news-swiper-wrap,
.center-dynamics .news-swiper-wrap {
    position: relative;
}

.industry-news .news-swiper-wrap .btn-prev,
.industry-news .news-swiper-wrap .btn-next,
.center-dynamics .news-swiper-wrap .btn-prev,
.center-dynamics .news-swiper-wrap .btn-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(50 * var(--rpx-75));
    height: calc(50 * var(--rpx-75));
    cursor: pointer;
    z-index: 10;
    background: var(--theme-blue);
    border-radius: 50%;
}

.industry-news .news-swiper-wrap .btn-prev,
.center-dynamics .news-swiper-wrap .btn-prev {
    left: calc(-25 * var(--rpx-75));
}

.industry-news .news-swiper-wrap .btn-next,
.center-dynamics .news-swiper-wrap .btn-next {
    right: calc(-25 * var(--rpx-75));
}

.industry-news .news-swiper-wrap .btn-prev::after,
.industry-news .news-swiper-wrap .btn-next::after,
.center-dynamics .news-swiper-wrap .btn-prev::after,
.center-dynamics .news-swiper-wrap .btn-next::after {
    content: "";
    width: 20%;
    height: 30%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.industry-news .news-swiper-wrap .btn-prev::after,
.center-dynamics .news-swiper-wrap .btn-prev::after {
    background: url("../images/icon_swiper_left.svg") left center/contain no-repeat;
    filter: url(#white-overlay);
}

.industry-news .news-swiper-wrap .btn-next::after,
.center-dynamics .news-swiper-wrap .btn-next::after {
    background: url("../images/icon_swiper_right.svg") right center/contain no-repeat;
    filter: url(#white-overlay);
}

.industry-news .news-swiper-wrap .swiper-button-disabled,
.center-dynamics .news-swiper-wrap .swiper-button-disabled {
    pointer-events: none;
    background-color: #fff;
    opacity: .5;
}

.industry-news .news-swiper-wrap .swiper-button-disabled::after,
.center-dynamics .news-swiper-wrap .swiper-button-disabled::after {
    filter: url(#blue-overlay);
}

.industry-news .link-more-outer {
    display: inline-block;
    margin-top: calc(40 * var(--rpx));
    color: var(--theme-blue);
    font-weight: 500;
    text-decoration: underline;
}

.industry-news .link-more-outer::after {
    content: "";
    display: inline-block;
    width: calc(6em / 16);
    height: calc(12em / 16);
    background: url("../images/icon_angle_right.svg") center/contain no-repeat;
    margin-left: .5em;
    vertical-align: middle;
    filter: url(#blue-overlay);
}

.center-dynamics .link-more-outer {
    display: inline-block;
    margin-top: calc(40 * var(--rpx));
    color: var(--theme-blue);
    font-weight: 500;
    text-decoration: underline;
}

.center-dynamics .link-more-outer::after {
    content: "";
    display: inline-block;
    width: calc(6em / 16);
    height: calc(12em / 16);
    background: url("../images/icon_angle_right.svg") center/contain no-repeat;
    margin-left: .5em;
    vertical-align: middle;
    filter: url(#blue-overlay);
}

/* ========== 中心动态（仅 pos1/2/3，3 篇，无切换；pos1 蒙层+封面渐变） ========== */
.center-dynamics {
    background-color: #f5f5f5;
    height: auto;
    min-height: 100vh;
    padding: calc(100 * var(--rpx-50)) 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-dynamics .section-title {
    width: 100%;
}

.center-dynamics .cd-list {
    width: 100%;
    height: clamp(320px, calc(31.25vw + 60px), 620px);
    position: relative;
}

.center-dynamics .cd-item {
    visibility: hidden;
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.center-dynamics .cd-item.cd-pos1,
.center-dynamics .cd-item.cd-pos2,
.center-dynamics .cd-item.cd-pos3 {
    visibility: visible;
    position: absolute;
    top: 0;
    width: calc((100% - 3 * 40 * var(--rpx)) / 4);
    transition: .6s cubic-bezier(0.15, 1, 0.336, 1);
}

.center-dynamics .cd-item.cd-pos1 {
    width: calc((100% - 40 * var(--rpx)) / 2);
    left: 0;
}

.center-dynamics .cd-item.cd-pos2 {
    left: calc((100% - 40 * var(--rpx)) / 2 + 40 * var(--rpx));
}

.center-dynamics .cd-item.cd-pos3 {
    left: unset;
    right: 0;
}

.center-dynamics .cd-item .cd-cover {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #333;
    aspect-ratio: 780 / 562;
}

.center-dynamics .cd-item .cd-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s;
}

.center-dynamics .cd-item.cd-pos1 .cd-cover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75%;
    background: linear-gradient(to bottom, #0000 0%, #000c 100%);
    pointer-events: none;
}

.center-dynamics .cd-item:hover .cd-cover img {
    transform: scale(1.05);
    transition: .4s ease;
}

.center-dynamics .cd-item .cd-body {
    padding-top: calc(20 * var(--rpx));
    padding-left: calc(24 * var(--rpx));
    padding-right: calc(24 * var(--rpx));
    padding-bottom: calc(24 * var(--rpx));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}

.center-dynamics .cd-item .cd-body * {
    position: relative;
    z-index: 1;
}

.center-dynamics .cd-item.cd-pos1 .cd-body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: flex-end;
    color: #fff;
    padding: calc(44 * var(--rpx)) calc(50 * var(--rpx));
}

.center-dynamics .cd-item .cd-date {
    font-weight: 300;
    font-size: calc(18 * var(--rpx));
    color: #35282880;
    margin-bottom: calc(8 * var(--rpx));
}

.cd-item.cd-pos1 .cd-date {
    color: #fff;
}

.center-dynamics .cd-item .cd-heading {
    width: 100%;
    font-size: calc(24 * var(--rpx));
    line-height: calc(30em / 24);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.center-dynamics .cd-item.cd-pos1 .cd-heading {
    -webkit-line-clamp: 2;
}

.center-dynamics .cd-item .cd-excerpt {
    margin-top: calc(12 * var(--rpx));
    margin-bottom: calc(12 * var(--rpx));
    line-height: 1.5em;
    font-size: calc(18rem / 16);
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 4.5em;
}

.cd-item.cd-pos1 .cd-excerpt{
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    transition: .2s;
}

.cd-item.cd-pos1:hover .cd-excerpt{
    max-height: 4.5em;
    margin-top: calc(12 * var(--rpx));
    margin-bottom: calc(12 * var(--rpx));
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}


.center-dynamics .cd-item.cd-pos2 .cd-excerpt,
.center-dynamics .cd-item.cd-pos3 .cd-excerpt {
    width: 100%;
}

.center-dynamics .cd-item.cd-pos2 .cd-body,
.center-dynamics .cd-item.cd-pos3 .cd-body {
    height: auto;
    padding-left: 0;
    padding-right: 0;
}

.center-dynamics .cd-item .cd-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(7em / 16);
    transition: .2s;
}

.center-dynamics .cd-item .cd-link::before {
    content: "";
    width: calc(10 * var(--rpx));
    height: calc(10 * var(--rpx));
    background: center / 50% auto no-repeat var(--theme-blue);
    margin-bottom: 1px;
    transition: .2s;
    transform: translateZ(0);
    transform-origin: left center;
}

.center-dynamics .cd-item:hover .cd-link::before {
    content: "";
    transform: scale(3) translateZ(0);
    background: url("../images/icon_arr_right.svg") center / 50% auto no-repeat var(--theme-blue);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    margin-right: calc(24 * var(--rpx));
}

/* ========== 合作客户+（参考 newsonic 首页 sec7 合作伙伴）========== */
.coop-customers {
    background: url("../images/client_back.webp") center bottom/100% auto no-repeat #1957D420;
    height: 100vh;
    min-height: auto;
    padding-top: calc(50 * var(--rpx));
    padding-bottom: calc(90 * var(--rpx-50));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.coop-customers .wrapper .section-title {
    margin-bottom: calc(72 * var(--rpx-50));
    text-align: center;
}

.coop-row {
    display: flex;
    overflow: hidden;
    margin-bottom: calc(36 * var(--rpx));
}

.coop-row:last-child {
    margin-bottom: 0;
}

.coop-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

.coop-item {
    height: calc(96 * var(--rpx));
    flex-shrink: 0;
    position: relative;
    margin-left: calc(70 * var(--rpx-50));
    margin-right: calc(70 * var(--rpx-50));
    display: flex;
    align-items: center;
    justify-content: center;
}

.coop-item img {
    height: 100%;
    width: auto;
    max-width: calc(192 * var(--rpx));
    object-fit: contain;
}

.coop-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 手机端：首页自适应 */
@media (max-width: 828px) {
    .banner,
    .sec2,
    .sec3,
    .sec4,
    .sec5,
    .industry-news,
    .center-dynamics,
    .coop-customers {
        min-height: 100vh;
    }

    .banner .banner-subtitle--desktop {
        display: none !important;
    }

    .banner .banner-subtitle--mobile {
        display: block;
        font-size: 1rem;
        max-width: 100%; 
        padding-left: calc(12 * var(--rpx));
        padding-right: calc(12 * var(--rpx));
    }

    .banner .banner-subtitle--mobile h2 {
        font-size: calc(60 * var(--rpx));
        line-height: 1.25;
        margin: 0 0 calc(16 * var(--rpx));
    }

    .banner .banner-subtitle--mobile .tag-row {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: baseline;
        gap: clamp(0.5rem, 4vw, 1.5rem);
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(4 * var(--rpx));
    }

    .banner .banner-subtitle--mobile .tag-row .tag {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .banner .banner-subtitle-mobile-fallback {
        overflow-wrap: anywhere;
        line-height: 1.55;
    }

    .banner .swiper-slide .text-layer.wrapper {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: calc(16 * var(--rpx));
        padding-right: calc(16 * var(--rpx));
    }

    .banner-swiper-indicator {
        right: 0;
        width: 100%;
        border-radius: 0;
    }

    .banner .swiper-nav {
        gap: calc(16 * var(--rpx));
    }

    .banner .swiper-prev .icon-angle,
    .banner .swiper-next .icon-angle {
        width: calc(24 * var(--rpx));
        height: calc(40 * var(--rpx));
    }

    .banner .swiper-nav .sep {
        font-size: 1rem;
    }

    .sec2 {
        padding-top: calc(180 * var(--rpx));
        justify-content: center;
    }

    .sec2 .logo img{
        height: calc(80 * var(--rpx));
    }

    /* Sec2：左图右文改上下，图在上 */
    .sec2 .inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        text-align: center;
        gap: calc(60 * var(--rpx));
    }

    .sec2 .figure {
        width: 100%;
        max-width: 100%;
    }

    .sec2 .figure picture img {
        object-position: center top;
    }

    .sec2 .content {
        width: 100%;
        max-width: 100%;
    }

    .sec2 .title {
        font-size: calc(43 * var(--rpx));
    }

    .section-title {
        font-size: calc(69 * var(--rpx));
    }

    .section-title .title-en {
        font-size: calc(53 * var(--rpx));
    }

    .sec2 .desc {
        margin-bottom: calc(40 * var(--rpx));
        font-size: calc(32 * var(--rpx));
    }

    /* Sec3：左右两块改上下堆叠 */
    .sec3 .content-ctn {
        flex-direction: column;
        gap: calc(24 * var(--rpx));
    }

    .sec3 .block {
        min-height: unset;
        height: calc(480 * var(--rpx));
        flex: 0 0 auto;
    }

    .sec3 .default-label {
        font-size: calc(32 * var(--rpx));
    }

    .sec3 .hover-desc{
        font-size: 1rem;
    }

    .btn-learn {
        font-size: calc(27 * var(--rpx));
    }

    /* Sec4：part1 横向块改竖向；part2 左右改上下 */

    .sec4{
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .sec4 .part1 {
        height: auto;
        min-height: auto;
        padding: calc(40 * var(--rpx)) 0;
        flex: 0 0 auto;
    }

    .sec4 .blocks-ctn {
        flex-wrap: wrap;
    }

    .sec4 .block-divider {
        display: none;
    }

    .sec4 .block-item{
        flex: 0 0 auto;
        width: 50%;
        border-right: 1px solid #ffffff80;
        border-bottom: 1px solid #ffffff80;
    }

    .sec4 .block-item:nth-of-type(2n){
        border-right: none;
    }
    .sec4 .block-item:nth-last-of-type(1),
    .sec4 .block-item:nth-last-of-type(2){
        border-bottom: none;
    }

    .sec4 .part2 {
        flex: 1 1 auto;
        margin-top: 0;
    }

    .sec4 .part2 .wrapper{
        margin: 0;
        width: 100%;
        position: static;
    }

    .sec4 .plan-ctn {
        flex-direction: column;
        gap: calc(32 * var(--rpx));
        padding: calc(80 * var(--rpx)) var(--wrapper-margin);

        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    .sec4 .plan-ctn .btn-more {
        align-self: flex-start;
    }

    .sec4 .plan-ctn .right .title {
        font-size: calc(32 * var(--rpx));
    }

    /* Sec5：内容区域可滚动 */
    .sec5 .content {
        max-height: calc(100vh - var(--header-height-min) - 80 * var(--rpx));
        overflow-y: auto;
    }

    .sec5 .content .sub-title {
        font-size: calc(43 * var(--rpx));
    }

    .sec5 .content .desc {
        font-size: calc(32 * var(--rpx));
    }

    /* 行业新闻、中心动态：swiper 在 JS 中改为 1 个 */
    .industry-news .news .line2,
    .center-dynamics .news .line2 {
        font-size: calc(32 * var(--rpx));
    }

    .industry-news .news-swiper-wrap .btn-prev,
    .center-dynamics .news-swiper-wrap .btn-prev {
        left: calc(-30 * var(--rpx));
        width: calc(96 * var(--rpx));
        height: calc(96 * var(--rpx));
    }

    .industry-news .news-swiper-wrap .btn-next,
    .center-dynamics .news-swiper-wrap .btn-next {
        right: calc(-30 * var(--rpx));
        width: calc(96 * var(--rpx));
        height: calc(96 * var(--rpx));
    }

    /* 中心动态：手机端隐藏原内容，显示 swiper */
    .center-dynamics .cd-list {
        display: none;
    }

    .center-dynamics .cd-swiper-mobile {
        display: block;
    }

    /* 合作客户：三行改竖向，可滚动 */
    .coop-customers {
        overflow: auto;
    }

    .coop-customers .wrapper {
        flex-shrink: 0;
    }

    .coop-row {
        margin-bottom: calc(60 * var(--rpx));
    }

    .coop-track {
        justify-content: center;
        gap: calc(60 * var(--rpx));
    }

    .coop-item {
        margin-left: 0;
        margin-right: 0;
    }
}
