.education-list-wrap {
  position: relative; margin-top: 70px;
  .item-group {
    .item {
      float: left; width: calc(33.33% - 14px); border: 1px solid var(--line-color); border-top-color: #aaa;
      &:not(:last-child) { margin-right: 20px; }
      .head {
        position: relative; padding: 20px; background: #f2f5f6; border-bottom: 1px solid var(--line-color); 
        .title { 
          @include ellipsis; float: left; width: calc(100% - 50px); font-size: 1.4rem; font-weight: 500; position: relative; top: 2px; padding-left: 10px;
          &:hover {
            a { text-decoration: underline; }
          }
        }
        .label {
          float: left; width: 50px; line-height: 23px; color:#fff; text-align: center; border-radius: 3px; font-size: 1.1rem; font-weight: 600;
          &.on { background: var(--main-color); }
          &.end { background: #aeaeae; }
        }
      }
      .date {
        position: relative; padding: 20px;
        .row {
          @include ellipsis; font-size: 1.2rem; color: #626262; font-weight: 500;
          &:not(:last-child) { margin-bottom: 10px; }
          b { font-weight: 600; color: #3c5b92; margin-right: 5px; }
        }
      }
      &.empty {
        background:#f2f5f6; overflow: hidden; text-align: center; padding: 63px 0;
        p { color: #b4b4b4; font-size: 1.4rem; font-weight: 500;}
        &.full-width { width: 100%; }
      }
    }
  }
}

@media (max-width: 1200px) {
  .education-list-wrap {
    margin-top: 50px;
  }
}
@media (max-width: 1024px) {
  .education-list-wrap {
    .item-group {
      .item {
        margin: 0 0 10px 0; float: none; width: 100%; 
        .head {
          padding: 12px;
          .title { font-size: 1.3rem; top: 5px;}
        }
        .date {
          padding: 12px;
          .row {
            font-size: 1.1rem;
          }
        }
        &.empty { 
          padding: 35px 0;
          p { font-size: 1.2rem; }
        }
      }
    }
  }
}