.search-main {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.search-main *,.search-main :after,.search-main :before {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
:root {
--be-light: rgba(255, 255, 255, 0);
--be-real: rgba(255, 255, 255, 0.65);    
--be-grey-7: #777;
--be-blue: #4d8cb8;
--be-bg-blue-d: #ddd;
--be-grey-9: #999;
--be-bg-glass-s: rgba(239, 240, 242, 0.8);
--be-bg-white: #fff;
--be-main-width: 1200px;
--be-bg-grey-f1: #eff0f2;
--be-bg-white-b: #fff;
--be-grey-6: #666;
--be-shadow-h: #cc3333;
--be-white: #fff;
}
button,input {
font: 14px "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;
}
.search-menu {
list-style: none
}
.logo:before {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
z-index: 1;
width: 500%;
margin-left: -250%;
filter: blur(5px);
pointer-events: none;
-webkit-animation: logomove 2.5s linear infinite;
animation: logomove 2.5s linear infinite;
background: linear-gradient(to right, var(--be-light) 46%, var(--be-real) 50%, var(--be-light) 54%) 50% 50%
}
@keyframes logomove {
0% {
transform: translate3d(-30%, 0, 0)
}
100% {
transform: translate3d(30%, 0, 0)
}
}
.nav-search {
position: relative;
font-size: 16px;
font-size: 1.6rem;
float: right;
color: var(--be-grey-7);
line-height: 26px;
margin: 0 5px 0 10px;
padding: 0 8px 3px;
cursor: pointer;
z-index: 5
}
.nav-search:hover {
color: var(--be-blue)
}
.off-search {
position: absolute;
top: 30px;
left: 50%;
width: 35px;
height: 35px;
cursor: pointer;
margin: 0 0 0 -17px;
border-radius: 50%;
background: var(--be-bg-blue-d)
}
.off-search:after {
position: absolute;
top: 56%;
left: 49%;
content: "\e6f5";
font-family: be;
font-size: 14px !important;
color: var(--be-white);
margin: -12px 0 0 -7px;
}
.nav-search:after {
content: "\e614";
font-family: be;
font-size: 16px !important;
color: var(--be-grey-7)
}
.nav-search:hover:after {
color: var(--be-blue)
}
@media only screen and (max-width:1025px) {
.nav-search:after {
color: var(--be-grey-9)
}
}
#search-main {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
height: 100%;
text-align: center;
overflow-x: hidden;
display: none;
cursor: pointer;
z-index: 99999;
background: var(--be-bg-glass-s);
-webkit-backdrop-filter: saturate(5) blur(20px);
backdrop-filter: saturate(5) blur(20px)
}

.off-search-a {
background: var(--be-bg-white);
min-height: 15vh
}

.off-search {
animation: fade-in;
-webkit-animation: fade-in;
animation-duration: 1.5s;
-webkit-animation: fade-in 1.5s
}

.search-area {
background: var(--be-bg-white);
width: 100%
}

.search-wrap {
width: var(--be-main-width);
cursor: auto;
margin: 0 auto;
padding: 20px
}

.searchbar {
margin: 10px 0;
position: relative
}

.search-input {
position: relative
}

.search-input input {
float: left;
width: 90%;
height: 37px;
line-height: 37px;
font: 14px "Microsoft YaHei", Helvetica;
padding: 4px 15px;
background: var(--be-bg-grey-f1);
border: 1px solid transparent;
border-radius: 5px 0 0 5px;
-webkit-appearance: none
}

.widget .search-input input {
width: 80%;
border-radius: 5px 0 0 5px
}

.search-input input:focus {
background: var(--be-bg-white);
border: 1px solid var(--be-border-grey-d);
border-right: none
}

.search-wrap .search-input input:focus {
background: var(--be-bg-white);
border: 1px solid #999;
border-right: none !important
}

.search-wrap input.baidu-input:focus {
border: 1px solid #52819c
}

.search-wrap input.bing-input:focus {
border: 1px solid #008272
}

.search-wrap input.input-360:focus {
border: 1px solid #00a496
}

.search-wrap input.sogou-input:focus {
border: 1px solid #fd5607
}

.searchbar button {
overflow: visible;
position: relative;
border: 0;
cursor: pointer;
height: 37px;
width: 10%;
color: var(--be-grey-6);
background: var(--be-bg-blue-d);
margin: 0;
border: none;
border-radius: 0 5px 5px 0
}

.widget .searchbar button {
width: 20%;
border-radius: 0 5px 5px 0
}

.searchbar button:hover {
opacity: .8
}

.searchbar button .cx {
font-size: 18px !important
}

.searchbar button .be {
font-size: 15px !important
}

@media screen and (max-width:768px) {
.searchbar button {
width: 20%
}

.search-input input {
width: 80%
}
}

.search-nav {
margin: 20px auto 0
}

.search-menu a {
float: left;
color: var(--be-grey-9);
line-height: 30px;
margin: 0 2px 2px 0;
padding: 2px 10px;
border-radius: 5px
}

.search-menu a:hover {
background: var(--be-shadow-h);
color: var(--be-white)
}

.choose {
display: none
}

@media screen and (max-width:1025px) {
.search-wrap {
width: 98%
}
}

.search-tabs {
float: left;
width: 100%
}

.search-tabs .search-item span {
float: left;
cursor: pointer;
margin: 0 2px 0 0;
padding: 4px 10px;
border-radius: 5px
}
.search-baidu button, .search-item.searchbaidu.active span {
    background: #52819c;
}
.search-bing button, .search-item.searchbing.active span {
    background: #008272;
}
.search-sogou button, .search-item.searchsogou.active span {
    background: #db500f;
}
.search-360 button, .search-item.search360.active span {
    background: #00a496;
}
.active{
    color: #fff;
}
.search-baidu button {
background: #52819c
}
.search-bing button {
background: #008272
}
.search-360 button {
background: #00a496
}
.search-sogou button {
background: #db500f
}
.tab-search button {
color: var(--be-white)
}