:root {
  --gs01: #ffffff;
  --gs02: #fafafa;
  --gs03: #f5f5f5;
  --gs04: #eee;
  --gs05: #d9d9d9;
  --gs06: #a2a2a2;
  --gs07: #949494;
  --gs08: #6b6b6b;
  --gs09: #343434;
  --gs10: #2d2d2d;
  --gs11: #141414;
  --gs12: #000000;

  --ps01: #3f52e3;
  --ps02: #2d3ba2;

  /* font-size → font-size를 rem으로 변환. */
  --fontS50: 3.125rem;
  --fontS32: 2rem;
  --fontS30: 1.875rem;
  --fontS28: 1.75rem;
  --fontS22: 1.75rem;
  --fontS20: 1.25rem;
  --fontS18: 1.125rem;
  --fontS16: 1rem;
  --fontS15: 0.9375rem;
  --fontS14: 0.875rem;
  --fontS13: 0.8125rem;
  --fontS12: 0.75rem;
  --fontS10: 0.625rem;
  --fontS08: 0.5rem;

  /* line-height → lineHeight + font-size 형태로 통칭.
  font-size 30px ↑ => +10px, 30px ↓ => +6px로 계산하여 rem 변환 */
  --lineH50: 3.75rem;
  --lineH32: 2.625rem;
  --lineH30: 2.25rem;
  --lineH28: 2.125rem;
  --lineH22: 1.75rem;
  --lineH20: 1.625rem;
  --lineH18: 1.5rem;
  --lineH16: 1.375rem;
  --lineH15: 1.3125rem;
  --lineH14: 1.25rem;
  --lineH13: 1.1875rem;
  --lineH12: 1.125rem;
  --lineH10: 1rem;
  --lineH08: 0.875rem;
}

::-webkit-scrollbar {
  display: auto;
  height: 7px;
  width: 2px;
}

::-webkit-scrollbar-track {
  background: #F8F9FB;
}

::-webkit-scrollbar-thumb {
  background: #ABABAB;
  border-radius: 6px;
}

.wrapper{
  max-width: 1440px;
  margin: 0 auto;
}

/* 검색 영역 */
.searchBox {
  margin-bottom: 55px;
}

.searchBox > div {
  width: 100%;
  max-width: 904px;
  margin: 0 auto 35px;
  position: relative;
}

.searchBox > div input {
  width: 100%;
  height: 60px;
  padding: 30px;
  border: 1px solid var(--gs11);
  border-radius: 30px;
  font-weight: 500;
  color: var(--gs08);
}

.searchBox > div svg {
  position: absolute;
  right: 35px;
  top: 20px;
}

/* searchBox category */
.searchBox ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 3.5%;
  color: var(--gs11);
}

.searchBox ul li{
  padding: 3px;
  transition: all .2s ease;
}

.searchBox ul li:hover {
  background-color: var(--ps01);
  color: var(--gs01);
}


@media screen and (max-width: 767px){
  .wrapper{
    max-width: 767px;
  }
}