.body .l { *zoom: 1; }

.body .l:before, .body .l:after { content: ""; display: table; }

.body .l:after { clear: both; }

.body { position: relative; width: 100%; height: 100vh; min-height: 900px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; padding-top: 120px; }

.body > h6 { line-height: 100px; font-size: 44px; color: #191b1d; font-weight: normal; letter-spacing: 3px; padding-bottom: 60px; }

.body .l { position: relative; line-height: 68px; font-size: 26px; color: #6a6d71; font-weight: normal; width: 100%; margin: auto; text-align: left; word-break: break-all; }

.body .l > span { float: left; width: 380px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 14px 0 14px 0; line-height: 40px; }

.body .l .qrcode { position: absolute; bottom: 20px; right: 0; }

.body .l > label { float: left; text-align: right; font-size: 30px; color: #333; font-weight: normal; letter-spacing: 2px; width: 224px; white-space: nowrap; padding-right: 60px; }

.body .l > b { color: #c73b25; font-size: 50px; display: inline-block; position: relative; top: 4px; }

.body .l > b > i { font-size: 32px; position: relative; font-style: normal; left: -3px; top: -2px; }

.body .l .sel { display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 0 0 72px; position: relative; cursor: pointer; margin-right: 30px; width: auto; }

.body .l .sel:after { width: 44px; height: 44px; display: block; position: absolute; left: 24px; top: calc(50% - 18px); content: ""; background: url("../img/icons.png") 0 0 no-repeat; }

.body .l .sel.wechat { padding-left: 86px; }

.body .l .sel.wechat span:after { left: -86px; }

.body .l .sel.wechat:after { left: 32px; background: url("../img/icons.png") -65px 0 no-repeat; }

.body .l .sel span { display: inline-block; position: relative; font-size: 24px; color: #6a6d71; }

.body .l .sel span:after { width: 20px; height: 20px; display: block; content: ""; position: absolute; left: -72px; top: calc(50% - 8px); -webkit-box-sizing: border-box; box-sizing: border-box; border: 2px solid #5ec783; border-radius: 100%; background: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.body .l .sel input { display: none; }

.body .l .sel input:checked ~ span:after { -webkit-box-shadow: inset 0 0 0 3px #fff; box-shadow: inset 0 0 0 3px #fff; background: #5ec783; }

.code { position: relative; display: block; text-align: center; letter-spacing: -1em; margin: 60px auto 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; width: 480px; }

.code:after { width: 300px; height: 80px; display: block; content: ""; opacity: 0; filter: alpha(opacity=0); position: absolute; right: 100%; z-index: 10; top: 0; }

.code.safe > p.success { display: block; color: #5ec783; }

.code.safe > p.info { display: none; }

.code.safe > p.error { display: none; }

.code.error .code-item { border-bottom: 2px solid #ff0101; }

.code.error > p.success { display: none; }

.code.error > p.info { display: none; }

.code.error > p.error { display: block; color: #ff0101; }

.code .code-input { display: block; position: absolute; opacity: 0; filter: alpha(opacity=0); top: 0; right: 0; width: calc(100% + 300px); height: 90px; background: none; outline: none; z-index: 100; }

.code .code-item { width: 52px; float: left; height: 78px; letter-spacing: 1px; line-height: 76px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 48px; text-align: center; margin: 0 15px; border: none; outline: none; border-bottom: 2px solid #dfdfdf; }

.code .code-item.focus:after { width: 2px; height: 60px; background: #666; content: ""; display: block; position: absolute; left: 50%; top: calc(50% - 30px); -webkit-animation: slash 1400ms infinite; animation: slash 1400ms infinite; }

.code .code-item.focus.focus-last:after { left: calc(50% + 18px); }

.code .code-item.active { border-bottom: 2px solid #5ec783; }

.code > p { line-height: 50px; font-size: 18px; font-weight: normal; letter-spacing: 1px; text-align: left; position: absolute; left: calc(50% - 230px); bottom: 16px; margin: 20px auto; display: block; width: 460px; display: none; }

.code > p.info { display: block; color: #9d9d9d; }

.submit { background: none; border: 2px solid #5ec783; color: #5ec783; -webkit-box-shadow: 0 8px 12px rgba(94, 199, 131, 0.2); box-shadow: 0 8px 12px rgba(94, 199, 131, 0.2); height: 70px; line-height: 66px; font-size: 28px; font-weight: normal; text-align: center; letter-spacing: 2px; cursor: pointer; border-radius: 40px; margin: auto; display: block; width: 360px; bottom: 320px; outline: none; margin: 60px auto 0; }

.submit:hover { color: #fff; background: #5ec783; }

.submit:active { color: #fff; background: #5ec783; }

.to-alipay { display: none; }

.warp { position: fixed; z-index: 100; width: 100%; height: 100%; display: block; background: #fff; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; padding: 260px 0; }

.warp.hd { display: none; }

.warp h4 { line-height: 100px; font-size: 42px; color: #191b1d; font-weight: normal; letter-spacing: 5px; }

.msuccess { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; background: rgba(51, 51, 51, 0.5); display: none; }

.msuccess.failed .smain:after { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAA21BMVEUAAADsFD7tFT/uFT/tFT/tFD/tFT/sFD7tFD/sFEDuFT/uFUDtFD7tFT/tFD/tFT/tFT/tFj/vFT/uFkDvFD7uFD/tFj7rFEDuFT3rFDvtFj/sFUDmGULuFUDwFz7tFT/////vMlf80tr6tsT4p7f1eJDyVXTxQGLtGUL/9/n+8/X95+v7zNX5r774na/1f5bzZoLzYn7zW3juHUb82N/7xtD3k6b2j6P0bIbxS2zwPF/wOFzvKVDuJEv+7fD6w836vcn3lqn2ip/2hZv93+X83eP4oLH2jKDuI0pLN8TpAAAAH3RSTlMAfvPcxbmul9Rayqhi5uDCwY1taE5NOjIsGpmIH3gh0IciqwAAAiNJREFUWMPt19dWIkEQBuAmRxEQie7+NeQs0V0E1NVN7/9EnjoKTEN1M5y59btiONSEmqrqRn2xKAdi0XAoGAyFo7FA+dLoYi0OTfJb6YLwdBKCZNpjeOIaBtcJD+G3EVhEbs/F3+CMgD0+gLNStvgIPIib4+GRKT4OjyJyfAqeBeT8XeDmNL6Ai5zWQxaf/m1h9DgxpiGPvcUEBvcN7B1VdSWDvTY1t+Llh+S4+kJpcnAZE81wokXUgovWm3dw6/aIHqD7PyJq6N2tdTA0bSJaro+/IQeaojqoQveDfz91ZY+Pf0JXUwdXOPLMEa+7oyYf/bU0VQnH1sRGXf7sDPlzHyfKtiqeEBtugNWAWMfWETEwIQ1Ud1Z9khLAYmonCkGD2KBH7AGCqNoJQzCv094IkrDaCUHi/NnFv0AUUjtBiNZPH/HDLkTBcyd4pA+/58YT2B9hQJ+Wtkfwn0T7a6wPiP0SX6O1kMbEmtjWibWshRQQxwdf+HArM6GULc3UJnbvupm+IzeT3M4bLuDeVBsHC9saWRUSuHD136wv9EPNPNLeOH1a+TnP+ohiReNQXXHWpfbeCENVGutPtBTGx4xfqkvauLC80hsk8zFN9IVFXto6Lx0YtOuHxCSMi+sUFvvJFvG9vPvdYPjd4vjfZPnf5vnfaPrf6vrfbMsKWVhkC+q8fAYGmbzypJKDKFdRXn1Pp46m3FU1cacuU3T/7SupL2bvI0kt9zHuixkAAAAASUVORK5CYII=") center no-repeat; }

.msuccess.failed .smain p { line-height: 20px; margin-top: 10px; -webkit-columns: #555; columns: #555; font-size: 14px; }

.msuccess.active { display: block; }

.msuccess .smain { width: 240px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 100px 0 30px 0; position: absolute; left: calc(50% - 120px); top: 50%; position: relative; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-box-shadow: 0 0 6px rgba(51, 51, 51, 0.3); box-shadow: 0 0 6px rgba(51, 51, 51, 0.3); background: #fff; border-radius: 12px; }

.msuccess .smain:after { width: 90px; height: 90px; content: ""; display: block; position: absolute; top: 20px; left: calc(50% - 45px); background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAkFBMVEUAAAAOxGgNxGkOxGoOxWgNxGkOxWkOxGkOxGkOxGkOxGkOxGgMw2sOxGkOxGkOxGkGxGsOxGkPxGkNxGkLw2kOxGkOxGkNxGkOxWkNxGkNxGoOxGkNxGgOw2oNxGkMxGkOxGkPxGkNxGkSwGYAu1oOxGoNxWkTxGwNxGkOxGoNxGoPwWkNxWkNxWkPxGkOxGmGxTdnAAAAL3RSTlMAf+TLz8L7U/PdpFoU2K9nCch5PC7utqqRhnRHODKbKeiLQRwFn2ENl4JNIrtwnAx1togAAAKOSURBVFjD7ZfbeqowEIWHkHCQk4ggqBXPrXV3r/d/u63uWhIIEO/7f5836oIwM2tmoF8GqK2PWPie56fxpspeVb/NbNxwmG0zBzfYbk/mnFOAbdx5SA/CubthQGSFZvJAgF86Z84uHP5yOi7/LOBZ2v8dlww8GdNbwKmmHg47B5th/QK5Oxhcjj80QIRoTYO8C/jUCyBolALo/8kiAyzYpGWGkowo8UEaEkzIkAkq6rCGmJIhU4Gkm0Dn7QWrOLx9twA7U/Xx9tlh2frSZgdD/ep+7wPzw1YGlob6dUB3lq2UR/xopg/j7yNzX/EqKjIDz1BX+FSKa2Wmz62fUCi+FFszvS9ZcStp3g2LMHUyuRz3TWbgmugLzKjBleKWYG7iALWXzKUg7BCaeNBbKwlFLPnApAu0a81J6QlnTTx79B9AQSrMb7IrtRh9344Br+1W29NewNd10hTAF/VfwGbSs3aPUDMAMbVhvjaIb9t2SvcOgOhKbZymhVdyGvPWvc64oTinm8Yz5nK9lGqnuDOjDnOpN+/lUg6AvTypb2it4sotxZOtyX9KZl3gAde1uw1q6diMGr4A2MmVpif8pwmrDLOVQGVS1iPc8fFEO28zJS5XXJS4KeiXowuUykzlQREySAT64cTT1lyxlDHZYPWZ89xyi1fL3hvT157oxOSkrjoPesfNqftkpdoX/+JGGvToXRTdDczPlXStysLtHW85PqlDgIgMifShKSHM9AKLnrlhuGT1HxU4mbR3DM0OcR1ZjyYoaIAEbHjVFZiNLDDRyLKd0AiHcmjdX6xpnCwGr1ado1UcdkBmBCmwncivPJMtEM2OZEz9FXvKS5ewMnqV/bla2HnOF7tk9U6/9PMPX0ZH+M5hDV0AAAAASUVORK5CYII=") center no-repeat; }

.msuccess .smain span { display: block; line-height: 30px; margin-top: 30px; font-size: 30px; color: #444; text-align: center; letter-spacing: 1px; font-weight: normal; }

.msuccess .smain a { display: block; margin: 30px auto 0; width: 80px; height: 24px; text-align: center; border: 1px solid #5ec783; color: #5ec783; font-size: 14px; cursor: pointer; line-height: 22px; border-radius: 20px; }

.msuccess .smain a:hover { background: #5ec783; color: #fff; }

.weixin-tip{display: none; position: fixed; left:0; top:0; bottom:0; background: rgba(0,0,0,0.8); filter:alpha(opacity=80);  height: 100%; width: 100%; z-index: 100;}
.weixin-tip p{text-align: center; margin-top: 10%; padding:0 5%;}

@-webkit-keyframes slash { 0% { opacity: 1;
    filter: alpha(opacity=100); }
  30% { opacity: 1;
    filter: alpha(opacity=100); }
  32% { opacity: 0;
    filter: alpha(opacity=0); }
  78% { opacity: 0;
    filter: alpha(opacity=0); }
  80% { opacity: 1;
    filter: alpha(opacity=100); } }

@keyframes slash { 0% { opacity: 1;
    filter: alpha(opacity=100); }
  30% { opacity: 1;
    filter: alpha(opacity=100); }
  32% { opacity: 0;
    filter: alpha(opacity=0); }
  78% { opacity: 0;
    filter: alpha(opacity=0); }
  80% { opacity: 1;
    filter: alpha(opacity=100); } }