﻿<style>
/* =========================================================
       修复：中部轮播图图片被裁切的问题
       策略：中间保持1倍大小不溢出，两侧缩小为0.6倍
       ========================================================= */
    .mySwiper {
        width: 100% !important;
        padding: 60px 0 !important; /* 调整上下内边距，让画面更紧凑 */
        margin: 0 auto !important;
        overflow: hidden !important; /* 隐藏溢出，保持白色背景干净 */
        background: #fff;
    }

    .swiper-slide {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 400ms ease;
        transform: scale(0.6) !important; /* 【关键修改】两侧非激活图片缩小为 0.6倍 */
        opacity: 0.4;
    }

    .swiper-slide-active {
        opacity: 1 !important;
        transform: scale(1) !important; /* 【关键修改】中间激活图片保持原比例 (1倍)，绝对不会溢出被切！ */
        z-index: 99;
    }

    .swiper-slide img {
        width: auto !important;
        height: auto !important;
        max-width: 90% !important; 
        max-height: 550px !important; /* 【加双保险】限制最大高度，防止原图过大 */
        object-fit: contain !important; /* 保证按比例完整显示在盒子内 */
        display: block;
        margin: 0 auto;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

    /* 手机端稍微调整一下最大高度 */
    @media screen and (max-width: 768px) {
        .swiper-slide img {
            max-width: 95% !important;
            max-height: 400px !important;
        }
    }

    .service-bar {
        display: flex;
        justify-content: center; 
        align-items: flex-start; 
        padding: 50px 25px;      
        background-color: #FDFBF8; 
        text-align: center;
        margin-top: 30px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .service-item {
        flex: 1;
        max-width: 350px;       
        padding: 0 10px;
        display: flex;          
        flex-direction: column; 
        align-items: center;    
    }

    .service-item img {
        width: 38px;            
        height: auto;
        margin-bottom: 12px !important;
        display: block;         
    }

    .service-item h3 {
        font-size: 14px;        
        font-weight: 600;
        color: #1a1a1a;
        margin: 0 0 8px 0 !important;
        letter-spacing: 0.05em; 
    }

    .service-item p {
        font-size: 11px;        
        line-height: 1.5 !important;
        color: #4d4d4d;
        margin: 0;
        max-width: 240px;       
    }

    @media screen and (max-width: 768px) {
        .service-bar {
            flex-direction: column !important;
            padding: 30px 20px !important;
            align-items: center !important;
        }
        .service-item {
            margin-bottom: 30px !important;
        }
        .service-item:last-child {
            margin-bottom: 30px !important;
        }
    }

    /* ==========================================
       终极修复：彻底控制所有小圆点的显示与隐藏
       ========================================== */
       
    /* --- 1. PC 端 (大于 1000px) --- */
    @media screen and (min-width: 1000px) {
        /* 隐藏顶部 Hero 轮播的点 */
        .heroSwiper .swiper-pagination {
            display: none !important;
        }
        /* 隐藏下方商品（项链）原本自带的轮播点 */
        #MainProductArea .aboutImg .swiper-pagination,
        #MainProductArea .aboutImg .slick-dots,
        #MainProductArea .aboutImg .hd {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }
    }

    /* --- 2. 手机端 / 平板端 (小于等于 999px) --- */
    @media screen and (max-width: 999px) {
        /* 强制显示顶部 Hero 轮播的点 */
        .heroSwiper .swiper-pagination {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
            bottom: 10px !important; 
        }
        .heroSwiper .swiper-pagination-bullet {
            background-color: #999 !important;
            opacity: 0.5 !important;
        }
        .heroSwiper .swiper-pagination-bullet-active {
            background-color: #333 !important;
            opacity: 1 !important;
        }

        /* 强制显示下方商品（项链）的轮播点 */
        #MainProductArea .aboutImg .swiper-pagination,
        #MainProductArea .aboutImg .slick-dots,
        #MainProductArea .aboutImg .hd {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    }
    
    /* =========================================================
       【最终完美版】解决底部留白、完美底部对齐
       ========================================================= */

    /* --- PC端设置 (1000px以上) --- */
    @media screen and (min-width: 1000px) {
        
        /* 🛑 致命错误修复：在PC端彻底隐藏手机轮播，防止底部被撑出巨大空白 */
        .topMobileSwiper { display: none !important; }
        .pc-image-list { display: block !important; }

        #MainProductArea {
            display: block !important;
            height: auto !important;
            overflow: visible !important;
            position: relative !important;
        }

        /* 左右布局：顶部对齐 */
        #MainProductArea .aboutBox {
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important; 
            justify-content: space-between !important;
            width: 100% !important;
            position: relative !important;
        }

        /* --- 左侧（图片）设置 --- */
        #MainProductArea .aboutImg {
            width: 64% !important; 
            float: none !important;
            padding-right: 15px !important; 
            box-sizing: border-box;
        }

        #MainProductArea .aboutImg .focusList,
        #MainProductArea .aboutImg ul,
        #MainProductArea .aboutImg li {
            display: block !important;
            width: 100% !important;
            margin-bottom: 30px !important; /* 图片间距稍微缩小一点 */
            visibility: visible !important;
            opacity: 1 !important;
            animation: none !important;
        }

        /* 🎯 关键细节：取消最后一张图片的底部间距，让左右底部绝对平齐 */
        #MainProductArea .aboutImg li:last-child {
            margin-bottom: 0 !important;
        }

        #MainProductArea .aboutImg .pic {
            display: block !important;
            width: 100% !important;
            height: auto !important;
            min-height: 500px !important;
            background-size: cover !important;
            background-position: center !important;
        }
        
        #MainProductArea .aboutImg img {
            display: block !important;
            width: 100% !important;
            opacity: 0 !important;
        }

        /* --- 右侧（文字）设置 --- */
        #MainProductArea .aboutIntro {
            width: 35% !important;
            float: none !important;
            height: auto !important;
            z-index: 50;
            position: relative; 
            padding-left: 0 !important; 
            margin-left: 0 !important;  
            
            /* 禁用动画 */
            visibility: visible !important;
            opacity: 1 !important;
            animation: none !important;
            transform: none !important;
        }
    }

    /* --- 手机端设置 (999px以下) --- */
    @media screen and (max-width: 999px) {
        
        /* 隐藏PC长图，显示手机轮播图 */
        .pc-image-list { display: none !important; }
        .topMobileSwiper { 
            display: block !important; 
            width: 100%; 
            padding-bottom: 30px; 
        }

        #MainProductArea .aboutBox { display: block !important; }
        #MainProductArea .aboutImg { width: 100% !important; padding: 0 !important; }
        #MainProductArea .aboutIntro { width: 100% !important; position: static !important; }
        
        #MainProductArea .aboutImg, #MainProductArea .aboutIntro {
            visibility: visible !important; opacity: 1 !important;
        }

        .topMobileSwiper .swiper-slide img {
            width: 100%;
            height: auto;
            display: block;
        }
        .topMobileSwiper .swiper-pagination-bullet { background: #999 !important; opacity: 0.5 !important; }
        .topMobileSwiper .swiper-pagination-bullet-active { background: #333 !important; opacity: 1 !important; }
    }
</style>
