@charset "utf-8";
/* CSS Document */
body{ background-color:#FFF; }
.container{ width:100%;  height: 100%; min-width: 320px; position: fixed; left:0; top:0;background-image: url(../images/bgLogin.png); background-position: center top; background-repeat: no-repeat; background-size: 100% 64%; }
.main{ width: 1200px; height: 100%;/* background-color: rgba(0,0,0,0.2);*/ margin:0 auto; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; padding:3% 0 0 0;}
.header,.footer{ width: 42%; box-sizing: border-box; padding:0 5%; }
.footer{  padding:0 10%; }	
.header img,.footer img{ width:100%; }
.login{ width: 30%; max-width: 480px; height: auto; background-color: #FFF; border-radius: 20px; overflow: hidden; margin-bottom: 3%; margin-top: 1%; box-sizing: border-box; padding:3% 3% 5% 3%; box-shadow: 0 0 10px rgba(0,0,0,0.3)}
.login > h3{ width: 100%; font-size: 26px; text-align: center; }
.login > form > .loginItem{ width: 100%; height: 60px; box-sizing: border-box; border: 1px solid #999; border-radius:24px; margin-top: 7.5%; padding:10px 15px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items:center; color: #000;}
.login > form > .loginItem > h3{ width:24px; height: 24px; overflow: hidden; box-sizing: border-box; border: 1px solid #FFF; flex-shrink: 0; margin-right: 10px; }
.login > form > .loginItem > h3 > img{ width: 100%; }
.login > form > .loginItem > p{ width: 100%; height: 24px;  }
.login > form > .loginItem > p > input{ width: 100%; height: 24px; line-height: 24px; background-color: #FFF; border: 0; }
.login > form > .loginBtn{ width: 100%; height: 60px; box-sizing: border-box; /*border: 1px solid #999;*/ border-radius:24px; margin-top: 7.5%; background-image: linear-gradient(to right,#e3231f,#f23852);}
.login > form > .loginBtn > input{ width: 100%; height: 100%; background-color: transparent; border-radius: 0; font-size: 16px; color: #FFF; cursor: pointer; border:0; }
@media (max-width:1440px){	
	.login > form > .loginItem{ height: 54px;  border-radius:24px;  }
	.login > form > .loginBtn{ height: 54px;  border-radius:24px;}
	.login > form > .loginBtn > input{ width: 100%; height: 100%; background-color: transparent; border-radius: 0; font-size: 16px; color: #FFF; cursor: pointer; border:0; }

	/*.header,.footer{ width: 42%; box-sizing: border-box; padding:0 5%; }
	.footer{  padding:0 10%; }*/
}
@media (max-width:1200px){	
	/*body{ background-image: url(none);}*/
	
	.main{ width:100%; }
	.c-con{ width:100%; box-sizing:border-box; padding-left:10px; padding-right:10px;}	
	
	.login > h3{ font-size: 20px; }

	.login > form > .loginItem{ height: 48px;  border-radius:24px;  }
	.login > form > .loginBtn{ height: 48px;  border-radius:24px;}
}
@media (max-width:992px){
	.login > h3{ font-size: 20px; }
	.login > form > .loginItem{ height: 40px;  border-radius:24px;  }
	.login > form > .loginBtn{ height: 40px;  border-radius:24px;}
	
}
@media (max-width:768px){	
	.header,.footer{ width: 60%; box-sizing: border-box; padding:0 5%; }
	.footer{  padding:0 10%; }
	/*.header img,.footer img{ width:100%; }*/
	.login{ width: 48%; height: auto; margin-top: 10px; margin-bottom: 20px; padding:20px;}
	.login > h3{ font-size: 18px; }
	
	.login > form > .loginItem{ height: 36px;  border-radius:20px;  }
	.login > form > .loginBtn{ height: 36px;  border-radius:20px;}

}

@media (max-width:640px){
}

@media (max-width:480px){
	.header,.footer{ width: 280px; }
	.login{ width: 240px; }
}
	
@media (max-width:375px){	
}