@media (min-width: 1200px){.container {width: 1200px}}
body{background-color: #FFFFFF;}
/*头部*/
.hpoi-buy-head-icon{font-size: 20px;margin-top: 29px;padding: 7px 0;}
.hpoi-buy-head-icon>a{color: #35CDFF;}
.hpoi-buy-head-icon img{width: 20px;height: 20px;margin-top: -5px;}
.hpoi-head-search{position: relative;}
#hpoi-shop-search-input{padding-right: 30px;}
.hpoi-head-search .icon-cancel{display: none;position: absolute;right: 70px;top: 50%;transform: translateY(-50%);font-size: 12px;cursor: pointer;}
.hpoi-head-search .icon-cancel:hover{color:#35CDFF;}
/*QQ*/
.poi-buy-qq{float: right;}
.poi-buy-qq img{width: 80px;}
.poi-buy-qq p {margin: 0;text-align: center;color: #35CDFF;}

/*选择*/
.hpoi-buy-bar{position: relative;margin-top: 40px;padding: 0;margin-bottom:0;display: flex;justify-content: center;border-bottom: 1px solid #EEEEEE;}
.hpoi-buy-bar span{display: block;margin: 0 40px -1px 40px;}
.hpoi-buy-bar span>a{display: block;font-size: 18px;color: #666666;line-height: 36px;border-bottom: 2px solid transparent;}
.hpoi-buy-condition{padding-bottom: 20px; border-bottom: 1px solid #EEEEEE;}
.hpoi-buy-condition .item-box{display: flex;font-size: 14px;margin-top: 20px;}
.hpoi-buy-condition .item-box span{
    width: 70px;
    text-align: right;
    padding: 4px 0;
    color: #999999;
    margin-right: 20px;
}
.hpoi-buy-condition .item-list, .item-list-add{flex: 1;margin-top: -10px;}
.hpoi-buy-condition .item-list>button{
    float: left;
    margin-right: 20px;
    margin-top: 10px;
    outline: none;
    border: none;
    background-color: #FFFFFF;
    border-radius: 6px;
    padding: 4px 10px;
}
.icon-buy-top-arrow,.icon-buy-down-arrow{font-size: 12px;}
.hpoi-col-5{width: 20%;float: left;position: relative;min-height: 1px;padding-left: 10px;padding-right: 10px;}

/*下列每条数据*/
.item-buy{border-radius: 6px;border: 1px solid #EEEEEE;margin-top: 20px;overflow: hidden;transition:  var(--transition-all-2s);}
.hpoi-flow-outer{position: relative;height: 218px;background-color: #f8f8f8}
.hpoi-flow-outer .flow-outer-cover-default {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hpoi-flow-outer .flow-outer-cover-default > img {
    width: 70px;
}
.hpoi-flow-outer .flow-outer-cover-default > span {
    margin-top: 10px;
    font-size: 14px;
    color: #999999;
}
.hpoi-flow-outer>a>img{width: 100%;height: 100%;object-fit: cover;}
.hpoi-product-desc{padding: 10px;}
.hpoi-product-desc .name{font-size: 14px;color: #444444;margin: 0;height: 39px;}
.hpoi-product-desc .name span{display: inline-block;padding: 2px 6px;color: #FFFFFF;border-radius: 2px;font-size: 12px;margin-right: 5px;}
.hpoi-product-desc .price-box{margin-top: 10px;display: flex;justify-content: space-between;align-items: flex-end;}
.hpoi-product-desc .price-box>p{color: #FF4400;font-size:16px;margin: 0;}
.hpoi-product-desc .price-box>p>i{font-size: 12px; font-style: normal;}

.hover-item-hobby{position: absolute;top: -70px;display: flex;width: 100%;padding: 10px 14px 10px 6px;background: rgba(0, 0, 0, 0.4);transition: top .3s ease-in-out;}
.hover-item-hobby>a>img{width: 40px;height: 40px;border-radius: 4px;}
.hover-item-hobby>p{flex: 1;margin: 0 0 0 6px;color: #FFFFFF;}
.hover-item-hobby>p>span{display: inline-block;padding: 2px 6px;border-radius: 4px;background-color: #35CDFF;color: #FFFFFF;margin: 0 4px 2px 0;}

.b-lazy{opacity: 0;transition: opacity 500ms ease-in-out 100ms;}
.b-lazy.b-loaded ,.b-lazy.b-error{opacity: 1;}

/*头部分类hover的子元素*/
.sub-list{display: none;margin: 0;position: absolute;left: 0;width: 100%;padding: 15px 30px;background-color: #FFFFFF;border-radius: 6px;box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);z-index: 99;}
.sub-list>.item{cursor: pointer;width: 20%;float: left;margin: 10px 0;padding-left: 15px;line-height: 30px;font-size: 14px;color: #666666;transition: padding-left .3s linear;}
.sub-list>.item img{width: 30px;height: 30px;margin-right: 10px;border-radius: 4px;}

/*选中*/
.sub-list>.item:hover{color: #35CDFF;}
.item-buy:hover .hover-item-hobby{top: 0;}
.item-buy:hover{border-color: #35CDFF !important}
.item-list-active{background-color: #35CDFF !important;color: #FFFFFF !important;}
.hpoi-active{border-bottom-color: #35CDFF !important;color: #35CDFF !important;}
.taobao-item-active{font-weight: bold;color: #35CDFF !important;}

@media screen and (max-width: 1080px){
    .hpoi-col-5 {width: 25%;}
}