body {
  margin: 0;
  padding: 0 !important;
  background: #fff;
  font-size: 14px; }
  body.main {
    background: #f8f8f8; }

a {
  text-decoration: none; }

ul {
  margin: 0;
  padding: 0; }

ul li {
  list-style: none; }

#app {
  padding: 0; }
  #app > .container {
    display: flex;
    flex-direction: column;
    align-items: center; }
    #app > .container > .main {
      width: 100%;
      padding: 0; }
      #app > .container > .main > * > .title {
        margin-bottom: 80px; }
        #app > .container > .main > * > .title h2 {
          font-weight: 500;
          color: #333333;
          font-size: 44px;
          text-align: center; }
        #app > .container > .main > * > .title .divider {
          display: block;
          height: 1px;
          width: 100%;
          margin: 24px 0;
          background-color: #DCDFE6;
          position: relative; }
          #app > .container > .main > * > .title .divider .text {
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            padding: 0 20px;
            background-color: #F7F8FA;
            font-size: 16px;
            color: #999; }
      #app > .container > .main .header .container {
        display: flex;
        padding: 0; }
        #app > .container > .main .header .container > .logo {
          display: flex;
          align-items: center;
          width: 180px; }
          #app > .container > .main .header .container > .logo img {
            display: block;
            max-width: 100%;
            max-height: 70px; }
        #app > .container > .main .header .container > .menu {
          display: flex;
          align-items: center;
          flex-grow: 1;
          margin-left: 20px;
          background: none;
          border-bottom: none;
          height: 76px;
          line-height: 76px; }
          #app > .container > .main .header .container > .menu li {
            height: 40px;
            line-height: 40px;
            color: #fff;
            padding: 0 10px;
            margin: 0 20px;
            border-bottom: none;
            border-bottom-color: inherit !important;
            text-shadow: 0.1em 0.1em 0.2em #2A2B35;
            font-size: 14px;
            cursor: pointer; }
            #app > .container > .main .header .container > .menu li a {
              color: #fff;
              text-decoration: none; }
            #app > .container > .main .header .container > .menu li:hover, #app > .container > .main .header .container > .menu li:focus {
              background: none;
              border-bottom: 1px solid #fff; }
            #app > .container > .main .header .container > .menu li.is-active {
              border-bottom: 1px solid #fff; }
        #app > .container > .main .header .container > .right {
          display: flex;
          align-items: center;
          position: relative; }
          #app > .container > .main .header .container > .right a {
            height: 24px;
            line-height: 24px;
            border-radius: 12px;
            margin-left: 40px;
            border: 1px solid transparent;
            padding: 0 12px;
            color: #409EFF;
            font-size: 14px;
            cursor: pointer; }
            #app > .container > .main .header .container > .right a:hover {
              border: 1px solid #409EFF; }
          #app > .container > .main .header .container > .right .changeButton {
            position: absolute;
            top: 60px;
            right: 0; }
      #app > .container > .main > .header {
        display: flex;
        justify-content: center;
        background: url(../image/head_bg.png) no-repeat top center; }
        #app > .container > .main > .header .container {
          width: 1200px; }
          #app > .container > .main > .header .container .right a {
            color: #fff; }
            #app > .container > .main > .header .container .right a:hover {
              border: 1px solid #fff; }
      #app > .container > .main > .banner {
        width: 1200px;
        height: 203px;
        background: url(../image/member_center_bg.png) no-repeat;
        background-size: contain;
        display: flex;
        align-items: center;
        margin: 20px auto; }
        #app > .container > .main > .banner .title {
          margin-left: 200px;
          margin-bottom: 0;
          font-size: 20px;
          color: #fff; }
      #app > .container > .main > .main {
        height: 936px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url(../image/home_head_bg.png) no-repeat top center;
        background-size: 1920px; }
        #app > .container > .main > .main > * {
          width: 1200px; }
        #app > .container > .main > .main > .content {
          display: flex;
          justify-content: space-between;
          margin-top: 120px; }
          #app > .container > .main > .main > .content > .left {
            height: 100%;
            display: flex;
            flex-direction: column;
            color: #fff; }
            #app > .container > .main > .main > .content > .left .title h1 {
              font-size: 46px;
              font-weight: bold; }
            #app > .container > .main > .main > .content > .left .title div {
              display: flex;
              justify-content: space-between;
              font-size: 20px;
              margin-top: 20px;
              line-height: 30px; }
            #app > .container > .main > .main > .content > .left .qrcode {
              margin-top: 120px;
              display: flex; }
              #app > .container > .main > .main > .content > .left .qrcode .image {
                box-sizing: border-box;
                background: #fff;
                padding: 10px;
                width: 150px;
                height: 150px; }
                #app > .container > .main > .main > .content > .left .qrcode .image canvas, #app > .container > .main > .main > .content > .left .qrcode .image img {
                  width: 100%;
                  height: 100%; }
              #app > .container > .main > .main > .content > .left .qrcode .buttons {
                margin-left: 30px;
                display: flex;
                flex-direction: column;
                justify-content: space-around; }
                #app > .container > .main > .main > .content > .left .qrcode .buttons a {
                  display: block;
                  height: 48px;
                  line-height: 48px;
                  width: 148px;
                  background-color: #5DB8FF;
                  border: 1px solid #00E4FF;
                  text-align: center;
                  font-size: 16px;
                  border-radius: 24px;
                  color: #fff;
                  text-decoration: none;
                  cursor: pointer; }
                  #app > .container > .main > .main > .content > .left .qrcode .buttons a:hover {
                    background-color: #81c8ff;
                    transition: .2s; }
      #app > .container > .main > .skills {
        width: 1200px;
        margin: 0 auto;
        padding: 100px 0; }
        #app > .container > .main > .skills > .content {
          display: flex;
          justify-content: space-between;
          margin-top: 80px; }
          #app > .container > .main > .skills > .content > div {
            width: 48%; }
          #app > .container > .main > .skills > .content .image img {
            width: 100%; }
          #app > .container > .main > .skills > .content .content {
            display: flex;
            flex-direction: column; }
            #app > .container > .main > .skills > .content .content h3 {
              margin: 0; }
            #app > .container > .main > .skills > .content .content .progresses {
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              justify-content: space-around; }
              #app > .container > .main > .skills > .content .content .progresses .skill {
                display: flex;
                justify-content: space-between; }
              #app > .container > .main > .skills > .content .content .progresses .el-progress {
                margin-top: 10px; }
      #app > .container > .main > .feedback {
        padding: 100px 0;
        background-image: linear-gradient(34deg, #50b9fc 0%, #7764fe 100%); }
        #app > .container > .main > .feedback > .container {
          width: 1200px;
          margin: 0 auto; }
          #app > .container > .main > .feedback > .container > .area-title {
            text-align: center; }
            #app > .container > .main > .feedback > .container > .area-title h2 {
              font-weight: 500;
              color: #fff;
              font-size: 44px; }
            #app > .container > .main > .feedback > .container > .area-title div {
              margin: 31px auto 60px;
              color: #fff; }
          #app > .container > .main > .feedback > .container > ul {
            padding-top: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; }
            #app > .container > .main > .feedback > .container > ul li {
              display: flex;
              align-items: center;
              box-sizing: border-box;
              width: 49%;
              background-color: #fff;
              padding: 40px;
              margin-bottom: 20px;
              border-radius: 5px;
              transition: transform 1s; }
              #app > .container > .main > .feedback > .container > ul li:hover {
                transform: translate3d(0, -10px, 0); }
              #app > .container > .main > .feedback > .container > ul li .pic {
                overflow: hidden;
                width: 180px;
                border-radius: 50%; }
                #app > .container > .main > .feedback > .container > ul li .pic img {
                  display: block; }
              #app > .container > .main > .feedback > .container > ul li .member-info > h4 {
                margin: 0;
                font-weight: 700;
                margin-bottom: 5px;
                font-size: 20px;
                color: #37517e; }
              #app > .container > .main > .feedback > .container > ul li .member-info > span {
                display: inline-block;
                text-align: center;
                font-size: 16px;
                padding: 10px 0 10px;
                border-bottom: 1px solid #ECEEF4; }
              #app > .container > .main > .feedback > .container > ul li .member-info > p {
                margin-top: 10px;
                font-size: 14px;
                color: #8A8A8A;
                line-height: 22px; }
              #app > .container > .main > .feedback > .container > ul li .member-info .social {
                display: flex; }
                #app > .container > .main > .feedback > .container > ul li .member-info .social i {
                  margin-right: 10px;
                  transition: ease-in-out 0.3s;
                  padding: 10px;
                  background: #eff2f8;
                  border-radius: 50%;
                  color: #37517e;
                  cursor: pointer; }
                  #app > .container > .main > .feedback > .container > ul li .member-info .social i:hover {
                    background: #47b2e4;
                    color: #fff; }
      #app > .container > .main > .calculate-price {
        width: 1200px;
        margin: 0 auto;
        padding: 100px 0; }
        #app > .container > .main > .calculate-price > .title h2 {
          font-weight: 500;
          color: #333333;
          font-size: 44px;
          text-align: center; }
        #app > .container > .main > .calculate-price > .title .divider {
          display: block;
          height: 1px;
          width: 100%;
          margin: 24px 0;
          background-color: #DCDFE6;
          position: relative; }
          #app > .container > .main > .calculate-price > .title .divider .text {
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);
            padding: 0 20px;
            background-color: #F7F8FA;
            font-size: 16px;
            color: #999; }
        #app > .container > .main > .calculate-price > .calculate {
          margin-top: 80px;
          position: relative; }
          #app > .container > .main > .calculate-price > .calculate .view {
            display: flex;
            flex-direction: column;
            width: 780px;
            border: 1px solid #668AFD;
            border-radius: 12px;
            padding: 30px 30px 0;
            box-sizing: border-box;
            margin: auto;
            background-color: #F7F8FA; }
            #app > .container > .main > .calculate-price > .calculate .view .content {
              box-sizing: border-box;
              flex-grow: 1;
              width: 100%;
              border: 1px solid #DCE1E6;
              background-color: #fff;
              border-radius: 8px;
              padding: 20px; }
              #app > .container > .main > .calculate-price > .calculate .view .content .tabs {
                display: flex;
                padding: 0;
                position: relative;
                margin: 0 0 15px; }
                #app > .container > .main > .calculate-price > .calculate .view .content .tabs:after {
                  content: "";
                  position: absolute;
                  left: 0;
                  bottom: 0;
                  width: 100%;
                  height: 2px;
                  background-color: #E4E7ED;
                  z-index: 1; }
                #app > .container > .main > .calculate-price > .calculate .view .content .tabs .tabs__item {
                  position: relative;
                  margin-right: 40px;
                  height: 40px;
                  line-height: 40px;
                  font-size: 16px;
                  cursor: pointer; }
                  #app > .container > .main > .calculate-price > .calculate .view .content .tabs .tabs__item.active {
                    color: #409EFF; }
                    #app > .container > .main > .calculate-price > .calculate .view .content .tabs .tabs__item.active:after {
                      content: "";
                      position: absolute;
                      left: 0;
                      bottom: 0;
                      width: 100%;
                      height: 2px;
                      background-color: #409EFF;
                      z-index: 2; }
                  #app > .container > .main > .calculate-price > .calculate .view .content .tabs .tabs__item:last-child {
                    margin-right: 0; }
              #app > .container > .main > .calculate-price > .calculate .view .content .el-dialog {
                width: 100%;
                box-shadow: none;
                margin: 0; }
              #app > .container > .main > .calculate-price > .calculate .view .content iframe {
                display: block;
                border: none;
                width: 100%; }
            #app > .container > .main > .calculate-price > .calculate .view .footer {
              position: relative;
              padding: 20px 0; }
              #app > .container > .main > .calculate-price > .calculate .view .footer div {
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid #C4C5D0;
                background-color: #F2F2F2;
                margin: 0 auto; }
              #app > .container > .main > .calculate-price > .calculate .view .footer span {
                position: absolute;
                top: 28px;
                right: 0;
                width: 40px;
                display: flex;
                justify-content: space-between; }
                #app > .container > .main > .calculate-price > .calculate .view .footer span i {
                  width: 6px;
                  height: 6px;
                  border: 1px solid #C4C5D0;
                  background-color: #fff;
                  border-radius: 50%; }
          #app > .container > .main > .calculate-price > .calculate .bottom {
            width: 900px;
            height: 80%;
            border: 1px solid #668AFD;
            z-index: -1;
            position: absolute;
            top: 10%;
            left: 0;
            right: 0;
            margin: auto;
            border-radius: 12px; }
      #app > .container > .main > .home-function {
        padding: 100px 0;
        background-image: linear-gradient(34deg, #50b9fc 0%, #7764fe 100%); }
        #app > .container > .main > .home-function > .container {
          width: 1200px;
          margin: 0 auto; }
          #app > .container > .main > .home-function > .container > .area-title {
            text-align: center; }
            #app > .container > .main > .home-function > .container > .area-title h2 {
              font-weight: 500;
              color: #fff;
              font-size: 44px; }
            #app > .container > .main > .home-function > .container > .area-title div {
              margin: 31px auto 60px;
              display: flex;
              justify-content: center; }
              #app > .container > .main > .home-function > .container > .area-title div i {
                height: 1px;
                width: 180px;
                background-color: #DFDFDF; }
              #app > .container > .main > .home-function > .container > .area-title div h3 {
                font-weight: 500;
                font-size: 16px;
                position: relative;
                top: -12px;
                color: #fff;
                margin: 0 20px; }
          #app > .container > .main > .home-function > .container > .function-content {
            padding-top: 20px;
            display: flex;
            justify-content: space-between; }
            #app > .container > .main > .home-function > .container > .function-content li {
              width: 236px;
              height: 320px;
              background-color: #fff;
              padding: 42px 42px 42px;
              box-sizing: border-box;
              border: 1px solid #81A1FF;
              transition: transform 1s; }
              #app > .container > .main > .home-function > .container > .function-content li:hover {
                transform: translate3d(0, -20px, 0); }
              #app > .container > .main > .home-function > .container > .function-content li div {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: auto;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 2px solid rgba(129, 161, 255, 0.3); }
                #app > .container > .main > .home-function > .container > .function-content li div .iconfont {
                  font-size: 38px;
                  color: #37517e; }
              #app > .container > .main > .home-function > .container > .function-content li h4 {
                font-weight: 500;
                text-align: center;
                font-size: 16px;
                padding: 44px 0 12px;
                border-bottom: 1px solid #ECEEF4;
                margin: 0; }
              #app > .container > .main > .home-function > .container > .function-content li p {
                font-size: 14px;
                margin-top: 12px;
                color: #8A8A8A;
                line-height: 22px; }
      #app > .container > .main > .home-preponderance {
        width: 1200px;
        margin: 0 auto;
        padding: 100px 0; }
        #app > .container > .main > .home-preponderance .preponderance-row {
          display: flex;
          justify-content: space-between;
          padding-bottom: 17px; }
          #app > .container > .main > .home-preponderance .preponderance-row li {
            padding: 50px 0 36px;
            height: 180px;
            width: 380px;
            box-sizing: border-box;
            background-color: #fff;
            text-align: center;
            position: relative; }
            #app > .container > .main > .home-preponderance .preponderance-row li:hover p {
              opacity: 1;
              transition: opacity .5s; }
            #app > .container > .main > .home-preponderance .preponderance-row li h4 {
              font-weight: 500;
              font-size: 16px;
              color: #333;
              margin: 30px 0 0; }
            #app > .container > .main > .home-preponderance .preponderance-row li p {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(59, 129, 245, 0.6);
              color: #ffffff;
              opacity: 0;
              padding: 35px 50px;
              margin: 0;
              box-sizing: border-box;
              font-size: 16px;
              line-height: 28px; }
      #app > .container > .main > .home-download {
        width: 1200px;
        margin: 0 auto;
        padding: 100px 0; }
        #app > .container > .main > .home-download .area-title {
          text-align: center; }
          #app > .container > .main > .home-download .area-title h2 {
            font-weight: 500;
            color: #333333;
            font-size: 44px; }
        #app > .container > .main > .home-download .download-button {
          margin-top: 59px;
          display: flex;
          justify-content: center; }
          #app > .container > .main > .home-download .download-button > div {
            position: relative;
            margin: 0 60px; }
            #app > .container > .main > .home-download .download-button > div a {
              box-sizing: border-box;
              display: inline-block;
              width: 160px;
              height: 48px;
              line-height: 48px;
              text-align: center;
              color: #333333;
              border: 1px solid #333333;
              font-size: 16px;
              text-decoration: none; }
              #app > .container > .main > .home-download .download-button > div a:hover {
                background-color: #658CFD;
                transition: background-color .2s;
                border: none;
                color: #fff; }
                #app > .container > .main > .home-download .download-button > div a:hover ~ .image {
                  opacity: 1;
                  transition: opacity .5s; }
            #app > .container > .main > .home-download .download-button > div .image {
              opacity: 0;
              position: absolute;
              top: -164px;
              left: 0;
              width: 160px;
              height: 160px;
              border: 1px solid #658CFD;
              box-sizing: border-box;
              padding: 10px;
              background: #fff; }
              #app > .container > .main > .home-download .download-button > div .image img {
                width: 100%;
                height: 100%; }
      #app > .container > .main > .news {
        width: 1200px;
        padding: 100px 0;
        margin: 0 auto; }
        #app > .container > .main > .news .content {
          display: flex;
          justify-content: space-between; }
          #app > .container > .main > .news .content .column {
            width: 30%; }
            #app > .container > .main > .news .content .column .hd {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              line-height: 40px;
              border-bottom: 1px solid #ddd; }
              #app > .container > .main > .news .content .column .hd .title {
                font-size: 16px;
                font-weight: normal;
                border-bottom: 1px solid #333;
                margin-bottom: -1px; }
              #app > .container > .main > .news .content .column .hd .more {
                font-size: 14px;
                color: #9d9d9d;
                text-decoration: none; }
            #app > .container > .main > .news .content .column .bd {
              padding-top: 20px; }
              #app > .container > .main > .news .content .column .bd ul li {
                display: flex;
                justify-content: space-between;
                height: 30px;
                line-height: 30px;
                overflow: hidden; }
                #app > .container > .main > .news .content .column .bd ul li .time {
                  flex-shrink: 0;
                  margin-left: 10px;
                  font-size: 14px;
                  color: #666; }
                  #app > .container > .main > .news .content .column .bd ul li .time i {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    margin-right: 4px;
                    background: url("../image/time.png") no-repeat;
                    background-size: 100% 100%;
                    vertical-align: middle; }
                #app > .container > .main > .news .content .column .bd ul li a {
                  flex-grow: 1;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: #666;
                  font-size: 14px;
                  text-decoration: none; }
      #app > .container > .main > .body {
        width: 1200px;
        margin: 20px auto;
        display: flex;
        align-items: flex-start; }
        #app > .container > .main > .body > div {
          box-shadow: 5px 5px 5px 0 rgba(102, 102, 102, 0.18); }
        #app > .container > .main > .body .cat {
          flex-shrink: 0;
          width: 180px;
          margin-right: 20px;
          background: #fff;
          font-size: 16px; }
          #app > .container > .main > .body .cat ul li {
            position: relative;
            display: flex;
            justify-content: center;
            height: 64px;
            line-height: 64px;
            box-sizing: content-box; }
            #app > .container > .main > .body .cat ul li a {
              color: #333333; }
            #app > .container > .main > .body .cat ul li.active {
              font-weight: bold;
              background-color: #F1F5FF; }
              #app > .container > .main > .body .cat ul li.active:before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 6px;
                background: #5884FF; }
              #app > .container > .main > .body .cat ul li.active a {
                color: #5884FF; }
        #app > .container > .main > .body .list {
          flex-grow: 1;
          background: #fff;
          padding: 20px; }
          #app > .container > .main > .body .list ul li {
            display: flex;
            justify-content: space-between;
            width: 920px;
            height: 70px;
            line-height: 70px;
            border-bottom: 1px dashed #e8e8e8;
            font-size: 14px; }
            #app > .container > .main > .body .list ul li .title {
              flex-grow: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap; }
              #app > .container > .main > .body .list ul li .title a {
                color: #666;
                font-weight: bold; }
            #app > .container > .main > .body .list ul li .time {
              flex-shrink: 0;
              margin-left: 20px;
              color: #9D9D9D;
              white-space: nowrap; }
        #app > .container > .main > .body .article {
          flex-grow: 1;
          background: #fff;
          padding: 20px;
          color: #777777; }
          #app > .container > .main > .body .article a {
            color: #777777; }
          #app > .container > .main > .body .article .title {
            height: 65px;
            line-height: 65px;
            font-size: 18px;
            color: #666;
            text-align: center;
            border-bottom: 1px dashed #E8E8E8; }
          #app > .container > .main > .body .article .attr {
            display: flex;
            justify-content: flex-end;
            margin: 20px 0 35px;
            color: #CBCBCB; }
          #app > .container > .main > .body .article .content {
            color: #949494;
            padding: 0 40px 40px;
            line-height: 30px; }
          #app > .container > .main > .body .article .neighborLog {
            padding: 0 40px 40px;
            line-height: 30px;
            text-align: center; }
    #app > .container > .footer {
      background-color: #2E3D53;
      width: 100%;
      height: auto !important;
      padding: 40px 0; }
      #app > .container > .footer > .info {
        width: 1200px;
        margin: 0 auto;
        color: rgba(255, 255, 255, 0.5);
        text-align: center; }
        #app > .container > .footer > .info a {
          color: #fff;
          text-decoration: none; }
      #app > .container > .footer .friend-link {
        width: 1200px;
        margin: 20px auto 0;
        color: rgba(255, 255, 255, 0.5); }
        #app > .container > .footer .friend-link a {
          color: #fff;
          text-decoration: none; }
  #app > #rmenu {
    position: fixed;
    right: 20px;
    bottom: 30px; }
    #app > #rmenu ul li {
      position: relative;
      display: block;
      width: 70px;
      height: 70px;
      cursor: pointer;
      background-color: rgba(255, 255, 255, 0.7);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 60%;
      margin-bottom: 1px; }
      #app > #rmenu ul li:hover {
        background-color: #fff; }
      #app > #rmenu ul li.app {
        background-image: url(../image/r_app.png); }
        #app > #rmenu ul li.app:hover div {
          display: block; }
        #app > #rmenu ul li.app div {
          display: none;
          box-sizing: border-box;
          padding: 10px;
          background: #fff;
          position: absolute;
          top: 0;
          left: -140px;
          width: 140px;
          height: 141px;
          cursor: auto; }
          #app > #rmenu ul li.app div img {
            width: 100%;
            height: 100%; }
      #app > #rmenu ul li.contact {
        background-image: url(../image/r_qq.png); }
        #app > #rmenu ul li.contact:hover div {
          display: block; }
        #app > #rmenu ul li.contact div {
          display: none;
          box-sizing: border-box;
          padding: 10px;
          background: #fff;
          position: absolute;
          top: 0;
          left: -140px;
          width: 140px;
          height: 141px;
          color: #606266;
          line-height: 30px;
          font-size: 14px;
          cursor: auto; }
          #app > #rmenu ul li.contact div img {
            width: 100%;
            height: 100%; }
      #app > #rmenu ul li.top {
        background-image: url(../image/r_top.png); }

/*# sourceMappingURL=style.css.map */