@media screen and (min-width: 1024px) {
#h_top {
display: flex;
justify-content: space-between;
align-items: center;
}
#gNav ul {
position: relative;
display: flex;
}
#gNav li {
position: relative;
}
#gNav .sub-menu {
visibility: hidden;
opacity: 0;
z-index: 1;
display: block;
position: absolute;
top: 0;
left: 50%;
margin-left: -100px;
width: 200px;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 60px rgba(77, 94, 115, 0.15);
}
#gNav .sub-menu:after, #gNav .sub-menu:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#gNav .sub-menu:after {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #fff;
border-width: 6px;
margin-left: -6px;
}
#gNav .sub-menu:before {
border-color: rgba(238, 241, 245, 0);
border-bottom-color: #eef1f5;
border-width: 7px;
margin-left: -7px;
}
#gNav .sub-menu li {
border-width: 0 0 1px !important;
}
#gNav .sub-menu li a {
padding: 15px;
line-height: 1.2;
font-size: 1.4rem;
text-align: center;
}
#gNav .sub-menu.services-list {
width: 250px;
margin-left: -125px;
}
#gNav .sub-menu.services-list li a {
font-size: 1.3rem;
padding: 13px 10px;
}
#gNav .sub-menu a:hover:after {
content: none;
}
#gNav ul > li:hover {
-webkit-transition: all .5s;
transition: all .5s;
}
#gNav li:hover ul.sub-menu {
top: 50px;
visibility: visible;
opacity: 1;
z-index: 9999;
}
#gNav li ul li:after {
content: none;
}
}
@media only screen and ( max-width : 1023px ) {
#gNav {
display: none;
}
.fixed {
position: fixed;
width: 100%;
height: 100%;
z-index: 1;
}
header .mask {
top: 0;
left: 0;
z-index: 1;
position: absolute;
width: 100%;
height: 100vh;
opacity: 1;
display: none;
background: #fff;
}
header nav > ul > li > a i {
display: none !important;
}
}
a.meanmenu-reveal{
display: none;
}
.h_logo {
position: relative;
z-index: 99999;
}
.mean-container .mean-bar{
width: 100%;
position: fixed;
background: none;
top: 0;
left: 0;
z-index: 98;
}
.meanmenu-reveal-btn {
position: absolute;
display: block;
z-index: 99999;
box-sizing: border-box;
width: 60px;
height: auto;
right: 0;
top: 0;
}
.meanmenu-reveal {
width: 26px;
height: 20px;
margin: 16px auto 14px;
display: block !important;
position: relative;
}
.meanmenu-reveal span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 2px;
margin: 0 auto;
background: #333333;
}
.meanmenu-reveal span:nth-of-type(1) {
top: 0;
}
.meanmenu-reveal span:nth-of-type(2) {
top: 8px;
}
.meanmenu-reveal span:nth-of-type(3) {
top: 16px;
}
.meanmenu-reveal span:nth-of-type(1) { }
.meanmenu-reveal span:nth-of-type(2) { opacity: 1;
}
.meanmenu-reveal span:nth-of-type(3) { }
.meanclose span:nth-of-type(1) {
-webkit-animation: active-menu-ber01 .75s forwards;
animation: active-menu-ber01 .75s forwards;
top: -2px;
}
.meanclose span:nth-of-type(2) {
opacity: 0;
}
.meanclose span:nth-of-type(3) {
-webkit-animation: active-menu-ber03 .75s forwards;
animation: active-menu-ber03 .75s forwards;
}
@-webkit-keyframes menu-ber01 {
0% {
-webkit-transform: translateY(8px) rotate(45deg);
}
50% {
-webkit-transform: translateY(8px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
}
}
@keyframes menu-ber01 {
0% {
transform: translateY(8px) rotate(45deg);
}
50% {
transform: translateY(8px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@-webkit-keyframes menu-ber02 {
0% {
-webkit-transform: translateY(-8px) rotate(-45deg);
}
50% {
-webkit-transform: translateY(-8px) rotate(0);
}
100% {
-webkit-transform: translateY(0) rotate(0);
}
}
@keyframes menu-ber02 {
0% {
transform: translateY(-8px) rotate(-45deg);
}
50% {
transform: translateY(-8px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@-webkit-keyframes active-menu-ber01 {
0% {
-webkit-transform: translateY(0) rotate(0);
}
50% {
-webkit-transform: translateY(10px) rotate(0);
}
100% {
-webkit-transform: translateY(10px) rotate(45deg);
}
}
@keyframes active-menu-ber01 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(10px) rotate(0);
}
100% {
transform: translateY(10px) rotate(45deg);
}
}
@-webkit-keyframes active-menu-ber03 {
0% {
-webkit-transform: translateY(0) rotate(0);
}
50% {
-webkit-transform: translateY(-8px) rotate(0);
}
100% {
-webkit-transform: translateY(-8px) rotate(-45deg);
}
}
@keyframes active-menu-ber03 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-8px) rotate(0);
}
100% {
transform: translateY(-8px) rotate(-45deg);
}
}
.mean-container .mean-nav {
width:100%;
margin-top: 50px;
max-height: 100vh;
overflow-y: auto;
opacity: 0;
transition: all 0.2s ease;
}
.mean-container.open .mean-nav {
opacity: 1;
}
.mean-container .mean-nav ul {
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
position: relative;
z-index: 99;
max-height: 100vh;
max-height: calc(100vh - 50px);
}
.mean-container .mean-nav ul ul{
padding-bottom:0;
margin-bottom:0;
}
.mean-container .mean-nav ul li{
position:relative;
width:100%;
}
.mean-container .mean-nav ul li a,.mean-container .mean-nav ul li span.pre {
display: block;
}
.mean-container .mean-nav ul li li a {
padding-right: 5vw;
padding-left: 8vw;
visibility:visible;
}
.mean-container .mean-nav ul li li:last-child {
border-bottom: none !important;
}
.mean-container .mean-nav ul li.mean-last a{
border-bottom:none;
margin-bottom:0;
}
.mean-container .mean-nav ul li li li a{
width:70%;
padding:1em 15%;
}
.mean-container .mean-nav ul li li li li a{
width:60%;
padding:1em 20%;
}
.mean-container .mean-nav ul li li li li li a{
width:50%;
padding:1em 25%;
}
.mean-container .mean-nav ul li a:hover{
background:#252525;
background:rgba(255,255,255,0.1);
}
.mean-container .mean-nav ul li a.mean-expand{
width: 100%;
text-align: right;
position: absolute;
right:0;
top:0;
z-index:2;
} .mean-container .mean-push {
float:left;
width:100%;
padding:0;
margin:0;
clear:both;
}
.mean-nav .wrapper{
width:100%;
padding:0;
margin:0;
}
.mean-remove{
display:none !important;
}