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

.login-layout {
	display: flex;
    width: 100%;
    height: 100%;
	min-width: 1200px;
    min-height: 700px;
}

.login-layout .layout-content {
    background: url(../images/bgground.jpg);
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.login-layout .content-login-layout {
    width: 320px;
    height: 320px;
    display: flex;
}

.login-layout .login-layout-main {
    width: 470px;
    height: 374px;
    background-color: rgb(8 70 121 / 40%);
    display: flex;
    border: 1px #50A5EB dashed;
    position: relative;
}

.login-layout .login-type {
    width: 37px;
    height: 110px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    writing-mode: tb-rl;
    letter-spacing: 5px;
    border-top-right-radius: 5px;
    background-color: #ececec;
    border-bottom-right-radius: 5px;
    margin-top: 12px;
    font-family: serif;
    font-weight: 600;
    color: #808080;
	cursor: pointer;
}

.login-layout .login-type-select {
	background-color: #ffffff;
	color: #6262f8;
}

.login-layout-border1{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 40px;
    width: 40px;
    border-left: 4px #5AB4FE solid;
    border-top: 4px #5AB4FE solid;
}

.login-layout-border2{
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 40px;
    width: 40px;
    border-left: 4px #5AB4FE solid;
    border-bottom: 4px #5AB4FE solid;
}

.login-layout-border3{
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 40px;
    width: 40px;
    border-right: 4px #5AB4FE solid;
    border-bottom: 4px #5AB4FE solid;
}

.accountLogin-div {
	margin: 44px;
    flex: 1;
    margin-top: 37px;
}

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

.accountLogin-title-div{
    background: url(../images/logo.png);
    background-size: 100% 100%;
    width: 300px;
    height: 59px;
}

.account-input{
    border: 2px #0971B2 solid;
    border-radius: 3px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    height: 40px;
    padding: 0 20px 0 50px;
    margin: 14px 0px 0px 0px;
    transition: background 0.3s ease-in-out;
    width: 308px;
    background: url(../images/accountSign.png) no-repeat 19px 50%;
    background-color: #074474;
    background-size: 20px;
    outline: none;
}

input::-webkit-input-placeholder { 
    color: #ffffff; 
} 
  /* Mozilla Firefox 4 to 18 */ 
input:-moz-placeholder { 
    color: #ffffff; 
} 
  /* Mozilla Firefox 19+ */ 
input::-moz-placeholder { 
    color: #ffffff; 
} 
  /* Internet Explorer 10+ */ 
input:-ms-input-placeholder { 
    color: #ffffff; 
}

.password-input {
	background: url(../images/passwordSign.png) no-repeat 19px 50%;
    background-color: #074474;
    background-size: 20px;
}

.verify-input{
    border: 2px #0971B2 solid;
    border-radius: 3px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
    height: 40px;
    padding: 0 20px 0 20px;
    margin: 14px 0px 0px 0px;
    transition: background 0.3s ease-in-out;
    width:  218px;
    background-color: #074474;
    background-size: 20px;
    outline: none;
}

.loginViv-verify{
    display: flex;
}

.verify-code{
    margin-top: 14px;
    margin-left: 15px;
    flex: 1;
}

.accountLogin-checking-btn	{
	border: 0px;
    border-radius: 6px;
    color: #727272;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.8em;
    height: 40px;
    margin: 14px 0px 0px 0px;
    width: 291px;
    background-color: #e2f2ff;

	position: relative;
	cursor: pointer;
}

.bggreen {
	background-color: #77ff7b;
}

.checking-btn-text {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 7px;
    left: 84px;
}

.checking-btn-sign {
    background: url(../images/checkSign.png);
    background-size: 100% 100%;
    width: 25px;
    height: 25px;
    margin-right: 6px;
}

.accountLogin-login-btn	{
    border: 0px;
    border-radius: 6px;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    height: 40px;
    margin: 30px 0px 0px 0px;
    width: 381px;
    background-color: #1098FE;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.accountLogin-login-btn:hover {
	opacity: 0.8;
}

.error-div {
    position: absolute;
    font-size: 13px;
    color: red;
    bottom: -21px;
    text-align: center;
    width: 382px;
}
.login-form {
	position: relative;
}

.qrcodeLoginDiv-div {
    flex: 1;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.qrcodeLogin-content {
	flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrcodeLogin-content {
	flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qrcodeLogin-content-qrcode {
    width: 176px;
    height: 176px;
    border: 1px solid #a9a9a9;
}

.qrcodeLogin-content-phone{
    width: 118px;
    height: 134px;
    margin-left: 16px;
    background: url(../images/phone.png);
    background-size: 100% 100%;
}

.qrcodeLogin-text{
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    color:#ffffff;
}

.switch-icon{
    position: absolute;
    width: 56px;
    height: 56px;
    right: 0px;
    background: url(../images/switchQr.png);
    background-size: 100% 100%;
    cursor: pointer;
}

.switch-div{
    position: absolute;
    width: 70px;
    height: 24px;
    right: 41px;
    top: 14px;
    background: url(../images/switchTextQr.png);
    background-size: 100% 100%;
    cursor: pointer;
}

.switch-icon-qr{
    position: absolute;
    width: 56px;
    height: 56px;
    right: 0px;
    background: url(../images/switchAccount.png);
    background-size: 100% 100%;
}

.switch-div-qr{
    position: absolute;
    width: 70px;
    height: 24px;
    right: 41px;
    top: 14px;
    background: url(../images/switchTextAccount.png);
    background-size: 100% 100%;
    cursor: pointer;
}

.qrcodeLoginDiv-logo{
    background: url(../images/logo.png);
    background-size: 100% 100%;
    width: 300px;
    height: 59px;
    margin-top: 27px;
}