.overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #0a403394;
      display: none;
      z-index: 9;
}

.search-panel {
      position: absolute;
      top:100px;
      display: flex;
      transform: translateX(0%);
      width: 100%;
      max-width: 100%;
      background: white;
      /* border-radius: 10px; */
      padding: 20px;
      z-index: 1000;
      display: none;
      border-top: 1px solid#f9f9f9;
      animation: slideDown 0.3s ease-out forwards;
      justify-content: space-around;
    }

@keyframes slideDown {
      from {
        opacity: 0;
        transform: translate(0%, -20px);
      }
      to {
        opacity: 1;
        transform: translate(0%, 0);
      }
    }

.search-btn {
      background:none;
      color: #464646;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      width: 10%;
    }
@media (max-width: 768px) {
.search-btn {
      background:none;
      color: #464646;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      width: 10%;
      font-size:0;
    }
  .search-btn span{
    font-size:0 !important;;
  }
}


.search-btn span{
  padding-left:15px;
  font-size: 16px;
  font-family: font-8;
  position: relative;
  top: 5px;
}
.search-btn svg{
  position: relative;
  top: 3px;
}



.search-input {
      width: 34%;
      padding: 10px;
      font-family: 'font-2';
      height: 40px;
      font-size: 16px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin: auto;
    }
.search_content{
  display:flex;
  justify-content: flex-end;
  width: 1400px;
  margin: auto;
}
@media (max-width: 768px) {
.search_content{
  display:flex;
  justify-content: flex-end;
  width: 90%;
  margin: 0;
}
}


#searchPanel{
	cursor:pointer;
}