.more
{
  
  display: flex;
  a
  {
    padding:8px 40px;
    background-color: $main-color;
    color:#fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px; /* 150% */
    letter-spacing: 1.6px;
    border-radius: 50px;
    transition-duration:.5s;
    &:hover
    {
      color:$main-color;
      background-color: #FFECBE;
    }
  }
}

.icon-more
{
  width: 70px;
  height:70px;
  background-color: #fff;
  color:$text-color;
  border-radius: 100%;
  text-align: center;
  justify-content:center;
  align-items:center;
  display: flex;
  transition-duration:.5s;
  &:hover
  {
    background-color: $text-color;
    color:#fff;
  }
}

#banner
{
  .slider
  {
    display: flex;
    overflow: hidden;
    article
    {
      position: relative;
      width:100%;
      min-width:100%;
      picture
      {
        width:100%;
        display: block;
        img
        {
          display: block;
          width: 100%;
        }
      }
      >div
      {
        position: absolute;
        left:6.25%;
        bottom:6.25%;
        color:#fff;
        h2
        {
          font-size: 42px;
          font-weight: 500;
          line-height: 63px; /* 150% */
          letter-spacing: 4.2px;
          color:#fff;
          span
          {
            display: block;
            font-size: 16px;
            font-weight: 400;
            line-height: 24px; /* 150% */
            letter-spacing: 1.6px;
          }
        }
        p
        {
          font-size: 24px;
          font-weight: 400;
          line-height: 36px; /* 150% */
          letter-spacing: 2.4px;
        }
      }
    }
  }
  @media(min-width:1200px)
  {
    .slider
    {
      article
      {
        >div
        {
          h2
          {
            font-size: 32px;
            font-weight: 400;
            line-height: 48px; /* 150% */
            letter-spacing: 3.2px;
          }
          p
          {
            font-size: 20px;
            font-weight: 400;
            line-height: 30px; /* 150% */
            letter-spacing: 2px;
          }
        }
      }
    }
  }
}

#about
{
  padding-top:150px;
  padding-bottom:150px;
  header
  {
    margin-bottom:50px;
    p
    {
      font-size: 20px;
      font-weight: 400;
      line-height: 30px; /* 150% */
      letter-spacing: 2px;
      color:$text-color;
      margin-bottom:20px;
      padding-bottom:20px;
      border-bottom:1px solid #EDEDED;
    }
    h2
    {
      color:$text-color;
      margin-bottom:15px;
      span
      {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
      }
      font-size: 42px;
      font-weight: 500;
      line-height: 63px; /* 150% */
      letter-spacing: 4.2px;
    }
  }
  .article-list
  {
    article
    {
      margin-bottom:20px;
      border-radius:20px;
      padding:50px 50px 50px 50px;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      color:#fff;
      i
      {
        display: block;
        font-size:50px;
        margin-bottom:5px;
        text-align: center;
      }
      h3
      {
        font-size: 32px;
        font-weight: 400;
        line-height: 48px; /* 150% */
        letter-spacing: 3.2px;
        margin-bottom:15px;
        padding-bottom:15px;
        border-bottom:1px solid #fff;
        text-align: center;
      }
      p
      {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
      }
    }
  }
  @media(min-width:1200px)
  {
    display: flex;
    header
    {
      width: 30%;
      padding-right:3%;
    }

  }
  @media(min-width:768px)
  {
    .article-list
    {
      display: flex;
      flex:1;
      article
      {
        margin-left:2.5%;
        margin-right:2.5%;
        flex:1;
        &:first-child
        {
          margin-left:0px;
        }
        &:last-child
        {
          margin-right:0px;
        }
      }
    }
  }
  @media(min-width:767px)
  {
    header
    {
      p
      {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
      }
      h2
      {
        font-size: 32px;
        font-weight: 400;
        line-height: 48px; /* 150% */
        letter-spacing: 3.2px;
      }
    }
  }
}






#service
{
  margin-bottom:100px;
  .header
  {
    margin-bottom:80px;
    position: relative;
    picture
    {
      width:100%;
      display: block;
      img
      {
        display: block;
        width: 100%;
      }
    }
    header
    {
      
      width:100%;
      color:#fff;
      span
      {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
      }
      >div
      {
        
        h2
        {
          font-size: 42px;
          font-weight: 500;
          line-height: 63px; /* 150% */
          letter-spacing: 4.2px;
        }
        p
        {
          font-family: "Noto Sans TC";
          font-size: 24px;
          font-weight: 400;
          line-height: 36px; /* 150% */
          letter-spacing: 2.4px;

        }
        a
        {
          min-width:70px;
        }
      }
    }
  }

  
  @media(min-width:768px)
  {
    .header
    {
      header
      {
        position: absolute;
        bottom:80px;
        left:0px;
        
        >div
        {
          display: flex;
          h2
          {
            padding-right:10%;
          }
          p
          {
            padding-right:10%;
          }
          
        }
      }
    }
    
  }
  @media(max-width:767px)
  {
    .header
    {
      overflow: hidden;
      margin-bottom:24px;
      >picture
      {
        position: absolute;
        top:0px;
        left:0px;
      }
      header
      {
        position: relative;
        z-index:1;
        padding:100px 10px;
        top:0px;
        left:0px;
        text-align: center;
        >div
        {
          h2
          {
            padding:10px 0;
            font-size: 32px;
            font-weight: 400;
            line-height: 48px; /* 150% */
            letter-spacing: 3.2px;
          }
          p
          {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px; /* 150% */
            letter-spacing: 1.6px;

            margin-bottom:25px;
          }
          >a.icon-more
          {
            margin:0 auto;
          }
        }
      }
    }
  }

  .foot
  {
    .contact
    {
      position: relative;
      overflow: hidden;
      display: flex;
      align-items:flex-end;
      border-radius: 20px;
      picture
      {

        position: absolute;
        top:0px;
        left:0px;
        width:100%;
        display: block;
        height:100%;
        img
        {
          object-fit: cover;
          display: block;
          width: 100%;
          height:100%;
        }
      }
      >div
      {
        position: relative;
        z-index:1;
        padding:45px 90px 45px 90px;
        text-align: center;
        color:#fff;        
        h2
        {
          font-size: 24px;
          font-weight: 400;
          line-height: 36px; /* 150% */
          letter-spacing: 2.4px;
          padding-bottom:10px;
          margin-bottom:10px;
          border-bottom: 1px solid #fff;
        }
        p
        {
          margin-bottom:20px;
          font-size: 16px;

          font-weight: 400;
          line-height: 24px; /* 150% */
          letter-spacing: 1.6px;
        }
        .more
        {
          justify-content:center;
          a
          {
            background-color: #fff;
            color:$text-color;
            &:hover
            {
              background-color: $main-color;
            }
          }
        }
      }
    }
    ul
    {
      display: flex;
      flex-wrap:wrap;
      li
      {
        a
        {
          display: block;
          text-align: center;
          picture
          {
            display: block;
            width: 100%;
            margin-bottom:15px;
            img
            {
              display: block;
              width:100%;
            }
          }
          div
          {

            color:$text-color;
            font-size: 20px;
            font-weight: 400;
            line-height: 30px; /* 150% */
            letter-spacing: 2px;
            display: flex;
            justify-content:center;
            align-items:center;
          }
        }
      }
    }
    @media(min-width:1200px)
    {
      display: flex;
      .content
      {
        width: 18.75%;
      }
      ul
      {
        flex:1;
        margin-left:4.8%;
        padding-left:4.8%;
        border-left:1px solid #EDEDED;
        li
        {
          margin:0 3.5% 3.5% 3.5%;
          width: calc(79% / 4);
          
        }
      }
    }
    @media(max-width:1199px)
    {
      .contact
      {
        margin-bottom:50px;
      }
      ul
      {
        li
        {
          margin:0 10px 20px 10px;
          width:calc((100% - 60px) / 4);
        }
      }
    }
    @media(min-width:768px)
    {
      ul
      {
        li
        {
          &:nth-child(4n)
          {
            margin-right:0px;
          }
          &:nth-child(4n + 1)
          {
            margin-left: 0px;
          }
        }
        
      }
    }
    @media(max-width:767px)
    {
      ul
      {
        li
        {
          width: calc(50% - 10px);
          &:nth-child(2n)
          {
            margin-right:0px;
          }
          &:nth-child(2n + 1)
          {
            margin-left: 0px;
          }
        }
      }
    }
  }
}


#knowledge
{
  margin-bottom:100px;
  h2
  {
    text-align: center;
    font-size: 42px;
    font-weight: 500;
    line-height: 63px; /* 150% */
    letter-spacing: 4.2px;
    margin-bottom:15px;
    span
    {
      display: block;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
    }
  }
  .more
  {
    justify-content:center;
    margin-bottom:40px;
    a
    {
      background-color: $text-color;
      color:#fff;
      &:hover
      {
        background-color:$main-color;
      }
    }
  }
  article
  {
    color:$text-color;
    margin-bottom:30px;
    picture
    {
      display: block;
      width:100%;
      border-radius: 30px;
      overflow: hidden;
      padding-bottom:22px;
      img
      {
        display: block;
        width: 100%;
      }
    }
    time
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 1.6px;
    }
    h3
    {
      padding:5px 0;
      font-size: 20px;
      font-weight: 400;
      line-height: 30px; /* 150% */
      letter-spacing: 2px;
      
      a
      {
        transition-duration:.5s;
        color:$text-color;
        &:hover
        {
          color:$main-color;
        }
      }
    }
    p
    {
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 1.6px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  @media(min-width:768px)
  {
    .article-list
    {
      display: flex;
      article
      {
        margin:0 10px;
        width: calc((100% - 40px) / 3);
        &:nth-child(3n)
        {
          margin-right:0;
        }
        &:nth-child(3n + 1)
        {
          margin-left: 0;
        }
      }
    }
  }
}


#news
{
  margin-bottom:100px;
  header
  {
    display: flex;
    margin-bottom:15px;
    h2
    {
      flex:1;
      color:$text-color;
      font-size: 42px;
      font-weight: 500;
      line-height: 63px; /* 150% */
      letter-spacing: 4.2px;
      span
      {
        display: block;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px; /* 150% */
        letter-spacing: 1.6px;
      }
    }
    .more
    {
      justify-content:flex-end;
      align-items:flex-end;
      a
      {
        background-color: $text-color;
        &:hover
        {
          background-color: $main-color;
        }
      }
    }
  }
  .article-list
  {
    border-top:1px solid #898989;
    article
    {
      border-bottom: 1px solid #898989;
      display: flex;
      font-size: 16px;
      font-weight: 400;
      line-height: 24px; /* 150% */
      letter-spacing: 1.6px;
      time
      {
        
      }
      .group
      {
        display: flex;
        align-items:center;
        color:$text-color;
        &::before
        {
          content:' ';
          margin-right:20px;
          min-width:13px;
          height:13px;
          background-color: #FFECBE;
          border-radius: 100%;
          color:$text-color;
        }
      }
      h3
      {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        a
        {
          color:$text-color;
        }
      }
      p
      {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      @media(min-width:768px)
      {
        padding:27px 20px;
        align-items:center;
        time
        {
          min-width:120px;
        }
        .group
        {
          min-width:240px;
        }
        h3
        {
          
          width:20%;
        }
        p
        {
          
          padding:20px;
          flex:1;
        }
        .material-symbols-outlined
        {
          width:30px;
          color:$text-color;
        }
      }
      @media(max-width:767px)
      {
        padding:10px 0;
        flex-wrap:wrap;
        time
        {
          min-width:120px;
        }
        h3
        {
          width: 100%;
          padding:15px 0;
          font-size: 20px;
          font-weight: 400;
          line-height: 30px; /* 150% */
          letter-spacing: 2px;
        }
        p
        {
          width: calc(100% - 30px);
        }
        .material-symbols-outlined
        {
          width:30px;
          color:$text-color;
        }
      }
    }

  }
}

#feedback
{
  margin-bottom:100px;
}