.body > .l { *zoom: 1; }

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

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

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

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

.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: 9; }

.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 { position: relative; 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; outline: none; margin: 60px auto 0; }

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

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

.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: 120px 0; }

.warp.hd { display: none; }

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

@-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); } }