.header {
  height: 56px;
  background:#222c25;;
  box-shadow:0 2px 5px rgba(0,0,0,0.2);
  padding: 15px 20px;
  width:100vw;
  position:fixed;
  top:0;
  left:0;
  z-index:9;}

.header button {
  background:transparent;
  border:none;
  width:30px;
  height:20px;
  cursor:pointer; 
  outline:0;}

.tg span {
  width:100%;
  height:3px;
  background:#fff;
  display:block;
  position:relative;
  cursor: pointer;;}

.tg span:before,
.tg span:after {
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:100%;
  background:#fff;
  transition: all 0.3s ease-out;}

.tg span:before {top:-8px;}
.tg span:after {top:8px;}


.sidebar {
  z-index: 5;
  background:#ffffff6e;
  width:235px;
  position:fixed;
  top:0;
  left:0px;
  height:100%;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  padding-top:76px;
  transition:all 0.3s ease-out;}

.sidebar ul {list-style:none; padding-left: 15px;}
.sidebar ul li {display:block;}

.sidebar ul li a {
  padding:8px 0px;
  font-size:16px;
  color:#4c554c;
  text-decoration:none;
  display:block;
  position:relative;
  z-index:1;
  transition:all 0.3s ease-out;
  font-weight:500;}

.sidebar ul li a:before {
  content:'';
  position:absolute;
  bottom:0;
  left:0%;
  right:50%;
  width:0;
  height:1px;
  background:#e6cd45;
  z-index:-1;
  transition:all 0.3s ease-in-out;}

.sidebar ul li a:hover:before {width:75%;}
.sidebar ul li a:hover { font-size: larger;}

.sidebarshow {left:-235px;}
.contents{margin-left: 235px;
  transition: ease-in-out 0.5s;
}
.contentsshow{margin-left: 0px;}

.ul1{height: 120px;}
.logo{
width: 220px;
height: 150px;
background-image: url(../img/usm_logo_2022.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: block;
}

@media screen and (max-width:1024px) {.sidebar{height: fit-content; background-color: #fff;} .logo{display: none;}
.contents{margin-left: 0px;}
.sidebar {left:-235px;}.sidebarshow {left:0px;}}