@media (max-width: 768px) {

    /* .col-xs-超小屏幕 手机 (<768px)。 */
    /* 这里就是10/16x100%=62.5% 也就是默认10px的字号 */
    html {
        font-size: 62.5%;
    }

    .banner-box {
        width: 100%;
    }

    .case-list {
        width: 94%;
        height: 330px;
        margin-bottom: 2rem;
        cursor: pointer;
        padding: 36px 30px;
        border-radius: 10px;
        box-shadow: 0 8px 24px 0 rgba(34,38,48,.16);
        position: relative;
    }
    .case-list-title {
        padding-left: 18px;
        font-size: 20px;
        color: #111111;
        line-height: 70px;
        margin-top: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .banner-box .col-md-12,
    .banner-box .col-sm-12,
    .banner-box .col-xs-12 {
        padding: 0 !important;
    }

    /* 轮播图 */
    .focus {
        position: relative;
        margin: 0px auto;
        width: 100%;
        height: 22rem;
        border-radius: 0rem;
    }

    .focus ul {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 0rem;
    }

    .focus ul li {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: all 1.5s ease-in-out 0s;
        list-style: none;
    }

    .focus ul li img {
        width: 96%;
        height:auto;
        margin: 0 auto;
        border-radius: 6px;
    }

    .focus ul li .content-font-focus {
        position: absolute;
        bottom: 4rem;
        left: 30rem;
        text-align: center;
        color: white;
    }

    .focus ul li .content-font-focus h2 {
        margin-bottom: 0.5rem;
    }

    .focus ul li .content-font-focus p {
        font-size: 1.4rem;
    }

    .arrow-l,
    .arrow-r {
        /* display: none; */
        position: absolute;
        top: 8.8rem;
        /*margin-top: -20%;*/
        width: 3.4rem;
        height: 5.6rem;
        background: rgba(0, 0, 0, .2);
        text-align: center;
        line-height: 5rem;
        color: #fff;
        font-size: 2.2rem;
        /*左右按钮一直显示*/
        z-index: 100;
        text-decoration: none;
    }

    .arrow-l:hover,
    .arrow-r:hover {
        text-decoration: none;
        background: rgba(0, 0, 0, .3);
        color: #fff;
    }

    .arrow-l:focus,
    .arrow-r:focus {
        text-decoration: none;
        color: #fff;
    }


    .arrow-r {
        display: none;
        right: 2rem;
    }

    .arrow-1 {
        left: 1rem;
    }

    .arrow-left {
        display: none;
        left: 2rem;
    }

    .circle {
        display: none;
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translate(-50%, 0px);
        list-style: none;
        /*圆圈一直显示*/
        z-index: 100;
    }

    .circle li {
        float: left;
        /* width: 8px; */
        width: 2.2rem;
        /* height: 8px; */
        height: 2.2rem;
        /* border: 2px solid rgba(255,255,255,0.5); */
        margin: 0 0.5rem;
        background-color: rgb(255, 255, 255);
        color: #262626;
        text-align: center;
        line-height: 2.2rem;
        font-size: 1.2rem;
        border-radius: 0.2rem;
        /* border-radius: 50%; */
        /*鼠标经过显示小手*/
        cursor: pointer;
    }

    .circle .current {
        color: #fff;
        background-color: #609EE9;
    }

    /*给图片动态添加的堆叠顺序*/
    .active {
        opacity: 1;
        z-index: 10;
    }

    .focus-image {
        width: 100%;
        /* height: 100%; */
        border-radius: 0rem;

    }

    .focus-image-web{
        display: none;
    }

    .focus-image-rem{
        display: block;
    }

    .banner-inner-box {
        width: 100%;
        height: 22rem;
        /* background-color: red; */
        margin-top: 20px;
        /* border-radius: 10px; */
    }

    .bannner-content {
        width: 100%;
        padding: 3rem 0rem 0rem 0rem;
        /* margin: 0px auto;
        text-align: center; */
    }

    .banner-bottom-list {
        display: none;
        width: 228px;
        height: 6rem;
        margin: 0rem 0rem;
        /* object-fit:none; */
    }
    .banner-bottom-list-rem{
        display: block;
        width: 228px;
        height: 6rem;
        margin: 0rem auto;
    }

     /* 办公室计划 */
     .office-title {
        font-size: 2rem;
        font-weight: 600;
    }

    .office-text {
        width: 53%;
        font-size: 16px;
        margin-top: 10px;
    }

    /* 重磅产品 */
    .content {
        width: 100%;
        padding: 3rem 1rem;
        margin: 0rem auto;
        text-align: center;
    }

    .subtitle {
        font-size: 1.8rem;
        line-height: 2.4rem;
        color: #888888;
        margin-bottom: 3rem;
    }

    .dingding-title {
        margin-bottom: 3rem;
    }

    .pro-con {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .pro-list-rem {
        display: none;
    }

    .pro-list-title {
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 3rem;
        margin-top: 4.5rem;
    }

    .pro-list-line {
        width: 3.8rem;
        height: 0.1rem;
        background: #111111;
        margin: 1.3rem auto;
    }

    .pro-list-text {
        width: 100%;
        font-size: 1.4rem;
        line-height: 1.6rem;
        padding: 0rem 0.5rem;
    }

    .index-btn {
        width: 13.8rem;
        height: 3.8rem;
        line-height: 3.8rem;
        border: 1px solid #0089ff;
        border-radius: 0.6rem;
        font-size: 1.4rem;
        color: #0089ff;
        margin: 4rem auto 5rem;
        cursor: pointer;
        text-align: center;
    }

    /* 重磅产品-图片效果 */
    .box {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0px auto;
        flex-wrap: wrap;
    }

    .list.active {
        width: 48%;
        /* width: 0px; */
    }

    .list {
        width: 48%;
        /* height: 18rem; */
        cursor: pointer;
        margin: 1rem auto;
    }


    .center {
        background: #D1F3F4;
    }




    /* 5亿用户，2100万组织，都在用钉钉-视频 */
    .video {
        width: 96%;
        height: 28.9rem;
        margin: 0rem auto;
        cursor: pointer;
    }

    .title {
        /* font-size: 3rem; */
        /* line-height: 6.6rem; */
    }

    /* 解决方案 */
    .solve {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #111111;
    }

    .solve-list {
        display: inline-block;
        width: 90%;
        height: 28.25rem;
        /* margin-bottom: 30px; */
        padding: 4rem 0rem;
        cursor: pointer;
    }

    .solve-list-icon {
        width: 6rem;
        height: 6rem;
    }

    .solve-list-title {
        font-size: 2rem;
        line-height: 3.2rem;
        margin-top: 3rem;
    }

    .solve-list-text {
        font-size: 1.4rem;
        color: #888888;
    }

    .office-text {
        width: 100%;
    }


    /* 专业的团队 */
    .teams {
        width: 100%;
    }

    .teams-list {
        width: 90%;
        cursor: pointer;
        background-color: #fff;
        margin-bottom: 1.2rem;
        padding: 35px 30px 50px 30px;
        position: relative;
        height: 250px;
    }

    .teams-list:hover {
        box-shadow: 0px 0px 20px 0px rgba(196, 196, 196, 0.5)
    }

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

    .teams-list-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 20px;
        margin-left: 20px;
        /* object-fit: none; */
    }

    .teams-data {
        /* background-color: red;
        flex-direction:column;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap; */
        /* background-color: aqua; */
    }

    .teams-title {
        font-size: 1.6rem;
        margin-top: 1.4rem;
        position: absolute;
        left: 36%;
        top: 14%;
    }

    .teams-keywords {
        margin: 0.4rem 0 3rem 0;
        position: absolute;
        left: 36%;
        top: 30%;
    }

    .teams-description {
        text-align: left;
        line-height: 2rem;
        width: 90%;
        margin: 3rem 0rem 0rem 2rem;
    }

    a.teams-list:hover {
        text-decoration: none;
        color: #111111;
    }

    .teams-exhibition {
        position: absolute;
        top: 35px;
        left: 66%;
        width: 84px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #0089ff;
        border-radius: 6px;
        font-size: 14px;
        color: #0089ff;
        cursor: pointer;
    }

    .teams-btn {
        width: 138px;
        font-size: 14px;
        color: #0089ff;
        margin: 40px auto 0px;
        cursor: pointer;
    }

    /* 关于我们 */
    .about-inner {
        display: none;
    }

    /* 标杆客户 */
    .client-content {
        width: 100%;
        /* padding: 60px 0px; */
        margin: 0px auto;
        text-align: center;
        background-color: #F5F5F5;
        padding-bottom: 80px;
    }

    .client {
        width: 100%;
        margin: 0px auto;
    }

    .client-list-cover {
        width: 100%;
        /* height: 280px; */
    }

    .client-content .row,
    .client-content .col-md-12,
    .client-content .col-xs-12 {
        margin: 0;
        padding: 0;
    }
    .biaogan-title-rem{
        padding-top: 3rem;
    }

    /* 热门活动 */
    .activity-list {
        width: 320px;
        /* height: 188px; */
        cursor: pointer;
        /* padding: 36px 30px; */
        border-radius: 10px;
        margin: 2rem 1.2rem;
    }

    .how-list-title {
        font-size: 20px;
        line-height: 30px;
        padding: 0 0 20px 20px;
    }


    
    .hot-activity{
        width: 100%;
        height: 850px;
        background-color: #fff;
        width: 100%;
    }
    .hot-border{
        width: 100%;
        margin: 0 auto;
        height: 107%;
        /* background-color: #0000FF; */
        border:none;
        margin-top: 20px;
    }
    .iframe-index-index{
        width: 100%;
        position: relative;
    }
    .iframe-box-index{
        width: 100% !important;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translate(-50%,0);
    }
    
    


}


/* .col-sm-小屏幕 平板 (≥768px)。 */

/* .col-md-中等屏幕 桌面显示器 (≥992px)。 */
/* @media screen and (min-device-width: 768px) and (max-device-width: 992px) { */
@media screen and (min-device-width: 768px) and (max-device-width: 1366px) {

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

    .banner-box {
        width: 100%;
    }

    .case-list {
        width: 350px;
        height: 330px;
        margin-bottom: 2rem;
        cursor: pointer;
        padding: 36px 30px;
        border-radius: 10px;
        box-shadow: 0 8px 24px 0 rgba(34,38,48,.16);
        position: relative;
    }
    .case-list-title {
        padding-left: 18px;
        font-size: 22px;
        color: #111111;
        line-height: 70px;
        margin-top: 30px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* 轮播图 */
    .focus {
        position: relative;
        margin: 0px auto;
        width: 100%;
        height: 30rem;
        border-radius: 0rem;
    }

    .focus ul {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 0rem;
    }

    .focus ul li {
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 1;
        transition: all 1.5s ease-in-out 0s;
        list-style: none;
    }

    .focus ul li img {
        width: 100%;
        height: auto;
    }

    .focus ul li .content-font-focus {
        position: absolute;
        bottom: 4rem;
        left: 30rem;
        text-align: center;
        color: white;
    }

    .focus ul li .content-font-focus h2 {
        margin-bottom: 0.5rem;
    }

    .focus ul li .content-font-focus p {
        font-size: 1.4rem;
    }

    .arrow-l,
    .arrow-r {
        /* display: none; */
        position: absolute;
        top: 12.5rem;
        /*margin-top: -20%;*/
        width: 3.4rem;
        height: 5.6rem;
        background: rgba(0, 0, 0, .2);
        text-align: center;
        line-height: 5rem;
        color: #fff;
        font-size: 2.2rem;
        /*左右按钮一直显示*/
        z-index: 100;
        text-decoration: none;
    }

    .arrow-l:hover,
    .arrow-r:hover {
        text-decoration: none;
        background: rgba(0, 0, 0, .3);
        color: #fff;
    }

    .arrow-l:focus,
    .arrow-r:focus {
        text-decoration: none;
        color: #fff;
    }


    .arrow-r {
        right: 2rem;
        display: none;
    }

    .arrow-1 {
        left: 1rem;
    }

    .arrow-left {
        display: none;
        left: 2rem;
    }

    .circle {
        display: none;
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translate(-50%, 0px);
        list-style: none;
        /*圆圈一直显示*/
        z-index: 100;
    }

    .circle li {
        float: left;
        /* width: 8px; */
        width: 2.2rem;
        /* height: 8px; */
        height: 2.2rem;
        /* border: 2px solid rgba(255,255,255,0.5); */
        margin: 0 0.5rem;
        background-color: rgb(255, 255, 255);
        color: #262626;
        text-align: center;
        line-height: 2.2rem;
        font-size: 1.2rem;
        border-radius: 0.2rem;
        /* border-radius: 50%; */
        /*鼠标经过显示小手*/
        cursor: pointer;
    }

    .circle .current {
        color: #fff;
        background-color: #609EE9;
    }

    /*给图片动态添加的堆叠顺序*/
    .active {
        opacity: 1;
        z-index: 10;
    }

    .focus-image {
        width: 100%;
        /* height: 100%; */
        border-radius: 0rem;
    }

    .banner-inner-box {
        width: 100%;
        height: 22rem;
        /* background-color: red; */
        margin-top: 86px;
        /* border-radius: 10px; */
    }

    .bannner-content {
        width: 100%;
        padding: 15rem 0rem 0rem 0rem;
        /* margin: 0px auto;
        text-align: center; */
    }
    .banner-bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 50px;
    }
    

    .banner-bottom-list {
        display: none;
        width: 100%;
        height: 7.5rem;
        margin: 1rem 0rem;
    }
    .banner-bottom-list-rem{
        display: block;
        width: 228px;
        height: 6rem;
        margin: 0rem auto;
    }

    /* 重磅产品 */
    .content {
        width: 100%;
        padding: 3rem 1rem;
        margin: 0rem auto;
        text-align: center;
    }

    .subtitle {
        /* font-size: 1.8rem;
        line-height: 2.4rem;
        color: #888888; */
        margin-bottom: 3rem;
    }

    .pro-con {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .pro-list-title {
        font-size: 1.8rem;
        font-weight: 600;
        line-height: 3rem;
        margin-top: 4.5rem;
    }

    .pro-list-line {
        width: 3.8rem;
        height: 0.1rem;
        background: #111111;
        margin: 1.3rem auto;
    }

    .pro-list-text {
        width: 100%;
        font-size: 1.4rem;
        line-height: 1.6rem;
        padding: 0rem 0.5rem;
    }

    .index-btn {
        width: 13.8rem;
        height: 3.8rem;
        line-height: 3.8rem;
        border: 1px solid #0089ff;
        border-radius: 0.6rem;
        font-size: 1.4rem;
        color: #0089ff;
        margin: 4rem auto 5rem;
        cursor: pointer;
        text-align: center;
    }

    /* 重磅产品-图片效果 */
    .box {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 0px auto;
        flex-wrap: wrap;
    }

    .list.active {
        width: 48%;
        /* width: 0px; */
    }

    .list {
        width: 48%;
        /* height: 18rem; */
        cursor: pointer;
        margin: 1rem auto;
    }


    .center {
        background: #D1F3F4;
    }

    /* 如何用钉钉 */
    .how {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #111111;
        margin-top: 40px;
    }

    .how-list {
        /* width: 386px; */
        text-align: left;
        margin-bottom: 20px;
    }

    .how-list:hover {
        box-shadow: 0px 0px 20px 0px rgba(196, 196, 196, 0.5)
    }

    .how-list-video {
        width: 100%;
        cursor: pointer;
    }

    .how-list-text {
        font-size: 16px;
        color: #888888;
        line-height: 24px;
        margin-top: 30px;
        padding-left: 20px;
    }

    .how-list-title {
        font-size: 26px;
        line-height: 39px;
        padding: 0 0 20px 20px;
    }

   

    /* 5亿用户，2100万组织，都在用钉钉-视频 */
    .video {
        width: 96%;
        height: 28.9rem;
        margin: 0rem auto;
        cursor: pointer;
    }

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

    /* 解决方案 */
    .solve {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #111111;
    }

    .solve-list {
        display: inline-block;
        width: 90%;
        height: 28.25rem;
        /* margin-bottom: 30px; */
        padding: 4rem 0rem;
        cursor: pointer;
    }

    .solve-list-icon {
        width: 6rem;
        height: 6rem;
    }

    .solve-list-title {
        font-size: 2.4rem;
        line-height: 4.2rem;
        margin-top: 3rem;
    }

    .solve-list-text {
        font-size: 1.4rem;
        color: #888888;
    }

    .office-text {
        width: 100%;
    }


    /* 专业的团队 */
    .teams {
        width: 100%;
    }

    .teams-list {
        width: 48%;
        cursor: pointer;
        background-color: #fff;
        margin-bottom: 1.2rem;
        padding: 35px 10px 50px 10px;
        position: relative;
        height: 250px;
    }

    .teams-list:hover {
        box-shadow: 0px 0px 20px 0px rgba(196, 196, 196, 0.5)
    }

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

    .teams-list-avatar {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 20px;
        margin-left: 20px;
    }

    .teams-data {
        /* background-color: red;
        flex-direction:column;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap; */
        /* background-color: aqua; */
    }

    .teams-title {
        font-size: 1.6rem;
        margin-top: 1.4rem;
        position: absolute;
        left: 26%;
        top: 14%;
    }

    .teams-keywords {
        margin: 0.4rem 0 3rem 0;
        position: absolute;
        left: 26%;
        top: 30%;
    }

    .teams-description {
        text-align: left;
        line-height: 2rem;
        width: 90%;
        margin: 3rem 0rem 0rem 2rem;
    }

    a.teams-list:hover {
        text-decoration: none;
        color: #111111;
    }

    .teams-exhibition {
        position: absolute;
        top: 35px;
        left: 66%;
        width: 84px;
        height: 28px;
        line-height: 28px;
        border: 1px solid #0089ff;
        border-radius: 6px;
        font-size: 14px;
        color: #0089ff;
        cursor: pointer;
    }

    .teams-btn {
        width: 138px;
        font-size: 14px;
        color: #0089ff;
        margin: 40px auto 0px;
        cursor: pointer;
    }

    /* 关于我们 */
    .about-inner {
        display: none;
    }

    /* 标杆客户 */
    .client-content {
        width: 100%;
        /* padding: 30px 0px; */
        margin: 20px auto;
        text-align: center;
        background-color: #F5F5F5;
        padding-bottom: 80px;
    }

    .client {
        width: 100%;
        margin: 0px auto;
    }

    .client-list-cover {
        width: 100%;
        /* height: 280px; */
    }

    .client-content .row,
    .client-content .col-md-12,
    .client-content .col-xs-12 {
        margin: 0;
        padding: 0;
    }


    /* 预约咨询 */
    .hot-activity{
        width: 100%;
        height: 850px;
        background-color: #fff;
        width: 100%;
    }
    .hot-border{
        width: 100%;
        margin: 0 auto;
        height: 107%;
        /* background-color: #0000FF; */
        border:none;
        margin-top: 20px;
    }
    .iframe-index-index{
        width: 100%;
        position: relative;
    }
    .iframe-box-index{
        width: 100% !important;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translate(-50%,0);
    }

}