@charset "UTF-8";
.bannerindex .swiper-slide {
  height: auto;
}
.bannerindex .swiper-slide.swiper-slide-active .bn-label, .bannerindex .swiper-slide.swiper-slide-active .bn-text, .bannerindex .swiper-slide.swiper-slide-active .bn-comm {
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}
.bannerindex .swiper-slide.swiper-slide-active .bn-text {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.bannerindex .swiper-slide.swiper-slide-active .bn-comm {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.bannerindex .swiper-slide.swiper-slide-active .bn .bn-bg .abs {
  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease;
  transition: transform 0.5s ease, opacity 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}

.bn {
  position: relative;
  aspect-ratio: 30.3/15;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.bn.is1 {
  background: url("https://pic03.eapple.com.tw/foodpro/web-bn-bg1.jpg") no-repeat bottom center/cover;
}
.bn.is2 {
  background: url("https://pic03.eapple.com.tw/foodpro/web-bn-bg2.jpg") no-repeat center/cover;
}

.bn-info {
  position: relative;
  z-index: 1;
  width: clamp(var(--c-wp-min, 260px), var(--c-wp-flow, calc(100% - 60px)), var(--c-wp, 1450px));
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(80px, 7.552dvw, 145px);
  padding-bottom: clamp(130px, 22.917dvw, 440px);
}

.bn-label {
  color: #47281B;
  font-size: clamp(24px, 3.021dvw, 58px);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.3;
  margin-bottom: 10px;
  -webkit-transform: translate3d(0, 30px, 0);
          transform: translate3d(0, 30px, 0);
  opacity: 0;
}

.bn-text {
  color: #47281B;
  font-size: clamp(18px, 1.302dvw, 25px);
  font-family: "微軟正黑體";
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.5;
  margin-bottom: 35px;
  -webkit-transform: translate3d(0, 30px, 0);
          transform: translate3d(0, 30px, 0);
  opacity: 0;
}

.bn-comm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: var(--c-gd-jc);
      -ms-flex-pack: var(--c-gd-jc);
          justify-content: var(--c-gd-jc);
  gap: var(--c-gd-gap, var(--c-gd-y, 30px) var(--c-gd-x, clamp(30px, 2.917dvw, 56px)));
}
.bn-comm > * {
  width: calc((100% - var(--c-gd-x, clamp(30px, 2.917dvw, 56px)) * (var(--c-gd-col, 4) - 1)) / var(--c-gd-col, 4));
}
.bn-comm {
  max-width: 475px;
  -webkit-transform: translate3d(0, 30px, 0);
          transform: translate3d(0, 30px, 0);
  opacity: 0;
}
.bn-comm > *:not(:last-child) {
  position: relative;
}
.bn-comm > *:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(-28px, -1.458dvw, -15px);
  width: 1px;
  height: 100%;
  background: #A9825B;
}

.bn-comm-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.bn-comm-item__icon {
  --c-icon-w: 50px;
  display: inline-block;
  aspect-ratio: var(--c-icon-ar, 1/1);
  width: var(--c-icon-w, 50px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: var(--c-icon, none);
}
.bn-comm-item__icon.i-web-idx-bn1 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn1.png");
}
.bn-comm-item__icon.i-web-idx-bn2 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn2.png");
}
.bn-comm-item__icon.i-web-idx-bn3 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn3.png");
}
.bn-comm-item__icon.i-web-idx-bn4 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn4.png");
}
.bn-comm-item__label {
  color: #47281B;
  font-size: clamp(16px, 0.99dvw, 19px);
  font-family: "微軟正黑體";
  font-weight: 600;
  letter-spacing: 0;
}

.bn-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bn-bg .abs {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
}

.bn.is1 .bn-bg .abs.is1 {
  bottom: 0;
  left: 14.427%;
  aspect-ratio: 1062/411;
  width: 48.698%;
  background-image: url("https://pic03.eapple.com.tw/foodpro/web-bn-e1.png");
  -webkit-transform: translate3d(-50px, 50px, 0);
          transform: translate3d(-50px, 50px, 0);
}
.bn.is1 .bn-bg .abs.is2 {
  bottom: 1.055%;
  right: 0;
  z-index: 1;
  aspect-ratio: 906/491;
  width: 41.51%;
  background-image: url("https://pic03.eapple.com.tw/foodpro/web-bn-e2.png");
  -webkit-transform: translate3d(50px, 50px, 0);
          transform: translate3d(50px, 50px, 0);
}
.bn.is1 .bn-bg .abs.is3 {
  top: 11.498%;
  right: 0;
  aspect-ratio: 1132/508;
  width: 51.875%;
  background-image: url("https://pic03.eapple.com.tw/foodpro/web-bn-e3.png");
  -webkit-transform: translate3d(50px, -50px, 0);
          transform: translate3d(50px, -50px, 0);
}
.bn.is2 .bn-comm-item__icon.i-web-idx-bn1 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn1-d.png");
}
.bn.is2 .bn-comm-item__icon.i-web-idx-bn2 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn2-d.png");
}
.bn.is2 .bn-comm-item__icon.i-web-idx-bn3 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn3-d.png");
}
.bn.is2 .bn-comm-item__icon.i-web-idx-bn4 {
  --c-icon: url("https://pic03.eapple.com.tw/foodpro/i-web-idx-bn4-d.png");
}
.bn.is2 .bn-bg .abs.is1 {
  bottom: 0;
  right: 0;
  aspect-ratio: 1118/815;
  width: 51.25%;
  background-image: url("https://pic03.eapple.com.tw/foodpro/web-bn2-e1.png");
  -webkit-transform: translate3d(50px, 50px, 0);
          transform: translate3d(50px, 50px, 0);
}

@media all and (max-width: 1280px) {
  .bn-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 3;
  }
  .bn-label {
    text-align: center;
  }
  .bn-bg {
    z-index: 1;
  }
  .bn {
    aspect-ratio: auto;
  }
  .bn.is1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 70%, rgba(255, 255, 255, 0));
  }
  .bn.is1 .bn-bg .abs.is3 {
    display: none;
  }
  .bn.is2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, rgba(251, 216, 4, 0.7)), to(rgba(251, 216, 4, 0)));
    background-image: linear-gradient(180deg, rgba(251, 216, 4, 0.7) 70%, rgba(251, 216, 4, 0));
  }
}
@media all and (max-width: 768px) {
  .bannerindex {
    padding-bottom: 0;
  }
}
@media all and (max-width: 410px) {
  .bn .bn-comm {
    --c-gd-col: 2;
  }
  .bn .bn-comm > *:not(:last-child)::before {
    display: none;
  }
  .bn-text br {
    display: none;
  }
}