section.clients {
    background: url(../Images/wallpaper_platform.jpg) 50% 90%;
}

.clients .box {
    position: relative;
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -ms-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
}

.clients .box .caption {
    width: 100%;
    text-align: center;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all .5s ease-in-out 0s;
    -moz-transition: all .5s ease-in-out 0s;
    -ms-transition: all .5s ease-in-out 0s;
    -o-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
}

.clients.active .box .caption {
    -moz-opacity: 1;
    opacity: 1;
}

.clients .box .caption i {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 299px;
    height: 37px;
    background: url(../Images/words.png) no-repeat -152px -528px;
}

.clients .box .caption span {
    font-size: 27px;
    padding-left: 10px;
    letter-spacing: 5px;
    color: white;
}

.clients .box ul.items {
    margin: 0 auto;
    margin-top: 45px;
    width: 1155px;
    height: 450px;
    font-size: 0;
    overflow: hidden;
}

.clients .box ul.items li {
    position: relative;
    padding: 0;
    width: 230px;
    height: 150px;
    overflow: hidden;
    z-index: 10;
}

.clients .box ul.items li.cctv {
    top: 600px;
    background: url(../Images/clients-new.png) no-repeat -49px -78px;
    margin-right: 60px;
    margin-bottom: 10px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.cctv.active {
    background: url(../Images/clients-new.png) no-repeat -49px -244px;
}

.clients.active .box ul.items li.cctv {
    top: 0px;
}

.clients .box ul.items li.unicom {
    top: -400px;
    background: url(../Images/clients-new.png) no-repeat -325px -78px;
    margin-right: 60px;
    margin-bottom: 10px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.unicom.active {
    background: url(../Images/clients-new.png) no-repeat -325px -244px;
}

.clients.active .box ul.items li.unicom {
    top: 0px;
}

.clients .box ul.items li.tsinghua {
    top: 600px;
    background: url(../Images/clients-new.png) no-repeat -590px -78px;
    margin-right: 60px;
    margin-bottom: 10px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.tsinghua.active {
    background: url(../Images/clients-new.png) no-repeat -590px -244px;
}

.clients.active .box ul.items li.tsinghua {
    top: 0px;
}

.clients .box ul.items li.cas {
    top: -400px;
    background: url(../Images/clients-new.png) no-repeat -860px -78px;
    margin-bottom: 10px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.cas.active {
    background: url(../Images/clients-new.png) no-repeat -860px -244px;
}

.clients.active .box ul.items li.cas {
    top: 0px;
}

.clients .box ul.items li.sipo {
    top: 600px;
    background: url(../Images/clients-new.png) no-repeat -1126px -78px;
    margin-right: 60px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.sipo.active {
    background: url(../Images/clients-new.png) no-repeat -1126px -244px;
}

.clients.active .box ul.items li.sipo {
    top: 0px;
}

.clients .box ul.items li.apple {
    top: 450px;
    background: url(../Images/clients-new.png) no-repeat -1390px -78px;
    margin-right: 60px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.apple.active {
    background: url(../Images/clients-new.png) no-repeat -1390px -244px;
}

.clients.active .box ul.items li.apple {
    top: 0px;
}

.clients .box ul.items li.das {
    top: -550px;
    background: url(../Images/clients-new.png) no-repeat -1660px -78px;
    margin-right: 60px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.das.active {
    background: url(../Images/clients-new.png) no-repeat -1660px -244px;
}

.clients.active .box ul.items li.das {
    top: 0px;
}

.clients .box ul.items li.hunantv {
    top: 450px;
    background: url(../Images/clients-new.png) no-repeat -1920px -78px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.hunantv.active {
    background: url(../Images/clients-new.png) no-repeat -1920px -244px;
}

.clients.active .box ul.items li.hunantv {
    top: 0px;
}

.clients .box ul.items li.sino {
    top: -550px;
    background: url(../Images/clients.png) no-repeat -1840px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.sino.active {
    background: url(../Images/clients.png) no-repeat -1840px -150px;
}

.clients.active .box ul.items li.sino {
    top: 0px;
}

.clients .box ul.items li.report {
    top: 450px;
    background: url(../Images/clients.png) no-repeat -2070px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.report.active {
    background: url(../Images/clients.png) no-repeat -2070px -150px;
}

.clients.active .box ul.items li.report {
    top: 0px;
}

.clients .box ul.items li.gedu {
    top: 300px;
    background: url(../Images/clients.png) no-repeat -2300px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.gedu.active {
    background: url(../Images/clients.png) no-repeat -2300px -150px;
}

.clients.active .box ul.items li.gedu {
    top: 0px;
}

.clients .box ul.items li.bgg {
    top: -700px;
    background: url(../Images/clients.png) no-repeat -2530px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.bgg.active {
    background: url(../Images/clients.png) no-repeat -2530px -150px;
}

.clients.active .box ul.items li.bgg {
    top: 0px;
}

.clients .box ul.items li.bsec {
    top: 300px;
    background: url(../Images/clients.png) no-repeat -2760px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.bsec.active {
    background: url(../Images/clients.png) no-repeat -2760px -150px;
}

.clients.active .box ul.items li.bsec {
    top: 0px;
}

.clients .box ul.items li.huadan {
    top: -700px;
    background: url(../Images/clients.png) no-repeat -2990px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.huadan.active {
    background: url(../Images/clients.png) no-repeat -2990px -150px;
}

.clients.active .box ul.items li.huadan {
    top: 0px;
}

.clients .box ul.items li.zd {
    top: 300px;
    background: url(../Images/clients.png) no-repeat -3220px 0px;
    -webkit-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    -ms-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

.clients .box ul.items li.zd.active {
    background: url(../Images/clients.png) no-repeat -3220px -150px;
}

.clients.active .box ul.items li.zd {
    top: 0px;
}

.clients .box ul.items li.r {
    border-right: 0px dotted #ddd;
}

.clients .box ul.items li.b {
    /*border-bottom: 1px dotted #ddd;*/
}

.clients .box ul.items li span {
    position: absolute;
    bottom: -30px;
}

.clients .box ul.items li.bg.all {
    position: absolute;
    width: 1155px;
    height: 450px;
    /*background-color: White;*/
    -moz-opacity: 0.3;
    opacity: 0.3;
    filter: alpha(opacity=30);
}

.clients .box ul.items li.bg.one {
    position: absolute;
    /*background: #eee;*/
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=50);
    -webkit-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -ms-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    display: none;
}

.clients .box ul.mini {
    display: none;
}


@media (min-width: 1921px),(min-height: 1201px) {
    section.clients {
        -moz-background-size: cover;
        background-size: cover;
    }
}

@media (max-width: 1280px) and (max-height: 800px) {
    section.clients {
        background: url(../Images/wallpaper4_h800.jpg) 50% 90%;
    }
}

@media (max-width: 960px) and (max-height: 600px) {
    section.clients {
        background: url(../Images/wallpaper4_h600.jpg) 50% 90%;
    }
}

@media (max-width: 1150px) {
    .clients .box ul.items {
        width: 924px;
    }

    .clients .box ul.items li.bg.all {
        width: 924px;
    }
}

@media (max-width: 920px) {
    .clients .box ul.items {
        width: 693px;
    }

    .clients .box ul.items li.bg.all {
        width: 693px;
    }
}

@media (max-width: 690px) {
    .clients .box ul.items {
        width: 462px;
    }

    .clients .box ul.items li.bg.all {
        width: 462px;
    }
}

@media (min-width: 471px) and (max-height: 720px) {
    .clients .box ul.items {
        height: 300px;
    }

    .clients .box ul.items li.bg.all {
        height: 300px;
    }
}

@media (min-width: 471px) and (max-height: 580px) {
    .clients .box ul.items {
        height: 150px;
    }

    .clients .box ul.items li.bg.all {
        height: 150px;
    }
}

@media (min-width: 471px) and (max-height: 450px) {
    .clients .box .swiper-container.items {
        margin-top: 40px;
    }

    .clients .box .caption i {
        display: none;
    }
}

@media (min-height: 920px) {
    .clients .box {
        margin-top: -80px;
    }
}

@media (max-width: 690px) and (max-height: 380px),(max-width: 620px) and (max-height: 480px),(max-width: 470px) {
    .clients .box ul.items {
        display: none;
    }

    .clients .box ul.mini {
        display: block;
        position: relative;
        margin: 0 auto;
        margin-top: 30px;
        width: 500px;
        height: 550px;
        overflow: hidden;
    }

    .clients .box ul.mini li {
        position: relative;
        float: left;
        width: 200px;
        padding: 8px 0 8px 40px;
        background: url(../Images/point.png) no-repeat 20px 15px;
        z-index: 20;
    }

    .clients .box ul.mini li.bg.all {
        position: absolute;
        width: 500px;
        height: 560px;
        list-style: none;
        background-color: White;
        -moz-opacity: 0.5;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

    .clients .box ul.mini li.bg.one {
        display: none;
    }
}

@media (max-width: 560px) and (max-height: 480px),(max-width: 470px) {
    .clients .box ul.mini {
        width: 250px;
    }

    .clients .box ul.mini li.bg.all {
        width: 250px;
    }
}

@media (max-width: 470px) and (max-height: 800px) {
    .clients .box ul.mini {
        height: 440px;
    }

    .clients .box ul.mini li.bg.all {
        height: 440px;
    }
}

@media (max-width: 470px) and (max-height: 700px) {
    .clients .box ul.mini {
        height: 330px;
    }

    .clients .box ul.mini li.bg.all {
        height: 330px;
    }
}

@media (max-width: 560px) and (max-height: 600px) {
    .clients .box ul.mini {
        height: 260px;
    }

    .clients .box ul.mini li.bg.all {
        height: 260px;
    }
}

@media (max-width: 690px) and (max-height: 520px) {
    .clients .box ul.mini {
        margin-top: 15px;
    }

    .clients .box .caption i {
        display: none;
    }
}

@media (max-width: 690px) and (max-height: 430px) {
    .clients .box ul.mini {
        height: 150px;
    }

    .clients .box ul.mini li.bg.all {
        height: 150px;
    }
}

@media (max-width: 690px) and (max-height: 420px) {
    .clients .box ul.mini {
        height: 110px;
    }

    .clients .box ul.mini li.bg.all {
        height: 110px;
    }
}

@media (max-width: 690px) and (max-height: 300px) {
    .clients .box ul.mini {
        margin-top: 5px;
    }
}

@media (max-width: 400px) {
    .clients .box .caption i {
        display: none;
    }
}