/*
* 这里涉及到多个类似的页面，每个页面写后期改动的话太麻烦了，
* 所以这里写一个通用的样式，通过给标签加新的类名，通过类名处理样式  
* 只有有类名的才会生效，一般情况下不会出现冲突，除非后期有人按着类名写了新的样式
*/

/* 网站中行业解决方法
左图右文模板针对app的样式处理
*/
/* 响应式容器基础样式 */
.responsive-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 响应式图片样式 */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 响应式按钮容器 */
.responsive-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 移动设备适配 (768px以下) */
@media screen and (max-width: 768px) {

    .box1.wid1280,
    .box2.wid1280 {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .platform-left,
    .platform-right {
        width: 100% !important;
        margin-bottom: 20px;
        text-align: center;
    }

    .platform-left {
        order: 1;
    }

    .platform-right {
        order: 2;
    }

    /* 对于platform2的特殊处理，保持文字在左图片在右的布局 */
    .platform2 .platform-left {
        order: 1;
    }

    .platform2 .platform-right {
        order: 2;
    }

    .title1,
    .title2 {
        text-align: left;
        padding: 0 10px;
    }

    .title2 {
        font-size: 14px;
        line-height: 1.6;
    }

    .responsive-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .responsive-buttons a {
        width: 100%;
        max-width: 200px;
        margin-bottom: 10px;
        text-align: center;
    }

    /* 调整文字大小以适应移动设备 */
    .p-title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .title1 {
        font-size: 16px;
        line-height: 1.5;
    }
}

/* 平板设备适配 (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    .box1.wid1280,
    .box2.wid1280 {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .platform-left,
    .platform-right {
        width: 48% !important;
    }

    .title2 {
        font-size: 14px;
        line-height: 1.5;
    }

    .responsive-buttons {
        justify-content: center;
    }
}
/* 网站中行业解决方法
左图右文模板针对app的样式处理
end
*/


/*
天智云MES、wms、qms、tpm、IOT、企业车间数字化页面logo部分适应app
*/
.responsive-banner{
    margin-top: 0;
    min-height: 3.4rem;
}
/*
天智云MES、wms、qms、tpm、IOT、企业车间数字化页面logo部分适应app
end
*/


/*
软件试用申请，客户应用案例，实施服务，硬件服务，运维服务，下载服务，公司新闻，行业咨询，热点快讯，新闻咨询
*/
@media screen and (max-width: 768px) {
    .responsiveOther-img{
        height: 250px !important;
    }
}
/*
软件试用申请，客户应用案例，实施服务，硬件服务，运维服务，下载服务，公司新闻，行业咨询，热点快讯，新闻咨询
end
*/