.menu {
    border-bottom: 1px solid #f2f2f2;
    height: 60px;
    display: flex;
    margin: 0 20px;
}

.menu-left {
    font-size: 20px;
    line-height: 60px;
    text-align: center;
}

.menu-center {
    line-height: 60px;
    display: flex;
    justify-content: center;
}

.menu-center .menu-item {

    font-size: 16px;
    color: #000;
    text-align: center;
    padding-right: 34px;
    padding-left: 34px;
    text-decoration: none;
}


.menu-center .menu-item:hover {
    color: #0077df;
}

.menu-right {
    line-height: 60px;
    justify-content: center;
}

.menu-search {
    position: relative;
    color: #000;
    z-index: 1
}

.search-icon {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    left: 18px;
    width: 20px;
    height: 20px;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgc3Ryb2tlPSIjMDAwIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii42Ij48cGF0aCBkPSJNOC45MzYgMy40MDhjMS41MjIgMCAyLjkuNjE4IDMuODk2IDEuNjE2YTUuNTAzIDUuNTAzIDAgMDExLjYxNSAzLjkwMSA1LjUwMyA1LjUwMyAwIDAxLTEuNjE1IDMuOTAxIDUuNDkgNS40OSAwIDAxLTMuODk2IDEuNjE2IDUuNDkgNS40OSAwIDAxLTMuODk2LTEuNjE2IDUuNTAzIDUuNTAzIDAgMDEtMS42MTUtMy45YzAtMS41MjQuNjE3LTIuOTAzIDEuNjE1LTMuOTAyYTUuNDkgNS40OSAwIDAxMy44OTYtMS42MTZ6IiBzdHJva2Utd2lkdGg9IjEuMDcxIi8+PHBhdGggc3Ryb2tlLXdpZHRoPSIxLjM3MSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTMuMzAyIDEzLjI5NmwzLjEyNyAzLjEzMyIvPjwvZz48L3N2Zz4=) no-repeat;
}

.search-input {
    width: 152px;
    height: 30px;
    background: #f2f2f2;
    border-radius: 18px;
    border: 1px solid #f2f2f2;
    padding: 0 43px;
    color: #000;
    font-size: 14px;
    overflow: hidden;
    outline: none;
    -webkit-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

.search-input:hover {
    border-color: #0077df;
}

.search-input:focus {
    border-color: #0077df;
}

.clear-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -9px;
    cursor: pointer;
    width: 18px;
    height: 18px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAARtJREFUOBHNkzFvwkAMhVNoWSpYEZXoxNqtIwsszPzSTl3p0pGtP6ESEowgpg7wviM+vUShypgnvdjnsy079hVF1/Bwp6An2d/EqTgqfY6Sv+KP+FfasmhK9KLbuficvarKWcdvcefmvh+kk2QlDmp2P3I3Ew/iKS56oUjSDpW0Bb7EJHgi/om386nz/uaWvujYAvgSk+CJXsNYynfJL5EEcCNiczCMhMdQJIemo47FhUiyi7gUsTliooVX5A6uk6Rpuu5TScSeOKIdKqEyWsPmyDFeEcvm2OoQ7dASOjZHjvGSGeVa9Ml5UF1nMT/EtOVeEQY2ti3wzU+lvtlsKhs7Ee9tN5UwycoT8dZ0lxGPlt2Ktfj30ebIzihX7V8uDsDLxoIAAAAASUVORK5CYII=) no-repeat;
}

.clear-icon-hide {
    opacity: 0;
}
body{
    font-family: 'Roboto', Arial, "PingFang SC", "微软雅黑", sans-serif;
}