@import 'gm.less';
@import 'box.less';

.footer-h {
    .b_l_w;
    height: 18vw;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100vw;
    min-height: 18vw;
    border-top: 1px solid #f5f5f5;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .box;
    font-size: 3.2vw;
    background-color: #a7ddff;
    background-image: url(../images/footer-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    a {
        .center;
        padding-top: 10.5vw;
        width: 100%;
        height: 100%;
        position: relative;
        color: #333333;
        .b;

        &:before {
            content: '';
            position: absolute;
            left: calc(~'50% - 5.5vw');
            top: .5vw;
            width: 11vw;
            height: 11vw;
            background: no-repeat;
            background-size: 11vw 22vw;
        }
    }

    .a {
        color: #1677ff;

        &:before {
            background-position: 0% 100%;
        }
    }

    .loop(@num: 1) when(@num <=2) {
        .f@{num} {
            &:before {
                background-image: url("../images/di_@{num}.png");
            }
        }

        .loop(@num + 1);
    }

    .loop;

    span {
        position: absolute;
        .y50;
        right: 25%;
        top: 2vw;
        background: #c0060c;
        color: #fff;
        height: 4vw;
        min-width: 4vw;
        line-height: 4vw;
    }
}

.login {
    .b_l_w;
    padding: 0 4.8vw;

    .logo {
        .b_l_w;
        .center;
        height: 57.6vw;
        padding-top: 14.667vw;

        img {
            height: 35.467vw;
        }
    }

    .content {
        .b_l_w;
        background: rgba(255,255,255,.5);
        height: 84vw;
        box-shadow: -1.04vw 0.6vw 0.973vw 0.093vw rgba(209, 229, 226, 0.13);
        border-radius: 5.333vw;
        padding: 0 5.333vw;

        .i {
            .b_l_w;
            .box;
            .box-align-center;
            .b;
            font-size: 4vw;
            margin: 6vw 0 3vw;

            img {
                width: 3.2vw;
                margin-right: 2.533vw;
            }
        }

        input {
            .b_l_w;
            background-color: #f1fdfd;
            border: 0;
            border-radius: 5.333vw;
            height: 12.133vw;
            font-size: 3.467vw;
            padding: 0 6vw;

            &::-webkit-input-placeholder {
                color: #97a7c5;
            }
        }

        button {
            .b_l_w;
            .bs;
            font-size: 4.267vw;
            letter-spacing: 0.427vw;
            margin-top:6.267vw;
            height: 11.467vw;
            border-radius: 5.333vw;
            border: 0;
            background-image: linear-gradient(101deg, #79d336 0%, #5ecc0b 100%);
        }
    }
}

.re_pwd {
    width: 610/7.5vw;
    .mx-auto;

    > div {
        .b_l_w;
    }

    input::-webkit-input-placeholder {
        color: #b0b0b0;
    }

    .logo {
        .center;
        padding: 95/7.5vw 0 79/7.5vw 0;

        img {
            width: 383/7.5vw;
        }
    }

    .email {
        .center;
        font-size: 30/7.5vw;
        letter-spacing: 1/7.5vw;
        height: 177/7.5vw;
        line-height: 190/7.5vw;
    }

    .yzm {
        height: 107/7.5vw;
        border-radius: 53/7.5vw;
        border: solid 1/7.5vw #999999;
        overflow: hidden;
        margin-bottom: 77/7.5vw;

        input {
            .b_l;
            width: 408/7.5vw;
            height: 100%;
            border: 0;
            font-size: 26/7.5vw;
            padding-left: 30/7.5vw;
        }

        a {
            .b_r;
            .center;
            width: 199/7.5vw;
            display: block;
            height: 37/7.5vw;
            line-height: 37/7.5vw;
            border-left: 1/7.5vw solid #D7D7D7;
            color: #b0b0b0;
            font-size: 26/7.5vw;
            letter-spacing: 2/7.5vw;
            margin-top: 33/7.5vw;
        }
    }

    > .k {
        height: 107/7.5vw;
        border-radius: 53/7.5vw;
        border: solid 1/7.5vw #999999;
        overflow: hidden;
        margin-bottom: 47/7.5vw;
        .b_k;

        .i {
            .b_l;
            margin: 5/7.5vw 6/7.5vw;
            width: 94/7.5vw;
        }

        input {
            width: 80%;
            height: 100%;
            border: 0;
            font-size: 26/7.5vw;
            padding-left: 30/7.5vw;
            letter-spacing: 2/7.5vw;
            padding-right: 105/6.4vw;
        }

        .b_r {
            height: 100%;
            margin-top: -107/7.5vw;
            position: relative;

            img {
                width: 45/6.4vw;
            }

            padding: 0 35/6.4vw;
        }
    }

    .btn {
        .b_l_w;
        .center;
        margin: 47/7.5vw 0;
        height: 91/7.5vw;
        line-height: 91/7.5vw;
        display: block;
        background-color: #fff;
        border-radius: 46/7.5vw;
        font-size: 30/6.4vw;
    }

    .btn2 {
        .b_l_w;
        .bs;
        .center;
        margin-bottom: 47/7.5vw;
        height: 91/7.5vw;
        line-height: 91/7.5vw;
        display: block;
        background-color: #F0BC56;
        border-radius: 46/7.5vw;
        font-size: 27/7.5vw;
        letter-spacing: 2/7.5vw;
    }

    .forget {
        .b_l_w;
        margin-top: -2vw;
        .left;
        line-height: 50/7.5vw;
        font-size: 26/7.5vw;
        padding: 0 2vw;
        .bs;
        letter-spacing: 2/7.5vw;

        a {
            .bs;
            .b_r;
        }
    }
}

#vue-index {
    .b_l_w;
    padding: 0 5vw 5vw;
    font-size: 3.2vw;

    .to-set {
        .center;
        .b_k;
        .box;
        .box-align-center;
        .box-pack-center;
        position: absolute;
        right: 0;
        top: 4.4vw;
        width: 22.8vw;
        height: 7.067vw;
        box-shadow: -0.693vw 0.627vw 1.253vw 0.08vw rgba(25, 111, 151, 0.11);
        border-radius: 3.533vw 0 0 3.533vw;
        font-size: 3.333vw;

        img {
            height: 5.867vw;
            margin-right: .533vw;
        }
    }

    > div {
        .b_l_w;
    }

    .top {
        > div {
            .b_l_w;
        }

        .tit {
            .b;
            .center;
            margin: 5vw 0 2vw;
            font-size: 5.333vw;
        }

        .van-tabs__wrap {
            margin: 3vw 0 0;
        }

        .van-tabs__nav--card {
            margin: 0;
        }

        .s {
            .box;
            .box-align-center;
            margin: 4vw 0 2vw;

            i {
                margin-left: 1vw;
            }

            .a2 {
                display: block;
                padding: 0 2vw;
                margin-left: auto;
                height: 5.867vw;
                line-height: calc(~'5.867vw - 2px');
                border: solid 1px #fff;
                border-radius: 2.933vw;
            }
        }
    }

    .c {
        .b_k;
        border-radius: 2.667vw;
        margin-bottom: 3vw;
    }

    .c1 {
        .tit {
            .b_l_w;
            .b;
            .center;
            margin: 2vw 0;
            font-size: 3.733vw;
        }

        .list {
            .b_l;
            .w-50;
            height: 15vw;
            padding: 0 0 2vw 4vw;
            .box;
            .box-align-center;
            .box-wrap;

            p, b {
                .b_l_w;
            }

            b {
                color: #1677ff;

                span {
                    font-size: 3.2vw;
                }

                font-size: 4.267vw;
            }
        }
    }

    .c2 {
        padding: .267vw .4vw;

        .list {
            .b_l;
            .w-50;
            padding: 2vw 2vw 2vw 4vw;
            .box;
            .box-align-center;
            .box-wrap;
            border-right: 1px solid #eee;
            border-bottom: 1px solid #eee;

            &:nth-child(2n) {
                border-right: 0;
            }

            &:nth-last-child(-n+2) {
                border-bottom: 0;
            }

            p, b {
                .b_l_w;
            }

            font {
                vertical-align: top;
                font-size: 3.2vw;
                color: #bfbfbf;
                margin: .5vw 0 0 1vw;
                font-weight: normal;
            }

            b {
                color: #1677ff;

                span {
                    font-size: 3.2vw;
                }

                font-size: 4.267vw;
            }

            > div {
                .b_l_w;
                .box;
                .box-align-center;
                height: 3vw;

                .bar {
                    width: 29.067vw;
                    height: 0.933vw;
                    background-color: #bfbfbf;
                    border-radius: 0.333vw;
                    overflow:hidden;

                    > div {
                        height: 0.933vw;
                        background-color: #5ac4f6;
                        border-radius: 0.333vw;
                    }
                }

                span {
                    padding-left:2vw;
                    margin-left: auto;
                }
            }
        }
    }

    .c3 {
        padding: 0 5.8vw;

        > div {
            .b_l_w;
        }

        .tit {
            height: 12.267vw;
            border-bottom: 1px solid #efeeee;
            padding-top: 1vw;
            .box;
            .box-align-center;

            b {
                font-size: 3.733vw;
            }

            select {
                margin-left: auto;
                width: 15.067vw;
                height: 6vw;
                border-radius: 3vw;
                border: solid 0.133vw #5ac4f6;
            }
        }

        #es, #es2 {
            height: 60vw;

            canvas {
                width: 100% !important;
                height: 100% !important;
            }
        }

        .list {
            .l {
                .b_l_w;
                border-bottom: 1px solid #f0eeee;
                height: 46.401vw;
                overflow: hidden;

                ._c {
                    .b_l_w;
                    .box;
                    margin: 3.6vw 0;

                    img {
                        width: 7.067vw;
                        height: 8.267vw;
                        margin-right: 3.333vw;
                    }

                    ._m {
                        .box;
                        .box-align-center;
                        .box-wrap;
                        height: 8.267vw;
                        padding: 0 2vw 1vw 0;

                        > div {
                            .b_l_w;
                        }

                        ._t {
                            b {
                                font-size: 3.333vw;
                            }
                        }

                        ._bar {
                            width: 66.6vw;
                            height: 1.333vw;
                            background-color: #fafafa;
                            border-radius: 0.667vw;

                            div {
                                height: 1.333vw;
                                background-image: linear-gradient( #1677fe, #1677fe), linear-gradient( #fafafa, #fafafa);
                                background-blend-mode: normal, normal;
                                border-radius: 0.667vw;
                            }
                        }
                    }
                }
            }

            ._l {
                height: initial !important;
            }

            .toggle {
                .b_l_w;
                height: 12vw;
                line-height: 12vw;
                .center;
                font-size: 3.333vw;
                color: #939393;
            }
        }
    }

    .c4 {
        .tit {
            .b_l_w;
            .center;
            .b;
            height: 12vw;
            line-height: 12vw;
            font-size: 4.267vw;
            margin-bottom: 3vw;
        }

        .list {
            .b_l_w;
            .box;
            .box-align-center;
            padding: 0 5vw;

            .x {
                .b;
                width: 29.533vw;
                font-size: 3.333vw;
                margin-top: -6vw;
                margin-right: 4vw;

                span {
                    font-size: 4.667vw;
                    color: #5ac4f6;
                    margin: 0 1vw 0 0;
                    display: inline-block;
                    vertical-align: top;
                }
            }

            .c {
                width: 48vw;

                ._c {
                    .b_l_w;
                    height: 4vw;
                    line-height: 4vw;
                    margin-bottom: 3vw;
                    position: relative;
                    .box;
                    .box-align-center;
                    color: #bfbfbf;

                    span {
                        white-space: nowrap;
                        margin-right: 1vw;
                    }

                    ._bar {
                        width: 29.333vw;
                        height: 0.933vw;
                        background-color: #bfbfbf;
                        border-radius: 0.467vw;
                        margin: 0 2vw 0 1vw;

                        div {
                            height: 0.933vw;
                            background-image: linear-gradient( #5ac4f6, #5ac4f6), linear-gradient( #bfbfbf, #bfbfbf);
                            border-radius: 0.467vw;
                        }
                    }

                    .p1 {
                        color: #5ac4f6;
                        position: absolute;
                        top: -2.5vw;
                        left: 12.667vw;
                    }
                }
            }
        }
    }

    .c5 {
        .list {


            .x {
                .b;
                width: 20.533vw;
                font-size: 3.333vw;
                white-space: nowrap;
                margin-top: -6vw;

                span {
                    font-size: 4.667vw;
                    color: #5ac4f6;
                    margin: 0 1vw 0 0;
                    display: inline-block;
                    vertical-align: top;
                }
            }

            .c {
                width: 58vw;

                ._c {
                    ._bar {
                        width: 40vw;
                        height: 1.733vw;
                        border-radius: 0.867vw;

                        div {
                            height: 1.733vw;
                            border-radius: 0.867vw;
                        }
                    }

                    .p1 {
                        color: #5ac4f6;
                        position: absolute;
                        top: -3vw;
                        left: 4vw;
                    }

                    .p2 {
                        color: #bfbfbf;
                        position: absolute;
                        right: 18vw;
                        top: -3vw;
                    }
                }
            }
        }
    }
}

#vue-my {
    .b_l_w;
    padding: 0 3.867vw;

    > div {
        .b_l_w;
    }

    .top {
        height: 34.667vw;
        .box;
        .box-align-center;
        padding-top: 6vw;

        img {
            .y50;
            width: 14.133vw;
            height: 14.133vw;
            background-color: #ffffff;
            border: solid 0.4vw #ffffff;
            margin-right: 1.867vw;
        }

        b {
            font-size: 5.333vw;
            color: #0045ea;
            text-shadow: -.3vw -.3vw 0 #fff, .3vw -.3vw 0 #fff, -.3vw .3vw 0 #fff, .3vw .3vw 0 #fff;
        }
    }

    .k {
        .b_l_w;
        background-image: linear-gradient(-10deg, rgba(213,242,255,.8) 0%, rgba(255,255,255,.8) 48%, rgba(209,238,255,.8) 100%);
        border-radius: 4vw;
        border: solid 0.4vw #ffffff;
        position: relative;
        margin-bottom: 3.467vw;

        .tit {
            position: absolute;
            left: -2vw;
            top: 2.933vw;
            height: 5.867vw;
            line-height: 5.867vw;
            background-image: linear-gradient(88deg, #1677ff 0%, #1fdfd2 100%);
            border-radius: 0 2.933vw 2.933vw 0;
            padding: 0 3.2vw 0 11.333vw;
            .b;
            .bs;
            font-size: 3.599vw;

            > img {
                position: absolute;
                left: 1.467vw;
                top: -1.067vw;
                height: 8.133vw;
            }

            &::before {
                content: '';
                background: url(/images/my-k.png) no-repeat;
                position: absolute;
                left: 0;
                bottom: -1.867vw;
                width: 1.6vw;
                height: 1.867vw;
                background-size: 100% 100%;
            }
        }
    }

    .k1 {
        .k;
        padding: 13.6vw 0 4.4vw 9.867vw;

        > b {
            font-size: 8.003vw;
            color: #e40000;
        }
    }

    .k2 {
        .k;
        padding: 14vw 0 5vw 9.6vw;

        .van-checkbox {
            margin: 4vw 0;
        }
    }

    .k3 {
        .k;
        padding: 14vw 10.8vw 5vw;

        a {
            height: 14vw;
            .box;
            .box-align-center;
            font-size: 3.867vw;
            color:#191919;
            border-bottom:1px solid #fff;
            &:last-child{
                border:0;
            }

            img {
                width: 4.8vw;
                margin-right: 5.067vw;
            }
        }
    }
}