.search {
    &_popup {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       background-color: var(--main-600);
       z-index: 100;
       padding-top: 70px;
       padding-bottom: 100px;
       opacity: 0;
       backdrop-filter: blur(10px);
       transform: translateY(calc(-100% - 80px));
       transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
       transition-delay: 0.5s;
       z-index: 9999;
       &.search-opened {
          opacity: 1;
          transform: translateY(0);
          transition-delay: 0s;
          .search_form {
             .search_input {
                transform: translateY(0px);
                opacity: 1;
                transition-delay: 0.3s;
                &::after {
                   width: 100%;
                   transition-delay: 0.5s;
                }
             }
          }
       }
    }
    &_wrapper {
       .search_top {
          margin-bottom: 80px;
          .search_logo {
            max-width: 210px;
             a {
                display: block;
                & img {
                    filter: brightness(0) invert(1);
                }
             }
          }
          .search_close {
             .search_close_btn {
                font-size: 25px;
                color: hsl(var(--white));
                transition: all 0.3s ease-in-out 0s;
                svg {
                   width: 30px;
                   height: 30px;
                }
                &:hover {
                    color: var(--main-two-600);
                    transform: rotate(90deg);
                }
             }
          }
       }
       .search_form {
          .search_input {
             position: relative;
             height: 80px;
             transform: translateY(-40px);
             transition: all 0.3s ease-in-out;
             transition-delay: 0.5s;
             opacity: 0;
             &::after {
                position: absolute;
                content: "";
                left: 0;
                bottom: 0;
                width: 0%;
                height: 1px;
                background-color: rgba(255, 255, 255, 0.3);
                transition-delay: 0.3s;
                transition: all 0.3s ease-in-out;
             }
             input {
               width: 100%;
               height: 100% !important;
               background-color: transparent !important;
               border: 0 !important;
               border-bottom-width: 0px;
               border-bottom-style: none;
               border-bottom-color: currentcolor;
               outline: 0;
               font-size: 20px;
               border-bottom: 1px solid hsl(var(--white)) !important;
               padding: 0 !important;
               padding-right: 0px;
               padding-right: 30px !important;
               color: hsl(var(--white)) !important;
                &::placeholder {
                   font-size: 24px;
                   color: var(--tj-color-common-white) !important;
                }
 
                & ~ .search-focus-border {
                   position: absolute;
                   bottom: 0;
                   left: auto;
                   right: 0;
                   width: 0;
                   height: 1px;
                   background-color: var(--tj-color-common-black);
                   transition: all 0.5s;
                }
 
                &:focus ~ .search-focus-border {
                   width: 100%;
                   left: 0;
                   right: auto;
                   transition: all 0.5s;
                }
             }
             button {
               position: absolute;
               top: 50%;
               right: 0;
               transform: translateY(-50%);
               font-size: 18px;
               color: hsl(var(--white));
             }
          }
       }
    }
 }
 .search-popup-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px);
    z-index: 99;
    opacity: 0.7;
    cursor: zoom-out;
    transform: translateY(calc(-100% - 80px));
    transition: all 0.5s ease-in-out 0s;
    transition-delay: 0.3s;
    &.search-popup-overlay-open {
       transform: translateY(0);
    }
 }