.top_search {
    height: 100%;
    width: 100%;
    left: 0;
    background: #008CD6;
    top: -100%;
    transition: 0.5s;
}

.top_search.on {
    top: 0
}

.top_wrap {
    height: 100%;
}


.top_input {
    border: 2px solid #FFFFFF;
    width: calc(100% - .4167rem);
    border-radius: .1563rem;
    padding: 0 .1042rem;
    box-sizing: border-box;
}


.top_input input {
    background: none;
    width: calc(100% - .4167rem);
    font-size: .0833rem;
    color: #fff;
    height: .25rem;

}

.top_input img {
    width: .151rem;
    height: .151rem;
}

.top_close {
    width: .4167rem;
    cursor: pointer;
}

.top_close img {
    margin: 0 auto;
    height: .1667rem;
    width: .1667rem;
}


@media(max-width:1200px) {
    .top_close {
        width: 50px;
        height: 28px;
        margin-left: 10px;
    }

    .top_input img,
    .top_close img {
        height: 29px;
        width: 20px;
        margin:0 auto;
        object-fit:scale-down;
    }

    .top_input {
        width: calc(100% - 60px);
        border-radius: 5px;
        height: 36px;
        border: 1px solid #fff;
    }

    .top_input input {
        width: calc(100% - 50px);
        height: 90%;
        font-size: 16px;

    }


}