.header { display: flex; align-items: center; justify-content: space-between; height: 2.75rem; width: 100%; padding-right: 0.9375rem; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .header-logo { width: 7.4688rem; height: 2.625rem; } .header-right { display: flex; align-items: center; } .header-right .header-language { font-size: 0.8125rem; font-weight: 400; color: #999999; user-select: none; } .header-right .header-language > .current { color: #1e55a6; } .header-right .header-menu { width: 1rem; height: 1rem; margin-left: 0.625rem; } .header-nav { height: calc(100vh - 2.75rem); overflow: hidden; position: fixed; transition: height 0.25s; top: 2.75rem; left: 0; right: 0; z-index: 1000; border-top: 0.0625rem solid rgba(151, 151, 151, 0.1); display: none; background-color: #fff; } .header-nav > a { font-size: 1rem; font-weight: 400; color: rgba(34, 34, 34, 0.8); text-decoration: none; height: 2.75rem; padding: 0 0.9375rem; border-top: 0.0625rem solid rgba(151, 151, 151, 0.1); display: flex; align-items: center; justify-content: space-between; } .header-nav > a .current { color: #1d52a2; } .header-nav > a .icon { display: block; width: 1rem; text-align: center; }