/**********************************************************
                        header
***********************************************************/
.header{
  z-index: 99;
  position: fixed;
  top:0;
  left:0;
  background: var(--col-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  width: 100%;
  border-radius:0 0 30px 0;
  padding:0 60px;
}

.header h1 a{ color: #fff; font-weight:bold; }

.header-logo{
  width: 80px;
}

.header-info{
  color:#fff;
  font-size:14px;
  display: flex;
}

.logout{
  display:inline-block;
  margin-left:40px;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
}

a.logout { color: #fff; }

/* nav-toggle */
.nav-toggle{
  display:none;
}

/**********************************************************
                      responsive
***********************************************************/
@media screen and (max-width: 1023px) {
  .header{
    height:48px;
    justify-content:center;
  }

  .header-logo{
    width: 66px;
  }

  .header-info{
    display:none;
  }
  /* nav-toggle */
  .nav-toggle{
    cursor: pointer;
    display:block;
    position:absolute;
    top:12px;
    left:20px;
    width:24px;
    height:24px;
    transition: 0.3s;
  }

  .nav-toggle span{
    position:absolute;
    top:6px;
    display: inline-block;
    border-radius:4px;
    width:20px;
    height:2px;
    background: #fff;
    transition: 0.3s;
    transition-delay: 0.2s;
  }

  .nav-toggle span:nth-of-type(2){
    top:12px;
  }

  .nav-toggle span:nth-of-type(3){
    top:18px;
  }

  /* nav-toggle.active */
  .nav-toggle.active{
    left:calc(100% - 40px);
  }

  .nav-toggle.active span{
    top:12px;
    transform: rotate(45deg);
  }

  .nav-toggle.active span:nth-of-type(2){
    opacity:0;
    transform: rotate(90deg);
  }

  .nav-toggle.active span:nth-of-type(3){
    transform: rotate(135deg);
  }

}
@media screen and (max-width: 799px) {
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 499px) {
}
@media screen and (max-width: 399px) {
}