article
{
	font-size: 16px;
	font-weight: 400;
	line-height: 26px; /* 162.5% */
	letter-spacing: 0.8px;
	@media(min-width:1200px)
	{
		padding-top:270px;
		padding-bottom:130px;
	}
	@media(max-width:1199px)
	{
		padding-top:130px;
		padding-bottom:100px;
	}
	.breadcrumb
	{
		display: flex;
		flex-wrap:wrap;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: 26px; /* 162.5% */
		letter-spacing: 0.8px;
		color:#444;
		margin-bottom:100px;
		li
		{
			a
			{
				color:#444;
				transition-duration:.5s;
				&:hover
				{
					color:$main-color;
				}
			}
			&::after
			{
				content:'/';
				padding:0 8px;
			}
			&:last-child
			{
				a
				{
					color:$main-color;
					&:hover
					{
						color:#444;
					}
				}
				&::after
				{
					display: none;
				}
			}
		}
	}

	#article-header
	{
		#slider
		{
			overflow: hidden;
			margin-bottom:90px;
			ul
			{
				
				display: flex;
				li
				{
					min-width:100%;
					picture
					{
						display: block;
						width:100%;
						img
						{
							display: block;
							width: 100%;
						}
					}
				}
				&.main
				{
					margin-bottom:24px;
				}
				&.thumbs
				{
					flex-wrap: wrap;
					li
					{
						padding:10px;
						border:1px solid rgba(0,0,0,0);
						cursor: pointer;
						transition-duration:.5s;

						&.active
						{
							border:1px solid #444;
						}
						&:hover
						{
							border-color:#ccc;
							&.active
							{
								border-color:#444;
							}
						}
					}
				}
			}
			
		}
		#detail
		{
			margin-bottom:90px;
			h1
			{
				font-size: 32px;
				font-weight: 400;
				line-height: 48px; /* 150% */
				letter-spacing: 1.6px;
				margin-bottom:24px;
			}
			h2
			{
				font-weight: 600;
				margin-bottom:10px;
			}
			p
			{
				margin-bottom:48px;
			}
			ul
			{
				margin-bottom:48px;
			}
			label
			{
        display: block;
				cursor: pointer;
        text-align: center;
				svg
				{
					margin-right:10px;
				}
				font-size: 16px;
				font-style: normal;
				font-weight: 400;
				line-height: 26px; /* 162.5% */
				letter-spacing: 0.8px;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				display: block;
				border:0px;
				background-color: $main-color;
				color:#fff;
				padding:16px 0;
				border-radius: 8px;
			}
		}
		@media(min-width:1200px)
		{
			display: flex;
			#slider
			{
				width: 50%;
				margin-right:5%;
				ul
				{
					&.thumbs
					{
						li
						{
							min-width:15%;
							margin:1%;
							box-sizing: border-box;

							&:nth-child(6n)
							{
								margin-right:0px;
							}
							&:nth-child(6n + 1)
							{
								margin-left:0px;
							}
						}
					}
				}
			}
      #detail
      {
        width: 50%;
      }
		}
		@media(max-width:1199px)
		{
			#slider
			{
				ul
				{
					&.thumbs
					{
						li
						{
							min-width:calc(94% / 4);
							margin:1%;
							box-sizing: border-box;
							&:nth-child(4n)
							{
								margin-right:0px;
							}
							&:nth-child(4n + 1)
							{
								margin-left:0px;
							}
						}
					}
				}
			}				
			
		}
	}


	#group-note
	{
		color:#a8a8a8;
		margin-bottom:28px;
	}
	#content
	{
		max-width:700px;
		color:#444;
		margin-bottom:48px;
		h2,h3,h4,h5
		{
			margin:10px 0;
			color:$main-color;
		}
		p
		{
			margin:10px 0;
		}
		img
		{
			display: block;
			width: 100%;
		}
	}
	#main-photo
	{
		margin-bottom:48px;
	}
	picture
	{
		display: block;
		img
		{
			display: block;
			width: 100%;
		}
	}

	#photo-list
	{
		.article
		{
			margin-bottom:48px;
			.text
			{
				margin-bottom:48px;
				h2
				{
					font-size: 32px;
					font-style: normal;
					font-weight: 400;
					line-height: 48px; /* 150% */
					letter-spacing: 1.6px;
					margin-bottom:16px;
					color:$main-color;
					max-width: 760px;
				}
				p
				{
					font-size: 16px;
					font-weight: 400;
					line-height: 26px; /* 162.5% */
					letter-spacing: 0.8px;
					max-width: 760px;
				}
			}
			.photo
			{
				picture
				{
					margin-bottom:10px;
				}
				figcaption
				{
					font-size: 14px;
					font-weight: 400;
					line-height: 20px; /* 142.857% */
					letter-spacing: 0.7px;
					color:#444;
				}
			}
			.photo-list
			{
				display: flex;
				justify-content:space-between;
				figure
				{
					width: calc(50% - 10px);
					margin:0 10px 20px 10px;

				}
			}
			&:has(.photo-list)
			{
				.photo-list
				{
					display: flex;
				}
			}
		}
		@media(min-width:768px)
		{
			.article
			{
				display: flex;
				justify-content:space-between;
				>div
				{
					width: calc(50% - 10px);
				}
				&:has(.photo-list)
				{
					display: block;
					>div
					{
						width: 100%;
					}
				}
			}

		}
	}
}

#furnish-from
{
  position: fixed;
  overflow-y:auto;
  padding-bottom:100px;
  top:0px;
  left:0px;
  z-index:5000;
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  display: none;
  
  #open-tool
  {
    display: none;
  }
  &:has(input#open-tool:checked){
    display: block;
  }
  .card
  {
    position: relative;
    >label[for=open-tool]
    {
      position: absolute;
      right:10px;
      top:10px;
      cursor: pointer;
    }
    margin:auto;
    border:10px solid $main-color;
    background-color: #fff;
    max-width:800px;
    padding:20px;
    border-radius:10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px; /* 162.5% */
    letter-spacing: 0.8px;
    .form-group
    {
      margin-bottom:24px;
      >label
      {
        display: block;
        line-height: 52px;
        font-weight: 600;
      }
      input[type=text],input[type=email],input[type=number]
      {
        border:1px solid #A8A8A8;
        border-radius: 5px;
        width: 100%;
        display: block;
        padding:12px 24px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
        letter-spacing: 0.8px;
      }
      ul
      {
        display: flex;
        justify-content:space-between;
        li
        {

          label
          {
            text-align: center;
            display: block;
            background-color: #f1f1f1;
            cursor: pointer;
            padding: 10px 0px;
            border-radius: 5px;
            input
            {
              display: none;
            }
            &:has(input:checked){
              background-color: $main-color;
              color:#fff;
            }
          }
        }
      }
      &.has-error
      {
        >label
        {
          code
          {
            color:#a00;
          }
        }
      }
    }
    .card-foot
    {
      display: flex;
      >*
      {
        cursor: pointer;
        width: calc(50% - 10px);
        margin:0 10px;
        text-align: center;
        border-radius: 5px;
        line-height: 52px;
        padding:0px;
        background-color: #f1f1f1;
        &:nth-child(2n)
        {
          margin-right: 0px;
        }
        &:nth-child(2n + 1)
        {
          margin-left:0px;
        }
      }
      button
      {
        background-color: $main-color;
        color:#fff;
        border:0px;
        padding:0px;
        line-height:52px;
      }
    }
  }
  @media(min-width:1200px)
  {
    padding-top:150px;
    .card
    {
      .form-group
      {
        ul
        {
          flex-wrap:wrap;
          justify-content:flex-start;
          li
          {
            width:calc((100% - 80px) / 5);
            margin:10px;
            &:nth-child(5n + 1)
            {
              margin-left:0px;
            }
            &:nth-child(5n)
            {
              margin-right:0px;
            }
          }
        }
      }
    }
  }
  @media(max-width:1199px)
  {
    padding:20px;
    .card
    {
      .form-group
      {
        ul
        {
          justify-content:flex-start;
          flex-wrap: wrap;
          li
          {
            width: calc(90% / 4);
            margin:1%;

            &:nth-child(4n)
            {
              margin-right:0px;
            }
            &:nth-child(4n + 1)
            {
              margin-left: 0px;
            }
          }
        }
      }
    }
  }
}

body
{
  &:has(input#open-tool:checked){
    overflow-y:hidden;
    #head
    {
      z-index:0;
    }
  }
}