/*娉ㄥ唽淇℃伅*/
#profil{
    position:fixed;top: 0;left: 0; width:100%; height:100%;z-index:-1;
    background: url(../images/profilBackground.jpg) no-repeat; background-position: center 0;
}
button:active {	transform: scale(0.95);}	
.profil{margin: auto;width: 1050px;color: #fff;	position: fixed;top: 50%;left:50%;margin-top: -329px;margin-left: -525px;}
.profil h2{font-size: 40px;margin-bottom: 45px;text-align:center;}
.profil form{background: rgba(255,255,255,0.1);padding: 45px 42px;}
.profil section{width: 50%;display: inline-block;}
.profil section:nth-of-type(1){border-right: 1px solid rgba(255,255,255,.5);min-height: 316px;height: 316px;}
.profil section:nth-of-type(2){width:auto;float: right;}

.profil h3{font-size: 22px;margin-bottom: 20px;}
.profil label{
	display: block;font-size: 14px;line-height: 36px;width: 410px;
	border-bottom: 1px solid rgba(255,255,255,.8);margin-top:20px;padding-left: 4px;
}
.profil span{display: inline-block;font-size: 15px;}
.messageL span{width: 85px;}
.messageR span{width: 75px;}
.profil i{width: 10px;display: inline-block;font-style: inherit;}
.profil input{background: none;border: none;color: #fff;width: 75%;line-height: 34px; height: 34px;}
/*鏍￠獙鐮�*/
.profil .checkCode input{width: 50%;}
.profil .checkCode button,.profil .checkCode em{padding: 0 10px;color: #fff; line-height: 37px;font-style: inherit;	cursor: pointer;}
.profil .reset-code{display: none;}
.profil .reset-code span{width: auto;}
.profil .button{text-align: center;margin-top: 50px;}
.profil .button button{
	width: 316px;height: 48px;color:#fff;font-size: 18px; cursor: pointer;
	border:1px solid #fff;background: rgba(255,255,255,0); border-radius:50px;
}
#profil.icon-profil{background: #397de2;}

/*鐧诲綍淇℃伅*/
#login{position: relative; width:100%; height:100%;background: url(../images/loginBackground.jpg) no-repeat ;background-position: center -100px;}
.loginMessage{width: 1262px; height: 612px; margin: auto;	position: fixed;top: 50%;left: 50%;margin-left: -631px;margin-top: -306px;}
.icon-login{margin: 0 20px;background: #fff;height: 100%;}
.loginMessage section{background: #74affd;width: 54.5%;height: 100%;}
.loginMessage section img{width: 560px;}
/*鍙宠竟鐧诲綍琛ㄥ崟*/
.loginMessage form{background: #fff;width: 407px;margin: auto;overflow: hidden;}
.loginMessage .loginfrom{/* padding-top: 90px; */transform: translateY(25%);}
.loginMessage .forgetfrom{transform: translateY(15%);display:none;}

.loginMessage h2{color: #1b274b;font-size: 40px;margin-bottom: 50px;}
.loginMessage .loginfrom h2{margin-bottom: 50px;}
.loginMessage .forgetfrom h2{margin-bottom: 25px;}
/* .loginMessage h3{color: #7e86a0;font-size: 14px;} */
.loginMessage input[type=text],.loginMessage input[type=password]{
	width: 97%;height: 42px;line-height: 42px;color: #4b4b4b;
	background: #f8f8f8;margin-bottom: 25px;padding-left: 10px;
}
.loginMessage .forget{padding:0 10px;font-size: 12px;color: #7e86a0;}

.forgetfrom h2 {font-size: 35px;}
.forgetfrom label{position:relative;height: 42px;display: block;margin-top: 20px;}
.forgetfrom label span{	
	position: absolute;right: 0;top: 5%;background: #357aef;color:#fff;
	padding: 0 8px;height: 90%;width: auto;line-height: 38px;cursor: pointer;
}
.forgetfrom input[type="text"],.loginMessage input[type=password]{margin-bottom:0;}
.forgetfrom .verify input{width:calc(100% - 105px)}

/*澶嶉�夋*/
.checkbox{display: none;}
.checkbox + label {position: relative; padding-left: 15px; cursor: pointer;}
.checkbox + label:before {position: absolute; top: 1px; left: 0; display: inline-block; width: 10px; height: 10px; content: ''; border: 1px solid #004eff; }
.checkbox + label:after {position: absolute;display: none; content: '';}
.checkbox:checked + label:after {display: block;}
.checkbox + label:after {
  top: 1px; left: 4px; box-sizing: border-box; width: 5px; height: 9px;
  transform: rotate(45deg); border: 1px solid #004eff; border-top: 0; border-left: 0;
}
.checkbox:checked + label:before { border: 1px solid #004eff;}

.loginMessage .forget a{color: #1954da;}
.loginMessage button{
	background: #357aef; color:#fff; width: 100%; height: 44px;
	box-shadow: 0px 1px 6px 2px rgba(52,122,239,.4); margin: 48px 0 25px;
}
.loginMessage .skipButton{text-align: center;color: #1954da;}
.loginMessage .skipButton a{color: #1954da;font-size: 14px;}
.loginMessage input::placeholder {color: #afafaf;}
.loginMessage input::-webkit-input-placeholder {color: #afafaf;}
.loginMessage input::-moz-input-placeholder {color: #afafaf;}
.loginMessage input::-ms-input-placeholder {color: #afafaf;}
#login.icon-sm{background:#397de2;}

/*鑷�傚簲*/
@media screen and (max-height: 750px){
	.profil{width: 840px;margin-top: -286px;margin-left: -420px;}
	.profil h2 {margin-bottom: 30px;font-size: 35px;}
	.profil form {padding: 35px 42px;}
	.profil label {width: 320px;margin-top: 15px;}
	.profil input {width: 65%;}
	.profil .checkCode input {width: 38%;}
	.profil .button {margin-top: 35px;}
	.profil .button button {width: 260px;height: 40px;}
	.loginMessage{width: 965px; height: 467px; margin-left: -482px;margin-top: -233px;}
	.loginMessage section img {width: 415px;}
	.loginMessage form { /* padding-top: 65px; */width: 310px;}
	.loginMessage h2 {font-size: 30px;margin-bottom: 35px;}
	.loginMessage input[type="text"] {margin-bottom: 15px;}
	.loginMessage button {margin: 25px 0 15px;}
}
@media screen and (max-height: 650px){
	.profil{width: 780px;margin-top: -261px;margin-left: -390px;}
	.profil h2 {margin-bottom: 25px;font-size: 30px;}
	.profil form {padding: 30px 42px;}
	.profil label {width: 300px;margin-top: 12px;}
	.profil h3 {font-size: 20px;margin-bottom: 16px;}
	.profil .button button{width: 220px;height: 38px;}
}
@media screen and (max-height: 570px){
	.profil{top: 0 !important;margin-top: 25px !important;}
	.loginMessage{top: 0 !important;margin-top: 53px !important;}
}

@media screen and (max-width: 1400px){
	.loginMessage{width: 1080px; height: 523px; margin-left: -540px;margin-top: -266px;}
	.loginMessage section img {width: 478px;}
	.loginMessage form {/*  padding-top: 80px; */width: 370px;}
	.loginMessage .forgetfrom{transform: translateY(11%);}
	.loginMessage h2 {font-size: 35px;margin-bottom: 45px;}
	.loginMessage input[type="text"] {margin-bottom: 20px;}
	.loginMessage button {margin: 35px 0 20px;}
}
@media screen and (max-width: 1200px){
	.profil h2 {font-size: 35px;margin-bottom: 40px;}
	.loginMessage{width: 965px; height: 467px; margin-left: -482px;margin-top: -233px;}
	.loginMessage section img {width: 415px;}
	.loginMessage form { /* padding-top: 65px; */width: 310px;}
	.loginMessage .forgetfrom{transform: translateY(8%);}
	.loginMessage h2 {font-size: 30px;margin-bottom: 35px;}
	.loginMessage input[type="text"] {margin-bottom: 15px;}
	.loginMessage button {margin: 25px 0 15px;}
	.forgetfrom label{margin-top: 12px;}
	.loginMessage .forgetfrom h2 { margin-bottom: 20px;}
}
@media screen and (max-width: 1120px){
	.profil{width: 840px;margin-top: -286px;margin-left: -420px;}
	.profil h2 {margin-bottom: 35px;}
	.profil form {padding: 35px 42px;}
	.profil label {width: 320px;margin-top: 15px;}
	.profil input {width: 65%;}
	.profil .checkCode input {width: 38%;}
	.profil .button {margin-top: 35px;}
	.profil .button button {width: 260px;height: 40px;}
}
@media screen and (max-width: 1050px){
	.loginMessage{width: 800px; height: 415px; margin-left: -400px;margin-top: -202px;}
	.loginMessage section img {width: 360px;}
	.loginMessage form {/*  padding-top: 38px; */width: 290px}
	.loginMessage h2 {font-size: 22px;margin-bottom: 25px;}
	.loginMessage input[type="text"] {height: 38px;line-height: 38px;}
	.loginMessage button {height: 38px;}
	
}
/*褰撳涓�1050鏃讹紝楂樺害鍙樺寲*/
@media screen and (max-width: 1050px) and (max-height: 750px){
	.loginMessage{width: 800px; height: 415px; margin-left: -400px;margin-top: -202px;}
	.loginMessage section img {width: 360px;}
	.loginMessage form {/*  padding-top: 38px; */width: 290px}
	.loginMessage h2 {font-size: 22px;margin-bottom: 25px;}
	.loginMessage input[type="text"] {height: 38px;line-height: 38px;}
	.loginMessage button {height: 38px;}
}
@media screen and (max-width: 1050px) and (max-height: 570px){
	.loginMessage{top: 0 !important;margin-top: 94px !important;}
}

@media screen and (max-width: 992px){
	.profil{width: 780px;margin-top: -261px;margin-left: -390px;}
	.profil h2 {margin-bottom: 25px;font-size: 30px;}
	.profil form {padding: 30px 42px;}
	.profil label {width: 300px;margin-top: 12px;}
	.profil h3 {font-size: 20px;margin-bottom: 16px;}
	.profil .button button{width: 220px;height: 38px;}
}
@media screen and (max-width: 820px){
	.profil{left: 0px !important;margin-left: 20px !important;}
	.loginMessage{left: 0px !important;margin-left: 20px !important;}
}