#div_page_marquee {
    top: 0 !important;
}
.section-block{
    margin:56px 0;
}
@media(max-width:767px){
    .section-block{
        margin:24px 0 32px;
    }
}
.section-block.black_bg{
    padding:56px 0;
    margin:-1px 0 0 0;
}
@media(max-width:767px){
    .section-block.black_bg{
     padding:24px 0 32px;
    }
}
.section-block-banner{
    padding:56px 0;
}
@media(max-width:767px){
    .section-block-banner{
        padding:32px 0;
    }
}
.section-block-banner img{
    max-width:1320px;
    margin:auto;
}
/* ******************* 排版暫時區 ******************* */
.card-slider-area{
    display: flex;
    justify-content: center;
    gap:4px;
}
@media(max-width:767px){
    .card-slider-area{
        gap:16px;
    }
}

/* ******************* 主題專區 ******************* */
.top-img-box{
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
}
.top-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.top-img-box .mask{
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 68%,
            rgba(0, 0, 0, 0.4) 82%,
            rgba(0, 0, 0, 0.6) 100%
    );
}
.top-img-box .text{
    text-align: center;
    position: relative;
    z-index:1;
}
.top-img-box .text h3 {
    font-size: 20px;
    font-weight:600;
    color: #ffffff;
    text-align: center;
    letter-spacing: 2px;
    line-height:24px;
    margin:0;
    padding: 24px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    z-index:1;
}
@media(max-width:767px){
    .top-img-box .text h3 {
        font-size:17px;
        padding:12px;
        letter-spacing: 1.7px;
    }
}

.topic-grid5{
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:24px;
}
@media(max-width:767px){
    .topic-grid5{
        gap:16px;
    }
}

/* 5宮格設計 */
.topic-grid3-mix{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:24px;
}
@media(max-width:1199px){
	.topic-grid3-mix{
	    gap:16px;
	}
}

.topic-grid3-mix .top-img-box .text h3{
    text-align: left;
    font-size:19px;
    width: 100%;
    line-height:18px;
    letter-spacing: 0.45px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.topic-grid3-mix .top-img-box .text span{
    font-weight:400;
}
/* 第一列 左欄上下排列 pair-a */
.topic-grid3-mix .pair-a.order-1 { grid-column: 1; grid-row: 1; }
.topic-grid3-mix .pair-a.order-2 { grid-column: 1; grid-row: 2; }

/* 第一列右欄 order-3 */
.topic-grid3-mix .single-b { grid-column: 2; grid-row: 1 / span 2; }

/* 第二列單張4 跨欄 */
.topic-grid3-mix .pair-c.order-4 { grid-column: 3; grid-row: 1; }

/* 第三列最後一張滿寬 */
.topic-grid3-mix .pair-c.order-5 { grid-column: 3; grid-row: 2; }

@media(max-width:767px){
    .topic-grid3-mix{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:8px;
    }
    .topic-grid3-mix .top-img-box .text h3{
        font-size:15px;
        font-weight:500;
    }
    .topic-grid3-mix .top-img-box .text span{
        display: none;
    }
    /* 第一行 pair-a 左右排列 */
    .topic-grid3-mix .pair-a:nth-child(1) { grid-column: 1 ; grid-row: 1; }
    .topic-grid3-mix .pair-a:nth-child(2) { grid-column: 2; grid-row: 1; }
    /* 第二行 單張3 */
    .topic-grid3-mix .single-b:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
    /* 第三行 pair-c 左右排列 */
    .topic-grid3-mix .pair-c:nth-child(4) { grid-column: 1 ; grid-row: 3; }
    .topic-grid3-mix .pair-c:nth-child(5) { grid-column: 2; grid-row: 3; }
}

/* 6宮格設計 */
.topic-grid4-mix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 24px;
    position: relative;
}
@media(max-width:1199px){
	.topic-grid4-mix {
	    gap: 16px;
	}
}

.topic-grid4-mix .top-img-box .text h3 {
    text-align: left;
    font-size:19px;
    font-weight:700;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.topic-grid4-mix .top-img-box .text span{
    font-weight:400;
}

@media(max-width:767px){
    .topic-grid4-mix .top-img-box .text h3 {
        font-size:15px;
        font-weight:500;
    }
    .topic-grid4-mix .top-img-box .text span{
        display: none;
    }
}
/* 第一欄 pair-a 上下排列 */
.topic-grid4-mix .pair-a:nth-child(1) { grid-column: 1; grid-row: 1; }
.topic-grid4-mix .pair-a:nth-child(2) { grid-column: 1; grid-row: 2; }

/* 第二欄 單張3 */
.topic-grid4-mix .single-b { grid-column: 2; grid-row: 1 / span 2; }

/* 第三欄、第四欄 pair-c 平行排列 */
.topic-grid4-mix .pair-c:nth-child(4) { grid-column: 3; grid-row: 1; }
.topic-grid4-mix .pair-c:nth-child(5) { grid-column: 4; grid-row: 1; }

/* 第二行 單張6 跨欄 */
.single-d { grid-column: 3 / span 2; grid-row: 2; }

@media (max-width: 767px) {
    .topic-grid4-mix {
        grid-template-columns: repeat(2, 1fr); /* 兩欄 */
        gap: 8px;
    }
    .topic-grid4-mix .pair-a:nth-child(1) { grid-column: 1; grid-row: 1; }
    .topic-grid4-mix .pair-a:nth-child(2) { grid-column: 1; grid-row: 2; }

    /* 第一行右欄 order-3 */
    .topic-grid4-mix .single-b { grid-column: 2; grid-row: 1 / span 2; }

    /* 第二行單張4 跨欄 */
    .topic-grid4-mix .pair-c:nth-child(4) { grid-column: 1 / span 2; grid-row: 3; }

    /* 第三行 5、6 平行排列 */
    .topic-grid4-mix .pair-c:nth-child(5) { grid-column: 1; grid-row: 4; }
    .topic-grid4-mix .single-d { grid-column: 2; grid-row: 4; }
}


/* ******************* 品牌專區 ******************* */
.activity-grid3{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:24px;
}
.activity-img-box{
    display: flex;
    flex-direction: column;
    gap:16px;
    cursor: pointer;
}
.activity-block-title{
    font-size:16px;
    line-height:19.2px;
    font-weight: 600;
    font-family: "futura-pt", "Noto Sans TC", sans-serif;
    color:#ffffff;
    margin-top:16px;
    letter-spacing: 0.48px;
}
.activity-block-more{
    font-size:14px;
    font-family: "futura-pt",sans-serif;
    line-height:14px;
    text-transform:uppercase;
    font-weight:600;
    color:#ffffff;
    border-bottom: 1px solid #ffffff;
    width: fit-content;
    margin-top:12px;
    padding:4px 0;
}
@media(max-width:767px){
	.activity-block-more{
	    width: fit-content;
	    margin-top:8px;
	}
}

/* ******************* 活動專區 ******************* */
.activity-card-grid2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:24px;
}
@media(max-width:767px){
    .activity-card-grid2{
        gap:16px;
    }
}
.activity-card-box {
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background-color: rgba(243, 244, 246, 0.9) !important;
    cursor: pointer;
}
.activity-card-box:hover {
    background-color: rgba(243, 244, 246, 1) !important;
}
.activity-card-box h3 {
	letter-spacing: 3%;
	margin-bottom:0;
}
.activity-card-box:hover .activity-card-des {
    color: var(--black_color) !important;
}
@media(max-width:1280px){
    .activity-card-box{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
.activity-card-content{
    display: grid;
    grid-template-rows: 1fr auto;
    padding:24px;
}
@media(max-width:767px){
    .activity-card-content{
        padding:16px;
    }
}
.card-top{
    display: flex;
    flex-direction: column;
    gap:12px;
}
h3.activity-card-title{
    font-size: 19px;
    line-height:22.8px;
    font-weight:700;
    letter-spacing: 3%;
    color:var(--header_main_f_color, #000000);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    Overflow:hidden;
}
@media(max-width:1280px){
    h3.activity-card-title{
        font-size: 17px;
        line-height:24px;
        height:48px;
    }
}
@media(max-width:767px){
    h3.activity-card-title{
    	font-size: 17px;
        margin-bottom:18px;
        height:auto;
    }
}
.activity-card-des{
    font-size:16px;
    font-weight: 400;
    line-height:22.4px;
    letter-spacing: 2%;
    color:#343A40;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    Overflow:hidden;
}
@media(max-width:1280px){
    .activity-card-des{
        display: none;
    }
}
.activity-card-date{
	font-family: "futura-pt";
    font-size:14px;
    font-weight: 400;
    line-height:14px;
    letter-spacing: 2%;
    color:#495057;
}
/* ******************* 分店資訊 ******************* */
.store-item-grid4{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:24px;
}
@media(max-width:767px){
    .store-item-grid4{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.store-item{
    font-family: "Noto Serif TC";
    font-size:17px;
    line-height:20.4px;
    letter-spacing:0.51px;
    font-weight: 700;
    color:var(--header_main_f_color, #000000);
    text-align: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.store-item img{
    height:100px;
    max-width:100%;
    object-fit: contain;
}
@media(max-width:767px){
    .store-item{
        font-size:16px;
        line-height:19.2px;
    }
    .store-item img{
        height:80px;
    }
}
.hero {
    display: block;
}
.slick-slide {
    padding: 0;
}
.slick-slider .slick-list {
    height: 100%;
}
.slick-track {
    height: 100%;
}
.hero-slider__arrow {
    color: #000000;
}
.black_bg .hero-slider__arrow {
    color: #ffffff;
}
/* ==== 首頁第一個kv START ==== */
#div_init_page_kv .hero-slider__arrow {
    color: #CED4DA;
}
/* 基礎設定 */
.kv-card {
    height: 100%;
    display: grid !important;
}

/* 指定子元素對應的區域 */
.order1 {
    grid-area: text-area;
}

.order2 {
    grid-area: img-area;
}
.kv-card.theme-3 {
    grid-template-columns: 1fr !important;
    grid-template-areas: "img-area";
}
.kv-card.theme-3 .order1 {
    /* 隱藏文字區域 */
    display: none !important;
}

.kv-card.theme-3 .order2 {
    /* 確保圖片區域佔用剩餘的所有網格空間 (其實只有一欄了) */
    width: 100%;
}
.banner-img{
    position: unset;
    width: auto;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
}
.banner-img img {
    height: 100%;              /* 強制高度填滿容器 */
    width: auto;               /* 寬度依據比例自動調整，或設定為 100% */
    max-width: 100%;           /* 確保不會過寬 */
    object-fit: cover;         /* 這就是關鍵：強制圖片填滿空間，且保持比例（會自動裁切多餘部分） */
    object-position: right;    /* 強制圖片固定在右側對齊 */
}
.theme-2 .banner-img img {
    object-position: left;    /* 強制圖片固定在右側對齊 */
}
.theme-3 .banner-img img {
    object-position: center;    /* 強制圖片固定在右側對齊 */
}
.promo-text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}
.hero__content {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 20px;
    width: 75%;
    position: relative;
    z-index: 1;
}
@media(max-width:767px){
    .hero__content{
        width:100%;
        flex-direction: row;
        padding: 0 0 20px 0;
        align-items: center;
    }
}
/* --- 桌面版 (768px 以上) --- */
@media (min-width: 768px) {
    .kv-card {
        grid-template-columns: 624fr 1104fr;
        grid-template-areas: "text-area img-area";
    }

    /* Theme-2: 左右互換 */
    .kv-card.theme-2 {
        grid-template-columns: 1104fr 624fr;
        grid-template-areas: "img-area text-area";
    }

    /* Theme-3: 僅圖片 */
    .kv-card.theme-3 {
        grid-template-columns: 1fr !important;
        grid-template-areas: "img-area";
    }
}

/* --- 手機版 (767px 以下) --- */
@media (max-width: 767px) {
    .banner-img img {
        height: auto; /* 強制高度填滿容器 */
        width: 100%;
    }
    .kv-card {
        display: grid !important;
        grid-template-columns: 1fr;
        /* 確保高度是由內容決定，而非固定 100% */
        grid-template-rows: auto auto;
        grid-template-areas:
            "img-area"
            "text-area";
        height: auto !important;
    }
    .theme-3 {
        height: auto;
    }
    .theme-3 .banner-img {
        aspect-ratio: unset;
        position: relative;
        width: 100%;
        height: auto; /* 讓高度隨圖片內容自動伸縮 */
    }

    #div_init_page_kv .btn {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    /* Theme-3 在手機版依然維持只顯示圖片 */
    .kv-card.theme-3 {
        grid-template-areas: "img-area";
    }

    .promo-text-area {
        height: auto;
        padding: 16px 0 30px 0; /* 手機版文字區增加間距避免太擠 */
    }

    .hero__content {
        width: 90%; /* 手機版文字範圍加寬 */
    }
    #div_init_page_kv .hero-slider__arrow {
        display: none !important;
    }
    .count_backwards {
        display: none;
    }
}
/* KV倒數計時 */
[name='div_count_down'] .count_backwards {
    display: flex;
    align-items:center;
    background-color: #000000;
    color: #ffffff;
    width: fit-content;
    padding-right: 12px;
    padding-left:4px;
    margin-top:4px;
    height:36px;
}
[name='div_count_down'] .count_backwards .count-bg {
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    font-family: "futura-pt";
    letter-spacing: 0.72px;
    text-align: center;
    text-transform: uppercase;
    padding: 4px 8px;
	min-width:43px;
}
[name='div_count_down'] .count_backwards span {
    font-weight: 400;
    font-size: 16px;
    line-height:16px;
    letter-spacing: 0.48px;
    text-align: center;
    text-transform: uppercase;
}
@media (max-width: 1199px) {
    .hero__content p {
        font-size: 14px;
    }
    .hero__content {
        gap: 10px;
    }
    [name='div_count_down'] .count_backwards .count-bg {
        font-size: 16px;
    }
    [name='div_count_down'] .count_backwards span {
        font-size: 12px;
    }
    .hero-slider__arrow--right {
        right: 10px;
    }
    .hero-slider__arrow--left {
        left: 10px;
    }
}

/* ==== 首頁第一個kv END ==== */
#div-main-brand .hero-slider__arrow--right,
#div_index_rcmd .hero-slider__arrow--right,
 #div-event-block .hero-slider__arrow--right,
 #div-main-brand .hero-slider__arrow--left,
 #div_index_rcmd .hero-slider__arrow--left,
 #div-event-block .hero-slider__arrow--left{
 	width: 32px;
    height:32px!important;
 }
 
#div-main-brand .hero-slider__arrow--right{
    right: -16px;
}
#div-main-brand .hero-slider__arrow--left{
    left: -16px;
}
#div_index_rcmd .hero-slider__arrow--right {
    right: -30px;
}
#div_index_rcmd .hero-slider__arrow--left {
    left: -30px;
 }
 #div-event-block .hero-slider__arrow--right{
    right: -20px;
}
#div-event-block .hero-slider__arrow--left{
    left: -20px;
}
#div_index_rcmd .hero-slider__arrow--left {
    left: -26px;
}
#div-event-block .hero-slider__arrow--left{
    left: 0;
}
#div-event-block .hero-slider__arrow {
    top: 50%;
    transform: translateY(-50%);
}
@media(max-width:1199px){
	#div-event-block .hero-slider__arrow {
	    top: 33%;
	    transform: translateY(-33%);
	}
}
@media(max-width:1574px){
	#div-main-brand .hero-slider__arrow--right {
	    right: 0;
	}
	#div-main-brand .hero-slider__arrow--left{
		left:0;
	}
	#div-event-block .hero-slider__arrow--right{
	    right: 20px;
	    width: 20px;
	}
	#div-event-block .hero-slider__arrow--left {
	    left: 0;
	    width: 20px;
	}
	#div_index_rcmd .hero-slider__arrow--right {
	    right: -10px;
	}
	#div_index_rcmd .hero-slider__arrow--left{
		left:-8px;
	}
}
@media(max-width:767px){	
	#div_index_rcmd .hero-slider__arrow--right{
		right:0;
	}
	#div-event-block .hero-slider__arrow--right{
		right:8px;
	}
}
@media(max-width:575px){
	#div-event-block .hero-slider__arrow {
        top: 29%;
        transform: translateY(-29%);
    }
	#div_index_rcmd .hero-slider__arrow--right {
	    right: 0;
	}
}

/* 活動專區 */
.activity-card-grid2{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:24px;
}
@media(max-width:767px){
    .activity-card-grid2{
        gap:16px;
    }
}
.activity-card-box{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background-color:rgba(243, 244, 246, 0.9);
    cursor: pointer;
    margin: 0 12px;
}
@media(max-width:1199px){
	.activity-card-box{
	    margin: 0 8px;
	}
}

@media(max-width:1280px){
    .activity-card-box{
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}
@media(max-width:767px){
	.activity-card-box{
    margin: 0 8px;
	}
}
.activity-card-content{
    display: grid;
    grid-template-rows: 1fr auto;
    padding:24px;
}
@media(max-width:767px){
    .activity-card-content{
        padding:16px;
    }
}

/* 為您推薦 */
.force-draw-recmd.container{
	padding:0 12px 0 8px;
}
@media(max-width:767px){
	.force-draw-recmd.container {
        padding:0 0 0 8px;
    }
}
#div_index_rcmd  .hero-slider__arrow {
    top: 30%;
    transform: translateY(-30%);
}
@media(max-width:1199px) {
	#div_index_rcmd  .hero-slider__arrow {
	    top: 28%;
	    transform: translateY(-28%);
	}
}
@media(max-width:991px) {
	#div_index_rcmd  .hero-slider__arrow {
	    top: 25%;
	    transform: translateY(-25%);
	}
}
@media(max-width:767px) {
	#div_index_rcmd  .hero-slider__arrow {
	    top: 25%;
	    transform: translateY(-25%);
	}
}

#div_index_category .slick-disabled,
#div-event-block .slick-disabled,
#div-main-brand .slick-disabled,
#div_index_rcmd .slick-disabled {
    display: none !important;
}

#div-event-block {
    padding-right: 0;
}
@media(max-width:767px){
	#div-event-block .slick-track{
		margin-left:-8px;
	}
}
/* 1. 圖片容器：用來鎖定比例和範圍 */
.brand-img-box {
    width: 100%;             /* 或是設定一個你想要的固定寬度，例如 width: 480px; */
    max-width: 480px;        /* 限制最大寬度，避免在超大螢幕上失真 */

    /* 關鍵屬性：直接鎖定 480:309 的比例 */
    aspect-ratio: 480 / 309;

    overflow: hidden;        /* 確保圖片放大後超出容器的部分被隱藏 */
    position: relative;      /* 預防萬一，建立定位基準 */

    /* 如果你的 HTML 結構有用到 Flex，可以加上這個確保容器本身垂直置中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. 容器內的圖片：用來處理縮放和裁切 */
.brand-img-box img {
    width: 100%;             /* 強制圖片寬度填滿容器 */
    height: 100%;            /* 強制圖片高度填滿容器 */

    /* 關鍵屬性：這能保證圖片「不變形」 */
    /* 它會自動縮放圖片，直到「完全蓋住」容器，多餘的部分會被裁切掉 */
    object-fit: cover;

    /* 關鍵屬性：固定從中心點開始裁切 */
    object-position: center;
}
/* 推薦商品 */
#div_index_rcmd .product__box{
    margin:0 8px;
    padding:0 5px!important;
}
@media(max-width:1199px){
	#div_index_category .hero-slider__arrow--right,
    #div-main-brand .hero-slider__arrow--right,
    #div_index_rcmd .hero-slider__arrow--right {
        right: -10ox;
    }
    #div_index_category .hero-slider__arrow--left ,
    #div-main-brand .hero-slider__arrow--left {
        left: 0;
    }
}
@media(max-width:767px){
	#div_index_rcmd .product__box{
	    margin:0 4px;
	    padding:0 4px!important;
	}
}
/* 名媛的週末私語 */
#div_index_category.container{
	padding:0 0 0 24px;
}
@media(max-width:767px) {
	#div_index_category.container{
	padding:0 0 0 16px;
	}
}
.index-categItem:not(:last-child) {
    padding-right: 24px;
} 
@media(max-width:1199px) {
	.index-categItem:not(:last-child) {
		padding-right:16px;
		}
}
@media(max-width:767px) {
    #div_index_category {
        padding-right: 0;
        position: relative;
    }

    /* 1. 統一設定按鈕基礎樣式 */
    #div_index_category .hero-slider__arrow {
        position: absolute;
        height: 100% !important;
        z-index: 10;
        border: none;
        background: none; /* 移除按鈕背景，改用偽元素畫漸層 */
        cursor: pointer;
        transition: opacity 0.3s ease; /* 增加淡出效果 */
    }

    /* 2. 當按鈕被 disabled 時，直接隱藏整個按鈕（含遮罩） */
    #div_index_category .hero-slider__arrow.slick-disabled {
        opacity: 0;
        pointer-events: none; /* 停用點擊 */
    }

    /* 3. 使用按鈕的 ::before 來畫漸層遮罩 */
    #div_index_category .hero-slider__arrow::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* 讓漸層在按鈕圖示（i 標籤）的後方 */
        pointer-events: none;
    }

    /* 左側按鈕的漸層 */
    #div_index_category .hero-slider__arrow--left {
        left: 0;
    }
    #div_index_category .hero-slider__arrow--left::before {
        background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    }

    /* 右側按鈕的漸層 */
    #div_index_category .hero-slider__arrow--right {
        right: 0;
    }
    #div_index_category .hero-slider__arrow--right::before {
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
    }

    /* 4. 確保按鈕內的圖示（箭頭）依然看得見 */
    #div_index_category .hero-slider__arrow i {
        position: relative;
        z-index: 11;
        color: #fff; /* 根據你的設計調整顏色 */
    }
}
/* 主推品牌 */
#div-main-brand.container{
	padding:0 2px 0 24px;
}
@media(max-width:767px) {
	#div-main-brand.container{
	padding:0 0 0 16px;
	}
}

#div-main-brand .hero-slider__arrow i {
    color: var(--white_color)!important;
}

#div-main-brand  .hero-slider__arrow {
    top: 40%;
    transform: translateY(-40%);
}
@media(max-width:1199px) {
	#div-main-brand  .hero-slider__arrow {
    top: 34%;
    transform: translateY(-34%);
	}
}
@media(max-width:767px) {
	#div-main-brand  .hero-slider__arrow {
    top: 37%;
    transform: translateY(-37%);
	}
}

.index-promo-brand:not(:last-child){
    padding-right: 24px;
}
@media(max-width:1199px) {
	.index-promo-brand:not(:last-child) {
	    padding-right: 16px;
	}
}
@media(max-width:767px) {
    #div-main-brand {
        padding-right: 0;
        position: relative;
    }

    /* 1. 當按鈕被 disabled 時，直接隱藏整個按鈕（含遮罩） */
    #div-main-brand  .hero-slider__arrow.slick-disabled {
        opacity: 0;
        pointer-events: none; /* 停用點擊 */
    }

    /* 2. 使用按鈕的 ::before 來畫漸層遮罩 */
    #div-main-brand  .hero-slider__arrow::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* 讓漸層在按鈕圖示（i 標籤）的後方 */
        pointer-events: none;
    }

    /* 左側按鈕的漸層 */
    #div-main-brand  .hero-slider__arrow--left {
        left: 0;
    }

    /* 右側按鈕的漸層 */
    #div-main-brand  .hero-slider__arrow--right {
        right: 0;
    }

    /* 3. 確保按鈕內的圖示（箭頭）依然看得見 */
    #div-main-brand  .hero-slider__arrow i {
        position: relative;
        z-index: 11;
        color: #fff; /* 根據你的設計調整顏色 */
    }
}

/* 廣告kv */
#div-ad-kv .hero-slider__arrow--left{
	left: -16px;
}
#div-ad-kv .hero-slider__arrow--right{
	right: -16px;
}
@media (max-width: 1574px) {
	#div-ad-kv .hero-slider__arrow--left{
		left: 0;
	}
	#div-ad-kv .hero-slider__arrow--right{
		right: 0;
	}
}

/* 商品卡對齊 不然webview會被裁到 */
.v14_product-pic {
    align-items: flex-start;
}