#list-header
{
  background-image: url('<?=userimg($article->photo)?>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding-top:250px;
  padding-bottom:100px;
  position: relative;
  h1,h2
  {
    color:#fff;
    font-size:30px;
    letter-spacing: 3px;
    margin-bottom:8px;
  }
  nav
  {
    ul
    {
      display: flex;
      flex-wrap:wrap;
      color:#fff;
      li
      {
        font-size:15px;
        letter-spacing: 0.75px;
        &::after
        {
          content:'/';
          padding:0 8px;
        }
        a
        {
          color:#fff;
        }
        &:last-child
        {
          a
          {
            color:$main-color;
          }
          &::after
          {
            display: none;
          }
        }
      }
    }
  }

  &::after
	{
    z-index:-1;
		content: ' ';
		background-image:url('<?=getSystem("URLPrefix")?>webdata/tplimg/color_white_bg.svg');
		background-size:100%;
		width: 100%;
		height:17.35vw;
		position: absolute;
		top:100%;
		left:0px;
	}
}

#main-product-menu
{
  padding-top:88px;
  padding-bottom:88px;
  ul
  {
    display: flex;
    li
    {
      width:calc(100% / 6);
      a
      {
        display: block;
        padding-top:16px;
        padding-bottom:16px;
        text-align: center;
        color:#444;
      }
      &.active
      {
        a
        {
          color:$main-color;
        }
      }
    }
  }
}
#second-product-menu
{
  background-color: $main-color;
  h2
  {
    color:#fff;
    font-size:15px;
    letter-spacing: 1.5px;
    padding:5px 0;
  }
  ul
  {
    li
    {
      select
      {
        border:0px;
        background:rgba(0,0,0,0);
        color:#fff;
        width:100%;
        font-size:15px;
        letter-spacing: 1.5px;
        padding:5px 0;
        border-bottom: 1px solid #fff;
      }
    }
  }
  @media(min-width:1200px)
  {
    padding: 40px 10px 40px 30px;
    display: flex;    
    h2
    {
      width: 25%;
      color:#fff;
    }
    ul
    {
      display: flex;
      flex:1;
      li
      {
        width: calc(100% / 3);
        padding-right:20px;
      }
    }
  }
}
#product-list
{
  display: flex;
  flex-wrap:wrap;
  article
  {
    a
    {
      display: block;
      picture
      {
        display: block;
        margin-bottom:20px;
        position: relative;
        padding-top:100%;
        background-color: #fff;
        img
        {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          display: block;
          width: 100%;
        }
      }
      h2
      {
        color:#444;
        margin-bottom:10px;
        font-size:15px;
      }
      span
      {
        color:#EA4949;
        font-size:15px;
        letter-spacing: 1.5px;
      }

    }
  }
  @media(min-width:1200px)
  {
    article
    {
      width: calc((100% - 120px) / 4);
      margin:0 20px 40px 20px;
      
      &:nth-child(4n)
      {
        margin-right: 0px;
      }
      &:nth-child(4n + 1)
      {
        margin-left: 0px;
      }
    }
  }
}