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

/******* Reset *******/
*       {padding:0;margin:0;}
html,body{width:100%;height:100%;}
body { position: relative; font-weight:300; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 margin: 0; padding: 0; border: 0; vertical-align: baseline;
 font-family:"Nanum Gothic",arial,sans-serif;letter-spacing:-0.02rem;word-break:break-all;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul, dl { list-style: none; }
table {table-layout:auto;border-collapse:collapse;border-spacing:0; /*width:100%;*/}
table, th, td{border:0;vertical-align:middle;}
iframe { border:0; vertical-align:middle; width:100%; }
legend {width:0;height:0;line-height:0;font-size:0px;float:left;position:absolute;visibility:hidden;overflow:hidden}
p {margin:0;}
strong {font-weight:600}
address,i {font-style:normal}
button {cursor:pointer;}
a {color:inherit;text-decoration:none; cursor:pointer;}

/* LOGIN CSS */
.loginarea {
  display:flex; align-items:center; justify-content:center; width:100%; height:100%; text-align:center; line-height:1.0;
  font-family:"Nanum Gothic",arial,sans-serif; background:#e8e9eb;
}
.login-container { display:flex; width:920px; height:626px; background:#fff; border-radius:10px; box-shadow:0 5px 8px rgba(0,0,0,0.1); overflow:hidden; position:relative; }
.login-img { width:460px; height:100%; flex:none; background:#007bc8 url("images/img_login.png") no-repeat center; }
.login-con { width:100%; height:100%; position:relative; }
.login-tit { width:100%; height:50px; background:url("images/login_tit.png") no-repeat center; text-indent:-9999px; margin:90px 0 55px 0; }

.form-wrap { width:310px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.form-item { width:100%; text-align:left; }
.form-item .form-label {
  display:inline-block; width:100%; height:18px; letter-spacing:0;
  font-family: "Noto Sans KR"; font-size:12px; font-weight:400; color:#838ca5; line-height:1.0;
}
.form-item .form-input {
  width:100%; height:52px !important; box-sizing:border-box; border-radius: 5px; background:#f9fafe; border:solid 1px #e0e2ef;
  font-size:16px; color:#505e88; padding:0 10px; letter-spacing:0; font-family: Arial, Helvetica, sans-serif; font-weight:bold;
}
.form-item .form-input:focus { outline:none; border-color:#899aca; }

.saveid { display:flex; align-items:center; width:100%; font-size:12px; color:#666; gap:3px; letter-spacing:-0.5px; }
.saveid input[type="checkbox"] { accent-color:#505e88; }

.form-btn { width:100%; display:flex; align-items:center; justify-content:center; flex-direction: column; gap:10px; }
.btn_login {
    display:flex; align-items:center; justify-content:center; width:100%; height:53px !important; cursor:pointer; border:0; box-sizing:border-box;
  letter-spacing: 5px; font-size:19px !important; color:#fff; font-weight:600; font-family:"Nanum Gothic",arial,sans-serif; border-radius: 5px;
    background:#002b68 url("images/bg_btn_arrow.png") no-repeat right center; margin-top:5px;
    }
.btn_join {
  display:flex; align-items:center; justify-content:center; width:auto; height:28px !important; cursor:pointer; border:0;
  background:#fff url("images/icon_join.png") no-repeat 10px center; padding:0 10px 0 30px; border-radius: 5px;
  font-size:13px; font-weight:600; color:#002b68; font-family:"Nanum Gothic",arial,sans-serif; letter-spacing:-0.5px;
}
.btn_join:hover { background-color:#eee; }

.login-bt { display:flex; align-items:center; flex-direction:column; width:100%; padding:0 30px; box-sizing:border-box;  position:absolute; bottom:20px; letter-spacing: 0;  }
.login-bt .bt-copy { display:inline-block; font-size:10px; color:#787878; padding-top:6px; }
.login-bt .bt-link { display:flex; align-items:center; }
.login-bt .bt-link li { border-right:solid 1px #ddd; font-size: 11px !important; color:#787878; line-height:1.0; padding:0 5px;  }
.login-bt li:last-child { padding-right:0; border-right:0; }
.login-bt li a { font-size:11px !important; color:#787878; text-decoration:none !important; }

/* 팝업컨텐츠 */
.layerpop{z-index:3000;display:none;position:fixed;left:0;top:0;width:100%;height:100%;box-sizing:border-box; padding:5%; background-color:rgba(255,255,255,0.7)}
.layerpop_header { width:100%; height:70px; box-sizing:border-box; position:relative;  }
.layer-closebtn{text-decoration:none;font-size:60px;font-weight:400;color:#666; position:absolute; top:-2px; right:20px}
.layer-closebtn:hover,.layer-closebtn:focus{color:#e5107b;text-decoration:none;cursor:pointer}
.layerpop-content{margin:auto;background-color:#fff;position:relative; padding:0;outline:0;width:60%; min-width:500px; border-radius:15px; border:solid 1px #ddd; overflow:hidden; box-shadow:2px 5px 25px rgba(0,0,0,0.2); }
.layer-container{ display:inline-block; width:100%;height:100%;overflow-y:auto; overflow-x:hidden; padding:0 ; box-sizing:border-box; text-align:left; }
.layer-container::-webkit-scrollbar { width: 10px; } /* width */
.layer-container::-webkit-scrollbar-track {  background: #f1f1f1; } /* Track */
.layer-container::-webkit-scrollbar-thumb {  background: #888; } /* Handle */
.layer-container::-webkit-scrollbar-thumb:hover {  background: #555; } /* Handle on hover */

.membership_head { width:100%; height:50px; line-height:1.0; letter-spacing:-1px; background:#3b495c; position:absolute; top:0; left:0; }
.membership_head p { display:flex; align-items:center; height:50px; color:#fff; font-size:19px; font-weight:600; padding-left:25px;  }
.btn_popclose { display:flex; width:50px; height:50px; align-items:center; justify-content:center; color:#fff; font-size:30px; position:absolute; top:0; right:10px; }
.btn_popclose:hover,.btn_popclose:focus { cursor:pointer; }
.membership_body {  width:100%; box-sizing:border-box; padding:70px 25px 40px 25px;  }
.membership_title { width:100%; height:28px; font-size:18px; font-weight:700; color:#3b495c; }
.membership_con { display:inline-block; width:100%; height:230px; box-sizing:border-box; padding:15px 20px; line-height:1.5; font-size:14px; color:#545454; border:solid 1px #ddd; overflow-y:auto; word-break:keep-all; }
.membership_con+.membership_title  { margin-top:20px; }
.btn_area { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:20px; }
.btn_basic {
    display:inline-block; width:200px; height:50px !important; background:#fff; border:solid 1px #ccc; box-sizing:border-box; color:#333; cursor:pointer;
     font-family: Nanum Gothic, Arial, Helvetica, sans-serif; font-size:16px; font-weight:600;
    }
.btn_check {    background:#004c98; color:#fff; border:0; }

.mem_docu_title01 { display:block; width:100%; font-size:18px; font-weight:700; color:#333; margin-bottom:20px; }
.mem_docu_title02 { display:block; width:100%; font-size:14px; font-weight:700; color:#333; margin-bottom:5px; }
.mem_docu_con+.mem_docu_title01, .mem_docu_list+.mem_docu_title01 { margin-top:15px; }
.mem_docu_con+.mem_docu_title02, .mem_docu_list+.mem_docu_title02 { margin-top:15px; }
.mem_docu_con { display:block; width:100%; margin-bottom:10px; font-size:13px; }
.mem_docu_list { display:inline-block; list-style-type:decimal; margin-left:15px;  margin-bottom:10px; box-sizing:border-box;}
.mem_docu_list li { padding-left:5px; margin-bottom:2px; font-size:13px; word-break:keep-all;  }
.mem_docu_list02 { display:inline-block; width:100%; margin:0 0 10px 5px; list-style:none; box-sizing:border-box; }
.mem_docu_list02 li { padding-left:5px; margin-bottom:2px; text-indent:-15px; font-size:13px;  word-break:keep-all;}
.mem_docu_list02 li:before { content:"- "; padding-left:5px; }
.mem_docu_bold { display:inline-block; font-weight:600; color:#333; }


/* 관리계정 검색 버튼 */
.adminInfo {
  display:inline-block; position:absolute; top:10px; right:10px; cursor:pointer;
  border:solid 1px #ccc; box-shadow:0 1px 1px rgba(0,0,0,0.1); padding:3px 7px 6px 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:bold; font-size:11px; color:#545454; text-decoration:none !important;}



/* 로그인 css
.login_container { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:0.6rem; width:100%; height:100%; background:#ddd; }
.login_box {
  display:grid; grid-template-columns:30.0rem 1fr; overflow:hidden; width:65rem; height:43rem; background:#fff;
   box-shadow:0 2rem 3rem rgba(0,0,0,0.1); border-radius:1.0rem; position:relative;
  }
.login_tail { display:flex; align-items:center; justify-content:space-between; width:65rem; text-align:left;}
.login_tail .login_copy { font-size:0.81rem; color:#8b8a8a; letter-spacing:0.02rem; }

.login_img { background:#f8f8f8 url("images/bg_ipbrain.png") no-repeat center bottom; position:relative;}
.login_msg { display:block; width:75%; position:absolute; top:100px; left:55px; text-align:center; }
.solution_name{ display:flex;flex-direction:column; justify-content:center; gap:0.3rem; width:100%; margin-bottom:0.8rem;}
.sol_logo { display:inline-block;margin-bottom:0.5rem; }
.sol_tx { display:inline-block; width:100%; font-size:1.16rem; font-weight:800; color:#545454;;transform:rotate(-0.03deg); }
.solution_detail { width:100%; font-size:0.9rem; line-height:1.6; color:#545454; word-break:keep-all; word-wrap:word-break; }

.login_con {display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.8rem; padding:5.0rem 6.0rem; box-sizing:border-box;}
.login-head {width:100%; font-weight:800; color:#333; font-size:2.2rem; margin-bottom:0.3rem;}
.login-item {display:flex; flex-direction:column; gap:3px; width:100%;}
.login-item .login-input { width:100% !important; height:4.0rem !important; border-radius:0.2rem; padding:0 1.0rem !important; background:#fff; border-color:#888 !important; font-size:15px; }
.login-item .login-tit { width:100%; font-weight:800; color:#545454; font-size:1.0rem;letter-spacing:0 !important; margin-bottom:0.1rem;}
.login-item .login-btn {
  width:100%; height:4.5rem !important; background:#333 url("images/icon_arrow.png") no-repeat center right;
  color:#fff; letter-spacing:0 !important; font-size:1.4rem; font-weight:800 !important;border-radius:0.2rem; margin-top:0.8rem;
  }

.adminInfo {
  display:inline-block; position:absolute; top:24px; right:24px; 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;text-decoration:none; letter-spacing:0; }
*/