.example-box{padding:128px 0}
.example-box h3{font-size:36px;color:#2b2b2b;line-height:1.5em;text-align:center;margin-bottom:50px}
.example-list{margin-left:-2%}
.example-list li{float:left;width:31.3%;margin-left:2%;margin-bottom:36px;box-shadow:0 5px 25px rgba(0,0,0,.1);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.example-list li .pic{display:block;display:block;width:100%;height:0;overflow:hidden;position:relative;padding-top:50.4%}
.example-list li .pic img{position:absolute;left:0;top:0;width:100%;transition:all .3s ease-out;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out}
.example-list li .info{background:#fff;padding:25px 30px 45px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.example-list li .info .tit{display:block;font-size:20px;color:#2b2b2b;line-height:30px;height:60px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;margin-bottom:10px}
.example-list li .info .date{display:block;font-size:14px;color:#666;line-height:24px;margin-bottom:16px}
.example-list li .info p{font-size:14px;color:#666;line-height:24px;height:48px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.example-list li:hover{box-shadow:0 10px 35px rgba(0,0,0,.4)}
.example-list li:hover .pic img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}
.example-list li:hover .info{background:url(../images/info-bg.jpg) no-repeat center;-webkit-background-size:cover;-moz-background-size:cover;-ms-background-size:cover;-o-background-size:cover;background-size:cover}
.example-list li:hover .tit{color:#fff}
.example-list li:hover .date{color:#fff}
.example-list li:hover p{color:#fff}
@media only screen and (max-width:1279px){
.example-box{padding:120px 0 80px}
}
@media only screen and (max-width:959px){
.example-box{padding:60px 0 40px}
.example-list li{width:100%}
.example-list li .info{padding:15px 20px 25px}
}
@media only screen and (max-width:767px){
.example-box h3{font-size:28px}
.example-list li .info{padding:10px 10px 15px}
.example-list li .info .tit{font-size:16px}
.example-list li .info .date{font-size:12px;margin-bottom:6px}
.page-box{margin-top:0}
}