@media screen and (min-width:@mobile-device) {
  .banner {
    width: 100%;
    height: 35rem;
    z-index: 0;
    overflow: hidden;
    background-color: @bgColor;
    .shadow();
  }
  .article {
    transition: all 0.8s ease;
    background-color: @bgColor;
    width: 100%;
    margin:0 auto @margin-general ;
    .shadow();
    .border-normal();
    display: flex;
    flex-direction: column;
    .main-body {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: @padding-general;
      transition: all 0.8s ease;
      .article-container {
        color: @textColor;
      }
      .comments {
        margin-top: 20px;
        color: @textColor;
        .title {
          font-size: @very-big-text;
        }
        .edit-part {
          margin-top: @margin-general;
          width: 100%;
          height: 300px;
          position: relative;
          .up {
            justify-content: space-between;
            display: flex;
          }
          .main-content {
            display: flex;
            width: 100%;
            .avatar {
              width: 60px;
              height: 60px;
              flex-shrink: 0;
              background-color: @bgColor;
              border-radius: 50%;
              overflow: hidden;
            }
            .edit-area {
              width: 100%;
              margin-left: 30px;
            }
          }

          .button {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-top: @margin-general;
          }
        }
      }
    }
    .page {
      margin: 30px 0;
    }
  }
  .footer{
    margin: 0;
  }
}
@media screen and (min-width:@smallpc-device) {
  .banner {
    width: 100%;
    height: 28rem;
    z-index: 0;
    overflow: hidden;
    background-color: @bgColor;
    .shadow();
  }
  .article{
    width: 73%;
    padding: @padding-general;
  }
}