.search-area{padding:18px 20px 20px}
.search-area .sc-box{position:relative}
.search-area .sc-box input[type='text']{background:#f3f3f3;width:100%;border:1px solid #f3f3f3;border-radius:20px;font-size:16px;color:#302c2d;padding:8px 40px 8px 20px;font-weight: 500;letter-spacing: normal}
.search-area .sc-box input[type='text']::placeholder{color:#bab5b5;font-weight: 500;font-size:16px;letter-spacing: normal;}
.search-area .sc-box input[type='text'].on{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.search-area .result_txt {
    display:flex;
    justify-content: space-between;
    margin-top:20px;
}

.search-area .src_list {
    display: none;
    position: absolute;
    top:42px;
    background: #f3f3f3;
    left: 0;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid #f3f3f3;
    border-top:1px solid #e3e3e3;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
}

.search-area .src_list ul li{
    margin-bottom:15px;
}
.search-area .src_list ul li:last-child{
    margin-bottom:0;
}
.search-area .src_list ul li a {
    font-size: 14px;
    display: block;
    color:#777777;
}
.search-area .src_list ul li a span {
    color: #2d2c2c;
}

.search-area .sc-box button{position:absolute;background-repeat:no-repeat;background-position:center;width:34px;height:100%;background-size:15px;top:0;right:6px;padding:0;background-color:transparent;border:0;background-image:url("https://cache.wjthinkbig.com/WEB_RESOURCE/ONLINEMALL/IMAGES/M/common/ico_search_bold.png");}

.search-area .recommend-wrap {
    position: relative;
    margin-left: 16px;
    display: inline-block
}

.search-area .recommend-wrap a.btn {
    display:inline-block;
    border: 0;
    color: #2d2c2c;
    font-size: 14px;
    letter-spacing: 0.14px;
    height: auto;
    line-height: normal;
    position: relative;
    padding-right: 20px
}

.search-area .recommend-wrap a.btn::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    width: 15px;
    height: 8px;
    background: url(https://cache.wjthinkbig.com/WEB_RESOURCE/ONLINEMALL/IMAGES/M/common/recommend_off@2x.png) center no-repeat;
    background-size: 100%
}

.search-area .recommend-wrap.on a.btn::after {
    background: url(https://cache.wjthinkbig.com/WEB_RESOURCE/ONLINEMALL/IMAGES/M/common/recommend_on@2x.png) center no-repeat;
    background-size: 100%
}

.search-area .recommend-wrap ul {
    background: #fff;
    border: 1px solid #cac8c8;
    z-index: 100;
    position: absolute;
    display: none;
    top: 24px;
    right: 0;
    padding: 8px 0
}

.search-area .recommend-wrap.on ul {
    display: block
}

.search-area .recommend-wrap li {
    display: block;
    margin: 0;
    padding: 8px 15.5px
}

.search-area .recommend-wrap li a {
    display:inline-block;
    width: max-content;
    height: auto;
    line-height: 1;
    font-size:14px;
}

.search-area .recommend-wrap.on li.selected a {
    color: #2a715a
}

.recent-area{padding:0 20px;margin-bottom:26px;}
.recent-area .title{color:#2d2c2c;font-size: 18px;font-weight: bold;letter-spacing: normal;display:flex;justify-content: space-between;align-items: center;margin-bottom:8px;}
.recent-area .title .remove-all{display:none;font-weight: normal;font-size:13px;color:#706c6c;width:66px;text-align: right;padding:0}
.recent-area .title .remove-all.on{display:inline-block;}
.recent-area .title .remove-all::before{content:'';display:inline-block;width:10px;height:14px;background: url("https://cache.wjthinkbig.com/WEB_RESOURCE/ONLINEMALL/IMAGES/M/common/ico_wastebasket.png") no-repeat center center / 10px 14px;position:relative;top:2px; right:5px}

.recent-area .result .no-data{display:none;font-size:14px;color:#a29f9f}
.recent-area .result .no-data.on{display:block;}
.recent-area .result ul{display:none;}
.recent-area .result ul.on{display:flex;flex-wrap: wrap;padding-top:8px;}
.recent-area .result ul.on li{border:1px solid #e2dfdf;display:flex;padding:7px 10px 7px 14px;border-radius: 18px;margin-right:10px;margin-bottom:10px}

.recent-area .result ul.on li a{font-size:14px;color:#222;margin-right:4px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;display: inline-block;max-width: 132px;}
.recent-area .result ul.on li .remove-item{width:20px;height:20px;padding:0;background: url("https://cache.wjthinkbig.com/WEB_RESOURCE/ONLINEMALL/IMAGES/M/common/ico_remove_x.png") no-repeat center center / 7px 7px;}



.popular-area{padding:0 20px;margin-bottom:60px;}
.popular-area .title{color:#2d2c2c;font-size: 18px;font-weight: bold;letter-spacing: normal;display:flex;justify-content: space-between;align-items: center;margin-bottom:4px;}
.popular-area .result ul li{border-bottom:1px solid #e2dfdf;padding:13px 6px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.popular-area .result ul li a{font-size:14px;color:#222}
.popular-area .result ul li a .num{margin-right:9px;font-size:11px;background:#b2b0b0;color:#fff;font-weight: 500;width: 18px;height: 18px;display: inline-block;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;position:relative;top:-1px;}
.popular-area .result ul li.on a .num{background:#006600}