#header-nav .container{ margin: 0 auto; max-width: 120rem; height: 100%; } #header-nav{ /* min-width: 1000px; */ background-color: #000; color: #96989b; } #header-nav .flex-box{ display: flex; padding-top: 3.2rem; padding-bottom: 3.2rem; } #header-nav .trademark{ padding-left: 8.75rem; padding-right: 3rem; text-align: center; font-size: 0; } #header-nav .trademark .logo{ display: inline-block; width: 17rem; height: 12.1rem; background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9sb2dvLWIucG5n) no-repeat left center/60%; /* transform: translateY(1.6rem); */ } #header-nav .pc-header .nav-list{ display: flex; flex: auto; justify-content: space-between; } #header-nav .pc-header .nav-list>li{ flex: auto; } #header-nav .pc-header .nav-list>li .menu-title{ margin: 1rem 0; font-size: 2rem; } #header-nav .pc-header .nav-list .menu-list>li{ font-size: 1.4rem; line-height: 2.8rem; } #header-nav .pc-header .nav-list .menu-logo{ margin-right: 1.5rem; width: 17rem; height: 12.1rem; } @keyframes scaleLogo { 0%{ transform: scale(1); } 50%{ transform: scale(0.9); } 100%{ transform: scale(1); } } #header-nav .nav-list .menu-logo:hover{ animation: scaleLogo 0.3s linear; } #header-nav .pc-header .nav-list a{ display: block; width: 100%; height: 100%; } #header-nav .nav-list li:nth-child(1) .menu-logo.bright, #header-nav .nav-list li:nth-child(1):hover .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTAxYWN0aXZlLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list li:nth-child(2) .menu-logo.bright, #header-nav .nav-list li:nth-child(2):hover .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTAyYWN0aXZlLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list li:nth-child(3) .menu-logo.bright, #header-nav .nav-list li:nth-child(3):hover .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTAzYWN0aXZlLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list li:nth-child(4) .menu-logo.bright, #header-nav .nav-list li:nth-child(4):hover .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTA0YWN0aXZlLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list>li:hover>div:nth-child(2) { color: unset; } #header-nav .nav-list li:nth-child(1) .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTAxLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list li:nth-child(2) .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTAyLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list li:nth-child(3) .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTAzLnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list li:nth-child(4) .menu-logo{ background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2hlYWRlci9oLTA0LnBuZw) no-repeat 0 0 /cover; } #header-nav .nav-list .menu-title:hover{ color: #fff; } #header-nav .nav-list .menu-list li:hover{ color: #fff; } .nav-list .bright{ color:#fff; } #header-nav .avatar-tiny { height: auto; width: auto; border-radius: 0; } #header-nav .mobile-header { display: none; } #header-nav.header-simple{ background-color: #393939; color: #d1d1d1; } #header-nav.header-simple .pc-header{ margin: 0 auto; max-width: 120rem; padding: 20px 5rem; } #header-nav.header-simple .trademark{ padding-left: 0; padding-right: 100px; } #header-nav.header-simple .trademark .logo{ width: 72px; height: 28px; background:url(/load/view.php?a=aHR0cHM6Ly93d3cuYXlhbmVvLmNvbS9heWFuZW8vaW1nL2Zvb3Rlci9icmFuZC5wbmc) no-repeat bottom/cover; transform: none; } #header-nav.header-simple .pc-header .nav-list{ flex: none; white-space: nowrap; } #header-nav.header-simple .pc-header .nav-list a+a{ margin-left: 70px; }