@charset "UTF-8";

  header {
    display: flex;
    flex-direction: column-reverse;
  }
  header h1 {
    padding: 30px 0 25px;
    width: 50%;
    margin: 0 auto;
  }

  header .header-wrapper {
    width: 100%;
    font-size: var(--hd-font);
    display: flex;
    position: relative;
  }
  header .header-wrapper .lang-pc {
    display: block;
    padding: 5px 20px 0;
  }
  header .btn-wrapper {
    font-size: var(--hd-font);
    display: block;
    position: relative;
  }
  header .btn-wrapper .book-btn {
    padding: 5px 20px 0;
    animation: none;
    cursor: url(../images/book-cursor-02.svg) 15 5, auto;
  }
  header .btn-wrapper .menu-btn {
    display: none;
  }
  header .menu-wrapper {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  header .menu-wrapper .menu-close-btn {
    display: none;
  }
  header .menu-wrapper .lang {
    display: none;
  }
  header .menu-wrapper .global-menu {
    display: flex;
  }
  header .menu-wrapper .global-menu > li:first-child {
    display: none;
  }
  header .menu-wrapper .global-menu > li {
    min-width: 170px;
  }
  header .menu-wrapper .global-menu > li > a {
    display: block;
    padding: 5px 12.5px 0;
  }
  header .menu-wrapper .global-menu ul {
    display: none;
  }
  header .menu-wrapper .global-menu > li > a:hover {
    color: var(--point-color-green);
  }
  header .menu-wrapper .global-menu > li > ul > li > a:hover {
    color: var(--point-color-green);
  }

  /* book active */
  header .book-wrapper.active {
    flex-direction: row;
  }
  header .book-wrapper.active .live-box li:nth-child(2):hover,
  header .book-wrapper.active .live-box li:nth-child(3):hover,
  header .book-wrapper.active .live-box li:nth-child(4):hover {
    background-color: var(--main-color);
    color: var(--bg-color-yellow);
  }
  header .book-wrapper.active .work-box li:nth-child(2):hover,
  header .book-wrapper.active .work-box li:nth-child(3):hover {
    background-color: var(--main-color);
    color: var(--bg-color-yellow);
  }

  /* scroll */
  header.scroll {
    height: 57px;
  }
  header.scroll h1 {
    width: 42%;
  }
  header.scroll h1 img {
    padding-top: 30px;
  }
  header.scroll .header-wrapper {
    padding-bottom: 15px;
  }
  header.scroll .header-wrapper .lang-pc:hover {
    color: var(--point-color-green);
  }
  header.scroll .btn-wrapper .book-btn {
    display: block;
    height: 57px;
    width: 136px;
    animation: bookAni 4s infinite;
    cursor: url(../images/book-cursor-02.svg) 15 5, auto;
  }
  header.scroll .btn-wrapper .book-btn::after {
    content: "!";
  }
  header.scroll .menu-wrapper {
    display: none;
  }

  /* active */
  header .menu-wrapper .global-menu ul.active {
    font-size: 1.25rem;
    font-weight: 900;
    display: flex;
    position: absolute;
    top: 40px;
    left: 12%;
  }
  header .menu-wrapper .global-menu ul.active li {
    position: relative;
  }
  header .menu-wrapper .global-menu ul.active li::after {
    content: "";
    background-color: #000;
    width: 2px;
    height: 60%;
    position: absolute;
    top: 3px;
    right: 0;
  }
  header .menu-wrapper .global-menu ul.active li:last-child::after {
    display: none;
  }
  header .menu-wrapper .global-menu ul.active li a {
    padding: 4px 10px 0;
  }

  @keyframes bookAni {
    0% {
      background-color: #5370d7;
      color: white;
    }
    33.333% {
      background-color: var(--point-color-lightGreen);
      color: white;
    }
    66.367% {
      background-color: white;
      color: var(--point-color-green);
    }
    100% {
      background-color: #5370d7;
      color: white;
    }
  }