body
{
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100%;
	background-image:url('<?=userimg($article->bg->data)?>');
	#body
	{
		padding-top:200px;
		article
		{
			.breadcrumb
			{
				li
				{
					color:rgba(255,255,255,.6);
					a
					{
						color:rgba(255,255,255,.6);
						&:hover
						{
							color:#fff;
						}
					}
					&:last-child
					{
						a
						{
							color:#fff;
						}
					}
				}
			}
			#main-photo
			{
				display: block;
				max-width: 940px;
				margin:0 auto;
				margin-bottom:95px;
				img
				{
					display: block;
					width: 100%;
				}
			}
			h1
			{
				text-align: center;
				color:$main-color;
				font-size: 24px;
				font-weight: 700;
				line-height: 36px; /* 150% */
				letter-spacing: 2.16px;
				margin-bottom:40px;
			}
      #user-page
      {
        margin-bottom:20px;
        width: 100%;
        display: flex;
        justify-content:center;
        a
        {
          background-color: $main-color;
          color:#fff;
          border:1px solid $main-color;
          padding:15px 78px;
          border-radius: 50px;
          font-size: 20px;
          font-weight: 500;
          line-height: 30px; /* 150% */
          letter-spacing: 1.8px;
        }
      }
			#content
			{
        
				.logo
				{
					margin-bottom:50px;
					display: block;
					img
					{
						display: block;
						width: 100%;
					}
				}
				.content
				{	
					margin-bottom: 50px;;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px; /* 150% */
					letter-spacing: 1.44px;
					color:#002D5E;
					width:pxp(1400,710);
					a
					{
						color:$main-color;
					}
					h2,h3,h4,h5
					{
						font-size: 16px;
						font-weight: 700;
						line-height: 24px; /* 150% */
						letter-spacing: 1.44px;
						padding-left:15px;
						border-left:1px solid $main-color;
						margin-bottom:15px;
					}
					p
					{
						margin-bottom:30px;
					}
				}
			}
			#photo-list
			{
				margin-bottom:80px;
        max-width: 800px;
        margin-left:auto;
        margin-right:auto;
				li
				{
					picture
					{
						display: block;
						img
						{
							display: block;
							width: 100%;
						}
					}
				}
			}
		}
		
	}
	@media(max-width:1199px)
	{
		#body
		{
			padding-top:100px;
			#content
			{
				.content
				{
					flex:1;
				}
			}
		}
	}
	@media(min-width:768px)
	{
		#body
		{
			#content
			{
				display: flex;
				.logo
				{
					width:pxp(1400,450);
					padding-right:pxp(1400,140);

				}
			}
		}
	}
	@media(max-width:767px)
	{
		background-size: 200%;
		#body
		{
			article
			{
				#content
				{
					.logo
					{
						max-width: 300px;
						margin:0 auto 80px auto;
					}
					.content
					{
						width: 100%;
					}
				}
			}
			
		}
	}
	
}