html {font-size: 62.5%;height: 100%}
body {margin: 0 auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px;font-size: 1.2rem;background: #FFFFFF;width:100%;height: 100%;max-width:1920px;margin:0 auto; overflow-x:hidden}
img {border: none;}
ul li {list-style-type: none;}
ul, form, p, a, img, table, tr, td, li, dd, dt, dl, span {margin: 0;padding: 0;list-style: none;}
img{display: inline-block;vertical-align: top;max-width: 100%;height: auto;aspect-ratio:auto;}
a {text-decoration: none;color: #333;outline: none;transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-webkit-transition: 0.5s;}
h1,h2 {margin: 0;padding: 0;font-weight: normal;color: #333;}
.clear {clear: both;}

::selection { color: #fff; background: #0EB3FB;}
* { margin: 0px; padding: 0px; -moz-box-sizing: border-box; box-sizing: border-box; }

.page-login-wrap {position: relative;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: url(../img/ailogin-bgi.png) no-repeat center center;background-size: cover;flex-wrap: wrap;}
.page-login-wrap .logo {position: absolute;top: 30px;left: 40px;width: auto;height: 70px;}
.page-login-wrap .logo a {display: block;height: 100%;width: 100%;}
.page-login-wrap .logo img {position: relative;display: inline-block;vertical-align: top;width: auto;max-width: 100%;max-height: 100%;}
.page-login-wrap .body-box {position: relative;width: 100%;max-width: 1230px;padding: 0 15px;margin: 100px auto}
.page-login-wrap .body-box .login-box {position: relative;width: 460px;max-width: 100%;padding: 60px 40px;background: #FFFFFF;border-radius: 20px;margin-left: auto}
.page-login-wrap .body-box .login-box .tit{position: relative;width: 100%;text-align: center;font-weight: bold;font-size: 30px;color: #222222;line-height: 38px;}
.page-login-wrap .body-box .login-box .form-box {position: relative;width: 100%;padding-top: 40px;}
.page-login-wrap .body-box .login-box .form-box .login-box-form {position: relative;width: 100%;display: block;}

.page-login-wrap .body-box .login-box .form-box .item-input {position: relative;width: 100%;margin-bottom: 26px;}
.page-login-wrap .body-box .login-box .form-box .item-code{position: relative;width: 100%;padding-right: 118px;} 
.page-login-wrap .body-box .login-box .form-box .item-input .name{position: relative;width: 100%;font-size: 14px;color: #222222;line-height: 22px;margin-bottom: 6px;text-align: left;display: block;}
.page-login-wrap .body-box .login-box .form-box .item-input .name span{color: red;}
.page-login-wrap .body-box .login-box .form-box .item-input input {position: relative;width: 100%;height: 50px;background: #FFFFFF;border-radius: 6px;border: 1px solid #DDDDDD;padding: 5px 14px;font-size: 14px;line-height: 24px;}
.page-login-wrap .body-box .login-box .form-box .item-code .item-code-img{position: absolute;right: 0;bottom: 0;width: 110px;height: 50px;text-align: center;cursor: pointer;overflow: hidden;display: flex;align-items: center;justify-content: center;background: #fff;}
.page-login-wrap .body-box .login-box .form-box .item-code .item-code-img .yanzheng{text-align: center;max-height: 50px;}
.page-login-wrap .body-box .login-box .form-box .item-btn{position: relative;width: 100%;padding-top: 14px}
.page-login-wrap .body-box .login-box .form-box .item-btn .btnn {position: relative;width: 100%;height: 50px;font-size: 16px;color: #FFFFFF;line-height: 30px;background: #010920;border-radius: 6px;}
.page-login-wrap .body-box .login-box .form-box .item-btn .btnn:hover{background: #444444;}
@media screen and (max-width: 1259px) {
    .page-login-wrap .logo {top: 24px;left: 32px;height: 66px;}
    .page-login-wrap .body-box {max-width: 960px;margin: 90px auto}
    .page-login-wrap .body-box .login-box {width: 420px;padding: 48px 30px;border-radius: 18px;}
    .page-login-wrap .body-box .login-box .tit{font-size: 28px;line-height: 36px;}
    .page-login-wrap .body-box .login-box .form-box {padding-top: 32px;}
    .page-login-wrap .body-box .login-box .form-box .item-input {margin-bottom: 24px;}
    .page-login-wrap .body-box .login-box .form-box .item-code{padding-right: 118px;} 
    .page-login-wrap .body-box .login-box .form-box .item-input .name{font-size: 14px;line-height: 22px;margin-bottom: 6px;}
    .page-login-wrap .body-box .login-box .form-box .item-input input {height: 48px;padding: 4px 12px;font-size: 14px;line-height: 24px;}
    .page-login-wrap .body-box .login-box .form-box .item-code .item-code-img{width: 108px;height: 48px;}
    .page-login-wrap .body-box .login-box .form-box .item-code .item-code-img .yanzheng{max-height: 48px;}
    .page-login-wrap .body-box .login-box .form-box .item-btn{padding-top: 12px}
    .page-login-wrap .body-box .login-box .form-box .item-btn .btnn {height: 48px;font-size: 16px;line-height: 30px;}
}

@media screen and (max-width: 980px) {
    .page-login-wrap .logo {top: 18px;left: 24px;height: 62px;}
    .page-login-wrap .body-box {max-width: 960px;margin: 80px auto}
    .page-login-wrap .body-box .login-box {width: 420px;padding: 36px 20px;border-radius: 15px;}
    .page-login-wrap .body-box .login-box .tit{font-size: 24px;line-height: 32px;}
    .page-login-wrap .body-box .login-box .form-box {padding-top: 28px;}
    .page-login-wrap .body-box .login-box .form-box .item-input {margin-bottom: 20px;}
    .page-login-wrap .body-box .login-box .form-box .item-code{padding-right: 118px;} 
    .page-login-wrap .body-box .login-box .form-box .item-input .name{font-size: 14px;line-height: 22px;margin-bottom: 6px;}
    .page-login-wrap .body-box .login-box .form-box .item-input input {height: 48px;padding: 4px 12px;font-size: 14px;line-height: 24px;}
    .page-login-wrap .body-box .login-box .form-box .item-code .item-code-img{width: 108px;height: 48px;}
    .page-login-wrap .body-box .login-box .form-box .item-code .item-code-img .yanzheng{max-height: 48px;}
    .page-login-wrap .body-box .login-box .form-box .item-btn{padding-top: 12px}
    .page-login-wrap .body-box .login-box .form-box .item-btn .btnn {height: 48px;font-size: 16px;line-height: 30px;}
}

@media screen and (max-width: 600px) {
    .page-login-wrap .logo {position: relative;padding: 15px 20px;text-align: center; top: 0px;left: 0px;height: 80px;}
    .page-login-wrap .body-box {max-width:100%;margin: 20px auto}
    .page-login-wrap .body-box .login-box {width: 420px;padding: 28px 20px;border-radius: 15px;}
    .page-login-wrap .body-box .login-box .tit{font-size: 20px;line-height: 28px;}
    .page-login-wrap .body-box .login-box .form-box {padding-top: 20px;}
    .page-login-wrap .body-box .login-box .form-box .item-input {margin-bottom: 16px;}
    .page-login-wrap .body-box .login-box .form-box .item-code{padding-right: 118px;} 
    .page-login-wrap .body-box .login-box .form-box .item-input .name{font-size: 14px;line-height: 22px;margin-bottom: 6px;}
    .page-login-wrap .body-box .login-box .form-box .item-input input {height: 44px;padding: 4px 12px;font-size: 14px;line-height: 24px;}
    .page-login-wrap .body-box .login-box .form-box .item-code .item-code-img{width: 108px;height: 44px;}
    .page-login-wrap .body-box .login-box .form-box .item-code .item-code-img .yanzheng{max-height: 44px;}
    .page-login-wrap .body-box .login-box .form-box .item-btn{padding-top: 12px}
    .page-login-wrap .body-box .login-box .form-box .item-btn .btnn {height: 44px;font-size: 16px;line-height: 30px;}
}