body{
  margin: 0;
  padding: 0;
  font-family:'Noto Sans';
}

body * {
  box-sizing: border-box;
  font-size:16px
}

.w1200{width:1200px;margin:0 auto;}

.main-login{
  width: 100vw;
  height: 100vh;
  background: #EEE

}
.login-tit{
	width: 100vw;
	height: 15vh;
	display:flex;
	align-items:center;
}
.login-tit .top{display:flex;width:100%;align-items:center;}
.login-tit .logo{width: 500px}
.login-tit .line{width: 1px;height:72px;background:#999;margin:0 30px}
.login-tit .tit{font-size: 24px}
.login-tit img{width: 100%}
.login-bg{
	width: 100vw;
	height: 70vh;
	  display: flex;
	  justify-content: center; 
	  align-items: center;
	  background: url(../images/login_bg.png) no-repeat;
	  background-size: 100% auto;
	  background-position:center bottom;
	  overflow:hidden
}
.login-foot{
	height: 15vh;
	padding-top:20px;
	text-align:center;
	line-height:30px
}
.left-login{
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: center;
  flex-direction: column;
}

.left-login > h1 {
  font-size: 3vw;
  color: #77ffc0;
}

.left-login-image{
  width: 35vw;
}

.right-login{
  width: 50vw;
  height: 100vh;
  display: flex;
  justify-content: center; 
  align-items: center;
}

.card-login{
  width: 60%;
  display: flex;
  justify-content: center; 
  align-items: center;
  flex-direction: column;
  padding: 30px 35px;
  background: #fff;
  border-radius: 20px;
	border:1px solid #EEE

}
.card-login > h2{
  color: #006AAB;
  font-weight: 800;
  margin: 0;
}

.textfield{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 10px 0px;
}

.textfield .phoneDiv{
	display: flex;
	width: 100%;
}
.textfield .phoneDiv input{flex:1}

.textfield .phoneDiv button{width: 100px;height: 48px;font-size: 14px;color: #ffffff;border-radius: 10px;background: #f60;border:none;margin-left:10px}

.textfield input{
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 15px;
  background: #E5F0FE;
  color: #006AAB;
  font-size: 12pt;
  outline: none;
  box-sizing: border-box;
}

.textfield > label{
  color: #666;
  margin-bottom: 10px;
}

.textfield input::placeholder{
  color: #999;
}

.card-login .more{
	display:flex;
	width:100%;
	justify-content:space-between;
	margin-bottom: 20px;
}

.card-login .more {color: #006AAB;font-size:12px;padding-top:10px}

.btn-login{
  width: 100%;
  padding: 16px 0px;
  margin: 0px;
  border: none;
  border-radius: 10px;
  outline: none;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 3px;
  color: #FFF;
  background: #006AAB;
  cursor: pointer;
}

@media only screen and (max-width:950px){
  .card-login{
    width: 85%;
  }
}

@media only screen and (max-width:600px){
  .main-login{
    flex-direction: column;
  }

  .left-login > h1{
    display: none;
  }

  .left-login{
    width: 100%;
    height: auto;
	display:none
  }

  .right-login{
    width: 100vw;
    height: auto;
  }

  .left-login-image{
    width: 50vh;
  }

  .card-login{
    width: 90%;
  }
	.login-bg{
		  background-size: auto 100%;
		  background-position:center top;
	}
	.login-tit .logo{display:none}
	.login-tit .mlogo{width: 200px;display:block !important}
	.login-tit .line{height:40px;margin:0 10px}
	.login-tit .tit{font-size: 18px}
}
.agree{
	display:flex;
	align-items:center
}
button:disabled {
	background-color: gray;
	color: white;
	cursor: not-allowed;
}
input[type="checkbox"] {
	margin-right: 10px;
	cursor: pointer;
	width: 20px;
	height: 20px;
	position: relative;
}