.nav-bar {
  height     : 108px;
  display    : flex;
  align-items: center;
}

.nav-bar .logo {
  text-align: center;
  width     : 250px;
}

.nav-bar .logo img {
  width: 90%;
}

.nav-bar .links {
  flex           : 1;
  display        : flex;
  justify-content: space-around;
  font-family    : 'MicrosoftYaHei';
  margin         : 0 40px;
}

.nav-bar .links li {
  flex      : 1;
  align-self: center;
}

.nav-bar .links li a {
  position: relative;
  margin  : 5px 0;
}

.nav-bar .links li a:hover {
  color: #1193d5ff;
}

.nav-bar .links .more:hover {
  color: #3399ffff;
}

.nav-bar .links .more .more-des {
  position      : absolute;
  flex-direction: column;
  width         : 88px;
  padding       : 10px;
  box-sizing    : border-box;
  background    : rgba(255, 255, 255, 0.1);
}

.nav-bar .links .more:hover i {
  transition       : all 0.5s ease;
  display          : inline-block;
  transform        : rotate(180deg);
  -ms-transform    : rotate(180deg);
  -moz-transform   : rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform     : rotate(180deg);
}

.nav-bar .search-reg {
  display        : flex;
  justify-content: flex-end;
  width          : 205px;
  align-items    : center;
}

.nav-bar .search-reg .search {
  border       : 1px solid #fff;
  border-radius: 18px;
  padding      : 0 10px;
  width        : 180px;
  height       : 30px;
  display      : flex;
  align-items  : center;
  box-sizing   : border-box;
}

.search input {
  color: #fff;
  width: 100%;
}

.search .search-bar {
  display  : block;
  font-size: 18px;
  width    : 18px;
  height   : 18px;
}

.head-portrait {
  position: relative;
}

.head-portrait:hover .user-links {
  display: block;
}

.head-portrait .img {
  width        : 40px;
  height       : 40px;
  border-radius: 50%;
  overflow     : hidden;
  position     : relative;
  border       : 1px solid #999;
}

.head-portrait .img img {
  position : absolute;
  top      : 50%;
  left     : 50%;
  transform: translate(-50%, -50%);
  height   : 100%;
}

.user-links {
  display    : none;
  position   : absolute;
  width      : 84px;
  top        : 40px;
  left       : 50%;
  transform  : translate(-50%);
  padding    : 10px;
  box-sizing : border-box;
  line-height: 1.5;
  background : rgba(255, 255, 255, 0.8);
  z-index    : 999;
}