/* ----------------------
* PHP Version 1.0 버전
* -------------------- */
@charset 'utf-8';
@import '/css/font.css';

/* Reset */
html, body { width:100%; height:100%; margin:0; padding:0; outline:0; }
html { overflow-y:scroll; font-family:'Noto Sans KR'; }
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, input, textarea, button, select { margin:0; padding:0; }
body, input, textarea, select, button, table { color:#383d41; font-size:13px; }
body { background:url('/design/images/main/login-bg.jpg')no-repeat center center; background-size:cover;}
img { border:0 none; }
img, input, select, textarea, button { vertical-align:top; }
input, textarea, select { padding:3px; background:#fff; border:1px solid #ccc; }
label, button { cursor:pointer; }
a { color:#2f3743; text-decoration:none; }
a:hover { color:#390; text-decoration:none; }
html:first-child select { height:20px; padding-right:6px; }
option, x:-moz-any-link { padding-right:6px; }
option, x:-moz-any-link, x:default { padding-right:0; }

/* Common */
.placeholder { color:#ccc; }
.blind { display:block; position:absolute; top:-1000em; left:0; overflow:hidden; }
.cursor { cursor:pointer; }
.hide { display:none; }

/* Login Box Layout */
#wrapper { width:100%; height:100%; }
#login { width:100%; height:100%; text-align:center; vertical-align:middle}

/* Layout */
#wrapper { _height:1px; margin:0 auto; _text-align:left; }
#header, #navigation, #container, #footer { width:762px; margin:0 auto; text-align:left; z-index:100; }
#container:after { display:block; clear:both; content:''; }

/* Header */
#header { position:relative; }

/* Container */
#container { width:100%; max-width:727px; margin:0 auto; height:100%;position:relative;}
#LoginBox { width:75%; position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,0.9);padding:7% 5% 10% 5%;border-radius:20px;}
#LoginBox form{width:100%;}
#LoginBox td { line-height:20px; }
#LoginBox .title { font-weight:bold; font-size:22px; text-align:center; color:#333;   line-height:28px; padding-bottom:10px;}
#LoginBox .title span { font-weight:normal; text-align:center; font-size:12px; color:#333; }
#LoginBox .top-message { color:#333; height:70px; text-align:center;font-size:16px;transition:0.5s;}
#LoginBox input[type=text] {font-size:16px; width:200px; height:45px; border:1px solid #ccc; padding:0px 10px; line-height:25px; margin-bottom:2px; border-radius:5px}
#LoginBox input[type=password] {font-size:16px; width:200px; height:45px; border:1px solid #ccc; padding:0px 10px; line-height:25px; margin-bottom:2px;  border-radius:5px}
#LoginBox a span.login_btn { display:block; font-weight:bold; font-size:20px; width:130px; background:linear-gradient(to right, rgb(241 128 112), rgb(50 177 225)); color:#fff; padding:19px 8px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; text-align:center; width:100%;}
#LoginBox a span.login_btn:hover { display:block; font-weight:bold; font-size:20px; width:130px; background:#333; color:#fff; padding:19px 8px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; -o-border-radius:3px; text-align:center; width:100%;}
#LoginBox .logid, #LoginBox .logpw { width:200px; height:26px; border:1px solid #8b97ba; padding-left:4px; line-height:24px; margin-bottom:2px; }
#LoginBox .bottom-message { color:#777777; border:1px solid #ccc; padding:10px; line-height:1.5; word-break:break-all; }
#LoginBox .bottom-message-title { font-weight:bold; color:#bb0000; }
#LoginBox .banner { text-align:right; border-left:1px solid #ccc; }
#LoginBox .join-box{padding-top:10px;}
#LoginBox .join-box a{display:block;float:left;width:calc(100% / 3);text-align:center;font-size:1em;}

.bank_info{float:right; width:50%; text-align:right;}
.bank_info p{font-size:17px; }
.bank_info p span{font-weight:600; font-size:20px; color:#0075a9;}

@media (max-width:750px){
#LoginBox{width:100%; height:100vh; padding-top:35%;border-radius:0;}
#LoginBox .top-message{letter-spacing:-0.05rem;font-size:15px;}

}