/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 14px; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { box-sizing: border-box; } a { text-decoration: unset; } html, body { background-color: #060B2E; height: 100%; width: 100%; min-width:1920px; min-height:1080px; } .header-wrapper { display: flex; justify-content: center; background-color: #08133D; position:relative; } .header-wrapper:hover .nav-bar { top:0px; } .header-wrapper .title { text-align: center; line-height: 80px; font-size: 2.6em; color: #69F8FE; position:relative; width:623px } .header-wrapper .title svg{ position:absolute; left:-140px; top:-2px; } .header-wrapper .title:after{ content:''; width:100%; height:2px; background-color:#fff; position:absolute; bottom:-10px; left:0px; } .nav-bar { position: absolute; left: 0; top: -90px; height: 90px; background-color: #0E1E51; transition: top 0.75s; display: flex; align-items: center; padding: 0 16px; width:100%; } .login-content{ position:absolute; right:50px; top:0; height:100%; display:flex; align-items:center; } .login-content .login-href{ color:#fff; cursor:pointer; margin-right:30px; } .login-content .logout-href{ color:#fff; cursor:pointer; margin-right:30px; } .login-content .select-input{ min-width:80px; max-width:300px; height: 32px; position: relative; vertical-align: middle; padding: 2px; background-color: #001346; color: #fff; text-shadow: none; border-radius: 4px; transition: box-shadow 0.25s ease; border: 1px solid #0b52e0; z-index: 2; display: flex; align-items: center; padding-right: 20px; } .login-content .select-input:before { content: ""; position: absolute; width: 0; height: 0; border: 6px solid transparent; border-top-color: #fff; top: 12px; right: 4px; cursor: pointer; z-index: -2; } .login-content .select-input .muchang-list{ position:absolute; left:0px; top:100%; width:100%; display:none; background-color: #001346; border-radius: 0 0 6px 6px; box-shadow: 0px -5px 5px 0px rgba(255,255,255,0.1), -5px 0px 5px 0px rgba(255,255,255,0.1), 5px 0px 5px 0px rgba(255,255,255,0.1), 0px 5px 5px 0px rgba(255,255,255,0.1); } .login-content .select-input .muchang-list li{ text-align:center; height:30px; line-height:30px; cursor:pointer; padding:0 10px; } .login-content .select-input .muchang-list li:hover{ background-color:#528DFF } .login-content .select-input .muchang-title{ width:100%; height:100%; padding-left: 10px; color: #fff; display:flex; align-items:center; font-size:0.9em; cursor:pointer; } .nav-bar .item { cursor: pointer; padding: 10px 30px; color: #ffffff; font-size: 22px; border-right: 2px solid transparent; border-image: linear-gradient(0, #0A214A, #6DDFE9, #0A214A) 1; } .nav-bar .item:last-child { border-right: 0; } .nav-bar .item.active { /*color: #6DDFE9; */ background: linear-gradient(to top, #69F8FE,#f4f4f4); -webkit-background-clip: text; color: transparent; font-weight:bold; }