InnovationLab/public/css/page/_searchPage.scss

.search {
    opacity: 0;
    visibility: hidden;
    position: relative;
    background: url(../images/searchPage/search-bg.jpg) repeat center top/50% auto;
    padding-bottom: 104px;
    img {
        width: 100%;
        height: auto;
        image-rendering: pixelated;
        image-rendering: -webkit-optimize-contrast;
    }
    &__kv {
        position: absolute;
        top: 0;
        width: 100%;
        height: 667px;
        height: calc(var(--vh, 1vh) * 100);
        overflow-x: auto;
        overflow-y: hidden;
        &__container {
            height: 667px;
            position: relative;
            overflow: hidden;
        }
        &__bg {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
            &__img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/bg.jpg) no-repeat;
                background-position: 49.1% -60px;
                background-size: 827%;
            }
        }
        &__bottom{
            background: url(../images/searchPage/search-bg.jpg) repeat-x center top/contain;
            position: absolute;
            top: 480px;
            left: 0;
            width: 100%;
            height: 100%;
        }
        &__title {
            position: absolute;
            left: 51%;
            transform: translateX(-50%);
            top: 75px;
            display: inline-block;
            width: auto;
            height: 113px;
            z-index: 3;
            img {
                width: auto;
                height: 100%;
            }
        }
        &__table {
            position: absolute;
            top: 438px;
            left: 0;
            width: 100%;
            height: 187px;
            background: url(../images/searchPage/kv-table.png) repeat-x left top;
            background-size: auto 100%;
            z-index: 1;
        }
        &__slides {
            position: absolute;
            top: 0;
            left: 0;
            width: auto;
            height: 100%;
            overflow: hidden;
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            padding: 202px 75px 0;
            transform-origin: 0 50%;
        }
        &__slide {
            position: relative;
            font-size: 0;
            height: 260px;
            width: 250px;
            z-index: 2;
        }
        &__ordinary {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 100%;
                img {
                    height: 100%;
                    width: auto;
                }
            }
        &__light {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            bottom: -9vh;
            left: 50%;
            transform: translateX(-50%);
            width: 65vh;
            height: 64vh;
            background: url(https://d1xzlli46wohoc.cloudfront.net/images/indexPage/index-light.png) no-repeat center center/100% auto;
        }
        &__basket {
            display: block;
            position: absolute;
            bottom: -36px;
            left: 50%;
            transform: translateX(-50%);
            height: 110px;
            img {
                width: auto;
                height: 100%;
            }
        }
        &__dishes {
            position: sticky;
            top: 506px;
            left: 0;
            width: 100%;
            height: 82px;
            z-index: 2;
            // background: url(../images/searchPage/kv-dish.png) no-repeat 50% center/contain;
        }
        &__dish {
            display: block;
            opacity: 0;
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            color: $blue;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            @include em(20);
            font-weight: 900;
            text-align: center;
            padding: 15px 35px;
            line-height: 1.3;
            span {
                display: block;
                width: 100%;
                text-align: center;
                font-size: 0.8em;
                font-weight: 700;
            }
            &:hover {
                color: $blue;
                text-decoration: none;
            }
        }
    }
    &__form {
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        &__title {
            width: 288px;
            margin-bottom: 30px;
        }
        &__box {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }
        &__name {
            width: 110px;
            margin-bottom: 15px;
        }
        &__list {
            width: 100%;
            display: flex;
            flex-wrap: nowrap;
            padding-left: 30px;
            padding-bottom: 15px;
            margin-bottom: 10px;
            overflow-x: auto;
            &::after {
                content: "";
                display: block;
                flex: 0 0 20px;
                width: 20px;
                height: 30px;
            }
        }
        &__item {
            margin-right: 10px;
            padding-bottom: 15px;
            display: inline-block;
            padding: 5px 18px 6px;
            border-radius: 30px;
            border: 1px solid $blue;
            color: $blue;
            margin-bottom: 0;
            line-height: 1;
            white-space: nowrap;
            &:last-child {
                margin-right: 0;
            }
            &.active {
                background-color: rgba(#fff,0.8);
            }
        }
        &__btn {
            text-align: center;
            width: 100%;
            padding: 0 24px;
        }
        &__cta {
            display: block;
            text-align: center;
            width: 100%;
            padding: 12px;
            margin-bottom: 25px;
            background-color: $blue;
            border-radius: 100px;
            color: #FFEFBE;
            @include em(18);
            &:not([href]) {
                color: #FFEFBE;
                &:hover {
                    color: #FFEFBE;
                }
            }
            &:hover {
                color: #FFEFBE;
            }
        }
        &__clear {
            color: #6F6F6F;
            text-decoration: underline;
            &:not([href]) {
                color: #6F6F6F;
                text-decoration: underline;
            }
        }
    }
    &__result {
        padding: 0 20px;
        &__box {
            background: url(../images/searchPage/result-bg.png) no-repeat center top/100% auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            width: 335px;
            height: 469px;
            margin: 0 auto;
            padding: 35px 50px 27px;
        }
        &__title {
            width: 165px;
            margin-bottom: 20px;
        }
        &__list {
            width: 100%;
            padding-left: 0;
            list-style: none;
            text-align: center;
        }
        &__item {
            width: 100%;
            padding-left: 0;
            list-style: none;
            a {
                width: 100%;
                text-align: center;
                @include em(18);
                display: block;
                padding: 15px 0;
                color: $blue;
                font-weight: 700;
                border-bottom: 0.5px dashed rgba($blue,0.6);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                &:hover {
                    text-decoration: none;
                }
            }
            &:last-child {
                a {
                    border-bottom: none;
                }
            }
        }
        &__pagination {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            padding-left: 0;
            list-style: none;
            margin-bottom: 37px;
        }
        &__pageitem {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-left: 0;
            list-style: none;
            width: 32px;
            height: 32px;
            margin: 4px;
            background-color: #fff;
            border-radius: 4px;
            border: 1px #DFE3E8 solid;
            color: #212B36;
            font-weight: 700;
            img {
                width: 8px;
                height: 10px;
            }
            &.active {
                border: 1px $blue solid;
            }
            &.disabled {
                pointer-events: none;
                background-color: rgba($blue,0.5);
            }
        }
    }
    .backCelebrity {
        display: block;
        text-align: center;
        img {
            display: inline-block;
            width: 200px;
            height: auto;
        }
    }
    .goTop {
        position: absolute;
        right: 25px;
        bottom: 25px;
        background-color: transparent;
        border: none;
        box-shadow: none;
        width: 50px;
        padding: 0;
        &:focus,&focus-visible {
            outline: none;
        }
    }
}

@media screen and (max-height:570px) {
   .search {
       &__kv {
           height: 550px;
           &__container {
               height: 550px;
           }
           &__title {
               height: 95px;
           }
           &__dishes {
               top: 400px;
           }
           &__dish {
               @include em(17);
           }
           &__table {
               top: 357px;
               height: 127px;
           }
           &__slides {
               padding: 170px 75px 0;
           }
           &__slide {
               height: 210px;
               width: 220px;
           }
           &__basket {
               height: 85px;
           }
       }
   }
}