.cf-search-form {
position: relative;
width: 360px;
height: 45px;
max-width: 100%;
}
@media (max-width: 767px) {
.cf-search-form { width: 90%; }
}
.cf-search-box {
display: flex;
align-items: center;
height: 100%;
background-color: #ffffff;
border: 1px solid #3c3c3c;
border-radius: 30px;
padding: 0 15px;
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
} .cf-search-box:focus-within {
border-color: #000000;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}
.cf-search-icon {
width: 14px;
height: 14px;
fill: #888888;
flex-shrink: 0;
margin-right: 10px;
}
.cf-search-input {
flex-grow: 1;
min-width: 0;
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
font-size: 14px;
padding: 0;
color: #888888;
}
.cf-search-input::placeholder { color: #c8c8c8; }
.cf-search-input::-webkit-search-decoration,
.cf-search-input::-webkit-search-cancel-button { display: none; } .cf-search-submit { display: none; } .cf-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
} .cf-search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 100%;
min-width: 260px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
padding: 14px 0;
z-index: 999999;
display: none;
box-sizing: border-box;
}
.cf-search-dropdown.is-active { display: block; }
.cf-dropdown-header {
padding: 2px 18px 8px;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
}
.cf-dropdown-list {
list-style: none;
margin: 0;
padding: 0;
}
.cf-dropdown-item {
display: flex;
align-items: center;
padding: 8px 18px;
font-size: 15px;
color: #333333;
text-decoration: none;
transition: background-color 0.15s ease;
cursor: pointer;
} .cf-dropdown-item span {
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.cf-dropdown-item:hover,
.cf-dropdown-item.is-focused {
background-color: #f4f7f9;
color: #000000;
}
.cf-dropdown-icon {
width: 14px;
height: 14px;
fill: none;
stroke: #666666;
stroke-width: 2;
margin-right: 12px;
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
.cf-search-box,
.cf-dropdown-item { transition: none; }
} @media (max-width: 767px) {
.cf-search-input {
font-size: 16px;
}
}
html, body {
overflow-x: hidden;
} .cf-hsearch {
position: relative;
flex-shrink: 0;
}
.cf-hsearch-toggle,
.cf-hsearch-close,
.cf-hsearch-backdrop { display: none; }
.cf-hsearch .cf-search-form {
width: 180px;
height: 34px;
max-width: none;
}
.cf-hsearch .cf-search-box {
border-color: #e0e0e0;
padding: 0 12px;
background-color: #ffffff;
}
.cf-hsearch .cf-search-box:focus-within {
border-color: #222222;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}
.cf-hsearch .cf-search-icon {
width: 13px;
height: 13px;
fill: #222222;
margin-right: 8px;
}
.cf-hsearch .cf-search-input {
height: 100%;
font-size: 14px;
line-height: 1;
color: #222222;
}
.cf-hsearch .cf-search-input::placeholder { color: #8a8a8a; } .cf-hsearch .cf-search-dropdown {
left: 50%;
right: auto;
transform: translateX(-50%);
width: 320px;
min-width: 0;
max-width: calc(100vw - 24px);
} .cf-hsearch-toggle,
.cf-hsearch-close {
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
border: 1px solid #e0e0e0;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
flex-shrink: 0;
-webkit-appearance: none;
appearance: none;
transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.cf-hsearch-toggle { width: 32px; height: 32px; }
.cf-hsearch-toggle:hover { transform: scale(1.05); border-color: #cccccc; background-color: #fcfcfc; }
.cf-hsearch-toggle svg { width: 14px; height: 14px; fill: #222222; display: block; }
.cf-hsearch-close { width: 44px; height: 44px; }
.cf-hsearch-close svg { width: 20px; height: 20px; fill: none; stroke: #222222; stroke-width: 2; stroke-linecap: round; display: block; }
.cf-hsearch-toggle:focus-visible,
.cf-hsearch-close:focus-visible { outline: 2px solid #222222; outline-offset: 2px; } @media (max-width: 1199px) {
.cf-hsearch-toggle { display: flex; }
.cf-hsearch-panel { display: none; }
.cf-hsearch.is-open .cf-hsearch-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 2147483000;
background: rgba(0, 0, 0, 0.45);
}
.cf-hsearch.is-open .cf-hsearch-panel {
display: flex;
align-items: flex-start;
gap: 10px;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 2147483001;
box-sizing: border-box;
width: 100%;
max-height: 100vh;
max-height: 100dvh;
overflow-y: auto;
padding: 14px 16px 16px;
background: #ffffff;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
.cf-hsearch.is-open .cf-hsearch-close { display: flex; }
.cf-hsearch.is-open .cf-search-form {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: auto;
}
.cf-hsearch.is-open .cf-search-box { height: 44px; border-color: #3c3c3c; padding: 0 16px; }
.cf-hsearch.is-open .cf-search-icon { width: 15px; height: 15px; }
.cf-hsearch.is-open .cf-search-input { font-size: 16px; } .cf-hsearch.is-open .cf-search-dropdown {
position: static;
left: auto;
transform: none;
width: calc(100% + 54px); max-width: none;
margin-top: 10px;
padding: 10px 0;
max-height: calc(100dvh - 120px);
overflow-y: auto;
border-radius: 14px;
background: #f7f7f8;
box-shadow: none;
}
.cf-hsearch.is-open .cf-dropdown-item { padding: 11px 16px; } header:has(.cf-hsearch.is-open) { z-index: 2147483000 !important; }
html.cf-hsearch-lock,
html.cf-hsearch-lock body { overflow: hidden; }
}