.navigation-container { width: 1280px; margin: 0 auto; } .no-display { display: none; } .navLine { border-bottom: 2px solid #c00e18; } /* 导航 */ #navigation-bgc { position: fixed; width: 100%; height: 87px; z-index: 99999; border-bottom: 1px solid rgba(202, 189, 189, 0.2) !important; } #navigation-bgc #navigation { position: fixed; left: 50%; transform: translateX(-50%); display: flex; justify-content: space-between; width: 1200px; height: 86px; align-items: center; font-size: 16px; /* logo */ /* 导航栏 */ } #navigation-bgc #navigation .navigation-logo { display: flex; } #navigation-bgc #navigation .navigation-logo div { float: left; width: 150px; height: 38px; } #navigation-bgc #navigation .navigation-logo #logo-img1 { background-image: -webkit-image-set(url(../../assets/bjt/logo-white.png) 1x, url(../../assets/bjt/logo-white@2x.png) 2x); background-size: 150px 38px; } #navigation-bgc #navigation .navigation-logo #logo-img2 { background-image: -webkit-image-set(url(../../assets/bjt/logo-black.png) 1x, url(../../assets/bjt/logo-black@2x.png) 2x); background-size: 150px 38px; } #navigation-bgc #navigation .navigation-column { display: flex; align-items: center; height: 86px; /* 导航项 */ } #navigation-bgc #navigation .navigation-column .navigation-item { position: relative; width: 90px; line-height: 86px; text-align: center; transition: "left 0.4s"; /* 导航字体 */ } #navigation-bgc #navigation .navigation-column .navigation-item .navigation-router { display: block; height: 86px; color: #7d1118; text-decoration: none; font-family: Adobe Heiti Std; font-weight: bold; } #navigation-bgc #navigation .navigation-column .navigation-item:hover { color: #fafafa; margin-top: 1px; } #navigation-bgc #navigation .navigation-column .navigation-item:hover .navigation-router { color: #c00e18 !important; } #navigation-bgc #navigation .navigation-column .navigation-span { display: block; height: 13px; border-left: 3px solid #7d1118; } #navigation-bgc #navigation .navigation-column .navigation-search .search-input { position: absolute; top: 20px; height: 50px; width: 0px; margin-left: -270px; border-radius: 10px; background-color: #f9efef; text-indent: 10px; color: #4f4d4b; font-size: 16px; right: 30px; transition: width 0.4s; } #navigation-bgc #navigation .navigation-column .navigation-search .search-submit { position: absolute; width: 30px; height: 30px; margin: -2px 0 0 -7px; border-radius: 50%; background-color: rgba(0, 0, 0, 0); } #navigation-bgc #navigation .navigation-column .navigation-search a { margin-left: 10px; text-decoration: none; color: #7d1118; font-size: 18px; font-weight: bold; } #navigation-bgc #navigation .navigation-line { position: absolute; width: 80px; border-bottom: 2px solid #8a0008; top: 86px; transition: left 0.3s; } #navigation-bgc #navigation .navigation-drop-down { display: none; } #navigation-bgc #navigation .navigation-external { position: absolute; } #navigation-bgc #navigation .navigation-container { display: none; } #navigation-bgc .open-siteMap { position: absolute; width: 32px; height: 28px; top: 20px; right: 20px; padding: 12px 0 0 12px; border: 1px solid #7d1118; color: #7d1118; font-weight: bold; } #navigation-bgc .open-siteMap:hover { background-color: #c00e18; color: #fff; border-color: #fff; } .navigation-background { width: 100%; height: 342px; } .navigation-background img { width: 100%; height: 100%; } @media only screen and (max-width: 900px) { #navigation-bgc { height: 50px !important; } #navigation-bgc .navigation-container { height: 50px !important; width: 100% !important; } #navigation-bgc .navigation-container #navigation { width: 100% !important; height: 50px !important; } #navigation-bgc .navigation-container #navigation .navigation-logo { margin-left: 10px; } #navigation-bgc .navigation-container #navigation .navigation-logo div { height: 30px; width: 120px; } #navigation-bgc .navigation-container #navigation .navigation-logo #logo-img1 { background-size: 120px 30px; } #navigation-bgc .navigation-container #navigation .navigation-logo #logo-img2 { background-size: 120px 30px; } #navigation-bgc .navigation-container #navigation .navigation-column { display: none !important; } #navigation-bgc .navigation-container #navigation .navigation-line { width: 0 !important; } #navigation-bgc .navigation-container #navigation .navigation-drop-down { display: block !important; margin-right: 15px; color: #fff; } #navigation-bgc .navigation-container #navigation .navigation-drop-down .drop-down-close { display: none; } #navigation-bgc .navigation-container #navigation .navigation-external { position: absolute; width: 100%; top: 50px; right: 0px; height: 0px; background-color: #3f3a39; } #navigation-bgc .navigation-container #navigation .navigation-external ul { width: 95%; margin: 2%; } #navigation-bgc .navigation-container #navigation .navigation-external ul li { height: 30px; line-height: 30px; } #navigation-bgc .navigation-container #navigation .navigation-external ul li a { display: block; color: #fff !important; } #navigation-bgc .navigation-container #navigation .navigation-external .sjdh1 { position: absolute; width: 80px; height: 80px; top: 180px; right: 0px; animation-name: sjdh1; animation-duration: 1s; } #navigation-bgc .navigation-container #navigation .navigation-external .sjdh2 { position: absolute; width: 80px; height: 80px; top: 80px; right: 20px; } #navigation-bgc .navigation-container #navigation .navigation-external .sjdh3 { position: absolute; width: 40px; height: 40px; top: 20px; right: 90px; animation-name: sjdh3; animation-duration: 1s; } #navigation-bgc .navigation-container #navigation .navigation-external .sjdh4 { position: absolute; width: 70px; height: 70px; top: 160px; right: 150px; animation-name: sjdh4; animation-duration: 1s; } @keyframes sjdh1 { from { width: 0px; height: 0px; } to { width: 80px; height: 80px; } } @keyframes sjdh3 { from { width: 0px; height: 0px; } to { width: 40px; height: 40px; } } @keyframes sjdh4 { from { width: 0px; height: 0px; } to { width: 70px; height: 70px; } } /* 背景 */ .navigation-background { height: 200px !important; width: 100%; } .navigation-background img { height: 200px; width: 100%; } }