body{
    display:flex;
    height:100vh;
    min-height:35rem;
    align-items:center;
    justify-content:center;
    font-family:josefin sans,sans-serif}
    .card{position:absolute;top:50%;left:50%;width:100%;padding-top:1rem;padding-bottom:1rem;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
    .card-wrap{position:relative;margin:0 auto}@media(min-width:769px){.card-wrap{max-width:450px}}
    .card-body{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
    .card-body p{font-size:1.1rem}
    .card-title{font-weight:700;font-size:1.8rem}
    .badge-wrap{display:flex;justify-content:center}
    .badge-wrap a.badge{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;margin:0 .2rem;padding:0;opacity:.7;border-radius:50%;transition:opacity .3s ease-in;font-size:1rem;color:#fff;text-decoration:none;cursor:pointer}
    .badge-wrap a.badge:hover{opacity:1;color:#fff}.btn{color:#fff!important;width:10em;transition:all .4s;border-radius:20px;border:2px solid transparent}
    .btn.btn-back{position:absolute;top:0;right:0;border-radius:0;width:6rem;height:6rem;font-size:1.5rem;border:0}.btn.btn-back:hover{border:0!important}
    /*.form-control{font-family:handle,cursive}*/
    .form-control::-webkit-input-placeholder{font-family:josefin sans,sans-serif;letter-spacing:.1em;font-size:.9rem}
    .form-control:-ms-input-placeholder{font-family:josefin sans,sans-serif;letter-spacing:.1em;font-size:.9rem}
    .form-control::-ms-input-placeholder{font-family:josefin sans,sans-serif;letter-spacing:.1em;font-size:.9rem}
    .form-control::placeholder{font-family:josefin sans,sans-serif;letter-spacing:.1em;font-size:.9rem}
    .card--welcome{z-index:3}.card--welcome .card-title{color:#ee9ca7}
    .card--welcome .btn-wrap{display:flex;flex-direction:column}
    .card--welcome .btn{color:#fff;transition:all .3s}
    .card--welcome .btn:hover{background-color:rgba(238,156,167,.25);font-weight:700}
    .card--welcome .btn-register{margin-bottom:.8em;background-color:#ee9ca7}
    .card--welcome .btn-register:hover{color:#ee9ca7}
    .card--welcome .btn-login{background-color:#0083b6}
    .card--welcome .btn{background-color:#0083b6}
    .card--register .card-title{color:#ee9ca7}
    .card--register .badge{background-color:#ee9ca7}
    .card--register .btn{background-color:#ee9ca7}
    .card--register .btn:hover{background-color:#fff;color:#ee9ca7!important;font-weight:700;border:2px solid rgba(238,156,167,.25)}
    .card--register .btn:focus{box-shadow:0 0 0 .2rem rgba(238,156,167,.25)}
    .card--register .form-control{color:#ee9ca7;border-color:rgba(238,156,167,.25)}
    .card--register .form-control:focus{box-shadow:0 0 0 .2rem rgba(238,156,167,.25)}
    .card--login .card-title{color:#0083b6}
    .card--login .badge{background-color:#0083b6}
    .card--login .btn{background-color:#0083b6}
    .card--login .btn:hover{background-color:rgba(238,156,167,.25);font-weight:700}
    .card--login .btn:focus{box-shadow:0 0 0 .2rem rgba(167,191,232,.25)}
    .card--login .form-control{color:#0083b6;border-color:rgba(167,191,232,.25)}
    .card--login .form-control:focus{box-shadow:0 0 0 .2rem rgba(167,191,232,.25)}
    /*body{background:linear-gradient(to right,#ffdde1,#ee9ca7,#0083b6,#6190e8);background-size:500% 500%;transition:background 3s ease;background-position:50% 50%}*/
    /*body.is-register{background-position:0% 50%}body.is-login{background-position:100% 50%}*/
    .card{transition:all .3s .1s ease-out}
    .card:not(.is-show){opacity:0;-webkit-transform:translate(-50%,-50%) rotateX(95deg);transform:translate(-50%,-50%) rotateX(95deg)}
    .card.is-show{opacity:1;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:5}

#slider {
    width: 270px;
    height: 40px;
    position: relative;
    border-radius: 2px;
    background-color: #dae2d0;
    overflow: hidden;
    text-align: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

#slider_bg {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #7AC23C;
    z-index: 1;
}

#label {
    width: 46px;
    position: absolute;
    left: 0;
    top: 0;
    height: 38px;
    line-height: 38px;
    border: 1px solid #cccccc;
    background: #fff;
    z-index: 3;
    cursor: move;
    color: #ff9e77;
    font-size: 16px;
    font-weight: 900;
}

#labelTip {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 13px;
    font-family: 'Microsoft Yahei', serif;
    color: #787878;
    line-height: 38px;
    text-align: center;
    z-index: 2;
}