.wrap {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #FFF;
}

.search {
    background-color: #f5f5f5;
    width: 100%;
    height: .62rem;
    padding: .08rem .1rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
}
.search-box {
    height: .42rem;
    background-color: #fff;
    color: #000;
    display: flex;
    align-items: center;
    position: relative;
    line-height: .36rem;
    overflow: visible;
    border-radius: 1rem;
}
.search-box:before {
    content: "";
    pointer-events: none;
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border: 1px solid #e6e6e6;
    border-radius: 1rem;
    transform: scale(.5);
    transform-origin: 0 0;
}
.search-input {
    display: inline-block;
    line-height: .3rem;
    height: .3rem;
    font-size: .16rem;
    text-align: left;
}
.search-input-sear {
    display: inline-block;
    line-height: .3rem;
    height: .3rem;
    font-size: .16rem;
    text-align: left;
    color: #CCC;
}
.search-icon {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/search.png) no-repeat center;
    background-size: contain;
    flex: none;
    width: .18rem;
    height: .18rem;
    margin-left: .1rem;
    margin-right: .1rem;
}
.searchholder {
    color: #ccc;
    font-size: .16rem;
}
.search-sear {
    color: #ccc;
    padding: 0 .1rem;
    position: absolute;
    font-size: .16rem;
    right: 0;
}
.search-deep {
    color: #666;
    padding: 0 .1rem;
    position: absolute;
    font-size: .16rem;
    right: 0;
}

@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
    .search-sear {
        padding-top: .02rem;
    }
    .red {
        margin-right: 0;
        margin-left: 0;
    }
}
.active {
    color: rgba(102, 102, 102, 1);
}
.btn-hover {
    color: rgba(102, 102, 102, .2);
}
.search-sear:before {
    content: "";
    pointer-events: none;
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    top: 28%;
    border-left: 1px solid #e6e6e6;
    transform: scale(.5);
    transform-origin: 0 0;
}
.search-input-clear {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
    background-size: contain;
    width: .18rem;
    height: .18rem;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: .55rem;
}
.search-input-clear::after,
.search-clear-hover::after {
    border: none !important;
}
.search-clear-hover {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
    background-size: contain;
    width: .18rem;
    height: 100%;
    position: absolute;
    right: .6rem;
}

.search-his,
.search-hot,
.search-result {
    padding: 0 .17rem;
    margin-bottom: .1rem;
    margin-top: .2rem;
}

.his-title {
    font-size: .15rem;
    color: #000;
    height: .44rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.his-icon {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
    background-size: contain;
    width: .18rem;
    height: .18rem;
    margin-right: .06rem;
}

.hot-title {
    font-size: .15rem;
    color: #000;
    line-height: .44rem;
}

.his-content,
.hot-content {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.his-item,
.hot-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 .1rem .1rem 0;
    background: #f5f5f5;
    padding: .05rem .14rem;
    border-radius: .16rem;
    font-size: .15rem;
    line-height: .2rem;
    color: #666;
}

.compontent {
    margin-bottom: .2rem;
}

.result-title {
    line-height: .44rem;
    font-size: .20rem;
    color: #000;
}

.result-list {
    height: .48rem;
    font-size: .18rem;
    color: #666;
    padding-right: .03rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.result-up {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png) no-repeat center;
    background-size: contain;
    width: .26rem;
    height: .26rem;
}

.empty-result {
    height: calc(100vh - .82rem);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .2rem;
}

.empty-icon {
    background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/empty_small.png) no-repeat center;
    background-size: contain;
    width: .58rem;
    height: .63rem;
    display: block;
    margin: 0 auto;
}

.empty-msg {
    font-size: .16rem;
    color: #666;
    margin-top: .33rem;
}