.searchbar{font-size:1.5rem;box-sizing:border-box;resize:none;margin:0 auto;padding:.3rem .2rem;border-radius:45px;background:#efefef;line-height:2.5rem;width:35%;border:1px solid #369ab0;display:flex;overflow:hidden;align-items:center;transition:linear .2s}.searchbar:focus-within{width:55%;min-width:15rem}.searchbar .vl{height:1.3rem;border-right:1px solid #369ab0}.searchbar .logo,.searchbar .clear{display:flex;width:max-content;height:max-content;padding-left:.6rem;padding-right:.3rem;justify-content:center}.searchbar .clear{z-index:1;cursor:pointer;transition:all 1s}.searchbar .clear:hover{zoom:1.2}.searchbar .textfield{z-index:1;outline:0;width:100%;float:right;border:none;max-height:75%;overflow-x:auto;padding:0 .5rem;font-size:1.2rem;background:transparent}.searchbar .textfield:focus{background:transparent}.search-result-list{width:50vw;min-height:45.7vh;margin:0 auto}.search-result-list>ul{margin:0;padding:1rem;list-style:none}.search-result-list>ul>li{display:flex;align-items:center;justify-content:center}.search-wrapper{width:100%;position:relative}.search-result{width:30vw;z-index:1;left:calc(35vw - .5rem);padding:1rem;display:flex;align-items:center;flex-direction:column;min-height:20rem;margin:1rem auto;position:absolute;border-radius:1rem;transition:all .3s;background-color:#fefefe;box-shadow:1px 1px 5px #aaa}.search-result>span{padding:.5rem 0;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif}.search-result>ul{margin:0;width:97%;padding:1rem .3rem .3rem;list-style:none;border-top:1px solid #aaa}.search-result>ul>a{margin:0;width:100%;display:flex;padding:.3rem;overflow:hidden;border-radius:1rem;align-items:center;justify-content:center;background-color:#fff;transition:all .3s;box-shadow:1px 1px 5px #aaa}.search-result>ul>a:hover{box-shadow:1px 1px 20px #aaa}.search-result>ul>a>img{height:5rem;width:10rem;border-radius:.6rem}.search-result>ul>a>div{width:100%;padding:.2rem}.search-result>ul>a>div>h3{padding:0;margin:0;display:block;font-weight:600;font-size:1.2rem}.search-result>ul>a>div>span{margin:0;padding:0;display:block;font-size:1rem}.result-mask{top:0;left:0;z-index:0;width:100%;height:100vh;position:fixed;background-color:#aaa2}.search{width:70vw;margin:0 auto}.search>ul{margin:0;padding:1rem;display:flex;align-items:center;justify-content:center}.search>ul>a{margin:0 .5rem;padding:.3rem}.dropdown-body{width:max-content;margin:1rem;position:relative}.dropdown-body .searchbox{width:18.5vw;height:2rem;padding:.5rem 1vw;font-size:1.2rem;border-radius:5px;border:#ddd 1px solid}.dropdown-body .searchbox:focus{outline:none}.dropdown-body .up{bottom:3rem}.dropdown-body .cover{top:0;left:0;width:100vw;height:100vh;z-index:9;position:fixed}.dropdown-body .dropdown-list{margin:0;padding:0;z-index:10;width:20.5vw;font-size:1rem;max-height:30rem;list-style:none;overflow-y:auto;position:absolute;text-transform:capitalize;background-color:#eee}.dropdown-body .dropdown-list li{display:block;color:#000;cursor:pointer;user-select:none;padding:12px 13px}.dropdown-body .dropdown-list li:hover{background-color:#ddd;transition:linear .2s}.up{display:flex;margin-bottom:3rem;flex-direction:column-reverse}