* {
    font-family: 'Noto Sans KR', sans-serif;
    font-family: 'Poppins', sans-serif;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
  }
  
  h4 {
      font-size: 24px;
      font-weight: 700;
  }
  :root {
      /* Color */
      --white-color: #fff;
      --black-color: #1e1e1e;
      --red-color: #FF5B54;
      --grey-dark-color: #424242;
      --grey-light-color: #e0e0e0;
  
      /* font-size */
      --font-caption1: 14px;
      --font-caption2: 12px;
  }
  
  a {
      text-decoration: none;
  }
  
  
  
  /* header part */
    
    header .top_menu {
      display: flex;
      justify-content: space-between;
    }
    
    header .inspiration {
      padding: 16px;
    }
    
    header .inspiration a {
      color: var(--black-color);
      font-size: 24px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s;
    }
    
    header .inspiration a:hover {
      color: var(--red-color);
    }
    
    header .title_EG {
      padding: 16px;
    }
    
    header .title_EG a {
      color: var(--black-color);
      font-size: 24px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease-in;
    }
    
    header .title_EG a:hover {
      color: var(--red-color);
    }
    
    header .menu_button {
      font-size: 24px;
      color: var(--red-color);
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease-in;
      padding: 16px;
      cursor: pointer;
      background-color: transparent;
      border: none;
      outline: none;
    }
    
    header .menu_button:hover {
      color: var(--black-color);
    }
    
    .top_menu_react_header .top_menu_react {
      display: none;
    }
    
    .top_menu_react_header .top_menu_react .menu_button_react {
      padding: 16px 16px;
      position: absolute;
      top: 0px;
      right: 0px;
      border: none;
      background-color: transparent;
    }
    
    .top_menu_react_header .title_react {
      padding: 16px;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    
    .top_menu_react_header .title_react a {
      font-size: 21px;
      color: var(--black-color);
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease-in;
    }
    
    .top_menu_react_header .menu_button_react {
      font-size: 21px;
      color: var(--red-color);
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease-in;
      cursor: pointer;
    }
    
    .top_menu_react_header .title_react a:hover {
      color: var(--red-color);
    }
    
    .top_menu_react_header .menu_button_react:hover {
      color: var(--black-color);
    }
    
    /* btn_menu_container */
    
    .btn_menu_container {
      display: flex;
      visibility: hidden;
      justify-content: center;
      position: fixed;
      width: 100vw;
      height: 100vh;
      align-items: center;
      background-color: var(--white-color);
      opacity: 0;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 9999;
    }
    
    .btn_menu_container.open {
      opacity: 1;
      visibility: visible;
    }
    
    .top_menu_react {
      display: none;
    }
    
    .btn_menu_container nav ul {
      text-decoration: none;
      list-style: none;
      text-align: center;
      margin-bottom: 80px;
    }
    
    .btn_menu_container nav .contact_description {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .btn_menu_container nav .contact_description .contact_mailandcall a {
      color: var(--black-color);
      font-size: 21px;
      transition: all 0.2s ease-in;
    }
    
    .btn_menu_container nav ul a {
      color: var(--black-color);
      font-size: 140px;
      line-height: 140px;
      font-weight: 700;
      text-align: center;
      transition: all 0.2s ease-in;
    }
    
    .btn_menu_container nav ul a:hover {
      color: var(--red-color);
    }
    
    .btn_menu_container nav .contact_description .contact_mailandcall a:hover {
      color: var(--red-color);
    }
    
    .btn_menu_container nav .contact_description .language {
      margin-top: 20px;
    }
  
    .btn_menu_container nav .contact_description .language span a {
      font-size: 20px;
      color: var(--black-color);
      padding: 4px;
      transition: all 0.2s ease-in;
      font-weight: 400;
    }
  
    .btn_menu_container nav .contact_description .language span a:hover {
      color: var(--red-color);
    }

    
    /* btn menu container react */
    .btn_menu_container_react {
      display: none;
    }
    
    
  /* works section */
  
  /* worksanddemenu */
  .worksandmenu {
      margin: 120px 180px;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }
  
  .worksandmenu #works_title {
      font-size: 72px;
      color: var(--black-color);
  }
  
  .worksandmenu .titleandcategory {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 60px;
  }
  
  .worksandmenu .titleandcategory .category_title {
      font-size: 20px;
      font-weight: 700;
      padding: 12px 16px 12px 0px;
  }
  
  .worksandmenu .titleandcategory #works_filter {
      display: flex;
      flex-direction: row;
      align-items: center;
      list-style: none;
      gap: 16px;
  }
  
  .hide {
    display: none;
  }
  
  .filter-btn.clicked {
    background-color: var(--black-color);
    color: var(--white-color)
  }
  
  
  /* works section */
  
  /* common */
  .works_container {
      margin: 0px 180px;
  }
  
  .worksandmenu .titleandcategory #filter-buttons {
      display: flex;
      flex-direction: row;
      gap: 12px;
  }
  
  .worksandmenu .titleandcategory #filter-buttons .filter-btn {
    background-color: transparent;
    color: var(--black-color);
    border: 1px solid var(--black-color);
    border-radius: 20px;
    font-size: 18px;
    padding: 12px 20px;
    transition: all 0.2s ease-in;
    cursor: pointer;
  }
  
  .worksandmenu .titleandcategory #filter-buttons .filter-btn:hover {
    background-color: var(--black-color);
    color: var(--white-color);
  }
  
  .img-wrapper {
      display: inline-block;
      max-width: 100%;
      box-sizing: border-box;
      text-align: center;
  }
  
  .img-wrapper a img {
      max-width: 100%;
      transition: all 0.4s ease-in;
  }
  
  .img-wrapper a img:hover {
      opacity: 80%;
  }
  
  .works_title {
      font-size: 18px;
      margin-bottom: 12px;
      font-family: noto sans kr;
      letter-spacing: -0.04em;
      line-height: 160%;
      font-weight: 700;
  }
  
  /* firstline */
  
  .works_container .works_firstline {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 80px;
  }
  
  /* second line */
  .works_container .works_secondline {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 80px;
  }
  
  .works_container .works_thirdline {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 80px;
  }

  .works_container .works_fourthline {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
  }
  
  .works_container .works_fourthline  .works_fourthline_right {
    visibility: hidden;
  }
  
  
  
  
  /* Footer */
  
  .footer_container .footer_wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 0px 180px;
      padding: 24px 0px;
  }
  
  .footer_container .footer_wrap .footer_title a {
      font-size: 20px;
      color: var(--black-color);
      text-decoration: none;
      transition: all 0.4s ease-in;
  }
  
  .footer_container .footer_wrap .footer_title a:hover {
      color: var(--red-color);
  }
  
  .footer_container .footer_wrap .footer_menu_wrap {
      display: flex;
      flex-direction: row;
      color: var(--black-color);
      align-items: center;
  }
  
  .footer_container .footer_wrap .footer_menu_wrap .footer_menu {
      color: var(--black-white);
      margin-left: 48px;
      margin-right: 16px;
  }
  .footer_container .footer_wrap .footer_menu_wrap .footer_menu_li {
      display: flex;
      flex-direction: row;
      list-style: none;
      align-items: center;
      margin-bottom: 0px;
      padding-left: 16px;
  }
  .footer_container .footer_wrap .footer_menu_wrap .footer_menu_li a {
      padding: 0px 16px;
      color: var(--black-color);
      text-decoration: none;
  }
  
  .footer_container .footer_wrap .footer_contact a {
      display: flex;
      flex-direction: row;
      color: var(--black-color);
      text-decoration: none;
      transition: all 0.4s ease-in;
  }
  
  .footer_container .footer_wrap .footer_contact a:hover {
      color: var(--red-color);
  }
  
  /* Mediaqueary */
  
  @media screen and (max-width: 1024px) {
  
      /* header */
  
      header .top_menu {
          display: none;
      }
    
      .top_menu_react_header .top_menu_react {
          display: flex;
          justify-content: space-between;
          margin-bottom: 60px;
      }
    
    
    
      .btn_menu_container_react {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        position: fixed;
        visibility: hidden;
        background-color: var(--white-color);
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        z-index: 9999;
      }
      
      .btn_menu_container_react.openreact {
        opacity: 1;
        visibility: visible;
      }
      
      .btn_menu_container_react nav ul {
        text-decoration: none;
        list-style: none;
        text-align: center;
        margin-bottom: 40px;
      }
      
      .btn_menu_container_react nav ul a {
        color: var(--black-color);
        font-weight: 700;
        font-size: 120px;
        line-height: 120px;
        transition: all 0.2s ease-in;
      }
      
      .btn_menu_container_react nav ul a:hover {
        color: var(--red-color);
      }
      
      .btn_menu_container_react nav .contact_description {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .btn_menu_container_react nav .contact_description .contact_mailandcall a {
        color: var(--black-color);
        font-size: 20px;
        transition: all 0.2s ease-in;
      }
        
      .btn_menu_container_react nav .contact_description .contact_mailandcall a:hover {
        color: var(--red-color);
      }

      .btn_menu_container_react nav .contact_description .language span a {
        color: var(--black-color);
        transition: all 0.2s ease-in;
        padding: 4px;
      }
      
      .btn_menu_container_react nav .contact_description .language span a:hover {
        color: var(--red-color);
      }
    
  
      .works #works_section_title_text {
          font-size: 34px;
          display: flex;
          justify-content: center;
          margin: 0px auto 20px auto;
      }
      
      /* worksandmenu section */
      .worksandmenu {
          margin: 120px 20px 40px 20px;
      }
  
      .worksandmenu #works_title {
          font-size: 42px;
      }
  
      .worksandmenu .titleandcategory {
          display: flex;
          flex-direction: row;
          gap: 40px;
      }
  
      .worksandmenu .titleandcategory #works_filter {
          display: flex;
          flex-direction: row;
      }
  
      .worksandmenu .titleandcategory #works_filter .button_value {
          padding: 8px 20px;
      }
  
      .works_container {
          margin: 0px 20px;
      }
  
  
      /* footer */
  
      .footer_container .footer_wrap {
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding: 40px 0px;
          margin: 0px;
      }
  
      .footer_container .footer_wrap .footer_menu_wrap {
          display: flex;
          flex-direction: column;
          margin: auto;
      }
  
      .footer_container .footer_wrap .footer_title a{
          font-size: 32px;
      }
  
      .footer_container .footer_wrap .footer_menu_wrap .footer_menu_li {
          display: flex;
          flex-direction: column;
          padding: 0px;
          margin-bottom: 12px;
      }
  
      .footer_container .footer_wrap .footer_menu_wrap .footer_menu_li a {
          font-size: 20px;
      }
  
      .footer_container .footer_wrap .footer_menu_wrap .footer_menu {
          margin: 0px;
          font-size: 24px;
          padding: 12px 0px;
      }
  
      .footer_container .footer_wrap .footer_contact {
          font-size: 18px;
      }
  }
  
  @media screen and (max-width: 768px) {
  
      .btn_menu_container_react nav ul a {
          font-size: 80px;
          line-height: 80px;
        }
      
        .btn_menu_container_react nav .contact_description .contact_mailandcall a {
          font-size: 18px;
        }
  
      .intro_banner_section #intro_banner_title_typeit {
          font-size: 32px;
          line-height: 44px;
      }
  
      .works_container {
          display: flex;
          flex-direction: column;
      }
  
      .works_container .works_firstline {
          display: flex;
          flex-direction: column;
          margin-bottom: 40px;
          gap: 40px;
      }
  
      .works_container .works_secondline {
          display: flex;
          flex-direction: column;
          gap: 40px;
      }
  
      .works_container .works_thirdline {
        display: flex;
        flex-direction: column;
        gap: 40px;
        margin-bottom: 40px;
    }

    .works_container .works_fourthline {
      display: flex;
      flex-direction: column;
      gap: 40px;
      /* margin-bottom: 40px; */
  }
  
      .worksandmenu .titleandcategory {
          display: flex;
          flex-direction: column;
          gap: 12px;
          align-items: normal;
      }
  
      .worksandmenu .titleandcategory .category_title {
          margin-bottom: none;
      }
  }