html,
body {
margin: 0;
width: 100%;
height: 100%;

}

h4,
p,
span {
margin: 0;
padding: 0;
}

body {
width: 100%;
height: 100%;
position: fixed;
background-size: cover;
background-repeat: no-repeat;
}

.main {
height: 100%;
/* width: 80%;
height: 500px;
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto; */
}

.login-box {
width: 40%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;

}
.login-wrap{
width: 70%;
margin: 100px auto;
}

.login-title{
margin-bottom: 40px;
}
.login-title h4 {
font-size: 30px;
font-weight: bold;
color: #414141;
margin: 10px auto;
letter-spacing: 2px;

}

.login-title span {
font-size: 12px;
font-weight: 500;
color: #adadad;
}

.title-box {
display: flex;
justify-content: left;
align-items: center;
}

.login-title p {
font-size: 12px;
font-weight: 500;
color: #00cbff;
}
.link{
position: absolute;
bottom: 10px;
font-size: 14px;
cursor: pointer;
z-index: 666;
width: 100%;
text-align: center;
color: #FFFFFF;


}
.login-card {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.card1,
.crad2 {
width: 100%;
margin-bottom: 30px;
}

.card1 p,
.crad2 p {
font-size: 14px;
font-weight: 500;
color: #b3b3b3;
margin-bottom: 8px;
}

/*整体form位置*/
/*取消输入框边框，调整大小*/
.login-form {
position: relative;
width: 100%;
margin-top: 20px;
}

.login-form input {

font-weight: 500;
border: none;
background-color: transparent;
}

.login-form input:focus {
outline: none;
}


.password,
.username {
height: 35px;
padding: 15px;
background: #fff;
border: 1px solid #e7e7e7;
border-radius: 5px;
display: flex;
justify-content: left;
align-items: center;
position: relative;
}

.password input {
width: 100%;
height: 100%;
color: #2f2f2f;

}

.login-form .errormsg {
color: red;
font-family: monospace;
position: absolute;
top: 178px;
left: 0;
text-align: center;
}

.login-bottom {
display: flex;
justify-content:space-between;
align-items: center;
margin-bottom: 80px;
}

.loginbtn {
position: relative;
width: 20%;
max-width: 160px;
padding: 10px 0;
background: #3e88f3;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
border: 1px solid #3e88f3;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.loginbtn::before {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background-color: #000;
border: inherit;
border-color: #000;
border-radius: inherit;
transform: translate(-50%, -50%);
opacity: 0;
content: ' ';

}
.loginbtn:active::before {
opacity: 0.5;
}

.register {

background: #d8e7fd;
width: 100%;
padding: 20px  10px;
display: flex;
justify-content: space-between;
align-items: center;
letter-spacing: 2px;
}
.register p{
width: 50%;
text-align: center;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.registerbtn{
width: 50%;
background: #d8e7fd;
color: #3e88f3;
font-size: 16px;
border: 1px solid #d8e7fd;
cursor: pointer;
}


/* 水波纹动画 */
.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
animation-name: ripple;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}

/* 动画关键帧 */
@keyframes ripple {
from {
transform: scale(0);
opacity: 1;
}

to {
transform: scale(2);
opacity: 0;
}
}

.helloimg {
width: 140px;
height: 24px;
margin-bottom: 20px;
background-size: 100% 100%;
background-repeat: no-repeat;
}

.login-offside {
background: #6ea9ff;
height: 100%;
width: 60%;
position: relative;
}

.welcome {
position: absolute;
top: 45%;
left: 50%;
transform: translate( -50% ,-50%);
font-size: 28px;
letter-spacing: 2px;
color: #FFFFFF;
text-align: center;
white-space:nowrap

}

.login-offside p {
font-size: 60px;
font-weight: bold;
color: #FFFFFF;
letter-spacing: 2px;
white-space: nowrap;
margin-bottom: 34px;

}

.noremember {
display: flex;
justify-content: left;
align-items: center;
}

.noremember span {
font-size: 12px;
color: #c2c2c2;
cursor: pointer;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
background: none !important;
/*background-image: none !important;*/
color: #FFFFFF !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

.successiocn,
.passwordiocn {
position: absolute;
right: 20px;
width: 20px;
height: 20px;
display: none;
}
/* 波浪 */
.personalCenter {
position: absolute;
/* background-image: linear-gradient(to right, #00ceff 0%, #7582ff 100%); */
/* background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%); */
/* background: #333; */
width: 100%;
height: 600px;
bottom: 0;

}
.wave {
position: absolute;
bottom: 0;
width: 100%;
height: 200px;
background: url("http://www.fdguozi.com/admin/loadLoginPage?fileId=402880848d1076da018d108eac5a01ba&pathName=/assets/wave.png");
background-size: 1000px 200px;
}

.personalCenter .wave1 {
opacity: 1;
bottom: 0;
z-index: 100;
animation: animate 4s linear infinite;
}

.personalCenter .wave2 {
opacity: 0.5;
bottom: 10px;
z-index: 99;
animation: animate2 4s linear infinite;
}

.personalCenter .wave3 {
opacity: 0.2;
bottom: 15px;
z-index: 98;
animation: animate 2s linear infinite;
}

.personalCenter .wave4 {
opacity: 0.7;
bottom: 20px;
z-index: 99;
animation: animate2 2s linear infinite;
}

@keyframes animate {
0% {
background-position-x: 1000px;
}

100% {
background-position-x: 0px;
}
}

@keyframes animate2 {
0% {
background-position-x: 0px;
}

100% {
background-position-x: 1000px;
}
}

/* 修改checkbox样式 */
/* 隐藏原始的 checkbox */
input[type="checkbox"] {
display: none;
}

/* 自定义样式 */
.custom-checkbox {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid #cccccca8;
border-radius: 4px;
background-color: white;
cursor: pointer;
margin-right: 5px;
}

/* 根据选中状态修改样式 */
input[type="checkbox"]:checked+.custom-checkbox {
background-color: #1a2a54;
border: 1px solid #1a2a54;
background-image: url('http://www.fdguozi.com/admin/loadLoginPage?fileId=402880848d1076da018d108eac5a01ba&pathName=/assets/hook.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}