.content-item {
    display: none;
}

.content-item.active {
    display: block;
}

.case .mobile-row .mobile-bg .mobile-qr img{
    width: 207px;
    height: 207px;
}

.case .mobile-row .mobile-bg .mobile-qr{
    position: absolute;
    width: 208px;
    height: 208px;
    z-index: -1;
    top: 138px;
    left: 50%;
    margin-left: -103px;
    -webkit-transform: scale(.3);
    -moz-transform: scale(.3);
    -ms-transform: scale(.3);
    -o-transform: scale(.3);
    transform: scale(.3);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.case .mobile-row .mobile-bg:hover .mobile-qr, .case .mobile-row .mobile-bg:focus .mobile-qr, .case .mobile-row .mobile-bg:active .mobile-qr {
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 2;
    height: 370px;
    top: 57px;
    background-color: #fff;
}

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

    .swiper-container {
        width: 100%;
    }

    .funImgWrapper .swiper-slide{
        width: 260px
    }

    .swiper-container .swiper-wrapper img {
        width: 100%;
    }

    .swiper-pagination-bullet {
        width: 24px;
        height: 6px;
        background: #e9e9e9;
        border-radius: 0;
    }

    .funSwiper {
        margin-top: 50px;
        height: 60px;
        line-height: 60px;
    }

    .funSwiper .swiper-slide {
        /*padding-right: 56px;*/
        width: auto !important;
    }

    .funSwiper .fun-menu-item {
        font-size: 24px;
        color: #7d7d7d;
        cursor: pointer;
    }

    .funSwiper .fun-menu-item.active {
        color: #21bbc7;
        padding-bottom: 13px;
        border-bottom: 2px solid #21bbc7;
    }

    .fun-container {
        position: relative;
    }


    .fun-container .swiper-button-prev {
        position: absolute;
        top: 400px;
        width: 40px;
        height: 40px;
        left: 0;
        background: url("../../../../../../template/mobile/default/static/img/arrow_left.png") no-repeat center;
        background-size: 100%;
    }

    .fun-container .swiper-button-next {
        position: absolute;
        top: 400px;
        width: 40px;
        height: 40px;
        right: 0;
        background: url("../../../../../../template/mobile/default/static/img/arrow_right.png") no-repeat center;
        background-size: 100%;
    }

    /***
    case
    ***/
    .case-cate-list {
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }

    .case-cate-item {
        min-width: 118px;
        height: 50px;
        line-height: 50px;
        margin: 0 0 16px 25px;
        float: left;
        background: #fff;
        text-align: center;
        font-size: 20px;
        color: #7d7d7d;
        border: 1px solid #e2e2e2;
        border-radius: 8px;
        cursor: pointer;
        padding: 0 10px;
    }

    .case-cate-item.active {
        color: #fff;
        background: #21bbc7;
    }

    .case .mobile-row {
        margin-top: 64px;
        margin-left: 20px;
    }

    .case .mobile-bg {
        /*float: left;*/
        width: 240px;
        height: 484px;
        margin: 0 50px 30px 0;
        background: url("../../../../../../template/mobile/default/static/img/mobile_bg.png") no-repeat center;
        background-size: 100% 100%;
        position: relative;
        display: inline-block;
    }

    .case .mobile-bg img {
        position: absolute;
        width: 208px;
        height: 370px;
        top: 56px;
        left: 50%;
        margin-left: -103px;
    }

    .case .more-case {
        width: 146px;
        height: 48px;
        margin: 50px auto 0px;
        line-height: 48px;
        text-align: center;
        color: #21bbc7;
        border: 1px solid #21bbc7;
        border-radius: 24px;
        cursor: pointer;
    }

    .case .no-more-case {
        color: #c2c2c2;
        border: 1px solid #c2c2c2;
    }

}

@media screen and (max-width:767px){

    .open-image{
        display: none!important;
    }

    .open-image img{
        display: none!important;
    }

    .breadcrumb{
        /* background-color: white; */
        font-size: 16px;
        /* margin-top: 1rem; */
    }

    /* 部分元素隐藏 */
    #newBridge #nb_toolbar_wrap,#service,.right-tool-bar,#myroundabout,.trends p,.btn-register,.login,.functionImage-2,.btn-detail,.swiper-button-prev,.swiper-button-next,.more-case,.btn-intro,.news-item .content,.pageviews,.app-center-container .col-lg-9>h3,.app-center-container .col-lg-3>h3,.amap-logo,.amap-copyright,.core .center,.functionLeft div,.functionRight div,.dev,.dev-2{
        display: none!important;
    }

    /* 首页功能介绍 */
    .fun-container{
        margin-top: 1rem;
        background-color: white;
    }

    .fun-container .funSwiper{
        height: 5rem;
        line-height: 5rem;
        text-align: center;
        color: #7D7D7D;
        font-size: 16px;
        border-bottom: 1px solid #EEEEEE;
    }

    .fun-container .funSwiper .active{
        display: inline-block;
        height: 100%;
        color: #21bbc7;
        border-bottom: 1px solid #21bbc7;
    }

    .fun-container .funImgSwiper{
        width: 100%!important;
        margin: 3rem 0!important;
    }

    .fun-container .funImgSwiper .swiper-slide{
        width: 25rem!important;
        margin-right: 2rem!important;
        margin-left: 0.5rem;
        padding-right: 1rem;
        padding-bottom: 1rem;

    }
    
    .swiper-slide img{
        width: 100%;
        height: 100%;
        box-shadow: 12px 8px 21px rgba(0,0,0,0.3);
    }
    
    .fun-container .funSwiper .swiper-slide{
        margin-right: 1rem!important;
        width: 7rem;
    }
    /* 他们都在用 */
    .case{
        margin-top: 1rem!important;
        width: 100%;
        padding: 0;
        padding-bottom: 4rem;
    }

    .case h2{
        text-align: center;
    }

    .case .case-cate-list{
        list-style: none;
        padding: 0;
        width: 100%;
        background-color: #F7F7F7;
        padding-left: 4%;
        padding-bottom: 4%;
        display: none;
    }

    .case .case-cate-item{
        width: 19.5%;
        margin: 4% 4% 0 0;
        height: 4rem;
        line-height: 4rem;
        display: inline-block;
        text-align: center;
        background-color: white;
        border: 1px #E2E2E2 solid;
        border-radius: 0.5rem;
        z-index: 5;
    }

    .case-cate-list .active{
        background-color: #21bbc7;
        color: white;
        border: 1px #21bbc7 solid;
    }

    .drop{
        margin: 0 auto 1rem;
        width: 6rem;
        font-size: 18px;
        color: #999;
    }
    
    .drop-btn{
        display: inline-block;
        height: 1.2rem;
        width: 1.8rem;
        background: url("../../../../../../template/mobile/default/static/img/drop.png") no-repeat center;
        background-size: 100% 100%;
    }
    
    .case .row{
        margin: 0 auto;
    }
    .case .mobile-bg{
        margin-left: 3%;
        margin-bottom: 5%;
        width: 45%;
        height: 30rem;
        background: url("../../../../../../template/mobile/default/static/img/mobile_bg.png") no-repeat center;
        background-size: 100% 100%;
        display: none;
    }

    .case .mobile-bg:first-child{
        display: inline-block;
    }

    .case .mobile-bg:nth-child(2){
        display: inline-block;
    }

    .case .mobile-bg img{
        margin-top: 25%;
        margin-left: 7.5%;
        width: 85.5%;
        height: 76.5%;
    }

    .case .more-case-2{
        width: 15rem;
        height: 5rem;
        border: 1px solid #21bbc7;
        color: #21bbc7;
        border-radius: 3rem;
        line-height: 5rem;
        text-align: center;
        margin: 2rem auto;
    }

}