.header { position: fixed; top: 0; left: 0; z-index: 1000; height: 7.5rem; width: 100%; font-family: Source Han Sans, Source Han Sans; font-weight: 700; font-size: 1.125rem; line-height: 1.625rem; text-align: left; font-style: normal; text-transform: none; } .hoverMenu.header { background: #fff; box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.1); } .hoverMenu .navLink { color: #222222; } .activeNav .navLink { color: #14355C; } .headerInner { display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; } .headerInner::after { position: absolute; bottom: 0; left: 3.75rem; content: ''; display: block; width: calc(100% - 7.5rem); box-sizing: border-box; height: 1px; background: #FFFFFF; } .logo { display: flex; flex-direction: column; font-weight: 600; line-height: 1.3; } .headerRight { display: flex; align-items: center; gap: 1.875rem; } .nav { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; margin-right: 1.875rem; } .navItem { padding: 0 1.875rem; } .navLink { color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; } .navLink:hover { color: #14355C !important; } .navLink:hover { opacity: 0.9; } .actions { display: flex; align-items: center; gap: 1rem; margin-left: 1.875rem; } .langTrigger { display: flex; align-items: center; gap: 0.25rem; color: #fff; background: transparent; border: none; cursor: pointer; } .searchBtn { color: #fff; background: transparent; border: none; cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; } .dropPanel { position: absolute; top: 100%; left: 0; width: 100%; height: 23.75rem; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); padding: 1.25rem; z-index: 1000; } .dropPanelContent { display: inline-flex; flex-direction: column; text-align: center; } .dropPanelLink { font-weight: 400; font-size: 1.125rem; line-height: 3.125rem; color: #222222; text-decoration: none; } @media (max-width: 1024px) { .header { height: 5.5rem; } .headerInner::after { left: 1.5rem; width: calc(100% - 3rem); } .navItem { padding: 0 1rem; } .headerRight { gap: 1rem; } .nav { margin-right: 1rem; } .actions { margin-left: 1rem; } } @media (max-width: 768px) { .header { height: 4rem; } .headerInner::after { left: 1rem; width: calc(100% - 2rem); } .navItem { padding: 0 0.5rem; } .headerRight { gap: 0.5rem; } .nav { margin-right: 0.5rem; } .actions { margin-left: 0.5rem; } .dropPanel { height: auto; padding: 1rem; } .dropPanelLink { line-height: 2.5rem; } }