.navbar{width:100%;height:80px;line-height:80px;display:flex;align-items:center;position:fixed;z-index:999;background-color:rgba(0,0,0,.3)}
.navbar img{width:80px}
.navbar ul{display:flex;float:right}
.navbar ul li{margin-left:32px}
.navbar font,.navbar ul li,.navbar a{color:#fff}
li.navbar-this a{color: #c00!important}
.navbar span{margin-left:100px}
.navbar font{cursor:pointer;font-size:14px;margin:0 5px}
.hamburger{display:none}
.bar{display:block;width:25px;height:2px;margin:6px auto;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;background-color:#fff!important}

@media only screen and (max-width:768px){
.navbar{height:50px;background-color:rgba(0,0,0,.7)}
.navbar ul{width:100%;position:fixed;top:50px;left:-100%;flex-direction:column;background-color:rgba(0,0,0,.7);text-align:center;transition:.3s}
.navbar ul.active{position:fixed;left:0}
.navbar ul li{width:40%;height:50px;line-height:50px;border-bottom:1px rgba(255, 255, 255, 0.2) solid;margin:0 auto}
.hamburger{display:block;position:fixed;right:20px;top:9px;cursor:pointer}
.hamburger.active .bar:nth-child(2){opacity:0}
.hamburger.active .bar:nth-child(1){-webkit-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg)}
.hamburger.active .bar:nth-child(3){-webkit-transform:translateY(-8px) rotate(-45deg);transform:translateY(-8px) rotate(-45deg)}
}
@media only screen and (max-width:768px){
.navbar img{width:50px}
.navbar span{margin-left:0}
.navbar .layui-container{margin:inherit}
}