html,body{height: 100%;}
body{display: flex;flex-flow: column;}
.header-bar{flex-shrink: 0;}
.body-box{flex: 1;overflow-y: scroll;}
.footer-bar{flex-shrink: 0;background-color: #fff;display: flex;padding: 0.625rem;align-items: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.header{background: url('../img/grbj.png') no-repeat;background-size: cover;padding: 0.625rem;height: 11.25rem;}
.top-bar{padding: 0.625rem 0;margin-bottom: 1.25rem;color: #fff;display: flex;align-items: center;}
.top-bar .search-box{display: flex;align-items: center;position: relative;overflow: hidden;flex: 1;}
.top-bar .search-box i{position: absolute;left: 0;width: 2em;text-align: center;}
.top-bar .search-box input{border: 0;background-color: rgba(255,255,255,.5);height: 2rem; border-radius: 1rem; padding: 0 2em;flex: 1;color: #fff;font:inherit;font-size: 0.875rem}
.top-bar .search-box input::placeholder{color: #fff;}
.top-bar .search-box ~ a{flex-shrink: 0;padding: 0 0.3rem;margin: 0 0.3125rem;display: flex;flex-flow: column;align-items: center;justify-content: end;white-space: nowrap;}
.top-bar .search-box ~ a em{font-size: 0.75rem;transform: scale(.9);}
.top-bar .search-box ~ a i{display: block;margin: 0 auto 0.125rem;width: 1.25rem; height: 1.25rem;text-align: center;line-height: 1.25rem;}

.category-box{flex: 1;overflow: hidden;display: flex;flex-flow: row nowrap;background-color: #fff;}
.category-hd{background-color: #f2f2f2;overflow-y: scroll;flex-shrink: 0;height: 100%;width: 7rem;}
.category-hd li{position: relative;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.category-hd li.on{background-color: #fff;}
.category-hd a{display: block;padding:1rem;font-size: 0.8125rem;text-align: center;}
.category-hd li.on a{font-weight: 700;color: #FB1F17;box-shadow: 0.12em 0 0 0 #fb1f17 inset;}
.category-bd{height: 100%;overflow-y: scroll;flex:1}
.category-bd .item-tit{text-align: center;font-weight: 700;font-size: 0.9rem;padding: 1em;}
.category-bd .item-cont{display: flex;padding: 0.625rem;flex-flow: row wrap;}
.category-bd .item-cont li{width: 33.33%;flex-shrink: 0; padding: 0.625rem;}
.category-bd .item-cont a{display: flex;flex-flow: column;align-items: center;text-align: center;font-size: 0.75rem;white-space: nowrap;text-overflow: ellipsis;padding: 0.625rem 0;}

.store-card {background-color: #fff;border-radius: 0.625rem;padding: 0.625rem;box-shadow: 0 2px 0.625rem 0 rgba(0,0,0,.08);position: relative;z-index: 2;margin: -5rem 0.625rem 1.25rem 0.625rem;}
.store-card .card-top {display: flex;overflow: hidden;white-space: nowrap;align-items: center;}
.store-card .img{border-radius: 0.5rem;overflow: hidden;width: 4rem;height: 4rem;display: flex;align-items: center;justify-content: center;text-align: center;margin-right: 0.625rem;flex-shrink: 0;}
.store-card .img img{display: block;height: 100%;width: 100%;}
.store-card .text{flex:1;font-size: 0.875rem;line-height: 1.3em;}
.store-card .tit{font-weight: 700;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.store-card .star {display: flex;align-items: center;font-size: 0.75rem;}
.store-card .cont{font-size: 0.75rem;color: #999;line-height: 1.2em;}
.store-card .btns{flex-shrink: 0;}
.store-card .btns a{padding:0 1.5em;}
.store-card .btns a+a{margin-top: 0.625rem;}

.card-btm {display: flex;align-items: center; margin-top: 0.625rem;}
.card-btm >i{font-size: 1.3em;flex-shrink: 0;margin-right: 0.625rem;}
.card-btm .text{font-size: 0.75em;flex: 1;}
.card-btm .text span{background-color: #f2f2f2;padding: 0.12rem 0.3rem;display: inline-block;margin-top: 0.3rem;color: #999;}
.card-btm ul{display: flex;}
.card-btm li{margin-left: 0.8rem;}
.card-btm li a{display: flex;flex-flow: column;font-size: 0.75rem;align-items: center;justify-content: end;text-align: center;white-space: nowrap;color: #999;}
.card-btm li a i{border-radius: 2.5rem;background-color: #f2f2f2;padding: .3em;margin-bottom: 0.3em;color: #222;}

.category-tit{display: flex;align-items: center;background-color: #fff;padding: 0.625rem;}
.category-tit .hd{ flex-shrink: 0;font-weight: 700;position: relative;margin-right: 1.25rem;line-height: 2.5rem;width: 7rem;text-align: center;}
.category-tit .hd::before{content: '';position: absolute;height: 0.2rem;background-color:#FB1F17;width: 1.4em;bottom: 0;left: 50%;margin-left: -.7em;}
.category-tit .bd{font-weight: 700;flex: 1;line-height: 2.5rem;}

.user-bar .img{width: 1.88rem; height: 1.88rem;display: flex;align-items: center;justify-content: center;border-radius: 3.125rem;overflow: hidden;margin: 0 0.625rem; flex-shrink: 0;}
.user-bar .img img{display: block;text-align: center;margin: auto;}
.user-bar {display: flex;align-items: center;}
.user-bar .text{flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.5em;font-size: 0.8rem;}
.user-bar .star{display: flex;color: #af8300;font-size: 0.75rem;}
.user-bar .star i{font-size: .78rem;}
.remark-box {padding: 10px;display: none;}
.remark-box.on{display: block;}
.remark-box li+li{margin-top: 0.625rem;padding-top: 0.625rem; border-top: 1px solid #f2f2f2;}
.remark-box .time{padding: 0.625rem ;font-size: 0.75rem;color: #999;}
.remark-box .text-c-box{padding: 0.625rem;font-size: 0.8125rem;color: #666;line-height: 1.5em;}

.footer-store{color: #999;font-size: 0.875rem;}
.footer-store i{font-size: 2rem;margin-right: 0.625rem;}
.footer-store p{flex: 1;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.footer-store .btn{ padding: 0 2em;font-size: 1rem;font-weight: 700;height: 2.375rem;display: flex;align-items: center;}

.store-product li{padding: .625rem;}
.store-product li .tit{white-space: nowrap;display: block;text-overflow: ellipsis;overflow: hidden;font-size: 0.9em;margin-bottom: .4em;}
.store-product .cont{display: flex;align-items: center;}
.store-product .img{width: 3rem;height: 3rem;display: flex;align-items: center;justify-content: center;overflow: hidden;flex-shrink: 0;margin-right: .625rem;}
.store-product .text{flex: 1;display: flex;flex-flow: column;}
.store-product .text a{font-weight: 700;display: block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.store-product .text p{flex: 1;padding: .4em 0;}
.store-product .text p em{display: inline-block;padding: .5em;font-size: .75em;background-color: #f2f2f2;color: #999;border-radius: .4em;}
.store-product .text .icon-jia{border-radius: 50em;}
.store-product li+li{border-top: 1px solid #f2f2f2;}