/********************命名Class時，前面需加momoStyle_********************/

/* =========================================
   1. 全域與背景設定
   ========================================= */

body {
    margin: 0;
    padding: 0;
    background-color: #ffffff;

    background-image: url(YSLbg.jpg?t=1787551615810);
    /* 滾動的背景 */
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
}

/*  momo 的大外框是透明的 */
.WRAPPER {
    background: transparent !important;
}

html {
    color: #000;
    text-align: center;
    scroll-behavior: smooth;
}

/* =========================================
   2. 網格與容器排版 (Container & Grid)
   ========================================= */
.container {
    max-width: 1220px;
    margin: 0 auto;
    /* 確保容器置中 */
}

.container img,
.container-fluid img {
    width: 100%;
    height: auto;
    /* 保持圖片比例 */
}

.row {
    margin: 0 auto;
    /* 置中整行內容 */
    align-items: center !important;
    /* fixed flexbox stretch images */
}

.text-center {
    text-align: center;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* =========================================
   3. 文字與標題樣式
   ========================================= */
.safeText2101 {
    color: #000;
    text-align: center;
    font-size: 0.8rem;
    font-family: futurastdmedium, noto sans tc, Arial, 微軟正黑體, microsoft jhenghei, sans-serif;
}

.YSLcategorytitle {
    pointer-events: none;
    /* 分類大標樣式 */
    cursor: default;
}

.YSLcategorytitle span {
    font-size: 36px;
    /* 安全字 */
}

/* =========================================
   4. 互動與動畫效果 (Hover)
   ========================================= */
.col-6 {
    transition-duration: .3s;
}

.col-6 a:hover {
    cursor: pointer;
}

.YSLtransformScale {
    transition: transform 0.3s, filter 0.3s;
}

.YSLtransformScale:hover {
    transform: scale(1.1);
    /* 滑鼠懸停時放大 */
    filter: brightness(1.0);
}

.btn_rob2101 {
    transition-duration: .3s;
    margin-bottom: 3%;
}

.btn_rob2101:hover {
    transform: scale(0.95);
    cursor: pointer;
}

.bonusAnm2102,
.SHUPositionAN {
    transform: translate(0, 0);
    transition-duration: .3s;
}

.bonusAnm2102:hover,
.SHUPositionAN:hover {
    transform: translate(0, -8px);
    /* 滿額贈hover動態 */
}

/* =========================================
   5. 導覽列 Navbar 樣式
   ========================================= */
.lip {
    width: 100%;
    display: flex;
    justify-content: center;
}

.YSLnavbar a {
    color: rgb(255, 255, 255);
    transition-duration: .3s;
    font-family: futurastdmedium, noto sans tc, Arial, 微軟正黑體, microsoft jhenghei, sans-serif;
    font-weight: 500;
    font-size: 1.08rem;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
    border-right: #ccc 1px solid;
}

.YSLnavbar a:last-child {
    border-right: #ccc 0px solid;
}

.YSLnavbar a:hover {
    background: #333;
    color: #fff;
    opacity: 1;
}

/* =========================================
   6. 輪播圖 (Swiper) 與 其他組件
   ========================================= */
.carousel2102 {
    margin-top: -42%;
}

#YSLScrolltoTopBtn {
    width: 60px;
    position: fixed;
    right: 1%;
    bottom: 3%;
    height: auto;
    opacity: 0;
    transition-duration: .3s;
    z-index: 99;
}

#YSLScrolltoTopBtn:hover {
    cursor: pointer;
    opacity: 1;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fdfdfd;
    /* 導覽點顏色 */
    opacity: .5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000000;
    /* 當前導覽點顏色 */
}

.swiper-pagination {
    width: 100%;
    left: 0%;
    bottom: 8%;
}

.swiper-wrapper {
    padding-bottom: 0;
}


/* =========================================
   📱 7. 手機響應式調整 (max-width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    /* --- 手機版背景與外框微調 --- */
    body {
        background-image: none;
        /* 移除 PC 背景 */
        background-color: #000;
        /* 手機版底色 */
        background-repeat: repeat-y;
        background-size: 130vw;
        background-position: center;
        background-attachment: fixed;
    }

    .container>.row {
        background-image: url('YSLbgm.jpg?t=1787551615810');
        /* 手機專用背景圖 */
        background-size: cover;
        background-position: top center;
    }

    .WRAPPER {
        background-image: none;
    }

    .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD {
        margin-bottom: 0;
        /* MB帶品無間距 */
        background: none;
    }

    /* --- 手機版 Navbar 選單橫向滑動 --- */
    .Area_YSLnavbar {
        margin-bottom: 0 !important;
    }

    .Area_YSLnavbar .Area_YSLnavbar_box {
        display: inline-flex;
        width: auto;
        max-width: inherit;
        overflow-y: hidden;
        overflow-x: auto;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5em;
    }

    /* 隱藏手機版橫向捲軸 */
    .Area_YSLnavbar .Area_YSLnavbar_box::-webkit-scrollbar {
        display: none;
    }

    .YSLnavbar {
        flex-wrap: nowrap;
        align-items: center;
    }

    .YSLnavbar a {
        background: #2e2e2e;
        color: #fff;
        opacity: 1;
        white-space: nowrap;
        padding: 0.5em 0.8em;
        border-right: none;
        margin-right: 0.5em;
    }

    .YSLnavbar a:last-child {
        margin-right: 0;
    }

    /* --- 取消部分 Hover 動態 (避免手機點擊卡頓) --- */
    .bonusAnm2102:hover,
    .SHUPositionAN:hover {
        transform: none;
        filter: none;
    }

    /* --- Swiper 與 其他組件微調 --- */
    .carousel2102 {
        margin-top: -55%;
    }

    .swiper-pagination {
        bottom: 5%;
    }

    .swiper-wrapper {
        height: auto;
    }
}