@media screen and (min-width:991px) {
    .recommend-area-m,
    .product {
        display: none;
    }
}

@media screen and (max-width:767px) {
    #HomeBody .ads .swiper-container-horizontal > .swiper-pagination-bullets,
    #HomeBody .ads .swiper-pagination-custom,
    #HomeBody .ads .swiper-pagination-fraction {
        bottom: 0;
    }

    #HomeBody .ads .swiper-wrapper {
        padding-bottom: 1rem;
    }

    #HomeBody .ads .swiper-pagination-bullet {
        height: 10px;
        width: 10px;
        background-color: var(--gary-color);
        border: 2px solid var(--gary-color);
        opacity: .5;
    }

    #HomeBody .ads .swiper-pagination-bullet-active {
        background-color: var(--gary-color);
        border: 2px solid var(--gary-color);
        height: 10px;
        width: 30px;
        border-radius: 50px;
        opacity: 1;
    }

    #HomeBody .ads .swiper-pagination__wrapper {
        position: relative;
        width: 100%;
        height: 22px;
    }

        #HomeBody .ads .swiper-pagination__wrapper .swiper-pagination {
            width: 100%;
            margin-top: 5px;
        }

            #HomeBody .ads .swiper-pagination__wrapper .swiper-pagination > .swiper-pagination-bullet {
                margin: 0 5px;
            }

    .ads .swiper-button-next,
    .ads .swiper-button-prev,
    .second .swiper-button-next,
    .second .swiper-button-prev,
    .second2 .swiper-button-next,
    .second2 .swiper-button-prev,
    .product-filter .swiper-button-next,
    .product-filter .swiper-button-prev {
        width: 25px !important;
        height: 37px !important;
        color: var(--white) !important;
        background-color: var(--gary-color) !important;
        background-image: none !important;
        border-radius: 0px;
        /*    z-index: 100;
*/
    }

        .product-filter .swiper-button-next.swiper-button-disabled,
        .product-filter .swiper-button-prev.swiper-button-disabled {
            background-image: none !important;
            background-color: var(--gary-color) !important;
        }

    .swiper-button-next::after {
        font-family: "Font Awesome 5 Free";
        content: "\f054";
        font-size: 1.5rem;
    }

    .swiper-button-prev::after {
        font-family: "Font Awesome 5 Free";
        content: "\f053";
        font-size: 1.5rem;
    }
}

@media screen and (max-width:990px) {

    /* 這一段是從你們mall.css 那邊改過來的 */
    .hsyle {
        margin: 1em 1rem 0 -10px !important;
        font-size: 1rem !important;
        color: var(--main-color);
        font-weight: bolder;
        /* 這裡的！important 可以在你們整合到你們的css庫中拿掉 */
    }

    .temple21_area .hsyle {
        margin: 1em 1rem .5em !important;
    }
    /* 這一段是從你們basic.css 那邊改過來的 我新增一個手機版隱藏*/
    .topbar {
        display: none;
    }

    .product-filter {
        margin-bottom: 2rem;
    }
    /* 熱門推薦 */
    .recommend-area-m {
        padding: 0 1rem;
        margin-top: 1.05rem;
    }

    .mobile-recommend {
        display: flex;
        overflow-y: scroll;
    }

    .items {
        margin: 0 .5rem;
        text-align: center;
    }

    .items_name {
        color: var(--gary-color);
        font-size: 15px;
    }

    .second2 .swiper-wrapper {
        margin-top: .5rem;
    }

    .second {
        position: relative;
    }

        .second .mobile-recommend-Swiper {
            width: 95%;
            margin: auto;
        }

        .second .swiper-button-prev {
            left: -5px !important;
            z-index: 10;
            top: 50% !important;
        }

        .second .swiper-button-next {
            right: -5px !important;
            z-index: 10;
            top: 50% !important;
        }

    .second2 {
        position: relative;
    }

        .second2 .mobile-recommend-Swiper {
            width: 95%;
            margin: auto;
        }

        .second2 .swiper-button-prev {
            left: -5px !important;
            z-index: 10;
            top: 50% !important;
        }

        .second2 .swiper-button-next {
            right: -5px !important;
            z-index: 10;
            top: 50% !important;
        }

    /* 產品 */
    .prod-home {
        padding: 1.05rem 0 !important;
    }

    .product .container {
        padding: 0rem 1rem;
    }

    .prod-home:nth-child(odd) {
        background: var(--gary-color-light200);
        border-top: 1px solid var(--main-color-light);
        border-bottom: 1px solid var(--main-color-light);
    }

    .product.inter .container:nth-child(odd) {
        background: transparent;
        border: none;
    }

    .product-Swiper {
        margin-bottom: 1rem;
        overflow: hidden;
        overflow: clip;
    }

        .product-Swiper .swiper-slide {
            width: auto;
            padding: .5rem 0 .5rem;
            font-size: 1rem;
            font-weight: 900;
            border-bottom: 3px solid var(--main-color-light);
            background: transparent;
        }

            .product-Swiper .swiper-slide:hover,
            .product-Swiper .swiper-slide:focus,
            .product-Swiper .swiper-slide:active,
            .product-Swiper .swiper-slide.active,
            .product-Swiper .swiper-slide:visited {
                border-bottom: 3px solid var(--main-color);
                cursor: pointer;
            }

    .product-Swiper2 .swiper-slide,
    .product-Swiper3 .swiper-slide {
        background: transparent;
    }

    .product-area {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

    .product.inter .product-area {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .product-area a {
        text-decoration: none;
    }

    .product-area .items {
        flex: 0 0 26.5%;
        border: 1px solid var(--main-color-light);
        margin: 0 .35rem;
        background: var(--white);
    }

    .product.inter .product-area .items {
        flex: 0 0 calc(50% - .7rem);
        margin: 0 .35rem .5rem;
    }

    .product-area .items .pic {
        padding: .65rem;
        background: var(--white);
        display: flex;
        justify-content: center;
    }

    .product-area .items-body {
        padding-bottom: 1rem;
        word-break: break-all;
    }

        .product-area .items-body h5 {
            margin: 0;
            padding: 0;
            font-size: 1rem;
            text-align: center;
            color: var(--gary-color);
        }

        .product-area .items-body p {
            margin: 0 0 .5rem;
            padding: 0;
            font-size: 13px;
            text-align: center;
            color: var(--main-color);
        }

    .product.inter .product-area .items-body h5 {
        margin: 0 0 .5rem;
        padding: 0;
        font-size: 1rem;
        text-align: center;
        color: var(--main-color);
    }

    .product.inter .product-area .items-body p {
        margin: 0;
        padding: 0;
        font-size: 13px;
        text-align: center;
        color: var(--gary-color);
    }


    .logo-group-area {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

        .logo-group-area .bottomlogo {
            flex: 0 0 auto;
        }

    .prod-home:nth-child(odd) .logo-group-area .bottomlogo {
        background: var(--gary-color-light200);
    }

        .prod-home:nth-child(odd) .logo-group-area .bottomlogo img {
            mix-blend-mode: multiply;
        }
}