*[role=link]
{
  cursor: pointer;
}
*
{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  font-family: "Noto Sans TC";
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


.wrap
{
  @media(min-width:1601px)
  {
    padding-left: calc(50% - 790px);
    padding-right:calc(50% - 790px);
  }
  @media(min-width:1921px)
  {
    padding-left: 8.33%;
    padding-right:8.33%;
  }
  @media(max-width:1600px)
  {
    padding-left: 10px;
    padding-right:10px;
  }
  @media(max-width:767px)
  {
    padding-left: 24px;
    padding-right:24px;
  }
}


#head
{
  box-shadow: 0px 0px 6.7px 0px #CB9319;
  border-bottom:1px solid $main-color;
  display: flex;
  padding-top:15px;
  padding-bottom:15px;
  #logo
  {
    display: flex;
    a
    {
      picture
      {
        display: block;
        img
        {
          display: block;
          max-width:100%;
        }
      }
    }
  }
  #main-menu
  {
    li
    {
      a
      {
        color:$text-color;
        font-size: 24px;
        font-weight: 400;
        line-height: 36px;
        transition-duration:.5s;
       
        span
        {
          list-style: 36px;
        }
        &:hover
        {
          color:$main-color;
        }
      }
      &.active
      {
        a
        {
          color:$main-color;
        }
      }
    }
  }
  @media(min-width:1200px)
  {
    #logo
    {
      
      display: flex;
    }
    #main-menu
    {
      flex:1;
      display: flex;
      justify-content:flex-end;
      align-items:center;
      text-align: center;
      li
      {
        padding:0 6px;
        a
        {
          width: 120px;

          color:$text-color;
          display: flex;
          align-items:center;
          justify-content:center;
        }
        &:last-child
        {
          padding-right:0px;
        }
      }
    }
    >label
    {
      display: none;
    }
  }
  @media(max-width:1199px)
  {
    padding:0px;
    flex-wrap:wrap;
    align-items:center;
    #logo
    {
      flex:1;
      padding:15px 0 15px 10px;
    }
    > label
    {
      margin-right:10px;
      width: 50px;
      cursor:pointer;
      display: flex;
      align-items:center;
      justify-content:center;
      position: relative;
      height:50px;
      input
      {
        
        width: 100%;
        height:100%;
        padding:0px;
        margin:0px;
        border:0px;
        position: absolute;
        top:0px;
        left:0px;
        cursor: pointer;
        opacity: 0;
      }
    }
    #main-menu
    {
      display: none;
      width: 100%;
      border-top:1px solid $main-color;
      li
      {
        border-bottom:1px solid $text-color;
        a
        {
          padding:30px 24px;
          display: block;
          font-size: 20px;
          font-weight: 400;
          line-height: 30px; /* 150% */
          &:hover
          {
            background-color: #EDEDED;
          }
        }
      }
    }
    &:has(input[name=main-menu]:checked){
      #main-menu
      {
        display: block;
      }
    }
  }
}


#feedback
{
  h2
  {
    display: flex;
    justify-content:center;
    margin-bottom:60px;
    color:$main-color;
    
    font-size: 42px;
    font-weight: 500;
    line-height: 63px; /* 150% */
    letter-spacing: 4.2px;
    span
    {
      padding-top:10px;
      border-top:1px solid #ededed;
    }
  }

  .feedback-list
  {
    width: 100%;
    >div
    {
      
      padding:20px;
      padding-bottom:130px;
      position: relative;
      box-shadow: 0 0 5px #666;
      border-radius: 10px;
      margin-bottom:30px;
      p
      {
        font-size: 16px;
        font-weight: 400;
        line-height: 150%; /* 24px */
        letter-spacing: 1.6px;
        padding-top:30px;
        padding-bottom:30px;
      }
      .user
      {
        display: flex;
        align-items:center;
        position: absolute;
        bottom:10px;
        width: calc(100% - 40px);
        left:20px;
        span
        {
          flex:1;
        }
        picture
        {
          width:110px;
          height:110px;
          border-radius: 100%;
        }
      }
    }
    @media(min-width:1240px)
    {
      width: 1240px;
      margin:0 auto;
    }
    @media(min-width:768px)
    {
      display: flex;
      >div
      {
        width: calc((100% - 40px) / 3);
        margin:0 10px;
        &:nth-child(3n)
        {
          margin-right:0px;
        }
        &:nth-child(3n + 1)
        {
          margin-left:0px;
        }
      }
      
    }
    @media(min-width:1200px)
    {
      
    }
  }
}



#foot-content
{
  background-image:url('<?=userimg($footContact->bg->data)?>');
  background-position: center;
  background-size: cover;
  text-align: center;
  padding-top:100px;
  padding-bottom:100px;
  p
  {
    font-size: 32px;
    font-weight: 400;
    line-height: 48px; /* 150% */
    letter-spacing: 3.2px;
    color:#fff;
  }
}

#foot-content-form
{
  padding-top:80px;
  padding-bottom:80px;
  .content
  {
    color:$text-color;
    h2
    {
      font-size: 42px;
      font-weight: 500;
      line-height: 63px; /* 150% */
      letter-spacing: 4.2px;
      color:$text-color;
      margin-bottom:15px;
      span
      {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
      }
    }
    ul
    {
      li
      {
        padding-bottom:24px;
        padding-left:24px;
        border-left:1px solid #898989;
        a
        {
          color:$text-color;
          font-size: 20px;
          font-weight: 400;
          line-height: 30px; /* 150% */
          letter-spacing: 2px;
        }
      }
    }
  }
  .form
  {
    background-color: #ffecbe;
    border-radius: 20px;
    .form-group
    {
      margin-bottom:40px;
      label
      {
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; /* 150% */
        letter-spacing: 2px;
        color:#898989;
        margin-bottom:10px;
        display: block;
      }
      input,textarea,select
      {
        
        color:$text-color;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
        display: block;
        width:100%;
        height:50px;
        border:1px solid #898989;
        border-radius: 20px;
        padding:13px 16px;
        margin:0px;
      }
      textarea
      {
        height:300px;
      }
      &.has-error
      {
        label
        {
          color:#a00;
        }
        input,textarea,select
        {
          border-color:#a00;
        }
      }
    }
    .btn
    {
      display: flex;
      justify-content:center;
      button
      {
        padding:0px;
        margin:0px;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
        color:$text-color;
        border-radius: 20px;
        padding:10px 50px;
        border:0px;
        background-color: #fff;
        cursor: pointer;
        transition-duration:.5s;
        &:hover
        {
          background-color: $text-color;
          color:#fff;
        }
      }
    }
  }
  @media(min-width:980px)
  {
    display: flex;
    align-items:center;
    .content
    {
      width: 50%;
    }
    .form
    {
      padding:4% 6%;
      width: 50%;
      
    }
  }
  @media(max-width:979px)
  {
    .content
    {
      margin-bottom:80px;
    }
    .form
    {
      padding:20px;
    }
  }
}


#foot
{
  padding-top:50px;
  padding-bottom:10px;
  background-color: #EDEDED;
  >ul
  {
    display: flex;
    padding-bottom:50px;
    border-bottom:1px solid #1B294F;
    >li
    {
      >a
      {
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; /* 150% */
        letter-spacing: 2px;
        color:$text-color;
        transition-duration:.5s;
        display: block;
        margin-bottom:20px;
        &:hover
        {
          color:$main-color;
        }
      }
      ul
      {
        li
        {
          padding-bottom:10px;
          a
          {
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            letter-spacing: 1.6px;
            color:#898989;
            transition-duration:.5s;
            &:hover
            {
              color:$text-color;
            }
          }
        }
      }
    }
  }
  .info
  {
    ul
    {
      li
      {
        a
        {
          color:$text-color;
          font-size: 16px;
          font-weight: 400;
          line-height: 24px; /* 150% */
          letter-spacing: 1.6px;
        }
      }
    }
  }
  @media(min-width:768px)
  {
    >ul
    {
      >li
      {
        flex:1;
      }
    }
    .info
    {
  
      display: flex;
      align-items:flex-end;
      ul
      {
        flex:1;
        display: flex;
        flex-wrap:wrap;
        li
        {
          padding-right:20px;
        }
      }
    }
  }
  @media(max-width:767px)
  {
    >ul
    {
      flex-wrap:wrap;
      >li
      {
        width: 50%;
        ul
        {
          margin-bottom:20px;
        }
      }
    }
  }
 
}

.breadcrumb
{
  padding-top:30px;
  padding-bottom:30px;
  ul
  {
    display: flex;
    flex-wrap:wrap;
    color:#898989;
    justify-content:flex-end;
    li
    {

      a
      {
        
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
        color:#898989;
      }
      &::after
      {
        line-height: 24px; /* 150% */
        content:' > ';
        padding:0 10px;
      }
      &:last-child
      {
        a
        {
          color:$main-color;
        }
        &::after
        {
          display: none;
        }
      }
    }
  }
}