header {
width: 100%;
}
#nav-toggle {
position: fixed;
top: 30px;
right: 50px;
cursor: pointer;
background: #fcce00;
background: linear-gradient(to bottom right,  #fcce00 0%,#e79f00 100%);
width: 68px;
height: 68px;
border-radius: 50%;
}
#nav-toggle > div {
width: 20px;
position: absolute;
top: 40%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-\ transform: translateY(-50%) translateX(-50%);
}
#nav-toggle > div > span.toggle {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #fff;
position: absolute;
transition: top .5s ease, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, top .5s ease;
transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
header.deteal_header #nav-toggle > div > span.toggle {
width: 100%;
height: 2px;
left: 0;
display: block;
background: #fff;
position: absolute;
transition: top .5s ease, -webkit-transform .3s ease-in-out;
transition: transform .3s ease-in-out, top .5s ease;
transition: transform .3s ease-in-out, top .5s ease, -webkit-transform .3s ease-in-out;
}
#nav-toggle span.toggle:nth-child(1) {
top: 0;
}
#nav-toggle span.toggle:nth-child(2) {
}
#nav-toggle span.toggle:nth-child(3) {
top: 10px;
}
.open #nav-toggle span.toggle {
background: #fff;
}
.open #nav-toggle span.toggle:nth-child(1) {
top: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.open #nav-toggle span.toggle:nth-child(2) {
top: 10px;
width: 0;
left: 50%;
}
.open #nav-toggle span.toggle:nth-child(3) {
top: 5px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* z-index */
#nav-toggle {
z-index: 1000;
}
#container {
z-index: 900;
}
#gloval-nav {
background-color: rgba(0, 134, 204, .97);
color: #fff;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 990;
text-align: center;
display: flex;
visibility: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 29px;
opacity: 0;
transition: opacity .3s ease, visibility .3s ease;
}
#gloval-nav h1 {
width: 100%;
max-width: 900px;
text-align: left;
font-size: 26px;
border-bottom: 1px solid #FFF;
}
#gloval-nav h1 span {
font-size: 13px;
padding-left: 10px;
}
#gloval-nav p.h1txt {
font-size: 12px;
text-align: left;
padding: 20px 2em 0;
color: #000;
}
#gloval-nav nav {
display: flex;
width: 100%;
max-width: 900px;
margin: 0 auto;
justify-content: center;
text-align: left;
position: relative;
}
#gloval-nav nav:after {
position: absolute;
bottom: 0;
right: 0;
content: "";
width: 10vw;
height: 11vw;
background-image: url("../img/common/h_logo_line.svg");
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
#gloval-nav ul {
list-style: none;
padding: 20px 4vw;
width: 100%;
}
#gloval-nav ul li {
opacity: 0;
-webkit-transform: translateX(300px);
transform: translateX(300px);
transition: transform .5s ease, opacity .2s ease;
transition-delay: 2s;
}
#gloval-nav a {
font-size: 15px;
display: block;
color: #fff;
text-decoration: none;
padding: 20px 0;
transition: color .3s ease;
}
#gloval-nav a:hover {
color: #000;
}
#gloval-nav ul ul {
width: 100%;
padding: 0 0 0 2em;
}
#gloval-nav ul ul li {
padding: 5px 0;
width: 100%;
position: relative;
}
#gloval-nav ul ul li:before {
position: absolute;
content: "";
top: 50%;
left: -2em;
width: .5em;
height: 2px;
background-color: #FFF;
}
/* open */
.open {
overflow: hidden;
	height: 100vh;
}
.open #gloval-nav {
visibility: visible;
opacity: 1;
}
.open #gloval-nav li {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
transition: opacity .9s ease, -webkit-transform 1s ease;
transition: transform 1s ease, opacity .9s ease;
transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}
@media screen and (max-width: 1200px) {
#gloval-nav h1 {
padding-left: 10px;
}
#gloval-nav nav:after {
right: 40px;
width: 100px;
height: 120px;
}
}
@media screen and (max-width: 768px) {
#nav-toggle {
	right: 20px;
}
#gloval-nav nav {
	padding: 0 3vw;
}
#gloval-nav h1 {
padding-left: 15px;
}
#gloval-nav h1 span {
display: block;
padding-left: 0;
}
#gloval-nav a {
padding: 15px 0;
font-size: .8rem;
}
#gloval-nav ul ul li:before {
left: -1em;
width: .5em;
}
}
@media screen and (max-width: 500px) {
#nav-toggle {
top: 20px;
width: 48px;
height: 48px;
}
}