.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%; } }