*[role=link]
{
  cursor: pointer;
}
*
{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  font-family: "Noto Sans TC";
  
}
body
{
  color:$text-color;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
  letter-spacing: 0.32px;
}
.wrap
{
  padding-left:3.125%;
  padding-right:3.125%;
  @media(max-width:1848px)
  {
    padding-left:24px;
    padding-right:24px;
  }
}
.m-wrap
{
  padding-left:calc(50% - 664px);
  padding-right:calc(50% - 664px);
  @media(max-width:1328px)
  {
    padding-left:24px;
    padding-right:24px;
  }
}
#head
{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  z-index:1000;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px; /* 150% */
  #logo
  {
    a
    {
      display: block;
      picture
      {
        display: block;
        img
        {
          display: block;
          max-width:100%;
        }
      }
      .black
      {
        display: none;
      }
    }
  }
  #main-menu
  {
    ul
    {
      li
      {
        a
        {
          color:#fff;
        }
      }
    }
  }
  #tool-menu
  {
    #lang-menu
    {
      position: relative;
      margin-right:40px;
      width:80px;
      display: flex;
      justify-content:flex-end;
      i
      {
        line-height: 24px;
        color:#fff;
        transition-duration:.5s;
      }
      ul
      {
        position: absolute;
        top:0px;
        left:0px;
        li
        {
          
          &:not(:first-child)
          {
            opacity:0;
            display: none;
          }
        }
      }
      label
      {
        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        cursor: pointer;
        input
        {
          display: none;
        }
      }
      &:has(input:checked)
      {
        i
        {
          transform:rotate(180deg);
        }
        ul
        {
          li
          {
            &:not(:first-child)
            {
              display: block;
              opacity:1;
            }
          }
        }
      }
    }
    .socil
    {
      border:1px solid #fff;
      padding:16px 32px;
      i
      {
        margin-right:21px;
      }
    }
    a
    {
      color:#fff;
    }
  }
  #menu-button
  {
    border:1px solid #fff;
    padding:0 10px;
    display: flex;
    align-items:center;
    justify-content:center;
    position: relative;
    cursor: pointer;
    color:#fff;
    .my-close
    {
      display: none;
    }
    input
    {
      cursor: pointer;
      position: absolute;
      top:0px;
      left:0px;
      margin:0px;
      width: 100%;
      height:100%;
      padding:0px;
      opacity: 0;
    }
  }

  @media(min-width:1401px)
  {
    display: flex;
    align-items:center;
    padding-top:32px;
    padding-bottom:32px;
    #logo
    {
      width: 400px;
    }
    #main-menu
    {
      flex:1;
      ul
      {
        width: 100%;
        display: flex;
        justify-content: center;
        li
        {
          padding:0 20px;
          &:first-child
          {
            padding-left:0px;
          }
          &:last-child
          {
            padding-right:0px;
          }
          a
          {
            
            display: block;
          }
        }
      }
    }
    #tool-menu
    {
      width: 400px;
      display: flex;
      justify-content:flex-end;
      align-items:center;
    }
    #menu-button
    {
      display: none;
    }
  }
  @media(max-width:1400px)
  {
    padding:24px;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px; /* 157.143% */
    letter-spacing: 0.28px;
    #logo
    {
      a
      {
        picture
        {
          img
          {
            height:36px;
          }
        }
      }
    }
    #main-menu
    {
      display: none;
    }
    #tool-menu
    {
      margin-right:16px;
      flex:1;
      display: flex;
      justify-content:flex-end;
      #lang-menu
      {
        display: none;
      }
      .socil
      {
        padding:6px 12px;
        i
        {
          margin-right:5px;
        }
      }
    }
    
    &:has(input[name="menu-button"]:checked){
      background-color: #fff;
      flex-wrap:wrap;
      overflow-y:auto;
      max-height:100%;
      #logo
      {
        display: none;
      }
      #main-menu 
      {
        width:100%;
        order:1;
        display: block;
        padding-top:50px;
        padding-bottom:50px;
        ul
        {
          li
          {
            padding:8px 0;
            margin-bottom:8px;
            a
            {
              color:$text-color;
            }
          }
        }
      }
      #tool-menu
      {
        justify-content:space-between;
        align-items:center;
        #lang-menu
        {
          display: flex;
          i
          {
            color:$text-color;
          }
          ul
          {
            li
            {
              a
              {
                color:$text-color;
              }
            }
          }
        }
        .socil
        {
          border:1px solid $text-color;
          color:$text-color;
        }
      }
      #menu-button
      {
        border-color:$text-color;
        .my-menu
        {
          display: none;
        }
        .my-close
        {
          color:$text-color;
          display: block;
        }
      }
    }
  }
}


#breadcrumb
{
  ul
  {
    display: flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    li
    {
      a
      {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px; /* 157.143% */
        letter-spacing: 0.28px;
        color:#fff;
      }
      &::after
      {
        color:#fff;
        content:'-';
        padding:0 8px;
      }
      &:last-child
      {
        &::after
        {
          display: none;
        }
      }
    }
  }
}


#foot
{
  padding-top:100px;
  padding-bottom:30px;
  background-color: #fff;
  position: relative;
  z-index:1;

  .photo-list
  {
    margin-bottom:80px;
    >div
    {
      position: relative;
      picture
      {
        display: block;
        width:100%;
        overflow: hidden;
        img
        {
          display: block;
          width: 100%;
          object-fit: cover;
        }
      }
      >div
      {
        position: absolute;
        top:50%;
        left: 0%;
        transform: translate(0%, -50%);
        min-width:100%;
        h3
        {
          margin-bottom:8px;
          display: flex;
          justify-content:space-between;
          a
          {
            color:#fff;
            font-size: 36px;
            font-weight: 700;
            line-height: 54px; /* 150% */
            letter-spacing: 0.72px;
          }
          i
          {
            color:#fff;
            font-size:36px;
          }
        }
        p
        {
          color:#fff;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px; /* 150% */
          letter-spacing: 0.32px;
        }
      }
    }
    @media(min-width:768px)
    {
      display: flex;
      >div
      {
        div
        {
          width:50%;
          padding:0 5%;
        }
      }
    }
    @media(max-width:767px)
    {
      padding:0px;
      margin-bottom:40px;
      >div
      {
        picture
        {
          img
          {
            height:100vw;
          }
        }
        div
        {
          padding:56px;
        }
      }
    }
  }

  .menu
  {
    margin-bottom:40px;
    ul
    {
      display: flex;
      li
      {
        a
        {
          color:$text-color;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px; /* 150% */
          letter-spacing: 0.32px;
          transition-duration:.5s;
          &:hover
          {
            color:$main-color;
          }
        }
      }
    }
    @media(min-width:768px)
    {
      display: flex;
      justify-content:space-between;
      ul
      {
        li
        {
          padding-left:40px;
          &:first-child
          {
            padding-left:0px;
          }
        }
      }
    }
    @media(max-width:767px)
    {
      picture
      {
        display: block;
        margin-bottom:40px;
      }
      ul
      {
        flex-wrap:wrap;
        li
        {
          width: 50%;
          margin-bottom:12px;
        }
      }
    }
  }

  .contact-list
  {
    picture
    {
      display: block;
      img
      {
        display: block;
        max-width: 100%;
      }
    }
    ul
    {
      li
      {
        a
        {
          color:$text-color;
          transition-duration:.5s;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
          letter-spacing: 0.28px;
          &:hover
          {
            color:$main-color;
          }
        }
      }
    }
    @media(min-width:768px)
    {
      display: flex;
      justify-content:space-between;
    }
  }
}