@media (max-width: 768px) {

    /* 这里就是10/16x100%=62.5% 也就是默认10px的字号 */
    html {
        font-size: 62.5%;
    }

    .top {
        width: 100%;
        height: 515px;
        background-image: url("../img/web/low/1-rem.webp")/*tpa=https://tbdingtalk.com/assets/addons/cms/img/web/low/1-rem.webp*/;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        color: #FFFFFF;
        margin-top: 0px;
    }

    .top-title {
        font-weight: 700;
        line-height: 46px;
        font-size: 32px;
        color: #FFFFFF;
        text-shadow: 0 4px 24px rgb(20 57 94 / 60%);
        margin: 55px 0px 0px 30px;
    }

    .top-subtitle {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 8px;
        line-height: 18px;
        margin: 10px 0px 0px 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 30px;
    }

    .top-btn {
        display: flex;
        align-items: center;
        position: relative;
    }

    .top-btn .btn {
        width: 120px;
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
        background: rgb(0, 137, 255);
        padding: 0px;
        font-size: 13px;
        color: #FFFFFF;
        font-weight: 700;
        border: 1px solid rgb(0, 137, 255);
        margin: 14px 0px 0px 30px;
    }


    .top-left {
        width: 100%;
        display: block;
        padding-top: 0px;
    }

    .top-con {
        width: 100%;
        position: relative;
    }

    /* 视频 */
    .top-right {
        display: block;
        width: 90%;
        height: 210px;
        border: 10px solid #D8E9FF;
        border-radius: 12px;
        position: absolute;
        cursor: pointer;
        top: 170px;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .news {
        width: 100%;
        flex-wrap: wrap;
    }

    .news-con {
        width: 90%;
        background-size: 100% 100%;
        padding: 24px 24px 24px 30px;
    }

    .news-list-title {
        width: 90%;
    }

    .news .news-con:last-child {
        height: 115px;
    }

    .advantage {
        width: 100%;
        flex-wrap: wrap;
    }

    /* .advantage-icon {
        width: 52px;
        height: 52px;
        display: inline-block;
    } */

    .advantage-cart {
        /* width: 302px; */
        box-sizing: border-box;
        padding: 20px 0px 20px;
        border-radius: 8px;
        background: #f5f8fa;
        position: relative;
        margin: 20px 20px;
    }



    .news-list {
        margin-left: 0px;
    }

    .news-title {
        margin-left: 0px;
    }

    /* 酷应用 */
    .cool {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 94%;
        height: 240px;
        box-sizing: border-box;
        padding: 40px;
        margin: 24px auto 45px;
        background-color: #F5F8FA;
        border-radius: 12px;
        position: relative;
        overflow: hidden;
    }


    /* 行业解决方案 */
    .subtitle {
        display: block;
        text-align: center;
        font-size: 20px;
        /* color: #171a1d; */
        margin-bottom: 10px;
    }

    .subtitle span {
        font-size: 14px;

    }

    .subtitle-more {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 0px;
        font-size: 12px;
        color: #0089ff;
        margin-top: 10px;
    }


    /* 基础能力 */
    .ability-con {
        display: block;
        width: 100%;
        padding: 0px;
    }

    .ability-left {
        white-space: nowrap;
        overflow-x: scroll;
        margin-left: 16px;
    }

    .ability-title,
    .ability-category::before {
        display: none;
    }

    .ability-category {
        display: inline-block;
        width: auto;
        min-width: 88px;
        font-weight: 700;
        padding-left: 0px;
        text-align: center;
    }

    .ability-category:hover {
        background: none;
    }

    .ability-left::-webkit-scrollbar {
        display: none !important;
        width: 0px !important;
        height: 0px !important;
    }

    .ability-right {
        width: 100%;
        box-sizing: border-box;
    }

    .ability-right-con {
        text-align: left;
        margin: 34px;
    }

    .ability-right-title {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        margin-left: 0px;
    }

    .ability-right-text {
        font-weight: 500;
        font-size: 14px;
        text-align: justify;
        margin: 4px 0px 16px 0px;
    }

    .ability-tags {
        display: none;
    }

    .ability-dot {
        text-align: center;
        margin-top: 40px;
    }

    .ability-dot-list {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #CCCCCC;
        border-radius: 100%;
        margin-left: 6px;
        transition: all 1s;
        position: relative;
        z-index: 999999;
    }

    .ability-dot-list.active {
        width: 20px;
        background: #0089ff;
        border-radius: 4px;
    }


    /* 行业解决方案 */
    .low-title.case-title {
        font-size: 24px;
        font-weight: 700;
        height: 30px;
        line-height: 30px;
        margin: 32px 0px 5px;
    }

    .case {
        width: 92%;
        margin: 0px auto;
    }

    .case-cart {
        display: inline-block;
        width: 100%;
        height: auto;
    }

    .case-dot-list:hover {
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background: rgba(0, 0, 0, .1);
        margin: 0px 5px;
    }

    .case-dot-list.active {
        background: #0089ff;
    }

    .case-cover {
        width: 100%;
        height: auto;
        border-radius: 12px 12px 0px 0px;
    }

    .case-info {
        width: 100%;
        padding: 24px;
    }

    .case-keywords {
        padding: 5px 14px;
    }

    .case-title {
        font-size: 18px;
        font-weight: 700;
        height: auto;
        line-height: 24px;
        margin: 12px 0px 8px;
    }

    .case-text {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 16px;
    }

    .case-more {
        font-size: 14px;
        font-weight: 500;
    }

    .video video {
        width: 100%;
        height: auto;
    }

    .create-title {
        font-size: 2.2rem;
        line-height: 3rem;
    }
}

@media screen and (min-device-width: 768px) and (max-device-width: 1366px) {


    /* 这里就是10/16x100%=62.5% 也就是默认10px的字号 */
    html {
        font-size: 62.5%;
    }

    .top {
        width: 100%;
        height: 500px;
        background-image: url("../img/web/low/1.png")/*tpa=https://tbdingtalk.com/assets/addons/cms/img/web/low/1.png*/;
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center;
        color: #FFFFFF;
        margin-top: 0px;
        background-position: 0px 0px;
    }

    .top-subtitle {
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: 5px;
        line-height: 18px;
        margin: 24px 0 12px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 3rem;
    }

    .top-left {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        padding-top: 100px;
    }

    .top-title {
        font-weight: 700;
        line-height: 46px;
        font-size: 32px;
        color: #FFFFFF;
        text-shadow: 0 4px 24px rgb(20 57 94 / 60%);
        margin: 108px 0px 0px 30px;
    }

    .top-right {
        /* display: block; */
        width: 53%;
        height: 265px;
        border: 10px solid #D8E9FF;
        border-radius: 12px;
        position: absolute;
        cursor: pointer;
        top: 78px;
        left: 44%;
        transform: translate(0, 0);
    }

    .top-btn {
        display: flex;
        align-items: center;
        position: relative;

    }

    .top-btn .btn {
        width: 160px;
        height: 56px;
        line-height: 56px;
        border-radius: 6px;
        background: rgb(0, 137, 255);
        padding: 0px;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        border: 1px solid rgb(0, 137, 255);
        margin-left: 5rem;
    }

    .top-btn .btn:hover {
        background: rgb(51, 160, 255);
    }

    .top-btn .btn:nth-child(2) {
        background: #FFFFFF;
        color: #171a1d;
        margin-left: 16px;
        border-color: #FFFFFF;
    }

    .top-btn .btn:nth-child(2):hover {
        color: rgb(0, 137, 255);
        border-color: rgb(0, 137, 255);
    }

    .btn-icon {
        width: 42px;
        height: 42px;
        margin-left: 20px;
        cursor: pointer;
    }

    .advantage-cart {
        /* width: 302px; */
        box-sizing: border-box;
        padding: 20px 0px 20px;
        border-radius: 8px;
        background: #f5f8fa;
        position: relative;
        margin: 20px 10px;
    }
    .cool{
        width: 90%;
    }
    .ability-con{
        width: 90%;
    }
    .case-cart{
        width: 100%;
    }
    .case{
        width: 100%;
    }
    .case-info{
        width: 40%;
        padding:40px 40px 0px 40px ;
    }
    .case-cover{
        width: 60%;
    }

    /* 新闻推荐 */
    .news {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width:96%;
        margin: 40px auto 0px;
        position: relative;
        z-index: 9;
    }
     /* 优势和核心 */
    .advantage{
        width: 100%;
    }

   
    /* 行业解决方案 */
    .low-title.case-title {
        font-size: 48px;
        font-weight: 700;
        height: 60px;
        line-height: 48px;
        margin: 32px 0px 5px;
    }


    .create-title {
        font-size: 48px;
        color: #171A1D;
        font-weight: 700;
        text-align: center;
        line-height: 64px;
        margin-bottom: 40px;
    }

}


/* @media screen and (min-device-width: 1024px) and (max-device-width: 1366px) {


    html {
        font-size: 62.5%;
    }

    .top {
        width: 100%;
        height: 540px;
        background-image: url('../img/web/low/1.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        color: #FFFFFF;
        margin-top: 0px;
    }
    
    .top-con {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin: 0px auto;
        padding-top: 1px;
    }
    
    .top-left {
        display: inline-block;
        width: 35%;
        vertical-align: top;
        padding-top: 100px;
    }
    
    .top-title {
        line-height: 40px;
        font-size: 30px;
        color: #FFFFFF;
        text-shadow: 0 4px 24px rgb(20 57 94 / 60%);
        margin-left: 5rem;
    }
    
    .top-subtitle {
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: 10px;
        line-height: 18px;
        margin: 24px 0 60px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-left: 5rem;
    }
    
    .top-btn {
        display: flex;
        align-items: center;
        position: relative;
        
    }
    
    .top-btn .btn {
        width: 160px;
        height: 56px;
        line-height: 56px;
        border-radius: 6px;
        background: rgb(0, 137, 255);
        padding: 0px;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: 700;
        border: 1px solid rgb(0, 137, 255);
        margin-left: 5rem;
    }
    
    .top-btn .btn:hover {
        background: rgb(51, 160, 255);
    }
    
    .top-btn .btn:nth-child(2) {
        background: #FFFFFF;
        color: #171a1d;
        margin-left: 16px;
        border-color: #FFFFFF;
    }
    
    .top-btn .btn:nth-child(2):hover {
        color: rgb(0, 137, 255);
        border-color: rgb(0, 137, 255);
    }
    
    .btn-icon {
        width: 42px;
        height: 42px;
        margin-left: 20px;
        cursor: pointer;
    }
    
    .qrcode {
        padding: 10px 10px 5px;
        background: #FFFFFF;
        border-radius: 6px;
        position: absolute;
        top: 120%;
        transform: scale(0.8);
        opacity: 0;
        transition: all .5s;
        font-size: 18px;
        color: #888888;
        z-index: 1;
    }

    .top-right {
        display: inline-block;
        width: 485px;
        height: 285px;
        border: 10px solid #D8E9FF;
        border-radius: 12px;
        margin-top: 120px;
        position: relative;
        cursor: pointer;
        margin-right: 6rem;
    }
    
    .qrcode-img {
        width: 180px;
        height: 180px;
        margin-bottom: 5px;
    }

    .advantage-cart {
        box-sizing: border-box;
        padding: 20px 0px 20px;
        border-radius: 8px;
        background: #f5f8fa;
        position: relative;
        margin: 20px 10px;
    }

    .low-title.case-title {
        font-size: 48px;
        font-weight: 700;
        height: 60px;
        line-height: 48px;
        margin: 32px 0px 5px;
    }


    .create-title {
        font-size: 48px;
        color: #171A1D;
        font-weight: 700;
        text-align: center;
        line-height: 64px;
        margin-bottom: 40px;
    }

    .news{
        width: 100%;
    }

    .advantage{
        width: 100%;
    }

    .ability-con{
        width: 100%;
    }

    .case{
        width: 100%;
    }
    .case-cart{
        width: 100%;
    }

    .case-info {
        padding: 40px 40px 0px 40px;
    }

} */