.header { z-index: 12; background: #fff; } .header>.w { height: 160px; transition: height .3s } .header .right, .header>.w { align-items: flex-end; display: flex; justify-content: space-between; flex-direction: column; } .header_fixed { position: fixed; top: 0; z-index: 11; width: 100%; background: #fff; box-shadow: 0 3px 7px #666; } .header_fixed .search-box { border-color: #001268 } .head { align-items: center; display: flex; justify-content: space-between; width: 100%; } .header-innnerpage { background: #fff; } .header-innnerpage .logo-text, .header-innnerpage .navi ul li>a, .header-innnerpage .navi ul li.selected>a, .header-innnerpage .navi ul li:hover>a, .header-innnerpage .ces a, .header-innnerpage .search input, .header-innnerpage .search .form-control:focus, .header-innnerpage .btn-search { color: #333; } .header-innnerpage .search input { border-color: #222; } .logo { transition: height .3s; } .logo-block { display: flex; align-items: center; } .logo-text { color: #fff; font-size: 24px; font-weight: bold; font-family: "黑体", "微软雅黑", sans-serif; padding-left: 10px; } .header_fixed .logo-text { color: #333; } .search-btn-box { display: none; } .ces { color: #fff; padding: 10px; font-size: 16px; } .ces a { color: #fff; padding-right: 10px; } .head-search { display: flex; } .head-language { display: flex; align-items: center; vertical-align: middle; } .btn-search { padding: 0px 7px; position: relative; z-index: 9; color: #fff; border: none; background: #50a5da; } .btn-search i { font-size: 25px; } .index-nav-block { background: #001268; margin-bottom: -28px; z-index: 8; } .index-nav .nav-link { color: #fff; padding: 1.2rem 1.7rem; font-size: 16px; } #search-block { margin: 0 10px; display: none; } .header-top2 .index-nav .nav-link { color: #333; } #search-block input { border-radius: 30px 30px; padding: 19px; margin-right: -38px; z-index: 0; } .navi { position: relative; z-index: 9; } .navi ul { display: flex; margin: 0; align-items: center; padding: 0; } .navi ul li { position: relative; list-style-type: none; z-index: 8; } .navi ul li i { transform: rotateY(60deg); } .navi ul li>a { color: #222; display: block; position: relative; text-align: center; font-size: 16px; padding: 40px 15px; } .header_fixed .navi ul li>a { color: #222; } .header_fixed .navi ul li.selected>a, .header_fixed .navi ul li:hover>a, .header_fixed .ces a, .header_fixed .search input, .header_fixed .search .form-control:focus, .header_fixed .btn-search { color: #222; } .header_fixed .search input { border-color: #222; } .navi ul li>a:hover { text-decoration: none; } .navi ul li:hover .navbox { opacity: 1; transform: translate(-50%, 100%); display: block; z-index: 2 } .navi ul li.selected>a, .navi ul li:hover>a { color: #50a5da; font-weight: bold; border-bottom: 2px solid #50a5da; } .navi ul li.selected>a::after, .navi ul li:hover>a::after { content: ""; width: 0px; height: 0px; border-bottom: 8px solid #50a5da; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; bottom: 0; left: 43%; } .navbox { background: rgba(80, 165, 218, .8); bottom: 0; font-size: 0; left: 50%; min-width: 100%; opacity: 0; overflow: hidden; padding: 10px 0; position: absolute; transform: translate(-50%, 80%); display: none; z-index: -1 } .navbox, .navbox>a { box-sizing: border-box; transition: all .3s; text-decoration: none; } .navbox>a { color: #fff; display: block; font-size: 16px; line-height: 40px; padding: 0 5px; position: relative; text-align: center; white-space: nowrap } .navbox>a:hover { background: #50a5da; color: #fff } .navbox>a:last-of-type { border-bottom: none } .search-box { margin: 0 10px; z-index: 3; } .search { display: flex; border: 1px solid #ddd; } .search input { border: #fff 1px solid; padding: 17px 10px; background: transparent; color: #333; } .search .form-control:focus { background: transparent; color: #333; } .memu-btn { display: none; height: 35px; position: relative; width: 35px } .memu-btn i { color: #333; content: ""; cursor: pointer; display: inline-block; font-size: 30px; left: 50%; line-height: 1em; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: all .3s } .memu-btn .memu { opacity: 1; visibility: visible } .memu-btn .close, .memu-btn.active .memu { opacity: 0; visibility: hidden } .memu-btn.active .close { color: #50a5da; opacity: 1; visibility: visible } .btn-ceslogin { border-radius: 20px; border-color: #50a5da; } .btn-ceslogin a { color: #50a5da; text-decoration: none; } .btn-ceslogin a:hover { color: #fff; text-decoration: none; } #myTab2 { justify-content: center; padding-bottom: 1rem; } #myTab2 li a { color: #333; } #myTab2 a { font-size: 18px; padding: 1rem; } #myTab2 li a.active { color: #da251c; font-weight: bold; text-decoration: none; position: relative; } #myTab2 li a.active::after { width: 20px; height: 2px; background: #da251c; position: absolute; bottom: -5px; left: 50%; transform: translate(-50%, -50%); content: ''; } .lug-bt { padding: 0px 0px; height: 36px; background: none; border: none; font-size: 18px; } @media(max-width:1024px) { .logo { max-height: 50px; margin: 5px 0; } .header .w { height: 60px } .navi { background: #50a5da; color: #fff; bottom: 0; opacity: 0; position: fixed; right: 0; top: 60px; transition: all .3s; visibility: hidden; width: 100%; z-index: -1 } .navi ul { padding: 0 20px } .navi ul, .navi ul li { box-sizing: border-box; display: block } .navi ul li { height: auto; margin-right: 0; width: 100%; padding: 0; } .navi ul li>a { font-size: 18px; height: auto; text-align: left; line-height: initial; color: #222; padding: 10px 0; } .navi ul li:hover .navbox { transform: none } .navi.show { opacity: 1; visibility: visible; z-index: 40 } .navi ul li:after { display: none } .navi ul li.selected, .navi ul li:hover { background: none !important } .navbox { background: none; display: flex; flex-wrap: wrap; opacity: 1; position: static; transform: none; transition: none; /* display: block; */ z-index: 1; padding: 0; } .navbox>a { color: #444; line-height: initial; padding: 0 10px; } .memu-btn, .search-btn-box { display: block } .search-box { background: #fff; box-sizing: border-box; width: 100%; z-index: 9; margin: 0; } .search-item { display: flex; justify-content: space-between; } .search-box input { flex: 1; border-radius: 0px; } } @media (max-width: 768px) { .search input, .search .form-control:focus { color: #666; } .search-btn-box { display: block; } #myTabContent ul li { width: 50%; border: none; } .header { position: fixed; top: 0; left: 0; width: 100%; } .memu-btn i { color: #333; font-size: 26px; } .header .right, .header>.w { flex-direction: row; align-items: center; } .logo-text, .navi ul li.selected>a, .navi ul li:hover>a, .ces a { color: #222; } .logo-text { font-size: 20px; } }