@charset "utf-8";

html {
    color: #333;
    background: #fff;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizelegibility;
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

article,
aside,
blockquote,
body,
button,
code,
dd,
details,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

body,
button,
input,
select,
textarea {
    font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

blockquote {
    position: relative;
    color: #999;
    font-weight: 400;
    border-left: 1px solid #1abc9c;
    padding-left: 1em;
    margin: 1em 3em 1em 2em
}

@media only screen and (max-width:640px) {
    blockquote {
        margin: 1em 0
    }
}

abbr,
acronym {
    border-bottom: 1px dotted;
    font-variant: normal;
    text-decoration: none
}

abbr {
    cursor: help
}

del {
    text-decoration: line-through
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: 400
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

q:after,
q:before {
    content: ""
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative
}

:root sub,
:root sup {
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

a {
    color: #1abc9c
}

a:hover {
    text-decoration: underline
}

.typo a {
    border-bottom: 1px solid #1abc9c
}

.typo a:hover {
    border-bottom-color: #555;
    color: #555
}

.typo a:hover,
a,
ins {
    text-decoration: none
}

.typo-u,
u {
    text-decoration: underline
}

mark {
    background: #fffdd1;
    border-bottom: 1px solid #ffedce;
    padding: 2px;
    margin: 0 5px
}

code,
pre,
pre tt {
    font-family: Courier, Courier New, monospace
}

pre {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1em 1.5em;
    display: block;
    -webkit-overflow-scrolling: touch
}

hr {
    border: none;
    border-bottom: 1px solid #cfcfcf;
    margin-bottom: .8em;
    height: 10px
}

.typo-small,
figcaption,
small {
    font-size: .9em;
    color: #888
}

b,
strong {
    font-weight: 700;
    color: #000
}

[draggable] {
    cursor: move
}

.clearfix:after,
.clearfix:before {
    content: "";
    display: table
}

.clearfix:after {
    clear: both
}

.clearfix {
    zoom: 1
}

.textwrap,
.textwrap td,
.textwrap th {
    word-wrap: break-word;
    word-break: break-all
}

.textwrap-table {
    table-layout: fixed
}

.serif {
    font-family: Palatino, Optima, Georgia, serif
}

.typo-dl,
.typo-form,
.typo-hr,
.typo-ol,
.typo-p,
.typo-pre,
.typo-table,
.typo-ul,
.typo dl,
.typo form,
.typo hr,
.typo ol,
.typo p,
.typo pre,
.typo table,
.typo ul,
blockquote {
    margin-bottom: 1.2em
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    font-weight: 100;
    color: #000;
    line-height: 1.35
}

.typo-h1,
.typo-h2,
.typo-h3,
.typo-h4,
.typo-h5,
.typo-h6,
.typo h1,
.typo h2,
.typo h3,
.typo h4,
.typo h5,
.typo h6 {
    margin-top: 1.2em;
    margin-bottom: .6em;
    line-height: 1.35
}

.typo-h1,
.typo h1 {
    font-size: 2em
}

.typo-h2,
.typo h2 {
    font-size: 1.8em
}

.typo-h3,
.typo h3 {
    font-size: 1.6em
}

.typo-h4,
.typo h4 {
    font-size: 1.4em
}

.typo-h5,
.typo-h6,
.typo h5,
.typo h6 {
    font-size: 1.2em
}

.typo-ul,
.typo ul {
    margin-left: 1.3em;
    list-style: disc
}

.typo-ol,
.typo ol {
    list-style: decimal;
    margin-left: 1.9em
}

.typo-ol ol,
.typo-ol ul,
.typo-ul ol,
.typo-ul ul,
.typo li ol,
.typo li ul {
    margin-bottom: .8em;
    margin-left: 2em
}

.typo-ol ul,
.typo-ul ul,
.typo li ul {
    list-style: circle
}

.typo-table td,
.typo-table th,
.typo table caption,
.typo table td,
.typo table th {
    border: 1px solid #ddd;
    padding: .5em 1em;
    color: #666
}

.typo-table th,
.typo table th {
    background: #fbfbfb
}

.typo-table thead th,
.typo table thead th {
    background: #f1f1f1
}

.typo table caption {
    border-bottom: none
}

.typo-input,
.typo-textarea {
    -webkit-appearance: none;
    border-radius: 0
}

.typo-em,
.typo em,
caption,
legend {
    color: #000;
    font-weight: inherit
}

.typo-em {
    position: relative
}

.typo-em:after {
    position: absolute;
    top: .65em;
    left: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"
}

.typo img {
    max-width: 100%
}

#top-bar,
body {
    background-color: #ced3e1
}

#top-bar {
    height: 270px;
    max-height: 32vh;
    background-image: url(bg.png);
    background-repeat: no-repeat;
    background-position: 49%;
    background-size: auto 100%
}

#top-bar-box {
    margin: 0 auto;
    max-width: 380px;
    min-width: 290px;
    height: 100%;
    padding: 0 20px;
    position: relative
}

.content-box {
    margin: 0 auto;
    max-width: 380px;
    min-width: 290px;
    min-height: 50vh;
    padding: 40px 20px 20px
}

.content-box input {
    font-family: Monaco, PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
    font-weight: 400;
    color: #666;
    width: 100%;
    padding: 10px;
    border: 2px solid #ebf0f5;
    background-color: #ebf0f5;
    margin: 0 0 24px;
    border-radius: 4px;
    outline: none;
    -webkit-appearance: none
}

.content-box input:focus {
    border: 2px solid #77d1ff
}

#last-password {
    height: 48px;
    padding: 10px;
    background-color: #ebf0f5;
    border-radius: 4px;
    position: relative
}

#last-password button {
    border: none
}

#last-password .copy {
    background-color: #ced3e1;
    color: #fff;
    height: 48px;
    width: 88px;
    padding: 10px 0;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0 4px 4px 0;
    cursor: pointer
}

#last-password .copied {
    background-color: #2ecc71 !important
}

#last-password:hover .show-password {
    opacity: .8
}

#last-password .password {
    font-family: Monaco, consolas, monospace, sans-serif;
    font-weight: 400;
    color: #666
}

@media (any-hover:hover) {
    #last-password .copy:hover {
        background-color: #0088cf
    }
}

.show-password {
    cursor: pointer;
    padding: 0 3px;
    float: right;
    margin-right: 90px;
    background-color: transparent;
    opacity: .1;
    outline: none
}

.svg-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -.125em;
    background-repeat: no-repeat;
    background-size: 1em 1em;
    background-position: 50%
}

.icon-open-eye {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 011.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0114.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 011.172 8z"/><path d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z"/></svg>')
}

.icon-close-eye {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 00-2.79.588l.77.771A5.944 5.944 0 018 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0114.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 00-4.474-4.474l.823.823a2.5 2.5 0 012.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 01-4.474-4.474l.823.823a2.5 2.5 0 002.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 001.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 018 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884l-12-12 .708-.708 12 12-.708.708z"/></svg>')
}

.hidden {
    display: none
}

#footer {
    text-align: center;
    font-size: 12px;
    color: #9299a4
}

#footer a.beian {
    color: #b0b8c4
}

#footer a.beian:hover {
    color: #646b75
}