.clearfix {
  clear: both;
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

.fl {
  float: left; }

.fr {
  float: right; }

.container {
  width: 1200px;
  margin: 0 auto; }

.w1080 {
  width: 1080px;
  margin: 0 auto; }

.head-wrapper {
  position: relative;
  z-index: 10;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  box-shadow: 0 5px 10px rgba(0, 41, 76, 0.1);
  font-size: 14px;
  line-height: 40px;
  box-sizing: border-box; }
  .head-wrapper .left a {
    margin-right: 15px;
    color: #666; }
    .head-wrapper .left a i {
      position: relative;
      top: 3px;
      font-size: 20px;
      margin-right: 5px;
      color: #08f; }
    .head-wrapper .left a:hover {
      color: #08f; }
  .head-wrapper .right {
    font-size: 0; }
    .head-wrapper .right .login, .head-wrapper .right .register, .head-wrapper .right .service {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
      line-height: 40px;
      margin-left: 15px;
      color: #666; }
      .head-wrapper .right .login:hover, .head-wrapper .right .register:hover, .head-wrapper .right .service:hover {
        color: #08f; }
    .head-wrapper .right .user-box {
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      font-size: 0;
      height: 40px;
      position: relative; }
      .head-wrapper .right .user-box:hover img {
        transform: scale(1.4, 1.4);
        top: 20px; }
      .head-wrapper .right .user-box:hover .user {
        display: block;
        opacity: 1; }
      .head-wrapper .right .user-box img {
        transition: all .3s linear;
        position: relative;
        top: 0;
        z-index: 10;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        margin-top: 3px; }
      .head-wrapper .right .user-box .user {
        transition: all .3s linear;
        display: none;
        opacity: 0;
        position: absolute;
        z-index: 8;
        top: 40px;
        left: -104px;
        width: 240px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 5px 30px 5px #eee; }
        .head-wrapper .right .user-box .user .user-content {
          box-sizing: border-box;
          padding: 15px 15px 5px; }
        .head-wrapper .right .user-box .user .user-name {
          display: block;
          font-size: 14px;
          line-height: 34px;
          text-align: center;
          margin-top: 10px;
          color: #333;
          font-weight: bold; }
          .head-wrapper .right .user-box .user .user-name:hover {
            color: #08f; }
        .head-wrapper .right .user-box .user .user-list {
          border-top: 1px solid #eee;
          padding: 5px 0; }
          .head-wrapper .right .user-box .user .user-list a {
            float: left;
            font-size: 0;
            width: 50%; }
            .head-wrapper .right .user-box .user .user-list a i, .head-wrapper .right .user-box .user .user-list a span {
              display: inline-block;
              vertical-align: middle;
              color: #666;
              font-size: 14px;
              line-height: 30px; }
            .head-wrapper .right .user-box .user .user-list a i {
              margin-right: 5px;
              width: 16px;
              text-align: center;
              color: #999; }
            .head-wrapper .right .user-box .user .user-list a:hover {
              color: #08f; }
              .head-wrapper .right .user-box .user .user-list a:hover i, .head-wrapper .right .user-box .user .user-list a:hover span {
                color: #08f; }
        .head-wrapper .right .user-box .user .exit {
          display: block;
          background: #f4f8fb;
          text-align: center;
          border-top: 1px solid #eee;
          color: #666;
          font-size: 14px;
          line-height: 32px; }