header{
position: fixed;
top: 0;
left: 0;
height: 80px;
width: 100%;
color: #000000;
background: #ffffff;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
z-index: 99;
}
header .logo{
position: relative;
float: left;
margin: 15px 0;
height: 50px;
}
header .logo img{
height: 100%;
}
header .nav-list{
position: relative;
float: right;
}
header .nav-list .nav {
position: relative;
float: left;
height: 30px;
margin: 25px 0;
line-height: 30px;
margin-right: 25px;
transition: .3s;
color: #000000;
text-decoration: none;
}
header .nav-list .nav:hover {
font-weight: 500;
}
header .nav-list .nav .subnav-list {
position: absolute;
float: left;
width: 150%;
background: #ffffff;
color: var(--primary-color);
padding: 0px;
border-radius: 3px;
overflow: hidden;
}
header .nav-list .nav .subnav-list .subnav {
position: relative;
float: left;
width: calc(100% - 5px);
height: 0;
padding: 0;
font-size: 14px;
font-weight: 400;
line-height: 15px;
margin-left: 0px;
z-index: 1;
color: var(--primary-color);
transition: .3s;
}
header .nav-list .nav:hover .subnav-list {
padding: 5px;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}
header .nav-list .nav:hover .subnav-list .subnav {
height: auto;
padding: 5px 0;
display: block;
}
header .nav-list .nav .subnav-list .subnav:after {
content: '';
position: absolute;
float: left;
top: 0;
left: -5px;
width: 0px;
height: 100%;
background: var(--primary-color-0);
z-index: -1;
transition: .5s;
}
header .nav-list .nav .subnav-list .subnav:hover:after{
background: var(--primary-color-100);
width: 3px;
}
header .nav-list .nav .subnav-list .subnav:hover {
font-weight: 500;
margin-left: 5px;
}
header .nav-list .nav a{
color: #ffffff;
text-decoration: none;
}
#nav-mobile .nav-list .nav,
#nav-mobile .nav-list .nav a {
position: relative;
float: left;
color: currentColor;
text-decoration: none;
}

#menu-mobile,
#nav-mobile {
display: none
}

@media (max-width: 768px) {
header .nav-list{
display: none;
}
#menu-mobile,
#nav-mobile {
display: block
}
#menu-mobile {
position: relative;
float: right;
width: 40px;
height: 25px;
margin: 27.5px 0;
}
#menu-mobile .bar{
position: absolute;
width: 40px;
height: 4px;
border-radius: 50px;
background: currentColor;
}
#menu-mobile.show .bar-1,
#menu-mobile.show .bar-2,
#menu-mobile.show .bar-3{
width: 0px;
}
#menu-mobile .bar-1 {
margin-top: 0;
transition: .2s;
}
#menu-mobile .bar-2 {
margin-top: 10px;
transition: .4s;
}
#menu-mobile .bar-3 {
margin-top: 20px;
transition: .6s;
}
#menu-mobile .bar-4,
#menu-mobile .bar-5{
left: 50%;
top: 50%;
width: 0;
transition-duration: .3s;
transition-delay: 0s;
}
#menu-mobile.show .bar-4,
#menu-mobile.show .bar-5{
width: 40px;
transition-duration: .3s;
transition-delay: .6s;
}
#menu-mobile .bar-4 {
transform: translate(-50%, -50%) rotate(45deg);
}
#menu-mobile .bar-5 {
transform: translate(-50%, -50%) rotate(-45deg);
}
#nav-mobile {
position: fixed;
width: 100%;
top: -100%;
margin-top: 0px;
padding: 0;
z-index: 98;
transition: .6s;
transition-delay: .6s;
}
#nav-mobile.show {
top: 0;
margin-top: 80px;
transition-duration: .3s;
transition-delay: 0s;
}
#nav-mobile .content{
padding: 20px 5%;
background: #ffffff;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
z-index: 2;
}
#nav-mobile .close-menu {
position: fixed;
float: left;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
z-index: 1;
transition: .3s;
opacity: 0;
pointer-events: none; 
}
#nav-mobile.show .close-menu {
opacity: .3;
pointer-events: all; 
}
#nav-mobile .nav-list {
width: 100%;
}
#nav-mobile .nav-list .nav {
width: 100%;
margin-bottom: 15px;
left: -100%;
transition: .3s;
}
#nav-mobile.show .nav-list .nav{
position: relative;
float: left;
left: 0;
margin-bottom: 5px;
}
#nav-mobile.show .nav-list .nav.subnav {
position: relative;
float: left;
width: calc(100% - 10px);
margin-bottom: 0;
margin-left: 10px;
font-size: 15px;
}
#nav-mobile.show .nav-list .nav.subnav:after {
content: '';
position: absolute;
float: left;
top: 0;
left: -7px;
width: 3px;
height: 100%;
background: var(--secondary-color-100);
z-index: -1;
transition: .5s;
}
#nav-mobile.show .nav-list .nav:nth-child(1) {
transition-delay: .3s;
}
#nav-mobile.show .nav-list .nav:nth-child(2) {
transition-delay: .4s;
}
#nav-mobile.show .nav-list .nav:nth-child(3) {
transition-delay: .5s;
}
#nav-mobile.show .nav-list .nav:nth-child(4) {
transition-delay: .6s;
}
#nav-mobile.show .nav-list .nav:nth-child(5) {
transition-delay: .7s;
}
#nav-mobile.show .nav-list .nav:nth-child(6) {
transition-delay: .8s;
}
#nav-mobile.show .nav-list .nav:nth-child(7) {
transition-delay: .9s;
}
#nav-mobile.show .nav-list .nav:nth-child(8) {
transition-delay: 1s;
}
#nav-mobile.show .nav-list .nav:nth-child(9) {
transition-delay: 1.1s;
}

}