.button {
	background: none;
	color: #fff;
	border: 0;
	font: 18px/50px "微软雅黑";
	margin-right: 30px;
	height: 50px;
	cursor: pointer;
}
.button:before {
	content: "";
	border: 1px solid #fff;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}
.button.is-checked:before {
	background: #55b400
}
.button-group {
	border-bottom: 1px solid #585858;
	margin: 20px 12px;
}
/* ---- item elements ---- */


.element-item  img{
	width: 270px
}

.element-item > * {
	margin: 0;
	padding: 0;
}
.element-item h3 {
	font: 18px/30px "微软雅黑";
	color: #fff;
	padding: 0 5px;
	text-overflow: ellipsis;
  display: -webkit-box;
   -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
	overflow: hidden
}
.element-item .symbol {
	font: 14px/18px "微软雅黑";
	color: #b4b4b4;
	padding: 0 5px;
	margin-bottom: 20px;
	overflow: hidden;
	 position: relative;
      height: 5em; /* exactly three lines */
  
}
 
.element-item .symbol:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1em;
      background: linear-gradient(to right, rgba(0,0, 0, 0), rgba(0, 0, 0, 1) 50%);
 }
@supports (-webkit-line-clamp: 4) {
    .element-item .symbol {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;  
        max-height:5.6em; /* I needed this to get it to work */
        height: 5em;
    }
    .element-item .symbol:after {
        display: none;
    }
}
.element-item .link:hover a:after{
	-webkit-transform: rotate(360deg);
  transform: rotate(360deg);
	-webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
 
}