.course-detail {
  .table-of-content {
    position: fixed;
    top: 60px;
    bottom: 0;
    width: 300px;
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid var(--color-border-2);

    > h2 {
      margin-bottom: 10px;
    }

    .toc {
      padding-top: 20px;
      .level-1 {
        color: var(--color-text-4);
        line-height: 1.5;
        padding-top: 10px;
      }
      .level-2 {
        padding: 5px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--color-text-2);
        cursor: pointer;
        &:hover {
          color: var(--color-text-1);
        }
        &.active {
          color: var(--color-primary-1);
        }
        .xicon {
          margin-right: 6px;
        }
        .time {
          color: var(--color-text-4);
          font-size: 13px;
          text-align: right;
        }
      }
    }
  }
  .content {
    position: fixed;
    right: 0;
    top: 60px;
    bottom: 0;
    overflow-y: auto;
  }
}