/* 解决滚动条问题，确保页面没有右侧滚动条 */
.system-page {
    min-height: 100vh;
    padding-top: 0; /* 移除顶部内边距 */
    overflow-x: hidden; /* 防止水平滚动 */
    position: relative;
}





.top-black-bar {
    width: 100%;
    height: 70px; /* 与App.vue中顶栏高度一致 */
    background-color: #000000;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}

.header-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px; /* 添加底部间距 */
    margin-top: 0px; /* 确保默认状态下正确显示 */
}

.bg_banner{
    width: 100%;height:550px;
}
.allbannerm {
    max-width: 1200px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    .title1{
        position: absolute;
        font-size: 52px;
        top: 16%;
        left: 0;
        letter-spacing: 2px;
        color:#5E8EAC
    }
    .title2{
        position: absolute;
        color: hsla(0,0%,100%,0.8);
        left: 0;
        font-size: 26px;
        top: 41%;
    }
    .title3{
        position: absolute;
        color: hsla(0,0%,100%,0.8);
        left: 0;
        font-size: 16px;
        top: 52%;
    }
}


.banner4img1 {
    display: inline-block;
    position: absolute;
    top: 95px;
    right: -117px;
}

.banner4img2 {
    display: inline-block;
    position: absolute;
    top: 70px;
    right: -30px;
}

.banner4img3 {
    display: inline-block;
    position: absolute;
    top: 137px;
    right: 84px;
}

.banner4img4 {
    display: inline-block;
    position: absolute;
    top: 183px;
    right: 152px;
}

.banner4div1 {
    width: 158px;
    height: 105px;
    display: inline-block;
    position: absolute;
    top: 70%;
    right: 40%;
}

.banner4div2 {
    width: 127px;
    height: 84px;
    display: inline-block;
    position: absolute;
    top: 10%;
    right: -15%;
}

.banner4div3 {
    width: 235px;
    height: 23px;
    display: inline-block;
    position: absolute;
    top: 79%;
    right: -11%;
}

.banner4img5 {
    display: inline-block;
    position: absolute;
    top: 8px;
    left: 20px;
}

.banner4img6 {
    display: inline-block;
    position: absolute;
    top: 6px;
    left: 37px;
}

.banner4img7 {
    display: inline-block;
    position: absolute;
    top: -44px;
    left: 66px;
}

.banner4img8 {
    display: inline-block;
    position: absolute;
    top: 8%;
    left: 55%;
}

.banner4img9 {
    display: inline-block;
    position: absolute;
    top: 41%;
    right: -16%;
}

.banner4img10 {
    display: inline-block;
    position: absolute;
    top: 38%;
    left: 49%;
}


.tuqi {
    animation: tuqi 1.6s ease-in-out 0.3s infinite alternate;
}

@keyframes tuqi {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -3px;
    }
}
@keyframes tuqi {
    from {
        transform: translate(-1px,0px)
    }
    to {
        transform: translate(1px, 2px)
    }
}

.tuqi2 {
    animation: tuqi2 1.5s ease-in-out 0.3s infinite alternate;
}

@keyframes tuqi2 {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -4px;
    }
}


@keyframes tuqi2 {
    from {
        transform: translate(0px, 0)
    }
    to {
        transform: translate(3px, 4px)
    }
}

.tuqi3 {
    animation: tuqi3 1.8s ease-in-out 0.3s infinite alternate;
}

@keyframes tuqi3 {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -4px;
    }
}


@keyframes tuqi3 {
    from {
        transform: translate(-1px, 0)
    }
    to {
        transform: translate(3px, 4px)
    }
}

.tuqi4 {
    animation: tuqi4 1.6s ease-in-out 0.3s infinite alternate;
}

@keyframes tuqi4 {
    from {
        margin-top: 0;
    }
    to {
        margin-top: -5px;
    }
}


@keyframes tuqi4 {
    from {
        transform: translate(-3px, 0)
    }
    to {
        transform: translate(3px, 5px)
    }
}
.ddpf{
    animation: ddpf 100s ease-in-out 0s infinite alternate;
}

.Rotation{
    -webkit-transform: rotate(-360deg);
    animation: rotation 20s linear infinite;
    -moz-animation: rotation 20s linear infinite;
    -webkit-animation: rotation 20s linear infinite;
    -o-animation: rotation 20s linear infinite;
}
@-webkit-keyframes rotation2{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.Rotation2{
    -webkit-transform: rotate(360deg);
    animation: rotation2 25s linear infinite;
    -moz-animation: rotation2 25s linear infinite;
    -webkit-animation: rotation2 25s linear infinite;
    -o-animation: rotation2 25s linear infinite;
}

@-webkit-keyframes rotation3{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(-360deg);}
}
.Rotation3{
    -webkit-transform: rotate(-360deg);
    animation: rotation3 30s linear infinite;
    -moz-animation: rotation3 30s linear infinite;
    -webkit-animation: rotation3 30s linear infinite;
    -o-animation: rotation3 30s linear infinite;
}

@-webkit-keyframes rotation4{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}

.Rotation4{
    -webkit-transform: rotate(360deg);
    animation: rotation4 40s linear infinite;
    -moz-animation: rotation4 40s linear infinite;
    -webkit-animation: rotation4 40s linear infinite;
    -o-animation: rotation4 40s linear infinite;
}

.upd {
    animation: heart 1.5s ease-in-out 1s infinite alternate;
}

@keyframes heart {
    from {
        margin-top: 0px;
    }
    to {
        margin-top: -6px;
    }
}


@keyframes heart {
    from {
        transform: translate(0, 0)
    }
    to {
        transform: translate(0, 6px)
    }
}





.header-image {
    width: 100%;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 系统介绍部分样式 */
.system-intro-section {
    padding: 50px 0;
    position: relative;
}

.section-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.text-content {
    flex: 1;
    max-width: 600px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    position: relative;
}

.section-subtitle {
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.section-description p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    /*margin-bottom: 25px;*/
    text-align: justify;
}

.feature-highlight {
    padding: 20px 0;
    position: relative;
}

.feature-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
    position: relative;
    display: inline-block;
}

.feature-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #333, #555);
    border-radius: 2px;
}

.feature-subtitle {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.feature-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #666;
}

.image-content {
    flex: 1;
    display: flex;
    justify-content: center;
}

.phone-mockup {
    position: relative;
    width: 100%;
    max-width: 300px;
    transform: perspective(1000px) rotateY(-10deg);
    transition: all 0.5s ease;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-mockup:hover {
    transform: perspective(1000px) rotateY(0deg);
    box-shadow: none;
}
.phone-frame{
    position: absolute;
    top: -1%;
    left: 2.5%;
    width: 95%;
    height: 103%;
    object-fit: contain;
    border-radius: 10px;
    z-index: 100;
    overflow: hidden;
}
.system-image {
    width: 70%;
    display: block;
    transition: transform 0.5s ease;
    margin: 0 auto; /* 添加自动边距使图片水平居中 */
    border-radius: 25px;
}

/*.phone-mockup:hover .phone-frame {*/
/*    transform: scale(1.05);*/
/*}*/


/* 动画基础类 */
.animate-on-scroll {
    opacity: 0;
    /* 注意：移除了transition-property和transition-duration */
    /* 我们将使用纯关键帧动画 */
}

.animate-on-scroll.animated {
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-delay: var(--delay, 0s);
}

/* 不同动画效果类 */
.fade-in-up.animated {
    animation-name: fadeInUp;
}

.fade-in-left.animated {
    animation-name: fadeInLeft;
}

.fade-in-right.animated {
    animation-name: fadeInRight;
}

.fade-in-slide-up.animated {
    animation-name: fadeInSlideUp;
}

.scale-in.animated {
    animation-name: scaleIn;
}

/* 全局动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 简单2步部分样式 */
.simple-steps-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
}

.steps-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.steps-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.steps-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #333, #555);
    margin: 0 auto;
    border-radius: 2px;
}

.steps-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.steps-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.step-number {
    font-size: 42px;
    font-weight: 800;
    color: #f0f0f0;
    line-height: 1;
    min-width: 60px;
    text-align: center;
}

.step-info {
    flex: 1;
}

.step-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.step-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

/* 物联一战部分样式 */
.iot-battle-section {
    padding: 30px 0;
    position: relative;
    /*margin-top: 40px;*/
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.section-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #333, #555);
    margin: 0 auto;
    border-radius: 2px;
}

.iot-content {
    position: relative;
    z-index: 1;
}

.iot-features-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 5px;
}

.feature-group {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 30%;
}

.center-images {
    position: relative;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-stack {
    position: relative;
    width: 100%;
    max-width: 350px;
    height: 400px;
    --img-top-position: 30%; /* 进一步增加顶部距离，使图片位于中心位置 */
}

.front-image {
    position: absolute;
    top: var(--img-top-position);
    left: 0;
    width: 100%;
    z-index: 2;
    object-fit: contain;
    animation: floatAnimation 6s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
    transition: filter 0.3s ease, opacity 0.5s ease;
    opacity: 0;
    transform-origin: center center;
}

.front-image.image-loaded {
    opacity: 1;
}

.front-image:hover {
    filter: drop-shadow(0 8px 25px rgba(0,0,0,0.2));
    animation-play-state: paused;
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(30px) rotate(-2deg); /* 再次增大下移幅度 */
    }
    50% {
        transform: translateY(0) rotate(0deg);
    }
    75% {
        transform: translateY(-30px) rotate(2deg); /* 再次增大上移幅度 */
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.back-image {
    position: absolute;
    top: calc(var(--img-top-position) - 55px);
    left: 0;
    width: 100%;
    z-index: 1;
    object-fit: contain;
    transition: transform 0.5s ease, top 0.3s ease;
}

.image-stack:hover .back-image {
    transform: translateY(5px);
    top: calc(var(--img-top-position) - 85px); /* 悬停时微调位置 */
}

.feature-box {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #3498db, #5d78ff);
    transition: all 0.3s ease;
}

.feature-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.feature-box:hover::before {
    width: 6px;
}

.feature-box .feature-title {
    font-size: 20px;
    font-weight: 600;
    color: #3498db;
    margin-bottom: 15px;
    position: relative;
}

.feature-box .feature-text {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.bottom-feature {
    display: flex;
    justify-content: center;
}

.center-box {
    width: 350px;
    max-width: 100%;
}

/* 移动端样式 */
@media (max-width: 768px) {
    .system-page {
        padding-top: 0;
        margin-top: 60px !important; /* 顶部内边距等于顶栏高度，使用!important确保覆盖 */
        width: 100%;
        overflow-x: hidden;
    }

    .top-black-bar {
        height: 60px; /* 移动端顶栏高度 */
    }

    .header-container {
        margin-top: 0px;
        width: 120%; /* 使头图宽度超出屏幕 */
        margin-left: -10%; /* 负边距使图片两侧均超出 */
        overflow: hidden;
    }

    .header-image {
        width: 100%;
        display: block;
    }

    .container {
        /*width: 100%;*/
        padding: 0 20px;
    }

    .section-content {
        flex-direction: column;
        gap: 30px;
    }

    .text-content,
    .image-content {
        max-width: 100%;
    }

    .section-title {
        font-size: 28px;
        text-align: center;
    }

    .section-subtitle {
        font-size: 16px;
        text-align: center;
        margin-bottom: 20px;
    }

    .feature-title {
        font-size: 22px;
        display: block;
        text-align: center;
    }

    .feature-subtitle {
        text-align: center;
    }

    .feature-desc {
        text-align: center;
    }

    .phone-mockup {
        transform: perspective(1000px) rotateY(0deg);
        max-width: 350px;
    }

    .simple-steps-section {
        padding: 50px 0;
        margin-top: 0;
        /*margin-top: 30px;*/
    }

    .steps-title {
        font-size: 26px;
    }

    .steps-content {
        max-width: 95%;
    }

    .steps-details {
        width: 100%;
    }

    .iot-battle-section {
        padding: 50px 0;
        padding-top: 0;
    }

    .iot-features-container {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .left-group, .right-group {
        gap: 15px;
    }

    .center-images {
        width: 100%;
        order: 1;
        margin-bottom: 50px; /* 增加与卡片的间距 */
        padding-bottom: 20px; /* 额外增加底部间距 */
    }

    .image-stack {
        height: 160px;
        margin: 0 auto;
        --img-top-position: 25%; /* 移动端调整位置 */
    }

    .feature-group {
        width: 100%;
        order: 2;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; /* 增加卡片之间的间距 */
    }

    .feature-box {
        padding: 22px 15px;
        border-radius: 16px;
        background: linear-gradient(145deg, #ffffff, #fafbfd);
        border: none;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05),
        0 2px 5px rgba(0, 0, 0, 0.03),
        0 0 0 1px rgba(0, 0, 0, 0.01);
        display: flex;
        flex-direction: column;
        align-items: center;
        /*height: 100%;*/
        justify-content: flex-start;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        overflow: hidden;
        position: relative;
    }

    .feature-box::before {
        content: '';
        position: absolute;
        width: 0;
        height: 4px;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, #3498db, #5d78ff);
        transition: all 0.3s ease;
        border-radius: 0;
        opacity: 0;
    }

    .feature-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1),
        0 3px 10px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.01);
        background: linear-gradient(145deg, #ffffff, #f0f5ff);
    }

    .feature-box:hover::before {
        width: 100%;
        opacity: 1;
    }

    .feature-box .feature-title {
        font-size: 18px;
        margin-bottom: 15px;
        text-align: center;
        padding-bottom: 12px;
        position: relative;
        color: #2c3e50;
        font-weight: 600;
        width: 100%;
    }

    .feature-box .feature-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 2px;
        background: linear-gradient(90deg, #3498db, #5d78ff);
        border-radius: 2px;
    }

    .feature-box .feature-text {
        font-size: 14px;
        line-height: 1.7;
        color: #546e7a;
        margin: 0;
        text-align: center;
    }

    .bottom-feature {
        padding: 10px 15px 0;
    }

    .center-box {
        width: 100%;
        max-width: none;
    }
}

/* 更小屏幕设备适配 */
@media (max-width: 480px) {
    .system-page {
        margin-top: 45px !important; /* 更小屏幕上的顶部边距，使用!important确保覆盖 */
    }

    .top-black-bar {
        height: 45px; /* 更小屏幕的顶栏高度 */
    }


    .header-image {
        width: 100%;
        display: block;
        min-width: 100%; /* 确保图片至少覆盖容器宽度 */
    }

    .container {
        padding: 0 15px; /* 减小容器内边距 */
        /*width: 100%;*/
    }

    .system-intro-section {
        padding: 30px 0;
    }

    .section-title {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .section-description p {
        font-size: 15px;
        line-height: 1.6;
    }

    .feature-title {
        font-size: 20px;
    }

    .feature-subtitle {
        font-size: 13px;
    }

    .feature-desc {
        font-size: 15px;
    }

    .phone-mockup {
        max-width: 280px;
    }

    .content-section {
        margin-top: 25px;
        margin-bottom: 35px;
        width: 110%; /* 内容部分也略微超出 */
        margin-left: -5%; /* 居中对齐 */
    }

    .simple-steps-section {
        padding: 40px 0;
        /*margin-top: 20px;*/
    }

    .steps-header {
        margin-bottom: 40px;
    }

    .steps-title {
        font-size: 22px;
    }

    .steps-divider {
        width: 60px;
    }

    .step-item {
        padding: 20px;
        gap: 15px;
    }

    .step-number {
        font-size: 36px;
        min-width: 50px;
    }

    .step-title {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .step-desc {
        font-size: 14px;
    }

    .iot-battle-section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 24px;
    }

    .section-divider {
        width: 60px;
    }

    .image-stack {
        height: 125px;
        --img-top-position: 20%; /* 小屏幕调整位置 */
    }

    .front-image {
        animation: floatAnimationSmall 4s ease-in-out infinite;
    }

    @keyframes floatAnimationSmall {
        0% {
            transform: translateY(0) rotate(0deg) scale(1);
        }
        33% {
            transform: translateY(20px) rotate(-1deg) scale(1.02); /* 增大幅度 */
        }
        66% {
            transform: translateY(-20px) rotate(1deg) scale(1.02); /* 增大幅度 */
        }
        100% {
            transform: translateY(0) rotate(0deg) scale(1);
        }
    }

    .back-image {
        top: calc(var(--img-top-position) - 20px); /* 小屏幕背景图位置更大幅度上移 */
        left: 20%;
        width: 60%;
    }

    .feature-box {
        padding: 16px 12px;
        margin: 0;
        min-height: 100px;
    }

    .feature-box:hover {
        transform: translateY(-5px);
    }

    .bottom-feature {
        padding: 0 5px;
    }

    .center-box {
        width: 100%;
    }

    .feature-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .iot-features-container {
        gap: 25px;
        margin-bottom: 25px;
        padding: 0 5px;
    }

    .feature-box {
        padding: 16px 12px;
        margin: 0;
        min-height: 120px;
    }

    .feature-box:hover {
        transform: translateY(-5px);
    }

    .bottom-feature {
        padding: 0 5px;
    }

    .center-images {
        margin-bottom: 40px;
    }

    .feature-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .iot-features-container {
        gap: 25px;
        margin-bottom: 25px;
        padding: 0 8px;
    }

    .feature-box {
        padding: 20px 16px;
        margin: 0;
        min-height: 100px;
        border-radius: 14px;
    }

    .feature-box:hover {
        transform: translateY(-5px);
    }

    .feature-box .feature-title {
        font-size: 17px;
        margin-bottom: 12px;
        letter-spacing: 0.5px;
    }

    .feature-box .feature-title::after {
        width: 35px;
    }

    .feature-box .feature-text {
        font-size: 13.5px;
        line-height: 1.6;
    }

    .bottom-feature {
        padding: 5px 8px 0;
    }
}

.center-images.animated .front-image {
    animation-delay: 0.5s;
}

/* 合作简单部分样式 */
.cooperation-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
    background-color: transparent; /* 移除背景色 */
    border-radius: 0; /* 移除圆角 */
}

.cooperation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
}

.steps-flow {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.steps-flow-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
}

.step-circle {
    width: 70px;
    height: 70px;
    border: 2px dashed #3498db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.flow-step.active .step-circle {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
    border-style: solid;
}

.flow-step:hover .step-circle {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
}

.step-icon {
    font-size: 24px;
    color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* 为SVG图标添加垂直居中样式 */
.user-icon::before,
.info-icon::before,
.qrcode-icon::before,
.process-icon::before,
.done-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin: auto;
}

/* 使用Bootstrap图标 */
.user-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z'/%3E%3C/svg%3E");
}

.info-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zM5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1H5zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1H5z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

.qrcode-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-qr-code' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h2v2H2V2Z'/%3E%3Cpath d='M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z'/%3E%3Cpath d='M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z'/%3E%3Cpath d='M10 0v6h6V0h-6Zm5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8H6Zm0 0v1H2V8H1v1H0V7h3v1h3Zm10 1h-1V7h1v2Zm-1 0h-1v2h2v-1h-1V9Zm-4 0h2v1h-1v1h-1V9Zm2 3v-1h-1v1h-1v1h1v-1h1Zm2 0v-1h-1v1h-1v1h1v-1h1Zm2-3v-1h-1v1h-1v1h1v-1h1Zm0 0v1h1v1h1v-1h-1V9h-1Z'/%3E%3C/svg%3E");
}

.process-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-gear' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
}

.done-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
}

.flow-dots {
    position: absolute;
    top: 35px;
    right: -12%;
    z-index: 1;
    display: flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #3498db;
    border-radius: 50%;
    opacity: 0.5;
    transition: all 0.5s ease;
}

.flow-step.active .dot {
    animation: dotAnimation 1.5s infinite;
}

.flow-step.active .dot:nth-child(1) {
    animation-delay: 0s;
}

.flow-step.active .dot:nth-child(2) {
    animation-delay: 0.3s;
}

.flow-step.active .dot:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes dotAnimation {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(5px);
        opacity: 1;
    }
    100% {
        transform: translateX(0);
        opacity: 0.5;
    }
}

.flow-step:last-child .flow-dots {
    display: none;
}

.step-number {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.step-label {
    font-size: 14px;
    color: #555;
    max-width: 120px;
    line-height: 1.4;
}

.cooperation-text {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.cooperation-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

/* 移动端样式优化 */
@media (max-width: 768px) {
    .cooperation-section {
        padding: 0;
        margin-top: 30px;
        border-radius: 15px;
    }

    .cooperation-content {
        gap: 20px;
        margin-top: 30px;
        padding: 0 10px;
    }

    .steps-flow-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 0 10px;
    }

    .flow-step {
        flex-direction: row;
        justify-content: flex-start;
        width: 90%;
        gap: 20px;
        background-color: white;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }

    .flow-step:hover, .flow-step.active {
        transform: translateX(5px);
        box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
    }

    .step-circle {
        width: 50px;
        height: 50px;
        margin-bottom: 0;
        border-width: 1.5px;
    }

    .step-icon {
        transform: scale(0.8);
    }

    .flow-dots {
        display: none;
    }

    .step-info-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .step-number {
        font-size: 16px;
        margin-bottom: 4px;
        text-align: left;
        color: #3498db;
        font-weight: 700;
    }

    .step-label {
        font-size: 14px;
        max-width: none;
        text-align: left;
    }

    .cooperation-desc {
        font-size: 15px;
        padding: 0 15px;
    }
}

/* 更小屏幕设备适配 */
@media (max-width: 480px) {
    .cooperation-section {
        padding: 0;
        margin-top: 20px;
        border-radius: 12px;
    }

    .cooperation-content {
        gap: 20px;
        margin-top: 25px;
        padding: 0 5px;
    }

    .step-circle {
        width: 45px;
        height: 45px;
    }

    .step-icon {
        transform: scale(0.7);
    }

    .step-number {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .step-label {
        font-size: 13px;
        line-height: 1.3;
    }

    .cooperation-desc {
        font-size: 14px;
        line-height: 1.6;
        padding: 0 10px;
    }
}

/* 使用自定义SVG图标替代emoji，提高兼容性 */
@media (min-width: 769px) {
    .steps-flow-container::after {
        content: '';
        position: absolute;
        top: 35px;
        left: 85px;
        right: 85px;
        height: 2px;
        background: rgba(52, 152, 219, 0.2);
        z-index: 1;
    }
}

/* 添加FontAwesome字体支持 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 防伪溯源功能部分样式 */
.traceability-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
}

.traceability-content {
    position: relative;
    z-index: 1;
    margin-top: 60px;
}

.traceability-circle-container {
    position: relative;
    width: 100%;
    height: 580px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-circle {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

.inner-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(145deg, #3498db, #5d78ff);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    font-weight: 600;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    animation: pulseInner 4s infinite ease-in-out;
}

@keyframes pulseInner {
    0% {
        transform: scale(1);
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(93, 120, 255, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.3), 0 0 20px 10px rgba(93, 120, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(93, 120, 255, 0);
    }
}

.pulse-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid rgba(93, 120, 255, 0.5);
    animation: pulsate 3s infinite;
}

@keyframes pulsate {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.traceability-features {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.feature-item {
    position: absolute;
    width: 270px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-container {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(145deg, #f8f9fa, #e9ecef);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.feature-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.feature-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* 特性项位置 */
.qr-marketing {
    top: 50px;
    left: 205px;
}

.guided-purchase {
    top: 190px;
    left: 100px;
}

.anti-counterfeit {
    top: 50px;
    right: 205px;
}

.hidden-code {
    top: 190px;
    right: 100px;
}

.product-source {
    bottom: 33px;
    left: 37%;
    transform: translateX(-50%);
}

.product-source:hover {
    transform: translateX(-50%) translateY(-5px);
}

/* 使用SVG图标 */
.qr-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-qr-code' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h2v2H2V2Z'/%3E%3Cpath d='M6 0v6H0V0h6ZM5 1H1v4h4V1ZM4 12H2v2h2v-2Z'/%3E%3Cpath d='M6 10v6H0v-6h6Zm-5 1v4h4v-4H1Zm11-9h2v2h-2V2Z'/%3E%3Cpath d='M10 0v6h6V0h-6Zm5 1v4h-4V1h4ZM8 1V0h1v2H8v2H7V1h1Zm0 5V4h1v2H8ZM6 8V7h1V6h1v2h1V7h5v1h-4v1H7V8H6Zm0 0v1H2V8H1v1H0V7h3v1h3Zm10 1h-1V7h1v2Zm-1 0h-1v2h2v-1h-1V9Zm-4 0h2v1h-1v1h-1V9Zm2 3v-1h-1v1h-1v1h1v-1h1Zm2 0v-1h-1v1h-1v1h1v-1h1Zm2-3v-1h-1v1h-1v1h1v-1h1Zm0 0v1h1v1h1v-1h-1V9h-1Z'/%3E%3C/svg%3E");
}

.guide-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-graph-up-arrow' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z'/%3E%3C/svg%3E");
}

.shield-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-shield-check' viewBox='0 0 16 16'%3E%3Cpath d='M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.114 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z'/%3E%3Cpath d='M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.barcode-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-upc-scan' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1h-3zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5zM.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5zM3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7zm2 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-7zm3 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7z'/%3E%3C/svg%3E");
}

.box-icon::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%233498db' class='bi bi-box-seam' viewBox='0 0 16 16'%3E%3Cpath d='M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z'/%3E%3C/svg%3E");
}

/* 移动端适配 */
@media (max-width: 768px) {
    .traceability-section {
        padding: 50px 0;
        margin-top: 0;
        /*margin-top: 30px;*/
    }

    .traceability-content {
        margin-top: 40px;
    }

    .traceability-circle-container {
        height: auto;
        flex-direction: column;
        gap: 20px;
    }

    .main-circle {
        width: 150px;
        height: 150px;
        margin-bottom: 40px; /* 减小这个值，从230px改为40px */
    }

    .inner-circle {
        width: 130px;
        height: 130px;
        font-size: 18px;
    }

    .pulse-circle {
        width: 150px;
        height: 150px;
    }

    .traceability-features {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 0; /* 从30px改为0，进一步减少间距 */
    }

    .feature-item {
        position: relative;
        width: 90%;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none !important;
    }

    .feature-item:hover {
        transform: translateY(-5px) !important;
    }

    .qr-marketing,
    .guided-purchase,
    .anti-counterfeit,
    .hidden-code,
    .product-source {
        position: static;
        transform: none;
    }

    .product-source:hover {
        transform: translateY(-5px);
    }
}

/* 更小屏幕设备适配 */
@media (max-width: 480px) {
    .traceability-section {
        padding: 40px 0;
        /*margin-top: 20px;*/
    }

    .traceability-content {
        margin-top: 30px;
    }

    .main-circle {
        width: 130px;
        height: 130px;
        margin-bottom: 30px; /* 从200px减少到30px */
    }

    .inner-circle {
        width: 110px;
        height: 110px;
        font-size: 16px;
    }

    .pulse-circle {
        width: 130px;
        height: 130px;
    }

    .feature-item {
        padding: 15px;
        gap: 10px;
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .icon-container {
        width: 36px;
        height: 36px;
    }

    .feature-content h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .feature-content p {
        font-size: 13px;
    }
}

/* 整体解决方案提供商部分样式 */
.solutions-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
    /* 移除背景颜色 */
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.section-subtitle {
    font-size: 18px;
    color: #5d78ff;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 300;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.solution-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    /* 添加固定尺寸 */
    height: 280px;
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.solution-header {
    background: linear-gradient(90deg, #f5a185, #f17e64);
    color: white;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.solution-card:nth-child(1) .solution-header {
    background: linear-gradient(90deg, #f5a185, #f17e64);
}

.solution-card:nth-child(2) .solution-header {
    background: linear-gradient(90deg, #36d1ba, #1abc9c);
}

.solution-card:nth-child(3) .solution-header {
    background: linear-gradient(90deg, #5ad7fa, #3abeef);
}

.solution-card:nth-child(4) .solution-header {
    background: linear-gradient(90deg, #9279fb, #7661e4);
}

.solution-card:nth-child(5) .solution-header {
    background: linear-gradient(90deg, #ffaf58, #ff9636);
}

.solution-card:nth-child(6) .solution-header {
    background: linear-gradient(90deg, #fc6f6f, #fb5050);
}

.solution-card:nth-child(7) .solution-header {
    background: linear-gradient(90deg, #58acfa, #4299ec);
}

.solution-card:nth-child(8) .solution-header {
    background: linear-gradient(90deg, #54d3ff, #2cb5e8);
}

.solution-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.solution-image {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 230px; /* 设置固定高度 */
}

.solution-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.solution-card:hover .solution-image img {
    transform: scale(1.05);
}

/* 移动端适配 */
@media (max-width: 1024px) {
    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .solutions-section {
        padding: 0;
        /*margin-top: 30px;*/
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    .solutions-grid {
        padding: 0 15px;
        gap: 15px;
    }

    .solution-header {
        padding: 12px;
    }

    .solution-header h3 {
        font-size: 16px;
    }

    .solution-card {
        height: 190px; /* 移动端调整高度 */
    }

    .solution-image {
        height: 200px; /* 移动端调整图片高度 */
    }
}

@media (max-width: 480px) {
    .solutions-section {
        padding:0;
        /*margin-top: 20px;*/
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 24px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 10px;
    }

    .solution-card {
        height: 160px; /* 更小屏幕调整高度 */
    }

    .solution-image {
        height: 170px; /* 更小屏幕调整图片高度 */
    }
}

/* 一站式助推品牌数字化升级部分样式 */
.digital-upgrade-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
}

.digital-layout {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-areas:
                "top-left top-right"
                "middle-left middle-right"
                "bottom-left bottom-right"
                "bottom-center bottom-center";
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.digital-card {
    position: relative;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    padding: 25px;
    min-height: 130px;
}

.digital-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.digital-card.top-left { grid-area: top-left; }
.digital-card.top-right { grid-area: top-right; }
.digital-card.middle-left { grid-area: middle-left; }
.digital-card.middle-right { grid-area: middle-right; }
.digital-card.bottom-left { grid-area: bottom-left; }
.digital-card.bottom-right { grid-area: bottom-right; }
.digital-card.bottom-center {
    grid-area: bottom-center;
    margin-top: 20px;
}

.digital-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.digital-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.digital-card:hover .digital-image img {
    transform: scale(1.1) rotate(5deg);
}

.digital-content {
    flex: 1;
}

.digital-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    position: relative;
}

.digital-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
}

/* 添加卡片不同主题色边框 */
.digital-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    transition: all 0.3s ease;
}

.digital-card.top-left::before { background: linear-gradient(to bottom, #36d1ba, #1abc9c); }
.digital-card.top-right::before { background: linear-gradient(to bottom, #5ad7fa, #3abeef); }
.digital-card.middle-left::before { background: linear-gradient(to bottom, #9279fb, #7661e4); }
.digital-card.middle-right::before { background: linear-gradient(to bottom, #fc6f6f, #fb5050); }
.digital-card.bottom-left::before { background: linear-gradient(to bottom, #ffaf58, #ff9636); }
.digital-card.bottom-right::before { background: linear-gradient(to bottom, #58acfa, #4299ec); }
.digital-card.bottom-center::before { background: linear-gradient(to bottom, #54d3ff, #2cb5e8); }

.digital-card:hover::before {
    width: 6px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .digital-upgrade-section {
        padding: 50px 0;
        margin-top: 30px;
    }

    .digital-layout {
        grid-template-areas:
                    "top-left"
                    "top-right"
                    "middle-left"
                    "middle-right"
                    "bottom-left"
                    "bottom-right"
                    "bottom-center";
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .digital-card {
        padding: 20px;
        min-height: auto;
    }

    .digital-card.bottom-center {
        margin-top: 0;
    }

    .digital-image {
        width: 60px;
        height: 60px;
        margin-right: 15px;
    }

    .digital-title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .digital-desc {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .digital-upgrade-section {
        padding: 40px 0;
        margin-top: 20px;
    }

    .digital-layout {
        gap: 15px;
        padding: 0 10px;
    }

    .digital-card {
        padding: 15px;
    }

    .digital-image {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }

    .digital-title {
        font-size: 16px;
        margin-bottom: 4px;
    }

    .digital-desc {
        font-size: 12px;
        line-height: 1.4;
    }
}

/* 一物一码核心业务部分样式 */
.core-business-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
}

.core-business-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.business-card {
    flex: 1;
    max-width: 190px; /* 减小宽度使其更细长 */
    min-width: 170px;
    height: 350px; /* 增加高度使其更细长 */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    color: white;
    padding: 30px 15px 45px;
    margin: 0 5px; /* 添加一些间距 */
    overflow: hidden;
    /* 修改 clip-path 使顶部也呈现三角形形状 */
    clip-path: polygon(50% 0%, 100% 10%, 100% 90%, 50% 100%, 0% 90%, 0% 10%);
}

.business-card:hover {
    transform: translateY(-10px);
}

.blue-card { background: linear-gradient(to bottom, #5c7cfa, #4263eb); }
.orange-card { background: linear-gradient(to bottom, #ff922b, #f76707); }
.red-card { background: linear-gradient(to bottom, #ff6b6b, #fa5252); }
.green-card { background: linear-gradient(to bottom, #20c997, #0ca678); }
.purple-card { background: linear-gradient(to bottom, #ae3ec9, #9c36b5); }

.hex-icon-container {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
}

.hex-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    padding: 25px;
}

.business-title {
    font-size: 22px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

.business-divider {
    width: 40px;
    height: 2px;
    background-color: white;
    margin: 10px 0 15px;
}

.business-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

.business-content p {
    margin: 0;
}

/* 滑动指示器样式 */
.scroll-indicator {
    display: none;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.scroll-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    transition: all 0.3s ease;
}

.scroll-dot.active {
    background-color: #5c7cfa;
    transform: scale(1.2);
}

/* 一物一码核心业务部分样式 */
.core-business-section {
    padding: 30px 0;
    position: relative;
    margin-top: 10px;
}

.core-business-container {
    display: flex;
    justify-content: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.business-card {
    flex: 1;
    max-width: 200px;
    min-width: 150px;
    height: 350px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    color: white;
    padding: 30px 12px 45px;
    margin: 0 8px; /* 添加间距 */
    overflow: hidden;
    /* 这里使用新的 clip-path 实现旗帜状效果 */
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
}

.hex-icon-container {
    width: 60px;
    height: 60px;
    position: relative;
    top: 0;
    left: auto;
    transform: none;
    margin: 0 auto 15px;
}

.hex-icon {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    clip-path: none;
    padding: 0;
}

.business-title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 5px;
    position: relative;
}

.business-divider {
    width: 30px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    margin: 10px auto;
}

.business-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
}

/* 移动端适配 */
@media (max-width: 1100px) {
    .business-card {
        max-width: 190px;
        min-width: 170px;
    }
}

@media (max-width: 992px) {
    .core-business-container {
        flex-wrap: wrap;
    }

    .business-card {
        flex: 0 0 calc(33.33% - 20px);
        max-width: calc(33.33% - 20px);
        margin: 10px;
    }
}

@media (max-width: 992px) {
    .core-business-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .business-card {
        flex: 0 0 calc(33.33% - 30px);
        max-width: 180px;
        margin: 15px 10px;
        height: 320px; /* 稍微减小高度 */
    }
}

@media (max-width: 768px) {
    .core-business-section {
        padding: 0;
        overflow: hidden;
    }

    .core-business-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0 20px;
        scrollbar-width: none; /* 隐藏Firefox滚动条 */
        -ms-overflow-style: none; /* 隐藏IE滚动条 */
        justify-content: flex-start;
    }

    .core-business-container::-webkit-scrollbar {
        display: none; /* 隐藏Chrome滚动条 */
    }

    .business-card {
        flex: 0 0 70%;
        min-width: 180px;
        max-width: 190px;
        margin: 0 8px;
        scroll-snap-align: center;
    }

    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 480px) {
    .core-business-section {
        padding: 0;
    }

    .business-card {
        flex: 0 0 80%;
        min-width: 170px;
        max-width: 180px;
        height: 300px;
        padding: 25px 12px 40px;
    }

    .hex-icon-container {
        width: 45px;
        height: 45px;
        margin-bottom: 10px;
    }

    .business-title {
        font-size: 17px;
    }

    .business-content {
        font-size: 12px;
        gap: 6px;
    }
}

/* 七码合一专利技术部分样式 */
.patent-technology-section {
    padding: 100px 0;
    position: relative;
    margin-top: 40px;
    background: transparent; /* 移除背景色 */
    overflow: hidden;
}

.patent-technology-section::before {
    display: none; /* 移除背景图案 */
}

.patent-technology-section .section-header {
    position: relative;
    z-index: 2;
    margin-bottom: 70px;
}

.patent-technology-section .section-title {
    font-size: 36px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.patent-technology-section .section-subtitle {
    font-size: 18px;
    color: #3498db;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.patent-code-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 0 20px;
}

.patent-code-item {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
}

.patent-code-item::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(52, 152, 219, 0.3), transparent);
}

.patent-code-item:last-child::after {
    display: none;
}

.left-item {
    flex-direction: row;
}

.right-item {
    flex-direction: row-reverse;
}

.patent-code-content {
    flex: 1;
    max-width: 500px;
}

.patent-code-title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

.patent-code-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #5d78ff);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.patent-code-item:hover .patent-code-title::after {
    width: 100%;
}

.patent-code-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

.patent-code-image {
    flex: 1;
    max-width: 450px;
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
    width: 350px; /* 添加固定宽度 */
    height: 280px; /* 添加固定高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
    transition: all 0.5s ease;
    object-fit: contain; /* 保持图片比例 */
}

.patent-code-item:hover .code-image {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.left-item .patent-code-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(93, 120, 255, 0.2));
    border-radius: 20px;
    z-index: -1;
}

.right-item .patent-code-image::before {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, rgba(93, 120, 255, 0.2), rgba(52, 152, 219, 0.2));
    border-radius: 20px;
    z-index: -1;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .patent-technology-section {
        padding: 0px 0 40px; /* 减少顶部和底部内边距 */
    }

    .patent-technology-section .section-header {
        margin-bottom: 40px; /* 减少标题与内容的间距 */
    }

    .patent-technology-section .section-title {
        font-size: 26px;
    }

    .patent-technology-section .section-subtitle {
        font-size: 15px;
    }

    .patent-code-container {
        gap: 50px; /* 减少项目之间的间距 */
        padding: 0 15px;
    }

    .patent-code-item {
        flex-direction: column;
        gap: 25px; /* 减少图片和文本之间的间距 */
    }

    .patent-code-item::after {
        bottom: -25px; /* 调整分隔线位置 */
        left: 15%;
        right: 15%;
    }

    .left-item, .right-item {
        flex-direction: column;
    }

    .patent-code-content {
        max-width: 100%;
        width: 100%;
    }

    .patent-code-image {
        display: none; /* 手机端完全隐藏图片 */
    }

    .patent-code-title {
        font-size: 22px;
        margin-bottom: 15px;
        display: block;
        text-align: center;
    }

    .patent-code-title::after {
        left: 50%;
        transform: translateX(-50%);
        bottom: -6px; /* 调整下划线位置 */
        width: 50px; /* 固定宽度 */
    }

    .patent-code-desc {
        font-size: 15px;
        text-align: center;
        line-height: 1.6; /* 减小行高 */
    }

    .left-item .patent-code-image::before,
    .right-item .patent-code-image::before {
        width: 85%;
        height: 85%;
        top: -8px; /* 调整背景位置 */
        left: -8px;
    }

    .right-item .patent-code-image::before {
        bottom: -8px;
        right: -8px;
        top: auto;
        left: auto;
    }
}

@media (max-width: 480px) {
    .patent-technology-section {
        padding: 0 0 30px;
    }

    .patent-technology-section .section-header {
        margin-bottom: 30px;
    }

    .patent-technology-section .section-title {
        font-size: 22px;
    }

    .patent-technology-section .section-subtitle {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .patent-code-container {
        gap: 40px; /* 进一步减少间距 */
        padding: 0 12px;
    }

    .patent-code-item {
        gap: 20px;
    }

    .patent-code-item::after {
        bottom: -20px;
    }

    .patent-code-title {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .patent-code-desc {
        font-size: 14px;
        line-height: 1.5;
    }

    .patent-code-image {
        height: 160px; /* 小屏幕调整高度 */
        max-width: 280px; /* 限制最大宽度 */
    }

    .code-image {
        border-radius: 12px;
    }

    .left-item .patent-code-image::before,
    .right-item .patent-code-image::before {
        display: none; /* 在非常小的屏幕上移除背景装饰 */
    }
}

/* 添加特小屏幕适配 */
@media (max-width: 360px) {
    .patent-technology-section .section-title {
        font-size: 20px;
    }

    .patent-technology-section .section-subtitle {
        font-size: 12px;
    }

    .patent-code-container {
        gap: 35px;
    }

    .patent-code-item {
        gap: 15px;
    }

    .patent-code-title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .patent-code-desc {
        font-size: 13px;
    }

    .patent-code-image {
        height: 140px;
    }
}

/* 一物一码防伪系统页面展示部分样式 */
.system-display-section {
    padding: 30px 0;
    position: relative;
    margin-top: 40px;
    overflow: hidden;
}

.system-display-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.padding20{
    padding: 20px;
}
.padding40{
    padding: 40px;
}
.system-display-images {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 10px;
}

.display-image-wrapper {
    position: relative;
    width: 340px;
    height: auto;
    overflow: hidden;
    box-shadow: none; /* 移除阴影 */
}

.display-image {
    width: 100%;
    height: auto;
    display: block;
    transition: none; /* 移除过渡效果 */
}

/* 移除悬停效果和阴影 */
.display-image-wrapper:hover {
    transform: none;
    box-shadow: none;
}

.display-image-wrapper:hover .display-image {
    transform: none;
}

/* 移除发光效果 */
.image-glow {
    display: none;
}

/* 移动端适配 */
@media (max-width: 1100px) {
    .system-display-images {
        gap: 20px;
    }

    .display-image-wrapper {
        width: 300px;
    }
}

@media (max-width: 992px) {
    .display-image-wrapper {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .system-display-section {
        padding: 20px 0;
    }

    .system-display-images {
        gap: 30px;
    }

    .display-image-wrapper {
        width: 260px;
    }
}

@media (max-width: 580px) {
    .system-display-section {
        padding: 10px 0;
    }

    .system-display-images {
        flex-direction: column;
        gap: 40px;
    }

    .display-image-wrapper {
        width: 280px;
    }
}

@media (max-width: 480px) {
    .system-display-section {
        padding: 0;
    }

    .display-image-wrapper {
        width: 240px;
    }
}


/* 移动端适配 */
@media (max-width: 768px) {
    .bg_banner{
        height: 375px;
    }
    .allbannerm .title1{
        font-size: 38px;
        color: #FFF;
        top: 22%;
        left: 15%;
    }
    .allbannerm .title2{
        left: 15%;
        font-size: 26px;
        top: 40%;
    }
    .allbannerm .title3{
        left: 15%;
        font-size: 9px;
        top: 57%;
    }

}