body{

    background-color: #2e1e0f;
}

/*-------品牌圖片輪播--------------*/
.item{padding: 125px 0 0 5px;z-index:999 !important; ;}

.banner_bg {
  position: relative;
  width: 100%;
  height: 726px;
  max-width: 960px;
  aspect-ratio: 960 / 726;
  margin: 0 auto;
  background: url("main_01.png?t=1774923251681") center top / contain no-repeat;
  overflow: hidden;

}
.banner_bg_2 {
  position: relative;
  width: 100%;
  height: 636px;
  max-width: 960px;
  aspect-ratio: 960 / 636;
  margin: 0 auto;
  background: url("main_01-2.png?t=1774923251681") center top / contain no-repeat;
  overflow: hidden;

}

/* ✅ 真正的顯示框（視覺開口） */
.swiper-mask {
  position: absolute;
  bottom: 50px;

  /* ✅ 原本 68% 太右，會切第一張 */
  left:50%;
  transform: translateX(-50%);
  margin-left: 100px;

  width: 680px;
  overflow: hidden;
  z-index: 10;
}


.banner {
  position: relative;
  overflow: hidden;

 
}

.banner_2 {
  position: relative;
  overflow: hidden;

 
}


.mySwiper {
  width: 100%;
  height: 100%;
}


.mySwiper .swiper-wrapper {
  align-items: flex-start;
}

.mySwiper .swiper-slide {
  display: flex;
  justify-content: flex-start; /* ✅ 靠左 */
  width: auto !important;
}

.mySwiper .swiper-slide img {
  width: 336px;        /* 你的實際 logo 寬 */
  max-width: none;
  flex-shrink: 0;      /* ✅ 絕對不能被壓 */
}




/* 每一張輪播 */

.slide {
  width: 100%;
  flex-shrink: 0;
  height: auto;
  opacity: 1;
  position: relative;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 767px) {
  .item{padding: 9vw 0 0 0vw;margin-left:-3.5vw ;z-index:999 !important ;position: relative;}
  .item img{width: 95%;z-index:999 !important ;}
  .banner_bg { 
    position: relative;
    width: 100%;
    height:75vw ;
    max-width: 960px;
    aspect-ratio: 960 / 726; /* ← 換成你實際背景圖比例 */
    margin: 0 auto;
    background: url("main_01.png?t=1774923251681") center top / contain no-repeat
  
  }
  .banner_bg_2 { 
    position: relative;
    width: 100%;
    height:63vw ;
    max-width: 960px;
    aspect-ratio: 960 / 636; /* ← 換成你實際背景圖比例 */
    margin: 0 auto;
    background: url("main_01-2.png?t=1774923251681") center top / contain no-repeat
  
  }
  .banner { 
    position: relative;
    padding-top:73vw;
    /*padding-left:73vw;*/
    width:25vw ;
    overflow: hidden;
  
  }
  .banner_2 { 
    position: relative;
    padding-top:63vw;
    /*padding-left:73vw;*/
    width:25vw ;
    overflow: hidden;
  
  }
  

/* ✅ 真正的顯示框（視覺開口） */
.swiper-mask {

  position: absolute;
  bottom: 4.3vw;
  left: 35%;
  transform: translateX(-50%);
  width: 75%;        /* ✅ 比原本 70% 再大 */
  min-height: 18vw;  /* ✅ 比 15vw 稍大，避免裁掉 */
  overflow: hidden;
  z-index: 10;


}

.banner {

  position: relative;
  width: 100%;
  padding-top: 60vw;   /* ✅ 保留你的背景比例 */
  overflow: hidden;

 
}

.banner_2 {
  z-index:-1 ;
  position: relative;
  width: 100%;
  padding-top: 60vw;   /* ✅ 保留你的背景比例 */
  overflow: hidden;


 
}



/* Swiper 本體只負責滑 */
.mySwiper {
  width: 100%;
  height: 100%;
}

.mySwiper .swiper-slide {
  display: flex;
  justify-content: center;
  width:50% !important;
}


.mySwiper .swiper-slide img {
  transform: none;
  width: 100%;
}



}

/*-----------圖片切換頁籤------------------*/



.tab-buttons {
  width: 960px;
  margin: 0 auto;
  gap: 0;               /* 不留縫更乾淨 */
  
}

.tab-btn {
  flex: 1;              /* ✅ 三等分 */
  width: auto;
  height: 64px;         /* ✅ 放大 */
  line-height: 64px;
  font-size: 18px;      /* ✅ 字變大 */
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}



  /* 所有頁籤預設疊起來 */
  .tab-content {
    position: relative;
    width: 960px;
    
    height: auto;     /* ✅ 關鍵 */
    min-height: 0;    /* ✅ 保險 */


  }
  


  
.slider-wrapper {
  position: relative;
  transition: height 0.3s ease; /* ⭐ 高度變化順 */
  height: auto;
    overflow: hidden; /* ✅ 不要卷軸 */
    padding-bottom:10px ;

}

.slider {
  display: flex;              /* ✅ 一定要 */
  align-items: flex-start;    /* ✅ 一定要 */
  transition: transform 0.4s ease;
  
  position: relative;
  width: 100%;
  height: auto;
  



  
}

.slide {
  width: 100%;
  flex-shrink: 0;
  height: auto;      /* ✅ */
  min-height: 0;     /* ✅ */
  

}


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

    .tab-buttons {
        display: flex;
        gap:0.1em;
        margin-bottom: 0.2em;
        margin: 0 auto;
        width:94% ;
      }
      
      .tab-btn {
        width: 33% !important;
        cursor: pointer;
        transition: 0.3s;
        margin: 0 auto;
      }
      
      .slider-wrapper {
        width: 100%;
        overflow: hidden;

      }
      
      .slider {
        display: flex;
        transition: transform 0.4s ease;
      }
      
      .slide {
        min-width: 100%;
        padding: 10px;
        box-sizing: border-box;
        color: #FFF;
      }
  }


/*--------------*滑動內容*---------------------*-/

/* 卡片外層 */

.card-item {
    /*align-items: flex-start !important;*/
    /*background: #fff;*/
    border-radius: 5px;
    padding:8px;
    box-sizing: border-box;
    gap: 5px;
    box-shadow: 0px !important;
    overflow: hidden;

    

    width: 80% !important;   /* ✅ PC便大 */
    max-width:960px !important; 
    margin: 0 auto;  /* ✅ 上下間隔 */
    border: none !important;
    transform: scale(1.08);        /* ✅ 想放大幾倍自己調 */
    transform-origin: top center; /* ✅ 從上中放大，版面最穩 */

  }
  .card-item li{
border: 0px !important;
  }

.card-item ul::after,.card-item li::after {
 display: none !important;
}

/* ✅ icon & 文字都視為同一塊 */
.card-item .PD_layout .PD {
  flex-direction: column !important;
  align-items: flex-start !important;
  width: 100%;
  border:0px !important ;
  background-color: #FFF;
  border-radius: 10px;
}


.card-item .PD {
  flex-direction: column !important;
  align-items: flex-start !important;
}

.card-item .PD_layout .PD_into {
    padding: 0em !important;
    padding-bottom: 0em!important;
    margin: 0.4em 0 0.3em 0.7em !important;
  }



.card-item .PD p {
  height: auto !important;
  max-height: none !important;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #000!important;
}

.card-item .PD_layout ul {
  padding:0em !important; 
  grid-gap:0em !important;
  

}

.card-item .PD_layout[data-pd-h4="1"] .PD h4 {
  max-height:1.6em !important;
  line-height:1.2em !important;
  margin-bottom:0em !important;
  
}

.card-item .PD_layout .PD h4 {
  margin-bottom: 0em !important;
}

.card-item .PD_layout[data-pd-h3="5"] .PD h3 span {
  max-width: 100% !important;
  padding:0 !important;
  margin-bottom:0 !important;
}

.card-item .PD_layout[data-pd-h3="5"] .PD h3 {
  margin-bottom:0 !important;
}

.card-item .PD_layout[data-pd-direction=row] .PD_into {
  width: 100%!important;justify-content:inherit!important;

}
.card-img  {
    width: 90px;
    height: 90px;
    border-radius: 10px;  /* 調整想要的圓角 */
    overflow: hidden;     /* ✅ 讓圖片被框剪裁 */
    flex-shrink: 0;
}

.card-img  img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* ✅ 自動裁切，不變形 */
}

  
  /* 垂直分隔線 */
  .card-line {
    width: 1px;
    height: 70px;
    background: #c8c8c8;
    margin-top: 12px;
  }
  
  /* 文字區 */
  .card-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px;
  }
  
  /* 日期 */
  .card-date {
    font-size: 18px  !important;
    color: #c48322 !important; /* 金棕色 */
    font-weight: 600  !important;
    background-color: transparent !important;
    margin-bottom:0 !important ;
  }
  
  /* 標題 */
  .card-title {
    font-size: 21px  !important;
    font-weight: 900 !important;
    color: #000 !important;
    line-height:1em !important;
    margin-bottom:0 !important ;
  }
  
  /* 說明 */
  .card-desc {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #414141 !important;
    font-weight:700 !important;
  
   -webkit-line-clamp:1  !important;   
   -webkit-box-orient: vertical !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   margin-bottom:0 !important ;

  }


  .icon-mask {
    width: 90px !important;
    height: 90px !important;
    border-radius: 18px !important; /* ✅ 圓角程度，想調圓就調這裡 */
    overflow: hidden !important;    /* ✅ 必須：裁切圖片 */
    flex-shrink: 0 !important;      /* 不要被壓縮 */
    margin:6px 3px 0 3px !important ;

}

.icon-mask img {
    width: 85% !important;
    height: 85% !important;
    object-fit: cover !important;   /* ✅ 核心：自動裁圖，不變形 */
    display: block !important;
}




  
  /* ✅ 手機版 RWD */
  @media (max-width: 767px) {
    .card-item {
      padding:1vw !important;
      gap:5px !important;
      width: inherit !important;   /* ✅ PC便大 */
      margin: 0 auto  1vw!important;   /* ✅ 上下間隔 */
      transform:  inherit !important; 
      transform-origin:  inherit !important; 
      border: none !important;
    }

    .card-item .PD_layout ul {
      padding:0em !important; 
      grid-gap:0em !important;
    }
    
  .card-img {
      width: 60px;
      height: 60px;
    }
  
    .card-line {
      height: 80px !important;
    }
  
    .card-date {
      font-size: 16px !important;
      margin-bottom:0 !important ;
    }
  
    .card-title {
      font-size: 21px !important;
      max-height:1em !important ;
      margin-bottom:0 !important ;
    }
  
    .card-desc {
      font-size: 16px !important;
      margin-bottom:0 !important ;
    }

  

    .icon-mask {
      width: 90px !important;
      height: 90px !important;
      border-radius: 18px !important; /* ✅ 圓角程度，想調圓就調這裡 */
      overflow: hidden !important;    /* ✅ 必須：裁切圖片 */
      flex-shrink: 0 !important;      /* 不要被壓縮 */
      margin:6px 3px 0 3px !important ;
  
  }
  
  .icon-mask img {
      width: 85% !important;
      height: 85% !important;
      object-fit: cover !important;   /* ✅ 核心：自動裁圖，不變形 */
      display: block !important;
  }
  
}



/* 置底 */
.fixed .fixed_img .PD_img{display:block ;}
.fixed .fixed_img .PD_logo{display:none ;}
@media screen and (max-width:767px){
.fixed .fixed_img .PD_img {display:none ;}
.fixed .fixed_img .PD_logo{display:block ;z-index: 999;}
}
.fixed .fixed_img ul{padding: 0 !important;grid-gap: 0 !important;}
@media screen and (min-width:768px){
	.fixed .fixed_GO{position: absolute;bottom: 0;left: 465px;z-index: 10;}
}


.fixed{position: inherit;bottom: 0;z-index: 9999;margin:0 auto ;
}

.fixed_img{width: 80%;}
@media screen and (max-width:767px){
	.fixed{position: fixed;bottom: 0;}
  .fixed_img{width: 100%;}
	.fixed .fixed_GO{position: absolute;width: 35%;bottom: -1vw;left: 67vw;}
}


/* 黏人精 */

.sticky-friend {
  position: fixed;
  right: 20px;
  z-index: 9999;
  bottom: 300px !important;        /* 離底部一段距離 */
  
  /*top:auto !important*/
}

/* 圖片本體 */
.sticky-friend img {
  width: 10em;
  display: block;
  bottom: 5em !important;        /* 離底部一段距離 */
  /*top:auto !important*/
}

/* ✅ 右上角圓形關閉鈕 */
.close-btn {
  position: absolute;
  top: -12px;             /* 稍微壓在圖片外 */
  right: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background-color: rgba(235, 235, 235, 0.75);
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
  z-index: 10;
}

.close-btn:hover {
  background-color: #000;
}


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

  .sticky-friend {
    right: 10px;          /* 靠邊一點 */
    bottom: 100px !important;        /* 離底部一段距離 */
  }

  .sticky-friend img {
    width: 80px;          /* ✅ 手機很好用 */
  }

  .close-btn {
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
  }




.dm_notice {
  
} 
  /* ✅ 手機版 RWD */
  @media (max-width: 767px) {
    .edm_notice {
    padding: 0.1em 0.1em 1.2em 0.1em!important;
    margin-bottom: 1em;
  } 
} 






/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}