/* header{height: 90px;} */

header {
    position: fixed;
    display: flex;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid #fff;
    z-index: 10;
  }
  
  header:hover{background: #fff; cursor: pointer;}
  header:hover h1 img.over{display: block;}
  header:hover h1 img.out{display: none;}
  header:hover li.main > a{color: #333;}
  header:hover .gnb{color: #333;}
  
  /* li.main:hover ul.sub{display: block;} */
  
  nav li.main:hover > a{color:rgb(255, 90, 99) ;}

  li.open > a{
    font-weight: 800;
  }
  li.open:hover a{
    color: #333;
  }
  
  h1 img.over {
    display: none;
  }
  
  .header_inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-width: calc(100% - 2rem);
    margin: auto;
    align-items: center;
  }
  
  nav {
    width: 952px;
    display: none;
    /* position: relative; */
  }
  ul.menu {
    display: flex;
  }
  li.main{position: relative;}
  
  
  
  ul.sub{
      position: absolute;
      display: none;
      text-align: center;
      border-radius: 13px;
      background: rgb(255, 90, 99);
      width: 200px;
      padding: 1rem;
      left: 50%;
      top:140%;
      transform: translateX(-50%);
  
  }
  ul.sub a{font-size: 16px;}
  
  nav ul li.main a {
    color: #fff;
    
  }
  nav li.main > a {
      display: block;
      padding: 10px 0;
    color: #fff;
    white-space: nowrap;
    font-weight: bold;
  }
  
  nav > ul{display: flex;}
  .gnb {
    display: flex;
    color: #fff;
    font-weight: bold;
    gap: 1rem;
    padding-left: 16px;
  }

  /* ---------------------mobile-------------------- */

@media screen and (max-width: 521px) {
   
    header {
      height: 60px;
    }
    h1 img {
      height: 25px;
    }
    nav ul {
      flex-direction: column;
    }
  
    /* h1 {
      margin-left: 16px;
    } */
  }
  
  /* ---------------------pc-------------------- */
  @media screen and (min-width: 522px) {
   
    nav > ul li a{font-size: 1.2rem;}
    header {
      height: 100px;
    }
    h1 img {
      height: 40px;
    }
    .header_inner {
      max-width: calc(100% - 6rem);
    }
    nav {
      margin-left: 300px;
    }
    nav > ul {
      flex-direction: row;
      gap: 4rem;
    }
    nav ul li {
      flex: 1;
    }
    nav ul li a {
      font-size: 1.2rem;
    }
  
    li.main{  
      position: relative;
    }
    ul.sub{
        position: absolute;
    }
    
  }
  
  @media screen and (min-width: 1280px) {
    nav {
      display: block;
    }
    
  }