article
{

	header
	{
		background-image: url('<?=userimg($article->photo)?>');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		color:#fff;
		padding:150px 20px;
		text-align: center;
		border-radius: 10px;
		margin-bottom:80px;
		h1
		{
			font-size: 48px;
			font-weight: 700;
			line-height: 72px; /* 150% */
			letter-spacing: 4.32px;
			margin-bottom:20px;
		}
		p
		{
			font-size: 16px;
			font-weight: 400;
			line-height: 24px; /* 150% */
			letter-spacing: 1.44px;
		}
		@media(max-width:1199px)
		{
			h1
			{
				font-size: pxvw(48,1200);
				line-height: pxvw(72,1200); /* 150% */
				letter-spacing: pxvw(4.32,1200);
			}
			p
			{
				font-size: pxvw(16,1200);
				line-height: pxvw(24,1200);
				letter-spacing: pxvw(1.44,1200);
			}
		}
		@media(max-width:767px)
		{
			padding:100px 20px;
			margin-bottom:60px;
			h1
			{
				font-size: 25px;
				font-weight: 700;
				letter-spacing: 1.71px;
			}
			p
			{
				font-size: 13px;
				font-weight: 400;
				line-height: 20px; 
				letter-spacing: 1.44px;
			}
		}
	}
	h2
	{
		color:$main-color;
		font-size: 24px;
		font-weight: 700;
		line-height: 36px; /* 150% */
		letter-spacing: 2.16px;
		margin-bottom:20px;
	}
	>p
	{
		font-size: 16px;
		font-weight: 400;
		line-height: 24px; /* 150% */
		letter-spacing: 1.44px;
		margin-bottom:50px;
	}
	@media(max-width:767px)
	{
		h2
		{
			font-size: 20px;
			font-weight: 700;
			line-height: 30px; /* 150% */
			letter-spacing: 1.8px;
		}
	}
	.data-list
	{
		display: flex;
		flex-wrap:wrap;
		li
		{
			a
			{
				display: block;
				text-align: center;
				picture
				{
					margin-bottom: 40px;
					display: block;
					img
					{
						border-radius: 10px;
						display: block;
						width: 100%;
					}
				}
				span
				{
					transition-duration:0.5s;
					font-size: 20px;
					font-weight: 500;
					line-height: 30px; /* 150% */
					letter-spacing: 1.8px;
					color:#002D5E;
					&:hover
					{
						color:$main-color;
					}
				}
			}
		}
	}
	@media(min-width:768px)
	{
		.data-list
		{
			li
			{
				margin:0 pxp(1400,40) 100px pxp(1400,40);
				width:(100% - (160 / 14)) / 3;
				&:nth-child(3n)
				{
					margin-right: 0px;
				}
				&:nth-child(3n + 1)
				{
					margin-left:0px;
				}
			}
		}
	}
	@media(max-width:767px)
	{
		.data-list
		{
			li
      {
        margin:0 10px 50px 10px;
        width:calc(50% - 10px);
        &:nth-child(2n)
        {
          margin-right: 0px;
        }
        &:nth-child(2n + 1)
        {
          margin-left:0px;
        }
				a
				{
					span
					{
						font-size: 16px;
						font-weight: 400;
						line-height: 24px; /* 150% */
						letter-spacing: 1.44px;
					}
				}
      }
		}
	}
}