/*===== Google Fonts =====*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");

/* *** 原內容要調整 ***  */
body {
    font-family: "Noto Sans TC", Serif, "arial";
    font-weight: 350;
    line-height: 1.6;
    font-size: 14px;
    color: rgba(34, 34, 34, 1);
}
a {
    color: inherit;
    text-decoration: none;
}
@media (min-width: 481px) {
    a:hover {
        color: inherit;
    }
}
.container {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    max-width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 744px) {
    .container {
        max-width: 911px;
        padding-right: 20px;
        padding-left: 20px;
    }
}
@media (min-width: 991px) {
    .container {
        max-width: 1119px;
        padding-right: 24px;
        padding-left: 24px;
    }
}
/* 07.28 姊姊調整container 寬度 START */
@media (min-width: 1200px) {
    .container {
        max-width: 1128px;
    }
}
@media (min-width: 1440px) {
    .container {
        max-width: 1288px;
    }
}
/* 07.28 姊姊調整container 寬度 END */
.red-color {
    color: rgba(229, 0, 18, 1) !important;
}
.search__toggle--btn {
    position: absolute;
    font-size: 30px;
    left: 20px;
    padding-right: 15px;
    color: #222222;
    align-items: center;
    display: flex;
    height: 100%;
}
.send__toggle--btn {
    position: absolute;
    font-size: 16px;
    right: 8px;
    padding: 4px 20px;
    color: #ffffff;
    background: rgba(34, 34, 34, 1);
    border-radius: 30px;
}
.btn {
    display: inline-block;
    line-height: 1;
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
    word-break: keep-all;
    text-align: center;
}
.btn--radius {
    border-radius: 4px;
}
.nav {
    border-bottom: 1px solid rgba(34, 34, 34, 0.4);
}
.app-nav-tabs .nav-link {
    position: relative;
    font-size: 20px;
    color: rgba(34, 34, 34, 1);
    font-weight: 500;
    display: flex;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}
.app-nav-tabs .nav-link.active {
    position: relative;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
}
@media (min-width: 744px) {
    .nav-link {
        padding: 0 50px 16px;
        width: 100%;
    }
}
.app-nav-tabs .nav-link.active::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -1px;
    background: rgba(229, 0, 18, 1);
    height: 5px;
    width: 100%;
}
@media (min-width: 744px) {
    .app-nav-tabs .nav-link {
        font-size: 24px;
    }
}
.tab-content {
    padding: 32px 32px 30px;
}
.tab-menu-swiper02 .swiper-slide{
    border:0;
}
/*  ******************** Bootstrap ********************  */
.d-block {
    display: block !important;
}
.d-none {
    display: none !important;
}
@media (min-width: 744px) {
    .d-md-none {
        display: none !important;
    }
    .d-md-block {
        display: block !important;
    }
}
@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }
    .d-lg-block {
        display: block !important;
    }
}
@media (min-width: 1200px) {
    .d-xl-none {
        display: none !important;
    }
    .d-xl-block {
        display: block !important;
    }
}

/* *** New Element ***  */
.gray-color {
    color: #d9d9d9;
}
.black-color {
    color: #000000;
}

.m-t-16 {
    margin-top: 16px !important;
}
.p-4 {
    padding: 4px;
}

.unerline {
    text-decoration: underline;
}

.justify-end {
    justify-content: end;
}
/* *** Background ***  */
.orange-card-bg {
    background-image: url('../../img/v1/bg-orange-card.png');
    background-color: #f7f3ef;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
/* *** Button ***  */
.btn--large {
    padding: 16px 20px;
    font-size: 16px;
    border-radius: 4px;
}
.btn--border-black02 {
    font-size:18px;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    border: 1px solid rgba(34, 34, 34, 1);
}
.btn--border-black02:hover {
    color: rgba(255, 255, 255, 1) !important;
    border-color: #d0343d;
    background-color: #d0343d;
}
/* *** Font ***  */
.font16 {
    font-size: 16px;
}
.font24 {
    font-size: 24px;
}
/* *** Width ***  */
.width_192p {
    width: 192px;
}
.mx-width745p {
    max-width: 745px !important;
}
/* *** Margin ***  */
.m-auto {
    margin: auto;
}
/*:::::::::: Gap 縱向排版 :::::::::: */
.gap0 {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.gap4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gap12 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gap32 {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.gap40 {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
/*:::::::::: Gap 橫向排版 :::::::::: */
.flex-layout-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.flex-layout-8 {
    display: flex;
    align-items: center;
    gap: 8px;
}
.flex-layout-12 {
    display: flex;
    align-items: center;
    gap: 12px;
}
.flex-layout-20 {
    display: flex;
    align-items: center;
    gap: 20px;
}
.flex-layout-24 {
    display: flex;
    align-items: center;
    gap: 24px;
}
/* *** header ***  */
.menu-right .item-border-right {
    position: relative;
    margin-right: 16px;
}
.menu-right .item-border-right::after {
    position: absolute;
    content: "";
    background: #d9d9d9;
    height: 20px;
    width: 1px;
    top: 50%;
    transform: translateY(-50%);
    right: -16px;
}
.marquee-sticky {
    position: sticky;
    top: 100px;
    background: rgba(229, 0, 18, 1);
    font-size: 14px;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    padding: 13px 16px;
    z-index: 3;
}
@media (min-width: 1200px) {
    .marquee-sticky {
        top: 120px;
    }
}
.marquee-sticky a:hover {
    color: inherit;
}
.marquee-content {
    display: grid;
    grid-template-columns: 1fr auto;
}
.marquee-content a {
    text-decoration: underline;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
input.large {
    background: transparent;
    border: 1px solid #222222;
    border-radius: 0;
    padding: 11px 94px 11px 8px;
    border-radius: 30px;
    font-size: 16px;
    height: 48px;
}
/* *** 區塊GAP ***  */
-gap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.block-gap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media (min-width: 992px) {
    .block-gap {
        gap: 24px;
    }
}
/* *** Top 搜尋 ***  */
.top-menu-slider {
    font-size: 14px;
    display: flex;
    align-items: center;
    color: rgba(34, 34, 34, 1);
    margin-top: 16px;
}
.top-menu-slider .tab-menu-swiper02{
	padding-bottom:0px;
}
.top-menu-slider .tab-menu-swiper02 .swiper-slide a{
	margin-bottom:0;
	padding-bottom:0;
}
.top-menu-slider img {
    width:264px;
    /*height:132px;*/ /* AL 07.29 因精選分類縮小時，會卡掉區圈的左右邊界 */
    object-fit: cover;
}
.top-menu-slider .keyword { /* AL 07.24 更改只讓關鍵字區域有顯示底線，須再問姊姊 */
    text-decoration: underline;
    white-space: nowrap;
}
.block-content-first {
    padding-top: 100px;
}
@media (min-width: 1200px) {
    .block-content-first {
        padding-top: 120px;
    }
}
.top-search .send__toggle--btn {
    top: 7px;
}
.top-search {
    position: relative;
    width: 100%;
    margin-top: 29px;
}
.kv-m-b{
	margin-bottom:60px;
}
@media(min-width:1200px){
.kv-m-b{
	margin-bottom:55px;
}
}
.kv-area {
    /*     margin-top: 32px; */
    background: #fff5eb;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.kv-des-block {
    display: flex;
    align-items: center;
    order: 2;
    height: calc(3.8em * 4);
    padding: 20px 16px;
}
@media(min-width:744px){
    .kv-des-block {
        padding: 20px;
    }
}
@media(min-width:992px){
    .kv-des-block {
        height: auto;
        padding: 40px;
    }
}
.kv-des-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}
.kv-title {
    font-size: 24px;
    font-weight: bold;
    line-height:36px;
   	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}
.kv-des button {
    margin-top: 8px;
}
.kv-des {
	font-size: 16px;
    line-height: 148%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}
@media (min-width: 992px) {
	.kv-des {
    -webkit-line-clamp: 4;
}
    .kv-des button {
        margin-top: 24px;
    }
}
@media (min-width: 992px) {
    .kv-title {
        -webkit-line-clamp: 3;
    }
}
.kv-img {
    order: 2;
    width: 100%;
    height: auto;
    object-fit: cover;
}
@media (min-width: 992px) {
    .kv-area {
        display: grid !important;
        grid-template-columns: auto 70%;
        /*         margin-top: 44px; */
    }
    .kv-img {
        order: 2;
    }
    .kv-des-block {
        order: 1;
        padding: 46px 40px;
    }
}
.kv-brand {
    color: rgba(229, 0, 18, 1);
}
.kv-area .btn {
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    padding: 7px 20px;
    margin: auto;
    text-align: center;
    width: 200px;
    cursor: pointer;
}
@media (min-width: 744px) {
    .kv-area .btn {
        /*margin-left: 0;*/
        margin-top: 24px;
    }
}
@media (min-width: 992px) {
    .kv-area .btn {
        margin-top: 24px;
    }
}
.title-block {
    position: relative;
}
.title-block img {
    height: 52px;
    max-width: 100%;
}
.title-block h2.main-title {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
}
.title-block .sub-title {
    font-family: "Playfair Display SC", serif;
    font-weight: 400;
    font-size: 32px;
    font-style: italic;
    color: rgba(34, 34, 34, 0.2);
    position: absolute;
    top: -30px;
}
@media (min-width: 744px) {
    .title-block h2.main-title {
        font-size: 32px;
    }
    .title-block .sub-title {
        font-size: 44px;
        line-height: 1;
    }
}
.brand-area-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
}
.brand-area-scroll ul {
    display: grid;
    grid-template-columns: repeat(10, minmax(132px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 0;
}
.brand-area-scroll ul li {
    list-style: none;
    background-color: #ffffff;
    width: 132px;
    height: auto;
}
.brand-area-scroll img {
    object-fit: scale-down;
    object-position: center center;
    width: 132px;
    height: 132px;
}
@media (max-width: 744px) {
    .brand-area-scroll img {
        width: 80px;
        height: 80px;
    }
}

.product-title-area {
    position: relative;
    padding: 16px 0 24px;
    background-color: #f7f3ef;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.product-title-area.sticky-title {
    position: sticky;
    z-index: 1;
    padding: 30px 0;
    grid-template-columns: 350px auto;
    justify-content: space-between;
    align-items: baseline;
    z-index: 2;
}
@media (min-width: 744px) {
    .product-title-area {
        position: sticky;
        /*top: 146px;*/
        z-index: 1;
        padding: 20px 0 24px;
        display: grid;
        grid-template-columns: 350px auto;
        justify-content: space-between;
        align-items: baseline;
        z-index: 2;
    }
}
.product-title-area.grid1 {
    grid-template-columns: 1fr;
}
@media (min-width: 1200px) {
    .product-area {
        top: 120px;
    }
}
.list-item-layout {
    display: grid;
    grid-template-columns: auto 1fr auto;
}
.list-item {
    overflow-x: auto;
    overflow-y:hidden;
}
.list-item ul {
    display: flex;
    padding: 0;
    padding-bottom: 10px;
    margin: 0;
    gap: 12px;
}
.list-item ul li {
    padding-right: 16px;
    padding-left: 4px;
    list-style: none;
    white-space: nowrap;
    position: relative;
    width: fit-content !important;
}
.swiperTab-list-item {
    margin-right: 20px;
    margin-left: 20px;
    list-style: none;
    white-space: nowrap;
    position: relative;
    width: fit-content !important;
}
.swiperTab-list-item::before {
    position: absolute;
    content: "";
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background-color: rgba(34, 34, 34, 0.6);
}
.top-menu-slider .swiper-slide:last-child .swiperTab-list-item::before {
    width:0;
}
.top-menu-slider .swiper-slide a {
    margin-bottom:9px;
}
.top-menu-slider .swiper-slide a.active::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: rgba(229, 0, 18, 1);
    top: 28px;
    left: 0;
}
.list-item ul li::after {
    position: absolute;
    content: "";
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 14px;
    width: 1px;
    background-color: rgba(34, 34, 34, 0.6);
}
.list-item ul li:last-child::after {
    display: none;
}
.list-item ul li a {
    position: relative;
    opacity: 0.6;
}
.list-item ul li a.active {
    opacity: 1;
}
.list-item ul li a:hover {
    color: #d0343d !important;
    opacity: 1;
}
d .list-item ul li a:last-child::after {
    width: 0;
}
.list-item ul li a.active::after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: rgba(229, 0, 18, 1);
    top: 28px;
    left: 0;
}
.list-item ul li:last-child {
    border: 0;
}
@media (min-width: 992px) {
    .left-sticky {
        position: sticky !important;
        top: 251px;
    }
}
.grid2-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
    max-width: 1288px;
}
@media (min-width: 1200px) {
    .grid2-content {
        margin: 0 auto;
    }
}
@media (min-width: 992px) {
    .grid2-content {
        grid-template-columns: 50% 48%;
    }
}
.grid2-content .right-layout {
    overflow: hidden;
}
@media (min-width: 992px) {
    .grid2-content .right-product-area .product-card,
    .grid2-content .right-product-area .product-pic {
        min-width: 210px;
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .grid2-content .right-product-area .product-card,
    .grid2-content .right-product-area .product-pic  {
        min-width: 244px;
        max-width: 100%;
    }
}
@media (min-width: 744px) {
    .grid2-content.reverse .left-layout {
        order: 1;
    }
    .grid2-content.reverse .right-layout {
        order: 2;
    }
}
@media (min-width: 992px) {
    .grid2-content.reverse .left-layout {
        order: 2;
    }
    .grid2-content.reverse .right-layout {
        order: 1;
    }
}
.brand-layout ul {
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 32px 24px;
}
.grid-column-banner {
    position: relative;
    width: 100%;
    display:flex;
    align-items:center;
}
@media(max-width:743px){
.grid-column-banner {
    display:block;
}
}
.grid-column-banner img {
    position: absolute;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}
@media (max-width: 743px) {
    .brand-layout ul {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        gap: 24px 0px;
    }
    .grid-column-banner img {
        position: relative;
    }
}
.brand-des-bg-v2 {
    display: flex;
    align-items: center;
}
.brand-des-bg {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    position: relative;
    margin-top: -40px;
    margin-left:24px;
    height: 100%;
}
@media(max-width:743px) {
    .brand-des-bg {
        height: auto;
    }
}
@media (min-width: 744px) {
    .brand-des-bg {
        margin-top: 0;
    }
}
.brand-des-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    top: 50%;
    padding:16px;
}
.brand-des-block h3 {
    font-size: 20px;
    margin: 0;
}
.brand-des-block .brand-des {
    font-size: 16px;
    font-weight: 300;
}
.grid-column-banner {
    grid-column: 1/3;
    padding: 0;
}
@media (max-width: 743px) {
    .grid-column-banner {
        grid-column: 1;
        padding: 0;
    }

    .brand-des-block {
        top: 0%;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px;
        transform: unset;
        position: relative;
        /*width: calc(100% - 24px); !* bez .brand-des-bg padding:20 24px *!*/
    }

    .brand-des-bg {
        background: transparent;
    }
}
.grid-column-des {
    grid-row: 2 / 2;
    grid-column: 3 / -1;
    bottom: 0;
    left: 0;
}
.last-block {
    padding-bottom: 80px;
}
/* *** 區塊GAP ***  */
.new-online-gap {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
@media (min-width: 992px) {
    .new-online-gap {
        gap: 80px;
    }
}
/* *** 排版暫時需求之後不用放上去 ***  */
.block4-gap {
    display: flex;
    overflow-x: auto;
    gap: 40px 24px;
}


/* ------ AL 25.07.17 ------ */
/*  精選品牌的title 位置排版  */
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    cursor:pointer;
}
.category-title {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}
/* 精選分類、旗艦館精選 + shadow */
.swiper-area {
    position: relative;
    width: 100%;
}
.swiper-area::after {
    content: "";
    /*position: absolute;*/
    top: 0;
    right: 0;
    width: 10%; /* 陰影寬度 */
    height: 100%;
    background: linear-gradient(to left, rgba(247, 243, 239, 0.8), transparent);
    pointer-events: none;
    z-index: 10;
}
/* scrollbar */
.swiper-scrollbar {
    height: 4px;
    margin-top: 16px; /* 在scrollbar加上間隔 */
}
@media (min-width: 744px) {
    .swiper-scrollbar {
        height: 8px;
    }
}
.swiper_sort_padding {
    padding-right: 24px;
}
/* AL  collection + arrows */
.new-arrow {
    background-color: #fff !important;
    border: 1px solid #ccc !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    border-radius: 4px !important;
    margin: 0 8px !important;
    transition: background-color 0.2s !important;
}

/* 07.29 */
.swiper-button08-right {
    right: -1px;
}
.swiper-button08-left {
    left: -1px;
}
.swiper-button08 {
    background: #f7f3ef !important;
    /*border: 1px solid #DBDBDB;*/
    text-align: center;
    border-radius: 5px;
    /*width: 38px;*/
    height: 38px;
    align-items: center;
    display: block !important;
    padding: 19px 0px 0px 0px;
}
.swiper-collection-area {
    position: relative;
    width: 100%;
}
.swiper-slide.mobile_swiper {
    width: 80%;
}
.swiper-button-next.sortShadow {
    background: unset;
    position: absolute;
    top: 0;
    width: 1%;
    height: 100%;
}
.swiper-button-prev.sortShadow {
    background: unset;
    position: absolute;
    top: 0;
    width: 1%;
    height: 100%;
}
.swiper-button-next.flagshipShadow {
    background: unset;
    position: absolute;
    top: 0;
    width: 1%;
    height: 100%;
}
.swiper-button-prev.flagshipShadow {
    background: unset;
    position: absolute;
    top: 0;
    width: 1%;
    height: 100%;
}

/* AL + 精選分類/旗艦館精選 shadow START */
/*  **設定新增的漸層覆蓋元素的共同樣式**  */
.swiper-fade-overlay {
    position: absolute;
    top: 0; /* 位於容器頂部 */
    height: 98%;
    width: 150px; /* 控制漸層區域有多寬** */
    z-index: 5; /* 確保它疊加在輪播內容上方 */
    pointer-events: none; /* 讓滑鼠事件能穿透這個元素，觸發下面的輪播內容 */
}

/*  **修正左側的漸層：**
   - 目標：最左邊是實心米色，向右（靠近輪播內容）漸變為透明。
   - 使用 `to right`：代表漸層從左向右展開。
     - `0%` 是最左邊：設定為米色 (`#F4F2EE`)。
     - `100%` 是最右邊：設定為透明 (`transparent`)。
*/
.swiper-fade-overlay.left {
    left: 0;
    background: linear-gradient(to right, #F4F2EE 0%, transparent 100%);
}

/*  **修正右側的漸層：**
   - 目標：最右邊是實心米色，向左（靠近輪播內容）漸變為透明。
   - 使用 `to left`：代表漸層從右向左展開。
     - `0%` 是最右邊：設定為米色 (`#F4F2EE`)。
     - `100%` 是最左邊：設定為透明 (`transparent`)。
*/
.swiper-fade-overlay.right {
    right: 0;
    background: linear-gradient(to left, #F4F2EE 0%, transparent 100%);
}

/* AL + 精選分類/旗艦館精選 shadow END */
/* .header-black-menu .tab-menu-swiper02{
    padding-bottom:0px;
} */
.header__nav-link--white {
    color: var(--header_main_f_color, #222222) !important;
}
.hero .slick-dots {
    margin-top: 0;
}
.wishlist-item-count--red {
    background: var(--header_main_f_color, #222222) !important;
}
li.square-block .product__img {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.brand-product-list {
    overflow-x: auto;
}
input#header_index_input.large{
    padding-left: 50px;
}
.div_outer_promote_brand {
    display: grid;
    gap: 12px;
}
.div_outer_promote_brand img:hover{
    cursor:pointer;
    transform: scale(100%, 100%);
}
/* .product-title-area .top-menu-slider .swiper-slide a {
    padding-bottom:0;
} */
.block-gap-80{
	margin-bottom:60px;
}
@media(min-width:992px){
	.block-gap-80{
	margin-bottom:80px;
}
}
.block-btn-gap{
	padding-top:32px;
}
@media(min-width:744px){
.block-btn-gap{
	padding-top:40px;
}
}