/* --------Reset-------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,hr { margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
fieldset,img,abbr,acronym { border: 0; }
address,caption,cite,code,dfn,th,var,legend,b,i { font-size: 1em; font-style: normal; font-weight: 400; }
h1,h2,h3,h4,h5,h6 { font-size: 1em; }
ul { list-style: none; }
ol { padding-left: 1.1em; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* --------Base-------- */
body,legend,input,select,textarea,button { font: 400 14px/1.5 Roboto, "Noto Sans CJK", "Source Han Sans SC", "Source Han Sans", source-han-sans-simplified-c, 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; color: #222; background-color: #fff; }
a { color: #222; text-decoration: none; border-bottom: 1px solid transparent; transition-duration: .2s; }
a:hover { border-color: #222; }
abbr,acronym { border-bottom: 1px dotted #aaa; cursor: help; }
p { margin-bottom: 1em; }
th,td { padding: 10px; }
strong { font-weight: 700; }
input,textarea { padding: 2px 4px; }
input,textarea,button { -webkit-appearance: none; border: 0; border-radius: 0; }
button { cursor: pointer; }
textarea { line-height: 1.5; overflow: auto; resize: none; }
small { font-size: .9em; }
code,kbd,pre,samp { font-family: Consolas, 'courier new', monospace; }
input[disabled], input[readonly], button[disabled] { cursor: not-allowed; }
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* --------Global-------- */
.clearfix::after { content: '\20'; display: block; height: 0; clear: both; }
.red { color: #FF3B30; }
.fl { float: left; }
.fr { float: right; }
.fz0 { font-size: 0; line-height: 0; }
.br50 { border-radius: 50%; }
.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.vat { vertical-align: top; }
.mauto { margin-left: auto; margin-right: auto; }
.iconfont { display: inline-block; line-height: 1; }
.strong { font-weight: 700; }
.btn, button { display: inline-block; text-align: center; transition-duration: .2s; cursor: pointer; }
.bg-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* loading 动画 */
.animate-spin { animation: spin 1s infinite linear; }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(359deg); }
}

body { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background: url(../images/bg.jpeg) center no-repeat; background-size: cover; }

header { display: flex; align-items: center; }
  header .logo { width: 50px; height: 50px; background-repeat: no-repeat; background-position: center; background-size: contain; }
  header h1 { margin-left: 15px; font-size: 25px; }

.main { width: 300px; padding: 0 20px 30px; margin: 25px; background: rgba(255, 255, 255, .666); border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, .1); text-align: center; }
  .main > h2 { position: relative; margin: 30px 0 15px; }
    .main h2::before, .main h2::after { position: absolute; content: ''; top: 0; bottom: 0; height: 1px; width: 33%; margin: auto; }
    .main h2::before { left: 0; background-image: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
    .main h2::after { right: 0; background-image: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(255, 255, 255, 0)); }
  .main > div { margin-top: 5px; }