:where([class^="ri-"])::before { content: "\f3c2"; }
body {
font-family: 'Noto Sans', 'Noto Sans KR', sans-serif;
color: #1f2937;
}
.hero-section {
background-image: url('/image/zipit_srch_intro_bg.jpg');
background-size: cover;
background-position: center;
position: relative;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 100%);
z-index: 1;
}
.hero-section > div {
position: relative;
z-index: 2;
}
.process-arrow::after {
content: '';
position: absolute;
top: 50%;
right: -15px;
width: 30px;
height: 2px;
background-color: #e5e7eb;
transform: translateY(-50%);
}
.process-item:last-child .process-arrow::after {
display: none;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}

.text-reveal {
display: inline-block;
}
.text-reveal span {
display: inline-block;
opacity: 0;
transform: translateY(20px);
animation: revealText 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
@keyframes revealText {
to {
opacity: 1;
transform: translateY(0);
}
}


@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes slideIn {
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.typing-animation {
overflow: hidden;
white-space: nowrap;
animation: typing 1s steps(20, end);
}
.search-result {
animation: slideIn 0.5s ease-out forwards;
opacity: 0;
}