.left-menu{
   position: fixed;
   z-index: 100;
   display: none;
}
.left-menu-space{
   position: fixed;
   height: 100%;
   width: 100%;
   top: 0;
   left: 0;
   background-color: #6f6f6f6c;
   overflow: hidden;
}
.left-menu-nav{
   animation: showmenu 0.5s;
   z-index: 200;
   position: fixed;
   top: 0;
   left: 0;
   background-color:#282828;
   width: 200px;
   height: 100%;
}
.left-menu-nav img{
   display: flex;
   padding: 15px;
   margin: auto;
}
.nav-button-left{
   padding: 10px;
   display: flex;
   align-items: center;
   color: white;
   cursor: pointer;
   transition: background-color 0.3s ease;
}
.nav-icon-left,.nav-detail-left{
   padding: 5px;
}
.nav-button{
   cursor: pointer;
   border-radius: 10px;
   align-items: center;
}
.title-and-line{
   color: white;
   display: flex;
}
.title-line{
   height: 2px;
   margin: auto;
   border-radius: 10px;
}
.title-and-line .left{
   background-image: linear-gradient(to right,#00000000,#de4040);
}
.title-and-line .right{
   background-image: linear-gradient(to right,#de4040,#00000000);
}
::-webkit-scrollbar{
   width: 8px;
}
::-webkit-scrollbar-track{
   background-color: #000000;
}
::-webkit-scrollbar-track-piece{
   background-color: #383838;
   box-shadow: inset 0 0 10px #000000; 
   border-radius: 10px;
}
::-webkit-scrollbar-thumb{
   background: #8c8c8c; 
   border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover{
   background: #ab3333;
   cursor: pointer;
   transition: all 0.3s;
}
.nav-button:hover,.nav-button-left:hover{
   background-color: #de4040;
}
.nav-button:active,.nav-button-left:active{
   background-color: #b22828;
}
@media screen and (min-width:900px) { /* pc */
   .title-line{width: 40%;}
   .logo{
      color: white;
      display: flex;
      margin-left: 15px;
   }
   .logo-button{
      margin: auto;
      margin-left: 15px;
      cursor: pointer;
   }
   .mobile{display: none;}
   nav{
      display: flex;
      background-color: #282828;
      padding: 10px;
   }
   .nav-bar{
      display: flex;
      margin-left: auto;
      margin-right: 15px;
      overflow: hidden;
   }
   .nav-button{
      opacity: 0;
      display: flex;
      margin-left: 17px;
      margin-right: 17px;
      color: white;
      padding: 10px;
      animation: normal-menu 1s forwards;
      transition: background-color 0.3s ease;
   }
   .nav-icon{margin-right: 5px;}
   .left-menu-nav{width: 300px;}
}
@media screen and (max-width:900px){ /* mobile */
   .title-line{width: 33%;}
   header{width: 100%;}
   .logo{
      color: white;
      display: flex;
      margin-left: 10px;
      width: 140px;
   }
   .logo-button{
      margin: auto;
      margin-left: 10px;
      cursor: pointer;
      font-size: 14px;
   }
   .logo-button img{
      height: 20px;
   }
   .nav-button{
      border-radius: 0px;
   }
   .normal .nav-button{
      display: none;
   }
   nav{
      display: block;
      background-color: #282828;
      padding: 10px;
   }
   .nav-bar{
      display: flex;
      width: 100%;
   }
   .mobile{
      z-index: 100;
      position: fixed;
      bottom: 0;
      width: 100%;
      margin: 0;
      padding: 0;
   }
   .mobile .nav-button{
      display: flex;
      flex-direction: column;
      color: white;
      padding: 10px;
      width: 100%;
      transition: background-color 0.3s ease;
   }
   .nav-detail{
      font-size: 10px;
      margin: auto;
   }
   .nav-icon{
      margin: auto;
      padding: 2px;
   }
}