css布局实现自适应简洁预约表单效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现自适应简洁预约表单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="robots" content="all">


    <style>
     
        .tc-btn {
            border-top: none;
            border-right: none;
            border-bottom: none;
            background-color: transparent;
        }
        .tc-btn:focus {
            outline: none;
        }
    </style>

    <style type="text/css">
@keyframes animate_dots {
        0% {
            opacity: 1
        }}



        body,div,h4,h5,input,li,p,ul {
            margin: 0;
            padding: 0
        }

        header,nav {
            display: block
        }

        img {
            border: 0
        }

        ul {
            list-style: none
        }

        h4,h5 {
            font-size: 100%
        }

        i {
            font-style: normal;
            font-weight: 400
        }

        a {
            color: #333;
            text-decoration: none
        }

        a:active,a:hover {
            color: #42a4ff
        }

        button,input,select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit
        }

        input,select {
            outline: 0;
            *font-size: 100%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none
        }

        input,select {
            vertical-align: middle
        }

        body {
            height: 100%;
            background: #fff;
            color: #333;
            font-size: 18px;
            font-family: 'Microsoft Yahei','Sim sun',tahoma,'Helvetica ,Neue',Helvetica,STHeiTi,Arial,sans-serif;
            line-height: 1.5;
            -webkit-font-smoothing: auto;
            -moz-font-smoothing: auto;
            font-smoothing: auto
        }

        .row {
            width: 100%
        }

        .topbar {
            max-width: 100%;
            min-width: 1000px;
            font-size: 16px;
            -webkit-box-shadow: 3px 3px 15px #efefef;
            box-shadow: 3px 3px 20px #efefef
        }

        .topbar .container {
            margin: 0 auto;
            width: 1000px;
            height: 80px;
            position: relative;
            z-index: 100
        }

        .topbarfixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100%
        }

        .navbar {
            height: 80px;
            color: #fff
        }

        .topbarwhite .navbar {
            background: #fff;
            margin-bottom: 0;
            border: none
        }

        .topbarwhite .logo {
            background-position: 0 0!important
        }

        .topbarfixed {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1000;
            width: 100%
        }

        .tc-btn,.tc-btn:active,.tc-btn:hover,.tc-btn:link,.tc-btn:visited {
            display: inline-block;
            width: 260px;
            height: 48px;
            text-align: center;
            font-size: 18px;
            line-height: 48px;
            text-decoration: none;
            color: #fff;
            vertical-align: middle;
            cursor: pointer
        }

        .tc-input-text {
            display: inline-block;
            padding: 9px 0;
            font-size: 20px;
            vertical-align: middle;
            border: 1px solid #ccc;
            border-radius: 2px;
            font-family: 'Microsoft YaHei',Helvetica,Droid Sans Fallback;
            outline: 0
        }

        .tc-input-text::-webkit-input-placeholder {
            font-size: 20px
        }

        body.reg-bgc {
            background-color: #eee
        }

        .hotline {
            position: relative;
            float: right;
            padding-left: 20px;
            height: 80px;
            line-height: 78px;
            color: #666;
            font-size: 16px
        }

        .hotline:before {
            display: inline-block;
            position: absolute;
            content: '';
            left: 0;
            top: 50%;
            margin-top: -8px;
            width: 16px;
            height: 16px;
            background: no-repeat;
            background-position: -330px -342px
        }

        .hotline span {
            color: #008fe4
        }

        .reg-wrap {
            margin: 0 auto;
            width: 800px;
            vertical-align: middle
        }

        .step-cnt {
            text-align: center
        }

        .tc-reg-form>ul>li:last-of-type {
            margin-bottom: 0
        }

        .tc-reg-form {
            margin: 0 auto;
            width: 320px;
            font-size: 14px
        }

        .tc-reg-form>ul>li {
            position: relative;
            width: 318px;
            height: 40px;
            border: 1px solid #e0e0e0;
            margin-bottom: 15px;
            text-align: left;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-transition: height .4s,margin-bottom .4s;
            transition: height .4s,margin-bottom .4s
        }

        .tc-reg-form>ul>li>i {
            position: absolute;
            width: 26px;
            height: 26px;
            top: 6px;
            left: 10px;
            overflow: hidden;
            z-index: 1
        }

        .tc-reg-form>ul>li input,.tc-reg-form>ul>li select {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            width: 100%;
            padding: 10px;
            top: 0;
            bottom: 0;
            font-size: 14px;
            border: none;
            border-radius: 0;
            line-height: 18px
        }

        .tc-reg-form>ul>li input::-webkit-input-placeholder {
            font-size: 14px
        }

        .tc-reg-form>ul>li.hide {
            height: 0!important;
            margin-bottom: 0!important;
            border-color: #fff!important;
            overflow: hidden
        }

        .tc-reg-form .error-info {
            display: none;
            position: absolute;
            bottom: -26px;
            left: 0;
            height: 24px;
            line-height: 24px;
            color: #e33244;
            font-size: 14px
        }

        .tc-reg-form .error-info:before {
            display: inline-block;
            content: '';
            width: 12px;
            height: 12px;
            margin-top: -2px;
            margin-right: 5px;
            background: no-repeat;
            background-position: -519px -198px;
            overflow: hidden;
            vertical-align: middle
        }

        .tc-reg-form>ul>li.verifi input {
            width: 189px;
            left: 0;
            right: 106px
        }

        .tc-reg-form>ul>li.verifi .tc-btn {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            width: 105px;
            height: 38px;
            top: 0;
            right: 0;
            line-height: 38px;
            font-size: 14px;
            border: 1px solid transparent
        }

        .tc-reg-form>ul>li.verifi.readonly input {
            background: #f9f9f9
        }

        .tc-reg-form>ul>li.verifi.readonly .tc-btn {
            height: 36px;
            background: #f9f9f9!important;
            border-left: 1px solid #dedede;
            color: #999
        }

        .tc-reg-form>ul>li.form-error {
            border: 1px solid #e33244;
            margin-bottom: 34px
        }

        .tc-reg-form>ul>li.form-error input {
            color: #e33244
        }

        .tc-reg-form>ul>li.form-error .error-info {
            display: block
        }

        .tc-reg-form .reg-protocol {
            line-height: 20px;
            margin-top: 15px;
            margin-bottom: 23px
        }

        .tc-reg-form .tc-btn {
            width: 100%
        }

        .reg-intro {
            line-height: 36px;
            color: #666;
            font-size: 16px;
            text-align: center;
            margin-bottom: 50px
        }

        .reg-qr {
            text-align: center
        }

        .reg-qr .img,.reg-qr .img img {
            margin: 0 auto;
            width: 100px;
            height: 100px
        }

        .reg-qr .txt {
            line-height: 1.5;
            font-size: 12px;
            color: #666
        }

        .reg-success {
            text-align: center;
            margin-bottom: 40px
        }

@media all and (-ms-high-contrast:none) {
            ::-ms-backdrop {
                height: auto
            }
        }

        .hotline:before,.tc-reg-form .error-info:before {
            background-image: url(../images/new/new_resprit.png)
        }

        .hotline:before,.tc-reg-form .error-info:before {
            background-image: url(../images/new/new_resprit.png);
            background-size: 472px auto
        }

        .hotline:before {
            background-position: -189px -28.5px
        }

        .tc-reg-form .error-info:before {
            background-position: -191px -61.5px
        }

        html {
            height: 100%
        }

        body,div,h4,h5,input,li,p,ul {
            margin: 0;
            padding: 0
        }

        header,nav {
            display: block
        }

        img {
            border: 0
        }

        ul {
            list-style: none
        }

        h4,h5 {
            font-size: 100%
        }

        i {
            font-style: normal;
            font-weight: 400
        }

        a {
            text-decoration: none
        }

        button,input,select {
            font-family: inherit;
            font-size: inherit;
            font-weight: inherit
        }

        input,select {
            outline: 0;
            *font-size: 100%
        }

        input,select {
            vertical-align: middle
        }

        body {
            font-family: 'Microsoft Yahei','Sim sun',tahoma,'Helvetica,Neue',Helvetica,STHeiTi,Arial;
            background-color: transparent;
            font-smoothing: auto
        }

        ::-webkit-scrollbar {
            width: 15px;
            height: 15px;
            background-color: transparent;
            border-radius: 9px
        }

        ::-webkit-scrollbar:hover {
            background-color: #fafafa
        }

        ::-webkit-scrollbar-track:hover {
            background: #f6f6f6
        }

        ::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 9px;
            background-clip: content-box;
            border: 5px solid transparent
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #c2c2c2;
            background-clip: content-box
        }

        ::-webkit-scrollbar-thumb:vertical:active {
            background-color: #9da1a5;
            border: 5px solid transparent
        }

        .icon {
            display: inline-block;
            font-size: 0;
            line-height: 0;
            height: 10px;
            width: 16px;
            position: relative
        }

        a {
            color: #296bef
        }

        a:hover {
            color: #0045cc
        }

        .g-header {
            display: none
        }

@media (max-width: 1023px) {
            .g-header {
                display: block
            }
        }

        .g-header .header-section {
            width: 100%;
            height: 64px;
            padding: 20px;
            box-sizing: border-box;
            background-color: #fff;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 10000
        }

        .g-header .header-section:before {
            content: "";
            width: 100%;
            height: 1px;
            background-color: #d1d1d1;
            position: absolute;
            left: 0;
            top: 0;
            -webkit-transform: scaleY(.5);
            -ms-transform: scaleY(.5);
            transform: scaleY(.5)
        }

        .g-header .header-section:after {
            content: "";
            width: 100%;
            height: 1px;
            background-color: #d1d1d1;
            position: absolute;
            left: 0;
            bottom: 0;
            -webkit-transform: scaleY(.5);
            -ms-transform: scaleY(.5);
            transform: scaleY(.5)
        }

        .g-header .registered-navbar {
            position: relative
        }

        .g-header .logo {
            float: left
        }

        .g-header .logo>a:nth-child(1) {
            display: block;
            width: 122px;
            height: 22px;
            background: url(//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png) no-repeat center;
            background-size: contain
        }

        .g-header .nav-icon {
            float: right;
            width: 24px;
            height: 24px;
            position: relative;
            z-index: 1000;
            font-size: 0;
            text-align: right;
            cursor: pointer
        }

        .g-header .nav-icon i {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0
        }

        .g-header .nav-icon i span {
            display: inline-block;
            width: 70%;
            height: 2px;
            background-color: #9babcc;
            position: relative;
            border-radius: 2px
        }

        .g-header .nav-icon i:nth-of-type(1) span {
            top: 20%
        }

        .g-header .nav-icon i:nth-of-type(2) span {
            top: 45%;
            width: 55%
        }

        .g-header .nav-icon i:nth-of-type(3) span {
            top: 70%
        }

        .g-header .m-navbar {
            background-color: #f5f9ff;
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 99999;
            right: -100%;
            top: 0;
            padding-bottom: .6rem;
            box-sizing: border-box;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
            transition: all .4s cubic-bezier(.4,0,0,1);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch
        }

        .g-header .m-navbar .logo {
            background-color: #fff;
            float: inherit;
            padding: 20px;
            border-bottom: 1px solid rgba(44,114,255,.1)
        }

        .g-header .m-navbar .logo a {
            display: inline-block;
            height: 22px
        }

        .g-header .m-navbar ul {
            background-color: #fff;
            padding: 0 20px
        }

        .g-header .m-navbar li {
            position: relative;
            border-bottom: 1px solid rgba(44,114,255,.1)
        }

        .g-header .m-navbar li:after {
            content: "";
            width: 5.64rem;
            height: 1px;
            background-color: #dcdcdc;
            position: absolute;
            left: 0;
            bottom: 0;
            -webkit-transform: scaleY(.5);
            -ms-transform: scaleY(.5);
            transform: scaleY(.5)
        }

        .g-header .m-navbar li:last-child {
            border-bottom: none
        }

        .g-header .m-navbar li:first-child:after {
            display: none
        }

        .g-header .m-navbar li:last-of-type:after {
            display: none
        }

        .g-header .m-navbar li a {
            display: block;
            overflow: hidden;
            color: #6b7799
        }

        .g-header .m-navbar li>a {
            position: relative;
            font-size: 14px;
            line-height: 54px;
            height: 54px
        }

        .g-header .m-navbar li .nav-drop i {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url(../images/source_sprite.png);
            background-size: 40px auto;
            background-repeat: no-repeat;
            margin-right: 12px;
            background-size: 28px;
            width: 28px;
            height: 28px;
            vertical-align: middle
        }

        .g-header .m-navbar li .nav-drop .source-wechat {
            background-position: 0 0
        }

        .g-header .m-navbar li .nav-drop .source-qq {
            background-position: 0 -28px
        }

        .g-header .m-navbar li .nav-drop .source-video {
            background-position: 0 -56px
        }

        .g-header .m-navbar li .nav-drop .source-news {
            background-position: 0 -84px
        }

        .g-header .m-navbar li .nav-drop .source-feed {
            background-position: 0 -224px
        }

        .g-header .m-navbar li .nav-drop .source-youliang {
            background-position: 0 -140px
        }

        .g-header .m-navbar li .nav-drop .source-music {
            background-position: 0 -168px
        }

        .g-header .m-navbar li .nav-drop .source-info {
            background-position: 0 -196px
        }

        .g-header .m-navbar li .nav-drop>a {
            padding: 13px 12px;
            color: #6b7799;
            font-size: 14px
        }

        .g-header .m-navbar li .nav-drop>a:active {
            background-color: #f5f8fc;
            border-radius: 16px;
            font-size: 14px;
            color: #296bef
        }

        .g-header .m-navbar li .nav-drop a:last-child {
            margin-bottom: 12px
        }

        .g-header .header-section {
            -webkit-animation: showHeader .4s both;
            animation: showHeader .4s both
        }

@-webkit-keyframes showHeader {
            0% {
                -webkit-transform: translate(0,-2rem);
                transform: translate(0,-2rem)
            }

            100% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }
        }

@keyframes showHeader {
            0% {
                -webkit-transform: translate(0,-2rem);
                transform: translate(0,-2rem)
            }

            100% {
                -webkit-transform: translate(0,0);
                transform: translate(0,0)
            }
        }

        a,body,div,h4,h5,html,img,label,li,p,span,ul {
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans CN",sans-serif;
            -webkit-font-smoothing: auto
        }

        body.reg-bgc {
            background-color: #f5f9ff
        }

        body.reg-bgc .row {
            margin: 0
        }

        ::selection {
            background: #ccebff
        }

        ::-moz-selection {
            background: #ccebff
        }

        ::-webkit-selection {
            background: #ccebff
        }

@media (max-width: 1023px) {
            .topbar {
                display: none
            }
        }

        .topbar.pc .logo {
            display: inline-block;
            margin-top: 23px;
            width: 177px;
            height: 32px;
            background-image: url(//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png);
            background-repeat: no-repeat;
            background-position: 0 center;
            background-size: contain;

        }

@media (max-width: 1279px) {
            .topbar.pc .logo {
                margin-top: 27px;
                width: 133px;
                height: 24px;
              
                background-size: 133px 24px
            }
        }

        .tc-reg-form {
            width: 520px;
            padding: 48px;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 12px
        }

@media (max-width: 1023px) {
            .tc-reg-form {
                width: 420px;
       
                border: none
            }
        }

        .tc-reg-form .reg-protocol {
            margin: 20px 0 40px
        }

        .tc-reg-form>ul>li {
            width: auto;
            height: auto;
            padding: 0;
            margin-bottom: 20px;
            border: none;
            font-size: 16px;
            color: #6b7799
        }

@media (max-width: 1279px) {
            .tc-reg-form>ul>li {
                margin-bottom: 16px;
                font-size: 14px
            }
        }

        .tc-reg-form>ul>li.verifi {
            position: relative
        }

        .tc-reg-form>ul>li.verifi input {
            width: 100%
        }

        .tc-reg-form>ul>li.verifi .tc-btn {
            box-sizing: border-box;
            position: absolute;
            right: 4px;
            top: 15px;
            padding-left: 10px;
            width: 130px;
            height: unset;
            line-height: 1;
            text-align: left;
            border-left: 2px solid #e0eaff!important;
            font-size: 16px;
            color: #a3aecc
        }

        .tc-reg-form>ul>li.verifi .tc-btn:hover {
            color: #0045cc
        }

@media (max-width: 1279px) {
            .tc-reg-form>ul>li.verifi .tc-btn {
                top: 13px;
                font-size: 14px
            }
        }

        .tc-reg-form>ul>li.verifi.readonly input {
            background-color: #f5f8fc!important
        }

        .tc-reg-form>ul>li.verifi.readonly input:hover {
            border: 2px solid #e0eaff
        }

        .tc-reg-form>ul>li.verifi.readonly .tc-btn {
            height: inherit;
            color: #a3aecc!important;
            background: 0 0!important;
            cursor: not-allowed
        }

        .tc-reg-form>ul>li select {
            vertical-align: middle;
            background-color: #fff;
            color: #838383
        }

        .tc-reg-form>ul>li .choose-select {
            position: relative;
            display: inline-block
        }

        .tc-reg-form>ul>li .choose-select:nth-child(3) {
            float: right
        }

        .tc-reg-form>ul>li .choose-select:after {
            display: inline-block;
            content: " ";
            height: 8px;
            width: 8px;
            border-width: 0 2px 2px 0;
            border-color: #c4d4f5;
            border-style: solid;
            -webkit-transform: translateY(-80%) rotate(45deg);
            -ms-transform: translateY(-80%) rotate(45deg);
            transform: translateY(-80%) rotate(45deg);
            -webkit-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            position: absolute;
            top: 50%;
            right: 20px;
            transition: all .6s cubic-bezier(.19,1,.22,1);
            z-index: 1
        }

        .tc-reg-form>ul>li .choose-select:hover:after {
            border-color: #296bef
        }

        .tc-reg-form>ul>li.choose-loc {
            position: relative;
            border: 0;
            font-size: 0
        }

        .tc-reg-form>ul>li.choose-loc select {
            padding: 10px 13px 10px 24px;
            width: 200px;
            border: 2px solid #e0eaff;
            border-radius: 30px;
            position: relative;
            z-index: 10;
            vertical-align: middle;
            background-color: transparent;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none
        }

@media (max-width: 1279px) {
            .tc-reg-form>ul>li.choose-loc select {
                padding: 10px 13px 10px 24px
            }
        }

        .tc-reg-form>ul>li.choose-loc i {
            position: absolute;
            left: 50%;
            top: 24px;
            display: inline-block;
            height: 2px;
            width: 12px;
            background-color: #e0eaff;
            border-radius: 1px;
            -webkit-transform: translate3d(-50%,0,0);
            transform: translate3d(-50%,0,0)
        }

@media (max-width: 1279px) {
            .tc-reg-form>ul>li.choose-loc i {
                top: 20px
            }
        }

        .tc-reg-form>ul>li.form-error {
            margin-bottom: 16px;
            border: none;
            position: relative;
            width: auto;
            height: auto
        }

        .tc-reg-form>ul>li.form-error input {
            border: 2px solid #ff7566!important;
            color: #ff7566
        }

        .tc-reg-form>ul>li input,.tc-reg-form>ul>li select {
            padding: 0 28px;
            border: 2px solid #e0eaff;
            border-radius: 30px
        }

        .tc-reg-form>ul>li input:focus,.tc-reg-form>ul>li input:hover,.tc-reg-form>ul>li select:focus,.tc-reg-form>ul>li select:hover {
            border: 2px solid #296bef
        }

        .tc-reg-form .error-info {
            position: relative;
            margin: 8px 0 0 0;
            color: #ff7566;
            font-size: 14px;
            left: 30px;
            bottom: inherit
        }

@media (max-width: 1279px) {
            .tc-reg-form .error-info {
                font-size: 12px
            }
        }

@media (max-width: 1023px) {
            .tc-reg-form .error-info {
                font-size: 14px
            }
        }

        .tc-reg-form .error-info:before {
            display: none
        }

        .reg-protocol {
            font-size: 14px;
            color: #0b1531;
            position: relative;
            text-align: left
        }

        .topbar {
            box-shadow: 0 1px 0 0 rgba(44,114,255,.1),0 4px 20px 0 rgba(44,114,255,.05)
        }

        .topbar .container {
            padding: 0 40px;
            width: auto
        }

@media (max-width: 1279px) {
            .topbar .container {
                padding: 0 20px
            }
        }

        .hotline {
            color: #6b7799
        }

        .hotline span {
            color: #276bef;
            font-family: roboto;
            font-weight: 700
        }

        .hotline:before {
            top: 36px;
            left: -6px;
            display: inline-block;
          
            background-size: 40px auto;
            background-position: 0 0;
            height: 20px;
            width: 20px
        }

        .pc-reg {
            top: 80px
        }


        .pc-reg .reg-slogan {
            margin-bottom: 64px;
            background-image: none;
            font-size: 32px;
            letter-spacing: 1px;
            color: #0b1531;
            text-align: center;
            font-weight: 700
        }

        .pc-reg .reg-wrap {
            padding-top: 136px;
            width: 100%
        }

        .pc-reg .reg-wrap .tc-reg-form {
            box-shadow: 0 4px 20px 0 rgba(0,60,179,.12)
        }

        .pc-reg .box-content-wrap {
            text-align: center
        }

        .pc-reg .registered-table {
            display: inline-block
        }

        .pc-reg .pc-reg-step {
            margin-bottom: 56px;
            border-bottom: 1px solid #e0eaff
        }

        .pc-reg .pc-reg-step ul {
            display: flex;
            justify-content: center
        }

        .pc-reg .pc-reg-step ul li {
            position: relative;
            margin-left: 56px;
            padding-bottom: 22px;
            font-size: 16px;
            color: #7d8bb3;
            font-weight: 400
        }

        .pc-reg .pc-reg-step ul li:first-child {
            margin-left: 0
        }

        .pc-reg .pc-reg-step ul li i {
            margin-right: 8px;
            box-sizing: border-box;
            display: inline-block;
            position: relative;
            height: 28px;
            width: 28px;
            line-height: 28px;
            font-size: 16px;
            text-align: center;
            border-radius: 50%;
            color: #fff;
            background-color: #c4d4f5
        }

        .pc-reg .pc-reg-step ul li:after {
            display: none;
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 28px;
            height: 6px;
            border-radius: 3px;
            background-color: #296bef
        }

        .pc-reg .pc-reg-step ul li.active {
            color: #296bef
        }

        .pc-reg .pc-reg-step ul li.active i {
            color: #fff;
            background-color: #296bef
        }

        .pc-reg .pc-reg-step ul li.active:after {
            display: inline-block
        }

        .pc-reg .new-btn {
            display: block
        }

        .new-btn {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            box-sizing: border-box;
            border-radius: 24px;
            background-color: #296bef;
            box-shadow: 0 1px 0 rgba(44,114,255,.08),0 6px 12px rgba(44,114,255,.18);
            cursor: pointer;
            color: #fff;
            font-size: 16px;
            padding: 0 32px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            text-decoration: none;
            outline: 0;
            transition: all .4s ease
        }

        .new-btn:hover {
            color: #fff;
            background-color: #165be0;
            box-shadow: none
        }

        .reg-qr {
            display: flex;
            justify-content: center;
            align-items: center
        }

        .reg-qr .img {
            margin: 0 28px 0 0;
            border: 1px solid #bfcdeb;
            border-radius: 10px
        }

        .reg-qr .txt {
            color: #9aa9d3;
            font-size: 14px!important;
            text-align: left
        }

        .step-cnt .reg-success {
            display: inline-block;
            margin-bottom: 32px;
            box-sizing: border-box;
            width: 520px;
            height: 608px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 20px 0 rgba(0,60,179,.12)
        }

        .step-cnt .reg-success {
            height: 648px
        }

        .step-cnt .reg-intro {
            position: relative;
            margin: 0;
            height: 100%;
            background: #fff;
            overflow: hidden
        }

        .step-cnt .reg-intro .reg-top {
            padding-top: 60px;
            line-height: 1
        }

        .step-cnt .reg-intro .reg-top .registered-success {
            width: 312px
        }

        .step-cnt .reg-intro .reg-top .success-content {
            margin: 36px 0 12px;
            color: #35c950;
            font-size: 28px;
            font-weight: 700
        }

        .step-cnt .reg-intro.book-success .reg-bottom {
            height: 110px;
            padding: 32px 0
        }

        .step-cnt .reg-intro .reg-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 48px 0;
            box-sizing: border-box;
            height: auto;
            width: 100%;
            background-color: #fafcff
        }

        .step-cnt .reg-intro .reg-bottom .book-content {
            padding: 0 24px;
            color: #0b1531;
            font-size: 16px;
            line-height: 1.5
        }

        .step-cnt .success-text {
            margin-bottom: 32px
        }

        .step-cnt .success-text p {
            margin-bottom: 12px;
            color: #7d8bb3;
            font-size: 16px
        }

        .step-cnt .success-text ul {
            padding: 0 42px;
            display: inline-block;
            width: 320px
        }

        .step-cnt .success-text ul li {
            position: relative;
            margin-bottom: 5px;
            padding-left: 20px;
            font-size: 16px;
            text-align: left
        }

        .step-cnt .success-text ul li:last-child {
            margin-bottom: 0;
            padding-bottom: 32px;
            border-bottom: 1px solid #e9f0ff
        }

        .step-cnt .success-text ul li:before {
            content: '';
            position: absolute;
            top: 11px;
            left: 0;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            display: inline-block;
            width: 10px;
            height: 6px;
            background-color: #c4d4f5;
            border-radius: 12px
        }

        .step-cnt .success-text ul li a {
            color: #296bef
        }

        .step-cnt .success-text ul li a:hover {
            color: #0045cc
        }

        .step-cnt .book-block .reg-success {
            height: 330px
        }

        .tc-reg-form>ul>li input,.tc-reg-form>ul>li select {
            position: relative;
            height: 48px;
            font-size: 16px;
            color: #6b7799;
            transition: all .6s cubic-bezier(.19,1,.22,1)
        }

@media (max-width: 1279px) {
            .tc-reg-form>ul>li input,.tc-reg-form>ul>li select {
                height: 42px;
                padding: 0 24px;
                font-size: 14px!important
            }

            .tc-reg-form>ul>li input::-webkit-input-placeholder,.tc-reg-form>ul>li select::-webkit-input-placeholder {
                font-size: 14px!important
            }
        }

        .pc-reg .tc-reg-form input::-webkit-input-placeholder {
            color: #6b7799;
            font-size: 16px;
            font-weight: 400
        }

        .pc-reg .tc-reg-form input:-moz-placeholder {
            color: #6b7799;
            font-size: 16px;
            font-weight: 400
        }

        .pc-reg .tc-reg-form input::-moz-placeholder {
            color: #6b7799;
            font-size: 16px;
            font-weight: 400
        }

        .pc-reg .tc-reg-form input:-ms-input-placeholder {
            color: #6b7799;
            font-size: 16px;
            font-weight: 400
        }

        .pc-reg .tc-reg-form .radio {
            display: inline-block;
            margin: 0 20px;
            -webkit-tap-highlight-color: transparent
        }

        .pc-reg .tc-reg-form .radio input[type=radio] {
            position: absolute;
            opacity: 0
        }

        .pc-reg .tc-reg-form .radio input[type=radio]+.radio-label {
            color: #7d8bb3
        }

        .pc-reg .tc-reg-form .radio input[type=radio]+.radio-label:before {
            content: '';
            top: 2px;
            border-radius: 100%;
            border: 2px solid #e0eaff;
            box-sizing: border-box;
            display: inline-block;
            width: 20px;
            height: 20px;
            position: relative;
            margin-right: 12px;
            vertical-align: top;
            cursor: pointer;
            text-align: center;
            transition: all 250ms ease
        }

        .pc-reg .tc-reg-form .radio input[type=radio]:checked+.radio-label {
            color: #0b1531
        }

        .pc-reg .tc-reg-form .radio input[type=radio]:checked+.radio-label:before {
            background-color: #296bef;
            box-shadow: inset 0 0 0 2px #fff;
            border: 2px solid #296bef
        }

        .pc-reg .tc-reg-form .radio input[type=ra.........完整代码请登录后点击上方下载按钮下载查看