/* DRWU輪播 */
.drwuSwiperA {
  width: 100%;
  position: relative;
}
.drwuSwiperA-slide {
  width: 33% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drwuSwiperA_img {
  width: 100%;
}

@media screen and (max-width: 959px) {
}

/*滿額鋪底*/
.drwuSwiperA_img {
  padding: 8%;
  width: 100%;
}

.drwuSwiperA_color {
  color: #000;
  width: 5%;
  height: 12%;
}

.drwuSwiperA_safe {
  margin: 2% 10%;
  text-align: center;
  font-size: 14px;
}
@media screen and (max-width: 959px) {
  .drwuSwiperA-slide {
    width: 50% !important;
  }
  .drwuSwiperA_color {
    width: 10%;
    height: 30%;
    transform: translateY(-40%);
  }
}

/* 區塊2 / 主打產品區1行2組 */
.seeAll_button {
  width: 20%;
  margin-top: 5%;
  border: none;
  border-radius: 10em;
  padding: 1.2% 0%;
  background-color: #000;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s; /* 添加平滑效果 */
}

.seeAll_button:hover {
  background-color: #d60620;
  font-weight: bolder;
}

.fa-chevron-right {
  font-size: 14px;
  line-height: 1.5 !important;
  display: inline-block;
  vertical-align: bottom;
  padding-right: 1%;
}

@media screen and (max-width: 959px) {
  .seeAll_button {
    font-size: 3.5vw;
    width: 35%;
    padding: 1.5% 0%;
  }
  .fa-chevron-right {
    font-size: 3vw;
    line-height: 1.3 !important;
  }
}

/* 區塊3 / 影片 */
.drwu_videoRight {
  position: absolute;
  top: 2.5%;
  right: 1.875%;
  width: 49%;
  height: 95.2%;
}

/* 共用圖組-影片 */
.drwu_typeB {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.drwu_typeB:hover .typeB_slogan {
  background-color: #f1253e;
}

.drwu_typeB:hover .typeB_priceText1 {
  color: #f1253e;
}

.drwu_typeB:hover .typeB_priceBtn {
  background-color: #f1253e;
}

.typeB_img {
  width: 90%;
  height: auto;
}
.typeB_text {
  width: 100%;
  text-align: center;
  margin-top: 6%;
  font-size: 23px;
}
.typeB_slogan {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #d60620;
  width: 100%;
  margin-top: 3%;
  padding-bottom: 1%;
  transition: background-color 0.3s; /* 添加平滑过渡效果 */
}
.typeB_price {
  display: flex;
  margin-top: 5%;
  align-items: flex-end;
  justify-content: center;
}
.typeB_originalPriceText {
  font-size: 20px;
  padding-bottom: 3%;
  padding-right: 3%;
  text-decoration: line-through;
}
.typeB_priceText1 {
  font-size: 50px;
  font-weight: bold;
  color: #d60620;
  transition: background-color 0.3s; /* 添加平滑过渡效果 */
}
.typeB_priceText2 {
  font-size: 30px;
  font-weight: 500;
}
.typeB_priceBtn {
  font-size: 15px;
  background-color: #d60620;
  color: #fff;
  border: none;
  padding: 5% 10%; /* 按鈕內距 */
  cursor: pointer; /* 鼠标指针样式 */
  margin-left: 4%;
  margin-bottom: 5%;
  align-items: center;
  border-radius: 10em;
  transition: background-color 0.3s; /* 添加平滑效果 */
}

@media screen and (max-width: 959px) {
  .typeB_text {
    margin-top: 3%;
    font-size: 3vw;
  }
  .typeB_slogan {
    font-size: 4vw;
  }
  .typeB_originalPriceText {
    font-size: 3.5vw;
    padding-bottom: 2.5%;
  }
  .typeB_priceText1 {
    font-size: 7vw;
  }
  .typeB_priceText2 {
    font-size: 5vw;
  }
  .typeB_priceBtn {
    font-size: 2vw;
    padding: 3% 6%; /* 按钮內距 */
  }
}

/* 區塊4 / Banner帶品區 */

.drwuSwiperB {
  width: 100%;
  position: relative;
  padding: 2%;
  background-color: #e6e6e6;
}
.drwuSwiperB-slide {
  width: 28% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drwuSwiperB_img {
  width: 100%;
}
.newbom_link {
  display: block;
  width: 100%;
}
.drwuSwiperB-pagination .swiper-pagination-bullet {
  background-color: #d60620;
}
@media screen and (max-width: 959px) {
  .drwuSwiperB-slide {
    width: 40% !important;
  }
}

/* 共用圖組-獨家區 */
.drwu_typeC {
  width: 95%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-bottom: 10px;
}

.drwu_typeC:hover .typeC_slogan {
  background-color: #f1253e;
}

.drwu_typeC:hover .typeC_priceText1 {
  color: #f1253e;
}

.drwu_typeC:hover .typeC_priceBtn {
  background-color: #f1253e;
}

.typeC_img {
  width: 90%;
  height: auto;
  margin-top: 5%;
}
.typeC_text {
  width: 100%;
  text-align: center;
  margin-top: 3%;
  font-size: 16px;
}
.typeC_slogan {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background-color: #d60620;
  width: 100%;
  margin-top: 3%;
  padding-bottom: 1%;
  transition: background-color 0.3s; /* 添加平滑过渡效果 */
}
.typeC_price {
  width: 2vw;
  display: flex;
  margin-top: 5%;
  margin-bottom: 5%;
  align-items: flex-end;
  justify-content: center;
}
.typeC_originalPriceText {
  font-size: 16px;
  padding-bottom: 17.5%;
  padding-right: 15%;
  text-decoration: line-through;
}
.typeC_priceBox {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #d60620;
  transition: color 0.3s; /* 添加平滑过渡效果 */
}
.typeC_dollarSign {
  font-size: 25px;
  font-weight: 500;
  transform: translateY(8%);
}
.typeC_priceText {
  font-size: 36px;
}
.typeC_priceBtn {
  font-size: 12px;
  background-color: #000000;
  color: #fff;
  border: none;
  padding: 20% 40%; /* 按鈕內距 */
  cursor: pointer; /* 鼠标指针样式 */
  margin-left: 30%;
  margin-bottom: 20%;
  display: flex;
  align-items: center;
  border-radius: 10em;
  transition: background-color 0.3s; /* 添加平滑效果 */
}

@media screen and (max-width: 959px) {
  .typeC_img {
    width: 100%;
  }
  .typeC_text {
    font-size: 3.5vw;
  }
  .typeC_slogan {
    font-size: 3.2vw;
    margin-top: 3%;
    padding-bottom: 1%;
  }
  .typeC_price {
    width: 2vw;
    margin-top: 5%;
    margin-bottom: 5%;
  }
  .typeC_originalPriceText {
    font-size: 2.5vw;
    padding-bottom: 1.3vw;
    padding-right: 1vw;
    text-decoration: line-through;
  }
  .typeC_dollarSign {
    font-size: 3.5vw;
    font-weight: 500;
    transform: translateY(17%);
  }
  .typeC_priceText {
    font-size: 6vw;
    letter-spacing: -0.2vw;
  }
  .typeC_priceBtn {
    font-size: 2vw;
    padding: 0.7vw 1.5vw; /* 按鈕內距 */
    margin-left: 1vw;
    margin-bottom: 1vw;
  }
}

/* 區塊5 / 主打產品區1行1組 */
.drwu_typeA {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0% 2% 2.5% 2%;
}
.typeA_left {
  width: 70%;
}
.left_img {
  width: 100%;
  padding: 5%;
}
.typeA_right {
  width: 50%;
  padding: 2%;
}
.typeA_title {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 3%;
  text-align: left;
  color: #000000;
}
.typeA_desc {
  font-size: 22px;
  color: rgb(100, 100, 100);
  margin-bottom: 3%;
  text-align: left;
  width: 100%; /* 固定寬度 */
  word-break: break-word; /* 允許在必要時換行 */
  overflow-wrap: break-word; /* 在必要時換行但不分割單詞 */
  white-space: normal; /* 確保白空格處理為正常模式 */
}
.typeA_discount {
  display: flex;
  width: 25%;
  justify-content: center;
  background-color: #d60620;
  color: white;
  position: relative;
  margin-bottom: 3%;
  align-items: center;
}
.discount_arrow {
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 16px solid #d60620; /* 與背景顏色一致 */
}
.discount_origin {
  font-size: 12px;
}
.origin_price {
  font-size: 12px;
  text-decoration: line-through;
}
.origin_text {
  font-size: 12px;
}
.discount_number {
  font-size: 50px;
  display: flex;
  align-items: center;
  font-weight: 400;
}
.discount_text {
  font-size: 26px;
  display: flex;
  align-items: center;
  transform: translateY(8%);
}

.typeA_lastPrice {
  display: flex;
  align-items: flex-end;
  justify-content: left;
  margin-bottom: 5%;
}
.lastPrice_title {
  font-size: 20px;
}
.lastPrice_number {
  font-size: 24px;
}
.lastPrice_set {
  font-size: 20px;
  margin-right: 7%;
}
.lastPrice_price {
  font-size: 60px;
  font-weight: 600;
  transform: translateY(15%);
  color: #d60620;
}
.lastPrice_price_sign {
  font-size: 30px;
  font-weight: 500;
}
.typeA_get {
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  cursor: pointer;
}
.typeA_btn {
  width: 50%;
}
@media screen and (max-width: 959px) {
  .drwu_typeA{
    padding: 0% 2% 2.5% 2%;
  }
  .typeA_right {
    width: 50%;
    padding: 0% 0% 0% 2%;
  }
  .typeA_left {
    width: 50%;
  }
  .left_img {
    padding: 0%;
    margin-top: 20%;
  }
  .typeA_discount {
    width: 50%;
  }
  .typeA_title {
    font-size: 3.8vw;
    margin-bottom: 1%;
  }
  .typeA_desc {
    font-size: 3.5vw;
  }
  .typeA_discount {
    width: 45%;
  }
  .origin_price {
    font-size: 2.5vw;
  }
  .origin_text {
    font-size: 3vw;
  }
  .typeA_lastPrice {
    transform: translateY(-30%);
    margin-bottom: 0%;
  }
  .discount_number {
    font-size: 9vw;
    transform: translateY(-1%);
    padding: 0% 1.5%;
  }
  .discount_text {
    font-size: 5.5vw;
    transform: translateY(4%);
  }
  .discount_arrow {
    border-top: 5.5vw solid transparent;
    border-bottom: 5.5vw solid transparent;
  }
  .lastPrice_title {
    font-size: 4vw;
  }
  .lastPrice_number {
    font-size: 4vw;
    transform: translateY(4%);
  }
  .lastPrice_set {
    font-size: 3vw;
    margin-right: 5%;
  }
  .lastPrice_price_sign {
    font-size: 5vw;
  }
  .lastPrice_price {
    font-size: 9.5vw;
    letter-spacing: -0.2vw;
  }
}

/* 區塊6 / 按鈕swiper */
.drwu_banner {
  width: 100%;
}
.drwuSwiperC {
  width: 100%;
  position: relative;
  padding: 2%;
  background-color: #d4d4dc;
}
.drwuSwiperC-slide {
  width: 28% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drwuSwiperC_img {
  width: 100%;
}
.drwuSwiperC-pagination .swiper-pagination-bullet {
  background-color: #d60620;
}
@media screen and (max-width: 959px) {
  .drwuSwiperC-slide {
    width: 40% !important;
  }
}

/* 區塊7 / 步驟區 */
.stepArea {
  display: flex;
  width: 100%;
  margin-top: 2%;
}
.stepArea_left {
  width: 40%;
}
.step_img {
  width: 100%;
}
.drwuSwiperD {
  width: 60%;
  position: relative;
  padding: 1.5%;
}
.drwuSwiperD-slide {
  width: 40% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.drwuSwiperD-pagination .swiper-pagination-bullet {
  background-color: #d60620;
}
.stepArea_btn {
  margin-top: 5%;
  width: 30%;
  margin-bottom: 5%;
}

/* 區塊11 / 商品系列 */
.drwuSwiperE {
  width: 100%;
  position: relative;
  padding: 1.5%;
  margin-top: 5%;
}
.drwuSwiperE-slide {
  width: 30% !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiperE_link {
  display: block;
  width: 100%;
}
.drwuSwiperE-pagination .swiper-pagination-bullet {
  background-color: #d60620;
}

/* 介紹組圖 */
.intro_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.intro_img {
  width: 100%;
  margin: 3% 0%;
  padding: 0% 1.5%;
}
.intro_title {
  display: flex;
  justify-content: center;
  width: 20px;
  white-space: nowrap;
  font-size: 20px;
  margin: 3% 0%;
}
@media screen and (max-width: 959px) {
  .intro_title {
    font-size: 2vw;
  }
  .intro_img{
    margin: 3% 0% 18% 0%;
  }
  .drwuSwiperE-slide {
    width: 40% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* 區塊10 / 品牌故事區 */
.drwu_brand {
  max-width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #d60620;
}
.brand_left {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  justify-content: flex-end;
}
.brand_img_pc {
  width: 50%;
  padding: 2%;
  display: block;
}
.brand_img_mo {
  display: none;
}
.brand_right {
  width: 50%;
  padding: 2%;
}
.brand-area {
  width: 50%;
}
.brand_tag {
  font-size: 15px;
  text-align: left;
  letter-spacing: 3px;
  color: #fff;
}
.brand_title {
  font-size: 42px;
  text-align: left;
  color: #fff;
}
.brand_text {
  margin-top: 3%;
  font-size: 16px;
  text-align: justify;
  color: #fff;
  letter-spacing: 2px;
}

@media screen and (max-width: 959px) {
  .brand_img_pc {
    display: none;
  }
  .brand_img_mo {
    display: block;
    width: 100%;
    padding: 2%;
  }

  .drwu_brand {
    flex-direction: column;
  }
  .brand_left {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .brand_right {
    display: flex;
    width: 100%;
    padding: 4%;
    margin-bottom: 3%;
  }
  .brand-area {
    width: 100%;
  }
  .brand_tag {
    font-size: 2vw;
  }
  .brand_title {
    font-size: 5vw;
  }
  .brand_text {
    font-size: 2.5vw;
  }
}


/*20240910修改*/

/*輪播箭頭修改*/
.aoli-swiper-left {
  color: #fff;
  transform: translate(0%, -25%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 45px;
}
.aoli-swiper-right {
  color: #fff;
  transform: translate(0%, -25%);
  background-color: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 45px;
}

/*標題調整*/
.drwu-event-title{
  font-size: 48px;
  font-weight: 600;
  color: #575353;
  text-align: center;
  display: flex;
  justify-content: center;
  padding: 0% 0% 0.5% 0%;
  margin: 3% 10%;
}



/*標題緞帶*/
.h2-ribbon {
  position: relative;
  margin: 0 auto 20px;
  padding: 0px 40px 10px 40px;
  text-align: center;
  background-color: #d60620; /* 修改為紅色 */
}

.h2-ribbon::before, .h2-ribbon::after {
  content: '';
  width: 80px;
  height: 100%;
  background-color: #c2051b; /* 可以將深色背景也改成紅色的較深色調 */

  /* position ribbon ends behind and slightly lower */
  position: absolute;
  z-index: -1;
  top: 20px;
  
  /* clip ribbon end shape */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

  /* draw and position the folded ribbon bit */
  background-image: linear-gradient(45deg, transparent 50%, #a10417 50%); /* 修改為紅色的深色折痕 */
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.h2-ribbon::before {
  left: -60px;
}

.h2-ribbon::after {
  right: -60px;
  transform: scaleX(-1); /* flip horizontally */
}
.h2-title-margin{
  margin-top: 40px;
}

@media screen and (max-width: 959px) {
  .aoli-swiper-left {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    width: 10vw;
    height: 13vw;
    left: -2%;
    transform: translate(0%, -25%);
    top:50%;
  }
  .aoli-swiper-right {
    color: #fff;
    transform: translate(0%, -25%);
    background-color: rgba(0, 0, 0, 0.5);
    width: 10vw;
    height: 13vw;
    right: -2%;
  }  
  /*標題*/
  .drwu-event-title{
    font-size: 7vw;
  }  
  /*緞帶*/
  .h2-ribbon {
    margin: 2% auto 5%;
    padding: 0px 6% 1.5% 6%;
    width: 90vw;  /* 控制最大寬度 */
    position: relative; /* 為了使伪元素相對於父元素定位 */
  }
  .h2-ribbon::before, .h2-ribbon::after {
    width: 10vw;      /* 縮小緞帶的寬度 */
    top: 5vw;        /* 相應縮小 top 的值，保持比例 */
    
    /* 調整折痕的 background-size */
    background-size: 5vw 5vw;
  }

  .h2-ribbon::before {
    left: -5vw;     /* 縮小左邊距離，保持比例 */
  }

  .h2-ribbon::after {
    right: -5vw;    /* 縮小右邊距離，保持比例 */
    transform: scaleX(-1); /* 保持水平翻轉 */
  }

  .drwuSwiperA_safe{font-size: 2.5vw;}
    /* 共用圖組-獨家區 */
  .drwu_typeC {
    margin-bottom: 10%;
  }
  .swiper-pagination-aoli{
    bottom:1% !important;
  }
  .h2-title-margin{
    margin-top: 30px;
  }
}