.body-wrap {
  background-color: #fff;
  width: 600px;
  min-height: 500px;
  margin: 0 auto;
  font-size: 12px;
}

.pres-timeline {
  font-family: roboto, helvetica, sans-serif;
  font-size: 12px;
  color: #4A4A4A;
  width: 100%;
  margin: 30px 0;
  
  > div > div {
    // 修复内边距问题
    padding: 1em 0;
    box-sizing: border-box;
  }
  
  .periods-container, 
  .cards-container {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    min-height: 100px;
    transition: height .5s ease-in-out;
    background-color: #FFF;
  }
  
  .timeline-container {
    // 可以在这里添加timeline-container的样式
  }
}


// 时间线样式
.timeline-container {
  position: relative;
  width: 100%;
  height: 50px;
  overflow: hidden;
  
//   &:before {
//     background-image: linear-gradient(to left, #FFF, rgba(248, 248, 248, 0));
//     left: 0;
//     content: '';
//     position: absolute;
//     z-index: 2;
//     top: 0;
//     height: 100%;
//     width: 100px;
//   }
  
//   &:after {
//     background-image: linear-gradient(to right, #FFF, rgba(248, 248, 248, 0));
//     right: 0;
//     content: '';
//     position: absolute;
//     z-index: 2;
//     top: 0;
//     height: 100%;
//     width: 100px;
//   }
  
  .timeline {
    position: absolute;
    display: block;
    height: 50px;
    transition: left .3s ease-in-out;
    
    ol {
      display: block;
      width: 100%;
      height: 1px;
      background: linear-gradient(297deg, rgba(88, 148, 103, 0), rgba(88, 148, 103, 1), rgba(145, 198, 160, 0));
      list-style: none;
      padding-left: 210px;
      padding-right: 300px;
      
      li {
        display: inline-block;
        padding: 5px;
        margin-top: -11px;
        margin-left: 80px;
        border-radius: 50%;
        border: 3px solid #7f9298;
        background-color: #FFF;
        position: relative;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,.2);
        
        &.active {
          box-shadow: none;
          
          &:before, &:after {
            content: "";
            display: block;
            width: 1px;
            position: absolute;
            transition: opacity .3s ease-in-out;
          }
          
          &:before {
            height: 25px;
            top: -25px;
          }
          
          &:after {
            height: 25px;
            bottom: -25px;
          }
        }
      }
    }
  }
  
  .btn-back, 
  .btn-next {
    display: inline-block;
    position: absolute;
    cursor: pointer;
    margin-top: -2px;
    z-index: 11;
    transition: all .3s ease;
    
    &.hide {
      display: none;
    }
    
    &:hover {
      border-color: #7f9298;
    }
  }
  
  .btn-back {
    left: 1em;
    // background: url('data:image/svg+xml;utf8,<svg width="14" height="22" viewBox="6 4 14 22" xmlns="http://www.w3.org/2000/svg"><path fill="#D8D8D8" fill-rule="evenodd" d="M11.828 15l7.89-7.89-2.83-2.828L6.283 14.89l.11.11-.11.11L16.89 25.72l2.828-2.83"/></svg>') no-repeat;
  }
  
  .btn-next {
    right: 1em;
    // background: url('data:image/svg+xml;utf8,<svg width="14" height="23" viewBox="10 3 14 23" xmlns="http://www.w3.org/2000/svg"><path fill="#D8D8D8" fill-rule="evenodd" d="M18.172 14.718l-7.89-7.89L13.112 4l10.606 10.607-.11.11.11.11-10.608 10.61-2.828-2.83 7.89-7.89"/></svg>') no-repeat;
  }
}

// 卡片样式
.cards-container {
  &:before {
    background-image: linear-gradient(to left, #FFF, rgba(248, 248, 248, 0));
    left: 0;
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 100px;
  }
  
  &:after {
    background-image: linear-gradient(to right, #FFF, rgba(248, 248, 248, 0));
    right: 0;
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    height: 100%;
    width: 100px;
  }
  
  section {
    width: 70%;
    position: absolute;
    margin-left: 15%;
    margin-bottom: 2em;
    border: 1px solid #f5f7f6;
    padding: 1.5em;
    box-sizing: border-box;
    transition: transform .3s ease-in-out;
    top: 0;
    opacity: 0;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 10px 15px rgba(0,0,0,.15);
    
    &.active {
      height: auto;
      opacity: 1;
      transform: translateX(0);
      z-index: 5;
    }
    
    &.prev {
      height: auto;
      opacity: 0.4;
      transform: translateX(-105%);
      z-index: 0;
    }
    
    &.next {
      height: auto;
      opacity: 0.4;
      transform: translateX(105%);
      z-index: 0;
    }
    
    .year {
      text-align: center;
      font-size: 16px;
      margin: 0;
    }
    
    .title {
      font-weight: 400;
    }
    
    img {
      width: 100%;
    }
  }
}