body{background-color: #f5f7fa }
#phones{width:67%;text-align: center;margin: 0 auto;}
#phones .middle{font-size: 1.3vw;font-weight: bold;color: #262626;margin: 6% 0 6%;letter-spacing: 2px }
#phones .input-text{position: relative}
#phones input{background-color: #F6F6F6;height: 30px;border: 1px solid #333333;width: 23vw;
    border-radius: 5px;padding-left: 1.8%;
}
#phones input:hover{border: 1px solid #007BFF;}
#phones input:focus{outline: none;box-shadow: 0 0 0 1px #007BFF;}
#phones .search-ico{position: absolute;bottom: 23%;left: 32.15%;z-index: 2}
#phones .goods_list{margin: 3% 0}
#phones .goods_list .class_list{background-color: #FFFFFF;border-radius: 20px;display: flex;justify-content: space-between;padding: 3.5% 8%;align-items: center}
#phones .goods_list .class_list span{font-size: 1.0416vw;letter-spacing: 1px}
#phones .goods_list .class_list .li{cursor: pointer}
#phones .goods_list .class_list .li.active{background-color: #f5c01e;padding: 1%;border-radius: 10px}
#phones .goods_list .goods_all{display: flex;justify-content: flex-start;align-items: center;margin-top: 1%;gap: 1.25%;flex-wrap: wrap}
#phones .goods_list .goods_all .mt{background-color: #FFFFFF;width: 19%;padding: 3% 0;margin-top: 1.5%}
#phones .goods_list .red_span{position: absolute;bottom: 3%;right: 0.5208vw;font-size: 0.5208vw;color: #ff0000;border: 1px solid #ff0000;border-radius: 12px;padding: 1px 4px;line-height: 0.5208vw}
#phones .goods_list .green_span{position: absolute;top: 0;right: 0.5208vw;font-size: 0.5208vw;color: #3de40d;border: 1px solid #3de40d;border-radius: 12px;padding: 1px 4px;line-height: 0.5208vw}
#phones .goods_list .goods_all .mt a{display: flex;flex-direction: column;gap: 1vw;text-align: center;margin: 0 auto;align-items: center;position: relative}
#phones .goods_list .goods_all .mt img{width: 7.083333333333333vw}
#phones .goods_list .goods_all .mt .pro_list_div{font-size: 0.7291vw;color: #333333;}
#phones .goods_list .hide{display: none}