.open .gp-menu-offcanvas2 { padding-top: 40px; } .gp-menu-nav, .gp-menu-header-icon-out>span {} .gp-ser { height: 37px; border: none; } .gp-search { line-height: 30px; margin-top: 7px; width: 160px; height: 36px; float: right; line-height: 37px; background: #e5e5e5; border: none; border-radius: 36px; } .gp-search input.notxt { color: #999; width: 66%; left: 0; height: 37px; line-height: 37px; outline: none; /* background: red; */ padding-left: 12px; } .gp-search .notxt1 { position: absolute; width: 18px; height: 18px !important; right: 20px; height: 30px; background: url('../images/search.png') no-repeat; background-size: 100% 100%; top: 10px; /* cursor: pointer; */ color: #000; } .nav { /* position: absolute; */ /* width: 65%; */ padding: 11px 0; /* border-top: 1px solid #356ca4; */ z-index: 50; margin-top: -29px; margin-left: 722px; } .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: fadeInUpSmall; animation-name: fadeInUpSmall; 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 zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @-webkit-keyframes fadeInUpSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @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: #222; font-size: 18px; position: relative; /* font-weight: bold; */ display: block; } .nav ul li { position: relative; } .nav li.on>a { font-weight: bold; color: #2c3196; } .nav ul li:before { content: ""; display: block; width: 0; height: 6px; background: #2c3196; position: absolute; left: 0; bottom: 0px; transition: all 0.5s ease; } .nav ul li.on:before { width: 100%; } .nav li.on .subNav { display: block; } .nav ul { text-align: justify; overflow: visible !important; height: 24px; box-sizing: border-box; } .nav ul:after { content: ''; width: 100%; display: inline-block; *display: inline; *zoom: 1; height: 0; } .nav li { /* padding: 20px 0px; */ position: relative; display: inline-block; padding-bottom: 28px; z-index: 50; } .subNav { background: #2c3196; left: calc(50% - 60px); width: 120px; /* padding: 10px 10px 4px 10px; */ top: 52px; z-index: 1000; } .subNav dd { padding: 9px 7px; } .subNav dd:hover { background: rgba(75, 121, 188, .75) } .gp-menu-nav { background: rgba(1, 64, 150, .9); } header { border-top: 6px solid #2c4780; } 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; } body { position: relative; } .headertop { position: relative; padding: 28px 0; width: 93.75%; margin-left: auto; margin-right: auto; } .headertop .gp-container { position: relative; } .headertop::before { content: ''; display: block; } .logo1 { display: inline-block; margin-right: 20px } .logo2 { display: inline-block; } #gp-search2 { display: block; border: 1px solid #fff; margin-left: 20px; float: left; margin-top: 20px; } #gp-search2 input.notxt { /* color: #fff */ } .chinese { color: #757575; margin-top: 18px; margin-right: 40px; } /* footer */ footer { background: url(../images/footer.png) no-repeat; background-size: cover; padding: 75px 0; margin-top: -20px; position: relative; z-index: 1; } .footerl { width: 38%; display: inline-block; } .footertop { display: block; padding-bottom: 49px; border-bottom: 1px solid rgba(255, 255, 255, .2); margin-bottom: 20px; } .footerl p, .footerl p a { color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 24px; } .footerl p { display: inline-block; margin-right: 23px; } .footer .gp-container { position: relative; } .ewm { text-align: center; } .ewm p { margin-top: 14px; } .ewmout { width: 100px; height: 100px; overflow: hidden; padding: 8px; background: #fff; } .ewming { background: #757575; width: 100px; height: 100px; overflow: hidden; } @media screen and (max-width:1710px) {} @media screen and (max-width:1640px) { .logo1 { display: inline-block; width: 200px; margin-right: 7px; } .logo2 { display: inline-block; width: 200px; } .nav { margin-top: 0; margin-left: 0; } } @media screen and (max-width:1600px) {} @media screen and (max-width:1460px) { .footerl { width: 45%; display: inline-block; } } @media screen and (max-width:1400px) {} @media screen and (max-width:1301px) {} @media screen and (max-width:1200px) {} @media screen and (max-width:1101px) { footer { margin-top: 20px; } .gp-container { width: 900px; } .footerl { width: 60%; display: inline-block; } } @media screen and (max-width:997px) { .gp-menu-nav { display: block !important; } .gp-menu-header { top: 25px; right: 0; } .gp-container { width: auto; /* margin: 0 15px; */ } .gp-search, .nav { display: none; } .us { display: none; } .footerl { width: 70%; display: inline-block; } .chinese { display: none; } } @media screen and (max-width:767px) { .gp-menu-header-icon { /* transform: scale(0.6); */ /* top: -16px; */ } .gp-menu-header { display: block; /* top: 70px; */ } .footerl { width: calc(100% - 130px); } } @media screen and (max-width:479px) { .gp-menu-header { display: block; top: 24px; } .ewm { margin-top: -26px; } .gp-menu-header-icon { transform: scale(0.6); top: -10px; } .headertop { padding: 15px 0; } .logo1 { display: inline-block; width: 150px; margin-right: 7px; } .logo2 { display: inline-block; width: 150px; } .footerl { width: 100%; /* margin-bottom: 20px; */ } .ewm { float: none; display: inline-block; margin: 0; } .footertop { padding-bottom: 20px; } footer { padding-bottom: 20px; } } @media screen and (max-width:414px) { .logo1 { display: inline-block; width: 120px; margin-right: 7px; } .logo2 { display: inline-block; width: 120px; } .gp-menu-header-icon { transform: scale(0.6); top: -12px; } }