@charset "utf-8";

.pg-sub > .at-content { background:#eee; }

@font-face { font-family: 'Chosunilbo_myungjo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; }

.login-wrap { width:100%; max-width:1200px; margin:0 auto; border-radius:10px; overflow:hidden; display:flex; flex-wrap: wrap; }

.login-wrap .about-box { position:relative; width:60%; padding:80px; color:#fff; }
.login-wrap .about-box:after { content:""; position:absolute; left:0; top:0; bottom:0; right:0; opacity:.8; }
.login-wrap .about-box > div { position:relative; z-index:2; }
.login-wrap .about-box .top { font-family: 'GmarketSansMedium'; }
.login-wrap .about-box .head { font-size:3.8rem; line-height:1.3; margin-bottom:0; }
.login-wrap .about-box .desc { font-family: 'Chosunilbo_myungjo'; margin-top:50px; border-left:2px solid #fff; padding-left:20px; }
.login-wrap .about-box .bottom { position:absolute; left:80px; right:80px; bottom:50px; text-align:right; }


.login-wrap .login-box { width:40%; background:#fff; padding:70px 50px; }


.login-wrap .login-box .form-body { margin:40px 0; }
.login-wrap .login-box .form-body .input-wrap label { position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; margin:0; z-index:3; }
.login-wrap .login-box .form-body .input-wrap label img { width:100%; vertical-align:top; }

.login-wrap .login-box .form-body .input-wrap input { position:relative; width:100%; height:60px; padding:5px; padding-left:60px; border:1px solid #ddd; -webkit-box-shadow: 0 0 0 1000px white inset; }
.login-wrap .login-box .form-body .input-wrap input:focus { outline:none; border:1px solid #666; }
.login-wrap .login-box .form-body .input-wrap input.input-id  { border-radius:5px 5px 0 0; }
.login-wrap .login-box .form-body .input-wrap input.input-pw  { border-radius:0 0 5px 5px; border-top:0; }
.login-wrap .login-box .form-body .input-wrap input.input-pw:focus { border-top:1px solid #666; }

.login-wrap .login-box .form-body .input-wrap input:-ms-input-placeholder { color:#ccc; }
.login-wrap .login-box .form-body .input-wrap input::-ms-input-placeholder { color: #ccc; }
.login-wrap .login-box .form-body .input-wrap input::-webkit-input-placeholder { color: #ccc; } 
.login-wrap .login-box .form-body .input-wrap input::-moz-placeholder { color: #ccc; }

.login-wrap .login-box .form-body .remember-me { margin:15px 0 30px; display:block; }
.login-wrap .login-box .form-body .remember-me input[type="checkbox"] { display:none; }
.login-wrap .login-box .form-body .remember-me .check-box { position:relative; border-radius:3px; color:#ccc; border:2px solid #ccc; display:inline-block; width:25px; height:25px; vertical-align:middle; margin-right:5px; }
.login-wrap .login-box .form-body .remember-me .check-box:before, .login-wrap .login-box .form-body .remember-me .check-box:after { content:""; position:absolute; background:#ccc; width:2px; }
.login-wrap .login-box .form-body .remember-me .check-box:before { height:8px; transform: rotate(-45deg); left:6px; bottom:5px; }
.login-wrap .login-box .form-body .remember-me .check-box:after { height:11px; transform: rotate(45deg); right:7px; bottom:5px; }
.login-wrap .login-box .form-body .remember-me input[type="checkbox"]:checked + .check-box { border-color:transparent; }
.login-wrap .login-box .form-body .remember-me input[type="checkbox"]:checked + .check-box:before,
.login-wrap .login-box .form-body .remember-me input[type="checkbox"]:checked + .check-box:after { background:#fff; }

.login-wrap .login-box .form-body .btn { display:block; width:100%; border-radius:50px; text-align:center; padding:15px; background:#666; color:#fff; margin-top:10px; }


.login-wrap .login-box .form-footer a { color:#888; }



/*소설로그인*/
#sns_login .sns-icon { border-radius:10px; }
.sns-icon .txt { font-weight:normal !Important; }


@media (max-width: 1200px) { 
.login-wrap .about-box { width:100%; }
.login-wrap .login-box { width:100%; }

}

@media (max-width: 767px) { 
.login-wrap .about-box { padding:50px 40px 20px; }
.login-wrap .about-box .head { font-size:2.8rem; }
.login-wrap .about-box .desc { margin-top:30px; }
.login-wrap .about-box .bottom { position:relative; left:0; right:0; bottom:0; margin-top:30px; }
.login-wrap .login-box {  padding:50px 30px; }
}