section
{

	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;
			max-width: 570px;
			margin:0 auto;
		}
		@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;
	}
	#content
	{
		font-size: 16px;
		font-weight: 400;
		line-height: 24px; /* 150% */
		letter-spacing: 1.44px;
		margin-bottom:50px;
	}
	.article-list
	{
		article
		{
			padding-top:100px;
			padding-bottom:100px;
			color:#fff;
			h2
			{
				font-size: 20px;
				font-weight: 700;
				line-height: 30px; /* 150% */
				letter-spacing: 1.8px;
				a
				{
					color:$main-color;
					transition-duration:0.5s;
					&:hover
					{
						color:#002D5E;
					}
				}
			}
			p
			{
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				line-height: 24px; /* 150% */
				letter-spacing: 1.44px;
			}
			ul
			{
				li
				{
					font-size: 16px;
					font-weight: 400;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
				}
				&.text-list
				{
					padding-top:40px;
					list-style-type: disc;
					list-style-position: inside;
				}

				&.icon-list
				{
					width: 300px;
					padding-top:40px;
					display: flex;
					flex-wrap:wrap;

					li
					{
						width:140px;
						text-align: center;
						margin-bottom:20px;
						i
						{
							display: block;
							margin:0 auto 15px auto;
							font-size:60px;
						}
						span
						{
							display: block;
						}
					}
				}
			}
			.more
			{
				display: flex;
				a
				{
					height: 100px;
					display: flex;
					justify-content:center;
					align-items:center;
					width: 100px;
					background-color: #fff;
					border-radius: 100%;
					color:$main-color;
				}
			}

			.photo
			{
				overflow:hidden;
				ul
				{
					display: flex;
					li
					{
						margin-right: 2%;
						picture
						{
							display: block;
							min-width: 280px;
							img
							{
								display: block;
								width: 100%;
							}
						}
					}
					&.typeb
					{
						flex-wrap: wrap;
						li
						{
							margin:2%;
							width: calc(92% / 3);
							&:nth-child(3n)
							{
								margin-right: 0px;
							}
							&:nth-child(3n + 1)
							{
								margin-left:0px;
							}
							picture
							{
								min-width: 100%;
							}
						}
					}
				}
				>picture
				{
					display: block;
					img
					{
						display: block;
						width: 100%;
					}            
				}
			}
			@media(min-width:768px)
			{
				display: flex;
				.data
				{
					width: 40%;
					min-width:370px;
          p
					{
						max-width: 370px;
					}
				}
				.photo
				{
					flex:1;
					padding-right:10px;
					
				}
				.more
				{
					width: 100px;
					min-width: 100px;
					
					align-items:center;
					a
					{
						height: 100px;
						display: flex;
						justify-content:center;
						align-items:center;
						width: 100%;
						background-color: #fff;
						border-radius: 100%;
						color:$main-color;
					}
				}
				&:nth-child(4n + 1)
				{
					.data
					{
						padding-right:20px;
						
					}
				}
				&:nth-child(4n + 1)
				{
					border-radius:0 0 50% 0;
				}
				&:nth-child(4n + 3)
				{
					border-radius:20% 0 0  0;
					
				}
			}
			@media(max-width:767px)
			{

				.more
				{
					justify-content:center;
					padding:50px 0;
				}
			}
			
			
			&:nth-child(2n + 1)
			{
				background-color: $main-color;
				padding-top:50px;
				padding-bottom:50px;
				.data
				{
					h2
					{
						a
						{
							color:#fff;
						}
					}
				}
			}
			&:nth-child(2n)
			{
				color:$main-color;
				.more
				{
					a
					{
						background-color: $main-color;
						color:#fff;
					}
				}
			}
		}
		
	}
}