.article-header
{
  padding-bottom:0px;
}

main
{
  background-color: #f1f1f1;
  padding-top:100px;
  padding-bottom:100px;
  aside
  {
    >ul
    {
      >li
      {

        
        >a
        {
          color:#000;
          padding:10px;
          display: block;
        }
        ul
        {
          display: none;
          li
          {
            a
            {
              display: block;
              color:#666;
              padding:10px 0 10px 20px;

            }
            &.active
            {
              a
              {
                color:#000;
              }
            }
          }
        }
        &.active
        {
          
          ul
          {
            display: block;
          }
          >a
          {
            background-color: #000;
            color:#fff;
            border-radius: 5px;
          }
        }
        
      }

    }
  }
  .article-box
  {
    section
    {
      display: flex;
      flex-wrap:wrap;
      article
      {
        padding:20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(155,155,155,.5);
        picture
        {
          display: block;
          margin-bottom: 10px;
          img
          {
            display: block;
            width: 100%;;
          }
        }
        h2
        {
          font-size:18px;
          line-height: 25px;
          margin-bottom:10px;
          a
          {
            display: block;
            color:#000;
          }
        }
        p
        {
          color:#666;
          font-size:15px;
          line-height:30px;

          display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
        }
      }

      @media(min-width:1200px)
      {
        article
        {
          width: calc((100% - 80px) / 3);
          margin:0 20px 40px 20px;
          &:nth-child(3n)
          {
            margin-right:0;
          }
          &:nth-child(3n + 1)
          {
            margin-left:0;
          }
        }
      }

      @media(max-width:1199px)
      {
        article
        {
          width: calc(50% - 10px);
          margin:0 10px 30px 10px;
          &:nth-child(2n)
          {
            margin-right:0;
          }
          &:nth-child(2n + 1)
          {
            margin-left:0;
          }
        }
      }
    }
    
  }
  
  
  @media(min-width:769px)
  {
    display: flex;
    aside{
      width: 400px;
      padding-right:20px;
    }
    .article-box{
      width: calc(100% - 400px);
    }
  }
}