body{
    background-color: #f1f1f1;
}
.Box{
    width: 100%;
    /* background-color: #f1f1f1; */

}
.tabBar {
    position: fixed; /* 固定在视口 */
    top: 0; /* 距顶部0 */
    left: 0; /* 距左边0 */
    width: 100%; /* 占满宽度 */
    height: 45px; /* 自定义高度，根据需求调整 */
    background: linear-gradient(to right, #599dfc, #735bf9); /* 左到右的渐变 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 添加轻微阴影以区分内容 */
    z-index: 999; /* 确保在内容上方 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between;
    padding: 0 10px; /* 设置左右内边距 */
    box-sizing: border-box; /* 包括内边距在宽高内 */
}

/* 搜索栏样式 */
.tabBar input[type="search"] {
    /* flex: 1; 让输入框填满剩余空间 */
    height: 30px; /* 输入框高度 */
    /*width: 280px;*/
    border: 1px solid #ccc; /* 边框样式 */
    border-radius: 5px; /* 圆角样式 */
    padding: 0 10px; /* 内边距 */
    font-size: 13px; /* 字体大小 */
    box-sizing: border-box; /* 包括内边距在宽高内 */
    flex: 1;
    margin-left: 5px;
}
.tabBar img {
    width: 25px;

}
/*  */
.container{
    width: 100%;
    /* height: 400px; */
    /* background-color: #f1f1f1; */
    margin-top: 45px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
}

.carouselBox {
    width: 92%;
    margin-top: 10px;
    height: 180px;

    border-radius: 10px; /* 圆角效果 */
    overflow: hidden; /* 隐藏边界溢出 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    /* background-color: #ffa50d; */
}
.layui-carousel img {
    width: 100%;
    height: auto;
    display: block;
}
.classification {
    /* background-color: #ffa50d;  */
    /* height: 170px; 固定高度 */
    width: 92%;
    margin: 0 auto; /* 居中 */
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap; /* 自动换行 */
    justify-content: space-between; /* 平均分布盒子 */
    gap: 0px; /* 设置盒子间距 */
    padding: 5px; /* 内边距 */
    box-sizing: border-box; /* 包含内边距 */
}

.classificationBox {
    /* background-color: #ccc; 背景色 */
    width: 23%; /* 每行四个，计算为 (100% - gap总和) / 4 */
    height: 60px; /* 固定高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border-radius: 8px; 圆角 */
    text-align: center; /* 文本居中 */
    margin-top: 5px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 添加阴影 */
}

.classificationBox img {
    width: 45px;
    height: 45px; /* 保持图片高度 */
    /* margin-bottom: 5px; 图片与文字的间距 */
}

.classificationBox span {
    font-size: 14px;
    color: #333; /* 文字颜色 */
}
/*  */
.Columns{
    width: 92%;
    height: 40px;
    /* background-color: #fe7d7d; */
    display: flex;
    justify-content: flex-start;
    align-items: center;

}
.ColumnsSpan {
    /* width: 80px; */
    /* background-color: #fae0e0; */
    height: 25px;
    margin-right: 10px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    /* border-radius: 3px; */
}
/* 留作动态切换 */
.layuiThis {
    /* background-color: #f0a008; */
    color: #735bf9;
    font-weight: 700;
    border-bottom:2px solid #735bf9 ;
}

/*  */
.storeList{
    width: 92%;
    /* height: 400px; */
    /* background-color: #fff; */
    color: #999999;

}
.Merchant{
    width: 100%;
    height: 110px;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-top: 5px;
    border-bottom: 1px solid #ccc;
    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    position: relative;
    overflow: hidden;

}
.Merchant img {
    width: 70px;
    border-radius: 50%;
    margin-left: 5px;
}
.Merchant>img{
    margin-left: 15px;
}
.Merchant .logo{
    width: 60px;
    height: 60px;
}
.textAvatar{
    width: 70px;
    height: 70px;
    border-radius: 15px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: #599dfc;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
}
.MerchantSpan{
     flex: 1;
    height: 100%;
    position: relative;
    max-width: calc(100% - 80px);
}
.distance{
    /* width: 65px; */
    height: 25px;
    /* background-color: #fcf1de; */
    position: absolute;
    top: 45%;
    right: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbbbbb;
}
.distance img {
    width: 20px;
}
.MerchantSpan h3 {
    /* background-color: #f0a008; */
    /* height: 35px; */
    display: flex;
    align-items: center;
    padding-left: 10px;
    font-weight: 400;
    color: #000;
    margin: 10px 0 5px 0;
}
.MerchantSpan p{
    font-size: 12px;
    margin-left: 5px;
    margin-bottom: 5px;
}
.address{
    margin-left: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 13px;
}

 .index-announce {
     margin-top: 10px;
     width: 92%;
     height: 46.92px;
     border-bottom: #f4f4f4 2.208px solid; /* 0.08rem × 27.6 */
     overflow: hidden;
     padding:  0px; /* 0.2rem/2rem/2.6rem × 27.6 */
     position: relative;
     /* background-color: #efa107; */
     background-color: #fff;
     border-radius: 8px;
     box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);

 }

.index-announce:after {
    /* background-color: #fff; */
    width: 71.76px; /*2.6rem × 27.6 */
    height: 46.92px; /* 1.7rem × 27.6 */
    content: '';
    background: url(/static_common/zhurou/img/icon_announce.svg) no-repeat center;
    background-size: 55.2px auto; /* 2rem × 27.6 */
    position: absolute;
    left:1%;
    top: 1%; /* 0.2rem × 27.6 */
}

.announce-more {
    width: 55.2px; /* 2rem × 27.6 */
    height: 46.92px; /* 1.7rem × 27.6 */
    line-height: 46.92px; /* 1.7rem × 27.6 */
    font-size: 14.352px; /* 0.52rem × 27.6 */
    color: #aaa;
    text-align: center;
    display: block;
    position: absolute;
    right: 0;
    top: 1%; /* 0.2rem × 27.6 */
}

/*------列表------*/
.announce-box {
    width: 65%;
    overflow: hidden;
    /* background-color: #c2c0c0; */
    position: absolute;
    right: 15%;
    top: 1%;
}

.announce-box ul {
    height: 46.92px; /* 1.7rem × 27.6 */
    white-space: nowrap;
    overflow: hidden;
}

.announce-box li {
    width: 100%;
    height: 100%;
    line-height: 46.92px; /* 1.7rem × 27.6 */
    font-size: 15.456px; /* 0.56rem × 27.6 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.announce-box li a {
    color: #333;
    white-space: nowrap;
}

.announce-box li span {
    color: #aaa;
    font-size: 14.352px; /* 0.52rem × 27.6 */
    margin-right: 5.52px; /* 0.2rem × 27.6 */
}



.index-announce {
    margin-top: 10px;
    width: 92%;
    height: 46.92px;
    border-bottom: #f4f4f4 2.208px solid; /* 0.08rem × 27.6 */
    overflow: hidden;
    padding:  0px; /* 0.2rem/2rem/2.6rem × 27.6 */
    position: relative;
    /* background-color: #efa107; */
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);

}

.index-announce:after {
    /* background-color: #fff; */
    width: 71.76px; /*2.6rem × 27.6 */
    height: 46.92px; /* 1.7rem × 27.6 */
    content: '';
    background: url(/static_common/zhurou/img/icon_announce.svg) no-repeat center;
    background-size: 55.2px auto; /* 2rem × 27.6 */
    position: absolute;
    left:1%;
    top: 1%; /* 0.2rem × 27.6 */
}

.announce-more {
    width: 55.2px; /* 2rem × 27.6 */
    height: 46.92px; /* 1.7rem × 27.6 */
    line-height: 46.92px; /* 1.7rem × 27.6 */
    font-size: 14.352px; /* 0.52rem × 27.6 */
    color: #aaa;
    text-align: center;
    display: block;
    position: absolute;
    right: 0;
    top: 1%; /* 0.2rem × 27.6 */
}

/*------列表------*/
.announce-box {
    width: 65%;
    overflow: hidden;
    /* background-color: #c2c0c0; */
    position: absolute;
    right: 15%;
    top: 1%;
}

.announce-box ul {
    height: 46.92px; /* 1.7rem × 27.6 */
    white-space: nowrap;
    overflow: hidden;
}

.announce-box li {
    width: 100%;
    height: 100%;
    line-height: 46.92px; /* 1.7rem × 27.6 */
    font-size: 15.456px; /* 0.56rem × 27.6 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.announce-box li a {
    color: #333;
    white-space: nowrap;
}

.announce-box li span {
    color: #aaa;
    font-size: 14.352px; /* 0.52rem × 27.6 */
    margin-right: 5.52px; /* 0.2rem × 27.6 */
}




.ads .card{
    background: #fff;
    border-radius: 10px;
    flex: 1;padding: 5px;
}
.ads .card:first-of-type{
    margin-right: 5px;
}
.ads .card:last-of-type{
    margin-left: 5px;
}
.ads .card > a{padding: 3px 5px}
.ads .card > a > p{padding: 3px 0px;font-size: 13px}

.son1 {
    /* 左上角飘带 */
    background-color: #1890FF;
    /* 左上角飘带的背景颜色 */
    overflow: hidden;
    white-space: nowrap;
    /* 文字不换行*/
    position: absolute;
    /* 绝对定位 */
    left: -25px;
    top: 5px;
    transform: rotate(-45deg);
    /* 旋转45°*/
    box-shadow: 0 0 10px #888;
    /* 飘带的阴影*/
}

.son1 span {
    border: 1px solid #1890FF;
    color: #fff;
    display: block;
    font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 1px 0;
    padding: 3px 30px;
    text-align: center;
    text-shadow: 0 0 5px #444;
    font-size: 12px;
}
.MerchantSpan p.badge .layui-badge{margin-right: 5px;padding: 2px 6px;font-size: 0.6rem;height: unset;line-height: unset}