body {
  background: #fff;
}

.news-detail-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .container-main {
    flex: 1;

    .main-nav {
      padding: 1.125rem 0;
      background: #F8F8F8;

      span,
      a {
        color: #666;
        font-size: .875rem;
        line-height: 1.25rem;
        margin-left: .25rem;
      }

      a {
        cursor: pointer;
        transition: color .3s;

        &:hover {
          color: var(--main-color);
        }
      }
    }

    .main-content {
      padding: 2.5rem 0;

      .title {
        color: #333;
        font-size: 1.5rem;
        line-height: 2.125rem;
        text-align: center;
      }

      .info {
        margin-top: 1.5rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.10);

        .info-tag {
          color: #909090;
          font-size: 1.125rem;
          line-height: 1.5rem;
          margin: 0 .75rem;
        }
      }

      .content {
        color: #909090;
        font-size: 1rem;
        line-height: 1.875rem;
        padding: 1.5rem 0;
      }

      .navigation {
        padding-top: 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.10);

        a {
          display: flex;
          text-decoration: none;
          max-width: 49%;

          .title {
            color: #909090;
            font-size: .875rem;
            line-height: 1.25rem;
          }

          span {
            color: #333;
            font-size: .875rem;
            line-height: 1.25rem;
            margin-left: .5rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            flex: 1;
            transition: color .3s;
          }

          &:hover span {
            color: var(--main-color);
          }

          &.empty {
            cursor: no-drop;

            span {
              color: #909090;
            }
          }
        }
      }
    }
  }

  // 适配手机端
  @media screen and (max-width: 767px) {
    .container-main {
      .main-nav {
        padding: 1rem 0;
      }

      .main-content {
        padding: 1.25rem 0;

        .title {
          font-size: 1.125rem;
          font-weight: 600;
        }

        .info {
          margin-top: .5rem;
          padding-bottom: .875rem;

          .info-tag {
            font-size: .875rem;
            line-height: 1.25rem;
          }
        }

        .content {
          padding: .875rem 0;
        }

        .navigation {
          padding-top: 1.25rem;
        }
      }
    }
  }
}