.pc-header ul { margin: 0; } header::after { content: ""; display: block; height: 100px; } /* .search-box { position: absolute; top: 50%; transform: translateY(-50%); left: calc(10px + 100%); background-color: red; padding: 4px 10px; border-radius: 100px; cursor: pointer; } .search-box img { width: 24px; height: 24px; } */ header .mask-layer { display: none; width: 100vw; background: #f7f7f7; position: fixed; z-index: 9999; } header .mask-layer .icon-wrap { display: flex; align-items: center; justify-content: flex-end; } header .mask-layer .icon-wrap img { width: 24px; height: 24px; } header .mask-layer .icon-wrap:hover { cursor: pointer; color: #028bff; } header .mask-layer .search-wrapper { position: relative; z-index: 2; padding: 40px 100px; } header .mask-layer .search-wrapper h3 { font-size: 24px; color: #232323; font-weight: 700; margin-bottom: 20px; text-align: center; } header .mask-layer .search-wrapper .flex-row-center { display: flex; justify-content: center; align-items: center; } header .mask-layer .search-wrapper input { width: 40%; box-shadow: none; border: none; background: #fff; border-radius: 0; color: #808080; height: 40px; line-height: 40px; padding: 0 45px 0 15px; text-align: left; font-size: 12px; } header .mask-layer .search-wrapper button { width: calc(10% - 20px); margin-left: 20px; align-self: stretch; border: none; background-color: #31488d; color: white; } header .mask-layer .search-wrapper button:hover { opacity: 0.8; } /* 更改头部区域 */ .pc-header .main-container { display: flex; justify-content: space-between; align-items: center; max-width: 1760px; padding: 0 100px; margin: 0 auto; } .pc-header .container { display: none; } @media screen and (max-width: 768px) { .pc-header .main-container { display: none; } .pc-header .container { display: block; } header::after { height: 50px; } } @media screen and (min-width: 768px) { .pc-header .top_lang { margin-left: 14px; position: relative; margin-top: 0; } } .pc-header .main-container .logo { float: none; position: unset; padding: 0; margin: 0; } .pc-header .main-container .logo img { width: 230px; } .pc-header .nav-section { width: 60%; } .pc-header .nav-section .nav-list { display: flex; justify-content: space-between; } .pc-header .nav-section .nav-list > li { position: relative; list-style: none; } .pc-header .nav-section .nav-list > li > a { display: block; color: #888; padding: 0; line-height: 100px; height: 100px; } .nav-list li .nav_show li { line-height: 38px; padding: 0; height: 38px; border: 0; } .nav-list li .nav_show li a { display: block; width: 100%; white-space: nowrap; font-size: 14px; line-height: 28px; text-align: center; color: #fff; background: none; padding: 5px 10px 0; height: 38px; } .nav-list li .nav_show li a:hover { color: #fff; background: #ef1b3e; text-decoration: none; } .nav-list li .nav_show li:last-child a { -moz-border-radius: 0 0 8px 8px; -webkit-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; } .pc-header .nav-section .nav-list > li span { font-size: 16px; display: block; height: 100px; color: #333; } /* .pc-header .nav-section .nav-list > li > a:hover { background: none; color: #2953cf; text-decoration: none; } */ .pc-header .nav-section .nav-list > li:hover a { text-decoration: none; } .pc-header .nav-section .nav-list > li:hover span { color: #2953cf; } .pc-header .nav-section .sub.nav_show { display: block; z-index: 999999999; } .pc-header .nav-section .sub { display: none; position: absolute; z-index: 9999; left: 50%; transform: translateX(-50%); background: rgba(41, 83, 207, 0.9); border-top: 0; width: auto; min-width: 150%; top: 100px; margin: 0; line-height: 28px; border-radius: 0 0 8px 8px; } .pc-header .search-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; cursor: pointer; background: #f5f5f5; position: relative; z-index: 3; cursor: pointer; transition: all 0.3s; border-radius: 50%; } .pc-header .search-icon:hover { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* background: #cce2fc; */ background-color: rgba(41, 83, 207, 0.3); } .pc-header .search-icon img { width: 24px; height: 24px; } .pc-header .search-box.open .search-icon { display: none; } .pc-header .tool-list { margin-left: 30px; display: flex; align-items: center; } .pc-header .search-box { width: 36px; height: 36px; position: relative; transition: all 0.3s; } .pc-header .top-search { width: 0; height: 36px; border-radius: 20px; position: relative; z-index: 1; overflow: hidden; background: #f5f5f5; transition: all 0.3s; cursor: pointer; } .pc-header .top-search .form-box { display: flex; align-items: center; } .pc-header .top-search .search-input { outline: none; border: none; width: 0; height: 36px; padding: 8px 0; font-size: 14px; line-height: 20px; color: #333; background: none; transition: all 0.3s; } .pc-header .top-search .btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: none; outline: none; color: #999; transition: all 0.3s; } .pc-header .search-box.open { width: 216px; } .pc-header .search-box.open .top-search { width: 216px; } .pc-header .search-box.open .top-search .search-input { width: 180px; padding: 8px 16px; } .pc-header .search-box.open .top-search .btn img { width: 24px; height: 24px; } .pc-header .top-search:hover { background-color: rgba(41, 83, 207, 0.1); } /* 处理手机端搜?*/ .pc-header .container .search-box { margin: 10px 0; margin-left: auto; } .pc-header .container .search-icon, .pc-header .container .top-search { background-color: #fff; } ëƬƬ,㽶Ƶ,ĻƵƷ,պAVƷ