html {
    font-size: 3.6vw;
    letter-spacing: .1em;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
    background-color: #e5e5e5;
    box-sizing: border-box;
    min-height: 100vh;
    background: url("../icon/login_reg_bg.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

body,
p {
    margin: 0;
}

a {
    text-decoration: none;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}


img {
    width: 100%;
    height: 100%;
    display: block;
}

header {
    width: 100%;
    height: 13vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid #b0b0b0;
    margin-bottom: 25vw;
}

.back {
    display: block;
    width: 13%;
    height: 100%;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAANlBMVEUAAAD6+vr5+fnv7+/v7+/////8/Pz7+/vv7+/v7+/w8PD9/f3v7+/x8fHy8vL19fX4+Pj////oCDdAAAAAEXRSTlMAqa7x55WgpOPs3pvt18++s35dA20AAACfSURBVEjH7dZBD4MgDIbhttiCgG79/392BpZsFxM+E40H3/tzIDRQ2km3CEpX92qIKItvvQFhTbgAIjcxGSpmHhcJFbGLCogJFdxFeMQ9RLxAWBcVFvOZoqQmwktG4kKk2aGykjrYMZIxsejf8XmocuhJ+ZkKGWjEevEiw18jjwlyw/uJ6QQDzDXwiUPG4BXGhRCztrUHXq6C0U7wCvcB4eMe9u60CFYAAAAASUVORK5CYII=") no-repeat;
    background-size: 30% 30%;
    background-position: center;
}

.title {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: .2em;
    margin-right: 13%;
    color: white;
    text-align: center;
}

.up {
    padding: 14vw 0;
}

.avatar {
    width: 22vw;
    height: 22vw;
    margin: 0 auto;
    border-radius: 11vw;
    border: 1px solid #a2ddea;
}

.main {
    margin: 0 14vw;
}

form {
    color: white;
}

.item {
    border-bottom: 1px solid white;
    margin-bottom: 8vw;
}

.item::before {
    content: "";
    width: 6vw;
    height: 6vw;
    margin-bottom: 1vw;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHwAAAA+CAMAAADeUI/rAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF8/LzAAAAkEZoDAAAAAJ0Uk5T/wDltzBKAAABPklEQVR42uzYSxLCMAwDUPn+l2bFAshHklUyA82O1s5jIE0dow4OXDbxc5g4kb6T1xOAy+/Q83yw+Qb9/oHDAdj6Z/Q8H0S+og9DZ/mg8ml9Eji7PA4kr/Jhwxtg0yl9HsTj4sRUyHAtsPbyFhPRw/f6FscSV7+78sf08CLw6uHJ2SUcN37jf4PXaRzy7DBGansFXL2PI4Ybr1Sjsl/hOIWvK5m6GC+1hovjoOvKMK7W7Vn8/XS6OS+F8fGzW+dwY0fHdo2iSe83XWO182fj7Y4vbjJyM2D569G40QaJ4U4DKIVbzacQzh7Br1jt5vF/2Ytgn3Oh8RHHpZbPFTjf7MriYpsvikvP2GtsBte6qzm8s6MavbMv4GQxYXXUfwXX00N471V248dwtPAqe8UFmwPGQKon8y29Yrg9HgIMACibGDQyYUHfAAAAAElFTkSuQmCC");
    background-size: 200% 100%;
}

.pwd::before {
    background-position: -6vw;
}

input {
    color: white;
    font-size: 1rem;
    line-height: 1.5;
    padding-left: 2vw;
    border: 0;
    background-color: transparent;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
}

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

.verify input {
    border-bottom: 1px solid white;
}

.get_vcode {
    line-height: 0;
    padding: 3.5vw .5em;
    margin-left: 2vw;
    background-color: rgba(210, 210, 210, .24);
    border-radius: 4vw;
    min-width: 20vw;
    text-align: center;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
}

.tos {
    margin-top: 2vw;
    line-height: 1.5;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 21vw;
}

#tos_check {
    display: none;
}

#tos_check + label::before {
    content: "";
    display: inline-block;
    width: 3.7vw;
    height: 3.7vw;
    margin-right: 1vw;
    background: url("data:image/png;base64,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");
    background-size: 200% 100%;
}

#tos_check:checked + label::before {
    background-position: -3.7vw;
}

.tos a {
    color: #8dd9cc;
}

button {
    width: 100%;
    line-height: 11.48vw;
    border: 0;
    border-radius: 6vw;
    background-color: #a2ddea;
    color: white;
    font-size: 1.4rem;
    margin-top: 3vw;
}

.reg_btn {
    background-color: #8dd9cc;
}

.reg_btn:disabled {
    background-color: #aaa;
}

button i {
    display: inline-block;
    width: .3em;
}

.other {
    margin-top: 4vw;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.other a {
    color: white;
}

.reg {
    font-size: .9rem;
    line-height: 6.1vw;
    padding: 0 1.5em;
    border-radius: 4vw;
    background-color: rgba(181, 181, 181, .18);
}

.quick {
    margin-top: 10vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.quick p {
    color: white;
    padding: 0 .5em;
}

.quick::before,
.quick::after {
    content: "";
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    height: 1px;
    display: block;
}

.quick::before {
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%)
}

.quick::after {
    background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 100%)
}

.quick_wrap {
    margin: 7vw 0;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.quick_wrap a {
    margin: 0 2vw;
}

.quick_pic {
    width: 13.88vw;
    height: 13.88vw;
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
}