.design-home-top {
  height: 90px;
  background: #fff;
  padding: 0 30px; }
  .design-home-top .designer-avatar {
    width: 50px;
    height: 50px;
    float: left;
    margin-top: 18px; }
    .design-home-top .designer-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 50%; }
  .design-home-top .designer-name-info {
    float: left;
    margin-left: 15px; }
    .design-home-top .designer-name-info .designer-name {
      font-size: 18px;
      color: #000000;
      margin-top: 35px; }
    .design-home-top .designer-name-info .designer-info {
      font-size: 12px;
      color: #4A4A4A;
      margin-top: 4px; }
  .design-home-top .ic-settings {
    display: inline-block;
    font-size: 30px;
    color: #D0D3D9;
    margin-left: 100px;
    margin-top: 25px;
    cursor: pointer;
    float: left; }
  .design-home-top .top-divider {
    width: 1px;
    height: 70px;
    background: #eee;
    float: left;
    margin: 10px 15px 0; }
  .design-home-top .logout {
    font-size: 14px;
    margin-top: 36px;
    color: #4a4a4a;
    float: left; }
  .design-home-top .top-tools {
    float: right;}
    .design-home-top .top-tools .tools-item {
      text-align: center;
      float: left;
      margin-right: 40px; }
      .design-home-top .top-tools .tools-item .tools-ic {
        display: inline-block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        border-radius: 20px;
        text-align: center;
        /* background: rgba(0, 0, 0, 0.5); */
        background: #b52685;

        font-size: 16px;
        color: #fff;
        margin-top: 16px; }
      .design-home-top .top-tools .tools-item .tools-tv {
        font-size: 12px;
        color: #4A4A4A;
        text-align: center;
        margin-top: 4px; }

.swiper-container {
  width: 100%;
  height: 260px;
  position: relative; }
  .swiper-container .home-img {
    width: 100%;
    height: 260px; }
    .swiper-container .home-img img {
      width: 100%;
      height: 100%; }
  .swiper-container .arrows {
    position: absolute;
    bottom: 30px;
    right: 30px;
    z-index: 1; }
    .swiper-container .arrows span {
      font-size: 20px;
      font-weight: bolder;
      cursor: pointer; }
    .swiper-container .arrows .ic-left {
      color: #fff; }
    .swiper-container .arrows .ic-right {
      color: #b52685; }

.list-title {
  background: #fff;
  color: #666;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd; }
  .list-title .title-item {
    display: inline-block;
    transition: all 0.6s;
    cursor: pointer;
    position: relative;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    margin: 0 10px;}
    .list-title .title-item::after {
      content: "";
      position: absolute;
      bottom: -1px;
      width: 0px;
      height: 2px;
      background: #b52685;
      left: 0px;
      transition: all 0.6s; }
    .list-title .title-item:hover::after {
      width: 60px; }
  .list-title .title-item-active {
  	color: #b52685;
    position: relative; }
    .list-title .title-item-active::after {
      content: "";
      position: absolute;
      bottom: 0px;
      width: 70px;
      height: 2px;
      background: #b52685;
      left: 0px;
      transition: all 0.6s; }

.list-items {
  padding: 0 2%;
  margin-top: 20px; }
  .list-items .pure-u-md-1-3{
    margin-bottom: 20px;
  }
  .list-items .list-item {
    margin: 0 10px;
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    /*margin-right: 1%;
    width: 29.2%;
    float: left;*/}
    .list-items .list-item:nth-child(3n) {
      margin-right: 0; }
    .list-items .list-item .item-pic {
      width: 100%;
      height: 220px;
      border-radius: 5px;
      overflow: hidden;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
      .list-items .list-item .item-pic img {
        width: 100%;
        border-radius: 5px; }
    .list-items .list-item .item-infos {
      padding: 10px 15px;
      position: relative; }
      .list-items .list-item .item-infos .ic-hot {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1;
        font-size: 18px;
        color: #f2543f; }
    .list-items .list-item .item-title {
      font-size: 16px;
      color: #4A4A4A; }
    .list-items .list-item .item-desc {
      font-size: 12px;
      color: #9B9B9B;
      margin-top: 4px; }
    .list-items .list-item .item-handle {
      margin: 10px 0;
      margin-top: 6px; }
      .list-items .list-item .item-handle span {
        font-size: 12px;
        color: #9B9B9B;
        margin-right: 6px; }
    .list-items .list-item .item-divider {
      height: 1px;
      background: #eee;
      margin-top: 12px; }
    .list-items .list-item .design-comp {
      height: 50px;
      line-height: 50px; }
      .list-items .list-item .design-comp .comp-avatar {
        width: 30px;
        height: 30px;
        margin-top: 10px;
        float: left; }
        .list-items .list-item .design-comp .comp-avatar img {
          width: 30px;
          height: 30px;
          border-radius: 20px; }
      .list-items .list-item .design-comp .comp-name {
        font-size: 14px;
        color: #000;
        float: left;
        margin-left: 10px; }
      .list-items .list-item .design-comp .comp-date {
        float: right;
        color: #9B9B9B;
        font-size: 12px; }

.desiger-list {
  background: #fff;
  margin: 30px 2% 0; }
  .desiger-list .designer-item {
    padding: 20px 60px 20px;
    border-bottom: 1px solid #ddd; }



.designer-item-avatar {
  width: 60px;
  height: 60px;
  float: left; }
  .designer-item-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 30px; }

.designer-item-infos {
  float: left;
  margin-left: 15px; }
  .designer-item-infos .designer-item-name {
    font-size: 16px;
    color: #000; }
  .designer-item-infos .designer-item-comp, .designer-item-infos .designer-item-title {
    font-size: 12px;
    color: #BCBCBC; }

.designer-handle {
  margin-top: 24px; }
  .designer-handle .handle-item {
    display: inline-block;
    font-size: 14px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    cursor: pointer; }
  .designer-handle .item-focus {
    background: #b52685;
    color: #fff; }
  .designer-handle .item-email {
    border: 1px solid #4A4A4A; }

.desiger-pic {
  width: 100%; }
  .desiger-pic img {
    width: 94%; }

.collect-banner {
  width: 100%;
  height: 150px;
  background-image: url("../images/collect_banner.png");
  background-position: center;
  background-size: cover; }

  .list-title a:hover{
    color: #b52685;
  }