@charset "utf-8";
/* CSS Document */

nav.gnav{max-width:1200px; height: 50px; margin: 0 auto;}
nav.gnav li{ float: left; width: 14.28%;}


.BalloonNav{height: 50px; line-height: 50px; background:#fefef5;}
a.BalloonNav{font-size: 16px; font-weight: bold; color: #777777; }


.BalloonNav {
width: 100%;
box-sizing: border-box;
text-align: center;
padding: 0 10px;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.BalloonNav:before {
position: absolute;
z-index: -1;
content: '';
left: calc(50% - 10px);
bottom: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #fefef5 transparent transparent transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.BalloonNav:hover, .BalloonNav:focus, .BalloonNav:active {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
background: #777777;
color: #FFFFFF;
}
.BalloonNav:hover:before, .BalloonNav:focus:before, .BalloonNav:active:before {
-webkit-transform: translateY(10px);
transform: translateY(10px);
border-color: #777777 transparent transparent transparent;
}