@charset "utf-8";
 #g-nav{ position:fixed;
z-index: 999; top:0;
right: -120%;
width:100%;
height: 100vh; background-color: #F0F8F2;
background-image:
radial-gradient(#fff 20%, transparent 20%),
radial-gradient(#fff 20%, transparent 20%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px; transition: all 0.6s;
} #g-nav.panelactive{
right: 0;
} #g-nav.panelactive #g-nav-list{ position: fixed;
z-index: 999; 
width: 100%;
height: 100vh; overflow: auto;
-webkit-overflow-scrolling: touch;
} #g-nav ul { position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
} #g-nav li{
list-style: none;
text-align: center;
}
#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
} .openbtn1{
position:fixed;
z-index: 9999; top:10px;
right: 10px;
cursor: pointer;
width: 30px;
height:30px;
background:rgba(0,0,0,0.2);
border-radius:50%;
} .openbtn1 span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 8px;
height: 3px;
border-radius: 2px;
background-color: #6f6f6f;
width: 50%;
}
.openbtn1 span:nth-of-type(1) {
top:9px; 
}
.openbtn1 span:nth-of-type(2) {
top:13px;
}
.openbtn1 span:nth-of-type(3) {
top:17px;
}
.openbtn1.active span:nth-of-type(1) {
top: 8px;
left:8px;
transform: translateY(6px) rotate(-45deg);
width: 50%;
}
.openbtn1.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn1.active span:nth-of-type(3){
top: 20px;
left: 8px;
transform: translateY(-6px) rotate(45deg);
width: 50%;
}