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

html {
    --red: #e03224;
}

ul {
    padding: 0;
}

img {
    object-fit: contain;
}

header {
    background: #fff;
    height: 50px;
    line-height: 50px;

    i {
        font-size: 20px !important;
        position: absolute;
        left: 0;
        top: 14px;
    }

    a {
        color: #fff;
    }
}

.header_white {
    background: #fff;
    position: fixed;
    width: 100%;
    height: 45px !important;
    line-height: 45px;
    z-index: 99999;
    border-bottom: 1px solid #f8f8f8;

    * {
        color: #000 !important;
    }

    i {
        font-size: 25px !important;
        margin-top: -3px;
    }
}

.footer-h {
    .b_l_w;
    height: 70px;
}

footer {
    .b_k;
    height: 60px;
    width: 100%;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    z-index: 999;

    .w-20, .w-25, .w-50, .w33 {
        text-align: center;
        font-size: 13px;
        line-height: 14px;
    }

    a {
        color: #333333;
        width: 60px;
        height: 60px;
        display: block;
        line-height: 10px;
        margin-top: -5px;
        text-align: center;
    }
}

.f1, .f2, .f3, .f4, .f5 {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: 0% -0%;
    background-size: 40px 80px;
}

.f1 {
    background-image: url("../images/di_1.png");
}

.f2 {
    background-image: url("../images/di_2.png");
}

.f3 {
    background-image: url("../images/di_3.png");
}

.f4 {
    background-image: url("../images/di_4.png");
}

.f5 {
    background-image: url("../images/di_5.png");
}

.f_h {
    background-position: 0% 100%;
    color: #e8590c;
}

#di_bottom {
    .w-20 {
        position: relative;
    }

    .w-25 {
        position: relative;
    }

    .position-absolute {
        right: 20%;
        top: 5px;
        border-radius: 50%;
        background: #c0060c;
        color: #fff;
        font-size: 12px;
        height: 16px;
        min-width: 16px;
        line-height: 16px;
    }
}



.back {
    position: absolute;
    display: block;
    width: 80/7.5vw;
    .center;
    top: 35/7.5vw;
    left: 0;

    i {
        font-size: 60/7.5vw;
        color: #535353;
    }
}
html {
    --login-color: #e8590c;
}
//登录
.login {
    .b_l_w;
    padding: 0 6.667vw 8vw;

    > div {
        .b_l_w;
    }

    .logo {
        .box;
        .box-tb;
        .box-align-center;
        .box-pack-center;
        height: 58vw;

        img {
            width: 35.067vw;
        }

        b {
            font-size: 6.667vw;
            letter-spacing: 1.333vw;
        }
    }

    .k {
        border: solid 0.133vw rgba(253, 106, 60, 0.2);
        background: rgba(255,255,255,.6);
        border-radius: 4vw;
        padding: 0 4.667vw;
        position: relative;

        > div {
            .b_l_w;
        }

        .van-tabs {
            margin: 6vw 0 8vw;

            .van-tabs__wrap {
                height: 6.133vw;
            }

            .van-tabs__nav--line.van-tabs__nav--complete {
                padding: 0;
            }

            .van-tab__text {
                font-size: 5.333vw;
            }

            .van-tab--active {
                .van-tab__text {
                    .b;
                }
            }

            .van-tabs__nav {
                > div {
                    width: 50%;
                }

                > div:nth-child(1) {
                    border-right: 1px solid rgba(0,0,0,.5);
                    padding-right: 12vw;
                }

                > div:nth-child(2) {
                    padding-left: 12vw;
                }
            }
        }

        .input {
            height: 15.333vw;
            .box;
            .box-align-center;
            position: relative;
            border-bottom: 1px solid rgba(253, 106, 60, 0.2);
            padding-top: 4vw;

            .i {
                min-width: 8.667vw;
                height: 100%;
                .box;
                .box-center-center;
                padding-right: 1vw;

                img {
                    height: 4.667vw;
                }
            }

            input {
                .b_l;
                width: 40vw;
                border: 0;
                font-size: 3.733vw;
                height: 100%;
                background: transparent;

                &::-webkit-input-placeholder {
                    color: #b5b5b5;
                }
            }


            .hqyzm {
                background: var(--login-color);
                border: 0;
                height: 5.867vw;
                white-space: nowrap;
                position: absolute;
                right: 2.667vw;
                width: 20vw;
                font-size: 3.2vw;
                border-radius: 2.933vw;
                color: #fff;
            }
        }

        .tip {
            .box;
            .box-align-center;
            margin: 3.333vw 0 0;

            img {
                height: 4vw;
                margin: 0 1.333vw 0 .667vw;
            }

            color: #1b1b1b;
        }

        .btn {
            margin: 3.333vw 0 0;
            .box;
            .box-pack-between;
            .box-lr;

            a {
                letter-spacing: 0.32vw;
            }

            div {
                .b_l_w;
                .box;
                .box-align-center;
                font-size: 3.2vw;
                height: 4vw;
                line-height: 4vw;

                img {
                    width: 4vw;
                    height: 4vw;
                    margin-right: 1.333vw;
                }
            }
        }

        .order {
            .box;
            .box-wrap;
            .box-pack-around;

            div {
                .b_l_w;
                .box;
                .box-align-center;
                .box-pack-center;
                height: 5vw;

                span {
                    width: 13.333vw;
                    height: 1px;
                    display: block;
                    margin: 0 2.667vw;
                }

                span:first-child {
                    background-image: linear-gradient(90deg, #ffffff 0%, rgba(235, 235, 235, 0.35) 17%, rgba(137, 137, 137, 0.7) 100%);
                }

                span:last-child {
                    background-image: linear-gradient(90deg, rgba(137, 137, 137, 0.7) 0%, rgba(235, 235, 235, 0.35) 83%, #ffffff 100%);
                }
            }

            a {
                .box;
                .box-tb;
                .box-pack-center;
                .box-align-center;
                margin: 4vw 0 8vw;
                .w-33;

                img {
                    height: 7.333vw;
                    margin-bottom: 2.533vw;
                }
            }
        }

        > a, .submit {
            .b_l_w;
            .center;
            height: 13.333vw;
            background-color: var(--login-color);
            border-radius: 2vw;
            line-height: 13.333vw;
            border: 0;
            font-size: 4.8vw;
            letter-spacing: 0.48vw;
            .bs;
            margin-top: 6.8vw;
            .b;
        }

        .input .van-icon {
            margin-left: auto !important;
            height: 100%;
            .box;
            .box-align-center;
            margin-right: 5.333vw;
        }

        .agreement {
            width: 100%;
            .center;
            .box;
            .box-align-center;
            .box-pack-center;
            margin-top: 4.667vw;
            margin-bottom: 5vw;

            .van-checkbox__icon {
                .box;
                .box-align-center;
                margin-right: 1.2vw;
            }

            .van-checkbox__icon .van-icon {
                border: 1px solid #000;
                .box;
                .box-align-center;
                justify-content: center;
            }

            .van-checkbox__label {
                color: #000;
                margin-left: 0;
            }

            * {
                font-size: 3vw;
            }

            a {
                color: var(--login-color);
            }
        }

        .go {
            .center;
            margin: 5vw 0 5.6vw;

            a {
                font-size: 4vw;
            }
        }

        .order {
        }
    }
}
.logo-b {
    .b_l_w;
    .center;
    margin: 100px 0 50px 0;
}

/*忘记密码*/
.password {
    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;
        background: #fff;

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

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

        a {
            .b_r;
            .center;
            width: 198/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;
            display: flex;
            align-items: center;
        }
    }

    .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: var(--login-color);
        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;
        }
    }
}


//充值
.recharge {
    .mx-auto;
    width: 660/7.5vw;

    > .input {
        .b_l_w;
        .mt30;
        padding-bottom: 20px*.512;
        border-bottom: 1px solid #F8F8F8;
        .box;

        b {
            font-size: 50px*.512;
        }

        input {
            width: 100%;
            border: 0;
            font-size: 50px*.512;
        }
    }

    > p {
        margin-top: 75px*.512;
    }

    > span {
        .mt10;
        .b_l_w;
        .f13;
        color: #ff2828;
    }

    > .btn {
        .bs;
        .center;
        .b_l_w;
        .f18;
        margin-top: 65px*.512;
        height: 90px*.512;
        line-height: 90px*.512;
        background-color: #ff2828;
        border-radius: 45px*.512;
        letter-spacing: 1px;
    }

    /*.van-popup {
        background: transparent;
    }*/

    .tips {
        .b_k;
        width: 660/7.5vw;
        min-height: 650/7.5vw;
        border-radius: 10/7.5vw;

        > div {
            .b_l_w;
        }

        .t {
            .center;
            font-size: 40/7.5vw;
            margin: 50/7.5vw 0;
        }

        .c {
            padding: 0 30/7.5vw;
            font-size: 36/7.5vw;
            .center;

            span {
                color: #ff0000;
            }
        }

        .f {
            margin: 50/7.5vw 0;
            padding: 0 78/7.5vw;
            font-size: 32/7.5vw;
            line-height: 45/7.5vw;
        }

        .btn {
            margin: 50/7.5vw 0;
            padding: 0 60/7.5vw;

            a {
                .center;
                display: block;
                width: 250/7.5vw;
                height: 80/7.5vw;
                line-height: 80/7.5vw;
                border-radius: 40/7.5vw;
                letter-spacing: 1px;
            }

            .confirm {
                .b_l;
                border: solid 1px #f5392f;
                font-size: 34/7.5vw;
                color: #f5392f;
            }

            .modify {
                .b_r;
                .bs;
                background-color: #f5392f;
                font-size: 34/7.5vw;
            }
        }
    }
}


.red {
    color: #f56c6c;
}
.blue {
    color: #1989fa;
}
.yellow {
    color: #e6a23c;
}
.green {
    color: #07c160;
}
.black {
    color: #000000;
}