.open .gp-menu-offcanvas2 { padding-top: 40px; } .gp-menu-nav, .gp-menu-header-icon-out>span {} .gp-ser { height: 44px; } .gp-search { line-height: 30px; margin-top: 20px; width: 187px; height: 42px; line-height: 42px; border: 1px solid #184c8d; border-radius: 42px; } .gp-search input.notxt { color: #666; width: 56%; left: 0; height: 42px; line-height: 42px; outline: none; /* background: red; */ padding-left: 29px; } .gp-search .notxt1 { position: absolute; width: 12px; height: 12px !important; right: 30px; height: 30px; background: url('../images/search.png') no-repeat; background-size: 100% 100%; top: 17px; /* cursor: pointer; */ color: #000; } .nav { position: absolute; width: 100%; padding: 10px 0; border-top: 1px solid #356ca4; z-index: 50; } .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 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: #fff; font-size: 18px; position: relative; font-weight: bold; display: block; } .nav ul li { position: relative; } .nav ul li:before { content: ""; display: block; width: 0; height: 3px; background: #fff; 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: 34px; 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: 10px; z-index: 50; } .subNav { background: #66a9be; left: calc(50% - 70px); width: 120px; padding: 10px 10px 4px 10px; top: 34px; z-index: 1000; } .gp-menu-nav { background: #065895; } 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; } header { border-top: 10px solid #6cd7dc; } .headertop { position: relative; padding: 26px 0; /* border-bottom: 1px solid; */ } .headertop .gp-container { position: relative; } .headertop::before { content: ''; display: block; } .logo1 { display: inline-block; } .logo2 { display: inline-block; } #gp-search2 { display: block; border: 1px solid #fff; margin-left: 20px; } #gp-search2 input.notxt { color: #fff } #gp-search2 .notxt1 { background: url(../images/search2.png) no-repeat; } footer { padding: 60px 0; background: url(../images/footerbg.png) no-repeat; background-size: cover; } .flogo, .flogo2 { display: inline-block; vertical-align: middle; } .footerUl { width: 50%; font-size: 0; margin-top: 10px; } .footerUl li { width: 50%; display: inline-block; line-height: 2.4; } @media screen and (max-width:1710px) {} @media screen and (max-width:1640px) {} @media screen and (max-width:1600px) {} @media screen and (max-width:1460px) { .gp-hcontainer { margin: 0 100px; position: relative; } } @media screen and (max-width:1400px) { .flogo { width: 248px; } .flogo2 { width: 200px; } .footerUl { margin-top: 0; } } @media screen and (max-width:1301px) { .gp-container { width: 1180px; } .gp-serBtn2 { margin: 31px 20px 0; } .navLeft { /* width: 44%; */ } .navLeft { /* width: 48%; */ /* padding: 30px 0; */ /* vertical-align: middle; */ } } @media screen and (max-width:1200px) { .gp-container { width: 1000px; } } @media screen and (max-width:1100px) { .gp-container { width: 900px; } .flogo { width: 200px; } .flogo2 { width: 166px; } .footerUl { width: 56%; } } @media screen and (max-width:997px) { .gp-menu-nav { display: block !important; } .gp-menu-header { top: 47px; } .gp-container { width: auto; margin: 0 15px; } .gp-search, .nav { display: none; } footer { /* text-align: center; */ } .footerUl { width: 71%; float: none; /* display: inline-block; */ margin: 10px 0; text-align: left; } } @media screen and (max-width:767px) { .gp-menu-header-icon { transform: scale(0.6); top: -43px; } .gp-menu-header { display: block; top: 70px; } .logo1 { width: 200px; } .logo2 { width: 148px; } .footerUl { width: 100% } } @media screen and (max-width:479px) { .gp-menu-header { display: block; top: 24px; } .gp-menu-header-icon { transform: scale(0.6); top: -5px; } .headertop { padding: 15px 0; } .footerUl li { width: 100%; } .flogo { width: 186px; } .flogo2 { width: 166px; } footer { padding: 30px 0; } } @media screen and (max-width:414px) { .logo1 { width: 145px; } .logo2 { width: 106px; } .gp-menu-header-icon { transform: scale(0.6); top: -12px; } .flogo { width: 149px; } .flogo2 { width: 128px; } }