@import url("../ui/fonts.css");

/* BASIC CSS */
*       {padding:0;margin:0;}
html    { height:100%; margin:0; padding:0; }
body    {
    height:100%; font-family: 'Nanum Gothic', Arial, Helvetica, sans-serif; font-size: 13px; line-height:1.3; color: #333;
    overflow:hidden !important;
    }

table.basic { width:100%; border-style:hidden; border-collapse:collapse; border:0; table-layout:fixed }

img { border:0 }
A:link, A:visited, A:active {COLOR:#333; font-family: 'Nanum Gothic', Arial, Helvetica, sans-serif; font-size: 13px; TEXT-DECORATION:none }
A:hover { TEXT-DECORATION:none; COLOR:#0b74c0;}

input, textarea {
    background-color:#fff;  border:solid 1px #ccc;   COLOR:#333333; font-size:13px;
    font-family:  "Nanum Gothic", Arial, Helvetica, sans-serif; line-height:1.0; margin: 0 1px !important;
    display:inline-block;
    }
textarea { height:50px; overflow-y:auto; width:98%; padding:3px; line-height:1.3 !important;}
select{ font-size:13px; height:25px; font-family:  "Nanum Gothic", Arial, Helvetica, sans-serif; }
div,dl,dt,dd,p,ul,li{margin:0px; padding:0px;}
ul, dl { list-style:none; }

input:focus, textarea:focus { border:solid 1px #66afe9 !important; }

::-webkit-input-placeholder { color:#999 !important; font-size:13px !important; font-weight:normal; font-family:'Nanum Gothic',Arial, Helvetica, sans-serif !important; }
::-moz-placeholder { color:#999 !important; font-size:13px !important; font-weight:normal; font-family:'Nanum Gothic',Arial, Helvetica, sans-serif !important; }
:-moz-placeholder { color:#999 !important; font-size:13px !important;  font-weight:normal;font-family:'Nanum Gothic',Arial, Helvetica, sans-serif !important; }
:-ms-input-placeholder { color:#999 !important; font-size:13px !important;  font-weight:normal;font-family:'Nanum Gothic',Arial, Helvetica, sans-serif !important; }


/* LOGIN CSS */
.loginarea { display:block; height:100%; text-align:center; line-height:1.0; }
.loginarea_header { width:100%; height:69px; background: #fff; border-bottom:solid 1px #ddd; position:relative; }
.loginarea_header h1 {
    display:inline-block; width:210px; height:69px; position:absolute; top:0; left:0; text-indent:-9999px;
    background:url("images/top_logo.png") no-repeat;
    }
.loginarea_header .header_msg {
    display:inline-block; width:290px; height:69px; position:absolute; top:0; right:0; text-indent:-9999px;
    background:url("images/top_msg.png") no-repeat right center;
    }
.loginarea_body { width:100%; padding-top:260px; background:url("images/bg_login_title.png") no-repeat top center; }
.loginbox { display:inline-block; width:400px; margin:0 auto; line-height:1.0; position:relative; }
.login_input { width:100%; outline:solid 2px #ccc; }
.login_input li { display:block; border-bottom:solid 1px #ddd; }
.login_input li:last-child { border-bottom:0; }
.loginbox li:last-child { margin-bottom:0; }
.loginbox input {
    display:inline-block; width:100%; height:64px; box-sizing:border-box; padding-left:75px; padding-right:20px; border:0;
    font-size:16px; font-weight:600;
  }
.loginbox input:focus { border:0 !important; }
.loginbox input[type=text] { background:#fff url("images/icon_id.png") no-repeat left center; }
.loginbox input[type=password] { background:#fff url("images/icon_pw.png") no-repeat left center; }
.loginarea_body .btn_login {
    display:block; width:328px; height:64px; margin:0 auto; cursor:pointer; border:0; font-size:22px !important; color:#fff; font-weight:Bold;
    background:#eb336e url("images/bg_btn_arrow.png") no-repeat right center;
    }
.space { display:block; width:100%; height:40px; }
.login_info { display:block; width:100%;  }
.login_info p { font-size:13px; color:#77787c; padding:47px 0 15px 0; letter-spacing:-0.5px; line-height:1.5; }
.login_info .block_tail { display:inline-block; width:36px; height:3px; background-color:#9fa0a0; }
.loginarea_bottom { width:100%; position:absolute; bottom:30px; left:0; }
.loginarea_bottom ul { display:inline-block; position:absolute; top:0; left:30px;  }
.loginarea_bottom li {
    display:inline-flex; float:left; align-items:center; height:13px; padding:0 10px; border-right:solid 1px #ddd;
    font-size: 11px; color:#999; line-height:1.0;
    }
.loginarea_bottom li:last-child { padding-right:0; border-right:0; }
.loginarea_bottom li a { font-size:11px; color:#999; }
.bottom_notice { display:inline-block; font-size:11px; color:#999; position:absolute; top:0; right:30px; }
.adminInfo {
  display:inline-block; position:absolute; top:-2px; right:-100px; cursor:pointer;
  border:solid 1px #ccc; box-shadow:0 1px 1px rgba(0,0,0,0.1); padding:5px 7px 8px 20px; line-height:1.0;
  background:#fff url("images/icon_usersearch.png") no-repeat left center;
  }
.adminInfo:hover { border-color:#336fde; }
.adminInfo:hover a { color:#336fde; }
.adminInfo a { font-weight:600; font-size:11px; color:#545454;}

.otpInfo {
  display:inline-block; position:absolute; top:130px; right:-100px; cursor:pointer;
  border:solid 1px #ccc; box-shadow:0 1px 1px rgba(0,0,0,0.1); padding:5px 7px 8px 20px; line-height:1.0;
  background:#fff url("images/icon_usersearch.png") no-repeat left center;
  }
.otpInfo:hover { border-color:#336fde; }
.otpInfo:hover a { color:#336fde; }
.otpInfo a { font-weight:600; font-size:11px; color:#545454;}

.otp-container {
    display: flex;
    align-items: center;
    gap: 10px; /* 입력 필드와 버튼 사이의 간격 */
}

/* OTP 인증 버튼 스타일 */
.otp-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: #007bff; /* 버튼 배경색 */
    color: #fff; /* 버튼 텍스트 색 */
    text-decoration: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.otp-button:hover {
    background-color: #0056b3; /* 버튼 호버 효과 */
}