#head
{
  position: relative;
  a
  {
    color:$text-color;
  }
  #logo
  {
    a
    {
      .white
      {
        display: none;
      }
      .black
      {
        display: block;
      }
    }
  }
  #main-menu
  {
    ul
    {
      li
      {
        a
        {
          color:$text-color;
        }
      }
    }
  }
  #tool-menu
  {
    #lang-menu
    {
      i
      {
        color:$text-color;
      }
      ul
      {
        li
        {
          a
          {
            color:$text-color;
          }
        }
      }
    }
    .socil
    {
      border-color:$text-color;
      color:$text-color;
    }
  }
  #menu-button
  {
    border-color:$text-color;
    color:$text-color;
  }
}

#breadcrumb
{
  ul
  {
    li
    {
      a
      {
        color:$text-color;
      }
      &::after
      {
        color:$text-color;
      }
    }
  }
}


header
{
  padding-top:80px;
  padding-bottom:80px;
  border-bottom: 1px solid $grey-color;
  margin-bottom:80px;
  h1
  {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px; /* 150% */
    letter-spacing: 0.72px;
  }
}
#content
{
  margin-bottom:80px;
  >picture
  {
    margin-bottom:80px;
    display: block;
    width: 100%;
    img
    {
      display: block;
      width: 100%;
    }
  }
  .content
  {
    p
    {
      padding-bottom:20px;
    }
  }

  .more
  {
    display: flex;
    justify-content:flex-end;
    align-items:flex-end;
    a
    {
      border:2px solid $main-color;
      color:#fff;
      background-color: $main-color;
      padding:16px 64px;
      transition-duration:.5s;
      &:hover
      {
        background-color: #fff;
        color:$main-color;
        border-radius: 5px;
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    flex-wrap:wrap;
    .content
    {
      width: 50%;
    }
    .more
    {
      width: 50%;
    }
  }
  @media(max-width:767px)
  {
    .content
    {
      margin-bottom:70px;
    }
    .more
    {
      a
      {
        width: 100%;
        text-align: center;
      }
    }
  }
}

#info
{
  margin-bottom:80px;
  h2
  {
    font-size: 24px;
    font-weight: 400;
    line-height: 36px; /* 150% */
    letter-spacing: 0.48px;
    padding-bottom:70px;
    margin-bottom:60px;
    border-bottom: 1px solid $grey-color;
  }
  dl
  {
    padding:16px 0;
    dt
    {
      font-size: 18px;
      font-weight: 400;
      line-height: 28px; /* 155.556% */
      letter-spacing: 0.36px;
    }
    dd
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 0.32px;
    }
    @media(min-width:768px)
    {
      display: flex;
      dt
      {
        width: 50%;
      }
    }
  }
  ul
  {
    padding-top:80px;
    li
    {
      picture
      {
        display: block;
        width: 100%;
        img
        {
          display: block;
          width: 100%;
        }
      }
    }
  }
}

#app
{
  background-color: #F7F7F7;
  padding-top:80px;
  padding-bottom:80px;
  h2
  {
    margin-bottom:72px;
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    line-height: 54px; /* 150% */
    letter-spacing: 0.72px;
  }
  .section
  {
    .article
    {
      picture
      {
        display: block;
        width: 100%;
        margin-bottom:50px;
        img
        {
          display: block;
          width: 100%;
        }
      }
      h3
      {
        font-size: 24px;
        font-weight: 400;
        line-height: 36px; /* 150% */
        letter-spacing: 0.48px;
        margin-bottom:32px;
      }
    }
  }
  @media(min-width:768px)
  {
    
    .section
    {
      display: flex;
      flex-wrap:wrap;
      .article
      {
        width: 48%;
        margin:2%;
        &:nth-child(2n)
        {
          margin-right:0;
        }
        &:nth-child(2n + 1)
        {
          margin-left:0;
        }
      }
    }
    
  }
  @media(max-width:767px)
  {
    .section
    {
      .article
      {
        margin-bottom:50px;
      }
    }
  }
}