sifangpay/public/style/web/static/paysdk.css

.clearfix:after, .two-step .pay-infor:after, .two-step .pay-label:after {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    clear: both
}

.fl {
    float: left
}

.fr {
    float: right
}

.clearfix, .two-step .pay-infor, .two-step .pay-label {
    zoom: 1
}

.clearfix:after, .clearfix:before, .two-step .pay-infor:after, .two-step .pay-infor:before, .two-step .pay-label:after, .two-step .pay-label:before {
    content: "";
    display: table
}

.pcdemo-btn:before, .tastesdk-box .tab + .tab-btn:after, .tastesdk-box .tab-btn:before, .tastesdk-box:after {
    content: ''
}

.tastedsdk-head {
    text-align: center;
    padding-top: 150px
}

.tastedsdk-head h3 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 400
}

.tastedsdk-head p {
    font-size: 14px
}

.tastesdk-box {
    position: relative;
    padding-bottom: 80px
}

.tastesdk-box:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 166px;
    bottom: 0;
    z-index: 1
}

.tastesdk-box .main {
    position: relative;
    z-index: 2;
    border: 1px solid #eee;
    top: 50px;
}

.tastesdk-box .tab {
    display: none;
    position: absolute;
    top: 0;
    width: 33.33333%;
    text-align: center;
    z-index: 3;
    height: 166px;
    opacity: 0
}

.tastesdk-box .tab.left {
    left: 0
}

.tastesdk-box .tab.mid {
    left: 33.33333%
}

.tastesdk-box .tab.right {
    right: 0
}

.tastesdk-box .tab + .tab-btn:after {
    position: absolute;
    left: 50%;
    right: 50%;
    width: 0;
    bottom: 0;
    height: 2px;
    background-color: #27c8e8
}

.tastesdk-box .tab:checked + .tab-btn:after {
    left: 0;
    right: 0;
    width: auto;
    -webkit-transition: all .25s cubic-bezier(0, 0, .2, 1);
    -moz-transition: all .25s cubic-bezier(0, 0, .2, 1);
    -ms-transition: all .25s cubic-bezier(0, 0, .2, 1);
    transition: all .25s cubic-bezier(0, 0, .2, 1)
}

.tastesdk-box .tab:checked + .tab-btn + .typedemo {
    display: block
}

.tastesdk-box .tab-btn {
    display: none;
    position: absolute;
    top: 0;
    z-index: 2;
    width: 33.33333%;
    height: 44px;
    padding-top: 122px;
    text-align: center
}

.tastesdk-box .tab-btn.left {
    left: 0
}

.tastesdk-box .tab-btn.mid {
    left: 33.33333%
}

.tastesdk-box .tab-btn.right {
    right: 0
}

.first-pay-left .img-tab-btn.right, .first-pay-left .img-tab.right {
    right: 15px
}

.tastesdk-box .tab-btn:before {
    height: 80px;
    position: absolute;
    left: 0;
    top: 32px;
    width: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

.tastesdk-box .tab-btn.left:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0i5omL5py656e75YqoX+aLt+i0nSIgZGF0YS1uYW1lPSLmiYvmnLrnp7vliqgg5ou36LSdIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MyIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUzIDgwIj4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLmNscy0xLCAuY2xzLTIgew0KICAgICAgICBmaWxsOiBub25lOw0KICAgICAgICBzdHJva2U6ICMzMzM7DQogICAgICAgIHN0cm9rZS13aWR0aDogMXB4Ow0KICAgICAgfQ0KDQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQogICAgPC9zdHlsZT4NCiAgPC9kZWZzPg0KICA8cGF0aCBpZD0i5b2i54q2XzJf5ou36LSdIiBkYXRhLW5hbWU9IuW9oueKtiAyIOaLt+i0nSIgY2xhc3M9ImNscy0xIiBkPSJNMzc0LjAwNiwyOTQuOTg3aDEyLjk4NSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM1My41IC0yODguNSkiLz4NCiAgPGNpcmNsZSBpZD0i5qSt5ZyGXzEiIGRhdGEtbmFtZT0i5qSt5ZyGIDEiIGNsYXNzPSJjbHMtMiIgY3g9IjI3LjIxOSIgY3k9IjcyLjM5IiByPSIzLjA2MyIvPg0KICA8cGF0aCBpZD0i5b2i54q2XzIiIGRhdGEtbmFtZT0i5b2i54q2IDIiIGNsYXNzPSJjbHMtMSIgZD0iTTM1NC45OTEsMzUzLjk5NEg0MDYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTMuNSAtMjg4LjUpIi8+DQogIDxwYXRoIGlkPSLnn6nlvaJfMTgiIGRhdGEtbmFtZT0i55+p5b2iIDE4IiBjbGFzcz0iY2xzLTEiIGQ9Ik0zNTkuOTM0LDI4OWgzOS42ODhjMy4zMTMsMCw2LjM3NSwyLjY3NCw2LjM3NSw1Ljk3MnY2Ny4wNzFhNi4zMTQsNi4zMTQsMCwwLDEtNi4zNjgsNS45NzFIMzU5Ljk5QTUuNjg3LDUuNjg3LDAsMCwxLDM1NCwzNjIuMzg5VjI5NUE1Ljk0Niw1Ljk0NiwwLDAsMSwzNTkuOTM0LDI4OVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zNTMuNSAtMjg4LjUpIi8+DQo8L3N2Zz4NCg==)
}

.tastesdk-box .tab-btn.mid:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0icGMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9Ijg0IiBoZWlnaHQ9IjY4LjkzOCIgdmlld0JveD0iMCAwIDg0IDY4LjkzOCI+DQogIDxkZWZzPg0KICAgIDxzdHlsZT4NCiAgICAgIC5jbHMtMSB7DQogICAgICAgIGZpbGw6IG5vbmU7DQogICAgICAgIHN0cm9rZTogIzMzMzsNCiAgICAgICAgc3Ryb2tlLXdpZHRoOiAxcHg7DQogICAgICAgIGZpbGwtcnVsZTogZXZlbm9kZDsNCiAgICAgIH0NCiAgICA8L3N0eWxlPg0KICA8L2RlZnM+DQogIDxwYXRoIGlkPSLnn6nlvaJfMTgiIGRhdGEtbmFtZT0i55+p5b2iIDE4IiBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDExLDMwMWg3MWE2LDYsMCwwLDEsNiw2djQ2LjVjMCwzLjMxMS0yLjY5LDYuNDY0LTYsNi40NjRoLTcxYy0zLjMxLDAtNi0zLjE1My02LTYuNDY0VjMwN0E2LDYsMCwwLDEsMTAxMSwzMDFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAwNC41IC0zMDAuNSkiLz4NCiAgPHBhdGggaWQ9IuW9oueKtl8xIiBkYXRhLW5hbWU9IuW9oueKtiAxIiBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDA1Ljk5LDM2Ny45NDZoODEuMDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDA0LjUgLTMwMC41KSIvPg0KPC9zdmc+DQo=)
}

.tastesdk-box .tab-btn.right:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iYXBwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1My4wMyIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDUzLjAzIDgwIj4NCiAgPGRlZnM+DQogICAgPHN0eWxlPg0KICAgICAgLmNscy0xLCAuY2xzLTIgew0KICAgICAgICBmaWxsOiBub25lOw0KICAgICAgICBzdHJva2U6ICMzMzM7DQogICAgICAgIHN0cm9rZS13aWR0aDogMXB4Ow0KICAgICAgfQ0KDQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQoNCiAgICAgIC5jbHMtMyB7DQogICAgICAgIGZvbnQtc2l6ZTogMTMuMzc0cHg7DQogICAgICAgIGZpbGw6ICMzMzM7DQogICAgICAgIHRleHQtYW5jaG9yOiBtaWRkbGU7DQogICAgICAgIGZvbnQtZmFtaWx5OiAiUGluZ0ZhbmcgSEsiOw0KICAgICAgICBmb250LXdlaWdodDogMzAwOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogIDwvZGVmcz4NCiAgPHBhdGggaWQ9IuefqeW9ol8xOCIgZGF0YS1uYW1lPSLnn6nlvaIgMTgiIGNsYXNzPSJjbHMtMSIgZD0iTTEwMjYuNjEsMjg5aDM5LjkzYzMuMywwLDYuNDUsMi43LDYuNDUsNi4wMjl2NjYuOTUzYzAsMy4zMy0zLjE1LDYuMDMtNi40NSw2LjAzaC0zOS45M2E1LjcyOCw1LjcyOCwwLDAsMS01LjY0LTYuMDNWMjk1LjAyOUE1LjcyNyw1LjcyNywwLDAsMSwxMDI2LjYxLDI4OVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDIwLjQ3IC0yODguNSkiLz4NCiAgPHBhdGggaWQ9IuW9oueKtl8yIiBkYXRhLW5hbWU9IuW9oueKtiAyIiBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDIxLjg0LDM1My45NzFoNTEuMTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDIwLjQ3IC0yODguNSkiLz4NCiAgPGNpcmNsZSBpZD0i5qSt5ZyGXzEiIGRhdGEtbmFtZT0i5qSt5ZyGIDEiIGNsYXNzPSJjbHMtMiIgY3g9IjI2LjU0NSIgY3k9IjcxLjcxOSIgcj0iMy4wMTUiLz4NCiAgPHRleHQgaWQ9IkFQUC0yIiBkYXRhLW5hbWU9IkFQUCIgY2xhc3M9ImNscy0zIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNy4zNDcgMzkuMzg4KSBzY2FsZSgxLjE1MyAxLjE2NSkiPkFQUDwvdGV4dD4NCjwvc3ZnPg0K)
}

.tastesdk-box .typedemo {
    position: relative;
    background-color: #fff;
    display: none;
    height: 560px;
    -webkit-transition: box-shadow .5s cubic-bezier(0, 0, .2, 1);
    -moz-transition: box-shadow .5s cubic-bezier(0, 0, .2, 1);
    -ms-transition: box-shadow .5s cubic-bezier(0, 0, .2, 1);
    transition: box-shadow .5s cubic-bezier(0, 0, .2, 1)
}

.tastesdk-box .typedemo .tit, .tastesdk-box .typedemo .title {
    height: 60px;
    line-height: 60px;
    padding: 0 30px;
    border-bottom: 1px solid #e5e5e5;
    font-size: 16px
}

.tastesdk-box .typedemo .tit span, .tastesdk-box .typedemo .title span {
    cursor: pointer
}

.tastesdk-box .typedemo.qrcode {
    text-align: center
}

.tastesdk-box .typedemo.qrcode .tit {
    text-align: center;
    font-size: 16px
}

.tastesdk-box .typedemo.qrcode img {
    width: 200px;
    height: 200px;
    margin-top: 98px
}

.tastesdk-box .typedemo.qrcode p {
    font-size: 14px;
    line-height: 24px;
    margin-top: 12px
}

.tastesdk-box .typedemo:hover {
    box-shadow: 0 0 9px #e8e8e8
}

.demo-pc {
    padding: 30px 40px 0
}

.first-pay-left {
    float: left;
    width: 250px;
    height: 330px;
    padding-bottom: 60px;
    position: relative
}

.first-pay-left .img-box {
    width: 248px;
    height: 318px;
    display: none
}

.first-pay-left .img-tab {
    position: absolute;
    bottom: 0;
    width: 65px;
    height: 61px;
    z-index: 2;
    opacity: 0
}

.first-pay-left .img-tab:checked + .img-tab-btn img {
    border: 1px solid #666
}

.first-pay-left .img-tab:checked + .img-tab-btn + .img-box {
    display: block
}

.first-pay-left .img-tab.left {
    left: 15px
}

.first-pay-left .img-tab.mid {
    left: 92px
}

.first-pay-left .img-tab-btn {
    position: absolute;
    bottom: 0;
    width: 65px;
    height: 61px;
    z-index: 1;
    overflow: hidden
}

.first-pay-left .img-tab-btn img {
    border: 1px solid transparent;
    width: 63px;
    height: 59px;
    display: block
}

.first-pay-left .img-tab-btn.left {
    left: 15px
}

.first-pay-left .img-tab-btn.mid {
    left: 92px
}

.first-pay-right {
    margin-left: 342px
}

.first-pay-right h4 {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px
}

.first-pay-right p {
    font-size: 12px;
    color: #fb226b;
    padding-bottom: 22px;
    border-bottom: 1px dashed #e3e3e3;
    margin-bottom: 50px
}

.jdt.three-step li:nth-child(3):before, .jdt.two-step li:nth-child(2):before {
    color: #fff;
    border-color: #37cd9f;
    background-color: #37cd9f
}

.first-pay-right p strong {
    font-size: 30px;
    display: block;
    margin-bottom: 10px
}

.first-pay-right p strong span {
    font-size: 18px
}

.first-pay-right .nc {
    padding-bottom: 30px
}

.first-pay-right .nc dt {
    float: left;
    font-size: 14px;
    font-weight: 400;
    height: 28px;
    line-height: 28px
}

.first-pay-right .nc dd {
    margin-left: 60px;
    position: relative;
    font-size: 12px
}

.first-pay-right .nc dd label, .first-pay-right .nc dd span {
    height: 28px;
    line-height: 28px;
    width: 58px;
    text-align: center;
    font-size: 14px;
    display: inline-block
}

.first-pay-right .nc dd label {
    border: 1px solid #e5e5e5;
    margin-right: 20px
}

.first-pay-right .nc dd input {
    position: absolute;
    top: 0;
    opacity: 0
}

.first-pay-right .nc dd input:checked + label {
    border-color: #27c8e8
}

.first-pay-right .nc dd span {
    border: 1px solid #e5e5e5;
    margin-right: 10px
}

.jdt li:before, .pcdemo-btn {
    font-size: 16px;
    text-align: center
}

.first-pay-right .nc dd span:first-child, .first-pay-right .nc dd span:last-child {
    width: auto;
    padding: 0 7px;
    cursor: default
}

.pcdemo-btn {
    border: none;
    border-radius: 4px;
    background-color: #27c8e8;
    color: #fff;
    height: 40px;
    line-height: 40px;
    width: 160px;
    position: relative;
    overflow: hidden;
    z-index: 2;
    font-family: "微软雅黑"
}

.pcdemo-btn:before {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale3d(0, 0, 0);
    -moz-transform: translate(-50%, -50%) scale3d(0, 0, 0);
    -ms-transform: translate(-50%, -50%) scale3d(0, 0, 0);
    transform: translate(-50%, -50%) scale3d(0, 0, 0);
    height: 160px;
    width: 160px;
    background-color: #23b8d6;
    border-radius: 100%
}

.pcdemo-btn:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: attr(ta);
    z-index: 2
}

.jdt, .pay-jd {
    position: relative
}

.pcdemo-btn:active:before {
    -webkit-transform: translate(-50%, -50%) scale3d(1.3, 1.3, 1);
    -moz-transform: translate(-50%, -50%) scale3d(1.3, 1.3, 1);
    -ms-transform: translate(-50%, -50%) scale3d(1.3, 1.3, 1);
    transform: translate(-50%, -50%) scale3d(1.3, 1.3, 1);
    -webkit-transition: all .11s linear;
    -moz-transition: all .11s linear;
    -ms-transition: all .11s linear;
    transition: all .11s linear
}

.pay-jd {
    height: 445px
}

.jdt {
    margin-bottom: 20px
}

.jdt:after, .jdt:before {
    position: absolute;
    left: 0;
    top: 9px;
    height: 2px;
    content: ''
}

.jdt:before {
    right: 0;
    background-color: #ccc
}

.jdt:after {
    width: 33.3333%;
    background-color: #37cd9f;
    -webkit-transition: width .5s cubic-bezier(0, 0, .2, 1);
    -moz-transition: width .5s cubic-bezier(0, 0, .2, 1);
    -ms-transition: width .5s cubic-bezier(0, 0, .2, 1);
    transition: width .5s cubic-bezier(0, 0, .2, 1)
}

.jdt.two-step:after {
    width: 66.6666%
}

.jdt.three-step:after {
    width: 100%
}

.jdt li {
    display: inline-block;
    width: 32.3333%;
    text-align: center;
    position: relative;
    padding-top: 30px;
    counter-increment: my
}

.jdt li:before {
    content: counter(my);
    position: absolute;
    left: 50%;
    top: 0;
    line-height: 16px;
    width: 16px;
    height: 16px;
    margin-left: -10px;
    border: 2px solid #ccc;
    background-color: #fff;
    color: #ccc;
    border-radius: 100%;
    font-family: 'PingFang SC', 'Microsoft YaHei', "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    font-weight: 400;
    z-index: 3;
    -webkit-transition: all .5s cubic-bezier(0, 0, .2, 1);
    -moz-transition: all .5s cubic-bezier(0, 0, .2, 1);
    -ms-transition: all .5s cubic-bezier(0, 0, .2, 1);
    transition: all .5s cubic-bezier(0, 0, .2, 1)
}

.jdt li:first-child:before {
    color: #fff;
    background-color: #37cd9f;
    border-color: #37cd9f
}

.address p, .order-infor table td, .order-infor table th {
    font-size: 14px;
    color: #666
}

.address {
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc
}

.address h5 {
    font-size: 14px;
    margin-bottom: 16px
}

.address p {
    width: 198px;
    border: 1px solid #27c8e8;
    background-color: #fff;
    padding: 10px;
    line-height: 24px;
    position: relative
}

.address p span {
    font-size: 14px;
    display: block;
    margin-bottom: 5px
}

.address p:after {
}

.order-infor {
    margin-top: 20px
}

.order-infor h5 {
    font-size: 14px;
    margin-bottom: 16px
}

.order-infor table {
    border: 1px solid #e5e5e5
}

.order-infor table tr:first-child {
    border: 0
}

.order-infor table td, .order-infor table th {
    border-left: 0;
    border-right: 0;
    text-align: center
}

.order-infor table th {
    height: 28px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e5e5e5;
    font-weight: 400
}

.order-infor table td:first-child {
    line-height: 21px;
    text-align: left;
    font-size: 12px
}

.order-infor table td:first-child img {
    width: 60px;
    height: 60px;
    border: 1px solid #e5e5e5;
    margin-right: 30px;
    float: left
}

.order-infor table td:first-child span {
    display: block;
    font-size: 14px
}

.order-infor table td:first-child em {
    font-style: normal
}

.order-infor .pay-box {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 40px;
    height: 40px
}

.order-infor .pay-box strong {
    font-size: 20px;
    color: #fb226b;
    margin-right: 48px
}

.order-infor .pay-box strong span {
    font-size: 12px
}

.order-infor .pay-box button {
    vertical-align: top
}

.two-step p {
    color: #666
}

.two-step p strong {
    font-size: 16px;
    display: block;
    color: #333;
    margin-bottom: 10px
}

.two-step p span {
    color: #fb226b
}

.two-step .pay-infor {
    border: 1px solid #e5e5e5;
    margin: 25px 0 20px
}

.two-step .pay-infor li {
    float: left;
    width: 33.3333%;
    height: 58px;
    line-height: 58px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box
}

.two-step .btns, .two-step .pay-label li label {
    line-height: 40px;
    height: 40px;
    position: absolute
}

.two-step .pay-infor li:first-child {
    padding-left: 50px;
    text-align: left
}

.two-step .pay-infor li:last-child {
    padding-right: 50px;
    text-align: right
}

.two-step .pay-infor li strong {
    font-size: 20px;
    color: #fb226b
}

.two-step .pay-infor li strong span {
    font-size: 14px
}

.two-step h5 {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 400
}

.two-step .pay-label {
    border: 1px solid #e5e5e5;
    padding: 0 20px 20px
}

.two-step .pay-label li {
    float: left;
    width: 150px;
    height: 42px;
    position: relative;
    margin: 20px 40px 0 0;
    display: inline
}

.two-step .pay-label li label {
    cursor: pointer;
    left: 0;
    top: 0;
    width: 148px;
    border: 1px solid #e5e5e5;
    text-align: center;
    vertical-align: middle
}

.two-step .pay-label li label img {
    vertical-align: middle
}

.two-step .pay-label li input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    opacity: 0
}

.two-step .pay-label li input:checked + label {
    border-color: #27c8e8
}

.two-step .btns {
    right: 0;
    bottom: 0
}

.two-step .btns span {
    color: #0098b6
}

.two-step .btns span:first-child {
    border-radius: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #dcdcdc;
    position: relative;
    top: 4px;
    margin-right: 10px
}

.confirm-pop, .two-step .btns span:first-child:before {
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    position: absolute
}

.two-step .btns span:first-child:before {
    content: '';
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MTkiIGhlaWdodD0iOS41MzEiIHZpZXdCb3g9IjAgMCAxMi43MTkgOS41MzEiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWxsOiAjMDBiNWQ4Ow0KICAgICAgICBmaWxsLXJ1bGU6IGV2ZW5vZGQ7DQogICAgICB9DQogICAgPC9zdHlsZT4NCiAgPC9kZWZzPg0KICA8cGF0aCBpZD0i56Gu6K6kIiBjbGFzcz0iY2xzLTEiIGQ9Ik02OTQuNzM5LDk5NS42MTFhMC40NzksMC40NzksMCwwLDEtLjY4LDBsLTAuMTUxLS4xNTJoMGwtMC4xNi0uMTYyLTAuNzA5LS43MTJhMC4wNzksMC4wNzksMCwwLDEsMC0uMDA5TDY4OS43OSw5OTEuM2EwLjQ4NCwwLjQ4NCwwLDAsMSwwLS42ODNsMS4wMjEtMS4wMjVhMC40OCwwLjQ4LDAsMCwxLC42OCwwbDIuOTEyLDIuOTQ1LDYuMTIxLTYuMTQ1YTAuNDgsMC40OCwwLDAsMSwuNjgsMGwxLjAyMSwxLjAyNWEwLjQ4NCwwLjQ4NCwwLDAsMSwwLC42ODNaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjg5LjY1NiAtOTg2LjI1KSIvPg0KPC9zdmc+DQo=) 50% no-repeat
}

.two-step .btns button {
    vertical-align: top;
    margin-left: 30px
}

.confirm-pop {
    background: rgba(0, 0, 0, .2);
    z-index: 3
}

.confirm-pop .confirm {
    background-color: #fff;
    width: 400px;
    height: 220px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -100px 0 0 -200px
}

.confirm-pop .confirm h4 {
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    background-color: #f8f8f8
}

.confirm-pop .confirm p {
    color: #666;
    text-align: center
}

.confirm-pop .confirm p:nth-child(2) {
    font-size: 14px;
    margin-top: 26px;
    color: #333
}

.confirm-pop .confirm p:nth-child(2) span {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    color: #666
}

.confirm-pop .confirm p:nth-child(4) span {
    color: #00a9f1;
    margin: 0 5px
}

.confirm-pop .confirm .confirm-btns {
    text-align: center;
    margin: 25px 0 18px
}

.confirm-pop .confirm .confirm-btns button {
    width: 130px;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    vertical-align: top;
    border: 0;
    position: relative;
    font-size: 14px;
    margin: 0 20px;
    overflow: hidden;
    z-index: 2
}

.confirm-pop .confirm .confirm-btns button:first-child {
    background-color: #27c8e8;
    color: #fff
}

.confirm-pop .confirm .confirm-btns button:first-child:before {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -moz-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -ms-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    height: 130px;
    width: 130px;
    background-color: #23b8d6;
    content: '';
    border-radius: 100%
}

.confirm-pop .confirm .confirm-btns button:first-child:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: attr(ta);
    z-index: 2
}

.confirm-pop .confirm .confirm-btns button:last-child {
    background-color: #fff;
    box-shadow: 0 0 0 1px #ccc;
    color: #666
}

.confirm-pop .confirm .confirm-btns button:last-child:before {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -moz-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    -ms-transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0);
    height: 130px;
    width: 130px;
    background-color: #f1f1f1;
    content: '';
    border-radius: 100%
}

.confirm-pop .confirm .confirm-btns button:last-child:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    content: attr(ta);
    z-index: 2
}

.confirm-pop .confirm .confirm-btns button:active:before {
    -webkit-transform: translate3d(-50%, -50%, 0) scale3d(1.5, 1.5, 1);
    -moz-transform: translate3d(-50%, -50%, 0) scale3d(1.5, 1.5, 1);
    -ms-transform: translate3d(-50%, -50%, 0) scale3d(1.5, 1.5, 1);
    transform: translate3d(-50%, -50%, 0) scale3d(1.5, 1.5, 1);
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -ms-transition: all .1s linear;
    transition: all .1s linear
}

.pay-res h4 {
    height: 52px;
    line-height: 52px;
    font-size: 24px;
    padding: 60px 0 30px;
    font-weight: 400
}

.pay-res h4:before {
    content: '';
    vertical-align: top;
    color: #37cd9f;
    font-family: iconfont;
    font-size: 52px;
    margin-right: 22px
}

.pay-res h4.dft-success:before {
    content: '\e62b'
}

.pay-res h4.dft-process:before {
    content: '\e63c';
    color: #27c8e8
}

.pay-res h4.dft-fail:before {
    content: '\e642';
    color: #ff6159
}

.pay-res h4.bitcoin-success:before {
    content: '\e62b'
}

.pay-res h4.bitcoin-process:before {
    content: '\e63c';
    color: #27c8e8
}

.pay-res h4.bitcoin-fail:before {
    content: '\e642';
    color: #ff6159
}

.pay-res .bitcoin-tips {
    display: none;
    font-size: 14px;
    color: #333;
    background-color: #f4fcfd;
    padding: 26px 40px;
    margin: -22px 0 26px;
    line-height: 18px
}

.pay-res .pro-infor {
    background-color: #f8f8f8;
    padding: 27px 40px;
    position: relative
}

.pay-res .pro-infor p {
    line-height: 34px;
    font-size: 14px
}

.pay-res .pro-infor p em {
    font-style: normal;
    text-decoration: underline;
    position: relative;
    display: inline-block;
    height: 20px;
    line-height: 20px
}

.pay-res .pro-infor p em::selection {
    background-color: #27c8e8;
    color: #fff;
    text-decoration-color: #fff
}

.pay-res .pro-infor p em::-moz-selection {
    background-color: #27c8e8;
    color: #fff;
    text-decoration-color: #fff
}

.pay-res .pro-infor p em.copyed:after {
    content: '复制成功'
}

.pay-res .pro-infor p em.safari::after {
    content: '请Ctrl + C 复制 '
}

.pay-res .pro-infor p em:after {
    position: absolute;
    right: 0;
    top: -18px;
    background-color: rgba(0, 0, 0, .3);
    color: #fff;
    padding: 2px;
    line-height: 1;
    border-radius: 3px;
    font-size: 12px
}

.pay-res .pro-infor p em.suc-t {
    font-size: 12px;
    color: #666;
    text-decoration: none;
    position: relative;
    top: -10px
}

.pay-res .pro-infor p em.suc-t::selection {
    background: 0 0;
    color: #666
}

.pay-res .pro-infor p:nth-child(2) {
    display: none
}

.pay-res .pro-infor p button {
    display: inline-block;
    margin: 0 0 0 20px;
    color: #27c8e8;
    border: 0;
    background: 0 0;
    font-size: 14px
}

.pay-res .pro-infor .qrcode-fql {
    position: absolute;
    right: 120px;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 16
}

.pay-res .pro-infor .qrcode-fql span {
    line-height: 18px;
    vertical-align: middle;
    display: inline-block
}

.pay-res .pro-infor .qrcode-fql img {
    display: block;
    margin-bottom: 2px;
    width: 126px;
    height: 126px
}

.pay-res .pro-infor .qrcode-fql:last-child {
    display: none;
    line-height: 18
}

.pay-res .suc-btns {
    margin-top: 40px;
    text-align: center
}

.pay-res .suc-btns a, .pay-res .suc-btns button {
    display: inline-block;
    vertical-align: top;
    margin: 0 20px
}

.pay-res .suc-btns a {
    width: 160px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #666
}

.pay-res.bitcoin h4 {
    display: none
}

.pay-res.bitcoin .bitcoin-tips {
    display: block
}

.pay-res.bitcoin p {
    display: none
}

.pay-res.bitcoin p:nth-child(2) {
    display: block
}

.pay-res.bitcoin .qrcode-fql {
    display: none
}

.pay-res.bitcoin .qrcode-fql:last-child, .tastesdk .bitcoin-main .typedemo {
    display: block
}

.pay-res.bitcoin .transfrommoney:before {
    content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjMiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDIzIDciPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuY2xzLTEgew0KICAgICAgICBmaWx0ZXI6IHVybCgjZmlsdGVyKTsNCiAgICAgIH0NCg0KICAgICAgLmNscy0yIHsNCiAgICAgICAgZmlsbDogI2I5YjliNzsNCiAgICAgICAgZmlsbC1ydWxlOiBldmVub2RkOw0KICAgICAgfQ0KICAgIDwvc3R5bGU+DQogICAgPGZpbHRlciBpZD0iZmlsdGVyIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiPg0KICAgICAgPGZlRmxvb2QgcmVzdWx0PSJmbG9vZCIgZmxvb2QtY29sb3I9IiMzMzMiLz4NCiAgICAgIDxmZUNvbXBvc2l0ZSByZXN1bHQ9ImNvbXBvc2l0ZSIgb3BlcmF0b3I9ImluIiBpbjI9IlNvdXJjZUdyYXBoaWMiLz4NCiAgICAgIDxmZUJsZW5kIHJlc3VsdD0iYmxlbmQiIGluMj0iU291cmNlR3JhcGhpYyIvPg0KICAgIDwvZmlsdGVyPg0KICA8L2RlZnM+DQogIDxnIGlkPSLnu4RfMSIgZGF0YS1uYW1lPSLnu4QgMSIgY2xhc3M9ImNscy0xIj4NCiAgICA8cGF0aCBpZD0i5b2i54q2XzEiIGRhdGEtbmFtZT0i5b2i54q2IDEiIGNsYXNzPSJjbHMtMiIgZD0iTTQzOC4wMSw3NjkuODg1aDE2LjAyN2MtMC44Mi0xLjEzNy0uMjI5LTEuODc4LTAuMjcxLTIuODg5LDEuODY3LDEuNzQzLDQuMjkzLDIuNjUsNy4yMjQsMy41YTE4LjA2NSwxOC4wNjUsMCwwLDAtNy4yMjQsMy41YzAuMTI2LTEuMS0uNTMzLTEuNzYyLjMtMi45NzFINDM4LjAxdi0xLjE0OFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00MzggLTc2NykiLz4NCiAgICA8cGF0aCBpZD0i5b2i54q2XzFf5ou36LSdIiBkYXRhLW5hbWU9IuW9oueKtiAxIOaLt+i0nSIgY2xhc3M9ImNscy0yIiBkPSJNNDYwLjk5LDc2OS44ODVINDQ0Ljk2M2MwLjgyLTEuMTM3LjIyOS0xLjg3OCwwLjI3MS0yLjg4OS0xLjg2NywxLjc0My00LjI5MywyLjY1LTcuMjI0LDMuNWExOC4wNjUsMTguMDY1LDAsMCwxLDcuMjI0LDMuNWMtMC4xMjYtMS4xLjUzMy0xLjc2Mi0uMy0yLjk3MUg0NjAuOTl2LTEuMTQ4WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQzOCAtNzY3KSIvPg0KICA8L2c+DQo8L3N2Zz4NCg==);
    margin: 0 10px
}

.tastesdkres .tastesdk-box {
    margin-top: 0
}

.tastesdkres .tastesdk-box:after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    z-index: 1
}

.tastesdk .bitcoin-main .main {
    padding-top: 50px
}

.free-registration {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAACgCAMAAADad4FMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkZjBmMzUzNS1lZTAyLTQ5MjctYjBjZi1jNzhlMDc2YTE5MzYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkJEQzhGODQ2ODNEMTFFN0I3QzJDOEY5Nzk3MUI2NDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkJEQzhGODM2ODNEMTFFN0I3QzJDOEY5Nzk3MUI2NDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5NTRkM2UxZi00YTA5LTRjZDQtYTEyYS0xYzE4ZTg1YzM4MGEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkYWJjNDUzOC1hY2VmLTExN2EtYTBj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) center top no-repeat #1a3d77;
    height: 160px;
    text-align: center
}

.free-registration > .des {
    font-size: 30px;
    line-height: 160px;
    color: #fff
}

.free-registration > .btn {
    display: inline-block;
    position: relative;
    top: -5px;
    margin-left: 80px;
    padding: 12px 0;
    width: 118px;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    color: #fff;
    background: #1a3d77;
    border-radius: 4px;
    border: 1px solid #fff;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease
}

.free-registration > .btn:hover {
    background-color: rgba(255, 255, 255, .18)
}
@media (max-width: 1000px){
    .main,.tastesdk-box .typedemo
    {
        width: 100%;
    }

}