body
{
  font-family: 'Noto Sans TC',sans-serif;
  font-size:1em;
  font-weight:300;
  letter-spacing: 10%;
  *[role=link]{
    cursor: pointer;
  }
}



#head
{
  

  background:rgba(68,68,68,0.8);
  backdrop-filter: blur(5px);
//  background-color: rgba(0, 0, 0, .25);
//  backdrop-filter: invert(80%);
  .top
  {
    h4
    {
      color:$main-color;
    }
    ul.top-menu
    {
      li
      {
        a
        {
          color:$main-color;
        }
      }
    }
    ul.socil-menu
    {
      li
      {
        a
        {
          color:#fff;
        }
      }
    }
  }
  .main
  {
    #logo
    {
      a
      {
        display: block;
        picture
        {
          display: block;
          img
          {
            display: block;
          }
        }
      }
    }
  }
  @media(min-width:1200px)
  {
    letter-spacing: 0.1rem;
    .top
    {
      display: flex;
      padding-top:15px;
      padding-bottom:15px;
      border-bottom: 1px solid #fff;
      h4
      {
        width:250px;
      }
      ul
      {
        display: flex;
        &.top-menu
        {
          
          flex:1;
          li
          {
            padding:0 16px;
            border-left: 1px solid $main-color;
            &:first-child
            {
              border-left: 0px;
            }
          }
        }
        &.socil-menu
        {
          li
          {
            padding-left:24px;
            &:first-child
            {
              padding-left:0px;
            }
            a
            {
              i
              {
                padding-right:5px;
              }
            }
          }
        }
      }
    }
    .main
    {
     
      #logo
      {
        a
        {
          picture
          {
            display: block;
            img
            {
              display: block;
              max-width:100%;
              height: 55px;
            }
          }
        }
      }
      #main-menu
      {
        ul
        {
          li
          {
            a
            {
              color:$main-color;
            }
          }
        }
      }
      #tool-menu
      {
        ul
        {
          li
          {
            a
            {
              color:#fff;
            }
          }
        }
      }
      @media(min-width:1200px)
      {
        padding-top:20px;
        padding-bottom:20px;
        display: flex;
        align-items:flex-end;
        
        #logo
        {
          width: 250px;
        }
        #main-menu
        {
          flex:1;
          ul
          {
            display: flex;
            
          }
        }
        #tool-menu
        {
          ul
          {
            display: flex;
            li
            {
              
              a
              {
                font-size:1.5rem;
              }
              
            }
          }
        }
      }
      @media(min-width:1600px)
      {
        #main-menu
        {
          ul
          {
            li
            {
              margin-right:40px;
              &:last-child
              {
                margin-right: 0px;
              }
            }
          }
        }
        #tool-menu
        {
          ul
          {
            li
            {
              margin-right: 64px;
              &:last-child
              {
                margin-right: 0px;
              }
            }
          }
        }
      }
      @media(min-width:1200px) and (max-width:1599px)
      {
        #main-menu
        {
          ul
          {
            li
            {
              margin-right:pxvw(40);
              &:last-child
              {
                margin-right: 0px;
              }
            }
          }
        }
        #tool-menu
        {
          ul
          {
            li
            {
              margin-right: pxvw(64);
              &:last-child
              {
                margin-right: 0px;
              }
            }
          }
        }
      }
    }
  }
  @media(min-width:1200px)
  {
    position: relative;
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;

    z-index:100;
    .top
    {
      .top-menu
      {
        li
        {
          a
          {
            transition-duration:.5s;
            &:hover
            {
              color:#fff;
            }
          }
        }
      }
      .socil-menu
      {
        li
        {
          a
          {
            transition-duration:.5s;
            &:hover
            {
              color:$main-color;
            }
          }
        }
      }
    }
    .main
    {
      #main-menu
      {
        #product-menu
        {
          display: none;
        }
        ul
        {
          li
          {
            a
            {
              transition-duration:.5s;
              &:hover
              {
                color:#fff;
              }
            }
          }
        }
        
      }
      #tool-menu
      {
        
        ul
        {
          li
          {
            a
            {
              transition-duration:.5s;
              &:hover
              {
                color:$main-color;
              }
            }
          }
        }
        
      }
      #menu-bars
      {
        display: none;
      }
      
    }

  }
  @media(max-width:1200px)
  {
    .top
    {
      padding-top:0;
      padding-bottom:0;
      display: flex;
      justify-content:space-between;
      letter-spacing: 1px;
      h4
      {
        line-height:32px;
        font-size:13px;
      }
      .top-menu
      {
        display: none;
      }
      .socil-menu
      {
        display: flex;
        li
        {
          a
          {
            color:#fff;
            i
            {
              line-height:32px;
              width: 32px;
              text-align: center;
              font-size:13px;
            }
            span
            {
              display: none;
            }
          }
        }
      }
    }
    .main
    {
      padding-bottom:10px;
      display: flex;
      justify-content:space-between;
      #logo
      {
        height:50px;
        a
        {
          display: block;
          height: 50px;
          picture
          {
            display: block;
            img
            {
              display: block;
              height: 50px;
            }
          }
        }
      }
      #main-menu
      {
        display: none;
      }
      #tool-menu
      {
        flex:1;
        ul
        {
          display: flex;
          justify-content:flex-end;
          line-height:50px;
          li
          {
            a
            {
              color:#fff;
              width: 30px;
              height: 30px;
              text-align: center;
              display: block;
            }
          }
        }
      }
      #menu-bars
      {
        background-color: rgba(255,255,255,0);
        width: 30px;
        color:#fff;
        border:0px;
        padding:0px;
      }
    }
   
  }

}

#body
{
  
  background-image:url('<?=getSystem("URLPrefix")?>webdata/tplimg/bottom-bg.png');
  background-repeat: no-repeat;
  background-position:left bottom ;
  padding-bottom:pxvw(100);



}

.breadcrumb
{
  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;
        }
      }
    }
  }
}

#foot
{
  background-color: $main-color;
  padding-top:pxvw(50);
  padding-bottom:pxvw(50);
  ul
  {
    li
    {
      a
      {
        color:#fff;
        font-size:16px;
        font-weight: 500;
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    #foot-menu
    {
      width: 70%;
      display: flex;
      justify-content:space-between;
      ul
      {
        li
        {
          padding:0 0 10px 0;
        }
      }
    }
    #foot-social-menu
    {
      width: 30%;
    }
  }
  #foot-social-menu
  {
    display: flex;
    justify-content:center;
    li
    {
      padding:0 10px;
    }
  }
  @media(max-width:767px)
  {
    #foot-menu
    {
      margin-bottom: 10px;
      ul
      {
        display: flex;
        flex-wrap: wrap;
        li
        {
          width: 50%;
          
          padding-bottom:10px;
          
        }
      }
    }
  }
}