@charset "UTF-8";
@keyframes breath {
  from {
    box-shadow: 0px 0px 0px 0px #eeeeee; }
  /* 动画开始时的不透明度 */
  50% {
    box-shadow: 1px 2px 3px 3px #eeeeee; }
  /* 动画50% 时的不透明度 */
  to {
    box-shadow: 3px 3px 5px 5px #eeeeee; }
  /* 动画结束时的不透明度 */ }

.lbsyun-g-footer {
  padding: 0 !important; }
  .lbsyun-g-footer .main-footer .footer-box li a:hover {
    text-decoration: none !important; }
  .lbsyun-g-footer .main-footer .footer-box li a:link {
    text-decoration: none !important; }

.content-size {
  position: relative;
  width: 1200px;
  margin: 0 auto; }

.head {
  width: 100%;
  background: #050000; }
  .head .header-bg {
    margin: 0 auto;
    height: 420px;
    background: #050000 url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/header-banner.jpg") no-repeat center;
    background-size: 2000px 420px;
    overflow: hidden; }
    .head .header-bg .header-title {
      margin-top: 142px;
      font-size: 42px;
      color: #FFF;
      letter-spacing: 2px;
      text-align: center;
      font-family: themePageTitleFont;
      font-weight: 500;
      line-height: 48px; }
    .head .header-bg .header-p {
      margin-top: 18px;
      font-size: 16px;
      color: #FFF;
      letter-spacing: 0;
      text-align: center;
      font-family: themePageTitleFont;
      line-height: 20px; }
    .head .header-bg .header-use {
      display: block;
      margin: 28px auto 0;
      width: 258px;
      height: 22px;
      background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/navigationhead.png") no-repeat center;
      background-size: 100% 100%; }

.content {
  width: 100%;
  margin: 0; }
  .content .top {
    height: 458px;
    overflow: hidden; }
    .content .top .top-title {
      margin: 80px auto 0;
      width: 304px;
      height: 34px;
      background: url("//mapopen-website-wiki.cdn.bcebos.com/products/navigation/baidu-navigation.png") no-repeat center;
      background-size: 100% 100%; }
    .content .top .navigation-title {
      margin: 276px auto 0;
      width: 199px;
      height: 34px;
      background: url("//mapopen-website-wiki.cdn.bcebos.com/products/navigation/navigation-ways.png") no-repeat center;
      background-size: 100% 100%; }
    .content .top .top-box {
      position: relative;
      margin-top: 68px; }
      .content .top .top-box li {
        float: left;
        width: 290px;
        height: 80px;
        border-right: 1px solid #E8E8E8; }
        .content .top .top-box li i {
          display: block;
          margin: -28px auto 0;
          width: 70px;
          height: 70px;
          background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/navigation-top.png") no-repeat center;
          background-size: 210px 70px; }
        .content .top .top-box li .top-icon1 {
          background-position: -140px -0px; }
        .content .top .top-box li .top-icon2 {
          background-position: -0px -0px; }
        .content .top .top-box li .top-icon3 {
          background-position: -70px -0px; }
        .content .top .top-box li p {
          margin-top: 15px;
          font-size: 12px;
          color: #666666;
          letter-spacing: 0;
          line-height: 20px;
          text-align: center; }
        .content .top .top-box li .top-content {
          font-size: 18px;
          color: #666666;
          letter-spacing: 0;
          text-align: center;
          line-height: 18px;
          margin-top: 20px; }
        .content .top .top-box li .top-content-txt {
          font-size: 12px;
          color: #666666;
          letter-spacing: 0;
          text-align: center;
          line-height: 18px;
          margin-top: 10px; }
      .content .top .top-box .box1 {
        margin-left: 163px; }
      .content .top .top-box .box3 {
        border-right: none; }
  .content .middle-driving {
    height: 420px;
    background: #1d212f; }
    .content .middle-driving .middle-bg {
      height: 420px;
      background: #1d212f url("https://mapopen-website-wiki.cdn.bcebos.com/products/traffic/header-banner2.jpg") no-repeat center;
      background-size: 2000px 420px; }
      .content .middle-driving .middle-bg .num-list {
        position: relative;
        width: 1200px;
        height: 420px; }
        .content .middle-driving .middle-bg .num-list .middle-right {
          width: 233px;
          height: 380px;
          position: absolute;
          top: 16px;
          left: 250px; }
          .content .middle-driving .middle-bg .num-list .middle-right .inner-ios .driving-result {
            position: absolute;
            top: 15px;
            left: 7px;
            padding-top: 30px;
            height: 359px;
            width: 219px;
            background: url("https://mapopen-website-wiki.cdn.bcebos.com/products%2Fnavigation%2Ftruck-nav.png") no-repeat center #fff;
            background-size: 219px 390px;
            overflow: hidden; }
          .content .middle-driving .middle-bg .num-list .middle-right .inner-ios .ios-phone {
            position: absolute;
            width: 233px;
            height: 404px;
            z-index: 30; }
        .content .middle-driving .middle-bg .num-list .middle-left {
          position: absolute;
          top: 80px;
          left: 590px; }
          .content .middle-driving .middle-bg .num-list .middle-left .correct-choose {
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0;
            width: 540px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            position: relative;
            margin-bottom: 50px; }
            .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .moving-correct {
              cursor: pointer;
              position: absolute;
              left: 160px;
              width: 159px;
              height: 40px;
              border: 1px solid #999;
              border-right: none; }
            .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .truck-correct {
              cursor: pointer;
              position: absolute;
              width: 159px;
              height: 40px;
              border: 1px solid #999;
              border-radius: 5px 0 0 5px;
              border-right: none; }
            .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .middle-correct {
              cursor: pointer;
              position: absolute;
              left: 320px;
              width: 159px;
              height: 40px;
              border: 1px solid #999; }
            .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .stop-correct {
              cursor: pointer;
              width: 162px;
              height: 40px;
              border: 1px solid #999;
              border-radius: 0 5px 5px 0;
              position: absolute;
              left: 480px; }
            .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .middle-correct:hover, .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .stop-correct:hover, .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .moving-correct:hover, .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .truck-correct:hover {
              background: rgba(245, 83, 61, 0.2);
              border-color: #FF4E40;
              color: #FF4E40;
              z-index: 999; }
            .content .middle-driving .middle-bg .num-list .middle-left .correct-choose .selected {
              color: #FF4E40;
              border: 1px solid #FF4E40;
              z-index: 999;
              background: rgba(245, 83, 61, 0.2); }
          .content .middle-driving .middle-bg .num-list .middle-left .driving-title {
            position: relative;
            background-image: linear-gradient(0deg, #4B9BDF 0%, #A4D6FF 100%);
            border-radius: 5px;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
            width: 120px;
            height: 30px;
            cursor: default; }
            .content .middle-driving .middle-bg .num-list .middle-left .driving-title .driving-content {
              position: absolute;
              top: 1px;
              left: 40px;
              font-family: PingFangSC-thin; }
            .content .middle-driving .middle-bg .num-list .middle-left .driving-title .driving-icon {
              display: inline-block;
              width: 30px;
              height: 30px;
              position: absolute;
              top: 0;
              left: 5px;
              background: url("https://mapopen-website-wiki.bj.bcebos.com/products/navigation/ways-icon.png") no-repeat 0px 0px;
              background-size: 90px 30px; }
          .content .middle-driving .middle-bg .num-list .middle-left .middle-content {
            width: 200px;
            height: 30px;
            background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/direction/truck-txt.png") no-repeat center;
            background-size: 100% 100%;
            line-height: 30px;
            margin-top: 20px;
            margin-bottom: 6px; }
          .content .middle-driving .middle-bg .num-list .middle-left .middle-content-txt {
            font-family: PingFangSC-thin;
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 22px; }
          .content .middle-driving .middle-bg .num-list .middle-left .poiMore {
            display: none;
            position: absolute;
            top: 230px;
            left: 95px;
            width: 200px;
            height: 34px;
            font-size: 12px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            margin-left: -95px;
            text-decoration: none; }
            .content .middle-driving .middle-bg .num-list .middle-left .poiMore a {
              display: block;
              float: left;
              margin-right: 5px;
              width: 75px;
              height: 34px;
              font-size: 12px;
              color: #8890A4;
              letter-spacing: 0;
              text-align: center;
              line-height: 34px;
              border: 1px solid #8890A4;
              border-radius: 100px;
              text-decoration: none;
              animation: action_scale .3s linear forwards; }
            .content .middle-driving .middle-bg .num-list .middle-left .poiMore a:hover {
              color: #ff4d35;
              text-decoration: none;
              background: rgba(245, 83, 61, 0.1);
              border-color: #ff4d35; }
          .content .middle-driving .middle-bg .num-list .middle-left .poi-more {
            position: absolute;
            top: 230px;
            left: 80px;
            width: 158px;
            height: 34px;
            font-size: 14px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            margin-left: -80px;
            border: 1px solid #8890A4;
            border-radius: 100px;
            text-decoration: none; }
          .content .middle-driving .middle-bg .num-list .middle-left .poiMore2:hover .poi-more {
            display: none; }
          .content .middle-driving .middle-bg .num-list .middle-left .poiMore2:hover .poiMore {
            display: block; }
  .content .middle-riding {
    height: 420px;
    background: #f9fbfb; }
    .content .middle-riding .middle-bg {
      height: 420px;
      background: #f9fbfb url("https://mapopen-website-wiki.cdn.bcebos.com/products/traffic/header-banner4.jpg") no-repeat center;
      background-size: 2000px 420px; }
      .content .middle-riding .middle-bg .num-list {
        position: relative;
        width: 1200px;
        height: 420px; }
        .content .middle-riding .middle-bg .num-list .middle-right {
          width: 622px;
          height: 420px;
          position: absolute;
          top: 0px;
          left: 558px;
          background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/navigation-riding.png") no-repeat center;
          background-size: 622px 421px; }
        .content .middle-riding .middle-bg .num-list .middle-left {
          position: absolute;
          left: 120px;
          top: 125px; }
          .content .middle-riding .middle-bg .num-list .middle-left .riding-title {
            position: relative;
            background-image: linear-gradient(0deg, #7C8AE8 0%, #A4AFF7 100%);
            border-radius: 5px;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
            width: 120px;
            height: 30px;
            cursor: default; }
            .content .middle-riding .middle-bg .num-list .middle-left .riding-title .riding-content {
              font-family: PingFangSC-thin;
              position: absolute;
              top: 1px;
              left: 40px; }
            .content .middle-riding .middle-bg .num-list .middle-left .riding-title .riding-icon {
              display: inline-block;
              width: 30px;
              height: 30px;
              position: absolute;
              top: 0;
              left: 5px;
              background: url("https://mapopen-website-wiki.bj.bcebos.com/products/navigation/ways-icon.png") no-repeat -30px 0px;
              background-size: 90px 30px; }
          .content .middle-riding .middle-bg .num-list .middle-left .middle-content {
            width: 285px;
            height: 30px;
            background: url("//mapopen-website-wiki.cdn.bcebos.com/products/navigation/riding-txt.png") no-repeat center;
            background-size: 100% 100%;
            line-height: 30px;
            margin-top: 20px;
            margin-bottom: 6px; }
          .content .middle-riding .middle-bg .num-list .middle-left .middle-content-txt {
            font-family: PingFangSC-thin;
            font-size: 14px;
            color: #666666;
            letter-spacing: 0;
            text-align: center;
            line-height: 18px; }
          .content .middle-riding .middle-bg .num-list .middle-left .poiMore {
            display: none;
            position: absolute;
            top: 133px;
            left: 95px;
            width: 200px;
            height: 34px;
            font-size: 12px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            margin-left: -95px;
            text-decoration: none; }
            .content .middle-riding .middle-bg .num-list .middle-left .poiMore a {
              display: block;
              float: left;
              margin-right: 5px;
              width: 75px;
              height: 34px;
              font-size: 12px;
              color: #8890A4;
              letter-spacing: 0;
              text-align: center;
              line-height: 34px;
              border: 1px solid #8890A4;
              border-radius: 100px;
              text-decoration: none;
              animation: action_scale .3s linear forwards; }
            .content .middle-riding .middle-bg .num-list .middle-left .poiMore a:hover {
              color: #ff4d35;
              text-decoration: none;
              background: rgba(245, 83, 61, 0.1);
              border-color: #ff4d35; }
          .content .middle-riding .middle-bg .num-list .middle-left .poi-more {
            position: absolute;
            top: 133px;
            left: 80px;
            width: 158px;
            height: 34px;
            font-size: 14px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            margin-left: -80px;
            border: 1px solid #8890A4;
            border-radius: 100px;
            text-decoration: none; }
          .content .middle-riding .middle-bg .num-list .middle-left .poiMore2:hover .poi-more {
            display: none; }
          .content .middle-riding .middle-bg .num-list .middle-left .poiMore2:hover .poiMore {
            display: block; }
  .content .middle-walking {
    height: 420px;
    background: #61646d; }
    .content .middle-walking .middle-bg {
      height: 420px;
      background: #4A4C58 url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/header-banner3.jpg") no-repeat center;
      background-size: 2000px 420px; }
      .content .middle-walking .middle-bg .num-list {
        position: relative;
        width: 1200px;
        height: 420px; }
        .content .middle-walking .middle-bg .num-list .middle-right {
          width: 233px;
          height: 380px;
          position: absolute;
          top: 16px;
          left: 250px; }
          .content .middle-walking .middle-bg .num-list .middle-right .inner-ios .walking-result {
            position: absolute;
            top: 13px;
            left: 9px;
            height: 365px;
            width: 215px;
            background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/walking1.GIF") no-repeat center;
            background-size: 215px 383px;
            overflow: hidden; }
          .content .middle-walking .middle-bg .num-list .middle-right .inner-ios .ios-phone {
            position: absolute;
            width: 233px;
            height: 379px;
            z-index: 30; }
        .content .middle-walking .middle-bg .num-list .middle-left {
          position: absolute;
          top: 125px;
          left: 590px; }
          .content .middle-walking .middle-bg .num-list .middle-left .walking-title {
            position: relative;
            background-image: linear-gradient(0deg, #51BDBB 0%, #7FEAE8 100%);
            border-radius: 5px;
            font-size: 16px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            line-height: 30px;
            width: 120px;
            height: 30px;
            cursor: default; }
            .content .middle-walking .middle-bg .num-list .middle-left .walking-title .walking-content {
              font-family: PingFangSC-thin;
              position: absolute;
              top: 1px;
              left: 40px; }
            .content .middle-walking .middle-bg .num-list .middle-left .walking-title .walking-icon {
              display: inline-block;
              width: 30px;
              height: 30px;
              position: absolute;
              top: 0;
              left: 5px;
              background: url("https://mapopen-website-wiki.bj.bcebos.com/products/navigation/ways-icon.png") no-repeat -60px 0px;
              background-size: 90px 30px; }
          .content .middle-walking .middle-bg .num-list .middle-left .middle-content {
            width: 167px;
            height: 30px;
            background: url(//mapopen-website-wiki.cdn.bcebos.com/products/navigation/walking-txt.png) no-repeat center;
            background-size: 100% 100%;
            line-height: 30px;
            margin-top: 20px; }
          .content .middle-walking .middle-bg .num-list .middle-left .middle-content-txt {
            font-family: PingFangSC-thin;
            font-size: 14px;
            color: #FFFFFF;
            letter-spacing: 0;
            line-height: 22px; }
          .content .middle-walking .middle-bg .num-list .middle-left .poiMore {
            display: none;
            position: absolute;
            top: 164px;
            left: 95px;
            width: 200px;
            height: 34px;
            font-size: 12px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            margin-left: -95px;
            text-decoration: none; }
            .content .middle-walking .middle-bg .num-list .middle-left .poiMore a {
              display: block;
              float: left;
              margin-right: 5px;
              width: 75px;
              height: 34px;
              font-size: 12px;
              color: #8890A4;
              letter-spacing: 0;
              text-align: center;
              line-height: 34px;
              border: 1px solid #8890A4;
              border-radius: 100px;
              text-decoration: none;
              animation: action_scale .3s linear forwards; }
            .content .middle-walking .middle-bg .num-list .middle-left .poiMore a:hover {
              color: #ff4d35;
              text-decoration: none;
              background: rgba(245, 83, 61, 0.1);
              border-color: #ff4d35; }
          .content .middle-walking .middle-bg .num-list .middle-left .poi-more {
            position: absolute;
            top: 164px;
            left: 80px;
            width: 158px;
            height: 34px;
            font-size: 14px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            margin-left: -80px;
            border: 1px solid #8890A4;
            border-radius: 100px;
            text-decoration: none; }
          .content .middle-walking .middle-bg .num-list .middle-left .poiMore2:hover .poi-more {
            display: none; }
          .content .middle-walking .middle-bg .num-list .middle-left .poiMore2:hover .poiMore {
            display: block; }
  .content .more {
    height: 542px; }
    .content .more .more-title {
      margin: 80px auto 30px;
      width: 136px;
      height: 34px;
      background: url("//mapopen-website-wiki.cdn.bcebos.com/products%2Flocation-more.png") no-repeat center;
      background-size: 136px 34px; }
    .content .more li {
      float: left;
      width: 260px;
      height: 410px;
      margin-left: 40px;
      border-radius: 5px; }
      .content .more li i {
        margin: 20px auto 0;
        display: block;
        width: 220px;
        height: 220px;
        background: red;
        background: url("//mapopen-website-wiki.cdn.bcebos.com/products/navigation/navigation-more.png") no-repeat center;
        background-size: 880px 220px; }
      .content .more li .more-icon1 {
        background-position: -440px -0px; }
      .content .more li .more-icon2 {
        background-position: -660px -0px; }
      .content .more li .more-icon3 {
        background-position: -0px -0px; }
      .content .more li .more-icon4 {
        background-position: -220px -0px; }
      .content .more li .more-top {
        display: block;
        margin: 10px auto 0;
        font-size: 18px;
        color: #333333;
        letter-spacing: 0;
        text-align: center;
        line-height: 18px; }
      .content .more li .more-content {
        margin: 10px auto 10px;
        width: 200px;
        height: 60px;
        font-size: 14px;
        color: #999999;
        letter-spacing: 0;
        text-align: center;
        line-height: 20px; }
      .content .more li a {
        display: none; }
      .content .more li .checkMore {
        display: none; }
      .content .more li a {
        display: none; }
      .content .more li .poiMore2 {
        position: relative; }
        .content .more li .poiMore2 .poiMore {
          display: none;
          position: absolute;
          top: 406px;
          left: 95px;
          width: 200px;
          height: 34px;
          font-size: 12px;
          color: #8890A4;
          letter-spacing: 0;
          text-align: center;
          line-height: 34px;
          margin-left: -95px;
          text-decoration: none; }
          .content .more li .poiMore2 .poiMore a {
            display: block;
            float: left;
            margin-right: 5px;
            width: 75px;
            height: 34px;
            font-size: 12px;
            color: #8890A4;
            letter-spacing: 0;
            text-align: center;
            line-height: 34px;
            border: 1px solid #8890A4;
            border-radius: 100px;
            text-decoration: none;
            animation: action_scale .3s linear forwards; }
          .content .more li .poiMore2 .poiMore a:hover {
            color: #ff4d35;
            text-decoration: none;
            background: rgba(245, 83, 61, 0.1);
            border-color: #ff4d35; }
        .content .more li .poiMore2 .poi-more {
          position: absolute;
          top: 406px;
          left: 80px;
          width: 158px;
          height: 34px;
          font-size: 14px;
          color: #8890A4;
          letter-spacing: 0;
          text-align: center;
          line-height: 34px;
          margin-left: -80px;
          border: 1px solid #8890A4;
          border-radius: 100px;
          text-decoration: none; }
      .content .more li .poiMore2:hover .poi-more {
        display: none; }
      .content .more li .poiMore2:hover .poiMore {
        display: block; }
    .content .more .more-box1 {
      margin-left: 165px; }
    .content .more .more-select {
      animation: breath .6s linear forwards;
      box-shadow: 3px 3px 5px 5px #eeeeee; }
      .content .more .more-select .checkMore {
        margin: 10px auto 20px;
        display: block;
        width: 178px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #8890A4;
        letter-spacing: 0;
        text-align: center;
        border: 1px solid #8890A4;
        border-radius: 100px;
        text-decoration: none;
        cursor: pointer; }
      .content .more .more-select .checkMore:hover {
        background: rgba(245, 83, 61, 0.1);
        border: 1px solid #F5533D; }
      .content .more .more-select a {
        display: none; }
      .content .more .more-select a.allSelect {
        display: inline-block;
        width: 58px;
        height: 32px;
        font-size: 14px;
        color: #8890A4;
        letter-spacing: 0;
        text-align: center;
        line-height: 32px;
        border: 1px solid #8890A4;
        border-radius: 100px;
        text-decoration: none;
        animation: action_scale .3s linear forwards; }
      .content .more .more-select .aFirst {
        margin-left: 34px; }
      .content .more .more-select a:hover {
        color: #F5533D;
        border: 1px solid #F5533D;
        background: rgba(245, 83, 61, 0.1); }
      .content .more .more-select .more-box1 {
        margin-left: 135px; }
      .content .more .more-select .poiMore2 .poiMore {
        position: absolute;
        top: -2px;
        left: 145px;
        width: 200px;
        height: 34px;
        font-size: 12px;
        color: #8890A4;
        letter-spacing: 0;
        text-align: center;
        line-height: 34px;
        margin-left: -95px;
        text-decoration: none;
        display: none; }
        .content .more .more-select .poiMore2 .poiMore a {
          display: block;
          float: left;
          margin-right: 5px;
          width: 75px;
          height: 34px;
          font-size: 12px;
          color: #8890A4;
          letter-spacing: 0;
          text-align: center;
          line-height: 34px;
          border: 1px solid #8890A4;
          border-radius: 100px;
          text-decoration: none;
          animation: action_scale .3s linear forwards; }
        .content .more .more-select .poiMore2 .poiMore a:hover {
          color: #ff4d35;
          text-decoration: none;
          background: rgba(245, 83, 61, 0.1);
          border-color: #ff4d35; }
      .content .more .more-select .poiMore2 .poi-more {
        position: absolute;
        top: -2px;
        left: 130px;
        width: 158px;
        height: 34px;
        font-size: 14px;
        color: #8890A4;
        letter-spacing: 0;
        text-align: center;
        line-height: 34px;
        margin-left: -80px;
        border: 1px solid #8890A4;
        border-radius: 100px;
        text-decoration: none;
        display: block; }
      .content .more .more-select .poiMore2:hover .poi-more {
        display: none; }
      .content .more .more-select .poiMore2:hover .poiMore {
        display: block; }
  .content .middle-footer {
    background: #FAFAFA;
    height: 540px;
    padding-top: 1px; }
    .content .middle-footer .active {
      color: #F5533D; }
    .content .middle-footer div.selected {
      display: block; }
    .content .middle-footer .line {
      position: absolute;
      top: 150px;
      left: 180px;
      width: 168px;
      border-top: 3px solid #F5533D; }
    .content .middle-footer .footer-title {
      margin: 80px auto 60px;
      width: 540px;
      height: 34px;
      background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/allindustry.png") no-repeat center;
      background-size: 100% 100%; }
    .content .middle-footer ul {
      width: 840px;
      margin: 0 auto; }
      .content .middle-footer ul li {
        float: left;
        height: 57px;
        width: 168px;
        border-bottom: 1px solid #eaeaea;
        font-size: 18px;
        color: #999999;
        letter-spacing: 0;
        text-align: center;
        line-height: 58px;
        user-select: none;
        cursor: pointer; }
      .content .middle-footer ul .foot-select {
        color: #333333;
        border-bottom: 2px solid #F5533D; }
    .content .middle-footer .footer-list {
      background: #FAFAFA;
      display: none;
      position: absolute;
      top: 154px;
      left: 180px;
      width: 840px;
      height: 256px; }
      .content .middle-footer .footer-list p {
        margin-top: 44px;
        font-size: 14px;
        color: #333333;
        letter-spacing: 0;
        text-align: justify;
        line-height: 24px;
        height: 90px; }
      .content .middle-footer .footer-list .logo-list {
        margin-top: 30px; }
        .content .middle-footer .footer-list .logo-list i {
          float: left;
          display: block;
          margin-left: 15px;
          width: 120px;
          height: 30px;
          background: url("https://mapopen-website-wiki.cdn.bcebos.com/products/navigation/navigation-logo.png") no-repeat center;
          background-size: 250px 1179px; }
        .content .middle-footer .footer-list .logo-list .footer-shouqi {
          background: url("//mapopen-website-wiki.bj.bcebos.com/products/map/shouqi.png") no-repeat center;
          background-size: 80%;
          margin-top: -5px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-didachuxing {
          background: url("//mapopen-website-wiki.bj.bcebos.com/products/map/didachuxing.png") no-repeat center;
          background-size: 80%;
          margin-top: -5px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-edaijia {
          background: url("//mapopen-website-wiki.bj.bcebos.com/products/map/edaijia.png") no-repeat center;
          background-size: 80%;
          margin-top: -5px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-shansong {
          background: url("//mapopen-website-wiki.bj.bcebos.com/products/map/shansong.png") no-repeat center;
          background-size: 80%;
          margin-top: -5px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-fangte {
          background: url("//mapopen-website-wiki.bj.bcebos.com/products/map/fangte.png") no-repeat center;
          background-size: 100%;
          margin-top: -5px;
          height: 60px;
          margin-right: 10px; }
        .content .middle-footer .footer-list .logo-list .footer-logo1 {
          background-position: -31px -330px;
          width: 110px; }
        .content .middle-footer .footer-list .logo-list .footer-logo2 {
          background-position: -21px -370px;
          height: 50px;
          margin-top: -10px;
          width: 80px; }
        .content .middle-footer .footer-list .logo-list .footer-logo3 {
          background-position: -30px -510px;
          width: 130px; }
        .content .middle-footer .footer-list .logo-list .footer-logo4 {
          background-position: -30px -425px; }
        .content .middle-footer .footer-list .logo-list .footer-logo5 {
          background-position: -31px -466px;
          width: 130px; }
        .content .middle-footer .footer-list .logo-list .footer-logo6 {
          background-position: -31px -462px; }
        .content .middle-footer .footer-list .logo-list .footer-logo7 {
          background-position: -25px -98px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-logo8 {
          background-position: -30px -138px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-logo9 {
          background-position: -25px -56px;
          width: 140px; }
        .content .middle-footer .footer-list .logo-list .footer-logo10 {
          background-position: -25px -21px;
          width: 100px; }
        .content .middle-footer .footer-list .logo-list .footer-logo11 {
          background-position: -25px -919px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-logo12 {
          background-position: -30px -985px; }
        .content .middle-footer .footer-list .logo-list .footer-logo13 {
          background-position: -30px -730px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-logo14 {
          background-position: -30px -820px;
          height: 40px;
          width: 140px; }
        .content .middle-footer .footer-list .logo-list .footer-logo15 {
          background-position: -30px -867px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-logo16 {
          background-position: -30px -770px;
          height: 40px; }
        .content .middle-footer .footer-list .logo-list .footer-logo17 {
          background-position: -30px -670px;
          height: 50px;
          width: 100px; }
        .content .middle-footer .footer-list .logo-list .footer-logo18 {
          background-position: -25px -608px;
          height: 50px; }
        .content .middle-footer .footer-list .logo-list .footer-logo19 {
          background-position: -25px -190px; }
        .content .middle-footer .footer-list .logo-list .footer-logo20 {
          background-position: -28px -235px; }
        .content .middle-footer .footer-list .logo-list .footer-logo21 {
          background-position: -5px -277px;
          height: 40px;
          margin-top: -5px; }

.foot {
  height: 400px;
  background: #2B2F38;
  overflow: hidden; }
  .foot .foot-bg {
    width: 100%;
    height: 400px;
    background: #2B2F38 url("https://mapopen-website-wiki.cdn.bcebos.com/products/begain-user.jpg") no-repeat center;
    background-size: 2000px 400px;
    overflow: hidden; }
  .foot .foot-go {
    margin: 70px auto 76px;
    width: 130px;
    height: 32px;
    background: url("//mapopen-website-wiki.cdn.bcebos.com/products%2Flocation-begin.png") no-repeat center;
    background-size: 130px 32px; }
  .foot ul {
    padding-left: 40px; }
    .foot ul li {
      float: left;
      margin: 0 20px 40px;
      width: 240px;
      height: 50px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 100px; }
    .foot ul a {
      display: block;
      width: 100%;
      height: 100%;
      font-size: 14px;
      color: #FFFFFF;
      letter-spacing: 0;
      text-align: center;
      line-height: 50px;
      user-select: none;
      text-decoration: none; }
    .foot ul li:hover {
      background: rgba(245, 83, 61, 0.1);
      border: 1px solid #F5533D; }
    .foot ul a:hover {
      color: #F5533D; }
    .foot ul .foot-select {
      margin-right: 0; }
    .foot ul .foot-select2 {
      margin-left: 160px; }
    .foot ul .foot-select1 {
      margin-right: 100px; }

.abroad-footer {
  width: 100%;
  height: 350px;
  background: #3C3F47;
  color: #8F97A7; }
  .abroad-footer .abroad-footer-table {
    padding-top: 14px;
    border-bottom: 1px solid #494A4D; }
    .abroad-footer .abroad-footer-table table {
      margin: 0 auto; }
      .abroad-footer .abroad-footer-table table th {
        width: 240px;
        height: 58px;
        font-size: 18px;
        color: #8F97A7;
        letter-spacing: 0;
        text-align: center;
        line-height: 58px;
        user-select: none; }
      .abroad-footer .abroad-footer-table table td {
        height: 30px;
        font-size: 14px;
        letter-spacing: 0;
        text-align: center;
        line-height: 30px; }
        .abroad-footer .abroad-footer-table table td a {
          color: #8F97A7;
          text-decoration: none; }
        .abroad-footer .abroad-footer-table table td a:hover {
          color: #ff4d35; }
  .abroad-footer .abroad-footer-foot {
    padding-top: 30px; }
    .abroad-footer .abroad-footer-foot p {
      text-align: center; }
      .abroad-footer .abroad-footer-foot p a {
        color: #7C91CE; }
      .abroad-footer .abroad-footer-foot p a:hover {
        color: #ff4d35;
        text-decoration: none; }

.footer-box a:hover {
  text-decoration: none; }

.footer-box li span {
  position: relative;
  top: 12px !important; }