.ht-base-timeline {
  .page-component .content{
    padding: 0;
  }
  .ivu-timeline-item-head-custom{
    font-size: 20px;
  }
}
// Timeline时间轴
.ht-timeline-horizontal{
  display: flex;
  .ivu-timeline-item-head-custom{
    width: auto;
    left: calc(~"50% - 7px");
  }
  .ivu-timeline-item{
    flex: 1;
    padding: 0;
  }
  .ivu-timeline-item-tail{
    height: 1px;
    background: #e4e4e4;
    width: 100%;
    /* border-top: 1px solid #e4e4e4; */
    left: calc(~"50% - 7px");
    top: 6px;
  }
  .ivu-timeline-item-content{
    padding: 0;
    top: 24px;
    left: 0;
    text-align: center;
  }
  .ht-timeline-title{
    position: relative;
    margin-top: -50px;
    margin-bottom: 30px;
    color: #666;
    font-weight: 400;
    line-height: normal;
    font-size: 12px;
  }
  .content{
    padding-top: 0!important;
    font-size: 12px;
    color: #ccc;
    font-weight: 400;
  }
  .time{
    color: @title-color;
    font-size: 14px;
    font-weight: 400;
  }
  .ht-timeline-details{
    color: #999;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
  }
}
// 垂直时间轴
.ht-timeline-vertical{
  .time{
    color: @title-color;
    font-size: 14px;
    font-weight: 400;
  }
  .content{
    padding-top: 0!important;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
  }
  .ivu-timeline-item-head-custom{
    padding: 0;
  }
  .ht-timeline-details{
    color: #999;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
  }
  .ht-timeline-title{
    position: absolute;
    left: -60%;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    >span:nth-child(1){
      font-size: 16px;
      color: #666;
    }
    >span:nth-child(2){
      font-size: 10px;
      color: #999;
    }
  }
}

//垂直右侧时间轴
.ht-timeline-vertical-right{
  .ivu-timeline-item-tail{
    left:100%;
    top: 6px;
  }
  .ivu-timeline-item-head {
    left: calc(~ "100% - 6px");
  }
  .ivu-timeline-item-content{
    text-align: right;
    padding: 1px 24px 10px 1px !important;
  }
  .time{
    color: @title-color;
    font-size: 14px;
    font-weight: 400;
  }
  .content{
    padding-top: 0!important;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    text-align: right;
  }
  .ivu-timeline-item-head-custom{
    padding: 0;
    width: 13px;
  }
  .ht-timeline-details{
    color: #999;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
  }
  .ht-timeline-title{
    position: absolute;
    left: -60%;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    >span:nth-child(1){
      font-size: 16px;
      color: #666;
    }
    >span:nth-child(2){
      font-size: 10px;
      color: #999;
    }
  }
}

//垂直交替
.ht-timeline-vertical-alternate{
  .ivu-timeline-item-tail{
    left:50%;
    top: 6px;
  }
  .ivu-timeline-item-head {
    left: calc(~ "50% - 6px");
  }
  .ivu-timeline-item-content{
    text-align: left;
    padding: 1px 1px 10px 24px !important;
    width: 50%;
    left: 50%;
  }
  .ivu-timeline-item:nth-of-type(2n){

    .ivu-timeline-item-content{
      text-align: right;
      left: 0;
      padding: 1px 24px 10px 1px !important;

    }
  }
  .time{
    color: @title-color;
    font-size: 14px;
    font-weight: 400;
  }
  .content{
    padding-top: 0!important;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
  }
  .ivu-timeline-item-head-custom{
    padding: 0;
    width: 13px;
  }
  .ht-timeline-details{
    color: #999;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
  }
  .ht-timeline-title{
    position: absolute;
    left: -60%;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    >span:nth-child(1){
      font-size: 16px;
      color: #666;
    }
    >span:nth-child(2){
      font-size: 10px;
      color: #999;
    }
  }
}
