/* index banner css setting */
.carousel,
.carousel-item {
  height: 100vh;
}

.carousel-inner {
  height: 100%;
}

.carousel-item img {
  object-fit: cover;
  height: 100%;
}

.index-slider .carousel-caption {
  padding-right: 5%;
  padding-left: 5%;
  background: -webkit-gradient(
          linear,
          left top,
          right top,
          from(rgba(255, 255, 255, 0)),
          color-stop(34.2%, rgba(var(--main-color-rgba), 0.85)),
          color-stop(60.62%, rgba(var(--main-color-rgba), 0.83)),
          to(rgba(255, 0, 0, 0))
  );
  background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(var(--main-color-rgba), 0.85) 34.2%,
          rgba(var(--main-color-rgba), 0.83) 60.62%,
          rgba(255, 0, 0, 0) 100%
  );
  bottom: 10%;
}

.index-slider .carousel-caption h5,
.index-slider .carousel-caption p {
  letter-spacing: 1px;
  margin-bottom: 0;
  text-shadow: 2px 2px 3px #000;
}

.index-slider .carousel-caption h5 {
  font-size: 28px;
  margin-bottom: 5px;
}

/* 分頁器 */
.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* banner rwd */
@media screen and (max-width: 991px) {
  .index-slider .carousel-caption {
    display: block !important;
    position: initial;
    background: var(--orange-color) !important;
  }
}

@media screen and (max-width: 576px) {
  .index-slider .carousel-caption h5 {
    font-size: 21px;
  }
}

/* index news css setting */
.news_in {
  background-image: none !important;
}

.news_mask {
  padding: 70px 0 30px 0;
  background-image: url(../images/);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.news_in .ind_date {
  display: none;
}

/* news img hover */
.news_in .a_img {
  width: 100%;
  overflow: hidden;
}

.news_in .a_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

.news_in .col-md-4.col-sm-12:hover img {
  transform: scale(1.2);
}

/* news word */
.indexNews-text p .line-height-limit {
  color: var(--main-color);
}

.news_in .col-md-4.col-sm-12:hover .indexNews-text .line-height-limit {
  color: #fff;
}

/* news word box  */
.indexNews-text p {
  position: relative;
  text-align: center;
  padding: 0.7rem 0;
  width: 100%;
  margin: 1rem 0;
  font-size: 18px;
  font-weight: bold;
  background-color: transparent;
  border: none;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-out;
}

.indexNews-text p:hover {
  background-color: var(--main-color);
}

.indexNews-text p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.8;
  transition: all 0.5s ease-out;
}

.indexNews-text p:hover::before {
  transform: translate(-50%, -50%) scale(20);
  opacity: 0;
}

/* news item hover */
.news_in .col-md-4.col-sm-12:hover .indexNews-text p {
  background-color: var(--main-color);
}

.news_in .col-md-4.col-sm-12:hover .indexNews-text p::before {
  transform: translate(-50%, -50%) scale(20);
  opacity: 0;
}

/* index news rwd */
@media screen and (min-width: 1080px) {
  .news_in .a_img {
    height: 250px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1080px) {
  .news_in .a_img {
    height: 300px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .news_in .a_img {
    height: 200px;
  }
}

/* index about css setting */
section.about {
  /*padding: 100px 0;*/
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: right;
  color: #fff;
  overflow: hidden;
  position: relative;
  /*background-image: url(../images/index-bg.webp) !important;*/
}

section.about .container {
  max-width: 1460px;
}

.ab-content {
  width: 50%;
  padding: 50px;
  background-color: rgba(129, 216, 208, 0.86);
}

.ab-title {
  margin-bottom: 2rem;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 36px;
  letter-spacing: 0;
  font-weight: bold;
}

.ab-content p {
  line-height: 27px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  padding-right: 2rem;
}

/* ab-pic */
.ab-pic-list {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ab-pic-box {
  clip-path: polygon(
          20px 0,
          100% 0,
          100% calc(100% - 20px),
          calc(100% - 20px) 100%,
          0 100%,
          0 20px
  );
}

.ab-pic-box img {
  transition: all 0.3s;
}

.ab-pic-item:hover .ab-pic-box img {
  transform: scale(1.2);
}

/* index ab rwd */
@media (max-width: 992px) {
  section.about {
    background-position: left center;
  }
}

/* index pdt css setting */
.index-product {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background-color: #fff;
  background-image: none !important;
}

.index-product .container {
  padding-bottom: 0;
}

.index-product .pli_list {
  flex-direction: column;
}

/* pdt pic */
.pro_in1 > a {
  width: 100%;
  overflow: hidden;
}

.pro_in1 > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* pdt word */
.pro_in1 .pli_list .line-height-limit,
.pro_in1 .pli_list a {
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif !important;
  color: var(--main-color);
}

.pro_in1:hover .pli_list .line-height-limit {
  color: #fff;
}

.pro_in1:hover .pli_list a {
  color: #fff;
}

/* pdt word box */
.pli_list {
  position: relative;
  text-align: center;
  padding: 0.7rem 0;
  width: 100%;
  margin: 1rem 0;
  font-size: 18px;
  font-weight: bold;
  background-color: #fff;
  border: none;
  outline: none;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease-out;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif !important;
}

.pli_list::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.8;
  transition: all 0.5s ease-out;
}

.pli_list:hover {
  background-color: var(--main-color);
}

.pli_list:hover::before {
  transform: translate(-50%, -50%) scale(20);
  opacity: 0;
}

/* pdt item hover */
.pro_in1:hover:hover .pli_list {
  background-color: var(--main-color);
}

.pro_in1:hover:hover .pli_list::before {
  transform: translate(-50%, -50%) scale(20);
  opacity: 0;
}

/* index pdt rwd */
@media screen and (min-width: 992px) {
  .pro_in1 > a {
    height: 300px;
  }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
  .pro_in1 > a {
    height: 220px;
  }
}

@media (max-width: 991px) {
  .index-product {
    padding: 50px 0;
  }
}

/* index slogan css setting */
.slogan {
  /*padding: 100px 0;*/
  margin-top: -1px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.slogan .container {
  max-width: 1460px;
}

.slogan-content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.slogan-block {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.slogan h4 {
  color: #fff;
  margin: 2rem 0;
  letter-spacing: 1px;
  font-weight: 700;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

.slogan-block img {
  width: 300px;
}

/* index 客製 */
.page-index {
  display: flex;
  flex-direction: column;
}

/* .index-slider {
  order: 1;
}

.index-product {
  order: 2;
}

.about {
  order: 3;
}

.index-slogan {
  order: 4;
}

.news_in {
  order: 5;
} */

/*20260730 新版面css*/

/* 品牌故事 — 底圖 0–2050，下方 12% 為波浪帶 */
.about {
  position: relative;
  /*aspect-ratio: 3548 / 2050;*/
  background: url("../images/bg-01-brand-story.webp") bottom center / 100% auto no-repeat #eef6fd !important;
  background-size: cover !important;
  padding: 13vw 0 13vw;
  z-index: 0;
  .photo {
    width: 60%;
    height: auto;
    position: absolute;
    right: 0;
    top: 90px;
    z-index: -1;
  }
}
@media (max-width: 991px) {
  .about {
    padding: 8vw 0 21vw;
    aspect-ratio: 2962 / 1715;
    .photo {
      top: inherit;
      bottom: 50px;
    }
  }
}
@media (max-width: 768px) {
  .about {
    padding: 8vw 0 0;
    background-image: none !important;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    .photo {
      width: 100%;
      position: relative;
      bottom: inherit;
    }
    .container {
      padding-right: 0;
      order: 2;
    }
    .brand-story {
      order: 1;
    }
  }
}
.about .inner {
  /*position: absolute;*/
  /*left: 0;*/
  /*right: 0;*/
  /*top: 0;*/
  /*bottom: 0;*/
  /*max-width: 900px;*/
  /*margin: 0 auto;*/
  /*display: grid;*/
  /*grid-template-columns: minmax(420px, 46%) 1fr;*/
  /*gap: 3vw;*/
  /*align-items: center;*/
  width: 60%;
  padding: 0 6vw;
  box-sizing: border-box;
}
@media (max-width: 991px) {
  .about .inner {
    width: 73%;
    .contacts {
      width: 86%;
    }
  }
}
@media (max-width: 768px) {
  .about .inner {
    width: 100%;
    .contacts {
      width: 100%;
    }
  }
}
.section-title {
  margin: 0 0 1.6vw;
  font-size: clamp(28px, 2vw, 33px);
  letter-spacing: 3px;
  font-weight: 400;
}
.section-title .zh {
  color: #e0704a;
}
.section-title .divider {
  color: #b9c4cf;
  font-weight: 400;
  margin: 0 10px;
}
.section-title .sub {
  color: #1b6cb5;
}
.brand-story .contacts {
  color: #4a5560;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.95;
  letter-spacing: 1px;
}
.brand-story .contacts p {
  margin: 0 0 1.3em;
}
.brand-story .contacts p:last-child {
  margin-bottom: 0;
}
.brand-story .contacts .lead {
  color: #3c4650;
}
.brand-story .contacts strong {
  color: #1b6cb5;
}
/*.brand-story .photo {*/
/*  width: 100%;*/
/*  height: auto;*/
/*  display: block;*/
/*}*/

/* 品牌理念 — 底圖 2050–4150，文字位於第二、第三道波浪之間 */
.philosophy {
  position: relative;
  aspect-ratio: 3548 / 2100;
  background: url("../images/bg-02-philosophy.webp") top center / 100% auto no-repeat #f3f9fe !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
@media (max-width: 768px) {
  .philosophy {
    padding: 8vw 0 ;
    background-image: none !important;
    aspect-ratio: inherit;
  }
}
.philosophy .text {
  /*position: absolute;*/
  /*left: 46%;*/
  /*right: 5%;*/
  /*top: 6vw;*/
  padding: 5vw 12vw 4vw;
  text-align: center;
}
@media (max-width: 991px) {
  .philosophy .text {
    padding-top: 1vw;
  }
}
@media (max-width: 768px) {
  .philosophy .text {
    width: 100%;
  }
}
.philosophy h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 2vw, 33px);
  letter-spacing: 6px;
  font-weight: 400;
  color: #e0704a;
}
.philosophy .slogans {
  margin: 0 0 28px;
  font-size: clamp(20px, 1.5vw, 23px);
  letter-spacing: 4px;
  color: #1b6cb5;
  font-weight: 400;
}
.philosophy .body {
  font-size: clamp(14px, 1vw, 17px);
  line-height: 2;
  letter-spacing: 1px;
  color: #3c4650;
}
.philosophy .body p {
  margin: 0;
}
.philosophy .body p + p {
  margin-top: 20px;
}
.value-circles {
  /*position: absolute;*/
  /*left: 0;*/
  /*right: 0;*/
  /*top: 66.5%;*/
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6.4%;
}

.value-circles .circle {
  width: 11.3%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 30px rgba(80, 130, 180, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
@media (max-width: 768px) {
  .value-circles .circle {
    width: 22%;
  }
}
@media (max-width: 480px) {
  .value-circles .circle {
    width: 30%;
    margin: 10px 0;
  }
}
.value-circles svg {
  width: 32%;
  height: auto;
}
.value-circles .zh {
  font-size: clamp(13px, 1vw, 19px);
  letter-spacing: 3px;
  color: #1b6cb5;
  font-weight: 500;
}
.value-circles .en {
  letter-spacing: 2px;
  color: #e0704a;
}

/* 熱門產品 — 底圖 4150–5900，卡片對位底圖 */
.index-product {
  position: relative;
  aspect-ratio: 3548 / 1750;
  background: url("../images/bg-03-products.webp") bottom center / 100% auto no-repeat !important;
}
@media (max-width: 768px) {
  .index-product {
    padding-bottom: 100px;
    background-image: none !important;
    aspect-ratio: inherit;
  }
}
.index-product h2 {
  color: #e0704a;
  position: absolute;
  top: 7.5%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 1.7vw, 33px);
  font-weight: 500;
  letter-spacing: 3px;
}
@media (max-width: 991px) {
  .index-product h2 {
    position: relative;
    margin-bottom: 30px;
  }
}
.index-product h2 span {
  color: #1b6cb5;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
}
.product-cards {
  position: absolute;
  left: 6.7%;
  right: 6.7%;
  top: 22%;
  height: 60%;
  display: flex;
  justify-content: center;
  gap: 2.6%;
}
@media (max-width: 991px) {
  .product-cards {
    position: relative;
    left: inherit;
    right: inherit;
    height: auto;
  }
}
@media (max-width: 480px) {
  .product-cards {
    flex-direction: column;
    align-items: center;
  }
}
.product-card {
  flex: 1;
  max-width: 31.8%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fefefe;
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(90, 140, 190, 0.1);
  padding: 2% 2.4%;
  text-align: center;
  transition:
          transform 0.25s ease,
          box-shadow 0.25s ease;
  box-sizing: border-box;
  border: 1px #e3f4fe solid;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(90, 140, 190, 0.2);
}
.product-card img {
  width: 78%;
  height: auto;
  display: block;
  margin: 0 auto 4%;
  padding: 5%;
  background: url("../images/pdt_bg.webp") center center / 100% auto no-repeat;
}
.product-card .name {
  font-size: clamp(19px, 1.35vw, 26px);
  letter-spacing: 2px;
  color: #1b6cb5;
  font-weight: 500;
  margin-bottom: 8px;
}
.product-card .sub {
  font-size: clamp(14px, 0.95vw, 18px);
  letter-spacing: 2px;
  color: #4a5560;
}
@media (max-width: 991px) {
  .product-card {
    max-width: none;
    img {
      width: 100%;
    }
  }
}
@media (max-width: 480px) {
  .product-card {
    width: 90%;
    margin: 15px 0;
  }
}

/* 恩源好水 — 底圖 5900–8100 */
.aboutus3 {
  position: relative;
  aspect-ratio: 3548 / 2200;
  background: url("../images/bg-04-slogan.webp") top center / 100% auto no-repeat #eef6fd;
}
@media (max-width: 768px) {
  .aboutus3 {
    aspect-ratio: inherit;
    background-image: none !important;
    background-color: #e5f3ff !important;
  }
}
.slogan-banner .text {
  position: absolute;
  left: 11%;
  top: 37%;
  /*white-space: nowrap;*/
}
@media (max-width: 768px) {
  .slogan-banner {
    width: 70%;
    margin: auto;
    .text {
      position: relative;
      left: inherit;
      top: inherit;
      text-align: center;
    }
  }
}
@media (max-width: 375px) {
  .slogan-banner {
    width: 100%;
  }
}
.slogan-banner h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 2vw, 38px);
  color: #e0704a;
  text-align-last: justify;
  font-weight: 400;
}
.slogan-banner p {
  margin: 0;
  font-size: clamp(16px, 1.15vw, 22px);
  letter-spacing: 2px;
  color: #3c4650;
}