section.hero{
    padding-top: var(--header-height);
    height: calc(1660 * var(--rpx) + var(--header-height));
    position: relative;
    overflow-x: hidden;
}

.hero-content{
    position: relative;
    width: 100%;
}

.hero-title{
    position: absolute;
    width: 100%;

    top: clamp(50px, calc(41.6667vh + -250px), 200px);;
    font-weight: 600;
    font-size: calc(57 * var(--fpx-50));
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
    z-index: 210;
}

/* 与 .hero-back 一致：脚本入场前不闪全亮 */
.hero-title .line1,
.hero-title .line2{
    opacity: 0;
}

.hero-back{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    width: 100%;
    height: auto;
    top: clamp(-150px, calc(41.6667vh + -450px), 0px);

    display: flex;
    flex-direction: column;
    align-items: center;

    /* 入场前避免脚本执行前闪全亮；位移/缩放由 GSAP 写在 transform，不参与布局，canvas 仍按 clientWidth/Height 定逻辑分辨率 */
    opacity: 0;
}

/* 等资源：整块可见以显示 canvas loading；侧栏图标延后到与主 canvas 同源贴图就绪 */
.hero-back.hero-back--await-assets{
    opacity: 1;
}
/**
 * 去掉 --await-assets 后勿回退到 .hero-back{opacity:0}，否则在 GSAP/内联尚未写入前整层（含 WebGL/WebGPU canvas）会完全透明。
 * 入场动画仍作用在 .hero-back-inner 上，不受影响。
 */
.hero-back:not(.hero-back--await-assets){
    opacity: 1;
}
.hero-back.hero-back--await-assets .hero-side-icons-slot{
    visibility: hidden;
}

.hero-back-inner{
    position: relative;
    z-index: 0;
    width: calc(1920 * var(--rpx));
    height: calc(1660 * var(--rpx));
    flex: 0 0 auto;
}

/**
 * 侧栏图标层：GSAP 入场 opacity/scale/y 只作用在此层，避免父级 .hero-back-inner 整层 opacity:0 时盖住同层 WebGPU canvas。
 */
.hero-back-inner-gfx{
    position: absolute;
    inset: 0;
    z-index: 240;
    pointer-events: none;
}

.hero-back-inner-gfx .hero-side-icons-slot{
    pointer-events: auto;
}

.hero-back-canvas{
    display: block;
    width: 100%;
    height: 100%;
}

.hero-side-icons-slot{
    position: absolute;
    inset: 0;
    z-index: 240;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.hero-side-icons{
    position: relative;
    width: calc(1920 * var(--rpx));
    height: calc(1660 * var(--rpx));
    /*
     * 原先 none：规范上子项 .hero-side-icon{auto} 仍应可点，但部分环境下「连续两层 none」会导致子项永远收不到命中。
     * 改为 auto：整块 1920×1660 可命中；空白区与标题 z-index 分担命中。
     */
    pointer-events: auto;
}

.hero-side-icon{
    position: absolute;
    left: calc(var(--ix) * 100% / 1920);
    top: calc(var(--iy) * 100% / 1660);
    width: calc(66.666664 * 100% / 1920);
    height: calc(66.666664 * 100% / 1660);
    pointer-events: auto;
    touch-action: manipulation;
    color: inherit;
    outline: none;
    box-sizing: border-box;
}

.hero-side-icon:focus-visible .hero-side-icon__face{
    box-shadow: 0 0 0 2px rgba(156, 127, 255, 0.85);
}

.hero-side-icon__persp{
    width: 100%;
    height: 100%;
    perspective: 380px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    /* 命中交给外层 .hero-side-icon，避免 __face 随 scale/rotate 变换后误触发 pointerleave */
    pointer-events: none;
}

.hero-side-icon__tilt{
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

.hero-side-icon__face{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22.5%;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.35s ease-out;
    pointer-events: none;
}

.hero-side-icon__face.is-tracking{
    transition: none;
}

.hero-side-icon__bg{
    position: absolute;
    border-radius: inherit;
    background: linear-gradient(to bottom, #00003F98 0%, #01010300 100%) #4877FF;
    box-shadow: inset 0 0 0 1px #fff4;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* 与 canvas 同叠放；不设 none 时命中的是 bg，pointerenter 不冒泡，父级 .hero-side-icon 可能永远收不到进入事件 */
    pointer-events: none;
    opacity: 1;
}

.hero-side-icon__gl{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: block;
    pointer-events: none;
    border-radius: inherit;
    z-index: 240;
}

section.about{
    position: relative;
    margin-top: calc(-480 * var(--rpx));
    padding-bottom: calc(500 * var(--rpx-50));
} 

section.about .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
    position: relative;
    z-index: 210;
}

.about .title{
    font-weight: 600;
    font-size: calc(54 * var(--fpx-50));
    line-height: 1.5;
    margin-top: 0;
}

.about .pill-tag{
    margin-top: calc(30 * var(--rpx));
}

.about .desc{
    margin-top: calc(54 * var(--rpx));
    font-size: calc(18 * var(--fpx-87));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about .desc p:nth-of-type(1){
    width: calc(960 * var(--fpx));
}

.about .desc p:nth-of-type(2){
    width: calc(600 * var(--fpx));
}

.about .desc .blue,
.about .desc strong{
    font-weight: normal;
    color: var(--theme-blue);
}

.about .btn-ctn{
    margin-top: calc(50 * var(--rpx));
}

.about .about-back{
    position: absolute;
    bottom: 0;
    left: calc((100% - clamp(800px, 83.3333vw, 1600px)) / 2);
    width: clamp(800px, 83.3333vw, 1600px);
    height: clamp(300px, calc(31.25vw + 0px), 600px);
    z-index: 1;
    overflow: hidden;
    background-color: #080914;
}

.about .about-back-canvas{
    display: block; 
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.about-end{
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(-120 * var(--rpx));
    z-index: 260;
    pointer-events: none;
}

.about-end-mask{
    /* 原 clamp(960px,100vw,1920px)：窄视口仍占 960px 会撑出横向滚动条 */
    width: clamp(960px, 100vw, 1920px);
    height: clamp(402.5px, 41.9271vw, 805px);
    background: url("../images/index_about_end_overlay.webp") center top/100% auto no-repeat, linear-gradient(to bottom, #08091400 75%, #080914ff 100%);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);

    mask: url("../images/index_about_end_overlay_mask.svg") center top/100% auto no-repeat;
    margin-bottom: -1px;
}

.light-gather{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: calc(360% / 8.05);
    width: calc(1183% / 19.2);
    height: calc(395% / 8.05);
    background: url("../images/index_light_gather.webp") center/contain no-repeat;
}

section.features{
    background-color: var(--theme-back);
    position: relative;
    z-index: 280;
}

.feature{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(80 * var(--rpx-50) + var(--header-height)) var(--wrapper-margin) calc(80 * var(--rpx-50));
    min-height: 100vh;
}

.feature.flipped{
    flex-direction: row-reverse;
}

.feature .info{
    width: clamp(420px, calc(14.5833vw + 280px), 560px);
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 250;
}

.feature .line1{
    font-size: calc(28 * var(--fpx));
    font-weight: 600;
    margin-top: calc(12 * var(--rpx));
}

.feature .line2{
    font-size: calc(54 * var(--fpx-50));
    font-weight: 600;
    line-height: calc(88em / 66);
}

.feature .line3{
    font-size: calc(24 * var(--fpx));
    margin-top: calc(16 * var(--rpx));
}

.feature .line4{
    font-size: 1rem;
    margin-top: calc(32 * var(--rpx));
    line-height: calc(30em / 16);
    color: #fff9;
}

.feature .btn-ctn{
    margin-top: calc(36 * var(--rpx));
}

.feature .btn-more{
    min-width: calc(260rem / 16);
    width: auto;
}

.feature .no{
    position: absolute;
    font-size: calc(24 * var(--fpx));
    width: calc(60em / 24);
    height: calc(60em / 24);
    border-radius: 50%;
    background-color: #273049;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    z-index: 240;
}

.feature .no .num{
    position: relative;
    z-index: 240;
}

.feature .no::after{
    content: "";
    border-radius: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    background: var(--theme-gradient);
    opacity: 0;
    transition: .3s;
}

.feature .no.active::after{
    opacity: 1;
}

.feature .line{
    position: absolute;
    width: 1px;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    top: 0;
    background-color: rgba(255, 255, 255, .2);
    z-index: 180;
}

/* 末条竖线在 .no 处收束：桌面 50%；手机由 JS 写 --feature-last-line-end（与 glow 分段同源） */
.feature.last .line{
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, .2) var(--feature-last-line-end, 50%),
        rgba(255, 255, 255, 0) var(--feature-last-line-end, 50%)
    );
}

.light-gathered{
    bottom: 0;
    height: calc(80% / 8.05);
    position: absolute;
    width: 1px;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(255, 255, 255, .2);
}

.light-gathered .glow,
.feature .line .glow{
    position: absolute;
    top: 0;
    left: calc(-1.5 * var(--rpx));
    width: calc(3 * var(--rpx));
    height: 100%;
    background: linear-gradient(to bottom, #4877FF 0%, #4877FF calc(100% - 160 * var(--rpx)), #A6BCFF 100%);
    box-shadow: #A6BCFF 0 0 calc(10 * var(--rpx));
    z-index: 180;
}

.feature .figure{
    position: relative;
    width: clamp(450px, calc(15.625vw + 300px), 600px);
    margin-left: auto;
    margin-right: clamp(-30px, calc(-1.0417vw + -10px), -20px);
    z-index: 250;
}

.feature.flipped .figure{
    margin-right: auto;
    margin-left: clamp(-30px, calc(-1.0417vw + -10px), -20px);
}

.feature .figure img{
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 280;
}

.feature .figure .figure-back{
    position: absolute;
    z-index: 1;
    width: calc(100% + 320 * var(--rpx));
    height: calc(100% + 240 * var(--rpx));
    top: calc(-120 * var(--rpx));
    left: calc(-160 * var(--rpx));
    pointer-events: none;
    overflow: hidden;
}

.light-gathered .glow{
    background: linear-gradient(to bottom, #4877FF00 0%, #4877FF 25%, #4877FF calc(100% - 160 * var(--rpx)), #A6BCFF 100%);
}

section.eco{
    position: relative;
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
}

section.eco .wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.eco .title{
    font-weight: 600;
    font-size: calc(54 * var(--fpx-50));
    margin-top: 0;
}

.eco .pill-tag{
    margin-top: calc(30 * var(--rpx));
}

.eco-list{
    margin-top: calc(60 * var(--rpx-50));
    gap: calc(10 * var(--rpx-75));

    display: flex;
    align-items: stretch;
    width: 100%;
    height: clamp(420px, calc(16.6667vw + 260px), 580px);
}

.eco-list .eco{
    width: calc((100% - 30 * var(--rpx-75)) / 4);
    flex: 0 0 auto;

    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: calc(30 * var(--rpx));
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    overflow: hidden;
}

.eco-list .eco.active{
    width: calc((100% - 10 * var(--rpx-75)) / 2);
}

.eco .name{
    margin-top: calc(28 * var(--rpx));
    font-size: calc(28 * var(--fpx));
}

.eco .desc-ctn{
    height: calc(90em / 16);
    width: 100%;
    position: relative;
    margin-top: calc(28 * var(--rpx));

    opacity: 0;
    transition: .2s;
    transform: translateY(calc(50 * var(--rpx)));
    visibility: hidden;
}

.eco .desc{
    position: absolute;
    top: 0;
    left: calc((100% - clamp(390px, calc(19.7917vw + 200px), 580px)) / 2);
    width: clamp(390px, calc(19.7917vw + 200px), 580px);
    line-height: calc(30em / 16);
    text-align: center;
}

.eco .btn-ctn{
    position: relative;
    width: 100%;
    height: calc(60em / 16);

    margin-top: calc(28 * var(--rpx));

    opacity: 0;
    transition: .2s;
    transform: translateY(calc(50 * var(--rpx)));
    visibility: hidden;
}

.eco .btn-more{
    position: absolute;
    left: calc((100% - 220em / 16) / 2);
    top: 0;
}

.eco.active .desc-ctn,
.swiper-eco .swiper-slide-active .eco .desc-ctn{
    opacity: 1;
    transform: none;
    transition: transform .4s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s, visibility .3s;
    visibility: visible;
}

.eco.active .btn-ctn,
.swiper-eco .swiper-slide-active .eco .btn-ctn{
    opacity: 1;
    transform: none;
    transition: transform .4s .15s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s .15s, visibility .3s .15s;
    visibility: visible;
}

.eco>*{
    position: relative;
    z-index: 240;
}

.eco .icon{
    width: calc(120 * var(--rpx));
    height: calc(120 * var(--rpx));
}

.eco>.active-bg{
    position: absolute;
    left: 2px;
    top: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: 220;
    background: linear-gradient(to bottom, #101A35ff, #101A3500),
        linear-gradient(to bottom, #101A35ff, #101A3500),
        linear-gradient(to bottom, #9C7FFF00 45%, #9C7FFFaa 100%),
        linear-gradient(to bottom, #101A35ff, #101A3500) #4D66E7;
    border-radius: calc(30 * var(--rpx) - 2px);
    opacity: 0;
    transition: .2s .1s;
}

.eco>.active-border{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: 210;
    background: linear-gradient(to right bottom, #4877FF, #F0E9FF, #9C7FFF);
    opacity: 0;
    transition: .1s;
}

.eco.active>.active-bg,
.swiper-eco .swiper-slide-active .eco > .active-bg{
    opacity: 1;
    transition: .2s;
}
.eco.active>.active-border,
.swiper-eco .swiper-slide-active .eco > .active-border{
    opacity: 1;
    transition: .2s .1s;
}

.eco .btn-expand{
    width: calc(60 * var(--fpx));
    height: calc(60 * var(--fpx));
    border-radius: 50%;
    transition: .3s cubic-bezier(0.15, 1, 0.336, 1);
    background: radial-gradient(closest-side circle at center, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, .2) 100%) rgba(255, 255, 255, .1);
    border: 1px solid #fff5;

    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(60 * var(--rpx));
    margin: auto;
}

.eco-list .eco:not(.active){
    cursor: pointer;
}

.eco-list .eco::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #426CE900 30%, #426CE933 100%);
    z-index: 200;
    opacity: 0;
    transition: .3s;
}

.eco-list .eco:hover:not(.active) .btn-expand{
    transform: scale(1.08) rotate(90deg);
}

.eco-list .eco:hover:not(.active)::before{
    opacity: 1;
}

section.eco .eco.gradient-border::after{
    z-index: 230;
}

.eco.active .btn-expand,
.swiper-eco .swiper-slide-active .eco .btn-expand{
    opacity: 0;
    transform: scale(0);
    visibility: hidden;
}

.eco .btn-expand::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(24 * var(--fpx));
    height: calc(24 * var(--fpx));
    background: url("../images/icon_plus_hollow.svg") center/contain no-repeat;
}

/* 桌面端仅列表；手机端见 @media 内 .swiper-eco */
section.eco .swiper-eco{
    display: none;
}

.eco-back{
    width: clamp(960px, 100vw, 1920px);
    height: clamp(480px, 50vw, 960px);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 0;
    overflow: hidden;
    background-color: #080914;
    pointer-events: none;
}

/* 与 about 共用同一 canvas，类名仍为 .about-back-canvas */
.eco-back .about-back-canvas{
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

section.cases{
    padding-top: calc(120 * var(--rpx));
    padding-bottom: calc(80 * var(--rpx));
    position: relative;
    z-index: 250;
}

.cases .width-limit{
    width: clamp(960px, 100vw, 1920px);
    margin: auto;
    box-sizing: border-box;
    padding-left: calc(60 * var(--rpx-50));
    padding-right: calc(60 * var(--rpx-50));

    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    z-index: 210;
}

.cases .title{
    font-weight: 600;
    font-size: calc(68 * var(--rpx-50));
    margin-top: 0;
}

.cases .pill-tag{
    margin-top: calc(30 * var(--rpx));
}

.cases .subtitle{
    font-size: calc(40 * var(--fpx-67));
    font-weight: 600;
    margin-top: calc(120 * var(--rpx-50));
}

/* 与列表页一致：四列精选；具体卡片样式见 cases.css */
section.cases .case-list{
    margin-top: calc(40 * var(--rpx));
    --gap: calc(60 * var(--rpx));
    --column: 4;
}

section.cases .case-list-wrap > .btn-ctn.cases-home-to-list{
    display: flex;
    justify-content: center;
    margin-top: calc(60 * var(--rpx));
}

section.publications-home{
    position: relative;
    min-height: calc(400 * var(--rpx));
    padding-top: calc(80 * var(--rpx));
    padding-bottom: calc(120 * var(--rpx));
}

/* 画布底层黑色；noise 色见 index_papers shader uColor1/uColor2 + uBackdrop */
.publications-back{
    position: absolute;
    width: 100%;
    top: calc(-60 * var(--rpx));
    height: calc(100% + 120 * var(--rpx));
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--theme-back);
}

.publications-back .publications-back-canvas{
    display: block;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.publications-home .width-limit{
    width: clamp(960px, 100vw, 1920px);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding-left: calc(60 * var(--rpx-50));
    padding-right: calc(60 * var(--rpx-50));
    position: relative;
    z-index: 260;
}

.publications-home .subtitle{
    font-weight: 600;
    font-size: calc(40 * var(--fpx-67));
    text-align: center;
    color: #fff;
}

/* 与列表页一致：四列 + publications.css / global卡片样式 */
section.publications-home .publication-list{
    margin-top: calc(40 * var(--rpx));
    margin-bottom: 0;
    --column: 4;
}

section.publications-home .publication-list-wrap > .btn-ctn.publications-home-to-list{
    display: flex;
    justify-content: center;
    margin-top: calc(60 * var(--rpx));
}

.home-mobile-swiper,
.home-mobile-swiper-more{
    display: none;
}

.hero-back-mobile{
    position: absolute;
    width: 100%;
    top: calc(480 * var(--rpx));
    height: calc(1440 * var(--rpx));
    display: none;
}

.hero-back-mobile img{
    display: block;
    width: 100%;
    height: auto;
}

/* 手机端静态底图：不跑 WebGL，侧栏图标仅保留渐变底 */
.hero-back--mobile-static .hero-side-icon__gl{
    display: none;
}

@media (max-width: 960px) {
    .eco-back{
        width: 100vw;
        height: 50vw;
    }

    .cases .width-limit,
    .publications-home .width-limit{
        width: 100%;
    }
}

@media (max-width: 828px) {
    .hero-back-mobile{
        display: block;
    }

    section.about .title{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section.about{
        margin-top: calc(-480 * var(--rpx));
        padding-bottom: calc(660 * var(--rpx));
    }

    /** 手机端粒子改为 logo_particles.webp；与 shader 槽位一致：about uViewScale=1、origin 顶中；eco uViewScale=2、origin 正中 */
    .about .about-back .about-back-particles-img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: top;
        pointer-events: none;
        transform: none;
    }
    .eco-back .about-back-particles-img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        vertical-align: top;
        pointer-events: none;
        transform: scale(2);
        transform-origin: 50% 0%;
    }

    .about .desc p:nth-of-type(1),
    .about .desc p:nth-of-type(2){
        width: 100%;
    }

    section.features{
        overflow-x: visible;
    }

    .feature .line{
        background-color: rgba(255, 255, 255, .1);
    }

    .feature .line::after{
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        left: calc(-10 * var(--rpx));
        width: calc(21 * var(--rpx));
        background: linear-gradient(to bottom, #08091400 15%, #080914FF 25%, #080914FF 80%, #08091400 100%);
        z-index: 190;
    }

    /* 手机：始终与 pin 搭配 min-height:100vh；自上而下优先排文案，figure 用 vh 上限缩小给文字让路 */
    .feature,
    .feature.flipped{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: flex-start;
        gap: clamp(calc(24 * var(--rpx)), 3vh, calc(60 * var(--rpx)));
        overflow-x: visible;
        overflow-y: visible;
        padding-top: calc(48 * var(--rpx) + var(--header-height));
        padding-bottom: calc(48 * var(--rpx));
        box-sizing: border-box;
        height: 100vh;
    }

    .feature .no{
        position: relative;
        left: unset;
        bottom: unset;
        margin-top: 0;
        margin-bottom: 0;
        flex: 0 0 auto;
    }

    .feature .info{
        width: var(--wrapper-width);
        max-width: 100%;
        align-items: center;
        text-align: center;
        flex: 0 0 auto;
    }

    /* 移动端滚动/refresh 抖动时，处于激活态的 feature 不应被瞬间重置为透明 */
    .feature .no.active ~ .info > *,
    .feature .no.active ~ .figure .figure-back,
    .feature .no.active ~ .figure img,
    .feature .no.active ~ .figure .index-feature1-svg{
        opacity: 1 !important;
        transform: none !important;
    }
 
    .feature .figure,
    .feature.flipped .figure{
        --feature-figure-cap: min(42vh, calc(0.55 * var(--wrapper-width)));
        margin-left: auto;
        margin-right: auto;
        width: min(calc(var(--wrapper-width) * .8), 88vw);
        max-width: none;
        max-height: var(--feature-figure-cap);
        flex: 0 1 auto;
        min-height: 0;
        overflow: visible;
    }

    @media (max-height: 640px) {
        .feature .figure,
        .feature.flipped .figure{
            --feature-figure-cap: min(30vh, 200px);
        }
    }

    .feature .figure img{
        display: block;
        max-height: var(--feature-figure-cap, min(42vh, calc(0.55 * var(--wrapper-width))));
        width: auto;
        max-width: 100%;
        height: auto;
        object-fit: contain;
        margin-left: auto;
        margin-right: auto;
    }

    .feature .figure .figure-back{
        overflow: visible;
    }

    section.eco .eco-list{
        display: none !important;
    }

    section.eco .swiper-eco{
        display: block;
        margin-top: calc(110 * var(--rpx-50));
        width: 100%;
        max-width: 100%;
        overflow: visible;
        margin-left: auto;
        margin-right: auto;
    }

    section.eco .swiper-eco .swiper-wrapper{
        align-items: stretch;
    }

    section.eco .swiper-eco .swiper-slide{
        width: calc(0.9 * var(--wrapper-width));
        height: auto;
        box-sizing: border-box;
    }

    .eco .desc{
        left: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        position: relative;
    }

    .eco .desc-ctn{
        height: auto;
    }

    .swiper-eco .swiper-slide .eco{
        position: relative;
        width: 100%;
        height: calc(840 * var(--rpx));
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba(0, 0, 0, .1);
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: calc(30 * var(--rpx));
        transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
        overflow: hidden;

        padding: calc(30 * var(--rpx));
    }

    section.eco .swiper-eco .swiper-slide:not(.swiper-slide-active) .eco{
        cursor: pointer;
    }

    section.eco .swiper-eco .swiper-slide:not(.swiper-slide-active) .eco::before{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom, #426CE900 30%, #426CE933 100%);
        z-index: 200;
        opacity: 0;
        transition: .3s;
    }

    @media (hover: hover) {
        section.eco .swiper-eco .swiper-slide:not(.swiper-slide-active) .eco:hover .btn-expand{
            transform: scale(1.08) rotate(90deg);
        }
        section.eco .swiper-eco .swiper-slide:not(.swiper-slide-active) .eco:hover::before{
            opacity: 1;
        }
    }

    .eco-back{
        bottom: unset;
    }

    .cases .width-limit,
    .publications-home .width-limit{
        width: 100%;
        padding-left: calc(24 * var(--rpx));
        padding-right: calc(24 * var(--rpx));
    }

    section.cases .case-list-wrap,
    section.publications-home .publication-list-wrap{
        display: none;
    }

    .home-mobile-swiper{
        display: block;
        width: var(--wrapper-width);
        max-width: 100%;
        overflow: visible;
        margin-top: calc(40 * var(--rpx));
        margin-left: auto;
        margin-right: auto;
    }

    .home-mobile-swiper .swiper-wrapper{
        align-items: stretch;
    }

    .home-mobile-swiper .swiper-slide{
        width: 85vw;
        height: auto;
        box-sizing: border-box;
    }

    section.cases .home-mobile-swiper .swiper-slide .case,
    section.publications-home .home-mobile-swiper .swiper-slide .publication-card{
        height: 100%;
    }

    .home-mobile-swiper-more{
        display: flex;
        justify-content: center;
        margin-top: calc(40 * var(--rpx));
    }

    .contact-text{
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section.publications-home .publication-card .info{
        display: flex;
        flex-direction: column;
        gap: calc(20 * var(--rpx));
        font-size: calc(14rem / 16);
    }

    section.publications-home .publication-card .info .cell{
        width: 100%;
    }

    .about-end-mask{

    }

    .about-end-mask{
        width: 100vw;
        height: 41.9271vw;
    }

    .hero-side-icons{
        display: none;
    }
}