.search{
    position: absolute;
    top: 25rem;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    display: block;
}


.search-input{
    width: 40rem;
    display: inline-block;
}
.search-input .form-control{
    height:calc(2.0em + 0.75rem + 2px);
    font-size: 1.2rem;
    border-radius:1.25rem;
}

.search-input .btn
{
    border-radius: 1.25rem;
    font-size: 1.2rem;
    font-weight:500;
}


.search button,.search button:hover,.search button:active,.search button:focus{
    background: #00B6C2;
    color: #fff;
    border: 0;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 50%);
}
.search input,.search input:hover,.search input:active,.search input:focus{
    border: 0;
    box-shadow: 0 0 0 0 rgb(255 255 255 / 50%);
}




.hot{
    margin-top: 3rem;
    padding: 0 6rem;
}

.hot .title{
    padding-left:1rem;
    text-align: left;
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    line-height: 38px;
}
.hot .more{
    padding-right:1rem;
    text-align: right;
    font-size: 20px;
    font-weight: 400;
    line-height: 23px;
}

.hot .more a{
    color: #333333;
}


.hot .card{
    width: 100%;
    border: 0;
}
.hot .card > img{
     width: 100%;
     height: 20rem;
     border-radius:0.6rem ;
}


.hot .card > .card-body
{
    text-align: left;
}

.hot .card > .card-body .card-title{
    font-size: 20px;
    font-weight: bold;
    color: #333333;
}

.hot .card > .card-body .card-text{
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

.hot .card > .card-body .card-price{
    color: #F01E1E;
    font-size: 20px;
    font-weight: 400;
}

.recommend{
    margin-top: 3rem;
    padding: 0 6rem;
    margin-bottom: 5rem;
}
.recommend a{
    color: #ffffff;
}

.recommend .title{
    padding-left:1rem;
    text-align: left;
    font-size: 32px;
    font-weight: bold;
    color: #333333;
    line-height: 38px;
}
.recommend .card{
    padding: 0.5rem;
    border: 0;
}
.recommend .card img{
    border-radius: 0.2rem;
 }

.recommend .card .card-body{
    position: absolute;
    bottom:1rem;
    left:0;
    text-align: left;
}
.recommend .masonry{
     padding: 0;
      margin: 0;
}

.recommend .masonry .item{
    padding: 0rem;
}


.recommend .card .card-body .card-title{
    font-size: 20px;
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}


.recommend .card .card-body .card-text{
    font-size: 12px;
    height: 3.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}