.display{
  display:none;
}
label{
  position:fixed;
  width:5rem;
  height:5rem;
  z-index:9999;
  cursor:pointer;
}
.box{
  position:fixed;
  top:1.5rem;
  right:1.5rem;
  width:3rem;
  height:48px;
}
span, span::before, span::after{
  display:inline-block;
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
  z-index:99;
}
.a, .b, .c, .d, .e, .f, .g, .h, .i, .j, .k, .l, .m, .n{
  opacity:1;
  transition:1.5s ease-in;
}
.q, .r, .s, .t, .u, .v, .w, .x, .y, .z{
  opacity:0;
  transition:0.8s ease-in;
  box-sizing:border-box;
}
.a span{
  width:1.55rem;
  height:0.933rem;
  background: #0ec2ff;
  box-sizing:border-box;
}
.a span::before{
  bottom:1.4rem;
  width:1.55rem;
  height:0;
  border-bottom:0.467em solid #0ec2ff;
  border-left:0.767em solid transparent;
  border-right:0.767em solid transparent;
  box-sizing:border-box;
}
.a span::after{
  top:1.4rem;
  width:1.55rem;
  height:0;
  border-top:0.467rem solid #0ec2ff;
  border-left:0.767rem solid transparent;
  border-right:0.767rem solid transparent;
  box-sizing:border-box;
}
.b span{
  width:0.3rem;
  height:5rem;
  background-color: #0ec2ff;
}
.b span::before{
  transform:rotate(60deg);
  background-color: #0ec2ff;
}
.b span::after{
  transform:rotate(-60deg);
  background-color: #0ec2ff;
}
.c span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(-120deg);
  bottom:2.5rem;
  left:0.8rem;
  background-color: #0ec2ff;
}
.c span::before{
  transform:translate(0.3rem, 0.15rem);
  background-color: #0ec2ff;
}
.c span::after{
  transform:translate(0.617rem, 0.3rem);
  background-color: #0ec2ff;
}
.d span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(120deg);
  top:-0.55rem;
  left:2.617rem;
  background-color: #0ec2ff;
}
.d span::before{
  transform:translate(-0.3rem, -0.183rem);
  background-color: #0ec2ff;
}
.d span::after{
  transform:translate(-0.617rem, -0.367rem);
  background-color: #0ec2ff;
}
.e span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  top:1.867rem;
  left:1.867rem;
  background-color: #0ec2ff;
}
.e span::before{
  transform:translate(0.3rem, 0.183rem);
  background-color: #0ec2ff;
}
.e span::after{
  transform:translate(0.617rem, 0.367rem);
  background-color: #0ec2ff;
}
.f span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(-120deg);
  top:2.5rem;
  right:0.8rem;
  background-color: #0ec2ff;
}
.f span::before{
  transform:translate(-0.3rem, -0.15rem);
  background-color: #0ec2ff;
}
.f span::after{
  transform:translate(-0.617rem, -0.3rem);
  background-color: #0ec2ff;
}
.g span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(120deg);
  top:0.55rem;
  right:2.617rem;
  background-color: #0ec2ff;
}
.g span::before{
  transform:translate(0.3rem, 0.183rem);
  background-color: #0ec2ff;
}
.g span::after{
  transform:translate(0.617rem, 0.367rem);
  background-color: #0ec2ff;
}
.h span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  bottom:1.867rem;
  right:1.867rem;
  background-color: #0ec2ff;
}
.h span::before{
  transform:translate(-0.3rem, -0.183rem);
  background-color: #0ec2ff;
}
.h span::after{
  transform:translate(-0.617rem, -0.367rem);
  background-color: #0ec2ff;
}
.i span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(120deg);
  bottom:2.5rem;
  right:0.8rem;
  background-color: #0ec2ff;
}
.i span::before{
  transform:translate(-0.3rem, 0.15rem);
  background-color: #0ec2ff;
}
.i span::after{
  transform:translate(-0.617rem, 0.3rem);
  background-color: #0ec2ff;
}
.j span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  bottom:1.867rem;
  left:1.867rem;
  background-color: #0ec2ff;
}
.j span::before{
  transform:translate(0.3rem, -0.183rem);
  background-color: #0ec2ff;
}
.j span::after{
  transform:translate(0.617rem, -0.367rem);
  background-color: #0ec2ff;
}
.k span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(-120deg);
  top:0.55rem;
  left:2.617rem;
  background-color: #0ec2ff;
}
.k span::before{
  transform:translate(-0.3rem, 0.183rem);
  background-color: #0ec2ff;
}
.k span::after{
  transform:translate(-0.617rem, 0.367rem);
  background-color: #0ec2ff;
}
.l span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(120deg);
  top:2.5rem;
  left:0.8rem;
  background-color: #0ec2ff;
}
.l span::before{
  transform:translate(0.3rem, -0.05rem);
  background-color: #0ec2ff;
}
.l span:after{
  transform:translate(0.617rem, -0.3rem);
  background-color: #0ec2ff;
}
.m span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  top:1.867rem;
  right:1.867rem;
  background-color: #0ec2ff;
}
.m span::before{
  transform:translate(-0.3rem, 0.183rem);
  background-color: #0ec2ff;
}
.m span::after{
  transform:translate(-0.617rem, 0.367rem);
  background-color: #0ec2ff;
}
.n span{
  transform-origin:50% 50%;
  width:0.25rem;
  height:0.75rem;
  transform:rotate(-120deg);
  top:-0.55rem;
  right:2.617rem;
  background-color: #0ec2ff;
}
.n span::before{
  transform:translate(0.3rem, -0.183rem);
  background-color: #0ec2ff;
}
.n span::after{
  transform:translate(0.617rem, -0.367rem);
  background-color: #0ec2ff;
}
.o{
  opacity:1;
  width:5rem;
  height:5rem;
  transition:1.5s 0.5s ease-in-out;
}
.o span::before{
  top:auto;
  bottom:-1.5rem;
  color: #0ec2ff;
  content:'menu';
  text-align:center;
}
.p{
  opacity:0;
  width:5rem;
  height:5rem;
  transition:1.5s 0.5s ease-in-out;
}
.p span::before{
  top:auto;
  bottom:-1.5rem;
  color: #0ec2ff;
  content:'close';
  text-align:center;
}
.q span, .r span, .s span{
  width:0;
  height:0;
  border-left:0.712rem solid transparent;
  border-bottom:1.233rem solid #0ec2ff;
  border-right:0.712rem solid transparent;
  bottom:3.52rem;
}
.r span{
  width:0;
  height:0;
  left:-3.133rem;
}
.s span{
  width:0;
  height:0;
  right:-3.133rem;
}
.t span, .u span{
  width:0;
  height:0;
  border-top:1.233rem solid #0ec2ff;
  border-left:0.712rem solid transparent;
  border-right:0.712rem solid transparent;
  bottom:3.77rem;
  box-sizing:border-box;
}
.t span{
  width:0;
  height:0;
  left:-1.59rem;
}
.u span{
  width:0;
  height:0;
  right:-1.59rem;
}
.v span{
  width:0;
  height:0;
  border-top:3.51rem solid #0ec2ff;
  border-left:0.712rem solid transparent;
  border-right:0.712rem solid transparent;
  bottom:-1.49rem;
}
.w span{
  width:0;
  height:0;
  border-top:0.608rem solid transparent;
  border-left:1.712rem solid transparent;
  border-bottom:0.608rem solid #0ec2ff;
  border-right:1.712rem solid #0ec2ff;
  bottom:-1.49rem;
  right:-0.913rem;
  transform:rotate(-56deg);
}
.x span{
  width:0;
  height:0;
  border-top:0.415rem solid transparent;
  border-left:0.618rem solid transparent;
  border-right:0.618rem solid #0ec2ff;
  border-bottom:0.415rem solid #0ec2ff;
  top:-2.02rem;
  right:-3.27rem;
  transform:rotate(34deg);
}
.y span{
  width:0;
  height:0;
  border-top:0.608rem solid transparent;
  border-left:1.712rem solid #0ec2ff;
  border-bottom:0.608rem solid #0ec2ff;
  border-right:1.712rem solid transparent;
  left:-0.913rem;
  bottom:-1.49rem;
  transform:rotate(56deg);
}
.z span{
  width:0;
  height:0;
  border-top:0.415rem solid transparent;
  border-left:0.618rem solid #0ec2ff;
  border-bottom:0.415rem solid #0ec2ff;
  border-right:0.618rem solid transparent;
  top:-2.02rem;
  left:-3.27rem;
  transform:rotate(-34deg);
}
input:checked ~ .a{
  opacity:0;
  transform:scale(2, 2);
  transition:1s ease-out;
}
input:checked ~ .b{
  opacity:0;
  transform:scale(0.5, 0.5);
  transition:1s ease-in;
}
input:checked ~ .c{
  opacity:0;
  transition:1s ease-in;
}
input:checked ~ .d{
  opacity:0;
  transition:1s .1s ease-in;
}
input:checked ~ .e{
  opacity:0;
  transition:1s .2s ease-in;
}
input:checked ~ .f{
  opacity:0;
  transition:1s .3s ease-in;
}
input:checked ~ .g{
  opacity:0;
  transition:1s .4s ease-in;
}
input:checked ~ .h{
  opacity:0;
  transition:1s .5s ease-in;
}
input:checked ~ .i{
  opacity:0;
  transition:1s .6s ease-in;
}
input:checked ~ .j{
  opacity:0;
  transition:1s .7s ease-in;
}
input:checked ~ .k{
  opacity:0;
  transition:1s .8s ease-in;
}
input:checked ~ .l{
  opacity:0;
  transition:1s .9s ease-in;
}
input:checked ~ .m{
  opacity:0;
  transition:1s 1s ease-in;
}
input:checked ~ .n{
  opacity:0;
  transition:1s 0.5s ease-in;
}
input:checked ~ .o{
  opacity:0;
  transition:1s 0.5s ease-in-out;
}
input:checked ~ .p{
  opacity:1;
  transition:1s 0.5s ease-in-out;
}
input:checked ~ .r{
  opacity:1;
  transition:2s .1s ease-in;
}
input:checked ~ .t{
  opacity:1;
  transition:2s .2s ease-in;
}
input:checked ~ .y{
  opacity:1;
  transition:2s .3s ease-in;
}
input:checked ~ .z{
  opacity:1;
  transition:2s .4s ease-in;
}
input:checked ~ .q{
  opacity:1;
  transition:2s .5s ease-in;
}
input:checked ~ .u{
  opacity:1;
  transition:2s .6s ease-in;
}
input:checked ~ .v{
  opacity:1;
  transition:2s .7s ease-in;
}
input:checked ~ .v{
  opacity:1;
  transition:2s .8s ease-in;
}
input:checked ~ .s{
  opacity:1;
  transition:2s .9s ease-in;
}
input:checked ~ .x{
  opacity:1;
  transition:2s 1s ease-in;
}
input:checked ~ .w{
  opacity:1;
  transition:2s 1.1s ease-in;
}
.overlay, .emblem{
  position:absolute;
  width:100vw;
  height:100vh;
  top:0;
  left:100vw;
  opacity:0;
  transition:0.5s 0.5s ease-in-out;
}
.a_menu{
  position:absolute;
  width:100vw;
  height:100vh;
  left:100vw;
  opacity:0;
  transition:0.5s ease-in-out;
  font-size:inherit;
}
.a_menu ul{
  display:flex;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  margin:auto;
}
.a_menu ul li{
  line-height:1.2rem;
  margin-bottom:1rem;
}
input:checked ~ .overlay{
  transform:translateX(-100vw);
  transition:1s ease-in-out;
  background-color:#1f1f1f;
  opacity:1;
  z-index:997;
}
input:checked ~ .emblem{
  transform:translateX(-100vw);
  transition:1s ease-in-out;
  background-color:;
  opacity:0.5;
  z-index:998;
}
input:checked ~ .a_menu{
  transform:translateX(-100vw);
  transition:1s ease-in-out;
  background-color:;
  opacity:1;
  z-index:999;
}
.emblem img{
  display:inline-block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  height:35vh;
  opacity:0;
  transition:0.5s ease-in-out;
}
input:checked ~ .emblem img{
  opacity:0.2;
  transition:1s 1s ease-in;
}
@media screen and (max-width: 479px) {
  label{
    display:inline-block;
    top:2.5rem;
    right:3rem;
  }
  #nav{
    position:fixed;
    margin:auto;
    z-index:99;
    width:100vw;
    top:0;
  }
  .a_menu ul{
    flex-direction:column;
    justify-content:center;
  }
  .a_menu ul li{
    font-size: calc(1.9rem + ((1vw - 0px) * 0.208));
  }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
  label{
    display:inline-block;
    top:2rem;
    right:3rem;
  }
  #nav{
    position:fixed;
    margin:auto;
    z-index:99;
    width:100vw;
  }
  .a_menu ul{
    height:50vh;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
  .a_menu li{
    width:17rem;
    line-height:1.7rem;
    margin-bottom:4rem;
    font-size: calc(2.0rem + ((1vw - 4.8px) * 2.09));
  }
  .emblem img{
    height:60vh;
  }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
  label{
    display:inline-block;
    top:3rem;
    right:4rem;
  }
  #nav{
    position:fixed;
    margin:auto;
    z-index:99;
    width:100vw;
  }
  .a_menu ul{
    flex-direction:column;
    justify-content:center;
  }
  .a_menu ul li{
    line-height:1.7rem;
    margin-bottom:4rem;
    font-size: calc(3.0rem + ((1vw - 7.7px) * 2.62));
  }
}
@media only screen and (device-width: 812px) and (device-height: 375px) {
  label{
    display:inline-block;
    top:2rem;
    right:3rem;
  }
  #nav{
    position:fixed;
    margin:auto;
    z-index:99;
    width:100vw;
  }
  .a_menu ul{
    height:70vh;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }
  .a_menu li{
    width:30vw;
    line-height:1.5rem;
    font-size: calc(1rem + ((1vw - 4px) * 0));
  }
  .emblem img{
    height:60vh;
  }
}
@media screen and (min-width: 960px) and (max-width: 1279px) {
  label{
    display:none;
  }
  #nav{
    position:fixed;
    margin:auto;
    z-index:99;
    width:100vw;
  }
}
@media screen and (min-width: 1280px) {
  label{
    display:none;
  }
  #nav{
    position:fixed;
    margin:auto;
    z-index:99;
    width:100vw;
  }
}