.login-page{padding:80px 0px;background:url(../img/login_back.png);background-size: cover;box-sizing: border-box;}
.login-page .max-width{overflow: hidden;}
.login-page .max-width form{display: flex;align-items: center;justify-content: space-between;position: relative;}
.login-page #login-form{height: 500px;background: #fff;width: 40%;position: relative;box-shadow: 0 3px 8px 1px #c9c9c9;text-align:center;}
.login-page #login-form .login-box{position: relative;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);-o-transform: translateY(-50%);-ms-transform: translateY(-50%);-moz-transform: translateY(-50%);}
.login-page #login-form h1{font-size: 32px;padding: 0 0 40px;}
.login-page #login-form input{padding: 12px 8px;width: 70%;margin-bottom: 20px;border: 1px solid #ccc;}
.login-page #login-form .code{width: 49%;}
.login-page #login-form img{border: 1px solid #ccc;position: relative; top: -10px; padding: 10px 20px;border-left: none;}
.login-page #login-form .but input{font-size:14px;padding: 0 20px;font-weight: bold;height: 45px;line-height: 45px;border-radius: 100px;width: fit-content;background-color: #ff3500;border: 0;width: 73%;box-sizing: border-box;}
.login-page #login-form .but a{color: #0066cc;font-size: 14px;}
.login-page .register-section{text-align: left;width: auto;z-index: 3;text-align: center;}
.login-page .register-section .register-text{font-size:32px;color:#fff;margin-bottom: 20px;}
.login-page .register-section > a{color: #fff;border: 1px solid #fff;font-size: 22px;padding: 10px 25px;display: inline-block;margin-bottom: 20px;}
.login-page .mascot-img{position: absolute;top: 50%;left: calc(40% + 20px);transform: translateY(-50%);z-index: 2;}
.login-page .mascot-img img{display: block;height: 380px;width: auto;object-fit: contain;}

.login-advantage-box{margin-top: 20px;text-align: left;padding-left: 50px;}
.login-advantage-box li{color: #fff;font-size: 14px;}
.login-advantage-box li img{display: inline-block;height: 20px;}
.login-advantage-box li .advantage-icon{color: yellow;font-size: 14px;}

/* @media screen and (max-width: 768px){
	.login-page .register-section .register-text{font-size: 26px;}
	.login-page .register-section a{font-size: 18px;}
} */

@media screen and (max-width: 1024px){
    .login-page #login-form{height: auto;}
    .login-page #login-form .login-box{position: relative;top: 0;transform: translateY(0);padding: 20px 0;}
}

@media screen and (max-width: 768px){
    .login-page #login-form img{top: -10px;padding: 13px 4px;}	
    .login-page #login-form{margin-bottom: 0;}
	.login-page{padding:0;}
	#top,#topM,#bottom{display:none;}
	.login-page,.login-page, .login-page form{ background:#fff;height: auto;display: flex;flex-direction: column;width: 100%;}
	.login-page .hotu{padding:10px;}
	.login-page #login-form{width: 100%;left: 0;box-shadow: initial;top: 0;height: auto;position: relative;}
	.login-page #login-form input{padding: 15px 8px;width: 75%;}
	.login-page .mascot-img{position: relative;top: auto;left: auto;transform: none;text-align: center;padding: 20px 0;}
	.login-page .mascot-img img{height: 150px;margin: 0 auto;}
	.login-page .register-section{width: 100%;position: relative;background: #333333;color: #fff; padding: 20px;margin: 0;text-align: left;}
	.login-page .register-section .register-text{font-size: 18px;margin-bottom: 15px;float: none;width: auto;text-align: left;}
	.login-page .register-section a{font-size: 16px;padding: 10px 20px;border: 1px solid #fff;float: none;display: block;margin-bottom: 15px;width: 100%;box-sizing: border-box;text-align: center;}
	.login-page .login-advantage-box{text-align: left;margin-top: 10px;padding: 0;}
	.login-page .login-advantage-box li{list-style: none;margin-bottom: 8px;}
	.login-page .login-advantage-box li .advantage-icon{margin-right: 8px;}
    .login-page #login-form .code{width: calc(75% - 65px);}
    .login-page #login-form .but input{width: 77%;height: 35px;line-height: 35px;padding: 0 15px;font-size: 12px;}
    .login-page #login-form .login-box{position: relative;top: 0;transform: translateY(0);padding: 0;}
}
@media screen and (max-width: 414px){
	.login-page{padding:0;}
	#top,#bottom,#menufix{display:none;}
	.login-page,.login-page{ background:#fff;}
	.login-page .hotu{padding:10px;}
	.login-page #login-form{width: 100%;left: 0;box-shadow: initial;top: 0;height: auto;position: relative;}
	.login-page #login-form input{padding: 12px 8px;width: 75%;}
	.login-page .mascot-img{position: relative;top: auto;left: auto;transform: none;text-align: center;padding: 15px 0;}
	.login-page .register-section{width: 100%;position: relative;background: #333333;color: #fff; padding: 20px;margin: 0;text-align: left;}
	.login-page .register-section .register-text{font-size: 16px;margin-bottom: 15px;float: none;width: auto;text-align: left;width: 100%;}
	.login-page .register-section a{font-size: 16px;padding: 8px 16px;border: 1px solid #fff;float: none;display: block;margin-bottom: 15px;text-decoration: none;width: 100%;box-sizing: border-box;text-align: center;}
    /* .login-page #login-form .login-box{position: relative;top: 0;transform: translateY(0);} */
	.login-page #login-form h1{font-size: 28px;padding: 20px 0;line-height: 1.2;}
    .login-page #login-form img{padding: 10px 4px;}
    .login-page #login-form .but input{width: 79%;}
}

@media screen and (max-width: 320px){
	.login-page #login-form{top:0;height: auto;}
	.login-page .register-section{padding: 15px;}
	.login-page .register-section .register-text{font-size: 14px;text-align: left;}	
	.login-page .register-section .register-text,.login-page .register-section a{font-size:14px;float: none;}
	.login-page .register-section a{display: block;width: 100%;box-sizing: border-box;text-align: center;}
	.login-page #login-form .but input{padding: 10px 8px;}
}