body {background:#fff;}
.login {width:100%; height:100vh; position: relative;}
.login:after {content:''; clear:both; display:table;}

.login .img_box {float:left ;width:50%; height:100vh ;background:url('../img/login.jpg')no-repeat center; background-size:cover;}

.login .cont {width:50%; position:relative; float:right; height:100%;}
.login .cont:after {content:''; clear:both; display: table;}
.login .cont .logo {position: absolute; right:40px; top:34px;}
.login .txt_box {position: absolute; max-width:500px; left:50%; top:51%; width:100%; transform: translate(-50%,-50%);}

.login .txt_box h2 {font-size:45px;  color:#222; font-weight: 400; } 
.login .txt_box h2 b {color:#5E318F; font-weight:800;}
.login .txt_box h3 {margin-top:14px; font-size:17px; color:#A8A8A8; font-weight: 400;padding-left:2px; margin-bottom:55px;}

.login .txt_box .input_box {position: relative; margin-top:30px; }
.login .txt_box .input_box input {height:50px; border:1px solid #ddd; margin-top:7px; padding:0 18px; font-size:15px; width:100%;border-radius:8px; background:none; color:#222; transition: .3s;}
.login .txt_box .input_box .tit {font-size:14px; color:#666; font-weight:400;}
.login .txt_box .input_box .secret {position: absolute; right:13px; bottom:16px; border:none; background:none; opacity: .5;}
.login .txt_box .input_box .secret .show {display: none;}
.login .txt_box .input_box .secret .hide {display: block; position: relative; top:1px;}
.login .txt_box .input_box .secret.active .hide {display: none;}
.login .txt_box .input_box .secret.active .show {display: block;}
.login .txt_box .input_box .pw::placeholder {font-size:7px; letter-spacing: 3px; color:#C6C6C6;}
.login .txt_box .input_box input[type="text"]::placeholder {color:#C6C6C6;}
.login .txt_box .input_box.no input {border:1px solid #f12323;}
.login .txt_box .input_box .no_txt {display: none;}
.login .txt_box .input_box.no .no_txt {display:block; color:#f12323;  position: absolute; right:0; bottom:-22px; font-size:14px;}

.login .txt_box .forgot {float:right; font-size:13px; color:#111; margin-top:-18px; font-weight:400;}

.login .txt_box .bt {margin-top:60px; height:50px; border-radius:10px; float:left; width:100%; border:none; font-size:17px; letter-spacing: .5px; color:#fff; background:#5E318F; padding-bottom:1px;}
.login .txt_box .bt.bt2 {margin-left:2%; border:1px solid #ddd; color:#3D3D3D; background:#fff;  }

.login .txt_box input[type="checkbox"] {display: none;}
.login .txt_box .ck_box {margin-top:25px; }
.login .txt_box .ck_box .ck_label {position:relative; display: inline-block; padding-left:27px; font-size:14px; color:#555;  line-height:1.3em;  cursor: pointer;}
.login .txt_box .ck_box .ck_label span {position: absolute; left:1px; top:0px; width:18px; height:18px; border:1px solid #e4e4e4;border-radius:3px; background:none; }
.login .txt_box .ck_box input[type="checkbox"]:checked + .ck_label span {background:url('../img/check_icon.svg')no-repeat top 3px center #5E318F; border:1px solid #5E318F; background-size:75%;}
.login .txt_box .ck_box input[type="checkbox"]:checked + .ck_label {color:#111; font-weight:400;}

.login .txt_box .link {display: inline-block; width:100%; margin-top:35px; font-size:14px; color:#999; text-align:center;}
.login .txt_box .link span {display: inline-block; text-decoration: underline; color:#5E318F; font-weight:600; margin-left:3px; text-underline-position: under; letter-spacing: 0;}

.login .img {position: absolute; right:30px; top:30px; height:calc(100% - 60px); max-height:1030px;}





@media screen and (max-width:1500px) {
	.login .txt_box {max-width:400px;}
	.login .txt_box h2 {font-size:40px;}
}

@media screen and (max-height:840px) {
	.login .txt_box {margin-top:180px;}
}

@media screen and (min-width:2000px){
	.login {position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
}