.flex-box {
  display: flex;
}

.flex(@flex) {
  flex: @flex;
}

 .ellipse() {
   white-space: nowrap;
   word-wrap: normal;
   text-overflow: ellipsis;
   overflow: hidden;
 }

.retina-border(@border:border, @color:#d7d7d7, @position:relative) {
  position: @position;
  &:before {
    content: '';
    .scale(0.5);
    .transform-origin();
      @{border}: 1px solid @color;
    width: 200%;
    height: 200%;
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    .box-sizing(border-box);
    z-index: 2;
  }
}

.scale(@ratio) {
  -webkit-transform: scale(@ratio);
  -moz-transform: scale(@ratio);
  -ms-transform: scale(@ratio);
  -o-transform: scale(@ratio);
  transform: scale(@ratio);
}

.transform-origin(@x:0,@y:0) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin: @x @y;
  -ms-transform-origin: @x @y;
  -o-transform-origin: @x @y;
  transform-origin: @x @y;
}

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
  -moz-box-sizing: @box-model; // Firefox <= 19
  box-sizing: @box-model;
}

.multi-line(@value) {
  display: box;
  display: -webkit-box;
  display: -ms-flexbox;
  line-clamp: @value;
  box-orient: vertical;
  -ms-line-clamp: @value;
  -ms-box-orient: vertical;
  -webkit-line-clamp: @value;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
}

.star {
  display: inline-block;
  width: 6.6rem;
  height: 1.3rem;
  vertical-align: middle;
  background: url(../i/remark.png) no-repeat;
  background-size: 8.6rem auto;
}

.star.star_0 {
  background-position: 0 -33.4rem
}

.star.star_10 {
  background-position: 0 -31.7rem
}

.star.star_20 {
  background-position: 0 -30.0rem
}

.star.star_30 {
  background-position: 0 -28.3rem
}

.star.star_35 {
  background-position: 0 -26.6rem
}

.star.star_40 {
  background-position: 0 -24.9rem
}

.star.star_45 {
  background-position: 0 -23.2rem
}

.star.star_50 {
  background-position: 0 -21.5rem
}