*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  font-size: 14px;
  background-color: #ecffff;
  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
    'Hiragino Sans GB', Arial, sans-serif;
}
.main {
  width: 100%;
  height: 100%;
  background: url('../images/back.png') center center no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.login {
  width: 700px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  align-items: center;
  background: url('../images/register.png') center center no-repeat;
  background-size: 100% 100%;
}
.title {
  background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 30px;
}
.loginButton {
  width: 330px;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  background: url('../images/orthogon.png') center center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
}
.login>div:nth-child(1){
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #Fff;
  font-size: 24px;
}
.card{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.card img{
  width: 21px;
  height: 23px;
  margin-right: 10px;
}
.card div{
  width: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #263E5F;
  padding: 3px 0;
}
.el-input__inner{
  background: #263E5F;
  border: 0;
  color: #fff;

}
/* top-[3px] */
/* z-[100] */

/* 显示隐藏未脱离文档流 */
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

/* 内边距 */
.p-0 {
  padding: 0px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.pt-0 {
  padding-top: 0px;
}
.pr-0 {
  padding-right: 0px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pl-0 {
  padding-left: 0px;
}
/* p-[5px] */

/* 外边距 */
.m-0 {
  margin: 0px;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.mt-0 {
  margin-top: 0px;
}
.mr-0 {
  margin-right: 0px;
}
.mb-0 {
  margin-bottom: 0px;
}
.ml-0 {
  margin-left: 0px;
}
/* m-[5px] */

/* 宽度 */
.w-full {
  width: 100%;
}
.w-screen {
  width: 100vw;
}
/* w-[32rem] */
/* min-w-[50%] */
/* max-w-[50%] */

/* 高度 */
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
/* h-[32rem] */
/* min-h-[50%] */
/* max-h-[32rem] */

/* 字体 */
.text-xs {
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
}
.text-sm {
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
}
.text-base {
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
}
.text-lg {
  font-size: 1.125rem; /* 18px */
  line-height: 1.75rem; /* 28px */
}
.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}
.text-2xl {
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
}
.text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}
.text-4xl {
  font-size: 2.25rem; /* 36px */
  line-height: 2.5rem; /* 40px */
}
.text-5xl {
  font-size: 3rem; /* 48px */
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem; /* 60px */
  line-height: 1;
}
.text-7xl {
  font-size: 4.5rem; /* 72px */
  line-height: 1;
}
.text-8xl {
  font-size: 6rem; /* 96px */
  line-height: 1;
}
.text-9xl {
  font-size: 8rem; /* 128px */
  line-height: 1;
}
/* text-[14px] */
/* 字体粗细font-weight */
/* font-[1100] */
/* https://tailwindcss.com/docs/font-weight */
/* 字体间距letter-spacing */
/* tracking-[.25em] */
/* 行高line-height */
/* leading-[3rem] */
/* 无列表样式 */
.list-none {
  list-style-type: none;
}
/* 小圆点 */
.list-disc {
  list-style-type: disc;
}
/* 数字列表 */
.list-decimal {
  list-style-type: decimal;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
/* 所有文本头尾对齐 */
.text-justify {
  text-align: justify;
}
/* 文本颜色 */
/* text-[#50d71e] */
/* https://tailwindcss.com/docs/text-color */
/* 下划线 */
.underline {
  text-decoration-line: underline;
}
/* 上划线 */
.overline {
  text-decoration-line: overline;
}
/* 中划线 */
.line-through {
  text-decoration-line: line-through;
}
/* 无划线 */
.no-underline {
  text-decoration-line: none;
}
/* 全小写 */
.lowercase {
  text-transform: lowercase;
}
/* 全大写 */
.uppercase {
  text-transform: uppercase;
}
/* 首字母大写 */
.capitalize {
  text-transform: capitalize;
}