.open .gp-menu-offcanvas2 { padding-top: 40px; } .gp-menu-nav, .gp-menu-header-icon-out>span { background: #fff; } .gp-ser { height: 40px; border: none; } .gp-search { margin-top: 15px; width: 280px; height: 40px; float: right; line-height: 40px; border: none; /* ; */ /* */ } .gp-search2 { background: rgba(0, 0, 0, .2); margin-left: 10px; float: left; border-radius: 40px; } .gp-search input.notxt { color: #888888; width: 71%; /* left: 0; */ font-size: 14px; height: 40px; line-height: 40px; outline: none; padding-left: 18px; } .gp-search .notxt1::before { content: ''; display: block; width: 1px; height: 20px; background: rgba(255, 255, 255, .1); position: absolute; left: -11px; top: 0px; } .gp-search .notxt1 { position: absolute; width: 36px; height: 26px !important; right: 15px; height: 30px; /* background: url('../images/en1.png') no-repeat; */ /* background-size: 100% 100%; */ top: 8px; color: #fff; overflow: visible; padding-left: 11px; } .nav::before { /* content: ''; */ display: block; width: 100%; height: 80px; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, .45); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); /* Firefox 3.6 - 15 */ background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); } .nav ul li:hover .subNav { -webkit-animation-name: zoomIn; animation-name: zoomIn; animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; display: block; } .fadeInUpSmall { -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; animation-duration: 0.5s; -webkit-animation-duration: 0.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; display: block; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes fadeInUpSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .nav li>a { line-height: 24px; color: #fff; font-size: 18px; position: relative; padding: 8px 0px; display: block; box-sizing: border-box; } .nav li>a::before { content: ''; display: block; width: 1px; height: 17px; background: #e0e0e0; position: absolute; right: 0; top: 12px; } .nav li:last-child>a::before { display: none } .nav ul li { position: relative; width: calc(100% / 10); } .nav li.on .subNav { display: block; } .nav ul { /* text-align: justify; */ overflow: hidden; overflow: visible; font-size: 0; box-sizing: border-box; /* height: 40px; */ } .nav ul:after { content: ''; width: 100%; display: inline-block; *display: inline; *zoom: 1; height: 0; } .nav li { position: relative; display: inline-block; z-index: 50; } .subNav { background: rgba(255, 255, 255, .9); left: calc(50% - 100px); width: 200px; top: 40px; z-index: 0; } .subNav dd { padding: 0px 7px; border-bottom: 1px solid rgba(153, 153, 153, .11); } .subNav dd:hover { background: rgba(4, 61, 146, .9) } .subNav dd:hover a { color: #fff; } .gp-menu-nav { background: rgba(4, 61, 146, .9); } header { position: relative; } header::before { content: ''; display: block; width: calc(100% - 31.6%); height: 729px; background: url(../images/topbg.png) no-repeat right top; background-size: cover; position: absolute; right: 0; top: 0; } header.currents { /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); */ /* position: fixed; */ left: 0; top: 0; height: 50px; width: 100%; margin-bottom: 0; padding-top: 20px; } .header, .banner { /* overflow: visible; */ margin: 0 5.3%; } /* 头部 */ .logo1 { width: 14.87%; overflow: hidden; padding: 30px 0; float: left; } .logo2 { width: 11.52%; overflow: hidden; padding: 30px 0; float: left; margin-right: 3%; } .english { padding: 30px 33px; background: #EAA016; float: left; box-sizing: border-box; margin-right: 1%; } .english p { line-height: 19px; padding-bottom: 8px; margin-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, .23); } .en1, .en2 { display: inline-block; vertical-align: middle; } /* nav */ .nav { display: block; padding: 43px 0; width: 61%; } footer { padding: 25px 0; background: #043D92; } .footer p { line-height: 19px; display: inline-block; margin-right: 105px; } .footerRight { overflow: hidden; } .footer p:last-child { margin: 0 } .gp-goTop { position: fixed; bottom: 40px; right: 20px; z-index: 9999999; color: #fff; text-align: center; transition: none; background-color: #043D92; width: 50px; height: 50px; line-height: 50px; text-align: center; /* display: none; */ } .gp-goTop:hover { color: #fff; background-color: #FFB223; } .gp-goTop i { font-size: 32px; } @media screen and (max-width:1830px) {} @media screen and (max-width:1640px) {} @media screen and (max-width:1600px) { .header { margin: 0 2.3%; } header::before { width: calc(100% - 28.4%); } .logo2 { margin-right: 1%; } .english { padding: 15px; margin-right: 1%; } .nav { width: 65%; padding: 28px 0; } } @media screen and (max-width:1500px) { .logo2 { margin-right: .5%; } .english { padding: 15px; margin-right: .5%; } header::before { width: calc(100% - 28%); } .nav { padding: 28px 0; width: 66%; } } @media screen and (max-width:1400px) { .english p { float: left; margin-right: 10px; margin-bottom: 0; } .english { padding: 5px 10px; float: right; } .nav { padding: 0; width: 81%; } .nav li>a::before { top: 7px; } .subNav a { font-size: 12px; } .nav li>a { font-size: 16px; padding: 2px 0; } .logo1 { width: 10.87%; padding: 40px 0; } .logo2 { width: 7.52%; padding: 40px 0; } header::before { width: calc(100% - 20.4%); } } @media screen and (max-width:1301px) { header::before { height: 450px !important; } .footer p { margin-right: 80px; } } @media screen and (max-width:1200px) { .footer p { margin-right: 55px; } } @media screen and (max-width:1100px) { .gp-container { width: 900px; } .footer p { margin-right: 30px; } } @media screen and (max-width:1024px) { .english2 { display: block; float: left; margin-top: 15px; margin-left: 20px; background: none; } .english2 p { border: none; padding-bottom: 0; line-height: 29px; } .gp-menu-nav { display: block !important; } .gp-menu-header { top: 37px; right: 15px; } .gp-container { width: auto; margin: 0 30px; } .nav, .english { display: none; } .english2 { display: block !important; } .logo1 { width: 30%; padding: 40px 0; } .logo2 { width: 27%; padding: 40px 0; margin-right: 0; } .gp-menu { display: block; } .gp-menu-header { display: block; } header::before { width: calc(100% - 79.4%); } } @media screen and (max-width:996px) { .logo1 { width: 30%; padding: 20px 0; } .logo2 { width: 27%; padding: 20px 0; margin-right: 0; } header::before { height: 350px !important; ; } .footer p { margin-right: 0; width: 33.33%; margin-bottom: 15px; float: left; } } @media screen and (max-width:767px) { .gp-menu-header { display: block; top: 38px; right: 0; } header::before { height: 230px !important; } .footer p { width: 50%; margin-bottom: 20px; } } @media screen and (max-width:600px) { .gp-menu-header-icon { transform: scale(0.6); top: -16px; } .gp-menu-header { display: block; top: 35px; right: 0; } } @media screen and (max-width:479px) { .gp-menu-header { display: block; top: 32px; } .gp-menu-header-icon { transform: scale(0.6); top: -10px; } .logo1 { width: 43%; padding: 25px 0; } .logo2 { width: 34%; padding: 25px 0; margin-right: 0; } .footer p { margin: 0 auto; width: 100%; } .footerRight { text-align: center; } } @media screen and (max-width:414px) { .footer p { width: 100% } .gp-menu-header-icon { transform: scale(0.6); top: -10px; } } /*4.搜索按钮全屏展开*/ #gp-serBtn4 { position: relative; z-index: 801; } .gp-search4 { height: 0; border: none; width: 100%; overflow: hidden; position: fixed; top: 50%; z-index: 802; left: 0; } .gp-search4 .gp-ser { max-width: 800px; } .gp-search4 input, .gp-search4 button { height: 40px; line-break: 40px; } .gp-search4 .gp-ser { height: 40px; border: 1px solid #ccc; margin-top: 20px; } .gp-search4 .notxt1 { background: none; /* color: #fff; */ } .gp-search4 .gp-ser { display: none; border: none; background: #fff; } .gp-search4.active .gp-ser { display: block; } .gp-search4.active { height: 80px; } .searchActive .gp-overlay { top: 0; } @media screen and (max-width:998px) { .gp-search4 .gp-ser { width: 80%; } .gp-search4 input, .gp-search4 button { box-sizing: border-box; } .gp-search4 input.notxt { width: 100%; padding-right: 90px; } .gp-search4 .notxt1 { width: 85px; } }