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

body {
    font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
    min-height: 100vh;
    padding-top: 13vw;
    box-sizing: border-box;
    background: -webkit-radial-gradient(50vw 95vh, circle, white, transparent), url("../icon/login_reg_bg.jpg") no-repeat;
    background: radial-gradient(circle at 50vw 95vh, white, transparent), url("../icon/login_reg_bg.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
}

body,
h1,
h2,
p {
    margin: 0;
}

a {
    text-decoration: none;
}

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


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

header {
    width: 100%;
    height: 13vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 1;
}

header span {
    width: 13%;
}

.back {
    display: block;
    width: 13%;
    height: 100%;
    background: url("../icon/detail_navi_icons.png") no-repeat;
    background-size: 200% 80%;
    background-position: left center;
}

.title {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    font-size: 1rem;
    color: #4c4c4c;
    margin-right: 13%;
}

.container {
    margin: 0 4.17vw;
}

.top::before {
    content: "";
    display: inline-block;
    width: 8.518vw;
    height: 5.833vw;
    margin: 4.815vw 0;
    background-image: url("data:image/png;base64,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");
    background-size: 100% 100%;
}

.top {
    color: #ffd956;
    margin-bottom: 10.83vw;
}

.top h2 {
    line-height: 1;
    font-size: 1rem;
}

.main {
    background-color: white;
    border-radius: 1.852vw;
    color: #636363;
    padding-bottom: 5vw;
}

.main::before {
    display: block;
    content: "";
    height: 1px;
    background-color: #ffd956;
    position: relative;
    top: 4.167vw;
}

.main .avatar {
    -webkit-transform: translateY(-6.57vw);
    transform: translateY(-6.57vw);
    width: 16.67vw;
    height: 16.67vw;
    border: .3vw solid #ffd956;
    border-radius: 50%;
    box-sizing: border-box;
}

.main > p {
    width: 77%;
    margin: -6.57vw auto 0;
    font-size: .8rem;
    padding: .5em 0 1em;
}

.spec {
    margin: 2vw 0 4vw;
    font-size: .8rem;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.spec div {
    width: 33.33%;
    margin-bottom: 5vw;
}

.spec div::before {
    content: "";
    display: inline-block;
    width: 10.2777vw;
    height: 7.87vw;
    background: url('../icon/uc/ktvip.png') no-repeat;
    background-size: 61.6667vw 100%;
}

.spec .kefu::before {
    background-position: -10.2778vw;
}

.spec .fahuo::before {
    background-position: -20.2556vw;
}

.spec .dijia::before {
    background-position: -30.8333vw;
}

.spec .xiaji::before {
    background-position: -41.1111vw;
}

.spec .xian::before {
    background-position: -51.3889vw;
}

.button {
    width: 80%;
    height: 10.8333vw;
    border-radius: 6vw;
    margin-bottom: 4.1667vw;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
}

.button .up {
    color: #dd1313;
    line-height: 2;
}

.button .down {
    color: #3a3a3a;
    font-size: .7rem;
    line-height: 1;
}

.kaitong {
    position: relative;
    background-color: #f5ca3a;
}

.kaitong span {
    display: block;
    width: 10em;
    color: white;
    font-size: .6rem;
    line-height: 2;
    background-color: #dd1313;
    position: absolute;
    top: 10%;
    left: -8%;
    -webkit-transform: rotate(-30deg);
    transform: rotate(-30deg);
}

.inputcode {
    border: 1px solid #424242;
}

.dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    display: none;
}


.dialog_content {
    width: 100%;
    background-color: white;
    position: absolute;
    bottom: 0;
}

.dialog_main {
    min-height: 40vh;
    text-align: left;
    line-height: 3;
}

.dialog_title {
    color: #e0b44f;
}

.dialog_main input {
    color: #656565;
    line-height: 2.5;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #e8eff1;
}

.dialog button {
    width: 100%;
    height: 13.8vw;
    border-top: 1px solid #ff8600;
    border-right: 0;
    border-bottom: 1px solid #ff8600;
    border-left: 0;
    color: #ff8600;
    font-size: 1rem;
    background-color: white;
}

.dialog_close {
    position: absolute;
    top: 1vw;
    right: 1vw;
    line-height: 0;
    display: block;
    width: 8vw;
    padding: 4vw 0;
    border-radius: 50%;
    border: 1px solid #ff8600;
    font-size: 1.3rem;
}

footer {
    color: #3a3a3a;
    font-size: .7rem;
    line-height: 4;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

footer::before,
footer::after {
    display: block;
    content: "";
    height: 1px;
    background-color: #afafaf;
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
}

footer::before {
    margin-right: 1vw;
}

footer::after {
    margin-left: 1vw;
}