@charset "utf-8";
*{ margin:0;padding:0;font-size:100%;line-height:1 }
body,html{ height:100% }
li{ list-style-type:none }
a{ text-decoration:none;color:inherit }
img{ border:0 none;vertical-align:bottom }
input{ outline:0 none }
body{ font-family:'nanumBGUL';color:#00acc1 }
legend{ display:none }


/* --------  common-------- */
body{ padding-left:430px;background:#222}
.wrapper{ margin:0 auto;position:relative;padding:50px;width:100%;box-sizing:border-box}

/* -------- leftcon -------- */
#leftcon{ width:100%;background:#fff;position:fixed;top:0;bottom:0;left:0;box-shadow:2px 0 5px rgba(0,0,0,.5);/* padding:50px; */}
.loginimg{ text-align:Center;margin:120px auto }
.logintitle{ font-size:20px;padding-top:25px }
/* -------- rightbg -------- */
.slogo{ position:absolute;right:50px;top:50px ;z-index:1}

#rightbg::after{display:block;content:'';position:absolute;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.7) }

.stitle{ font-size:15px;color:#fff;width:100%;height:100%;text-align:Center;z-index:1 ;display:table-cell;vertical-align:middle;position:relative}
.stitle span::before{display:block;width:30px;height:2px;background:#fff;margin:0 auto 30px;/* content:'' */ }
.stitle span{ display:block;margin-top:20px;font-size:50px}
/* -------- form -------- */
label{ font-size:12px;padding-bottom:10px;display:block;padding-top:16px;font-family:'nanumBGL';letter-spacing:1px}
input{ height:45px;width:100%;box-sizing:border-box;border-radius:5px; }
.info{ border:2px solid #e2e2e2;text-indent:20px;color:#b2b2b2;font:15px/45px 'gojeL';}
.info:hover{ border-color:#00acc1  }

.loginbt a{ display:block; background:#00acc1;color:#fff;border:0 none;font-size:12px;margin-top:36px;height:45px;
line-height:45px;border-radius:5px;text-align:Center;
cursor:pointer;}

.info::-webkit-input-placeholder { /* Chrome/Opera/Safari */  color:#b2b2b2}
.info::-moz-placeholder { /* Firefox 19+ */ color:#b2b2b2}
.info:-ms-input-placeholder { /* IE 10+ */ color:#b2b2b2}
.info:-moz-placeholder { /* IE 10+ */ color:#b2b2b2}

/* -------- footer -------- */
.footer{ background:#f9f9f9;border-top:1px solid #ececec;height:60px; ;;color:#b0b0af;font:10px/60px 'rajeR';letter-spacing:2px;text-align:center;position:absolute;bottom:0;left:0;width:100%;}

/* -------- mediaquery -------- */
@media screen and (max-width:1024px){  }

@media screen and (max-width:768px){ 
.stitle{ display:none }
.slogo{ display:none }
}

@media screen and (max-width:640px){ 
body{ padding-left:0 }
#leftcon{ position:static;width:100%;height:100% }
div#rightbg{ display:none }
}

@media screen and (max-width:480px){ 
.logo{ width:120px }
.logo img{ width:100% }
.loginimg{ margin:20px auto }
.logintitle{ padding-top:14px;font-size:18px }
.wrapper{ padding:20px }
.loginbt a{ font-size:20px }
.footer{ display:none }
label{ display:none }
.info{margin-top:10px; }
}