header { width: 100%; height: 1.25rem; background-image: url(../images/01/top.png); background-repeat: no-repeat; background-position: left top; background-size: 100% 0.7125rem; display: grid; grid-template-columns: 8.2625rem 1fr 8.2625rem; position: relative; } .nav-box{ width: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .logo-img{ width: 1.9375rem; height: 0.5rem; background-image: url(../images/logo.png); background-repeat: no-repeat; background-size: 100% 100%; } .refresh-img { margin-left: 0.125rem; background: url('../images/sprite.png') no-repeat -402px 0; width: 27px; height: 26px; } .navs { width: calc(100% - 1.9375rem - 40px ); display: flex; flex-direction: row; justify-content: center; align-items: center; } .navs>.nav{ font-size: 14px; color: #FFFFFF; text-align: center; height: 0.375rem; line-height: 0.375rem; width: 1.4rem; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .navs>.nav-l{ background-image: url(../images/nav01.png); } .navs>.nav-l-active{ background-image: url(../images/nav02.png); } .navs>.nav-r{ background-image: url(../images/nav03.png); } .navs>.nav-r-active{ background-image: url(../images/nav04.png); } .timer{ height: 0.425rem; width: 2.375rem; margin-left: 0.125rem; color: #FFFFFF; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } .timer>p{ font-size: 0.175rem; } .timer>p>span{ margin-left: 0.125rem; } .timer>p>span:first-child{ margin: 0; } .logo-tit { font-weight: bold; font-size: 0.4rem; line-height: 0.575rem; letter-spacing: 3px; text-align: center; font-style: normal; text-transform: none; background: linear-gradient(179.9998548775837deg, #E7EDF3 0%, #3EAEE3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .set{ position: absolute; left: 0;right: 0; bottom: .25rem; height: 14px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .set>div{ margin: 0 0.125rem; }