/* ------ 담당자 주석 표기, 주석 표기 시 가급적 영문표기(언어 설정 에러 시 한글 깨짐), 주요 부분 주석 표기, 사용하지 않는 부분 삭제, 에러 시 오타 확인 ---- */
/* -----------------------------------------
1st : 2022.03.28 hs-kim 엠로 디자인팀
2nd : 2022.06.20 hs-kim 엠로 디자인팀
----------------------------------------- */
@charset "utf-8";

/** RESET **/
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,
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;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block}

html, body {width:100%; height:100vh;line-height: 1;}
body {
    width: 100%;
    height: 100%;
    font-size: 12px;
    line-height: 1.5em;
    font-family: 'Malgun Gothic', 맑은 고딕, dotum, '돋움', gulim, '굴림', Arial;
		font-weight: normal;
		color: #333;
    
    -webkit-text-size-adjust: none;
}
ol, ul {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none}
a, em, label, span, strong, button {display: inline-block;}
a, a:link, a:visited {cursor: pointer;text-decoration: none;color: #333;}
p, a, h2, h3 {word-wrap: break-word;}
img, fieldset {border: 0 none;}
img, input, button, select, textarea {vertical-align:middle}
legend, .hidden {position: absolute;top: 0;left: 0;width: 0;height: 0;display: block;overflow: hidden;visibility: hidden;font-size: 0;line-height: 0;z-index:-1;}
table {border-spacing: 0;border-collapse:collapse;}
caption {padding:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0;}
button {cursor:pointer}
button::-moz-focus-inner {border: 0;padding: 0;}
input, select, textarea {font-size: 100%;border: 0;}
label {cursor:pointer}
em, address {font-style: normal;}

div, a {box-sizing: border-box;}
a {transition: background .2s;cursor:pointer}

/* placeholder-color */
::placeholder {color: #888888;opacity: 1; /* Firefox */}
:-ms-input-placeholder {color: #888888; /* Internet Explorer 10-11 */}
::-ms-input-placeholder {color: #888888;/* Microsoft Edge */}

* {box-sizing:border-box;}


/****************** 외 부 로 그 인 ******************/
/** LAYOUT **/
#wrap_bg {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
}
#wrap {
  position:absolute; 
  top: 49%;
  left: 50%;
  margin-top:-190px; 
  margin-left:-390px; 
  width: 780px; 
  height: 380px; 
  min-height: 450px;
  z-index: 99;
}
#wrap section .leftBox {
  float: left;
  width: 320px;
  height: 350px;
  background: #E1E4FF;
  border: 1px solid #A1A5CB;
  border-radius: 4px;
  padding: 35px 45px 45px 45px;
}
#wrap section .rightBox {
  float:right;
  width: 450px;
  height: 350px;
}
/* LOGIN AREA */
.login h1 {
  font-size: 18px;
  color: #6C7095;
  text-align:center;
  letter-spacing: -1px;
  margin-bottom: 30px;
  vertical-align: middle;
}
.login h1 span.logo_bar {
  background: #6C7095;
  width: 18px;
  height: 1px;
  margin: 15px auto;
}
.login ul li input {
    width: 100%;
    height: 36px;
    background: #fff;
    padding: 0 15px;
    border: 1px solid #D0D5F9;
    border-radius: 3px;
    font-size: 14px;
    color:#222;
    box-sizing: border-box;
}
.login ul li:nth-child(1) {margin-bottom: 4px;}

.login ul li input::placeholder {color:#999;letter-spacing: -1px;}
.login ul li input::-webkit-input-placeholder {color:#999;letter-spacing: -1px;}
.login ul li input:-ms-input-placeholder {color:#999;letter-spacing: -1px;}
.login a.btnLogin {
    display:block;
    width: 100%;
    height:52px;
    background: #131B92;
    border-radius: 3px;
    font-size:18px;
    color:#fff;
    line-height:50px;
    letter-spacing:-1px;
    text-align:center;
}
.login a:hover.btnLogin {background: #3E3EF4;color: #fff;}

.option {margin: 12px 0;}
.option p {display: inline-block;color: #616491;}
.option p input[type="checkbox"]:not(old) {margin: 0;padding: 0;opacity: 0;width: 0;background: url(../img/ico_check.png) no-repeat 0 0;}
.option p input[type="checkbox"]:not(old) + label {cursor: pointer;display: inline-block;text-align: left;height: 17px;padding-left: 17px;background: url(../img/ico_check.png) no-repeat 0 0;vertical-align: top;}
.option p input[type="checkbox"]:not(old):checked + label {background: url(../img/ico_check.png) no-repeat -17px 0;}
.option p label + span {vertical-align: top;padding-left: 5px;letter-spacing: -1.5px;line-height: 1.5;}
.option span {float: right;}
.option a.pw {
  color: #616491;
  letter-spacing: -1px;
}
.option a:hover {font-weight: bold;text-decoration: underline;text-underline-position:under; }

/*배너*/
.rightBox .bnn {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;
}
.rightBox .bnn a { 
  width: 220px;
  height: 210px;
  background: #fff url(../img/bnn.png) no-repeat 0 80px;
  font-weight: bold;
  font-size: 16px;
  color: #131B92;
  border: 1px solid #2E39C1;
  border-radius: 4px;
  padding: 25px 0 0 30px;
  letter-spacing: -1px;
}
.rightBox .bnn_s {
  width: 100%;
  height: 130px;   
  background: #fff;
  border: 1px solid #BFC2E6;
  border-radius: 4px;
  padding: 10px;
}
.rightBox .bnn a:hover span {
  background: #FE641D;
  color: #fff;
  transition: 0.4s;
}
.rightBox .bnn a.bnn01 {margin-bottom: 10px;margin-right: 5px;}
.rightBox .bnn a.bnn02, .rightBox .bnn a.bnn02:hover {background-position: -220px 80px;margin-bottom: 10px;}
.rightBox .bnn_s .bnn_tit {
  font-size: 16px;
  font-weight: bold;
  color: #393939;
}
.rightBox .bnn_s .bnn_tit::before {
    background-color: #FE641D;
    display: inline-block;
    width: 4px;
    height: 15px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    vertical-align: top;
    content: '';
    margin-right: 3px;
    vertical-align: -1px;
}
.rightBox .bnn_s .bnn_tit>span {
  float: right;
}
.rightBox .bnn_s .bnn_tit>span a {
  font-size: 11px;
  color: #8E90B4;
  letter-spacing: -0.8px;
}
.rightBox .bnn a:hover {
  border: 1px solid #131B92;
  background: #131B92 url(../img/bnn_ov.png) no-repeat 0 80px;
  color: #fff;
  transition: 0.3s;
}
.rightBox .bnn a span {
  background: #E9EAFF;
  font-size: 12px;
  color: #676DC1;
  padding: 3px 7px;
  border-radius: 20px;
  line-height: 1;
  margin-top: 10px;
}

.rightBox .bnn_s>.box {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.rightBox .bnn_s>.box a {
  background: #EEEEEE;
  width: 210px;
  height: 50px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  color: #131B92;
  text-align: center;
  line-height: 50px;
}
.rightBox .bnn_s>.box a:hover {
  background: #C6CCFF;
  color: #131B92;
  transition: 0.3s;
}
/*footer*/
#wrap footer {
  float: left;
  display: block;
  width: 100%;
  margin-top: 20px;
}
#wrap footer .list_corp {
  display: inline-block;  
}
#wrap footer .list_corp a {
  font-size: 12px;
  color: #9395AF;
  letter-spacing: -1px;
  line-height: 1;
}
#wrap footer .list_corp a:hover {
  text-decoration: underline;
  text-underline-position: under;
  font-weight: bold;
  color: #5e6081;
}
#wrap footer .list_corp .line_bar {
  padding: 0 7px;
  color: #A7B2D3;
  line-height: 1;
  font-size: 12px;
}
#wrap footer .copyright {
  float: right;
  font-size: 12px;
  font-family: Arial;
  color: #A5A7CB;
}
.mt_10 {margin-bottom: 10px;}
/****************** 내 부 로 그 인 ******************/
/** LOGIN LAYOUT **/
#inn_wrap_bg {
  position: relative;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
}
#inn_wrap {
  position:absolute; 
  top: 49%;
  left: 50%;
  margin-top:-210px; 
  margin-left:-170px; 
  width:340px; 
  height:420px; 
  min-height: 450px;
  z-index: 99;
}
#inn_wrap section .inn_loginBox {
  width:100%;
  height: 420px;
  background: #E1E4FF;
  border: 1px solid #A1A5CB;
  border-radius: 4px;
  padding: 54px 50px 50px 50px; 
}

/** LOGIN DETAIL **/
/* LOGIN AREA */

.inn_login h1 {
  font-size: 18px;
  color: #6C7095;
  text-align:center;
  letter-spacing: -1px;
  margin-bottom: 35px;
  vertical-align: middle;
}
.inn_login h1 span.logo_bar {
  background: #6C7095;
  width: 18px;
  height: 1px;
  margin: 15px auto;
}
.inn_login ul li input {
  width: 100%;
  height: 40px;
  background: #fff;
  padding: 0 15px;
  border: 1px solid #D0D5F9;
  border-radius: 3px;
  font-size: 14px;
  color:#222;
  box-sizing: border-box;

}.inn_login ul li:nth-child(1) {margin-bottom: 4px;}

.inn_login ul li input::placeholder {color:#999;letter-spacing: -1px;}
.inn_login ul li input::-webkit-input-placeholder {color:#999;letter-spacing: -1px;}
.inn_login ul li input:-ms-input-placeholder {color:#999;letter-spacing: -1px;}
.inn_login a.btnLogin {
    display:block;
    width: 100%;
    height:52px;
    background: #131B92;
    border-radius: 3px;
    font-size:18px;
    color:#fff;
    line-height:50px;
    letter-spacing:-1px;
    text-align:center;
}
.inn_login a:hover.btnLogin {background: #3E3EF4;color: #fff;}

.inn_option {margin: 12px 0 20px 0;}
.inn_option p {display: inline-block;color: #616491;}
.inn_option p input[type="checkbox"]:not(old) {margin: 0;padding: 0;opacity: 0;width: 0;background: url(../img/ico_check.png) no-repeat 0 0;}
.inn_option p input[type="checkbox"]:not(old) + label {cursor: pointer;display: inline-block;text-align: left;height: 17px;padding-left: 17px;background: url(../img/ico_check.png) no-repeat 0 0;vertical-align: top;}
.inn_option p input[type="checkbox"]:not(old):checked + label {background: url(../img/ico_check.png) no-repeat -17px 0;}
.inn_option p label + span {vertical-align: top;padding-left: 5px;letter-spacing: -1.5px;line-height: 1.5;}
.inn_option span {float: right;}
.inn_option a.pw {
  color: #616491;
  letter-spacing: -1px;
}
.inn_option a:hover {font-weight: bold;text-decoration: underline;text-underline-position:under; }

/* FOOTER */
#inn_wrap footer .copyright {
  color: #A5A7CB;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}

/* 2022.06.20 hs-kim 엠로 디자인팀 - 추가*/
.popupSection .content {
  min-height:400px; 
  height:450px; 
  margin: 30px;
  margin-bottom:0; 
  padding:30px;
  box-sizing:border-box;
  background: #f1f1f1;
  font-size:13px;
  letter-spacing: -0.5px;
  overflow:auto;
  line-height: 1.8;
}
.popupSection .content p {color:#666; font-size:13px; margin-bottom:15px;}
.popupSection .content ul {width:100%; box-sizing:border-box}
.popupSection .content ul li {padding-left:12px; font-size:13px;}
.popupSection .content ul.style {padding-left:10px}
.popupSection .content ul.style li{background: url('../img/login/li_style.png') no-repeat left 9px; margin-bottom: 3px;}

.popupSection .content h1 {font-size:14px; font-weight:600; color:#111;margin: 15px 0 10px 0;}
.popupSection .content h1:nth-child(1) {margin-top:0}
.popupSection .content h3 {font-weight:600; padding-top:10px;}
.popupSection .content ol {list-style:decimal; padding-left:15px; padding-bottom:5px}
.popupSection .content ul {padding-bottom:5px; padding-left:5px}

.txt_under {text-decoration: underline;text-underline-position: under;font-weight: bold;}
.pl-15 {padding-left: 15px;padding-bottom:5px;}
.mailto_link:link {font-weight: bold;color: #3E3EF4;letter-spacing: 0;}
.mailto_link:hover {text-decoration: underline;text-underline-position: under;}



/** POPUP_PW SEARCH **/
.popupWrap {width:100%;height:100%;background:#fff;}
.popupWrap .popupHead {width:100%;height:60px;border-radius:2px 2px 0 0;background:#222;box-sizing:border-box;}
.popupWrap .popupHead b {
  text-align: left;
  font-size: 20px;
  color: #fff;
  letter-spacing: -1.5px;
  font-weight: bold;
  line-height: 60px;
  padding-left: 20px;}
.popupWrap .popupSection .commt {text-align: center;font-size: 15px;color: #666;line-height: 1.8;margin: 40px 0 40px;letter-spacing: -0.5px;}
.popupWrap .popupSection .commt b {color: #222; text-decoration: underline;}
.popupWrap .popupSection .formBox {width: 82%;height: auto;margin: 0 auto;background: #f7f7f7;padding: 30px;box-sizing: border-box;}
.popupWrap .popupSection .formBox p {overflow: hidden;padding-bottom: 10px;}
.popupWrap .popupSection .formBox p:last-child {padding-bottom: 0;}
.popupWrap .popupSection .formBox label {float: left;font-size: 14px;color: #222;vertical-align: middle;line-height: 2.2;letter-spacing: -1;}
.popupWrap .popupSection .formBox input {float: right;width: 240px;height: 32px;border: 1px solid #e1e1e1;background: #fff;vertical-align: middle;border-radius: 3px;}
.popupWrap .popupSection .btnArea {text-align: center;margin-top: 30px;}
.popupWrap .popupSection .btnArea a {
  width: 110px;
  height: 40px;
  text-align: center;
  background: #3E3EF4;
  border: 1px solid #3E3EF4;
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 38px;
  margin: 0 2px;
}
.popupWrap .popupSection .btnArea a:hover {
  background: #fff;
  color: #3E3EF4;
  border: 1px solid #3E3EF4;
}
.popupWrap .popupSection .btnArea a.btnClose {
  background: #666;
  color: #fff;
  border: 1px solid #666;
}
.popupWrap .popupSection .btnArea a.btnClose:hover {
  background: #fff;
  color: #666;
  border: 1px solid #666;
}

/** LOGIN SUCCESS & FAIL, ERROR **/
.messageWrap {background:#f5f5f5;}
.messageWrap .wrap {position:relative;width:100%;height:100%;}
.messageWrap .container {position:fixed;left:50%;top:50%;width:600px;height:460px;margin-top:-280px;margin-left:-300px;box-shadow:0px 3px 8px #dadada;background:#fff;}
.messageWrap .container2 {position:fixed;left:50%;top:50%;width:600px;height:500px;margin-top:-300px;margin-left:-300px;box-shadow:0px 3px 8px #dadada;background:#fff;}
.messageWrap .header {width:100%;height:52px;border-radius:5px 5px 0 0;background:#8e8c8b;box-sizing:border-box;}
.messageWrap .header .logo {display:inline-block;width:152px;height:34px;background:url(../img/logo_message.png) no-repeat;margin:20px 0 0 25px;text-indent:-10000px;}
.messageWrap .section {width:100%;box-sizing:border-box;}
.messageWrap .section .subject {overflow:hidden;margin:80px auto 50px;}
.messageWrap .section .subject b,
.messageWrap .section .subject span {display:inline-block;letter-spacing:-1px;}
.messageWrap .section .subject b {font-size:80px;font-weight:normal;vertical-align:top;letter-spacing:-6px;line-height: 1;}
.messageWrap .section .subject span {font-size:27px;color:#303030;font-weight:bold;line-height:1.2em;letter-spacing:-1px;padding-top:10px;padding-left:22px;}
.messageWrap .section .explan {width:370px;min-height:32px;margin:0 auto;background:url(../img/ico_caution_y.png) no-repeat;padding-left:55px;font-size:12px;color:#7f7f7f;line-height:1.3em;}
.messageWrap .section .subject2 {width:350px;margin:80px auto 50px;}
.messageWrap .section .subject2 b {display:inline-block;min-height:32px;background:url(../img/ico_caution_y.png) no-repeat;padding-left:60px;padding-top:7px;font-size:24px;font-weight:bold;letter-spacing: -1px;}
.messageWrap .section .explan2 {width:370px;margin:0 auto;font-size:13px;color:#252424;line-height:1.5em;text-align:center;}
.messageWrap .section .subject3 {width:360px;margin:90px auto 70px;}
.messageWrap .section .subject3 b {display:inline-block;min-height:71px;background:url(../img/ico_logout_y.png) no-repeat 38px 16px;padding-left:100px;padding-top:5px;font-size:24px;font-weight:bold;line-height:1.3em;letter-spacing: -1px;}
.messageWrap .section .subject4 {width:320px;margin:120px auto 50px;}
.messageWrap .section .subject4 b {display:inline-block;min-height:35px;background:url(../img/ico_caution_y.png) no-repeat;padding-left:60px;padding-top:7px;font-size:24px;font-weight:bold;}
.messageWrap .section .hr {width:360px;height:1px;background:#b1b1b1;margin:40px auto;}
.messageWrap .section .hr2 {width:400px;height:1px;background:#b1b1b1;margin:40px auto;}
.messageWrap .section .commt {text-align:center;font-size:15px;color:#252424;line-height:1.6em;}
.messageWrap .section .commt b {}
.messageWrap .section .btn_bg_msg {
  width:280px;
  height:52px;
  border-radius:3px;
  border:0;
  background: #3E3EF4;
  cursor:pointer;
  text-align:center;
  font-size:18px;
  color:#fff;
  line-height:1.3em;
}
.messageWrap .section .btn_bg_msg:hover {
  background: #222;
  color: #fff;
}
.messageWrap .section .btn_cnt {text-align:center;margin-top:25px;}