.login {padding:200px 60px 100px 60px;}
.login:after {content:''; clear:both; display: table;}

.login .box1 {float:left; width:50%;}
.login .box1 .box1_wid {max-width:500px; width:100%; margin:0 auto;}
.login .box1 h1 {font-size:30px; color:#222; font-weight:300;}
.login .box1 h1 b {font-weight:700;}
.login .box1 .social_bt {margin-top:35px;}
.login .box1 .social_bt:after {content:''; clear:both ;display: table;}
.login .box1 .social_bt button {float:left; width:calc((100% - 14px) / 3); height:47px; border-radius:5PX; background:#f8f8f8; border:none; margin-right:7PX; font-size:14px;}
.login .box1 .social_bt button br {display: none;}
.login .box1 .social_bt button:last-child {margin-right:0;}
.login .box1 .social_bt button img {margin:0 6px 0 0;}
.login .box1 .or {display: inline-block; width:100%; height:1px; background:#eaeaea; position: relative; margin:40px 0 15PX 0;}
.login .box1 .or:after {content:'or'; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); font-size:14px; color:#aaa; padding:0 16px; background:#fff; font-weight:300;}
.login .box1 .input_box {margin-top:25px; position: relative;}
.login .box1 .input_box span {display: inline-block; width:100%; font-size:15px; color:#444; margin-bottom:8px;}
.login .box1 .input_box input[type="text"], .login .box1 .input_box input[type="password"] {width:100%; height:48px; border:1px solid #ddd; padding:0 20px; font-size:15px; color:#222;}
.login .box1 .input_box input[type="password"]::placeholder {font-size:20px; font-weight:900;}
.login .box1 .input_box .secret {position: absolute; right:16px; bottom:16px; border:none; background:none; opacity: .5;}
.login .box1 .input_box .secret .show {display: none;}
.login .box1 .input_box .secret .hide {display: block; position: relative; top:1px;}
.login .box1 .input_box .secret.active .hide {display: none;}
.login .box1 .input_box .secret.active .show {display: block;}
.login .box1 .quick:after {content:''; clear:both ;display: table;}
.login .box1 .quick {margin-top:15px;}
.login .box1 .quick .ck_box {float:left;}
.login .box1 .quick .ck_box input[type="checkbox"] {display: none;}
.login .box1 .quick .ck_box input[type="checkbox"] + label {display: inline-block; font-size:14px; color:#444; cursor: pointer;}
.login .box1 .quick .ck_box input[type="checkbox"] + label span {width:19px; height:19px; border:1px solid #ddd; display: inline-block; margin-right:4px;position: relative; top:5px;}
.login .box1 .quick .ck_box input[type="checkbox"]:checked + label span {border:1px solid #111; background:url('../img/check.svg')no-repeat center #111; }
.login .box1 .quick .forgot {float:right; margin-top:6px; font-size:14px; text-decoration: underline; text-underline-position: under; color:#444;}

.login .box1 .bt_box {margin-top:35px;}
.login .box1 .bt_box:after {content:''; clear:both ;display: table;}
.login .box1 .bt_box button {height:50px; border:1px solid #111; background:none; font-size:16px; color:#111; margin-top:7px; float:left; width:100%;}
.login .box1 .bt_box button.login_bt {width:calc((100% - 7px) / 2); background:#111; color:#fff;}
.login .box1 .bt_box button.join {float:right; width:calc((100% - 7px) / 2); background:#F6F6F6; border:1px solid #F6F6F6; }



.login .box2 {float:right; background:url('../img/login_bg.jpg')no-repeat center; background-size:cover; width:45%; height:800px; margin-top:-95px; border-radius:20px;}


@media screen and (max-width:1200px) {
	.login {padding:150px 20px 80px 20px;}
	.login .box2 {display: none;}
	.login .box1 {width:100%;}
}

@media screen and (max-width:767px) {
	.login {padding:140px 20px 50px 20px;}
	.login .box1 h1 {font-size:20px;text-align: center;}
	.login .box1 .social_bt {margin-top:25px;}
	.login .box1 .social_bt button {background:none; font-size:13px; height:auto;}
	.login .box1 .social_bt button br {display: block;}
	.login .box1 .social_bt button span {width:54px; height:54px; display: inline-block; background:#f6f6f6; border-radius:50%; text-align: center; padding:14px 0 0 6px; margin-bottom:8px;}
	.login .box1 .social_bt button:first-child span {padding:15px 0 0 7px;}
	.login .box1 .social_bt button span img {height:25px;}
	.login .box1 .or {margin:35px 0 5px 0;}

	.login .box1 .input_box span {font-size:13px;}
	.login .box1 .input_box input[type="text"], .login .box1 .input_box input[type="password"] {height:45px; padding:0 16px; font-size:14px; border-radius:8px;}

	.login .box1 .quick .ck_box input[type="checkbox"] + label span {width:15px; height:15px; top:3px;}
	.login .box1 .quick .ck_box input[type="checkbox"] + label {font-size:13px;}
	.login .box1 .quick .forgot {font-size:13px; margin-top:3px;}

	.login .box1 .bt_box {margin-top:30px;}
	.login .box1 .bt_box button {height:45px; font-size:15px; border-radius:8px;}
}