.nav-tgl {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  z-index: 100;
  right: 30px;
  top: 20px;
  width: 48px;
  height: 48px;
  border: none;
  padding: 0;
  background: transparent;
  line-height: 0.6;
  text-align: center;
}
.nav-tgl > span {
  display: inline-block;
  position: absolute;
  top:50%;left:50%;
  vertical-align: middle;
  transform: translate(-50%,-50%);
  width: 27px;
  height: 24px;
  margin-top: -1px;
  margin-left: -1px;
/*   background: url(/pc/include/img/layout/ham-menu.png) no-repeat center center; */
/*   background-size: 27px 24px; */
}
.nav-tgl > span:before, .nav-tgl > span:after {
  display: none;
  position: absolute;
  content: "";
  height: 2px;
  background: #293335;
  transition: all 200ms;
}
.nav-tgl > span:before {
  top: -11px;
  left: 3px;
  width: 28px;
}
.nav-tgl > span:after {
  top: 11px;
  left: 6px;
  width: 22px;
}
/* .nav-tgl > span.toggled{  background: url(/pc/include/img/icon/icon-close.png) no-repeat center center !important;} */
.nav-tgl:focus {
  outline: none;
}

.nav-tgl > span .ham-menu-img{display:block}
.nav-tgl > span .ham-menu-close-img{display:none;}
.nav-tgl > span.toggled .ham-menu-img{display:none}
.nav-tgl > span.toggled .ham-menu-close-img{display:block;}


.nav-tgl:hover > span:after, .nav-tgl:hover > span:before {
  width: 34px;
  left: 0;
}
.nav-tgl.toggled > span {
/*   height: 0; */
}
.nav-tgl.toggled > span:after, .nav-tgl.toggled > span:before {
  top: 0px;
  left: 0;
  width: 34px;
}
.nav-tgl.toggled > span:after {
  transform: rotate(-45deg);
}
.nav-tgl.toggled > span:before {
  transform: rotate(45deg);
}
.nav:before {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  content: '';
  width: 100vw;
  height: 100vh;
  background: #001a2f;
  transition: all 800ms ease-in-out;
  clip-path:circle(20px at calc(100% - 66px) 42px);
  visibility: hidden;
  min-width: 1200px;
}
.nav{
	min-width: 1200px;
	position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* background: linear-gradient(-135deg, #c850c0, #4158d0); */
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
    /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    /* clip-path: circle(25px at calc(0% + 45px) 45px); */
    background: #000;
    clip-path: circle(0px at calc(100% - 66px) 44px);
    transition: all 0.8s ease-in-out;
}
.nav.active{
/*     z-index: 999999; */
/* 	opacity:1; */
	visibility: visible !important;
	clip-path: circle(100%);
}
.nav.active:before {
	visibility: visible !important;
	clip-path: circle(100%);
}

.nav.active ul{
	opacity:1;
	visibility: visible;
}
.header-wrap .header-box{height: 90px;}

.nav ul {
  /* transform: scale(0); */
  /* transition: all 1000ms cubic-bezier(0.945, 0.045, 0.355, 1); */
  opacity: 0;
  visibility: hidden;
  /* transition: visibility 0.9s, opacity 0.9s ease-in-out; */
  /* position: absolute; */
  /* left: 100px; */
  /* display:block; */
  /* z-index: 0; */
  /* position: fixed; */
  /* top: -60px; */
}

.nav.active ul li a:hover{/*  transform:translate3d(20px,0,0); */}
.header-wrap .header-box{width:auto;}
.header-wrap .header-box .header-logo img{width:auto;}
.header-wrap .header-box .header-logo{z-index:9;}

.header-wrap{border-bottom:none;}

#header-logo .logo-toggled {
	color:#000;
	transition:color 1s ease-in-out;
}