/* 列表页 */

.search-box{
    background: #F3F3F3;
    border-radius: 4px;
    padding: 6px 14px;
    margin: 20px 0 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search-box-lt{
    display: flex;
    align-items: center;
}
.search-box .reset-btn{
    text-decoration: underline;
    color:#333;
}
.search-input-b{
    background: #E0E0E0;
    border-radius: 20px;
    
    height: 26px;
    display: flex;
    padding: 0 14px;
    box-sizing: border-box;
    margin-left: 20px;

}
.search-input-b .search-input{
    border: none;
    /* background: url(../image/search-icon.png) no-repeat center center; */
    background-size: auto 80%;
    width: 100%;
    height: 100%;
    background: none;
}

.search-input-b .search-input:focus{
    background: none;
}
.search-input-b .search-btn{background: url(../image/search-icon.png) no-repeat center center; background-size: auto 70%; border:0px;width:26px; height:26px}

.select-box-list{
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 30px;
    position: relative;
}
.select-box-list .arraw-down{
    width: 0;
    height: 0;
    border-top: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid #999;
    margin-left: 20px;
}
.select-box-list.on .arraw-down{
    border-top: 10px solid #999;
    border-bottom: 0;
}
.select-choose-box{
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    top: 14px;
    box-sizing: border-box;
    padding:14px 0px 0 0;
    z-index: 9;
}
.select-box-list.on .select-choose-box{
    display: block;
}
.select-choose-box li{
    padding: 10px 12px;
    background: #F3F3F3;
}
.select-choose-box li:hover{
    background-color: #E0E0E0;
}
.select-choose-box li a{ display: block;}

.search-box-rt ul{
    display: flex;
    align-items: center;
}
.search-box-rt a{
    margin-left: 16px;
    cursor: pointer;
    display: block;
}
.search-box-rt a .mode1{
    width: 18px;
    height: 18px;
    display: block;
    background: url(../image/mode1.png) no-repeat center center;
    background-size: 100% auto;
}
.search-box-rt a .mode2{
    width: 18px;
    height: 18px;
    display: block;
    background: url(../image/mode2.png) no-repeat center center;
    background-size: 100% auto;
}
.search-box-rt a .mode3{
    width: 18px;
    height: 18px;
    display: block;
    background: url(../image/mode3.png) no-repeat center center;
    background-size: 100% auto;
}
.search-box-rt a.on .mode1{
    background: url(../image/mode1-hov.png) no-repeat center center;
    background-size: 100% auto;
}
.search-box-rt a.on .mode2{
    background: url(../image/mode2-hov.png) no-repeat center center;
    background-size: 100% auto;
}
.search-box-rt a.on .mode3{
    background: url(../image/mode3-hov.png) no-repeat center center;
    background-size: 100% auto;
}
/* 计数 */
.count-box-s{
    display: flex;
    align-items: center;
}
.count-box-s .del-btn,.count-box-s .add-btn{
    background: #fff;
    width: 22px;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
}
.count-box-s .del-btn{
    border-radius: 5px 0 0 5px;
}
.count-box-s .add-btn{
    border-radius: 0 5px 5px 0;
}
.count-box-s .num-btn{
    background: #fff;
    height: 24px;
    line-height: 24px;
    width: 36px;
    text-align: center;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}
/* 产品列表 */
.products-list-box ul{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 20px;
}
.products-list-box li{
    background: #F3F3F3;position: relative;
}
.products-list-box li .pic{height: 200px; display: flex; justify-content: center; align-items: center; position: relative;}
.products-list-box li .pic .img-open{ position: absolute; top:0px; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; color:#fff; font-size: 18px; font-weight: bold; cursor: pointer; background: #F3F3F3; z-index: 11;}
.products-list-box li .pic .img-open img{ }
.products-list-box li .pic:hover .img-open{ display: flex;}

.products-list-box li .like{
    position: absolute;
    right: 18px;
    top: 10px;
    width: 26px;
    height: 26px;
    background: url(../image/list_like.png) no-repeat center center;
    background-size: 100% auto;
    z-index: 10;
    cursor: pointer;
    display:none;
}
.products-list-box li .like.on{
    background: url(../image/list_like_on.png) no-repeat center center;
    background-size: 100% auto;
}
.products-list-box li:hover .like{ display: block;}

.products-list-box li .pro-pic{
    max-width: 100%;
    max-height:100%;
    display: block;
    margin:0px auto;
}
.products-list-box li .buy-box{
    padding: 0 14px;
}
.products-list-box li .shop-name{
    color:#666;
    padding: 10px 0;
    height:55px;
    line-height: 20px;
    overflow: hidden;
    text-align: center;
}
.products-list-box li .buy-car-btn{
    background: #363636;
    color:#fff;
    width: 100%;
    padding: 8px 0;
    text-align: center;
    border-radius: 99px;
    display: block;
    margin: 10px 0 14px 0;
}
.products-list-box li .buy-car-btn:hover{background:#e4cf92; color:#fff}

.products-list-box li .count-box-flex{
    display: flex;
    align-items: center;
}
.buy-box .count-from{
    display: flex;
    align-items: end;
}
.buy-box .count-from .word{
    font-size: 12px;
    padding-left: 10px;
    color:#444;
}
.buy-box .count-from .word span{
    font-size: 11px;
    color:#999;
    display: block;
}
.buy-box .count-from .price{
    font-size: 14px;
    padding-left: 10px;
}

/* 翻页 */
.page-change-box{
    margin: 50px 0;
}
.page-change-box ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-change-box li{
    height: 30px;
    line-height: 30px;
    min-width: 30px;
   /*  padding: 0 10px;*/
    box-sizing: border-box;
    border: 1px solid #999;
    text-align: center;
    margin: 0 5px;
    cursor: pointer;
}
.page-change-box li a{display: block;}
.page-change-box li.on, .page-change-box li:hover{
    background: #E4CE92;
    border: 1px solid #E4CE92;
}

.GameList_letters{ margin: 30px 0px; display: flex;}
.GameList_letters a {
    width:36px;
    height:36px;
    margin:0px 0 0 10px;
    line-height:36px;
    text-align:center;
    background-color:#F3F3F3;
    border-radius:3px;
    color:#363636;
    font-size:14px
  }
 .GameList_letters a.active{
    background-color: #363636;color:#fff
}
.GameList_games{position:relative;margin-bottom:30px;background: #F3F3F3; padding:20px 20px 0px 20px; border-radius:10px; display: flex; flex-wrap:wrap; align-items:center;min-height: 130px;}


.GameList_games .prefix {
    background-color:#f4f4f4;
    height:40px;
    line-height: 40px;
    margin-bottom:30px;
    width:15%; 
}
.GameList_games.tag_Recommend .prefix-bg{ width:127px;height:127px; position: absolute; left:0px; top:0px; background: url(../image/recommend.png) left top no-repeat; z-index: 9;}

.GameList_games .prefix span{
    color: #363636;
    font-size: 65px;
    font-weight: bold;
    padding:20px;
}


.games-list{display: flex; flex-wrap:wrap;  width:85% }
.games-list .games{width:25%; margin-bottom: 20px;}
.games-list .games h4{  margin-bottom: 15px; font-size: 14px; color:#363636; }
.games-list .games h4 a{color: #363636; font-size: 14px;display: flex; align-items: center;}
.games-list .games h4 a em{margin-right: 10px;}
.games-list .games h4 a span.tag{margin-right: 4px;/* margin-left: 4px;
    padding: 0px 6px;
    color: #fff;
    font-family: Exo,sans-serif,Microsoft YaHei;
    font-weight: 700;
    line-height: 1;
    vertical-align: 2px;
    text-transform: uppercase;
    white-space: nowrap;border-radius: 200px; font-size: 11px; */}

.games-list .games h4 a span.tag.hot{/* background-color: #f30a5c; */ }
.games-list .games h4 a span.tag.new{/* background-color: #58d819; */}
.games-list .games ul li{color:#999999; margin-bottom: 10px;}
.games-list .games ul li a{color:#999999;font-size: 14px;}

.mode1{
    display: block;
}
.mode2{
    
}
.mode3{
    
}
/* 产品排列模式2 */
.products-list-box.mode2 ul{
    display: block;
}
.products-list-box.mode2 li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding:30px 20px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #e1e1e1;
}
.products-list-box.mode2 li .pic{
    height: auto;
    display: flex;
    justify-content: center;
}
.products-list-box.mode2 .pro-pic{
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 10px;
    margin-right: 20px;
}
.products-list-box.mode2 .lt-pro{
    display: flex;
}
.products-list-box.mode2 .top-title{
    padding-top: 4px;
    display: flex;
    align-items: center;
    padding-bottom: 4px;
}
.products-list-box.mode2 .bot-price{
    margin-top: 14px;
    color: #888;
}
.products-list-box.mode2 .bot-price .black{
    font-weight: bold;
    color:#333;
    padding-left: 3px;
}
.products-list-box.mode2 .rt-to-cart{
    display: flex;
    flex-direction: column;
    align-items: end;
    width: 118px;
}
.products-list-box.mode2 .rt-to-cart .like-btn{
    width: 24px;
    height: 24px;
    background: url(../image/like-icon.png) no-repeat center center;
    background-size: auto 100%;
    display: block;
    margin-top: 4px;
}
.products-list-box.mode2 li .add-count-box{
    margin: 6px 0;
    border: 1px solid #ddd;
    border-radius: 99px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
.products-list-box.mode2 li .add-count-box .count-box-s{
    justify-content: space-between;
    padding: 0 5px;
}
.products-list-box.mode2 li .add-count-box .count-box-s .num-btn{
    border: 0;
}
.products-list-box.mode2 .buy-car-btn{
    background: #7442CE;
    font-weight: bold;
    padding: 4px 9px;
    margin: 0;
    box-sizing: border-box;
}
.red-tag{
    border: 2px solid #F30A5C;
    color:#F30A5C;
    font-weight: bold;
    border-radius: 99px;
    padding: 0px 10px;
    margin-left: 10px;
    font-size: 12px;
}
.start-show {
    display: flex;
    align-items: center;
    color: #999;
}
/* 5星 */
.start-icon {
    height: 14px;
   /*  width: 68px;
    background: url(../image/start.png) left center repeat;
    background-size: auto 94%; */
    display: block;
    position: relative;
    top: 2px;
    margin: 0 10px;
}


/* 产品模式3 */
.products-list-box.mode2.mode3 .pro-pic{
    width: 50px;
    height: 50px;
}
.products-list-box.mode2.mode3 .lt-pro{
    display: flex;
    align-items: center;
}
.products-list-box.mode2.mode3 .rt-to-cart{
    flex-direction: row;
    width: auto;
    align-items: center;
}
.products-list-box.mode2.mode3 .bot-price{
    margin-top: 0;
    margin-right: 10px;
    display: flex;
    align-items: center;
}
.products-list-box.mode2.mode3 li .add-count-box{
    width: 100px;
    margin: 0 10px;
}
.products-list-box.mode2.mode3 .buy-car-btn{
    width: 118px;
}

@media (max-width: 768px) {
    .GameList_games{display: flex; flex-direction: column; justify-content: flex-start;}
    .GameList_games .prefix{text-align: left;}
    .games-list .games{
        width:100%
    }
    .mode2{
        display: block;
    }
    
    .products-list-box ul{
        padding-top:20px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
    }
    .products-list-box li{
        background: #F3F3F3;
      
    }
    .products-list-box li .pro-pic{
        max-width: 100%;
        max-height: 100%;
        display: block;
        margin:0px auto;
    }

    .search-box-rt{
        display: none;
    }
    .products-list-box.mode2 li{
        flex-wrap: wrap;
    }
    .search-box-lt{
        flex-wrap: wrap;
    }
    .select-box-list{
        width: 50%;
        padding-right: 4%;
        margin: 3vw 0 0 0;
    }
    .search-box .reset-btn{
        width: 18%;
    }
    .search-input-b{
        width: 82%;
        margin-left: 0;
    }
    .select-box-list .arraw-down{
        margin-left: 2vw;
    }
    .search-box{
        padding: 4vw 3vw;
        margin: 4vw 0 0 0;
    }
    .products-list-box.mode2 .rt-to-cart{
        width: 100%;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 2vw;
    }
    .products-list-box.mode2 li .add-count-box{
        width:auto;
        flex: 1;
        margin: 0 6vw;
    }
    .products-list-box.mode2 .buy-car-btn{
        width: 38vw;
        padding: 2vw 3vw;
    }
    .search-input-b{
        height: 8vw;
    }
}

@media (max-width: 480px) {

    .products-list-box ul {
        
        grid-template-columns: repeat(1,1fr);
        
    }
  
}