/* 智慧文旅解决方案页面特有样式 */ /* Banner 部分 */ .ft-banner  {
    position: relative;
    height: calc(769 * 100vw / 1920);
    background: url(../../images/solutions/banne-bg1.jpg) no-repeat center center;
    background-size: cover;
    opacity: 1;
    overflow: hidden;

}
.ft-banner .banner-content  {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;

}
.ft-banner .smart-city  {
    position: absolute;
    top: calc(291 * 100vw / 1920);
    /* width: calc(189 * 100vw / 1920);
    */ font-size: calc(28.2 * 100vw / 1920);
    font-weight: bold;
    line-height: calc(35.4 * 100vw / 1920);
    color: #FFFFFF;
    margin: 0;
    text-shadow: 0px 3.3px 5px rgba(47, 96, 217, 0.62);

}
.ft-banner h1  {
    position: absolute;
    top: calc(335 * 100vw / 1920);
    font-size: calc(80 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0em;
    color: #FFFFFF;
    opacity: 1;
    margin: 0;
    text-shadow: 0px 4px 10px rgba(47, 96, 217, 0.62);

}
.ft-banner .subtitle-line  {
    position: absolute;
    width: calc(1100 * 100vw / 1920);
    top: calc(451 * 100vw / 1920);
    font-size: calc(24 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0em;
    color: #FFFFFF;
    opacity: 1;
    margin: 0;
    text-shadow: 0px 4px 10px rgba(47, 96, 217, 0.62);

}
.ft-banner .description  {
    position: absolute;
    top: calc(525 * 100vw / 1920);
    width: calc(572 * 100vw / 1920);
    height: calc(84 * 100vw / 1920);
    font-size: calc(16 * 100vw / 1920);
    font-weight: 500;
    line-height: calc(28 * 100vw / 1920);
    text-align: center;
    color: #FFFFFF;
    margin: 0;

}
.ft-banner .consult-btn  {
    position: absolute;
    top: calc(650 * 100vw / 1920);
    display: flex;
    align-items: center;
    gap: calc(18 * 100vw / 1920);
    cursor: pointer;

}
.ft-banner .decoration-ball  {
    position: absolute;
    left: calc(134 * 100vw / 1920);
    top: calc(100 * 100vw / 1920);
    width: calc(306 * 100vw / 1920);
    height: calc(306 * 100vw / 1920);
    opacity: 1;
    background: url(../../images/solutions/decoration-ball.png) no-repeat center center;
    /* filter: blur(20px);
    */ animation: float 3s ease-in-out infinite;

}
.ft-banner .floating-ball  {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(1920 * 100vw / 1920);
    height: calc(769 * 100vw / 1920);
    background: url(https://flowingcloud-1253267589.cos.ap-beijing.myqcloud.com/images/banne-ball1.png) no-repeat center center;
    background-size: contain;
    filter: blur(20px);
    z-index: 1;
    transform-origin: bottom center;
    animation: scaleFromBottom 1s ease-out forwards;

}
@keyframes float   {

    0%  {
        transform: translateY(0);

    }
    50%  {
        transform: translateY(-20px);

    }
    100%  {
        transform: translateY(0);

    }

}
@keyframes scaleFromBottom   {

    from  {
        transform: translateX(-50%) scale(0);
        opacity: 0.5;
        filter: blur(20px);

    }
    to  {
        transform: translateX(-50%) scale(1);
        opacity: 1;
        filter: blur(2px);

    }

}
/* 标题组样式 */ .title-group  {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(73 * 100vw / 1920);

}
.title-group .subtitle-wrapper  {
    display: flex;
    align-items: center;
    gap: calc(12 * 100vw / 1920);

}
.title-group .dot  {
    width: calc(9 * 100vw / 1920);
    height: calc(9 * 100vw / 1920);
    background: #8186E7;
    border-radius: 50%;

}
.title-group .subtitle  {
    font-size: calc(18 * 100vw / 1920);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0em;
    color: #5C5D95;

}
.title-group .main-title  {
    /* margin-top: calc(10 * 100vw / 1920);
    */ font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: 0em;
    background: linear-gradient(90deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

}
/* 方案架构部分 */ .ft-application  {
    padding: calc(100 * 100vw / 1920) 0;
    background: #FFFFFF;
    position: relative;

}
.ft-application .container  {
    max-width: calc(1200 * 100vw / 1920);
    margin: 0 auto;
    padding: 0 calc(20 * 100vw / 1920);

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

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

}
.ft-application .dot  {
    width: calc(9 * 100vw / 1920);
    height: calc(9 * 100vw / 1920);
    background: #5C5D95;
    border-radius: 50%;
    flex-shrink: 0;

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

}
.ft-application .main-title  {
    font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    color: #333333;
    margin: 0;
    margin-bottom: calc(68 * 100vw / 1920);
    margin-left: calc(19 * 100vw / 1920);

}
.ft-application .architecture-images  {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20 * 100vw / 1920);
    position: relative;

}
.ft-application .arch-img  {
    display: block;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;

}
.ft-application .arch-img-1  {
    width: calc(652 * 100vw / 1920);
    height: calc(229 * 100vw / 1920);

}
.ft-application .arch-img-2  {
    width: calc(802 * 100vw / 1920);
    height: calc(239 * 100vw / 1920);

}
.ft-application .arch-img-3  {
    width: calc(847 * 100vw / 1920);
    height: calc(261 * 100vw / 1920);

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

}
.ft-value .container  {
    max-width: calc(1920 * 100vw / 1920);
    margin: 0 auto;
    /* padding: 0 calc(20 * 100vw / 1920);
    */
}
.ft-value .title-group  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: calc(220 * 100vw / 1920);

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

}
.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(90deg, #A9CEF9 0%, #4179EB 71%, #7B86E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

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

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

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

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

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

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

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

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

}
.value-menu-item.active .value-menu-header.expanded  {
    display: block;

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

}
.value-menu-bg  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
    rgba(89, 159, 255, 0.6) 0%,
    rgba(89, 159, 255, 0) 100%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s ease;

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

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

}
.value-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;

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

}
.value-menu-title-en  {
    position: absolute;
    left: calc(98 * 100vw / 1920);
    top: calc(48 * 100vw / 1920);
    font-size: calc(12 * 100vw / 1920);
    font-weight: 400;
    line-height: 150%;
    text-transform: uppercase;
    letter-spacing: 0em;
    color: #7885E1;

}
.value-menu-title-cn  {
    position: absolute;
    left: calc(98 * 100vw / 1920);
    top: calc(68 * 100vw / 1920);
    font-size: calc(28 * 100vw / 1920);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0em;
    color: #7885E1;

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

}
.value-menu-arrow  {
    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;

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

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

}
.showcase-image  {
    position: relative;
    width: calc(954 * 100vw / 1920);
    height: calc(574 * 100vw / 1920);
    overflow: hidden;

}
.showcase-image img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;

}
.showcase-image img:not([style*="display: block"])  {
    opacity: 0;

}
.showcase-image img[style*="display: block"]  {
    opacity: 1;

}
.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(466 * 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);

}
/* 应用场景部分 */ .ft-application  {
    position: relative;
    padding: calc(100 * 100vw / 1920) 0;
    background: #fff;

}
.ft-application .container  {
    max-width: calc(1920 * 100vw / 1920);
    margin: 0 auto;

}
.application-gallery  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(30 * 100vw / 1920);
    margin-top: calc(40 * 100vw / 1920);

}
.gallery-item  {
    position: relative;
    border-radius: 0;
    /* 去除圆角 */ overflow: hidden;
    aspect-ratio: 16/9;

}
.gallery-item img  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
    border-radius: 0;
    /* 去除圆角 */
}
.gallery-item:hover img  {
    transform: scale(1.1);

}
/* 痛点分析部分 */ .pain-points  {
    position: relative;
    margin-top: calc(90 * 100vw / 1920);
    /* margin-bottom: calc(100 * 100vw / 1920);
    */ display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 0;

}
.pain-points .points-container  {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

}
.vertical-line  {
    width: 1px;
    height: calc(72 * 100vw / 1920);
    background-color: #70CFD4;
    margin: calc(30 * 100vw / 1920) 0;
    transition: transform 0.3s ease;

}
.point-item  {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;

}
.point-item .point-ball  {
    position: relative;
    width: calc(325 * 100vw / 1920);
    height: calc(325 * 100vw / 1920);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: calc(32 * 100vw / 1920);
    z-index: 1;
    transition: transform 0.3s ease;

}
.point-item:hover .point-ball  {
    transform: scale(1.05);

}
.point-item.left  {
    margin-right: calc(-60 * 100vw / 1920);

}
.point-item.right  {
    margin-left: calc(-60 * 100vw / 1920);

}
.point-item.center  {
    margin: 0 calc(50 * 100vw / 1920);

}
.point-item.center .point-ball  {
    background: radial-gradient(142% 142% at 14% -7%, #717EEB 26%, #2E1FA2 100%);
    z-index: 2;

}
.point-item.left .point-ball::before,
.point-item.right .point-ball::before  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: calc(2 * 100vw / 1920) solid transparent;
    border-radius: 50%;
    background: linear-gradient(#fff, #fff) padding-box,
    radial-gradient(142% 142% at 14% -7%, #DBC4F9 19%, #727CE4 66%, #6775F0 100%) border-box;
    animation: rotate360 5s linear infinite;

}
.point-item.left .point-ball,
.point-item.right .point-item.center .point-ball  {
    background: transparent;

}
@keyframes rotate360   {

    from  {
        transform: rotate(0deg);

    }
    to  {
        transform: rotate(360deg);

    }

}
.point-item .number,
.point-item h3  {
    position: relative;
    z-index: 3;
    transform: rotate(0deg);
    /* 抵消父元素的旋转，保持文字不旋转 */
}
.point-item .blur-overlay  {
    position: absolute;
    width: calc(199 * 100vw / 1920);
    height: calc(199 * 100vw / 1920);
    opacity: 1;
    background: #FFFFFF;
    filter: blur(15px);
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;

}
.point-item.left .blur-overlay  {
    left: calc(-100 * 100vw / 1920);
    top: calc(-30 * 100vw / 1920);

}
.point-item.right .blur-overlay  {
    left: calc(220 * 100vw / 1920);
    top: calc(120 * 100vw / 1920);

}
.point-item .number  {
    display: block;
    font-size: calc(14 * 100vw / 1920);
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    margin-bottom: calc(15 * 100vw / 1920);

}
.point-item.center .number  {
    color: #FFFFFF;

}
.point-item.left .number,
.point-item.right .number  {
    color: #7885E1;

}
.point-item h3  {
    font-size: calc(24 * 100vw / 1920);
    font-weight: bold;
    line-height: 150%;
    text-align: center;
    letter-spacing: 0em;
    margin: 0;

}
.point-item.center h3  {
    color: #FFFFFF;

}
.point-item.left h3,
.point-item.right h3  {
    color: #7885E1;

}
.pain-points .description  {
    position: relative;
    width: calc(550 * 100vw / 1920);
    /* height: calc(69 * 100vw / 1920);
    */ font-size: calc(18 * 100vw / 1920);
    font-weight: normal;
    line-height: 190%;
    text-align: center;
    letter-spacing: 0em;
    color: #75A1DD;
    transition: opacity 0.3s ease,
    transform 0.3s ease;
    margin: 0 auto;

}
/* 响应式设计 */ @media screen and (max-width: 768px)   {

    .ft-banner h1  {
        font-size: calc(36 * 100vw / 768);

    }
    .ft-banner .subtitle-line  {
        font-size: calc(18 * 100vw / 768);

    }
    .value-content  {
        flex-direction: column;

    }
    .application-gallery  {
        grid-template-columns: 1fr;

    }

}
/* 应用场景部分 */ .ft-application  {
    /* margin-bottom: calc(200 * 100vw / 1920);
    */ padding-bottom: calc(0 * 100vw / 1920);

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

}
.application-gallery  {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: calc(40 * 100vw / 1920);
    width: calc(1559 * 100vw / 1920);
    height: calc(755 * 100vw / 1920);
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background-color: #000;

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

}
/* 计算每个图片的位置和宽度 */ .application-gallery .gallery-item:nth-child(1)  {
    left: 0;
    width: calc(755 * 100vw / 1920);
    /* 展开状态宽度 */ z-index: 4;

}
.application-gallery .gallery-item:nth-child(2)  {
    left: calc(755 * 100vw / 1920);
    width: calc((1559 - 755) * 100vw / 1920 / 3);
    /* 收起状态宽度 */ z-index: 3;

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

}
.application-gallery .gallery-item:nth-child(4)  {
    left: calc((755 + 2 * (1559 - 755) / 3) * 100vw / 1920);
    width: calc((1559 - 755) * 100vw / 1920 / 3);
    z-index: 1;

}
/* 标题样式保持不变 */ .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: 0;
    padding-left: 0;
    z-index: 3;
    pointer-events: none;
    transition: none;

}
.application-gallery .gallery-item:not(.active) .title-wrapper  {
    justify-content: center;
    align-items: center;
    padding: 0;
    flex-direction: column;
    width: 100%;
    height: 100%;

}
.application-gallery .gallery-item:not(.active) .en-title,
.application-gallery .gallery-item:not(.active) .cn-title  {
    writing-mode: horizontal-tb;
    transform: none;
    transition: none;
    text-align: center;

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

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

}
.application-gallery .gallery-item.active .en-title  {
    position: relative;
    font-size: calc(12 * 100vw / 1920);
    color: #FFFFFF;
    transform: none;
    transition: none;
    /* margin-bottom: calc(10 * 100vw / 1920);
    修改展开状态下中英文标题之间的间距为10px */
}
.application-gallery .gallery-item.active .cn-title  {
    position: relative;
    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.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;

}
.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.701);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-radius: 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 .title-wrapper  {
    position: absolute;
    left: calc(54 * 100vw / 1920);
    top: 69.2%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 0;
    z-index: 3;
    pointer-events: none;
    transition: none;

}
.application-gallery .gallery-item.active .en-title  {
    position: relative;
    font-size: calc(12 * 100vw / 1920);
    color: #FFFFFF;
    transform: none;
    transition: none;
    /* margin-bottom: calc(10 * 100vw / 1920);
    修改展开状态下中英文标题之间的间距为10px */
}
.application-gallery .gallery-item.active .cn-title  {
    position: relative;
    font-size: calc(38 * 100vw / 1920);
    color: #FFFFFF;
    transform: none;
    transition: none;

}
.application-gallery .gallery-item .description-wrapper  {
    display: none;

}
.application-gallery .gallery-item.active .description-wrapper  {
    display: block;
    margin-top: calc(170 * 100vw / 1920);

}
.application-gallery .gallery-item.active .desc-title  {
    font-size: calc(18 * 100vw / 1920);
    font-weight: 500;
    line-height: 176%;
    color: #FFFFFF;
    margin-bottom: calc(10 * 100vw / 1920);

}
.application-gallery .gallery-item.active .desc-text  {
    font-size: calc(18 * 100vw / 1920);
    font-weight: 200;
    line-height: 176%;
    color: #FFFFFF;
    max-width: calc(650 * 100vw / 1920);

}
.application-gallery .gallery-item.active::before  {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%);
    z-index: 2;
    pointer-events: none;

}

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

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

}
/* 标杆案例区域 */ .ft-benchmark  {
    padding-top: calc(100 * 100vw / 1920);
    background-color: var(--bg-color);
    position: relative;
    overflow: hidden;

}
.ft-benchmark .container  {
    position: relative;
    z-index: 1;
    margin-left: calc(180 * 100vw / 1920);

}
.ft-benchmark .title-group  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    /* margin-bottom: calc(60 * 100vw / 1920);
    */ margin-left: calc(200 * 100vw / 1920);

}
.ft-benchmark .title-group  {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: calc(-20 * 100vw / 1920);

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

}
.ft-benchmark .dot  {
    width: calc(9 * 100vw / 1920);
    height: calc(9 * 100vw / 1920);
    background: #5C5D95;
    border-radius: 50%;
    flex-shrink: 0;

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

}
.ft-benchmark .main-title  {
    font-size: calc(66 * 100vw / 1920);
    font-weight: bold;
    line-height: normal;
    color: #333333;
    margin: 0;
    margin-bottom: calc(68 * 100vw / 1920);
    margin-left: calc(19 * 100vw / 1920);

}
.ft-benchmark .benchmark-content  {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /* margin-top: calc(80 * 100vw / 1920);
    */ padding: 0;
    /* margin-left: calc(-86 * 100vw / 1920);
    */
}
.ft-benchmark .waterfall-container  {
    column-count: 4;
    column-gap: calc(20 * 100vw / 1920) !important;
    width: calc(1559 * 100vw / 1920);
    margin: 0;

}
.ft-benchmark .waterfall-item  {
    position: relative;
    width: calc(374.75 * 100vw / 1920);
    break-inside: avoid;
    margin-bottom: calc(20 * 100vw / 1920) !important;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;

}
.ft-benchmark .waterfall-item img,
.ft-benchmark .waterfall-item .media-wrapper  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;

}
.ft-benchmark .waterfall-item:hover img,
.ft-benchmark .waterfall-item:hover .media-wrapper video  {
    transform: scale(1.05);

}
.ft-benchmark .waterfall-item .item-title  {
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
    padding: 0;

}
.ft-benchmark .waterfall-item:hover .item-title  {
    opacity: 1;

}
.ft-benchmark .waterfall-item .title-wrapper  {
    position: relative;
    width: fit-content;
    display: block;

}
.ft-benchmark .waterfall-item .title-wrapper:first-child  {
    margin-bottom: -8px;

}
.ft-benchmark .waterfall-item .cn-title-bg  {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(52 * 100vw / 1920);
    width: 100%;
    background: #FFFFFF;
    border-radius: 0 calc(20 * 100vw / 1920) 0 0;

}
.ft-benchmark .waterfall-item .cn-title  {
    position: relative;
    z-index: 1;
    font-size: calc(22 * 100vw / 1920) !important;
    font-weight: bold !important;
    line-height: calc(26 * 100vw / 1920) !important;
    letter-spacing: 0 !important;
    color: #7885E1 !important;
    padding: calc(13 * 100vw / 1920) calc(20 * 100vw / 1920);
    white-space: nowrap;

}
.ft-benchmark .waterfall-item .en-title-bg  {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(34 * 100vw / 1920);
    width: 100%;
    border-radius: 0 calc(20 * 100vw / 1920) 0 0;
    opacity: 1;
    background: linear-gradient(90deg, #9090E2 0%, #619BF3 71%, #5182F4 100%);

}
.ft-benchmark .waterfall-item .en-title  {
    position: relative;
    z-index: 1;
    font-size: calc(12 * 100vw / 1920);
    font-weight: 600;
    line-height: calc(25 * 100vw / 1920);
    text-transform: uppercase;
    letter-spacing: 0;
    color: #FFFFFF;
    padding: calc(4.5 * 100vw / 1920) calc(20 * 100vw / 1920);
    white-space: nowrap;

}
/* 确保背景色卡宽度与文字内容一致 */ .ft-benchmark .waterfall-item .title-wrapper:hover .cn-title-bg,
.ft-benchmark .waterfall-item .title-wrapper:hover .en-title-bg  {
    width: 100%;

}
.ft-benchmark .waterfall-item .cn-title  {
    font-size: calc(18 * 100vw / 1920);
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: calc(5 * 100vw / 1920);

}
.ft-benchmark .waterfall-item .en-title  {
    font-size: calc(14 * 100vw / 1920);
    color: rgba(255, 255, 255, 0.8);
    font-family: var(--font-family-en);

}
.ft-benchmark .waterfall-item  {
    position: relative;
    margin-bottom: calc(20 * 100vw / 1920);
    overflow: hidden;
    /* border-radius: 20px;
    */ cursor: zoom-in;

}
.ft-benchmark .waterfall-item .media-wrapper  {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-bottom: 0;
    position: relative;

}
.ft-benchmark .waterfall-item img,
.ft-benchmark .waterfall-item video  {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;

}
.ft-benchmark .waterfall-item:hover img,
.ft-benchmark .waterfall-item:hover video  {
    transform: scale(1.05);

}
.ft-benchmark .waterfall-item .preview-video  {
    position: relative;
    z-index: 1;

}
/* 预览遮罩层样式 */ .preview-overlay  {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999999 !important;
    overflow: hidden;

}
.preview-overlay.active  {
    display: flex;

}
.preview-content  {
    position: relative;
    max-width: calc(90% * 100vw / 1920);
    max-height: calc(90vh * 100vw / 1920);
    z-index: 1000000 !important;

}
.preview-title  {
    left: 0;
    width: 100%;
    text-align: center;
    color: white;
    z-index: 1000000 !important;

}

.preview-en-title  {
    font-size: calc(16 * 100vw / 1920);

}
.close-preview  {
    position: fixed;
    top: calc(40 * 100vw / 1920);
    right: calc(40 * 100vw / 1920);
    width: calc(40 * 100vw / 1920);
    height: calc(40 * 100vw / 1920);
    cursor: pointer;
    z-index: 1001;

}
.close-preview::before,
.close-preview::after  {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(40 * 100vw / 1920);
    height: calc(2 * 100vw / 1920);
    background-color: white;
    transform-origin: center;

}
.close-preview::before  {
    transform: translate(-50%, -50%) rotate(45deg);

}
.close-preview::after  {
    transform: translate(-50%, -50%) rotate(-45deg);

}
.close-preview:hover::before,
.close-preview:hover::after  {
    background-color: #ccc;

}
/* 页面布局 */ body  {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;

}
main  {
    flex: 1 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;

}
/* 滚动内容区域 */ .scroll-content  {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;

}
/* 确保内容区域占满可用空间 */ .ft-banner,
.ft-technology,
.ft-value,
.ft-application,
.ft-benchmark  {
    flex-shrink: 0;

}
/* 视频悬浮效果 */ .ft-benchmark .waterfall-item .media-wrapper  {
    position: relative;
    z-index: 1;
    pointer-events: auto;

}
.ft-benchmark .waterfall-item .item-title  {
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: auto;

}
.ft-benchmark .waterfall-item:hover .item-title  {
    opacity: 1;

}
.ft-benchmark .waterfall-item .media-wrapper:hover + .item-title  {
    opacity: 1 !important;

}
.ft-benchmark .waterfall-item .item-title:hover  {
    opacity: 1 !important;

}
/* 确保视频预览标签可见 */ .ft-benchmark .waterfall-item .preview-video  {
    position: relative;
    z-index: 1;
    pointer-events: auto;

}
/* 调整标题背景设置 */ .ft-benchmark .waterfall-item .cn-title-bg,
.ft-benchmark .waterfall-item .en-title-bg  {
    min-width: 100%;

}
/* 确保标题内容正确显示 */ .ft-benchmark .waterfall-item .cn-title,
.ft-benchmark .waterfall-item .en-title  {
    position: relative;
    z-index: 1;
    white-space: nowrap;
    pointer-events: auto;

}
/* 添加视频项的播放按钮样式 */ .waterfall-item .media-wrapper  {
    position: relative;
    overflow: hidden;
    cursor: pointer;

}
.waterfall-item:hover .media-wrapper::after,
.waterfall-item:hover .media-wrapper::before  {
    opacity: 1;

}
/* 移动端样式适配 */ @media screen and (max-width: 768px)   {
    .pain-points .description{
        display: none !important;
    }
    .vertical-line{
        display: none !important;
    }
    .ft-value  {
        transform: scale(1.1);
        height: calc(350 * 100vw / 750);
        padding-top: calc(50 * 100vw / 750);

    }
    .architecture-images  {
        transform: scale(1.8);
        height: calc(600 * 100vw / 750);
        padding-top: calc(150 * 100vw / 750);

    }
    .ft-application  {
        top: calc(80 * 100vw / 750);

    }
    /* 标杆案例区域移动端样式 */ .ft-benchmark  {
        padding-top: calc(110 * 100vw / 750);
        /*padding-bottom: calc(40 * 100vw / 750);*/

    }
    .ft-benchmark .container  {
        margin-left: calc(20 * 100vw / 750);
        margin-right: calc(20 * 100vw / 750);

    }
    .ft-benchmark .dot  {
        width: calc(6 * 100vw / 750);
        height: calc(6 * 100vw / 750);

    }
    .ft-benchmark .subtitle  {
        font-size: calc(12 * 100vw / 750);

    }
    .ft-benchmark .main-title  {
        font-size: calc(24 * 100vw / 750);
        margin-bottom: calc(20 * 100vw / 750);
        margin-left: calc(10 * 100vw / 750);

    }

    .ft-benchmark .waterfall-container  {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        grid-gap: calc(20 * 100vw / 750) !important;
        width: 100% !important;
        margin-bottom: 0 !important;

    }
    .ft-benchmark .waterfall-item  {
        width: calc(295 * 100vw / 750);
        /* margin-bottom: calc(20 * 100vw / 750) !important;
        */ break-inside: auto;
        position: relative;
        height: auto;

    }
    .ft-benchmark .waterfall-item .media-wrapper  {
        position: relative;
        width: 100%;

    }
    /* 移动端标题样式调整 */ .ft-benchmark .waterfall-item .item-title  {
        opacity: 1;
        position: absolute;
        left: 0;
        bottom: 0;
        width: auto;
        z-index: 10;
        pointer-events: auto;

    }
    .ft-benchmark .waterfall-item .title-wrapper:first-child  {
        margin-bottom: 0;

    }
    .ft-benchmark .waterfall-item .cn-title-bg  {
        height: calc(36 * 100vw / 750);
        border-radius: 0 calc(16 * 100vw / 750) 0 0;

    }
    .ft-benchmark .waterfall-item .cn-title  {
        font-size: calc(14 * 100vw / 750) !important;
        line-height: calc(20 * 100vw / 750) !important;
        padding: calc(6 * 100vw / 750) calc(12 * 100vw / 750);

    }
    .ft-benchmark .waterfall-item .en-title-bg  {
        height: calc(24 * 100vw / 750);
        border-radius: 0 calc(16 * 100vw / 750) 0 0;

    }
    .ft-benchmark .waterfall-item .en-title  {
        font-size: calc(10 * 100vw / 750);
        line-height: calc(16 * 100vw / 750);
        padding: calc(4 * 100vw / 750) calc(12 * 100vw / 750);

    }
    /* 移动端播放按钮样式调整 */ .waterfall-item .media-wrapper::after  {
        width: calc(40 * 100vw / 750);
        height: calc(40 * 100vw / 750);
        opacity: 0.6;

    }
    .waterfall-item .media-wrapper::before  {
        border-top-width: calc(10 * 100vw / 750);
        border-bottom-width: calc(10 * 100vw / 750);
        border-left-width: calc(16 * 100vw / 750);
        opacity: 0.8;

    }
    /* 修复移动端标题重叠问题 */ .ft-benchmark .waterfall-item .title-wrapper  {
        margin-bottom: 0 !important;

    }


}