/*pc*/
        #productsIMGContainer ul li .ratio{margin-top: 100%; }
        #productsIMGContainer  ul li{width: 23.5%;}
        #productsIMGContainer  ul li.imgItems{margin-bottom:2%;}
        @media screen and (max-width: 1024px)
        {/*ipad*/
            #productsIMGContainer ul li .ratio{margin-top: 100%;}
            #productsIMGContainer  ul li{width: 23.5%;}
            #productsIMGContainer  ul li.imgItems{margin-bottom:2%;}
        }
        @media screen and (max-width: 768px){/*mobi*/
            #productsIMGContainer ul li .ratio{margin-top: 100%;}
            #productsIMGContainer  ul li{width: 49%;}
            #productsIMGContainer  ul li.imgItems{margin-bottom:2%;}
        }

        .imgStyle_11{position:relative; clear: both; width: 85%; height: 100%;margin: auto;}
        .imgStyle_11 ul{width: 100%; display: -webkit-flex; display: -moz-flex; display: flex; flex-wrap:wrap; justify-content:space-between;}
        .imgStyle_11 ul li.imgItems{
            position: relative; overflow: hidden !important; width: 19%; box-sizing:border-box; margin-bottom:10px;
            -webkit-transition: all ease .2s;
            -moz-transition: all ease .2s;
            -ms-transition: all ease .2s;
            -o-transition: all ease .2s;
            transition: all ease .2s;
        }
        .imgStyle_11 ul li .ratio{margin-top: 100%;}
        .imgStyle_11 ul li a{}
        .imgStyle_11 ul li:hover{z-index: 2; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}
        .imgStyle_11 ul li a img{
            position: absolute; width: auto; height: 100%; top: 50%; left: 50%; z-index: 100;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
            -webkit-transition: all ease .2s;
            -moz-transition: all ease .2s;
            -ms-transition: all ease .2s;
            -o-transition: all ease .2s;
            transition: all ease .2s;
        }
        .imgStyle_11 ul li a  .bbx-new-font{
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 100;
        }
        .imgStyle_11 .theimgtext{height:30px;line-height: 30px;font-size: 14px;color:black;width:100%;text-align: center;word-break: keep-all;overflow: hidden;text-overflow: ellipsis;}
        .imgStyle_11 .theimgdiv{width:100%;height:100%;background-repeat: no-repeat !important;background-position-x: 50% !important;background-position-y: 50% !important;background-size: auto 100% !important;font-style: color: white;}
        .imgShowBox{position: fixed; z-index: 99999; background-color: rgba(0, 0, 0, 0.4); top: 0; left: 0; width: 100%; height: 100%;}
        .imgShowBox img{ position: absolute; width: auto; max-width: 80%; border: 20px solid #fff;top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); box-shadow: 0 0 10px rgba(0,0,0,.3);}
        .imgShowBox.scroll{overflow-y:scroll;overflow-x:hidden;}
        .imgShowBox.scroll::-webkit-scrollbar {width: 6px; height: 6px; background: rgba(0,0,0,.05);}
        .imgShowBox.scroll::-webkit-scrollbar{width: 6px; height: 6px; background: rgba(0,0,0,.02);}
        .imgShowBox.scroll::-webkit-scrollbar-button{background: #f7f7f7; height: 0;}
        .imgShowBox.scroll::-webkit-scrollbar-corner{background: rgba(0,0,0,.05);}
        .imgShowBox.scroll::-webkit-scrollbar-thumb{background: rgba(255,255,255,.7); border-radius: 3px;}
        .imgShowBox.scroll img{top:5%; margin-bottom: 5%; transform: translate(-50%,0%); -webkit-transform: translate(-50%,0%); -moz-transform: translate(-50%,0%); -o-transform: translate(-50%,0%);}
        .pos_fixed{position: fixed; width: 100%;}
        .imgButton{position: fixed; width: 70%; max-width: 400px; bottom: 15%; left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            display: -webkit-flex; display: -moz-flex; display: flex; flex-wrap:nowrap; justify-content:space-between; align-items:center;}
        .imgButton span{display: inline-block; cursor:pointer; box-shadow: 0 0 6px rgba(0,0,0,.2);
            -webkit-transition: all ease .2s;
            -moz-transition: all ease .2s;
            -ms-transition: all ease .2s;
            -o-transition: all ease .2s;
            transition: all ease .2s;
        }
        .imgButton span:hover{opacity: .8;}
        .imgButton span i{font-size: inherit; line-height: inherit; color:inherit;}
        .imgButton span.prevImg, .imgButton span.nextImg, .imgButton span.closeShowPic{ font-size: 40px; width: 50px; height:50px; line-height: 50px;  border-radius: 100%;font-family: serif; background-color: #fff; text-align: center; box-sizing: border-box;}
        .imgButton span.prevImg, .imgButton span.nextImg{font-size: 26px; width: 40px; height: 40px; line-height: 40px; text-align: center;}
        @media screen and (max-width: 1024px){
            .imgStyle_11 ul li{width: 24%;}
        }
        @media screen and (max-width: 768px){
            .imgStyle_11 ul li{width: 49%;}
            .imgShowBox img{border-width: 10px;}
            .imgShowBox.scroll img{top:5%; margin-bottom: 10vh;}
        }