#body
{
  
  section
  {
    background-image: url('<?=userimg($newsMenu->bg->data)?>');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: contain;
    h1
    {
      position: relative;
      text-align: center;
      color:$main-color;
      font-size: 24px;
      font-weight: 400;
      line-height: 36px;
      letter-spacing: 2.4px;
      margin-bottom:50px;
      &::after
      {
        content:' ';
        width: 21px;
        height:15px;
        background-color: #9CCCD3;
        border-radius: 100%;
        position: absolute;
        top:-14px;
        left:calc(50% - 10px);
      }
    }
    #news-menu
    {
      h2
      {
        position: relative;
        color:$main-color;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        letter-spacing: 2px;
        padding-left:30px;
        margin-bottom:35px;
        &::after
        {
          content:' ';
          width: 21px;
          height:15px;
          background-color: #9CCCD3;
          border-radius: 100%;
          position: absolute;
          top:calc(50% - 7px);
          left:0;
        }
      }

      ul
      {
        li
        {
          margin-bottom:20px;
          a
          {
            display: block;
            border:1px solid $main-color;
            border-radius: 80px;
            padding:10px 0 10px 40px;
            font-size: 16px;
            line-height: 24px;
            letter-spacing: 1.6px;
            color:#C4BCAC;
            transition-duration:.5s;
            &:hover
            {
              color:$bg-color;
              background-color: $main-color;
            }
          }
          &.active
          {
            a
            {
              color:$bg-color;
              background-color: $main-color;
            }
          }
        }
      }
    }
    .article-list
		{
			article
			{
				margin-bottom:20px;
				border:1px dashed $main-color;
				border-radius: 80px;
				padding:34px 60px;
				transition-duration:.5s;
				&:hover
				{
					background-color: $bg-color;
				}
				.info
				{
					margin-bottom:10px;
					font-size: 16px;
					line-height: 24px;
					letter-spacing: 1.6px;
					color:#C4BCAC;
					time
					{
						margin-right:20px;
					}
					a
					{
						color:#C4BCAC;
						transition-duration:.5s;
						&:hover
						{
							color:$main-color;
						}
					}
				}
				.data
				{
					color:$main-color;
					h3
					{
            margin-bottom: 10px;
						a
						{
							font-size: 24px;
							letter-spacing: 2.4px;
							color:$main-color;
						}
					}
					p
					{
            margin-bottom: 10px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					i
					{
						padding:5px 16px;
						border-radius: 30px;
						color:$bg-color;
						background-color: $main-color;
					}
				}
				
			}
		}
    @media(min-width:1148px)
    {
      display: flex;
      flex-wrap:wrap;
      justify-content:space-between;
      h1
      {
        width: 100%;
      }
      #news-menu
      {
        width: 200px;
      }
      .article-list
      {
        width: 900px;
      }
    }
  }
}