/* Banner部分 */ .npc-banner  {
    position: relative;
    margin-top: calc(80 * 100vw / 1920);
    width: calc(1920 * 100vw / 1920);
    height: calc(815 * 100vw / 1920);
    background: url('../../images/join/banner.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}


.banner-content  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 2;

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

}
.banner-content .subtitle  {
    position: absolute;
    width: 100%;
    top: calc(320 * 100vw / 1920);
    font-size: calc(70 * 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-1  {
    position: absolute;
    width: 100%;
    top: calc(490 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(20 * 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 .slogan-2  {
    position: absolute;
    width: 100%;
    top: calc(540 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(20 * 100vw / 1920);
    text-align: center;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    color: #FFFFFF;
    opacity: 0;
    animation: fadeInUp 1s ease forwards 0.9s;

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

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

}
.container  {
    max-width: calc(1559 * 100vw / 1920);
    margin: 0 auto;
    padding-top: calc(80 * 100vw / 1920);
}
/* 标题组样式 */ .title-group  {
    position: relative;
    height: calc(200 * 100vw / 1920);
    margin-bottom: 0;
    margin-left: calc(35 * 100vw / 1920);
    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(22 * 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(12 * 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);
    width: calc(1600 * 100vw / 1920);
    height: calc(137 * 100vw / 1920);
    font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: 136%;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    background: linear-gradient(106deg, #6567DE 47%, #A0A2FB 117%),
    linear-gradient(90deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 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(209 * 100vw / 1920);
    width: calc(673 * 100vw / 1920);
    height: calc(65 * 100vw / 1920);
    font-size: calc(18 * 100vw / 1920);
    font-weight: normal;
    line-height: 180%;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    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(80 * 100vw / 1920);
    /* margin-bottom: calc(200 * 100vw / 1920);
    */ margin-left: calc(22 * 100vw / 1920);
    display: flex;
    gap: calc(20 * 100vw / 1920);
    z-index: 2;

}
.feature-card  {
    position: relative;
    width: calc(470 * 100vw / 1920);
    height: calc(470 * 100vw / 1920);
    /* transition: all 1s ease;
    */ /* flex: 1;
    */ overflow: hidden;
    left: calc(30 * 100vw / 1920);

}
.feature-card:nth-child(2n+1)  {
    background: linear-gradient(139deg, #3E6BFF -28%, #9B6BFC 27%, #421AD1 110%),
    #FFFFFF;
    box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.05);

}
.feature-card:nth-child(2n+2)  {
    background: linear-gradient(139deg, #F8FAFF -28%, #EEE5FF 27%, #DCD2FF 110%),
    #FFFFFF;
    box-shadow: 0px 4px 19px 0px rgba(0, 0, 0, 0.05);

}
.feature-card:nth-child(2n+2) .card-title-en,
.feature-card:nth-child(2n+2) .card-title,
.feature-card:nth-child(2n+2) .card-desc  {
    color: #8355F0;

}
.feature-card .card-title-en  {
    position: absolute;
    width: 100%;
    top: calc(210 * 100vw / 1920);
    font-size: calc(12 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(32 * 100vw / 1920);
    text-align: center;
    color: #FFFFFF;

}
.feature-card .card-title  {
    position: absolute;
    width: 100%;
    top: calc(240 * 100vw / 1920);
    font-size: calc(28 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(32 * 100vw / 1920);
    text-align: center;
    letter-spacing: 0em;
    color: #FFFFFF;

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

}
.feature-card .card-icon .icon  {
    width: 100%;
    height: 100%;

}
.feature-card .card-desc  {
    position: absolute;
    left: 0;
    top: calc(326 * 100vw / 1920);
    width: 100%;
    font-size: calc(16 * 100vw / 1920);
    font-weight: normal;
    line-height: 190%;
    text-align: center;
    letter-spacing: 0em;
    color: #FFFFFF;

}
.npc-intro  {
    background-color: #FFFFFF;
    position: relative;
    height: calc(1000* 100vw / 1920);

}
/* 优化装饰球的blur效果 */ .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: radial-gradient(circle,
    rgba(217, 185, 252, 0.6) 20%,
    rgba(114, 132, 227, 0.3) 60%,
    rgba(114, 132, 227, 0.1) 100%);
    pointer-events: none;
    z-index: 1;

}
/* Safari和QQ浏览器优化 */ @supports (-webkit-appearance: none)   {

    .npc-intro .decoration-ball  {
        filter: blur(100px);
        /* 减少blur值 */
    }

}
/* 移动设备优化 */ @media screen and (max-width: 750px)   {

    .npc-intro .decoration-ball  {
        filter: none !important;
        /* 移动设备完全禁用blur */ background: rgba(217, 185, 252, 0.3) !important;

    }
    .feature-card .card-desc{
        display: none;
    }
    .feature-card .card-title-en{
        font-size: calc(12 * 100vw / 750) !important;
        top: calc(95 * 100vw / 750) !important;
    }
    
    .feature-card .card-title{
        font-size: calc(18 * 100vw / 750) !important;
        top: calc(120 * 100vw / 750) !important;
    }
    .application-gallery .gallery-item.active .desc{
        display: none !important;
    }
    .lang-zh-CN .application-gallery .gallery-item.active .en-title, .lang-zh-TW .application-gallery .gallery-item.active .en-title{
        display: none !important;
    }
    .lang-zh-CN .application-gallery .gallery-item:not(.active) .en-title, .lang-zh-TW .application-gallery .gallery-item:not(.active) .en-title{
        display: none !important;
    }
    .lang-en .application-gallery .gallery-item:not(.active) .cn-title{
        display: none !important;
    }
    .lang-en .application-gallery .gallery-item.active .cn-title{
        display: none !important;
    }
    
    .join-menu-title-en{
        font-size: calc(14 * 100vw / 750) !important;
    }
    .join-menu-title{
        font-size: calc(14 * 100vw / 750) !important;
    }
    .join-menu-title-cn{
        font-size: calc(14 * 100vw / 750) !important;
    }
    .join-menu-list{
        width: calc(190 * 100vw / 750) !important;
        height: calc(500 * 100vw / 750) !important;
        display: none;
    }
    .join-menu-showcase{
        height: calc(500 * 100vw / 750) !important;
    }
    .ft-value{
        height: calc(580 * 100vw / 750) !important;
    }
    .join-menu-item{
        height: calc(72 * 100vw / 750) !important;
    }
    .swiper-wrapper .swiper-slide{
        height: calc(363 * 100vw / 750) !important;
    }
    .showcase-image{
        height: calc(363 * 100vw / 750) !important;
        width: calc(610 * 100vw / 750) !important;
    }
}
.npc-application .container  {
    /* width: 100%;
    */ max-width: calc(1559 * 100vw / 1920);
    /* margin: 0 auto;
    */ /* padding: 0;
    */ text-align: left;
    margin-top: calc(-140 * 100vw / 1920);

}
.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(55 * 100vw / 1920);

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

}
.npc-application .title-group .main-title  {
    position: relative;
    left: auto;
    margin-top: calc(0 * 100vw / 1920);
    width: auto;
    height: auto;
    text-align: left;
    background: linear-gradient(90deg, #7B53EB 0%, #645EEF 50%, #5068F2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}
/* 应用场景图片展示 */ .application-gallery  {
    margin-top: calc(80 * 100vw / 1920);
    width: calc(1440 * 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;
    */ padding: 0;
    text-align: center;
    gap: calc(10 * 100vw / 1920);

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

}
.application-gallery .gallery-item .desc  {
    display: 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.active .desc  {
    display: block;
    position: absolute;
    left: calc(56 * 100vw / 1920);
    bottom: calc(40 * 100vw / 1920);
    font-size: calc(18 * 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: #fff;

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

}
.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.active img  {
    opacity: 1;

}
.application-gallery .gallery-item .mask  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(18, 13, 52, 0.7);
    /* transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    */ pointer-events: none;

}
.application-gallery .gallery-item .mask.gradient  {
    background: linear-gradient(0deg,
    rgba(34, 19, 80, 0.2) 0%,
    rgba(12, 20, 72, 0) 100%);

}
.application-gallery .gallery-item.active .mask {
    background: linear-gradient(0deg,
    rgba(34, 19, 80, 0.2) 0%,
    rgba(12, 20, 72, 0) 100%);

}
/* 这些样式已经在JavaScript中动态设置，不再需要固定的CSS样式 */ /* .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);

}
*/ .contact  {
    position: relative;
    text-align: left;
    height: calc(429 * 100vw / 1920);
    overflow: visible;

}
/* 核心价值部分 */ .ft-value  {
    position: relative;
    padding: calc(50 * 100vw / 1920) 0;
    background: #ffffff;

}
.ft-value .title-group  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}
.ft-value .value-content {
    top: calc(0 * 100vw / 1920);

}
.ft-value .subtitle-wrapper  {
    display: flex;
    align-items: center;
    gap: calc(8 * 100vw / 1920);
    margin-bottom: calc(8 * 100vw / 1920);

}
.ft-value .dot  {
    width: 9px;
    height: 9px;
    background: #8186E7;
    border-radius: 50%;

}
.ft-value .subtitle  {
    font-size: calc(18 * 100vw / 1920);
    font-weight: 600;
    line-height: 190%;
    letter-spacing: 0em;
    color: #5C5D95;

}
.ft-value .main-title  {
    font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    text-align: left;
    letter-spacing: 0em;
    background: linear-gradient(111deg, #3E6BFF -24%, #9B6BFC 28%, #421AD1 105%),
    #FFFFFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}
.value-content  {
    display: flex;
    gap: calc(30 * 100vw / 1920);
    margin-top: calc(90 * 100vw / 1920);
    margin-bottom: calc(90 * 100vw / 1920);
    position: relative;

}
.activities-load-page  {
    display: none;
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    z-index: 1;

}
.join-menu-showcase  {
    width: calc(1440 * 100vw / 1920);
    height: calc(490 * 100vw / 1920);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

}
.join-menu-list  {
    width: calc(467 * 100vw / 1920);
    border-top: 1px solid #B8C8FC;

}
.join-menu-item  {
    position: relative;
    height: calc(82 * 100vw / 1920);
    overflow: hidden;
    transition: all 0.3s ease;
    border-bottom: 1px solid #B8C8FC;
    cursor: pointer;

}
.join-menu-item.active  {
    height: calc(162 * 100vw / 1920);

}
.join-menu-header.expanded  {
    display: none;

}
.join-menu-header.collapsed  {
    display: flex;
    align-items: center;
    padding: 0 calc(20 * 100vw / 1920);
    height: 100%;

}
.join-menu-item.active .join-menu-header.expanded  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    padding-left: calc(98 * 100vw / 1920);

}
.join-menu-item.active .join-menu-header.collapsed  {
    display: none;

}
.join-menu-bg  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    #EEE5FF 0%,
    rgba(220, 210, 255, 0) 100%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;

}
.join-menu-item.active .join-menu-bg  {
    opacity: 0.2;

}
.join-menu-header  {
    position: relative;
    z-index: 2;

}
.join-menu-icon  {
    position: absolute;
    left: calc(20 * 100vw / 1920);
    top: 50%;
    transform: translateY(-50%);
    width: calc(44 * 100vw / 1920);
    height: calc(44 * 100vw / 1920);
    z-index: 2;

}
/* 为英文版添加特殊样式 */ body.lang-en .join-menu-title-en  {
    order: 2;
    font-size: calc(22 * 100vw / 1920);
    font-weight: 900;
    margin-bottom: 0;
    margin-top: calc(5 * 100vw / 1920);

}
body.lang-en .join-menu-title-cn  {
    order: 1;
    font-size: calc(18 * 100vw / 1920);
    font-weight: 400;

}
.join-menu-item.active .join-menu-header  {
    height: calc(162 * 100vw / 1920);

}
.join-menu-title-en  {
    position: relative;
    font-size: calc(12 * 100vw / 1920);
    font-weight: 400;
    line-height: 150%;
    text-transform: uppercase;
    letter-spacing: 0em;
    color: #7885E1;
    order: 1;
    margin-bottom: calc(5 * 100vw / 1920);

}
.join-menu-title-cn  {
    position: relative;
    font-size: calc(28 * 100vw / 1920);
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0em;
    color: #8355F0;
    order: 2;

}
.join-menu-title  {
    font-size: calc(20 * 100vw / 1920);
    font-weight: 200;
    line-height: 150%;
    letter-spacing: 0em;
    color: #2F2F2F;

}
.arrow-icon  {
    position: absolute;
    left: calc(420 * 100vw / 1920);
    top: 50%;
    transform: translateY(-50%);
    width: calc(25.35 * 100vw / 1920);
    height: calc(19.06 * 100vw / 1920);
    opacity: 1;
    margin-left: auto;

}
.join-menu-content  {
    padding: calc(20 * 100vw / 1920) calc(30 * 100vw / 1920);
    background: #fff;

}
.join-menu-content p  {
    font-size: calc(16 * 100vw / 1920);
    line-height: 1.6;
    color: #666;

}
.showcase-image  {
    position: relative;
    width: calc(953 * 100vw / 1920);
    height: calc(490 * 100vw / 1920);
    overflow: hidden;
    background: #9e9e9e91;

}
.showcase-image img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;

}
.showcase-image.switching img  {
    opacity: 0;

}
.image-overlay  {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(953 * 100vw / 1920);
    height: calc(296 * 100vw / 1920);
    background: linear-gradient(0deg,
    #0C1D48 0%,
    rgba(12, 29, 72, 0) 100%);

}
.image-description  {
    position: absolute;
    left: calc(63 * 100vw / 1920);
    top: calc(384 * 100vw / 1920);
    width: calc(808 * 100vw / 1920);
    height: calc(54 * 100vw / 1920);
    display: flex;
    align-items: center;
    gap: calc(16 * 100vw / 1920);

}
.image-description .vertical-line  {
    flex-shrink: 0;
    width: 1px;
    height: calc(46 * 100vw / 1920);
    border-left: 1px solid #96A6EC;

}
.image-description p  {
    font-size: calc(14 * 100vw / 1920);
    font-weight: normal;
    line-height: 190%;
    text-align: justify;
    letter-spacing: 0em;
    color: #FFFFFF;
    margin: 0;

}
.value-item  {
    flex: 1;
    background: #fff;
    border-radius: calc(10 * 100vw / 1920);
    padding: calc(30 * 100vw / 1920);
    transition: all 0.3s ease;

}
.value-item:hover  {
    transform: translateY(calc(-5 * 100vw / 1920));
    box-shadow: 0 calc(10 * 100vw / 1920) calc(20 * 100vw / 1920) rgba(0, 0, 0, 0.1);

}
.swiper-container  {
    width: 100%;
    overflow: hidden;
    position: relative;

}
.swiper-wrapper  {
    display: flex;
    transition: transform 0.5s ease;

}
.swiper-wrapper .swiper-slide  {
    flex: 0 0 100%;
    height: calc(490 * 100vw / 1920);

}
.swiper-pagination  {
    position: absolute;
    bottom: calc(30 * 100vw / 1920);
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    display: flex;
    align-items: center;
    gap: calc(8 * 100vw / 1920);
    padding: 0;
    margin: 0;

}
.swiper-pagination li  {
    display: inline-block;
    width: calc(7 * 100vw / 1920);
    height: calc(7 * 100vw / 1920);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;

}
.swiper-pagination li.active  {
    width: calc(20 * 100vw / 1920);
    height: calc(7 * 100vw / 1920);
    border-radius: calc(4 * 100vw / 1920);
    background: #FFFFFF;

}
.swiper-button-prev,
.swiper-button-next  {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px;

}
.swiper-button-prev  {
    left: 20px;

}
.swiper-button-next  {
    right: 20px;

}
.footer  {
    height: calc(653* 100vw / 1920) !important;

}
