input 검색창 입력후 되돌아오기

#header{

  width:100%;

  position:absolute;

  left:0;

  top:0;

  z-index: 999;

  background:white;

  border-bottom: 1px solid rgba(0,0,0,0.1);

}

#header .inner{

  width: 975px;

  height: 77px;

  margin:0 auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

#header .inner .logo a{

  color:transparent;

}

#header .inner .logo .sprite_insta_icon{

  position:relative;

  margin-right:30px;

}

#header .inner .logo .sprite_insta_icon:after{

  content:'';

  width:1px;

  height:28px;

  background: #000;

  position:absolute;

  right:-15px;

  top:0;

}

#header .inner .Logo > img{

width: 100px;

  height:100px;

}

#header .inner .logo div{

  vertical-align: middle;

}

#header .inner .logo a > div:nth-child(2){

  transform:translateY(5px);

}

#header .search_box{

  position:relative;

}

#search-field{

  width:270px;

  height:25px;

  background:#fafafa;

  border:1px solid #dbdbdb;

  border-radius: 3px;

  padding:3px 30px;

  color:#999;

  font-weight:400;

  text-align: left;

  font-size:14px;

  outline:none;

}

#search-field::placeholder{

  font-size:0;

}

#search-field:focus::placeholder{

  font-size:14px;

}

#header .search_box .fakefield{

  position:absolute;

  left:50%;

  top:50%;

  transform: translate(-50%,-50%);

  pointer-events: none;

}

#search-field:focus~ .fakefield > span:nth-child(1){

  transform: translateX(-120px);

}

#search-field:focus~ .fakefield > span:nth-child(2){

 display:none;

}

const searchBox = document.querySelector('#search-field');

window.addEventListener('click',function(){
    searchBox.value = "";
});