@grey: #f3f5f9;
@black: #434549;
@greyb: #727376;
@greyf: #bbb;
@whit:#fff;
@red:#EE2C2C;

@band: rgba(255,180,77,1);
@band-hover: #ffc069;

.BG {.Bg(@grey);}
.BF {.Bg(@whit);}
.BR {.Bg(@red);}
.BgHover {
  .Bg(rgba(255,180,77,.2));
}
.CB {color:@black;}
.CG {color:@greyb;}
.Cg {color:@greyf;}
.CF{color:@whit;}
.CLink{color:@band;}
.CLinkHover{color:@band-hover;}

.link {
  .Cp;
  &:hover {
    .CLinkHover;
  }
}

.Tran {
  .transition(all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1));
}


@font-face {
  font-family: "rounded";
  src: url("../font/rounded.woff") format('woff');
  font-display: block;
}

.circle(@v) {
  .WHb(@v);
  .radius(@v);
}

.bone {
  color: #ccc !important;
  font-family: 'rounded'
}

.list-enter-active, .list-leave-active {
  .transition(all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1));
}
.list-enter, .list-leave-to {
  opacity: 0;
  .transform(translateX(-20px));
}


.scrollBar {
  /* 滚动条整体部分 */
  &::-webkit-scrollbar {
    .W(2);
  }
  /* 滚动条两端的按钮 */
  &::-webkit-scrollbar-button {
    .Dpn;
  }
  /* 外层轨道 */
  &::-webkit-scrollbar-track {
    .Dpn;
  }
  /* 内层轨道，滚动条中间部分 */
  &::-webkit-scrollbar-track-piece {
    .Bg(#eee);
  }
  /* 滚动条里面可以拖动的那部分 */
  &::-webkit-scrollbar-thumb {
    .Bg(#ccc);
  }
  /* 边角 */
  &::-webkit-scrollbar-corner {
    .Dpn;
  }
  /* 定义右下角拖动块的样式 */
  &::-webkit-resizer {
    .Dpn;
  }
}
.noScrollBar {
  /* 滚动条整体部分 */
  &::-webkit-scrollbar {
    .W(0);
  }
  /* 滚动条两端的按钮 */
  &::-webkit-scrollbar-button {
    .Dpn;
  }
  /* 外层轨道 */
  &::-webkit-scrollbar-track {
    .Dpn;
  }
  /* 内层轨道，滚动条中间部分 */
  &::-webkit-scrollbar-track-piece {
    .Dpn;
  }
  /* 滚动条里面可以拖动的那部分 */
  &::-webkit-scrollbar-thumb {
    .Dpn;
  }
  /* 边角 */
  &::-webkit-scrollbar-corner {
    .Dpn;
  }
  /* 定义右下角拖动块的样式 */
  &::-webkit-resizer {
    .Dpn;
  }
}