body {height:100vh}

.login .img_box {background:#fff;}
.login {height:100%; width:100%; max-height:1030px; max-width:1920px;}
.login:after {content:''; clear:both; display:table;}

.login .img_box {float:left; margin:15px; width:calc(50% - 30px); height:calc(100% - 30px); background:#111; border-radius:20px; position: relative; padding:90px; z-index: 1; overflow: hidden;}
.login .img_box .logo {position: absolute; left:90px; bottom:80px;}
.login .img_box p {font-size: 18px; color:#fff;}
.login .img_box h2 {font-size:32px; color:#fff; font-weight:600; margin-top:0px; line-height:1.18em;}


.login .img_box svg {
  width:100%;
  height: 100%;
   position: absolute; left:0; top:0; z-index: -1;
}

.login .cont {float:right; width:50%; position: relative; height:100%;}
.login .cont .copy {position: absolute; left:50px; bottom:40px; color:#888; font-weight:400; font-size:13px;}
.login .cont .help {position: absolute; right:50px; bottom:40px; border:none; background:none; color:#888; font-size:13px;}
.login .cont .help img {margin:-2px 4px 0 0;}

.login .txt_box { max-width:460px; position: relative; height:100%; width:100%; display: flex; flex-direction: column; justify-content: center; margin:0 auto;}

.login .txt_box h2 {font-size:55px;  color:#fff; font-weight: 700; margin-left:-4px; margin-top:-20px;} 
.login .txt_box h3 {margin-top:10px; font-size:18px; color:#AAA; font-weight: 400; margin-bottom:15px;}

.login .txt_box .input_box {position: relative; margin-top:30px; }
.login .txt_box .input_box input {height:50px; border:none; margin-top:7px; padding:0 20px; font-size:15px; width:100%;border-radius:8px; background:#181818; color:#FFF; transition: .3s;}
.login .txt_box .input_box .tit {font-size:14px; color:#444; font-weight:600;}
.login .txt_box .input_box .tit:after {contnet:''; clear:both; display: table}
.login .txt_box .input_box .tit button {float:right; border:none; background:none; font-size:13px; color:#8DAFD7; font-weight:600;}
.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;}
.login .txt_box .input_box.no input {border:1px solid #f12323;}
.login .txt_box .input_box input:focus {border:1px solid #222;}
.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:14px; color:#111; margin-top:-18px; font-weight:500;}

.login .txt_box .bt {margin-top:10px; height:50px; border-radius:10px; float:left; width:100%; border:1px solid #111; font-size:17px; letter-spacing: .5px; color:#111; background:#fff; padding-bottom:1px; font-weight:600;} 
.login .txt_box .bt.on {background:#FFF; color:#222; border:none; margin-top:40px; }

.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:#999;  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 #444;border-radius:3px; background:none; }
.login .txt_box .ck_box input[type="checkbox"]:checked + .ck_label span {background:url('../img/check.svg')no-repeat center #111; border:1px solid #111; background-size:75%; filter:invert(1);}
.login .txt_box .ck_box input[type="checkbox"]:checked + .ck_label {color:#fff; font-weight:400;}

.login .txt_box .link {display: inline-block; width:100%; margin-top:40px; font-size:15px; color:#999; text-align:center;}

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





@media screen and (max-width:1500px) {
	.login .img_box {padding:60px ;}
}


@media screen and (max-width:1279px) {
	.login .img_box h2 {display: none;}
	.login .img_box {position: absolute; left:15px; top:15px; width:calc(100% - 30px); margin:0;}
	.login .cont {z-index: 2; width:100%;}
	.login .txt_box .input_box input {background:#111;}
	.login .txt_box .input_box .tit {color:#999; font-weight:400;}

	.login .img_box .logo {left:35px; bottom:initial; top:25px;}
}


@media screen and (max-width:767px) {
	body {height:100svh}
	.login .txt_box {padding:0 50px;}
	.login .txt_box h2 {font-size:32px; margin-top:0px;}
	.login .txt_box h3 {font-size:14px;}
	.login .txt_box .input_box {margin-top:20px;}
	.login .txt_box .ck_box .ck_label {font-size:13px;}
	.login .txt_box .input_box .tit {font-size:13px;}
	.login .txt_box .input_box input {height:46px; font-size:14px;}
	.login .txt_box .bt.on {margin-top:35px; height:45px;}
	.login .img_box .logo {left:25px; top:25px; width:64px;}
	.login .cont .copy {left:40px; font-size:12px;}

	body,html {min-height:600px;}
}