.header-wrap[data-v-61dd7a3d] {
  width: 100%;
  background: #2A2A2A;
  padding-left: 1.35rem;
  line-height: 4.5rem;
  max-width: 37.5rem;
}
.header-wrap .head-img[data-v-61dd7a3d] {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: .8rem;
    background: #FFD52A;
}
.header-wrap .head-img img[data-v-61dd7a3d] {
      width: 100%;
}
.header-wrap .hostname[data-v-61dd7a3d] {
    font-size: 1.4rem;
    font-weight: 500;
    color: #ffffff;
    line-height: 3rem;
    vertical-align: middle;
    margin-right: .8rem;
}
.header-wrap .host[data-v-61dd7a3d] {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 3rem;
    vertical-align: middle;
    padding-left: .45rem;
    color: #DEDEDE;
    border-left: 1px solid #5B5B5B;
    height: 1.16rem;
}

@charset "UTF-8";
.wrap {
  width: 100%;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAADsBAMAAADZZD7bAAAAFVBMVEX/2wH/4zP/3Qz/4iz/4B7/3xX/4SYbCA3kAAAEhElEQVR42uzYwW3DQAxEUUKwfWcNAXx3CS7BSAXpv4kEySHSWgKWgC2RO/+X8A4DkEYbnfydGa033XwW7nv18Hm479TFF+G+VamVwX2juy/DfZc+vAn3PTp7G+579OVtuK9WbWVw7zxUcV+p3srg3nmo4v5cwZXBvfNQxb2t5Mrg3vkOw72p5srg3vkOw/2dXX0r3NtqvcNwj60M7suqvcNwj60M7ovKvcNwj60M7rMKvsNwjx2quP9X8R2Ge+wdhvtfxVcG985DFfffqq8M7p2HKu4/1V8Z3DsPVdzNBlgZ3DvfYbjbCCsj737yvnB/aVPvyuBupd9huMdWBvfa7zDcY4cq7rXfYbjHDlXch1gZYffYoYr7ECuj6x48VHEfYmVU3cOHKu6132Ha7g8/PBPs+JWRdJ9ufnymV4KVUXS/eIZMrRQrI+h+9xSZWIcfqpruZ0+SaXX8oSrpnmVlxNwzHKqK7mlWRss9xaGq555oZZTckxyqcu6ZVkbIPcc7TM4918rouCd5h6m5Xz1ZJlGad5iYe7aVEXHP8w6Tck91qAq5J3qHKbl/esJs+L7JuYMaAGAYhoH8WZdGzqVwj0i1tC2uzAP3tUP1i/tWDnvjPpbDvriPrkzefe9QfeE+l8N+uO/lsB/usyvTdh/MYR/ch1cm7b6Ywx64L69M2H0zh+XdZw/VuPtoDqu7r+awuPv6ylTdhw/Vsvv8yjTdpw/VsPv+yiTdtw/VrLuwMkX36RzWdSdWpuc+nsOq7gM/FL50X89hUXdlZWLu+zms6c6sTMsdyGFFd2hlUu5CDgu6I4dqzd3IYT135VCNuVsrk3F3DtWWO7YyFXfoUC25cyvTcKcO1ZC7tzIJdymHhdzFlSm4Uzms4777JDvtjuWwjLu5Mry7lsMi7uChmnDncljDXTxUA+7uytDu5qHqu8MrI7uTOcx3p1cGdlcPVdwdzWG6u5rDdHd8ZVR3NofZ7vzKoO5uDqPd/ZUh3eUcBrvjhyrrTucw193OYax7Y2U8d/5QNd0jK6O5Bw5V0r2yMph74VAF3TsrY7kHcpjoHloZyf3auWMiAKEgiKEVAvBvFg3QkE2+hVdk5rY4xRy25z7zoVDm7pjD5txdlZlxt8xha+6eQ3XKXTOHbblftsqMuOsqs+GuOlR33E1z2JK761CdcTdWZsDddqiOuMvmsBl32Ry24i6tDN1dN4eNuFsrA3f3zWET7t7KsN2Fc9iCu/NQxbsr57ABd+mhSndXV4brrj1U4e7uymDdvYcq2t1eGai7+VAlu+srw3QXz2Fk90BlkO7mOQzsvv6hcNTdPYdx3ROV4bnL5zCqe6QyOHf7HAZ1r1QG5u6fw5DuiUMV6B6Yw4juhTkM6F6qDMk9cqjS3FOV4bhnDlWYe6syGPfOoYpyr1WG4p6Zw1juucow3ENzGMm9dahy3EtzGMi9WBmAe7IyAPfaoQpxj81hFPfeocpwj1bmg/s5VPfds5X54H7msHn3bmVeu59Ddd7d+qGQ7p6cw/53T1fmnfuZw/bd25W57wdJ7c5rpsC3WAAAAABJRU5ErkJggg==) no-repeat left top;
  background-size: 100%;
  min-height: 100vh;
  padding: 0 1rem;
  padding-top: 7.4rem;
}
.wrap .top {
    height: auto;
    position: relative;
    background: #ffffff;
    border-radius: 0 1rem 1rem;
    padding-bottom: 2rem;
}
.wrap .top .bg {
      background: url(../img/dog_img_banner.f19927eb.png) no-repeat right top;
      background-size: 100%;
      width: 39%;
      height: 6rem;
      position: absolute;
      right: 1.55rem;
      top: -5.6rem;
      z-index: 0;
}
.wrap .top::before {
      content: '';
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaUAAAA7CAMAAADsF2UbAAAAdVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////li2ZAAAAAJnRSTlMAGwv55InUzsY2AuzdrZWPd1YXBfv07rKZhHptaV9HPSofExC9Tz4dD4IAAAFMSURBVHja7dhJboNAFEXRD6Y3GDDue8dJ7X+JyTQjCkeh9KR7tnBV0vtlv1Rl12TLhcO/2OySvEn7tf1FlCYOM8i7yN70seINzWaxeq9Tv3SY0fZikw0rh5ntY5sm3jvMLp82IwYiBZG9bIKDQxDFYN56h0Ba/wnOugvnZp6YdwHVsXl5csyGdDQvqUNA28g8VPzdhXUwD6VDUIu1jTs5hJXauMYhrF1sozKHwK42ipM2uNxGcS2F97AxDsGlVBKQVFQScKeSgJZKAmoqKSipJOBIJQEZlRQ8qCTgRCUBBZUURFQScKaSgIJKCp5UEtBRSUBGJQUllQQcqCRgG1NJwJlKAuqKSgK+qCSgoJKCG5UEFFRS0FNJQBJTScCRSgI2JZUE1DGVBDRUUpBSScGJSgraikoCPtdUErC7DFQSkHQRlQRs8vZ6j1724xvlAVcDyoafQAAAAABJRU5ErkJggg==) no-repeat left top;
      background-size: 100%;
      display: block;
      width: 20rem;
      height: 2.85rem;
      margin: 0;
      padding: 0;
      position: absolute;
      z-index: 1;
      top: -2.8rem;
      left: 0;
}
.wrap .top .inner {
      width: 100%;
      padding: 2.1rem 1.8rem 1.15rem 4rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      z-index: 3;
}
.wrap .top .inner .right {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
}
.wrap .top .inner .right .dog-name {
          font-size: 2.7rem;
          font-weight: bold;
          color: #222222;
          line-height: 1;
          padding-top: .8rem;
}
.wrap .top .inner .right.copy {
          display: block;
          text-align: center;
}
.wrap .top .inner .right.copy .dog-name {
            font-size: 1.8rem;
}
.wrap .top .inner .right .dog-wxid {
          font-size: 1.4rem;
          color: #4F4F4F;
          font-weight: 400;
          line-height: 1;
          padding-top: .9rem;
}
.wrap .top .inner .right .btn-wrap button {
          border-radius: 4px;
          line-height: 4rem;
          outline: none;
          margin-top: 1.1rem;
          width: 16rem;
          height: 4rem;
          background: #292928;
          border-radius: 2rem;
          font-size: 1.6rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffda43;
}
.wrap .top .inner .right .btn-wrap button:active {
            opacity: .8;
}
.wrap .top .inner .right .dog-desc {
          color: #A6A6A6;
          font-size: 1.1rem;
          font-weight: 400;
          line-height: 1.35rem;
}
.wrap .top .inner .left {
        display: block;
        width: 9.5rem;
        margin-right: 1.6rem;
}
.wrap .top .inner .left img {
          width: 100%;
          border-radius: 5px;
}
.wrap .middle {
    width: 100%;
    padding: 2.8rem 0 3.3rem 0;
    background: #FFFFFF;
    margin: .75rem 0;
    border-radius: 1rem;
}
.wrap .middle .middle-wrap {
      width: 100%;
      margin: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
}
.wrap .middle .middle-wrap .qrcode {
        width: 14.2rem;
        height: 14.2rem;
        margin-left: 1.5rem;
        background: url(data:image/png;base64,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) no-repeat center center;
        background-size: 100%;
        padding: .6rem;
        -webkit-transform: translateY(0.5rem) translateX(-0.8rem);
                transform: translateY(0.5rem) translateX(-0.8rem);
}
.wrap .middle .middle-wrap .qrcode img {
          width: 100%;
          border-radius: .5rem;
}
.wrap .middle .middle-wrap .qrcode-tip {
        margin-top: -.6rem;
}
.wrap .middle .middle-wrap .qrcode-tip .tit {
          font-size: 2rem;
          font-weight: 800;
          color: #000000;
          line-height: 3.3rem;
          padding: 0;
}
.wrap .middle .middle-wrap .qrcode-tip .p {
          font-size: 1.2rem;
          font-weight: 400;
          color: #000000;
          line-height: 1.4rem;
          margin-bottom: 1.3rem;
          padding: 0;
}
.wrap .middle .middle-wrap .qrcode-tip .img {
          width: 100%;
          height: 7.85rem;
          background: url(../img/ercode_img.55d5eeab.png) no-repeat center center;
          background-size: auto 100%;
}
.wrap .middle .middle-wrap .scanwrap {
        width: 50%;
        border: 1px solid #292928;
        border-left: none;
        background: #292928;
        float: right;
        padding: 1.7rem 1.95rem 1.75rem 1.85rem;
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
}
.wrap .middle .middle-wrap .scanwrap i {
          width: 100%;
          height: 11.5rem;
          display: inline-block;
          background: url(../img/buy_img_bg.1666eabc.png) no-repeat center center;
          background-size: 100%;
          margin: 0 auto;
          position: relative;
}
.wrap .middle .middle-wrap .scanwrap i img {
            width: 100%;
            position: absolute;
            top: 2rem;
            -webkit-animation: 1.5s linear 0s infinite alternate scan;
            animation: 1.5s linear 0s infinite alternate scan;
}
.wrap .middle .middle-wrap::after {
        clear: both;
        width: 0;
        height: 0;
        content: '';
        display: block;
}
.wrap .middle p {
      font-size: 1.2rem;
      font-weight: 400;
      color: #2A2A2A;
      text-align: center;
      width: 100%;
      padding: 1.5rem 0 1.7rem;
}
.wrap .bottom {
    width: 100%;
    border-radius: 1rem;
    background: #ffffff;
    padding: 1.85rem 2.5rem 1.4rem 2.5rem;
    margin-top: 1rem;
}
.wrap .bottom .inner .tit {
      width: 29.8rem;
      margin-bottom: 2.45rem;
}
.wrap .bottom .inner .tit img {
        width: 100%;
}
.wrap .bottom .inner .step-1,
    .wrap .bottom .inner .step-2,
    .wrap .bottom .inner .step-3 {
      background: #FFFAE5;
      border-radius: 5px;
      position: relative;
      margin-left: .5rem;
}
.wrap .bottom .inner .step-1::before,
      .wrap .bottom .inner .step-2::before,
      .wrap .bottom .inner .step-3::before {
        width: 7.55rem;
        height: 3.3rem;
        line-height: 3.3rem;
        position: absolute;
        top: -1.05rem;
        left: -1.2rem;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAABCCAMAAABtsrTXAAAAjVBMVEUAAAD/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zP/4zOFKMwbAAAALnRSTlMAMwP7+PRMKvDl39PMxry1p35jEwjrcltCPS4cGQ8L2aGempWRhVVGNiUhrY1p+v8uSAAAATpJREFUaN7N2VlCAjEURNFLAw3OMqgIjoiIqLX/5UmSTdyzgnzkvVRXMxvGY3x+ff9E83UXldF2QbW5jMvZgGq5jct0QjMfReWio+nj8kAzj8sNRfcZmSnA4jo6wOA8Pr5ZbHiLEvtpjGByESHg5TY+FPemrNNQPZ5FhuYQGRrdQ0Tx/BMbgMlrdID9OD50vzFCmHEKZ8pJYHETIaCbxYei92Udqm9d1qGZRIZqqYtgFEdbc5IYm6YCMK6J8Kxcq8F3tSqermIE3S5CAA/CYEix9gVpCuFQut9H31BKa4BIa5NIa6YIo2qF7sY3LJ3FL/BnLMoBDr41EaQ/Yqi6j8jQrCNDtdaVOkiDIbDUXa4T2Cg3Pivhx/YJA4nHVT+fvV8O0yDz0t+OjOcCNu/Oc0E/dp6L1RCnHU7Hf4jbGYz9m8DCAAAAAElFTkSuQmCC) no-repeat left top;
        background-size: 100%;
        text-align: center;
        color: #292928;
        font-size: 1.3rem;
        font-weight: bold;
}
.wrap .bottom .inner .step-1 .con-text,
      .wrap .bottom .inner .step-2 .con-text,
      .wrap .bottom .inner .step-3 .con-text {
        color: #2A2A2A;
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.9rem;
}
.wrap .bottom .inner .step-1 .con-text .before,
        .wrap .bottom .inner .step-1 .con-text .after,
        .wrap .bottom .inner .step-2 .con-text .before,
        .wrap .bottom .inner .step-2 .con-text .after,
        .wrap .bottom .inner .step-3 .con-text .before,
        .wrap .bottom .inner .step-3 .con-text .after {
          font-size: 1.2rem;
          color: #FFCD46;
}
.wrap .bottom .inner .step-1 .con-text .before,
        .wrap .bottom .inner .step-2 .con-text .before,
        .wrap .bottom .inner .step-3 .con-text .before {
          vertical-align: top;
          margin-right: .35rem;
}
.wrap .bottom .inner .step-1 .con-text .after,
        .wrap .bottom .inner .step-2 .con-text .after,
        .wrap .bottom .inner .step-3 .con-text .after {
          vertical-align: bottom;
          margin-left: .35rem;
}
.wrap .bottom .inner .step-1 {
      padding: 3.35rem 0 1rem .9rem;
      position: relative;
}
.wrap .bottom .inner .step-1::before {
        content: '第 1 步:';
}
.wrap .bottom .inner .step-1 .con-text {
        width: 18.86rem;
}
.wrap .bottom .inner .step-1 .img {
        width: 8.55rem;
        position: absolute;
        right: 1rem;
        top: -.6rem;
}
.wrap .bottom .inner .step-1 .img img {
          width: 100%;
}
.wrap .bottom .inner .step-1 .con2 {
        width: 24.85rem;
        margin: 0 auto;
        margin-top: 1.2rem;
}
.wrap .bottom .inner .step-1 .con2 img {
          width: 100%;
          -webkit-transform: translateX(-0.45rem);
                  transform: translateX(-0.45rem);
}
.wrap .bottom .inner .step-1 .cardinal {
        width: auto !important;
        text-align: center !important;
        padding-right: 0.9rem;
        margin-top: 0.6rem;
}
.wrap .bottom .inner .step-2 {
      padding: 2.8rem 0 1.6rem;
      text-align: center;
      margin-top: 2.9rem;
      margin-bottom: 3.15rem;
}
.wrap .bottom .inner .step-2::before {
        content: '第 2 步:';
}
.wrap .bottom .inner .step-2 .img {
        width: 24.85rem;
        margin: 0 auto;
}
.wrap .bottom .inner .step-2 .img img {
          width: 100%;
}
.wrap .bottom .inner .step-3 {
      padding: 3.3rem 0 1.85rem;
      text-align: center;
}
.wrap .bottom .inner .step-3::before {
        content: '第 3 步:';
}
.wrap .bottom .inner .step-3 .img {
        width: 24.85rem;
        margin: 0 auto;
        margin-top: .7rem;
}
.wrap .bottom .inner .step-3 .img img {
          width: 100%;
}
.wrap .footer {
    margin-top: 2.8rem;
}
.wrap .footer p {
      font-size: 1.2rem;
      width: 100%;
      text-align: center;
      padding-bottom: 1.65rem;
}
.wrap .footer p span {
        color: #7F410A;
        font-size: 1.2rem;
        vertical-align: middle;
        line-height: 1;
}
.wrap .footer p i {
        display: inline-block;
        width: .5rem;
        height: .5rem;
        -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
        border-top: .1rem solid #7F410A;
        border-left: .1rem solid #7F410A;
        vertical-align: middle;
        margin-left: .75rem;
}
@-webkit-keyframes scan {
from {
    top: 1rem;
}
to {
    top: 8.6rem;
}
}
@keyframes scan {
from {
    top: 1rem;
}
to {
    top: 8.6rem;
}
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}
.mask .arrows {
    position: fixed;
    left: 50%;
    bottom: 4rem;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: 100000;
    -webkit-animation: 0.55s float linear infinite alternate;
    animation: 0.55s float linear infinite alternate;
}
.mask .arrows img {
      height: 4rem;
}
.mask .arrows-text {
    position: fixed;
    left: 50%;
    bottom: 9rem;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 400%;
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.2;
    color: #ffdb1f;
    font-weight: 700;
}
.mask .arrows-text p {
      white-space: nowrap;
}
@-webkit-keyframes float {
from {
    bottom: 4rem;
}
to {
    bottom: 2rem;
}
}
@keyframes float {
from {
    bottom: 4rem;
}
to {
    bottom: 2rem;
}
}