/* =========================================================
   VIIcode HK
   Global Responsive Layout Protection
   PC / Tablet / Mobile
   ========================================================= */


/* =========================================================
   01. 基础重置
   ========================================================= */

html {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;

    min-width: 0 !important;

    margin: 0;
    padding: 0;

    overflow-x: hidden !important;

    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* =========================================================
   02. 所有容器不能超过屏幕
   ========================================================= */

#container,
#content,
#main,
#page,
#wrapper,
.site,
.site-wrapper,
.main,
.main-content,
.page-content,
.content {
    width: 100%;
    max-width: 100%;

    min-width: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   03. Bootstrap / Row 防止负 margin 把页面撑爆
   ========================================================= */

.row {
    width: 100%;
    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   04. 所有列允许缩小
   ========================================================= */

[class*="col-"] {
    min-width: 0;

    max-width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   05. 图片绝对不能撑爆页面
   ========================================================= */

img {
    display: block;

    max-width: 100%;
    height: auto;

    border: 0;

    box-sizing: border-box;
}


/* =========================================================
   06. Picture
   ========================================================= */

picture {
    display: block;

    width: 100%;
    max-width: 100%;
}

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


/* =========================================================
   07. iframe / video
   ========================================================= */

iframe,
video,
embed,
object {
    display: block;

    max-width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   08. 防止超长文字撑爆页面
   ========================================================= */

p,
span,
a,
li,
h1,
h2,
h3,
h4,
h5,
h6,
div {
    overflow-wrap: break-word;

    word-wrap: break-word;
}


/* =========================================================
   09. 表格
   ========================================================= */

table {
    width: 100%;
    max-width: 100%;

    border-collapse: collapse;

    table-layout: auto;
}

td,
th {
    max-width: 100%;

    word-break: break-word;
}


/* =========================================================
   10. 表单
   ========================================================= */

input,
select,
textarea,
button {
    max-width: 100%;

    box-sizing: border-box;

    font-family: inherit;
}


/* =========================================================
   11. 防止 PC 固定宽度
   ========================================================= */

.container {
    width: 100%;
    max-width: 1440px;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}


/* =========================================================
   12. jq22-container
   你截图里实际存在这个容器
   ========================================================= */

.jq22-container {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box;
}


/* =========================================================
   13. Swiper
   ========================================================= */

.swiper,
.swiper-container {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow: hidden;
}

.swiper-wrapper {
    width: 100%;

    max-width: 100%;

    box-sizing: border-box;
}

.swiper-slide {
    width: 100%;

    max-width: 100%;

    min-width: 0;

    box-sizing: border-box;

    overflow: hidden;
}

.swiper-slide img {
    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;
}


/* =========================================================
   14. Slideshow
   ========================================================= */

#slideshow,
.slideshow,
.slideshow-container,
.slider,
.banner-slider {
    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow: hidden;
}


/* =========================================================
   15. Banner
   ========================================================= */

#slideshow img,
.slideshow img,
.slider img,
.banner img {
    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;
}


/* =========================================================
   16. 防止 inline style 固定宽度
   ========================================================= */

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

    [style*="width:1200px"],
    [style*="width: 1200px"],
    [style*="width:1280px"],
    [style*="width: 1280px"],
    [style*="width:1440px"],
    [style*="width: 1440px"],
    [style*="width:1920px"],
    [style*="width: 1920px"] {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }

}


/* =========================================================
   17. 手机端
   ========================================================= */

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

    html,
    body {
        width: 100% !important;

        min-width: 0 !important;
        max-width: 100% !important;

        overflow-x: hidden !important;
    }


    /* -------------------------------------
       所有主要容器
    ------------------------------------- */

    #container,
    #content,
    #main,
    #page,
    #wrapper,
    .site,
    .site-wrapper,
    .main,
    .main-content,
    .page-content,
    .content,
    .container,
    .container-fluid {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        box-sizing: border-box;
    }


    /* -------------------------------------
       Bootstrap Row
    ------------------------------------- */

    .row {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }


    /* -------------------------------------
       Bootstrap columns
    ------------------------------------- */

    [class*="col-"] {
        width: 100%;

        max-width: 100%;

        min-width: 0;

        float: none;

        box-sizing: border-box;
    }


    /* -------------------------------------
       Header
    ------------------------------------- */

    header,
    .header,
    #header,
    .site-header {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        overflow: visible !important;
    }


    /* -------------------------------------
       Header 内部
    ------------------------------------- */

    header > *,
    .header > *,
    .site-header > * {
        max-width: 100%;

        min-width: 0;
    }


    /* -------------------------------------
       导航
    ------------------------------------- */

    nav,
    .nav,
    .navbar,
    .navigation,
    .main-menu {
        max-width: 100%;

        min-width: 0;

        overflow-x: hidden;
    }


    /* -------------------------------------
       图片
    ------------------------------------- */

    img {
        width: auto;

        max-width: 100% !important;

        height: auto !important;
    }


    /* -------------------------------------
       Banner
    ------------------------------------- */

    #slideshow,
    .slideshow,
    .slider,
    .swiper,
    .swiper-container {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden !important;
    }


    /* -------------------------------------
       Banner 图片
    ------------------------------------- */

    #slideshow img,
    .slideshow img,
    .slider img,
    .swiper-slide img {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
    }


    /* -------------------------------------
       产品列表
    ------------------------------------- */

    .product-grid,
    .product-list,
    .products {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    /* -------------------------------------
       产品卡片
    ------------------------------------- */

    .product-grid > *,
    .product-list > *,
    .products > * {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* -------------------------------------
       产品图片
    ------------------------------------- */

    .product-grid img,
    .product-list img,
    .products img {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
    }


    /* -------------------------------------
       两栏布局
       手机自动变成一栏
    ------------------------------------- */

    .two-column,
    .two-cols,
    .product-main,
    .product-detail {
        width: 100% !important;

        max-width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        min-width: 0 !important;
    }


    .two-column > *,
    .two-cols > *,
    .product-main > *,
    .product-detail > * {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;
    }


    /* -------------------------------------
       产品详情
    ------------------------------------- */

    .product-info,
    .product-description,
    .product-content {
        width: 100% !important;

        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden;
    }


    .product-description img,
    .product-content img {
        width: 100% !important;

        max-width: 100% !important;

        height: auto !important;
    }


    /* -------------------------------------
       Footer
    ------------------------------------- */

    footer,
    .footer,
    #footer {
        width: 100% !important;

        min-width: 0 !important;

        max-width: 100% !important;

        overflow: hidden;
    }

}


/* =========================================================
   18. 508px / 480px / 375px 极窄屏保护
   ========================================================= */

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

    body {
        font-size: 14px;
    }


    /* 所有 flex 子元素允许缩小 */

    .row > *,
    header > *,
    .header > *,
    .site-header > *,
    .swiper-slide > * {
        min-width: 0 !important;
    }


    /* 防止固定定位元素撑宽 */

    .fixed,
    .position-fixed {
        max-width: 100vw;
    }


    /* 图片始终以屏幕宽度为上限 */

    img {
        max-width: 100vw !important;
    }

}


/* =========================================================
   19. 375px 以下
   ========================================================= */

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

    .product-grid,
    .product-list,
    .products {
        gap: 8px;
    }

    body {
        font-size: 14px;
    }

}


/* =========================================================
   20. 防止横向滚动
   ========================================================= */

html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
}




@media (max-width: 1200px) {
    .reward_shop .containerer {
        margin-top: 100px;
    }
}