.down-arrow {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 9px;

  &::after {
    display: inline-block;
    content: ' ';
    height: 6px;
    width: 6px;
    border-width: 0 2px 2px 0;
    border-color: #999999;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform 0.3s;
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -5px;
  }

  &-active::after {
    top: 50%;
    margin-top: -2px;
    transform-origin: center;
    transform: rotate(-135deg);
    transition: transform 0.3s;
  }
}

.back-arrow {
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;

  &::after {
    display: inline-block;
    content: ' ';
    height: 12px;
    width: 12px;
    border-width: 0 0 3px 3px;
    border-color: #c7c7cc;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 50%;
    right: 4px;
    margin-top: -4px;
  }
}

.h-line {
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}

.v-line {
  width: 1px;
  height: 100%;
  background: #e5e5e5;
}

// line-1:超过1行就显示省略号
// line-n:超过n行就显示省略号
.line-1,
.line-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.line-1 {
  -webkit-line-clamp: 1;
}

.line-2 {
  -webkit-line-clamp: 2;
}

.bg-url(@bgImg) {
  background-image: url(@bgImg) no-repeat;
}

.bg-url-center(@bgImg) {
  background: url(@bgImg) no-repeat center;
}

.bg-url-100(@bgImg) {
  background-image: url(@bgImg) no-repeat;
  background-size: 100% 100%;
}

.bg-img-url(@bgImg) {
  background-image: url(@bgImg);
  background-repeat: no-repeat;
}

.bg-img-url-center(@bgImg) {
  background-image: url(@bgImg) no-repeat center;
}

.bg-img-url-100(@bgImg) {
  background-image: url(@bgImg) no-repeat;
  background-size: 100% 100%;
}