/*头部PC端*/ #header_blank{ height: 80px;} #header{top: 0;left: 0;height:80px;width: 100%;z-index:10; border-bottom: 1px solid rgba(255, 255, 255, .2);} #header .logo{width:111px;} #header .hattr{ margin-right: 60px;} #header .hnav .one-nav{line-height:80px;height:100%;margin-right:60px;} #header .hnav .one-nav:last-child{margin-right:0px;} #header .hnav .one-nav::after{position:absolute;content: '';bottom:0px;right:0;left:0;width:0;height:3px;background:transparent;z-index:2;} #header .hnav .one-nav:hover::after, #header .hnav .one-nav.cur::after{background:#fff;width:100%;} #header .hnav .one-nav .nav-a{font-size:16px;color:#fff;} #header .hnav .one-nav .two-nav{width:100%; height:0; overflow:hidden; top:80px; left:0;right:0; z-index:3;} #header .hnav .one-nav .solu-nav{ top: 100%; left: 50%; height: 0; transform: translateX(-50%);} #header .hnav .two-nav .hnavbg{ display:flex; justify-content: center; padding: 50px 0; height: 100%; background:#fff;box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.03);} #header .hnav .two-nav .hnavbg>div{ width: 200px; border-right: 1px solid #dcdee1;} #header .hnav .two-nav .hnavbg>div:first-child{ border-left: 1px solid #dcdee1;} #header .hnav .two-nav .hnavbg>div .tnav-a .img{ width: 100%; height: 45px;} #header .hnav .two-nav .hnavbg>div .tnav-a .txt{ margin-top: 15px; line-height: 20px; font-size: 16px; color: #1a1a1a; white-space: nowrap; text-align: center;} #header .hnav .two-nav .hnavbg>div .tnav-a:hover .txt{ color: #0073e6;} #header .hnav .two-nav .hnavbg>div:hover .tnav-a{font-weight:500;color:#0099e6;} #header .hnav .one-nav .solu-nav .left{ padding: 26px 0; width: 240px; background: #f5f7fa;} #header .hnav .one-nav .solu-nav .left .cate-item{ padding: 0 38px; line-height: 48px; font-size: 16px; color: #333;} #header .hnav .one-nav .solu-nav .left .cate-item:hover, #header .hnav .one-nav .solu-nav .left .cate-item.cur{ background: #fff; color: #0099e5;} #header .hnav .one-nav .solu-nav .rig{ padding: 48px; width: 860px; background: #fff;} #header .hnav .one-nav .solu-nav .rig .two-list .two-item{ margin-top: 22px; line-height: 26px; font-size: 16px; color: #666;} #header .hnav .one-nav .solu-nav .rig .two-list .two-item:first-child{ margin-top: 0;} #header .hnav .one-nav .solu-nav .rig .two-list .two-item:hover{ color:#0099e5;} #header .hnav .one-nav .solu-nav .rig .img{ width: 540px;} #header .hright{height:80px;} #header .hright .search{width:17px;height:18px; margin-right:26px;} #header .hright .search .search-icon{background:url(/images/h_search.png) no-repeat center / cover; width:100%;height:100%;} #header .hright .lang{width:19px;height:19px;} #header .hright .lang .lang-icon{background:url(/images/h_lang.png) no-repeat center / cover; width:100%;height:100%;} #header .hright .menu{display:none; background:url(/images/menu-icon2.png) no-repeat center / cover;width:30px;height:30px;} #header .menu_bg{ top: 100%; left: 0; padding: 50px 0; width: 100%; height: 180px; background: #f5f7fa; opacity: 0; pointer-events: none;} #header .menu_bg.cur{ opacity: 1;} @media screen and (max-width: 1200px){ #header .hnav .one-nav .solu-nav{ transform: translateX(-45%);} #header .hnav .one-nav .solu-nav .rig{ width: 600px;} #header .hnav .one-nav .solu-nav .rig .img{ width: 300px;} } /* 头部滚动时样式和鼠标移入时样式 */ @media screen and (min-width:751px) { #header.none{transform: translate3d(0px,-100%,0);} #header.cur, #header.detail_cur, #header:hover{background:#fff;border-bottom:1px solid rgba(242, 242, 242, 1);} #header.cur .logo .l1, #header.detail_cur .logo .l1, #header:hover .logo .l1{display:none;} #header.cur .logo .l2, #header.detail_cur .logo .l2, #header:hover .logo .l2{display:inline-block !important;} #header.cur .hnav .one-nav:hover::after, #header.cur .hnav .one-nav.cur::after, #header.detail_cur .hnav .one-nav:hover::after, #header.detail_cur .hnav .one-nav.cur::after, #header:hover .hnav .one-nav:hover::after, #header:hover .hnav .one-nav.cur::after{background-color:#0073e6;width:100%;} #header.cur .hnav .one-nav .nav-a, #header.detail_cur .hnav .one-nav .nav-a, #header:hover .hnav .one-nav .nav-a{color:#1a1a1a;} #header.cur .hnav .one-nav.cur .nav-a, #header.cur .hnav .one-nav:hover .nav-a, #header.detail_cur .hnav .one-nav.cur .nav-a, #header.detail_cur .hnav .one-nav:hover .nav-a, #header:hover .hnav .one-nav.cur .nav-a, #header:hover .hnav .one-nav:hover .nav-a{color:#0073e6;} #header.cur .hright .search .search-icon, #header.detail_cur .hright .search .search-icon, #header:hover .hright .search .search-icon{background-image:url(/images/h_search2.png);} #header.cur .hright .lang .lang-icon, #header.detail_cur .hright .lang .lang-icon, #header:hover .hright .lang .lang-icon{background-image:url(/images/h_lang2.png);} #header .hright .lang .lang-icon.cur{background-image:url(/images/h_lang3.png);} #header.cur .hright .menu, #header.detail_cur .hright .menu, #header:hover .hright .menu{background-image:url(/images/menu-icon.png);} #header.cur .hright .menu.cur, #header.detail_cur .hright .menu.cur, #header:hover .hright .menu.cur{background-image:url(/images/m_close.png);} #header .hright .menu.cur{background-image:url(/images/m_close2.png);} } /* PC端头部搜索 */ #header .search .h-search{width:250px;height:42px;z-index:5;padding:0 5px; right:-18px;top:50%;transform: translateY(-50%); overflow:hidden; background:#f5f5f5;display: none;border-radius:21px;} #header .search .h-search .h-form{width:100%;height:100%;} #header .search .h-search .h-form .input{width:calc(100% - 42px);} #header .search .h-search .h-form .input input{width: 100%;height: 100%;font-size:16px;color:#1a1a1a;padding-left:20px;} #header .search .h-search .h-form .submit{width:42px;height:42px;background: url(/images/h_search3.png) no-repeat center} /* PC端头部语言 */ #header .lang .h-lang{width:140px;height:100px;z-index:5;top:49px;left:50%;transform:translateX(-50%); overflow:hidden;display:none;background:#fff;box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.03);} #header .lang .h-lang .lang-box .name{width:100%;text-align:center; font-size:16px;line-height:50px;color:#666;} #header .lang .h-lang .lang-box .name:hover{background:#f5f5f5;color:#1a1a1a;} @media screen and (max-width:1680px) { #header .search .h-search{width:200px;} } @media screen and (max-width:1440px) { #header .hnav .one-nav{margin-right:40px;} } @media screen and (max-width:1280px) { #header .search .h-search{width:180px;} #header .hnav .one-nav, #header .hright .search{margin-right:30px;} } @media screen and (max-width:1180px) { #header .search .h-search{width:150px;} #header .hnav{margin-right:60px;} } /* 头部移动端 */ #header_m-nav,#header_search-box,#header_m-header-blank{display: none;} @media screen and (max-width:1024px) { #header .hnav, #header .hright .search .h-search, #header .hright .lang{display:none;} #header .hright .menu{display:block;} #header .hright .search{width:22px;height:22px;} #header_m-nav{display: block;width: 100%;height: 0;z-index:50;left: 0;right: 0;top:80px; background: #fff;overflow-y: auto;} #header_m-nav.cur{height: calc(100vh - 80px);border-top:1px solid #ebebeb;} #header_m-nav .nav .one-nav{line-height:60px;} #header_m-nav .nav .one-nav .one{cursor:pointer; margin: 0 30px;border-bottom: 1px solid #ebebeb;background: url(/images/nav-icon1.png) no-repeat right;} #header_m-nav .nav .one-nav.nobg .one{background: none;} #header_m-nav .nav .one-nav.cur .one{background-image:url(/images/nav-icon2.png);} #header_m-nav .nav .one-nav.cur.nobg .one{background: none;} #header_m-nav .nav .one-nav .one-a{font-size:18px;font-weight: 700;color:#1a1a1a;} #header_m-nav .nav .one-nav .two-nav{width: 100%;background: #f7f7f7;padding: 0 30px;} #header_m-nav .nav .one-nav .two-nav>div{border-bottom: 1px solid #ebebeb;} #header_m-nav .nav .one-nav .two-nav .two-a{font-size: 16px;color:#1a1a1a;} #header_m-nav .nav .one-nav .two-nav .two-list .two-item{ padding-left: 30px; font-size: 26px;color:#1a1a1a;} #header_m-nav .bot-box{margin:30px 0 60px} #header_m-nav .bot-box .item .icon{width: 60px;height: 60px;line-height: 60px;border: 1px solid rgba(0, 0, 0, 0.3);font-size: 18px;color: #1a1a1a;border-radius: 100%;margin: 0 auto;} #header_m-nav .bot-box .item .tit{font-size:18px;color: #1a1a1a;margin-top:20px;} #header_search-box{width: 100%;height:150px;z-index: 50;left: 0;right: 0;top:80px;background: #fff;display: none;flex-direction: column;justify-content: center;border-top:1px solid #ebebeb;box-shadow: 0px 1px 0px 0px rgba(242, 242, 242, 1); } #header_search-box .form-box{width: 92%;margin: 45px auto 0;height: 60px;border: 1px solid #d1d1d1;border-radius:30px;overflow: hidden;} #header_search-box .form-box .input{width: calc(100% - 60px);padding-left: 30px;} #header_search-box .form-box .input input{width: 100%;height: 100%;font-size:18px;color:#333;} #header_search-box .form-box .submit{width: 60px;height: 60px;background: url(/images/h-search-icon.png) no-repeat 14px center;border-left:1px solid rgba(0, 0, 0, 0.3);} } @media screen and (max-width:750px) { #header_m-header-blank{display: block;height:80px;} #header{background: #fff;} #header .logo{width:150px;} #header .logo .l1{display:none;} #header .logo .l2{display:inline-block;} #header .hright .search{width:30px;height:30px;} #header .hright .search .search-icon{width:30px;height:30px;background-image:url(/images/m_search.png);} #header .hright .search .search-icon.cur::after{width:30px;height:30px;} #header .hright .menu{background-image:url(/images/menu-icon.png);width:40px;height:40px;} #header .hright .menu.cur{background-image:url(/images/m_close.png);} #header_m-nav .nav .one-nav{line-height:100px;} #header_m-nav .nav .one-nav .one-a{font-size:36px;} #header_m-nav .nav .one-nav .two-nav .two-a{font-size:30px;} #header_m-nav .bot-box .item .icon{width:80px;height:80px;line-height: 80px;font-size:30px;} #header_m-nav .bot-box .item .tit{font-size:30px;} #header_search-box{height:180px;} #header_search-box .form-box{height:90px;border-radius:43px;} #header_search-box .form-box .input{width:calc(100% - 90px);} #header_search-box .form-box .input input{font-size:30px;} #header_search-box .form-box .submit{width:90px;height:90px;background:url(/images/m_search.png) no-repeat 20px center;background-size:40px;} }