@charset "utf-8";


#cases{margin: 0 auto; padding: 100px 0;}
#cases .display{margin:  0 auto;}
#cases .toolbar{ margin: 0 auto;}
#cases .toolbar>div{ float: left; width: 22.75%; margin-right: 3%;}
#cases .toolbar>div:last-child{margin-right: 0;}
#cases .toolbar>.search{display: inline-flex; align-content: center; align-items: center; justify-content: space-between; border-radius: 2px; border: 1px solid #e6e6e6;}
#cases .toolbar>.search>input{display: inline-block; flex: 1;width: 76%; height: 50px; line-height: 50px; border: 0; font-size: 1.4rem; color: #333;padding: 0 10px;}
#cases .toolbar>.search>a{display: inline-block; width: 50px; color: #333; height: 50px; line-height: 50px; transition: all .35s;}
#cases .toolbar>.search>a i{display: inline-block; font-size: 2rem;}
#cases .toolbar>.search>a:hover{color: #0758ab;}
#cases .toolbar .layui-input, .layui-select, .layui-textarea{height: 52px!important;}
#cases .toolbar .layui-form-select dl { top: 59px;border-radius: 0!important;}
#cases .toolbar .layui-form-selectup dl {top: auto; bottom: 59px;}
#cases .toolbar .layui-form-select dl dd.layui-this { position: relative; background-color: #f3f3f3!important; color: #0758ab!important;}
#cases .toolbar .layui-form-select dl dd.layui-this:after{position: absolute;z-index: 10; right: 10px; top: 50%; transform: translateY(-50%); width: 20px;height: 20px; line-height: 20px; color: #0758ab; text-align: center; font-family: iconfont; font-size: 1.6rem; content: '\e6b5';}
#cases .toolbar>a{display: block; height: 52px; line-height: 52px; background: #0758ab; font-size: 1.8rem; color: #fff;text-align: center; transition: all .35s;}
#cases .toolbar .layui-anim::-webkit-scrollbar {width:5px;height: 5px;}
#cases .toolbar .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#0758ab;}
#cases .toolbar .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}


#cases .lists{margin: 0 auto; padding: 50px 0;}
#cases .lists>ul{margin: 0 auto;}
#cases .lists>ul>li{ position: relative; display: block; float: left; width: 31.33%;margin-right: 3%; margin-bottom: 3%;overflow: hidden; border-radius: 3px; transition: all .35s; }
#cases .lists>ul>li:nth-child(3n){margin-right: 0;}
#cases .lists>ul>li:after{position: absolute;z-index: 12; right: 20px;bottom: 0; width: 40px;height: 40px; line-height: 40px; text-align: center; opacity: 0;  border-radius: 3px;background: rgba(7,88,171,1); font-family: iconfont; font-size: 1.8rem; color: #fff; content: '\e6a9'; transition: all .35s;}
#cases .lists>ul>li a{display: block;}
#cases .lists>ul>li a>.img{overflow: hidden;}
#cases .lists>ul>li a>.img>img{ width: 100%;height: auto;object-fit: cover; transition: all 1s;}
#cases .lists>ul>li a>.box{ position: relative; box-sizing: border-box;padding: 30px; text-align: left;margin: 0 auto; background: #f7f7f7; transition: all .35s;}
#cases .lists>ul>li a>.box>.title{padding: 0; height: 52px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 2rem; font-weight: bold; color: #333; transition: all .35s;}
#cases .lists>ul>li a>.box>.info{padding: 20px 0; height: 105px; margin: 0 auto;}
#cases .lists>ul>li a>.box>.info>.rows{ display: flex; align-items: center;align-content: center; justify-content: flex-start; margin-bottom: 10px;}
#cases .lists>ul>li a>.box>.info>.rows>i{display: inline-block; font-size: 2rem; color: #999; margin-right: 10px;}
#cases .lists>ul>li a>.box>.info>.rows>span{display: inline-block; font-size: 1.6rem; color: #666;}
#cases .lists>ul>li:hover{box-shadow: 0 0 20px rgba(0,0,0,.1);}
#cases .lists>ul>li:hover:after{opacity: 1; bottom: 20px;}
#cases .lists>ul>li:hover .box>.title{color: #0758ab;}
#cases .lists>ul>li:hover .box{background: #fff;}
#cases .lists>ul>li:hover .img>img{transform: scale(1.1);}



#cases>.view{ margin: 0 auto;}
#cases>.view .wrap{max-width: 1400px;}
#cases>.view {margin: 0 auto; padding: 50px 0;}
#cases>.view .title{ width: 82%; font-size: 4rem; font-weight: bold;color: #333; padding-bottom: 30px;}
#cases>.view .picture{width: 100%; position: relative;}
#cases>.view .picture>.show{ width: 82%; box-sizing: border-box;overflow: hidden;border-radius: 5px;}
#cases>.view .picture>.show .swiper{ width:100%; height:100%; margin: 0 auto;overflow: visible!important;}
#cases>.view .picture>.show .swiper-slide{ position: relative; text-align: center; margin: 0 auto;}
#cases>.view .picture>.show .swiper-slide>a{ position: relative;z-index: 100; display: block;}
#cases>.view .picture>.show .swiper-slide>a:after{position: absolute;z-index: 90; top: 0;left: 0; width: 100%;height: 100%; background: url("../img/mask.png") no-repeat; background-position: 50% 50%; content: '';}
#cases>.view .picture>.show .swiper-slide>a>img{max-width: 100% !important; vertical-align: center;}
#cases>.view .picture>.show .swiper-slide .play{ position: absolute;z-index: 50; left: 0;top: 50%; transform: translateY(-50%); width: 100%;}
#cases>.view .picture>.show .swiper-slide .play>iframe{ width: 100%; height: 450px; margin: 0 auto;}
#cases>.view .picture>.show .swiper-pagination{ display:none; text-align:center; position:relative; bottom:0; padding-top: 10px;}
#cases>.view .picture>.show .swiper-pagination .swiper-pagination-bullet {width: 30px;height: 2px;margin:0 3px;}
#cases>.view .picture>.show .swiper-pagination .swiper-pagination-bullet-active{background:#666; width: 40px;}
#cases>.view .picture>.thumbs{position:absolute; right: 0;top: 0; width: 150px; height: 100%;}
#cases>.view .picture>.thumbs>.swiper{ width:100%; height: 100%;overflow: hidden;}
#cases>.view .picture>.thumbs>.swiper .swiper-slide{border:5px solid #ddd; border-radius: 5px; overflow: hidden; cursor: pointer; box-sizing:border-box;}
#cases>.view .picture>.thumbs>.swiper img{width:auto;height:100%;box-sizing:border-box; object-fit: cover; transition: all .6s;}
#cases>.view .picture>.thumbs>.swiper .swiper-slide-thumb-active{border-color: #0758ab;}
#cases>.view .picture>.thumbs>.swiper img:hover {transform: scale(1.1);}

#cases>.view .introduce{margin: 0 auto; padding: 50px 0;}
#cases>.view .introduce>.theme{width: 24%;text-align: left; padding-top: 35px;}
#cases>.view .introduce>.theme>h3{display: inline-block; font-size: 2.8rem; color: #333;}
#cases>.view .introduce>.content{width: 76%; text-align: left;}
#cases>.view .introduce>.content>.rows{display: inline-block; float: left; width: 48%; padding: 20px 0; border-bottom: 1px solid #eee;}
#cases>.view .introduce>.content>.rows.w100{display: block; float: none; clear: both; width: 100%;}
#cases>.view .introduce>.content>.rows:nth-child(even){ float: right;}
#cases>.view .introduce>.content>.rows>.title{ padding: 15px 0; font-size: 1.6rem; font-weight: normal; color: #999;}
#cases>.view .introduce>.content>.rows>.text{ height: 36px; font-size: 1.6rem; color: #333;}
#cases>.view .introduce>.content>.rows.w100>.text{height: auto;}

#cases>.view .details{margin: 0 auto; padding: 50px 0;}
#cases>.view .details>.item{margin: 0 auto 50px auto; }
#cases>.view .details>.item>.theme{width: 24%;text-align: left; }
#cases>.view .details>.item>.theme>h3{display: inline-block; font-size: 2.8rem; color: #333;}
#cases>.view .details>.item>.content{width: 76%; text-align: left;border-bottom: 1px solid #eee; padding-bottom: 50px;}
#cases>.view .details>.item:last-child>.content{ border-bottom: 0;}
#cases>.view .details>.item>.content>.text{font-size: 1.6rem; color: #666; line-height: 2.4rem;}
#cases>.view .details>.item>.content>.text>p{margin-bottom: 20px;}

#cases>.view .pageurl{margin: 0 auto;text-align: center; padding: 60px 0;}
#cases>.view .pageurl>a{display: inline-flex; align-items: center; align-content: center; justify-content: center; height: 50px; border: 2px solid #eee; padding: 0 30px;font-size: 1.6rem; margin: 0 20px; transition: all .35s;}
#cases>.view .pageurl>a>i{display: inline-block; font-size: 2rem; color: #999;}
#cases>.view .pageurl>a>span{display: inline-block;margin: 0 6px;}
#cases>.view .pageurl>a:hover{color: #fff; background: #0758ab;  border-color: #0758ab; box-shadow: 0 0 20px rgba(0,0,0,.1);}
#cases>.view .pageurl>a:hover i{color: rgba(255,255,255,.6);}


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

    #cases .lists>ul>li a>.box>.title{height: 42px; font-size: 1.8rem; }

    #cases>.view .title{ width: 100%; font-size: 3rem;}
    #cases>.view .picture>.show{ width: 100%; float: none;}
    #cases>.view .picture>.show .swiper-pagination{ display:block;}
    #cases>.view .picture>.thumbs{ width: 0; height: 0;opacity: 0;}
    #cases>.view .introduce>.theme{width: 100%; float: none; padding-top: 0;}
    #cases>.view .introduce>.content{width: 100%; float: none;}

    #cases>.view .details>.item>.theme{width: 100%; float: none;}
    #cases>.view .details>.item>.content{width: 100%; float: none;padding-top: 35px;}



}

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


    #cases .toolbar>div{ width: 49%; margin-right: 0; margin-bottom: 2%;}
    #cases .toolbar>div:nth-child(even){float: right;}

    #cases .lists{padding: 30px 0;}
    #cases .lists>ul>li{ width: 48.5%;margin-right: 0;}
    #cases .lists>ul>li:nth-child(even){ float: right;}
    #cases .lists>ul>li a>.box>.info>.rows>span{font-size: 1.5rem;}



}

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

    #cases .toolbar>div{ float: none; width: 100%; margin-right: 0; margin-bottom: 2%;}
    #cases .toolbar>div:nth-child(even){float: none;}

    #cases .lists>ul>li:after{width: 32px;height: 32px; line-height: 32px;}






    #cases>.view .title{ font-size: 2.4rem;}

    #cases>.view .introduce>.theme>h3 { font-size: 2rem;}
    #cases>.view .introduce>.content>.rows {  display: block;  float: none;  width: 100%;}
    #cases>.view .introduce>.content>.rows:nth-child(even){float: none;}
    #cases>.view .details{padding-top: 0;}
    #cases>.view .details>.item>.theme>h3 { font-size: 2rem;}

    #cases>.view .pageurl>a{height: 40px; font-size: 1.4rem;}
    #cases>.view .pageurl>a>i{font-size: 1.8rem;}

}


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


    #cases{ padding: 50px 0;}
    #cases .lists>ul>li{ width: 100%; margin-bottom: 30px; margin-right: 0;}
    #cases .lists>ul>li:nth-child(even){ float: none;}


    #cases>.view .pageurl{padding: 0;}
    #cases>.view .pageurl>a{display: flex;margin: 0 0 20px 0;}





}