body, html {
    width: 100%;
    height: 100%
}

.login-page, .page-wrapper {
    width: 100%;
    height: 100%;
    max-width: 10rem;
    margin: 0 auto;
    background-color: #f0f0f0
}

.pwdreset-wrapper {
    background-color: #fff
}

.page-header {
    width: 10rem;
    height: 2rem;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}

    .page-header img {
        height: .9rem;
        width: 4.2rem;
        margin: 0 auto;
        margin-left: 2.7rem;
        margin-top: .8rem;
    }

.page-container {
    width: 100%;
    background-color: #fff;
}

    .page-container .form-wrapper {
        width: 7.866667rem;
        margin: 0 auto;
        list-style-type: none;
        padding: .133333rem 0
    }

        .page-container .form-wrapper.register-form {
            padding-top: .666667rem
        }

        .page-container .form-wrapper li {
            position: relative;
            width: 100%;
            height: 1.066667rem;
            margin-top: .4rem;
            color: #505050
        }

            .page-container .form-wrapper li.no-margin {
                margin-top: .266667rem
            }

            .page-container .form-wrapper li .forget {
                margin-left: 6rem
            }

            .page-container .form-wrapper li .slider {
                position: absolute;
                width: 100%;
                height: 1.2rem;
                box-shadow: 0 0 .04rem #999;
                background-color: #ddd;
                top: 50%;
                left: 0;
                right: .266667rem;
                transform: translateY(-50%)
            }

            .page-container .form-wrapper li .label {
                background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                -webkit-animation: a 3s infinite;
                -webkit-text-size-adjust: none;
                line-height: 1.2rem;
                height: 1.2rem;
                text-align: center;
                width: 100%;
                color: #aaa
            }

[data-dpr="1"] .page-container .form-wrapper li .label {
    font-size: 12px
}

[data-dpr="2"] .page-container .form-wrapper li .label {
    font-size: 24px
}

[data-dpr="3"] .page-container .form-wrapper li .label {
    font-size: 36px
}

.page-container .form-wrapper li .button {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #fff;
    transition: left 0s;
    -webkit-transition: left 0s;
    background: url(../imgs/login/buttonbggary.png);
    background-size: cover;
    background-repeat: no-repeat
}

.page-container .form-wrapper li .active {
    background: url(../imgs/login/buttonbg.png);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 15px 1px #e9546a
}

.page-container .form-wrapper li .button-on {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #fff;
    transition: left 1s;
    -webkit-transition: left .5s
}

.page-container .form-wrapper li .track {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
    transition: width 0s;
    -webkit-transition: width 0s
}

.page-container .form-wrapper li .track-on {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    overflow: hidden;
    transition: width 1s;
    -webkit-transition: width .5s;
    background: #fbdfe4
}

.page-container .form-wrapper li .bg-green {
    line-height: 1.2rem;
    height: 1.2rem;
    text-align: center;
    background-color: #bacf57
}

[data-dpr="1"] .page-container .form-wrapper li .bg-green {
    font-size: 12px
}

[data-dpr="2"] .page-container .form-wrapper li .bg-green {
    font-size: 24px
}

[data-dpr="3"] .page-container .form-wrapper li .bg-green {
    font-size: 36px
}

.page-container .form-wrapper li input {
    width: 100%;
    height: 1.066667rem;
    line-height: 1.066667rem;
    text-indent: .373333rem;
    border: none;
    -webkit-appearance: none;
    outline: none;
    border-bottom: 1px solid #dcdcdc
}

[data-dpr="1"] .page-container .form-wrapper li input {
    font-size: 15px
}

[data-dpr="2"] .page-container .form-wrapper li input {
    font-size: 30px
}

[data-dpr="3"] .page-container .form-wrapper li input {
    font-size: 45px
}

.page-container .form-wrapper li input:focus {
    border-bottom-color: #e33325
}

.page-container .form-wrapper li input.txt-imgcode, .page-container .form-wrapper li input.txt-msgcode {
    float: left;
    width: 4.533333rem
}

.page-container .form-wrapper li a {
    display: inline-block;
    color: #3c78c8;
    line-height: 1.066667rem
}

[data-dpr="1"] .page-container .form-wrapper li a {
    font-size: 12px
}

[data-dpr="2"] .page-container .form-wrapper li a {
    font-size: 24px
}

[data-dpr="3"] .page-container .form-wrapper li a {
    font-size: 36px
}

.page-container .form-wrapper li a.account-login, .page-container .form-wrapper li a.fast-login, .page-container .form-wrapper li a.forget-password {
    float: right
}

.page-container .form-wrapper li a.voice-password {
    text-decoration: underline
}

.page-container .form-wrapper li a.btn {
    width: 100%;
    height: 1.066667rem;
    color: #fff;
    text-align: center;
    border-radius: .066667rem
}

[data-dpr="1"] .page-container .form-wrapper li a.btn {
    font-size: 15px
}

[data-dpr="2"] .page-container .form-wrapper li a.btn {
    font-size: 30px
}

[data-dpr="3"] .page-container .form-wrapper li a.btn {
    font-size: 45px
}

.page-container .form-wrapper li a.btn-login, .page-container .form-wrapper li a.btn-nextstep, .page-container .form-wrapper li a.btn-register {
    background-color: #e33325
}

.page-container .form-wrapper li a.btn-enroll {
    color: #fff;
    background-color: #ed7689
}

.page-container .form-wrapper li a.btn-reg {
    background-color: #f8cbd2
}

.page-container .form-wrapper li a.btn-msgcode {
    float: right;
    width: 3.2rem;
    height: 1.066667rem;
    text-align: center;
    color: #fff;
    background-color: #caa5a5;
    border-radius: .066667rem
}

.page-container .form-wrapper li a.imgcode {
    float: right;
    width: 3.173333rem;
    height: 1.04rem;
    border: .013333rem solid #dcdcdc;
    overflow: hidden
}

    .page-container .form-wrapper li a.imgcode img {
        width: 100%
    }

.page-container .form-wrapper li span {
    display: inline-block;
    color: #323232;
    line-height: 1.066667rem
}

[data-dpr="1"] .page-container .form-wrapper li span {
    font-size: 12px
}

[data-dpr="2"] .page-container .form-wrapper li span {
    font-size: 24px
}

[data-dpr="3"] .page-container .form-wrapper li span {
    font-size: 36px
}

.page-container .form-wrapper li span.auto-login {
    float: left;
    padding-left: .746667rem;
    cursor: pointer;
    background-image: url(../imgs/icons/icon_rect_ckbox.png);
    background-repeat: no-repeat;
    background-size: .533333rem .533333rem;
    background-position: 0
}

    .page-container .form-wrapper li span.auto-login.checked {
        background-image: url(../imgs/icons/icon_rect_ckbox_checked.png)
    }

.page-container .form-wrapper li span.account-login, .page-container .form-wrapper li span.tip {
    float: right
}

.page-footer {
    width: 100%;
    border-top: 1px solid #303242
}

    .page-footer .wechat-login {
        width: 1.2rem;
        margin: 0 auto;
        padding-top: .4rem
    }

        .page-footer .wechat-login .img {
            display: block;
            width: 1.2rem;
            height: 1.2rem;
            border-radius: 50%;
            overflow: hidden
        }

            .page-footer .wechat-login .img img {
                width: 100%
            }

        .page-footer .wechat-login .text {
            padding-top: .213333rem;
            text-align: center;
            color: #303242
        }

[data-dpr="1"] .page-footer .wechat-login .text {
    font-size: 10px
}

[data-dpr="2"] .page-footer .wechat-login .text {
    font-size: 20px
}

[data-dpr="3"] .page-footer .wechat-login .text {
    font-size: 30px
}
.close {
    width: 100%;
    height: 3.2rem;
    background: #fff;
    line-height: 3.2rem;
}

    .close span {
        width: 8rem;
        display: block;
        padding-top: 0.15rem;
        float: left;
        text-align: left;
        height: 1.066667rem;
        line-height: 1.066667rem;
    }

        .close a {
            color: #fe4320;
        }

    .close p:first-of-type {
        width: 10%;
        display: block;
        height: 1.066667rem;
        background: url(http://m.joyincake.com/incake/assets/imgs/shopping-cart/no-like.png) no-repeat;
        background-size: 0.546667rem 0.546667rem;
        background-position: 0.166667rem 0.3933333rem;
        text-align: left;
        float: left;
        margin-left: 0.5rem;
    }

.close p.xactive {
    background: url(http://m.joyincake.com/incake/assets/imgs/shopping-cart/like.png) no-repeat;
    background-size: 0.546667rem 0.546667rem;
    background-position: 0.166667rem 0.3933333rem;
    text-align: left;
    float: left;
}

@keyframes a {
    0% {
        background-position: -2.666667rem 0
    }

    to {
        background-position: 2.666667rem 0
    }
}