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

.article-body
{
  padding-top:100px;
  padding-bottom:100px;
  background-color: #f1f1f1;;
  @media(min-width:769px)
  {
    display: flex;
    aside
    {
      width:20%;
      padding-right:2vw;
    }
    .article-right
    {
      width:80%;
    }
  }

  aside
  {
    @media(min-width:769px)
    {
      letter-spacing: 2px;
      h3
      {
        background-color: $main-color;
        color:#fff;
        padding:20px 40px;
        font-size:1.5vw;
        border-radius: 0 10px 10px 0;
      }
      ul
      {
        li
        {
          display: block;
          a
          {
            color:#333;
            display: block;
            padding:20px 40px;
            font-size:1vw;
          }
          &.active
          {
            a
            {
              color:$main-color;
            }
          }
        }
      }
    }
    @media(max-width:768px)
    {
      h3
      {
        background-color: $main-color;
        color:#fff;
        padding:20px 40px;
        font-size:15px;
        border-radius: 0 10px 10px 0;
      }
      ul
      {
        li
        {
          display: block;
          a
          {
            color:#333;
            display: block;
            padding:20px 40px;
            font-size:15px;
          }
          &.active
          {
            a
            {
              color:$main-color;
            }
          }
        }
      }
    }
  }
  .article-list
  {
    display: flex;
    flex-wrap:wrap;
    section
    {
      letter-spacing: 2px;
      padding:5px;
      background-color: #fff;
      box-shadow: 0 0 3px #ccc;
      position: relative;
      overflow: hidden;
      picture
      {
        display: block;
        padding-bottom:100%;
        position: relative;
        img
        {
          position: absolute;
          top:0px;
          left:0px;
          width:100%;
          display: block;
        }
      }
      .box
      {
        padding:10px;
        h2
        {
          padding:10px 0;
          font-size:1vw;
          line-height:1.4vw;
          a
          {
            color:#333;
          }
        }
        p
        {
          font-size:.9vw;
          line-height:1.3vw;
          color:#666;
        }
      }
      
      @media(min-width:980px)
      {
        width:calc((100% - 6vw) / 4);
        margin:0 1vw 2vw 1vw;
        &:nth-child(4n)
        {
          margin-right:0px;
        }
        &:nth-child(4n + 1)
        {
          margin-left:0px;
        }
      }
      @media(max-width:979px)
      {
        width:calc(50% - 10px);
        margin:0 10px 20px 10px;
        &:nth-child(2n)
        {
          margin-right:0px;
        }
        &:nth-child(2n + 1)
        {
          margin-left:0px;
        }
        .box
        {
          h2
          {
            font-size:16px;
            line-height:20px;
          }
          p
          {
            font-size:14px;
            line-height:18px;
          }
        }
      }
    }
  }

  #pagination
  {
    display: flex;
    flex-wrap:wrap;
    padding-bottom:100px;
	  li
	  {
	    a
	    {
	      display: block;
	      padding:5px 10px;
	      border-radius: 5px;
	      text-align: center;
	      line-height: 20px;
	      color:$main-color;
	    }
	    &.active
	    {
	      a
	      {
	        color:#fff;
	        background:$main-color;
	      }
	    }
	  }
	}
}