.pid-3a1ad48b-2b2d-4aa9-aa65-4e7d42b80dc0 { position: relative; z-index: 5; } .pid-3a1ad48b-2b2d-4aa9-aa65-4e7d42b80dc0 .layout { min-height: 0; } .gp-header27 { z-index: 2; position: fixed; width: 100%; top: 0; left: 0; transition: .5s; } @-webkit-keyframes header { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } @keyframes header { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .gp-header27 .wrapHeader { transition: all 0.2s ease-out 0s; position: relative; border-bottom: 1px solid rgba(255, 255, 255, .3); } .gp-header27 .wrapHeader .gp-container { position: relative; z-index: 2; width: 100%; padding: 0 4.2%; box-sizing: border-box; margin: 0 !important; } .gp-header27 .wrapHeader::after { content: ''; display: block; position: absolute; width: 100%; /* height: 5px; */ left: 0; top: 0; background: #244cba; background: -o-linear-gradient(right, #1488cc, #244cba); background: -moz-linear-gradient(right, #1488cc, #244cba); background: linear-gradient(to right, #1488cc, #244cba); z-index: 2; } .gp-header27 .wrapHeader::before { content: ''; display: block; position: absolute; left: 0; right: 0; top: -1px; padding-bottom: calc(220% / 19.2); z-index: -1; background: rgba(0, 0, 0, 1); background: -o-linear-gradient(bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); background: -moz-linear-gradient(bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); background: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); width: 100%; } .gp-header27.currents { position: fixed; left: 0; right: 0; top: 0; /* background: -o-linear-gradient(bottom, #1488cc, #244cba); background: -moz-linear-gradient(bottom, #1488cc, #244cba); background: rgba(43, 50, 178, .9); */ background: #3035ac; box-shadow: 0 0 10px rgba(0, 0, 0, .1); } .gp-header27.currents .nav ul li.on { /* background: rgba(0, 0, 0, .2); */ } .gp-header27.currents .wrapHeader {} .gp-header27.currents .mobile .mobile-inner-header .gp-menu-header-icon { margin-top: 5px; } .gp-header27 .mobile { display: none; } .gp-header27 .mobile .mobile-inner-header { width: 100%; height: 42px; position: absolute; top: 0px; right: 0px; /* background: #2b32b2; */ } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon { font-size: 25px; color: #fff; height: 31px; float: right; width: 32px; position: relative; cursor: pointer; font-weight: bold; text-align: center; margin-top: 21px; margin-right: 7px; background: #fff; z-index: 9999; } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon span { position: absolute; left: 4px; top: 33.33%; width: 24px; height: 2px; background: #2b32b2; display: block; } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outfirst; transform: translateY(4px) rotate(0deg); } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outsecond; transform: translateY(-4px) rotate(0deg); } @keyframes clickfirst { 0% { transform: translateY(4px) rotate(0deg); } 100% { transform: translateY(0) rotate(45deg); } } @keyframes clicksecond { 0% { transform: translateY(-4px) rotate(0deg); } 100% { transform: translateY(0) rotate(-45deg); } } @keyframes clickthird { 0% { opacity: 0; } 100% { opacity: 0; } } @keyframes outfirst { 0% { transform: translateY(0) rotate(-45deg); } 100% { transform: translateY(-4px) rotate(0deg); } } @keyframes outsecond { 0% { transform: translateY(0) rotate(45deg); } 100% { transform: translateY(4px) rotate(0deg); } } @keyframes outthird { 0% { transform: translateY(0) rotate(90deg); } 100% { transform: translateY(12px) rotate(0deg); } } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: outthird; transform: translateY(-4px) rotate(0deg); } .gp-header27 .mobile .gp-menu-nav { background-color: rgba(28, 28, 28, 0.85); width: 100%; position: absolute; top: 0; left: 0px; padding-top: 60px; padding-bottom: 25px; display: none; z-index: 999; position: fixed; display: block; transform: translate(0, -150%); width: 100%; right: auto; left: 0; transition: all 1s ease-in-out; } .gp-header27 .mobile .gp-menu-nav li { position: relative; padding: 0 20px; box-sizing: border-box; } .gp-header27 .mobile .gp-menu-nav li .gp-menu-arrow { position: absolute; right: 21px; top: 0; width: 46px; height: 46px; line-height: 46px; text-align: center; } .gp-header27 .mobile .gp-menu-nav li>a { display: inline-block; line-height: 45px; text-decoration: none; width: 100%; border-bottom: solid 1px #646360; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: returnToNormal; animation-name: returnToNormal; } .gp-header27 .mobile .gp-menu-nav li .m-second-nav { display: none; padding-left: 10px; } .gp-header27 .mobile .gp-menu-nav li .m-second-nav li { padding: 0; } .gp-header27 .mobile .gp-menu-nav li .m-second-nav li a { display: block; height: 35px; line-height: 35px; border-bottom: dotted 1px rgb(105, 106, 106); -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: returnToNormal; animation-name: returnToNormal; } .gp-header27 .mobile .gp-menu-nav li.on span { transform: rotate(90deg); } .gp-header27 .mobile .gp-menu-nav.gp-menu-offcanvas1 { position: fixed; display: block; transform: translate(-150%, 0); width: 100%; right: auto; left: 0; } .gp-header27 .mobile .gp-menu-nav .mobile_search { clear: both; position: relative; height: 36px; margin: 10px 30px 0; border: 1px solid #747474; border-radius: 30px; overflow: hidden; } .gp-header27 .mobile .gp-menu-nav .mobile_search input.notxt { width: 79%; color: #d9d9d9; margin-left: 45px; border: none; height: 34px; background: none; outline: none; } .gp-header27 .mobile .gp-menu-nav .mobile_search input.notxt1 { width: 45px; background-color: #fff; right: auto; position: absolute; top: 10px; left: 0; background: url(../images/ser.png) no-repeat center center; border: none; } .gp-header27 .mobile .gp-menu-nav .m-link { display: block; padding: 20px; box-sizing: border-box; } .gp-header27 .mobile.open .gp-menu-nav { transition: all 1s ease-in-out; transform: translate(0, 0); position: absolute; display: block; } @-webkit-keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes returnToNormal { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon-click span:nth-child(1) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickfirst; background: #fff; } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon-click span:nth-child(2) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clicksecond; background: #fff; } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon-click span:nth-child(3) { animation-duration: 0.5s; animation-fill-mode: both; animation-name: clickthird; } .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon-click { background: none; margin-top: 33px; } .wrapHeader {} .wrapHeader .gp-logo { padding: 27px 0 23px; box-sizing: border-box; max-width: 780px; } .wrapHeader .gp-logo a { display: inline-block; vertical-align: middle; width: auto; } .wrapHeader .gp-logo a.logo_02 { position: relative; padding: 0 20px; margin: 0 20px; box-sizing: border-box; } .wrapHeader .gp-logo a.logo_02::before { content: ''; display: block; width: 1px; height: 40px; position: absolute; left: 0; top: calc(50% - 20px); background: rgba(255, 255, 255, .2); } .wrapHeader .gp-logo a.logo_02::after { content: ''; display: block; width: 1px; height: 40px; position: absolute; right: 0; top: calc(50% - 20px); background: rgba(255, 255, 255, .2); } .wrapHeader .gp-logo a img { max-height: 70px; } .gp-header27.currents .wrapHeader .ser { background: rgba(255, 255, 255, 1); } .wrapHeader .ser { height: 44px; line-height: 44px; background: rgba(255, 255, 255, .1); position: relative; margin-top: 27px; } .wrapHeader .ser:after { content: ""; display: block; width: 0; height: 0; position: absolute; right: 0; bottom: 0; } .wrapHeader .gp-link { display: block; margin: 38px 0; margin-left: 10px; line-height: 30px; } .wrapHeader .search { width: 284px; height: 44px; position: relative; overflow: hidden; background: rgba(255, 255, 255, .1); } .wrapHeader .search input { position: absolute; height: 44px; line-height: 44px; color: #fff !important; font-size: 12px; border: none; background: none; } .wrapHeader .search input.notxt { padding: 0 12px; box-sizing: border-box; width: 240px; outline: none; background: rgba(255, 255, 255, .1); } .wrapHeader .search input.notxt:focus { background: rgba(255, 255, 255, .1); } .wrapHeader .search input.notxt1 { position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: #23289e url(../images/ser.png) no-repeat center center; border: none; outline: none; } .gp-header27 .nav { width: 100%; height: 56px; transition: all 0.3s ease-out 0s; } .gp-header27.currents .wrapHeader::before { display: none } .gp-header27 .nav ul { height: 56px; display: flex; display: -webkit-flex; justify-content: space-between; margin-top: 0; margin-bottom: 0; box-sizing: border-box; width: 100% !important; padding: 0 7.8%; } .gp-header27 .nav ul li { position: relative; text-align: center; box-sizing: border-box; /* width: 100%; */ } .gp-header27 .nav ul li>a { display: block; line-height: 56px; height: 56px; transition: all 0.3s ease; text-align: center; font-size: 20px; padding: 0 5px; box-sizing: border-box; } .gp-header27 .nav .subNav { position: absolute; left: 0; top: 56px; left: calc(50% - 100px); display: none; overflow: hidden; width: 200px; z-index: 99; background: #3035ac; /* background: rgba(0, 88, 156, .8); */ } .gp-header27.currents .nav .subNav { /* background: rgba(43, 50, 178, .8); */ background: #3035ac; } .gp-header27.currents .wrapHeader .search input { color: #000 !important; } .gp-header27 .nav ul li.on>a { font-weight: bold; /* background: #00589c; */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; transition: all 0.2s ease; } .gp-header27 .nav ul li.on .subNav { display: block; } .gp-header27 .nav ul li.on .subNav dl { overflow: hidden; } .gp-header27 .nav ul li.on .subNav dl dd { height: auto; line-height: 18px; text-align: center; } .gp-header27 .nav ul li.on .subNav dl dd a { line-height: 18px; padding: 10px 5px; box-sizing: border-box; text-align: center; font-weight: normal; display: block; } .gp-header27 .nav ul li.on .subNav dl dd:hover { /* background: rgba(0, 88, 156, 1); */ background: #23289e; } .gp-header27 .nav ul li.on .subNav dl dd:hover a { color: #fff; } @media screen and (max-width: 1460px) { .gp-header27 .nav ul { padding: 0 6%; } .gp-header27 .wrapHeader .gp-container { padding: 0 3.2%; } } @media screen and (max-width: 1400px) { .gp-header27 .nav ul { padding: 0 4%; } .gp-header27 .wrapHeader .gp-container { padding: 0 3.2%; } } @media screen and (max-width: 1340px) { .gp-header27 .nav ul li { width: auto; } } @media screen and (max-width: 1260px) { .wrapHeader .gp-logo { width: calc(100% - 348px); padding: 20px 0; } .wrapHeader .ser { margin-top: 20px; height: 30px; line-height: 30px; } .wrapHeader .search, .wrapHeader .search input.notxt1 { height: 30px; background-size: 18px; } .wrapHeader .gp-logo a.logo_01 { width: 190px; } .wrapHeader .gp-logo a.logo_02 { width: 207px; } .wrapHeader .gp-logo a.logo_03 { width: 212px; } } @media screen and (max-width: 1100px) { .wrapHeader .gp-logo { width: calc(100% - 48px); display: flex; } .wrapHeader .gp-logo a.logo_01 { width: 28%; } .wrapHeader .gp-logo a.logo_02 { width: 28%; margin: 0 10px; padding: 0 10px; } .wrapHeader .gp-logo a.logo_02::before, .wrapHeader .gp-logo a.logo_02::after { height: 30px; top: calc(50% - 15px); } .wrapHeader .gp-logo a.logo_03 { width: 33%; } .gp-header27 .nav, .gp-header27 .ser, .gp-header27 .wrapHeader .gp-link { display: none; } .gp-header27 .mobile { display: block; position: static; } .gp-header27 .mobile .gp-menu-nav .mobile_search input.notxt1 { background-size: 18px; } } @media screen and (max-width: 767px) {} @media screen and (max-width: 600px) { .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon { margin-top: 16px; transform: scale(.8); } } @media screen and (max-width: 414px) { .gp-header27 .mobile .mobile-inner-header .gp-menu-header-icon { margin-top: 18px; } }