/* 中间部分所需的工具类 */

/* Flex 布局 */
.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}

/* 显示属性 */
.d-inlineblock {
    display: inline-block;
}

/* 文本对齐 */
.text-left {
    text-align: left;
}

.tc {
    text-align: center;
}

/* 边距 */
.mg-a {
    margin-left: auto;
    margin-right: auto;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-20 {
    margin-top: 20px;
}

/* 内边距 */
.pt-80 {
    padding-top: 80px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pt-10 {
    padding-top: 10px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pl-37 {
    padding-left: 37px;
}

.pr-37 {
    padding-right: 37px;
}

.pl-43 {
    padding-left: 43px;
}

.pr-43 {
    padding-right: 43px;
}

.pl-50 {
    padding-left: 50px;
}

.pr-50 {
    padding-right: 50px;
}

.pl-47 {
    padding-left: 47px;
}

.pr-47 {
    padding-right: 47px;
}

/* 边框圆角 */
.br-20 {
    border-radius: 20px;
}

.br-30 {
    border-radius: 30px;
}

.br-57 {
    border-radius: 57px;
}

.br-16 {
    border-radius: 16px;
}

/* 背景色 */
.bg-white {
    background-color: #ffffff;
}

.bg-orange {
    background-color: #FF4610;
}

.Color-Background-Full {
    background-color: #F5F7F8;
}

.bodor-bg-gray11 {
    background-color: #F5F8FA;
}

/* 文字颜色 */
.c-white {
    color: #ffffff;
}

.c-black {
    color: #020202;
}

.c-gray666 {
    color: #666666;
}

.c-orange {
    color: #FF4610;
}

/* 字体大小 */
.fs-16 {
    font-size: 16px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-26 {
    font-size: 26px;
}

.fs-36 {
    font-size: 36px;
}

/* 行高 */
.lh100 {
    line-height: 1.0;
}

.lh140 {
    line-height: 1.4;
}

.lh160 {
    line-height: 1.6;
}

.lh180 {
    line-height: 1.8;
}

/* 字体族和字重 */
.bodor-Os-SemiBold {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 600;
}

.bodor-Os-Medium {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 500;
}

/* 宽度 */
.w-859 {
    width: 859px;
    max-width: 100%;
}

.w-1120 {
    width: 1120px;
    max-width: 100%;
}

.w-1060 {
    width: 1060px;
    max-width: 100%;
}

.w100 {
    width: 100%;
}

/* 高度 */
.h100 {
    height: 100%;
}

/* 对象适配 */
.object-cover {
    object-fit: cover;
}
.yuanback{
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) -9.35%, rgba(0, 0, 0, 0.00) 63.27%, #000 99.96%);

    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

/* 定位 */
.relative {
    position: relative;
}

.pa {
    position: absolute;
}

.t-0 {
    top: 0;
}

.l-0 {
    left: 0;
}

.pr {
    position: relative;
}

.h-800 {
    height: 800px;
}

.of-c {
    object-fit: cover;
}

/* 盒阴影 */
.box-shadow {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* 响应式设计 - 基于 Figma 9594_838 移动端设计 */

/* 平板设备 */
@media screen and (max-width: 1024px) {
    .w-859, .w-1120, .w-1060 {
        width: 90%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .flex-between {
        flex-direction: column;
    }

    .flex-between > div {
        width: 100% !important;
        margin-bottom: 30px;
    }

    .flex-wrap > div {
        width: 48% !important;
    }

    .fs-36 {
        font-size: 28px;
    }

    .fs-20 {
        font-size: 18px;
    }
}

/* 移动端 - 基于 Figma 9594_838 (500px) */
@media screen and (max-width: 768px) {


    /* 容器宽度 */
    .w-859, .w-1120, .w-1060 {
        /*width: 100%;*/
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 移动端文字左对齐（非居中） */
    section h2.tc,
    section .tc {
        text-align: left !important;
    }

    /* 字体大小 */
    .fs-36 {
        font-size: 28px;
        line-height: 1.4;
    }

    .fs-20 {
        font-size: 18px;
        line-height: 1.6;
    }

    .fs-16 {
        font-size: 16px;
    }

    .fs-22 {
        font-size: 18px;
    }

    .fs-26 {
        font-size: 22px;
    }

    /* 间距调整 */
    .pt-80 {
        padding-top: 50px;
    }

    .pb-80 {
        padding-bottom: 50px;
    }

    .mb-20 {
        margin-bottom: 15px;
    }

    .mb-40 {
        margin-bottom: 30px;
    }

    .mb-60 {
        margin-bottom: 40px;
    }

    /* 图片圆角统一为 20px */
    section img.br-30 {
        border-radius: 20px !important;
    }

    /* 行业解决方案卡片单列 */
    .flex-wrap {
        flex-direction: column;
        align-items: center;
    }

    .flex-wrap > div {
        width: 100% !important;
        max-width: 476px;
        height: auto !important;
    }

    /* 左右并排布局改为垂直 */
    .flex-between {
        flex-direction: column;
    }

    .flex-between > div {
        width: 100% !important;
        margin-bottom: 30px;
    }

    /* 投资价值部分 - 图片在上文字在下 */
    .flex-between > div:first-child {
        order: -1;
    }

    /* 智能协作标签 - 2x2 网格 */
    .mobile-tags-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;  /* Figma: 2列 */
        gap: 17px !important;  /* Figma: 行间距85px/列间距228px，适配移动端缩小 */
        position: static !important;
        width: 100% !important;
        max-width: 476px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .mobile-tags-grid > div {
        width: auto !important;
        height: 52px !important;
        border-radius: 106px !important;  /* Figma: border-radius: 106px */
        background: #FF4610 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }


    /* 效率图标 2x2 网格 */
    .mobile-efficiency-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        max-width: 100% !important;
    }

    .mobile-efficiency-grid > div {
        width: 100% !important;
    }
}

/* Banner 响应式 */
@media screen and (max-width: 1024px) {
    #banner {
        height: 600px !important;
    }

    #banner .banner-text {
        width: 90% !important;
        top: 60px !important;
    }
}

@media screen and (max-width: 768px) {
    #banner {
        height: 800px !important;
    }

    #banner .banner-text {
        width: 429px !important;
        max-width: 90%;
        top: 68px !important;
        left: 37px !important;
        transform: none !important;
        text-align: center !important;
    }

    #banner h1 {
        font-size: 28px !important;
        line-height: 1.4 !important;
    }
}

/* Bodor优势 产品图片网格 */
@media screen and (max-width: 768px) {
    .mobile-product-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .mobile-product-grid > div {
        width: 100% !important;
        padding: 8px !important;
        border-radius: 10px !important;
        height: 105px !important;
    }

    .mobile-product-grid img {
        border-radius: 10px !important;
        object-fit: contain !important;
    }
}

/* 智能协作区域 - PC端布局（绝对定位） */
.collab-wrap {
    position: relative;
    height: 841px;
}

.collab-title {
    position: absolute;
    left: 116px;
    top: 0;
    width: calc(100% - 232px);
}

.collab-desc {
    position: absolute;
    width: 861px;
    left: 129px;
    top: 111px;
}

.collab-img {
    position: absolute;
    left: 0;
    top: 321px;
    width: 1120px;
    height: 520px;
    border-radius: 30px;
    overflow: hidden;
}

.collab-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 1120px;
    height: 520px;
}

.collab-tags {
    position: absolute;
    left: 44px;
    top: 427px;
    width: 368px;  /* PC端单列 */
    display: flex !important;
    flex-direction: column !important;
    gap: 27px !important;  /* PC端标签间距：490-427=63, 但视觉间距约27px */
}

.collab-tag {
    width: 368px !important;
    height: 43px !important;
    background: #FF4610 !important;
    border-radius: 57px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.collab-tag span {
    color: white !important;
    font-size: 26px !important;  /* PC端26px */
}

.collab-footer {
    position: absolute;
    left: 44px;
    top: 699px;
    width: 544px;
    font-family: 'PingFang SC';
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
}

/* 智能协作区域 - 移动端布局（垂直流式 + 2x2标签网格） */
@media screen and (max-width: 768px) {
    .collab-wrap {
        position: static !important;
        height: auto !important;
        padding: 0 12px;
    }

    .collab-title,
    .collab-desc,
    .collab-img,
    .collab-tags,
    .collab-footer {
        position: static !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 20px !important;
    }

    .collab-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }

    .collab-desc {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    .collab-img {
        width: 476px !important;  /* Figma: 476px */
        max-width: 100% !important;
        height: 220px !important;  /* Figma: 220px */
        border-radius: 20px !important;  /* Figma: border-radius: 20px */
        margin: 0 auto 30px !important;
    }

    .collab-svg {
        display: none !important;  /* 移动端隐藏SVG遮罩 */
    }

    .collab-tags {
        display: grid !important;  /* 强制Grid布局 */
        grid-template-columns: 1fr 1fr !important;  /* 2列 */
        gap: 17px !important;  /* Figma间距 */
        width: 100% !important;
        max-width: 476px !important;
        margin: 0 auto 30px !important;
        flex-direction: unset !important;  /* 覆盖PC端的column */
    }

    .collab-tag {
        width: 100% !important;  /* 覆盖PC端的368px，自适应网格列宽 */
        height: 65px !important;  /* Figma: 65px (不是PC端的43px!) */
        border-radius: 106px !important;  /* Figma: 106px (不是PC端的57px!) */
    }

    .collab-tag span {

            font-size: 17px !important;
        /*font-weight: 500 !important;  !* Figma: font-weight: 500 *!*/
        width: 100px;
    }

    .collab-footer {
        font-size: 18px !important;  /* Figma: 18px */
        line-height: 1.6 !important;
        margin-bottom: 0 !important;
    }
}
.invest-value-wrap {
    position: relative;
    height: 781px;
}

.invest-title {
    position: absolute;
    width: 612px;
    left: 254px;
    top: 0;
}

.invest-desc {
    position: absolute;
    width: 720px;
    left: 200px;
    top: 161px;
}

.invest-img {
    position: absolute;
    width: 1120px;
    height: 500px;
    left: 0;
    top: 281px;
    border-radius: 30px;
    object-fit: cover;
    width: 100%;
}

.invest-list {
    position: absolute;
    left: 57px;
    top: 389px;
}

.invest-footer {
    position: absolute;
    left: 57px;
    top: 599px;
}

/* 投资价值区域 - 移动端布局（垂直流式） */
@media screen and (max-width: 768px) {
    .invest-value-wrap {
        position: static;
        height: auto;
        padding: 0 12px;
    }

    .invest-title,
    .invest-desc,
    .invest-img,
    .invest-list,
    .invest-footer {
        position: static;
        width: 100%;
        text-align: left;
        margin-bottom: 20px;
    }

    .invest-img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }

    .invest-title {
        font-size: 28px;
        margin-top: 0;
        margin-bottom: 15px;
    }

    .invest-desc {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .invest-list {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .invest-footer {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 0;
    }

/* 行业解决方案卡片 - 仅影响移动端 (≤768px)，PC端不受影响 */
    /* 行业解决方案 - 完全按Figma 9594_838设计图 */
    .industry-solutions-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;  /* 4列 */
        gap: 10px !important;  /* Figma间距 */
        position: static !important;
        width: 476px !important;  /* Figma容器宽度 */
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        align-items: start !important;  /* Masonry错位效果 */
    }

    .industry-solutions-grid > div {
        width: 100% !important;  /* 自适应列宽 */
        aspect-ratio: 111 / 122 !important;  /* Figma宽高比: ~0.91 */
        border-radius: 10px !important;  /* Figma: border-radius: 10px */
        overflow: hidden !important;
        position: relative !important;
    }

    /* 第2行卡片向下偏移，实现Masonry错位效果 */
    .industry-solutions-grid > div:nth-child(5),
    .industry-solutions-grid > div:nth-child(6),
    .industry-solutions-grid > div:nth-child(7),
    .industry-solutions-grid > div:nth-child(8) {
        margin-top: 10px !important;  /* Figma: 行间垂直偏移 */
    }

    .industry-solutions-grid > div img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;  /* Figma圆角 */
        display: block !important;
    }

    .hsfc-Row {
        display: inline !important;
        margin-top: 10px !important;
    }
    .w133m {
        width: 133px !important;
    }

    .industry-solutions-grid > div > div {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.40) -9.35%, rgba(0, 0, 0, 0.00) 100%, #000 99.96%) !important;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
        border-radius: 10px !important;
    }

    .industry-solutions-grid > div span {
        font-size: 16px !important;  /* Figma: font-size: 18px */
        /*font-weight: 600 !important;  !* Figma: font-weight: 600 *!*/
        position: absolute !important;
        top: 6px !important;  /* Figma: top: 6.03px - 左上角！*/
        left: 9px !important;  /* Figma: left: 9px */
        line-height: 1 !important;
        text-align: left !important;
        color: white !important;
        z-index: 2 !important;
        text-align: left;

    }

    
}