html,body{height: 100%;}
body{display: flex;flex-flow: column;}
.header-bar{position: relative;flex-shrink: 0;}
.search-box{background-color: #fff; padding: 0.625rem;display: flex;position: relative;align-items: center;}
.search-box .icon{position: absolute;z-index: 1;left: 1.2rem;color: #666;}
.search-box input{flex: 1; border-radius: 1.25rem; border: 1px solid #f0f0f0;height: 2rem;text-indent: 2em;font:inherit;font-size: 0.875rem;background-color: #f2f2f2;}
.search-top{background-color: #fff;padding: 0.625rem;flex-shrink: 0;}
.body-box{display: flex;flex-flow: column;flex: 1;overflow: hidden;}
.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%;}
.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;}
.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;}