* {
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    box-sizing: border-box
}

html,body {
    overflow-x: hidden;
    background-color: #fff
}

@media only screen and (max-width: 1210px) {
    html,body {
        font-size:12px
    }

    img {
        max-width: 100%
    }

    .wrapper {
        margin: 0 3%;
        width: auto
    }

    .header {
        height: 65px
    }

    .header .logo {
    }

    .bj-3d7bf8 {
        padding-bottom: 80px
    }

    .header .logo img {
    }

    .header .btns {
        position: relative;
        margin-top: 0;
        text-align: center
    }

    .header .btns ul {
        text-align: center
    }

    .header .btns li {
        float: none;
        display: inline-block;
        margin-left: 0;
        text-align: center;
        padding: 10px 0
    }

    .header .nav-wrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 65px;
        background: #3e7af8;
        z-index: 9;
        display: none;
        box-shadow: 0 5px 15px 0 rgba(41,59,236,.6)
    }

    .header .nav {
        float: none;
        line-height: 50px;
        margin-right: 0
    }

    .header .nav li {
        display: block;
        width: 100%;
        float: none;
        text-align: center;
        font-size: 16px;
        padding: 0;
        margin-left: 0;
        border-bottom: 1px dashed rgba(255,255,255,.3)
    }

    .header .nav .on strong:before {
        display: none
    }

    .header .nav dl {
        width: 100%;
        position: relative;
        top: 0
    }

    .gh {
        float: right;
        height: 25px;
        width: 23px;
        margin-right: 5px;
        margin-top: 20px;
        position: relative;
        transition: all .5s cubic-bezier(.7,0,.3,1) 0s;
        -webkit-transition: all .5s cubic-bezier(.7,0,.3,1) 0s;
        -ms-transition: all .5s cubic-bezier(.7,0,.3,1) 0s;
        cursor: pointer
    }

    .gh.selected {
        transform: rotate(90deg)
    }

    .gh a {
        background-color: #fff;
        display: block;
        height: 3px;
        margin-top: -1px;
        position: relative;
        top: 50%;
        transition: all .3s cubic-bezier(.7,0,.3,1) 0s;
        -webkit-transition: all .3s cubic-bezier(.7,0,.3,1) 0s;
        -ms-transition: all .3s cubic-bezier(.7,0,.3,1) 0s;
        width: 100%;
        border-radius: 3px
    }

    .gh a:after,.gh a:before {
        background-color: #fff;
        content: "";
        display: block;
        height: 3px;
        left: 0;
        position: absolute;
        transition: all .3s cubic-bezier(.7,0,.3,1) 0s;
        -webkit-transition: all .3s cubic-bezier(.7,0,.3,1) 0s;
        -ms-transition: all .3s cubic-bezier(.7,0,.3,1) 0s;
        width: 100%;
        border-radius: 3px
    }

    .gh a:after {
        top: 9px
    }

    .gh a:before {
        top: -8px
    }

    .gh.selected a:after,.gh.selected a:before {
        top: 0
    }

    .gh.selected a:before {
        transform: translateY(0px) rotate(-45deg);
        -webkit-transform: translateY(0px) rotate(-45deg);
        -ms-transform: translateY(0px) rotate(-45deg)
    }

    .gh.selected a:after {
        transform: translateY(0px) rotate(45deg);
        -webkit-transform: translateY(0px) rotate(45deg);
        -ms-transform: translateY(0px) rotate(45deg)
    }

    .gh.selected a {
        background-color: transparent!important
    }

    .sidebar {
        right: 10px
    }

    .hbanner {
        position: relative;
        height: 500px
    }

    .g-txt {
        float: none;
        padding: 0 3%;
        position: relative;
        z-index: 1;
        width: auto;
        text-align: center;
        padding-top: 130px
    }

    .g-txt h2 {
        text-align: center;
        line-height: 1.2;
        padding-left: 0;
        font-size: 24px;
        position: relative
    }

    .g-txt h2:after {
        position: absolute;
        left: 50%;
        margin-left: -25px;
        bottom: -20px;
        content: "";
        width: 50px;
        height: 2px;
        background-color: #47e7c4
    }

    .g-txt h2 font {
        line-height: 1.3;
        font-size: 24px
    }

    .g-txt h2:before {
        display: none
    }

    .g-txt p {
        text-align: center;
        font-size: 16px;
        padding-top: 40px;
        max-width: 420px;
        margin: 0 auto;
        opacity: .8;
        line-height: 1.6
    }

    .g-home-btn {
        margin-top: 50px;
        font-size: 18px;
        width: 180px;
        height: 45px;
        line-height: 45px
    }

    .g-img {
        float: none;
        padding-top: 0;
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        bottom: 0
    }

    .g-img img {
        opacity: .4
    }

    .hnav {
        margin-top: 0
    }

    .hnav .wrapper {
        margin: 0
    }

    .hnav li {
        width: 33.33%;
        text-align: center;
        border-right: 0;
        position: relative
    }

    .hnav li:after {
        position: absolute;
        right: 0;
        top: 0;
        content: "";
        width: 1px;
        height: 30px;
        background-color: #f1f1f1
    }

    .hnav li:last-child:after {
        display: none
    }

    .hnav li .img {
        float: none;
        padding: 0
    }

    .hnav li .img img {
        width: 45px
    }

    .hnav li .txt {
        float: none;
        max-width: 160px;
        display: inline-block
    }

    .hnav li .txt h2 {
        font-size: 16px
    }

    .hnav li .txt br {
        display: none
    }

    .hnav li .txt p {
        font-size: 12px;
        padding-top: 10px;
        margin: 0 10px;
        line-height: 1.6
    }

    .g-hd h2 {
        font-size: 20px
    }

    .about-hd h2:before {
        height: 25px;
        margin-right: 20px
    }

    .g-hd p {
        font-size: 15px;
        letter-spacing: 1px;
        line-height: 1.3
    }

    .hhelp,.hpro,.pay {
        padding: 40px 0
    }

    .hhelp-bd,.hpro-bd,.pay-bd {
        margin-top: 30px
    }

    .hnav {
        position: relative;
        z-index: 2
    }

    .hhelp {
        background: #fff
    }

    .hhelp-bd ul {
        height: auto;
        overflow: hidden
    }

    .hhelp-bd .txt h2 {
        font-size: 15px
    }

    .hhelp-bd .txt h4 {
        padding-top: 5px;
        font-size: 12px
    }

    .hhelp-bd li {
        width: 33.33%;
        margin-bottom: 10px;
        display: none
    }

    .hhelp-bd li.s {
        display: block
    }

    .hhelp-bd li img {
        width: 70px
    }

    .hpro-bd ul {
        height: auto;
        overflow: hidden
    }

    .hpro-bd li {
        width: 47%;
        margin: 0 1%;
        margin-bottom: 2%;
        height: 220px
    }

    .hpro-bd li .img {
        margin-top: 18px
    }

    .hpro-bd li .img img {
        width: 60px
    }

    .hpro-bd li .txt h2 {
        font-size: 16px;
        padding: 10px 0 30px
    }

    .hpro-bd .txt:before {
        top: 50%;
        width: 40px;
        margin-left: -20px;
        height: 1px
    }

    .hpro-bd li .txt h4 {
        font-size: 14px;
        line-height: 1.5
    }

    .pay .pay-txt {
        max-width: 420px;
        margin: 30px auto 0;
        font-size: 16px;
        line-height: 1.5
    }

    .pay .pay-txt br {
        display: none
    }

    .pay li {
        width: 47%;
        margin: 0 1%;
        margin-bottom: 15px;
        padding: 20px 0 18px
    }

    .pay li .img img {
        width: 75px
    }

    .pay li .txt {
        font-size: 14px
    }

    .g-btn {
        height: 45px;
        line-height: 45px;
        font-size: 16px
    }

    .hview {
        padding: 50px 0
    }

    .line-27,.pro-sys-r .txt h2 {
        font-size: 18px
    }

    .line-27:before {
        height: 20px;
        vertical-align: -2px
    }

    .hview .img {
        width: 63%
    }

    .hview.even .img {
        margin-right: -30%
    }

    .hview.odd .img {
        margin-left: -30%;
        text-align: right
    }

    .hview-txt {
        width: 60%
    }

    .hview-txt ul {
        margin-top: 25px
    }

    .hview-txt li {
        position: relative;
        padding-left: 30px;
        font-size: 14px;
        line-height: 1.8;
        margin-bottom: 15px
    }

    .hview-txt li br {
        display: none
    }

    .hview-txt li .icon-xuanzhongzhuangtai {
        position: absolute;
        left: 0;
        top: 0;
        margin-top: -4px;
        font-size: 18px
    }

    .btn-zx,.btn-jr {
        width: 150px;
        display: block;
        margin: 0 auto;
        margin-top: 10px
    }

    .hstart {
        padding: 40px 0
    }

    .hpartner {
        height: auto;
        padding-bottom: 40px
    }

    .hpart-hd {
        padding-top: 40px
    }

    .hpart-bd {
        margin-top: 30px
    }

    .hpart-list li {
        width: auto
    }

    .hstart-txt {
        padding-left: 20px
    }

    .hstart-txt h2 {
        font-size: 18px
    }

    .hstart-txt:before {
        width: 3px;
        height: 30px;
        margin-top: -15px
    }

    .hstart-txt p {
        font-size: 12px;
        line-height: 1.4
    }

    .hstart-btn {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 0;
        margin-top: 35px;
        text-align: center
    }

    .hstart-btn a {
        height: 45px;
        width: 200px;
        line-height: 45px
    }

    .hpart-prev,.hpart-next {
        display: none
    }

    .hpart-list:before {
        width: 90%;
        margin-left: -45%;
        height: 50px;
        bottom: -15px
    }

    .hpart-list .hpart-list-item dl {
        padding: 20px;
        height: auto
    }

    .footer {
        font-size: 14px;
        padding-top: 20px
    }

    .footer dl {
        display: none
    }

    .footer dt {
        font-size: 16px
    }

    .footer .s {
        float: left;
        display: block
    }

    .footer dl:first-child {
        width: auto
    }

    .footer .iconfont {
        margin-right: 5px
    }

    .footer .s:last-child {
        float: right
    }

    .faq-view {
        height: 360px
    }

    .faq-srch {
        margin-top: 80px
    }

    .faq-srch .txt {
        width: 720px;
        box-sizing: border-box;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        padding-left: 15px
    }

    .faq-srch .btn {
        height: 50px;
        line-height: 50px
    }

    .faq-nav {
        margin-top: 110px
    }

    .faq-nav li a {
        font-size: 16px
    }

    .faq-nav li.on a:before {
        height: 1px
    }

    .faq-list {
        padding: 30px 0 0
    }

    .faq-list dl {
        margin-bottom: 20px;
        box-sizing: border-box
    }

    .faq-list dt {
        margin-bottom: 10px;
        font-size: 18px
    }

    .faq-list dl:before {
        height: 16px;
        top: 8px
    }

    .faq-list dd a {
        font-size: 14px;
        line-height: 1.5
    }

    .faq-chat {
        padding-top: 50px;
        padding-bottom: 50px
    }

    .faq-chat h2 {
        font-size: 20px
    }

    .faq-chat h4 {
        font-size: 18px;
        margin-top: 8px
    }

    .g-btn-2 {
        width: 200px;
        height: 45px;
        line-height: 45px;
        font-size: 18px;
        margin-top: 30px
    }

    .faqd-hd {
        padding-top: 30px
    }

    .faqd-bd {
        margin-top: 30px;
        font-size: 14px;
        padding: 0 10px
    }

    .faqd-bd img {
        margin-top: 20px
    }

    .probanner {
        position: relative;
        height: 500px
    }

    .g-img {
        font-size: 0;
        overflow: hidden
    }

    .g-img img {
        position: relative;
        margin-bottom: -16%
    }

    .probanner-r {
        margin-left: 0;
        display: none
    }

    .probanner-r img {
        width: 300px
    }

    .pro-pay,.pro-sys,.pro-df,.pro-qr,.about,.contact,.channel,.traffic,.sdk,.login1 {
        padding: 40px 0
    }

    .pro-pay .wrapper {
        margin: 0
    }

    .pro-bd,.pro-sys .pro-txt {
        margin-top: 30px
    }

    .pro-pay-l {
        width: 40%;
        margin-left: -50px;
        text-align: right;
        box-sizing: border-box;
        margin-top: 0
    }

    .pro-pay-r {
        width: 60%
    }

    .g-describe {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.5
    }

    .g-describe br {
        display: none
    }

    .pro-pay-r ul {
        margin-top: 30px
    }

    .pro-pay-r li {
        width: 20%
    }

    .pro-pay-r li img {
        width: 80px
    }

    .pro-pay-r li span {
        margin-top: 8px;
        font-size: 14px
    }

    .pro-sys .pro-txt {
        font-size: 14px;
        line-height: 1.5;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto
    }

    .pro-sys .pro-txt br {
        display: none
    }

    .pro-sys-l,.pro-sys-r {
        float: none;
        width: auto
    }

    .pro-sys-l li {
        width: 20%;
        float: left;
        text-align: center
    }

    .pro-sys-l li a {
        display: block;
        width: auto;
        font-size: 16px;
        line-height: 1.2;
        padding: 15px 0;
        height: auto
    }

    .pro-sys-l li i {
        display: block;
        margin-right: 0
    }

    .pro-sys-r {
        padding: 30px 10px;
        height: auto
    }

    .pro-sys-r .img {
        margin-top: 0
    }

    .pro-sys-r .img img {
    }

    .pro-sys-r .txt {
        padding: 0 10px;
        width: 60%;
        float: left
    }

    .pro-sys-r .txt p {
        font-size: 14px;
        line-height: 1.5
    }

    .pro-sys-r .btn {
        position: relative;
        right: 0;
        bottom: 0;
        margin-top: 20px
    }

    .pro-df-l {
        width: 60%
    }

    .pro-df-l .btn,.pro-qr-l .btn {
        margin-top: 20px;
        margin-left: auto;
        margin-right: auto
    }

    .pro-df-r,.odd .pro-qr-r {
        width: 40%
    }

    .pro-qr-r {
        padding-left: 0
    }

    .pro-qr-l {
        margin-top: 50px;
        width: 60%
    }

    .login-hd h2 {
        font-size: 20px
    }

    .login-btn .btn {
        font-size: 16px
    }

    .about-bd {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 20px
    }

    .contact-bd {
        padding: 30px 0;
        text-align: center
    }

    .contact-bd ul,.channel-bd {
        margin-top: 20px
    }

    .contact-bd li,.g-bd .txt p {
        font-size: 16px
    }

    .contact-bd .txt {
        display: inline-block;
        float: none;
        text-align: left
    }

    .contact-bd .img {
        margin-left: 50px;
        margin-top: 0;
        display: inline-block;
        float: none
    }

    .channel-bd .img,.traffic-bd .img {
        width: 40%
    }

    .channel-bd .txt,.traffic-bd .txt {
        width: 55%;
        margin-left: 5%
    }

    .traffic-bd .txt {
        margin-left: 0;
        margin-right: 5%;
        margin-top: 20px
    }

    .g-bd .txt p {
        padding-left: 0
    }

    .g-bd .btn {
        margin-top: 30px
    }

    .contact-bd li,.g-bd .txt p {
        font-size: 14px
    }

    .contact-bd li {
        padding-left: 120px;
        line-height: 1.5
    }

    .contact-bd span {
        line-height: 1.5;
        vertical-align: top;
        margin-top: -6px
    }

    .contact-bd i {
        margin-right: 15px
    }

    .docs-nav,.guide-l {
        width: 200px
    }

    .docs-nav li a,.guide-l li a {
        height: 45px;
        line-height: 45px;
        font-size: 18px
    }

    .docs-main,.guide-r {
        width: calc(100% - 220px)
    }

    .docs-hd,.guide-rhd {
        font-size: 18px;
        padding-bottom: 10px
    }

    .docs-bd {
        font-size: 14px;
        line-height: 1.5;
        padding: 15px 0
    }

    .guide-rbd {
        padding: 20px 0
    }

    .guide-rbd p {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 15px
    }

    .demo {
        padding: 50px 0;
        text-align: center
    }

    .demo-txt h2:before {
        display: none
    }

    .demo-txt,.demo-img,.demo2 .demo-img {
        float: none;
        width: auto
    }

    .demo1 .demo-img {
        padding-top: 20px
    }

    .demo1 .demo-img,.demo2 .demo-img {
        padding-right: 0
    }

    .demo-txt h2 {
        font-size: 22px
    }

    .demo-txt p {
        margin-top: 10px;
        font-size: 16px
    }

    .demo2 .btn {
        width: 200px;
        height: 45px;
        line-height: 45px;
        margin-top: 30px
    }

    .banner h2 {
        font-size: 26px
    }

    .banner p {
        letter-spacing: 5px
    }

    .sdk ul {
        margin-right: 0
    }

    .sdk li {
        width: 29%;
        box-sizing: border-box;
        margin: 0 2%;
        margin-bottom: 45px;
        text-align: center;
        height: 145px
    }

    .sdk .txt {
        padding-left: 0;
        display: inline-block;
        font-size: 18px
    }

    .sdk .img {
        position: relative;
        top: 0;
        right: 0;
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px;
        width: 70px
    }

    .sdk .btn {
        margin-left: -50px
    }

    .sdk .btn a {
        width: 100px;
        height: 45px;
        line-height: 45px;
        font-size: 18px
    }

    .guide-nv {
        height: auto;
        line-height: normal;
        overflow: hidden;
        border-width: 1px
    }

    .guide-nv a {
        width: auto;
        padding: 0 30px;
        font-size: 18px;
        height: 40px;
        line-height: 40px
    }

    .login-hd p {
        padding: 20px 0 30px
    }

    .gtpwd-img img {
        width: 80px
    }

    .gtpwd-txt h2 {
        padding-top: 25px;
        padding-bottom: 40px;
        font-size: 20px
    }

    .gtpwd-txt p {
        padding-bottom: 50px;
        font-size: 16px
    }
}

@media only screen and (max-width: 768px) {
    .hview.even .img,.hview.odd .img,.pro-pay-l {
        margin-right:0;
        width: auto;
        float: none;
        text-align: center;
        margin-left: 0
    }

    .hview.even .img img,.hview.odd .img img,.pro-pay-l img {
        width: 80%
    }

    .hview-txt,.pro-pay-r {
        float: none;
        width: auto;
        margin-top: 25px
    }

    .pro-pay-r {
        margin-left: 3%;
        margin-right: 3%
    }

    .faq-srch {
        width: 100%
    }

    .faq-srch .txt {
        width: 100%
    }

    .faq-nav {
        margin-top: 60px
    }

    .faq-nav li {
        width: 33.33%;
        padding: 10px 0
    }

    .faq-list dl {
        margin-bottom: 20px;
        float: none;
        width: auto
    }

    .probanner-r img {
        width: 200px
    }

    .pro-pay-r li {
        width: 25%
    }

    .pro-pay-r li span {
        font-size: 12px
    }

    .pro-sys-l li a {
        font-size: 12px
    }

    .pro-sys-l li i {
        font-size: 24px
    }

    .pro-df-r,.odd .pro-qr-r,.pro-df-l,.pro-qr-l {
        width: auto;
        float: none
    }

    .pro-df-r,.odd .pro-qr-r {
        width: 80%;
        margin: 0 auto
    }

    .pro-qr-l {
        margin-top: 10px
    }

    .login2 {
        padding: 40px 0
    }

    .login-wp {
        padding: 30px;
        margin: 0 3%;
        display: block
    }

    .login-bd {
        height: auto;
        overflow: hidden;
        margin-top: 10px
    }

    .login2 .txt,.login1 .txt {
        width: 100%;
        box-sizing: border-box;
        height: 45px;
        line-height: 45px;
        margin-top: 5px;
        font-size: 14px;
        -webkit-appearance: none;
        border-radius: 0;
        appearance: none
    }

    .login2 .txt-gt {
        margin-bottom: 60px
    }

    .gtpwd {
        height: 65px;
        line-height: 65px
    }

    .gtpwd-l>label {
        height: 75px
    }

    .login-bd li {
        position: relative
    }

    .login-bd img {
        position: absolute;
        right: 0;
        margin-top: 10px;
        height: 45px
    }

    .login-bd p {
        padding: 20px 0 0
    }

    .login-btn {
    }

    .login-btn .btn {
        width: 90%;
        height: 40px;
        line-height: 40px;
        margin-bottom: 30px;
        box-shadow: 0 9px 10px 0 rgba(41,59,236,.3)
    }

    .contact-bd .txt {
        display: block;
        float: none
    }

    .contact-bd .img {
        margin-left: 0;
        margin-top: 30px
    }

    .contact-bd .img img {
        width: 200px
    }

    .channel-bd .img,.traffic-bd .img,.channel-bd .txt,.traffic-bd .txt {
        float: none;
        width: auto;
        margin: 0
    }

    .channel-bd .img,.traffic-bd .img {
        width: 80%;
        margin: 30px auto 0
    }

    .g-bd .btn {
        width: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto
    }

    .docs-nav,.guide-l {
        width: auto;
        float: none;
        margin-bottom: 0
    }

    .docs-nav li,.guide-l li {
        display: block;
        width: 33%;
        float: left;
        margin-bottom: 0
    }

    .docs-nav li a,.guide-l li a {
        font-size: 12px
    }

    .docs-main,.guide-r {
        float: none;
        width: auto
    }

    .guide-rhd {
        padding-top: 15px
    }

    .sdk li {
        width: 46%;
        height: 135px
    }

    .sdk .txt {
        display: block;
        padding-top: 20px
    }

    .sdk .img {
        margin-left: 0;
        margin-top: 10px;
        text-align: center
    }

    .guide-nv a {
        font-size: 16px
    }

    .pro-df-l {
        margin-bottom: 30px
    }

    .banner {
        height: 255px
    }

    .sdk .btn {
        bottom: -18px
    }

    .sdk .btn a {
        height: 40px;
        line-height: 40px;
        font-size: 16px
    }

    .pro-sys-r .img img {
        width: 80%
    }

    .pro-sys-r .txt {
        float: none;
        width: auto;
        margin-top: 0
    }

    .pro-sys-r .txt p br {
        display: none
    }

    .pro-sys-r .btn {
        text-align: center
    }

    .pro-df-l .btn,.pro-qr-l .btn {
        display: block
    }

    .line-27,.pro-sys-r .txt h2 {
        font-size: 16px
    }

    .line-27:before {
        vertical-align: -5px
    }
    .hnav {
        margin-top: 0;
    }
    
    .hnav .wrapper {
        margin: 0 3%;
        width: auto;
        padding: 0;
    }
    
    .hnav ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 30px 0 rgba(27,103,229,.1);
    }
    
    .hnav li {
        width: 100%;
        float: none;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        padding: 20px;
        margin: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        text-align: left;
    }
    
    .hnav li:last-child {
        border-bottom: none;
    }
    
    .hnav li .img {
        float: none;
        padding: 0;
        margin: 0;
        flex-shrink: 0;
    }
    
    .hnav li .img img {
        width: 50px;
        height: auto;
    }
    
    .hnav li .txt {
        float: none;
        text-align: left;
        flex: 1;
        padding: 0;
    }
    
    .hnav li .txt h2 {
        font-size: 16px;
        margin-bottom: 5px;
        text-align: left;
    }
    
    .hnav li .txt p {
        font-size: 12px;
        line-height: 1.4;
        padding-top: 0;
        text-align: left;
        margin: 0;
    }
    
    .hnav li .txt br {
        display: none;
    }
    
    /* 禁用手机端的悬停效果 */
    .hnav li:hover {
        transform: none;
    }
}