.searchLayer { opacity: 0; visibility: hidden; position: fixed; top:-100%; left:0; width: 100%; z-index: 180; background: #fff; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s; box-shadow: 0px 5px 5px 0 rgba(0, 0, 0, 0.1);}
.searchLayer.active { opacity: 1; visibility: visible; top:0;}
#searchLayerDim {opacity: 0; visibility: hidden;}
.searchLayer.active + #searchLayerDim { opacity: 1; visibility: visible; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000); zoom: 1; z-index: 179; cursor:pointer;  -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; transition: .5s;}
.searchLayer .searchInner { width: 100%; padding: 30px 0;}
.searchLayer .searchInner:after{clear:both; display:block; content:"";}
.searchLayer .innerBox1 { max-width:674px; margin: 0 auto; position:relative;}
.searchLayer .innerBox2 { max-width: 674px; margin: 0 auto; overflow-y:auto; padding:10px 0; max-height:calc(100vh - 400px);}
.searchLayer .innerBox2::-webkit-scrollbar {  width: 8px; } 
.searchLayer .innerBox2::-webkit-scrollbar-thumb {height: 30%; background: #000;border-radius: 10px;}
.searchLayer .top_search { width:calc(100% - 60px); float: none; position: static; top: auto; right: auto; background:none; border: 0;}
.searchLayer .top_search legend{display:none;}
.searchLayer .TopSeacrhLayerClose {position: absolute; color:#fff; text-align:center; right: 0; top: 6px; margin:10px; border-radius:5px; width:30px; height: 30px; line-height:30px; cursor:pointer;}
.searchLayer .TopSeacrhLayerClose:before {
	content: "";
    display: inline-block;
    width: 100%;
    height: 100%;
    background: 50% 50% no-repeat;
    background-size: 100% 100%;
    background-image: url(/images/icon-close.svg);
}

.searchLayer .top_search .top_text_cont { display: flex; align-items: center; background:none; border-bottom: 3px solid #000;}
.searchLayer .top_search .top_text_cont input{border:none 0; vertical-align:top;}
.searchLayer .top_search .searchTitle { color: #000; font-size: 24px; font-weight: 700; }
.searchLayer .top_search .searchTitle.M {display:none;}
.searchLayer .top_search .top_srarch_text {width:100%; height: 54px; padding: 5px 20px; transition: all 0.3s linear; background:none; color:#000; font-size: 16px; box-sizing:border-box;}
.searchLayer .top_search .top_srarch_text::-webkit-input-placeholder { font-size: 16px; color:#555; }
.searchLayer .top_search .btn_top_srarch { position: static; border: 0; padding-right: 10px; width:26px;}
.searchLayer .top_search .search_cont{display:block; margin:0; font-size:0; border-top:1px solid #cccccc; background:#ffffff;}

.searchLayer .search_cont {display:block !important; }

.searchLayer .recent_box {min-height:auto; margin-bottom:0;}
.searchLayer .recent_box dt {font-size:16px; font-weight:600;}
.searchLayer .recent_box dl {padding:30px 0 0;}
.searchLayer .recent_box dd {}
.searchLayer .recent_box ul {margin-top:10px;}
.searchLayer .recent_box li {width:auto; display:inline-block; border:1px solid #D0D0D0; padding:2px 15px; border-radius:20px; margin:0 3px 3px 0;}
.searchLayer .recent_box li a {display:inline-block; width:auto; padding:0; font-size:16px;}
.searchLayer .recent_box li span {float:none; margin-left:5px; font-size:13px; padding:0;}
.searchLayer .recent_box li span img {vertical-align:middle;}

.searchLayer .searchHotList { width: 100%; padding-top: 25px; }
.searchLayer .searchHotList .title { font-size: 18px; font-weight: 700; color: #000; }
.searchLayer .searchHotList .contentsBox { display: flex; flex-wrap: wrap; margin-top: 10px; }
.searchLayer .searchHotList a { margin: 10px 5px 0 0; padding: 2px 15px; font-size: 16px; border: 1px solid #D0D0D0; border-radius: 30px; }
.searchLayer .popular-wrap { width: 100%; padding-top: 35px; margin-top: 25px; border-top: 1px solid #D0D0D0; }
.searchLayer .popular-wrap .popular-box { width: 100%; }
.searchLayer .popular-wrap .popular-box strong { display: block; }
.searchLayer .popular-wrap .popular-box .popular_color { font-size: 18px; font-weight: 700; color: #000; }
.searchLayer .popular-wrap .popular-box .rank_item_box {}
.searchLayer .popular-wrap .popular-box .rank_item_box ul { display: flex; flex-direction: column; }
.searchLayer .popular-wrap .popular-box .rank_item_box ul li { margin-top: 15px; opacity: 0; height:25px; overflow:hidden;}
.searchLayer .popular-wrap .popular-box .rank_item_box ul li em {display:inline-block; text-align:center; width:25px; height:25px; font-size: 18px; color: #000; font-weight: 700; }
.searchLayer .popular-wrap .popular-box .rank_item_box ul li a { padding-left: 20px; font-size: 15px;}
.searchLayer .popular-wrap .popular-box .rank_item_box ul li.top1 em,
.searchLayer .popular-wrap .popular-box .rank_item_box ul li.top2 em,
.searchLayer .popular-wrap .popular-box .rank_item_box ul li.top3 em {background-color: #000; color:#fff; border-radius:50%;}

.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li {
	animation-name: loadli;
    -webkit-animation-name: loadli;
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(1){ animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(2){ animation-delay: 1.3s; -webkit-animation-delay: 1.3s; -moz-animation-delay: 1.3s; -ms-animation-delay: 1.3s; -o-animation-delay: 1.3s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(3){ animation-delay: 1.6s; -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s; -ms-animation-delay: 1.6s; -o-animation-delay: 1.6s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(4){ animation-delay: 1.9s; -webkit-animation-delay: 1.9s; -moz-animation-delay: 1.9s; -ms-animation-delay: 1.9s; -o-animation-delay: 1.9s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(5){ animation-delay: 2.1s; -webkit-animation-delay: 2.1s; -moz-animation-delay: 2.1s; -ms-animation-delay: 2.1s; -o-animation-delay: 2.1s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(6){ animation-delay: 2.4s; -webkit-animation-delay: 2.4s; -moz-animation-delay: 2.4s; -ms-animation-delay: 2.4s; -o-animation-delay: 2.4s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(7){ animation-delay: 2.7s; -webkit-animation-delay: 2.7s; -moz-animation-delay: 2.7s; -ms-animation-delay: 2.7s; -o-animation-delay: 2.7s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(8){ animation-delay: 3s; -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -ms-animation-delay: 3s; -o-animation-delay: 3s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(9){ animation-delay: 3.3s; -webkit-animation-delay: 3.3s; -moz-animation-delay: 3.3s; -ms-animation-delay: 3.3s; -o-animation-delay: 3.3s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(10){ animation-delay: 3.6s; -webkit-animation-delay: 3.6s; -moz-animation-delay: 3.6s; -ms-animation-delay: 3.6s; -o-animation-delay: 3.6s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(11){ animation-delay: 3.9s; -webkit-animation-delay: 3.9s; -moz-animation-delay: 3.9s; -ms-animation-delay: 3.9s; -o-animation-delay: 3.9s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(12){ animation-delay: 4.2s; -webkit-animation-delay: 4.2s; -moz-animation-delay: 4.2s; -ms-animation-delay: 4.2s; -o-animation-delay: 4.2s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(13){ animation-delay: 4.5s; -webkit-animation-delay: 4.5s; -moz-animation-delay: 4.5s; -ms-animation-delay: 4.5s; -o-animation-delay: 4.5s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(14){ animation-delay: 4.8s; -webkit-animation-delay: 4.8s; -moz-animation-delay: 4.8s; -ms-animation-delay: 4.8s; -o-animation-delay: 4.8s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(15){ animation-delay: 5.1s; -webkit-animation-delay: 5.1s; -moz-animation-delay: 5.1s; -ms-animation-delay: 5.1s; -o-animation-delay: 5.1s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(16){ animation-delay: 5.3s; -webkit-animation-delay: 5.3s; -moz-animation-delay: 5.3s; -ms-animation-delay: 5.3s; -o-animation-delay: 5.3s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(17){ animation-delay: 5.6s; -webkit-animation-delay: 5.6s; -moz-animation-delay: 5.6s; -ms-animation-delay: 5.6s; -o-animation-delay: 5.6s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(18){ animation-delay: 5.9s; -webkit-animation-delay: 5.9s; -moz-animation-delay: 5.9s; -ms-animation-delay: 5.9s; -o-animation-delay: 5.9s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(19){ animation-delay: 6.2s; -webkit-animation-delay: 6.2s; -moz-animation-delay: 6.2s; -ms-animation-delay: 6.2s; -o-animation-delay: 6.2s; }
.searchLayer.active .popular-wrap .popular-box .rank_item_box ul li:nth-of-type(20){ animation-delay: 6.5s; -webkit-animation-delay: 6.5s; -moz-animation-delay: 6.5s; -ms-animation-delay: 6.5s; -o-animation-delay: 6.5s; }

.recent_box dd {padding: 10px 0 0 0; font-size: 14px; color:#777;}