header
{
	margin-bottom:120px;
	picture
	{
		border-radius: 20px;
		display: block;
		margin-bottom: 75px;
		img
		{
			display: block;
			width: 100%;
		}
	}
	h1
	{
		font-size: 24px;
		font-weight: 700;
		line-height: 36px; /* 150% */
		letter-spacing: 2.16px;
		color:$main-color;
		margin-bottom:25px;
	}
	p
	{
		font-size: 16px;
		font-weight: 400;
		line-height: 24px; /* 150% */
		letter-spacing: 1.44px;
		color:$text-color;
		max-width: 450px;
	}
	@media(max-width:767px)
	{
		margin-bottom:50px;
	}
}
main
{
  margin-bottom:100px;
	.section
	{
		h2
		{
			font-size: 24px;
			font-weight: 700;
			line-height: 36px; /* 150% */
			letter-spacing: 2.16px;
			color:$main-color;
			margin-bottom:40px;
		}
		section
		{
			article
			{
				padding-bottom:10px;
				margin-bottom:10px;
				border-bottom: 1px solid $main-color;
				h3
				{
					a
					{
						transition-duration:0.5s;
						color:$text-color;
						font-size: 20px;
						font-weight: 700;
						line-height: 30px; /* 150% */
						letter-spacing: 1.8px;
						&:hover
						{
							color:$main-color;
						}
					}
				}
				time
				{
					display: block;
					font-size: 13px;
					font-weight: 400;
					line-height: 20px; /* 150% */
					letter-spacing: 1.44px;
					color:rgba(0, 45, 94, 0.50);
				}
				.note
				{
					display: flex;
					justify-content:space-between;
					align-items:flex-end;
					p
					{
						padding-right:50px;
						color:$text-color;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px; /* 150% */
						letter-spacing: 1.44px;
						max-width: 800px;
					}
					a
					{
						min-width: 36px;
						height: 36px;
						border-radius: 100%;
						text-align: center;
						line-height: 36px;
						background-color: $main-color;
						color:#fff;
					}
				}
				
			}
		}
    .pagination
    {
      display: flex;
      justify-content:center;
      li
      {
        margin:0 2px;
        a
        {
          display: block;
          padding:5px 10px;
          border:1px solid $main-color;
          border-radius: 5px;
          color:$main-color;
        }
        &.active
        {
          a
          {
            background-color: $main-color;
            color:#fff;
          }
        }
      }
    }
	}

	@media(min-width:768px)
	{
		display: flex;
		aside
		{
			width: 25%;
			padding-right:7%;
			ul
			{
				li
				{
					margin-bottom:30%;
					a
					{
						display: block;
						position: relative;
						padding-left: 45px;
						color:#929399;
						font-size: 20px;
						font-weight: 700;
						line-height: 30px; /* 150% */
						letter-spacing: 1.8px;
						transition-duration:0.5s;
						&::after
						{
							transition-duration:0.5s;
							content:' ';
							width: 25px;
							height: 1px;
							background-color: $text-color;
							position: absolute;
							top:50%;
							left:15px;
						}
						&:hover
						{
							color:$text-color;
							&::after
							{
								width: 40px;
								left: 0px;
								background-color: $text-color;
							}
						}
					}
					&.active
					{
						a
						{
							color:$text-color;
							&::after
							{
								width: 40px;
								left: 0px;
								background-color: $text-color;
							}
						}
					}
				}
			}
		}
		.section
		{
			width: 75%;
		}
	}
	@media(max-width:767px)
	{
		
		aside
		{
			border-bottom:1px solid $text-color;
			overflow-x:auto;
			overflow-y:hidden;
			margin-bottom:30px;
			height:50px;
			ul
			{
				display: flex;
				li
				{
					a
					{
						transition-duration:0.5s;
						text-align: center;
						white-space:nowrap;
						padding:20px 30px;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px; /* 150% */
						letter-spacing: 1.44px;
						color:#929399;
						&:hover
						{
							color:$text-color;
						}
						
					}
					&.active
					{
						a
						{
							color:$text-color;
						}
					}
				}
			}
		}
    .section
    {
      section
      {
        article
        {
          margin-bottom:20px;
          padding-bottom:20px;
          .note
          {
            p
            {
              padding-right:20px;
            }
          }
        }
      }
    }
	}
}