navbar.scss

$textColor: #a8cc05;
$joinColor: #e3f6d7;
$bgc2: rgb(211, 219, 211);
$bgc: #eee;
$pColor: #555;
$titleSize: 25px;
$h1titleSize: 35px;
// img設定
// object-fit: cover;不變形 占滿整個父層
// object-fit: contain;
//height: auto; /* 高度自动调整，以保持宽高比例 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}

//首頁
body {
  position: relative;
  img.fixed-img {
    min-height: 100vh;
    position: fixed;
    z-index: -5;
    left: 0;
    bottom: 0;
    width: 100%;
    @media (width <= 768px) {
      display: none;
    }
  }
  header.title {
    box-shadow: 0px 3px 4px #aaa;
    width: 100%;
    height: 90px;
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    justify-content: center;
    align-items: center;
    background-image: url("./paper.png");
    background-color: $bgc;
    @media (width <= 768px) {
      height: 70px;
      width: 100%;
    }

    nav.hb-nav {
      background-color: $bgc;
      background-image: url("./paper.png");
      position: absolute;
      top: 100%;
      height: 100vh;
      width: 100%;
      display: none;
      flex-wrap: wrap;
      border-radius: 0 0 30px 0;
      overflow: hidden;
      transition: all 0.3s linear;
      @media (width <= 768px) {
        display: block;
        left: -100%;
        opacity: 0;
      }

      ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
        li#hb-member {
          display: none;
          justify-content: space-around;
          p {
            font-size: 20px;
          }
        }
        li {
          //border: 2px solid green;
          display: flex;
          justify-content: center;
          a {
            font-size: 20px;
            padding-bottom: 10px;
            border-bottom: 3px solid $textColor;
          }
          p#hb-logout {
            display: none;
            font-size: 20px;
          }
        }
      }
    }
    label.hb {
      position: absolute;
      right: 5px;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 60px;
      height: 60px;
      display: none;
      text-align: center;
      padding-top: 10px;
      span {
        display: inline-block;
        width: 60%;
        height: 4px;
        border-radius: 10px;
        margin: auto;
        background-color: $textColor;
        position: relative;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
        top: 0;
        &:first-child {
          margin-top: 12px;
        }
        &:nth-child(2) {
          opacity: 1;
          transition: opacity 0.6s ease-in-out;
        }
        &:last-child {
          margin-bottom: 10px;
        }
      }
      i {
        font-size: 40px;
        color: #555;
      }
      @media (width <= 768px) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 5px;
      }
    }
    input#menu-switch {
      position: absolute;
      display: none;
      &:checked ~ .hb-nav {
        left: 0px;
        opacity: 1;
      }
      &:checked + .hb span:nth-child(1) {
        transform: rotate(45deg);
        top: 10px;
        transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
      }
      &:checked + .hb span:nth-child(2) {
        opacity: 0;
      }
      &:checked + .hb span:nth-child(3) {
        transform: rotate(-45deg);
        top: -10px;
        transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
      }
    }
    nav {
      #id-icon {
        display: none;
        cursor: pointer;
      }
      #member-page {
        display: none;
        #member-inside {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          width: 150px;
          height: 150px;
          background-color: $joinColor;
          position: absolute;
          bottom: -170px;
          right: 195px;
          @media (width <= 1440px) {
            right: 163px;
          }
          @media (width <= 1280px) {
            right: 93px;
          }
          .mem-tran {
            rotate: 45deg;
            top: -15px;
            right: 10px;
            width: 30px;
            height: 30px;
            background-color: $joinColor;
            position: absolute;
          }
          #logout {
            cursor: pointer;
            text-align: center;
            width: 50%;
            padding-top: 5px;
            height: 30px;
            background-color: #ccc;
            border-radius: 30px;
          }
        }
      }
      padding-bottom: 10px;
      flex: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: flex-end;
      height: 100%;
      position: relative;
      @media (width <= 768px) {
        display: none;
      }
      &:last-of-type {
        justify-content: flex-start;
      }
      a {
        position: relative;
        text-decoration: none;
        font-size: 18px;
        letter-spacing: 2px;
        margin: 0 20px;
        color: black;
        transform: translateY(0);
        transition: all 0.2s linear;
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          right: 50%;
          bottom: -5px;
          height: 0;
          border-bottom: 3px solid $textColor;
          transition: all 0.3s linear;
        }
        &:hover::after {
          right: 0;
          left: 0;
          @media (width <= 768px) {
            display: none;
          }
        }
        &:hover {
          transform: translateY(-3px);
          color: $textColor;
        }
      }
    }
    div.nav-img {
      flex: 1;
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      @media (width <= 768px) {
        justify-content: flex-start;
        align-items: center;
        width: 100px;
        height: 60px;
      }

      img {
        width: 150px;
        height: 80px;
        @media (width <= 768px) {
          width: 100px;
          height: 60px;
          margin-left: 10px;
        }
      }
    }
  }

  div#slider {
    background-color: #eee;
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
    ul#slider-content {
      position: relative;
      height: 100%;
      display: flex;
      li {
        width: 100%;
        list-style: none;
        &:nth-child(2) img {
          object-fit: cover;
        }
        img {
          width: 1920px;
          height: 100%;
          object-fit: cover;
          object-position: -100px;
          @media (width <= 768px) {
            object-fit: cover;
            object-position: -600px;
            //x左右 y上下
          }
        }
        .banner-title {
          position: absolute;
          top: 50px;
          left: 480px;
          width: 50%;
          height: 80%;
          @media (width <= 768px) {
            left: 20px;
            height: 20%;
            width: 90%;
            top: 110px;
          }
          h1 {
            letter-spacing: 5px;
            color: #000;
            font-size: $h1titleSize;
            font-weight: normal;
            position: relative;
            @media (width <= 768px) {
              font-size: 20px;
            }
            &:first-child::after {
              content: "";
              position: absolute;
              bottom: -15px;
              left: 0;
              background-color: $textColor;
              height: 3px;
              width: 200px;
              @media (width <= 768px) {
                width: 150px;
                bottom: -10px;
              }
            }
            &:last-of-type {
              padding-left: 30px;
            }
          }
          p {
            width: 32%;
            color: #666;
            margin-top: 50px;
            font-size: 18px;
            font-weight: lighter;
            line-height: 2rem;
            @media (width <= 768px) {
              width: 35%;
              margin-top: 20px;
              font-size: 14px;
            }
          }
        }
        .active-banner {
          position: absolute;
          bottom: 60px;
          right: 1650px;
          @media (width >=1440px) {
            right: 2100px;
            bottom: 10px;
          }
          @media (width <= 768px) {
            left: 400px;
            height: 20%;
            width: 85%;
            bottom: 180px;
          }
          @media (width <= 430px) {
            left: 440px;
          }
          @media (width <= 391px) {
            left: 410px;
          }
          h1 {
            color: #fff;
            font-weight: normal;
            font-size: 50px;
            @media (width <= 768px) {
              font-size: 25px;
            }

            &:after {
              content: "";
              position: absolute;
              bottom: 45px;
              left: 0;
              background-color: $textColor;
              height: 3px;
              width: 200px;
              @media (width <= 768px) {
                width: 150px;
                bottom: 10px;
              }
              @media (width >=1440px) {
                width: 200px;
                bottom: 80px;
              }
            }
          }
          p {
            width: 100%;
            color: #fff;
            margin-top: 30px;
            font-size: 20px;
            font-weight: lighter;
            line-height: 2rem;
            @media (width <= 768px) {
              width: 35%;
              margin-top: 20px;
              font-size: 16px;
            }
            @media (width >=1440px) {
              width: 80%;
            }
          }
        }
        .member-banner {
          position: absolute;
          right: 800px;
          bottom: 50px;
          width: 10%;
          @media (width <= 768px) {
            right: 125px;
            bottom: 35px;
            width: 20%;
          }
          @media (width >=1440px) {
            right: 800px;
          }
          h1 {
            color: #fff;
            font-weight: normal;
            font-size: 50px;

            &:after {
              content: "";
              position: absolute;
              bottom: 45px;
              left: 0;
              background-color: $textColor;
              height: 3px;
              width: 200px;
              @media (width <= 768px) {
                width: 150px;
                bottom: 40px;
              }
            }
          }
          p {
            width: 100%;
            color: #fff;
            margin-top: 30px;
            font-size: 20px;
            font-weight: lighter;
            line-height: 2rem;
            @media (width <= 768px) {
              margin-top: 20px;
              font-size: 16px;
            }
          }
        }
      }
    }
    ul#contentButton {
      text-align: center;
      width: 300px;
      height: 50px;
      position: relative;
      margin: auto;
      top: -40px;
      li {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        background-color: #ccc;
        margin: 8px;
        cursor: pointer;
      }
      li.clicked {
        background-color: $textColor;
      }
    }
  }

  div.sale {
    background-color: #eee;
    background-image: url("./paper.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    width: 100%;
    position: relative;
    overflow: hidden;
    @media (width <= 768px) {
      height: 400px;
      padding-top: 50px;
    }
    #right {
      color: #a8cc05;
      position: absolute;
      top: 240px;
      right: 140px;
      font-size: 50px;
      border: transparent;
      background-color: transparent;
      cursor: pointer;
      @media (width <= 768px) {
        right: 20px;
        top: 200px;
      }
    }
    #left {
      color: #a8cc05;
      position: absolute;
      top: 240px;
      left: 140px;
      font-size: 50px;
      border: transparent;
      background-color: transparent;
      cursor: pointer;
      @media (width <= 768px) {
        left: 20px;
        top: 200px;
      }
    }
    div.sale-title {
      margin-bottom: 25px;
      @media (width <= 768px) {
        margin-bottom: 10px;
      }
      h2 {
        font-weight: normal;
        letter-spacing: 5px;
        border-bottom: 3px solid $textColor;
        font-size: $titleSize;
        padding-bottom: 5px;
      }
    }
    div.sale-card {
      position: relative;
      width: 66%;
      height: 350px;
      overflow: hidden;
      @media (width <= 768px) {
        width: 52%;
        justify-content: center;
        align-items: center;
      }
      @media (width >= 1440px) {
        width: 70%;
      }
      div.card-slide {
        position: absolute;
        width: 2000px;
        position: relative;
        transition: left 0.5s;
        .card {
          margin: 5px;
          width: 200px;
          height: 300px;
          float: left;
          @media (width >= 1440px) {
            width: 255px;
            height: 300px;
          }
          &:hover h3 {
            background-color: #fff;
            color: #000;
          }

          img {
            height: 70%;
            overflow: hidden;
            width: 100%;
            object-fit: cover;
            //height: 180px;
            vertical-align: middle;
          }
          h3 {
            font-size: 20px;
            font-weight: normal;
            letter-spacing: 5px;
            transition: all 0.3s linear;
            height: 30%;
            background-color: $textColor;
            color: #fff;
            text-align: center;
            padding-top: 30px;
          }
        }
      }
    }
  }

  div.font-about {
    background-color: #eee;
    background-image: url("./paper.png");
    display: flex;
    justify-content: center;
    width: 100%;
    height: 500px;
    @media (width <= 768px) {
      align-items: center;
    }
    div.about-text {
      position: relative;
      width: 33%;
      @media (width <= 768px) {
        width: 90%;
      }
      h2 {
        font-weight: normal;
        width: 250px;
        letter-spacing: 5px;
        border-bottom: 3px solid $textColor;
        font-size: $titleSize;
        margin-bottom: 50px;
        padding-bottom: 5px;
        @media (width <= 768px) {
          width: 100%;
          text-align: center;
          border: transparent;
        }
      }
      p {
        color: #666;
        line-height: 40px;
        font-size: 18px;
        letter-spacing: 2px;
        @media (width <= 768px) {
          font-size: 14px;
        }
      }
      a {
        font-size: 18px;
        width: 120px;
        padding-bottom: 3px;
        border-radius: 30px;
        height: 35px;
        padding-top: 5px;
        text-align: center;
        position: absolute;
        background-color: $textColor;
        color: #fff;
        text-decoration: none;
        bottom: 100px;
        right: 0;
        transition: all 0.3s linear;
        @media (width <= 768px) {
          bottom: -50px;
          right: 0px;
          padding-top: 6px;
          width: 100px;
          font-size: 14px;
          height: 30px;
        }
        &:hover {
          background-color: #fff;
          color: #000;
        }
      }
    }
    div.about-img {
      width: 33%;
      height: 85%;
      display: flex;
      justify-content: center;
      @media (width <= 768px) {
        display: none;
      }
      img {
        border-radius: 10px;
        box-shadow: 3px 3px 4px #aaa;
        width: 70%;
        height: 100%;
        @media (width <= 768px) {
          width: 100%;
        }
      }
    }
  }

  div.filter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 350px;
    background-color: rgba(0, 0, 0, 0.7);
    @media (width <= 768px) {
      background-color: $bgc;
      background-image: url("./paper.png");
    }
    div.flex-select {
      width: 70%;
      border: 1px solid $textColor;
      height: 350px;
      display: flex;
      @media (width <= 768px) {
        flex-direction: column;
        border: transparent;
      }

      div.select {
        flex: 1 0 20%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid $textColor;
        border-right: 1px solid $textColor;
        border-collapse: collapse;
        transition: all 0.4s linear;
        @media (width <= 768px) {
          flex-direction: row;
          justify-content: flex-start;
          border-left: transparent;
          border-right: transparent;
        }
        i {
          color: $textColor;
          font-size: 60px;
          transition: all 0.3s linear;
          transform: translateY(0);
          @media (width <= 768px) {
            font-size: 30px;
            margin-right: 20px;
          }
        }
        p {
          color: $textColor;
          font-size: 20px;
          visibility: hidden;
          transition: all 0.3s linear;
          opacity: 0;
          @media (width <= 768px) {
            visibility: visible;
            opacity: 1;
            font-size: 16px;
            color: #666;
          }
        }

        &:hover {
          flex: 2 0 40%;
        }
        &:hover i {
          transform: translateY(-100px);
        }
        &:hover p {
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }

  div.news {
    background-color: #eee;
    background-image: url("./paper.png");
    //border: 2px solid red;
    height: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    h2.news-title {
      font-weight: normal;
      width: 140px;
      padding-bottom: 5px;
      text-align: center;
      border-bottom: 3px solid $textColor;
      letter-spacing: 5px;
      font-size: $titleSize;
    }
    div.news-info {
      padding-top: 20px;
      border-bottom: 1px solid $textColor;
      width: 800px;
      height: 100px;
      @media (width <= 768px) {
        width: 90%;
      }
      p {
        font-weight: lighter;
        margin: 10px 0px;
        color: #666;
        @media (width <= 768px) {
          font-size: 12px;
          line-height: 1.15rem;
          letter-spacing: 2px;
        }
        &:last-child {
          color: #000;
          font-size: 20px;
          font-weight: 500;
          @media (width <= 768px) {
            font-size: 14px;
          }
        }
      }
    }
    a.news-more-info {
      font-size: 18px;
      background-color: $textColor;
      color: #fff;
      text-decoration: none;
      position: absolute;
      right: 120px;
      bottom: 30px;
      width: 120px;
      height: 35px;
      padding-top: 5px;
      text-align: center;
      border-radius: 30px;
      transition: all 0.3s linear;
      @media (width <= 768px) {
        bottom: 20px;
        right: 20px;
        padding-top: 6px;
        width: 100px;
        font-size: 14px;
        height: 30px;
      }
      &:hover {
        background-color: #fff;
        color: #000;
      }
    }
  }

  div.store-search {
    background-color: #eee;
    background-image: url("./paper.png");
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 200px;
    @media (width <= 768px) {
      height: 350px;
    }
    h2 {
      font-weight: normal;
      width: 140px;
      padding-bottom: 5px;
      text-align: center;
      border-bottom: 3px solid $textColor;
      letter-spacing: 5px;
      font-size: $titleSize;
    }
    div.input-group {
      width: 65%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      //border: 1px solid red;
      position: relative;
      @media (width <= 768px) {
        width: 100%;
        margin-top: 20px;
      }
      input {
        width: 45%;
        padding: 0 5px;
        height: 35px;
        margin: 20px 20px 20px 0px;
        @media (width <= 768px) {
          width: 93%;
          margin: 10px 20px 10px 0px;
        }
        &:focus {
          outline: none;
        }
        &::placeholder {
          color: #666;
        }
      }
      input.address {
        width: 93%;
      }
      a {
        position: absolute;
        bottom: 22px;
        right: -100px;
        font-size: 18px;
        width: 120px;
        padding-bottom: 3px;
        border-radius: 30px;
        height: 35px;
        padding-top: 5px;
        text-align: center;
        background-color: $textColor;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s linear;
        @media (width <= 768px) {
          bottom: -50px;
          right: 15px;
          padding-top: 6px;
          width: 100px;
          font-size: 14px;
          height: 30px;
        }
        &:hover {
          background-color: #fff;
          color: #000;
        }
      }
    }
  }

  footer {
    background-color: #ccc;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 150px;
    @media (width <= 768px) {
      height: 320px;
    }

    div.footer-info {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #999;
      @media (width <= 768px) {
        flex-direction: column;
      }
      .img {
        width: 25%;
        display: flex;
        justify-content: center;
        align-items: center;
        @media (width <= 768px) {
          width: 100%;
        }
        img {
          width: 120px;
          height: 120px;
          @media (width <= 768px) {
            width: 80px;
            height: 80px;
          }
        }
      }

      div.info {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        @media (width <= 768px) {
          width: 100%;
        }
        div.breadcrumb {
          display: flex;
          justify-content: center;
          @media (width <= 768px) {
            width: 100%;
          }
          a {
            font-size: 16px;
            text-decoration: none;
            color: #000;
            @media (width <= 768px) {
              font-size: 14px;
            }
            & + a::before {
              content: "/";
              margin: 0 5px;
            }
          }
        }
        div.info-icon {
          display: flex;
          justify-content: center;
          @media (width <= 768px) {
            margin: 20px 0 10px 0;
          }
          i {
            font-size: 30px;
            margin: 0 30px;
          }
        }
      }
      div.contact {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        width: 25%;
        height: 100%;
        @media (width <=768px) {
          display: flex;
          width: 100%;
          align-items: center;
        }
        p {
          margin: 10px 0px;
        }
      }
    }
    div.copyright {
      padding-top: 5px;
      text-align: center;
      @media (width <= 768px) {
        font-size: 14px;
      }
    }
  }
}

//最新消息
body {
  background-color: $bgc;
  div.news-banner {
    background-color: #eee;
    width: 100%;
    height: 300px;
    position: relative;
    background-image: url("./tea\ garden.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    div.news-banner-title {
      width: 250px;
      position: absolute;
      bottom: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      text-align: center;
      border-radius: 20px;
      h1 {
        color: #fff;
        font-size: $h1titleSize;
        font-weight: normal;
        position: relative;
        &:first-child::after {
          content: "";
          position: absolute;
          bottom: -20px;
          left: 25px;
          background-color: $textColor;
          height: 2px;
          width: 200px;
        }
      }
    }
  }
  div.news-option {
    background-color: $bgc;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: center;
    div.option-items {
      width: 50%;
      border-bottom: 2px solid #000;
      display: flex;
      justify-content: space-evenly;
      align-items: flex-end;
      padding-bottom: 20px;
      gap: 5px;
      cursor: pointer;
      @media (width <= 768px) {
        width: 90%;
      }
      a {
        width: 100px;
        height: 50px;
        text-align: center;
        font-size: 20px;
        background-color: #a8cc05;
        border-radius: 10px;
        padding-top: 11px;
        display: block;
        color: #fff;
        text-decoration: none;
        transition: all 0.3s linear;
        &:hover {
          background-color: #fff;
          color: #000;
        }
      }
    }
  }
  div.news-group {
    margin-top: 20px;
    width: 100%;
    background-color: $bgc;
    display: flex;
    flex-direction: column;
    align-items: center;
    .news-card {
      width: 50%;
      display: flex;
      margin: 10px 0;
      height: 200px;
      @media (width <= 768px) {
        flex-direction: column;
        height: 450px;
        width: 80%;
      }
      .img-group {
        position: relative;
        flex: 1;
        height: 200px;
        @media (width <= 768px) {
          height: 50%;
        }
        .img-date {
          position: absolute;
          top: 0;
          left: 0;
          width: 45px;
          height: 45px;
          background-color: $textColor;
          font-size: 18px;
          font-weight: normal;
          border-radius: 0px 0px 20px 0px;
          text-align: center;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          vertical-align: middle;
        }
      }
      .article-group {
        position: relative;
        border-radius: 0px 0px 20px 0px;
        flex: 2;
        background-image: url("./paper.png");
        display: flex;
        flex-direction: column;

        p {
          color: $pColor;
          font-size: 16px;
          padding: 0 10px;
          margin: 10px 0;
          font-weight: 500;
          line-height: 1.35rem;
          &:last-of-type {
            font-size: 16px;
          }
        }
        h3.short {
          width: 105px;
        }
        h3 {
          font-weight: normal;
          margin: 0 10px;
          border-bottom: 2px solid $textColor;
          width: 150px;
          padding-bottom: 8px;
          font-size: 25px;
        }
        a {
          position: absolute;
          bottom: 10px;
          right: 10px;
          width: 100px;
          background-color: $textColor;
          height: 30px;
          text-align: center;
          border-radius: 30px;
          text-align: center;
          text-decoration: none;
          color: #fff;
          padding-top: 5px;
          transition: all 0.2s linear;
          &:hover {
            background-color: #fff;
            color: #000;
          }
        }
      }
    }
  }
  div.page-list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    a {
      text-align: center;
      width: 30px;
      height: 30px;
      margin: 0 10px;
      font-size: 20px;
      text-decoration: none;
      color: #000;
      padding-top: 2px;
      background-color: #fff;
      border-radius: 50%;
      transition: all 0.2s linear;
      &:hover {
        background-color: $textColor;
        color: #fff;
      }
    }
    i {
      text-align: center;
      width: 30px;
      height: 30px;
      margin: 0 5px;
      font-size: 25px;
      padding-top: 3px;
      color: $textColor;
    }
  }
}

//關於我們
body.about {
  background-color: $bgc;
  background-image: url("./paper.png");
  div.other-banner {
    background-color: #eee;
    width: 100%;
    height: 300px;
    position: relative;
    @media (width <= 768px) {
      height: 250px;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top right;
      @media (width <= 768px) {
        object-fit: cover;
        object-position: center center;
      }
    }
    div.banner-title {
      position: absolute;
      text-align: center;
      top: 70px;
      right: 380px;
      @media (width <= 768px) {
        right: 35px;
        top: 70px;
      }
      h1 {
        text-align: start;
        width: 250px;
        color: #fff;
        font-size: 35px;
        font-weight: normal;
        position: relative;
        @media (width <= 768px) {
          font-size: 20px;
          width: 130px;
        }
        &:first-of-type::after {
          content: "";
          position: absolute;
          background-color: $textColor;
          width: 200px;
          height: 2px;
          bottom: -15px;
          right: 30px;
          @media (width <= 768px) {
            width: 100px;
            bottom: -10px;
            right: 15px;
          }
        }
        &:last-of-type {
          text-align: end;
        }
      }
    }
  }

  div.process {
    background-image: url("./paper.png");
    background-color: $bgc;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 300px;
    h2 {
      flex: 1;
      font-weight: normal;
      font-size: $titleSize;
      letter-spacing: 5px;
      width: 28%;
      text-align: center;
      padding-top: 20px;
      @media (width <= 768px) {
        width: 80%;
      }
    }
    .precess-group {
      background-image: url("./paper.png");
      background-color: $bgc;
      flex: 3;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 70%;
      flex-wrap: wrap;
      gap: 75px;
      @media (width <= 768px) {
        width: 100%;
        gap: 20px;
      }

      .process-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: 2px solid $textColor;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        position: relative;
        background-color: $bgc;
        @media (width <= 768px) {
          width: 75px;
          height: 75px;
        }
        & + div::before {
          content: "";
          position: absolute;
          width: 75px;
          height: 3px;
          background-color: #000;
          left: -77px;
          top: 0;
          bottom: 0;
          margin: auto;
          @media (width <= 768px) {
            width: 20px;
            left: -22px;
          }
        }
        i {
          font-size: 35px;
          margin-bottom: 20px;
          @media (width <= 768px) {
            font-size: 20px;
            margin-bottom: 10px;
          }
        }
        h3 {
          font-weight: normal;
          font-size: 16px;
          @media (width <= 768px) {
            font-size: 8px;
          }
        }
      }
    }
  }
  main.main-process {
    background-image: url("./paper.png");
    background-color: $bgc;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin: 50px 0;
    @media (width <= 768px) {
      margin: 5px 0;
    }
    .main-process-info {
      flex-wrap: wrap;
      display: flex;
      width: 60%;
      height: 250px;
      margin: 20px 0px;
      @media (width <= 768px) {
        align-items: center;
        flex-direction: column;
        height: 450px;
        width: 100%;
      }
      img {
        border-radius: 20px;
        flex: 1;
        width: 100%;
        height: 250px;
        vertical-align: middle;
        @media (width <= 768px) {
          width: 80%;
          height: 150px;
          order: -1;
          margin-bottom: 10px;
        }
      }
      .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        h2 {
          letter-spacing: 5px;
          font-weight: normal;
          font-size: 25px;
          margin-bottom: 30px;
          height: 40px;
          border-bottom: 3px solid $textColor;
          @media (width <= 768px) {
            margin-bottom: 20px;
          }
        }
        p {
          color: #555;
          width: 90%;
          font-size: 16px;
          letter-spacing: 3px;
          line-height: 1.5rem;
          @media (width <= 768px) {
            width: 80%;
          }
        }
      }
    }
  }
}

//加盟專區
body {
  background-color: $bgc;
  position: relative;
  overflow: auto;
  div.join-form {
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 20;
    position: absolute;
    width: 100%;
    height: 100%;

    form {
      border-radius: 20px;
      margin: auto;
      margin-top: 5px;
      padding-top: 10px;
      z-index: 11;
      width: 50%;
      height: 42%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #aaa;
      position: relative;
      @media (width<=768px) {
        width: 90%;
        height: 33%;
      }
      @media (width<=450px) {
        margin-top: 20px;
        width: 90%;
        height: 31%;
      }
      div#cross {
        text-align: center;
        font-size: 25px;
        padding-bottom: 2px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        position: absolute;
        top: -5px;
        right: -5px;
        background-color: #fff;
        cursor: pointer;
      }
      .join-input {
        width: 50%;
        margin: 5px 0;
        flex-wrap: wrap;
        @media (width<=768px) {
          width: 80%;
        }
        label {
          font-size: 18px;
          @media (width<=768px) {
            font-size: 16px;
          }
        }
        input {
          padding: 0 10px;
          margin-top: 10px;
          width: 100%;
          height: 40px;
          border-radius: 10px;
          border: transparent;
          outline: none;
        }
        select {
          margin-top: 10px;
          width: 100%;
          height: 40px;
          border-radius: 10px;
          border: transparent;
          outline: none;
        }
        textarea {
          border-radius: 10px;
          outline: none;
          border: transparent;
          padding: 10px;
          margin-top: 10px;
          width: 100%;
        }
      }
      a {
        text-decoration: none;
        margin-bottom: 40px;
        background-color: $textColor;
        color: #fff;
        width: 30%;
        height: 30px;
        text-align: center;
        padding: 5px;
        border-radius: 30px;
      }
      .join-input-location {
        width: 50%;
        margin: 10px 0;
        @media (width<=768px) {
          width: 80%;
        }
        p {
          font-size: 18px;
          margin-bottom: 10px;
          @media (width<=768px) {
            font-size: 16px;
          }
        }
      }
    }
  }
  div.join-us {
    display: flex;
    width: 100%;
    height: 300px;
    @media (width<=768px) {
      flex-direction: column;
      height: 600px;
    }
    .join-title {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      @media (width<=768px) {
        margin-bottom: 30px;
      }
      h1 {
        font-weight: normal;
        letter-spacing: 5px;
        font-size: $h1titleSize;
        border-bottom: 2px solid $textColor;
        padding-bottom: 10px;
      }
    }
    .join-support {
      flex: 2;
      width: 100%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      @media (width<=768px) {
        flex-direction: column;
        justify-content: space-evenly;
        height: 350px;
      }
      .join-box {
        margin: 0 10px;
        width: 25%;
        height: 90%;
        @media (width<=768px) {
          display: flex;
          width: 90%;
          height: 30%;
        }
        .img-area {
          width: 100%;
          height: 60%;
          border-radius: 30px 0 0 0;
          background-color: $joinColor;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          @media (width<=768px) {
            width: 50%;
            height: 100%;
          }
          img {
            width: 50%;
            height: 60%;
            @media (width>=1440px) {
              width: 40%;
              height: 70%;
            }
            @media (width<=768px) {
              width: 30%;
              height: 60%;
            }
          }
          h3 {
            margin-top: 15px;
            @media (width<=768px) {
              font-size: 14px;
              margin-top: 5px;
            }
          }
        }
      }
      p {
        line-height: 1.5;
        letter-spacing: 1px;
        padding-top: 20px;
        text-align: center;
        border-radius: 0 0 30px 0;
        font-size: 15px;
        color: $pColor;
        flex: 1;
        width: 100%;
        height: 40%;
        background-image: url("./paper.png");
        background-color: $bgc;
        @media (width<=768px) {
          font-size: 14px;
          height: 100%;
          line-height: 1.5rem;
        }
      }
    }

    p.join {
      color: $pColor;
      height: 40%;
      width: 90%;
      line-height: 1.5;
      letter-spacing: 1px;
    }
  }

  div.join-step {
    position: relative;
    background-color: $bgc;
    background-image: url("./leaf\ bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    h2 {
      font-weight: normal;
      font-size: $titleSize;
      letter-spacing: 3px;
      margin: 50px 0;
      @media (width<=768px) {
        font-size: 20px;
      }
    }
    .join-step-group {
      width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30px;
      @media (width<=768px) {
        width: 100%;
      }
      .step {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #ddd;
        display: flex;
        width: 90%;
        height: 80px;
        border-radius: 10px;
        margin: 12px 0;
        h3 {
          font-weight: normal;
          margin: 0 15px;
          font-size: 18px;
          letter-spacing: 3px;
          @media (width<=768px) {
            font-size: 15px;
          }
        }
        .trangle {
          position: absolute;
          width: 30px;
          height: 30px;
          background-color: #ddd;
          bottom: -15px;
          left: 30px;
          transform: rotate(45deg);
        }
      }
    }
    a {
      text-decoration: none;
      margin-bottom: 40px;
      background-color: $textColor;
      color: #fff;
      width: 20%;
      height: 30px;
      text-align: center;
      padding: 5px;
      border-radius: 30px;
      transition: all 0.3s linear;
      @media (width<=768px) {
        width: 70%;
        height: 40px;
        font-size: 20px;
        padding-top: 8px;
      }
      &:hover {
        color: #000;
        background-color: #fff;
      }
    }
  }
}

//聯絡我們
body {
  div.location {
    margin-top: 50px;
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (width<=768px) {
      margin-bottom: 50px;
    }

    h2 {
      font-weight: normal;
      letter-spacing: 5px;
      padding-top: 5px;
      width: 30%;
      height: 20%;
      text-align: center;
      font-size: $titleSize;
      margin-bottom: 20px;
      @media (width<=768px) {
        width: 70%;
        font-size: 20px;
        letter-spacing: 3px;
      }
    }
    .location-info {
      width: 70%;
      display: flex;
      height: 500px;
      @media (width<=768px) {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 350px;
      }
      iframe {
        width: 60%;
        height: 100%;
        @media (width<=768px) {
          width: 80%;
        }
      }
      ul {
        margin-left: 30px;
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: space-evenly;
        @media (width<=768px) {
          flex-direction: row;
          justify-content: center;
          width: 80%;
        }
        li {
          list-style: none;
          display: flex;
          @media (width<=768px) {
            width: 100%;
            margin-top: 20px;
          }
          i {
            text-align: center;
            width: 20px;
            height: 20px;
            color: $textColor;
            margin-right: 10px;
            font-size: 20px;
          }
          p {
            font-size: 18px;
            @media (width<=768px) {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
  div.contact-us {
    margin: 50px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    @media (width<=768px) {
      margin: 150px 0px 20px 0px;
    }
    h2 {
      font-weight: normal;
      letter-spacing: 5px;
      padding-top: 5px;
      width: 30%;
      height: 20%;
      text-align: center;
      font-size: $titleSize;
      @media (width<=768px) {
        width: 50%;
        font-size: 20px;
        letter-spacing: 3px;
      }
    }
    div.input-group {
      background-color: rgb(211, 219, 211);
      margin: 20px 0;
      padding-top: 20px;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      @media (width<=768px) {
        width: 90%;
      }
      .input {
        margin: 10px 0;
        width: 60%;
        flex-wrap: wrap;
        @media (width<=768px) {
          width: 80%;
        }
        label {
          font-size: 16px;
        }
        input {
          padding: 0 10px;
          margin-top: 5px;
          width: 100%;
          height: 40px;
          border-radius: 10px;
          border: transparent;
          outline: none;
        }
      }
      .textarea {
        width: 60%;
        flex-wrap: wrap;
        @media (width<=768px) {
          width: 80%;
        }
        label {
          font-size: 16px;
        }
        textarea {
          padding: 10px;
          border: transparent;
          margin-top: 10px;
          outline: none;
          width: 100%;
          border-radius: 10px;
        }
      }
    }
    p {
      text-decoration: none;
      cursor: pointer;
      margin: 20px 0;
      background-color: $textColor;
      color: #fff;
      width: 30%;
      height: 30px;
      text-align: center;
      padding: 5px;
      border-radius: 30px;
      transition: all 0.3s linear;
      @media (width<=768px) {
        width: 60%;
      }
      &:hover {
        color: #000;
        background-color: #fff;
      }
    }
  }
}

//會員登入
body {
  main.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    @media (width <= 768px) {
      height: 700px;
    }
    div.login-group {
      background-color: $bgc;
      border-radius: 20px;
      width: 60%;
      height: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      @media (width <= 768px) {
        background-image: url("./paper.png");
        flex-direction: column;
        width: 100%;
        height: 90%;
        border-radius: 0px;
      }

      .log-in {
        position: relative;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        width: 50%;
        height: 100%;
        @media (width <= 768px) {
          margin-bottom: 30px;
          width: 100%;
        }
        h2 {
          font-weight: normal;
          font-size: 25px;
          position: relative;
          @media (width <= 768px) {
            margin-bottom: 20px;
          }
          &::after {
            content: "";
            border-bottom: 3px solid $textColor;
            width: 100px;
            position: absolute;
            left: 0;
            right: 0;
            bottom: -15px;
          }
        }
        .group {
          height: 40px;
          width: 60%;
          @media (width <= 768px) {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px 0;
          }
          label {
            i {
              font-size: 20px;
              color: $pColor;
            }
          }
          input {
            padding: 0 10px;
            margin-left: 10px;
            height: 100%;
            width: 80%;
            outline: none;
            border: transparent;
            border-radius: 5px;
          }
        }
        .btn {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          width: 70%;
          button {
            cursor: pointer;
            border: transparent;
            font-size: 20px;
            text-decoration: none;
            margin: 20px 0;
            background-color: $textColor;
            color: #fff;
            width: 70%;
            height: 35px;
            text-align: center;
            padding: 5px;
            border-radius: 30px;
            transition: all 0.3s linear;
            &:hover {
              color: #000;
              background-color: #fff;
            }
            @media (width <= 1400px) {
              width: 60%;
            }
            @media (width <= 768px) {
              width: 100%;
            }
          }
        }
        a {
          position: absolute;
          right: 40px;
          bottom: 10px;
          @media (width <= 768px) {
            bottom: 3px;
            right: 40px;
          }
        }
      }
      .register {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 50%;
        height: 100%;
        @media (width <= 768px) {
          width: 100%;
        }
        .register-page {
          padding: 0 40px;
          position: absolute;
          display: none;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          border-radius: 20px;
          width: 100%;
          height: 100%;
          background-color: $joinColor;
          z-index: 5;
          .cross {
            cursor: pointer;
            font-size: 25px;
            position: absolute;
            top: 5px;
            right: 10px;
          }
          .register-group {
            height: 40px;
            width: 100%;
            @media (width <= 768px) {
              width: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 5px 0;
            }
            label {
              i {
                font-size: 20px;
                color: $pColor;
              }
            }
            input {
              padding: 0 10px;
              margin-left: 10px;
              height: 100%;
              width: 80%;
              outline: none;
              border: transparent;
              border-radius: 5px;
            }
          }
        }
        &::before {
          content: "";
          position: absolute;
          border-bottom: 3px solid black;
          width: 350px;
          rotate: 90deg;
          height: 0;
          top: 0;
          bottom: 0;
          left: -190px;
          margin: auto;
          @media (width <= 768px) {
            display: none;
          }
        }
        h2 {
          font-weight: normal;
          font-size: 25px;
          position: relative;
          width: 100%;
          text-align: center;
          @media (width <= 768px) {
            text-align: center;
            margin-bottom: 20px;
          }
          &::after {
            content: "";
            border-bottom: 3px solid $textColor;
            width: 220px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
            bottom: -15px;
            @media (width <= 768px) {
              width: 220px;
            }
          }
        }
        h3 {
          font-size: 20px;
          font-weight: normal;
        }
        a {
          cursor: pointer;
          border: transparent;
          font-size: 20px;
          text-decoration: none;
          margin: 20px 0;
          background-color: #ddd;
          color: black;
          width: 70%;
          height: 35px;
          text-align: center;
          padding: 5px;
          border-radius: 30px;
          transition: all 0.3s linear;
          @media (width <= 768px) {
            background-color: #eee;
            color: $textColor;
          }
          &:hover {
            color: $textColor;
            background-color: #fff;
          }
        }
      }
    }
  }
}

//商品介紹
body.product {
  background-color: $bgc;
  background-image: url("./paper.png");
  div.product-banner {
    background-color: #eee;
    width: 100%;
    height: 350px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
      object-position: center center;
      // product-banne img RWD
      @media (width<=768px) {
        object-fit: cover;
        object-position: 61% 20%;
      }
    }
  }
  div.product-group {
    background-color: $bgc;
    background-image: url("./paper.png");
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 50px 0;
    position: relative;
    div.side-bar {
      position: sticky;
      top: 120px;
      display: flex;
      align-self: start;
      flex-direction: column;
      border-right: 2px solid #666;
      padding-right: 20px;
      // side-bar RWD
      @media (width<=768px) {
        padding-right: 0;
        width: 100%;
        display: flex;
        position: relative;
        top: 0;
        align-items: center;
        justify-content: center;
        border-right: transparent;
      }
      a {
        font-size: 20px;
        margin: 20px 0;
        color: #000;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s linear;
        &:hover {
          color: $textColor;
        }
        @media (width<=768px) {
          font-size: 25px;
        }
      }
    }
    div.product-card-group {
      width: 60%;
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      .product-card {
        width: 25%;
        height: 250px;
        overflow: hidden;
        &:hover .img-group img {
          transform: scale(1.1);
        }
        //product-card RWD
        @media (width<=768px) {
          width: 33%;
        }
        @media (width<=415px) {
          width: 42%;
        }
        div.img-group {
          overflow: hidden;
          width: 100%;
          height: 80%;
          img {
            transition: all 0.3s linear;
            transform: scale(1);
            object-fit: cover;
            display: block;
            width: 100%;
            height: 100%;
          }
        }

        p {
          background-color: $joinColor;
          width: 100%;
          height: 20%;
          text-align: center;
          font-size: 20px;
          padding: 11px;
          cursor: pointer;
        }
        a {
          text-decoration: none;
          color: #000;
        }
      }
      //product-card-group RWD
      @media (width<=415px) {
        width: 100%;
      }
      @media (width<=768px) {
        width: 100%;
      }
    }
    // product-group RWD
    @media (width<=768px) {
      margin: 10px 0;
      width: 100%;
      flex-direction: column;
    }
  }
}

//商品細節
div.item-detail {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
  @media (width <= 768px) {
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
  }
  .img-group {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    @media (width <= 768px) {
      width: 80%;
    }
    img#large-img {
      width: 80%;
      height: 400px;
      border-radius: 20px;
      @media (width <= 768px) {
        height: 300px;
      }
    }
    .small-group {
      margin: 20px 0;
      display: flex;
      width: 80%;
      gap: 10px;
      img {
        border-radius: 20px;
        width: 33%;
        height: 120px;
        cursor: pointer;
      }
    }
  }
  .info-group {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    @media (width <= 768px) {
      width: 80%;
      height: 400px;
      align-items: center;
    }
    h2 {
      font-size: 35px;
      font-weight: normal;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 0;
        background-color: $textColor;
        height: 3px;
        width: 170px;
        @media (width <= 768px) {
          width: 150px;
        }
      }
    }
    .price {
      display: flex;
      p {
        font-size: 24px;
        margin-left: 10px;
        &::first-letter {
          color: $textColor;
        }
      }
    }
    p {
      letter-spacing: 2px;
      line-height: 1.5rem;
      font-size: 18px;
      @media (width <= 768px) {
        line-height: 1.75rem;
        font-size: 16px;
      }
    }
    a {
      align-self: flex-end;
      font-size: 18px;
      background-color: $textColor;
      color: #fff;
      text-decoration: none;
      width: 120px;
      height: 35px;
      padding-top: 6px;
      text-align: center;
      border-radius: 30px;
      transition: all 0.3s linear;
      @media (width <= 768px) {
        align-self: center;
      }

      &:hover {
        background-color: #fff;
        color: #000;
      }
    }
  }
}

//新聞內頁
body.news-page-body {
  background-image: url("./paper.png");
  div.news-bc {
    ul {
      margin-top: 20px;
      display: flex;
      padding: 0 100px;
      @media (width <= 768px) {
        padding: 0 15px;
      }
      li {
        list-style: none;
        font-size: 20px;
        @media (width <= 768px) {
          font-size: 16px;
        }
        & + li::before {
          content: ">";
          margin: 0 8px;
        }
      }
      a {
        text-decoration: none;
        color: $textColor;
      }
    }
  }
  div.news-page-title {
    margin: 50px 0;
    padding: 0 380px;
    @media (width <= 1280px) {
      padding: 0 330px;
    }
    @media (width <= 768px) {
      padding: 0 40px;
    }
    h2 {
      font-weight: normal;
      line-height: 2rem;
      font-size: 25px;
      margin-bottom: 20px;
      @media (width <= 768px) {
        font-size: 20px;
      }
    }
    p {
      font-size: 18px;
      @media (width <= 768px) {
        font-size: 16px;
      }
    }
  }
  main.news-article {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0 50px 0;
    img {
      border-radius: 20px;
      width: 50%;
      height: 400px;
      @media (width <= 768px) {
        width: 80%;
        height: 200px;
      }
    }
    p {
      margin-top: 20px;
      width: 50%;
      font-size: 18px;
      line-height: 1.75rem;
      letter-spacing: 2px;
      @media (width <= 768px) {
        width: 80%;
        font-size: 16px;
      }
    }
  }
}