@charset "utf-8";

.container_login {position:fixed; top:0; left:0; width:100%; height:100%; min-width:320px; overflow-x:hidden; overflow:hidden;}
.container_login:after {content:''; display:block; clear:both;}
.container_login > div {position:relative; height:100%;}

.bg {float:left; width:450px;}
.bg img {position:absolute; top:0; left:0; width:100%; height:100%;}
.content {float:right; width:calc(100% - 450px); background:#f6f6f6;}
.login_wrap {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:500px;}
.login_wrap * {display:block; width:100%;}
.login_wrap h1 {line-height:200%; color:#262c41; font-family:'gmarket'; font-size:37px; text-align:center; letter-spacing:-3px;}
.login_wrap h1 em {font-size:1.892em; font-weight:900;}
.login_wrap h1 span {display:inline; color:#6e3dff;}

.con input {position:relative; width:100%; height:54px; line-height:54px; margin:27px 0 0; padding:0 0 0 3px; border:none; border-bottom:1px solid #e0e0e0; font-size:19px; font-weight:800; letter-spacing:-1px; background:url(/images/login/ico_id.png) no-repeat center right 7px;}
.con input + input {margin:20px 0 0; background-image:url(/images/login/ico_pw.png);}
.check {position:relative; padding:25px 0 35px;}
.check * {display:inline-block; width:auto; font-weight:400; color:#666;}
.check input[type="checkbox"] {opacity:0; width:24px; height:24px; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
.check input[type="checkbox"] + label {position:relative; vertical-align:top; padding:0 0 0 8px; line-height:24px;}
.check input[type="checkbox"] + label:before,
.check input[type="checkbox"] + label:after {content:''; position:absolute; top:50%; left:-24px; width:24px; height:24px; line-height:100%; margin:-12px 0 0; background:url(/images/login/ico_checkbox.jpg) no-repeat;}
.check input[type="checkbox"] + label:after {display:none; background:url(/images/login/ico_checkbox_on.jpg) no-repeat;}
.check input[type="checkbox"]:checked + label:after {display:block;}

.info {box-sizing:border-box; padding:15px 0 15px 29px; background:#ebebeb; color:#666; word-break:keep-all;}
.login_wrap button {margin:41px auto 0; width:60%; height:84px; line-height:80px; box-sizing:border-box; border:2px solid #313f47; border-radius:50px; font-size:20px; font-weight:900; text-align:center; color:#313f47;}
.login_wrap button:hover {background:#313f47; color:#fff;}

@media all and (max-width:1280px){
	.bg{width:35%;}
	.content {width:65%;}
	.login_wrap{width:60%; max-width:500px;}
	.login_wrap h1{font-size:31px;}
	
}
@media all and (max-width:1000px){
    .bg {display:none;}
    .content {width:100%; background:url(/images/login/bg_login.jpg) no-repeat; background-size:cover;}
	.login_wrap{width:65%; max-width:390px; padding:50px 60px 60px; background:#f6f6f6;}
	.login_wrap h1{font-size:28px;}
}

@media all and (max-width:568px){
    .login_wrap {width:260px; padding:40px 9% 50px;}
    .login_wrap h1 {font-size:20px; letter-spacing:-1px;}
	.login_wrap h1 em{letter-spacing:-3px;}
    
    .con input {height:49px; line-height:49px; margin:20px 0 0; font-size:1em;}
    .con input + input {margin:10px 0 0;}
    .check {padding:20px 0 30px;}
    .login_wrap button {height:64px; line-height:60px; margin-top:35px; font-size:1.133em;}
	.info {padding:15px;}
}

@media all and (max-width:380px){
    .login_wrap {width:240px; padding:35px 9% 45px;}
    .login_wrap h1 {font-size:19px;}
    
    .con input {font-size:1em;}
    .login_wrap button {height:54px; line-height:50px; margin-top:30px;}
}