.case-list div{width:206px;float:left;height:400px;margin:4px ;overflow: hidden; position: relative;}
.case-list div span,.case-list div b{display: block;text-align: center;color:#fff;margin:20px 0 10px 0}
.case-list div span{font-size:20px;line-height:32px;}
.case-list div span:after{content: '';display: block;width:50px;height:3px; background: #fff;margin:10px auto}
.case-list div p{display: block;color:#fff;width:144px;margin:15px auto;text-align: center;line-height:28px;font-size: 16px;}
.case-list div a{display: block;padding-top:120px;transition: all .6s;}
.case-list div:after{content: '';display: block;width:2px;height:0; position: absolute;right:10px; background: #fff;top:10px;transition: all .4s;}
.case-list div:before{content: '';display: block;width:2px;height:0; position: absolute;left:10px; background: #fff;bottom:10px;transition: all .4s;}
.case-list div a:after{content: '';display: block;height:2px;width:0; position: absolute;right:10px; background: #fff;top:10px;transition: all .4s;}
.case-list div a:before{content: '';display: block;height:2px;width:0; position: absolute;right:10px; background: #fff;bottom:10px;transition: all .4s;}
.case-list div p{ position: relative;top:180px; opacity: 0;transition: all .6s;}
.case-list div:hover a{padding-top:60px;}
.case-list div:hover p{ opacity:1;top:0px; }
.case-list div:hover a{background: rgba(11,63,73,0.7);height:400px;width:206px;display: block;}
.case-list div:hover:after{height:380px;}
.case-list div:hover:before{height:380px;}
.case-list div a:hover:after{width:270px;}
.case-list div a:hover:before{width:270px;}
.case-list div b img{transition: all 4s;}
.case-list div:hover b img{transform:rotate(360deg);}
.more{width:180px;height:45px;border:2px solid #0451A3;text-indent:42px; background: url(../images/more.png) no-repeat center right 40px;line-height:45px;margin:50px auto;transition: all .4s;}
.more a{font-size:15px;color:#0451A3;display: block;}
.more:hover{background: url(../images/more.png) no-repeat center right 30px;}
/*解决方案*/