@charset "UTF-8";

     @media screen and (max-width: 1023px){ } @media screen and (max-width: 834px){ } @media screen and (max-width: 480px){ }
.navi a {
position: relative;
display: inline-block;
padding-bottom: 5px;
transition: all 0.3s;
}
.navi a::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: #fe6807;
transition: all 0.3s;
}
.navi a:hover::after {
left: 0;
width: 100%;
} .menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
z-index: 999;
} .menu-inner {
background: rgba(255, 255, 255, 0.05); padding: 40px;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
transform: translateY(50px); transition: all 0.5s ease;
opacity: 0;
} .menu-inner a {
font-size: 24px;
color: #fff;
text-decoration: none;
margin: 20px 0;
transition: color 0.3s;
}
.menu-inner a:hover {
color: #ff3366;
} .menu-overlay.active {
opacity: 1;
visibility: visible;
}
.menu-overlay.active .menu-inner {
transform: translateY(0);
opacity: 1;
}