.adbox{margin-top:20px;}

.card {
  position: relative;
  display: block;
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
  box-shadow: 0 1px 2px rgba(0,0,0,.075);
  -webkit-transition: all .5s cubic-bezier(.175,.885,.32,1);
  -o-transition: all .5s cubic-bezier(.175,.885,.32,1);
  transition: all .5s cubic-bezier(.175,.885,.32,1);
}

.card .card-heading {
  display: block;
  padding: 10px;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .card-content
{
  padding: 0 10px 10px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card > .card-reveal {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1f1f1;
  -webkit-transition: all .8s cubic-bezier(.175,.885,.32,1);
  -o-transition: all .8s cubic-bezier(.175,.885,.32,1);
  transition: all .8s cubic-bezier(.175,.885,.32,1);
}

.card>.card-reveal>.card-heading{padding:20px 10px}
.card:hover>.card-reveal{top:0}

.card.ad{margin-bottom:0px;}
.card.ad > .img-wrapper {
  background-position: center;
  background-repeat: no-repeat;
  height: 115px;
  width: 100%;
}

.card.ad.ad-ranzhi > .img-wrapper {background-size: 100%;}

.card.ad > .img-wrapper > img{display: none;}
.card.ad > .card-heading {text-align: center;}
.card.ad > .card-reveal > .card-heading { padding: 12px 10px 10px 15px;}
.card.ad > .card-reveal {color: #333;}
.card.ad > .card-reveal li{line-height:1.5}