#top-bg
{
  display: none;
}
#head
{
  position: relative;
}
#body
{
  background: #F6F3D8;
}

header
{
  padding-top:90px;
  padding-bottom:90px;
  h1
  {
    font-size: 32px;
    font-weight: 400;
    line-height: 48px; /* 150% */
    letter-spacing: 1.6px;
    color:#444;
    margin-bottom:8px;
  }
  .breadcrumb
  {
  	margin-bottom:80px;
  	ul
  	{
  		display: flex;
  		flex-wrap:wrap;
  		font-size: 16px;
  		font-style: normal;
  		font-weight: 400;
  		line-height: 26px; /* 162.5% */
  		letter-spacing: 0.8px;
  		color:#000;
  		li
  		{
  			a
  			{
  				color:#000;
  				transition-duration:.5s;
  				&:hover
  				{
  					color:$main-color;
  				}
  			}
  			&::after
  			{
  				content:'/';
  				padding:0 8px;
  			}
  			&:last-child
  			{
  				a
  				{
  					color:$main-color;
  					&:hover
  					{
  						color:#fff;
  					}
  				}
  				&::after
  				{
  					display: none;
  				}
  			}
  		}
  	}

  }
}

main
{
  padding-bottom:100px;
  form
  {
    display: flex;
    input
    {
      width:calc(100% - 50px);
      font-size: 16px;
  		font-weight: 400;
  		line-height: 26px; /* 162.5% */
  		letter-spacing: 0.8px;
      padding:11px 24px;
      border:1px solid #A8A8A8;
      border-radius: 4px;
      background: #fff;
    }
    button
    {
      border:0px;
      background: rgba(255,255,255,0);
      padding:0 10px;
      width:50px;
      text-align: center;
    }

  }
}


section
{
  padding-top:100px;
  display: flex;
  flex-wrap:wrap;
  article
  {
    width:23.5%;
    margin:1%;
    picture
    {
      display: block;
      margin-bottom:16px;
      img
      {
        width:100%;
        display: block
      }
    }
    h2
    {
      margin-bottom:4px;
      a
      {
        color:#444;
        font-size: 16px;
        font-weight: 400;
        line-height: 26px; /* 162.5% */
        letter-spacing: 0.8px;
      }
    }
    .price
    {
      color:#EA4949;
      font-size: 16px;
      font-weight: 400;
      line-height: 26px; /* 162.5% */
      letter-spacing: 0.8px;
      span
      {
        &::before
        {
          font-family:'微軟正黑體';
          content:'$';
        }
      }
    }
  }
  @media(min-width:768px)
  {
    article
    {
      &:nth-child(4n)
      {
        margin-right:0;
      }
      &:nth-child(4n + 1)
      {
        margin-left:0;
      }
    }
  }
  @media(max-width:767px)
  {
    article
    {
      width: calc(50% - 10px);
      margin:0 10px 20px 10px;
      &:nth-child(2n)
      {
        margin-right:0;
      }
      &:nth-child(2n + 1)
      {
        margin-left:0;
      }
    }
  }


}

aside
{
  ul
  {
    display: flex;
    justify-content:center;
    li
    {
      padding-top:50px;
      padding-bottom:50px;
      margin:0 10px;
      a
      {
        display: block;
        border:1px solid #444;
        color:#444;
        padding:5px;
        border-radius: 4px;
      }
      &.active
      {
        a
        {
          border-color:$main-color;
          color:#fff;
          background: $main-color;
        }

      }
    }
  }
}