/* NPC Eco Live 页面特有样式 */ /* 隐藏原生滚动条但保持滚动功能 */ body  {
    scrollbar-width: none;
    /* Firefox */ -ms-overflow-style: none;
    /* IE and Edge */
}
body::-webkit-scrollbar  {
    display: none;
    /* Chrome,
    Safari,
    Opera */
}
.scroll-container  {
    scrollbar-width: none;
    -ms-overflow-style: none;

}
.scroll-container::-webkit-scrollbar  {
    display: none;

}
.scroll-content  {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-top: calc(80 * 100vw / 1920);

}
.scroll-content::-webkit-scrollbar  {
    display: none;

}
/* Banner部分 */ .npc-banner  {
    position: relative;
    width: 100vw;
    height: calc(769 * 100vw / 1920);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}
.video-background  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* background: url('/images/NPC/npc-banner-bg.jpg') no-repeat center center;
    */ background-size: cover;

}
.video-background video  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;

}
.video-overlay  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
    /* 初始隐藏，延迟显示 */
    opacity: 0;
    transition: opacity 0.5s ease;

}

/* 蒙版延迟显示状态 */
.video-overlay.delayed-show {
    opacity: 1;
}
.banner-content  {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;

}
.banner-content h1  {
    position: absolute;
    width: 100%;
    top: calc(250 * 100vw / 1920);
    font-size: calc(60 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;

}
.banner-content .subtitle  {
    position: absolute;
    width: 100%;
    top: calc(350 * 100vw / 1920);
    font-size: calc(80 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.3s;

}
.banner-content .slogan  {
    position: absolute;
    width: 100%;
    top: calc(490 * 100vw / 1920);
    font-size: calc(30 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(26 * 100vw / 1920);
    text-align: center;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.6s;

}
.banner-content .consult-btn  {
    position: absolute;
    top: calc(641 * 100vw / 1920);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    /* 注意：合作咨询按钮的样式已移至组件CSS文件，此处仅保留位置定位 */
}
/* 通用section样式 */ 
section:not(.npc-banner)  {
    padding-top: calc(100 * 100vw / 1920) ;
    padding-bottom: calc(100 * 100vw / 1920) ;
    
}
.container  {
    padding: 0 calc(160 * 100vw / 1920);

}
/* 标题组样式 */ .title-group  {
    position: relative;
    height: calc(200 * 100vw / 1920);
    margin-bottom: 0;
    top: calc(100 * 100vw / 1920);
    z-index: 2;

}
.title-group .subtitle  {
    position: absolute;
    left: calc(23 * 100vw / 1920);
    top: calc(0 * 100vw / 1920);
    /* width: calc(133 * 100vw / 1920);
    */ height: calc(18 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    font-weight: 600;
    line-height: calc(11 * 100vw / 1920);
    text-transform: uppercase;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #5C5D95;

}
.title-group .subtitle::before  {
    content: '';
    position: absolute;
    left: calc(-23 * 100vw / 1920);
    /* top: calc(6 * 100vw / 1920); */
    width: calc(9 * 100vw / 1920);
    height: calc(9 * 100vw / 1920);
    background-color: #5C5D95;
    border-radius: 50%;

}
.title-group .main-title  {
    position: absolute;
    left: calc(22 * 100vw / 1920);
    top: calc(32 * 100vw / 1920);
    font-size: calc(50 * 100vw / 1920);
    font-weight: bold;
    line-height: 136%;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(0deg, #327EF7, #327EF7),
    radial-gradient(142% 142% at 14% -7%, #DBC4F9 19%, #727CE4 66%, #6775F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;

}
.title-group .intro-text  {
    position: absolute;
    left: calc(22 * 100vw / 1920);
    top: calc(120 * 100vw / 1920);
    width: calc(1440 * 100vw / 1920);
    height: calc(65 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    font-weight: 200;
    line-height: 180%;
    letter-spacing: 0em;
    color: #3A3937;

}
/* 内容区域样式 */ .intro-content,
.architecture-content,
.technology-content  {
    max-width: calc(800 * 100vw / 1920);
    margin: 0 auto;
    text-align: center;
    line-height: 1.8;

}
.intro-content p,
.architecture-content p  {
    margin-bottom: calc(20 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    color: #666;

}
/* 动画效果 */ @keyframes fadeInUp   {

    from  {
        opacity: 0;
        transform: translateY(30px);

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

    }

}
.feature-cards  {
    position: relative;
    top: calc(150 * 100vw / 1920);
    margin-bottom: calc(100 * 100vw / 1920);
    margin-left: calc(22 * 100vw / 1920);
    display: flex;
    gap: calc(20 * 100vw / 1920);
    z-index: 2;

}
/* 默认卡片隐藏状态 */ .feature-card  {
    position: relative;
    width: calc(500 * 100vw / 1920);
    height: calc(466 * 100vw / 1920);
    background: #FFFFFF;
    box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease,
    transform 0.8s ease,
    background 0.5s ease;
    overflow: hidden;

}
/* 卡片显示状态 */ .feature-card.show  {
    opacity: 1;
    transform: translateY(0);

}
/* 卡片hover效果 */ .feature-card::after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;

}
.feature-card:nth-child(1)::after  {
    background-image: url('../../images/NPC/pt-1.jpg');

}
.feature-card:nth-child(2)::after  {
    background-image: url('../../images/NPC/pt-2.jpg');

}
.feature-card:nth-child(3)::after  {
    background-image: url('../../images/NPC/pt-3.jpg');

}
.feature-card .hover-title  {
    position: absolute;
    left: calc(50 * 100vw / 1920);
    bottom: calc(36 * 100vw / 1920);
    font-size: calc(24 * 100vw / 1920);
    font-weight: bold;
    color: #FFFFFF;
    z-index: 6;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.5s ease,
    transform 0.5s ease;
    text-align: left;
    max-width: calc(366 * 100vw / 1920);

}
.feature-card:hover::after  {
    opacity: 1;

}
.feature-card:hover .hover-title  {
    opacity: 1;
    transform: translateY(0);

}
.feature-card .starfield-canvas  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
    z-index: 1;

}
.feature-card.active .starfield-canvas  {
    opacity: 0;
    /* 完全隐藏激活状态卡片上的星空动画 */
}
/* 删除hover时改变starfield-canvas透明度的样式 */ .feature-card:hover:not(.active) .starfield-canvas  {
    opacity: 0;

}
.feature-card .card-title  {
    position: absolute;
    width: 100%;
    top: calc(190 * 100vw / 1920);
    font-size: calc(24 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(32 * 100vw / 1920);
    text-align: center;
    letter-spacing: 0em;
    color: #2F2F2F;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease,
    transform 0.6s ease;

}
/* 激活状态标题 */ .feature-card.active .card-title  {
    color: #FFFFFF;

}
.feature-card .card-desc  {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    top: calc(326 * 100vw / 1920);
    width: calc(340 * 100vw / 1920);
    font-size: calc(16 * 100vw / 1920);
    font-weight: 200;
    line-height: 190%;
    text-align: center;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #2F2F2F;
    opacity: 0;
    transition: opacity 0.8s ease 0.2s,
    transform 0.8s ease 0.2s;

}
/* 卡片内容显示状态 */ .feature-card.show-content .card-title  {
    opacity: 1;
    transform: translateY(0);

}
.feature-card.show-content .card-desc  {
    opacity: 1;
    transform: translateX(-50%) translateY(0);

}
/* 激活状态描述 */ .feature-card.active .card-desc  {
    color: #FFFFFF;

}
.feature-card.active  {
    opacity: 1;
    background: linear-gradient(135deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 100%);
    box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.1);

}
.feature-card .card-icon  {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(67.52 * 100vw / 1920);
    display: flex;
    align-items: center;
    justify-content: center;

}
.feature-card .card-icon .icon  {
    width: calc(40 * 100vw / 1920);
    height: calc(53 * 100vw / 1920);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;

}
.feature-card:nth-child(1) .card-icon .icon  {
    background-image: url('../../images/NPC/feature-N.svg');

}
.feature-card:nth-child(2) .card-icon-c .icon  {
    background-image: url('../../images/NPC/feature-P.svg');
    width: calc(30 * 100vw / 1920);
    height: calc(42 * 100vw / 1920);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(67.52 * 100vw / 1920);
    display: flex;
    align-items: center;
    justify-content: center;

}
.feature-card:nth-child(3) .card-icon .icon  {
    background-image: url('../../images/NPC/feature-C.svg');

}
/* 鼠标悬停效果 */ .feature-card:hover:not(.active) .card-icon .icon  {
    transform: scale(1.1);
    box-shadow: 8px 9px 6px 0px rgba(0, 0, 0, 0.15);

}
/* 应用场景gallery样式 */ /* 计算每个图片的位置和宽度 */ .application-gallery .gallery-item:nth-child(1)  {
    left: 0;
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 1;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(2)  {
    left: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 2;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(3)  {
    left: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) * 2 / 7);
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 3;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(4)  {
    left: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) * 3 / 7);
    width: calc(755 * 100vw / 1920);
    z-index: 5;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(5)  {
    right: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) * 3 / 7);
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 3;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(6)  {
    right: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) * 2 / 7);
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 2;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(7)  {
    right: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 1;
    transform: translateX(0);

}
.application-gallery .gallery-item:nth-child(8)  {
    right: 0;
    width: calc((1559 * 100vw / 1920 - 755 * 100vw / 1920) / 7);
    z-index: 1;
    transform: translateX(0);

}
/* 蒙版效果 */ .application-gallery .gallery-item:hover .mask  {
    opacity: 0;

}
.application-gallery .gallery-item:hover ~ .gallery-item .mask  {
    opacity: 1;

}
.application-gallery .gallery-item.active .mask  {
    opacity: 0;

}
.application-gallery .gallery-item:not(.active) .mask  {
    opacity: 1;

}
.application-gallery .gallery-item.active  {
    z-index: 10;
    cursor: pointer;

}
.npc-intro  {
    height: calc(939 * 100vw / 1920);

}
.npc-intro .decoration-ball  {
    position: absolute;
    left: calc(-164 * 100vw / 1920);
    top: calc(347 * 100vw / 1920);
    width: calc(939 * 100vw / 1920);
    height: calc(939 * 100vw / 1920);
    opacity: 0.8;
    background: linear-gradient(145deg,
    rgba(217, 185, 252, 0.6) 20%,
    rgba(114, 132, 227, 0.6) 100%);
    filter: blur(calc(337 * 100vw / 1920));
    pointer-events: none;
    z-index: 1;

}
.npc-architecture  {
    padding: calc(100 * 100vw / 1920) 0;
    background: #FFFFFF;
    position: relative;

}
.npc-architecture .container  {
    max-width: calc(1920 * 100vw / 1920);
    /* margin: 0 auto;
    */
}
.npc-architecture .architecture-images  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * 100vw / 1920);
    position: relative;
    margin-top: calc(60 * 100vw / 1920);

}
.npc-architecture .arch-img  {
    display: block;
    transition: all 0.5s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;

}
.npc-architecture .arch-img-1  {
    width: calc(754 * 100vw / 1920);
    height: calc(237 * 100vw / 1920);

}
.npc-architecture .arch-img-2  {
    width: calc(846 * 100vw / 1920);
    height: calc(214 * 100vw / 1920);

}
.npc-architecture .arch-img-3  {
    width: calc(846 * 100vw / 1920);
    height: calc(360 * 100vw / 1920);

}
.npc-architecture .architecture-content  {
    width: 100%;
    text-align: center;

}
.npc-architecture .main-title  {
    position: relative;
    display: inline-block;
    font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(90deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    width: fit-content;
    margin: 0 auto;
    text-align: center;

}
.carousel-container  {
    margin-top: calc(73 * 100vw / 1920);
    position: relative;

}
.carousel-tabs  {
    display: flex;
    gap: calc(10 * 100vw / 1920);
    margin-bottom: 0;
    position: relative;
    width: calc(1240 * 100vw / 1920);
    overflow: hidden;
    left: calc(20 * 100vw / 1920);

}
.carousel-tabs .inner-container  {
    display: flex;
    gap: calc(15 * 100vw / 1920);
    transition: transform 0.5s ease;
    width: max-content;

}
.carousel-tabs .tab  {
    width: calc(413 * 100vw / 1920);
    height: calc(100 * 100vw / 1920);
    position: relative;
    cursor: pointer;
    opacity: 0.4;
    background: #FFFFFF;
    transition: all 0.3s ease;
    flex-shrink: 0;

}
.carousel-tabs .tab::before  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #6567DE;
    transition: all 0.3s ease;

}
.carousel-tabs .tab.active  {
    opacity: 1;
    background: linear-gradient(270deg,
    rgba(150, 89, 255, 0.1) 0%,
    rgba(89, 159, 255, 0) 100%);

}
.carousel-tabs .tab.active::before  {
    height: 2px;
    background: linear-gradient(90deg, #7B53EB 0%, #645EEF 50%, #5068F2 100%);

}
.carousel-tabs .tab-number  {
    display: none;
    position: absolute;
    left: calc(20 * 100vw / 1920);
    top: 50%;
    transform: translateY(-50%);
    font-size: calc(60 * 100vw / 1920);
    font-weight: normal;
    line-height: 190%;
    letter-spacing: 0em;
    background: linear-gradient(180deg,
    #9496FC 40%,
    rgba(255, 255, 255, 0) 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}
.carousel-tabs .tab.active .tab-number  {
    display: block;

}
.carousel-tabs .tab-content  {
    padding: calc(20 * 100vw / 1920);
    transition: all 0.3s ease;
    white-space: nowrap;

}
.carousel-tabs .tab.active .tab-content  {
    padding-left: calc(100 * 100vw / 1920);

}
.carousel-tabs .tab-content h3  {
    font-size: calc(24 * 100vw / 1920);
    font-weight: bold;
    color: #6A6DF3;
    margin-bottom: calc(0 * 100vw / 1920);

}
.carousel-tabs .tab-content p  {
    font-size: calc(14 * 100vw / 1920);
    color: #6A6DF3;
    opacity: 0.8;

}
.carousel-main  {
    position: relative;
    width: calc(1559 * 100vw / 1920) !important;
    height: calc(590 * 100vw / 1920) !important;
    margin: 0 auto;
    overflow: hidden;

}
.carousel-main::after  {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(200 * 100vw / 1920);
    background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.7));
    pointer-events: none;
    z-index: 1;

}
.carousel-main img  {
    width: calc(1559 * 100vw / 1920) !important;
    height: calc(590 * 100vw / 1920) !important;
    object-fit: cover;

}
.carousel-main .image-caption  {
    position: absolute;
    left: calc(40 * 100vw / 1920);
    bottom: calc(40 * 100vw / 1920);
    color: #FFFFFF;
    z-index: 2;

}
.main-inner-container  {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;

}
.carousel-slide  {
    position: relative;
    flex: none;
    width: 100%;
    height: 100%;

}
.carousel-slide img  {
    width: 100%;
    height: 100%;
    object-fit: cover;

}
.carousel-slide .image-caption  {
    position: absolute;
    left: calc(40 * 100vw / 1920);
    bottom: calc(40 * 100vw / 1920);
    color: #FFFFFF;
    z-index: 2;

}
.carousel-main .caption-small  {
    font-size: calc(12 * 100vw / 1920);
    margin-bottom: calc(8 * 100vw / 1920);
    font-weight: 600;
    line-height: 150%;
    text-transform: uppercase;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease,
    transform 0.5s ease;

}
.carousel-main .caption-large  {
    font-size: calc(38 * 100vw / 1920);
    font-weight: bold;
    line-height: 150%;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.1s,
    transform 0.5s ease 0.1s;

}
/* 当图片加载完成后，触发动画 */ .carousel-main .image-caption.show-caption .caption-small,
.carousel-main .image-caption.show-caption .caption-large,
.transition-image:not([style*="left: 100%"]):not([style*="left: -100%"]) ~ .image-caption .caption-small,
.transition-image:not([style*="left: 100%"]):not([style*="left: -100%"]) ~ .image-caption .caption-large  {
    opacity: 1;
    transform: translateY(0);

}
.carousel-description  {
    position: relative;
    margin-top: calc(27 * 100vw / 1920);
    display: flex;
    align-items: center;
    left: calc(20 * 100vw / 1920);
    width: calc(1559 * 100vw / 1920);

}
.carousel-description .description-line  {
    position: relative;
    width: calc(2 * 100vw / 1920);
    height: calc(52 * 100vw / 1920);
    background: linear-gradient(180deg, #96A6EC 0%, #eceffd 100%);

}
.carousel-description .description-text  {
    position: relative;
    margin-left: calc(24 * 100vw / 1920);
    width: calc(1440 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    font-weight: 100;
    line-height: 190%;
    color: #2F2F2F;

}
.carousel-progress  {
    position: absolute;
    right: calc(20 * 100vw / 1920);
    top: calc(-2 * 100vw / 1920);
    display: flex;
    flex-direction: row;
    gap: calc(6 * 100vw / 1920);

}
.carousel-progress .progress-item  {
    width: calc(7 * 100vw / 1920);
    height: calc(7 * 100vw / 1920);
    background: rgba(101, 103, 222, 0.3);
    border-radius: calc(7 * 100vw / 1920);
    cursor: pointer;
    transition: all 0.5s ease;

}
.carousel-progress .progress-item.active  {
    width: calc(70 * 100vw / 1920);
    background: #6567DE;

}
.npc-value  {
    margin-top: 0;

}
.npc-value .container  {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    /* padding: calc(100 * 100vw / 1920);
    */ text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

}
.npc-value .title-group  {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
    margin-bottom: calc(0 * 100vw / 1920);

}
.npc-value .title-group .subtitle  {
    position: relative;
    left: auto;
    display: inline-block;

}
.npc-value .title-group .subtitle::before  {
    left: calc(-13 * 100vw / 1920);

}
.npc-value .title-group .main-title  {
    position: relative;
    left: auto;
    margin-top: calc(0 * 100vw / 1920);
    width: auto;
    height: auto;
    text-align: center;

}
.npc-technology .main-title,
.npc-value .main-title  {
    position: relative;
    display: inline-block;
    font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(90deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 100%),
    radial-gradient(142% 142% at 14% -7%, #DBC4F9 19%, #727CE4 66%, #6775F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    width: fit-content;
    margin: 0 auto;
    text-align: left;

}
.npc-value .value-content  {
    margin-top: calc(200 * 100vw / 1920);
    width: calc(1559 * 100vw / 1920);
    height: calc(753 * 100vw / 1920);
    margin-left: auto;
    margin-right: auto;
    border-top: 1px solid #B8C8FC;
    border-bottom: 1px solid #B8C8FC;
    position: relative;
    max-width: none;

}
.value-content .value-list  {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;

}
.value-content .value-item  {
    position: relative;
    height: calc(70 * 100vw / 1920);
    transition: all 0s cubic-bezier(0.5,0, 0.5, 1);
    overflow: hidden;
    cursor: pointer;

}
.value-content .value-item.active  {
    height: calc(333 * 100vw / 1920);

}
.value-content .value-item .item-content  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(333 * 100vw / 1920);
    opacity: 0;
    visibility: hidden;
    transition: all 0s cubic-bezier(0.4, 0, 0.2, 1);

}
.value-content .value-item.active .item-content  {
    opacity: 1;
    visibility: visible;

}
.value-content .value-item:not(:last-child)::after  {
    content: '';
    position: absolute;
    left: calc(563 * 100vw / 1920);
    bottom: 0;
    width: calc(995 * 100vw / 1920);
    height: 1px;
    background-color: #B8C8FC;

}
.value-content .value-item.active .cn-text,
.value-content .value-item.active .en-text  {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30%);

}
.value-content .value-item .cn-text,
.value-content .value-item .en-text  {
    position: absolute;
    font-size: calc(20 * 100vw / 1920);
    top: 50%;
    transform: translateY(-50%);
    font-weight: 100;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}
.value-content .value-item .cn-text  {
    left: calc(608 * 100vw / 1920);
    color: #696875;

}
.value-content .value-item .en-text  {
    left: calc(973 * 100vw / 1920);
    color: #7885E1;

}
.value-content .value-item:hover .cn-text,
.value-content .value-item:hover .en-text  {
    color: #6567DE;

}
.value-content .core-images  {
    display: flex;
    width: 100%;
    height: 100%;

}
.value-content .core-left  {
    width: calc(564 * 100vw / 1920);
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform 0.6s ease-out,
    filter 0.6s ease-out;
    transform-origin: center;
    overflow: hidden;
    /* 默认稍微变暗，鼠标悬浮时恢复并放大 */ filter: brightness(0.9);

}
/* 添加左侧图片悬浮放大效果 */ .value-content .value-item.active:hover .core-left  {
    transform: scale(1.08);
    filter: brightness(1.05);

}
.value-content .core-right  {
    width: calc(995 * 100vw / 1920);
    height: 100%;
    background: url('../../images/NPC/CORE-bg.png') no-repeat center center;
    background-size: cover;
    position: relative;

}
.value-content .core-right .en-title  {
    position: absolute;
    left: calc(45 * 100vw / 1920);
    top: calc(40 * 100vw / 1920);
    font-size: calc(12 * 100vw / 1920);
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(calc(20 * 100vw / 1920));
    transition: opacity 0.6s ease,
    transform 0.6s ease;

}
.value-content .core-right .cn-title  {
    position: absolute;
    left: calc(45 * 100vw / 1920);
    top: calc(60 * 100vw / 1920);
    font-size: calc(38 * 100vw / 1920);
    font-weight: bold;
    color: #FFFFFF;
    opacity: 0;
    transform: translateY(calc(20 * 100vw / 1920));
    transition: opacity 0.6s ease 0.1s,
    transform 0.6s ease 0.1s;

}
.value-content .core-right .description  {
    position: absolute;
    left: calc(45 * 100vw / 1920);
    bottom: calc(32 * 100vw / 1920);
    width: calc(920 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    color: #FFFFFF;
    line-height: 1.5;
    font-weight: 200;
    text-align: left;
    opacity: 0;
    transform: translateY(calc(20 * 100vw / 1920));
    transition: opacity 0.6s ease 0.2s,
    transform 0.6s ease 0.2s;

}
/* 当value-item处于active状态时显示文字，并在鼠标悬浮时触发上滑动画 */ .value-content .value-item.active .core-right .en-title,
.value-content .value-item.active .core-right .cn-title,
.value-content .value-item.active .core-right .description  {
    opacity: 1;
    transform: translateY(0);

}
/* 当用户悬浮在active的item上时，重置动画以便再次触发 */ .value-content .value-item.active:hover .core-right .en-title  {
    animation: slideUpFadeIn 0.6s ease forwards;

}
.value-content .value-item.active:hover .core-right .cn-title  {
    animation: slideUpFadeIn 0.6s ease forwards 0.1s;

}
.value-content .value-item.active:hover .core-right .description  {
    animation: slideUpFadeIn 0.6s ease forwards 0.2s;

}
@keyframes slideUpFadeIn   {

    0%  {
        opacity: 0;
        transform: translateY(calc(20 * 100vw / 1920));

    }
    100%  {
        opacity: 1;
        transform: translateY(0);

    }

}
.value-content .value-item:nth-child(1) .core-left  {
    background-image: url('../../images/NPC/CORE-1.jpg');

}
.value-content .value-item:nth-child(2) .core-left  {
    background-image: url('../../images/NPC/CORE-2.jpg');

}
.value-content .value-item:nth-child(3) .core-left  {
    background-image: url('../../images/NPC/CORE-3.jpg');

}
.value-content .value-item:nth-child(4) .core-left  {
    background-image: url('../../images/NPC/CORE-4.jpg');

}
.value-content .value-item:nth-child(5) .core-left  {
    background-image: url('../../images/NPC/CORE-5.jpg');

}
.value-content .value-item:nth-child(6) .core-left  {
    background-image: url('../../images/NPC/CORE-6.jpg');

}
.value-content .value-item:nth-child(7) .core-left  {
    background-image: url('../../images/NPC/CORE-7.jpg');

}

.npc-application .container  {
    width: 100%;
    max-width: calc(1559 * 100vw / 1920);
    margin: 0 auto;
    padding: 0;
    text-align: left;
    margin-top: 0;

}
.npc-application .title-group  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: calc(0 * 100vw / 1920);
    margin-left: calc(0 * 100vw / 1920);

}
.npc-application .title-group .subtitle  {
    /* position: relative;
    */ left: auto;
    display: inline-block;

}
.npc-application .title-group .subtitle::before  {
    left: calc(-13 * 100vw / 1920);

}
.npc-application .title-group .main-title  {
    position: relative;
    font-size: calc(66 * 100vw / 1920);
    font-weight: 600;
    left: auto;
    margin-top: calc(0 * 100vw / 1920);
    width: auto;
    height: auto;
    text-align: left;
    background: linear-gradient(90deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}
/* 应用场景图片展示 */ .application-gallery  {
    margin-top: calc(80 * 100vw / 1920);
    width: calc(1559 * 100vw / 1920);
    height: calc(755 * 100vw / 1920);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}
.application-gallery .gallery-item  {
    position: absolute;
    height: 100%;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;

}
.application-gallery .gallery-item .title-wrapper  {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: calc(80 * 100vw / 1920);
    padding-left: calc(56 * 100vw / 1920);
    z-index: 3;
    pointer-events: none;

}
.application-gallery .gallery-item:not(.active) .title-wrapper  {
    justify-content: center;
    align-items: flex-start;
    padding: calc(300 * 100vw / 1920) 0 0 0;
    flex-direction: row;
    gap: calc(10 * 100vw / 1920);

}
.application-gallery .gallery-item .en-title,
.application-gallery .gallery-item .cn-title  {
    transition: none;

}
.application-gallery .gallery-item.active .en-title  {
    position: absolute;
    left: calc(56 * 100vw / 1920);
    bottom: calc(140 * 100vw / 1920);
    font-size: calc(12 * 100vw / 1920);
    color: #FFFFFF;
    transform: none;
    transition: none;

}
.application-gallery .gallery-item.active .cn-title  {
    position: absolute;
    left: calc(56 * 100vw / 1920);
    bottom: calc(80 * 100vw / 1920);
    font-size: calc(38 * 100vw / 1920);
    color: #FFFFFF;
    transform: none;
    transition: none;

}
.application-gallery .gallery-item:not(.active) .en-title,
.application-gallery .gallery-item:not(.active) .cn-title  {
    text-transform: uppercase;
    writing-mode: vertical-lr;
    transform: rotate(0deg);
    transition: none;

}
.application-gallery .gallery-item:not(.active) .en-title  {
    font-size: calc(14 * 100vw / 1920);
    font-weight: 400;
    color: #ffffff;

}
.application-gallery .gallery-item:not(.active) .cn-title  {
    font-size: calc(20 * 100vw / 1920);
    font-weight: 400;
    color: #ffffff;

}
.application-gallery .gallery-item img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}
.application-gallery .gallery-item:not(.active) img  {
    opacity: 1;

}
.application-gallery .gallery-item.active img  {
    opacity: 1;

}
.application-gallery .gallery-item .mask  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: hsla(235, 60%, 13%, 0.7);
    transition: all 0.5s cubic-bezier(1, 0, 0, 0);
    pointer-events: none;

}
/* 添加查看大图按钮样式 */ .application-gallery .gallery-item.active .view-full  {
    position: absolute;
    top: calc(20 * 100vw / 1920);
    right: calc(20 * 100vw / 1920);
    width: calc(40 * 100vw / 1920);
    height: calc(40 * 100vw / 1920);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;

}
.application-gallery .gallery-item.active .view-full:hover  {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);

}
.application-gallery .gallery-item.active .view-full:before  {
    content: '+';
    color: #fff;
    font-size: calc(30 * 100vw / 1920);
    font-weight: 300;
    line-height: 1;

}
/* 图片查看器样式 */ .image-viewer  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    align-items: center;
    justify-content: center;

}
.image-viewer.active  {
    display: flex;
    opacity: 1;

}
.image-viewer .viewer-content  {
    position: relative;
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}
.image-viewer .viewer-image  {
    max-width: 100%;
    max-height: 85%;
    object-fit: contain;
    flex-shrink: 0;

}
.image-viewer .close-viewer  {
    position: absolute;
    top: calc(-50 * 100vw / 1920);
    right: 0;
    width: calc(40 * 100vw / 1920);
    height: calc(40 * 100vw / 1920);
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Safari兼容性：移除伪元素，改用JavaScript创建关闭图标 */
    border: none;
    outline: none;
    z-index: 10001;

}
.image-viewer .close-viewer:hover  {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);

}
/* Safari兼容性：移除伪元素样式，改用JavaScript创建 */
/* .image-viewer .close-viewer:before  {
    content: '×';
    color: #fff;
    font-size: calc(20 * 100vw / 1920);
    font-weight: 300;
    line-height: 1;
} */
.image-viewer .viewer-caption  {
    position: relative;
    bottom: auto;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    margin-top: calc(20 * 100vw / 1920);
    /* Safari兼容性：确保文字显示 */
    z-index: 10000;
    visibility: visible;
    opacity: 1;

}
.image-viewer .viewer-caption .en-title  {
    font-size: calc(14 * 100vw / 1920);
    opacity: 0.7;
    margin-bottom: calc(5 * 100vw / 1920);
    /* Safari兼容性：确保文字显示 */
    color: #fff !important;
    visibility: visible;
    display: block;

}
.image-viewer .viewer-caption .cn-title  {
    font-size: calc(24 * 100vw / 1920);
    font-weight: bold;
    /* Safari兼容性：确保文字显示 */
    color: #fff !important;
    visibility: visible;
    display: block;

}
/* 蒙版效果 - 禁用CSS hover，改为JavaScript控制 */ /* .application-gallery .gallery-item:hover .mask  {
    opacity: 0;

}
.application-gallery .gallery-item:hover ~ .gallery-item .mask  {
    opacity: 1;

} */
.application-gallery .gallery-item.active .mask  {
    opacity: 0;

}
.application-gallery .gallery-item:not(.active) .mask  {
    opacity: 1;

}
.application-gallery .gallery-item.active  {
    z-index: 10;
    cursor: pointer;

}
/* 动画期间禁用hover效果 */ .application-gallery.animating  {
    pointer-events: none;

}
.application-gallery.animating .gallery-item  {
    pointer-events: none;

}
/* 移动端适配 */ @media screen and (max-width: 750px)   {

    .npc-banner  {
        height: calc(1100 * 100vw / 750);
        /* 增加移动端banner高度 */
    }
    .banner-content  {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 calc(30 * 100vw / 750);

    }
    .banner-content h1  {
        position: relative;
        top: auto;
        font-size: calc(60 * 100vw / 750);
        margin-bottom: calc(30 * 100vw / 750);

    }
    .banner-content .subtitle  {
        position: relative;
        top: auto;
        font-size: calc(60 * 100vw / 750);
        margin-bottom: calc(30 * 100vw / 750);

    }
    .banner-content .slogan  {
        position: relative;
        top: auto;
        font-size: calc(32 * 100vw / 750);
        line-height: 1.4;
        margin-bottom: calc(50 * 100vw / 750);

    }
    .banner-content .consult-btn  {
        position: absolute;
        top: auto;
        bottom: calc(40 * 100vw / 750);
        left: 0;
        right: 0;
        margin: 0 auto;

    }
    .title-group .main-title {
    position: absolute;
    left: calc(0 * 100vw / 750);
    top: calc(25 * 100vw / 750);
    font-size: calc(23 * 100vw / 750);
    font-weight: bold;
    line-height: calc(26 * 100vw / 750);
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(0deg, #327EF7, #327EF7), radial-gradient(142% 142% at 14% -7%, #DBC4F9 19%, #727CE4 66%, #6775F0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: left;
}
    .feature-cards  {
    position: relative;
    top: calc(20 * 100vw / 750);
    margin-bottom: calc(0 * 100vw / 750);
    margin-left: calc(0 * 100vw / 750);
    display: flex;
    gap: calc(20 * 100vw / 750);
    z-index: 2;
    }
  
    .title-group{
    position: relative;
    height: calc(100 * 100vw / 750);
    margin-bottom: 0;
    z-index: 2;    
    }
    .title-group .intro-text {
    position: absolute;
    left: calc(0 * 100vw / 750);
    top: calc(65 * 100vw / 750);
    width: calc(620 * 100vw / 750);
    height: calc(65 * 100vw / 750);
    font-size: calc(14 * 100vw / 750);
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0em;
    color: #3A3937;
    display: none;
}
.npc-intro {
    height: calc(350 * 100vw / 750);
    padding: 0;
}

/* 手机版图片查看器适配 */
.image-viewer .viewer-content {
    width: 95%;
    height: 90%;
    padding: calc(20 * 100vw / 750);
    flex-direction: column;
    justify-content: center;
}

.image-viewer .viewer-image {
    max-width: 100%;
    max-height: 85%;
    object-fit: contain;
}

.image-viewer .close-viewer {
    top: calc(-60 * 100vw / 750);
    right: calc(-10 * 100vw / 750);
    width: calc(60 * 100vw / 750);
    height: calc(60 * 100vw / 750);
    background: rgba(255, 255, 255, 0.3);
    /* Safari兼容性：移除伪元素，改用JavaScript创建关闭图标 */
    border: none;
    outline: none;
}

/* Safari兼容性：移除伪元素样式，改用JavaScript创建 */
/* .image-viewer .close-viewer:before {
    font-size: calc(40 * 100vw / 750);
} */

.image-viewer .viewer-caption {
    position: relative;
    bottom: auto;
    margin-top: calc(20 * 100vw / 750);
    padding: 0 calc(20 * 100vw / 750);
}

.image-viewer .viewer-caption .en-title {
    font-size: calc(20 * 100vw / 750);
    margin-bottom: calc(8 * 100vw / 750);
}

.image-viewer .viewer-caption .cn-title {
    font-size: calc(32 * 100vw / 750);
    font-weight: bold;
}

/* 手机版应用场景区域适配 */
.application-gallery .gallery-item.active {
    cursor: pointer;
}

}

/* ============================
   NPC页面图片预览遮罩层样式（参考benchmark-grid）
   ============================ */

/* 预览遮罩层 */
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.preview-overlay.active {
    opacity: 1;
    visibility: visible;
}

.preview-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preview-image {
    max-width: 100%;
    max-height: calc(90vh - 100px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.preview-title {
    margin-top: 20px;
    text-align: center;
    color: #fff;
}

.preview-cn-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.preview-en-title {
    font-size: 16px;
    opacity: 0.8;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.preview-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.preview-close:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.close-line {
    position: absolute;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.close-line-1 {
    transform: rotate(45deg);
}

.close-line-2 {
    transform: rotate(-45deg);
}

/* 移动端适配 */
@media screen and (max-width: 750px) {
    .preview-content {
        max-width: 95vw;
        max-height: 95vh;
    }

    .preview-image {
        max-height: calc(95vh - 120px);
    }

    .preview-close {
        top: -40px;
        right: -5px;
        width: 32px;
        height: 32px;
        background: transparent;
        border-radius: 0;
    }

    .preview-close:hover {
        background: transparent;
        transform: scale(1.2);
    }

    .close-line {
        width: 20px;
        height: 2px;
    }

    .preview-cn-title {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .preview-en-title {
        font-size: 14px;
    }
    .feature-card .card-title{
        font-size: calc(14 * 100vw / 750) !important;
        line-height: calc(20 * 100vw / 750) !important;
    }
    .feature-card .card-desc{
        opacity: 0 !important;
    }
    .title-group .subtitle{
        font-size: calc(14 * 100vw / 750) !important;
        line-height: calc(8 * 100vw / 750) !important;
    }
    .value-content .value-item .en-text{
        display: none !important;
    }
    .carousel-tabs{
        display: none !important;
    }
     .carousel-progress{
        display: none !important;
    }
    .carousel-description{
        display: none !important;
    }
    .carousel-main img{
        height: calc(300 * 100vw / 750) !important;
    }
    .carousel-main{
        height: calc(262 * 100vw / 750) !important;
    }
    .value-content .core-right .en-title{
        display: none !important;
   }
    .carousel-main .caption-small{
        font-size: calc(12 * 100vw / 750) !important;
   }
    .carousel-main .caption-large{
        font-size: calc(22 * 100vw / 750) !important;
   }

   /* 核心价值区域手机版样式 */
   .npc-value .value-content {
        height: auto !important;
        min-height: calc(500 * 100vw / 750) !important;
   }

   .value-content .value-list {
        position: relative !important;
        height: auto !important;
   }

   .value-content .value-item {
        height: calc(60 * 100vw / 750) !important;
   }

   .value-content .value-item.active {
        height: calc(162 * 100vw / 750) !important;
   }

   .value-content .core-right .description {
        font-size: calc(12 * 100vw / 750) !important;
        line-height: 1.1 !important;
        font-weight: 300 !important;
   }
   .value-content .core-right .cn-title{
        font-size: calc(22 * 100vw / 750) !important;
        text-align: left !important;
   }
   .value-content .value-item .cn-text, .value-content .value-item .en-text{
       font-size: calc(18 * 100vw / 750) !important;
       font-weight: 300 !important;
   }
   .value-content .value-item .item-content{
    height: calc(162 * 100vw / 750) !important;
   }
   .npc-architecture .architecture-images{
    transform: scale(1.8);
   }
   .npc-architecture .container{
    height: calc(700 * 100vw / 750) !important;
   }
   .npc-architecture .architecture-content{
    margin-top: calc(160 * 100vw / 750) !important;
   }
   .application-gallery .gallery-item:not(.active) .en-title{
    display: none !important;
   }
   .application-gallery .gallery-item.active .en-title{
    display: none !important;
   }
   .application-gallery .gallery-item:not(.active) .cn-title{
    font-size: calc(12 * 100vw / 750) !important;
   }
}