* { margin: 0; padding: 0; } .header { position: fixed; width: 100%; z-index: 199; .header-top { display: flex; height: 100px; background: rgba(255,255,255,0.98); z-index: 99; padding: 0 calc((100% - 1160px)/2); .h-left { display: flex; flex-basis: 0; justify-content: flex-start; align-items: center; flex-grow: 1; a { margin-left: 18px; width: 36px; height: 36px; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; img { width: 36px; height: 36px; } } } .h-right { display: flex; flex-basis: 0; justify-content: flex-end; align-items: center; flex-grow: 1; ul { display: flex; align-items: center; font-size: 16px; font-weight: 400; text-transform: uppercase; list-style: none; li { padding: 0 18px; white-space: nowrap; a { color: #898fa0; text-decoration: none; &:hover { color: #12183A; } } .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; position: relative; top: -12px; left: 2px; } } } .select{ a { color: #12183A; } .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #006AFF; position: relative; top: -12px; left: 2px; } } } } .header-move1 { height: 72px; transition: all .8s ease-in-out; box-shadow: 0 10px 40px 0 rgba(50,50,50,0.08); } .header-move2 { height: 100px; transition: all .8s ease-in-out; } } @media screen and (min-width:600px) { .header { .header-top{ .h-right-close { display: none; } } } } @media screen and (max-width:600px) { .header{ .header-top{ .h-right { display: none; } .h-right-close { display: flex; flex-basis: 0; justify-content: flex-end; align-items: center; flex-grow: 1; margin-right: 1em; svg { cursor: pointer; width: 2em; height: 2em; } } } } }