@charset "UTF-8";
/*Home*****************************/

@media(min-width:1450px){
    section > .container{
        width:1300px;
    }
}

@media(min-width:768px){
    /*wrapper*/
    .wrapper{padding-bottom:50px;}
}


/*KV*/
#homeKV{
    overflow-x:hidden;
    position:relative;
}

#homeKV aside{}

#homeKV .swiper-container {
      width: 100%;
      height: 100%;
    }

#homeKV  .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      overflow:hidden;
      height: 0;
      position:relative;
      padding-bottom:20.83%; /* web KV 1920x400 → 400/1920 */
    }
    
#homeKV  .slide-inner {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-size: cover;
      background-position: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      color:#fff;
    }

#homeKV  .slide-inner a,
#homeKV  .slide-inner picture{
        display:block;
        width:100%;
        height:100%;
    }

/*swiper ***********************/

#homeKV  .swiper-pagination{
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 30px !important;
    width: 100%;
    justify-content: center;
}

#homeKV  .swiper-pagination-bullet{
    width:22px;
    height: 6px;
    display:block;
    border-radius: 0;
}

.swiper-button-next:after, 
.swiper-button-prev:after
{
    font-weight:bold;
}

:root{
    --swiper-navigation-size: 60px;
    --swiper-theme-color: #ffffff;
}

.swiper-pagination-bullet-active{background-color:var(--green)}

#homeKV .swiper-notification{display:none;}
#homeKV .swiper-slide{position:relative;}
#homeKV .swiper-slide h3{position:absolute;z-index:10;}
#homeKV .swiper-slide img{
    display:block;
    position:relative;
    width:100%;height:100%;object-fit:cover;
}

/*首頁區塊***********************************/

.homePrdListZone{padding:50px 0;}
.homeRankingZone{background: #F5F5F5;padding:50px 0;}
.homeNewPrdZone{padding:50px 0;}
.homeNewsZone{padding:50px 0;}

.homeSerialZone{}

/*
 * ≤768px：banner feed 已提供 small_img_link（SoApi CMS 小圖規範 800x800 正方）。
 * 帶 .has-mobile-kv 的 slide（small_img_link 非空）在 ≤768 改用正方 box，
 * 800x800 小圖進正方 box + object-fit:cover 剛好貼合、零裁切。
 * 桌機仍用基準 20.83%（=1920x400 大圖比例）吃 img_link 大圖。
 * ⚠ 前提：小圖須照 800x800 正方；上傳非正方（如直式）會被 cover 裁切。
 */
@media(max-width:768px){
    #homeKV .swiper-slide.has-mobile-kv {
        padding-bottom:100%;
    }
}